/* Piet × Baudoin × AI, nr. 1. Eén wit scherm als een galeriewand: het beeld centraal, het bod ernaast, de rest zwijgt. */

@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-normal-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/InstrumentSerif-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans-normal-400.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* Gemeten aan de lokale woff2's (1000 units/em): serif 990/310, sans 970/250,
   allebei zonder line gap. size-adjust = tekstbreedte Instrument / lokale font;
   overrides = fontmetriek / size-adjust. Corpus: titel/bedrag/datum, No. 1,
   en de maker- en kleine teksten. Liberation is de metrisch gelijke Linux-variant. */
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  font-weight: 400; font-style: normal;
  size-adjust: 81.41668%; ascent-override: 121.59671%; descent-override: 38.07574%; line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic");
  font-weight: 400; font-style: italic;
  size-adjust: 71.57360%; ascent-override: 138.31915%; descent-override: 43.31206%; line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400 600; font-style: normal;
  size-adjust: 101.52687%; ascent-override: 95.54121%; descent-override: 24.62402%; line-gap-override: 0%;
}
/* ch volgt de 0: 666/1000 em tegenover Arial/Liberation 1139/2048 em.
   Match die apart, zodat bestaande tekstbreedtes en tellers hun maat behouden. */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 400 600; font-style: normal; unicode-range: U+0030;
  size-adjust: 119.75136%; ascent-override: 81.00117%; descent-override: 20.87659%; line-gap-override: 0%;
}

:root {
  /* Kleur: wit en inkt; blauw, rood en geel alleen als accent, genomen uit het beeld. */
  --wit: #ffffff;
  --inkt: #0b0b0c;
  --grijs: #5f5f5c;
  --lijn: #e4e4e0;
  --blauw: #1d5fd0;
  --rood: #d9261f;
  --geel: #f2c31b;

  --serif: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --prijs: clamp(44px, 3.8vw, 64px);
  --tel-duur: 180ms;

  /* Ruimte: één schaal, vloeiend tussen telefoon en ultrawide. */
  --r1: 4px; --r2: 8px; --r3: 16px; --r4: 24px; --r5: 40px; --r6: 64px;
  --rand: clamp(16px, 5vw, 96px);

  --zacht: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--wit);
  color: var(--inkt);
  font: 400 16px/1.55 var(--sans);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p, h1, h2, figure { margin: 0; }
button { font: inherit; color: inherit; }

/* De hoek, vast aan de kop. Groot genoeg om te zien, klein genoeg om niet te storen. */
.hoek {
  position: absolute;
  top: 0; right: 0;
  width: clamp(92px, 12vw, 230px);
  height: auto;
  pointer-events: none;
  transform-origin: 100% 0;
  animation: hoek-in 1.6s var(--zacht) .2s both;
}

.kop {
  position: relative;
  z-index: 1;
  padding: clamp(18px, 2.4vw, 36px) var(--rand) 0;
}
.merk { display: inline-block; width: 30px; line-height: 0; border-radius: 50%; }
.merk svg { width: 100%; height: auto; overflow: visible; }
.merk:focus-visible { outline: 2px solid var(--blauw); outline-offset: 4px; }
.pupil { transition: transform .5s var(--zacht); }

.werk {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: var(--r4) var(--rand) var(--r6);
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(300px, 1fr); /* gulden snede: de tekst begint rond 62% van de breedte */
  gap: clamp(32px, 6vw, 140px);
  align-items: center;
}

.beeld { display: grid; place-items: center; }
.afdruk {
  width: min(100%, 1100px, calc(100svh - 150px));
  animation: beeld-in 1.4s var(--zacht) both;
}
.beeld picture { display: block; }
.beeld picture img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply; /* het witte papier van de foto valt weg in het wit van de wand */
}

.info { display: grid; gap: var(--r3); max-width: 460px; }
.info > * { animation: tekst-in 1s var(--zacht) both; }
.info > :nth-child(2) { animation-delay: .12s; }
.info > :nth-child(3) { animation-delay: .2s; }
.info > :nth-child(4) { animation-delay: .26s; }
.info > :nth-child(n+5) { animation-delay: .34s; }

.regel, .label, label, .uitleg {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grijs);
}
h1 {
  font: 400 clamp(40px, 3.7vw, 68px)/1 var(--serif);
  letter-spacing: -.01em;
  margin-top: var(--r1);
  text-wrap: balance;
}
.naam { white-space: nowrap; }
.nr { display: flex; align-items: center; gap: .4em; font-style: italic; margin-top: .3em; }
/* De handtekening naast de naam van het werk (Piet, 26-10: plek 4). Breedte en hoogte liggen vast, dus niets verspringt;
   de negatieve marge laat het gebaar boven en onder de regel uitsteken zonder de regel hoger te maken. */
