/* THE TRICK — landing. Everything here was shot on film.
   Motion grammar: stepped, never smooth. No ease-in-out anywhere.

   Cascade plan:
   1. Defaults describe the COMPOSED REST STATE (also serves no-JS).
   2. `.boot` hides the composed page; `.boot.ph-*` rules, in
      chronological order, perform the opening. JS adds ph-classes
      cumulatively, then strips boot/ph-* and adds `.landed`.
   3. `.reduced` freezes everything. */

@font-face {
  font-family: 'Anton';
  src: url('../assets/fonts/anton-latin-400-normal.woff2') format('woff2');
  font-display: block;
}
@font-face {
  font-family: 'Special Elite';
  src: url('../assets/fonts/special-elite-latin-400-normal.woff2') format('woff2');
  font-display: block;
}

:root {
  --black: #0a0a09;
  --silver: #e6ebe2;        /* projected light, slightly green — the film's cast */
  --silver-dim: #aeb5a9;
  --paper: #e7e3d7;
  --toner: #131309;
  --red: #e0221b;           /* reserved: broadcast surfaces only (TRANSMISSION reel) */
  --wood: 'Anton', 'Arial Narrow', sans-serif;
  --mono: 'Special Elite', 'Courier New', monospace;
  --strike-a: 950ms;        /* carbon-arc strike length, line A (JS overrides per variant) */
  --strike-b: 460ms;        /* line B arrives harder, faster */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: var(--black); height: 100%; overflow: hidden; }

#stage { position: fixed; inset: 0; background: var(--black); overflow: hidden; }

/* ================= 1. THE COMPOSED PAGE (rest state / no-JS) ================= */

/* ---- strata: the archive behind the words (built by JS) ---- */

#strata { position: absolute; inset: 0; z-index: 1; }

.stratum {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--w);
  z-index: var(--z, 1);
  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot));
  opacity: var(--op);
}
.stratum .drift {
  animation: drift var(--drift-dur, 160s) linear infinite alternate;
}
.stratum img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--flt, none);
  mix-blend-mode: var(--blend, normal);
}

/* photographs dissolve into the dark — no frame edge ever survives */
.stratum.masked img {
  -webkit-mask-image: radial-gradient(ellipse 88% 84% at 50% 50%, #000 52%, transparent 97%);
  mask-image: radial-gradient(ellipse 88% 84% at 50% 50%, #000 52%, transparent 97%);
}

/* the faintest layers hang still */
.stratum.static .drift { animation: none !important; }

@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(9px, -5px); }
}

/* frame-slip: the film jumps the gate for a few frames (JS triggers) */
.stratum img.slip { animation: slip 160ms steps(1, end) 1; }
@keyframes slip {
  0%   { transform: translateY(0)    skewX(0); }
  28%  { transform: translateY(-44%) skewX(-2deg); }
  55%  { transform: translateY(9%)   skewX(1deg); }
  78%  { transform: translateY(-3%)  skewX(0); }
  100% { transform: translateY(0); }
}

/* ---- projector light falloff (the throw is brightest mid-screen) ---- */

#falloff {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 74% at 50% 44%,
      transparent 0 54%, rgba(5, 5, 4, .26) 82%, rgba(5, 5, 4, .48) 100%);
}

/* ---- grain: real silver from the falling-man sky, multiplied, stepped shimmer ---- */

#grain {
  position: absolute; inset: -64px; z-index: 6;
  pointer-events: none;
  background: url('../assets/grain-tile.webp') repeat;
  background-size: 384px;
  mix-blend-mode: multiply;
  opacity: .58;
  animation: grain-shimmer 1.1s steps(1, end) infinite;
}
@keyframes grain-shimmer {
  0%   { background-position: 0 0; }
  11%  { background-position: -117px 43px; }
  23%  { background-position: 64px -219px; }
  34%  { background-position: -201px -88px; }
  46%  { background-position: 33px 151px; }
  58%  { background-position: -156px 7px; }
  70%  { background-position: 91px -64px; }
  82%  { background-position: -45px 233px; }
  100% { background-position: 0 0; }
}

