/* GLYPHS OF THE UNSPOKEN — kurreth.com
   Modern adaptive design — GOTU-verse aesthetic */

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

/* ── Design tokens ──
   Retinted 2026-07 to match the GOTUverse Registry (/wiki) visual identity:
   void-black archive-terminal ground, warm paper text, blood-red single accent.
   Variable NAMES are unchanged from the prior cyan/space palette so every rule
   below this block still resolves correctly — only values changed. */
:root {
    /* Void ground (was cool blue-black space, now warm archive-black) */
    --space-deep:    #0a0908;
    --space-mid:     #131110;
    --space-surface: #16130f;

    /* Header height used for scroll offsets and hero sizing */
    --header-height: 58px;

    /* Faction palette — matches /wiki/registry.css exactly */
    --archive:       #5b8fa8;
    --archive-dim:   rgba(91, 143, 168, 0.12);
    --archive-glow:  rgba(91, 143, 168, 0.25);
    --severed:       #9a3324;
    --severed-dim:   rgba(154, 51, 36, 0.12);
    --severed-glow:  rgba(154, 51, 36, 0.24);
    --interpreter:   #8a6fae;
    --interpreter-dim: rgba(138, 111, 174, 0.12);
    --interpreter-glow: rgba(138, 111, 174, 0.24);
    --riftborn:      #d8d4c9;
    --riftborn-dim:  rgba(216, 212, 201, 0.10);
    --riftborn-glow: rgba(216, 212, 201, 0.20);
    --remnant:       #b3271e;
    --remnant-dim:   rgba(179, 39, 30, 0.10);
    --remnant-glow:  rgba(179, 39, 30, 0.28);

    /* Primary accent — was cyan, now the Registry's blood-red */
    --cyan:          #b3271e;
    --cyan-dim:      rgba(179, 39, 30, 0.12);
    --cyan-border:   rgba(179, 39, 30, 0.30);
    --purple:        #8a6fae;
    --purple-dim:    rgba(138, 111, 174, 0.12);

    /* Whites — retargeted from pure white onto the Registry's warm paper tone,
       ratios preserved from the original WCAG AA pass on the new --space-deep
       --w78 ≈ 11:1  --w62 ≈ 8:1  --w48 ≈ 5:1 against #0a0908 */
    --w100: #e8dfd0;
    --w70:  rgba(232,223,208,0.82);
    --w45:  rgba(232,223,208,0.66);
    --w25:  rgba(232,223,208,0.50);
    --w10:  rgba(232,223,208,0.10);
    --w06:  rgba(232,223,208,0.06);
    --w03:  rgba(232,223,208,0.03);

    /* Glass surface */
    --glass-bg:     rgba(232,223,208,0.04);
    --glass-border: rgba(232,223,208,0.09);
    --glass-blur:   12px;

    /* Typography */
    --mono: "SF Mono", "JetBrains Mono", "Fira Mono", "Cascadia Code", "Menlo", "Consolas", monospace;
    --display: Georgia, "Iowan Old Style", "Palatino Linotype", serif;

    /* Layout */
    --content-max: 1080px;
    --content-narrow: 720px;
    --gutter: clamp(20px, 5vw, 48px);

    /* Transitions */
    --ease: cubic-bezier(0.22, 0.68, 0, 1.2);
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
}

/* ── Keyframes ── */

@keyframes heroBreath {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%       { opacity: 0.80; transform: scale(1.04); }
}

@keyframes starShimmer {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 0.9; }
}

@keyframes signalPulse {
    0%   { opacity: 1; }
    50%  { opacity: 0.35; }
    100% { opacity: 1; }
}

@keyframes scanline {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes revealUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(179, 39, 30,0.15); }
    50%       { box-shadow: 0 0 28px rgba(179, 39, 30,0.35); }
}

@keyframes revealItem {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes vtFadeOut {
    to { opacity: 0; transform: scale(0.99) translateY(-6px); }
}

@keyframes vtFadeIn {
    from { opacity: 0; transform: scale(0.99) translateY(6px); }
}

/* ── View Transitions API — smooth page navigation ── */

@view-transition { navigation: auto; }

::view-transition-old(root) {
    animation: 0.28s ease-in both vtFadeOut;
}

::view-transition-new(root) {
    animation: 0.32s ease-out both vtFadeIn;
}

/* ── Base ── */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--space-deep);
    color: var(--w70);
    font-family: var(--mono);
    font-size: clamp(0.9rem, 1.5vw, 0.9375rem);  /* min 14.4px — WCAG 1.4.4 */
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Scroll reveal — JS-driven baseline, CSS scroll-driven as enhancement ── */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Progressive enhancement: replace JS observer with native scroll-driven animation */
@supports (animation-timeline: view()) {
    @media not (prefers-reduced-motion: reduce) {
        .reveal {
            transform: none;
            opacity: 1;
            transition: none;
            animation: revealItem linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 28%;
        }
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY SYSTEM
   ─────────────────────────────────────────────────────────────────────────────

   A. User-adjustable overrides (applied via html.* classes, set by a11y panel)
      • text-large / text-xlarge   — larger base font size
      • font-readable / font-dyslexia — alternate typefaces
      • contrast-high / contrast-ultra — boosted palette
      • spacing-wide — increased line height and letter spacing
      • motion-none — disables all animations and transitions

   B. Focus-visible ring (WCAG 2.4.7 Focus Visible)
   C. Touch target minimums (WCAG 2.5.5)
   D. prefers-contrast: more
   E. forced-colors (Windows High Contrast)
   F. Accessibility panel UI
   ───────────────────────────────────────────────────────────────────────────── */

/* ── A. User overrides ── */

/* Text size */
html.text-large  { font-size: 19px; }
html.text-xlarge { font-size: 23px; }

/* Font family — overrides the --mono variable used everywhere */
html.font-readable {
    --mono: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
html.font-dyslexia {
    --mono: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Contrast boost */
html.contrast-high {
    --w70:  rgba(255,255,255,0.94);
    --w45:  rgba(255,255,255,0.84);
    --w25:  rgba(255,255,255,0.72);
    --glass-border: rgba(255,255,255,0.16);
}

html.contrast-ultra {
    --w70:  rgba(255,255,255,1.00);
    --w45:  rgba(255,255,255,0.94);
    --w25:  rgba(255,255,255,0.86);
    --cyan:  #ff6b5c;
    --glass-border: rgba(255,255,255,0.30);
    --glass-bg: rgba(255,255,255,0.07);
}

/* Spacing */
html.spacing-wide body {
    line-height: 2.1;
}

html.spacing-wide p,
html.spacing-wide li,
html.spacing-wide .glyph-lore,
html.spacing-wide .faction-description,
html.spacing-wide .transmission-body,
html.spacing-wide .board-desc,
html.spacing-wide .prose p {
    letter-spacing: 0.015em;
}

/* Reduce motion — near-zero durations instead of display:none so layout is preserved */
html.motion-none *,
html.motion-none *::before,
html.motion-none *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
}

/* ── B. Focus-visible ring ── */

*:focus { outline: none; }

*:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 3px;
}

button:focus-visible,
.back-to-top:focus-visible,
.a11y-trigger:focus-visible,
.media-lightbox-close:focus-visible,
.nav-toggle:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 50%;
}

.nav a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
    border-radius: 2px;
}

/* ── C. Touch targets ── */

.filter-tab,
.media-tab,
.nav-toggle {
    min-width: 44px;
    min-height: 44px;
}

.nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* ── D. prefers-contrast: more ── */

@media (prefers-contrast: more) {
    :root {
        --w70:  rgba(255,255,255,0.95);
        --w45:  rgba(255,255,255,0.88);
        --w25:  rgba(255,255,255,0.78);
        --cyan:  #ff6b5c;
        --cyan-border: rgba(255,107,92,0.60);
        --glass-border: rgba(255,255,255,0.30);
    }

    .site-header { border-bottom-color: rgba(255,255,255,0.30); }

    .glyph-cell,
    .faction-card,
    .transmission-card,
    .board-card,
    .feature-cell { border-color: rgba(255,255,255,0.25); }
}

/* ── E. forced-colors (Windows High Contrast) ── */

@media (forced-colors: active) {
    .site-header,
    .glyph-cell,
    .faction-card,
    .transmission-card,
    .board-card,
    .btn-primary,
    .btn-secondary,
    .filter-tab,
    .media-tab,
    .a11y-trigger,
    .back-to-top {
        forced-color-adjust: auto;
    }

    .hero::before,
    .hero::after {
        forced-color-adjust: none;
        opacity: 0.12;
    }
}

/* ── F. Accessibility panel ── */

@keyframes a11yIn {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.a11y-trigger {
    position: fixed;
    bottom: calc(clamp(20px, 4vw, 32px) + 52px + env(safe-area-inset-bottom, 0px));
    right: clamp(16px, 3vw, 28px);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 6, 14, 0.92);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--w45);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    z-index: 300;
}

.a11y-trigger:hover,
.a11y-trigger[aria-expanded="true"] {
    background: var(--cyan-dim);
    border-color: var(--cyan-border);
    color: var(--cyan);
}

.a11y-panel {
    position: fixed;
    bottom: calc(clamp(20px, 4vw, 32px) + 110px + env(safe-area-inset-bottom, 0px));
    right: clamp(16px, 3vw, 28px);
    width: min(268px, calc(100vw - 32px));
    background: rgba(6, 8, 18, 0.97);
    border: 1px solid var(--cyan-border);
    border-radius: 10px;
    padding: 14px;
    z-index: 301;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.65), 0 0 28px rgba(179, 39, 30,0.07);
    transform-origin: bottom right;
    animation: a11yIn 0.2s var(--ease-out) both;
}

/* Mobile: slide up as bottom sheet */
@media (max-width: 480px) {
    .a11y-panel {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 85dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px 16px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        transform-origin: bottom center;
    }
}

.a11y-panel[hidden] { display: none; }

.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.a11y-panel-title {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cyan);
}

.a11y-panel-close {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--w45);
    font-family: var(--mono);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.a11y-panel-close:hover {
    border-color: var(--cyan-border);
    color: var(--cyan);
}

.a11y-group {
    margin-bottom: 10px;
}

.a11y-group-label {
    font-size: 0.4375rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--w25);
    margin-bottom: 5px;
}

.a11y-row {
    display: flex;
    gap: 4px;
}

.a11y-btn {
    flex: 1;
    min-width: 0;
    padding: 5px 6px;
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--w45);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    text-align: center;
}

/* Text-size buttons: show scaled "A" */
.a11y-btn[data-key="textSize"][data-val="default"]  { font-size: 0.5625rem; }
.a11y-btn[data-key="textSize"][data-val="large"]    { font-size: 0.6875rem; }
.a11y-btn[data-key="textSize"][data-val="xlarge"]   { font-size: 0.8125rem; }

.a11y-btn:hover {
    background: var(--w06);
    color: var(--w70);
}

.a11y-btn--active,
.a11y-btn[aria-pressed="true"] {
    background: var(--cyan-dim);
    border-color: var(--cyan-border);
    color: var(--cyan);
}

.a11y-divider {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 10px 0;
}

.a11y-reset {
    width: 100%;
    padding: 6px;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 0.4375rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--w25);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.a11y-reset:hover {
    border-color: rgba(255,87,34,0.35);
    color: var(--severed);
    background: rgba(255,87,34,0.06);
}

/* ── Header ── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 18px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(5, 6, 14, 0.82);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
}

.logo {
    font-size: clamp(0.65rem, 1.5vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--cyan);
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--cyan);
    transform: rotate(45deg);
    flex-shrink: 0;
    animation: signalPulse 3s ease-in-out infinite;
}

.logo:hover {
    color: var(--w100);
}

.nav {
    display: flex;
    gap: clamp(14px, 3vw, 32px);
    list-style: none;
}

.nav a {
    font-size: clamp(0.575rem, 1.2vw, 0.6875rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w45);
    text-decoration: none;
    transition: color 0.15s;
    position: relative;
    white-space: nowrap;
}

.nav a::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s var(--ease-out);
}

.nav a:hover {
    color: var(--w100);
}

.nav a:hover::after {
    transform: scaleX(1);
}

/* ── Layout ── */

main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
    z-index: 1;
}

/* ── Footer ── */

