/* Archedra — site styles.
   Built from the Archedra Design System (tokens, components and page references).
   Self-hosted fonts only; no inline styles anywhere (the CSP is default-src 'self'). */

/* ---------- Fonts (SIL OFL 1.1, see /fonts/OFL-*.txt) ---------- */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* ---------- Tokens (design/tokens/*.css) ---------- */

:root {
  /* Paper */
  --paper-0: #F7F2EA;
  --paper-1: #EEE5D8;
  --paper-2: #E3D7C6;
  --paper-3: #D2C4B0;
  /* Ink */
  --ink-1: #2D2B29;
  --ink-2: #454240;
  --ink-3: #615C56;
  --ink-4: #8C857C;
  /* Signal */
  --signal: #D4492B;
  --signal-deep: #AE3820;
  --signal-tint: #F0C9B9;
  --ochre: #E2832A;
  /* Grounds and text that do not simply flip with the theme (DARK-MODE.md) */
  --on-signal: #2D2B29;            /* text on red fills; always dark */
  --footer-bg: var(--ink-1);       /* footer is always dark */
  --footer-fg: var(--paper-1);
  --fg-inverse-muted: #A39B90;     /* footer labels, muted text on dark grounds */
  --on-ink-muted: var(--fg-inverse-muted); /* muted text on the "ink" tile (cream in dark mode) */

  /* Semantic */
  --bg-page: var(--paper-1);
  --bg-raised: var(--paper-0);
  --bg-recessed: var(--paper-2);
  --fg-1: var(--ink-1);
  --fg-2: var(--ink-2);
  --fg-muted: var(--ink-3);
  --fg-link: var(--ink-1);
  --fg-link-hover: var(--signal-deep);
  --border-strong: var(--ink-1);
  --border-subtle: var(--paper-3);
  --border-inverse: #5A5652;
  --focus-ring: var(--signal);

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-body-l: 19px;
  --text-body: 16px;
  --leading-tight: 0.92;
  --leading-body: 1.55;
  --tracking-display: -0.035em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.08em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule: 1.5px;
  --rule-heavy: 3px;
  --container: 1240px;
  --gutter: 24px;
  --header-h: 76px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ---------- Dark theme (DARK-MODE.md) ----------
   <html data-theme="light|dark|auto">; /theme.js sets it before first paint.
   Only tokens change; components read them. */

:root {
  color-scheme: light;
}

[data-theme="dark"] {
  --paper-0: #33302D;
  --paper-1: #24221F;
  --paper-2: #2E2B28;
  --paper-3: #47433E;
  --ink-1: #D8CFC1;
  --ink-2: #BCB2A4;
  --ink-3: #9A9287;
  --ink-4: #6F695F;
  --signal: #D9512F;
  --signal-deep: #EC7356;
  --signal-tint: #5A2A1E;
  --ochre: #E2832A;
  --on-signal: #1A1917;
  --footer-bg: #1A1917;
  --footer-fg: #D8CFC1;
  --fg-inverse-muted: #8F887E;
  --border-inverse: #3A3734;
  /* Deviation from DARK-MODE.md: --fg-inverse-muted on the cream "ink" tile is 2.3:1 */
  --on-ink-muted: var(--paper-3);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --paper-0: #33302D;
    --paper-1: #24221F;
    --paper-2: #2E2B28;
    --paper-3: #47433E;
    --ink-1: #D8CFC1;
    --ink-2: #BCB2A4;
    --ink-3: #9A9287;
    --ink-4: #6F695F;
    --signal: #D9512F;
    --signal-deep: #EC7356;
    --signal-tint: #5A2A1E;
    --ochre: #E2832A;
    --on-signal: #1A1917;
    --footer-bg: #1A1917;
    --footer-fg: #D8CFC1;
    --fg-inverse-muted: #8F887E;
    --border-inverse: #3A3734;
    /* Deviation from DARK-MODE.md: --fg-inverse-muted on the cream "ink" tile is 2.3:1 */
    --on-ink-muted: var(--paper-3);
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

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

html {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

main {
  flex: 1;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-out);
}

a:hover {
  color: var(--fg-link-hover);
}

::selection {
  background: var(--signal);
  color: var(--paper-0);
}

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

h1,
h2,
h3,
p {
  margin: 0;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--ink-1);
  color: var(--paper-1);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------- Type ---------- */

.display {
  font-family: var(--font-sans);
  font-stretch: 125%;
  font-weight: 850;
  font-size: clamp(48px, 7vw, 88px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.display--hero {
  font-size: clamp(44px, 6.2vw, 96px);
}

.h2 {
  font-family: var(--font-sans);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}

.h3 {
  font-family: var(--font-sans);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
}

.body-text strong {
  color: var(--ink-1);
  font-weight: 600;
}

.lead {
  font-size: var(--text-body-l);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 620px;
  text-wrap: pretty;
}

.body-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 640px;
  text-wrap: pretty;
}

/* Eyebrow: mono uppercase label, optionally numbered with a rule */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow__index {
  color: var(--ink-1);
}

.eyebrow__rule {
  width: 28px;
  height: 1.5px;
  background: currentColor;
}

/* ---------- Wordmark ---------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink-1);
  text-decoration: none;
  font-family: var(--font-sans);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.wordmark:hover {
  color: var(--ink-1);
}

.wordmark--footer {
  color: var(--footer-fg);
  font-size: 26px;
}

/* ---------- Buttons ---------- */

.btn {
  --b-bg: var(--ink-1);
  --b-fg: var(--paper-1);
  --b-bd: var(--ink-1);
  --b-hbg: var(--signal-deep);
  --b-hfg: var(--paper-0);
  --b-hbd: var(--signal-deep);
  --b-cbg: var(--paper-1);
  --b-cfg: var(--ink-1);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 13px 22px;
  border: 1.5px solid var(--b-bd);
  border-radius: var(--radius-pill);
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), transform var(--dur-fast);
}

.btn:hover {
  background: var(--b-hbg);
  border-color: var(--b-hbd);
  color: var(--b-hfg);
}

.btn:active {
  transform: translateY(1px);
}

.btn--secondary {
  --b-bg: transparent;
  --b-fg: var(--ink-1);
  --b-bd: var(--ink-1);
  --b-hbg: var(--ink-1);
  --b-hfg: var(--paper-1);
  --b-hbd: var(--ink-1);
  --b-cbg: var(--ink-1);
  --b-cfg: var(--paper-1);
}

.btn--sm {
  gap: 8px;
  min-height: 32px;
  padding: 8px 14px;
  font-size: 13px;
}

.btn--arrow {
  padding: 6px 6px 6px 22px;
}

.btn--sm.btn--arrow {
  padding: 4px 4px 4px 14px;
}

/* Arrow disc */
.btn__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--b-cbg);
  color: var(--b-cfg);
  font-family: var(--font-mono);
  font-size: 15px;
  transition: inherit;
}

.btn--sm .btn__disc {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.btn:hover .btn__disc {
  background: var(--b-hfg);
  color: var(--b-hbg);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Tag ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1.5px solid var(--ink-1);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Todo (unconfirmed fact; never publish a page that shows one) ---------- */

.todo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border: 1.5px dashed var(--signal-deep);
  color: var(--signal-deep);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
}

.todo--inline {
  display: inline-flex;
  padding: 1px 8px;
}

.todo strong {
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}

/* ---------- Header and NavPill ---------- */

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
  padding: 0 var(--gutter);
}

.site-header__contact {
  justify-self: end;
}

.navpill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  border: 1.5px solid var(--ink-1);
  border-radius: var(--radius-pill);
  list-style: none;
}

