/* The Year page, and only the Year page. Loaded from year.html's own head
   block, the same way index.html loads home.css.

   Its own file on purpose, for the reason site.css:55-58 already gives about
   share.css: several agents were editing site.css at once, and a stylesheet
   merge conflict is a site that renders wrong rather than one that fails
   loudly. Nothing here overrides a shared selector. The one class it borrows
   from site.css, `.dim`, is re-coloured only inside this page's own band,
   where the ground is dark and the sitewide muted grey would fall through the
   floor on contrast.

   WHAT THIS REPLACES, 28 August 2026. The page opened with the year set at
   --d1 on a line of its own, the computed headline sentence stacked under it,
   and then, in a separate block below, the lead photograph parked in a
   240-320px right-hand rail. Three stacked things, none of them composed
   against the others, and the photograph was the smallest element on a page
   it was supposed to open. They are now one band: the year, the sentence, the
   standfirst and the picture, on the stage ground, edge to edge.

   Decisions this respects rather than reopens:

   - decisions.md §22. The numeral is wayfinding and NOT the heading. It is
     set large, because §22's own reasoning is that it does the job a
     magazine's issue date does, but it is held back to a dimmed brass while
     the h1 sentence beside it runs in near-white serif. Size does the
     wayfinding; colour and typeface set the reading order.

   - The display/serif split the specimen draws at exactly this point
     (visual-language-ui-specimen.html:354-356): a big number takes the
     condensed display face, the sentence-shaped headline next to it takes the
     serif. Both halves of that rule are here.

   - decisions.md §14 and cropping.crop_rule. A lead image whose terms refuse
     a crop is not cropped, at any size. That gate was not applied on this
     page at all before today; see the `.whole` rule below.

   Tokens only, all of them already in site.css's :root. --stage-bg,
   --stage-fg and --stage-gold do not flip with the theme, which is correct: a
   stage is not a surface. */

/* ── the band ───────────────────────────────────────────────────────────────
   The full-bleed breakout `.join` and `.hero` already use. site.css sets
   html{overflow-x:clip}, which refuses the half-scrollbar overhang.

   Two shapes, decided by whether a lead image resolved. With one, the words
   take seven columns and the picture five, and the picture runs to the
   window's right edge at the band's full height. Without one, the words take
   the whole band and it simply reads shorter. No placeholder, no empty frame,
   no reserved space: the owner's rule on the front page holds here too. */
.year-band{width:100vw; margin:calc(var(--u)*3) calc(50% - 50vw) var(--band);
  background:var(--stage-bg); color:var(--stage-fg);
  display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch}
.year-band.with-pic{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}

.yb-say{align-self:center;
  padding:var(--band) calc(var(--u)*6) var(--band) var(--gutter)}
.year-band:not(.with-pic) .yb-say{padding-right:var(--gutter)}

/* The year. Wayfinding, held back: --display for the numeral, but a brass
   dimmed to about 4:1 against the ground so it reads as the plate at the top
   of the page rather than as the sentence you are meant to read first. Large
   text at this weight and size, so 4:1 clears AA with room. */
.yb-num{font-family:var(--display); font-weight:600;
  font-size:clamp(56px,9vw,132px); line-height:.84; letter-spacing:-.01em;
  color:var(--stage-gold); opacity:.68;
  margin:0 0 calc(var(--u)*2)}

/* The heading. A real computed sentence, so it takes the serif and the
   near-white, and it is what the eye lands on once the numeral has said where
   you are. 15:1 against the ground. */
.year-band h1{font-family:var(--serif); font-weight:700;
  font-size:clamp(26px,3vw,44px); line-height:1.18; letter-spacing:0;
  margin:0; max-width:26ch; color:var(--stage-fg); text-wrap:balance}

.yb-sub{font-family:var(--serif); font-size:var(--serif-lede); line-height:1.55;
  margin:calc(var(--u)*3) 0 0; max-width:46ch; color:#D6C9AE}
.yb-sub a{color:var(--stage-gold); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px}
.yb-sub a:hover{color:var(--stage-fg)}

/* ── the picture ────────────────────────────────────────────────────────────
   Full height of the band, meeting the window's right edge. This is the page
   opening on a photograph rather than referring to one from a sidebar.

   The figure carries the height and the image is pinned inside it. A grid
   row's height is indefinite until its contents are measured, so an in-flow
   image asked for `height:100%` would either collapse or drive the band to
   the file's own pixel height; the figure's min-height sets the floor,
   align-self:stretch matches it to however tall the words make the row, and
   inset:0 fills whatever that turns out to be.

   `.whole` is the crop gate, and it was missing from this page entirely:
   year.html rendered every lead image with object-fit:cover and no class,
   which cover-crops an image whose stated terms refuse a crop. The gate is
   applied here the way index.html has always applied it — the image is
   contained rather than cropped, standing on the band's own ground, which is
   the same answer the front page's `held` state gives. */
.yb-pic{margin:0; position:relative; align-self:stretch; min-width:0;
  min-height:clamp(300px,40vw,540px)}
.yb-pic img{position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover}
.yb-pic img.whole{object-fit:contain}

/* The caption sits in the picture's own bottom corner, the specimen's
   placement for a caption on art (visual-language-ui-specimen.html:283), on a
   solid backing rather than a text shadow. A photograph's own values are not
   knowable in advance, so the backing is what makes the contrast a number
   rather than a hope: 8.8:1 for the caption text and 4.8:1 for a link inside
   it, both measured against the worst case of a pure white photograph behind
   an 86% ground. */
.yb-pic figcaption{position:absolute; left:0; right:0; bottom:0;
  background:rgba(23,19,15,.86);
  padding:calc(var(--u)*1.5) calc(var(--u)*2.5);
  font-family:var(--sans); font-size:var(--t-cap); line-height:1.45;
  color:#E4D9C2}
.yb-pic figcaption a{color:var(--stage-gold); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px}
.yb-pic figcaption a:hover{color:#E4D9C2}
/* site.css's .dim is --mute, a grey chosen for paper. On this ground it is
   the credit line disappearing, so it is re-pointed inside the band only. */
.year-band .dim{color:#C0B49B}

/* ── collapse. One deliberate column. ───────────────────────────────────────
   The picture goes first, at 4:3, because it is what the page opens on and
   burying it under a screenful of type on a phone is the sidebar problem
   again in a taller form. The numeral keeps its clamp minimum: it is the
   thing that tells a reader on a small screen which year they landed on. */
@media (max-width:820px){
  .year-band.with-pic{grid-template-columns:1fr}
  .yb-pic{order:-1; min-height:0}
  .yb-pic img{position:static; height:auto; aspect-ratio:var(--ar-wide)}
  .yb-pic img.whole{aspect-ratio:auto}
  .yb-say,.year-band:not(.with-pic) .yb-say{
    padding:var(--half) var(--gutter) calc(var(--u)*5)}
}