/* almuhajir.org design tokens, shared by the public pages (site.css) and the web app (web/).
   Navy #101D24, Warm Paper #F4F0E6, Gold #B69769 (CLAUDE.md "Official palette": locked). Light/dark follow the system.
   Fonts are self-hosted (/assets/fonts) and the CSP allows nothing else. Change a token here, never in a page or the app. */

@font-face {
  font-family: "Bodoni Moda";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-500.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
/* Weight 500 is Google Fonts' own Latin subset of the OFL font (variable optical size), the file the design loads (2026-10-29: replaces our
   static Medium subset, so large headings get the design's optical-size cuts). Weight 600 follows. */
/* Weight 600 is used by the web app's header wordmark only (the design's). Google Fonts' own Latin subset of the OFL font (variable optical size,
   weight 600), the file the design loads, saved here so nothing is fetched from another host. */
@font-face {
  font-family: "Bodoni Moda";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/bodoni-moda-600.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-201D, U+2022, U+2026;
}
@font-face {
  font-family: "Figtree";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/figtree-var.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-017F, U+2013-2014, U+2018-201D, U+2022, U+2026, U+2190-2197, U+2212;
}
/* Latin-extended (Google Fonts' own subset): macron letters (ā ī ū) and other Latin-extended letters in transliterated names.
   It does NOT have the Hausa hooked letters ɓ ɗ ƙ ƴ, ʼ or ₦ (checked in the font's cmap 2026-10-29): neither does the design's Figtree, so those
   come from the Noto Sans Hausa subset below. This face is only downloaded when a page shows one of its characters. The weight range MUST equal the Latin face's (400 700): browsers pick one
   weight-matched face per family and only then split it by unicode-range, so a different range would hide the Latin face (found 2026-10-29). */
@font-face {
  font-family: "Figtree";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hausa hooked letters ɓ Ɓ ɗ Ɗ ƙ Ƙ ƴ Ƴ, the modifier apostrophe ʼ and ₦: Figtree has none of them (the design's neither), so they come from this 5 KB subset of Noto Sans
   (SIL OFL 1.1, text beside it; made by Google Fonts' `text=` subsetting, variable weight 400-700). Only downloaded when a page shows one of them;
   it sits after Figtree in --sans. */
@font-face {
  font-family: "Noto Sans Hausa";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-hausa.woff2") format("woff2");
  unicode-range: U+0181, U+018A, U+0198-0199, U+01B3-01B4, U+0253, U+0257, U+02BC, U+20A6;
}

:root {
  /* Light. Text pairs checked >= 4.5:1: ink 15.1, secondary 5.7, muted 5.0, gold text 5.2 on the paper. */
  --bg: #F4F0E6;
  --surface: #FAF7EF;
  --elev: #FFFDF7;
  --ink: #101D24;
  --muted: #566067;
  --faint: #6B675C;
  --line: #DDD6C8;
  --gold: #7A5F3B;          /* gold as TEXT and focus ring */
  --error: #B65353;         /* semantic error (CLAUDE.md palette) */
  --gold-fill: #B69769;     /* gold as a fill or an accent, never as small text */
  --on-gold: #101D24;
  --button: #101D24;
  --on-button: #F4F0E6;
  --nav-bg: rgba(250, 247, 239, .86);
  --hover: rgba(16, 29, 36, .06);
  --panel: #101D24;
  --panel-lift: #17272F;
  /* Web chrome (header, menu pill, player), exactly the design's values */
  --navbg: rgba(250, 247, 239, .82);
  --scrim: rgba(16, 29, 36, .34);
  --chrome-hover: rgba(16, 29, 36, .05);
  --ok-text: #2F6349;
  --err-text: #93393C;
  --serif: "Bodoni Moda", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Figtree", "Noto Sans Hausa", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 22px;
  --radius-lg: 28px;
  --wrap: 1200px;
  --gutter: 20px;
  color-scheme: light;
}
/* Dark follows the system unless the visitor chose Light in the header (data-theme on <html>, set by the web app only). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101D24;
    --surface: #17272F;
    --elev: #20323A;
    --ink: #F4F0E6;
    --muted: #C7C2B7;
    --faint: #8F9997;
    --line: #304149;
    --gold: #D2B483;
    --button: #20323A;
    --on-button: #F4F0E6;
    --nav-bg: rgba(23, 39, 47, .86);
    --hover: rgba(244, 240, 230, .07);
    --panel: #17272F;
    --panel-lift: #20323A;
    --navbg: rgba(23, 39, 47, .82);
    --scrim: rgba(6, 12, 18, .56);
    --chrome-hover: rgba(244, 240, 230, .06);
    --ok-text: #6FB394;
    --err-text: #E08A8A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101D24;
  --surface: #17272F;
  --elev: #20323A;
  --ink: #F4F0E6;
  --muted: #C7C2B7;
  --faint: #8F9997;
  --line: #304149;
  --gold: #D2B483;
  --button: #20323A;
  --on-button: #F4F0E6;
  --nav-bg: rgba(23, 39, 47, .86);
  --hover: rgba(244, 240, 230, .07);
  --panel: #17272F;
  --panel-lift: #20323A;
  --navbg: rgba(23, 39, 47, .82);
  --scrim: rgba(6, 12, 18, .56);
  --chrome-hover: rgba(244, 240, 230, .06);
  --ok-text: #6FB394;
  --err-text: #E08A8A;
  color-scheme: dark;
}
@media (min-width: 47.5em) { :root { --gutter: 24px; } }

/* ---- ONE type scale (rem, 1rem = 16px, so it follows the browser's text size) ----
   Derived from the "Almuhajir Web" design, whose type clusters at 11-12.5 (labels), 13-14.5 (secondary text), 15 (body),
   20-22 (titles), 34 (section headings) and a large display size. Every font size on the site and the web app is one of these;
   never write a raw size. Headings are fluid between two steps with clamp(). */
:root {
  --fs-xs: 0.75rem;      /* 12  labels, eyebrows, badges, meta, small print */
  --fs-sm: 0.875rem;     /* 14  captions, secondary text, navigation, footer links */
  --fs-base: 1rem;       /* 16  body text, buttons, form text */
  --fs-md: 1.125rem;     /* 18  lede, sans card titles */
  --fs-lg: 1.375rem;     /* 22  serif titles (cards, lists, wordmark) */
  --fs-xl: 1.75rem;      /* 28  h2 on phones */
  --fs-2xl: 2.125rem;    /* 34  h2 on desktop, h1 on phones */
  --fs-3xl: 3rem;        /* 48  h1 on desktop */
  --fs-display: clamp(2.375rem, 6.4vw, 4.125rem);  /* 38 to 66  hero headline only */
  /* Web chrome (header, menu, player): the design's own sizes, as tokens */
  --fsc-10-5: 0.65625rem; /* 10.5 uppercase group labels */
  --fsc-11: 0.6875rem;    /* 11  player headline */
  --fsc-11-5: 0.71875rem; /* 11.5 expanded player sub-label */
  --fsc-12-5: 0.78125rem; /* 12.5 small buttons */
  --fsc-13: 0.8125rem;    /* 13  menu and header buttons */
  --fsc-13-5: 0.84375rem; /* 13.5 menu items, player title */
  --fsc-14-5: 0.90625rem; /* 14.5 Audio feed row title */
  --fsc-15: 0.9375rem;    /* 15  footer brand */
  --fsc-20: 1.25rem;      /* 20  expanded player title */
  --fsc-21: 1.3125rem;    /* 21  header wordmark */
  --lh-tight: 1.1;       /* display and h1 */
  --lh-snug: 1.25;       /* h2, titles */
  --lh-body: 1.65;       /* running text */
}

/* almuhajir.org public pages: layout and components. Colours, fonts, radii and the ONE type scale live in tokens.css
   (loaded first); never write a raw font size here, use a --fs-* token. No inline styles anywhere (strict CSP). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base)/var(--lh-body) var(--sans);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
a { color: var(--gold); text-underline-offset: 0.1875rem; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold-fill); color: var(--on-gold); }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 30;
  background: var(--button); color: var(--on-button);
  padding: 0.75rem 1.125rem; border-radius: 12px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

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

/* ---- Header ---- */
.site-header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
@media (min-width: 40em) { .site-header { position: sticky; top: 0; z-index: 20; } }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 0.75rem; padding-block: 0.5rem; }
.home-link {
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 3rem; color: var(--ink); text-decoration: none;
}
.home-link:hover { color: var(--ink); }
.home-link img { width: 1.625rem; height: auto; }
.home-link span { font: 500 var(--fs-lg)/1 var(--serif); letter-spacing: -.005em; }
.main-nav { display: flex; flex-wrap: wrap; gap: 0 0.5rem; margin-inline: -0.5625rem 0.1875rem; }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.5625rem;
  border-radius: 999px; color: var(--muted); font: 600 var(--fs-sm)/1 var(--sans); text-decoration: none;
}
.main-nav a:hover { background: var(--hover); color: var(--ink); }
.main-nav a[aria-current="page"] { color: var(--ink); }
/* Phones: one row, logo + the two most useful links; the rest is in the page and the footer. */
@media (max-width: 37.4375em) {
  .site-header .wrap { column-gap: 0.25rem; }
  .main-nav { justify-content: flex-end; margin-inline: 0 -0.3125rem; }
  .main-nav a { padding: 0 0.3125rem; }
  .main-nav .nav-extra { display: none; }
}
@media (max-width: 22.4375em) {
  .home-link { gap: 0.5rem; }
  .home-link span { font-size: var(--fs-md); }
  .main-nav a { padding: 0 0.1875rem; }
}

/* ---- Type ---- */
.eyebrow {
  margin: 0 0 0.5rem; font: 600 var(--fs-xs)/1.4 var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
h1 { font: 500 clamp(var(--fs-2xl), 5.4vw, var(--fs-3xl))/var(--lh-tight) var(--serif); letter-spacing: -.01em; margin: 0 0 0.875rem; }
h2 { font: 500 clamp(var(--fs-xl), 3.4vw, var(--fs-2xl))/var(--lh-snug) var(--serif); letter-spacing: -.005em; margin: 2.75rem 0 0.75rem; }
h3 { font: 600 var(--fs-base)/1.4 var(--sans); margin: 1.625rem 0 0.375rem; }
p, ul, ol { margin: 0 0 0.875rem; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: 0.375rem; }
li::marker { color: var(--gold); }
strong { font-weight: 600; }
.lede { font-size: var(--fs-md); color: var(--muted); max-width: 62ch; }
.meta { font-size: var(--fs-sm); color: var(--muted); }

/* ---- Reading pages ---- */
main { flex: 1; width: 100%; }
.page { padding: 2.5rem 0 4.5rem; }
.prose { max-width: 70ch; }
.prose > :first-child { margin-top: 0; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.125rem 1.375rem; margin: 1.25rem 0;
}
.card > :last-child { margin-bottom: 0; }
.card.accent { border-left: 4px solid var(--gold-fill); }
.toc { font-size: var(--fs-sm); }
.toc ol { margin: 0.375rem 0 0; padding-left: 1.4em; }
.toc li { margin: 0; break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (min-width: 45em) { .toc ol { columns: 2; column-gap: 2rem; } }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li { counter-increment: step; position: relative; padding-left: 2.875rem; margin-bottom: 1rem; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-fill); color: var(--on-gold); font: 600 var(--fs-sm)/1 var(--sans);
}
.copy { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.copy code {
  font: 600 var(--fs-base)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.25rem 0.625rem;
  user-select: all; overflow-wrap: anywhere;
}
.spaced { margin-top: 2.25rem; }

/* ---- Buttons and store badges ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.625rem; margin: 0.5rem 0;
  background: var(--button); color: var(--on-button);
  border-radius: 999px; font: 600 var(--fs-base)/1.2 var(--sans); text-decoration: none; text-align: center; overflow-wrap: anywhere;
  transition: background-color .15s ease, transform .15s ease;
}
.button:hover { background: var(--button); color: var(--on-button); filter: brightness(1.12); }
.button:active { transform: scale(.98); }
.button.outline { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.button.outline:hover { background: var(--hover); filter: none; color: var(--ink); }

.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0.25rem 0 0; }
/* A store badge. At launch swap each <div class="store is-soon"> for <a class="store" href="...">
   and drop the "Coming soon" line: .store alone is the enabled look. */
.store {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0 0.875rem;
  border-radius: 14px; background: var(--button); color: var(--on-button); text-decoration: none;
}
.store svg { flex: none; }
.store small { display: block; font: 400 var(--fs-xs)/1.1 var(--sans); opacity: .85; }
.store b { display: block; font: 600 var(--fs-base)/1.2 var(--sans); }
.store.is-soon { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.store.is-soon small { opacity: 1; color: var(--gold); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Home: hero ---- */
.hero { padding: 2.25rem 0 3.5rem; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; align-items: center; }
@media (min-width: 56.25em) {
  .hero { padding: 4rem 0 5rem; }
  .hero .wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; }
}
.hero-copy { display: flex; flex-direction: column; gap: 1.375rem; align-items: flex-start; }
.hero h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -.012em; margin: 0; hyphens: auto; overflow-wrap: anywhere; }
.hero .lede { margin: 0; font-size: var(--fs-md); max-width: 34em; }
.hero-panel {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 70% 0%, var(--panel-lift) 0%, var(--panel) 62%);
  border: 1px solid var(--line);
  display: grid; place-items: center; padding: 32px 24px;
  /* The logo's own ratio is reserved up front, so nothing moves when it arrives. */
}
.hero-panel img { display: block; width: min(300px, 72%); height: auto; aspect-ratio: 538 / 702; }
.hero-panel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--gold-fill); opacity: .9;
}
/* Phones and tablets: a short panel (about 240 px) so Featured scholars starts within a screen and a half. */
@media (max-width: 56.1875em) {
  .hero-panel { height: 240px; padding: 22px 24px; }
  .hero-panel img { width: auto; height: 196px; }
}
@media (min-width: 56.25em) { .hero-panel { min-height: 560px; padding: 40px 24px; } }

/* ---- Home: sections ---- */
.section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.375rem 1rem; }
.section-head h2, .section h2 { margin: 0; }
.section-note { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* Featured scholars: the layout follows how many Schools are live (1 to 8). */
.scholars { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.scholar {
  margin: 0; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem;
  min-width: 0;
}
.scholar h3 { margin: 0; font: 600 var(--fs-base)/1.3 var(--sans); }
.scholar p { margin: 0.1875rem 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.scholar .latest span {
  font: 600 var(--fs-xs)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-right: 0.25rem;
}
.portrait {
  flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: var(--elev); border: 1px solid var(--line);
}
.portrait.initials {
  display: grid; place-items: center; font: 500 var(--fs-xl)/1 var(--serif); color: var(--gold);
}
.scholars.many { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.625rem), 1fr)); }
.scholars.n3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.25rem), 1fr)); }
.scholars.n2, .scholars.n1 { grid-template-columns: minmax(0, 1fr); }
.scholars.n2 .scholar, .scholars.n1 .scholar { flex-direction: row; align-items: center; gap: 1.25rem; padding: 1.375rem; }
.scholars.n2 .portrait, .scholars.n1 .portrait { width: 96px; height: 96px; }
.scholars.n1 .scholar h3, .scholars.n2 .scholar h3 { font: 500 var(--fs-lg)/var(--lh-snug) var(--serif); }
@media (min-width: 45em) {
  .scholars.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scholars.n1 { grid-template-columns: minmax(0, 35rem); }
}
@media (max-width: 23.75em) {
  .scholars.n2 .scholar, .scholars.n1 .scholar { flex-direction: column; align-items: flex-start; }
}

