/* =========================================================
   continua.st — light-academia reading room at twilight
   HUD-overlay on translucent-frost, aurora-lights, morph
   Interactive elements: Intersection Observer API to detect when content panels enter the viewport.
   When a panel crosses the 20% threshold, Intersection Observer callbacks should use `requestAnimationFrame` for smooth morph transitions.
   Bottom-right: the continua lemniscate symbol. IBM Plex Mono" (Google Fonts); Space Grotesk" (Google Fonts) at maximum size.
   ========================================================= */

:root {
    /* Palette — translucent frost */
    --deep-slate: #1A2232;
    --frost-glass: #2A3A4E;
    --frost-white: #E8EFF5;
    --silver-mist: #B8C8D8;
    --aurora-blue: #88C8E8;
    --aurora-teal: #5EC4B6;
    --ice-edge: #3D5570;
    --frozen-rose: #C88B9E;
    --bridge-blue: #7BA7C2;

    /* Typography */
    --f-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --f-body: 'Libre Baskerville', 'Cormorant Garamond', Georgia, serif;
    --f-mono: 'IBM Plex Mono', 'Menlo', monospace;
    --f-quote: 'Cormorant Garamond', 'Libre Baskerville', Georgia, serif;

    /* Surfaces */
    --panel-bg: rgba(42, 58, 78, 0.65);
    --panel-bg-strong: rgba(42, 58, 78, 0.80);
    --panel-border: rgba(61, 85, 112, 0.55);

    /* Motion */
    --morph-dur: 800ms;
    --ease-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--deep-slate);
    color: var(--silver-mist);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100%;
}

body {
    position: relative;
    /* Base aurora-dimmed bluewash */
    background:
        radial-gradient(ellipse at 20% 15%, rgba(136, 200, 232, 0.07), transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(94, 196, 182, 0.05), transparent 60%),
        linear-gradient(180deg, #151c2b 0%, #1A2232 35%, #1d2738 100%);
    background-attachment: fixed;
}

::selection { background: rgba(136, 200, 232, 0.35); color: var(--frost-white); }

/* =========================================================
   Aurora field — fixed behind all content
   ========================================================= */
.aurora-field {
    position: fixed;
    inset: -10vh -10vw;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
    will-change: transform, opacity;
    mix-blend-mode: screen;
}

.aurora-1 {
    width: 60vw; height: 60vw;
    left: -10vw; top: -15vh;
    background: radial-gradient(ellipse at center,
        rgba(136, 200, 232, 0.32),
        rgba(136, 200, 232, 0.10) 45%,
        transparent 70%);
    animation: aurora-drift-1 37s linear infinite alternate;
}

.aurora-2 {
    width: 55vw; height: 55vw;
    right: -12vw; top: 20vh;
    background: radial-gradient(ellipse at center,
        rgba(94, 196, 182, 0.28),
        rgba(94, 196, 182, 0.08) 50%,
        transparent 72%);
    animation: aurora-drift-2 43s linear infinite alternate;
}

.aurora-3 {
    width: 40vw; height: 40vw;
    left: 25vw; bottom: -8vh;
    background: radial-gradient(ellipse at center,
        rgba(123, 167, 194, 0.26),
        rgba(123, 167, 194, 0.06) 55%,
        transparent 75%);
    animation: aurora-drift-3 51s linear infinite alternate;
}

.aurora-4 {
    width: 30vw; height: 30vw;
    right: 15vw; bottom: 10vh;
    background: radial-gradient(ellipse at center,
        rgba(200, 139, 158, 0.14),
        rgba(200, 139, 158, 0.04) 60%,
        transparent 75%);
    animation: aurora-drift-4 61s linear infinite alternate;
}

@keyframes aurora-drift-1 {
    0%   { transform: translate(0vw, 0vh) scale(1); }
    50%  { transform: translate(8vw, 6vh) scale(1.12); }
    100% { transform: translate(-4vw, 10vh) scale(0.95); }
}
@keyframes aurora-drift-2 {
    0%   { transform: translate(0vw, 0vh) scale(1); }
    50%  { transform: translate(-10vw, 8vh) scale(1.08); }
    100% { transform: translate(6vw, -6vh) scale(1.05); }
}
@keyframes aurora-drift-3 {
    0%   { transform: translate(0vw, 0vh) scale(1); }
    50%  { transform: translate(6vw, -8vh) scale(1.15); }
    100% { transform: translate(-8vw, -4vh) scale(0.92); }
}
@keyframes aurora-drift-4 {
    0%   { transform: translate(0vw, 0vh) scale(1); }
    50%  { transform: translate(-6vw, -10vh) scale(1.1); }
    100% { transform: translate(4vw, 4vh) scale(0.98); }
}

/* =========================================================
   Frost noise + tessellation overlays
   ========================================================= */
.frost-noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.10;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.95  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.75'/></svg>");
    background-size: 200px 200px;
}

