:root {
  --ink: #21130b;
  --black: #090706;
  --walnut: #5a321d;
  --walnut-dark: #2a160d;
  --mahogany: #7a3f20;
  --cream: #efe0bb;
  --cream-deep: #c8ad73;
  --paper: #fff1cb;
  --brass: #d6a94f;
  --brass-dark: #7d5522;
  --mint: #7ff0a0;
  --crt: #b6ff9f;
  --red: #bd3c2d;
  --teal: #3c8d82;
  --blue: #3f5c9f;
  --line: rgba(255, 241, 203, 0.22);
  --shadow: rgba(0, 0, 0, 0.54);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #120c08;
  color: var(--paper);
  font-family: "IBM Plex Mono", monospace;
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--paper);
  background:
    linear-gradient(90deg, rgba(255, 241, 203, 0.035) 1px, transparent 1px) 0 0 / 14px 14px,
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #1f130d 0%, #352015 38%, #0e0a07 100%);
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(108, 62, 30, 0.18) 0 5px, rgba(28, 15, 8, 0.08) 5px 13px, rgba(185, 113, 55, 0.1) 13px 16px),
    linear-gradient(180deg, rgba(255, 236, 178, 0.06), rgba(0, 0, 0, 0.5));
  opacity: 0.52;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.028), transparent 36%, rgba(0, 0, 0, 0.08) 62%, transparent),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: soft-light;
  opacity: 0.34;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
}

.topline {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(330px, 1.22fr);
  gap: 18px;
  align-items: center;
  padding: 14px clamp(14px, 4vw, 42px);
  border-bottom: 4px solid var(--brass-dark);
  background:
    linear-gradient(90deg, rgba(255, 230, 164, 0.12), transparent 44%),
    repeating-linear-gradient(90deg, rgba(130, 74, 35, 0.72) 0 7px, rgba(59, 31, 15, 0.82) 7px 17px, rgba(153, 86, 39, 0.58) 17px 21px),
    #321d12;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.4),
    inset 0 -1px 0 rgba(255, 241, 203, 0.2);
}

.brand {
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  padding: 8px 14px 9px;
  border: 2px solid rgba(72, 38, 18, 0.82);
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  background:
    linear-gradient(180deg, #fff1c9, #cfad69 58%, #9b7133);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.58),
    inset 0 -3px 0 rgba(86, 49, 17, 0.38),
    0 7px 0 rgba(34, 18, 8, 0.55);
}

.brand-mark {
  display: block;
  color: #4a2111;
  font-family: "Limelight", "Bungee", cursive;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 0.92;
  text-shadow: 0 1px 0 rgba(255, 246, 210, 0.85);
  text-transform: uppercase;
}

.brand-sub {
  display: block;
  margin-top: 6px;
  color: #6f3a1e;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.decade-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(64px, 1fr));
  gap: 8px;
  padding: 8px;
  border: 2px solid rgba(255, 241, 203, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(13, 8, 5, 0.84), rgba(62, 35, 18, 0.76)),
    #1b100a;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    inset 0 10px 20px rgba(0, 0, 0, 0.24);
}

.mobile-decade-band {
  display: none;
}

.decade-tab,
.category-toggle,
.year-key,
.control {
  min-height: 44px;
  border: 2px solid #3d2010;
  border-radius: 6px;
  color: #30180c;
  background:
    linear-gradient(180deg, #faeec9 0%, #d5bd7f 58%, #9b773d 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 0 rgba(74, 41, 17, 0.25),
    0 4px 0 rgba(17, 9, 5, 0.58);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 247, 214, 0.72);
  transition: transform 130ms ease, border-color 130ms ease, color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.decade-tab {
  display: grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
}

.decade-tab:hover,
.category-toggle:hover,
.year-key:hover,
.control:hover {
  transform: translateY(-1px);
  border-color: var(--brass);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.72),
    inset 0 -4px 0 rgba(74, 41, 17, 0.2),
    0 5px 0 rgba(17, 9, 5, 0.58),
    0 0 16px rgba(214, 169, 79, 0.22);
}

.decade-tab[aria-current="page"],
.year-key[aria-pressed="true"],
.category-toggle[aria-pressed="true"],
.control[aria-pressed="true"] {
  border-color: #0e5226;
  color: #09250f;
  background:
    linear-gradient(180deg, #caffb6 0%, var(--mint) 46%, #48a568 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.76),
    inset 0 -4px 0 rgba(14, 70, 32, 0.34),
    0 3px 0 rgba(6, 25, 12, 0.65),
    0 0 18px rgba(127, 240, 160, 0.32);
}

.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(330px, 0.64fr);
  gap: clamp(18px, 3vw, 36px);
  min-height: calc(100vh - 96px);
  padding: clamp(16px, 4vw, 42px);
}

.stage {
  display: grid;
  align-content: start;
  gap: 18px;
}

.monitor {
  position: relative;
  overflow: hidden;
  border: 5px solid #1c0d06;
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(255, 230, 164, 0.12), transparent 38%, rgba(0, 0, 0, 0.25) 78%),
    repeating-linear-gradient(90deg, #6b3a1f 0 8px, #3c1e10 8px 18px, #844621 18px 23px, #2a160c 23px 31px),
    #4b2817;
  box-shadow:
    0 28px 70px var(--shadow),
    inset 0 0 0 3px rgba(214, 169, 79, 0.24),
    inset 0 0 42px rgba(0, 0, 0, 0.38);
}

.monitor::before {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: 0;
  border: 2px solid rgba(255, 234, 176, 0.16);
  border-radius: 6px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.34),
    inset 0 0 28px rgba(0, 0, 0, 0.28);
}

.monitor::after {
  content: "";
  position: absolute;
  top: clamp(24px, 4vw, 42px);
  right: clamp(16px, 3vw, 32px);
  z-index: 0;
  width: clamp(44px, 7vw, 88px);
  height: min(52%, 390px);
  border: 2px solid rgba(45, 23, 10, 0.88);
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(15, 8, 4, 0.92) 0 3px, rgba(214, 169, 79, 0.22) 3px 5px, rgba(43, 22, 10, 0.88) 5px 11px),
    #1b0f08;
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.68),
    0 0 0 8px rgba(63, 32, 15, 0.35);
}

