/* Hallmark · shape: Catalogue (draw 48ae44) · genre: editorial · theme: brand · job: visit · pages: index, bloem, producten, yoga, il-sogno × nl, en, it
 * paper: #FFFFFF (wit) · accent: #1784D3 (jongensblauw) · display: Hanken Grotesk · body: Alegreya Sans · hero: Poster (/), Stage (bloem, producten, yoga), Ledge (il-sogno) · nav: banner over a retracting bar · footer: index columns · signature: the business card lying on the photograph of Bloem, holding the lunch hours
 * axes: light/grotesk-sans/cool · posture: Restrained · surface: absolute · contrast: pass · fold: pass · imagery: photographs, the user's own 8, natural · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a lunch page argues little; the card on the photograph says where and when before anything else, and the menu follows with its prices */
/* Hallmark · waive 7b · surface: absolute stamped, ink #242424 on wit 15.5:1 · wit #FFFFFF is the paper of Rianne's lunch card and the guide's token wit */
/* Hallmark · waive 24b · one value off the 4px scale, the token --space-2 · 18px is the lunch card's own padding from the LubertiArte guide, kept for the menu blocks */
/* Hallmark · waive 78 · below the hero each h2 names a page part in the guide's title style at 44px, the menu and product names keep the 16px kop style · the lunch card's two sizes from the LubertiArte guide */
/* Hallmark · dismissed 25 · each .section-head p is a one-sentence lede, allowed from 28ch, set at 34ch */
/* Hallmark · dismissed render · Google Fonts cannot be reached from the build machine; the render shots use out-test with the same two faces inlined */
/* Hallmark · dismissed 77 · inner pages of a five-page site carry one subject each, the landing (index) has six sections */
/* Hallmark · dismissed 41 · the accent fills only 2px rules (the card's line, the menu's line) and never sits under text */

:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --space-1: 8px; --space-2: 18px; --space-3: 36px; --space-4: 56px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 3vw + 0.75rem, 3.75rem); --text-display: clamp(2.5rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 1.5vw + 1.25rem, 2.75rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.1875rem, 0.35vw + 1rem, 1.375rem);
  --text-statement: clamp(1.75rem, 2.2vw + 1rem, 2.875rem);
  --text-index: 1.5rem; --text-kop: 1rem; --text-lijst: 0.9375rem; --text-label: 0.8125rem; --text-nav: 1rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --bar-height: 72px;
  --color-paper: #FFFFFF;      /* wit */
  --color-paper-2: #AADBFF;    /* lichtblauw: vlakken, spaarzaam */
  --color-paper-3: #AADBFF;
  --color-ink: #242424;        /* bijna-zwart: alle tekst */
  --color-ink-2: #242424;
  --color-muted: #616161;      /* grijs: bijtekst, alleen op wit */
  --color-rule: #2424242E;     /* lijn */
  --color-accent: #1784D3;     /* jongensblauw: lijnen */
  --color-focus: #1784D3;
  --color-logo: #1D2530;       /* logo-donker */
  --color-gold: #A78150;       /* goud: logo en bloemetje */
  --color-error: #B3261E; --color-success: #2E7D4F;
  --font-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Alegreya Sans", "Gill Sans", sans-serif;
  --font-outlier: var(--font-body);
  --display-weight: 300; --tracking-display: 0.14em; --tracking-kop: 0.1em; --tracking-plaats: 0.16em; --tracking-label: 0.14em;
  --radius-card: 0px; --radius-pill: 0px; --rule-hair: 1px; --shadow-card: none; --line-accent: 2px;
  color-scheme: light;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: calc(var(--bar-height) + var(--space-lg)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.6; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; text-transform: uppercase; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.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); }
.bloemetje { width: var(--space-lg); height: auto; color: var(--color-gold); flex-shrink: 0; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.well .fill { color: var(--color-ink); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklab, var(--color-muted) 70%, transparent); color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* controls: one filled primary a page, the rest typographic */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out); }
.btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.btn:active { transform: translateY(1px); }
.btn--quiet { background: transparent; color: var(--color-ink); }
.more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; white-space: nowrap; }
.more:active, .btn--quiet:active { color: var(--color-muted); }

