*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-image: url(https://textures.neocities.org/textures/stone-and-brick/GRYCON7.JPG);
    --aboutWidth: clamp(220px, 15vw, 360px);
    --aboutDuration: 800ms;
    --bioHeight: clamp(36px, 6vh, 78px);
    /* Entry splash → homepage (desktop default; mobile overrides below) */
    --homeTextSubmergeDuration: 1300ms;
    --homeOverlayClearDuration: 220ms;
    --homeTitleFadeDuration: 680ms;
    --homeTitleFadeDelay: 0ms;
}

@media (max-width: 900px) {
    :root {
        --homeTextSubmergeDuration: 1500ms;
        --homeOverlayFadeStart: 380ms;
        --homeOverlayClearDuration: 820ms;
        --homeTitleFadeDuration: 880ms;
        --homeTitleFadeDelay: 100ms;
        --homeEaseEntry: cubic-bezier(0.33, 1, 0.68, 1);
    }
}

body{
    width: 100%;
    position: relative;
    font-family: 'poppins', sans-serif;
    /*background-color: #8c8c8c;*/
    background: none;
    background-size: auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-position var(--aboutDuration) ease-in-out;
}
/* Author bio panel (top) */
.bio-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: var(--bioHeight);
    transform: translateY(-100%);
    background: #ffffff;
    color: #222;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: transform var(--aboutDuration) ease-in-out;
    z-index: 2;
    padding: 8px 12px; /* keep inside var(--bioHeight) */
    box-sizing: border-box;
    overflow: hidden; /* ensure content doesn't increase visual height */
    display: flex;
    align-items: center;
}

body.bio-open .bio-panel {
    transform: translateY(0);
}

/* Push everything down when bio opens */
body.bio-open .title-section,
body.bio-open .author-section {
    transform: translateY(var(--bioHeight));
}

/* Shift stone background vertically as well when bio opens */
body.bio-open {
    background-position-y: var(--bioHeight);
}

.title-section,
.author-section {
    transition: transform var(--aboutDuration) ease-in-out;
}

/* Bio panel grain and ink effects (same as About) */
.bio-panel::after,
.bio-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.bio-panel::after {
    opacity: 0.26;
    background-size: 120px 120px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.bio-panel::before {
    opacity: 0.14;
    background-image: repeating-radial-gradient(
        rgba(0,0,0,0.14) 0 0.7px,
        transparent 0.7px 2px
    );
    background-size: 3.2px 3.2px;
}

/* Ink effect inside bio text */
.bio-panel p {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.65;
    font-size: 16px;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Match/boost About ink grain */
    background-image:
        linear-gradient(#171717, #171717),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.8' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1.25 -0.12'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: auto, 40px 40px;
    background-blend-mode: multiply;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0.3px rgba(0,0,0,0.55);
    text-shadow: 0 0 0.6px rgba(0,0,0,0.36);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
}

::selection{
    background: #8c8c8c;
    color: black;
}

.navbar{
    width: 100%;
    height: 60px;
    /*position: fixed;*/
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
    /*background: #fff;*/
    z-index: 9;
}

.links-container{
    display: flex;
    list-style: none;
}

.link{
    padding: 10px;
    margin-left: 10px;
    text-decoration: none;
    text-transform: capitalize;
    color: #000;
}

.header{
    /*margin-top: 60px;*/
    width: 100%;
    height: calc(100vh - 60px);
    background: url(../img/header.png);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content{
    text-align: center;
}

.heading{
    color: #fff;
    text-transform: capitalize;
    font-size: 80px;
    line-height: 60px;
    /*margin-bottom: 80px;*/
}

.heading .small{
    display: block;
    font-size: 40px;
}

.heading .no-fill{
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 2px #fff;
}

.btn{
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    color: #000;
    text-decoration: none;
    text-transform: capitalize;
}

.blogs-section{
    word-break: break-word;
    width: 100%;
    height: 100vh;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
}

/* About panel and slide animation */
/* sections slide to reveal about */
body.about-open .title-section,
body.about-open .author-section {
    transform: translateX(calc(-1 * var(--aboutWidth)));
}

/* Smoothly animate the sections so titles move in sync with background */
.title-section,
.author-section {
    transition: transform var(--aboutDuration) ease-in-out;
}

/* shift the stone background with the sections */
body.about-open {
    background-position-x: calc(-1 * var(--aboutWidth));
}

.about-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--aboutWidth);
    max-width: none;
    min-width: 0;
    background: #ffffff;
    color: #222;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    z-index: 500; /* below sections so it's revealed when they shift */
    display: flex;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: transform var(--aboutDuration) ease-in-out;
    pointer-events: none; /* prevent accidental hover when closed */
    position: fixed;
    overflow: hidden; /* keep grain overlay inside */
}

body.about-open .about-panel {
    transform: translateX(0);
    pointer-events: auto;
}

.about-panel p {
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.65;
    font-size: 16px;
    /* Ink-on-paper: visible grain inside glyphs */
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image:
        linear-gradient(#171717, #171717),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1.2 -0.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: auto, 48px 48px;
    background-blend-mode: multiply;
    -webkit-background-clip: text;
    background-clip: text;
    /* Slight edge bleed for printed look */
    -webkit-text-stroke: 0.25px rgba(0,0,0,0.45);
    text-shadow: 0 0 0.45px rgba(0,0,0,0.32);
    /* Reduce subpixel smoothing so grain is visible */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: auto;
}

/* Subtle paper grain overlay to imitate e-ink/paper texture */
/* Layered grain for higher visibility (still subtle) */
.about-panel::after,
.about-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.about-panel::after {
    opacity: 0.26; /* stronger paper grain */
    background-size: 120px 120px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.about-panel::before {
    opacity: 0.14; /* more visible dot layer */
    background-image: repeating-radial-gradient(
        rgba(0,0,0,0.14) 0 0.7px,
        transparent 0.7px 2px
    );
    background-size: 3.2px 3.2px;
}

.blog-image{
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    /*margin-bottom: 10px;*/
    /*margin-top: 10px;*/
}

.blog-overview{
    margin: 10px 0 20px;
    line-height: 30px;
}

.btn.dark{
    background: #1b1b1b;
    color: #fff;
}

#first-container {
    display: block;
    background-color: #8c8c8c;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity var(--homeOverlayClearDuration) ease-out calc(var(--homeTextSubmergeDuration) - var(--homeOverlayClearDuration));
    z-index: 100;
}

#first-container.fade {
    opacity: 0;
    pointer-events: none;
}

/* Keep resting style untouched; animate only when .fade toggles on. */
#top-text,
#bottom-text,
#top-text::before,
#bottom-text::before {
    transition:
        filter var(--homeTextSubmergeDuration) ease-out,
        opacity var(--homeTextSubmergeDuration) ease-out;
}

#first-container.fade #top-text,
#first-container.fade #bottom-text {
    filter: blur(1.9px) saturate(0.82) brightness(0.92) contrast(0.9);
    opacity: 0.24;
}

#first-container.fade #top-text::before,
#first-container.fade #bottom-text::before {
    filter: brightness(0.73) contrast(1.2) blur(2.8px);
    opacity: 0.08;
}

/* Entry overlay: keep column titles invisible until overlay opacity hits 0 (see home.js). */
.column-section .blog-title {
    transition-property: opacity;
    transition-duration: var(--homeTitleFadeDuration);
    transition-timing-function: ease-out;
    transition-delay: 0ms;
}

body:not(.home-titles-visible) .column-section .blog-title {
    opacity: 0;
}

body.home-titles-visible .column-section .blog-title {
    opacity: 1;
    transition-delay: var(--homeTitleFadeDelay);
}

/* One-shot “de-submerge” on titles: only while `home-titles-emerging` is set (see home.js). */
@keyframes home-title-emerge-filter {
    from {
        filter: blur(1.9px) saturate(0.82) brightness(0.92) contrast(0.9);
    }
    to {
        filter: none;
    }
}

body.home-titles-visible.home-titles-emerging .column-section .blog-title {
    animation: home-title-emerge-filter var(--homeTitleFadeDuration) ease-out forwards;
}

#first-container-hold {
    background-image: var(--bg-image);
    background-size: 50%;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    position: absolute;
}


@font-face {
    font-family: 'Impact'; /*a name to be used later*/
    src: url('public/fonts/impact.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'ChalkStickFont'; /* Updated font family name */
    src: url('../fonts/ChalkStick-WjAv.ttf') format('truetype'); /* Updated path */
    font-weight: normal;
    font-style: normal;
}

/*https://2.bp.blogspot.com/-ACUy1-KwROo/VtQv5VsSXeI/AAAAAAAAJBI/7Hg1r7445HQ/s640/tissue%2Bpaper%2Btexture.jpg*/
/*#top-text {*/
/*    text-transform: uppercase;*/
/*    font-weight: bold;*/
/*    font-size: 11vw;*/
/*    font-family: 'Impact';*/
/*    text-align: center;*/
/*    -webkit-background-clip: text;*/
/*    background-clip: text;*/
/*    -moz-text-fill-color: transparent;*/
/*    -webkit-text-fill-color: transparent;*/
/*    margin: 0.0vw;*/
/*    background-image: url(https://textures.neocities.org/textures/stone-and-brick/STUCCO8.JPG);*/

/*    !*font-family: 'Impact';*!*/
/*    !*text-align: center;*!*/
/*    !*font-size: 110px;*!*/
/*    !*font-weight: bold;*!*/
/*    color: transparent;*/
/*    !*background: #444444;*!*/
/*    -webkit-background-clip: text;*/
/*    text-shadow: 2px 5px 5px rgba(255, 255, 255, 0.3);*/
/*}*/

#top-text {
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11vw;
    font-family: 'Impact', sans-serif;
    text-align: center;
    color: transparent;

    background-image: var(--bg-image);
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#top-text::before {
    content: attr(data-text);
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 11vw;
    font-family: 'Impact', sans-serif;
    background-image: var(--bg-image);
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: brightness(0.75) contrast(1.4) blur(0.0005px);
    text-shadow: 2px 5px 5px
    rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 0;
}

/*#top-text {*/
/*    font-family: 'Impact';*/
/*    text-align: center;*/
/*    font-size: 52px;*/
/*    font-weight: bold;*/
/*    color: #8c8c8c;*/
/*    text-shadow: -1px -1px 1px #fff,*/
/*    1px 1px 2px #111;!*左上に白のシャドウ、右下に黒のシャドウを入れる*!*/
/*}*/

#nav-text {
    font-family: 'Impact';
    text-shadow: -1px -1px 1px #fff, 1px 1px 2px #111;
    color: #8c8c8c;
    /*font-size: 100px;*/
    /*text-align: center;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*margin-inline: auto;*/
    /*width: fit-content;*/
}


#bottom-text {
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11vw;
    font-family: 'Impact', sans-serif;
    text-align: center;
    color: transparent;
    top: 55%;

    background-image: var(--bg-image);
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#bottom-text::before {
    content: attr(data-text);
    position: absolute;
    top: 3.5px;  /* Slight upward offset */
    left: 3.5px; /* Slight left offset */
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 11vw;
    font-family: 'Impact', sans-serif;
    text-align: center;
    background-image: var(--bg-image);
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: brightness(0.75) contrast(1.4) blur(0.0005px);
    text-shadow: 2px 5px 5px
    rgba(255, 255, 255, 0.3);
    z-index: 1;
}

/* —— Hero: mobile-only (desktop keeps rules above to match last committed layout) —— */
@media (max-width: 900px) {
    /* Align hero stone with first pane (.column-section[data-col="1"]). */
    :root {
        --home-mobile-first-slab-bg-x: 8%;
    }

    #first-container {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        background-color: transparent;
        transition: opacity var(--homeOverlayClearDuration) var(--homeEaseEntry) var(--homeOverlayFadeStart);
    }

    #top-text,
    #bottom-text,
    #top-text::before,
    #bottom-text::before {
        transition:
            filter var(--homeTextSubmergeDuration) var(--homeEaseEntry),
            opacity var(--homeTextSubmergeDuration) var(--homeEaseEntry);
    }

    .column-section .blog-title {
        transition-property: opacity, filter;
        transition-timing-function: var(--homeEaseEntry);
    }

    body.home-titles-visible.home-titles-emerging .column-section .blog-title {
        animation: home-title-emerge-filter var(--homeTitleFadeDuration) var(--homeEaseEntry) forwards;
    }

    #first-container-hold {
        inset: 0;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        background-image: var(--bg-image);
        background-size: cover;
        background-position: var(--home-mobile-first-slab-bg-x) 0;
        background-repeat: no-repeat;
    }

    #top-text {
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
        width: 100%;
        max-width: 100%;
        line-height: 0.95;
        background-size: cover;
        background-position: var(--home-mobile-first-slab-bg-x) 0;
        background-attachment: scroll;
    }

    #top-text::before {
        font-size: inherit;
        background-size: cover;
        background-position: var(--home-mobile-first-slab-bg-x) 0;
        background-attachment: scroll;
    }

    #bottom-text {
        top: auto;
        flex: 0 0 auto;
        align-self: center;
        margin: 0;
        width: 100%;
        max-width: 100%;
        line-height: 0.95;
        background-size: cover;
        background-position: var(--home-mobile-first-slab-bg-x) 0;
        background-attachment: scroll;
    }

    #bottom-text::before {
        font-size: inherit;
        background-size: cover;
        background-position: var(--home-mobile-first-slab-bg-x) 0;
        background-attachment: scroll;
    }

    #top-text,
    #bottom-text {
        font-size: clamp(3rem, 14vw, 6.75rem);
    }
}

/*TEXTURE BACKGROUND WHITE FADE
/*#bottom-text {*/
/*    text-transform: uppercase;*/
/*    font-weight: bold;*/
/*    font-size: 11vw;*/
/*    font-family: 'Impact';*/
/*    text-align: center;*/
/*    -webkit-background-clip: text;*/
/*    background-clip: text;*/
/*    -moz-text-fill-color: transparent;*/
/*    -webkit-text-fill-color: transparent;*/
/*    margin: 32.0vw;*/
/*    background-image: url(https://textures.neocities.org/textures/stone-and-brick/STUCCO8.JPG);*/
/*    color: transparent;*/
/*    -webkit-background-clip: text;*/
/*    !*text-shadow: 2px 5px 5px*!*/
/*    !*rgba(0, 0, 0, 0.3);*!*/
/*    text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1),*/
/*    2px -2px 0 rgba(255, 255, 255, 0.3);*/
/*}*/


/*GRAY BACKGROUND EMBOSS */
/*#bottom-text {*/
/*    font-family: 'Impact';*/
/*    text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.5),*/
/*    2px -2px 0 rgba(255, 255, 255, 0.9);*/
/*    color: #8c8c8c;*/
/*    font-size: 150px;*/
/*    text-align: center;*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    margin-inline: auto;*/
/*    width: fit-content;*/
/*}*/
.cardcontainer {
    /*position:fixed;*/
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*border-image: var(--bg-image) 20% round;*/
    position:sticky;
    /*filter: opacity(0.7);*/
}

