/* Hallmark · shape: one letter board in its frame (Wechselbuchstabentafel); Long Document notices on every inner route · genre: editorial · theme: custom · redesign: full · job: book (by phone) · idea: "the site is the changeable-letter board in the Kanzlei entrance: who is in the house, what they handle, when the door is open, reset to today" · vibe: "bordeaux felt, white letters, aluminium frame, posted notices"
 * paper: oklch(30% 0.078 18) board, oklch(98.5% 0.005 30) notices · accent: oklch(87% 0.16 92) · display: Sofia Sans Semi Condensed · body: Atkinson Hyperlegible Next · hero: the motto set in letter rows on the board, the call plate, today's hours that reset themselves, the portrait in an aluminium frame · nav: the frame's top rail, wordmark, six directory links, the call plate · footer: the frame's bottom rail, a dense block of every office and legal fact · imagery: the user's portraits (2) and waiting-room photo (1), the OpenStreetMap plan on the board · signature: board rows that reset letter by letter, today's hours on load and a matter's contents when it is chosen
 * axes: dark/display-condensed/chromatic-yellow · posture: drenched (the page is the board; white notices and the aluminium frame are the only other surfaces) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: E, letter-by-letter resets risk jank; letters move by transform only, reuse their own spans and never animate under reduced motion */
/* Hallmark · waive 77 · the close band is one head and the phone number, once a page · every Kanzlei notice ends on the board with 04349 1402, the number the visitor came for */
/* Hallmark · waive 78 · Long Document notices set their reading heads at the xl step · on the Arbeitsrecht, Erbrecht and Datenschutz notices each head titles the paragraphs under it, while the board heads keep the section size */
/* Hallmark · dismissed 77 · the inner routes are Long Document notices: the page head, one posted notice and the close, all on the one board */
/* Hallmark · waive 49b · the BfDI web address in the Datenschutzerklärung wraps to three lines at 320px and two at 768px · the legal text stays unreworded, so the Bundesbeauftragte address cannot shorten */
/* Impeccable · direction: Wechselbuchstabentafel, seed:bd1edbbab7c3f231, code-led */
@import url("./tokens.css");
@import url("./base.css");
@import url("./fonts.css");

/* ---------------------------------------------------------------- page */
body { font-size: var(--text-md); line-height: 1.65; background: var(--color-board); color: var(--color-letter); }
.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-letter); color: var(--color-board); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: var(--space-md); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* ---------------------------------------------------------------- the board */
/* ribs every groove; text, gaps and padding on the board step in whole grooves */
.board {
  --color-focus: var(--color-signal);
  background-color: var(--color-board);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--groove) - 1px), var(--color-board-2) calc(var(--groove) - 1px) var(--groove));
  color: var(--color-letter);
  border-inline: var(--frame) solid var(--color-alu);
}
/* the frame's inner lip, where the aluminium profile meets the board */
main.board { position: relative; }
main.board::before { content: ""; position: absolute; inset: 0; border: 3px solid var(--color-alu-2); border-top-width: 4px; border-bottom-width: 4px; pointer-events: none; z-index: var(--z-base); }
.board ::selection { background: var(--color-signal); color: var(--color-signal-ink); }
.letters { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-display); font-synthesis: none; }
.board h1, .board h2, .board h3 { font-weight: 600; letter-spacing: var(--tracking-display); }
.board h1 { font-size: var(--text-display); line-height: 1.08; line-height: round(up, 1.04em, var(--groove)); }
.board h2 { font-size: var(--text-section); line-height: 1.1; line-height: round(up, 1.06em, var(--groove)); }
.row { font-family: var(--font-display); font-size: var(--text-lg); line-height: calc(var(--groove) * 4); }
.row--lead { font-size: var(--text-lead); line-height: calc(var(--groove) * 4); }
.row--soft { color: var(--color-letter-2); }
.row--signal { color: var(--color-signal); }
.board a:not([class]) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--dur-micro) var(--ease-out); }
.board a:not([class]):hover { color: var(--color-signal); text-decoration-thickness: 2px; }
.board a.row { color: var(--color-letter); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: color var(--dur-micro) var(--ease-out); }
.board a.row:hover { color: var(--color-signal); text-decoration-thickness: 2px; }
.board a.row:focus-visible, .board a:not([class]):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* a letter that resets: spans per letter, words keep together */
.reset-line .w { display: inline-block; white-space: nowrap; }
.reset-line .l { display: inline-block; white-space: pre; }