.screen {
  position: relative;
  z-index: 1;
  width: calc(100% - clamp(86px, 11vw, 144px));
  aspect-ratio: 4 / 3;
  margin: clamp(18px, 3vw, 34px) clamp(82px, 10vw, 138px) clamp(14px, 2vw, 22px) clamp(18px, 3vw, 34px);
  overflow: hidden;
  border: clamp(10px, 1.7vw, 18px) solid #070605;
  border-radius: 22px;
  background: #020302;
  box-shadow:
    0 0 0 7px rgba(173, 123, 55, 0.74),
    0 0 0 12px rgba(40, 22, 10, 0.9),
    inset 0 0 52px rgba(183, 255, 159, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.5);
}

.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.2) 0 10%, transparent 32%),
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.34) 100%);
  mix-blend-mode: screen;
  opacity: 0.42;
}

.screen iframe,
.player-frame,
.poster,
.play-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.screen iframe,
.player-frame {
  border: 0;
  z-index: 1;
}

.poster {
  z-index: 2;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(189, 60, 45, 0.35) 0 16%, rgba(214, 169, 79, 0.34) 16% 32%, rgba(127, 240, 160, 0.25) 32% 48%, rgba(60, 141, 130, 0.29) 48% 64%, rgba(63, 92, 159, 0.31) 64% 80%, rgba(239, 224, 187, 0.26) 80%),
    radial-gradient(ellipse at center, rgba(182, 255, 159, 0.16), transparent 44%),
    #050505;
  transition: opacity 180ms ease;
}

.poster.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.poster img {
  width: 44%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid rgba(255, 241, 203, 0.66);
  border-radius: 3px;
  filter: sepia(0.2) saturate(0.76) contrast(1.14);
  opacity: 0.92;
  box-shadow:
    0 0 0 8px rgba(0, 0, 0, 0.24),
    0 10px 26px rgba(0, 0, 0, 0.5);
}

.play-overlay {
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: clamp(18px, 4vw, 44px);
  pointer-events: auto;
  background:
    radial-gradient(ellipse at center, rgba(182, 255, 159, 0.18), transparent 36%),
    linear-gradient(90deg, rgba(189, 60, 45, 0.24) 0 16%, rgba(214, 169, 79, 0.22) 16% 32%, rgba(127, 240, 160, 0.16) 32% 48%, rgba(60, 141, 130, 0.18) 48% 64%, rgba(63, 92, 159, 0.2) 64% 80%, rgba(239, 224, 187, 0.16) 80%),
    rgba(3, 3, 3, 0.86);
}

.play-overlay[hidden] {
  display: none;
}

.play-message {
  position: static;
  width: min(540px, 82%);
  max-width: 100%;
  color: rgba(255, 241, 203, 0.95);
  font-size: clamp(12px, 1.5vw, 15px);
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
  transform: none;
}

.screen-play-button {
  display: grid;
  place-items: center;
  gap: 7px;
  width: clamp(88px, 13vw, 118px);
  aspect-ratio: 1;
  border: 3px solid color-mix(in srgb, var(--era-glow) 78%, #fff 22%);
  border-radius: 50%;
  color: #102217;
  background:
    radial-gradient(circle at 33% 27%, rgba(255, 255, 255, 0.78), transparent 16%),
    radial-gradient(circle, var(--era-glow), color-mix(in srgb, var(--era-glow) 62%, #16472d));
  box-shadow:
    0 0 0 7px rgba(2, 7, 4, 0.5),
    0 0 30px color-mix(in srgb, var(--era-glow) 52%, transparent),
    inset 0 -7px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.screen-play-button:hover,
.screen-play-button:focus-visible {
  filter: brightness(1.13);
  outline: none;
  transform: scale(1.06);
  box-shadow:
    0 0 0 7px rgba(2, 7, 4, 0.5),
    0 0 42px color-mix(in srgb, var(--era-glow) 74%, transparent),
    inset 0 -7px 0 rgba(0, 0, 0, 0.2);
}

.screen-play-button span {
  margin-left: 5px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 0.8;
}

.screen-play-button small {
  font: 800 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
}

.play-overlay.is-searching .play-message {
  transform: none;
}

.play-overlay.is-searching .play-message::before {
  content: "";
  display: block;
  width: 58px;
  height: 10px;
  margin: 0 auto 14px;
  border: 1px solid rgba(182, 255, 159, 0.5);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--crt) 0 8px, transparent 8px 14px);
  box-shadow: 0 0 18px rgba(182, 255, 159, 0.5);
  animation: pulse-signal 700ms steps(2, end) infinite;
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  opacity: 0.3;
}

@keyframes pulse-signal {
  50% {
    opacity: 0.35;
  }
}

.readout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  margin: 0 clamp(14px, 3vw, 28px) clamp(14px, 2.4vw, 26px);
  padding: 12px clamp(14px, 3vw, 28px);
  border: 2px solid #2d170b;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(13, 28, 14, 0.96), rgba(5, 10, 7, 0.98)),
    #071009;
  box-shadow:
    inset 0 0 18px rgba(182, 255, 159, 0.1),
    inset 0 0 0 2px rgba(0, 0, 0, 0.52),
    0 8px 0 rgba(21, 9, 4, 0.48);
}

.readout strong {
  color: var(--crt);
  font-family: "Bungee", cursive;
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: 0;
  text-shadow:
    0 0 8px rgba(182, 255, 159, 0.52),
    0 0 18px rgba(127, 240, 160, 0.32);
}

.readout span {
  color: rgba(238, 255, 207, 0.8);
  word-break: break-word;
}

.signal-meter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  width: min(230px, 100%);
  padding: 6px;
  border: 1px solid rgba(182, 255, 159, 0.14);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}

.signal-bar {
  height: 34px;
  border: 1px solid rgba(182, 255, 159, 0.18);
  border-radius: 2px;
  background: rgba(182, 255, 159, 0.08);
}