.tessellation {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.12;
}
.tessellation svg { width: 100%; height: 100%; display: block; }

/* =========================================================
   HUD corner elements
   ========================================================= */
.hud {
    position: fixed;
    z-index: 90;
    pointer-events: none;
    font-family: var(--f-mono);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(123, 167, 194, 0.85);
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.3;
}

.hud-label {
    color: rgba(94, 196, 182, 0.8);
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    display: block;
}
.hud-value {
    color: rgba(232, 239, 245, 0.82);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.hud-tl {
    top: 1.5rem;
    left: 1.5rem;
    padding-left: 14px;
    border-left: 1px solid rgba(61, 85, 112, 0.7);
}

.hud-tr {
    top: 1rem;
    right: 1rem;
}
.scroll-arc { display: block; }

.hud-bl {
    bottom: 1.5rem;
    left: 1.5rem;
    gap: 10px;
}
.hud-coord {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid rgba(61, 85, 112, 0.6);
    padding-left: 10px;
}

.hud-br {
    bottom: 1.2rem;
    right: 1.2rem;
    align-items: flex-end;
    gap: 2px;
}
.lemniscate {
    animation: lem-pulse 6s ease-in-out infinite;
    display: block;
}
.hud-mark-label { padding-left: 0; border-left: none; align-items: flex-end; }
.hud-mark-label .hud-label { text-align: right; color: rgba(94, 196, 182, 0.75); }

@keyframes lem-pulse {
    0%, 100% { opacity: 0.82; }
    50%      { opacity: 1; }
}

/* =========================================================
   Narrative layout
   ========================================================= */
.narrative {
    position: relative;
    z-index: 10;
    max-width: 1600px;
    margin: 0 auto;
    padding: 12vh 7vw 10vh 10vw;
    display: block;
}

.panel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    min-height: 82vh;
    padding: 6vh 0 6vh 0;
    align-items: center;

    /* Morph-in initial state */
    opacity: 0;
    filter: blur(20px);
    transform: scale(0.975);
    transition:
        opacity var(--morph-dur) var(--ease-out-cubic),
        filter var(--morph-dur) var(--ease-out-cubic),
        transform var(--morph-dur) var(--ease-out-cubic);
    will-change: opacity, filter, transform;
}

.panel.in-view {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.panel.receding {
    opacity: 0.35;
    filter: blur(6px);
    transform: scale(0.995);
}

/* -- Frost-glass panel body -- */
.panel-body {
    position: relative;
    grid-column: 1 / span 7;
    background: var(--panel-bg);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 3rem 3.2rem 3rem 3.2rem;
    overflow: visible;
    box-shadow:
        inset 0 1px 0 rgba(232, 239, 245, 0.04),
        0 20px 40px -20px rgba(10, 14, 22, 0.6);
}

/* Noise grain overlay on each panel */
.panel-body::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.95  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.75'/></svg>");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    opacity: 0.12;
    pointer-events: none;
}

.panel-body-wide {
    grid-column: 1 / span 10;
}

/* -- Corner bracket decorations -- */
.brackets { position: absolute; inset: 0; pointer-events: none; }
.brackets::before,
.brackets::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: var(--ice-edge);
    border-style: solid;
    opacity: 0.9;
}
.brackets::before {
    top: -5px; left: -5px;
    border-width: 1px 0 0 1px;
}
.brackets::after {
    bottom: -5px; right: -5px;
    border-width: 0 1px 1px 0;
}
/* Add secondary two brackets via a second pseudo-layer using a nested span-like technique:
   Use box-shadow offsets to simulate opposite corners on .panel-body::before */
.panel-body::before {
    content: "";
    position: absolute;
    top: -5px; right: -5px;
    width: 18px; height: 18px;
    border-top: 1px solid var(--ice-edge);
    border-right: 1px solid var(--ice-edge);
    opacity: 0.9;
    pointer-events: none;
}
/* Fourth bracket on bottom-left via an additional element: use brackets-thin utility or extra pseudo */
.panel-body > .brackets::before,
.panel-body > .brackets::after {
    z-index: 2;
}

