/* Hallmark · shape: Koppel plan, parcels of flat colour with one photographed lane as the spine · genre: editorial · theme: custom · job: book (call for an appointment) · idea: "Seen from above, the fields around Dänischenhagen are parcels with a clear line between them, drawn before anyone argues." · vibe: "rapeseed yellow, hedge green, clear boundaries"
 * paper: oklch(97.6% 0.01 135) · accent: oklch(87% 0.165 100) · display: Besley · body: Golos Text · hero: the motto split across a top-down photo of a tree-lined lane between two rapeseed fields · nav: wordmark, seven links and the number on paper, sticky · footer: hedge-green mast with office lines, page index and photo credits · imagery: Matthias Süßen's drone photographs of Dänischenhagen, the office's own portraits · signature: the lane photograph running between the two halves of the motto and on down the page
 * axes: mid/slab-serif/chromatic-yellow · posture: full-palette (rapeseed field, hedge field, field paper, green-black ink) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · weakest: E, the portraits are 350px sources; shown at native size in printed frames instead of upscaled */
/* Hallmark · hero-review: fix · 2 findings · 2 resolved (motto leading 1.1; status banner dropped so the status stays beside the call) */
/* Hallmark · finish-review: subagent · 7 findings · 6 resolved 1 partial (person band still reads as a portrait-and-years block, now on the shared lane axis) · gap: none */
/* Hallmark · waive 23 · posture: full palette, rapeseed yellow is a declared field colour and the signal stays the bloom and today marks · the rapeseed field is the world's surface, as in the photographs */
/* Hallmark · waive 49b · a.parcel is a block link holding a name and a one-line description · the description is meant to sit on its own line under the name */
/* Hallmark · waive 79 · on / the yellow hero ends at y 771 at 1440x900 with the field plan heads above the fold; on inner routes the reading column starts directly under the yellow page head · the measured block is the wrapper that carries the lane photograph (.spine, .leaf), not the hero */
:root {
  /* Spacing: Hallmark's scale, unchanged names. */
  --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;
  --seam: 6px; /* the hedge between two parcels */

  /* Type: Golos Text reads, Besley speaks. 19px body for an older readership. */
  --text-label: 1rem;
  --text-body: 1.1875rem;
  --text-lead: clamp(1.25rem, 0.35vw + 1.12rem, 1.5rem);
  --text-title: clamp(1.375rem, 0.55vw + 1.15rem, 1.75rem);
  --text-section: clamp(2.25rem, 1.7vw + 1.55rem, 3.25rem);
  --text-statement: clamp(2.25rem, 2.4vw + 1.4rem, 3.75rem);
  --text-display-s: clamp(2.25rem, 2.2vw + 1.35rem, 3.75rem);
  --text-display: clamp(2.5rem, 3.8vw + 1rem, 4.75rem);
  --text-phone: clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);
  --leading-display: 1.1;
  --leading-head: 1.1;
  --leading-body: 1.62;
  --tracking-display: -0.018em;

  --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;
  --lane: clamp(7rem, 9vw, 9rem);
  --aside: 19rem;
  --navbar-h: 4.75rem;
  --section-gap-s: 120px; --section-gap: 144px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400;

  /* Colour: the fields around Dänischenhagen in May. */
  --color-paper: oklch(97.6% 0.01 135);     /* field paper, a shade of young grass, where reading happens */
  --color-paper-2: oklch(94.4% 0.016 135);
  --color-paper-3: oklch(90.5% 0.022 135);
  --color-ink: oklch(23% 0.04 150);          /* green-black */
  --color-ink-2: oklch(37% 0.04 150);
  --color-muted: oklch(46% 0.035 150);
  --color-rule: oklch(80% 0.035 120);
  --color-rule-2: oklch(88% 0.022 130);
  --color-raps: oklch(87% 0.165 100);        /* rapeseed in bloom */
  --color-raps-2: oklch(82% 0.165 96);
  --color-on-raps: oklch(24% 0.05 150);
  --color-on-raps-2: oklch(33% 0.06 140);
  --color-knick: oklch(31% 0.058 150);       /* hedge green */
  --color-knick-2: oklch(26% 0.05 150);
  --color-knick-3: oklch(38% 0.062 150);
  --color-on-knick: oklch(95.5% 0.03 100);
  --color-on-knick-2: oklch(85% 0.06 108);
  --color-on-knick-rule: oklch(48% 0.05 145);
  --color-accent: var(--color-raps);
  --color-accent-ink: var(--color-on-raps);
  --color-focus: oklch(34% 0.11 150);
  --color-focus-on-dark: var(--color-raps);
  --color-ink-a10: oklch(23% 0.04 150 / 0.1);
  --color-error: oklch(52% 0.19 27);

  --font-display: "Besley", ui-serif, Georgia, serif;
  --font-body: "Golos Text", ui-sans-serif, system-ui, sans-serif;

  --radius-card: 0; --rule-hair: 1px; --shadow-card: none;
}