/* ---------------------------------------------------------------- the frame: top rail */
.rail { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-alu); color: var(--color-ink); border-bottom: 1px solid var(--color-alu-2); }
.rail__bar { display: flex; align-items: center; gap: var(--space-lg) var(--space-md); min-height: var(--rail-height); }
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; white-space: nowrap; margin-right: auto; }
.wordmark__name { font: 600 1.75rem/1 var(--font-display); letter-spacing: var(--tracking-display); }
.wordmark__role { font: 400 var(--text-sm)/1 var(--font-display); color: var(--color-ink-2); }
.wordmark:hover .wordmark__name { color: var(--color-board); }
.rail__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.rail__links a { display: inline-flex; align-items: center; min-height: 44px; font: 400 var(--text-md)/1 var(--font-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.rail__links a:hover { color: var(--color-board); border-bottom-color: var(--color-alu-2); }
.rail__links a[aria-current="page"] { border-bottom-color: var(--color-board); }
.rail__menu { display: none; min-height: 44px; padding: 0 var(--space-md); border: 2px solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-display); cursor: pointer; }
.rail__menu:hover { background: var(--color-alu-2); }
.rail__menu:active { transform: translateY(1px); }
.rail__menu:disabled { opacity: 0.55; cursor: not-allowed; }
.menu { padding-block: var(--space-lg) var(--space-xl); }
.menu ul { display: grid; gap: 0; margin: 0; list-style: none; }
.menu a { display: flex; align-items: center; min-height: calc(var(--groove) * 7); font: 600 var(--text-title)/1 var(--font-display); color: var(--color-letter); text-decoration: none; border-bottom: 1px solid var(--color-board-3); }
.menu a[aria-current="page"] { color: var(--color-signal); }
@media (max-width: 64rem) {
  .rail__links { display: none; }
  .rail__menu { display: inline-flex; align-items: center; }
  .wordmark__role { display: none; }
}
@media (max-width: 30rem) { .rail__bar { gap: var(--space-xs); } .rail .plate--quiet, .rail__menu { padding-inline: var(--space-sm); } .wordmark__name { font-size: 1.5rem; } }
@media (min-width: 64.01rem) { .menu { display: none !important; } }

/* ---------------------------------------------------------------- plates (controls) */
.plate { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 2px solid var(--color-letter); border-radius: 0; background: var(--color-letter); color: var(--color-board); font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.plate:hover { background: var(--color-signal); border-color: var(--color-signal); color: var(--color-signal-ink); }
.plate:active { transform: translateY(1px); }
.plate:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.plate:disabled, .plate[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.plate--quiet { min-height: 44px; padding: 0 var(--space-md); border-color: var(--color-ink); background: transparent; color: var(--color-ink); font-size: var(--text-md); }
.plate--quiet:hover { background: var(--color-board); border-color: var(--color-board); color: var(--color-letter); }

/* ---------------------------------------------------------------- portraits in the frame */
.framed { margin: 0; border: var(--frame) solid var(--color-alu); background: var(--color-paper); }
.framed img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- start: the board's first screen */
.hero { padding-block: calc(var(--groove) * 10) calc(var(--groove) * 9); }
.hero__grid { row-gap: calc(var(--groove) * 6); align-items: start; }
.hero__text { grid-column: 1 / span 8; display: grid; gap: calc(var(--groove) * 4); }
.hero__title { max-width: 20ch; }
@media (max-width: 40rem) { .hero__title br { display: none; } }
.hero__lede { max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); }
.hero__person { grid-column: 10 / span 3; display: grid; gap: calc(var(--groove) * 2); margin: 0; }
.hero__person .framed { max-width: 300px; }
.hero__today { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-top: calc(var(--groove) * 3); border-top: 2px solid var(--color-board-3); }
.today { grid-column: 1 / span 7; }
.today__when { color: var(--color-letter-2); }
.today__state { min-height: calc(var(--groove) * 4); }
.today__state.is-open { color: var(--color-signal); }
.where { grid-column: 9 / span 4; }
@media (max-width: 80rem) { .hero__text { grid-column: 1 / span 8; } .hero__person { grid-column: 9 / span 4; } }
@media (max-width: 60rem) {
  .hero { padding-block: calc(var(--groove) * 7) calc(var(--groove) * 7); }
  .hero__text, .hero__person { grid-column: 1 / -1; }
  .hero__person { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); align-items: end; column-gap: var(--gap-columns); }
  .hero__person .row { font-size: var(--text-md); line-height: calc(var(--groove) * 3); }
  .today, .where { grid-column: 1 / -1; }
  .where { margin-top: calc(var(--groove) * 3); }
}

/* ---------------------------------------------------------------- start: the directory */
.directory { padding-block: calc(var(--groove) * 15) calc(var(--groove) * 16); }
.directory__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: calc(var(--groove) * 3); align-items: end; }
.directory__head h2 { grid-column: 1 / -1; }
.directory__answer { grid-column: 1 / -1; min-height: calc(var(--groove) * 8); max-width: 60ch; color: var(--color-letter-2); }
.directory__answer.is-active { color: var(--color-letter); }
.directory__cols { margin-top: calc(var(--groove) * 7); row-gap: calc(var(--groove) * 7); }
.directory__col { min-width: 0; }
.directory__col--notar { grid-column: 1 / span 7; }
.directory__col--anwalt { grid-column: 8 / span 5; }
.directory__colhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-md); padding-bottom: calc(var(--groove) * 2); border-bottom: 2px solid var(--color-letter-2); }
.directory__colhead h3 { font-size: var(--text-title); line-height: calc(var(--groove) * 4); color: var(--color-letter); }
.directory__colhead p { font: 400 var(--text-sm)/calc(var(--groove) * 3) var(--font-display); color: var(--color-letter-2); }
.dir { margin: 0; padding: 0; list-style: none; }
.dir a { display: block; padding-block: calc(var(--groove) * 1) calc(var(--groove) * 1); font: 600 var(--text-title)/calc(var(--groove) * 5) var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-letter); text-decoration: none; border-bottom: 1px solid var(--color-board-3); transition: color var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.dir a:hover { color: var(--color-signal); }
.dir a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.dir.is-isolating a:not(.is-chosen) { opacity: 0.55; }
.dir a.is-chosen { color: var(--color-signal); }
@media (max-width: 60rem) {
  .directory { padding-block: calc(var(--groove) * 10); }
  .directory__head h2, .directory__answer, .directory__col--notar, .directory__col--anwalt { grid-column: 1 / -1; }
  .directory__answer { display: none; }
}

