/* ============================================================
   monopole.boo — "fired clay & cold chrome"
   a quiet cyberpunk reliquary for a particle never found.
   ============================================================ */

:root {
    /* palette — fired clay & cold chrome */
    --kiln-black:   #161210;  /* dominant ground */
    --cooled-iron:  #2a211c;  /* secondary surfaces / band fills */
    --terracotta:   #c75b39;  /* primary accent — heated-magnet "neon" */
    --tungsten:     #e8a87c;  /* warm light tone / highlights */
    --bone-slip:    #f3e5d8;  /* lightest tone / prose on dark */
    --tank-teal:    #3aa6a0;  /* the one cool color — cooling water */
    --rust-shadow:  #7a3f2e;  /* deep shadow / diagonal seams */

    /* structural signature */
    --rake: -7deg;
    --rake-pos: 7deg;
    --shear-h: 8.6vw; /* vertical offset of a -7deg edge across 100vw ≈ tan(7°)*100vw */

    --font-display: "Chakra Petch", system-ui, sans-serif;
    --font-body: "Hanken Grotesk", system-ui, sans-serif;
    --font-mono: "Share Tech Mono", ui-monospace, monospace;

    --measure: 62ch;
    --ease-decay: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--kiln-black);
    color: var(--bone-slip);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.75;
    font-size: clamp(15px, 1.05vw + 9px, 18px);
    overflow-x: hidden;
    cursor: none;
}

@media (pointer: coarse) { body { cursor: auto; } }

::selection { background: rgba(199, 91, 57, 0.35); color: var(--bone-slip); }

a { color: var(--tungsten); }

/* ============================================================
   FIXED BACKGROUND — perspective grid (does NOT rake), haze, scanlines
   ============================================================ */
.bg-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 110%, rgba(199,91,57,0.07), transparent 60%),
        radial-gradient(80% 50% at 50% -10%, rgba(122,63,46,0.18), transparent 70%),
        var(--kiln-black);
}

.perspective-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}
.perspective-grid .grid-lines line {
    stroke: var(--terracotta);
    stroke-width: 1;
    stroke-opacity: 0.10;
    vector-effect: non-scaling-stroke;
}

.haze {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    mix-blend-mode: screen;
    opacity: 0.5;
}
.haze-a {
    width: 60vw; height: 60vw;
    left: -10vw; top: 4vh;
    background: radial-gradient(circle, rgba(232,168,124,0.30), transparent 65%);
    animation: hazeDrift1 52s ease-in-out infinite alternate;
}
.haze-b {
    width: 50vw; height: 50vw;
    right: -8vw; top: 38vh;
    background: radial-gradient(circle, rgba(122,63,46,0.40), transparent 65%);
    animation: hazeDrift2 64s ease-in-out infinite alternate;
}
.haze-c {
    width: 44vw; height: 44vw;
    left: 30vw; bottom: -10vh;
    background: radial-gradient(circle, rgba(58,166,160,0.16), transparent 65%);
    animation: hazeDrift3 48s ease-in-out infinite alternate;
}
@keyframes hazeDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw, 6vh) scale(1.15); } }
@keyframes hazeDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-7vw, -5vh) scale(1.2); } }
@keyframes hazeDrift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(5vw, -7vh) scale(1.1); } }

