/* ON AIR SINCE 1939 — the tuning dial and its exhibits (js/eras.js, SEASONS.md).
   The station frame never changes; inside each stop, the picture is made the way that year made pictures. */

.shot--eras { display: block; --yr: clamp(52px, 8.4vw, 140px); --foot: calc(var(--yr) * .84 + 100px); }
.eras__stage { position: absolute; inset: 0; }
.stop { position: absolute; inset: 0; visibility: hidden; }
.stop.is-on { visibility: visible; }
.stop.is-glimpse { visibility: visible; z-index: 3;          /* the picture breaking through the blue, in slits */
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 13px, transparent 13px 31px);
          mask-image: repeating-linear-gradient(to bottom, #000 0 13px, transparent 13px 31px); }
.stop__exhibit { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(84vw, 1100px);
  top: calc(var(--gutter) * 4.4); bottom: calc(var(--foot) + 58px);
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; container-type: size; }

.eras__between { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; visibility: hidden; background: var(--signal-lit); }
.eras__between.is-on { visibility: visible; }
.eras__between p { color: rgba(255, 255, 255, .72) !important; letter-spacing: .32em; }

.eras__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 0 var(--gutter) 8px; pointer-events: none; }
.eras__line { margin: 0 0 8px; min-height: 1.2em; }
.eras__year { margin: 0 0 2px -.04em; font-size: var(--yr); line-height: .84; color: var(--glow); white-space: nowrap; }

/* The dial: true distances between years. Thin ticks, one orange needle. No knobs. */
.dial { position: relative; height: 54px; pointer-events: auto; cursor: ew-resize; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
.dial:focus-visible .dial__scale { outline: 1px solid var(--accent); outline-offset: 6px; }
.dial__scale { position: absolute; left: 0; right: 0; top: 8px; height: 20px; border-bottom: 1px solid var(--ink-faint); }
.dial__tick { position: absolute; bottom: 0; width: 1px; height: 4px; background: var(--ink-faint); }
.dial__tick.is-five { height: 7px; }
.dial__tick.is-decade { height: 11px; background: var(--ink-dim); }
.dial__span { position: absolute; bottom: -1px; height: 3px; background: var(--ink-dim); }
.dial__stop { position: absolute; bottom: 0; width: 0; }
.dial__stop::before { content: ""; position: absolute; bottom: 0; left: -.5px; width: 1px; height: 17px; background: var(--glow); opacity: .55; }
.dial__stop b { position: absolute; top: 27px; left: 0; transform: translateX(-50%); font: 400 10px/1 var(--font-mono); letter-spacing: .14em; color: var(--ink-dim); white-space: nowrap; }
.dial__stop.is-span b { transform: translateX(-4px); }
.dial__stop.is-on b { color: var(--glow); }
.dial__stop.is-on::before { opacity: 1; }
.dial__needle { position: absolute; bottom: -7px; width: 2px; height: 32px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 12px rgba(255, 90, 31, .55); pointer-events: none; }
.dial__needle::before { content: ""; position: absolute; top: -3px; left: -2.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dial.is-dragging { cursor: grabbing; }

/* Film: the station's own grain, harder; a soft vignette that breathes like a projector lamp. */
.filmfx { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.filmfx::before { content: ""; position: absolute; inset: -40%; background-image: var(--grain-img); background-size: 150px; opacity: .3; mix-blend-mode: overlay; animation: fx-grain .32s steps(3) infinite; }
.filmfx::after { content: ""; position: absolute; inset: 0; background: radial-gradient(115% 100% at 50% 42%, transparent 52%, rgba(0, 0, 0, .62) 100%); animation: fx-flicker 2.6s steps(13) infinite; }
@keyframes fx-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-6%, 4%); } 66% { transform: translate(5%, -5%); } }
@keyframes fx-flicker { 0%, 100% { opacity: 1; } 15% { opacity: .84; } 31% { opacity: .97; } 48% { opacity: .9; } 66% { opacity: 1; } 82% { opacity: .87; } }
@keyframes fx-weave { 0% { translate: 0 0; } 25% { translate: .7px -.5px; } 50% { translate: -.5px .6px; } 75% { translate: .3px .3px; } }

