/* ============================================================
   ICE profile layout — v1
   ------------------------------------------------------------
   The "identity card + sticky rail" composition used by the five
   decision pages: /admissions, /fees-scholarships,
   /ioe-entrance-guide, /blog and /contact.

   Adapted from the owner's Claude-designed comps (Aug 2026). The
   comps carried their own header, footer, palette and a fixed
   bottom action bar; none of those ship. This file provides only
   the page body, drawn entirely from the ICE role tokens in
   site-20260716b.css so both themes and the graphite dark mode
   keep working without a second palette.

   Structure:
     1 shell · 2 identity card · 3 highlights · 4 tab rail
     5 layout · 6 panels · 7 panel furniture · 8 side rail
     9 responsive · 10 reduced motion
   ============================================================ */

/* ---------- 1 · shell ---------- */
.pf{
  --pf-radius:14px;
  --pf-gap:14px;
  --pf-pad:16px;
  --pf-stick:calc(var(--nav-main-h) + 8px);
  max-width:1360px;
  margin:0 auto;
  /* BaseLayout's solid header is in normal flow. The old `--nav-h` reserve
     belonged to the retired transparent/absolute default and left a second
     header of empty cream canvas once the header became safe by default. */
  padding:18px var(--gutter) 72px;
}

/* The comps set every colour inline. Here they are roles, so dark mode
   inherits without a parallel sheet. */
.pf{
  --pf-surface:var(--card);
  --pf-ink:var(--ink);
  --pf-muted:var(--slate);
  --pf-line:var(--hairline);
  --pf-brand:var(--navy);
  --pf-accent:var(--terracotta);
  --pf-live:var(--crimson);

  /* The dark FIELD, and what may be written on it.
     The note below got half of this right: `--navy` stops being a background
     in dark mode. But it is not only headings that used it — every navy
     panel, pill, badge and button in this file painted `var(--navy)` and then
     hard-coded `#fff` on top, so in dark mode they were white text on the
     near-white ink colour: 1.08:1, thirty of the theme matrix's hundred cases,
     and invisible to anyone reading the site at night.
     `--ice-color-surface-brand` is the token that stays a dark field in BOTH
     themes (navy-900 / graphite-900) and ships with its own ink. It is what
     `.page-hero` and `.contact-sec` have always used. */
  --pf-field:var(--ice-color-surface-brand);
  --pf-on-field:var(--ice-color-on-surface-brand);
  --pf-on-field-muted:color-mix(in srgb,var(--ice-color-on-surface-brand) 78%,transparent);
  --pf-accent-on-field:var(--ice-color-text-accent-on-brand);
}
html[data-theme="dark"] .pf{
  /* Navy is a brand colour in dark mode, not a background: headings that
     were navy-on-white have to become plain ink or they vanish. */
  --pf-brand:var(--ice-palette-navy-100);
  --pf-accent:var(--ice-palette-terracotta-300);
  --pf-live:var(--ice-palette-crimson-200);
}

/* site-20260716b.css sets `section{padding:var(--sec) 0}` for the old
   full-bleed page rhythm. Inside the card layout that is 66px of dead white
   above every panel. :where() keeps this at zero specificity so the component
   rules below still win. */
.pf :where(section,article,aside,nav){padding:0;margin:0}

/* Zero-height marker carrying a legacy anchor id, so the id-level band rules
   in site-20260716b.css land on nothing visible.
   The !important is the point: those rules are id selectors (`#scholarships`,
   `#choose-college`) which no class can outrank, and without it the marker
   collects 158px of band padding. */
.pf-anchor{
  display:block;height:0;overflow:hidden;
  padding:0!important;margin:0!important;background:none!important;border:0!important;
}

/* ---------- 2 · identity card ----------
   Rebuilt 2026-09-03 to the owner's reference file, `NCE Profile v2.dc.html`,
   the profile head. Every number below is measured off it; the component's
   header comment lists them together. */
.pf-id{
  background:var(--pf-surface);
  border:1px solid var(--pf-line);
  border-radius:26px;
  overflow:hidden;
}
/* 252px in the reference. Clamped rather than fixed, because the reference is
   drawn at one width and this ships from 320px up. */
