/* IVYLEAD Africa — shared design system (landing, intake, operations console).
   Mobile-first archival editorial: Warm Espresso canvas, warm cream ink, one accent — Archival Ochre (#C89D5C).
   Dark (Warm Espresso, the Libation slide standard) is the default; light mode (Archival Bone) follows the system. */

/* Spec tokens (iteration 2): --bg-canvas, --bg-surface, --text-primary, --text-muted, --accent-gold, --border-subtle.
   The older names below are aliases so every component follows the same six values. */
:root {
  --bg-canvas: #161615;      /* Warm Espresso Charcoal (iteration 6; never stark black) */
  --bg-surface: #1e1c1a;     /* layered surface */
  --bg-raised: #23201d;      /* = --card-bg */
  --card-bg: #23201d;
  --text-primary: #ede8e1;   /* Warm Cream Parchment (never #fff) */
  --text-secondary: #cfc7bc;
  --text-muted: #8e867b;     /* warm stone, 5.4:1 on the canvas */
  --accent-bronze: #8c6527;  /* Antique Bronze: borders, badges, active tab indicators */
  --accent-gold: #c89d5c;    /* Archival Ochre / African Gold */
  --accent-text: #c89d5c;    /* ochre used as text; deepened in light mode for contrast */
  --border-subtle: rgba(200, 157, 92, 0.2);
  --border-strong: #ede8e1;
  --alert: #e5866b;
  --btn-dark-bg: #161615;    /* "dark button": cream on espresso, AAA */
  --btn-dark-text: #ede8e1;
  --btn-gold-text: #161615;  /* text on ochre, AAA */
  --btn-bg: var(--accent-gold); --btn-text: var(--btn-gold-text);          /* primary button: ochre in dark mode */
  --btn-hover-bg: var(--btn-dark-text); --btn-hover-text: var(--btn-dark-bg);

  --paper: var(--bg-canvas); --paper-2: var(--bg-surface); --paper-3: var(--bg-raised);
  --ink: var(--text-primary); --ink-2: var(--text-secondary); --ink-3: var(--text-muted);
  --rule: var(--border-subtle); --rule-strong: var(--border-strong);
  --ochre: var(--accent-gold); --accent: var(--accent-text); --accent-ink: var(--bg-canvas); --ok: var(--accent-text);

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --radius: 2px;
  --tap: 48px;               /* minimum touch target */
  --bar-h: 72px;             /* bottom thumb bar */
  /* MARK-RATIOS (written by scripts/build-marks.mjs) */ --twin-ar: 520 / 280; --single-ar: 280 / 280;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-canvas: #f9f8f5; --bg-surface: #ffffff; --bg-raised: #f0eee8; --card-bg: #ffffff;
    --text-primary: #1c1917; --text-secondary: #3d3631; --text-muted: #6b6259;
    --accent-text: #7a5520; --border-subtle: rgba(28, 25, 23, 0.09); --border-strong: #1c1917; --alert: #9a3412;
    --btn-bg: #1c1917; --btn-text: #f9f8f5; --btn-hover-bg: var(--accent-gold); --btn-hover-text: #1c1917;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg-canvas: #f9f8f5; --bg-surface: #ffffff; --bg-raised: #f0eee8; --card-bg: #ffffff;
  --text-primary: #1c1917; --text-secondary: #3d3631; --text-muted: #6b6259;
  --accent-text: #7a5520; --border-subtle: rgba(28, 25, 23, 0.09); --border-strong: #1c1917; --alert: #9a3412;
  --btn-bg: #1c1917; --btn-text: #f9f8f5; --btn-hover-bg: var(--accent-gold); --btn-hover-text: #1c1917;
  color-scheme: light;
}
/* Smooth theme switch: applied for 400 ms by the toggle only, so it never slows other transitions. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

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

/* ---------- type ---------- */
.eyebrow, .label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
  margin: 0;
}
h1.display { font-size: clamp(48px, 9vw, 128px); }
h2.display { font-size: clamp(36px, 5.4vw, 72px); }
h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.15; margin: 0 0 12px; }
.lede { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--ink-2); max-width: 36ch; }
.measure { max-width: 64ch; }
em, .italic { font-style: italic; }
.mono { font-family: var(--font-mono); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark { display: block; color: var(--ochre); overflow: visible; }
.mark--nav { width: 46px; height: auto; aspect-ratio: var(--twin-ar); }
.brand-name { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0.22em; font-size: 15px; }
.brand-name span { color: var(--ink-3); font-weight: 400; }
.nav { display: flex; gap: 24px; align-items: center; }
.nav a { font-size: 14px; text-decoration: none; color: var(--ink-2); }
.nav a[aria-current="true"] { color: var(--ink); text-decoration: underline; }
@media (max-width: 900px) { .nav .nav-link { display: none; } }
.site-head .btn, .brand-name { white-space: nowrap; }
@media (max-width: 520px) { .brand-name span { display: none; } .brand-name { letter-spacing: .16em; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  min-height: var(--tap); justify-content: center;
  padding: 12px 22px; border: 1px solid var(--btn-bg); border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-text); text-decoration: none; cursor: pointer; font-weight: 600;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-text); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 500; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--dark { background: var(--btn-dark-bg); border-color: var(--btn-dark-bg); color: var(--btn-dark-text); }
.btn--dark:hover { background: var(--accent-gold); border-color: var(--accent-gold); color: var(--btn-gold-text); }
.btn--small { padding: 9px 16px; font-size: 13px; min-height: 40px; }
.site-head .btn--small { min-height: 40px; }
.btn[disabled] { opacity: .5; cursor: progress; }
.btn .arrow { font-family: var(--font-mono); }

/* ---------- sections ---------- */
.section { border-top: 1px solid var(--rule-strong); padding: clamp(56px, 8vw, 112px) 0; }
.section-grid { display: grid; grid-template-columns: minmax(180px, 3fr) 9fr; gap: clamp(24px, 4vw, 64px); }
.section-grid > * { min-width: 0; }
.section-index { position: sticky; top: 96px; align-self: start; }
.section-index .num { font-family: var(--font-mono); font-size: 13px; color: var(--ink); display: block; margin-bottom: 6px; }
@media (max-width: 820px) {
  .section-grid { grid-template-columns: 1fr; }
  .section-index { position: static; }
}

/* ---------- hero ---------- */
.hero { padding: clamp(48px, 9vw, 120px) 0 clamp(48px, 7vw, 96px); }
.hero-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(28px, 5vw, 56px); }
.hero h1 em { color: var(--accent); }
.hero-mark { margin-bottom: clamp(20px, 4vw, 40px); }
.mark--hero { width: clamp(150px, 26vw, 300px); height: auto; aspect-ratio: var(--twin-ar); }
.hero-sub { color: var(--ink-2); max-width: 52ch; margin: 18px 0 0; }
.hero-foot { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 5vw, 64px); align-items: end; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) { .hero-foot { grid-template-columns: 1fr; } .hero-actions { justify-content: flex-start; } }

.ticker { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); margin-top: clamp(40px, 6vw, 80px); }
.ticker div { padding: 18px 16px 0 0; border-right: 1px solid var(--rule); }
.ticker div + div { padding-left: 16px; }
.ticker div:last-child { border-right: 0; }
.ticker strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 48px); line-height: 1; }
.ticker span { font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) { .ticker { grid-template-columns: 1fr 1fr; } .ticker div:nth-child(2) { border-right: 0; } .ticker div:nth-child(3) { padding-left: 0; } .ticker div { padding-bottom: 16px; } }

/* ---------- lists / pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); margin-top: 40px; }
.pillars > div { padding: 24px 24px 0 0; }
.pillars > div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } .pillars > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } .pillars > div { padding-bottom: 20px; } }
.pillars p { margin: 0; color: var(--ink-2); }

/* ---------- tier matrix ---------- */
.matrix { width: 100%; border-collapse: collapse; margin-top: 32px; }
.matrix th, .matrix td { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-top: 1px solid var(--rule); }
.matrix thead th { border-top: 1px solid var(--rule-strong); padding-top: 24px; }
.matrix tbody th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; width: 22%; }
.matrix td { color: var(--ink-2); width: 39%; }
.tier-name { font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 400; line-height: 1.05; display: block; color: var(--ink); }
.tier-price { font-family: var(--font-mono); font-size: 14px; display: block; margin-top: 8px; color: var(--ink); }
.tier-code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; }
.tier--feature { position: relative; }
.matrix td.tier--feature, .matrix th.tier--feature { background: var(--paper-2); padding-left: 16px; }
@media (max-width: 760px) {
  .matrix, .matrix thead, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100% !important; }
  .matrix thead { display: none; }
  .matrix tbody tr { border-top: 1px solid var(--rule-strong); padding: 16px 0; }
  .matrix tbody th { border: 0; padding: 0 0 8px; }
  .matrix td { border: 0; padding: 6px 0 6px 0; }
  .matrix td.tier--feature { padding: 6px 12px; }
  .matrix td::before { content: attr(data-tier); display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
}
.note { font-size: 14px; color: var(--ink-3); margin-top: 20px; }
.exclusions { columns: 2; column-gap: 32px; padding-left: 18px; color: var(--ink-2); font-size: 15px; }
@media (max-width: 640px) { .exclusions { columns: 1; } }

/* ---------- testimonials ---------- */
.alumni { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--rule); margin-top: 32px; }
.alumni figure { margin: 0; padding: 28px 28px 28px 0; border-bottom: 1px solid var(--rule); }
.alumni figure:nth-child(even) { padding-left: 28px; padding-right: 0; border-left: 1px solid var(--rule); }
@media (max-width: 820px) { .alumni { grid-template-columns: 1fr; } .alumni figure:nth-child(even) { padding-left: 0; border-left: 0; } }
.alumni blockquote { margin: 0 0 20px; font-family: var(--font-display); font-size: clamp(21px, 2vw, 25px); line-height: 1.35; }
.alumni figcaption strong { display: block; font-weight: 500; }
.alumni figcaption span { font-size: 14px; color: var(--ink-3); }
.institutions { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); }
.institutions span { white-space: nowrap; }
.institutions span + span::before { content: "/"; color: var(--ink-3); margin-right: 28px; font-family: var(--font-sans); font-weight: 300; }
.endorse { margin-top: 32px; padding: 24px; background: var(--paper-2); border-left: 2px solid var(--ochre); }
.endorse p { margin: 0 0 8px; font-family: var(--font-display); font-size: 21px; line-height: 1.4; }

/* ---------- advisory notice ---------- */
.advisory { border: 1px solid var(--rule-strong); padding: clamp(20px, 3vw, 36px); margin-top: 32px; }
.advisory-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 16px; margin-bottom: 20px; }
.advisory ol { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
.advisory li { counter-increment: p; }
.advisory li::before { content: "0" counter(p); font-family: var(--font-mono); font-size: 12px; color: var(--accent); display: block; margin-bottom: 4px; }
.advisory li strong { display: block; font-weight: 500; }
.advisory li p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 760px) { .advisory ol { grid-template-columns: 1fr; } }
.disclaimer { font-size: 13px; color: var(--ink-3); margin-top: 20px; }

