/* 0hp — the magazine. Tokens are docs/brand-kit.md law (structure inherited from the sister
   engine; palette, type and layout set by the founding session's 2026-09-02 magazine direction). */
:root{
  /* THE MAGAZINE PALETTE (founding session 2026-09-02): dark with ONE hot accent —
     health-bar red. Near-black ground, white text, red for the mark bar, the rules, the
     section labels, nav hover, CTA borders and the "estimated" badge. NEVER red body text:
     a link is ink-coloured and UNDERLINED in red, so colour is never the only signal.
     Token NAMES are kept from the inherited sheet so every rule below retunes for free;
     their VALUES are this site's, and `--red` is the one new name. */
  --red:#FF4646;                             /* the accent, everywhere it appears */
  --red-deep:#B8232A;                        /* hover fills only (5.7:1 under --ink) */
  --parchment:#0B0D12; --paper:#141821; --panel-2:#1B2030;
  --ink:#F2F3F7; --umber:#A9AFBD;
  --moss:#FF4646; --clay:#FF4646; --clay-link:#F2F3F7; --brass:#FF4646;
  --brass-rule:#FF4646; --hearth:#070910; --hearth-cream:#F2F3F7;
  --cream-dim:#A9AFBD; --cream-faint:#7C8394;
  --hairline:rgba(255,70,70,.22);            /* structural tier */
  --card-edge:rgba(255,70,70,.28);
  --display:"Fraunces","Fraunces Fallback",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --well:1180px; --fs-body:1.0625rem;
  color-scheme:dark;
}
@font-face{font-family:"Fraunces";
  src:url("/static/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"Fraunces Fallback";
  src:local("Georgia"),local("Noto Serif"),local("Times New Roman");
  size-adjust:103%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
*{box-sizing:border-box}
body{margin:0;background:var(--parchment);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:var(--fs-body);line-height:1.7;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto;width:100%}
main:focus{outline:none}
.well{width:100%;max-width:calc(var(--well) + 2.4rem);margin:0 auto;
  padding:2.6rem 1.2rem}
h1{text-wrap:pretty}
h2,h3{text-wrap:balance}
h1,h2,h3{overflow-wrap:break-word;font-variant-ligatures:no-discretionary-ligatures}
.meta{overflow-wrap:break-word}
.card p,.tags{overflow-wrap:break-word}

/* links: never color-alone */
a{color:var(--clay-link);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:var(--brass-rule)}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:2px}
.masthead a:focus-visible,footer a:focus-visible,.signoff a:focus-visible{
  outline-color:var(--brass)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:.75rem;top:.5rem;z-index:20;display:block;
  padding:.6rem 1.2rem;background:var(--brass);color:var(--hearth);
  outline:2px solid var(--hearth);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* masthead — a magazine's: wordmark hard left with the red bar under it, sections hard
   right. On a phone it stacks and the nav wraps, because a scrolling menu hides items
   behind a gesture nobody makes on a first visit. */
.masthead{background:var(--parchment);color:var(--hearth-cream);
  border-bottom:1px solid var(--hairline)}
.mastwrap{max-width:calc(var(--well) + 2.4rem);margin:0 auto;padding:1.3rem 1.2rem .9rem;
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.4rem 1.5rem}
.brandbox{min-width:0}
.brand{margin:0;font-family:var(--display);font-weight:800;font-size:2.4rem;
  line-height:1;letter-spacing:-.02em}
.brand a::after{content:"";display:block;width:2.6rem;height:4px;margin:.35rem 0 0;
  background:var(--red)}
.brand a,.masthead nav a,.card h3 a{text-decoration:none}
.brand a{color:var(--hearth-cream)}
.brand a:hover{color:#fff;text-decoration:underline;
  text-decoration-color:var(--red);text-decoration-thickness:2px}
.tagline{margin:.5rem 0 0;color:var(--cream-dim);font-style:italic;font-size:.92rem}
.masthead nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;justify-content:flex-end;
  padding:0 0 .3rem}
.masthead nav a{display:inline-block;padding:.4rem 0;color:var(--cream-dim);
  font-family:Verdana,Geneva,sans-serif;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.13em;white-space:nowrap;border-bottom:2px solid transparent}
.masthead nav a:hover{color:var(--ink);border-bottom-color:var(--red)}
.masthead nav a.on{color:var(--hearth-cream);border-bottom-color:var(--red)}

/* lede (index only): the trackers are the product, so the home page opens on a
   sentence and the next five dates, never on a picture of nothing. */
.lede{max-width:var(--well);margin:0 auto;padding:2.4rem 1.2rem 0}
.lede h1{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.15;margin:0 0 .5rem;max-width:22ch}
.lede p{color:var(--umber);margin:0;max-width:60ch;font-size:1.05rem}
/* hero (index only, retired by the design pass; kept for the og:image fallback only) */
.hero-band{background:var(--hearth);color:var(--hearth-cream);
  padding:2.2rem 1.2rem 3.2rem;text-align:center}
.hero-band .inner{max-width:var(--well);margin:0 auto}
.hero-band img{width:100%;height:auto;max-height:400px;aspect-ratio:16/9;
  object-fit:cover;border-radius:4px;display:block;margin:0 auto 2.75rem;
  border:1px solid var(--hairline)}
.hero-band h1{font-family:var(--display);font-weight:400;
  font-size:clamp(2.1rem,4.6vw,3rem);line-height:1.15;margin:0 0 .55rem}
.hero-band p{color:var(--cream-dim);margin:0;font-size:1.05rem}

/* ============================================================================
   THE MAGAZINE FRONT (founding session 2026-09-02, for traffic: Discover and social
   link cards are image-led, so the art has to be the first thing on the page)
   ========================================================================== */
/* 1. THE FEATURE. Full-width art with the words beneath it — never over it. Text over a
   photograph is the first thing that breaks when the image is slow, missing, or simply
   busy in the wrong corner, and this is the one headline on the site a first-time reader
   is guaranteed to meet. */
.feature{max-width:calc(var(--well) + 2.4rem);margin:0 auto;padding:2rem 1.2rem 0}
.feature-art{display:block;overflow:hidden;border:1px solid var(--card-edge);
  border-radius:4px}
.feature-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.feature-words{padding:1.3rem 0 0;max-width:46rem}
.feature-words h1{font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;letter-spacing:-.015em;
  margin:.25rem 0 .55rem;text-wrap:balance}
.feature-words h1 a{color:var(--ink);text-decoration:none}
.feature-words h1 a:hover{text-decoration:underline;text-decoration-thickness:2px;
  text-decoration-color:var(--red);text-underline-offset:4px}
.feature-dek{color:var(--umber);margin:0;font-size:1.1rem;max-width:44rem}
.feature .ctaline{margin-top:1rem}
@media (prefers-reduced-motion: no-preference){
  .feature-art img{transition:transform .5s ease}
  .feature-art:hover img{transform:scale(1.015)}
}

/* 2. NEXT UP. A row, not a list: five dates read as a strip in one glance, and on a phone
   they scroll sideways with snap instead of pushing the stories a screen and a half down. */
.nextrow{list-style:none;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(13rem,1fr);gap:.9rem;margin:0 0 2.4rem;padding:0;
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.nextrow > li{scroll-snap-align:start}
.nextrow a{display:block;height:100%;padding:.85rem .95rem;background:var(--paper);
  border:1px solid var(--hairline);border-radius:3px;text-decoration:none;color:var(--ink)}
.nextrow a:hover{border-color:var(--red)}
.nextrow .tdate{display:block;margin-bottom:.15rem}
.nextrow .tgame{display:inline-block;margin-bottom:.35rem}
.nextrow .est{margin-left:.4rem}
.nexttitle{display:block;font-size:.95rem;line-height:1.4;color:var(--ink)}

/* 3. THE ART HERO on an article. The gradient band is on the FIGURE and the headline is
   real text under it in normal flow, so the piece reads identically with the image
   missing. On desktop the band pulls the words up over the bottom of the painting; on a
   phone it simply sits beneath, where a headline over art at 390px is unreadable anyway. */
.arthero{position:relative;margin:-1.6rem -1.9rem 1.6rem;overflow:hidden;
  border-radius:4px 4px 0 0}
.arthero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.arthero figcaption{padding:1rem 1.9rem 0}
.arthero h1{margin:.15rem 0 0}
@media (min-width:48em){
  .arthero figcaption{position:absolute;left:0;right:0;bottom:0;padding:6rem 1.9rem 1.4rem;
    background:linear-gradient(to top,rgba(11,13,18,.96) 18%,rgba(11,13,18,.78) 52%,
      rgba(11,13,18,0) 100%)}
}

/* section labels — one treatment: label, then a hairline to the right edge */
.seclabel{display:flex;align-items:center;gap:.9rem;
  font-family:Verdana,Geneva,sans-serif;font-size:.74rem;font-weight:normal;
  text-transform:uppercase;letter-spacing:.14em;color:var(--red);margin:2.6rem 0 .9rem}
/* ...except the first one on a page, which already has the masthead or the feature
   above it. Without this the front page opens on three centimetres of nothing. */
.well > .seclabel:first-child,.after > .seclabel:first-child{margin-top:0}
.seclabel::after{content:"";flex:1;height:1px;background:var(--hairline)}
.newnote{color:var(--umber);font-style:italic;margin:0 0 1.4rem;font-size:.95rem}

/* cards — printed page: hairline edge, no shadow, quiet hover life */
/* THE GRID: three columns on a desktop, two on a tablet, one on a phone, with the tighter
   gaps a magazine front wants. Declared at breakpoints rather than left to auto-fit,
   because auto-fit gives four thin columns on a wide screen and the art stops reading. */
.postgrid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media (min-width:34em){.postgrid{grid-template-columns:1fr 1fr;gap:1.5rem}}
@media (min-width:62em){.postgrid{grid-template-columns:repeat(3,1fr);gap:1.6rem 1.5rem}}
.card{background:var(--paper);border:1px solid var(--card-edge);border-radius:4px;
  padding:0 0 1.1rem;overflow:hidden;display:flex;flex-direction:column}
.card > div{padding:0 1.1rem}
.card:hover{border-color:var(--red)}
.card > a{display:block;overflow:hidden}
.card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  margin-bottom:.9rem}
@media (prefers-reduced-motion: no-preference){
  .card img{transition:transform .45s ease}
  .card:hover img{transform:scale(1.02)}
  .card{transition:border-color .25s ease}
}
.card h3{font-family:var(--display);font-weight:700;font-size:1.2rem;
  line-height:1.28;margin:.15rem 0 .35rem;text-wrap:balance}
.card h3 a{color:var(--ink)}
.card h3 a:hover,.card h3 a:focus-visible{color:var(--clay-link);text-decoration:underline;
  text-decoration-color:var(--brass-rule)}
.card p{margin:.2rem 0;color:var(--umber);font-size:.95rem}
.card .read{margin-top:.7rem}
.card .read a{font-size:.9rem;display:inline-block;padding:.32rem 0;
  text-decoration-color:currentColor}
/* The old "a single card becomes the feature" rule is RETIRED: the feature is its own
   block in `index.html.j2` now, so a lone card here is a lone card. */
.cat,.cat a,a.cat{font-family:Verdana,Geneva,sans-serif;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--moss)}
.cat{margin:.4rem 0 .1rem}
.cat a,a.cat{display:inline-block;padding:.25rem 0;text-decoration:none;
  border-bottom:1px solid var(--brass-rule)}
