/* ============================================================
   SUNFARERS — console shell stylesheet
   Structure:
     1. Tokens
     2. Base + backdrop
     3. Console shell (header / nav / main / status / footer)
     4. Section furniture (headers, leads, quotes, cards, buttons)
     5. Panel-specific components
     6. Motion + reveal
     7. Responsive
   ============================================================ */

/* ===== 1. TOKENS =====
   Colour sources: SpaceSimMenuTheme.cs (gold #FFD66B, light purple #C9A0FF,
   salmon #FFB36B, utility violet #AD75FF, station teal #42EBBD, combat orange
   #FF7A29) over the game's crimson nebula space. Fonts are the in-game trio:
   Tektur (readouts), Alegreya Sans (text), Barlow Condensed (Command Deck). */
:root {
    /* surfaces — crimson-black, like the game's red nebula space */
    --bg: #10060b;
    --bg-lift: #180a10;
    --line: rgba(201, 160, 255, 0.13);
    --line-soft: rgba(201, 160, 255, 0.07);
    --surface: rgba(201, 160, 255, 0.035);
    --surface-hi: rgba(201, 160, 255, 0.065);

    /* ink */
    --text: #ece3d6;
    --body-text: rgba(236, 227, 214, 0.84);
    --dim: rgba(236, 227, 214, 0.58);
    --faint: rgba(236, 227, 214, 0.34);

    /* brand — instrument palette from the game HUD */
    --purple: #c9a0ff;
    --glow: #d879ff;
    --gold: #ffd66b;
    /* magenta panel-border triplet, like the game's hand-drawn UI frames */
    --panel-line-rgb: 216, 121, 255;

    /* per-section accent, driven by app.js */
    --accent-rgb: 255, 214, 107;
    --accent: rgb(var(--accent-rgb));

    /* type */
    --f-display: 'Tektur', sans-serif;
    --f-body: 'Alegreya Sans', system-ui, sans-serif;
    --f-mono: 'Tektur', ui-monospace, monospace;
    --f-cond: 'Barlow Condensed', sans-serif;

    --t-display: clamp(2.2rem, 4.2vw, 7.5rem);
    --t-title: clamp(1.5rem, 2.4vw, 3.8rem);
    --t-lead: clamp(1rem, calc(0.52rem + 0.34vw), 1.5rem);
    --t-body: clamp(0.94rem, calc(0.48rem + 0.4vw), 1.25rem);
    --t-h3: clamp(0.72rem, calc(0.52rem + 0.22vw), 1.02rem);
    --t-label: clamp(0.56rem, calc(0.4rem + 0.16vw), 0.82rem);

    /* rhythm */
    --gap: clamp(1rem, 1.3vw, 2rem);
    --block: clamp(1.9rem, 2.5vw, 4rem);
    --measure: 68ch;
    /* Fluid editorial canvas: broad enough to use 4K/ultrawide displays,
       while component-level measures keep prose readable. */
    --content-w: min(90vw, 3200px);

    /* motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

/* ===== 2. BASE + BACKDROP ===== */
html, body { height: 100%; overflow: hidden }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--f-body);
    font-weight: 400;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
}

.filter-definitions {
    position: absolute;
}

#stars {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* A seamless derivative of the home hero's nebula, with unique foreground
   objects removed. It repeats at its native resolution instead of being
   enlarged to cover large monitors, preserving detail without visible joins. */
.site-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 14% 20%, rgba(201, 160, 255, 0.07), transparent 23%),
        radial-gradient(circle at 84% 74%, rgba(255, 214, 107, 0.045), transparent 19%),
        linear-gradient(180deg, rgba(16, 6, 11, 0.04), rgba(16, 6, 11, 0.22)),
        url('shots/site-nebula-tile.jpg');
    background-position: center, center, center, center;
    background-size: auto, auto, 100% 100%, 2508px 2508px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    opacity: 0.56;
}

.site-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 112% 92% at 50% 44%, transparent 42%, rgba(10, 3, 7, 0.42) 100%);
}

/* Film layer: scanlines + grain + edge vignette. Purely decorative. */
.film {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, 0.018) 3px 6px),
        radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(10, 3, 7, 0.55) 100%);
}

.film::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Instrument corner brackets on the viewport frame. */
.frame-corner {
    position: fixed;
    width: 22px;
    height: 22px;
    z-index: 99;
    pointer-events: none;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    transition: border-color 0.6s var(--ease);
}
.frame-tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0 }
.frame-tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0 }
.frame-bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0 }
.frame-br { bottom: 10px; right: 10px; border-left: 0; border-top: 0 }

::selection { background: rgba(var(--accent-rgb), 0.3); color: var(--text) }

:focus-visible {
    outline: 1px solid rgba(var(--accent-rgb), 0.75);
    outline-offset: 3px;
}

/* ===== 3. CONSOLE SHELL ===== */
.console {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    /* minmax(0,...) not 1fr: a bare 1fr is minmax(auto,1fr), whose auto floor
       is the widest child's min-content width — that inflated the column past
       the viewport on narrow screens and pushed every panel off-screen. */
    grid-template-columns: minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}

/* --- header --- */
/* Every child is placed explicitly. .scroll-veil shares row 3 with the main
   panel, and a single explicitly-placed child makes grid auto-placement skip
   that cell for its siblings — so nothing here may rely on auto-placement. */
.console-header { grid-row: 1; grid-column: 1 }
.sidebar { grid-row: 2; grid-column: 1 }
.subnav { grid-row: 3; grid-column: 1 }
.main-panel { grid-row: 4; grid-column: 1 }
.scroll-veil { grid-row: 4; grid-column: 1 }
.status-bar { grid-row: 5; grid-column: 1 }
.console-footer { grid-row: 6; grid-column: 1 }

.console-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    padding: 0.7rem 1.5rem 0.85rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(24, 9, 17, 0.82), rgba(18, 6, 12, 0.62));
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

/* warm flare behind the wordmark */
.console-header::before {
    content: '';
    position: absolute;
    inset: -140% -20% 35% -20%;
    background: radial-gradient(ellipse at center,
        rgba(255, 214, 107, 0.2) 0%, rgba(255, 214, 107, 0.06) 30%, transparent 66%);
    filter: blur(14px);
    animation: headerFlare 11s ease-in-out infinite;
    pointer-events: none;
}

/* accent hairline that re-tints per section */
.console-header::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), 0.08) 25%,
        rgba(var(--accent-rgb), 0.55) 50%,
        rgba(var(--accent-rgb), 0.08) 75%,
        transparent 100%);
    transition: background 0.6s var(--ease);
}

.header-sun {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(100px, 15vw, 200px);
    height: clamp(100px, 15vw, 200px);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 228, 160, 0.2) 0%, rgba(245, 189, 79, 0.1) 15%,
        rgba(245, 189, 79, 0.04) 30%, transparent 68%);
    animation: sunPulse 5.2s ease-in-out infinite;
    pointer-events: none;
}

.header-tagline {
    font-size: clamp(0.6rem, 1vw, 0.72rem);
    letter-spacing: 0.2em;
    font-style: italic;
    color: rgba(236, 227, 214, 0.6);
    text-shadow: 0 0 18px rgba(255, 214, 107, 0.22);
    position: relative;
    z-index: 1;
}

.header-title {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(1.2rem, 2.7vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: 0.17em;
    padding-left: 0.17em;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
    color: transparent;
    background: linear-gradient(130deg, #f0e2cc 12%, #ffd66b 48%, #c9a0ff 86%);
    background-size: 190% 190%;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 30px rgba(192, 132, 252, 0.2), 0 0 44px rgba(255, 214, 107, 0.22);
    animation: headerTitleShift 9s ease-in-out infinite;
}

/* RGB-split glitch layers driven from app.js */
.header-title::before,
.header-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.header-title::before {
    color: rgba(255, 50, 50, 0.75);
    clip-path: inset(var(--g-t1, 100%) 0 var(--g-b1, 0%) 0);
    transform: translate(var(--g-x1, 0px), 0) skewX(var(--g-sk1, 0deg));
}
.header-title::after {
    color: rgba(50, 220, 210, 0.75);
    clip-path: inset(var(--g-t2, 100%) 0 var(--g-b2, 0%) 0);
    transform: translate(var(--g-x2, 0px), 0) skewX(var(--g-sk2, 0deg));
}

.header-sub {
    font-family: var(--f-display);
    font-size: clamp(0.5rem, 0.85vw, 0.64rem);
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: rgba(201, 160, 255, 0.72);
    text-shadow: 0 0 14px rgba(201, 160, 255, 0.24);
    position: relative;
    z-index: 1;
}

/* --- tab rail --- */
.sidebar {
    display: flex;
    align-items: stretch;
    /* Centred via auto margins rather than justify-content:center — centred
       flex overflow spills off both edges and the leading tabs become
       unreachable by scrolling. Auto margins collapse to 0 when it overflows. */
    justify-content: flex-start;
    padding: 0 0.4rem;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(18, 6, 12, 0.66);
    backdrop-filter: blur(8px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    position: relative;
}
.sidebar::-webkit-scrollbar { display: none }
.sidebar > :first-child { margin-left: auto }
.sidebar > :last-child { margin-right: auto }
.sidebar.scroll-right { box-shadow: inset -26px 0 18px -14px rgba(13, 4, 9, 0.85) }
.sidebar.scroll-left { box-shadow: inset 26px 0 18px -14px rgba(13, 4, 9, 0.85) }
.sidebar.scroll-left.scroll-right {
    box-shadow: inset -26px 0 18px -14px rgba(13, 4, 9, 0.85),
                inset 26px 0 18px -14px rgba(13, 4, 9, 0.85);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0.7rem 0.95rem;
    /* Barlow Condensed, like the game's Command Deck hotbar buttons */
    font-family: var(--f-cond);
    font-weight: 500;
    font-size: clamp(0.74rem, 1vw, 0.88rem);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--dim);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-item:hover { color: var(--text); background: rgba(201, 160, 255, 0.05) }
.nav-item.active {
    color: var(--accent);
    background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.09));
    border-bottom-color: var(--accent);
}
.nav-item.active::after {
    content: '';
    position: absolute;
    left: 20%; right: 20%; bottom: -2px;
    height: 2px;
    background: var(--accent);
    filter: blur(4px);
    opacity: 0.9;
}
.nav-icon { font-size: 0.85rem; opacity: 0.45; transition: opacity 0.25s var(--ease) }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { opacity: 0.95 }

/* --- sub-rail: pages inside the active group ---
   Deliberately quieter than the group rail above it: smaller, no icons, and
   a hairline underline instead of a lit border, so the two levels never
   compete for the same "you are here" reading. Hidden (and its grid row
   collapsed) for single-page groups. */
.subnav {
    display: flex;
    justify-content: flex-start;
    gap: 0;
    padding: 0 0.4rem;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(13, 4, 9, 0.55);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.subnav[hidden] { display: none }
.subnav::-webkit-scrollbar { display: none }
.subnav > :first-child { margin-left: auto }
.subnav > :last-child { margin-right: auto }

.subnav-item {
    min-height: 32px;
    padding: 0.42rem 0.85rem;
    font-family: var(--f-cond);
    font-weight: 400;
    font-size: clamp(0.66rem, 0.86vw, 0.78rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.subnav-item:hover { color: var(--text) }
.subnav-item.active {
    color: var(--accent);
    border-bottom-color: rgba(var(--accent-rgb), 0.8);
}
.subnav-item.active::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    margin-right: 0.5em;
    vertical-align: 0.14em;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent);
}

/* --- scrolling main region --- */
.main-panel {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(1.8rem, 3.4vw, 3.2rem) clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.22) transparent;
    scroll-behavior: smooth;
}
.main-panel::-webkit-scrollbar { width: 7px }
.main-panel::-webkit-scrollbar-track { background: transparent }
.main-panel::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.22);
    border-radius: 4px;
}
.main-panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.4) }

.main-panel.tour-mode { padding: 0; overflow: hidden }

/* Bottom fade so cut-off content reads as "more below". It shares the grid
   cell with .main-panel rather than living inside it — an absolutely
   positioned child of a scroll container scrolls with the content. */
.scroll-veil {
    align-self: end;
    width: 100%;
    height: 84px;
    z-index: 9;
    pointer-events: none;
    background: linear-gradient(to top, rgba(16, 5, 11, 0.95) 10%, rgba(16, 5, 11, 0.55) 55%, transparent);
    opacity: 0;
    transition: opacity 0.4s var(--ease);
}
.console.can-scroll .scroll-veil { opacity: 1 }

.panel {
    display: none;
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
}
.panel.active { display: block; animation: panelIn 0.5s var(--ease) both }

/* --- status bar --- */
.status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.42rem 1.2rem;
    border-top: 1px solid var(--line-soft);
    background: rgba(18, 6, 12, 0.75);
    backdrop-filter: blur(8px);
    min-height: 1.9rem;
}
.status-text {
    font-family: var(--f-mono);
    font-size: clamp(0.55rem, 0.82vw, 0.68rem);
    color: rgba(var(--accent-rgb), 0.62);
    letter-spacing: 0.03em;
    transition: color 0.5s var(--ease);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-text.crack { color: rgba(201, 160, 255, 0.5); font-style: italic }
.status-caret {
    display: inline-block;
    width: 0.5em;
    height: 0.95em;
    margin-left: 2px;
    background: rgba(var(--accent-rgb), 0.6);
    vertical-align: text-bottom;
    animation: blink 1.05s step-end infinite;
}
.status-meta {
    font-family: var(--f-mono);
    font-size: clamp(0.5rem, 0.74vw, 0.6rem);
    letter-spacing: 0.16em;
    color: var(--faint);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- footer --- */
.console-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 0.55rem 1.2rem;
    border-top: 1px solid var(--line-soft);
    background: rgba(18, 6, 12, 0.72);
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center }
.footer-copy { font-size: 0.6rem; color: rgba(236, 227, 214, 0.26); letter-spacing: 0.06em }

.footer-signup-form { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap }
.footer-signup-label {
    font-family: var(--f-display);
    font-size: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(201, 160, 255, 0.62);
}
.footer-signup-row { display: flex; align-items: stretch }
.footer-signup-input {
    width: min(290px, 52vw);
    min-width: 0;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--text);
    background: rgba(201, 160, 255, 0.055);
    border: 1px solid rgba(201, 160, 255, 0.2);
    border-right: 0;
    padding: 0.62em 0.9em;
    outline: none;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.footer-signup-input::placeholder { color: rgba(236, 227, 214, 0.24) }
.footer-signup-input:focus {
    border-color: rgba(255, 214, 107, 0.45);
    background: rgba(201, 160, 255, 0.09);
}
.footer-signup-btn {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 214, 107, 0.09);
    border: 1px solid rgba(255, 214, 107, 0.32);
    padding: 0.74em 1.2em;
    cursor: pointer;
    transition: background 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.footer-signup-btn:hover:not(:disabled) {
    background: rgba(255, 214, 107, 0.17);
    border-color: rgba(255, 214, 107, 0.55);
    box-shadow: 0 0 18px rgba(255, 214, 107, 0.18);
}
.footer-signup-btn:disabled { opacity: 0.45; cursor: default }
.footer-signup-msg {
    font-family: var(--f-mono);
    font-size: 0.58rem;
    min-height: 1em;
    color: rgba(236, 227, 214, 0.45);
}
.footer-signup-msg.success { color: rgba(255, 214, 107, 0.85) }
.footer-signup-msg.error { color: rgba(201, 160, 255, 0.78) }

/* ===== 4. SECTION FURNITURE ===== */

/* Section header: centred lockup with a giant ghost numeral pinned into the
   side margin (alternating sides per section — the numerals are the site's
   bold asymmetric anchor, inspired by oversized corner numerals in editorial
   portfolio design). The main panel clips overflow-x, so the bleed is safe. */
.sec-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    margin-bottom: 1.1rem;
    position: relative;
}
.sec-index {
    position: absolute;
    top: 50%;
    transform: translateY(-54%);
    z-index: -1;
    font-family: var(--f-display);
    font-weight: 900;
    font-size: clamp(5rem, 13vw, 12rem);
    line-height: 0.85;
    letter-spacing: 0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.34);
    text-shadow: 0 0 60px rgba(var(--accent-rgb), 0.12);
    opacity: 0.9;
    user-select: none;
    pointer-events: none;
    /* Reaches into the empty viewport margin on wide screens, hugs the
       column edge on narrow ones. */
    left: max(-15rem, calc((var(--content-w) - 100vw) / 2 + 1.5rem));
}
/* alternate sides walking down the DOM so consecutive pages flip the anchor */
main > :nth-child(even) .sec-index {
    left: auto;
    right: max(-15rem, calc((var(--content-w) - 100vw) / 2 + 1.5rem));
}
/* full width so long titles ("Navigation & Propulsion") stay on one line;
   the kicker below caps itself at the measure so its rules stay tidy */
.sec-head-text { min-width: 0; width: 100% }
.sec-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.72);
    margin: 0 auto 0.45rem;
    max-width: var(--measure);
}
/* symmetric hairlines so the kicker reads as a centred rule */
.sec-kicker::before,
.sec-kicker::after {
    content: '';
    flex: 1;
    height: 1px;
    min-width: 20px;
}
.sec-kicker::before { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4)) }
.sec-kicker::after { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.4), transparent) }
.sec-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--t-title);
    line-height: 1.12;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 0 34px rgba(var(--accent-rgb), 0.22);
}

.sec-lead {
    font-size: var(--t-lead);
    color: var(--body-text);
    line-height: 1.78;
    text-align: center;
    max-width: var(--measure);
    margin: 0 auto clamp(1.6rem, 2.8vw, 2.4rem);
}

.section-sep {
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.22), rgba(201, 160, 255, 0.06) 55%, transparent);
    margin: var(--block) 0;
}

/* body blocks — copy stays left-aligned inside the centred column, as before */
.feature-block { margin-bottom: 2.1rem }
.feature-block:last-child { margin-bottom: 0 }
.feature-block-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--f-display);
    font-size: var(--t-h3);
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.65rem;
}
.feature-block-title::before {
    content: '';
    width: 14px;
    height: 1px;
    background: rgba(var(--accent-rgb), 0.6);
    flex-shrink: 0;
}
.feature-block p { font-size: var(--t-body); color: var(--body-text); line-height: 1.8 }
.section-top { margin-top: var(--block) }
.feature-followup { margin-top: 0.9rem }

/* --- MEDIA ROWS: a screenshot beside the copy it illustrates ---
   Two columns span the fluid panel while the prose keeps a readable measure.
   .flip puts the image on the left. Below 860px the row stacks, text first
   (the flip order resets so reading order stays copy-then-picture). */
.media-row {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: center;
    margin-bottom: 2.1rem;
}
.media-row .feature-block { margin-bottom: 0 }
.media-row .feature-block { max-width: var(--measure) }
.media-row:not(.flip) .feature-block { justify-self: end }
.media-row.flip .feature-block { justify-self: start }
.media-row .viewport { max-width: none; margin: 0 }
.media-row.flip .viewport { order: -1 }
/* On wide viewports the image column bleeds toward its screen edge, giving
   each row a left/right pull instead of a symmetric box. Clipped safely by
   .main-panel's overflow-x. */
@media (min-width: 1200px) {
    .media-row:not(.flip) .viewport { margin-right: max(-8rem, calc((var(--content-w) - 100vw) / 2 + 1.25rem)) }
    .media-row.flip .viewport { margin-left: max(-8rem, calc((var(--content-w) - 100vw) / 2 + 1.25rem)) }
}
.media-row .lore-quote { margin: 1.4rem 0 0 }

/* Standalone prose remains a readable instrument column even when the panel
   around it expands across a large display. Wide grids, diagrams and media
   rows still consume the surrounding screen space. */
.panel:not(.panel-home):not(.panel-tour) > .feature-block {
    width: min(100%, var(--measure));
    margin-left: auto;
    margin-right: auto;
}

/* pull quotes */
.lore-quote {
    position: relative;
    padding: 1.15rem 1.5rem 1.15rem 1.7rem;
    margin: 1.8rem 0;
    font-style: italic;
    color: rgba(236, 227, 214, 0.66);
    font-size: clamp(0.92rem, 1.05vw, 1.02rem);
    line-height: 1.78;
    max-width: 60ch;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.05), transparent 70%);
    border-left: 1px solid rgba(var(--accent-rgb), 0.4);
}
.lore-quote::before {
    content: '\201C';
    position: absolute;
    top: -0.15em; left: 0.35rem;
    font-family: var(--f-display);
    font-size: 2.4rem;
    line-height: 1;
    color: rgba(var(--accent-rgb), 0.18);
    pointer-events: none;
}
.lore-quote .lore-src {
    display: block;
    margin-top: 0.65rem;
    font-style: normal;
    font-family: var(--f-mono);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--accent-rgb), 0.55);
}

/* card grids */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
    gap: var(--gap);
    margin-top: 1.6rem;
}

.feature-card, .home-card {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.4rem;
    background: linear-gradient(165deg, rgba(201, 160, 255, 0.055), rgba(20, 8, 14, 0.28));
    border: 1px solid var(--line-soft);
    transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* accent rule along the top edge, lights up on hover */
.feature-card::before, .home-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.65), rgba(var(--accent-rgb), 0.06) 60%, transparent);
    opacity: 0.5;
    transition: opacity 0.35s var(--ease);
}
.feature-card:hover, .home-card:hover {
    border-color: rgba(var(--accent-rgb), 0.28);
    transform: translateY(-3px);
    box-shadow: 0 12px 34px -18px rgba(var(--accent-rgb), 0.5), inset 0 0 40px rgba(var(--accent-rgb), 0.045);
}
.feature-card:hover::before, .home-card:hover::before { opacity: 1 }
/* scan sweep */
.feature-card::after, .home-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.55), transparent);
    opacity: 0;
    pointer-events: none;
}
.feature-card:hover::after, .home-card:hover::after { animation: scanSweep 0.85s var(--ease) forwards }

