/* =====================================================================
   tanso.markets — decaying cyberpunk surveillance exchange
   Color tokens carved from DESIGN.md
   ===================================================================== */

:root {
    --void-black: #08090C;
    --charcoal-abyss: #0E1117;
    --midnight-petrol: #0A1628;
    --bruised-violet: #1A0A28;
    --parchment-white: #E8E0D4;
    --warm-stone: #A8A093;
    --driftwood: #706A60;
    --terminal-green: #00FFB2;
    --corrupt-magenta: #FF3366;
    --drift-cyan: #3366FF;
    --burnt-umber: #2A2520;
    --daguerreotype-gold: #D4A76A;

    --col-max: 680px;
    --col-pad: clamp(1.25rem, 4vw, 2.5rem);

    --font-display: "Playfair Display", "Lora", Georgia, serif;
    --font-body: "Lora", Georgia, serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

    --scroll-progress: 0;
    --scroll-hue-r: 10;
    --scroll-hue-g: 22;
    --scroll-hue-b: 40;
}

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

html {
    scroll-behavior: smooth;
    background: var(--void-black);
}

body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.75;
    color: var(--warm-stone);
    background-color: rgb(var(--scroll-hue-r), var(--scroll-hue-g), var(--scroll-hue-b));
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    transition: background-color 600ms linear;
}

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

/* ----- Layer 0: atmosphere ----- */
.layer-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%,
            rgba(10, 22, 40, 0.55) 0%,
            transparent 70%),
        radial-gradient(ellipse 70% 80% at 50% 100%,
            rgba(26, 10, 40, 0.55) 0%,
            transparent 70%),
        linear-gradient(180deg,
            rgba(10, 22, 40, 0.4) 0%,
            rgba(8, 9, 12, 1) 35%,
            rgba(8, 9, 12, 1) 65%,
            rgba(26, 10, 40, 0.5) 100%);
    mix-blend-mode: normal;
    opacity: 0.95;
}

/* ----- Layer 1: perspective grid ----- */
.layer-grid {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.grid-floor {
    position: absolute;
    left: 50%;
    bottom: -10vh;
    width: 220vw;
    height: 70vh;
    transform: translateX(-50%) perspective(800px) rotateX(72deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(to right,
            rgba(232, 224, 212, 0.045) 1px,
            transparent 1px),
        linear-gradient(to bottom,
            rgba(232, 224, 212, 0.045) 1px,
            transparent 1px);
    background-size: 80px 60px;
    opacity: 0.7;
}

.grid-walls {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg,
            rgba(232, 224, 212, 0.025) 0%,
            transparent 8%,
            transparent 92%,
            rgba(232, 224, 212, 0.025) 100%);
    opacity: 0.6;
}

/* ----- Layer 2: ghosts and photographic fragments ----- */
.layer-ghosts {
    position: absolute;
    inset: 0 0 auto 0;
    height: 400vh;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.ghost-data {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terminal-green);
    opacity: 0.06;
    white-space: nowrap;
    user-select: none;
    text-shadow: 0 0 6px rgba(0, 255, 178, 0.2);
}

.photo-ghost {
    position: absolute;
    width: 26vw;
    height: 60vh;
    background:
        radial-gradient(ellipse at 50% 60%,
            rgba(212, 167, 106, 0.35) 0%,
            rgba(212, 167, 106, 0.18) 30%,
            transparent 65%),
        linear-gradient(180deg,
            transparent 0%,
            rgba(232, 224, 212, 0.12) 30%,
            rgba(232, 224, 212, 0.18) 50%,
            rgba(232, 224, 212, 0.08) 80%,
            transparent 100%);
    filter: blur(2px) saturate(0.4);
    opacity: 0.1;
    mix-blend-mode: screen;
}

.photo-ghost--alt {
    background:
        radial-gradient(circle at 50% 50%,
            rgba(212, 167, 106, 0.4) 0%,
            transparent 55%),
        linear-gradient(90deg,
            transparent 0%,
            rgba(232, 224, 212, 0.18) 50%,
            transparent 100%);
    width: 30vw;
    height: 50vh;
}

/* ----- Scanline overlay ----- */
.scanline-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(8, 9, 12, 0.08) 2px,
        rgba(8, 9, 12, 0.08) 4px
    );
    opacity: 0.55;
    mix-blend-mode: multiply;
    transition: opacity 250ms ease-out;
}