/* Extra bottom-left bracket via an inserted element */
.panel-body > .brackets {
    z-index: 2;
}
.panel-body > .brackets::after {
    /* already bottom-right; add bottom-left via outline trick */
}
/* Use a fresh selector — add bottom-left bracket by using the panel-body itself */
.panel-body {
    /* Outline bracket via gradient cannot easily add a 4th corner; we add a :focus-visible-style element:
       Use a dedicated ::before on .panel-body::before already taken for top-right.
       Need a 4th corner: bottom-left. Use an inline child - done: via .brackets + panel-body::before covers 3.
       We'll add bottom-left through an additional box-shadow-free approach: use .brackets-extra class.
    */
}

/* Bottom-left bracket through an additional pseudo on .panel-body-wide general */
.panel > .panel-body {
    /* We create the bottom-left bracket using outline offset overlay — use a small span */
}

/* Simpler: create bottom-left bracket via outline decoration using inset shadow at corner with mask is heavy;
   instead, apply an extra pseudo to .panel directly: */
.panel::before {
    content: "";
    position: absolute;
    bottom: 6vh; /* align with panel-body bottom */
    left: -5px;
    width: 18px; height: 18px;
    border-bottom: 1px solid var(--ice-edge);
    border-left: 1px solid var(--ice-edge);
    opacity: 0.9;
    pointer-events: none;
}
/* Keep the bracket positioned relative to the panel-body: approximate by using grid position offset.
   Actually override with a cleaner solution — reposition via relative alignment of a child. */

/* Brackets-thin variant for marginalia */
.brackets-thin::before,
.brackets-thin::after {
    width: 12px; height: 12px;
}

/* =========================================================
   Typography
   ========================================================= */
.eyebrow {
    font-family: var(--f-mono);
    font-weight: 300;
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--aurora-teal);
    opacity: 0.85;
    margin: 0 0 1.4rem 0;
}

h1, h2, h3 {
    font-family: var(--f-head);
    font-weight: 500;
    color: var(--frost-white);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 1.2rem 0;
    line-height: 1.1;
    text-shadow: 0 0 30px rgba(160, 200, 230, 0.3);
}

h1.domain-mark {
    font-size: clamp(2.8rem, 8vw, 6rem);
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0 0 1.6rem 0;
    display: inline-block;
}
.domain-mark .tld {
    color: var(--aurora-blue);
    font-weight: 400;
    letter-spacing: 0.06em;
}

h2 {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.subtitle {
    font-family: var(--f-quote);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.25rem, 2.3vw, 1.9rem);
    color: var(--aurora-blue);
    letter-spacing: 0.01em;
    line-height: 1.4;
    text-transform: none;
    margin: 0 0 2.4rem 0;
    max-width: 34ch;
}

p {
    font-family: var(--f-body);
    font-size: clamp(0.95rem, 1.2vw, 1.08rem);
    line-height: 1.78;
    color: var(--silver-mist);
    margin: 0 0 1.2rem 0;
}

p em { color: var(--frost-white); font-style: italic; }
p strong, p b { color: var(--frost-white); font-weight: 400; }

.lede {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: var(--frost-white);
    margin-bottom: 1.6rem;
}

.warm {
    color: var(--frozen-rose);
    font-style: normal;
}

.drop {
    font-family: var(--f-head);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--frost-white);
}

/* =========================================================
   Panel — opening
   ========================================================= */
.panel-opening {
    min-height: 96vh;
}
.panel-opening .panel-body {
    padding: 5rem 4rem 4rem 4rem;
}

.spec-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bridge-blue);
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(61, 85, 112, 0.5);
}

/* =========================================================
   Marginalia panels
   ========================================================= */
.marginalia {
    position: relative;
    grid-column: 10 / span 3;
    background: rgba(42, 58, 78, 0.55);
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    border: 1px solid var(--panel-border);
    border-radius: 2px;
    padding: 1.6rem 1.4rem;
    align-self: start;
    margin-top: 4rem;

    opacity: 0;
    transform: translateX(20px);
    transition: opacity 800ms var(--ease-out-cubic) 200ms,
                transform 800ms var(--ease-out-cubic) 200ms;
}
.panel.in-view .marginalia {
    opacity: 1;
    transform: translateX(0);
}

.marginalia::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.95  0 0 0 0 1  0 0 0 0.45 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.75'/></svg>");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    opacity: 0.1;
    pointer-events: none;
}