@media (max-width: 60rem) {
  :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --navbar-h: 4.25rem; }
}
@media (max-width: 40rem) {
  :root { --gutter: 16px; --section-gap-s: 64px; --section-gap: 72px; --gap-columns: 16px; --text-body: 1.125rem; }
}

@font-face { font-family: "Besley"; src: url("/assets/fonts/besley-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-text-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

*, *::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(--navbar-h) + 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-body); line-height: var(--leading-body); font-synthesis: none; -webkit-font-smoothing: antialiased; caret-color: var(--color-knick); }
::selection { background: var(--color-raps); color: var(--color-on-raps); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: var(--leading-head); letter-spacing: var(--tracking-display); overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p, ul, ol, dl, dd, figure, address, blockquote { margin: 0; }
p, li, dd, figcaption { text-wrap: pretty; }
address { font-style: normal; }
ul, ol { padding: 0; list-style: none; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@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; }
}


/* ---------- skip link ---------- */
.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); background: var(--color-knick); color: var(--color-on-knick); font-weight: 600; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline-color: var(--color-focus); }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.navbar { background: var(--color-paper); border-bottom: 1px solid var(--color-rule-2); }
.navbar__row { min-height: var(--navbar-h); display: flex; align-items: center; gap: var(--space-xl); }
.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; gap: var(--space-2xs); margin-right: auto; }
.wordmark__name { font-family: var(--font-display); font-weight: 700; font-size: 1.875rem; letter-spacing: -0.02em; }
.wordmark__role { font-size: var(--text-label); color: var(--color-ink-2); }
.nav__list { display: flex; gap: var(--space-lg); }
.nav__list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 1.0625rem; white-space: nowrap; border-bottom: 4px solid transparent; padding-top: var(--space-2xs); transition: border-color var(--dur-micro) var(--ease-out); }
.nav__list a:hover { border-bottom-color: var(--color-rule); }
.nav__list a[aria-current] { border-bottom-color: var(--color-knick); }
.navbar__menu { display: none; min-height: 44px; padding: 0 var(--space-md); border: 2px solid var(--color-knick); background: transparent; font-weight: 600; font-size: 1.0625rem; }
.navbar__menu:hover { background: var(--color-paper-2); }
.navbar__menu:active { transform: translateY(1px); }
.navbar__menu[aria-expanded="true"] { background: var(--color-knick); color: var(--color-on-knick); }
.menu { background: var(--color-knick); color: var(--color-on-knick); border-top: var(--seam) solid var(--color-knick-2); }
.menu ul { display: grid; padding-block: var(--space-lg) var(--space-xl); }
.menu a { display: flex; align-items: center; min-height: 56px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); border-bottom: 1px solid var(--color-on-knick-rule); }
.menu a[aria-current] { color: var(--color-raps); }
.menu a:focus-visible { outline-color: var(--color-focus-on-dark); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 52px; padding: 0 var(--space-lg); font-weight: 600; font-size: 1.0625rem; text-decoration: none; white-space: nowrap; border: 2px solid var(--color-knick); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.btn--primary { background: var(--color-knick); color: var(--color-on-knick); }
.btn--primary:hover { background: var(--color-knick-2); }
.btn--primary:active { transform: translateY(1px); }
.btn--quiet { min-height: 44px; padding: 0 var(--space-md); background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: var(--color-raps); }
.btn--quiet:active { transform: translateY(1px); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.link { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.link:hover { text-decoration-thickness: 3px; }
.prose a:hover, .lede a:hover { text-decoration-thickness: 2px; }

/* ---------- fields ---------- */
.field--raps { background: var(--color-raps); color: var(--color-on-raps); }
.field--knick { background: var(--color-knick); color: var(--color-on-knick); }
.field--knick a:focus-visible, .field--knick button:focus-visible { outline-color: var(--color-focus-on-dark); }
.field--paper { background: var(--color-paper); }

/* ---------- the lane: one photographed boundary ---------- */
.spine { position: relative; }
.lane { position: absolute; z-index: var(--z-raised); top: 0; bottom: 0; left: 50%; width: var(--lane); transform: translateX(-50%); overflow: hidden; background: var(--color-knick); }
.lane img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.lane--sticky { background: var(--color-knick); overflow: clip; }
.lane--sticky > div { position: sticky; top: var(--navbar-h); height: calc(100svh - var(--navbar-h)); max-height: 100%; overflow: hidden; }
.lane--tail img { object-position: 50% 100%; }
.lane-band { display: none; height: clamp(4.5rem, 18vw, 6rem); overflow: hidden; background: var(--color-knick); color: var(--color-on-knick); }
.lane-band img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) var(--lane) minmax(0, 1fr); }
.split__a { grid-column: 1; padding-right: var(--space-xl); min-width: 0; }
.split__b { grid-column: 3; padding-left: var(--space-xl); min-width: 0; }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-3xl) calc(var(--space-3xl) + var(--space-xl)); }
.hero .split { row-gap: var(--space-xl); }
.motto { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; }
.motto__half { display: block; font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); align-self: end; }
.hero__lede { grid-row: 2; font-size: var(--text-lead); line-height: 1.45; max-width: 30ch; color: var(--color-on-raps-2); }
.hero__act { grid-row: 2; display: grid; gap: var(--space-md); justify-items: start; align-content: start; }
.hero__state { font-size: var(--text-label); max-width: 34ch; }
.hero__state strong { font-weight: 600; }
.hero__mail { font-size: var(--text-label); }

