/* mythosprod.xyz — MYTHOS public site.
   Composes exclusively from the canonical tokens (tokens.css) and the
   self-hosted approved faces (fonts.css). No literal colour values, no
   external origins, no framework. One 35° gesture per view (A-012): the
   hero's diagonal hairline — nowhere else on a public page.

   Gold is scarce (COLOR_SYSTEM §3.2): the single primary action of a view,
   the focus ring, the active navigation underline and the gesture. Links
   are never gold (LINK-1): underlined in text-primary. */

/* ---- Reset & base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--mythos-ground);
  color: var(--mythos-text-primary);
  font-family: var(--mythos-font-text);
  font-size: 16px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: var(--mythos-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mythos-focus-ring); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.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;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mythos-accent); color: var(--mythos-text-on-accent);
  padding: 12px 20px; font-weight: var(--mythos-weight-semibold);
  border-radius: 0 0 var(--mythos-radius-card) 0;
}
.skip-link:focus { left: 0; }

/* ---- Type scale (TYPOGRAPHY §2; fluid between stops, 320 → 1240) ------- */
.display-xl, .display-l, h1, h2 {
  font-family: var(--mythos-font-display); font-weight: var(--mythos-weight-semibold);
  text-wrap: balance;
}
.display-xl { font-size: clamp(39px, 2.7rem + 2.4vw, 61px); line-height: 1.02; letter-spacing: -0.022em; }
.display-l, h1 { font-size: clamp(31px, 2rem + 1.9vw, 49px); line-height: 1.06; letter-spacing: -0.020em; }
h2 { font-size: clamp(25px, 1.56rem + 0.65vw, 31px); line-height: 1.18; letter-spacing: -0.015em; }
/* 320 px reflow (WCAG 1.4.10): the expanded display face needs one step
   below the approved floor on the narrowest phones, or a single word
   overflows the 280 px line. Body never changes. */
@media (max-width: 359px) { .display-xl { font-size: 34px; } .display-l, h1 { font-size: 29px; } }
h3 { font-family: var(--mythos-font-text); font-weight: var(--mythos-weight-semibold); font-size: clamp(20px, 1.25rem + 0.5vw, 25px); line-height: 1.24; letter-spacing: -0.012em; text-wrap: balance; }
h4 { font-weight: var(--mythos-weight-semibold); font-size: 20px; line-height: 1.32; letter-spacing: -0.008em; }
.body-l { font-size: 18px; line-height: 1.62; }
.body-s { font-size: 14px; line-height: 1.56; }
.caption { font-size: 13px; line-height: 1.46; letter-spacing: 0.005em; }
.label {
  font-size: 12px; line-height: 1.34; letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: var(--mythos-weight-medium);
}
.data, .mono { font-family: var(--mythos-font-mono); font-size: 14px; line-height: 1.44; font-variant-numeric: tabular-nums; }
.muted { color: var(--mythos-text-secondary); }
.prose { max-width: var(--mythos-container-prose); }
.prose p + p { margin-top: var(--mythos-space-5); }

/* ---- Layout ------------------------------------------------------------ */
.container {
  width: 100%; max-width: var(--mythos-container-wide); margin: 0 auto;
  padding-inline: var(--mythos-grid-margin-sm);
}
@media (min-width: 600px)  { .container { padding-inline: var(--mythos-grid-margin-md); } }
@media (min-width: 1240px) { .container { padding-inline: var(--mythos-grid-margin-lg); } }

.section { padding-block: var(--mythos-space-9); border-top: 1px solid var(--mythos-border-hairline); }
@media (min-width: 900px) { .section { padding-block: var(--mythos-space-10); } }
.section-head { margin-bottom: var(--mythos-space-7); max-width: 720px; }
.section-head .kicker { margin-bottom: var(--mythos-space-4); color: var(--mythos-text-secondary); }
.section-head h2 + p, .section-head h1 + p { margin-top: var(--mythos-space-5); color: var(--mythos-text-secondary); max-width: var(--mythos-container-prose); }
.section-head.wide { max-width: none; }
.section-foot { margin-top: var(--mythos-space-7); }

.grid { display: grid; gap: var(--mythos-space-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.split { display: grid; gap: var(--mythos-space-8); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mythos-space-10); } }
.split.even { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split.even { grid-template-columns: 1fr 1fr; } }

