/* EDULIBRARY SURFACES — the seven archetypes, mapped onto the markup this
 * codebase already ships.
 *
 * The handoff's own instruction is to "recreate these designs in the target
 * codebase's own environment, following its established component, routing and
 * styling patterns" — not to port the mock's inline styles. The page templates
 * here carry a great deal of hard-won correctness in their structure: anchor
 * targets the section index depends on, the blocks `audit:uniqueness` and
 * `audit:depth` measure, schema emission, and the no-script paths. So the
 * design is applied to that vocabulary rather than replacing it.
 *
 * Every value below is a kit token. Nothing here names a colour, size or
 * radius that edulibrary-kit.css has not already defined.
 *
 * ── Owner direction, 2026-09-11: source quietly ───────────────────────────
 * Provenance stays and is not negotiable: the source list, the read dates, the
 * footnote beside a claim, and an explicit "not published" cell. What is
 * removed is the NARRATION — the banner that explains our reading process, the
 * per-fact evidence glyph, the evidence-state facet and the evidence-first
 * order label. A record reads as information carrying its source, not as a
 * status report about how much of it we have got through.
 */

/* ══ ARCHETYPE 4 · RECORD ════════════════════════════════════════════════ */

.col, .col-shell { display: block; }

/* The page's own breadcrumb is superseded by the shell's crumb strip. */
.col-crumb { display: none; }

/* ── Identity block ─────────────────────────────────────────────────────── */

.cpx { display: grid; gap: var(--s4); }
.cpx__card { display: grid; gap: var(--s4); }
/* ⚠️ A COVER IS A BAND, NOT A SCREEN. Unconstrained it rendered 869px tall on a
   900px viewport, so the institution's own name was below the fold on the page
   that exists to name it. 16:9, capped, and the identity block follows it. */
.cpx__cover, .cpx__coverbanner {
  border-radius: var(--r-card); overflow: hidden;
  /* `width:100%` is load-bearing: aspect-ratio alone let the box shrink to the
     width its clamped height implied (604px on a 1280px column) instead of
     letterboxing across the column. */
  width: 100%; aspect-ratio: 16 / 9; max-height: 340px; background: var(--surface-alt);
}
.cpx__coverimg { width: 100%; height: 100%; display: block; object-fit: cover; }
/* The identity row is mark + names; everything after it — state line, figures,
   actions — is a full-width band beneath. Without the basis below they are
   flex items that size to their content, which collapsed the figures grid to
   145px inside a 351px column. */
