/* Hallmark · shape: Photographic (draw a463b8) · genre: editorial · theme: Almanac (deal 2/3, seed neighbourhood-hair-salon-where-a08e·974abdc7·2026-11-06·r0) · redesign: full · job: book
 * hero: Ledge · nav: banner over a retracting bar · footer: index columns · imagery: photographs, Wikimedia 2, muted · signature: the salon's next free times set as an appointment book right under the scissors, one tap from the booking
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · swapped the draw's banner for the shared WinkelKlaar sample strip · every sample site carries that strip; a second banner would push the hero head below the fold at 1280 x 800 */
/* Hallmark · dropped #spiegel drawing, the lamps, the polaroids and "tot zo!" · drawn illustrations (80); the id now sits on the hero photograph */
/* Hallmark · dropped "Op de spiegel geschreven" · the three sample reviews under it were invented testimonials (46a), and the owner allows no made-up reviews */
/* Hallmark · dropped the drawn route map · a drawing (80); its facts (naast het plein, gratis parkeren) are in the address and the lead */
/* Hallmark · reworded "Wanneer? Tik op een lampje dat brandt." to "Wanneer? Tik op een tijd die vrij is." and "Dan branden de meeste lampjes." to "Dan zijn de meeste tijden vrij." · the lamps are gone */
/* Hallmark · reworded "Knippen, kleuren of je baard bijwerken. Kies wat je wilt en bij wie. Waar een lampje brandt, is plek." to "Knippen, kleuren of je baard bijwerken. Kies wat, bij wie en wanneer." · 58 caps the hero line at twelve words */
/* Hallmark · reworded "Vandaag nog 3 plekken vrij" to the live free times under "Vandaag nog vrij" · the count is now the times themselves */
/* Hallmark · reworded headings "Knippen", "Kleuren", "Baard" and "Open" to table group heads and a table caption · the price board and the hours are tables now */
/* Hallmark · reworded "30 min · vanaf € 32,50", "Pinnen of contant · cadeaubon aan de balie", "Voorbeelddorp · 0000 000 000" and "Voorbeeld van WinkelKlaar · deze zaak bestaat niet" to columns and full stops · 63 names the middle dots */
/* Hallmark · reworded "9.00 – 17.30" and the other hours to "9.00 tot 17.30" · 19 names the dash */
/* Hallmark · reworded "← Alle voorbeelden" to "Alle voorbeelden" · 63 names the glued arrow */
/* Hallmark · waive 39b · button.rij rows stand 64px · each row is a whole treatment or hairdresser in a list, name, time and price, not a marketing button */
/* Hallmark · finish-review: subagent · 5 findings · 5 resolved */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 answered (the head is the salon's own line, kept as written) */
/* Hallmark · waive 77 · section.route holds the address at display size and seven ruled rows of hours · a photo there would make two photograph-led beats in three sections */
/* Hallmark · dismissed 76 · the Cutting hair (CC BY 2.0, FlickreviewR passed) and Hair salon Arlington (CC0) photographs are Commons files whose licences were checked by hand and are credited in the footer */
/* Hallmark · motion (7 nov, Marcel's choice): calm · one primitive, the pen · free times in the hero write in left to right (clip-path, 420ms, rows 170ms apart, once on load) · a chosen time gets a 2px stroke (300ms) before the next step, and the choice writes itself onto the slip · reduced motion: no writing, the stroke appears at once */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a salon has no product to show; the scissors in the hero and the free times under them carry it, and the booking is the page's working thing */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --hoogte-veld: clamp(240px, calc(100dvh - 520px), 520px);
  --hoogte-zaak: clamp(360px, 72dvh, 780px);
  --rand-licht: color-mix(in oklab, var(--color-paper) 22%, var(--color-ink));
  --tekst-licht: color-mix(in oklab, var(--color-paper) 80%, var(--color-ink));
  --focus-licht: oklch(82% 0.09 350);
  --blad-hover: color-mix(in oklab, var(--color-sheet) 55%, var(--color-paper-2));
}