.signal-bar.is-lit {
  background: linear-gradient(180deg, #fff6a5, var(--brass));
  box-shadow: 0 0 16px rgba(214, 169, 79, 0.54);
}

.console {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(14px, 2.2vw, 22px);
  border: 5px solid #2b160a;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 42%, rgba(121, 75, 29, 0.18)),
    repeating-linear-gradient(0deg, rgba(71, 45, 20, 0.08) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #f0e0b7, #c1a06a 68%, #85602f);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.52),
    inset 0 -8px 0 rgba(82, 47, 17, 0.2),
    0 24px 58px rgba(0, 0, 0, 0.42);
}

.console-band {
  padding: 12px 0 16px;
  border-top: 2px solid rgba(75, 39, 18, 0.42);
  border-bottom: 2px solid rgba(255, 248, 215, 0.34);
}

.console-band:first-child {
  border-top: 0;
  padding-top: 0;
}

.console-title {
  margin: 0 0 10px;
  color: #5b2715;
  font-family: "Limelight", "Bungee", cursive;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 247, 214, 0.72);
  text-transform: uppercase;
}

.controls-grid {
  display: grid;
  grid-template-columns: minmax(124px, 1.5fr) repeat(3, minmax(58px, 1fr));
  align-items: center;
  gap: 8px;
}

.control {
  min-width: 0;
  padding: 0 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.external-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.control.power {
  color: #fff0c1;
  background:
    linear-gradient(180deg, #9c3329, #4d1410);
  border-color: #2e0c09;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

#powerBtn {
  position: relative;
  min-height: 62px;
  padding: 0 34px 0 46px;
  border-width: 3px;
  border-color: #240603;
  color: #fff4d6;
  background:
    radial-gradient(circle at 22% 22%, rgba(255, 225, 174, 0.32), transparent 17%),
    linear-gradient(180deg, #db4b35 0%, #9d281e 48%, #54110d 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset 0 -7px 0 rgba(45, 3, 1, 0.34),
    0 7px 0 #260805,
    0 10px 20px rgba(43, 5, 3, 0.4),
    0 0 20px rgba(190, 47, 35, 0.34);
  font-family: var(--era-type, "Bungee", monospace);
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.05em;
}

#powerBtn::before {
  content: "⏻";
  position: absolute;
  left: 15px;
  font: 700 24px/1 "IBM Plex Mono", monospace;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

#powerBtn::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 230, 188, 0.52);
  border-radius: 50%;
  background: #4c0907;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

#powerBtn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.34),
    inset 0 -7px 0 rgba(45, 3, 1, 0.3),
    0 9px 0 #260805,
    0 14px 24px rgba(43, 5, 3, 0.46),
    0 0 26px rgba(225, 65, 43, 0.5);
}

#powerBtn[aria-pressed="true"] {
  border-color: #12391e;
  color: #f1ffe8;
  background:
    radial-gradient(circle at 22% 22%, rgba(235, 255, 220, 0.34), transparent 17%),
    linear-gradient(180deg, #58a85f 0%, #28723d 48%, #12391e 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.3),
    inset 0 -7px 0 rgba(5, 42, 17, 0.32),
    0 5px 0 #092611,
    0 9px 18px rgba(6, 34, 15, 0.42),
    0 0 28px rgba(127, 240, 160, 0.48);
  transform: translateY(2px);
}

#powerBtn[aria-pressed="true"]::after {
  background: #baff9e;
  box-shadow: 0 0 5px #baff9e, 0 0 14px rgba(127, 240, 160, 0.9);
}

.year-keys {
  display: grid;
  grid-template-columns: repeat(5, minmax(58px, 1fr));
  gap: 8px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.category-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px;
  text-align: left;
}

.category-mix-toggle {
  grid-column: 1 / -1;
  border-style: double;
}

.category-mix-toggle b {
  letter-spacing: 0.07em;
}

.category-toggle[aria-pressed="false"] {
  border-color: #4b3d2d;
  color: #c8b68d;
  background:
    linear-gradient(180deg, #31291d 0%, #1b150e 58%, #0f0c08 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 203, 0.12),
    inset 0 -3px 0 rgba(0, 0, 0, 0.34),
    0 3px 0 rgba(0, 0, 0, 0.62);
  text-shadow: none;
}

.category-toggle[aria-pressed="false"] b {
  color: #a7987a;
}

.category-toggle span,
.category-toggle b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-toggle b {
  font-size: 11px;
  opacity: 0.78;
}

.status-strip {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 14px;
  border: 2px solid #3e2110;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(47, 24, 12, 0.94), rgba(18, 9, 5, 0.96)),
    #21110a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 203, 0.12),
    inset 0 14px 24px rgba(0, 0, 0, 0.2);
}

.status-strip span {
  color: rgba(255, 241, 203, 0.78);
  font-size: 13px;
  line-height: 1.5;
}

.archive-index {
  margin-top: 8px;
  padding: 34px clamp(16px, 4vw, 42px) 58px;
  border-top: 5px solid #241109;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 48%),
    repeating-linear-gradient(0deg, rgba(83, 51, 24, 0.08) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #e6d3a5, #ba965a);
  color: #2d170b;
}

.archive-index h1,
.archive-index h2 {
  margin: 0 0 12px;
  color: #4a2111;
  font-family: "Limelight", "Bungee", cursive;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 247, 214, 0.78);
}

.archive-index p {
  max-width: 920px;
  color: #4a2a15;
  line-height: 1.7;
}

.seo-copy {
  max-width: 1040px;
  margin-top: 22px;
  color: #3f2110;
}

.seo-copy h2 {
  margin-top: 24px;
  font-size: clamp(20px, 2vw, 30px);
}

.seo-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 980px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.seo-copy li,
.seo-copy details {
  border: 2px solid rgba(74, 33, 17, 0.3);
  border-radius: 7px;
  padding: 12px 14px;
  background: rgba(255, 241, 203, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.seo-copy details {
  max-width: 900px;
  margin-top: 10px;
}

.seo-copy summary {
  color: #4a2111;
  font-weight: 700;
  cursor: pointer;
}

.seo-copy details p {
  margin-bottom: 0;
}

.archive-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.archive-links a {
  border: 2px solid rgba(74, 33, 17, 0.62);
  border-radius: 6px;
  padding: 10px 12px;
  color: #17391d;
  background: rgba(255, 241, 203, 0.28);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.archive-links a:hover {
  border-color: #17391d;
  background: rgba(127, 240, 160, 0.24);
}

.video-detail,
.watch-index {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 42px) clamp(42px, 7vw, 76px);
}

.video-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  color: rgba(255, 241, 203, 0.72);
  font-size: 13px;
  line-height: 1.5;
}

.video-breadcrumbs a,
.video-source a,
.video-archive-links a,
.related-videos a,
.watch-decade a,
.watch-topic-links a {
  color: var(--mint);
  overflow-wrap: anywhere;
}

.video-detail-main {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(22px, 4vw, 52px);
  align-items: start;
}

.video-detail-copy h1,
.video-context h2,
.watch-index h1,
.watch-decade h2,
.watch-topic-links h2,
.related-videos h2 {
  margin: 0;
  color: var(--paper);
  font-family: "Limelight", "Bungee", cursive;
  letter-spacing: 0;
  line-height: 1.05;
}

.video-detail-copy h1,
.watch-index h1 {
  font-size: clamp(32px, 5vw, 58px);
  overflow-wrap: anywhere;
}

.video-kicker {
  margin: 0 0 12px;
  color: var(--mint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.video-summary,
.watch-index-heading > p,
.embed-notice {
  color: rgba(255, 241, 203, 0.82);
  line-height: 1.75;
}

.video-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}

.video-facts div,
.related-videos li,
.watch-decade li {
  min-width: 0;
  border: 2px solid rgba(255, 241, 203, 0.18);
  border-radius: 7px;
  background: rgba(9, 7, 6, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 241, 203, 0.1);
}

.video-facts div {
  padding: 12px;
}

.video-facts dt {
  margin-bottom: 5px;
  color: var(--cream-deep);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.video-facts dd {
  margin: 0;
  color: var(--paper);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.video-frame-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 5px solid #1c0d06;
  border-radius: 8px;
  background: #090706;
  box-shadow: 0 28px 70px var(--shadow), inset 0 0 0 3px rgba(214, 169, 79, 0.24);
}

.video-detail-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-notice {
  max-width: 760px;
  margin: 24px 0 0;
  font-size: 13px;
}

.video-context {
  max-width: 860px;
  margin-top: clamp(28px, 4vw, 42px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 3px solid rgba(214, 169, 79, 0.48);
}

.video-context h2 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(23px, 3vw, 34px);
  letter-spacing: 0;
}

.video-context p {
  margin: 14px 0 0;
  color: rgba(255, 241, 203, 0.82);
  line-height: 1.75;
}

.video-archive-links,
.watch-topic-links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.video-archive-links {
  margin-top: 18px;
}

.video-archive-links a,
.watch-topic-links a,
.watch-decade > div > a {
  border: 2px solid rgba(214, 169, 79, 0.58);
  border-radius: 6px;
  padding: 9px 11px;
  color: var(--paper);
  background: rgba(90, 50, 29, 0.62);
  text-decoration: none;
}

.video-archive-links a:hover,
.watch-topic-links a:hover,
.watch-decade > div > a:hover {
  border-color: var(--mint);
  color: #082010;
  background: var(--mint);
}

.related-videos,
.watch-decade,
.watch-topic-links {
  margin-top: clamp(34px, 5vw, 58px);
  padding-top: clamp(24px, 4vw, 36px);
  border-top: 3px solid rgba(214, 169, 79, 0.48);
}

.related-videos h2,
.watch-decade h2,
.watch-topic-links h2 {
  font-size: clamp(23px, 3vw, 34px);
}

.related-videos ul,
.watch-decade ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.related-videos li,
.watch-decade li {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.related-videos li span,
.watch-decade li span {
  color: rgba(255, 241, 203, 0.68);
  font-size: 12px;
  line-height: 1.45;
}

.watch-index-heading {
  max-width: 760px;
}

.watch-index-heading > p:last-child {
  margin-bottom: 0;
}

.watch-decade > div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.watch-decade > div > a {
  color: var(--mint);
}

.watch-topic-links > div {
  margin-top: 18px;
}

/* Signal Lab uses one stable console with era-specific materials and displays. */
:root {
  --lab-body-a: #1f130d;
  --lab-body-b: #352015;
  --lab-body-c: #0e0a07;
  --lab-rack-a: #6b3a1f;
  --lab-rack-b: #3c1e10;
  --lab-rack-c: #844621;
  --lab-panel-a: #f0e0b7;
  --lab-panel-b: #c1a06a;
  --lab-panel-c: #85602f;
  --lab-display: #b6ff9f;
  --lab-display-soft: rgba(182, 255, 159, 0.18);
  --lab-active-a: #caffb6;
  --lab-active-b: #7ff0a0;
  --lab-active-c: #48a568;
  --lab-accent: #d6a94f;
  --lab-ink: #30180c;
  --lab-heading: "Limelight", "Bungee", cursive;
  --era-name: "SIGNAL ARCHIVE";
  --era-note: "ANALOG MEMORIES • ON AIR";
  --era-type: "IBM Plex Mono", monospace;
  --era-radius: 8px;
  --era-screen-radius: 22px;
  --era-panel-border: #2b160a;
  --era-paper-a: #e6d3a5;
  --era-paper-b: #ba965a;
  --era-paper-ink: #4a2111;
  --era-button-a: #faeec9;
  --era-button-b: #d5bd7f;
  --era-button-c: #9b773d;
  --era-button-border: #3d2010;
  --era-button-shadow: rgba(17, 9, 5, 0.58);
  --era-grid: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 5px);
  --era-glow: rgba(214, 169, 79, 0.28);
}

:root[data-decade-theme="50s"] {
  --lab-body-a: #151412;
  --lab-body-b: #24201a;
  --lab-body-c: #090908;
  --lab-rack-a: #171513;
  --lab-rack-b: #302b24;
  --lab-rack-c: #0b0a09;
  --lab-panel-a: #d8c694;
  --lab-panel-b: #9f8552;
  --lab-panel-c: #534126;
  --lab-display: #f0d88b;
  --lab-display-soft: rgba(240, 216, 139, 0.17);
  --lab-active-a: #f2df9c;
  --lab-active-b: #c49a45;
  --lab-active-c: #74501f;
  --lab-accent: #cda85c;
  --lab-ink: #1d1912;
  --lab-heading: "Limelight", serif;
  --era-name: "1950s PICTURE HOUSE";
  --era-note: "VACUUM TUBES • MONO SOUND • CH 05";
  --era-type: "Rye", "Limelight", serif;
  --era-radius: 18px;
  --era-screen-radius: 42% / 12%;
  --era-panel-border: #171411;
  --era-paper-a: #e4dcc5;
  --era-paper-b: #aaa18d;
  --era-paper-ink: #171512;
  --era-button-a: #eee5ca;
  --era-button-b: #aaa18c;
  --era-button-c: #60594e;
  --era-button-border: #171512;
  --era-button-shadow: rgba(0, 0, 0, 0.72);
  --era-grid: radial-gradient(circle at 2px 2px, rgba(240, 232, 211, 0.08) 1px, transparent 1.5px) 0 0 / 8px 8px;
  --era-glow: rgba(240, 216, 139, 0.28);
}

:root[data-decade-theme="60s"] {
  --lab-body-a: #1b2827;
  --lab-body-b: #435b55;
  --lab-body-c: #101716;
  --lab-rack-a: #c9d2c8;
  --lab-rack-b: #87978e;
  --lab-rack-c: #45534f;
  --lab-panel-a: #eef0d9;
  --lab-panel-b: #b8c8ae;
  --lab-panel-c: #708e82;
  --lab-display: #b9ffd3;
  --lab-display-soft: rgba(185, 255, 211, 0.18);
  --lab-active-a: #d9ffe7;
  --lab-active-b: #8de2b3;
  --lab-active-c: #3d8672;
  --lab-accent: #efb84c;
  --lab-ink: #163d36;
  --lab-heading: "Bungee", cursive;
  --era-name: "1960s ATOMIC VISION";
  --era-note: "COLORCAST • SPACE AGE • UHF";
  --era-type: "Limelight", "Bungee", cursive;
  --era-radius: 26px 8px;
  --era-screen-radius: 48% / 10%;
  --era-panel-border: #173e3a;
  --era-paper-a: #f1ead1;
  --era-paper-b: #92b6a6;
  --era-paper-ink: #163d36;
  --era-button-a: #fff4ca;
  --era-button-b: #f0ba54;
  --era-button-c: #bd653b;
  --era-button-border: #1e5b53;
  --era-button-shadow: rgba(17, 61, 54, 0.58);
  --era-grid: radial-gradient(circle, rgba(245, 190, 78, 0.17) 0 3px, transparent 3.5px) 0 0 / 28px 28px;
  --era-glow: rgba(239, 184, 76, 0.32);
}

:root[data-decade-theme="70s"] {
  --lab-body-a: #24140b;
  --lab-body-b: #4d2d17;
  --lab-body-c: #120b07;
  --lab-rack-a: #733c1d;
  --lab-rack-b: #3c1c0e;
  --lab-rack-c: #915127;
  --lab-panel-a: #ead09b;
  --lab-panel-b: #b17b3d;
  --lab-panel-c: #70401f;
  --lab-display: #ffc864;
  --lab-display-soft: rgba(255, 200, 100, 0.2);
  --lab-active-a: #ffe092;
  --lab-active-b: #d8953f;
  --lab-active-c: #8b491e;
  --lab-accent: #e5aa46;
  --lab-ink: #401d0c;
  --lab-heading: "Limelight", cursive;
  --era-name: "1970s COLOR TELEVISION";
  --era-note: "WOODGRAIN • SOLID STATE • STEREO";
  --era-type: "Rye", "Limelight", serif;
  --era-radius: 4px;
  --era-screen-radius: 28px;
  --era-panel-border: #3b190a;
  --era-paper-a: #e9c780;
  --era-paper-b: #a96627;
  --era-paper-ink: #431d0a;
  --era-button-a: #f2d05d;
  --era-button-b: #d27a27;
  --era-button-c: #7e3419;
  --era-button-border: #431707;
  --era-button-shadow: rgba(45, 18, 5, 0.72);
  --era-grid: repeating-linear-gradient(90deg, rgba(78, 35, 12, 0.19) 0 4px, transparent 4px 12px, rgba(255, 212, 124, 0.08) 12px 14px);
  --era-glow: rgba(255, 175, 62, 0.34);
}

:root[data-decade-theme="80s"] {
  --lab-body-a: #11161a;
  --lab-body-b: #30383d;
  --lab-body-c: #07090b;
  --lab-rack-a: #a8afb0;
  --lab-rack-b: #434b4e;
  --lab-rack-c: #1e2427;
  --lab-panel-a: #d9ddda;
  --lab-panel-b: #8f9999;
  --lab-panel-c: #4e5659;
  --lab-display: #ff6b55;
  --lab-display-soft: rgba(255, 107, 85, 0.2);
  --lab-active-a: #ffd36f;
  --lab-active-b: #df5d46;
  --lab-active-c: #8b2c2a;
  --lab-accent: #5cc7d2;
  --lab-ink: #1d272b;
  --lab-heading: "Bungee", cursive;
  --era-name: "1980s VIDEO CLUB";
  --era-note: "VHS • CABLE 64 • HI-FI";
  --era-type: "Monoton", "Bungee", cursive;
  --era-radius: 0;
  --era-screen-radius: 10px;
  --era-panel-border: #151719;
  --era-paper-a: #17151f;
  --era-paper-b: #25202e;
  --era-paper-ink: #f5e9ff;
  --era-button-a: #403d4a;
  --era-button-b: #25232c;
  --era-button-c: #111014;
  --era-button-border: #55d8ea;
  --era-button-shadow: rgba(255, 55, 180, 0.5);
  --era-grid: linear-gradient(rgba(61, 231, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 231, 255, 0.12) 1px, transparent 1px);
  --era-glow: rgba(255, 55, 180, 0.38);
}

:root[data-decade-theme="90s"] {
  --lab-body-a: #171a19;
  --lab-body-b: #343b38;
  --lab-body-c: #0b0d0c;
  --lab-rack-a: #777e79;
  --lab-rack-b: #383e3a;
  --lab-rack-c: #999d94;
  --lab-panel-a: #e4dfc9;
  --lab-panel-b: #aaa894;
  --lab-panel-c: #64685d;
  --lab-display: #91ff9f;
  --lab-display-soft: rgba(145, 255, 159, 0.2);
  --lab-active-a: #c9ffb8;
  --lab-active-b: #72da86;
  --lab-active-c: #368652;
  --lab-accent: #f3c54f;
  --lab-ink: #28312b;
  --lab-heading: "Bungee", cursive;
  --era-name: "1990s CHANNEL SURFER";
  --era-note: "VCR • 99 CHANNELS • TRACKING";
  --era-type: "Press Start 2P", "IBM Plex Mono", monospace;
  --era-radius: 2px;
  --era-screen-radius: 8px;
  --era-panel-border: #545348;
  --era-paper-a: #ded9bd;
  --era-paper-b: #aaa58e;
  --era-paper-ink: #252820;
  --era-button-a: #e6e3cf;
  --era-button-b: #aaa997;
  --era-button-c: #747568;
  --era-button-border: #4f5148;
  --era-button-shadow: rgba(24, 26, 22, 0.7);
  --era-grid: linear-gradient(90deg, rgba(35, 70, 64, 0.1) 50%, transparent 50%) 0 0 / 18px 18px, linear-gradient(rgba(102, 61, 119, 0.09) 50%, transparent 50%) 9px 9px / 18px 18px;
  --era-glow: rgba(111, 255, 160, 0.28);
}

:root[data-decade-theme="00s"] {
  --lab-body-a: #101923;
  --lab-body-b: #2b4454;
  --lab-body-c: #070b10;
  --lab-rack-a: #9db6c2;
  --lab-rack-b: #496574;
  --lab-rack-c: #263946;
  --lab-panel-a: #e4edf0;
  --lab-panel-b: #a7c1c9;
  --lab-panel-c: #5c7e8d;
  --lab-display: #78d8ff;
  --lab-display-soft: rgba(120, 216, 255, 0.2);
  --lab-active-a: #d5f5ff;
  --lab-active-b: #73c4e7;
  --lab-active-c: #3c769c;
  --lab-accent: #f0a858;
  --lab-ink: #173343;
  --lab-heading: "Bungee", cursive;
  --era-name: "2000s DIGITAL CABLE";
  --era-note: "Y2K • DVD • 1000 CHANNELS";
  --era-type: "Audiowide", "Bungee", cursive;
  --era-radius: 22px;
  --era-screen-radius: 16px;
  --era-panel-border: #4d7384;
  --era-paper-a: #dff4f8;
  --era-paper-b: #89b8c9;
  --era-paper-ink: #123647;
  --era-button-a: #f5fdff;
  --era-button-b: #9bd8ec;
  --era-button-c: #4c85a3;
  --era-button-border: #396c88;
  --era-button-shadow: rgba(25, 70, 94, 0.54);
  --era-grid: radial-gradient(circle at 50% 120%, rgba(87, 219, 255, 0.26), transparent 52%), repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 12px);
  --era-glow: rgba(91, 214, 255, 0.36);
}


body {
  background:
    var(--era-grid),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, var(--lab-body-a), var(--lab-body-b) 42%, var(--lab-body-c));
  transition: background-color 240ms ease, color 240ms ease;
}

.topline,
.monitor {
  background-color: var(--lab-rack-b);
}

.topline {
  position: sticky;
  border-color: var(--lab-accent);
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.14), transparent 38%, rgba(0, 0, 0, 0.26)),
    var(--era-grid),
    linear-gradient(135deg, var(--lab-rack-a), var(--lab-rack-b) 52%, var(--lab-rack-c));
}

.topline::after {
  content: var(--era-note);
  position: absolute;
  right: clamp(16px, 4vw, 42px);
  bottom: -16px;
  padding: 5px 10px 4px;
  border: 2px solid var(--lab-body-c);
  color: var(--lab-display);
  background: var(--lab-body-c);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.34), 0 0 16px var(--lab-display-soft);
  font: 700 9px/1 var(--era-type);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand {
  border-color: var(--era-button-border);
  border-radius: var(--era-radius);
  background: linear-gradient(180deg, var(--era-button-a), var(--era-button-b) 58%, var(--era-button-c));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.54),
    inset 0 -3px 0 rgba(0, 0, 0, 0.24),
    0 7px 0 var(--era-button-shadow),
    0 0 22px var(--era-glow);
}

.brand-mark {
  font-family: var(--era-type);
  font-size: clamp(19px, 2.45vw, 32px);
}

.brand-sub::after {
  content: " // " var(--era-name);
}

.decade-tabs {
  border-radius: var(--era-radius);
  border-color: color-mix(in srgb, var(--lab-accent) 46%, transparent);
}

.monitor {
  border-color: var(--era-panel-border);
  border-radius: var(--era-radius);
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.13), transparent 38%, rgba(0, 0, 0, 0.28) 78%),
    repeating-linear-gradient(90deg, var(--lab-rack-a) 0 8px, var(--lab-rack-b) 8px 18px, var(--lab-rack-c) 18px 25px, var(--lab-rack-b) 25px 32px);
  box-shadow:
    0 28px 70px var(--shadow),
    inset 0 0 0 3px color-mix(in srgb, var(--lab-accent) 34%, transparent),
    inset 0 0 42px rgba(0, 0, 0, 0.4),
    0 0 32px var(--era-glow);
}

