/* ==========================================================================
   Corporate Synergy Design System
   Corporate Synergy — Global design language

   Scope: tokens, base elements, and reusable primitives only.
   Do not add page-specific or section-specific layout rules here.
   Governed by the project governance document
   ========================================================================== */

/* --------------------------------------------------------------------------
   Table of contents
   1.  Custom properties (design tokens)
   2.  Reset & base
   3.  Typography
   4.  Containers & reading widths
   5.  Navigation
   6.  Buttons
   7.  Links & interactive text
   8.  Lists
   9.  Blockquotes
   10. Tables
   11. Forms
   12. Media & figures
   13. Horizontal rules & code
   14. Utility classes
   15. Responsive breakpoints
   16. Accessibility
   17. Reduced motion
   18. Print
   19. Site framework (header, footer, editorial components)
   -------------------------------------------------------------------------- */


/* ==========================================================================
   1. Custom properties (design tokens)
   ========================================================================== */

:root {
  /* — Colour: ink on paper — */
  --color-ink: #1c1c1c;
  --color-ink-muted: #454545;
  --color-ink-subtle: #6e6e6e;
  --color-ink-faint: #949494;

  --color-paper: #fafaf8;
  --color-paper-elevated: #ffffff;
  --color-paper-muted: #f3f2ef;
  --color-paper-inset: #ebeae6;

  --color-border: #d4d2cb;
  --color-border-subtle: #e6e4de;
  --color-border-strong: #b8b5ac;

  /* Accent: used sparingly — links, focus, primary actions */
  --color-accent: #2a3f54;
  --color-accent-hover: #1e2f3f;
  --color-accent-muted: #4a6278;
  --color-accent-subtle: #e8edf1;

  --color-focus-ring: #2a3f54;
  --color-error: #8b2942;
  --color-error-subtle: #f9eef1;
  --color-success: #2d4a3e;
  --color-success-subtle: #eef4f1;

  /* — Typography — */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  --font-body: var(--font-serif);
  --font-heading: var(--font-serif);
  --font-ui: var(--font-sans);

  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1.0625rem; /* 17px — generous executive reading size */
  --font-size-md: 1.1875rem;   /* 19px */
  --font-size-lg: 1.375rem;    /* 22px */
  --font-size-xl: 1.75rem;     /* 28px */
  --font-size-2xl: 2.125rem;   /* 34px */
  --font-size-3xl: clamp(2.375rem, 4vw + 1rem, 3.25rem);
  --font-size-display: clamp(2.75rem, 5vw + 1rem, 4rem);

  --line-height-tight: 1.25;
  --line-height-snug: 1.4;
  --line-height-base: 1.65;
  --line-height-relaxed: 1.75;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --letter-spacing-tight: -0.015em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-caps: 0.08em;

  /* — Spacing (8px base rhythm) — */
  --space-2xs: 0.25rem;  /*  4px */
  --space-xs: 0.5rem;    /*  8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */

  /* — Layout — */
  --container-max: 72rem;       /* 1152px */
  --container-wide-max: 80rem;  /* 1280px */
  --reading-max: 42rem;         /* ~672px / ~65 characters */
  --reading-wide-max: 48rem;    /* wider editorial measure */
  --reading-narrow-max: 36rem;  /* side notes, captions */

  --container-padding: clamp(var(--space-md), 4vw, var(--space-2xl));
  --section-gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  --section-gap-related: clamp(var(--space-md), 2.5vw, var(--space-xl));
  --section-gap-hero-transition: clamp(var(--space-lg), 3vw, var(--space-2xl));
  --section-gap-footer: clamp(var(--space-3xl), 6vw, var(--space-5xl));

  /* — Borders & radii — */
  --border-width: 1px;
  --border-width-thick: 2px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* — Shadows (minimal — elevation rarely needed) — */
  --shadow-subtle: 0 1px 2px rgb(28 28 28 / 0.04);

  /* — Transitions — */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* — Focus — */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* — Breakpoints (reference values — used in @media below) — */
  --bp-sm: 36rem;   /* 576px */
  --bp-md: 48rem;   /* 768px */
  --bp-lg: 64rem;   /* 1024px */
  --bp-xl: 75rem;   /* 1200px */

  /* — Site chrome — */
  --site-header-height: 4.5rem;
}