.cat a:hover,a.cat:hover,.cat a:focus-visible,a.cat:focus-visible{
  color:var(--clay-link);border-bottom-color:var(--clay-link)}
.cat .catdate{color:var(--umber);border:0}

/* article + pages */
.post{max-width:780px;margin:0 auto;background:var(--paper);
  border:1px solid var(--card-edge);border-radius:4px;padding:1.6rem 1.9rem 2.4rem;
  overflow:hidden}
.post h1{font-family:var(--display);font-weight:800;line-height:1.12;
  letter-spacing:-.015em;font-size:clamp(1.8rem,3.4vw,2.5rem);margin:.5rem 0 .9rem;
  text-wrap:balance}
.meta{font-family:Verdana,Geneva,sans-serif;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--umber);margin:0 0 .4rem}
.hero{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:4px;
  margin:.9rem 0 1.5rem}
.body{max-width:34em;margin:0}
.body p,.body li{overflow-wrap:break-word}
.body img{display:block;max-width:100%;height:auto;border-radius:4px;
  margin:2.6em auto}
.body h2{font-family:var(--display);font-weight:700;color:var(--ink);
  margin-top:1.8em;font-size:1.5rem;line-height:1.2}
.body blockquote{border-left:2px solid var(--brass-rule);margin:1.8em 0;
  padding:.1em 0 .1em 1.2em;color:var(--umber);font-style:italic}