.console {
  border-color: var(--era-panel-border);
  border-radius: var(--era-radius);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 42%, rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, var(--lab-panel-a), var(--lab-panel-b) 68%, var(--lab-panel-c));
}

.console-title,
.brand-mark {
  color: var(--lab-ink);
  font-family: var(--lab-heading);
}

.console-title::before {
  content: "● ";
  color: var(--lab-accent);
  text-shadow: 0 0 8px var(--era-glow);
}

.screen {
  border-radius: var(--era-screen-radius);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--lab-accent) 68%, var(--lab-rack-b)),
    0 0 0 12px color-mix(in srgb, var(--era-panel-border) 88%, #000),
    inset 0 0 52px var(--lab-display-soft),
    0 18px 34px rgba(0, 0, 0, 0.55);
}

.readout,
.status-strip {
  border-color: var(--era-panel-border);
  border-radius: var(--era-radius);
}

.readout strong {
  font-family: var(--era-type);
}

.decade-tab,
.category-toggle,
.year-key,
.control {
  border-color: var(--era-button-border);
  border-radius: var(--era-radius);
  color: var(--lab-ink);
  background: linear-gradient(180deg, var(--era-button-a), var(--era-button-b) 58%, var(--era-button-c));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.58),
    inset 0 -4px 0 rgba(0, 0, 0, 0.2),
    0 4px 0 var(--era-button-shadow);
}

