/* ==========================================================================
   Studio Woww — stylesheet
   Kleuren en typografie staan hieronder als variabelen (":root").
   Wil je een kleur aanpassen? Verander 'm hier, dan verandert hij overal.
   ========================================================================== */

:root {
  /* --- basiskleuren van de site (chrome, niet van de schilderijen) --- */
  --ink: #131214;
  --ink-soft: #201f22;
  --bone: #f5f1ea;
  --bone-dim: #ece5d8;
  --line: rgba(245, 241, 234, 0.18);
  --line-dark: rgba(19, 18, 20, 0.12);

  /* --- pigmentpalet: dezelfde kleuren als op het doek, voor UI-accenten --- */
  --violet: #6b4c8a;
  --blue: #7fb2e0;
  --coral: #e1432b;
  --gold: #f2c230;
  --orange: #e8792e;

  /* --- typografie --- */
  --font-display: "Nohemi", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* --- ritme --- */
  --nav-height: 68px; /* hoogte van de zwevende navbalk zelf */
  --nav-top-gap: 26px; /* ruimte tussen de bovenkant van het scherm en de navbalk */
  /* totale ruimte die paginacontent onder de balk vrij moet houden */
  --nav-clearance: calc(var(--nav-top-gap) + var(--nav-height) + 28px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- vaste breedte: dezelfde waarde voor de nav-balk én alle
     pagina-inhoud, zodat alles altijd links/rechts precies uitlijnt --- */
  --content-max: 1320px;
  --content-pad: clamp(32px, 8vw, 48px);
  /* voor absoluut gepositioneerde elementen (zoals de bijschriften op de
     homepage) die niet ín de gecentreerde box zitten, maar er wel exact
     mee moeten uitlijnen — dit rekent hetzelfde linker/rechter-inspringen
     uit als max-width + margin:auto + padding samen opleveren */
  --content-inset: max(var(--content-pad), calc((100vw - var(--content-max)) / 2 + var(--content-pad)));
  /* de navbalk verdeelt de totale inspringing (--content-inset) in twee
     stukken: een buitenmarge (hoe ver de pil van de schermrand zweeft) en
     een binnenpadding (ademruimte rond logo/iconen binnen de pil). Welke
     kant meer krijgt kun je los aanpassen — het logo blijft sowieso op
     dezelfde plek staan, want buitenmarge + binnenpadding tellen altijd op
     tot --content-inset. Bij een brede pil (desktop) gaat er dus meer naar
     de binnenpadding; bij weinig ruimte (mobiel) bewaakt de "16px" hieronder
     dat de pil nooit tot tegen de rand komt. */
  --nav-float-margin: 28px;
  --nav-outer-inset: max(16px, calc(var(--content-inset) - var(--nav-float-margin)));
  /* de binnenpadding is wat er overblijft ná de buitenmarge — nooit een
     los vast getal, want dan klopt de optelsom niet meer zodra de 16px-
     ondergrens hierboven in beeld komt (op smalle schermen). Zo blijft
     buitenmarge + binnenpadding altijd exact gelijk aan --content-inset,
     dus het logo lijnt altijd precies uit met de pagina-inhoud eronder. */
  --nav-inner-pad: calc(var(--content-inset) - var(--nav-outer-inset));
}

/* ==========================================================================
   Nohemi — eigen lettertype, lokaal gehost (geen Google Fonts)
   Zet je .woff2-bestanden in de map "fonts/" met exact deze namen, of pas
   de bestandsnamen hieronder aan naar wat jij daadwerkelijk hebt. Zie de
   README voor uitleg over hoe je een .woff2 maakt als je alleen .ttf/.otf
   hebt.
   ========================================================================== */

@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* essentieel voor de uitlijning: de homepage scrolt zelf niet (eigen
     interne container), maar Gallery/Bio/Contact/Werk wel — dat geeft op
     die pagina's een browser-scrollbalk die ruimte inneemt en zo de
     beschikbare breedte om te centreren een paar pixels versmalt.
     "auto" toont de balk alleen als een pagina 'm echt nodig heeft (dus
     nooit op de homepage), maar scrollbar-gutter reserveert de ruimte
     ervoor sowieso altijd — zo blijft de breedte overal identiek zonder
     ooit een balk te tonen die er niet hoeft te zijn. */
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* achtervang op de homepage: mocht er ooit een piepklein randje overblijven
   boven de statusbalk of onder de home-indicator op een telefoon, dan valt
   dat tegen donker veel minder op dan tegen het crème van de rest van de
   site */