body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); }
.getal { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

.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 { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

/* Controls: magenta filled, ink outlined, 2px corners */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-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; }
.btn--primair { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primair:hover { border-color: var(--color-accent-2); background: var(--color-accent-2); }
.btn--stil { min-height: 44px; }

/* A free time: a figure you can tap */
.tijdknop, .tijd { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-lg)/1 var(--font-outlier); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tijdknop:hover, .tijd:hover { background: var(--color-paper-2); }
.tijdknop:active, .tijd:active { transform: translateY(1px); }
.tijdknop:focus-visible, .tijd:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.tijd[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.tijd:disabled { border-color: var(--color-rule); background: var(--color-paper-2); color: var(--color-muted); text-decoration: line-through; cursor: not-allowed; transform: none; }

/* The WinkelKlaar strip: the banner over the bar */
.demobalk { background: var(--color-ink); color: var(--tekst-licht); 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-sheet); white-space: nowrap; }
.demobalk a:focus-visible { outline-color: var(--focus-licht); }

/* Nav: one line that slides away on the way down */
.kop { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule-2); transition: transform var(--dur-short) var(--ease-out); }
.kop.is-weg { transform: translateY(-100%); }
.kop__in { display: flex; align-items: center; gap: var(--space-xl); min-height: 64px; }
.merk { font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); }
.kop__menu { display: flex; gap: var(--space-lg); margin-left: auto; }
.kop__menu a { text-decoration: none; font-weight: 500; }
.kop__menu a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
@media (max-width: 40rem) { .kop__menu { display: none; } .kop .btn--stil { margin-left: auto; } }

/* Hero, Ledge: the scissors as a tall field, the head resting under it */
.intro { padding-bottom: var(--space-xl); }
.foto { margin: 0; border-radius: var(--radius-card); }
[data-slot] > img { filter: saturate(0.45) contrast(0.96) brightness(0.97); }
.foto > img { outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.intro__foto { height: var(--hoogte-veld); }
.intro__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; padding-top: var(--space-lg); }
.intro h1 { font-size: var(--text-display); letter-spacing: -0.035em; line-height: 0.95; max-width: 11ch; }
.intro .lead { margin-top: var(--space-lg); max-width: 36ch; }
.vrij { display: grid; gap: var(--space-sm); justify-items: start; padding-top: var(--space-md); border-top: var(--rule-bar) solid var(--color-rule-2); }
.vrij { justify-items: stretch; }
.vrij .btn { justify-self: start; }
.vrij__kop { font: 600 var(--text-lg)/1.2 var(--font-display); color: var(--color-ink); }
.boek { list-style: none; margin: 0 0 var(--space-xs); padding: 0 var(--space-sm); background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); }
.boek li:last-child .boek__rij { border-bottom: 0; }
.boek__rij { display: grid; grid-template-columns: 4.5rem 5.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-md); width: 100%; min-height: 48px; padding: var(--space-xs); border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.boek__rij .getal { font-weight: 500; font-size: var(--text-lg); }
.boek__rij b { font-weight: 500; }
.boek__wat { font-size: var(--text-sm); color: var(--color-muted); }
.boek__rij:hover { background: var(--blad-hover); }
.boek__rij:hover b { text-decoration: underline; text-decoration-color: var(--color-accent); }
.boek__rij:active { transform: translateY(1px); }
.boek__rij:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.boek__rij:disabled { opacity: 0.55; cursor: not-allowed; }
.vrij__noot { font-size: var(--text-sm); color: var(--color-muted); }