.pf-id__cover{
  position:relative;
  height:clamp(168px,20vw,252px);
  background:var(--pf-field);
}
.pf-id__cover img,
.pf-id__cover picture{display:block;width:100%;height:100%}
.pf-id__cover img{object-fit:cover;object-position:var(--media-focus,center 38%)}
/* linear-gradient(180deg,rgba(4,9,36,.34),rgba(4,9,36,0) 52%) — it is what
   keeps a white pill legible over a bright photograph. */
.pf-id__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgb(4 9 36 / 34%),rgb(4 9 36 / 0) 52%);
}
.pf-id__pills{
  position:absolute;left:16px;top:16px;z-index:2;margin:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
/* Glass. This is the one place `backdrop-filter` earns its cost on these
   pages: there is a photograph behind it with real high-frequency detail. */
.pf-id__pill{
  display:inline-flex;align-items:center;
  padding:6px 14px;border-radius:999px;
  background:rgb(12 26 56 / 52%);
  border:1px solid rgb(255 255 255 / 28%);
  color:var(--ice-color-terracotta-soft,#F0A97A);
  font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.4;
  text-transform:uppercase;
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .pf-id__pill{
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
}
/* The reference's bottom-right cover control, "View 42 photos". */
.pf-id__photos{
  position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;min-height:40px;
  padding:8px 16px;border-radius:14px;
  background:rgb(12 26 56 / 50%);
  border:1px solid rgb(255 255 255 / 28%);
  color:#FAF7F2;font-size:14px;font-weight:600;line-height:1.4;
  text-decoration:none;
}
.pf-id__photos:hover{background:rgb(12 26 56 / 68%);color:#FAF7F2}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .pf-id__photos{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
}
/* Positioned, so it paints above the positioned cover — otherwise the cover
   photograph sits on top and eats the upper half of the crest. */
.pf-id__body{position:relative;z-index:1;padding:0 clamp(18px,2.4vw,30px) 22px}
.pf-id__top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:22px;padding-top:20px;flex-wrap:wrap;
}
/* 132px on a 7px ring, pulled up 78px, radius 34. The ring is a box-shadow
   rather than a border so the crest keeps its full box at every width. */
.pf-id__crest{
  width:clamp(86px,9vw,132px);aspect-ratio:1;flex:0 0 auto;
  margin-top:clamp(-78px,-5.4vw,-48px);
  border-radius:34px;
  /* ⚠️ POSITIONED, AND IT HAS TO BE. `.pf-id__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 crest was simply missing.
     Same defect and same fix as `.pf__avatar` in ice-college-profile.css.
     Found 2026-09-04. */
  position:relative;z-index:1;
  /* ⚠️ A LIGHT GROUND, AND IT IS A LITERAL ON PURPOSE. `/img/ice-crest.png` is
     a NAVY seal with navy rim text on a TRANSPARENT ground, and this was
     `var(--pf-field)`, which resolves to `--ice-color-surface-brand`: navy in
     light mode and graphite in dark. Only the shield's red quarters survived,
     so a 132px avatar rendered as a dark tile with two red marks in it.
     No token fits, because the asset needs a light ground in BOTH themes and
     every surface token inverts. Same pair `.prail__go` hard-codes in
     ice-college-profile.css, for the same kind of reason. */
  box-shadow:0 0 0 7px var(--pf-surface),0 18px 32px -16px rgb(4 9 36 / 50%),inset 0 0 0 1px rgb(4 9 36 / 10%);
  /* ⚠️ TWO LAYERS, crest first. A single background layer takes ONE image, so
     `linear-gradient(...) url(...)` in one layer is invalid and drops the whole
     declaration. The crest is the top layer; the gradient is the ground under it. */
  background:url('/img/ice-crest.png') center/72% no-repeat,linear-gradient(180deg,#FFFFFF,#F3EFE9);
}
.pf-id__actions{display:flex;gap:10px;flex-wrap:wrap}
.pf-id__text{flex:1 1 300px;min-width:0}
/* The flex row that used to live on the h1 itself. The "TU AFFILIATED" chip was
   moved out of the heading on 2026-08-22 so it stops being read as part of the
   heading text; this wrapper keeps the two on one line and wrapping together. */
.pf-id__title{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0;
}
/* Weight 600, not 800: the reference sets its name at 600, and the heavier
   version is what the owner called overcomplicated on the college page. */
.pf-id__text h1{
  margin:0;
  font-size:clamp(25px,2.4vw,39px);
  font-weight:600;letter-spacing:-.022em;line-height:1.1;
  /* `--pf-ink`, not `--pf-brand`. The reference sets its name in the body ink
     (#17181C) rather than in the brand colour, and the college profile already
     follows it. Navy on a white card at 39px read as a second brand mark. */
  color:var(--pf-ink);
  max-width:24ch;
  text-wrap:balance;
}
.pf-id__chip{
  background:var(--pf-field);color:var(--pf-on-field);
  font-size:11px;font-weight:700;letter-spacing:.1em;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
/* ⚠️ `overflow-wrap:anywhere`. The handle carries a URL path with no spaces in
   it — "icenepal.com/answers/category/purbanchal-university" is one 51-character
   token — and its card is `overflow:hidden`, so at 320px the tail was cut off
   rather than wrapped. */
.pf-id__handle{
  margin:7px 0 0;font-size:16px;line-height:1.5;
  color:var(--pf-muted);
  overflow-wrap:anywhere;
}
.pf-id__tag{
  margin:9px 0 0;font-size:15px;line-height:1.55;
  color:var(--pf-muted);max-width:64ch;
}
/* ONE INLINE ROW, gap 22px, tabular figures. It was a bordered four-cell grid
   until 2026-09-03; the reference runs the stats as a single line under the
   handle and that is what makes the head read as a profile rather than as a
   summary table. */
.pf-id__stats{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  margin:13px 0 0;padding:0;list-style:none;
  font-size:15px;line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.pf-id__statv{font-weight:600;color:var(--pf-ink)}
.pf-id__statk{color:var(--pf-muted)}

/* ---------- 3 · the ring rail ----------
   84px on a 3px conic ring, white inset, label 13px / 500 — the reference's
   story strip, used here for the six destinations these pages deep-link. */
.pf-highlights{
  padding:22px clamp(18px,2.4vw,30px) 6px;
  display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;
}
.pf-highlights::-webkit-scrollbar{display:none}
.pf-highlight{
  flex:0 0 auto;width:84px;
  display:grid;justify-items:center;gap:8px;
  color:var(--pf-ink);text-decoration:none;
}
.pf-highlight__ring{
  display:grid;place-items:center;
  width:84px;height:84px;border-radius:50%;padding:3px;
  background:conic-gradient(from 200deg,#C41E3A,#E8526A,#F0A97A,#D9702C,#C41E3A);
  box-shadow:0 12px 22px -14px rgb(196 30 58 / 70%);
  transition:transform 180ms cubic-bezier(.2,.7,.2,1);
}
.pf-highlight__face{
  display:block;width:100%;height:100%;
  border-radius:50%;padding:3px;background:var(--pf-surface);
}
.pf-highlight__face .ice-picture{border-radius:50%;overflow:hidden}
.pf-highlight__ring img{
  display:block;width:100%;height:100%;
  border-radius:50%;object-fit:cover;background:var(--pf-field);
}
.pf-highlight span{
  font-size:13px;font-weight:500;text-align:center;line-height:1.35;
  color:var(--pf-muted);
}
.pf-highlight:hover .pf-highlight__ring{transform:scale(1.05)}
.pf-highlight:active .pf-highlight__ring{transform:scale(.95)}
/* The story rail, when a page fills the `stories` slot instead. */
.pf-id .srail{padding:22px clamp(18px,2.4vw,30px) 6px;margin:0}

/* ---------- 4 · tab rail ---------- */
.pf-tabs{
  /* The whole docked stack, not just the nav row.
     `top:var(--nav-main-h)` parked this at the bottom of the nav bar, but the
     `.id-ribbon` ("Formerly Janakpur Engineering College" + "Affiliated to
     Tribhuvan University") is ALSO fixed and hangs below it: measured 72→130 at
     390px and 88→150 at 1280px. So the section rail stuck at 72/88, the ribbon
     painted over 58 of its 66px, and the sticky navigation on all seven
     ProfileHeader pages was an 8px sliver the moment the page scrolled.

     `z-index` is deliberately NOT raised to escape it. The ribbon lives inside
     `header.site`, which is its own stacking context at z-50, so lifting this
     rail could only put it OVER a fixed identity bar rather than under it. The
     offset is the fix; the paint order was already correct.

     Same three custom properties `html`'s `scroll-padding-top` already adds up
     for anchor targets, which is the existing statement of how tall the docked
     stack is. */
  position:sticky;
  top:calc(var(--nav-main-h) + var(--former-bar-h) + var(--tu-bar-h));
  z-index:40;
  margin-top:2px;padding:0 clamp(4px,1.6vw,20px);
  background:var(--bg);
  border-bottom:1px solid var(--pf-line);
}
/* The reference's tab row: text tabs at 52px, marked with an inset crimson
   underline rather than a filled pill. `gap:2px` and the 16px padding are its
   values; the row keeps its own horizontal scroll on a phone. */
.pf-tabs__row{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.pf-tabs__row::-webkit-scrollbar{display:none}
.pf-tab{
  flex:0 0 auto;white-space:nowrap;text-decoration:none;
  background:none;color:var(--pf-muted);
  border:0;border-radius:0;
  min-height:52px;display:inline-flex;align-items:center;
  padding:16px 16px 14px;font-size:15px;font-weight:600;line-height:1.3;
  cursor:pointer;
  transition:color 180ms cubic-bezier(.2,.7,.2,1),box-shadow 180ms cubic-bezier(.2,.7,.2,1);
}
.pf-tab:hover{color:var(--pf-ink)}
.pf-tab[aria-current="page"],
.pf-tab.is-active,
.pf-tab.is-current{
  color:var(--pf-ink);
  box-shadow:inset 0 -3px 0 0 var(--crimson);
}
/* The guide filter reuses the .resource-tab / .resource-card hooks in
   ice-motion.js, which hides a filtered-out card by adding .is-hidden. The
   two-class selector is what beats .pf-guide{display:grid}. */
.pf-guide.is-hidden{display:none}

/* ---------- 5 · layout ---------- */
.pf-layout{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:center;gap:18px;padding-top:18px;
}

/* ⚠️ `minmax(0,1fr)` AND `min-width:0`, and both are load-bearing.
   `.pf-main` and `.pf-rail` are grids, and a grid item defaults to
   `min-width:auto` — it refuses to shrink below its own min-content. An `auto`
   track then sizes to the LARGEST such minimum, so ONE stubborn child stretches
   the whole column and every sibling with it.

   Measured on /blog at a 390px viewport on 2026-09-03: every panel and every
   guide card sat at 668px inside a 350px column, and `document.body.scrollWidth`
   was 688 — the page was nearly twice the phone. The culprit was the filter row,
   whose five `white-space:nowrap` buttons have a 592px min-content; it carries
   `overflow-x:auto` and would have scrolled quite happily if it had been allowed
   to shrink. ⚠️ THIS IS OLDER THAN THE 2026-09-03 REBUILD: with the pre-push
   stylesheet the same page measures 708. Only `/answers` was ever protected,
   because the correction lived in `ice-answers.css`
   (`.pf-main > .pf-panel{min-width:0}`) and no other page loads that file. It is
   here now, so every `.pf` page gets it.

   `body` is `overflow-x:clip`, so the excess did not scroll — it was CUT OFF.
   That is why the symptom reads as content and tables chopped and leaking rather
   than as a page that scrolls sideways. */
.pf-main{
  flex:1 1 600px;min-width:0;max-width:880px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pf-gap);
}
.pf-rail{
  flex:1 1 300px;min-width:0;max-width:348px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:12px;
}
.pf-main > *,
.pf-rail > *{min-width:0}

/* ---------- 6 · panels ---------- */
.pf-panel{
  background:var(--pf-surface);
  border:1px solid var(--pf-line);
  border-radius:var(--pf-radius);
  padding:var(--pf-pad);
}
.pf-panel--flush{padding:0;overflow:hidden}
.pf-panel--navy{
  background:var(--pf-field);border-color:var(--pf-field);color:var(--pf-on-field);
}
.pf-panel--live{border-color:color-mix(in srgb,var(--crimson) 34%,transparent)}
.pf-panel--flush > .pf-panel__pad{padding:var(--pf-pad)}

.pf-kicker{
  display:block;margin:0;
  font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ice-color-text-accent);
}
.pf-panel--navy .pf-kicker{color:var(--pf-accent-on-field)}
.pf-panel h2{
  margin:5px 0 6px;font-size:clamp(1.15rem,1.05rem + .4vw,1.32rem);
  font-weight:800;letter-spacing:-.025em;line-height:1.25;color:var(--pf-brand);
}
.pf-panel h3{
  margin:5px 0 10px;font-size:1.06rem;font-weight:800;
  letter-spacing:-.015em;line-height:1.3;color:var(--pf-brand);
}
.pf-panel--navy :is(h2,h3){color:var(--pf-on-field)}
.pf-panel > p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--pf-muted)}
.pf-panel > p:last-child{margin-bottom:0}
.pf-panel--navy > p{color:var(--pf-on-field-muted)}
/* :not() keeps the generic link colour off the buttons — a bare `.pf-panel a`
   rule outranks `.pf-btn--primary` and paints its label terracotta on crimson,
   which is very nearly invisible. */
.pf-panel a:not(.pf-btn){color:var(--ice-color-text-accent)}
.pf-panel--navy a:not(.pf-btn){color:var(--pf-on-field)}

/* The fee calculator ships as a full-bleed section with its own .wrap gutter.
   Inside the rail layout it has to become one more card in the column. */
.pf-main > .fee-calc{
  padding:var(--pf-pad);
  background:var(--pf-surface);
  border:1px solid var(--pf-line);
  border-radius:var(--pf-radius);
}
.pf-main > .fee-calc .wrap{width:100%;max-width:none;padding-inline:0}

.pf-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--pf-gap);align-items:stretch}
.pf-duo > .pf-panel{margin:0}

/* ---------- 7 · panel furniture ---------- */
/* 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. Measured:
   min-height 48px, padding 13px 24px, radius 20px, 15px / 700, hover
   translateY(-2px), active scale(.96), transition 180ms cubic-bezier(.2,.7,.2,1). */
.pf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 24px;border-radius:20px;
  font-size:15px;font-weight:700;line-height:1.2;text-decoration:none;
  border:0;cursor:pointer;
  transition:transform 180ms cubic-bezier(.2,.7,.2,1);
}
.pf-btn:hover{transform:translateY(-2px)}
.pf-btn:active{transform:scale(.96)}
.pf-btn--primary{
  background:linear-gradient(180deg,#E8526A,var(--crimson));
  color:var(--accent-ink);
  box-shadow:
    0 14px 24px -12px rgb(196 30 58 / 65%),
    inset 0 2px 3px rgb(255 255 255 / 45%),
    inset 0 -5px 8px rgb(168 24 48 / 50%);
}
.pf-btn--primary:hover{color:var(--accent-ink)}
.pf-btn--navy{background:var(--pf-field);color:var(--pf-on-field)}
.pf-btn--navy:hover{background:var(--navy-deep);color:var(--pf-on-field)}
/* `--pf-surface` and `--surface-tint`, not the reference's #FFFFFF → #F3EFE9.
   Those two hexes are a light-mode pair and graphite dark mode would paint a
   near-white button behind near-white text. */
.pf-btn--quiet{
  background:linear-gradient(180deg,var(--pf-surface),var(--surface-tint));
  color:var(--pf-brand);font-weight:600;
  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%);
}
.pf-btn--quiet:hover{color:var(--pf-brand)}
html[data-theme="dark"] .pf-btn--quiet{
  color:var(--pf-ink);
  box-shadow:
    0 12px 22px -14px rgb(0 0 0 / 60%),
    inset 0 1px 0 rgb(255 255 255 / 8%),
    inset 0 -3px 6px rgb(0 0 0 / 25%);
}
html[data-theme="dark"] .pf-btn--quiet:hover{color:var(--pf-ink)}
.pf-btn--block{display:flex;width:100%}
.pf-btn--onnavy{
  background:var(--glass-strong);color:var(--pf-on-field);border-color:var(--glass-brd);
}
.pf-btn--onnavy:hover{background:var(--glass-hi);color:var(--pf-on-field)}
.pf-btnrow{display:flex;flex-wrap:wrap;gap:8px}
:is(.pf-list,.pf-chips,.pf-notes,.pf-tiles,.pf-steps) + .pf-btnrow{margin-top:12px}