body.is-home {
  background: var(--ink);
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
}

p {
  margin: 0;
}

::selection {
  background: var(--violet);
  color: var(--bone);
}

/* focus-styles: altijd zichtbaar bij toetsenbordnavigatie */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Navigatie — zwevende, glasachtige balk
   ========================================================================== */

.site-nav {
  position: fixed;
  top: max(var(--nav-top-gap), calc(env(safe-area-inset-top) + 12px));
  left: var(--nav-outer-inset);
  right: var(--nav-outer-inset);
  height: 68px;
  border-radius: 20px;
  background: rgba(19, 18, 20, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 241, 234, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  z-index: 200;
}

/* logo links, menu-items in het midden, social-icons rechts — een
   3-koloms grid centreert het midden altijd exact, ongeacht hoe breed het
   logo of de icons zijn (dat lukt niet betrouwbaar met flex space-between) */
.site-nav__inner {
  height: 100%;
  padding: 0 var(--nav-inner-pad);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.site-nav__mark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  color: var(--bone);
  white-space: nowrap;
  justify-self: start;
  display: flex;
  align-items: center;
}

.site-nav__mark img {
  height: 22px;
  width: auto;
  display: block;
}

.site-nav__links {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-self: center;
}

.site-nav__links a {
  color: rgba(245, 241, 234, 0.55);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.site-nav__links a:hover {
  color: var(--bone);
}

.site-nav__links a[aria-current="page"] {
  color: var(--blue);
}

.site-nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-nav__social a {
  display: flex;
  color: var(--bone);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}

.site-nav__social a:hover {
  opacity: 1;
}

.site-nav__social svg {
  width: 18px;
  height: 18px;
}

/* op smalle telefoons is er geen ruimte voor ruime letterspacing en grote gaps */
@media (max-width: 420px) {
  :root {
    --nav-height: 58px;
    --nav-float-margin: 18px;
  }
  .site-nav {
    height: 58px;
    border-radius: 16px;
  }
  .site-nav__mark {
    font-size: 1rem;
  }
  .site-nav__mark img {
    height: 19px;
  }
}

/* ==========================================================================
   Hamburgermenu — vervangt de menu-items en social-icons op mobiel
   ========================================================================== */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--bone);
  transition: transform 0.2s var(--ease);
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s var(--ease);
}

.nav-toggle:active {
  transform: scale(0.88);
}

/* hamburger-streepjes animeren naar een kruis zodra het menu open is */
.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100svh;
  /* lager dan .site-nav (200) — niet hoger. De navbalk vormt zijn eigen
     stapel-laag, dus een hogere z-index hier zou de hele balk (inclusief
     de hamburgerknop zelf) onder het menu verstoppen. Zo blijft de knop
     altijd zichtbaar en klikbaar boven het geopende menu. */
  z-index: 190;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.nav-overlay.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.nav-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 8vh, 64px);
}

.nav-overlay__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 5vh, 36px);
}

.nav-overlay__links a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--bone);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}

.nav-overlay__links a[aria-current="page"],
.nav-overlay__links a:hover {
  opacity: 1;
}

/* elk linkje komt met een klein beetje vertraging en een zachte op-beweging
   naar binnen, zodra het menu opent — dat is de "animatie" op de items zelf */
.nav-overlay__links li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.nav-overlay.is-open .nav-overlay__links li:nth-child(1) { transition-delay: 0.08s; }
.nav-overlay.is-open .nav-overlay__links li:nth-child(2) { transition-delay: 0.14s; }
.nav-overlay.is-open .nav-overlay__links li:nth-child(3) { transition-delay: 0.2s; }

.nav-overlay.is-open .nav-overlay__links li {
  opacity: 1;
  transform: translateY(0);
}

/* social-icons onder de menu-items, iets groter dan in de kleine navbalk
   zodat ze prettig te raken zijn */
.nav-overlay__social {
  display: flex;
  align-items: center;
  gap: 28px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  transition-delay: 0.26s;
}