/* ---------- faq ---------- */
.faq { margin-top: 24px; border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px 1fr 24px; gap: 12px; padding: 22px 0; font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mono { font-size: 12px; color: var(--ink-3); padding-top: 8px; }
.faq summary .plus { font-family: var(--font-mono); font-size: 20px; text-align: right; transition: transform .2s; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .answer { padding: 0 36px 24px 60px; color: var(--ink-2); }
.faq .answer p { margin: 0 0 12px; }
@media (max-width: 640px) { .faq summary { grid-template-columns: 32px 1fr 20px; } .faq .answer { padding: 0 0 20px 44px; } }

/* ---------- resources ---------- */
.resources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
@media (max-width: 760px) { .resources { grid-template-columns: 1fr; } }
.resource { border: 1px solid var(--rule-strong); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.resource p { margin: 0; color: var(--ink-2); font-size: 15px; flex: 1; }
.resource .meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }

/* ---------- cta band ---------- */
.cta-band { background: var(--ochre); color: #161615; border-top-color: var(--ochre); }
.cta-band .display, .cta-band .display em { color: #161615; }
.cta-band .btn { background: #161615; color: #ede8e1; border-color: #161615; font-weight: 600; }
.cta-band .btn:hover { background: transparent; color: #161615; }
.cta-band .eyebrow { color: rgba(12, 13, 14, .7); }
.mark--cta { color: #161615; width: 120px; height: auto; aspect-ratio: var(--single-ar); }
@media (max-width: 820px) { .mark--cta { width: 72px; margin-bottom: 8px; } }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--rule-strong); padding: 40px 0 56px; font-size: 14px; color: var(--ink-3); }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-foot a { color: var(--ink-2); }

/* =========================================================
   INTAKE
   ========================================================= */
.intake-shell { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 5vw, 80px); padding-top: clamp(40px, 6vw, 80px); padding-bottom: 96px; }
@media (max-width: 900px) { .intake-shell { grid-template-columns: 1fr; } }
.intake-aside { position: sticky; top: 96px; align-self: start; }
@media (max-width: 900px) { .intake-aside { position: static; } }
.intake-aside h1 { font-size: clamp(40px, 5vw, 64px); }
.intake-aside p { color: var(--ink-2); }
.intake-aside .meta-list { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--rule); }
.intake-aside .meta-list li { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }
.intake-aside .meta-list li span:first-child { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.progress { height: 2px; background: var(--rule); margin-top: 24px; position: relative; overflow: hidden; }
.progress > i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ochre); transition: width .3s; }
.progress-label { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 8px; }

.banner { border: 1px solid var(--rule-strong); padding: 14px 16px; margin-bottom: 24px; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.banner[hidden] { display: none; }
.banner--accent { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.banner--alert { border-color: var(--alert); color: var(--alert); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

.field { border: 0; margin: 0; padding: 28px 0; border-top: 1px solid var(--rule); min-width: 0; }
.field:first-of-type { border-top: 1px solid var(--rule-strong); }
.field-head { display: grid; grid-template-columns: 44px 1fr; gap: 8px; margin-bottom: 14px; padding: 0; float: left; width: 100%; }
.field-body { clear: both; }
.field-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); padding-top: 5px; }
.field-label { font-family: var(--font-display); font-size: clamp(21px, 2.2vw, 25px); line-height: 1.25; font-weight: 500; }
.field-label .req { color: var(--accent); font-family: var(--font-mono); font-size: 14px; margin-left: 4px; }
.field-body { padding-left: 52px; }
@media (max-width: 640px) { .field-body { padding-left: 0; } }
.context { font-size: 14px; color: var(--ink-3); margin: 0 0 16px; max-width: 64ch; }

.input {
  width: 100%; font: inherit; font-size: 17px; min-height: var(--tap); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-3);
  padding: 10px 0; border-radius: 0; transition: border-color .2s;
}
.input::placeholder { color: var(--ink-3); opacity: .8; }
.input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.input--inline { margin-top: 10px; }

.choices { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.choices--grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
@media (max-width: 640px) { .choices--grid { grid-template-columns: 1fr; } }
.choice { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; min-height: var(--tap); align-items: start; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.choice:hover { color: var(--ink); }
.choice input { appearance: none; -webkit-appearance: none; margin: 2px 0 0; width: 20px; height: 20px; border: 1px solid var(--ink-2); background: var(--paper); display: grid; place-content: center; cursor: pointer; }
.choice input[type="radio"] { border-radius: 50%; }
.choice input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s; background: var(--ochre); }
.choice:has(input:checked) { color: var(--ink); }
.choice input[type="radio"]::before { border-radius: 50%; }
.choice input:checked::before { transform: scale(1); }
.choice input:checked + span { color: var(--ink); }
.choice strong { font-weight: 500; color: var(--ink); }
.choice .code { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; margin-top: 2px; }
.choice--tier { padding: 18px 0; }
.choice--tier .price { font-family: var(--font-mono); }

.error { color: var(--alert); font-size: 14px; margin: 10px 0 0; min-height: 0; }
.error:empty { display: none; }
.field[data-invalid="true"] .field-label { color: var(--alert); }

.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.submit-row { border-top: 1px solid var(--rule-strong); padding-top: 28px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.submit-row .fine { font-size: 13px; color: var(--ink-3); max-width: 44ch; margin: 0; }
.form-status { margin-top: 16px; font-size: 15px; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--alert); }

/* post-submission states */
.result { border-top: 1px solid var(--rule-strong); padding-top: 32px; }
.result[hidden] { display: none; }
.result .queue { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--accent); }
.result h2 { font-size: clamp(36px, 4.6vw, 60px); margin: 12px 0 20px; }
.result p { font-size: 18px; color: var(--ink-2); max-width: 56ch; }
.result .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.result .edit-link { margin-top: 28px; font-size: 14px; color: var(--ink-3); word-break: break-all; }
.countdown { font-family: var(--font-mono); }


/* =========================================================
   v2 — Ochre & Obsidian additions (mobile first)
   ========================================================= */
.foot-brand { display: inline-flex; align-items: center; gap: 12px; }
.mono { font-family: var(--font-mono); }
.icon-btn {
  width: var(--tap); height: var(--tap); display: inline-grid; place-items: center;
  background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: 50%;
  font: 500 17px/1 var(--font-mono); cursor: pointer; transition: border-color .2s, color .2s;
}
.icon-btn:hover { border-color: var(--ochre); color: var(--accent); }

/* ---------- daily anchor ---------- */
.anchor { padding: 0 0 clamp(48px, 7vw, 88px); }
.anchor-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 1000px) { .anchor-grid { grid-template-columns: 1fr 1fr; } .anchor-prompt { grid-column: 1 / -1; } }
@media (max-width: 640px) { .anchor-grid { grid-template-columns: 1fr; } }
.anchor-card { background: var(--paper-2); padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.anchor-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.anchor-head strong { color: var(--accent); font-weight: 500; }
.anchor-quote { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 0; font-style: italic; }
.anchor-meta { font-size: 13px; color: var(--ink-3); margin: 0; }
.ring-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; position: relative; }
.ring { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; }
.ring-track { stroke: var(--rule); }
.ring-bar { stroke: var(--ochre); stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ring-text { position: absolute; left: 0; top: 0; width: 96px; height: 96px; display: grid; place-content: center; text-align: center; line-height: 1; }
.ring-text strong { font-family: var(--font-display); font-size: 34px; font-weight: 500; }
.ring-text span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.ring-legend { display: flex; flex-direction: column; gap: 6px; }
.ring-label { font-weight: 500; }
.ready-list { display: grid; gap: 4px; }
.ready-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name stage" "seg seg"; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.ready-name { grid-area: name; font-size: 15px; }
.ready-stage { grid-area: stage; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; align-self: center; }
.seg { grid-area: seg; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.seg button { height: 28px; min-height: 28px; border: 1px solid var(--rule); background: transparent; border-radius: var(--radius); cursor: pointer; padding: 0; position: relative; }
.seg button::after { content: ""; position: absolute; inset: -10px -2px; }   /* 48px effective tap height */
.seg button.is-on { background: var(--ochre); border-color: var(--ochre); }
.seg button:focus-visible { outline-offset: 1px; }

/* ---------- duality ---------- */
.duality { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 40px; }
@media (max-width: 820px) { .duality { grid-template-columns: 1fr; } }
.duality-card { background: var(--paper); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.duality-card p { margin: 0; color: var(--ink-2); }
.mark--duality { width: 100%; max-width: 260px; height: auto; aspect-ratio: var(--twin-ar); margin-bottom: 16px; }
.mark--single { max-width: 150px; aspect-ratio: var(--single-ar); }
.duality-head { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; margin: 4px 0 0; font-weight: 400; }
.duality-alt { font-family: var(--font-mono); font-size: 12px; color: var(--accent) !important; letter-spacing: .04em; }
.semiotics { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--rule-strong); }
.semiotics article { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.semiotics article > p { margin: 12px 0 0; color: var(--ink-2); max-width: 70ch; }
.defs { margin: 16px 0 0; display: grid; grid-template-columns: 180px 1fr; gap: 12px 24px; }
.defs dt { font-family: var(--font-display); font-size: 22px; color: var(--accent); }
.defs dd { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .defs { grid-template-columns: 1fr; gap: 4px; } .defs dd { margin-bottom: 12px; } }
.ticks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 72ch; }
.ticks li { padding-left: 24px; position: relative; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--ochre); }
.ticks strong { color: var(--ink); font-weight: 500; }
.scale-strip { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-top: 20px; padding: 20px; background: var(--paper-2); }
.scale-strip .mono { font-size: 12px; color: var(--ink-3); margin-left: auto; }

/* ---------- carousels (pillars, alumni) ---------- */
.carousel-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 32px 0 16px; }
.carousel-bar .mono { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.carousel-nav { display: flex; gap: 8px; }
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 420px); column-gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; scroll-snap-stop: always; }
.carousel:focus-visible { outline-offset: 6px; }
@media (max-width: 820px) { .carousel { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); } }
.dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); transition: background .2s, width .2s; }
.dots i.is-on { background: var(--ochre); width: 18px; border-radius: 3px; }

.pillar-card {
  background: var(--paper-2); border: 1px solid var(--rule); border-top: 2px solid var(--ochre);
  padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 340px;
}
.pillar-card.is-done { border-color: var(--ochre); }
.pillar-num { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.pillar-title { font-size: clamp(32px, 3.4vw, 42px); line-height: 1; font-weight: 400; margin: 0; text-transform: none; }
.pillar-sub { font-size: .5em; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.pillar-card > p { margin: 0; color: var(--ink-2); }
.pillar-more { color: var(--ink-2); }
.pillar-more summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); min-height: var(--tap); display: flex; align-items: center; list-style: none; }
.pillar-more summary::-webkit-details-marker { display: none; }
.pillar-more summary::after { content: " +"; }
.pillar-more[open] summary::after { content: " −"; }
.pillar-more p { margin: 0 0 12px; }
.pillar-toggle {
  margin-top: auto; min-height: var(--tap); border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font: 500 14px var(--font-sans); border-radius: var(--radius); cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.pillar-toggle { background: var(--btn-dark-bg); color: var(--btn-dark-text); border-color: var(--btn-dark-bg); font-weight: 600; }
:root:not([data-theme="light"]) .pillar-toggle { border-color: var(--border-subtle); }
.pillar-toggle:hover { border-color: var(--accent-gold); }
.pillar-toggle[aria-pressed="true"] { background: var(--accent-gold); color: var(--btn-gold-text); border-color: var(--accent-gold); }

.carousel--alumni { grid-auto-columns: min(86%, 460px); }
.alumni-card { margin: 0; padding: 24px; border: 1px solid var(--rule); background: var(--paper-2); display: flex; flex-direction: column; gap: 16px; }
.alumni-card blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 26px); line-height: 1.32; flex: 1; }
.alumni-card figcaption strong { display: block; font-weight: 500; }
.alumni-card figcaption span { font-size: 14px; color: var(--ink-3); }

/* ---------- campus reality ---------- */
.campus { list-style: none; counter-reset: c; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--rule-strong); }
@media (max-width: 760px) { .campus { grid-template-columns: 1fr; } }
.campus li { counter-increment: c; padding: 20px 0 20px 44px; border-bottom: 1px solid var(--rule); position: relative; }
.campus li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: 23px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.campus strong { font-weight: 500; display: block; }
.campus p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.campus-feature { grid-column: 1 / -1; background: var(--paper-2); padding-right: 20px !important; }
.campus-feature::before { left: 16px !important; }
.campus-feature { padding-left: 60px !important; }
.campus blockquote { margin: 12px 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2vw, 24px); line-height: 1.4; color: var(--ink); border-left: 2px solid var(--ochre); padding-left: 16px; }