/* ---------------------------------------------------------------- notices: white sheets on the board */
.sheet { --color-focus: var(--color-focus-paper); background: var(--color-paper); color: var(--color-ink); padding: var(--space-2xl); }
.sheet ::selection { background: var(--color-signal); color: var(--color-signal-ink); }
.sheet h2, .sheet h3 { color: var(--color-ink); font-weight: 600; letter-spacing: var(--tracking-display); }
.sheet a:not([class]) { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-micro) var(--ease-out); }
.sheet a:not([class]):hover { color: var(--color-board); text-decoration-thickness: 2px; }
.sheet .lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; }
.sheet .plate { border-color: var(--color-board); background: var(--color-board); color: var(--color-letter); }
.sheet .plate:hover { border-color: var(--color-board-3); background: var(--color-board-3); color: var(--color-letter); }
@media (max-width: 40rem) { .sheet { padding: var(--space-xl) var(--space-lg); } }

/* ---------------------------------------------------------------- start: the person */
.person { padding-block: calc(var(--groove) * 6) calc(var(--groove) * 18); }
.person__grid { align-items: start; row-gap: calc(var(--groove) * 7); }
.person__sheet { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); }
.person__sheet h2 { font-size: var(--text-section); line-height: 1.08; max-width: 18ch; }
.person__sheet p:not([class]) { max-width: 58ch; }
.floors { grid-column: 9 / span 4; }
.floors h3 { font-size: var(--text-title); line-height: calc(var(--groove) * 4); color: var(--color-letter-2); padding-bottom: calc(var(--groove) * 2); }
.floors ol { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-letter-2); }
.floors li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-md); padding-block: calc(var(--groove) * 1) calc(var(--groove) * 1); border-bottom: 1px solid var(--color-board-3); font-family: var(--font-display); font-size: var(--text-md); line-height: calc(var(--groove) * 3); }
.floors b { font-weight: 600; font-variant-numeric: tabular-nums; }
.floors li.is-now span { font-weight: 600; }
@media (max-width: 60rem) { .person__sheet, .floors { grid-column: 1 / -1; } .person { padding-bottom: calc(var(--groove) * 12); } }