.marg-label {
    font-family: var(--f-mono);
    font-weight: 300;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--aurora-teal);
    margin: 0 0 0.3rem 0;
}
.marg-term {
    font-family: var(--f-head);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    color: var(--frost-white);
    margin: 0 0 0.8rem 0;
}
.marg-def {
    font-family: var(--f-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--silver-mist);
    margin: 0 0 0.9rem 0;
}
.hairline {
    border: none;
    border-top: 1px solid rgba(61, 85, 112, 0.5);
    margin: 0.9rem 0;
}

/* =========================================================
   Figure / visual panel
   ========================================================= */
.figure {
    margin: 1rem 0 1.5rem 0;
    padding: 1rem 0;
    position: relative;
}
.figure-svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 30px rgba(136, 200, 232, 0.25));
}
.caption {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--bridge-blue);
    text-align: center;
    max-width: 55ch;
    margin: 0.5rem auto 0 auto;
    line-height: 1.6;
    padding-top: 1rem;
    border-top: 1px solid rgba(61, 85, 112, 0.35);
}

/* =========================================================
   Pull quote panel
   ========================================================= */
.panel-quote {
    min-height: 60vh;
}
.panel-quote .panel-body {
    grid-column: 2 / span 9;
    padding: 4rem 4rem;
    text-align: center;
    background: rgba(42, 58, 78, 0.45);
}
.pullquote {
    font-family: var(--f-quote);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.45;
    color: var(--aurora-blue);
    margin: 0;
    padding: 0;
    position: relative;
    letter-spacing: 0.01em;
}
.quote-mark {
    font-size: 1.4em;
    color: var(--aurora-teal);
    line-height: 0;
    vertical-align: -0.25em;
    opacity: 0.7;
}
.quote-mark-close { vertical-align: -0.35em; margin-left: 0.05em; }
.quote-attribution {
    margin-top: 1.5rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bridge-blue);
}
.quote-attribution em {
    font-family: var(--f-quote);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--frost-white);
}

/* =========================================================
   Context / register
   ========================================================= */
.register {
    list-style: none;
    margin: 2rem 0 0 0;
    padding: 0;
    border-top: 1px solid rgba(61, 85, 112, 0.5);
}
.register li {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    gap: 1.5rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(61, 85, 112, 0.35);
    align-items: baseline;
    transition: background 400ms ease, color 400ms ease;
}
.register li:hover {
    background: rgba(136, 200, 232, 0.05);
}
.reg-n {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--aurora-teal);
    text-transform: uppercase;
}
.reg-t {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 0.98rem;
    color: var(--frost-white);
    line-height: 1.5;
}
.reg-d {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    color: var(--bridge-blue);
    text-transform: uppercase;
    text-align: right;
}

/* =========================================================
   Signal / form panel
   ========================================================= */
.panel-signal {
    min-height: 85vh;
}
.panel-signal .panel-body {
    grid-column: 2 / span 9;
    padding: 4rem 4rem;
}
.signal-lede {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--frost-white);
    max-width: 52ch;
    margin-bottom: 2.5rem;
}

.signal-form {
    margin: 2rem 0 3rem 0;
    max-width: 640px;
}
.signal-field { display: block; }
.field-label {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--aurora-teal);
    margin-bottom: 0.6rem;
}

.input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(61, 85, 112, 0.6);
    background: rgba(26, 34, 50, 0.5);
    backdrop-filter: blur(6px);
    padding: 0.8rem 1rem;
    border-radius: 2px;
    transition: border-color 400ms ease, box-shadow 400ms ease, background 400ms ease;
}
.input-wrap:focus-within {
    border-color: rgba(136, 200, 232, 0.75);
    box-shadow: 0 0 0 1px rgba(136, 200, 232, 0.35), 0 0 30px rgba(136, 200, 232, 0.15);
    background: rgba(26, 34, 50, 0.65);
}
.input-prefix {
    font-family: var(--f-mono);
    color: var(--aurora-teal);
    font-size: 1rem;
    margin-right: 0.2rem;
}
.signal-form input[type="email"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--frost-white);
    font-family: var(--f-body);
    font-size: 1rem;
    letter-spacing: 0.01em;
    padding: 0.2rem 0;
    caret-color: var(--aurora-blue);
}
.signal-form input::placeholder {
    color: rgba(184, 200, 216, 0.35);
    font-style: italic;
}