/* ==========================================================================
   2. Reset & base
   ========================================================================== */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
  scroll-padding-block-start: var(--site-header-height);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: var(--color-ink);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent layout shift from scrollbar; supported in modern browsers */
html {
  scrollbar-gutter: stable;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

[hidden] {
  display: none !important;
}

/* Unstyled control reset — for toggles and custom buttons */
.unstyled {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
}

.unstyled:focus {
  outline: none;
}


/* ==========================================================================
   3. Typography
   ========================================================================== */

/* Headings — hierarchy through size and weight, not decoration */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin-block-end: var(--space-lg);
}

h2 {
  font-size: var(--font-size-2xl);
  margin-block: var(--space-2xl) var(--space-md);
}

h3 {
  font-size: var(--font-size-xl);
  margin-block: var(--space-xl) var(--space-sm);
}

h4 {
  font-size: var(--font-size-lg);
  margin-block: var(--space-lg) var(--space-sm);
}

h5 {
  font-size: var(--font-size-md);
  margin-block: var(--space-lg) var(--space-xs);
}

h6 {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-block: var(--space-lg) var(--space-xs);
}

/* Display heading — for rare, large editorial titles */
.display {
  font-size: var(--font-size-display);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
}

/* Body copy */
p {
  margin-block-end: var(--space-md);
  max-width: var(--reading-max);
  text-wrap: pretty;
}

p:last-child {
  margin-block-end: 0;
}

.lead {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
}

small,
.text-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}

.text-xs {
  font-size: var(--font-size-xs);
}

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

.text-subtle {
  color: var(--color-ink-subtle);
}

.text-ui {
  font-family: var(--font-ui);
}

.text-caps {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

em,
i {
  font-style: italic;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  cursor: help;
}

mark {
  background-color: var(--color-paper-inset);
  color: inherit;
  padding-inline: 0.15em;
}

sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.4em;
}

sub {
  bottom: -0.2em;
}

/* Vertical rhythm for flowing prose */
.prose > * + * {
  margin-block-start: var(--space-md);
}

.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + * {
  margin-block-start: var(--space-sm);
}

.prose > h2,
.prose > h3,
.prose > h4 {
  margin-block-start: var(--space-2xl);
}

/* Organisational advisory assignment bridges */
.assignment-bridge {
  margin-block-start: var(--space-sm);
  margin-block-end: var(--space-sm);
  font-style: italic;
  color: var(--color-text-muted, #5f6b6d);
}

/* ==========================================================================
   4. Containers & reading widths
   ========================================================================== */

/*
   .container      — full site width with horizontal padding
   .container-wide — slightly wider variant for sparse layouts
   .reading        — optimal prose measure (65ch territory)
   .reading-wide   — wider editorial measure
   .reading-narrow — captions, asides, meta text
   .stack          — vertical spacing primitive (not a page layout)
   .cluster        — horizontal grouping primitive (not a page layout)
*/

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

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

.reading,
.reading-width {
  width: 100%;
  max-width: var(--reading-max);
}

.reading-wide {
  width: 100%;
  max-width: var(--reading-wide-max);
}

.reading-narrow {
  width: 100%;
  max-width: var(--reading-narrow-max);
}

/* Centre a reading column within a container */
.reading-center {
  margin-inline: auto;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-md));
}

.stack-lg {
  --stack-gap: var(--space-lg);
}

.stack-xl {
  --stack-gap: var(--space-xl);
}

.stack-2xl {
  --stack-gap: var(--space-2xl);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-sm));
}


/* ==========================================================================
   5. Navigation
   ========================================================================== */

