/* news.css - ronde 6: het artikelsjabloon (100 pagina's), en later de index
   /news/ en het YIELD-archief.

   Alleen tokens uit DESIGN.md §1: geen losse hex, geen losse ease, radius alleen
   uit de gesloten set. De klassenprefix is `article-` en botst dus niet met
   `case-`/`work-` (work.css), `service-`/`hub-` (services.css) of `about-`
   (about.css); een artikelpagina laadt work.css er wel bij, want CaseImage en de
   lichtbak staan daar.

   Dit bestand staat NIET in styles.css. Dat bestand is byte-identiek aan
   output/ op de contrastreparatie van 2026-07-30 na, en een nieuw sjabloon is
   geen reden om daar opnieuw aan te komen (ronde 2, spec §4.1). */

/* ============================================================
   1. De hero (ink)
   ============================================================ */

.article-hero {
  background: var(--ink);
  color: var(--white);
  padding: clamp(96px, 12vw, 152px) 0 clamp(56px, 7vw, 88px);
}

/* --grey en niet --grey-2: die haalt op ink 3,37:1 bij 11,5px. Elke donkere
   sectie van deze site doet dit (DESIGN.md wijzigingslog 2026-07-30). */
.article-hero .kicker { color: var(--grey); }

.article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 5vw, 76px);
}

.article-hero-head .kicker { margin: 0 0 clamp(18px, 2.4vw, 28px); }
.article-hero-head .section-title { margin: 0; }

/* Staand of vierkant beeld draagt de TWEEDE ZONE (DESIGN.md §6b) in plaats van
   een band eronder half leeg te laten. Dat is 85 van de 97 artikelbeelden, dus
   dit is hier nog sterker de hoofdvorm dan bij de cases (14 van de 20). */
/* DE BEELDKOLOM KRIMPT NAAR HET BEELD, EN DE KOP NEEMT DE REST (ronde 6,
   2026-08-01). `fit-content(43%)` is min(natuurlijke breedte, 43% van de wrap):
   het beeld draagt inline een max-width uit zijn asset-metadata, dus de
   max-content van deze track IS zijn bronbreedte.

   Waarom dit moest. Met een vaste 1fr was de kolom op 1440px altijd ~531px,
   ook voor een bron van 210px. Een beeld dat zijn kolom niet vult maakt de
   hero niet alleen leeg aan de rechterkant: het beeld wordt dan ook KORTER dan
   de kop ernaast, en de overlopende kopregels staan in hun eentje in de smalle
   linkerkolom. Gemeten op /meteoric-soars-into-brazil/ (bron 210x234, de
   kleinste van de site): de hero bestond uit 30 banden beeld op 85%, NEGEN
   banden kop op 51% en 4 op 45%, samen 74%, en de pagina zakte naar 78%. Dat
   het de kop was en niet de beeldmaat is bewezen met /red-merging-for-gold/:
   even hoog beeld (231x234), geen enkele 51%-band, want die titel past binnen
   de beeldhoogte, en die pagina haalde 81%.

   Dit is DESIGN.md §4 letterlijk: past een beeld niet in de vorm, dan wijkt de
   VORM en niet het beeld. Opschalen zou de andere uitweg zijn en die is
   verboden. 43% en niet 45%: op 1440px is de gap 72px, dus de oude track was
   1168/2.2 = 531px = 42,8% van de wrap. Een bron boven die maat houdt daarmee
   exact de breedte die hij had. */
.article-hero.is-naast .article-hero-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.2fr) fit-content(43%);
}

/* Het beeld draagt de verhouding van zijn bronbestand; de aspect-ratio staat
   inline op het element en komt uit de asset-metadata. Hier alleen de
   begrenzing, zodat een staand knipsel de hero niet twee schermen hoog maakt. */
.article-hero-media { margin-top: clamp(28px, 4vw, 48px); }
.article-hero.is-naast .article-hero-media { margin-top: 0; }

/* NOOIT OPSCHALEN, NOOIT SNIJDEN (DESIGN.md §4). width:auto laat de browser op
   de natuurlijke maat beginnen; max-width en max-height begrenzen dan zonder te
   snijden, want zonder object-fit cover schaalt het hele kader mee. Dezelfde
   drie regels als .case-hero-media img, en om dezelfde reden: de mediane
   bronbreedte van dit materiaal is 748px, dus width:100% zou het merendeel
   opblazen. */
.article-hero-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 74vh;
  margin-inline: auto;
  border-radius: 4px;
}
.article-hero.is-naast .article-hero-media img { max-height: 76vh; }

/* --- de dek (standfirst) --- */

/* Waarom deze bestaat en waar hij vandaan komt: de noot in ArticleHero.astro,
   met de meting (81 van de 100 artikelen dragen er een).

   De MAAT loopt op naarmate er minder anders in de hero staat, en dat is geen
   willekeur: bij een staand beeld deelt de dek de kopkolom met de titel, bij een
   landschapsbeeld heeft hij de hele tweede zone, en zonder beeld draagt hij de
   sectie alleen. Bewust NIET de klasse .statement-title, wel die orde van
   grootte: script.js r.399 pakt de eerste .statement-title op de pagina en zet
   zijn .line-kinderen op blur plus autoAlpha 0. Op een pagina zonder
   statement-sectie zou dat deze regel zijn, en dan staat er niets
   (DESIGN.md §3). */