.navpill a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  color: var(--ink-1);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out);
}

.navpill a:hover {
  background: var(--paper-2);
  color: var(--ink-1);
}

.navpill a[aria-current="page"] {
  background: var(--ink-1);
  color: var(--paper-1);
}

/* ---------- Page head ---------- */

.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
  border-bottom: 1.5px solid var(--ink-1);
}

.last-updated {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---------- Sections ---------- */

.section-pad {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section-end {
  padding-bottom: var(--space-9);
}

.band {
  background: var(--bg-recessed);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-7);
}

.split--7-5 {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.stack {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

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

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

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-7);
  align-items: end;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

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

/* Composition: flat decorative blocks ("apex" variant). On the home page it is also the
   host for the animated line drawing (svg-animator, below); the apex blocks stay as the
   no-JavaScript fallback. */
.composition {
  margin: 0;
}

.composition__field {
  position: relative;
  aspect-ratio: 0.71;
  background: var(--paper-0);
  overflow: hidden;
}

.composition__field span {
  position: absolute;
  inset: 0;
}

.apex-1 {
  background: var(--ink-1);
  clip-path: polygon(50% 8%, 56% 8%, 26% 92%, 8% 92%);
}

.apex-2 {
  background: var(--ink-1);
  clip-path: polygon(50% 8%, 56% 8%, 92% 92%, 74% 92%);
}

.apex-3 {
  background: var(--signal);
  clip-path: polygon(30% 62%, 72% 62%, 74% 68%, 28% 68%);
}

/* Cards: square, borderless routing tiles */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.card {
  --c-bg: var(--paper-2);
  --c-fg: var(--ink-1);
  --c-mu: var(--ink-3);
  --c-hbg: var(--ink-1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  background: var(--c-bg);
  color: var(--c-fg);
  text-decoration: none;
  overflow: hidden;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.card--ink {
  --c-bg: var(--ink-1);
  --c-fg: var(--paper-1);
  --c-mu: var(--on-ink-muted);
  --c-hbg: var(--signal-deep);
}

.card--signal {
  --c-bg: var(--signal);
  --c-fg: var(--on-signal);
  --c-mu: var(--on-signal);
}

.card:hover {
  --c-bg: var(--c-hbg);
  --c-fg: var(--paper-1);
  --c-mu: var(--paper-2);
  color: var(--paper-1);
}

.card__top {
  display: flex;
  justify-content: space-between;
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  color: var(--c-mu);
}

.card__arrow {
  font-size: 16px;
  color: var(--c-fg);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-5);
}

.card__title {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}

.card__desc {
  font-size: 15px;
  line-height: 1.45;
  color: var(--c-mu);
  text-wrap: pretty;
}

.card__cta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ---------- FactList ---------- */

.facts {
  margin: 0;
  border-top: 1.5px solid var(--ink-1);
}

.facts > div {
  display: grid;
  grid-template-columns: minmax(110px, 180px) minmax(0, 1fr);
  gap: var(--space-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.facts dt {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.facts dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}

.facts .mono {
  font-family: var(--font-mono);
  font-size: 14px;
}

.facts--narrow {
  max-width: 640px;
}

/* ---------- Technology ---------- */

.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: var(--space-7);
  padding-bottom: var(--space-8);
}

.area {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 1.5px solid var(--ink-1);
}

.area__index {
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
}

.area__body {
  display: grid;
  gap: 12px;
  align-content: start;
}

.area__body .h2 {
  font-size: 24px;
}

/* ---------- Apps ---------- */

.app-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1.5px solid var(--ink-1);
}

.app-row__icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

.app-row__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.app-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.app-row__name {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
}

.app-row__desc {
  font-size: 16px;
  color: var(--ink-2);
  text-wrap: pretty;
}

.app-row__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Support ---------- */

.big-mail {
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  overflow-wrap: anywhere;
}

/* FAQ accordion: native <details>; the shared name makes it single-open */
.faq {
  border-top: 1.5px solid var(--ink-1);
}

.faq details {
  border-bottom: 1px solid var(--border-subtle);
}

.faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-1);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink-1);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 16px;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.faq__disc::before {
  content: "+";
}

.faq details[open] .faq__disc {
  background: var(--ink-1);
  color: var(--paper-1);
}

.faq details[open] .faq__disc::before {
  content: "\2212";
}

.faq__answer {
  padding: 0 44px 20px 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- Privacy ---------- */

.policy {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-9);
}

.toc {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 4px;
  padding-top: var(--space-7);
}

.toc a {
  padding: 6px 0 6px 12px;
  border-left: 3px solid transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
}

.toc a:hover {
  color: var(--ink-1);
}

/* Active TOC item without JavaScript: the targeted section, or the first one by default */
body:not(:has(.policy-section:target)) .toc a[href="#pp-controller"],
body:has(#pp-controller:target) .toc a[href="#pp-controller"],
body:has(#pp-website:target) .toc a[href="#pp-website"],
body:has(#pp-hosting:target) .toc a[href="#pp-hosting"],
body:has(#pp-apps:target) .toc a[href="#pp-apps"],
body:has(#pp-rights:target) .toc a[href="#pp-rights"] {
  color: var(--ink-1);
  border-left-color: var(--signal);
}

.policy-section {
  display: grid;
  gap: 16px;
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 24px;
}

.policy-section__index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
}

/* ---------- 404 ---------- */

.notfound {
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
}

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

.site-footer {
  padding: var(--space-8) var(--gutter) var(--space-5);
  background: var(--footer-bg);
  color: var(--footer-fg);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-7);
  max-width: var(--container);
  margin: 0 auto;
}

.footer-label {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-inverse-muted);
}

.footer-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  font-style: normal;
  line-height: 1.6;
}

.site-footer a,
.site-footer a:hover {
  color: var(--footer-fg);
}

.site-footer .footer-mono:hover {
  text-decoration-thickness: 3px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  font-size: 15px;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--container);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-inverse);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-inverse-muted);
}

