/* =====================================================================
   eenheid.css — ÉÉN DOCUMENT (jurypunt ronde 2, hoog)
   Laadt als laatste stylesheet op elke pagina (ná de paginastijl) en trekt de hoofdstukken gelijk naar ONTWERP §1:
   C01 één vel (dubbele goudrand, 回-hoeken) per hoofdstuk · C03 één hoofdstukbalk · C04 één zegelfamilie (壹 贰 叁 …) +
   mono "02 / 07" · C20 één folio "HOOFDSTUK 2 / 7" · atmosfeerlaag 4–6 % rechts in elk vel · kalligrafie 2 tekens
   verticaal ± 118 px (alleen tekens uit de kit-subset Ma Shan Zheng).

   Hoofdstukbalk — de enige toegestane opbouw (pagina's definiëren geen eigen variant meer):
   <header class="s-titelblok s-titelblok--bergen" data-b-scene data-b-reeks="90">
     <div class="s-titelblok__kop">
       <p class="s-titelblok__rubriek"><span class="s-zegel-nr"><img src="…/beeld/merk/zegel-nr-2.svg" alt="" width="28" height="28">
         <span>02 <span class="s-zegel-nr__tot">/ 07</span></span></span><span class="s-kicker">Rubriek</span></p>
       <h2 class="s-h2">Titel <em>accent</em></h2>
     </div>
     <p class="s-titelblok__lead s-lead">Lead</p>            (optioneel)  <p class="s-bewijs">6 groepen · 20 typen</p> (optioneel)
     <span class="s-titelblok__teken" aria-hidden="true"><span class="s-kalli" lang="zh">门窗</span></span>
   </header>
   Atmosfeer (modifier op de balk, één per hoofdstuk, afwisselen): --draak (watermerk) · --bergen (inktbergen) · --tak · --mist.
   ===================================================================== */

/* ---------------------------------------------------------------- C03 hoofdstukbalk */
:root .s-titelblok.s-titelblok{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"kop teken" "lead teken" "bewijs teken";column-gap:24px;row-gap:0;align-items:start;justify-items:stretch;
  text-align:left;margin:0 0 var(--titelblok-na,clamp(28px,3vw,44px));padding:0;max-width:none;background:none;border:0;box-shadow:none}
:root .s-titelblok.s-titelblok::before{content:none}
:root .s-titelblok.s-titelblok > .s-titelblok__kop{grid-area:kop;display:grid;gap:12px;min-width:0;max-width:760px;margin:0;padding:0;text-align:left;justify-items:start}
:root .s-titelblok.s-titelblok .s-titelblok__rubriek{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0;flex-wrap:nowrap;min-width:0}
:root .s-titelblok.s-titelblok .s-titelblok__rubriek .s-kicker{margin:0}
:root .s-titelblok.s-titelblok .s-titelblok__kop > .s-h2,:root .s-titelblok.s-titelblok .s-titelblok__kop > h2{margin:4px 0 0;padding:0;text-align:left;text-wrap:balance}
:root .s-titelblok.s-titelblok > .s-titelblok__lead,:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-titelblok__lead{grid-area:lead;position:relative;align-self:start;max-width:46ch;
  margin:20px 0 0;padding:16px 0 0;text-align:left;font:italic 400 1.1875rem/1.42 var(--f-serif);color:var(--grijs1);text-wrap:pretty}
:root .s-titelblok.s-titelblok > .s-titelblok__lead::before,:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-titelblok__lead::before{content:"";position:absolute;left:0;top:0;right:auto;bottom:auto;
  width:40px;height:2px;margin:0;background:var(--goud)}
:root .s-titelblok.s-titelblok > .s-bewijs,:root .s-titelblok.s-titelblok > .s-titelblok__bewijs{grid-area:bewijs;margin:14px 0 0}
:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-bewijs{margin:4px 0 0}
/* lead/bewijs BINNEN de kop: geen grid-area (de kop heeft geen benoemde vlakken; "lead" maakte daar impliciete kolommen,
   waardoor rubriek en H2 over elkaar vielen — jury ronde 3, kritiek). Altijd één kolom onder elkaar: zegel → label → titel → lead → meta. */
