/* Hallmark · shape: the house as the page, the begane grond drawn to scale as the hero, then one drawing sheet of room details, each with its key plan · genre: editorial · theme: custom · job: try · idea: "the site is the floorplan of a house; you walk from room to room and see what plastering each one costs" · vibe: "droog, op schaal, inkt en eigeel" · brand: Stuc Stuc (spec 2026-11-15)
 * paper: oklch(97.8% 0.022 83.3) · accent: oklch(53% 0.168 25) · display: Clash Grotesk · body: Satoshi · outlier: Red Hat Mono (measurements and figures set on their own only) · hero: the begane grond of the product's example house drawn to scale with doors, windows, stair and aanrecht, the head inside the woonkamer, the readout in the serre · nav: wordmark, a plan-shaped room key behind one disclosure, the phone · footer: the drawing's title block with the legend in its first column · imagery: the product, 2 screenshots (capture.mjs + Playwright walk) · signature: tap a room and it turns yolk while the real engine adds it up; walk the page and every room you enter turns yolk on its key plan and joins a running total
 * axes: light/grotesk-heavy/warm · posture: full palette (paper field, ink walls, yolk for gestuct, comb-deep only on the action) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: E, a CSS plan at four scales; rooms placed in metres through one unit so every width rescales the same drawing, and every key plan uses the same unit */
/* Hallmark · waive 39b · the hero controls are the rooms of the begane grond drawn to scale · a room button is as big as the woonkamer is in metres, that size is the plan itself */
/* Hallmark · dismissed F4 · the second fill is a yolk woonkamer toggle in the plan, not a button recipe; the one filled button is Check jouw plattegrond */
/* Hallmark · dismissed 58 · the 82 words in the window at y 400 count the plan's room names, sizes, kast labels and dimension lines, prose there is under 70 words; the 84 words in the window at y 1950 (1440) span two rows of side-by-side rooms (badkamer and gang, zolder and meterkast), each room one idea with its drawing; the page is under 450 */
/* Hallmark · dismissed 77 · seven room sections sit inside one house grid, the counter reads their wrapper as one section; the page has hero, seven rooms and the title block */
/* Hallmark · hero-review: subagent · fix · 5 findings · 5 resolved (readout price at display size with the rooms added up, plan drawn with swings, windows, stair and aanrecht, phone head inside the woonkamer and readout under the plan, kast labels and toilet size on one line, drafting-line button and hairline nav) */
/* Hallmark · finish-review: subagent · fix · 8 findings · 5 resolved 3 partial (rooms keep content-sized boxes, each with its floor's key plan to scale that turns yolk and joins a running total; doors on 7 of 10 shared walls; about 150px of paper left in the gang at 1440) · gap: no scoring round */
/* Hallmark · content run 2026-11-15: content-plan.md sections 2 and 3 applied as amended by the rulings addendum; gang is now the buyer's corridor (83 dagen tot de sleutel, four doors, the stretch to the keys the long one, Nu in yolk); meterkast states the btw rule; title block keeps Ook, drops Blad, adds Bronnen; doors added on the 4 shared walls that lacked one (desktop grid); serre anchored to the figure so it no longer rides over the dimension line at tablet widths */
/* Hallmark · content-review: subagent · fix · 8 findings · 7 resolved 1 declined (gang stop 3 now the drying only, oplevering met garantie at the end of the work; price shot cropped to the result card so no richtprijs shows; step texts shorter; zolder cut larger and under the lede; 24 uur set as the mono figure; hero lede has its subject; hero to house gap cut to 40px; declined: lazy screenshots, they load on scroll at 768) */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- page ---------- */
:root { --m: 1px; }
body { font-size: var(--text-md); }
.m { font-family: var(--font-outlier); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.n { 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); }

