/* Psycholoog Claudia Conte — shared layer for the visual directions.
   Tokens, type, page chrome and the sections every direction carries.
   Each direction adds its own stylesheet on top; nothing here draws a hero.
   Fonts are self-hosted and the page makes no external requests. */

@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin.f94a697b1650.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-ext.2e01db0610b1.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-italic-latin.e97067eb043b.woff2") format("woff2");
  font-weight: 300 500; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-italic-latin-ext.43736a955d60.woff2") format("woff2");
  font-weight: 300 500; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson"; src: url("../assets/fonts/atkinson-400-latin.f1f8a8210104.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson"; src: url("../assets/fonts/atkinson-400-latin-ext.fe905e20f857.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson"; src: url("../assets/fonts/atkinson-700-latin.13a58e05dfd2.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson"; src: url("../assets/fonts/atkinson-700-latin-ext.764b69c9ccc8.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */

:root {
  --paper: #FAF7F2;
  --paper-warm: #F6F1EA;
  --blush: #F3E2E0;
  --ink: #4B3940;
  --ink-soft: #6C565D;
  --accent: #8E4F5D;
  --rose: #C9959F;
  --sage: #9EAD9C;
  --sage-deep: #50634E;

  /* Read off boom.jpg itself: its painted ground is a horizontal ramp from
     #FDEDED at the left edge to a flat #FBD9D8 from roughly 70 px inward.
     Directions that want the artwork to sit in its own light use these. */
  --wash-pale: #FDEDED;
  --wash-mid: #FCE2E1;
  --wash: #FBD9D8;

  --hairline: rgba(75, 57, 64, 0.16);
  --hairline-soft: rgba(75, 57, 64, 0.09);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --util: "Atkinson", "Segoe UI", system-ui, sans-serif;

  --petal: 1.5rem 0.25rem 1.5rem 0.25rem;
  --measure: 34rem;
  --shell: 54rem;
  --blossom-heart: var(--sage-deep);

  /* boom.jpg is 277 x 237. Nothing anywhere may render it larger. */
  --tree-w: 277px;
  --tree-h: 237px;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--sage) var(--paper-warm);
  scrollbar-width: thin;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem);
  line-height: 1.72;
  font-weight: 400;
  caret-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(201, 149, 159, 0.45); color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

h1, h2 { font-weight: 400; letter-spacing: -0.018em; text-wrap: balance; margin: 0; }

p { margin: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em;
    text-decoration-color: rgba(142, 79, 93, 0.45); }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; }
.dot { color: var(--sage-deep); padding-inline: 0.25em; }

/* language gating — works without JavaScript, Dutch is the default */
html[lang="nl"] [data-lang="en"],
html[lang="en"] [data-lang="nl"] { display: none; }

/* ---------- page chrome ---------- */

.skip {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 5;
  transform: translateY(-160%);
  background: var(--ink); color: var(--paper);
  font-family: var(--util); font-size: 0.875rem; text-decoration: none;
  padding: 0.6rem 1rem; border-radius: var(--petal);
}
.skip:focus { transform: translateY(0); }

/* ---------- prototype-review strip: not the future site navigation ---------- */

.review {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--util);
  padding: 0.6rem clamp(1rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem clamp(0.9rem, 3vw, 1.75rem);
}
.review-label {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  /* --rose itself reads 4.2 : 1 on the strip's ink and this is 11 px bold
     text, so the label takes a lightened rose that clears AA at 4.9 : 1. The
     token is unchanged: everywhere else --rose draws a line or a petal, never
     a word. */
  color: #D3A3AD;
}
.review-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.25rem clamp(0.75rem, 2.5vw, 1.5rem);
}
.review-link {
  color: rgba(250, 247, 242, 0.72);
  font-size: 0.8125rem; letter-spacing: 0.01em;
  text-decoration: none;
  padding-block: 0.15rem;
  border-bottom: 1px solid transparent;
}
.review-link:hover { color: var(--paper); border-bottom-color: var(--rose); }
.review-link[aria-current="page"] { color: var(--paper); border-bottom-color: var(--rose); }
.review :focus-visible { outline-color: var(--rose); }

