/* ============================================================
   REGALIA — kit.css  (all blocks/components on tokens)
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg-default);
  font-family: var(--font-grotesque);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--fg-strong);
  font-weight: 600;
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-3);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); }

.serif { font-family: var(--font-serif); }
.italic { font-style: italic; }

/* ---------- EYEBROW ---------- */
.eyebrow {
  font-family: var(--font-grotesque);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--metal);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--metal-bright);
  display: inline-block;
}
.eyebrow--onimg {
  color: var(--c-gold-300);
  background: rgba(15,21,18,0.42);
  padding: 4px 10px;
  border: 1px solid rgba(231,205,126,0.5);
  border-radius: var(--r-sm);
}
.eyebrow--onimg::before { background: var(--c-gold-300); }

/* ---------- DISPLAY TYPE ---------- */
.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-4);
}
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--fg-muted);
  max-width: 56ch;
  margin: 0 0 var(--sp-5);
}

/* ============================================================
   TOPBAR — one coherent bar
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center;
}
.topbar__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-5);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); margin-right: auto; }
.brand__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--fg-strong);
  white-space: nowrap;
}
.brand__name em { color: var(--metal); font-style: italic; font-weight: 500; }

/* ---------- EMBLEM (crisp ring + centered triangle + accent core) ---------- */
.emblem {
  --sz: 34px;
  width: var(--sz); height: var(--sz);
  flex: 0 0 auto;
  position: relative;
  border-radius: 50%;
  border: 2px solid var(--metal);
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 70%);
}
.emblem svg { width: 64%; height: 64%; display: block; }
.emblem .tri { fill: none; stroke: var(--metal); stroke-width: 7; stroke-linejoin: round; }
.emblem .core { fill: var(--accent); }
.emblem--lg { --sz: 56px; border-width: 2.5px; }

/* ---------- TOPBAR CONTROLS ---------- */
.controls { display: flex; align-items: center; gap: var(--sp-4); }
.switcher {
  display: inline-flex;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  padding: 3px;
  background: var(--bg-raised);
  gap: 2px;
}
.switcher button {
  font: 600 var(--fs-small)/1 var(--font-grotesque);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-size: 0.7rem;
  border: 0; background: transparent;
  color: var(--fg-muted);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.switcher button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
}
.switcher button:hover:not([aria-pressed="true"]) { color: var(--fg-strong); }

.theme-toggle {
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule-strong);
  background: var(--bg-raised);
  color: var(--metal);
  cursor: pointer;
  display: grid; place-items: center;
  transition: all var(--dur-fast) var(--ease);
}
.theme-toggle:hover { border-color: var(--metal); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 700 var(--fs-small)/1 var(--font-grotesque);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--gold { background: var(--metal-bright); color: #2a1f08; }
.btn--gold:hover { background: var(--c-gold-400); }
.btn--ghost {
  background: transparent;
  color: var(--fg-strong);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--metal); color: var(--metal); }
.btn--onimg {
  background: rgba(15,21,18,0.34);
  color: #f6ecc6;
  border-color: rgba(231,205,126,0.7);
  backdrop-filter: blur(2px);
}
.btn--onimg:hover { background: rgba(15,21,18,0.5); border-color: var(--c-gold-300); }

/* ---------- TAGS / BADGES / CHIPS ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 0.68rem/1 var(--font-grotesque);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-theme="dark"] .tag { color: var(--accent); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 0.68rem/1 var(--font-grotesque);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--metal);
  color: var(--metal);
  background: transparent;
}
.chip {
  display: inline-flex; align-items: center;
  font: 600 0.8rem/1 var(--font-grotesque);
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  color: var(--fg-default);
}
.divider { height: 1px; background: var(--rule); border: 0; margin: var(--sp-6) 0; }
.divider--gold {
  height: 2px; border: 0; margin: var(--sp-6) 0;
  background: linear-gradient(90deg, transparent, var(--metal-bright), transparent);
}

/* ============================================================
   SECTION primitives
   ============================================================ */
.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section__head { max-width: 62ch; margin-bottom: var(--sp-6); }
.section--sunken { background: var(--bg-sunken); }
.section--raised { background: var(--bg-raised); }

/* heraldic masthead rule */
.masthead {
  border-top: 2px solid var(--metal);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--sp-2);
  display: flex; justify-content: space-between; align-items: center;
  font: 700 var(--fs-eyebrow)/1 var(--font-grotesque);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--metal);
  margin-bottom: var(--sp-6);
}
.masthead .roman { font-family: var(--font-serif); letter-spacing: 0.1em; }

