/* Zeta "Paper World" v3-2 — warm papercraft WebGL depth-scroll.
   Design language: the approved zeta-design mockup, verbatim.
   Type: Bricolage Grotesque (display h1/h2/card titles/wordmark/email)
   + Hanken Grotesk (body, labels, nav, tags). Tokens: ink #191510,
   cream grounds, champagne foil #a9792f / #d0ab63.

   LEGIBILITY BY PLACEMENT, NOT DIMMING. There are NO scrims, pools,
   washes, or gradients over the render anywhere in this file. Each
   panel sits in its shot's genuinely clear negative space:
   - S1 hero (DARK render, s1-flow): the heavy machine anchors LOWER-RIGHT
     and dissolves into light paper forms streaming up-left, so the usual
     upper-left text zone is now occupied by lit paper. The measured
     near-black region is the LOWER-LEFT (x 0-36%, y 71%+ at 1440x900,
     plus a narrower column up to y 52%), so the hero column bottom-anchors
     there in cream, exactly like S3. The dark IS the render; the chrome
     is cream here via body.is-dusk.
   - S2 labs: prism centre, shaft crossing mid-left -> heading upper-left,
     card pinned lower-left below the shaft.
   - S3 lantern (dark render): text left in cream, light frosted-glass
     card hung low-left. The dark IS the render; nav flips to cream via
     body.is-dusk (a colour swap the scene drives, not an overlay).
   - S4 vista: centred statement; the heading free on the field, the
     body caption on a small opaque TORN-PAPER PLACARD (a contained
     paper object like the cards — not a wash; the field stays undimmed).
   - S5 plane (flying up-right): heading + lede upper-left, email + (c)
     pinned lower-left, all off the plane. */

:root {
    --paper: #f0e7d6;
    --paper-hi: #f7f0e2;
    --paper-lo: #e6dcc6;
    --ink: #191510;
    --ink-70: #4b4437;
    --ink-45: #7d7563;
    --line: rgba(25, 21, 16, 0.14);
    --line-soft: rgba(25, 21, 16, 0.08);
    --foil: #a9792f;
    --foil-hi: #d0ab63;
    --cream-bright: #f4ecd9;
    --shadow: 24px 40px 90px -50px rgba(40, 30, 12, 0.55);
    --font-display: "Bricolage Grotesque", "Iowan Old Style", Georgia, serif;
    --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --container: min(100% - 6vw, 1360px);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; font-family: var(--font-sans); color: var(--ink);
    background: var(--paper); overflow-x: hidden; -webkit-font-smoothing: antialiased;
    font-weight: 400; line-height: 1.6; letter-spacing: -0.006em;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

/* thin foil spine rail, far left */
.spine {
    position: fixed; left: clamp(0.7rem, 2.4vw, 1.9rem); top: 0; bottom: 0; width: 1px;
    background: var(--line); z-index: 40; pointer-events: none;
}
.spine::before {
    content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 20vh;
    background: linear-gradient(var(--foil), transparent);
}
body.is-dusk .spine { background: rgba(244, 236, 217, 0.2); }

/* minimal top nav: Bricolage wordmark + tracked Hanken links.
   No backing gradient — the chrome reads by colour alone, and flips
   to cream while the dark lantern shot holds the frame. */
.hud-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(1rem, 2.4vw, 1.7rem) clamp(1.4rem, 5vw, 5.5rem);
}
/* the Zeta mark: the 136px white-on-transparent Z png used as a CSS mask,
   so the shape is recoloured crisply by background-color alone — ink on the
   bright shots, cream while the dark lantern holds the frame (is-dusk). */