/* ---------- Theme toggle (footer, shown only when /theme.js runs) ---------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 32px;
  margin-top: var(--space-3);
  padding: 0 14px;
  border: 1.5px solid var(--footer-fg);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--footer-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.theme-toggle:hover {
  background: var(--footer-fg);
  color: var(--footer-bg);
}

.theme-toggle:active {
  transform: translateY(1px);
}

.theme-toggle[hidden] {
  display: none;
}

/* ---------- Responsive: collapse two-column layouts below ~800px ---------- */

@media (max-width: 800px) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: var(--space-3) var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .site-header__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hero,
  .split,
  .split--7-5,
  .cards,
  .policy {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    align-items: start;
  }

  /* Centred on phones: without the paper frame, a left-aligned box made the drawing
     look off-centre. */
  .hero .composition {
    justify-self: center;
    width: 100%;
    max-width: 320px;
  }

  .page-head {
    padding-top: var(--space-8);
  }

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

  .app-row {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: start;
  }

  .facts > div {
    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);
    gap: var(--space-3);
  }

  .app-row__icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
  }

  .app-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .toc {
    position: static;
    padding-top: var(--space-6);
  }

  .policy {
    gap: 0;
  }
}

/* Phones: the design's 48px display minimum is wider than one long word ("Architecture") */
@media (max-width: 480px) {
  .display,
  .display--hero {
    font-size: clamp(34px, 10.5vw, 48px);
  }

  .big-mail {
    font-size: clamp(24px, 7.6vw, 32px);
  }

  /* The design let the NavPill scroll sideways on phones, but it read as cut off.
     Stretch it to the full width and let the five items share the space instead;
     the nav's overflow-x stays only as a safety net for very narrow screens. */
  .navpill {
    display: flex;
    width: 100%;
    gap: 0;
  }

  .navpill li {
    flex: 1 1 auto;
  }

  .navpill a {
    justify-content: center;
    width: 100%;
    padding: 0 6px;
    font-size: 13px;
  }
}

