/* THE DOSIMETER (signature instrument) */
  .dose {
    position: fixed; bottom: 3.6rem; right: 1.15rem; z-index: 40;
    display: grid; grid-template-columns: 6px auto; gap: 0 0.7rem; align-items: stretch;
    padding: 0.75rem 0.85rem 0.7rem;
    background: color-mix(in srgb, var(--vitrine) 82%, transparent);
    border: 1px solid rgba(73,214,232,0.28);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    font-family: var(--mono); pointer-events: none; user-select: none;
    opacity: 0; transition: opacity 0.6s ease 0.9s;
  }
  .dose.lit { opacity: 1; }
  .dose__scale { position: relative; grid-row: 1 / 3; width: 6px; background: rgba(73,214,232,0.12); overflow: hidden; }
  .dose__fill { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--f, 0) * 100%);
    background: linear-gradient(to top, var(--cherenkov), rgba(73,214,232,0.35));
    box-shadow: 0 0 10px rgba(73,214,232,0.5); }
  .dose__read { display: flex; align-items: baseline; gap: 0.28em; }
  .dose__val { font-size: 1.18rem; font-weight: 600; letter-spacing: 0.01em; color: var(--cherenkov);
    font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(73,214,232,0.4); }
  .dose__unit { font-size: 0.68rem; color: rgba(73,214,232,0.72); }
  .dose__dot { width: 5px; height: 5px; margin-left: 0.15em; align-self: center; background: var(--cherenkov);
    box-shadow: 0 0 8px var(--cherenkov); }
  .dose__hall { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgba(73,214,232,0.62); margin-top: 0.28rem; white-space: nowrap; }
  @media (prefers-reduced-motion: no-preference) {
    .dose__dot { animation: dose-live 1.6s steps(1,end) infinite; }
  }
  @keyframes dose-live { 0%,55% { opacity: 1; } 56%,100% { opacity: 0.15; } }
  /* Mobile: collapse to a single instrument line pinned to the bottom edge */
  @media (max-width: 640px) {
    .dose { top: auto; bottom: 0; right: 0; left: 0; grid-template-columns: auto 1fr auto;
      align-items: center; gap: 0 0.6rem; padding: 0.5rem 0.9rem;
      border-left: none; border-right: none; border-bottom: none; }
    .dose__scale { grid-row: auto; width: 100%; height: 3px; }
    .dose__fill { width: calc(var(--f, 0) * 100%); height: 100%; left: 0; bottom: 0; }
    .dose__hall { margin-top: 0; }
  }

  /* ============ VIEW ROUTER (click to navigate; no-JS = full scroll) ============ */
  /* THE MUSEUM: THREE SCREENS, NO PAGE SCROLL */
  .js body { overflow: hidden; }
  
  @media (max-width: 820px) {
    .js body[data-screen="lobby"] { overflow: auto; }
    .js body[data-screen="lobby"] #main { height: auto; }
  }
  /* no top bar: the lobby and the walk bar are the whole navigation */
  .js .nav { display: none; }
  /* svh, not vh: the body never scrolls, so mobile toolbars never retract
     and 100vh leaves the bottom strip of every screen under them */
  .js #main { height: 100vh; height: 100svh; }

  .js .screen { display: none; }
  .js body[data-screen="title"] #screen-title { display: grid; }
  .js body[data-screen="lobby"] #screen-lobby { display: grid; }
  /* on the title and lobby screens nothing else from the museum is present */
  .js body[data-screen="title"] .view,
  .js body[data-screen="title"] .closing-band,
  .js body[data-screen="title"] footer,
  .js body[data-screen="lobby"] .view,
  .js body[data-screen="lobby"] .closing-band,
  .js body[data-screen="lobby"] footer { display: none !important; }
  
  .js body[data-screen="wing"] > footer { display: none; }
  .js body[data-screen="wing"] .view footer { display: block; margin: 0; }

  /* in a wing: exactly one exhibit on screen, filling it, and scrollable only if that single exhibit is genuinely taller than the viewport */
  
  .js body[data-screen="wing"] .view { display: none; }
  
  .js body[data-screen="wing"] #main {
    height: 100vh; height: 100svh; overflow: hidden; position: relative; perspective: 2200px;
  }
  .js body[data-screen="wing"] .view.in-wing {
    position: absolute; inset: 0; display: none;
    flex-direction: column;
    padding: 2.2rem 0 4rem;
    
    justify-content: center;
    justify-content: safe center;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .js body[data-screen="wing"] .view.in-wing::-webkit-scrollbar { width: 0; height: 0; }
  .js body[data-screen="wing"] .view.in-wing.is-page { display: flex; }
  /* Only the blocks belonging to the open leaf are on screen. */
  .js body[data-screen="wing"] .leaf-off { display: none !important; }
  /* a case showing only part of itself lays out as a single column */
  .js body[data-screen="wing"] .exhibit.is-part,
  .js body[data-screen="wing"] .is-part { display: block; }
  /* measured with the page laid out but not painted */
  .js body[data-screen="wing"] .view.in-wing.is-measuring { display: flex; visibility: hidden; }

  /* A room name was a full-height title card back when the page scrolled and a fixed nav sat over it. Both are gone: in a wing it is simply the first page of the exhibit, centred on its own. */
  .js body[data-screen="wing"] .section-head {
    min-height: 0; padding: 0; margin: 0 auto;
  }
  .js body[data-screen="wing"] .section-head h2 {
    font-size: clamp(1.5rem, min(7vw, 5.6vh), 3.5rem); margin-bottom: 0.7rem;
  }
  .js body[data-screen="wing"] .section-head .lede {
    font-size: clamp(0.9rem, min(3.4vw, 2vh), 1.2rem); line-height: 1.45;
  }
  /* a screen holding a single exhibit piece gives it the whole screen */
  .js body[data-screen="wing"] .view.in-wing.leaf-solo { padding: 1.2rem 0 3.4rem; }
  
  .js body[data-screen="wing"] .prose,
  .js body[data-screen="wing"] .pull,
  .js body[data-screen="wing"] .callout { max-width: 44rem; margin-inline: auto; }
  .js body[data-screen="wing"] .view.in-wing.leaf-full { padding: 0; }
  .js body[data-screen="wing"] .leaf-full > .wrap { max-width: none; padding: 0; width: 100%; }

  .js body[data-screen="wing"] .leaf-full .tour-figure {
    max-width: none; margin: 0; width: 100%; height: 100vh; height: 100svh; position: relative;
  }
  .js body[data-screen="wing"] .leaf-full .tour-frame {
    border: 0; box-shadow: none; width: 100%; height: 100%;
  }
  .js body[data-screen="wing"] .leaf-full .tour-frame video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .js body[data-screen="wing"] .leaf-full .tour-figure figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 4rem clamp(1.2rem, 5vw, 3rem) 4.4rem;
    font-size: 0.8rem; color: rgba(228,220,201,0.82);
    background: linear-gradient(to top, rgba(12,11,8,0.92), rgba(12,11,8,0));
  }

  /* The grid model is one instrument: the sliders, the readouts and the city they drive have to be on the screen together or the feedback loop that makes it worth using is broken. So it is. */
  .js body[data-screen="wing"] .sim-row { margin-bottom: 0.45rem; }
  .js body[data-screen="wing"] .sim-tiles { margin-bottom: 0.8rem; }
  .js body[data-screen="wing"] .sim-bars-title { margin-bottom: 0.5rem; }
  .js body[data-screen="wing"] .sim-city-wrap { margin-bottom: 0.5rem; }
  .js body[data-screen="wing"] #sim-city { width: auto; height: min(15vh, 10rem); margin: 0 auto; }
  .js body[data-screen="wing"] .sim-notes { margin-top: 0.7rem; }
  .js body[data-screen="wing"] .sim-notes summary { padding: 0.5rem 0; }
  .js body[data-screen="wing"] .sim-card { padding: 1.2rem 1.8rem 1rem; margin-bottom: 0; }

  /* A pinned scene was a sticky stage travelling through a scroll runway. There is no scroll here, so the stage simply is the page, and its beats are turned one at a time like everything else. */
  
  .js body[data-screen="wing"] #plant-scene .pin-stage { background: #0C0B08; }
  @media (min-width: 821px) {
    .js body[data-screen="wing"] .pin-stage { grid-template-columns: 1.95fr 1fr; }
    .js body[data-screen="wing"] .pin-figure { height: min(76vh, 47rem); }
    .js body[data-screen="wing"] .pin-figure svg { width: 100%; height: 100%; }
  }
  /* The frame covers rather than letterboxes, so it always crops something at the edges. Let the drawing fall away into the dark there instead of being cut through the middle of a label. */
  .js body[data-screen="wing"] .pin-figure::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to top,   #0C0B08 0%, rgba(12,11,8,0) 13%),
      linear-gradient(to right, #0C0B08 0%, rgba(12,11,8,0) 7%),
      linear-gradient(to left,  #0C0B08 0%, rgba(12,11,8,0) 7%);
  }
  /* the fission stage has its own ground, so its fade has to match it */
  .js body[data-screen="wing"] #fission-scene .pin-figure::after {
    background:
      linear-gradient(to top,   #0B1422 0%, rgba(11,20,34,0) 13%),
      linear-gradient(to right, #0B1422 0%, rgba(11,20,34,0) 7%),
      linear-gradient(to left,  #0B1422 0%, rgba(11,20,34,0) 7%);
  }
  .js body[data-screen="wing"] .pin-scene.is-live { height: auto; margin-block: 0; }
  .js body[data-screen="wing"] .pin-sticky { position: relative; top: auto; }
  .js body[data-screen="wing"] .pin-stage {
    min-height: 100vh; min-height: 100svh; border-block: 0;
    padding: 3.2rem clamp(1.2rem, 5vw, 4rem) 4.6rem;   /* bottom clears the walk bar */
  }
  .js body[data-screen="wing"] .pin-scene.is-live + .plate-credit { display: block; }
  .js body[data-screen="wing"] .wing-end { position: absolute; inset: 0; display: none; }
  .js body[data-screen="wing"] .wing-end.is-page { display: grid; }

  /* the turning leaf */
  .pageflip {
    position: fixed; inset: 0; z-index: 70; pointer-events: none;
    display: none; overflow: hidden;
    
    perspective: 6400px;
  }
  .pageflip.is-on { display: block; }
  .walkbar.is-long .walkbar__mid::after {
    content: '  \2193  more on this page';
    color: var(--spot); letter-spacing: 0.14em;
  }

  .pageflip__sheet {
    position: absolute; inset: 0;
    transform-origin: left center; transform-style: preserve-3d;
  }
  .pageflip__face {
    position: absolute; inset: 0; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  /* the front: the page you are leaving, still readable as it lifts */
  .pageflip__front {
    background: var(--gallery);
    box-shadow: 34px 0 90px rgba(0,0,0,0.72);
  }
  .pageflip__front > .view { position: absolute !important; inset: 0 !important; }
  /* the shading that slides across the front as the sheet turns */
  .pageflip__front::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 42%, rgba(0,0,0,0) 78%);
    opacity: var(--sh, 0);
  }
  /* the back: paper, with the leading edge the eye tracks across the screen */
  .pageflip__leaf {
    transform: rotateY(180deg);
    background: linear-gradient(95deg, #B9AF95 0%, #DCD3BC 16%, #EFE7D4 54%, #E0D6BF 84%, #C2B79C 100%);
    box-shadow: -26px 0 70px rgba(0,0,0,0.62);
  }
  .pageflip__leaf::after {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,247,225,0.9));
  }
  /* the shadow the turning page casts on the one beneath */
  .pageflip__shade {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.18) 52%, rgba(0,0,0,0) 78%);
    opacity: 0;
  }

  /* pieces arrive one at a time as you scroll into them */
  .js body[data-screen="wing"] .piece {
    opacity: 0; transform: translateY(30px); filter: brightness(0.45);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
                transform 0.85s cubic-bezier(0.16,1,0.3,1),
                filter 0.85s cubic-bezier(0.16,1,0.3,1);
    transition-delay: calc(var(--p, 0) * 90ms);
  }
  .js body[data-screen="wing"] .piece.lit { opacity: 1; transform: none; filter: none; }
  @media (prefers-reduced-motion: reduce) {
    .js body[data-screen="wing"] .piece { opacity: 1; transform: none; filter: none; }
  }

  /* the exit at the end of a wing */
  .wing-end {
    min-height: 70vh; display: grid; place-items: center; text-align: center;
    padding: 5rem 1.5rem;
    background: radial-gradient(120% 70% at 50% 40%, rgba(242,196,107,0.07), rgba(22,21,15,0) 62%);
  }
  .wing-end__k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--spot); margin-bottom: 1rem; }
  .wing-end__seen { font-family: var(--serif); color: var(--muted); max-width: 34rem;
    margin: 0.9rem auto 0; line-height: 1.55; }
  .wing-end__dose { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--cherenkov); opacity: 0.75;
    max-width: 34rem; margin: 1.1rem auto 0; line-height: 1.7; }
  .wing-end h2 { font-family: var(--display); font-size: clamp(1.9rem,4.4vw,3rem); color: var(--ink); margin-bottom: 1.4rem; }
  .js body[data-screen="wing"] .hero,
  .js body[data-screen="wing"] .closing-band,
  .js body:not([data-screen="wing"]) .wing-end,
  .js body[data-screen="wing"] #screen-title,
  .js body[data-screen="wing"] #screen-lobby { display: none !important; }


  /* the walk bar: where you are in the wing, and how to move */
  .walkbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.85rem 1.4rem;
    background: linear-gradient(to top, rgba(12,11,8,0.96), rgba(12,11,8,0.72) 70%, rgba(12,11,8,0));
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .js body:not([data-screen="wing"]) .walkbar { display: none; }
  .walkbar__where { color: var(--spot); white-space: nowrap; flex: 0 0 auto; }
  .walkbar__mid { color: var(--faint); text-align: center; flex: 1; }
  .walkbar button {
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    background: none; color: var(--placard); border: 1px solid var(--hair);
    padding: 0.62rem 1.05rem; cursor: pointer; border-radius: 0;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
  }
  .walkbar button:hover:not(:disabled) { border-color: var(--spot); color: var(--spot); background: rgba(242,196,107,0.08); }
  .walkbar button:disabled { opacity: 0.3; cursor: default; }
  .walkbar .wb-exit { border-color: transparent; color: var(--faint); }
  .walkbar .wb-exit:hover { color: var(--spot); }
  .walkbar__turn { display: flex; gap: 0.45rem; flex: 0 0 auto; }
  .walkbar__turn button { min-width: 44px; min-height: 44px; font-size: 0.95rem; padding: 0.5rem 0.9rem; }
  @media (max-width: 640px) {
    .walkbar {
      padding: 0.5rem 0.7rem; gap: 0.55rem;
      font-size: 0.54rem; letter-spacing: 0.09em;
    }
    /* the room name is the part that gives, not the page count */
    .walkbar__where { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
    .walkbar__mid { flex: 0 0 auto; }
    .walkbar button { padding: 0.45rem 0.6rem; }
    /* the turn buttons are the touch controls; they never shrink below 44px */
    .walkbar__turn button { min-width: 44px; min-height: 44px; padding: 0.45rem 0.75rem; }

    .dose { bottom: var(--walkbar-h, 2.4rem); padding: 0.42rem 0.9rem; }
    .dose__val { font-size: 1rem; }
  }

  /* Overview hub (landing directory) */
  /* THE LOBBY */
  .hero-hub { position: relative; z-index: 2; padding-top: 4rem; margin-top: 3rem; border-top: 1px solid var(--ink-line); }
  .hub-title {
    font-family: var(--mono); font-size: 0.72rem; font-weight: 400;
    letter-spacing: 0.32em; text-transform: uppercase; color: var(--spot);
    margin-bottom: 1.8rem; text-align: center;
  }
  .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 1.1rem; }
  
  .hub-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 0.34rem; text-decoration: none;
    min-height: 12.5rem; justify-content: flex-end;
    background:
      linear-gradient(180deg, rgba(242,196,107,0.16) 0%, rgba(242,196,107,0.04) 26%, rgba(12,11,8,0) 62%),
      var(--vitrine);
    border: 1px solid var(--hair);
    border-top: 1px solid rgba(242,196,107,0.42);
    border-radius: 0;
    padding: 1.15rem 1.15rem 1.25rem;
    transition: background 0.3s ease, border-top-color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .hub-card::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%;
    pointer-events: none; z-index: 0;
    background: radial-gradient(120% 100% at 50% 0%, rgba(242,196,107,0.14), rgba(242,196,107,0) 70%);
    opacity: 0.75; transition: opacity 0.3s ease;
  }
  .hub-card > * { position: relative; z-index: 1; }
  .hub-card:hover, .hub-card:focus-visible {
    border-top-color: var(--spot);
    background:
      linear-gradient(180deg, rgba(242,196,107,0.3) 0%, rgba(242,196,107,0.08) 30%, rgba(12,11,8,0) 66%),
      var(--vitrine);
    transform: translateY(-3px);
  }
  .hub-card:hover::after { opacity: 1; }

  .hub-card .hc-n {
    font-family: var(--sans); font-size: 0.78rem; font-weight: 800;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
    transition: color 0.18s;
  }
  .hub-card .hc-t { font-family: var(--display); font-size: 1.3rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
  .hub-card .hc-d { font-size: 0.9rem; color: var(--muted); line-height: 1.45; }
  .hub-card:hover .hc-n { color: var(--blue); }
  .hub-card:hover .hc-t { color: var(--blue-deep); }

  h1, h2, h3 { font-family: var(--display); font-weight: 500; color: var(--ink); }
  a { color: var(--blue-deep); }
  ::selection { background: rgba(245,158,11,0.3); }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 0; }
  /* read aloud, never drawn */
  .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--amber); color: #16150F;
    padding: 0.6rem 1rem; z-index: 100; font-weight: 600; text-decoration: none;
  }
  .skip-link:focus { left: 0; }

  /* MOTION SYSTEM */
  @media (prefers-reduced-motion: no-preference) {
    
    .js .reveal { opacity: 0; transform: translateY(26px);
      transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
    .js .reveal.in { opacity: 1; transform: none; }

    .js .section-head.reveal:not(.in) h2::after { transform: scaleX(0); }
    .section-head h2::after { transition: transform 0.9s cubic-bezier(0.16,1,0.3,1) 0.25s; }

    .btn .arr { display: inline-block; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); }
    .btn:hover .arr, .btn:focus-visible .arr { transform: translateX(5px); }
    .school-card h3 .go { display: inline-block; transition: transform 0.2s, color 0.2s; }
    a.school-card:hover h4 .go { transform: translate(3px, -3px); }
    .hstat { transition: background 0.25s, transform 0.3s cubic-bezier(0.16,1,0.3,1); }
    .hstat:hover { transform: translateY(-4px); }
  }
  
  .section-head h2::after {
    content: ''; display: block; width: 4.5rem; height: 4px;
    background: var(--blue); margin-top: 1rem;
    transform-origin: 0 50%;
  }
  .btn:active { transform: translateY(1px); }

  /* ============ NAV ============ */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(10,14,23,0.82);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hair);
    display: flex; align-items: center; gap: 1.25rem;
    padding: 0 1.25rem; height: 4rem;
  }
  .nav__brand {
    font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink);
    text-decoration: none; display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0;
  }
  .nav__brand svg { color: var(--blue); }
  .nav__links { display: flex; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a {
    font-size: 0.85rem; font-weight: 500; color: var(--muted);
    text-decoration: none; white-space: nowrap;
    padding: 1.3rem 0.5rem; /* ≥44px touch target */
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }
  .nav__links a:hover { color: var(--ink); }
  .nav__links a.active { color: var(--blue-deep); border-bottom-color: var(--blue); }