/* ============================================================
   USIDM — Components · FROZEN (Phase 2)
   No literal colour values. Everything resolves from tokens.css.
   ============================================================ */

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--font-ui); font-size: var(--fs-small); font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; line-height: 1;
  padding: 0.9375rem var(--s-6);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none; cursor: pointer;
  min-height: 48px;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease);
}
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.btn--primary { background: var(--surface-accent); color: var(--text-on-dark); }
.btn--primary:hover { background: var(--crimson-700); color: var(--text-on-dark); }
.btn--secondary { background: transparent; color: var(--navy-900); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--navy-900); background: var(--surface-hover); color: var(--navy-900); }
.btn--ghost { background: transparent; color: var(--link); padding-inline: 0; min-height: 0; }
.btn--ghost::after { content: '→'; transition: transform var(--dur-base) var(--ease); }
.btn--ghost:hover::after { transform: translateX(3px); }
.btn--on-dark { background: var(--white); color: var(--navy-900); }
.btn--on-dark:hover { background: var(--gold-400); color: var(--navy-900); }
.btn--on-dark:focus-visible { outline: var(--focus-ring-dark); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* ---------- CARDS — keylines, not shadows ---------- */
.card {
  background: var(--surface-panel);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--s-6);
}
.card--bordered-top { border-top: 3px solid var(--surface-accent); }
.card__eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--fw-semibold); }
.card__title { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--fs-h4); color: var(--navy-900); margin-block: var(--s-3); }
.card__body { color: var(--text-secondary); font-size: var(--fs-small); }
.card--link { display: block; text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease); }
.card--link:hover { border-color: var(--navy-600); }
.card--link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.capability { border: 0; border-top: var(--border-rule) solid var(--border-strong);
  padding: var(--s-5) 0 0; background: transparent; }
.capability__num { font-family: var(--font-display); font-size: var(--fs-caption);
  color: var(--crimson-800); letter-spacing: 0.1em; }

/* ---------- EVIDENCE TAXONOMY ----------
   VERIFIED · INFERENCE · UNKNOWN · HYPOTHESIS.
   The same four labels the research specification uses, so public
   market intelligence shows fact and analysis as visibly different
   things. A verified finding without a source fails the build. */
.tag { display: inline-block; font-family: var(--font-ui); font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem var(--s-3); border-radius: var(--radius-sm); border: var(--border-hairline) solid transparent; }
.tag--verified   { background: var(--evidence-verified-bg);   color: var(--evidence-verified-fg);   border-color: var(--navy-100); }
.tag--inference  { background: var(--evidence-inference-bg);  color: var(--evidence-inference-fg);  border-color: var(--crimson-100); }
.tag--unknown    { background: var(--evidence-unknown-bg);    color: var(--evidence-unknown-fg);    border-color: var(--navy-200); }
.tag--hypothesis { background: var(--evidence-hypothesis-bg); color: var(--evidence-hypothesis-fg); border-color: var(--gold-400); }

.finding { border-inline-start: var(--border-rule) solid var(--evidence-verified-edge); padding-inline-start: var(--s-5); }
.finding--inference  { border-inline-start-color: var(--evidence-inference-edge); }
.finding--unknown    { border-inline-start-color: var(--evidence-unknown-edge); }
.finding--hypothesis { border-inline-start-color: var(--evidence-hypothesis-edge); }
.finding__value { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--fs-h2); color: var(--navy-900); line-height: 1; }
.finding__label { font-size: var(--fs-small); color: var(--text-secondary); margin-top: var(--s-3); }
.finding__source { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: var(--s-3); }

/* ---------- PROCESS ---------- */
.process { display: flex; flex-wrap: wrap; gap: 0; border-top: var(--border-hairline) solid var(--border-default); }
.process__step { flex: 1 1 160px; padding: var(--s-5) var(--s-5) var(--s-5) 0;
  border-top: 3px solid var(--surface-accent); margin-top: -1px; }