/* ---- chrome: a banner over a bar that retracts ---- */
.banner { background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.banner .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-lg); padding-block: var(--space-xs); }
.banner a { text-decoration: none; }
.banner a:hover { text-decoration: underline; }
.hint a { text-decoration: underline; }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); transition: transform var(--dur-short) var(--ease-out); }
.bar.is-hidden { transform: translateY(-100%); }
.bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-xl); min-height: var(--bar-height); }
.brand { display: block; color: var(--color-logo); }
.brand svg { width: 150px; height: auto; }
.bar nav { display: flex; align-items: center; gap: var(--space-xl); }
.pages { display: flex; gap: var(--space-lg); font-size: var(--text-nav); }
.pages a, .langs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.pages a:hover, .langs a:hover { text-decoration: underline; }
.pages a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.langs { display: flex; gap: var(--space-xs); font-size: var(--text-nav); }
.langs a { min-width: 44px; justify-content: center; color: var(--color-muted); }
.langs a[aria-current="true"] { color: var(--color-ink); font-weight: 700; }

/* ---- shared heads ---- */
.title { font-size: min(var(--text-display), var(--title-cap, 100vw)); line-height: 1.02; overflow-wrap: normal; }
.plaats { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); font: 400 var(--text-kop)/1.4 var(--font-display); letter-spacing: var(--tracking-plaats); text-transform: uppercase; }
.plaats .bloemetje { width: var(--space-md); }
.lead { margin-top: var(--space-lg); max-width: 34ch; font-size: var(--text-lead); line-height: 1.45; }
.section-head h2 { font-size: var(--text-section); }
.section-head p { margin-top: var(--space-md); max-width: 34ch; font-size: var(--text-lead); line-height: 1.45; }
.section-head .more { margin-top: var(--space-lg); }
.facts { display: grid; gap: var(--space-2xs); }
.facts .days { font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }

/* photographs */
.photo { margin: 0; position: relative; overflow: hidden; background: var(--color-paper-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

/* ---- home: the card on the photograph (Poster) ---- */
.poster { position: relative; min-height: calc(100svh - var(--bar-height) - 40px); display: grid; align-items: end; }
.poster > .photo { position: absolute; inset: 0; z-index: var(--z-base); }
.poster > .photo img { object-position: 46% 72%; outline: 0; }
.poster .container { position: relative; z-index: var(--z-raised); padding-block: var(--space-3xl) var(--space-2xl); }
.biz { position: relative; width: min(100%, 47rem); container-type: inline-size; background: var(--color-paper); }
.biz-in { position: relative; min-height: 64.7cqw; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); padding: 7cqw 8cqw 7cqw 11cqw; }
.biz-in::before { content: ""; position: absolute; left: 6cqw; top: 8cqw; bottom: 8cqw; width: var(--line-accent); background: var(--color-accent); }
.biz h1 { font-size: clamp(2rem, 8cqw, 3.75rem); line-height: 1.02; }
.biz .facts { margin-top: var(--space-lg); }
.biz .actions { margin-top: 0; }
.biz .bloemetje { position: absolute; right: 6cqw; bottom: 7cqw; width: 5cqw; min-width: 20px; }

/* sections */
.section { padding-block: var(--section-gap) 0; }
.section--l { padding-block: var(--section-gap-l) 0; }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }

/* the menu in rows: head on 1 to 4, rows on 6 to 12 */
.kaart .section-head { grid-column: 1 / 5; align-self: start; }
.rows { grid-column: 6 / 13; border-top: var(--rule-hair) solid var(--color-rule); }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-lg); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows h3 { font-size: var(--text-kop); font-weight: 700; letter-spacing: var(--tracking-kop); line-height: 1.4; }
.rows .sub { grid-column: 1 / -1; color: var(--color-ink); }
.rows .price { font-weight: 700; }