/* ---------- nav: a hairline, like the edge of a sheet ---------- */
.nav { position: relative; z-index: var(--z-sticky-nav); border-bottom: 1px solid var(--color-ink); background: var(--color-paper); }
.nav__in { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); min-height: 64px; display: flex; align-items: center; gap: var(--space-lg); }
.wordmark { font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; margin-right: auto; }
.wordmark:hover { color: var(--color-accent); }
.wordmark:focus-visible, .nav__tel:focus-visible, .key summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__tel { font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav__tel:hover { text-decoration: underline; }
.key { position: relative; }
.key summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-ink); font-weight: 700; white-space: nowrap; }
.key summary::-webkit-details-marker { display: none; }
.key summary::before { content: ""; width: 18px; height: 14px; border: 2px solid currentColor; box-shadow: inset 7px 0 0 -5px currentColor; }
.key summary:hover, .key[open] summary { background: var(--color-yolk); }
.key summary:active { transform: translateY(1px); }
.key__plan { position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown); width: 300px; display: grid; gap: var(--wall-s); padding: var(--wall-s); background: var(--color-ink);
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 48px 48px 40px 48px 48px;
  grid-template-areas: "wk wk ke ke" "wk wk bk bk" "ga ga ga ga" "zo zo mk vd" "zo zo mk vd"; }
.key__plan a { display: flex; align-items: flex-end; padding: var(--space-2xs) var(--space-xs); background: var(--color-paper); font-size: var(--text-sm); text-decoration: none; min-width: 0; }
.key__plan a:hover { background: var(--color-yolk); }
.key__plan a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }

/* ---------- the action: a filled box drawn with the drafter's overshooting lines ---------- */
.btn { position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border: 0; background: var(--color-accent); color: var(--color-accent-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn::before, .btn::after { content: ""; position: absolute; pointer-events: none; }
.btn::before { inset: 0 calc(-1 * var(--space-xs)); border-block: 1px solid var(--color-ink); }
.btn::after { inset: calc(-1 * var(--space-xs)) 0; border-inline: 1px solid var(--color-ink); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 12px; }
.tel { font-weight: 700; white-space: nowrap; }
.tel:hover { color: var(--color-accent); }
.tel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ---------- hero: the plan ---------- */
.hero { padding-block: var(--space-lg) var(--space-xl); min-height: calc(100svh - 65px); display: grid; align-content: center; }
.hero__in { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.hero__text { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.hero h1 { font-size: var(--text-display); font-weight: 600; line-height: 0.98; letter-spacing: -0.02em; max-width: 11ch; }
.hero__lede { font-size: var(--text-lead); max-width: 30ch; }
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-xs); padding-inline: var(--space-xs); }

/* one unit, metres: --m is the width of one metre at this screen; every room, door and window is placed in metres */
.plan { position: relative; container-type: inline-size; --m: calc((100cqw - 2 * var(--wall)) / 13.05); }
.plan__fig { position: relative; margin: 0; }
.plan__box { position: relative; height: calc(4.73 * var(--m) + 2 * var(--wall)); margin-top: calc(0.6 * var(--m)); }
.dim { position: absolute; left: calc(var(--wall) + var(--x) * var(--m)); width: calc(var(--w) * var(--m)); top: calc(-0.45 * var(--m)); border-top: 1px solid var(--color-ink); display: flex; justify-content: center; }
.dim::before, .dim::after { content: ""; position: absolute; top: -6px; height: 11px; border-left: 1px solid var(--color-ink); }
.dim::before { left: 0; } .dim::after { right: 0; }
.dim span { transform: translateY(-50%); padding: 0 var(--space-xs); background: var(--color-paper); font-size: var(--text-xs); line-height: 1; }
.room, .kast, .door, .entry, .counter, .stair, .swing { position: absolute; left: calc(var(--wall) + var(--x) * var(--m)); top: calc(var(--wall) + var(--y) * var(--m)); width: calc(var(--w) * var(--m)); height: calc(var(--h) * var(--m)); }
.room { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border: 0; border-radius: 0; background: var(--color-paper); color: var(--color-ink); box-shadow: 0 0 0 var(--wall) var(--color-ink); text-align: left; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.room__n { font-weight: 700; font-size: var(--text-md); line-height: 1.2; }
.room .m { font-size: var(--text-xs); white-space: nowrap; }
.room:hover { background: var(--color-paper-2); }
.room[aria-pressed="true"] { background: var(--color-yolk); }
.room[aria-pressed="true"]:hover { background: var(--color-yolk-2); }
.room:active .room__n { transform: translateY(1px); }
.room:focus-visible { outline: 3px solid var(--color-focus); outline-offset: calc(-1 * var(--space-xs)); }
.room--wk { align-items: flex-end; text-align: right; }
.room--ke { padding: var(--space-xs) var(--space-sm) calc(0.58 * var(--m) + var(--space-xs)) calc(0.58 * var(--m) + var(--space-sm)); }
.room--s { padding: var(--space-2xs) var(--space-3xs); container-type: inline-size; }
.room--s .room__n { font-size: var(--text-sm); }
.room--s .m { font-size: 0.6875rem; letter-spacing: -0.02em; }
@container (max-width: 68px) { .room--s .m { display: none; } }
.kast { box-shadow: 0 0 0 var(--wall-s) var(--color-ink); background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 3px, var(--color-paper) 3px 8px); font-size: 0.6875rem; display: grid; place-items: center; line-height: 1; container-type: size; }
.kast__l, .kast__s { padding: 0 var(--space-3xs); background: var(--color-paper); }
.kast__s { display: none; }
@container (max-width: 58px) { .kast__l { display: none; } .kast__s { display: inline; } }
@container (max-width: 30px) { .kast span { writing-mode: vertical-rl; padding: var(--space-3xs) 0; } }
.kast--wall { background: var(--color-ink); }
.counter { pointer-events: none; z-index: var(--z-base); box-shadow: inset 0 0 0 1px var(--color-ink); background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 3px, var(--color-paper) 3px 8px); }
.stair { --sd: 90deg; pointer-events: none; z-index: var(--z-base); box-shadow: inset 0 0 0 1px var(--color-ink); background: repeating-linear-gradient(var(--sd), var(--color-ink) 0 1px, var(--color-paper) 1px calc(0.22 * var(--m))); }
.door { background: var(--color-paper); z-index: var(--z-raised); }
.swing { pointer-events: none; z-index: var(--z-raised); border: 1px solid var(--color-ink); border-width: 1px 1px 0 2px; border-top-right-radius: 100%; transform: rotate(var(--r, 0deg)); }
.win { --wd: 90deg; position: absolute; z-index: var(--z-raised); left: calc(var(--x) * var(--m) + var(--o) * var(--wall)); width: var(--wall); top: calc(var(--wall) + var(--y) * var(--m)); height: calc(var(--h) * var(--m));
  background: linear-gradient(var(--wd), var(--color-ink) 0 1px, var(--color-paper) 1px calc(50% - 0.5px), var(--color-ink) calc(50% - 0.5px) calc(50% + 0.5px), var(--color-paper) calc(50% + 0.5px) calc(100% - 1px), var(--color-ink) calc(100% - 1px)); }
.entry { clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--color-ink); }