/* ---------- field plan (start page) ---------- */
.plan { padding-block: var(--space-3xl) var(--section-gap-s); }
.plan__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.plan__head h2 { font-size: var(--text-section); }
.plan__head p { max-width: 34ch; color: var(--color-ink-2); }
.parcels { display: grid; gap: var(--seam); padding: var(--seam); background: var(--color-knick); }
.parcels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.parcels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.parcels > li { display: grid; min-width: 0; }
.parcels .wide { grid-column: span 2; }
.parcels .full { grid-column: 1 / -1; }
.parcel { display: grid; align-content: space-between; gap: var(--space-md); min-height: 6.5rem; padding: var(--space-md) var(--space-md) var(--space-lg); background: var(--color-paper); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.parcel__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 0.4vw + 1.1rem, 1.5rem); line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: break-word; min-width: 0; }
.parcel__line { font-size: var(--text-label); line-height: 1.45; color: var(--color-ink-2); }
.parcel:hover, .parcel:focus-visible { background: var(--color-raps); }
.parcel:hover .parcel__line, .parcel:focus-visible .parcel__line { color: var(--color-on-raps-2); }
.parcel:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.parcel:active { background: var(--color-raps-2); }

/* ---------- person ---------- */
.person { padding-block: var(--section-gap); }
.person .split { align-items: start; }
.person .print { justify-items: end; }
.person .print figcaption { text-align: right; justify-self: end; }
.print { display: grid; gap: var(--space-sm); justify-items: start; }
.print img { background: var(--color-paper); outline: 1px solid var(--color-ink-a10); outline-offset: -1px; }
.print figcaption { padding-top: var(--space-sm); border-top: 2px solid currentColor; font-size: var(--text-label); line-height: 1.45; max-width: 26ch; }
.field--knick .print figcaption { color: var(--color-on-knick-2); border-top-color: var(--color-on-knick-2); }
.person__text { display: grid; gap: var(--space-lg); max-width: 46rem; }
.person__text h2 { font-size: var(--text-section); max-width: 14ch; }
.person__text p { color: var(--color-on-knick-2); max-width: 52ch; }
.courses { display: grid; border-top: var(--seam) solid var(--color-on-knick-rule); }
.courses > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-on-knick-rule); }
.courses dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: 1.2; font-variant-numeric: lining-nums; }
.courses dd { align-self: center; }
.courses .is-now dt { color: var(--color-raps); }
.person__text .link { color: var(--color-on-knick); justify-self: start; }