/* full-width plate at the top of a flush panel */
.pf-banner{display:block;width:100%;height:clamp(160px,24vw,240px);object-fit:cover;background:var(--pf-field)}
.pf-panel--flush > .ice-picture:first-child{height:clamp(160px,24vw,240px)}

/* tick / arrow lists */
.pf-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.pf-list li{
  display:grid;grid-template-columns:18px 1fr;gap:8px;
  font-size:13.5px;line-height:1.45;color:var(--pf-muted);
}
.pf-list li::before{content:"\2713";color:var(--pf-accent);font-weight:800}
.pf-list--arrow li::before{content:"\203A"}
.pf-panel--navy .pf-list li{color:var(--pf-on-field-muted)}
.pf-panel--navy .pf-list li::before{color:var(--pf-accent-on-field)}

/* chip cloud */
.pf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pf-chips li{
  background:var(--surface-tint);border:1px solid var(--pf-line);
  border-radius:999px;padding:6px 11px;font-size:12.5px;color:var(--pf-muted);
}

/* numbered steps */
.pf-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:pf-step}
.pf-steps li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;counter-increment:pf-step}
.pf-steps li::before{
  content:counter(pf-step);
  width:28px;height:28px;border-radius:50%;
  background:var(--pf-field);color:var(--pf-on-field);
  font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.pf-panel--navy .pf-steps li::before{background:var(--glass-strong)}
.pf-steps b{display:block;font-size:15px;font-weight:700;color:var(--pf-brand)}
.pf-panel--navy .pf-steps b{color:var(--pf-on-field)}
.pf-steps p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--pf-muted)}
.pf-panel--navy .pf-steps p{color:var(--pf-on-field-muted)}