/*
   Styles semantic <nav> elements and lists within them.
   Does not prescribe site-wide header/footer layout structure.

   Expected markup:
   <nav aria-label="Primary">
     <ul>
       <li><a href="..." aria-current="page">Page</a></li>
     </ul>
   </nav>
*/

nav {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
}

nav li {
  margin: 0;
}

nav a {
  display: inline-block;
  padding-block: var(--space-xs);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-block-end: var(--border-width) solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

nav a:hover {
  color: var(--color-ink);
}

nav a[aria-current="page"],
nav a.is-active {
  color: var(--color-ink);
  border-block-end-color: var(--color-ink);
}

/* Vertical navigation variant — apply class to <nav> */
nav.nav-vertical ul {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
}

nav.nav-vertical a {
  padding-block: var(--space-2xs);
  border-block-end: none;
  border-inline-start: var(--border-width-thick) solid transparent;
  padding-inline-start: var(--space-sm);
}

nav.nav-vertical a[aria-current="page"],
nav.nav-vertical a.is-active {
  border-inline-start-color: var(--color-ink);
}

/* Footer navigation — quieter treatment */
nav.nav-footer {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-normal);
}

nav.nav-footer a {
  color: var(--color-ink-subtle);
}

nav.nav-footer a:hover {
  color: var(--color-ink-muted);
}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

/*
   .btn            — base button
   .btn-primary    — primary action
   .btn-secondary  — secondary / outline
   .btn-text       — text-only, minimal

   Also styles native <button> and input[type="submit|button|reset"].
*/

.btn,
button:not(.unstyled),
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-paper-elevated);
  background-color: var(--color-accent);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.btn:hover,
button:not(.unstyled):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn:active,
button:not(.unstyled):active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  transform: translateY(1px);
}

.btn-secondary,
button.secondary {
  color: var(--color-accent);
  background-color: transparent;
  border-color: var(--color-border-strong);
}

.btn-secondary:hover,
button.secondary:hover {
  color: var(--color-accent-hover);
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent-muted);
}

.btn-text {
  min-height: auto;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent);
  background-color: transparent;
  border-color: transparent;
  letter-spacing: var(--letter-spacing-normal);
}

.btn-text:hover {
  color: var(--color-accent-hover);
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.btn-sm {
  min-height: 2.25rem;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-xs);
}

.btn-lg {
  min-height: 3rem;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
}

.btn:disabled,
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* ==========================================================================
   7. Links & interactive text
   ========================================================================== */

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

a:not([class]) {
  text-decoration-line: underline;
}

/* Standalone text links without button chrome */
.link-plain {
  color: inherit;
  text-decoration: none;
  border-block-end: var(--border-width) solid var(--color-border);
  transition: border-color var(--transition-fast);
}

.link-plain:hover {
  color: inherit;
  border-block-end-color: var(--color-ink);
}


/* ==========================================================================
   8. Lists
   ========================================================================== */

/*
   Default lists inherit prose styling.
   .list-plain removes markers for navigation-like lists outside <nav>.
*/

ul:not(nav ul):not(.list-plain),
ol:not(.list-plain) {
  margin-block: var(--space-md);
  padding-inline-start: var(--space-lg);
  max-width: var(--reading-max);
}

ul:not(nav ul):not(.list-plain) {
  list-style-type: disc;
}

ol:not(.list-plain) {
  list-style-type: decimal;
}

li:not(nav li) {
  margin-block-end: var(--space-xs);
  padding-inline-start: var(--space-2xs);
}

li:not(nav li)::marker {
  color: var(--color-ink-subtle);
}

ul ul,
ol ol,
ul ol,
ol ul {
  margin-block: var(--space-xs);
}

.list-plain {
  list-style: none;
  padding-inline-start: 0;
}

/* Definition lists — editorial glossaries, metadata */
dl {
  margin-block: var(--space-md);
  max-width: var(--reading-max);
}

dt {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-block-start: var(--space-md);
}