/* ---------- fee rule ---------- */
.fee { padding-block: var(--section-gap-s); }
.fee .split { align-items: end; }
.fee h2 { font-size: var(--text-section); line-height: 1.1; }
.fee__aside { display: grid; gap: var(--space-lg); color: var(--color-on-raps-2); }
.fee__aside .link { color: var(--color-on-raps); justify-self: start; }

/* ---------- week plan ---------- */
.hours { padding-block: var(--section-gap); }
.hours .split { align-items: start; }
.hours__head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.hours__head h2 { font-size: var(--text-section); }
.hours__state { font-size: var(--text-lead); color: var(--color-ink-2); }
.hours__state strong { color: var(--color-ink); font-weight: 600; }
.week { container-type: inline-size; display: grid; grid-template-columns: 3.25rem repeat(5, minmax(0, 1fr)); gap: var(--seam); padding: var(--seam); background: var(--color-knick); }
.week__axis, .day { display: grid; grid-template-rows: 2.75rem repeat(19, minmax(1.25rem, auto)); }
.week__axis { background: var(--color-knick); color: var(--color-on-knick-2); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.week__axis span { grid-row: var(--r) / span 2; align-self: start; line-height: 1; padding-top: var(--space-2xs); padding-inline: var(--space-xs); }
.day { position: relative; min-width: 0; overflow: hidden; background: var(--color-knick); row-gap: 0; }
.day__name { grid-row: 1; display: flex; align-items: center; padding-inline: var(--space-sm); background: var(--color-knick); color: var(--color-on-knick); font-weight: 600; font-size: 0.9375rem; }
.slot { display: flex; align-items: flex-start; padding: var(--space-xs) var(--space-sm); font-size: 0.9375rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.slot--am { grid-row: 2 / span 8; }
.slot--pm { grid-row: 15 / span 6; }
.slot--open { background: var(--color-paper); color: var(--color-ink); font-weight: 600; }
.slot--closed { background: var(--color-paper); color: var(--color-muted); }
.day.is-today .day__name { background: var(--color-raps); color: var(--color-on-raps); }
.day.is-today .slot--open { background: var(--color-raps); color: var(--color-on-raps); }
.now { position: absolute; left: 0; right: 0; top: var(--now, 0); height: 3px; background: var(--color-knick); pointer-events: none; }
.now--gap { background: var(--color-raps); }
.now span { position: absolute; right: var(--space-xs); top: var(--space-2xs); padding: 0 var(--space-2xs); background: var(--color-knick); color: var(--color-on-knick); font-size: 0.875rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.day__name .short, .slot .short { display: none; }
.navbar__call .short { display: none; }
.week__note { margin-top: var(--space-md); font-size: var(--text-label); color: var(--color-muted); max-width: 60ch; }
.hours__call { display: grid; gap: var(--space-lg); justify-items: start; }
.hours__call p { max-width: 46ch; }
.hours__call .print img { width: 270px; }

/* ---------- the place ---------- */
/* the Wohld photograph is a field of its own: it meets the paper above and the hedge-green footer below edge to edge */
.place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: var(--seam) solid var(--color-knick); }
.place__text { display: grid; gap: var(--space-lg); align-content: center; padding-block: var(--space-3xl); padding-left: max(var(--gutter), calc(100% - var(--container) / 2 + var(--gutter))); padding-right: var(--space-2xl); }
.place__text h2 { font-size: var(--text-section); max-width: 15ch; }
.place__text p { max-width: 46ch; color: var(--color-ink-2); }
.place__photo { position: relative; min-height: 36rem; border-left: var(--seam) solid var(--color-knick); }
.place__photo figcaption { position: absolute; left: 0; bottom: 0; max-width: min(100%, 34rem); padding: var(--space-sm) var(--space-md); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-label); border-top: 2px solid var(--color-knick); }
.place__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.photo figcaption { font-size: var(--text-label); color: var(--color-muted); padding-top: var(--space-xs); border-top: 2px solid var(--color-knick); }
.lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); font-variant-numeric: tabular-nums; }
.lines dt { color: var(--color-muted); }
.lines dd a { overflow-wrap: anywhere; }