.feature-card-title, .home-card-title {
    font-family: var(--f-display);
    font-size: clamp(0.68rem, calc(0.5rem + 0.2vw), 1rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.55rem;
}
.feature-card p, .home-card p {
    font-size: clamp(0.88rem, calc(0.5rem + 0.36vw), 1.16rem);
    color: var(--body-text);
    line-height: 1.75;
}

.story-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.story-grid .feature-card { grid-column: span 2 }
.story-grid .feature-card:nth-last-child(-n+2) { grid-column: span 3 }

/* SVG clipart */
.clipart { display: block; margin: 1.4rem auto; max-width: 400px; width: 100% }
.clipart-small { display: block; margin: 1.2rem auto; max-width: 165px; width: 100% }

/* ===== 5. PANEL COMPONENTS ===== */

/* --- HOME: hero --- */
.panel-home { position: relative; max-width: none }

.home-content { position: relative; z-index: 1 }

/* Hero: centred lockup, with the orrery below it and SNOAS columns flanking
   the instrument. The nebula itself is now the full-site backdrop above. */
.hero {
    --orrery-size: clamp(280px, 30vw, 1040px);
    max-width: var(--content-w);
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.hero-copy { position: relative; z-index: 2; min-width: 0 }
.hero-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 214, 107, 0.78);
    margin-bottom: 0.9rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
    content: '';
    width: clamp(20px, 4vw, 44px);
    height: 1px;
    background: rgba(255, 214, 107, 0.55);
}
.hero-title {
    font-family: var(--f-display);
    font-weight: 900;
    font-size: var(--t-display);
    line-height: 0.96;
    letter-spacing: 0.04em;
    margin-bottom: 0.7rem;
    /* padding-right keeps the gradient box wider than the glyphs: a
       background-clip:text run that overflows its box loses its fill. */
    padding-right: 0.14em;
    color: transparent;
    background: linear-gradient(120deg, #f4e8d2 8%, #ffd66b 42%, #c9a0ff 88%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 60px rgba(192, 132, 252, 0.18);
}
.hero-sub {
    font-family: var(--f-display);
    font-size: clamp(0.62rem, 1.05vw, 0.8rem);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(201, 160, 255, 0.8);
    margin-bottom: 1.3rem;
}
.hero-lead {
    font-size: var(--t-lead);
    color: var(--body-text);
    line-height: 1.82;
    max-width: 62ch;
    margin: 0 auto;
}
.hero-lead strong { font-weight: 400; color: var(--text) }

/* orrery sits centred beneath the lockup, flanked by the SNOAS columns */
.hero-orrery-col {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: clamp(1.2rem, 2.4vw, 2rem);
}
.home-orrery {
    position: relative;
    width: min(100%, var(--orrery-size));
    aspect-ratio: 1;
}
.home-orrery::before {
    content: '';
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 107, 0.12) 0%, rgba(124, 58, 237, 0.08) 40%, transparent 70%);
    pointer-events: none;
}
.home-sun {
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    background: radial-gradient(circle at 30% 30%, #ffe4a0, var(--gold));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px var(--gold), 0 0 40px rgba(245, 189, 79, 0.5),
                0 0 80px rgba(245, 189, 79, 0.2), 0 0 120px rgba(245, 189, 79, 0.08);
    z-index: 2;
}
.home-orbit {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(201, 160, 255, 0.14);
    border-radius: 50%;
    animation: spin var(--orbitDur) linear infinite;
    animation-delay: var(--orbitDelay);
}
/* Negative delays set each world's starting angle (angle = delay / dur * 360).
   They are chosen to spread the seven bodies around the disc rather than
   letting the outer orbits bunch on one side. */
.home-o1 { width: 18%; height: 18%; --orbitDur: 26s; --orbitDelay: -1.4s }   /* 20deg  */
.home-o2 { width: 28%; height: 28%; --orbitDur: 38s; --orbitDelay: -10s }    /* 95deg  */
.home-o3 { width: 38%; height: 38%; --orbitDur: 52s; --orbitDelay: -24.3s }  /* 168deg */
.home-o4 { width: 48%; height: 48%; --orbitDur: 68s; --orbitDelay: -46.5s }  /* 246deg */
.home-o5 { width: 58%; height: 58%; --orbitDur: 84s; --orbitDelay: -71.2s }  /* 305deg */
.home-o6 { width: 72%; height: 72%; --orbitDur: 104s; --orbitDelay: -12.1s } /* 42deg  */
.home-o7 { width: 90%; height: 90%; --orbitDur: 132s; --orbitDelay: -48.8s } /* 133deg */
.home-planet-group {
    position: absolute;
    left: 50%; top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    transform: translate(0, -50%) rotate(0deg);
    transform-origin: 0 50%;
    animation: counterSpin var(--orbitDur) linear infinite;
    animation-delay: var(--orbitDelay);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}
.home-planet {
    --size: 6px;
    width: var(--size); height: var(--size);
    margin-left: calc(var(--size) / -2);
    border-radius: 50%;
    transition: box-shadow 0.3s var(--ease), transform 0.2s var(--ease);
}
.home-label {
    font-family: var(--f-mono);
    font-size: clamp(0.48rem, 0.72vw, 0.62rem);
    letter-spacing: 0.08em;
    color: rgba(236, 227, 214, 0.44);
    line-height: 1;
    transition: color 0.6s var(--ease);
    text-shadow: 0 0 12px rgba(16, 5, 11, 0.9);
}
.home-p-io28 { --size: 5px; background: #e8a862; box-shadow: 0 0 6px rgba(255, 179, 107, 0.7) }
.home-p-sanc { --size: 7px; background: #e07830; box-shadow: 0 0 8px rgba(224, 120, 48, 0.6) }
.home-p-xim { --size: 7px; background: #68b89a; box-shadow: 0 0 8px rgba(66, 235, 189, 0.6) }
.home-p-chlo { --size: 6px; background: #d4b876; box-shadow: 0 0 7px rgba(212, 184, 118, 0.6) }
.home-p-nm { --size: 4px; background: var(--gold); box-shadow: 0 0 6px rgba(245, 189, 79, 0.7) }
.home-p-rav {
    --size: 11px;
    background: radial-gradient(circle at 35% 35%, #8a9bb0, #5a6e82);
    box-shadow: 0 0 10px rgba(107, 126, 150, 0.5), 0 0 20px rgba(107, 126, 150, 0.2);
    position: relative;
}
.home-p-end {
    --size: 6px;
    background: #7c3aed;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.8), 0 0 20px rgba(124, 58, 237, 0.3);
    animation: ePulse 2.5s ease-in-out infinite;
}
.home-moon-orbit {
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(201, 160, 255, 0.05);
    border-radius: 50%;
    animation: spin 9s linear infinite;
}
.home-moon {
    position: absolute;
    left: 50%; top: 0;
    transform: translate(-50%, -50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #9aa8b8;
    box-shadow: 0 0 5px rgba(154, 168, 184, 0.5);
}

/* SNOAS telemetry columns flanking the orrery */
.home-snoas-overlay {
    position: absolute;
    bottom: 0;
    width: calc((100% - min(100%, var(--orrery-size))) / 2 - clamp(12px, 1vw, 24px));
    max-width: 720px;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.4em;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 22%, black 45%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 22%, black 45%);
}
.home-snoas-left { left: 0 }
.home-snoas-right { right: 0; text-align: right }
.home-snoas-msg {
    font-family: var(--f-mono);
    font-size: clamp(0.46rem, 0.68vw, 0.58rem);
    color: rgba(180, 170, 150, 0.22);
    line-height: 1.5;
    flex-shrink: 0;
    transition: color 0.4s var(--ease);
}
.home-snoas-prompt { color: rgba(201, 160, 255, 0.2) }
.home-snoas-cursor {
    display: inline-block;
    width: 0.45em;
    height: 0.85em;
    background: rgba(201, 160, 255, 0.2);
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
    margin-left: 1px;
}
.home-snoas-msg.crack { color: rgba(201, 160, 255, 0.2) }

/* clickable worlds + registry popup (game-panel styling, wavy magenta frame) */
.home-planet-group { cursor: pointer }
.home-planet-group:focus-visible {
    outline: 1px solid rgba(var(--panel-line-rgb), 0.8);
    outline-offset: 4px;
}
.orrery-popup {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(350px, 86vw);
    padding: 1.1rem 1.35rem 1rem;
    background: rgba(24, 9, 17, 0.95);
    z-index: 4;
    text-align: left;
    box-shadow: 0 0 34px rgba(var(--panel-line-rgb), 0.2);
}
.orrery-popup-frame {
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(var(--panel-line-rgb), 0.6);
    filter: url(#wavy-edge);
    pointer-events: none;
}
.orrery-popup-close {
    position: absolute;
    top: 0.3rem; right: 0.45rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: rgba(201, 160, 255, 0.7);
    font-size: 1.05rem;
    line-height: 1;
    font-family: var(--f-body);
    padding: 0.2rem 0.35rem;
}
.orrery-popup-close:hover { color: var(--purple) }
.orrery-popup-name {
    font-family: var(--f-display);
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.2rem;
    padding-right: 1.2rem;
}
.orrery-popup-motto {
    font-style: italic;
    font-size: 0.82rem;
    color: rgba(201, 160, 255, 0.8);
    margin-bottom: 0.55rem;
}
.orrery-popup-text {
    font-size: 0.9rem;
    color: var(--body-text);
    line-height: 1.65;
    margin-bottom: 0.6rem;
}
.orrery-popup-src {
    font-family: var(--f-mono);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--panel-line-rgb), 0.6);
}

.home-pillars {
    max-width: var(--content-w);
    margin: var(--block) auto 0;
    counter-reset: home-pillar;
}
.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: var(--gap);
    margin-top: 1.5rem;
}
.home-card { counter-increment: home-pillar }
.home-card-title {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.home-card-title::before {
    content: counter(home-pillar, decimal-leading-zero);
    flex: 0 0 auto;
    font-size: 0.72em;
    letter-spacing: 0.08em;
    color: rgba(var(--accent-rgb), 0.38);
}
.home-card p { max-width: 58ch }

/* pillar cards (2x2) sharing the row with the field-recording screenshot */
.home-pillar-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--gap);
    align-items: stretch;
    margin-top: 1.5rem;
}
.home-pillar-row .home-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    margin-top: 0;
}
.home-shot {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.home-shot .viewport-inner { flex: 1; min-height: 0 }
.home-shot .viewport-inner img { width: 100%; height: 100%; object-fit: cover; object-position: center top }

/* This qualifier intentionally outranks the generic .viewport dimensions
   later in the sheet, so the recording actually fills its grid column. */
@media (min-width: 861px) {
    .home-pillar-row > .home-shot {
        width: 100%;
        max-width: none;
        margin: 0;
        justify-self: stretch;
        align-self: stretch;
    }
}

/* the standing framing sentence above the overview cards */
.home-pillars-lead {
    max-width: var(--measure);
    margin: 0 auto;
    text-align: center;
    font-size: clamp(0.92rem, 1.15vw, 1.04rem);
    line-height: 1.75;
    color: var(--body-text);
}
/* second card block, full width under the pillar row */
.home-cards-wide {
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    grid-auto-rows: 1fr;
    margin-top: clamp(1.8rem, 2.2vw, 3.2rem);
}

/* The overview row stays level: the four ideas are peers, and the aligned
   top edge remains legible from laptop through 4K widths. */
@media (min-width: 1200px) {
    .home-cards-wide { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* Keep the opening ideas as a deliberate 2x2 chapter beside the field
   recording. A four-card strip here became too shallow and noisy at 4K. */
@media (min-width: 2200px) {
    .hero,
    .home-pillars { max-width: min(90vw, 2800px) }
    .hero { --orrery-size: clamp(720px, 26vw, 1000px) }
    .home-pillar-row {
        grid-template-columns: minmax(0, 6fr) minmax(680px, 5fr);
        gap: clamp(2rem, 2.4vw, 4rem);
    }
    .home-cards-wide { column-gap: clamp(1.4rem, 1.25vw, 2.5rem) }
}

/* --- HOME: primary tour CTA ---
   Deliberately louder than .panel-next-btn: this is the one thing on the
   first screen that should read as an invitation rather than as chrome. The
   orbit glyph rotates slowly so the control looks live next to the orrery
   below it; reduced motion stops the spin but keeps the glyph. */
.hero-cta { display: flex; justify-content: center; margin-top: clamp(1.2rem, 2.4vw, 1.9rem) }
.tour-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.95em 1.5em 0.95em 1.2em;
    text-align: left;
    cursor: pointer;
    color: var(--gold);
    text-decoration: none;
    background:
        linear-gradient(135deg, rgba(255, 214, 107, 0.13), rgba(201, 160, 255, 0.09) 55%, rgba(255, 214, 107, 0.05));
    border: 1px solid rgba(255, 214, 107, 0.45);
    box-shadow: 0 0 26px -10px rgba(255, 214, 107, 0.55), inset 0 0 22px -14px rgba(201, 160, 255, 0.9);
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
                box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
/* corner ticks, matching the console bezel language */
.tour-cta::before, .tour-cta::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border: 1px solid rgba(255, 214, 107, 0.75);
    pointer-events: none;
}
.tour-cta::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0 }
.tour-cta::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0 }
.tour-cta:hover {
    background: linear-gradient(135deg, rgba(255, 214, 107, 0.2), rgba(201, 160, 255, 0.14) 55%, rgba(255, 214, 107, 0.08));
    border-color: rgba(255, 214, 107, 0.8);
    box-shadow: 0 0 38px -8px rgba(255, 214, 107, 0.6), inset 0 0 26px -12px rgba(201, 160, 255, 1);
    transform: translateY(-1px);
}
.tour-cta:focus-visible { outline: 2px solid rgba(201, 160, 255, 0.8); outline-offset: 3px }

.tour-cta-glyph { display: block; width: clamp(30px, 3.4vw, 38px); flex-shrink: 0; color: var(--gold) }
.tour-cta-glyph svg { display: block; width: 100%; height: auto; overflow: visible }
.tour-glyph-drift { transform-origin: 50% 50%; animation: tourGlyphSpin 18s linear infinite }

.tour-cta-text { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0 }
.tour-cta-label {
    font-family: var(--f-cond);
    font-weight: 600;
    font-size: clamp(0.98rem, 1.5vw, 1.24rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
}
.tour-cta-sub {
    font-family: var(--f-mono);
    font-size: clamp(0.5rem, 0.72vw, 0.6rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(201, 160, 255, 0.78);
}
.tour-cta-arrow {
    font-size: 1.05rem;
    opacity: 0.75;
    flex-shrink: 0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.tour-cta:hover .tour-cta-arrow { transform: translateX(5px); opacity: 1 }

/* --- HOME: launch-signal signup panel (the page's one conversion point) --- */
.signal-panel {
    position: relative;
    max-width: 560px;
    margin: var(--block) auto 0;
    padding: 1.9rem 2rem 1.7rem;
    text-align: center;
    background: rgba(24, 9, 17, 0.72);
    box-shadow: 0 0 34px rgba(var(--panel-line-rgb), 0.14);
}
.signal-panel-frame {
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(var(--panel-line-rgb), 0.5);
    filter: url(#wavy-edge);
    pointer-events: none;
}
.signal-kicker {
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(var(--panel-line-rgb), 0.65);
    margin-bottom: 0.5rem;
}
.signal-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 24px rgba(255, 214, 107, 0.25);
    margin-bottom: 0.55rem;
}
.signal-sub {
    font-size: clamp(0.88rem, 1vw, 0.98rem);
    color: var(--body-text);
    line-height: 1.65;
    max-width: 40ch;
    margin: 0 auto 1.2rem;
}
.signal-form { display: flex; justify-content: center; align-items: stretch }
.signal-input { width: min(320px, 60vw); font-size: 0.78rem }
.signal-btn { font-size: 0.68rem }
.signal-msg { margin-top: 0.6rem; font-size: 0.66rem }

/* --- Guided flow: "next section" control at each panel's end --- */
.panel-next {
    display: flex;
    justify-content: center;
    margin-top: var(--block);
}
.panel-next-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--f-cond);
    font-weight: 600;
    font-size: clamp(0.82rem, 1.1vw, 0.98rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 214, 107, 0.06);
    border: 1px solid rgba(255, 214, 107, 0.28);
    padding: 0.85em 1.5em;
    cursor: pointer;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
                box-shadow 0.3s var(--ease);
}
.panel-next-btn:hover {
    background: rgba(255, 214, 107, 0.13);
    border-color: rgba(255, 214, 107, 0.55);
    box-shadow: 0 0 24px -6px rgba(255, 214, 107, 0.45);
}
.panel-next-arrow { transition: transform 0.3s var(--ease) }
.panel-next-btn:hover .panel-next-arrow { transform: translateX(4px) }

/* scroll cue under hero */
.hero-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: clamp(2.4rem, 6vw, 5rem);
    font-family: var(--f-mono);
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--faint);
}
.hero-cue::before, .hero-cue::after {
    content: '';
    width: clamp(30px, 8vw, 90px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 160, 255, 0.28), transparent);
}

/* --- TOUR --- */
.panel-tour { max-width: none; height: 100%; margin: 0 }
.tour-host {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 540px;
    background: rgba(18, 6, 12, 0.45);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.tour-loading, .tour-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    color: rgba(201, 160, 255, 0.55);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- NAVIGATION: static orrery --- */
.orrery-wrap {
    position: relative;
    width: clamp(220px, 26vw, 360px);
    height: clamp(220px, 26vw, 360px);
    margin: 1.4rem auto var(--block);
}
.orrery-sun {
    position: absolute;
    top: 50%; left: 50%;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 30% 30%, #ffe4a0, var(--gold));
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px var(--gold), 0 0 30px rgba(245, 189, 79, 0.4), 0 0 60px rgba(245, 189, 79, 0.15);
    z-index: 2;
}
.orrery-orbit {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(201, 160, 255, 0.13);
    border-radius: 50%;
    animation: orrSpin var(--dur) linear infinite;
    animation-delay: var(--delay, 0s);
}
.orrery-orbit .orrery-planet {
    position: absolute;
    left: 50%; top: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: orrCounter var(--dur) linear infinite;
    animation-delay: var(--delay, 0s);
}
.orr-1 { width: 18%; height: 18%; --dur: 22s; --delay: -1.2s }
.orr-2 { width: 28%; height: 28%; --dur: 32s; --delay: -8.4s }
.orr-3 { width: 38%; height: 38%; --dur: 46s; --delay: -21.5s }
.orr-4 { width: 48%; height: 48%; --dur: 60s; --delay: -41s }
.orr-5 { width: 58%; height: 58%; --dur: 76s; --delay: -64.4s }
.orr-6 { width: 72%; height: 72%; --dur: 96s; --delay: -11.2s }
.orr-7 { width: 90%; height: 90%; --dur: 122s; --delay: -45.1s }
.orrery-wall {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(124, 58, 237, 0.14);
    animation: wallPulse 8s ease-in-out infinite;
}
.op-io28 { width: 5px; height: 5px; background: #e8a862; box-shadow: 0 0 5px rgba(255, 179, 107, 0.6) }
.op-sanc { width: 6px; height: 6px; background: #e07830; box-shadow: 0 0 6px rgba(224, 120, 48, 0.5) }
.op-xim { width: 7px; height: 7px; background: #68b89a; box-shadow: 0 0 7px rgba(66, 235, 189, 0.5) }
.op-chlo { width: 6px; height: 6px; background: #d4b876; box-shadow: 0 0 6px rgba(212, 184, 118, 0.5) }
.op-nm { width: 4px; height: 4px; background: var(--gold); box-shadow: 0 0 5px rgba(245, 189, 79, 0.6) }
.op-rav {
    width: 9px; height: 9px;
    background: radial-gradient(circle at 35% 35%, #8a9bb0, #5a6e82);
    box-shadow: 0 0 8px rgba(107, 126, 150, 0.4);
    position: relative;
}
.orr-moon-orbit {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(201, 160, 255, 0.05);
    border-radius: 50%;
    animation: orrSpin 8s linear infinite;
}
.orr-moon {
    position: absolute;
    left: 50%; top: 0;
    transform: translate(-50%, -50%);
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #9aa8b8;
    box-shadow: 0 0 4px rgba(154, 168, 184, 0.4);
}
.op-end {
    width: 6px; height: 6px;
    background: #7c3aed;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.7), 0 0 16px rgba(124, 58, 237, 0.25);
    animation: ePulse 2.5s ease-in-out infinite;
}

/* --- TRADE: ticker --- */
.ticker-wrap {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
    padding: 0.65rem 0;
    margin-bottom: 1.8rem;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.ticker-track { display: flex; white-space: nowrap; animation: tickerScroll 52s linear infinite; width: max-content }
.ticker-wrap:hover .ticker-track { animation-play-state: paused }
.ticker-item {
    font-family: var(--f-mono);
    font-size: clamp(0.64rem, 0.86vw, 0.76rem);
    padding: 0 1.6rem;
    flex-shrink: 0;
    letter-spacing: 0.05em;
}
.ticker-up { color: var(--gold) }
.ticker-down { color: rgba(201, 160, 255, 0.62) }

/* --- SALVAGE console --- */
.salvage-console {
    margin: 1.5rem auto var(--block);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background: rgba(18, 6, 12, 0.5);
    box-shadow: inset 0 0 44px rgba(var(--accent-rgb), 0.05);
    overflow: hidden;
}
.salvage-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.68rem 0.95rem;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--f-mono);
    font-size: clamp(0.52rem, 0.78vw, 0.64rem);
    letter-spacing: 0.12em;
    color: rgba(var(--accent-rgb), 0.6);
}
.salvage-console-head strong { font-weight: 400; color: rgba(255, 214, 107, 0.72) }
.salvage-viewport {
    position: relative;
    aspect-ratio: 16 / 7;
    min-height: 220px;
    overflow: hidden;
    background:
        radial-gradient(circle at 57% 45%, rgba(var(--accent-rgb), 0.13), transparent 32%),
        linear-gradient(rgba(201, 160, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 160, 255, 0.035) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
}
.salvage-viewport::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(16, 5, 11, 0.72) 100%);
    pointer-events: none;
}
.salvage-wreck {
    position: absolute;
    left: 55%; top: 47%;
    width: 23%; height: 22%;
    transform: translate(-50%, -50%) rotate(-8deg);
    border: 1px solid rgba(221, 208, 192, 0.32);
    clip-path: polygon(0 40%, 12% 14%, 58% 0, 100% 24%, 91% 77%, 46% 100%, 9% 83%);
    background: linear-gradient(145deg, rgba(221, 208, 192, 0.07), rgba(201, 160, 255, 0.1));
    box-shadow: 0 0 30px rgba(201, 160, 255, 0.12);
}
.salvage-wreck::before, .salvage-wreck::after { content: ''; position: absolute; background: rgba(201, 160, 255, 0.3) }
.salvage-wreck::before { left: 22%; top: -30%; width: 1px; height: 145%; transform: rotate(21deg) }
.salvage-wreck::after { left: -10%; right: -10%; top: 54%; height: 1px; transform: rotate(-5deg) }
.salvage-shard {
    position: absolute;
    width: var(--w, 13px); height: var(--h, 4px);
    left: var(--x); top: var(--y);
    border: 1px solid rgba(221, 208, 192, var(--a, 0.3));
    background: rgba(201, 160, 255, 0.06);
    transform: rotate(var(--r));
    animation: salvageDrift var(--dur, 14s) ease-in-out infinite alternate;
}
.salvage-s1 { --x: 10%; --y: 28%; --w: 20px; --h: 5px; --r: 18deg; --dur: 16s }
.salvage-s2 { --x: 18%; --y: 71%; --w: 8px; --h: 14px; --r: 44deg; --dur: 13s }
.salvage-s3 { --x: 31%; --y: 19%; --w: 16px; --h: 4px; --r: -24deg; --dur: 18s }
.salvage-s4 { --x: 38%; --y: 76%; --w: 24px; --h: 5px; --r: 12deg; --dur: 15s }
.salvage-s5 { --x: 68%; --y: 18%; --w: 9px; --h: 17px; --r: 32deg; --dur: 12s }
.salvage-s6 { --x: 76%; --y: 70%; --w: 19px; --h: 5px; --r: -18deg; --dur: 17s }
.salvage-s7 { --x: 88%; --y: 35%; --w: 12px; --h: 8px; --r: 51deg; --dur: 14s }
.salvage-s8 { --x: 84%; --y: 84%; --w: 6px; --h: 15px; --r: -35deg; --dur: 19s }
.salvage-scan {
    position: absolute;
    inset: -25%;
    border-radius: 50%;
    border: 1px solid rgba(66, 235, 189, 0);
    transform: scale(0.1);
    opacity: 0;
    pointer-events: none;
}
.salvage-console.scanning .salvage-scan { animation: salvageScan 1.5s ease-out forwards }
.salvage-signal {
    position: absolute;
    width: 9px; height: 9px;
    border: 1px solid rgba(255, 214, 107, 0.85);
    transform: rotate(45deg) scale(0.2);
    opacity: 0;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    box-shadow: 0 0 10px rgba(255, 214, 107, 0.25);
    z-index: 2;
}
.salvage-signal::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(255, 214, 107, 0.2) }
.sig-a { left: 48%; top: 37% }
.sig-b { left: 60%; top: 49% }
.sig-c { left: 53%; top: 62% }
.salvage-console.surveyed .salvage-signal { opacity: 1; transform: rotate(45deg) scale(1) }
.salvage-ship {
    position: absolute;
    left: 16%; top: 49%;
    width: 54px; height: 17px;
    border: 1px solid rgba(66, 235, 189, 0.6);
    clip-path: polygon(0 50%, 22% 0, 82% 12%, 100% 50%, 82% 88%, 22% 100%);
    background: rgba(66, 235, 189, 0.1);
    box-shadow: 0 0 16px rgba(66, 235, 189, 0.15);
}
.salvage-eva {
    position: absolute;
    left: 38%; top: 49%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(201, 160, 255, 0.55);
    box-shadow: 0 0 12px rgba(201, 160, 255, 0.4);
    opacity: 0;
    transform: scale(0.3);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.salvage-watchline {
    position: absolute;
    left: 21%; top: 50%;
    width: 18%; height: 1px;
    background: linear-gradient(90deg, rgba(66, 235, 189, 0.32), rgba(201, 160, 255, 0.48));
    transform-origin: left center;
    opacity: 0;
    transition: opacity 0.5s var(--ease);
}
.salvage-console.eva-ready .salvage-eva { opacity: 1; transform: scale(1) }
.salvage-console.eva-ready .salvage-watchline { opacity: 1; animation: watchlinePulse 1.8s ease-in-out infinite }
.salvage-readouts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.salvage-readout { padding: 0.75rem 0.8rem; border-right: 1px solid var(--line-soft) }
.salvage-readout:last-child { border-right: none }
.salvage-readout span {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.15em;
    color: var(--faint);
    margin-bottom: 0.28rem;
}
.salvage-readout strong {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(0.56rem, 0.86vw, 0.7rem);
    font-weight: 400;
    letter-spacing: 0.09em;
    color: rgba(236, 227, 214, 0.72);
}
.salvage-controls { display: flex; align-items: center; gap: 1rem; padding: 0.9rem }
.salvage-survey-btn {
    flex-shrink: 0;
    font-family: var(--f-display);
    font-size: 0.56rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 214, 107, 0.07);
    border: 1px solid rgba(255, 214, 107, 0.28);
    padding: 0.75rem 0.95rem;
    cursor: pointer;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.salvage-survey-btn:hover:not(:disabled) {
    background: rgba(255, 214, 107, 0.14);
    border-color: rgba(255, 214, 107, 0.5);
    box-shadow: 0 0 20px -6px rgba(255, 214, 107, 0.5);
}
.salvage-survey-btn:disabled { opacity: 0.45; cursor: default }
.salvage-log {
    font-family: var(--f-mono);
    font-size: clamp(0.54rem, 0.8vw, 0.66rem);
    line-height: 1.55;
    color: rgba(var(--accent-rgb), 0.6);
}
.salvage-roles { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin: 1.3rem 0 var(--block) }
.salvage-role {
    min-width: 152px;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--line-soft);
    background: rgba(201, 160, 255, 0.028);
}
.salvage-role strong, .salvage-role span { display: block }
.salvage-role strong {
    font-family: var(--f-display);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 0.25rem;
}
.salvage-role span { font-family: var(--f-mono); font-size: 0.56rem; color: var(--dim) }
.salvage-role.pilot strong { color: #e8a862 }
.salvage-role.eva strong { color: var(--purple) }
.salvage-role.cargo strong { color: #68b89a }

/* --- SHARED INSTRUMENT FRAME ---
   Wraps a live graphic in a bezel with a mono caption, so small visuals read
   as console readouts instead of stray art floating in the column. */
.instrument {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 560px;
    margin: 1.4rem auto var(--block);
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background:
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.08), transparent 60%),
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), rgba(20, 8, 14, 0.3));
}
.instrument::after {
    content: attr(data-caption);
    position: absolute;
    left: 0.75rem; bottom: 0.55rem;
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.16em;
    color: rgba(var(--accent-rgb), 0.5);
}

/* --- COMBAT --- */
.command-deck {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 1.5rem 0 var(--block);
}
.command-cell {
    position: relative;
    min-height: 98px;
    padding: 0.9rem 0.75rem;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), rgba(20, 8, 14, 0.2));
    overflow: hidden;
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.command-cell:hover { border-color: rgba(var(--accent-rgb), 0.4); transform: translateY(-2px) }
.command-cell::before {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: var(--charge, 65%);
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    box-shadow: 0 0 9px rgba(var(--accent-rgb), 0.6);
}
.command-cell-domain {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.5rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 214, 107, 0.55);
    margin-bottom: 0.45rem;
}
.command-cell-name {
    display: block;
    font-family: var(--f-cond);
    font-weight: 500;
    font-size: clamp(0.74rem, 1vw, 0.9rem);
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 227, 214, 0.82);
}
.command-cell-state {
    display: block;
    position: absolute;
    left: 0.75rem; bottom: 0.6rem;
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.13em;
    color: rgba(var(--accent-rgb), 0.55);
}