.cpx__body { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.cpx__body > *:not(.cpx__mark):not(.cpx__names) { flex: 1 1 100%; width: 100%; }
/* A real mark is contained on a neutral plate. Never cropped to fill.
   ⚠️ The plate is white, so the monogram text on it must be navy — inheriting
   the navy-plate sky left "PC" at 1.58:1 on every record that has a logo. */
.cpx__mark--logo { background: var(--surface); border: 1px solid var(--rule); color: var(--field-navy); }
/* Same trade on the directory tile: a contained logo sits on white. */
.ctile:has(.ctile__img) { background: var(--surface); border: 1px solid var(--rule); color: var(--field-navy); }
/* ⚠️ `slate` on the filled action button was 1.24:1. On a filled surface the
   subtitle takes the button's own foreground, not the page's metadata grey. */
.cpx__btn--go .cpx__btnsub { color: #fff; }

/* ⚠️ EVERY NAVY SURFACE NEEDS ITS OWN LINK COLOUR.
   `action-blue` is tuned for a light ground; on `field-navy` it is 2.83:1 and
   a reader cannot see it. `orientation-sky` is the marker colour on navy and
   the README is equally clear it is never text on light. Buttons that carry
   their own fill are excluded — they set both halves themselves. */
.record-hero a:not([class*="primary"]):not(.el-btn),
.course-hero a:not([class*="primary"]),
.course-v2-hero a:not([class*="primary"]),
.portal-hero a:not([class*="primary"]),
.el-band a:not([class*="primary"]) { color: var(--orientation-sky); }
/* ⚠️ NOT `.portal-compare a` — that anchor carries its own sky fill, so giving
   it sky text made the label invisible on its own button. An element that sets
   both halves of the pair is never in this list. */

/* `course-state` sits on the navy hero, where page metadata grey is 2.29:1. */
.course-hero .course-state, .record-hero .course-state { color: var(--on-navy-dim); }
.course-hero .course-state strong, .record-hero .course-state strong { color: #fff; }

/* The placeholder tile's caption: action-blue on surface-alt is 4.36:1. */
.portal-course-card__fallback, .portal-course-card__fallback * { color: var(--ink); }

/* A disabled control keeps the UA's 30%-black label without this. */
button:disabled, [aria-disabled="true"] { color: var(--slate); opacity: 1; }
.cpx__names { flex: 1 1 22ch; min-width: 0; display: grid; gap: var(--s1); }

.cpx__acts, .cpx__shortlist { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.cpx__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--target); padding: 0 var(--s5);
  background: var(--surface); color: var(--action-blue);
  border: 1px solid var(--rule); border-radius: var(--r-control);
  font: 700 16px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-action), border-color var(--t-action);
}
.cpx__btn:hover { background: var(--surface-alt); }
.cpx__btn--go { background: var(--action-blue); color: #fff; border-color: var(--action-blue); }
.cpx__btn--go:hover { background: var(--action-blue-hover); color: #fff; }
.cpx__btnsub { font: 400 13px/1.4 var(--font); color: var(--slate); }
.cpx__save-note { font: 400 13px/1.4 var(--font); color: var(--slate); }

/* ⚠️ THE EVIDENCE BANNER IS NOT A BANNER ANY MORE.
   It printed a paragraph explaining that nobody had read the institution's own
   sources yet — on well over a thousand records, above the institution's own
   name. The claim is preserved where it belongs: the facts grid still says
   "Not published" in the cells nobody has filled, and the source panel still
   lists exactly what was read and when. What is gone is announcing it twice
   before the reader has seen a single fact. */
.cpx__state {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  font: 400 13px/1.4 var(--font); color: var(--slate);
}
.cpx__statehead { font-weight: 700; color: var(--slate); }
.cpx__statebody { display: none; }
.cpx__state--read .cpx__statehead { color: var(--slate); }
.cpx__review-details { font: 400 13px/1.4 var(--font); color: var(--slate); }

/* "What is recorded" — a four-up grid of label/value pairs. `width:100%` and
   `flex-basis:100%` because this block is a child of the flex identity row:
   without them it sized to its content and the figures grid collapsed to a
   185px column on a 351px phone. */
.cpx__what, .cpx__whatmain { display: grid; gap: var(--s2); width: 100%; flex: 1 1 100%; }
.cpx__prov { font: 400 13px/1.4 var(--font); color: var(--slate); }

/* ── Sections ───────────────────────────────────────────────────────────── */

.pfeed { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--s6); align-items: start; }
.pfeed > div:first-child { display: grid; gap: var(--s5); min-width: 0; }

.col-block, .post {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s5); display: grid; gap: var(--s3);
}
.col-block > h2, .post__title, .post__head h2 {
  font: 700 21px/1.22 var(--font); letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.post__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.post__kind, .post__sub, .post__meta {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
/* The feed's social affordances — avatar, pin, reactions — have no job on a
   document and are retired with the rest of the profile metaphor. */
.post__avatar, .post__actions, .post__pin, .post__pinned, .post__meta-dot { display: none; }
.post__body { display: grid; gap: var(--s3); min-width: 0; }
.col-block p, .post p { font: 400 16px/1.58 var(--font); max-width: 66ch; }
.cpxfoot__share, .cpxfoot__note { font: 400 13px/1.4 var(--font); color: var(--slate); }
.col-note { color: var(--slate); font-size: 15px; }

/* ── Facts ──────────────────────────────────────────────────────────────── */

.col-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); margin: 0; }
.col-facts__item { display: grid; gap: var(--s1); padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.col-facts__item dt { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.col-facts__item dd { margin: 0; font: 700 16px/1.35 var(--font); color: var(--ink); }
.col-facts--contact dd { font-weight: 400; }

/* A gap states itself. It is never a blank and never a dash. */
.col-empty {
  font: 400 15px/1.5 var(--font); color: var(--slate);
  padding: var(--s3) var(--s4);
  background: var(--surface-alt); border-radius: var(--r-control);
}

/* ── Provenance, carried quietly ────────────────────────────────────────── */

.col-val { font: inherit; }
.col-cite {
  font: 700 11px/1 var(--font); color: var(--slate);
  text-decoration: none; vertical-align: super; margin-left: 2px;
  padding: 0 2px; border-radius: 2px;
}
.col-cite:hover { color: var(--action-blue); background: var(--pale-sky); }

.prov { border-top: 1px solid var(--rule); padding-top: var(--s4); }
.prov > summary {
  display: flex; align-items: center; gap: var(--s2); min-height: var(--target);
  font: 700 16px/1 var(--font); color: var(--action-blue); cursor: pointer; list-style: none;
}
.prov > summary::-webkit-details-marker { display: none; }
.prov > summary::after { content: '▾'; transition: transform var(--t-disclosure); }
.prov[open] > summary::after { transform: rotate(180deg); }
.prov__count { font: 400 13px/1.4 var(--font); color: var(--slate); }
.prov__body { padding-top: var(--s3); }

.col-sources__list { display: grid; }
.col-sources__label { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }

.col-links, .col-findings { display: grid; }
.col-links li { border-bottom: 1px solid var(--rule-soft); }
.col-links a { display: flex; align-items: center; min-height: var(--target-row); text-decoration: none; font: 400 16px/1.4 var(--font); }
.col-links a:hover { text-decoration: underline; }
.col-findings li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); font: 400 16px/1.58 var(--font); max-width: 66ch; }

/* ── Programme table ────────────────────────────────────────────────────── */

.pledger__row, .pledger__head {
  display: grid; grid-template-columns: minmax(0, 1fr) 100px 100px 150px;
  gap: 0 var(--s4); align-items: center;
  min-height: var(--target-row); padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.pledger__head { border-bottom-color: var(--rule); }
.pledger__head > * { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.pledger__name { font: 700 16px/1.35 var(--font); color: var(--ink); min-width: 0; }
.pledger__level, .pledger__meta { font: 400 13px/1.4 var(--font); color: var(--slate); }
.pledger__seats, .pledger__reg, .pledger__split { font: 700 16px/1.35 var(--font); color: var(--ink); }
/* Per-row evidence glyph — retired with the rest of the announcing. */
.pledger__evidence { display: none; }

.college-research { display: grid; gap: var(--s4); }
.college-research__title { font: 700 21px/1.22 var(--font); }
.college-research__intro, .college-research__programme-intro { font: 400 16px/1.58 var(--font); max-width: 66ch; }
.college-research__group, .college-research__programme-group { display: grid; gap: var(--s2); padding-top: var(--s3); }
.college-research__name, .college-research__programme-name {
  display: flex; align-items: center; min-height: var(--target-row);
  padding: var(--s2) 0; border-bottom: 1px solid var(--rule-soft);
  font: 400 16px/1.4 var(--font);
}
.college-research__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
.college-research__source { font: 400 13px/1.4 var(--font); color: var(--slate); font-style: italic; }

/* ── Gallery ────────────────────────────────────────────────────────────── */

.gal, .gal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.gal__tile { border-radius: var(--r-card); overflow: hidden; background: var(--surface-alt); aspect-ratio: 16 / 9; }
.gal__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cpxfoot { display: flex; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s3); }
.cpxfoot__act { font: 700 14px/1 var(--font); color: var(--action-blue); text-decoration: none; min-height: var(--target); display: inline-flex; align-items: center; }
.cpxfoot__act:hover { text-decoration: underline; }

.updated-stamp { font: 400 13px/1.4 var(--font); color: var(--slate); padding-top: var(--s3); }

/* ── Contact / quick facts ──────────────────────────────────────────────── */

.cfacts { display: grid; }
.cfacts__row { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.cfacts__k { font: 700 11px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.cfacts__v { font: 400 15px/1.45 var(--font); color: var(--ink); min-width: 0; }
.cfacts__v--num, .is-num { font-weight: 700; font-variant-numeric: tabular-nums; }

.pledger { display: grid; }
.pledger__note { font: 400 13px/1.45 var(--font); color: var(--slate); padding-top: var(--s2); }

/* ── Rail ───────────────────────────────────────────────────────────────── */

.prail, .edu-rail, .portal-rail { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.prail__cta, .prail__card, .edu-rail__card, .portal-railcard, .rail__card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s4); display: grid; gap: var(--s2);
}
.prail__head, .prail__ctalabel,
.edu-rail__card h2, .portal-railcard h2, .rail__card h2 {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
  margin: 0;
}
.prail__ctabody, .prail__note { font: 400 13px/1.45 var(--font); color: var(--slate); }

/* Rail entries are a dated line and then the entry. As inline siblings they
   rendered as "10 Sep 2026Every university…" with no separator at all. */
.portal-railcard li, .prail__card li, .edu-rail__card li {
  display: grid; gap: 2px; padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.portal-railcard li:last-child, .prail__card li:last-child { border-bottom: 0; }
.portal-railcard time, .prail__card time, .edu-rail__card time {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
/* ⚠️ `li span` was too wide a net: it also caught `.ctile__mono` nested inside
   the sibling rows, repainting a sky monogram ink on its navy plate at 1.01:1.
   Direct children only — the entry text is a child of the <li>, the monogram
   is three levels down inside a tile. */
.portal-railcard li > span, .prail__card li > span { font: 400 14px/1.45 var(--font); color: var(--ink); }
.prail__ctabtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target); padding: 0 var(--s4);
  background: var(--action-blue); color: #fff; border-radius: var(--r-control);
  font: 700 14px/1 var(--font); text-decoration: none;
}
.prail__ctabtn:hover { background: var(--action-blue-hover); color: #fff; }
.prail__go { font: 700 14px/1 var(--font); text-decoration: none; min-height: var(--target); display: inline-flex; align-items: center; }
.prail__contact, .prail__facts, .prail__sibs { display: grid; }
.prail__institution { font: 400 15px/1.4 var(--font); }
.prail__sibtext {
  display: grid; gap: 2px; padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit;
  min-height: var(--target-row); align-content: center;
}
.prail__sibname { font: 700 15px/1.3 var(--font); color: var(--ink); }
.prail__sibtext:hover .prail__sibname { color: var(--action-blue); }
.prail__sibmeta { font: 400 13px/1.4 var(--font); color: var(--slate); }

/* The in-page section index. Chips, because the sticky duplicate rail that
   used to carry them is retired along with the rest of the profile metaphor. */
.cpxnav, .edu-nav--sub, .pf__index { padding-bottom: var(--s2); }
.cpxnav ul { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cpxnav li { display: contents; }
.cpxnav a, .edu-nav__item--sub {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s3);
  border: 1px solid var(--rule); border-radius: var(--r-chip);
  font: 700 13px/1 var(--font); text-decoration: none; background: var(--surface);
  color: var(--action-blue);
}
.cpxnav a:hover, .edu-nav__item--sub:hover { background: var(--surface-alt); }

/* ══ ARCHETYPE 3 · DIRECTORY ═════════════════════════════════════════════ */

.cdir__head { display: grid; gap: var(--s3); padding-bottom: var(--s4); }
.cdir__head h1 { font: 700 34px/1.15 var(--font); letter-spacing: -.02em; }
.cdir__head p { font: 400 18px/1.5 var(--font); color: var(--slate); max-width: 66ch; }
.cdir__group { display: grid; gap: var(--s2); padding-block: var(--s4); }
.cdir__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }

/* ⚠️ Evidence-first ordering and its explanatory note are retired. Results are
   alphabetical, which needs no explanation and makes no implicit claim. */
.directory-method { display: none; }

/* Results are ruled rows, not cards. 48px minimum. */
.ccard {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule-soft);
  background: none; border-radius: 0; min-height: var(--target-row);
  transition: background-color var(--t-action);
}
.ccard__body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s1); }
.ccard__name, .ccard__leadname { font: 700 16px/1.3 var(--font); color: var(--ink); }
/* The link IS the row, per "every card, row and chip is a single link to one
   route". As an inline anchor it was a 21px target on 2,879 pages. */
