/* Hallmark · shape: Narrative Workflow (draw 5616df) · genre: editorial · theme: Ink (deal 1/3, seed neighbourhood-florist-where-you-85a2·974abdc7·2026-11-06·r0) · redesign: full · job: buy
 * hero: Stage · nav: masthead · footer: letter close · imagery: photographs, Wikimedia 6, natural · signature: the real bouquet photograph that changes with the feeling you pick · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · 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 three numbered stages make the order itself the argument */
/* Hallmark · waive 44c · the whole text column, picker, size and button included, centres within 30px of the bouquet photograph · the measured block stops at the lead, above the picker that is the hero's real content */
/* Hallmark · swapped the draw's sticky buy bar for the order in stage 3 · the order follows the hero directly, so the bar sat hidden almost all the way down */
/* Hallmark · waive 22 · ink and greys at zero chroma · the order slip is printed in plain black so only the flowers carry colour */
/* Hallmark · dropped .reviews, #stelen · the three example reviews were invented quotes (46a) and the drawn bouquet is replaced by photographs */
/* Hallmark · reworded "← Alle voorbeelden" to "Alle voorbeelden" · 63 names the glued arrow */
/* Hallmark · reworded "13:00 – 18:00" to "13:00 tot 18:00" in the hours · 19 names the dash */
/* Hallmark · reworded "Wat wil je zeggen?" to "1. Wat wil je zeggen?" and "Met een kaartje erbij" to "2. Schrijf het kaartje" · the shape numbers its stages in the heading */
/* Hallmark · reworded "Kom langs" to "Kom langs in Schoorldam" · the finish review named the head as one any shop could carry */
/* Hallmark · reworded "Openingstijden" to a table caption · the hours table names itself beside "Kom langs" */
/* Hallmark · dropped "Wat klanten zeggen", stelen · 46a names invented reviews; the drawn bouquet became photographs */
/* Hallmark · finish-review: subagent · 7 findings · 7 resolved */
/* Hallmark · motion (7 nov, Marcel's choice): calm · two primitives, both answer a choice · bouquet swap = clip-path wipe from the right with a paper edge, 560ms ease-out · card = line by line, letters 24ms apart, once on view and again after a new feeling · reduced motion: 150ms crossfade, card at once */
/* Hallmark · reworded the hero line and the five bouquet texts · 58 caps the hero line, and each text now names the flowers in its photograph */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --radius-control: 10px;
  --hero-foto: min(64dvh, 640px);
}

/* The flowers keep their own colour: the theme mutes photographs, a florist cannot */
[data-slot] > img { filter: none; }

.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 { font-weight: 600; }
a:hover { text-decoration-color: var(--color-accent); }

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

.kies { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; border: 0; }
.formaat button { padding: 0 var(--space-sm); }
.kies button { min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.kies button:hover { border-color: var(--color-muted); background: var(--color-paper-2); }
.kies button:active { transform: translateY(1px); }
.kies button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.kies button:disabled { opacity: 0.55; cursor: not-allowed; }
.kies button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-soft-ink); box-shadow: inset 0 0 0 1px var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.25em; }
.kies__label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }

/* The WinkelKlaar strip: this shop is a sample */
.demobalk { background: var(--color-ink); color: var(--color-paper); 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-paper); white-space: nowrap; }

/* Masthead: the shop's name large in the middle, the way in at both edges */
.mast { border-bottom: var(--rule-hair) solid var(--color-ink); }
.mast .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-lg); min-height: 80px; }
.mast__links { display: flex; gap: var(--space-lg); }
.mast__links a, .mast__rechts a { text-decoration: none; }
.mast__links a:hover, .mast__rechts a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.merk { display: grid; justify-items: center; text-decoration: none; color: var(--color-ink); line-height: 1; }
.merk b { font: 700 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.merk small { margin-top: var(--space-2xs); font-weight: 400; font-size: var(--text-sm); color: var(--color-ink-2); }
.mast__rechts { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-lg); }
.open { font-size: var(--text-sm); color: var(--color-ink-2); }
.open:empty { display: none; }
@media (max-width: 48rem) {
  .mast .container { grid-template-columns: auto minmax(0, 1fr); }
  .mast__links, .open { display: none; }
  .merk { justify-items: start; }
}

