/* The whole stylesheet. No framework, no @import; the only url()s are same-origin @font-face
   sources, which is what the font-src 'self' line in web.config's CSP declares. Palette and
   composition are the round-3 mockups (docs/design/2026-08-09-redesign/); the palette values
   are handoff-sitebuilder.md §5 verbatim. Dark is the base; light overrides via
   prefers-color-scheme. The reader is often looking for one fact under stress, sometimes at
   night — hence the OS-following theme and no toggle. */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --bg: #161826;            --strip: #292b31;
  --text: #e9e9ed;          --body: #cfd3e5;
  --muted: #9397ab;         --muted-2: #b2b6ca;
  --border: #3f424d;        --border-strong: #595d6c;
  --rule: rgba(233, 233, 237, .10);
  --rule-2: rgba(233, 233, 237, .18);
  --accent: #9184d9;        --link: #d2cefd;
  --btn-text: #e7e5fe;      --tint: rgba(145, 132, 217, .07);
  --scrim-a: rgba(22, 24, 38, .80);
  --scrim-b: rgba(22, 24, 38, .55);
  --blend: lighten;
  --focus: #9184d9;
  --logo-chip: #f3f5fe;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f5fe;          --strip: #e4e7f5;
    --text: #292b31;        --body: #3f424d;
    --muted: #595d6c;       --muted-2: #595d6c;
    --border: #cfd3e5;      --border-strong: #b2b6ca;
    --rule: rgba(41, 43, 49, .13);
    --rule-2: rgba(41, 43, 49, .22);
    --accent: #796cbf;      --link: #5d5294;
    --btn-text: #5d5294;    --tint: rgba(121, 108, 191, .08);
    --scrim-a: rgba(243, 245, 254, .72);
    --scrim-b: rgba(243, 245, 254, .46);
    --blend: normal;
    --focus: #b34700;
    --logo-chip: transparent;
  }
}

/* The saturated band keeps its dark ground in BOTH themes, so everything on it keeps its
   light value. These four stay outside the theme blocks on purpose: folded into :root, the
   band's headings would inherit the light theme's dark text and vanish (handoff §5 — this
   exact bug came out of the mockup review). */