.ccard__link, .ccard__leadlink {
  display: flex; align-items: center; min-height: var(--target);
  text-decoration: none; color: inherit;
}
.ccard:hover .ccard__name, .ccard:hover .ccard__leadname { color: var(--action-blue); }
.ccard__meta { font: 400 13px/1.4 var(--font); color: var(--slate); }
/* Per-row evidence badge — retired. */
.ccard__flag { display: none; }
.ccard--lead { background: none; }
.ccard__leadmark { font: 400 13px/1.4 var(--font); color: var(--slate); }

.ctile {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--r-card); overflow: hidden;
  background: var(--field-navy-deep); color: var(--orientation-sky);
  font: 700 13px/1 var(--font);
}
.ctile__img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
/* ⚠️ Set on the monogram itself, not inherited from the tile: `ink` was
   reaching it from the page and landing at 1.01:1 on the navy plate. */
.ctile__mono { font: 700 13px/1 var(--font); color: var(--orientation-sky); }
.ctile:has(.ctile__img) .ctile__mono { color: var(--field-navy); }
.portal-course-card__monogram { color: var(--ink); }

/* Filters */
.cdir__filters, .search-filters { display: grid; gap: var(--s4); }
.search-filter, .cdir__facet { display: grid; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-soft); }

/* ── Courses ────────────────────────────────────────────────────────────── */

.course-v2-grid, .portal-course-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.course-v2-card, .portal-course-card {
  display: grid; gap: var(--s2); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  text-decoration: none; color: inherit;
  transition: background-color var(--t-action), border-color var(--t-action);
}
.course-v2-card:hover, .portal-course-card:hover { background: var(--surface-alt); }
.course-v2-card__eyebrow, .portal-course-card__level {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--action-blue);
}
.course-v2-card__title, .portal-course-card__college { font: 700 17px/1.3 var(--font); color: var(--ink); }
/* ⚠️ THE CARD IS THE TARGET, NOT THE 16px WORD INSIDE IT.
   Each course card is an <article> whose only link sits inline in the meta
   line — a 16px hit area, 1,654 times on one page. The card carries exactly
   one anchor, so stretching that anchor over the card gives the design's
   "every card is a single link to one route" without touching the markup or
   creating a nested control. */
.course-v2-card { position: relative; }
.course-v2-card__meta a::after { content: ''; position: absolute; inset: 0; }
.course-v2-card:focus-within { outline: 2px solid var(--action-blue); outline-offset: 2px; }
.course-v2-card__meta, .course-v2-card__context, .portal-course-card__subject { font: 400 13px/1.4 var(--font); color: var(--slate); }
.course-v2-card__rule { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--s2) 0 0; }
/* The per-card subject icon set is retired: the system uses no icons. */
.course-v2-card__icon, .course-v2-card__dot, .portal-course-card__dot, .portal-course-card__monogram { display: none; }
.course-v2-card__status, .portal-course-card__status { font: 400 13px/1.4 var(--font); color: var(--slate); }
.portal-course-card__facts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.portal-course-card__media { border-radius: var(--r-control); overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-alt); }
/* `slate` on `surface-alt` lands at 4.36:1 — under the 4.5 floor by a hair. */
.portal-course-card__media-label { color: var(--ink); font: 400 12px/1.4 var(--font-code); }
.portal-course-card__media img { width: 100%; height: 100%; object-fit: cover; }
.portal-course-card__actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s2); }
.portal-course-card__open, .portal-course-card__compare {
  min-height: var(--target); display: inline-flex; align-items: center;
  font: 700 14px/1 var(--font); text-decoration: none;
}

/* The yellow discovery-versus-verification band is retired with the rest of
   the announcing. Discovery and verification are distinguished in the cells. */
.course-v2-evidence-band, .courses-evidence-band { display: none; }

/* ══ ARCHETYPE 5 · ARTICLE ═══════════════════════════════════════════════ */

.answer, .answer-body, .answer-library { display: grid; gap: var(--s5); }
.answer-body h2, .answer__body h2 { font: 700 26px/1.2 var(--font); letter-spacing: -.02em; padding-top: var(--s4); }
.answer-body h3, .answer__body h3 { font: 700 21px/1.25 var(--font); }
.answer-body p, .answer__body p { font: 400 17px/1.65 var(--font); max-width: 66ch; }
.answer-body ul, .answer__body ul { display: grid; gap: var(--s2); max-width: 66ch; }
.answer-body li, .answer__body li { font: 400 17px/1.6 var(--font); padding-left: var(--s4); position: relative; }
.answer-body li::before, .answer__body li::before { content: '·'; position: absolute; left: var(--s2); color: var(--slate); }

/* The byline's name and its scope line are two inline spans; without a stack
   they read as "EduLibraryTribhuvan University colleges". */
.ans-by { padding-block: var(--s2); }
.ans-by__meta { display: grid; gap: 2px; }
.ans-by__name { font: 700 14px/1.3 var(--font); color: var(--ink); }
.ans-by__sub { font: 400 13px/1.4 var(--font); color: var(--slate); }

.answer-rail, .answer__toc { display: grid; gap: var(--s2); align-content: start; }
.answer-rail a, .answer__toc a { display: flex; align-items: center; min-height: var(--target); font: 400 14px/1.35 var(--font); text-decoration: none; }

