/*
Theme Name: Hoedemaker Vos
Description: Projecttheme, gegenereerd uit de ontwerpbron door tools/bouw-theme.py. Wijzig het design in site/, niet hier.
Version: 1.0.0
Author: Atelier West
Text Domain: hoedemakervos
*/

/* ==========================================================================
   Hoedemaker Vos
   Referentiecanvas 1512 x 1044 (design/@2x gedeeld door 2).
   1rem = 16px op 1512 breed. Alle designwaarden staan in rem, dus de hele
   pagina schaalt proportioneel mee met het venster.
   ========================================================================== */

/* Jost en Cormorant Garamond, variabel, lokaal geserveerd.
   Geen verzoek naar Google per bezoeker, dus ook geen meetprobleem.
   De originele Euclid en Adobe Caslon staan nog in assets/fonts voor vergelijking. */
@font-face{font-family:"Jost";src:url("assets/fonts/Jost-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  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:"Jost";src:url("assets/fonts/Jost-latin-ext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  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:"Cormorant Garamond";src:url("assets/fonts/CormorantGaramond-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;
  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:"Cormorant Garamond";src:url("assets/fonts/CormorantGaramond-latin-ext.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;
  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}

:root{
  /* kleur */
  --wit:#ffffff;
  --zwart:#000000;
  --roze:#fff7f4;
  --inkt:#000000;
  --grijs:#646464;

  /* raster */
  --pad:2.875rem;      /* 46px  buitenmarge links en rechts */
  --gutter:1.875rem;   /* 30px  tussenruimte galerij */

  /* type */
  --sans:"Jost",system-ui,sans-serif;
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;

  --fs-wordmark:5.125rem;  /* 82px */
  --fs-subtitle:2.3625rem; /* 37.8px, Cormorant heeft een kleinere kapitaal dan Caslon */
  --fs-label:.96875rem;    /* 15.5px, idem */

  --ls-wordmark:.1133em;
  --ls-subtitle:-.01em;
  --ls-label:.06em;

  /* hero verticaal
     De galerij zit tegen de onderrand. De ruimte boven de wordmark is 29.76%
     van de vensterhoogte, gelijk aan de 310.7px uit het design op 1044 hoog.
     Alles wat overblijft valt tussen de subtitle en de labels, als witruimte.
     Onder de beelden staat een smalle band wit. */
  --hero-bottom:2.5rem;                        /* 40px onder de galerij */
  --hero-top:calc(29.76svh - var(--hero-bottom)); /* het hele blok schuift met die 40px mee omhoog */
}

html{font-size:clamp(12px,1.0582vw,20.3px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--serif);
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Cormorant zet van zichzelf mediaevalcijfers. In een regel kapitalen moeten
   het gewone cijfers zijn, anders zakt de 0 onder de kapitaalhoogte. */
.label,.wordmark{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}

/* ----------------------------------------------------------- 00 navigatie */
/* Nieuw in blok 2 (specs/05-navigatie-voet.md). Absoluut bovenop de pagina,
   in de identiteitsstem: Jost, kapitaal, eyebrow-maat. Grijs; bij aanwijzen
   of op de eigen pagina inkt. Interactie via typografie, geen chrome.
   Op de home draagt de hero de identiteit, dus daar geen merkje linksboven. */
.topnav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:2.5rem var(--pad) 0;            /* 40px, de maat van --hero-bottom */
}
.topnav a{
  font-family:var(--sans);font-weight:400;
  font-size:.869rem;line-height:1;        /* 13.9px, de eyebrow-maat */
  letter-spacing:.093em;text-transform:uppercase;
  color:var(--grijs);text-decoration:none;
  transition:color .2s ease;
  /* het raakvlak groeit, de compositie niet: padding tegen negatieve marge */
  padding:.85rem .5rem;margin:-.85rem -.5rem;
}
/* De skip-link, onzichtbaar tot hij toetsenbordfocus krijgt. */
.skiplink{
  position:absolute;left:-9999px;top:0;z-index:30;
  font-family:var(--sans);font-size:.869rem;letter-spacing:.093em;
  text-transform:uppercase;color:var(--inkt);text-decoration:none;
  background:var(--wit);padding:.85rem 1rem;
}
.skiplink:focus-visible{left:var(--pad);top:.75rem}
.topnav a:hover,.topnav a:focus-visible,
.topnav a[aria-current]{color:var(--inkt)}   /* "page" op de pagina zelf, "true" op de sectie */
.topnav__links{display:flex;gap:2.5rem}
.topnav--home .topnav__merk{visibility:hidden}   /* de hero is het merk */

/* --------------------------------------------------------------- 01 hero */
.hero{
  min-height:100vh;min-height:100svh;
  padding:var(--hero-top) var(--pad) var(--hero-bottom);
  display:flex;flex-direction:column;
}
.hero__identity{text-align:center;flex:0 0 auto}
.hero .spacer{flex:1 1 auto;min-height:6rem}

.wordmark{
  margin:0;
  font-family:var(--sans);font-weight:400;
  font-size:var(--fs-wordmark);line-height:.72;
  letter-spacing:var(--ls-wordmark);
  text-transform:uppercase;
  text-indent:var(--ls-wordmark); /* compenseert de tracking rechts van de laatste letter */
}
.subtitle{
  margin:1.89rem 0 0;             /* wordmark-baseline naar subtitle-baseline = 55.8px */
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-subtitle);line-height:1;
  letter-spacing:var(--ls-subtitle);
  color:var(--grijs);
}

.gallery{
  display:grid;grid-template-columns:repeat(5,1fr);
  column-gap:var(--gutter);
}
.label{
  display:block;
  font-family:var(--serif);font-weight:500;
  font-size:var(--fs-label);line-height:1;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--inkt);
  margin-bottom:.75rem;           /* 12px onder de regel */
}
.frame{position:relative;aspect-ratio:var(--ratio,13/16);overflow:hidden;background:#f2f0ed}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* de clip ligt boven de still en vloeit erin, de still blijft eronder staan */
.frame video{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.frame.is-speelt video{opacity:1}

/* Zoom zonder clip. Voor beelden waar het videomodel de foto niet trouw kan
   houden, zoals de gevel: honderden ramen die het model gaat hertekenen. Een
   trage inzoom op de still zelf is per definitie trouw, weegt niets en loopt
   vloeiender dan welke gerenderde clip ook. */
.frame[data-motion="zoom"] img{
  transform-origin:50% 42%;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);   /* terugkomen mag vlotter */
  will-change:transform;
}
@media (hover:hover) and (pointer:fine){
  .frame[data-motion="zoom"]:hover img{
    transform:scale(1.14);
    transition:transform 7s linear;   /* een dolly loopt op gelijke snelheid, niet uitdempend */
  }
}

/* ---------------------------------------------------------- 02 statement */
.statement{
  background:var(--zwart);color:var(--wit);
  padding:4.875rem var(--pad) 3.75rem;   /* 78px boven, 60px onder */
}
.statement__text{
  margin:0;max-width:57.625rem;           /* 922px, meegeschaald met de kleinere maat */
  font-family:var(--serif);font-weight:500;  /* wit op zwart vreet optisch weg, 500 vangt dat op */
  font-size:1.625rem;                     /* 26px, keuze Nick 2026-09-09 */
  line-height:1.386;                      /* zelfde regelverhouding als het design */
}
/* de tekens van de onthulling. De grijstoon staat op de paragraaf zodra het
   opsplitsen gelukt is, zodat de tekst zonder JavaScript gewoon wit blijft */
.statement__text.is-gesplitst{color:#9e9e9e}
.statement__text .teken{transition:color .15s linear}
.statement__text .teken.is-op{color:var(--wit)}

.statement__by{
  margin:2.472rem 0 0;
  font-family:var(--sans);font-weight:400;
  font-size:1.7125rem;line-height:1;      /* 27.4px, meegeschaald met de tekst */
  letter-spacing:.0805em;text-indent:.0805em;
  text-transform:uppercase;
}
.frame--breed{margin-top:2.99rem}

/* Parallax met scrubben.
   Het kader is 80% van de natuurlijke hoogte van de video en beweegt zelf
   nooit. De video staat er op volle hoogte in, dus 100/80 = 125%, en
   schuift verticaal door dat vaste venster. Over de hele scroll zie je zo het
   complete beeld, alleen nooit in een keer. */
.frame--parallax{
  --ratio:1420/544;                 /* 544 = 80% van de 680 uit het design */
  overflow:hidden;
}
.frame--parallax img,
.frame--parallax video{
  position:absolute;top:0;left:0;
  width:100%;height:125%;           /* 100/80, dus het kader toont er 80% van */
  object-fit:cover;object-position:50% 50%;
  will-change:transform;
}
/* Hier geen invloeier. Het eerste beeldje van de clip is de still, dus zodra
   de video beeld heeft dekt hij de foto naadloos af. Zolang hij dat niet heeft
   is een video-element doorzichtig en zie je de foto eronder. Een overgang zou
   alleen maar een extra faalpunt zijn. */
.frame--parallax video{opacity:1}

@media (prefers-reduced-motion:reduce){
  .frame--parallax{--ratio:1420/680}
  .frame--parallax img,.frame--parallax video{height:100%;transform:none!important}
}

/* --------------------------------------------------- 03 uitgelicht werk */
.werk{
  background:var(--wit);
  padding:7.554rem var(--pad) 7.5rem;      /* 120.9 boven, 120 onder */
}
.werk__paar{
  display:grid;
  grid-template-columns:26.761% 50.704%;   /* 380 en 720 van 1420 */
  justify-content:space-between;
}
.label--werk{margin-bottom:1.914rem}       /* basislijn 33.5px boven het beeld */
.frame--klein{--ratio:4/5}
.frame--groot{--ratio:18/25;margin-top:6.196rem}   /* 99px lager dan het kleine beeld */
.frame--team{--ratio:71/38;margin-top:13.75rem}    /* 220px onder het grote beeld */
.frame--team img,.frame--team video{object-position:50% 46%}  /* uitsnede uit het design */

/* Schalen op de scrollpositie.
   Het beeld begint op 45% en groeit naar volle grootte, vanuit het midden. Het
   kader houdt zijn plek en zijn hoogte, dus de pagina verspringt niet. Rondom
   het gekrompen beeld staat gewoon de pagina, geen vlak: daarom hier geen
   achtergrondkleur op het kader.
   Het bijschrift schaalt niet mee. Dat ligt over het hele kader en blijft
   daardoor vanzelf in het midden staan, hoe groot het beeld ook is. */
.frame--schaal{background:none}
.frame--schaal img,
.frame--schaal video{
  position:absolute;inset:0;
  width:100%;height:100%;
  transform-origin:50% 50%;
  will-change:transform;
}
.frame--schaal video{opacity:1}

@media (prefers-reduced-motion:reduce){
  .frame--schaal img,.frame--schaal video{transform:none!important}
}

.beeldnaam{
  position:absolute;inset:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:400;
  font-size:2.456rem;line-height:1;                /* 39.3px */
  letter-spacing:.08em;text-indent:.08em;
  text-transform:uppercase;color:var(--wit);
  pointer-events:none;
  z-index:2;              /* de video wordt achteraan in het kader gezet en zou
                             er anders overheen schilderen */
}

/* ---------------------------------------------------------------- 04 outro */
.outro{
  background:var(--roze);color:var(--inkt);
  padding:5.0875rem var(--pad) 5.3125rem;  /* 81.4 boven, 85 onder */
  text-align:center;
}
.eyebrow{
  margin:0 0 1.83rem;
  font-family:var(--sans);font-weight:400;
  font-size:.869rem;line-height:1;          /* 13.9px, zelfde kapitaalhoogte als de labels */
  letter-spacing:.093em;text-indent:.093em;  /* zelfde tracking als in het design */
  text-transform:uppercase;color:var(--grijs);
}
.outro__text{
  margin:0 auto;max-width:57.625rem;        /* 922px, zelfde blok als sectie 02 */
  font-family:var(--serif);font-weight:400; /* zwart op licht, dus geen 500 nodig */
  font-size:1.625rem;line-height:1.386;     /* 26px */
}
.outro__link{
  display:inline-block;margin-top:2.1875rem;      /* 35px onder de tekst */
  font-family:var(--sans);font-weight:400;
  font-size:.869rem;line-height:1;
  letter-spacing:.093em;text-indent:.093em;text-transform:uppercase;
  color:var(--inkt);text-decoration:none;
  border-bottom:1px solid currentColor;
  padding:.85rem .5rem .35rem;margin:-.85rem -.5rem 0;   /* raakvlak omhoog en opzij */
  transition:color .2s ease;
}
.outro__link:hover,.outro__link:focus-visible{color:var(--grijs)}

/* ---------------------------------------------------------------- 05 voet */
/* Nieuw in blok 2 (specs/05-navigatie-voet.md). Een zwart vlak dat het
   sectieritme afsluit: wit → zwart → wit → rozewit → zwart. Identiteitsstem
   in Jost, adres en colofon in de leesstem, gedempt zoals de onthullingstoon.
   Geen randen, geen chrome; alles op het raster. */
.voet{
  background:var(--zwart);color:var(--wit);
  padding:4.875rem var(--pad) 3.75rem;     /* de maten van sectie 02 */
}
.voet__boven{display:flex;justify-content:space-between;align-items:flex-start}
.voet__merk{
  margin:0;
  font-family:var(--sans);font-weight:400;
  font-size:1.7125rem;line-height:1;       /* 27.4px, de attributiemaat */
  letter-spacing:.0805em;text-indent:.0805em;text-transform:uppercase;
}
.voet__sub{
  margin:.75rem 0 0;
  font-family:var(--serif);font-weight:400;
  font-size:1.09375rem;line-height:1.3;    /* 17.5px */
  color:#9e9e9e;
}
.voet__nav{display:flex;flex-direction:column;align-items:flex-end;gap:1rem}
.voet__nav a{
  font-family:var(--sans);font-weight:400;
  font-size:.869rem;line-height:1;
  letter-spacing:.093em;text-transform:uppercase;
  color:#9e9e9e;text-decoration:none;
  transition:color .2s ease;
  padding:.85rem .5rem;margin:-.85rem -.5rem;   /* raakvlak, niet de compositie */
}
.voet__nav a:hover,.voet__nav a:focus-visible{color:var(--wit)}
.voet__onder{
  margin-top:5rem;                          /* 80px tussen boven en onder */
  display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
}
.voet__adres{margin:0;font-family:var(--serif);font-size:1.09375rem;color:#9e9e9e}
.voet__adres a{color:inherit;text-decoration:none;transition:color .2s ease;
  display:inline-block;padding:.6rem 0;margin:-.6rem 0}
.voet__adres a:hover,.voet__adres a:focus-visible{color:var(--wit);text-decoration:underline}
.voet__colofon{margin:0;font-family:var(--serif);font-size:.9375rem;color:#9e9e9e}

/* Opkomen bij het in beeld komen. De verborgen begintoestand staat op een
   aparte klasse die JavaScript zet, zodat er zonder JavaScript niets onzichtbaar
   blijft. De vertraging per blok staat in motion.js. */
.opkomer{transition:opacity .8s ease-out, transform .8s ease-out}
.opkomer.is-wacht{opacity:0;transform:translateY(24px)}

@media (prefers-reduced-motion:reduce){
  .opkomer,.opkomer.is-wacht{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------- tablet < 1100px */
@media (max-width:1099px){
  :root{--pad:2rem;--gutter:1.25rem}
  html{font-size:14px}
  .hero{padding-top:24svh}
  .gallery{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 2*var(--gutter))/2.6);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    margin-inline:calc(var(--pad)*-1);
    padding-inline:var(--pad);
    scroll-padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .gallery::-webkit-scrollbar{display:none}
  .gallery__item{scroll-snap-align:start}
  .wordmark{font-size:min(5.125rem,8.9vw);white-space:nowrap}
  .statement{padding-top:3.5rem;padding-bottom:3rem}
  .werk{padding-top:5rem;padding-bottom:5rem}
  .outro{padding-top:4rem;padding-bottom:4.5rem}
  .outro__text{font-size:1.6rem}
  .frame--groot{margin-top:4rem}
  .frame--team{margin-top:7rem}
  .beeldnaam{font-size:1.75rem}
  .statement__text{font-size:1.6rem;line-height:1.32;max-width:none}
  .statement__by{font-size:1.25rem;margin-top:2rem}
  .frame--breed{margin-top:2.25rem}
  .subtitle{font-size:min(2.25rem,3.8vw);margin-top:1.4rem}
  .label{font-size:.8125rem;margin-bottom:.6rem;white-space:nowrap}
}

/* -------------------------------------------------------- mobiel < 640px */
@media (max-width:639px){
  :root{--pad:1.5rem;--gutter:.75rem}
  html{font-size:16px}
  .hero{padding-top:20svh}
  .wordmark{font-size:8.2vw;letter-spacing:.06em;text-indent:.06em}
  .subtitle{font-size:4.4vw;margin-top:.9rem}
  .gallery{grid-auto-columns:calc((100% - var(--gutter))/1.75)}
  .statement__text{font-size:1.375rem;line-height:1.34}
  /* de asymmetrie blijft, maar dan gestapeld: klein links, groot rechts */
  .werk{padding-top:3.5rem;padding-bottom:4rem}
  .outro{padding-top:3.25rem;padding-bottom:3.5rem}
  .outro__text{font-size:1.375rem;line-height:1.34}
  .eyebrow{font-size:.75rem;letter-spacing:.14em;text-indent:.14em;margin-bottom:1.5rem}
  .werk__paar{grid-template-columns:1fr}
  .werk__kolom{width:55%}
  .frame--groot{width:80%;margin-left:auto;margin-top:2.5rem}
  .frame--team{margin-top:4rem}
  .beeldnaam{font-size:1.25rem;letter-spacing:.1em;text-indent:.1em}
  .statement__by{font-size:1rem;letter-spacing:.1em;text-indent:.1em}
  .frame--breed{--ratio:4/3}
  .label{font-size:.6875rem;letter-spacing:.06em;margin-bottom:.5rem;white-space:nowrap}
}

/* ---------------------------------------------------------- 06 subpagina */
/* Nieuw in blok 2 (specs/06-werkpagina.md). De paginakop is het kop-patroon
   voor alle subpagina's: eyebrow, serif titel op de subtitle-maat, intro in
   de leesstem. Het overzicht hergebruikt het asymmetrische paar en de
   rijafstanden van sectie 03. */
.pagina{background:var(--wit)}
.paginakop{padding:10rem var(--pad) 0}          /* 160px wit tot de eyebrow */
.paginakop .eyebrow{margin-bottom:1.5rem}        /* 24px naar de titel */
.paginatitel{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:2.3625rem;line-height:1.1;           /* 37.8px, de subtitle-maat */
  letter-spacing:-.01em;color:var(--inkt);
}
.paginakop__intro{
  margin:2.1875rem 0 0;max-width:57.625rem;      /* 35px onder de titel */
  font-family:var(--serif);font-weight:400;
  font-size:1.625rem;line-height:1.386;
}

.overzicht{padding:7.5rem var(--pad)}            /* 120px boven en onder */
.overzicht__rij + .overzicht__rij{margin-top:13.75rem}   /* 220px, de teammaat */
.overzicht__paar{
  display:grid;grid-template-columns:26.761% 50.704%;   /* 380 en 720 van 1420 */
  justify-content:space-between;align-items:start;
}
.overzicht__paar--gespiegeld{grid-template-columns:50.704% 26.761%}
.overzicht__zakt{margin-top:6.196rem}            /* de lage kolom, 99px verzonken */
.overzicht__solo{width:50.704%}                  /* rij 3: groot links, rechts wit */

.kader-link{display:block;color:inherit;text-decoration:none}
/* Klikbaarheid toont zich in de linktaal: het label van een klikbaar kader
   draagt de onderstreping; kale labels zijn niet klikbaar. */
.kader-link .label{
  display:inline-block;
  border-bottom:1px solid currentColor;padding-bottom:.45rem;
  margin-bottom:1.47rem;                 /* 1.914rem min de .45rem eronder */
  transition:color .2s ease;
}
.kader-link:hover .label,
.kader-link:focus-visible .label{color:var(--grijs)}
.kader-link .frame{overflow:hidden}
/* kaders met een eigen zoom-dolly doen niet mee aan de linkschaal,
   anders vechten twee transforms om hetzelfde beeld */
.kader-link .frame:not([data-motion="zoom"]) img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.kader-link:hover .frame:not([data-motion="zoom"]) img,
.kader-link:focus-visible .frame:not([data-motion="zoom"]) img{transform:scale(1.03)}
.beeldnaam--klein{font-size:1.5rem}              /* 24px op de kleine kaders */

/* ------------------------------------------------------------- 07 studio */
/* specs/07-studiopagina.md. Verhaalblokken in de leesstem, werkwijze als
   drie kolommen met catalogusnummering in de labelstem. */
.studio__beeld{padding:7.5rem var(--pad) 0}
.studio__verhaal{padding:7.5rem var(--pad) 0}
.studio__verhaal p{
  margin:0;max-width:57.625rem;
  font-family:var(--serif);font-weight:400;
  font-size:1.625rem;line-height:1.386;
}
.studio__verhaal p + p{margin-top:2.25rem}       /* 36px, één regelmaat */
.werkwijze{
  padding:7.5rem var(--pad) 0;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
}
.werkwijze__stap .label{margin-bottom:1.25rem}
.werkwijze__stap p{
  margin:0;max-width:26rem;
  font-family:var(--serif);font-weight:400;
  font-size:1.09375rem;line-height:1.55;          /* 17.5px, de voetmaat */
}
.studio__afsluiting{margin-top:7.5rem}            /* naar de outro */

/* ------------------------------------------------------------ 08 contact */
/* specs/08-contactpagina.md. Links de gegevens als gelabelde blokjes, rechts
   het ontvangstbeeld in het asymmetrische raster. Randloos formulier op twee
   kolommen: alleen een onderlijn; bij focus groeit een inktlijn van links
   over de grijze heen. Geen vulling, geen schaduw, geen radius. */
.contact__paar{
  padding:7.5rem var(--pad) 0;
  display:grid;grid-template-columns:26.761% 50.704%;
  justify-content:space-between;align-items:start;
}
.gegeven + .gegeven{margin-top:2.5rem}
.gegeven .label{margin-bottom:.75rem}
.gegeven p{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:1.25rem;line-height:1.5;
}
.gegeven a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;transition:color .2s ease}
.gegeven a:hover,.gegeven a:focus-visible{color:var(--grijs)}
.contact__beeld{margin-top:6.196rem}              /* het beeld zakt, zoals in het werkritme */

.formulier{padding:7.5rem var(--pad);max-width:calc(57.625rem + 2*var(--pad))}
.formulier .eyebrow{margin-bottom:3rem}
.formulier__raster{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--gutter);row-gap:3.5rem;        /* 56px tussen de velden */
}
.formulier__veld{display:block}
.formulier__veld--vol{grid-column:1/-1}
.formulier__veld .label{margin-bottom:.9rem}
.formulier input,.formulier textarea{
  display:block;width:100%;
  font-family:var(--serif);font-weight:400;
  font-size:1.25rem;line-height:1.4;              /* 20px */
  color:var(--inkt);background:none;
  border:0;border-bottom:1px solid var(--grijs);
  border-radius:0;padding:0 0 .6rem;outline:none;
  background-image:linear-gradient(var(--inkt),var(--inkt));
  background-repeat:no-repeat;background-position:left bottom;
  background-size:0% 1px;
  transition:background-size .5s cubic-bezier(.2,.7,.3,1);
}
.formulier input:focus,.formulier textarea:focus{background-size:100% 1px}
.formulier textarea{min-height:8.5rem;resize:vertical}
.formulier__verstuur{margin-top:3.5rem;cursor:pointer;background-color:transparent;border-top:0;border-left:0;border-right:0}

/* Fout- en dank-toestanden, in de merkstem: een regel in de labelstem onder
   het veld, geen kleur, geen kader. De dank vervangt het formulier en spreekt
   in de leesstem. */
.veldfout{
  display:none;margin-top:.7rem;
  font-family:var(--sans);font-weight:400;
  font-size:.869rem;line-height:1.35;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--inkt);
}
.formulier__veld.is-fout .veldfout{display:block}
.formulier__veld.is-fout input,
.formulier__veld.is-fout textarea{border-bottom-color:var(--inkt)}
/* de algemene foutregel (verzenden zelf mislukt) en de honeypot voor spam */
.formulier__fout{
  display:none;margin-top:2rem;
  font-family:var(--sans);font-weight:400;
  font-size:.869rem;line-height:1.5;
  letter-spacing:.05em;text-transform:uppercase;color:var(--inkt);
}
.formulier.is-fout .formulier__fout{display:block}
.formulier .hp{position:absolute;left:-9999px;top:0;height:1px;width:1px;overflow:hidden}
.formulier__dank{display:none}
.formulier.is-verzonden .formulier__raster,
.formulier.is-verzonden .formulier__verstuur{display:none}
.formulier.is-verzonden .formulier__dank{
  display:block;max-width:57.625rem;
  font-family:var(--serif);font-weight:400;
  font-size:1.625rem;line-height:1.386;
}

/* ---------------------------------------------------- 09 projectdetail */
/* specs/09-projectdetail.md. Panorama-sleutelbeeld, feitenkolommen op het
   werkwijze-raster, leesblok, en de volgend-regel in de linktaal. */
.frame--panorama{--ratio:1420/680}
.project__sleutel{padding:7.5rem var(--pad) 0}
.feiten{
  padding:7.5rem var(--pad) 0;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--gutter);
}
.feit .label{margin-bottom:.9rem}
.feit p{margin:0;font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.4}
.leesblok{padding:7.5rem var(--pad) 0}
.leesblok p{
  margin:0;max-width:57.625rem;
  font-family:var(--serif);font-weight:400;
  font-size:1.625rem;line-height:1.386;
}
.leesblok p + p{margin-top:2.25rem}
.volgend{padding:5rem var(--pad) 7.5rem}   /* 80px onder het citaatvlak */
.volgend .label{display:block;margin-bottom:1.1rem;color:var(--grijs)}

/* ---------------------------- navigatie en voet, tablet en mobiel (blok 2) */
@media (max-width:1099px){
  .topnav{padding-top:1.5rem}
}
@media (max-width:1099px){
  .paginakop{padding-top:8rem}
  .overzicht{padding:5rem var(--pad)}
  .overzicht__rij + .overzicht__rij{margin-top:7rem}
}
@media (max-width:639px){
  .topnav{padding-top:1.5rem}
  .topnav__links{gap:1.25rem}
  .voet__boven{flex-direction:column;gap:2.5rem}
  .voet__nav{align-items:flex-start}
  .voet__onder{margin-top:3rem;flex-direction:column;align-items:flex-start;gap:1rem}
  .paginakop{padding-top:7rem}
  .paginakop__intro{font-size:1.375rem;line-height:1.34}
  .overzicht{padding:3.5rem var(--pad) 4rem}
  .overzicht__rij + .overzicht__rij{margin-top:4rem}
  /* de asymmetrie blijft, gestapeld zoals de werk-sectie op de home */
  .overzicht__paar,.overzicht__paar--gespiegeld{grid-template-columns:1fr}
  .overzicht__paar > :first-child{width:55%}
  .overzicht__paar > :last-child{width:80%;margin-left:auto;margin-top:2.5rem}
  .overzicht__paar--gespiegeld > :first-child{width:80%}
  .overzicht__paar--gespiegeld > :last-child{width:55%;margin-left:0;margin-right:auto}
  .overzicht__zakt{margin-top:2.5rem}
  .overzicht__solo{width:80%}
  .beeldnaam--klein{font-size:1.05rem}
  .studio__beeld,.studio__verhaal,.werkwijze{padding-top:3.5rem}
  .studio__verhaal p{font-size:1.375rem;line-height:1.34}
  .werkwijze{grid-template-columns:1fr;row-gap:2.5rem}
  .studio__afsluiting{margin-top:3.5rem}
  .project__sleutel,.leesblok,.feiten{padding-top:3.5rem}
  .feiten{grid-template-columns:1fr;row-gap:2rem}
  .volgend{padding-bottom:4rem}
  .contact__paar{padding-top:3.5rem;grid-template-columns:1fr}
  .contact__beeld{margin-top:2.5rem;width:80%;margin-left:auto}
  .formulier{padding-top:3.5rem;padding-bottom:4rem}
  .formulier__raster{grid-template-columns:1fr;row-gap:2.25rem}
}

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