/* ============================================================================
   CHARTER — Component & block styles. All values via tokens.css.
   ============================================================================ */

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--p-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  transition: background var(--motion-base) var(--ease), color var(--motion-base) var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3,h4 { font-family: var(--p-serif); font-weight: 600; line-height: var(--lh-snug); margin: 0; }
p { margin: 0; }

/* --- Utilities --------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--s-6); }
.measure { max-width: var(--measure); }
.serif { font-family: var(--p-serif); }
.sans  { font-family: var(--p-sans); }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.center{ text-align: center; }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.eyebrow {
  font-family: var(--p-sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--eyebrow-fg);
}
.overline {
  font-family: var(--p-sans); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint);
}
.italic-voice { font-family: var(--p-serif); font-style: italic; color: var(--text-muted); }

/* Double-rule divider — the charter signature */
.rule-double {
  border: 0; height: 0; margin: var(--s-6) 0;
  border-top: var(--rule-heavy) solid var(--rule);
  position: relative;
}
.rule-double::after {
  content: ""; position: absolute; left: 0; right: 0; top: 3px;
  border-top: var(--rule-hair) solid var(--rule-soft);
}
.rule-hair { border:0; border-top: var(--rule-hair) solid var(--rule-soft); margin: var(--s-5) 0; }

/* Section head with heavy rule + Roman index */
.section { padding-block: var(--s-9); }
.section-head { display: flex; align-items: flex-end; gap: var(--s-4);
  padding-bottom: var(--s-3); border-bottom: var(--rule-heavy) solid var(--rule);
  position: relative; margin-bottom: var(--s-7); }
.section-head::after {
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  border-top: var(--rule-hair) solid var(--rule-soft);
}
.section-index {
  font-family: var(--p-serif); font-style: italic; font-size: var(--t-lg);
  color: var(--index-fg); line-height: 1; flex: none;
}
.section-title { font-size: var(--t-xl); letter-spacing: -0.01em; flex: 1 1 auto; }
.section-kicker { font-family: var(--p-sans); font-size: var(--t-sm); color: var(--text-muted); flex: none; max-width: 30ch; text-align: right; }

/* --- Top bar (masthead controls) -------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg);
  border-bottom: var(--rule-heavy) solid var(--nav-rule);
  backdrop-filter: saturate(1.1);
}
.topbar::after { content:""; display:block; height:1px; background: var(--rule-soft); }
.topbar-inner { display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-3) var(--s-6); max-width: var(--container); margin: 0 auto; }
.brandmark { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brandmark .wordmark { font-family: var(--p-serif); font-weight: 700; font-size: var(--t-md);
  letter-spacing: 0.01em; line-height: 1; }
.brandmark .wordmark small { display:block; font-family: var(--p-sans); font-weight:600;
  font-size: var(--t-2xs); letter-spacing: var(--ls-wide); color: var(--text-muted); text-transform: uppercase; margin-top:2px; }
.topbar nav { display: flex; gap: var(--s-5); margin-left: var(--s-5); }
.topbar nav a { font-family: var(--p-sans); font-size: var(--t-sm); color: var(--text-muted);
  text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.topbar nav a:hover { color: var(--text); border-bottom-color: var(--accent); }
.topbar-controls { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }

/* Crest — clean CSS evocation of the ceremonial emblem: structural ring,
   an optically-centred upward triangle, and a small accent core at its centroid.
   The triangle's geometric centre (1/3 up from base) is aligned to the ring
   centre so it reads balanced, not bottom-heavy; consistent 1.5px ring weight. */
.crest { width: 30px; height: 30px; position: relative; flex: none; }
.crest .ring { position:absolute; inset:0; border: 1.5px solid var(--structural); border-radius: 50%; }
.crest .ring2 { position:absolute; inset:5px; border: 1px solid var(--rule-soft); border-radius: 50%; }
/* Upward triangle, apex up. height 11px → centroid sits 1/3 from base; nudge up
   so that centroid coincides with the 50% ring centre (translateY -1/6 of height). */
.crest .tri { position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%) translateY(-1.8px);
  width:0;height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-bottom: 11px solid var(--structural); }
/* Small accent core dot at the triangle's optical centre. */
.crest .core { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  width:4px; height:4px; background: var(--accent); border-radius:50%; }

/* Track switcher */
.track-switch { display: inline-flex; border: var(--rule-hair) solid var(--rule);
  border-radius: var(--r-md); overflow: hidden; }