/* ---- Buttons (COMPONENT_SYSTEM §3.1) ----------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mythos-space-3); min-height: var(--mythos-size-control-comfortable);
  padding: 9px 15px; border-radius: var(--mythos-radius-control);
  font-size: 14px; line-height: 1.56; font-weight: var(--mythos-weight-medium);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--mythos-motion-micro) var(--mythos-ease-move),
              border-color var(--mythos-motion-micro) var(--mythos-ease-move),
              color var(--mythos-motion-micro) var(--mythos-ease-move);
}
/* A-022: the hit box extends 2px per side beyond the 40px visual box */
.btn::after { content: ""; position: absolute; inset: -2px; }
.btn-primary { background: var(--mythos-accent); color: var(--mythos-text-on-accent); }
.btn-primary:hover { background: var(--mythos-accent-hover); }
.btn-primary:active { background: var(--mythos-accent-active); }
.btn-secondary { background: transparent; color: var(--mythos-text-primary); border: 1px solid var(--mythos-border-control); }
.btn-secondary:hover { background: var(--mythos-surface); border-color: var(--mythos-border-strong); }
.btn-secondary:active { background: var(--mythos-surface-card); }
.btn-ghost { background: transparent; color: var(--mythos-text-primary); padding-inline: 8px; }
.btn-ghost:hover { background: var(--mythos-surface); }
.btn[aria-disabled="true"], .btn:disabled { color: var(--mythos-text-disabled); border-color: var(--mythos-border-hairline); background: transparent; cursor: not-allowed; }
.btn .arrow { font-family: var(--mythos-font-mono); }
.actions { display: flex; flex-wrap: wrap; gap: var(--mythos-space-4); }
@media (max-width: 599px) { .actions .btn { flex: 1 1 100%; } }

/* ---- Chips / status (COMPONENT_SYSTEM §6.1) ---------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--mythos-space-2);
  height: 24px; padding-inline: var(--mythos-space-3);
  border-radius: var(--mythos-radius-control);
  font-size: 12px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: var(--mythos-weight-medium);
  background: var(--mythos-surface-card); color: var(--mythos-text-secondary);
  border: 1px solid var(--mythos-border-hairline); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--mythos-radius-pill); background: currentColor; flex: none; }
.chip.live     { color: var(--mythos-success); background: var(--mythos-success-dim); border-color: transparent; }
.chip.building { color: var(--mythos-info);    background: var(--mythos-info-dim);    border-color: transparent; }
.chip.internal { color: var(--mythos-text-secondary); background: var(--mythos-surface-card); }
:root[data-theme="light"] .chip.live, :root[data-theme="light"] .chip.building { color: var(--mythos-text-primary); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .chip.live, :root:not([data-theme="dark"]) .chip.building { color: var(--mythos-text-primary); }
}

/* ---- Cards (COMPONENT_SYSTEM §5.1) ------------------------------------- */
.card {
  background: var(--mythos-surface); border: 1px solid var(--mythos-border-hairline);
  border-radius: var(--mythos-radius-card); padding: var(--mythos-space-6);
  display: flex; flex-direction: column; gap: var(--mythos-space-4);
  transition: border-color var(--mythos-motion-micro) var(--mythos-ease-move);
}
.card:hover { border-color: var(--mythos-border-strong); }
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--mythos-space-3) var(--mythos-space-4); }
.card-head > div:first-child { flex: 1 1 12rem; min-width: 0; }
.card-title { font-size: 18px; font-weight: var(--mythos-weight-semibold); line-height: 1.25; }
.card-meta { font-family: var(--mythos-font-mono); font-size: 12px; color: var(--mythos-text-secondary); margin-top: 4px; }
.card-body { color: var(--mythos-text-secondary); font-size: 15px; flex: 1 1 auto; max-width: var(--mythos-container-prose); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--mythos-space-4); flex-wrap: wrap; }
.card-foot a { min-height: 44px; display: inline-flex; align-items: center; font-weight: var(--mythos-weight-medium); }