/* Booking: the ledger beside the sheet */
.boeken { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.boeken__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.boeken__kant { position: sticky; top: calc(64px + var(--space-xl)); }
.boeken__kant .lead { margin-top: var(--space-md); }
.voortgang { list-style: none; margin: var(--space-xl) 0 0; padding: 0; border-top: var(--rule-bar) solid var(--color-rule-2); }
.voortgang li { display: grid; grid-template-columns: var(--space-xl) 6rem minmax(0, 1fr); align-items: baseline; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.voortgang span { font: 500 var(--text-sm)/1 var(--font-outlier); color: var(--color-muted); }
.voortgang b { font-weight: 500; color: var(--color-ink); }
.voortgang em { font-style: normal; color: var(--color-muted); overflow-wrap: anywhere; }
.voortgang li.ok em { color: var(--color-ink); }
.voortgang li.is-nu span { color: var(--color-accent); }

.blad { min-width: 0; background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); padding: var(--space-xl); }
.stap { display: none; }
.stap.actief { display: block; }
.stap h3 { margin-bottom: var(--space-lg); font-size: var(--text-2xl); outline: none; }
.stap h3:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.rijen { border-top: var(--rule-bar) solid var(--color-rule-2); }
.rij { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 9rem; align-items: baseline; gap: var(--space-md); width: 100%; min-height: 64px; padding: var(--space-md) var(--space-sm); border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink-2); text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.rij:hover { background: var(--blad-hover); }
.rij:active { transform: translateY(1px); }
.rij:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.rij:disabled { opacity: 0.55; cursor: not-allowed; }
.rij[aria-pressed="true"] { background: var(--color-paper-2); }
.rij[aria-pressed="true"] b { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.rij b { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.rij .getal { text-align: right; white-space: nowrap; }
.rij--wie { grid-template-columns: 11rem minmax(0, 1fr); }
.rij .zin { font-size: var(--text-md); line-height: 1.45; }

.dagen { display: flex; gap: var(--space-xs); overflow-x: auto; padding-bottom: var(--space-xs); margin-bottom: var(--space-lg); scrollbar-width: thin; }
.dag { flex: 0 0 auto; display: grid; justify-items: center; align-content: center; gap: var(--space-3xs); min-width: 52px; min-height: 52px; padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.dag span { font-size: var(--text-sm); line-height: 1; color: var(--color-muted); }
.dag b { font-weight: 500; font-size: var(--text-lg); line-height: 1; }
.dag:hover { background: var(--color-paper-2); }
.dag:active { transform: translateY(1px); }
.dag:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.dag:disabled { opacity: 0.55; cursor: not-allowed; }
.dag[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-sheet); }
.dag[aria-pressed="true"] span { color: var(--tekst-licht); }
.tijden { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: var(--space-xs); }
.tijdnoot { min-height: 1lh; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

.verder { margin-top: var(--space-lg); }
.terug { min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; cursor: pointer; }
.terug:hover { text-decoration-thickness: 2px; }
.terug:active { transform: translateY(1px); }
.terug:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.terug:disabled { opacity: 0.55; cursor: not-allowed; }

.bon { margin-bottom: var(--space-lg); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink); max-width: 40ch; }
.formulier { display: grid; gap: var(--space-md); max-width: 28rem; justify-items: start; }
.veld { display: grid; gap: var(--space-2xs); width: 100%; }
.veld label { font-weight: 500; font-size: var(--text-sm); color: var(--color-ink); }
.veld input { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.veld input:hover { border-color: var(--color-ink); }
.veld input:focus-visible { outline-color: var(--color-focus); }
.veld input:user-invalid { border-color: var(--color-error); }
.klaar { max-width: 46ch; }

/* The room, full-bleed, no head */
.zaak__foto { height: var(--hoogte-zaak); }
.onderschrift { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* Prices: the head across the top, the board as three columns on the sheet */
.prijzen { padding-block: var(--section-gap-s); }
.prijzen__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-lg) var(--space-3xl); }
.prijzen__kant { display: contents; }
.prijzen h2 { align-self: end; }
.prijzen .lead { align-self: end; }
.prijzen__noot { grid-column: 2; font-size: var(--text-sm); color: var(--color-muted); }
.prijzen .blad--tabel { grid-column: 1 / -1; margin-top: var(--space-xl); }
.lijst { width: 100%; border-collapse: collapse; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-2xl); }
.lijst thead { display: none; }
.lijst tbody { display: block; }
.lijst tr { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.lijst tr.groep { padding-block: 0 var(--space-sm); border-bottom: var(--rule-bar) solid var(--color-rule-2); }
.lijst th[scope="rowgroup"] { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-align: left; }
.lijst td { padding: 0; font-size: var(--text-lg); }
.lijst td.getal { text-align: right; color: var(--color-ink); }
.lijst tr.uitgelicht td { color: var(--color-accent); }

/* Visiting: the one ink band, the hours as a printed table */
.route { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--tekst-licht); --color-focus: var(--focus-licht); }
.route h2 { color: var(--color-sheet); }
.route__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: start; }
.route .lead { margin-top: var(--space-md); }
.adres { margin: var(--space-xl) 0 var(--space-lg); font-style: normal; font-size: var(--text-lg); line-height: 1.5; }
.adres b { display: block; margin-bottom: var(--space-xs); font: 600 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-sheet); }
.uren { width: 100%; border-collapse: collapse; }
.uren caption { padding-bottom: var(--space-sm); border-bottom: var(--rule-bar) solid var(--rand-licht); font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-sheet); text-align: left; }
.uren th, .uren td { padding: var(--space-sm) var(--space-xs); border-bottom: var(--rule-hair) solid var(--rand-licht); font-size: var(--text-lg); }
.uren th { font-weight: 400; text-align: left; }
.uren td { text-align: right; color: var(--color-sheet); }
.uren tr.vandaag th, .uren tr.vandaag td { color: var(--color-sheet); font-weight: 500; }
.vandaag__label { display: inline-block; margin-left: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.2; }