.process__step:nth-child(n+2) { border-top-color: var(--border-strong); }
.process__n { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  color: var(--text-tertiary); font-weight: var(--fw-semibold); }
.process__label { font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--fs-small); color: var(--navy-900); margin-top: var(--s-2); line-height: 1.35; }

/* ---------- MODEL — the signature USIDM component ----------
   Explains the actual business rather than decorating it:
     U.S. Institutions  ↔  USIDM  ↔  International Markets
     University         →   USIDM  →  Students
     U.S. Institution   ↔  USIDM  ↔  Local Representation
   Never used decoratively and never more than once per page. */
.model { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: var(--s-4); text-align: center; }
.model--pair { grid-template-columns: 1fr auto 1fr; }
.model__node { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-md); padding: var(--s-6) var(--s-4);
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: var(--fs-small); color: var(--navy-900); }
.model__node--center { border-color: var(--surface-accent); border-width: var(--border-rule);
  color: var(--crimson-800); }
.model__node small { font-family: var(--font-ui); font-size: var(--fs-caption);
  font-weight: var(--fw-regular); color: var(--text-tertiary); letter-spacing: 0; }
.model__link { display: flex; align-items: center; justify-content: center;
  color: var(--gold-600); font-size: var(--fs-h3); line-height: 1; }
.section--dark .model__node { border-color: var(--border-on-dark); color: var(--text-on-dark); }
.section--dark .model__node--center { border-color: var(--gold-400); color: var(--gold-400); }
.section--dark .model__node small { color: var(--text-on-dark-faint); }
@media (max-width: 760px) {
  .model, .model--pair { grid-template-columns: 1fr; }
  .model__link { transform: rotate(90deg); padding-block: var(--s-2); }
}

/* ---------- FORMS ---------- */
.field { display: block; margin-bottom: var(--s-5); }
.field__label { display: block; font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--navy-800); margin-bottom: var(--s-2); }
.field__hint { display: block; font-size: var(--fs-caption); color: var(--text-tertiary); margin-bottom: var(--s-2); }
.field__req { color: var(--danger); }

.input, .select, .textarea {
  width: 100%; font-family: var(--font-ui); font-size: var(--fs-body);
  color: var(--text-primary); background: var(--surface-panel);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.8125rem var(--s-4); min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--navy-600); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  border-color: var(--crimson-700); outline: var(--focus-ring); outline-offset: 1px; }
.textarea { min-height: 132px; resize: vertical; line-height: var(--lh-body); }
.select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000A2B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s-4) center; padding-inline-end: var(--s-8); }

.field--error .input, .field--error .select, .field--error .textarea {
  border-color: var(--danger); border-width: var(--border-rule); }
.field__error { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-caption);
  color: var(--danger); margin-top: var(--s-2); font-weight: var(--fw-medium); }
.field__error::before { content: '!'; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--danger);
  color: var(--text-on-dark); font-size: 11px; flex-shrink: 0; }
/* An empty slot is NO state: without this, every pristine field wears a red
   "!" badge on first paint (audit P0-A). The slots are written/cleared via
   textContent, so :empty stays reliable. */
.field__error:empty { display: none; }
.field--success .input { border-color: var(--success); }

/* Form status line — one component, three semantics (audit P0-B: success and
   pending previously wore the error class and its red badge). Meaning is
   carried by words + icon + color together, never color alone. */
.form-status { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-4);
  font-size: var(--fs-small); font-weight: var(--fw-medium); }
.form-status::before { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; color: var(--text-on-dark);
  font-size: 11px; flex-shrink: 0; }
.form-status[data-kind="error"] { color: var(--danger); }
.form-status[data-kind="error"]::before { content: '!'; background: var(--danger); }
.form-status[data-kind="success"] { color: var(--success); }
.form-status[data-kind="success"]::before { content: '\2713'; background: var(--success); }
.form-status[data-kind="pending"] { color: var(--text-secondary); font-weight: var(--fw-regular); }
.form-status[data-kind="pending"]::before { content: none; }
.form-status__fallback { font-size: var(--fs-caption); color: var(--text-secondary);
  margin-top: var(--s-3); }

