/* =========================================================
   Fiori Project · Coming Soon v2 · gedeelde basis
   Huisstijlfonts, merkkleuren, formulier, footer, a11y.
   De richtingen (d.css / f.css in ronde 2, a.css / c.css in het
   archief) laden hier bovenop en delen dus exact dezelfde
   typografische en kleurbasis.
   ========================================================= */

/* ---------- Huisstijlfonts, zelf gehost en gesubset naar latin ----------
   Awaken levert alleen een upright regular. Zet je er italic of een tweede
   gewicht op, dan synthetiseert de browser een scheefgetrokken namaakletter en
   valt het hoge contrast van de letter uit elkaar. Overal waar --font-display
   staat gaat daarom expliciet weight 400 / style normal mee, en loopt nadruk
   via kleur in plaats van cursief. Sinkin Sans heeft wel drie gewichten. */
@font-face {
  font-family: "Awaken";
  src: url("../fonts/awaken-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/sinkin-sans-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/sinkin-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sinkin Sans";
  src: url("../fonts/sinkin-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* De zes kleuren uit de brand guide van 08-06-2026, onveranderd.
     Pixelmeting over de 103 foto's in de beeldbank (31-07-2026): Earthy 39,5%,
     Muted Sage 22,7%, Autumn 21,4%, Terra 7,9%, White Lily 4,5%,
     Muted Mauve 3,9%. Het beeldmateriaal draagt het palet dus echt; White Lily
     is daarin geen beeldkleur maar papier, en zo wordt hij hier ook gebruikt. */
  --white-lily:  #F6F5F3;
  --muted-sage:  #9E9268;
  --earthy:      #3D241D;
  --autumn:      #88623E;
  --terra:       #843C28;
  --muted-mauve: #BA808E;

  --font-display: "Awaken", Georgia, "Times New Roman", serif;
  --font-body:    "Sinkin Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Per richting overschreven; hier de lichte grondwaarden. */
  --ground: var(--white-lily);
  --ink:    var(--earthy);
  --ink-soft: color-mix(in srgb, var(--earthy) 62%, var(--white-lily));
  --rule:   color-mix(in srgb, var(--earthy) 22%, transparent);
  --accent: var(--terra);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

/* ---------- Gedeelde typografische bouwstenen ---------- */

/* Kapitaaltjes-label. In de brand guide staan alle kaderteksten zo:
   klein, wijd gespatieerd, hoofdletters. 0.8rem is 12.8px; met deze spatiering
   en gewicht 500 blijft dat leesbaar, kleiner gaan we nergens. */
.eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 1.02;
  letter-spacing: 0.005em;
}
.display .accent { color: var(--accent); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--rule);
}

/* ---------- Formulier ----------
   Eén onderstreept veld plus een tekstknop; geen doos in een doos. Het veld en
   de knop staan op dezelfde grondlijn zodat de onderstreping één doorlopende
   regel vormt. */
.notify { margin: 0; }

.notify .field {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.3s var(--ease);
}
.notify .field:focus-within { border-bottom-color: var(--accent); }

.notify input {
  flex: 1 1 auto;
  min-width: 0;
  /* 44px raakvlak op touch; 16px voorkomt de auto-zoom van iOS Safari. */
  min-height: 46px;
  padding: 0.55rem 0 0.6rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.4;
}
/* opacity expliciet op 1: Firefox zet er standaard 0.54 overheen, en de 0.75 die
   hier eerder stond drukte de placeholder van 5,24:1 naar 3,17:1. Het label is
   .visually-hidden, dus dit is het enige zichtbare label dat het veld heeft.
   Hoort in de basis en niet per richting: D en F erfden de fout, E had hem lokaal
   gerepareerd (gemeten 31-07-2026). */
.notify input::placeholder { color: var(--ink-soft); opacity: 1; }
.notify input:focus { outline: none; }
.notify input[aria-invalid="true"] { color: var(--accent); }

.notify button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0 0 0 0.2rem;
  border: 0;
  background: transparent;
  /* Terra en niet Earthy: op een pagina die verder helemaal uit rust bestaat is
     dit het enige dat aangeklikt moet worden, en zonder vlak of rand moet de
     kleur dat werk doen. 7.25:1 op White Lily, gemeten 31-07-2026. */
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s var(--ease);
}
.notify button:hover,
.notify button:focus-visible { color: var(--ink); }
.notify button[disabled] { opacity: 0.5; cursor: default; }