.site-footer {
    border-top: 1px solid var(--glass-border);
    padding: clamp(24px, 4vw, 32px) var(--gutter);
    margin-top: clamp(60px, 10vw, 100px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(5,6,14,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

.footer-links {
    display: flex;
    gap: 24px;
    list-style: none;
    flex-wrap: wrap;
}

.footer-links a {
    font-size: clamp(0.575rem, 1.2vw, 0.625rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w25);
    text-decoration: none;
    transition: color 0.15s;
}

.footer-links a:hover {
    color: var(--w70);
}

.footer-copy {
    font-size: clamp(0.575rem, 1.2vw, 0.625rem);
    letter-spacing: 0.12em;
    color: var(--w25);
}

/* ── Hero — full viewport, content vertically centred ── */

.hero {
    min-height: calc(100svh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: clamp(40px, 6svh, 80px);
    padding-inline: 0;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
}

/* Centred atmospheric glow — no corners, no blobs */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 25% 50%, rgba(77,208,225,0.055) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 75% 50%, rgba(124,77,255,0.045) 0%, transparent 65%);
    pointer-events: none;
    animation: heroBreath 10s ease-in-out infinite;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Fine star-dot pattern — pure CSS, no canvas */
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 0.8px, transparent 0.8px),
        radial-gradient(circle at 34% 72%, rgba(77,208,225,0.55)  0, rgba(77,208,225,0.55)  0.8px, transparent 0.8px),
        radial-gradient(circle at 58%  9%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 0.8px, transparent 0.8px),
        radial-gradient(circle at 78% 41%, rgba(255,255,255,0.30) 0, rgba(255,255,255,0.30) 0.8px, transparent 0.8px),
        radial-gradient(circle at 90% 85%, rgba(124,77,255,0.50)  0, rgba(124,77,255,0.50)  0.8px, transparent 0.8px),
        radial-gradient(circle at 22% 55%, rgba(255,255,255,0.20) 0, rgba(255,255,255,0.20) 0.8px, transparent 0.8px),
        radial-gradient(circle at 45% 30%, rgba(255,255,255,0.40) 0, rgba(255,255,255,0.40) 0.8px, transparent 0.8px),
        radial-gradient(circle at 67% 63%, rgba(77,208,225,0.40)  0, rgba(77,208,225,0.40)  0.8px, transparent 0.8px),
        radial-gradient(circle at  5% 90%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 0.8px, transparent 0.8px),
        radial-gradient(circle at 82% 14%, rgba(255,255,255,0.30) 0, rgba(255,255,255,0.30) 0.8px, transparent 0.8px),
        radial-gradient(circle at 15% 44%, rgba(124,77,255,0.35)  0, rgba(124,77,255,0.35)  0.8px, transparent 0.8px),
        radial-gradient(circle at 52% 80%, rgba(255,255,255,0.20) 0, rgba(255,255,255,0.20) 0.8px, transparent 0.8px),
        radial-gradient(circle at 70% 22%, rgba(255,255,255,0.35) 0, rgba(255,255,255,0.35) 0.8px, transparent 0.8px),
        radial-gradient(circle at 38% 50%, rgba(77,208,225,0.30)  0, rgba(77,208,225,0.30)  0.8px, transparent 0.8px),
        radial-gradient(circle at 92% 58%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 0.8px, transparent 0.8px),
        radial-gradient(circle at  3% 33%, rgba(255,255,255,0.30) 0, rgba(255,255,255,0.30) 0.8px, transparent 0.8px),
        radial-gradient(circle at 62% 47%, rgba(124,77,255,0.40)  0, rgba(124,77,255,0.40)  0.8px, transparent 0.8px),
        radial-gradient(circle at 29% 92%, rgba(255,255,255,0.20) 0, rgba(255,255,255,0.20) 0.8px, transparent 0.8px),
        radial-gradient(circle at 48% 15%, rgba(77,208,225,0.45)  0, rgba(77,208,225,0.45)  0.8px, transparent 0.8px),
        radial-gradient(circle at 85% 70%, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 0.8px, transparent 0.8px);
    pointer-events: none;
    animation: heroBreath 16s ease-in-out infinite reverse;
}

.hero-signal {
    font-size: clamp(0.55rem, 1.1vw, 0.625rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: signalPulse 4s ease-in-out infinite;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.hero-signal::before {
    content: "";
    display: inline-block;
    width: clamp(18px, 3vw, 32px);
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}

.hero-title {
    font-size: clamp(1.6rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: clamp(0.06em, 1.5vw, 0.14em);
    text-transform: uppercase;
    color: var(--w100);
    line-height: 1.1;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    text-wrap: balance;
    /* Text glow */
    text-shadow: 0 0 40px rgba(179, 39, 30,0.18), 0 0 80px rgba(179, 39, 30,0.08);
}

.hero-subtitle {
    font-size: clamp(0.6rem, 1.3vw, 0.6875rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--w25);
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.hero-body {
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.90;
    color: var(--w70);
    max-width: min(580px, 100%);
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}

.hero-body p + p {
    margin-top: 1em;
}

.cta-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* ── Buttons ── */

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(12px, 2vw, 14px) clamp(20px, 3.5vw, 30px);
    background: var(--cyan-dim);
    border: 1px solid var(--cyan-border);
    border-radius: 6px;
    color: var(--cyan);
    font-family: var(--mono);
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(179, 39, 30,0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.2s;
}

.btn-primary:hover {
    background: rgba(179, 39, 30, 0.20);
    border-color: rgba(179, 39, 30, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(179, 39, 30,0.20);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: clamp(12px, 2vw, 14px) clamp(20px, 3.5vw, 30px);
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--w45);
    font-family: var(--mono);
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    cursor: pointer;
}

.btn-secondary:hover {
    background: var(--glass-bg);
    color: var(--w70);
    border-color: var(--w25);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* ── Sections ── */

/* Compensate for sticky header when hash-navigating */
section[id],
.page-hero {
    scroll-margin-top: calc(var(--header-height) + 16px);
}

.section {
    padding-block: clamp(56px, 8svh, 96px);
    border-bottom: 1px solid var(--glass-border);
    /* Each section starts on its own visual stage */
    position: relative;
}

.section-label {
    font-size: clamp(0.55rem, 1.1vw, 0.6rem);
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-label::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    background: currentColor;
    flex-shrink: 0;
}

.section-heading {
    font-size: clamp(1rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--w100);
    margin-bottom: 16px;
    text-wrap: balance;
}

.section-body {
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    line-height: 1.85;
    color: var(--w45);
    max-width: min(600px, 100%);
}

/* ── Launch announcement ── */

.announcement {
    background:
        radial-gradient(ellipse 70% 100% at 50% 0%, rgba(179, 39, 30,0.06) 0%, transparent 70%);
}

.announcement-tagline {
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    color: var(--w70);
    font-style: italic;
    margin-bottom: 32px;
    max-width: min(600px, 100%);
}

.announcement-transmission {
    max-width: min(680px, 100%);
    border-left-color: var(--purple);
}

.announcement-transmission::before {
    background: linear-gradient(135deg, var(--purple-dim), transparent 70%);
}

.announcement-datestamp {
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--w100);
    margin-bottom: 16px;
    position: relative;
    text-shadow: 0 0 30px rgba(140,61,204,0.30);
}

.announcement-transmission .transmission-text {
    font-style: normal;
    color: var(--w70);
}

.announcement-transmission .transmission-text + .transmission-text {
    margin-top: 14px;
}

.announcement-transmission .transmission-text strong {
    color: var(--cyan);
    font-weight: 700;
}

.announcement-cta {
    margin-top: 32px;
}

.section-body p + p {
    margin-top: 1em;
}

/* ── Feature grid ── */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1px;
    margin-top: 36px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
}

.feature-cell {
    padding: clamp(18px, 3vw, 26px) clamp(16px, 2.5vw, 22px);
    background: var(--glass-bg);
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    position: relative;
    overflow: hidden;
}

.feature-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-border), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.feature-cell:hover {
    background: rgba(179, 39, 30,0.06);
    border-color: var(--cyan-border);
}

.feature-cell:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: clamp(0.55rem, 1.1vw, 0.625rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 10px;
}

.feature-name {
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--w70);
    margin-bottom: 8px;
}

.feature-desc {
    font-size: clamp(0.7rem, 1.4vw, 0.75rem);
    line-height: 1.70;
    color: var(--w25);
}

/* ── Faction strip ── */

.faction-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
    gap: 1px;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.faction-cell {
    padding: clamp(16px, 2.5vw, 20px) clamp(14px, 2vw, 18px);
    border-left: 2px solid transparent;
    background: var(--glass-bg);
    transition: background 0.2s, transform 0.15s;
    cursor: default;
}

.faction-cell[data-faction="archive"]     { border-color: var(--archive); }
.faction-cell[data-faction="severed"]     { border-color: var(--severed); }
.faction-cell[data-faction="interpreter"] { border-color: var(--interpreter); }
.faction-cell[data-faction="riftborn"]    { border-color: var(--riftborn); }

.faction-cell[data-faction="archive"]:hover     { background: var(--archive-dim); }
.faction-cell[data-faction="severed"]:hover     { background: var(--severed-dim); }
.faction-cell[data-faction="interpreter"]:hover { background: var(--interpreter-dim); }
.faction-cell[data-faction="riftborn"]:hover    { background: var(--riftborn-dim); }

.faction-name {
    font-size: clamp(0.625rem, 1.4vw, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.faction-cell[data-faction="archive"]     .faction-name { color: var(--archive); }
.faction-cell[data-faction="severed"]     .faction-name { color: var(--severed); }
.faction-cell[data-faction="interpreter"] .faction-name { color: var(--interpreter); }
.faction-cell[data-faction="riftborn"]    .faction-name { color: var(--riftborn); }

.faction-doctrine {
    font-size: clamp(0.625rem, 1.3vw, 0.6875rem);
    line-height: 1.65;
    color: var(--w25);
    font-style: italic;
}

/* ── Transmission block ── */

.transmission {
    margin-top: 36px;
    padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 24px);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--cyan);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 6px 6px 0;
    position: relative;
    overflow: hidden;
}

.transmission::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cyan-dim), transparent 70%);
    pointer-events: none;
}

