/* Decade Files No. 02, the 2010s: the decade of the smartphone feed (Oct 15, 2026). Bright and flat: Rose Quartz and Serenity
   (Pantone's colours of the year for 2016), sunset-gradient story rings, tweet-style cards, square photos with a warm vintage
   filter, hashtags. 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-2010s, so the shared case and decade styles pick up the theme. */
.dc-t-2010s {
  --ink: #fffafb; --ink-2: #ffffff; --ink-3: #f6eef3; --bone: #262626; --bone-dim: #554e5a; --line: rgba(38, 38, 38, 0.12);
  --amber: #b8236a; --amber-fill: #d62976; --amber-fill-hover: #bf1f68; --on-amber: #ffffff;
  --tz-confirmed: #12865e; --tz-refutes: #c2334d; --lead-shadow: none; --h1-shadow: none;
  --rose: #f7cac9; --serenity: #92a8d1; --sun: #fa7e1e; --gold: #feda75; --violet: #962fbf; --blue: #4f5bd5; --sky: #1d9bf0;
  --grad: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
  --grad-text: linear-gradient(45deg, #d62976 0%, #962fbf 55%, #4f5bd5 100%);   /* gold and orange are too faint for text */
  color-scheme: light;
  color: var(--bone);
  background: linear-gradient(180deg, #fff6f7 0%, #f7f4fb 50%, #f3f6fc 100%);
}
.dc-t-2010s .tz-sec, .dc-t-2010s .tz-head, .dc-t-2010s .dc-rec-sec { background: transparent; border-color: var(--line); }
.dc-t-2010s .tz-sec { padding: 64px 0; }
.dc-t-2010s .page-head::before, .dc-t-2010s .page-head::after { display: none; }
.dc-t-2010s .dc-hero, .dc-t-2010s .dc-hero * { text-shadow: none; }
:where(.dc-t-2010s) a { color: inherit; }
.dc-t-2010s h2 { color: var(--bone); }
.dc-t-2010s .kicker { color: var(--amber); }
.dc-t-2010s .dc-ref { color: var(--blue); }
.dc-t-2010s .crumb a { color: var(--bone-dim); }

/* hero: a profile grid of square photos with a warm 2012 filter */
.dc-t-2010s .dc-hero { padding-top: 46px; padding-bottom: 54px;
  background: radial-gradient(900px 520px at 90% -60px, rgba(247, 202, 201, 0.85), transparent 62%), radial-gradient(800px 600px at -10% 70%, rgba(146, 168, 209, 0.35), transparent 62%); }
.dc-t-2010s .dc-hero h1 { font-size: clamp(3.2rem, 13vw, 7.5rem); line-height: 0.92; letter-spacing: -0.01em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-t-2010s .dc-hero h1 em { color: inherit; -webkit-text-fill-color: transparent; }
.dc-t-2010s .dc-hero .lead { color: #4a4350; }
.dc-t-2010s .dc-live { display: inline-flex; align-items: center; gap: 9px; color: var(--bone); padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); font-size: 0.78rem; box-shadow: 0 2px 6px rgba(38, 38, 38, 0.06); }
.dc-t-2010s .dc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.dc-t-2010s .dc-widget { border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgba(38, 38, 38, 0.06), 0 6px 18px rgba(150, 47, 191, 0.08);
  border-top: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.dc-t-2010s .dc-widget b { color: var(--bone); }
.dc-t-2010s .dc-hero-roll { opacity: 0.55; transform: rotate(4deg); filter: sepia(0.25) saturate(1.35) contrast(1.05) brightness(1.05); }
.dc-t-2010s .dc-hero-roll img { border-radius: 4px; border: 6px solid #fff; box-shadow: 0 8px 24px rgba(38, 38, 38, 0.18); }
@media (min-width: 761px) {
  .dc-t-2010s .dc-hero-roll { -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 55%); mask-image: linear-gradient(100deg, transparent 8%, #000 55%); }
}
@media (max-width: 760px) {
  .dc-t-2010s .dc-hero { padding-top: 132px; }
  .dc-t-2010s .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-2010s .dc-hero-roll img:nth-child(n + 4) { display: none; }
}

/* the sticky section bar */
.dc-t-2010s .tz-tabs { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--line); }
.dc-t-2010s .tz-tabs a { color: var(--bone-dim); }
.dc-t-2010s .tz-tabs a:hover { color: var(--bone); }
.dc-t-2010s .tz-tabs a.is-on { color: #fff; background: linear-gradient(45deg, #c13584, #833ab4); }

/* stories: the 2016 sunset ring */
.dc-t-2010s .dc-ring { background: var(--grad); }
.dc-t-2010s .dc-ring img, .dc-t-2010s .dc-ring-empty { border-color: #fff; }
.dc-t-2010s .dc-story[aria-selected="true"] .dc-ring { box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(214, 41, 118, 0.35); }
.dc-t-2010s .dc-story[aria-selected="false"] .dc-ring { filter: saturate(0.55); }
.dc-t-2010s .dc-yh { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-t-2010s .dc-yhero .tz-thumb { border: 8px solid #fff; border-radius: 6px; box-shadow: 0 12px 30px rgba(38, 38, 38, 0.18); }

/* events as tweets */
.dc-t-2010s .dc-note { background: #fff; border-color: rgba(38, 38, 38, 0.1); border-radius: 16px; box-shadow: 0 1px 2px rgba(38, 38, 38, 0.05); padding-left: 60px; position: relative; }
.dc-t-2010s .dc-note::before { content: ""; position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--amber); }
.dc-t-2010s .dc-note::after { content: "SF"; content: "SF" / ""; position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  font-family: "Archivo Black", sans-serif; font-size: 0.75rem; color: #fff; }
.dc-t-2010s .dc-note-app { color: var(--bone-dim); display: block; }
.dc-t-2010s .dc-note-app::before { display: none; }
.dc-t-2010s .dc-note-app::after { content: " · Decade Files"; content: " · Decade Files" / ""; text-transform: none; letter-spacing: 0; }
.dc-t-2010s .dc-note b { color: #0f1419; }
.dc-t-2010s .dc-pop { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.dc-t-2010s .dc-pop-k { color: var(--amber); }
.dc-t-2010s .dc-pop-words li { background: var(--ink-3); }
.dc-t-2010s .dc-song .dc-pop-k::before { content: "♪ "; content: "♪ " / ""; }

/* rails, contacts, ticker, numbers, words */
.dc-t-2010s .dc-rcard, .dc-t-2010s .dc-contact, .dc-t-2010s .dc-tick, .dc-t-2010s .dc-nums li { background: #fff; border: 0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(38, 38, 38, 0.06), 0 8px 22px rgba(146, 168, 209, 0.22); }
.dc-t-2010s .dc-brought .dc-tag { background: #12865e; color: #fff; }
.dc-t-2010s .dc-gone .dc-tag { background: #c2334d; color: #fff; }
.dc-t-2010s .dc-avatar .tz-thumb { border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.dc-t-2010s .dc-yrs { color: var(--amber); }
.dc-t-2010s .dc-delta.dc-up { background: rgba(194, 51, 77, 0.12); color: #a3243b; }
.dc-t-2010s .dc-delta.dc-down { background: rgba(18, 134, 94, 0.12); color: #0d6b4a; }
.dc-t-2010s .dc-nums b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; align-self: flex-start; }
.dc-t-2010s .dc-slang li { background: #fff; border: 1px solid var(--line); }
.dc-t-2010s .dc-slang b::before { content: "#"; content: "#" / ""; color: #0c6fb5; margin-right: 1px; }

/* records, chat, call to action */
.dc-t-2010s .dc-files li, .dc-t-2010s .dc-files li::before { background: #fff; }
.dc-t-2010s .dc-chat { background: #fff; border-color: var(--line); box-shadow: 0 8px 24px rgba(146, 168, 209, 0.25); }
.dc-t-2010s .dc-bub { background: #e9e9eb; color: #111; }
.dc-t-2010s .dc-bub:nth-child(even) { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: #006ee6; color: #fff; }
.dc-t-2010s .dc-typing { background: #e9e9eb; }
.dc-t-2010s .dc-cta { background: #fff; border-color: var(--line); border-left-color: var(--amber-fill); border-radius: 16px; }
.dc-t-2010s .dc-srcs a, .dc-t-2010s .dc-pcredits a { color: var(--bone); text-decoration-color: rgba(214, 41, 118, 0.45); }
.dc-t-2010s .dc-rcards, .dc-t-2010s .dc-ystrip, .dc-t-2010s .dc-stories { scrollbar-color: rgba(38, 38, 38, 0.25) transparent; }
.dc-t-2010s :is(a, button, summary):focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (forced-colors: active) {
  .dc-t-2010s .dc-hero h1, .dc-t-2010s .dc-hero h1 em, .dc-t-2010s .dc-yh, .dc-t-2010s .dc-nums b { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .dc-t-2010s .dc-story[aria-selected="true"] .dc-ring { outline: 3px solid Highlight; outline-offset: 2px; }
  .dc-t-2010s .tz-tabs a.is-on { outline: 2px solid Highlight; outline-offset: -2px; }
}
@media print {
  .dc-t-2010s { background: #fff; }
  .dc-t-2010s .dc-hero h1, .dc-t-2010s .dc-hero h1 em, .dc-t-2010s .dc-yh, .dc-t-2010s .dc-nums b { background: none; color: #111; -webkit-text-fill-color: #111; }
  .dc-t-2010s .dc-hero-roll, .dc-t-2010s .tz-tabs, .dc-t-2010s .dc-typing, .dc-t-2010s .dc-rail-btns, .dc-t-2010s .dc-stories, .dc-t-2010s .dc-ynav,
  .dc-t-2010s .dc-more > summary, .dc-t-2010s .dc-fold > summary { display: none; }
  .dc-t-2010s .dc-ypanel { display: grid !important; }
  .dc-t-2010s .dc-rcards, .dc-t-2010s .dc-ystrip { flex-wrap: wrap; overflow: visible; }
  .dc-t-2010s .dc-rcard { flex: 1 1 220px; break-inside: avoid; }
  .dc-t-2010s * { box-shadow: none !important; }
  .dc-t-2010s .dc-bub, .dc-t-2010s .dc-bub:nth-child(even), .dc-t-2010s .dc-tag, .dc-t-2010s .dc-delta { background: none; color: #111; border: 1px solid #999; }
  .dc-t-2010s .btn { background: none; color: #111; border: 1px solid #111; }
  .dc-t-2010s .dc-note::before, .dc-t-2010s .dc-note::after { display: none; }
  .dc-t-2010s .dc-note { padding-left: 14px; }
}
.dc-t-2010s .dc-ring-empty { background: #fff; color: #d62976; }