/* Downtown Crowd — the Read surface (home.html).

   The default page is not a queryable inventory: it is a dated editorial
   calendar of the ~19 weeks downtown actually fills up. Everything here serves
   that. Density is the board's job (table.css), warmth is this file's.

   Loaded AFTER theme.css, which owns the palette, the header bar and the shared
   badge language. This sheet only adds the Read surface and, where the shared
   sheet is tuned for a dense board, turns it back up:

     - nothing below 11px anywhere on this surface (theme.css runs 8-10px labels)
     - Georgia carries event names, not just numerals (display/body family
       contrast instead of mere size contrast)
     - a 17px blurb at a 62ch measure, which exists nowhere else on the site
     - amber is the colour of *who is in town*; acid is reserved for the
       headline and for scores of 80+; cyan is links and selected state only

   Both themes carry the design. theme.css sets the tokens off
   prefers-color-scheme plus a [data-theme] override; the go-score ladder needs
   its own pair because acid-on-paper is unreadable, so it repeats that same
   three-selector pattern below. */

:root {
  --wide: 1180px;          /* hero, feature rail, doors */
  --read: 1020px;          /* the list: 100px rail + 62ch blurb + photo */
  --pad: clamp(20px, 6vw, 92px);

  /* the go-score ladder — day board.
     --go-high is the text-safe olive (4.5:1 on paper at any size); --display-acid
     is its chromatic twin, used only where the type is 24px+ and 3:1 applies —
     the headline and the oversized numerals. Without the second token, light
     mode loses the acid entirely and reads as an institutional report. */
  --go-high: #46660a;      /* 80-100  "Make the trip" */
  --go-mid: #8f5600;       /* 70-79   "Worth a walk"   (amber) */
  --go-low: #45534e;       /* 55-69   "A little busier" */
  --go-none: #5d6b66;      /* <55     "Quiet" */
  --display-acid: #6f9c00;
  --tribe: #8f5600;        /* who's in town */
  --wash: 16%;             /* plate tint strength */
  --plate-ink: #0e1a16;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --go-high: #d7ff4f;
    --go-mid: #ffb44a;
    --go-low: #9fb0aa;
    --go-none: #82938d;
    --display-acid: #d7ff4f;
    --tribe: #ffb44a;
    --wash: 11%;
    --plate-ink: #eff6f2;
  }
}

:root[data-theme="dark"] {
  --go-high: #d7ff4f;
  --go-mid: #ffb44a;
  --go-low: #9fb0aa;
  --go-none: #82938d;
  --display-acid: #d7ff4f;
  --tribe: #ffb44a;
  --wash: 11%;
  --plate-ink: #eff6f2;
}

/* ---- page frame ---------------------------------------------------------- */

body.home {
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg);
}
body.home main { display: block; }

.home .skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 10px 14px;
  background: var(--brand);
  color: var(--brand-ink);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}
.home .skip:focus { left: 8px; top: 8px; }

.home .bar { position: sticky; top: 0; z-index: 10; height: 56px; }
.home .bar .brand { font-size: 13px; }
.home .bar nav a { font-size: 12px; }
.home .bar .here, .home .bar .edition { font-size: 11px; }  /* the 11px floor */
.home .eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
}

.home section { padding-inline: var(--pad); }
.home section > * { max-width: var(--wide); margin-inline: auto; }

/* ---- 1 · hero ------------------------------------------------------------ */

/* Compressed deliberately: at 1440x900 the answer ("43 days away · WEFTEC ·
   one sentence") has to be inside the first screen, not merely announced by it.
   The headline keeps its size; the empty space around it is what gives way. */
.hero { padding-block: clamp(28px, 3.2vw, 46px) 26px; }
.hero h1 {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: clamp(56px, 8vw, 112px);
  line-height: .82;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--text);
}
.hero h1 em { font-style: normal; color: var(--display-acid); }
.hero .dek {
  margin: 0 0 22px;
  max-width: 33em;
  font-size: 21px;
  line-height: 1.55;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.action {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: 40px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
}
.action:hover { border-color: var(--accent); color: var(--text); }
.action-lead {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.action-lead:hover { filter: brightness(1.06); color: var(--brand-ink); }
.as-of {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--faint);
}

/* ---- 2 · the lead module: countdown, or what's here right now ------------- */

.lead {
  padding-block: 32px 48px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* "NEXT BUSY WEEK · 43 DAYS AWAY". This line, not the numeral, is what tells
   the reader what she is looking at, so it is set to be read, not skimmed. */
.lead-eyebrow {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tribe);
}
.lead-grid {
  display: grid;
  grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
  gap: 0 40px;
  align-items: start;
}
.lead-grid.has-photo { grid-template-columns: minmax(120px, 152px) minmax(0, 1fr) minmax(220px, 300px); }

.lead-num { text-align: right; }
/* Georgia numerals mean "go score" everywhere on this page. The countdown is a
   different quantity, so it is set in the grotesque instead — same prominence,
   unmistakably not a score. */
.lead-num b {
  display: block;
  font-family: var(--sans);
  font-size: clamp(64px, 7.6vw, 96px);
  line-height: .82;
  letter-spacing: -.05em;
  font-weight: 800;
  color: var(--text);
}
.lead-num.now b { font-family: var(--serif); font-weight: 400; color: var(--display-acid); }
.lead-num span {
  display: block;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.lead-copy .when {
  margin: 6px 0 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead-title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--text);
}
.lead .blurb {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 19px;
  line-height: 1.55;
  color: var(--text);
}
.lead .meta { margin: 0 0 20px; }
.lead-gap {
  margin: 20px 0 0;
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  border-left: 2px solid var(--tribe);
  padding-left: 16px;
}
.lead-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

.lead-photo { margin: 0; }
.lead-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--sunk);
}
.lead-photo figcaption,
.credit {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--faint);
}
.credit a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
.credit a:hover { color: var(--accent); }