body.glitch-event .scanline-overlay {
    opacity: 1;
}

/* ----- Static burst ----- */
.static-burst {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='1' height='1' x='0' y='0' fill='%23ffffff'/><rect width='1' height='1' x='2' y='1' fill='%23ffffff'/><rect width='1' height='1' x='1' y='3' fill='%23000000'/><rect width='1' height='1' x='3' y='2' fill='%23ffffff'/><rect width='1' height='1' x='0' y='2' fill='%23000000'/></svg>");
    background-size: 4px 4px;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 60ms steps(2, end);
}

body.static-burst-on .static-burst {
    opacity: 0.18;
}

/* ----- Vignette ----- */
.vignette {
    position: fixed;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%,
        transparent 40%,
        rgba(8, 9, 12, 0.4) 75%,
        rgba(8, 9, 12, 0.85) 100%);
}

/* ----- Main column ----- */
.column {
    position: relative;
    z-index: 10;
    max-width: var(--col-max);
    margin: 0 auto;
    padding: 0 var(--col-pad) 12vh;
}

/* ----- Header zone ----- */
.header-zone {
    min-height: 100vh;
    padding-top: 14vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: relative;
}

.brand {
    margin-top: 4rem;
    font-family: var(--font-display);
    font-weight: 700;
    text-align: left;
    line-height: 1;
    color: var(--parchment-white);
    letter-spacing: 0.06em;
    position: relative;
}

.brand-primary {
    display: inline-block;
    font-size: clamp(3rem, 7vw, 5rem);
    color: var(--parchment-white);
}

.brand-primary .ch {
    display: inline-block;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 220ms ease-out, transform 220ms ease-out;
    position: relative;
}

.brand-primary .ch.is-glitching {
    color: var(--parchment-white);
    text-shadow:
        -2px 0 0 var(--corrupt-magenta),
        2px 0 0 var(--drift-cyan);
}

.brand-primary .ch.is-revealed {
    opacity: 1;
    transform: translateX(0) !important;
    text-shadow: none;
}

.brand-secondary {
    display: inline-block;
    margin-left: 0.15em;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    color: var(--driftwood);
    letter-spacing: 0.03em;
    opacity: 0;
    transition: opacity 600ms ease-out 1200ms;
}

.brand.is-revealed .brand-secondary {
    opacity: 1;
}

.header-readout {
    margin-top: 2rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: var(--terminal-green);
    opacity: 0;
    transition: opacity 800ms ease-out 1500ms;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    text-transform: uppercase;
}

.brand.is-revealed ~ .header-readout {
    opacity: 0.7;
}

.readout-label {
    color: var(--driftwood);
}

.readout-sep {
    color: var(--burnt-umber);
}

.rule {
    margin-top: 3rem;
    height: 1px;
    width: 100%;
    position: relative;
}

.rule-line {
    display: block;
    height: 1px;
    width: 0%;
    margin: 0 auto;
    background: var(--terminal-green);
    opacity: 0;
    transition: width 800ms ease-out 1700ms, opacity 600ms ease-out 1700ms;
    box-shadow: 0 0 10px rgba(0, 255, 178, 0.3);
}

.rule.is-revealed .rule-line {
    width: 100%;
    opacity: 0.4;
    animation: pulse-rule 4s ease-in-out infinite;
}

@keyframes pulse-rule {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* ----- Sessions ----- */
.session {
    margin-top: clamp(4rem, 8vh, 8rem);
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    transition: opacity 600ms ease-out, transform 600ms ease-out, filter 600ms ease-out;
}

.session.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.session-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
    color: var(--terminal-green);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.55;
}