.ai-profiles { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.5rem }
.ai-profile { text-align: center; cursor: default }
.ai-profile-icon {
    font-size: 1.25rem;
    opacity: 0.5;
    margin-bottom: 0.2rem;
    color: var(--accent);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ai-profile:hover .ai-profile-icon { opacity: 1; transform: translateY(-2px) }
.ai-profile-name {
    font-family: var(--f-mono);
    font-size: clamp(0.6rem, 0.8vw, 0.7rem);
    letter-spacing: 0.1em;
    color: var(--dim);
}

/* --- CREW: SUNFARER MUSTER dossier ---
   Modelled on the in-game panel: chrome bar, roster, selected-crew detail
   header, tab strip, then meter rows. The meter fill colour is written
   inline by app.js (purple = bad, amber = good) so one ramp covers every
   tab without a per-stat class. */
.dossier {
    max-width: 560px;
    width: 100%;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    font-family: var(--f-mono);
    background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.05), rgba(20, 8, 14, 0.34));
    margin: 0 auto 0.8rem;
    position: relative;
    text-align: left;
    transition: opacity 0.2s var(--ease);
}
.dossier.rolling { opacity: 0.35 }
.dossier::before, .dossier::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
}
.dossier::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0 }
.dossier::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0 }

.dossier-chrome {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.1rem 0.7rem;
    border-bottom: 1px solid var(--line-soft);
}
.dossier-title {
    font-family: var(--f-display);
    font-size: clamp(0.68rem, 0.95vw, 0.8rem);
    letter-spacing: 0.22em;
    color: rgba(var(--accent-rgb), 0.85);
}
.dossier-view { font-size: 0.55rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint) }

/* roster: name / activity / focus, then non-selectable memorial rows */
.dossier-roster { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line-soft) }
.roster-row {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 3em;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.28rem 0.5rem;
    font-size: 0.6rem;
    border-left: 2px solid transparent;
}
.roster-row.selected {
    border-left-color: rgba(var(--accent-rgb), 0.8);
    background: rgba(var(--accent-rgb), 0.07);
}
.roster-name { color: rgba(236, 227, 214, 0.86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.roster-activity { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.roster-focus { text-align: right; color: rgba(var(--accent-rgb), 0.75) }
.roster-row.memorial { opacity: 0.42; font-style: italic }
.roster-row.memorial .roster-name { text-decoration: line-through }

/* selected-crew detail header: portrait, identity, breaking-point badges */
.dossier-detail {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1.1rem;
}
.dossier-portrait svg { display: block; width: 42px; height: 56px }
.dossier-name {
    font-family: var(--f-display);
    font-size: clamp(0.76rem, 1.05vw, 0.92rem);
    letter-spacing: 0.07em;
    color: var(--text);
}
.dossier-activity { font-size: 0.58rem; color: var(--dim); margin-top: 0.2rem }
.dossier-badges { font-size: 0.52rem; letter-spacing: 0.1em; color: var(--faint); text-align: right; max-width: 9em }
.dossier-badges.danger { color: #ff6b6b }

/* tab strip */
.dossier-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
.dossier-tab {
    flex: 1 1 auto;
    padding: 0.42rem 0.3rem;
    font-family: var(--f-cond);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line-soft);
    cursor: pointer;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.dossier-tab:last-child { border-right: 0 }
.dossier-tab:hover { color: var(--text) }
.dossier-tab.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.7);
}

/* meter rows */
.dossier-rows { padding: 0.6rem 1.1rem 0.9rem; min-height: 12.5rem }
.drow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name value' 'meter meter';
    gap: 0.2rem 0.8rem;
    align-items: baseline;
    padding: 0.3rem 0;
}
.drow.has-detail { grid-template-areas: 'name value' 'meter meter' 'detail detail' }
.drow-name { grid-area: name; font-size: 0.6rem; color: rgba(236, 227, 214, 0.78) }
.drow-val { grid-area: value; font-size: 0.62rem; color: var(--accent); font-variant-numeric: tabular-nums }
.drow-detail { grid-area: detail; font-size: 0.52rem; color: var(--faint); margin-top: 0.15rem }
.drow-meter {
    grid-area: meter;
    display: block;
    height: 4px;
    background: rgba(201, 160, 255, 0.1);
    margin-top: 0.1rem;
}
.drow-meter i { display: block; height: 100%; transition: width 0.7s var(--ease) }
.drow-text { grid-template-areas: 'name value'; padding: 0.33rem 0 }
.drow-text.muted .drow-val { color: var(--faint) }
.drow-text.accent .drow-val { color: rgba(var(--accent-rgb), 0.85) }
.drow-duty + .drow-duty { border-top: 1px solid rgba(201, 160, 255, 0.07) }

/* Duty is the one editable tab in play, so its values read as controls. */
.drow-priority {
    padding: 0.1em 0.6em;
    border: 1px solid rgba(201, 160, 255, 0.2);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.drow-priority.p0 { color: var(--faint); border-color: rgba(201, 160, 255, 0.12) }
.drow-priority.p1 { color: #ff8f6b; border-color: rgba(255, 143, 107, 0.4) }
.drow-priority.p2 { color: #ffd66b; border-color: rgba(255, 214, 107, 0.35) }
.drow-priority.p3 { color: rgba(236, 227, 214, 0.8) }
.drow-priority.p4 { color: var(--dim) }

.dossier-history {
    padding: 0 1.1rem;
    font-size: 0.6rem;
    line-height: 1.6;
    color: var(--dim);
    font-style: italic;
}
.dossier-snoas {
    padding: 0.6rem 1.1rem 0;
    font-size: 0.58rem;
    line-height: 1.6;
    color: rgba(var(--accent-rgb), 0.7);
}
.dossier-snoas.crack { color: rgba(201, 160, 255, 0.82); font-style: italic }
.dossier-caption {
    max-width: 560px;
    margin: 0 auto var(--block);
    text-align: center;
    font-family: var(--f-mono);
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    color: var(--faint);
}

/* --- THE LISTENING --- */
/* Seven faction responses, tinted with each faction's canon colour so the
   row reads as the same institutions named on the Worlds page. */
.listening-responses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 0.7rem;
    max-width: var(--content-w);
    margin: 1.3rem auto var(--block);
}
.listening-response {
    padding: 0.85rem 1rem;
    border: 1px solid var(--line-soft);
    border-left-width: 2px;
    background: rgba(201, 160, 255, 0.028);
    text-align: left;
}
.listening-response strong, .listening-response span { display: block }
.listening-response strong {
    font-family: var(--f-display);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 0.35rem;
}
.listening-response span {
    font-family: var(--f-body);
    font-size: clamp(0.76rem, 0.9vw, 0.84rem);
    line-height: 1.55;
    color: var(--body-text);
}
.listening-response.r-io28 { border-left-color: #e8a862 } .listening-response.r-io28 strong { color: #e8a862 }
.listening-response.r-sanc { border-left-color: #e07830 } .listening-response.r-sanc strong { color: #e07830 }
.listening-response.r-xim  { border-left-color: #68b89a } .listening-response.r-xim strong  { color: #68b89a }
.listening-response.r-chlo { border-left-color: #d4b876 } .listening-response.r-chlo strong { color: #d4b876 }
.listening-response.r-nm   { border-left-color: #d4a544 } .listening-response.r-nm strong   { color: #d4a544 }
.listening-response.r-rav  { border-left-color: #8a9bb0 } .listening-response.r-rav strong  { color: #8a9bb0 }
.listening-response.r-end  { border-left-color: #9d6bff } .listening-response.r-end strong  { color: #9d6bff }

/* Severity ladder. The left rule darkens toward purple as the bands get
   worse, so the escalation is legible before any of the text is read. */
.surge-bands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    max-width: var(--content-w);
    margin: 1.3rem auto var(--block);
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
}
.surge-band {
    padding: 1rem 1.05rem 1.1rem;
    background: rgba(18, 6, 12, 0.6);
    text-align: left;
    border-top: 2px solid transparent;
}
.surge-band span {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.5rem;
    letter-spacing: 0.18em;
    color: var(--faint);
    margin-bottom: 0.45rem;
}
.surge-band strong {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(0.72rem, 1vw, 0.86rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}
.surge-band em {
    display: block;
    font-family: var(--f-body);
    font-style: normal;
    font-size: clamp(0.76rem, 0.9vw, 0.84rem);
    line-height: 1.55;
    color: var(--body-text);
}
.surge-band.b-mild { border-top-color: rgba(255, 214, 107, 0.55) } .surge-band.b-mild strong { color: #ffd66b }
.surge-band.b-standard { border-top-color: rgba(255, 179, 107, 0.6) } .surge-band.b-standard strong { color: #ffb36b }
.surge-band.b-severe { border-top-color: rgba(201, 160, 255, 0.65) } .surge-band.b-severe strong { color: #c9a0ff }
.surge-band.b-catastrophic { border-top-color: rgba(157, 107, 255, 0.85) } .surge-band.b-catastrophic strong { color: #9d6bff }

/* in-prose jump to another section */
.inline-link {
    font: inherit;
    color: var(--accent);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.45);
    transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.inline-link:hover { color: var(--text); border-bottom-color: rgba(var(--accent-rgb), 0.9) }

/* --- SYSTEM: factions --- */
.faction-row { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem }
.faction-badge {
    padding: 0.5em 1em;
    border: 1px solid;
    cursor: pointer;
    font-family: var(--f-mono);
    font-size: clamp(0.58rem, 0.8vw, 0.72rem);
    letter-spacing: 0.06em;
    background: transparent;
    color: inherit;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
                border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.faction-badge:hover, .faction-badge.active { transform: translateY(-2px) }
.faction-detail {
    width: 100%;
    text-align: center;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s var(--ease), padding 0.45s var(--ease), opacity 0.35s var(--ease);
    opacity: 0;
    padding: 0 1.2rem;
}
.faction-detail.visible {
    max-height: 300px;
    padding: 1rem 1.2rem;
    opacity: 1;
}
.faction-detail-name {
    font-family: var(--f-display);
    font-size: clamp(0.78rem, 1.05vw, 0.95rem);
    letter-spacing: 0.2em;
    margin-bottom: 0.35rem;
}
.faction-detail-motto {
    font-style: italic;
    font-size: clamp(0.88rem, 1.02vw, 0.98rem);
    color: var(--body-text);
    margin-bottom: 0.6rem;
}
.faction-detail-desc { font-size: var(--t-body); color: var(--body-text); line-height: 1.75; max-width: var(--measure); margin: 0 auto }

/* --- SOUND --- */
.instrument-wave { min-height: 200px }
.waveform {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 104px;
    width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
}
.wave-bar {
    width: 5px;
    border-radius: 1px;
    background: linear-gradient(to top, rgba(var(--accent-rgb), 0.35), var(--accent));
    animation: wavePulse var(--wave-dur, 1.2s) ease-in-out infinite alternate;
    animation-delay: var(--wave-delay, 0s);
}
.audio-tracks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: var(--gap);
    margin-top: 2rem;
}
.audio-track {
    border: 1px solid var(--line-soft);
    padding: 1.2rem 1.35rem;
    background: linear-gradient(165deg, rgba(201, 160, 255, 0.045), rgba(20, 8, 14, 0.28));
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.audio-track:hover { border-color: rgba(var(--accent-rgb), 0.25) }
.audio-track.playing {
    border-color: rgba(255, 214, 107, 0.4);
    box-shadow: inset 0 0 40px rgba(255, 214, 107, 0.05);
}
.audio-track-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.55rem }
.audio-play-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
    font-size: 0.7rem;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.audio-play-btn:hover { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.1) }
.audio-play-btn.playing {
    border-color: rgba(255, 214, 107, 0.45);
    background: rgba(255, 214, 107, 0.09);
    color: var(--gold);
    box-shadow: 0 0 18px -4px rgba(255, 214, 107, 0.6);
}
.audio-track-name {
    font-family: var(--f-display);
    font-size: clamp(0.62rem, 0.88vw, 0.74rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}
.audio-track-label { font-family: var(--f-mono); font-size: 0.58rem; color: var(--dim); letter-spacing: 0.06em }
.audio-track-desc { font-size: clamp(0.86rem, 0.98vw, 0.93rem); color: var(--body-text); line-height: 1.68 }

/* --- VIEWPORT: embedded gameplay screenshots ---
   Framed like the game's own UI panels: dark fill, wavy magenta border
   (SVG displacement filter #wavy-edge defined in index.html), gold readout
   caption. The frame lives on a pseudo-layer so the image stays crisp. */
.viewport {
    position: relative;
    max-width: 820px;
    margin: 1.7rem auto var(--block);
}
.viewport-frame {
    position: absolute;
    inset: -3px;
    border: 2px solid rgba(var(--panel-line-rgb), 0.55);
    filter: url(#wavy-edge);
    pointer-events: none;
    z-index: 2;
}
.viewport-inner {
    position: relative;
    background: var(--bg-lift);
    box-shadow: 0 0 26px rgba(var(--panel-line-rgb), 0.14),
                inset 0 0 30px rgba(var(--panel-line-rgb), 0.05);
}
.viewport img {
    display: block;
    width: 100%;
    height: auto;
    transition: filter 0.3s var(--ease);
}
.viewport-inner:hover img { filter: brightness(1.06) }
figure.viewport:hover .viewport-frame { border-color: rgba(var(--panel-line-rgb), 0.85) }
/* soft vignette so the shot sits into the page like a console feed */
.viewport-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* vignette + a faint 3px scanline cadence so inline shots read as feeds */
    background:
        repeating-linear-gradient(to bottom, transparent 0 3px, rgba(8, 2, 6, 0.11) 3px 4px),
        radial-gradient(ellipse at center, transparent 62%, rgba(16, 5, 11, 0.42) 100%);
}
.viewport-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.2rem 0;
}
.viewport-caption strong {
    font-family: var(--f-mono);
    font-weight: 500;
    font-size: clamp(0.56rem, 0.82vw, 0.68rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 214, 107, 0.78);
}
.viewport-caption span {
    font-family: var(--f-mono);
    font-size: clamp(0.5rem, 0.72vw, 0.6rem);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(201, 160, 255, 0.45);
    white-space: nowrap;
}

/* --- LIGHTBOX: click a screenshot to enlarge ---
   Sits at z 95: above the SNOAS terminal (90), below the .film grain (100)
   so the enlarged shot keeps the site's CRT texture. */
.viewport-inner { cursor: pointer; overflow: hidden }
.viewport-inner:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.8); outline-offset: 3px }
.viewport-zoom-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: rgba(236, 227, 214, 0.8);
    background: rgba(16, 5, 11, 0.78);
    border: 1px solid rgba(var(--panel-line-rgb), 0.4);
    padding: 0.2em 0.6em;
    opacity: 0;
    transition: opacity 0.25s var(--ease);
    pointer-events: none;
}
.viewport-inner:hover .viewport-zoom-hint,
.viewport-inner:focus-visible .viewport-zoom-hint { opacity: 1 }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    background: rgba(10, 3, 7, 0.87);
    backdrop-filter: blur(7px);
}
.lightbox[hidden] { display: none }
.lightbox-stage {
    position: relative;
    margin: 0;
    max-width: min(1500px, 94vw);
    animation: lightboxIn 0.22s var(--ease);
}
.lightbox-inner {
    position: relative;
    background: var(--bg-lift);
    box-shadow: 0 0 70px rgba(var(--panel-line-rgb), 0.28);
}
.lightbox-inner img {
    display: block;
    max-width: min(1500px, 94vw);
    max-height: 80vh;
    width: auto;
    height: auto;
}
.lightbox-close {
    position: fixed;
    top: clamp(0.8rem, 2vw, 1.4rem);
    right: clamp(0.9rem, 2vw, 1.6rem);
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--dim);
    background: rgba(18, 6, 12, 0.85);
    border: 1px solid var(--line-soft);
    cursor: pointer;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.lightbox-close:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.6) }
.lightbox-close:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.8); outline-offset: 2px }
@keyframes lightboxIn {
    from { opacity: 0; transform: scale(0.965) }
    to { opacity: 1; transform: none }
}

/* --- SCROLL-THROUGH NAVIGATION (flow hint + progress line) --- */
.flow-hint {
    position: fixed;
    left: 50%;
    bottom: 4.6rem;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5em 1em;
    font-family: var(--f-mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
    background: rgba(16, 5, 11, 0.88);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}
.flow-hint.show { opacity: 1 }
.flow-hint[hidden] { display: none }
.flow-hint strong { color: var(--accent); font-weight: 400 }
.flow-hint-mobile-prefix { display: none }
.flow-hint-arrow { color: var(--accent); animation: flowNudge 1.4s ease-in-out infinite }
.flow-hint-track {
    width: 64px;
    height: 3px;
    background: rgba(201, 160, 255, 0.14);
    overflow: hidden;
}
.flow-hint-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.5), var(--accent));
    transform: scaleX(var(--flow-charge, 0));
    transform-origin: left;
}
@keyframes flowNudge {
    0%, 100% { transform: translateY(-1px) }
    50% { transform: translateY(2px) }
}

/* thin page-position line riding the top edge of the status bar */
.status-bar { position: relative }
.scroll-progress {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.65), rgba(var(--accent-rgb), 0.25));
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* ===== 6. MOTION ===== */
@keyframes sunPulse {
    0%, 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1) }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) }
}
@keyframes headerTitleShift {
    0%, 100% { background-position: 0% 50% }
    50% { background-position: 100% 50% }
}
@keyframes headerFlare {
    0%, 100% { transform: translateX(0) scale(1); opacity: 0.55 }
    50% { transform: translateX(4%) scale(1.12); opacity: 0.95 }
}
@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg) }
    to { transform: translate(-50%, -50%) rotate(360deg) }
}
@keyframes counterSpin {
    from { transform: translate(0, -50%) rotate(0deg) }
    to { transform: translate(0, -50%) rotate(-360deg) }
}
@keyframes orrSpin {
    from { transform: translate(-50%, -50%) rotate(0deg) }
    to { transform: translate(-50%, -50%) rotate(360deg) }
}
@keyframes orrCounter {
    from { transform: translate(-50%, -50%) rotate(0deg) }
    to { transform: translate(-50%, -50%) rotate(-360deg) }
}
@keyframes wallPulse {
    0%, 100% { border-color: rgba(124, 58, 237, 0.09); opacity: 0.6 }
    50% { border-color: rgba(124, 58, 237, 0.22); opacity: 1 }
}
@keyframes ePulse {
    0%, 100% { box-shadow: 0 0 6px rgba(124, 58, 237, 0.6) }
    50% { box-shadow: 0 0 12px rgba(124, 58, 237, 0.9), 0 0 24px rgba(124, 58, 237, 0.35) }
}
@keyframes tickerScroll {
    0% { transform: translateX(0) }
    100% { transform: translateX(-50%) }
}
@keyframes wavePulse {
    0% { height: 8% }
    100% { height: var(--wave-h, 70%) }
}
@keyframes scanSweep {
    0% { top: 0; opacity: 0.9 }
    80% { opacity: 0.35 }
    100% { top: 100%; opacity: 0 }
}
@keyframes blink {
    0%, 100% { opacity: 1 }
    50% { opacity: 0 }
}
@keyframes panelIn {
    from { opacity: 0; transform: translateY(12px) }
    to { opacity: 1; transform: none }
}
@keyframes salvageDrift {
    from { translate: -4px -2px; rotate: -2deg }
    to { translate: 6px 4px; rotate: 3deg }
}
@keyframes salvageScan {
    0% { transform: scale(0.1); opacity: 0.8; border-color: rgba(66, 235, 189, 0.48) }
    100% { transform: scale(1); opacity: 0; border-color: rgba(66, 235, 189, 0) }
}
@keyframes watchlinePulse {
    0%, 100% { filter: brightness(0.75) }
    50% { filter: brightness(1.45) }
}

