/* ============================================================
   The Many Lies of Donald — styles
   ============================================================ */

:root{
  --ink:#0b0b0d;
  --ink-2:#131317;
  --ink-3:#1b1b21;
  --line:rgba(244,239,230,.14);
  --line-soft:rgba(244,239,230,.07);
  --paper:#f4efe6;
  --paper-2:#cfc8b8;
  --dim:#8d8779;
  --red:#e8322a;
  --red-2:#ff4a40;
  --amber:#d9a13c;
  --green:#7ea75a;
  --grey:#7a7568;
  --maxw:1180px;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(232,50,42,.10), transparent 70%),
    radial-gradient(700px 420px at 92% 6%, rgba(244,239,230,.05), transparent 70%);
  background-repeat:no-repeat;
}

img,svg{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--red); color:#fff}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--paper); color:var(--ink); padding:.6rem 1rem; font-family:var(--mono); font-size:.8rem;
}
.skip:focus{left:1rem; top:1rem}

/* ── top bar ─────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2.4rem);
  background:rgba(11,11,13,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
}
.topbar .mark{font-weight:600; color:var(--red); white-space:nowrap}
.topbar nav{display:flex; gap:1.25rem; margin-left:auto; overflow-x:auto; scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{
  color:var(--dim); text-decoration:none; white-space:nowrap;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.topbar nav a:hover,.topbar nav a:focus-visible{color:var(--paper); border-bottom-color:var(--red)}
.topbar .stamp{color:var(--dim); white-space:nowrap; padding-left:1.25rem; border-left:1px solid var(--line)}
@media (max-width:820px){ .topbar .stamp{display:none} .topbar{gap:.8rem} }

/* ── layout ──────────────────────────────────────────── */
main{max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2.4rem)}
.band{padding:clamp(3.5rem,7vw,6.5rem) 0; border-top:1px solid var(--line-soft); scroll-margin-top:3.2rem}

.head{display:grid; grid-template-columns:auto 1fr; gap:clamp(1rem,3vw,2.4rem); align-items:start; margin-bottom:clamp(1.8rem,4vw,3rem)}
.head .num{
  font-family:var(--mono); font-size:.72rem; color:var(--red);
  letter-spacing:.1em; padding-top:.65rem; border-top:2px solid var(--red); min-width:2.2rem;
}
h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.85rem,4.4vw,3.1rem); line-height:1.04;
  letter-spacing:-.02em; margin:0 0 .55rem; text-wrap:balance;
}
.sub{color:var(--paper-2); max-width:66ch; margin:0; font-size:clamp(.95rem,1.6vw,1.05rem); text-wrap:pretty}

/* ── hero ────────────────────────────────────────────── */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3rem)}
.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); margin:0 0 1.6rem;
}
h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(3rem,11.5vw,8.4rem); line-height:.86;
  letter-spacing:-.035em; margin:0 0 1.6rem;
}
h1 em{font-style:italic; color:var(--red); display:inline-block}
.dek{
  font-size:clamp(1.02rem,1.9vw,1.22rem); color:var(--paper-2);
  max-width:56ch; margin:0 0 clamp(2rem,4vw,3rem); text-wrap:pretty;
}
.dek{position:relative}

.pullquote{
  margin:0 0 clamp(2rem,5vw,3.4rem); padding:clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,1.6rem);
  border-left:3px solid var(--red); background:linear-gradient(90deg, rgba(232,50,42,.09), transparent 65%);
}
.pullquote blockquote{
  margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,3.4vw,2.1rem); line-height:1.24; letter-spacing:-.01em;
}
.pullquote figcaption{
  margin-top:.9rem; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dim);
}

/* ── scoreboard ──────────────────────────────────────── */
.scoreboard{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:720px){ .scoreboard{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--ink); padding:clamp(1rem,2.6vw,1.5rem)}
.stat .v{
  font-family:var(--mono); font-size:clamp(1.9rem,5vw,2.9rem); font-weight:600;
  line-height:1; letter-spacing:-.03em; display:block;
}
.stat .l{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); margin-top:.55rem; display:block;
}
.stat.is-broken .v{color:var(--red)}
.stat.is-partial .v{color:var(--amber)}
.stat.is-kept .v{color:var(--green)}
.scoreboard-note{
  margin:.9rem 0 0; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.04em; color:var(--dim);
}

