/* Decade Files No. 04, the 1990s: the decade of the mall, the modem and the Trapper Keeper (Oct 19, 2026). Bold "Memphis" pop:
   thick black outlines, hard offset shadows instead of soft ones, confetti dots and zigzags, flat teal / hot pink / yellow / purple blocks,
   sticker-style dates, slightly tilted photos. All text is black or white on these blocks (contrast 6:1 or better). 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-1990s, so the shared case and decade
   styles pick up the theme. */
.dc-t-1990s {
  --ink: #fffdf3; --ink-2: #ffffff; --ink-3: #fff0b8; --bone: #111111; --bone-dim: #3b3b3b; --line: #111111;
  --amber: #c2006c; --amber-fill: #6a2cff; --amber-fill-hover: #5316e6; --on-amber: #ffffff;
  --tz-confirmed: #0b7a4b; --tz-refutes: #c0262d; --lead-shadow: none; --h1-shadow: none;
  --teal: #00d1c1; --pink: #ff3d9a; --yellow: #ffd60a; --purple: #6a2cff; --blue: #2d7dff; --black: #111111;
  --pop: 5px 5px 0 var(--black);
  color-scheme: light;
  color: var(--bone);
  background-color: #fffdf3;
  background-image:
    radial-gradient(circle at 12% 18%, var(--pink) 0 5px, transparent 5.5px),
    radial-gradient(circle at 78% 9%, var(--teal) 0 6px, transparent 6.5px),
    radial-gradient(circle at 44% 72%, var(--yellow) 0 6px, transparent 6.5px),
    radial-gradient(circle at 90% 60%, var(--purple) 0 5px, transparent 5.5px);
  background-size: 210px 230px, 260px 250px, 300px 280px, 340px 310px;
}
.dc-t-1990s .tz-sec, .dc-t-1990s .tz-head, .dc-t-1990s .dc-rec-sec { background: transparent; border-color: var(--black); }
.dc-t-1990s .tz-sec { padding: 64px 0; }
.dc-t-1990s .page-head::before, .dc-t-1990s .page-head::after { display: none; }
.dc-t-1990s .dc-hero, .dc-t-1990s .dc-hero * { text-shadow: none; }
:where(.dc-t-1990s) a { color: inherit; }
.dc-t-1990s h2 { color: var(--black); display: inline-block; background: var(--yellow); padding: 2px 12px 4px; border: 3px solid var(--black); box-shadow: var(--pop); transform: rotate(-1deg); }
.dc-t-1990s .kicker { color: #fff; background: var(--black); display: inline-block; padding: 3px 10px; margin-bottom: 14px; }
.dc-t-1990s .dc-ref { color: #5316e6; }
.dc-t-1990s .crumb a { color: var(--bone); }

/* hero: sticker title, tilted snapshots */
.dc-t-1990s .dc-hero { padding-top: 46px; padding-bottom: 54px; }
.dc-t-1990s .dc-hero h1 { font-size: clamp(3.2rem, 13vw, 7.5rem); line-height: 0.95; letter-spacing: -0.01em; color: var(--black);
  text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--teal); transform: skewX(-4deg); transform-origin: left bottom; padding-bottom: 8px; }
.dc-t-1990s .dc-hero h1 em { color: var(--black); -webkit-text-fill-color: var(--black); text-shadow: 4px 4px 0 var(--yellow), 8px 8px 0 var(--purple); }
.dc-t-1990s .dc-hero .lead { color: #222; max-width: 720px; }
.dc-t-1990s .dc-live { display: inline-flex; align-items: center; gap: 9px; color: var(--black); padding: 5px 14px; background: var(--teal); border: 3px solid var(--black); box-shadow: 3px 3px 0 var(--black); font-size: 0.78rem; font-weight: 700; }
.dc-t-1990s .dc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); border: 2px solid var(--black); }
.dc-t-1990s .dc-widgets { gap: 14px; }
.dc-t-1990s .dc-widget { border: 3px solid var(--black); border-radius: 0; box-shadow: var(--pop); background: #fff; }
.dc-t-1990s .dc-widget:nth-child(4n + 1) { background: var(--teal); }
.dc-t-1990s .dc-widget:nth-child(4n + 2) { background: var(--yellow); }
.dc-t-1990s .dc-widget:nth-child(4n + 3) { background: var(--pink); }
.dc-t-1990s .dc-widget:nth-child(4n + 4) { background: var(--purple); }
.dc-t-1990s .dc-widget:nth-child(4n + 4) b, .dc-t-1990s .dc-widget:nth-child(4n + 4) span, .dc-t-1990s .dc-widget:nth-child(4n + 4) .dc-ref { color: #fff; }
.dc-t-1990s .dc-widget b { color: var(--black); }
.dc-t-1990s .dc-widget span { color: var(--black); }
.dc-t-1990s .dc-widget .dc-ref { color: var(--black); }
.dc-t-1990s .dc-hero-roll { opacity: 0.95; transform: rotate(3deg); }
.dc-t-1990s .dc-hero-roll img { border-radius: 0; border: 4px solid var(--black); box-shadow: 6px 6px 0 var(--pink); filter: saturate(1.2) contrast(1.05); }
.dc-t-1990s .dc-hero-roll img:nth-child(3n + 2) { box-shadow: 6px 6px 0 var(--teal); }
.dc-t-1990s .dc-hero-roll img:nth-child(3n) { box-shadow: 6px 6px 0 var(--yellow); }
@media (min-width: 761px) {
  .dc-t-1990s .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-1990s .dc-hero { padding-top: 132px; }
  .dc-t-1990s .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-1990s .dc-hero-roll img:nth-child(n + 4) { display: none; }
}

/* the sticky section bar: a black strip with sticker tabs */
.dc-t-1990s .tz-tabs { background: var(--black); border-bottom: 3px solid var(--pink); }
.dc-t-1990s .tz-tabs a { color: #fff; }
.dc-t-1990s .tz-tabs a:hover { color: var(--yellow); }
.dc-t-1990s .tz-tabs a.is-on { color: var(--black); background: var(--yellow); box-shadow: 3px 3px 0 var(--pink); }

/* stories: thick-outlined circles with hard shadows */
.dc-t-1990s .dc-ring { background: var(--black); padding: 3px; box-shadow: 3px 3px 0 var(--teal); }
.dc-t-1990s .dc-ring img, .dc-t-1990s .dc-ring-empty { border-color: #fff; }
.dc-t-1990s .dc-story[aria-selected="true"] .dc-ring { background: var(--pink); box-shadow: 4px 4px 0 var(--black); transform: rotate(-4deg) scale(1.06); }
.dc-t-1990s .dc-story[aria-selected="false"] .dc-ring { filter: saturate(0.85); }
.dc-t-1990s .dc-story b { color: var(--black); }
.dc-t-1990s .dc-yh { color: var(--black); text-shadow: 3px 3px 0 var(--teal); }
.dc-t-1990s .dc-yhero .tz-thumb { border: 4px solid var(--black); border-radius: 0; box-shadow: 8px 8px 0 var(--pink); transform: rotate(-1.2deg); }

/* events as sticker cards, each with its own colour */
.dc-t-1990s .dc-note { background: #fff; border: 3px solid var(--black); border-radius: 0; box-shadow: 6px 6px 0 var(--teal); }
.dc-t-1990s .dc-note:nth-child(4n + 2) { box-shadow: 6px 6px 0 var(--pink); }
.dc-t-1990s .dc-note:nth-child(4n + 3) { box-shadow: 6px 6px 0 var(--yellow); }
.dc-t-1990s .dc-note:nth-child(4n + 4) { box-shadow: 6px 6px 0 var(--purple); }
.dc-t-1990s .dc-note-app { color: var(--black); display: inline-flex; background: var(--yellow); border: 2px solid var(--black); padding: 1px 8px; font-weight: 700; margin-bottom: 4px; }
.dc-t-1990s .dc-note-app::before { display: none; }
.dc-t-1990s .dc-note b { color: var(--black); }
.dc-t-1990s .dc-pop { background: #fff; border: 3px dashed var(--black); border-radius: 0; box-shadow: 5px 5px 0 var(--black); }
.dc-t-1990s .dc-pop-k { color: #fff; background: var(--black); display: inline-block; padding: 1px 8px; }
.dc-t-1990s .dc-pop-words li { background: var(--teal); border: 3px solid var(--black); border-radius: 0; box-shadow: 3px 3px 0 var(--black); }
.dc-t-1990s .dc-pop-words li:nth-child(even) { background: var(--pink); }
.dc-t-1990s .dc-pop-words li b, .dc-t-1990s .dc-pop-words li small { color: var(--black); }
.dc-t-1990s .dc-song .dc-pop-k::before { content: "♫ "; content: "♫ " / ""; }
.dc-t-1990s .dc-movie .dc-pop-k::before { content: "▶ "; content: "▶ " / ""; }

/* rails, contacts, ticker, numbers, words */
.dc-t-1990s .dc-rcard, .dc-t-1990s .dc-contact, .dc-t-1990s .dc-tick, .dc-t-1990s .dc-nums li { background: #fff; border: 3px solid var(--black); border-radius: 0; box-shadow: var(--pop); }
.dc-t-1990s .dc-rcard:nth-child(3n + 2), .dc-t-1990s .dc-nums li:nth-child(3n + 2) { box-shadow: 5px 5px 0 var(--teal); }
.dc-t-1990s .dc-rcard:nth-child(3n), .dc-t-1990s .dc-nums li:nth-child(3n) { box-shadow: 5px 5px 0 var(--pink); }
.dc-t-1990s .dc-brought .dc-tag { background: var(--teal); color: var(--black); border: 2px solid var(--black); border-radius: 0; }
.dc-t-1990s .dc-gone .dc-tag { background: var(--pink); color: var(--black); border: 2px solid var(--black); border-radius: 0; }
.dc-t-1990s .dc-avatar .tz-thumb { border: 3px solid var(--black); box-shadow: 3px 3px 0 var(--yellow); }
.dc-t-1990s .dc-yrs { color: var(--amber); font-weight: 700; }
.dc-t-1990s .dc-delta { border: 2px solid var(--black); border-radius: 0; }
.dc-t-1990s .dc-delta.dc-up { background: var(--pink); color: var(--black); }
.dc-t-1990s .dc-delta.dc-down { background: var(--teal); color: var(--black); }
.dc-t-1990s .dc-nums b { color: var(--black); background: linear-gradient(transparent 62%, var(--yellow) 62%); align-self: flex-start; }
.dc-t-1990s .dc-slang li { background: var(--ink-3); border: 3px solid var(--black); border-radius: 0; box-shadow: 4px 4px 0 var(--purple); }
.dc-t-1990s .dc-slang b::before { content: "★ "; content: "★ " / ""; color: var(--pink); }

/* records, chat, call to action */
.dc-t-1990s .dc-files li { background: #fff; border: 3px solid var(--black); border-radius: 0 12px 0 0; box-shadow: var(--pop); }
.dc-t-1990s .dc-files li::before { background: var(--yellow); border: 3px solid var(--black); border-bottom: 0; }
.dc-t-1990s .dc-chat { background: #fff; border: 3px solid var(--black); border-radius: 0; box-shadow: 8px 8px 0 var(--teal); }
.dc-t-1990s .dc-bub { background: var(--ink-3); color: var(--black); border: 2px solid var(--black); border-radius: 0; }
.dc-t-1990s .dc-bub:nth-child(even) { align-self: flex-end; background: var(--pink); color: var(--black); }
.dc-t-1990s .dc-typing { background: var(--ink-3); border: 2px solid var(--black); border-radius: 0; }
.dc-t-1990s .dc-cta { background: var(--yellow); border: 3px solid var(--black); border-left: 10px solid var(--purple); border-radius: 0; box-shadow: 6px 6px 0 var(--black); }
.dc-t-1990s .btn:not(.ghost), .dc-t-1990s .dc-cta .btn { background: var(--purple); color: #fff; border: 3px solid var(--black); border-radius: 0; box-shadow: 4px 4px 0 var(--black); }
.dc-t-1990s .btn:not(.ghost):hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--black); }
.dc-t-1990s .dc-srcs a, .dc-t-1990s .dc-pcredits a { color: var(--black); text-decoration-color: var(--pink); text-decoration-thickness: 2px; }
.dc-t-1990s .dc-rcards, .dc-t-1990s .dc-ystrip, .dc-t-1990s .dc-stories { scrollbar-color: var(--black) transparent; }
.dc-t-1990s :is(a, button, summary):focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.dc-t-1990s .dc-ring-empty { background: #fff; color: var(--black); }

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