/* ============================================================
   IMAGE TREATMENT — jewel duotone, visible in both themes
   (NO multiply-on-dark; subject readable)
   ============================================================ */
.plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-sunken);          /* graceful fallback surface */
  border: 1px solid var(--rule);
  isolation: isolate;
}
.plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(var(--img-brightness)) contrast(var(--img-contrast)) saturate(var(--img-saturate));
}
/* jewel duotone via screen/soft-light overlays — never multiply on dark */
.plate::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, var(--duo-highlight), transparent 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, var(--duo-shadow), transparent 60%),
    linear-gradient(180deg, var(--img-scrim-top), transparent 30%, var(--img-scrim-bottom));
  mix-blend-mode: normal;
  pointer-events: none;
}
/* accent kiss — pull per-track jewel into the grade, gently, via screen */
.plate--accent::after {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%),
    linear-gradient(0deg, var(--duo-shadow), transparent 60%),
    linear-gradient(180deg, var(--img-scrim-top), transparent 30%, var(--img-scrim-bottom));
}
.plate__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--sp-4) var(--sp-5);
  color: #f4efe0;
  font-size: var(--fs-small);
}
.plate__caption .roman { font-family: var(--font-serif); color: var(--c-gold-300); }

.plate--3x2 { aspect-ratio: 3/2; }
.plate--3x4 { aspect-ratio: 3/4; }
.plate--16x9 { aspect-ratio: 16/9; }

/* gold corner ticks — illuminated-plate framing */
.plate--framed { border: 1.5px solid var(--metal); }
.plate--framed .corner {
  position: absolute; width: 16px; height: 16px; z-index: 3; border: 2px solid var(--metal-bright);
}
.plate--framed .corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.plate--framed .corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.plate--framed .corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.plate--framed .corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* ============================================================
   HERO — image-led
   ============================================================ */
.hero {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  /* minmax(0,…) so the image track can't starve the copy column (which collapsed
     to min-content and broke the headline letter-by-letter). */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  gap: var(--sp-7);
  padding-block: var(--sp-7);
}
.hero__copy {
  align-self: center;
  padding-block: var(--sp-6);
  min-width: 0;
}
.hero__copy .eyebrow { margin-bottom: var(--sp-4); }
/* Headline uses the full hero column (the lead keeps its own 56ch measure); the
   38ch cap that used to clip the long serif word "practitioners" is removed,
   with word-break safety for narrow columns. */
.hero__copy .display { margin-bottom: var(--sp-5); overflow-wrap: break-word; hyphens: auto; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.hero__copy .lead { max-width: 46ch; }
.hero__cred {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.hero__media { position: relative; align-self: stretch; min-height: 60vh; }
.hero__media .plate { height: 100%; }
.hero__media .plate__caption { background: linear-gradient(0deg, rgba(15,21,18,0.7), transparent); }

/* type-led hero variant */
.hero--type { grid-template-columns: 1fr; place-items: start; }
.hero--type .hero__copy { max-width: 22ch; }
.hero--type .display { font-size: clamp(3rem, 8vw, 6.5rem); }

/* ============================================================
   FOUR PRINCIPLES
   ============================================================ */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.principle {
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--metal-bright);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease);
}
.principle:hover { transform: translateY(-3px); }
.principle__num {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--metal);
  letter-spacing: 0.05em;
}
.principle:nth-child(1) { border-top-color: var(--jewel-emerald); }
.principle:nth-child(2) { border-top-color: var(--jewel-sapphire); }
.principle:nth-child(3) { border-top-color: var(--jewel-garnet); }
.principle:nth-child(4) { border-top-color: var(--metal-bright); }
.principle h3 { margin: var(--sp-2) 0; }
.principle p { color: var(--fg-muted); font-size: var(--fs-small); margin: 0; }

/* ============================================================
   LINEAGE — evidence
   ============================================================ */
.lineage { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-7); align-items: center; }
.lineage__chain { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.lineage__chain li {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--rule);
}
.lineage__chain li::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--metal-bright); border: 2px solid var(--bg-base);
}
.lineage__chain li:last-child { border-left-color: transparent; padding-bottom: 0; }
.lineage__chain .yr { font-family: var(--font-serif); color: var(--metal); font-size: 0.95rem; }
.lineage__chain strong { display: block; color: var(--fg-strong); margin-top: 2px; }
.lineage__chain span.role { color: var(--fg-muted); font-size: var(--fs-small); }