.body pre,.body table{display:block;max-width:100%;overflow-x:auto}
.body table{border-collapse:collapse;font-size:.92rem}
/* drop cap: articles only, first paragraph only, never blockquotes or pages */
.article-flow > p:first-of-type{font-size:1.15rem;color:var(--ink)}
.tags{border-top:1px solid var(--hairline);margin-top:2.6rem;padding-top:1rem;
  line-height:2.2}
.tags .filed{font-family:Verdana,Geneva,sans-serif;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--umber);margin-right:.6rem}
.tags a{display:inline-block;padding:.15rem 0;margin-right:.8rem;
  font-family:Verdana,Geneva,sans-serif;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--moss);text-decoration:none;
  border-bottom:1px solid var(--brass-rule)}
.tags a:hover,.tags a:focus-visible{color:var(--clay-link);
  border-bottom-color:var(--clay-link)}

/* after-article: related + sign-off */
.after{max-width:780px;margin:2.6rem auto 0}
.after .postgrid{gap:1.1rem}
.signoff{max-width:780px;margin:3.5rem auto 0;background:var(--hearth);
  color:var(--hearth-cream);border-radius:4px;padding:1.7rem 1.8rem;text-align:center}
.signoff p{margin:.3rem 0;color:var(--cream-dim)}
.signoff .sig{font-family:var(--display);font-size:1.25rem;color:var(--hearth-cream)}
.signoff a{color:var(--brass);text-decoration-color:var(--brass)}
.ctaline{margin-top:1rem}
.ctaline a{display:inline-block;max-width:100%;border:1px solid var(--brass);
  border-radius:3px;padding:.55rem 1.2rem;color:var(--brass);text-decoration:none}