/* ---------- milestones ---------- */
.milestones-title { margin-top: 48px; }
.milestones { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ochre); }
@media (max-width: 760px) { .milestones { grid-template-columns: 1fr 1fr; } }
.milestones li { padding: 16px 12px 16px 0; display: flex; flex-direction: column; gap: 2px; position: relative; }
.milestones li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ochre); }
.ms-amt { font-family: var(--font-display); font-size: 36px; line-height: 1; margin-top: 6px; }
.milestones strong { font-weight: 500; margin-top: 4px; }
.milestones span:last-child { font-size: 13px; color: var(--ink-3); }

/* ---------- F-1 alert card ---------- */
.alert-card { margin-top: 32px; border: 1px solid var(--ochre); padding: clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; background: color-mix(in srgb, var(--ochre) 7%, transparent); }
.alert-card p { margin: 0; max-width: 64ch; color: var(--ink-2); }
.alert-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 8px; align-items: center; }
.alert-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ochre); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- bottom sheets & modal ---------- */
html.sheet-open { overflow: hidden; }
dialog.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 760px; max-height: 88vh; max-height: 88dvh;
  padding: 0; border: 1px solid var(--rule); border-bottom: 0; border-radius: 16px 16px 0 0;
  background: var(--paper); color: var(--ink); overflow: hidden; display: none; flex-direction: column;
  transition: transform .25s ease;
}
dialog.sheet[open] { display: flex; animation: sheet-in .28s ease; }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 10px auto 0; flex: none; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px 8px 20px; border-bottom: 1px solid var(--rule); flex: none; touch-action: none; }
.sheet-head-actions { display: flex; gap: 12px; align-items: center; }
.sheet-link { font-size: 12px; color: var(--ink-3); }
.sheet-body { overflow-y: auto; padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.sheet-body p { color: var(--ink-2); }
.sheet-title { font-size: clamp(30px, 5vw, 44px); margin: 0 0 16px; }
.brief-list { list-style: none; counter-reset: b; padding: 0; margin: 20px 0; display: grid; gap: 16px; }
.brief-list li { counter-increment: b; border-top: 1px solid var(--rule); padding-top: 12px; }
.brief-list li::before { content: "0" counter(b); font-family: var(--font-mono); font-size: 12px; color: var(--accent); display: block; }
.brief-list strong { font-weight: 500; }
.brief-list p { margin: 4px 0 0; font-size: 15px; }
dialog.sheet--full { max-width: 980px; height: 94vh; height: 94dvh; max-height: none; }
.intake-frame { border: 0; width: 100%; flex: 1; background: var(--paper); }
@media (min-width: 1000px) {
  dialog.sheet--full { inset: 3vh 0 auto 0; border-radius: 12px; border-bottom: 1px solid var(--rule); }
}

/* ---------- thumb-zone action bar ---------- */
.thumbbar { display: none; }
@media (max-width: 820px) {
  body.has-thumbbar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .thumbbar {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
  }
  .thumbbar-link {
    min-height: var(--tap); padding: 0 12px; display: inline-flex; align-items: center;
    font: 500 14px var(--font-sans); color: var(--ink-2); text-decoration: none; background: none; border: 0; cursor: pointer;
  }
  .thumbbar-cta { margin-left: auto; flex: 1; max-width: 260px; }
  .thumbbar-progress { font-size: 12px; color: var(--ink-3); }
  .site-head .btn--small { display: none; }
  .page-intake .submit-row .btn { display: none; }
  .is-submitted .thumbbar--form { display: none; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); opacity: 0; transition: opacity .2s, transform .2s;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; font-size: 14px;
  max-width: calc(100% - 32px); text-align: center; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 821px) { .toast { bottom: 24px; } }

/* ---------- pull-to-refresh indicator ---------- */
.ptr {
  --p: 0; position: fixed; z-index: 25; top: 72px; left: 50%; transform: translate(-50%, calc(var(--p) * 24px - 40px));
  opacity: 0; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--rule); font: 12px var(--font-mono); color: var(--ink-2); pointer-events: none;
}
.ptr.is-pulling { opacity: 1; }
.ptr-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ochre); transform: scale(calc(.4 + var(--p) * .6)); }
.ptr.is-armed .ptr-dot { background: var(--ochre); }

/* ---------- intake embedded in the landing-page modal ---------- */
.is-embed .site-head, .is-embed .site-foot, .is-embed .skip, .is-embed .ptr { display: none !important; }
.is-embed .intake-shell { padding-top: 24px; }
.is-embed .intake-aside h1 { font-size: clamp(34px, 6vw, 48px); }
.result[data-queue="VIP_HOT"] .queue::before { content: "● "; color: var(--ochre); }

/* =========================================================
   OPERATIONS CONSOLE (/ops/)
   ========================================================= */
.ops-shell { padding-top: clamp(28px, 4vw, 56px); padding-bottom: 96px; }
.ops-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--rule-strong); padding-bottom: 20px; }
.ops-top h1 { font-size: clamp(40px, 6vw, 72px); }
.ops-auth { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.ops-auth .input { width: min(320px, 100%); }
.ops-banner { margin: 20px 0 0; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 24px; }
@media (max-width: 760px) { .kpis { grid-template-columns: 1fr 1fr; } }
.kpi { background: var(--paper-2); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi strong { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); font-weight: 400; line-height: 1; }
.kpi span { font-size: 13px; color: var(--ink-3); }
.ops-section { margin-top: 48px; }
.ops-section > h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.ops-section > p { color: var(--ink-2); margin: 0 0 16px; max-width: 70ch; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs button { min-height: var(--tap); padding: 0 16px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--ink-3); font: 500 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ochre); }
.levels { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 16px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .levels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .levels { grid-template-columns: 1fr; } }
.level { background: var(--paper); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.level-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.level h3 { font-size: 22px; margin: 0; }
.level .metric { font-size: 14px; color: var(--ink-2); margin: 0; }
.level .value { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.level .value small { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: 6px; letter-spacing: .04em; }
.level .entry { display: flex; gap: 8px; }
.level .entry .input { font-size: 15px; }
.level .src { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.ledger { display: grid; gap: 12px; margin-top: 16px; }
.ledger-card { border: 1px solid var(--rule); background: var(--paper-2); padding: 16px; display: grid; gap: 12px; }
.ledger-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.ledger-head strong { font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.ledger-head .mono { font-size: 12px; color: var(--ink-3); }
.q-chip { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-2); letter-spacing: .04em; }
.q-chip[data-q="VIP_HOT"] { border-color: var(--ochre); color: var(--accent); }
.ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 640px) { .ms-grid { grid-template-columns: 1fr 1fr; } }
.ms-cell { border: 1px solid var(--rule); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 110px; background: var(--paper); cursor: pointer; text-align: left; color: var(--ink); font: inherit; border-radius: var(--radius); }
.ms-cell .ms-name { font-size: 13px; font-weight: 500; }
.ms-cell .ms-sum { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.ms-cell .ms-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; margin-top: auto; }
.ms-cell[data-status="PAID"] { border-color: var(--ochre); background: color-mix(in srgb, var(--ochre) 12%, var(--paper)); }
.ms-cell[data-status="PAID"] .ms-status { color: var(--accent); }
.ms-cell[data-status="DUE"] .ms-status { color: var(--alert); }
.ms-cell .ms-due { font-size: 12px; color: var(--ink-3); }
.dunning { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dunning b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; font-weight: 500; color: var(--alert); }
.dunning b.is-calm { color: var(--ink-3); }
.ops-empty { color: var(--ink-3); padding: 24px 0; }
.ops-form { display: grid; gap: 12px; padding: 4px 0 8px; }
.ops-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); }
.ops-form select, .ops-form input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); min-height: var(--tap); padding: 0 12px; border-radius: var(--radius); }
.sample-flag { font-family: var(--font-mono); font-size: 11px; background: var(--alert); color: var(--paper); padding: 2px 8px; border-radius: 999px; letter-spacing: .06em; }
.page-ops .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }

/* =========================================================
   v3 — iteration 2: theme toggle, monumental mark, scalability demo, campus accordion,
   live countdown, About & founder editorial, Genesis Admin
   ========================================================= */
.mark use { pointer-events: none; }
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); display: inline-grid; place-items: center; cursor: pointer; flex: none; position: relative; }
.theme-toggle::after { content: ""; position: absolute; inset: -4px; }            /* 48px effective target */
.theme-toggle:hover { border-color: var(--accent-gold); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; } }
.head-actions { display: flex; align-items: center; gap: 12px; }
.nav a.is-page { color: var(--ink); }

/* ---------- duality v3 ---------- */
.duality-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 27px); line-height: 1.35; color: var(--ink-2); max-width: 52ch; margin: 20px 0 0; }
.identity { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 56px); align-items: center; border-top: 1px solid var(--rule-strong); padding-top: 32px; }
@media (max-width: 820px) { .identity { grid-template-columns: 1fr; } }
.identity .mark { width: 100%; max-width: 420px; height: auto; aspect-ratio: var(--twin-ar); }
.identity-line { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2vw, 24px); color: var(--accent); margin: 8px 0 0; }
.identity p:not(.identity-line) { color: var(--ink-2); margin: 14px 0 0; max-width: 60ch; }
.identity h3, .monument h3 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1; font-weight: 400; margin: 10px 0 0; }

/* The Operational Standard: the mirrored single ram at monumental scale, bleeding off the right edge. */
.monument { position: relative; overflow: hidden; margin-top: 48px; border: 1px solid var(--rule); background: var(--paper-2); min-height: clamp(380px, 52vw, 640px); display: flex; align-items: flex-end; isolation: isolate; }
.monument .mark--monument { position: absolute; z-index: -1; color: var(--accent-gold); width: clamp(420px, 78vw, 980px); height: auto; aspect-ratio: var(--single-ar); right: clamp(-340px, -22vw, -120px); top: 50%; transform: translateY(-46%); }
.monument-copy { padding: clamp(20px, 4vw, 48px); max-width: min(560px, 62%); }
.monument-copy p { color: var(--ink-2); margin: 16px 0 0; }
@media (max-width: 640px) {
  .monument { align-items: flex-end; min-height: 560px; }
  .monument .mark--monument { width: 150vw; right: -62vw; top: -8%; transform: none; opacity: .9; }
  .monument-copy { max-width: none; background: linear-gradient(to top, var(--paper-2) 70%, transparent); padding-top: 64px; }
}

