/* ============================================================
   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;
  padding:calc(var(--nav-h) + 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 ---------- */
.pf-id{
  background:var(--pf-surface);
  border:1px solid var(--pf-line);
  border-radius:var(--pf-radius);
  overflow:hidden;
}
.pf-id__cover{
  position:relative;
  height:clamp(150px,26vw,232px);
  background:var(--navy-deep);
}
.pf-id__cover img,
.pf-id__cover picture{display:block;width:100%;height:100%}
.pf-id__cover img{object-fit:cover;object-position:center 35%}
.pf-id__flag{
  position:absolute;left:14px;top:14px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:var(--crimson);color:var(--accent-ink);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
}
/* 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(14px,2.2vw,24px) 20px}
.pf-id__top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-top:-46px;flex-wrap:wrap;
}
.pf-id__crest{
  width:104px;height:104px;flex:0 0 auto;
  border-radius:50%;border:4px solid var(--pf-surface);
  background:var(--pf-field) url('/img/ice-crest.png') center/72% no-repeat;
}
.pf-id__actions{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:8px}
.pf-id__headline{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(16px,3vw,32px);flex-wrap:wrap;margin-top:14px;
}
.pf-id__text{flex:1 1 420px;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,
   so nothing moves visually. */
.pf-id__title{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin:0 0 6px;
}
.pf-id__text h1{
  margin:0;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.15;
  color:var(--pf-brand);
  text-wrap:balance;
}
.pf-id__chip{
  background:var(--pf-brand);color:var(--pf-surface);
  font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:4px 8px;border-radius:999px;white-space:nowrap;
}
html[data-theme="dark"] .pf-id__chip{color:var(--ice-palette-night-900)}
.pf-id__text p{
  margin:0;font-size:15px;line-height:1.55;
  color:var(--pf-muted);max-width:64ch;
}
/* The dividers are drawn by the CELLS, not by the container.
   Until 2026-08-22 this painted `--pf-line` as its own background and let 1px
   gaps show it through. That works only while the items exactly fill the grid:
   /answers passes four facts, `auto-fit` resolves to three columns at 390px,
   and the two empty cells of row two rendered as a solid beige slab under the
   heading — the first thing a phone visitor saw on the answer library.
   Giving each cell a 1px outset shadow and leaving the container on the card
   surface produces the identical rule lines with no empty cell to paint. */
.pf-id__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:1px;flex:1 1 420px;
  background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:10px;overflow:hidden;margin:0;
}
.pf-id__facts > div{
  background:var(--pf-surface);padding:10px 13px;
  box-shadow:0 0 0 1px var(--pf-line);
}
/* On a phone the strip is ~322px wide, so a 104px floor resolves to three
   columns and a four-fact strip leaves one cell of the second row empty. A
   140px floor resolves to two, which four facts fill exactly. Every page using
   this component passes three or four facts, and both divide by two. */
@media (max-width:640px){
  .pf-id__facts{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
.pf-id__facts dt{
  font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--pf-muted);
}
.pf-id__facts dd{
  margin:2px 0 0;font-size:17px;font-weight:800;
  letter-spacing:-.02em;color:var(--pf-brand);
}

/* ---------- 3 · highlights ---------- */
.pf-highlights{
  border-top:1px solid var(--pf-line);
  padding:14px clamp(14px,2.2vw,24px) 15px;
  display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;
}
.pf-highlights::-webkit-scrollbar{display:none}
.pf-highlight{
  flex:0 0 auto;width:76px;
  display:grid;justify-items:center;gap:7px;
  color:var(--pf-brand);text-decoration:none;
}
.pf-highlight__ring{
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--pf-accent);padding:3px;
  display:block;
}
.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:11.5px;font-weight:700;text-align:center;line-height:1.25;
}
.pf-highlight:hover .pf-highlight__ring{border-color:var(--crimson)}

/* ---------- 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:12px 0;
  background:var(--bg);
  border-bottom:1px solid var(--pf-line);
}
.pf-tabs__row{display:flex;gap:7px;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:var(--pf-surface);color:var(--pf-muted);
  border:1px solid var(--pf-line);border-radius:999px;
  padding:9px 15px;font-size:13px;font-weight:600;
}
.pf-tab:hover{border-color:var(--pf-brand);color:var(--pf-brand)}
.pf-tab[aria-current="page"],
.pf-tab.is-active{
  background:var(--pf-field);border-color:var(--pf-field);
  color:var(--pf-on-field);font-weight:800;
}
/* 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;
}
.pf-main{flex:1 1 600px;min-width:0;max-width:880px;display:grid;gap:var(--pf-gap)}
.pf-rail{flex:1 1 300px;max-width:348px;display:grid;gap:12px}

/* ---------- 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 */
.pf-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 18px;border-radius:999px;
  font-size:13px;font-weight:800;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
}
.pf-btn--primary{background:var(--crimson);color:var(--accent-ink)}
.pf-btn--primary:hover{background:var(--crimson-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-btn--quiet{
  background:var(--pf-surface);color:var(--pf-brand);
  border-color:var(--pf-line);font-weight:700;
}
.pf-btn--quiet:hover{border-color:var(--pf-brand);color:var(--pf-brand)}
.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 */
.pf-guide{
  display:grid;grid-template-columns:96px 1fr;
  background:var(--pf-surface);border:1px solid var(--pf-line);
  border-radius:var(--pf-radius);overflow:hidden;
  color:inherit;text-decoration:none;
}
.pf-guide:hover{border-color:var(--navy)}
.pf-guide img{display:block;width:100%;height:100%;object-fit:cover;background:var(--pf-field)}
.pf-guide__body{padding:13px 15px}
.pf-guide__body b{display:block;font-size:16px;font-weight:800;line-height:1.25;letter-spacing:-.015em;color:var(--pf-brand);margin:5px 0 4px}
.pf-guide__body p{margin:0;font-size:13px;line-height:1.5;color:var(--pf-muted)}
.pf-go{display:block;font-size:12.5px;font-weight:800;color:var(--ice-color-text-accent);margin-top:7px}

/* 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:10.5px;font-weight:800;letter-spacing:.13em;
  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:15.5px;font-weight:800;letter-spacing:-.015em;
  line-height:1.3;color:var(--pf-brand);margin-top:5px;
}
.pf-railcard--navy .pf-railcard__title{color:var(--pf-on-field)}
.pf-railcard__big{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:6px 0 2px}
.pf-railcard p{margin:5px 0 11px;font-size:13px;line-height:1.5;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}
.pf-railcard__contacts a{
  display:grid;grid-template-columns:76px 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 .ice-picture{min-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__crest{width:78px;height:78px}
  .pf-id__top{margin-top:-34px}
  .pf-guide{grid-template-columns:84px 1fr}
  .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}
}