.transmission-tag {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 12px;
    opacity: 0.65;
    position: relative;
}

.transmission-text {
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    line-height: 1.80;
    color: var(--w45);
    font-style: italic;
    position: relative;
}

/* ── Lattice diagram ── */

.lattice-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.lattice-node {
    padding: clamp(18px, 3vw, 24px) clamp(14px, 2vw, 18px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s;
    min-width: 0;
}

.lattice-node[data-state="stable"] {
    background: linear-gradient(135deg, rgba(179, 39, 30,0.08) 0%, rgba(179, 39, 30,0.04) 100%);
    border: 1px solid rgba(179, 39, 30,0.22);
}

.lattice-node[data-state="collapse"] {
    background: linear-gradient(135deg, rgba(255,87,34,0.08) 0%, rgba(255,87,34,0.04) 100%);
    border: 1px solid rgba(255,87,34,0.22);
}

.lattice-node[data-state="fractured"] {
    background: linear-gradient(135deg, rgba(140,61,204,0.08) 0%, rgba(140,61,204,0.04) 100%);
    border: 1px solid rgba(140,61,204,0.22);
}

.lattice-node:hover {
    transform: translateY(-2px);
}

.lattice-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(8px, 1.5vw, 14px);
    font-size: 1.1rem;
    color: var(--w25);
    background: none;
    border: none;
}

.lattice-label {
    font-size: clamp(0.625rem, 1.4vw, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lattice-node[data-state="stable"]    .lattice-label { color: var(--cyan); }
.lattice-node[data-state="collapse"]  .lattice-label { color: var(--severed); }
.lattice-node[data-state="fractured"] .lattice-label { color: var(--purple); }

.lattice-desc {
    font-size: clamp(0.625rem, 1.3vw, 0.6875rem);
    line-height: 1.65;
    color: var(--w25);
}

/* ── Signal feed ── */

.signal-feed {
    margin-top: 36px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.signal-feed-header {
    padding: 10px 18px;
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.22em;
    color: var(--w25);
    border-bottom: 1px solid var(--glass-border);
    background: var(--w03);
    display: flex;
    align-items: center;
    gap: 8px;
}

.signal-feed-header::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    animation: signalPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.signal-entry {
    padding: clamp(16px, 2.5vw, 22px) clamp(14px, 2vw, 18px);
    border-bottom: 1px solid var(--glass-border);
    border-left: 3px solid transparent;
    background: transparent;
    transition: background 0.2s;
}

.signal-entry:last-child {
    border-bottom: none;
}

.signal-entry[data-faction="archive"]     { border-color: var(--archive); }
.signal-entry[data-faction="severed"]     { border-color: var(--severed); }
.signal-entry[data-faction="interpreter"] { border-color: var(--interpreter); }
.signal-entry[data-faction="riftborn"]    { border-color: var(--riftborn); }

.signal-entry[data-faction="archive"]:hover     { background: var(--archive-dim); }
.signal-entry[data-faction="severed"]:hover     { background: var(--severed-dim); }
.signal-entry[data-faction="interpreter"]:hover { background: var(--interpreter-dim); }
.signal-entry[data-faction="riftborn"]:hover    { background: var(--riftborn-dim); }

.signal-meta {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--w25);
    margin-bottom: 10px;
}

.signal-body {
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    line-height: 1.80;
    color: var(--w45);
    font-style: italic;
}

/* ── Glyph grid ── */

.glyph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1px;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.glyph-cell {
    padding: clamp(18px, 3vw, 24px) clamp(16px, 2.5vw, 20px);
    background: var(--glass-bg);
    border: 1px solid transparent;
    border-top: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.glyph-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
    pointer-events: none;
}

.glyph-cell[data-faction="archive"]     { border-top-color: var(--archive); }
.glyph-cell[data-faction="severed"]     { border-top-color: var(--severed); }
.glyph-cell[data-faction="interpreter"] { border-top-color: var(--interpreter); }
.glyph-cell[data-faction="riftborn"]    { border-top-color: var(--riftborn); }

.glyph-cell[data-faction="archive"]:hover     { background: var(--archive-dim); box-shadow: 0 4px 24px rgba(77,208,225,0.10); transform: translateY(-2px); }
.glyph-cell[data-faction="severed"]:hover     { background: var(--severed-dim); box-shadow: 0 4px 24px rgba(255,87,34,0.10); transform: translateY(-2px); }
.glyph-cell[data-faction="interpreter"]:hover { background: var(--interpreter-dim); box-shadow: 0 4px 24px rgba(206,147,216,0.10); transform: translateY(-2px); }
.glyph-cell[data-faction="riftborn"]:hover    { background: var(--riftborn-dim); box-shadow: 0 4px 24px rgba(124,77,255,0.10); transform: translateY(-2px); }

.glyph-id {
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.glyph-cell[data-faction="archive"]     .glyph-id { color: var(--archive); }
.glyph-cell[data-faction="severed"]     .glyph-id { color: var(--severed); }
.glyph-cell[data-faction="interpreter"] .glyph-id { color: var(--interpreter); }
.glyph-cell[data-faction="riftborn"]    .glyph-id { color: var(--riftborn); }

.glyph-class {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--w25);
    margin-bottom: 4px;
}

.glyph-lore {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    line-height: 1.75;
    color: var(--w45);
    flex: 1;
}

.glyph-doctrine {
    font-size: clamp(0.625rem, 1.3vw, 0.6875rem);
    line-height: 1.60;
    color: var(--w25);
    font-style: italic;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--glass-border);
}

/* ── Faction cards ── */

.faction-cards {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.faction-card {
    padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 24px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid transparent;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.faction-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 60%);
    pointer-events: none;
}

.faction-card[data-faction="archive"]     { border-color: var(--archive); }
.faction-card[data-faction="severed"]     { border-color: var(--severed); }
.faction-card[data-faction="interpreter"] { border-color: var(--interpreter); }
.faction-card[data-faction="riftborn"]    { border-color: var(--riftborn); }

.faction-card[data-faction="archive"]:hover     { background: var(--archive-dim); }
.faction-card[data-faction="severed"]:hover     { background: var(--severed-dim); }
.faction-card[data-faction="interpreter"]:hover { background: var(--interpreter-dim); }
.faction-card[data-faction="riftborn"]:hover    { background: var(--riftborn-dim); }

.faction-card-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.faction-card .faction-name {
    font-size: clamp(0.8rem, 1.8vw, 0.9375rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0;
}

.faction-card[data-faction="archive"]     .faction-name { color: var(--archive); }
.faction-card[data-faction="severed"]     .faction-name { color: var(--severed); }
.faction-card[data-faction="interpreter"] .faction-name { color: var(--interpreter); }
.faction-card[data-faction="riftborn"]    .faction-name { color: var(--riftborn); }

.faction-class {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--w25);
}

.faction-description {
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    line-height: 1.80;
    color: var(--w45);
    margin-bottom: 12px;
    position: relative;
}

.faction-method {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    line-height: 1.70;
    color: var(--w25);
    margin-bottom: 10px;
    position: relative;
}

.faction-method-label {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--w45);
}