@keyframes tourGlyphSpin {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

/* reveal-on-scroll */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.in { opacity: 1; transform: none }

/* ===== 7. RESPONSIVE ===== */
@media (max-width: 1100px) {
    .home-snoas-overlay { display: none }
    .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .story-grid .feature-card,
    .story-grid .feature-card:nth-last-child(-n+2) { grid-column: auto }
    .command-deck { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

@media (max-width: 860px) {
    .media-row { grid-template-columns: 1fr; gap: 1.3rem }
    .media-row.flip .viewport { order: 0 }
    .media-row .viewport { max-width: 620px; margin: 0 auto; width: 100% }
    .home-pillar-row { grid-template-columns: 1fr }
    .home-shot { max-width: 620px; margin: 0 auto; width: 100%; display: block }
    .home-shot .viewport-inner { flex: none }
    .home-shot .viewport-inner img { height: auto; object-fit: fill }
}

@media (max-width: 768px) {
    :root { --measure: 100% }
    .console-header { padding: 0.45rem 0.8rem 0.6rem }
    .header-tagline, .header-sub { display: none }
    .header-sun { width: 70px; height: 70px }
    .frame-corner { display: none }
    .sidebar { padding: 0 }
    .nav-item { padding: 0.55rem 0.72rem; font-size: 0.52rem }
    .main-panel { padding: 1.4rem 1rem 2.6rem }
    .main-panel.tour-mode { padding: 0 }
    .sec-head { gap: 0.8rem }
    .sec-index { font-size: 4.2rem; -webkit-text-stroke-width: 1px; opacity: 0.55 }
    .features-grid, .home-cards, .home-pillar-row .home-cards, .audio-tracks { grid-template-columns: 1fr }
    .story-grid { grid-template-columns: 1fr }
    .command-deck { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .command-cell:last-child { grid-column: 1 / -1 }
    .salvage-readouts { grid-template-columns: repeat(2, 1fr) }
    .salvage-readout:nth-child(2) { border-right: none }
    .salvage-readout:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft) }
    .salvage-controls { align-items: stretch; flex-direction: column }
    .salvage-viewport { aspect-ratio: 4 / 3; min-height: 240px }
    .faction-row { gap: 0.32rem }
    .faction-badge { font-size: 0.55rem; padding: 0.4em 0.65em }
    .status-meta { display: none }
    /* Keep the always-visible newsletter available without letting it become
       a second mobile panel. The default footer wrapped the label, full-width
       form, status line, and copyright into roughly a sixth of the viewport. */
    .console-footer {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        padding: 0.28rem 0.65rem calc(0.28rem + env(safe-area-inset-bottom, 0px));
    }
    .footer-left {
        width: 100%;
        min-width: 0;
        gap: 0;
        flex-wrap: nowrap;
    }
    .footer-signup-form {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "label controls"
            "message message";
        align-items: center;
        gap: 0.22rem 0.5rem;
        width: 100%;
        min-width: 0;
    }
    .footer-signup-label {
        grid-area: label;
        white-space: nowrap;
        font-size: 0.46rem;
        letter-spacing: 0.16em;
    }
    .footer-signup-row {
        grid-area: controls;
        width: auto;
        min-width: 0;
    }
    .footer-signup-input {
        width: 100%;
        min-width: 0;
        padding: 0.48em 0.7em;
        font-size: 0.62rem;
    }
    .footer-signup-btn { padding: 0.58em 0.85em }
    .footer-signup-msg {
        grid-area: message;
        min-height: 0;
        line-height: 1.2;
        text-align: center;
    }
    .footer-signup-msg:empty { display: none }
    .footer-copy { display: none }
    .tour-host { min-height: 440px }
    .tour-cta { width: 100%; justify-content: flex-start; padding: 0.85em 1.1em }
    .tour-cta-arrow { display: none }
    .clipart { max-width: 260px }
    .clipart-small { max-width: 120px }
    .lore-quote { padding: 0.9rem 1rem 0.9rem 1.3rem }
}

@media (max-width: 768px) {
    /* backdrop-filter blur is one of the most expensive effects on mobile
       GPUs, and over this dark canvas it is nearly invisible — drop it. */
    .console-header, .sidebar, .status-bar, .console-footer { backdrop-filter: none }
}

@media (max-width: 480px) {
    .hero-eyebrow { letter-spacing: 0.14em; gap: 0.45rem }
    .sec-kicker { letter-spacing: 0.16em }

    .header-title { font-size: 1.1rem }
    .nav-item .nav-icon { display: none }
    .nav-item { padding: 0.5rem 0.55rem; font-size: 0.48rem; min-height: 38px }
    .footer-signup-btn { font-size: 0.5rem; padding: 0.6em 0.8em }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .panel.active { opacity: 1 !important }
    .reveal { opacity: 1 !important; transform: none !important }
    .ticker-track { animation: none !important }
    .wave-bar { animation: none !important; height: var(--wave-h, 50%) !important }
    .salvage-shard { animation: none !important }
    .salvage-console.scanning .salvage-scan { display: none }
    .salvage-console.eva-ready .salvage-watchline { animation: none !important }
    /* The global 0.01ms override would snap the orbit glyph to a random
       angle mid-spin; stop it outright so it rests as drawn. */
    .tour-glyph-drift { animation: none !important }
    .main-panel { scroll-behavior: auto }

    /* Pin the ship cruise centred; without animation the mover would sit at
       its base position off-screen left. Sprite is up to 150px wide. */
    .ship-mover { left: 50%; margin-left: -75px; animation: none !important }
    .ship-bob { animation: none !important }
    .ship-wake-speck { display: none }

    /* With animations off, the negative delays that set each world's starting
       angle never apply and all seven stack at 12 o'clock. Pin the same
       angles statically, counter-rotating the labels so they stay upright. */
    .home-o1 { transform: translate(-50%, -50%) rotate(20deg) }
    .home-o2 { transform: translate(-50%, -50%) rotate(95deg) }
    .home-o3 { transform: translate(-50%, -50%) rotate(168deg) }
    .home-o4 { transform: translate(-50%, -50%) rotate(246deg) }
    .home-o5 { transform: translate(-50%, -50%) rotate(305deg) }
    .home-o6 { transform: translate(-50%, -50%) rotate(42deg) }
    .home-o7 { transform: translate(-50%, -50%) rotate(133deg) }
    .home-o1 .home-planet-group { transform: translate(0, -50%) rotate(-20deg) }
    .home-o2 .home-planet-group { transform: translate(0, -50%) rotate(-95deg) }
    .home-o3 .home-planet-group { transform: translate(0, -50%) rotate(-168deg) }
    .home-o4 .home-planet-group { transform: translate(0, -50%) rotate(-246deg) }
    .home-o5 .home-planet-group { transform: translate(0, -50%) rotate(-305deg) }
    .home-o6 .home-planet-group { transform: translate(0, -50%) rotate(-42deg) }
    .home-o7 .home-planet-group { transform: translate(0, -50%) rotate(-133deg) }
    .orr-1 { transform: translate(-50%, -50%) rotate(20deg) }
    .orr-2 { transform: translate(-50%, -50%) rotate(95deg) }
    .orr-3 { transform: translate(-50%, -50%) rotate(168deg) }
    .orr-4 { transform: translate(-50%, -50%) rotate(246deg) }
    .orr-5 { transform: translate(-50%, -50%) rotate(305deg) }
    .orr-6 { transform: translate(-50%, -50%) rotate(42deg) }
    .orr-7 { transform: translate(-50%, -50%) rotate(133deg) }
}

/* ============================================================
   8. INTERACTIVE INSTRUMENTS — living-console pass
   Home trader traffic, practice ledger, gunnery drill,
   dossier generator, SNOAS direct terminal.
   ============================================================ */

/* --- HOME: trader traffic over the orrery --- */
.home-traffic {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 3;
}
.home-traffic-tip {
    position: absolute;
    z-index: 5;
    padding: 0.32rem 0.6rem;
    font-family: var(--f-mono);
    font-size: 0.52rem;
    letter-spacing: 0.08em;
    color: rgba(255, 214, 107, 0.85);
    background: rgba(24, 9, 17, 0.92);
    border: 1px solid rgba(var(--panel-line-rgb), 0.35);
    box-shadow: 0 0 18px rgba(var(--panel-line-rgb), 0.12);
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -140%);
}

/* --- SHARED CONSOLE CHASSIS (ledger + gunnery) --- */
.market-console, .gunnery-console {
    max-width: 640px;
    margin: 1.5rem auto var(--block);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    background: rgba(18, 6, 12, 0.5);
    box-shadow: inset 0 0 44px rgba(var(--accent-rgb), 0.05);
    overflow: hidden;
    text-align: left;
}
.market-console-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.68rem 0.95rem;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--f-mono);
    font-size: clamp(0.52rem, 0.78vw, 0.64rem);
    letter-spacing: 0.12em;
    color: rgba(var(--accent-rgb), 0.6);
}
.market-console-head strong { font-weight: 400; color: rgba(255, 214, 107, 0.72); text-align: right }
.market-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line-soft);
}
.market-stat { padding: 0.55rem 0.95rem 0.6rem; border-right: 1px solid var(--line-soft) }
.market-stat:last-child { border-right: none }
.market-stat span {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.16em;
    color: var(--faint);
    margin-bottom: 0.2rem;
}
.market-stat strong {
    display: block;
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(0.66rem, 0.95vw, 0.82rem);
    letter-spacing: 0.07em;
    color: rgba(236, 227, 214, 0.82);
    transition: color 0.4s var(--ease);
}
.market-stat strong.gain { color: var(--gold) }
.market-stat strong.loss { color: rgba(201, 160, 255, 0.8) }
.market-log {
    font-family: var(--f-mono);
    font-size: clamp(0.54rem, 0.8vw, 0.66rem);
    line-height: 1.55;
    color: rgba(var(--accent-rgb), 0.6);
}
.market-log.crack { color: rgba(201, 160, 255, 0.62); font-style: italic }

/* --- TRADE: practice ledger --- */
.market-goods { padding: 0.35rem 0 }
.market-good {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.95rem;
    font-family: var(--f-mono);
    font-size: clamp(0.56rem, 0.82vw, 0.68rem);
}
.market-good + .market-good { border-top: 1px solid rgba(201, 160, 255, 0.05) }
.market-good-name { color: var(--body-text); letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.market-good-price { color: var(--gold); min-width: 4.2em; text-align: right; transition: color 0.4s var(--ease) }
.market-good-price.down { color: rgba(201, 160, 255, 0.78) }
.market-good-held { color: var(--dim); min-width: 4.4em; text-align: right; font-size: 0.88em }
.market-btn {
    font-family: var(--f-cond);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.3em 0.85em;
    background: transparent;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: rgba(var(--accent-rgb), 0.85);
    cursor: pointer;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.market-btn:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.55) }
.market-btn:disabled { opacity: 0.28; cursor: default }
.market-transit { padding: 1.1rem 0.95rem }
.market-transit-bar {
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    box-shadow: 0 0 9px rgba(var(--accent-rgb), 0.6);
}
.market-transit-bar.run { width: 100%; transition: width var(--transit-dur, 1.8s) linear }
.market-controls { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0.95rem; border-top: 1px solid var(--line-soft) }
.market-travel-btn {
    flex-shrink: 0;
    font-family: var(--f-display);
    font-size: 0.56rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 214, 107, 0.07);
    border: 1px solid rgba(255, 214, 107, 0.28);
    padding: 0.75rem 0.95rem;
    cursor: pointer;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.market-travel-btn:hover:not(:disabled) {
    background: rgba(255, 214, 107, 0.14);
    border-color: rgba(255, 214, 107, 0.5);
    box-shadow: 0 0 20px -6px rgba(255, 214, 107, 0.5);
}
.market-travel-btn:disabled { opacity: 0.45; cursor: default }

/* --- COMBAT: gunnery drill --- */
.gunnery-stage {
    position: relative;
    aspect-ratio: 16 / 9;
    min-height: 240px;
    background:
        radial-gradient(circle at 50% 85%, rgba(var(--accent-rgb), 0.1), transparent 40%),
        linear-gradient(rgba(201, 160, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 160, 255, 0.035) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
    cursor: crosshair;
    touch-action: manipulation;
}
.gunnery-stage canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.gunnery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 5, 11, 0.4);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s var(--ease);
}
.gunnery-overlay.hidden { opacity: 0 }
.gunnery-overlay span {
    font-family: var(--f-display);
    font-size: clamp(0.6rem, 1vw, 0.78rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 214, 107, 0.8);
    text-shadow: 0 0 18px rgba(255, 122, 41, 0.5);
    animation: blink 2.2s ease-in-out infinite;
}
.gunnery-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0.6rem; border-top: 1px solid var(--line-soft) }
button.command-cell {
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.command-live[disabled] { cursor: default }
.command-live[disabled] .command-cell-name { color: rgba(236, 227, 214, 0.4) }
.command-live[disabled]::before { background: linear-gradient(90deg, rgba(201, 160, 255, 0.5), rgba(201, 160, 255, 0.25)); box-shadow: none }
.command-live.active-effect { border-color: rgba(255, 214, 107, 0.6); box-shadow: 0 0 18px -4px rgba(255, 214, 107, 0.45) }
.gunnery-console .market-log { padding: 0.7rem 0.95rem 0.85rem; border-top: 1px solid var(--line-soft) }

/* --- CREW: dossier generator control --- */
.dossier-recruit {
    display: block;
    margin: 1rem auto 1.1rem;
    font-family: var(--f-display);
    font-size: 0.56rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 214, 107, 0.07);
    border: 1px solid rgba(255, 214, 107, 0.28);
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.dossier-recruit:hover:not(:disabled) {
    background: rgba(255, 214, 107, 0.14);
    border-color: rgba(255, 214, 107, 0.5);
    box-shadow: 0 0 20px -6px rgba(255, 214, 107, 0.5);
}
.dossier-recruit:disabled { opacity: 0.45; cursor: default }
.dossier.rolling .dossier-rows, .dossier.rolling .dossier-history, .dossier.rolling .dossier-snoas { opacity: 0.25; transition: opacity 0.25s var(--ease) }

/* --- SNOAS TERMINAL --- */
.status-term-btn {
    flex-shrink: 0;
    font-family: var(--f-mono);
    font-size: clamp(0.5rem, 0.74rem, 0.6rem);
    letter-spacing: 0.1em;
    padding: 0.18em 0.6em;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: rgba(var(--accent-rgb), 0.8);
    cursor: pointer;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.status-term-btn:hover, .status-term-btn[aria-expanded="true"] {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.55);
}
.snoas-term {
    position: fixed;
    left: 50%;
    bottom: calc(1.9rem + 3.4rem);
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 2rem));
    z-index: 90;
    background: rgba(20, 7, 13, 0.96);
    border: 1px solid rgba(var(--panel-line-rgb), 0.4);
    box-shadow: 0 0 40px rgba(var(--panel-line-rgb), 0.14), inset 0 0 60px rgba(var(--accent-rgb), 0.04);
    backdrop-filter: blur(6px);
}
.snoas-term-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--f-mono);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
    color: rgba(var(--accent-rgb), 0.6);
}
.snoas-term-close {
    background: none;
    border: none;
    color: var(--dim);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1em 0.3em;
}
.snoas-term-close:hover { color: var(--text) }
.snoas-term-scroll {
    height: min(240px, 34vh);
    overflow-y: auto;
    padding: 0.7rem 0.85rem;
    font-family: var(--f-mono);
    font-size: clamp(0.56rem, 0.8vw, 0.66rem);
    line-height: 1.65;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.3) transparent;
}
.snoas-term-line { color: rgba(var(--accent-rgb), 0.68); white-space: pre-wrap; word-break: break-word }
.snoas-term-line.you { color: rgba(236, 227, 214, 0.75) }
.snoas-term-line.crack { color: rgba(201, 160, 255, 0.62); font-style: italic }
.snoas-term-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border-top: 1px solid var(--line-soft);
}
.snoas-term-prompt { font-family: var(--f-mono); font-size: 0.66rem; color: rgba(var(--accent-rgb), 0.7) }
.snoas-term-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--f-mono);
    font-size: clamp(0.6rem, 0.84vw, 0.7rem);
    letter-spacing: 0.04em;
    color: var(--text);
    caret-color: rgba(var(--accent-rgb), 0.9);
}
.snoas-term-input::placeholder { color: var(--faint) }

/* --- interactive instruments: responsive --- */
@media (max-width: 720px) {
    .market-good { grid-template-columns: minmax(0, 1fr) auto auto auto; row-gap: 0.3rem }
    .market-good-name { grid-column: 1 / -1 }
    .market-good-held { grid-column: 1; grid-row: 2; text-align: left }
    .market-good-price { grid-column: 2; grid-row: 2 }
    .market-good .market-btn { grid-row: 2 }
    .market-controls { flex-direction: column; align-items: stretch; text-align: left }
    .gunnery-stage { min-height: 200px }
    .snoas-term { bottom: calc(1.9rem + 3rem) }
}
@media (max-width: 640px) {
    .gunnery-deck { grid-template-columns: minmax(0, 1fr) }
    .gunnery-deck .command-cell, .gunnery-deck .command-cell:last-child { grid-column: auto; min-height: 0; padding: 0.65rem 0.75rem 0.6rem }
    .gunnery-deck .command-cell-domain { display: inline-block; margin: 0 0.6rem 0 0 }
    .gunnery-deck .command-cell-name { display: inline }
    .gunnery-deck .command-cell-state { position: static; display: block; margin-top: 0.3rem }
}
@media (max-width: 480px) {
    .status-term-btn { font-size: 0.46rem; padding: 0.16em 0.45em }
}

/* --- interactive instruments: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .home-traffic { display: none }
    .gunnery-overlay span { animation: none !important }
    .market-transit-bar.run { transition: none; width: 100% }
}

/* ============================================================
   8. WIDESCREEN RECOMPOSITION — 2026-08
   The readable measure remains deliberately narrow. The surrounding canvas
   is now spent on gameplay imagery, navigation, telemetry, and asymmetry
   instead of widening prose or leaving an empty central composition.
   ============================================================ */

:root {
    --content-w: min(94vw, 3400px);
    --wide-gutter: clamp(1rem, 3vw, 5rem);
}

/* One useful desktop header: brand left, navigation across the available
   centre, primary interactive experience at the right edge. */
.console {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.console-header { grid-row: 1; grid-column: 1 }
.subnav { grid-row: 2; grid-column: 1 }
.main-panel { grid-row: 3; grid-column: 1 }
.scroll-veil { grid-row: 3; grid-column: 1 }
.status-bar { grid-row: 4; grid-column: 1 }

.console-header {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 3.5rem);
    padding: 0.45rem var(--wide-gutter);
    min-height: 68px;
    overflow: visible;
}
.console-header::before {
    inset: -180% 42% 15% -12%;
    background: radial-gradient(ellipse at left center,
        rgba(255, 214, 107, 0.2) 0%, rgba(245, 189, 79, 0.055) 34%, transparent 70%);
}
.header-brand {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    z-index: 1;
}
.header-brand-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    z-index: 1;
}
.header-sun {
    top: 50%;
    left: 34px;
    width: 112px;
    height: 112px;
}
.header-tagline {
    order: 3;
    font-size: 0.56rem;
    letter-spacing: 0.15em;
    opacity: 0.72;
}
.header-title {
    order: 1;
    font-size: clamp(1.05rem, 1.55vw, 1.55rem);
    line-height: 1;
    letter-spacing: 0.14em;
    padding-left: 0;
}
.header-sub {
    order: 2;
    font-size: 0.48rem;
    letter-spacing: 0.26em;
}
.console-header > .sidebar {
    grid-row: auto;
    grid-column: auto;
    justify-self: center;
    width: auto;
    min-width: 0;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}
.console-header > .sidebar > :first-child,
.console-header > .sidebar > :last-child { margin: 0 }
.nav-item {
    min-height: 50px;
    padding: 0.7rem clamp(0.75rem, 1.25vw, 1.25rem);
    font-size: clamp(0.72rem, 0.88vw, 0.9rem);
}
.header-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 42px;
    padding: 0.72rem 1rem;
    font-family: var(--f-cond);
    font-weight: 600;
    font-size: clamp(0.7rem, 0.82vw, 0.86rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #12080b;
    background: linear-gradient(110deg, var(--gold), #e8b9bc 70%, var(--purple));
    border: 0;
    cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
    transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}
.header-action:hover { filter: brightness(1.12); transform: translateY(-1px) }
.header-action-arrow { transition: transform 0.25s var(--ease) }
.header-action:hover .header-action-arrow { transform: translateX(4px) }
.subnav { background: rgba(13, 4, 9, 0.72) }

/* Removing the always-visible newsletter footer returns meaningful height to
   the scene. The focused signup remains in the Home narrative below. */
.snoas-term { bottom: calc(1.9rem + 0.75rem) }

.main-panel {
    padding: clamp(1.15rem, 2.2vw, 2.4rem) var(--wide-gutter) clamp(3rem, 5vw, 5rem);
}

/* --- Cinematic home composition --- */
.hero {
    --orrery-size: clamp(330px, 29vw, 590px);
    display: grid;
    grid-template-columns: minmax(360px, 0.78fr) minmax(600px, 1.38fr);
    grid-template-rows: minmax(610px, auto) auto;
    column-gap: clamp(2rem, 4vw, 6rem);
    row-gap: clamp(1rem, 1.8vw, 2rem);
    align-items: stretch;
    max-width: var(--content-w);
    min-height: min(880px, calc(100dvh - 132px));
    text-align: left;
}
.hero-copy {
    align-self: center;
    padding: clamp(1rem, 2vw, 2.5rem) 0;
}
.hero-eyebrow {
    justify-content: flex-start;
    margin-bottom: clamp(0.9rem, 1.5vw, 1.5rem);
}
.hero-eyebrow::before { display: none }
.hero-eyebrow::after {
    flex: 1;
    max-width: 130px;
}
.hero-title {
    font-size: clamp(3.4rem, 5.2vw, 7.4rem);
    line-height: 0.94;
    letter-spacing: 0.025em;
    padding-left: 0;
    margin: 0 0 0.5rem;
    text-align: left;
    white-space: nowrap;
}
.hero-sub {
    text-align: left;
    margin-bottom: clamp(1.2rem, 2vw, 2rem);
}
.hero-lead {
    max-width: 57ch;
    margin: 0;
    font-size: clamp(1rem, calc(0.69rem + 0.34vw), 1.32rem);
    line-height: 1.72;
}
.hero-actions {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
    margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
    flex-wrap: wrap;
}
.hero-cta { margin: 0; justify-content: flex-start }
.hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.9rem 1.15rem;
    font-family: var(--f-cond);
    font-weight: 600;
    font-size: clamp(0.74rem, 0.86vw, 0.9rem);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text);
    background: rgba(201, 160, 255, 0.055);
    border: 1px solid rgba(201, 160, 255, 0.25);
    cursor: pointer;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.hero-secondary:hover {
    background: rgba(201, 160, 255, 0.12);
    border-color: rgba(201, 160, 255, 0.5);
    transform: translateY(-1px);
}

.hero-orrery-col {
    position: relative;
    display: block;
    min-height: 610px;
    margin-top: 0;
    isolation: isolate;
}
.hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0b070e;
    border: 1px solid rgba(201, 160, 255, 0.16);
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
    box-shadow: 0 30px 80px -42px rgba(216, 121, 255, 0.55);
    z-index: -2;
}
.hero-media::before,
.hero-media::after {
    content: '';
    position: absolute;
    z-index: 5;
    pointer-events: none;
}
.hero-media::before {
    inset: 12px;
    border: 1px solid rgba(255, 214, 107, 0.12);
    clip-path: polygon(0 0, 76px 0, 76px 1px, calc(100% - 76px) 1px, calc(100% - 76px) 0, 100% 0, 100% 100%, 0 100%);
}
.hero-media::after {
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(0, 0, 0, 0.035) 4px 6px);
    mix-blend-mode: multiply;
}
.hero-scene {
    position: absolute;
    inset: -2%;
    width: 104%;
    height: 104%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.045);
    animation: heroScene 40s linear infinite;
}
.hero-scene-1 { animation-delay: 0s; object-position: 56% center }
.hero-scene-2 { animation-delay: 8s; object-position: 62% center }
.hero-scene-3 { animation-delay: 16s; object-position: 55% center }
.hero-scene-4 { animation-delay: 24s; object-position: 62% center }
.hero-scene-5 { animation-delay: 32s; object-position: center }
@keyframes heroScene {
    0% { opacity: 0; transform: scale(1.055) translate3d(-0.5%, 0, 0) }
    2.5%, 18% { opacity: 1 }
    20% { opacity: 0; transform: scale(1.015) translate3d(0.5%, 0, 0) }
    100% { opacity: 0; transform: scale(1.015) }
}
.hero-media-scrim {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(90deg, rgba(16, 6, 11, 0.76), rgba(16, 6, 11, 0.08) 34%, transparent 58%),
        linear-gradient(0deg, rgba(9, 3, 7, 0.82), transparent 34%),
        radial-gradient(circle at 78% 64%, transparent 0 25%, rgba(16, 6, 11, 0.13) 55%, rgba(16, 6, 11, 0.42) 100%);
}
.hero-media-readout {
    position: absolute;
    left: clamp(1.1rem, 2vw, 2rem);
    bottom: clamp(1rem, 1.8vw, 1.8rem);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255, 214, 107, 0.5);
    font-family: var(--f-mono);
    letter-spacing: 0.14em;
}
.hero-media-readout span { font-size: 0.55rem; color: rgba(201, 160, 255, 0.78) }
.hero-media-readout strong { font-size: clamp(0.62rem, 0.8vw, 0.82rem); color: var(--gold); font-weight: 500 }

.home-orrery {
    position: absolute;
    right: clamp(0.8rem, 1.8vw, 1.8rem);
    bottom: clamp(0.8rem, 1.8vw, 1.8rem);
    width: min(62%, var(--orrery-size));
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 6, 12, 0.34), rgba(14, 6, 12, 0.62) 54%, transparent 72%);
    filter: drop-shadow(0 0 32px rgba(201, 160, 255, 0.14));
}
.home-snoas-overlay {
    top: clamp(1rem, 1.8vw, 1.8rem);
    bottom: auto;
    width: min(45%, 440px);
    height: 34%;
    max-width: none;
    padding: 0.75rem 0.9rem;
    gap: 0.32em;
    background: linear-gradient(105deg, rgba(13, 5, 10, 0.72), rgba(13, 5, 10, 0.18) 78%, transparent);
    border-left: 1px solid rgba(201, 160, 255, 0.18);
    -webkit-mask-image: linear-gradient(to bottom, black 0 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0 76%, transparent 100%);
    z-index: 4;
}
.home-snoas-left { left: clamp(1rem, 1.8vw, 1.8rem) }
.home-snoas-right {
    top: auto;
    left: clamp(1rem, 1.8vw, 1.8rem);
    right: auto;
    bottom: clamp(4.6rem, 7vw, 6rem);
    text-align: left;
}
.home-snoas-msg {
    font-size: clamp(0.6rem, 0.62vw, 0.72rem);
    color: rgba(236, 227, 214, 0.52);
    line-height: 1.48;
    text-shadow: 0 1px 6px rgba(8, 2, 6, 0.9);
}
.home-snoas-prompt { color: rgba(255, 214, 107, 0.56) }
.home-snoas-msg.crack { color: rgba(201, 160, 255, 0.62) }
.home-snoas-cursor { background: rgba(255, 214, 107, 0.58) }
.orrery-popup { z-index: 8 }