.readout strong {
  color: var(--lab-display);
  text-shadow: 0 0 9px var(--lab-display-soft), 0 0 20px var(--lab-display-soft);
}

.decade-tab[aria-current="page"],
.year-key[aria-pressed="true"],
.category-toggle[aria-pressed="true"],
.control[aria-pressed="true"] {
  color: var(--lab-ink);
  background: linear-gradient(180deg, var(--lab-active-a), var(--lab-active-b) 48%, var(--lab-active-c));
  border-color: var(--lab-active-c);
}

.signal-bar.is-lit {
  background: linear-gradient(180deg, #fff4b5, var(--lab-accent));
  box-shadow: 0 0 16px var(--lab-display-soft);
}

.archive-index {
  border-color: var(--era-panel-border);
  color: var(--era-paper-ink);
  background:
    var(--era-grid),
    linear-gradient(180deg, var(--era-paper-a), var(--era-paper-b));
}

.archive-index h1,
.archive-index h2,
.archive-index p,
.seo-copy,
.seo-copy summary {
  color: var(--era-paper-ink);
}

.archive-index h1,
.archive-index h2 {
  font-family: var(--era-type);
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--era-paper-a) 75%, white);
}

.seo-copy li,
.seo-copy details,
.archive-links a {
  border-color: color-mix(in srgb, var(--era-paper-ink) 55%, transparent);
  border-radius: var(--era-radius);
  background: color-mix(in srgb, var(--era-paper-a) 60%, transparent);
}