/* ---- the words: projected light ---- */

#titleblock {
  position: absolute; inset: 0; z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 4vw;
}

/* the three statements occupy the same throw of light */
.projline, #title { grid-area: 1 / 1; align-self: center; }

.projline {
  font-family: var(--wood);
  font-size: clamp(1.35rem, 4.4vw, 3.1rem);
  letter-spacing: .06em;
  color: var(--silver);
  mix-blend-mode: screen;
  text-shadow:
    0 0 1px rgba(230, 235, 226, .95),
    0 0 16px rgba(212, 222, 206, .42),
    0 0 46px rgba(198, 212, 194, .20);
  opacity: 0;          /* only ever lit during the sequence */
}

#title {
  font-family: var(--wood);
  font-weight: 400;
  font-size: clamp(4.2rem, 16.5vw, 14.5rem);
  line-height: .84;
  letter-spacing: .005em;
  color: var(--silver);
  mix-blend-mode: screen;
  position: relative;
  text-shadow:
    0 0 1px rgba(230, 235, 226, .95),
    0 0 22px rgba(212, 222, 206, .34),
    0 0 70px rgba(198, 212, 194, .16);
  opacity: .94;
  animation: proj-breathe 9.4s steps(1, end) infinite;
}
/* rare 1-frame dips: the lamp is old */
@keyframes proj-breathe {
  0%    { opacity: .94; }
  96.9% { opacity: .94; }
  97.2% { opacity: .8; }
  97.5% { opacity: .94; }
  98.8% { opacity: .89; }
  99.1% { opacity: .94; }
  100%  { opacity: .94; }
}

/* the falling man: a shadow standing in the projector beam, behind the title.
   Invisible on black — he exists only where the archive is lit. */
#shadowman {
  position: absolute;
  top: 50%; left: 50%;
  height: 56vh;
  width: auto;
  transform: translate(calc(-50% + 10vw), calc(-50% + 5vh)) rotate(7deg);
  z-index: 3;
  filter: blur(.8px);
  opacity: .65;
  mix-blend-mode: multiply;
  pointer-events: none;
}

#byline {
  grid-area: 2 / 1;
  font-family: var(--mono);
  font-size: clamp(.58rem, 1.5vw, .82rem);
  letter-spacing: .38em;
  text-indent: .38em;   /* balance the tracking */
  color: #e0e5db;
  margin-top: 3.2vh;
  /* typed strip logic: dark press-through under the letterforms keeps it
     legible when a bright stratum passes behind */
  text-shadow:
    1px 1px 0 rgba(5, 5, 4, .9),
    -1px 0 0 rgba(5, 5, 4, .5),
    0 0 12px rgba(208, 218, 202, .28);
  opacity: .92;
}

/* whisper-level jitter — the gate is never quite steady */
.jitter { display: inline-block; animation: jitter .46s steps(1, end) infinite; }
@keyframes jitter {
  0%   { transform: translate(0, 0); }
  26%  { transform: translate(.7px, -.5px); }
  51%  { transform: translate(-.6px, .4px); }
  77%  { transform: translate(.4px, .6px); }
  100% { transform: translate(0, 0); }
}

/* ---- typed caption strips: the archive's one plain-spoken surface ---- */

.strip {
  font-family: var(--mono);
  font-size: clamp(.6rem, 1.7vw, .78rem);
  letter-spacing: .22em;
  color: var(--toner);
  background: var(--paper);
  padding: .52em 1.1em .44em;
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .85);  /* paper casts hard offset shadows */
}

/* ---- the rack: four strips, labels on the archive's drawers ---- */

