/* =====================================================
   continu.ax — anti-design / luxurious decay
   Palette:
     Bleached Signal     #f2ece4
     Transmission Black  #0a0a0a
     Cathode Amber       #d4883a
     Static Violet       #6e5494
     Patina Teal         #4a7c6f
     Rust Signal         #a0522d
     Deep Void           #1a1520
   Fonts:
      Libre Franklin (headings, 800 / 600)
      Source Serif 4     (body)
      IBM Plex Mono      (metadata)
      IBM Plex Mono" annotations at oversized scale (4rem signal numerals)
      Source Serif 4" (Google Fonts) and IBM Plex Mono" (Google Fonts)
   Interaction notes: IntersectionObserver and IntersectionObserver` thresholds
   ===================================================== */

:root {
    --c-bg:         #f2ece4;
    --c-ink:        #0a0a0a;
    --c-amber:      #d4883a;
    --c-violet:     #6e5494;
    --c-teal:       #4a7c6f;
    --c-rust:       #a0522d;
    --c-void:       #1a1520;

    --f-head: "Libre Franklin", "Inter", system-ui, sans-serif;
    --f-body: "Source Serif 4", "IBM Plex Serif", Georgia, serif;
    --f-mono: "IBM Plex Mono", "Space Mono", ui-monospace, monospace;

    --gutter: 24px;
    --cols: 8;
    --side-spine: 48px;
    --side-stream: 300px;
    --margin-outer: 120px;
    --cut: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.7;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    position: relative;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* ==== CRT scan lines (fixed overlay) ==== */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(10,10,10,0.06) 0px,
        rgba(10,10,10,0.06) 1px,
        transparent 1px,
        transparent 4px
    );
    background-size: 100% 4px;
    mix-blend-mode: multiply;
    animation: scan-drift 200s linear infinite;
}
@keyframes scan-drift {
    from { background-position: 0 0; }
    to   { background-position: 0 200px; }
}

/* ==== Corruption block layer (JS-populated) ==== */
.corruption-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
}
.corruption-block {
    position: absolute;
    mix-blend-mode: screen;
    will-change: opacity;
    opacity: 0;
    transition: opacity 120ms linear;
}
.corruption-block.is-on { opacity: 0.9; }

/* ==== Vertical sidebar spine (navigation) ==== */
.spine {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--side-spine);
    height: 100vh;
    z-index: 100;
    background: var(--c-bg);
    border-right: 2px solid var(--c-ink);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.spine-mark {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--c-ink);
    font-weight: 500;
    letter-spacing: 0.28em;
}
.spine-foot {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--c-teal);
    font-size: 9.5px;
    letter-spacing: 0.22em;
}
.spine-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}
.spine-item a {
    text-decoration: none;
    color: var(--c-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: color 150ms linear, background-color 150ms linear;
}
.spine-item .num {
    color: var(--c-teal);
    font-weight: 500;
}
.spine-item .lbl {
    color: var(--c-ink);
    letter-spacing: 0.22em;
}
.spine-item.is-active a {
    background: var(--c-ink);
    color: var(--c-bg);
}
.spine-item.is-active .num,
.spine-item.is-active .lbl {
    color: var(--c-bg);
}

/* ==== Independently-scrolling metadata stream (right gutter) ==== */
.stream {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--side-stream);
    height: 100vh;
    z-index: 80;
    background: var(--c-bg);
    border-left: 1px dashed rgba(10,10,10,0.3);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--c-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px 22px 80px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--c-teal) transparent;
}
.stream::-webkit-scrollbar { width: 6px; }
.stream::-webkit-scrollbar-thumb { background: var(--c-teal); }
.stream::-webkit-scrollbar-track { background: transparent; }

