/* De opmaak van de statische pagina's (pipeline/src/build-pages.mjs kopieert dit
   bestand naar web/public/pagina-<hash>.css). Sober: één kolom, de cijfers in een
   tabel, één knop. Geen JavaScript, dus ook geen data-theme: licht of donker
   volgt het apparaat.

   De variabelen hieronder dragen dezelfde namen en dezelfde waarden als in
   style.css (de inkt en het papier) en tokens.css (de ladder en de niveaus).
   Importeren kan niet: die bestanden gaan door Vite en deze pagina's niet.
   pipeline/test/paginas.test.mjs vergelijkt de waarden, zodat een grand cru op de
   pagina nooit een ander rood krijgt dan op de kaart zonder dat een toets omvalt. */
:root {
  --ink: #211f1b;
  --ink-soft: #5f5a51;
  --paper: #faf8f3;
  --paper-solid: #ffffff;
  --line: #ddd8cd;
  --accent: #7b1e3a;

  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-6: 24px;
  --ruimte-7: 32px;
  --ruimte-8: 48px;

  --schreef: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --trap-bovenregel: 11px;
  --trap-label: 12px;
  --trap-klein: 13px;
  --trap-tekst: 15px;
  --trap-lead: 17px;
  --trap-cijfer: 22px;
  --trap-groot: 34px;
  --spatie-bovenregel: 0.1em;
  --spatie-titel: -0.012em;
  --hoek-1: 8px;
  --hoek-2: 14px;

  --niveau-gc: #701b32;
  --niveau-1er: #b05038;
  --niveau-village: #cf9a5a;
  --niveau-regionaal: #7d8898;
  --niveau-champagne: #a8b3c2;

  --vlak-1: rgba(33, 31, 27, 0.035);
  --lijn-zacht: rgba(33, 31, 27, 0.08);

  /* Het accent volgt de streek, net als in de app (zetGebiedskleur): de pagina
     zet --gebied-kleur op de wortel, en een derde inkt erbij houdt het leesbaar. */
  --accent-gebied: color-mix(in srgb, var(--gebied-kleur, var(--accent)) 66%, var(--ink));
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece8e0;
    --ink-soft: #a49d91;
    --paper: #1a1917;
    --paper-solid: #232120;
    --line: #3a3733;
    --accent: #d4738c;
    --niveau-gc: #b8455f;
    --niveau-1er: #d97b57;
    --niveau-village: #e0b478;
    --niveau-regionaal: #94a1b3;
    --niveau-champagne: #b9c4d3;
    --vlak-1: rgba(255, 255, 255, 0.045);
    --lijn-zacht: rgba(255, 255, 255, 0.1);
    --accent-gebied: color-mix(in srgb, var(--gebied-kleur, var(--accent)) 70%, white);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: var(--trap-tekst);
  line-height: 1.5;
}
a { color: var(--accent-gebied); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* De balk bovenaan: het merk, waar je bent, en de andere taal. Op een telefoon
   breken de kruimels naar een eigen regel in plaats van het merk weg te duwen. */
.balk {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ruimte-2) var(--ruimte-4);
  max-width: 760px; margin: 0 auto; padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--trap-klein);
}
.merk { font-family: var(--schreef); font-size: var(--trap-lead); font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: var(--spatie-titel); }
.kruimels { flex: 1 1 auto; color: var(--ink-soft); }
.kruimels a { color: var(--ink-soft); }
.taal { margin-left: auto; }

main, footer { max-width: 760px; margin: 0 auto; padding: 0 var(--ruimte-4); }
main { padding-top: var(--ruimte-7); }
.bovenregel {
  margin: 0 0 var(--ruimte-2); font-size: var(--trap-bovenregel); font-weight: 600;
  letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft);
}
h1 { margin: 0 0 var(--ruimte-3); font-family: var(--schreef); font-size: var(--trap-groot); font-weight: 600; line-height: 1.1; letter-spacing: var(--spatie-titel); text-wrap: balance; }
.lead { margin: 0 0 var(--ruimte-6); font-size: var(--trap-lead); line-height: 1.45; max-width: 60ch; }