.brand {
    display: inline-block; width: 26px; height: 26px; aspect-ratio: 1 / 1;
    -webkit-mask: url(../assets/brand/zeta-mark.png) center / contain no-repeat;
    mask: url(../assets/brand/zeta-mark.png) center / contain no-repeat;
    background: var(--ink);
    transition: background-color 400ms ease;
}
body.is-dusk .brand { background: var(--cream-bright); }
.hud-nav { display: flex; gap: clamp(1.2rem, 2.6vw, 2.6rem); }
.hud-nav a {
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-70); transition: color 250ms ease;
}
.hud-nav a:hover, .hud-nav a:focus-visible { color: var(--foil); }
body.is-dusk .hud-nav a { color: rgba(240, 231, 212, 0.78); }
body.is-dusk .hud-nav a:hover, body.is-dusk .hud-nav a:focus-visible { color: var(--foil-hi); }

/* story stage — the canvas is the ground, full bleed, undimmed */
main { position: relative; z-index: 2; }
.story-scroll { position: relative; height: 600vh; }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#scene {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
    background: var(--paper); opacity: 0; transition: opacity 900ms ease;
}
body.is-ready #scene { opacity: 1; }

.story-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.story-copy { position: relative; width: var(--container); height: 100%; margin: 0 auto; }

/* panels — a copy column standing in clear render space */
.panel {
    position: absolute; left: 0; top: 0; height: 100%;
    width: min(38rem, 47vw);
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;
    padding: clamp(6.2rem, 14vh, 8.6rem) 0 clamp(2.4rem, 6.5vh, 4rem);
    opacity: 0; transform: translateY(1.6rem); filter: blur(5px); pointer-events: none;
    will-change: opacity, transform, filter;
    transition: opacity 460ms ease, transform 720ms var(--ease-spring), filter 520ms ease;
}
.panel.is-active { opacity: 1; filter: blur(0); transform: translateY(0); pointer-events: auto; }

.rule { flex: 0 0 auto; width: 3.2rem; height: 2px; background: var(--foil); border-radius: 2px; }

/* typography — mockup scale, verbatim */
.panel h1, .panel h2 {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    letter-spacing: -0.028em; line-height: 0.98; color: var(--ink); text-wrap: balance;
}
.display-xl { font-size: clamp(2.9rem, 6.4vw, 5.4rem); }
.display-l { font-size: clamp(2.5rem, 5vw, 4.2rem); }
.italic-accent { font-style: italic; font-weight: 500; }
.lede {
    margin: 0; font-size: 1.06rem; line-height: 1.62; color: #3f382c; max-width: 30rem;
}

/* S1 hero — the heavy->light render (s1-flow): the dense machine anchors
   lower-right and its stream of cream sheets/cranes/planes climbs through
   the upper-left, so the old top-left hero seat now sits ON the lit forms.
   Measured on the 1440x900 cover crop, the genuinely near-black field
   (cream >= 4.5:1 at every pixel) is the LOWER-LEFT: full width to ~36vw
   below y 71%, narrowing to a ~20vw column up at y 52%. The hero column
   therefore BOTTOM-ANCHORS in that dark field — an editorial lower-left
   stack, headline sized so its widest line ("Frontier AI,") stays inside
   the narrower dark column it rises into (the same treatment as S3: the
   dark is the render's own night, never an overlay). The headline keeps
   the flush-left three-line stack with the italic "cheap". */
.panel[data-panel="hero"] {
    width: min(46rem, 56vw); gap: 1.15rem;
    justify-content: flex-end;
    padding-bottom: clamp(2.2rem, 5vh, 3rem);
}
.panel[data-panel="hero"] h1 {
    max-width: min(52vw, 40rem);
    font-size: clamp(2.2rem, 3.3vw, 3.2rem);
    text-wrap: nowrap; /* explicit <br> stack; lines must not rewrap */
    color: var(--cream-bright);
}
.panel[data-panel="hero"] .rule { background: var(--foil-hi); }
.panel[data-panel="hero"] .lede {
    max-width: 27rem; font-size: 1.02rem; line-height: 1.6;
    color: rgba(240, 231, 212, 0.86);
}
/* the circular scroll-to-next affordance recolours for the dark ground */
.panel[data-panel="hero"] .scroll-next {
    border-color: rgba(244, 236, 217, 0.46); color: var(--cream-bright);
}
.panel[data-panel="hero"] .scroll-next:hover,
.panel[data-panel="hero"] .scroll-next:focus-visible {
    border-color: var(--cream-bright); background: var(--cream-bright); color: var(--ink);
}

