/* ==========================================================================
   MEGA SCOOP RECORDS — style.css
   Ontwerp-DNA: "De perslijst / het fabrieksformulier".
   Regels i.p.v. dozen. Geen radius, geen schaduw, geen blur, geen gradients.
   Goud = inkt met budget: catalogusnummers, interactie, één vlak, één stempel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. LETTERTYPEN — self-hosted (geen CDN)
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('fonts/fraunces-300-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('fonts/fraunces-300-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('fonts/archivo-300-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('fonts/archivo-300-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/spacemono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/spacemono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/spacemono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/spacemono-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   02. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* raster */
  --rail: clamp(56px, 9vw, 132px);
  --edge-pad: clamp(16px, 3vw, 40px);
  --col-gap: clamp(16px, 2.2vw, 32px);

  /* verticaal ritme — bewust drie niveaus, niet overal hetzelfde */
  --space-tight: 2rem;
  --space-normal: 5rem;
  --space-open: 11rem;

  /* typografie */
  --ff-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --ff-body: 'Archivo', 'Arial Narrow', system-ui, -apple-system, sans-serif;
  --ff-mono: 'Space Mono', Menlo, Consolas, monospace;

  --t-mega:  clamp(4.5rem, 17vw, 15rem);
  --t-lead:  clamp(2.25rem, 5.5vw, 4.5rem);
  --t-item:  clamp(1.35rem, 2.4vw, 2rem);
  --t-body:  1.0625rem;
  --t-data:  0.75rem;
  --t-folio: 0.625rem;

  /* kleur — goud als inkt, niet als accent */
  --bg:        #0b0a09;
  --paper:     #121110;
  --line:      #2a2724;
  --line-hi:   #45403a;
  --ink:       #f3ede2;
  --ink-2:     #a29a8d;
  --gold:      #c9a24b;
  --gold-hi:   #e2c274;
  --gold-pale: #f7e6b8;
  --on-gold:   #14100a;
}

/* --------------------------------------------------------------------------
   03. RESET & BASIS
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  position:relative;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  text-align:left;
  padding-bottom:0;
  -webkit-font-smoothing:antialiased;
}

/* Doorlopende haarlijn op de railgrens — van boven tot onder de pagina. */
body::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--edge-pad) + var(--rail) + (var(--col-gap) / 2));
  width:1px;
  background:var(--line);
  pointer-events:none;
  z-index:0;
}

/* Papierruis. Geen mix-blend-mode, geen vignet. */
html::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }

hr{ border:0; border-top:1px solid var(--line); margin:0; }

::selection{ background:var(--gold); color:var(--on-gold); }

/* --------------------------------------------------------------------------
   04. RASTER — .sheet met vaste rail + 10 kolommen. Geen max-width.
   -------------------------------------------------------------------------- */
.sheet{
  display:grid;
  grid-template-columns:
    [bleed-start] var(--edge-pad)
    [rail-start] var(--rail)
    [rail-end body-start] repeat(10, minmax(0,1fr))
    [body-end] var(--edge-pad) [bleed-end];
  column-gap:var(--col-gap);
  max-width:none;
  position:relative;
  z-index:1;
}

/* Standaard: alles in de body-kolommen (mobiel-eerst). */
.sheet > *{ grid-column:3 / 13; }

/* Plaatsings-utilities. Numerieke rasterlijnen:
   1 bleed-start · 2 rail-start · 3 body-kolom 1 · … · 12 body-kolom 10
   13 body-end · 14 bleed-end                                              */
.at-rail{ grid-column:2 / 3; }
.at-full{ grid-column:2 / 14; }
.at-bleed{ grid-column:1 / 15; }
.at-body{ grid-column:3 / 13; }

/* --------------------------------------------------------------------------
   05. SECTIES & RITME
   -------------------------------------------------------------------------- */
.band{ padding-block:var(--space-normal); }
.band--tight{ padding-block:var(--space-tight); }
.band--open{ padding-block:var(--space-open); }
.band--clip{ overflow:hidden; }
.band--rule{ border-top:1px solid var(--line); }
/* Kopblok: ruim, maar bewust geen full-viewport hero. */
.band--head{ min-height:62vh; align-content:start; row-gap:var(--space-tight); }

.self-end{ align-self:end; justify-self:start; }
.gap-row{ row-gap:var(--space-tight); }
.mt-tight{ margin-top:var(--space-tight); }