.divider-dash {
    height: 1px;
    background: var(--burnt-umber);
    flex: 0 0 auto;
    width: 0;
    transition: width 700ms ease-out 200ms;
}

.session.is-visible .divider-dash--left {
    width: 1.5rem;
}

.session.is-visible .divider-dash--right {
    width: 100%;
    flex: 1 1 auto;
    background: linear-gradient(90deg, var(--burnt-umber) 0%, transparent 100%);
}

.divider-label {
    white-space: nowrap;
}

.session-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: var(--parchment-white);
    margin-bottom: 1.5rem;
    position: relative;
    transition: text-shadow 150ms ease-out, transform 150ms ease-out;
}

.session-heading.is-rgb-split {
    text-shadow:
        -2px 0 0 rgba(255, 51, 102, 0.55),
        2px 0 0 rgba(51, 102, 255, 0.55);
    transform: translateX(2px);
}

body.glitch-event .session-heading {
    text-shadow:
        -3px 0 0 rgba(255, 51, 102, 0.7),
        3px 0 0 rgba(51, 102, 255, 0.7);
}

.session-paragraph {
    margin-bottom: 1.6rem;
    color: var(--warm-stone);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.75;
}

.session-paragraph em {
    color: var(--parchment-white);
    font-style: italic;
}

.session-paragraph strong {
    color: var(--parchment-white);
    font-weight: 700;
}

/* Pull quote */
.pull-quote {
    margin: 2.5rem 0 2.5rem 2rem;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(0, 255, 178, 0.4);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.3;
    color: var(--parchment-white);
    letter-spacing: 0.02em;
    position: relative;
}

.pull-quote::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--terminal-green);
    opacity: 0.4;
    box-shadow: 0 0 8px rgba(0, 255, 178, 0.3);
}

/* Readout rows */
.readout-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.2rem 0;
    margin: 2rem 0;
    border-top: 1px solid var(--burnt-umber);
    border-bottom: 1px solid var(--burnt-umber);
    font-family: var(--font-mono);
    transition: background 200ms ease-out, opacity 200ms ease-out;
    cursor: default;
}

.readout-row:hover {
    background: rgba(0, 255, 178, 0.02);
}

.readout-row:hover .readout-figure {
    color: var(--terminal-green);
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 255, 178, 0.3);
}