.faction-card .faction-doctrine {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    line-height: 1.65;
    color: var(--w25);
    font-style: italic;
    padding-top: 12px;
    border-top: 1px solid var(--glass-border);
    position: relative;
}

/* ── Encounter list ── */

.encounter-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.encounter-item {
    padding: clamp(22px, 3.5vw, 30px) clamp(18px, 2.5vw, 24px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-left: 3px solid transparent;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.encounter-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 60%);
    pointer-events: none;
}

.encounter-item[data-faction="archive"]     { border-color: var(--archive); }
.encounter-item[data-faction="severed"]     { border-color: var(--severed); }
.encounter-item[data-faction="interpreter"] { border-color: var(--interpreter); }
.encounter-item[data-faction="riftborn"]    { border-color: var(--riftborn); }
.encounter-item[data-faction="remnant"]     { border-color: var(--remnant); }

.encounter-item[data-faction="archive"]:hover     { background: var(--archive-dim); box-shadow: inset 0 0 40px rgba(77,208,225,0.04); transform: translateX(2px); }
.encounter-item[data-faction="severed"]:hover     { background: var(--severed-dim); box-shadow: inset 0 0 40px rgba(255,87,34,0.04); transform: translateX(2px); }
.encounter-item[data-faction="interpreter"]:hover { background: var(--interpreter-dim); box-shadow: inset 0 0 40px rgba(206,147,216,0.04); transform: translateX(2px); }
.encounter-item[data-faction="riftborn"]:hover    { background: var(--riftborn-dim); box-shadow: inset 0 0 40px rgba(124,77,255,0.04); transform: translateX(2px); }
.encounter-item[data-faction="remnant"]:hover     { background: var(--remnant-dim); box-shadow: inset 0 0 40px rgba(255,213,79,0.04); transform: translateX(2px); }
.encounter-item.encounter-final                   { background: rgba(179, 39, 30,0.03); }

.encounter-header {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: 14px;
}

.encounter-id {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--w10);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.encounter-name {
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.encounter-item[data-faction="archive"]     .encounter-name { color: var(--archive); }
.encounter-item[data-faction="severed"]     .encounter-name { color: var(--severed); }
.encounter-item[data-faction="interpreter"] .encounter-name { color: var(--interpreter); }
.encounter-item[data-faction="riftborn"]    .encounter-name { color: var(--riftborn); }
.encounter-item[data-faction="remnant"]     .encounter-name { color: var(--remnant); }

.encounter-faction {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--w25);
}

.encounter-body {
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    line-height: 1.80;
    color: var(--w45);
    margin-bottom: 14px;
    position: relative;
}

.encounter-signal {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    line-height: 1.65;
    color: var(--w25);
    font-style: italic;
    padding: clamp(10px, 1.5vw, 14px) clamp(12px, 2vw, 16px);
    background: var(--w03);
    border-left: 1px solid var(--glass-border);
    border-radius: 0 4px 4px 0;
    position: relative;
}

.encounter-signal-final {
    color: rgba(179, 39, 30,0.55);
    border-color: rgba(179, 39, 30,0.20);
}

/* ── Transmission feed ── */

.transmission-feed {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.transmission-card {
    padding: clamp(18px, 3vw, 24px) clamp(16px, 2.5vw, 20px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-top: 2px solid transparent;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.transmission-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 40%);
    pointer-events: none;
}

.transmission-card[data-faction="remnant"]     { border-top-color: var(--remnant); }
.transmission-card[data-faction="archive"]     { border-top-color: var(--archive); }
.transmission-card[data-faction="severed"]     { border-top-color: var(--severed); }
.transmission-card[data-faction="interpreter"] { border-top-color: var(--interpreter); }
.transmission-card[data-faction="riftborn"]    { border-top-color: var(--riftborn); }

.transmission-card[data-faction="remnant"]:hover     { background: var(--remnant-dim); }
.transmission-card[data-faction="archive"]:hover     { background: var(--archive-dim); }
.transmission-card[data-faction="severed"]:hover     { background: var(--severed-dim); }
.transmission-card[data-faction="interpreter"]:hover { background: var(--interpreter-dim); }
.transmission-card[data-faction="riftborn"]:hover    { background: var(--riftborn-dim); }

.transmission-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.transmission-id {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--w45);
    position: relative;
}

.transmission-timestamp {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.18em;
    color: var(--w25);
}

.transmission-source {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w25);
    margin-bottom: 12px;
    font-style: italic;
    position: relative;
}

.transmission-body {
    font-size: clamp(0.75rem, 1.6vw, 0.8125rem);
    line-height: 1.80;
    color: var(--w45);
    font-style: italic;
    position: relative;
}

/* ── Spec grid ── */

.spec-grid {
    margin-top: 32px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.spec-row {
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 3vw, 28px);
    padding: clamp(10px, 1.5vw, 13px) clamp(14px, 2vw, 18px);
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.15s;
}

.spec-row:last-child {
    border-bottom: none;
}

.spec-row:hover {
    background: var(--w03);
}

.spec-key {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--w25);
    flex: 0 0 clamp(90px, 12vw, 130px);
    flex-shrink: 0;
}

.spec-val {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    color: var(--w70);
    line-height: 1.60;
}

/* ── Page hero (privacy, support) ── */

.page-hero {
    padding: clamp(48px, 8vw, 72px) 0 clamp(36px, 6vw, 52px);
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: clamp(40px, 7vw, 60px);
}

.page-title {
    font-size: clamp(1.1rem, 3.5vw, 1.9rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--w100);
    margin-bottom: 8px;
    text-shadow: 0 0 30px rgba(179, 39, 30,0.15);
}

.page-meta {
    font-size: clamp(0.55rem, 1.1vw, 0.625rem);
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--w25);
}

/* ── Prose ── */

.prose h2 {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-top: 44px;
    margin-bottom: 14px;
}

.prose h3 {
    font-size: clamp(0.625rem, 1.3vw, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--w45);
    margin-top: 28px;
    margin-bottom: 8px;
}

.prose p {
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    line-height: 1.85;
    color: var(--w45);
    margin-bottom: 1em;
}

.prose ul {
    padding-left: 18px;
    margin-bottom: 1em;
}

.prose li {
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    line-height: 1.85;
    color: var(--w45);
    margin-bottom: 4px;
}

.prose a {
    color: var(--cyan);
    text-decoration: none;
    transition: color 0.15s;
}

.prose a:hover {
    text-decoration: underline;
    color: var(--w100);
}

/* ── Support contact ── */

.support-contact {
    margin-top: 44px;
    padding: clamp(24px, 4vw, 32px) clamp(20px, 3.5vw, 28px);
    border: 1px solid var(--cyan-border);
    background: var(--cyan-dim);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.support-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(179, 39, 30,0.06) 0%, transparent 60%);
    pointer-events: none;
}

.support-contact h2 {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 12px;
    position: relative;
}

.support-contact p {
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
    line-height: 1.80;
    color: var(--w70);
    margin-bottom: 16px;
    position: relative;
}

.support-contact a {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s;
}

.support-contact a:hover {
    color: var(--w100);
}

/* ── Back to top ── */