/* tinted sub-cards */
.pf-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.pf-tile{background:var(--surface-tint);border:1px solid var(--pf-line);border-radius:10px;padding:11px 12px}
.pf-tile__zero{font-size:17px;font-weight:800;color:var(--ice-color-text-accent)}
.pf-tile b{display:block;font-size:13px;font-weight:700;color:var(--pf-brand);margin-top:2px}
.pf-tile span{display:block;font-size:11.5px;line-height:1.4;color:var(--pf-muted);margin-top:2px}

/* stacked note blocks */
.pf-notes{display:grid;gap:8px}
.pf-note{background:var(--surface-tint);border-radius:10px;padding:12px 14px}
.pf-note b{display:block;font-size:14.5px;font-weight:800;color:var(--pf-brand)}
.pf-note span{display:block;font-size:13px;line-height:1.5;color:var(--pf-muted);margin-top:3px}

/* linked rows (programs, guides, official links) */
.pf-rows{display:grid}
.pf-row{
  display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;
  padding:12px var(--pf-pad);border-top:1px solid var(--pf-line);
  color:inherit;text-decoration:none;
}
.pf-row:hover{background:var(--surface-tint)}
.pf-row__thumb{width:74px;height:56px;border-radius:8px;object-fit:cover;background:var(--pf-field)}
.pf-row b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.015em;color:var(--pf-brand)}
.pf-row p{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--pf-muted)}
.pf-row__count{text-align:right}
.pf-row__count b{font-size:19px;line-height:1}
.pf-row__count span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;color:var(--pf-muted);margin-top:3px}