.ph { width: 100%; height: 100%; display: grid; place-items: center; }
.ph__frame { position: relative; width: min(100cqw, 133.3cqh); aspect-ratio: 4 / 3; border: 1px solid var(--ink-faint); display: grid; place-content: center; gap: 10px; text-align: center; overflow: hidden; }
.ph--film .ph__frame { background: #0f0f0f; border-color: #1d1d1d; }
.ph__note { color: var(--ink-faint); }
.ph__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.ph__frame.has-film > p { display: none; }
.ph__frame.has-film { border-color: #111; }

/* 1966: a close shot of a teletype, on 16 mm, black and white. Original machine; the text is live. */
.tty { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 10px; }
.tty__frame { position: relative; width: min(100cqw, calc((100cqh - 30px) * 4 / 3)); aspect-ratio: 4 / 3; overflow: hidden; background: #141414;
  filter: grayscale(1) contrast(1.14) brightness(.95); }
.tty__scene { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 18%, #3b3b3b, #111 72%);
  transform: perspective(900px) rotateX(8deg) scale(1.08); transform-origin: 50% 88%; animation: fx-weave 1.1s steps(7) infinite; }
.tty__paper { position: absolute; left: 13%; right: 13%; top: -4%; bottom: 28%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 0 1.7em 1.2em;
  background: linear-gradient(to bottom, #a9a497, #e3dece 34%, #eee9db 82%, #d6d1c2);
  color: #1d1c1a; font: 400 clamp(10px, 1.55cqw, 15px)/1.5 var(--font-mono); letter-spacing: .04em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 24px 40px rgba(0, 0, 0, .55);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%); }
.tty__line { white-space: pre; min-height: 1.5em; text-shadow: 0 0 .7px rgba(0, 0, 0, .65); }
.tty__line span { display: inline-block; }
.tty__lines .tty__line:nth-last-child(n+9) { filter: blur(.45px); }           /* shallow focus: the paper further up drifts soft */
.tty__lines .tty__line:nth-last-child(n+14) { filter: blur(1.1px); }
.tty__typebox { position: absolute; left: 0; bottom: .85em; width: 1.2em; height: 1.85em; margin-left: -.28em; border-radius: 3px;
  background: linear-gradient(90deg, #262626, #707070 42%, #1b1b1b); box-shadow: 0 3px 5px rgba(0, 0, 0, .55); }
.tty__machine { position: absolute; left: 0; right: 0; bottom: 0; height: 29%; background: linear-gradient(#2d2d2d, #0e0e0e); }
.tty__platen { position: absolute; left: 10%; right: 10%; top: -9px; height: 14px; border-radius: 7px; background: linear-gradient(#070707, #333 45%, #040404); }
.tty__lip { position: absolute; left: 5%; right: 5%; top: 9px; height: 2px; background: rgba(255, 255, 255, .13); }
.tty__frame .filmfx::before { opacity: .2; }
.tty__input { position: absolute; inset: 0; z-index: 6; opacity: 0; border: 0; font-size: 16px; cursor: text; }
.tty__label { margin: 0; }
.tty:focus-within .tty__label { color: var(--glow); }

/* 2026: no grain, no lamp (see css/now2026.css for the costume itself). */
.is-clean .grain, .is-clean .vignette { opacity: 0 !important; }

@media (max-width: 719px) {
  .shot--eras { --yr: clamp(44px, 13vw, 72px); --foot: calc(var(--yr) * .84 + 96px); }
  .stop__exhibit { width: calc(100vw - var(--gutter) * 2); top: calc(var(--gutter) * 5.4); bottom: calc(var(--foot) + 70px); }
  .dial__stop b { opacity: 0; }
  .dial__stop.is-on b { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .filmfx::before, .filmfx::after, .tty__scene { animation: none; }
}

/* 1993: the station's own home page in an original browser window of the period. Grey page, Times, blue links.
   Rendered on a tube: faint scanlines and a soft edge. */
.w93 { width: 100%; height: 100%; display: grid; place-items: center; }
.w93__win { position: relative; display: flex; flex-direction: column; width: min(100cqw, 133.3cqh); aspect-ratio: 4 / 3; overflow: hidden;
  background: #c0c0c0; color: #000; font: 12px/1.2 Helvetica, Arial, sans-serif;
  border: 2px solid; border-color: #fff #7b7b7b #7b7b7b #fff; box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0, 0, 0, .6); }
.w93__win::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px), radial-gradient(125% 105% at 50% 45%, transparent 62%, rgba(0, 0, 0, .32)); }
.w93 p { margin: 0; }
.w93__title { padding: 4px 8px; background: #48688f; color: #fff; font-weight: 700; text-align: center; }
.w93__menu { display: flex; gap: 14px; padding: 3px 8px; border-bottom: 1px solid #7b7b7b; }
.w93__help { margin-left: auto; }
.w93__tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px 6px; }
.w93__tools span { padding: 3px 8px; border: 2px solid; border-color: #fff #7b7b7b #7b7b7b #fff; font-size: 11px; }
.w93__url { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; }
.w93__field { flex: 1; min-width: 0; padding: 2px 4px; background: #fff; border: 2px solid; border-color: #7b7b7b #fff #fff #7b7b7b; font: 12px/1.2 "Courier New", Courier, monospace; white-space: nowrap; overflow: hidden; }
.w93__doc { flex: 1; overflow: auto; margin: 0 6px; padding: 4px 16px 14px; outline: none;
  border: 2px solid; border-color: #7b7b7b #fff #fff #7b7b7b; font: clamp(12px, 2.05cqw, 16px)/1.3 "Times New Roman", Times, serif; }
.w93__doc h1 { margin: .45em 0 .35em; font-size: 2em; font-weight: 700; }
.w93__doc h2 { margin: .9em 0 .3em; font-size: 1.4em; font-weight: 700; }
.w93__doc p { margin: .5em 0; }
.w93__doc ul { margin: .3em 0; padding-left: 2em; }
.w93__doc a { color: #0000ee; text-decoration: underline; }
.w93__doc a:visited { color: #551a8b; }
.w93__doc a:focus-visible { outline: 1px dotted #000; }
.w93__doc address { font-style: italic; }
.w93__doc hr { border: 0; border-top: 1px solid #7b7b7b; border-bottom: 1px solid #fff; }
.w93__img img { display: block; image-rendering: pixelated; }
.w93__status { padding: 3px 8px 4px; border-top: 1px solid #7b7b7b; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 1997 → 2007: two original devices on one panel. Keys, then glass. */
.pk { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.pk__stage { flex: none; }
.pk__stage { width: 420px; height: 400px; display: flex; align-items: center; justify-content: center; gap: 46px; transform-origin: 50% 50%; }
.pk__dev { margin: 0; display: grid; justify-items: center; gap: 14px; }
.pk__hint { margin: 0; }

.kp { position: relative; box-sizing: border-box; width: 162px; height: 348px; padding: 30px 13px 18px; display: flex; flex-direction: column; align-items: center;
  border-radius: 46px 46px 58px 58px / 40px 40px 72px 72px; background: linear-gradient(160deg, #474b51 0%, #26292d 45%, #16181b 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .18), inset 0 -4px 8px rgba(0, 0, 0, .6), inset 2px 0 2px rgba(255, 255, 255, .05), 0 30px 60px rgba(0, 0, 0, .65); }
.kp__ear { width: 34px; height: 5px; margin-bottom: 7px; border-radius: 3px; background: #0b0c0d; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, .08); }
.kp__brand { margin-bottom: 8px; font: 700 7px/1 Arial, sans-serif; letter-spacing: .32em; color: #9aa0a8; }
.kp__lcd { padding: 6px; border-radius: 10px 10px 14px 14px; background: #0e1011; box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, .07); }
.kp__lcd canvas { display: block; width: 126px; height: 72px; border-radius: 3px; image-rendering: pixelated;
  background: linear-gradient(135deg, #b9c6a4, #a0ae8a 60%, #93a17d); box-shadow: inset 0 0 7px rgba(0, 0, 0, .35); }
.kp__soft { display: flex; align-items: center; gap: 9px; margin: 13px 0 11px; }
.kp__sk, .kp__nav, .kp__key { border: 0; padding: 0; cursor: pointer; color: #1b1d20; background: linear-gradient(#e3e7eb, #aab1b8);
  box-shadow: 0 2px 0 #44484e, inset 0 1px 0 rgba(255, 255, 255, .7); transition: transform .06s, box-shadow .06s; }
.kp__sk { width: 34px; height: 12px; border-radius: 10px 10px 16px 16px; }
.kp__nav { width: 40px; height: 22px; border-radius: 50%; }
.kp__pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 9px; width: 126px; }
.kp__key { height: 25px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 45% 45% 50% 50% / 55% 55% 62% 62%; }
.kp__key b { font: 700 12px/1 Arial, sans-serif; }
.kp__key i { font: 700 6px/1 Arial, sans-serif; font-style: normal; letter-spacing: .02em; color: #4a4f56; }
.kp__sk.is-press, .kp__nav.is-press, .kp__key.is-press, .kp__sk:active, .kp__nav:active, .kp__key:active {
  transform: translateY(2px); box-shadow: 0 0 0 #44484e, inset 0 1px 3px rgba(0, 0, 0, .28); background: linear-gradient(#c8cdd3, #9aa1a9); }
.kp__sk:focus-visible, .kp__nav:focus-visible, .kp__key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tc { position: relative; box-sizing: border-box; width: 170px; height: 348px; padding: 36px 10px 42px; border-radius: 28px;
  background: linear-gradient(145deg, #2d2d31, #09090a 45%, #1c1c1f);
  box-shadow: 0 0 0 2px #9a9ea5, 0 0 0 3px #4b4e53, inset 0 1px 1px rgba(255, 255, 255, .25), 0 30px 60px rgba(0, 0, 0, .65); }
.tc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .04) 38%, transparent 40%); }
.tc__ear { position: absolute; top: 16px; left: 50%; width: 30px; height: 4px; margin-left: -15px; border-radius: 2px; background: #050505; box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }
.tc__strip { position: absolute; left: 50%; bottom: 19px; width: 34px; height: 3px; margin-left: -17px; border-radius: 2px; background: rgba(130, 175, 255, .55); box-shadow: 0 0 8px rgba(130, 175, 255, .5); }
.tc__screen { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #c5ccd6 0 3px, #cdd4dd 3px 6px); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.tc__screen p { margin: 0; }
.tc__status { display: flex; justify-content: space-between; align-items: center; height: 14px; padding: 0 5px; background: linear-gradient(#3b3b3b, #101010); color: #fff; font: 600 8px/1 inherit; }
.tc__batt { position: relative; width: 14px; height: 6px; border: 1px solid #fff; border-radius: 1px; background: linear-gradient(90deg, #7fe07f 72%, transparent 72%); }
.tc__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 28px; padding: 0 5px; color: #fff; border-bottom: 1px solid #2d3e57;
  background: linear-gradient(#b4c4d9 0%, #8aa1bf 50%, #7590b3 51%, #6d88ad 100%); }
.tc__bar b { font: 700 11px/1 inherit; text-shadow: 0 -1px 0 rgba(0, 0, 0, .45); }
.tc__back { justify-self: start; padding: 4px 7px; border: 1px solid #3c5170; border-radius: 4px; background: linear-gradient(#93a8c5, #5b77a0); font: 700 8px/1 inherit; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); }
.tc__thread { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 7px; overflow: auto; }
.tc__empty { margin: auto !important; color: #6c7a8c; font: 9px/1 inherit; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.tc__msg { max-width: 82%; padding: 6px 9px; border-radius: 13px; font: 9.5px/1.3 inherit; box-shadow: 0 1px 1px rgba(0, 0, 0, .22); overflow-wrap: anywhere; }
.tc__msg--in { align-self: flex-start; color: #000; border: 1px solid #b5b5b5; background: linear-gradient(#fff 0%, #f1f1f1 50%, #e2e2e2 51%, #ececec 100%); }
.tc__msg--out, .tc__msg--typing { align-self: flex-end; color: #fff; border: 1px solid #3b78bf; text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  background: linear-gradient(#acd6ff 0%, #70b1f5 50%, #4c95e6 51%, #5aa2ee 100%); }
.tc__msg--typing { display: flex; gap: 3px; padding: 8px 10px; }
.tc__msg--typing i { width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: f26-dot 1.1s ease-in-out infinite; }
.tc__msg--typing i:nth-child(2) { animation-delay: .15s; }
.tc__msg--typing i:nth-child(3) { animation-delay: .3s; }
.tc__input { display: flex; align-items: center; gap: 5px; padding: 5px; border-top: 1px solid #9aa2ab; background: linear-gradient(#eceff2, #c4c9cf); }
.tc__input span { flex: 1; padding: 4px 8px; border: 1px solid #9aa2ab; border-radius: 12px; background: #fff; color: #9aa2ab; font: 9px/1.2 inherit; }
.tc__input b { padding: 5px 8px; border: 1px solid #2c64a8; border-radius: 12px; color: #fff; font: 700 9px/1 inherit; background: linear-gradient(#91c9ff, #3d8ee8 50%, #2f7fd8 51%, #3b8ae0); }
@keyframes f26-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tc__msg--typing i { animation: none; } }