.ctaline a:hover,.ctaline a:focus-visible{background:var(--red-deep);color:var(--ink);
  text-decoration:none}

/* in-article email capture band (Kit form pastes into .capture-form at wire-time) */
.capture{background:var(--hearth);color:var(--hearth-cream);border-radius:4px;
  padding:1.6rem 1.7rem;margin:2.2rem 0}
.capture .capture-title{font-family:var(--display);font-weight:600;font-size:1.35rem;
  margin:0 0 .4rem;color:var(--hearth-cream)}
.capture p{color:var(--cream-dim);margin:.3rem 0}
.capture .fineline{font-size:.85rem;color:var(--cream-faint);margin-top:.8rem}
.capture a{color:var(--brass);text-decoration-color:var(--brass)}
.capture input[type="email"],.capture input[type="text"],
.signoff-capture input[type="email"]{width:100%;padding:.6rem .8rem;
  border:1px solid var(--card-edge);border-radius:3px;background:var(--hearth-cream);
  color:var(--ink);font:inherit;margin:.35rem 0}
.capture button,.capture input[type="submit"],.signoff-capture button{border:1px solid var(--brass);
  border-radius:3px;padding:.55rem 1.2rem;background:var(--brass);color:var(--hearth);
  font:inherit;cursor:pointer;transition:background-color .3s ease,color .3s ease}
.capture button:hover,.capture button:focus-visible,
.capture input[type="submit"]:hover,
.signoff-capture button:hover,.signoff-capture button:focus-visible{background:transparent;color:var(--brass)}

/* signoff email capture — the band's own quiet form (design queue #12, at Kit signup) */
.signoff-capture{max-width:24rem;margin:1.5rem auto 1.1rem}
.signoff-capture .capture-title{font-family:var(--display);font-weight:600;
  font-size:1.15rem;margin:0 0 .3rem;color:var(--hearth-cream)}
.signoff-capture .fineline{font-size:.8rem;color:var(--cream-faint);margin-top:.6rem}

/* category pages */
main .well>h1{font-family:var(--display);font-weight:800;font-size:2.1rem;
  letter-spacing:-.015em;margin:0 0 .35rem}
.catdek{color:var(--umber);margin:0 0 1.2rem;max-width:34em}
.catrow{margin-top:2.4rem;color:var(--umber);font-size:.9rem}
.catrow a{display:inline-block;padding:.25rem 0;margin-right:1rem}

/* footer — the site's other map */
footer{flex-shrink:0;background:var(--hearth);color:var(--cream-faint);margin-top:3rem;
  padding:1.7rem 1.2rem 1.5rem;text-align:center;font-size:.85rem}
footer a{display:inline-block;padding:.2rem 0;color:var(--cream-dim);
  text-decoration:underline;text-decoration-color:var(--hairline)}
footer a:hover{color:var(--brass)}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem 1.4rem;
  margin-bottom:.8rem}