/* ---- the score, never naked: number + word + colour + sentence ------------ */

.score-read {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  max-width: 62ch;
}
.score-read b {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
  color: var(--go);
}
.score-read .word {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--go);
}
.score-read .sent { font-size: 15px; color: var(--muted); }
.score-read small {
  flex: 1 0 100%;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}

.go-high { --go: var(--go-high); }
.go-mid { --go: var(--go-mid); }
.go-low { --go: var(--go-low); }
.go-none { --go: var(--go-none); }

/* ---- shared editorial bits ----------------------------------------------- */

.meta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--faint);
}
.meta .caveat {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--muted);
}
.tribe {
  display: block;
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tribe);
}
.save {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 40px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
}
.save:hover { color: var(--text); border-color: var(--accent); }
.save[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.save[aria-pressed="true"]::before { content: "✓ "; }

.section-head { margin-bottom: 40px; }
.section-head h2 {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--text);
}
.section-dek {
  margin: 0;
  max-width: 40em;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}
.section-dek b { color: var(--text); font-weight: 600; }

/* ---- 3 · three feature cards --------------------------------------------- */

.features { padding-block: 80px 72px; }
.rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.plate {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: var(--sunk);
  background: color-mix(in srgb, var(--go) var(--wash), var(--sunk));
  overflow: hidden;
}
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate-num {
  font-family: var(--serif);
  font-size: clamp(58px, 6.4vw, 88px);
  line-height: .8;
  color: var(--go);
  letter-spacing: -.03em;
}
.plate-word {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--go);
}
.plate.shot .plate-num,
.plate.shot .plate-word {
  position: absolute;
  left: 14px;
  right: auto;
  text-align: left;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .75), 0 0 3px rgba(0, 0, 0, .6);
}
.plate.shot .plate-num { bottom: 24px; font-size: 46px; }
.plate.shot .plate-word { bottom: 10px; }
.plate.shot::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .68));
}
.plate.shot .plate-num, .plate.shot .plate-word { z-index: 1; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 26px 24px;
}
.card .when {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card h3 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--text);
}
.card .blurb {
  margin: 0 0 18px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
.card .meta { margin: 0 0 18px; }
.card .save { align-self: flex-start; margin-top: auto; }

.rail-note {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--faint);
}

/* ---- 4 · the calendar ----------------------------------------------------- */

.calendar { padding-block: 8px 88px; }
.chips-label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 14px;
}
.chip {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 40px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  margin-left: 6px;
}
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.chip[aria-pressed="true"] i { color: var(--accent); }
.chip.clear { border-style: dashed; }
/* "The big ones" is an editorial shortcut, not a profession filter — it gets the
   accent and a gap after it so the row does not read as one uniform control bank. */
.chip.lead-chip {
  border-color: var(--go-mid);
  color: var(--go-mid);
  margin-right: 14px;
}
.chip.lead-chip i { color: var(--go-mid); }
.chip.lead-chip[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--go-mid);
  color: var(--go-mid);
  box-shadow: inset 0 0 0 1px var(--go-mid);
}

.listnote {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--muted);
  min-height: 22px;
}
.listnote a { color: var(--accent); }

.list { max-width: var(--read); margin-inline: 0; }

.bucket-h {
  margin: 60px 0 4px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}
.bucket-h:first-child { margin-top: 30px; }
.bucket-note {
  margin: 0 0 6px;
  max-width: 54em;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.bucket-h.sub {
  margin: 46px 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--tribe);
}
.bucket-h.divider {
  margin-top: 64px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  gap: 0 28px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
}
.row:first-of-type { border-top: 0; }
.row-score { text-align: right; padding-top: 2px; }
/* The rail stays (it is the page's photo substitute), but its weight tracks
   what the number is worth. A "Quiet" 37 that shouts as loudly as a 94 is the
   old board's mistake in a nicer font: some events should feel exciting, and
   some should recede. */
.row-score b {
  display: block;
  font-family: var(--serif);
  font-size: 40px;
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--go);
}
.row-score.go-low b { font-size: 30px; }
.row-score.go-none b { font-size: 24px; color: var(--faint); }
.row-score.go-none span { color: var(--faint); }
.row-score span {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--go);
}
.row .when {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.row h4 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--text);
}
.row .blurb {
  margin: 0 0 12px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
}
/* What it means for the street, set so the whole calendar can be read by
   skimming only these. */