:root {
  --band: #262a60;          --band-glow: #353b80;
  --band-head: #f3f5fe;     --band-body: #c9cbe4;
  --band-eyebrow: #e7e5fe;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* The page is a contained column on a wide screen, not a full-bleed one. 67.5rem is 1080px, the
   card width the round-3 mockups are drawn at: the composition was designed to that measure, so
   the strip, the band and the footer end where the mock's card ends instead of running to the
   viewport edge, and --bg fills the space either side. Below 1080px the cap is inert and the
   responsive block at the foot of this file does the work.

   These four carry every laid-out thing on the page, so capping them here contains all of it —
   the hero and the band still bleed the full width of the column, which is the effect the mocks
   show. Body's fifth child, the skip link, is left out on purpose: it is off-screen until it is
   focused and it belongs to the viewport rather than to the composition. Note that footer's own
   margin-top and the chooser's body > main:first-child margin-top are longhands, so neither
   fights margin-inline. */
.strip,
header,
main,
footer {
  max-width: 67.5rem;
  margin-inline: auto;
}

/* Dutch compounds are long and some readers zoom to 400%. Breaking a word beats a page that
   scrolls sideways. */
main {
  overflow-wrap: break-word;
}

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

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

/* -- the strip ------------------------------------------------------------------------- */

.strip {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: var(--strip);
  border-bottom: 1px solid var(--rule);
  font-size: 0.85rem;
}

.strip ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strip a,
.strip .dutch-only {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  color: var(--muted);
  text-decoration: none;
}

.strip a[aria-current="true"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.strip .lang-switch {
  margin: 0;
}

.strip .lang-switch a {
  color: var(--muted-2);
}

.strip .dutch-only {
  color: var(--muted-2);
}

/* -- header ---------------------------------------------------------------------------- */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 1.25rem 3rem;
}

.brand {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

header nav a {
  color: var(--muted-2);
  text-decoration: none;
}

header nav a[aria-current="page"] {
  color: var(--text);
}

header nav a.nav-emphasis {
  display: inline-block;
  color: var(--btn-text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
}

/* -- main and the hero ----------------------------------------------------------------- */

/* Sections carry their own padding so the hero can bleed full-width inside main. */
main {
  padding: 0 0 1rem;
}

main > h1 {
  margin: 2.5rem 3rem 1rem;
  font-size: 2.125rem;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.022em;
  max-width: 30ch;
  text-wrap: pretty;
}

.hero {
  border-block: 1px solid var(--rule);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 3rem;
  max-width: 44rem;
}

/* The text hero alone drops the 44rem cap. Every section below it runs the full 67.5rem
   column, so a hero stopping two-thirds of the way across read as a narrow ragged block with
   dead space beside it. The per-element measures below govern line length instead, which is
   the thing that actually needs limiting. .hero-photo keeps the cap on purpose: the scrim
   gradient's 22%/70% stops are tuned to text ending there, and text running past them would
   sit on the transparent end of the scrim. */
.hero-text .hero-inner {
  padding-bottom: 1.5rem;
  max-width: none;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link);
}

.hero h1 {
  margin: 0;
  font-size: 2.625rem;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

/* Wider than the body measure on purpose: a headline is taken in at a glance rather than read
   line after line, so it carries more width without costing legibility. At the previous 22ch
   the 100-character Dutch home title wrapped to five lines. */
.hero-text h1 {
  font-size: 2.125rem;
  line-height: 1.18;
  letter-spacing: -0.022em;
  max-width: 36ch;
}

/* 62ch sits at the top of the comfortable measure rather than the middle of it. The lead is a
   short orienting paragraph read once, not sustained body copy, so it takes the extra width
   and saves a line or two of height. Only heroes use .lead. */
.lead {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 62ch;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.625rem;
}

.btn {
  display: inline-block;
  color: var(--btn-text);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0.7rem 1.25rem;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

.hero-actions .btn + .btn {
  color: var(--body);
  border-color: var(--border-strong);
}

/* The photo hero: image behind, a left-to-right scrim, text on top. Desktop only — below
   the breakpoint the image becomes a plain band above the text (no overlay to fight at
   high zoom). */
.hero-photo {
  position: relative;
  overflow: hidden;
}

@media (min-width: 45rem) {
  .hero-photo {
    min-height: 26rem;
    display: flex;
    align-items: center;
  }

  .hero-photo .hero-media {
    position: absolute;
    inset: 0;
  }

  .hero-photo .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.5);
  }

  .hero-photo .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg) 22%, var(--scrim-a) 70%, var(--scrim-b));
  }

  .hero-photo .hero-inner {
    position: relative;
  }
}

@media (max-width: 44.99rem) {
  .hero-photo .hero-media img {
    display: block;
    width: 100%;
    height: 16rem;
    object-fit: cover;
    filter: grayscale(.5);
  }
}

/* -- sections -------------------------------------------------------------------------- */

.cards,
.plain-grid,
.teasers {
  padding: 3.5rem 3rem 0;
}

.cards > h2,
.plain-grid > h2,
.band > h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The teasers' and callout's headings exist for structure and screen readers; the mockup
   shows no visible label there. Same technique as the skip link. */
.teasers > h2,
.callout > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cards > ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.cards > ul > li {
  border-top: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--tint), transparent 70%);
  border-radius: 0 0 8px 8px;
  padding: 22px 22px 26px;
}

.cards > ul > li > h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 500;
}

.cards > ul > li p {
  margin: 0 0 0.75rem;
  font-size: 0.96875rem;
  color: var(--body);
  text-wrap: pretty;
}

.cards > ul > li p:last-child {
  margin-bottom: 0;
}