dt:first-child {
  margin-block-start: 0;
}

dd {
  margin-inline-start: 0;
  margin-block-start: var(--space-2xs);
  color: var(--color-ink);
}


/* ==========================================================================
   9. Blockquotes
   ========================================================================== */

blockquote {
  margin-block: var(--space-xl);
  padding-inline-start: var(--space-lg);
  border-inline-start: var(--border-width-thick) solid var(--color-border-strong);
  max-width: var(--reading-wide-max);
  color: var(--color-ink-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  font-style: italic;
}

blockquote p {
  max-width: none;
}

blockquote cite,
blockquote footer {
  display: block;
  margin-block-start: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-style: normal;
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-ink-subtle);
}

blockquote cite::before,
blockquote footer::before {
  content: "— ";
}


/* ==========================================================================
   10. Tables
   ========================================================================== */

/*
   Editorial table styling for data and structured content.
   .table-wrapper enables horizontal scroll on narrow viewports.
*/

.table-wrapper {
  overflow-x: auto;
  margin-block: var(--space-lg);
  -webkit-overflow-scrolling: touch;
}

.table-wrapper:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

table {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  border-block: var(--border-width) solid var(--color-border);
}

caption {
  caption-side: top;
  padding-block-end: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: start;
  color: var(--color-ink-muted);
}

thead {
  border-block-end: var(--border-width) solid var(--color-border-strong);
}

th {
  padding: var(--space-sm) var(--space-md);
  font-weight: var(--font-weight-medium);
  text-align: start;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-ink);
  background-color: var(--color-paper-muted);
}

td {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink-muted);
  border-block-end: var(--border-width) solid var(--color-border-subtle);
  vertical-align: top;
}

tbody tr:last-child td {
  border-block-end: none;
}

tbody tr:hover td {
  background-color: var(--color-paper-muted);
}

/* Numeric columns */
td.num,
th.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   11. Forms
   ========================================================================== */

form {
  max-width: var(--reading-max);
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

legend {
  display: block;
  width: 100%;
  margin-block-end: var(--space-md);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-ink);
}

label,
.label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink);
}

.label-optional {
  font-weight: var(--font-weight-normal);
  color: var(--color-ink-subtle);
}

.label-required {
  color: var(--color-error);
  margin-inline-start: var(--space-2xs);
}

.field {
  margin-block-end: var(--space-lg);
}

.field-hint {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--color-ink-subtle);
  line-height: var(--line-height-snug);
}

.field-error {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  line-height: var(--line-height-snug);
  color: var(--color-ink);
  background-color: var(--color-paper-elevated);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-ink-faint);
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-border-strong);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--color-paper-muted);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: var(--color-error);
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--color-error);
}

/* Checkbox & radio */
.field-checkbox,
.field-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.field-checkbox label,
.field-radio label {
  margin-block-end: 0;
  font-weight: var(--font-weight-normal);
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.2em;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Form actions row */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-border-subtle);
}


/* ==========================================================================
   12. Media & figures
   ========================================================================== */

figure {
  margin-block: var(--space-xl);
}

figcaption {
  margin-block-start: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  color: var(--color-ink-subtle);
  max-width: var(--reading-narrow-max);
}


/* ==========================================================================
   13. Horizontal rules & code
   ========================================================================== */

hr {
  margin-block: var(--space-2xl);
  border: none;
  border-block-start: var(--border-width) solid var(--color-border-subtle);
}

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.35em;
  background-color: var(--color-paper-muted);
  border-radius: var(--radius-sm);
}