/* ============================================================
   TRACK CARDS — certify to teach
   ============================================================ */
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.track-card {
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.track-card__band {
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--metal-bright));
}
.track-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.track-card h3 { margin: 0; }
.track-card p { color: var(--fg-muted); font-size: var(--fs-small); margin: 0; flex: 1; }
.track-card__seal {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--metal);
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--font-serif); font-weight: 700;
}
[data-theme="dark"] .track-card__seal { color: var(--accent); }

/* track feature header — re-skins per accent */
.track-feature {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--metal);
  min-height: 340px;
  display: grid;
}
.track-feature .plate { position: absolute; inset: 0; border: 0; border-radius: 0; }
.track-feature__copy {
  position: relative; z-index: 3;
  align-self: end;
  padding: var(--sp-7);
  max-width: 50ch;
}
.track-feature__copy .display { color: #f6ecc6; font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.track-feature__copy p { color: rgba(246,236,198,0.86); }

/* ============================================================
   PROGRESSION MECHANIC — credential plates I–V (interactive)
   ============================================================ */
.regalia-ladder { display: grid; gap: var(--sp-5); }
.ladder__rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
}
.cred-plate {
  position: relative;
  text-align: left;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-plate);
  background: var(--surface-card);
  padding: var(--sp-4);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-height: 140px;
  overflow: hidden;
  font-family: inherit;
  color: var(--fg-default);
}
.cred-plate__field {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.0;
  transition: opacity var(--dur) var(--ease);
}
.cred-plate[data-state="conferred"] .cred-plate__field {
  opacity: 1;
  background: linear-gradient(150deg, var(--plate-field), var(--accent-deep));
}
.cred-plate[data-state="sealed"] .cred-plate__field {
  opacity: 1;
  background: linear-gradient(150deg, var(--plate-field), var(--accent-deep));
}
.cred-plate[data-state="in-review"] .cred-plate__field {
  opacity: 0.16;
  background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 8px, transparent 8px, transparent 16px);
}
.cred-plate > * { position: relative; z-index: 1; }
.cred-plate[data-state="conferred"],
.cred-plate[data-state="sealed"] { border-color: var(--metal-bright); }
.cred-plate[data-state="conferred"] .cred-plate__numeral,
.cred-plate[data-state="sealed"] .cred-plate__numeral,
.cred-plate[data-state="conferred"] .cred-plate__tier,
.cred-plate[data-state="sealed"] .cred-plate__tier { color: #f6ecc6; }
.cred-plate[data-state="conferred"] .cred-plate__confers,
.cred-plate[data-state="sealed"] .cred-plate__confers { color: rgba(246,236,198,0.82); }
.cred-plate:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.cred-plate[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--metal-bright), var(--shadow-2); }

.cred-plate__numeral {
  font-family: var(--font-serif);
  font-size: 2.2rem; line-height: 1;
  color: var(--metal);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cred-plate__tier {
  font: 700 var(--fs-eyebrow)/1.2 var(--font-grotesque);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-strong);
}
.cred-plate__confers {
  font-size: 0.78rem; color: var(--fg-muted); margin: 0;
}
.cred-plate__status {
  margin-top: auto;
  font: 700 0.62rem/1 var(--font-grotesque);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.cred-plate__status .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.cred-plate[data-state="locked"] .cred-plate__status { color: var(--fg-faint); }
.cred-plate[data-state="locked"] .cred-plate__status .dot { background: var(--fg-faint); }
.cred-plate[data-state="in-review"] .cred-plate__status { color: var(--accent-deep); }
[data-theme="dark"] .cred-plate[data-state="in-review"] .cred-plate__status { color: var(--accent); }
.cred-plate[data-state="in-review"] .cred-plate__status .dot { background: var(--accent); }
.cred-plate[data-state="conferred"] .cred-plate__status,
.cred-plate[data-state="sealed"] .cred-plate__status { color: var(--c-gold-300); }
.cred-plate[data-state="conferred"] .cred-plate__status .dot,
.cred-plate[data-state="sealed"] .cred-plate__status .dot { background: var(--c-gold-300); }

/* gold conferral seal on a sealed plate */
.cred-plate__seal {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; opacity: 0; transform: scale(0.4) rotate(-30deg);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.cred-plate[data-state="sealed"] .cred-plate__seal { opacity: 1; transform: scale(1) rotate(0); }
.cred-plate__seal svg { width: 100%; height: 100%; }

/* detail readout panel */
.ladder__detail {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--metal-bright);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-1);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5);
  align-items: start;
}
.ladder__detail .crest {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2.5px solid var(--metal);
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 72%);
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--metal);
}
.ladder__detail h3 { margin: 0 0 var(--sp-2); }
.ladder__detail .confers-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-2); }
.ladder__detail .confers-list li {
  display: flex; gap: var(--sp-3); align-items: baseline;
  font-size: var(--fs-small); color: var(--fg-default);
}
.ladder__detail .confers-list li::before {
  content: "✦"; color: var(--metal-bright); font-size: 0.8rem;
}
.ladder__controls { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; align-items: center; }
.ladder__hint { font-size: var(--fs-small); color: var(--fg-muted); }
/* confer button reaches its terminal "fully sealed" state */
.ladder__controls .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; transform: none; }
.ladder__controls .btn[aria-disabled="true"]:hover { transform: none; }