/* S2 labs — heading upper-left above the light shaft; the research
   card drops to the lower-left cream, below the shaft's exit. */
.panel[data-panel="labs"] { width: min(42rem, 50vw); }
.panel[data-panel="labs"] .lede { max-width: 28rem; }
.panel[data-panel="labs"] .card { margin-top: auto; }

/* S3 lantern — the render is dark, so the copy goes cream. That is
   the render's own night, not an added scrim. */
.panel[data-panel="saas"] { width: min(40rem, 47vw); }
.panel[data-panel="saas"] h2 { color: var(--cream-bright); }
.panel[data-panel="saas"] .lede { color: rgba(240, 231, 212, 0.86); }
.panel[data-panel="saas"] .more-note { color: rgba(240, 231, 212, 0.72); }
.panel[data-panel="saas"] .card { margin-top: auto; }

/* S4 vista — the one centred statement, held in the hazy upper band
   where the golden field is calmest. */
.panel-center {
    left: 50%; width: min(52rem, 88vw); height: auto;
    top: 50%; bottom: auto; padding: 0;
    align-items: center; text-align: center;
    transform: translate(-50%, calc(-50% + 1.6rem));
}
.panel-center.is-active { transform: translate(-50%, -50%); }
/* the vista is dense gold: the heading stands FREE on the field (big
   Bricolage carries itself), but the body paragraph sits on a small
   CREAM PAPER PLACARD — a caption torn from the world's own paper.
   This is a contained, opaque design object (like the cards), not a
   scrim: the render around it stays fully undimmed. */
.panel-center { gap: 1.7rem; }
.panel-center .lede {
    position: relative; isolation: isolate;
    /* 34rem text measure + the placard's side padding */
    max-width: calc(34rem + 3rem); color: var(--ink); font-weight: 500;
    font-size: clamp(1.14rem, 1.4vw, 1.3rem); line-height: 1.6;
    letter-spacing: -0.004em; text-wrap: balance;
    padding: 1.1rem 1.5rem 1.2rem;
}
/* the placard surface: soft cream gradient + a whisper of warm fibre
   grain (tiny data-URI turbulence tile). The torn/deckled silhouette
   comes from the #placard-torn SVG filter (feTurbulence fractalNoise
   0.024x0.052, 4 octaves -> feDisplacementMap scale 11, ~±5px ripple),
   and the warm drop-shadows sit AFTER it in the filter chain so they
   follow the torn shape, lifting the caption off the gold field. */
.panel-center .lede::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.33 0 0 0 0 0.26 0 0 0 0 0.14 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") repeat,
        linear-gradient(173deg, var(--paper-hi) 0%, #f4ecdc 52%, var(--paper) 100%);
    filter: url(#placard-torn)
        drop-shadow(0 24px 38px rgba(40, 30, 12, 0.26))
        drop-shadow(0 5px 12px rgba(40, 30, 12, 0.17));
}
/* faint champagne foil hairline centred in the top margin — the one
   quiet tie to the foil rules and card trims elsewhere */
.panel-center .lede::after {
    content: ""; position: absolute; left: 50%; top: 0.52rem;
    width: 2.6rem; height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--foil) 28% 72%, transparent);
    opacity: 0.65;
}

/* S5 contact — message upper-left, sign-off pinned lower-left,
   the plane launches up-right between them. */
.panel[data-panel="contact"] { width: min(38rem, 44vw); }
.panel[data-panel="contact"] .lede { max-width: 24rem; }
.panel[data-panel="contact"] .signoff {
    margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem;
}

/* hero scroll-to-next control — a quiet circular outline affordance
   (ink ring, foil-tinged chevron) that advances to the Labs beat via
   the scene's own #research anchor scroll. Replaces the old CTA. */
