:root{
    /* ── Design tokens ─────────────────────────────────────────────
       --accent is the single accent color for the whole site (dark pages).
       --accent-ice is the same accent tuned for the light "ice" surfaces
       (Discografia, the Crew galleries) — kept a shade darker so it still
       reads clearly on a pale background. To re-theme the site, change
       just these two values. --signal is a legacy alias, do not remove. */
    --void:#0c0b0a;
    --paper:#e8e2d3;
    --accent:#ff6a2b;
    --accent-ice:#c8480f;
    --signal:var(--accent);
    --dim:#8a8578;
    --line: rgba(232,226,211,0.16);
    --line-strong: rgba(232,226,211,0.30);
    --ink:#e8e2d3;
    --ink-soft: rgba(232,226,211,0.62);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Courier New", monospace;
    --sans: "Helvetica Neue", Helvetica, Arial, -apple-system, "Segoe UI", sans-serif;
  }
  /* Intentional single dark "radar / terminal" world — deliberately no light theme. */

  *{ box-sizing:border-box; }
  html,body{ margin:0; height:100%; background:var(--void); overscroll-behavior-y:contain; overflow-x:hidden; }
  body{
    color:var(--ink);
    font-family:var(--sans);
    font-weight:700;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* ── Base typography ─────────────────────────────────────────────
     Element-level defaults (lowest specificity), so any h1/h2/p/span
     that doesn't get a bespoke class still looks intentional. Existing
     class-based rules elsewhere continue to win over these by design. */
  h1{
    margin:0 0 .3em; font-family:var(--sans); font-weight:700;
    font-size:clamp(28px, 4.4vw, 46px); line-height:1.05; letter-spacing:-.01em;
    text-wrap:balance;
  }
  h2{
    margin:0 0 .35em; font-family:var(--sans); font-weight:700;
    font-size:clamp(26px, 4.2vw, 44px); line-height:1.08; letter-spacing:-.01em;
    text-wrap:balance;
  }
  p{
    margin:0 0 1em; font-family:var(--sans); font-weight:400;
    font-size:14px; line-height:1.7; color:var(--ink-soft); max-width:60ch;
  }
  span{ font:inherit; color:inherit; }
  @media (max-width:600px){
    h1{ font-size:clamp(26px, 7vw, 34px); }
    h2{ font-size:clamp(22px, 6.4vw, 30px); }
    p{ font-size:13.5px; line-height:1.65; }
  }
  ::selection{ background:var(--signal); color:var(--void); }
  a{ text-decoration:none; }

  .page{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    padding:26px;
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap:16px;
  }


  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  /* ---------- boot sequence ---------- */
  .boot-screen{
    position:fixed; inset:0; z-index:300;
    background:var(--void);
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease;
  }
  .boot-screen.fade-out{ opacity:0; pointer-events:none; }
  .boot-line{
    font-family:var(--mono); font-size:15px; letter-spacing:.06em; color:var(--ink);
  }
  .skip-intro{
    position:fixed; left:50%; transform:translateX(-50%); bottom:34px; z-index:310;
    display:flex; align-items:center; gap:9px;
    background:rgba(12,11,10,.6); border:1px solid var(--signal); color:var(--signal); cursor:pointer;
    padding:10px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    transition:opacity .3s ease, background .2s ease;
  }
  .skip-intro:hover{ background:rgba(255,106,43,.14); }
  .skip-intro .skip-arrow{ display:inline-block; animation:skipArrowBlink 1s steps(2) infinite; }
  @keyframes skipArrowBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } }
  .skip-intro.hide{ opacity:0; pointer-events:none; }
  @media (prefers-reduced-motion: reduce){
    .skip-intro{ display:none; }
    .skip-intro .skip-arrow{ animation:none; }
  }
  @media (max-width:600px){ .skip-intro{ bottom:20px; padding:9px 14px; } }
  .boot-cursor{ display:inline-block; margin-left:2px; animation:blink 1s steps(1) infinite; }
  @keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
  @media (prefers-reduced-motion: reduce){ .boot-cursor{ animation:none; } }

  .signal-line{
    position:fixed; left:50%; top:50%; z-index:120;
    transform:translate(-50%,-50%);
    font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--signal);
    background:color-mix(in srgb, var(--void) 72%, transparent);
    border:1px solid var(--line-strong);
    padding:12px 18px;
    opacity:0; transition:opacity .3s ease;
    pointer-events:none;
  }
  .signal-line.show{ opacity:1; }
  .signal-line.flash{ animation: signalBlink .4s steps(1) infinite; border-color:var(--signal); }
  @keyframes signalBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
  @media (prefers-reduced-motion: reduce){ .signal-line.flash{ animation:none; } }

  .reveal-top{ opacity:0; transform:translateY(-14px); transition:opacity .55s ease, transform .55s ease; }
  .reveal-top.in{ opacity:1; transform:translateY(0); }
  .reveal-pop{ opacity:0; transform:scale(.95); transition:opacity .4s ease, transform .4s ease; }
  .reveal-pop.in{ opacity:1; transform:scale(1); }
  @media (prefers-reduced-motion: reduce){
    .reveal-top, .reveal-pop{ transition:none; opacity:1; transform:none; }
  }

  /* fixed header blur — softens content scrolling underneath brand/menu, no color tint */
  .bg-video{
    position:fixed; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover;
    opacity:.7; pointer-events:none;
  }
  @media (prefers-reduced-motion: reduce){ .bg-video{ display:none; } }

  .header-blur{
    position:fixed; top:0; left:0; right:0; height:90px; z-index:150;
    pointer-events:none;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 35%, transparent 100%);
  }

  /* row 1 — brand + nav */
  .brand{
    grid-column:1/3; grid-row:1;
    position:relative; z-index:200;
    display:flex; align-items:baseline; gap:8px;
    cursor:pointer; width:fit-content;
  }
  .brand b{
    position:relative; display:inline-block;
    font-size:13px; letter-spacing:.05em; font-weight:700; color:var(--ink);
    transition:color .3s ease;
  }
  body.on-light-panel .brand b{ color:#0d1416; }

  /* row 1 — nav */
  .hamburger{
    display:flex; grid-column:5/6; grid-row:1; justify-self:end; align-self:start;
    position:relative; z-index:200; padding:0;
    background:none; border:none; cursor:pointer;
    align-items:center; gap:12px;
    font-size:13px; font-weight:700; letter-spacing:.05em; color:var(--ink);
    transition:color .3s ease;
  }
  .hamburger:hover{ color:var(--signal); }
  body.on-light-panel .hamburger{ color:#0d1416; }
  body.on-light-panel .hamburger:hover{ color:var(--accent-ice); }
  .hamburger-icon{ position:relative; width:20px; height:20px; flex:0 0 auto; transition:transform .3s ease; }
  .hamburger-icon .bar{ position:absolute; top:50%; left:50%; background:currentColor; transition:background .2s ease; }
  .hamburger-icon .bar-h{ width:20px; height:1.5px; transform:translate(-50%,-50%); }
  .hamburger-icon .bar-v{ width:1.5px; height:20px; transform:translate(-50%,-50%); }
  .hamburger.active{ color:var(--signal); }
  .hamburger.active .hamburger-icon{ transform:rotate(45deg); }

  .mobile-nav{
    display:flex; position:fixed; inset:0; z-index:199;
    background:var(--void); flex-direction:column; align-items:center; justify-content:center; gap:26px;
    font-family:var(--sans); font-size:clamp(28px,8vw,44px); font-weight:700; text-transform:uppercase;
    opacity:0; pointer-events:none; transition:opacity .4s ease;
  }
  .mobile-nav.open{ opacity:1; pointer-events:auto; }
  .mobile-nav a{ color:var(--ink-soft); }
  .mobile-nav a:hover{ color:var(--signal); }
  .mobile-nav-social{
    display:flex; gap:22px; margin-top:24px; margin-bottom:28px;
  }
  .mobile-nav-social a{
    color:var(--signal);
    display:inline-flex; align-items:center; justify-content:center;
    transition:opacity .2s ease, transform .2s ease;
  }
  .mobile-nav-social a:hover{ opacity:.75; transform:translateY(-2px); }
  .mobile-nav-footer{
    position:absolute; left:0; right:0; bottom:32px;
    display:flex; flex-direction:column; align-items:center; gap:9px;
    font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.04em; text-transform:none;
    color:var(--ink-soft);
  }
  .mobile-nav-rule{ width:36px; height:1px; background:var(--line-strong); }
  .mobile-nav-copy, .mobile-nav-credit{ margin:0; }
  .mobile-nav-credit-link{ color:inherit; text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; }
  .mobile-nav-credit-link:hover{ color:var(--signal); border-color:var(--signal); }
  .mobile-nav-credit-serif{
    font-family:Garamond, 'Apple Garamond', 'EB Garamond', serif; font-size:15px; font-style:italic;
  }
  @media (max-height:640px){ .mobile-nav-footer{ display:none; } }
  @media (prefers-reduced-motion: reduce){ .mobile-nav{ transition:none; } .hamburger-icon{ transition:none; } }

  /* mobile-nav overlay is always dark — keep brand/hamburger on the light-ink color while it's open,
     even if a light panel (on-light-panel) sits behind it */
  body.nav-open .brand b{ color:var(--ink); }
  body.nav-open .hamburger{ color:var(--ink); }
  body.nav-open .hamburger:hover{ color:var(--signal); }
  body.nav-open .hamburger.active{ color:var(--signal); }

  /* row 2 — headline */
  .stage-headline-wrap{ position:relative; z-index:2; grid-row:2; align-self:center; pointer-events:none; }
  .headline-a{ grid-column:1/3; justify-self:start; text-align:left; }
  .headline-b{ grid-column:4/6; justify-self:end; text-align:right; }
  .stage-headline-wrap h1{
    margin:0; font-size:clamp(28px,4.2vw,46px); line-height:1.0; font-weight:700;
    letter-spacing:-.01em; text-wrap:balance;
  }
  .stage-headline-wrap h1 em{ color:var(--signal); font-style:normal; }
  .hud-hint{
    font-family:var(--mono); font-size:10.5px; color:var(--dim); letter-spacing:.04em;
    margin-top:16px; min-height:14px; opacity:0; transition:opacity .25s ease;
  }
  .hud-hint.show{ opacity:1; color:var(--signal); }

  .glitch-flash{
    position:fixed; top:50%; z-index:150;
    transform:translateY(-50%) scale(.92);
    font-family:var(--sans); font-weight:700; text-transform:uppercase;
    font-size:12.5px; letter-spacing:.02em; line-height:1.4;
    color:var(--ink); text-shadow:0 0 10px var(--void), 0 0 3px var(--void);
    max-width:220px;
    opacity:0; pointer-events:none;
    transition:opacity .12s ease, transform .12s ease;
  }
  .glitch-flash.pop-right{ text-align:left; }
  .glitch-flash.pop-left{ text-align:right; }
  .glitch-flash.show{
    opacity:1; transform:translateY(-50%) scale(1);
    animation: glitchFlashPop .5s steps(2);
  }
  @keyframes glitchFlashPop{
    0%{ transform:translateY(-50%) scale(1) skewX(0deg); }
    20%{ transform:translateY(-50%) translateX(3px) scale(1.03) skewX(-3deg); color:var(--signal); }
    40%{ transform:translateY(-50%) translateX(-3px) scale(.98) skewX(2deg); }
    60%{ transform:translateY(-50%) scale(1.01); }
    100%{ transform:translateY(-50%) scale(1) skewX(0deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .glitch-flash{ transition:opacity .2s ease; }
    .glitch-flash.show{ animation:none; }
  }

  /* row 3 — bio (left) + readout (right) */
  .modal-backdrop{
    position:fixed; inset:0; z-index:19;
    background:rgba(0,0,0,.6);
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .modal-backdrop.in{ opacity:1; pointer-events:auto; }
  @media (prefers-reduced-motion: reduce){ .modal-backdrop{ transition:none; } }

  .target-lock{
    position:fixed; inset:0; z-index:150;
    background:var(--void);
    display:flex; align-items:center; justify-content:center;
    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.65,0,.35,1);
  }
  .target-lock.show{ transform:translateY(0); }
  .target-lock-inner{ text-align:center; }
  .target-lock-inner img{ width:min(200px, 40vw); display:block; margin:0 auto 20px; }
  @media (prefers-reduced-motion: reduce){ .target-lock{ transition:none; } }

  .stage-desc{
    position:fixed; left:50%; top:50%; z-index:20;
    width:320px; max-width:calc(100vw - 40px);
    transform:translate(-50%,-50%) scale(.94);
    opacity:0; pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
    background: var(--void);
    border:1px solid color-mix(in srgb, var(--signal) 70%, transparent);
    padding:14px 40px 14px 16px;
  }
  .stage-desc.in{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
  @media (prefers-reduced-motion: reduce){ .stage-desc{ transition:none; } }
  .stage-desc .eyebrow{
    font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--signal); margin-bottom:8px; display:flex; align-items:center; gap:7px;
  }
  .stage-desc .tx-dot{
    width:6px; height:6px; border-radius:50%; background:var(--signal); flex-shrink:0;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);
    animation:pulse 2.4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){ .stage-desc .tx-dot{ animation:none; } }
  .stage-desc .tx-title{
    font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:.01em;
    color:var(--signal); margin:0 0 8px;
  }
  .stage-desc p{ margin:0; font-size:16px; line-height:1.6; color:var(--ink-soft); }
  .stage-desc .tx-stay{ margin-top:14px; }
  .close-btn{
    position:absolute; top:10px; right:10px;
    background:none; border:none; color:var(--dim); cursor:pointer;
    font-family:var(--mono); font-size:12px; line-height:1; padding:4px;
  }
  .close-btn:hover{ color:var(--signal); }

  .transmission-tab{
    display:none; position:fixed; right:26px; bottom:34px; z-index:20;
    align-items:center; gap:9px;
    background: var(--void);
    border:1px solid color-mix(in srgb, var(--signal) 70%, transparent); cursor:pointer;
    padding:11px 16px; width:fit-content;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-soft);
    opacity:0; transform:translateX(10px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .transmission-tab:hover{ color:var(--ink); }
  .transmission-tab.show{ display:flex; opacity:1; transform:translateX(0); }
  @media (prefers-reduced-motion: reduce){ .transmission-tab{ transition:none; } }
  .transmission-tab .dot{ width:6px; height:6px; border-radius:50%; background:var(--signal);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent); animation:pulse 2.4s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce){ .transmission-tab .dot{ animation:none; } }

  .readout-br{
    position:fixed; left:26px; bottom:34px; z-index:2;
    width:150px;
  }
  .readout-br .hud-label{
    font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--signal); margin-bottom:6px; display:flex; align-items:center; gap:5px;
  }
  .readout-br .stat{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    padding:3px 0;
  }
  .readout-br .l{ font-family:var(--mono); font-size:8px; color:var(--dim); letter-spacing:.05em; text-transform:uppercase; }
  .readout-br .v{ font-family:var(--mono); font-size:10.5px; color:var(--ink); font-variant-numeric:tabular-nums; }

  /* globe layer */
  .globe-wrap{
    position:absolute; inset:0; z-index:1; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    touch-action:pan-y;
  }
  #globe{ display:block; pointer-events:none; }
  .globe-hit{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    touch-action:pan-y; cursor:grab;
  }
  .globe-hit.dragging{ cursor:grabbing; }
  .globe-hit.hover-target{ cursor:pointer; }

  @media (max-width:820px){
    .page{ grid-template-columns:1fr; grid-template-rows:auto auto; align-content:start; padding:20px 18px; }
    .brand{ grid-column:1; grid-row:1; }
    .hamburger{ display:flex; grid-column:1; grid-row:1; justify-self:end; }
    .readout-br{ display:none; }
    .globe-wrap{ position:fixed; inset:0; height:100vh; height:100dvh; }
    .stage-headline-wrap{
      position:fixed; left:16px; right:16px; z-index:2;
      grid-column:unset; grid-row:unset; justify-self:unset; align-self:unset;
      text-align:center; margin:0; padding:0;
    }
    .headline-a{ top:76px; }
    .headline-b{ bottom:104px; }
    .stage-desc{ width:calc(100vw - 40px); }
    .transmission-tab{
      left:16px; right:16px; bottom:16px; top:auto; width:auto; justify-content:center;
      transform:translateY(10px);
    }
    .transmission-tab.show{ transform:translateY(0); }
  }

  /* ---------- reveal panels ---------- */
  .reveal-panel{
    position:fixed; inset:0; z-index:100;
    transform:translateY(-100%);
    transition:transform .85s cubic-bezier(.65,0,.35,1);
    overflow-y:auto; overflow-x:hidden; overscroll-behavior-x:none; pointer-events:none;
    background:var(--void); color:var(--ink);
  }
  .reveal-panel.open{ transform:translateY(0); pointer-events:auto; }
  @media (prefers-reduced-motion: reduce){ .reveal-panel{ transition:none; } }


  .panel-simple{
    max-width:640px; margin:0 auto; padding:140px 28px 80px;
    font-family:var(--mono);
  }
  .panel-simple .eyebrow{ color:var(--signal); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
  .panel-simple h2{ font-family:var(--sans); font-size:clamp(30px,5vw,48px); margin:14px 0 18px; font-weight:700; }
  /* the scramble pool is all wide uppercase glyphs, so "Transmission
     Archive" measures noticeably wider mid-scramble than once it settles —
     force one line and size it to fit even the widest scrambled frame. */
  #archivioTitle{ white-space:nowrap; font-size:clamp(20px,6.5vw,48px); }
  .panel-simple p{ color:var(--ink-soft); font-size:14px; line-height:1.7; }

  .live-dates{ margin-top:36px; }
  .live-date-row{
    display:grid; grid-template-columns:120px 140px 130px 1fr; gap:18px; align-items:baseline;
    padding:16px 0; border-top:1px solid var(--line);
  }
  .live-dates .live-date-row:last-child{ border-bottom:1px solid var(--line); }
  .live-date-date{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--signal); }
  .live-date-city{ font-family:var(--sans); font-weight:700; font-size:14px; text-transform:uppercase; color:var(--ink); }
  .live-date-who{ font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
  .live-date-event{ font-family:var(--sans); font-weight:400; font-size:14px; color:var(--ink-soft); }
  .live-empty{ color:var(--dim); font-size:14px; letter-spacing:.02em; }
  @media (max-width:600px){
    .live-date-row{ grid-template-columns:1fr; gap:4px; padding:14px 0; }
  }
  .crew-bio{
    opacity:0; transform:scale(.97);
    transition:opacity .5s ease .1s, transform .5s ease .1s;
  }
  .reveal-panel.open .crew-bio{ opacity:1; transform:scale(1); }
  @media (prefers-reduced-motion: reduce){ .crew-bio{ opacity:1; transform:none; } }

  .crew-bio-quote{
    margin:32px 0;
    opacity:0; transform:scale(.97); transition:opacity .5s ease .1s, transform .5s ease .1s;
  }
  .reveal-panel.open .crew-bio-quote{ opacity:1; transform:scale(1); }
  @media (prefers-reduced-motion: reduce){ .crew-bio-quote{ opacity:1; transform:none; } }
  .crew-bio-quote p{
    margin:0; font-family:var(--sans); font-weight:700; font-size:16px;
    line-height:1.5; color:var(--ink); max-width:52ch;
  }
  .crew-bio-quote cite{
    display:block; margin-top:10px; font-style:normal; font-family:var(--sans);
    font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--signal);
  }
  .crew-bio-emphasis{
    font-family:var(--sans); font-weight:700; font-size:14px;
    line-height:1.7; color:var(--ink) !important;
    opacity:0; transform:scale(.97); transition:opacity .5s ease .1s, transform .5s ease .1s;
  }
  .reveal-panel.open .crew-bio-emphasis{ opacity:1; transform:scale(1); }
  @media (prefers-reduced-motion: reduce){ .crew-bio-emphasis{ opacity:1; transform:none; } }

  /* mobile/tablet: a single plain static line right after the bio text —
     no animation, no repeats. The scroll-multiplying effect is desktop-only
     (see the 1440px breakpoint below). */
  .crew-col-statement{
    display:flex;
    margin-top:48px;
    flex-direction:column; justify-content:flex-start; overflow:hidden;
    pointer-events:none;
  }
  .crew-col-statement span{
    font-family:var(--sans); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
    font-size:clamp(22px,1.8vw,30px); line-height:1.15; color:var(--signal);
    margin-top:0;
  }
  .crew-col-statement span:not(:first-child){ display:none; }

  @media (min-width:1440px){
    /* desktop: the statement "multiplies" down the second grid column as
       the bio block scrolls through view, reversing on scroll-up, gone once
       past — see updateBioMultiply() in app.js. */
    .crew-col-statement{ margin-top:70px; }
    .crew-col-statement span{
      opacity:0; transform:translateY(8px);
      transition:opacity .6s ease, transform .6s ease;
    }
    .crew-col-statement span:not(:first-child){ display:block; }
    .crew-col-statement span.is-visible{ opacity:var(--a, 1); transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .crew-col-statement span:not(:first-child){ display:none; }
  }

  .scan-block{
    font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--ink-soft);
    margin:24px 0 32px; line-height:2.1;
  }
  .scan-block .scan-status{ color:var(--signal); text-transform:uppercase; letter-spacing:.12em; }
  .scan-block .scan-dots{ display:inline-block; animation:scanDots 1.4s steps(4) infinite; }
  .scan-block .scan-bar-row{ display:block; }
  .scan-block .scan-pct{ margin-left:8px; color:var(--ink-soft); }
  .scan-block .scan-db{ display:block; color:var(--ink); font-weight:600; letter-spacing:.02em; }
  .scan-block .scan-count{ display:block; }
  .scan-block .scan-cursor{ color:var(--signal); animation:scanBlink 1s step-end infinite; }
  @keyframes scanDots{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  @keyframes scanBlink{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){
    .scan-block .scan-dots, .scan-block .scan-cursor{ animation:none; }
  }

  .scan-block .scan-status.blinking{ animation:scanDots 1s steps(2) infinite; }
  .scan-block .scan-bar-track{
    display:inline-block; width:200px; height:9px; vertical-align:middle;
    background:var(--line); position:relative; overflow:hidden;
  }
  .scan-block .scan-bar-fill{
    display:block; height:100%; width:0%; background:var(--signal);
    background-image:repeating-linear-gradient(90deg, rgba(13,20,22,.3) 0 2px, transparent 2px 4px);
    transition:width 1.1s cubic-bezier(.3,.7,.4,1);
  }
  @media (prefers-reduced-motion: reduce){
    .scan-block{ transition:none; }
    .scan-block .scan-status.blinking{ animation:none; }
    .scan-block .scan-bar-fill{ transition:none; }
  }

  .crew-title{ opacity:0; transition:opacity .3s ease; }
  #crewScan{ text-align:left; margin:22px auto 0; max-width:280px; }

  #panel-crew .panel-simple.crew-two-col{ max-width:1020px; }
  .crew-col-main{ min-width:0; }
  @media (min-width:1440px){
    /* .crew-col-statement is taken out of flow (position:absolute) rather
       than being a grid column, so its height — which can run well past
       the bio block once it's multiplied down the page — never pushes
       .crew-col-full (timeline/tribute/mission-log) down with it. That
       block just follows .crew-col-main's own height, same as always;
       the statement floats over its right half and fades out on its own. */
    #panel-crew .panel-simple.crew-two-col{ position:relative; }
    .crew-col-main{ max-width:510px; }
    .crew-col-statement{ position:absolute; top:0; left:510px; width:510px; }
  }

  /* archivio page — video/photo blocks always open, no accordion */
  #panel-archivio .panel-simple.archivio-inner{ max-width:1020px; }
  #panel-archivio .eyebrow{ color:var(--accent-ice); }
  .archive-block{ margin-top:64px; }
  .archive-block:first-of-type{ margin-top:56px; }
  .archive-head-static{
    display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
    padding-bottom:16px; border-bottom:1px solid rgba(13,20,22,.15);
  }
  .archive-panel-static .archive-panel-inner > *:first-child{ padding-top:36px; }
  .archive-panel-static .archive-panel-inner > *:last-child{ padding-bottom:36px; }

  .archive-toggle{
    width:100%; display:grid; grid-template-columns:1fr 24px; align-items:center; column-gap:16px;
    background:none; border:none; border-top:1px solid rgba(13,20,22,.15); cursor:pointer;
    padding:90px 16px;
  }
  .archive-toggle:first-child{ border-top:none; }
  .archive-head{ grid-column:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; }
  .archive-title{
    font-family:var(--sans); font-weight:700; font-size:clamp(20px,3vw,28px);
    color:#0d1416; letter-spacing:-.01em; transition:color .2s ease;
  }
  .archive-num{ color:var(--accent-ice); margin-right:4px; }
  .archive-toggle:hover .archive-title{ color:var(--accent-ice); }
  .archive-chevron{
    grid-column:2; justify-self:end; position:relative;
    width:20px; height:20px; transition:transform .3s ease;
  }
  .archive-chevron .bar{ position:absolute; top:50%; left:50%; background:#0d1416; }
  .archive-chevron .bar-h{ width:20px; height:1.5px; transform:translate(-50%,-50%); }
  .archive-chevron .bar-v{ width:1.5px; height:20px; transform:translate(-50%,-50%); }
  .archive-toggle.open .archive-chevron{ transform:rotate(45deg); }
  .archive-toggle[data-archive="photos"].open{ padding-bottom:24px; }

  .archive-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s ease; }
  .archive-panel.open{ grid-template-rows:1fr; }
  .archive-panel-inner{ overflow-x:visible; overflow-y:hidden; text-align:center; }
  .archive-panel-inner > *:first-child{ padding-top:8px; }
  .archive-panel-inner > *:last-child{ padding-bottom:36px; }
  @media (prefers-reduced-motion: reduce){ .archive-panel{ transition:none; } }

  /* overflow-y:hidden above (needed so the 0fr/1fr collapse can animate to a
     true zero height) forces the paired overflow-x:visible to compute as
     overflow-x:auto per spec, which clips any full-bleed breakout child to
     archive-panel-inner's own (column-width) box. Fix: make the accordion's
     inner wrapper itself full-bleed for the video/photo archives specifically,
     so there's nothing left to clip — the carousels below just fill it. */
  #archivePanelVideos .archive-panel-inner,
  #archivePanelPhotos .archive-panel-inner{
    width:100vw; position:relative; left:50%; margin-left:-50vw;
  }

  .photo-viewport{
    width:100%;
    overflow:hidden; touch-action:pan-y; overscroll-behavior-x:none; cursor:grab;
  }
  .photo-viewport.dragging{ cursor:grabbing; }
  .photo-strip{
    display:flex; align-items:center; gap:40px;
    transition:transform .45s cubic-bezier(.65,0,.35,1);
  }
  .photo-item{
    flex:0 0 auto; opacity:.55; transform:scale(.82); cursor:pointer;
    transition:opacity .45s ease, transform .45s ease;
  }
  .photo-item.active{ opacity:1; transform:scale(1); cursor:default; }
  .photo-item .frame{ height:min(30vw, 340px); }
  .photo-item img{ height:100%; width:auto; display:block; }
  /* shared caption type for the Archive galleries (video + photo) — sized
     and weighted for mobile first: legible without going full-bold, then
     nudged up slightly for desktop via the clamp. */
  .archive-caption{
    font-family:var(--sans); font-weight:400; font-size:clamp(13.5px, 3.6vw, 15px);
    line-height:1.5; color:#0d1416;
  }
  .archive-caption::before{ content:'— '; }

  .photo-caption{
    margin-top:10px; text-align:left;
  }
  .photo-nav-row{
    display:flex; align-items:center; justify-content:center; gap:22px; margin-top:28px;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#4d5a5d;
  }
  .photo-nav-row button{
    background:none; border:none; color:#0d1416; cursor:pointer;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  }
  .photo-nav-row button:hover{ color:var(--accent-ice); }

  #videoViewport, #photoViewport{ margin-top:32px; }

  @media (max-width:600px){
    .photo-item .frame{ height:56vw; }
    .photo-caption{ max-width:56vw; }
  }

  .video-meta{ margin-top:24px; text-align:left; padding-left:48px; padding-right:32px; box-sizing:border-box; }
  .video-meta h3{ max-width:640px; margin:0; }
  .video-viewport{
    width:100%;
    overflow:hidden; touch-action:pan-y; overscroll-behavior-x:none; cursor:grab;
  }
  .video-viewport.dragging{ cursor:grabbing; }
  .video-strip{
    display:flex; align-items:center; gap:40px;
    transition:transform .45s cubic-bezier(.65,0,.35,1);
  }
  .video-item{
    flex:0 0 auto; opacity:.8; transform:scale(.82); cursor:pointer;
    transition:opacity .45s ease, transform .45s ease;
  }
  .video-item.active{ opacity:1; transform:scale(1); cursor:pointer; }
  .video-item .frame{ position:relative; }
  .video-item img{
    height:min(26vw, 320px); width:auto; aspect-ratio:16/9; object-fit:cover; display:block;
    box-shadow:0 26px 46px -20px rgba(13,20,22,.45);
  }
  /* play marker styled like the homepage orbit dots — a small glowing
     point with a soft pulsing ring, not a literal play-button chip */
  .video-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:2;
    width:44px; height:44px; border-radius:50%;
    background:var(--signal); border:none; color:#0d1416;
    display:none; align-items:center; justify-content:center; cursor:pointer; padding:0;
    box-shadow:0 0 0 8px rgba(255,106,43,.32);
    animation:videoPlayPulse 1.8s ease-in-out infinite;
    transition:transform .2s ease;
  }
  .video-play svg{ margin-left:2px; }
  .video-play:hover{ transform:translate(-50%,-50%) scale(1.1); }
  .video-item.active .video-play{ display:flex; }
  @keyframes videoPlayPulse{
    0%,100%{ box-shadow:0 0 0 8px rgba(255,106,43,.32); }
    50%{ box-shadow:0 0 0 14px rgba(255,106,43,.14); }
  }
  @media (prefers-reduced-motion: reduce){
    .video-play{ animation:none; }
  }
  .video-item .frame::after{
    content:''; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,0);
    transition:background .25s ease; pointer-events:none;
  }
  .video-item .frame:hover::after{ background:rgba(0,0,0,.35); }
  @media (max-width:600px){
    .video-item img{ height:36vw; }
    .video-strip{ gap:20px; }
    .video-meta{ padding-left:16px; padding-right:16px; }
  }

  .crew-current-formation{
    width:100vw; position:relative; left:50%; margin-left:-50vw;
    margin-top:64px; padding:56px 0 0; background:#000;
  }
  .crew-current-formation h2{ max-width:1020px; margin:0 auto; padding:0 28px; color:#fff; }
  .crew-current-formation .cf-lineup{
    max-width:1020px; margin:10px auto 0; padding:0 28px;
    font-family:var(--sans); font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
    color:#fff; min-height:1.6em;
  }
  .crew-current-formation .cf-lineup-sep{ color:var(--signal); }
  .cf-video-frame{ margin-top:24px; width:100%; overflow:hidden; background:#000; }
  @media (min-width:1440px){
    .cf-video-frame{ max-width:65%; margin-left:auto; margin-right:auto; }
  }
  .cf-video{ display:block; width:100%; height:auto; max-height:82vh; margin:0 auto; object-fit:cover; }

  .mission-log-wrap{ margin-top:64px; padding-top:34px; }
  .mission-title{ opacity:0; transition:opacity .3s ease; margin-top:12px; }
  .mission-title.in{ opacity:1; }
  .mission-log{ margin-top:24px; font-family:var(--sans); font-size:14px; line-height:1.6; }

  .mission-group{ border-top:1px solid var(--line); }
  .mission-group:first-child{ border-top:none; }
  .mission-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:none; border:none; cursor:pointer; padding:20px 0; text-align:left;
  }
  .mission-toggle-name{
    font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ink); transition:color .2s ease;
  }
  .mission-toggle:hover .mission-toggle-name{ color:var(--signal); }
  .mission-chevron{ position:relative; width:18px; height:18px; flex:0 0 auto; transition:transform .3s ease; }
  .mission-chevron .bar{ position:absolute; top:50%; left:50%; background:var(--ink); }
  .mission-chevron .bar-h{ width:18px; height:1.5px; transform:translate(-50%,-50%); }
  .mission-chevron .bar-v{ width:1.5px; height:18px; transform:translate(-50%,-50%); }
  .mission-toggle.open .mission-chevron{ transform:rotate(45deg); }

  .mission-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s ease; }
  .mission-panel.open{ grid-template-rows:1fr; }
  .mission-panel-inner{ overflow:hidden; }
  .mission-panel-inner > *:last-child{ padding-bottom:18px; }
  @media (prefers-reduced-motion: reduce){ .mission-panel{ transition:none; } }

  .mission-row{
    display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:baseline;
    padding:10px 0;
  }
  .mission-row .roster-year{ font-size:14px; color:var(--signal); }
  .mission-row .mr{ font-family:var(--sans); font-weight:400; color:var(--ink-soft); font-size:14px; line-height:1.6; }
  .mission-tbc{
    text-align:center; color:var(--dim); letter-spacing:.14em; text-transform:uppercase;
    padding:22px 0 4px; font-size:11px; border-top:1px solid var(--line); margin-top:4px;
  }
  @media (max-width:600px){
    .mission-log{ font-size:13.5px; }
    .mission-row{ grid-template-columns:40px 1fr; }
  }

  /* ── Tribute — full-bleed accent island inside the Crew page ────────
     Black type on the site's accent orange, leaning entirely on the
     established 400/700 --sans weights for the size/weight contrast. */
  .crew-tribute-lite{
    width:100vw; position:relative; left:50%; margin-left:-50vw;
    margin-top:0; padding:90px 0;
    background:var(--accent); color:#000;
  }
  .crew-tribute-lite-inner{ max-width:760px; margin:0 auto; padding:0 32px; }

  .crew-tribute-lite-inner .tribute-lite-eyebrow{
    display:block; margin:0 0 28px; text-align:left; color:#000;
  }

  .tribute-lite-quote{ margin:0 0 48px; text-align:left; }
  .tribute-lite-quote p{
    margin:0 0 16px; font-family:var(--sans); font-weight:700;
    font-size:clamp(21px,3.4vw,32px); line-height:1.28; color:#000;
  }
  .tribute-lite-quote cite{
    display:block; font-style:normal; font-family:var(--sans); font-weight:700; font-size:13px;
    letter-spacing:.04em; text-transform:uppercase; color:#000;
  }

  .tribute-lite-mentors{ margin:0 0 48px; }
  .tribute-lite-mentor{
    display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:20px;
    padding:20px 0; border-top:1px solid rgba(13,13,13,.3);
  }
  .tribute-lite-mentors .tribute-lite-mentor:last-child{ border-bottom:1px solid rgba(13,13,13,.3); }
  .tribute-lite-mentor h3{
    margin:0; font-family:var(--sans); font-weight:700; letter-spacing:-.02em;
    font-size:clamp(38px,8.6vw,68px); line-height:.95; text-transform:uppercase; color:#000;
  }
  .tribute-lite-mentor p{
    margin:0; font-family:var(--sans); font-weight:700; font-size:13px; line-height:1.5;
    color:#000; text-align:right; max-width:16ch;
  }
  .tribute-lite-cross{
    font-family:var(--sans); font-variant-emoji:text;
    font-size:.46em; font-weight:400; vertical-align:top; margin-left:1px; opacity:.7;
  }

  .tribute-lite-closing{ text-align:center; }
  .tribute-lite-closing p{
    margin:0 0 16px; font-family:var(--sans); font-weight:400;
    font-size:clamp(15px,2vw,18px); line-height:1.6; color:#000;
  }
  .tribute-lite-signature{
    font-weight:700 !important; font-size:clamp(15px,2vw,18px) !important;
    letter-spacing:.02em; text-transform:uppercase;
    line-height:1.5 !important; color:#000 !important; margin-top:6px !important;
  }

  .crew-tribute-lite-inner .tribute-lite-legacy{
    margin:36px 0 0; padding-top:28px; border-top:1px solid rgba(13,13,13,.3);
    font-family:var(--sans); font-weight:700; letter-spacing:-.02em; text-transform:uppercase;
    font-size:clamp(34px,6.6vw,60px); line-height:.98; color:#000; max-width:none;
  }

  .tribute-lite-footer{
    display:flex; align-items:center; gap:16px; margin-top:36px;
    font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#000;
  }
  .tribute-lite-footer-rule{ flex:1; height:1px; background:rgba(13,13,13,.35); }

  .tribute-lite-spectrum{
    position:absolute; left:0; right:0; bottom:0; height:56px;
    display:flex; align-items:flex-end; justify-content:flex-start; gap:1px; padding:0 2px;
    overflow:hidden; pointer-events:none;
  }
  .tribute-lite-spectrum span{
    flex:0 0 auto; width:4px; min-width:4px; height:var(--peak, 60%);
    background:#000; opacity:1; transform-origin:bottom;
    animation:tributeSpectrum var(--dur, 1s) ease-in-out var(--delay, 0s) infinite alternate;
  }
  @keyframes tributeSpectrum{
    0%{ transform:scaleY(.18); }
    100%{ transform:scaleY(1); }
  }
  @media (prefers-reduced-motion: reduce){
    .tribute-lite-spectrum span{ animation:none; transform:scaleY(.55); }
  }

  @media (min-width:601px) and (max-width:820px){
    .tribute-lite-spectrum{ gap:1px; }
  }

  @media (max-width:600px){
    .tribute-lite-spectrum{ height:38px; gap:2px; }
    .tribute-lite-spectrum span{ width:4px; min-width:4px; }
    .crew-tribute-lite{ margin-top:48px; padding:64px 0; }
    .tribute-lite-eyebrow{ margin-bottom:24px; }
    .tribute-lite-quote{ margin-bottom:36px; }
    .tribute-lite-mentors{ margin-bottom:36px; }
    .tribute-lite-mentor{ grid-template-columns:1fr; row-gap:8px; padding:18px 0; }
    .tribute-lite-mentor p{ text-align:left; max-width:none; }
    .tribute-lite-legacy{ font-size:clamp(28px,10vw,44px); }
  }

  /* crew roster — editorial archive: 3-column Swiss-inspired timeline */
  .roster-timeline-label{ display:block; margin-top:64px; margin-bottom:14px; }
  .roster-editorial-wrap{
    margin-top:0;
    opacity:0; transition:opacity .6s ease;
  }
  .reveal-panel.open .roster-editorial-wrap{ opacity:1; }
  .roster-editorial{ width:100%; }
  .roster-timeline{ position:relative; }
  .roster-timeline::before{
    content:''; position:absolute; top:18px; bottom:18px;
    left:103px; margin-left:-.5px; width:1px; background:var(--line-strong);
  }
  .roster-row{
    display:grid; grid-template-columns:63px 24px 1fr;
    column-gap:28px; align-items:center; margin-top:8px;
  }
  .roster-row.member-first{ margin-top:24px; }
  .roster-row.roster-year-row{ margin-top:24px; }
  .roster-row.roster-year-row.gen-start{ margin-top:52px; }
  .roster-timeline > .roster-row:first-child{ margin-top:0 !important; }
  .roster-year{
    justify-self:start; text-align:left;
    font-family:var(--sans); font-weight:700; font-size:clamp(28px,2.6vw,36px); color:var(--ink);
    letter-spacing:-.01em; line-height:1; font-variant-numeric:tabular-nums;
  }
  .roster-dot{
    justify-self:center; width:16px; height:2px; background:var(--ink);
    position:relative; z-index:1;
  }
  .roster-gen-label{
    justify-self:start;
    font-family:var(--sans); font-weight:700; font-size:clamp(28px,2.6vw,36px); color:var(--ink);
    letter-spacing:-.01em; line-height:1;
  }
  .roster-status-dot{
    justify-self:center; width:9px; height:1px; background:var(--ink);
    position:relative; z-index:1;
    transition:opacity .2s ease;
  }
  .roster-status-dot.is-offline{ opacity:.5; }
  .roster-member{
    justify-self:start;
    transition:opacity .2s ease;
  }
  .roster-member.is-offline{ opacity:.5; }
  .roster-name{
    font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase;
    color:var(--ink);
  }

  /* all members shown by default (Aliens); toggling to Active hides the offline ones */
  .roster-timeline.filter-active .roster-row.member-offline{ display:none; }
  .roster-timeline.filter-active .roster-row.year-all-offline{ display:none; }

  /* status toggle — a single slide switch, bottom-right; scrolls away with the content (not fixed) */
  .roster-legend{
    position:sticky; bottom:24px; z-index:2;
    display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:56px;
  }
  .roster-legend-label{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
    transition:color .2s ease;
  }
  .roster-legend-label.is-current{ color:var(--ink); }
  .roster-toggle{
    position:relative; width:44px; height:24px; border-radius:14px;
    background:var(--line-strong); border:none; cursor:pointer; padding:0; flex:0 0 auto;
    transition:background .25s ease;
  }
  .roster-toggle.is-on{ background:var(--signal); }
  .roster-toggle-thumb{
    position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--signal);
    transition:transform .25s cubic-bezier(.65,0,.35,1), background .25s ease;
  }
  .roster-toggle.is-on .roster-toggle-thumb{ background:var(--void); transform:translateX(20px); }

  @media (prefers-reduced-motion: reduce){ .roster-editorial-wrap{ transition:none; } }
  @media (max-width:600px){
    .roster-editorial-wrap{ padding:0; }
    .roster-editorial{ padding:0; }
    .roster-row{ grid-template-columns:55px 24px 1fr; column-gap:16px; }
    .roster-timeline::before{ left:83px; margin-left:-.5px; }
    .roster-year{ font-size:clamp(20px,6.4vw,26px); }
    .roster-gen-label{ font-size:clamp(20px,6.4vw,26px); }
    .roster-legend{ margin-top:44px; }
    .roster-legend::before{
      content:''; position:absolute; top:-56px; bottom:-24px; left:50%; width:100vw; margin-left:-50vw;
      z-index:-1; pointer-events:none;
      -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
      -webkit-mask-image:linear-gradient(0deg, #000 0%, #000 55%, transparent 100%);
      mask-image:linear-gradient(0deg, #000 0%, #000 55%, transparent 100%);
    }
  }

  /* news — transmission feed (ice theme: archive grid + single article) */
  #panel-news .panel-simple.news-simple{ max-width:1020px; }
  #panel-live .panel-simple.live-simple{ max-width:1020px; }
  #panel-news .eyebrow{ color:var(--accent-ice); }
  #panel-news p{ color:#20282a; }
  #panel-news p strong{ color:#0d1416; }

  .news-archive.hidden{ display:none; }
  .news-single{ display:none; margin-top:12px; }
  .news-single.open{ display:block; }

  /* archive — list rows (structured like the accordion, not an accordion) */
  .news-row-list{ margin-top:44px; }
  .news-row{
    position:relative; width:100%; display:grid; grid-template-columns:1fr 26px; align-items:center; column-gap:16px;
    background:none; border:none; border-top:1px solid rgba(13,20,22,.14); cursor:pointer; text-align:left;
    padding:28px 18px; overflow:hidden; -webkit-appearance:none; appearance:none; font:inherit;
    transition:box-shadow .3s ease;
  }
  .news-row:first-child{ border-top:none; }
  .news-row:hover{ box-shadow:inset 3px 0 0 var(--accent-ice); }
  .news-row-head{ position:relative; z-index:1; grid-column:1; display:flex; flex-direction:column; gap:7px; }
  .news-row-kicker{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ice);
  }
  .news-row-title{
    font-family:var(--sans); font-weight:700; font-size:clamp(18px,2.6vw,23px); line-height:1.28;
    color:#0d1416; letter-spacing:-.005em; transition:color .2s ease;
  }
  .news-num{ color:var(--accent-ice); margin-right:4px; }
  .news-row:hover .news-row-title{ color:var(--accent-ice); }
  .news-row-arrow{
    position:relative; z-index:1; grid-column:2; justify-self:end;
    font-family:var(--mono); font-size:18px; color:#0d1416; transition:transform .25s ease, color .2s ease;
  }
  .news-row:hover .news-row-arrow{ transform:translateX(4px); color:var(--accent-ice); }

  /* hover preview — follows the cursor, does not become the row background */
  .news-hover-preview{
    position:fixed; top:0; left:0; z-index:400; height:150px; max-width:300px;
    pointer-events:none; opacity:0; overflow:hidden; display:inline-block;
    border:1px solid rgba(13,20,22,.18); box-shadow:0 24px 44px -18px rgba(13,20,22,.4);
    transition:opacity .18s ease; will-change:transform;
  }
  .news-hover-preview.show{ opacity:1; }
  .news-hover-preview img{ display:block; width:auto; height:100%; max-width:300px; }
  @media (hover:none), (max-width:820px){ .news-hover-preview{ display:none; } }

  /* pagination */
  .news-pagination{
    display:flex; align-items:center; justify-content:center; gap:10px; margin-top:40px;
    font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  }
  .news-pagination.hidden{ display:none; }
  .news-pagination button{
    background:none; border:1px solid rgba(13,20,22,.18); color:#0d1416; cursor:pointer;
    width:30px; height:30px; transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .news-pagination button:hover{ border-color:var(--accent-ice); color:var(--accent-ice); }
  .news-pagination button.active{ background:#0d1416; border-color:#0d1416; color:#e3e3e3; }
  .news-pagination button.arrow{ border-color:transparent; }
  .news-pagination button:disabled{ opacity:.3; cursor:default; }

  /* single article view */
  .news-article-kicker{
    display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent-ice); margin-bottom:8px;
  }
  .news-article-date{ font-family:var(--mono); font-size:11px; color:#4d5a5d; margin-bottom:14px; }
  .news-article-date.news-links-label{ color:#999; }
  .news-article-title{
    font-family:var(--sans); font-weight:700; font-size:clamp(22px,3.4vw,32px); line-height:1.2;
    color:#0d1416; letter-spacing:-.005em; margin:0 0 22px; text-wrap:balance;
  }
  .news-frame{
    display:block; width:fit-content; max-width:100%; margin:0 auto 28px;
    overflow:hidden; border:1px solid rgba(13,20,22,.14); background:#fff;
  }
  .news-frame img{ display:block; width:auto; height:auto; max-width:100%; max-height:460px; }

  .news-subhead{
    font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent-ice); font-weight:700; margin:30px 0 10px;
  }
  .news-subhead:first-child{ margin-top:0; }

  .news-tracklist{
    list-style:none; margin:20px 0 24px; padding:0; font-family:var(--mono); font-size:13px;
    color:#20282a; counter-reset:track;
  }
  .news-tracklist li{ display:flex; gap:14px; padding:9px 0; border-bottom:1px solid rgba(13,20,22,.14); }
  .news-tracklist li::before{
    counter-increment:track; content:counter(track, decimal-leading-zero);
    color:var(--accent-ice); font-variant-numeric:tabular-nums;
  }
  .news-bullets{
    list-style:none; margin:16px 0 22px; padding:0; font-family:var(--mono); font-size:13px; color:#20282a;
  }
  .news-bullets li{ display:flex; gap:12px; padding:8px 0; border-bottom:1px solid rgba(13,20,22,.14); }
  .news-bullets li::before{ content:'—'; color:var(--accent-ice); flex:0 0 auto; }
  .news-bullets strong{ color:#0d1416; }

  #panel-news p a{
    color:#0d1416; font-weight:700; text-decoration:underline; text-decoration-color:var(--accent-ice);
    text-underline-offset:3px; transition:color .2s ease;
  }
  #panel-news p a:hover{ color:var(--accent-ice); }

  .news-links{ margin-top:22px; }
  .news-links a{
    font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    color:#0d1416; text-decoration:none; border-bottom:1px solid rgba(13,20,22,.3); padding-bottom:3px;
    transition:color .2s ease, border-color .2s ease;
  }
  .news-links a:hover{ color:var(--accent-ice); border-color:var(--accent-ice); }
  .news-links-label{
    font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    color:#4d5a5d;
  }

  .news-single-nav{
    display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:44px; padding-top:26px;
    border-top:1px solid rgba(13,20,22,.14);
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#4d5a5d;
  }
  .news-single-nav button{
    background:none; border:none; color:#0d1416; cursor:pointer;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  }
  .news-single-nav button:hover{ color:var(--accent-ice); }
  .news-single-nav .news-nav-archive{
    border:1px solid rgba(13,20,22,.3); padding:9px 20px; transition:border-color .2s ease, color .2s ease;
  }
  .news-single-nav .news-nav-archive:hover{ border-color:var(--accent-ice); color:var(--accent-ice); }

  @media (max-width:600px){
    .news-row{ padding:22px 4px; }
    .news-frame img{ max-height:64vw; }
    .news-single-nav{ gap:8px; }
    .news-single-nav .news-nav-archive{ padding:9px 14px; }
  }

  /* booking — ice theme */
  #panel-booking .panel-simple.booking-simple{ max-width:1020px; }
  #panel-booking .eyebrow{ color:var(--accent-ice); }
  #panel-booking p{ color:#20282a; }
  #panel-booking a{
    color:#0d1416; font-weight:700; text-decoration:underline; text-decoration-color:var(--accent-ice);
    text-underline-offset:3px; transition:color .2s ease;
  }
  #panel-booking a:hover{ color:var(--accent-ice); }

  .booking-lineup{ margin:20px 0 30px; padding-bottom:22px; border-bottom:1px solid rgba(13,20,22,.14); }
  .booking-lineup-label{
    display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent-ice); margin-bottom:9px;
  }
  .booking-lineup-names{
    display:block; font-family:var(--sans); font-weight:700; font-size:clamp(17px,2.4vw,20px); color:#0d1416;
  }

  .booking-subhead{
    font-family:var(--sans); font-weight:700; font-size:clamp(18px,2.6vw,22px); color:#0d1416;
    margin:44px 0 14px; letter-spacing:-.005em;
  }

  .booking-list{
    list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:13px; color:#20282a;
  }
  .booking-list li{
    display:flex; gap:12px; padding:9px 0; border-bottom:1px solid rgba(13,20,22,.14);
  }
  .booking-list li::before{ content:'—'; color:var(--accent-ice); flex:0 0 auto; }

  .booking-toggle.archive-toggle{
    padding:20px 4px; margin-top:2px; border-bottom:1px solid rgba(13,20,22,.14);
  }
  .booking-toggle .archive-title{ font-size:15.5px; font-weight:700; }
  .booking-specs{
    list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:#20282a;
    text-align:left;
  }
  .booking-specs li{ padding:8px 0; border-bottom:1px solid rgba(13,20,22,.1); }
  .booking-specs li:last-child{ border-bottom:none; }

  /* discografia — ice lab scene */
  .reveal-panel.ice{ background:#e3e3e3; color:#0d1416; }
  .disco-inner{ max-width:1020px; margin:0 auto; padding:120px 28px 100px; }
  .disco-inner .eyebrow{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ice);
  }
  .disco-inner h2{
    font-size:clamp(32px,5.4vw,54px); font-weight:700; margin:14px 0 10px; letter-spacing:-.01em;
  }

  .disco-player{ margin-top:50px; }

  .disco-viewport{
    width:100vw; position:relative; left:50%; margin-left:-50vw;
    overflow:hidden; touch-action:pan-y; overscroll-behavior-x:none; cursor:grab;
  }
  .disco-viewport.dragging{ cursor:grabbing; }
  .disco-strip{ display:flex; align-items:center; gap:40px; padding-top:52px; transition:transform .45s cubic-bezier(.65,0,.35,1); }
  .disco-item{
    flex:0 0 auto; opacity:.28; transform:scale(.82);
    transition:opacity .45s ease, transform .45s ease; cursor:pointer;
  }
  .disco-item.active{ opacity:1; transform:scale(1); cursor:default; position:relative; z-index:5; }
  .disco-item.active .frame.has-back{ cursor:pointer; }
  .disco-item .frame{ position:relative; display:inline-block; height:min(30vw, 340px); perspective:1600px; -webkit-perspective:1600px; }
  .disco-item .flip{
    position:relative; display:inline-block; height:100%;
    transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
    transition:transform .7s cubic-bezier(.4,.05,.2,1); -webkit-transition:-webkit-transform .7s cubic-bezier(.4,.05,.2,1);
  }
  .disco-item .frame.flipped .flip{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }
  .disco-item .face{ height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
  .disco-item .face-front{ position:relative; z-index:2; }
  .disco-item .face-back{
    position:absolute; inset:0; top:0; left:0;
    transform:rotateY(180deg); -webkit-transform:rotateY(180deg);
    display:flex; align-items:center; justify-content:center;
  }
  .disco-item .face img{
    height:100%; width:auto; display:block; pointer-events:none;
    box-shadow:0 26px 46px -20px rgba(13,20,22,.45);
  }
  .disco-item .face-back img{ box-shadow:none; }
  @media (prefers-reduced-motion: reduce){
    .disco-item .flip{ transition:none; }
  }
  .disco-item .tag{
    position:absolute; left:0; bottom:100%; margin-bottom:8px; z-index:1;
    background:#0d1416; color:#f4f8fa;
    font-family:var(--mono); font-size:16px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
    padding:7px 12px; opacity:0; transform:translateY(30px);
    transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
  }
  .disco-item.active .tag{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){ .disco-item .tag{ transition:opacity .3s ease; } }

  .disco-meta{ text-align:center; margin-top:30px; }
  .disco-meta h3{
    font-family:var(--sans); font-weight:700; font-size:19px;
    margin:0 0 6px; letter-spacing:-.005em;
  }
  .disco-meta .tagline{
    font-family:var(--sans); font-weight:400; font-size:clamp(13.5px, 3.6vw, 15px);
    line-height:1.5; color:#0d1416;
    margin-bottom:16px;
  }
  .disco-listen{
    font-family:var(--mono); font-size:14px; letter-spacing:.03em; text-transform:uppercase; color:#4d5a5d;
  }
  .disco-listen a{ color:#0d1416; text-decoration:none; padding:4px 0; }
  .disco-listen a:hover{ color:var(--accent-ice); }

  .disco-nav-row{
    display:flex; align-items:center; justify-content:center; gap:22px; margin-top:26px;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#4d5a5d;
  }
  .disco-nav-row button{ background:none; border:none; color:#0d1416; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
  .disco-nav-row button:hover{ color:var(--accent-ice); }

  @media (max-width:820px){
    .disco-item .frame{ height:56vw; }
    .disco-strip{ gap:20px; }
  }

  /* ── Lightbox ─────────────────────────────────────────────── */
  .lightbox{
    position:fixed; inset:0; z-index:500; display:none;
    align-items:center; justify-content:center;
  }
  .lightbox.open{ display:flex; }
  .lightbox-backdrop{
    position:absolute; inset:0; background:rgba(6,6,5,.94);
    opacity:0; transition:opacity .25s ease;
  }
  .lightbox.open .lightbox-backdrop{ opacity:1; }
  .lightbox-stage{
    position:relative; width:100%; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
    overflow:hidden; touch-action:none;
  }
  .lightbox-img{
    max-width:88vw; max-height:68vh; object-fit:contain; flex-shrink:1; min-height:0;
    user-select:none; -webkit-user-drag:none;
    opacity:0; transform:scale(.96); transition:opacity .25s ease, transform .25s ease;
    will-change:transform;
  }
  .lightbox.open .lightbox-img{ opacity:1; transform:scale(1); }
  .lightbox-img.dragging{ transition:none; }
  .lightbox-caption{
    text-align:center; flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding:0 24px;
    opacity:0; transition:opacity .3s ease .1s;
  }
  .lightbox.open .lightbox-caption{ opacity:1; }
  .lightbox-caption-text{
    font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.06em; color:var(--ink);
    pointer-events:none;
  }
  .lightbox-nav-row{
    display:flex; align-items:center; justify-content:center; gap:22px;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  }
  .lightbox-nav-row button{
    background:none; border:none; color:var(--ink); cursor:pointer; padding:4px;
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    transition:color .2s ease;
  }
  .lightbox-nav-row button:hover{ color:var(--signal); }
  .lightbox-close{
    position:absolute; top:22px; right:24px; z-index:2;
    background:none; border:none; color:var(--ink); font-size:22px; line-height:1; cursor:pointer;
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    transition:color .2s ease, transform .2s ease;
  }
  .lightbox-close:hover{ color:var(--signal); transform:scale(1.08); }
  @media (max-width:700px){
    .lightbox-close{ top:16px; right:16px; }
    .lightbox-img{ max-width:94vw; max-height:62vh; }
  }
  @media (prefers-reduced-motion: reduce){
    .lightbox-backdrop, .lightbox-img, .lightbox-caption{ transition:none; }
  }

  /* video lightbox — same shell as the photo lightbox, YouTube iframe inside */
  .lightbox-video-frame{
    width:min(88vw, calc(68vh * 16 / 9)); max-width:1100px; aspect-ratio:16/9;
    background:#000; flex-shrink:1; min-height:0;
    opacity:0; transform:scale(.96); transition:opacity .25s ease, transform .25s ease;
  }
  .lightbox.open .lightbox-video-frame{ opacity:1; transform:scale(1); }
  .lightbox-video-frame iframe{ width:100%; height:100%; border:0; display:block; }
  .lightbox-video-frame video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
  @media (max-width:700px){
    .lightbox-video-frame{ width:min(96vw, calc(58vh * 16 / 9)); }
  }
  @media (prefers-reduced-motion: reduce){
    .lightbox-video-frame{ transition:none; }
  }

  /* ---------- /countdown — E.T.A. tracking HUD ----------
     The holding page dresses the whole viewport as an instrument: screen frame
     with corner brackets and edge rulers, status bars, reticle and scanlines.
     The transmission and the E.T.A. share one panel at the centre, set in the
     terminal mono face like the site's boot sequence — no sans anywhere.
     Reveals are CSS-only, so the page composes itself with JS off; only the
     digits, the system clock and the approach bar need the script. */

  /* ── screen furniture ── */
  .cd-scanlines{
    position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.5;
    background:repeating-linear-gradient(180deg,
      rgba(232,226,211,.045) 0 1px, transparent 1px 3px);
  }
  .cd-sweep{
    position:fixed; left:0; right:0; top:0; height:200px; z-index:3; pointer-events:none;
    background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--signal) 9%, transparent), transparent);
    animation:cdSweep 7s linear infinite;
  }
  @keyframes cdSweep{ 0%{ transform:translateY(-220px); } 100%{ transform:translateY(100vh); } }

  .cd-frame{
    position:fixed; inset:18px; z-index:4; pointer-events:none;
    border:1px solid color-mix(in srgb, var(--signal) 18%, transparent);
    animation:cdIn .6s ease both;
  }
  .cd-tick{ position:absolute; width:16px; height:16px; border:0 solid var(--signal); }
  .cd-tick.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
  .cd-tick.tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
  .cd-tick.bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
  .cd-tick.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
  /* graduated rulers down both edges — the frame reads as a scale, not a border */
  .cd-ruler{
    position:absolute; top:12%; bottom:12%; width:7px;
    background:repeating-linear-gradient(180deg,
      color-mix(in srgb, var(--signal) 45%, transparent) 0 1px, transparent 1px 13px);
  }
  .cd-ruler.l{ left:0; }
  .cd-ruler.r{ right:0; }

  /* faint target reticle behind the panel */
  .cd-reticle{
    position:fixed; top:50%; left:50%; z-index:1; pointer-events:none;
    width:min(78vmin, 660px); aspect-ratio:1;
    transform:translate(-50%,-50%); opacity:.5;
  }
  .cd-ring{
    position:absolute; inset:22%; border-radius:50%;
    border:1px solid color-mix(in srgb, var(--signal) 16%, transparent);
  }
  .cd-ring.outer{
    inset:0; border-style:dashed;
    border-color:color-mix(in srgb, var(--signal) 10%, transparent);
    animation:cdSpin 90s linear infinite;
  }
  @keyframes cdSpin{ to{ transform:rotate(360deg); } }
  .cd-cross{ position:absolute; background:color-mix(in srgb, var(--signal) 14%, transparent); }
  .cd-cross.h{ left:8%; right:8%; top:50%; height:1px; }
  .cd-cross.v{ top:8%; bottom:8%; left:50%; width:1px; }

  /* ── page shell ── */
  .cd-page{
    position:relative; z-index:5;
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column;
    padding:52px;  /* equal on all sides, and clears the frame's corner brackets */
  }
  .cd-center{
    flex:1; display:flex; align-items:center; justify-content:center;
    width:100%; padding:28px 0;
  }

  /* bottom-left signature — the site's own alien (the favicon mark), painted
     through an alpha mask so it takes --accent instead of a baked-in orange.
     The URL is relative to this stylesheet, so it survives any base path. */
  .cd-foot{ display:flex; align-items:flex-end; animation:cdIn .6s ease .35s both; }
  .cd-alien{
    display:block; width:34px; height:34px;
    background:var(--signal);
    -webkit-mask:url(../../images/alien-mark.png) center/contain no-repeat;
    mask:url(../../images/alien-mark.png) center/contain no-repeat;
  }

  /* ── status bars ── */
  .cd-bar{
    display:flex; align-items:center; gap:clamp(14px, 3vw, 40px);
    font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--dim);
    animation:cdIn .6s ease .1s both;
  }
  .cd-bar-top{ justify-content:space-between; align-items:flex-start; }
  .cd-bar-item{ display:flex; align-items:center; gap:8px; white-space:nowrap; line-height:1; }
  .cd-bar-item .v{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  /* direct child only — the readout's own items must stay dim */
  .cd-bar-top > .cd-bar-item:first-child{ color:var(--signal); }
  /* clock with the coordinates stacked under it, top right */
  .cd-readout{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

  .cd-dot{
    width:6px; height:6px; border-radius:50%; background:var(--signal); flex-shrink:0;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);
    animation:pulse 2.4s ease-in-out infinite;
  }
  /* only the incoming-transmission beacon blinks, hard, like a radar contact */
  .cd-dot-blink{ animation:cdBlink 1.1s steps(1) infinite; }
  @keyframes cdBlink{ 0%,54%{ opacity:1; } 55%,100%{ opacity:.12; } }

  /* ── the instrument panel ── */
  .cd-hud{
    position:relative;
    width:min(100%, 620px);  /* holds the transmission line on one row at desktop */
    padding:16px clamp(16px, 2.6vw, 30px) 15px;
    background:color-mix(in srgb, var(--void) 76%, transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid color-mix(in srgb, var(--signal) 38%, transparent);
    text-align:left;
    animation:cdIn .7s ease .25s both;
  }
  .cd-hud-tick{ position:absolute; width:9px; height:9px; border:0 solid var(--signal); }
  .cd-hud-tick.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
  .cd-hud-tick.tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
  .cd-hud-tick.bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
  .cd-hud-tick.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

  .cd-hud-head, .cd-eta-head{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  }
  .cd-hud-head{
    padding-bottom:11px; margin-bottom:16px;
    border-bottom:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
  }
  .cd-hud-label{ display:flex; align-items:center; gap:8px; color:var(--signal); }
  .cd-hud-status{ color:var(--dim); }

  /* ── the transmission line — terminal, never sans ── */
  .cd-line{
    margin:0; max-width:none; min-height:1.55em;
    font-family:var(--mono); font-weight:700;
    font-size:clamp(12px, 1.5vw, 19px); line-height:1.55;
    letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
  }
  .cd-prompt{ color:var(--signal); margin-right:.6em; }
  /* the three dots type themselves in, then the whole cycle restarts */
  .cd-ellipsis i{ font-style:normal; opacity:0; animation-duration:3s; animation-timing-function:steps(1); animation-iteration-count:infinite; }
  .cd-ellipsis i:nth-child(1){ animation-name:cdDot1; }
  .cd-ellipsis i:nth-child(2){ animation-name:cdDot2; }
  .cd-ellipsis i:nth-child(3){ animation-name:cdDot3; }
  @keyframes cdDot1{ 0%,10%{ opacity:0; } 11%,100%{ opacity:1; } }
  @keyframes cdDot2{ 0%,22%{ opacity:0; } 23%,100%{ opacity:1; } }
  @keyframes cdDot3{ 0%,34%{ opacity:0; } 35%,100%{ opacity:1; } }
  /* countdown.js sets this while the line types itself in */
  body.cd-typing .cd-ellipsis{ visibility:hidden; }

  /* ── E.T.A. block, under the line inside the same panel ── */
  .cd-eta{
    margin-top:14px; padding-top:13px;
    border-top:1px solid color-mix(in srgb, var(--signal) 22%, transparent);
  }
  .cd-eta-head{ margin-bottom:10px; }

  /* each pair boxed in its own cell — readout, not running text */
  .cd-clock{
    display:flex; align-items:stretch; gap:clamp(4px, 1vw, 9px);
    font-family:var(--mono); color:var(--ink);
    font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
  }
  /* bare readout, no boxes — an instrument prints its digits, it doesn't frame
     each one. The four units still span exactly the panel's width. */
  .cd-cell{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    flex:1 1 0; min-width:0; padding:2px 0;
  }
  .cd-cell b{ font-size:clamp(16px, 1.6vw, 21px); line-height:1; font-weight:700; letter-spacing:.02em; }
  .cd-cell-label{ font-size:7px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
  .cd-sep{
    align-self:center;
    font-size:clamp(10px, 1.05vw, 13px); line-height:1; color:var(--signal);
    animation:cdSepBlink 1.1s steps(1) infinite;
  }
  @keyframes cdSepBlink{ 0%,54%{ opacity:.85; } 55%,100%{ opacity:.28; } }

  .cd-approach{
    display:flex; align-items:center; gap:11px; margin-top:11px;
    font-family:var(--mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase;
  }
  .cd-approach .l{ color:var(--dim); }
  .cd-approach .v{ color:var(--signal); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
  .cd-approach-track{
    flex:1; min-width:60px; height:5px;
    background:color-mix(in srgb, var(--ink) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--signal) 20%, transparent);
  }
  .cd-approach-fill{
    display:block; height:100%; width:0;
    background:repeating-linear-gradient(90deg, var(--signal) 0 3px, transparent 3px 5px);
  }

  @keyframes cdIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

  @media (max-width:820px){
    .cd-page{ padding:40px; }
    .cd-frame{ inset:14px; }
  }
  @media (max-width:600px){
    .cd-page{ padding:30px; }
    .cd-frame{ inset:10px; }
    .cd-tick{ width:11px; height:11px; }
    .cd-reticle, .cd-ruler{ display:none; }
    .cd-bar{ font-size:8.5px; letter-spacing:.12em; gap:12px; }
    .cd-readout{ gap:5px; }
    .cd-alien{ width:28px; height:28px; }
    /* the panel floats inside the frame here — it no longer fills it */
    .cd-hud{ width:min(100%, 300px); padding:12px 11px 11px; }
    .cd-hud-head{ padding-bottom:9px; margin-bottom:12px; }
    .cd-hud-head, .cd-eta-head{ font-size:8px; letter-spacing:.1em; gap:10px; }
    .cd-hud-status{ display:none; }
    .cd-line{ font-size:clamp(10.5px, 3.2vw, 14px); line-height:1.6; letter-spacing:.02em; }
    .cd-eta{ margin-top:12px; padding-top:11px; }
    .cd-eta-head{ margin-bottom:9px; }
    /* vw-driven so the four cells never overflow, down to a 320px screen */
    .cd-clock{ gap:3px; }
    .cd-cell{ padding:0; gap:4px; }
    .cd-cell b{ font-size:min(4.6vw, 19px); }
    .cd-cell-label{ font-size:6.5px; letter-spacing:.08em; }
    .cd-sep{ font-size:min(2.3vw, 10px); }
    .cd-approach{ gap:9px; margin-top:10px; font-size:7.5px; }
  }

  @media (prefers-reduced-motion: reduce){
    .cd-frame, .cd-bar, .cd-hud, .cd-foot{ animation:none; }
    .cd-dot, .cd-dot-blink, .cd-sep, .cd-ring.outer{ animation:none; }
    .cd-ellipsis i{ animation:none; opacity:1; }
    .cd-sweep{ display:none; }
    /* .bg-video is hidden under reduced motion — keep the page from going flat black */
    .cd-page{ background:radial-gradient(120% 90% at 50% 40%, rgba(255,106,43,.07), transparent 62%); }
  }