/* ---- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--mythos-ground);
  border-bottom: 1px solid var(--mythos-border-hairline);
}
.site-bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: var(--mythos-space-5);
}
@media (min-width: 900px) { .site-bar { min-height: 72px; } }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--mythos-text-primary); text-decoration: none; }
.wordmark svg { height: 18px; width: auto; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--mythos-space-3); }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--mythos-space-4); text-decoration: none;
  color: var(--mythos-text-secondary); font-size: 15px; font-weight: var(--mythos-weight-medium);
}
.site-nav a:hover { color: var(--mythos-text-primary); }
.site-nav a[aria-current="page"] { color: var(--mythos-text-primary); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--mythos-space-4); right: var(--mythos-space-4); bottom: 6px;
  height: 2px; background: var(--mythos-accent);
}
.header-tools { display: flex; align-items: center; gap: var(--mythos-space-3); }
.icon-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center;
  border-radius: var(--mythos-radius-control); color: var(--mythos-text-secondary);
}
.icon-btn:hover { color: var(--mythos-text-primary); background: var(--mythos-surface); }
.icon-btn svg { width: 20px; height: 20px; }
.nav-toggle .close { display: none; }
.nav-toggle[aria-expanded="true"] .open { display: none; }
.nav-toggle[aria-expanded="true"] .close { display: block; }
@media (min-width: 900px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
}

/* Mobile overlay — preserves the ecosystem tiers (COMPONENT_SYSTEM §4.1) */
.nav-overlay {
  position: fixed; inset: 64px 0 0 0; z-index: 40;
  background: var(--mythos-ground); overflow-y: auto;
  padding: var(--mythos-space-6) var(--mythos-grid-margin-sm) var(--mythos-space-9);
  opacity: 0; visibility: hidden;
  transition: opacity var(--mythos-motion-overlay) var(--mythos-ease-enter), visibility 0s linear var(--mythos-motion-overlay);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 600px) { .nav-overlay { padding-inline: var(--mythos-grid-margin-md); } }
@media (min-width: 900px) { .nav-overlay { display: none; } }
.nav-overlay .tier { padding-block: var(--mythos-space-5); border-top: 1px solid var(--mythos-border-hairline); }
.nav-overlay .tier:first-child { border-top: 0; padding-top: 0; }
.nav-overlay .tier-label { color: var(--mythos-text-secondary); margin-bottom: var(--mythos-space-3); }
.nav-overlay a {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px;
  text-decoration: none; font-size: 20px; font-weight: var(--mythos-weight-medium);
}
.nav-overlay a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--mythos-accent); padding-left: var(--mythos-space-4); }
.nav-overlay a .ext { font-family: var(--mythos-font-mono); font-size: 12px; color: var(--mythos-text-secondary); }
body.nav-open { overflow: hidden; }

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--mythos-space-10) var(--mythos-space-9); }
@media (min-width: 900px) { .hero { padding-block: var(--mythos-space-11) var(--mythos-space-10); } }
/* The one 35° gesture of the page: a single diagonal hairline. */
.hero .gesture {
  position: absolute; top: 0; bottom: 0; right: 0; width: 42%; pointer-events: none;
  background: linear-gradient(125deg, transparent 0 60%, var(--mythos-accent) 60% calc(60% + 1px), transparent calc(60% + 1px));
  opacity: 0.55;
}
/* Small screens: the text spans the full width, so the gesture becomes a
   short diagonal in the top-right corner instead of crossing the headline. */
@media (max-width: 899px) { .hero .gesture { width: 40%; height: 56px; bottom: auto; background: linear-gradient(125deg, transparent 0 50%, var(--mythos-accent) 50% calc(50% + 1px), transparent calc(50% + 1px)); } }
.hero .container { position: relative; }
.hero .eyebrow { color: var(--mythos-text-secondary); margin-bottom: var(--mythos-space-5); }
.hero .display-xl { max-width: 17ch; }
.hero .founding { margin-top: var(--mythos-space-6); font-family: var(--mythos-font-mono); font-size: 14px; color: var(--mythos-text-secondary); display: flex; flex-wrap: wrap; gap: var(--mythos-space-3) var(--mythos-space-5); }
.hero .lede { margin-top: var(--mythos-space-6); font-size: 18px; color: var(--mythos-text-secondary); max-width: var(--mythos-container-prose); }
.hero .actions { margin-top: var(--mythos-space-7); }
.page-hero { padding-block: var(--mythos-space-9) var(--mythos-space-8); }
@media (min-width: 900px) { .page-hero { padding-block: var(--mythos-space-10) var(--mythos-space-9); } }

