/* The Front Page · legendarywhores.com
   A broadsheet on the game's desk: one tabloid column on phones, a true multi-column front page from 1000px.
   Faces match the game's house layer (Anton / Newsreader / Special Elite) plus a blackletter nameplate and one
   display face per era. Newsprint stays newsprint in dark mode: it is a printed object, not a theme.
   Layout of the page, top to bottom: the sticky nav bar, masthead, splash, the gossip ticker, How to play, Strategy (ending
   in Coming Soon), What the papers say, the colour supplement, small ads, the closing stamp, letters, footer. */

/* a metric-matched stand-in for Special Elite while it loads (measured: Special Elite sets 87% as wide as
   Courier New), so the typewriter lines wrap the same before and after the swap */
@font-face {
  font-family: 'Special Elite Fallback';
  src: local('Courier New'), local('CourierNewPSMT'), local('Courier'), local('Liberation Mono'), local('Droid Sans Mono');
  size-adjust: 87%;
}
/* the same for Anton: Impact scaled to Anton's width (measured 94.1%) and given Anton's ascent and descent (1.18 / .33),
   so the headlines wrap and sit identically before and after the swap and nothing below them moves */
@font-face {
  font-family: 'Anton Fallback';
  src: local('Impact'), local('Impact Regular'), local('Haettenschweiler');
  size-adjust: 94.1%;
  ascent-override: 125.4%;
  descent-override: 35.1%;
  line-gap-override: 0%;
}
/* and for Newsreader: Georgia in each of its four cuts, scaled to Newsreader's measured width at body sizes and given
   its ascent and descent (.74 / .26), so the standfirst and the stories wrap the same before and after the swap */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); font-style: normal; font-weight: 300 500;
  size-adjust: 91.5%; ascent-override: 80.9%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); font-style: normal; font-weight: 550 900;
  size-adjust: 87%; ascent-override: 85.1%; descent-override: 29.9%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'); font-style: italic; font-weight: 300 500;
  size-adjust: 83.8%; ascent-override: 88.3%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia Bold Italic'), local('Georgia-BoldItalic'); font-style: italic; font-weight: 550 900;
  size-adjust: 77.5%; ascent-override: 95.5%; descent-override: 33.5%; line-gap-override: 0%; }
/* the splash standfirst sets Newsreader at optical size 36, which runs wider (measured .937 regular, .910 bold) */
@font-face { font-family: 'Newsreader Display Fallback'; src: local('Georgia'); font-style: normal; font-weight: 300 500;
  size-adjust: 93.7%; ascent-override: 79%; descent-override: 27.7%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Display Fallback'; src: local('Georgia Bold'), local('Georgia-Bold'); font-style: normal; font-weight: 550 900;
  size-adjust: 91%; ascent-override: 81.3%; descent-override: 28.6%; line-gap-override: 0%; }