/* ============================================================
   STAT / FOOTPRINT STRIP
   ============================================================ */
.footprint {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  border-top: 2px solid var(--metal);
  border-bottom: 2px solid var(--metal);
  padding-block: var(--sp-6);
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--metal);
  line-height: 1;
}
.stat__label {
  font: 700 var(--fs-eyebrow)/1.3 var(--font-grotesque);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-muted); margin-top: var(--sp-2);
}

/* ============================================================
   CREDENTIAL / QUOTE
   ============================================================ */
.quote {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface-card);
  padding: var(--sp-7);
  box-shadow: var(--shadow-1);
}
.quote blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  color: var(--fg-strong);
  margin: 0 0 var(--sp-5);
}
.quote blockquote::before { content: "“"; color: var(--metal); font-size: 1.4em; line-height: 0; vertical-align: -0.3em; margin-right: 0.1em; }
.quote__by { display: flex; align-items: center; gap: var(--sp-3); }
.quote__by .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--metal); object-fit: cover;
}
.quote__by .name { font-weight: 700; color: var(--fg-strong); }
.quote__by .role { font-size: var(--fs-small); color: var(--fg-muted); }

/* ============================================================
   CTA BAND  (filled band — internal padding, separated from footer)
   ============================================================ */
.cta-band {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  position: relative;
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(231,205,126,0.32), transparent 55%);
  pointer-events: none;
}
.cta-band__inner {
  position: relative; z-index: 1;
  padding: var(--sp-8) var(--sp-7);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-6); align-items: center;
}
.cta-band__inner .display { color: #fbf6e8; margin: 0; }
.cta-band__inner p { color: rgba(251,246,232,0.86); margin: var(--sp-2) 0 0; }
.cta-band .eyebrow { color: var(--c-gold-300); }
.cta-band .eyebrow::before { background: var(--c-gold-300); }
.cta-band__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ============================================================
   PHOTO + CAPTION (documentary)
   ============================================================ */
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.media-split--rev { direction: rtl; }
.media-split--rev > * { direction: ltr; }
.fig figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--fg-muted);
  border-left: 2px solid var(--metal-bright);
  padding-left: var(--sp-3);
}

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */
.faq { display: grid; gap: var(--sp-3); max-width: 760px; }
.faq__item { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface-card); overflow: hidden; }
.faq__q {
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font: 600 1.05rem/1.3 var(--font-serif);
  color: var(--fg-strong);
  background: transparent; border: 0; cursor: pointer;
}
.faq__q .pm { color: var(--metal); font-size: 1.4rem; transition: transform var(--dur-fast) var(--ease); flex: 0 0 auto; }
.faq__item[open] .faq__q .pm { transform: rotate(45deg); }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--fg-muted); font-size: var(--fs-small); }
details.faq__item summary { list-style: none; }
details.faq__item summary::-webkit-details-marker { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--bg-sunken);
  border-top: 2px solid var(--metal);
  padding-block: var(--sp-7);
  margin-top: var(--sp-9);
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer h4 { font: 700 var(--fs-eyebrow)/1 var(--font-grotesque); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--metal); margin-bottom: var(--sp-4); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.footer a { color: var(--fg-muted); font-size: var(--fs-small); }
.footer a:hover { color: var(--fg-strong); }
.footer__brand p { color: var(--fg-muted); font-size: var(--fs-small); max-width: 34ch; margin: var(--sp-3) 0 0; }
.footer__base { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: var(--sp-4); color: var(--fg-faint); font-size: var(--fs-small); flex-wrap: wrap; }

/* ============================================================
   SHOWCASE scaffolding (index.html only)
   ============================================================ */