/* ---- Identity strip ---------------------------------------------------- */
.strip { border-top: 1px solid var(--mythos-border-hairline); border-bottom: 1px solid var(--mythos-border-hairline); }
.strip ul { display: flex; flex-wrap: wrap; }
.strip li {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding-inline: var(--mythos-space-5);
  color: var(--mythos-text-secondary); border-right: 1px solid var(--mythos-border-hairline);
}
.strip li:last-child { border-right: 0; }
@media (max-width: 599px) {
  .strip ul { display: grid; grid-template-columns: repeat(2, 1fr); }
  .strip li { min-height: 48px; border-bottom: 1px solid var(--mythos-border-hairline); }
  .strip li:nth-child(2n) { border-right: 0; }
  .strip li:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ---- Journey (timeline) ------------------------------------------------ */
.journey { display: grid; gap: var(--mythos-space-6); position: relative; }
@media (min-width: 900px) { .journey { grid-template-columns: repeat(4, 1fr); gap: var(--mythos-space-6); } }
@media (min-width: 900px) { .journey.five { grid-template-columns: repeat(5, 1fr); gap: var(--mythos-space-5); } }
.journey li { position: relative; padding-top: var(--mythos-space-5); border-top: 1px solid var(--mythos-border-strong); }
.journey li::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
  background: var(--mythos-ground); border: 1px solid var(--mythos-border-strong);
}
.journey li.now::before { background: var(--mythos-text-primary); border-color: var(--mythos-text-primary); }
.journey .when { font-family: var(--mythos-font-mono); font-size: 13px; color: var(--mythos-text-secondary); }
.journey .what { margin-top: var(--mythos-space-3); font-size: 20px; font-weight: var(--mythos-weight-semibold); line-height: 1.3; }
.journey p { margin-top: var(--mythos-space-3); color: var(--mythos-text-secondary); font-size: 15px; max-width: 34ch; }