.choice { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4);
  border: var(--border-hairline) solid var(--border-strong); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.choice:hover { border-color: var(--navy-600); }
.choice:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.choice:has(input:checked) { border-color: var(--surface-accent); background: var(--crimson-050); }
.choice:has(input:checked) .choice__text { color: var(--crimson-800); font-weight: var(--fw-medium); }
.choice input { margin-top: 0.28rem; accent-color: var(--crimson-800); width: 18px; height: 18px; }

/* .choice__text was referenced by the checked state but never given a layout,
   so a title + description pair rendered as two inline elements running
   together. Stacking is the component's job, not the page's. */
.choice__text { display: flex; flex-direction: column; gap: var(--s-2); }
.choice__text b { font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.choice__text small { font-size: var(--fs-caption); line-height: var(--lh-body);
  color: var(--text-secondary); font-weight: var(--fw-regular); }
.choice:has(input:checked) .choice__text small { color: var(--text-secondary); }

.consent { display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-small); color: var(--text-secondary); }
.consent input { margin-top: 0.3rem; accent-color: var(--crimson-800); width: 18px; height: 18px; }

/* ---------- TABLE ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table th { text-align: start; font-family: var(--font-ui); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-tertiary);
  font-weight: var(--fw-semibold); padding: var(--s-3) var(--s-4);
  border-bottom: var(--border-rule) solid var(--border-strong); }
.table td { padding: var(--s-4); border-bottom: var(--border-hairline) solid var(--border-default);
  vertical-align: top; color: var(--text-secondary); }

/* ---------- NAVIGATION ---------- */
.nav { border-bottom: var(--border-hairline) solid var(--border-default);
  background: var(--surface-primary); position: sticky; top: 0; z-index: 40; }
.nav__inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); min-height: var(--nav-height); }
.nav__links { display: flex; align-items: center; gap: var(--s-6); list-style: none; padding: 0; margin: 0; }
.nav__link { font-family: var(--font-ui); font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--navy-800); text-decoration: none; }
.nav__link:hover { color: var(--crimson-800); }
.nav__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.nav__link--zone { color: var(--text-tertiary); font-weight: var(--fw-regular);
  padding-inline-start: var(--s-6); border-inline-start: var(--border-hairline) solid var(--border-default); }
.nav__cta { display: inline-flex; }

/* Mobile navigation */
.nav__toggle {
  display: none; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; min-width: 48px; padding: 0 var(--s-3);
  background: transparent; border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-md); cursor: pointer;
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--navy-800);
}
.nav__toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.nav__burger { position: relative; width: 18px; height: 12px; flex-shrink: 0; }
.nav__burger span { position: absolute; inset-inline-start: 0; width: 100%; height: 1.5px;
  background: var(--navy-800); transition: transform var(--dur-base) var(--ease),
  opacity var(--dur-fast) var(--ease); }
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 5px; }
.nav__burger span:nth-child(3) { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav__panel {
  display: none;
  position: fixed; inset: var(--nav-height) 0 0 0; z-index: 39;
  background: var(--surface-primary);
  padding: var(--s-6) var(--gutter) var(--s-9);
  overflow-y: auto; overscroll-behavior: contain;
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel ul { list-style: none; padding: 0; margin: 0; }
.nav__panel li { border-bottom: var(--border-hairline) solid var(--border-default); }
.nav__panel .nav__link { display: block; padding: var(--s-5) 0; font-size: var(--fs-lead);
  font-family: var(--font-display); font-weight: var(--display-weight); }
.nav__panel .nav__link--zone { border: 0; padding-inline-start: 0; font-family: var(--font-ui);
  font-size: var(--fs-small); }
.nav__panel .btn { width: 100%; margin-top: var(--s-6); }
body[data-nav-open="true"] { overflow: hidden; }

@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* ---------- NAV DROPDOWNS (owner nav architecture, 2026-08-18) ----------
   <details>/<summary> so the menus operate without JavaScript; nav.js adds
   single-open, outside-click and Escape behaviour. Institutions stays
   restrained/editorial (keyline panel, near-square). The Students menu uses
   the approved student grammar (zone tokens: 6px radius, student ivory) with
   a featured-pathway image — solid surfaces only: the single glass layer
   lives on the homepage showcase, per the owner's one-layer rule. */
.nav__dd { position: relative; }
.nav__dd > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; min-height: 48px; }
.nav__dd > summary::-webkit-details-marker { display: none; }
.nav__caret { display: inline-block; width: 6px; height: 6px; margin-inline-start: var(--s-2);
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast) var(--ease); }
details[open] > summary .nav__caret { transform: translateY(1px) rotate(-135deg); }