.hero-proof-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(201, 160, 255, 0.14);
    background: linear-gradient(90deg, rgba(20, 7, 13, 0.92), rgba(35, 12, 25, 0.74), rgba(20, 7, 13, 0.92));
    box-shadow: 0 18px 54px -38px rgba(216, 121, 255, 0.7);
}
.hero-proof-rail button {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'index title' 'index sub';
    align-items: center;
    gap: 0.15rem 0.8rem;
    min-height: 84px;
    padding: 1rem clamp(0.8rem, 1.4vw, 1.5rem);
    text-align: left;
    color: var(--text);
    background: transparent;
    border: 0;
    border-right: 1px solid rgba(201, 160, 255, 0.1);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.hero-proof-rail button:last-child { border-right: 0 }
.hero-proof-rail button::after {
    content: '';
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--purple));
    transition: right 0.35s var(--ease);
}
.hero-proof-rail button:hover { background: rgba(201, 160, 255, 0.075) }
.hero-proof-rail button:hover::after { right: 0 }
.hero-proof-rail span {
    grid-area: index;
    font-family: var(--f-display);
    font-size: clamp(1.25rem, 1.7vw, 2rem);
    color: rgba(255, 214, 107, 0.34);
}
.hero-proof-rail strong {
    grid-area: title;
    font-family: var(--f-cond);
    font-size: clamp(0.82rem, 1vw, 1.08rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}
.hero-proof-rail small {
    grid-area: sub;
    font-family: var(--f-body);
    font-size: clamp(0.76rem, 0.86vw, 0.94rem);
    color: var(--dim);
}
.hero-cue { margin-top: clamp(2rem, 3vw, 3.4rem) }

/* Wider editorial chapters. Copy stays readable while evidence occupies the
   larger share and reaches toward a screen edge. */
@media (min-width: 1101px) {
    .sec-head {
        align-items: flex-start;
        justify-content: center;
        min-height: clamp(110px, 8vw, 150px);
        padding-left: clamp(3rem, 8vw, 10rem);
        text-align: left;
    }
    .sec-index {
        top: 0;
        left: max(-2rem, calc((var(--content-w) - 100vw) / 2 + 1rem));
        transform: none;
        font-size: clamp(8rem, 15vw, 17rem);
        opacity: 0.72;
    }
    .sec-kicker {
        justify-content: flex-start;
        margin: 0 0 0.5rem;
        max-width: 52rem;
    }
    .sec-kicker::before { display: none }
    .sec-kicker::after { max-width: 150px }
    .sec-title { font-size: clamp(2.2rem, 3.3vw, 4.6rem) }
    .sec-lead {
        max-width: 72ch;
        margin-left: clamp(3rem, 8vw, 10rem);
        margin-right: 0;
        text-align: left;
    }

    .media-row { grid-template-columns: minmax(310px, 0.74fr) minmax(0, 1.26fr); gap: clamp(2rem, 4vw, 6rem) }
    .media-row.flip { grid-template-columns: minmax(0, 1.26fr) minmax(310px, 0.74fr) }
    .media-row:not(.flip) .viewport { margin-right: max(-10rem, calc((var(--content-w) - 100vw) / 2 + 0.5rem)) }
    .media-row.flip .viewport { margin-left: max(-10rem, calc((var(--content-w) - 100vw) / 2 + 0.5rem)) }
    .panel:not(.panel-home):not(.panel-tour) > .viewport {
        width: min(76vw, 1400px);
        max-width: none;
    }
    .features-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
    .home-pillar-row { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr) }
    .home-pillar-row > .home-shot { margin-right: max(-8rem, calc((var(--content-w) - 100vw) / 2 + 0.5rem)) }
}

.signal-panel {
    max-width: min(1100px, 100%);
}
@media (min-width: 900px) {
    .signal-panel {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
        grid-template-areas: 'kicker form' 'title form' 'sub message';
        align-items: center;
        column-gap: clamp(2rem, 5vw, 5rem);
        padding: 2.2rem clamp(2rem, 4vw, 4rem);
        text-align: left;
    }
    .signal-kicker { grid-area: kicker }
    .signal-title { grid-area: title; font-size: clamp(1.1rem, 1.6vw, 1.55rem) }
    .signal-sub { grid-area: sub; max-width: 46ch; margin: 0 }
    .signal-form { grid-area: form; justify-content: stretch }
    .signal-input { width: 100%; font-size: 0.86rem }
    .signal-msg { grid-area: message; margin: 0.5rem 0 0; text-align: center }
}

/* Intermediate layouts keep the cinematic image prominent without forcing
   desktop navigation or telemetry into laptop widths that cannot hold it. */
@media (max-width: 1100px) {
    .console-header { grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; padding-inline: 1rem }
    .header-tagline, .header-sub { display: none }
    .header-title { font-size: 1.05rem }
    .header-sun { width: 76px; height: 76px }
    .nav-item { padding-inline: 0.72rem; font-size: 0.68rem }
    .header-action { padding-inline: 0.8rem }
    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(540px, 62vh) auto;
        min-height: 0;
        row-gap: 1.4rem;
    }
    .hero-copy { max-width: 760px; padding-bottom: 0 }
    .hero-title { font-size: clamp(3.5rem, 10vw, 6.6rem) }
    .hero-orrery-col { min-height: 540px }
    .hero-proof-rail { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .hero-proof-rail button:nth-child(2) { border-right: 0 }
    .hero-proof-rail button:nth-child(-n+2) { border-bottom: 1px solid rgba(201, 160, 255, 0.1) }
}

@media (max-width: 820px) {
    .console-header {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    .header-brand { justify-self: center; padding: 0.5rem 1rem 0.45rem }
    .header-brand-copy { align-items: center }
    .header-title { font-size: 1.08rem }
    .header-action { display: none }
    .console-header > .sidebar {
        width: 100%;
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
        background: rgba(13, 4, 9, 0.46);
    }
    .nav-item { min-height: 40px; padding: 0.5rem 0.65rem; font-size: 0.56rem }
    .main-panel { padding: 1.2rem 1rem 2.8rem }
    .hero { grid-template-rows: auto minmax(420px, 58vh) auto }
    .hero-copy { padding-top: 0.4rem }
    .hero-title { font-size: clamp(3rem, 13vw, 5rem) }
    .hero-orrery-col { min-height: 420px }
    .hero-media { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)) }
    .home-orrery { width: min(66%, 360px) }
    .hero-media-readout { left: 1rem; bottom: 0.9rem }
    .tour-cta { width: auto }
    .hero-secondary { flex: 1 }
    .hero-cue { margin-top: 2rem }
}

@media (max-width: 560px) {
    .hero { grid-template-rows: auto 350px auto }
    .hero-title { font-size: clamp(2.6rem, 14vw, 4rem) }
    .hero-lead { font-size: 1rem; line-height: 1.66 }
    .hero-actions { flex-direction: column }
    .hero-cta, .tour-cta, .hero-secondary { width: 100% }
    .hero-orrery-col { min-height: 350px }
    .home-orrery { width: 255px; right: 0.35rem; bottom: 0.35rem }
    .hero-media-readout { max-width: 42%; left: 0.75rem; bottom: 0.75rem }
    .hero-media-readout span { font-size: 0.46rem }
    .hero-media-readout strong { font-size: 0.54rem }
    .hero-proof-rail button { min-height: 72px; padding: 0.75rem 0.65rem; gap: 0.1rem 0.55rem }
    .hero-proof-rail span { font-size: 1.15rem }
    .hero-proof-rail strong { font-size: 0.72rem }
    .hero-proof-rail small { font-size: 0.7rem; line-height: 1.2 }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scene { animation: none !important; opacity: 0 }
    .hero-scene-1 { opacity: 1 }
}

/* ============================================================
   9. SCROLL-STORY CHAPTERS — 2026-08-10
   Large, paced feature chapters replace equal-weight walls of cards. The
   visual language stays shipboard: field records, instrument readouts and
   evidence strips rather than generic product-site glass panels.
   ============================================================ */

/* A single launch-signal uplink stays reachable on every page. */
.signal-dock {
    position: fixed;
    right: clamp(0.6rem, 1.4vw, 1.4rem);
    bottom: calc(1.9rem + clamp(0.55rem, 1vw, 0.9rem));
    z-index: 58;
    width: min(430px, calc(100vw - 2rem));
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr);
    grid-template-areas: 'copy form' 'message message';
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding: 0.72rem 0.8rem 0.55rem;
    background:
        linear-gradient(110deg, rgba(27, 8, 17, 0.97), rgba(43, 14, 31, 0.94)),
        repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,0.015) 11px 12px);
    border: 1px solid rgba(255, 214, 107, 0.35);
    box-shadow: 0 14px 48px -18px rgba(0, 0, 0, 0.9), 0 0 32px -18px rgba(255, 214, 107, 0.65);
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.signal-dock::before {
    content: 'SNOAS // COMMS';
    position: absolute;
    top: -0.56rem;
    left: 0.7rem;
    padding: 0 0.35rem;
    font-family: var(--f-mono);
    font-size: 0.44rem;
    letter-spacing: 0.18em;
    color: rgba(255, 214, 107, 0.66);
    background: #150710;
}
.signal-dock-copy { grid-area: copy; min-width: 0 }
.signal-dock .signal-kicker {
    display: block;
    margin: 0 0 0.16rem;
    font-size: 0.43rem;
    white-space: nowrap;
}
.signal-dock .signal-title {
    display: block;
    margin: 0;
    font-size: clamp(0.65rem, 0.78vw, 0.78rem);
    white-space: nowrap;
}
.signal-dock .signal-form { grid-area: form; min-width: 0 }
.signal-dock .signal-input { width: 100%; min-width: 0; padding-block: 0.65em; font-size: 0.65rem }
.signal-dock .signal-btn { padding-inline: 0.85rem; font-size: 0.54rem }
.signal-dock .signal-msg {
    grid-area: message;
    min-height: 0;
    margin: 0;
    text-align: right;
    line-height: 1.2;
}
.signal-dock .signal-msg:empty { display: none }

/* On genuinely wide screens the uplink belongs to the unused right side of
   the command header, keeping it permanent without masking page content. */
@media (min-width: 1540px) {
    .signal-dock {
        top: 0.55rem;
        bottom: auto;
        z-index: 80;
    }
    .signal-dock::before { background: #10050c }
}

/* The continuation cue is persistent. At the bottom it brightens to show
   that further wheel/touch input will carry the reader into the next page. */
.flow-hint {
    left: clamp(1rem, 2vw, 2rem);
    bottom: calc(1.9rem + clamp(0.55rem, 1vw, 0.9rem));
    transform: none;
    max-width: calc(100vw - 2rem);
    min-height: 46px;
    padding: 0.62em 0.9em;
    background: rgba(13, 4, 9, 0.94);
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 12px 36px -22px rgba(var(--accent-rgb), 0.75);
}
.flow-hint.show { opacity: 0.76 }
.flow-hint.ready {
    opacity: 1;
    border-color: rgba(var(--accent-rgb), 0.62);
    box-shadow: 0 0 24px -9px rgba(var(--accent-rgb), 0.8);
}
.flow-hint-track { width: 88px; height: 4px }
.flow-hint.ready .flow-hint-arrow { text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.85) }

/* HOME: a persistent black-box record on the left and long-form entries on
   the right. The image stays with the reader while the first four ideas pass. */
.home-pillars { margin-top: clamp(2rem, 4vw, 4rem) }
.home-pillars-lead {
    max-width: 76ch;
    margin: 0 0 clamp(2rem, 3vw, 3rem) auto;
    padding-left: clamp(1rem, 5vw, 6rem);
    text-align: left;
    font-size: clamp(1.08rem, 1.45vw, 1.48rem);
    line-height: 1.72;
}
.home-pillar-row {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 1fr);
    gap: clamp(2rem, 3.5vw, 4.5rem);
    align-items: start;
}
.home-pillar-row > .home-shot {
    order: -1;
    grid-column: 1;
    position: sticky;
    top: 1.25rem;
    height: min(64vh, 700px);
    margin-left: max(-7rem, calc((var(--content-w) - 100vw) / 2 + 0.6rem));
    margin-right: 0;
    clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
    filter: drop-shadow(0 30px 52px rgba(0,0,0,0.5));
}
.home-shot .viewport-inner {
    min-height: 0;
    background: #09050b;
}
.home-shot .viewport-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9, 3, 7, 0.56), transparent 38%),
        linear-gradient(0deg, rgba(9, 3, 7, 0.86), transparent 34%),
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,0.055) 5px 7px);
}
.home-shot .viewport-inner img { object-position: 56% center }
.home-shot-overlay {
    position: absolute;
    left: clamp(1rem, 2vw, 2rem);
    top: clamp(1rem, 2vw, 2rem);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding-left: 0.8rem;
    border-left: 1px solid rgba(255, 214, 107, 0.58);
    font-family: var(--f-mono);
    letter-spacing: 0.14em;
}
.home-shot-overlay span { font-size: 0.5rem; color: rgba(201,160,255,0.78) }
.home-shot-overlay strong { max-width: 25ch; font-size: clamp(0.65rem, 0.9vw, 0.88rem); color: var(--gold); font-weight: 500 }
.home-shot-route {
    position: absolute;
    left: clamp(1rem, 2vw, 2rem);
    right: clamp(1rem, 2vw, 2rem);
    bottom: clamp(1rem, 2vw, 2rem);
    z-index: 5;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
}
.home-shot-route .route-node { width: 7px; height: 7px; border: 1px solid rgba(201,160,255,0.72); transform: rotate(45deg) }
.home-shot-route .route-node.active { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(255,214,107,0.7) }
.home-shot-route .route-line { height: 1px; background: linear-gradient(90deg, rgba(255,214,107,0.6), rgba(201,160,255,0.18)) }
.home-shot-route em { grid-column: 1 / -1; margin-top: 0.25rem; font-size: 0.48rem; letter-spacing: 0.16em; color: rgba(236,227,214,0.52); font-style: normal }
.home-pillar-row > .home-cards {
    grid-column: 2;
    display: block;
    margin: 0;
}
.home-pillar-row .home-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.8rem, 2.6vw, 2.8rem) 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18);
    box-shadow: none;
}
.home-pillar-row .home-card:last-child { border-bottom: 1px solid rgba(var(--accent-rgb), 0.18) }
.home-pillar-row .home-card:hover { transform: none; box-shadow: none; border-color: rgba(var(--accent-rgb), 0.5) }
.home-pillar-row .home-card::after { display: none }
.home-pillar-row .home-card-title { font-size: clamp(0.82rem, 1vw, 1.06rem) }
.home-pillar-row .home-card p { font-size: clamp(0.96rem, 1.12vw, 1.15rem); line-height: 1.78 }

/* The second four ideas become an asymmetric dossier rather than a row of
   matching boxes. */
.home-cards-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: clamp(1rem, 1.8vw, 1.8rem);
    margin-top: clamp(3rem, 5vw, 5rem);
}
.home-cards-wide .home-card {
    grid-column: auto;
    min-height: clamp(230px, 24vh, 310px);
    padding: clamp(2rem, 2.8vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 84% 18%, rgba(var(--accent-rgb), 0.11), transparent 32%),
        linear-gradient(145deg, rgba(25,8,17,0.88), rgba(15,5,11,0.5));
    border-color: rgba(var(--accent-rgb), 0.14);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.home-cards-wide .home-card:nth-child(2),
.home-cards-wide .home-card:nth-child(3) { grid-column: auto }
.home-cards-wide .home-card:nth-child(even),
.home-cards-wide .home-card:nth-child(even):hover { transform: none }
.home-cards-wide .home-card-title { font-size: clamp(0.92rem, 1.2vw, 1.2rem) }
.home-cards-wide .home-card p { font-size: clamp(0.96rem, 1.08vw, 1.13rem) }

/* Shared editorial pacing across every gameplay/world/audio page. */
.panel:not(.panel-home):not(.panel-tour) { padding-bottom: clamp(4rem, 7vw, 7rem) }
.panel:not(.panel-home):not(.panel-tour) .sec-lead::after {
    content: 'SCROLL // FOLLOW THE SHIP LOG';
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 1.4rem;
    padding-top: 0.8rem;
    font-family: var(--f-mono);
    font-size: 0.52rem;
    letter-spacing: 0.2em;
    color: rgba(var(--accent-rgb), 0.56);
    border-top: 1px solid rgba(var(--accent-rgb), 0.22);
}
.panel:not(.panel-home):not(.panel-tour) .media-row {
    min-height: 0;
    margin: clamp(3.5rem, 6vw, 6rem) 0;
    gap: clamp(2rem, 4vw, 5rem);
}
.panel:not(.panel-home):not(.panel-tour) .media-row .feature-block {
    position: relative;
    padding: clamp(1.5rem, 3vw, 3.2rem) 0;
}
.panel:not(.panel-home):not(.panel-tour) .media-row .feature-block::before {
    content: 'FIELD NOTE';
    display: block;
    margin-bottom: 1rem;
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.22em;
    color: rgba(var(--accent-rgb), 0.52);
}
.panel:not(.panel-home):not(.panel-tour) .media-row .feature-block-title {
    display: block;
    font-size: clamp(1.25rem, 2.1vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: 0.08em;
}
.panel:not(.panel-home):not(.panel-tour) .media-row .feature-block-title::before { display: none }
.panel:not(.panel-home):not(.panel-tour) .media-row .feature-block p { font-size: clamp(1rem, 1.12vw, 1.18rem); line-height: 1.82 }
.panel:not(.panel-home):not(.panel-tour) .media-row .viewport {
    box-shadow: 0 35px 80px -44px rgba(var(--accent-rgb), 0.72);
}

.features-grid {
    counter-reset: chapter-card;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.8rem);
    margin: clamp(3rem, 5vw, 5rem) 0;
}
.features-grid .feature-card {
    counter-increment: chapter-card;
    grid-column: auto;
    min-height: clamp(220px, 23vh, 300px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.7rem, 2.5vw, 2.7rem);
    background:
        linear-gradient(180deg, transparent 0 18%, rgba(var(--accent-rgb), 0.04)),
        linear-gradient(145deg, rgba(28,9,20,0.8), rgba(14,5,10,0.44));
    border-color: rgba(var(--accent-rgb), 0.13);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.features-grid .feature-card:nth-child(4n+1),
.features-grid .feature-card:nth-child(4n+2),
.features-grid .feature-card:nth-child(4n+3),
.features-grid .feature-card:nth-child(4n+4) { grid-column: auto; transform: none }
.features-grid .feature-card:last-child:nth-child(odd) { grid-column: 1 / -1 }
.features-grid .feature-card:last-child:nth-child(odd) { min-height: 190px }
.features-grid .feature-card:nth-child(4n+2):hover,
.features-grid .feature-card:nth-child(4n+4):hover { transform: none }
.features-grid .feature-card-title {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-size: clamp(0.88rem, 1.15vw, 1.18rem);
}
.features-grid .feature-card-title::before {
    content: counter(chapter-card, decimal-leading-zero);
    font-family: var(--f-mono);
    font-size: 0.62em;
    color: rgba(var(--accent-rgb), 0.42);
}
.features-grid .feature-card p { font-size: clamp(0.95rem, 1.08vw, 1.14rem); line-height: 1.78 }
.features-grid .feature-card > p { max-width: 92ch }
#panel-story .story-grid .feature-card,
#panel-story .story-grid .feature-card:nth-child(1),
#panel-story .story-grid .feature-card:nth-child(2),
#panel-story .story-grid .feature-card:nth-child(4),
#panel-story .story-grid .feature-card:nth-child(5) { grid-column: auto }
#panel-story .story-grid .feature-card:last-child { grid-column: 1 / -1 }

.panel:not(.panel-home):not(.panel-tour) > .feature-block {
    width: min(100%, 1050px);
    margin-top: clamp(3rem, 5vw, 5rem);
    margin-bottom: clamp(3rem, 5vw, 5rem);
    padding: clamp(2rem, 3vw, 3rem);
    background: linear-gradient(105deg, rgba(var(--accent-rgb), 0.065), transparent 68%);
    border-left: 1px solid rgba(var(--accent-rgb), 0.48);
}
.panel:not(.panel-home):not(.panel-tour) > .feature-block .feature-block-title { font-size: clamp(1.05rem, 1.55vw, 1.65rem) }
.panel:not(.panel-home):not(.panel-tour) > .feature-block p { font-size: clamp(1rem, 1.12vw, 1.18rem) }
.lore-quote {
    max-width: 72ch;
    padding: clamp(1.5rem, 3vw, 3rem);
    font-size: clamp(1rem, 1.25vw, 1.32rem);
    background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.08), transparent 78%);
}

/* YOUR SHIP: one continuous deck plan, not ten hidden tabs. */
#panel-ship.active { display: flex; flex-direction: column }
#panel-ship > .sec-head { order: 1 }
#panel-ship > .sec-lead { order: 2 }
#panel-ship > .media-row { order: 3; margin-top: clamp(3rem, 5vw, 5rem) }
#panel-ship > .ship-deck-intro { order: 4 }
#panel-ship > .panel-next { order: 5 }
.ship-deck-intro { margin-top: clamp(3.5rem, 6vw, 6rem) }
.ship-deck-title {
    margin: 0 auto clamp(2.5rem, 4vw, 4rem);
    max-width: 13ch;
    font-family: var(--f-display);
    font-size: clamp(2rem, 4.2vw, 5rem);
    line-height: 0.96;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 0 52px rgba(var(--accent-rgb), 0.22);
}
.ship-system-grid {
    counter-reset: ship-system;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.8rem);
}
.ship-system-card {
    counter-increment: ship-system;
    position: relative;
    grid-column: auto;
    min-height: clamp(250px, 27vh, 340px);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(1.8rem, 2.8vw, 3rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 18%, rgba(var(--accent-rgb), 0.13), transparent 28%),
        linear-gradient(150deg, rgba(31,10,22,0.92), rgba(13,4,9,0.6));
    border: 1px solid rgba(var(--accent-rgb), 0.16);
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 0 100%);
}
.ship-system-card:nth-child(2), .ship-system-card:nth-child(3),
.ship-system-card:nth-child(6), .ship-system-card:nth-child(7),
.ship-system-card:nth-child(10) { grid-column: auto }
.ship-system-card:nth-child(even) { transform: none }
.ship-system-card::after {
    content: attr(data-system);
    position: absolute;
    right: 0.7rem;
    top: -0.25rem;
    font-family: var(--f-display);
    font-size: clamp(4rem, 8vw, 9rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.12);
}
.ship-system-icon {
    align-self: start;
    font-size: clamp(1.2rem, 2vw, 2rem);
    color: rgba(var(--accent-rgb), 0.72);
    filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), 0.35));
}
.ship-system-card h4 {
    margin-bottom: 0.9rem;
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.5vw, 1.55rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.ship-system-card p { max-width: 48ch; font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.72; color: var(--body-text) }
.ship-system-card ul { margin: 1.2rem 0 0; padding: 0; list-style: none }
.ship-system-card li {
    position: relative;
    padding: 0.28rem 0 0.28rem 1.15rem;
    font-family: var(--f-mono);
    font-size: clamp(0.64rem, 0.74vw, 0.78rem);
    line-height: 1.5;
    color: var(--dim);
}
.ship-system-card li::before { content: '>'; position: absolute; left: 0; color: rgba(var(--accent-rgb), 0.64) }

/* Purpose-built showcases keep each system page distinct while sharing the
   same pacing. */
#panel-nav .orrery-wrap {
    width: min(50vw, 580px);
    height: min(50vw, 580px);
    margin: clamp(3rem, 5vw, 5rem) auto clamp(3.5rem, 6vw, 6rem);
    filter: drop-shadow(0 0 70px rgba(124, 200, 255, 0.16));
}
.market-console, .gunnery-console {
    width: min(1100px, 100%);
    max-width: none;
    margin: clamp(3rem, 5vw, 5rem) auto;
    box-shadow: 0 35px 90px -48px rgba(var(--accent-rgb), 0.68);
}
.salvage-console {
    width: min(1200px, 100%);
    margin: clamp(3rem, 5vw, 5rem) auto;
    box-shadow: 0 35px 90px -48px rgba(var(--accent-rgb), 0.68);
}
.dossier {
    width: min(900px, 100%);
    max-width: none;
    margin: clamp(3rem, 5vw, 5rem) auto;
    box-shadow: 0 35px 90px -48px rgba(var(--accent-rgb), 0.68);
}
.salvage-viewport, .gunnery-stage { min-height: clamp(300px, 34vw, 520px) }
.salvage-roles { margin-bottom: clamp(3rem, 5vw, 5rem) }
#panel-trade > .clipart {
    width: min(70vw, 760px);
    max-width: none;
    margin: clamp(1.5rem, 2.5vw, 2.5rem) auto;
    filter: drop-shadow(0 0 38px rgba(255, 214, 107, 0.12));
}
#panel-trade > .section-sep { margin: clamp(1.8rem, 3vw, 3rem) 0 }
#panel-system > .viewport {
    width: min(84vw, 1600px);
    margin: clamp(3rem, 5vw, 5rem) auto clamp(4rem, 6vw, 6rem);
    box-shadow: 0 42px 100px -55px rgba(var(--accent-rgb), 0.8);
}
#panel-system > .clipart { max-width: 640px; opacity: 0.62 }
.faction-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: min(1500px, 100%);
    gap: 0.65rem;
    margin: 2rem auto;
}
.faction-badge { min-height: 108px; display: flex; align-items: center; justify-content: center }
.faction-detail.visible {
    width: min(980px, 92%);
    max-height: 500px;
    margin: 2rem auto clamp(4rem, 6vw, 6rem);
    padding: clamp(2rem, 4vw, 4rem);
}
.listening-responses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.8vw, 1.8rem);
    margin: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 6vw, 6rem);
}
.listening-response,
.listening-response:nth-child(1), .listening-response:nth-child(2),
.listening-response:nth-child(5), .listening-response:nth-child(6) { grid-column: auto; min-height: 170px; padding: clamp(1.2rem, 2.2vw, 2.2rem) }
.listening-response:nth-child(7) { grid-column: 1 / -1 }
.surge-bands { margin: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 6vw, 6rem) }

