/* ══════════════════════════════════════════════════════════════════════════
   ICE COLLEGE PROFILE — the presence treatment for a college page.

   Reproduces the vocabulary of the owner's own Edusanjal redesign, supplied
   2026-09-03 as `Documents/Edusanjal Profile Redesign/NCE Profile v2.dc.html`,
   after the first attempt here was rejected as overcomplicated. That file is a
   design-tool prototype and not shippable code; these are its measurements.

   Taken from it directly:
     card radius            26px, inner 18–24px, avatar 34px, buttons 20px
     card border            1px rgba(4,9,36,.06)
     card shadow            0 18px 44px -20px rgba(4,9,36,.3)
     H1                     clamp(25px,2.4vw,39px) / 600 / -0.022em / 1.1
     programme heading      20px / 600 / -0.012em / 1.25
     muted                  #666A71  (= --ice-color-text-muted)
     pill                   #F3EFE9, radius 999px, 13px / 700, tabular-nums
     hover                  translateY(-2px), cubic-bezier(.2,.7,.2,1) 180ms
     buttons                gradient fill with inset highlight, min-height 48px

   ⚠️ Every colour resolves through an `--ice-*` token rather than the hex the
   reference hard-codes. The reference is already on ICE's palette — #FAF7F2,
   #17181C, #C41E3A, #666A71 — but hard-coded hex breaks graphite dark mode,
   which the Playwright theme audit enforces and which the reference never had
   to handle.

   ⚠️ NO FEE ANYWHERE, and no follower count, rating or review. The header
   comment in CollegeProfile.astro says why each was dropped.
   ══════════════════════════════════════════════════════════════════════════ */

.col--profile {
  --pf-radius: 26px;
  --pf-radius-in: 18px;
  --pf-line: 1px solid var(--ice-color-border);
  --pf-lift: 0 18px 44px -20px rgb(4 9 36 / 30%);
  --pf-lift-sm: 0 14px 34px -22px rgb(4 9 36 / 35%);
  --pf-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ─────────────────────────────── the card ──────────────────────────────── */

.pf { margin: 0 0 var(--ice-space-6); }

.pf__card {
  border: var(--pf-line);
  border-radius: var(--pf-radius);
  overflow: hidden;
  background: var(--ice-color-surface);
  box-shadow: var(--pf-lift);
}

/* ── the cover band ──
   252px in the reference, where a real photograph sits. Until one exists this
   is an honest plate: the page's own mesh, and a line saying what it waits for.
   Not a grey box, and not a stock photograph. */
.pf__cover {
  position: relative;
  height: clamp(150px, 19vw, 252px);
  background: var(--ice-color-surface-muted);
}

/* ⚠️ The `<picture>` has to be a block of the band's own height, or the image's
   `height: 100%` resolves against an inline box of auto height and `object-fit`
   has nothing to cover. */
.pf__cover picture { display: block; height: 100%; }
.pf__coverimg { display: block; width: 100%; height: 100%; object-fit: cover; }

.pf__cover--none {
  display: grid;
  place-items: center;
  background:
    radial-gradient(30rem 18rem at 18% -20%, var(--ice-mesh-a, rgb(37 99 235 / 9%)), transparent 64%),
    radial-gradient(26rem 16rem at 88% 10%, var(--ice-mesh-b, rgb(14 165 233 / 8%)), transparent 62%),
    radial-gradient(24rem 18rem at 62% 120%, var(--ice-mesh-c, rgb(168 85 247 / 6%)), transparent 66%),
    var(--ice-color-surface-muted);
}

.pf__coverwait {
  margin: 0;
  padding: 0 var(--ice-space-6);
  max-width: 46ch;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ice-color-text-muted);
}

/* Glass pills. This is the one place `backdrop-filter` earns its cost: when a
   cover photograph lands behind them there is real high-frequency detail to
   blur, which is the case ice-glass.css says to revisit it for. */