.article-dek {
  margin: clamp(26px, 3.4vw, 38px) 0 0;
  color: var(--white);
  font-size: clamp(1.18rem, 1.7vw, 1.45rem);
  line-height: 1.32;
  font-stretch: 88%;
  font-weight: 500;
  max-width: 42ch;
}

/* De dek IN ZONE TWEE. Geldt voor de landschapsvorm (het beeld is dan de band
   eronder) en voor de beeldloze vorm. Zonder deze regel is dat raster eenkoloms
   en zakt de dek als tweede RIJ onder de kop; dan is de hero daar alsnog
   eenzonig en heeft de dek niets opgelost. */
.article-hero.is-zijzone .article-hero-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

/* In de tweede zone: groter, en met een haarlijn erboven zoals elk los blok in
   een tweede zone op deze site (het projectdossier van een case, de kantoren in
   de contactband). */
.article-dek-zone {
  border-top: 2px solid var(--line-w);
  padding-top: clamp(18px, 2.4vw, 26px);
}
.article-dek-zone .article-dek {
  margin-top: 0;
  font-size: clamp(1.32rem, 2.1vw, 1.75rem);
  max-width: 30ch;
}
.article-dek-meta {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  color: var(--grey);
}

/* De beeldloze vorm (2 van de 100). DESIGN.md §6c draagt daarvoor een gelogde
   uitzondering op eis 2 (beeld in de kopsectie), alleen op die eis en alleen op
   die twee routes; eis 1, 3 en 4 gelden onverkort. De dek doet hier het werk dat
   het beeld elders doet en staat daarom op de grootste maat. */
.article-hero.is-tekst .article-hero-grid {
  align-items: start;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.article-hero.is-tekst .article-dek-zone .article-dek {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.22;
  max-width: 26ch;
}

/* ============================================================
   2. De body (paper)
   ============================================================ */

.article-body {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 7vw, 104px) 0;
}

.article-body-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* De stroom staat EERST in de DOM (tabvolgorde en mobiele leesvolgorde) en
   wordt hier naar rechts geplaatst. */
.article-flow { grid-column: 2; grid-row: 1; }
.article-rail {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: calc(var(--nav-h) + 26px);
  align-self: start;
}

