/* ==============================================================
   Global styles — shared across home + case-study pages.
   ============================================================== */

/* ---------- Fonts ---------- */
/* @font-face declarations + base type live in ./assets/type.css.
   This file just consumes those tokens. */

/* ---------- Tokens ---------- */
:root{
    /* `--mono` retained as an alias for var(--font-sans) so legacy
       rules that reference it continue to render as Switzer. */
    --mono: var(--font-sans);
    /* `--font-numerals` mirrors the v3 token — use it for numeric strings
       (e.g. dates, years) that should render in Nudica Mono. */
    --font-numerals:'Nudica Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Brand palette aligned to the index (v3) light-theme --bg so the
       case-study pages match the home page background. */
    --off-white:#f9f9f9;
    --off-black:#1a1a1a;
    --blue:#0033ff;
    --gray-blue:#6992cc;
    --gray:#ebebeb;

    --body-l:1rem;

    --nav-height:2.75rem;
    --sidebar-width:22rem;
    --gutter:1rem;
    /* Match the v3 (index) horizontal page padding so case-study chrome
       and main content align with the home page edges. */
    --space-page:clamp(1.5rem, 4vw, 3rem);
    /* Mono letter-spacing alias (mirrors v3 token name). */
    --ls-mono:var(--track-mono-meta);

    --terrain-bg:var(--off-white);
    --terrain-band-1:#cfcfcf;
    --terrain-band-2:#a6a6a6;
    --terrain-band-3:#6b6b6b;
    --terrain-band-4:var(--off-black);
    --terrain-border:color-mix(in srgb, var(--off-black) 12%, transparent);

    --pear-stand-angle:-120deg;

    --nav-highlight-pad-x:.3em;
    --nav-highlight-pad-y:.15em;
    --nav-highlight-duration:.15s;

    /* Accent palette (used sparingly — mostly the bio code-block flashes) */
    --hot-pink:#ff2d95;
    --term-green:#00ff66;

    /* Type scale */
    --font-size-mark:1rem;
    --font-size-section:.85rem;
}

/* ---------- Base elements ---------- */
html{
    scroll-behavior:smooth;
}

body{
    background:var(--off-white);
    color:var(--off-black);
    font-size: var(--body-l);
}

h2{
    font-family:'Switzer';
}

/* ---------- Sticky header — mirrors the index topbar's padding scale. ---------- */
hgroup{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--off-white);
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    padding-block:clamp(1.25rem, 2.5vw, 2rem) 1rem;
    padding-inline:var(--space-page);
    height:auto;
}

/* Wordmark — matches .case-mark so the home + case-study versions share
   the same font/scale and align with the +/× toggle */
hgroup > h1{
    display:flex;
    align-items:center;
    font-family:'Switzer';
    font-weight:500;
    font-size:1.2rem;
    letter-spacing:.02em;
    line-height:1;

    text-transform:uppercase;
}

hgroup > h1 a{
    color:var(--blue);
}

/* ---------- Nav toggle (hamburger) ---------- */
.nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2rem;
    height:2rem;
    cursor:pointer;
    background:transparent;
    border:0;
}

.nav-toggle-icon{
    width:1rem;
    height:1rem;
    display:block;
    transition:rotate .2s ease;
}

body.nav-open .nav-toggle-icon{
    rotate:-45deg;
}

/* ---------- Top nav (file-tree) ---------- */
.top-nav{
    display:flex;
    flex-direction:row;
    gap:3rem;
    margin-block:1rem 0;
    font-family:var(--mono);
    font-size:.85rem;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.top-nav.case-toc{
    margin-block:3rem;
    gap:.75rem;
}

.top-nav li{
    font-weight:450;
}

.top-nav a{
    display:inline-block;
    color:var(--off-black);
    opacity:.5;
    transition:opacity .2s ease, color .2s ease;
}

.top-nav a:hover,
.top-nav a.is-active{
    opacity:1;
    color:var(--blue);
}

.top-nav > li{
    display:flex;
    align-items:baseline;
    gap:.5em;
}

.top-nav > li::before{
    content:'├─';
    color:color-mix(in srgb, var(--off-black) 40%, transparent);
    font-family:var(--mono);
}

.top-nav > li:last-child::before{
    content:'└─';
}

/* ---------- Nav pear (decorative — used by .top-nav a if ever populated) ---------- */
.nav-pear{
    display:inline-block;
    width:2em;
    height:auto;
    vertical-align:middle;
    margin-inline-end:.4em;
    rotate:0deg;
    transform-origin:50% 50%;
    transition:rotate .45s cubic-bezier(.34, 1.56, .64, 1);
}

@media (hover:hover){
    .top-nav a:hover .nav-pear{
        rotate:var(--pear-stand-angle);
    }
}

.top-nav a.is-active .nav-pear{
    rotate:var(--pear-stand-angle);
    animation:pear-pulse 1.4s ease-in-out infinite;
}

@keyframes pear-pulse{
    0%, 100% { scale: 1; }
    50%      { scale: 1.12; }
}

@media (prefers-reduced-motion: reduce){
    .nav-pear{ transition:none; }
    .top-nav a.is-active .nav-pear{ animation:none; }
}

/* ---------- Main + sections (base) ---------- */
main{
    display:flex;
    flex-direction:column;
}

[data-section]{
    min-height:calc(100vh - var(--nav-height));
    padding-block:2rem;
    scroll-margin-top:var(--nav-height);
}

[data-section] h2{
    font-family:var(--mono);
    font-size:var(--font-size-section);
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--off-black);
    margin-block-end:1.5rem;
}