#panel-sound .instrument-wave {
    width: min(1500px, 94%);
    min-height: clamp(300px, 36vh, 440px);
    margin: clamp(3rem, 5vw, 5rem) auto clamp(4rem, 6vw, 6rem);
    box-shadow: 0 40px 100px -55px rgba(66,235,189,0.65);
}
.audio-tracks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.8rem);
    margin: clamp(3rem, 5vw, 5rem) 0;
}
.audio-track {
    grid-column: auto;
    min-height: 210px;
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(145deg, rgba(24,12,20,0.9), rgba(9,14,13,0.55));
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.audio-track:nth-child(2), .audio-track:nth-child(3) { grid-column: auto }
.audio-track:nth-child(even) { transform: none }
.audio-track-name { font-size: clamp(0.86rem, 1.25vw, 1.28rem) }

.tour-frame { display: block; width: 100%; height: 100%; min-height: 540px; border: 0; background: #07040a }

@media (max-width: 1100px) {
    .home-pillar-row { grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr); gap: 2rem }
    .home-pillar-row > .home-shot { height: min(66vh, 700px); margin-left: 0 }
    .home-cards-wide .home-card { grid-column: auto !important; transform: none !important }
    .features-grid .feature-card { grid-column: auto !important; transform: none !important }
    .ship-system-card { grid-column: auto !important; transform: none !important }
    .faction-row { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .listening-response { grid-column: auto !important }
    .listening-response:nth-child(7) { grid-column: 1 / -1 !important }
    .audio-track { grid-column: auto !important; transform: none !important }
}

@media (max-width: 820px) {
    .signal-dock {
        left: 0.55rem;
        right: 0.55rem;
        bottom: 2.35rem;
        width: auto;
        grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
        padding: 0.62rem 0.65rem 0.5rem;
    }
    .signal-dock .signal-kicker { display: none }
    .signal-dock .signal-title { font-size: 0.58rem; white-space: normal }
    .signal-dock .signal-input { font-size: 0.58rem }
    .flow-hint {
        left: 0.55rem;
        right: 0.55rem;
        bottom: 7rem;
        width: max-content;
        max-width: calc(100vw - 1.1rem);
        min-height: 38px;
        font-size: 0.52rem;
    }
    .flow-hint-track { margin-left: auto }
    .home-pillars { margin-top: 4rem }
    .home-pillars-lead { padding-left: 0; margin-bottom: 2rem; font-size: 1rem }
    .home-pillar-row { display: flex; flex-direction: column; gap: 1.5rem }
    .home-pillar-row > .home-shot { position: relative; top: auto; order: -1; width: 100%; height: min(68vh, 590px); clip-path: none }
    .home-pillar-row .home-card { min-height: 0; padding: 2rem 0 }
    .home-cards-wide { display: block; margin-top: 4rem }
    .home-cards-wide .home-card { min-height: 0; margin-bottom: 1rem; padding: 2rem 1.4rem }
    .panel:not(.panel-home):not(.panel-tour) .media-row { min-height: 0; margin: 4.5rem 0 }
    .panel:not(.panel-home):not(.panel-tour) .media-row .feature-block-title { font-size: 1.25rem }
    .features-grid, .ship-system-grid, .listening-responses, .audio-tracks { display: block }
    .features-grid .feature-card,
    .ship-system-card,
    .listening-response,
    .audio-track { min-height: 0; margin: 0 0 1rem; transform: none !important }
    .ship-system-card { display: grid; padding: 1.6rem 1.3rem }
    .ship-deck-title { margin-bottom: 2.5rem }
    #panel-nav .orrery-wrap { width: min(82vw, 520px); height: min(82vw, 520px) }
    #panel-trade > .clipart { width: min(88vw, 520px) }
    .faction-row { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .faction-badge { min-height: 82px }
    #panel-sound .instrument-wave { min-height: 300px }
    .panel:not(.panel-home):not(.panel-tour) > .feature-block { width: 100%; padding: 1.6rem 1.25rem }
}

@media (max-width: 520px) {
    .signal-dock-copy { display: none }
    .signal-dock { grid-template-columns: 1fr; grid-template-areas: 'form' 'message' }
    .flow-hint-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .flow-hint-track { width: 50px }
    .home-shot-overlay strong { font-size: 0.58rem }
    .ship-system-card { grid-template-columns: 1fr }
    .ship-system-icon { margin-bottom: 0.5rem }
}

@media (prefers-reduced-motion: reduce) {
    .home-pillar-row > .home-shot { position: relative; top: auto }
}

/* ===== 2026-08-10 COMPOSITION + INSTRUMENT PASS ===== */

/* Home: the introductory claim now shares its row with a quiet dual-view
   schematic, filling the previous dead column without competing with the
   field recording immediately below it. */
.home-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 3.5vw, 4.5rem);
    align-items: stretch;
    margin-bottom: clamp(2rem, 3vw, 3rem);
}
.home-intro-grid .home-pillars-lead {
    align-self: center;
    max-width: 76ch;
    margin: 0;
    padding-left: 0;
}
.home-dual-view {
    min-height: 250px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    color: rgba(255, 214, 107, 0.72);
    background:
        radial-gradient(circle at 50% 50%, rgba(201,160,255,0.1), transparent 34%),
        linear-gradient(145deg, rgba(29,9,21,0.72), rgba(10,4,9,0.28));
    border-top: 1px solid rgba(255,214,107,0.28);
    border-bottom: 1px solid rgba(201,160,255,0.14);
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.dual-view-chrome,
.dual-view-readout {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.16em;
}
.dual-view-chrome { border-bottom: 1px solid rgba(201,160,255,0.1) }
.dual-view-chrome em,
.dual-view-readout span:last-child { color: rgba(201,160,255,0.58); font-style: normal }
.dual-view-readout { color: rgba(236,227,214,0.34); border-top: 1px solid rgba(201,160,255,0.08) }
.dual-view-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.65rem, 1.4vw, 1.4rem);
    padding: 1.25rem;
}
.dual-view-mode { position: relative; text-align: center }
.dual-view-mode span {
    position: absolute;
    inset: 50% 0 auto;
    transform: translateY(-55%);
    font-family: var(--f-display);
    font-size: clamp(3rem, 5vw, 5.5rem);
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,214,107,0.12);
}
.dual-view-mode strong {
    position: relative;
    display: block;
    font-family: var(--f-display);
    font-size: clamp(1rem, 1.45vw, 1.45rem);
    letter-spacing: 0.17em;
    color: var(--gold);
}
.dual-view-mode small {
    position: relative;
    display: block;
    margin-top: 0.65rem;
    font-family: var(--f-mono);
    font-size: 0.44rem;
    letter-spacing: 0.12em;
    color: rgba(236,227,214,0.38);
}
.dual-view-link { display: grid; grid-template-columns: 22px auto 22px; align-items: center; gap: 0.45rem }
.dual-view-link i { height: 1px; background: linear-gradient(90deg, transparent, rgba(201,160,255,0.65)) }
.dual-view-link i:last-child { transform: scaleX(-1) }
.dual-view-link b {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-family: var(--f-mono);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    color: var(--text);
    border: 1px solid rgba(201,160,255,0.42);
    transform: rotate(45deg);
    box-shadow: 0 0 26px rgba(201,160,255,0.1);
}
.dual-view-link b span { transform: rotate(-45deg) }

/* Ship: title, premise, field manual and live interior are one opening
   composition. The image begins beside the header instead of a screen later. */
#panel-ship.active { display: block }
.ship-opening {
    display: grid;
    grid-template-columns: minmax(360px, 0.72fr) minmax(560px, 1.28fr);
    gap: clamp(2rem, 4vw, 5.5rem);
    align-items: stretch;
    padding-top: clamp(1rem, 2vw, 2rem);
}
.ship-opening-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(1rem, 2vw, 2rem) 0;
}
.ship-opening .sec-head {
    min-height: 0;
    margin: 0 0 1.2rem;
    padding-left: clamp(2rem, 5vw, 6rem);
}
.ship-opening .sec-index { left: -1rem; font-size: clamp(7rem, 12vw, 13rem) }
.ship-opening .sec-lead {
    max-width: 58ch;
    margin: 0 0 0 clamp(2rem, 5vw, 6rem);
    font-size: clamp(0.98rem, 1.05vw, 1.13rem);
}
.ship-opening .sec-lead::after { display: none !important }
.ship-opening-note {
    margin: clamp(2.2rem, 4vw, 4rem) 0 0 clamp(2rem, 5vw, 6rem);
    padding: clamp(1.2rem, 2vw, 2rem);
    background: linear-gradient(110deg, rgba(var(--accent-rgb),0.09), transparent 82%);
    border-left: 1px solid rgba(var(--accent-rgb),0.55);
}
.ship-opening-note > span {
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.2em;
    color: rgba(var(--accent-rgb),0.62);
}
.ship-opening-note h3 {
    margin: 0.7rem 0 0.7rem;
    font-family: var(--f-display);
    font-size: clamp(1.1rem, 1.7vw, 1.8rem);
    line-height: 1.12;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.ship-opening-note p { max-width: 50ch; font-size: clamp(0.9rem, 1vw, 1.04rem); line-height: 1.72 }
.ship-opening-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0 0 clamp(2rem, 5vw, 6rem);
    border-top: 1px solid rgba(var(--accent-rgb),0.16);
}
.ship-opening-stats span {
    padding: 0.8rem 0.7rem;
    font-family: var(--f-mono);
    font-size: 0.46rem;
    color: var(--faint);
    border-right: 1px solid rgba(var(--accent-rgb),0.12);
}
.ship-opening-stats strong { display: block; margin-bottom: 0.24rem; font-size: 0.82rem; color: var(--accent) }
.ship-opening-visual {
    align-self: center;
    margin: 0 max(-8rem, calc((var(--content-w) - 100vw) / 2 + 0.5rem)) 0 0;
    filter: drop-shadow(0 36px 70px rgba(0,0,0,0.42));
}
.ship-opening-visual .viewport-inner { min-height: clamp(520px, 64vh, 760px) }
.ship-opening-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015) }
.ship-opening-visual .viewport-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(10,4,9,0.35), transparent 32%), repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,0.04) 5px 7px);
}
.ship-opening-overlay {
    position: absolute;
    z-index: 4;
    left: 1.4rem;
    bottom: 1.4rem;
    display: grid;
    gap: 0.35rem;
    padding: 0.8rem 1rem;
    font-family: var(--f-mono);
    letter-spacing: 0.15em;
    background: rgba(10,4,9,0.76);
    border-left: 1px solid rgba(var(--accent-rgb),0.72);
}
.ship-opening-overlay span { font-size: 0.45rem; color: rgba(236,227,214,0.48) }
.ship-opening-overlay strong { font-size: 0.62rem; color: var(--accent) }
.ship-deck-intro { margin-top: clamp(4rem, 7vw, 7rem) }

/* Navigation: the route copy and the living orrery now establish the page
   together, echoing the disciplined two-column composition on Home. */
.nav-opening {
    display: grid;
    grid-template-columns: minmax(390px, 0.82fr) minmax(500px, 1.18fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
    margin-bottom: clamp(3rem, 5vw, 5rem);
}
.nav-opening-copy .sec-head { padding-left: clamp(2rem, 5vw, 6rem) }
.nav-opening-copy .sec-lead { margin-left: clamp(2rem, 5vw, 6rem) }
.nav-vector-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(2rem, 3vw, 3rem) 0 0 clamp(2rem, 5vw, 6rem);
    border-top: 1px solid rgba(var(--accent-rgb),0.2);
    border-bottom: 1px solid rgba(var(--accent-rgb),0.1);
}
.nav-vector-strip span {
    padding: 0.85rem 0.55rem;
    font-family: var(--f-mono);
    font-size: 0.46rem;
    color: var(--faint);
    border-right: 1px solid rgba(var(--accent-rgb),0.1);
}
.nav-vector-strip strong { display: block; margin-bottom: 0.25rem; font-size: 0.8rem; color: var(--accent) }
.nav-opening-chart {
    position: relative;
    min-height: clamp(500px, 56vh, 650px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(rgba(var(--accent-rgb),0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb),0.026) 1px, transparent 1px),
        radial-gradient(circle, rgba(var(--accent-rgb),0.085), transparent 64%);
    background-size: 40px 40px, 40px 40px, auto;
    border: 1px solid rgba(var(--accent-rgb),0.14);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
#panel-nav .nav-opening-chart .orrery-wrap {
    width: min(40vw, 540px);
    height: min(40vw, 540px);
    margin: 0;
    filter: drop-shadow(0 0 70px rgba(124,200,255,0.18));
}
.nav-chart-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.8rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--f-mono);
    font-size: 0.46rem;
    letter-spacing: 0.14em;
    color: rgba(var(--accent-rgb),0.62);
}
.nav-chart-caption em { color: var(--faint); font-style: normal }
#panel-nav > .media-row:first-of-type { margin-top: 0 }

/* Crew: selectable live roster + deck-presence map. */
.dossier {
    width: min(1180px, 100%);
    max-width: none;
    background:
        linear-gradient(rgba(var(--accent-rgb),0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb),0.025) 1px, transparent 1px),
        linear-gradient(155deg, rgba(var(--accent-rgb),0.065), rgba(20,8,14,0.48));
    background-size: 34px 34px, 34px 34px, auto;
}
.dossier.selecting .dossier-detail,
.dossier.selecting .dossier-rows { opacity: 0.28; transform: translateY(3px) }
.dossier-overview {
    display: grid;
    grid-template-columns: minmax(330px, 0.82fr) minmax(460px, 1.18fr);
    min-height: 340px;
    border-bottom: 1px solid var(--line-soft);
}
.dossier-roster {
    align-self: stretch;
    padding: 0.75rem;
    border-right: 1px solid var(--line-soft);
    border-bottom: 0;
}
button.roster-row {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    cursor: pointer;
}
button.roster-row:hover { background: rgba(var(--accent-rgb),0.075) }
.dossier-shipmap {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    color: rgba(var(--accent-rgb),0.3);
    background: radial-gradient(ellipse at 50% 52%, rgba(var(--accent-rgb),0.09), transparent 58%);
}
.shipmap-head {
    position: absolute;
    z-index: 4;
    inset: 0.8rem 1rem auto;
    display: flex;
    justify-content: space-between;
    font-family: var(--f-mono);
    font-size: 0.46rem;
    letter-spacing: 0.14em;
    color: rgba(var(--accent-rgb),0.62);
}
.shipmap-head em { color: var(--faint); font-style: normal }
.dossier-shipmap > svg { position: absolute; inset: 2.2rem 4% 0; width: 92%; height: calc(100% - 2.6rem) }
.dossier-network { position: absolute; inset: 2.2rem 4% 0 }
.crew-map-node {
    position: absolute;
    z-index: 3;
    transform: translate(-50%, -50%);
    min-width: 68px;
    padding: 0.3rem 0.45rem;
    font-family: var(--f-mono);
    text-align: left;
    color: var(--dim);
    background: rgba(9,5,9,0.78);
    border: 1px solid rgba(var(--accent-rgb),0.2);
    cursor: pointer;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.crew-map-node i {
    position: absolute;
    left: -5px;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%,-50%) rotate(45deg);
    background: rgba(var(--accent-rgb),0.58);
    box-shadow: 0 0 10px rgba(var(--accent-rgb),0.45);
}
.crew-map-node span { display: block; font-size: 0.4rem; letter-spacing: 0.14em; color: rgba(var(--accent-rgb),0.6) }
.crew-map-node strong { display: block; max-width: 10ch; overflow: hidden; font-size: 0.52rem; font-weight: 400; text-overflow: ellipsis }
.crew-map-node:hover,
.crew-map-node.active {
    z-index: 5;
    transform: translate(-50%, -50%) scale(1.06);
    color: var(--text);
    border-color: rgba(var(--accent-rgb),0.72);
    box-shadow: 0 0 24px -8px rgba(var(--accent-rgb),0.82);
}
.crew-map-node.active i { background: var(--gold); box-shadow: 0 0 14px rgba(255,214,107,0.72) }
.shipmap-scan {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.65), transparent);
    box-shadow: 0 0 16px rgba(var(--accent-rgb),0.4);
    animation: crewDeckScan 5.5s ease-in-out infinite;
}
.dossier-detail {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    padding: 1.1rem 1.35rem;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.dossier-portrait { position: relative }
.dossier-portrait::after {
    content: '';
    position: absolute;
    inset: 10px -5px;
    border: 1px solid rgba(var(--accent-rgb),0.26);
    border-radius: 50%;
    animation: crewIdentityPulse 3.2s ease-in-out infinite;
}
.dossier-portrait svg { width: 58px; height: 76px }
.dossier-name { font-size: clamp(0.9rem, 1.25vw, 1.15rem) }
.dossier-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0 2rem;
    min-height: 10rem;
    padding: 0.9rem 1.35rem 1.1rem;
    transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.dossier-history,
.dossier-snoas { padding-inline: 1.35rem }
.dossier-caption { max-width: 780px }

/* Story: a typographic VFX instrument where recovered text is visibly
   reconstructed and its provenance changes with the selected record. */
.story-relay {
    position: relative;
    margin: clamp(3rem, 5vw, 5rem) 0;
    overflow: hidden;
    background:
        linear-gradient(rgba(var(--accent-rgb),0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb),0.025) 1px, transparent 1px),
        linear-gradient(145deg, rgba(27,7,25,0.9), rgba(11,4,11,0.66));
    background-size: 28px 28px, 28px 28px, auto;
    border: 1px solid rgba(var(--accent-rgb),0.2);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    box-shadow: 0 35px 80px -50px rgba(var(--accent-rgb),0.72);
}
.story-relay::before {
    content: 'WORDS / MEMORY / ATTRIBUTION / CONSEQUENCE';
    position: absolute;
    right: -1rem;
    top: 44%;
    transform: rotate(90deg);
    transform-origin: center;
    font-family: var(--f-mono);
    font-size: 0.42rem;
    letter-spacing: 0.18em;
    color: rgba(var(--accent-rgb),0.2);
}
.story-relay.transcribing::after {
    content: '';
    position: absolute;
    z-index: 6;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0 46%, rgba(var(--accent-rgb),0.12) 50%, transparent 54%);
    animation: storyScan .75s linear infinite;
}
.story-relay-chrome,
.story-relay-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    font-family: var(--f-mono);
    font-size: 0.48rem;
    letter-spacing: 0.14em;
    color: rgba(var(--accent-rgb),0.72);
    border-bottom: 1px solid rgba(var(--accent-rgb),0.12);
}
.story-relay-chrome em { color: var(--faint); font-style: normal }
.story-relay-grid { display: grid; grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr) }
.story-relay-nav { border-right: 1px solid rgba(var(--accent-rgb),0.14) }
.story-relay-nav button {
    width: 100%;
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    grid-template-areas: 'num name' 'num meta';
    gap: 0.15rem 0.7rem;
    padding: 1.15rem 1rem;
    font: inherit;
    text-align: left;
    color: var(--dim);
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(var(--accent-rgb),0.09);
    cursor: pointer;
}
.story-relay-nav button:hover,
.story-relay-nav button.active { background: rgba(var(--accent-rgb),0.08); color: var(--text) }
.story-relay-nav button.active { box-shadow: inset 2px 0 0 var(--accent) }
.story-relay-nav button > span { grid-area: num; align-self: center; font-family: var(--f-display); font-size: 1.3rem; color: rgba(var(--accent-rgb),0.42) }
.story-relay-nav strong { grid-area: name; font-family: var(--f-cond); font-size: 0.78rem; letter-spacing: .1em; text-transform: uppercase }
.story-relay-nav small { grid-area: meta; font-family: var(--f-mono); font-size: .44rem; letter-spacing: .08em; color: var(--faint) }
.story-document {
    position: relative;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
}
.story-document::before {
    content: '“';
    position: absolute;
    left: 1rem;
    top: -1.8rem;
    font-family: Georgia, serif;
    font-size: clamp(8rem, 14vw, 15rem);
    line-height: 1;
    color: rgba(var(--accent-rgb),0.055);
}
.story-document-index {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
    font-family: var(--f-mono);
    font-size: 0.45rem;
    letter-spacing: 0.15em;
    color: rgba(var(--accent-rgb),0.46);
}
.story-document-copy {
    position: relative;
    z-index: 2;
    max-width: 68ch;
    min-height: 5.4em;
    font-size: clamp(1.05rem, 1.45vw, 1.5rem);
    line-height: 1.72;
    color: rgba(236,227,214,0.9);
    text-shadow: 0 0 30px rgba(var(--accent-rgb),0.08);
}
.story-caret {
    width: 1px;
    height: 1.25rem;
    margin-top: .4rem;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb),.72);
    animation: storyCaret 1s steps(1,end) infinite;
}
.story-document-trace { display: flex; gap: .7rem; margin-top: 1.4rem; flex-wrap: wrap }
.story-document-trace i {
    padding: .25rem .55rem;
    font-family: var(--f-mono);
    font-size: .42rem;
    letter-spacing: .13em;
    color: rgba(var(--accent-rgb),.48);
    border: 1px solid rgba(var(--accent-rgb),.14);
    font-style: normal;
}
.story-relay-footer { border-top: 1px solid rgba(var(--accent-rgb),.12); border-bottom: 0; color: var(--faint) }
.story-relay-footer b { color: var(--accent); font-weight: 400 }
#panel-story .story-grid .feature-card { position: relative; overflow: hidden }
#panel-story .story-grid .feature-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb),.62);
    transition: height .5s var(--ease);
}
#panel-story .story-grid .feature-card:hover::before { height: 100% }

/* The Listening: several restrained, independent anomalies. Nothing affects
   layout or legibility; the page simply stops feeling entirely trustworthy. */
