/* ==========================================================================
   The Elbert Dispatch — justinelbert.com
   Newsprint for the day edition, a warm dark sheet for the night edition,
   and each Build Desk insert printed in its own product's colors.
   ========================================================================== */

:root {
  --paper: #f3eee3;
  --paper-deep: #e8e1d0;
  --paper-edge: #d9d0bc;
  --ink: #1b1813;
  --ink-soft: #463f35;
  --ink-faint: #6f6657;
  --rule: #1b1813;
  --red: #a8231a;
  --red-ink: #fff;
  --red-fill: #a8231a;
  --invert-bg: #1b1813;
  --invert-ink: #f3eee3;
  --panel-bg: #1b1813;
  --panel-ink: #f3eee3;
  --panel-rule: rgba(243, 238, 227, .22);
  --env-bg: #fbf6ea;
  --env-ink: #1b1813;
  --env-muted: #6c675f;
  --env-mark: #f3d35f;
  --env-post: rgba(27, 24, 19, .55);
  --release-bg: #fbfaf5;
  --release-ink: #1d1c1a;
  --release-muted: #6c675f;
  --release-bar: #1d1c1a;
  --release-red: #a8231a;
  --release-blend: multiply;
  --media-filter: none;
  --shadow: 0 1px 0 rgba(27, 24, 19, .08), 0 12px 30px -16px rgba(27, 24, 19, .35);
  --grain-opacity: .5;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --black: "UnifrakturMaguntia", "Old English Text MT", "Newsreader", serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --rounded: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;

  --gutter: clamp(16px, 3vw, 28px);
  --max: 1280px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121110;
    --paper-deep: #1b1917;
    --paper-edge: #2c2925;
    --ink: #ece5d5;
    --ink-soft: #c5bca9;
    --ink-faint: #9a917f;
    --rule: #6f675b;
    --red: #ff7a6b;
    --red-ink: #fff;
    --red-fill: #9b3128;
    --invert-bg: #37312a;
    --invert-ink: #f1e9d8;
    --panel-bg: #1d1a17;
    --panel-ink: #e6dfcf;
    --panel-rule: rgba(230, 223, 207, .16);
    --env-bg: #1f1c19;
    --env-ink: #e6dfcf;
    --env-muted: #a59c8a;
    --env-mark: #5e4d1a;
    --env-post: rgba(230, 223, 207, .4);
    --release-bg: #1f1c19;
    --release-ink: #e3dccd;
    --release-muted: #a09785;
    --release-bar: #c9c1b0;
    --release-red: #ff7a6b;
    --release-blend: normal;
    --media-filter: brightness(.78) contrast(1.04);
    --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 16px 34px -18px rgba(0, 0, 0, .9);
    --grain-opacity: .25;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121110;
  --paper-deep: #1b1917;
  --paper-edge: #2c2925;
  --ink: #ece5d5;
  --ink-soft: #c5bca9;
  --ink-faint: #9a917f;
  --rule: #6f675b;
  --red: #ff7a6b;
  --red-ink: #fff;
  --red-fill: #9b3128;
  --invert-bg: #37312a;
  --invert-ink: #f1e9d8;
  --panel-bg: #1d1a17;
  --panel-ink: #e6dfcf;
  --panel-rule: rgba(230, 223, 207, .16);
  --env-bg: #1f1c19;
  --env-ink: #e6dfcf;
  --env-muted: #a59c8a;
  --env-mark: #5e4d1a;
  --env-post: rgba(230, 223, 207, .4);
  --release-bg: #1f1c19;
  --release-ink: #e3dccd;
  --release-muted: #a09785;
  --release-bar: #c9c1b0;
  --release-red: #ff7a6b;
  --release-blend: normal;
  --media-filter: brightness(.78) contrast(1.04);
  --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 16px 34px -18px rgba(0, 0, 0, .9);
  --grain-opacity: .25;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}
/* Paper grain, drawn once as an SVG noise tile. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 .9em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: var(--sans); font-weight: 700;
  transition: top .2s;
}
.skip:focus { top: 16px; }

.sheet { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Shared type bits */
.kicker {
  font-family: var(--sans); font-stretch: 80%; font-weight: 800; text-transform: uppercase;
  letter-spacing: .14em; font-size: .72rem; color: var(--red); margin-bottom: .6rem;
}
.kicker-sep { color: var(--ink-faint); margin: 0 .3em; }

.btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .6em 1.15em;
  border-radius: 999px; border: 2px solid transparent; font-family: var(--sans); font-weight: 800;
  font-size: .92rem; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--invert-bg); color: var(--invert-ink); }

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead { padding-top: 14px; }
.topline {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--sans); font-stretch: 85%; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.topline b { color: var(--ink); }
.topline-date { font-weight: 700; color: var(--ink); }

.flag { display: flex; justify-content: center; padding: 18px 0 10px; }
.nameplate {
  font-family: var(--black); font-weight: 400; line-height: .95; text-align: center;
  font-size: clamp(2.7rem, 8.4vw, 6.6rem); letter-spacing: .005em; white-space: nowrap;
}
.nameplate a { text-decoration: none; display: inline-block; }
.nameplate a .ink-letter { display: inline-block; opacity: 0; transform: translateY(.08em); filter: blur(3px); animation: inkIn .6s ease forwards; }
@keyframes inkIn { to { opacity: 1; transform: none; filter: none; } }

.motto span { white-space: nowrap; }
.motto {
  text-align: center; font-style: italic; font-size: .98rem; color: var(--ink-soft);
  border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: 7px 0 8px; margin: 0;
}

.sections {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--paper); border-bottom: 3px solid var(--rule); transition: background-color .5s ease, box-shadow .2s;
}
.sections.is-stuck { box-shadow: 0 8px 18px -14px rgba(0, 0, 0, .5); }
.sections ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sections ul::-webkit-scrollbar { display: none; }
.sections a {
  display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 12px 11px; text-decoration: none;
  font-family: var(--sans); font-stretch: 80%; font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .08em;
}
.sections a:hover, .sections a.is-current { background: var(--invert-bg); color: var(--invert-ink); }