/* ---------------------------------------------------------------- start: appointments */
.desk { padding-block: 0 calc(var(--groove) * 18); }
.desk__grid { align-items: start; row-gap: calc(var(--groove) * 7); }
.desk__photo { grid-column: 1 / span 3; }
.desk__text { grid-column: 4 / span 5; display: grid; gap: calc(var(--groove) * 3); }
.desk__text h2 { max-width: 16ch; }
.desk__lede { max-width: 40ch; }
.phone { font: 600 var(--text-phone)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-letter); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.phone:hover { color: var(--color-signal); }
.phone:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.desk__hours { grid-column: 9 / span 4; }
@media (max-width: 80rem) { .desk__photo { grid-column: 1 / span 4; } .desk__text { grid-column: 5 / span 8; } .desk__hours { grid-column: 5 / span 8; } }
@media (max-width: 60rem) { .desk__photo { grid-column: 1 / span 6; max-width: 16rem; } .desk__text, .desk__hours { grid-column: 1 / -1; } }

/* office hours set on the board */
.hours { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; font-weight: 600; font-size: var(--text-title); line-height: calc(var(--groove) * 4); padding-bottom: calc(var(--groove) * 2); color: var(--color-letter-2); }
.hours th, .hours td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; text-align: left; font-weight: 400; line-height: calc(var(--groove) * 3); border-bottom: 1px solid var(--color-board-3); white-space: nowrap; }
.hours thead th { color: var(--color-letter-2); border-bottom: 2px solid var(--color-letter-2); }
.hours tbody th { font-weight: 600; }
.hours td.is-closed { color: var(--color-letter-2); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--color-signal); }
@media (max-width: 30rem) { .hours { font-size: var(--text-sm); } }

/* ---------------------------------------------------------------- start: the fee notice */
.fee { padding-block: 0 calc(var(--groove) * 18); }
.fee__sheet { grid-column: 3 / span 9; display: grid; gap: var(--space-xl); }
.fee__sheet h2 { font-size: var(--text-section); line-height: 1.08; max-width: 24ch; }
.fee__aside { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-columns); row-gap: var(--space-md); align-items: end; padding-top: var(--space-lg); border-top: 2px solid var(--color-ink); }
.fee__aside p:last-child { justify-self: end; white-space: nowrap; }
@media (max-width: 48rem) { .fee__aside { grid-template-columns: minmax(0, 1fr); } .fee__aside p:last-child { justify-self: start; } }
@media (max-width: 60rem) { .fee__sheet { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); } .fee { padding-bottom: calc(var(--groove) * 12); } }

/* ---------------------------------------------------------------- inner routes: page head on the board */
.pagehead { padding-block: calc(var(--groove) * 10) calc(var(--groove) * 15); }
.pagehead__grid { row-gap: calc(var(--groove) * 3); }
.pagehead__text { grid-column: 1 / span 9; display: grid; gap: calc(var(--groove) * 3); }
.pagehead h1 { font-size: var(--text-display-s); line-height: 1.08; line-height: round(up, 1.04em, var(--groove)); max-width: 22ch; }
.pagehead__lead { max-width: 44ch; color: var(--color-letter-2); }
@media (max-width: 60rem) { .pagehead { padding-block: calc(var(--groove) * 7) calc(var(--groove) * 6); } .pagehead__text { grid-column: 1 / -1; } }

