/* Hallmark · shape: Bento Grid (draw 14e193) · genre: atmospheric · theme: Spore (deal 2/3, seed wine-shop-where-you-4ac0·974abdc7·2026-11-06·r0) · redesign: full · job: buy
 * hero: Counter · nav: edge-aligned · footer: statement · imagery: photographs, Wikimedia 7, lamp-lit · signature: the dish you pick as a photograph with Gert's bottle as a paper label laid over it · spore: cellar
 * axes: dark/roman-serif/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a shop page argues little; the dish leads and the wine follows it, so the order itself says what Gert does */
/* Hallmark · swapped Spore's pills for 8px corners · the owner bans pill buttons on every design he signs off */
/* Hallmark · swapped the draw's Pinned run on how it is made for the rack as a price list · a wine shop makes nothing; its rack is what it shows */
/* Hallmark · dropped .rek-grid drawing, .voorbeeldlabel · the drawn rack of round bottle ends is replaced by a typeset rack and photographs (80, 82); "Voorbeeld-agenda" was an eyebrow (54) and the sample strip already says the shop does not exist */
/* Hallmark · dropped "Gert zegt" head · the attribution under the quote already names him */
/* Hallmark · reworded "Kies je gerecht. Gert laat in het rek zien welke flessen erbij passen, en vertelt waarom." to "Kies je gerecht, Gert wijst de flessen aan." · 58 caps the hero line at twelve words */
/* Hallmark · reworded "LOIRE · FRANKRIJK" and "WIT · 12% · 75 CL" to "Loire, Frankrijk. Wit, 12%, 75 cl" · 63 and 67 name the dotted caps */
/* Hallmark · reworded "← Alle voorbeelden" to "Alle voorbeelden" · 63 names the glued arrow */
/* Hallmark · waive 39b · button.vak rows of the price list stand 80px · each row is one whole bottle in the rack, name, grape and price, not a marketing button */
/* Hallmark · dismissed 76 · the Moules-frites and Vinothek Bernkastel photographs are Commons files whose licences (both CC BY-SA 4.0) were checked by hand and are credited in the footer */
/* Hallmark · dropped "Gert zegt" · the attribution under the quote already names him */
/* Hallmark · reworded "010203040506070809101112" to "123456789101112" · the drawn rack's 01 to 12 tags became the price list's row numbers */
/* Hallmark · finish-review: subagent · 7 findings · 7 resolved */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 answered (the head is the shop's own question, kept as written) */
/* Hallmark · motion (7 nov, Marcel's choice): calm · two primitives · dish change = 320ms crossfade, then the label pressed on like a sticker (460ms, lifted and turned 3deg, lands flat; only when in view) · rack = rows slide in 45ms apart, once on view · reduced motion: 150ms crossfade, no sticker, rack at once */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --radius-control: 8px;
  --hoogte-foto: min(66dvh, 600px);
  --breedte-etiket: 23rem;
  --rand-veld: 1.5px;
  --etiket-papier: var(--color-ink);
  --etiket-inkt: var(--color-paper);
  --etiket-grijs: color-mix(in oklab, var(--color-paper) 72%, var(--color-ink));
  --etiket-lijn: color-mix(in oklab, var(--color-paper) 35%, var(--color-ink));
}

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

a:hover { text-decoration-color: var(--color-accent); }

/* Controls: the pink fill, never a pill */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* The WinkelKlaar strip: this shop is a sample */
.demobalk { background: var(--color-paper-3); color: var(--color-ink-2); font-size: var(--text-sm); }
.demobalk .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-lg); min-height: 40px; padding-block: var(--space-xs); }
.demobalk a { color: var(--color-ink); white-space: nowrap; }