#rack {
  position: absolute;
  bottom: clamp(14px, 3.2vh, 32px);
  left: 0; right: 0;
  z-index: 7;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(.5rem, 1.6vw, 1.4rem);
  flex-wrap: wrap;
  padding: 0 2vw;
}
.rack-strip {
  /* G2: dim, toner-worn — sharpens when the projector notices you reading */
  opacity: .78;
  filter: contrast(.82) brightness(.92);
}
.rack-strip:nth-child(1) { transform: rotate(-.7deg); }
.rack-strip:nth-child(2) { transform: rotate(.4deg) translateY(1px); }
.rack-strip:nth-child(3) { transform: rotate(-.3deg); }
.rack-strip:nth-child(4) { transform: rotate(.8deg) translateY(-1px); }
.rack-strip:hover, .rack-strip:focus-visible {
  opacity: 1;
  filter: contrast(1) brightness(1);
}
.rack-strip:focus-visible { outline: 3px solid var(--toner); outline-offset: 2px; }
.rack-strip[aria-current='true'] {
  opacity: 1;
  filter: contrast(1) brightness(1);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .85), inset 0 -3px 0 rgba(19, 19, 9, .85);
}

/* ---- the reels ---- */

#reels { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.js .reel { display: none; }
.js .reel.active {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  padding: clamp(10px, 3vh, 30px) 3vw clamp(64px, 11vh, 110px);
  pointer-events: auto;
}
.reel-open #titleblock { opacity: 0; pointer-events: none; }

.panel {
  max-width: 780px;
  max-height: 100%;
  overflow-y: auto;      /* the film pans; the machine holds still */
  background: rgba(8, 8, 7, .84);
  padding: clamp(1.2rem, 3vw, 2.4rem);
  color: var(--silver);
}
.panel::-webkit-scrollbar { width: 6px; }
.panel::-webkit-scrollbar-thumb { background: #3a3a34; }

.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .34em;
  color: var(--silver-dim);
  margin-bottom: 1.1em;
}
.statute-line {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(.92rem, 2vw, 1.05rem);
  line-height: 1.45;
  color: #cfd5c9;
  max-width: 56ch;
  margin-bottom: 1.4em;
}
.statute-line em { font-style: italic; color: var(--silver); }

/* THE DOCUMENT */
.doc-grid { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 1.6rem; align-items: start; }
.jacket { width: 100%; height: auto; box-shadow: 4px 4px 0 rgba(0, 0, 0, .8); }
.sched-title {
  font-family: var(--wood);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing: .04em;
  color: var(--silver);
}
.sched-sub {
  font-family: 'Times New Roman', Times, serif;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--silver-dim);
  margin: .3em 0 1.2em;
}
.part {
  font-family: 'Times New Roman', Times, serif;
  font-size: .82rem;
  letter-spacing: .18em;
  color: var(--silver);
  margin: 1.1em 0 .5em;
}
.territories { display: flex; flex-wrap: wrap; gap: .35em .9em; }
.territories a {
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--silver);
  text-decoration: underline;
  text-underline-offset: .28em;
  text-decoration-thickness: 2px;
}
.territories a:hover, .territories a:focus-visible { background: rgba(231, 227, 215, .16); }
.footnote {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: .74rem;
  color: var(--silver-dim);
  margin-top: 1.6em;
}

/* THE SERIAL — the transmission ledger */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: clamp(.62rem, 1.5vw, .78rem);
  color: #cfd5c9;
  margin: .4em 0 1.4em;
}
.ledger th {
  text-align: left;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--silver-dim);
  border-bottom: 1px solid #3a3a34;
  padding: .3em .6em .4em 0;
}
.ledger td { padding: .34em .6em .3em 0; border-bottom: 1px solid rgba(58, 58, 52, .4); }
.ledger td:first-child { color: var(--silver-dim); }
.ledger td:last-child, .ledger th:last-child { text-align: right; padding-right: 0; }