.answer-library__crumb { display: none; }
.answer-library__section { display: grid; gap: var(--s3); }
.answer-shelf__status { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.answer-shelf__answers { display: grid; }
.answer-shelf__answers li { border-bottom: 1px solid var(--rule-soft); }
.answer-shelf__answers a { display: flex; align-items: center; min-height: var(--target-row); text-decoration: none; font: 400 16px/1.4 var(--font); }
.answer-shelf__related { display: flex; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.answer-shelf__related a { min-height: var(--target); display: inline-flex; align-items: center; font: 700 14px/1 var(--font); text-decoration: none; }

.answer-course-row { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); }
.answer-course-row__title { font: 700 16px/1.3 var(--font); }
.answer-course-row__open { font: 700 14px/1 var(--font); text-decoration: none; }
.answer-course-filter { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.answer-course-status { font: 700 16px/1 var(--font); }

/* ══ ARCHETYPE 6 · COMPARE ═══════════════════════════════════════════════ */

.record-workspace { display: grid; gap: var(--s5); }
.record-hero {
  background: var(--field-navy); color: var(--on-navy);
  border-radius: var(--r-card); padding: var(--s6);
  display: grid; gap: var(--s3);
}
.record-hero__wash, .record-hero__media { display: none; }
.record-hero__inner, .record-hero__copy { display: grid; gap: var(--s3); }
.record-hero h1 { font: 700 34px/1.15 var(--font); color: #fff; }
.record-hero__lede { font: 400 18px/1.5 var(--font); color: var(--on-navy-dim); max-width: 66ch; }
.record-hero__stats { display: flex; flex-wrap: wrap; gap: var(--s5); }
.record-hero__links, .record-hero__action { display: flex; flex-wrap: wrap; gap: var(--s3); }
.record-hero__primary {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s5);
  background: var(--orientation-sky); color: var(--field-navy); border-radius: var(--r-control);
  font: 700 16px/1 var(--font); text-decoration: none;
}
.compare-help { font: 400 15px/1.5 var(--font); color: var(--slate); max-width: 66ch; }

/* ══ ARCHETYPE 7 · UTILITY ═══════════════════════════════════════════════ */

.search-page, .search-workspace { display: grid; gap: var(--s5); max-width: 860px; margin-inline: auto; }
.search-head { display: grid; gap: var(--s3); }
.search-head h1 { font: 700 34px/1.15 var(--font); letter-spacing: -.02em; }
.search-workspace__intro, .search-scope { font: 400 18px/1.5 var(--font); color: var(--slate); }
.search-form { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.search-form__label { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.search-form__input {
  flex: 1 1 20ch; min-height: var(--target); padding: 0 var(--s3);
  border: 1px solid var(--rule); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font);
}
.search-form__submit {
  min-height: var(--target); padding: 0 var(--s5); border: 0; border-radius: var(--r-control);
  background: var(--action-blue); color: #fff; font: 700 16px/1 var(--font); cursor: pointer;
}
.search-form__submit:hover { background: var(--action-blue-hover); }
.search-status { font: 700 16px/1 var(--font); }
.search-start, .search-results { display: grid; }
.search-start li, .search-results li { border-bottom: 1px solid var(--rule-soft); }
.search-start a, .search-results a { display: flex; align-items: center; min-height: var(--target-row); text-decoration: none; font: 400 16px/1.4 var(--font); }
.search-noscript { font: 400 15px/1.5 var(--font); color: var(--slate); }

/* ══ DISCOVERY HUBS — the directory with the filters removed ═════════════ */

.discovery-page { display: grid; gap: var(--s5); }
.discovery-crumb { display: none; }
.discovery-heading { display: grid; gap: var(--s3); }
.discovery-heading h1 { font: 700 34px/1.15 var(--font); letter-spacing: -.02em; }
.discovery-heading p { font: 400 18px/1.5 var(--font); color: var(--slate); max-width: 66ch; }
.discovery-section { display: grid; gap: var(--s3); }
.discovery-section h2 { font: 700 21px/1.22 var(--font); }
.discovery-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s5); }
.discovery-links a {
  display: flex; align-items: center; min-height: var(--target-row);
  border-bottom: 1px solid var(--rule-soft); text-decoration: none;
  font: 400 16px/1.4 var(--font);
}
.discovery-links a:hover { color: var(--action-blue); }
.discovery-card {
  display: grid; gap: var(--s2); padding: var(--s4);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  text-decoration: none; color: inherit;
}
.discovery-card:hover { background: var(--surface-alt); }
.discovery-note, .discovery-method { font: 400 13px/1.45 var(--font); color: var(--slate); max-width: 66ch; }
.discovery-method h2 { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }

/* ══ ARCHETYPE 2 · HOME ══════════════════════════════════════════════════ */

.home-portal { display: grid; gap: var(--s6); }

/* The hero band: navy, centred, 3px sky rule under it. The photographic field,
   the wash and the route emblems are retired — this band is type and one
   search, matching every other navy surface in the system. */
/* ⚠️ FULL-BLEED, MEASURED AGAINST THE MOCK.
   The mock's hero is 1440 wide — the whole frame. Mine was 1360, because
   `margin-inline: -40px` only reaches the content cap's edge, leaving a strip
   of paper down both sides. A navy band that stops short of the viewport reads
   as a panel sitting on the page rather than as the page's own header, and
   that was a large part of why the mock looked anchored and mine did not.
   `overflow-x: clip` on the body (not `hidden`) guards the scrollbar without
   creating a scroll container, so `position: sticky` still works elsewhere. */
.portal-hero {
  background: var(--field-navy); color: var(--on-navy);
  border-bottom: 3px solid var(--orientation-sky);
  width: 100vw; margin-inline: calc(50% - 50vw);
  padding: 44px var(--gutter) 40px;
  text-align: center;
}
.portal-hero__inner, .portal-hero__main { display: grid; gap: var(--s5); justify-items: center; max-width: var(--cap); margin-inline: auto; }
/* ⚠️ `nowrap` + `min-height` are what stop the band reflowing as the phrase
   types and erases — without them the hero jumps a line every cycle and the
   whole page below it shifts. README: 48px desktop, 36px at the 26px size. */
.portal-hero h1 {
  font: 700 40px/1.2 var(--font); letter-spacing: -.02em; color: #fff;
  white-space: nowrap; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
}
.portal-hero h1 > span[aria-hidden] { display: inline-flex; align-items: baseline; }
.portal-hero p { font: 400 18px/1.5 var(--font); color: var(--on-navy-dim); max-width: 62ch; }
/* Superseded by .el-hero__typed once the typing headline was actually rendered. */

/* ⚠️ CORRECTION A3 — 44px, NOT 36.
   I had sized these as decorative chips. They are the primary mobile entry
   points into the record, and the kit's 44px minimum has no exceptions. */
.portal-hero__routes { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.portal-hero__routes a {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 14px;
  border: 1px solid rgb(255 255 255 / .3); border-radius: var(--r-chip);
  color: var(--on-navy); font: 700 15px/1 var(--font); text-decoration: none;
}
.portal-hero__routes a:hover { background: rgb(255 255 255 / .12); }

/* ⚠️ `.portal-search`, `.portal-field` and `.portal-queryline` WERE DEFINED
   TWICE — once here and again in the search-bar block further down, with the
   later copy silently winning. The design review caught it as "some blocks are
   styled twice, and the portal layer wins". The single authoritative copy is
   the one beside the rest of the hero search rules; this one is removed. */
.portal-field { flex: 1 1 0; display: grid; gap: 2px; padding: var(--s3) var(--s4); }
.portal-field label, .portal-field > span { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.portal-field input, .portal-field select { border: 0; padding: 0; background: none; color: var(--ink); font: 400 16px/1.3 var(--font); width: 100%; }

.portal-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: var(--s6); align-items: start; }
/* 20px between modules, not 24 — measured off the mock's main column. */
.portal-main { display: grid; gap: 20px; min-width: 0; }

/* ⚠️ PADDING AND A RULED HEADER, MEASURED AGAINST THE MOCK.
   Mine was a uniform 24px box with the title floating inside it. The mock's
   module card is `4px 20px 14px` — tight at the top, because its header band
   supplies its own `16px 0 12px` and closes with a 1px rule. Uniform padding
   plus an unruled title is what made these read as generic boxes; the rule is
   what gives the module an internal structure to hang content from. */
.portal-card, .portal-browse, .portal-levels, .portal-admissions, .portal-docs,
.portal-faqs, .portal-about, .portal-guides, .portal-course-records, .portal-campus-intro {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: 4px 20px 14px; display: grid; gap: var(--s3);
}
.portal-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) 0 var(--s3); border-bottom: 1px solid var(--rule);
}
.portal-card__head h2, .portal-browse h2, .portal-levels h2, .portal-admissions h2,
.portal-docs h2, .portal-faqs h2, .portal-about h2, .portal-guides h2, .portal-course-records h2 {
  font: 700 21px/1.22 var(--font); letter-spacing: -.02em;
}
.portal-more, .cpxfoot__act, .prail__go, .answer-shelf__related a, .course-v2-filters__reset {
  gap: var(--s1);
}
.portal-more { font: 700 15px/1 var(--font); text-decoration: none; min-height: var(--target); display: inline-flex; align-items: center; }
/* Every standalone card/section link gets the floor; inline links inside
   running prose keep their line box and are excluded by being inline. */
