/* ============================================================
   THE NATIONAL RECORD — college pages (/colleges/<slug>)
   ------------------------------------------------------------
   docs/37 Phase 5. One stylesheet, loaded only by this route.

   ── Why this is not built on `.pf` ──────────────────────────
   The answer library renders on ice-profile-v1.css and inherits
   its whole composition. These pages do not, for a reason that
   is editorial rather than technical: `.pf` carries the college
   profile furniture — the fee rail, the "come and see it" card,
   the admissions call to action — and a page about a DIFFERENT
   college is the one surface on this site where that furniture
   would be dishonest (docs/36 §5.2: no lead capture on another
   institution's page). So this file defines its own shell and
   its own rail, and the shared chrome above and below it stays
   exactly as it is.

   ── The rules this file follows ─────────────────────────────
   · Every colour is a semantic token, never a literal, so
     graphite dark mode needs no parallel rules here
     (docs/04, and the site's dark theme moved off navy on
     2026-08-03).
   · No broad element selectors. Everything is scoped under a
     `.col-` class so nothing can leak into another route
     (AGENTS.md, and the /staff selector traps of 2026-08-12).
   · Text is never muted with `opacity`: opacity composites
     toward whatever sits behind it and lands at a different
     contrast ratio on the cream canvas than on a graphite card.
     Muted text uses `--ice-color-text-muted`.
   · A grid or flex child gets `min-width:0`. Without it the
     programme table's intrinsic width pushes the whole column
     wider than the viewport and `overflow-x:clip` on the body
     CUTS the right-hand columns off instead of scrolling them
     — silent data loss, and the exact defect the answer
     library's table wrapper exists to prevent.
   ============================================================ */

.col {
  --col-gap: var(--ice-space-4);
  --col-radius: 14px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px var(--gutter) 72px;
}

.col-shell { min-width: 0; }

/* ---------- breadcrumb ---------- */

.col-crumb { margin: 0 0 var(--ice-space-4); }

.col-crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

/* The separator is a CSS marker rather than a character in the markup. Written
   between two anchors it welds itself to the next link when JSX collapses the
   newline after it, which is how the answer library shipped "Answers ·Fees" on
   59 pages, and a screen reader reads it out as punctuation. */
.col-crumb li + li::before {
  content: "·";
  margin-right: 10px;
  color: var(--ice-color-text-muted);
}

.col-crumb a { color: var(--ice-color-text-muted); text-decoration: none; }
.col-crumb a:hover { color: var(--ice-color-text); text-decoration: underline; }

/* ---------- hero ---------- */

.col-hero {
  border: 1px solid var(--ice-color-border);
  border-radius: var(--col-radius);
  background: var(--ice-color-surface);
  overflow: hidden;
}

.col-hero__frame {
  /* The record carries derivative WIDTHS and no intrinsic height, so the frame
     holds the aspect ratio and the image covers it. That is what keeps CLS at
     zero without a height attribute the dataset does not have. */
  aspect-ratio: 16 / 7;
  background: var(--ice-color-surface-muted);
}

.col-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.col-hero__text { padding: var(--ice-space-6) var(--ice-space-6) var(--ice-space-5); }

.col-hero__name {
  margin: 0;
  font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ice-color-text);
}

.col-hero__aka {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ice-color-text-muted);
}

.col-hero__credit {
  margin: 0;
  padding: 10px var(--ice-space-6) var(--ice-space-4);
  font-size: 12.5px;
  color: var(--ice-color-text-muted);
  border-top: 1px solid var(--ice-color-border);
}

.col-lede {
  margin: var(--ice-space-4) 0 0;
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ice-color-text);
}

/* ---------- the sourced value and its footnote ---------- */

.col-val { font-weight: 600; }

/* A footnote number, not a badge. It has to be small enough to disappear when
   the reader is reading and large enough to hit with a thumb, which is why the
   tap target is padded well past the glyph. */
.col-cite {
  display: inline-block;
  margin-left: 2px;
  padding: 0 3px;
  font-size: 0.68em;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
  color: var(--ice-color-text-accent);
  text-decoration: none;
}

.col-cite:hover,
.col-cite:focus-visible { text-decoration: underline; }

/* ---------- layout ---------- */

.col-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ice-space-6);
  margin-top: var(--ice-space-6);
}

@media (min-width: 960px) {
  .col-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .col-rail { position: sticky; top: calc(var(--nav-main-h) + 8px); }
}

.col-main { min-width: 0; display: grid; gap: var(--ice-space-5); }

/* ---------- fact list ---------- */

.col-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--ice-space-3);
  margin: 0;
  padding: var(--ice-space-5);
  border: 1px solid var(--ice-color-border);
  border-radius: var(--col-radius);
  background: var(--ice-color-surface);
}

.col-facts__item { min-width: 0; }

.col-facts dt {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice-color-text-muted);
}

.col-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ice-color-text);
}

.col-facts__of {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ice-color-text-muted);
}

/* ---------- blocks ---------- */