/* Ergonomic scalability: one framed box, grid overlay, the mark holds at 96 → 48 → 32 → 24 px and loops. */
.scale-demo { margin-top: 20px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
@media (max-width: 560px) { .scale-demo { grid-template-columns: 1fr; } }
.scale-frame { position: relative; width: 160px; height: 160px; border: 1px solid var(--rule-strong); display: grid; place-items: center; overflow: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 8px 8px; background-position: -1px -1px; }
.scale-frame::before, .scale-frame::after { content: ""; position: absolute; background: color-mix(in srgb, var(--accent-gold) 55%, transparent); }
.scale-frame::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.scale-frame::after { top: 50%; left: 0; right: 0; height: 1px; }
.scale-frame .mark { position: relative; z-index: 1; color: var(--ink); width: 96px; height: auto; aspect-ratio: var(--twin-ar); animation: mark-scale 8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes mark-scale {
  0%, 16% { width: 96px; }
  25%, 41% { width: 48px; }
  50%, 66% { width: 32px; }
  75%, 91% { width: 24px; }
  100% { width: 96px; }
}
.scale-readout { position: absolute; z-index: 2; right: 6px; bottom: 4px; font: 500 11px var(--font-mono); color: var(--accent); }
.scale-readout span { position: absolute; right: 0; bottom: 0; opacity: 0; animation: readout 8s steps(1) infinite; white-space: nowrap; }
.scale-readout span:nth-child(1) { animation-name: ro1; } .scale-readout span:nth-child(2) { animation-name: ro2; }
.scale-readout span:nth-child(3) { animation-name: ro3; } .scale-readout span:nth-child(4) { animation-name: ro4; }
@keyframes ro1 { 0%, 20% { opacity: 1; } 20.01%, 100% { opacity: 0; } }
@keyframes ro2 { 0%, 20% { opacity: 0; } 20.01%, 45% { opacity: 1; } 45.01%, 100% { opacity: 0; } }
@keyframes ro3 { 0%, 45% { opacity: 0; } 45.01%, 70% { opacity: 1; } 70.01%, 100% { opacity: 0; } }
@keyframes ro4 { 0%, 70% { opacity: 0; } 70.01%, 95% { opacity: 1; } 95.01%, 100% { opacity: 0; } }
.scale-ladder { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.scale-ladder .mark { height: auto; aspect-ratio: var(--twin-ar); color: var(--ink); }
.scale-ladder .mono { font-size: 11px; color: var(--ink-3); display: block; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .scale-frame .mark { width: 48px; } .scale-readout span:nth-child(2) { opacity: 1; } }

/* ---------- live countdown ---------- */
.count-live { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.count-live b { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink); margin-right: 2px; }
.anchor-done { align-self: flex-start; }
.sync-line { display: flex; gap: 8px; align-items: center; }
.sync-line::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.sync-line.is-synced::before { background: var(--accent-gold); }

/* ---------- campus accordion ---------- */
.campus-acc { margin-top: 32px; border-top: 1px solid var(--rule-strong); }
.campus-acc details { border-bottom: 1px solid var(--rule); }
.campus-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px 1fr 24px; gap: 12px; align-items: center; min-height: 64px; padding: 10px 0; font-size: 17px; font-weight: 500; }
.campus-acc summary::-webkit-details-marker { display: none; }
.campus-acc summary .mono { font-size: 12px; color: var(--accent); font-weight: 400; }
.campus-acc summary .plus { font-family: var(--font-mono); font-size: 20px; text-align: right; transition: transform .2s; font-weight: 400; }
.campus-acc details[open] summary .plus { transform: rotate(45deg); }
.campus-acc .acc-body { padding: 0 36px 20px 52px; color: var(--ink-2); }
.campus-acc .acc-body p { margin: 0 0 10px; }
.campus-acc blockquote { margin: 12px 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.4; color: var(--ink); border-left: 2px solid var(--accent-gold); padding-left: 16px; }
@media (max-width: 640px) { .campus-acc .acc-body { padding: 0 0 18px 52px; } }

/* ---------- About & founder editorial ---------- */
.about-hero { padding: clamp(48px, 8vw, 112px) 0 clamp(40px, 6vw, 80px); }
.about-hero h1 { font-size: clamp(44px, 8vw, 112px); margin: 16px 0 0; }
.about-copy { display: grid; gap: 18px; max-width: 64ch; }
.about-copy p { margin: 0; color: var(--ink-2); }
.about-copy p:first-child { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--ink); }
.strategies { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.strategies li { background: var(--paper-2); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: 32px 1fr; gap: 16px; }
.strategies .check { width: 28px; height: 28px; border: 1px solid var(--accent-gold); border-radius: var(--radius); display: grid; place-items: center; color: var(--accent); }
.strategies .check svg { width: 16px; height: 16px; }
.strategies h3 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 8px; }
.strategies p { margin: 0 0 10px; color: var(--ink-2); }
.datasets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 760px) { .datasets { grid-template-columns: 1fr; } }

.founder-section { border-top: 1px solid var(--rule-strong); padding: clamp(56px, 8vw, 112px) 0; }
.founder-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 820px) { .founder-grid { grid-template-columns: 1fr; } }
.founder-figure { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.image-frame { position: relative; overflow: hidden; border-radius: 2px; border: 1px solid var(--border-subtle); background-color: var(--bg-surface); }
.founder-img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; filter: contrast(106%) sepia(15%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.image-frame:hover .founder-img { transform: scale(1.02); }
.founder-meta { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--font-mono, monospace); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.founder-name { font-family: var(--font-display, serif); font-size: 1.15rem; text-transform: none; letter-spacing: normal; color: var(--text-primary); font-weight: 500; }
.founder-narrative .section-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.6vw, 60px); line-height: 1; margin: 0; }
.lead-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.4; color: var(--ink); border-left: 2px solid var(--accent-gold); padding-left: 20px; margin: 28px 0; }
.founder-credentials-list { display: grid; gap: 14px; border-top: 1px solid var(--rule); padding-top: 20px; }
.founder-credentials-list p { margin: 0; color: var(--ink-2); font-size: 15px; }
.founder-credentials-list strong { color: var(--ink); font-weight: 500; }

/* ---------- Genesis Admin ---------- */
.admin-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
@media (max-width: 980px) { .admin-grid { grid-template-columns: 1fr; } }
.feed { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--rule); max-height: 520px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.feed time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.feed .who { font-weight: 500; }
.feed .what { color: var(--ink-2); }
.feed .act { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--accent); }
.feed li.is-new { animation: feed-in 1.2s ease; }
@keyframes feed-in { from { background: color-mix(in srgb, var(--accent-gold) 18%, transparent); } }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); animation: pulse 2s infinite; }
.demo-tabs { margin-top: 12px; }
.bars { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 4px 10px; font-size: 14px; }
.bars .bar { grid-column: 1 / -1; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.bars .bar i { display: block; height: 100%; background: var(--accent-gold); }
.bars .n { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-2); }
.radar { display: grid; gap: 8px; margin-top: 16px; }
.radar-row { border: 1px solid var(--rule); background: var(--paper-2); padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.radar-row .mono { font-size: 12px; color: var(--ink-3); }
.radar-row .days { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--alert); }
.radar-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.radar-actions .mono { font-size: 12px; color: var(--ink-3); }
.radar-actions .btn { min-height: 44px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.level .bench { font-size: 12px; color: var(--ink-3); margin: 0; }
.admin-section { margin-top: 48px; }
.admin-section > h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.admin-section > p { color: var(--ink-2); margin: 0 0 12px; max-width: 70ch; }
.page-admin .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
.mission-quote { margin: 20px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--accent-gold); }
.mission-quote p { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.4; color: var(--ink); margin: 0; }
.field-label .opt { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-weight: 400; letter-spacing: .04em; }

/* ---------- The Operational Standard: the whole single ram, as large as its frame allows, never cropped ---------- */
/* The viewBox is the ram's own stroke bounds (scripts/build-marks.mjs), so "contain" scaling touches the frame edges.
   #mark-single is already mirrored to face right: no extra scaleX(-1) here, or it would face left again. */
.operational-standard-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.operational-standard-visual {
  width: 100%; max-height: 480px; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; box-sizing: border-box;
}
.operational-standard-visual svg {
  display: block; width: 100%; height: auto; max-height: 440px; aspect-ratio: var(--single-ar);
  color: currentColor;                    /* SVG viewBox default: preserveAspectRatio="xMidYMid meet" = contain */
}
@media (max-width: 820px) {
  .operational-standard-grid { grid-template-columns: 1fr; }
  .operational-standard-visual { max-height: 380px; padding: 0 0 1.5rem; }
  .operational-standard-visual svg { max-height: 340px; }
}

/* ---------- locked dataset buttons ---------- */
.btn--locked { background: transparent; color: var(--ink); border-color: var(--ink); font-weight: 600; gap: 8px; }
.btn--locked:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--locked .lock-ico { width: 15px; height: 15px; flex: none; }
.btn--unlocked .arrow { font-family: var(--font-mono); }

/* ---------- predictive program search (intake field 06) ---------- */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: var(--radius); max-height: 360px; overflow-y: auto;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}
.combo-list[hidden] { display: none; }
.combo-opt { display: grid; gap: 4px; padding: 10px 12px; min-height: var(--tap); cursor: pointer; border-radius: var(--radius); }
.combo-opt[aria-selected="true"], .combo-opt:hover { background: color-mix(in srgb, var(--accent-gold) 14%, transparent); }
.combo-title { font-family: var(--font-display); font-size: 20px; line-height: 1.2; color: var(--ink); }
.combo-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; color: var(--ink-2); }
.combo-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--accent-gold); border-radius: 999px; color: var(--accent); }
.combo-custom { padding: 10px 12px 6px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--rule); margin-top: 4px; }
.combo-note { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin: 8px 0 0; min-height: 0; }
.combo-note:empty { display: none; }

/* ---------- campus guide: discipline pills, count, teaser ---------- */
.campus-guide { margin-top: 28px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { min-height: 44px; padding: 0 16px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--ink); font: 500 14px var(--font-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pill:hover { border-color: var(--accent-gold); }
.pill[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); font-weight: 600; }
.campus-count { font-size: 12px; color: var(--ink-3); margin: 16px 0 0; letter-spacing: .04em; }
.campus-guide .campus-acc { margin-top: 12px; }
.campus-acc details[hidden] { display: none; }
.campus-teaser { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px; border: 1px solid var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 7%, transparent); }
.campus-teaser p { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; }
.campus-page .campus-guide { margin-top: 32px; }

/* ---------- milestones: sequential storytelling loop (12 s, transform / opacity / colour only: zero layout shift) -----
   Node 1 lights, card 1 rises · the gold line draws to node 2 · … · node 4 · all four hold 4 s · fade · loop.
   The resting state (no animation, reduced motion) is the completed state: every node lit, the full line drawn. */