.nav__menu { position: absolute; top: 100%; inset-inline-start: calc(-1 * var(--s-6));
  z-index: 41; background: var(--surface-primary);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-raised);
  padding: var(--s-5) var(--s-6); min-width: 300px; }
.nav__menu-list { list-style: none; padding: 0; margin: 0; }
.nav__menu-list a, .nav__menu-static { display: flex; align-items: center;
  min-height: 48px; font-family: var(--font-ui); font-size: var(--fs-small);
  color: var(--navy-800); text-decoration: none; white-space: nowrap; }
.nav__menu-list a:hover { color: var(--crimson-800); }
.nav__menu-list a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.nav__menu-static { color: var(--text-tertiary); }
.nav__menu-group { border-block: var(--border-hairline) solid var(--border-default);
  margin-block: var(--s-4); padding-block: var(--s-4); }
.nav__menu-label { display: block; font-family: var(--font-ui); font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: var(--s-2); }
.nav__tag { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-tertiary); margin-inline-start: var(--s-3); }
.nav__tag--active { color: var(--gold-text); }

/* Resources menu — two audience columns, editorial */
.nav__menu--res { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7);
  min-width: 640px; inset-inline-start: auto; inset-inline-end: calc(-1 * var(--s-6)); }
.nav__menu--res .nav__menu-list a { white-space: normal; min-height: 44px; }

/* Students menu — zone tokens apply via data-zone="students" on the details */
.nav__menu--stu { display: grid; grid-template-columns: 240px minmax(280px, 1fr);
  gap: var(--s-6); min-width: 580px; border-radius: var(--radius-md); }
.nav__feature { display: block; text-decoration: none; }
.nav__feature img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-md); }
.nav__feature-title { display: block; font-family: var(--font-display);
  font-weight: var(--display-weight); font-size: var(--fs-h4, 1.125rem);
  color: var(--navy-800); margin-top: var(--s-4); }
.nav__feature-lead { display: block; font-family: var(--font-ui); font-size: var(--fs-caption);
  color: var(--text-secondary); margin-top: var(--s-2); max-width: 26ch; white-space: normal; }
.nav__feature:hover .nav__feature-title { color: var(--crimson-800); }
.nav__feature:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Mobile accordions inside the panel */
.nav__panel .nav__acc { border-bottom: var(--border-hairline) solid var(--border-default); }
.nav__panel .nav__acc > summary { list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; }
.nav__panel .nav__acc > summary::-webkit-details-marker { display: none; }
.nav__acc-list { padding: 0 0 var(--s-4) var(--s-5); }
.nav__panel .nav__acc-list li { border: 0; }
.nav__acc-list a, .nav__acc-list .nav__menu-static { display: flex; align-items: center;
  min-height: 48px; font-family: var(--font-ui); font-size: var(--fs-small);
  color: var(--navy-800); text-decoration: none; }
.nav__acc-list .nav__menu-static { color: var(--text-tertiary); }
.nav__acc-group { padding-block: var(--s-3); }
.nav__acc-group ul { padding-inline-start: var(--s-4); }

/* ---------- CAPABILITY PAGES (canonical model, 2026-08-18) ---------- */
.plainlist { list-style: none; padding: 0; margin: 0; }
.plainlist li { padding: var(--s-3) 0; border-bottom: var(--border-hairline) solid var(--border-default);
  font-size: var(--fs-small); color: var(--text-secondary); display: flex; gap: var(--s-4); }