/* the serre: outside the house, so it holds the sum */
.serre { position: absolute; left: calc(var(--wall) + var(--x) * var(--m)); top: calc(var(--wall) + (var(--y) + 0.6) * var(--m)); width: calc(var(--w) * var(--m)); min-height: calc(var(--h) * var(--m)); border: 2px dashed var(--color-ink); padding: var(--space-md); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); container-type: inline-size; }
.serre__n { font-size: var(--text-sm); color: var(--color-muted); }
.readout { display: grid; gap: var(--space-sm); }
.readout__sum { font-weight: 700; font-size: var(--text-md); line-height: 1.3; }
.readout__price { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: min(var(--text-display-s), 19cqw); line-height: 1; letter-spacing: -0.02em; }
.readout__price > span { display: block; }
.readout__price .tot { font-family: var(--font-body); font-weight: 400; font-size: var(--text-md); letter-spacing: 0; line-height: 1.6; color: var(--color-muted); }
.readout__what { font-size: var(--text-sm); }
.readout__note { font-size: var(--text-xs); color: var(--color-muted); }
.plan__cap { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* desktop: the head lives in the woonkamer, the readout in the serre */
@media (min-width: 64rem) {
  .hero__text { position: absolute; z-index: var(--z-raised); left: calc(var(--wall) + 3.75 * var(--m) + var(--space-xl)); top: calc(var(--wall) + 0.6 * var(--m) + var(--space-xl)); width: calc(6.12 * var(--m) - 2 * var(--space-xl)); margin: 0; pointer-events: none; }
  .hero__text a { pointer-events: auto; }
  .hero h1 { font-size: clamp(2.75rem, 4.4vw, 4.75rem); }
}
/* tablet: the head above, the plan across */
@media (max-width: 63.99rem) {
  .hero h1 { max-width: 16ch; }
}
/* phone: the plan stands up, as Funda draws it; the head in the woonkamer, the readout under the plan */
@media (max-width: 47.99rem) {
  .hero { min-height: 0; }
  .plan { --m: calc((100cqw - 2 * var(--wall)) / 4.73); max-width: 26rem; }
  .plan__box { height: calc(9.87 * var(--m) + 2 * var(--wall)); margin-top: 0; }
  .dim { display: none; }
  .room, .kast, .door, .entry, .counter, .stair, .swing { left: calc(var(--wall) + var(--y) * var(--m)); top: calc(var(--wall) + (9.87 - var(--x) - var(--w)) * var(--m)); width: calc(var(--h) * var(--m)); height: calc(var(--w) * var(--m)); }
  .swing { transform: rotate(calc(var(--r, 0deg) - 90deg)); }
  .stair { --sd: 180deg; }
  .win { --wd: 180deg; left: calc(var(--wall) + var(--y) * var(--m)); width: calc(var(--h) * var(--m)); top: calc((9.87 - var(--x)) * var(--m) + (1 - var(--o)) * var(--wall)); height: var(--wall); }
  .entry { top: calc(var(--wall) + (9.87 - var(--x)) * var(--m)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .serre { position: static; width: auto; min-height: 0; margin-top: var(--space-lg); }
  .room--wk { align-items: flex-start; text-align: left; }
  .room--ke { padding: var(--space-xs) calc(0.58 * var(--m) + var(--space-sm)) calc(0.58 * var(--m) + var(--space-xs)) var(--space-sm); }
  .hero__text { position: absolute; z-index: var(--z-raised); left: calc(var(--wall) + var(--space-md)); top: calc(var(--wall) + var(--space-md)); width: calc(4.73 * var(--m) - 2 * var(--space-md)); margin: 0; gap: var(--space-sm); pointer-events: none; }
  .hero__text a { pointer-events: auto; }
  .hero h1 { font-size: clamp(2.25rem, 9vw, 3rem); max-width: 9ch; }
  .hero__lede { font-size: var(--text-md); max-width: 28ch; }
  .room:not(.room--ke) { padding: var(--space-xs); }
  .room--en { justify-content: center; }
  .hero__acts { gap: var(--space-md); }
}

/* ---------- the rest of the house: room details on one sheet, the walls are the gaps ---------- */
.house { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: var(--space-xl) auto 0; padding: var(--wall); background: var(--color-ink); display: grid; gap: var(--wall);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas: "wk wk wk wk wk wk wk ke ke ke ke ke" "bk bk bk bk ga ga ga ga ga ga ga ga" "zo zo zo zo zo zo zo mk mk mk mk mk" "vd vd vd vd vd vd vd vd vd vd vd vd"; }
.rm { --sw: calc(var(--space-2xl) - var(--space-xs)); position: relative; min-width: 0; background: var(--color-paper); padding: var(--space-2xl) var(--space-2xl) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.rm--wk { grid-area: wk; } .rm--ke { grid-area: ke; } .rm--bk { grid-area: bk; } .rm--ga { grid-area: ga; } .rm--zo { grid-area: zo; } .rm--mk { grid-area: mk; } .rm--vd { grid-area: vd; }
.rm h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; }
.rm__lede { max-width: 46ch; font-size: var(--text-lead); line-height: 1.45; }

/* doors in the shared walls (the swing opens into this room's padding), windows in the front and back walls */
.dr { position: absolute; z-index: var(--z-raised); background: var(--color-paper); }
.dr::after { content: ""; position: absolute; width: var(--sw); height: var(--sw); border: 1px solid var(--color-ink); border-width: 1px 1px 0 2px; border-top-right-radius: 100%; }
.dr--t { top: calc(-1 * var(--wall)); left: var(--p); width: calc(var(--sw) + var(--space-xs)); height: var(--wall); }
.dr--t::after { top: 100%; left: 0; transform: scaleY(-1); }
.dr--l { left: calc(-1 * var(--wall)); top: var(--p); width: var(--wall); height: calc(var(--sw) + var(--space-xs)); }
.dr--l::after { left: 100%; top: 0; transform: rotate(90deg); }
.wn { position: absolute; z-index: var(--z-raised); --wd: 180deg;
  background: linear-gradient(var(--wd), var(--color-ink) 0 1px, var(--color-paper) 1px calc(50% - 0.5px), var(--color-ink) calc(50% - 0.5px) calc(50% + 0.5px), var(--color-paper) calc(50% + 0.5px) calc(100% - 1px), var(--color-ink) calc(100% - 1px)); }
.wn--t, .wn--b { left: var(--p); width: var(--s); height: var(--wall); }
.wn--t { top: calc(-1 * var(--wall)); }
.wn--b { bottom: calc(-1 * var(--wall)); }

/* key plans: the floor this room is on, to scale; the room you are in is yolk */
.kp { margin: auto 0 0; width: min(100%, 20rem); container-type: inline-size; display: grid; gap: var(--space-sm); }
.kp__box { position: relative; --km: calc((100cqw - 4px) / var(--len)); height: calc(4.73 * var(--km) + 4px); }
.kp__box i { position: absolute; left: calc(2px + var(--x) * var(--km)); top: calc(2px + var(--y) * var(--km)); width: calc(var(--w) * var(--km)); height: calc(var(--h) * var(--km)); box-shadow: 0 0 0 2px var(--color-ink); background: var(--color-paper); transition: background-color var(--dur-long) var(--ease-out); }
.kp__box .kp__on { background: var(--color-yolk); }
.kp__box .kp__st { background: repeating-linear-gradient(90deg, var(--color-ink) 0 1px, var(--color-paper) 1px 5px); }
.kp__box .kp__out { box-shadow: none; outline: 2px dashed var(--color-ink); outline-offset: -2px; background: transparent; }
.walk .rm:not(.is-in) .kp__on { background: var(--color-paper); }
.kp figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.kp figcaption b { color: var(--color-ink); }
.kp figcaption .m { color: var(--color-ink); }

/* woonkamer: the three finishes on a ruler of euros */
.ruler { margin: 0; display: grid; gap: var(--space-md); }
.ruler__row, .ruler__scale { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.ruler__row p { font-size: var(--text-sm); line-height: 1.35; }
.ruler__row b { display: block; font-size: var(--text-lg); }
.ruler__bar { position: relative; height: 64px; border-left: 1px solid var(--color-rule); }
.ruler__bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--a) / 25 * 100%); width: calc((var(--b) - var(--a)) / 25 * 100%); background: var(--color-yolk); box-shadow: 0 0 0 3px var(--color-ink); }
.ruler__bar .m { position: absolute; top: 50%; right: calc(100% - var(--a) / 25 * 100% + var(--space-md)); transform: translateY(-50%); white-space: nowrap; font-size: var(--text-md); }
.ruler__scale { font-size: var(--text-xs); color: var(--color-muted); }
.ruler__scale span { grid-column: 2; grid-row: 1; justify-self: start; transform: translateX(-50%); margin-left: calc(var(--t) / 25 * 100%); }
.ruler__scale span:first-child { transform: none; }
.ruler figcaption { margin-top: var(--space-sm); font-size: var(--text-md); }

/* keuken: 65 of every 100 */
.split { margin: 0; display: grid; gap: var(--space-md); }
.split__bar { display: flex; height: 72px; box-shadow: 0 0 0 3px var(--color-ink); }
.split__bar > span { display: flex; align-items: center; gap: var(--space-2xs); padding-inline: var(--space-sm); font-size: var(--text-sm); white-space: nowrap; }
.split__yes { flex: 65 1 0; background: var(--color-yolk); }
.split__no { flex: 35 1 0; background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 4px, var(--color-paper) 4px 10px); box-shadow: inset 3px 0 0 var(--color-ink); }
.split figcaption { font-size: var(--text-md); }
.split__big { display: block; font-size: var(--text-display); line-height: 1; letter-spacing: -0.04em; }

