/* Home: the hero */

/* ───────────────────────── Hero ───────────────────────── */
.hero { container: hero / inline-size; font-family: var(--serif); }
.hero__grid {
  /* the spine: the mark's column, carried down the page */
  --mark-w: calc((100cqi - 2 * var(--margin)) * .1066);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-9);
  padding-block: var(--sp-6) var(--sp-10);
}
/* the lead: its photograph carries the headline on an ink scrim (client, October 2026) */
.lead { display: flex; flex-direction: column; min-width: 0; }
.lead__frame { position: relative; display: block; margin: 0 calc(-1 * var(--margin)); background: var(--tot-ink); overflow: hidden; }
.lead__frame .photo { aspect-ratio: 4 / 5; }
.lead__over {
  --fade: var(--sp-9);
  position: absolute; inset: auto 0 0 0; display: grid; row-gap: var(--sp-3); padding: var(--fade) var(--margin) var(--sp-5);
  /* the scrim is there for legibility: dense ink behind every line of text, fading only above it */
  background: linear-gradient(to top, rgb(25 7 7 / .9) 0%, rgb(25 7 7 / .8) calc(100% - var(--fade)), rgb(25 7 7 / 0) 100%);
  --text: var(--stone-0); --text-2: var(--stone-200); --meta: var(--stone-300); --focus: var(--green-300); --context: var(--green-300);
  color: var(--text);
}
.lead__over .kicker a { position: relative; z-index: 1; }
.lead__title { margin: 0; max-width: 20ch; font: italic 700 clamp(2rem, 1.35rem + 2.6cqi, 3.875rem)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.lead__title a { color: var(--text); text-decoration: none; }
.lead__title a::after { content: ""; position: absolute; inset: 0; }       /* the whole picture opens the story */
.lead:hover .lead__title a { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; text-decoration-color: var(--green-300); }
.lead__dek { display: none; margin: 0; max-width: 46ch; font: 400 var(--t-dek)/1.42 var(--serif); color: var(--text-2); text-wrap: pretty; }
.lead__over .meta a { position: relative; z-index: 1; color: var(--text); }
.lead__cap { padding-inline: var(--margin); }

.hero__rail { display: grid; row-gap: var(--sp-10); align-content: start; }

/* Hero — tablet: 8 columns */
@container hero (min-width: 720px) {
  .hero__grid {
    --mark-w: 34.5px;
    grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--sp-10);
    padding-top: var(--sp-8);
  }
  .lead { grid-column: 1 / -1; }
  .lead__frame { margin: 0; }
  .lead__frame .photo { aspect-ratio: 3 / 2; }
  .lead__over { --fade: var(--sp-10); padding: var(--fade) var(--sp-7) var(--sp-6); }
  .lead__dek { display: block; }
  .lead__cap { padding: 0; }
  .hero__rail { grid-column: 1 / -1; }
}

/* Hero — desktop: the day so far on the spine, and beside it the lead,
   its photograph carrying the headline */
@container hero (min-width: 1100px) {
  .hero__grid {
    --mark-w: 42.4px;
    grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--sp-9);
    padding-block: var(--sp-9) var(--sp-11);
  }
  /* the lead stands beside the day so far and takes exactly its height */
  .hero__grid { align-items: stretch; }
  .lead { grid-column: 4 / 13; grid-row: 1; }
  .lead__frame { flex: 1 1 auto; min-height: 520px; }
  .lead__frame .photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .lead__over { --fade: var(--sp-11); padding: var(--fade) var(--sp-8) var(--sp-7); }
  .lead__over .kicker { font-size: var(--t-ui); }
  .hero__rail { grid-column: 1 / 4; grid-row: 1; padding-right: var(--sp-4); }
  .dl__thumb { width: 64px; height: 64px; }
}
/* a narrower desktop: the day so far takes four columns, so it does not run long */
@container hero (min-width: 1100px) and (max-width: 1299.98px) {
  .lead { grid-column: 5 / 13; }
  .hero__rail { grid-column: 1 / 5; }
}