/* portal.webzenia.com
   Webzenia's own surface, so it uses Webzenia's own system — the light theme,
   deliberately. The documents themselves are light (Syounaa's tokens.css declares
   color-scheme: light and dropped its dark palette on 15 August 2026), so a dark
   gate would flash white the moment a client opened what they came for. It also
   follows the house split: the internal cockpit is dark, anything a client reads
   is light.

   The values are copied from the design system's [data-theme="light"] block rather
   than imported, because this host has no build step and the source stylesheet
   needs Tailwind to compile its @theme block. Re-sync by hand if the light theme
   moves. */

@font-face { font-family: 'Söhne'; src: url('fonts/Sohne-Buch.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Söhne'; src: url('fonts/Sohne-Kraftig.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Söhne'; src: url('fonts/Sohne-Halbfett.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Söhne Mono'; src: url('fonts/Sohne-Mono-Web-Buch.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;

  --surface-base:   oklch(0.975 0.006 250);   /* neutral-100 */
  --surface-card:   oklch(1 0 0);             /* neutral-0   */
  --text-strong:    oklch(0.18 0.012 250);    /* neutral-950, ~16:1 */
  --text-default:   oklch(0.34 0.010 250);    /* neutral-700, ~9:1  */
  --text-muted:     oklch(0.48 0.010 250);    /* neutral-650, ~5.5:1 */
  --text-error:     oklch(0.38 0.176 27);     /* error-800 */
  --border-subtle:  oklch(0 0 0 / 0.070);
  --border-default: oklch(0 0 0 / 0.120);
  --border-strong:  oklch(0 0 0 / 0.180);

  /* Light runs the accent a step darker so text and fills clear AA: blue-700 for
     text on a light surface, blue-600 behind white. */
  --accent:         oklch(0.46 0.210 262.236);   /* blue-700 */
  --accent-fill:    oklch(0.528 0.217 262.236);  /* blue-600, white on it = 5.59:1 */
  --accent-hover:   oklch(0.46 0.210 262.236);   /* blue-700 */
  --accent-ring:    oklch(0.528 0.217 262.236 / 0.28);
  --accent-tint:    oklch(0.528 0.217 262.236 / 0.09);   /* behind accent text: 6.6:1 */
  --on-fill:        oklch(1 0 0);

  --measure: 1040px;
  --gutter: 40px;

  --radius-input: 8px;
  --radius-card:  14px;

  --shadow-card:       0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px -12px oklch(0 0 0 / 0.10);
  --shadow-card-hover: 0 2px 4px oklch(0 0 0 / 0.05), 0 12px 32px -12px oklch(0 0 0 / 0.14);

  --font-body: 'Söhne', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Söhne Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* A browser without oklch would otherwise render the page with no colour at all. */
@supports not (color: oklch(0.5 0.1 250)) {
  :root {
    --surface-base: #f7f8f9; --surface-card: #ffffff;
    --text-strong: #1f242a; --text-default: #474d54; --text-muted: #6b7178;
    --text-error: #97231d;
    --border-subtle: rgba(0,0,0,.07); --border-default: rgba(0,0,0,.12); --border-strong: rgba(0,0,0,.18);
    --accent: #2453c4; --accent-fill: #2f66e8; --accent-hover: #2453c4; --accent-ring: rgba(47,102,232,.28);
    --accent-tint: rgba(47,102,232,.09); --on-fill: #fff;
    --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.10);
    --shadow-card-hover: 0 2px 4px rgba(0,0,0,.05), 0 12px 32px -12px rgba(0,0,0,.14);
  }
}

/* The gutter opens up once there is room for it. At 1100px a 1040px measure with
   a 40px gutter leaves the logo almost against the edge. */
@media (min-width: 760px) {
  :root { --gutter: 96px; }
}

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

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

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

.shell {
  flex: 1;
  width: min(100% - var(--gutter), var(--measure));
  margin-inline: auto;
  padding-block: 64px 56px;
}

/* The heading above, the search and the cards below at the full width. Until
   27 October 2026 the masthead held a 320px column of its own, which left the
   cards one narrow column and the page twice as long (owner: "keep cards side
   by side"). */
.layout { display: grid; gap: 32px; }
.layout__main { min-width: 0; }
.masthead { margin-bottom: 0; max-width: 640px; }

@media (max-width: 599px) {
  .shell { padding-block: 36px 40px; }
  .layout { gap: 28px; }
}

body.is-gate .shell {
  display: grid;
  place-content: center;
  justify-items: stretch;
  gap: 18px;
  width: min(100% - 40px, 380px);
  padding-block: 40px;
}

/* ── top bar ─────────────────────────────────────────────────────────────── */

.topbar {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}

.topbar__inner {
  width: min(100% - var(--gutter), var(--measure));
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* The lockup carries its own colour, so the ® is the only part that has to be
   matched to the surface. It rides as text, as it does on the site. */
.brand { display: inline-flex; align-items: flex-start; gap: 3px; text-decoration: none; }
.brand__lockup { height: 20px; width: auto; display: block; }
.brand__tm { font-size: 9px; line-height: 1; color: var(--text-muted); }

.brand--lg .brand__lockup { height: 23px; }
.brand--lg .brand__tm { font-size: 10px; }

.topbar__nav { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.topbar__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 10px;
  border-radius: var(--radius-input);
  font-family: var(--font-body);     /* navigation, not a data token */
  font-size: 14px;
  font-weight: 500;
  color: var(--text-default);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.topbar__nav a:hover { color: var(--text-strong); background: var(--surface-base); }

/* Webzenia's bar carries three links, and at 390px "Sign out" broke onto two
   lines. The words never wrap; on a narrow phone the links close up and the
   lockup steps down a size so all three fit beside it. */
.topbar__nav a { white-space: nowrap; }
@media (max-width: 419px) {
  .topbar__inner { gap: 8px; }
  .topbar .brand__lockup { height: 17px; }
  .topbar__nav { margin-right: -6px; }
  .topbar__nav a { padding-inline: 6px; font-size: 13px; }
}

/* ── shared type ─────────────────────────────────────────────────────────── */

/* Sentence-case prose in the body face, as components/eyebrow.md has it. It
   was mono until 30 September 2026, which put "Client access", "Prepared for"
   and every document kind in the voice kept for data tokens (anti-slop D1). */
.eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}

.display {
  margin: 10px 0 0;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

/* ── the gate ────────────────────────────────────────────────────────────── */

.gate {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.gate .brand { margin-bottom: 18px; }
.gate .eyebrow { margin-bottom: 10px; }
.gate__lede { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

.field {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;                 /* under 16px and iOS zooms the page on focus */
  color: var(--text-strong);
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field::placeholder { color: var(--text-muted); }

/* The Show button sits inside the field's right edge, so the field keeps its
   full width and the button never wraps under it on a narrow phone. */
.field-wrap { position: relative; }
.field-wrap .field { padding-right: 76px; }
.field__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.field__toggle:hover { background: var(--surface-card); }
.field__toggle[hidden] { display: none; }
.field:focus {
  outline: none;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.button {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 500;
  color: var(--on-fill);
  background: var(--accent-fill);
  border: 0;
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: background-color .15s ease;
}
.button:hover { background: var(--accent-hover); }
/* The same button as a link at its own width: "Your posts" on a client's page,
   into the social desk (30 October 2026). Layout only, no new values. */
a.button { text-decoration: none; }
.button--inline { display: inline-flex; align-items: center; width: auto; }

.gate__error { margin: 12px 0 0; font-size: 14px; color: var(--text-error); }
.gate__foot {
  margin: 22px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
}

.gate__help {
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
}
.gate__help a { color: var(--accent); }

/* ── document lists ──────────────────────────────────────────────────────── */

.masthead__lede { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
/* A line that explains an empty or shortened list. Strong text on the plain
   surface, no tint and no box: it is a sentence, not an alarm. */
.masthead__note { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-strong); }

/* A group is a heading and its cards. The space above a group is what
   separates it, so the first one adds none. */
.group:not(:first-child) { margin-top: 44px; }
.group__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-strong);
  scroll-margin-top: 24px;
}

/* Two cards to a row from 700px, one below that. A row's cards share its
   height, and each card keeps its buttons on its bottom edge, so a row reads
   as a row whatever the titles do. */
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) {
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.doc[hidden], .group[hidden] { display: none; }

.doc {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.doc:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.doc__title { margin: 8px 0 0; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--text-strong); }
/* The title is the card's one link, and its ::after covers the card, so the
   whole card opens the document while a screen reader hears only the title. */
.doc__link { color: inherit; text-decoration: none; transition: color .15s ease; }
.doc__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.doc:hover .doc__link { color: var(--accent); }
.doc__link:focus-visible { outline: none; }
.doc__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-card); }

/* Two lines on a wide screen and three on a phone, where two hold too few
   words to say anything. The document holds the rest. Summaries ran to
   seventeen lines on a phone before 27 October 2026. */
.doc__summary {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 599px) {
  .doc__summary { -webkit-line-clamp: 3; }
}
.doc__meta { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }

/* The first line: kind, date, and at most one or two labels. Labels are
   rectangular and sentence case (anti-slop D1, D9). */
.doc__tag,
.doc__unlisted {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--surface-base);
  color: var(--text-muted);
}
/* New and Updated are a change of state, one of the four things blue may
   mean (anti-slop D3). */
.doc__tag.is-new { background: var(--accent-tint); color: var(--accent); font-weight: 500; }

/* Read is drawn as the card's button and opens what the title opens: it sits
   under the title's ::after, so it needs no link of its own. The PDF and the
   earlier versions are lifted above that layer to stay their own links. */
.doc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin-top: auto;
  padding-top: 18px;
}
.doc__read {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  transition: border-color .15s ease, background-color .15s ease;
}
.doc:hover .doc__read { border-color: var(--border-strong); background: var(--surface-base); }

.doc__pdf,
.doc__versions { position: relative; z-index: 1; }

/* An inline block, not inline-flex: flex would split the label and its size
   into two items, each with its own underline and the space between them
   dropped. The padding gives it the same 40px as the button beside it. */
.doc__pdf {
  display: inline-block;
  padding-block: 10px;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-default);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
.doc__pdf:hover { color: var(--accent); text-decoration-color: currentColor; }
.doc__size { color: var(--text-muted); }

.doc__versions { font-size: 14px; color: var(--text-muted); }
.doc__versions summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  list-style: none;
  cursor: pointer;
  border-radius: 4px;
}
.doc__versions summary::-webkit-details-marker { display: none; }
/* The fold's own marker, drawn rather than the browser's, which differs
   between Safari and Chrome. It turns when the fold opens. */
.doc__versions summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .15s ease;
}
.doc__versions[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.doc__versions summary:hover { color: var(--text-strong); }
/* Open, the fold takes the whole width of the card, so the dates list under
   the actions rather than squeezing beside them. */
.doc__versions[open] { flex-basis: 100%; }
.doc__versions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.doc__versions li { white-space: nowrap; }
.doc__versions li a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-default);
  text-underline-offset: 3px;
}
.doc__versions li a:hover { color: var(--accent); }
@media (pointer: coarse) {
  .doc__versions li a { min-height: 44px; }
  .doc__versions summary { min-height: 44px; }
  .doc__pdf { padding-block: 12px; }
}

/* ── the document search (Webzenia and staff home) ───────────────────────── */
/* Light, like everything else on this host (rule 10): every result opens a
   client document, and those are light, so a dark list would flash white on
   every click. The filters are rectangular, per radius.md and anti-slop D9:
   a capsule is the most recognisable "built fast" signal there is. */

.finder { margin: 0 0 24px; }
.finder__label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--text-strong); }
.finder__row { display: flex; gap: 10px; }
.finder__row .field { flex: 1; min-width: 0; background: var(--surface-card); }

