/* The front page, and only the front page. Loaded from index.html's own head
   block, so no other page pays for it and no shared stylesheet had to be
   touched to add it.

   Rebuilt 19 August 2026 against the owner-approved proposal mockup
   (homepage-bold, 18 August): the full-bleed hero, the day's panel riding up
   over its bottom edge, the search on the masthead. Everything below the
   panel reuses site.css's existing vocabulary — .entry-points, .shelf/.mosaic,
   .champion/.ranked, .today/.cards, .join — and takes no rules here.

   Structure only where possible: colour appears here only where type sits on
   the hero's dark ground, which site.css has no tokens for on purpose (the
   ground is a stage, not a surface, and it does not flip with the theme). */

/* ── the masthead ───────────────────────────────────────────────────────────
   site.css's .top carries the two-column headline/standfirst grid. The
   search joins it as a full-measure row underneath — on the nameplate,
   before any content — so both additions span the grid. The bottom margin
   comes down from --band: the hero underneath carries its own presence and
   the masthead should sit tight above it. */
.top{margin:var(--half) 0 0; row-gap:calc(var(--u)*2)}
.top .hunt{grid-column:1/-1; margin:calc(var(--u)*1.5) 0 0}
.top .egs{grid-column:1/-1; margin:0}

/* ── the hero: one production, off both edges of the window ─────────────────
   Same breakout the invitation band uses. html{overflow-x:clip} in site.css
   already refuses the half-scrollbar overhang this creates, so the picture
   meets both window edges with nothing beside it.

   Two visual states, decided by the image's stated terms (|whole), plus the
   no-picture one. The ground is #101010 in both themes — the one neutral a
   photograph, a window card and a sleeve all sit on without a colour
   decision, same value the previous full-bleed plate used. */
.hero{position:relative; width:100vw;
  margin:var(--half) calc(50% - 50vw) 0}
.hero .kicker{color:rgba(255,255,255,.85); margin:0 0 calc(var(--u)*.75)}
.hero-title{font-size:clamp(40px,5.6vw,78px); line-height:.92;
  letter-spacing:-.03em; font-weight:700; margin:0; max-width:14ch;
  text-wrap:balance;
  /* cancel the base h2 flex + hairline, same as h2.big */
  display:block; border-bottom:0; padding-bottom:0}
.hero-title.long{font-size:clamp(30px,4vw,54px); line-height:.98; max-width:22ch}
.hero-title a{color:#fff; text-decoration:none}
.hero-title a:hover{text-decoration:underline; text-decoration-thickness:4px;
  text-underline-offset:6px}
.hero .front-sub{color:rgba(255,255,255,.92); max-width:52ch;
  margin-top:calc(var(--u)*1.5)}
.hero .front-sub a{color:#fff; font-weight:600;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.5)}
.hero .front-sub a:hover{box-shadow:inset 0 -2px 0 #fff}

/* `sweep` — the terms permit a crop. The photograph fills the band,
   object-fit:cover, kicker + name + sentence on a scrim at its foot. The
   extra bottom padding is the room the day's panel rides up into. */
.hero.sweep{min-height:clamp(480px,78vh,780px); background:#101010;
  display:flex; align-items:flex-end}
.hero.sweep .hero-pic{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 38%}
.hero.sweep::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.30) 40%,
    rgba(0,0,0,0) 66%)}
.hero.sweep .hero-say{position:relative; z-index:1;
  padding:0 var(--gutter) calc(var(--u)*19)}
.hero.sweep .hero-credit{position:absolute; top:12px; right:var(--gutter);
  z-index:1; margin:0; font-size:var(--t-cap); color:rgba(255,255,255,.78);
  text-shadow:0 1px 3px rgba(0,0,0,.8); max-width:44ch; text-align:right}

/* `held` — the terms refuse a crop (229 of 366 leads, measured 19 August
   2026; almost all near-square sleeves). The band still runs edge to edge,
   and the sleeve stands at the band's height on the right, whole, with the
   words filling the left — a composition, not a centred image between two
   dead bars. */
.hero.held{background:#101010; color:#fff;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:minmax(0,1fr) auto;
  gap:0 calc(var(--u)*6); align-items:center; padding:0}
.hero.held .hero-say{grid-column:1; grid-row:1; align-self:center;
  padding:var(--half) 0 var(--half) var(--gutter)}
/* The sleeve stands whole — no crop — at the band's own height, flush to the
   window's right edge, so the picture genuinely meets one edge and the band
   meets both. */
.hero.held .hero-pic{grid-column:2; grid-row:1/-1; display:block;
  justify-self:end; width:auto; height:auto; max-width:min(48vw,700px);
  max-height:min(74vh,720px)}
.hero.held .hero-credit{grid-column:1; grid-row:2; margin:0;
  padding:0 0 calc(var(--u)*1.5) var(--gutter);
  font-size:var(--t-cap); color:rgba(255,255,255,.7)}

/* `bare` — no artwork. The owner: "If there is no image, then there is no
   image." No placeholder, and no viewport-wide dark band with nothing on
   it — the block comes back into the measure and speaks in the page's own
   colours. */