/* What is in Almuhajir */
.inside { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.875rem; grid-template-columns: minmax(0, 1fr); }
.inside li { margin: 0; padding: 1.375rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.inside .icon {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--elev); border: 1px solid var(--line); color: var(--gold); margin-bottom: 0.875rem;
}
.inside h3 { margin: 0 0 0.375rem; font: 500 var(--fs-lg)/var(--lh-snug) var(--serif); }
.inside p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.55; }
@media (min-width: 35em) {
  .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inside li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 62.5em) {
  .inside { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .inside li:last-child:nth-child(odd) { grid-column: auto; }
}

/* For scholars */
.for-scholars {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; padding: 1.875rem; margin-top: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
@media (min-width: 53.75em) { .for-scholars { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; padding: 2.75rem; } }
.for-scholars h2 { margin: 0 0 0.75rem; font-size: clamp(var(--fs-xl), 3.4vw, var(--fs-2xl)); line-height: 1.15; }
.for-scholars p { color: var(--muted); max-width: 52ch; }
.for-scholars ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; }
.for-scholars li { margin: 0; padding-left: 1.75rem; position: relative; color: var(--ink); }
.for-scholars li::before {
  content: ""; position: absolute; left: 0.25rem; top: .6em; width: 0.5625rem; height: 0.5625rem;
  border-radius: 50%; background: var(--gold-fill);
}

/* The Hausa line */
.hausa { text-align: center; padding: 4rem 0 4.5rem; }
.hausa p:first-child { font: 500 clamp(var(--fs-xl), 3.6vw, var(--fs-2xl))/var(--lh-snug) var(--serif); margin: 0 auto 0.625rem; max-width: 24em; text-wrap: balance; }
.hausa p:last-child { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* ---- /get, 404 ---- */
.centered { text-align: center; padding: 3.5rem 0 5rem; }
.centered .mark-sm { width: 64px; height: auto; margin: 0 auto 1.125rem; display: block; }
.centered .lede { margin-inline: auto; }
.centered .stores { justify-content: center; margin-top: 1.125rem; }
.centered .card { text-align: left; max-width: 62ch; margin: 2.25rem auto 0; }

/* ---- Footer ---- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; font-size: var(--fs-sm); color: var(--muted); }
.site-footer .wrap { display: grid; gap: 1.125rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ink); text-decoration: none; min-height: 2.75rem; }
.footer-brand img { width: 1.5rem; height: auto; }
.footer-brand span { font: 500 var(--fs-md)/1 var(--serif); }
.site-footer nav { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 0.5rem 1.25rem; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); text-decoration: none; font-weight: 500; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .footer-note { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.prose address { font-style: normal; }
.contact-list { list-style: none; padding: 0; }
.contact-list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: .4em; min-height: 2.75rem; }
.contact-list a { display: inline-flex; align-items: center; min-height: 2.75rem; overflow-wrap: anywhere; }

/* ---- Email handoff pages (/open, /auth/*): a calm centred card, scripts untouched ---- */
.handoff { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 2.5rem var(--gutter) 4rem; }
.handoff-card {
  width: 100%; max-width: 30rem; text-align: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2.25rem 28px;
}
.handoff .mark { width: 48px; height: auto; margin: 0 auto 1rem; display: block; }
.handoff h1 { font-size: clamp(var(--fs-xl), 7vw, var(--fs-2xl)); margin-bottom: 0.75rem; }
.handoff .note { font-size: var(--fs-sm); color: var(--muted); margin: 1.5rem 0 0; }
.handoff-card > :last-child { margin-bottom: 0; }

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