/* =============================================================================
   The Global Race for Semiconductor Supremacy — stylesheet
   -----------------------------------------------------------------------------
   Scoped under .sup, plain CSS, loaded with {% static_v %}. Same family as
   derailment.css: grey paper, black crayon ink, one orange, Space Mono.

   Three "rooms" (data-room on .sup, set by supremacy.js from the active
   step): paper, the yellow light of a lithography bay, and the dark of the
   power chapter. Only the fixed .sup-room layer and the stage change colour;
   tickets and chart sheets keep their own paper, so text never loses
   contrast.

   Chart colours were checked with the dataviz validator: the heatmap ramps
   (light and dark) pass the ordinal checks; focus-orange vs context-grey is
   an emphasis pair (the grey is meant to read as grey).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
.sup {
    --ink: #191817;
    --ink-soft: #4d4945;
    --ink-mute: #7d7871;
    --orange: #ee6c1e;
    --orange-deep: #c9500f;
    --card: #f8f7f3;
    --card-line: #191817;
    --card-shadow: rgba(25, 24, 23, 0.92);
    --hair: rgba(25, 24, 23, 0.14);

    /* rooms */
    --room-paper: #eceae5;
    --room-yellow: #efd08a;
    --room-dark: #141311;
    --room: var(--room-paper);
    --stage-bg: #f6f4ef;
    --scene-ink: #191817;
    --scene-paper: #fbfaf6;

    /* charts */
    --c-focus: #e2601a;
    --c-ctx: #8e887f;
    --c-hair: rgba(25, 24, 23, 0.16);
    --h1: #e79a64; --h2: #dc7f3d; --h3: #cb6522; --h4: #ad5013; --h5: #853c0b; --h6: #5f2a06;
    --h-ink-light: #fff8f0;

    --nav-h: 62px;
    --p: 1;

    position: relative;
    color: var(--ink);
}
html.dark .sup {
    --ink: #ebe7df;
    --ink-soft: #bdb7ad;
    --ink-mute: #8f897f;
    --card: #1f1e1c;
    --card-line: rgba(235, 231, 223, 0.55);
    --card-shadow: rgba(0, 0, 0, 0.6);
    --hair: rgba(235, 231, 223, 0.14);
    --room-paper: #232120;
    --room-yellow: #3a2e12;
    --room-dark: #0b0a09;
    --stage-bg: #292724;
    --scene-ink: #ebe7df;
    --scene-paper: #34312d;
    --c-focus: #e2631c;
    --c-hair: rgba(235, 231, 223, 0.16);
    --h1: #8a4116; --h2: #a8521b; --h3: #c56524; --h4: #dd7c36; --h5: #ee9a5a; --h6: #f8bd8c;
    --h-ink-light: #1f1e1c;
}
.sup[data-room="yellow"] { --room: var(--room-yellow); --stage-bg: #f4dc9d; --scene-paper: #fbf0cf; }
html.dark .sup[data-room="yellow"] { --stage-bg: #463817; --scene-paper: #54451f; }
.sup[data-room="dark"] { --room: var(--room-dark); --stage-bg: #1b1a18; --scene-ink: #ebe7df; --scene-paper: #2b2926; }

.sup-room {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--room);
    transition: background-color 1.1s ease;
}
/* Paper grain, as in the Derailment Log. */
.sup-room::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.3 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark .sup-room::after { opacity: 0.1; filter: invert(1); }

.sup > :not(.sup-room):not(.sup-tip) { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   2. Hero, shared type
   -------------------------------------------------------------------------- */
.sup-hero {
    max-width: 46rem;
    margin: 0 auto;
    padding: 11rem 1.25rem 5rem;
}
@media (min-width: 768px) { .sup-hero { padding: 13rem 2rem 6rem; } }

.sup-back,
.sup-kicker {
    font-size: 9px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.sup-back { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; transition: color .3s; }
.sup-back:hover { color: var(--ink); }
.sup-kicker { margin-top: 2.5rem; color: var(--orange-deep); }
html.dark .sup-kicker { color: var(--orange); }

.sup-title {
    margin-top: 1.1rem;
    font-weight: 700;
    font-size: clamp(2.1rem, 6.4vw, 3.9rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
}
.sup-title__mark { position: relative; white-space: nowrap; }
.sup-title__mark::after {
    content: "";
    position: absolute;
    left: -0.04em; right: -0.06em; bottom: -0.12em; height: 0.2em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10 C 40 4, 80 13, 122 8 S 205 3, 244 9 S 286 12, 298 6' fill='none' stroke='%23ee6c1e' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M6 12 C 60 8, 110 14, 170 10 S 260 7, 294 10' fill='none' stroke='%23ee6c1e' stroke-width='2.4' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.sup-lede {
    margin-top: 1.9rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
.sup-lede::first-letter {
    float: left;
    font-size: 3.3em;
    line-height: .82;
    font-weight: 700;
    margin: .08em .12em 0 0;
    color: var(--ink);
}
.sup-meta {
    margin-top: 2rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-mute);
}
.sup-meta__dot { opacity: .6; }
.sup-cue {
    margin-top: 3rem;
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--ink-mute);
}
.sup-cue svg { animation: sup-bob 2.4s ease-in-out infinite; }
@keyframes sup-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* The rubber stamp, shared by tickets and chart sheets. */
.sup-stamp {
    display: inline-block;
    padding: .3rem .55rem .24rem;
    border: 2px solid currentColor;
    outline: 1px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--orange-deep);
    transform: rotate(-2.5deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='50'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.dark .sup-stamp { color: var(--orange); }

.sup-src {
    margin-top: 1rem;
    font-size: .72rem;
    line-height: 1.6;
    color: var(--ink-mute);
}
.sup-src a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.sup-src a:hover { color: var(--ink); }

/* -----------------------------------------------------------------------------
   3. The production line: stage + tickets
   -------------------------------------------------------------------------- */
.sup-line {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.sup-stage {
    position: sticky;
    top: var(--nav-h);
    z-index: 2;
    height: 46svh;
    padding: .6rem 0;
}
.sup-stage__frame {
    position: relative;
    height: 100%;
    background: var(--stage-bg);
    border: 1.5px solid var(--card-line);
    border-radius: 5px 8px 6px 9px / 8px 5px 9px 6px;
    box-shadow: 5px 5px 0 var(--card-shadow);
    transition: background-color 1.1s ease;
    overflow: hidden;
}
.sup-stage__count {
    position: absolute;
    top: .7rem; left: .9rem;
    z-index: 2;
    font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
    color: var(--scene-ink);
    opacity: .75;
}
.sup-stage__count b { color: var(--orange-deep); }
html.dark .sup-stage__count b, .sup[data-room="dark"] .sup-stage__count b { color: var(--orange); }
.sup-stage__rail {
    position: absolute;
    left: .9rem; right: .9rem; bottom: .7rem;
    z-index: 2;
    height: 3px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--scene-ink) 15%, transparent);
}
.sup-stage__fill {
    display: block;
    height: 100%;
    width: calc(var(--progress, 0) * 100%);
    border-radius: 2px;
    background: var(--orange);
}
.sup-defs { position: absolute; width: 0; height: 0; }
.sup-stage__scenes { position: absolute; inset: 2rem .8rem 1.4rem; }

.scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(10px) rotate(-.6deg);
    transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
    overflow: visible;
}
.scene.is-active { opacity: 1; transform: none; }
/* No JS: show the first scene only, as a picture. */
.sup:not(.js-on) .scene:first-of-type { opacity: 1; transform: none; }

/* Crayon ink. Fill classes come after .k so a shape can be both. */
.scene .k, .scene .k-thin, .scene .k-thin * {
    fill: none;
    stroke: var(--scene-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
}
.scene .k { stroke-width: 2.2; }
.scene .k-thin, .scene .k-thin * { stroke-width: 1.3; }
.scene .fg { fill: url(#sp-grey); }
.scene .fo { fill: url(#sp-orange); }
.scene .fd { fill: url(#sp-dark); }
.scene .fp { fill: var(--scene-paper); }
.scene .hole { fill: var(--stage-bg); stroke: var(--scene-ink); stroke-width: 1.6; }
.scene .lattice circle { fill: var(--scene-ink); opacity: .45; }
.scene .lbl {
    font-family: var(--font-typewriter);
    font-size: 11px;
    letter-spacing: .06em;
    fill: var(--scene-ink);
}
.scene .lbl--big { font-size: 14px; font-weight: 700; }
.scene .lbl--light { fill: #f6f4ef; }
.scene .beam-laser { stroke: var(--orange); stroke-width: 3; fill: none; stroke-linecap: round; }
.scene .beam-euv { stroke: var(--orange); stroke-width: 5; fill: none; opacity: .55; stroke-linejoin: round; }

/* --p driven motion (0 -> 1 through the active step; 1 without JS). */
.scene .draw { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); }
.scene .sc-slide { transform: translateX(calc((1 - var(--p)) * 90px)); opacity: calc(.15 + var(--p) * .85); }
.scene .sc-pencil { transform: translate(calc(var(--p) * 56px - 40px), calc(var(--p) * 90px - 60px)); }
.scene .sc-glow { opacity: calc(.25 + var(--p) * .75); }
.scene .sc-grow-down { transform-box: fill-box; transform-origin: top; transform: scaleY(calc(.12 + var(--p) * .88)); }
.scene .sc-wafer { transform: translateX(calc((1 - var(--p)) * -110px)) rotate(calc(var(--p) * 25deg)); }
.scene .sc-film { transform-box: fill-box; transform-origin: center; transform: scale(calc(.08 + var(--p) * .92)); }
.scene .sc-trench { transform-box: fill-box; transform-origin: top; transform: scaleY(calc(.04 + var(--p) * .96)); }
.scene .sc-needle { transform: rotate(calc(-72deg + var(--p) * 136deg)); }
.scene .layer,
.scene .dopant {
    opacity: clamp(0, calc(var(--p) * 5.5 - var(--i)), 1);
    transform: translateY(calc((1 - clamp(0, calc(var(--p) * 5.5 - var(--i)), 1)) * -14px));
}

/* Ambient motion (only while the scene is on screen; off for reduced motion). */
.scene.is-active .sc-rain circle { animation: sup-fall 1.8s linear infinite; }
.scene.is-active .sc-rain circle:nth-child(2n) { animation-delay: -.6s; }
.scene.is-active .sc-rain circle:nth-child(3n) { animation-delay: -1.2s; }
@keyframes sup-fall { from { transform: translateY(-14px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(60px); opacity: 0; } }

.scene.is-active .sc-droplets { animation: sup-drip-stream .45s linear infinite; }
@keyframes sup-drip-stream { from { transform: translateY(0); } to { transform: translateY(24px); } }
.scene.is-active .sc-plasma { transform-box: fill-box; transform-origin: center; animation: sup-pulse .45s ease-out infinite; }
@keyframes sup-pulse { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.15); opacity: .35; } }

.scene.is-active .sc-drop { animation: sup-drop 1.5s ease-in infinite; }
@keyframes sup-drop { from { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } to { transform: translateY(100px); opacity: 0; } }

.scene.is-active .sc-spin-arrows { stroke-dasharray: 10 8; animation: sup-dash 1s linear infinite; }
@keyframes sup-dash { to { stroke-dashoffset: -36; } }

.scene.is-active .sc-ions { animation: sup-ions 1.1s linear infinite; }
@keyframes sup-ions { from { transform: translateY(-10px); opacity: .2; } 30% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }

.scene.is-active .sc-glow,
.scene.is-active .sc-bolt { animation: sup-flicker 2.6s steps(1) infinite; }
@keyframes sup-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 11% { opacity: 1; } 57% { opacity: .7; } 60% { opacity: 1; } }

/* Tickets */
.sup-steps { position: relative; z-index: 1; padding: 4vh 0 30vh; }
.sup-step {
    min-height: 72svh;
    display: flex;
    align-items: center;
    padding: 2rem 0;
}
.sup-ticket {
    position: relative;
    width: 100%;
    background: var(--card);
    border: 1.5px solid var(--card-line);
    border-radius: 4px 7px 5px 8px / 7px 4px 8px 5px;
    box-shadow: 5px 5px 0 var(--card-shadow);
    padding: 1.4rem 1.4rem 1.2rem;
    transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.js-on .sup-step .sup-ticket { opacity: .42; transform: rotate(-.4deg) translateX(8px); }
.js-on .sup-step.is-active .sup-ticket { opacity: 1; transform: none; }
.sup-ticket__title {
    margin-top: 1rem;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    font-weight: 700;
    line-height: 1.25;
}
.sup-ticket__body {
    margin-top: .8rem;
    font-size: .9rem;
    line-height: 1.75;
    color: var(--ink-soft);
}
.sup-ticket__body code { padding: .05em .35em; border-radius: 3px; background: var(--hair); }
.sup-fact {
    margin-top: 1rem;
    padding: .55rem .75rem;
    border-left: 3px solid var(--orange);
    background: color-mix(in srgb, var(--orange) 9%, transparent);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.5;
}

@media (min-width: 900px) {
    .sup-line {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 4rem);
        padding: 0 2rem;
    }
    /* The frame takes the drawings' 4:3 shape and sits mid-height, rather
       than stretching the full column and floating the scene in space. */
    .sup-stage {
        height: calc(100vh - var(--nav-h));
        padding: 2rem 0;
        display: flex;
        align-items: center;
    }
    .sup-stage__frame { height: auto; width: 100%; aspect-ratio: 4 / 3.45; max-height: 100%; }
    .sup-steps { padding: 25vh 0 40vh; }
    .sup-step { min-height: 85vh; }
}

/* -----------------------------------------------------------------------------
   4. The race: chart sheets
   -------------------------------------------------------------------------- */
.sup-race {
    max-width: 58rem;
    margin: 0 auto;
    padding: 6rem 1rem 2rem;
}
.sup-race__head, .sup-outro { max-width: 42rem; }
.sup-race__head { margin: 0 auto 3.5rem; }
.sup-race__title {
    margin-top: 1rem;
    font-size: clamp(1.6rem, 4.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.12;
}
.sup-race__lede { margin-top: 1.2rem; font-size: .95rem; line-height: 1.8; color: var(--ink-soft); }
.sup-src--free { margin-top: 1.4rem; }

.sup-chart {
    margin: 0 0 3.5rem;
    background: var(--card);
    border: 1.5px solid var(--card-line);
    border-radius: 4px 7px 5px 8px / 7px 4px 8px 5px;
    box-shadow: 5px 5px 0 var(--card-shadow);
    padding: 1.4rem 1.2rem 1.2rem;
}
@media (min-width: 768px) { .sup-chart { padding: 1.9rem 2rem 1.6rem; } }
.sup-chart__title { margin-top: 1rem; font-size: clamp(1.1rem, 2.6vw, 1.4rem); font-weight: 700; line-height: 1.3; }
.sup-chart__lede { margin-top: .7rem; max-width: 40rem; font-size: .88rem; line-height: 1.75; color: var(--ink-soft); }
.sup-chart__plot { margin-top: 1.4rem; min-height: 60px; }
.sup-chart__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.sup-chart__foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1.5px dashed var(--hair); }
.sup-chart__note { font-size: .75rem; line-height: 1.65; color: var(--ink-soft); }

/* Chart marks and text (SVG built by supremacy.js). */
.cx text { font-family: var(--font-typewriter); fill: var(--ink-soft); font-size: 11px; }
.cx .t-strong { fill: var(--ink); font-weight: 700; }
.cx .t-mute { fill: var(--ink-mute); font-size: 10px; }
.cx .t-on-dark { fill: #fff8f0; }
.cx .t-on-light { fill: #2b1606; }
html.dark .cx .t-on-light { fill: #fff3e8; }   /* dark mode: low bins are the dark cells */
html.dark .cx .t-on-dark { fill: #1f1e1c; }
.cx .grid { stroke: var(--c-hair); stroke-width: 1; fill: none; }
.cx .axis { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.cx .m-focus { fill: var(--c-focus); }
.cx .m-ctx { fill: var(--c-ctx); }
.cx .m-proj { fill: url(#sup-hatch); stroke: var(--c-focus); stroke-width: 1.5; }
.cx .m-proj-ctx { fill: url(#sup-hatch-ctx); stroke: var(--c-ctx); stroke-width: 1.5; }
.cx .ref { stroke: var(--ink); stroke-width: 1.5; }
.cx .link-bar { fill: var(--c-ctx); }
.cx .dot-a { fill: var(--c-ctx); stroke: var(--card); stroke-width: 2; }
.cx .dot-b { fill: var(--c-focus); stroke: var(--card); stroke-width: 2; }
.cx .lane { stroke: var(--c-hair); stroke-width: 1; }
.cx .today { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 4; }
.cx .h0 { fill: transparent; stroke: var(--c-hair); stroke-width: 1; }
.cx .h1 { fill: var(--h1); } .cx .h2 { fill: var(--h2); } .cx .h3 { fill: var(--h3); }
.cx .h4 { fill: var(--h4); } .cx .h5 { fill: var(--h5); } .cx .h6 { fill: var(--h6); }
.cx .hit { fill: transparent; cursor: default; }
.cx .hit:focus { outline: none; }
.cx .hit:focus-visible + .focus-ring,
.cx .is-hover .focus-ring { opacity: 1; }
.cx .focus-ring { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; pointer-events: none; }
.cx .rise { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.cx:not(.is-in) .rise-x { transform: scaleX(0); }
.cx:not(.is-in) .rise-y { transform: scaleY(0); }
.cx:not(.is-in) .pop { opacity: 0; }
.cx .rise-x, .cx .rise-y { transform-box: fill-box; }
.cx .rise-x { transform-origin: left; }
.cx .rise-y { transform-origin: bottom; }
.cx .pop { transition: opacity .6s ease .4s; }

.sup-legend {
    display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
    margin-top: .8rem;
    font-size: .72rem; color: var(--ink-soft);
}
.sup-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.sup-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* Filter row (capacity chart). */
.sup-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.sup-tabs button {
    padding: .45rem .7rem .4rem;
    border: 1.5px solid var(--card-line);
    border-radius: 3px 5px 4px 6px;
    background: transparent;
    color: var(--ink);
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
    transition: background-color .25s, color .25s;
}
.sup-tabs button:hover { background: var(--hair); }
.sup-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.sup-tabs button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Stat tiles (EUV). */
.sup-tiles {
    list-style: none; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem;
    margin: 1.3rem 0 0;
}
@media (min-width: 640px) { .sup-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sup-tile {
    padding: .8rem .8rem .7rem;
    border: 1.5px dashed var(--card-line);
    border-radius: 4px 6px 5px 7px;
}
.sup-tile__value { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.sup-tile__label { display: block; margin-top: .35rem; font-size: .7rem; line-height: 1.45; color: var(--ink-soft); }

/* Table view. */
.sup-table { margin-top: 1rem; }
.sup-table summary {
    display: inline-block;
    cursor: pointer;
    font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
    border-bottom: 2px solid var(--orange);
    padding-bottom: .15rem;
}
.sup-table summary::-webkit-details-marker { display: none; }
.sup-table summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.sup-table__scroll { margin-top: .8rem; overflow-x: auto; }
.sup-table table { border-collapse: collapse; font-size: .72rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.sup-table th, .sup-table td { padding: .35rem .55rem; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; }
.sup-table td { text-align: right; }
.sup-table thead th { color: var(--ink-mute); font-weight: 400; }

/* Tooltip */
.sup-tip {
    position: fixed;
    z-index: 60;
    max-width: 17rem;
    padding: .55rem .7rem;
    background: var(--ink);
    color: var(--card);
    border-radius: 3px 5px 4px 6px;
    font-size: .74rem;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, .25);
}
.sup-tip b { color: var(--orange); }
.sup-tip[hidden] { display: none; }

/* -----------------------------------------------------------------------------
   5. Outro
   -------------------------------------------------------------------------- */
.sup-outro { margin: 0 auto; padding: 3rem 1.25rem 7rem; }
.sup-back--end { margin-top: 2rem; }

/* -----------------------------------------------------------------------------
   6. Reduced motion: scenes are finished drawings, nothing loops.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sup-room, .sup-stage__frame { transition: none; }
    .sup-cue svg { animation: none; }
    .scene { transition: opacity .3s ease; transform: none; }
    .scene.is-active * { animation: none !important; }
    .sup-ticket, .js-on .sup-step .sup-ticket { transform: none; transition: opacity .3s ease; }
    .cx .rise, .cx .pop { transition: none; }
    .cx:not(.is-in) .rise-x, .cx:not(.is-in) .rise-y { transform: none; }
    .cx:not(.is-in) .pop { opacity: 1; }
}