.scroll-next {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9rem; height: 2.9rem; margin-top: 0.4rem; border-radius: 50%;
    border: 1px solid rgba(25, 21, 16, 0.38); color: var(--ink);
    transition: border-color 250ms ease, background 250ms ease,
                color 250ms ease, transform 250ms ease;
}
.scroll-next svg { width: 0.8rem; height: 0.8rem; transition: transform 250ms ease; }
.scroll-next:hover, .scroll-next:focus-visible {
    border-color: var(--ink); background: var(--ink); color: var(--foil-hi);
    transform: translateY(2px);
}
.scroll-next:hover svg, .scroll-next:focus-visible svg { transform: translateY(1px); }

/* animated-underline text link */
.text-link {
    display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.1rem;
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink);
}
.text-link .u { position: relative; }
.text-link .u::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
    background: var(--foil); transform: scaleX(0.35); transform-origin: left;
    transition: transform 300ms ease;
}
.text-link:hover .u::after, .text-link:focus-visible .u::after { transform: scaleX(1); }
.text-link .arw { color: var(--foil); }

/* email + sign-off */
.email-link {
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.15rem, 2.2vw, 1.55rem); letter-spacing: -0.01em; color: var(--ink);
    border-bottom: 1px solid var(--line); padding-bottom: 0.4rem;
    transition: border-color 300ms ease, color 300ms ease;
}
.email-link:hover, .email-link:focus-visible { color: var(--foil); border-color: var(--foil); }
.legal { margin: 0; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; color: #3a342a; text-transform: uppercase; }

/* quiet Bricolage footnote under each card (quiet by size, not by fading:
   ink-45 measured ~2.5:1 on the cream renders — too low) */
.more-note { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-70); }

/* card — paper object with a folded corner */
.card {
    position: relative; width: min(30rem, 100%); background: var(--paper-hi);
    border: 1px solid var(--line); border-radius: 3px; padding: 1.5rem 1.6rem 1.4rem;
    box-shadow: var(--shadow); overflow: hidden;
}
.card::after {
    content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
    background: linear-gradient(225deg, var(--paper-lo) 0 50%, transparent 50%);
    border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.card h3 {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    font-size: 1.5rem; letter-spacing: -0.02em; line-height: 0.98; color: var(--ink);
}
/* product-mark row: small logo inline beside the card title */
.card-title-row { display: flex; align-items: center; gap: 0.7rem; }
.card-logo { display: block; height: 32px; width: auto; flex: 0 0 auto; }
.card .cd { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--ink-70); max-width: 24rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.05rem; }
.tag-row span {
    font-size: 0.63rem; letter-spacing: 0.04em; font-weight: 500; color: var(--ink-70);
    padding: 0.3rem 0.62rem; border: 1px solid var(--line); border-radius: 99px;
}

/* light frosted-glass card for the dark lantern shot: light translucent
   fill, cream text — the shot breathes through it */
.card-glass {
    width: min(28rem, 100%);
    background: linear-gradient(166deg, rgba(247, 240, 226, 0.36), rgba(244, 236, 217, 0.18));
    border: 1px solid rgba(246, 231, 199, 0.44);
    box-shadow: 24px 40px 90px -50px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(244, 236, 217, 0.34);
    backdrop-filter: blur(16px) saturate(1.08); -webkit-backdrop-filter: blur(16px) saturate(1.08);
}
.card-glass::after {
    background: linear-gradient(225deg, rgba(244, 236, 217, 0.26) 0 50%, transparent 50%);
    border-left: 1px solid rgba(246, 231, 199, 0.38); border-bottom: 1px solid rgba(246, 231, 199, 0.38);
}
.card-glass h3 { color: var(--cream-bright); }
.card-glass .cd { color: rgba(240, 231, 212, 0.85); }
.card-glass .text-link { color: var(--cream-bright); }
.card-glass .text-link .arw { color: var(--foil-hi); }
.card-glass .text-link .u::after { background: var(--foil-hi); }

/* scroll cue — retired on this build: the hero column now bottom-anchors
   in S1's lower-left dark field (the only near-black zone in s1-flow), so
   the cue's old seat is occupied by the hero's own circular scroll-next,
   which carries the affordance. Kept in the DOM; hidden below (after the
   block, so it beats the block's own display: flex). */