/* Snijtekens: drukregistratie-detail, 1px, --line-hi. */
.crop{ position:relative; }
.crop::before,
.crop::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  pointer-events:none;
}
.crop::before{
  top:0;
  left:var(--edge-pad);
  border-top:1px solid var(--line-hi);
  border-left:1px solid var(--line-hi);
}
.crop::after{
  bottom:0;
  right:var(--edge-pad);
  border-bottom:1px solid var(--line-hi);
  border-right:1px solid var(--line-hi);
}

/* --------------------------------------------------------------------------
   06. TYPOGRAFIE
   -------------------------------------------------------------------------- */
.mega,
.lead,
.item{
  font-family:var(--ff-display);
  font-optical-sizing:none;
}

.mega{
  font-size:var(--t-mega);
  font-variation-settings:'opsz' 9,'wght' 700,'SOFT' 25,'WONK' 1;
  line-height:.82;
  letter-spacing:-.02em;
  white-space:nowrap;
  color:var(--ink);
}

.lead{
  font-size:var(--t-lead);
  font-variation-settings:'opsz' 20,'wght' 600,'SOFT' 35,'WONK' 1;
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--ink);
}

.item{
  font-size:var(--t-item);
  font-variation-settings:'opsz' 48,'wght' 500,'SOFT' 45,'WONK' 0;
  line-height:1.12;
  letter-spacing:-.005em;
  color:var(--ink);
}

/* Mono uitsluitend voor meetbare waarden. */
.data{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--ink-2);
}

.folio{
  font-family:var(--ff-mono);
  font-size:var(--t-folio);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--ink-2);
}

.prose{
  font-size:var(--t-body);
  line-height:1.62;
  max-width:62ch;
  text-align:left;
  hyphens:auto;
  color:var(--ink-2);
}
.prose--short{ max-width:48ch; }
.prose--bio{ max-width:52ch; }
.prose a{ color:var(--ink); border-bottom:1px solid var(--line-hi); }
.prose a:hover,
.prose a:focus-visible{ color:var(--gold-hi); border-bottom-color:var(--gold); }

/* Catalogusnummers: goud, altijd mono, altijd tabellarisch. */
.cat{
  font-family:var(--ff-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.1em;
  color:var(--gold);
}

.dash{ color:var(--ink-2); }

/* De ene gedraaide stempel per pagina. */
.stamp{
  display:inline-block;
  transform:rotate(-4deg);
  border:1px solid var(--gold);
  padding:.55rem 1rem;
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   07. TOEGANKELIJKHEID
   -------------------------------------------------------------------------- */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:absolute;
  left:var(--edge-pad);
  top:-100px;
  z-index:1000;
  background:var(--gold);
  color:var(--on-gold);
  padding:.75rem 1.25rem;
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.skip-link:focus{ top:.5rem; }

:focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:3px;
}
.on-gold :focus-visible,
.on-gold:focus-visible{ outline-color:var(--on-gold); }

/* --------------------------------------------------------------------------
   08. HEADER — niet sticky, niet blurred, niet krimpend
   -------------------------------------------------------------------------- */
.masthead{
  position:relative;
  z-index:120;
  border-bottom:1px solid var(--line);
  background:transparent;
}
.masthead .sheet{ align-items:center; padding-block:1.1rem; }

.brand{
  grid-column:2 / 8;
  display:flex;
  align-items:center;
  gap:var(--col-gap);
  min-height:44px;
}
.brand .logo{ width:32px; height:32px; flex:0 0 32px; }
.wordmark{
  font-family:var(--ff-body);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink);
  font-stretch:87.5%;
}

.nav-toggle{
  grid-column:11 / 13;
  justify-self:end;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0 0 0 20px;
  background:none;
  border:0;
  border-radius:0;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:24px;
  height:1px;
  background:var(--ink);
}