#panel-listening { position: relative; isolation: isolate }
#panel-listening > :not(.listening-atmosphere) { position: relative; z-index: 1 }
.listening-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none }
.entropy-lens {
    position: absolute;
    width: clamp(280px, 34vw, 620px);
    aspect-ratio: 1;
    border: 1px solid rgba(201,160,255,.1);
    border-radius: 48% 52% 51% 49%;
    box-shadow: inset 0 0 80px rgba(201,160,255,.035), 0 0 100px rgba(201,160,255,.04);
    animation: listeningLens 13s ease-in-out infinite alternate;
}
.entropy-lens::before,
.entropy-lens::after { content:''; position:absolute; border:1px solid rgba(201,160,255,.075); border-radius:inherit }
.entropy-lens::before { inset: 13% }
.entropy-lens::after { inset: 31% }
.lens-a { top: 3%; right: -8% }
.lens-b { top: 42%; left: -15%; animation-delay: -7s; animation-duration: 17s }
.false-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 3px rgba(201,160,255,.6);
    animation: falseStar 6s steps(1,end) infinite;
}
.star-a { top: 18%; left: 47% }
.star-b { top: 46%; right: 14%; animation-delay: -2.1s }
.star-c { top: 71%; left: 24%; animation-delay: -4.3s }
.listening-echo {
    position: absolute;
    top: 28%;
    right: 2%;
    font-family: var(--f-mono);
    font-size: clamp(.45rem,.7vw,.7rem);
    letter-spacing: .48em;
    color: rgba(201,160,255,0);
    animation: listeningEcho 11s steps(1,end) infinite;
}
.listening-signal {
    width: min(1250px, 92%);
    margin: clamp(2.5rem, 4vw, 4rem) auto;
    padding: 1rem clamp(1rem,2vw,2rem);
    background: linear-gradient(90deg, rgba(201,160,255,.035), rgba(201,160,255,.08), rgba(201,160,255,.035));
    border-top: 1px solid rgba(201,160,255,.18);
    border-bottom: 1px solid rgba(201,160,255,.1);
}
.listening-signal-meta,
.listening-signal-status { display:flex; justify-content:space-between; gap:1rem; font-family:var(--f-mono); font-size:.46rem; letter-spacing:.14em; color:rgba(201,160,255,.58) }
.listening-signal-meta em { color:var(--faint); font-style:normal }
.listening-signal-status strong { color:rgba(236,227,214,.64); font-weight:400 }
.listening-wave {
    height: 70px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(3px,.65vw,10px);
    margin:.45rem 0;
    overflow:hidden;
}
.listening-wave i {
    width:2px;
    height:var(--h,20%);
    background:linear-gradient(180deg,transparent,rgba(201,160,255,.75),transparent);
    box-shadow:0 0 9px rgba(201,160,255,.45);
    animation:listeningBar 2.4s ease-in-out infinite alternate;
}
.listening-wave i:nth-child(3n+1){--h:64%;animation-delay:-.4s}.listening-wave i:nth-child(3n+2){--h:28%;animation-delay:-1.1s}.listening-wave i:nth-child(4n){--h:88%;animation-delay:-1.7s}.listening-wave i:nth-child(5n){--h:42%;animation-delay:-.8s}
.listening-viewport .viewport-inner::after {
    content:'';
    position:absolute;
    z-index:4;
    inset:0;
    pointer-events:none;
    background:repeating-linear-gradient(0deg, transparent 0 42px, rgba(201,160,255,.08) 43px, transparent 46px);
    mix-blend-mode:screen;
    animation:listeningBand 8s linear infinite;
}
#panel-listening.active .listening-viewport img { animation:listeningImage 9s steps(1,end) infinite }
.listening-response { position:relative; overflow:hidden; transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease) }
.listening-response::after { content:'07.3'; position:absolute; right:.7rem; bottom:.25rem; font-family:var(--f-display); font-size:2.4rem; color:transparent; -webkit-text-stroke:1px rgba(201,160,255,.07) }
.listening-response:hover { transform:translateY(-3px); background:rgba(201,160,255,.055) }

@keyframes crewDeckScan { 0%,8%{top:12%;opacity:0} 18%{opacity:.8} 74%{opacity:.5} 86%,100%{top:94%;opacity:0} }
@keyframes crewIdentityPulse { 0%,100%{transform:scale(.88);opacity:.2} 50%{transform:scale(1.08);opacity:.68} }
@keyframes storyScan { from{transform:translateY(-55%)} to{transform:translateY(55%)} }
@keyframes storyCaret { 0%,48%{opacity:1} 49%,100%{opacity:0} }
@keyframes listeningLens { from{transform:rotate(-5deg) scale(.94);border-radius:48% 52% 51% 49%} to{transform:rotate(9deg) scale(1.08);border-radius:55% 45% 43% 57%} }
@keyframes falseStar { 0%,72%,76%,100%{opacity:.16;transform:translate(0)} 73%{opacity:1;transform:translate(19px,-7px)} 75%{opacity:.65;transform:translate(-8px,3px)} }
@keyframes listeningEcho { 0%,82%,86%,100%{color:rgba(201,160,255,0)} 83%{color:rgba(201,160,255,.16)} 85%{color:rgba(201,160,255,.04)} }
@keyframes listeningBar { from{transform:scaleY(.35);opacity:.28} to{transform:scaleY(1.15);opacity:.9} }
@keyframes listeningBand { from{transform:translateY(-48px)} to{transform:translateY(48px)} }
@keyframes listeningImage { 0%,89%,93%,100%{transform:translate(0) scale(1.01);filter:none} 90%{transform:translate(2px,-1px) scale(1.012);filter:hue-rotate(16deg)} 91%{transform:translate(-3px,1px) scale(1.01);filter:saturate(.7)} 92%{transform:translate(1px) scale(1.014);filter:none} }

@media (max-width: 1100px) {
    .home-intro-grid { grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); gap:2rem }
    .ship-opening { grid-template-columns:minmax(320px,.85fr) minmax(430px,1.15fr); gap:2rem }
    .ship-opening-visual { margin-right:0 }
    .ship-opening-visual .viewport-inner { min-height:clamp(480px,60vh,650px) }
    .nav-opening { grid-template-columns:minmax(330px,.9fr) minmax(420px,1.1fr); gap:2rem }
    .nav-opening-chart { min-height:500px }
    #panel-nav .nav-opening-chart .orrery-wrap { width:min(46vw,500px); height:min(46vw,500px) }
    .dossier-overview { grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr) }
}

@media (max-width: 820px) {
    .home-intro-grid { display:flex; flex-direction:column; gap:1.4rem }
    .home-dual-view { min-height:210px }
    .home-intro-grid .home-pillars-lead { font-size:1rem }
    .ship-opening,
    .nav-opening { display:flex; flex-direction:column; gap:2rem }
    .ship-opening .sec-head,
    .nav-opening-copy .sec-head { padding-left:0 }
    .ship-opening .sec-lead,
    .ship-opening-note,
    .ship-opening-stats,
    .nav-opening-copy .sec-lead,
    .nav-vector-strip { margin-left:0 }
    .ship-opening-visual { width:100%; order:2 }
    .ship-opening-visual .viewport-inner { min-height:min(68vh,590px) }
    .ship-opening-stats { grid-template-columns:repeat(3,minmax(0,1fr)) }
    .nav-opening-chart { width:100%; min-height:min(88vw,520px) }
    #panel-nav .nav-opening-chart .orrery-wrap { width:min(78vw,460px); height:min(78vw,460px) }
    .dossier-overview { display:flex; flex-direction:column }
    .dossier-roster { border-right:0; border-bottom:1px solid var(--line-soft) }
    .dossier-shipmap { min-height:310px }
    .dossier-rows { grid-template-columns:1fr }
    .story-relay-grid { grid-template-columns:1fr }
    .story-relay-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-right:0; border-bottom:1px solid rgba(var(--accent-rgb),.14) }
    .story-relay-nav button { grid-template-columns:1fr; grid-template-areas:'num' 'name' 'meta'; padding:.8rem; border-right:1px solid rgba(var(--accent-rgb),.09) }
    .story-document { min-height:320px; padding:2rem 1.2rem }
    .story-document-index { display:none }
    .listening-signal { width:100% }
}

@media (max-width: 520px) {
    .dual-view-stage { grid-template-columns:1fr auto 1fr; padding:1rem .6rem }
    .dual-view-mode small { display:none }
    .dual-view-link { grid-template-columns:8px auto 8px }
    .dual-view-link b { width:34px; height:34px }
    .ship-opening-stats span,
    .nav-vector-strip span { padding:.65rem .35rem; font-size:.4rem }
    .dossier-overview { min-height:0 }
    .dossier-shipmap { min-height:270px }
    .crew-map-node { min-width:54px; padding:.22rem .32rem }
    .crew-map-node strong { font-size:.45rem }
    .dossier-detail { grid-template-columns:52px 1fr; padding:1rem }
    .dossier-badges { grid-column:1 / -1; max-width:none; text-align:left }
    .dossier-portrait svg { width:46px; height:62px }
    .story-relay-nav strong { font-size:.62rem }
    .story-relay-nav small { display:none }
    .story-relay-chrome,
    .story-relay-footer,
    .listening-signal-meta,
    .listening-signal-status { font-size:.4rem }
    .story-relay-footer span:last-child,
    .listening-signal-meta em { display:none }
}

@media (prefers-reduced-motion: reduce) {
    .shipmap-scan,
    .dossier-portrait::after,
    .story-caret,
    .story-relay.transcribing::after,
    .entropy-lens,
    .false-star,
    .listening-echo,
    .listening-wave i,
    .listening-viewport .viewport-inner::after,
    #panel-listening.active .listening-viewport img { animation:none !important }
    .shipmap-scan { top:55%; opacity:.35 }
    .false-star { opacity:.18 }
}

/* ===== 2026-08-10 SHAPE + GLASS PASS =====
   The interface now borrows shapes from hull plating, orbit plots and
   equipment labels instead of repeating one rectangular card everywhere.
   Frosting is reserved for overlays and instrument surfaces where the
   nebula can plausibly remain visible through the hardware. */
:root {
    --glass-dark: rgba(16, 5, 12, 0.62);
    --glass-mid: rgba(38, 14, 29, 0.46);
    --glass-glint: rgba(255, 255, 255, 0.075);
    --glass-edge: rgba(var(--accent-rgb), 0.2);
}

/* Persistent chrome: actual translucent glass, with a bright incident edge
   and enough dark fill to preserve contrast over the moving star field. */
.console-header,
.subnav,
.signal-dock,
.flow-hint {
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    box-shadow:
        inset 0 1px 0 var(--glass-glint),
        inset 0 -1px 0 rgba(0, 0, 0, 0.32),
        0 18px 46px -30px rgba(0, 0, 0, 0.92);
}
.console-header {
    background:
        linear-gradient(112deg, rgba(30, 8, 22, 0.76), rgba(12, 4, 10, 0.54) 58%, rgba(var(--accent-rgb), 0.055));
}
.subnav {
    width: max-content;
    max-width: calc(100vw - 2 * var(--wide-gutter));
    justify-self: center;
    padding-inline: 0.42rem;
    background: linear-gradient(90deg, rgba(12,4,10,.48), rgba(42,14,31,.62), rgba(12,4,10,.48));
    border: 1px solid rgba(var(--accent-rgb), .11);
    border-radius: 0 0 999px 999px;
    clip-path: inset(0 round 0 0 999px 999px);
}
.signal-dock {
    background:
        linear-gradient(115deg, rgba(44, 13, 31, 0.7), rgba(15, 5, 12, 0.5)),
        linear-gradient(90deg, var(--glass-glint), transparent 32%);
    clip-path: polygon(0 9px, 9px 0, 38% 0, calc(38% + 8px) 7px, calc(100% - 16px) 7px, 100% 23px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.signal-dock::before { background: rgba(16,5,12,.82) }
.flow-hint {
    background: linear-gradient(100deg, rgba(13,4,9,.72), rgba(var(--accent-rgb),.085));
    border-radius: 999px 8px 8px 999px;
    clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 7px 50%);
    padding-left: 1.1rem;
}

/* Frosted instrument panes. Each component retains its own colour and
   content treatment; these declarations only add optical depth. */
.home-dual-view,
.ship-opening-note,
.nav-opening-chart,
.panel:not(.panel-home):not(.panel-tour) > .feature-block,
.lore-quote,
.feature-card,
.home-card,
.ship-system-card,
.market-console,
.salvage-console,
.command-cell,
.dossier,
.listening-signal,
.listening-response,
.surge-band,
.story-relay,
.audio-track,
.faction-detail.visible {
    -webkit-backdrop-filter: blur(13px) saturate(125%);
    backdrop-filter: blur(13px) saturate(125%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 1px 0 0 rgba(255,255,255,.022),
        0 28px 65px -48px rgba(var(--accent-rgb), .75);
}
.feature-card,
.home-card {
    background:
        linear-gradient(132deg, rgba(255,255,255,.055), transparent 24%),
        linear-gradient(158deg, rgba(var(--accent-rgb), .07), rgba(15,5,12,.42) 72%);
}
.market-console,
.salvage-console,
.dossier,
.story-relay {
    background-color: rgba(15, 5, 12, .48);
}
.nav-opening-chart,
.home-dual-view,
.listening-signal {
    background-color: rgba(20, 6, 16, .34);
}
.ship-opening-note {
    background:
        linear-gradient(112deg, rgba(255,255,255,.05), transparent 26%),
        linear-gradient(110deg, rgba(var(--accent-rgb),.11), rgba(13,4,9,.22) 82%);
}

/* Editorial cards: three silhouettes rotate through the grid. The concave
   steps read as interlocking hull plates; the larger cuts avoid the generic
   'rounded SaaS card' look. */
.feature-card,
.home-card { --shape: polygon(0 0, calc(100% - 27px) 0, 100% 27px, 100% 100%, 25px 100%, 0 calc(100% - 25px)); clip-path: var(--shape) }
.features-grid > .feature-card:nth-child(3n + 2),
.home-cards > .home-card:nth-child(3n + 2) {
    --shape: polygon(18px 0, 100% 0, 100% calc(100% - 31px), calc(100% - 31px) 100%, 0 100%, 0 18px);
}
.features-grid > .feature-card:nth-child(3n),
.home-cards > .home-card:nth-child(3n) {
    --shape: polygon(0 0, 44% 0, calc(44% + 12px) 12px, 100% 12px, 100% 100%, 18px 100%, 18px calc(100% - 12px), 0 calc(100% - 12px));
}
.feature-card::before,
.home-card::before {
    left: 18px;
    width: calc(100% - 45px);
}
.home-cards-wide > .home-card:nth-child(even) {
    --shape: polygon(0 20px, 20px 0, 100% 0, 100% calc(100% - 18px), calc(72% - 10px) calc(100% - 18px), 72% 100%, 0 100%);
}

/* Ship modules alternate orientation and gain a protruding system tab. */
.ship-system-card {
    background:
        linear-gradient(135deg, rgba(255,255,255,.045), transparent 23%),
        radial-gradient(circle at 15% 18%, rgba(var(--accent-rgb), .14), transparent 28%),
        linear-gradient(150deg, rgba(31,10,22,.76), rgba(13,4,9,.44));
    clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 14% 100%, calc(14% - 13px) calc(100% - 13px), 0 calc(100% - 13px));
}
.ship-system-card:nth-child(even) {
    clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 18px), calc(55% + 12px) calc(100% - 18px), 55% 100%, 0 100%, 0 28px);
}
.ship-system-card:nth-child(4n + 3) {
    clip-path: polygon(0 14px, 14px 0, 72% 0, calc(72% + 14px) 14px, 100% 14px, 100% 100%, 0 100%);
}
.ship-system-card::before {
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    top: 24%;
    width: 8px;
    height: 64px;
    background: linear-gradient(var(--accent), rgba(var(--accent-rgb),.08));
    box-shadow: 0 0 18px rgba(var(--accent-rgb),.38);
}
.ship-system-card:nth-child(even)::before { left: auto; right: 0; top: auto; bottom: 22% }

/* The route plot becomes a double-bevel instrument rather than another box. */
.nav-opening-chart {
    clip-path: polygon(34px 0, calc(100% - 58px) 0, 100% 58px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 34px);
    border-radius: 72px 4px 54px 4px;
}
.home-dual-view {
    border-radius: 48px 5px 48px 5px;
    clip-path: polygon(34px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 34px), calc(100% - 34px) 100%, 22px 100%, 0 calc(100% - 22px), 0 34px);
}
.ship-opening-note {
    border-left-width: 2px;
    border-radius: 0 44px 4px 0;
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%);
}

/* Long-form notes get a different silhouette from cards: a stepped field
   sheet for the main observation, then a tapered voice shard for quotations. */
.panel:not(.panel-home):not(.panel-tour) > .feature-block {
    background:
        linear-gradient(125deg, rgba(255,255,255,.045), transparent 22%),
        linear-gradient(105deg, rgba(var(--accent-rgb),.085), rgba(15,5,12,.26) 72%);
    border-left-width: 2px;
    clip-path: polygon(0 0, 72% 0, calc(72% + 13px) 13px, 100% 13px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
.panel:not(.panel-home):not(.panel-tour) > .feature-block:nth-of-type(even) {
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 28% 100%, calc(28% - 13px) calc(100% - 13px), 0 calc(100% - 13px), 0 22px);
}
.lore-quote {
    background:
        linear-gradient(105deg, rgba(255,255,255,.045), transparent 25%),
        linear-gradient(100deg, rgba(var(--accent-rgb),.095), rgba(14,5,11,.2) 82%);
    border-radius: 4px 38px 38px 4px;
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 9px 50%);
    padding-left: clamp(2rem, 3.5vw, 3.5rem);
}
.section-sep { position: relative }
.section-sep::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%,-50%) rotate(45deg);
    background: rgba(15,5,12,.88);
    border: 1px solid rgba(var(--accent-rgb),.38);
    box-shadow: 0 0 16px rgba(var(--accent-rgb),.22);
}

/* Faction and Listening elements use smaller, more personal silhouettes. */
.faction-badge {
    background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(20,6,14,.52));
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    clip-path: polygon(12% 0, 88% 0, 100% 30%, 100% 70%, 88% 100%, 12% 100%, 0 70%, 0 30%);
}
.faction-detail.visible {
    background:
        radial-gradient(ellipse at 50% 0, rgba(var(--accent-rgb),.1), transparent 58%),
        rgba(15,5,12,.46);
    border-radius: 50% 50% 18px 18px / 34px 34px 18px 18px;
    clip-path: polygon(5% 0, 95% 0, 100% 25%, 100% 100%, 0 100%, 0 25%);
}
.listening-responses { gap: clamp(.9rem, 1.8vw, 1.8rem) }
.listening-response {
    background:
        linear-gradient(135deg, rgba(255,255,255,.04), transparent 23%),
        linear-gradient(155deg, rgba(201,160,255,.06), rgba(13,4,11,.4));
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.listening-response:nth-child(even) {
    clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 22px);
}
.listening-response:nth-child(3n) {
    clip-path: polygon(0 12px, 12px 0, 66% 0, calc(66% + 14px) 14px, 100% 14px, 100% 100%, 0 100%);
}
.listening-response:hover { transform: translateY(-3px) rotate(.18deg) }
.listening-signal {
    border-radius: 999px;
    clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%, 0 50%);
    padding-inline: clamp(2rem,4vw,4rem);
}
.surge-bands { gap: .5rem; background: transparent; border: 0 }
.surge-band {
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(18,6,12,.52));
    border: 1px solid rgba(var(--accent-rgb),.12);
    border-top-width: 2px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 10px 50%);
    padding-inline: 1.35rem;
}
.surge-band:nth-child(even) { transform: translateY(10px) }

/* Operational widgets have their own silhouettes: trapezoid controls,
   lozenges for crew locations, and record tabs that slot into the relay. */
.command-cell {
    clip-path: polygon(9px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 9px);
    background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(var(--accent-rgb),.055), rgba(13,4,9,.34));
}
.command-cell:nth-child(even) { transform: translateY(10px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px)) }
.dossier {
    clip-path: polygon(18px 0, calc(100% - 42px) 0, 100% 42px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.crew-map-node {
    border-radius: 999px 8px 8px 999px;
    background: linear-gradient(100deg, rgba(var(--accent-rgb),.12), rgba(9,5,9,.66));
    -webkit-backdrop-filter: blur(8px) saturate(125%);
    backdrop-filter: blur(8px) saturate(125%);
}
.dossier-tab.active { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%) }
.story-relay {
    clip-path: polygon(0 26px, 26px 0, 68% 0, calc(68% + 20px) 20px, calc(100% - 28px) 20px, 100% 48px, 100% 100%, 0 100%);
}
.story-relay-nav button.active {
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
    background: linear-gradient(90deg, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),.025));
}
.story-document-trace i { border-radius: 999px; background: rgba(var(--accent-rgb),.035) }
.audio-track {
    background:
        linear-gradient(135deg, rgba(255,255,255,.05), transparent 25%),
        linear-gradient(145deg, rgba(24,12,20,.72), rgba(9,14,13,.42));
    clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 18% 100%, calc(18% - 14px) calc(100% - 14px), 0 calc(100% - 14px));
}
.audio-track:nth-child(even) {
    clip-path: polygon(24px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 24px);
}

/* Calls to action now point forward physically instead of sitting in boxes. */
.panel-next-btn {
    padding-inline: 1.7em 2.2em;
    background: linear-gradient(100deg, rgba(255,214,107,.045), rgba(255,214,107,.13));
    border: 0;
    clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 10px 50%);
    box-shadow: inset 0 0 0 1px rgba(255,214,107,.3);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
}
.hero-proof-rail {
    overflow: hidden;
    background: linear-gradient(100deg, rgba(21,7,14,.67), rgba(46,15,32,.54), rgba(18,6,13,.64));
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 65% 100%, calc(65% - 12px) calc(100% - 12px), 0 calc(100% - 12px));
}
.hero-proof-rail button:nth-child(even) { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%) }

@media (max-width: 820px) {
    .subnav { max-width: 100vw; border-radius: 0; clip-path: none }
    .feature-card,
    .home-card,
    .ship-system-card,
    .listening-response,
    .audio-track { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%) !important }
    .nav-opening-chart { border-radius: 34px 4px 34px 4px }
    .surge-bands { display: grid; grid-template-columns: 1fr 1fr }
    .surge-band:nth-child(even) { transform: none }
    .story-relay { clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%) }
    .panel:not(.panel-home):not(.panel-tour) > .feature-block { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%) !important }
}

@media (max-width: 520px) {
    .console-header,
    .subnav,
    .signal-dock,
    .flow-hint { -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%) }
    .listening-signal { border-radius: 28px; clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%); padding-inline: 1.4rem }
    .surge-bands { grid-template-columns: 1fr }
    .faction-detail.visible { clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px); border-radius: 0 }
    .hero-proof-rail { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) }
}

/* ===== 2026-08-10 SOUNDSCAPE RESONANCE PASS =====
   Soundscape opens as a playable shipboard instrument. The scope receives
   live frequency data from the selected recording; CSS supplies the quieter
   orbit, glass and signal layers around that canvas. */
