/* home.css — the front page (#/) and the section pages (#/section/<key>). */

/* =========================================================== front: top */
/* One grid holds the lead and every box beside or below it, so the make-up is
   done by grid areas: the side column's boxes sit in rows the lead spans, and
   when the lead is the taller the extra height is shared between those rows —
   the side boxes spread out (first to the top, last to the bottom) and both
   columns end level, as a paper's columns are justified. home.js picks the
   variant: .has-cutting (the word of the day runs full width), .teasers-side
   ("Inside today" joins the side column when the lead would stand well below it). */
.front-top {
  --side-gap: clamp(26px, 2.4vw, 40px);
  --row-gap: clamp(30px, 2.8vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-areas: "lead cont" "lead stand" "lead word" "more more" "primer primer";
  align-items: start;
}
.front-top.has-cutting { grid-template-areas: "lead cont" "lead stand" "more more" "word word" "primer primer"; }
.front-top.teasers-side { grid-template-areas: "lead cont" "lead stand" "lead word" "lead more" "primer primer"; }
.front-top.has-cutting.teasers-side { grid-template-areas: "lead cont" "lead stand" "lead more" "word word" "primer primer"; }
.front-top > .lead-slot { grid-area: lead; align-self: stretch; }
.front-top > .box-continue { grid-area: cont; }
.front-top > .box-standing { grid-area: stand; }
.front-top > .box-word { grid-area: word; }
.front-top > .teasers { grid-area: more; }
.front-top > .primer { grid-area: primer; }

.lead-slot {
  min-width: 0; padding-right: var(--gap); border-right: 1px solid var(--hair);
  container: lead / inline-size;
}
/* Side column (desktop): a hairline rule on the lead's edge, boxes spread. */
.front-top > .box-continue, .front-top > .box-standing, .front-top > .box-tip,
.front-top.teasers-side > .teasers { padding-left: var(--gap); min-width: 0; }
.front-top > .box-continue { align-self: start; }
.front-top > .box-standing { align-self: center; margin-top: var(--side-gap); }
.front-top > .box-tip { align-self: end; margin-top: var(--side-gap); }
.front-top.has-cutting > .box-standing { align-self: end; }
.front-top.teasers-side > .box-tip, .front-top.has-cutting.teasers-side > .box-standing { align-self: center; }
.front-top.teasers-side > .teasers { align-self: end; margin-top: var(--side-gap); }
/* Full-width rows under the lead. */
.front-top > .teasers, .front-top > .box-word.is-feature, .front-top > .primer { margin-top: var(--row-gap); min-width: 0; }
.front-top.teasers-side > .teasers { margin-top: var(--side-gap); }

/* ---- lead story */
.lead { min-width: 0; }
.lead-kicker { font-size: 14px; margin-bottom: 4px; }
.lead-kicker-sub { color: var(--muted); letter-spacing: .14em; }
.lead-head { font-size: clamp(50px, 6.6vw, 132px); margin: 4px 0 12px; text-wrap: balance; }
.lead-head a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 6px; background-position: 0 92%; background-repeat: no-repeat; transition: background-size .25s ease; }
.lead-head a:hover { background-size: 100% 6px; color: var(--ink); }
.lead-deck { font-size: clamp(19px, 1.55vw, 28px); max-width: 52ch; margin: 0 0 clamp(18px, 1.6vw, 28px); }
.lead-body {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--gap); align-items: stretch;
  border-top: 1px solid var(--rule); padding-top: clamp(16px, 1.4vw, 24px);
}
.lead-plate { display: flex; flex-direction: column; }
.lead-plate .plate-frame { display: block; border-width: 1px; }
.lead-plate .plate-frame img { transition: transform .5s ease; }
.lead-plate .plate-frame:hover img { transform: scale(1.02); }
.lead-aside { display: flex; flex-direction: column; min-width: 0; }
.lead-thumb {
  display: block; width: 100%; aspect-ratio: 1; max-height: 100%;
  padding: clamp(10px, 1vw, 16px);
  background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--accent);
}
.lead-thumb .gridthumb { width: 100%; height: 100%; }
.lead-foot {
  display: flex; flex-direction: column; gap: 16px;
  margin-top: clamp(16px, 1.4vw, 24px); padding-top: 14px; border-top: 1px solid var(--hair);
}
.lead-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 12px 0; }
.lead-fact { min-width: 0; padding: 0 clamp(14px, 1.4vw, 26px); border-left: 1px solid var(--hair); }
.lead-fact:first-child { padding-left: 0; border-left: 0; }
.lead-fact dt { font: 600 11.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; white-space: nowrap; }
.lead-fact dd { margin: 0; font: 700 clamp(18px, 1.3vw, 22px)/1.2 var(--f-head); white-space: nowrap; }
.pips { display: inline-flex; gap: 5px; vertical-align: middle; }
.pip { width: 15px; height: 15px; border: 2px solid var(--btn-line); background: var(--card); transform: skewX(-12deg); }
.pip.on { background: var(--accent); }
.lead-actions { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Buttons keep their whole label: they share a row while it fits and wrap
   when it does not, never squeezing a label past its border. */
.lead-actions .btn-row { flex-wrap: wrap; }
.lead-actions .btn { flex: 0 1 auto; min-width: max-content; }
.lead-actions .bar { max-width: 520px; }

/* A wide lead (big screens) sets its facts and buttons as a third column
   beside the art and the grid instead of under them, so the lead does not
   grow taller with every extra inch of screen. */
@container lead (min-width: 1100px) {
  .lead { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(250px, 1fr); column-gap: var(--gap); }
  .lead > .lead-kicker, .lead > .lead-head, .lead > .lead-deck { grid-column: 1 / -1; }
  .lead > .lead-kicker { justify-self: start; }
  .lead-body { grid-column: 1; }
  .lead-foot {
    grid-column: 2; margin-top: 0; padding-top: clamp(16px, 1.4vw, 24px);
    border-top: 1px solid var(--rule); justify-content: space-between; gap: 22px;
  }
  .lead-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .lead-fact, .lead-fact:first-child { padding: 0 0 0 12px; border-left: 3px solid var(--accent); }
  .lead-actions .btn-row { flex-direction: column; align-items: stretch; }
  .lead-actions .btn { width: 100%; min-width: 0; }
}

/* ---- "inside today" teasers */
.teasers-head {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  font: 700 13px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase;
}
.teasers-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.teaser-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.teaser-list > li:nth-child(n+5) { display: none; }
/* In the side column: a stacked list. */
.front-top.teasers-side .teaser-list { grid-template-columns: minmax(0, 1fr); }
.front-top.teasers-side .teaser-list > li { border-left: 0; border-top: 1px solid var(--hair); }
.front-top.teasers-side .teaser-list > li:first-child { border-top: 0; }
.front-top.teasers-side .teaser { padding: 10px 0; }
.front-top.teasers-side .teaser-list > li.is-spare { display: none; }
.teaser-list > li { min-width: 0; border-left: 1px solid var(--hair); }
.teaser-list > li:first-child { border-left: 0; }
.teaser { display: flex; flex-direction: column; gap: 3px; padding: 4px 16px 6px; color: var(--ink); text-decoration: none; height: 100%; }
.teaser-list > li:first-child .teaser { padding-left: 0; }
.teaser-kicker { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent), var(--tx-mix) var(--tx-amt)); }
.teaser-kicker::before { content: ""; width: 9px; height: 9px; background: var(--accent); flex: none; }
.teaser-title { font: 800 clamp(19px, 1.45vw, 25px)/1.12 var(--f-head); }
.teaser-meta { font: italic 14.5px/1.3 var(--f-body); color: var(--muted); }
.teaser:hover .teaser-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* ---- side column boxes */
.box { min-width: 0; }
.box-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 14px; padding-top: 9px; border-top: 4px solid var(--rule);
  font: 700 15px/1.2 var(--f-label); letter-spacing: .15em; text-transform: uppercase;
}
.box-more {
  font: 600 11.5px/1 var(--f-label); letter-spacing: .12em; color: var(--ink-2); text-decoration: none;
  border-bottom: 3px solid var(--c-blue); padding-bottom: 3px;
}
.box-more:hover { color: var(--ink); }
.box-note { margin: 16px 0 0; font: italic 15px/1.4 var(--f-body); color: var(--muted); }
.empty-compact { padding: 14px; gap: 14px; }
.empty-compact .empty-art { width: 70px; }
.empty-compact .empty-title { font-size: 19px; }
.empty-compact .empty-body { font-size: 16px; }