/* raked CRT scanlines */
.scanlines {
    position: absolute;
    inset: -20%;
    background: repeating-linear-gradient(
        var(--rake),
        rgba(199, 91, 57, 0.045) 0px,
        rgba(199, 91, 57, 0.045) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 0.6;
}

/* ============================================================
   HUD CHROME — corner brackets + hairline readout strip
   ============================================================ */
.hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

.hud-bracket { position: absolute; width: 26px; height: 26px; opacity: 0.5; }
.hud-bracket--tl { top: 14px; left: 14px; border-top: 1px solid var(--terracotta); border-left: 1px solid var(--terracotta); }
.hud-bracket--tr { top: 14px; right: 14px; border-top: 1px solid var(--terracotta); border-right: 1px solid var(--terracotta); }
.hud-bracket--bl { bottom: 14px; left: 14px; border-bottom: 1px solid var(--terracotta); border-left: 1px solid var(--terracotta); }
.hud-bracket--br { bottom: 14px; right: 14px; border-bottom: 1px solid var(--terracotta); border-right: 1px solid var(--terracotta); }

.hud-strip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 4px 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tungsten);
    background: rgba(22, 18, 16, 0.55);
    border: 1px solid rgba(199, 91, 57, 0.18);
    backdrop-filter: blur(3px);
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
}
.hud-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--tank-teal);
    box-shadow: 0 0 6px rgba(58, 166, 160, 0.8);
}
.hud-text--dim { color: var(--rust-shadow); }
.hud-text--mono { color: rgba(232, 168, 124, 0.5); }
.hud-sep { color: rgba(199, 91, 57, 0.35); }
.hud-sep--right { margin-left: 0.2em; }
@media (max-width: 720px) { .hud-text--mono, .hud-sep--right { display: none; } }

/* ============================================================
   CROSSHAIR RETICLE — lags the pointer with a spring
   ============================================================ */
.reticle {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    transform: translate(-50%, -50%);
    z-index: 90;
    pointer-events: none;
    will-change: transform;
}
.reticle-h, .reticle-v {
    position: absolute;
    background: rgba(199, 91, 57, 0.7);
}
.reticle-h { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.reticle-v { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.reticle-ring {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(232, 168, 124, 0.55);
    border-radius: 50%;
}
@media (pointer: coarse) { .reticle { display: none; } }

/* ============================================================
   TERRACE SYSTEM — full-bleed bands sheared at -7deg
   ============================================================ */
.terraces { position: relative; z-index: 10; }

.terrace {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-block: 14vh;
    overflow: hidden;
    /* clip top & bottom edges to the -7 deg rake */
    clip-path: polygon(0 var(--shear-h), 100% 0, 100% calc(100% - var(--shear-h)), 0 100%);
    margin-top: calc(var(--shear-h) * -0.5);
}
.terrace:first-child {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--shear-h)), 0 100%);
    margin-top: 0;
}
.terrace:last-child {
    clip-path: polygon(0 var(--shear-h), 100% 0, 100% 100%, 0 100%);
}