:root {
  --desk: #2A2522;
  --paper: #EFE8D7;
  --paper-2: #E4DAC4;
  --paper-3: #F7F2E6;
  --ink: #17130F;
  --ink-2: #4D443B;
  --rule: #17130F;
  --red: #A50E26;          /* red for text on newsprint: 6.4:1 */
  --red-bright: #C8102E;   /* stamps and large type */
  --green: #2B6630;
  --cream: #F3EBD9;
  --cream-2: #CFC5B2;
  --night: #15110E;
  --night-2: #221C17;
  --telegram: #F2E1A2;

  --f-head: 'Anton', 'Anton Fallback', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --f-body: 'Newsreader', 'Newsreader Fallback', 'Georgia', 'Times New Roman', serif;
  --f-type: 'Special Elite', 'Special Elite Fallback', 'Courier New', 'Courier', monospace;
  --f-plate: 'UnifrakturMaguntia', 'Old English Text MT', 'Times New Roman', serif;
  --f-vic: 'IM Fell English SC', 'Georgia', serif;
  --f-ww: 'Rye', 'Georgia', serif;
  --f-vg: 'Monoton', 'Anton', sans-serif;

  --gut: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --gap: 28px;
  --bar-h: 52px;
  --ease: cubic-bezier(.2, .9, .3, 1);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --wear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10 0 0 0 -2.55'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23w)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
/* overflow-x on html as well as body: mobile browsers size the layout viewport from the root, and body's clip alone
   let the hero stamp's entrance widen the page on phones. clip, not hidden, so the sticky bar still sticks. */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; overflow-x: clip;
  /* every jump (nav, contents, keyboard focus) lands below the sticky bar; the bottom keeps focus clear of the
     back-to-top button and the card table's score bar */
  scroll-padding-top: var(--bar-h);
  scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 400 1.0625rem/1.5 var(--f-body);
  font-optical-sizing: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
b, strong { font-weight: 800; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 3px; }
::selection { background: var(--red-bright); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the targets the nav and the contents jump to sit a little below the bar, never under it */
main [id] { scroll-margin-top: 12px; }
.sect:focus { outline: none; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 12px 16px; font: 1rem var(--f-type); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ the sheet */
.desk { padding: 0; }
.sheet {
  position: relative;
  max-width: 1400px; margin: 0 auto;
  padding: 0 var(--gut) calc(40px + env(safe-area-inset-bottom));
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(120,90,50,.16), transparent 50%),
    var(--noise);
}
@media (min-width: 1000px) {
  :root { --gut: 40px; --gap: 36px; }
  .sheet { padding-bottom: 48px; }
}
@media (min-width: 1460px) {
  .desk { padding: 28px 24px 56px; }
  .sheet { box-shadow: 0 2px 0 #d8cfbb, 0 30px 80px rgba(0,0,0,.55); }
}

/* ------------------------------------------------------------------ the nav bar
   The old black strap, now the paper's index: sticky at every width, one fixed height so nothing moves when the
   fonts land. Phones: wordmark, Play now and Menu. From 760px: every item, with Play now as the stamp-red button. */
.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  height: calc(var(--bar-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
  background: var(--ink); color: var(--cream);
  box-shadow: 0 1px 0 rgba(0,0,0,.4), 0 6px 14px rgba(23,19,15,.18);
}
.bar :focus-visible { outline-color: var(--cream); outline-offset: -3px; }
.bar-mark {
  flex: 0 1 auto; min-width: 0; margin-right: auto;
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--cream); text-decoration: none; white-space: nowrap; overflow: hidden;
  font: 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .04em;
}
.bar-nav { flex: none; }
.bar-list { display: flex; align-items: center; }
.bar-item { display: none; }
.bar-play {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px;
  background: var(--red-bright); color: #fff; text-decoration: none; border-radius: 3px;
  font: 1.0625rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--red-bright), inset 0 0 0 3px rgba(255,255,255,.75);
  transition: background-color .15s, transform .12s var(--ease);
}
.bar-play:hover { background: #a00c24; box-shadow: inset 0 0 0 2px #a00c24, inset 0 0 0 3px #fff; }
.bar-play:active { transform: scale(.97); }
.bar .bar-play:focus-visible { outline-offset: 2px; }
.bar-menu {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 11px;
  background: transparent; color: var(--cream); border: 1.5px solid rgba(243,235,217,.5); border-radius: 3px;
  font: .9375rem/1 var(--f-type); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bar-menu:hover, .bar-menu[aria-expanded="true"] { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.bar-menu-ico { position: relative; width: 16px; height: 12px; border-block: 2px solid currentColor; }
.bar-menu-ico i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
/* no script, no drawer: keep the button's room so the bar never shifts, but don't offer it */
html:not(.js) .bar-menu { visibility: hidden; }
/* small phones: the three things still share one line (measured: 360px leaves ~20px spare) */
@media (max-width: 419px) {
  .bar { gap: 8px; }
  .bar-mark { font-size: 1rem; letter-spacing: .02em; text-overflow: ellipsis; display: block; line-height: 44px; }
  .bar-play { padding: 0 10px; font-size: 1rem; gap: 5px; }
  .bar-menu { padding: 0 9px; gap: 6px; font-size: .875rem; }
}
@media (max-width: 349px) { .bar-mark { font-size: .875rem; } .bar-play span { display: none; } }

@media (min-width: 760px) {
  .bar-menu { display: none; }
  .bar-mark { display: none; }
  .bar-nav { flex: 1; min-width: 0; }
  .bar-list { justify-content: space-between; }
  .bar-item { display: flex; align-items: center; }
  .bar-item a {
    position: relative; display: flex; align-items: center; height: var(--bar-h); padding: 0 8px;
    color: var(--cream); text-decoration: none; white-space: nowrap; font: .875rem/1 var(--f-type);
  }
  .bar-item a::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 11px; height: 2px; background: var(--red-bright);
    transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
  }
  .bar-item a:hover::after, .bar-item a[aria-current]::after { transform: scaleX(1); }
  .bar-item a[aria-current] { color: #fff; }
  .bar-item--ext a { color: var(--cream-2); }
  .bar-item--ext a:hover { color: #fff; }
  /* a hairline between the paper's own sections and the two that leave for GitHub */
  .bar-item--ext:nth-child(4)::before { content: ""; width: 1px; height: 20px; margin-right: 6px; background: rgba(243,235,217,.28); }
  .ext { margin-left: 3px; font-size: .85em; }
  .bar-go { margin-left: 8px; }
}
@media (min-width: 1000px) {
  .bar { gap: 20px; }
  .bar-mark { display: inline-flex; margin-right: 0; }
  .bar-list { justify-content: flex-end; gap: 4px; }
  .bar-item a { padding: 0 10px; font-size: .9375rem; }
  .bar-item a::after { left: 10px; right: 10px; }
  .bar-go { margin-left: 12px; }
}

/* ------------------------------------------------------------------ masthead */
.mast-row { display: grid; grid-template-columns: 1fr; align-items: center; padding: 14px 0 6px; }
.nameplate {
  font-family: var(--f-plate); font-weight: 400;
  font-size: clamp(1.9rem, 11.6vw, 8.75rem); line-height: 1.02; text-align: center; letter-spacing: -.005em;
  white-space: nowrap;
  height: 1.02em; /* the same box in the fallback face and the blackletter */
}
.ear { display: none; }
@media (min-width: 760px) {
  .mast-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; }
  .ear {
    display: block; max-width: 220px; padding: 8px 10px; border: 1.5px solid var(--ink);
    font: .8125rem/1.35 var(--f-type); text-align: center;
  }
  .ear-r { justify-self: end; }
  .ear-h { display: block; font: 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
  /* a fixed box (the blackletter measures 7.3em), so the ears' columns don't change width when the face arrives */
  .nameplate { font-size: clamp(3.5rem, 7.4vw, 7rem); width: 7.3em; }
}

/* the dateline stays on one line whatever the font, so the swap from the fallback face moves nothing below it */
.folio {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 18px;
  border-top: 4px double var(--rule); border-bottom: 1.5px solid var(--rule);
  padding: 7px 0 6px;
  font: .8125rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .05em; text-align: center;
}
.folio > span { white-space: nowrap; }
.folio-mid { display: none; }
@media (max-width: 639px) {
  .folio-no { display: none; }
  .folio-eras { font-size: max(.75rem, 3vw); letter-spacing: .02em; }
}
.folio-eras i { font-style: normal; }
@media (max-width: 379px) { .folio-eras i { display: none; } }
@media (min-width: 1000px) {
  .folio { justify-content: space-between; }
  .folio-mid { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: .02em; }
}

/* the gossip ticker: sits under the splash, so on phones the hero gets the first screen */
.ticker {
  display: flex; align-items: center; gap: 12px; min-height: 48px; overflow: hidden;
  border-bottom: 4px double var(--rule);
}
.ticker-tag {
  flex: none; background: var(--red-bright); color: #fff;
  font: .9375rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px 5px;
}
/* on phones the label takes two lines, so the gossip keeps most of the width */
@media (max-width: 639px) { .ticker-tag { max-width: 8.4em; } }
.ticker-window {
  flex: 1; min-width: 0; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ticker-track { flex: none; display: flex; gap: 0; white-space: nowrap; animation: tick 95s linear infinite; }
.ticker-track li { font: italic 400 1rem/1.4 var(--f-body); padding: 0 28px 0 0; }
.ticker-track li::before { content: "✶"; font-style: normal; color: var(--red); margin-right: 12px; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.is-paused .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-100%); } }
.ticker-toggle {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 50%;
}
.ticker-toggle span { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.ticker.is-paused .ticker-toggle span { width: 0; height: 0; border: 0; border-left: 13px solid currentColor; border-block: 8px solid transparent; margin-left: 4px; }
.ticker-toggle:hover { background: var(--ink); color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; white-space: normal; flex: 1 1 auto; min-width: 0; }
  .ticker-track li { white-space: normal; padding-right: 0; }
  .ticker-track[aria-hidden="true"], .ticker-track li:not(:first-child) { display: none; }
  .ticker-window { -webkit-mask-image: none; mask-image: none; padding: 6px 0; }
  .ticker-toggle { display: none; }
}

/* ------------------------------------------------------------------ shared type
   Anton's capitals stand .86em tall, so any leading under ~.95 lets stacked lines touch. Display heads run at 1.0 to
   1.04: still tabloid-tight, never touching (measured glyph gaps in the verification notes). */
.label {
  font: .875rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .12em;
  border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 7px 0 6px; margin-bottom: 14px;
}
.label--red { color: var(--red); border-color: var(--red); }
.hed { font-family: var(--f-head); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.hed--xl { font-size: clamp(2.1rem, 6.4vw, 3.9rem); line-height: 1.04; margin-bottom: 12px; }
.hed--l { font-size: clamp(1.9rem, 4.6vw, 2.75rem); line-height: 1.04; margin-bottom: 10px; }
.hed--m, .hed--s { font-family: var(--f-body); font-weight: 800; text-transform: none; letter-spacing: -.01em; }
.hed--m { font-size: 1.625rem; line-height: 1.14; margin-bottom: 8px; }
.hed--s { font-size: 1.3125rem; line-height: 1.16; margin-bottom: 8px; }
.byline { font: .875rem/1.3 var(--f-type); color: var(--ink-2); margin-bottom: 14px; }
.deck { font-style: italic; font-size: 1.25rem; line-height: 1.3; margin-bottom: 16px; max-width: 60ch; }
.story p:not([class]), .story .dropcap { margin-bottom: .85em; }
.small { font-size: .9375rem; color: var(--ink-2); }
.dropcap::first-letter {
  float: left; font-family: var(--f-head); font-weight: 400; color: var(--red);
  font-size: 4.1em; line-height: .78; padding: .06em .08em 0 0;
}
.pull { border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0 10px; margin: 6px 0 16px; break-inside: avoid; }
.pull p { font: italic 600 1.5rem/1.22 var(--f-body); }
.pull footer { font: .8125rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; color: var(--ink-2); }
.pull--small p { font-size: 1.3rem; }

/* section flags: the three places the nav goes to, named in the paper's own voice */
.sect { padding-top: 28px; }
.flag {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px;
  border-top: 6px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 9px 0 8px;
}
.flag-name {
  display: flex; align-items: center; gap: .3em;
  font: 400 1.875rem/1.04 var(--f-head); text-transform: uppercase; letter-spacing: .03em;
}
.flag-name::before { content: ""; flex: none; width: .46em; height: .46em; background: var(--red-bright); }
.flag-note { font: .8125rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
@media (min-width: 1000px) { .flag-name { font-size: 2.25rem; } .flag-note { font-size: .875rem; } }

/* halftone: newsprint portraits; ink comes back to colour under a pointer */
.ht { position: relative; overflow: hidden; background: var(--paper-2); border: 1px solid var(--ink); }
.ht img { width: 100%; filter: grayscale(1) contrast(1.32) brightness(1.06) sepia(.14); transition: filter .6s var(--ease); }
.ht::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgba(23,19,15,.9) 0 .85px, transparent 1.35px);
  background-size: 4px 4px; mix-blend-mode: multiply; opacity: .42; transition: opacity .6s var(--ease);
}
.ht figcaption { position: relative; z-index: 1; background: var(--paper); border-top: 1px solid var(--ink); padding: 6px 8px; font: .8125rem/1.35 var(--f-type); }
@media (hover: hover) and (pointer: fine) {
  .ht:hover img { filter: none; }
  .ht:hover::after { opacity: 0; }
}

/* ------------------------------------------------------------------ splash */
.splash { padding: 18px 0 26px; border-bottom: 4px double var(--rule); }
.kicker {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
  font: 1rem/1.25 var(--f-type); text-transform: uppercase; letter-spacing: .08em; text-align: center;
}
.kicker-tag { white-space: nowrap; background: var(--red-bright); color: #fff; font: 1.125rem/1 var(--f-head); letter-spacing: .08em; padding: 6px 10px 5px; }
.kicker-text { text-wrap: balance; }
@media (max-width: 639px) { .kicker { font-size: .875rem; letter-spacing: .05em; } }
.splash-h {
  font-family: var(--f-head); font-weight: 400; text-transform: uppercase; text-align: center;
  font-size: clamp(3.4rem, 16.2vw, 11.25rem); line-height: 1; letter-spacing: -.004em;
  margin: 12px 0 18px; text-wrap: balance;
}
@media (min-width: 1000px) { .splash-h { font-size: clamp(6rem, 10.4vw, 9.4rem); margin: 8px 0 16px; } .splash { padding-top: 12px; } }
@media (prefers-reduced-motion: no-preference) {
  .splash-h { animation: press .7s var(--ease) both; }
  @keyframes press { from { transform: scale(1.06); filter: blur(2px); } to { transform: none; filter: none; } }
}

/* phones read top to bottom: hook, stamp, photographs, then the rest of the pitch and the contents.
   From 760px the photographs take the left column and the copy stacks on the right. */
.splash-grid { display: grid; gap: 22px; }
.splash-lede, .splash-more { display: grid; gap: 18px; align-content: start; min-width: 0; }
.splash-pics {
  display: grid; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; gap: 8px;
}
.pic { position: relative; min-width: 0; }
.pic img { width: 100%; border: 1px solid var(--ink); background: var(--paper-2); }
.pic-dolly { grid-row: 1 / 3; }
.pic-fanny img, .pic-jackie img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pic-cap { display: none; }
.pics-cap { grid-column: 1 / -1; font: .875rem/1.4 var(--f-type); color: var(--ink-2); padding-top: 2px; }

@media (min-width: 640px) and (max-width: 999px) { .splash-h { font-size: 14.2vw; } }
@media (min-width: 640px) and (max-width: 759px) {
  .splash-pics { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 14px; }
  .pic-dolly { grid-row: auto; }
  .pic-fanny img, .pic-jackie img { position: static; height: auto; aspect-ratio: 3 / 4; }
  .pic-dolly img { aspect-ratio: 3 / 4; object-fit: cover; }
  .pic-cap { display: block; font: .875rem/1.4 var(--f-type); margin-top: 8px; }
  .pic-cap b { font-family: var(--f-body); font-weight: 800; font-size: .95rem; }
  .pics-cap { display: none; }
}

.standfirst { font-family: 'Newsreader', 'Newsreader Display Fallback', 'Georgia', serif; font-size: 1.1875rem; line-height: 1.38; font-variation-settings: 'opsz' 36; max-width: 58ch; }
.standfirst strong { display: block; font-size: 1.2em; line-height: 1.16; margin-bottom: 6px; text-wrap: balance; }
.standfirst--more { font-size: 1.0625rem; line-height: 1.45; }
.standfirst--more a { color: var(--red); font-weight: 600; text-underline-offset: 3px; }
.splash-lede .stamp-wrap { padding: 0 0 4px; }
@media (max-width: 379px) { .standfirst { font-size: 1.125rem; } }

@media (min-width: 760px) {
  .splash-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; gap: 0; align-items: start; }
  /* the photographs keep their own height; the column rule belongs to the copy, which is the taller side */
  .splash-pics { grid-column: 1; grid-row: 1 / span 2; padding-right: var(--gap); gap: 12px; align-self: start; }
  .splash-lede { grid-column: 2; grid-row: 1; padding-left: var(--gap); gap: 14px; border-left: 1px solid var(--rule); align-self: stretch; }
  .splash-more { grid-column: 2; grid-row: 2; padding-left: var(--gap); padding-top: 16px; gap: 16px; border-left: 1px solid var(--rule); align-self: stretch; }
  .standfirst { font-size: 1.15rem; line-height: 1.36; }
  .standfirst--more { font-size: 1rem; }
  .splash-lede .stamp { min-width: 0; padding-inline: 20px; }
  .splash-lede .stamp-wrap { padding: 2px 0 4px; }
}
/* tablet portrait: the copy column is too narrow for the contents list, so the rest of the pitch runs full width */
@media (min-width: 760px) and (max-width: 999px) {
  .splash-pics { grid-row: 1; }
  .splash-more {
    grid-column: 1 / -1; grid-row: 2; padding-left: 0; border-left: 0;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule);
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); align-items: start;
  }
  .splash-more .inside { border-top: 0; }
  .splash-more .inside-h { padding-top: 0; }
}
@media (min-width: 1000px) and (max-width: 1279px) { .standfirst { font-size: 1.2rem; } .standfirst--more { font-size: 1.05rem; } }
@media (min-width: 1280px) { .standfirst { font-size: 1.3rem; } .standfirst--more { font-size: 1.125rem; } }
@media (min-width: 1000px) {
  .pics-cap { display: none; }
  .pic-cap {
    display: block; position: absolute; left: 1px; right: 1px; bottom: 1px; z-index: 1;
    padding: 7px 10px 6px; background: rgba(239,232,215,.94); border-top: 1px solid var(--ink);
    font: .8125rem/1.35 var(--f-type);
  }
  .pic-cap b { font-family: var(--f-body); font-weight: 800; font-size: .9rem; }
  .splash-lede .stamp { padding-inline: 26px; }
  .splash-more .inside a { font-size: .975rem; }
}

/* the rubber stamp CTA */
.stamp-wrap { display: grid; justify-items: center; gap: 12px; padding: 8px 0; }
.stamp-wrap--center { justify-items: center; }
.stamp {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  min-width: min(100%, 300px); padding: 12px 26px 11px;
  color: var(--red-bright); text-decoration: none; text-align: center;
  border: 4px solid currentColor;
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px currentColor;
  background: rgba(255,255,255,.18);
  transform: rotate(-4deg);
  transition: transform .18s var(--ease), background-color .18s, color .18s;
  -webkit-mask-image: var(--wear); mask-image: var(--wear);
}
.stamp-top, .stamp-bot { font: .9375rem/1.1 var(--f-type); text-transform: uppercase; letter-spacing: .14em; }
.stamp-main { font: 3.4rem/1.02 var(--f-head); text-transform: uppercase; letter-spacing: .02em; margin: 4px 0 2px; white-space: nowrap; }
.stamp:hover { background: var(--red-bright); color: #fff; box-shadow: inset 0 0 0 3px var(--red-bright), inset 0 0 0 5px #fff; transform: rotate(-2.5deg) scale(1.03); }
.stamp:active { transform: rotate(-2.5deg) scale(.97); }
.stamp:focus-visible { outline: 3px solid var(--ink); outline-offset: 8px; -webkit-mask-image: none; mask-image: none; }
.stamp--big .stamp-main { font-size: clamp(3.4rem, 10vw, 5.4rem); }
.stamp-note { font: .875rem/1.3 var(--f-type); color: var(--ink-2); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  /* starts barely larger than it lands, so the entrance never spills past a phone's edge */
  #hero-cta { animation: thump .5s .4s var(--ease) both; }
  @keyframes thump {
    0% { opacity: 0; transform: rotate(-4deg) scale(1.1); }
    65% { opacity: 1; transform: rotate(-4deg) scale(.95); }
    100% { opacity: 1; transform: rotate(-4deg) scale(1); }
  }
}

/* inside-today index: the second way in, two columns at every width */
.inside { border-top: 3px solid var(--rule); }
.inside-h { font: 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; padding: 10px 0 6px; }
.inside ol { counter-reset: inside; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
.inside li { counter-increment: inside; border-top: 1px dotted var(--ink-2); }
.inside a {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0;
  text-decoration: none; font-size: 1rem; line-height: 1.25;
}
.inside a::before { content: counter(inside); flex: none; width: 1.3em; font: 1.25rem/1 var(--f-head); color: var(--red); }
.inside a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ how to play
   The lead story, the first-night box (a strip across the page from 760px), then the card table, six cards abreast
   from 1000px. */
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.how-grid > .story { padding: 22px 0 6px; min-width: 0; }
.how-side { min-width: 0; padding: 4px 0 4px; }
.story > p:not([class]), .story > .deck, .story > .small { max-width: 56ch; }

.first {
  padding: 14px 16px 12px; background: var(--paper-3);
  border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
.first-h { font: 1.375rem/1.06 var(--f-head); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; text-wrap: balance; }
.first-steps { counter-reset: step; display: grid; gap: 8px; margin-bottom: 10px; }
.first-steps li { counter-increment: step; display: flex; align-items: center; gap: 10px; font: 600 1.125rem/1.25 var(--f-body); }
.first-steps li::before {
  content: counter(step); flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--red-bright); color: #fff; font: 1rem/1 var(--f-head);
}
.first-foot { font-style: italic; border-top: 1px dotted var(--ink-2); padding-top: 8px; }
.first-go {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  font: 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .05em; color: var(--red); text-underline-offset: 4px;
}
@media (min-width: 760px) {
  .first {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "h steps go" "h foot go";
    align-items: center; column-gap: 28px; row-gap: 8px; padding: 14px 22px 14px;
  }
  .first-h { grid-area: h; max-width: 8.5em; margin: 0; padding-right: 26px; border-right: 1px solid var(--rule); align-self: stretch; display: flex; align-items: center; }
  .first-steps { grid-area: steps; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; }
  .first-foot { grid-area: foot; border-top: 0; padding-top: 0; }
  .first-go {
    grid-area: go; margin: 0; padding: 0 16px; background: var(--red-bright); color: #fff; text-decoration: none; border-radius: 3px;
    box-shadow: inset 0 0 0 2px var(--red-bright), inset 0 0 0 3px rgba(255,255,255,.75);
  }
  .first-go:hover { background: #a00c24; }
}

/* lead story body: two newspaper columns once there is room */
.story-body { display: flow-root; }
.inset { margin-bottom: 14px; }
.inset--right { float: right; width: 42%; margin: 4px 0 10px 16px; }
@media (min-width: 700px) {
  .story-body { columns: 2; column-gap: var(--gap); column-rule: 1px solid var(--rule); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .story-body .inset--right { float: none; width: 100%; margin: 0 0 14px; break-inside: avoid; }
  .story-body .inset--right img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; }
  .story-body .pull { text-align: left; }
}
/* the full width of a desktop: the portrait takes its own column, and the copy runs in two beside it, so the
   drop cap always opens a column */
@media (min-width: 1000px) {
  .story-body { columns: auto; column-rule: none; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); align-items: start; }
  .story-body .inset--right { margin: 0; }
  .story-text { columns: 2; column-gap: var(--gap); column-rule: 1px solid var(--rule); padding-left: var(--gap); border-left: 1px solid var(--rule); }
}

/* ------------------------------------------------------------------ try your hand */
.hand {
  margin: 22px 0 30px; padding: 18px 16px 20px;
  background: var(--paper-3); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.hand-intro { max-width: 54ch; margin-bottom: 14px; }
.hand-gent { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: 14px; }
.hand-gent img { width: 88px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 15%; border: 1px solid var(--ink); }
.hand-gent dl { display: grid; gap: 4px; }
.hand-gent dl > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.hand-gent dt { font: .8125rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); min-width: 9.5em; }
.hand-gent dd { font-size: 1rem; }
.hand-gent small { font-size: .875rem; color: var(--ink-2); }
@media (min-width: 700px) { .hand-gent { grid-template-columns: 110px minmax(0, 1fr); } .hand-gent img { width: 110px; } .hand-gent dl { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
@media (min-width: 1000px) {
  .hand { padding: 22px 24px 22px; }
  .hand-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: end; }
  .hand-head .label { grid-column: 1 / -1; }
  .hand-head .hed { margin: 0 0 14px; }
  .hand-gent { align-items: center; }
  .hand-gent dl { display: flex; flex-wrap: wrap; gap: 8px 40px; }
  .hand-gent dt { min-width: 0; }
}

.art { display: inline-block; white-space: nowrap; border: 1px solid var(--ink); border-radius: 999px; padding: 0 .5em; font-size: .9375rem; line-height: 1.5; background: #fff8; }
.art--bad { border-color: var(--red); color: var(--red); }
.art--secret { border-style: dashed; min-width: 2.2em; text-align: center; }
.art--secret.is-known { border-style: solid; border-color: var(--green); color: var(--green); }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
.card {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: 0 0 10px; text-align: left; cursor: pointer;
  background: #FBF7EC; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 8px;
  font: inherit; overflow: hidden;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s, opacity .16s;
}
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-bottom: 1.5px solid var(--ink); }
@media (min-width: 560px) { .card img { aspect-ratio: 1; } }
.card-name { font: 800 1.0625rem/1.15 var(--f-body); padding: 8px 10px 2px; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 2px 10px 4px; font: .8125rem/1.3 var(--f-type); }
.card-meta .art { font-family: var(--f-body); }
.card-flav { padding: 0 10px; font: italic .875rem/1.3 var(--f-body); color: var(--ink-2); }
.card-score {
  position: absolute; top: 8px; right: 8px; min-width: 2.4em; padding: 4px 8px 3px; border-radius: 999px;
  font: 1.125rem/1 var(--f-head); text-align: center; color: #fff; background: var(--ink);
  opacity: 0; transform: scale(.6); transition: opacity .16s, transform .16s var(--ease);
}
@media (min-width: 1000px) { .card img { aspect-ratio: 4 / 3; } }
.card:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
.card[aria-pressed="true"] { border-color: var(--red-bright); box-shadow: 0 0 0 3px var(--red-bright), 0 10px 18px rgba(0,0,0,.18); transform: translateY(-4px); }
.card[aria-pressed="true"] .card-score { opacity: 1; transform: none; }
.card-score.is-good { background: var(--green); }
.card-score.is-bad { background: var(--red-bright); }
.card[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.card[aria-pressed="true"][aria-disabled="true"] { opacity: 1; cursor: default; }
.card:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) { .card:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,.14); } }

/* the score and the Seal button ride along at the bottom of the screen while the hand is in view,
   so the cards, the total and the two marks to beat are visible together */
.sway-parts { margin-top: 14px; }
.hand-foot {
  margin: 12px -16px 0; padding: 8px 16px 10px;
  background: var(--paper-3); border-top: 2px solid var(--ink);
}
@media (min-width: 1000px) { .hand-foot { margin-inline: -24px; padding-inline: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; } }
.js .hand-foot {
  position: sticky; bottom: 0; z-index: 5;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 16px rgba(23,19,15,.10);
}
.sway-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.sway-num { font: 1.125rem/1 var(--f-type); }
.sway-label { text-transform: uppercase; letter-spacing: .06em; font-size: .875rem; }
.sway-num b { font: 2.25rem/1 var(--f-head); font-weight: 400; margin-left: 6px; }
.sway-picked { font: .875rem/1 var(--f-type); color: var(--ink-2); }
.sway-bar { position: relative; height: 14px; margin: 22px 0 22px; border: 2px solid var(--ink); background: #fff; }
.sway-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink); transition: width .35s var(--ease), background-color .2s; }
.sway-fill.is-short { background: var(--red-bright); }
.sway-fill.is-win { background: var(--green); }
.sway-mark { position: absolute; top: -8px; bottom: -8px; width: 0; border-left: 2px dashed var(--ink); }
.sway-mark i { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font: normal .75rem/1 var(--f-type); }
.sway-mark--bar { left: 55.55%; }
.sway-mark--bar i { top: calc(100% + 4px); }
.sway-mark--lav { left: 66.66%; border-color: var(--red); }
.sway-mark--lav i { bottom: calc(100% + 4px); color: var(--red); }
.sway-parts { font-size: .9375rem; color: var(--ink-2); min-height: 1.5em; }

.hand-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.hand-actions .btn { flex: 1 1 auto; }
@media (max-width: 559px) {
  .hand-actions { flex-wrap: nowrap; gap: 8px; }
  .hand-actions .btn { font-size: 1rem; padding: 0 12px; letter-spacing: .04em; }
  .hand-actions #seal { flex: 1 1 auto; }
  .hand-actions #redeal { flex: 0 0 auto; }
  .hand-gent dt { min-width: 8em; }
}
@media (min-width: 560px) { .hand-actions .btn { flex: 0 0 auto; } }
.btn {
  min-height: 48px; padding: 0 20px; border-radius: 4px; cursor: pointer;
  font: 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em;
  transition: transform .12s var(--ease), background-color .15s, color .15s;
}
.btn--ink { background: var(--red-bright); color: #fff; border: 2px solid var(--red-bright); }
.btn--ink:hover:not(:disabled) { background: #a00c24; }
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--ghost:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.verdict { margin-top: 18px; padding: 16px; border: 2px solid var(--ink); background: var(--paper); scroll-margin-bottom: 96px; }
.verdict:focus { outline: none; }
.verdict:focus-visible { outline: 3px solid var(--red-bright); }
.verdict-h { font: clamp(1.8rem, 5vw, 2.4rem)/1.04 var(--f-head); text-transform: uppercase; margin-bottom: 8px; }
.verdict-h.is-win { color: var(--green); }
.verdict-h.is-lose { color: var(--red); }
.verdict-react { font: italic 600 1.2rem/1.3 var(--f-body); margin-bottom: 8px; }
.verdict-tip { font-size: 1rem; margin-bottom: 6px; }
.verdict-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font: 1.125rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .05em; color: var(--red); text-underline-offset: 4px; }
.no-js-note { margin-top: 12px; font-style: italic; }
.js .no-js-note { display: none; }
html:not(.js) .hand-foot, html:not(.js) .sway-parts { display: none; }

/* ------------------------------------------------------------------ strategy
   The climb and the rivals side by side from 1000px, then the two roads across the page, then Coming Soon. */
.strat-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.strat-grid > .story { padding: 22px 0 28px; min-width: 0; }
.strat-grid > .story + .story { border-top: 4px double var(--rule); }
@media (min-width: 1000px) {
  .strat-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .strat-grid > .story:first-child { padding-right: var(--gap); }
  .strat-grid > .story + .story { border-top: 0; border-left: 1px solid var(--rule); padding-left: var(--gap); }
}
.story--roads { border-top: 4px double var(--rule); padding: 24px 0 30px; }

/* the climb: one line of titles, the full table on request */
.rungs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; margin: 14px 0 4px; font: italic 600 1.0625rem/1.3 var(--f-body); }
.rungs > * { white-space: nowrap; }
.rungs > *:not(:last-child)::after { content: "▸"; font-style: normal; color: var(--red); margin: 0 8px; font-size: .8em; }
.rungs b { font-weight: 800; color: var(--red); }
.exchange { margin: 12px 0 16px; border: 2px solid var(--ink); background: var(--paper-3); }
.exchange summary {
  display: flex; align-items: center; min-height: 48px; cursor: pointer; list-style: none;
}
.exchange summary::-webkit-details-marker { display: none; }
.exchange summary::after {
  content: "+"; flex: none; margin: 0 12px 0 auto; font: 1.5rem/1 var(--f-head); color: var(--red);
}
.exchange[open] summary::after { content: "−"; }
.exchange[open] summary { border-bottom: 2px solid var(--ink); }
.exchange-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; font: .8125rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .05em; }
.exchange-h span { font: 1.25rem/1 var(--f-head); letter-spacing: .06em; }
.exchange summary:hover .exchange-h { text-decoration: underline; text-underline-offset: 3px; }
.exchange table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.exchange th, .exchange td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px dotted var(--ink-2); }
.exchange thead th { font: .75rem/1.2 var(--f-type); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--ink); }
.exchange tbody th { font: 1rem/1.2 var(--f-head); font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.exchange .num { text-align: right; font-family: var(--f-head); font-size: 1.125rem; }
.exchange tr.mythic { background: var(--ink); color: var(--cream); }
.exchange tr.mythic th, .exchange tr.mythic td { border-bottom: 0; }
/* right padding keeps the note to a readable measure when the table runs full width */
.exchange-note { padding: 8px max(10px, calc(100% - 60ch)) 8px 10px; font-size: .875rem; color: var(--ink-2); border-top: 1px solid var(--ink); }
.kicker-line { font-size: 1.0625rem; max-width: 60ch; }
/* stacked rows where the table can't breathe: phones, and the climb's column on small desktops */
@media (max-width: 559px), (min-width: 1000px) and (max-width: 1279px) {
  .exchange thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .exchange tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 10px; border-bottom: 1px dotted var(--ink-2); }
  .exchange tr.mythic { border-bottom: 0; }
  .exchange th, .exchange td { border: 0; padding: 0; }
  .exchange tbody th { grid-column: 1; }
  .exchange .num { grid-column: 2; grid-row: 1; }
  .exchange td:not(.num) { grid-column: 1 / -1; display: flex; gap: 8px; font-size: .9375rem; line-height: 1.35; }
  .exchange td:not(.num)::before { content: attr(data-l); flex: none; width: 8.2em; font: .75rem/1.8 var(--f-type); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
  .exchange tr.mythic td:not(.num)::before { color: var(--cream-2); }
  .exchange tbody th { margin-bottom: 2px; }
}

/* rivals and the boards */
#rivals .inset { float: right; width: 42%; margin: 4px 0 10px 16px; }
@media (min-width: 1000px) { #rivals .inset { width: 46%; } }
.boards { clear: both; margin-top: 18px; border: 2px solid var(--ink); padding: 10px 12px 12px; background: var(--paper-3); }
.boards-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 6px; font: 1.375rem/1.04 var(--f-head); text-transform: uppercase; letter-spacing: .06em; }
.boards-h span { font: .8125rem/1 var(--f-type); letter-spacing: .08em; color: var(--ink-2); }
.boards-line { font-size: 1rem; line-height: 1.45; max-width: 56ch; }

/* roads */
.roads { display: grid; gap: 22px; margin-bottom: 18px; }
@media (min-width: 560px) { .roads { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; } .road--high { padding-right: 18px; } .road--low { padding-left: 18px; border-left: 1px solid var(--rule); } }
.road .ht { margin-bottom: 10px; }
@media (min-width: 1000px) {
  .roads { gap: 0; }
  .road { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 22px; align-content: start; }
  .road .ht { grid-row: 1 / span 5; margin: 0; align-self: start; }
  .road .ht img { aspect-ratio: 3 / 4; }
  .road > :not(.ht) { grid-column: 2; }
  .road--high { padding-right: var(--gap); }
  .road--low { padding-left: var(--gap); }
  #roads > .label, #roads > .hed, #roads > .deck { text-align: center; max-width: none; }
  .roads-line { max-width: 900px; margin-inline: auto; }
  #roads > .small { text-align: center; max-width: none; }
}
.road .ht img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; }
.road-paper { padding: 4px 0; margin-bottom: 6px; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; }
.road--high .road-paper { font: italic 600 1.25rem/1.2 var(--f-body); letter-spacing: .02em; }
.road--low .road-paper { font: 1.25rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.road p:not([class]) { font-size: 1rem; margin-bottom: 8px; }
.road-top { font-size: .9375rem; border-top: 1px dotted var(--ink-2); padding-top: 6px; }
.roads-line { font: italic 600 clamp(1.35rem, 3.4vw, 1.75rem)/1.22 var(--f-body); text-align: center; padding: 14px 0; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 10px; text-wrap: balance; }

/* coming soon */
.next {
  margin-inline: calc(-1 * var(--gut)); padding: 30px var(--gut) 40px;
  background: var(--night-2); color: var(--cream); border-top: 6px solid var(--red-bright);
}
.next :focus-visible { outline-color: var(--cream); }
.next-head { text-align: center; margin-bottom: 24px; }
.next-title { font: 400 clamp(2.6rem, 9vw, 5.6rem)/1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.next-sub { font: .9375rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .1em; color: var(--cream-2); margin-top: 8px; }
.next-grid { display: grid; gap: 30px; }
.notice {
  display: grid; background: #E9E3D3; color: var(--ink); border: 1px solid #000;
  box-shadow: 0 0 0 6px var(--night-2), 0 0 0 7px #6A5D50;
}
.notice-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.8); }
.notice-body { padding: 18px 18px 22px; text-align: center; }
.notice-label { display: inline-block; font: 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .3em; padding: 5px 4px 4px .3em; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); margin-bottom: 12px; }
.notice-h { font: 800 clamp(1.5rem, 4vw, 2.2rem)/1.12 var(--f-body); margin-bottom: 12px; text-wrap: balance; }
.notice-body p:not([class]) { font-size: 1.0625rem; max-width: 52ch; margin: 0 auto 12px; }
.notice-foot { font: .9375rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .06em; }
.next-item { min-width: 0; display: flow-root; }
@media (max-width: 639px) {
  .next-item .ht { float: left; width: 40%; margin: 4px 14px 8px 0; }
  .next-item .ht.ht--dark img { aspect-ratio: 3 / 4; }
  .said { clear: both; }
}
.next-item .ht { margin-bottom: 12px; border-color: #000; }
.next-item .ht img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 18%; }
.ht--dark { background: #2c241e; }
.next-item .hed--s { color: var(--cream); font-size: 1.375rem; }
.next-item p:not([class]) { color: #E3D9C4; font-size: 1rem; margin-bottom: 10px; }
.said { font: italic 600 1.0625rem/1.3 var(--f-body); color: var(--cream); border-left: 3px solid var(--red-bright); padding-left: 10px; }
.said span { display: block; font: normal .8125rem/1.3 var(--f-type); color: var(--cream-2); margin-top: 4px; }
@media (min-width: 640px) {
  .next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notice { grid-column: 1 / -1; }
}
@media (min-width: 760px) { .notice { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .notice-pic img { height: 100%; aspect-ratio: auto; } .notice-body { display: flex; flex-direction: column; justify-content: center; padding: 26px 28px; } }
@media (min-width: 1000px) {
  .next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; row-gap: 34px; }
  .next-item { padding: 0 var(--gap); }
  .next-item:nth-child(2) { padding-left: 0; }
  .next-item:last-child { padding-right: 0; }
  .next-item + .next-item { border-left: 1px solid #4A4038; }
}

/* ------------------------------------------------------------------ what the papers say
   Three cuttings pasted onto the sheet: torn edges, a strip of tape, each under its own paper's masthead. */
.papers { padding-bottom: 30px; }
.clips { display: grid; gap: 34px; margin: 34px 0 22px; padding: 0 4px; }
@media (min-width: 760px) { .clips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-items: start; padding: 0; } }
.clip { position: relative; filter: drop-shadow(0 1px 0 rgba(23,19,15,.18)) drop-shadow(2px 7px 9px rgba(60,40,10,.2)); }
.clip figure {
  padding: 18px 18px 22px; background-color: var(--paper-3); background-image: var(--noise);
  clip-path: polygon(0 1.6%, 7% 0, 15% 1.4%, 27% .2%, 39% 1.5%, 52% 0, 64% 1.6%, 77% .3%, 89% 1.5%, 100% .4%, 100% 98.4%, 92% 100%, 80% 98.6%, 67% 99.8%, 54% 98.5%, 41% 100%, 29% 98.6%, 17% 99.8%, 7% 98.5%, 0 99.6%);
}
.clip::before {
  content: ""; position: absolute; top: -11px; left: 50%; z-index: 1; width: 86px; height: 24px; margin-left: -43px;
  background: rgba(240,222,150,.72); transform: rotate(-3deg);
}
.clip--lon { transform: rotate(-1.2deg); }
.clip--ww { transform: rotate(.9deg); }
.clip--ww::before { transform: rotate(4deg); margin-left: -30px; }
.clip--vg { transform: rotate(-.5deg); }
@media (min-width: 760px) { .clip--ww { margin-top: 18px; } }
.clip-src { display: block; text-align: center; }
.clip-paper { display: block; color: var(--ink); text-wrap: balance; }
.clip--lon .clip-paper { font: 400 1.75rem/1.12 var(--f-plate); }
.clip--ww .clip-paper { font: 400 1.4rem/1.15 var(--f-ww); }
.clip--vg .clip-paper { font: 400 1.75rem/1.04 var(--f-head); text-transform: uppercase; letter-spacing: .04em; color: var(--red-bright); }
.clip-date {
  display: block; margin: 8px 0 14px; padding: 4px 0 3px;
  border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink);
  font: .75rem/1.2 var(--f-type); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2);
}
.clip-q p { font: italic 600 1.375rem/1.26 var(--f-body); text-wrap: pretty; }
.clip-q p::before { content: "“"; }
.clip-q p::after { content: "”"; }
@media (min-width: 1000px) { .clip-q p { font-size: 1.5rem; } .clip figure { padding: 22px 24px 26px; } }
.papers-note { font: italic .9375rem/1.4 var(--f-body); color: var(--ink-2); text-align: center; }