.discovery-card a, .answer-shelf-card a, .portal-card a:not([class]),
.course-v2-results__heading a, .course-v2-browse-help a {
  min-height: var(--target); display: inline-flex; align-items: center;
}
.discovery-card { min-height: var(--target); }

.browse__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: var(--target-row); padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit;
}
.browse__link:hover { background: var(--surface-alt); }
.browse__name { font: 400 16px/1.4 var(--font); }
.browse__link:hover .browse__name { color: var(--action-blue); }
.browse__n { font: 700 14px/1 var(--font); color: var(--action-blue); }

/* The compare module is the one navy band in the body. */
.portal-compare {
  background: var(--field-navy); color: var(--on-navy);
  border-radius: var(--r-card); padding: var(--s6); display: grid; gap: var(--s3);
}
.portal-compare h2 { font: 700 26px/1.2 var(--font); color: #fff; }
.portal-compare p { color: var(--on-navy-dim); max-width: 62ch; }
.portal-compare__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.portal-compare__go {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s5);
  background: var(--orientation-sky); color: var(--field-navy);
  border-radius: var(--r-control); font: 700 16px/1 var(--font); text-decoration: none;
}
.portal-compare__go:hover { background: #B4E5FF; color: var(--field-navy); }
/* The ghost sibling: same height, no fill, so the primary keeps its weight. */
.portal-compare__list {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s5);
  border: 1px solid rgb(255 255 255 / .3); border-radius: var(--r-control);
  color: var(--on-navy); font: 700 16px/1 var(--font); text-decoration: none;
}
.portal-compare__list:hover { background: rgb(255 255 255 / .12); color: var(--on-navy); }