.article-prose p {
  margin: 0 0 1em;
  max-width: 62ch;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.62;
}
.article-prose p:last-child { margin-bottom: 0; }
.article-prose a {
  color: var(--red-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-prose h2,
.article-prose h3 {
  /* Het kop-recept (DESIGN.md §2): smal en zwaar. Een tussenkop in een artikel
     staat niet op display-formaat; die maat is voor de h1 van de pagina. */
  font-stretch: 63%;
  font-weight: 840;
  letter-spacing: 0.002em;
  line-height: 1.08;
  text-transform: uppercase;
  margin: clamp(32px, 4vw, 48px) 0 clamp(12px, 1.6vw, 18px);
  max-width: 30ch;
}
.article-prose h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.article-prose h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.article-prose blockquote {
  margin: clamp(28px, 3.4vw, 40px) 0;
  padding-left: clamp(18px, 2.4vw, 26px);
  border-left: 2px solid var(--red);
  font-size: clamp(1.12rem, 1.6vw, 1.34rem);
  line-height: 1.42;
  max-width: 46ch;
}
.article-prose ul,
.article-prose ol {
  margin: 0 0 1em;
  padding-left: 1.1em;
  max-width: 62ch;
}
.article-prose li {
  margin-bottom: 8px;
  line-height: 1.56;
}

/* Een beeld IN de leesstroom. Zelfde begrenzing als de hero: nooit opschalen,
   nooit snijden. 28 beelden over de honderd documenten, waarvan 12 in de vier
   showcase-edities, en daar zijn de beelden de uitgave. */
.article-figure {
  margin: clamp(30px, 3.8vw, 44px) 0;
}
.article-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.article-figure .beeld-open:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 3px;
}

/* --- de rail --- */

/* De rail draagt alleen dit blok. Waarom de terugknop eruit is en waarom de
   gerelateerde artikelen er in taak 7 niet in mogen: de noot in
   ArticleBody.astro, met de meting erbij. */
.article-meta {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
}
.article-meta-lab {
  margin: 0;
  color: var(--grey-2);
  font-weight: 500;
}
.article-meta-val {
  display: block;
  margin-top: 8px;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.35;
}

/* ============================================================
   3. Smaller dan 1000px
   ============================================================ */

/* Onder 1000px klappen beide rasters naar een kolom, net als elk ander
   twee-zone-raster op deze site (DESIGN.md §6b). De hero-regels hebben een
   hogere specificiteit (0,3,1) dan een kale .article-hero-grid, dus ze moeten
   hier expliciet worden teruggezet; zonder die override blijft de hero
   tweekoloms tot 0px. Exact de val die work.css r.547 documenteert. */
@media (max-width: 1000px) {
  .article-hero.is-naast .article-hero-grid,
  .article-hero.is-zijzone .article-hero-grid,
  .article-hero.is-tekst .article-hero-grid { grid-template-columns: 1fr; }
  .article-hero.is-naast .article-hero-media img { max-height: 62vh; }

  .article-body-inner { grid-template-columns: 1fr; }
  .article-flow,
  .article-rail { grid-column: 1; }
  .article-flow { grid-row: 1; }
  /* De rail zakt ONDER de stroom mee, en plakt daar niet. Een sticky element in
     een enkele kolom plakt over de tekst heen die eronder staat. */
  .article-rail {
    grid-row: 2;
    position: static;
    margin-top: clamp(34px, 5vw, 48px);
  }
}

/* ============================================================
   4. Gerelateerde artikelen (paper-2)
   ============================================================ */

/* EEN EIGEN BAND EN NIET IN DE RAIL. Waarom: de noot in RelatedArticles.astro,
   met de meting uit taak 6 (rail 62px, kortste stroom 78px, drie titels ruim
   200px).

   Op --paper-2 en niet op --paper: de sectie erboven is al paper, en twee gelijk
   gekleurde banden lezen als een sectie. Zelfde keuze en zelfde token als het
   work-blok op een dienstpagina (ronde 5, manifest afwijking 7). Nagemeten
   contrast op #eceae4: --grey-2 geeft 4,87:1 en --red-deep 4,79:1, allebei boven
   de 4,5:1 van DESIGN.md §8. */
.article-related {
  background: var(--paper-2);
  color: var(--ink);
  padding: clamp(56px, 7vw, 96px) 0;
}

/* Het .news-inner-raster: rail links, de rijen rechts. */
.article-related-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.article-related-rail .kicker {
  color: var(--grey-2);
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}
/* De huismaat voor een kop in een smalle kolom, overgenomen van
   .news-rail .section-title. Geen nieuwe token. */
.article-related-rail .section-title {
  margin: 0;
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
}

.article-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* De rij is de grammatica van .news-row: een haarlijn per rij, de titel links en
   de meta aan de rechterrand, en bij hover een rode randstreep die uitschuift.
   Geen nieuw patroon. */
.article-related-row {
  border-top: 1px solid var(--line-k);
}
.article-related-row:last-child { border-bottom: 1px solid var(--line-k); }

/* De openingszin loopt over BEIDE kolommen, op een eigen rasterrij. Dat is de
   grammatica van .news-item-link hierboven en van .news-row/.about-row, en
   DESIGN.md §6b schrijft haar voor: een secundaire band onder de titel hoort niet
   in de smalste kolom van de rij te wringen. */
.article-related-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
  grid-template-areas:
    "title date"
    "lead  lead";
  align-items: baseline;
  gap: 6px clamp(14px, 2vw, 28px);
  /* Tikdoel ruim boven de 44px van DESIGN.md §8. */
  padding: clamp(18px, 2.2vw, 26px) 0;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.article-related-link::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12%;
  bottom: 12%;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .article-related-link:hover { color: var(--red-deep); transform: translateX(7px); }
  .article-related-link:hover::before { transform: scaleY(1); }
}
/* Toetsenbord krijgt dezelfde behandeling als de muis: anders is de actieve rij
   voor wie tabt onzichtbaar. Zelfde regel als .work-row. */
.article-related-link:focus-visible {
  outline: 2px solid var(--red-deep);
  outline-offset: 4px;
}

/* Het kop-recept (DESIGN.md §2): smal en zwaar, uppercase. */
.article-related-title {
  display: block;
  font-stretch: 63%;
  font-weight: 840;
  letter-spacing: 0.002em;
  line-height: 1.02;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 2.55vw, 2.25rem);
  text-wrap: pretty;
}
.article-related-title { grid-area: title; }
.article-related-date {
  grid-area: date;
  color: var(--grey-2);
  text-align: right;
}
/* Dezelfde maten als .news-item-lead: één zin, geen tweede samenvatting. */
.article-related-lead {
  grid-area: lead;
  margin: 4px 0 0;
  color: var(--grey-2);
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .article-related-inner { grid-template-columns: 1fr; }
}
/* Onder 560px zakt de datum onder de titel: naast een kop van twee regels is
   96px voor "27 Feb 2023" daar te krap. Zelfde breekpunt als .work-row. */
@media (max-width: 560px) {
  .article-related-link {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "date"
      "lead";
    gap: 8px;
  }
  .article-related-date { text-align: left; }
}

/* ============================================================
   5. De index /news/ (taak 8)
   ============================================================ */

/* --- 5a. De kop (ink), met het nieuwste stuk als lead --- */

/* Dezelfde padding-formule als .work-head, want dit is dezelfde soort pagina:
   een index die met een volle-breedte kop opent. */
.news-top {
  background: var(--ink);
  color: var(--white);
  padding: calc(var(--nav-h) + clamp(46px, 7vw, 96px)) 0 clamp(46px, 6vw, 86px);
}
.news-top .kicker { color: var(--grey); }
.news-top .section-title { margin: 0; }

.news-top-lead {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  color: var(--grey);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.5;
  max-width: 46ch;
}