/* ── rotation rail ───────────────────────────────────── */
.rail{list-style:none; margin:0 0 2rem; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.rail li{
  background:var(--ink); padding:clamp(.9rem,2.2vw,1.35rem) clamp(.9rem,2.4vw,1.5rem);
  display:grid; grid-template-columns:8.5rem 1fr; gap:.4rem clamp(1rem,2.5vw,2rem); align-items:baseline;
  transition:background .2s;
}
.rail li:hover{background:var(--ink-3)}
.rail .when{font-family:var(--mono); font-size:.72rem; color:var(--red); letter-spacing:.04em; white-space:nowrap}
.rail .what{font-family:var(--serif); font-size:clamp(1.05rem,2.3vw,1.35rem); line-height:1.2}
.rail .detail{grid-column:2; color:var(--dim); font-size:.88rem; line-height:1.5}
@media (max-width:640px){
  .rail li{grid-template-columns:1fr}
  .rail .detail{grid-column:1}
}

.callout{
  border:1px solid var(--line); border-left:3px solid var(--paper-2);
  padding:clamp(1rem,2.5vw,1.5rem) clamp(1rem,2.5vw,1.6rem);
  background:rgba(244,239,230,.03);
}
.callout p{margin:0; color:var(--paper-2); max-width:74ch}
.callout strong{color:var(--paper)}

/* ── filters ─────────────────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem}
.filters button{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; color:var(--dim); border:1px solid var(--line);
  padding:.5rem .85rem; cursor:pointer; transition:.18s;
}
.filters button:hover{color:var(--paper); border-color:var(--paper-2)}
.filters button[aria-pressed="true"]{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.filters button[aria-pressed="true"] .n{color:var(--ink); opacity:.6}
.filters .n{font-size:.62rem; opacity:.55; margin-left:.3rem}

/* ── the facts: a compact ledger list ────────────────── */
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.fact{
  display:grid; grid-template-columns:5.6rem minmax(0,1fr) 8.5rem;
  gap:0 clamp(1rem,2.6vw,1.8rem);
  padding:1.1rem 0; border-bottom:1px solid var(--line-soft); align-items:start;
}
.fact:hover{background:linear-gradient(90deg, rgba(244,239,230,.035), transparent 70%)}
.fact-when{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); padding-top:.5rem; white-space:nowrap;
}
.fact-when .when-none{opacity:.75; white-space:normal}
.fact-body{min-width:0}
.fact h3{
  margin:0 0 .3rem; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.06rem,1.9vw,1.24rem); line-height:1.2; letter-spacing:-.01em; text-wrap:balance;
}
.fact-said{
  margin:0 0 .4rem; font-family:var(--serif); font-style:italic;
  font-size:.95rem; color:var(--paper-2); line-height:1.45;
}
.fact-said cite{
  font-family:var(--mono); font-style:normal; font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
.fact-did{margin:0; font-size:.9rem; color:var(--paper-2); line-height:1.55; max-width:66ch}
.fact-src{
  margin:.45rem 0 0; font-family:var(--mono); font-size:.6rem; color:var(--dim); letter-spacing:.03em;
}
.fact-src::before{content:"\21B3  "; color:var(--red)}
.fact-src a{color:var(--paper-2); text-decoration:none; border-bottom:1px dotted var(--dim)}
.fact-src a:hover{color:var(--red); border-bottom-color:var(--red)}
.fact-verdict{display:flex; flex-direction:column; align-items:flex-end; gap:.45rem; padding-top:.3rem}
.fact-verdict .cat{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); text-align:right;
}
.fact.is-target{box-shadow:inset 3px 0 0 var(--red); background:rgba(232,50,42,.05)}

.pill{padding:.18rem .45rem; border:1px solid currentColor; font-size:.58rem; letter-spacing:.12em; white-space:nowrap}
.pill[data-s="broken"]{color:var(--red)}
.pill[data-s="partial"]{color:var(--amber)}
.pill[data-s="kept"]{color:var(--green)}
.pill[data-s="pending"]{color:var(--grey)}