.pf__pills {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pf__pill {
  padding: 6px 13px;
  border: 1px solid var(--ice-color-border);
  border-radius: 999px;
  background: var(--ice-color-surface);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ice-color-text-muted);
}

@supports (backdrop-filter: blur(4px)) {
  .pf__cover:not(.pf__cover--none) .pf__pill {
    background: rgb(12 26 56 / 52%);
    border-color: rgb(255 255 255 / 28%);
    color: var(--ice-color-on-action);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
}

/* ─────────────────────────────── identity ─────────────────────────────── */

.pf__body { padding: 0 clamp(18px, 2.4vw, 30px) var(--ice-space-6); }

.pf__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ice-space-5);
  padding-top: var(--ice-space-5);
}

/* The overlap is the profile shape: 132px on a 7px ring, pulled up 78px. */
.pf__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 132px);
  aspect-ratio: 1;
  margin-top: clamp(-78px, -5.4vw, -46px);
  /* ⚠️ POSITIONED, AND IT HAS TO BE. `.pf__cover` above is `position: relative`
     and this element is pulled up underneath it by that negative margin, so
     without a position of its own the COVER PAINTS OVER IT — a positioned
     element paints above a non-positioned sibling's subtree whatever the source
     order. The top of the avatar was simply missing.

     It shipped invisible for as long as the band was an empty plate, which is
     why the note above once said no college had a cover. That stopped being
     true on 2026-09-03 when the media pipeline landed heroes: found on
     /emergency 2026-09-04, then confirmed live on 38 of the 52 college pages
     and on /answers, whose `.pf-id__crest` in ice-profile-v1.css had the same
     defect and the same fix. */
  position: relative;
  z-index: 1;
  border-radius: 34px;
  /* ⚠️ `--ice-color-surface-brand`, not `--ice-color-navy`. The navy token
     INVERTS in graphite dark mode to a near-white, so a light monogram on it
     renders white on white. surface-brand is dark in both themes. */
  background: var(--ice-color-surface-brand);
  box-shadow: 0 0 0 7px var(--ice-color-surface), 0 18px 32px -16px rgb(4 9 36 / 50%);
}

/* ── the college's own logo, where the record carries one ──────────────────
   ⚠️ A LIGHT PLATE, AND THE LITERAL IS ON PURPOSE. These are other
   institutions' marks and most are dark type on a transparent ground. Drawn on
   `--ice-color-surface-brand`, which is navy in light mode and graphite in
   dark, they would disappear exactly the way ICE's own crest did on the answer
   library — a navy seal on a navy tile, where only the red quarters survived
   (fixed 2026-09-04, same pass as this). No token works: the asset needs a
   light ground in BOTH themes and every surface token inverts.

   Padded, because a wordmark that runs to the edge of a rounded tile reads as
   a cropped screenshot rather than a logo. */