/* Very small phones (e.g. 320px): narrower gutters so the NavPill still fits */
@media (max-width: 359px) {
  :root {
    --gutter: 16px;
  }

  .navpill a {
    padding: 0 3px;
    font-size: 12px;
  }
}

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

/* ---------- Hero drawing (svg-animator package, appended verbatim) ---------- */

/* SVG animator: draw-on animation for line art produced by svg_animator.py.
   Copy this file (or its rules) into the website together with svg-animator.js.
   No inline styles are needed, so it works under a strict CSP (default-src 'self').

   Colours are not stored in the SVG files; they come from here, so every artwork has a
   light and a dark version. Values mirror Archedra PALETTE.md and DARK-MODE.md:
   light uses the palette fill, dark uses the palette "text on dark" value (thin lines
   need the lighter tone on a dark ground). The theme follows the nearest ancestor with
   data-theme="light|dark|auto" (the site sets it on <html>); otherwise the OS setting.

   Timing and line width are per artwork (data-* attributes on each SVG); the script
   applies them as --svga-draw, --svga-stroke and per-stroke animation delays. */

:root,
[data-theme="light"] {
  --svga-ground: #F7F2EA;    /* paper-0: Composition ground */
  --svga-ink: #2D2B29;       /* ink-1 */
  --svga-signal: #D4492B;
  --svga-ochre: #E2832A;
  --svga-blueprint: #5D7DC8;
  --svga-teal: #0091AD;
  --svga-moss: #4D9351;
}

[data-theme="dark"] {
  --svga-ground: #33302D;
  --svga-ink: #D8CFC1;
  --svga-signal: #EC7356;
  --svga-ochre: #EBA45F;
  --svga-blueprint: #86A4E4;
  --svga-teal: #4DB4CC;
  --svga-moss: #7CB57D;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  [data-theme="auto"] {
    --svga-ground: #33302D;
    --svga-ink: #D8CFC1;
    --svga-signal: #EC7356;
    --svga-ochre: #EBA45F;
    --svga-blueprint: #86A4E4;
    --svga-teal: #4DB4CC;
    --svga-moss: #7CB57D;
  }
}