#panel-sound {
    --sound-rgb: 66,235,189;
    --sound-energy: .08;
}
.sound-opening {
    display: grid;
    grid-template-columns: minmax(380px, .78fr) minmax(620px, 1.22fr);
    gap: clamp(2rem, 5vw, 6.5rem);
    align-items: center;
    min-height: min(820px, calc(100vh - 9rem));
    margin-bottom: clamp(4rem, 7vw, 7rem);
}
.sound-opening-copy {
    min-width: 0;
    padding-left: clamp(1rem, 5vw, 6rem);
}
.sound-opening .sec-head {
    min-height: 0;
    margin: 0 0 1.4rem;
    padding: 0;
}
.sound-opening .sec-index {
    left: max(-4.6rem, -5vw);
    font-size: clamp(7rem, 12vw, 14rem);
    color: transparent;
    -webkit-text-stroke-color: rgba(var(--sound-rgb), .15);
}
.sound-opening .sec-lead {
    max-width: 60ch;
    margin: 0;
    text-align: left;
    font-size: clamp(1rem, 1.08vw, 1.16rem);
    line-height: 1.82;
}
.sound-opening .sec-lead::after { display: none !important }
.sound-signature {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1px;
    margin-top: clamp(2rem,3vw,3rem);
    overflow: hidden;
    border-top: 1px solid rgba(var(--sound-rgb),.22);
    border-bottom: 1px solid rgba(var(--sound-rgb),.11);
    background: rgba(var(--sound-rgb),.08);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.sound-signature > span {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'mark title' 'mark sub';
    gap: 0 .55rem;
    padding: .9rem .65rem;
    background: rgba(10,10,12,.68);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    backdrop-filter: blur(12px) saturate(130%);
}
.sound-signature i {
    grid-area: mark;
    align-self: center;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(var(--sound-rgb),.68);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(var(--sound-rgb),.3);
}
.sound-signature span:nth-child(2) i { border-radius: 0; transform: rotate(45deg) }
.sound-signature span:nth-child(3) i { width: 13px; height: 7px; border-radius: 50% }
.sound-signature strong {
    grid-area: title;
    font-family: var(--f-cond);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgb(var(--sound-rgb));
}
.sound-signature em {
    grid-area: sub;
    font-family: var(--f-mono);
    font-size: .42rem;
    font-style: normal;
    letter-spacing: .08em;
    color: var(--faint);
    text-transform: uppercase;
}

.sound-console {
    position: relative;
    min-width: 0;
    min-height: clamp(580px, 66vh, 730px);
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    overflow: hidden;
    color: rgba(var(--sound-rgb),.78);
    background:
        linear-gradient(rgba(var(--sound-rgb),.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--sound-rgb),.025) 1px, transparent 1px),
        radial-gradient(circle at 50% 48%, rgba(var(--sound-rgb),.1), transparent 48%),
        linear-gradient(145deg, rgba(21,8,17,.72), rgba(5,12,12,.48));
    background-size: 32px 32px, 32px 32px, auto, auto;
    border: 1px solid rgba(var(--sound-rgb),.22);
    clip-path: polygon(30px 0, 68% 0, calc(68% + 18px) 18px, calc(100% - 34px) 18px, 100% 52px, 100% 100%, 16% 100%, calc(16% - 16px) calc(100% - 16px), 0 calc(100% - 16px), 0 30px);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 0 90px rgba(var(--sound-rgb),.03),
        0 45px 100px -58px rgba(var(--sound-rgb),.78);
    transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.sound-console::before {
    content: '';
    position: absolute;
    z-index: 5;
    left: 3%;
    right: 14%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), rgba(var(--sound-rgb),.75), transparent);
    pointer-events: none;
}
.sound-console.is-playing {
    border-color: rgba(var(--sound-rgb),.5);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 110px rgba(var(--sound-rgb),.055), 0 48px 110px -52px rgba(var(--sound-rgb),.95);
}
.sound-console-chrome,
.sound-console-readout {
    position: relative;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1rem;
    font-family: var(--f-mono);
    font-size: .46rem;
    letter-spacing: .15em;
    color: rgba(var(--sound-rgb),.64);
    background: rgba(8,7,10,.28);
}
.sound-console-chrome { border-bottom: 1px solid rgba(var(--sound-rgb),.1) }
.sound-console-chrome em { color: var(--faint); font-style: normal }
.sound-console-readout { border-top: 1px solid rgba(var(--sound-rgb),.1); color: rgba(236,227,214,.32) }
.sound-console-readout span:nth-child(2) { color: rgba(var(--sound-rgb),.68) }
.sound-scope {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, transparent 49.9%, rgba(var(--sound-rgb),.08) 50%, transparent 50.1%),
        linear-gradient(transparent 49.9%, rgba(var(--sound-rgb),.08) 50%, transparent 50.1%),
        radial-gradient(circle, transparent 0 23%, rgba(var(--sound-rgb),.07) 23.2% 23.4%, transparent 23.6% 36%, rgba(var(--sound-rgb),.05) 36.2% 36.4%, transparent 36.6%);
}
#sound-spectrum { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none }
.sound-orbit {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 49%;
    translate: -50% -50%;
    border: 1px solid rgba(var(--sound-rgb),.11);
    border-radius: 50%;
    pointer-events: none;
}
.sound-orbit i {
    position: absolute;
    left: 50%;
    top: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(var(--sound-rgb));
    box-shadow: 0 0 12px rgba(var(--sound-rgb),.8);
}
.orbit-a { width: 47%; aspect-ratio: 1; animation: soundOrbit 19s linear infinite }
.orbit-b { width: 62%; aspect-ratio: 1; transform: rotate(28deg); border-style: dashed; animation: soundOrbitReverse 31s linear infinite }
.orbit-b i { left: 15%; background: var(--gold) }
.orbit-c { width: 78%; aspect-ratio: 1; transform: rotate(-18deg); opacity: .55; animation: soundOrbit 47s linear infinite }
.orbit-c i { left: 80%; background: var(--purple) }
.sound-core {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 49%;
    width: clamp(150px, 23vw, 230px);
    aspect-ratio: 1;
    translate: -50% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid rgba(var(--sound-rgb),.2);
    border-radius: 50%;
    background: radial-gradient(circle at 42% 36%, rgba(255,255,255,.07), rgba(12,8,11,.88) 62%, rgba(var(--sound-rgb),.11));
    box-shadow: inset 0 0 36px rgba(var(--sound-rgb),.08), 0 0 42px rgba(var(--sound-rgb),.08);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sound-console.is-playing .sound-core {
    border-color: rgba(var(--sound-rgb),.58);
    box-shadow: inset 0 0 42px rgba(var(--sound-rgb),.13), 0 0 54px rgba(var(--sound-rgb),.18);
    animation: soundCoreBreath 2.8s ease-in-out infinite;
}
.sound-core span,
.sound-core small {
    font-family: var(--f-mono);
    font-size: clamp(.38rem,.52vw,.5rem);
    letter-spacing: .14em;
    line-height: 1.45;
    color: rgba(var(--sound-rgb),.56);
}
.sound-core strong {
    max-width: 13ch;
    font-family: var(--f-display);
    font-size: clamp(.82rem,1.22vw,1.28rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
    text-shadow: 0 0 24px rgba(var(--sound-rgb),.25);
}
.sound-core small { max-width: 25ch; color: var(--faint) }
.sound-coordinate {
    position: absolute;
    z-index: 4;
    font-family: var(--f-mono);
    font-size: .42rem;
    letter-spacing: .16em;
    color: rgba(var(--sound-rgb),.36);
}
.coord-a { left: 1rem; top: 1rem }
.coord-b { right: 1rem; bottom: 1rem }
.sound-sweep {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 49%;
    width: 41%;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(var(--sound-rgb),.4), transparent);
    opacity: .2;
    animation: soundSweep 12s linear infinite;
}
.sound-console.is-playing .sound-sweep { opacity: .6; animation-duration: 4.8s }
.sound-transport {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1rem;
    font-family: var(--f-mono);
    font-size: .48rem;
    color: rgba(236,227,214,.45);
    border-top: 1px solid rgba(var(--sound-rgb),.1);
}
.sound-transport > span:last-child { text-align: right }
.sound-progress {
    display: block;
    width: 100%;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.sound-progress::-webkit-progress-bar { background: rgba(var(--sound-rgb),.1) }
.sound-progress::-webkit-progress-value {
    background: linear-gradient(90deg, rgb(var(--sound-rgb)), var(--gold));
    box-shadow: 0 0 12px rgba(var(--sound-rgb),.45);
    transition: width .2s linear;
}
.sound-progress::-moz-progress-bar {
    background: linear-gradient(90deg, rgb(var(--sound-rgb)), var(--gold));
    box-shadow: 0 0 12px rgba(var(--sound-rgb),.45);
}

#panel-sound > .media-row { align-items: stretch }
#panel-sound > .media-row .feature-block { align-self: center }
.sound-drift-visual .viewport-inner { min-height: clamp(420px,46vh,600px) }
.sound-drift-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.sound-drift-visual .viewport-inner::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5,14,13,.35), transparent 35%),
        repeating-linear-gradient(0deg, transparent 0 45px, rgba(var(--sound-rgb),.065) 46px, transparent 48px);
    mix-blend-mode: screen;
    animation: soundFieldScan 8s linear infinite;
}
.sound-field-readout {
    position: absolute;
    z-index: 5;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .65rem .8rem;
    font-family: var(--f-mono);
    font-size: .44rem;
    letter-spacing: .13em;
    color: rgba(var(--sound-rgb),.68);
    background: rgba(6,12,11,.56);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 7px 50%);
}
.sound-field-readout i { height: 1px; background: linear-gradient(90deg, rgba(var(--sound-rgb),.12), rgba(var(--sound-rgb),.7), rgba(var(--sound-rgb),.12)) }
.sound-field-readout strong { color: var(--gold); font-weight: 400 }
.sound-archive-intro { margin-bottom: 0 !important }

#panel-sound .audio-tracks {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: clamp(1rem,1.8vw,1.8rem);
    margin: clamp(2rem,4vw,4rem) 0 clamp(4rem,6vw,6rem);
}
#panel-sound .audio-track {
    position: relative;
    min-height: 260px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 1rem 1.1rem;
    padding: clamp(1.5rem,2.6vw,2.8rem);
    overflow: hidden;
    color: rgba(var(--track-rgb),.8);
    background:
        linear-gradient(128deg, rgba(255,255,255,.055), transparent 22%),
        radial-gradient(circle at 88% 28%, rgba(var(--track-rgb),.12), transparent 30%),
        linear-gradient(145deg, rgba(22,9,17,.74), rgba(7,13,12,.48));
    border-color: rgba(var(--track-rgb),.19);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
#panel-sound .audio-track:nth-child(odd) { clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 18% 100%, calc(18% - 14px) calc(100% - 14px), 0 calc(100% - 14px)) }
#panel-sound .audio-track:nth-child(even) { clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 26px) }
#panel-sound .audio-track::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: clamp(1rem,3vw,3rem);
    top: 50%;
    width: clamp(120px,15vw,190px);
    aspect-ratio: 1;
    translate: 0 -50%;
    border-radius: 50%;
    border: 1px solid rgba(var(--track-rgb),.12);
    background:
        radial-gradient(circle, transparent 0 8%, rgba(var(--track-rgb),.2) 8.5% 9%, transparent 9.5% 22%, rgba(var(--track-rgb),.1) 22.5% 23%, transparent 23.5% 43%, rgba(var(--track-rgb),.08) 43.5% 44%, transparent 44.5%),
        repeating-radial-gradient(circle, transparent 0 4px, rgba(var(--track-rgb),.025) 5px 6px);
    opacity: .55;
    transition: opacity .35s var(--ease), filter .35s var(--ease);
}
#panel-sound .audio-track::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(transparent, rgba(var(--track-rgb),.7), transparent);
    opacity: .32;
}
#panel-sound .audio-track > * { position: relative; z-index: 2 }
.audio-track-index {
    grid-row: 1 / 3;
    align-self: start;
    display: grid;
    justify-items: center;
    gap: .3rem;
    min-width: 42px;
    padding-right: .8rem;
    border-right: 1px solid rgba(var(--track-rgb),.15);
}
.audio-track-index span { font-family: var(--f-display); font-size: clamp(1.5rem,2.4vw,2.7rem); line-height: 1; color: rgba(var(--track-rgb),.4) }
.audio-track-index em { writing-mode: vertical-rl; font-family: var(--f-mono); font-size: .4rem; font-style: normal; letter-spacing: .16em; color: rgba(var(--track-rgb),.48) }
#panel-sound .audio-track-header { align-self: start; margin: 0; padding-right: 20% }
#panel-sound .audio-play-btn {
    width: 52px;
    height: 52px;
    color: rgb(var(--track-rgb));
    border-color: rgba(var(--track-rgb),.42);
    background: rgba(var(--track-rgb),.07);
    box-shadow: inset 0 0 18px rgba(var(--track-rgb),.04);
}
#panel-sound .audio-play-btn:hover,
#panel-sound .audio-play-btn.playing { border-color: rgba(var(--track-rgb),.8); background: rgba(var(--track-rgb),.14); box-shadow: 0 0 24px -5px rgba(var(--track-rgb),.7) }
#panel-sound .audio-track-name { font-size: clamp(1rem,1.42vw,1.5rem); color: rgb(var(--track-rgb)) }
#panel-sound .audio-track-label { margin-top: .2rem; text-transform: uppercase; color: rgba(var(--track-rgb),.48) }
#panel-sound .audio-track-desc { align-self: center; max-width: 47ch; padding-right: 18%; font-size: clamp(.96rem,1.08vw,1.12rem); line-height: 1.72 }
.audio-track-footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .8rem;
    font-family: var(--f-mono);
    font-size: .44rem;
    letter-spacing: .14em;
    color: rgba(var(--track-rgb),.45);
}
.audio-track-footer i { height: 2px; background: linear-gradient(90deg, rgba(var(--track-rgb),.45), rgba(var(--track-rgb),.06)); transform-origin: left center }
#panel-sound .audio-track:hover,
#panel-sound .audio-track.selected { border-color: rgba(var(--track-rgb),.48); transform: translateY(-3px); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 70px -48px rgba(var(--track-rgb),.82) }
#panel-sound .audio-track.playing { border-color: rgba(var(--track-rgb),.8); box-shadow: inset 0 0 55px rgba(var(--track-rgb),.06), 0 34px 80px -42px rgba(var(--track-rgb),.95) }
#panel-sound .audio-track.playing::before { opacity: .95; filter: drop-shadow(0 0 18px rgba(var(--track-rgb),.22)); animation: soundRecordSpin 12s linear infinite }
#panel-sound .audio-track.playing .audio-track-footer i { animation: soundTrackPulse 1.4s ease-in-out infinite }

@keyframes soundOrbit { to { rotate: 360deg } }
@keyframes soundOrbitReverse { to { rotate: -360deg } }
@keyframes soundSweep { to { rotate: 360deg } }
@keyframes soundCoreBreath { 0%,100% { transform: scale(.98) } 50% { transform: scale(1.025) } }
@keyframes soundFieldScan { from { transform: translateY(-48px) } to { transform: translateY(48px) } }
@keyframes soundRecordSpin { to { rotate: 360deg } }
@keyframes soundTrackPulse { 0%,100% { transform: scaleX(.35); opacity: .35 } 50% { transform: scaleX(1); opacity: 1 } }

@media (max-width: 1100px) {
    .sound-opening { grid-template-columns: minmax(330px,.78fr) minmax(500px,1.22fr); gap: 2rem }
    .sound-opening-copy { padding-left: 1rem }
    .sound-console { min-height: 560px }
    #panel-sound .audio-track-desc { padding-right: 10% }
}
@media (max-width: 820px) {
    .sound-opening { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin-bottom: 4rem }
    .sound-opening-copy { padding-left: 0 }
    .sound-opening .sec-index { left: -1rem }
    .sound-console { width: 100%; min-height: 530px; clip-path: polygon(20px 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%, 0 20px) }
    .sound-scope { min-height: 360px }
    .sound-core { width: min(43vw,190px) }
    #panel-sound .audio-tracks { display: block }
    #panel-sound .audio-track { min-height: 230px; margin-bottom: 1rem; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%) !important }
}
@media (max-width: 520px) {
    .sound-opening .sec-title { font-size: clamp(2rem,11vw,3rem); letter-spacing: .035em }
    .sound-signature { grid-template-columns: 1fr }
    .sound-signature > span { grid-template-columns: auto auto 1fr; grid-template-areas: 'mark title sub'; align-items: center }
    .sound-console { min-height: 470px; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%) }
    .sound-scope { min-height: 300px }
    .sound-console-chrome span { max-width: 18ch }
    .sound-console-readout span:first-child { display: none }
    .sound-core { width: 162px; padding: 1rem }
    .sound-core small { display: none }
    .orbit-a { width: 54% }
    .orbit-b { width: 72% }
    .orbit-c { width: 90% }
    #panel-sound .audio-track { grid-template-columns: auto 1fr; padding: 1.35rem 1rem }
    #panel-sound .audio-track-header { padding-right: 0 }
    #panel-sound .audio-track-desc { padding-right: 0 }
    #panel-sound .audio-track::before { right: -2rem; width: 135px; opacity: .3 }
    .audio-track-index { min-width: 32px; padding-right: .55rem }
    .audio-track-index span { font-size: 1.4rem }
    #panel-sound .audio-play-btn { width: 44px; height: 44px }
    .sound-field-readout span { display: none }
    .sound-field-readout { grid-template-columns: 1fr auto }
}

@media (prefers-reduced-motion: reduce) {
    .sound-orbit,
    .sound-sweep,
    .sound-console.is-playing .sound-core,
    .sound-drift-visual .viewport-inner::after,
    #panel-sound .audio-track.playing::before,
    #panel-sound .audio-track.playing .audio-track-footer i { animation: none !important }
}

/* ===== 2026-08-12 CONVERSION + MOBILE RESTRAINT =====
   The 3D tour is repeated only at the ends of the major content groups. On
   mobile, the newsletter becomes a compact disclosure instead of a permanent
   form, leaving the reading area clear until the visitor asks to open it. */
.panel-next-major {
    align-items: stretch;
    gap: clamp(0.75rem, 1.2vw, 1.1rem);
    flex-wrap: wrap;
}
.panel-primary-cta {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-width: min(100%, 300px);
    padding: 0.8rem 1.05rem;
    color: var(--gold);
    text-decoration: none;
    background: linear-gradient(110deg, rgba(255,214,107,.16), rgba(201,160,255,.11));
    border: 1px solid rgba(255,214,107,.48);
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 16px 36px -28px rgba(255,214,107,.82);
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 7px 50%);
    transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.panel-primary-cta:hover {
    background: linear-gradient(110deg, rgba(255,214,107,.24), rgba(201,160,255,.16));
    border-color: rgba(255,214,107,.78);
    box-shadow: inset 0 1px rgba(255,255,255,.07), 0 20px 44px -25px rgba(255,214,107,.9);
    transform: translateY(-1px);
}
.panel-primary-cta:focus-visible { outline: 2px solid rgba(255,214,107,.8); outline-offset: 3px }
.panel-primary-icon {
    font-family: var(--f-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(255,214,107,.46);
}
.panel-primary-copy { display: grid; gap: 0.14rem; min-width: 0 }
.panel-primary-label {
    font-family: var(--f-cond);
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.panel-primary-meta {
    font-family: var(--f-mono);
    font-size: 0.5rem;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(201,160,255,.74);
}
.panel-primary-cta:hover .panel-next-arrow { transform: translateX(4px) }
.panel-next-final .panel-primary-cta { min-width: min(100%, 360px) }

.signal-dock-toggle {
    display: none;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.72rem 1rem;
    font-family: var(--f-cond);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    background: linear-gradient(110deg, rgba(44,13,31,.94), rgba(24,7,17,.94));
    border: 1px solid rgba(255,214,107,.42);
    box-shadow: 0 12px 34px -22px rgba(255,214,107,.72);
    cursor: pointer;
}
.signal-dock-toggle-icon {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    font-size: 1rem;
    line-height: 1;
    transition: transform .25s var(--ease);
}
.signal-dock.is-open .signal-dock-toggle-icon { transform: rotate(45deg) }

@media (max-width: 820px) {
    .signal-dock {
        left: auto;
        right: 0.55rem;
        bottom: calc(1.9rem + 0.55rem);
        width: auto;
        display: block;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        clip-path: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .signal-dock::before { display: none }
    .signal-dock-toggle { display: inline-flex }
    .signal-dock > .signal-dock-copy,
    .signal-dock > .signal-form,
    .signal-dock > .signal-msg { display: none }

    .signal-dock.is-open {
        left: 0.55rem;
        right: 0.55rem;
        width: auto;
        padding: 0.65rem;
        background: linear-gradient(115deg, rgba(44,13,31,.97), rgba(15,5,12,.96));
        border: 1px solid rgba(255,214,107,.36);
        box-shadow: 0 18px 48px -22px rgba(0,0,0,.95), 0 0 30px -20px rgba(255,214,107,.68);
        clip-path: polygon(0 9px, 9px 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
        -webkit-backdrop-filter: blur(14px) saturate(125%);
        backdrop-filter: blur(14px) saturate(125%);
    }
    .signal-dock.is-open .signal-dock-toggle {
        width: 100%;
        justify-content: space-between;
        min-height: 38px;
        margin-bottom: 0.55rem;
        padding: 0.45rem 0.65rem;
        background: rgba(255,214,107,.055);
        box-shadow: none;
    }
    .signal-dock.is-open > .signal-dock-copy { display: block; margin: 0 0 0.5rem 0.15rem }
    .signal-dock.is-open > .signal-form { display: flex }
    .signal-dock.is-open > .signal-msg:not(:empty) { display: block; margin-top: 0.45rem; text-align: left }
    .signal-dock.is-open .signal-title { font-size: 0.68rem; white-space: normal }
    .signal-dock.is-open .signal-input { min-height: 42px; font-size: 0.68rem }
    .signal-dock.is-open .signal-btn { min-height: 42px; font-size: 0.6rem }

    .flow-hint {
        left: 0.55rem;
        right: auto;
        bottom: calc(1.9rem + 0.55rem);
        width: max-content;
        max-width: calc(100vw - 10.5rem);
        min-height: 44px;
    }
    .flow-hint-prefix { display: none }
    .flow-hint-mobile-prefix { display: inline }
}

@media (max-width: 600px) {
    .panel-next-major { flex-direction: column; align-items: stretch }
    .panel-primary-cta,
    .panel-next-major .panel-next-btn { width: 100%; min-width: 0 }
    .panel-next-major .panel-next-btn { justify-content: center }
}

@media (prefers-reduced-motion: reduce) {
    .panel-primary-cta,
    .signal-dock-toggle-icon { transition: none }
}

/* ===== 2026-08-12 TYPOGRAPHY NORMALISATION =====
   The prose scale already reads comfortably. This pass brings functional
   microcopy—navigation, controls, status, captions and live instruments—onto
   a consistent compact scale without making decorative telemetry compete
   with headings or body text. */
:root {
    --t-label: clamp(0.68rem, calc(0.58rem + 0.12vw), 0.82rem);
}

.header-tagline,
.header-sub { font-size: 0.64rem }
.nav-item { font-size: clamp(0.72rem, 0.88vw, 0.9rem) }
.subnav-item { font-size: clamp(0.7rem, 0.82vw, 0.78rem) }
.status-text { font-size: clamp(0.62rem, 0.76vw, 0.68rem) }
.status-meta { font-size: clamp(0.58rem, 0.68vw, 0.62rem) }
.status-term-btn { font-size: 0.6rem }

.hero-sub { font-size: clamp(0.7rem, 1.05vw, 0.82rem) }
.hero-cue,
.tour-cta-sub,
.panel-primary-meta { font-size: 0.62rem }
.home-label { font-size: clamp(0.6rem, 0.7vw, 0.64rem) }
.hero-media-readout span,
.home-shot-overlay span { font-size: 0.6rem }
.hero-media-readout strong,
.home-shot-overlay strong { font-size: clamp(0.7rem, 0.8vw, 0.82rem) }
.home-shot-route em { font-size: 0.6rem }
.dual-view-chrome,
.dual-view-readout,
.dual-view-link b { font-size: 0.6rem }
.dual-view-mode small,
.lore-src { font-size: 0.62rem }

.viewport-caption strong { font-size: clamp(0.66rem, 0.78vw, 0.72rem) }
.viewport-caption span,
.viewport-zoom-hint { font-size: 0.62rem }
.instrument::after { font-size: 0.58rem }
.panel-primary-meta { line-height: 1.5 }

.ship-opening-note > span,
.ship-opening-stats span,
.ship-opening-overlay span,
.nav-vector-strip span,
.nav-chart-caption { font-size: 0.6rem }
.ship-opening-overlay strong { font-size: 0.7rem }
.ship-system-card li { font-size: clamp(0.72rem, 0.76vw, 0.8rem) }

.market-console-head,
.salvage-console-head { font-size: clamp(0.62rem, 0.72vw, 0.68rem) }
.market-stat span,
.salvage-readout span { font-size: 0.6rem }
.market-log,
.salvage-log { font-size: clamp(0.66rem, 0.76vw, 0.7rem) }
.market-good { font-size: clamp(0.68rem, 0.78vw, 0.72rem) }
.market-good-held { font-size: 0.64rem }
.market-btn,
.market-travel-btn,
.salvage-survey-btn { font-size: 0.7rem }
.salvage-readout strong { font-size: clamp(0.68rem, 0.82vw, 0.74rem) }
.salvage-role strong { font-size: 0.7rem }
.salvage-role span { font-size: 0.66rem }

.command-cell-domain { font-size: 0.62rem }
.command-cell-state { font-size: 0.6rem }
.ai-profile-name { font-size: clamp(0.68rem, 0.76vw, 0.72rem) }

.dossier-title { font-size: clamp(0.76rem, 0.9vw, 0.84rem) }
.dossier-view { font-size: 0.64rem }
button.roster-row,
.roster-row { font-size: 0.7rem }
.dossier-activity { font-size: 0.68rem }
.dossier-badges { font-size: 0.64rem }
.dossier-tab { font-size: 0.76rem }
.drow-name { font-size: 0.68rem }
.drow-val { font-size: 0.7rem }
.drow-detail { font-size: 0.62rem }
.drow-priority { font-size: 0.66rem }
.dossier-history,
.dossier-snoas { font-size: 0.68rem }
.dossier-caption { font-size: 0.62rem }
.dossier-recruit { font-size: 0.7rem }
.shipmap-head { font-size: 0.6rem }
.crew-map-node span { font-size: 0.55rem }
.crew-map-node strong { font-size: 0.66rem }

.faction-badge { font-size: clamp(0.68rem, 0.78vw, 0.74rem) }
.listening-response strong { font-size: 0.68rem }
.surge-band span { font-size: 0.6rem }
.listening-echo { font-size: clamp(0.55rem, 0.68vw, 0.68rem) }
.listening-signal-meta,
.listening-signal-status { font-size: 0.6rem }

.story-relay-chrome,
.story-relay-footer { font-size: 0.6rem }
.story-relay-nav strong { font-size: 0.74rem }
.story-relay-nav small,
.story-document-index,
.story-document-trace i { font-size: 0.6rem }

.sound-signature em,
.sound-console-chrome,
.sound-console-readout,
.sound-core span,
.sound-core small,
.sound-coordinate,
.sound-transport,
.sound-field-readout,
.audio-track-index em,
.audio-track-footer { font-size: 0.6rem }
.audio-track-label { font-size: 0.68rem }

@media (max-width: 820px) {
    .nav-item {
        min-height: 42px;
        padding-inline: 0.58rem;
        font-size: 0.68rem;
    }
    .subnav-item {
        min-height: 36px;
        padding-inline: 0.7rem;
        font-size: 0.7rem;
    }
    .status-term-btn { font-size: 0.6rem }
    .signal-dock.is-open .signal-title,
    .signal-dock.is-open .signal-input { font-size: 0.7rem }
    .signal-dock.is-open .signal-btn { font-size: 0.66rem }
}

@media (max-width: 520px) {
    .ship-opening-stats span,
    .nav-vector-strip span { font-size: 0.58rem }
    .crew-map-node strong { font-size: 0.64rem }
    .story-relay-nav strong { font-size: 0.72rem }
    .story-relay-chrome,
    .story-relay-footer,
    .listening-signal-meta,
    .listening-signal-status { font-size: 0.58rem }
}