/* ---- Experience domains ------------------------------------------------ */
.domains { display: grid; gap: 0 var(--mythos-space-6); }
@media (min-width: 600px) { .domains { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .domains { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .domains { grid-template-columns: repeat(4, 1fr); } }
.domains li { padding: var(--mythos-space-5) 0; border-top: 1px solid var(--mythos-border-hairline); display: grid; grid-template-columns: 40px 1fr; gap: var(--mythos-space-3); align-items: start; }
.domains .n { font-family: var(--mythos-font-mono); font-size: 13px; color: var(--mythos-text-secondary); padding-top: 3px; }
.domains .name { font-weight: var(--mythos-weight-semibold); font-size: 16px; line-height: 1.4; }
.domains .note { color: var(--mythos-text-secondary); font-size: 14px; margin-top: 2px; }

/* ---- System diagram (Mythos OS) ---------------------------------------- */
.system {
  border: 1px solid var(--mythos-border-hairline); border-radius: var(--mythos-radius-card);
  background: var(--mythos-surface); overflow: hidden;
}
.system .row {
  display: grid; grid-template-columns: 1fr; gap: var(--mythos-space-2);
  padding: var(--mythos-space-5) var(--mythos-space-6);
  border-top: 1px solid var(--mythos-border-hairline);
}
@media (min-width: 600px) { .system .row { grid-template-columns: 160px 1fr; gap: var(--mythos-space-5); align-items: baseline; } }
.system .row:first-child { border-top: 0; }
.system .layer { font-family: var(--mythos-font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mythos-text-secondary); }
.system .what { font-size: 15px; }
.system .what strong { font-weight: var(--mythos-weight-semibold); }
.system .row.core { background: var(--mythos-surface-card); }
.built-on { margin-top: var(--mythos-space-5); }

/* ---- Philosophy sequence ----------------------------------------------- */
.sequence { display: grid; gap: var(--mythos-space-5); }
@media (min-width: 900px) { .sequence { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.sequence li { padding: var(--mythos-space-5) 0; border-top: 1px solid var(--mythos-border-hairline); }
@media (min-width: 900px) {
  .sequence li { padding: var(--mythos-space-6) var(--mythos-space-5) var(--mythos-space-6) 0; border-top: 1px solid var(--mythos-border-hairline); }
  .sequence li + li { padding-left: var(--mythos-space-5); border-left: 1px solid var(--mythos-border-hairline); }
}
.sequence .n { font-family: var(--mythos-font-mono); font-size: 13px; color: var(--mythos-text-secondary); }
.sequence .word { font-family: var(--mythos-font-display); font-weight: var(--mythos-weight-semibold); font-size: clamp(22px, 1.3rem + 0.8vw, 28px); line-height: 1.1; letter-spacing: -0.015em; margin-top: var(--mythos-space-3); }
.sequence p { color: var(--mythos-text-secondary); font-size: 14px; margin-top: var(--mythos-space-3); }

/* ---- Project directory (independent identities, A-004/A-006) ----------- */
.directory { display: grid; gap: 0; border-top: 1px solid var(--mythos-border-hairline); }
.directory li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--mythos-space-4);
  padding: var(--mythos-space-4) 0; border-bottom: 1px solid var(--mythos-border-hairline);
}
.directory .name { font-weight: var(--mythos-weight-semibold); }
.directory .domain { font-family: var(--mythos-font-mono); font-size: 13px; color: var(--mythos-text-secondary); }
.directory .caption { margin-top: var(--mythos-space-2); max-width: var(--mythos-container-prose); }
.directory a { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.directory .nolink { font-family: var(--mythos-font-mono); font-size: 12px; color: var(--mythos-text-secondary); }

/* ---- Definition list (facts) ------------------------------------------- */
.facts { display: grid; gap: 0; border-top: 1px solid var(--mythos-border-hairline); }
.facts div { display: grid; grid-template-columns: 1fr; gap: var(--mythos-space-2); padding: var(--mythos-space-4) 0; border-bottom: 1px solid var(--mythos-border-hairline); }
@media (min-width: 600px) { .facts div { grid-template-columns: 200px 1fr; gap: var(--mythos-space-5); } }
.facts dt { font-family: var(--mythos-font-mono); font-size: 13px; color: var(--mythos-text-secondary); padding-top: 2px; }
.facts dd { font-size: 15px; }

/* ---- Statement block --------------------------------------------------- */
.statement { padding: var(--mythos-space-7) 0; }
.statement .label { color: var(--mythos-text-secondary); margin-bottom: var(--mythos-space-4); }
.statement blockquote { font-family: var(--mythos-font-display); font-weight: var(--mythos-weight-semibold); font-size: clamp(22px, 1.3rem + 1vw, 31px); line-height: 1.2; letter-spacing: -0.015em; max-width: 26ch; text-wrap: balance; }
.statements { display: grid; gap: var(--mythos-space-6); }
@media (min-width: 900px) { .statements { grid-template-columns: repeat(3, 1fr); gap: var(--mythos-space-8); } }
.statements .statement { padding: var(--mythos-space-6) 0 0; border-top: 1px solid var(--mythos-border-strong); }
.statements blockquote { font-size: 20px; font-family: var(--mythos-font-text); font-weight: var(--mythos-weight-regular); letter-spacing: 0; line-height: 1.45; max-width: none; }

/* ---- Notice ------------------------------------------------------------ */
.notice {
  border: 1px solid var(--mythos-border-hairline); border-left: 3px solid var(--mythos-border-strong);
  border-radius: var(--mythos-radius-card); padding: var(--mythos-space-5) var(--mythos-space-6);
  color: var(--mythos-text-secondary); font-size: 14px; max-width: 640px;
}

/* ---- Contact ------------------------------------------------------------ */
.channels { display: grid; gap: var(--mythos-space-5); }
@media (min-width: 600px) { .channels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px) { .channels { grid-template-columns: repeat(3, 1fr); } }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--mythos-border-hairline); background: var(--mythos-ground-deep);
  padding-block: var(--mythos-space-8) var(--mythos-space-7); margin-top: var(--mythos-space-9);
  color: var(--mythos-text-secondary); font-size: 14px;
}
.footer-grid { display: grid; gap: var(--mythos-space-7); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--mythos-space-8); } }
.site-footer .wordmark svg { height: 14px; color: var(--mythos-text-secondary); }
.site-footer .tagline { margin-top: var(--mythos-space-4); max-width: 36ch; }
.site-footer h2 { font-family: var(--mythos-font-text); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: var(--mythos-weight-medium); color: var(--mythos-text-secondary); margin-bottom: var(--mythos-space-3); }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--mythos-text-primary); }
.site-footer li a:hover { text-decoration: underline; }
.footer-bar {
  margin-top: var(--mythos-space-7); padding-top: var(--mythos-space-5);
  border-top: 1px solid var(--mythos-border-hairline);
  display: flex; flex-wrap: wrap; gap: var(--mythos-space-4) var(--mythos-space-6); align-items: center; justify-content: space-between;
}
.footer-bar .legal { font-family: var(--mythos-font-mono); font-size: 12px; }
.theme-toggle { display: inline-flex; align-items: center; gap: var(--mythos-space-3); min-height: 44px; padding-inline: var(--mythos-space-3); border-radius: var(--mythos-radius-control); color: var(--mythos-text-secondary); }
.theme-toggle:hover { color: var(--mythos-text-primary); background: var(--mythos-surface); }
.theme-toggle svg { width: 18px; height: 18px; }

/* ---- Motion ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--mythos-motion-enter) var(--mythos-ease-enter), transform var(--mythos-motion-enter) var(--mythos-ease-enter); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1; transform: none; } .site-header, .site-footer .theme-toggle, .nav-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transform: none; }
  .card, .btn { transition: none; }
}