/* HET STORY-RASTER UIT DESIGN.md §6b, "tekst naast beeld", en dat is de derde
   vorm van deze hero. Met 0.92fr/2fr stond de kop over de volle breedte en de
   cijferkolom eronder: gemeten op 1440px opende het raster op y=477 terwijl de
   cijfers pas op y=789 begonnen, dus 312px leegte, en de sectie was 1208px hoog.
   Nu draagt de smalle kolom kicker, kop, leadzin en cijfers samen, zodat beide
   kolommen ongeveer even hoog zijn.

   align-items: start en niet end: met `end` worden de cijfers naar de onderrand
   van de hoogste kolom geduwd, en juist dat maakte het gat. De cijfers zelf
   gebruiken letterlijk de .work-fact-klassen uit work.css; die wordt op deze
   pagina meegeladen. */
.news-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* De huismaat voor een display-kop in een smalle kolom (DESIGN.md §6b), letterlijk
   de maat die .news-rail .section-title in styles.css al gebruikt. Geen nieuwe
   token: zonder deze regel staat de kop op clamp(2.6rem, 6.4vw, 5.6rem) en dat is
   92px in een kolom van ~450px. */
.news-top-col .section-title { font-size: clamp(2.3rem, 4.2vw, 3.7rem); }
/* De cijfers sluiten aan op de tekst erboven in plaats van op de onderrand van
   het raster. */
.news-top-col .work-facts { margin-top: clamp(30px, 4vw, 48px); }

/* Het lead-item is EEN anker om beeld, meta, kop en zin heen. Het beeld draagt
   daarom geen eigen link (CaseImage linkbaar={false}): een anker in een anker is
   ongeldige HTML. */
.news-lead {
  position: relative;
  display: block;
  color: var(--white);
  text-decoration: none;
  transition: transform 0.5s var(--ease-out);
}
.news-lead-media { display: block; margin-bottom: clamp(20px, 2.6vw, 30px); }
/* NOOIT OPSCHALEN, NOOIT SNIJDEN (DESIGN.md §4). Het lead-beeld wisselt bij elke
   publicatie en kan dus staand of liggend zijn; width:auto laat de browser op de
   natuurlijke maat beginnen en de twee grenzen doen de rest, zonder object-fit
   cover en dus zonder verlies. Dezelfde drie regels als .article-hero-media img. */
.news-lead-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 62vh;
  border-radius: 4px;
  transition: transform 0.7s var(--ease-out);
}
.news-lead-meta {
  display: block;
  color: var(--grey);
  margin-bottom: clamp(12px, 1.6vw, 16px);
}
.news-lead-meta .sep { color: var(--red); }
/* Het kop-recept (DESIGN.md §2): smal en zwaar, uppercase. Kleiner dan de h1 van
   een artikelpagina, want dit is een item op een index en niet de pagina zelf. */
.news-lead-title {
  display: block;
  font-stretch: 63%;
  font-weight: 840;
  letter-spacing: 0.002em;
  line-height: 1.02;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  transition: color 0.4s var(--ease-out);
}
.news-lead-dek {
  display: block;
  margin-top: clamp(14px, 1.8vw, 20px);
  color: var(--grey);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.45;
  max-width: 54ch;
}
@media (hover: hover) and (pointer: fine) {
  .news-lead:hover .news-lead-title { color: var(--red); }
  .news-lead:hover .news-lead-media img { transform: scale(1.012); }
}
.news-lead:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 6px;
}

/* --- 5b. Het archief (paper) --- */

.news-archive {
  background: var(--paper);
  color: var(--ink);
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 112px);
}
.news-archive-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.news-archive-rail .kicker {
  color: var(--grey-2);
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}
.news-archive-rail .section-title {
  margin: 0;
  font-size: clamp(2.3rem, 4.2vw, 3.7rem);
}

/* DE RAIL PLAKT ALLEEN ALS HIJ AANTOONBAAR PAST (DESIGN.md §6b, valkuil 65). Een
   sticky element scrollt niet intern, dus wat onder de vouw uitsteekt is
   permanent onzichtbaar; op /our-work/ stond zo 115px van de rail buiten beeld.
   Gemeten over acht breedtes van 1001 tot 2560px: de rail is 453px op 1001px en
   loopt op tot 572px, waarna hij vlak blijft omdat de kop en het jaartal allebei
   op hun clamp-maximum staan. Met 98px top (nav-h + 26) is 670px het maximum dat
   hij nodig heeft, dus 760px geeft 90px marge. Zelfde vorm en zelfde
   redenering als .work-rail sinds ronde 5; check-news.mjs bewaakt het in taak 11,
   want de railhoogte hangt aan CMS-inhoud (de kop) en aan het aantal jaargroepen. */
@media (min-width: 1001px) and (min-height: 760px) {
  .news-archive-rail {
    position: sticky;
    top: calc(var(--nav-h) + 26px);
    align-self: start;
  }
}

/* Het meelopende jaar is VERRIJKING: zonder JS staat hier niets en draagt de
   springnavigatie eronder alle jaren met hun aantal. Vier jaartallen tegelijk
   tonen zou onzin zijn, dus dit blok bestaat pas als de leeslijn draait. */