pre {
  margin-block: var(--space-lg);
  padding: var(--space-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  background-color: var(--color-paper-muted);
  border: var(--border-width) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

pre code {
  padding: 0;
  background: none;
}


/* ==========================================================================
   14. Utility classes
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-paper-elevated);
  background-color: var(--color-accent);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

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

.divider {
  border: none;
  border-block-start: var(--border-width) solid var(--color-border-subtle);
  margin-block: var(--space-2xl);
}

.visually-hidden {
  /* Alias for .sr-only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   15. Responsive breakpoints
   ========================================================================== */

/* Small — large phones */
@media (min-width: 36rem) {
  :root {
    --container-padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
  }
}

/* Medium — tablets */
@media (min-width: 48rem) {
  h1 {
    margin-block-end: var(--space-xl);
  }

  nav ul {
    gap: var(--space-xs) var(--space-xl);
  }

  th,
  td {
    padding: var(--space-sm) var(--space-lg);
  }
}

/* Large — desktops */
@media (min-width: 64rem) {
  :root {
    --font-size-base: 1.125rem; /* 18px at desktop */
  }

  blockquote {
    padding-inline-start: var(--space-xl);
  }
}

/* Extra large — wide screens */
@media (min-width: 75rem) {
  .container,
  .container-wide {
    padding-inline: var(--space-2xl);
  }
}


/* ==========================================================================
   16. Accessibility
   ========================================================================== */

/* Visible focus for keyboard users only */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* High-contrast preference */
@media (prefers-contrast: more) {
  :root {
    --color-border: #8a8780;
    --color-border-strong: #5c5952;
    --color-ink-muted: #2e2e2e;
    --focus-ring-width: 3px;
  }

  a,
  nav a {
    text-decoration-line: underline;
  }

  .btn,
  button:not(.unstyled),
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    border-width: var(--border-width-thick);
  }
}

/* Target / scroll margin for anchored headings */
:target {
  scroll-margin-block-start: var(--space-2xl);
}

h1,
h2,
h3,
h4,
h5,
h6,
[id] {
  scroll-margin-block-start: var(--space-2xl);
}


/* ==========================================================================
   17. Reduced motion
   ========================================================================== */

@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;
  }

  .btn:active,
  button:not(.unstyled):active,
  input[type="submit"]:active,
  input[type="button"]:active,
  input[type="reset"]:active {
    transform: none;
  }

  .skip-link {
    transition: none;
  }
}


/* ==========================================================================
   18. Print
   ========================================================================== */

@media print {
  :root {
    --color-ink: #000000;
    --color-ink-muted: #333333;
    --color-paper: #ffffff;
    --color-border: #cccccc;
    --color-accent: #000000;
  }

  @page {
    margin: 2cm;
  }

  body {
    font-size: 11pt;
    line-height: 1.5;
    background: white;
    color: black;
  }

  /* Hide non-essential chrome */
  .site-header,
  .site-footer,
  nav,
  .skip-link,
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  form,
  .no-print {
    display: none !important;
  }

  /* Expand content */
  .container,
  .container-wide,
  .reading,
  .reading-width,
  .reading-wide,
  .reading-narrow {
    max-width: none;
    padding-inline: 0;
  }

  p,
  ul,
  ol,
  dl,
  blockquote {
    max-width: none;
  }

  /* Avoid awkward breaks */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  p,
  li,
  blockquote,
  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Show link destinations for standalone links */
  a[href^="http"]:not(.link-plain)::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: var(--color-ink-muted);
  }

  /* Clean tables for print */
  table {
    border-block: var(--border-width) solid #000;
  }

  th {
    background-color: #f0f0f0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  td,
  th {
    border: var(--border-width) solid #ccc;
  }

  tbody tr:hover td {
    background-color: transparent;
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}


/* ==========================================================================
   19. Site framework
   Shared header, footer, editorial components, and navigation behaviour.
   ========================================================================== */

/* — Page shell — */
body {
  display: flex;
  flex-direction: column;
  padding:
    env(safe-area-inset-top, 0)
    env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

main {
  flex: 1 0 auto;
  outline: none;
}

main:focus {
  outline: none;
}

/* — Site header — */
.site-header {
  position: static;
  top: 0;
  z-index: 100;
  isolation: isolate;
}

body.contact-page .site-header,
body.article-page .site-header {
  position: static;
}

.site-header__bar {
  background-color: rgb(250 250 248 / 0.94);
  border-block-end: var(--border-width) solid transparent;
}

@supports (backdrop-filter: blur(8px)) {
  .site-header__bar {
    background-color: rgb(250 250 248 / 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--site-header-height);
  padding-block: var(--space-sm);
}

/* Wordmark / logo placeholder */
.site-logo {
  justify-self: start;
  min-width: 0;
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1;
}

.site-logo:hover {
  color: var(--color-ink-muted);
}

.site-logo:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-logo__wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-family: var(--font-ui);
}

.site-logo__brand {
  display: block;
  inline-size: max-content;
  max-inline-size: 100%;
  font-size: clamp(var(--font-size-xs), 2.6vw, var(--font-size-sm));
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-caps);
}

.site-logo__descriptor {
  display: block;
  inline-size: max-content;
  max-inline-size: 100%;
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-normal);
}