.scroll-cue {
    position: absolute; left: max(3vw, calc((100% - 1360px) / 2)); bottom: 1.9rem; z-index: 5;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
    font-family: var(--font-sans); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.34em;
    text-transform: uppercase; color: rgba(240, 231, 212, 0.78);
    transition: opacity 400ms ease;
}
.cue-line {
    width: 1px; height: 2.1rem; margin-left: 1px;
    background: linear-gradient(var(--foil-hi), transparent);
}
.scroll-cue.is-hidden { opacity: 0; }
.scroll-cue { display: none; }

/* responsive.
   The canvas cover-fits, so as the viewport narrows each shot crops to the
   CENTRE of its frame: on tablet portrait roughly the middle half, on a
   phone the middle third — subject centred/right, the cleanest air in the
   top band (cream/sky/dusk) and the lower-left. Copy therefore stacks:
   heading at the TOP in the clear band, body under it, card/sign-off pinned
   low. Legibility stays placement + contrast — still no dimming anywhere. */
@media (max-width: 960px) {
    .panel { width: min(34rem, 58vw); }
    .panel[data-panel="hero"] { width: min(38rem, 64vw); }
    .panel[data-panel="hero"] h1 { max-width: none; font-size: clamp(2rem, 4.4vw, 3rem); }
    .panel-center { width: min(40rem, 88vw); }
}
@media (max-width: 740px) {
    .spine { left: max(0.55rem, env(safe-area-inset-left)); }

    /* compact nav bar: smaller mark, tighter tracked links, real tap area;
       fits 360px with room to breathe */
    .hud-top {
        padding: 0.8rem clamp(1.1rem, 4.5vw, 1.6rem);
        padding-left: max(clamp(1.1rem, 4.5vw, 1.6rem), env(safe-area-inset-left));
        padding-right: max(clamp(1.1rem, 4.5vw, 1.6rem), env(safe-area-inset-right));
        padding-top: max(0.8rem, env(safe-area-inset-top));
    }
    .brand { width: 22px; height: 22px; }
    .hud-nav { gap: clamp(0.9rem, 3.8vw, 1.5rem); }
    .hud-nav a { font-size: 0.62rem; letter-spacing: 0.13em; padding: 0.55rem 0.1rem; }

    .panel, .panel[data-panel="hero"], .panel[data-panel="labs"],
    .panel[data-panel="saas"], .panel[data-panel="contact"] {
        left: max(2vw, env(safe-area-inset-left)); width: min(30rem, 92vw); gap: 1.1rem;
        padding-top: max(5.2rem, calc(4.4rem + env(safe-area-inset-top)));
        padding-bottom: calc(2.2rem + env(safe-area-inset-bottom));
    }
    .display-xl { font-size: clamp(2.15rem, 9vw, 2.7rem); }
    .display-l { font-size: clamp(1.95rem, 8.2vw, 2.4rem); }
    .panel[data-panel="hero"] h1 { max-width: 100%; font-size: clamp(2.15rem, 9vw, 2.7rem); }
    .lede, .panel[data-panel="hero"] .lede, .panel[data-panel="labs"] .lede,
    .panel[data-panel="contact"] .lede { font-size: 0.95rem; line-height: 1.58; max-width: 100%; font-weight: 500; }
    /* on the phone crop of s1-flow (the scene slides the S1 camera left on
       portrait) the measured near-black field is the LOWER-LEFT: full
       column width below ~71vh, a ~50vw column from ~66vh, while the crane
       and the climbing forms hold the top half. The hero therefore
       bottom-anchors, compact: headline low in the ~50vw dark column, the
       lede and the scroll-next in the wide black field beneath it, ending
       above the frame's bottom ground-haze. Cream at 0.95 for stroke. */
    .panel[data-panel="hero"] {
        gap: 0.6rem;
        padding-bottom: max(0.9rem, calc(0.5rem + env(safe-area-inset-bottom)));
    }
    .panel[data-panel="hero"] h1 { font-size: clamp(1.5rem, 6.9vw, 1.7rem); }
    .panel[data-panel="hero"] .lede {
        max-width: 18rem; font-size: 0.9rem; line-height: 1.46;
        color: rgba(244, 236, 217, 0.95);
    }
    .panel[data-panel="hero"] .scroll-next { width: 2.5rem; height: 2.5rem; }
    .panel[data-panel="saas"] .lede { max-width: 13rem; }
    /* the glass card hangs partly over the lantern's glow on the narrow
       crop, so its own surface deepens toward ink-glass (the card's fill,
       not a scrim on the render) to keep the cream copy crisp */
    .card-glass {
        background: linear-gradient(166deg, rgba(31, 22, 12, 0.52), rgba(24, 16, 9, 0.38));
        border-color: rgba(246, 231, 199, 0.30);
    }
    /* vista: the statement stays a CENTRED banner in the clear haze band */
    .panel-center {
        left: 50%; width: min(30rem, 92vw); top: 50%;
        padding: 0; gap: 1rem; align-items: center; text-align: center;
    }
    /* the placard scales down with the phone measure: tighter padding,
       same torn cream surface with a gentler tear (scale-7 filter) so
       the deckle stays proportionate to the narrower caption */
    .panel-center .lede {
        font-size: 1.08rem; max-width: calc(25rem + 2.2rem);
        line-height: 1.6; font-weight: 500; padding: 0.95rem 1.1rem 1.05rem;
    }
    .panel-center .lede::before {
        filter: url(#placard-torn-m)
            drop-shadow(0 16px 26px rgba(40, 30, 12, 0.26))
            drop-shadow(0 4px 9px rgba(40, 30, 12, 0.17));
    }
    .card { width: 100%; padding: 1.25rem 1.3rem 1.2rem; }
    .card h3 { font-size: 1.32rem; }
    .card .cd { font-size: 0.88rem; }
    .more-note { font-size: 0.78rem; }
    .scroll-next { width: 2.75rem; height: 2.75rem; margin-top: 0.2rem; }
    .card-logo { height: 26px; }
    /* the long address must never overflow 360px: size to the viewport */
    .email-link { font-size: clamp(0.98rem, 5.4vw, 1.2rem); }
    .scroll-cue { display: none; }
}
/* small portrait phones (360-400): one nudge tighter, everything still airy */
@media (max-width: 400px) {
    .hud-nav { gap: 0.8rem; }
    .hud-nav a { font-size: 0.6rem; letter-spacing: 0.11em; }
    .display-xl { font-size: clamp(2.05rem, 9.4vw, 2.35rem); }
    .panel[data-panel="hero"] h1 { font-size: clamp(1.45rem, 6.9vw, 1.65rem); }
    .display-l { font-size: clamp(1.9rem, 8.6vw, 2.15rem); }
    .card { padding: 1.15rem 1.15rem 1.1rem; }
    .tag-row span { font-size: 0.6rem; padding: 0.28rem 0.55rem; }
}
/* landscape phones: barely any height, plenty of width — the type steps
   down hard and the two card sections go two-column (copy left, card
   right) so nothing has to stack past the fold */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1024px) {
    .hud-top {
        padding: 0.65rem clamp(1.2rem, 4vw, 2.2rem);
        padding-left: max(clamp(1.2rem, 4vw, 2.2rem), env(safe-area-inset-left));
        padding-right: max(clamp(1.2rem, 4vw, 2.2rem), env(safe-area-inset-right));
    }
    .brand { width: 20px; height: 20px; }
    .hud-nav a { font-size: 0.62rem; letter-spacing: 0.13em; padding: 0.4rem 0.1rem; }
    .spine { left: max(0.55rem, env(safe-area-inset-left)); }
    .scroll-cue { display: none; }
    .panel, .panel[data-panel="hero"], .panel[data-panel="labs"],
    .panel[data-panel="saas"], .panel[data-panel="contact"] {
        left: max(2vw, env(safe-area-inset-left)); gap: 0.7rem;
        padding: 3.7rem 0 1.3rem;
    }
    .rule { width: 2.4rem; }
    .display-xl { font-size: clamp(1.7rem, 6vh, 2.1rem); }
    .display-l { font-size: clamp(1.55rem, 5.4vh, 1.9rem); }
    .panel[data-panel="hero"] { width: min(88vw, 44rem); }
    .panel[data-panel="hero"] h1 { max-width: none; font-size: clamp(1.7rem, 6vh, 2.1rem); }
    .lede, .panel[data-panel="hero"] .lede, .panel[data-panel="labs"] .lede,
    .panel[data-panel="saas"] .lede, .panel[data-panel="contact"] .lede {
        font-size: 0.88rem; line-height: 1.45; max-width: 26rem; font-weight: 450;
    }
    /* dark S1 (s1-flow): on the wide landscape crop the machine and its
       climbing stream light the right and top; the bottom-anchored hero
       sits in the black lower-left field */
    .panel[data-panel="hero"] .lede { max-width: 22rem; }
    .scroll-next { width: 2.3rem; height: 2.3rem; margin-top: 0; }
    /* labs goes two-column: copy left in the light shaft, the opaque paper
       card right of the prism; the footnote stays left in the clear cream
       (never over the spectrum fan) */
    .panel[data-panel="labs"] {
        width: min(92vw, 54rem);
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 21.5rem);
        grid-template-rows: auto auto auto 1fr;
        column-gap: clamp(1.4rem, 4vw, 2.8rem);
        align-items: start;
    }
    .panel[data-panel="labs"] .rule,
    .panel[data-panel="labs"] h2,
    .panel[data-panel="labs"] .lede { grid-column: 1; }
    .panel[data-panel="labs"] .card {
        grid-column: 2; grid-row: 1 / -1; align-self: center;
        margin-top: 0; width: 100%; padding: 1.05rem 1.15rem 1rem;
    }
    .panel[data-panel="labs"] .more-note {
        grid-column: 1; grid-row: 4; align-self: start; font-size: 0.74rem;
    }
    /* saas stays a single left column: the whole right of the frame is the
       glowing lantern, so the ink-glass card tucks into the dark ground
       low-left instead */
    .panel[data-panel="saas"] { width: min(88vw, 30rem); gap: 0.6rem; }
    .panel[data-panel="saas"] .lede { max-width: 24rem; }
    .panel[data-panel="saas"] .card {
        width: min(21.5rem, 100%); padding: 1.05rem 1.15rem 1rem;
    }
    .panel[data-panel="saas"] .more-note { font-size: 0.74rem; }
    .card-glass {
        background: linear-gradient(166deg, rgba(31, 22, 12, 0.52), rgba(24, 16, 9, 0.38));
        border-color: rgba(246, 231, 199, 0.30);
    }
    .card h3 { font-size: 1.18rem; }
    .card .cd { font-size: 0.82rem; margin-top: 0.45rem; }
    .tag-row { margin-top: 0.7rem; gap: 0.32rem; }
    .tag-row span { font-size: 0.58rem; padding: 0.24rem 0.5rem; }
    .card .text-link { margin-top: 0.75rem; font-size: 0.7rem; }
    .card-logo { height: 24px; }
    /* re-assert the centred banner: the grouped .panel rule above matches
       .panel-center too and would drag it to the left rail */
    .panel-center { left: 50%; top: 50%; width: min(88vw, 40rem); gap: 0.8rem; padding: 0; }
    .panel-center .lede {
        font-size: 1rem; max-width: calc(28rem + 2.4rem); font-weight: 500;
        padding: 0.8rem 1.2rem 0.9rem;
    }
    .panel[data-panel="contact"] .signoff { gap: 0.7rem; }
    .email-link { font-size: 1.05rem; padding-bottom: 0.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .panel, .scroll-next, #scene { transition: none; }
    body.is-ready #scene { opacity: 1; }
}