.primary{
  grid-column:8 / 13;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:clamp(1rem, 2.4vw, 2.25rem);
  flex-wrap:wrap;
}
.primary a{
  font-family:var(--ff-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  border-bottom:1px solid transparent;
  padding-block:.85rem;
  transition:color .12s linear;
}
.primary a:hover{ color:var(--ink); }
.primary a[aria-current="page"]{
  color:var(--gold);
  border-bottom-color:var(--gold);
}
.primary .n{ display:none; }

/* --------------------------------------------------------------------------
   09. FOLIO — vast linksonder in de rail
   -------------------------------------------------------------------------- */
.page-folio{
  position:fixed;
  left:var(--edge-pad);
  bottom:1.5rem;
  width:var(--rail);
  z-index:110;
  text-align:left;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   10. PERSLIJST — de kerncomponent (index + releases)
   -------------------------------------------------------------------------- */
.plist{ display:block; }

.plist-row,
.plist-head{
  display:grid;
  grid-template-columns:var(--rail) 12ch 14ch minmax(0,1fr) 8ch 6ch 6ch 3ch;
  column-gap:var(--col-gap);
  align-items:baseline;
  padding-block:1.15rem;
  padding-inline-end:var(--edge-pad);
  border-top:1px solid var(--line);
  position:relative;
}

/* Catalogusvariant: twee extra kolommen (persdatum, oplage). */
.plist--cat .plist-row,
.plist--cat .plist-head{
  grid-template-columns:var(--rail) 12ch 14ch minmax(0,1fr) 8ch 6ch 10ch 7ch 6ch 3ch;
}

.plist-head{
  border-top:0;
  padding-block:.6rem;
  color:var(--ink-2);
}
.plist-head > *{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}

/* Rij-cellen: mono voor alles behalve de titel. */
.plist-row > *{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--ink-2);
}
.plist-row .cell-no{ color:var(--gold); }
.plist-row .cell-artist{ color:var(--ink); }
.plist-row .cell-title{
  font-family:var(--ff-display);
  font-optical-sizing:none;
  font-size:var(--t-item);
  font-variation-settings:'opsz' 48,'wght' 500,'SOFT' 45,'WONK' 0;
  letter-spacing:-.005em;
  text-transform:none;
  line-height:1.1;
  color:var(--ink);
}
.plist-row .cell-ref{ color:var(--ink-2); }

/* Rail-markering: 2px gouden streepje, alleen bij klikbare rijen. */
.plist-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--gold);
  opacity:0;
}
/* Geen hover-affordance zolang er geen detailpagina bestaat (WCAG-praktijk):
   styling activeert pas met .is-linked. */
.plist-row.is-linked{ cursor:pointer; }
.plist-row.is-linked:hover,
.plist-row.is-linked:focus-within{ background:var(--paper); }
.plist-row.is-linked:hover::before,
.plist-row.is-linked:focus-within::before{ opacity:1; }
.plist-row.is-linked:hover .cell-no,
.plist-row.is-linked:hover .cell-title{ color:var(--gold-hi); }
.plist-row.is-linked{ transition:background .12s linear; }
.plist-row.is-linked .cell-no,
.plist-row.is-linked .cell-title{ transition:color .12s linear; }

.plist-row[hidden]{ display:none; }

.plist-foot{
  padding-block:1.25rem;
  border-top:1px solid var(--line);
  padding-inline-end:var(--edge-pad);
}

/* Jaartal-tussenkop: staat in de RAIL, niet in de tabel. */
.year-mark{
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--col-gap);
  padding-block:var(--space-tight) .5rem;
}
.year-mark .y{
  font-family:var(--ff-display);
  font-optical-sizing:none;
  font-size:var(--t-lead);
  font-variation-settings:'opsz' 20,'wght' 600,'SOFT' 35,'WONK' 1;
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   11. GOUDEN VLAK — precies één per pagina
   -------------------------------------------------------------------------- */
.on-gold{
  background:var(--gold);
  color:var(--on-gold);
  padding:3rem 2rem;
  border-radius:0;
  position:relative;
  z-index:0;
}
.on-gold .cat,
.on-gold .data{ color:var(--on-gold); }
.on-gold .item,
.on-gold .lead{ color:var(--on-gold); }
.on-gold a{ color:var(--on-gold); border-bottom:1px solid rgba(20,16,10,.45); }
.on-gold .dash{ color:rgba(20,16,10,.6); }
.on-gold .datablock div{ border-top-color:rgba(20,16,10,.3); }
.on-gold .datablock dt{ color:rgba(20,16,10,.72); }
.on-gold .datablock dd{ color:var(--on-gold); }

.slot{
  border:1px solid rgba(20,16,10,.45);
  padding:1.25rem;
  margin-top:1.5rem;
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-gold);
}