.stream-head {
    position: sticky;
    top: -28px;
    margin: -28px -22px 18px -22px;
    padding: 22px 22px 10px 22px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-ink);
    z-index: 2;
}
.stream-title {
    display: block;
    font-weight: 500;
    color: var(--c-ink);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.stream-sub {
    display: block;
    margin-top: 4px;
    color: var(--c-teal);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.stream-entry {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dotted rgba(74,124,111,0.35);
    line-height: 1.5;
}
.stream-entry .st-time {
    color: var(--c-rust);
    font-weight: 500;
    white-space: nowrap;
}
.stream-entry .st-note {
    color: var(--c-ink);
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 11.5px;
    line-height: 1.55;
}
.stream-entry--break {
    margin: 14px 0;
    padding: 14px 0;
    border-top: 2px solid var(--c-ink);
    border-bottom: 2px solid var(--c-ink);
    background: rgba(110,84,148,0.08);
}
.stream-entry--break .st-time { color: var(--c-violet); }

/* ==== Main scroll container (snap) ==== */
.transmissions {
    margin-left: var(--side-spine);
    margin-right: var(--side-stream);
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: auto;
    background: var(--c-bg);
}

/* ==== Transmission sections ==== */
.transmission {
    position: relative;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 80px var(--margin-outer) 80px calc(var(--margin-outer) - 40px);
    background: var(--c-bg);
    color: var(--c-ink);
    overflow: hidden;
}
.transmission--inverted {
    background: var(--c-void);
    color: var(--c-bg);
}
.transmission--right {
    background: var(--c-bg);
}

.section-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    height: calc(100vh - 160px);
    display: flex;
    align-items: center;
}

/* hard horizontal cut between sections */
.section-cut {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--cut);
    background: var(--c-ink);
    z-index: 5;
}
.section-cut--light {
    background: var(--c-bg);
}

/* Watermark transmission numbers */
.watermark {
    position: absolute;
    top: 40px;
    right: 60px;
    font-family: var(--f-mono);
    font-size: clamp(5rem, 14vw, 11rem);
    font-weight: 300;
    color: var(--c-amber);
    opacity: 0.3;
    letter-spacing: -0.02em;
    pointer-events: none;
    line-height: 0.9;
    z-index: 1;
}
.watermark--light {
    color: var(--c-amber);
    opacity: 0.28;
}
.watermark--right {
    right: auto;
    left: 40px;
}

/* ==== 8-column grid ==== */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gutter);
    width: 100%;
    position: relative;
    z-index: 2;
}
.grid--right {
    direction: ltr;
}

.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }

.col-offset-1 { grid-column: 2 / span 5; }
.col-offset-2 { grid-column: 3 / span 4; }
.col-offset-5 { grid-column: 6 / span 3; }

.col-push-1 { grid-column: 2 / span 3; }
.col-push-3 { grid-column: 4 / span 5; }
.col-push-4 { grid-column: 5 / span 4; }

.col-narrow { grid-column: 6 / span 3; align-self: end; }
.col-gutter { grid-column: 7 / span 2; }

.align-right { text-align: right; }

/* ==== Meta chips ==== */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
    font-family: var(--f-mono);
}
.meta-row--right { justify-content: flex-end; }

.meta-chip {
    display: inline-block;
    padding: 4px 9px;
    border: 1px solid var(--c-ink);
    color: var(--c-ink);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: transparent;
}
.meta-chip--teal      { border-color: var(--c-teal); color: var(--c-teal); }
.meta-chip--teal-light{ border-color: var(--c-teal); color: var(--c-teal); background: rgba(74,124,111,0.1); }
.meta-chip--amber     { border-color: var(--c-amber); color: var(--c-amber); background: rgba(212,136,58,0.08); }
.meta-chip--violet    { border-color: var(--c-violet); color: var(--c-violet); background: rgba(110,84,148,0.08); }
.meta-chip--rust      { border-color: var(--c-rust); color: var(--c-rust); }

.transmission--inverted .meta-chip {
    border-color: var(--c-bg);
    color: var(--c-bg);
}
.transmission--inverted .meta-chip--teal-light {
    border-color: var(--c-teal);
    color: var(--c-teal);
    background: rgba(74,124,111,0.14);
}
.transmission--inverted .meta-chip--amber {
    border-color: var(--c-amber);
    color: var(--c-amber);
}

/* ==== Headings ==== */
.h-display,
.h-large {
    font-family: var(--f-head);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: var(--c-ink);
    margin: 0 0 24px 0;
    position: relative;
}

.h-display {
    font-size: clamp(3rem, 8vw, 7rem);
}
.h-large {
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 600;
}

.transmission--inverted .h-display,
.transmission--inverted .h-large {
    color: var(--c-bg);
}

.h-display .line,
.h-large .line {
    display: block;
}

.h-display .line.ink-amber { color: var(--c-amber); }

/* Subheading (below h1) */
.h-sub {
    font-family: var(--f-body);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--c-teal);
    max-width: 40ch;
    margin: 10px 0 0 0;
    font-style: italic;
    letter-spacing: -0.005em;
}