/* guide cards.
   IMAGE-LED since 2026-09-03. It was a 96px thumbnail beside two lines of
   text, which is the size at which a photograph stops being a picture and
   becomes a bullet point — the thing the owner's brief is about. The reference
   opens a feed post on an image running the full width of the card, and that
   is what these do now. */
.pf-guide{
  display:block;
  background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:24px;overflow:hidden;
  color:inherit;text-decoration:none;
  transition:transform 200ms cubic-bezier(.2,.7,.2,1),box-shadow 200ms cubic-bezier(.2,.7,.2,1);
}
.pf-guide:hover{transform:translateY(-2px);box-shadow:0 16px 28px -22px rgb(4 9 36 / 50%)}
.pf-guide__media{
  display:block;position:relative;
  aspect-ratio:40 / 15;background:var(--pf-field);
}
.pf-guide__media :is(img,picture){display:block;width:100%;max-width:100%;height:100%}
.pf-guide__media img{object-fit:cover;object-position:var(--media-focus,center 42%)}
.pf-guide__body{padding:16px clamp(16px,2vw,20px) 18px}
.pf-guide__body b{display:block;font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--pf-ink);margin:6px 0 5px}
.pf-guide__body p{margin:0;font-size:14.5px;line-height:1.55;color:var(--pf-muted);max-width:62ch}
.pf-guide:hover .pf-guide__body b{color:var(--ice-color-text-accent)}
.pf-go{display:block;font-size:13.5px;font-weight:700;color:var(--ice-color-text-accent);margin-top:10px}