.crows { list-style: none; margin: 0; padding: 0; }
.crows > li + li .crow { border-top: 1px solid var(--hair); }
.crow {
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 0; color: var(--ink); text-decoration: none;
}
.crow-thumb { display: block; width: 60px; }
.crow-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crow-kicker { font: 600 11px/1.2 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent), var(--tx-mix) var(--tx-amt)); }
.crow-title { font: 800 19px/1.15 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-meta { font: italic 14.5px/1.3 var(--f-body); color: var(--muted); }
/* A guest's puzzles under way: where their letters are kept. */
.crows-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--hair); font: italic 14.5px/1.35 var(--f-body); color: var(--muted); }
.crow .bar { margin-top: 3px; }
.crow-go {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px;
  background: var(--accent); color: #fff; border: 2px solid var(--btn-line);
  box-shadow: 2px 2px 0 var(--btn-line), 2px 2px 0 1px var(--drop-rim);
  transition: transform .08s, box-shadow .08s;
}
.crow-go .icon { width: 18px; height: 18px; }
.crow:hover .crow-go { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--btn-line), 3px 3px 0 1px var(--drop-rim); }
.crow:hover .crow-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

.standing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); background: var(--card); }
.box { display: flex; flex-direction: column; }
.stand { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stand + .stand { border-left: 1px solid var(--hair); }
.stand-v { font: 900 clamp(40px, 3.3vw, 64px)/.95 var(--f-head); color: var(--tone); font-variant-numeric: lining-nums; }
.stand-k { font: 600 11px/1.2 var(--f-label); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
/* A figure with nothing in it yet is a dash (§15), in the muted ink. */
.stand-v.is-none { color: var(--muted); font-weight: 700; }
.stand-blue { --tone: var(--c-blue); } .stand-orange { --tone: var(--c-orange); } .stand-green { --tone: var(--c-green); }
.standing-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 7px; font: italic 15px/1.35 var(--f-body); color: var(--muted); }
/* A guest's standing is zeros and this line, where the week's bars would be. */
.standing-guest { margin: 12px 0 2px; font: 16px/1.45 var(--f-body); color: var(--ink-2); }
.standing-guest a { font-weight: 600; color: var(--ink); text-decoration-color: var(--c-blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.standing-guest a:hover { color: var(--c-blue); }

.box-word .cutting { margin: 18px 4px 8px 0; }
/* The word of the day at full width is set in columns, like a feature. */
.box-word.is-feature .cutting {
  margin: 20px 6px 8px 0; transform: rotate(-0.25deg);
  columns: 340px 2; column-gap: clamp(28px, 3.4vw, 64px); column-rule: 1px solid var(--hair);
  padding: clamp(22px, 2vw, 32px) clamp(20px, 2.4vw, 40px) 20px;
}
.box-word.is-feature .cutting > .cutting-kicker,
.box-word.is-feature .cutting > .cutting-head,
.box-word.is-feature .cutting > .cutting-pos { column-span: all; }
.box-word.is-feature .cutting-head { font-size: clamp(32px, 3vw, 54px); }
.box-word.is-feature .cutting > * { break-inside: avoid; }
.box-word.is-feature .cutting-sub { break-after: avoid; }
.box-word.is-feature .cutting-gloss { margin-top: 12px; }
.box-word.is-feature .cutting-plate { margin-top: 0; }
.box-word.is-feature .cutting-sub:first-child, .box-word.is-feature .cutting-fact { margin-top: 0; }
.tip-blurb { font: 16.5px/1.45 var(--f-body); color: var(--ink-2); margin: 0 0 10px; }
.tip-clue {
  margin: 0 0 14px; padding: 14px 16px; background: var(--card);
  border: 1px solid var(--rule); border-left: 6px solid var(--c-teal);
  font: italic 500 clamp(20px, 1.5vw, 25px)/1.35 var(--f-body);
}
.tip-enum { font: 600 .7em/1 var(--f-grid); font-style: normal; color: var(--muted); }
.tip-answer { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hair); }
.tip-word { display: block; font: 900 30px/1 var(--f-head); letter-spacing: .1em; color: var(--c-teal); }
.tip-how { margin: 6px 0 0; font: 16.5px/1.45 var(--f-body); }

.primer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px clamp(16px, 2vw, 32px); align-items: center;
  margin-top: clamp(22px, 2vw, 34px); padding: 16px clamp(16px, 1.6vw, 26px);
  background: color-mix(in srgb, var(--c-teal) 10%, var(--card));
  border: 1px solid var(--rule); border-left: 8px solid var(--c-teal);
}
.primer-art { width: clamp(70px, 6vw, 96px); aspect-ratio: 1; background: var(--plate-bg); border: 1px solid var(--rule); overflow: hidden; }
.primer-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.primer-head { font: 900 clamp(22px, 1.8vw, 30px)/1.1 var(--f-head); margin: 0 0 4px; }
.primer-lede { font: 500 18.5px/1.4 var(--f-body); margin: 0 0 4px; }
.primer-wp { background: color-mix(in srgb, var(--c-yellow) 45%, transparent); padding: 0 3px; }
.primer-sub { font: italic 16px/1.45 var(--f-body); color: var(--muted); margin: 0; }

/* =============================================================== desks */
.desks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 calc(var(--gap) / -2); }
.desk { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 calc(var(--gap) / 2); border-left: 1px solid var(--hair); }
.desk:first-child { border-left-color: transparent; }
.desk-band {
  position: relative; overflow: hidden;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--accent); color: #fff; border: 2px solid var(--btn-line);
  font: 700 15px/1 var(--f-label); letter-spacing: .18em; text-transform: uppercase;
}
.desk-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.22) 1.1px, transparent 1.5px); background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000); mask-image: linear-gradient(90deg, transparent 35%, #000);
}
.desk-band > * { position: relative; }
.desk-band-size { font-family: var(--f-grid); font-weight: 700; letter-spacing: .04em; }
.desk-plate { display: block; }
.desk-plate .plate-frame img { transition: transform .5s ease; }
.desk-plate:hover .plate-frame img { transform: scale(1.03); }
.desk-title { font: 900 clamp(30px, 2.6vw, 48px)/1 var(--f-head); margin-top: 2px; }
.desk-title a { color: var(--ink); text-decoration: none; }
.desk-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; }
.desk-blurb { margin: 0; font: italic 17px/1.4 var(--f-body); color: var(--muted); min-height: 2.8em; }
.desk-progress { display: flex; flex-direction: column; gap: 7px; }
.desk-count { font: 600 12.5px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.desk-count b { font: 900 22px/1 var(--f-head); letter-spacing: 0; color: var(--ink); margin-right: 3px; }
.desk-empty { font-style: italic; color: var(--muted); }
.desk-all { align-self: flex-start; margin-top: auto; }

.plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.plist > li { border-bottom: 1px solid var(--hair); }
.prow {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center; padding: 8px 2px; color: var(--ink); text-decoration: none;
}
.prow:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.prow:hover .prow-label { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.pdot { grid-row: 1 / span 2; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent); background: transparent; }
.pdot-solved { background: var(--accent); }
.pdot-started { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.pdot-revealed { border-color: var(--rev); background: var(--rev); }
.prow-label { font: 700 17px/1.2 var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-meta { grid-column: 2; font: italic 14px/1.2 var(--f-body); color: var(--muted); }
.prow-state {
  grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 3px;
  font: 600 12px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.prow-state .icon { width: 14px; height: 14px; }
.prow-solved { color: var(--ok-ink); font-family: var(--f-grid); letter-spacing: 0; font-weight: 700; }
.prow-started { color: var(--ink); background: color-mix(in srgb, var(--hl) 75%, transparent); padding: 3px 6px; border-radius: 4px; }
.prow-revealed { color: var(--rev); }

/* ======================================================== themed features */
.feature-band {
  position: relative; overflow: hidden;
  margin-top: clamp(44px, 4.4vw, 72px);
  display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap;
  padding: clamp(18px, 2vw, 32px) clamp(18px, 2.6vw, 44px);
  background: var(--accent); color: #fff;
  border-top: 4px solid var(--rule); border-bottom: 4px solid var(--rule);
}
.feature-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,.22) 1.3px, transparent 1.7px); background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000); mask-image: linear-gradient(100deg, transparent 30%, #000);
}
.feature-band > * { position: relative; }
.feature-band-kicker { margin: 0 0 6px; font: 700 13px/1.2 var(--f-label); letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.feature-band-kicker::before { content: ""; width: 26px; height: 3px; background: currentColor; }
.feature-band-title { font: 900 clamp(30px, 3.4vw, 60px)/1 var(--f-head); letter-spacing: -.01em; }
/* Full strength: white on the Themed pink is 4.55:1, and any fading takes it under 4.5. */
.feature-band-deck { margin: 8px 0 0; font: italic clamp(17px, 1.3vw, 22px)/1.4 var(--f-body); }
.feature-band-side { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.tiles {
  /* home.js sets --tile-cols to the count that fills the last row (and
     widens any leftovers); --tc is the no-script fallback per width. */
  --tc: 4;
  display: grid; grid-template-columns: repeat(var(--tile-cols, var(--tc)), minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 30px); margin-top: clamp(20px, 2vw, 32px);
}
.tile { min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-top: 6px solid var(--accent); }
.tile-plate { display: block; }
.tile-plate .plate-frame { border: 0; border-bottom: 1px solid var(--rule); }
.tile-plate .plate-frame img { transition: transform .5s ease; }
.tile-plate:hover .plate-frame img { transform: scale(1.03); }
.tile-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; container-type: inline-size; min-width: 0; }
/* The name is inked down (morning) or lifted (evening) half as far as a
   kicker. At full strength cinema and food fell under 3:1 on the card and
   games under 4.5:1; like this every subject reads at 4.1:1 or better in
   both editions (the six later subjects at 4.9:1). */
.tile-name { font: 900 clamp(23px, 1.7vw, 31px)/1.05 var(--f-head); color: var(--accent); color: color-mix(in srgb, var(--accent), var(--tx-mix) calc(var(--tx-amt) / 2)); }
/* Capped by the tile's own width as well as the window's, so a long name
   ("Shakespeare", "The Lord of the Rings") fits a narrow tile in a
   six-across grid. */
.tile-name { font-size: min(clamp(23px, 1.7vw, 31px), max(20px, 12cqi)); }
.tile-name a { color: inherit; text-decoration: none; }
.tile-name a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.tile-deck { margin: 0 0 4px; font: italic 16px/1.35 var(--f-body); color: var(--ink-2); }
.tile-meta { margin: 0; font: 600 12px/1.2 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile-puzzles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; }
.tile-btn-solved .icon, .tile-btn-revealed .icon { color: var(--ok); }
.tile-btn-revealed .icon { color: var(--rev); }
/* A leftover tile widened to fill the grid's last row: art beside the words. */
.tile.is-wide { flex-direction: row; }
.tile.is-wide .tile-plate { width: min(44%, 360px); flex: none; }
.tile.is-wide .tile-plate .plate-frame { height: 100%; border-bottom: 0; border-right: 1px solid var(--rule); }
.tile.is-wide .tile-body { padding: 16px 20px 18px; }

/* ========================================================== made + promo */
.cards-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.promo {
  margin-top: clamp(44px, 4.4vw, 72px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center;
  padding: clamp(20px, 2.2vw, 40px) clamp(0px, 2vw, 40px) clamp(20px, 2.2vw, 40px) 0;
  border-top: 4px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--c-purple) 11%, transparent) 100%);
}
.promo-art { display: block; }
.promo-art .plate-frame { border-width: 2px; }
.promo-text { min-width: 0; }
.promo-head { font-size: clamp(40px, 4.6vw, 84px); margin: 2px 0 10px; }
.promo-text .deck { max-width: 46ch; }
.promo-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 18px 0 22px; }
.promo-steps li { display: flex; align-items: center; gap: 9px; font: 600 14px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; }
.promo-step-n {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: var(--c-purple); color: #fff; border: 2px solid var(--btn-line);
  font: 700 14px/1 var(--f-grid); letter-spacing: 0;
}