/* split: text beside a portrait photograph */
.split { align-items: center; }
.split .text { grid-column: 1 / 6; }
.split .photo { grid-column: 7 / 12; aspect-ratio: 4 / 5; }
.split--mirror .photo { grid-column: 1 / 6; grid-row: 1; }
.split--mirror .text { grid-column: 7 / 13; grid-row: 1; }
.names-list { margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.names-list li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.names-list h3 { font-size: var(--text-kop); font-weight: 700; letter-spacing: var(--tracking-kop); line-height: 1.5; }
.yoga-facts { margin-top: var(--space-xl); }
.split .actions { margin-top: var(--space-xl); }

/* Il Sogno as one sentence */
.statement .cols { align-items: start; }
.statement .section-head { grid-column: 1 / 4; }
.statement blockquote, .statement .words { grid-column: 4 / 13; margin: 0; font-size: var(--text-statement); line-height: 1.25; max-width: 30ch; }

/* ---- inner pages: the head stays, the material scrolls beside it ---- */
.stack { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-xl) 0; }
.pane { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--bar-height) + var(--space-lg)); padding-bottom: var(--space-xl); container-type: inline-size; --w: calc(min(100vw, var(--container)) - 2 * var(--gutter)); padding-top: max(0px, var(--pane-offset, 0px)); }
.pane .title { --title-cap: 12.5cqi; }
.page-bloem .pane { --pane-offset: calc(var(--w) * 0.21875 - 165px); }
.page-producten .pane { --pane-offset: calc(var(--w) * 0.2083 - 178px); }
.pane .facts { margin-top: var(--space-xl); }
.pane .actions { margin-top: var(--space-lg); }
.flow { grid-column: 6 / 13; display: grid; gap: var(--space-3xl); container-type: inline-size; min-width: 0; }
.photo-43 { aspect-ratio: 4 / 3; }
.ask { margin-top: var(--space-xl); }

/* the lunch card (Menukaart from the guide) */
.card-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl); }
.col-left { border-left: var(--line-accent) solid var(--color-accent); padding-block: var(--space-1); display: flex; flex-direction: column; gap: var(--space-3); }
.col-left .item { padding-left: var(--space-2); }
.col-right { text-align: right; display: flex; flex-direction: column; gap: var(--space-3); }
.item h2, .block h2, .product h2, .well h2 { font-size: var(--text-kop); font-weight: 700; letter-spacing: var(--tracking-kop); line-height: 1.4; }
.item h2 { margin-bottom: var(--space-1); }
.price { margin-left: var(--space-xs); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.rows .price { margin-left: 0; }
.item .served { font-style: italic; }
.item .sub-items { margin-top: var(--space-sm); display: grid; gap: var(--space-sm); }
.item .sub-items strong { display: block; }
.block { position: relative; background: var(--color-paper-2); padding: var(--space-md) var(--space-4) var(--space-md) var(--space-2); margin-left: calc(-1 * var(--line-accent)); --color-focus: var(--color-ink); }
.block .bloemetje { position: absolute; right: var(--space-md); bottom: var(--space-sm); width: 22px; }
.block p + p { margin-top: var(--space-1); }
.block h2 { margin-bottom: var(--space-2xs); }
.block ul { font: 300 var(--text-lijst)/1.6 var(--font-display); letter-spacing: var(--tracking-kop); text-transform: uppercase; }
.block .extra { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 700; }
.allergy { margin-top: var(--space-xl); font-style: italic; }
@container (max-width: 40rem) {
  .card-menu { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); border-left: var(--line-accent) solid var(--color-accent); }
  .col-left { border-left: 0; padding-block: 0; }
  .col-right { text-align: left; padding-left: var(--space-2); }
  .block { margin-left: 0; }
}

/* Bloem: three pictures in 6/3/3 */
.strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.strip figure { margin: 0; }
.strip .photo { height: 440px; }
.strip .wide { grid-column: span 6; }
.strip .narrow { grid-column: span 3; }

/* Producten: product beside its caption */
.product { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; scroll-margin-top: calc(var(--bar-height) + var(--space-lg)); }
.product .photo, .product .tile { grid-column: 1 / 5; aspect-ratio: 4 / 5; }
.product .text { grid-column: 5 / 8; padding-bottom: var(--space-xs); }
.product h2 { margin-bottom: var(--space-xs); }
.tile { position: relative; background: var(--color-paper-2); border-left: var(--line-accent) solid var(--color-accent); display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-2); }
.tile .new { font-size: var(--text-sm); font-weight: 700; }
.tile .line { max-width: 14ch; font-size: var(--text-2xl); line-height: 1.2; }
.tile .bloemetje { position: absolute; right: var(--space-lg); bottom: var(--space-lg); width: 26px; }