/*blog card gray font only */
.blog-card {
    /*background-color:#777;*/
    /*background: var(--bg-image) 0 0 fixed;*/
    /*border-radius: 20px;*/
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: 'Impact';
    font-size: 17.5px;
    font-weight: bold;
    /*border: 10px solid transparent;*/
    /*border-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZW1ib3NzLWdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLjIwKSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNDUpIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxjbGlwUGF0aCBpZD0icm91bmRlZCI+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgcng9IjE1IiByeT0iMTUiIC8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIGZpbGw9InVybCgjZW1ib3NzLWdyYWRpZW50KSIgY2xpcC1wYXRoPSJ1cmwoI3JvdW5kZWQpIiAvPgo8L3N2Zz4=") 10;*/
    /* box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7), inset 7px 0 9px -7px rgba(0,0,0,0.7), inset 0 -7px 9px -7px rgba(255,255,255,0.26), inset -7px 0 9px -7px rgba(255,255,255,0.26);
    -webkit-box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7), inset 7px 0 9px -7px rgba(0,0,0,0.7),inset 0 -7px 9px -7px  rgba(255,255,255,0.26), inset -7px 0 9px -7px rgba(255,255,255,0.26);
    -moz-box-shadow:  inset 0 7px 9px -7px rgba(0,0,0,0.7), inset 7px 0 9px -7px rgba(0,0,0,0.7),inset 0 -7px 9px -7px  rgba(255,255,255,0.26), inset -7px 0 9px -7px rgba(255,255,255,0.26); */
    /*border-image-slice: 10;*/
    /*border-color: #8c8c8c;*/
    /*color: transparent;*/
    /*background: #444444;*/
    /*-webkit-background-clip: text;*/
    /*text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.3);*/
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* background-color: rgba(255,255,255,0.1); */
    /* border-radius: 10px; */
    padding: 15px;
}

/* .blog-card:hover{
    background: #fdfcf8;
    color: black;
    border-left-style: ridge;
    border-top-style: ridge;
    border-bottom-style: groove;
    border-right-style: groove;
    border-width: 5px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-text-fill-color: black;


} */

.blog-card:hover .blog-title::before {
    display: none;
}

.blog-card:hover .blog-overview::before {
    display: none;

}

/* .blog-card:hover .blog-title { */
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 100%;*/
    
    /* font-family: 'IBM Plex Mono', monospace;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    -webkit-text-fill-color: #222;
    text-transform: lowercase;
    text-align: center;
    text-shadow:
            0.3px 0.3px 0.5px rgba(0, 0, 0, 0.2),
            -0.3px -0.3px 0.5px rgba(0, 0, 0, 0.15);
    filter: contrast(1.1) brightness(0.95);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    z-index: 2; */
.blog-card:hover .blog-overview {
    /*position: absolute;*/
    /*width: 100%;*/
    /*height: 100%;*/
    font-family: 'IBM Plex Mono', monospace;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    color: #222;
    -webkit-text-fill-color: #222;
    text-transform: lowercase;
    /* font-size: 11vw; */
    text-align: center;
    text-shadow:
            0.3px 0.3px 0.5px rgba(0, 0, 0, 0.2),
            -0.3px -0.3px 0.5px rgba(0, 0, 0, 0.15);
    filter: contrast(1.1) brightness(0.95);
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    /* background-size: cover; */
    z-index: 2;
}

/*.blog-card-before {*/
/*    !*background-color:#777;*!*/
/*    background: var(--bg-image) 0 0 fixed;*/
/*    filter: brightness(1.2);*/
/*    border-radius: 10px;*/
/*    width: 90%;*/
/*    height: 90%;*/
/*    text-align: center;*/
/*    font-family: 'Impact';*/
/*    font-size: 20px;*/
/*    font-weight: bold;*/
/*    position: fixed;*/
/*    !*top:-2px;*!*/
/*    !*left:-2px;*!*/
/*    !*color: transparent;*!*/
/*    !*background: #444444;*!*/
/*    !*-webkit-background-clip: text;*!*/
/*    !*text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.3);*!*/
/*}*/

/*.blog-card-after {*/
/*    !*background-color:#777;*!*/
/*    background: var(--bg-image) 0 0 fixed;*/
/*    filter: brightness(0.85);*/
/*    border-radius: 10px;*/
/*    width: 90%;*/
/*    height: 90%;*/
/*    text-align: center;*/
/*    font-family: 'Impact';*/
/*    font-size: 20px;*/
/*    font-weight: bold;*/
/*    position: fixed;*/
/*    !*top:2.5px;*!*/
/*    !*left:2.5px;*!*/
/*    !*color: transparent;*!*/
/*    !*background: #444444;*!*/
/*    !*-webkit-background-clip: text;*!*/
/*    !*text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.3);*!*/
/*}*/

.blog-title {
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    /*font-size: 11vw;*/
    font-family: 'Impact', sans-serif;
    text-align: center;
    color: black;

    background-image: var(--bg-image);
    /*background-size: cover;*/
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /*filter: brightness(0.85);*/
    /*text-shadow: 2px 5px 5px*/
    /*rgba(0, 0, 0, 0.2);*/
    z-index: 1;
}

.blog-title::before {
    content: attr(data-text);
    position: absolute;
    top: 1px;  /* Perfect shadow offset */
    left: 1px; /* Perfect shadow offset */
    width: 100%;
    height: 100%;
    font-weight: bold;
    /*font-size: 11vw;*/
    font-family: 'Impact', sans-serif;
    text-align: inherit; /* match parent alignment (left/right) */
    background-image: var(--bg-image);
    /*background-size: cover;*/
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: brightness(0.65) contrast(1.4);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.55);
    z-index: 2;
}

.blog-overview {
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    /*font-size: 11vw;*/
    font-family: 'Impact', sans-serif;
    text-align: center;
    color: black;

    background-image: var(--bg-image);
    /*background-size: cover;*/
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /*filter: brightness(0.85);*/
    /*text-shadow: 2px 5px 5px*/
    /*rgba(0, 0, 0, 0.2);*/
    z-index: 1;
}

.blog-overview::before {
    content: attr(data-text);
    position: absolute;
    top: 1px;  /* Slight upward offset */
    left: 1px; /* Slght left offset */
    width: 100%;
    height: 100%;
    font-weight: bold;
    /*font-size: 11vw;*/
    font-family: 'Impact', sans-serif;
    text-align: center;
    background-image: var(--bg-image);
    /*background-size: cover;*/
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: brightness(0.6) contrast(1.4);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.55);
    z-index: 2;
}

/*.blog-card {*/
/*    !*border-radius: 10px;*!*/
/*    width: 100%;*/
/*    text-align: center;*/
/*    font-family: 'Impact';*/
/*    font-size: 20px;*/
/*    font-weight: bold;*/
/*    color: transparent;*/
/*    -webkit-background-clip: text;*/
/*    text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.3);*/

/*    !*position: relative;*!*/
/*    background-image: url('https://textures.neocities.org/textures/stone-and-brick/GRYCON7.JPG');*/
/*    !*background-size: cover;*!*/
/*    background-position: center;*/
/*    -webkit-background-clip: text;*/
/*    background-clip: text;*/
/*    -webkit-text-fill-color: transparent;*/
/*}*/

/*.blog-card::before {*/

/*}*/

/*.blog-card-before {*/
/*    background-color:#777;*/
/*    border-radius: 10px;*/
/*    -webkit-box-shadow: -2px -2px 5px 2px rgba(119,119,119,1);*/
/*    -moz-box-shadow: -2px -2px 5px 2px rgba(119,119,119,1);*/
/*    box-shadow: -2px -2px 5px 2px rgba(119,119,119,1);*/
/*    !*width: 100%;*!*/
/*    !*position:absolute;*!*/
/*}*/