/* ------------------------------------------------------------------ colour supplement */
.supplement {
  margin-inline: calc(-1 * var(--gut)); padding: 34px var(--gut) 40px;
  background: var(--night); color: var(--cream);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(201,162,74,.16), transparent 60%);
}
.supplement :focus-visible { outline-color: var(--cream); }
.supp-head { text-align: center; max-width: 760px; margin: 0 auto 26px; }
.label--cream { border-color: var(--cream); display: inline-block; padding-inline: 4px; }
.supp-intro { font-size: 1.125rem; line-height: 1.45; color: #E3D9C4; max-width: 29em; margin-inline: auto; }
.eras { display: grid; gap: 34px; }
.era { min-width: 0; }
.era-pic { position: relative; margin-bottom: 40px; }
.era-place { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid #000; }
.era-girl {
  position: absolute; left: 12px; bottom: -30px; width: 30%; max-width: 150px; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 15%;
  border: 4px solid var(--cream); box-shadow: 0 8px 20px rgba(0,0,0,.6); transform: rotate(-3deg);
}
.era-name { font-weight: 400; line-height: 1.12; margin: 0 0 4px; }
.era--vic .era-name { font-family: var(--f-vic); font-size: 2.1rem; color: #D8B45E; }
.era--ww .era-name { font-family: var(--f-ww); font-size: 1.85rem; color: #EDA867; }
.era--vg .era-name { font-family: var(--f-vg); font-size: 2.15rem; color: #FF4FAE; text-shadow: 0 0 10px rgba(255,46,154,.65), 0 0 22px rgba(255,46,154,.35); letter-spacing: .02em; }
.era-sub { font: .875rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .08em; color: var(--cream-2); margin-bottom: 12px; }
.era-quote { border-left: 3px solid currentColor; padding-left: 12px; margin-bottom: 12px; }
.era--vic .era-quote { color: #D8B45E; }
.era--ww .era-quote { color: #EDA867; }
.era--vg .era-quote { color: #FF7DC2; }
.era-quote p { font: italic 600 1.2rem/1.28 var(--f-body); color: var(--cream); }
.era-quote footer { font: .8125rem/1.3 var(--f-type); margin-top: 4px; }
.era > p { color: #E3D9C4; font-size: 1rem; }
@media (min-width: 640px) and (max-width: 999px) {
  .era { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .era-pic { grid-row: 1 / 6; }
}
@media (min-width: 1000px) {
  .eras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .era { padding: 0 var(--gap); }
  .era:first-child { padding-left: 0; }
  .era:last-child { padding-right: 0; }
  .era + .era { border-left: 1px solid #4A4038; }
}

/* ------------------------------------------------------------------ classifieds */
.ads { padding: 30px 0 10px; }
.ads-head { text-align: center; border-top: 4px double var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0 10px; margin-bottom: 18px; }
.ads-head .hed { margin-bottom: 2px; }
.ads-sub { font: .9375rem/1.3 var(--f-type); text-transform: uppercase; letter-spacing: .08em; }
.ads-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.ad { display: flow-root; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.ad-cat { font: 400 1.0625rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .12em; text-align: center; border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 10px; }
.ad-pic { float: left; width: 84px; aspect-ratio: 1; object-fit: cover; margin: 3px 12px 6px 0; border: 1px solid var(--ink); filter: grayscale(1) contrast(1.25) sepia(.15); }
.ad-copy { font-size: 1rem; line-height: 1.42; margin-bottom: 8px; }
.ad-copy--big { font: 1.125rem/1.3 var(--f-body); text-align: center; letter-spacing: .01em; }
.ad-tag { clear: both; font: .8125rem/1.35 var(--f-type); color: var(--red); }
.ad--boxed { border: 3px double var(--ink); padding: 14px; margin: 10px 0; text-align: center; }
.ad--boxed .ad-tag { text-align: center; }
.ad--telegram { background: var(--telegram); border: 1px solid #8a7a3a; padding: 14px; margin: 10px 0; }
.ad--telegram .ad-copy { font: 1.0625rem/1.45 var(--f-type); letter-spacing: .03em; }
@media (min-width: 640px) {
  .ads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1000px) {
  .ads-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
}

/* ------------------------------------------------------------------ closing CTA */
.close { text-align: center; padding: 34px 0 40px; border-top: 4px double var(--rule); border-bottom: 4px double var(--rule); margin-top: 18px; }
.close-h { font: 400 clamp(2.4rem, 8.5vw, 5.2rem)/1.02 var(--f-head); text-transform: uppercase; text-wrap: balance; margin-bottom: 12px; }
.close-copy { font-size: 1.1875rem; font-style: italic; max-width: 46ch; margin: 0 auto 22px; text-wrap: balance; }
.share { display: grid; justify-items: center; gap: 8px; margin-top: 26px; }
.share-btn { font-size: 1rem; padding: 10px 18px; line-height: 1.2; text-wrap: balance; max-width: 100%; }
.share-status { min-height: 1.4em; font: .9375rem/1.4 var(--f-type); color: var(--ink-2); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ letters: each one opens a GitHub issue form */
.letters { padding: 30px 0 18px; }
.letters > .hed { text-align: center; }
.letters-intro { text-align: center; font-style: italic; font-size: 1.125rem; max-width: 50ch; margin: 0 auto 20px; text-wrap: balance; }
.letters-grid { position: relative; display: grid; gap: 16px; }
@media (min-width: 760px) { .letters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.letter {
  position: relative; display: flex; flex-direction: column; padding: 16px 16px 14px;
  color: var(--ink); text-decoration: none; background: var(--paper-3);
  border: 1px solid var(--ink); box-shadow: 3px 3px 0 var(--paper-2), 4px 4px 0 var(--ink);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(23,19,15,.12) 27px 28px);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.letter-subj { display: block; font: 1.25rem/1.04 var(--f-head); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.letter-body { display: block; font: italic 1.0625rem/28px var(--f-body); margin-bottom: 10px; }
.letter-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font: 1rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.letter:hover { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--paper-2), 6px 7px 0 var(--ink); }
.letter:hover .letter-go { text-decoration: underline; text-underline-offset: 3px; }
.letter:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--paper-2), 2px 2px 0 var(--ink); }
.letters-stamp {
  justify-self: center; align-self: center; transform: rotate(-4deg);
  color: var(--red-bright); border: 3px solid currentColor; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px currentColor;
  padding: 8px 14px 6px; background: rgba(239,232,215,.6);
  font: 1.25rem/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; text-align: center;
  -webkit-mask-image: var(--wear); mask-image: var(--wear);
}
.letters-stamp { grid-column: 1 / -1; margin-top: 6px; }
@media (min-width: 760px) { .letters-stamp { font-size: 1.5rem; } }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 4px double var(--rule); padding: 18px 0 8px; text-align: center; }
.foot-plate { font: 2.6rem/1.1 var(--f-plate); margin-bottom: 10px; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 0 auto 12px; max-width: 1180px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font: 1rem/1 var(--f-type); text-underline-offset: 4px; }
.foot-nav .foot-play { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .06em; color: var(--red); }
.foot-small { font-size: .875rem; color: var(--ink-2); max-width: 56ch; margin: 0 auto 6px; }
.foot-oss { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ back to top */
.totop {
  position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 22px;
  background: rgba(23,19,15,.88); color: var(--cream); text-decoration: none;
  font: .8125rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s;
}
.totop span { font-size: .75rem; }
.totop.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease), visibility 0s; }
.totop:hover { background: var(--ink); }
.totop:focus-visible { outline-color: var(--red-bright); }

/* ------------------------------------------------------------------ the phone menu: a drawer from the right
   Opened by the bar's Menu button. Follows a finger dragged to the right and closes past a third of its width or on a
   flick; springs back otherwise. The page beneath is locked (see front-page.js) and the panel contains its own scroll. */
.menu { position: fixed; inset: 0; z-index: 60; }
.menu-shade {
  position: absolute; inset: 0; background: rgba(15,11,8,.62);
  opacity: 0; transition: opacity .3s var(--ease); touch-action: none; -webkit-tap-highlight-color: transparent;
}
.menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px);
  display: flex; flex-direction: column;
  padding: calc(6px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 26px;
  background-color: var(--paper); background-image: var(--noise);
  border-left: 3px solid var(--ink);
  /* the second shadow is a strip of paper to the right, so the spring's overshoot never shows a gap at the edge */
  box-shadow: -16px 0 40px rgba(0,0,0,.35), 80px 0 0 var(--paper);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  transform: translate3d(104%, 0, 0); transition: transform .34s var(--ease);
}
.menu-panel:focus { outline: none; }
.menu.is-open .menu-shade { opacity: 1; }
.menu.is-open .menu-panel { transform: none; }
.menu.is-closing .menu-panel { transition-duration: .26s; }
.menu.is-dragging .menu-panel, .menu.is-dragging .menu-shade { transition: none; }
.menu.is-spring .menu-panel { transition: transform .46s cubic-bezier(.16, 1.32, .38, 1); }
.menu.is-spring .menu-shade { transition: opacity .3s var(--ease); }
.menu-grip { position: absolute; left: 9px; top: 50%; width: 4px; height: 46px; margin-top: -23px; border-radius: 2px; background: rgba(23,19,15,.22); }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 4px double var(--rule); }
.menu-h { font: .8125rem/1.25 var(--f-type); text-transform: uppercase; letter-spacing: .1em; }
.menu-x {
  position: relative; flex: none; width: 44px; height: 44px; margin-right: -6px; padding: 0; cursor: pointer;
  background: transparent; color: var(--ink); border: 0; border-radius: 50%; -webkit-tap-highlight-color: transparent;
}
.menu-x span::before, .menu-x span::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2.5px; margin: -1.25px 0 0 -11px; background: currentColor; border-radius: 1px;
}
.menu-x span::before { transform: rotate(45deg); }
.menu-x span::after { transform: rotate(-45deg); }
.menu-x:hover { background: var(--paper-2); }
.menu-play {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin: 16px 0 10px; padding: 12px 16px 11px;
  background: var(--red-bright); color: #fff; text-decoration: none; border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--red-bright), inset 0 0 0 4px rgba(255,255,255,.75);
}
.menu-play span { font: 1.75rem/1.04 var(--f-head); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.menu-play small { font: .75rem/1.2 var(--f-type); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.menu-play:active { background: #a00c24; }
.menu-list { counter-reset: m; }
.menu-list li { border-bottom: 1px dotted var(--ink-2); }
.menu-list a { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 58px; padding: 8px 0 7px; color: var(--ink); text-decoration: none; }
.menu-list b { font: 400 1.375rem/1.04 var(--f-head); text-transform: uppercase; letter-spacing: .03em; }
.menu-list small { font: .8125rem/1.25 var(--f-type); color: var(--ink-2); }
.menu-list a[aria-current] b { color: var(--red); }
.menu-list a[aria-current] b::after { content: " ◂"; font-size: .7em; vertical-align: .12em; }
.menu-list--ext { margin-top: 14px; border-top: 3px solid var(--rule); }
.menu-list--ext a { min-height: 52px; }
.menu-list--ext b { font: 800 1.0625rem/1.15 var(--f-body); text-transform: none; letter-spacing: 0; }
.menu-top { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; margin-top: 10px; font: .875rem/1 var(--f-type); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); text-underline-offset: 4px; }
.menu-top span { font-size: .75rem; }
@media (min-width: 760px) { .menu { display: none; } }

/* ------------------------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ phone trims: same story, fewer screens */
@media (max-width: 559px) {
  .card img { aspect-ratio: 16 / 10; }
  .road .ht { float: left; width: 40%; margin: 4px 14px 8px 0; }
  .road .ht img { aspect-ratio: 3 / 4; }
  .road { display: flow-root; }
  .road-top { clear: both; }
}
@media (max-width: 639px) {
  .era-more, .ad--wide-only { display: none; }
  .notice-pic img { aspect-ratio: 16 / 9; }
  .ad-pic { width: 72px; }
  .letters-grid { gap: 12px; }
  .letter { padding: 12px 14px 10px; }
  .letter-body { margin-bottom: 4px; }
  .inside ol { column-gap: 14px; }
  .inside a { align-items: flex-start; gap: 8px; font-size: .9375rem; line-height: 1.25; min-height: 44px; padding: 8px 0; }
  .inside a::before { width: 1.1em; font-size: 1.125rem; }
  .era-place { aspect-ratio: 2 / 1; }
}