/* contact channels */
.pf-channels{display:grid;gap:8px}
.pf-channel{
  display:flex;align-items:center;gap:12px;
  background:var(--surface-tint);border-radius:12px;padding:12px 14px;
}
.pf-channel__badge{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  background:var(--pf-field);color:var(--pf-on-field);font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.pf-channel__meta{flex:1;min-width:0}
.pf-channel__meta span{
  display:block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pf-muted);
}
.pf-panel .pf-channel__meta a{
  display:block;font-size:17px;font-weight:800;
  letter-spacing:-.015em;color:var(--pf-brand);text-decoration:none;
}
.pf-panel .pf-channel__meta a:hover{color:var(--ice-color-text-accent)}

/* definition table */
.pf-defs{display:grid;gap:1px;margin:0}
.pf-defs > div{
  display:grid;grid-template-columns:100px 1fr;gap:10px;
  padding:7px 0;border-top:1px solid var(--pf-line);font-size:13.5px;
}
.pf-defs dt{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pf-muted);padding-top:2px;
}
.pf-defs dd{margin:0;color:var(--pf-ink)}

/* accordions */
.pf-faq details{border-top:1px solid var(--pf-line)}
.pf-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:700;color:var(--pf-brand);
}
.pf-faq summary::-webkit-details-marker{display:none}
.pf-faq summary::after{
  content:"+";font-size:20px;font-weight:400;color:var(--pf-accent);
  flex:0 0 auto;transition:transform .15s;
}
.pf-faq details[open] summary::after{transform:rotate(45deg)}
.pf-faq details > p{margin:0;padding:0 34px 14px 0;font-size:14px;line-height:1.6;color:var(--pf-muted)}