/* ---------- the review strip cannot move the page either ----------
   Its labels are not the same length in the two languages — English runs
   wider across the four direction names, Dutch across the strip's own label —
   and at some widths one language wraps a row more than the other, which moved
   the masthead and everything under it by a whole row. Measured at 640 px with
   four directions listed: 74 px of strip in Dutch against 108 px in English.
   Same remedy as the notice below: both variants sit in one grid cell and the
   inactive one is hidden with `visibility` rather than removed, so every label
   is as wide as the wider language, the strip's rows are a property of the
   layout rather than of the translation, and the switch cannot move anything.
   Hiding with `visibility` also keeps the inactive text out of the
   accessibility tree while it still holds the box open. */
.review-label, .review-link { display: grid; }
.review-label > [data-lang], .review-link > [data-lang] { grid-area: 1 / 1; }
html[lang="nl"] .review-label > [data-lang="en"],
html[lang="en"] .review-label > [data-lang="nl"],
html[lang="nl"] .review-link > [data-lang="en"],
html[lang="en"] .review-link > [data-lang="nl"] { display: block; visibility: hidden; }

.notice {
  background: var(--blush);
  border-bottom: 1px solid rgba(75, 57, 64, 0.12);
  color: var(--ink);
  font-family: var(--util);
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  text-align: center;
}

/* The strip's two sentences are not the same length, so at some widths the
   Dutch one takes a line more than the English one and the whole page under it
   moved when the language changed. Both variants are stacked in one cell here
   and the inactive one is hidden rather than removed, so the strip is always as
   tall as the taller sentence and the switch cannot move anything. Hiding it
   with `visibility` keeps it out of the accessibility tree while it still holds
   the box open. */
.notice { display: grid; align-items: center; }
.notice > [data-lang] { grid-area: 1 / 1; }
html[lang="nl"] .notice > [data-lang="en"],
html[lang="en"] .notice > [data-lang="nl"] { display: block; visibility: hidden; }

/* ---------- the review dock: the way out of the review ----------
   The strips above, the wind switcher at the foot of directions 4 and 5 and
   their motion button are all prototype chrome. `body.bare` takes the two
   strips out of the document; review-view.js moves the two controls into the
   dock instead of hiding them, so they stay usable while the page reads as the
   website. The dock itself is only there while the page is being scrolled. */

body.bare .review,
body.bare .notice { display: none; }

/* the foot of the page was kept clear for the wind switcher; in the dock it no
   longer stands there */
body.bare.has-variant-bar { padding-bottom: 0; }

.dock {
  position: fixed;
  right: clamp(0.75rem, 2.5vw, 1.75rem);
  bottom: clamp(0.75rem, 2.5vw, 1.75rem);
  /* above the wind canvas (4) and above the switcher's own place (7) */
  z-index: 9;
  display: grid;
  gap: 0.35rem;
  width: max-content;
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.4rem;
  background: var(--ink);
  border-radius: 1rem 0.2rem 1rem 0.2rem;
  box-shadow: 0 14px 30px -20px rgba(75, 57, 64, 0.9);
  opacity: 0;
  transform: translateY(0.4rem);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
/* Asleep it is transparent rather than removed, so it keeps its place in the
   tab order and a keyboard can still find it. */
.dock[data-awake="true"] { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }

.dock-slot { display: grid; gap: 0.35rem; }
.dock-slot:empty { display: none; }

.dock-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-family: var(--util);
  font-size: 0.8125rem;
  line-height: 1.2;
  color: rgba(250, 247, 242, 0.82);
  background: none;
  border: 1px solid rgba(250, 247, 242, 0.22);
  border-radius: 0.9rem 0.18rem 0.9rem 0.18rem;
  cursor: pointer;
}
.dock-toggle:hover { color: var(--paper); border-color: var(--rose); }
.dock :focus-visible { outline-color: var(--rose); }