/* ==== RGB channel-split glitch on headings ==== */
.glitch-heading {
    position: relative;
}
.glitch-heading.is-splitting {
    animation: rgb-split 800ms steps(3, end) 1;
    text-shadow:
        -2px 0 rgba(212, 136, 58, 0.85),
        2px 0 rgba(74, 124, 111, 0.85);
}
.transmission--inverted .glitch-heading.is-splitting {
    text-shadow:
        -2px 0 rgba(212, 136, 58, 0.9),
        2px 0 rgba(110, 84, 148, 0.9);
}
@keyframes rgb-split {
    0%   { text-shadow: 0 0 transparent, 0 0 transparent; }
    33%  {
        text-shadow:
            -3px 0 rgba(212, 136, 58, 0.9),
            3px 0 rgba(74, 124, 111, 0.9);
    }
    66%  {
        text-shadow:
            -2px 0 rgba(160, 82, 45, 0.8),
            2px 0 rgba(110, 84, 148, 0.8);
    }
    100% { text-shadow: 0 0 transparent, 0 0 transparent; }
}

/* ==== Body / paragraphs ==== */
.body-serif {
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    margin: 0 0 18px 0;
}
.body-serif--light {
    color: var(--c-bg);
}
.transmission--inverted .body-serif { color: var(--c-bg); }

.body-serif strong { color: var(--c-rust); font-weight: 600; }
.body-serif em { font-style: italic; color: var(--c-violet); }
.transmission--inverted .body-serif em { color: var(--c-amber); }

.lede {
    font-family: var(--f-body);
    font-size: 1.22rem;
    line-height: 1.55;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    margin: 0 0 22px 0;
    font-weight: 400;
    padding-left: 24px;
}
.lede em { color: var(--c-rust); font-style: italic; }

/* Drop cap */
.drop-cap::first-letter {
    font-family: var(--f-head);
    font-weight: 800;
    float: left;
    font-size: 3.6em;
    line-height: 0.85;
    padding: 6px 10px 0 0;
    color: var(--c-amber);
    text-transform: uppercase;
}

/* Caption-as-heading (intentional "wrong" font size) */
.caption-as-heading {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-amber);
    display: block;
    margin-bottom: 6px;
}

/* Perforated-tape edge (left margin of body blocks) */
.tape-edge {
    position: relative;
}
.tape-edge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 6px;
    background-image: radial-gradient(
        circle at 3px 3px,
        rgba(74,124,111,0.5) 0,
        rgba(74,124,111,0.5) 2px,
        transparent 2.5px
    );
    background-size: 6px 12px;
    background-repeat: repeat-y;
    opacity: 0.9;
}

/* ==== Tilts / anti-design offsets ==== */
.tilt-neg       { display: inline-block; transform: rotate(-2deg); transform-origin: left center; }
.tilt-neg-small { display: inline-block; transform: rotate(-1deg); }
.tilt-pos       { display: inline-block; transform: rotate(1.5deg); }
.tilt-pos-small { display: inline-block; transform: rotate(0.8deg); }
.is-big         { font-size: 1.08em; }

/* ==== Corner registration marks ==== */
.corner-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cm {
    position: absolute;
    width: 22px;
    height: 22px;
    opacity: 0.22;
    background:
        linear-gradient(var(--c-rust), var(--c-rust)) center/100% 1px no-repeat,
        linear-gradient(var(--c-rust), var(--c-rust)) center/1px 100% no-repeat;
}
.cm::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 1px solid var(--c-rust);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.cm-tl { top: -12px; left: -12px; }
.cm-tr { top: -12px; right: -12px; }
.cm-bl { bottom: -12px; left: -12px; }
.cm-br { bottom: -12px; right: -12px; }

/* ==== Figure / imagery ==== */
.t-figure {
    position: relative;
}
.img {
    position: relative;
    width: 100%;
    max-width: 280px;
    filter: contrast(1.4) grayscale(0.85) sepia(0.2);
}
.img svg {
    display: block;
    width: 100%;
    height: auto;
    filter: url(#noise);
}
.img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(10,10,10,0.08) 0 1px,
            transparent 1px 3px
        );
    pointer-events: none;
    mix-blend-mode: multiply;
}
.fig-cap {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-teal);
    margin-top: 10px;
    display: block;
}
.fig-cap--overlap {
    position: relative;
    margin-top: -6px;
    margin-left: -30px;
    color: var(--c-rust);
    background: var(--c-bg);
    padding: 4px 8px;
    display: inline-block;
    transform: rotate(-1deg);
}

/* Overlapping figure-left over body text */
.overlap-left {
    position: relative;
    z-index: 3;
    transform: translateX(-30px);
}
.overlap-up {
    position: relative;
    z-index: 4;
    margin-top: -18px;
}