.notify button svg {
  width: 17px; height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
.notify button:hover svg { transform: translateX(3px); }

.fineprint {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
  /* Zonder dit brak de regel op B en C af met alleen "altijd." op de tweede
     regel (gemeten 31-07-2026). Balance verdeelt de twee regels gelijk in
     plaats van de laatste twee woorden te laten vallen. */
  text-wrap: balance;
}

.form-status {
  margin: 0.5rem 0 0;
  /* 2,4em en niet 1,2em: de endpointmelding is op elke gemeten breedte twee
     regels, dus een reservering van één regel duwt de rest van de kolom weg. */
  min-height: 2.4em;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.form-status.show { opacity: 1; }
.form-status.err  { color: var(--accent); }
.form-status.ok   { color: var(--ink); }
/* De endpointmelding is een stagingtoestand en geen fout van de bezoeker,
   dus niet in Terra maar in de zachte inkt. */
.form-status.note { color: var(--ink-soft); }

/* ---------- Aftellen ---------- */
.count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.count .unit { display: flex; align-items: baseline; gap: 0.35rem; }
.count .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}
.count .lab {
  /* Was 0.72rem; dat is 11,5px en daarmee de kleinste tekst op de pagina.
     0.78rem maakt er 12,5px van en houdt de ondergrens gelijk aan de
     kaderteksten elders. */
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.count .sep { color: var(--rule); }

/* Op 375px liep de tellerregel 44px buiten het scherm (gemeten 31-07-2026).
   De scheidingspunten en hun tussenruimte zijn daar het eerste dat weg mag:
   vier eenheden met hun eigen label lezen ook zonder. */
@media (max-width: 720px) {
  .count { gap: 0.35rem 0.85rem; }
  .count .sep { display: none; }
}

/* ---------- Voet ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.foot a {
  /* 3px lucht boven en onder tilt een voetlink van 20 naar 26px hoog. De
     inline-uitzondering van WCAG 2.5.8 zou hier gelden, maar dit kost niets. */
  display: inline-block;
  padding-block: 3px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.foot a:hover,
.foot a:focus-visible { color: var(--ink); border-bottom-color: var(--rule); }
.foot .dot { opacity: 0.5; }

/* De contactregel staat in een <address>; die is standaard cursief en dat is
   precies wat de huisstijl niet doet. */
.foot-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  font-style: normal;
}

/* De copyrightregel is één doorlopende zin en geen rij losse blokken. Flex maakt
   van elk stuk kale tekst een eigen item, dus met de 1.1rem kolomruimte van .foot
   stond er gemeten 17px tussen "©", "2026" en "Fiori Project" (31-07-2026, 1440).
   De zin zit nu in één span en de ruimte hier is de woordruimte. */
.foot-legal { justify-content: flex-start; gap: 0.35rem 0.5rem; }

.socials { display: flex; gap: 0.15rem; }
.socials a {
  /* 44x44 raakvlak, terwijl het pictogram optisch 18px blijft. */
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-bottom: 0;
  color: var(--ink-soft);
}
.socials a:hover, .socials a:focus-visible { color: var(--accent); }
.socials svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Toegankelijkheid ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Richtingschakelaar ----------
   Alleen voor de staging-vergelijking. Bij livegang gaat dit blok en het
   bijbehorende <nav> in de drie HTML-bestanden eruit; het staat daarom los van
   alle andere opmaak en nergens in de layout-grid. */
.switch {
  position: fixed;
  z-index: 50;
  top: 0; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0 0 10px 10px;
  background: rgba(61, 36, 29, 0.88);
  backdrop-filter: blur(6px);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 245, 243, 0.7);
}
.switch b { font-weight: 500; padding-right: 0.35rem; opacity: 0.6; }
.switch a {
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  text-decoration: none;
  color: rgba(246, 245, 243, 0.75);
}
.switch a[aria-current="page"] {
  background: rgba(246, 245, 243, 0.15);
  color: #F6F5F3;
}
.switch a:hover { color: #F6F5F3; }
/* Doorgestreepte staat voor een afgekeurde richting die nog wel bereikbaar
   blijft. Niet in gebruik sinds B op verzoek van Dauji uit het archief is
   gehaald (31-07-2026); de regel blijft staan omdat de volgende ronde hem
   weer nodig kan hebben. */
.switch a.afgekeurd { text-decoration: line-through; opacity: 0.5; }

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