/* Artwork kruist het gouden vlak — overlap i.p.v. schaduw. */
.artwork{
  position:relative;
  z-index:1;
  aspect-ratio:1 / 1;
  background:var(--paper);
  border:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  padding:1rem;
}
.artwork .matrix{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   12. ROSTER-REGEL (index)
   -------------------------------------------------------------------------- */
.roster-line{
  font-family:var(--ff-display);
  font-optical-sizing:none;
  font-size:var(--t-lead);
  font-variation-settings:'opsz' 20,'wght' 600,'SOFT' 35,'WONK' 1;
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--ink);
}
.roster-line a{ color:var(--ink); transition:color .12s linear; }
.roster-line a:hover,
.roster-line a:focus-visible{ color:var(--gold-hi); }
.roster-line .sep{ color:var(--line-hi); padding-inline:.25em; }
.roster-line .dash{ color:var(--ink-2); }

.plain-link{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  border-bottom:1px solid var(--line-hi);
  transition:color .12s linear, border-color .12s linear;
}
.plain-link:hover,
.plain-link:focus-visible{ color:var(--gold-hi); border-bottom-color:var(--gold); }

/* --------------------------------------------------------------------------
   13. FILTERS — formuliertekst, geen pillen
   -------------------------------------------------------------------------- */
.filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem;
}
.filters .label{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-inline-end:.5rem;
}
.filter-btn{
  appearance:none;
  background:none;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  padding:.7rem .35rem;
  min-height:44px;
  min-width:44px;
  cursor:pointer;
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  transition:color .12s linear;
}
.filter-btn:hover{ color:var(--ink); }
.filter-btn[aria-pressed="true"]{
  color:var(--gold);
  border-bottom-color:var(--gold);
}
.filters .pipe{
  color:var(--line-hi);
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  user-select:none;
}