/* Nav: the name at one edge, the way in at the other */
.kop { border-bottom: var(--rule-hair) solid var(--color-rule); }
.kop .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.merk { display: grid; text-decoration: none; line-height: 1; }
.merk b { font: 400 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.merk small { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.kop__menu { display: flex; align-items: center; gap: var(--space-lg); }
.kop__menu a { text-decoration: none; font-weight: 500; white-space: nowrap; }
.kop__menu a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.kist { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-control); box-shadow: inset 0 0 0 var(--rand-veld) var(--color-ink-2); }
.kist b { font: 400 var(--text-lg)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 40rem) { .kop__menu a:not(.kist) { display: none; } }

/* Hero, Counter: the question and the dishes, then the dish with Gert's bottle laid over it */
.intro { min-height: calc(100dvh - 113px); display: grid; align-items: center; padding-block: var(--space-xl); }
.intro__in { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.intro__tekst { padding-top: var(--space-md); }
.intro h1 { font-size: var(--text-display); line-height: 1.02; max-width: 9ch; }
.intro .lead { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 26ch; }
.gerechten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-xl); max-width: 27rem; }
.gerechten button { min-height: 48px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rand-veld) var(--color-ink-2); font: 500 var(--text-lg)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.gerechten button:hover { background: var(--color-paper-3); }
.gerechten button:active { transform: translateY(1px); }
.gerechten button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.gerechten button:disabled { opacity: 0.55; cursor: not-allowed; }
.gerechten button[aria-pressed="true"] { background: var(--color-paper-3); box-shadow: inset 0 0 0 2px var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.naar-rek { display: inline-block; margin-top: var(--space-lg); color: var(--color-ink-2); }

.paar { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--breedte-etiket); align-items: center; }
.foto { margin: 0; border-radius: var(--radius-card); }
.foto > img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.paar__foto { grid-column: 1 / 3; grid-row: 1; height: var(--hoogte-foto); min-height: 460px; margin-right: calc(var(--breedte-etiket) - 10rem); }

/* The label: Gert's bottle as a paper wine label, laid over the dish */
.etiket { position: relative; z-index: var(--z-raised); grid-column: 2; grid-row: 1; padding: var(--space-xl); border-radius: 4px; background: var(--etiket-papier); color: var(--etiket-inkt); outline: var(--rule-hair) solid var(--etiket-inkt); outline-offset: calc(-1 * var(--space-xs)); }
.etiket::before { content: ""; position: absolute; inset: var(--space-sm); border: var(--rule-hair) solid var(--etiket-lijn); border-radius: 2px; pointer-events: none; }
.etiket h2 { font-size: var(--text-2xl); line-height: 1.08; max-width: 16ch; }
.etiket__druif { margin-top: var(--space-xs); color: var(--etiket-inkt); }
.etiket__druif i { font-family: var(--font-outlier); }
.etiket__streek { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--etiket-grijs); }
.etiket blockquote { margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--etiket-lijn); }
.wie { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--etiket-grijs); }
.etiket__koop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); }
.prijs { font: 400 var(--text-3xl)/1 var(--font-display); color: var(--etiket-inkt); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.etiket .btn:focus-visible { outline-color: var(--etiket-inkt); }
.voorraad { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--etiket-inkt); }
.voorraad.weinig { font-weight: 600; }
.kistmelding { min-height: 1lh; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--etiket-grijs); }

@media (max-width: 60rem) {
  .intro { min-height: 0; padding-block: var(--space-lg) var(--space-2xl); }
  .intro__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  /* on a phone the dishes come straight under the question, then the dish with its bottle */
  .intro__tekst { display: contents; }
  .intro h1 { order: 1; } .intro .lead { order: 2; margin-top: calc(-1 * var(--space-sm)); }
  .gerechten { order: 3; margin-top: 0; } .naar-rek { order: 4; margin-top: calc(-1 * var(--space-xs)); }
  .paar { order: 5; grid-template-columns: minmax(0, 1fr); }
  .paar__foto { grid-column: 1; height: auto; min-height: 0; aspect-ratio: 16 / 10; margin-right: 0; }
  .etiket { grid-column: 1; grid-row: 2; margin: calc(-1 * var(--space-xl)) var(--space-md) 0; }
}
@media (max-width: 40rem) {
  .etiket { margin-inline: var(--space-xs); padding: var(--space-lg); }
  .demobalk a:first-child { display: none; }
}