/* Mobile nav toggle — text label only */
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-ink);
  background-color: var(--color-paper-elevated);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.site-nav-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-border-strong);
  background-color: var(--color-paper-muted);
}

.site-nav-toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-nav-toggle[aria-expanded="true"] {
  color: var(--color-accent);
  border-color: var(--color-accent-muted);
  background-color: var(--color-accent-subtle);
}

/* Primary navigation */
.site-nav {
  font-family: var(--font-ui);
  grid-column: 1 / -1;
}

.site-nav--mobile {
  display: none;
}

.site-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: var(--space-xs);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-ink-muted);
  text-decoration: none;
  border-block-end: var(--border-width) solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav a:hover {
  color: var(--color-ink);
}

.site-nav a[aria-current="page"] {
  color: var(--color-ink);
  border-block-end-color: var(--color-ink);
  font-weight: var(--font-weight-medium);
}

.site-nav a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}


/* — Site footer — */
.site-footer {
  margin-block-start: auto;
  padding-block: var(--space-2xl);
  border-block-start: var(--border-width) solid var(--color-border);
  background-color: var(--color-paper);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-xl);
}

.site-footer__nav ul {
  gap: var(--space-xs) var(--space-md);
}

.site-footer__nav a {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
}

.site-footer__nav a[aria-current="page"] {
  color: var(--color-ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-sm) var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-border-subtle);
}

.site-footer__copyright {
  margin: 0;
  max-width: none;
}

.site-footer__copyright small {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--color-ink-subtle);
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-ink-subtle);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-footer__social-link:hover {
  color: var(--color-accent);
}

.site-footer__social-link:focus-visible {
  color: var(--color-accent);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-footer__social-icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}