.band {
  margin-top: 3.5rem;
  padding: 3rem;
  background-color: var(--band);
  background-image: radial-gradient(120% 140% at 12% 0%, var(--band-glow), transparent 60%);
}

/* Every band element names its color; inheriting the page text would vanish in one theme
   or the other (handoff §5). */
.band > h2 {
  color: var(--band-eyebrow);
}

.band > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.band > ul > li > h3 {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--band-head);
}

.band > ul > li p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--band-body);
  text-wrap: pretty;
}

.plain-grid > ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.plain-grid > ul > li > h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.plain-grid > ul > li p {
  margin: 0;
  font-size: 0.90625rem;
  color: var(--muted-2);
  text-wrap: pretty;
}

.teasers > ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.teasers > ul > li {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.teasers > ul > li > h3 {
  margin: 0 0 6px;
  font-size: 1.1875rem;
  font-weight: 500;
}

.teasers > ul > li p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted-2);
}

.teasers > ul > li p:last-child {
  margin-bottom: 0;
}

/* The 3b mock renders the contractvrij section as a bordered box, the referrer-ask's
   sibling shape with content-driven text. */
.callout {
  margin: 2rem 3rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 44rem;
}

.callout > h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
}

.callout p {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted-2);
  text-wrap: pretty;
}

.referrer-ask {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 3rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.ask-q {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 500;
}

.ask-blurb {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted-2);
  text-wrap: pretty;
}

/* -- ordinary content ------------------------------------------------------------------ */

/* Text measure returns on the text blocks now that main is page-wide (handoff §7). The
   card grids opt out via their own rules above; on non-hero pages the :has() selector
   below gives service lists the card treatment without any front matter. */
main > p,
main > ul,
main > ol,
main > table,
main > h2,
main > h3,
main > h4,
main > h5,
main > h6,
main > hr {
  margin-left: 3rem;
  margin-right: 3rem;
}

main > p,
main > ol {
  max-width: 44rem;
}

/* Every :has() selector in this file stands in a rule of its own, and the duplicated blocks are
   deliberate — do not merge them back. A browser that cannot parse one selector drops the WHOLE
   selector list it appears in, so grouping this with the two above would cost paragraphs their
   measure on any engine without :has() rather than costing only this rule. Same reason for the
   two pairs in the responsive block. */
main > ul:not(:has(> li > h3)) {
  max-width: 44rem;
}

main > h2 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 500;
}

main > h3,
section h3 {
  font-weight: 500;
}

main > h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

h4,
h5 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

/* The recovered pages use h6 for the one-line blurb under a card heading; body-size, muted. */
h6 {
  margin: 0.25rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.5rem;
}

/* That margin is for prose lists. These six are layout — the strip and the menu lay their items
   out in a flex row, the four section grids theirs in grid tracks — and there the prose spacing
   reads as a gap nobody asked for: it lifts the strip's current-page underline off the strip's
   own bottom edge, and it adds 8px under every card in a grid row, so two grids built from the
   same design (a section's and the :has() one below, which resets it itself) come out unequal. */
.strip li,
header nav li,
.cards > ul > li,
.band > ul > li,
.plain-grid > ul > li,
.teasers > ul > li {
  margin: 0;
}

li > :first-child {
  margin-top: 0;
}

a {
  color: var(--link);
  text-decoration: underline;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Links inside labeled link groups (nav, strip, buttons, teaser/callout cards) are
   color-only; prose links keep their underline. */
.teasers a,
.referrer-ask a,
.btn {
  text-decoration: none;
}

/* On a non-hero page, a top-level list whose items open with an h3 is a card list (the
   service lists on Aanmelden, the quality lists) — the structural selector from handoff §4. */
main > ul:has(> li > h3) {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 1.25rem 3rem 1rem;
  padding: 0;
  list-style: none;
  max-width: none;
}

main > ul:has(> li > h3) > li {
  border-top: 2px solid var(--accent);
  background: linear-gradient(180deg, var(--tint), transparent 70%);
  border-radius: 0 0 8px 8px;
  padding: 22px 22px 26px;
  margin: 0;
}

main > ul:has(> li > h3) > li > h3 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 500;
}