/* the notice and the board's side column */
.notices { padding-bottom: calc(var(--groove) * 16); }
.notices__grid { align-items: start; row-gap: calc(var(--groove) * 6); }
.notice { grid-column: 1 / span 8; }
.notices__aside { grid-column: 10 / span 3; position: sticky; top: calc(var(--rail-height) + var(--space-xl)); display: grid; gap: calc(var(--groove) * 5); }
.toc h2 { font-size: var(--text-title); line-height: calc(var(--groove) * 4); color: var(--color-letter-2); padding-bottom: calc(var(--groove) * 1); border-bottom: 2px solid var(--color-letter-2); }
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding-block: calc(var(--groove) * 1); font: 600 var(--text-lg)/calc(var(--groove) * 3) var(--font-display); color: var(--color-letter); text-decoration: none; border-bottom: 1px solid var(--color-board-3); }
.toc a:hover { color: var(--color-signal); }
.toc a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.aside-up a { color: var(--color-letter); }
.aside-call { display: grid; gap: calc(var(--groove) * 1); }
.aside-call .phone { font-size: var(--text-section); }
@media (max-width: 64rem) { .notice { grid-column: 1 / span 12; } .notices__aside { grid-column: 1 / -1; position: static; order: -1; } .aside-call { display: none; } }

/* reading text on the notice */
.notice { padding: var(--space-2xl) var(--space-2xl) var(--space-3xl); }
.notice__intro { display: grid; gap: var(--space-md); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: 2px solid var(--color-ink); }
.notice__intro .statement { font: 600 var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 30ch; text-wrap: balance; }
.topic { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-content: start; padding-block: var(--space-xl); scroll-margin-top: calc(var(--rail-height) + var(--space-lg)); }
.topic + .topic { border-top: 1px solid var(--color-rule); }
.topic h2 { font-size: var(--text-xl); line-height: 1.2; max-width: 34ch; }
.topic__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.topic__body h3 { font-size: var(--text-lg); line-height: 1.3; margin-top: var(--space-sm); }
.topic__body ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-xs); max-width: 62ch; }
.topic__body li::marker { color: var(--color-board); }
.topic__body p, .topic__body li { max-width: 65ch; }
@media (max-width: 48rem) { .topic__body p, .topic__body li { hyphens: auto; hyphenate-limit-chars: 12 5 5; } }
.legal .topic__body p, .legal .topic__body li, .legal .topic__body a { overflow-wrap: break-word; }
@media (max-width: 40rem) { .notice { padding: var(--space-xl) var(--space-lg) var(--space-2xl); } }

/* notary groups: two columns of lists on the notice */
.groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gap-columns) * 2); }
.groups .topic:nth-child(2) { border-top: 0; }
.group__note { color: var(--color-ink-2); }
.groups .topic:last-child:nth-child(odd) { grid-column: 1 / -1; }
.groups .topic:last-child:nth-child(odd) ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--gap-columns) * 2); max-width: none; }
@media (max-width: 48rem) { .groups { grid-template-columns: minmax(0, 1fr); } .groups .topic:nth-child(2) { border-top: 1px solid var(--color-rule); } .groups .topic:last-child:nth-child(odd) ul { grid-template-columns: minmax(0, 1fr); } }

/* the CV table on the notice */
.cv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cv th, .cv td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); }
.cv thead th { font: 600 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink-2); border-bottom: 2px solid var(--color-ink); white-space: nowrap; }
.cv tbody th { font: 600 var(--text-md)/1.4 var(--font-display); white-space: nowrap; width: 7rem; }