.dock-mark { flex: none; color: #D3A3AD; }
.dock-toggle[data-state="marked"] .dock-mark-show,
.dock-toggle[data-state="bare"] .dock-mark-hide { display: none; }

/* Four strings in one grid cell — two languages x two states — hidden rather
   than removed, so the dock is the width of the longest of them and neither
   the language nor the toggle changes its geometry. */
.dock-label { display: grid; }
.dock-label > [data-lang] { grid-area: 1 / 1; white-space: nowrap; text-align: left; }
html[lang="nl"] .dock-label > [data-lang="en"],
html[lang="en"] .dock-label > [data-lang="nl"] { display: block; visibility: hidden; }
.dock-toggle[data-state="marked"] .dock-label > [data-dock="show"],
.dock-toggle[data-state="bare"] .dock-label > [data-dock="hide"] { visibility: hidden; }

/* ---------- the adopted controls ----------
   The switcher is a full-width bar of its own at the foot of the page; in the
   dock it is one more block in the column. The motion button is the page's own
   quiet outline; on the dock's ink it takes the dock's voice. Both keep their
   markup, their listeners and their state. */

.dock .variant {
  position: static;
  z-index: auto;
  width: auto;
  padding: 0.15rem 0.35rem 0.3rem;
  background: none;
  box-shadow: none;
  justify-content: flex-start;
  row-gap: 0.35rem;
}
.dock .variant-label { flex-basis: 100%; }
.dock .variant-list { justify-content: flex-start; }
.dock .variant-note { text-align: left; }

/* In the corner the switcher takes the shape it already has on a narrow
   screen: the three buttons carry their letters only and the chosen variant
   is named once underneath, so the dock stays a corner and not a panel. */
.dock .variant-name { display: none; }
.dock .variant-current { display: grid; flex-basis: 100%; justify-items: start; }
.dock .variant-option { padding-inline: 0.75rem; }

.dock .motion {
  margin-top: 0;
  justify-content: flex-start;
  padding-inline: 0.85rem;
  color: rgba(250, 247, 242, 0.82);
  border-color: rgba(250, 247, 242, 0.22);
}
.dock .motion:hover { color: var(--paper); border-color: var(--rose); }
.dock .motion-mark { color: #D3A3AD; }

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.35rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--hairline-soft);
}

.brand {
  display: flex; align-items: center; gap: 0.9rem;
  text-decoration: none; color: inherit;
}
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.brand-role {
  font-family: var(--util); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-deep);
}
.brand-person { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); letter-spacing: -0.015em; }

.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; margin: 0; padding: 0; }
.nav a {
  font-family: var(--util); font-size: 0.875rem; color: var(--ink);
  text-decoration: none; padding-block: 0.15rem;
  border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--rose); }

/* ---------- the narrow masthead states its rows ----------
   Dutch runs about 35 px wider than English across these four labels, which is
   enough to push the navigation or the language control onto one more wrapped
   row than English takes. Everything under it then moved when the language
   changed. So below the width where brand, navigation and language control fit
   on one line in *both* languages, the masthead stops wrapping and says what
   its rows are: the brand on its own line, the navigation and the language
   control on the line beneath it. The navigation becomes a two-column block
   that is two rows deep whichever language is showing. Row allocation is a
   property of the layout here, not of how long the translated words happen to
   be, so the switch cannot move anything. */