main p > img,
main p > a > img {
  display: block;
  mix-blend-mode: var(--blend);
}

/* Profile header (medewerkers/team): round portrait floated beside the name (h2)
   and role line. Scoped to an image paragraph immediately followed by an h2 —
   that is the profile pattern and nothing else; the contact pages' 026.jpg is
   followed by an h3 and must stay untouched. */
main p:has(> img:only-child):has(+ h2) {
  float: left;
  width: 88px;
  /* Three longhands rather than the `margin` shorthand, because the left margin must be left
     ALONE: the gutter rule above gives every block in main 3rem (1rem under the narrow
     breakpoint), and this selector outranks it. A shorthand would reset that to 0 and hang the
     portrait outside the text column — past even the h1 on desktop, and flush against the
     viewport edge on a phone. */
  margin-top: 0.2rem;
  margin-right: 1.4rem;
  /* 1.375rem, matching the bio paragraph's own margin-top below, because THIS is the value that
     sets the mock's 22px gap under the header. The portrait is taller than the name and role
     stacked, so the cleared paragraph lands on the float's bottom MARGIN edge and its own
     margin-top never gets to apply. Both are 22px so the gap is 22px whichever of the two ends
     up defining the header's bottom. */
  margin-bottom: 1.375rem;
}

main p:has(> img:only-child):has(+ h2) img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  /* me_no_background.png is transparent; without a fill the head floats loose,
     extra visible in a round crop. The strip tone reads in both themes. */
  background: var(--strip);
  mix-blend-mode: normal;
}

/* Both profiles have to measure the name from the same origin as their own portrait, and left at
   its 2rem the h2 does not: it collapses with whatever precedes the FLOAT — the intro
   paragraph's 1rem above Angela, the hr's 2.5rem above Niels — and the larger margin wins each
   time. That puts her name 12.8px below her portrait's top and his 3.2px above his, so the two
   profiles read as misaligned by 16px. Zeroing it leaves the float's own 0.2rem as the only
   offset, identically for both. The cost, accepted: the gap between the intro line and the first
   portrait tightens from 2rem to 1rem. */
main p:has(> img:only-child):has(+ h2) + h2 {
  margin-top: 0;
}

/* The hairline that closes the profile header (mockup 6a). The mock draws the header as a flex
   row with a border-bottom, but the float gives us no wrapper to hang that border on, so the
   FIRST biography paragraph carries it as a border-top instead. Clearing that paragraph is what
   makes the two geometrically equivalent: cleared, it starts below the portrait rather than
   beside it, so its border runs the full column width under the portrait AND the name, which is
   exactly where the mock's row border sits. Selecting the paragraph by the whole
   portrait-name-role chain is what keeps it off every other paragraph on the site. */
main p:has(> img:only-child):has(+ h2) + h2 + h6 + p {
  clear: both;
  margin-top: 1.375rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
}

/* The hr between the two profiles is what ends a profile, so it is what clears. Deliberately
   NOT `main h2` as well: on these pages the only h2s are the two names, and each one directly
   follows its portrait, so clearing h2 would drop every name BELOW its own float and leave the
   portrait sitting alone next to white space — the exact opposite of the header above. */
main hr {
  clear: both;
}

/* main is not a block formatting context (no overflow, no flow-root), so the last profile's
   float is contained only by its own biography being longer than 88px. That is a property of
   today's copy, not of the layout: clear the footer so a future one-line bio cannot let the
   portrait hang across the footer rule. */
footer {
  clear: both;
}