.pf__avatar--logo {
  padding: 12%;
  background: linear-gradient(180deg, #FFFFFF, #F3EFE9);
  box-shadow:
    0 0 0 7px var(--ice-color-surface),
    0 18px 32px -16px rgb(4 9 36 / 50%),
    inset 0 0 0 1px rgb(4 9 36 / 10%);
}

.pf__avatar--logo picture,
.pf__avatar--logo img {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain`, never `cover`. A logo cropped to fill a square is a logo with
     its wordmark cut off. */
  object-fit: contain;
}

.pf__avatar span {
  font-size: clamp(1.15rem, 0.8rem + 1.1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ice-color-on-action);
}

.pf__who { flex: 1 1 280px; min-width: 0; }

.pf__nameline { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }

/* Weight 600, not 800. The reference sets its name at 600, and the heavier
   version was part of what the owner called overcomplicated. */
.pf__name {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(25px, 2.4vw, 39px);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--ice-color-text);
}

/* The tick LINKS to the citation and its label names the register. It is never
   a bare mark of quality. */
.pf__tick {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ice-color-surface-brand);
  box-shadow: 0 8px 14px -6px rgb(12 26 56 / 60%);
}

.pf__tick svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--ice-color-terracotta);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf__handle {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ice-color-text-muted);
}

.pf__handle a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ice-color-border); }
.pf__handle a:hover { color: var(--ice-color-text); border-bottom-color: currentColor; }

/* One inline row, not a grid of giant numerals. */
.pf__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--ice-space-5);
  margin: 13px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text-muted);
}

.pf__stat strong { font-weight: 650; color: var(--ice-color-text); }

/* ── the buttons ──
   The reference's fill is a vertical gradient with an inset top highlight,
   which is what stops a flat rectangle reading as a placeholder. */
.pf__acts { display: flex; flex-wrap: wrap; gap: 9px; }

.pf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 20px;
  border: 0;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ice-color-text);
  background: linear-gradient(180deg, var(--ice-color-surface), var(--ice-color-surface-field));
  box-shadow:
    0 12px 22px -14px rgb(4 9 36 / 45%),
    inset 0 2px 3px rgb(255 255 255 / 60%),
    inset 0 -4px 6px rgb(4 9 36 / 8%);
  transition: transform 180ms var(--pf-ease), filter 180ms var(--pf-ease);
}

.pf__btn:hover { transform: translateY(-2px); text-decoration: none; }
.pf__btn:active { transform: scale(.96); }

.pf__btn--go {
  font-weight: 700;
  color: var(--ice-color-on-action);
  background: linear-gradient(180deg, #E8526A, var(--ice-color-crimson));
  box-shadow:
    0 14px 24px -12px rgb(196 30 58 / 70%),
    inset 0 2px 3px rgb(255 255 255 / 40%),
    inset 0 -5px 8px rgb(168 24 48 / 50%);
}

.pf__btn--icon { width: 48px; padding: 0; }

.pf__btn--icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf__reg {
  margin: var(--ice-space-5) 0 0;
  padding-top: var(--ice-space-4);
  border-top: var(--pf-line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ice-color-text-muted);
}

/* ──────────────────────────────── the feed ─────────────────────────────── */

/* ⚠️ `.post`, `.gal`, `.intro`, `.ptabs`, `.srail` and `.sview` moved to
   `public/css/ice-feed.css` on 2026-09-03, because the answer library and the
   guides render the same components out of `src/components/profile/`. Their
   tokens are namespaced `--feed-*` there: `--pf-line` is a border shorthand
   here and a bare colour in `ice-profile-v1.css`, so a shared rule could not
   read it. What stays below is what belongs to a COLLEGE page only. */

/* ── the programme grid ── */

/* ⚠️ TWO columns, not `auto-fill minmax(210px)`. That produced three at
   desktop, so a long programme name wrapped to three lines and pushed its
   row's height onto the card beside it — the block of dead white the owner's
   side-by-side caught on 2026-09-03. The reference uses two. */
.progs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* ⚠️ A CONTAINER query, not a viewport one. The feed column sits between a
   248px left rail and a 320px right rail, so at 1180px viewport it is only
   ~350px wide and two columns of 168px broke "BE Computer" across three lines.
   What decides the column count is the width of the post, which is what this
   measures. */

@container (max-width: 470px) {
  .progs { grid-template-columns: minmax(0, 1fr); }
}

.prog {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--ice-color-border);
  border-radius: var(--pf-radius-in);
  transition: transform 200ms var(--pf-ease), box-shadow 200ms var(--pf-ease);
}

.prog:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -22px rgb(4 9 36 / 50%); }

/* `align-items: flex-start` and a wrapping name. Centred with a fixed pill,
   a long programme name ("Electronics, Communication and Information") was
   being clipped rather than wrapped at the 210px column. */
.prog__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.prog__name {
  margin: 0;
  min-width: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--ice-color-text);
}

.prog__pill {
  flex: none;
  margin-top: 3px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--ice-color-surface-field);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--ice-color-text);
}

.prog__pill--none { font-weight: 600; font-size: 12px; color: var(--ice-color-text-muted); }

.prog__blurb {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ice-color-text-muted);
}

.prog__split {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ice-color-text) 45%, var(--ice-color-text-muted));
}

/* ───────────────────────── the rest of the page ───────────────────────── */

/* The record-layout blocks that remain, brought to the same radius and heading
   weight so the feed does not sit next to a different era. */
.col--profile .col-block {
  border-radius: 24px;
  box-shadow: var(--pf-lift-sm);
}

.col--profile .col-block h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.35;
  color: var(--ice-color-text);
}

.col--profile .col-railcard { border-radius: 22px; }

.col--profile .col-railcard__kicker {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ice-color-text);
}

/* Browser surfaces. These ship with defaults belonging to no design system. */
.col--profile ::selection { background: color-mix(in srgb, var(--ice-color-crimson) 20%, transparent); }
.col--profile { accent-color: var(--ice-color-crimson); }

.col--profile a:focus-visible,
.col--profile .pf__btn:focus-visible {
  outline: 2px solid var(--ice-color-crimson);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ──────────────────────────── narrow screens ──────────────────────────── */

@media (max-width: 640px) {
  .col--profile { --pf-radius: 22px; }
  .pf__top { gap: var(--ice-space-4); }
  .pf__acts { width: 100%; }
  .pf__btn { flex: 1 1 auto; }
  .pf__btn--icon { flex: 0 0 48px; }
  .progs { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────────────────── reduced settings ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pf__btn, .prog { transition: none; }
  .pf__btn:hover, .pf__btn:active, .prog:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .pf__cover:not(.pf__cover--none) .pf__pill {
    background: var(--ice-color-surface);
    color: var(--ice-color-text-muted);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE RIGHT RAIL AND THE GALLERY
   Ported from the owner's reference rather than inferred. Values from
   `NCE Profile v2.dc.html`: rail sticky at top 92px with a 16px gap, contact
   rows icon-led at gap 10px, quick facts as space-between rows, gallery a
   3px-gap mosaic of 1/1 tiles, chips #F3EFE9 / 999px / 14px / 600.
   ══════════════════════════════════════════════════════════════════════════ */

.prail {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}

/* ⚠️ GLASS, not opaque white. This is the single biggest reason the first
   version read as bland next to the reference: those cards are
   `rgba(255,255,255,.62)` with `backdrop-filter: blur(26px) saturate(1.6)` and
   a bright `rgba(255,255,255,.78)` edge, so they pick up the warm mesh moving
   behind them. A flat `--ice-color-surface` card sits on the mesh and kills it.
   Values taken from the reference's own rail wrapper. */
.prail__card,
.prail__cta {
  padding: 20px;
  border: 1px solid var(--edu-glass-edge, rgb(255 255 255 / 78%));
  border-radius: 22px;
  background: rgb(255 255 255 / 62%);
  box-shadow: 0 14px 34px -20px rgb(4 9 36 / 40%);
}

@supports (backdrop-filter: blur(4px)) {
  .prail__card,
  .prail__cta {
    backdrop-filter: blur(26px) saturate(1.6);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
  }
}

html[data-theme="dark"] .prail__card,
html[data-theme="dark"] .prail__cta {
  background: rgb(30 31 34 / 66%);
  border-color: rgb(255 255 255 / 12%);
}

/* #9E4814 in the reference — a burnt orange, not the muted grey the first
   version used. It is what gives each card a point of entry. */
.prail__head {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #9E4814;
}

html[data-theme="dark"] .prail__head { color: var(--ice-color-terracotta); }

/* ── the apply card ── */

.prail__cta {
  background: linear-gradient(180deg, var(--ice-color-surface), var(--ice-color-surface-field));
}

.prail__ctalabel {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ice-color-terracotta);
}

.prail__ctabody {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ice-color-text-muted);
}

.prail__ctabtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 13px 26px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ice-color-on-action);
  background: linear-gradient(180deg, #E8526A, var(--ice-color-crimson));
  box-shadow:
    0 14px 24px -12px rgb(196 30 58 / 70%),
    inset 0 2px 3px rgb(255 255 255 / 40%),
    inset 0 -5px 8px rgb(168 24 48 / 50%);
  transition: transform 180ms var(--pf-ease);
}

.prail__ctabtn:hover { transform: translateY(-2px); text-decoration: none; color: var(--ice-color-on-action); }

/* ── contact ── */

.prail__contact {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 15px;
  line-height: 1.55;
}

.prail__contact li { display: flex; gap: 10px; align-items: flex-start; }

.prail__contact svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  fill: none;
  stroke: var(--ice-color-text-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prail__contact a { color: var(--ice-color-crimson); text-decoration: none; }
.prail__contact a:hover { border-bottom-color: currentColor; }
.prail__num { font-variant-numeric: tabular-nums; }

/* A full-width soft button in the reference, not the text link the first
   version used. Gradient fill with an inset top highlight, which is what stops
   it reading as a flat rectangle. */
.prail__go {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 14px;
  border-radius: 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  color: #1A2B52;
  background: linear-gradient(180deg, #FFFFFF, #F3EFE9);
  box-shadow:
    0 12px 22px -16px rgb(4 9 36 / 50%),
    inset 0 2px 3px rgb(255 255 255 / 90%),
    inset 0 -4px 6px rgb(4 9 36 / 8%);
  transition: transform 180ms var(--pf-ease);
}

.prail__go:hover { transform: translateY(-2px); text-decoration: none; color: #1A2B52; }

html[data-theme="dark"] .prail__go {
  color: var(--ice-color-text);
  background: linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 4%));
}

/* ── quick facts ── */

.prail__facts { margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; line-height: 1.5; }

.prail__facts > div { display: flex; justify-content: space-between; gap: 12px; }

.prail__facts dt { color: var(--ice-color-text-muted); }

.prail__facts dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: #1A2B52;
}

html[data-theme="dark"] .prail__facts dd { color: var(--ice-color-text); }

.prail__facts dd.is-num { font-variant-numeric: tabular-nums; }

/* ── similar colleges ── */

.prail__note { margin: -6px 0 13px; font-size: 13px; line-height: 1.45; color: var(--ice-color-text-muted); }

.prail__sibs { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

.prail__sibs a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  text-decoration: none;
  transition: background 160ms var(--pf-ease);
}

.prail__sibs a:hover { background: var(--ice-color-surface-field); text-decoration: none; }

.prail__sibchip {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 13px;
  background: linear-gradient(180deg, #4A5D8A, var(--ice-color-surface-brand));
  box-shadow: inset 0 2px 3px rgb(255 255 255 / 25%);
  color: var(--ice-color-on-action);
  font-size: 12px;
  font-weight: 700;
}

.prail__sibtext { min-width: 0; flex: 1; display: grid; }
.prail__sibname { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ice-color-text); }
.prail__sibmeta { font-size: 13px; line-height: 1.45; color: var(--ice-color-text-muted); }

/* ── feature chips, from the About post ── */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.chips li {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--ice-color-surface-field);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ice-color-text);
}

/* ── the two-column feed on wide screens ── */

.pfeed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ice-space-6); align-items: start; }

/* 1320, not 1180: below this the feed column is too narrow to carry two
   programme cards beside a 320px rail. */
@media (min-width: 1320px) {
  .pfeed { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1319px) {
  .prail { position: static; }
}

@media (max-width: 560px) {
  .prail__card, .prail__cta { padding: 16px 16px; border-radius: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE REMAINING PROFILE SECTIONS
   Facebook Page conventions, per the owner: a tab row under the header, list
   rows with leading media, and a demo marker on anything not yet researched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the demo banner and per-section markers ── */

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 var(--ice-space-5);
  padding: 13px 16px;
  border: 1px solid var(--ice-color-terracotta);
  border-radius: 16px;
  background: color-mix(in srgb, var(--ice-color-terracotta) 10%, var(--ice-color-surface));
  font-size: 14px;
  line-height: 1.55;
  color: var(--ice-color-text);
}

.demo-banner svg {
  width: 19px; height: 19px; flex: none; margin-top: 2px;
  fill: none; stroke: var(--ice-color-terracotta);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.demo-banner strong { font-weight: 700; }

.demo-note {
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px dashed var(--ice-color-border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ice-color-text-muted);
}

.demo-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ice-color-terracotta) 16%, transparent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ice-color-terracotta);
}

/* ── admission: the two columns ── */

.adm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

@media (min-width: 720px) { .adm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.adm__col {
  padding: 16px 18px;
  border: 1px solid var(--ice-color-border);
  border-radius: var(--pf-radius-in);
}

.adm__head {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ice-color-terracotta);
}

.adm__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.adm__list li { font-size: 14.5px; line-height: 1.55; color: var(--ice-color-text); }

.adm__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: step; }

.adm__steps li {
  display: flex;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ice-color-text);
}

.adm__steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4A5D8A, var(--ice-color-surface-brand));
  color: var(--ice-color-on-action);
  font-size: 12.5px;
  font-weight: 700;
}

/* ── scholarships ── */

.schol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.schol__row {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--ice-color-border);
  border-radius: var(--pf-radius-in);
}

.schol__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(180deg, #E8526A, var(--ice-color-crimson));
  box-shadow: 0 10px 18px -10px rgb(196 30 58 / 65%), inset 0 2px 3px rgb(255 255 255 / 40%);
  color: var(--ice-color-on-action);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.schol__text { min-width: 0; }
.schol__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ice-color-text); }
.schol__body { margin: 3px 0 0; font-size: 14px; line-height: 1.55; color: var(--ice-color-text-muted); }

/* ── voices ── */

.voices { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.voices__item {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--ice-color-border);
  border-radius: var(--pf-radius-in);
  background: var(--ice-color-surface-field);
}

.voices__mark { flex: none; }

.voices__mark svg {
  width: 26px; height: 26px;
  fill: color-mix(in srgb, var(--ice-color-terracotta) 55%, transparent);
}

.voices__text { min-width: 0; }

.voices__role {
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ice-color-terracotta);
}

.voices__quote {
  margin: 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ice-color-text);
}

/* ── videos ── */

.vids { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }

.vids__row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  margin: 0 -12px;
  border-radius: 14px;
}

.vids__play {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--ice-color-surface-field);
}

.vids__play svg { width: 22px; height: 22px; fill: var(--ice-color-text-muted); }

.vids__text { min-width: 0; }
.vids__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ice-color-text); }
.vids__meta { margin: 1px 0 0; font-size: 13px; line-height: 1.45; color: var(--ice-color-text-muted); }

/* ── provenance, demoted ──
   The citation prose and the bibliography used to open on the page and set its
   register. They are now a closed disclosure at the foot: available to a reader
   who wants them, absent for one who does not. */

.prov {
  margin: var(--ice-space-5) 0 0;
  border: var(--pf-line);
  border-radius: 20px;
  background: var(--ice-color-surface);
  box-shadow: var(--pf-lift-sm);
  overflow: hidden;
}

.prov > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ice-color-text);
  list-style: none;
}

.prov > summary::-webkit-details-marker { display: none; }

.prov > summary::after {
  content: "";
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 2px solid var(--ice-color-text-muted);
  border-bottom: 2px solid var(--ice-color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms var(--pf-ease);
}

.prov[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.prov > summary:hover { background: var(--ice-color-surface-field); }

.prov__count { font-weight: 450; color: var(--ice-color-text-muted); }

.prov__body { padding: 0 20px 18px; border-top: 1px solid var(--ice-color-border); }
.prov__body > :first-child { margin-top: 16px; }