@media (max-width: 51.99rem) {
  .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand brand"
      "nav   lang";
    column-gap: 1rem;
  }
  .brand { grid-area: brand; }
  .nav { grid-area: nav; }
  .lang { grid-area: lang; }

  .nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
    gap: 0.35rem 1.4rem;
  }

  /* With scripting off the compact trigger is replaced by both language names
     written out, which needs far more than the trigger's 72 px. Give it a row
     of its own there so the navigation keeps the full width; the switch cannot
     move anything in that state anyway, because switching is the one part that
     needs script. */
  @media (scripting: none) {
    .masthead {
      grid-template-areas:
        "brand brand"
        "nav   nav"
        "lang  lang";
    }
    .lang { justify-self: end; }
    .lang-menu { flex-wrap: wrap; justify-content: flex-end; }
  }
}

/* The disclosure is enhanced only after its handlers exist. With no script
   (or if it fails to load), the original navigation remains fully available.
   The panel grows in the page flow, so it never covers or strands content. */
/* `hidden` owns visibility, including at the breakpoint. CSS must not hide
   a focused trigger before fitNav can transfer its focus to the desktop links. */
.nav-toggle { display: inline-flex; }
.nav[hidden], .nav-toggle[hidden] { display: none; }

@media (max-width: 51.99rem) {
  .masthead[data-nav-ready] {
    grid-template-areas:
      "brand  brand"
      "toggle lang"
      "nav    nav";
  }
  .nav-toggle {
    grid-area: toggle;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.65rem;
    font-family: var(--util);
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--ink-soft);
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 0.9rem 0.18rem 0.9rem 0.18rem;
    cursor: pointer;
  }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] {
    color: var(--ink);
    border-color: var(--accent);
  }
  .nav-toggle svg { flex: none; color: var(--sage-deep); }
  .nav-cross, .nav-toggle[aria-expanded="true"] .nav-line { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-cross { display: block; }
  .masthead[data-nav-ready] .nav {
    border-top: 1px solid var(--hairline-soft);
    padding-top: 0.5rem;
  }
  .masthead[data-nav-ready] .nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1rem;
  }
  .masthead[data-nav-ready] .nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.25rem;
  }
}

/* ---------- language: one compact menu, never a shifting row ----------
   The trigger carries the active code and keeps a fixed 72 x 44 footprint. That
   is necessary but not sufficient: what actually stops the masthead moving is
   the row allocation above, which does not depend on the language. Without
   JavaScript the <noscript> rule in each page's head unfolds the menu into a
   plain row, so both languages stay reachable and readable. */

.lang { position: relative; z-index: 6; margin-left: auto; }

.lang-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 4.5rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  font-family: var(--util);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 0.9rem 0.18rem 0.9rem 0.18rem;
  cursor: pointer;
}
.lang-trigger:hover { color: var(--ink); border-color: var(--accent); }
.lang-trigger[aria-expanded="true"] { color: var(--ink); border-color: var(--accent); }

.lang-code { font-variant-numeric: tabular-nums; }

.lang-chevron { flex: none; color: var(--sage-deep); }
.lang-trigger[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .lang-chevron { transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1); }
}

.lang-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  display: none;
  min-width: 10rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem 0.18rem 0.9rem 0.18rem;
  box-shadow: 0 12px 28px -20px rgba(75, 57, 64, 0.9);
}
.lang[data-open="true"] .lang-menu { display: block; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.7rem;
  font-family: var(--util);
  font-size: 0.8125rem;
  text-align: left;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 0.6rem 0.12rem 0.6rem 0.12rem;
  cursor: pointer;
}
.lang-option::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
}
.lang-option:hover { color: var(--ink); background: var(--paper-warm); }
.lang-option[aria-checked="true"] { color: var(--ink); }
.lang-option[aria-checked="true"]::before { background: var(--accent); }

/* ---------- shared hero furniture ---------- */