.readout-tag {
    color: var(--driftwood);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.readout-figure {
    color: var(--terminal-green);
    opacity: 0.7;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: color 200ms ease-out, opacity 200ms ease-out, text-shadow 200ms ease-out;
}

.readout-figure--negative {
    color: var(--corrupt-magenta);
}

.readout-row:hover .readout-figure--negative {
    color: var(--corrupt-magenta);
    text-shadow: 0 0 10px rgba(255, 51, 102, 0.4);
}

.readout-figure--hash {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    letter-spacing: 0.12em;
}

.readout-unit {
    color: var(--driftwood);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.readout-unit sub {
    font-size: 0.7em;
}

/* Data chart */
.data-chart {
    margin: 2.5rem 0;
    padding: 1.5rem;
    background:
        linear-gradient(180deg,
            rgba(14, 17, 23, 0.6) 0%,
            rgba(14, 17, 23, 0.3) 100%);
    border-top: 1px solid var(--burnt-umber);
    border-bottom: 1px solid var(--burnt-umber);
    position: relative;
}

.data-chart svg {
    width: 100%;
    height: 200px;
    display: block;
    overflow: visible;
}

.chart-grid line {
    stroke: var(--burnt-umber);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    opacity: 0.6;
}

.chart-fill {
    fill: url(#chartGrad);
    opacity: 0.7;
}

.chart-line {
    fill: none;
    stroke: var(--terminal-green);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(0, 255, 178, 0.45));
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 1800ms ease-out;
}

.session.is-visible .chart-line {
    stroke-dashoffset: 0;
}

.chart-marks circle {
    fill: var(--corrupt-magenta);
    filter: drop-shadow(0 0 4px rgba(255, 51, 102, 0.6));
    opacity: 0;
    transition: opacity 300ms ease-out 1500ms;
}

.session.is-visible .chart-marks circle {
    opacity: 0.9;
}

.chart-axis {
    margin-top: 0.6rem;
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: var(--driftwood);
    text-transform: uppercase;
}

/* ----- Photo frames ----- */
.photo-frame {
    position: relative;
    width: 100%;
    margin: clamp(3rem, 6vh, 5rem) 0;
    overflow: hidden;
    border-top: 1px solid var(--burnt-umber);
    border-bottom: 1px solid var(--burnt-umber);
    background: var(--void-black);
    transition: filter 220ms ease-out;
    cursor: default;
    isolation: isolate;
}

.photo-frame--hero {
    width: 100%;
    height: 60vh;
    margin: 0;
    border-top: none;
    border-bottom: 1px solid rgba(42, 37, 32, 0.6);
}

.photo-frame--rails,
.photo-frame--gauge,
.photo-frame--hands {
    height: clamp(40vh, 60vh, 70vh);
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    transition: opacity 700ms ease-out, transform 700ms ease-out, filter 700ms ease-out;
}

.photo-frame.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.photo-frame:hover .photo-grain {
    opacity: 0.32;
}

.photo-frame:hover {
    filter: drop-shadow(-2px 0 0 rgba(255, 51, 102, 0.4)) drop-shadow(2px 0 0 rgba(51, 102, 255, 0.4));
}

.photo-noise {
    position: absolute;
    inset: 0;
    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'/><feColorMatrix values='0 0 0 0 0.83  0 0 0 0 0.78  0 0 0 0 0.71  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    mix-blend-mode: screen;
    opacity: 0.5;
    pointer-events: none;
    z-index: 4;
    transition: opacity 1800ms ease-out;
}

.photo-frame.is-resolved .photo-noise {
    opacity: 0.18;
}

.photo-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: 0.18;
    pointer-events: none;
    z-index: 5;
    transition: opacity 200ms ease-out;
}

.photo-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 2px,
        rgba(8, 9, 12, 0.18) 2px,
        rgba(8, 9, 12, 0.18) 3px
    );
    mix-blend-mode: multiply;
    z-index: 6;
    pointer-events: none;
}

.photo-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,
        transparent 40%,
        rgba(8, 9, 12, 0.55) 80%,
        rgba(8, 9, 12, 0.95) 100%);
    z-index: 7;
    pointer-events: none;
}

.photo-caption {
    position: absolute;
    bottom: 0.8rem;
    left: 1.2rem;
    right: 1.2rem;
    z-index: 8;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--terminal-green);
    opacity: 0.5;
    text-transform: uppercase;
}

/* Hero photo: smokestacks */
.photo-stack {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(212, 167, 106, 0.18) 0%,
            transparent 35%,
            transparent 70%,
            rgba(8, 9, 12, 0.5) 100%);
}

.stack {
    position: absolute;
    bottom: 0;
    background:
        linear-gradient(180deg,
            rgba(232, 224, 212, 0.22) 0%,
            rgba(212, 167, 106, 0.32) 60%,
            rgba(8, 9, 12, 0.95) 100%);
    box-shadow:
        inset 1px 0 0 rgba(232, 224, 212, 0.18),
        inset -1px 0 0 rgba(8, 9, 12, 0.5);
    filter: blur(0.4px);
}

.stack--1 { left: 8%; width: 6%; height: 78%; }
.stack--2 { left: 22%; width: 8%; height: 68%; }
.stack--3 { left: 40%; width: 10%; height: 88%; }
.stack--4 { left: 60%; width: 7%; height: 64%; }
.stack--5 { left: 78%; width: 9%; height: 74%; }

.smoke {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(232, 224, 212, 0.4) 0%,
            rgba(212, 167, 106, 0.15) 40%,
            transparent 70%);
    filter: blur(8px);
    mix-blend-mode: screen;
}

.smoke--1 { left: 5%; top: 5%; width: 22%; height: 30%; }
.smoke--2 { left: 35%; top: 0%; width: 30%; height: 38%; }
.smoke--3 { right: 5%; top: 8%; width: 24%; height: 28%; }