.back-to-top {
    position: fixed;
    bottom: calc(clamp(20px, 4vw, 32px) + env(safe-area-inset-bottom, 0px));
    right: clamp(16px, 3vw, 28px);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 6, 14, 0.88);
    border: 1px solid var(--cyan-border);
    border-radius: 50%;
    color: var(--cyan);
    font-family: var(--mono);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out),
                background 0.2s, border-color 0.2s;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    z-index: 200;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--cyan-dim);
    border-color: rgba(179, 39, 30, 0.55);
}

/* ── Breadcrumb (sub-pages) ── */

.breadcrumb {
    padding: clamp(12px, 2vw, 18px) 0 0;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(0.55rem, 1.1vw, 0.6rem);
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--w25);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-link:hover {
    color: var(--cyan);
}

/* ── Rankings / Leaderboards section ── */

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.board-card {
    padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 24px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-top: 3px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.board-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 40%);
    pointer-events: none;
}

.board-card--pure        { border-top-color: var(--archive); }
.board-card--endurance   { border-top-color: var(--interpreter); }
.board-card--wave        { border-top-color: var(--remnant); }

.board-card--pure:hover      { background: var(--archive-dim); }
.board-card--endurance:hover { background: var(--interpreter-dim); }
.board-card--wave:hover      { background: var(--remnant-dim); }

.board-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.board-id {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--w10);
    flex-shrink: 0;
    user-select: none;
}

.board-name {
    font-size: clamp(0.75rem, 1.6vw, 0.875rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.board-card--pure      .board-name { color: var(--archive); }
.board-card--endurance .board-name { color: var(--interpreter); }
.board-card--wave      .board-name { color: var(--remnant); }

.board-scope {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w25);
    margin-top: 4px;
}

.board-doctrine {
    font-size: clamp(0.7rem, 1.4vw, 0.75rem);
    font-style: italic;
    line-height: 1.60;
    color: var(--w45);
    padding-left: 10px;
    border-left: 2px solid var(--glass-border);
    position: relative;
}

.board-card--pure      .board-doctrine { border-left-color: rgba(77,208,225,0.30); }
.board-card--endurance .board-doctrine { border-left-color: rgba(206,147,216,0.30); }
.board-card--wave      .board-doctrine { border-left-color: rgba(255,213,79,0.30); }

.board-desc {
    font-size: clamp(0.7rem, 1.4vw, 0.75rem);
    line-height: 1.78;
    color: var(--w45);
    position: relative;
}

.board-meta {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-top: 1px solid var(--glass-border);
    padding-top: 12px;
    margin-top: auto;
}

.board-meta li {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.14em;
    color: var(--w25);
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
}

.board-meta li::before {
    content: "—";
    color: var(--w10);
    flex-shrink: 0;
}

/* ── Achievements teaser ── */

.achievements-teaser {
    margin-top: 28px;
    padding: clamp(20px, 3.5vw, 28px) clamp(18px, 3vw, 26px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.achievements-teaser::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(140,61,204,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.achievements-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 12px;
    position: relative;
}

.achievements-label {
    font-size: clamp(0.55rem, 1.1vw, 0.625rem);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--interpreter);
}

.achievements-count {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--w70);
}

.achievements-desc {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    line-height: 1.78;
    color: var(--w45);
    margin-bottom: 20px;
    max-width: var(--content-narrow);
    position: relative;
}

.achievements-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

.ach-tag {
    padding: 4px 10px;
    font-size: clamp(0.5rem, 0.9vw, 0.5625rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--interpreter-dim);
    border: 1px solid rgba(206,147,216,0.20);
    border-radius: 3px;
    color: var(--interpreter);
    white-space: nowrap;
}

.ach-tag--hidden {
    background: var(--w03);
    border-color: var(--glass-border);
    color: var(--w25);
    letter-spacing: 0.24em;
}

/* ── Media section ── */

.media-device-tabs {
    display: flex;
    gap: 8px;
    margin-top: 36px;
}

.media-tab {
    padding: 8px 22px;
    font-family: var(--mono);
    font-size: clamp(0.55rem, 1.1vw, 0.625rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--w45);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.media-tab:hover {
    background: var(--w06);
    color: var(--w70);
}

.media-tab.active {
    background: var(--cyan-dim);
    border-color: var(--cyan-border);
    color: var(--cyan);
}

.media-panel {
    margin-top: 32px;
}

.media-panel--hidden {
    display: none;
}

/* ── Video preview with device frame ── */

.media-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
}

/* GOTU is landscape-only — every device frame below is oriented landscape,
   never portrait. Notch/home-indicator moved to the frame's short (side) edge. */

.media-phone-frame {
    position: relative;
    width: min(520px, 88vw);
    aspect-ratio: 19.5 / 9;
    background: #100c09;
    border-radius: 36px;
    border: 2px solid rgba(179, 39, 30, 0.30);
    box-shadow:
        0 0 0 6px rgba(10, 9, 8, 0.85),
        0 0 0 7px rgba(179, 39, 30, 0.10),
        0 0 48px rgba(179, 39, 30, 0.14),
        0 24px 64px rgba(0, 0, 0, 0.70);
    overflow: hidden;
}

/* Notch indicator — landscape orientation puts it on the left short edge */
.media-phone-frame::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 40%;
    background: rgba(179, 39, 30, 0.15);
    border-radius: 3px;
    z-index: 1;
}

.media-ipad-frame {
    position: relative;
    width: min(640px, 92vw);
    aspect-ratio: 4 / 3;
    background: #100c09;
    border-radius: 20px;
    border: 2px solid rgba(179, 39, 30, 0.25);
    box-shadow:
        0 0 0 5px rgba(10, 9, 8, 0.85),
        0 0 0 6px rgba(179, 39, 30, 0.08),
        0 0 48px rgba(179, 39, 30, 0.10),
        0 24px 64px rgba(0, 0, 0, 0.70);
    overflow: hidden;
}

/* iPad home indicator — kept on the left short edge to match the iPhone frame above */
.media-ipad-frame::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 28%;
    background: rgba(179, 39, 30, 0.15);
    border-radius: 2px;
    z-index: 1;
}

.media-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--space-deep);
}

.media-caption {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.22em;
    color: var(--w25);
    text-align: center;
}

/* ── Screenshot grid ── */

/* Width-capped to sit under the preview frame above it rather than stretching to the full section
   width. `.media-phone-frame` is `min(520px, 88vw)` and `.media-ipad-frame` is `min(640px, 92vw)`,
   so an uncapped 2-up grid rendered each shot far WIDER than the single preview it sits beneath —
   the device frames made that pre-existing imbalance obvious. 760px keeps two landscape shots
   readable side by side while staying visually subordinate to the preview. */
/* Each grid shot is EXACTLY half the preview frame above it, so the whole media block reads as one
   system: preview at full width, six shots at half. `justify-content: center` keeps the pair
   centred under the preview rather than left-aligned in a wider track. */
.media-screenshot-grid {
    display: grid;
    grid-template-columns: repeat(2, min(252px, 43vw));
    justify-content: center;
    gap: clamp(8px, 1.5vw, 16px);
    margin-inline: auto;
}

/* iPad preview frame is 640px wide, so its half-width shot is 312px. */
#media-panel-ipad .media-screenshot-grid {
    grid-template-columns: repeat(2, min(312px, 44vw));
}

.media-shot {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}