.track-switch button {
  font-family: var(--p-sans); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 6px 10px; background: transparent; color: var(--text-muted);
  border: 0; border-right: var(--rule-hair) solid var(--rule-soft); cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.track-switch button:last-child { border-right: 0; }
.track-switch button:hover { color: var(--text); }
.track-switch button[aria-pressed="true"] { background: var(--accent); color: #fbf7ee; }

/* Theme toggle */
.theme-toggle {
  font-family: var(--p-sans); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 12px; background: transparent; color: var(--text);
  border: var(--rule-hair) solid var(--rule); border-radius: var(--r-md); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: border-color var(--motion-fast) var(--ease);
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .dot { width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid currentColor; }
[data-theme="dark"] .theme-toggle .dot { background: currentColor; }

/* --- Buttons ----------------------------------------------------------------- */
.btn {
  font-family: var(--p-sans); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em;
  padding: 11px 22px; border-radius: var(--r-md); border: var(--rule-hair) solid transparent;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease),
              border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-bg-h); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-ghost { background: transparent; color: var(--btn-ghost-fg); border-color: var(--btn-ghost-rule); }
.btn-ghost:hover { border-color: var(--btn-ghost-rule-h); color: var(--accent); }
.btn-ghost:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-sm { padding: 7px 14px; font-size: var(--t-xs); }

/* --- Tags / chips / badges --------------------------------------------------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--p-sans);
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-sm); background: var(--tag-bg); color: var(--tag-fg);
  border: 1px solid var(--tag-rule); }
.chip { display:inline-flex; font-family: var(--p-sans); font-size: var(--t-xs); font-weight:600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); color: var(--text-muted); }
.badge-status { font-family: var(--p-sans); font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm); }
.badge-conferred { background: var(--accent); color: #fbf7ee; }
.badge-review { background: transparent; color: var(--structural); border: 1px solid var(--structural); }
.badge-sealed { background: var(--p-metal-onyx); color: var(--p-paper-on-night); }

/* --- Hero -------------------------------------------------------------------- */
/* Landing hero fills the viewport below the sticky topbar instead of padding to it.
   min-height (never fixed height) so tall content grows + scrolls, never clips.
   Flex centers the grid; modest viewport-relative padding replaces the old fixed
   --s-9/--s-8 band that left a dead-band under the header at the top of the page. */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(1.5rem, 5vh, 4rem);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); align-items: center; width: 100%; }
/* Prevent grid items (esp. aspect-ratio plate images) from refusing to shrink and overflowing the viewport.
   align-items:center (NOT stretch) is essential: a stretched aspect-ratio figure derives its WIDTH from the
   tall copy column's height and blows far past its track. With center alignment the figure's width is driven
   by the grid track and its height comes from the 3/2 aspect-ratio — no overflow. */
.hero-grid > *, .track-feature > *, .split > *, .lineage > * { min-width: 0; }
.hero-copy { align-self: center; }
.hero-eyebrow { display:flex; align-items:center; gap: var(--s-3); margin-bottom: var(--s-5); }
.hero-eyebrow .seal-mini { width: 22px; height: 22px; }
.hero h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-lead { font-size: var(--t-md); color: var(--text-muted); max-width: 46ch; margin-top: var(--s-5); }
.hero-actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.hero-meta { display:flex; gap: var(--s-6); margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: var(--rule-hair) solid var(--rule-soft); }
.hero-meta .item .fig { font-family: var(--p-serif); font-size: var(--t-lg); }
.hero-meta .item .lbl { font-size: var(--t-2xs); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-faint); }

/* Hero — alt centered/masthead variant */
.hero-masthead { text-align: center; padding-block: var(--s-9); border-block: var(--rule-heavy) solid var(--rule); }
.hero-masthead h1 { font-size: var(--t-4xl); letter-spacing: -0.02em; }
.hero-masthead .sub { font-size: var(--t-md); color: var(--text-muted); margin-top: var(--s-4); }

/* --- Treated imagery --------------------------------------------------------- */
.plate-img { position: relative; overflow: hidden; border-radius: var(--r-md);
  background: var(--surface-sunk); border: var(--rule-hair) solid var(--rule-soft); }
.plate-img::after { content:""; position:absolute; inset:0; background: var(--img-overlay); pointer-events:none; }
.plate-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(1.02);
  mix-blend-mode: multiply;
}
[data-theme="dark"] .plate-img img { mix-blend-mode: screen; opacity: 0.92;
  filter: grayscale(1) contrast(1.1) brightness(0.9); }