.ms-rail { position: relative; margin-top: 20px; }
.ms-rail .milestones { margin-top: 0; border-top: 0; }
.ms-track { position: absolute; top: -1px; left: 6px; width: 75%; height: 2px; background: color-mix(in srgb, var(--accent-gold) 20%, transparent); }
.ms-track i { position: absolute; inset: 0; background: var(--accent-gold); transform-origin: left center; will-change: transform, opacity;
  animation: ms-draw 12s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes ms-draw {
  0%, 8.33% { transform: scaleX(0); opacity: 1; }
  16.67%, 25% { transform: scaleX(.3333); }
  33.33%, 41.67% { transform: scaleX(.6667); }
  50%, 91.67% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
.ms-rail .milestones li::before { z-index: 1; background: var(--accent-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 22%, transparent); }
.ms-rail .milestones li::after {
  content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent-gold); box-sizing: border-box; opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.ms-rail .milestones li > * { will-change: transform, opacity; }
.ms-rail .milestones li:nth-child(1)::before { animation: ms-node-1 12s infinite; } .ms-rail .milestones li:nth-child(1)::after { animation: ms-ring-1 12s ease-out infinite; } .ms-rail .milestones li:nth-child(1) > * { animation: ms-card-1 12s ease-out infinite; }
.ms-rail .milestones li:nth-child(2)::before { animation: ms-node-2 12s infinite; } .ms-rail .milestones li:nth-child(2)::after { animation: ms-ring-2 12s ease-out infinite; } .ms-rail .milestones li:nth-child(2) > * { animation: ms-card-2 12s ease-out infinite; }
.ms-rail .milestones li:nth-child(3)::before { animation: ms-node-3 12s infinite; } .ms-rail .milestones li:nth-child(3)::after { animation: ms-ring-3 12s ease-out infinite; } .ms-rail .milestones li:nth-child(3) > * { animation: ms-card-3 12s ease-out infinite; }
.ms-rail .milestones li:nth-child(4)::before { animation: ms-node-4 12s infinite; } .ms-rail .milestones li:nth-child(4)::after { animation: ms-ring-4 12s ease-out infinite; } .ms-rail .milestones li:nth-child(4) > * { animation: ms-card-4 12s ease-out infinite; }
@keyframes ms-node-1 { 0% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } 2.5%, 91.67% { background: var(--accent-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 22%, transparent); } 100% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } }
@keyframes ms-ring-1 { 0% { transform: scale(1); opacity: 0.9; } 0.01% { transform: scale(1); opacity: .9; } 9.0%, 100% { transform: scale(3); opacity: 0; } }
@keyframes ms-card-1 { 0% { opacity: .28; transform: translateY(8px); } 4.0%, 91.67% { opacity: 1; transform: none; } 100% { opacity: .28; transform: translateY(8px); } }
@keyframes ms-node-2 { 0%, 16.67% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } 19.17%, 91.67% { background: var(--accent-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 22%, transparent); } 100% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } }
@keyframes ms-ring-2 { 0%, 16.67% { transform: scale(1); opacity: 0; } 16.680000000000003% { transform: scale(1); opacity: .9; } 25.67%, 100% { transform: scale(3); opacity: 0; } }
@keyframes ms-card-2 { 0%, 16.67% { opacity: .28; transform: translateY(8px); } 20.67%, 91.67% { opacity: 1; transform: none; } 100% { opacity: .28; transform: translateY(8px); } }
@keyframes ms-node-3 { 0%, 33.33% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } 35.83%, 91.67% { background: var(--accent-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 22%, transparent); } 100% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } }
@keyframes ms-ring-3 { 0%, 33.33% { transform: scale(1); opacity: 0; } 33.339999999999996% { transform: scale(1); opacity: .9; } 42.33%, 100% { transform: scale(3); opacity: 0; } }
@keyframes ms-card-3 { 0%, 33.33% { opacity: .28; transform: translateY(8px); } 37.33%, 91.67% { opacity: 1; transform: none; } 100% { opacity: .28; transform: translateY(8px); } }
@keyframes ms-node-4 { 0%, 50.0% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } 52.5%, 91.67% { background: var(--accent-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 22%, transparent); } 100% { background: var(--paper); box-shadow: 0 0 0 0 transparent; } }
@keyframes ms-ring-4 { 0%, 50.0% { transform: scale(1); opacity: 0; } 50.01% { transform: scale(1); opacity: .9; } 59.0%, 100% { transform: scale(3); opacity: 0; } }
@keyframes ms-card-4 { 0%, 50.0% { opacity: .28; transform: translateY(8px); } 54.0%, 91.67% { opacity: 1; transform: none; } 100% { opacity: .28; transform: translateY(8px); } }
@media (max-width: 760px) {
  .ms-rail .milestones { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .ms-rail .milestones li { padding: 12px 0 18px 30px; }
  .ms-rail .milestones li::before, .ms-rail .milestones li::after { top: 18px; left: 0; }
  .ms-track { top: 18px; bottom: calc(25% - 18px); left: 5px; width: 2px; height: auto; }
  .ms-track i { transform-origin: center top; animation-name: ms-draw-y; }
  @keyframes ms-draw-y {
    0%, 8.33% { transform: scaleY(0); opacity: 1; }
    16.67%, 25% { transform: scaleY(.3333); }
    33.33%, 41.67% { transform: scaleY(.6667); }
    50%, 91.67% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
  }
}

/* ---------- alumni case note ---------- */
.alumni-case { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 8px; }
.alumni-case p { margin: 0; font-size: 14px; color: var(--ink-2); }
.alumni-case .alumni-why { color: var(--accent); font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; }

/* ---------- AHL4SS scorecard ---------- */
.view-tabs { margin-top: 24px; }
.ahl-summary { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 20px; }
@media (max-width: 900px) { .ahl-summary { grid-template-columns: 1fr 1fr; } .ahl-summary .ahl-hero { grid-column: 1 / -1; } }
.ahl-summary > div { background: var(--paper-2); padding: 16px; display: grid; gap: 6px; align-content: start; }
.ahl-summary strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; }
.ahl-hero strong { color: var(--accent); font-size: clamp(44px, 6vw, 72px); }
.ahl-summary span { font-size: 13px; color: var(--ink-3); }
.ahl-bar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.ahl-bar i { display: block; height: 100%; background: var(--accent-gold); }
.ahl-matrix { display: grid; gap: 24px; margin-top: 28px; }
.ahl-level h3 { font-size: 24px; margin: 0 0 8px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ahl-level h3 .mono { font-size: 12px; color: var(--ink-3); }
.ahl-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
@media (max-width: 600px) { .ahl-row { grid-template-columns: 1fr; } }
.ahl-status { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--font-mono); letter-spacing: .08em; align-self: start; padding-top: 3px; }
.ahl-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 25%, transparent); }
.ahl-status[data-s="GREEN"] { --dot: #2f9e57; } .ahl-status[data-s="ORANGE"] { --dot: #e08a1e; } .ahl-status[data-s="RED"] { --dot: #d1432f; }
.ahl-row strong { font-weight: 500; }
.ahl-row p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.ahl-row .ahl-action { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }

/* =====================================================================================================================
   Iteration 4: mark colour, hero hook, manifesto lockup, drafting panel, countdown centring, anchor, readiness,
   pagination dots, deadlines directory, Hourglass funnel, Scholar Portal.
   ===================================================================================================================== */

/* Marks inherit currentColor: Archival Ochre in dark mode, high-contrast ink in light mode. */
:root { --mark: var(--accent-gold); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --mark: var(--text-primary); } }
:root[data-theme="light"] { --mark: var(--text-primary); }
.mark { color: var(--mark); }

/* Hero: "Become before you get in." is the monumental hook. */
.hero h1.hero-hook { font-size: clamp(52px, 10.5vw, 168px); line-height: .92; letter-spacing: -0.02em; max-width: 13ch; }
.hero h1.hero-hook em { display: block; }
.hero .lede { max-width: 46ch; }

/* Primary manifesto lockup: display headline + secondary cadence. */
.manifesto { display: flex; flex-direction: column; gap: 10px; }
.manifesto-head { display: block; }
.manifesto-cadence { display: block; font-style: italic; font-size: .52em; line-height: 1.1; color: var(--accent); }