.portal-campus-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.portal-campus-card {
  display: grid; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  overflow: hidden; text-decoration: none; color: inherit;
}
.portal-campus-card:hover { background: var(--surface-alt); }
.portal-campus-card__image { aspect-ratio: 16 / 9; background: var(--surface-alt); }
.portal-campus-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portal-campus-card__copy { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s1); }
.portal-campus-card__action { font: 700 14px/1 var(--font); color: var(--action-blue); }
.portal-campus-card__fallback { display: grid; place-items: center; aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, #F5F8FB 0 10px, #E7EFF6 10px 20px); font: 400 12px/1.4 var(--font-code); color: var(--slate); }

.portal-note, .portal-map-note, .portal-course-records__intro,
.portal-course-records__noscript { font: 400 13px/1.45 var(--font); color: var(--slate); max-width: 66ch; }
.portal-course-records__status { font: 700 16px/1 var(--font); }
.portal-course-records__tools { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* The ticker and the subject strip are retired with the home shell variant. */
.portal-ticker, .portal-subjects { display: none; }

/* ── Canvas 8 modules ──────────────────────────────────────────────────────
   Built as their own markup rather than restyled from the old portal blocks,
   because the shapes are new: a monogram-tile university card with a ruled
   count footer, a photo-led college card with pill facts, and a numbered
   answer tile under a navy header bar. */

/* Its own class: .portal-queryline is display:contents so the hero search
   segments can sit directly on the bar, which is the opposite of a chip row. */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ⚠️ AUTO-FIT, NOT A FIXED FOUR.
   The mock fits four across because its four sample names are short. The
   record's real names are "Agriculture and Forestry University" and "Lumbini
   Technological University", which at a fixed quarter-width wrapped onto three
   lines each and left the grid ragged. A 230px floor keeps four across where
   the names allow and drops to three where they do not. */
/* ⚠️ AUTO-FIT, AND A TWO-LINE NAME BOX.
   The mock fits four across because its four sample names are short — the
   longest is "Kathmandu University" at 20 characters. The record's real names
   run to "Agriculture and Forestry University" at 35, which at a fixed
   quarter-width wrapped to THREE lines on ten of thirteen cards and left the
   grid ragged. A 250px floor stops the worst packing; the reserved two-line
   box keeps every card's rule and count on the same baseline whether the name
   takes one line or two. One line for every name is not reachable at any
   sensible card width, so the fix is to make two lines look deliberate. */
.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.uni-card__name { font-size: 15px; line-height: 1.3; text-wrap: balance; }
.uni-card__id { min-height: calc(15px * 1.3 * 2 + 2px + 14px * 1.4); }
/* ⚠️ PAPER, NOT WHITE — the tonal step I had flattened.
   The mock runs paper canvas → white module card → PAPER-tinted inner cards.
   I made the module and its cards both white, so the cards dissolved into
   their container and the whole page read as one undifferentiated sheet. One
   step of tone is what separates "cards on a panel" from "a wall of text". */
.uni-card {
  display: grid; gap: 10px; align-content: start;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s4); text-decoration: none;
  transition: background-color var(--t-action), border-color var(--t-action);
}
.uni-card:hover { background: var(--surface-alt); border-color: var(--action-blue); }
.uni-card__top { display: flex; align-items: center; gap: var(--s3); }
.uni-card__id { display: grid; gap: 2px; min-width: 0; }
.uni-card__name { font: 700 16px/1.3 var(--font); color: var(--ink); }
.uni-card:hover .uni-card__name { color: var(--action-blue); }
/* 14/400 slate, not 13 — measured. The mock sets every card's location line at
   14px; a third of my page was 13px grey, which is what made it read dense. */
.uni-card__where { font: 400 14px/1.4 var(--font); color: var(--slate); }
.uni-card__foot {
  display: flex; align-items: baseline; gap: var(--s2);
  border-top: 1px solid var(--rule); padding-top: var(--s3);
  font: 400 13px/1.4 var(--font); color: var(--slate);
}
.uni-card__n { font: 700 20px/1 var(--font); color: var(--action-blue); }

.col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.col-card {
  display: grid; grid-template-rows: auto 1fr auto; align-content: start;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-card);
  overflow: hidden; text-decoration: none;
  transition: background-color var(--t-action), border-color var(--t-action);
}
.col-card { position: relative; }
.col-card:hover { background: var(--surface-alt); border-color: var(--action-blue); }
.col-card:focus-within { outline: 2px solid var(--action-blue); outline-offset: 2px; }
/* The name's anchor is the card's hit area — see the note in index.astro. */
.col-card__name { text-decoration: none; }
.col-card__name::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.col-card__media { width: 100%; height: 88px; object-fit: cover; display: block; background: var(--surface-alt); }
.col-card__media--none { background: repeating-linear-gradient(135deg, #F5F8FB 0 10px, #E7EFF6 10px 20px); }
.col-card__body { display: grid; gap: 10px; padding: var(--s3) var(--s4); align-content: start; }
.col-card__name { font: 700 16px/1.3 var(--font); color: var(--ink); }
.col-card:hover .col-card__name { color: var(--action-blue); }
.col-card__where { font: 400 14px/1.4 var(--font); color: var(--slate); }
.col-card__facts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.col-card__foot {
  border-top: 1px solid var(--rule); padding: var(--s3) var(--s4);
  font: 700 14px/1 var(--font); color: var(--action-blue);
  display: flex; align-items: center; gap: var(--s1); min-height: var(--target);
}

.answers-mod {
  background: var(--surface-alt); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden;
}
.answers-mod__head {
  display: flex; align-items: center; gap: var(--s4);
  background: var(--field-navy-deep); color: var(--on-navy);
  padding: var(--s4) var(--s5);
}
.answers-mod__mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: var(--r-chip);
  border: 2px solid var(--orientation-sky); color: var(--orientation-sky);
  font: 700 20px/1 var(--font);
}
.answers-mod__title { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.answers-mod__title h2 { font: 700 21px/1.22 var(--font); color: #fff; }
.answers-mod__title p { font: 400 14px/1.4 var(--font); color: var(--on-navy-dim); }
.answers-mod__all {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s1);
  min-height: var(--target); padding: 0 var(--s4);
  background: var(--orientation-sky); color: var(--field-navy);
  border-radius: var(--r-control); font: 700 15px/1 var(--font); text-decoration: none;
}
.answers-mod__all:hover { background: #B4E5FF; color: var(--field-navy); }
.answers-mod__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s5); }
.answer-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3);
  align-items: center; padding: var(--s3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-card);
  text-decoration: none; transition: background-color var(--t-action);
}
.answer-tile { position: relative; }
.answer-tile:hover { background: var(--surface-alt); }
.answer-tile:focus-within { outline: 2px solid var(--action-blue); outline-offset: 2px; }
/* The title's anchor is the card's hit area — see the note in index.astro. */
.answer-tile__title::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.answer-tile__n {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: var(--field-navy-deep); color: var(--orientation-sky);
  border-radius: var(--r-control); font: 700 14px/1 var(--font);
}
.answer-tile__body { display: grid; gap: 2px; min-width: 0; }
.answer-tile__cat { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--action-blue); }
.answer-tile__title { font: 700 17px/1.3 var(--font); color: var(--ink); text-decoration: none; }
.answer-tile:hover .answer-tile__title { color: var(--action-blue); }
.answer-tile__meta { font: 400 14px/1.4 var(--font); color: var(--slate); }
.answer-tile__go {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: var(--action-blue); color: #fff; border-radius: var(--r-control); font-size: 15px;
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  .pfeed, .portal-body { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .course-v2-grid, .portal-course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .cpx__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdir__grid, .discovery-links, .portal-campus-cards, .gal, .gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-v2-grid, .portal-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-hero h1 { font-size: 26px; line-height: 1.3; min-height: 36px; }
  .portal-search { flex-direction: column; }
  .portal-field { border-right: 0; border-bottom: 1px solid var(--rule); }
  .cpx__name, .cdir__head h1, .search-head h1, .discovery-heading h1, .record-hero h1 { font-size: 26px; }
  .col-block, .post, .portal-card, .portal-browse, .portal-levels, .portal-admissions,
  .portal-docs, .portal-faqs, .portal-about, .portal-guides, .portal-course-records { padding: var(--s4); }
  /* Three narrow numeric columns do not fit; the name and the headline number do. */
  .pledger__row, .pledger__head { grid-template-columns: minmax(0, 1fr) 90px; }
  .pledger__reg, .pledger__split { display: none; }
  .ccard { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .cpx__figures, .col-facts, .college-research__facts { grid-template-columns: minmax(0, 1fr); }
  .cdir__grid, .discovery-links, .portal-campus-cards, .gal, .gal__grid,
  .course-v2-grid, .portal-course-grid { grid-template-columns: minmax(0, 1fr); }
  .cpx__mark { width: 48px; height: 48px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PASS 2 — the remaining families, read off the live DOM rather than guessed
   from a stale build.
   ══════════════════════════════════════════════════════════════════════════ */

/* Page-level breadcrumbs are superseded by the shell's crumb strip. */
.course-v2-crumb, .course-crumb { display: none; }

/* ── The shared page header ─────────────────────────────────────────────────
   `record-hero` already carries colleges, compare, search, answers and 404, so
   it is the one page header. The photographic field and its wash are retired:
   a flat navy band, a 3px sky rule under it, and the type does the work. */
.record-hero { border-bottom: 3px solid var(--orientation-sky); }
.record-hero--compact { padding: var(--s5) var(--s6); }
.record-hero__stats > * { display: grid; gap: var(--s1); }
.record-hero__stats strong, .record-hero__stats b { font: 700 26px/1 var(--font); color: #fff; }
.record-hero__stats span { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-faint); }
.record-hero__links a { color: var(--orientation-sky); font: 700 14px/1 var(--font); min-height: var(--target); display: inline-flex; align-items: center; }
/* ⚠️ The rule above made the primary button sky text on a sky fill — an
   invisible label on every directory, compare, search, answers and 404 header.
   `orientation-sky` is a marker colour and the README is explicit that it is
   never text on a light ground; on its own fill the label is navy. */
.record-hero .record-hero__primary { color: var(--field-navy); background: var(--orientation-sky); }
.record-hero .record-hero__primary:hover { background: #B4E5FF; color: var(--field-navy); }

/* ── Directory · colleges ───────────────────────────────────────────────── */
.directory-coverage, .directory-noscript { font: 400 13px/1.45 var(--font); color: var(--slate); max-width: 66ch; }
.directory-method--lead { display: none; }
.cdir-filter { display: grid; gap: var(--s3); padding-block: var(--s4); }
.cdir-filter__field { display: grid; gap: var(--s1); }
.cdir-filter__field > label, .cdir-filter__field > span {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate);
}
.cdir-filter__field input, .cdir-filter__field select {
  min-height: var(--target); padding: 0 var(--s3);
  border: 1px solid var(--rule); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font); width: 100%;
}
.cdir-facets { display: grid; gap: var(--s4); }
.cdir-facets__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.cdir-chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding-block: var(--s3); }
.cdir-chips a, .cdir-chips button {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--target); padding: 0 var(--s4);
  background: var(--surface-alt); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-chip);
  font: 700 14px/1 var(--font); text-decoration: none; cursor: pointer;
}
.cdir-chips a:hover, .cdir-chips button:hover { background: var(--surface); }