.nav-overlay.is-open .nav-overlay__social {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay__social a {
  display: flex;
  color: var(--bone);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}

.nav-overlay__social a:hover {
  opacity: 1;
}

.nav-overlay__social svg {
  width: 24px;
  height: 24px;
}

/* voorkomt dat de pagina er achter meescrolt terwijl het menu open staat */
html.nav-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span,
  .nav-overlay,
  .nav-overlay__links li,
  .nav-overlay__social {
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .site-nav__inner {
    /* op mobiel expliciet maar 2 dingen: logo en hamburger, elk hard
       tegen hun eigen kant — geen afhankelijkheid meer van hoe de grid
       een leeg middelste kolom zou moeten opvullen */
    display: flex;
    justify-content: space-between;
  }
  .site-nav__links {
    display: none;
  }
  .site-nav__social {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

/* ==========================================================================
   Homepage — schermvullende, scroll-snapped werken
   ========================================================================== */

.work-scroller {
  /* vastgezet aan alle vier de randen van het scherm, in plaats van een
     berekende hoogte (vh/svh/dvh) — dat rekenwerk bleek op sommige
     iPhones net een fractie te kort te schieten, waardoor er een randje
     paginakleur zichtbaar bleef. Dit kan niet meer misgaan: top/right/
     bottom/left staan letterlijk op 0, dus dit vult altijd exact het
     scherm, ook boven de statusbalk en onder de home-indicator. */
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow-y: scroll;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* het scrollen hier loopt op desktop via wiel/pijltjes/stippen (zie
     js/home.js) — er is geen reden om ook nog een sleepbare scrollbalk
     te laten zien */
  scrollbar-width: none; /* Firefox */
  /* geen CSS scroll-snap hier op desktop — dat combineren met onze eigen
     scrollTop-animatie gaf eerder het "hapert en loopt vast"-effect */
}

.work-scroller::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* MOBIEL (aanraakschermen zonder hover): native scroll-snap binnen het
   eigen, vaste scroll-containertje — bewuste keuze boven "de pagina zelf
   laten scrollen": dat laatste gaf wel een volledig doorlopende
   achtergrond tot achter de statusbalk, maar voelde in de praktijk minder
   prettig. Dit is hoe het al die tijd werkte, gewoon weer terug. */
@media (hover: none) {
  .work-scroller {
    touch-action: pan-y;
    scroll-snap-type: y mandatory;
  }
}

.work-section {
  position: relative;
  height: 100%;
  display: block;
  cursor: none;
  overflow: hidden; /* voorkomt dat de hover-zoom van de foto een horizontale scrollbalk veroorzaakt */
}

@media (hover: none) {
  .work-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

.work-section__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* zachte donkere sluier onderin zodat de titel altijd leesbaar blijft */
.work-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.work-section__caption {
  position: absolute;
  left: var(--content-inset);
  bottom: max(clamp(28px, 5vw, 56px), env(safe-area-inset-bottom));
  z-index: 2;
  color: var(--bone);
}

.work-section__caption .eyebrow {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.85;
  margin-bottom: 8px;
}

.work-section__caption h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
}

.work-section__caption .medium {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* stippen rechts: laten zien welk werk je nu bekijkt */
.scroll-dots {
  position: fixed;
  right: var(--content-inset);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 150;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

/* op mobiel navigeer je toch al met swipes — hier bewust weggelaten in
   plaats van een steeds terugkerende bron van sync-bugs te blijven */
@media (hover: none) {
  .scroll-dots {
    display: none;
  }
}

.scroll-dots button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.scroll-dots button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--bone);
  transform: translate(-50%, -50%);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.scroll-dots button[aria-current="true"]::before {
  background: var(--bone);
  transform: translate(-50%, -50%) scale(1.3);
}

.scroll-cue {
  position: absolute;
  right: var(--content-inset);
  bottom: max(clamp(28px, 5vw, 56px), env(safe-area-inset-bottom));
  z-index: 2;
  color: var(--bone);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.85;
}

.scroll-cue svg {
  width: 14px;
  height: 14px;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ==========================================================================
   Gradient-cursor — het signature-element van de site
   Volgt de muis over elk werk, met een gradient uit dat specifieke schilderij.
   ========================================================================== */

.cursor-orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  /* dit is alleen een fallback — cursor.js zet per werk de echte gradient
     (2 of 3 kleuren, van boven naar beneden) via inline style zodra je
     over een werk hovert */
  background: linear-gradient(180deg, var(--violet), var(--blue));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.cursor-orb.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cursor-orb svg {
  width: 38px;
  height: 38px;
}

/* op aanraakschermen bestaat er geen "hover" — dan houden we gewoon de gewone cursor/tap aan */
@media (hover: none) {
  .cursor-orb {
    display: none;
  }
  .work-section,
  .gallery__item {
    cursor: pointer;
  }
  /* bijschrift en sluier stonden alleen aan bij :hover — die bestaat niet op
     een telefoon, dus zonder dit is de titel in de gallery nooit zichtbaar */
  .gallery__item figcaption,
  .gallery__item::after {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-orb,
  .work-section__image,
  html {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Gallery — overzichtspagina
   ========================================================================== */

.gallery {
  padding: calc(var(--nav-clearance) + 24px) var(--content-pad) 80px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.gallery__intro {
  max-width: 46ch;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.gallery__intro h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}

.gallery__intro p {
  color: var(--ink-soft);
  line-height: 1.6;
}

.gallery__grid {
  columns: 2;
  column-gap: clamp(12px, 2vw, 24px);
}

.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: none;
  background: var(--bone-dim);
  break-inside: avoid;
  margin-bottom: clamp(12px, 2vw, 24px);
  /* de aspect-ratio wordt per werk gezet via inline style in js/gallery.js,
     op basis van de echte widthCm/heightCm — dus elk vakje heeft precies
     de verhouding van het echte doek */
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  color: var(--bone);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.gallery__item:hover figcaption {
  opacity: 1;
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.gallery__item:hover::after {
  opacity: 1;
}

@media (max-width: 560px) {
  .gallery__grid {
    columns: 1;
  }
}

/* ==========================================================================
   Werk-detailpagina (work.html)
   ========================================================================== */

.work-detail {
  padding-top: var(--nav-clearance);
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
  min-height: 100vh;
  min-height: 100svh;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  box-sizing: border-box;
}

.work-detail__image {
  position: relative;
  min-height: 60vh;
  min-height: 60svh;
  background-size: cover;
  background-position: center;
}

.work-detail__info {
  padding: clamp(32px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.work-detail__info h1 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
}

.work-detail__meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
}

.work-detail__availability {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 999px;
  width: fit-content;
}

.work-detail__availability::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.work-detail__availability.is-available {
  color: #2f7a4f;
  background: rgba(47, 122, 79, 0.1);
}

.work-detail__availability.is-sold {
  color: #a34b3d;
  background: rgba(163, 75, 61, 0.1);
}

.work-detail__inquiry label {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.work-detail__inquiry-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.work-detail__inquiry-row input[type="email"] {
  flex: 1;
  min-width: 160px;
  border: none;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}

.work-detail__inquiry-row input[type="email"]:focus {
  outline: none;
  border-color: var(--violet);
}

.work-detail__inquiry-row button {
  flex-shrink: 0;
  background: var(--ink);
  color: var(--bone);
  border: none;
  padding: 0 22px;
  height: 40px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

.work-detail__inquiry-row button:hover {
  background: var(--violet);
}

.work-detail__nav {
  display: flex;
  gap: 24px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.work-detail__nav a {
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 2px;
}

@media (max-width: 860px) {
  .work-detail {
    grid-template-columns: 1fr;
  }
  .work-detail__image {
    min-height: 55vh;
    min-height: 55svh;
  }
}

/* extra foto's, onder het hoofdblok */
.work-detail__extra {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) var(--content-pad) 100px;
}

.work-detail__extra-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.5vw, 32px);
}

.work-detail__extra-images img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .work-detail__extra-images {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Bio & contact — eenvoudige editorial pagina's
   ========================================================================== */

.page {
  padding: calc(var(--nav-clearance) + 32px) var(--content-pad) 100px;
  max-width: var(--content-max);
  margin: 0 auto;
}

.bio {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.bio__portrait {
  aspect-ratio: 4 / 5;
  background: var(--bone-dim);
  overflow: hidden;
}

.bio__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio__portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--line-dark);
  color: var(--ink-soft);
  font-size: 0.85rem;
  padding: 24px;
  line-height: 1.6;
}

.bio__content .eyebrow {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--violet);
  margin-bottom: 14px;
}

.bio__content h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 24px;
}

.bio__content p {
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 58ch;
}

.bio__content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .bio {
    grid-template-columns: 1fr;
  }
}

.contact {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.contact .eyebrow {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--violet);
  margin-bottom: 14px;
}

.contact h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 20px;
}

.contact p {
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

.contact__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.contact__details a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  border-bottom: 1px solid var(--line-dark);
  width: fit-content;
  padding-bottom: 2px;
}

.contact__form {
  display: grid;
  gap: 18px;
  text-align: center;
}

.contact__form label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  color: var(--ink-soft);
}

.contact__form input,
.contact__form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-dark);
  background: transparent;
  padding: 10px 2px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  text-align: center;
}

.contact__form input:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--violet);
}

.contact__form button {
  justify-self: center;
  margin-top: 8px;
  background: var(--ink);
  color: var(--bone);
  border: none;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}

.contact__form button:hover {
  background: var(--violet);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line-dark);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px var(--content-pad);
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ink-soft);
}