/* Duotone wash carries the per-track accent grade */
.plate-img .duotone { position:absolute; inset:0; pointer-events:none; mix-blend-mode: color;
  background: var(--accent); opacity: 0.14; }
[data-theme="dark"] .plate-img .duotone { opacity: 0.2; }
.plate-img .plate-cap { position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: var(--s-4) var(--s-5); display:flex; justify-content: space-between; align-items:flex-end; gap: var(--s-4); }
.plate-img .plate-cap .ttl { font-family: var(--p-serif); font-size: var(--t-md); color:#f4efe4; }
.plate-img .plate-cap .meta { font-family: var(--p-sans); font-size: var(--t-2xs); letter-spacing: var(--ls-cap);
  text-transform: uppercase; color: rgba(244,239,228,0.82); }
.ar-32 { aspect-ratio: 3/2; } .ar-34 { aspect-ratio: 3/4; } .ar-169 { aspect-ratio: 16/9; }
/* Fallback empty state */
.plate-img.empty { display:flex; align-items:center; justify-content:center; }
.plate-img.empty::before { content:"Plate forthcoming"; font-family: var(--p-sans);
  font-size: var(--t-xs); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-faint); }

/* --- Four principles --------------------------------------------------------- */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: var(--rule-hair) solid var(--rule); border-radius: var(--r-md); overflow:hidden; }
.principle { padding: var(--s-6); border-right: var(--rule-hair) solid var(--rule-soft); }
.principle:last-child { border-right: 0; }
.principle .num { font-family: var(--p-serif); font-style: italic; color: var(--accent); font-size: var(--t-lg); }
.principle h3 { font-size: var(--t-lg); margin-top: var(--s-2); }
.principle p { color: var(--text-muted); font-size: var(--t-sm); margin-top: var(--s-3); }

/* --- Lineage as evidence ----------------------------------------------------- */
.lineage { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s-8); align-items: center; }
.lineage-chain { list-style:none; margin:0; padding:0; }
.lineage-chain li { display:grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  padding: var(--s-5) 0; border-bottom: var(--rule-hair) solid var(--rule-soft); }
.lineage-chain li:last-child { border-bottom:0; }
.lineage-chain .yr { font-family: var(--p-sans); font-size: var(--t-xs); font-weight:700;
  letter-spacing: var(--ls-cap); color: var(--accent); padding-top: 5px; min-width: 7ch; }
.lineage-chain .who { font-family: var(--p-serif); font-size: var(--t-md); }
.lineage-chain .what { color: var(--text-muted); font-size: var(--t-sm); margin-top: 2px; }

/* --- Certify-to-teach track cards -------------------------------------------- */
.track-feature { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-7);
  align-items: center; padding: var(--s-7); border: var(--rule-hair) solid var(--rule);
  border-left: 4px solid var(--accent); border-radius: var(--r-md); background: var(--surface-raised); }
.track-feature h3 { font-size: var(--t-2xl); letter-spacing: -0.01em; }
.track-feature h3 .as-name::before { content: var(--track-name); }
.track-feature .lead { color: var(--text-muted); font-size: var(--t-md); margin-top: var(--s-3); }

.track-cards { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); }
.track-card { background: var(--card-bg); border: var(--rule-hair) solid var(--card-rule);
  border-top: 3px solid var(--accent); border-radius: var(--r-md); padding: var(--s-6); }
.track-card .kicker { font-size: var(--t-2xs); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-faint); }
.track-card h4 { font-size: var(--t-lg); margin-top: var(--s-2); }
.track-card p { color: var(--text-muted); font-size: var(--t-sm); margin-top: var(--s-3); }
.track-card .confers { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--rule-hair) solid var(--rule-soft);
  font-size: var(--t-xs); color: var(--text-muted); }
.track-card .confers strong { color: var(--accent); font-family: var(--p-sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-2xs); }

/* --- Credential plates (SIGNATURE MECHANIC) ---------------------------------- */
.charter-ladder { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-8); align-items: start; }
.plate-rail { display: grid; gap: var(--s-4); }
.plate {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center;
  background: var(--plate-bg); border: var(--rule-hair) solid var(--plate-rule);
  border-radius: var(--r-md); padding: var(--s-5); cursor: pointer; text-align: left; width: 100%;
  font: inherit; color: inherit;
  transition: border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease),
              transform var(--motion-base) var(--ease);
}
.plate:hover { border-color: var(--accent-soft); }
.plate[aria-pressed="true"] { border-color: var(--accent); box-shadow: var(--shadow-raise);
  transform: translateX(2px); }