.news-yearbox { display: none; }
.news-archive.is-enhanced .news-yearbox {
  display: block;
  margin-top: clamp(26px, 3.2vw, 38px);
}
/* Alle jaren in DEZELFDE rastercel, er is er precies een zichtbaar. Zo houdt het
   blok dezelfde hoogte bij elke wissel en springt de rail niet. Dezelfde
   stapeling als .about-stage. */
.news-year-stack {
  display: grid;
  grid-template-areas: "jaar";
}
.news-year-big {
  grid-area: jaar;
  /* De statement-MAAT, niet de klasse .statement-title: script.js r.399 pakt de
     eerste .statement-title op de pagina en zet zijn .line-kinderen op blur plus
     autoAlpha 0, en op een pagina zonder statement-sectie zou dat dit zijn
     (DESIGN.md §3). */
  font-size: clamp(3rem, 8.6vw, 8rem);
  font-stretch: 63%;
  font-weight: 840;
  letter-spacing: 0.002em;
  line-height: 0.98;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.news-year-big.is-on { opacity: 1; }

.news-year-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: clamp(6px, 0.8vw, 10px);
}
.news-count-fig {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-stretch: 63%;
  font-weight: 840;
  color: var(--red-deep);
}
.news-count-lab { color: var(--grey-2); }

/* De springnavigatie. Dit is de basisvorm en zij is compleet: elk jaar met zijn
   aantal, ook zonder JS. */
.news-yearnav { margin-top: clamp(24px, 3vw, 34px); }
.news-yearnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.news-yearlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Tikdoel: DESIGN.md §8 vraagt 44px voor een knop. */
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-k);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.news-yearlink-n { color: var(--grey-2); }
@media (hover: hover) and (pointer: fine) {
  .news-yearlink:hover { color: var(--red-deep); border-color: var(--red-deep); }
  .news-yearlink:hover .news-yearlink-n { color: var(--red-deep); }
}
.news-yearlink:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 3px; }

/* --- 5c. De jaargroepen en de rijen --- */

.news-year + .news-year { margin-top: clamp(40px, 5vw, 64px); }

/* De jaarkop in de STROOM. Boven 1000px is hij een rustig mono-label (de rail
   draagt het jaar groot); daaronder verdwijnt de rail en wordt deze kop het
   enige oriëntatiepunt op een pagina van deze lengte, dus daar plakt hij. */
.news-year-head {
  margin: 0 0 clamp(10px, 1.4vw, 14px);
  color: var(--grey-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.news-year-head-n { color: var(--red-deep); }

.news-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-item { border-top: 1px solid var(--line-k); }
.news-item:last-child { border-bottom: 1px solid var(--line-k); }

/* DRIE RASTERRIJEN, EN DE TWEEDE EN DERDE LOPEN OVER BEIDE KOLOMMEN. Dat is
   DESIGN.md §6b: een secundaire band hoort niet in de smalste kolom van de rij.
   De datum aan de rechterrand is geen versiering maar het element dat de rij op
   breedte houdt; een kop van twaalf tekens zou de band anders op 43% laten
   eindigen, precies wat op /our-work/ is gemeten. */
.news-item-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
  grid-template-areas:
    "title date"
    "lead  lead"
    "extra extra";
  align-items: baseline;
  gap: 6px clamp(14px, 2vw, 28px);
  padding: clamp(18px, 2.2vw, 26px) 0;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.news-item-link::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 12%;
  bottom: 12%;
  width: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .news-item-link:hover { color: var(--red-deep); transform: translateX(7px); }
  .news-item-link:hover::before { transform: scaleY(1); }
}
.news-item-link:focus-visible { outline: 2px solid var(--red-deep); outline-offset: 4px; }

/* Het kop-recept (DESIGN.md §2). */
/* DE ITEM-TITELS, RONDE 2 (2026-08-29). Gemeten met scripts/probes/titel-breuken.mjs
   op 390, 1024 en 1440px, tegen de basislijn van diezelfde build.

   HET PROBLEEM: bij 32px brak deze kop op vier plekken lelijk, en elke stap
   omhoog maakte dat erger. Bij 33,3px kwam "NAILING YOUR CONFERENCE PRESENCE IN"
   / "2025" terug, bij 36px daarbovenop "MEETING A 'CAPITAL CRUNCH' FACE-TO-" /
   "FACE". Dat zijn precies de twee die Koen bij naam als onacceptabel noemde, dus
   op de maat alleen was er geen ruimte: gemeten curve 32px -> 123 regelvakken,
   34 -> 127, 36 -> 132 over 99 titels.

   WAT HET WEL OPLOST IS text-wrap: pretty. Dat is geen maat maar een
   regelafbreek-strategie: de browser houdt de laatste regel gevuld in plaats van
   er een los woord op te laten staan. Gemeten over drie breedtes:

     nu live, 32px, zonder pretty     25 lelijke breuken site-breed
     36px zonder pretty               nog meer, met beide gevallen van Koen terug
     36px MET pretty                  10, en geen enkele weduwe op de nieuwslijst

   De tien die overblijven zijn vier section-titles die met opzet over twee regels
   staan ("Off the / wire."), een weduwe op .news-client die er al stond, en drie
   keer "MEETING A 'CAPITAL CRUNCH' FACE-" / "TO-FACE". Die laatste is een breuk
   OP het koppelteken van een koppelwoord, dezelfde vorm die hier al stond bij
   "CYBER-" / "SECURE NATION BY 2030"; zij is leesbaarder dan de FACE-TO- / FACE
   die ronde 1 opleverde.

   WAT JE MOET WETEN VOOR JE HIERAAN KOMT: pretty is een progressieve
   verbetering. Een browser die het niet kent valt terug op gewoon afbreken, en
   dan is dit 36px ZONDER de bescherming, dus met de weduwen terug. De maat is
   dus veilig, de belofte over de breuken niet in elke browser.

   .article-related-title draagt exact dezelfde clamp en is hetzelfde ding op een
   artikelpagina; die twee bewegen samen of niet. */
.news-item-title {
  grid-area: title;
  font-stretch: 63%;
  font-weight: 840;
  letter-spacing: 0.002em;
  line-height: 1.02;
  text-transform: uppercase;
  font-size: clamp(1.45rem, 2.55vw, 2.25rem);
  /* text-wrap: pretty laat de browser de laatste regel niet met een los woord
     achterblijven. Zie het blok boven .news-item-title voor de meting. */
  text-wrap: pretty;
}
.news-item-date {
  grid-area: date;
  color: var(--grey-2);
  text-align: right;
  white-space: nowrap;
}
/* DE EERSTE ZIN IS DE HELE REDEN VAN DEZE RIJ (spec §2): dit archief toont de
   teksten en niet de metadata eromheen. Hij houdt de rij bovendien op breedte,
   samen met de datum. */
.news-item-lead {
  grid-area: lead;
  margin: 4px 0 0;
  color: var(--grey-2);
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  line-height: 1.5;
}

/* De showcase-rij: een knipsel en een label, op een eigen rasterrij. */
.news-item-extra {
  grid-area: extra;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(12px, 1.6vw, 16px);
}
/* Zelfde behandeling als .work-clip: de KOLOM ligt vast in het raster, alleen de
   hoogte volgt de bron, en er wordt nooit gesneden of opgeschaald. */
.news-item-clip {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-2);
  width: fit-content;
}
.news-item-clip img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 76px;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .news-item-link:hover .news-item-clip img { filter: none; }
}
.news-item-kind { color: var(--red-deep); }