/* band fill colors alternate between iron and a deeper rust-tinted black */
.terrace--hero    { background: linear-gradient(170deg, #120f0d, #161210 60%, #1c1714); }
.terrace--explain { background: linear-gradient(var(--rake), var(--cooled-iron), #221b16); }
.terrace--timeline{ background: linear-gradient(var(--rake), #1b1612, #221a15); }
.terrace--tanks   { background: linear-gradient(var(--rake), #14181a, #101417 70%, #0e1316); }
.terrace--garden  { background: linear-gradient(var(--rake), #161210, #1b1411); }
.terrace--close   { background: linear-gradient(var(--rake), #1a1512, #120f0d); }

/* counter-rotate the inner content so text stays level while the band slopes */
.terrace-inner {
    width: min(1180px, 90vw);
    margin: 0 auto;
    transform: rotate(var(--rake-pos));
    transform-origin: center;
}
/* but only the band edges rake — flatten content rotation back, keeping it tidy */
.terrace-inner { transform: none; }

/* a raked underline under every terrace title — the structural signature */
.terrace-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.2rem, 5.5vw, 5rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin: 0.1em 0 0.6em;
    color: var(--bone-slip);
    text-transform: lowercase;
    position: relative;
    display: inline-block;
}
.terrace-title::after {
    content: "";
    position: absolute;
    left: 0; right: -0.4em;
    bottom: -0.18em;
    height: 2px;
    background: linear-gradient(90deg, var(--terracotta), rgba(199,91,57,0.05));
    transform: skewY(var(--rake));
    transform-origin: left;
}

.terrace-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(232, 168, 124, 0.55);
    margin: 0 0 0.4em;
}

.prose {
    max-width: var(--measure);
    color: var(--bone-slip);
    margin: 0 0 1.4em;
}
.prose--aside { color: rgba(232, 168, 124, 0.85); font-style: italic; }
.prose--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ============================================================
   TERRACE 1 — THE NULL READING (hero)
   ============================================================ */
.hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.4rem;
    /* generous ma — at least a terrace-width of emptiness around the glyph */
    padding-block: 2vh;
}
.terrace--hero .terrace-title { font-size: clamp(2.6rem, 7vw, 6rem); }

.glyph-wrap {
    width: clamp(220px, 30vw, 360px);
    margin: 1.4rem auto 1.8rem;
    filter: drop-shadow(0 0 28px rgba(199,91,57,0.18));
}
.monopole-glyph { width: 100%; height: auto; display: block; }
.monopole-glyph .glyph-n {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 150px;
    fill: var(--tungsten);
    letter-spacing: 0.02em;
}
.monopole-glyph .field-ring path,
.monopole-glyph .field-ring--inner path,
.monopole-glyph .field-stubs path { vector-effect: non-scaling-stroke; }

.monopole-glyph .field-ring { animation: ringSpin 120s linear infinite; transform-origin: 200px 200px; }
.monopole-glyph .field-ring--inner { animation: ringSpin 160s linear infinite reverse; transform-origin: 200px 200px; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* the instrument readout — the heart of the page */
.readout {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 1.1rem 1.8rem 1.3rem;
    border: 1px solid rgba(199, 91, 57, 0.25);
    background: linear-gradient(180deg, rgba(22,18,16,0.6), rgba(22,18,16,0.2));
    backdrop-filter: blur(2px);
    margin: 0.6rem 0 2rem;
    position: relative;
    clip-path: polygon(0 6px, 100% 0, 100% calc(100% - 6px), 0 100%);
}
.readout-label, .readout-unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(232, 168, 124, 0.5);
}
.readout-value {
    font-family: var(--font-mono);
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1;
    color: var(--terracotta);
    text-shadow: 0 0 18px rgba(199, 91, 57, 0.4), 0 0 2px rgba(232, 168, 124, 0.6);
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    margin: 0.25rem 0;
}
.readout-value.is-integrating { color: var(--tungsten); }
.readout-caption {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: rgba(243, 229, 216, 0.55);
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 1.2s ease;
    font-style: italic;
}
.readout-caption.is-shown { opacity: 1; }

.hero-note {
    max-width: 52ch;
    color: rgba(243, 229, 216, 0.75);
    font-size: 0.96rem;
    margin: 0.4rem auto 1.6rem;
}
.scroll-cue {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(232, 168, 124, 0.4);
    margin-top: 1rem;
    animation: cuePulse 4s ease-in-out infinite;
}
@keyframes cuePulse { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }

/* ============================================================
   COOLING CHANNELS between terraces — follow the -7deg rake
   ============================================================ */
.channel {
    position: relative;
    z-index: 12;
    height: clamp(70px, 9vh, 110px);
    margin-block: calc(var(--shear-h) * -0.55);
    transform: skewY(var(--rake));
    overflow: hidden;
    pointer-events: none;
}
.channel-svg { display: block; width: 100%; height: 100%; }
.channel-water {
    fill: rgba(58, 166, 160, 0.06);
    stroke: rgba(58, 166, 160, 0.18);
    stroke-width: 1;
}
.channel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(58,166,160,0.04), rgba(20,24,26,0.18));
}

/* fish sprites in the channels */
.fish {
    width: 64px; height: 31px;
    filter: drop-shadow(0 2px 5px rgba(58, 166, 160, 0.35));
    transform-box: fill-box;
}
/* channel viewBox is 1600x120; "width" on <use> in viewBox units */
.fish { width: 70; height: 34; }

@keyframes swimRight {
    0%   { transform: translate(-180px, 30px); }
    100% { transform: translate(1700px, 30px); }
}
@keyframes swimLeft {
    0%   { transform: translate(1700px, 60px) scaleX(-1); }
    100% { transform: translate(-180px, 60px) scaleX(-1); }
}
@keyframes bobA { 0%,100% { translate: 0 -10px; } 50% { translate: 0 14px; } }

.fish-1  { animation: swimRight 16s linear infinite; animation-delay: -3s; }
.fish-2  { animation: swimRight 19s linear infinite; animation-delay: -11s; }
.fish-3  { animation: swimLeft  21s linear infinite; animation-delay: -6s; }
.fish-4  { animation: swimRight 18s linear infinite; animation-delay: -2s; }
.fish-5  { animation: swimLeft  22s linear infinite; animation-delay: -14s; }
.fish-6  { animation: swimRight 15s linear infinite; animation-delay: -9s; }
.fish-7  { animation: swimLeft  20s linear infinite; animation-delay: -4s; }
.fish-8  { animation: swimRight 17s linear infinite; animation-delay: -12s; }
.fish-9  { animation: swimLeft  19s linear infinite; animation-delay: -7s; }
.fish-10 { animation: swimRight 22s linear infinite; animation-delay: -1s; }
.fish-11 { animation: swimLeft  16s linear infinite; animation-delay: -10s; }
.fish-12 { animation: swimRight 21s linear infinite; animation-delay: -5s; }

/* a rare, faster dart for the patient watcher */
.fish.is-darting { animation-duration: 5s !important; }

/* ============================================================
   TERRACE 2 — WHAT A MONOPOLE IS
   ============================================================ */
.explain-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}
@media (max-width: 880px) { .explain-layout { grid-template-columns: 1fr; } }

.magnet-scene {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background:
        radial-gradient(110% 60% at 50% 35%, rgba(232,168,124,0.10), transparent 60%),
        linear-gradient(180deg, #1b1512, #0f0c0a);
    border: 1px solid rgba(122, 63, 46, 0.35);
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.magnet-plinth {
    position: absolute;
    left: 8%; right: 8%; bottom: 12%;
    height: 22%;
    background: linear-gradient(180deg, #2a211c, #161210);
    border-radius: 3px;
    transform: perspective(420px) rotateX(48deg);
    box-shadow: 0 22px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(232,168,124,0.06);
}
.magnet-half {
    position: relative;
    width: 21%;
    height: 30%;
    border-radius: 4px;
    margin-bottom: 8%;
    display: flex;
    overflow: hidden;
    box-shadow: 0 14px 26px rgba(0,0,0,0.6), inset 0 1px 0 rgba(232,168,124,0.12);
    z-index: 2;
}
.magnet-half--left  { transform: translateX(-9%) rotate(-3deg); }
.magnet-half--right { transform: translateX(9%) rotate(4deg); }
.magnet-pole {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(0.9rem, 1.6vw, 1.3rem);
    letter-spacing: 0.04em;
}
.magnet-pole--n { background: linear-gradient(160deg, #d96b46, #b04e30); color: #2a120c; }
.magnet-pole--s { background: linear-gradient(160deg, #3d3833, #2a211c); color: var(--tungsten); }
.magnet-snap {
    position: absolute;
    top: -10%; bottom: -10%; right: -2px;
    width: 5px;
    background: repeating-linear-gradient(45deg, rgba(22,18,16,0.9) 0 3px, transparent 3px 6px);
}
.magnet-snap--right { right: auto; left: -2px; }
.magnet-keylight {
    position: absolute;
    top: -30%; left: 35%;
    width: 60%; height: 80%;
    background: radial-gradient(ellipse at center, rgba(232,168,124,0.20), transparent 65%);
    pointer-events: none;
    mix-blend-mode: screen;
}
.magnet-caption {
    position: absolute;
    left: 5%; bottom: 4%;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(232, 168, 124, 0.45);
}

/* ============================================================
   TERRACE 3 — NINETY YEARS OF LOOKING (raked timeline)
   ============================================================ */
.timeline {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 11px; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(199,91,57,0.4) 8%, rgba(199,91,57,0.4) 92%, transparent);
    transform: skewX(8deg);
    transform-origin: top;
}
.tl-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    padding: 0 0 0 0;
    margin-bottom: 2.2rem;
    align-items: start;
}
.tl-year {
    grid-row: 1 / span 2;
    font-family: var(--font-mono);
    font-size: clamp(1.2rem, 2.6vw, 2rem);
    color: var(--terracotta);
    text-shadow: 0 0 14px rgba(199, 91, 57, 0.3);
    letter-spacing: 0.04em;
    min-width: 5ch;
    position: relative;
    z-index: 2;
    background: var(--kiln-black);
    padding-right: 0.6rem;
}
.tl-line {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: stretch;
    width: 12px;
    position: relative;
}
.tl-card .tl-line::before {
    content: "";
    position: absolute;
    left: 5px; top: 0.7em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--terracotta);
    box-shadow: 0 0 10px rgba(199, 91, 57, 0.6);
    transform: skewX(8deg);
}
.tl-card { grid-template-columns: 6ch 1fr; }
.tl-card .tl-year { grid-column: 1; }
.tl-card .tl-line { display: none; }
.tl-body {
    grid-column: 2;
    padding-left: 1.4rem;
    border-left: 1px solid rgba(199, 91, 57, 0.25);
    position: relative;
}
.tl-body::before {
    content: "";
    position: absolute;
    left: -5px; top: 0.55em;
    width: 9px; height: 9px;
    background: var(--terracotta);
    box-shadow: 0 0 10px rgba(199, 91, 57, 0.6);
    transform: skewX(8deg);
}
.tl-head {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.05rem, 2vw, 1.5rem);
    letter-spacing: 0.03em;
    text-transform: lowercase;
    margin: 0 0 0.3em;
    color: var(--bone-slip);
}
.tl-text {
    margin: 0;
    max-width: 54ch;
    color: rgba(243, 229, 216, 0.78);
    font-size: 0.95rem;
}

/* ============================================================
   TERRACE 4 — THE COOLING TANKS (the quietest terrace)
   ============================================================ */
.terrace--tanks { min-height: 110vh; }
.tank-caustics {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}
.tank-caustics svg { width: 100%; height: 100%; }
.caustic-set path {
    stroke-opacity: 0.22;
    vector-effect: non-scaling-stroke;
    animation: causticFlow 18s ease-in-out infinite alternate;
}
.caustic-set path:nth-child(2) { animation-duration: 22s; animation-delay: -4s; }
.caustic-set path:nth-child(3) { animation-duration: 26s; animation-delay: -8s; }
.caustic-set path:nth-child(4) { animation-duration: 20s; animation-delay: -2s; }
@keyframes causticFlow {
    from { transform: translateX(-3%) scaleY(0.96); opacity: 0.4; }
    to   { transform: translateX(3%) scaleY(1.06); opacity: 0.85; }
}

.tank-fish-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.tank-fish-field svg { width: 100%; height: 100%; }
.tfish { transform-box: fill-box; }
.tfish { width: 90; height: 44; }
@keyframes tankSwimR {
    0%   { transform: translate(-160px, 120px) rotate(2deg); }
    25%  { transform: translate(420px, 60px) rotate(-3deg); }
    50%  { transform: translate(900px, 220px) rotate(1deg); }
    75%  { transform: translate(1300px, 100px) rotate(-2deg); }
    100% { transform: translate(1760px, 180px) rotate(2deg); }
}
@keyframes tankSwimL {
    0%   { transform: translate(1760px, 300px) scaleX(-1) rotate(2deg); }
    30%  { transform: translate(1100px, 380px) scaleX(-1) rotate(-2deg); }
    60%  { transform: translate(560px, 240px) scaleX(-1) rotate(2deg); }
    100% { transform: translate(-160px, 340px) scaleX(-1) rotate(-1deg); }
}
.tfish-1 { animation: tankSwimR 26s ease-in-out infinite; animation-delay: -2s; }
.tfish-2 { animation: tankSwimR 32s ease-in-out infinite; animation-delay: -14s; }
.tfish-3 { animation: tankSwimL 30s ease-in-out infinite; animation-delay: -8s; }
.tfish-4 { animation: tankSwimL 36s ease-in-out infinite; animation-delay: -20s; filter: drop-shadow(0 2px 6px rgba(58,166,160,0.5)); }
.tfish-5 { animation: tankSwimR 34s ease-in-out infinite; animation-delay: -5s; }

.tank-layout { position: relative; z-index: 3; }
.terrace-title--submerged { color: var(--bone-slip); opacity: 0.92; }
.terrace-title--submerged::after { background: linear-gradient(90deg, var(--tank-teal), rgba(58,166,160,0.05)); }
.prose--submerged {
    color: rgba(243, 229, 216, 0.7);
    text-shadow: 0 0 22px rgba(58, 166, 160, 0.08);
    max-width: 56ch;
}
.tank-overline {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(58, 166, 160, 0.55);
    margin-top: 1.4rem;
}

/* ============================================================
   TERRACE 5 — THE FIELD-LINE GARDEN
   ============================================================ */
.terrace--garden { min-height: 115vh; }
.garden-svg-wrap {
    margin-top: 2.4rem;
    border: 1px solid rgba(199, 91, 57, 0.16);
    border-radius: 4px;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 70%, rgba(122,63,46,0.10), transparent 60%);
    clip-path: polygon(0 8px, 100% 0, 100% calc(100% - 8px), 0 100%);
}
.garden-svg { display: block; width: 100%; height: auto; }
.garden-bundles path {
    vector-effect: non-scaling-stroke;
    stroke-opacity: 0.7;
    /* set up draw-on; controlled by JS adding .is-drawn */
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 2.5s var(--ease-decay);
}
.garden-bundles.is-drawn path { stroke-dashoffset: 0; }
.garden-bundles.is-drawn path { animation: fieldDrift 22s linear infinite; }
@keyframes fieldDrift {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1200; }
}
.garden-n {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 34px;
    fill: var(--tungsten);
}
.garden-halo { animation: ringSpin 90s linear infinite; }

/* ============================================================
   TERRACE 6 — LEAVE THE LIGHT ON
   ============================================================ */
.close-layout {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.4rem;
}
.readout--close { margin-top: 1.4rem; }
.close-line {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.1rem, 2.6vw, 1.7rem);
    letter-spacing: 0.02em;
    color: var(--bone-slip);
    max-width: 40ch;
    margin: 1.6rem auto 2rem;
    line-height: 1.6;
}
.close-glyph {
    width: clamp(120px, 18vw, 220px);
    opacity: 0.6;
    filter: drop-shadow(0 0 16px rgba(122,63,46,0.3));
}
.close-glyph svg { width: 100%; height: auto; display: block; }
.close-glyph .close-n {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 110px;
    fill: var(--rust-shadow);
}
.close-glyph g { animation: ringSpin 140s linear infinite reverse; transform-origin: 120px 120px; }

.site-footer {
    position: absolute;
    left: 0; right: 0;
    bottom: 6vh;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(232, 168, 124, 0.4);
    padding: 0 1rem;
}
.foot-sep { color: rgba(199, 91, 57, 0.3); margin: 0 0.5em; }
.foot-text--dim { color: rgba(122, 63, 46, 0.8); }
.foot-mark { color: rgba(232, 168, 124, 0.7); }

/* ============================================================
   REVEAL — slow fade + 24px rise; staggered by JS
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease-decay), transform 0.9s var(--ease-decay);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   REDUCED MOTION — flatten the rake, kill parallax & long loops
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root { --rake: 0deg; --rake-pos: 0deg; --shear-h: 0px; }
    html { scroll-behavior: auto; }
    .terrace, .terrace:first-child, .terrace:last-child { clip-path: none; margin-top: 0; }
    .channel { transform: none; }
    .scanlines { background-image: repeating-linear-gradient(0deg, rgba(199,91,57,0.04) 0 1px, transparent 1px 4px); }
    .haze, .field-ring, .field-ring--inner, .caustic-set path, .garden-halo, .close-glyph g,
    .fish, .tfish, .scroll-cue, .terrace-title::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .garden-bundles path { stroke-dashoffset: 0; transition: none; animation: none; }
    .reticle { display: none; }
    .terrace-title::after { transform: none; }
}

/* ============================================================
   small screens — tighten the shear so bands don't collapse
   ============================================================ */
@media (max-width: 640px) {
    :root { --shear-h: 5vw; }
    .terrace { padding-block: 10vh; }
    .glyph-wrap { width: clamp(180px, 56vw, 260px); }
    .hud-strip { bottom: 38px; font-size: 9px; }
}