/* ── Directory · courses ────────────────────────────────────────────────── */
.course-page, .course-directory-v2 { display: grid; gap: var(--s5); }
.course-v2-hero {
  background: var(--field-navy); color: var(--on-navy);
  border-radius: var(--r-card); padding: var(--s6);
  display: grid; gap: var(--s4); border-bottom: 3px solid var(--orientation-sky);
}
.course-v2-hero__media, .course-v2-hero__wash { display: none; }
.course-v2-hero__inner, .course-v2-hero__copy { display: grid; gap: var(--s3); }
.course-v2-hero h1 { font: 700 34px/1.15 var(--font); color: #fff; }
.course-v2-hero__label { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--orientation-sky); }
.course-v2-hero__search { display: flex; gap: var(--s3); flex-wrap: wrap; max-width: 860px; }
.course-v2-hero__search input {
  flex: 1 1 24ch; min-height: var(--target); padding: 0 var(--s3);
  border: 1px solid var(--rule); border-radius: var(--r-control);
  background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font);
}
.course-v2-hero__search button {
  min-height: var(--target); padding: 0 var(--s5); border: 0; border-radius: var(--r-control);
  background: var(--orientation-sky); color: var(--field-navy); font: 700 16px/1 var(--font); cursor: pointer;
}
.course-v2-subjects, .course-v2-results, .course-v2-filters {
  background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s5); display: grid; gap: var(--s3);
}
.course-v2-subject-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.course-v2-subject-grid a, .course-v2-subject-grid button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s2);
  min-height: var(--target); padding: 0 var(--s3);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-chip);
  font: 700 14px/1 var(--font); color: var(--ink); text-decoration: none; cursor: pointer;
}
.course-v2-subject-grid .is-active, .course-v2-subject-grid a.is-active {
  background: var(--field-navy); color: var(--on-navy); border-color: var(--field-navy);
}
.course-v2-results__heading { font: 700 16px/1 var(--font); }
.course-v2-filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.course-v2-filters label { display: grid; gap: var(--s1); font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.course-v2-filters select, .course-v2-filters input {
  min-height: var(--target); padding: 0 var(--s3); border: 1px solid var(--rule);
  border-radius: var(--r-control); background: var(--surface); color: var(--ink); font: 400 16px/1 var(--font);
}
.course-v2-filters__reset { font: 700 14px/1 var(--font); min-height: var(--target); display: inline-flex; align-items: center; }
.course-v2-noscript, .course-v2-browse-help { font: 400 13px/1.45 var(--font); color: var(--slate); max-width: 66ch; }

/* ── Record · course profile ────────────────────────────────────────────── */
.course-profile { display: grid; gap: var(--s5); }
.course-hero {
  background: var(--field-navy); color: var(--on-navy);
  border-radius: var(--r-card); padding: var(--s6);
  display: grid; gap: var(--s3); border-bottom: 3px solid var(--orientation-sky);
}
.course-hero h1 { font: 700 34px/1.15 var(--font); color: #fff; }
.course-hero__classification { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--orientation-sky); }
.course-hero__lede { font: 400 18px/1.5 var(--font); color: var(--on-navy-dim); max-width: 66ch; }
.course-hero__facts { display: flex; flex-wrap: wrap; gap: var(--s5); }
.course-hero__facts > * { display: grid; gap: var(--s1); }
.course-state { font: 400 13px/1.4 var(--font); color: var(--slate); }
/* ⚠️ `color` IS NOT OPTIONAL ON A LIGHT SURFACE.
   `.course-field-map` is a white card nested INSIDE the navy hero, so it
   inherited the hero's `on-navy` text and rendered #EEF5FB on #FFFFFF — a
   1.10:1 invisible list on every course record. Any surface that sets a light
   background must also assert its foreground. */
.course-field-map, .course-section, .course-research {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s5); display: grid; gap: var(--s3);
}
.course-field-map__eyebrow, .course-research__subhead, .course-section__heading {
  font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin: 0;
}
.course-section > h2, .course-research > h2 { font: 700 21px/1.22 var(--font); letter-spacing: -.02em; }
.course-field-map__note, .course-research__source { font: 400 13px/1.45 var(--font); color: var(--slate); }
.course-research__body, .course-research__plain { font: 400 16px/1.58 var(--font); max-width: 66ch; display: grid; gap: var(--s3); }
.course-research__facts, .course-research__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s5); }
.offering-list { display: grid; }
.offering {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--target-row); padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit;
}
.offering:hover { background: var(--surface-alt); }
.offering__media img { width: 100%; height: 100%; object-fit: contain; }

/* ── Compare ────────────────────────────────────────────────────────────── */
.cled-shell { display: grid; gap: var(--s4); }
.cled-status { font: 700 16px/1 var(--font); }
.cled-empty, .cled-noscript {
  display: grid; gap: var(--s3); padding: var(--s6); justify-items: start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
}
.cled-empty__storage { font: 400 13px/1.45 var(--font); color: var(--slate); }
.cled-empty__go {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s5);
  background: var(--action-blue); color: #fff; border-radius: var(--r-control);
  font: 700 16px/1 var(--font); text-decoration: none;
}
.cled-empty__go:hover { background: var(--action-blue-hover); color: #fff; }
.col-block--note { background: var(--surface-alt); }

/* ── Search ─────────────────────────────────────────────────────────────── */
.search-coverage { display: grid; gap: var(--s2); }
.search-coverage__rows { display: grid; }
.search-coverage__rows > * {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: var(--target-row); border-bottom: 1px solid var(--rule-soft);
  font: 400 15px/1.4 var(--font);
}

/* ── Answer Library ─────────────────────────────────────────────────────── */
.answer-library__intro { font: 400 18px/1.5 var(--font); color: var(--slate); max-width: 66ch; }
/* ⚠️ The same class is on a <section> of prose AND on a <nav> of bare anchors.
   As a block the nav ran its five links together into one unreadable string:
   "Entrance & eligibilityFees & costsScholarships…". */
nav.answer-library__intro { display: flex; flex-wrap: wrap; gap: var(--s2); max-width: none; }
nav.answer-library__intro a {
  display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--s4);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-chip);
  font: 700 14px/1 var(--font); color: var(--action-blue); text-decoration: none;
}
nav.answer-library__intro a:hover { background: var(--surface-alt); }
/* The standing panel explaining how answers get checked is retired; each shelf
   states its own condition, which is the quieter and more specific answer. */