/* Footer: index columns */
.voet { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-bar) solid var(--color-rule-2); font-size: var(--text-md); }
.voet__kolommen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl) var(--space-3xl); }
.voet__merk { margin-bottom: var(--space-sm); font: 600 var(--text-2xl)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.voet__kop { margin-bottom: var(--space-sm); font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.voet__fotos { margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
.voet__fotos a { color: var(--color-muted); }

/* Phone: the booking stays one thumb away */
.mobiel { display: none; }
@media (max-width: 40rem) {
  .mobiel { display: block; position: fixed; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); z-index: var(--z-sticky); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
  .mobiel .btn { width: 100%; }
  .mobiel.is-weg { transform: translateY(150%); opacity: 0; pointer-events: none; }
  .voet { padding-bottom: calc(var(--space-2xl) + 72px); }
}

@media (max-width: 60rem) {
  .intro__in, .boeken__in, .route__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .boeken__kant { position: static; }
  .prijzen__in { grid-template-columns: minmax(0, 1fr); }
  .prijzen__noot { grid-column: 1; }
  .lijst { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .voet__kolommen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voet__kolommen > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  :root { --hoogte-veld: 180px; --hoogte-zaak: 300px; }
  .boek__wat { display: none; }
  .blad { padding: var(--space-lg) var(--space-md); }
  .rij { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2xs); }
  .rij .getal:first-of-type { grid-row: 2; text-align: left; color: var(--color-muted); }
  .rij--wie { grid-template-columns: minmax(0, 1fr); }
  .boek li:nth-child(n+3) { display: none; }
  .voet__kolommen { grid-template-columns: minmax(0, 1fr); }
}
/* Motion: the pen. Free times and choices write themselves in; a chosen time gets one magenta stroke through it */
.boek__rij, .tijd { position: relative; }
.boek__rij::after, .tijd::after { content: ""; position: absolute; left: var(--space-xs); right: var(--space-xs); top: 50%; height: 2px; margin-top: -1px; background: var(--streep, var(--color-accent)); transform: scaleX(0); transform-origin: left center; transition: transform 300ms var(--ease-out); pointer-events: none; }
.tijd::after { --streep: currentColor; left: var(--space-sm); right: var(--space-sm); }
.boek__rij.streept::after, .tijd.streept::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) { .kop, .mobiel, .boek__rij::after, .tijd::after { transition: none; } }