/* Grid screenshots carry the SAME red device-frame treatment as the top preview
   (.media-phone-frame / .media-ipad-frame), scaled down for grid size — the preview's 36px radius
   and 6px shadow rings read as heavy at roughly half the width, so radius and ring weights are
   reduced proportionally while the colour values stay identical. Landscape aspect ratios are
   unchanged: GOTU is landscape-only, and the notch/home-indicator sits on the LEFT SHORT EDGE. */
.media-shot img {
    width: 100%;
    /* `max-width` is LOAD-BEARING, not belt-and-braces. When the src 404s, Chrome falls back to the
       `width="1434"` HTML attribute and renders the broken-image box at its intrinsic attribute
       size, overflowing the grid column — measured in headless Chrome: grid computed 760px while
       the img rendered 1430px wide. Safari clamps it instead, which is why the two browsers
       disagreed and why it "flashed correct then went wide" (CSS applies, then the failed load
       triggers the attribute-size fallback). This also protects any future oversized asset. */
    max-width: 100%;
    aspect-ratio: 19.5 / 9;
    /* `height: auto` is REQUIRED alongside aspect-ratio. A broken image ignores `aspect-ratio` and
       falls back to its `height="660"` HTML attribute, so the empty frame rendered 252x660 instead
       of 252x116 — the tall boxes seen live. `height: auto` lets aspect-ratio drive the box in both
       the loaded and the failed state. Measured in headless Chrome both ways. */
    height: auto;
    object-fit: cover;
    display: block;
    background: #100c09;
    border-radius: 18px;
    border: 2px solid rgba(179, 39, 30, 0.30);
    box-shadow:
        0 0 0 4px rgba(10, 9, 8, 0.85),
        0 0 0 5px rgba(179, 39, 30, 0.10),
        0 0 28px rgba(179, 39, 30, 0.12),
        0 12px 32px rgba(0, 0, 0, 0.60);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}

/* The frame needs to sit above the caption's spacing and give the ::before notch an anchor.
   `min-width: 0` is REQUIRED, not cosmetic: a grid item's default `min-width: auto` lets its
   content dictate the column's minimum size. When a screenshot 404s, Chrome falls back to the
   `width="1434"` HTML attribute, the item refuses to shrink below it, and the whole 2-up grid
   inflates — `max-width: 100%` on the img cannot help, because that 100% resolves against the very
   column the image just widened. Measured in headless Chrome before the fix: grid computed 760px
   while the img rendered 1430px. Safari clamps instead, which is why the browsers disagreed. */
.media-shot {
    position: relative;
    min-width: 0;
}

/* Notch / home indicator on the left short edge — matches .media-phone-frame::before. Drawn on the
   figure rather than the img because an <img> cannot host a pseudo-element. */
.media-shot::before {
    content: "";
    position: absolute;
    left: 8px;
    top: calc(50% - 12px);
    transform: translateY(-50%);
    width: 4px;
    height: 32%;
    background: rgba(179, 39, 30, 0.18);
    border-radius: 3px;
    z-index: 2;
    pointer-events: none;
}

#media-panel-ipad .media-shot img {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    border-color: rgba(179, 39, 30, 0.25);
}

#media-panel-ipad .media-shot::before {
    height: 24%;
    width: 3px;
}

.media-shot:hover img {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 0 0 4px rgba(10, 9, 8, 0.85),
        0 0 0 5px rgba(179, 39, 30, 0.18),
        0 0 36px rgba(179, 39, 30, 0.22),
        0 16px 40px rgba(0, 0, 0, 0.70);
    border-color: rgba(179, 39, 30, 0.55);
}

.media-shot figcaption {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w25);
    text-align: center;
}

/* ── Lightbox ── */

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(5, 6, 14, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--ease-out);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.media-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

.media-lightbox img {
    max-width: min(1100px, 92vw);
    max-height: 88svh;
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid var(--cyan-border);
    box-shadow: 0 0 60px rgba(179, 39, 30, 0.18);
}

.media-lightbox-close {
    position: absolute;
    top: clamp(16px, 3vw, 24px);
    right: clamp(16px, 3vw, 24px);
    width: 40px;
    height: 40px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--w70);
    font-family: var(--mono);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.media-lightbox-close:hover {
    background: var(--cyan-dim);
    border-color: var(--cyan-border);
    color: var(--cyan);
}

/* ── Responsive ── */

/*
 * Breakpoint tiers:
 *   ≤ 1024px  Small laptop / tablet landscape — hamburger nav, cycle-steps 2×2
 *   ≤  768px  Tablet portrait — padding reductions, lattice/cycle stack
 *   ≤  600px  Large phone landscape / small phone portrait — single-column grids
 *   ≤  400px  Small phone — tighten padding and font sizes
 */

/* ── Tier 1 — ≤ 1024px: hamburger nav ─────────────────────────────────────── */
@media (max-width: 1024px) {

    /* Header collapses: logo | toggle, nav drops below on open */
    .site-header {
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding: 14px var(--gutter);
    }

    .logo {
        flex: 1;
    }

    .nav-toggle {
        display: flex;
    }

    nav {
        flex-basis: 100%;
        order: 1;
    }

    .nav {
        display: none;
        flex-direction: column;
        gap: 0;
        width: 100%;
        background: rgba(5, 6, 14, 0.97);
        border: 1px solid var(--glass-border);
        border-radius: 6px;
        padding: 6px 0;
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
    }

    .nav.nav--open {
        display: flex;
    }

    .nav li {
        width: 100%;
    }

    .nav a {
        display: block;
        padding: 11px 18px;
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
        white-space: nowrap;
    }

    .nav a::after {
        display: none;
    }

    /* Cycle steps: 2×2 grid, arrows hidden */
    .cycle-steps {
        grid-template-columns: 1fr 1fr;
    }

    .cycle-step-arrow {
        display: none;
    }
}

/* ── Tier 2 — ≤ 768px: tablet portrait ────────────────────────────────────── */
@media (max-width: 768px) {

    .site-header {
        padding: 14px 20px;
    }

    main {
        padding: 0 20px;
    }

    /* Lattice diagram: vertical stack */
    .lattice-diagram {
        grid-template-columns: 1fr;
    }

    .lattice-arrow {
        padding: 4px 18px;
        justify-content: flex-start;
        font-size: 0.9rem;
        transform: rotate(90deg);
        transform-origin: 24px center;
    }

    /* Glyph grid: 2 columns instead of 3 */
    .glyph-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feature grid: 2 columns */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Media screenshot grid: stays 2 columns at this breakpoint */
    .media-screenshot-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Board grid: 1 column on tablet */
    .board-grid {
        grid-template-columns: 1fr;
    }

    /* Spec key column width */
    .spec-key {
        flex: 0 0 100px;
    }
}