.handtekening { display: block; flex: none; width: min(3.6em, 210px); height: auto; margin-block: -.45em -.2em; }
.maker { color: var(--grijs); max-width: 36ch; }
.maker + .maker { margin-top: calc(var(--r2) * -1); }

.bericht {
  border-left: 2px solid var(--inkt);
  padding: var(--r1) 0 var(--r1) var(--r3);
}
.bericht strong { font-weight: 500; }
.bericht.rood { border-color: var(--rood); }

.bod {
  border-top: 1px solid var(--lijn);
  padding-top: var(--r4);
  margin-top: var(--r2);
  display: grid;
  gap: var(--r1);
}
.label { display: flex; align-items: center; gap: var(--r2); }
.oogje { width: 13px; height: auto; flex: none; transform-origin: 50% 38%; }
.oogje.tik { animation: oog-tik .9s var(--zacht); }
.bedrag {
  font: 400 var(--prijs)/1 var(--serif);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.01em;
}
.sub { color: var(--grijs); font-size: 14px; }
.aftellen, .balk-aftellen { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.klok { border-top: 1px solid var(--lijn); margin-top: var(--r3); padding-top: var(--r4); display: grid; gap: var(--r2); }
.klok[hidden] { display: none; }
.klok[data-wacht] { visibility: hidden; }
.sluit-tijd { font: 400 min(calc(var(--prijs) * .6), 6.7vw)/1.2 var(--serif); white-space: nowrap; }
.aftellen { font-size: 14px; color: var(--grijs); }
.tel-getal { position: relative; display: inline-block; min-width: 2ch; text-align: right; }
.tel-deel:first-child .tel-getal { min-width: 0; text-align: left; }
/* Alleen de cijferfade maakt het oude getal zichtbaar; de lege pseudotekst telt zo niet als verplaatsing. */
.tel-getal::before { content: attr(data-vorig); position: absolute; inset: 0; opacity: 0; }
.tel-woord { display: inline-grid; }
.tel-woord::after { content: attr(data-meervoud); visibility: hidden; grid-area: 1 / 1; }
.tel-woord > span { grid-area: 1 / 1; }

.knop {
  appearance: none;
  border: 1px solid var(--inkt);
  background: var(--inkt);
  color: var(--wit);
  min-height: 54px;
  padding: 0 var(--r4);
  font-size: 15px;
  letter-spacing: .02em;
  cursor: pointer;
  margin-top: var(--r2);
  transition: background-color .35s var(--zacht), color .35s var(--zacht);
}
.knop:hover { background: var(--wit); color: var(--inkt); }
.knop:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; }
.knop.licht { background: var(--wit); color: var(--inkt); }
.knop.licht:hover { background: var(--inkt); color: var(--wit); }
.knop[hidden] { display: none; }
.knop:disabled, .knop:disabled:hover { background: var(--lijn); border-color: var(--lijn); color: var(--grijs); cursor: default; }
.klein { font-size: 13px; color: var(--grijs); max-width: 40ch; }