.edition-toggle {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--ink); border-radius: 999px;
  font-family: var(--sans); font-stretch: 80%; font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
}
.edition-toggle:hover { background: var(--invert-bg); color: var(--invert-ink); }
.edition-icon {
  width: 16px; height: 16px; border-radius: 50%; background: currentColor;
  -webkit-mask: radial-gradient(circle at 70% 30%, transparent 44%, #000 46%); mask: radial-gradient(circle at 70% 30%, transparent 44%, #000 46%);
}
:root[data-theme="dark"] .edition-icon { -webkit-mask: none; mask: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px currentColor; transform: scale(.7); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .edition-icon { -webkit-mask: none; mask: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px currentColor; transform: scale(.7); }
}

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker {
  display: flex; align-items: stretch; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-stretch: 85%;
  font-size: .86rem; background: var(--paper);
}
.ticker-label {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--red-fill); color: var(--red-ink);
  font-weight: 900; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem;
}
.ticker-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ticker-window { flex: 1; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker-track { display: flex; width: max-content; animation: crawl 70s linear infinite; }
.ticker-track li { padding: 9px 26px; white-space: nowrap; position: relative; }
.ticker-track li::after { content: "\25C6"; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); font-size: .6rem; color: var(--red); }
.ticker-track b { text-transform: uppercase; letter-spacing: .06em; margin-right: .5em; }
.ticker:hover .ticker-track, .ticker.is-paused .ticker-track { animation-play-state: paused; }
@keyframes crawl { to { transform: translateX(-50%); } }
.ticker-pause {
  flex: none; width: 44px; border: 0; border-left: 1px solid var(--rule); background: transparent; cursor: pointer; display: grid; place-items: center;
}
.ticker-pause span { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.ticker.is-paused .ticker-pause span { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ==========================================================================
   Front page
   ========================================================================== */
.front {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: 0; padding: 26px 0 36px;
  border-bottom: 3px double var(--rule);
}
.rail { padding: 0 22px; }
.rail-left { padding-left: 0; }
.rail-right { padding-right: 0; }
.lead { padding: 0 26px; min-width: 0; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
@media (min-width: 761px) and (min-height: 800px) {
  .rail-left { position: sticky; top: 64px; align-self: start; }
}
@media (min-width: 1141px) and (min-height: 800px) {
  .rail-right { position: sticky; top: 64px; align-self: start; }
}

.box { margin-bottom: 26px; }
.box-title {
  font-family: var(--sans); font-stretch: 80%; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
  border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 6px 0; margin-bottom: 10px;
}
.inside-list li + li { border-top: 1px dotted var(--ink-faint); }
.inside-list a { display: block; position: relative; padding: 7px 0 7px 16px; text-decoration: none; font-size: .92rem; line-height: 1.3; }
.inside-list a::before { content: "\203A"; position: absolute; left: 2px; top: 5px; font-family: var(--sans); font-weight: 900; color: var(--red); }
.inside-list a:hover { color: var(--red); }

.stat { padding: 9px 0; border-bottom: 1px dotted var(--ink-faint); }
.stat dt { font-family: var(--serif); font-weight: 800; font-size: 2.05rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.stat dd { margin: 4px 0 0; font-family: var(--sans); font-stretch: 85%; font-size: .8rem; color: var(--ink-soft); line-height: 1.3; }

.lead-headline {
  font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: 1.02; letter-spacing: -.018em;
  font-variation-settings: "opsz" 72; text-wrap: balance; margin-bottom: 14px;
}
.lead-dek { font-size: 1.22rem; font-style: italic; color: var(--ink-soft); line-height: 1.4; text-wrap: pretty; margin-bottom: 20px; }
.halftone { margin: 0 0 20px; }
.halftone canvas { width: 100%; height: auto; aspect-ratio: 800 / 440; background: var(--paper); border: 1px solid var(--rule); cursor: zoom-in; touch-action: pan-y; }
@media (hover: hover) and (pointer: fine) { .halftone canvas { cursor: none; } }
.halftone figcaption { font-family: var(--sans); font-stretch: 85%; font-size: .78rem; color: var(--ink-soft); padding-top: 7px; line-height: 1.4; }
.halftone figcaption b { color: var(--ink); letter-spacing: .06em; margin-right: .4em; }

.columns { column-count: 2; column-gap: 26px; column-rule: 1px solid var(--paper-edge); }
.columns p { font-size: 1.02rem; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
.dropcap::first-letter { float: left; font-weight: 800; font-size: 4.1em; line-height: .82; padding: .06em .08em 0 0; color: var(--ink); }
.dropcap .dateline { font-family: var(--sans); font-stretch: 85%; font-weight: 900; font-size: .82em; letter-spacing: .04em; }
.dropcap .dateline::first-letter { font-size: 4.9em; line-height: .78; float: left; padding: .02em .06em 0 0; font-family: var(--serif); font-stretch: 100%; }


.teaser { background: var(--panel-bg); color: var(--panel-ink); padding: 14px 16px 16px; border: 1px solid var(--panel-rule); }
.teaser .box-title { border-color: var(--panel-ink); color: var(--panel-ink); }
.teaser-head { font-family: var(--black); font-size: 2rem; line-height: 1; margin: 6px 0 6px; }
.teaser-dek { font-style: italic; font-size: .95rem; opacity: .85; }
.teaser-list li { border-top: 1px solid var(--panel-rule); }
.teaser-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: .9rem; }
.teaser-list a:hover { text-decoration: underline; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.dot-dm { background: linear-gradient(135deg, #0095e0, #1f55aa 60%, #008c26); }
.dot-fr { background: linear-gradient(90deg, #3D2A57 50%, #F4A15D 50%); }
.dot-gq { background: linear-gradient(135deg, #3F6F66, #9C7A35); }
.dot-cm { background: #555; box-shadow: inset 0 0 0 3px #111, 0 0 0 2px rgba(255, 255, 255, .25); }
.dot-bt { background: radial-gradient(circle, #fff3c4, #ffb547 55%, #05070a 60%); }

.briefs article { padding: 10px 0; border-bottom: 1px dotted var(--ink-faint); }
.briefs h3 { font-size: 1.05rem; font-weight: 800; margin-bottom: 3px; }
.briefs p { font-size: .93rem; margin: 0; color: var(--ink-soft); line-height: 1.45; }

/* ==========================================================================
   Section fronts
   ========================================================================== */
.section { padding: 46px 0 40px; border-bottom: 3px double var(--rule); }
.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: end;
  border-bottom: 1px solid var(--rule); padding-bottom: 18px; margin-bottom: 30px;
}
.section-title { font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.02em; font-variation-settings: "opsz" 72; }
.section-dek { margin: 10px 0 0; max-width: 62ch; font-style: italic; color: var(--ink-soft); font-size: 1.08rem; }
.section-note {
  margin: 0; max-width: 220px; font-family: var(--sans); font-stretch: 85%; font-size: .76rem; color: var(--ink-soft);
  border: 1px solid var(--rule); padding: 8px 10px; line-height: 1.35;
}

/* ==========================================================================
   Inserts (The Build Desk)
   ========================================================================== */
.insert {
  position: relative; margin: 0 0 34px; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow);
  transform-origin: 50% 0;
}
.insert-tab {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; font-family: var(--mono); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .08em; border-bottom: 1.5px dashed currentColor; opacity: .85;
}
.insert-pair { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: stretch; margin-bottom: 34px; }
.insert-pair .insert { margin-bottom: 0; }

/* ---------- DistrictMapper ---------- */
.insert-dm {
  --dm-blue: #1f55aa; --dm-sky: #0095e0; --dm-green: #008c26; --dm-cyan: #7dd8ff;
  font-family: "Manrope", system-ui, sans-serif; color: #fff;
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(0, 149, 224, .45), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(0, 140, 38, .28), transparent 60%),
    linear-gradient(160deg, #0a1a3a, #10306a 55%, #0b2350);
}
.insert-dm .insert-tab { color: var(--dm-cyan); }
.dm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 34px; padding: 30px 32px 34px; align-items: center; }
.dm-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #cdeeff;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); border-radius: 999px; padding: 6px 13px; margin-bottom: 16px;
}
.dm-title { display: flex; align-items: center; gap: 12px; font-size: 1.95rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.dm-title img { background: #fff; border-radius: 9px; padding: 5px 6px; width: 42px; height: 46px; }
.dm-headline { font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 16px; }
.dm-headline span { background: linear-gradient(90deg, #7dd8ff, #5fb3ff 45%, #7ee3a0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dm-copy > p:not([class]) { color: #d7e3f5; font-size: 1rem; line-height: 1.6; }
.dm-copy em { color: #fff; }
.dm-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.dm-tools li { font-size: .78rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.dm-fine { font-size: .82rem; color: #a9bddb; }
.btn-dm { background: #fff; color: #0b2350; margin-top: 4px; }
.btn-dm:hover { background: var(--dm-cyan); }

.dm-map-frame { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .2); }
.dm-map-bar { display: flex; align-items: center; gap: 6px; padding: 9px 10px; background: #f6f8fb; border-bottom: 1px solid #e3e8ef; color: #0f1b2d; }
.dm-chip { font-size: .72rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; border: 1px solid #d5dde8; background: #fff; white-space: nowrap; }
.dm-chip.is-on { border-color: #1f55aa; color: #1f55aa; box-shadow: inset 0 0 0 1px #1f55aa; }
.dm-random {
  margin-left: auto; font-family: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; min-height: 32px;
  padding: 5px 11px; border-radius: 999px; border: 0; background: #1f55aa; color: #fff;
}
.dm-random:hover { background: #163f80; }
.dm-map { width: 100%; height: auto; cursor: crosshair; background: #eef2f5; touch-action: manipulation; }
.dm-zone { transition: fill-opacity .25s, stroke-width .25s; }
.dm-zone.is-hit { fill-opacity: .42 !important; stroke-width: 2.5; }
.dm-school-label { font: 700 9.5px "Manrope", sans-serif; fill: #0f1b2d; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.dm-pin { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.dm-result { margin-top: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 12px 14px; min-height: 92px; }
.dm-result-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--dm-cyan); margin: 0 0 4px; }
.dm-result-main { font-size: 1.12rem; font-weight: 800; margin: 0 0 2px; }
.dm-result-sub { font-size: .84rem; color: #b8c9e2; margin: 0; }
.dm-result-sub b { color: #7ee3a0; }

/* ---------- framily ---------- */
.insert-fr {
  --fi: #3D2A57; --fa: #F4A15D; --fg: #FBF4EA;
  font-family: var(--rounded); background: var(--fg); color: var(--fi);
  transition: background-color .45s ease, color .45s ease;
}
.insert-fr[data-mood="brunch"] { --fi: #124E5C; --fa: #FFC947; --fg: #EEF6F3; }
.insert-fr[data-mood="nightout"] { --fi: #1A1D3B; --fa: #C4A7F5; --fg: #F1EEF9; }
.insert-fr[data-mood="backyard"] { --fi: #2F5A3A; --fa: #F28BA0; --fg: #F3F6EC; }
.fr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; padding: 30px 32px 34px; align-items: center; }
.fr-wordmark { width: min(290px, 70%); height: auto; margin: 0 0 10px -6px; }
.fr-ink { stroke: var(--fi); transition: stroke .45s; }
.fr-chip { stroke: var(--fa); transition: stroke .45s; }
.fr-sub { font-size: 1.5rem; font-weight: 900; line-height: 1.15; margin-bottom: 14px; letter-spacing: -.01em; }
.fr-copy > p:not([class]) { font-size: 1.02rem; font-weight: 600; line-height: 1.6; }
.fr-copy b { background: var(--fa); padding: 0 .2em; border-radius: 4px; }
.fr-moods { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; padding: 0; border: 0; min-width: 0; }
.fr-moods input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.fr-moods label {
  position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; padding: 6px 13px 6px 7px;
  border-radius: 999px; border: 2px solid color-mix(in srgb, var(--fi) 20%, transparent); background: rgba(255, 255, 255, .6);
  font-family: var(--rounded); font-weight: 800; font-size: .86rem; color: var(--fi); transition: border-color .2s, background-color .2s;
}
.fr-moods label:has(input:checked) { border-color: var(--fi); background: #fff; }
.fr-moods label:has(input:focus-visible) { outline: 3px solid var(--fi); outline-offset: 2px; }
.fr-moods i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(180deg, transparent 38%, var(--a) 38% 62%, transparent 62%), var(--i); }
.btn-fr { background: var(--fi); color: var(--fg); }
.btn-fr:hover { background: color-mix(in srgb, var(--fi) 85%, #000); }

.fr-demo { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 18px; align-items: center; }
.fr-card { background: #fff; border-radius: 22px; padding: 16px 16px 14px; box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--fi) 70%, transparent); }
.fr-card-title { font-weight: 900; font-size: 1.1rem; margin: 0; }
.fr-card-hint { font-size: .8rem; font-weight: 600; opacity: .75; margin: 0 0 12px; }
.fr-week { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 5px; align-items: center; }
.fr-daylabel { font-size: .68rem; font-weight: 800; text-align: center; text-transform: uppercase; opacity: .7; }
.fr-daylabel.is-best { opacity: 1; color: var(--fi); }
.fr-person { display: flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 800; }
.fr-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fa); color: var(--fi); font-size: .7rem; font-weight: 900; transition: background-color .45s; }
.fr-cell {
  height: 30px; border-radius: 8px; border: 0; padding: 0; background: color-mix(in srgb, var(--fi) 8%, #fff);
  transition: background-color .2s, transform .15s; position: relative;
}
.fr-cell.is-free { background: color-mix(in srgb, var(--fa) 55%, #fff); }
.fr-cell.is-you { cursor: pointer; outline: 2px dashed color-mix(in srgb, var(--fi) 30%, transparent); outline-offset: -2px; }
.fr-cell.is-you:hover { transform: scale(1.06); }
.fr-cell.is-you.is-free { outline-color: var(--fi); }
.fr-cell.is-best { background: var(--fa); box-shadow: 0 0 0 2px var(--fi); }
.fr-best {
  margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--fa) 22%, #fff); min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fr-best-main { font-weight: 900; font-size: 1rem; margin: 0; }
.fr-best-sub { font-size: .8rem; font-weight: 700; margin: 0; opacity: .8; }
.fr-best-count { font-weight: 900; font-size: 1.3rem; }
.fr-phone { margin: 0; border-radius: 30px; padding: 7px; background: #111; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .7); transform: rotate(3deg); }
.fr-phone img { border-radius: 24px; width: 100%; height: auto; filter: var(--media-filter); }

/* framily at night: the mood's ink becomes the surface and its ground the text. */
:root[data-theme="dark"] .insert-fr { background: color-mix(in srgb, var(--fi) 72%, #000); color: var(--fg); }
:root[data-theme="dark"] .fr-ink { stroke: var(--fg); }
:root[data-theme="dark"] .fr-copy b { color: var(--fi); }
:root[data-theme="dark"] .fr-moods label { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 25%, transparent); }
:root[data-theme="dark"] .fr-moods label:has(input:checked) { background: color-mix(in srgb, var(--fg) 12%, transparent); border-color: var(--fg); }
:root[data-theme="dark"] .fr-moods label:has(input:focus-visible) { outline-color: var(--fg); }
:root[data-theme="dark"] .btn-fr { background: var(--fa); color: var(--fi); }
:root[data-theme="dark"] .btn-fr:hover { background: color-mix(in srgb, var(--fa) 85%, #fff); }
:root[data-theme="dark"] .fr-card { background: color-mix(in srgb, var(--fi) 45%, #000); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .fr-cell { background: color-mix(in srgb, var(--fg) 10%, transparent); }
:root[data-theme="dark"] .fr-cell.is-free { background: color-mix(in srgb, var(--fa) 45%, transparent); }
:root[data-theme="dark"] .fr-cell.is-best { background: var(--fa); box-shadow: 0 0 0 2px var(--fg); }
:root[data-theme="dark"] .fr-cell.is-you { outline-color: color-mix(in srgb, var(--fg) 35%, transparent); }
:root[data-theme="dark"] .fr-cell.is-you.is-free { outline-color: var(--fg); }
:root[data-theme="dark"] .fr-daylabel.is-best { color: var(--fa); }
:root[data-theme="dark"] .fr-best { background: color-mix(in srgb, var(--fa) 18%, transparent); }
/* DistrictMapper's sample map, printed as a night map. */
:root[data-theme="dark"] .btn-dm { background: var(--dm-blue); color: #fff; }
:root[data-theme="dark"] .btn-dm:hover { background: var(--dm-cyan); color: #0b2350; }
:root[data-theme="dark"] .dm-map-frame { background: #0f1a2b; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(125, 216, 255, .18); }
:root[data-theme="dark"] .dm-map-bar { background: #13213a; border-bottom-color: #22314d; color: #dce6f5; }
:root[data-theme="dark"] .dm-chip { background: #182843; border-color: #2a3c5c; color: #c7d4e8; }
:root[data-theme="dark"] .dm-chip.is-on { border-color: var(--dm-cyan); color: var(--dm-cyan); box-shadow: inset 0 0 0 1px var(--dm-cyan); }
:root[data-theme="dark"] .dm-random { background: #2c6fd6; }
:root[data-theme="dark"] .dm-random:hover { background: #3a80ea; }
:root[data-theme="dark"] .dm-map,
:root[data-theme="dark"] .dm-land { background: #101c2e; fill: #101c2e; }
:root[data-theme="dark"] .dm-water { fill: #1b3657; }
:root[data-theme="dark"] .dm-park { fill: #15301f; }
:root[data-theme="dark"] .dm-road-edge { stroke: #0b1422; }
:root[data-theme="dark"] .dm-road { stroke: #2a3a55; }
:root[data-theme="dark"] .dm-road-main { stroke: #6e5c2a; }
:root[data-theme="dark"] .dm-zone { fill-opacity: .2; }
:root[data-theme="dark"] .dm-boundary { stroke: #9fb4d4; }
:root[data-theme="dark"] .dm-school-dot { fill: #101c2e; }
:root[data-theme="dark"] .dm-school-label { fill: #e3ebf7; stroke: #101c2e; }
:root[data-theme="dark"] .cm-stamp { mix-blend-mode: var(--release-blend); }
:root[data-theme="dark"] .btn-cm { background: transparent; color: var(--release-ink); box-shadow: inset 0 0 0 1.5px var(--release-muted); }
:root[data-theme="dark"] .btn-cm:hover { background: var(--release-red); color: var(--release-bg); box-shadow: none; }

/* ---------- Grounding Quest ---------- */
.insert-gq {
  --gq-bg: #F4F1EA; --gq-surface: #FFFFFF; --gq-text: #1F2A2E; --gq-soft: #4E5A5E; --gq-accent: #3F6F66; --gq-gold: #9C7A35; --gq-card: #EDE6D8;
  font-family: var(--rounded); background: var(--gq-bg); color: var(--gq-text); padding: 0 0 26px;
}
:root[data-theme="dark"] .insert-gq { --gq-bg: #1C1F22; --gq-surface: #262A2E; --gq-text: #EEF0EE; --gq-soft: #B5BDBC; --gq-accent: #7FB3A6; --gq-gold: #D8B878; --gq-card: #262A2E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .insert-gq { --gq-bg: #1C1F22; --gq-surface: #262A2E; --gq-text: #EEF0EE; --gq-soft: #B5BDBC; --gq-accent: #7FB3A6; --gq-gold: #D8B878; --gq-card: #262A2E; } }
.insert-gq > *:not(.insert-tab) { margin-left: 28px; margin-right: 28px; }
.insert-gq .insert-tab { color: var(--gq-accent); margin-bottom: 22px; }
.gq-eyebrow { font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--gq-gold); margin-bottom: 4px; }
.gq-title { font-size: 2.1rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 8px; }
.gq-tag { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--gq-accent); margin-bottom: 12px; }
.insert-gq > p:not([class]) { font-weight: 600; font-size: .98rem; color: var(--gq-soft); line-height: 1.6; }
.gq-quest { background: var(--gq-surface); border-radius: 20px; padding: 16px 16px 10px; margin-top: 16px; margin-bottom: 16px; }
.gq-quest-hint { font-size: .86rem; font-weight: 700; color: var(--gq-soft); margin-bottom: 10px; }
.gq-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--gq-text) 8%, transparent); }
.gq-row:first-child { border-top: 0; }
.gq-row.is-done .gq-label { color: var(--gq-accent); }
.gq-label { font-weight: 800; font-size: .95rem; transition: color .3s; }
.gq-label small { display: block; font-weight: 600; font-size: .76rem; color: var(--gq-soft); }
.gq-dots { display: flex; gap: 7px; }
.gq-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--gq-gold); background: transparent; cursor: pointer; padding: 0;
  transition: background-color .3s, transform .3s cubic-bezier(.3, 1.8, .5, 1);
}
.gq-dot:hover { transform: scale(1.12); }
.gq-dot[aria-pressed="true"] { background: var(--gq-gold); transform: scale(1); }
.gq-dot[aria-pressed="true"]::after { content: ""; display: block; width: 8px; height: 8px; margin: auto; border-radius: 50%; background: var(--gq-surface); }
.gq-done { min-height: 1.6em; font-weight: 800; color: var(--gq-accent); margin: 8px 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gq-done button { font-family: var(--rounded); font-weight: 800; font-size: .8rem; background: transparent; border: 1.5px solid var(--gq-accent); color: var(--gq-accent); border-radius: 999px; padding: 4px 11px; cursor: pointer; min-height: 32px; }
.gq-breath { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--gq-accent); margin-right: 8px; vertical-align: -2px; animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.6); opacity: .5; } }
.gq-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.gq-rules li { font-size: .78rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--gq-card); color: var(--gq-text); }

/* ---------- Calmer (embargoed) ---------- */
.insert-cm { background: var(--release-bg); color: var(--release-ink); font-family: var(--mono); }
.insert-cm .insert-tab { color: var(--release-red); }
.cm-release { position: relative; padding: 24px 28px 28px; font-size: .9rem; line-height: 1.65; }
.cm-for { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #6c675f; margin-bottom: 2px; }
.cm-embargo { font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--release-red); }
.cm-title { font-family: var(--serif); font-size: 3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin: 14px 0 14px; }
.cm-dateline b { font-weight: 700; }
.redact {
  background: var(--release-bar); color: var(--release-bar); border-radius: 1px; cursor: help; position: relative; letter-spacing: -.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .2s;
}
.redact::after {
  content: attr(data-reveal); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px);
  background: #a8231a; color: #fff; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.redact:hover::after, .redact:focus::after { opacity: 1; transform: translateX(-50%); }
.cm-end { text-align: center; letter-spacing: .3em; margin: 16px 0 18px; }
.cm-stamp {
  position: absolute; top: 58px; right: 20px; transform: rotate(-12deg); pointer-events: none;
  border: 4px double var(--release-red); color: var(--release-red); border-radius: 8px; padding: 6px 14px;
  font-family: var(--sans); font-stretch: 75%; font-weight: 900; font-size: 1.7rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .88; mix-blend-mode: var(--release-blend);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.7'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
}
.insert-cm.is-in .cm-stamp { animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
@keyframes stamp { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: .88; } }
.btn-cm { background: var(--release-ink); color: var(--release-bg); font-family: var(--mono); font-weight: 700; border-radius: 3px; }
.btn-cm:hover { background: var(--release-red); color: var(--release-bg); }

/* ---------- Beacon Torch ---------- */
.insert-bt { background: #05070a; color: #d9dde3; font-family: var(--sans); }
.insert-bt .insert-tab { color: #ffcf73; font-family: var(--mono); }
.bt-dark { position: relative; --x: 50%; --y: calc(100% - 62px); --r: 190px; min-height: 420px; overflow: hidden; }
.bt-stars {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 72%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 46% 30%, #fff, transparent), radial-gradient(1px 1px at 63% 84%, #fff, transparent),
    radial-gradient(1px 1px at 78% 22%, #ffe9b0, transparent), radial-gradient(1.5px 1.5px at 90% 60%, #fff, transparent),
    radial-gradient(1px 1px at 8% 88%, #fff, transparent), radial-gradient(1px 1px at 52% 52%, #9fb3ff, transparent),
    radial-gradient(1px 1px at 36% 8%, #fff, transparent), radial-gradient(1px 1px at 70% 46%, #fff, transparent);
}
.bt-dark::before { /* the beam itself */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle var(--r) at var(--x) var(--y), rgba(255, 226, 150, .22), rgba(255, 190, 90, .08) 45%, transparent 70%);
  transition: background .08s linear;
}
.bt-hidden {
  position: absolute; left: 0; right: 0; bottom: 0; height: 124px; z-index: 0; pointer-events: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 .45em; padding: 0 24px; font-family: var(--serif); font-weight: 800; font-size: clamp(1.4rem, 3.6vw, 2.6rem); line-height: 1.05;
  color: #ffe5a3; text-align: center; letter-spacing: -.01em; border-top: 1px dashed rgba(255, 207, 115, .18);
  -webkit-mask: radial-gradient(circle calc(var(--r) * .9) at var(--x) var(--by, 62px), #000 25%, transparent 70%);
  mask: radial-gradient(circle calc(var(--r) * .9) at var(--x) var(--by, 62px), #000 25%, transparent 70%);
}
.bt-hidden-big { font-style: italic; color: #fff4d6; }
.bt-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 30px; padding: 30px 32px 150px; align-items: center; }
.bt-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #ffcf73; }
.bt-title { font-family: var(--serif); font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; margin-bottom: 8px; text-shadow: 0 0 28px rgba(255, 200, 100, .35); }
.bt-sub { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: #ffe3a1; }
.bt-copy > p:not([class]) { font-size: .98rem; line-height: 1.6; color: #b9c0cb; }
.bt-copy b { color: #fff; }
.bt-demos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bt-panel { margin: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 14px; background: rgba(12, 15, 20, .72); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bt-panel figcaption { font-size: .78rem; color: #9aa3b0; line-height: 1.4; align-self: stretch; }
.bt-panel figcaption b { display: block; color: #fff; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; margin-bottom: 2px; }
#btQr { width: 150px; height: 150px; image-rendering: pixelated; border-radius: 6px; background: #fff; box-shadow: 0 0 40px rgba(255, 255, 255, .18); }
:root[data-theme="dark"] #btQr { filter: brightness(.82); box-shadow: 0 0 34px rgba(255, 255, 255, .1); }
.bt-meter { margin: 0; font-family: var(--mono); font-size: .72rem; color: #9aa3b0; }
.bt-meter span { color: #ffcf73; font-weight: 700; }
.bt-lamp {
  width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a3d44, #16181c 70%);
  border: 3px solid #2a2d33; transition: background .04s, box-shadow .04s;
}
.bt-lamp.is-on { background: radial-gradient(circle at 45% 40%, #fff, #fff3c4 35%, #ffb547 75%); box-shadow: 0 0 22px 6px rgba(255, 196, 87, .5); border-color: #ffe0a0; }
.bt-form { display: flex; gap: 6px; width: 100%; }
.bt-form input {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #0b0e13; color: #fff; border: 1px solid #333a45; border-radius: 8px; padding: 8px 10px;
}
.btn-bt { background: #ffcf73; color: #1b1406; border-radius: 8px; min-height: 40px; padding: .4em .9em; font-size: .8rem; }
.btn-bt:hover { background: #ffe0a0; }
.bt-bits { display: flex; flex-wrap: wrap; gap: 2px; width: 100%; min-height: 12px; }
.bt-bits i { width: 6px; height: 10px; border-radius: 1px; background: #262b33; }
.bt-bits i.one { background: #6b5a33; }
.bt-bits i.is-now { background: #ffcf73; box-shadow: 0 0 8px #ffcf73; }
.bt-bits i.is-sent.one { background: #b8923f; }
.bt-status { margin: 0; font-family: var(--mono); font-size: .72rem; color: #9aa3b0; align-self: stretch; }

/* ==========================================================================
   C: The Record
   ========================================================================== */
.timeline { position: relative; display: grid; gap: 22px; padding-left: 0; }
.timeline::before { content: ""; position: absolute; left: 132px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(var(--ink) 0 6px, transparent 6px 11px); }
.clip { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 34px; align-items: start; position: relative; }
.clip::before { content: ""; position: absolute; left: 126px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.clip:first-child::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent); }
.clip-year { margin: 6px 0 0; text-align: right; font-family: var(--sans); font-stretch: 80%; font-weight: 900; font-size: .9rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.clip-paper {
  background: color-mix(in srgb, var(--paper) 55%, #fff); border: 1px solid var(--paper-edge); padding: 16px 20px 14px; max-width: 760px;
  box-shadow: var(--shadow); position: relative;
  clip-path: polygon(0 3px, 3% 0, 7% 2px, 12% 0, 18% 3px, 25% 0, 33% 2px, 41% 0, 50% 3px, 58% 0, 66% 2px, 74% 0, 82% 3px, 89% 0, 95% 2px, 100% 0, 100% calc(100% - 2px), 94% 100%, 87% calc(100% - 3px), 79% 100%, 70% calc(100% - 2px), 61% 100%, 52% calc(100% - 3px), 44% 100%, 35% calc(100% - 2px), 27% 100%, 18% calc(100% - 3px), 10% 100%, 4% calc(100% - 2px), 0 100%);
}
:root[data-theme="dark"] .clip-paper { background: var(--paper-deep); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .clip-paper { background: var(--paper-deep); } }
.clip:nth-child(odd) .clip-paper { transform: rotate(-.35deg); }
.clip:nth-child(even) .clip-paper { transform: rotate(.3deg); }
.clip-kicker { font-family: var(--sans); font-stretch: 80%; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--red); margin-bottom: 4px; }
.clip h3 { font-size: 1.45rem; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin-bottom: 4px; text-wrap: balance; }
.clip ul { padding-left: 1.1em; list-style: square; }
.clip li { font-size: .98rem; margin-bottom: 3px; }
.clip li::marker { color: var(--red); }

@media (min-width: 1141px) {
  .timeline { gap: 0; }
  .timeline::before { left: 50%; margin-left: -1px; }
  .clip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 120px; }
  .clip + .clip { margin-top: -52px; }
  .clip:first-child + .clip { margin-top: -12px; }
  .clip::before { display: none; }
  .clip-year {
    position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 2; margin: 0; text-align: center; white-space: nowrap;
    background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px 11px; font-size: .82rem;
  }
  .clip:first-child .clip-year { background: var(--red-fill); border-color: var(--red-fill); color: var(--red-ink); }
  .clip-paper { max-width: none; grid-row: 1; }
  .clip:nth-child(odd) .clip-paper { grid-column: 1; }
  .clip:nth-child(even) .clip-paper { grid-column: 2; }
}

/* ==========================================================================
   C: Speaking and Honors
   ========================================================================== */
.upcoming {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 18px; padding: 10px 14px;
  border: 1px solid var(--rule); background: var(--paper-deep);
}
.upcoming-label {
  font-family: var(--sans); font-stretch: 80%; font-weight: 900; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red-ink); background: var(--red-fill); padding: 3px 8px; border-radius: 2px;
}
.upcoming-when { font-family: var(--sans); font-stretch: 85%; font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.upcoming-org { font-family: var(--sans); font-stretch: 85%; font-weight: 800; font-size: .88rem; color: var(--red); }
.upcoming-title { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
/* Session review box */
.review {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 34px; align-items: start;
  border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 18px 0 20px; margin-bottom: 28px;
}
.review-title { font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; margin-bottom: 6px; }
.review-sub { font-style: italic; color: var(--ink-soft); margin-bottom: 14px; }
.review-rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-family: var(--sans); font-stretch: 85%; }
.review-stars { font-size: 1.35rem; letter-spacing: 3px; color: var(--ink); }
.review-score { font-size: 1rem; }
.review-score b { font-family: var(--serif); font-size: 1.6rem; font-weight: 800; }
.review-count { font-size: .82rem; color: var(--ink-soft); }
.review-quotes blockquote { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--red); }
.review-quotes blockquote + blockquote { margin-top: 14px; }
.review-quotes blockquote p { margin: 0; font-size: 1.12rem; font-style: italic; line-height: 1.4; }
.review-note { margin: 14px 0 0; font-family: var(--sans); font-stretch: 85%; font-size: .78rem; color: var(--ink-faint); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter {
  cursor: pointer; min-height: 38px; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent;
  font-family: var(--sans); font-stretch: 85%; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
}
.filter span { font-weight: 600; opacity: .65; margin-left: 4px; }
.filter.is-on, .filter:hover { background: var(--invert-bg); color: var(--invert-ink); border-color: var(--invert-bg); }
.listings { column-count: 2; column-gap: 34px; column-rule: 1px solid var(--rule); }
.listings li {
  break-inside: avoid; display: grid; grid-template-columns: 48px 92px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dotted var(--ink-faint); transition: opacity .3s;
}
.listings li.is-hidden { display: none; }
.l-year { font-family: var(--sans); font-stretch: 80%; font-weight: 900; font-size: .88rem; font-variant-numeric: tabular-nums; }
.l-org { font-family: var(--sans); font-stretch: 80%; font-weight: 800; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.l-title { font-size: 1rem; line-height: 1.35; }

.honors { margin-top: 44px; }
.honors-title { font-weight: 800; font-size: 1.8rem; letter-spacing: -.01em; border-top: 3px solid var(--rule); padding-top: 10px; margin-bottom: 20px; }
.seals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
.seal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.seal-disc {
  --seal: var(--ink); position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--seal); color: var(--seal); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.seal-red .seal-disc { --seal: var(--red); }
.seal:hover .seal-disc { transform: rotate(-14deg) scale(1.04); }
.seal-disc::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1.5px dashed var(--seal); opacity: .7; }
.seal-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal-disc text { font-family: var(--sans); font-stretch: 80%; font-weight: 800; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; fill: currentColor; }
.seal b { font-family: var(--serif); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -.02em; display: flex; flex-direction: column; align-items: center; }
.seal b small { font-family: var(--sans); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }
.seal > span { font-family: var(--sans); font-stretch: 85%; font-size: .82rem; line-height: 1.3; color: var(--ink-soft); max-width: 190px; }
/* Before JS decorates a seal, it is just the text; keep it tidy. */
.seal:not(.is-ready) b { width: 132px; height: 132px; border-radius: 50%; border: 2px solid var(--ink); justify-content: center; }

/* Awards */
.awards { margin-top: 48px; }
.awards-dek { font-style: italic; color: var(--ink-soft); max-width: 62ch; margin-bottom: 16px; }
.award-tally { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 18px; font-family: var(--sans); font-stretch: 85%; font-size: .9rem; }
.award-tally li { display: flex; align-items: center; gap: 8px; }
.award-tally b { font-family: var(--serif); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.medal {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--sans); font-weight: 900; font-size: .72rem; color: #1b1813;
  box-shadow: inset 0 0 0 1.5px rgba(27, 24, 19, .35), 0 1px 2px rgba(0, 0, 0, .25);
}
.medal-platinum { background: radial-gradient(circle at 35% 30%, #fff, #dfe3e8 45%, #9aa3ad); }
.medal-crystal { background: radial-gradient(circle at 35% 30%, #fff, #cfeaf5 45%, #7fb6cc); }
.medal-gold { background: radial-gradient(circle at 35% 30%, #fff4c4, #e0b64a 50%, #a8761c); }
.medal-silver { background: radial-gradient(circle at 35% 30%, #fff, #c9ced4 50%, #8a9098); }
.medal-bronze { background: radial-gradient(circle at 35% 30%, #ffe0c2, #c98b55 50%, #8a5427); }
.award-years { border-bottom: 1px solid var(--rule); }
.award-year { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-top: 1px solid var(--rule); }
.award-year-label { font-family: var(--serif); font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.award-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; }
.award { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.award p { margin: 0; }
.award-title { font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.award-best {
  display: inline-block; margin-left: 8px; vertical-align: 2px; font-family: var(--sans); font-stretch: 80%; font-weight: 900;
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); border: 1.5px solid var(--red); border-radius: 3px; padding: 1px 5px;
}
.award-meta { font-family: var(--sans); font-stretch: 85%; font-size: .82rem; color: var(--ink-soft); margin-top: 2px !important; }
.award-meta b { color: var(--ink); }
.award-team { font-size: .86rem; font-style: italic; color: var(--ink-faint); margin-top: 2px !important; }
.award.is-hidden, .award-year.is-hidden { display: none; }

/* ==========================================================================
   E: Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.envelope {
  position: relative; color: var(--env-ink); padding: 40px 36px 42px; border-radius: 4px; box-shadow: var(--shadow);
  background:
    repeating-linear-gradient(135deg, var(--red-fill) 0 14px, var(--env-bg) 14px 24px, #1f55aa 24px 38px, var(--env-bg) 38px 48px) top / 100% 10px no-repeat,
    repeating-linear-gradient(135deg, var(--red-fill) 0 14px, var(--env-bg) 14px 24px, #1f55aa 24px 38px, var(--env-bg) 38px 48px) bottom / 100% 10px no-repeat,
    var(--env-bg);
}
.env-to { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--env-muted); margin-top: 8px; }
.env-lead { font-size: 1.28rem; line-height: 1.4; max-width: 34ch; }
.env-mail {
  display: inline-block; margin-top: 8px; color: var(--env-ink); font-family: var(--serif); font-weight: 800; font-size: clamp(1.3rem, 3.4vw, 2.3rem); letter-spacing: -.01em;
  text-decoration: none; background: linear-gradient(transparent 62%, var(--env-mark) 62%); padding: 0 4px; overflow-wrap: anywhere;
}
.env-mail:hover { background: linear-gradient(transparent 20%, var(--env-mark) 20%); }
.env-stamp {
  position: absolute; top: 24px; right: 26px; width: 74px; height: 88px; background: #1f55aa; color: #fbf6ea; display: grid; place-content: center; text-align: center;
  font-family: var(--black); font-size: 2rem; line-height: 1; border: 4px solid var(--env-bg); outline: 3px dotted var(--env-bg); outline-offset: -1px;
  box-shadow: 0 0 0 6px var(--env-bg), 0 0 0 7px var(--env-post), 2px 3px 8px 6px rgba(27, 24, 19, .12); transform: rotate(3deg);
}
.env-stamp small { font-family: var(--sans); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.env-post {
  position: absolute; top: 40px; right: 96px; width: 92px; height: 92px; border-radius: 50%; border: 2px solid var(--env-post); display: grid; place-content: center; text-align: center;
  font-family: var(--mono); font-size: .6rem; font-weight: 700; line-height: 1.5; color: var(--env-post); transform: rotate(-14deg); pointer-events: none;
}
.env-post::after { content: ""; position: absolute; left: 80%; top: 30%; width: 90px; height: 36px; background: repeating-linear-gradient(transparent 0 5px, var(--env-post) 5px 7px); }
.contact-side { border-top: 3px solid var(--rule); padding-top: 10px; }
.contact-side h3 { font-family: var(--sans); font-stretch: 80%; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-bottom: 6px; }
.contact-side p { font-style: italic; margin: 12px 0 0; }
.contact-side li { padding: 6px 0; border-bottom: 1px dotted var(--ink-faint); }
.contact-side a { font-weight: 600; }

.colophon { text-align: center; padding: 34px 0 44px; font-family: var(--sans); font-stretch: 85%; font-size: .82rem; color: var(--ink-soft); }
.colophon-name { font-family: var(--black); font-size: 2.2rem; color: var(--ink); margin-bottom: 6px; }
.colophon p { margin-bottom: 6px; }

/* ==========================================================================
   Motion
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(26px) rotate(-.4deg); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker-track li[aria-hidden="true"] { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1140px) {
  .front { grid-template-columns: 210px minmax(0, 1fr); }
  .rail-right { grid-column: 1 / -1; padding: 26px 0 0; margin-top: 26px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .rail-right > * { margin-bottom: 0; }
  .lead { padding-right: 0; border-right: 0; }
  .fr-demo { grid-template-columns: minmax(0, 1fr) 140px; }
  .seals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1060px) {
  .edition-label { display: none; }
  .sections a { padding: 12px 8px; }
  .edition-toggle { padding: 6px 10px; }
}
@media (max-width: 980px) {
  .dm-grid, .fr-grid, .bt-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .insert-pair { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .section-note { grid-column: 1 / -1; max-width: none; }
  .listings { column-count: 1; }
  .review { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .award-list { grid-template-columns: minmax(0, 1fr); }
  .seals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .front { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
  .lead { padding: 0; order: -1; border: 0; }
  .rail-left { padding: 26px 0 0; margin-top: 26px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .rail-right { grid-template-columns: minmax(0, 1fr); }
  .columns { column-count: 1; }
  .topline-price { display: none; }
  .sections a { padding: 11px 9px; font-size: .78rem; }
  .edition-label { display: none; }
  .sections ul { -webkit-mask: linear-gradient(90deg, #000 82%, transparent); mask: linear-gradient(90deg, #000 82%, transparent); }
  .edition-toggle { padding: 6px 10px; }
  .dm-grid, .fr-grid { padding: 22px 18px 24px; }
  .bt-grid { padding: 22px 18px 140px; }
  .insert-gq > *:not(.insert-tab) { margin-left: 18px; margin-right: 18px; }
  .cm-release { padding: 20px 18px 22px; }
  .cm-stamp { top: 46px; right: 10px; font-size: 1.25rem; }
  .fr-demo { grid-template-columns: minmax(0, 1fr); }
  .fr-phone { display: none; }
  .fr-best { flex-wrap: wrap; }
  .gq-dot { width: 23px; height: 23px; }
  .gq-dots { gap: 5px; }
  .section-head { align-items: start; }
  .bt-demos { grid-template-columns: minmax(0, 1fr); }
  .timeline::before { left: 7px; }
  .award-year { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .award-year-label { font-size: 1.5rem; }
  .clip { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-left: 30px; }
  .clip::before { left: 1px; top: 4px; }
  .clip-year { text-align: left; margin: 0; }
  .envelope { padding: 30px 20px 26px; }
  .env-stamp { width: 56px; height: 66px; font-size: 1.5rem; top: 18px; right: 16px; }
  .env-post { display: none; }
  .env-to, .env-lead { max-width: calc(100% - 70px); }
}
@media (max-width: 480px) {
  .rail-left { grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: 14px; }
  .seal-disc { width: 112px; height: 112px; }
  .seal:not(.is-ready) b { width: 112px; height: 112px; }
  .fr-week { grid-template-columns: 34px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .fr-person span:not(.fr-avatar) { display: none; }
  .dm-map-bar .dm-chip:not(.is-on) { display: none; }
  .dm-random { white-space: nowrap; }
}

/* ==========================================================================
   Print: yes, you can print this newspaper.
   ========================================================================== */
@media print {
  body::before, .ticker, .sections, .edition-toggle, .dm-demo, .fr-demo, .gq-quest, .bt-demos, .filters, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .insert { box-shadow: none; border: 1px solid #000; break-inside: avoid; }
  .insert-dm, .insert-bt { background: #fff !important; color: #000 !important; }
  .insert-dm *, .insert-bt * { color: #000 !important; text-shadow: none !important; }
  .bt-hidden, .bt-stars, .bt-dark::before { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}