/* Decade Files No. 05, the 1980s: the decade of the arcade, the Walkman and the VHS rental shop (Oct 19, 2026). "Outrun" neon: a night-purple
   sky, a glowing perspective grid, sunset-striped chrome titles, racing stripes between the sections, and every card edged in a different
   neon colour. Text is white or pale lavender on night purple (contrast 9:1 or better); the bright blocks carry night-purple text.
   Only this page loads it (build_decade_page.py adds it when it exists). The site's colour tokens are re-pointed inside .dc-t-1980s, so the
   shared case and decade styles pick up the theme. */
.dc-t-1980s {
  --ink: #12073a; --ink-2: rgba(255, 255, 255, 0.07); --ink-3: rgba(255, 255, 255, 0.12); --bone: #fbf8ff; --bone-dim: #cdc2f5;
  --line: rgba(190, 160, 255, 0.28); --amber: #ffe14a; --amber-fill: #ff2e93; --amber-fill-hover: #ff5db1; --on-amber: #12073a;
  --tz-confirmed: #38ffb0; --tz-refutes: #ff6b8a; --lead-shadow: none; --h1-shadow: none;
  --night: #12073a; --night-2: #1f0e5c; --pink: #ff2e93; --orange: #ff8a1f; --yellow: #ffe14a; --cyan: #2df0ff; --mint: #38ffb0; --purple: #9d4dff;
  --stripes: linear-gradient(90deg, var(--yellow) 0 20%, var(--orange) 20% 40%, var(--pink) 40% 60%, var(--purple) 60% 80%, var(--cyan) 80% 100%);
  color-scheme: dark;
  color: var(--bone);
  background-color: var(--night);
  background-image:
    radial-gradient(1100px 600px at 88% -6%, rgba(255, 46, 147, 0.30), transparent 62%),
    radial-gradient(900px 640px at -8% 24%, rgba(45, 240, 255, 0.16), transparent 62%),
    radial-gradient(1000px 700px at 75% 78%, rgba(157, 77, 255, 0.22), transparent 62%),
    radial-gradient(1.5px 1.5px at 18% 22%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 62% 12%, #fff 99%, transparent),
    radial-gradient(1px 1px at 84% 34%, #fff 99%, transparent), radial-gradient(1px 1px at 36% 58%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 8% 82%, #fff 99%, transparent);
  background-size: auto, auto, auto, 320px 300px, 410px 360px, 290px 330px, 380px 340px, 350px 400px;
}
.dc-t-1980s .tz-sec, .dc-t-1980s .tz-head, .dc-t-1980s .dc-rec-sec { background: transparent; border-color: var(--line); }
.dc-t-1980s .tz-sec { padding: 72px 0 64px; position: relative; border-top: 0; }
.dc-t-1980s .tz-sec::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--stripes); opacity: 0.9; box-shadow: 0 0 22px rgba(255, 46, 147, 0.45); }
.dc-t-1980s .page-head::before, .dc-t-1980s .page-head::after { display: none; }
.dc-t-1980s .dc-hero, .dc-t-1980s .dc-hero * { text-shadow: none; }
:where(.dc-t-1980s) a { color: inherit; }
.dc-t-1980s h2 { color: #fff; font-style: italic; text-transform: uppercase; letter-spacing: 0.01em; transform: skewX(-6deg); transform-origin: left bottom;
  text-shadow: 0 0 14px rgba(255, 46, 147, 0.75), 0 0 34px rgba(157, 77, 255, 0.5); }
.dc-t-1980s h2::after { content: ""; display: block; height: 5px; width: min(260px, 60%); margin-top: 12px; background: var(--stripes); border-radius: 3px; }
.dc-t-1980s .kicker { color: var(--night); background: var(--cyan); display: inline-block; padding: 3px 11px; margin-bottom: 14px; border-radius: 3px; box-shadow: 0 0 14px rgba(45, 240, 255, 0.55); }
.dc-t-1980s .dc-ref { color: var(--yellow); }
.dc-t-1980s .crumb a { color: var(--bone-dim); }