/* Yoga: text beside Rianne */
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; min-height: calc(100svh - var(--bar-height) - 40px); padding-block: var(--space-xl) var(--space-2xl); }
.stage .text { grid-column: 1 / 7; }
.stage .photo { grid-column: 8 / 13; aspect-ratio: 4 / 5; max-height: 72svh; }
.well { position: relative; margin-top: var(--space-xl); max-width: 26rem; background: var(--color-paper-2); border-left: var(--line-accent) solid var(--color-accent); padding: var(--space-lg) var(--space-4) var(--space-lg) var(--space-2); --color-focus: var(--color-ink); }
.well p + p { margin-top: var(--space-2xs); }
.well h2 { margin-bottom: var(--space-xs); }
.well .btn { margin-top: var(--space-lg); }
.well .bloemetje { position: absolute; right: var(--space-md); bottom: var(--space-md); width: var(--space-lg); }

/* Il Sogno: the light-blue field, the head at its foot (Ledge) */
.ledge { padding-block: var(--space-xl) 0; }
.field { position: relative; min-height: min(58svh, 540px); background: var(--color-paper-2); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-2xl) var(--space-2xl) var(--space-xl); --color-focus: var(--color-ink); }
.field > .bloemetje { position: absolute; right: var(--space-xl); bottom: var(--space-xl); width: var(--space-xl); }
.ledge .lead { margin-top: var(--space-xl); max-width: 44ch; }

/* ---- footer: index columns ---- */
.foot { margin-top: var(--section-gap); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.foot .cols { row-gap: var(--space-xl); }
.foot h2 { margin-bottom: var(--space-sm); font: 700 var(--text-kop)/1.4 var(--font-display); letter-spacing: var(--tracking-kop); }
.foot .about { grid-column: 1 / 6; }
.foot .about p + p { margin-top: var(--space-xs); }
.foot .col { grid-column: span 2; }
.foot .legal { grid-column: 10 / 13; color: var(--color-muted); font-size: var(--text-sm); }
.foot .col a { display: inline-flex; min-height: 32px; align-items: center; }
.foot .signoff { margin-top: var(--space-lg); font-style: italic; }

@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; }
  .kaart .section-head, .rows, .split .text, .split .photo, .split--mirror .text, .split--mirror .photo, .statement .section-head, .statement .words { grid-column: 1 / -1; grid-row: auto; }
  .split .photo { max-width: 28rem; }
  .stack { grid-template-columns: minmax(0, 1fr); }
  .pane, .flow { grid-column: 1 / -1; }
  .pane { position: static; padding-bottom: 0; padding-top: 0; }
  .flow { gap: var(--space-2xl); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip .wide { grid-column: 1 / -1; }
  .strip .narrow { grid-column: span 1; }
  .strip .photo { height: auto; aspect-ratio: 4 / 5; }
  .strip .wide .photo { aspect-ratio: 4 / 3; }
  .stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .stage .text, .stage .photo { grid-column: 1 / -1; }
  .stage .photo { max-width: 26rem; max-height: none; }
  .field { padding: var(--space-xl) var(--space-lg) var(--space-lg); min-height: 56svh; }
  .foot .about, .foot .col, .foot .legal { grid-column: 1 / -1; }
  .poster { min-height: 0; display: block; }
  .poster > .photo { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .poster .container { padding-block: 0 var(--space-xl); margin-top: calc(-1 * var(--space-3xl)); }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; --text-md: 1.0625rem; --bar-height: 104px; }
  .bar .container { padding-block: var(--space-2xs); column-gap: var(--space-sm); }
  .bar nav { display: contents; }
  .langs { order: 2; }
  .pages { order: 3; flex-basis: 100%; gap: var(--space-md); }
  .brand svg { width: 120px; }
  .product { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .product .photo, .product .tile, .product .text { grid-column: 1 / -1; }
  .product .photo, .product .tile { max-width: 22rem; }
  .well { padding-right: var(--space-3xl); }
  .biz-in { padding: var(--space-xl) var(--space-lg) var(--space-xl) var(--space-xl); }
  .biz-in::before { left: var(--space-md); top: var(--space-xl); bottom: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) {
  *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}

/* 404 */
.notfound .actions { margin-top: var(--space-lg); }
.nf-langs { list-style: none; padding: 0; margin: var(--space-md) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }