/* ---------------------------------------------------------------------------
   Fonts. Variable, latin subset, self-hosted. swap so text is readable while
   they load rather than invisible.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/noto-sans-latin-var.10f8972e3579.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-var.311d352d9323.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ---------------------------------------------------------------------------
   Reset and base
   --------------------------------------------------------------------------- */

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

html {
  /* Never a fixed px size: the browser's own text size setting has to win. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--size-0);
  line-height: var(--leading-body);
  /* SC 1.4.12: authored spacing must survive a user stylesheet overriding it,
     so nothing here sets a height that could clip reflowed text. */
}

h1,
h2,
h3,
h4 {
  font-family: var(--face-display);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  /* Dutch compounds are long and can overflow a narrow screen at display size.
     break-word only acts when a word genuinely does not fit, so it is safe to
     leave on. Deliberately NOT hyphens: auto here - paired with text-wrap:
     balance it hyphenated "waarbor-gen" in the headline at 1440px, where there
     was room to simply wrap. Hyphenation stays where the container really is
     too narrow for the word, which is the card titles below. SC 1.4.10. */
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--size-5);
}
h2 {
  font-size: var(--size-4);
  margin-top: var(--space-7);
}
h3 {
  font-size: var(--size-3);
  margin-top: var(--space-6);
}
h4 {
  font-size: var(--size-2);
  margin-top: var(--space-5);
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--space-4);
}

li + li {
  margin-top: var(--space-2);
}

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

/* ---------------------------------------------------------------------------
   Links

   Underlined always. The audit failed SC 1.4.1 because links were told apart
   from surrounding text by colour alone, and were distinguished on hover only.
   --------------------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.18em;
}

/* SC 1.4.10 Reflow: the cookie and privacy statements use whole URLs as link
   text, and an unbroken URL pushed the page to 437px wide on a phone.
   anywhere, not break-word: only anywhere lowers the min-content width that
   a grid column sizes itself by. */
main a {
  overflow-wrap: anywhere;
}

/* SC 2.5.8: a link block stands on its own line, so the inline exception
   does not cover it. */
.block-link a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
}

/* ---------------------------------------------------------------------------
   Focus

   Two-tone: a yellow ring with a deep-navy outer edge. On a light ground the
   navy edge carries the 3:1 required by SC 1.4.11; on the navy footer and on
   navy buttons the yellow does. One rule works on every ground, so no
   component has to remember to override it.
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-contrast);
  border-radius: 2px;
}

/* SC 2.4.11 Focus Not Obscured: nothing is sticky, so a focused element cannot
   be hidden behind a fixed header. If a sticky header is ever added, it needs
   scroll-padding-top here to match. */

/* ---------------------------------------------------------------------------
   Skip link (SC 2.4.1 Bypass Blocks - absent on the WordPress site)
   --------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--focus);
  color: var(--ink-deep);
  font-family: var(--face-ui);
  font-weight: 600;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-bottom: 4px solid var(--ink-deep);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Prose is capped at a readable measure even inside a wide page. */
.prose {
  max-width: var(--measure);
}

/* The editor's stream.
 *
 * Two columns: the reading measure, then the spare width. Prose sits in the
 * first column so the page stays left-aligned, and anything marked wide spans
 * both.
 * Before this, the whole stream was capped at the measure, so a four-card grid
 * and a call-to-action band both crammed into a 749px column on a 1335px
 * screen and the page looked like it was hugging the left edge. */
.stream {
  display: grid;
  grid-template-columns: min(var(--measure), 100%) 1fr;
}

.stream > * {
  grid-column: 1;
}

/* Wagtail wraps every StreamField block in its own
   <div class="w-block-<name> block-<name>">, so the grid item is that wrapper -
   a marker class inside the block template sits on a grandchild and does
   nothing. These are the blocks that get the full page width. */
.stream > .block-card_grid,
.stream > .block-call_to_action,
.stream > .block-table,
.stream > .block-image {
  grid-column: 1 / -1;
}

.content-image {
  margin: 0;
}

.content-image img {
  display: block;
}

/* One rhythm rule for the whole stream, rather than a margin per block type:
   every block sits the same distance from whatever precedes it, however the
   editor orders them. */
.stream > * + *,
.prose > * + * {
  margin-top: var(--space-6);
}

/* Each block's own first element must not add its margin on top of the
   stream's rhythm - a heading was landing 5rem below the block before it
   (2rem from the wrapper, 3rem of its own). */
.stream > * > :first-child {
  margin-top: 0;
}

.stream > :first-child,
.prose > :first-child {
  margin-top: 0;
}

/* A notice repeated in English is a run of blocks, one per paragraph; they sit
   as close as the Dutch paragraphs above them, which share one block. */
.stream > .block-other_language + .block-other_language {
  margin-top: var(--space-4);
}

/* A heading still wants more air above it than a paragraph does. */
.stream > .block-heading {
  margin-top: var(--space-7);
}

/* A wide block coming out of prose needs more air than a paragraph does. */
.stream > .block-card_grid,
.stream > .block-call_to_action,
.stream > .block-table {
  margin-top: var(--space-7);
}

.section {
  padding-block: var(--space-6);
}

.section--tinted {
  background: var(--surface);
}

/* ---------------------------------------------------------------------------
   Header and navigation

   The WordPress site's layout: a white bar with the logo and the login link,
   and the menu. Unlike that theme, the menu is a visible row whenever there is
   room for it - hiding a dozen destinations behind a hamburger at every width
   makes a sighted visitor open it to find out what the site contains.
   Nothing is sticky, so SC 2.4.11 holds without scroll-padding.
   --------------------------------------------------------------------------- */

.masthead {
  background: var(--paper);
  box-shadow: 0 8px 16px 0 rgb(74 85 94 / 0.15);
  position: relative;
  z-index: 1;
}

.masthead__inner {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-3);
}

.menu-toggle {
  justify-self: end;
}

.masthead__home {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  min-height: var(--target-min);
}

.masthead__home img {
  display: block;
  width: clamp(12rem, 40vw, 20rem);
  height: auto;
}

/* The menu band. White on navy, the current page marked by a gold bar
   and a heavier weight - never by colour alone (SC 1.3.1, SC 1.4.1). */
.menu-band {
  background: var(--ink);
}

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-5);
  /* Twelve destinations: they wrap, and a wrapped row reads as a second row of
     the same menu rather than a stray item, because each keeps its bar. */
}

.nav__list li + li {
  margin-top: 0;
}

/* The header and the menu band run the full width of the window, as on the
   WordPress site; the page cap is for content. */
.masthead .page,
.menu-band .page {
  max-width: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 3.25rem;
  color: var(--paper);
  font-family: var(--face-ui);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}

.nav__link:hover {
  border-bottom-color: var(--paper);
}

.nav__link[aria-current="page"],
.nav__link[aria-current="true"] {
  border-bottom-color: var(--signal);
  font-weight: 700;
}

/* Windows high contrast forces a transparent border to the text colour, so
   every item would carry bars. Unmarked items blend into the ground; the
   current one keeps a bar in the system's highlight colour. */
@media (forced-colors: active) {
  .nav__link {
    border-color: Canvas;
  }

  .nav__link[aria-current="page"],
  .nav__link[aria-current="true"] {
    border-bottom-color: Highlight;
  }
}

/* The disclosure button. menu.js unhides it; CSS decides whether it shows. */
.menu-toggle {
  display: none;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  background: var(--signal);
  color: var(--ink-deep);
  border: 0;
  font: 600 var(--size-0) var(--face-ui);
  cursor: pointer;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentcolor;
}

.menu-toggle__bars {
  position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__bars::before {
  top: -6px;
}

.menu-toggle__bars::after {
  top: 6px;
}

/* Narrow screens: a vertical list, collapsed behind the button when the
   script is running. Without the script (.js-menu absent) it stays open. */
@media (width < 64rem) {
  .nav__list {
    flex-direction: column;
    padding-block: var(--space-2);
  }

  .nav__link {
    border: 0;
    border-left: 4px solid transparent;
    padding-left: var(--space-3);
    width: 100%;
  }

  .nav__link[aria-current="page"],
  .nav__link[aria-current="true"] {
    border-left-color: var(--signal);
  }

  .js-menu .menu-toggle {
    display: inline-flex;
  }

  .js-menu .masthead:has(.menu-toggle[aria-expanded="false"]) .menu-band {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Home page

   The WordPress site's sections, in its order: the photo with the headline,
   the welcome text beside the four cards, the grey block beside the gold call
   to action, the latest news.
   --------------------------------------------------------------------------- */

.home-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(20rem, 36vw, 34rem);
  background: var(--ink-deep);
  color: var(--paper);
  /* The overlay below is painted past the text box; this keeps it inside
     the hero instead of over the header and the band beneath. */
  overflow: clip;
}

.home-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* White text over a photo: the photo has no fixed colour, so the text never
   sits on it directly. The text box carries a navy overlay at
   --hero-overlay-alpha from the left edge of the screen to its own right
   edge, and only past the text does it fade out to show the ring. However
   wide the screen and however the text wraps, every glyph is on the overlay;
   tests/test_contrast.py checks white against it laid over pure white. */
.home-hero__text {
  /* Wide enough for the headline's longest word at its largest size. */
  --hero-text-width: 40rem;
  position: relative;
  z-index: 1;
  padding-block: var(--space-8);
  /* As wide as the text and no wider, so the overlay stops where the text
     does and the rest of the photo shows. */
  width: fit-content;
  max-width: calc(var(--hero-text-width) + 2 * var(--gutter));
  margin-inline: 0;
}

.home-hero__text > * {
  max-width: var(--hero-text-width);
}

.home-hero__text::before,
.home-hero__text::after {
  content: "";
  position: absolute;
  top: -100vmax;
  bottom: -100vmax;
  z-index: -1;
}

.home-hero__text::before {
  left: -100vmax;
  right: 0;
  background: rgb(8 24 69 / var(--hero-overlay-alpha));
}

.home-hero__text::after {
  left: 100%;
  width: 12rem;
  background: linear-gradient(to right, rgb(8 24 69 / var(--hero-overlay-alpha)), transparent);
}

/* The size follows the width, so the longest word always fits whole.
   "edelmetaalsmelterij" is about 11 times the font size wide in Noto Sans
   bold; at a fixed size in a narrow box, overflow-wrap would cut a letter off
   onto a line of its own.

   The last resort for user text spacing is anywhere, not the inherited
   break-word: .home-hero__text is fit-content, and break-word leaves the
   word's full width in the min-content that the box sizes itself by. With
   0.12em letter spacing the box grew past the screen below 656px and the
   hero's overflow: clip cut the last letters off (SC 1.4.12). At the authored
   spacing the word fits, so this never breaks it. */
.home-hero__title {
  overflow-wrap: anywhere;
  color: var(--paper);
  font-size: clamp(1.75rem, (100vw - 2 * var(--gutter)) / 12, 4rem);
  margin-bottom: var(--space-3);
}

.home-hero__subtitle {
  font-size: var(--size-3);
  line-height: var(--leading-tight);
  margin: 0;
}

.home-hero__action {
  margin: var(--space-6) 0 0;
}

.home-welcome__inner {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-8);
}

@media (width >= 64rem) {
  .home-welcome__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.home-welcome__text {
  grid-template-columns: minmax(0, 1fr);
}

/* The grey block beside the gold call to action: two halves on a wide screen,
   stacked on a narrow one. Each fills its half edge to edge, as on the
   WordPress site, with its text kept inside the page container. */
.home-split {
  display: grid;
}

/* Two halves only when there is a call to action to put beside the grey block;
   on its own the grey block runs the width of the page. */
@media (width >= 64rem) {
  .home-split--paired {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.home-why {
  background: var(--surface);
}

.home-split__inner {
  padding: var(--space-8) var(--gutter);
}

/* A half is a column of the container, not the whole window: its inner edge
   lines up with the page container's. */
@media (width >= 64rem) {
  .home-split--paired .home-why .home-split__inner {
    justify-self: end;
    width: min(100%, calc(var(--page-width) / 2));
    padding-left: var(--gutter);
  }

  .home-split:not(.home-split--paired) .home-why .home-split__inner {
    width: min(100%, var(--page-width));
    margin-inline: auto;
  }

  .home-cta .home-split__inner {
    justify-self: start;
    width: min(100%, calc(var(--page-width) / 2));
  }
}

/* The gold band. Text on the gold is --ink-deep: the WordPress band sets it
   in white, 1.93:1, which fails at any size (SC 1.4.3). */
.home-cta {
  background: var(--signal);
  color: var(--ink-deep);
}

.home-cta__inner {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: var(--space-3);
}

.home-cta__photo img {
  display: block;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  border: 4px solid var(--paper);
  margin-bottom: var(--space-4);
}

.home-cta__heading {
  color: var(--ink-deep);
  font-size: var(--size-4);
  margin: 0;
}

.home-cta__text {
  font-size: var(--size-2);
  margin: 0;
}

.home-cta__action {
  margin: var(--space-5) 0 0;
}

.home-why h2 {
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   Inner pages

   The WordPress site's layout: a tinted title band with the heading and the
   breadcrumb, then the content in two thirds and the sidebar in one.
   --------------------------------------------------------------------------- */

.title-band {
  background: var(--surface);
}

.title-band__inner {
  padding-block: var(--space-7) var(--space-5);
}

.title-band__title {
  margin-bottom: var(--space-2);
}

.title-band .breadcrumb {
  padding-block: 0;
}

.content-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-7) var(--space-8);
}

@media (width >= 64rem) {
  .content-layout {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    align-items: start;
  }
}

.page-intro {
  font-size: var(--size-2);
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
}

.sidebar {
  display: grid;
  gap: var(--space-6);
}

/* The call to action, as in the WordPress sidebar. --ink-deep on the gold, as
   everywhere; the button is navy with white text. */
.sidebar__cta {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: var(--signal);
  color: var(--ink-deep);
}

.sidebar__cta p {
  margin: 0;
}

.sidebar__cta .button {
  margin-top: var(--space-3);
}

.sidebar__photo {
  display: block;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  border: 4px solid var(--paper);
  margin-bottom: var(--space-2);
}

.sidebar__cta-heading {
  color: var(--ink-deep);
  font-size: var(--size-3);
  margin: 0;
}

.sidebar__heading {
  font-size: var(--size-2);
  margin-bottom: var(--space-3);
}

.sidebar__widget {
  border-top: 4px solid var(--signal);
  padding-top: var(--space-4);
}

.sidebar__widget p {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   News

   The WordPress home page's list: a large day and month beside each post. The
   day is navy and the month --ink-muted, not the theme's grey #838f99, which
   fails.
   --------------------------------------------------------------------------- */

.news-list {
  display: grid;
  gap: var(--space-6);
}

.news-item__title {
  font-size: var(--size-2);
  margin: 0 0 var(--space-2);
}

.news-item__date {
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}

.news-item__excerpt {
  margin: 0;
  max-width: var(--measure);
}

.news-item--dated {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.news-item__stamp {
  display: grid;
  justify-items: center;
  padding-right: var(--space-4);
  border-right: 1px solid var(--rule);
  line-height: 1;
}

.news-item__day {
  color: var(--ink);
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--size-5);
}

.news-item__month {
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.home-news__inner {
  padding-block: var(--space-8);
}

.home-news__title {
  margin-bottom: var(--space-6);
}

.home-news__more {
  margin: var(--space-6) 0 0;
  font-family: var(--face-ui);
  font-weight: 600;
}

.title-band__date {
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}

.sidebar__news {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.sidebar__news li + li {
  margin-top: 0;
}

.sidebar__news time {
  display: block;
  color: var(--ink-muted);
}

.pagination__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-7) 0 0;
  padding: 0;
}

.pagination__list li + li {
  margin-top: 0;
}

.pagination__list a,
.pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target-min);
  min-height: var(--target-min);
  padding-inline: var(--space-3);
}

/* The current page is marked by a filled ground and aria-current, not by
   colour alone. */
.pagination__current {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Cards

   The WordPress site's cards: a gold icon beside the title, a line of context
   beneath, a tinted ground on hover. The whole card is one link. Its text is
   --ink-muted, not the theme's #838f99 (3.33:1, fails SC 1.4.3).
   --------------------------------------------------------------------------- */

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card-grid li + li {
  margin-top: 0;
}

.card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  height: 100%;
  padding: var(--space-5);
  text-decoration: none;
  color: var(--ink);
}

.card:hover {
  background: var(--surface);
}

.card__icon {
  width: 3rem;
  height: 3rem;
}

.card__title {
  /* Here hyphenation earns its place: a 27-character compound in a ~300px card
     has to break somewhere, and a hyphen reads better than a hard cut. It works
     because <html lang> is correct per request. */
  overflow-wrap: break-word;
  hyphens: auto;
  font-family: var(--face-display);
  font-weight: 600;
  font-size: var(--size-2);
  line-height: var(--leading-tight);
}

.card:hover .card__title {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.card__text {
  grid-column: 1 / -1;
  align-self: start;
  color: var(--ink-muted);
}

/* A card without an icon - older content - keeps its title in line. */
.card__title:first-child {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
   Buttons and calls to action
   --------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-6);
  font-family: var(--face-ui);
  font-size: var(--size-1);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  /* The WordPress site's pill buttons. */
  border-radius: 999px;
  cursor: pointer;
}

/* Gold with deep-navy text; the WordPress hero button is white on gold. */
.button--signal {
  background: var(--signal);
  color: var(--ink-deep);
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 0.3);
}

.button--signal:hover {
  background: var(--paper);
}

/* The drop shadow would otherwise replace the focus ring's navy edge. */
.button--signal:focus-visible {
  box-shadow: 0 0 0 6px var(--focus-contrast);
}

.button--primary {
  background: var(--ink);
  color: var(--paper);
}

.button--primary:hover {
  background: var(--ink-deep);
}

.button--secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.button--secondary:hover {
  background: var(--surface);
}

/* The gold ground carries navy text only: white on it is 1.93:1 and fails
   SC 1.4.3. See tests/test_contrast.py. */
.cta {
  background: var(--signal);
  color: var(--ink-deep);
  padding: var(--space-7) var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-items: start;

  /* The band runs to the edges of the screen, the way the footer already does,
     while its text stays inside the page container. On a 1920px screen the
     content column is 1248px - two thirds - so a band that stops there reads
     as a floating box.
     
     The colour is painted past the box by a shadow spread rather than the box
     being widened with negative vw margins: vw includes the scrollbar, so that
     approach overshoots by the scrollbar's width and adds a horizontal
     scrollbar that then has to be clipped away. Here the layout box never
     moves, so there is no overflow to hide and the text stays aligned with the
     page on its own. clip-path keeps the spread horizontal. */
  box-shadow: 0 0 0 100vmax var(--signal);
  clip-path: inset(0 -100vmax);
}

@media (min-width: 52rem) {
  /* Heading and text on the left, the action on the right: a band reads as a
     band, not as a tall box with a button at the bottom. */
  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-7);
    align-items: center;
  }

  .cta__heading {
    grid-column: 1;
  }

  .cta__body {
    grid-column: 1;
  }

  .cta__action {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
  }
}

