/* OKYO stramien.
   12-column grid, two fixed axes: A (column 1) for labels, captions and the logo; B (column 5) for every line of running text.
   Images always hang on the right margin; their left edge sits on A (full) or B (field). One vertical unit between sections.
   Deliberately a single white theme, like a gallery wall. */
:root{
  --bg:#FFFFFF;--ink:#1F1F1F;--muted:#757573;--rule:#E3E3E1;
  --sans:"Jost","Tw Cen MT","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --logo:"Cormorant SC","Cormorant Garamond",Garamond,serif;
  --m:max(20px,4.5vw);
  --gut:clamp(16px,2vw,32px);
  --S:clamp(120px,14vw,224px);
  --s:clamp(40px,5vw,72px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:11px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;background:#F4F4F2}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
p,h1,h2,h3,dl,dd,figure,ul{margin:0}
ul{padding:0;list-style:none}

/* Type, three voices only */
.cap{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;line-height:1.7}
.mut{color:var(--muted)}
.say{font-size:11px;font-weight:400;line-height:1.85;max-width:60ch;text-wrap:pretty}
.read{max-width:60ch;display:grid;gap:1.1em}
.read h2{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;margin-top:1.2em}
.u{transition:color .2s}
.u:hover{color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The grid */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.g>*{grid-column:1/-1;min-width:0}
.sec{margin-top:var(--S)}
@media (min-width:900px){
  .A{grid-column:1/4}
  .B{grid-column:5/-1}
  .Bt{grid-column:5/12}
  .full{grid-column:1/-1}
  .field{grid-column:5/-1}
  .ha{grid-column:5/9}
  .hb{grid-column:9/-1}
  .sticky{position:sticky;top:32px;align-self:start}
  .A{display:grid;grid-template-columns:subgrid;align-content:start}
  .A>*{grid-column:1/-1}
  .A .facts{display:grid;grid-template-columns:subgrid;column-gap:var(--gut)}
  .A .facts dt{grid-column:1}.A .facts dd{grid-column:2/-1}
}
@media (max-width:899px){.A{margin-bottom:20px}}

/* Header, identical on every page */
header.site{padding-top:max(28px,env(safe-area-inset-top,0px));padding-bottom:28px;align-items:baseline}
.logo{font-family:var(--logo);font-weight:700;font-size:24px;letter-spacing:.12em;line-height:1}
header.site nav ul{display:flex;gap:clamp(20px,2.4vw,40px)}
header.site nav a:hover,header.site nav a[aria-current="page"]{color:var(--muted)}
header.site .inv{text-align:right}
@media (min-width:900px){
  header.site .logo{grid-column:1/5}
  header.site nav{grid-column:5/10;display:grid;grid-template-columns:subgrid}
  header.site nav ul{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:0 var(--gut)}
  header.site nav li:nth-child(1){grid-column:1}header.site nav li:nth-child(2){grid-column:2}header.site nav li:nth-child(3){grid-column:3}header.site nav li:nth-child(4){grid-column:4}
  header.site nav li{white-space:nowrap}
  header.site .inv{grid-column:10/-1}
}
@media (max-width:899px){
  header.site{grid-template-columns:1fr auto;row-gap:18px}
  header.site>*{grid-column:auto}
  header.site nav{grid-column:1/-1;order:3}
  header.site nav ul{flex-wrap:wrap;gap:6px 18px}
  header.site nav .cap{letter-spacing:.12em}
  .hero img{height:auto;max-height:none}
}

/* Opening word, homepage only */

/* Images */
.pic{display:grid;gap:12px;align-content:start}
.pic img{width:100%;height:auto;cursor:zoom-in}
.pic figcaption{display:grid;gap:0}
.r32 img{aspect-ratio:3/2;object-fit:cover}
.r45 img{aspect-ratio:4/5;object-fit:cover}
.r169 img{aspect-ratio:16/9;object-fit:cover}
.hero img{width:100%;height:clamp(360px,84vh,1100px);object-fit:cover}
a.pic img{cursor:pointer;transition:opacity .4s}
a.pic:hover img{opacity:.9}
.row{row-gap:var(--gut)}
@media (max-width:899px){.row>*+*{margin-top:var(--s)}}

/* Film: edge to edge */
.bleed{width:100%}
main>.bleed:first-child{margin-top:var(--s)}
.bleed video{display:block;width:100%;aspect-ratio:16/9;max-height:100vh;object-fit:cover;background:#111}
@media (prefers-reduced-motion:reduce){.bleed video{animation:none}}

/* Inner columns within the field */
.cols{display:grid;gap:40px}
@media (min-width:700px){.cols{grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:var(--gut)}}
.cols>div{display:grid;gap:10px;align-content:start}

/* Realisaties index */
.filters{display:grid;gap:6px;margin-top:28px}
.filters button{background:none;border:0;padding:0;font:inherit;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:left}
.filters button[aria-pressed="true"]{color:var(--ink)}
.index{display:grid;gap:var(--s) var(--gut)}
@media (min-width:700px){.index{grid-template-columns:1fr 1fr}}
.index.list{grid-template-columns:1fr;gap:0}
.index.list .pic{border-top:1px solid var(--rule);padding:12px 0}
.index.list img{display:none}

/* Facts / title block */
.facts{display:grid;grid-template-columns:auto 1fr;gap:2px 20px;margin-top:20px}
.facts dt{color:var(--muted)}

/* Form */
form.f{display:grid;gap:26px}
.f .two{display:grid;gap:26px var(--gut)}
@media (min-width:640px){.f .two{grid-template-columns:1fr 1fr}}
.f label{display:grid;gap:2px;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.f input,.f textarea{font:inherit;font-size:11px;letter-spacing:.02em;text-transform:none;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;width:100%}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f textarea:focus{outline:none;border-bottom-color:var(--ink)}
.f input,.f textarea{border-bottom-color:var(--rule)}

.f button{justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.f button:hover{color:var(--muted)}
.f .note{color:var(--muted)}

/* Prev / next */
.pn{display:flex;justify-content:space-between;gap:16px}
@media (min-width:900px){.pn{display:grid;grid-template-columns:subgrid;column-gap:var(--gut)}.pn>:nth-child(1){grid-column:1/5}.pn>:nth-child(2){grid-column:5/9}.pn>:nth-child(3){grid-column:9/-1}}

/* Footer, a drawing's title block */
footer.site{margin-top:var(--S);padding-bottom:max(36px,env(safe-area-inset-bottom,0px))}
.tb{border-top:1px solid var(--ink);padding-top:14px;row-gap:24px}
@media (min-width:900px){
  .tb .t1{grid-column:1/5}.tb .t2{grid-column:5/9}.tb .t3{grid-column:9/11}.tb .t4{grid-column:11/-1;text-align:right}
}
.areas{margin-top:28px}
.areas ul{display:flex;flex-wrap:wrap;gap:4px 18px}
.areas a:hover{color:var(--ink)}
.fine{margin-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (min-width:900px){.fine{display:grid;grid-template-columns:subgrid;column-gap:var(--gut)}.fine>:nth-child(1){grid-column:1/5}.fine>:nth-child(2){grid-column:5/-1}}

/* Viewer */
.lb{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;grid-template-rows:auto 1fr auto;padding:max(20px,env(safe-area-inset-top,0px)) max(var(--m),env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(var(--m),env(safe-area-inset-left,0px))}
.lb[hidden]{display:none}
.lb-top,.lb-bot{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.lb img{width:100%;height:100%;object-fit:contain;background:transparent;min-height:0;cursor:zoom-out}
.lb-stage{min-height:0;padding-block:16px}
.lb button{background:none;border:0;padding:8px 0;font:inherit;font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.lb button:hover{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media (max-width:899px){.hero img{height:auto}}

.fine span+span a+a{margin-left:32px}
.tb-min .t2,.tb-min .t3{visibility:hidden}
.pic figcaption .cap{margin-top:2px}
@media (min-width:900px){
  header.site nav{display:block}
  header.site nav ul{display:flex;gap:32px}
}

section.cap>a.A,section.cap>a.B{display:block}

/* Emphasis: one size, weight only */
h1.cap,h2.cap,h3.cap,.read h2,.pic figcaption .cap,.lb-cap{font-weight:500}
header.site nav a[aria-current="page"]{color:var(--ink);font-weight:500}
header.site nav a:hover{color:var(--muted)}
@media (min-width:900px){
  header.site .inv{grid-column:9/-1;text-align:left}
  header.site nav{grid-column:5/9}
  header.site nav ul{gap:clamp(18px,2.2vw,32px)}
}
/* Film always fully on screen: native frame ratio, never taller than the window under the header */
.bleed video{aspect-ratio:1920/872;max-height:calc(100svh - 120px);object-fit:cover}
/* Language switch */
.lang{display:flex;gap:14px}
.lang a{color:var(--muted)}
.lang a[aria-current]{color:var(--ink);font-weight:500}
.lang a:hover{color:var(--ink)}
@media (min-width:900px){
  header.site .inv{grid-column:9/12}
  header.site .lang{grid-column:12/-1}
}
@media (max-width:899px){
  header.site{grid-template-columns:1fr auto auto;column-gap:18px}
}
@media (max-width:899px){
  header.site{grid-template-columns:1fr auto}
  header.site .inv{display:none}
  .tb-min .t2,.tb-min .t3{display:none}
  .bleed video{aspect-ratio:1/1;max-height:none}
}
/* Header on the grid: every menu word starts on a column line */
@media (min-width:900px){
  header.site .logo{grid-column:1/5}
  header.site nav{grid-column:5/12;display:grid;grid-template-columns:subgrid}
  header.site nav ul{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:0 var(--gut)}
  header.site nav li:nth-child(1){grid-column:1}
  header.site nav li:nth-child(2){grid-column:3}
  header.site nav li:nth-child(3){grid-column:5}
  header.site nav li:nth-child(4){grid-column:7}
  header.site .lang{grid-column:12/-1}
}
@media (min-width:900px){
  .fine{display:grid;grid-template-columns:subgrid;column-gap:var(--gut)}
  .fine .f1{grid-column:1/5}.fine .f2{grid-column:5/7}.fine .f3{grid-column:7/9}.fine .f4{grid-column:9/11}.fine .f5{grid-column:11/-1}
}
@media (max-width:899px){.fine{display:grid;grid-template-columns:1fr 1fr;gap:12px var(--gut)}.fine .f1{grid-column:1/-1;order:9;margin-top:12px}}
@media (min-width:900px){header.site .lang{justify-self:end}}

.B.say a,.read a{border-bottom:0}
/* Text blocks: justified, with hyphenation so the right edge stays even without gaps */
.read p,p.say,.cols p,.B>p{text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3}
.read,.say{max-width:68ch}

/* More white space: wider side margins and longer pauses between sections */
:root{--m:max(20px,6.5vw);--s:clamp(56px,7vw,112px);--S:clamp(170px,19vw,320px)}
/* Text as compact blocks: tighter leading, narrower measure, justified */
.say,.read p,.cols p,.B>p{line-height:1.42}
.say,.read{max-width:42ch}
.cols{row-gap:56px}
.cols>div{gap:8px;max-width:30ch}
.cols h3{margin:0}
@media (min-width:900px){
  .cols{column-gap:clamp(28px,3vw,56px)}
  .B.say,.B>.say{margin-left:0}
}
@media (max-width:899px){
  .say,.read{max-width:38ch}
  .cols>div{max-width:34ch}
}

/* Contact: send and WhatsApp side by side, as quiet text actions */
.f .acts{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline}
.f .acts .wa{font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.f .acts .wa:hover{color:var(--muted)}

/* News: one quiet list per group, medium or year on the left, title and note on the right */
.nl{display:grid;gap:34px}
.ni{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:4px var(--gut);align-items:baseline}
.ni-b{display:grid;gap:6px;max-width:42ch}
.ni h3,.ni p{margin:0}
.ni p{line-height:1.42}
@media (max-width:599px){.ni{grid-template-columns:1fr}}

/* Small images: kept small so they stay sharp */
@media (min-width:900px){.sa{grid-column:5/8}.sb{grid-column:9/12}}
@media (max-width:899px){.sa,.sb{grid-column:3/-1}}

/* Film: shown inside the page margins, at most about 1000px wide, so the 1920px source stays sharp on high-density screens */
.filmsec{margin-top:var(--s)}
.film{grid-column:1/-1;width:100%;max-width:1040px;justify-self:center}
.film video{display:block;width:100%;height:auto;aspect-ratio:1920/872;object-fit:cover;background:var(--bg)}
@media (min-width:900px){.film{grid-column:3/11}}
.r43 img{aspect-ratio:4/3;object-fit:cover}

/* Film sits on the same right-hand axis as the images, no wider than the source stays sharp */
@media (min-width:900px){.film{grid-column:5/-1;justify-self:start}}
/* Running text: a touch larger so it reads comfortably, captions and labels stay small */
.say,.read p,.cols p,.B>p,.ni p{font-size:12.5px;line-height:1.5}
@media (max-width:899px){.say,.read p,.cols p,.B>p,.ni p{font-size:14px}}
@media (max-width:899px){
  :root{--S:clamp(88px,22vw,120px)}
  .say,.read p,.cols p,.B>p,.ni p{text-align:left;-webkit-hyphens:manual;hyphens:manual}
}

/* ===== Gallery refinement, November 2026 ===== */
/* Running text: ragged right, no hyphenation, no gaps between words. A quiet, even grey block. */
.read p,p.say,.cols p,.B>p,.ni p{text-align:left;-webkit-hyphens:manual;hyphens:manual;text-wrap:pretty}
/* Columns: every heading on one shared baseline, every text below it on another */
@media (min-width:900px){
  .cols{grid-auto-rows:auto;row-gap:0}
  .cols>div{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:10px;max-width:none}
  .cols h3{align-self:end}
}
/* Collection: works hung like a gallery wall. Label on axis A, plate on axis B, details in pairs */
.pic.pl img,.pair img{aspect-ratio:auto}
.work{row-gap:var(--s)}
.lab{display:grid;gap:2px;align-content:start}
.lab .note{margin-top:10px;max-width:30ch;line-height:1.5}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.pair>*{grid-column:auto}
@media (min-width:900px){
  .pl{grid-column:5/10}
  .work>.lab{grid-column:1/4;grid-row:1/span 12;position:sticky;top:40px;align-self:start}
  .work>.pl,.work>.pair{grid-column:5/-1}
  .work>.pl{grid-column:5/10}
  .pair{grid-template-columns:subgrid;column-gap:var(--gut)}
  .pair>.ha{grid-column:1/5}.pair>.hb{grid-column:5/-1}
  .pair>.hb:only-child{grid-column:5/-1}
}
@media (max-width:899px){
  .work>.lab{margin-bottom:4px}
  .pair{gap:12px}
  .pair>.hb:only-child{grid-column:2}
}
.pl img,.pair img{aspect-ratio:2/3;object-fit:cover;width:100%;height:auto}
@media (min-width:900px){.pl,.work>.pl{grid-column:5/9}}
.work+.work{margin-top:calc(var(--s)*1.7)}
.wall{display:grid;gap:var(--s)}
@media (min-width:900px){
  .work>.lab{grid-row:auto}
  .wall{grid-column:5/-1;display:grid;grid-template-columns:subgrid;row-gap:var(--s)}
  .wall>.pl{grid-column:1/5}
  .wall>.pair{grid-column:1/-1}
}
@media (max-width:899px){.wall{gap:12px}.wall>.pl+.pair{margin-top:0}}
/* Wall: one column; a single plate is exactly as wide as one image of a pair */
@media (min-width:900px){
  .wall{grid-template-columns:minmax(0,1fr)}
  .wall>.pl,.wall>.pair{grid-column:1/-1}
  .wall>.pl{width:calc((100% - var(--gut))/2)}
  .pair{grid-template-columns:1fr 1fr}
  .pair>.ha,.pair>.hb{grid-column:auto}
  .pair>.hb:only-child{grid-column:2}
}
@media (min-width:900px){.g>.pl.portrait{grid-column:5/-1;width:calc((100% - var(--gut))/2)}}
@media (max-width:899px){.work{row-gap:20px}.lab .note{margin-top:6px}}
/* Columns: headings and texts both top-aligned, so the first line of every column sits level with the label on axis A */
@media (min-width:900px){.cols h3{align-self:start}}
.B.pair{display:grid}

/* ===== Gallery whitespace, November 2026: enormous pauses, small type ===== */
:root{--m:max(24px,8.5vw);--s:clamp(72px,9vw,150px);--S:clamp(240px,30vw,520px)}
body{font-size:10.5px}
.cap{font-size:10px;letter-spacing:.2em}
.say,.read p,.cols p,.B>p,.ni p{font-size:11.5px;line-height:1.55}
.read,.say{max-width:40ch}
.pic figcaption .cap{font-size:9.5px}
.pic figcaption .mut{font-size:10px}
.lab .mut{font-size:10px}
/* Images hang smaller on the wall, with more wall around them */
@media (min-width:900px){
  .field{grid-column:6/-1}
  .film{max-width:960px}
  .work+.work{margin-top:var(--S)}
  .wall{row-gap:var(--s)}
}
.filmsec{margin-top:var(--S)}
footer.site{margin-top:calc(var(--S)*1.2)}
@media (max-width:899px){
  :root{--m:max(22px,7vw);--s:clamp(56px,16vw,80px);--S:clamp(140px,40vw,200px)}
  .say,.read p,.cols p,.B>p,.ni p{font-size:13px;line-height:1.55}
  .cap{font-size:10px}
  .work+.work{margin-top:var(--S)}
}
/* Block paragraphs: justified left and right everywhere, on every screen. Hyphenation keeps the word spacing even */
.read p,p.say,.say,.cols p,.B>p,.ni p,.lab .note,.f .note{text-align:justify;text-align-last:left;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 2;word-spacing:-.01em}
@media (max-width:899px){.read p,p.say,.say,.cols p,.B>p,.ni p,.lab .note{text-align:justify;-webkit-hyphens:auto;hyphens:auto}}
/* Justified columns need a measure wide enough for even word spacing: two columns of about 34 characters */
@media (min-width:900px){
  .cols{grid-template-columns:repeat(2,minmax(0,34ch))!important;column-gap:clamp(40px,5vw,96px);row-gap:var(--s)}
  .cols>div{grid-row:auto;display:grid;grid-template-rows:none;row-gap:10px}
}
.cols p,.ni p{hyphenate-limit-chars:5 2 2}
@media (min-width:900px){.field{grid-column:5/-1}}
/* Short labels stay ragged; on phones the columns use the full measure so justified lines stay even */
.lab .note{text-align:left!important;-webkit-hyphens:manual;hyphens:manual}
@media (max-width:899px){.cols>div{max-width:none}}
/* Gallery walk between pages */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-group(hero),::view-transition-group(lbimg){animation-duration:.65s;animation-timing-function:cubic-bezier(.3,0,.1,1)}
::view-transition-image-pair(hero),::view-transition-image-pair(lbimg){isolation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Daylight: every surface follows the wall colour */
html,body,.lb{background:var(--bg);transition:background-color 2s linear}
img{background:transparent}
.read p.quote{font-style:normal;color:var(--ink);margin-top:1.4em}
@media (max-width:899px){.pair>.ha:only-child{grid-column:1/-1}}
/* Blocks: much more white between them, titles in bold capitals */
.cols h3,.cols h3.cap{font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
@media (min-width:900px){.cols{column-gap:clamp(80px,9vw,180px)!important;row-gap:clamp(110px,11vw,200px)!important}.cols>div{row-gap:16px}}
@media (max-width:899px){.cols{row-gap:72px!important}.cols>div{gap:12px}}
.lab h3.cap,.A h2.cap{font-weight:600}
/* Same pairing as the collection label: bold capital title, small grey text */
.cols p{color:var(--muted);font-size:11px;line-height:1.6}
@media (max-width:899px){.cols p{font-size:12.5px}}

/* ===== One voice, November 2026: every text in capitals at 9pt; only the small grey notes stay in small letters ===== */
body,p,li,a,button,input,textarea,label,h1,h2,h3,h4,.cap,.say,.read p,.cols p,.B>p,.ni p,figcaption,figcaption .cap,nav a,footer,.lb-cap{
  font-size:12px!important;text-transform:uppercase;letter-spacing:.09em;line-height:1.55}
h1,h2,h3,.cap{letter-spacing:.2em}
.mut,.cap.mut,figcaption .mut,.lab .mut,.ni-a,.lb-n,.lab .note,p.mut,span.mut{
  font-size:10px!important;text-transform:none!important;letter-spacing:.02em!important;line-height:1.6}
input,textarea{text-transform:none}
/* Room between blocks of text, not between lines */
.read p+p,.B>p+p,.say+p,.ni p+p,.Bt p+p{margin-top:2.4em}
.read p.quote{margin-top:3.2em}
.ni+.ni{margin-top:clamp(56px,6vw,96px)}
@media (min-width:900px){.cols{row-gap:clamp(140px,13vw,240px)!important}}
@media (max-width:899px){.cols{row-gap:96px!important}.read p+p,.B>p+p{margin-top:2em}}
/* The logo keeps its own letterforms */
.logo{font-size:clamp(17px,1.7vw,24px)!important;letter-spacing:.12em!important;text-transform:uppercase}
/* News: a wider measure so justified capitals keep even word spacing */
@media (min-width:900px){.ni{grid-template-columns:minmax(0,7em) minmax(0,1fr)}.ni-b{max-width:64ch}}
.ni-b{max-width:none}
@media (min-width:900px){.ni-b{max-width:64ch}}

/* footer adresblok vet */
footer.site .tb,footer.site .tb a{font-weight:700}

/* groot zij-achteraanzicht Easy Chair */
@media (min-width:900px){.wall>.pl.big{grid-column:1/-1;width:75%}}
@media (max-width:899px){.wall>.pl.big{width:100%}}

/* regelafstand de helft kleiner (nov 2026) */
body,p,li,a,button,label,h1,h2,h3,h4,.cap,.say,.read p,.cols p,.B>p,.ni p,figcaption,footer,.lb-cap{line-height:1.28!important}
.mut,.cap.mut,figcaption .mut,.lab .mut,.ni-a,.lab .note,p.mut,span.mut{line-height:1.32!important}
.logo{line-height:1.1!important}

/* overal dezelfde regelafstand */
*{line-height:1.28!important}
.logo{line-height:1.1!important}
h1,h2,h3,h4,h5,strong,b,dt,dd,small,span,div,td,th,figcaption,.cap,.say{font-size:12px}
.mut,.cap.mut,figcaption .mut,.lab .mut,.ni-a,.lab .note,p.mut,span.mut{line-height:1.28!important}
span:not(.mut),div{text-transform:uppercase}
input,textarea{text-transform:none}

/* ===== Eén lettertype, één grootte (nov 2026): alles Jost 12px in hoofdletters, enkel vet en dun ===== */
*,*::before,*::after{font-family:var(--sans)!important;font-size:12px!important;line-height:1.28!important}
body *{text-transform:uppercase}
input,textarea{text-transform:none!important}
.mut,.cap.mut,figcaption .mut,.lab .mut,.ni-a,.lab .note,p.mut,span.mut{text-transform:uppercase!important;letter-spacing:.09em!important;font-weight:300!important}
p,li,a,.read p,.B>p,.say,.ni p,.cols p{font-weight:400}
h1,h2,h3,h4,.lab h3.cap,.A h2.cap,.cols h3,.logo,footer.site .tb,footer.site .tb a,strong,b{font-weight:600!important}
.logo{letter-spacing:.2em!important}
.logo .sl{font-weight:300!important}
html body .mut,html body .cap.mut,html body figcaption .mut,html body .lab .mut,html body .ni-a,html body .lab .note,html body p.mut,html body span.mut,html body .lb-n,html body .logo,html body .logo *{font-size:12px!important;line-height:1.28!important}

/* korte regels in een blok staan op elkaar, zoals op de omslag */
.say+p.go,p+p.go,.go+.go{margin-top:0!important}
.index .pic[hidden]{display:none!important}
/* afwerking 6/11: geen afgebroken woorden, rustiger witruimte */
html body .say,html body .read p,html body .cols p,html body .B>p,html body .ni p,html body .lab .note,html body .f .note{text-align:left!important;-webkit-hyphens:manual!important;hyphens:manual!important;word-spacing:normal!important}
@media (min-width:900px){:root{--S:clamp(150px,16vw,280px)!important}}
@media (max-width:899px){:root{--S:clamp(88px,24vw,130px)!important}}
.g>.pic.solo{grid-column:5/11}
@media (max-width:899px){.g>.pic.solo{grid-column:1/-1}}
/* homepagina in de opbouw van de nieuwsbrief */
.nlhead{margin-top:var(--S)}
.nlh{grid-column:1/-1;max-width:46ch;margin:0 auto;text-align:center;display:grid;gap:6px}
html body .nlh p{text-align:center!important;margin:0}
.nlh h2{margin:6px 0 10px}
.nlrow{margin-top:calc(var(--S)*.55)}
.nlhead+.nlrow{margin-top:calc(var(--S)*.45)}
.g>.pic.nl-l{grid-column:3/11}
.g>.pic.nl-p{grid-column:5/9}
.nlrow figcaption{justify-items:center;text-align:center}
.nlrow figcaption span{display:block;text-align:center}
@media (max-width:899px){.g>.pic.nl-l{grid-column:1/-1}.g>.pic.nl-p{grid-column:2/-2}}
html body .nlh,html body .nlh *,html body .nlrow figcaption,html body .nlrow figcaption *{font-size:9px!important;line-height:1.45!important;letter-spacing:.14em!important}
html body .nlh h2.cap{font-size:10px!important}
.nlrow{margin-top:calc(var(--S)*1.1)!important}
.nlhead+.nlrow{margin-top:calc(var(--S)*.6)!important}
.nlhead{margin-top:calc(var(--S)*1.3)!important}
/* alle tekst één kleine maat, zoals de nieuwsbrief */
html body *,html body *::before,html body *::after,html body .mut,html body .cap,html body h1,html body h2,html body h3,html body .logo,html body .logo *,html body .nlh h2.cap,html body footer.site *{font-size:9px!important;line-height:1.45!important}
html body *{letter-spacing:.14em}
html body .logo{letter-spacing:.24em!important}
html body input,html body textarea,html body select{font-size:16px!important}
html body *:not(#z#z):not(input):not(textarea):not(select){font-size:9px!important;line-height:1.45!important}
/* één zwart, één grijs, normaal of vet */
html body *:not(#z#z){font-weight:400!important}
html body :is(h1,h2,h3,h4,strong,b,.logo,figcaption .cap,footer.site .tb,footer.site .tb *,[aria-current],.nlh h2,dl dd .cap):not(#z#z#z){font-weight:600!important}
html body .logo .sl:not(#z#z#z){font-weight:400!important}
@media (min-width:900px){html body input:not(#z#z),html body textarea:not(#z#z),html body select:not(#z#z){font-size:9px!important;letter-spacing:.14em}}
.nlh .nlitems{margin:4px 0 10px!important}
html body .logo:not(#z#z#z),html body .logo *:not(#z#z#z){font-size:18px!important;line-height:1.2!important}
@media (max-width:599px){html body .logo:not(#z#z#z),html body .logo *:not(#z#z#z){font-size:14px!important}html body .logo:not(#z#z#z){letter-spacing:.16em!important}}
@media (min-width:900px){html body .logo:not(#z#z#z),html body .logo *:not(#z#z#z){font-size:clamp(11px,1.3vw,18px)!important}html body .logo:not(#z#z#z){letter-spacing:.2em!important;white-space:nowrap}}
@media (min-width:600px) and (max-width:899px){html body .logo:not(#z#z#z),html body .logo *:not(#z#z#z){font-size:15px!important}}
@media (min-width:900px){html body .logo:not(#z#z#z),html body .logo *:not(#z#z#z){font-size:clamp(10px,1.18vw,18px)!important}}
@media (min-width:600px) and (max-width:899px){html body .logo:not(#z#z#z),html body .logo *:not(#z#z#z){font-size:13px!important}}
html body .facts:not(#z#z){display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;column-gap:28px!important;row-gap:6px!important}
html body .facts dt:not(#z#z){grid-column:1!important}
html body .facts dd:not(#z#z){grid-column:2!important}
html body p.cta:not(#z#z){margin-top:calc(var(--s)*1.1)!important}
html body p.cta a:not(#z#z#z){font-weight:600!important}
html body p.cta a:not(#z#z#z){display:inline-block;border:1px solid var(--ink);padding:12px 22px;text-decoration:none!important;transition:background .2s,color .2s}
html body p.cta a:not(#z#z#z):hover,html body p.cta a:not(#z#z#z):focus-visible{background:var(--ink);color:var(--bg)!important}