/* — Button refinements — */
a.btn {
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.btn-primary {
  color: var(--color-paper-elevated);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  color: var(--color-paper-elevated);
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-text:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.btn-secondary:focus-visible {
  background-color: var(--color-accent-subtle);
}

.btn[aria-disabled="true"],
a.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/* — Editorial reading components — */
.reading-container {
  width: 100%;
  max-width: var(--reading-max);
}

.reading-container.reading-center {
  margin-inline: auto;
}

.section-container {
  padding-block: var(--section-gap);
}

.section-container + .section-container {
  padding-block-start: var(--section-gap-related);
}

.section-container > .container > .reading-container:last-child {
  margin-block-end: 0;
}

.section-container .reading-container > h2:first-child,
.section-container .reading-container.prose > h2:first-child {
  margin-block-start: 0;
}

.page-hero {
  padding-block-start: clamp(var(--space-xl), 4vw, var(--space-3xl));
  padding-block-end: var(--section-gap-hero-transition);
}

.page-hero .reading-container > :first-child {
  margin-block-start: 0;
}

.section-container:last-of-type {
  padding-block-end: var(--section-gap-footer);
}

.kicker {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-block-end: var(--space-sm);
  max-width: var(--reading-max);
}

.section-label {
  margin-block-start: var(--space-2xl);
  margin-block-end: 0;
  padding-block-start: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-border-subtle);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.email-reveal {
  margin-block-start: var(--space-lg);
}

.email-reveal__result {
  margin-block-start: var(--space-md);
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  line-height: var(--line-height-snug);
}

.email-reveal__result:empty {
  display: none;
}

.contact-form {
  margin-block-start: var(--space-2xl);
}

.contact-form .form-actions {
  border-block-start: 0;
  padding-block-start: 0;
}

.contact-form__honeypot {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.contact-form__status {
  margin-block-start: var(--space-xl);
  padding-block: var(--space-md);
  border-block: var(--border-width) solid var(--color-border-subtle);
  color: var(--color-ink);
}

.contact-form__status--error {
  color: var(--color-error);
  border-block-color: var(--color-error);
}

.contact-form__status:focus-visible {
  outline-offset: var(--space-xs);
}

.contact-confidence {
  margin-block-start: var(--space-xl);
  font-size: var(--font-size-sm);
  color: var(--color-ink-subtle);
}

@media (max-width: 35rem) {
  .contact-form .btn {
    width: 100%;
  }
}

.domain-heading {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-width-thick) solid var(--color-border-strong);
  font-family: var(--font-ui);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-ink);
}

.section-bridge {
  margin-block-start: var(--space-2xl);
  margin-block-end: 0;
  max-width: var(--reading-max);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  font-style: italic;
  color: var(--color-ink-muted);
}

.article-meta {
  margin-block-end: var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  color: var(--color-ink-subtle);
}

.article-header {
  padding-block-end: var(--space-xl);
}

.article-header .lead {
  margin-block-start: var(--space-lg);
  max-width: 42rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
}

.article-body {
  padding-block-start: var(--space-lg);
}

.insight-entry {
  max-width: var(--reading-max);
}

.insights-list {
  display: grid;
  gap: 0;
  margin-block: var(--space-xl) 0;
  padding-inline-start: 0;
  max-width: var(--reading-wide-max);
}

.insights-list__item {
  list-style: none;
  padding-block: var(--space-xl);
  border-block-start: var(--border-width) solid var(--color-border-subtle);
}

.insights-list__item:first-child {
  padding-block-start: 0;
  border-block-start: none;
}

.insights-list__item:last-child {
  padding-block-end: 0;
}

.insight-entry > :first-child,
.article-header .reading-container > :first-child,
.article-body .reading-container > :first-child {
  margin-block-start: 0;
}

.insight-entry h3 {
  margin-block: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.insight-entry h3 a {
  color: inherit;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 0.18em;
}

.insight-entry h3 a:hover,
.insight-entry h3 a:focus-visible {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

.insight-entry__meta {
  margin-block-end: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-snug);
  color: var(--color-ink-subtle);
}

.insight-entry__area {
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

.insight-entry__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-ink-muted);
}

.article-body h2 {
  margin-block: var(--space-3xl) var(--space-sm);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-border-subtle);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: none;
  color: var(--color-ink);
}

.article-bridge,
.article-conclusion {
  margin-block-start: var(--space-2xl);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-width-thick) solid var(--color-border-strong);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.article-bridge strong,
.article-conclusion strong {
  display: block;
  margin-block-end: var(--space-xs);
  color: var(--color-ink);
}

.article-action {
  margin-block-start: var(--space-md);
  font-family: var(--font-ui);
}

.article-action .btn {
  letter-spacing: var(--letter-spacing-normal);
}

.article-continuation {
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-border-subtle);
}

.article-continuation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-block-start: var(--space-xl);
  font-family: var(--font-ui);
}

.article-continuation__all {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

.article-continuation__actions .btn {
  letter-spacing: var(--letter-spacing-normal);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-xl);
  font-family: var(--font-ui);
}

.editorial-question {
  margin-block: var(--space-lg);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-width-thick) solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-ink);
}

.editorial-statement {
  margin-block: var(--space-xl);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-width-thick) solid var(--color-border-strong);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.editorial-statement strong {
  display: block;
  margin-block-end: var(--space-xs);
}