/* Stage 1, the hero: the picker on five columns, the bouquet on seven */
.boeket { min-height: calc(100dvh - 121px); display: grid; align-items: center; padding-block: var(--space-xl); }
.boeket__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.boeket h1 { font-size: var(--text-display); line-height: 1; max-width: 11ch; }
.boeket .lead { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 30ch; }
.boeket .kies-blok { margin-top: var(--space-lg); }
.boeket .kies-blok:first-of-type .kies__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.boeket__uitleg { margin-top: var(--space-lg); max-width: 40ch; color: var(--color-ink-2); }
.door { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.boeket__koop { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md); margin-top: var(--space-lg); }
.boeket__koop .kies-blok { margin-top: 0; }

.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; }
.boeket__foto { height: var(--hero-foto); min-height: 440px; }
.boeket__foto > img { transform: scale(var(--zoom, 1)); transform-origin: var(--zoom-at, 50% 50%); }
.boeket__onder { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-top: var(--space-md); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-ink); }
.boeket__onder h2 { font-size: var(--text-title); line-height: 1.2; max-width: none; }
.prijs { font: 700 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 60rem) {
  .boeket { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  /* on a phone the bouquet sits right under the question, so a tap on a feeling shows its flowers */
  .boeket__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .boeket__in > div:first-child { display: contents; }
  .boeket h1 { order: 1; }
  .boeket .lead { order: 2; margin-top: calc(-1 * var(--space-xs)); }
  .boeket__in > div:last-child { order: 3; }
  .boeket__in > div:first-child > .kies-blok { order: 4; margin-top: 0; }
  .boeket__in > div:first-child > [aria-live] { order: 5; }
  .boeket__uitleg { margin-top: 0; }
  .boeket__koop { order: 6; margin-top: 0; }
  .boeket__foto { height: auto; min-height: 0; aspect-ratio: 4 / 3.4; }
}

/* Stages 2 and 3 */
.stap { padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-ink); }
.stap__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl) var(--space-3xl); align-items: start; }
.stap h2 { font-size: var(--text-section); }
.stap .lead { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 34ch; }
@media (max-width: 60rem) { .stap__in { grid-template-columns: minmax(0, 1fr); } }

/* The card, as Anne will write it */
.kaartje { position: relative; display: flex; flex-direction: column; justify-content: space-between; margin-top: var(--space-2xl); padding: var(--space-xl) var(--space-xl) var(--space-lg); width: min(100%, 26rem); aspect-ratio: 3 / 2; background: var(--color-paper); border: var(--rule-hair) solid var(--color-ink); border-radius: 4px; }
.kaartje::before { content: ""; position: absolute; top: var(--space-md); right: var(--space-md); width: 12px; height: 12px; border: var(--rule-hair) solid var(--color-ink); border-radius: 50%; }
.kaartje .aan, .kaartje .van { font-size: var(--text-lg); color: var(--color-ink-2); }
.kaartje .tekst { margin-block: var(--space-sm); font: 400 var(--text-xl)/1.3 var(--font-body); white-space: pre-wrap; overflow-wrap: break-word; }
.kaartje .van { text-align: right; }