/* ========================================================= section page */
.section-page .band { margin-bottom: 20px; }
.section-tools { display: flex; flex-direction: column; gap: 12px; margin: 0 0 clamp(18px, 1.8vw, 28px); }
.section-filters .chip { height: 36px; padding: 0 15px; font-size: 13px; }
.subject-links { display: flex; flex-wrap: wrap; gap: 8px; }
.subject-links .chip { box-shadow: none; }
.subject-links .chip:hover { box-shadow: 2px 2px 0 var(--btn-line); }
.subject-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.chip.is-on .subject-dot { background: currentColor !important; }
.also .sechead { margin-top: clamp(40px, 4vw, 64px); }
.also-list { display: flex; flex-wrap: wrap; gap: 12px; }
.notice-line { margin: 0 0 18px; padding: 10px 14px; border-left: 5px solid var(--c-orange); background: var(--card); font: italic 17px var(--f-body); }

.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(16px, 1.6vw, 28px);
}
.pcard {
  min-width: 0; position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule);
  transition: border-color .15s ease, outline-color .15s ease;
  outline: 2px solid transparent; outline-offset: -1px;
}
.pcard:hover { outline-color: var(--accent); }
.pcard::before { content: ""; height: 5px; background: var(--accent); border-bottom: 1px solid var(--rule); }
.pcard-media { position: relative; padding: 14px 14px 0; }
.pcard-thumb { display: block; }
.pcard-solved .gt-fill, .pcard-revealed .gt-fill { opacity: .38; }
.pcard-ribbon {
  position: absolute; left: -7px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 8px);
  padding: 6px 12px 6px 10px;
  font: 700 12px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid var(--btn-line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard-ribbon .icon { width: 14px; height: 14px; flex: none; }
.pcard-ribbon::after {
  content: ""; position: absolute; left: -2px; top: 100%; width: 0; height: 0;
  border-top: 6px solid var(--btn-line); border-left: 7px solid transparent;
}
.ribbon-good { --tone: var(--ok); background: var(--tone); color: #fff; }
.ribbon-rev { --tone: var(--rev); background: var(--tone); color: #fff; }
.ribbon-prog { background: var(--c-yellow); color: #16140f; }
.pcard-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.pcard-body .kicker { margin: 0 0 2px; font-size: 11.5px; }
.pcard-title { font: 800 21px/1.12 var(--f-head); }
.pcard-title a { color: var(--ink); text-decoration: none; }
.pcard-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
.pcard-meta { margin: 0 0 8px; font: italic 15px/1.3 var(--f-body); color: var(--muted); }
.pcard .bar { margin: 0 0 10px; }
.pcard-btn { align-self: flex-start; margin-top: auto; }

/* ===================================================== labels on fills */
/* As in base.css: a label on a coloured fill is white or ink, whichever the
   fill needs (the declarations above are the fallback). */
@supports (color: color(from red srgb-linear r g b)) {
  .desk-band, .feature-band, .crow-go { color: color(from var(--accent) var(--on-of)); }
  .ribbon-good, .ribbon-rev { color: color(from var(--tone) var(--on-of)); }
  .promo-step-n { color: color(from var(--c-purple) var(--on-of)); }
}

/* ============================================================ responsive */
@media (min-width: 1500px) {
  /* Wide pages run all six "Inside today" teasers across. */
  .front-top:not(.teasers-side) .teaser-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .front-top:not(.teasers-side) .teaser-list > li:nth-child(n+5) { display: block; }
}
@media (min-width: 1900px) {
  .tiles { --tc: 6; }
  .front-top { grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); }
}
@media (max-width: 1299px) {
  .tiles { --tc: 3; }
}
@media (max-width: 1099px) {
  /* Tablet: the lead across the top, Continue and Standing side by side at
     equal height (their panels stretch), everything else full width. */
  .front-top {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap);
    grid-template-areas: "lead lead" "cont stand" "word word" "more more" "primer primer";
  }
  .front-top.has-cutting, .front-top.teasers-side, .front-top.has-cutting.teasers-side {
    grid-template-areas: "lead lead" "cont stand" "more more" "word word" "primer primer";
  }
  .lead-slot { padding-right: 0; border-right: 0; }
  .front-top > .box-continue, .front-top > .box-standing, .front-top > .box-tip,
  .front-top.teasers-side > .teasers { padding-left: 0; }
  .front-top > .box-continue, .front-top > .box-standing,
  .front-top.has-cutting > .box-standing { align-self: stretch; margin-top: var(--row-gap); }
  .front-top > .box-tip, .front-top.teasers-side > .box-tip { align-self: start; margin-top: var(--row-gap); }
  .front-top > .box-continue > :last-child, .front-top > .box-standing > .standing { flex: 1 1 auto; }
  .standing { align-items: center; }
  /* The standing panel is stretched to the height of Continue here, so its
     figures are set larger to fill it. */
  .front-top > .box-standing .stand-v { font-size: clamp(44px, 6.4vw, 72px); }
  .desks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .desk:nth-child(3) { border-left-color: transparent; }
  .promo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
}
@media (max-width: 899px) {
  .tiles { --tc: 2; }
}
@media (max-width: 699px) {
  .lead-head { font-size: clamp(42px, 13vw, 64px); }
  .lead-body { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 12px; }
  .front-top, .front-top.has-cutting, .front-top.teasers-side, .front-top.has-cutting.teasers-side {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "cont" "stand" "word" "more" "primer";
  }
  .front-top.has-cutting, .front-top.has-cutting.teasers-side { grid-template-areas: "lead" "cont" "stand" "more" "word" "primer"; }
  .front-top > .box-standing, .front-top.has-cutting > .box-standing { margin-top: var(--side-gap); }
  .teaser-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .primer { grid-template-columns: auto minmax(0, 1fr); }
  .primer .btn { grid-column: 1 / -1; }
  .primer-art { width: 64px; }
  .teaser-list > li:nth-child(3) { border-left: 0; }
  .teaser-list > li:nth-child(3) .teaser { padding-left: 0; }
  .lead-plate .plate-caption { display: none; }
  .lead-thumb { padding: 6px; border-top-width: 4px; }
  .lead-fact { padding: 0 12px; }
  .lead-actions .btn { flex: 1 1 100%; min-width: 0; }
  .desks { grid-template-columns: 1fr; row-gap: 36px; margin: 0; }
  .desk { padding: 0; border-left: 0; }
  .desk-blurb { min-height: 0; }
  .promo { grid-template-columns: 1fr; padding-right: 0; }
  .feature-band-side { width: 100%; justify-content: space-between; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 14px; }
  .pcard-title { font-size: 18px; }
  .pcard-ribbon { font-size: 10.5px; padding: 5px 8px; }
  .section-filters { flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
  .section-filters::-webkit-scrollbar { display: none; }
  /* Every subject in one sideways-scrolling row, not a screenful of chips. */
  .subject-links { position: relative; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
  .subject-links::-webkit-scrollbar { display: none; }
  .subject-links .chip { flex: none; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tile { flex-direction: row; border-top-width: 1px; border-left: 6px solid var(--accent); }
  /* The plate keeps one height whatever the tile's length — Harry Potter and
     Middle-earth list five puzzles, and a plate stretched to that height was
     cropped down to a sliver of sky. */
  .tile-plate { width: 38%; flex: none; align-self: flex-start; }
  .tile-plate .plate-frame { height: 150px; aspect-ratio: auto; min-height: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
  .tile-body { padding: 10px 12px 12px; }
  .tile-deck { display: none; }
  .tile-puzzles { gap: 8px; padding-top: 8px; }
  .desk { display: grid; grid-template-columns: minmax(0, 1fr) 40%; column-gap: 14px; row-gap: 10px; align-items: start; }
  .desk > * { grid-column: 1 / -1; }
  .desk-plate { grid-column: 2; grid-row: 2 / span 2; }
  .desk-title { grid-column: 1; grid-row: 2; }
  .desk-blurb { grid-column: 1; grid-row: 3; }
}