/* map */
.pf-map{width:100%;height:240px;border:0;display:block;background:var(--surface-tint)}

/* fine print */
.pf-fine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--pf-muted)}

/* the callback form keeps its site-wide styling; it only needs to stop
   drawing the rule it used to need at the bottom of a sidebar.
   Nothing here may set `display` on .inquiry-form — site-20260716.js hides it
   with the plain `hidden` attribute after a successful post, and any author
   display rule silently defeats that. */
.pf-panel .inquiry-form{margin-top:0;padding-top:0;border-top:0}
.pf-panel .inquiry-alt{text-align:left;padding-left:0}

/* ---------- 8 · side rail ---------- */
.pf-railcard{
  background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:var(--pf-radius);padding:15px 16px;
}
.pf-railcard--live{border-color:color-mix(in srgb,var(--crimson) 34%,transparent)}
.pf-railcard--navy{background:var(--pf-field);border-color:var(--pf-field);color:var(--pf-on-field)}
.pf-railcard--flush{padding:0;overflow:hidden}
.pf-railcard__kicker{
  font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.4;
  text-transform:uppercase;color:var(--ice-color-text-accent);
}
.pf-railcard--navy .pf-railcard__kicker{color:var(--terracotta-soft)}
.pf-railcard__kicker--live{
  color:var(--pf-live);display:flex;align-items:center;gap:7px;margin-bottom:7px;
}
.pf-railcard__kicker--live::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--crimson);
}
.pf-railcard__title{
  font-size:16px;font-weight:600;letter-spacing:-.005em;
  line-height:1.35;color:var(--pf-ink);margin-top:9px;
}
.pf-railcard--navy .pf-railcard__title{color:var(--pf-on-field)}
.pf-railcard__big{font-size:31px;font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:8px 0 4px}
.pf-railcard p{margin:5px 0 14px;font-size:14.5px;line-height:1.55;color:var(--pf-muted)}
.pf-railcard--navy p{color:var(--pf-on-field-muted)}
.pf-railcard .pf-list{margin:9px 0 11px}
.pf-railcard .pf-list li{font-size:12.5px}
.pf-railcard__links{display:grid}
.pf-railcard__links a{
  border-top:1px solid var(--pf-line);padding:9px 0 8px;
  font-size:13.5px;font-weight:700;color:var(--pf-brand);text-decoration:none;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.pf-railcard__links a::after{content:"\2192";color:var(--pf-accent)}
.pf-railcard__links a:hover{color:var(--ice-color-text-accent)}
.pf-railcard__contacts{display:grid;gap:8px}
/* 92px, not 76. "ADMISSIONS" set at 10.5px / 800 / .1em measures 85px, so the
   label overran its column and ran straight into the number beside it —
   "ADMISSIONS9764577250" on every `.pf` page at every width. Pre-existing;
   found by measuring on 2026-09-03. */
.pf-railcard__contacts a{
  display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:baseline;
  font-size:13.5px;color:var(--pf-brand);text-decoration:none;
}
.pf-railcard__contacts a:hover{color:var(--ice-color-text-accent)}
.pf-railcard__contacts span{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pf-muted);
}
.pf-railcard__contacts b{font-weight:700}
.pf-railcard__media{display:block;width:100%;height:118px;object-fit:cover;background:var(--pf-field)}
.pf-railcard__foot{padding:13px 16px 15px}
.pf-railcard__foot b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em;color:var(--pf-brand)}
.pf-railcard__foot p{margin:4px 0 10px;font-size:12.5px}