:root .s-titelblok.s-titelblok > .s-titelblok__kop{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-titelblok__lead,:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-bewijs{grid-area:auto;max-width:min(46ch,100%)}
@media (min-width:768px){:root .s-titelblok.s-titelblok > .s-titelblok__lead,:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-titelblok__lead{font-size:1.3125rem}}

/* het teken: verticaal, rechts in het vel, 2 tekens (± 118 px per teken op desktop) */
:root .s-titelblok.s-titelblok > .s-titelblok__teken{grid-area:teken;position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:12px;
  width:auto;height:auto;min-height:0;margin:-4px -6px 0 0;padding:0;font-size:inherit;opacity:1;mix-blend-mode:normal;pointer-events:none;transform:none;background:none}
:root .s-titelblok.s-titelblok > .s-titelblok__teken > img{display:none}
:root .s-titelblok.s-titelblok .s-titelblok__teken .s-kalli{display:block;writing-mode:vertical-rl;font-size:64px;line-height:1.02;letter-spacing:.02em;color:var(--inkt);opacity:.88;mix-blend-mode:multiply}
@media (min-width:768px){:root .s-titelblok.s-titelblok .s-titelblok__teken .s-kalli{font-size:80px}}
@media (min-width:1024px){
  :root .s-titelblok.s-titelblok{column-gap:48px}
  :root .s-titelblok.s-titelblok > .s-titelblok__teken{margin:-8px -12px 0 0}
  :root .s-titelblok.s-titelblok .s-titelblok__teken .s-kalli{font-size:118px}
}
/* mobiel: teken rechtsboven naast rubriek en kop (zoals de titelblokken van de offerte), kop houdt de volle breedte eronder */
@media (max-width:767px){
  :root .s-titelblok.s-titelblok{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "lead" "bewijs"}
  :root .s-titelblok.s-titelblok > .s-titelblok__teken{position:absolute;top:-4px;right:-6px;margin:0}
  :root .s-titelblok.s-titelblok .s-titelblok__rubriek,:root .s-titelblok.s-titelblok .s-titelblok__kop > .s-h2{padding-right:70px}
  /* ronde 3: ook lead en metaregel houden de kolom van het teken vrij (gemeten: lead/meta ∩ teken op 430 en 375) */
  :root .s-titelblok.s-titelblok .s-titelblok__lead,:root .s-titelblok.s-titelblok .s-bewijs,:root .s-titelblok.s-titelblok > .s-titelblok__lead,:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-titelblok__lead,:root .s-titelblok.s-titelblok > .s-titelblok__kop > .s-bewijs{padding-right:62px;box-sizing:border-box;max-width:none}
  :root .s-titelblok.s-titelblok .s-titelblok__teken .s-kalli{font-size:56px}
}
/* varianten van vroeger (midden, inline, kader, kaart) bestaan niet meer: alles links, zelfde opbouw */
:root .s-titelblok--midden.s-titelblok,:root .s-titelblok--inline.s-titelblok{text-align:left;justify-items:stretch}

/* ---------------------------------------------------------------- atmosfeer in het vel (4–6 % inkt; nooit over teken, kop of hoekornament) */
:root .s-titelblok.s-titelblok::after{content:"";position:absolute;inset:auto;width:auto;height:auto;z-index:-1;pointer-events:none;opacity:0;background:none;transform:none;translate:none;scale:none;transition:none}
@media (min-width:1024px){
  :root .s-titelblok--draak.s-titelblok::after{opacity:.06;right:170px;top:-30px;width:420px;height:300px;background:url('../kit/afgeleid/draak-web.webp?v=ac373b6e') center/contain no-repeat}
  :root .s-titelblok--bergen.s-titelblok::after{opacity:.5;left:46%;right:170px;bottom:-30px;height:150px;
    background:url('../kit/afgeleid/bergen-ver-web.webp?v=5988c592') right bottom/auto 100% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 80%,transparent)}
  :root .s-titelblok--tak.s-titelblok::after{opacity:.55;right:180px;top:-44px;width:260px;height:200px;background:url('../kit/afgeleid/tak-web.webp?v=e852fe12') right top/contain no-repeat;scale:-1 1}
  :root .s-titelblok--mist.s-titelblok::after{opacity:.55;left:44%;right:160px;top:10%;bottom:-20px;
    background:url('../beweging/assets/mist/mist-a.webp?v=a79ab797') center/cover no-repeat;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 55% 55%,#000,transparent 75%);mask-image:radial-gradient(ellipse 50% 50% at 55% 55%,#000,transparent 75%)}
}

/* ---------------------------------------------------------------- C04 hoofdstukzegel: altijd de cijferzegel + mono "02 / 07" */
:root .s-titelblok .s-zegel-nr{display:inline-flex;align-items:center;gap:10px;font:500 .875rem/1 var(--f-mono);color:var(--dgoud);letter-spacing:.04em;white-space:nowrap}
:root .s-titelblok .s-zegel-nr img{width:32px;height:32px}
@media (min-width:768px){:root .s-titelblok .s-zegel-nr{font-size:.8125rem}:root .s-titelblok .s-zegel-nr img{width:28px;height:28px}}

/* ---------------------------------------------------------------- C01 hoofdstukvel: één variant, één binnenmaat */
:root .s-hfd-vel.s-vel{padding:30px 18px 22px;overflow:clip}
@media (min-width:768px){:root .s-hfd-vel.s-vel{padding:48px 48px 28px}}
@media (min-width:1024px){:root .s-hfd-vel.s-vel{padding:56px 64px 30px}}
@media (max-width:767px){:root .s-hfd-vel.s-vel::after{display:none}}
.s-hfd{padding-block:clamp(14px,2vw,28px)}
@media (max-width:767px){.s-hfd > .s-container--vel{padding-inline:10px}}

/* ---------------------------------------------------------------- C20 folio: één opmaak */
:root .s-folio.s-folio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:40px 0 0;padding:0;border:0;
  font:500 .75rem/1 var(--f-kop);letter-spacing:.3em;text-transform:uppercase;color:var(--goud-tekst,#7E6224)}
:root .s-folio.s-folio .s-folio__nr img,:root .s-folio.s-folio .s-folio__nr .s-zegel-svg{width:16px;height:16px}
@media (max-width:767px){:root .s-folio.s-folio{grid-template-columns:minmax(0,1fr) auto;font-size:.875rem;letter-spacing:.2em}:root .s-folio.s-folio .s-folio__site{display:none}}

/* ---------------------------------------------------------------- RITME — tussenstukken zoals de PDF (citaat / breed beeld / tabel) */
/* C-citaat: een rustige adempauze tussen hoofdstukken: mist, groot cursief citaat, ornamentlijn, merkzegel */
.s-adem{position:relative;isolation:isolate;padding:clamp(48px,7vw,96px) 0;text-align:center;overflow:clip}
.s-adem::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;
  background:url('../kit/afgeleid/bergen-ver-web.webp?v=5988c592') center bottom/min(1400px,140%) auto no-repeat;
  -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(transparent,#000 35%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect}
.s-adem__citaat{max-width:36ch;margin:0 auto;padding:0 16px;font:italic 400 clamp(1.5rem,2.6vw,2.125rem)/1.35 var(--f-serif);color:var(--inkt);text-wrap:balance}
.s-adem__bron{margin:14px 0 0;font:500 .875rem/1.3 var(--f-kop);letter-spacing:.24em;text-transform:uppercase;color:var(--goud-tekst,#7E6224)}
@media (min-width:768px){.s-adem__bron{font-size:.8125rem;letter-spacing:.3em}}
.s-adem .s-ornamentlijn{margin:22px auto 0}
.s-adem__zegel{display:block;margin:18px auto 0;width:40px;height:40px;color:var(--rood)}
.s-adem__kalli{position:absolute;z-index:-1;top:50%;right:max(16px,calc(50% - 600px));translate:0 -50%;writing-mode:vertical-rl;font-size:clamp(72px,9vw,118px);line-height:1.02;opacity:.07;pointer-events:none}
@media (max-width:767px){.s-adem__kalli{display:none}}

/* C-tussenstuk: een vel-loos blad tussen hoofdstukken (tabel of beeld), kop gecentreerd op een ornamentlijn — breekt het ritme vel/vel/vel */
.s-tussen{position:relative;padding:clamp(40px,6vw,88px) 0}
.s-tussen__kop{max-width:720px;margin:0 auto clamp(24px,3vw,40px);text-align:center}
.s-tussen__kop .s-kicker{margin:0 0 10px}
.s-tussen__kop .s-h2{margin:0;text-wrap:balance}
.s-tussen__kop .s-lead{margin:16px auto 0;max-width:46ch}
.s-tussen__kop::after{content:"";display:block;width:220px;height:12px;margin:22px auto 0;background:url('../beeld/orn/ornamentlijn-smal.svg?v=69d6aeca') center/100% 100% no-repeat}
@media (min-width:768px){.s-tussen__kop::after{width:360px;height:14px;background-image:url('../beeld/orn/ornamentlijn.svg?v=511adfb3')}}
.s-tussen .s-tabel{max-width:900px;margin:0 auto}
.as-tabel__link{text-align:right;white-space:nowrap}
.as-tabel__link .s-pijllink{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:767px){.as-tabel tr:not(.s-tabel__groep) td.as-tabel__link{grid-column:2;text-align:left}}

/* paginaregels die vroeger rubriek/titel/lead in eigen rasterkolommen zetten, gelden niet meer binnen de balk */
:root .s-titelblok.s-titelblok .s-titelblok__kop > *{grid-column:auto;grid-row:auto;justify-self:start;align-self:auto}
:root .s-titelblok.s-titelblok > .s-titelblok__lead{border:0;box-shadow:none;background:none}