.platforms { display: flex; flex-wrap: wrap; gap: .7em; margin-top: 1.2em; }
.stamp-btn {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .18em;
  padding: .5em .9em .42em;
  border: 2px solid #4a4a42;
  color: var(--silver-dim);
  transform: rotate(-.5deg);
}
.stamp-btn.pending { opacity: .6; }

/* evidence tags (RECORDING / EXHIBITS) */
.evidence-tag {
  border: 2px solid #4a4a42;
  padding: 1.1rem 1.3rem;
  margin: .4em 0 1.2em;
  max-width: 46ch;
  transform: rotate(-.4deg);
}
.tag-line { font-family: var(--mono); font-size: .8rem; letter-spacing: .22em; color: var(--silver); margin-bottom: .7em; }
.tag-detail { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; color: var(--silver-dim); line-height: 1.7; }
.pending-note { margin-top: .7em; opacity: .75; }

.close-strip { display: inline-block; margin-top: 1.6rem; transform: rotate(-.5deg); opacity: .85; }
.close-strip:hover, .close-strip:focus-visible { opacity: 1; }

/* ---- the wireless ---- */

#radio {
  position: absolute;
  right: clamp(12px, 2.4vw, 28px);
  bottom: clamp(14px, 3.2vh, 32px);
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}
#audio-toggle {
  font-family: var(--mono);
  font-size: clamp(.56rem, 1.4vw, .68rem);
  letter-spacing: .2em;
  color: var(--toner);
  background: var(--paper);
  border: none;
  padding: .5em .9em .42em;
  cursor: pointer;
  transform: rotate(.6deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .85);
  opacity: .72;
  filter: contrast(.82) brightness(.92);
}
#audio-toggle:hover, #audio-toggle:focus-visible { opacity: 1; filter: none; }
#audio-toggle:focus-visible { outline: 3px solid var(--toner); outline-offset: 2px; }

#dial { position: relative; width: clamp(220px, 26vw, 360px); }
#dial-face { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05); }
#needle {
  position: absolute;
  top: 6%;
  bottom: 20%;
  left: var(--needle-x, 33%);
  width: 2px;
  background: #d8ddd2;
  box-shadow: 0 0 6px rgba(216, 221, 210, .5);
  pointer-events: none;
}
#dial::after {   /* the glass */
  content: '';
  position: absolute; inset: 0;
  cursor: ew-resize;
}
#dial-readout {
  position: absolute;
  left: 0; right: 0;
  bottom: 3%;
  text-align: center;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .3em;
  color: var(--silver-dim);
  pointer-events: none;
}
#skip {
  position: absolute;
  right: 3%;
  bottom: 2.4%;
  z-index: 2;
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .18em;
  color: var(--toner);
  background: var(--paper);
  border: none;
  padding: .34em .6em .28em;
  cursor: pointer;
  transform: rotate(.5deg);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .85);
  opacity: .85;
}
#skip:hover, #skip:focus-visible { opacity: 1; }
#skip:focus-visible { outline: 2px solid var(--toner); outline-offset: 1px; }

/* line A/B never show outside the sequence */
html:not(.js) #line-a, html:not(.js) #line-b { display: none; }

/* ================= 2. THE OPENING (boot + phases, chronological) ================= */

/* P0 — black. Everything composed is withheld. */
.boot #title, .boot #shadowman, .boot #byline,
.boot #rack .rack-strip, .boot #radio { opacity: 0; animation: none; pointer-events: none; }
.boot .stratum { opacity: 0; }
.boot .stratum .drift { animation: none; }