/* ── Tier 3 — ≤ 600px: phone ───────────────────────────────────────────────── */
@media (max-width: 600px) {

    .site-header {
        padding: 12px 16px;
    }

    main {
        padding: 0 16px;
    }

    /* CTAs: full-width stacked */
    .cta-group {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* Grids: single column */
    .glyph-grid,
    .feature-grid,
    .faction-strip {
        grid-template-columns: 1fr;
    }

    /* Media screenshot grid: single column on phone — landscape shots are too
       wide to read at 2-up on a narrow viewport */
    .media-screenshot-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Cycle steps: single column */
    .cycle-steps {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .site-footer {
        padding: 24px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-links {
        gap: 14px;
    }

    /* Transmission header: stacked */
    .transmission-header {
        flex-direction: column;
        gap: 3px;
    }

    /* Encounter header: tighter gap */
    .encounter-header {
        gap: 10px;
    }

    /* Spec key narrower */
    .spec-key {
        flex: 0 0 76px;
    }

    /* Filter tabs: tighter */
    .filter-tabs {
        gap: 3px;
    }
}

/* ── Tier 4 — ≤ 400px: small phone ─────────────────────────────────────────── */
@media (max-width: 400px) {

    .hero-signal {
        letter-spacing: 0.14em;
    }

    .section-heading {
        font-size: clamp(0.9rem, 5vw, 1.1rem);
    }

    .spec-key {
        flex: 0 0 68px;
    }
}

/* ── Orientation: landscape phone — hero must not enforce full height ─────── */
@media (orientation: landscape) and (max-height: 520px) {

    .hero {
        min-height: auto;
        justify-content: flex-start;
        padding-block: clamp(24px, 4svh, 40px);
    }

    /* Tighten hero copy in landscape so it all fits without scrolling */
    .hero-title {
        font-size: clamp(1.4rem, 4.5vh, 2.2rem);
    }

    .hero-body {
        display: none; /* body text sacrificed so CTA stays visible */
    }

    /* Compact sections */
    .section {
        padding-block: clamp(32px, 5svh, 56px);
    }
}

/* ── Orientation: portrait tablet — section padding breathing room ───────── */
@media (orientation: portrait) and (min-width: 600px) {

    .hero {
        padding-block: clamp(48px, 7svh, 80px);
    }
}

/* ── Large screens — ≥ 1025px ──────────────────────────────────────────────── */
@media (min-width: 1025px) {

    /* Ensure nav is always visible above hamburger threshold */
    .nav {
        display: flex !important;
        flex-direction: row;
    }

    .nav-toggle {
        display: none !important;
    }

    nav {
        flex-basis: auto;
        order: 0;
    }

    .nav li {
        width: auto;
    }

    .nav a {
        display: inline;
        padding: 0;
        font-size: clamp(0.575rem, 1.2vw, 0.6875rem);
        letter-spacing: 0.18em;
    }

    .nav a::after {
        display: block;
    }
}

/* ── Wide screens — ≥ 1200px ────────────────────────────────────────────────── */
@media (min-width: 1200px) {

    main {
        padding: 0 clamp(48px, 6vw, 96px);
    }

    .faction-strip {
        grid-template-columns: repeat(4, 1fr);
    }

    .glyph-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Cycle steps: 4 columns with arrows restored */
    .cycle-steps {
        grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    }

    .cycle-step-arrow {
        display: flex;
    }
}

/* Ultra wide — 1440px+ */
@media (min-width: 1440px) {
    body {
        max-width: 1600px;
        margin: 0 auto;
        box-shadow: 0 0 120px rgba(0,0,0,0.8);
    }
}


/* ── Nav active state (scrollspy) ── */

.nav a.nav-active {
    color: var(--w70);
}

.nav a.nav-active::after {
    transform: scaleX(1);
}

/* ── Mobile nav toggle ── */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.nav-toggle span {
    display: block;
    height: 1px;
    background: var(--w45);
    border-radius: 1px;
    transition: transform 0.22s var(--ease), opacity 0.22s, background 0.15s;
}

.nav-toggle:hover {
    border-color: var(--w25);
}

.nav-toggle:hover span {
    background: var(--w70);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ── Faction filter tabs ── */

.filter-tabs {
    display: flex;
    gap: 4px;
    margin-top: 28px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: var(--w25);
    font-family: var(--mono);
    font-size: clamp(0.5rem, 1.1vw, 0.5625rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-tab:hover {
    color: var(--w70);
    border-color: var(--w25);
    background: var(--w03);
}

.filter-tab.active {
    background: var(--cyan-dim);
    border-color: var(--cyan-border);
    color: var(--cyan);
}

.filter-tab[data-filter="archive"].active {
    background: var(--archive-dim);
    border-color: rgba(77,208,225,0.28);
    color: var(--archive);
}

.filter-tab[data-filter="severed"].active {
    background: var(--severed-dim);
    border-color: rgba(255,87,34,0.28);
    color: var(--severed);
}

.filter-tab[data-filter="interpreter"].active {
    background: var(--interpreter-dim);
    border-color: rgba(206,147,216,0.28);
    color: var(--interpreter);
}

.filter-tab[data-filter="riftborn"].active {
    background: var(--riftborn-dim);
    border-color: rgba(124,77,255,0.28);
    color: var(--riftborn);
}

.glyph-cell[aria-hidden="true"] {
    display: none;
}

/* ── Cycle steps ── */

.cycle-steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    margin-top: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.cycle-step {
    padding: clamp(18px, 3vw, 24px) clamp(14px, 2vw, 18px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.2s;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.cycle-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-border), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.cycle-step:hover {
    background: var(--cyan-dim);
}

.cycle-step:hover::before {
    opacity: 1;
}

.cycle-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(6px, 1.2vw, 12px);
    font-size: 0.9rem;
    color: var(--w25);
    background: none;
    flex-shrink: 0;
}

.cycle-num {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: var(--w06);
    line-height: 1;
    letter-spacing: 0.06em;
}

.cycle-title {
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan);
}

.cycle-desc {
    font-size: clamp(0.65rem, 1.4vw, 0.7rem);
    line-height: 1.72;
    color: var(--w25);
}

/* ── Accessibility ── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-color-scheme: light) {
    /* GOTU is dark-only — maintain dark theme regardless */
    :root { color-scheme: dark; }
}

/* ── Community section ── */

.community-intro {
    max-width: 640px;
    margin: 0 auto clamp(32px, 5vw, 48px);
    text-align: center;
}

.community-intro p {
    font-size: clamp(0.65rem, 1.4vw, 0.75rem);
    line-height: 1.75;
    color: var(--w45);
}

.community-hashtags {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

.community-tag {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    background: var(--cyan-dim);
    border: 1px solid var(--cyan-border);
    border-radius: 4px;
    padding: 4px 10px;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 2vw, 16px);
    margin-top: 36px;
}

.social-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(18px, 2.5vw, 24px) clamp(16px, 2vw, 20px);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.social-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 50%);
    pointer-events: none;
}

.social-card:hover {
    background: var(--cyan-dim);
    border-color: var(--cyan-border);
    transform: translateY(-2px);
}

.social-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    color: var(--cyan);
    flex-shrink: 0;
}

.social-card-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.social-card-platform {
    font-size: clamp(0.4375rem, 0.9vw, 0.5rem);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--w25);
}

.social-card-handle {
    font-size: clamp(0.65rem, 1.3vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--w70);
    margin-top: 2px;
}

.social-card:hover .social-card-handle {
    color: var(--cyan);
}

.social-card-desc {
    font-size: clamp(0.5rem, 1vw, 0.5625rem);
    line-height: 1.6;
    color: var(--w25);
    margin-top: 4px;
}

.community-cta {
    text-align: center;
    margin-top: clamp(28px, 4vw, 40px);
    padding-top: clamp(20px, 3vw, 28px);
    border-top: 1px solid var(--glass-border);
}

.community-cta p {
    font-size: clamp(0.55rem, 1.1vw, 0.625rem);
    color: var(--w25);
    letter-spacing: 0.14em;
}

.community-cta strong {
    color: var(--cyan);
    font-weight: 700;
}

@media (max-width: 768px) {
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .social-grid {
        grid-template-columns: 1fr;
    }
}