/* Rails photo */
.photo-rails {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 100%,
            rgba(212, 167, 106, 0.2) 0%,
            transparent 60%),
        linear-gradient(180deg,
            rgba(8, 9, 12, 0.6) 0%,
            rgba(8, 9, 12, 0.2) 50%,
            rgba(8, 9, 12, 0.8) 100%);
    perspective: 600px;
    overflow: hidden;
}

.rail {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(232, 224, 212, 0.4) 60%,
        rgba(232, 224, 212, 0.7) 100%);
    transform-origin: 50% 100%;
    filter: blur(0.3px);
}

.rail--1 { left: 30%; transform: translateZ(0) rotate(-18deg); }
.rail--2 { left: 42%; transform: translateZ(0) rotate(-6deg); }
.rail--3 { left: 58%; transform: translateZ(0) rotate(6deg); }
.rail--4 { left: 70%; transform: translateZ(0) rotate(18deg); }

.rail-tie {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 167, 106, 0.5) 50%,
        transparent 100%);
    left: 50%;
    transform: translateX(-50%);
    filter: blur(0.4px);
}

.rail-tie--1 { bottom: 5%; width: 70%; }
.rail-tie--2 { bottom: 18%; width: 56%; }
.rail-tie--3 { bottom: 30%; width: 44%; }
.rail-tie--4 { bottom: 42%; width: 34%; }
.rail-tie--5 { bottom: 54%; width: 26%; }
.rail-tie--6 { bottom: 64%; width: 18%; }
.rail-tie--7 { bottom: 72%; width: 12%; }

.rail-vanish {
    position: absolute;
    top: 26%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2px;
    background: rgba(232, 224, 212, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(212, 167, 106, 0.6);
}

/* Gauge photo */
.photo-gauge {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(212, 167, 106, 0.25) 0%,
            transparent 60%),
        linear-gradient(180deg,
            rgba(8, 9, 12, 0.4) 0%,
            rgba(8, 9, 12, 0.7) 100%);
}

.gauge-ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(232, 224, 212, 0.3);
    aspect-ratio: 1;
}

.gauge-ring--outer {
    width: 50%;
    border-width: 2px;
    border-color: rgba(232, 224, 212, 0.4);
    box-shadow: 0 0 30px rgba(212, 167, 106, 0.18) inset;
}

.gauge-ring--mid {
    width: 42%;
    border-width: 1px;
    border-color: rgba(232, 224, 212, 0.18);
}

.gauge-ring--inner {
    width: 12%;
    border-width: 1px;
    border-color: rgba(212, 167, 106, 0.5);
    background: radial-gradient(circle,
        rgba(212, 167, 106, 0.18) 0%,
        transparent 70%);
}

.gauge-needle {
    position: absolute;
    width: 2px;
    height: 22%;
    background: linear-gradient(180deg,
        rgba(232, 224, 212, 0.9) 0%,
        rgba(212, 167, 106, 0.6) 100%);
    transform-origin: 50% 100%;
    bottom: 50%;
    left: calc(50% - 1px);
    transform: rotate(38deg);
    filter: drop-shadow(0 0 4px rgba(212, 167, 106, 0.4));
    animation: needle-drift 8s ease-in-out infinite;
}

@keyframes needle-drift {
    0%, 100% { transform: rotate(36deg); }
    50% { transform: rotate(42deg); }
}

.gauge-pivot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--daguerreotype-gold);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(212, 167, 106, 0.6);
}

.gauge-tick {
    position: absolute;
    width: 1px;
    height: 8px;
    background: rgba(232, 224, 212, 0.5);
    transform-origin: 50% 0;
}