/*.blog-card-after {*/
/*    background-color:#a5a5a5;*/
/*    !*border-radius: 10px;*!*/
/*    -webkit-box-shadow: 2px 2px 5px 2px rgba(165,165,165,1);*/
/*    -moz-box-shadow: 2px 2px 5px 2px rgba(165,165,165,1);*/
/*    box-shadow: 2px 2px 5px 2px rgba(165,165,165,1);*/
/*    !*width: 100%;*!*/
/*    !*position:absolute;*!*/
/*}*/

.blog-author {
    position: absolute; /* Positioned relative to .blog-card */
    font-family: 'ChalkStickFont', sans-serif; /* Apply the new chalkboard font */
    font-size: 0.9em; /* Slightly increased for potentially thinner font, adjust as needed */
    /* color: #555; /* Color is now set randomly by JS */
    /* Add any other styling like font-weight, etc. if needed */
    /* JavaScript will set top and left */
    white-space: nowrap; /* Prevent author name from wrapping if it's long */
    /* Example: if using the ::before pseudo-element text effect like .blog-title has */
    /* you might want to style this similarly or ensure it looks good with it. */
    /* For simplicity, direct text styling is shown here. */
    z-index: 2; /* Ensure it's on top of other card content if necessary, same as .blog-title for example */
}

.blog-card:hover .blog-title {
    color: #fdf6e3; /* pearl white/beige */
    -webkit-text-fill-color: #fdf6e3;
    text-shadow:
        0 0 1px #fffbe6,
        0 0 1px #fffbe6,
        0 0 1px #ffe6fb,
        0 0 1.5px #e6f7ff,
        0 0 1px #fffbe6;
    filter: blur(0.3px) brightness(1.2) contrast(0.9) saturate(1.1);
}

/* Subtle highlight for connected cards when author is hovered */
.blog-card.hover .blog-title {
    filter: brightness(1.2) !important;
}

/* Hide shadow when .hover class is present (same as regular hover) */
.blog-card.hover .blog-title::before {
    display: none;
}

/* Override hover when .hover class is present */
.blog-card.hover:hover .blog-title {
    filter: brightness(1.2) !important;
}

.section-heading-card {
    pointer-events: auto;
    border-bottom: none;
    padding-bottom: 0;
    overflow: visible;
}

.section-heading-card .blog-title {
    text-decoration: none;
    display: inline-block;
    line-height: 1.1;
    overflow: visible;
    font-size: clamp(2rem, 2.6vw, 2.6rem);
}

/* Column 1 heading style */
.column-section[data-col="1"] .section-heading-card .blog-title {
    font-family: 'Impact', sans-serif;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background-image: none;
    text-shadow: none;
}

.column-section[data-col="1"] .section-heading-card .blog-title::before {
    display: none;
}

/* Column 2 heading style */
.column-section[data-col="2"] .section-heading-card .blog-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 1200;
    text-transform: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 2px #0F28BE;
    background-image: none;
    text-shadow: none;
}

.column-section[data-col="2"] .section-heading-card .blog-title::before {
    display: none;
}

/* Column 3 heading style */
.column-section[data-col="3"] .section-heading-card .blog-title {
    font-family: "Didot", "Bodoni 72", "Baskerville", serif;
    font-weight: 700;
    text-transform: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 0.8px #B1123A;
    background-image: none;
    text-shadow: none;
}

.column-section[data-col="3"] .section-heading-card .blog-title::before {
    display: none;
}

/* Column 4 heading style */
.column-section[data-col="4"] .section-heading-card .blog-title {
    font-family: "Gill Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    -webkit-text-stroke: 0.8px #3D9E4A;
    background-image: none;
    text-shadow: none;
}

.column-section[data-col="4"] .section-heading-card .blog-title::before {
    display: none;
}

.column-section[data-col="1"] { --section-accent: #ffffff; }
.column-section[data-col="2"] { --section-accent: #0F28BE; }
.column-section[data-col="3"] { --section-accent: #B1123A; }
.column-section[data-col="4"] { --section-accent: #3D9E4A; }

.section-title-container:hover .blog-title,
.section-heading-card:hover .blog-title {
    text-decoration: underline;
    text-decoration-color: var(--section-accent, currentColor);
    text-underline-offset: 1px;
    text-decoration-thickness: 1.5px;
    color: var(--section-accent, currentColor);
    -webkit-text-fill-color: var(--section-accent, currentColor);
    text-shadow: none !important;
    filter: none !important;
}

.section-heading-card:hover .blog-title::before {
    display: none;
}

/* Desktop: column edges glow when the section title row is hovered. */
.column-section:has(.section-title-container:hover) {
    box-shadow: inset 2px 0 0 var(--section-accent, currentColor), inset -2px 0 0 var(--section-accent, currentColor);
}

/* Blog Popup Styles */
.blog-popup {
    position: absolute;
    background: white;
    color: black;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow: hidden;
    cursor: pointer;
}

.popup-content {
    padding: 30px;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.popup-title {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: black;
    font-weight: bold;
}

.popup-preview {
    font-size: 1.2em;
    line-height: 1.6;
    color: #333;
}

/* Hide scrollbar in the titles column while keeping it scrollable */
.title-section {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
}
.title-section::-webkit-scrollbar { /* Chrome/Safari */
    width: 0;
    height: 0;
}

/* Auth controls use plain text without the pseudo shadow/glow to avoid white bleed */
/* Auth controls: allow pseudo-text to render fully without clipping */
.auth-plain {
    overflow: visible;
}

/* About button hover: use same neutral behavior as others (no blue glow) */
.blog-card[data-author="about"]:hover .blog-title {
    /* inherit default hover behavior, no color override */
    color: inherit;
    -webkit-text-fill-color: inherit;
    text-shadow: inherit;
    filter: inherit;
}

/* ABOUT title: classic meme Impact look (white fill, black outline) */
.blog-card[data-author="about"] .blog-title {
    font-family: 'Impact', sans-serif;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    /* slight black outline */
    -webkit-text-stroke: 1px #000000;
    /* drop shadow handled on ::before to avoid glyph rendering artifacts */
    text-shadow: none;
    background-image: none; /* disable texture fill */
    position: relative;
    z-index: 1;
}

.blog-card[data-author="about"] .blog-title::before {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* classic meme drop shadow: soft, slightly downward + faint ambient */
    text-shadow:
        0 4px 5px rgba(0,0,0,0.7),
        0 0 3px rgba(0,0,0,0.45);
    pointer-events: none;
    z-index: -1; /* render behind the primary text */
}

/* Auth button hover glows */
#auth-login-card:hover .blog-title {
    color: rgb(0, 255, 0);
    -webkit-text-fill-color: rgb(0, 255, 0);
    text-shadow:
        0 0 1px rgb(0, 255, 0),
        0 0 1px rgb(0, 255, 0),
        0 0 1px rgb(0, 255, 0),
        0 0 1.5px rgb(0, 255, 0),
        0 0 1px rgb(0, 255, 0);
    filter: blur(0.3px) brightness(1.2) contrast(0.9) saturate(1.1);
}

#auth-login-card:hover .blog-title::before {
    display: none;
}

/* Logout button cherry red glow */
#auth-login-card[data-logout="true"]:hover .blog-title {
    color: #ff1744;
    -webkit-text-fill-color: #ff1744;
    text-shadow:
        0 0 1px #ff1744,
        0 0 1px #ff1744,
        0 0 1px #ff1744,
        0 0 1.5px #ff1744,
        0 0 1px #ff1744;
    filter: blur(0.3px) brightness(1.2) contrast(0.9) saturate(1.1);
}

/* Each column gets a perfectly aligned texture slice */
.column-section {
    z-index: 2;
    background-image: var(--bg-image);
    background-size: 50vw auto;
    background-position-x: calc(-1 * var(--col-start, 0vw));
    background-position-y: 0;
    background-repeat: repeat;
    /* Keep slab motion on a stable layer; reduces post-transition text snap with clip-text inside */
    will-change: transform;
}

.column-section[data-col="1"] { --col-start: 0vw; }
.column-section[data-col="2"] { --col-start: 20vw; }
.column-section[data-col="3"] { --col-start: 40vw; }
.column-section[data-col="4"] { --col-start: 60vw; }
.column-section[data-col="5"] {
    --col-start: 80vw;
    --section-accent: rgba(255, 255, 255, 0.8);
}

/* Article preview sits under real columns; slabs + card text move with column transforms */
:root {
    /* Keep preview page width aligned with reader page width. */
    --articleWidth: var(--reader-page-width);
    --reader-page-height: calc(100dvh - clamp(30px, 4.8vh, 52px));
    --reader-page-width: min(620px, calc(var(--reader-page-height) / 1.41));
    /* Longer + ease below = slower, heavier stone slabs (preview only; bio/about unchanged) */
    --articlePreviewRevealDuration: 2200ms;
    /* Extra slab separation so preview page borders are clearly visible pre-click. */
    --articlePreviewBorderReveal: 12px;
    --articleExpandDuration: 1100ms;
    --articleExpandEase: cubic-bezier(0.58, 0.06, 0.22, 0.98);
    --articleExpandShiftDuration: 1240ms;
    --articleExpandShiftDelay: 45ms;
}

/* Any hairline gap while columns part shows stone, not flat white */
body.article-open {
    background-image: var(--bg-image);
    background-size: 50vw auto;
    background-position: 0 0;
    background-repeat: repeat;
}

/*
 * Regression from main layout wrapper: .home-main-stage is z-index:2, .article-panel stays z-index:1,
 * so columns sat above the preview and stole clicks (document handler treated them as “outside” the panel).
 * Do NOT raise the panel’s z-index (breaks the slab opening look). Instead, turn off hit-testing on the
 * stage subtree while the preview is open so events reach the panel underneath; paint order unchanged.
 */
body.article-open .home-main-stage .home-main-track,
body.article-open .home-main-stage .home-main-pane,
body.article-open .home-main-stage .column-section {
    pointer-events: none;
}

.article-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--seamX, 50%);
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    width: min(calc(var(--articleWidth) + (var(--articlePreviewBorderReveal) * 2)), var(--articlePreviewMaxWidth, 100vw));
    max-width: 100vw;
    overflow: hidden;
    background: #fff;
    color: #222;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    contain: layout paint;
}