.empty{font-family:var(--mono); font-size:.8rem; color:var(--dim)}

@media (max-width:820px){
  .fact{display:flex; flex-wrap:wrap; gap:.45rem .6rem; padding:1rem 0}
  .fact-when{padding-top:.2rem; order:1}
  .fact-verdict{flex-direction:row; align-items:center; gap:.6rem; margin-left:auto; padding-top:0; order:2}
  .fact-body{flex:1 0 100%; order:3}
}

/* ── announced, never sent ───────────────────────────── */
.payline{margin-top:2.4rem; padding-top:1.2rem; border-top:2px solid var(--red)}
.payline-label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red);
}
.payline p{margin:.55rem 0 0; font-size:.92rem; color:var(--paper-2); line-height:1.65; max-width:78ch}
.payline-when{font-family:var(--mono); font-size:.7rem; color:var(--dim)}
.payline-zero{color:var(--paper); font-weight:600; white-space:nowrap}

/* ── kept ────────────────────────────────────────────── */
.kept{margin-top:2.6rem}
.kept h3{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin:0 0 .6rem; font-weight:500;
}
.kept-note{margin:0 0 1rem; font-size:.9rem; color:var(--dim); line-height:1.6; max-width:70ch}
.kept-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1.4rem,4vw,2.6rem);
}
.kept-list li{
  padding:.55rem 0; border-bottom:1px solid var(--line-soft);
  display:grid; grid-template-columns:1.1rem 1fr; gap:.6rem; align-items:baseline;
  color:var(--paper-2); font-size:.9rem; line-height:1.45;
}
.kept-list li::before{content:"\2713"; color:var(--green); font-family:var(--mono); font-size:.85rem}
@media (max-width:700px){ .kept-list{grid-template-columns:1fr} }

/* ── method ──────────────────────────────────────────── */
.method-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-bottom:clamp(2rem,4vw,3rem)}
@media (max-width:780px){ .method-grid{grid-template-columns:1fr} }
.method h3{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--red); margin:0 0 .5rem; font-weight:500;
}
.method h3:not(:first-child){margin-top:1.8rem}
.method p{margin:0; color:var(--paper-2); font-size:.94rem; max-width:52ch}
.defs{list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.45rem; font-size:.9rem; color:var(--paper-2)}
.defs b{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; margin-right:.5rem}
.k-broken{color:var(--red)}
.k-partial{color:var(--amber)}
.k-kept{color:var(--green)}
.k-pending{color:var(--grey)}

.src-head{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--red); margin:0 0 .8rem; font-weight:500;
}
.sources{margin:0; padding-left:1.4rem; columns:2; column-gap:2.5rem; font-family:var(--mono); font-size:.7rem; line-height:1.6; color:var(--dim)}
@media (max-width:780px){ .sources{columns:1} }
.sources li{margin-bottom:.6rem; break-inside:avoid}
.sources a{color:var(--paper-2); text-decoration:none; border-bottom:1px dotted rgba(244,239,230,.25)}
.sources a:hover{color:var(--red)}

.colophon{
  margin:clamp(2rem,4vw,3rem) 0 0; padding-top:1.2rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.03em; color:var(--dim); max-width:80ch; line-height:1.7;
}

/* ── footer ──────────────────────────────────────────── */
.foot{
  max-width:var(--maxw); margin:0 auto; padding:1.6rem clamp(1rem,4vw,2.4rem) 3rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  border-top:1px solid var(--line);
}

/* ── reveal ──────────────────────────────────────────── */
/* Reveal is a progressive enhancement only: content is always visible,
   and never depends on an observer firing (print, screenshots, no-IO). */
.reveal{opacity:1; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{transform:none}

/* ── small screens ───────────────────────────────────── */
@media (max-width:700px){
  .topbar{flex-wrap:wrap; gap:.45rem; padding:.6rem 1rem}
  .topbar .mark{font-size:.62rem}
  .topbar nav{width:100%; margin-left:0; gap:1.1rem; font-size:.6rem; padding-bottom:2px}
}
@media (max-width:640px){
  .head{grid-template-columns:1fr; gap:.75rem}
  .head .num{width:2.2rem; min-width:0; padding-top:0; padding-bottom:0}
  h1{letter-spacing:-.03em}
}

/* ============================================================
   Timeline
   ============================================================ */
.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}