.lead {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  line-height: 1.62;
  color: var(--ink);
  max-width: 32rem;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.cta {
  font-family: var(--util); font-size: 0.9375rem; line-height: 1.2;
  text-decoration: none; border-radius: var(--petal);
  padding: 0.95rem 1.6rem; display: inline-block;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.cta-primary { background: var(--ink); color: var(--paper); }
.cta-primary:hover { background: #3B2C31; }
.cta-quiet { color: var(--ink); border: 1px solid var(--hairline); padding-block: calc(0.95rem - 1px); }
.cta-quiet:hover { border-color: var(--accent); color: var(--accent); }

.glance {
  font-family: var(--util); font-size: 0.875rem; line-height: 1.7;
  color: var(--ink-soft); margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 32rem;
}

/* the tax statement that has to sit beside every visible price */
.price-note {
  display: block;
  font-family: var(--util); font-size: 0.8125rem; line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  max-width: 30rem;
}

/* ---------- sections every direction carries ---------- */

.section h2 {
  font-size: clamp(1.55rem, 1.25rem + 1.1vw, 2.1rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.portrait-layout { display: grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
@media (min-width: 44rem) {
  .portrait-layout { grid-template-columns: minmax(0, 13.75rem) minmax(0, 1fr); }
}
.portrait {
  width: 100%;
  max-width: 13.75rem;
  border-radius: var(--petal);
  box-shadow: 0 14px 30px -24px rgba(75, 57, 64, 0.85);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1rem; }

/* Editor-written pages: their headings divide one text, so they sit closer to
   what follows than to what precedes, and smaller than a section heading. */
.page-body h1 { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.page-body .prose :is(h2, h3) { margin: 2.25rem 0 0.6rem; }
.page-body .prose h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); }
.page-body .prose h3 { font-size: 1.15rem; font-weight: 400; }
.page-body .prose > :first-child { margin-top: 0; }
.page-body .prose :is(ul, ol) { margin: 0.75rem 0 0; padding-left: 1.25rem; }
.page-body .prose li + li { margin-top: 0.5rem; }
.page-body .prose :is(ul, ol) + p { margin-top: 1.1rem; }

/* copy Claudia still has to write, marked as such rather than invented */
.pending {
  font-family: var(--util); font-size: 0.8125rem; line-height: 1.7;
  color: var(--ink-soft);
  border-left: 1px solid var(--hairline);
  padding-left: 0.9rem;
}

.notes { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: var(--measure); }
.note { padding-block: 1.15rem; border-top: 1px solid var(--hairline-soft); }
.note:first-child { border-top: 0; padding-top: 0.25rem; }
.note-lead {
  font-weight: 400; font-style: italic; color: var(--accent);
  margin-right: 0.35em;
}

.practical { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }

.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 26rem) {
  .facts { grid-template-columns: 8rem minmax(0, 1fr); }
}
.facts dt {
  font-family: var(--util); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--sage-deep);
  padding-top: 0.95rem; border-top: 1px solid var(--hairline-soft);
}
.facts dd { margin: 0; padding-top: 0.55rem; padding-bottom: 0.95rem; }
@media (min-width: 26rem) {
  .facts dd { padding-top: 0.85rem; border-top: 1px solid var(--hairline-soft); }
  .facts dt { padding-bottom: 0.95rem; }
}
.facts dt:first-of-type, .facts dd:first-of-type { border-top: 0; padding-top: 0; }
.facts a { overflow-wrap: break-word; }

.reach {
  font-family: var(--util); font-size: 0.8125rem; line-height: 1.7;
  color: var(--ink-soft); margin-top: 1.5rem; max-width: 26rem;
}

.colophon {
  border-top: 1px solid var(--hairline-soft);
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: space-between;
}
.colophon-brand { font-size: 0.9375rem; }
.colophon-note { font-family: var(--util); font-size: 0.8125rem; color: var(--ink-soft); }
.colophon-legal {
  flex-basis: 100%;
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem;
  margin: 0.5rem 0 0; padding: 0; list-style: none;
  font-family: var(--util); font-size: 0.75rem; color: var(--ink-soft);
}

/* Real language links retain the approved button treatment. */
a.lang-option { text-decoration: none; }