.impact {
  font-weight: 600;
  color: var(--text);
}
.go-none .impact, .row:has(.go-none) .impact { color: var(--muted); }
.row .meta { margin: 0; }
.row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
/* In the long list the outlined pill repeated 200 times reads as a column of
   controls. It stays keyboard- and touch-reachable, it just stops shouting. */
.row .save {
  border-color: transparent;
  background: transparent;
  padding: 0 8px;
  min-height: 32px;
  color: var(--faint);
}
.row .save:hover, .row .save:focus-visible { color: var(--accent); }
.row .save[aria-pressed="true"] { color: var(--accent); background: transparent; border-color: transparent; }
.row-shot {
  display: block;
  width: 156px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  background: var(--sunk);
}

.more {
  margin-top: 34px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 40px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}
.more:hover { border-color: var(--accent); }

/* ---- 5 · exit ramps ------------------------------------------------------- */

.doors {
  padding-block: 72px;
  background: var(--sunk);
  border-top: 1px solid var(--line);
}
.doors-h {
  margin: 0 0 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}
.door-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.door {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 30px 26px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
}
.door:hover { border-color: var(--accent); }
.door-kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--tribe);
}
.door b {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 400;
}
.door-copy {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.door-go {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.saved-line {
  margin: 22px 0 0;
  font-size: 15px;
  color: var(--muted);
}
.saved-line b { color: var(--text); }
.saved-line a { color: var(--accent); }

/* ---- 6 · how this works --------------------------------------------------- */

.how { padding-block: 64px 40px; }
.how details { border-top: 1px solid var(--line); padding-top: 22px; }
.how summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--text);
}
.how summary::-webkit-details-marker { display: none; }
.how summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 20px;
  color: var(--faint);
}
.how details[open] summary::after { content: "–"; }
.how-body { max-width: 68ch; padding-top: 10px; }
.how-body h3 {
  margin: 34px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tribe);
}
.how-body p, .how-body li { font-size: 16px; line-height: 1.62; color: var(--muted); }
.how-body b { color: var(--text); }
.how-lede { font-size: 19px !important; line-height: 1.55 !important; color: var(--text) !important; }
.how-lede em { font-style: italic; }
.principles { margin: 0; padding-left: 20px; }
.principles li { margin-bottom: 10px; }
.ladder { width: 100%; border-collapse: collapse; margin-top: 6px; }
.ladder th {
  text-align: left;
  padding: 0 14px 8px 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}
.ladder td {
  padding: 12px 14px 12px 0;
  font-size: 15px;
  color: var(--muted);
  vertical-align: baseline;
  border-bottom: 1px solid var(--line-soft);
}
.ladder td:first-child {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
  color: var(--go);
}
.ladder td.word {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--go);
  white-space: nowrap;
}
.how-note {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: .06em;
  color: var(--faint) !important;
}
.weights { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; }
.weights li { display: flex; align-items: baseline; gap: 8px; }
.weights b { font-family: var(--serif); font-size: 24px; color: var(--text); font-weight: 400; }
.weights span { font-size: 13px; color: var(--faint); }

/* ---- footer --------------------------------------------------------------- */

.foot {
  padding: 40px var(--pad) 56px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.foot > * { max-width: var(--wide); margin-inline: auto; }
.foot-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--text);
}
.foot-line {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.foot-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.foot-nav a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--accent); }

/* ---- reflow ---------------------------------------------------------------
   One layout, three breakpoints. The lead module keeps its numeral beside the
   copy for as long as the numeral has room; below that the numeral goes
   inline-above, which is also what the rows do. */

@media (max-width: 1180px) {
  .lead-grid.has-photo { grid-template-columns: minmax(110px, 140px) minmax(0, 1fr); }
  .lead-grid.has-photo .lead-photo { grid-column: 1 / -1; margin-top: 26px; max-width: 420px; }
}

@media (max-width: 940px) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail .card:nth-child(3) { display: none; }
  .door-grid { grid-template-columns: minmax(0, 1fr); }
  .row-shot { width: 118px; }
}

@media (max-width: 760px) {
  body.home { font-size: 15px; }
  /* Two full-word nav links plus the edition line do not fit beside the brand
     once the labels are back up at the 11px floor. The edition is decoration;
     the doors are not. */
  .home .bar .edition { display: none; }
  .hero { padding-block: 34px 30px; }
  .hero .dek { font-size: 18px; }
  .lead-grid, .lead-grid.has-photo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lead-num { text-align: left; display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .lead-num b { font-size: 64px; }
  .lead-num span { margin-top: 0; }
  .lead .blurb { font-size: 17px; }
  .rail { grid-template-columns: minmax(0, 1fr); }
  .rail .card:nth-child(3) { display: flex; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .row-score { text-align: left; display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
  .row-score b { font-size: 30px; }
  .row-score span { margin-top: 0; }
  .row-side { flex-direction: row-reverse; align-items: center; justify-content: flex-end; margin-top: 14px; }
  .row-shot { width: 132px; }
  .action, .save, .chip, .more { min-height: 46px; }
  .card .blurb, .row .blurb { font-size: 16px; }
}