.svga {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--svga-ink);
  stroke-width: var(--svga-stroke, 1.4px);
}

/* Accent: the artwork's root class picks the colour, svga-a marks accent strokes. */
.svga--signal { --svga-accent: var(--svga-signal); }
.svga--ochre { --svga-accent: var(--svga-ochre); }
.svga--blueprint { --svga-accent: var(--svga-blueprint); }
.svga--teal { --svga-accent: var(--svga-teal); }
.svga--moss { --svga-accent: var(--svga-moss); }

.svga .svga-a {
  color: var(--svga-accent, var(--svga-ink));
}

/* Drawing. svg-animator.js sets pathLength, per-stroke delays and direction (svga-r),
   then adds svga-live. Without the script the drawing is shown complete and static. */
.svga-live path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.01;
  animation: svga-draw var(--svga-draw, 700ms) cubic-bezier(.2, .7, .2, 1) forwards;
}

.svga-live path.svga-r {
  stroke-dashoffset: -1.01;  /* draw from the path's end instead of its start */
}

@keyframes svga-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Host element filled by svg-animator.js (attribute data-svga="/art/").
   While loading and after success, the host's fallback content is hidden;
   if loading fails the script removes the class and the fallback stays visible. */
.svga-host {
  position: relative;
}

.svga-host > .svga {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.svga-loading > :not(.svga):not(.svga-controls),
.svga-ready > :not(.svga):not(.svga-controls) {
  visibility: hidden;
}

/* Visitor controls added by the script: Redraw and Next drawing. */
.svga-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}

.svga-btn {
  padding: 4px 12px;
  border: 1px solid var(--svga-ink);
  border-radius: 999px;
  background: var(--svga-ground);
  color: var(--svga-ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  opacity: .7;
  transition: opacity 120ms;
}

.svga-btn:hover,
.svga-btn:focus-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .svga-live path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- Hero drawing: site overrides for the svg-animator package ----------
   Must stay AFTER the package block above, so a package update can replace that block
   wholesale without losing these. */

/* No frame: when JavaScript runs, the drawing sits directly on the page ground.
   (Without JavaScript the apex fallback keeps its paper-0 field.) */
.js .svga-host {
  background: transparent;
}

/* No flash of the fallback "A": /theme.js adds .js to <html> before first paint, and
   svg-animator.js is deferred. Until the drawing is ready the fallback stays hidden; if
   nothing has loaded after 2.5s (script blocked or art failed), it fades back in. */
.js .svga-host > [class^="apex-"] {
  animation: svga-fallback 200ms ease-out 2.5s both;
}

.js .svga-ready > [class^="apex-"] {
  animation: none;
  visibility: hidden;
}

@keyframes svga-fallback {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}

/* Controls: small, quiet square icon buttons in the bottom-right corner. The runtime's
   button text ("Redraw", "Next drawing") stays in the DOM as the accessible name and is
   hidden visually with font-size 0; the icon is generated content with empty alt text.
   The runtime always creates Redraw first and Next drawing second. */
.svga-controls {
  right: 0;
  bottom: 0;
  gap: 2px;
}

.svga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 0;
  line-height: 1;
  opacity: 1;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.svga-btn::before {
  font-family: var(--font-mono);
  font-size: 15px;
}

.svga-btn:first-child::before {
  content: "\21BB";
  content: "\21BB" / "";
}

.svga-btn:nth-child(2)::before {
  font-size: 19px;  /* the arrow falls back to a system font that sets it smaller */
  content: "\2192";
  content: "\2192" / "";
}

.svga-btn:focus-visible {
  border-color: var(--ink-1);
  color: var(--ink-1);
}

/* Hover border only with a real pointer: touch screens keep :hover after a tap, which
   left a box around the tapped icon on iPhone. */
@media (hover: hover) {
  .svga-btn:hover {
    border-color: var(--ink-1);
    color: var(--ink-1);
  }
}

.svga-btn:active {
  transform: translateY(1px);
}

/* Fix for the package's reduced-motion rule: ".svga-live path" is less specific than
   ".svga-live path.svga-r", so strokes drawn from their far end stayed hidden.
   Report upstream (SVG-animator repo) and drop this once the package includes it. */
@media (prefers-reduced-motion: reduce) {
  .svga-live path,
  .svga-live path.svga-r {
    animation: none;
    stroke-dashoffset: 0;
  }
}