.plainlist li::before { content: '—'; color: var(--gold-text); flex-shrink: 0; }
.related-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  gap: var(--s-3) var(--s-6); }
.related-row li { font-size: var(--fs-small); }

/* ---------- FOOTER ---------- */
.footer { background: var(--surface-inverse); color: var(--text-on-dark-soft);
  padding-block: var(--s-9) var(--s-6); }
.footer h4 { color: var(--text-on-dark); font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-bottom: var(--s-4); }
.footer a { color: var(--text-on-dark-soft); text-decoration: none; font-size: var(--fs-small); }
/* Footer columns are .stack of inline anchors; margin-top on an inline element
   does nothing, so the links collapsed onto one line (audit P0). Block them. */
.footer .stack > a { display: block; }
.footer a:hover { color: var(--gold-400); }
.footer a:focus-visible { outline: var(--focus-ring-dark); outline-offset: var(--focus-offset); }
.footer__contact { border-top: var(--border-hairline) solid var(--border-inverse);
  padding-top: var(--s-5); margin-top: var(--s-7); }
.footer__contact p { font-size: var(--fs-small); color: var(--text-on-dark-soft);
  margin-top: var(--s-2); }
.footer__descriptor { font-size: var(--fs-caption); color: var(--text-on-dark-faint);
  border-top: var(--border-hairline) solid var(--border-inverse);
  padding-top: var(--s-5); margin-top: var(--s-7); max-width: var(--measure); }

/* ---------- LOGO — compact, never enlarged for prestige ---------- */
/* flex-shrink 0: the brand is the one element that may never be squeezed —
   a crowded header row previously collapsed the lockup to 0px (audit P0-C). */
.logo { display: inline-flex; align-items: center; gap: var(--s-4); text-decoration: none;
  flex-shrink: 0; }
.logo:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Sized by WIDTH, not height. The approved lockup carries three layers —
   shield, USIDM, and the institutional name — and constraining it to the old
   46px height rendered the name as unreadable micro-text on production. At
   ~300-340px wide (founder target) every layer is legible; the header grows
   with it, which is the accepted trade. The img points at the 520/1040
   derivatives because the 135px nav asset upscaled blurry at this size. */
.logo__lockup { display: block; width: clamp(250px, 23vw, 340px); height: auto; }
@media (max-width: 860px) { .logo__lockup { width: auto; height: 36px; } }
.logo__text--unused { display: flex; flex-direction: column; gap: 3px; }
.logo__name { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.09em;
  color: var(--crimson-800); line-height: 1; font-weight: var(--fw-semibold); }
.logo__descriptor { font-family: var(--font-ui); font-size: 0.625rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-tertiary); line-height: 1; }
.footer .logo__name { color: var(--text-on-dark); }
.footer .logo__descriptor { color: var(--text-on-dark-faint); }
.footer .logo:focus-visible { outline: var(--focus-ring-dark); }
@media (max-width: 620px) { .logo__descriptor { display: none; } .logo__crest { height: 38px; } }

/* ---------- COMING SOON ---------- */
.coming-soon { border: var(--border-hairline) dashed var(--border-strong);
  border-radius: var(--radius-md); padding: var(--s-6); text-align: center;
  color: var(--text-tertiary); }

/* ============================================================
   PHOTOGRAPHY
   Governed image system. Photography participates in editorial
   composition — it is never image+card+image+card, and never
   present only to fill space.
   ============================================================ */

.figure { margin: 0; position: relative; }
.figure__media {
  position: relative; overflow: hidden;
  background: var(--navy-100);
  border-radius: var(--radius-sm);      /* near-square; student zone inherits 6px */
  aspect-ratio: 3 / 2;
}
.figure__media img { width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focal, 50% 50%); }