.velden { display: grid; gap: var(--space-lg); }
.veld span { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.veld input, .veld textarea { display: block; width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: 1px; }
.veld textarea { min-height: 7.5rem; resize: vertical; }
.veld input:hover, .veld textarea:hover { border-color: var(--color-ink-2); }
.veld input:focus-visible, .veld textarea:focus-visible { outline-color: var(--color-focus); }
.veld input:disabled, .veld textarea:disabled { opacity: 0.55; cursor: not-allowed; background: var(--color-paper-3); }
.veld input::placeholder, .veld textarea::placeholder { color: var(--color-muted); opacity: 1; }
.teller { margin-top: calc(-1 * var(--space-md)); font-size: var(--text-sm); color: var(--color-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Stage 3 on the second paper: when it arrives, set as large as the price */
.stap--3 { background: var(--color-paper-2); }
.wanneer { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); max-width: 26rem; }
.wanneer b { display: block; font: 700 var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.02em; }
.wanneer span { display: block; margin-top: var(--space-sm); color: var(--color-ink-2); max-width: 36ch; }

.keuze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; border: 0; }
@media (max-width: 40rem) { .keuze { grid-template-columns: minmax(0, 1fr); } }
.keuze legend { margin-bottom: var(--space-xs); padding: 0; font-size: var(--text-sm); font-weight: 600; }
.keuze label { display: block; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); cursor: pointer; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.keuze label:hover { border-color: var(--color-muted); }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze b { display: block; font-size: var(--text-lg); }
.keuze small { font-size: var(--text-sm); color: var(--color-ink-2); }
.keuze label:has(input:checked) { border-color: var(--color-accent); color: var(--color-accent-soft-ink); box-shadow: inset 0 0 0 1px var(--color-accent); }
.keuze label:has(input:checked) small { color: var(--color-accent-soft-ink); }
.keuze label:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.keuze label:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

.som { width: 100%; margin-top: var(--space-xl); border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); font-variant-numeric: tabular-nums; }
.som th, .som td { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; }
.som td { text-align: right; white-space: nowrap; }
.som__totaal th { font-weight: 700; }
.som__totaal td { font: 700 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.bestel { margin-top: var(--space-lg); }
.knop { width: 100%; font-size: var(--text-lg); }
.zeker { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.melding { min-height: 1lh; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink); }

/* Visit: the shop beside its hours */
.winkel { padding-block: var(--section-gap) var(--section-gap-s); }
.winkel__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.winkel__foto { aspect-ratio: 4 / 3; min-height: 440px; }
.winkel__foto > img { object-position: 50% 30%; }
.winkel h2 { font-size: var(--text-section); }
.winkel .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.tijden { width: 100%; margin-top: var(--space-xl); border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); font-variant-numeric: tabular-nums; }
.tijden th, .tijden td { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; }
.tijden td { text-align: right; color: var(--color-ink-2); }
.tijden tr.nu th, .tijden tr.nu td { font-weight: 700; color: var(--color-ink); }
.tijden .vandaag { display: none; margin-left: var(--space-xs); padding: 0 var(--space-xs); border-radius: 4px; background: var(--color-accent-soft); color: var(--color-accent-soft-ink); font-size: var(--text-sm); font-weight: 600; }
.tijden tr.nu .vandaag { display: inline-block; }
.adres { margin-top: var(--space-lg); color: var(--color-ink-2); }
.adres__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xs); }
@media (max-width: 60rem) {
  .winkel { padding-block: var(--section-gap-s); }
  .winkel__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .winkel__foto { min-height: 0; }
}


/* Letter close */
.slot { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-hair) solid var(--color-ink); }
.slot__groet { font: 700 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.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 { font-weight: 400; color: var(--color-muted); white-space: nowrap; }

/* Motion: two moments, both tied to a choice. The bouquet arrives like a sheet of wrapping paper; the card writes itself */
.vel-rand { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; z-index: 2; pointer-events: none; background: var(--color-paper); box-shadow: -1px 0 0 color-mix(in oklab, var(--color-ink) 14%, transparent); }
.kaartje.wacht .aan, .kaartje.wacht .tekst, .kaartje.wacht .van { opacity: 0; }
.kaartje.schrijft .aan { animation: inkt var(--dur-long) var(--ease-out) both; }
.kaartje.schrijft .tekst .woord { white-space: nowrap; }
.kaartje.schrijft .tekst .woord > span { animation: inkt 180ms var(--ease-out) both; }
.kaartje.schrijft .van { animation: inkt var(--dur-long) var(--ease-out) both; }
@keyframes inkt { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .btn, .kies button, .keuze label { transition: none; }
  .kaartje .aan, .kaartje .tekst, .kaartje .van, .kaartje .woord > span { opacity: 1 !important; animation: none !important; }
}