/* badkamer en toilet, at one scale */
.wet { margin: 0; display: flex; align-items: flex-end; gap: var(--space-lg); container-type: inline-size; }
.wet__room { --u: min(84px, (100cqw - var(--space-lg)) / 3.69); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); padding: var(--space-xs); background: linear-gradient(var(--color-yolk), var(--color-yolk)) content-box, repeating-linear-gradient(135deg, var(--color-paper-3) 0 3px, var(--color-paper) 3px 7px); box-shadow: 0 0 0 var(--wall-s) var(--color-ink); display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); font-size: var(--text-sm); flex-shrink: 0; }

/* gang: the buyer's weeks as a corridor walked through four doors; the stretch to the keys is the long one, the stop you are at is yolk */
.route { --cor: 88px; --leaf: calc(var(--cor) - 2 * var(--wall-s)); list-style: none; margin: 0; padding: var(--space-lg) 0 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr) minmax(0, 5fr) minmax(0, 4fr); }
.route li { position: relative; padding: calc(var(--cor) + var(--space-md)) var(--space-lg) 0 0; font-size: var(--text-md); line-height: 1.45; }
.route li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--cor); border-block: var(--wall-s) solid var(--color-ink); background: repeating-linear-gradient(90deg, var(--color-ink) 0 8px, transparent 8px 16px) 0 50% / 100% 2px no-repeat; }
.route .route__now::before { background-color: var(--color-yolk); }
.route li::after { content: ""; position: absolute; top: var(--wall-s); left: 0; width: var(--leaf); height: var(--leaf); border: 1px solid var(--color-ink); border-width: 1px 1px 0 3px; border-top-right-radius: 100%; }
.route b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.1; margin-bottom: var(--space-xs); }
.route__dim { position: absolute; top: calc(-1 * var(--space-md)); left: 0; right: 0; display: flex; justify-content: center; border-top: 1px solid var(--color-ink); font-size: var(--text-xs); line-height: 1; }
.route__dim::before, .route__dim::after { content: ""; position: absolute; top: -6px; height: 11px; border-left: 1px solid var(--color-ink); }
.route__dim::before { left: 0; } .route__dim::after { right: 0; }
.route__dim > span { transform: translateY(-50%); padding: 0 var(--space-xs); background: var(--color-paper); }
.route li:last-child { padding-right: 0; }
.route__end { position: absolute; top: calc(var(--cor) / 2 - 8px); right: 0; width: 14px; height: 16px; background: var(--color-ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.src { font-size: var(--text-sm); color: var(--color-muted); }
.src a:hover { color: var(--color-accent); }
.src a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rm__note { max-width: 46ch; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-weight: 700; font-size: var(--text-lg); line-height: 1.35; }

/* zolder: the cut beside its key plan */
/* the cut sits right under the lede and takes most of the width; the key plan keeps the floor corner */
.zo__draw { flex: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); gap: var(--space-xl); align-items: start; }
.zo__draw .kp { margin: 0; align-self: end; }
.cut { width: 100%; height: auto; overflow: visible; }
.cut__in { fill: var(--color-paper-2); }
.cut__roof { stroke: var(--color-yolk); stroke-width: 16; }
.cut__wall { fill: none; stroke: var(--color-ink); stroke-width: 10; stroke-linejoin: miter; }
.cut__t { font-family: var(--font-outlier); font-size: 22px; fill: var(--color-ink); }
.cut__u { font-family: var(--font-body); }

/* meterkast: three rules, the figures set at section size */
.rules { list-style: none; margin: 0; padding: 0; display: grid; }
.rules li { padding-block: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-md); line-height: 1.45; }
.rules .m { display: block; font-size: var(--text-section); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--space-2xs); }