/* people on the Kanzlei page */
.people { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-top: var(--space-xl); }
.people__item { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.people__item .framed { border-width: 6px; }
.people__item h2 { font-size: var(--text-xl); line-height: 1.2; }
.people__item div { display: grid; gap: var(--space-xs); }
@media (max-width: 48rem) { .people { grid-template-columns: minmax(0, 1fr); } .people__item { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); column-gap: var(--space-md); } }
.person-doc { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; padding-bottom: var(--space-xl); }
.person__body { display: grid; gap: var(--space-md); }
@media (max-width: 40rem) { .person-doc { grid-template-columns: minmax(0, 1fr); } .person-doc .framed { max-width: 13rem; } }

/* steps of a notarial appointment, on the board */
.steps { padding-bottom: calc(var(--groove) * 16); }
.steps h2 { grid-column: 1 / span 6; }
.steps__lede { grid-column: 7 / span 6; align-self: end; color: var(--color-letter-2); max-width: 44ch; }
.steps ol { grid-column: 1 / -1; margin: calc(var(--groove) * 6) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); counter-reset: step; }
.steps li { display: grid; gap: calc(var(--groove) * 2); align-content: start; padding-top: calc(var(--groove) * 2); border-top: 2px solid var(--color-letter-2); }
.steps h3 { font-size: var(--text-title); line-height: calc(var(--groove) * 4); }
.steps li p { font-family: var(--font-body); color: var(--color-letter); max-width: 46ch; line-height: 1.65; }
.steps li:nth-child(2) { margin-top: calc(var(--groove) * 6); }
.steps li:nth-child(3) { margin-top: calc(var(--groove) * 12); }
@media (max-width: 60rem) { .steps h2, .steps__lede { grid-column: 1 / -1; } .steps ol { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--groove) * 5); } .steps li:nth-child(n) { margin-top: 0; } }

/* the four practice areas as directory rows */
.areas { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-letter-2); }
.areas a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: calc(var(--groove) * 3); color: var(--color-letter); text-decoration: none; border-bottom: 1px solid var(--color-board-3); transition: color var(--dur-micro) var(--ease-out); }
.areas a:hover .areas__name { color: var(--color-signal); }
.areas a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.areas__name { font: 600 var(--text-section)/1.05 var(--font-display); letter-spacing: var(--tracking-display); }
.areas__line { font: 400 var(--text-lg)/calc(var(--groove) * 4) var(--font-display); color: var(--color-letter-2); }
.areas-wrap { padding-bottom: calc(var(--groove) * 16); }
@media (max-width: 48rem) { .areas a { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--groove) * 1); } }

/* the close at the foot of the board */
.close { padding-block: calc(var(--groove) * 12) calc(var(--groove) * 14); border-top: var(--frame) solid var(--color-alu); }
.close__grid { align-items: end; row-gap: calc(var(--groove) * 4); }
.close h2 { grid-column: 1 / span 6; max-width: 18ch; }
.close__act { grid-column: 7 / span 6; display: grid; gap: calc(var(--groove) * 2); justify-items: start; }
@media (max-width: 60rem) { .close h2, .close__act { grid-column: 1 / -1; } }