.callout {
  margin-block: var(--space-xl);
  padding: var(--space-lg);
  max-width: var(--reading-wide-max);
  background-color: var(--color-paper-muted);
  border-inline-start: var(--border-width-thick) solid var(--color-accent-muted);
}

.callout > :first-child {
  margin-block-start: 0;
}

.callout p:last-child {
  margin-block-end: 0;
}

.list-spacious li:not(nav li) {
  margin-block-end: var(--space-sm);
}

.reading-container ul:not(.list-plain),
.reading-container ol:not(.list-plain),
.prose ul:not(.list-plain),
.prose ol:not(.list-plain) {
  margin-block: var(--space-md);
}

.prose .callout,
.prose .table-wrapper,
.prose blockquote {
  margin-block: var(--space-xl);
}

/* — Responsive: tablet — */
@media (min-width: 48rem) {
  :root {
    --site-header-height: 4.75rem;
  }

  .site-header__inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
  }

  .site-nav-toggle {
    display: none;
  }

  .site-nav {
    grid-column: 2;
    justify-self: end;
  }

  .site-nav__list {
    justify-content: flex-end;
    gap: var(--space-xs) var(--space-xl);
  }

  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .site-footer__nav {
    order: 2;
    justify-self: end;
  }

  .site-footer__meta {
    order: 1;
    grid-column: auto;
    padding-block-start: 0;
    border-block-start: none;
  }
}


/* — Responsive: desktop — */
@media (min-width: 64rem) {
  :root {
    --site-header-height: 5rem;
  }

  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .site-footer__nav {
    order: 2;
    justify-self: end;
  }

  .site-footer__meta {
    order: 1;
    grid-column: auto;
    flex-direction: row;
    align-items: center;
    padding-block-start: 0;
    border-block-start: none;
    gap: var(--space-xs);
  }
}


/* — Responsive: mobile navigation — */
@media (max-width: 47.99rem) {
  .site-header__inner {
    position: static;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
  }

  .site-logo,
  .site-logo__wordmark {
    min-width: 0;
  }

  .site-logo {
    display: block;
  }

  .site-logo__wordmark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1875rem;
  }

  .site-logo__brand {
    display: block;
    font-size: 0.75rem;
  }

  .site-logo__descriptor {
    display: block !important;
    inline-size: 100%;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-nav-toggle {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding-inline: var(--space-sm);
    font-size: var(--font-size-xs);
  }

  .site-nav--desktop {
    display: none;
  }

  .site-nav--mobile {
    display: block;
    grid-column: 1 / -1;
    max-height: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    background-color: var(--color-paper-elevated);
    border-block-end: var(--border-width) solid var(--color-border-subtle);
  }

  .site-nav--mobile[aria-hidden="true"] {
    max-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition:
      opacity var(--transition-base),
      visibility var(--transition-base);
  }

  .site-nav--mobile.site-nav--open {
    max-height: calc(100dvh - var(--site-header-height));
    overflow-y: auto;
    visibility: visible;
    opacity: 1;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--container-padding) var(--space-lg);
  }

  .site-nav a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-sm) 0;
    border-block-end: none;
    border-inline-start: var(--border-width-thick) solid transparent;
    padding-inline-start: var(--space-sm);
  }

  .site-nav a[aria-current="page"] {
    border-block-end: none;
    border-inline-start-color: var(--color-ink);
  }

  .site-footer__nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-header__bar {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .site-header__bar {
    background-color: var(--color-paper-elevated);
    border-block-end-color: var(--color-border-strong);
  }
}

/* Homepage diagnostic section — hierarchy and scanability */
[aria-labelledby="organisational-context"] h3 {
  font-size: 1.1rem;
  line-height: 1.35;
  margin-top: 1.75rem;
  margin-bottom: 0.45rem;
}

[aria-labelledby="organisational-context"] h3 + p {
  margin-top: 0;
}