/* --- 5d. Smaller dan 1000px --- */

@media (max-width: 1000px) {
  .news-top-grid,
  .news-archive-inner { grid-template-columns: 1fr; }

  /* De kolom is hier de volle breedte, dus de smalle-kolom-maat uit .news-top-col
     hoort terug naar de gewone sectiekop-schaal. Zonder deze regel blijft de kop
     op een klein scherm onnodig ingehouden. */
  .news-top-col .section-title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }

  /* De rail zakt boven de lijst en plakt daar niet: een sticky element in een
     enkele kolom plakt over de inhoud eronder heen. Het meelopende jaar heeft
     daar geen betekenis meer (het staat niet naast de rijen), dus het blijft
     verborgen en de springnavigatie doet het werk. */
  .news-archive.is-enhanced .news-yearbox { display: none; }

  /* HIER WORDT DE JAARKOP HET ORIENTATIEPUNT (spec §3.1H). Zonder rail is een
     pagina van deze lengte zonder springpunten onbruikbaar; plakkend onder de
     nav zie je altijd in welk jaar je zit. Dit is CSS zonder JS en degradeert
     dus vanzelf goed. */
  .news-year-head {
    position: sticky;
    top: var(--nav-h);
    z-index: 2;
    margin: 0;
    padding: 12px 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line-k);
  }
  .news-year + .news-year { margin-top: clamp(30px, 5vw, 44px); }
}

/* Onder 560px zakt de datum onder de titel: naast een kop van twee regels is
   112px voor "27 Feb 2023" daar te krap. Zelfde breekpunt als .work-row en
   .article-related-link. */
@media (max-width: 560px) {
  .news-item-link {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "date"
      "lead"
      "extra";
    gap: 8px;
  }
  .news-item-date { text-align: left; }
  .news-item-extra { flex-wrap: wrap; }
}

/* ============================================================
   6. Het YIELD-archief /yield/ (taak 9)
   ============================================================ */

/* --- 6a. De kop (ink), met het contactblad --- */

/* Dezelfde padding-formule als .work-head en .news-top: dit is dezelfde soort
   pagina, een index die met een volle-breedte kop opent. */
.yield-top {
  background: var(--ink);
  color: var(--white);
  padding: calc(var(--nav-h) + clamp(46px, 7vw, 96px)) 0 clamp(46px, 6vw, 86px);
}
.yield-top .kicker { color: var(--grey); }
.yield-top .section-title { margin: 0; }
.yield-top-intro {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  color: var(--grey);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.5;
  max-width: 46ch;
}