.plate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Engraved insignia — square metal plate, embossed numeral + bars */
.insignia {
  width: 60px; height: 60px; flex:none; border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--metal-face), color-mix(in srgb, var(--metal-face) 78%, #000));
  border: 1px solid var(--metal-edge);
  box-shadow: var(--shadow-plate);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 3px;
  position: relative;
}
.insignia .numeral { font-family: var(--p-serif); font-weight: 700; font-size: var(--t-md);
  color: var(--metal-engrave); text-shadow: 0 1px 0 rgba(255,255,255,0.25); line-height:1; }
.insignia .bars { display:flex; gap: 2px; }
.insignia .bars i { display:block; width: 7px; height: 2px; background: var(--metal-engrave); opacity:0.8; }
.insignia .chev { width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom: 5px solid var(--metal-engrave); opacity:0.8; }
/* metal variants */
.metal-brass .insignia  { --metal-face: var(--p-metal-brass); }
.metal-bronze .insignia { --metal-face: var(--p-metal-bronze); }
.metal-silver .insignia { --metal-face: var(--p-metal-silver); }
.metal-gold .insignia   { --metal-face: var(--p-metal-gold); }
.metal-onyx .insignia   { --metal-face: var(--p-metal-onyx); }
.metal-onyx .insignia .numeral, .metal-onyx .insignia .bars i, .metal-onyx .insignia .chev { color: var(--p-paper-on-night-mut); background-color: var(--p-paper-on-night-mut); }
.metal-onyx .insignia .numeral { background: none; }

.plate-body .rank { font-family: var(--p-serif); font-size: var(--t-lg); }
.plate-body .role { font-family: var(--p-sans); font-size: var(--t-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.plate-state { flex:none; text-align:right; }
.plate.is-locked { opacity: 0.62; }
.plate.is-locked .plate-body .rank { color: var(--text-faint); }

/* Conferral panel — the "certificate" moment */
.conferral {
  position: sticky; top: 96px;
  background: var(--surface-raised); border: var(--rule-heavy) solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-7); position: relative; overflow: hidden;
}
.conferral::before { content:""; position:absolute; inset: 6px; border: var(--rule-hair) solid var(--rule-soft);
  border-radius: var(--r-sm); pointer-events:none; }
.conferral .doc-head { display:flex; align-items:center; gap: var(--s-4); }
.conferral .seal-mark { width: 52px; height: 52px; flex:none; }
.conferral .doc-kicker { font-size: var(--t-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint); }
.conferral h3 { font-size: var(--t-xl); margin-top: 2px; }
.conferral .confer-line { font-family: var(--p-serif); font-style: italic; font-size: var(--t-md);
  color: var(--text-muted); margin-top: var(--s-5); }
.conferral .confer-line b { font-style: normal; color: var(--accent); }
.conferral .unlocks { list-style:none; margin: var(--s-5) 0 0; padding: 0; }
.conferral .unlocks li { display:grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: var(--rule-hair) solid var(--rule-soft); font-size: var(--t-sm); }
.conferral .unlocks li:last-child { border-bottom: 0; }
.conferral .unlocks .mk { color: var(--accent); font-weight: 700; }
.conferral .reqs { margin-top: var(--s-5); padding-top: var(--s-4); border-top: var(--rule-hair) solid var(--rule-soft); }
.conferral .reqs .reqs-h { font-size: var(--t-2xs); letter-spacing: var(--ls-cap); text-transform:uppercase; color: var(--text-faint); }
.conferral .reqs ul { list-style:none; margin: var(--s-3) 0 0; padding:0; display:grid; gap: var(--s-2); }
.conferral .reqs li { display:flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--text-muted); }
.conferral .reqs .box { width:14px;height:14px;border:1.5px solid var(--accent); border-radius:2px; flex:none; margin-top:3px;
  display:flex; align-items:center; justify-content:center; color: var(--accent); font-size:10px; line-height:1; }