/* ---------- technical drafting panel ---------- */
.draft-panel { margin-top: 20px; border: 1px solid var(--rule); background: var(--paper-2); }
.draft-modes { display: flex; border-bottom: 1px solid var(--rule); overflow-x: auto; }
.draft-modes button { flex: 1 0 auto; min-height: 44px; padding: 0 16px; background: none; border: 0; border-right: 1px solid var(--rule); color: var(--ink-3); font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.draft-modes button:last-child { border-right: 0; }
.draft-modes button[aria-selected="true"] { color: var(--ink); background: var(--paper-3); box-shadow: inset 0 -2px 0 var(--accent-gold); }
.draft-stage { position: relative; display: grid; place-items: center; padding: clamp(12px, 3vw, 28px); min-height: 220px;
  background-image: linear-gradient(color-mix(in srgb, #C89D5C 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #C89D5C 10%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; }
.draft-svg { width: 100%; max-width: 640px; height: auto; overflow: visible; color: var(--mark); }
.draft-guides { fill: none; stroke: #C89D5C; stroke-opacity: .25; stroke-width: 1; vector-effect: non-scaling-stroke; }
.draft-guides * { vector-effect: non-scaling-stroke; }
.draft-guides .dg-axis { stroke-opacity: .45; stroke-dasharray: 6 5; }
.draft-guides .dg-dash { stroke-dasharray: 3 4; }
.draft-guides .dg-dot { fill: #C89D5C; fill-opacity: .6; stroke: none; }
.draft-labels { font: 500 13px var(--font-mono); fill: #C89D5C; fill-opacity: .75; letter-spacing: .04em; }
.draft-mark { fill: currentColor; stroke: currentColor; stroke-width: 0; stroke-linejoin: round; transition: opacity .3s; }
.draft-panel .scale-frame { display: none; }
.draft-panel[data-mode="drafting"] .draft-mark { opacity: .9; }
.draft-panel[data-mode="drafting"] .draft-guides { stroke-opacity: .25; mix-blend-mode: normal; }
.draft-panel .draft-labels { paint-order: stroke; stroke: var(--paper-2); stroke-width: 3px; stroke-linejoin: round; }
.draft-panel[data-mode="drafting"] .draft-guides { animation: draft-in 1.4s ease-out both; }
@keyframes draft-in { from { stroke-dashoffset: 600; opacity: 0; } to { opacity: 1; } }
.draft-panel[data-mode="weight"] .draft-guides, .draft-panel[data-mode="weight"] .draft-labels { opacity: .35; }
.draft-panel[data-mode="weight"] .draft-mark { animation: weight-axis 6s ease-in-out infinite alternate; }
@keyframes weight-axis {
  0%, 12% { stroke-width: 1px; fill-opacity: 0; }
  42% { stroke-width: 1px; fill-opacity: 1; }
  100% { stroke-width: 28px; fill-opacity: 1; }
}
.draft-panel[data-mode="scale"] .draft-svg { display: none; }
.draft-panel[data-mode="scale"] .scale-frame { display: grid; }
.weight-scale { display: none; align-items: center; gap: 12px; padding: 0 16px 12px; font: 500 11px var(--font-mono); color: var(--ink-3); }
.draft-panel[data-mode="weight"] .weight-scale { display: flex; }
.weight-scale i { position: relative; flex: 1; height: 2px; background: var(--rule); overflow: hidden; }
.weight-scale b { position: absolute; inset: 0; background: var(--accent-gold); transform-origin: left; will-change: transform; animation: weight-meter 6s ease-in-out infinite alternate; }
@keyframes weight-meter { 0%, 12% { transform: scaleX(.02); } 42% { transform: scaleX(.1); } 100% { transform: scaleX(1); } }
.draft-caption { margin: 0; padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .draft-panel[data-mode="weight"] .draft-mark { animation: none; stroke-width: 10px; }
  .weight-scale b, .draft-panel[data-mode="drafting"] .draft-guides { animation: none; }
}

/* ---------- countdown: ring text optically centred in the ring ---------- */
.ring-wrap { position: relative; width: 96px; height: 96px; display: flex; justify-content: center; align-items: center; }
.ring-wrap .ring { position: absolute; inset: 0; }
.ring-wrap .ring-text { position: relative; inset: auto; width: auto; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.ring-wrap .ring-text strong { font-variant-numeric: tabular-nums lining-nums; margin-top: -2px; }
.anchor-deadline.is-closed .ring-text strong { color: var(--ink-3); }
.anchor-deadline .ring-label { line-height: 1.3; }
.anchor-deadline .anchor-head { align-items: center; }
.deadline-pick select { min-height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--ink); font: 500 13px var(--font-sans); cursor: pointer;
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.deadline-pick select option { color: #1a1a1a; }
.link-btn { align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; color: var(--accent); font: 500 14px var(--font-sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.link-btn:hover { color: var(--ink); }

/* ---------- Daily Anchor ---------- */
.anchor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.reflect-form { display: flex; flex-direction: column; gap: 14px; }
.reflect-form textarea { min-height: 96px; resize: vertical; }
.reflect-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.reflect-foot .mono { font-size: 12px; color: var(--ink-3); }
.archive { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.archive li { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.archive li:last-child { border-bottom: 0; }
.archive .mono { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.archive-q { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.25; }
.archive-r { margin: 0; color: var(--ink-2); padding-left: 12px; border-left: 2px solid var(--accent-gold); }

/* ---------- readiness: sample vs live ---------- */
.ready-mode { margin-left: 8px; padding: 2px 8px; border: 1px dashed var(--rule-strong); border-radius: 999px; font-size: 10px; color: var(--ink-3); }
.anchor-readiness.is-live .ready-mode { border-style: solid; border-color: var(--accent-gold); color: var(--accent); }
.anchor-readiness:not(.is-live) .seg button.is-on { opacity: .7; }
.anchor-readiness .btn { align-self: flex-start; }

/* ---------- pagination dots (buttons, 44px hit area) ---------- */
.dots button { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dots button::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--rule-strong); opacity: .35; transition: width .25s, opacity .25s, background .25s; }
.dots button::after { content: ""; position: absolute; inset: -11px -4px; }
.dots button.is-on::before { width: 18px; opacity: 1; background: var(--accent-gold); }

/* ---------- deadlines directory ---------- */
.dl-tools { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; z-index: 1; background: var(--paper-2); padding-bottom: 12px; }
.dl-count { font-size: 12px; color: var(--ink-3); margin: 4px 0 12px; }
.dl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.dl-card { background: var(--paper-2); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dl-head h3 { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.1; }
.dl-date { font-size: 12px; color: var(--accent); white-space: nowrap; }
.dl-date.is-closed { color: var(--ink-3); }
.dl-programs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-programs li { padding: 10px 12px; background: var(--paper-3); border-left: 2px solid var(--accent-gold); }
.dl-programs li.is-closed { opacity: .55; border-left-color: var(--rule-strong); }
.dl-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dl-prog-top strong { font-weight: 600; font-size: 14px; }
.dl-prog-top .mono { font-size: 12px; color: var(--accent); white-space: nowrap; }
.dl-programs p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.dl-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.dl-card dt { font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding-top: 3px; }
.dl-card dd { margin: 0; color: var(--ink-2); }

/* ---------- admin: view navigation + Hourglass funnel ---------- */
.view-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; text-decoration: none; color: var(--ink-3); border-bottom: 2px solid transparent; font-weight: 500; }
.view-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent-gold); }
.view-tabs a.view-out { margin-left: auto; }
.funnel-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: start; }
@media (max-width: 900px) { .funnel-layout { grid-template-columns: 1fr; } }
.hourglass { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hg-stage { display: grid; gap: 4px; }
.hg-band { --c: #C89D5C; position: relative; display: flex; justify-content: center; align-items: baseline; gap: 10px; min-height: 48px; padding: 12px 0 0;
  color: #161615; isolation: isolate; white-space: nowrap; }
.hg-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c);
  clip-path: polygon(calc((100% - var(--top)) / 2) 0, calc(100% - (100% - var(--top)) / 2) 0, calc(100% - (100% - var(--bottom)) / 2) 100%, calc((100% - var(--bottom)) / 2) 100%); }
.hg-marketing .hg-band { --c: #C89D5C; }
.hg-pivot .hg-band { --c: #f3f2ee; }
.hg-support .hg-band { --c: color-mix(in srgb, #C89D5C 62%, #161615); color: #ede8e1; }
:root[data-theme="light"] .hg-pivot .hg-band { --c: #1a1a1a; color: #ede8e1; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .hg-pivot .hg-band { --c: #1a1a1a; color: #ede8e1; } }
.hg-num { font-size: 11px; opacity: .7; }
.hg-label { font-weight: 600; font-size: 15px; }
.hg-n { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.hg-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; text-align: center; font-size: 12px; color: var(--ink-3); padding: 0 8px 6px; }
.hg-conv { color: var(--ink-2); }
.hg-conv.is-below { color: var(--alert); }
.hg-def { max-width: 52ch; }
@media (max-width: 560px) { .hg-num { display: none; } .hg-def { display: none; } .hg-n { font-size: 22px; } .hg-label { font-size: 14px; } }
.funnel-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 560px) { .funnel-highlights { grid-template-columns: 1fr; } }
.funnel-sub { font: 500 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 24px 0 10px; }
.advice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.advice-item { border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); padding: 12px 14px; background: var(--paper-2); }
.advice-item .mono { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.advice-item p { margin: 4px 0 0; }
.advice-item.sev-high { border-left-color: var(--alert); }
.advice-item.sev-medium { border-left-color: var(--accent-gold); }
.funnel-people ul { list-style: none; margin: 0; padding: 0; }
.funnel-people li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }

/* ---------- Scholar Portal ---------- */
.portal-shell { padding-top: 40px; padding-bottom: 80px; }
.portal-title { margin: 12px 0 28px; }
.portal-gate { max-width: 56ch; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 760px) { .portal-grid { grid-template-columns: 1fr; } }
.portal-card { background: var(--paper-2); padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.portal-ready, .portal-ms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.portal-ready li { display: grid; grid-template-columns: minmax(0, 1fr) 1.2fr auto; gap: 12px; align-items: center; }
.portal-ready .mono, .portal-ms .mono { font-size: 12px; color: var(--ink-3); }
.portal-ms li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.portal-ms li.ms-paid strong { color: var(--accent); }
.portal-ds { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-gate[hidden], .portal-grid[hidden] { display: none; }

/* =====================================================================================================================
   Iteration 6–7: warm canvas, chromatic hero with a submerged reveal, upright About title, baseline-locked navbar
   region switcher, unified 520 × 280 brand engine (sequential drafting construction, master-20 weight axis, twin mark
   at every scale with optical sizing), 3-column dashboard, alumni carousel + letter drawer, strategies archive.
   ===================================================================================================================== */

/* Hero: "Become" in ink, "before you get in." in Archival Ochre, upright, no comma. */
.hero h1.hero-hook { max-width: none; }
.hero h1.hero-hook .headline-ink, .hero h1.hero-hook .headline-gold { display: block; font-style: normal; text-wrap: balance; }
.hero h1.hero-hook .headline-gold { white-space: nowrap; }
@media (max-width: 640px) { .hero h1.hero-hook .headline-gold { white-space: normal; } }
.headline-ink { color: var(--text-primary); }
.headline-gold { color: var(--accent-gold); }
/* Headline motion: assets/motion.js plays Emerge on .line-roll with the Web Animations API. Each line sits in a mask clipped to its own box (overflow + clip-path: inset(0)); the .14em padding keeps
   the resting descenders whole, and the 140 % travel puts every ascender and descender outside the box while hidden. */
.hero h1.hero-hook .line-mask { display: block; overflow: hidden; overflow: clip; clip-path: inset(0 0 0 0); padding-bottom: .14em; margin-bottom: -.14em; }
/* "Become" has no descenders, so its mask stops at its own line box and never reaches into the gold line. */
.hero h1.hero-hook .line-mask:first-child { padding-bottom: 0; margin-bottom: 0; }
.hero h1.hero-hook .line-roll { display: block; position: relative; will-change: transform; }
.hero-hook-sm { font-style: normal; }
.hero-hook-sm span { display: block; }
.cta-band .hero-hook-sm .headline-ink, .cta-band .hero-hook-sm .headline-gold { color: #161615; }
.cta-band .hero-hook-sm .headline-gold { font-style: italic; }

/* About: an authoritative upright Roman serif. */
.about-title { font-style: normal; font-weight: 500; letter-spacing: -0.01em; }
.strategies-cta { margin-top: 28px; }

/* Navbar lockup: wordmark + ochre-locked mark + region switcher on one typographic baseline. The mask holds an invisible
   in-flow sizer ("UK & EUROPE"), so its width fits the longest region and its baseline is a real line of the same
   font, size and line-height as IVYLEAD; the rotating track is absolutely positioned on top and clipped. */
.nav-brand-lockup { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.brand-name, .nav-wordmark, .brand-wordmark-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0.14em; color: var(--text-primary, #EDE8E1); text-transform: uppercase; display: inline-block; vertical-align: baseline; line-height: 1; }
.brand-name span { font-family: 'Space Grotesk', var(--font-sans); font-weight: 400; letter-spacing: 0.16em; font-size: 0.8rem; }
.site-head .mark--nav, .site-foot .mark--nav { color: #C89D5C; }
/* Continent ticker (app.js regionTranslations): the Latin names keep the thin Space Grotesk the switcher has always used
   (400, .8rem, .16em, 80 % opacity). The mask window is one --region-pitch tall (the line plus room above and below for
   Ge'ez, Devanagari and Arabic marks), pulled back by negative margins so the line box stays 1em. Each slide holds a Space
   Grotesk strut; the script text sits on it with line-height 0, so every script shares IVYLEAD's baseline. */
.region-switcher-mask { --region-pitch: 1.6em; position: relative; display: inline-block; height: var(--region-pitch); margin: -.3em 0;
  overflow: hidden; overflow: clip; vertical-align: baseline; line-height: 1; color: var(--text-primary); opacity: 0.8; }
.nav-region-latin { font-family: 'Space Grotesk', var(--font-sans); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.16em; line-height: 1; }
.region-sizer { display: block; visibility: hidden; padding-top: .3em; white-space: nowrap; }
.region-switcher-track { position: absolute; left: 0; top: 0; display: block; animation: region-cycle 12s cubic-bezier(.65, 0, .35, 1) infinite; will-change: transform; }
.region-switcher-track.is-scripted { animation: none; }
.region-switcher-slide { display: block; height: var(--region-pitch); padding-top: .3em; box-sizing: border-box; line-height: 1; white-space: nowrap; }
.region-glyphs { line-height: 0; vertical-align: baseline; }
.font-latin { font-family: 'Space Grotesk', var(--font-sans); font-weight: 400; }
/* The non-Latin scripts are set a little larger than the thin Latin caps so they read at the same visual weight. */
.region-glyphs:not(.font-latin) { font-size: 1.15em; }
.font-ethiopic { font-family: 'Noto Sans Ethiopic', sans-serif; font-weight: 500; }
.font-tifinagh { font-family: 'Noto Sans Tifinagh', sans-serif; }
.font-cairo { font-family: 'Cairo', sans-serif; font-weight: 600; }
.font-noto-tc { font-family: 'Noto Sans TC', sans-serif; font-weight: 500; }
.font-mochiy { font-family: 'Mochiy Pop One', sans-serif; }
.font-teko { font-family: 'Teko', sans-serif; font-weight: 500; }
@keyframes region-cycle {
  0%, 29.17% { transform: translateY(0); }
  33.33%, 62.5% { transform: translateY(calc(-1 * var(--region-pitch))); }
  66.67%, 95.83% { transform: translateY(calc(-2 * var(--region-pitch))); }
  100% { transform: translateY(calc(-3 * var(--region-pitch))); }
}
@media (max-width: 520px) { .region-switcher-mask { display: none; } }
@media (prefers-reduced-motion: reduce) { .region-switcher-track { animation: none; } }

/* Antique bronze: active tab indicators and badges. */
.draft-modes button[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--accent-bronze); }
.combo-badge, .ready-mode { border-color: var(--accent-bronze); }

/* ---------- brand engine: one 520 × 280 frame for Drafting, Weight axis and Scale ---------- */
.draft-stage { width: 100%; max-width: 520px; aspect-ratio: 520 / 280; margin: clamp(12px, 3vw, 24px) auto; padding: 0; min-height: 0; background-image: none; isolation: isolate; }
.draft-stage::before { content: ""; position: absolute; inset: 0; z-index: -1;      /* quiet slate grid, never ochre */
  background-image: linear-gradient(rgba(126, 130, 135, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 130, 135, 0.12) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; }
.draft-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* Drafting: a construction told in order. app.js adds s1 … s5 to the svg on a 13.6 s loop:
   1 symmetry axes · 2 bounding box + baselines · 3 spiral centres · 4 r 81.28 arcs, then the 0.5× r 40.64 guides ·
   5 the twin ram grows from its skeleton · 3 s hold · fade (ds-out) · snap back (ds-snap). */
.draft-panel[data-mode="drafting"] .draft-guides { animation: none; stroke-opacity: .7; }
.draft-guides > *, .draft-labels > * { transform-box: fill-box; transform-origin: center;
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1), stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1); }
.draft-panel[data-mode="drafting"] .draft-guides > *, .draft-panel[data-mode="drafting"] .draft-labels > * { opacity: 0; }
.draft-panel[data-mode="drafting"] .ds-ax-h, .draft-panel[data-mode="drafting"] .ds-box-h, .draft-panel[data-mode="drafting"] .ds-ctr-h { transform: scaleX(0); }
.draft-panel[data-mode="drafting"] .ds-ax-v, .draft-panel[data-mode="drafting"] .ds-box-v, .draft-panel[data-mode="drafting"] .ds-ctr-v { transform: scaleY(0); }
.draft-panel[data-mode="drafting"] .ds-ax-d, .draft-panel[data-mode="drafting"] .ds-ax-c, .draft-panel[data-mode="drafting"] .ds-ctr { transform: scale(0); }
.draft-panel[data-mode="drafting"] .ds-box { transform: scale(.94); }
.draft-panel[data-mode="drafting"] .ds-half { transform: scale(.2); }
.draft-panel[data-mode="drafting"] .draft-labels > * { transform: translateY(6px); }
.ds-arc { vector-effect: none !important; stroke-width: 1.6; }
.draft-panel[data-mode="drafting"] .ds-arc { stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); }
.draft-panel[data-mode="drafting"] .ds-arc-r { transform: rotate(90deg); }          /* the right arc starts opposite: point symmetry */
.draft-svg.s1 :is(.ds-ax-h, .ds-ax-v, .ds-ax-d, .ds-ax-c, .ds-l1),
.draft-svg.s2 :is(.ds-box, .ds-box-h, .ds-box-v, .ds-l2),
.draft-svg.s3 :is(.ds-ctr, .ds-ctr-h, .ds-ctr-v),
.draft-svg.s4 :is(.ds-half, .ds-l4) { opacity: 1; transform: none; }
.draft-svg.s3 .ds-ctr { transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); }
.draft-svg.s4 .ds-arc { opacity: 1; stroke-dashoffset: 0; }
.draft-svg.s4 :is(.ds-half, .ds-l4b) { transition-delay: 1.1s; }
/* Step 5: the twin ram grows from its skeleton (the erode mask relaxes 20 → 0). The r 81.28 arcs and the 0.5× guides
   dissolve the moment their drawing pass is done (circles-out, opacity 0 over 0.6 s), and the rest of the construction
   falls away (s6) so it is gone exactly as the master strokes complete: only the finished mark remains. */
.draft-mark { opacity: .92; }
.draft-panel[data-mode="drafting"] .draft-mark { mask: url(#erode-mask); opacity: 0; transition: opacity .5s ease; }
.draft-panel[data-mode="drafting"] .erode-use { stroke-width: 20px; transition: stroke-width 3s cubic-bezier(.45, 0, .2, 1); }
.draft-panel[data-mode="drafting"] .draft-svg.s5 .draft-mark { opacity: .92; }
.draft-panel[data-mode="drafting"] .draft-svg.s5 .erode-use { stroke-width: 0px; }
.draft-panel[data-mode="drafting"] .draft-svg.circles-out :is(.ds-arc, .ds-half, .ds-l4) { opacity: 0; transition: opacity .6s ease; transition-delay: 0s; }
.draft-panel[data-mode="drafting"] .draft-svg.s6 :is(.draft-guides, .draft-labels) { opacity: 0; transition: opacity .6s ease; }
.draft-svg > g, .draft-svg > .draft-mark { transition: opacity .9s ease; }
.draft-panel[data-mode="drafting"] .draft-svg.ds-out > g, .draft-panel[data-mode="drafting"] .draft-svg.ds-out > .draft-mark { opacity: 0; }
.draft-svg.ds-snap *, .draft-svg.ds-snap > * { transition: none !important; }

/* Weight axis: the master drawing is the heaviest state, a 20-unit line. Lighter weights extrapolate down to Hairline 5
   by eroding the master outline evenly from both edges (mask stroke = 20 − w), so terminals thin in step with the spiral
   body and every counter widens. One continuous ease, no holds, no notches. */
.erode-use { color: #fff; stroke: #000; stroke-width: 0; stroke-linejoin: round; }
.draft-panel[data-mode="weight"] .draft-mark { animation: none; stroke-width: 0; mask: url(#erode-mask); opacity: .95; }
.draft-panel[data-mode="weight"] .erode-use { animation: weight-erode 8s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes weight-erode { from { stroke-width: 15px; } to { stroke-width: 0px; } }       /* Hairline 5 → Master 20 (mask stroke = 20 − w) */
.weight-scale i { overflow: hidden; }
.weight-scale b { animation: weight-meter 8s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes weight-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ws-now { font-weight: 500; color: var(--accent); min-width: 8ch; text-align: right; font-variant-numeric: tabular-nums; }

/* Scale: the twin mark at every size, 520 × 280 → 96 → 48 → 32 → 24 px. Optical sizing: as it shrinks, a mask trims the
   line (20 → 18 → 16 → 15 → 14 units) so the spiral counters stay open instead of closing up at small pixel sizes. */
.draft-panel .scale-frame { position: absolute; inset: 0; width: auto; height: auto; border: 0; background-color: transparent; }
.draft-panel .scale-frame { background-image: none; }                 /* no ochre pixel grid or crosshair: the slate stage grid only */
.draft-panel .scale-frame::before, .draft-panel .scale-frame::after { display: none; }
.draft-panel .scale-frame .mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: auto; z-index: 1; color: var(--mark); }
/* 390 → 288 → 224 → 192 → 160 → 128 pt, then 96 → 64 → 48 → 32 → 24 → 18 px, and the same steps back (alternate, 16 s a
   pass). The pt steps are proportional to the 390 pt master as drawn in this frame (390 pt = 520 × 280); the px steps are
   literal pixels. --mw (registered, so it interpolates) sizes both the mark and its grid. Line: 20 → … → 19 → 18 … 13. */
@property --mw { syntax: '<length>'; inherits: true; initial-value: 488px; }
.draft-stage { container-type: inline-size; }
.draft-panel .scale-frame { --mw: calc(100cqw - 32px); animation: sf-scale 16s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
.scale-frame .sf-twin { aspect-ratio: 520 / 280; width: var(--mw); animation: none; }
.opsz-use { color: #fff; stroke: #000; stroke-width: 0; stroke-linejoin: round; animation: opsz-trim 16s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
/* Bracketing grid: the cell is a quarter of the mark's height and the grid is centred on the mark, so its boundary lines
   always run along the top and bottom of the mark; as the mark shrinks the cells shrink with it and the grid densifies. */
.sf-grid { --cell: calc(var(--mw) * 280 / 520 / 4); position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none;
  width: calc(2 * round(up, 51cqw, var(--cell))); height: calc(2 * round(up, 28cqw, var(--cell)));
  background-image: linear-gradient(rgba(126, 130, 135, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 130, 135, 0.12) 1px, transparent 1px);
  background-size: var(--cell) var(--cell); }
.draft-panel[data-mode="scale"] .draft-stage::before { opacity: 0; }
@keyframes sf-scale {
  0%, 3.75% { --mw: calc(100cqw - 32px); }
  7.75%, 12.6% { --mw: max(calc((100cqw - 32px) * 0.7385), 160px); }
  16.6%, 21.45% { --mw: max(calc((100cqw - 32px) * 0.5744), 140px); }
  25.45%, 30.3% { --mw: max(calc((100cqw - 32px) * 0.4923), 128px); }
  34.3%, 39.15% { --mw: max(calc((100cqw - 32px) * 0.4103), 116px); }
  43.15%, 48% { --mw: max(calc((100cqw - 32px) * 0.3282), 104px); }
  52%, 56.85% { --mw: 96px; }
  60.85%, 65.7% { --mw: 64px; }
  69.7%, 74.55% { --mw: 48px; }
  78.55%, 83.4% { --mw: 32px; }
  87.4%, 92.25% { --mw: 24px; }
  96.25%, 100% { --mw: 18px; }
}
@keyframes opsz-trim {
  0%, 3.75% { stroke-width: 0px; }
  7.75%, 12.6% { stroke-width: 0px; }
  16.6%, 21.45% { stroke-width: 0px; }
  25.45%, 30.3% { stroke-width: 0px; }
  34.3%, 39.15% { stroke-width: 0px; }
  43.15%, 48% { stroke-width: 1px; }
  52%, 56.85% { stroke-width: 2px; }
  60.85%, 65.7% { stroke-width: 3px; }
  69.7%, 74.55% { stroke-width: 4px; }
  78.55%, 83.4% { stroke-width: 5px; }
  87.4%, 92.25% { stroke-width: 6px; }
  96.25%, 100% { stroke-width: 7px; }
}
.draft-panel .scale-readout { right: 10px; bottom: 8px; }
.draft-panel .scale-readout span { animation-duration: 16s; animation-direction: alternate; }
.draft-panel .scale-readout span:nth-child(1) { animation-name: sr1; }
.draft-panel .scale-readout span:nth-child(2) { animation-name: sr2; }
.draft-panel .scale-readout span:nth-child(3) { animation-name: sr3; }
.draft-panel .scale-readout span:nth-child(4) { animation-name: sr4; }
.draft-panel .scale-readout span:nth-child(5) { animation-name: sr5; }
.draft-panel .scale-readout span:nth-child(6) { animation-name: sr6; }
.draft-panel .scale-readout span:nth-child(7) { animation-name: sr7; }
.draft-panel .scale-readout span:nth-child(8) { animation-name: sr8; }
.draft-panel .scale-readout span:nth-child(9) { animation-name: sr9; }
.draft-panel .scale-readout span:nth-child(10) { animation-name: sr10; }
.draft-panel .scale-readout span:nth-child(11) { animation-name: sr11; }
.draft-panel .scale-readout span:nth-child(12) { animation-name: sr12; }
@keyframes sr1 { 0%, 5.75% { opacity: 1; } 5.76%, 100% { opacity: 0; } }
@keyframes sr2 { 0%, 5.75% { opacity: 0; } 5.76%, 14.6% { opacity: 1; } 14.61%, 100% { opacity: 0; } }
@keyframes sr3 { 0%, 14.6% { opacity: 0; } 14.61%, 23.45% { opacity: 1; } 23.46%, 100% { opacity: 0; } }
@keyframes sr4 { 0%, 23.45% { opacity: 0; } 23.46%, 32.3% { opacity: 1; } 32.31%, 100% { opacity: 0; } }
@keyframes sr5 { 0%, 32.3% { opacity: 0; } 32.31%, 41.15% { opacity: 1; } 41.16%, 100% { opacity: 0; } }
@keyframes sr6 { 0%, 41.15% { opacity: 0; } 41.16%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes sr7 { 0%, 50% { opacity: 0; } 50.01%, 58.85% { opacity: 1; } 58.86%, 100% { opacity: 0; } }
@keyframes sr8 { 0%, 58.85% { opacity: 0; } 58.86%, 67.7% { opacity: 1; } 67.71%, 100% { opacity: 0; } }
@keyframes sr9 { 0%, 67.7% { opacity: 0; } 67.71%, 76.55% { opacity: 1; } 76.56%, 100% { opacity: 0; } }
@keyframes sr10 { 0%, 76.55% { opacity: 0; } 76.56%, 85.4% { opacity: 1; } 85.41%, 100% { opacity: 0; } }
@keyframes sr11 { 0%, 85.4% { opacity: 0; } 85.41%, 94.25% { opacity: 1; } 94.26%, 100% { opacity: 0; } }
@keyframes sr12 { 0%, 94.25% { opacity: 0; } 94.26%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .draft-panel .scale-frame { animation: none; }
  .opsz-use { animation: none; }
  .draft-panel .scale-readout span:nth-child(1) { opacity: 1; }
  .draft-panel[data-mode="weight"] .erode-use { animation: none; stroke-width: 8px; }
}


/* ---------- dashboard: three equal columns that cannot blow out ---------- */
.anchor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; background: none; border: 0; }
@media (max-width: 1000px) { .anchor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .anchor-grid { grid-template-columns: minmax(0, 1fr); } }
.anchor-card { border: 1px solid var(--rule); min-width: 0; width: 100%; box-sizing: border-box; }
.dashboard-col-deadline { min-width: 0; width: 100%; }
.dashboard-col-deadline > * { min-width: 0; max-width: 100%; }
.dashboard-col-deadline .anchor-head { flex-wrap: wrap; }
.dashboard-col-deadline .deadline-pick { flex: 1 1 12rem; min-width: 0; max-width: 100%; }
.dashboard-col-deadline select, .deadline-program-select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* ---------- alumni: the pillar carousel architecture, ochre hairline cards, no dead space ---------- */
.carousel--alumni { align-items: start; }
.carousel--alumni .alumni-card { border: 1px solid rgba(200, 157, 92, 0.25); justify-content: space-between; min-height: 0; }
.carousel--alumni .alumni-card blockquote { flex: none; }
.alumni-case-line { margin: 0; font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 12px; }
.alumni-more { align-self: flex-start; }
.endorse .alumni-more { margin-top: 12px; }

/* Slide-over letter drawer (bottom sheet on phones, right-hand drawer from 760 px). */
.letter p { font-size: 16px; line-height: 1.65; max-width: 64ch; }
.letter .letter-meta { font-size: 12px; color: var(--accent); letter-spacing: .02em; margin-top: -6px; }
.letter .letter-note { font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 12px; }
.letter-case { margin-top: 24px; border-left: 2px solid var(--accent-gold); padding: 4px 0 4px 16px; display: grid; gap: 8px; }
.letter-case p { margin: 0; font-size: 15px; }
.letter-case .alumni-why { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }
@media (min-width: 760px) {
  dialog.sheet--drawer { inset: 0 0 0 auto; margin: 0; width: min(600px, 100%); max-width: none; height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0; border: 0; border-left: 1px solid var(--rule); }
  dialog.sheet--drawer[open] { animation: drawer-in .32s cubic-bezier(.2, .8, .2, 1); }
  dialog.sheet--drawer .sheet-grip { display: none; }
}
@keyframes drawer-in { from { transform: translateX(100%); } }
@media (max-width: 759px) { dialog.sheet--drawer { height: 92vh; height: 92dvh; max-height: none; } }

/* ---------- deadlines directory: requirements + official source per program ---------- */
.dl-programs .dl-req { color: var(--ink-2); }
.dl-src { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--accent); }

/* ---------- strategies archive ---------- */
.strat-lede { margin-top: 24px; color: var(--ink-2); }
.strat-toc { margin-top: 32px; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.strat-toc a { display: flex; gap: 14px; align-items: center; min-height: var(--tap); padding: 10px 16px; background: var(--paper-2); color: var(--ink); text-decoration: none; }
.strat-toc a:hover { color: var(--accent); }
.strat-toc .mono { font-size: 12px; color: var(--accent); }
.strat-body { max-width: 72ch; }
.strat-body h2 { font-style: normal; margin-bottom: 20px; }
.strat-body p { color: var(--ink-2); }
.strat-quote { margin: 24px 0; padding-left: 20px; border-left: 2px solid var(--accent-gold); font-family: var(--font-display); font-style: italic; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.4; color: var(--ink); }
.strat-rules { padding-left: 1.2em; display: grid; gap: 12px; margin: 16px 0; color: var(--ink-2); }
.strat-rules strong { color: var(--ink); font-weight: 600; }
.strat-ref { font-size: 12px; color: var(--ink-3); }

/* =====================================================================================================================
   Iteration 8: faint dividers, calligraphic single ram, 16:9 presentation banner.
   ===================================================================================================================== */

/* Dividers: less is more. Horizontal rules only; boxes and form fields keep their borders for legibility. */
:root { --divider: rgba(255, 255, 255, 0.05); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --divider: rgba(200, 157, 92, 0.08); } }
:root[data-theme="light"] { --divider: rgba(200, 157, 92, 0.08); }
.site-head { border-bottom-color: var(--divider); }
.section, .site-foot, .faq, .campus-acc, .semiotics, .ticker, .pillars, .alumni, .matrix th, .matrix td, .matrix thead th,
.field, .field:first-of-type, .submit-row, .result, .intake-aside .meta-list, .choices { border-top-color: var(--divider); }
.faq details, .campus-acc details, .semiotics article, .alumni figure, .intake-aside .meta-list li, .choice, .draft-caption { border-bottom-color: var(--divider); }
.draft-caption { border-top-color: var(--divider); }
hr { border: 0; border-top: 1px solid var(--divider); }

/* Operational Standard: the single ram is completely static (no draw, scale, pulse or rotation). It takes the band's ink
   through currentColor: #161615 on the ochre band in dark mode, #1C1917 in light mode. (An ochre ram would vanish into the
   ochre band, so the band's ink is used.) */
.operational-standard-visual svg.ram-static { color: currentColor; animation: none; transition: none; }
.operational-standard-visual { color: #161615; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .operational-standard-visual { color: #1C1917; } }
:root[data-theme="light"] .operational-standard-visual { color: #1C1917; }

/* ---------- /banner: 16:9 presentation stage ---------- */
.page-banner { background: #161615; color: #ede8e1; min-height: 100vh; min-height: 100dvh; }
.banner-page { display: grid; gap: 20px; justify-items: center; padding: clamp(12px, 3vw, 32px); }
.banner-stage { position: relative; width: 100%; max-width: 1920px; aspect-ratio: 16 / 9; background: #161615; overflow: hidden;
  container-type: inline-size; display: grid; place-items: center; outline: 1px solid rgba(255, 255, 255, 0.05); }
.banner-stage:fullscreen { max-width: none; width: min(100vw, 177.78vh); height: auto; margin: auto; outline: 0; }
.banner-stage::backdrop { background: #161615; }
/* The header lockup, scaled: the header's px / rem sizes restated in em (46 px mark, 12 px gap, 1.1rem wordmark, .8rem
   region, .5rem gap at a 16 px root) so one font-size scales the whole group as vectors and text, never as pixels. The
   stage centres the group; the region slot keeps the width of the longest name, so nothing shifts as the names change. */
.bn-brand { font-size: 2.9cqw; gap: .75em; --text-primary: #EDE8E1; color: #EDE8E1; }
.bn-brand .mark--nav { width: 2.875em; color: #C89D5C; }
.bn-brand .nav-brand-lockup { gap: .5em; }
.bn-brand .nav-wordmark { font-size: 1.1em; }
.bn-brand .nav-region-latin { font-size: .8em; }
.bn-brand .region-switcher-mask { display: inline-block; }
.banner-stage[data-scene="a"] .bn-brand { visibility: hidden; }
.bn-controls { width: 100%; max-width: 1920px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.page-banner .btn--ghost { color: #ede8e1; border-color: rgba(237, 232, 225, .4); }
.page-banner .btn:not(.btn--ghost) { background: #C89D5C; color: #161615; border-color: #C89D5C; }
.bn-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(237, 232, 225, .7); }
.bn-pick select { min-height: 40px; padding: 0 10px; background: transparent; color: #ede8e1; border: 1px solid rgba(237, 232, 225, .3); border-radius: 999px; font: 500 13px var(--font-sans); }
.bn-pick select option { color: #1a1a1a; }
.bn-note { flex-basis: 100%; margin: 0; font-size: 11px; color: rgba(237, 232, 225, .55); }

/* =====================================================================================================================
   Iteration 9: header cohort line, live-visitor monitor, 16:9 scene picker + video recorder.
   ===================================================================================================================== */
.cohort-strip { margin: 0; padding: 6px 16px; display: block; text-align: center; text-wrap: balance;
  font: 400 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ink-3); border-bottom: 1px solid var(--divider); }
.cohort-dot { display: inline-block; width: 5px; height: 5px; margin: 0 8px 1px 0; vertical-align: middle; border-radius: 50%; background: var(--accent-gold); }
@media (max-width: 420px) { .cohort-strip { font-size: 10px; letter-spacing: .02em; } }
/* Genesis Admin live monitor. */
.monitor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 16px; }
@media (max-width: 860px) { .monitor-grid { grid-template-columns: 1fr 1fr; } .monitor-pulse { grid-column: 1 / -1; order: 3; } }
.monitor-grid .kpi .mono { font-size: 11px; }
.monitor-live strong { color: var(--accent-gold); }
.monitor-pulse { margin: 0; padding: 16px; background: var(--paper-2); position: relative; min-width: 0; }
.monitor-pulse figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.pulse-chart { position: relative; margin-top: 8px; }
.pulse-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.pulse-grid { stroke: var(--rule); stroke-width: 1; }
.pulse-base { stroke: var(--rule-strong); stroke-width: 1; }
.pulse-tick { font: 10px var(--font-mono); fill: var(--ink-3); }
.pulse-line { fill: none; stroke: var(--accent-gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pulse-dot { fill: var(--accent-gold); stroke: var(--paper-2); stroke-width: 2; }
.pulse-cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.pulse-tip { position: absolute; top: -6px; translate: -50% -100%; padding: 4px 8px; white-space: nowrap; pointer-events: none;
  background: var(--paper); border: 1px solid var(--rule-strong); font: 11px var(--font-mono); color: var(--ink); }
.pulse-tip[hidden] { display: none; }
.pulse-table { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.pulse-table table { width: 100%; border-collapse: collapse; margin-top: 6px; font: 12px var(--font-mono); }
.pulse-table th, .pulse-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--rule); }
/* /banner scenes: the headline renders on a canvas over the stage; the lockup is live DOM. */
.bn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #161615; }
.bn-canvas[hidden] { display: none; }
.bn-record { font-weight: 600; }
.bn-record span { color: #a3261b; font-size: 11px; }
.bn-note code { font-size: 11px; color: rgba(237, 232, 225, .8); }
/* Live from dEX: conference dispatches (Home + About). */
.dex-live-num { display: inline-flex; align-items: center; gap: 8px; }
.dex-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); animation: pulse 2s infinite; }
.dex-label { display: block; font: 400 11px/1.5 var(--font-mono); letter-spacing: .06em; color: var(--ink-3); margin-top: 8px; }
.dex-bar { margin-top: 20px; }
.dex-gallery { margin-top: 24px; }
.dex-dispatch-card {
  position: relative;
  border-radius: 2px;
  border: 1px solid var(--border-subtle, rgba(200, 157, 92, 0.25));
  background-color: var(--card-bg, #1e1c1a);
  overflow: hidden;
  margin: 0;
}
.dex-dispatch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.dex-dispatch-card:hover .dex-dispatch-img {
  transform: scale(1.02);
}
.dex-dispatch-caption {
  padding: 0.85rem 1rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--text-muted, #7e8287);
  border-top: 1px solid var(--border-subtle, rgba(200, 157, 92, 0.15));
  background: var(--bg-surface, #1e1c1a);
}
.dex-cap-text { display: block; color: var(--text-secondary); }
.dex-cap-meta { display: block; margin-top: 4px; }
.dex-frame { overflow: hidden; aspect-ratio: var(--ar); }
/* One photo: a 16:9 editorial banner, the caption laid over its foot. */
.dex-gallery.is-single .dex-feature .dex-frame { aspect-ratio: 16 / 9; }
.dex-gallery.is-single .dex-dispatch-caption { position: absolute; left: 0; right: 0; bottom: 0; border-top: 0; color: #ede8e1;
  background: linear-gradient(to top, rgba(22, 22, 21, .88), rgba(22, 22, 21, 0)); padding-top: 2.5rem; }
.dex-gallery.is-single .dex-cap-text { color: #ede8e1; }
.dex-gallery.is-single .dex-cap-meta { color: rgba(237, 232, 225, .72); }
/* Several: one row on a shared height, each card as wide as its own ratio; native inertia + snapping. */
.dex-track { --dex-h: clamp(220px, 34vw, 400px); display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding-bottom: 8px; scrollbar-width: thin; }
.dex-track:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 4px; }
.dex-track .dex-dispatch-card { flex: none; display: grid; scroll-snap-align: start; }
.dex-track .dex-frame { height: min(var(--dex-h), calc(86vw / var(--ar))); }
.dex-track .dex-dispatch-caption { width: 0; min-width: 100%; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .dex-dispatch-img { transition: none; } .dex-live-dot { animation: none; } }
/* Admin: the dEX uploader and manager. */
.dex-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 16px 0 28px; }
@media (max-width: 760px) { .dex-form { grid-template-columns: 1fr; } }
.dex-drop { position: relative; display: grid; place-items: center; min-height: 240px; padding: 16px; text-align: center; cursor: pointer;
  border: 1px dashed var(--rule-strong); background: var(--paper-2); color: var(--ink-2); font-size: 14px; }
.dex-drop.is-over { border-color: var(--accent-gold); background: color-mix(in srgb, var(--accent-gold) 8%, var(--paper-2)); }
.dex-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dex-drop .mono { font-size: 11px; color: var(--ink-3); }
.dex-preview { max-width: 100%; max-height: 320px; object-fit: contain; }
.dex-drop.has-photo .dex-drop-text { display: none; }
.dex-fields { display: grid; gap: 12px; align-content: start; }
.dex-fields label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); }
.dex-fields select { min-height: 44px; padding: 0 10px; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule-strong); font: 500 14px var(--font-sans); }
.dex-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dex-manage-card { border: 1px solid var(--rule); background: var(--paper-2); display: grid; grid-template-rows: 160px auto auto; }
.dex-manage-card img { width: 100%; height: 160px; object-fit: cover; display: block; background: var(--paper-3); }
.dex-manage-card.is-hidden img { opacity: .4; }
.dex-manage-meta { padding: 10px 12px 0; font-size: 14px; }
.dex-manage-meta p { margin: 4px 0; color: var(--ink-2); }
.dex-manage-meta .mono { font-size: 11px; color: var(--ink-3); }
.dex-manage-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px 12px; }
.dex-delete { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 50%, transparent); }
.dex-bar[hidden] { display: none; }
.dex-preview[hidden] { display: none; }