.tl{margin-top:2rem}

/* controls */
.tl-controls{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem}
.tl-play{
  display:inline-flex; align-items:center; gap:.55rem;
  background:transparent; color:var(--paper); border:1px solid rgba(244,239,230,.28);
  padding:.5rem .9rem; border-radius:2px; cursor:pointer;
  font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.tl-play:hover{border-color:var(--red); color:var(--red-2)}
.tl-play:focus-visible{outline:2px solid var(--red-2); outline-offset:3px}
.tl-play.is-on{border-color:var(--red); background:rgba(232,50,42,.12); color:var(--paper)}
.tl-play-ico{
  width:0; height:0; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--red-2);
}
.tl-play.is-on .tl-play-ico{border:0; width:8px; height:10px; background:var(--red-2); border-radius:1px}

.tl-status{display:flex; flex-direction:column; line-height:1.35; margin-right:auto}
.tl-status strong{font-family:var(--serif); font-size:1.15rem; font-weight:600; letter-spacing:-.01em}
.tl-status span{font-family:var(--mono); font-size:.63rem; letter-spacing:.06em; color:var(--dim); text-transform:uppercase}

.tl-jumps{display:flex; gap:.35rem; flex-wrap:wrap}
.tl-jumps button{
  background:transparent; border:1px solid var(--line); color:var(--paper-2);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .55rem; border-radius:2px; cursor:pointer;
  transition:border-color .18s ease, color .18s ease;
}
.tl-jumps button:hover{border-color:var(--red); color:var(--paper)}
.tl-jumps button:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}

/* scrubber */
.tl-scrubwrap{position:relative; margin:0 0 1.35rem}
.tl-scrub{
  -webkit-appearance:none; appearance:none; display:block; width:calc(100% - 14px); height:22px;
  background:transparent; cursor:pointer; margin:0 7px;
}
.tl-scrub::-webkit-slider-runnable-track{height:2px; background:rgba(244,239,230,.22); border-radius:2px}
.tl-scrub::-moz-range-track{height:2px; background:rgba(244,239,230,.22); border-radius:2px}
.tl-scrub::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-6px;
  background:var(--red); border:2px solid var(--ink); border-radius:50%;
  box-shadow:0 0 0 1px var(--red), 0 0 16px rgba(232,50,42,.55);
}
.tl-scrub::-moz-range-thumb{
  width:14px; height:14px; background:var(--red); border:2px solid var(--ink); border-radius:50%;
  box-shadow:0 0 0 1px var(--red), 0 0 16px rgba(232,50,42,.55);
}
.tl-scrub:focus-visible{outline:2px solid var(--red-2); outline-offset:4px}
.tl-scrub-ends{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; color:var(--dim);
  margin-top:-.25rem;
}

.tl-viewport{overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; padding-bottom:.2rem}
.tl-rail{position:relative; min-width:0; padding-top:.2rem}

/* axis */
.tl-axis{display:grid; grid-template-columns:132px minmax(0,1fr); align-items:end}
.tl-axis-name{position:sticky; left:0; z-index:3; background:var(--ink); height:34px}
.tl-axis-name::after{content:""; position:absolute; left:100%; top:0; width:18px; height:100%;
  background:linear-gradient(90deg, var(--ink) 30%, transparent)}
.tl-axis-plot{position:relative; height:34px}
.tl-years{position:absolute; inset:0 0 auto 0; height:14px}
.tl-year{
  position:absolute; top:0; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  color:var(--dim); padding-left:.35rem; border-left:1px solid var(--line);
}
.tl-months{position:absolute; left:0; right:0; bottom:0; height:20px}
.tl-month{position:absolute; bottom:0; width:1px; height:5px; background:rgba(244,239,230,.2)}
.tl-month-lb{
  position:absolute; bottom:7px; transform:translateX(-50%);
  font-family:var(--mono); font-size:.55rem; letter-spacing:.1em; color:var(--dim);
}
.tl-month-lb.is-jan{color:var(--paper-2)}