.conferral .sig { display:flex; justify-content: space-between; align-items:flex-end; margin-top: var(--s-7); gap: var(--s-5); }
.conferral .sig .line { flex:1; }
.conferral .sig .line .nm { font-family: var(--p-serif); font-style: italic; font-size: var(--t-md); padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.conferral .sig .line .role { font-size: var(--t-2xs); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }

/* Seal — concentric rings + numeral, structural navy ring + accent core */
.seal { position: relative; border-radius: 50%; }
.seal .o { position:absolute; inset:0; border: 2px solid var(--seal-ring); border-radius:50%; }
.seal .i { position:absolute; inset:18%; border: 1px solid var(--seal-ring); border-radius:50%;
  display:flex; align-items:center; justify-content:center; }
.seal .star { color: var(--seal-core); font-family: var(--p-serif); font-weight:700; font-size: 0.9em; }
.seal-mini { width:22px;height:22px; }
.seal-mini .star { font-size: 11px; }

/* --- Stat / footprint strip -------------------------------------------------- */
.footprint { display:grid; grid-template-columns: repeat(4,1fr); gap:0;
  border-block: var(--rule-heavy) solid var(--rule); }
.footprint .stat { padding: var(--s-6) var(--s-5); border-right: var(--rule-hair) solid var(--rule-soft); }
.footprint .stat:last-child { border-right:0; }
.footprint .fig { font-family: var(--p-serif); font-size: var(--t-2xl); color: var(--stat-fig); line-height:1; }
.footprint .fig em { font-style: italic; color: var(--accent); }
.footprint .lbl { font-size: var(--t-2xs); letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--stat-label); margin-top: var(--s-3); }

/* --- Quote / endorsement ----------------------------------------------------- */
.endorse { border-left: 3px solid var(--quote-rule); padding: var(--s-2) 0 var(--s-2) var(--s-6); }
.endorse blockquote { margin:0; font-family: var(--p-serif); font-size: var(--t-lg); line-height: 1.35; }
.endorse .cite { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--text-muted); }
.endorse .cite b { font-family: var(--p-sans); color: var(--text); font-weight:600; }

/* --- CTA band ---------------------------------------------------------------- */
.cta-band { border: var(--rule-heavy) solid var(--rule); border-radius: var(--r-md);
  padding: var(--s-8); display:grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items:center;
  background: var(--surface-raised); position: relative; }
.cta-band h2 { font-size: var(--t-2xl); letter-spacing: -0.01em; }
.cta-band p { color: var(--text-muted); margin-top: var(--s-3); max-width: 52ch; }
.cta-actions { display:flex; gap: var(--s-3); }

/* --- FAQ accordion ----------------------------------------------------------- */
.faq { border-top: var(--rule-heavy) solid var(--rule); }
.faq details { border-bottom: var(--rule-hair) solid var(--rule-soft); }
.faq summary { list-style:none; cursor:pointer; padding: var(--s-5) 0; display:flex; gap: var(--s-4);
  align-items:flex-start; font-family: var(--p-serif); font-size: var(--t-md); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .mk { font-family: var(--p-sans); color: var(--accent); font-weight:700; transition: transform var(--motion-base) var(--ease); flex:none; }
.faq details[open] summary .mk { transform: rotate(45deg); }
.faq .ans { padding: 0 0 var(--s-5) calc(var(--s-4) + 1ch); color: var(--text-muted); max-width: var(--measure); }

/* --- Content + media split --------------------------------------------------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items:center; }
.split.reverse { direction: rtl; } .split.reverse > * { direction: ltr; }

/* --- Kit-showcase scaffolding ------------------------------------------------ */
.kit-hero { padding-block: var(--s-9) var(--s-7); border-bottom: var(--rule-heavy) solid var(--rule); }
.kit-hero h1 { font-size: var(--t-3xl); letter-spacing: -0.02em; }
.kit-hero h1 em { font-style: italic; color: var(--accent); }
.kit-hero .lead { font-size: var(--t-md); color: var(--text-muted); max-width: 60ch; margin-top: var(--s-5); }

.spec-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s-6); }
.spec-card { background: var(--surface-raised); border: var(--rule-hair) solid var(--rule-soft);
  border-radius: var(--r-md); padding: var(--s-6); }
.spec-card h4 { font-family: var(--p-sans); font-size: var(--t-xs); font-weight:700; letter-spacing: var(--ls-cap);
  text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-4); }

/* ramps */
.ramp { display:flex; gap: 4px; flex-wrap:wrap; }
.ramp .sw { width:54px; height:54px; border-radius: var(--r-sm); border: 1px solid var(--rule-soft);
  display:flex; align-items:flex-end; padding:4px; }
.ramp .sw span { font-family: var(--p-sans); font-size: 9px; color: rgba(255,255,255,0.9); mix-blend-mode: difference; }
.tokrow { display:flex; align-items:center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-faint); font-size: var(--t-xs); }
.tokrow .dot { width:18px;height:18px;border-radius:var(--r-sm); border:1px solid var(--rule-soft); flex:none; }
.tokrow code { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-muted); }