.article-panel-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(0, 0, 0, 0.72);
    font: 500 24px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    -webkit-appearance: none;
    appearance: none;
}

.article-panel-close:active {
    transform: translateY(1px);
}

/* Let flex + fitPreviewBlocksToPage measure reliably before columns animate (still invisible). */
.article-panel.article-preview-layout {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}

/* Keep wrapper visually neutral; page itself carries border/shadow/grain like reader. */
.article-panel::after,
.article-panel::before { content: none; }
#article-first-page {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-preview-page {
    position: relative;
    width: var(--articleWidth);
    min-width: var(--articleWidth);
    max-width: var(--articleWidth);
    height: var(--reader-page-height);
    min-height: var(--reader-page-height);
    max-height: var(--reader-page-height);
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(20, 20, 20, 0.14);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.045);
    overflow: hidden;
    /* Exact parity with reader first-page padding. */
    padding: clamp(96px, 12.8vh, 146px) clamp(28px, 3.3vw, 40px) clamp(24px, 3vh, 34px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 auto;
}

.home-preview-page::before,
.home-preview-page::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}

.home-preview-page::after {
    opacity: 0.18;
    background-size: 120px 120px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.home-preview-page::before {
    opacity: 0.1;
    background-image: repeating-radial-gradient(rgba(0, 0, 0, 0.14) 0 0.7px, transparent 0.7px 2px);
    background-size: 3.2px 3.2px;
}

.home-preview-page > * {
    position: relative;
    z-index: 1;
}

.home-preview-masthead {
    flex: 0 0 auto;
    margin: 0 0 clamp(3px, 0.5vw, 8px);
}

.home-preview-title {
    margin: 0 0 clamp(2px, 0.35vw, 5px);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.14rem, 1.38vw, 1.42rem);
    line-height: 1.16;
    color: #141414;
    -webkit-text-fill-color: #141414;
    background: none;
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-stroke: 0;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
}

.home-preview-byline {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4em;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(0.74rem, 0.82vw, 0.84rem);
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.48);
}

.home-preview-byline-by,
.home-preview-byline-onthe {
    color: rgba(0, 0, 0, 0.48);
}

.home-preview-byline-author {
    font-weight: 600;
}

.home-preview-byline-date {
    font-style: italic;
    color: rgba(0, 0, 0, 0.48);
}

.home-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.home-preview-page-number {
    position: absolute;
    right: clamp(14px, 1.5vw, 20px);
    bottom: clamp(14px, 1.8vh, 20px);
    text-align: right;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(10px, 0.78vw, 11.5px);
    line-height: 1;
    color: rgba(0, 0, 0, 0.42);
    -webkit-text-fill-color: rgba(0, 0, 0, 0.42);
    text-shadow: none;
    pointer-events: none;
    z-index: 2;
}