.gauge-tick--n { top: calc(50% - 25%); left: calc(50% - 0.5px); transform: translateY(0); }
.gauge-tick--ne { top: calc(50% - 17%); left: calc(50% + 16%); transform: rotate(45deg); }
.gauge-tick--e { top: calc(50% - 0.5px); left: calc(50% + 23%); transform: rotate(90deg); width: 8px; height: 1px; }
.gauge-tick--se { top: calc(50% + 16%); left: calc(50% + 16%); transform: rotate(135deg); }
.gauge-tick--s { top: calc(50% + 23%); left: calc(50% - 0.5px); transform: rotate(180deg); }
.gauge-tick--sw { top: calc(50% + 16%); left: calc(50% - 17%); transform: rotate(225deg); }
.gauge-tick--w { top: calc(50% - 0.5px); left: calc(50% - 25%); transform: rotate(270deg); width: 8px; height: 1px; }
.gauge-tick--nw { top: calc(50% - 17%); left: calc(50% - 17%); transform: rotate(315deg); }

/* Hands photo */
.photo-hands {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 70%,
            rgba(212, 167, 106, 0.3) 0%,
            transparent 55%),
        linear-gradient(180deg,
            rgba(8, 9, 12, 0.8) 0%,
            rgba(8, 9, 12, 0.3) 50%,
            rgba(8, 9, 12, 0.85) 100%);
    overflow: hidden;
}

.hand-form {
    position: absolute;
    background:
        radial-gradient(ellipse,
            rgba(232, 224, 212, 0.45) 0%,
            rgba(212, 167, 106, 0.28) 40%,
            transparent 70%);
    border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
    filter: blur(6px);
    mix-blend-mode: screen;
}

.hand-form--1 {
    top: 30%;
    left: 18%;
    width: 28%;
    height: 32%;
    transform: rotate(-12deg);
}

.hand-form--2 {
    top: 38%;
    right: 20%;
    width: 26%;
    height: 30%;
    transform: rotate(14deg);
}

.hand-form--3 {
    top: 50%;
    left: 38%;
    width: 24%;
    height: 28%;
    transform: rotate(2deg);
    opacity: 0.7;
}

.hand-shadow {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 30%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(8, 9, 12, 0.7) 100%);
}

/* ----- Terminal footer ----- */
.terminal-footer {
    margin-top: clamp(6rem, 12vh, 12rem);
    padding-top: 4rem;
    padding-bottom: 8rem;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.14em;
    color: var(--terminal-green);
    border-top: 1px solid var(--burnt-umber);
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.terminal-prompt {
    opacity: 0.6;
}

.terminal-cursor {
    color: var(--terminal-green);
    opacity: 1;
    animation: cursor-blink 1.06s step-end infinite;
    text-shadow: 0 0 8px rgba(0, 255, 178, 0.5);
    font-weight: 500;
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* ----- Glitch event styles ----- */
body.glitch-event .column {
    transform: translateX(6px);
    transition: transform 60ms ease-out;
}

body:not(.glitch-event) .column {
    transition: transform 240ms ease-out;
}

body.glitch-event .photo-frame {
    filter: drop-shadow(-3px 0 0 rgba(255, 51, 102, 0.6)) drop-shadow(3px 0 0 rgba(51, 102, 255, 0.6));
}

/* Horizontal tear effect */
body.tear-event::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: var(--tear-y, 50vh);
    height: 12px;
    z-index: 70;
    background: rgba(232, 224, 212, 0.06);
    transform: translateX(8px);
    box-shadow:
        0 0 0 1px rgba(255, 51, 102, 0.3),
        inset 0 0 0 1px rgba(51, 102, 255, 0.3);
    pointer-events: none;
    animation: tear-flicker 200ms steps(2, end) forwards;
}

@keyframes tear-flicker {
    0% { opacity: 1; transform: translateX(8px); }
    50% { opacity: 0.7; transform: translateX(4px); }
    100% { opacity: 0; transform: translateX(0); }
}

/* ----- Responsive tweaks ----- */
@media (max-width: 540px) {
    .pull-quote {
        margin-left: 0;
    }

    .header-readout {
        font-size: 0.68rem;
    }

    .photo-frame--hero {
        height: 48vh;
    }

    .photo-frame--rails,
    .photo-frame--gauge,
    .photo-frame--hands {
        height: 42vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 80ms !important;
    }
}