/* voordeur: the prijscheck itself, the captures large */
.rm--vd { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); align-items: start; }
.vd__text { display: flex; flex-direction: column; gap: var(--space-lg); height: 100%; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.shot { margin: 0; aspect-ratio: 780 / 1300; box-shadow: 0 0 0 3px var(--color-ink); }
.shot > img { object-position: 50% 0; }
/* the result, cropped to the price card: the form above it still says richtprijs (owner decides), the homepage does not */
.shot--card { aspect-ratio: 780 / 432; align-self: center; box-shadow: none; }
.promises { list-style: none; margin: 0; padding: 0; }
.promises li { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); font-weight: 700; font-size: var(--text-lg); line-height: 1.3; }
.promises .promises__id { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- the title block, the legend in its first column ---------- */
.sheet-foot { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--container) - 2 * var(--gutter)); margin: var(--section-gap-s) auto var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 1px; background: var(--color-ink); border: 3px solid var(--color-ink); }
.legend { display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-md); background: var(--color-paper); font-size: var(--text-sm); }
.legend p { display: flex; align-items: center; gap: var(--space-sm); }
.sw { width: 32px; height: 20px; flex-shrink: 0; box-shadow: 0 0 0 2px var(--color-ink); }
.sw--yolk { background: var(--color-yolk); }
.sw--hatch { background: repeating-linear-gradient(135deg, var(--color-paper-3) 0 3px, var(--color-paper) 3px 7px); }
.sw--dash { box-shadow: none; border: 2px dashed var(--color-ink); }
.sw--win { height: 10px; box-shadow: none; background: linear-gradient(var(--color-ink) 0 1px, var(--color-paper) 1px 4.5px, var(--color-ink) 4.5px 5.5px, var(--color-paper) 5.5px 9px, var(--color-ink) 9px); }
.tb { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.tb > div { padding: var(--space-xs) var(--space-sm); background: var(--color-paper); min-width: 0; }
.tb__wide { grid-column: span 4; } .tb__half { grid-column: span 2; }
.tb dt { font-size: var(--text-xs); color: var(--color-muted); }
.tb dd { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.tb__mark { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin-right: var(--space-xs); }
.tb a { white-space: nowrap; }
.tb a:hover { color: var(--color-accent); }
.tb a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- the running total: shown once the plan has scrolled away ---------- */
.meter { position: fixed; z-index: var(--z-sticky); left: 0; right: 0; bottom: var(--space-md); margin-inline: auto; width: fit-content; max-width: calc(100% - 2 * var(--gutter)); padding: var(--space-sm) var(--space-md); background: var(--color-paper); box-shadow: 0 0 0 var(--wall-s) var(--color-ink); transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.js .meter:not(.is-on) { opacity: 0; transform: translateY(calc(100% + var(--space-xl))); pointer-events: none; }
.meter p { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); }
.meter__r { color: var(--color-muted); }
.meter__p { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--text-xl); line-height: 1.1; }
.walk body { padding-bottom: var(--space-3xl); }

@media (max-width: 75rem) {
  .rm { --sw: calc(var(--space-xl) - var(--space-2xs)); padding: var(--space-xl) var(--space-xl) var(--space-lg); }
  .ruler__row, .ruler__scale { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
}
@media (max-width: 60rem) {
  .dr::after, .dr--l, .dr--desk, .wn--far { display: none; }
  .dr--t { left: auto; right: 12%; }
  .house { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "wk wk wk wk wk wk" "ke ke ke bk bk bk" "ga ga ga ga ga ga" "zo zo zo zo zo zo" "mk mk mk mk mk mk" "vd vd vd vd vd vd"; }
  .route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .rm--vd { grid-template-columns: minmax(0, 1fr); }
  .sheet-foot { grid-template-columns: minmax(0, 1fr); }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .ruler__bar { height: 76px; }
  .ruler__bar::before { top: auto; height: 32px; }
  .ruler__bar .m { top: 0; right: auto; left: calc(var(--a) / 25 * 100%); transform: none; }
  .ruler__row:first-child .ruler__bar .m { left: auto; right: 0; }
  .house { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wk" "ke" "bk" "ga" "zo" "mk" "vd"; }
  .rm { padding: var(--space-lg) var(--space-md) var(--space-lg); }
  .ruler__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .ruler__scale { grid-template-columns: minmax(0, 1fr); }
  .ruler__scale span { grid-column: 1; }
  /* the corridor stands up: walk down through the doors */
  .route { --cor: 56px; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 0; }
  .route li, .route li:last-child { padding: 0 0 var(--space-lg) calc(var(--cor) + var(--space-md)); min-height: calc(var(--cor) + var(--space-lg)); }
  .route li::before { top: 0; bottom: 0; right: auto; width: var(--cor); height: auto; border-block: 0; border-inline: var(--wall-s) solid var(--color-ink); background: repeating-linear-gradient(180deg, var(--color-ink) 0 8px, transparent 8px 16px) 50% 0 / 2px 100% no-repeat; }
  .route li::after { top: 0; left: var(--wall-s); transform: rotate(90deg); }
  .route__dim { display: none; }
  .route__end { top: auto; bottom: 0; right: auto; left: calc(var(--cor) / 2 - 8px); width: 16px; height: 14px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .zo__draw { grid-template-columns: minmax(0, 1fr); }
  .cut__t { font-size: 24px; }
  .shots { gap: var(--space-md); }
  .tb { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb__wide { grid-column: span 2; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .nav__tel { display: none; }
  .nav__in { gap: var(--space-sm); }
  .meter__l { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn, .room, .meter, .kp__box i { transition: none; } }