.kit-intro { padding-block: var(--sp-8) var(--sp-6); }
.spec-label {
  font: 700 var(--fs-eyebrow)/1 var(--font-grotesque);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--metal); margin-bottom: var(--sp-3);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.pair__frame {
  border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
}
.pair__cap {
  font: 700 var(--fs-eyebrow)/1 var(--font-grotesque);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule);
  color: var(--fg-muted);
  background: var(--bg-raised);
  display: flex; justify-content: space-between;
}
.pair__body { padding: var(--sp-5); background: var(--bg-base); }
/* forced-theme mini-frame: re-scopes both themes inside the showcase */
.frame-light { background: var(--c-parchment-200); }
.frame-dark  { background: var(--c-ink-900); }

.ramp { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px,1fr)); gap: var(--sp-2); }
.swatch { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--rule); }
.swatch__chip { height: 56px; }
.swatch__meta { padding: 6px 8px; font-size: 0.68rem; color: var(--fg-muted); background: var(--surface-card); }
.swatch__meta b { display: block; color: var(--fg-strong); font-size: 0.7rem; }

.type-specimen > * { margin: 0 0 var(--sp-3); }
.token-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.token-table th, .token-table td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--rule); }
.token-table th { color: var(--metal); font: 700 var(--fs-eyebrow)/1 var(--font-grotesque); letter-spacing: var(--ls-label); text-transform: uppercase; }
.token-table code { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--accent-deep); }
[data-theme="dark"] .token-table code { color: var(--accent); }

.block-demo { padding: var(--sp-6) 0; border-top: 1px dashed var(--rule); }
.block-demo > h3.spec-h { font-family: var(--font-grotesque); font-size: 1rem; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--fg-strong); margin-bottom: var(--sp-4); }

.elev-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.elev-box { width: 120px; height: 80px; border-radius: var(--r-md); background: var(--surface-card); display: grid; place-items: center; font-size: var(--fs-small); color: var(--fg-muted); }
.elev-1 { box-shadow: var(--shadow-1); }
.elev-2 { box-shadow: var(--shadow-2); }
.elev-3 { box-shadow: var(--shadow-plate); }

.btn-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

/* ============================================================
   RESPONSIVE — no horizontal overflow at 390px
   ============================================================ */
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .hero__copy, .hero__media { min-width: 0; }
  .hero__media { min-height: 46vh; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .tracks { grid-template-columns: 1fr; }
  .lineage, .media-split, .footprint { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr; }
  .ladder__rail { grid-template-columns: repeat(5, 1fr); }
  /* grid/flex children that hold plates or wide content must shrink */
  .ladder__rail, .ladder__detail, .cred-plate, .hero__cred, .tracks, .principles { min-width: 0; }
}

@media (max-width: 560px) {
  :root { --header-h: auto; }
  .topbar { height: auto; padding-block: var(--sp-2); }
  .topbar__inner { flex-wrap: wrap; gap: var(--sp-3); padding-inline: var(--sp-4); }
  .brand { margin-right: 0; width: 100%; }
  .controls { width: 100%; justify-content: space-between; }
  .switcher button { padding: 6px 9px; font-size: 0.62rem; }
  .wrap { padding-inline: var(--sp-4); }
  .hero { min-height: auto; gap: var(--sp-5); }
  .hero__copy { max-width: 100%; }
  .principles { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .ladder__rail { grid-template-columns: 1fr 1fr; }
  .ladder__detail { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .masthead { flex-direction: column; gap: 4px; align-items: flex-start; }
  .footprint { grid-template-columns: 1fr 1fr; }
  /* prevent flex/grid overflow — every wide-content child can shrink below content */
  .hero, .hero__copy, .hero__media, .track-card, .principle, .quote,
  .cta-band__inner, .lineage, .media-split, .ladder__rail, .ladder__detail,
  .cred-plate, .hero__cred, .hero__actions { min-width: 0; }
  /* scale large display type down and let long words wrap so nothing exceeds the viewport */
  .display { font-size: clamp(1.85rem, 8.5vw, 2.4rem); overflow-wrap: anywhere; word-break: break-word; }
  .hero--type .display { font-size: clamp(2.1rem, 11vw, 3rem); }
  .lead { overflow-wrap: anywhere; }
  /* plates must fit within the viewport, not force a fixed minimum width */
  .plate, .plate--3x2 { max-width: 100%; }
  .footer__base { flex-direction: column; }
}

/* flex/grid children safety */
.topbar__inner, .controls, .hero__actions, .btn-row, .footprint, .tracks, .principles { min-width: 0; }
.track-card, .principle, .cred-plate, .stat, .quote { min-width: 0; }