/* contact */
.contact { padding-block: calc(var(--groove) * 10) calc(var(--groove) * 15); }
.contact-more { padding-bottom: calc(var(--groove) * 16); }
.contact-more__grid { row-gap: calc(var(--groove) * 10); }
.contact__grid { row-gap: calc(var(--groove) * 8); align-items: start; }
.contact__main { grid-column: 1 / span 7; display: grid; gap: calc(var(--groove) * 3); }
.contact__main h1 { font-size: var(--text-display-s); line-height: 1.08; max-width: 18ch; }
.contact__hours { grid-column: 9 / span 4; }
.contact__blocks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: calc(var(--groove) * 5); padding-top: calc(var(--groove) * 4); border-top: 2px solid var(--color-letter-2); }
.contact__blocks h2 { font-size: var(--text-title); line-height: calc(var(--groove) * 4); color: var(--color-letter-2); }
.contact__blocks address, .contact__blocks p { font: normal 400 var(--text-lg)/calc(var(--groove) * 4) var(--font-display); }
.contact__photo { grid-column: 1 / -1; max-width: 960px; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.contact__photo .framed { grid-column: 1 / -1; }
.contact__photo figcaption { grid-column: 1 / -1; margin-top: var(--space-sm); font: 400 var(--text-md)/calc(var(--groove) * 3) var(--font-display); color: var(--color-letter-2); }
@media (max-width: 60rem) { .contact__main, .contact__hours, .contact__photo .framed, .contact__photo figcaption { grid-column: 1 / -1; } .contact__blocks { grid-template-columns: minmax(0, 1fr); } .contact__photo figcaption { margin-top: var(--space-sm); } }

/* the plan of the village centre, drawn on the board from OpenStreetMap data */
.route { padding-bottom: calc(var(--groove) * 14); }
.route__map { margin: 0; aspect-ratio: 1100 / 760; width: 100%; border: var(--frame) solid var(--color-alu); background: var(--color-board-2); color: var(--color-letter-2); }
.route__map svg { width: 100%; height: 100%; }
.plan { display: block; width: 100%; height: 100%; color: inherit; }
.plan path { vector-effect: non-scaling-stroke; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.plan .plan__houses { stroke-width: 0.75; opacity: 0.38; }
.plan .plan__green { stroke: none; fill: currentColor; opacity: 0.08; }
.plan__paths path { stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.55; }
.plan__minor path { stroke-width: 1.6; opacity: 0.85; }
.plan__major path { stroke-width: 3.2; stroke: var(--color-letter); }
.plan__focus path { stroke-width: 8; stroke: var(--color-signal); }
.plan__label { font: 400 15px var(--font-display); fill: var(--color-letter); paint-order: stroke; stroke: var(--color-board-2); stroke-width: 5px; stroke-linejoin: round; }
.plan__label--focus { font-size: 19px; font-weight: 600; fill: var(--color-signal); }
.plan__scale path { stroke-width: 2; }
.plan__scale text, .plan__north text { font: 400 14px var(--font-display); fill: currentColor; }
.plan__north path { stroke-width: 1.6; }
.route__caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-xl); margin-top: var(--space-md); font: 400 var(--text-sm)/1.5 var(--font-display); color: var(--color-letter-2); }
.route__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); margin-top: calc(var(--groove) * 5); }
@media (max-width: 40rem) { .route__map { aspect-ratio: 4 / 5; } }

/* not found */
.lost { padding-block: calc(var(--groove) * 12) calc(var(--groove) * 16); }
.lost h1 { font-size: var(--text-display-s); max-width: 18ch; }
.lost .row { margin-block: calc(var(--groove) * 3) calc(var(--groove) * 6); color: var(--color-letter-2); }

/* ---------------------------------------------------------------- the frame: bottom rail */
.foot { background: var(--color-alu); color: var(--color-ink); border-top: 1px solid var(--color-alu-2); padding-block: var(--space-2xl) var(--space-xl); font-family: var(--font-display); font-size: var(--text-sm); line-height: 1.5; }
.foot a { color: var(--color-ink); text-underline-offset: 0.2em; }
.foot a:hover { color: var(--color-board); text-decoration-thickness: 2px; }
.foot__grid { align-items: start; row-gap: var(--space-xl); }
.foot__office { grid-column: 1 / span 4; display: grid; gap: var(--space-sm); }
.foot__name { font: 600 var(--text-title)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.foot__office address { font-style: normal; }
.foot__lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-md); margin: 0; }
.foot__lines dt { color: var(--color-ink-2); }
.foot__lines dd { margin: 0; }
.foot__index { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); }
.foot__index p { font-weight: 600; margin-bottom: var(--space-2xs); }
.foot__index p a { text-decoration: none; }
.foot__index p a:hover { text-decoration: underline; }
.foot__index ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.foot__legal { grid-column: 6 / span 7; padding-top: var(--space-lg); border-top: 1px solid var(--color-alu-2); color: var(--color-ink-2); max-width: 56ch; }
@media (max-width: 64rem) { .foot__office, .foot__index, .foot__legal { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .foot__index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .dir a, .plate, .rail__links a { transition: none; }
}