/* hero: a sunset-striped chrome title over a glowing grid floor */
.dc-t-1980s .dc-hero { padding-top: 46px; padding-bottom: 170px; position: relative; overflow: hidden; }
/* (the site's own film-grain and photo layers use .page-head::before/::after, so the grid hangs off the hero's inner wrap instead) */
.dc-t-1980s .dc-hero > .wrap::after { content: ""; display: block; position: absolute; left: calc(50% - 50vw); width: 100vw; top: calc(100% + 30px); height: 190px; z-index: -1; pointer-events: none; border-top: 3px solid var(--pink); box-shadow: 0 -10px 26px rgba(255, 46, 147, 0.55);
  background:
    linear-gradient(to bottom, rgba(255, 46, 147, 0.55), rgba(255, 46, 147, 0) 22%),
    repeating-linear-gradient(to right, rgba(45, 240, 255, 0.85) 0 2px, transparent 2px 56px),
    repeating-linear-gradient(to bottom, rgba(45, 240, 255, 0.85) 0 2px, transparent 2px 26px);
  transform: perspective(230px) rotateX(62deg); transform-origin: top center;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 100%); }
.dc-t-1980s .dc-hero > .wrap::before { content: ""; display: block; position: absolute; right: calc(50% - 50vw + 3vw); bottom: -30px; width: min(300px, 40vw); height: min(150px, 20vw); z-index: -1; pointer-events: none;
  border-radius: 999px 999px 0 0; background: linear-gradient(to bottom, #fff7c2 0%, var(--yellow) 18%, var(--orange) 50%, var(--pink) 82%, var(--purple) 100%); box-shadow: 0 0 60px 8px rgba(255, 46, 147, 0.5);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 56%, #000 56% 64%, transparent 64% 71%, #000 71% 80%, transparent 80% 88%, #000 88% 100%);
  mask-image: linear-gradient(to bottom, #000 0 50%, transparent 50% 56%, #000 56% 64%, transparent 64% 71%, #000 71% 80%, transparent 80% 88%, #000 88% 100%); }
.dc-t-1980s .dc-hero h1 { font-size: clamp(3.2rem, 13vw, 7.5rem); line-height: 0.98; letter-spacing: -0.005em; font-style: italic; text-transform: uppercase; padding: 0 8px 10px 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 58%, var(--night) 58% 63%, transparent 63% 72%, var(--night) 72% 78%, transparent 78% 86%, var(--night) 86% 93%, transparent 93% 100%),
    linear-gradient(to bottom, #fff 0%, var(--yellow) 28%, var(--orange) 52%, var(--pink) 76%, var(--purple) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(255, 46, 147, 0.55)) drop-shadow(0 0 38px rgba(157, 77, 255, 0.4)); }
.dc-t-1980s .dc-hero h1 em { color: inherit; -webkit-text-fill-color: transparent; }
.dc-t-1980s .dc-hero .lead { color: var(--bone); max-width: 720px; }
.dc-t-1980s .dc-live { display: inline-flex; align-items: center; gap: 9px; color: var(--night); padding: 5px 14px; background: var(--yellow); border-radius: 3px; box-shadow: 0 0 16px rgba(255, 225, 74, 0.55); font-size: 0.78rem; font-weight: 700; }
.dc-t-1980s .dc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.dc-t-1980s .dc-widgets { gap: 14px; }
.dc-t-1980s .dc-widget { border: 2px solid var(--cyan); border-radius: 10px; background: linear-gradient(160deg, #2a1280, #1a0a52); box-shadow: 0 0 0 1px rgba(45, 240, 255, 0.3), 0 0 22px rgba(45, 240, 255, 0.35); }
.dc-t-1980s .dc-widget:nth-child(4n + 2) { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(255, 225, 74, 0.3), 0 0 22px rgba(255, 225, 74, 0.32); }
.dc-t-1980s .dc-widget:nth-child(4n + 3) { border-color: var(--pink); box-shadow: 0 0 0 1px rgba(255, 46, 147, 0.3), 0 0 22px rgba(255, 46, 147, 0.4); }
.dc-t-1980s .dc-widget:nth-child(4n + 4) { border-color: var(--mint); box-shadow: 0 0 0 1px rgba(56, 255, 176, 0.3), 0 0 22px rgba(56, 255, 176, 0.32); }
.dc-t-1980s .dc-widget b { background: linear-gradient(90deg, #fff, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.dc-t-1980s .dc-widget:nth-child(4n + 2) b { background-image: linear-gradient(90deg, #fff, var(--yellow)); }
.dc-t-1980s .dc-widget:nth-child(4n + 3) b { background-image: linear-gradient(90deg, #fff, #ff8fcb); }
.dc-t-1980s .dc-widget:nth-child(4n + 4) b { background-image: linear-gradient(90deg, #fff, var(--mint)); }
.dc-t-1980s .dc-widget span { color: var(--bone); }
.dc-t-1980s .dc-hero-roll { opacity: 0.92; transform: rotate(-3deg); }
.dc-t-1980s .dc-hero-roll img { border-radius: 4px; border: 3px solid var(--cyan); box-shadow: 0 0 20px rgba(45, 240, 255, 0.6), 0 12px 30px rgba(0, 0, 0, 0.5); filter: saturate(1.18) contrast(1.05); }
.dc-t-1980s .dc-hero-roll img:nth-child(3n + 2) { border-color: var(--pink); box-shadow: 0 0 20px rgba(255, 46, 147, 0.65), 0 12px 30px rgba(0, 0, 0, 0.5); }
.dc-t-1980s .dc-hero-roll img:nth-child(3n) { border-color: var(--yellow); box-shadow: 0 0 20px rgba(255, 225, 74, 0.6), 0 12px 30px rgba(0, 0, 0, 0.5); }
@media (min-width: 761px) {
  .dc-t-1980s .dc-hero-roll { -webkit-mask-image: linear-gradient(100deg, transparent 4%, #000 40%); mask-image: linear-gradient(100deg, transparent 4%, #000 40%); }
}
@media (max-width: 760px) {
  .dc-t-1980s .dc-hero { padding-top: 132px; padding-bottom: 160px; }
  .dc-t-1980s .dc-hero h1 { font-size: clamp(2.4rem, 13vw, 5rem); white-space: nowrap; }
  .dc-t-1980s .dc-hero-roll { opacity: 0.95; top: -18px; bottom: auto; right: -9vw; width: 118vw; gap: 8px; transform: rotate(-3deg);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); }
  .dc-t-1980s .dc-hero-roll img:nth-child(n + 4) { display: none; }
  .dc-t-1980s .dc-hero > .wrap::after { top: calc(100% + 100px); height: 120px; }
  .dc-t-1980s .dc-hero > .wrap::before { bottom: -100px; width: 190px; height: 95px; right: calc(50% - 50vw + 8vw); }
}

/* the sticky section bar: a neon strip */
.dc-t-1980s .tz-tabs { background: rgba(18, 7, 58, 0.92); border-bottom: 3px solid var(--pink); box-shadow: 0 6px 24px rgba(255, 46, 147, 0.25); }
.dc-t-1980s .tz-tabs a { color: var(--bone-dim); }
.dc-t-1980s .tz-tabs a:hover { color: #fff; }
.dc-t-1980s .tz-tabs a.is-on { color: var(--night); background: linear-gradient(90deg, var(--yellow), var(--orange)); box-shadow: 0 0 14px rgba(255, 138, 31, 0.6); }

/* stories: neon rings */
.dc-t-1980s .dc-ring { background: conic-gradient(from 200deg, var(--yellow), var(--orange), var(--pink), var(--purple), var(--cyan), var(--mint), var(--yellow)); }
.dc-t-1980s .dc-story[aria-selected="true"] .dc-ring { box-shadow: 0 0 0 3px #fff, 0 0 24px rgba(255, 46, 147, 0.8); transform: scale(1.06); }
.dc-t-1980s .dc-story[aria-selected="false"] .dc-ring { filter: saturate(0.75) brightness(0.8); }
.dc-t-1980s .dc-story b { color: var(--bone); }
.dc-t-1980s .dc-yh { font-style: italic; background: linear-gradient(to bottom, #fff 0%, var(--yellow) 40%, var(--pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 46, 147, 0.55)); }
.dc-t-1980s .dc-yhero .tz-thumb { border: 3px solid var(--cyan); border-radius: 6px; box-shadow: 0 0 26px rgba(45, 240, 255, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5); }

/* events: arcade score cards, each with its own neon edge */
.dc-t-1980s .dc-note { background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); border: 2px solid var(--cyan); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(45, 240, 255, 0.25), 0 0 20px rgba(45, 240, 255, 0.22); }
.dc-t-1980s .dc-note:nth-child(4n + 2) { border-color: var(--pink); box-shadow: 0 0 0 1px rgba(255, 46, 147, 0.25), 0 0 20px rgba(255, 46, 147, 0.26); }
.dc-t-1980s .dc-note:nth-child(4n + 3) { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(255, 225, 74, 0.25), 0 0 20px rgba(255, 225, 74, 0.2); }
.dc-t-1980s .dc-note:nth-child(4n + 4) { border-color: var(--mint); box-shadow: 0 0 0 1px rgba(56, 255, 176, 0.25), 0 0 20px rgba(56, 255, 176, 0.2); }
.dc-t-1980s .dc-note-app { color: var(--night); display: inline-flex; background: var(--cyan); padding: 1px 9px; border-radius: 3px; font-weight: 700; margin-bottom: 4px; }
.dc-t-1980s .dc-note:nth-child(4n + 2) .dc-note-app { background: var(--pink); }
.dc-t-1980s .dc-note:nth-child(4n + 3) .dc-note-app { background: var(--yellow); }
.dc-t-1980s .dc-note:nth-child(4n + 4) .dc-note-app { background: var(--mint); }
.dc-t-1980s .dc-note-app::before { display: none; }
.dc-t-1980s .dc-note b { color: #fff; }
.dc-t-1980s .dc-pop { background: rgba(255, 255, 255, 0.05); border: 2px dashed var(--line); border-radius: 8px; }
.dc-t-1980s .dc-pop-k { color: var(--night); background: var(--orange); display: inline-block; padding: 1px 9px; border-radius: 3px; }
.dc-t-1980s .dc-pop-words li { background: var(--yellow); border: 0; border-radius: 4px; box-shadow: 0 0 14px rgba(255, 225, 74, 0.4); }
.dc-t-1980s .dc-pop-words li:nth-child(even) { background: var(--cyan); box-shadow: 0 0 14px rgba(45, 240, 255, 0.4); }
.dc-t-1980s .dc-pop-words li b, .dc-t-1980s .dc-pop-words li small { color: var(--night); }
.dc-t-1980s .dc-song .dc-pop-k::before { content: "♫ "; content: "♫ " / ""; }
.dc-t-1980s .dc-movie .dc-pop-k::before { content: "▶ "; content: "▶ " / ""; }

/* rails, contacts, ticker, numbers, words */
.dc-t-1980s .dc-rcard, .dc-t-1980s .dc-contact, .dc-t-1980s .dc-tick, .dc-t-1980s .dc-nums li { background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)); border: 2px solid var(--cyan); border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(45, 240, 255, 0.22), 0 0 18px rgba(45, 240, 255, 0.2); }
.dc-t-1980s .dc-rcard:nth-child(3n + 2), .dc-t-1980s .dc-nums li:nth-child(3n + 2), .dc-t-1980s .dc-contact:nth-child(3n + 2) { border-color: var(--pink); box-shadow: 0 0 0 1px rgba(255, 46, 147, 0.22), 0 0 18px rgba(255, 46, 147, 0.24); }
.dc-t-1980s .dc-rcard:nth-child(3n), .dc-t-1980s .dc-nums li:nth-child(3n), .dc-t-1980s .dc-contact:nth-child(3n) { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(255, 225, 74, 0.22), 0 0 18px rgba(255, 225, 74, 0.18); }
.dc-t-1980s .dc-brought .dc-tag { background: var(--mint); color: var(--night); border-radius: 3px; }
.dc-t-1980s .dc-gone .dc-tag { background: var(--pink); color: var(--night); border-radius: 3px; }
.dc-t-1980s .dc-avatar .tz-thumb { border: 2px solid var(--yellow); box-shadow: 0 0 12px rgba(255, 225, 74, 0.5); }
.dc-t-1980s .dc-yrs { color: var(--yellow); font-weight: 700; }
.dc-t-1980s .dc-delta { border-radius: 3px; }
.dc-t-1980s .dc-delta.dc-up { background: var(--pink); color: var(--night); }
.dc-t-1980s .dc-delta.dc-down { background: var(--mint); color: var(--night); }
.dc-t-1980s .dc-nums b { color: var(--yellow); text-shadow: 0 0 14px rgba(255, 225, 74, 0.5); }
.dc-t-1980s .dc-slang li { background: rgba(255, 255, 255, 0.07); border: 2px solid var(--purple); border-radius: 8px; box-shadow: 0 0 16px rgba(157, 77, 255, 0.35); }
.dc-t-1980s .dc-slang b::before { content: "◆ "; content: "◆ " / ""; color: var(--pink); }

/* records, chat, call to action */
.dc-t-1980s .dc-files li { background: rgba(255, 255, 255, 0.07); border: 2px solid var(--purple); border-radius: 0 12px 8px 8px; box-shadow: 0 0 18px rgba(157, 77, 255, 0.3); }
.dc-t-1980s .dc-files li::before { background: var(--purple); border: 2px solid var(--purple); border-bottom: 0; }
.dc-t-1980s .dc-chat { background: rgba(255, 255, 255, 0.06); border: 2px solid var(--cyan); border-radius: 10px; box-shadow: 0 0 26px rgba(45, 240, 255, 0.28); }
.dc-t-1980s .dc-bub { background: rgba(255, 255, 255, 0.12); color: var(--bone); border: 0; border-radius: 10px; }
.dc-t-1980s .dc-bub:nth-child(even) { align-self: flex-end; background: linear-gradient(90deg, #b80f66, #5a22c8); color: #fff; }   /* white text needs 4.5:1: the darker pink and purple */
.dc-t-1980s .dc-typing { background: rgba(255, 255, 255, 0.12); border-radius: 10px; }
.dc-t-1980s .dc-cta { background: linear-gradient(120deg, rgba(255, 46, 147, 0.35), rgba(157, 77, 255, 0.35)); border: 2px solid var(--pink); border-radius: 10px; box-shadow: 0 0 30px rgba(255, 46, 147, 0.4); }
.dc-t-1980s .btn:not(.ghost), .dc-t-1980s .dc-cta .btn { background: linear-gradient(90deg, var(--yellow), var(--orange)); color: var(--night); border: 0; border-radius: 4px; font-weight: 700; box-shadow: 0 0 18px rgba(255, 138, 31, 0.55); }
.dc-t-1980s .btn:not(.ghost):hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(255, 138, 31, 0.8); }
.dc-t-1980s .dc-srcs a, .dc-t-1980s .dc-pcredits a { color: var(--cyan); text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.dc-t-1980s .dc-rcards, .dc-t-1980s .dc-ystrip, .dc-t-1980s .dc-stories { scrollbar-color: var(--pink) transparent; }
.dc-t-1980s :is(a, button, summary):focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.dc-t-1980s .dc-ring-empty { background: var(--night-2); color: #fff; }

@media (prefers-reduced-motion: reduce) { .dc-t-1980s .btn:not(.ghost):hover { transform: none; } }
@media (forced-colors: active) {
  .dc-t-1980s .dc-hero h1, .dc-t-1980s .dc-hero h1 em, .dc-t-1980s .dc-yh, .dc-t-1980s .dc-widget b { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; }
  .dc-t-1980s .dc-story[aria-selected="true"] .dc-ring { outline: 3px solid Highlight; outline-offset: 2px; }
  .dc-t-1980s .tz-tabs a.is-on { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
  .dc-t-1980s { background: #fff; color: #111; }
  .dc-t-1980s .dc-hero h1, .dc-t-1980s .dc-hero h1 em, .dc-t-1980s .dc-yh, .dc-t-1980s h2, .dc-t-1980s .dc-widget b { background: none; text-shadow: none; color: #111; -webkit-text-fill-color: #111; transform: none; filter: none; }
  .dc-t-1980s .dc-hero > .wrap::before, .dc-t-1980s .dc-hero > .wrap::after, .dc-t-1980s .tz-sec::before, .dc-t-1980s h2::after { display: none; }
  .dc-t-1980s .dc-hero-roll, .dc-t-1980s .tz-tabs, .dc-t-1980s .dc-typing, .dc-t-1980s .dc-rail-btns, .dc-t-1980s .dc-stories, .dc-t-1980s .dc-ynav,
  .dc-t-1980s .dc-more > summary, .dc-t-1980s .dc-fold > summary { display: none; }
  .dc-t-1980s .dc-ypanel { display: grid !important; }
  .dc-t-1980s .dc-rcards, .dc-t-1980s .dc-ystrip { flex-wrap: wrap; overflow: visible; }
  .dc-t-1980s .dc-rcard { flex: 1 1 220px; break-inside: avoid; }
  .dc-t-1980s * { box-shadow: none !important; color: #111 !important; background-image: none !important; background-color: transparent !important; }
  .dc-t-1980s .btn { border: 1px solid #111; }
}