/* gridlines behind lanes */
.tl-gridlines{position:absolute; left:0; right:0; top:34px; bottom:0; display:grid; grid-template-columns:132px minmax(0,1fr); pointer-events:none}
.tl-name-spacer{position:sticky; left:0; z-index:2; background:var(--ink)}
.tl-gl-plot{position:relative}
.tl-gl-plot i{position:absolute; top:0; bottom:0; width:1px; background:rgba(244,239,230,.055)}
.tl-gl-plot i.is-year{background:rgba(244,239,230,.16)}

/* lanes */
.tl-lanes{position:relative}
.tl-lane{display:grid; grid-template-columns:132px minmax(0,1fr); align-items:start; border-top:1px solid var(--line-soft); transition:opacity .25s ease}
.tl-lane:first-child{border-top:0}
.tl-lane.is-off{opacity:.16; pointer-events:none}
.tl-lane-name{
  position:sticky; left:0; z-index:3;
  background:var(--ink);
  box-shadow:10px 0 14px -10px #0b0b0d;
  padding:.55rem .7rem .5rem 0;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-2); line-height:1.3;
}
.tl-lane-name .tl-n{display:block; color:var(--dim); font-weight:400; font-size:.55rem; margin-top:.15rem}
.tl-lane-track{position:relative}
.tl-lane-track::before{
  content:""; position:absolute; left:2%; right:2%; top:16px; height:1px;
  background:rgba(244,239,230,.09);
}

/* dots */
.tl-dot{
  position:absolute; transform:translate(-50%,0);
  width:20px; height:17px; padding:0; margin:0; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tl-mark{
  width:10px; height:10px; border-radius:50%;
  background:var(--grey); box-shadow:0 0 0 1.5px var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, opacity .3s ease;
}
.tl-dot[data-s="broken"] .tl-mark{background:var(--red)}
.tl-dot[data-s="partial"] .tl-mark{background:var(--amber)}
.tl-dot[data-s="kept"] .tl-mark{background:var(--green)}
.tl-dot[data-s="info"] .tl-mark{background:var(--paper-2); opacity:.7}
.tl-dot[data-s="claim"] .tl-mark{background:transparent; border:1.5px solid var(--amber); width:11px; height:11px}
.tl-dot.is-key .tl-mark{width:12px; height:12px}
.tl-dot.is-key[data-s="claim"] .tl-mark{width:13px; height:13px}
.tl-dot:hover .tl-mark, .tl-dot:focus-visible .tl-mark{transform:scale(1.45); box-shadow:0 0 0 1.5px var(--ink), 0 0 14px rgba(232,50,42,.5)}
.tl-dot:focus-visible{outline:none}
.tl-dot:focus-visible .tl-mark{outline:2px solid var(--paper); outline-offset:2px}
.tl-dot.is-sel .tl-mark{transform:scale(1.55); box-shadow:0 0 0 1.5px var(--ink), 0 0 0 3px rgba(244,239,230,.5)}
.tl-dot.is-future{opacity:.28}

/* hover card */
.tl-tip{
  position:fixed; z-index:80; max-width:260px; pointer-events:none;
  background:var(--ink-2); color:var(--paper); border:1px solid var(--line);
  padding:.4rem .55rem; font-size:.78rem; line-height:1.35;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.tl-tip-d{
  display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red-2); margin-bottom:.15rem;
}

/* scrub line */
.tl-line{
  position:absolute; top:34px; bottom:0; width:1px; left:0; z-index:1;
  background:linear-gradient(180deg, rgba(232,50,42,.9), rgba(232,50,42,.25));
  pointer-events:none; margin-left:0;
}
.tl-line::before{
  content:""; position:absolute; top:-3px; left:-2.5px; width:6px; height:6px; border-radius:50%;
  background:var(--red);
}

/* panel */
.tl-panel{
  margin-top:1.1rem;
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:1rem 2.2rem;
  border:1px solid var(--line); border-left:2px solid var(--red);
  background:linear-gradient(90deg, rgba(232,50,42,.05), rgba(244,239,230,.02) 45%);
  padding:1.05rem 1.35rem 1.15rem; min-height:130px;
}
.tl-panel:not(.tl-panel--linked){grid-template-columns:minmax(0,1fr)}
.tl-p-main{min-width:0}
.tl-p-side{min-width:0}
.tl-panel--linked .tl-p-side{border-left:1px solid var(--line-soft); padding-left:2.2rem}
@media (max-width:900px){
  .tl-panel{grid-template-columns:minmax(0,1fr)}
  .tl-p-side{border-left:0; padding-left:0; border-top:1px solid var(--line-soft); padding-top:.75rem}
}
.tl-p-tag{
  margin-left:.5rem; font-size:.54rem; letter-spacing:.12em; color:var(--paper-2);
  border:1px solid var(--line); padding:.05rem .35rem;
}
.tl-p-lane{
  display:flex; align-items:center; gap:.45rem; margin:0 0 .55rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.tl-p-sep{opacity:.5}
.tl-p-dot{width:8px; height:8px; border-radius:50%; background:var(--red); flex:0 0 auto}
.tl-p-dot[data-s="partial"]{background:var(--amber)}
.tl-p-dot[data-s="kept"]{background:var(--green)}
.tl-p-dot[data-s="info"]{background:var(--paper-2)}
.tl-p-dot[data-s="claim"]{background:transparent; border:1.5px solid var(--amber)}
.tl-panel h3{font-family:var(--serif); font-size:1.28rem; line-height:1.25; margin:0 0 .5rem; letter-spacing:-.01em}
.tl-p-body{margin:0 0 .8rem; font-size:.95rem; line-height:1.55; color:var(--paper-2); max-width:70ch}
.tl-panel:not(.tl-panel--linked) .tl-p-src{margin-top:.9rem; max-width:70ch}
.tl-p-src{
  margin:0; font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; color:var(--dim);
  text-transform:uppercase; line-height:1.5;
}
.tl-p-src a:hover{color:var(--red-2)}
.tl-p-promise{margin-top:.85rem; border-top:1px solid var(--line-soft); padding-top:.75rem}
.tl-p-plabel{
  display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); margin-bottom:.4rem;
}
.tl-p-pt{font-family:var(--serif); font-size:1rem; margin:.45rem 0 .5rem; line-height:1.3}
.tl-p-link{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red-2); text-decoration:none; border-bottom:1px solid rgba(232,50,42,.4); padding-bottom:1px;
}
.tl-p-link:hover{border-color:var(--red-2)}