/* The client list sits between the box and the button on a wide screen, and
   takes its own line under the box on a phone, beside the button. The arrow is
   drawn, so it looks the same in Safari, Chrome and Edge. */
.finder__row .finder__select {
  flex: 0 0 260px;
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7178' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
@media (max-width: 699px) {
  .finder__row { flex-wrap: wrap; }
  .finder__row #finder-q { flex-basis: 100%; }
  .finder__row .finder__select { flex: 1 1 0; }
}
.finder__go {
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  font: inherit;
  font-weight: 500;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.finder__go:hover { border-color: var(--border-strong); background: var(--surface-base); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
/* On a phone the buttons are one row that scrolls sideways, edge to edge: the
   search's seventeen kinds stacked seven rows deep before the first card. */
@media (max-width: 599px) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) / -2);
    padding: 4px calc(var(--gutter) / 2);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text-default);
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--border-strong); color: var(--text-strong); }
.chip__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chip[hidden] { display: none; }
.chip[aria-current="true"] {
  color: var(--on-fill);
  background: var(--accent-fill);
  border-color: var(--accent-fill);
}
.chip[aria-current="true"] .chip__n { color: var(--on-fill); }

.finder__count { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.finder__empty { margin: 0; font-size: 15px; color: var(--text-muted); }
.finder__list:focus { outline: none; }

/* Previous, where you are, Next. The steps are the finder's own secondary
   button; a step that goes nowhere stays in place, faded, so the bar does not
   jump between pages. */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.pager[hidden] { display: none; }
.pager__where { margin: 0; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pager__step {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  transition: border-color .15s ease, background-color .15s ease;
}
.pager__step[href]:hover { border-color: var(--border-strong); background: var(--surface-base); }
.pager__step:not([href]) { color: var(--text-muted); border-color: var(--border-subtle); cursor: default; }
@media (pointer: coarse) {
  .chip { min-height: 44px; }
}
.doc__client { color: var(--text-strong); font-weight: 500; }

/* Summaries run to five lines on some documents. In a list of fifty that is a
   wall, so the search shows three and the document holds the rest. The full
   text is still searched. */
.is-finder .doc__summary { -webkit-line-clamp: 3; }

@media (max-width: 480px) {
  .finder__go { padding: 0 14px; }
  .doc { padding: 20px 20px 16px; }
}

/* ── status ──────────────────────────────────────────────────────────────── */

.status { width: 100%; border-collapse: collapse; font-size: 14px; }
.status th, .status td { padding: 11px 0; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.status th { font-weight: 400; color: var(--text-muted); padding-right: 20px; }
.status td { font-family: var(--font-mono); font-size: 13px; color: var(--text-strong); }

/* ── the notes inbox ─────────────────────────────────────────────────────── */
/* Internal, and the only page on this host that has to hold two things a
   reader could confuse: where a walk has reached, which arrives as the reader
   ticks, and the answer they submitted. The separation is carried by the
   WORDS, and it has to survive a monochrome print and a reader who does not
   stop to look, so nothing below distinguishes the two by colour.
   What this does fix is that the meta line sits INSIDE the heading, so at the
   page's default styling "Progress, not a sign-off" and "cloudstrats ·
   acceptance · last reported…" rendered as one run-on heading and the sentence
   that does the separating was the hardest line on the page to read. */

.notes .note {
  margin: 0 0 26px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--border-subtle);
}
.notes .note h2 { margin: 0 0 12px; font-size: 17px; font-weight: 500; color: var(--text-strong); }
.notes .note h2 .meta {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.notes .meta { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.notes .note p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.notes pre { margin: 8px 0 0; white-space: pre-wrap; font-family: var(--font-mono); font-size: 13px; }
.notes figure { margin: 14px 0 0; }
.notes figcaption { margin-top: 6px; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.sitefoot {
  margin-top: 40px;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
}

.sitefoot__inner {
  width: min(100% - var(--gutter), var(--measure));
  margin-inline: auto;
  padding-block: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: space-between;
}

.sitefoot__title { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-strong); }
.sitefoot__line  { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

.sitefoot__meta { text-align: right; }
.sitefoot__meta p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.sitefoot__meta p + p { margin-top: 6px; }
.sitefoot__meta a { color: var(--accent); text-decoration: none; }
.sitefoot__meta a:hover { text-decoration: underline; }

.sitefoot__base {
  width: min(100% - var(--gutter), var(--measure));
  margin-inline: auto;
  padding-block: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}
.sitefoot__base p { margin: 0; }
.sitefoot__base a { color: var(--text-muted); }
.sitefoot__base a:hover { color: var(--accent); }

/* The right-hand column reads as a second block once it wraps, so it stops
   being right-aligned. */
@media (max-width: 560px) {
  .sitefoot__meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}