/* The rack, typeset: twelve bottles as a price list, two columns deep */
.rek { padding-block: var(--section-gap) var(--section-gap-s); }
.rek__kop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: end; }
.rek__kop .lead { color: var(--color-ink-2); }
.rek__lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.rek__lijst li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.vak { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-md); width: 100%; min-height: 80px; padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-ink); text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.vak:hover { background: var(--color-paper-2); }
.vak:active { transform: translateY(1px); }
.vak:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.vak:disabled { opacity: 0.55; cursor: not-allowed; }
.vak__nr { font: 400 var(--text-lg)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: lining-nums tabular-nums; }
.vak__naam { font: 400 var(--text-title)/1.15 var(--font-display); letter-spacing: var(--tracking-display); min-width: 0; overflow-wrap: break-word; }
.vak__naam i { display: block; margin-top: var(--space-2xs); font: italic 400 var(--text-sm)/1.3 var(--font-outlier); letter-spacing: 0; color: var(--color-ink-2); }
.vak__prijs { font: 400 var(--text-lg)/1 var(--font-display); color: var(--color-accent); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.vak__past:empty { display: none; }
.vak__past { padding: var(--space-2xs) var(--space-xs); border-radius: 4px; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.vak[aria-pressed="true"] { background: var(--color-paper-3); }
.kiest .vak:not(.past) .vak__naam, .kiest .vak:not(.past) .vak__naam i, .kiest .vak:not(.past) .vak__prijs { color: var(--color-muted); }
.kiest .vak:not(.past):hover .vak__naam { color: var(--color-ink-2); }
@media (max-width: 60rem) {
  .rek__kop { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .rek__lijst { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .vak { grid-template-columns: 1.75rem minmax(0, 1fr) auto; padding-inline: var(--space-xs); }
  .vak__past { grid-column: 2; grid-row: 2; justify-self: start; }
}

/* Pick up or delivery: a bento, the rack's photograph leading */
.afhalen { padding-block: 0 var(--section-gap); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(300px, auto) minmax(300px, auto); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.bento__foto { grid-column: 1 / 7; grid-row: 1 / 3; min-height: 640px; }
.tegel { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.tegel--bezorgen { grid-column: 7 / 13; }
.tegel:nth-of-type(2) { grid-column: 7 / 10; }
.tegel:nth-of-type(3) { grid-column: 10 / 13; }
.tegel h3 { font-size: var(--text-title); }
.tegel p:not(.getal) { color: var(--color-ink-2); max-width: 38ch; }
.getal { margin-bottom: auto; font: 400 calc(var(--text-display) * 2.2)/0.86 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: lining-nums; }
.getal--klein { font-size: var(--text-display); }
@media (max-width: 60rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .bento__foto { grid-column: 1 / 3; grid-row: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .tegel--bezorgen { grid-column: 1 / 3; }
  .tegel:nth-of-type(2), .tegel:nth-of-type(3) { grid-column: auto; }
}
@media (max-width: 40rem) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__foto, .tegel--bezorgen { grid-column: 1; }
  .tegel { padding: var(--space-lg); }
}

/* Tastings: a grained band, the dates as a timetable */
.proeven { position: relative; isolation: isolate; padding-block: var(--section-gap-s); background: var(--color-paper-3); }
.proeven::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain); mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
.proeven__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.proeven__kop .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.agenda { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.agenda li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.datum time { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.datum b { font: 400 var(--text-2xl)/1 var(--font-display); color: var(--color-ink); font-variant-numeric: lining-nums; }
.agenda h3 { font-size: var(--text-title); }
.agenda li p:not(.datum) { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.plek { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-control); box-shadow: inset 0 0 0 var(--rand-veld) var(--color-ink-2); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out); }
.plek:hover { background: var(--color-paper-2); }
.plek:active { transform: translateY(1px); }
@media (max-width: 60rem) {
  .proeven__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .agenda li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .plek { justify-self: start; }
}

/* The buy bar: the chosen bottle follows you down the page */
.balk { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); transform: translateY(110%); transition: transform var(--dur-short) var(--ease-out); }
.balk.is-in { transform: none; }
html:not(.js) .balk { display: none; }
.balk__in { display: flex; align-items: center; gap: var(--space-lg); min-height: 72px; padding-block: var(--space-sm); }
.balk__fles { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-md); }
.balk__fles b { font: 400 var(--text-lg)/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balk__fles span { font: 400 var(--text-lg)/1 var(--font-display); color: var(--color-accent); white-space: nowrap; }
.balk__kist { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
@media (max-width: 40rem) { .balk__kist { display: none; } .balk__in { gap: var(--space-sm); } }

/* Statement footer */
.slot { padding-block: var(--space-3xl) calc(var(--space-3xl) + 72px); border-top: var(--rule-hair) solid var(--color-rule); }
.slot__zin { font: 400 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); max-width: 18ch; }
.slot__rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xl); color: var(--color-ink-2); }
.slot [data-credits] { margin-top: var(--space-lg); max-width: 90ch; font-size: var(--text-xs); color: var(--color-muted); }
.slot [data-credits] a { color: var(--color-muted); }

/* Motion: the label is pressed onto the dish (script); the bottles slide into the rack once */
.etiket { transform-origin: 30% 20%; }
.vult .rek__lijst > li { opacity: 0; }
.gevuld .rek__lijst > li { animation: inrek 380ms var(--ease-out) both; }
@keyframes inrek { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .btn, .gerechten button, .vak, .plek, .balk { transition: none; }
  .vult .rek__lijst > li, .gevuld .rek__lijst > li { opacity: 1; animation: none; }
}