/* ---------- 8b · media normalisation ----------
   The base .ice-picture rules in ice-design-system.css are scoped to
   body.page-course, and these pages deliberately leave that system behind.
   Every <picture> inside the profile shell therefore needs its own box. */
.pf .ice-picture{display:block;width:100%;height:100%;overflow:hidden}
.pf .ice-picture img{display:block;width:100%;height:100%;object-fit:cover}
.pf-highlight__ring .ice-picture{border-radius:50%}
.pf-highlight__ring .ice-picture img{border-radius:50%;background:var(--pf-field)}
.pf-row .ice-picture{width:74px;height:56px;border-radius:8px}
.pf-guide__media .ice-picture{display:block;width:100%;height:100%}
.pf-railcard--flush .ice-picture{height:118px}

/* ---------- 9 · responsive ---------- */
@media (min-width:1000px){
  .pf-rail{position:sticky;top:calc(var(--nav-main-h) + 70px)}
}
@media (max-width:640px){
  .pf-id{border-radius:22px}
  .pf-id__actions{width:100%}
  .pf-id__actions .pf-btn{flex:1 1 auto}
  .pf-highlight,.pf-highlight__ring{width:70px}
  .pf-highlight__ring{height:70px;padding:2.5px}
  .pf-highlight__face{padding:2.5px}
  .pf-highlight span{font-size:12px}
  .pf-row{grid-template-columns:60px 1fr auto;padding:12px 14px}
  .pf-row__thumb{width:60px;height:48px}
  .pf-row .ice-picture{width:60px;height:48px}
  .pf-defs > div{grid-template-columns:84px 1fr}
}

/* ---------- 10 · reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pf-faq summary::after{transition:none}
  .pf-btn,.pf-highlight__ring,.pf-tab,.pf-guide{transition:none}
  .pf-guide:hover,
  .pf-btn:hover,.pf-btn:active,
  .pf-highlight:hover .pf-highlight__ring,
  .pf-highlight:active .pf-highlight__ring{transform:none}
}