.hero.bare{width:auto; margin:var(--half) 0 0; background:none}
.hero.bare .kicker{color:var(--grey)}
.hero.bare .hero-title a{color:var(--ink)}
.hero.bare .hero-title a:hover{color:var(--link); text-decoration:none}
.hero.bare .front-sub{color:var(--grey)}
.hero.bare .front-sub a{color:var(--link); box-shadow:inset 0 -1px 0 transparent}
.hero.bare .hero-none{font-size:var(--t-small); color:var(--mute);
  margin-top:calc(var(--u)*1.5)}
.hero.bare .hero-none a{color:var(--link)}

/* ── the day, up over the photograph's bottom edge ──────────────────────────
   A paper panel, lifted, so the hero and the date read as one composed unit
   rather than two stacked blocks. The lift only happens against the sweep
   state — over the held band or on a bare day the panel sits normally. */
.dateline{position:relative; z-index:2; margin:var(--half) 0 0}
.hero.sweep + .dateline{margin-top:calc(var(--u)*-13)}
.dateline .panel{background:var(--paper); border:1px solid var(--hair);
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  padding:calc(var(--u)*4);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:calc(var(--u)*3) calc(var(--u)*5); align-items:start}
.panel .dl-head{grid-column:1}
.panel .dl-rest{grid-column:2}
/* With pictures the panel opens out: the day's heading and the text rows on
   the left, the lead picture at size, two more beside it. index() caps the
   cluster and empties it below three, so this branch always has exactly
   three. */
.panel:has(.frag){grid-template-columns:minmax(0,1.15fr) minmax(0,1.7fr)
    minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"head lead f2 f3" "rest lead f2 f3"}
.panel:has(.frag) .dl-head{grid-area:head}
.panel:has(.frag) .dl-rest{grid-area:rest; align-self:end}
.panel:has(.frag) article.frag-lead{grid-area:lead}
.panel:has(.frag) article.frag:nth-of-type(2){grid-area:f2}
.panel:has(.frag) article.frag:nth-of-type(3){grid-area:f3}

.panel h2{display:block; border-bottom:0; padding-bottom:0; margin:0;
  font-size:var(--d3); line-height:1.05; font-weight:700;
  letter-spacing:-.02em}
.dl-head p{margin:calc(var(--u)*1.25) 0 0; font-size:var(--t-small);
  color:var(--grey); max-width:36ch}
.dl-head .more{margin-top:calc(var(--u)*1.75)}

.frag{min-width:0}
.frag .pic{display:block; background:var(--sunk)}
.frag .pic img{width:100%; aspect-ratio:var(--ar-tall); object-fit:cover;
  display:block}
.frag-lead .pic img{aspect-ratio:5/4}
.frag .pic img.whole{object-fit:contain}
.frag b{display:block; margin-top:var(--u); font-weight:600; line-height:1.25;
  font-size:var(--t-small)}
.frag-lead b{font-size:clamp(18px,1.8vw,24px); line-height:1.15}
.frag b a{color:var(--ink); text-decoration:none;
  transition:color var(--beat) var(--ease)}
.frag b a:hover{color:var(--link)}
.frag .at{grid-column:auto}

.dl-rest{border-top:1px solid var(--hair)}
.frag-bare{padding:calc(var(--u)*1.4) 0; border-bottom:1px solid var(--hair)}
.frag-bare b{font-weight:600; line-height:1.25; font-size:var(--t-small)}
.frag-bare b a{color:var(--ink); text-decoration:none;
  transition:color var(--beat) var(--ease)}
.frag-bare b a:hover{color:var(--link)}
.frag-bare .at{grid-column:auto}

/* ── collapse. One deliberate column. ───────────────────────────────────────
   The held sleeve takes the full width at its own height — a near-square
   image needs no crop to meet both edges of a portrait screen. */
@media (max-width:820px){
  .hero.sweep{min-height:clamp(380px,62vh,560px)}
  .hero.sweep .hero-say{padding-bottom:calc(var(--u)*14)}
  .hero.sweep + .dateline{margin-top:calc(var(--u)*-9)}
  .hero.held{grid-template-columns:1fr; grid-template-rows:auto auto auto;
    padding:0 0 calc(var(--u)*3); gap:calc(var(--u)*2)}
  .hero.held .hero-pic{grid-column:1; grid-row:1; justify-self:stretch;
    width:100%; max-width:none; max-height:none}
  .hero.held .hero-say{grid-column:1; grid-row:2; padding:0 var(--gutter)}
  .hero.held .hero-credit{grid-column:1; grid-row:3; padding:0 var(--gutter)}
  .dateline .panel{grid-template-columns:1fr; padding:calc(var(--u)*3)}
  .panel .dl-head,.panel .dl-rest{grid-column:1}
  .panel:has(.frag){grid-template-columns:1fr 1fr;
    grid-template-areas:"head head" "lead lead" "f2 f3" "rest rest"}
}