/* Het biedvenster: een wit vel, op de telefoon een vel dat van onder komt. */
.venster {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: var(--r5);
  border: 1px solid var(--inkt);
  background: var(--wit);
  color: var(--inkt);
  overflow: auto;
}
.venster[open] { animation: venster-in .5s var(--zacht); }
.venster::backdrop { background: rgba(255, 255, 255, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sluit {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
}
.sluit svg { width: 16px; height: 16px; }
.sluit:focus-visible { outline: 2px solid var(--blauw); }

.stap { display: grid; gap: var(--r2); }
.stap[hidden] { display: none; }
.stap h2 { font: 400 34px/1.05 var(--serif); margin-bottom: var(--r3); padding-right: var(--r5); }
.stap h2:focus { outline: none; }
.stap label { margin-top: var(--r2); }
.stap input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--inkt);
  border-radius: 0;
  padding: var(--r2) 0;
  font: 400 18px/1.3 var(--sans);
  background: transparent;
  color: var(--inkt);
}
.stap input:focus { outline: none; border-bottom-color: var(--blauw); box-shadow: 0 1px 0 var(--blauw); }
.veld-bedrag { display: flex; align-items: baseline; gap: var(--r2); border-bottom: 1px solid var(--inkt); }
.veld-bedrag span { font: 400 30px/1 var(--serif); }
.veld-bedrag input { border: 0; font: 400 30px/1.2 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.veld-bedrag:focus-within { border-bottom-color: var(--blauw); box-shadow: 0 1px 0 var(--blauw); }
.veld-bedrag input:focus { box-shadow: none; }
.veld-bedrag.fout-veld { border-bottom-color: var(--rood); box-shadow: 0 1px 0 var(--rood); }
.uitleg { margin-top: var(--r1); }
.fout { color: var(--rood); font-size: 14px; min-height: 0; }
.fout:empty { display: none; }

/* Het akkoord: een eigen vierkantje in inkt, de tekst gewoon leesbaar (niet in kapitalen). */
.stap label.akkoord {
  display: flex; gap: var(--r2); align-items: flex-start; margin-top: var(--r3);
  font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--inkt); cursor: pointer;
}
.stap .akkoord input {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; padding: 0;
  border: 1px solid var(--inkt); border-radius: 0; background: var(--wit); display: grid; place-content: center;
}
.stap .akkoord input::after { content: ""; width: 10px; height: 10px; background: var(--inkt); transform: scale(0); transition: transform .18s var(--zacht); }
.stap .akkoord input:checked::after { transform: scale(1); }
.stap .akkoord input:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; box-shadow: none; }
.akkoord.fout-veld input { border-color: var(--rood); box-shadow: 0 0 0 1px var(--rood); }
.stap .knop { margin-top: var(--r3); width: 100%; }

.midden { justify-items: center; text-align: center; padding-top: var(--r3); }
.midden h2 { padding-right: 0; margin-bottom: 0; }
.midden p { color: var(--grijs); max-width: 34ch; }
.midden .groot { font: 400 52px/1 var(--serif); color: var(--inkt); font-variant-numeric: tabular-nums lining-nums; margin: var(--r2) 0; }
.laden, .teken { width: 54px; height: auto; margin-bottom: var(--r3); }
.ring { transform-origin: 30px 30px; animation: draai 1.6s linear infinite; }
.teken { animation: oog-tik .9s var(--zacht); transform-origin: 50% 38%; }

/* Ontwerpweergave */
.ontwerp {
  position: fixed;
  left: 16px; bottom: 16px;
  z-index: 5;
  display: flex; align-items: center; gap: 2px;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  padding: 4px;
  background: var(--wit);
  border: 1px solid var(--lijn);
  font-size: 12px;
  scrollbar-width: none;
}
.ontwerp[hidden] { display: none; }
.ontwerp span { padding: 0 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); }
.ontwerp button { border: 0; background: none; padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.ontwerp button[aria-pressed="true"] { background: var(--inkt); color: var(--wit); }

/* De biedbalk bestaat alleen op de telefoon. */
.balk { display: none; }

/* Telefoon en smalle vensters: alles onder elkaar, het beeld blijft het grootst. */
@media (max-width: 820px) {
  .werk { grid-template-columns: 1fr; gap: var(--r4); padding-top: var(--r2); padding-bottom: 88px; }
  .info { max-width: none; }
  h1 { font-size: clamp(34px, 10.2vw, 52px); }
  .afdruk { width: min(100%, 46svh); }
  .maker { font-size: 15px; }
  .balk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; align-items: center; justify-content: space-between; gap: var(--r3);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--wit);
    border-top: 1px solid var(--lijn);
    transform: translateY(105%);
    transition: transform .5s var(--zacht);
  }
  .balk.zichtbaar { transform: none; }
  .balk p { display: grid; align-content: center; min-height: calc(2 * var(--r4)); line-height: 1.1; }
  .balk-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grijs); }
  .balk-aftellen { font-size: 11px; color: var(--grijs); }
  .balk-bedrag { font: 400 28px/1.1 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
  .balk .knop { margin: 0; min-height: 48px; min-width: 120px; }
  .ontwerp { position: static; margin: 0 16px 96px; max-width: none; overflow-x: auto; }
  .venster {
    width: 100vw; max-width: 100vw;
    margin: auto 0 0;
    max-height: 92svh;
    padding: var(--r5) var(--r4) calc(var(--r4) + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
  }
  .venster[open] { animation: vel-op .55s var(--zacht); }
}

@keyframes beeld-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes tekst-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes hoek-in { from { opacity: 0; transform: rotate(-4deg) scale(.96); } }
@keyframes venster-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes vel-op { from { transform: translateY(100%); } }
@keyframes oog-tik { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes draai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}