/* a projector switches on: any stratum the timeline has reached */
.boot .stratum.on { opacity: var(--op); }
.boot .stratum.on .drift { animation: drift var(--drift-dur, 160s) linear infinite alternate; }
.boot .stratum.on.static .drift { animation: none; }
.boot .stratum.on img { animation: kick 380ms steps(1, end) 1; }
.boot .stratum.on.quiet img { animation: kick-quiet 420ms steps(1, end) 1; }
@keyframes kick {
  0%   { opacity: 0; }
  12%  { opacity: 1; filter: var(--flt, none) brightness(2.1); }
  22%  { opacity: 0; }
  34%  { opacity: .55; }
  52%  { opacity: .38; }
  68%  { opacity: .8; filter: var(--flt, none) brightness(1.25); }
  100% { opacity: 1; }
}
/* documents arrive gently — a flicker of type, no flash-bang */
@keyframes kick-quiet {
  0%   { opacity: 0; }
  16%  { opacity: .7; }
  30%  { opacity: .15; }
  52%  { opacity: .85; }
  70%  { opacity: .6; }
  100% { opacity: 1; }
}

/* P1 — a projector warms up: brightness arrives in uneven steps */
.boot.ph-magic #line-a {
  animation: arc-strike var(--strike-a) steps(1, end) 1 forwards;
}
@keyframes arc-strike {
  0%   { opacity: 0; }
  6%   { opacity: .26; }
  10%  { opacity: 0; }
  21%  { opacity: .58; }
  27%  { opacity: .14; }
  33%  { opacity: .68; }
  45%  { opacity: .55; }
  56%  { opacity: .82; }
  71%  { opacity: .74; }
  84%  { opacity: .9; }
  100% { opacity: .95; }
}

/* P2 — the line breaks: frame-slip, dropout */
.boot.ph-break #line-a {
  animation: line-break 170ms steps(1, end) 1 forwards;
}
@keyframes line-break {
  0%   { opacity: .95; transform: translate(0, 0); }
  22%  { opacity: .95; transform: translate(-7px, -46%) skewX(-3deg); }
  40%  { opacity: .3;  transform: translate(4px, 12%); }
  58%  { opacity: .85; transform: translate(-2px, -8%); }
  76%  { opacity: .1;  transform: translate(0, 3%); }
  100% { opacity: 0;   transform: translate(0, 0); }
}

/* …and becomes MONSTERS: two hard flashes, then held — a heavier throw */
#line-b { transform: scale(1.07); }
.boot.ph-monsters #line-b {
  animation: arc-strike-hard var(--strike-b) steps(1, end) 1 forwards;
}
@keyframes arc-strike-hard {
  0%   { opacity: 0; }
  9%   { opacity: .88; }
  18%  { opacity: 0; }
  30%  { opacity: .96; }
  42%  { opacity: .52; }
  54%  { opacity: 1; }
  100% { opacity: 1; }
}

/* P3a — one breath of black before the slam */
.boot.ph-dark #line-a, .boot.ph-dark #line-b { opacity: 0; animation: none; }

/* P3b — slam */
.boot.ph-slam #line-a, .boot.ph-slam #line-b { opacity: 0; animation: none; }
.boot.ph-slam #title { animation: slam 150ms steps(1, end) 1 forwards; }
@keyframes slam {
  0%   { opacity: 1; transform: scale(1.045); }
  46%  { opacity: 1; transform: scale(.988); }
  100% { opacity: .94; transform: scale(1); }
}
/* the shadow arrives with the slam — but only reads once the archive lights up */
.boot.ph-slam #shadowman {
  animation: shadow-on 340ms steps(1, end) 1 forwards;
  animation-delay: 260ms;
}
@keyframes shadow-on {
  0%   { opacity: 0; }
  28%  { opacity: .3; }
  52%  { opacity: .12; }
  100% { opacity: .55; }
}

/* P4 — the flood: byline arrives as the photographs assemble */
.boot.ph-strata #byline {
  animation: byline-strike 700ms steps(1, end) 1 forwards;
  animation-delay: 900ms;
}
@keyframes byline-strike {
  0%   { opacity: 0; }
  14%  { opacity: .3; }
  26%  { opacity: .08; }
  47%  { opacity: .55; }
  66%  { opacity: .42; }
  100% { opacity: .8; }
}

/* ================= 3. LANDED ================= */