.signal-submit {
    background: transparent;
    border: 1px solid rgba(94, 196, 182, 0.55);
    color: var(--aurora-teal);
    font-family: var(--f-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 2px;
    transition: background 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}
.signal-submit:hover {
    background: rgba(94, 196, 182, 0.15);
    color: var(--frost-white);
    border-color: var(--aurora-teal);
    box-shadow: 0 0 24px rgba(94, 196, 182, 0.25);
}
.signal-submit.sent {
    background: rgba(136, 200, 232, 0.2);
    color: var(--frost-white);
    border-color: var(--aurora-blue);
}

.field-status {
    margin-top: 0.8rem;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bridge-blue);
    opacity: 0.75;
}

/* =========================================================
   Colophon
   ========================================================= */
.colophon {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(61, 85, 112, 0.45);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.9rem 2.5rem;
}
.colophon-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.col-label {
    font-family: var(--f-mono);
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--aurora-teal);
}
.col-val {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--frost-white);
}

/* =========================================================
   End panel
   ========================================================= */
.panel-end {
    min-height: 55vh;
}
.panel-end .panel-body {
    grid-column: 3 / span 8;
    text-align: center;
    padding: 3rem;
    background: rgba(42, 58, 78, 0.35);
}
.end-body { text-align: center; }
.end-glyph {
    font-family: var(--f-quote);
    font-style: italic;
    font-size: clamp(3rem, 7vw, 5rem);
    color: var(--aurora-teal);
    margin: 0 0 1rem 0;
    line-height: 1;
    text-shadow: 0 0 40px rgba(94, 196, 182, 0.4);
}
.end-note {
    font-family: var(--f-quote);
    font-style: italic;
    color: var(--bridge-blue);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* =========================================================
   Particles (morph transition dust)
   ========================================================= */
.particles {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    overflow: hidden;
}
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--aurora-blue);
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: particle-drift 1500ms var(--ease-out-cubic) forwards;
    box-shadow: 0 0 4px rgba(136, 200, 232, 0.8);
}
.particle.diamond {
    border-radius: 0;
    transform: rotate(45deg);
    background: var(--aurora-teal);
    box-shadow: 0 0 4px rgba(94, 196, 182, 0.8);
}
@keyframes particle-drift {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
    25%  { opacity: 0.8; }
    100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -60px)) scale(1.1); }
}
.particle.diamond {
    animation: particle-drift-diamond 1500ms var(--ease-out-cubic) forwards;
}
@keyframes particle-drift-diamond {
    0%   { opacity: 0; transform: rotate(45deg) translate(0, 0) scale(0.5); }
    25%  { opacity: 0.7; }
    100% { opacity: 0; transform: rotate(90deg) translate(var(--dx, 30px), var(--dy, -50px)) scale(1); }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
    .narrative { padding: 10vh 6vw; }
    .panel { grid-template-columns: repeat(8, 1fr); }
    .panel-body { grid-column: 1 / span 6; padding: 2.2rem; }
    .panel-body-wide { grid-column: 1 / span 8; }
    .marginalia { grid-column: 6 / span 3; margin-top: 2rem; }
    .panel-quote .panel-body { grid-column: 1 / span 8; padding: 3rem 2.5rem; }
    .panel-signal .panel-body { grid-column: 1 / span 8; padding: 3rem 2.5rem; }
    .panel-end .panel-body { grid-column: 1 / span 8; }
}
@media (max-width: 720px) {
    .narrative { padding: 8vh 5vw; }
    .panel {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 4vh 0;
    }
    .panel-body, .panel-body-wide,
    .panel-quote .panel-body, .panel-signal .panel-body,
    .panel-end .panel-body {
        grid-column: 1 / -1;
        padding: 2rem 1.5rem;
    }
    .marginalia {
        grid-column: 1 / -1;
        margin-top: 1.5rem;
    }
    .hud-tl { top: 0.8rem; left: 0.8rem; font-size: 0.6rem; }
    .hud-tr { top: 0.5rem; right: 0.5rem; }
    .hud-tr .scroll-arc { width: 60px; height: 60px; }
    .hud-bl { bottom: 0.8rem; left: 0.8rem; font-size: 0.55rem; }
    .hud-br { bottom: 0.8rem; right: 0.8rem; }
    .register li { grid-template-columns: 3.5rem 1fr; }
    .reg-d { grid-column: 1 / -1; text-align: left; padding-left: 0; }
    h1.domain-mark { font-size: clamp(2.2rem, 12vw, 4rem); }
    .input-wrap { flex-wrap: wrap; }
    .signal-submit { width: 100%; justify-content: center; margin-top: 0.6rem; }
}