/* ==== Readout (metadata dl) ==== */
.readout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 24px 0;
    color: var(--c-teal);
    border-left: 2px solid var(--c-teal);
    padding: 6px 0 6px 14px;
}
.transmission--inverted .readout {
    color: var(--c-amber);
    border-left-color: var(--c-amber);
}
.readout dt {
    color: var(--c-teal);
    font-weight: 500;
}
.transmission--inverted .readout dt { color: var(--c-amber); }
.readout dd {
    margin: 0;
    color: var(--c-ink);
    font-weight: 400;
}
.transmission--inverted .readout dd { color: var(--c-bg); }

.ink-amber { color: var(--c-amber); }
.ink-violet { color: var(--c-violet); }
.ink-mono {
    font-family: var(--f-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--c-teal);
}

/* Annotation text (small italic note) */
.annotation {
    font-family: var(--f-body);
    font-style: italic;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--c-teal);
    margin: 0 0 16px 0;
    letter-spacing: -0.005em;
    border-top: 1px solid rgba(74,124,111,0.4);
    padding-top: 14px;
}
.annotation--small {
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--c-teal);
}
.transmission--inverted .annotation { color: var(--c-amber); border-top-color: rgba(212,136,58,0.35); }

.sign-off {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-rust);
    margin: 18px 0 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--c-rust);
}

/* ==== Double-line HR (vintage telegram) ==== */
.hr-dbl {
    display: block;
    height: 10px;
    border: 0;
    border-top: 2px solid var(--c-teal);
    border-bottom: 2px solid var(--c-teal);
    background: transparent;
    margin: 22px 0;
}
.hr-dbl--amber {
    border-top-color: var(--c-amber);
    border-bottom-color: var(--c-amber);
}
.transmission--inverted .hr-dbl {
    border-top-color: var(--c-amber);
    border-bottom-color: var(--c-amber);
}

/* ==== Logbook (transmission 004) ==== */
.logbook-title {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-rust);
    border-bottom: 2px solid var(--c-ink);
    padding-bottom: 6px;
    margin: 0 0 14px 0;
    font-weight: 500;
}
.logbook {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--f-mono);
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: 0.04em;
}
.logbook li {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dotted rgba(10,10,10,0.25);
}
.log-date { color: var(--c-teal); font-weight: 500; }
.log-entry { color: var(--c-ink); text-transform: none; letter-spacing: 0.01em; }
.redacted {
    display: inline-block;
    background: var(--c-ink);
    color: var(--c-ink);
    padding: 0 4px;
    user-select: none;
}

/* ==== Tape strip (ribbon) ==== */
.tape-strip {
    grid-column: 1 / -1;
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-top: 1px solid var(--c-ink);
    border-bottom: 1px solid var(--c-ink);
    background: var(--c-bg);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-rust);
    overflow: hidden;
    white-space: nowrap;
    transform: rotate(-0.6deg);
}
.tape-strip span:nth-child(odd) { color: var(--c-rust); }
.tape-strip span:nth-child(even) { color: var(--c-teal); }

/* ==== Coda (end text block) ==== */
.coda {
    margin-top: 18px;
    text-align: center;
    color: var(--c-teal);
}
.coda .ink-mono {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--c-teal);
    background: transparent;
}

/* ==== Aside blocks ==== */
.t-aside,
.t-body,
.t-header,
.t-figure,
.t-gutter,
.t-logbook,
article.t-body {
    position: relative;
}

.t-aside {
    padding-top: 10px;
}

.t-gutter {
    padding: 12px 0 12px 16px;
    border-left: 1px dashed rgba(10,10,10,0.4);
}
.transmission--inverted .t-gutter {
    border-left-color: rgba(242,236,228,0.35);
}

/* ==== Responsive fallback ==== */
@media (max-width: 1100px) {
    :root {
        --side-stream: 220px;
        --margin-outer: 80px;
    }
}
@media (max-width: 900px) {
    :root {
        --side-spine: 40px;
        --side-stream: 0px;
        --margin-outer: 40px;
    }
    .stream { display: none; }
    .transmissions { margin-right: 0; }
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .col-span-5, .col-span-6, .col-span-7 { grid-column: 1 / -1; }
    .col-span-3, .col-span-4 { grid-column: 1 / -1; }
    .col-offset-1, .col-offset-2, .col-offset-5 { grid-column: 1 / -1; }
    .col-push-1, .col-push-3, .col-push-4 { grid-column: 1 / -1; }
    .col-narrow, .col-gutter { grid-column: 1 / -1; }
    .overlap-left { transform: none; }
    .watermark { font-size: 5rem; }
    .section-inner { height: auto; padding: 20px 0; }
    .transmission { padding: 60px 20px; }
}