/* ---------- footer ---------- */
.foot { background: var(--color-knick); color: var(--color-on-knick); padding-block: var(--space-3xl) var(--space-xl); font-size: var(--text-label); }
.foot a:focus-visible { outline-color: var(--color-focus-on-dark); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-2xl); }
.foot__mast { display: grid; gap: var(--space-md); align-content: start; }
.foot__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-section); line-height: 1; letter-spacing: -0.02em; }
.foot__phone { font-family: var(--font-display); font-weight: 700; font-size: var(--text-phone); line-height: 1; text-decoration: none; color: var(--color-raps); font-variant-numeric: lining-nums; justify-self: start; }
.foot__phone:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.foot .lines dt { color: var(--color-on-knick-2); }
.foot__index ul { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2xs) var(--space-xl); }
.foot__index a, .foot__legal a { display: inline-flex; min-height: 32px; align-items: center; text-decoration: none; white-space: nowrap; }
.foot__index a:hover, .foot__legal a:hover { text-decoration: underline; }
.foot__base { grid-column: 1 / -1; display: grid; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-on-knick-rule); color: var(--color-on-knick-2); }
.foot__legal { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot__credits a { color: var(--color-on-knick); }

/* ---------- leaf pages: the same two fields and the same lane axis as the start page ---------- */
.leaf__head { padding-block: var(--space-3xl) var(--space-2xl); }
.leaf__head .split { align-items: end; row-gap: var(--space-lg); }
.leaf__title { display: grid; gap: var(--space-md); }
.crumb { font-size: var(--text-label); }
.crumb a { color: var(--color-on-raps); }
.leaf__head h1 { font-size: var(--text-display-s); line-height: 1.08; max-width: 16ch; }
.leaf__head .lede { font-size: var(--text-lead); line-height: 1.45; max-width: 40ch; color: var(--color-on-raps-2); }
.head__state { font-size: var(--text-lead); line-height: 1.45; max-width: 30ch; }
.head__state strong { font-weight: 600; }
.leaf__main { padding-block: var(--space-3xl) var(--section-gap); }
.leaf__main .split { align-items: start; }
.leaf__main .split__b { align-self: stretch; }
.leaf__side { position: sticky; top: calc(var(--navbar-h) + var(--space-xl)); display: grid; gap: var(--space-md); }
.side__title { font-family: var(--font-body); font-size: var(--text-label); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.parcels--plan .parcel { min-height: 4.75rem; padding: var(--space-sm) var(--space-md); }
.parcels--plan .parcel__name { font-size: 1.1875rem; }
.parcel[aria-current] { background: var(--color-raps); }
.parcel[aria-current] .parcel__line { color: var(--color-on-raps-2); }
.callbox { display: grid; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-knick); color: var(--color-on-knick); }
.callbox p { font-size: var(--text-label); color: var(--color-on-knick-2); }
.callbox .phone { font-family: var(--font-display); font-weight: 700; font-size: var(--text-phone); line-height: 1.05; color: var(--color-raps); text-decoration: none; white-space: nowrap; font-variant-numeric: lining-nums; }
.callbox .phone:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.callbox a:focus-visible { outline-color: var(--color-focus-on-dark); }
.callbox .callbox__state { color: var(--color-on-knick); }
.callbox__mail { color: var(--color-on-knick); font-size: var(--text-label); overflow-wrap: anywhere; }

/* prose inside a leaf: every text measure set by its parcel */
.prose { display: grid; gap: var(--space-lg); max-width: 68ch; }
.prose > h2 { font-size: var(--text-title); margin-top: var(--space-xl); }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; letter-spacing: 0; margin-top: var(--space-md); }
.topic { display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-top: var(--seam) solid var(--color-knick); scroll-margin-top: calc(var(--navbar-h) + var(--space-lg)); }
.topic:first-child { padding-top: 0; border-top: 0; }
.topic h2 { font-size: var(--text-section); max-width: 20ch; }
.topic h2.topic__title { font-size: var(--text-title); max-width: 32ch; }
.topic p { max-width: 66ch; }
.topic:target { background: var(--color-raps); box-shadow: 0 0 0 var(--space-lg) var(--color-raps); }
.statement { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: 1.3; max-width: 30ch; }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl); border-top: 1px solid var(--color-rule); }
.services li { padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); hyphens: auto; overflow-wrap: break-word; }
.services li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.leaf__body .services { grid-template-columns: minmax(0, 1fr); }