.fnav a{font-family:Verdana,Geneva,sans-serif;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.fnav a:hover{text-decoration:underline;text-decoration-color:var(--brass)}
footer .legal{margin:0;line-height:2}

@media (max-width:37.5em){
  .post{padding:1.1rem 1rem 1.8rem}
  .arthero{margin:-1.1rem -1rem 1.4rem}
  .arthero figcaption{padding:1rem 1rem 0}
  .brand{font-size:2rem}
  /* the masthead stacks and the nav WRAPS: a scrolling menu hides half the sections
     behind a gesture a first-time reader does not make. */
  .mastwrap{align-items:flex-start;gap:.7rem}
  .masthead nav{justify-content:flex-start;gap:.1rem 1.1rem;width:100%}
  .feature{padding-top:1.2rem}
  .feature-words{padding-top:1rem}
  .hero-band{padding:1.4rem 1.2rem 2.2rem}
}

/* round-5 surgical additions */
.nb{white-space:nowrap}
.hero-band .ctaline{margin-top:1.3rem}
.aboutline{margin-top:.7rem;font-size:.85rem}
.aboutline a{color:var(--cream-dim)}
@media (max-width:37.5em){
  .meta,.cat{font-size:.68rem;letter-spacing:.08em}
}

/* ============================================================================
   Motion layer (Fable creative pass 2026-08-24) — heritage-quiet, CSS-only,
   triple-gated: @supports for scroll timelines, reduced-motion for everything,
   and base states that are fully visible/readable with neither.
   ========================================================================== */
@media screen and (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}

  /* Cross-document view transitions: the clicked photograph carries the reader
     into the article; chrome stays put so only the content breathes. */
  @view-transition{navigation:auto}
  .masthead{view-transition-name:masthead}
  footer{view-transition-name:sitefooter}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
  ::view-transition-group(*){animation-duration:.45s;
    animation-timing-function:cubic-bezier(.33,0,.2,1)}
  ::view-transition-group(masthead),::view-transition-group(sitefooter){animation:none}

  /* One-time hero settle on load — the room comes into focus, nothing jumps. */
  .hero-band .inner{animation:settle .8s cubic-bezier(.25,0,.2,1) both}
  @keyframes settle{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* Micro-transitions — glints, not gestures. */
  a,.masthead nav a,.cat a,a.cat,.tags a{transition:color .25s ease,
    border-color .25s ease,text-decoration-color .25s ease}
  .ctaline a{transition:background-color .3s ease,color .3s ease}

  /* Scroll-driven reveals — supported browsers only. THE REVEAL MOVES, IT DOES NOT
     FADE, and that is a fix rather than a preference (measured 2026-09-02). The old
     keyframe started at `opacity:.001`, and the comment above it claimed "base state is
     the final state, so nothing is ever hidden where timelines don't exist". The claim
     was true and the risk was the other one: where timelines DO exist and the page is
     never SCROLLED, every element below the fold sits at `entry 0%` forever. Measured in
     headless Chromium at 1440x900: the whole article grid and every section label
     rendered at opacity 0.001, so a full-page capture of this site's front page was a
     masthead, a feature and two thousand pixels of black. That is not only a screenshot
     problem — it is what a render-based preview or capture pipeline sees, and Google
     Discover, the one large channel this site is betting on, is exactly that kind of
     surface. Animating the TRANSFORM alone keeps the life and leaves a non-scrolling
     renderer looking at fully opaque content 14 pixels from where it lands. */
  @supports (animation-timeline: view()) and (animation-range: entry 0%){
    .card,.seclabel,.newnote,.signoff,.catrow{
      animation:rise .7s cubic-bezier(.25,0,.2,1) both;
      animation-timeline:view();animation-range:entry 0% entry 55%}
  }
  @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
}

@media (prefers-reduced-motion: reduce){
  .card a img,.hero{view-transition-name:none !important}
}

/* ============================================================================
   THE TRACKERS (2026-09-02). The brand voice's visual direction for these pages
   is "a reference table, not a magazine cover": monospaced numerals so dates line
   up down a column, one accent, and scanning served before decoration. This is
   the FUNCTIONAL layer only — the design pass owns the palette, and everything
   here is written in the existing tokens so a retune reaches it for free.
   ========================================================================== */
.tstamp{font-size:.9rem;color:var(--umber);margin:.2rem 0 1.6rem}
.catdek+.tstamp{margin-top:-.6rem}

/* A tracker row: the date is the thing the eye lands on, so it is tabular and
   set apart from the prose that follows it. */
.track{list-style:none;margin:0 0 1.6rem;padding:0;
  border-top:1px solid var(--hairline)}
.track>li{padding:1rem 0;border-bottom:1px solid var(--hairline)}
.track h3{margin:.15rem 0 .3rem;font-size:1.1rem;line-height:1.35}
.track p{margin:.2rem 0}
.trow{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:baseline;
  font-size:.9rem}
.tdate,.nb,.rst td,.trk td.nb,.trk time{font-variant-numeric:tabular-nums lining-nums}
.tdate{font-family:var(--mono);font-size:.88rem;font-weight:700;color:var(--ink);white-space:nowrap}
.rst td,.trk td.nb,.trk time,.tstamp time,.tmeta .nb{font-family:var(--mono);font-size:.86rem}
.tgame{color:var(--moss);text-transform:uppercase;letter-spacing:.06em;
  font-size:.78rem}
/* "estimated" is a LABEL, not a decoration: the brand voice says every date is
   announced or estimated and the page says which, so it is given a border and a
   colour of its own rather than being folded into the surrounding grey. */
.est{border:1px solid var(--clay);color:var(--clay-link);border-radius:2px;
  padding:0 .35rem;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.06em;white-space:nowrap}
.tmeta{font-size:.85rem;color:var(--umber)}
.recent{margin:0 0 2rem}
.recent summary{cursor:pointer;font-family:var(--display);font-weight:600;
  padding:.5rem 0}
.track.lead>li:first-child{padding-top:.4rem}

/* The two secondary pillars on the home page, side by side above the articles. */
.pillars{display:grid;gap:1.4rem;margin:.4rem 0 1rem}
@media (min-width:700px){.pillars{grid-template-columns:1fr 1fr}}
.pillars section{border:1px solid var(--card-edge);background:var(--paper);
  padding:1.1rem 1.2rem}
.pillars .pillar-h{margin:0 0 .5rem;font-family:var(--display);font-weight:700;
  font-size:1.15rem}
.pillars .pillar-t{margin:.15rem 0 .3rem;font-size:1.05rem;color:var(--ink)}

/* The two data tables. `overflow-x` on a WRAPPER rather than the table, so a
   narrow phone scrolls the table instead of the whole page. */
.tablewrap{overflow-x:auto;margin:0 0 1.6rem;
  border:1px solid var(--card-edge);background:var(--paper)}
.trk,.rst{border-collapse:collapse;width:100%;font-size:.92rem}
.rst{margin:0 0 1.6rem;border:1px solid var(--card-edge);background:var(--paper)}
.trk th,.trk td,.rst th,.rst td{padding:.55rem .7rem;text-align:left;
  vertical-align:top;border-bottom:1px solid var(--hairline)}
.trk thead th,.rst thead th{background:var(--panel-2);font-family:var(--display);
  font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap}
.trk tbody th{font-weight:600}
.trk tbody tr:last-child td,.trk tbody tr:last-child th,
.rst tbody tr:last-child td{border-bottom:0}
.sub{display:block;font-size:.82rem;color:var(--umber);font-weight:400}
.stat{text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;
  color:var(--moss);font-weight:700}
.trk .s-delayed,.trk .s-tba{color:var(--clay-link)}
.sortbtn{font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-transform:inherit;letter-spacing:inherit}
.sortbtn:hover{text-decoration:underline;text-decoration-color:var(--brass-rule)}
.sortbtn:focus-visible{outline:2px solid var(--clay);outline-offset:2px}

/* The publisher notices on /legal/. Long, prescribed, and quoted verbatim, so
   they are set smaller and indented to read as somebody else's words. */
.notices{margin:0}
.notices dt{font-family:var(--display);font-weight:600;margin:1.2rem 0 .3rem}
.notices dd{margin:0;padding-left:1rem;border-left:2px solid var(--hairline);
  font-size:.92rem;color:var(--umber)}
.disclaimer{max-width:62ch;margin-left:auto;margin-right:auto}

/* The subscribe form. Renders only while site.yaml names a Buttondown account. */
.sub{max-width:36rem;margin:0 auto 1.4rem;text-align:center}
.sub label{display:block;margin:0 0 .5rem;font-size:.92rem;color:var(--cream-dim)}
.sub span{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.sub input{flex:1 1 16rem;min-width:0;padding:.55rem .7rem;font:inherit;font-size:.95rem;
  border:1px solid var(--brass-rule);background:var(--paper);color:var(--ink)}
.sub button{padding:.55rem 1.1rem;font:inherit;font-size:.95rem;cursor:pointer;
  border:1px solid var(--brass);background:var(--brass);color:var(--hearth)}
.sub button:hover{background:var(--hearth-cream)}
.sub input:focus-visible,.sub button:focus-visible{outline:2px solid var(--brass);
  outline-offset:2px}