.cta__body {
  max-width: 52ch;
  margin: 0;
}

.cta__heading {
  color: var(--ink-deep);
  margin: 0;
}

.cta a {
  color: var(--ink-deep);
}

.cta .button--primary {
  background: var(--ink-deep);
  color: var(--paper);
}

/* ---------------------------------------------------------------------------
   Tables (SC 1.3.1: caption and header row are required by the block)
   --------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

table {
  border-collapse: collapse;
  width: 100%;
}

caption {
  text-align: left;
  font-weight: 700;
  padding-bottom: var(--space-3);
}

th,
td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

thead th {
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Disclosure (FAQ)

   Native <details>: keyboard-operable and announced correctly with no
   JavaScript and no ARIA to get wrong.
   --------------------------------------------------------------------------- */

.faq {
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__question {
  font-family: var(--face-display);
  font-weight: 600;
  font-size: var(--size-1);
  padding: var(--space-4) 0;
  min-height: var(--target-min);
  cursor: pointer;
}

.faq__question::marker,
.faq__question::-webkit-details-marker {
  color: var(--signal);
}

.faq__answer {
  padding-bottom: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Documents
   --------------------------------------------------------------------------- */

.doc-link__meta {
  color: var(--ink-muted);
}

.doc-link__description {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------------- */

.breadcrumb {
  padding-block: var(--space-4);
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  color: var(--ink-muted);
}

.breadcrumb__list li + li {
  margin-top: 0;
}

.breadcrumb__list li + li::before {
  content: "/";
  margin-right: var(--space-3);
  color: var(--rule);
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-8);
  border-top: 1px solid var(--surface);
  font-size: var(--size-0);
}

.site-footer__columns {
  display: grid;
  gap: var(--space-6) var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-block: var(--space-8) var(--space-7);
}

.site-footer h2 {
  font-size: var(--size-3);
  font-weight: 500;
  margin: 0 0 var(--space-4);
}

.site-footer p {
  margin: 0;
}

.site-footer ul {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.site-footer li + li {
  margin-top: 0;
}

/* SC 2.5.8 Target Size (Minimum) is 24x24. The listed links measured 22px
   high, which survives only on the spacing exception - an argument worth not
   having. Links inside a sentence are exempt and stay inline. */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Links inside a sentence are exempt from SC 2.5.8, but a little padding,
   which does not move the line, takes them past 24px anyway. */
.site-footer p a {
  padding-block: 0.1em;
}

/* <address> is the right element for a postal address; its italic default is
   a browser habit, not a meaning. */
.site-footer address {
  font-style: normal;
}

.site-footer__bar {
  background: var(--surface);
  color: var(--ink-muted);
}

.site-footer__bar-inner {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-block: var(--space-5);
  text-align: center;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-5);
}

.site-footer .site-footer__legal {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Sidebar picture
   --------------------------------------------------------------------------- */

.sidebar__figure {
  margin: 0;
}

.sidebar__figure img {
  display: block;
  width: 100%;
}

/* A page with no sidebar of its own, such as the sitemap or an error page. */
.content-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.sitemap ul {
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Rates and calculator
   --------------------------------------------------------------------------- */

.rates {
  max-width: 32rem;
}

.rates td {
  font-variant-numeric: tabular-nums;
}

.notice {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border-left: 4px solid var(--ink);
}

.calculator {
  max-width: 32rem;
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-6);
}

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

/* A field's border is --rule: 3.7:1 on white, the 3:1 SC 1.4.11 asks for. The
   WordPress form's #ccc is 1.6:1. */
.field input,
.field select {
  width: 100%;
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.field input[aria-invalid="true"] {
  border-color: var(--ink);
  outline: 3px solid var(--ink);
  outline-offset: 0;
}

.field__hint {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
}

.calculator__result {
  margin: 0;
  min-height: 1.6em;
  font-weight: 700;
}

.calculator__result:not(:empty) {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border-left: 4px solid var(--ink);
}

.calculator__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.calculator__fine-print {
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
   Motion

   There is no decorative motion on this site. This rule is here so that any
   transition added later is covered by default rather than retrofitted.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}