.home-preview-body p,
.home-preview-body h1,
.home-preview-body h2,
.home-preview-body h3,
.home-preview-body h4 {
    margin: clamp(9px, 0.92vw, 12px) 0;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.42;
    font-size: clamp(13.6px, 0.84vw, 15.2px);
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(#171717,#171717), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1.2 -0.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: auto, 48px 48px;
    background-blend-mode: multiply;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: .25px rgba(0,0,0,.45);
    text-shadow: 0 0 .45px rgba(0,0,0,.32);
    -webkit-font-smoothing: none;
}

.home-preview-body h1 { font-size: clamp(1rem, 1.15vw, 1.22rem); line-height: 1.2; }
.home-preview-body h2 { font-size: clamp(0.95rem, 0.98vw, 1.08rem); line-height: 1.25; }
.home-preview-body h3 { font-size: clamp(0.9rem, 0.88vw, 0.98rem); line-height: 1.24; }

/* Reader parity: first body block sits slightly closer to masthead. */
.home-preview-page:has(> .article-inline-masthead) .home-preview-body > :first-child {
    margin-top: clamp(2px, 0.35vw, 6px);
}

/* Quote / epigraph — match blog reader so preview keeps structure when split */
.home-preview-body p[data-variant="epigraph"] {
    font-style: italic;
    max-width: 76%;
    margin-left: auto;
    margin-right: 0;
    opacity: 0.92;
}

.home-preview-body blockquote:not([data-variant]) {
    margin: clamp(8px, 1vh, 12px) 0;
    padding-left: 1rem;
    border-left: 3px solid rgba(0, 0, 0, 0.22);
}

.home-preview-body blockquote p:not([data-variant="attribution"]) {
    white-space: pre-wrap;
}

.home-preview-body blockquote[data-variant="quote"] {
    border-left: none;
    padding-left: 0;
    margin: clamp(8px, 1vh, 12px) 0;
    font-style: italic;
}

.home-preview-body blockquote p[data-variant="attribution"] {
    font-size: 0.92em;
    opacity: 0.88;
    margin-top: 0.65rem;
    font-style: normal;
}

.home-preview-body blockquote p,
.home-preview-body p[data-variant="poetry"],
.home-preview-body p[data-variant="poetry-author"] {
    color: #1a1a1a;
    -webkit-text-fill-color: #1a1a1a;
    background-image: linear-gradient(#1a1a1a, #1a1a1a);
    background-size: auto;
    background-blend-mode: normal;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0.06px rgba(0, 0, 0, 0.18);
    text-shadow: 0 0 0.18px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
}

body.article-open .article-panel {
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    pointer-events: auto;
}

/* Stay visible while columns slide shut; removed in JS after --articlePreviewRevealDuration */
.article-panel.article-preview-closing {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

/* Fullscreen expansion: stay within viewport; center on page while growing width. */
.article-panel.expanding-fullscreen {
    left: var(--seamX, 50%) !important;
    width: min(100vw, var(--articleExpandWidth, 100vw)) !important;
    max-width: 100vw !important;
    z-index: 9999 !important;
    transform: translateX(-50%) !important;
    clip-path: inset(0 var(--articleExpandClipRight, 0px) 0 var(--articleExpandClipLeft, 0px));
    transition:
        clip-path var(--articleExpandDuration) var(--articleExpandEase),
        transform var(--articleExpandShiftDuration) var(--articleExpandEase) var(--articleExpandShiftDelay) !important;
    will-change: clip-path, transform;
}

.article-panel.expanding-fullscreen.article-expand-run {
    clip-path: inset(0 0 0 0);
    transform: translateX(calc(-50% + var(--articleExpandPanelShiftX, 0px))) !important;
}

/* During fullscreen widen, keep the preview page at its pre-click shape/width.
   Only the surrounding white area grows to fill the viewport. */
.article-panel.expanding-fullscreen #article-first-page {
    justify-content: center;
}

.article-panel.expanding-fullscreen .home-preview-page {
    width: var(--articlePreviewLockWidth, 100%);
    min-width: var(--articlePreviewLockWidth, 100%);
    max-width: var(--articlePreviewLockWidth, 100%);
    margin: 0 auto;
    flex: 0 0 auto;
    transform: none;
    transition: none;
}

body.article-open:has(.article-panel.expanding-fullscreen) {
    overflow-x: hidden;
}

/* While preview is open, column motion uses preview timing (bio/about still use --aboutDuration) */
body.article-open .column-section,
body.article-closing .column-section {
    /* Inertial: slow to start, long deceleration at rest — reads as heavy mass */
    transition: transform var(--articlePreviewRevealDuration) cubic-bezier(0.58, 0.06, 0.22, 0.98);
}

/* For article preview: columns move away from active seam as rigid slabs */
body.article-open[data-open-seam="1"] .column-section[data-col="2"],
body.article-open[data-open-seam="1"] .column-section[data-col="3"],
body.article-open[data-open-seam="1"] .column-section[data-col="4"],
body.article-open[data-open-seam="1"] .column-section[data-col="5"] { transform: translateX(calc((var(--articleWidth) * 0.50) + var(--articlePreviewBorderReveal))); }
body.article-open[data-open-seam="1"] .column-section[data-col="1"] { transform: translateX(calc((var(--articleWidth) * -0.50) - var(--articlePreviewBorderReveal))); }

body.article-open[data-open-seam="2"] .column-section[data-col="1"],
body.article-open[data-open-seam="2"] .column-section[data-col="2"] { transform: translateX(calc((var(--articleWidth) * -0.50) - var(--articlePreviewBorderReveal))); }
body.article-open[data-open-seam="2"] .column-section[data-col="3"],
body.article-open[data-open-seam="2"] .column-section[data-col="4"],
body.article-open[data-open-seam="2"] .column-section[data-col="5"] { transform: translateX(calc((var(--articleWidth) * 0.50) + var(--articlePreviewBorderReveal))); }

body.article-open[data-open-seam="3"] .column-section[data-col="1"],
body.article-open[data-open-seam="3"] .column-section[data-col="2"],
body.article-open[data-open-seam="3"] .column-section[data-col="3"] { transform: translateX(calc((var(--articleWidth) * -0.50) - var(--articlePreviewBorderReveal))); }
body.article-open[data-open-seam="3"] .column-section[data-col="4"],
body.article-open[data-open-seam="3"] .column-section[data-col="5"] { transform: translateX(calc((var(--articleWidth) * 0.50) + var(--articlePreviewBorderReveal))); }

/* Normal section movement for about/bio panels (text moves with sections) */
body.about-open .title-section,
body.about-open .author-section {
    transform: translateX(calc(-1 * var(--aboutWidth)));
}

body.bio-open .title-section,
body.bio-open .author-section {
    transform: translateY(var(--bioHeight));
}

/* Transitions: transform only — animating background-position in tandem can make
   background-clip:text inside columns “crawl” or snap at the end even when bg pos is constant */
.column-section, .title-section, .author-section { 
    transition: transform var(--aboutDuration) ease-in-out;
}

/* Five-column layout */
.column-heading {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 12px 10px 10px;
    text-align: left;
    font-family: 'Impact', sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.75);
    background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.05));
    backdrop-filter: blur(1px);
}

.author-section .column-heading {
    text-align: right;
}