/* DE HERO. Hier stond tot 2026-08-02 een contactblad van alle 61 stills, en de
   reden dat het weg is staat gemeten in YieldSheet.astro: in de rasterkolom liep
   het vast op 721px en werd elke cel 85x48px (0,18x), kleiner naarmate het scherm
   groter werd. Over de volle wrap werd de cel 136px en het bleef een raster van
   thumbnails op de plek waar een hero hoort.

   Het raster is dat van de story-sectie uit DESIGN.md §6b, "tekst naast beeld",
   dezelfde die deze sessie ook de kop van /news/ kreeg. Geen nieuw patroon.
   align-items: start, want met `end` worden de kolommen naar de onderrand van de
   hoogste geduwd en ontstaat precies het gat dat op /news/ 312px was. */
.yield-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* De huismaat voor een display-kop in een smalle kolom (DESIGN.md §6b), letterlijk
   de maat die .news-rail .section-title in styles.css gebruikt. */
.yield-hero-col .section-title { font-size: clamp(2.3rem, 4.2vw, 3.7rem); }

/* HET LOGO KOMT VAN yieldPage EN DRAAGT DE HOMEPAGE-BEHANDELING. .yield-logo in
   styles.css r.1118 is `width: 100%; max-width: 300px`, en dat is daar juist omdat
   het in een eigen rasterkolom van minmax(180px, 300px) staat. Hier staat het in
   een tekstkolom, dus de breedte komt van de bron en niet van de kolom: anders
   rekt een logo van 220px op naar 300px, en opschalen is verboden (DESIGN.md §4). */
.yield-hero-logo {
  margin: clamp(18px, 2.4vw, 26px) 0 clamp(16px, 2vw, 22px);
}
.yield-hero-logo img {
  display: block;
  width: auto;
  height: clamp(38px, 4.6vw, 58px);
  max-width: 100%;
}

.yield-channel { margin: clamp(22px, 2.8vw, 30px) 0 0; }

/* DE CIJFERBAND onder de hero, over de volle wrap. Drie gelijke kolommen zoals
   .results-grid op de homepage; `auto` zou de band links laten samenklonteren en
   twee derde van de breedte leeg laten. De labels en figures krijgen nowrap,
   want "2023-2025" op figure-formaat brak eerder over twee regels waardoor de
   drie labels op drie verschillende hoogtes kwamen te staan. */
.yield-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 46px);
  margin-top: clamp(40px, 5.5vw, 72px);
}
.yield-facts .work-fact { margin: 0; }
.yield-facts .work-fact-figure,
.yield-facts .work-fact-label { white-space: nowrap; }

/* Het beeld draagt zijn eigen max-width inline, uit de asset-metadata, plus de
   aspect-ratio. Beide zijn nodig: alleen een ratio laat een nog niet geladen beeld
   tot de kolombreedte rekken en daarna terugkrimpen, en zo'n layoutsprong
   verschuift elke ScrollTrigger-positie op de pagina (DESIGN.md §4). */
.yield-hero-media {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ink-3);
}
.yield-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 6b. De edities (ink-2) --- */

/* --ink-2 en niet --ink: twee gelijk gekleurde banden lezen als een sectie.
   Bestaande token (styles.css r.9), geen nieuwe kleur. Zelfde ingreep als het
   work-blok op een dienstpagina, dat --paper-2 kreeg omdat de band erboven al
   paper was. */
.yield-archive {
  background: var(--ink-2);
  color: var(--white);
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 112px);
}
.yield-archive-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
.yield-rail .kicker { color: var(--grey); margin: 0 0 clamp(14px, 1.8vw, 20px); }
/* De huismaat voor een kop in een smalle kolom, van .news-rail .section-title. */
.yield-rail .section-title { margin: 0; font-size: clamp(2.3rem, 4.2vw, 3.7rem); }

/* DE RAIL PLAKT ALLEEN ALS HIJ AANTOONBAAR PAST (DESIGN.md §6b, valkuil 65).
   Een sticky element scrollt niet intern, dus wat onder de vouw uitsteekt is
   permanent onzichtbaar.

   DIT IS EEN GEMETEN DREMPEL EN DE EERSTE VERSIE FAALDE ERDOOR. De rail droeg
   toen de kop over drie regels, zeventien pillen met "September 2024 4" erin en
   de kanaalknop: 951px op 1024px breed, terwijl een venster van 900px er 802px
   voor heeft. De reparatie is de rail passend maken en niet de drempel verruimen
   (een min-height die op vrijwel elk scherm uitstaat is dode code, de drift van
   --glide). Kop op een regel, korte maandlabels zonder het aantal, en de
   kanaalknop naar de kopsectie: 570px op 1024px en 434px vanaf 1440px.

   Met 98px top (nav-h + 26) is 668px het maximum dat hij nodig heeft. 700px geeft
   dus marge en zet sticky aan op vrijwel elk desktopvenster, precies andersom dan
   de eerste versie. */
@media (min-width: 1001px) and (min-height: 700px) {
  .yield-rail {
    position: sticky;
    top: calc(var(--nav-h) + 26px);
    align-self: start;
  }
}

.yield-editionnav { margin-top: clamp(22px, 2.8vw, 30px); }
.yield-editionnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.yield-editionlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Tikdoel ≥44px (DESIGN.md §8). */
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-w);
  border-radius: 999px;
  color: var(--white);
  text-decoration: none;
  font-size: 0.96rem;
  transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.yield-editionlink-n { color: var(--grey); }