.answer-library__evidence { display: none; }
.answer-library__heading { font: 700 21px/1.22 var(--font); letter-spacing: -.02em; }
.answer-library__kicker { font: 700 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.answer-shelf-grid, .answer-subject-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.answer-shelf-card {
  display: grid; gap: var(--s2); padding: var(--s4); align-content: start;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  text-decoration: none; color: inherit; min-height: var(--target-row);
  transition: background-color var(--t-action);
}
.answer-shelf-card:hover { background: var(--surface-alt); }
/* ⚠️ THE UNIVERSITY IS THE HEADLINE, NOT ITS WRITING STATE.
   The markup order is state → title → counts, so nine of the thirteen shelves
   opened with "CONTENT TO BE WRITTEN SOON" set larger and louder than the
   university it describes. The state is required — the handoff says an
   unfinished shelf must not imitate a finished article — but it belongs under
   the name as metadata, which is also the owner's 2026-09-11 direction to
   source quietly. Reordered in CSS so the markup keeps its meaning. */
.answer-shelf-card { display: flex; flex-direction: column; gap: var(--s1); }
.answer-shelf-card__title { order: 1; font: 700 17px/1.3 var(--font); color: var(--ink); }
.answer-shelf-card__title a { color: inherit; text-decoration: none; }
.answer-shelf-card:hover .answer-shelf-card__title a { color: var(--action-blue); }
.answer-shelf-card > p:not([class]) { order: 2; font: 400 13px/1.4 var(--font); color: var(--slate); }
.answer-shelf-card__state {
  order: 3; margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--rule-soft);
  font: 400 13px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--slate);
}
.answer-shelf-card--published .answer-shelf-card__state { color: var(--action-blue); font-weight: 700; }

/* ── Subject shelves ────────────────────────────────────────────────────── */
.answer-subject-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3);
  align-items: center; padding: var(--s3) var(--s4);
}
.answer-subject-card > span[aria-hidden] {
  grid-row: span 2; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--r-control);
  background: var(--field-navy-deep); color: var(--orientation-sky);
  font: 700 14px/1 var(--font);
}
.answer-subject-card strong { font: 700 16px/1.3 var(--font); color: var(--ink); align-self: end; }
.answer-subject-card small { font: 400 13px/1.4 var(--font); color: var(--slate); align-self: start; }
.answer-subject-card:hover strong { color: var(--action-blue); }

/* ── Published answers, grouped by awarding body ────────────────────────── */
.answer-published-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.answer-published-group {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s4); display: grid; gap: var(--s2); align-content: start;
}
.answer-published-group > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--rule);
}
.answer-published-group h3 { font: 700 17px/1.3 var(--font); letter-spacing: -.01em; }
.answer-published-group h3 a { text-decoration: none; }
.answer-published-group > header span { font: 400 13px/1.4 var(--font); color: var(--slate); white-space: nowrap; }
.answer-published-group ul { display: grid; }
/* ⚠️ The question and its date are inline siblings — without a stack they read
   as "…affiliated to Tribhuvan University?31 Aug 2026". */
.answer-published-group li {
  display: grid; gap: 2px; padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.answer-published-group li:last-child { border-bottom: 0; }
.answer-published-group li a {
  font: 400 15px/1.45 var(--font); text-decoration: none;
  min-height: var(--target); display: flex; align-items: center;
}
.answer-published-group li a:hover { text-decoration: underline; }
.answer-published-group li time { font: 400 13px/1.4 var(--font); color: var(--slate); }
.pf-list { display: grid; }
.pf-list li { border-bottom: 1px solid var(--rule-soft); }
.pf-list a { display: flex; align-items: center; min-height: var(--target-row); text-decoration: none; font: 400 16px/1.4 var(--font); }

/* ── Discovery ──────────────────────────────────────────────────────────── */
.discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }

/* ── Home ───────────────────────────────────────────────────────────────── */
.portal-shell { display: grid; gap: var(--s6); }
/* Correction A2: the wash, spectrum and campus-scene stage are gone from the
   template, so the rules that hid them are gone too. */
.portal-searchbox { display: grid; width: 100%; max-width: 860px; justify-items: center; }
/* The bar itself is the form: three fields and a submit block, no inner wrapper. */
/* ⚠️ 10px, NOT `--r-control`.
   The design review caught this as "tokens over literals": the README's
   control radius is 2px and I applied it here reflexively, but the canvas
   draws the hero search as a 10px rounded bar. It is a card-sized surface that
   happens to contain controls, not a control — so it takes the card radius.
   The segments inside it keep 2px. */
.portal-search {
  display: flex; width: 100%;
  background: var(--surface); border-radius: var(--r-card); overflow: hidden;
  text-align: left;
}
.portal-search .portal-field { flex: 1 1 0; border-right: 1px solid var(--rule); }
.portal-search .portal-field--wide { flex: 2.2 1 0; }
.portal-search .portal-field:last-of-type { border-right: 0; }
.portal-search__go {
  flex: 0 0 auto; border: 0; padding: 0 30px;
  background: var(--action-blue); color: #fff; font: 700 16px/1 var(--font); cursor: pointer;
}
.portal-search__go:hover { background: var(--action-blue-hover); }
.portal-queryline { display: contents; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Responsive, pass 2 ─────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .cdir-facets__grid, .course-v2-subject-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cdir-facets__grid, .course-v2-subject-grid,
  .answer-shelf-grid, .answer-subject-grid, .discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-research__facts, .course-research__columns { grid-template-columns: minmax(0, 1fr); }
  .record-hero, .course-v2-hero, .course-hero { padding: var(--s5) var(--s4); }
  .course-v2-hero h1, .course-hero h1 { font-size: 26px; }
  .portal-search__primary { flex-direction: column; }
  .portal-search__go { padding: var(--s4); min-height: var(--target); }
  .uni-grid, .col-grid, .answers-mod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answers-mod__head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .cdir-facets__grid, .course-v2-subject-grid, .answer-shelf-grid,
  .answer-subject-grid, .discovery-grid, .portal-search__filter-grid { grid-template-columns: minmax(0, 1fr); }
  .cfacts__row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .uni-grid, .col-grid, .answers-mod__grid { grid-template-columns: minmax(0, 1fr); }
  .answers-mod__grid { padding: var(--s4); }
}

/* ══ D-13 FLOOR, LAST ════════════════════════════════════════════════════
   Every block-level target a 390px sweep found under 44px. Enumerated rather
   than blanket-applied because the distinction that matters is not a class
   name — it is whether the anchor is a standalone target or a link inside a
   sentence, and CSS cannot ask that question. Re-run the sweep after adding a
   surface; this list is the record of one, not a rule that generalises. */
.college-research__programme-name a,
.prail__sibname,
.prail li > a,
.answer-subject-card,
.portal-campus-card__action,
.portal-railcard a,
.portal-about a,
.search-form__submit {
  min-height: var(--target); height: auto;
  display: flex; align-items: center;
}
.answer-subject-card { align-items: center; }
.search-form__submit { display: inline-flex; justify-content: center; }