.figure--3-2  .figure__media { aspect-ratio: 3 / 2; }
.figure--4-3  .figure__media { aspect-ratio: 4 / 3; }
.figure--16-9 .figure__media { aspect-ratio: 16 / 9; }
.figure--4-5  .figure__media { aspect-ratio: 4 / 5; }
.figure--fill .figure__media { aspect-ratio: auto; height: 100%; }

.figure__caption { font-size: var(--fs-caption); color: var(--text-tertiary);
  margin-top: var(--s-3); max-width: 52ch; line-height: 1.5; }
.figure__credit { display: block; margin-top: var(--s-1); color: var(--text-tertiary); opacity: .8; }
.section--dark .figure__caption, .section--crimson .figure__caption { color: var(--text-on-dark-faint); }

/* Full-width environmental band between analytical sections. Used sparingly. */
.media-band { position: relative; overflow: hidden; }
.media-band .figure__media { aspect-ratio: 16 / 9; border-radius: 0; }
@media (min-width: 981px) { .media-band .figure__media { aspect-ratio: 21 / 8; } }
.media-band__caption { position: absolute; inset-inline: 0; bottom: 0;
  padding: var(--s-6) 0; background: linear-gradient(to top, rgba(0,10,43,.72), transparent); }
.media-band__caption p { color: var(--text-on-dark-muted); font-size: var(--fs-small); max-width: 56ch; }

/* Asymmetric image + statement */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
.feature--reverse .feature__media { order: 2; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: var(--s-6); }
  .feature--reverse .feature__media { order: 0; } }

/* ---- DEVELOPMENT-ONLY PROVISIONAL IMAGERY ----
   Every provisional plate carries its brief. Toggle the briefs off to
   judge pure visual balance; toggle on to review what each slot must show.
   No provisional asset may reach production — the build refuses to output
   a page containing data-provisional. */
.figure[data-provisional] .figure__media::after {
  content: 'PROVISIONAL'; position: absolute; top: var(--s-3); inset-inline-start: var(--s-3);
  font-family: var(--font-ui); font-size: 9px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow); color: var(--text-on-dark);
  background: rgba(0,10,43,.72); padding: 3px 7px; border-radius: var(--radius-sm);
}
body[data-briefs="off"] .figure[data-provisional] .figure__media::after { display: none; }
/* ============================================================
   PHASE 2.1 — Internationalization
   New component: .langswitch (the single authorized new visible
   navigation element). Plus the RTL corrections that logical
   properties cannot express on their own.
   No frozen token value changes here.
   ============================================================ */

.langswitch { display: flex; align-items: center; gap: var(--s-2); }

.langswitch__item {
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  color: var(--text-tertiary); text-decoration: none; line-height: 1;
  padding: var(--s-3) var(--s-2); min-height: 44px;
  display: inline-flex; align-items: center;
  border-bottom: var(--border-rule) solid transparent;
  transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.langswitch__item:hover { color: var(--crimson-800); }
.langswitch__item[aria-current="true"] { color: var(--text-primary); border-bottom-color: var(--gold-400); }
.langswitch__item:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* Separator between options — decorative, and dropped at the start of the row. */
.langswitch__item + .langswitch__item { border-inline-start: var(--border-hairline) solid var(--border-default); }

/* Inside the mobile panel the selector sits on its own line, not inline. */
.nav__panel .langswitch { margin-block: var(--s-5) var(--s-4); flex-wrap: wrap; }

@media (max-width: 1080px) {
  .nav__inner > .langswitch { display: none; }   /* the panel carries it at mobile */
}

/* ---- RTL corrections ----
   Reading-order elements mirror. Content with an inherent direction does not:
   the crest, photographs, e-mail addresses, URLs and Latin numerals are all
   left untouched, and .model__link (↔) is symmetric so it must not be "fixed". */

/* Directional cue: a → that points onward must point onward in Arabic too. */
[dir="rtl"] .door__arrow { display: inline-block; transform: scaleX(-1); }

/* The select chevron is painted with background-position, which has no logical
   form — it needs an explicit RTL placement. */
[dir="rtl"] .select { background-position: left var(--s-4) center; }

/* Latin-script data inside RTL prose keeps its own direction. */
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="http"] { unicode-bidi: isolate; direction: ltr; }