.site-footer {
  border-color: var(--lab-accent);
  background:
    var(--era-grid),
    linear-gradient(145deg, var(--lab-body-a), var(--lab-body-c));
}

:root[data-decade-theme="50s"] .screen,
:root[data-decade-theme="50s"] .poster img {
  filter: grayscale(1) sepia(0.14) contrast(1.16);
}

:root[data-decade-theme="50s"] .monitor::after {
  border-radius: 999px;
  background: radial-gradient(circle, #c6b67e 0 8%, #2a2721 9% 18%, transparent 19%) 50% 18% / 72px 72px no-repeat, #181613;
}

:root[data-decade-theme="60s"] .monitor {
  clip-path: polygon(2% 0, 98% 0, 100% 5%, 100% 95%, 98% 100%, 2% 100%, 0 95%, 0 5%);
}

:root[data-decade-theme="70s"] .monitor,
:root[data-decade-theme="70s"] .topline {
  background:
    linear-gradient(100deg, rgba(255, 221, 150, 0.12), transparent 38%, rgba(0, 0, 0, 0.32)),
    repeating-linear-gradient(90deg, #773d1b 0 5px, #3a190b 5px 13px, #975222 13px 16px, #4c210e 16px 23px);
}

:root[data-decade-theme="80s"] .brand-mark {
  color: #ff54c8;
  text-shadow: 2px 2px 0 #42e7ff, 0 0 18px rgba(255, 55, 180, 0.7);
}

:root[data-decade-theme="80s"] .console-title,
:root[data-decade-theme="80s"] .readout strong {
  color: #5cecff;
  text-shadow: 2px 2px 0 #d52e9b, 0 0 14px rgba(65, 232, 255, 0.58);
}

:root[data-decade-theme="80s"] .workbench {
  background:
    linear-gradient(90deg, rgba(79, 228, 255, 0.11) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(rgba(79, 228, 255, 0.08) 1px, transparent 1px) 0 0 / 42px 42px;
}

:root[data-decade-theme="90s"] .brand,
:root[data-decade-theme="90s"] .console,
:root[data-decade-theme="90s"] .decade-tab,
:root[data-decade-theme="90s"] .category-toggle,
:root[data-decade-theme="90s"] .year-key,
:root[data-decade-theme="90s"] .control {
  box-shadow:
    inset 2px 2px 0 #f5f2dc,
    inset -3px -3px 0 #646659,
    3px 3px 0 #22251f;
}

:root[data-decade-theme="90s"] .brand-mark,
:root[data-decade-theme="90s"] .console-title,
:root[data-decade-theme="90s"] .readout strong {
  font-size: clamp(12px, 1.55vw, 20px);
  line-height: 1.45;
}

:root[data-decade-theme="00s"] .brand,
:root[data-decade-theme="00s"] .console {
  backdrop-filter: blur(10px) saturate(1.2);
}

:root[data-decade-theme="00s"] .decade-tab,
:root[data-decade-theme="00s"] .category-toggle,
:root[data-decade-theme="00s"] .year-key,
:root[data-decade-theme="00s"] .control {
  border-radius: 999px;
}


.auto-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  color: var(--lab-display) !important;
  font-weight: 700;
  text-transform: uppercase;
}

.auto-indicator::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lab-display);
  box-shadow: 0 0 12px var(--lab-display);
  animation: auto-lamp 1.6s steps(2, end) infinite;
}