[data-section] p{
    line-height:1.6;
    margin-block:1em;
    max-width:62ch;
}

/* ---------- About text ---------- */
.about{
    line-height:1.4;
}

.about--sidebar{ display:none; }

.about--main{
    display:block;
    padding-block:1rem 1.5rem;
    line-height:1.5;
}

.about--main em{
    font-weight:600;
}

/* ---------- Inline arrow ---------- */
.inline-arrow{
    display:inline-block;
    width:.75em;
    height:auto;
    vertical-align:-0.02em;
    margin-inline:.15em;
}

.inline-arrow--down{
    rotate:90deg;
}

/* ---------- List bullets ---------- */
/* Add `class="list"` to any <ul> or <ol> that should show ⟡ bullets. */
.list li{
    margin-block-end:1rem;
    line-height:1.5;
}

.list > li::before{
    content:'⟡';
    margin-inline-end:.6em;
}

ol.list > li::before{
    content:none;
}

/* ---------- Code label (inline tag) ---------- */
.code-label{
    font-family:var(--mono);
    font-size:.9rem;
    font-weight:400;
    letter-spacing:.02em;
    padding-block:.15rem .2rem;
    padding-inline:.25rem;
    margin-block:1rem 0;
    margin-inline:.1em 0;
    border-radius:6.7px;
    background:var(--gray);
}

/* ---------- Cursor trail (binary + soba easter egg) ---------- */
.cursor-trail{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.cursor-bit{
    position:fixed;
    font-family:'Switzer', system-ui, sans-serif;
    letter-spacing:.02em;
    font-size:10px;
    color:var(--off-black);
    opacity:.4;
    transform:translate(-50%, -50%);
    animation:cursor-bit-fade .6s linear forwards;
    will-change:opacity, transform;
}

@keyframes cursor-bit-fade{
    from{ opacity:.4; transform:translate(-50%, -50%); }
    to  { opacity:0;  transform:translate(-50%, calc(-50% - 12px)); }
}

@media (hover:none), (prefers-reduced-motion: reduce){
    .cursor-trail{ display:none; }
}

/* ---------- Mobile: hamburger menu ---------- */
@media (max-width:767.98px){
    :root{
        /* Taller sticky bar so the (now ~2.25rem) wordmark + toggle sit at top:1rem,
           matching the floating layout on case-study pages */
        --nav-height:5rem;
    }

    #primary-nav{
        position:absolute;
        top:100%;
        right:0;
        left:0;
        background:var(--off-white);
        padding-block:.5rem 1rem;
        padding-inline:var(--gutter);
        border-top:1px solid color-mix(in srgb, var(--off-black) 10%, transparent);
        transform:translateY(-.5rem);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease, transform .2s ease;
    }

    #primary-nav .top-nav{
        flex-direction:column;
        align-items:flex-end;
        gap:1rem;
    }

    /* Drop tree prefixes on mobile dropdown — stacked right-aligned column */
    .top-nav > li::before,
    .top-nav > li:last-child::before{
        content:'·';
    }

    body.nav-open #primary-nav{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto;
    }
}

/* ---------- Desktop: sticky topbar layout ---------- */
@media (min-width:768px){
    /* Sidebar Overview text is removed from the case-study DOM — the
       main-column Overview is the canonical version on every viewport. */
    .about--sidebar{ display:none; }
    .about--main{ display:block; }

    body{
        display:block;
    }

    hgroup{
        position:sticky;
        top:0;
        z-index:50;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        width:100%;
        height:auto;
        padding-block:clamp(1.25rem, 2.5vw, 2rem) 1rem;
        padding-inline:var(--space-page);
        background:var(--off-white);
    }

    .nav-toggle,
    #primary-nav,
    .case-toc,
    .case-toc-foot{
        display:none;
    }

    main{
        max-width:none;
        padding-inline:var(--space-page);
    }

    [data-section]{
        min-height:100vh;
        scroll-margin-top:0;
        padding-block:.75rem;
    }
}