/* De ene daad van de pagina. */
.daad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-2) var(--ruimte-4); margin: 0 0 var(--ruimte-7); }
.knop {
  display: inline-block; padding: var(--ruimte-3) var(--ruimte-6); border-radius: var(--hoek-2);
  background: var(--accent-gebied); color: var(--paper-solid); font-weight: 600; text-decoration: none;
}
/* In het donker is het accent licht, dus de tekst erop donker: het papier zelf.
   Hier stond de kleurcode los, en de toets die de waarden met de app vergelijkt
   ziet alleen variabelen. */
@media (prefers-color-scheme: dark) { .knop { color: var(--paper); } }
.knop:hover { filter: brightness(1.08); }

section { margin: 0 0 var(--ruimte-7); }
h2 { margin: 0 0 var(--ruimte-3); font-family: var(--schreef); font-size: var(--trap-cijfer); font-weight: 600; line-height: 1.2; letter-spacing: var(--spatie-titel); }
h2 a { color: inherit; }
h3 { margin: var(--ruimte-4) 0 var(--ruimte-2); font-size: var(--trap-label); font-weight: 600; letter-spacing: var(--spatie-bovenregel); text-transform: uppercase; color: var(--ink-soft); }

.cijfers { width: 100%; border-collapse: collapse; background: var(--paper-solid); border: 1px solid var(--line); border-radius: var(--hoek-2); border-spacing: 0; overflow: hidden; }
.cijfers th, .cijfers td { padding: var(--ruimte-3) var(--ruimte-4); text-align: left; vertical-align: top; border-top: 1px solid var(--lijn-zacht); }
.cijfers tr:first-child th, .cijfers tr:first-child td { border-top: 0; }
.cijfers th { width: 38%; font-weight: 400; color: var(--ink-soft); }
.cijfers td { font-weight: 600; font-variant-numeric: tabular-nums; }
.zacht { font-weight: 400; color: var(--ink-soft); }
/* De bron hoort bij het getal en niet in een voetnoot: klein, eronder. */
.bron { display: block; margin-top: 2px; font-size: var(--trap-label); font-weight: 400; color: var(--ink-soft); overflow-wrap: anywhere; }
.noot { margin: var(--ruimte-3) 0 0; font-size: var(--trap-klein); color: var(--ink-soft); max-width: 70ch; }

.rijen { margin: 0; padding: 0; list-style: none; }
.rijen li { padding: var(--ruimte-2) 0; border-top: 1px solid var(--lijn-zacht); break-inside: avoid; }
.rijen li:first-child { border-top: 0; }
.kolommen { columns: 2; column-gap: var(--ruimte-7); }
.kolommen li:first-child { border-top: 1px solid var(--lijn-zacht); }
@media (max-width: 560px) { .kolommen { columns: 1; } .cijfers th { width: 42%; } h1 { font-size: 28px; } }

.stip { display: inline-block; width: 10px; height: 10px; margin-right: var(--ruimte-2); border-radius: 50%; background: var(--line); vertical-align: baseline; }
.stip-grand-cru { background: var(--niveau-gc); }
.stip-premier-cru { background: var(--niveau-1er); }
.stip-village { background: var(--niveau-village); }
.stip-regional { background: var(--niveau-regionaal); }
.stip-champagne { background: var(--niveau-champagne); }

.herkomst { margin: 0; font-size: var(--trap-klein); }
.herkomst dt { margin-top: var(--ruimte-3); font-weight: 600; }
.herkomst dd { margin: 0; color: var(--ink-soft); max-width: 70ch; }
.letop { display: block; margin-top: var(--ruimte-1); font-style: italic; }

footer { margin-top: var(--ruimte-8); padding-top: var(--ruimte-4); padding-bottom: var(--ruimte-8); border-top: 1px solid var(--line); font-size: var(--trap-klein); color: var(--ink-soft); }
footer p { margin: 0 0 var(--ruimte-2); max-width: 70ch; }

/* Op papier valt er niets aan te klikken: de knop naar de kaart, de kruimels en
   de taalwissel blijven weg, en het papier is wit in plaats van gebroken wit
   (dat drukt een printer als een grijs waas). De cijfers en hun bronnen blijven,
   want daar print iemand de pagina voor. */
@media print {
  body { background: #fff; }
  .daad, .kruimels, .taal { display: none; }
  a { color: inherit; text-decoration: none; }
  h2, h3 { break-after: avoid; }
  tr, li { break-inside: avoid; }
}