/* ============ LAYOUT ============ */
  .wrap { max-width: 60.5rem; margin: 0 auto; padding: 0 1.5rem; }
  .band { padding: 6rem 0; border-top: 1px solid var(--ink-line); }
  .band--tint { background: var(--tint); }
  .band--navy { background: var(--navy); border-top: none; }

  /* the room plaque: mono, wide-tracked, the way a gallery labels a doorway */
  .overline {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-family: var(--mono); font-size: 0.72rem; font-weight: 400;
    letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--spot); margin-bottom: 1.6rem;
  }
  .overline .n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.7rem; height: 1.7rem; padding: 0 0.45rem; margin: 0;
    background: var(--ink); color: var(--paper); border-radius: 0;
    font-size: 0.9rem; font-weight: 800; letter-spacing: 0;
  }
  .band--navy .overline .n { background: var(--amber); color: var(--ink); }

  /* In the museum the wing and the volume ARE the address, so a room labels
     itself the way the walkbar and the shelf already do. One registry, no
     second numbering to drift. The linear page keeps its own label. */
  .js body[data-screen="wing"] .section-head .overline > .rm { display: none; }
  .js body[data-screen="wing"] .section-head .overline::before { content: attr(data-room); }

  /* ROOM THRESHOLD */
  .section-head {
    position: relative;
    will-change: transform, opacity, filter;
    transform-origin: center 45%;
    min-height: 78vh;
    display: flex; flex-direction: column; justify-content: center;
    max-width: 52rem; margin: 0 auto 4.5rem; text-align: center;
    /* clear the fixed nav so a room's name is never hidden behind it */
    padding: 7rem 0 3rem;
  }
  /* the spotlight pooling on the threshold wall */
  .section-head::before {
    content: ''; position: absolute; inset: -10% -30% -20%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side at 50% 44%, rgba(242,196,107,0.10), rgba(242,196,107,0) 72%);
  }
  .section-head h2 {
    font-family: var(--display); font-optical-sizing: auto;
    font-weight: 500; font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 1.0; letter-spacing: -0.025em; margin-bottom: 1rem;
    text-wrap: balance;
  }
  .section-head .lede { margin-left: auto; margin-right: auto; }
  /* the rule under a room name centres with it */
  .section-head h2::after { margin-left: auto; margin-right: auto; }
  /* the overline becomes the room's plaque: ROOM 03 · SAFETY */
  .section-head .overline { justify-content: center; }
  @media (max-width: 760px) {
    .section-head { min-height: 62vh; margin-bottom: 3rem; }
  }
  .lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.42rem); line-height: 1.5; color: var(--muted); max-width: 40rem; }

  p + p { margin-top: 1.1rem; }
  .prose { max-width: 42rem; font-size: 1rem; }
  .prose strong { font-weight: 600; color: var(--ink); }

  /* ============ HERO (asymmetric editorial) ============ */
  .hero {
    position: relative; overflow: clip;
    min-height: auto;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 7rem 0 3.5rem;
  }
  /* .wrap centres itself with auto side margins, and auto margins beat align-items: stretch on a flex item, so it would shrink-wrap to its content here and squeeze the hub grid into one. */
  .hero > .wrap.hero-hub { width: 100%; }
  #hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero__veil {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(95deg, var(--paper) 24%, rgba(10,14,23,0.62) 56%, rgba(10,14,23,0.05) 100%),
      linear-gradient(0deg, var(--paper), rgba(10,14,23,0) 36%);
  }
  .hero .wrap { position: relative; z-index: 2; }
  .hero__grid { flex: 1; display: flex; align-items: center; padding: 2rem 1.5rem; }
  .hero__lead { max-width: 42rem; }
  .hero .overline { margin-bottom: 1.7rem; }
  .hero h1 {
    font-family: var(--display); font-optical-sizing: auto; font-weight: 500;
    font-size: clamp(3rem, 8.5vw, 6.2rem); line-height: 0.96;
    letter-spacing: -0.03em; margin-bottom: 1.7rem;
  }
  .hero h1 em { font-style: italic; font-weight: 500; color: var(--blue-deep); }
  .hero__lede {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.45;
    color: var(--muted); max-width: 34rem; margin-bottom: 2rem;
  }
  .hero__cta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
  .hero__byline { font-size: 0.96rem; color: var(--muted); }

  .hero-stats {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--ink-line);
  }
  .hstat {
    text-decoration: none; padding: 1.7rem 1.9rem 2rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    transition: background 0.25s;
  }
  .hstat + .hstat { border-left: 1px solid var(--ink-line); }
  .hstat:hover { background: rgba(242,196,107,0.045); }
  .hstat .idx { font-family: var(--sans); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
  .hstat .n {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(2.2rem, 4.6vw, 3.3rem); line-height: 1;
    color: var(--ink); letter-spacing: -0.02em; margin-top: 0.2rem;
    transition: color 0.25s;
  }
  .hstat .n .u { font-family: var(--sans); font-size: 0.42em; font-weight: 600; color: var(--muted); }
  .hstat .l { font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
  .hstat:hover .n { color: var(--blue-deep); }

  .btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--sans); font-size: 0.98rem; font-weight: 600;
    background: var(--blue); color: #071426;
    border: none; border-radius: 0; box-shadow: 0 0 26px rgba(242,196,107,0.28);
    padding: 0.9rem 1.7rem; min-height: 48px;
    text-decoration: none; cursor: pointer;
    transition: background 0.2s;
  }
  /* the ink must survive the ground swap: near-black on near-black is a
     button that disappears the moment it is pointed at */
  .btn:hover, .btn:focus-visible { background: var(--wall); color: var(--spot); box-shadow: inset 0 0 0 1px var(--spot); }
  .btn--link { background: none; color: var(--blue-deep); padding: 0.9rem 0.5rem; }
  .btn--link:hover { background: none; text-decoration: underline; }


  /* ============ CHART CARD ============ */
  
  .chart-card {
    background: var(--vitrine);
    border: 1px solid var(--hair);
    border-top: 1px solid rgba(242,196,107,0.30);
    border-radius: 0;
    box-shadow: inset 0 34px 54px -42px rgba(242,196,107,0.22),
                inset 0 -64px 74px -54px rgba(0,0,0,0.6);
    padding: 1.8rem 1.8rem 1.4rem;
    max-width: 54rem; margin: 0 0 2.6rem;
  }

  /* Every case in the building is lit the same way */
  .school-card, .news-card, .tile, .res-card, .bento .feature,
  .b-stat, .b-claim, .info-card, .pathway .stage, .acc {
    border-top-color: rgba(242,196,107,0.28);
    box-shadow: inset 0 26px 42px -34px rgba(242,196,107,0.20),
                inset 0 -48px 58px -44px rgba(0,0,0,0.55);
  }
  .school-grid, .news-grid, .tiles, .res-row { counter-reset: caseno; }
  .school-card, .news-card, .tile, .res-card {
    counter-increment: caseno; position: relative;
  }
  .school-card::after, .news-card::after, .tile::after, .res-card::after {
    content: counter(caseno, decimal-leading-zero);
    position: absolute; top: 0.6rem; right: 0.72rem; pointer-events: none;
    font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em;
    color: var(--faint); opacity: 0.5;
  }
  /* pointing at a case raises the light in it; the case itself does not move */
  .school-card:hover, .news-card:hover, .res-card:hover, .tile:hover, .acc:hover {
    border-top-color: rgba(242,196,107,0.58);
    box-shadow: inset 0 30px 46px -30px rgba(242,196,107,0.34),
                inset 0 -48px 58px -44px rgba(0,0,0,0.55);
  }


  /* ---- Reactor kinetics ---- */
  .rk { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.2rem 1.6rem; align-items: start; }
  .rk-stage { background: var(--vitrine); border: 1px solid var(--hair); border-top: 1px solid rgba(242,196,107,0.28);
    box-shadow: inset 0 26px 42px -34px rgba(242,196,107,0.20), inset 0 -48px 58px -44px rgba(0,0,0,0.55); padding: 1rem 1.1rem 0.9rem; }
  .rk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.3rem; margin-bottom: 0.7rem; }
  .rk-state { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.24rem 0.62rem; background: rgba(143,185,138,0.16); color: #C4DCBF; }
  .rk-state[data-s="prompt"] { background: rgba(242,196,107,0.18); color: var(--spot); }
  .rk-state[data-s="scram"], .rk-state[data-s="sub"] { background: rgba(179,171,151,0.14); color: var(--muted); }
  .rk-metric { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .rk-metric b { font-size: 1.02rem; color: var(--cherenkov); margin-left: 0.35rem; font-variant-numeric: tabular-nums; }
  .rk-metric .u { font-size: 0.62rem; margin-left: 0.2rem; color: var(--faint); }
  .rk-metric--per b { color: var(--placard); }
  #rk-canvas { width: 100%; height: auto; display: block; background: #0A0906; border: 1px solid var(--hair); }
  .rk-note { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--spot); min-height: 1.1rem; margin-top: 0.6rem; }
  .rk-controls { display: flex; flex-direction: column; gap: 1rem; }
  .rk-ctl { display: block; }
  .rk-ctl__label { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
  .rk-ctl__label b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .rk-ctl__label .u { color: var(--faint); }
  #rk-rods { width: 100%; accent-color: var(--spot); min-height: 44px; cursor: pointer; }
  .rk-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.58rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 0.15rem; }
  .rk-help { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.5; }
  .rk-budget { border: 1px solid var(--hair); background: var(--vitrine); padding: 0.8rem 0.9rem; }
  .rk-budget__row { display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.16rem 0; }
  .rk-budget__row b { color: var(--placard); font-variant-numeric: tabular-nums; }
  .rk-budget__row--sum { border-top: 1px solid var(--hair); margin-top: 0.3rem; padding-top: 0.45rem; color: var(--ink); }
  .rk-budget__row--sum b { color: var(--cherenkov); font-size: 0.9rem; }
  .rk-budget__row .u { color: var(--faint); margin-left: 0.3rem; }
  .rk-budget__bar { position: relative; display: block; height: 5px; background: rgba(228,220,201,0.1); margin-top: 0.65rem; }
  .rk-budget__bar i { position: absolute; top: 0; bottom: 0; left: 50%; background: var(--spot); transition: none; }
  .rk-budget__bar em { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--cherenkov); }
  .rk-buttons { display: flex; gap: 0.6rem; }
  .rk-btn { flex: 1; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.72rem 0.6rem; min-height: 44px; cursor: pointer; border: 1px solid var(--hair); background: var(--raise, #241F18); color: var(--placard); }
  .rk-btn--scram { background: var(--spot); color: #17130A; border-color: var(--spot); font-weight: 700; }
  .rk-btn--scram:hover { background: #FFD98A; }
  .rk-btn--ghost:hover { border-color: var(--spot); color: var(--spot); }
  .rk-hint { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
  .rk-hint b { color: var(--spot); font-family: var(--mono); }
  .rk-src { margin-top: 1.4rem; }
  @media (max-width: 820px) { .rk { grid-template-columns: 1fr; } }


  /* ---- FIG: one system every technical figure inherits ----
     Stroke weights, arrowheads, callouts, label type and caption treatment live
     here so no single diagram grows its own visual style. Colour is semantic:
     structures are off-white, nuclear material and heat are amber, anything
     live (neutrons, radiation, flow, electrical output) is Cherenkov blue,
     secondary structure is muted, and red means an actual hazard. */
  .fig {
    --fig-struct: #E4DCC9;   /* components and vessels */
    --fig-mat:    #F2C46B;   /* nuclear material, heat, static emphasis */
    --fig-live:   #49D6E8;   /* neutrons, radiation, live flows and data */
    --fig-sec:    #8A8267;   /* secondary structure */
    --fig-haz:    #D4573F;   /* hazard or failure only */
    --fig-w1: 2;             /* primary structure */
    --fig-w2: 1.25;          /* secondary structure and annotation */
    margin: 0 0 1.6rem;
  }
  .fig svg { display: block; width: 100%; height: auto; }

  /* in-figure type is always the instrument face, never the wall text */
  .fig text, .fig .fig-lab { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em;
    text-transform: uppercase; fill: var(--fig-struct); }
  .fig .fig-lab--sm { font-size: 11px; fill: var(--fig-sec); }
  .fig .fig-lab--live { fill: var(--fig-live); }
  .fig .fig-lab--mat { fill: var(--fig-mat); }
  /* line roles: solid structure, thin leader, live flow */
  .fig .fig-struct { fill: none; stroke: var(--fig-struct); stroke-width: 2; stroke-linejoin: round; }
  .fig .fig-sec    { fill: none; stroke: var(--fig-sec); stroke-width: 1.25; }
  .fig .fig-lead   { fill: none; stroke: var(--fig-sec); stroke-width: 1; }
  .fig .fig-live   { fill: none; stroke: var(--fig-live); stroke-width: 2; }
  .fig .fig-mat    { fill: var(--fig-mat); }


  /* The highlight is tied to the beat, not to a timeline position: in a paged
     scene the playhead rests exactly on the beat, so anything keyed to
     i + 0.2 is never on screen when the reader is looking. */
  #plant-cam-svg .hl { opacity: 0; transition: opacity 0.35s ease; }
  #plant-cam-svg[data-beat="1"] .hl-1, #plant-cam-svg[data-beat="2"] .hl-2,
  #plant-cam-svg[data-beat="3"] .hl-3, #plant-cam-svg[data-beat="4"] .hl-4,
  #plant-cam-svg[data-beat="5"] .hl-5, #plant-cam-svg[data-beat="6"] .hl-6 { opacity: 1; }

  /* ---- FIG 02: the plant schematic ----
     Structure is drawn once, quietly. The flow layer is heavier than the
     structure on purpose: someone should be able to trace fission to grid
     before reading a single label. */
  #plant-svg .pl-struct, #plant-cam-svg .pl-struct {
    fill: none; stroke: #E4DCC9; stroke-width: 2; stroke-linejoin: round;
  }
  #plant-svg .pl-sec, #plant-cam-svg .pl-sec {
    fill: none; stroke: #8A8267; stroke-width: 1.25;
  }
  #plant-svg .pl-fig, #plant-cam-svg .pl-fig {
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em;
    text-transform: uppercase; fill: #8A8267;
  }
  /* numbered cues on the figure; the names live in the key beneath it */
  #plant-svg .pl-cue circle, #plant-cam-svg .pl-cue circle {
    fill: #0C0B08; stroke: #F2C46B; stroke-width: 1.25;
  }
  #plant-svg .pl-cue text, #plant-cam-svg .pl-cue text {
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    letter-spacing: 0.06em; fill: #F2C46B;
  }

  /* ---- Exhibits: a wall placard (narrow, left) beside its vitrine (wide) ---- */
  .exhibit { display: grid; grid-template-columns: var(--placard-col) minmax(0, 1fr);
    gap: 2rem 2.4rem; align-items: start; margin: 0 0 3rem; max-width: 60rem; }
  .exhibit .chart-card, .exhibit .vitrine, .exhibit .sim-card { max-width: none; margin: 0; }
  .incident-case > .tabs { margin-bottom: 1rem; }

  .exhibit--wide {
    --placard-col: 13.5rem; gap: 1.2rem 1.8rem;
    max-width: none; margin-inline: calc(50% - 46vw);
  }
  .exhibit--wide .placard__title { font-size: 1.2rem; }
  .exhibit--wide .placard__text { font-size: 0.88rem; }
  .placard { position: sticky; top: 6rem; align-self: start; }
  .placard__cat { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; white-space: nowrap;
    text-transform: uppercase; color: var(--spot); border: 1px solid rgba(242,196,107,0.32);
    padding: 0.22rem 0.5rem; display: inline-block; margin-bottom: 0.9rem; }
  .placard__title { font-family: var(--display); font-size: 1.42rem; font-weight: 600;
    line-height: 1.16; color: var(--ink); letter-spacing: -0.01em; }
  .placard__prov { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.02em;
    color: var(--faint); margin: 0.6rem 0 0.9rem; line-height: 1.55; }
  .placard__text { font-family: var(--serif); font-size: 0.95rem; line-height: 1.6; color: var(--muted); }
  @media (max-width: 820px) {
    .exhibit { grid-template-columns: 1fr; gap: 1.1rem; }
    .exhibit--wide { margin-inline: 0; }
    .placard { position: static; }
  }
  .chart-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; justify-content: space-between; }
  .chart-card__title { font-size: 1.02rem; font-weight: 600; color: var(--ink); }
  .chart-card__unit { font-size: 0.84rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .chart-card__legend { display: flex; gap: 1.2rem; margin: 0.6rem 0 1.5rem; font-size: 0.86rem; color: var(--muted); }
  .chart-card__legend .key { display: inline-flex; align-items: center; gap: 0.45rem; }
  .chart-card__legend .swatch { width: 13px; height: 13px; border-radius: 0; display: inline-block; }

  .chart-rows { display: flex; flex-direction: column; gap: 10px; }
  .crow {
    display: grid; grid-template-columns: var(--label-w, 8.5rem) 1fr;
    align-items: center; gap: 0.9rem;
    min-height: 30px; border-radius: 0; cursor: default;
  }
  .crow:hover, .crow:focus-visible { background: var(--tint); }
  .crow__label { text-align: right; font-size: 0.92rem; color: var(--body); line-height: 1.25; }
  .crow--hero .crow__label { font-weight: 600; color: var(--ink); }
  .crow__label .cat { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .crow__track { position: relative; height: 22px; display: flex; align-items: center; }
  
  .crow__bar {
    height: 22px; border-radius: 0; width: 0;
    background: linear-gradient(90deg, #6E6653, #8A8067);
    box-shadow: 0 0 0 rgba(242,196,107,0);
    transition: width 1.05s cubic-bezier(0.16,1,0.3,1) calc(var(--i, 0) * 90ms),
                box-shadow 1.05s ease calc(var(--i, 0) * 90ms),
                filter 1.05s ease calc(var(--i, 0) * 90ms);
    filter: brightness(0.55);
    flex-shrink: 0;
  }
  .crow__bar.lit { filter: brightness(1); }
  /* the hero bar (the point of the exhibit) is the one under the spotlight */
  .crow--hero .crow__bar {
    background: linear-gradient(90deg, var(--spot), var(--spot-deep));
  }
  .crow--hero .crow__bar.lit { box-shadow: 0 0 26px rgba(242,196,107,0.45); }
  .crow__val {
    font-family: var(--mono); font-size: 0.9rem; font-weight: 500; color: var(--ink);
    margin-left: 0.6rem; white-space: nowrap; font-variant-numeric: tabular-nums;
    opacity: 0; transition: opacity 0.5s ease calc(var(--i, 0) * 90ms + 420ms);
  }
  .crow__bar.lit ~ .crow__val, .crow.is-lit .crow__val { opacity: 1; }

  .chart-plot { position: relative; }
  .chart-tip {
    position: absolute; z-index: 20;
    background: #060a13; color: var(--ink); border: 1px solid rgba(255,255,255,0.12);
    padding: 0.6rem 0.85rem; font-size: 0.88rem; line-height: 1.45;
    border-radius: 0; pointer-events: none; max-width: 16rem; display: none;
  }
  .chart-tip strong { font-size: 1.0rem; font-weight: 600; display: block; }
  .chart-tip .tipname { color: #D6CFBC; }

  .chart-card__foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 0.8rem; margin-top: 1.6rem; padding-top: 1.1rem;
    border-top: 1px solid var(--hair);
  }
  
  .chart-card__src {
    font-family: var(--mono); font-size: 0.68rem; line-height: 1.6;
    letter-spacing: 0.01em; color: var(--faint); max-width: 34rem;
  }
  .chart-card__src a { color: var(--faint); text-decoration-color: rgba(228,220,201,0.25); }
  .chart-card__src a:hover { color: var(--spot); }
  .table-toggle {
    font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--body);
    background: none; border: 1px solid var(--hair); border-radius: 0;
    padding: 0.55rem 1rem; min-height: 44px; min-width: 44px;
    cursor: pointer; transition: background 0.2s, border-color 0.2s;
  }
  .table-toggle:hover { background: var(--tint); border-color: #D6CFBC; }

  .data-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
  .data-table caption { text-align: left; font-size: 0.84rem; color: var(--muted); padding-bottom: 0.7rem; }
  .data-table th, .data-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--hair); text-align: left; }
  .data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .data-table thead th { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #D6CFBC; }
  .data-table .hero-row { background: var(--blue-wash); font-weight: 600; color: var(--ink); }

  /* ============ PULL STAT / CALLOUT ============ */
  .callout { max-width: 54rem; border-left: 4px solid var(--amber); padding: 0.4rem 0 0.4rem 1.8rem; margin-bottom: 2.6rem; }
  .callout__big { font-family: var(--display); font-weight: 600; font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.02; color: var(--ink); letter-spacing: -0.02em; }
  .callout__big small { display: block; font-family: var(--sans); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 0.8rem; }

  /* ============ STAT TILES ============ */
  .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; max-width: 58rem; margin-bottom: 2.8rem; }
  .tile { background: var(--card); border: 1px solid var(--hair); border-radius: 0; padding: 1.5rem 1.5rem 1.6rem; }
  .tile__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
  .tile__value { font-family: var(--display); font-weight: 600; font-size: clamp(2.1rem, 4.5vw, 2.9rem); line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
  .tile__value .unit { font-family: var(--sans); font-size: 0.4em; font-weight: 600; color: var(--muted); margin-left: 0.15em; }
  .tile__desc { font-size: 0.92rem; color: var(--muted); margin-top: 0.9rem; line-height: 1.6; }

  /* ============ BENTO (The Case) ============ */
  .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 60rem; margin-bottom: 2.8rem; }
  .bento > * { border: 1px solid var(--hair); border-radius: 0; background: var(--card); padding: 1.6rem 1.7rem;
    border-top-color: rgba(242,196,107,0.28); box-shadow: inset 0 26px 42px -34px rgba(242,196,107,0.20), inset 0 -48px 58px -44px rgba(0,0,0,0.55); }
  .bento .feature {
    grid-column: span 2; grid-row: span 2; background: var(--navy); color: #fff; border-color: var(--navy);
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
  }
  .bento .feature .big { font-family: var(--display); font-weight: 600; font-size: clamp(3.4rem, 9vw, 5.8rem); line-height: 0.88; letter-spacing: -0.03em; }
  .bento .feature .big .u { display: block; font-family: var(--sans); font-size: 0.16em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #A9A18B; margin-top: 0.9rem; }
  .bento .feature p { font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.45; color: #E4EAF3; }
  .bento .feature p strong { color: #fff; font-weight: 600; }
  .bento .feature a { color: #F7D89A; font-size: 0.84rem; font-weight: 500; }
  .b-stat .k { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .b-stat .v { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 2.7rem); line-height: 1; color: var(--ink); letter-spacing: -0.02em; margin: 0.55rem 0 0.6rem; }
  .b-stat .v .u { font-family: var(--sans); font-size: 0.4em; color: var(--muted); font-weight: 600; }
  .b-stat p { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
  .b-stat a { font-size: 0.82rem; }
  .b-claim { display: flex; flex-direction: column; gap: 0.7rem; }
  .b-claim svg { flex-shrink: 0; }
  .b-claim p { font-size: 0.98rem; line-height: 1.5; }
  .b-claim p strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 760px) { .bento { grid-template-columns: 1fr 1fr; } .bento .feature { grid-column: span 2; grid-row: auto; } }
  @media (max-width: 460px) { .bento { grid-template-columns: 1fr; } .bento .feature { grid-column: auto; } }

  /* ============ TOUR VIDEO (framed, watchable) ============ */
  .tour-figure { max-width: 62rem; margin: 0 0 1.6rem; }
  .tour-frame { position: relative; border-radius: 0; overflow: hidden; border: 1px solid var(--hair); box-shadow: var(--shadow); background: #0a1018; }
  .tour-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .tour-figure figcaption { font-size: 0.86rem; color: var(--muted); margin-top: 0.85rem; }


  /* ============ PULL QUOTE ============ */
  .pull {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(1.4rem, 3.2vw, 1.9rem); line-height: 1.35; color: var(--ink);
    max-width: 44rem; margin: 2.6rem 0 0;
  }
  .pull mark { background: linear-gradient(transparent 62%, rgba(245,158,11,0.35) 62%); color: inherit; padding: 0 0.1em; }


  /* ============ PLANT DIAGRAM ANIMATION ============ */
  @media (prefers-reduced-motion: no-preference) {
    .flow { stroke-dasharray: 10 9; animation: flowdash 1.1s linear infinite; }
    .flow-slow { animation-duration: 2s; }
    @keyframes flowdash { to { stroke-dashoffset: -19; } }
    .puff { transform-box: fill-box; transform-origin: center; animation: puffrise 4.5s ease-in-out infinite; }
    .puff2 { animation-delay: 1.4s; }
    .puff3 { animation-delay: 2.8s; }
    @keyframes puffrise { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-7px); opacity: 1; } }
    .fuel { animation: fuelglow 2.6s ease-in-out infinite; }
    @keyframes fuelglow { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
  }

  /* The walkthrough: a cold plant that starts up as you reach each part */
  #plant-cam-svg .flow { animation: none; stroke-dasharray: 10 9; opacity: 0.42; }
  #plant-cam-svg .fuel,
  #plant-cam-svg .puff { animation: none; }
  #plant-cam-svg .fuel { opacity: 0.45; }
  #plant-cam-svg .puff { opacity: 0.2; }
  #plant-cam-svg .pf-rotor, #plant-cam-svg .pf-hub { opacity: 0; }
  #plant-cam-svg .pf-bolt { opacity: 0.25; }
  #plant-cam-svg .pf-tubes { opacity: 0.25; }

  @media (prefers-reduced-motion: no-preference) {
    /* 1 - the core: the fuel comes up to heat and the primary loop moves */
    #plant-cam-svg.run-1 .fuel { opacity: 1; animation: core-heat 1.9s ease-in-out infinite; }
    #plant-cam-svg.run-1 .pf-primary { opacity: 1; animation: flowdash 1s linear infinite; }
    @keyframes core-heat {
      0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(251,191,36,0.7)); }
      50% { opacity: 0.72; filter: drop-shadow(0 0 9px rgba(251,191,36,0.95)); }
    }
    /* 2 - the steam generator: the tube bundle boils the second loop */
    #plant-cam-svg.run-2 .pf-tubes { animation: tubes-boil 1.5s ease-in-out infinite; }
    #plant-cam-svg.run-2 .pf-steam { opacity: 1; animation: flowdash 0.75s linear infinite; }
    @keyframes tubes-boil { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
    /* 3 - the turbine hall: the rotor spins and the generator makes current */
    #plant-cam-svg.run-3 .pf-rotor {
      opacity: 0.95; transform-box: view-box; transform-origin: 441px 250px;
      animation: rotor-spin 0.5s linear infinite;
    }
    #plant-cam-svg.run-3 .pf-hub { opacity: 1; }
    #plant-cam-svg.run-3 .pf-coils { animation: coils-live 1.1s ease-in-out infinite; }
    #plant-cam-svg.run-3 .pf-bolt { animation: bolt-strike 1.6s ease-in-out infinite; }
    @keyframes rotor-spin { to { transform: rotate(360deg); } }
    @keyframes coils-live { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.9; } }
    @keyframes bolt-strike {
      0%, 62%, 100% { opacity: 0.3; }
      70% { opacity: 1; filter: drop-shadow(0 0 8px rgba(242,196,107,0.9)); }
      78% { opacity: 0.45; }
      86% { opacity: 1; }
    }
    /* 4 - the condenser: spent steam is cooled and pumped back round */
    #plant-cam-svg.run-4 .pf-cond { opacity: 1; animation: flowdash 1.1s linear infinite; }
    #plant-cam-svg.run-4 .flow-slow { opacity: 0.9; animation: flowdash 2s linear infinite; }
    /* 5 - the switchyard: power leaves down the transmission lines */
    #plant-cam-svg.run-5 .pf-grid {
      stroke: #49D6E8; stroke-opacity: 1; stroke-dasharray: 5 12;
      animation: flowdash 1.5s linear infinite;
    }
    /* 6 - the cooling tower: the plume finally rises */
    #plant-cam-svg.run-6 .puff { opacity: 0.75; animation: puffrise 4.5s ease-in-out infinite; }
    #plant-cam-svg.run-6 .puff2 { animation-delay: 1.4s; }
    #plant-cam-svg.run-6 .puff3 { animation-delay: 2.8s; }
  }
  /* everything on, still, for anyone who does not want the motion */
  @media (prefers-reduced-motion: reduce) {
    #plant-cam-svg .flow, #plant-cam-svg .fuel, #plant-cam-svg .puff,
    #plant-cam-svg .pf-tubes, #plant-cam-svg .pf-bolt { opacity: 1; }
    #plant-cam-svg .pf-rotor, #plant-cam-svg .pf-hub { opacity: 0.95; }
  }
  /* ============ PINNED SCROLL SCENES ============ */

  .pin-scene { position: relative; margin: 2.4rem 0 1rem; }
  .js .pin-scene.is-live {
    height: var(--runway, 420vh);
    width: 100vw; margin-inline: calc(50% - 50vw);
  }
  .pin-sticky { position: sticky; top: 0; }
  .pin-stage {
    position: relative; isolation: isolate; overflow: hidden;
    background: #0B1422;
    border-block: 1px solid var(--hair);
    padding: 5.6rem clamp(1.2rem, 5vw, 4rem) 2.4rem;
    display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.4rem, 4vw, 3.4rem);
    align-items: center;
    min-height: 100svh;
  }
  .js .pin-scene:not(.is-live) .pin-stage { min-height: 0; padding: 1.1rem; border: 1px solid var(--hair); }
  
  .pin-stage--line { background: #0C0B08; }
  .build-head { margin-top: 3.4rem; }

  .plate-credit { font-size: 0.8rem; color: var(--faint); max-width: 52rem; margin: 0.9rem 0 0; line-height: 1.5; }
  .js .pin-scene:not(.is-live) + .plate-credit { display: none; }
  .pin-figure { position: relative; overflow: hidden; }
  .pin-figure svg { width: 100%; height: auto; display: block; }
  .pin-copy { display: flex; flex-direction: column; justify-content: center; min-height: 12rem; }
  .pin-step {
    font-family: var(--sans); font-size: 0.78rem; font-weight: 800;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue);
    display: block; margin-bottom: 0.6rem;
  }
  .pin-title { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 0.7rem; }
  
  .pin-text { font-size: 1rem; color: var(--placard); line-height: 1.6; }
  .pin-hint { color: var(--muted); }
  .pin-rail { display: flex; gap: 6px; margin-top: 1.2rem; }
  .pin-rail span { flex: 1; height: 3px; background: var(--ink-line); position: relative; overflow: hidden; }
  
  .pin-rail span::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform: scaleX(var(--fill, 0)); transform-origin: 0 50%; }
  .pin-rail span.done::after { transform: scaleX(1); }
  .pin-hint { font-size: 0.84rem; margin-top: 1rem; display: flex; align-items: center; gap: 0.5rem; }
  @media (max-width: 860px) {
    .pin-stage { grid-template-columns: 1fr; }
    .pin-copy { min-height: 9rem; }
  }
  /* Static fallback list: shown when the scene cannot animate. */
  .pin-steps { list-style: none; counter-reset: pstep2; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.3rem 1.8rem; margin-top: 1.6rem; }
  .pin-steps li { counter-increment: pstep2; position: relative; padding-left: 2.4rem; font-size: 0.94rem; color: var(--muted); line-height: 1.6; }
  .pin-steps li strong { color: var(--ink); font-weight: 600; }
  .pin-steps li::before { content: counter(pstep2); position: absolute; left: 0; top: 0.1rem; width: 1.6rem; height: 1.6rem; background: var(--blue); color: #071426; font-size: 0.86rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  /* When JS drives the scene, the fallback list is redundant. */
  .js .pin-scene.is-live + .pin-steps { display: none; }
  .js .pin-scene:not(.is-live) .pin-rail,
  .js .pin-scene:not(.is-live) .pin-hint { display: none; }
  .reduced .pin-rail, .reduced .pin-hint { display: none; }

  /* Highlights start hidden in every copy of the diagram; the explorer's [data-active] rules and the scene's timeline each fade in one at a time. */
  .hl { opacity: 0; }
  #plant-cam-svg .hl { stroke: #F2C46B; stroke-width: 2; fill: none; }

  /* fission scene bits */
  #fs-svg .fs-label { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
  #fs-svg .fs-nlabel { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: #F7D89A; }

  /* ============ PLANT EXPLORER (clickable diagram) ============ */
  .plant-explorer { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.4rem; align-items: start; margin-bottom: 1rem; }
  .plant-fig { margin: 0; background: #14120D; border: 1px solid var(--hair); border-radius: 0; box-shadow: var(--shadow); padding: 0.6rem; }
  .plant-fig svg { width: 100%; height: auto; display: block; border-radius: 0; }
  .plant-fig figcaption { font-size: 0.82rem; color: var(--muted); padding: 0.7rem 0.5rem 0.2rem; line-height: 1.5; }
  .hotspot { cursor: pointer; }
  .hotspot:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
  #plant-svg .hl { stroke: #F2C46B; stroke-width: 2; fill: none; transition: opacity 0.3s ease; }
  #plant-svg[data-active="1"] .hl-1, #plant-svg[data-active="2"] .hl-2, #plant-svg[data-active="3"] .hl-3,
  #plant-svg[data-active="4"] .hl-4, #plant-svg[data-active="5"] .hl-5, #plant-svg[data-active="6"] .hl-6 { opacity: 1; }
  .plant-tabs { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem; }
  .ptab { text-align: left; font-family: var(--sans); font-size: 0.96rem; font-weight: 600; color: var(--body); background: var(--card); border: 1px solid var(--hair); border-radius: 0; padding: 0.6rem 0.9rem; min-height: 44px; cursor: pointer; transition: border-color 0.2s, background 0.2s, color 0.2s; }
  .ptab:hover { border-color: #5C5444; }
  .ptab[aria-selected="true"] { border-color: var(--blue); background: var(--blue-wash); color: var(--blue-deep); }
  .plant-detail { background: var(--card); border: 1px solid var(--hair); border-radius: 0; padding: 1.3rem 1.4rem; }
  .pd-step { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
  .pd-title { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--ink); margin: 0.3rem 0 0.6rem; letter-spacing: -0.01em; }
  .pd-text { font-size: 1.0rem; line-height: 1.6; color: var(--body); }
  .plant-full { margin-top: 1.4rem; border-top: 1px solid var(--ink-line); }
  .plant-full summary { cursor: pointer; font-weight: 600; color: var(--body); padding: 1.1rem 0; list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
  .plant-full summary::marker, .plant-full summary::-webkit-details-marker { display: none; }
  .plant-full summary::before { content: '▸'; font-size: 0.88rem; transition: transform 0.2s; }
  .plant-full[open] summary::before { transform: rotate(90deg); }
  .pstep-list { list-style: none; counter-reset: pstep; display: grid; gap: 0.85rem; padding-bottom: 1.2rem; max-width: 50rem; }
  .pstep-list li { counter-increment: pstep; position: relative; padding-left: 2.4rem; font-size: 0.98rem; color: var(--muted); line-height: 1.6; }
  .pstep-list li strong { color: var(--ink); font-weight: 600; }
  .pstep-list li::before { content: counter(pstep); position: absolute; left: 0; top: 0.05rem; width: 1.6rem; height: 1.6rem; background: var(--blue-wash); color: var(--blue-deep); border-radius: 0; font-size: 0.86rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  @media (max-width: 820px) { .plant-explorer { grid-template-columns: 1fr; } }


  /* ============ FISSION LAB ============ */
  .fission-lab { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.3rem; align-items: start; margin-bottom: 1.8rem; }
  .fz-stage { position: relative; background: var(--vitrine); border: 1px solid var(--hair); border-radius: 0; overflow: hidden; box-shadow: var(--shadow); }
  #fz-canvas { width: 100%; height: auto; display: block; }
  .fz-readout { position: absolute; top: 0.8rem; left: 0.9rem; display: flex; gap: 0.7rem; align-items: center; font-family: var(--sans); font-size: 0.86rem; pointer-events: none; }
  .fz-state { font-weight: 700; letter-spacing: 0.03em; padding: 0.25rem 0.65rem; border-radius: 0; background: rgba(143,185,138,0.16); color: #C4DCBF; }
  
  .fz-k { color: rgba(73,214,232,0.7); font-family: var(--mono); }
  .fz-k b { color: var(--cherenkov); font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(73,214,232,0.35); }
  .fz-controls { display: flex; flex-direction: column; gap: 1.1rem; background: var(--card); border: 1px solid var(--hair); border-radius: 0; padding: 1.3rem; }
  .fz-btn { font-family: var(--sans); font-size: 0.96rem; font-weight: 600; background: var(--blue); color: #06121f; border: none; border-radius: 0; padding: 0.75rem 1rem; min-height: 46px; cursor: pointer; transition: background 0.2s; }
  .fz-btn:hover { background: #D2C4A9; }
  .fz-btn--ghost { background: none; color: var(--blue-deep); border: 1px solid var(--hair); }
  .fz-btn--ghost:hover { background: var(--tint); border-color: #5C5444; }
  .fz-slider label { display: block; font-size: 0.92rem; color: var(--body); margin-bottom: 0.55rem; }
  .fz-slider label b { color: var(--ink); font-weight: 600; }
  .fz-slider input { width: 100%; accent-color: var(--blue); min-height: 44px; cursor: pointer; }
  .fz-scale { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--faint); margin-top: 0.3rem; }
  .fz-stats { display: flex; gap: 1.3rem; font-size: 0.9rem; color: var(--muted); }
  .fz-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }

  @media (max-width: 760px) {
    .fission-lab { grid-template-columns: 1fr; gap: 0.9rem; }
    .fz-controls { padding: 1rem; gap: 0.85rem; }
    .fz-scale { flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.7rem; }
    .fz-stats { flex-wrap: wrap; gap: 0.3rem 1.1rem; }
    .fz-readout { font-size: 0.76rem; gap: 0.5rem; top: 0.55rem; left: 0.6rem; }
  }
  .fz-hint { font-size: 0.84rem; color: var(--faint); line-height: 1.5; margin: 0; }

  /* ============ GRID SIMULATOR ============ */
  .sim-card {
    background: var(--card);
    border: 1px solid var(--hair); border-radius: 0;
    box-shadow: var(--shadow);
    padding: 1.8rem 1.8rem 1.4rem;
    max-width: 54rem; margin: 0 0 2rem;
  }
  .sim-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
  .sim-row label { font-size: 0.94rem; font-weight: 500; color: var(--body); min-width: 6.5rem; }
  
  .sim-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--blue); min-height: 44px; cursor: pointer; }
  .sim-row output { font-size: 0.94rem; font-weight: 600; color: var(--ink); min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
  .sim-gas { font-size: 0.9rem; color: var(--muted); margin: 0.2rem 0 1.6rem; }
  .sim-gas strong { color: var(--ink); }
  .sim-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.8rem; }
  .sim-tile { background: var(--tint); border-radius: 0; padding: 1rem 1.1rem; }
  .sim-tile .lbl { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
  .sim-tile .val { font-family: var(--sans); font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
  .sim-tile .sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.35rem; line-height: 1.45; }
  .sim-bars-title { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
  .sim-city-wrap { background: linear-gradient(180deg, #221D12 0%, #0C0B08 100%); border: 1px solid var(--hair); border-radius: 0; padding: 0.5rem; margin-bottom: 0.9rem; overflow: hidden; }
  #sim-city { width: 100%; height: auto; display: block; }
  #sim-city .win { transition: fill 0.4s ease, opacity 0.3s ease; }
  @media (prefers-reduced-motion: no-preference) { #sim-city .win-var { animation: winflicker 2.6s ease-in-out infinite; } }
  @keyframes winflicker { 0%, 100% { opacity: 1; } 42% { opacity: 0.28; } 66% { opacity: 0.78; } }
  .sim-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; }
  .sim-legend .k { display: inline-flex; align-items: center; gap: 0.4rem; }
  .sim-legend .sw { width: 11px; height: 11px; border-radius: 0; display: inline-block; }
  .sim-notes { border-top: 1px solid var(--hair); margin-top: 1.6rem; font-size: 0.92rem; color: var(--muted); }
  .sim-notes summary { cursor: pointer; font-weight: 600; color: var(--body); padding: 1rem 0; list-style: none; display: flex; align-items: center; gap: 0.5rem; min-height: 44px; }
  .sim-notes summary::before { content: '▸'; font-size: 0.88rem; transition: transform 0.2s; }
  .sim-notes[open] summary::before { transform: rotate(90deg); }
  .sim-notes ul { list-style: none; padding-bottom: 1rem; }
  .sim-notes li { padding: 0.25rem 0 0.25rem 1rem; border-left: 2px solid var(--hair); margin-bottom: 0.5rem; line-height: 1.6; }
  .sim-notes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8em; background: var(--tint); padding: 0.1em 0.4em; border-radius: 0; color: var(--ink); }
  @media (max-width: 900px) { .sim-tiles { grid-template-columns: 1fr; } }

  /* ============ INFO CARDS (baseload etc.) ============ */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 54rem; margin-bottom: 2.4rem; }
  .info-card { background: var(--card); border: 1px solid var(--hair); border-radius: 0; padding: 1.5rem 1.6rem;
    border-top-color: rgba(242,196,107,0.28); box-shadow: inset 0 26px 42px -34px rgba(242,196,107,0.20), inset 0 -48px 58px -44px rgba(0,0,0,0.55); }
  .info-card h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
  .info-card h3 svg { color: var(--blue); flex-shrink: 0; }
  .info-card p { font-size: 0.94rem; color: var(--muted); line-height: 1.6; }
  .info-card p strong { color: var(--ink); font-weight: 600; }

  /* ============ INCIDENT TABS ============ */
  .tabs { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
  .tab {
    font-family: var(--sans); font-size: 0.94rem; font-weight: 600; color: var(--body);
    background: var(--card); border: 1px solid var(--hair); border-radius: 0;
    padding: 0.7rem 1.2rem; min-height: 48px; cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem;
  }
  .tab small { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
  .tab:hover { border-color: #D6CFBC; }
  .tab[aria-selected="true"] { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-wash); }
  .tab[aria-selected="true"] small { color: var(--blue-deep); }

  .incident-panel {
    background: var(--card); border: 1px solid var(--hair); border-radius: 0;
    box-shadow: var(--shadow); padding: 1.8rem; max-width: 54rem; margin-bottom: 1.6rem;
  }
  .incident-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; justify-content: space-between; margin-bottom: 0.6rem; }
  .incident-panel__head h3 { font-size: 1.5rem; }
  .chip { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--tint); border: 1px solid var(--hair); color: var(--muted); border-radius: 0; padding: 0.3rem 0.8rem; }
  .perception {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0;
  }
  .perception > div { border: 1px solid var(--hair); border-radius: 0; padding: 1.1rem 1.3rem; }
  .perception .p-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
  .perception .p-value { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; color: var(--ink); line-height: 1.1; }
  .perception .confirmed { background: var(--blue-wash); border-color: #E9E2D4; }
  .perception .confirmed .p-value { color: var(--blue-deep); }
  .incident-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2rem; margin-top: 1.4rem; }
  .incident-cols h4 { font-family: var(--sans); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
  .incident-cols ul { list-style: none; }
  .incident-cols li { font-size: 0.93rem; color: var(--body); padding: 0.3rem 0 0.3rem 1rem; border-left: 2px solid var(--hair); margin-bottom: 0.4rem; line-height: 1.55; }

  /* ============ ACCORDION (myths, careers) ============ */
  .acc { background: var(--card); border: 1px solid var(--hair); border-radius: 0; box-shadow: var(--shadow); max-width: 54rem; margin-bottom: 1rem; overflow: hidden; }
  .acc-head {
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 1.3rem 1.5rem; min-height: 48px;
    display: flex; align-items: flex-start; gap: 1rem;
    font-family: var(--sans); transition: background 0.2s;
  }
  .acc-head:hover { background: var(--tint); }
  .acc-head .acc-icon { flex-shrink: 0; margin-top: 0.15rem; color: var(--faint); }
  .acc-head .acc-title { flex: 1; }
  .acc-head .acc-kicker { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }
  .acc-head .acc-text { font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
  .acc-head .acc-sub { display: block; font-size: 0.9rem; font-weight: 400; color: var(--muted); margin-top: 0.25rem; }
  .acc-caret { flex-shrink: 0; color: var(--faint); transition: transform 0.25s; margin-top: 0.3rem; }
  .acc.open .acc-caret { transform: rotate(180deg); }
  .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
  .acc.open .acc-panel { grid-template-rows: 1fr; }
  .acc-panel > div { overflow: hidden; }
  .acc-body { padding: 0 1.5rem 1.5rem; }
  .fact-box { background: rgba(143,185,138,0.08); border: 1px solid rgba(143,185,138,0.26); border-radius: 0; padding: 1.1rem 1.3rem; display: flex; gap: 0.8rem; align-items: flex-start; }
  .fact-box > svg { color: var(--green-ok); flex-shrink: 0; margin-top: 0.1rem; }
  .fact-box .fact-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-ok); display: block; margin-bottom: 0.25rem; }
  .fact-box p { font-size: 0.98rem; color: var(--placard); line-height: 1.6; }
  .fact-box svg { flex-shrink: 0; margin-top: 0.1rem; }

  /* ============ FIELD FIGURE ============ */
  .field-fig { margin: 1.2rem 0 0; }
  .field-fig svg { width: 100%; height: auto; display: block; border: 1px solid var(--hair); border-radius: 0; }
  .field-fig figcaption { font-size: 0.84rem; color: var(--muted); margin-top: 0.6rem; }

  /* ============ NEWS ============ */
  .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem; max-width: 58rem; margin-bottom: 2.2rem; }
  .news-card {
    background: var(--card); border: 1px solid var(--hair); border-radius: 0;
    box-shadow: var(--shadow); padding: 1.4rem 1.5rem;
    text-decoration: none; display: flex; flex-direction: column; gap: 0.55rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  }
  .news-card:hover { border-color: rgba(242,196,107,0.34); }
  .news-card .meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--muted); }
  .news-card .cat-chip { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--blue-wash); color: var(--blue-deep); border-radius: 0; padding: 0.2rem 0.65rem; }
  .news-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
  .news-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.6; flex: 1; }
  .news-card .src { font-size: 0.84rem; font-weight: 500; color: var(--blue-deep); }

  .res-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; max-width: 58rem; }
  .res-card {
    display: block; background: var(--tint); border: 1px solid var(--hair); border-radius: 0;
    padding: 1.1rem 1.3rem; text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
  }
  .band--tint .res-card { background: var(--card); }
  .res-card:hover { border-color: var(--blue); }
  .res-card h3 { font-family: var(--sans); font-size: 0.98rem; font-weight: 600; color: var(--ink); margin-bottom: 0.25rem; }
  .res-card p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }


  /* ============ STUDENTS PATHWAY ============ */
  .pathway { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; max-width: 60rem; margin-bottom: 3rem; counter-reset: stage; }
  .stage { background: var(--card); border: 1px solid var(--hair); border-radius: 0; box-shadow: var(--shadow); padding: 1.4rem 1.4rem 1.5rem; counter-increment: stage; position: relative; }
  .stage h3 { font-family: var(--sans); font-size: 1.0rem; font-weight: 600; margin: 0.4rem 0 0.7rem; }
  .stage::before {
    content: counter(stage);
    display: flex; align-items: center; justify-content: center;
    width: 1.8rem; height: 1.8rem; border-radius: 0;
    background: var(--blue-wash); color: var(--blue-deep);
    font-size: 0.92rem; font-weight: 700;
  }
  .stage ul { list-style: none; }
  .stage li { font-size: 0.9rem; color: var(--muted); line-height: 1.5; padding-left: 1rem; position: relative; margin-bottom: 0.45rem; }
  .stage li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }

  /* ============ SCHOOLS ============ */
  .sub-head { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--ink); margin: 2.6rem 0 1.2rem; }
  .school-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; max-width: 60rem; margin-bottom: 1rem; }
  .school-card { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--hair); border-radius: 0; padding: 1rem 1.2rem; transition: border-color 0.2s, transform 0.2s, background 0.2s; }
  a.school-card:hover { border-color: var(--blue); transform: translateY(-2px); background: rgba(242,196,107,0.06); }
  .school-card h3 { font-family: var(--sans); font-size: 0.98rem; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .school-card h3 .go { color: var(--faint); font-weight: 400; transition: color 0.2s; }
  a.school-card:hover h4 .go { color: var(--blue); }
  .school-card .prog { font-size: 0.86rem; color: var(--muted); line-height: 1.5; display: block; }
  .school-card .loc { font-size: 0.82rem; color: var(--faint); display: block; margin-top: 0.3rem; }
  .school-note { font-size: 0.88rem; color: var(--muted); max-width: 46rem; margin-bottom: 2.6rem; }

  /* ============ CLOSING ============ */
  .closing-band { padding: 5.5rem 0; }
  .closing-band h2 { color: #fff; font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1.12; max-width: 22ch; margin-bottom: 1.1rem; }
  .closing-band p { color: #D6CFBC; max-width: 40rem; font-size: 1rem; }

  /* ============ ABOUT ============ */
  .about-grid { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start; max-width: 50rem; }
  .about-mark {
    width: 76px; height: 76px; border-radius: 0;
    background: var(--tint); border: 1px solid var(--hair);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-weight: 600; font-size: 1.6rem; color: var(--ink);
    flex-shrink: 0;
  }
  .about-grid h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
  .about-contact { margin-top: 1.2rem; font-size: 0.98rem; }

  /* ============ FOOTER ============ */
  footer { background: var(--navy); color: #D6CFBC; padding: 4.5rem 0 2.5rem; }
  footer h2 { color: #fff; font-size: 1.8rem; margin-bottom: 2.2rem; }
  .src-note { font-size: 0.86rem; color: var(--faint); max-width: 42rem; margin-bottom: 2.6rem; font-style: italic; }
  .ref-list { list-style: decimal; padding-left: 1.5rem; max-width: 56rem; margin-bottom: 2.6rem; }
  .ref-list li { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.55rem; }
  footer a { color: #F7D89A; }
  .foot-base { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; font-size: 0.86rem; color: var(--faint); }