/* legend */
.tl-legend{
  display:flex; align-items:center; gap:.55rem 1rem; flex-wrap:wrap;
  margin-top:1.15rem; padding-top:1rem; border-top:1px solid var(--line-soft);
}
.tl-legend-key{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
.tl-key{width:8px; height:8px; border-radius:50%; background:var(--red)}
.tl-key[data-s="partial"]{background:var(--amber)}
.tl-key[data-s="kept"]{background:var(--green)}
.tl-key[data-s="info"]{background:var(--paper-2)}
.tl-key.is-claim{background:transparent; border:1.5px solid var(--amber)}
.tl-legend-sep{width:1px; height:14px; background:var(--line)}
.tl-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; border:1px solid var(--line); color:var(--paper-2);
  padding:.3rem .5rem; border-radius:2px; cursor:pointer;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .18s ease, opacity .18s ease, color .18s ease;
}
.tl-chip .n{color:var(--dim)}
.tl-chip:hover{border-color:var(--red)}
.tl-chip:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.tl-chip[aria-pressed="false"]{opacity:.4; text-decoration:line-through}

/* callout lives under the timeline */
.callout{margin-top:1.6rem}

@media (max-width:1080px){
  .tl-rail{min-width:860px}
}
@media (max-width:760px){
  .tl-rail{min-width:780px}
  .tl-month-lb{font-size:.5rem; letter-spacing:.04em}
  .tl-p-tag{margin-left:0; margin-top:.25rem}
  .tl-p-lane{flex-wrap:wrap}
  .tl-axis, .tl-lane, .tl-gridlines{grid-template-columns:104px minmax(0,1fr)}
  .tl-lane-name{font-size:.55rem}
  .tl-status strong{font-size:1.02rem}
  .tl-jumps{width:100%}
  .tl-scrub-ends{font-size:.52rem}
}