.topic__body { display: grid; gap: var(--space-md); }
.prose--wide { margin-bottom: var(--space-2xl); }
.prose + .topic, .photo + .prose, .contact-lines + .topic { margin-top: var(--space-2xl); }
.photo--wide img { aspect-ratio: 960 / 350; object-fit: cover; }
.photo + .prose { margin-top: var(--space-2xl); }
.cv-after { margin-top: var(--space-3xl); }

/* CV courses on paper */
.cv { display: grid; border-top: var(--seam) solid var(--color-knick); }
.cv > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.cv dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); line-height: 1.2; font-variant-numeric: lining-nums; }
.cv dd { align-self: center; }
.cv .is-now { background: var(--color-raps); padding-inline: var(--space-sm); margin-inline: calc(-1 * var(--space-sm)); }
.portrait-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-3xl); }
.photo { display: grid; gap: var(--space-sm); }
.photo img { width: 100%; height: auto; }

/* contact sheet */
.contact-lines { display: grid; gap: var(--space-xl); }
.contact-lines .phone-xl { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-s); line-height: 1; text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap; }
.contact-lines .phone-xl:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.maplinks { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* legal text */
.legal .topic h2 { font-size: var(--text-title); max-width: 40ch; }
.legal .topic h3 { font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; letter-spacing: 0; margin-top: var(--space-sm); }
.legal p, .legal li { overflow-wrap: anywhere; }

/* not found */
.lost { padding-block: var(--section-gap); }
.lost h1 { font-size: var(--text-display-s); max-width: 16ch; margin-bottom: var(--space-lg); }
.lost p { max-width: 50ch; margin-bottom: var(--space-xl); }

/* ---------- entrance (only with JS and motion allowed; visible otherwise) ---------- */
.js.enter [data-enter] { opacity: 0; }
.js.enter .lane--hero { clip-path: inset(0 0 100% 0); }

/* ---------- responsive ---------- */
@media (max-width: 75rem) {
  .nav__list { gap: var(--space-md); }
  .nav__list a { font-size: var(--text-label); }
  .split__a { padding-right: var(--space-lg); }
  .split__b { padding-left: var(--space-lg); }
}
@media (max-width: 72rem) {
  .nav { display: none; }
  .navbar__menu { display: inline-flex; align-items: center; }
  .navbar__row { gap: var(--space-md); }
}
@media (max-width: 64rem) {
  /* below the hero the two fields stack; the lane stays only where it splits the motto and the plan */
  .person .split, .fee .split, .hours .split, .leaf__head .split, .leaf__main .split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  :is(.person, .fee, .hours, .leaf__head, .leaf__main) :is(.split__a, .split__b) { grid-column: 1; padding: 0; }
  .person .print { justify-items: start; }
  .person .print figcaption { text-align: left; justify-self: start; }
  .fee .lane, .spine--leaf > .lane { display: none; }
  .spine--leaf > .lane-band { display: block; }
  .leaf__head { padding-block: var(--space-2xl) var(--space-xl); }
  .leaf__main { padding-block: var(--space-2xl) var(--section-gap); }
  .leaf__side { position: static; }
  .leaf__main .split__b:has(.side--toc) { order: -1; }
  .place { grid-template-columns: minmax(0, 1fr); }
  .place__text { padding: var(--space-2xl) var(--gutter); }
  .place__photo { min-height: 0; aspect-ratio: 4 / 3; border-left: 0; border-top: var(--seam) solid var(--color-knick); order: 2; }
}
@media (max-width: 48rem) {
  .lane { display: none; }
  .lane-band { display: block; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__a, .split__b { grid-column: 1; padding: 0; }
  .hero { padding-block: var(--space-2xl); }
  .hero .split { row-gap: var(--space-lg); }
  .motto { display: block; }
  .hero__lede, .hero__act { grid-row: auto; }
  .hero__lede { margin-top: var(--space-xs); }
  .plan { padding-top: var(--space-2xl); }
  .plan .split { row-gap: var(--space-3xl); }
  .services { grid-template-columns: minmax(0, 1fr); }
  .lines { grid-template-columns: minmax(0, 1fr); }
  .lines dd + dt { margin-top: var(--space-xs); }
  .portrait-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}
@media (max-width: 40rem) {
  .wordmark__name { font-size: 1.625rem; }
  .parcels--2, .parcels--3 { grid-template-columns: minmax(0, 1fr); }
  .parcels .wide { grid-column: auto; }
  .parcel { min-height: 0; }
  .navbar__call .long { display: none; }
  .navbar__call .short { display: inline; }
  .wordmark__role { display: none; }
  .navbar__row { gap: var(--space-sm); }
  .courses > div, .cv > div { grid-template-columns: 5.75rem minmax(0, 1fr); gap: var(--space-md); }
  .courses dt, .cv dt { font-size: 1.25rem; }
  .navbar__call, .navbar__menu { padding-inline: var(--space-sm); }
  .foot__index ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); }
}
@media (max-width: 22.5rem) {
  .wordmark__name { font-size: 1.375rem; }
  .navbar__row { gap: var(--space-xs); }
}
@media (min-width: 72.0625rem) {
  .menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .js.enter [data-enter] { opacity: 1; }
  .js.enter .lane--hero { clip-path: none; }
}
/* the week plan reads its own width: short day names and stacked times once a day column gets narrow */
@container (max-width: 40rem) {
  .day__name { padding-inline: var(--space-2xs); justify-content: center; }
  .slot { padding: var(--space-2xs) var(--space-xs); font-size: 0.875rem; }
  .slot .bis { display: block; height: 0; overflow: hidden; }
  .day__name .long, .slot .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .day__name .short, .slot .short { display: inline; }
}
@container (max-width: 24rem) {
  .slot { padding-inline: var(--space-2xs); }
}