/* the machine finishes booting by labelling its own drawers */
.landed #rack .rack-strip {
  animation: strip-stamp 240ms steps(1, end) 1 backwards;
}
.landed #rack .rack-strip:nth-child(1) { animation-delay: 150ms; }
.landed #rack .rack-strip:nth-child(2) { animation-delay: 290ms; }
.landed #rack .rack-strip:nth-child(3) { animation-delay: 450ms; }
.landed #rack .rack-strip:nth-child(4) { animation-delay: 580ms; }
@keyframes strip-stamp {
  0%   { opacity: 0; }
  40%  { opacity: 1; filter: contrast(1) brightness(1.06); }
  62%  { opacity: .5; }
  100% { opacity: .78; }
}
.landed #radio {
  animation: strip-stamp 200ms steps(1, end) 1 backwards;
  animation-delay: 760ms;
}

/* reel change: the film jumps the gate */
#stage.advance { animation: stage-slip 190ms steps(1, end) 1; }
@keyframes stage-slip {
  0%   { transform: translateY(0); }
  26%  { transform: translateY(-1.6%) skewX(-.4deg); }
  52%  { transform: translateY(.7%); }
  78%  { transform: translateY(-.3%); }
  100% { transform: translateY(0); }
}

/* ================= 4. REDUCED MOTION: the page reads perfectly still ================= */

.reduced *, .reduced *::before, .reduced *::after {
  animation: none !important;
  transition: none !important;
}
.reduced #rack .rack-strip, .reduced #radio { opacity: .85; }
.reduced #title { opacity: .94; }
@media (prefers-reduced-motion: reduce) {
  .jitter, #grain, .stratum .drift, .stratum img, #title {
    animation: none !important;
  }
}

/* ================= 5. SMALL SCREENS ================= */

@media (max-width: 640px) {
  #title { font-size: clamp(3.4rem, 19vw, 6rem); }
  #shadowman { height: 34vh; opacity: .5;
    transform: translate(calc(-50% + 15vw), calc(-50% + 1vh)) rotate(7deg); }
  .projline { font-size: clamp(1.15rem, 5.4vw, 2rem); }
  #byline { letter-spacing: .26em; text-indent: .26em; }
  #falloff { background: radial-gradient(ellipse 95% 74% at 50% 46%,
      transparent 0 40%, rgba(5, 5, 4, .4) 76%, rgba(5, 5, 4, .66) 100%); }

  /* the rack stacks 2x2 above the wireless strip */
  #rack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    gap: .55rem .7rem;
    bottom: clamp(52px, 8vh, 76px);
  }
  .rack-strip { font-size: .58rem; }
  #radio { left: 0; right: 0; bottom: 12px; align-items: center; }
  #dial { width: min(84vw, 340px); }
  /* the wireless takes the desk: while it is open, the rack yields */
  body:has(#dial:not([hidden])) #rack { opacity: 0; pointer-events: none; }
  .js .reel.active { padding: 12px 3vw 118px; }
  .doc-grid { grid-template-columns: 1fr; }
  .jacket { max-width: 150px; }
}

/* ---- short screens (landscape phones): the wireless moves to the top
        corner desk, dial unfolding downward — the rack keeps the bottom ---- */

@media (max-height: 520px) {
  #radio {
    top: clamp(10px, 2.4vh, 18px);
    bottom: auto;
    flex-direction: column-reverse;
  }
  #dial { width: clamp(200px, 30vw, 300px); }
  .js .reel.active { padding: 10px 3vw 62px; }
}

/* ---- no JS: the archive reads as a plain stacked record ---- */

html:not(.js) body { overflow: auto; }
html:not(.js) #stage { position: relative; min-height: 100svh; }
html:not(.js) #reels { position: static; pointer-events: auto; }
html:not(.js) .reel { display: block; position: static; padding: 4vh 4vw; }
html:not(.js) #rack { position: static; margin: 3vh 0; }
html:not(.js) #radio, html:not(.js) .close-strip { display: none; }