.empty-note{
  padding-block:2rem;
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   14. ROSTER-STROKEN (artiesten)
   -------------------------------------------------------------------------- */
.strip{
  padding-block:var(--space-normal);
  border-top:1px solid var(--line);
  row-gap:var(--space-tight);
  align-items:start;
}
.strip-initial{
  overflow:hidden;
  height:100%;
  min-height:120px;
}
.strip-initial span{
  display:block;
  font-family:var(--ff-display);
  font-optical-sizing:none;
  font-size:var(--t-mega);
  font-variation-settings:'opsz' 9,'wght' 700,'SOFT' 25,'WONK' 1;
  line-height:.78;
  color:var(--line-hi);
  margin-left:-.06em;
}
.portrait{
  aspect-ratio:4 / 5;
  background:var(--paper);
  border:1px solid var(--line);
  display:flex;
  align-items:flex-end;
  padding:.9rem;
}
.portrait .matrix{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
/* Alternerende strook: initiaal wordt aan de andere kant afgesneden. */
.strip--alt .strip-initial span{ margin-left:-.34em; }

.strip .name{ display:block; margin-bottom:1rem; transition:color .12s linear; }
.strip:hover .name{ color:var(--gold-hi); }

/* Mono datablok — labels zijn niet goud. */
.datablock{ display:grid; grid-template-columns:1fr; row-gap:.85rem; }
.datablock div{ border-top:1px solid var(--line); padding-top:.5rem; }
.datablock dt,
.datablock .k{
  font-family:var(--ff-mono);
  font-size:var(--t-folio);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.datablock dd,
.datablock .v{
  margin:0;
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.datablock .v.cat{ color:var(--gold); }

/* --------------------------------------------------------------------------
   15. COLOFON / ESSAY (over)
   -------------------------------------------------------------------------- */
/* Genest body-raster: 10 kolommen binnen de body-kolommen van .sheet. */
.bodygrid{
  display:grid;
  grid-template-columns:repeat(10, minmax(0,1fr));
  column-gap:var(--col-gap);
  row-gap:var(--space-tight);
  align-content:start;
}
.bodygrid > *{ grid-column:1 / -1; }

.rail-stick{ position:sticky; top:2rem; align-self:start; }
.rail-stick .folio{ display:block; margin-bottom:2rem; }

.rail-index li + li{ margin-top:.6rem; }
.rail-index a{
  font-family:var(--ff-mono);
  font-size:var(--t-folio);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
  transition:color .12s linear;
}
.rail-index a:hover,
.rail-index a:focus-visible{ color:var(--gold-hi); }

.intro{
  font-family:var(--ff-display);
  font-optical-sizing:none;
  font-size:var(--t-lead);
  font-variation-settings:'opsz' 20,'wght' 500,'SOFT' 35,'WONK' 1;
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--ink);
  text-align:left;
  hyphens:auto;
}
.intro::first-letter{
  float:left;
  font-size:3.4em;
  line-height:.78;
  padding-right:.06em;
  padding-top:.04em;
  color:var(--ink);
  font-variation-settings:'opsz' 9,'wght' 700,'SOFT' 25,'WONK' 1;
}

.essay p{
  max-width:62ch;
  color:var(--ink-2);
  text-align:left;
  hyphens:auto;
}
.essay p + p{ margin-top:1.3rem; }
.essay p::first-line{ color:var(--ink); }
.essay a{ color:var(--ink); border-bottom:1px solid var(--line-hi); }
.essay a:hover,
.essay a:focus-visible{ color:var(--gold-hi); border-bottom-color:var(--gold); }

/* Marginalia — losse notities, geen kaart. */
.note{
  border-top:1px solid var(--line);
  padding-top:.6rem;
  font-family:var(--ff-mono);
  font-size:.7rem;
  line-height:1.55;
  letter-spacing:.06em;
  color:var(--ink-2);
  align-self:start;
}

.sec-head{
  position:relative;
  padding-top:var(--space-normal);
  border-top:1px solid var(--line);
}
.sec-num{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.18em;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
/* Nummer staat in de rail, links van de tekstkolom. */
@media (min-width:900px){
  .sec-head .sec-num{
    position:absolute;
    left:calc(-1 * (var(--rail) + var(--col-gap)));
    top:var(--space-normal);
    width:var(--rail);
  }
}

/* --------------------------------------------------------------------------
   16. INZENDINGEN (contact)
   -------------------------------------------------------------------------- */
.spec{ border-bottom:1px solid var(--line); }
.spec li{
  display:grid;
  grid-template-columns:4ch minmax(0,1fr);
  column-gap:var(--col-gap);
  align-items:baseline;
  padding-block:1.15rem;
  border-top:1px solid var(--line);
}
.spec .n{
  font-family:var(--ff-mono);
  font-size:var(--t-data);
  letter-spacing:.1em;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.spec .t{ color:var(--ink); }

.address{ display:grid; row-gap:1.6rem; }
.address .k{
  display:block;
  font-family:var(--ff-mono);
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.35rem;
}
.address .v{ display:block; color:var(--ink); }
.address a.v{ border-bottom:1px solid var(--line-hi); display:inline-block; min-height:44px; line-height:44px; }
.address a.v:hover,
.address a.v:focus-visible{ color:var(--gold-hi); border-bottom-color:var(--gold); }

.socials{ color:var(--ink-2); }
.socials a{ color:var(--ink); border-bottom:1px solid var(--line-hi); }
.socials a:hover,
.socials a:focus-visible{ color:var(--gold-hi); border-bottom-color:var(--gold); }
.socials .off{ color:var(--ink-2); }
.socials .sep{ color:var(--line-hi); padding-inline:.4em; }

.mail-big{
  display:inline-block;
  font-family:var(--ff-display);
  font-optical-sizing:none;
  font-size:clamp(1.5rem, 3.4vw, 2.6rem);
  font-variation-settings:'opsz' 20,'wght' 600,'SOFT' 35,'WONK' 1;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--on-gold);
  border-bottom:2px solid var(--on-gold);
  min-height:48px;
  word-break:break-word;
}

.on-gold .mail-big{
  border-bottom:2px solid var(--on-gold);
  margin-block:1rem;
}

.stamp-float{
  position:relative;
  z-index:2;
  margin-bottom:-1.1rem;
  margin-left:1.5rem;
}

/* --------------------------------------------------------------------------
   17. FOOTER — colofon in vier kolommen
   -------------------------------------------------------------------------- */
.site-foot{
  border-top:1px solid var(--line);
  padding-block:var(--space-normal) 6rem;
  position:relative;
  z-index:1;
}
.site-foot .col{ row-gap:.5rem; }
.site-foot .k{
  display:block;
  font-family:var(--ff-mono);
  font-size:var(--t-folio);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:.7rem;
}
.site-foot li,
.site-foot p{
  font-family:var(--ff-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  line-height:1.9;
  color:var(--ink-2);
  text-transform:uppercase;
}
.site-foot a{ color:var(--ink-2); transition:color .12s linear; }
.site-foot a:hover,
.site-foot a:focus-visible{ color:var(--gold-hi); }

/* --------------------------------------------------------------------------
   18. BEWEGING — alleen bij page-load, verder niets
   -------------------------------------------------------------------------- */
.js .wipe{ clip-path:inset(0 100% 0 0); }
.js .wipe.in{
  clip-path:inset(0 0 0 0);
  transition:clip-path 600ms cubic-bezier(.22,.61,.36,1);
}
.js .stagger .plist-row{ opacity:0; }
.js .stagger .plist-row.in{
  opacity:1;
  transition:opacity 260ms linear;
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE — kolomplaatsing pas vanaf 900px
   -------------------------------------------------------------------------- */
@media (min-width:900px){
  .nav-toggle{ display:none; }

  .c1{ grid-column-start:3; }
  .c2{ grid-column-start:4; }
  .c3{ grid-column-start:5; }
  .c4{ grid-column-start:6; }
  .c5{ grid-column-start:7; }
  .c6{ grid-column-start:8; }
  .c7{ grid-column-start:9; }
  .c8{ grid-column-start:10; }
  .c9{ grid-column-start:11; }
  .c10{ grid-column-start:12; }

  .s1{ grid-column-end:span 1; }
  .s2{ grid-column-end:span 2; }
  .s3{ grid-column-end:span 3; }
  .s4{ grid-column-end:span 4; }
  .s5{ grid-column-end:span 5; }
  .s6{ grid-column-end:span 6; }
  .s7{ grid-column-end:span 7; }
  .s8{ grid-column-end:span 8; }
  .s9{ grid-column-end:span 9; }
  .s10{ grid-column-end:span 10; }

  /* Startkolommen binnen een genest .bodygrid */
  .n1{ grid-column-start:1; }
  .n2{ grid-column-start:2; }
  .n3{ grid-column-start:3; }
  .n4{ grid-column-start:4; }
  .n5{ grid-column-start:5; }
  .n6{ grid-column-start:6; }
  .n7{ grid-column-start:7; }
  .n8{ grid-column-start:8; }
  .n9{ grid-column-start:9; }
  .n10{ grid-column-start:10; }

  /* Artwork kruist het gouden vlak. */
  .overlap-l{ margin-left:-40px; }
}

@media (max-width:899px){
  :root{
    --rail:44px;
    --space-open:6.5rem;
    --space-normal:3.5rem;
  }

  body{ padding-bottom:3.25rem; }

  .masthead .sheet{ padding-block:.9rem; }
  .brand{ grid-column:2 / 11; }

  /* Menupaneel schuift van onderen in — geen gecentreerde overlay. */
  .primary{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:400;
    display:block;
    background:var(--bg);
    border-top:1px solid var(--line);
    padding:1.5rem var(--edge-pad) 4.5rem;
    transform:translateY(101%);
    visibility:hidden;
    transition:transform 240ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 240ms;
    text-align:left;
  }
  .nav-open .primary{
    transform:translateY(0);
    visibility:visible;
    transition:transform 240ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
  }
  .primary a{
    display:flex;
    align-items:baseline;
    gap:1rem;
    padding-block:.9rem;
    min-height:44px;
    font-size:.8rem;
    border-bottom:1px solid var(--line);
  }
  .primary a[aria-current="page"]{ border-bottom-color:var(--gold); }
  .primary .n{
    display:inline-block;
    color:var(--line-hi);
    font-variant-numeric:tabular-nums;
  }
  .nav-open{ overflow:hidden; }

  /* Folio wordt een vaste balk onderaan. */
  .page-folio{
    left:0;
    right:0;
    bottom:0;
    width:auto;
    padding:.85rem var(--edge-pad);
    background:var(--bg);
    border-top:1px solid var(--line);
  }

  /* Perslijst blijft leesbaar: horizontaal scrollen met zichtbare affordance. */
  .plist-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .plist-scroll .plist{ min-width:720px; }
  .plist-scroll .plist--cat{ min-width:980px; }
  .scroll-hint{
    display:block;
    padding-block:.6rem;
    font-family:var(--ff-mono);
    font-size:var(--t-folio);
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--ink-2);
  }

  .first-on-mobile{ order:-1; }
  .overlap-l{ margin-left:0; margin-top:var(--space-tight); }
  .strip-initial{ min-height:0; }
  .strip-initial span{ font-size:clamp(3rem,14vw,5rem); }
  .on-gold{ padding:2rem 1.5rem; }
  .stamp-float{ margin-left:0; }
}

@media (min-width:900px){
  .scroll-hint{ display:none; }
}

/* --------------------------------------------------------------------------
   20. MINDER BEWEGING
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .js .wipe{ clip-path:none; }
  .js .stagger .plist-row{ opacity:1; }
}