hr {
  margin: 2.5rem 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

table {
  margin: 0 0 1rem;
  border-collapse: collapse;
}

th,
td {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  text-align: left;
  vertical-align: top;
}

/* -- the language chooser -------------------------------------------------------------- */

body > main:first-child {
  margin-top: 3rem;
}

.chooser {
  padding: 0;
  font-size: 1.25rem;
  list-style: none;
}

.chooser li {
  margin-bottom: 1rem;
}

/* -- footer ---------------------------------------------------------------------------- */

footer {
  margin-top: 3.5rem;
  border-top: 1px solid var(--rule);
  padding: 1.75rem 3rem 2.75rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-brand {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
}

.footer-meta,
.footer-line {
  margin: 0.375rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.footer-line {
  margin: 0;
}

/* The one third-party mark on the site, and it is drawn in dark ink on a transparent ground, so
   on the dark theme it disappears into the page. It gets a light chip to sit on instead of the
   --blend treatment the content images use: blending brightens the artwork itself and leaves the
   logo looking like a different logo, where a chip leaves it exactly as its owner drew it. In the
   light theme the chip is transparent, so only its box is there at all.

   224px is 200 + 12 + 12, and the 200 is the number that matters: box-sizing is border-box for
   everything on this page, so the side padding comes out of the declared width rather than adding
   to it. Declaring 224 is what keeps the ARTWORK at the approved 200px in both themes — someone
   "tidying" this back to 200px would silently shrink a third party's logo to 176. */
.footer-inner img {
  display: block;
  width: 224px;
  height: auto;
  background: var(--logo-chip);
  border-radius: 8px;
  padding: 8px 12px;
  mix-blend-mode: normal;
}

/* -- skip link ------------------------------------------------------------------------- */

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: static;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0.5rem;
  padding: 0.5rem 1rem;
  overflow: visible;
  clip-path: none;
  background: var(--bg);
  outline: 3px solid var(--focus);
}

/* -- responsive ------------------------------------------------------------------------ */

@media (max-width: 62.5rem) {
  .plain-grid > ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 44.99rem) {
  header,
  .cards,
  .plain-grid,
  .teasers,
  .band,
  .hero-inner,
  footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .callout {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  main > h1,
  main > p,
  main > ul,
  main > ol,
  main > table,
  main > h2,
  main > h3,
  main > h4,
  main > h5,
  main > h6,
  main > hr {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  main > ul:has(> li > h3) {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .referrer-ask {
    margin-left: 1rem;
    margin-right: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }

  .cards > ul,
  .teasers > ul,
  .band > ul,
  .plain-grid > ul {
    grid-template-columns: 1fr;
  }

  main > ul:has(> li > h3) {
    grid-template-columns: 1fr;
  }
}

/* -- the holding page ------------------------------------------------------------------- */

/* offline.html only, which the maintenance rule in web.config rewrites every address to. The
   composition is the page the practice served through the 2026 outage, carried over as-is; what
   changed is where the values come from. That page hardcoded the dark palette and fetched Inter
   from Google Fonts, so it could stand alone with no site behind it. Here the palette is the
   site's own tokens, which means the holding page follows the reader's light or dark preference
   like every other page instead of being dark in both — and the typeface is the self-hosted one,
   because the CSP that governs this origin allows no font host.

   It reaches this stylesheet during an outage because the maintenance rule excludes /assets/.
   That exclusion and this section are one decision: remove either and the page loses its design
   at exactly the moment it is the only page the site has.

   Its own measures rather than the ones above: this is a standalone composition with a text
   column and a contact rail, not a page in the site's nav-and-sections rhythm. */
body.standalone {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);

  min-height: 100vh;
  display: grid;
  align-content: center;
  font-size: 15px;
  line-height: 1.55;
  /* Both washes are mixed from --accent rather than named outright, so they restate the theme's
     own hue at low strength and stay legible when the ground flips to the light palette. */
  background:
    radial-gradient(1200px 720px at 82% -160px,
      color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    var(--bg);
}

/* Wider than the site's 67.5rem column, and clearing the padding the site gives <main>: the
   mockup this is taken from is drawn at 1200px with two columns in it. */
.standalone .wrap {
  max-width: 75rem;
  margin-inline: auto;
  padding: calc(3 * var(--leading)) var(--edge);
  display: grid;
  gap: calc(2 * var(--leading));
}

.offline .cols {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: calc(2 * var(--leading)) clamp(48px, 8vw, 120px);
  align-items: start;
}

.standalone .kicker {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: var(--half);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* The rule that runs out of the kicker into the margin. Dropped below the width where there is
   no margin left to run into, rather than allowed to overlap the text. */
.standalone .kicker::before {
  content: "";
  position: absolute;
  left: -64px;
  top: calc(50% - 0.5px);
  width: 44px;
  height: 1px;
  background: var(--accent);
}

.standalone .display,
.offline .en h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 0 -0.06em;
  max-width: 24ch;
}

.offline .tagline {
  font-size: 15.5px;
  line-height: var(--leading);
  color: var(--muted-2);
  max-width: 52ch;
  margin: 0 0 var(--leading);
}

.standalone .lede {
  font-size: 17px;
  line-height: var(--leading);
  max-width: 58ch;
  margin: calc(1.5 * var(--leading)) 0 0;
}

.standalone .lede + .lede {
  margin-top: var(--leading);
}

.standalone .rule {
  height: 1px;
  border: 0;
  margin: calc(2 * var(--leading)) 0;
  background: linear-gradient(to right, transparent, var(--rule-2) 48px calc(100% - 48px), transparent);
}

.offline .about {
  margin-top: var(--leading);
}

.offline .about h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: var(--leading);
  margin: 0;
}

.offline .about ul {
  margin: var(--half) 0 0;
  padding: 0 0 0 1.1em;
  display: grid;
  gap: calc(var(--half) / 2);
  font-size: 15.5px;
  line-height: var(--leading);
  color: var(--body);
  max-width: 58ch;
}

.offline .about li::marker {
  color: var(--accent);
}

.offline .about .fine {
  font-size: 15.5px;
  line-height: var(--leading);
  color: var(--muted-2);
  max-width: 58ch;
  margin: var(--half) 0 0;
}

.offline .about .fine strong {
  font-weight: 500;
  color: var(--text);
}

.offline .contact {
  display: grid;
  gap: var(--half);
  border-left: 1px solid var(--rule-2);
  padding-left: clamp(20px, 2.5vw, 36px);
}

.offline .contact h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--half);
}

.offline .contact dl {
  margin: 0;
  font-size: 15.5px;
  line-height: var(--leading);
}

.offline .contact dt {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: var(--leading);
}

/* anywhere, not break-word: the address and the Zorgmail line are single long tokens with no
   space to break at, and this rail is the narrowest column on the page. */
.offline .contact dd {
  margin: 0 0 var(--leading);
  overflow-wrap: anywhere;
}

.offline .contact dd:last-child {
  margin-bottom: 0;
}

.offline .contact .note {
  display: block;
  font-size: 13px;
  line-height: var(--leading);
  color: var(--muted);
}

.offline .contact .note + .note {
  margin-top: -4px;
}

/* The way out, on the pages that are a dead end. A 404 and a server error have nothing to say
   about themselves that helps; what helps is the shortest list of places worth going next, which
   is why these are plain links in reading order rather than buttons competing for a click. */
.standalone .links {
  margin: var(--leading) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: calc(var(--half) / 2);
  font-size: 17px;
  line-height: var(--leading);
}

.standalone .links a {
  color: var(--link);
  text-decoration: none;
}

.standalone .links a:hover {
  color: var(--btn-text);
  text-decoration: underline;
}

/* The site's footer is a centred page-width band; this one is a line inside the composition. */
.standalone footer {
  max-width: none;
  margin-inline: 0;
  font-size: 13px;
  line-height: var(--leading);
  color: var(--muted);
}

/* One column, and the contact rail loses the border it no longer sits beside. */
@media (max-width: 55rem) {
  .offline .cols {
    grid-template-columns: 1fr;
  }

  .offline .contact {
    border-left: 0;
    padding-left: 0;
  }
}