/* --- Home: desktop = five columns; mobile = horizontal strip, one full screen per section --- */
.home-main-stage {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.home-main-stage .home-main-track,
.home-main-stage .home-main-pane,
.home-main-stage .column-section {
    pointer-events: auto;
}

.home-main-track {
    position: absolute;
    inset: 0;
    transform-style: flat;
}

.home-main-pane {
    position: absolute;
    top: 0;
    bottom: 0;
}

@media (min-width: 901px) {
    .home-main-pane[data-col="1"] { left: 0; width: 20%; }
    .home-main-pane[data-col="2"] { left: 20%; width: 20%; }
    .home-main-pane[data-col="3"] { left: 40%; width: 20%; }
    .home-main-pane[data-col="4"] { left: 60%; width: 20%; }
    .home-main-pane[data-col="5"] { left: 80%; width: 20%; }
    .home-main-track {
        display: block;
        overflow: visible;
        transform: none !important;
    }
    .home-main-dots {
        display: none !important;
    }

    .home-main-stage .home-main-track,
    .home-main-stage .home-main-pane,
    .home-main-stage .column-section,
    .home-main-stage .cardcontainer,
    .home-main-stage .blog-card {
        pointer-events: auto;
    }
}

@media (max-width: 900px) {
    .home-main-stage {
        position: fixed;
        inset: 0;
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
    }

    /* Re-establish hit-testing under the stage (same as desktop base rules); some engines lose it
       when the stage block is re-declared inside this media query. */
    .home-main-stage .home-main-track,
    .home-main-stage .home-main-pane,
    .home-main-stage .column-section,
    .home-main-stage .cardcontainer,
    .home-main-stage .blog-card {
        pointer-events: auto;
    }

    .home-main-track {
        display: flex;
        flex-direction: row;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* Never settle between sections: always land on a pane boundary. */
        overscroll-behavior-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        scrollbar-width: thin;
        transform: none !important;
        -webkit-transform: none !important;
        touch-action: pan-x;
        /* If subpixel gaps appear between panes during momentum, show stone instead of white. */
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .home-main-pane {
        position: relative;
        /* Lock each pane to viewport width to avoid fractional flex widths that can flash seams. */
        flex: 0 0 100vw;
        width: 100vw;
        min-width: 100vw;
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
        scroll-snap-align: start;
        /* Keep momentum behavior; mandatory snapping handles final landing point. */
        scroll-snap-stop: normal;
        /* Don’t use overflow:hidden on both axes — it clipped hit targets for absolutely positioned .blog-title. */
        overflow-x: hidden;
        overflow-y: visible;
    }

    /*
     * Panels are ~100vw: 50vw + repeat-x shows two horizontal tiles → mid-screen seam.
     * Use one full-width horizontal tile (no-repeat on x) and repeat only vertically.
     * Do not shift by 2× --col-start on a 100vw tile — that pulls the bitmap off-panel (white) and
     * breaks background-clip:text on titles. Vary slice per column with background-position % instead.
     */
    .home-main-pane > .column-section[data-col] {
        background-image: var(--bg-image);
        background-size: cover;
        background-position-y: 0;
        background-position-x: 50%;
        background-repeat: no-repeat;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: 100% !important;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        will-change: auto;
    }

    .home-main-pane > .column-section[data-col="1"] {
        background-position-x: var(--home-mobile-first-slab-bg-x);
    }
    .home-main-pane > .column-section[data-col="2"] {
        background-position-x: 28%;
    }
    .home-main-pane > .column-section[data-col="3"] {
        background-position-x: 48%;
    }
    .home-main-pane > .column-section[data-col="4"] {
        background-position-x: 68%;
    }
    .home-main-pane > .column-section[data-col="5"] {
        background-position-x: 88%;
    }

    .home-main-pane .column-section {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        -webkit-transform: none;
        transform: none;
        -webkit-transform-style: flat;
        transform-style: flat;
        isolation: isolate;
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        padding-bottom: 12px;
    }

    .author-section {
        padding-bottom: max(100px, env(safe-area-inset-bottom, 0px));
    }

    .home-main-pane .section-heading-card .blog-title {
        box-sizing: border-box;
        padding-left: 4px;
        padding-right: 4px;
        max-width: 100%;
        font-size: clamp(2.65rem, 11vw, 4.25rem);
        line-height: 1.05;
    }

    .home-main-pane .blog-card {
        box-sizing: border-box;
        padding: 8px 10px;
        overflow: visible;
    }

    .home-main-pane .cardcontainer {
        min-width: 0;
    }

    .author-section #auth-controls {
        box-sizing: border-box;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 10px;
        z-index: 30;
        pointer-events: auto;
    }

    .author-section #auth-controls .cardcontainer {
        position: relative;
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
    }

    .author-section #auth-controls .blog-card {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        overflow: visible;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .author-section #auth-controls .blog-title {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        max-width: none;
        white-space: nowrap;
        display: block;
        text-align: left;
    }

    /* Scroll-driven active column (see initHomeActiveColumnFromScroll); turn off hover-based frame on narrow layout. */
    .column-section:has(.section-title-container:hover) {
        box-shadow: none;
    }

    .home-main-pane.home-column-active > .column-section {
        box-shadow: inset 2px 0 0 var(--section-accent, currentColor), inset -2px 0 0 var(--section-accent, currentColor);
    }

    body.article-open .article-panel .article-panel-close,
    body.article-closing .article-panel .article-panel-close {
        display: inline-flex;
        top: max(10px, env(safe-area-inset-top, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        width: 32px;
        height: 32px;
        border: 1px solid #8f1427;
        border-radius: 0;
        background: linear-gradient(to bottom, #f06a7a 0%, #cd2f47 52%, #a9152d 100%);
        color: #fff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 0 rgba(0,0,0,0.25);
        font: 700 19px/1 'MS Sans Serif', 'Arial', sans-serif;
        align-items: center;
        justify-content: center;
        padding: 0;
        text-align: center;
    }

    body.article-open .article-panel .article-panel-close:hover,
    body.article-closing .article-panel .article-panel-close:hover {
        background: linear-gradient(to bottom, #ee5f71 0%, #c62a42 52%, #941127 100%);
        border-color: #7f1021;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 1px 0 rgba(0,0,0,0.3);
    }

    body.article-open .article-panel .article-panel-close:active,
    body.article-closing .article-panel .article-panel-close:active {
        background: linear-gradient(to bottom, #9a152b 0%, #c72d45 48%, #f06a7a 100%);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.32), 0 1px 0 rgba(255,255,255,0.1);
    }

    /* During reverse-close, keep preview under slabs so the slabs visibly close over it. */
    .article-panel.article-preview-closing {
        z-index: 1;
    }

    /* Mobile: move slabs by full viewport width so they clear the screen fully. */
    body.article-open[data-open-seam="1"] .column-section[data-col="2"],
    body.article-open[data-open-seam="1"] .column-section[data-col="3"],
    body.article-open[data-open-seam="1"] .column-section[data-col="4"],
    body.article-open[data-open-seam="1"] .column-section[data-col="5"],
    body.article-closing[data-open-seam="1"] .column-section[data-col="2"],
    body.article-closing[data-open-seam="1"] .column-section[data-col="3"],
    body.article-closing[data-open-seam="1"] .column-section[data-col="4"],
    body.article-closing[data-open-seam="1"] .column-section[data-col="5"] {
        transform: translateX(100vw);
    }
    body.article-open[data-open-seam="1"] .column-section[data-col="1"],
    body.article-closing[data-open-seam="1"] .column-section[data-col="1"] {
        transform: translateX(-100vw);
    }

    body.article-open[data-open-seam="2"] .column-section[data-col="1"],
    body.article-open[data-open-seam="2"] .column-section[data-col="2"],
    body.article-closing[data-open-seam="2"] .column-section[data-col="1"],
    body.article-closing[data-open-seam="2"] .column-section[data-col="2"] {
        transform: translateX(-100vw);
    }
    body.article-open[data-open-seam="2"] .column-section[data-col="3"],
    body.article-open[data-open-seam="2"] .column-section[data-col="4"],
    body.article-open[data-open-seam="2"] .column-section[data-col="5"],
    body.article-closing[data-open-seam="2"] .column-section[data-col="3"],
    body.article-closing[data-open-seam="2"] .column-section[data-col="4"],
    body.article-closing[data-open-seam="2"] .column-section[data-col="5"] {
        transform: translateX(100vw);
    }

    body.article-open[data-open-seam="3"] .column-section[data-col="1"],
    body.article-open[data-open-seam="3"] .column-section[data-col="2"],
    body.article-open[data-open-seam="3"] .column-section[data-col="3"],
    body.article-closing[data-open-seam="3"] .column-section[data-col="1"],
    body.article-closing[data-open-seam="3"] .column-section[data-col="2"],
    body.article-closing[data-open-seam="3"] .column-section[data-col="3"] {
        transform: translateX(-100vw);
    }
    body.article-open[data-open-seam="3"] .column-section[data-col="4"],
    body.article-open[data-open-seam="3"] .column-section[data-col="5"],
    body.article-closing[data-open-seam="3"] .column-section[data-col="4"],
    body.article-closing[data-open-seam="3"] .column-section[data-col="5"] {
        transform: translateX(100vw);
    }

    /* Mobile underlay reveal: slabs move away to reveal panel beneath, not a top overlay card. */
    body.article-open .article-panel:not(.expanding-fullscreen) {
        z-index: 1;
    }

    /* Prevent the track's fallback stone texture from filling the opening gap. */
    body.article-open .home-main-track,
    body.article-closing .home-main-track {
        background-image: none;
        background: transparent;
    }

    /* Mobile preview: fit page fully inside panel during edge-open animation. */
    .article-panel {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        transform: none;
    }

    .home-preview-page {
        width: calc(100% - 10px);
        min-width: calc(100% - 10px);
        max-width: calc(100% - 10px);
        height: min(var(--reader-page-height), calc(100dvh - 20px));
        min-height: min(var(--reader-page-height), calc(100dvh - 20px));
        max-height: min(var(--reader-page-height), calc(100dvh - 20px));
        padding: clamp(68px, 9vh, 92px) clamp(16px, 4.5vw, 22px) clamp(18px, 2.8vh, 24px);
        margin: 0 auto;
    }

    /* In-app reader under slabs (same stack as preview panel). */
    .mobile-reader-shell {
        position: fixed;
        inset: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: 100vw;
        max-width: 100vw;
        left: 0;
        transform: none;
        background: #fff;
        box-sizing: border-box;
        pointer-events: none;
    }

    .mobile-reader-shell[hidden] {
        display: none !important;
    }

    body.mobile-reader-open .mobile-reader-shell,
    body.article-closing .mobile-reader-shell.mobile-reader-closing {
        pointer-events: auto;
    }

    body.mobile-reader-open {
        overflow: hidden;
    }

    body.article-open .mobile-reader-shell,
    body.article-closing .mobile-reader-shell.mobile-reader-closing {
        z-index: 1;
    }

    body.article-open .home-main-track,
    body.article-closing .home-main-track {
        background-image: none;
        background: transparent;
    }

    .mobile-reader-close {
        position: absolute;
        top: max(4px, env(safe-area-inset-top, 0px));
        right: max(4px, env(safe-area-inset-right, 0px));
        z-index: 4;
        width: 26px;
        height: 26px;
        border: 1px solid #8f1427;
        border-radius: 0;
        background: linear-gradient(to bottom, #f06a7a 0%, #cd2f47 52%, #a9152d 100%);
        color: #fff;
        font: 700 16px/1 'MS Sans Serif', 'Arial', sans-serif;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 rgba(0, 0, 0, 0.25);
    }

    body.article-open .mobile-reader-close,
    body.article-closing .mobile-reader-close {
        display: inline-flex;
    }

    .mobile-reader-close:active {
        background: linear-gradient(to bottom, #9a152b 0%, #c72d45 48%, #f06a7a 100%);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .mobile-reader-shell.mobile-reader-closing {
        z-index: 1;
    }

    .mobile-reader-frame {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        border: 0;
        background: #fff;
        pointer-events: auto;
    }
}

/* Sign-in overlay — buttons only, no card chrome */
.home-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    font-family: 'poppins', sans-serif;
}

.home-login-overlay[hidden] {
    display: none !important;
}

.home-login-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 18, 18, 0.38);
    backdrop-filter: blur(2px);
}

.home-login-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 320px);
    max-height: min(90vh, 560px);
    overflow-y: auto;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.home-login-create-account {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 0;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    text-decoration: underline;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.home-login-create-account:hover {
    color: #fff;
}

.home-login-secondary {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.home-login-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.home-auth-intro {
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.18);
    font-size: 10px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.home-signup-view[hidden] {
    display: none !important;
}

.home-signup-title {
    margin: 0 0 12px;
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-signup-form {
    margin: 0;
}

.home-signup-label {
    display: block;
    margin: 0 0 4px;
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-signup-field-hint {
    margin: -2px 0 10px;
    font-size: 10px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.home-signup-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 0;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 13px;
    color: #111;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.home-signup-input:focus {
    outline: 1px solid #4a4a4a;
    outline-offset: 0;
}

.home-signup-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.28);
    border-radius: 0;
    background: linear-gradient(to bottom, #f8f8f8 0%, #e8e8e8 100%);
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #111;
    resize: vertical;
    min-height: 88px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.home-signup-textarea:focus {
    outline: 1px solid #4a4a4a;
    outline-offset: 0;
}

.home-signup-success {
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid rgba(40, 90, 40, 0.55);
    background: rgba(50, 110, 50, 0.28);
    font-size: 10px;
    line-height: 1.4;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.home-signup-success[hidden] {
    display: none !important;
}

.home-signup-error {
    margin: 0 0 10px;
    padding: 6px 8px;
    border: 1px solid rgba(143, 20, 39, 0.55);
    background: rgba(169, 21, 45, 0.22);
    font-size: 10px;
    line-height: 1.35;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.home-signup-error[hidden] {
    display: none !important;
}

.home-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin-bottom: 10px;
    padding: 9px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: linear-gradient(to bottom, #f5f5f5 0%, #e6e6e6 55%, #d8d8d8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.08);
    font-family: 'MS Sans Serif', 'Arial', sans-serif;
    font-size: 13px;
    color: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.home-auth-btn:hover:not(:disabled) {
    background: #4a4a4a;
    border-color: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.home-auth-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.home-login-close {
    position: absolute;
    z-index: 2;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #8f1427;
    border-radius: 0;
    background: linear-gradient(to bottom, #f06a7a 0%, #cd2f47 52%, #a9152d 100%);
    color: #fff;
    font: 700 15px/1 'MS Sans Serif', 'Arial', sans-serif;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 0 rgba(0, 0, 0, 0.25);
    -webkit-tap-highlight-color: transparent;
}

.home-login-close:hover {
    background: linear-gradient(to bottom, #ee5f71 0%, #c62a42 52%, #941127 100%);
    border-color: #7f1021;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 0 rgba(0, 0, 0, 0.3);
}

.home-login-close:active {
    background: linear-gradient(to bottom, #9a152b 0%, #c72d45 48%, #f06a7a 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(1px);
}

body.home-login-open {
    overflow: hidden;
}

.home-login-panel .firebaseui-container {
    margin: 0;
    max-width: 100%;
    box-shadow: none;
    font-family: 'poppins', sans-serif;
}

.home-login-panel .firebaseui-card-wrapper,
.home-login-panel .firebaseui-card {
    background: transparent;
    box-shadow: none;
    border: none;
}

.home-login-panel .firebaseui-card-content {
    padding: 0;
}

.home-login-panel .firebaseui-idp-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-login-panel .firebaseui-idp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 0 !important;
    background: linear-gradient(to bottom, #f5f5f5 0%, #e6e6e6 55%, #d8d8d8 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.home-login-panel .firebaseui-idp-button:hover,
.home-login-panel .firebaseui-idp-button:focus {
    background: #4a4a4a !important;
    border-color: rgba(0, 0, 0, 0.35) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.home-login-panel .firebaseui-idp-button:hover .firebaseui-idp-text,
.home-login-panel .firebaseui-idp-button:focus .firebaseui-idp-text {
    color: #fff !important;
}

.home-login-panel .firebaseui-idp-text {
    font-family: 'MS Sans Serif', 'Arial', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #000 !important;
    letter-spacing: 0;
    transition: color 0.15s ease;
}

.home-login-panel .firebaseui-idp-icon,
.home-login-panel .firebaseui-idp-favicon {
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.home-login-panel .firebaseui-idp-button[data-provider-id='twitter.com'] .firebaseui-idp-icon,
.home-login-panel .firebaseui-idp-button[data-provider-id='twitter.com'] .firebaseui-idp-favicon {
    background-image: url('/icons/auth-twitter.svg') !important;
    filter: none !important;
}

.home-login-panel .firebaseui-idp-button[data-provider-id='apple.com'] .firebaseui-idp-icon,
.home-login-panel .firebaseui-idp-button[data-provider-id='apple.com'] .firebaseui-idp-favicon {
    background-image: url('/icons/auth-apple.svg') !important;
    filter: none !important;
}

.home-login-panel .firebaseui-tospp-full-message,
.home-login-panel .firebaseui-tos-list {
    margin-top: 12px;
    font-size: 10px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.home-login-panel .firebaseui-tos-link,
.home-login-panel .firebaseui-policy-link {
    color: rgba(255, 255, 255, 0.95);
}