.col-block {
  min-width: 0;
  padding: var(--ice-space-5);
  border: 1px solid var(--ice-color-border);
  border-radius: var(--col-radius);
  background: var(--ice-color-surface);
}

.col-block h2 {
  margin: 0 0 var(--ice-space-3);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--ice-color-text);
}

.col-block p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ice-color-text);
}

.col-block p:last-child { margin-bottom: 0; }

/* ⚠️ `.col-block .col-note` and not `.col-note`.
   `.col-block p` is (0,1,1) and a bare `.col-note` is (0,1,0), so the block's
   own paragraph rule WINS and the modifier silently does nothing. That is the
   third time this exact shape has shipped here: the `/staff` selector traps of
   2026-08-12 and `/exam-access`'s "Moved by" column, both found by reading the
   computed style rather than the stylesheet. Class-on-class outranks
   class-plus-element, which is the whole fix. */
.col-block .col-note { color: var(--ice-color-text-muted); }

.col-block--note p { color: var(--ice-color-text-muted); }

/* An empty cell that says why it is empty. Set apart from the prose, because it
   is a finding about the dataset rather than a sentence about the college.
   Set apart by a quiet inset panel rather than by a coloured bar down one side:
   the reader should register it as a different KIND of sentence, not as a
   warning, and a sixteenth of these pages will carry several of them. */
.col-empty,
.col-block .col-empty {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ice-color-surface-muted);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ice-color-text-muted);
}

.col-none { font-size: 13px; color: var(--ice-color-text-muted); }

/* ---------- findings ---------- */

/* One sentence per item, each carrying its own footnote number, so the list has
   to read as prose rather than as bullets of specification. No disc: a marker
   beside a full sentence reads as a feature list, which is the register this
   page is furthest from. The rule is scoped `.col-block .col-findings` for the
   reason written above `.col-note` — `.col-block p` at (0,1,1) beats a bare
   class, and a list here is the same shape of trap one element along. */
.col-block .col-findings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.col-block .col-findings li {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--ice-color-border);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ice-color-text);
}

/* ---------- programme table ---------- */

/* The wrapper scrolls instead of the page. `min-width:0` is load-bearing: a
   grid child defaults to `min-width:auto` and refuses to shrink below its
   content, so without it a four-column table hands its overflow to the body,
   where `overflow-x:clip` swallows it and the fee column simply vanishes. */
.col-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 4px;
}

.col-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.col-table th,
.col-table td {
  padding: 9px 12px 9px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ice-color-border);
}

.col-table thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ice-color-text-muted);
}

.col-table tbody th {
  font-weight: 600;
  color: var(--ice-color-text);
}

.col-table tbody tr:last-child th,
.col-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- link list ---------- */

.col-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.col-links a {
  color: var(--ice-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ice-color-border);
  padding-bottom: 2px;
}

.col-links a:hover { border-bottom-color: var(--ice-color-text); }

/* ---------- sources ---------- */

.col-sources {
  padding: var(--ice-space-5);
  border: 1px solid var(--ice-color-border);
  border-radius: var(--col-radius);
  background: var(--ice-color-surface-muted);
}

.col-sources h2 {
  margin: 0 0 var(--ice-space-3);
  font-size: 1.05rem;
  color: var(--ice-color-text);
}

.col-sources__list {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: var(--ice-space-3);
}

.col-sources__item { color: var(--ice-color-text); }

.col-sources__label { margin: 0; font-size: 14.5px; line-height: 1.45; }

.col-sources__label a { color: var(--ice-color-text); }

.col-sources__meta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ice-color-text-muted);
}

.col-sources__note {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ice-color-text-muted);
}

/* ---------- disclosure ---------- */

/* Deliberately quiet and deliberately not hidden. It is a disclosure, so it
   reads as a statement of fact rather than as a warning — which is why it lost
   the terracotta bar down its left edge that the first draft gave it. A
   disclosure that shouts is a disclosure the reader discounts. */
.col-disclosure {
  padding: var(--ice-space-4) var(--ice-space-5);
  border: 1px solid var(--ice-color-border);
  border-radius: var(--col-radius);
  background: var(--ice-color-surface);
}

.col-disclosure p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ice-color-text-muted);
}

.col-disclosure a { color: var(--ice-color-text); }

/* ---------- rail ---------- */

.col-rail { display: grid; gap: var(--ice-space-4); min-width: 0; }

.col-railcard {
  padding: var(--ice-space-5);
  border: 1px solid var(--ice-color-border);
  border-radius: var(--col-radius);
  background: var(--ice-color-surface);
}

.col-railcard .col-railcard__kicker {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ice-color-text-accent);
}

.col-railcard .col-railcard__title {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ice-color-text);
}

.col-railcard p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ice-color-text-muted);
}

.col-railcard p:last-of-type { margin-bottom: 0; }

.col-go {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ice-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ice-color-border);
}

.col-go:hover { border-bottom-color: var(--ice-color-text); }

/* The review stamp sits on the canvas rather than in a card, the same way it
   does across the answer library. */
.col .updated-stamp { margin-top: 0; }