/* ---------- PATHWAYS SLIDESHOW (Phase 0B — editorial immersive) ----------
   Photograph carries the slide (~70%% of canvas); the copy sits in an ivory
   editorial panel overlapping the image. Thin progress line, two quiet
   arrows, next slide peeks into view. Manual only. No gradients, no cards. */
.pathways { position: relative; }
.pathways__track { display: flex; gap: var(--s-5); overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: var(--s-7); }
.pathways__track::-webkit-scrollbar { display: none; }
.pathways__slide { flex: 0 0 92%; scroll-snap-align: start; position: relative; }
.pathways__media { aspect-ratio: 16 / 9; overflow: hidden; }
.pathways__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pathways__copy { position: absolute; inset-inline-start: 0;
  inset-block-end: calc(-1 * var(--s-6)); max-width: 40ch;
  background: var(--ivory); padding: var(--s-6) var(--s-7) var(--s-6) 0;
  padding-inline-start: 0; }
.pathways__copy::before { content: ''; position: absolute; inset: 0;
  inset-inline-end: auto; width: 100vw; transform: translateX(-100%);
  background: var(--ivory); }
.pathways__num { font-family: var(--font-display); font-size: var(--fs-caption);
  letter-spacing: 0.1em; color: var(--gold-text); }
.pathways__copy h3 { font-size: var(--fs-h3); margin-block: var(--s-2) var(--s-3); }
.pathways__copy p { color: var(--text-secondary); font-size: var(--fs-small); max-width: 38ch; }
.pathways__controls { display: flex; align-items: center; gap: var(--s-5);
  margin-top: var(--s-8); }
.pathways__arrow { font-family: var(--font-ui); font-size: var(--fs-h4);
  background: none; border: 0; cursor: pointer; color: var(--text-primary);
  padding: var(--s-2) var(--s-3); min-height: 44px; line-height: 1;
  transition: color var(--dur-fast) var(--ease); }
.pathways__arrow:hover { color: var(--crimson-800); }
.pathways__arrow:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pathways__count { font-family: var(--font-display); font-size: var(--fs-small);
  color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pathways__progress { flex: 1 1 auto; height: 2px; background: var(--border-default);
  max-width: 320px; }
.pathways__progress span { display: block; height: 100%; background: var(--gold-600);
  transition: width var(--dur-base) var(--ease); }
@media (max-width: 900px) {
  .pathways__slide { flex-basis: 94%; }
  .pathways__media { aspect-ratio: 3 / 2; }
  .pathways__copy { position: static; max-width: none; padding: var(--s-5) 0 0; }
  .pathways__copy::before { display: none; }
}

/* ---- Glass variant — student-facing test ----
   Owner amendment 2026-08-18: docs/dual-audience-design-principle.md §2–3.
   The panel floats over the lower portion of the media instead of bleeding to
   the page edge: translucent ivory, backdrop blur, subtle border, restrained
   shadow. Solid ivory is the declared fallback (no backdrop-filter support,
   or reduced-transparency preference). The slide number leaves --gold-text
   here: gold fails contrast on the translucent blend — crimson carries it. */
.pathways--glass .pathways__copy {
  inset-inline-start: var(--s-6);
  inset-block-end: var(--s-6);
  padding: var(--s-6);
  background: var(--ivory);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.pathways--glass .pathways__copy::before { display: none; }
.pathways--glass .pathways__num { color: var(--crimson-700); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pathways--glass .pathways__copy {
    background: var(--glass-surface);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    border: var(--border-hairline) solid var(--glass-border);
    box-shadow: var(--shadow-glass);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .pathways--glass .pathways__copy {
    background: var(--ivory);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: var(--shadow-none);
  }
}
@media (max-width: 900px) {
  .pathways--glass .pathways__copy {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: none; border: 0; box-shadow: var(--shadow-none);
    border-radius: 0;
    padding: var(--s-5) 0 0;
  }
}