/* type specimen */
.specimen > * + * { margin-top: var(--s-3); }
.specimen .lbl { font-family: var(--p-sans); font-size: 10px; letter-spacing: var(--ls-cap); text-transform: uppercase; color: var(--text-faint); }

/* paired light/dark frames in showcase */
.pair { display:grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: stretch; }
.frame { border: var(--rule-hair) solid var(--rule-soft); border-radius: var(--r-md); overflow:hidden; }
.frame > .frame-label { font-family: var(--p-sans); font-size: 10px; letter-spacing: var(--ls-cap);
  text-transform: uppercase; padding: 6px var(--s-4); border-bottom: 1px solid var(--rule-faint); color: var(--text-faint); }
.frame > .frame-body { padding: var(--s-5); }
/* dark frame paints its own theme regardless of page theme */
.frame.is-dark { color: var(--p-paper-on-night); background: var(--p-night-base); }
.frame.is-light { color: var(--p-ink); background: var(--p-paper-surface); }

/* primitive demo row */
.demo-row { display:flex; flex-wrap:wrap; gap: var(--s-3); align-items:center; }

/* --- Footer ------------------------------------------------------------------ */
.site-footer { background: var(--footer-bg); border-top: var(--rule-heavy) solid var(--rule);
  margin-top: var(--s-10); padding-block: var(--s-8) var(--s-6); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-7); }
.site-footer h5 { font-family: var(--p-sans); font-size: var(--t-2xs); font-weight:700; letter-spacing: var(--ls-cap);
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--s-4); }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { padding: 4px 0; }
.site-footer a { color: var(--footer-fg); text-decoration:none; font-size: var(--t-sm); }
.site-footer a:hover { color: var(--text); }
.footer-base { display:flex; justify-content: space-between; align-items:center; gap: var(--s-4);
  margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--rule-hair) solid var(--rule-soft);
  font-size: var(--t-xs); color: var(--text-faint); }

/* --- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Responsive -------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid, .lineage, .charter-ladder, .track-feature, .split, .cta-band, .spec-grid { grid-template-columns: 1fr; }
  .principles, .footprint { grid-template-columns: repeat(2,1fr); }
  .track-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr; }
  .conferral { position: static; }
  .hero h1 { font-size: var(--t-2xl); }
  .topbar nav { display: none; }
}
@media (max-width: 560px) {
  .principles, .footprint, .footer-grid { grid-template-columns: 1fr; }
  /* Section head: the right-aligned kicker must drop below, not force a wide row */
  .section-head { flex-wrap: wrap; }
  .section-kicker { flex-basis: 100%; max-width: 100%; text-align: left; }
  .hero h1, .kit-hero h1 { font-size: var(--t-xl); }

  /* --- Topbar: wrap controls to their own row, shrink so the masthead
         never forces a wider-than-viewport row. Brand + track switcher +
         theme toggle stay visible; nav is already hidden below 980px. ----- */
  .topbar-inner { flex-wrap: wrap; gap: var(--s-3);
    padding-inline: var(--s-4); }
  .brandmark { min-width: 0; flex: 1 1 auto; }
  .brandmark .wordmark { font-size: var(--t-sm); min-width: 0;
    overflow-wrap: anywhere; }
  .topbar-controls { margin-left: 0; width: 100%;
    flex-wrap: wrap; gap: var(--s-3); justify-content: flex-start; }
  /* Track switcher: allow it to take the full row and its buttons to flex/shrink
     so three accent options + theme toggle never overflow at 390px. */
  .track-switch { flex: 1 1 100%; }
  .track-switch button { flex: 1 1 0; padding: 6px 6px; letter-spacing: 0.03em;
    white-space: nowrap; min-width: 0; }
  .theme-toggle { flex: 0 0 auto; }

  /* --- Charter-of-rank plate rail: insignia + body + state stack so a long
         rank label or the status badge can't push the row past the viewport.
         The rail itself is already a single-column grid below 980px. --------- */
  .plate { grid-template-columns: auto 1fr; gap: var(--s-4);
    padding: var(--s-4); }
  .plate-body { min-width: 0; }
  .plate-body .rank { overflow-wrap: anywhere; }
  /* state badge drops under the body, spanning both content columns */
  .plate-state { grid-column: 2; text-align: left; margin-top: var(--s-1); }
  .insignia { width: 48px; height: 48px; }
}