.fullscreen-control {
  width: 100%;
}

.share-moment-control {
  width: 100%;
}

.share-moment-panel {
  position: fixed;
  z-index: 30;
  right: clamp(16px, 4vw, 52px);
  bottom: clamp(16px, 4vw, 52px);
  width: min(440px, calc(100vw - 32px));
  border: 2px solid var(--era-button-border);
  border-radius: var(--era-radius);
  color: var(--era-paper-ink);
  background: var(--era-paper-a);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.55), 0 0 0 5px var(--era-glow);
}

.share-moment-panel[hidden] {
  display: none;
}

.share-moment-card {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.share-moment-image {
  width: 132px;
  aspect-ratio: 16 / 9;
  align-self: start;
  object-fit: cover;
  border: 2px solid var(--era-button-border);
  background: var(--era-paper-b);
}

.share-moment-copy {
  min-width: 0;
  padding-right: 24px;
}

.share-moment-kicker,
.share-moment-title,
.share-moment-description,
.share-moment-status {
  margin: 0;
}

.share-moment-kicker,
.share-moment-status {
  font: 700 0.67rem/1.3 var(--era-type);
  letter-spacing: 0;
  text-transform: uppercase;
}

.share-moment-kicker {
  color: var(--lab-accent);
}

.share-moment-title {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font: 700 clamp(1.05rem, 3vw, 1.35rem)/1.12 var(--era-type);
}

.share-moment-description {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
}

.share-moment-status {
  min-height: 1.3em;
  margin-top: 7px;
  color: var(--era-paper-ink);
}

.share-moment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.share-moment-actions .control,
.share-moment-close {
  min-height: 34px;
  border-color: var(--era-button-border);
  color: var(--era-paper-ink);
  background: var(--era-button-a);
  font-size: 0.72rem;
}

.share-moment-close {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 7px;
}

@media (max-width: 520px) {
  .share-moment-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .share-moment-image {
    width: 96px;
  }
}

@keyframes auto-lamp {
  50% { opacity: 0.45; }
}

.site-footer {
  width: 100%;
  padding: 28px clamp(18px, 4vw, 64px) 36px;
  color: var(--muted);
  background: #17130f;
  border-top: 1px solid #655441;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.site-footer a,
.trust-content a {
  color: var(--lab-display, #f2c96d);
}

.site-footer p {
  max-width: 780px;
  margin: 14px 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
}

.trust-page {
  min-height: 100vh;
  background:
    linear-gradient(rgba(21, 17, 13, 0.94), rgba(21, 17, 13, 0.98)),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.025) 5px);
}

.trust-content {
  width: min(820px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(54px, 8vw, 96px) 0;
  color: #ddd2c1;
}

.trust-content h1 {
  max-width: 720px;
  margin: 8px 0 20px;
  color: var(--lab-ink, #f4dfb5);
  font: 700 clamp(2.2rem, 7vw, 4.7rem)/0.98 var(--lab-heading, Georgia, serif);
}

.trust-content h2 {
  margin: 42px 0 10px;
  color: #f2c96d;
  font: 700 1.05rem/1.2 var(--lab-mono, monospace);
  text-transform: uppercase;
}

.trust-content p {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.8;
}

.trust-kicker {
  color: #b9a887;
  font: 700 0.76rem/1 var(--lab-mono, monospace);
  text-transform: uppercase;
}

.trust-lead {
  color: #f2eadf;
  font-size: clamp(1.08rem, 2vw, 1.3rem) !important;
}

.contact-action {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin-top: 8px;
  padding: 10px 15px;
  border: 1px solid #8f7442;
  background: #2b251c;
  font: 700 0.82rem/1.2 var(--lab-mono, monospace);
  text-decoration: none;
  text-transform: uppercase;
}

.contact-action:hover,
.contact-action:focus-visible {
  background: #443721;
  outline: 2px solid #f2c96d;
  outline-offset: 2px;
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px clamp(28px, 6vw, 64px);
  margin-top: 36px;
}

.contact-list h2 {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 980px) {
  .topline,
  .workbench {
    grid-template-columns: 1fr;
  }

  .topline {
    position: static;
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .screen {
    width: auto;
    margin: clamp(16px, 3vw, 28px);
  }

  .monitor::after {
    display: none;
  }

  .video-detail-main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .decade-tabs,
  .year-keys,
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .controls-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readout {
    grid-template-columns: 1fr;
  }

  .seo-copy ul {
    grid-template-columns: 1fr;
  }

  .screen {
    aspect-ratio: 4 / 3;
    margin: 12px;
    border-width: 8px;
    border-radius: 16px;
  }

  .poster img {
    width: 58%;
  }

  .contact-list {
    grid-template-columns: 1fr;
  }

  .video-facts,
  .related-videos ul,
  .watch-decade ul {
    grid-template-columns: 1fr;
  }

  .watch-decade > div {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .topline #decadeTabs {
    display: none;
  }

  .topline .inline-ad-banner {
    display: grid;
    width: 300px;
    max-width: calc(100vw - 20px);
    margin: 4px auto 8px;
  }

  .mobile-decade-band {
    display: block;
  }

  .mobile-decade-band .decade-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A single, non-sticky medium rectangle for archive discovery pages. */
.inline-ad-banner {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 300px;
  max-width: calc(100vw - 20px);
  margin: clamp(26px, 5vw, 54px) auto;
  color: rgba(255, 241, 203, 0.7);
  font: 700 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inline-ad-slot,
.inline-ad-slot iframe {
  display: block;
  width: 300px;
  height: 250px;
  border: 0;
}

.desktop-leaderboard-ad {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 728px;
  margin: 4px auto 0;
  color: rgba(255, 241, 203, 0.7);
  font: 700 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desktop-leaderboard-slot,
.desktop-leaderboard-slot iframe {
  display: block;
  width: 728px;
  height: 90px;
  border: 0;
}

@media (max-width: 1199px) {
  .desktop-leaderboard-ad {
    display: none;
  }
}

@media (min-width: 768px) {
  .console > .inline-ad-banner {
    margin: 16px auto;
    padding: 14px 0 18px;
    border-bottom: 2px solid rgba(255, 248, 215, 0.34);
  }
}

@media (max-width: 767px) {
  .inline-ad-banner {
    display: grid;
    width: 300px;
    max-width: calc(100vw - 20px);
    margin: 24px auto 32px;
  }

  .inline-ad-slot,
  .inline-ad-slot iframe {
    max-width: 100%;
  }
}