@media (hover: hover) and (pointer: fine) {
  .yield-editionlink:hover { color: var(--red); border-color: var(--red); }
  .yield-editionlink:hover .yield-editionlink-n { color: var(--red); }
}
.yield-editionlink:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }



/* --- 6c. Een editie en zijn kaarten --- */

.yield-edition + .yield-edition { margin-top: clamp(48px, 6vw, 76px); }

.yield-edition-head {
  border-top: 1px solid var(--line-w);
  padding-top: clamp(14px, 1.8vw, 18px);
  margin-bottom: clamp(20px, 2.6vw, 28px);
}
/* Het kop-recept (DESIGN.md §2): smal en zwaar, uppercase. Kleiner dan de kop van
   de sectie, want dit is een groep binnen die sectie. */
.yield-edition-title {
  margin: 0;
  font-stretch: 63%;
  font-weight: 840;
  letter-spacing: 0.002em;
  line-height: 1.02;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.65vw, 2.4rem);
  text-wrap: pretty;
}
/* Het aantal afleveringen staat bij zijn eigen kaarten en niet in de
   springnavigatie: daar maakte het de pil te breed en de rail te hoog. */
.yield-edition-n {
  color: var(--grey);
  font-size: 0.96rem;
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* De ondertitel is GELIFTE copy: de zin die op de live pagina bij deze editie
   stond. Zij is het enige inhoudelijke verschil tussen twee edities en houdt de
   band op breedte (DESIGN.md §6b). */
.yield-edition-sub {
  margin: 10px 0 0;
  color: var(--grey);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.45;
  max-width: 58ch;
}

/* .film-card komt uit styles.css en staat daar in een sleepbare STROOK, met
   `flex: 0 0 clamp(288px, 32vw, 440px)`. Hier staat hij in een raster, dus die
   basis wordt teruggezet; de kaart zelf is ongemoeid gebleven. */
.yield-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.yield-cards .film-card { flex: initial; }
/* Een kaart is klikbaar via de knop erin; de cursor hoort dat op de hele kaart te
   zeggen, net als op de homepage. */
.yield-cards .film-card { cursor: pointer; }
/* Het anker van een springlink uit het contactblad: de kaart hoort niet onder de
   nav te belanden. */
.yield-cards .film-card { scroll-margin-top: calc(var(--nav-h) + 20px); }
.yield-edition { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* ================================================ DE YIELD-BAND OP /news/ (ink)

   2026-08-29. SPOKE vroeg om News en YIELD samen te brengen, met YIELD als
   support act. De band staat onder het nieuwsarchief en boven de contactband.

   Het raster is .news-inner (0,92fr / 2fr), hetzelfde als de rest van deze
   pagina en van de halve site: rail links met kicker, kop, teller en knop, de
   drie kaarten rechts. De kaarten zijn .film-card uit styles.css met dezelfde
   flex-reset als .yield-cards hierboven; twee losse rasters, want dit er zijn
   drie in een rij en daar hoort een vaste kolomtelling bij in plaats van
   auto-fill (DESIGN.md §6b3a: auto-fill in een begrensde kolom maakt de cellen
   kleiner naarmate het scherm groeit). */
.news-yield {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(64px, 7vw, 88px) 0;
}
.news-yield .kicker { color: var(--grey); }
.news-yield-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 2fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
/* Contextuele verkleining, hetzelfde idioom als .about-careers .section-title:
   een kop in een rail van ~333px op de huismaat van 89,6px wordt vier regels
   kapitalen. */
.news-yield .section-title {
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  margin: 0;
  text-wrap: pretty;
}
.news-yield-lead {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  color: var(--grey);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 40ch;
}
.news-yield-count {
  margin: 14px 0 0;
  color: var(--grey);
}
.news-yield-act { margin: clamp(20px, 2.4vw, 28px) 0 0; }
.news-yield-edition {
  margin: 0 0 14px;
  color: var(--grey);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-w);
}
.news-yield-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.news-yield-cards .film-card {
  flex: initial;
  cursor: pointer;
}

/* --- 6d. Smaller dan 1000px --- */

@media (max-width: 1000px) {
  .yield-hero,
  .yield-archive-inner,
  .news-yield-inner { grid-template-columns: 1fr; }
  /* De kolom is hier de volle breedte, dus de rail-maat hoort terug naar de
     gewone sectiekop-schaal. */
  .news-yield .section-title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
  /* De kolom is hier de volle breedte, dus de smalle-kolom-maat hoort terug naar
     de gewone sectiekop-schaal. */
  .yield-hero-col .section-title { font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
  /* Het beeld staat onder de tekst en krijgt daar lucht. */
  .yield-hero-media { margin-top: clamp(28px, 5vw, 40px); }
}

/* Onder 640px passen drie cijfers naast elkaar niet meer: "2023-2025" op
   figure-formaat is dan breder dan een derde van de kolom. */
@media (max-width: 640px) {
  .yield-facts { grid-template-columns: 1fr; }
  /* Drie kaarten naast elkaar zijn hier 110px breed; onder elkaar is de thumb
     leesbaar en blijft de play-knop een tikdoel van >=44px. */
  .news-yield-cards { grid-template-columns: 1fr; }
}