/* ============================================================
Imperial College of Engineering — shared site styles
Fable overhaul: one mobile-first system.
Direction: "drafting film over the blueprint," recomposed.
Deep-navy blueprint fields (header, heroes, contact, footer)
carry the institution; between them a quiet warm-paper
document. The final-loaded ICE system pairs an institutional display serif
with a neutral sans and one shared hierarchy for editorial and utility roles.
Crimson acts (CTAs, live chips); terracotta annotates
(kickers, icons, rules); navy structures; paper reads.
Architecture:
1 tokens · 2 base + a11y · 3 rails · 4 type roles
5 buttons · 6 navy field · 7 header (contact row, nav,
drawer, dropdowns, theme, ribbon) · 8 heroes · 9 news panel
10 quickbar · 11 admission welcome · 12 fact strips
13 sections + statement · 14 cards + media · 15 ledgers
16 content components · 17 footer · 18 sticky CTA
19 wide-screen composition · 20 reduced motion
Base styles target a ~360px column; @media (min-width:*)
adds complexity. Content-driven breakpoints: 560 760 1000
1181 1440. Nothing essential is hidden by CSS or animation.
============================================================ */
/* ---------- 1 · tokens ---------- */
:root{
/* Canonical ICE palette: immutable swatches, independent of theme. */
--ice-palette-night-950:#040924;
--ice-palette-night-900:#070D1E;
--ice-palette-navy-900:#0C1A38;
--ice-palette-navy-800:#13234B;
--ice-palette-navy-700:#1A2B52;
--ice-palette-navy-100:#E8EAF2;
--ice-palette-crimson-700:#A81830;
--ice-palette-crimson-600:#C41E3A;
--ice-palette-crimson-400:#E8526A;
--ice-palette-crimson-300:#EF667C;
--ice-palette-terracotta-800:#9E4814;
--ice-palette-terracotta-600:#D9702C;
--ice-palette-terracotta-400:#E8915A;
/* Green is not a brand accent and is used in exactly one place: "today" on
the Nepali calendar. It exists because red already means something there.
A Nepali patro prints Saturdays and public holidays in red, the calendar
tints its weekend columns with the terracotta accent for that reason, and
today was drawn in the same colour — so the one cell a reader looks for
first was indistinguishable from a day off. Measured against the surfaces
it lands on: 6.60:1 on white, 5.44:1 on its own 13% tint, and the dark
value 7.26:1 on the graphite card and 5.54:1 on the tint. */
--ice-palette-forest-700:#116B37;
--ice-palette-forest-300:#6FCF97;
--ice-palette-warm-50:#FAF7F2;
--ice-palette-warm-100:#F3EFE9;
--ice-palette-white:#FFFFFF;
--ice-palette-ink-900:#17181C;
--ice-palette-ink-50:#F0EDE8;
--ice-palette-slate-600:#666A71;
--ice-palette-slate-300:#A8ACBA;
--ice-palette-line-200:#E7E1D6;
--ice-palette-line-700:#2A3A62;
/* Neutral graphite ramp for dark mode. The old dark theme reused the navy
brand swatches, which read as a blue-tinted page rather than a dark one;
these are flat greys so the navy stays a brand colour instead of becoming
the background. Muted ink is the lighter #B5BAC1 rather than the more
obvious #949BA4, which drops to 3.98:1 on the field surface and fails AA. */
--ice-palette-graphite-950:#1E1F22;
--ice-palette-graphite-900:#232428;
--ice-palette-graphite-850:#2B2D31;
--ice-palette-graphite-800:#313338;
--ice-palette-graphite-750:#383A40;
--ice-palette-graphite-700:#3F4147;
--ice-palette-graphite-300:#B5BAC1;
--ice-palette-graphite-200:#DBDEE1;
--ice-palette-graphite-100:#F2F3F5;
/* Graphite surfaces sit lighter than the navy they replaced, so the accent
inks that cleared AA against navy no longer do. These two are the dark-mode
text tints: crimson-300 measured 4.13:1 on the muted surface and
terracotta-400 4.46:1 on the calendar's tinted cell. */
--ice-palette-crimson-200:#F79AAA;
--ice-palette-terracotta-300:#F0A97A;
/* Canonical light-theme roles. Every filled role has an explicit ink. */
--ice-color-canvas:var(--ice-palette-warm-50);
--ice-color-on-canvas:var(--ice-palette-ink-900);
--ice-color-surface:var(--ice-palette-white);
--ice-color-on-surface:var(--ice-palette-ink-900);
--ice-color-surface-muted:var(--ice-palette-warm-100);
--ice-color-on-surface-muted:var(--ice-palette-ink-900);
--ice-color-surface-field:var(--ice-palette-warm-100);
--ice-color-on-surface-field:var(--ice-palette-ink-900);
--ice-color-surface-brand:var(--ice-palette-navy-900);
--ice-color-on-surface-brand:var(--ice-palette-warm-50);
--ice-color-action:var(--ice-palette-crimson-600);
--ice-color-on-action:var(--ice-palette-white);
--ice-color-action-hover:var(--ice-palette-crimson-700);
--ice-color-on-action-hover:var(--ice-palette-white);
--ice-color-accent:var(--ice-palette-terracotta-400);
--ice-color-on-accent:var(--ice-palette-navy-900);
--ice-color-primary:var(--ice-color-surface-brand);
--ice-color-text:var(--ice-color-on-canvas);
--ice-color-text-muted:var(--ice-palette-slate-600);
--ice-color-text-accent:var(--ice-palette-terracotta-800);
--ice-color-text-accent-on-brand:var(--ice-palette-terracotta-400);
--ice-color-text-action:var(--ice-palette-crimson-600);
--ice-color-text-action-on-brand:var(--ice-palette-crimson-300);
--ice-color-text-today:var(--ice-palette-forest-700);
--ice-color-border:var(--ice-palette-line-200);
--ice-color-border-strong:var(--ice-palette-navy-900);
/* Stable editorial paper used by the admission welcome dialog in both themes. */
--ice-color-surface-fixed-light:#FFF9F0;
--ice-color-on-surface-fixed-light:var(--ice-palette-ink-900);
--ice-color-text-muted-on-fixed-light:var(--ice-palette-slate-600);
/* ── ICE Brand Palette ─────────────────────────────────────────────────
Source: ICE Brand Guidelines §02 — Color Palette
Navy leads. Crimson = CTAs. Terracotta = highlights.
Never crimson + terracotta side-by-side at equal size. */
/* PRIMARY */
--navy:var(--ice-palette-navy-800); /* Primary — headlines, nav, primary UI */
--navy-deep:var(--ice-palette-navy-900); /* Deeper navy for overlays / hero fields */
--navy-ink:var(--ice-palette-night-900); /* Near-black — footers, deepest surfaces */
/* ACCENTS */
--crimson:var(--ice-color-action); /* CTAs, emphasis, LIVE badge */
--crimson-hover:var(--ice-color-action-hover); /* Hover state for crimson buttons */
--crimson-soft:var(--ice-palette-crimson-400); /* Lighter tint for use on dark backgrounds */
--terracotta:var(--ice-palette-terracotta-600); /* Highlights, kickers, photo overlays */
--terracotta-soft:var(--ice-color-accent); /* Lighter tint for text on dark surfaces */
/* The keyboard focus ring, as its own role.
It was `--crimson` directly in both themes until 2026-08-22. Crimson-600 is
the one accent that never got a dark-mode tint the way terracotta did, and
on graphite it measures 2.36:1 against a card and 2.82:1 against the canvas
— under the 3:1 WCAG 1.4.11 floor for a non-text indicator, on the single
UI element whose entire job is to be seen. Light mode keeps exactly the ring
it had; only the dark value moves. */
--focus-ring:var(--crimson);
/* NEUTRALS */
--bg:var(--ice-color-canvas); /* Warm off-white — page background */
--card:var(--ice-color-surface); /* Card / surface background */
--field:var(--ice-color-surface-field); /* Input / field background */
--ink:var(--ice-color-on-canvas); /* Primary text */
--slate:var(--ice-color-text-muted); /* Secondary / supporting text */
--hairline:var(--ice-color-border); /* Borders, rules, dividers */
--surface-tint:var(--ice-color-surface-field);
--band-bg:var(--ice-color-surface-muted); /* Alternating section tint */
/* Stable navy for dark-mode surfaces (never overridden by theme) */
--navy-mid:var(--ice-palette-navy-800);
/* Accent ink: text colour on crimson/terracotta fills */
--accent-ink:var(--ice-color-on-action);
/* Sweep animation dim colour */
--sweep-dim:rgba(19,35,75,.45);
/* glass — for surfaces floating over dark media */
--glass:rgba(255,255,255,.07);
--glass-strong:rgba(255,255,255,.13);
--glass-brd:rgba(255,255,255,.2);
--glass-hi:rgba(255,255,255,.38);
/* Surface shadow */
--surface-shadow:0 10px 28px rgba(19,35,75,.08);
/* header chrome — navy glass in both themes */
--header-tint:rgba(19,35,75,.72);
--header-tint-solid:rgba(19,35,75,.92);
--header-tint-scrolled:rgba(12,26,56,.9);
--header-tint-scrolled-solid:#0C1A38;
--header-scrim:linear-gradient(180deg,rgba(7,13,30,.5),rgba(7,13,30,.2) 56%,transparent);
--header-ink:#fff;
--header-ink-soft:rgba(255,255,255,.82);
--header-ink-dim:rgba(255,255,255,.62);
--header-eyebrow:var(--terracotta-soft);
--header-hair:rgba(255,255,255,.14);
--header-glass-bg:rgba(255,255,255,.07);
--header-glass-bg-strong:rgba(255,255,255,.13);
--header-focus-ring:#fff;
--chrome:rgba(12,26,56,.8);
--chrome-solid:rgba(12,26,56,.96);
/* geometry */
--u:8px;
--r-s:4px;
--r-m:8px;
--r-l:12px;
--gutter:clamp(20px,4.5vw,72px);
--contact-h:44px;
--nav-main-h:76px;
--tu-bar-h:30px;
--former-bar-h:28px;
--nav-h:calc(var(--contact-h) + var(--nav-main-h) + var(--tu-bar-h) + var(--former-bar-h));
/* type — system font stack per §03 */
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
--display:var(--sans);
--serif:var(--sans);
--news-serif:var(--display);
--t-display:clamp(2.75rem,1.6rem + 5vw,4.75rem);
--t-h1:clamp(2.125rem,1.4rem + 3.2vw,3.5rem);
--t-h2:clamp(1.625rem,1.2rem + 1.9vw,2.5rem);
--t-h3:clamp(1.1875rem,1.05rem + .6vw,1.5rem);
--t-body:1rem;
--t-body-lg:1.0625rem;
--t-meta:.8125rem;
--t-micro:.75rem;
/* rhythm */
--sec:clamp(52px,5vw + 24px,96px);
--sec-lg:clamp(72px,8vw,140px);
--sec-sm:clamp(36px,4vw,56px);
/* motion */
--dur-fast:180ms;
--dur-med:240ms;
--dur-reveal:420ms;
--dur-hero:550ms;
--ease:cubic-bezier(.2,.7,.2,1);
}
html[data-theme="dark"]{
/* Canonical dark-theme roles, on the neutral graphite ramp. */
--ice-color-canvas:var(--ice-palette-graphite-950);
--ice-color-on-canvas:var(--ice-palette-graphite-100);
--ice-color-surface:var(--ice-palette-graphite-850);
--ice-color-on-surface:var(--ice-palette-graphite-100);
--ice-color-surface-muted:var(--ice-palette-graphite-800);
--ice-color-on-surface-muted:var(--ice-palette-graphite-100);
--ice-color-surface-field:var(--ice-palette-graphite-750);
--ice-color-on-surface-field:var(--ice-palette-graphite-100);
--ice-color-surface-brand:var(--ice-palette-graphite-900);
--ice-color-on-surface-brand:var(--ice-palette-graphite-100);
--ice-color-action:var(--ice-palette-crimson-600);
--ice-color-on-action:var(--ice-palette-warm-50);
--ice-color-action-hover:var(--ice-palette-crimson-700);
--ice-color-on-action-hover:var(--ice-palette-warm-50);
--ice-color-accent:var(--ice-palette-terracotta-400);
--ice-color-on-accent:var(--ice-palette-navy-900);
--ice-color-primary:var(--ice-color-surface-brand);
--ice-color-text:var(--ice-color-on-canvas);
--ice-color-text-muted:var(--ice-palette-graphite-300);
--ice-color-text-accent:var(--ice-palette-terracotta-300);
--ice-color-text-accent-on-brand:var(--ice-palette-terracotta-300);
--ice-color-text-action:var(--ice-palette-crimson-200);
--ice-color-text-action-on-brand:var(--ice-palette-crimson-200);
--ice-color-text-today:var(--ice-palette-forest-300);
--ice-color-border:var(--ice-palette-graphite-700);
--ice-color-border-strong:var(--ice-palette-graphite-700);
--navy:var(--ice-palette-graphite-100);
--navy-deep:var(--ice-palette-graphite-950);
--navy-ink:var(--ice-palette-graphite-950);
--crimson:var(--ice-color-action);
--crimson-hover:var(--ice-color-action-hover);
--crimson-soft:var(--ice-palette-crimson-200);
/* crimson-300 (#EF667C): 4.51:1 against the graphite card and 3.72:1 against
the lightest dark surface the ring can land on. Still unmistakably the
brand red, which is why it is a tint of crimson rather than a neutral. */
--focus-ring:var(--ice-palette-crimson-300);
--terracotta:var(--ice-palette-terracotta-300);
--terracotta-soft:var(--ice-color-accent);
--accent-ink:var(--ice-color-on-action);
--sweep-dim:rgba(219,222,225,.42);
--bg:var(--ice-color-canvas);
--card:var(--ice-color-surface);
--field:var(--ice-color-surface-field);
--ink:var(--ice-color-on-canvas);
--slate:var(--ice-color-text-muted);
--hairline:var(--ice-color-border);
--surface-tint:var(--ice-color-surface-field);
--surface-shadow:0 14px 36px rgba(0,0,0,.4);
--band-bg:var(--ice-color-surface-muted);
--header-tint:rgba(30,31,34,.86);
--header-tint-solid:rgba(30,31,34,.93);
--header-tint-scrolled:rgba(30,31,34,.93);
--header-tint-scrolled-solid:#1E1F22;
--header-scrim:linear-gradient(180deg,rgba(20,21,23,.5),rgba(20,21,23,.22) 56%,transparent);
--chrome:rgba(35,36,40,.8);
--chrome-solid:rgba(35,36,40,.95);
color-scheme:dark;
}
/* ---------- 2 · base + a11y ---------- */
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding clears the whole fixed stack: nav row plus the identity strip
that now docks under it, or anchor targets land behind the strip. */
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-main-h) + var(--former-bar-h) + var(--tu-bar-h) + 72px)}
html.motion-static{scroll-behavior:auto}
html.motion-static *,html.motion-static *::before,html.motion-static *::after{
animation:none!important;
transition-duration:0s!important;
transition-delay:0s!important;
}
body{
overflow-x:clip;
font-family:var(--sans);
background:var(--bg);color:var(--ink);
font-size:var(--ice-type-body-size);font-weight:450;line-height:var(--ice-type-body-line);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{color:inherit}
h1,h2{font-family:var(--ice-font-display,var(--display));color:var(--navy)}
h1{font-weight:400}
h2{font-weight:500}
h3,h4{font-family:var(--sans);font-weight:600;color:var(--navy)}
img{max-width:100%}
main{display:block}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--crimson);color:var(--accent-ink);font-weight:700;padding:12px 20px;border-radius:0 0 var(--r-s) 0;text-decoration:none}
.skip-link:focus{left:0}
.sr-only{
position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important
}
a,button,input,select{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--focus-ring);outline-offset:3px
}
/* ---------- the surfaces we did not draw ----------
Text selection, the caret and the form-control chrome all shipped at browser
defaults on 120 of the 122 pages: a Chrome-blue highlight on a cream page and
on a graphite one, and light-mode control internals inside the dark theme.
Added 2026-08-22. Two degree-story stylesheets already themed ::selection,
which is why the site was inconsistent with itself rather than merely plain.
`color-scheme` is the one that actually changes behaviour rather than colour:
it is what tells the UA to render scrollbars, spinners, date pickers and the
default canvas in the dark palette. Without it a graphite page with a form on
it renders white control internals. */
::selection{
background:color-mix(in srgb,var(--terracotta) 26%,transparent);
color:var(--ink);
}
/* `color-scheme:dark` is already declared in the dark token block above; only
the light half was missing, which is why a light page still handed its
scrollbars and control internals to the UA default. The caret and the
checkbox/radio fill read `--focus-ring`, which is the one accent already
tuned for both themes. */
:root{
color-scheme:light;
caret-color:var(--focus-ring);
accent-color:var(--focus-ring);
}
html[data-theme="dark"] ::selection{
background:color-mix(in srgb,var(--terracotta) 34%,transparent);
color:var(--ink);
}
/* Windows High Contrast turns every gradient off, and the hero's "Study" is
painted by one through `-webkit-text-fill-color:transparent` — so the word
vanished entirely rather than falling back. The fill is restored to the
system text colour there; the gradient itself is untouched everywhere else. */
@media (forced-colors:active){
.hero h1 .study-static{
-webkit-text-fill-color:CanvasText;
color:CanvasText;
background:none;
}
}
header.site a:focus-visible,header.site button:focus-visible{outline-color:var(--header-focus-ring)}
.sticky-cta a:focus-visible,footer a:focus-visible{outline-color:#fff}
.tu-ribbon:focus-visible{outline-color:#fff;outline-offset:-3px}
/* ---------- 3 · rails ----------
Full-width layout: standard + wide rails span the viewport (gutter padding
only, no centered cap); prose keeps a 72ch measure so running text stays
readable rather than sprawling edge-to-edge. */
.wrap{width:min(100%,1280px);max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{width:min(100%,1480px);max-width:1480px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap--prose{max-width:72ch;margin-inline:auto;padding-inline:var(--gutter)}
/* asymmetric splits — single column first, split from 760px (see §19) */
.split,.media-row,.two-col,.adm-grid,.article-layout,.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px)}
/* ---------- 4 · type roles ---------- */
.label{font-size:var(--ice-type-label-size);font-weight:600;letter-spacing:var(--ice-type-label-track);line-height:var(--ice-type-label-line);text-transform:uppercase}
.lede{font-size:var(--ice-type-lede-size);line-height:var(--ice-type-lede-line);font-weight:500;color:var(--ink);margin-bottom:var(--ice-space-6)}
.body-copy p{color:var(--slate);font-size:var(--ice-type-body-size);line-height:var(--ice-type-body-line);margin-bottom:var(--ice-space-5)}
.fineprint{margin-top:var(--ice-space-6);font-size:var(--t-meta);color:var(--slate)}
.fineprint a{font-weight:650;color:var(--navy)}
/* ---------- 5 · buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;min-height:var(--ice-cta-min);padding:var(--ice-space-4) var(--ice-space-6);
border:none;cursor:pointer;
font:700 var(--ice-type-button-size)/var(--ice-type-button-line) var(--sans);letter-spacing:var(--ice-type-button-track);text-decoration:none;text-align:center;
border-radius:var(--r-s);
transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease)
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ice-color-action);color:var(--ice-color-on-action);box-shadow:0 10px 24px rgba(196,30,58,.24)}
.btn-primary:hover{background:var(--ice-color-action-hover);color:var(--ice-color-on-action-hover);box-shadow:0 14px 30px rgba(196,30,58,.3)}
.btn-ghost{border:1px solid var(--ice-color-on-canvas);color:var(--ice-color-on-canvas);background:transparent;padding:12px 25px}
.btn-ghost:hover{background:var(--ice-color-surface-brand);color:var(--ice-color-on-surface-brand)}
.hero .btn-ghost,.page-hero .btn-ghost,.cta-banner .btn-ghost,.contact-sec .btn-ghost{
border:2px solid var(--ice-color-on-surface-brand);color:var(--ice-color-on-surface-brand);background:var(--glass)
}
.hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.cta-banner .btn-ghost:hover,.contact-sec .btn-ghost:hover{
background:var(--glass-strong);border-color:var(--ice-color-on-surface-brand);color:var(--ice-color-on-surface-brand)
}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.cta-row .btn{flex:1 1 auto}
@media(min-width:560px){
.cta-row{align-items:center}
.cta-row .btn{flex:0 0 auto}
}
/* Conversion glow — a soft crimson halo plus a breathing ring echo behind
the funnel's key CTAs (Digital Twin promos, twin-page inquiry primaries).
Deliberately scarce: glow everywhere is glow nowhere. Works on .btn and
.ds-button alike; pseudos inherit the host's radius via --glow-r. */
.btn-glow{position:relative;isolation:isolate}
.btn-glow::before,
.btn-glow::after{
content:"";position:absolute;inset:-7px;z-index:-1;
border-radius:var(--glow-r,calc(var(--r-s,4px) + 7px));
pointer-events:none;
}
.btn-glow::before{
background:radial-gradient(62% 120% at 50% 50%,rgba(196,30,58,.5),rgba(196,30,58,0) 72%);
filter:blur(12px);
animation:btn-glow-breathe 2.6s ease-in-out infinite;
}
.btn-glow::after{
border:2px solid rgba(196,30,58,.6);
animation:btn-glow-ring 2.6s ease-out infinite;
}
@keyframes btn-glow-breathe{
0%,100%{opacity:.55;transform:scale(.98)}
50%{opacity:1;transform:scale(1.04)}
}
@keyframes btn-glow-ring{
0%{transform:scale(.92);opacity:0}
18%{opacity:.85}
70%,100%{transform:scale(1.16);opacity:0}
}
@media (prefers-reduced-motion:reduce){
.btn-glow::before{animation:none;opacity:.8}
.btn-glow::after{animation:none;opacity:.35;transform:none}
}
/* ---------- 6 · the drafting field ---------- */
/* Navy blueprint ground: faint drawing grid + two instrument-lamp glows.
The grid is the subject here rather than decoration. This site's documented
direction is "drafting film over the blueprint" (docs/04), which is the same
rationale already recorded in .impeccable/config.json for
ice-programs-cinema.css, and the ruling sits under two instrument-lamp glows
on the navy ground instead of standing in for structure the page lacks. */
/* impeccable-disable-next-line codex-grid-background: drafting surface, see above */
.hero,.page-hero,.stats,.contact-sec{
color:#fff;
background:
radial-gradient(1100px 520px at 82% -12%,rgba(217,112,44,.16),transparent 62%),
radial-gradient(900px 520px at -10% 112%,rgba(196,30,58,.14),transparent 58%),
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
var(--navy-deep);
background-size:auto,auto,44px 44px,44px 44px,auto;
}
/* Phase 6: ICE live pages use clear, flat section fields rather than the
former blueprint grid. Homepage video remains media-led; inner templates
select a measured editorial, title, or photo-split treatment below. */
.page-hero{background:var(--ice-color-surface-brand)}
.contact-sec{background:var(--ice-color-surface-brand)}
/* ---------- 7 · header ----------
Safe default: solid and in normal flow. A page may opt into
`.site-header-overlay` only when its first surface is a real dark or
photographic hero that already reserves `--nav-h`. This makes a new flat
page safe without requiring its author to remember an invisible spacer.
Once the contact row scrolls away, js/site-20260716.js sets .is-scrolled and
the nav row alone condenses to fixed navy chrome — the mobile fixed-chrome
budget drops from the whole stack to the nav row plus identity ribbon. */
header.site{
position:relative;z-index:50;color:var(--header-ink);
background:var(--header-tint-solid);border-bottom:1px solid var(--header-hair)
}
header.site::before{
content:none;position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;pointer-events:none;
background:var(--header-scrim)
}
body.site-header-overlay header.site{
position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:0
}
body.site-header-overlay header.site::before{content:""}
/* 7a · contact utility row — static, nothing auto-scrolls, nothing clips.
Mobile: Call + WhatsApp thumb buttons + "All contacts" disclosure.
Desktop (≥1181): inline priority links + the same disclosure. */
.top-contact{
position:relative;z-index:6;min-height:var(--contact-h);
border-bottom:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))
}
.top-contact__inner{
min-height:var(--contact-h);display:flex;align-items:center;gap:10px;
padding-inline:clamp(14px,3vw,var(--gutter));
max-width:none;margin-inline:auto;
font-size:12px;line-height:1;color:rgba(255,255,255,.85)
}
.top-contact__label{
flex:none;padding-right:10px;border-right:1px solid rgba(255,255,255,.16);
color:var(--terracotta-soft);font-weight:800;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;white-space:nowrap
}
.tc-links{display:none}
.tc-actions{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.tc-btn{
display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 14px;
border:1px solid rgba(255,255,255,.28);border-radius:99px;
color:#fff;text-decoration:none;font-weight:700;font-size:12px;white-space:nowrap;
background:rgba(255,255,255,.08);
transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)
}
.tc-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.tc-btn--wa{border-color:rgba(87,208,127,.5)}
.tc-btn--wa .tc-ico{color:#57d07f;opacity:1}
.tc-ico{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.tc-more{
margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;
min-height:44px;padding:8px 12px;border:0;border-radius:var(--r-s);
background:none;color:rgba(255,255,255,.85);cursor:pointer;
font:700 12px var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap
}
.tc-more:hover{color:#fff;background:rgba(255,255,255,.1)}
.tc-more__long{display:none}
@media(min-width:560px){
.tc-more__long{display:inline}
.tc-more__short{display:none}
}
@media(max-width:399px){
.top-contact__label{display:none}
.top-contact__inner{gap:8px}
}
.tc-more svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:center}
/* full contact sheet — all six official lines, one tap away */
.tc-panel{
position:absolute;top:100%;left:0;right:0;z-index:7;
padding:6px clamp(14px,3vw,var(--gutter)) 14px;
background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.16);
box-shadow:0 24px 48px rgba(4,10,24,.44)
}
.tc-panel[hidden]{display:none}
.tc-panel ul{list-style:none;max-width:none;margin-inline:auto}
.tc-panel a{
display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 4px;
border-bottom:1px solid rgba(255,255,255,.1);
color:#fff;text-decoration:none;font-size:14px
}
.tc-panel li:last-child a{border-bottom:0}.tc-panel a:hover b,.tc-panel a:hover .chrome-val{text-decoration:underline;text-underline-offset:3px}
.tc-panel .tc-ico{width:16px;height:16px}
.tc-panel .tc-role{flex:1;color:rgba(255,255,255,.8);font-size:12.5px;font-weight:600}.tc-panel b,.tc-panel .chrome-val{font-weight:750;letter-spacing:.01em}
/* 7b · nav row */
.nav{
position:relative;display:flex;align-items:center;gap:12px;height:var(--nav-main-h);
padding-inline:clamp(14px,3vw,var(--gutter))
}
/* Condensed chrome once the utility row is gone. The nav and identity ribbon
leave normal flow when they dock, so the header reserves their exact combined
height. Without this spacer an in-flow header collapses by ~130px in one
frame, pulling the whole page upward at the first scroll threshold. */
header.site.is-scrolled,header.site.menu-open{
padding-bottom:calc(var(--nav-main-h) + var(--former-bar-h) + var(--tu-bar-h))
}
header.site.is-scrolled .nav,header.site.menu-open .nav{
position:fixed;top:0;left:0;right:0;z-index:8;
background:var(--header-tint-scrolled-solid);
border-bottom:1px solid var(--header-hair);
box-shadow:0 14px 40px rgba(4,10,24,.35)
}
/* Keep the large fixed surface opaque and filter-free. The former 240ms
transparent-background transition installed an 18px backdrop-filter layer
before its tint had painted, producing a one-frame flash on first scroll. */
/* The identity strip rides with that fixed chrome instead of scrolling away.
The former name is the one thing an IOE arrival needs at any scroll depth —
they are looking for "Janakpur Engineering College" and have to be able to
see, at any point on the page, that they are already on it. It docks
directly under the nav row, so the two read as one header.
z-index sits below the nav's own 8 so the mobile menu panel and the desktop
dropdowns, which live inside .nav, still open over the strip. */
header.site.is-scrolled .id-ribbon,header.site.menu-open .id-ribbon{
position:fixed;top:var(--nav-main-h);left:0;right:0;z-index:7
}
/* Undocked, the TU row is deliberately translucent so the hero reads through
it. Docked, there is page content passing underneath instead, which ghosts
through at .92 and makes the strip unreadable — so it goes fully opaque. */
header.site.is-scrolled .tu-ribbon,header.site.menu-open .tu-ribbon{
background:linear-gradient(180deg,#9e2233,#7c1525)
}
.brand-block{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto;overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;min-width:0;text-decoration:none;color:var(--header-ink)}
.brand img{
width:50px;height:50px;flex:none;
filter:drop-shadow(0 3px 8px rgba(0,0,0,.55))
}.brand b,.brand .chrome-val{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:.02em;line-height:1.05;text-shadow:0 2px 12px rgba(2,8,20,.55)}
.brand b>span,.brand .chrome-val>span{display:block;white-space:nowrap}
.brand small{display:block;margin-top:5px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.9;text-shadow:0 1px 8px rgba(2,8,20,.6)}
@media(min-width:560px){.brand small{font-size:12px;letter-spacing:.1em}}
/* Phone lockup: preserve the full institutional name, then remove the
lower-priority location line before it can wrap into the theme/menu controls.
The location remains available in the TU ribbon, page content and footer. */
@media(max-width:559px){
:root{--nav-main-h:72px}
.nav{gap:8px}
.brand{gap:10px}
.brand img{width:44px;height:44px}.brand b,.brand .chrome-val{font-size:14px;line-height:1.08;letter-spacing:.025em}
.brand small{display:none}
.nav .nav-controls{gap:8px}
}
/* The phone header now also carries .nav-apply-mini, so the brand lockup has
less room than it used to. Tighten type and gaps rather than let
.brand-block's overflow:hidden silently clip "IMPERIAL COLLEGE". */
@media(max-width:439px){
.nav{gap:6px}
.brand{gap:8px}
.brand img{width:40px;height:40px}.brand b,.brand .chrome-val{font-size:12.5px;letter-spacing:.01em}
.nav .nav-controls{gap:6px}
}
/* TU chip rides only in the desktop row; the mobile ribbon carries it below */
.affiliation-mark{display:none}
.nav-controls{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
.menu-btn{
position:relative;display:flex;justify-content:center;align-items:center;flex:none;
width:44px;height:44px;padding:0;
background:var(--header-glass-bg);border:1px solid var(--glass-brd);color:var(--header-ink);
border-radius:var(--r-s);cursor:pointer;
transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)
}
.menu-btn::before{content:"";position:absolute;inset:-2px}
.menu-btn:hover{background:var(--header-glass-bg-strong);border-color:rgba(255,255,255,.5)}
.menu-btn__text{display:none}
.menu-btn__icon{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box}
/* Header disclosures are intentionally immediate. Moving drawers and delayed
close timelines made rapid mobile taps unreliable and added no useful
context; state changes now happen on the same frame as the input. */
.tc-more svg,.menu-btn__icon,.menu-line,.nav-caret svg,nav.links,.nav-dropdown{transition:none!important}
/* 7c · drawer (base: phones/tablets/small laptops) */
nav.links{
display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
max-height:calc(100dvh - var(--nav-main-h));overflow-y:auto;
padding:10px clamp(20px,5vw,40px) 20px;background:var(--navy-deep);border-top:1px solid var(--glass-brd);
box-shadow:0 24px 48px rgba(4,10,24,.44)
}
nav.links.open{display:flex}
nav.links a{padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;font-size:15px;font-weight:650;color:var(--header-ink-soft)}
nav.links a:hover{color:#fff}
/* impeccable-disable-next-line side-tab: mobile nav drawer current-page marker, not a card accent. A left rule on the active item of a VERTICAL nav is the conventional indicator; the rule scopes itself to cards, list items, callouts and alerts. */
nav.links a.active{border-left:3px solid var(--crimson);padding-left:12px;color:#fff}
.nav-item{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)}
.nav-item .nav-link{flex:1;min-width:0;padding:14px 4px;border-bottom:0}
.nav-caret{
flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
background:none;border:0;color:#fff;cursor:pointer
}
.nav-caret svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-fast) var(--ease)}
.nav-item.is-open .nav-caret svg{transform:rotate(180deg)}
.nav-dropdown{display:none;flex-basis:100%;flex-direction:column;gap:0;padding:0 0 10px 14px;border-left:2px solid rgba(255,255,255,.16);margin-left:2px}
.nav-item.is-open .nav-dropdown{display:flex}
.nav-item .nav-dropdown a{padding:12px 10px;border-bottom:0;color:rgba(255,255,255,.76);font-size:14px;font-weight:600}
.nav-item .nav-dropdown a:hover,.nav-item .nav-dropdown a:focus-visible{color:#fff}
/* Divider label inside a dropdown, added 2026-09-03 with the nine answer
categories. It is a and not a heading: the dropdown is a list of links,
and an
here would inject a heading into every page's outline. */
.nav-dropdown__label{margin:8px 0 2px;padding:0 10px;color:rgba(255,255,255,.5);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
nav.links a.nav-cta{border-bottom:0;margin-top:6px;padding:14px 4px;border-radius:var(--r-s);background:var(--crimson);color:var(--accent-ink);text-align:center;font-weight:750}
nav.links a.nav-vacancy{display:flex;align-items:center;gap:9px}
.nav-vacancy__icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
nav.links a.nav-vacancy:hover,nav.links a.nav-vacancy:focus-visible{background:rgba(217,112,44,.14);color:#fff}
/* impeccable-disable-next-line side-tab: same drawer, the vacancy item, same current-page marker. */
nav.links a.nav-vacancy.active{border-left:3px solid var(--terracotta);padding-left:12px;background:rgba(217,112,44,.1)}
/* 7d · theme switch — track-and-thumb, driven by html[data-theme] */
.theme-btn{
position:relative;display:inline-flex;align-items:center;gap:9px;flex:none;
min-height:44px;padding:0;margin:0;border:0;background:none;cursor:pointer;
color:var(--header-ink);font:700 12px var(--sans);letter-spacing:.02em
}
.theme-btn::before{content:"";position:absolute;inset:-9px -3px}
.theme-track{
position:relative;flex:none;width:46px;height:25px;border-radius:99px;
background:linear-gradient(180deg,#8fb2e0,#6f96d2);
border:1px solid rgba(255,255,255,.34);
box-shadow:inset 0 1px 3px rgba(0,0,0,.24);
transition:background var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease)
}
html[data-theme="dark"] .theme-track{
background:linear-gradient(180deg,#141c30,#0a0e1a);
border-color:rgba(255,255,255,.2)
}
.theme-btn:focus-visible .theme-track{outline:3px solid var(--header-focus-ring);outline-offset:3px}
.theme-star{
position:absolute;border-radius:50%;background:#fff;opacity:0;
transition:opacity var(--dur-med) var(--ease) 50ms,transform var(--dur-med) var(--ease) 50ms;
transform:scale(.4)
}
.theme-star--a{width:3px;height:3px;top:6px;left:8px}
.theme-star--b{width:2px;height:2px;top:15px;left:14px}
html[data-theme="dark"] .theme-star{opacity:.9;transform:scale(1)}
.theme-thumb{
position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
display:grid;place-items:center;overflow:hidden;
background:linear-gradient(180deg,#fff8e8,#ffd889);
box-shadow:0 2px 6px rgba(0,0,0,.38);
transition:left var(--dur-med) var(--ease),background var(--dur-med) var(--ease)
}
html[data-theme="dark"] .theme-thumb{left:24px;background:linear-gradient(180deg,#eef1f8,#cbd3e4)}
.theme-icon{position:absolute;width:13px;height:13px;transition:opacity var(--dur-med) var(--ease),transform var(--dur-med) var(--ease)}
.theme-icon--sun{color:#d9702c;opacity:0;transform:rotate(45deg) scale(.55)}
.theme-icon--moon{color:#3d4a63;opacity:1;transform:rotate(0deg) scale(1)}
html[data-theme="dark"] .theme-icon--sun{opacity:1;transform:rotate(0deg) scale(1)}
html[data-theme="dark"] .theme-icon--moon{opacity:0;transform:rotate(-45deg) scale(.55)}
.theme-btn::after{display:none}
/* Footer former-name mark. Same amber token as the header strip so the old
name reads as one consistent signal wherever it appears. */
.footer-former{
display:inline-flex;align-items:center;gap:.4ch;margin-top:10px;
padding:6px 11px;border-radius:99px;text-decoration:none;
font-family:var(--sans);font-size:11.5px;font-weight:700;line-height:1;
color:#3A2306;background:linear-gradient(180deg,#F7C56A,#E9A94A)
}.footer-former strong,.footer-former .chrome-val{font-weight:850}
.footer-former:hover{background:linear-gradient(180deg,#FFD489,#EFB055)}
.footer-former:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* 7e · identity ribbon — the former-name line plus the TU trust line.
IOE's central admission portal lists this college as "Janakpur Engineering
College" and links to our home page, so students arrive looking for a name
the site does not lead with. The old name is therefore chrome, not history:
it rides in the header on every page. Two stacked rows on phones and
tablets; desktop hides this whole strip and uses .brand-former instead. */
.id-ribbon{position:relative;z-index:1;display:flex;flex-direction:column}
.id-ribbon__former{
display:flex;align-items:center;justify-content:center;gap:.4ch;
height:var(--former-bar-h);padding:0 14px;
text-align:center;text-decoration:none;
font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1;
color:#3A2306;background:linear-gradient(180deg,#F7C56A,#E9A94A);
box-shadow:inset 0 -1px 0 rgba(88,52,6,.22)
}
.id-ribbon__former strong,.id-ribbon__former .chrome-val{font-weight:850;letter-spacing:.01em}
.id-ribbon__former:active{background:linear-gradient(180deg,#F0B94F,#DC9A36)}
.id-ribbon__former:focus-visible{outline:2px solid #3A2306;outline-offset:-3px}
@media(max-width:359px){
.id-ribbon__former{font-size:11px;letter-spacing:0}
}
.tu-ribbon{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;gap:.4ch;
height:var(--tu-bar-h);padding:0 16px;text-align:center;text-decoration:none;color:#fff;
font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.02em;
background:linear-gradient(180deg,rgba(158,34,51,.92),rgba(124,21,37,.92));
box-shadow:inset 0 1px 0 rgba(255,255,255,.14)
}.tu-ribbon strong,.tu-ribbon .chrome-val{font-weight:750}
.tu-ribbon:active{background:linear-gradient(180deg,#8d1d2d,#6c111f)}
/* ---------- 8 · heroes ---------- */
/* home hero — the locked concept: campus video, typing headline, status, CTAs */
.hero{position:relative;padding:calc(var(--nav-h) + 40px) 0 30px;overflow:hidden;display:flex;align-items:stretch}
.hero-video{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-video video,.hero-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-video::after{
content:"";position:absolute;inset:0;
background:
radial-gradient(900px 500px at 78% 34%,rgba(70,92,145,.24),transparent 66%),
linear-gradient(180deg,rgba(3,12,28,.72) 0%,rgba(5,17,38,.66) 45%,rgba(3,12,28,.92) 100%),
linear-gradient(90deg,rgba(4,15,34,.48),rgba(8,22,48,.18),rgba(4,13,30,.34))
}
.hero>.wrap--wide{position:relative;z-index:1}
.hero-grid{display:flex;min-height:100%;flex:1;flex-direction:column;align-items:center;justify-content:space-between;gap:40px}
.hero-content{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}
/* The hero's former-name line. Solid rather than the old translucent chip:
this is the first thing a student arriving from IOE's "Janakpur Engineering
College" listing needs to see confirmed, so it reads as a statement, not a
watermark. */
.former{
display:inline-flex;align-items:center;gap:8px;padding:9px 16px;margin-bottom:20px;
font-size:clamp(12px,1.5vw,13.5px);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:#3A2306;background:linear-gradient(180deg,#F7C56A,#E9A94A);
border:0;border-radius:99px;box-shadow:0 6px 20px rgba(2,8,20,.34)
}
.hero h1{margin-bottom:14px;color:#fff;font-size:var(--t-display);line-height:.98;letter-spacing:-.038em;text-wrap:balance;text-shadow:0 12px 34px rgba(1,8,20,.46)}
.study-heading{width:100%;min-height:2.68em}
.study-copy{display:flex;flex-direction:column;align-items:center;gap:.06em}
.study-lead{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05em;min-height:1.62em}
.hero h1 .study-static{
display:block;font-family:var(--display);font-style:italic;font-weight:600;
font-size:.55em;line-height:1;letter-spacing:-.008em;text-transform:none;
background:linear-gradient(96deg,#FDF1E4,#EFB78A 82%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
filter:drop-shadow(0 8px 22px rgba(2,8,20,.32))
}
.study-dynamic{
position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:11.4ch;
font-family:var(--display);font-size:.97em;font-weight:600;font-style:normal;line-height:.94;letter-spacing:-.03em;color:#F3B382
}
.hero h1 .typing-word{color:#F3B382;text-shadow:0 8px 28px rgba(0,0,0,.34)}
.hero h1 .study-engineering{display:block;font-family:var(--display);font-size:1.02em;font-style:normal;font-weight:600;line-height:.9;letter-spacing:-.048em;color:#fff}
.study-dynamic::after{
content:"";position:absolute;left:5%;right:5%;bottom:-8px;height:3px;border-radius:3px;
background:linear-gradient(90deg,transparent,#F3B382 18%,#F3B382 82%,transparent);
transform:scaleX(0);opacity:0;transition:transform .35s var(--ease),opacity .35s var(--ease)
}
.study-dynamic.is-complete::after{transform:scaleX(1);opacity:.85}
.typing-cursor{
width:2px;height:.76em;margin-left:.12em;border-radius:2px;background:#F3B382;
box-shadow:0 0 14px rgba(233,148,90,.72);animation:typing-cursor 1s steps(1,end) infinite
}
@keyframes typing-cursor{0%,48%{opacity:1}49%,100%{opacity:.16}}
.hero-divider{display:flex;align-items:center;justify-content:center;gap:16px;width:min(480px,68vw);margin:2px 0 14px}
.hero-divider i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(233,148,90,.56))}
.hero-divider i:last-child{background:linear-gradient(90deg,rgba(233,148,90,.56),transparent)}
.hero p.sub{max-width:720px;margin-bottom:22px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.88);text-wrap:balance}
.hero .adm-status{
display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;padding:7px 14px;
font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#fff;
background:rgba(196,30,58,.3);border:1px solid rgba(242,201,207,.45);border-radius:99px
}
.hero .adm-status i{width:7px;height:7px;border-radius:50%;background:var(--crimson-soft)}
.hero-content .cta-row{justify-content:center;width:100%}
@media(min-width:560px){.hero-content .cta-row{width:auto}}
/* the fact strip floats over footage — the one legitimate glass surface */
.hero-highlights{
width:100%;display:grid;grid-template-columns:1fr 1fr;
background:linear-gradient(145deg,rgba(20,39,80,.72),rgba(7,17,37,.84));
border:1px solid rgba(255,255,255,.19);border-radius:var(--r-m);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 20px 60px rgba(1,8,20,.36)
}
@supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
.hero-highlights{-webkit-backdrop-filter:blur(18px) saturate(1.18);backdrop-filter:blur(18px) saturate(1.18)}
}
.hero-highlight{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 14px}
.hero-highlight:nth-child(odd){border-right:1px solid rgba(255,255,255,.11)}
.hero-highlight:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.11)}
.hero-highlight__icon{width:42px;height:42px;flex:none;display:grid;place-items:center;border:1px solid rgba(233,148,90,.7);border-radius:50%;color:#F0A56D}
.hero-highlight__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.hero-highlight b{display:block;margin-bottom:2px;font-size:13px;font-weight:700;color:#fff}
.hero-highlight small{display:block;max-width:200px;font-size:12px;line-height:1.4;color:rgba(255,255,255,.86);text-shadow:0 1px 6px rgba(2,8,20,.5)}
/* page hero (inner pages) — one composed field: breadcrumb, display title,
sub, typographic facts; the line-art floats behind as a drafting layer */
.page-hero{position:relative;padding:calc(var(--nav-h) + 44px) 0 52px;overflow:hidden}
.page-hero-grid{position:relative}
.page-hero .crumb{margin-bottom:var(--ice-space-9);font-size:var(--ice-type-caption-size);line-height:var(--ice-type-caption-line);font-weight:500;color:rgba(255,255,255,.72)}
.page-hero .crumb a{color:inherit;text-decoration:none}
.page-hero .crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:var(--ice-space-1)}
.page-hero h1{max-width:22ch;margin-bottom:var(--ice-space-4);color:#fff;font-size:var(--ice-type-h1-size);line-height:var(--ice-type-h1-line);letter-spacing:var(--ice-type-h1-track);font-weight:400;text-wrap:balance}
.page-hero h1 .h1-code{color:var(--terracotta-soft);white-space:nowrap}
.page-hero p.sub{max-width:58ch;font-size:var(--ice-type-lede-size);line-height:var(--ice-type-lede-line);font-weight:500;color:rgba(255,255,255,.78)}
.page-hero .cta-row{margin-top:calc(var(--u)*4)}
/* facts — typographic ledger, no boxes */
.page-hero .facts{display:flex;gap:0;margin-top:30px;flex-wrap:wrap}
.page-hero .facts div{
min-width:104px;padding:2px 22px 2px 14px;margin-bottom:10px;
border-left:2px solid rgba(233,148,90,.55)
}
.page-hero .facts div b{display:block;font-family:var(--display);font-size:var(--ice-type-stat-size);font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#fff}
.page-hero .facts div span{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.72)}
/* line-art: a drafting layer behind the content, not a competing column */
.lineart{position:absolute;right:calc(-1*var(--gutter)/2);bottom:-6%;z-index:0;width:min(430px,52vw);opacity:.3;pointer-events:none}
.page-hero .crumb,.page-hero h1,.page-hero p.sub,.page-hero .cta-row,.page-hero .facts{position:relative;z-index:1}
.lineart svg{display:block;width:100%;height:auto}
.lineart .st{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lineart .st.acc{stroke:var(--terracotta-soft)}
.lineart .st.thin{stroke-width:1.1;opacity:.5}
.lineart .st.dash{stroke-dasharray:5 6;opacity:.45}
.lineart text{fill:rgba(255,255,255,.55)}
.page-hero .lineart{display:none}
/* Compact title template: Contact, policy, guides and utility pages mirror
ICE solid-blue title fields and put photography in the content bands. */
.page-contact .page-hero,
.page-admissions .page-hero,
.page-fees .page-hero,
.page-guide .page-hero{background:var(--ice-color-surface-brand)}
/* About is an editorial exception: a high-impact statement, with
documentary photography deliberately deferred to the narrative below. */
.page-about .page-hero{display:flex;min-height:min(80vh,820px);align-items:center;background:var(--ice-color-surface-muted);color:var(--ice-color-on-surface-muted)}
.page-about .page-hero .crumb{color:var(--ice-color-text-muted)}
.page-about .page-hero .crumb a:hover{color:var(--ice-color-on-surface-muted)}
.page-about .page-hero h1{max-width:16ch;color:var(--ice-color-on-surface-muted);font-size:clamp(3.5rem,8.6vw,8.4rem);line-height:.9;letter-spacing:-.05em}
.page-about .page-hero p.sub{max-width:58ch;color:var(--ice-color-on-surface-muted)}
.page-about .page-hero .btn-ghost{border-color:var(--ice-color-on-surface-muted);color:var(--ice-color-on-surface-muted);background:transparent}
.page-about .page-hero .btn-ghost:hover{border-color:var(--ice-color-surface-brand);background:var(--ice-color-surface-brand);color:var(--ice-color-on-surface-brand)}
.page-about .page-hero-grid::after{color:rgba(14,22,71,.48)}
/* Photo-split title template for high-intent pages with honest ICE imagery. */
.page-hero-grid:has(.editorial-hero-media){display:grid;gap:var(--ice-space-8);align-items:end}
.editorial-hero-media{position:relative;margin:0;overflow:hidden;background:var(--ice-color-surface-brand)}
.editorial-hero-media picture,.editorial-hero-media img{display:block;width:100%;height:100%}
.editorial-hero-media img{aspect-ratio:4/3;object-fit:cover}
.editorial-hero-media figcaption{padding:var(--ice-space-3) 0 0;color:rgba(255,255,255,.76);font-size:12.5px;line-height:1.45}
/* Reusable ICE editorial imagery: sticky lead photograph and story cards. */
.editorial-lead{display:grid;gap:var(--ice-space-8);align-items:start}
.editorial-lead__media{margin:0}
.editorial-lead__media img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.editorial-lead__media figcaption{padding-top:var(--ice-space-3);font-size:12.5px;line-height:1.5;color:var(--slate)}
.editorial-story-grid{display:grid;grid-template-columns:1fr;gap:var(--ice-space-5)}
.editorial-story{display:flex;flex-direction:column;background:var(--card);border-top:2px solid var(--navy);text-decoration:none}
.editorial-story img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover}
.editorial-story__body{display:flex;flex-direction:column;flex:1;padding:var(--ice-space-5) 0}
.editorial-story .label{margin-bottom:var(--ice-space-2);color:var(--ice-color-text-accent)}
.editorial-story h3{margin-bottom:var(--ice-space-2);font-size:var(--ice-type-h4-size);line-height:var(--ice-type-h4-line)}
.editorial-story p{color:var(--slate);font-size:14.5px;line-height:1.6}
.editorial-story .go{margin-top:auto;padding-top:var(--ice-space-4);color:var(--ice-color-text-action);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
/* Admissions lower-page retrofit: the hero already follows ICE's campaign
field; these bands bring the decision journey into the same editorial
language instead of falling back to the former boxed ICE dashboard. */
.page-admissions #how{background:var(--bg)}
.page-admissions #how .adm-grid{align-items:start}
.page-admissions #how .steps{border-top:2px solid var(--navy)}
.page-admissions #how .steps li{background:transparent;border-bottom:1px solid var(--hairline);border-radius:0;padding:var(--ice-space-5) 0}
.page-admissions #how .steps li::before{border-radius:0;background:var(--ice-color-surface-brand);color:var(--ice-color-on-surface-brand)}
.page-admissions #how .steps li:last-child{border-bottom:0}
.page-admissions #how .scholar{margin-top:var(--ice-space-5);padding:var(--ice-space-5) 0 var(--ice-space-5) var(--ice-space-5);border-top:2px solid var(--navy);border-left:var(--ice-rule-width-active) solid var(--crimson);border-radius:0;background:transparent;color:var(--ink)}
.page-admissions #how .scholar h3,.page-admissions #how .scholar p,.page-admissions #how .scholar a{color:inherit}
.page-admissions #how .elig{padding:0 0 0 var(--ice-space-6);border-top:2px solid var(--navy)}
.page-admissions #how .elig>div{border-bottom:1px solid var(--hairline)}
.page-admissions #how .inquiry-form{margin-top:var(--ice-space-6);padding:var(--ice-space-5) 0 0;border-top:2px solid var(--navy);border-radius:0;background:transparent;box-shadow:none}
.page-admissions #programs{background:var(--ice-color-surface-muted)}
.page-admissions #programs .prog{border:0;border-top:2px solid var(--navy);border-radius:0;background:var(--card);box-shadow:none}
.page-admissions #programs .prog:hover{transform:none;border-top-color:var(--crimson);box-shadow:none}
.page-admissions #programs .prog-photo{border-radius:0;border-bottom:0}
.page-admissions #programs .prog-body{padding:var(--ice-space-5) var(--ice-space-5) var(--ice-space-6)}
.page-admissions #programs .video-frame{margin-top:var(--ice-space-8);border-radius:0;box-shadow:none}
.page-admissions #faq{background:var(--bg)}
.page-admissions #faq .faq{max-width:900px;border-top:2px solid var(--navy)}
@media(min-width:760px){
.page-admissions #how .adm-grid>div:nth-child(2){padding-left:var(--ice-space-6)}
.page-admissions #programs .prog-grid{align-items:start}
.page-admissions #programs .prog:nth-child(2){margin-top:var(--ice-space-5)}
.page-admissions #programs .prog:nth-child(3){margin-top:var(--ice-space-10)}
}
@media(min-width:760px){
.page-hero-grid:has(.editorial-hero-media){grid-template-columns:minmax(0,7fr) minmax(300px,5fr);gap:clamp(40px,6vw,90px)}
.editorial-hero-media{align-self:stretch;margin-bottom:calc(var(--ice-space-16) * -1)}
.editorial-hero-media img{min-height:430px}
.editorial-lead{grid-template-columns:minmax(280px,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)}
.editorial-lead__media{position:sticky;top:calc(var(--nav-main-h) + var(--ice-space-6))}
.editorial-story-grid{grid-template-columns:repeat(2,1fr);gap:var(--ice-space-8)}
}
@media(min-width:1024px){.editorial-story-grid{grid-template-columns:repeat(3,1fr)}}
/* drafting title-block tag, bottom-right of every inner hero */
.page-courses{--hero-label:"PROGRAMS / 01"}
.page-admissions{--hero-label:"ADMISSIONS / 02"}
.page-careers{--hero-label:"CAREERS / 03"}
.page-civil{--hero-label:"CIVIL / BCE"}
.page-computer{--hero-label:"COMPUTER / BCT"}
.page-electronics{--hero-label:"ELECTRONICS / BEI"}
.page-tu{--hero-label:"AFFILIATION / TU"}
.page-fees{--hero-label:"FEES / SCHOLARSHIPS"}
.page-guide{--hero-label:"GUIDE / IOE 2083"}
.page-blog{--hero-label:"RESOURCES / STUDENTS"}
.page-about{--hero-label:"ABOUT / ICE + JEC"}
.page-location{--hero-label:"CAMPUS / TATHALI"}
.page-contact{--hero-label:"CONTACT / BHAKTAPUR"}
.page-not-found{--hero-label:"404 / FIND YOUR WAY"}
.page-hero-grid::after{
content:var(--hero-label,"ICE");position:absolute;right:0;bottom:-30px;
font:750 12px var(--sans);letter-spacing:.2em;color:rgba(255,255,255,.38)
}
/* ---------- 8.5 · merit-list flash band ----------
The headline admissions event for the fortnight the first list is live.
Navy field + terracotta flag — the /merit-list "you have a seat" language.
Closing ranks are a data readout, not decoration: the number no other
college publishes, read from src/data/merit-list.js so it cannot drift. */
.merit-flash{
--mf-from:var(--ice-palette-navy-800,#13234b);
--mf-to:var(--ice-palette-navy-900,#0c1a38);
--mf-accent:var(--ice-palette-terracotta-400,#e8915a);
--mf-hair:rgba(255,255,255,.16);
position:relative;z-index:2;width:100%;color:#fff;
background-image:
radial-gradient(720px 220px at 88% -20%,rgba(217,112,44,.18),transparent 62%),
linear-gradient(155deg,var(--mf-from),var(--mf-to));
border-top:1px solid var(--mf-hair);
border-bottom:1px solid rgba(0,0,0,.2);
padding-block:clamp(28px,4.5vw,52px);
}
.merit-flash__inner{
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
gap:clamp(24px,4vw,56px);
}
.merit-flash__lead{max-width:56ch}
.merit-flash__lead h2{
margin:0 0 10px;color:#fff;font-weight:700;letter-spacing:-.02em;line-height:1.1;
font-size:clamp(1.5rem,1.05rem + 2vw,2.3rem);text-wrap:balance;
}
.merit-flash__body{
margin:0 0 16px;font-size:clamp(.95rem,.9rem + .2vw,1.05rem);line-height:1.55;
color:rgba(255,255,255,.86);
}
.merit-flash__window{
display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;
padding:7px 14px;border-radius:999px;font-size:.9rem;font-weight:600;color:#fff;
background:rgba(255,255,255,.08);border:1px solid var(--mf-hair);
}
.merit-flash__dot{
width:8px;height:8px;border-radius:50%;flex:none;
background:var(--ice-palette-terracotta-500,#e07a34);
box-shadow:0 0 0 4px rgba(217,112,44,.22);
}
.merit-flash__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.merit-flash__secondary{
border-color:rgba(255,255,255,.5);color:#fff;background:transparent
}
.merit-flash__secondary:hover{
border-color:rgba(255,255,255,.72);color:#fff;background:rgba(255,255,255,.1)
}
.merit-flash__ranks{
display:flex;margin:0;padding:0;border:1px solid var(--mf-hair);border-radius:12px;
background:rgba(255,255,255,.05);overflow:hidden;
}
.merit-flash__rank{padding:16px clamp(16px,2vw,26px);border-left:1px solid var(--mf-hair);text-align:center}
.merit-flash__rank:first-child{border-left:0}
.merit-flash__rank dt{
margin:0 0 4px;font-size:.72rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--mf-accent);
}
.merit-flash__rank dd{margin:0;display:flex;flex-direction:column;line-height:1}
.merit-flash__rank-n{
font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);font-weight:700;
font-variant-numeric:tabular-nums;color:#fff;
}
.merit-flash__rank-lbl{margin-top:5px;font-size:.68rem;letter-spacing:.03em;color:rgba(255,255,255,.62)}
@media (max-width:820px){
.merit-flash__inner{grid-template-columns:1fr;gap:24px}
.merit-flash__ranks{width:100%}
.merit-flash__rank{flex:1}
}
@media (max-width:400px){
.merit-flash__rank{padding-inline:10px}
.merit-flash__rank-n{font-size:1.5rem}
}
html[data-theme="dark"] .merit-flash{
--mf-from:var(--ice-palette-graphite-800,#313338);
--mf-to:var(--ice-palette-graphite-950,#1e1f22);
--mf-accent:var(--ice-palette-terracotta-300,#f0a97a);
border-bottom-color:rgba(0,0,0,.4);
}
/* ---------- 9 · announcement ticker (infinite marquee) ----------
A continuous scroll ticker: items flow left endlessly. JS duplicates the
track for a seamless loop, and marks the panel with .ticker-ready once
the duplicate is in place. Pauses on hover/focus/reduced-motion. */
.news-panel{
position:relative;z-index:2;width:100%;overflow:hidden;
background:
radial-gradient(600px 160px at 8% 50%,rgba(29,76,242,.13),transparent 60%),
radial-gradient(400px 120px at 92% 50%,rgba(217,112,44,.11),transparent 60%),
linear-gradient(90deg,var(--navy-ink) 0%,var(--navy-deep) 30%,var(--navy-deep) 70%,var(--navy-ink) 100%);
/* Accent top rule: crimson → terracotta shimmer */
border-top:2px solid transparent;
border-bottom:1px solid rgba(255,255,255,.1);
/* layered background-image trick: gradient on top of bg-color for the top border */
background-clip:padding-box;
}
/* Glowing top-border using ::before so border-radius works cleanly */
.news-panel::before{
content:"";
position:absolute;inset:0 0 auto;height:2px;
background:linear-gradient(90deg,var(--crimson),var(--crimson-soft) 55%,transparent 100%); /* §02: one accent per composition */
z-index:3;
animation:ticker-shimmer 4s linear infinite;
background-size:200% 100%;
}
@keyframes ticker-shimmer{
0%{background-position:100% 0}
100%{background-position:-100% 0}
}
.news-panel__inner{
display:flex;align-items:center;min-height:56px;
max-width:none;margin-inline:0;padding:0;
/* badge is sticky-left, track scrolls right of it */
}
/* ── LIVE badge ─────────────────────────────────────────────────────── */
.news-panel__badge{
flex:none;
position:relative;z-index:2;
display:inline-flex;align-items:center;gap:8px;
padding:7px 16px 7px 12px;
background:var(--crimson);
color:var(--accent-ink);
font-size:11px;font-weight:850;letter-spacing:.18em;text-transform:uppercase;
/* right-side fade into the ticker track */
clip-path:none;
box-shadow:4px 0 24px 4px rgba(29,76,242,.35);
white-space:nowrap;
}
.news-panel__badge i{
position:relative;
width:7px;height:7px;border-radius:50%;
background:#fff;
flex:none;
}
/* Ripple ring around the live dot */
.news-panel__badge i::after{
content:"";
position:absolute;
inset:-4px;
border-radius:50%;
border:1px solid rgba(255,255,255,.65);
animation:live-ripple 2s ease-out infinite;
}
@keyframes live-ripple{
0% {transform:scale(1); opacity:.9}
100%{transform:scale(2.6);opacity:0}
}
/* ── Scrolling track ──────────────────────────────────────────────── */
.news-rail{
flex:1 1 0%;min-width:0;
display:flex;align-items:center;
overflow:hidden;
/* slight left gradient fade out of the badge */
mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 94%,transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 94%,transparent 100%);
}
/* The inner list of items — duplicated by JS for infinite loop */
.news-rail__track{
display:flex;align-items:center;gap:0;
white-space:nowrap;
/* animation is added by JS once duplicate is ready */
}
.news-panel.ticker-ready .news-rail__track{
animation:ticker-scroll 38s linear infinite;
}
.news-panel:hover .news-rail__track,
.news-panel:focus-within .news-rail__track{
animation-play-state:paused;
}
@keyframes ticker-scroll{
0% {transform:translateX(0)}
100% {transform:translateX(-50%)}
}
/* ── Individual ticker item ────────────────────────────────────────── */
.news-item{
display:inline-flex;align-items:center;gap:10px;
padding:10px 28px 10px 20px;
border-right:1px solid rgba(255,255,255,.08);
color:#fff;text-decoration:none;
flex:none;
transition:background var(--dur-fast) var(--ease);
position:relative;
}
.news-item:hover{
background:rgba(255,255,255,.06);
}
/* chip badges */
.news-item .ticker-chip{
flex:none;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px 4px 8px;
border-radius:99px;
color:#fff;
font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
white-space:nowrap;
}
.ticker-chip--vacancy{background:var(--crimson);box-shadow:0 0 10px rgba(29,76,242,.4)}
.ticker-chip--admission{background:var(--terracotta);box-shadow:0 0 10px rgba(217,112,44,.35)}
.ticker-chip--notice{
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.22);
color:rgba(255,255,255,.9);
}
html[data-theme="dark"] .ticker-chip--vacancy,
html[data-theme="dark"] .ticker-chip--admission{color:var(--accent-ink)}
/* Dark-mode action labels stay warm-white across every primary button,
including the fixed mobile action bar. */
html[data-theme="dark"] :is(.btn-primary,.sticky-cta .btn,.nav-cta,.apply-mini){
color:#FFF8F0!important;
}
/* dot indicator inside chip */
.ticker-chip::before{
content:"";
width:5px;height:5px;border-radius:50%;
background:rgba(255,255,255,.75);
flex:none;
display:inline-block;
}
.ticker-chip--notice::before{background:rgba(255,255,255,.5)}
/* item text */
.news-item .ticker-text{
font-family:var(--sans);
font-size:13.5px;
font-weight:500;
line-height:1.35;
color:rgba(255,255,255,.82);
white-space:nowrap;
max-width:480px;
overflow:hidden;
text-overflow:ellipsis;
}
.news-item:hover .ticker-text{
color:#fff;
}
/* arrow indicator on hover */
.news-item::after{
content:"→";
position:absolute;right:10px;
font-size:11px;
color:var(--terracotta-soft);
opacity:0;
transform:translateX(-4px);
transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
pointer-events:none;
}
.news-item:hover::after{
opacity:1;
transform:translateX(0);
}
/* Hide old prev/next controls — no longer needed with infinite scroll */
.news-controls{display:none}
.news-count{display:none}
/* Reduced motion: freeze the track, show items statically stacked */
@media(prefers-reduced-motion:reduce){
.news-panel.ticker-ready .news-rail__track{animation:none}
.news-panel::before{animation:none}
.news-panel__badge i::after{animation:none}
.news-rail{
overflow-x:auto;scrollbar-width:none;
mask-image:none;-webkit-mask-image:none;
}
}
/* ---------- 10 · quick admission bar ---------- */
.quickbar{background:var(--card);border-bottom:1px solid var(--hairline)}
.quickbar .wrap--wide{display:grid;grid-template-columns:1fr 1fr;padding-inline:0;max-width:none}
.quickbar a{
display:flex;flex-direction:column;gap:2px;min-width:0;
padding:14px 16px;text-decoration:none;
border-bottom:1px solid var(--hairline);
transition:background var(--dur-fast) var(--ease)
}
.quickbar a:nth-child(odd){border-right:1px solid var(--hairline)}
.quickbar a:hover{background:var(--bg)}
.quickbar b{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.3}
.quickbar span{font-size:12.5px;color:var(--slate);line-height:1.4}
/* ---------- 11 · admission inquiry welcome ---------- */
/* ---------- 12 · fact strips (typographic stats — no boxes) ---------- */
.stats{padding:40px 0 48px}
.stats .wrap,.stats .wrap--wide{display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}
.stat{padding:4px 16px 4px 16px;border-left:2px solid rgba(233,148,90,.55)}
.stat b{display:block;font-family:var(--display);font-size:var(--ice-type-stat-size);font-weight:600;letter-spacing:-.03em;line-height:1.05;color:#fff}
.stat span{display:block;max-width:220px;margin-top:5px;font-size:12.5px;font-weight:600;line-height:1.45;color:rgba(255,255,255,.76)}
/* paper equivalent under article heroes */
.trust-strip{display:grid;grid-template-columns:1fr;gap:var(--ice-space-4);margin-top:calc(var(--ice-space-5) * -1);position:relative;z-index:2;padding:var(--ice-space-5) var(--ice-space-0) var(--ice-space-0)}
.trust-strip>div{padding:var(--ice-space-1) var(--ice-space-0) var(--ice-space-1) var(--ice-space-4);border-left:var(--ice-rule-width-active) solid var(--terracotta)}
.trust-strip b{display:block;font-family:var(--display);font-size:19px;color:var(--navy)}
.trust-strip span{display:block;margin-top:var(--ice-space-1);font-size:13px;line-height:1.5;color:var(--slate)}
/* ---------- 13 · sections + statement ---------- */
section{padding:var(--sec) 0}
.band{background:var(--band-bg)}
.band + .band,.band + #admissions{border-top:1px solid var(--hairline)}
.sec-head{max-width:760px;margin-bottom:28px}
.sec-head .label{margin-bottom:10px;color:var(--ice-color-text-accent)}
.sec-head h2{margin-bottom:var(--ice-space-3);font-size:var(--ice-type-h2-size);line-height:var(--ice-type-h2-line);letter-spacing:var(--ice-type-h2-track);font-weight:500;text-wrap:balance}
.sec-head p{max-width:var(--ice-measure-lede);color:var(--slate);font-size:var(--ice-type-body-size);line-height:var(--ice-type-body-line)}
.sec-head h2::after{
content:"";display:block;margin-top:12px;height:2px;width:56px;background:var(--terracotta);
transform-origin:left;transform:scaleX(1)
}
/* feature bands carry more weight */
#admissions,#scholarships,#choose-college{padding:var(--sec-lg) 0;background:var(--band-bg)}
/* scroll-sweep statement — editorial full-width moment */
.statement{position:relative;padding:var(--sec) 0 calc(var(--sec) * .7)}
.statement::after{
content:"";position:absolute;left:50%;bottom:0;width:min(1460px,calc(100% - 40px));height:1px;
transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--hairline) 14%,var(--hairline) 86%,transparent)
}
.statement+#about{padding-top:calc(var(--sec) * .75)}
.statement .label{margin-bottom:16px;color:var(--ice-color-text-accent)}
.statement-text{
max-width:24ch;
font-family:var(--display);font-weight:600;
font-size:clamp(1.5rem,1rem + 2.9vw,2.875rem);
line-height:1.18;letter-spacing:-.02em;
color:var(--navy)
}
/* ---------- 14 · cards + media ---------- */
/* program cards — photo-led, quiet chrome */
.prog-grid{display:grid;grid-template-columns:1fr;gap:var(--ice-space-5)}
.prog{
position:relative;display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
background:var(--card);border:var(--ice-rule-width) solid var(--hairline);border-radius:var(--r-m);
box-shadow:var(--surface-shadow);
transition:transform var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease)
}
.prog:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 22px 44px rgba(19,35,75,.12)}
.prog-photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:var(--ice-rule-width) solid var(--hairline)}
.prog-body{display:flex;flex-direction:column;flex:1;padding:var(--ice-space-5) var(--ice-space-6)}
.prog .code{font-size:12px;font-weight:750;letter-spacing:.18em;color:var(--ice-color-text-accent);margin-bottom:var(--ice-space-3);text-transform:uppercase}
.prog h3{font-size:22px;line-height:1.14;margin-bottom:var(--ice-space-2)}
.prog p{color:var(--slate);font-size:14px;line-height:1.6;flex:1}
.prog .meta{display:flex;justify-content:space-between;gap:var(--ice-space-3);margin-top:var(--ice-space-4);padding-top:var(--ice-space-4);border-top:var(--ice-rule-width) solid var(--hairline)}
.prog .meta div b{display:block;font-family:var(--display);font-size:19px;font-weight:600;color:var(--navy)}
.prog .meta div span{font-size:12px;color:var(--slate);font-weight:600}
.prog .go{margin-top:14px;font-size:12px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--ice-color-text-action)}
.prog:hover .go{text-decoration:underline;text-underline-offset:4px}
/* program index — numbered editorial rows (courses page) */
.prog-index{display:grid;gap:0;border-top:2px solid var(--navy)}
.prog-row{
display:grid;grid-template-columns:1fr;gap:18px;
padding:26px 0;border-bottom:1px solid var(--hairline);text-decoration:none;
transition:background var(--dur-fast) var(--ease)
}
.prog-row:hover{background:var(--surface-tint)}
.prog-row__media{margin:0;overflow:hidden;border-radius:var(--r-s)}
.prog-row__media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform var(--dur-med) var(--ease)}
.prog-row:hover .prog-row__media img{transform:scale(1.02)}
.prog-row__body{position:relative;min-width:0}
.prog-row__index{
font-family:var(--display);font-size:var(--ice-type-stat-size);font-weight:600;line-height:1;
color:var(--ice-color-text-muted);opacity:1;margin-bottom:8px
}
.prog-row .code{font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-color-text-accent);margin-bottom:8px}
.prog-row h3{font-size:var(--ice-type-h3-size);line-height:var(--ice-type-h3-line);margin-bottom:8px}
.prog-row>.prog-row__body>p:not(.code):not(.go):not(.prog-row__index){color:var(--slate);font-size:14.5px;line-height:1.65;max-width:56ch}
.prog-row__meta{display:flex;gap:28px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);max-width:420px}
.prog-row__meta div b{display:block;font-family:var(--display);font-size:20px;font-weight:600;color:var(--navy)}
.prog-row__meta div span{font-size:12px;color:var(--slate);font-weight:600}
.prog-row .go{margin-top:14px;font-size:12px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--ice-color-text-action)}
.prog-row:hover .go{text-decoration:underline;text-underline-offset:4px}
@media(min-width:760px){
.prog-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center;padding:34px 0}
.prog-row:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.prog-row:nth-child(even) .prog-row__media{order:2}
.prog-row__index{position:absolute;right:0;top:0;margin:0}
.prog-row .code,.prog-row h3{padding-right:76px}
}
/* generic link/content cards (guides, 404 destinations) */
.seo-grid{display:grid;grid-template-columns:1fr;gap:var(--ice-space-4)}
.seo-card{
display:flex;flex-direction:column;min-height:100%;padding:var(--ice-space-6);background:var(--card);
border:var(--ice-rule-width) solid var(--hairline);border-radius:var(--r-m);
box-shadow:var(--surface-shadow)
}
a.seo-card{text-decoration:none;transition:transform var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),box-shadow var(--dur-med) var(--ease)}
a.seo-card:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 22px 46px rgba(19,35,75,.13)}
.seo-card .label{display:none}
.seo-card h3{margin-bottom:var(--ice-space-2);font-size:var(--ice-type-h3-size);line-height:var(--ice-type-h3-line)}
.seo-card p{font-size:14.5px;line-height:1.65;color:var(--slate)}
.seo-card .go{margin-top:auto;padding-top:var(--ice-space-5);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ice-color-text-action)}
/* guide index: the two highest-intent guides lead as a featured pair */
@media(min-width:760px){
.seo-grid.seo-grid--feature{grid-template-columns:repeat(6,1fr)}
.seo-grid.seo-grid--feature .seo-card{grid-column:span 2}
.seo-grid.seo-grid--feature .seo-card:nth-child(-n+2){grid-column:span 3;padding:var(--ice-space-8)}
.seo-grid.seo-grid--feature .seo-card:nth-child(-n+2) h3{font-size:var(--ice-type-h3-size);line-height:var(--ice-type-h3-line)}
.seo-grid.seo-grid--feature .seo-card:nth-child(-n+2) .label{display:block;margin-bottom:10px;color:var(--ice-color-text-accent)}
}
/* editorial split with photograph */
.media-row{align-items:center}
.media-row .sec-head{margin-bottom:0}
.media-row .sec-head p{margin-bottom:14px}
.media-row .sec-head p:last-of-type{margin-bottom:0}
.media-row figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r-m);border:1px solid var(--hairline);box-shadow:0 18px 44px rgba(4,10,24,.14)}
.media-row figure img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:16/11}
.media-row figcaption{
position:absolute;left:0;right:0;bottom:0;padding:26px 18px 12px;
font-size:12.5px;color:rgba(255,255,255,.88);
background:linear-gradient(180deg,transparent,rgba(4,10,24,.72))
}
.media-row figure{order:-1}
.about-card{padding:30px 0 0;border-top:2px solid var(--navy)}
.about-card .label{color:var(--ice-color-text-accent);margin-bottom:14px}
.about-card h3{max-width:430px;margin-bottom:14px;font-size:26px;line-height:1.16}
.about-card p{color:var(--slate);font-size:15.5px;line-height:1.75}
/* framed video figure */
.video-frame{
position:relative;margin:0;overflow:hidden;
border-radius:var(--r-m);background:var(--navy-ink);
border:var(--ice-rule-width) solid var(--hairline);
box-shadow:0 24px 60px rgba(4,10,24,.16)
}
.video-frame video,.video-frame img{display:block;width:100%;height:auto}
.video-frame figcaption{
display:flex;flex-wrap:wrap;gap:var(--ice-space-2) var(--ice-space-3);align-items:baseline;
padding:var(--ice-space-3) var(--ice-space-4);background:var(--card);border-top:var(--ice-rule-width) solid var(--hairline);
font-size:13px;line-height:1.5;color:var(--slate)
}
.video-frame figcaption b{
font-family:var(--sans);font-size:12px;font-weight:750;
letter-spacing:.14em;text-transform:uppercase;color:var(--ice-color-text-accent)
}
.about-media{margin-top:var(--ice-space-7)}
.labs-media,.adm-media{margin-top:var(--ice-space-9)}
.tour-frame{margin-top:var(--ice-space-2)}
/* ---------- 15 · ledgers (hairline rows under a navy rule) ---------- */
/* notices */
.notice-list{list-style:none;border-top:var(--ice-rule-width-active) solid var(--navy)}
.notice-list li{border-bottom:var(--ice-rule-width) solid var(--hairline)}
/* The hover nudge is a transform, not a padding change. Animating `padding`
relayouts the whole notice list on every mouse-over; a translate runs on the
compositor and looks identical, because this row has no background of its own
for the shift to drag with it. */
.notice-list a{display:block;padding:15px 2px;text-decoration:none;transition:transform var(--dur-fast) var(--ease)}
.notice-list a:hover{transform:translateX(var(--ice-space-3))}
.notice-list .date{display:block;width:auto;margin-bottom:var(--ice-space-2);font-size:12.5px;font-weight:650;color:var(--ice-color-text-accent);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.notice-list b{font-family:var(--display);font-size:17px;font-weight:600;color:var(--navy)}
.notice-list p{margin-top:2px;font-size:13.5px;color:var(--slate)}
/* facilities */
.fac-grid{display:grid;grid-template-columns:1fr;gap:0}
.fac{display:flex;gap:var(--ice-space-4);align-items:flex-start;padding:17px var(--ice-space-0);border-top:var(--ice-rule-width) solid var(--hairline)}
.fac svg{flex:none;width:var(--ice-space-6);height:var(--ice-space-6);stroke:var(--terracotta);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:var(--ice-space-1)}
.fac b{display:block;font-family:var(--display);font-size:18px;font-weight:600;color:var(--navy)}
.fac span{display:block;margin-top:2px;font-size:13.5px;line-height:1.5;color:var(--slate)}
/* highlights list (program strengths) */
.highlights{list-style:none;padding:var(--ice-space-2) var(--ice-space-0);border-top:var(--ice-rule-width-active) solid var(--navy)}
.highlights li{display:flex;flex-wrap:wrap;gap:var(--ice-space-2) var(--ice-space-3);padding:var(--ice-space-3) 2px;border-bottom:var(--ice-rule-width) solid var(--hairline);font-size:14.5px;line-height:1.55;color:var(--slate)}
.highlights li:last-child{border-bottom:none}
.highlights li b{color:var(--navy);font-weight:700}
.highlights li::before{content:"—";color:var(--ice-color-text-accent);font-weight:700;flex:none}
/* admission steps */
.steps{counter-reset:step;list-style:none}
.steps li{counter-increment:step;display:flex;gap:var(--ice-space-5);padding:var(--ice-space-6) var(--ice-space-0);border-bottom:var(--ice-rule-width) solid var(--hairline)}
.steps li:last-child{border-bottom:none}
.steps li::before{
content:counter(step);flex:none;width:38px;height:38px;margin-top:2px;border-radius:var(--r-s);
display:flex;align-items:center;justify-content:center;
background:var(--navy-deep);color:#fff;font:600 18px var(--display)
}
html[data-theme="dark"] .steps li::before{background:var(--navy);color:var(--navy-ink)}
.steps b{color:var(--navy)}
.steps p{color:var(--slate);font-size:14.5px}
.steps a{color:var(--navy);font-weight:650}
/* eligibility panel */
.elig{background:var(--card);border:var(--ice-rule-width) solid var(--hairline);border-radius:var(--r-m);padding:var(--ice-space-6) var(--ice-space-6);box-shadow:var(--surface-shadow)}
.elig h3{font-size:20px;margin-bottom:var(--ice-space-4)}
.elig ul+h3{margin-top:var(--ice-space-7)}
.elig ul{list-style:none}
.elig li{padding:var(--ice-space-3) var(--ice-space-0) var(--ice-space-3) var(--ice-space-7);border-bottom:var(--ice-rule-width) solid var(--hairline);font-size:14.5px;color:var(--slate);position:relative}
.elig li:last-child{border-bottom:none}
.elig li::before{content:"";position:absolute;left:2px;top:var(--ice-space-5);width:var(--ice-space-3);height:var(--ice-space-2);border-left:var(--ice-rule-width-active) solid var(--terracotta);border-bottom:var(--ice-rule-width-active) solid var(--terracotta);transform:rotate(-45deg)}
/* semester curriculum — column ledgers, not boxed cards */
.sem-grid{display:grid;grid-template-columns:1fr;gap:26px}
.sem{padding:0 0 6px;border-top:2px solid var(--navy)}
.sem .yr{display:block;margin-top:12px;font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--ice-color-text-accent)}
.sem h3{font-size:19px;margin:5px 0 8px}
.sem ul{list-style:none}
.sem li{font-size:13.5px;color:var(--slate);padding:7px 0;border-bottom:1px solid var(--hairline)}
.sem li:last-child{border-bottom:none}
/* career prospects */
.chip-grid{display:grid;grid-template-columns:1fr;gap:0}
.chip{padding:15px 2px;border-top:var(--ice-rule-width) solid var(--hairline);background:none;border-radius:0;box-shadow:none}
.chip b{display:block;font-family:var(--display);font-size:18px;font-weight:600;color:var(--navy);margin-bottom:var(--ice-space-1)}
.chip span{font-size:13.5px;color:var(--slate)}
/* careers — vacancy ledger rows */
.job-list{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--ice-rule-width-active) solid var(--navy)}
.job{
position:relative;display:flex;flex-direction:column;gap:var(--ice-space-3);padding:var(--ice-space-5) var(--ice-space-0);
background:none;border:0;border-bottom:var(--ice-rule-width) solid var(--hairline);border-radius:0;box-shadow:none;
transition:background var(--dur-fast) var(--ease)
}
.job:hover{background:var(--surface-tint)}
.job>div{flex:1}
.job h3{font-size:var(--ice-type-h4-size);line-height:var(--ice-type-h4-line);margin-bottom:var(--ice-space-1)}
.job .dept{font-size:12px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--ice-color-text-accent)}
.job p{color:var(--slate);font-size:14px;line-height:1.55;margin-top:var(--ice-space-2);max-width:64ch}
.job .btn{position:relative;z-index:1;align-self:flex-start;min-height:var(--ice-control-min-compact);padding:var(--ice-space-3) var(--ice-space-5)}
.job .btn::after{content:"";position:absolute;inset:0}
.job .tags{display:flex;gap:var(--ice-space-2);margin:var(--ice-space-3) var(--ice-space-0) var(--ice-space-0);flex-wrap:wrap}
.job .tags span{font-size:12px;font-weight:600;color:var(--navy);border:var(--ice-rule-width) solid var(--hairline);background:var(--bg);border-radius:99px;padding:var(--ice-space-1) var(--ice-space-3)}
.job .tags span.due{color:var(--ice-color-text-action);border-color:var(--ice-color-text-action)}
/* hiring / admission mini-steps */
.mini-steps{display:grid;grid-template-columns:1fr;gap:0;counter-reset:ms;border-top:var(--ice-rule-width-active) solid var(--navy)}
.mini-steps div{counter-increment:ms;display:grid;grid-template-columns:44px 1fr;gap:2px var(--ice-space-4);padding:var(--ice-space-4) var(--ice-space-0);border-bottom:var(--ice-rule-width) solid var(--hairline);background:none;border-radius:0;box-shadow:none}
.mini-steps div::before{content:"0" counter(ms);grid-row:1/span 2;align-self:start;font:600 22px/1.1 var(--display);letter-spacing:.04em;color:var(--ice-color-text-accent)}
.mini-steps b{display:block;color:var(--navy);font-size:15px}
.mini-steps span{font-size:13.5px;line-height:1.5;color:var(--slate)}
/* FAQ */
.faq{max-width:820px;border-top:var(--ice-rule-width-active) solid var(--navy)}
.faq details{border-bottom:var(--ice-rule-width) solid var(--hairline)}
.faq summary{
position:relative;min-height:var(--ice-control-min-compact);padding:var(--ice-space-4) var(--ice-space-10) var(--ice-space-4) 2px;cursor:pointer;list-style:none;
font-size:15.5px;font-weight:650;color:var(--navy)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"+";position:absolute;right:var(--ice-space-2);top:50%;transform:translateY(-50%);
font:400 22px/1 var(--sans);color:var(--ice-color-text-accent)
}
.faq details[open] summary::after{content:"–"}
.faq details>p{padding:0 2px var(--ice-space-4);max-width:70ch;font-size:14.5px;line-height:1.7;color:var(--slate)}
.faq details>p a{color:var(--navy);font-weight:650}
/* ---------- 16 · content components ---------- */
/* course sub-nav */
.subnav{position:sticky;top:var(--nav-main-h);z-index:40;border-bottom:1px solid var(--hairline);background:var(--card)}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))) and (background:color-mix(in srgb,red 50%,blue)){
.subnav{
background:color-mix(in srgb,var(--card) 72%,transparent);
-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)
}
}
.subnav .wrap{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{
flex:none;padding:16px 13px;text-decoration:none;font-size:13px;font-weight:650;color:var(--slate);
border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast),border-color var(--dur-fast)
}
.subnav a:hover{color:var(--navy)}
.subnav a.on{color:var(--navy);border-bottom-color:var(--crimson)}
.subnav .apply-mini{
margin-left:auto;margin-bottom:0;padding:8px 16px;border-bottom:none;border-radius:var(--r-s);
background:var(--crimson);color:var(--accent-ink);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase
}
.subnav .apply-mini:hover{background:var(--crimson-hover);color:var(--accent-ink)}
/* contact section (navy field) */
.contact-sec{color:#fff}
.contact-sec .sec-head .label{color:var(--terracotta-soft)}
.contact-sec .sec-head h2{color:#fff}
.contact-sec .sec-head h2::after{background:var(--terracotta-soft)}
.contact-sec .sec-head p{color:rgba(255,255,255,.72)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:var(--ice-rule-width) solid rgba(255,255,255,.18)}
.contact-card{padding:var(--ice-space-5) 2px;border-bottom:var(--ice-rule-width) solid rgba(255,255,255,.18);background:none;border-radius:0;box-shadow:none}
.contact-card .label{color:var(--terracotta-soft);margin-bottom:var(--ice-space-2)}
.contact-card>a{font-family:var(--display);font-size:var(--ice-type-stat-size);font-weight:600;color:#fff;text-decoration:none}
.contact-card>a:hover{text-decoration:underline;text-underline-offset:4px}
.contact-card p{font-size:14px;color:rgba(255,255,255,.72);margin-top:var(--ice-space-2)}
.contact-card .map-link{font-size:13px;font-weight:650;color:#fff;text-underline-offset:3px}
.map-embed{position:relative;margin-top:var(--ice-space-8);border:var(--ice-rule-width) solid var(--glass-brd);border-radius:var(--r-m);overflow:hidden}
.map-embed iframe{display:block;width:100%;height:300px;border:0}
.map-embed__prompt{
position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ice-space-3);
width:100%;border:0;margin:0;cursor:pointer;color:#fff;font-family:inherit;
background:linear-gradient(180deg,rgba(10,17,32,.5),rgba(10,17,32,.68));
transition:background var(--dur-fast) var(--ease)
}
.map-embed__prompt:hover{background:linear-gradient(180deg,rgba(10,17,32,.58),rgba(10,17,32,.76))}
.map-embed__prompt svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.map-embed__prompt span{
padding:var(--ice-space-3) var(--ice-space-5);border:var(--ice-rule-width) solid rgba(255,255,255,.4);border-radius:var(--r-s);
background:rgba(255,255,255,.12);font-size:12px;font-weight:750;letter-spacing:.06em;text-transform:uppercase
}
.map-embed.is-active .map-embed__prompt{display:none}
/* CTA banner — a full-width navy statement band */
.cta-banner{
display:flex;flex-direction:column;gap:22px;
padding:clamp(30px,5vw,52px) clamp(22px,4vw,56px);color:var(--ice-color-on-surface-brand);border-radius:var(--r-s);
background:
radial-gradient(620px 300px at 88% -20%,rgba(217,112,44,.2),transparent 60%),
linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
var(--ice-color-surface-brand);
background-size:auto,44px 44px,44px 44px,auto;
border:1px solid var(--glass-brd);box-shadow:0 24px 56px rgba(19,35,75,.22)
}
.cta-banner h3{color:var(--ice-color-on-surface-brand);font-size:var(--ice-type-h2-size);line-height:var(--ice-type-h2-line);margin-bottom:var(--ice-space-2);letter-spacing:-.02em}
.cta-banner p{color:rgba(255,255,255,.76);font-size:14.5px;max-width:52ch}
.cta-banner .btn-primary{flex:none}
/* compare table — real table ≥760px, stacked ledger below */
.table-scroll{border-radius:var(--r-m)}
.cmp{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--hairline);font-size:14.5px}
.cmp th,.cmp td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--hairline)}
.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cmp tr{display:block;padding:6px 0}
.cmp td{display:block;border-bottom:0;padding:4px 16px}
.cmp td:first-child{padding-top:12px}
.cmp td:last-child{padding-bottom:14px}
.cmp tr+tr{border-top:1px solid var(--hairline)}
.cmp td b{color:var(--navy)}
.cmp .num{font-family:var(--display);font-weight:600;font-size:16px;color:var(--navy)}
.cmp td[data-th]::before{content:attr(data-th);display:block;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--ice-color-text-accent);margin-bottom:1px}
/* admissions page grids */
.adm-grid .mini-steps span a{color:var(--navy);font-weight:650}
.adm-grid>div>.cta-row{margin-top:var(--ice-space-5)}
.adm-grid .scholar:first-child{margin-top:0}
.adm-grid .scholar+.scholar{margin-top:var(--ice-space-4)}
/* panels — the two accent containers allowed in body copy */
.scholar{margin-top:var(--ice-space-6);padding:var(--ice-space-6);color:#fff;border-radius:var(--r-s);border-left:var(--ice-rule-width-accent) solid var(--crimson);background:var(--navy-deep)}
.scholar h3{color:#fff;font-size:19px;margin-bottom:var(--ice-space-2)}
.scholar p{font-size:14.5px;color:rgba(255,255,255,.8)}
.scholar a{color:#fff;font-weight:650;text-underline-offset:3px}
.scholar#scholarships{background:var(--navy-deep);padding:var(--ice-space-6)}
.source-note{padding:var(--ice-space-4) var(--ice-space-5);border-left:var(--ice-rule-width-accent) solid var(--terracotta);background:var(--surface-tint);border-radius:0 var(--r-s) var(--r-s) 0;font-size:13.5px;color:var(--slate)}
.source-note a{font-weight:650;color:var(--navy)}
.fee-note{display:flex;gap:var(--ice-space-4);align-items:flex-start;margin-top:var(--ice-space-5);padding:var(--ice-space-5) var(--ice-space-5);background:var(--surface-tint);border-radius:var(--r-s)}
.fee-note svg{width:var(--ice-space-6);height:var(--ice-space-6);flex:none;fill:none;stroke:var(--terracotta);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fee-note b{display:block;color:var(--navy)}
.fee-note span{display:block;font-size:13.5px;color:var(--slate)}
/* inquiry form */
.inquiry-form{margin-top:var(--ice-space-6);padding-top:var(--ice-space-6);border-top:var(--ice-rule-width) solid var(--hairline)}
.inquiry-form label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:var(--ice-space-4)}
.inquiry-form input,.inquiry-form select{
margin-top:var(--ice-space-2);width:100%;min-height:var(--ice-control-min);padding:var(--ice-space-3) var(--ice-space-3);font:inherit;font-size:16px;
background:var(--field);color:var(--ink);border:var(--ice-rule-width) solid var(--hairline);border-radius:var(--r-s)
}
.inquiry-form input:focus,.inquiry-form select:focus{outline:2px solid var(--navy);outline-offset:1px}
.inquiry-form .btn{margin-top:0;width:100%;border:none;cursor:pointer}
/* Shown in place of the form once the lead has posted. Not a .btn, so the
plain [hidden] attribute is enough here. */
.inquiry-done{margin-top:var(--ice-space-6);padding-top:var(--ice-space-6);border-top:var(--ice-rule-width) solid var(--hairline);font-size:14px;line-height:1.65;color:var(--slate)}
.inquiry-done b{display:block;margin-bottom:4px;color:var(--ink)}
.inquiry-done:focus{outline:2px solid var(--navy);outline-offset:4px}
.inquiry-alt{display:block;text-align:center;margin-top:12px;padding:8px;font-size:13px;color:var(--slate);text-decoration:none}
.inquiry-alt:hover{text-decoration:underline;color:var(--navy)}
.apply-steps{margin-bottom:var(--ice-space-5)}
.apply-card{background:var(--card);border:var(--ice-rule-width) solid var(--hairline);border-radius:var(--r-m);padding:var(--ice-space-6);box-shadow:var(--surface-shadow)}
.apply-card h3{font-size:var(--ice-type-h4-size);line-height:var(--ice-type-h4-line);color:var(--navy);margin-bottom:var(--ice-space-3)}
.apply-card ul{list-style:none;display:grid;gap:var(--ice-space-3);margin:var(--ice-space-0);padding:var(--ice-space-0)}
.apply-card li{position:relative;padding-left:var(--ice-space-5);max-width:64ch;color:var(--slate);font-size:15px;line-height:1.55}
.apply-card li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:var(--ice-rule-width);background:var(--ice-color-text-accent)}
.apply-card li b{color:var(--navy);font-weight:650}
.apply-card__actions{display:flex;flex-wrap:wrap;gap:var(--ice-space-3);margin-top:var(--ice-space-5)}
.apply-card .fineprint{margin-top:var(--ice-space-4);max-width:72ch;line-height:1.6}
/* article layout (guides / SEO pages) */
.article-body{max-width:var(--ice-measure-prose-wide)}
/* article prose is primary reading content — never reveal-hidden */
.article-body.rv{opacity:1!important;visibility:visible!important;transform:none!important}
.article-body h2{margin:var(--ice-space-10) var(--ice-space-0) var(--ice-space-3);font-size:var(--ice-type-h2-size);line-height:var(--ice-type-h2-line);letter-spacing:var(--ice-type-h2-track);font-weight:500}
.article-body h2:first-child{margin-top:var(--ice-space-0)}
.article-body h3{margin:var(--ice-space-7) var(--ice-space-0) var(--ice-space-2);font-size:var(--ice-type-h3-size);line-height:var(--ice-type-h3-line);font-weight:600}
.article-body p,.article-body li{font-size:var(--ice-type-body-size);line-height:var(--ice-type-body-line);color:var(--slate)}
.article-body p{margin-bottom:var(--ice-paragraph-gap)}
.article-body ul,.article-body ol{margin:var(--ice-space-0) var(--ice-space-0) var(--ice-space-5) var(--ice-space-6)}
.article-body a{font-weight:650;color:var(--navy);text-underline-offset:3px}
.article-aside{display:grid;gap:var(--ice-space-4)}
.fact-panel{padding:var(--ice-space-6);background:var(--surface-tint);border:0;border-top:var(--ice-rule-width-active) solid var(--navy);border-radius:0;box-shadow:none}
.fact-panel h3{margin-bottom:var(--ice-space-3);font-size:19px}
.fact-panel ul{list-style:none}
.fact-panel li{padding:var(--ice-space-2) var(--ice-space-0);border-bottom:var(--ice-rule-width) solid var(--hairline);font-size:13.5px;color:var(--slate)}
.fact-panel li:last-child{border-bottom:0}
.fact-panel a{font-weight:650;color:var(--navy)}
.article-aside .scholar{margin-top:0}
/* ---------- 17 · footer — compact institutional directory ---------- */
.site-footer{
position:relative;overflow:hidden;color:#fff;background:
radial-gradient(680px 300px at 12% 0%,rgba(217,112,44,.11),transparent 65%),
linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),
var(--navy-ink);
background-size:auto,44px 44px,44px 44px,auto
}
/* impeccable-disable-next-line side-tab: a full-bleed 3px brand rule across the top of the FOOTER, fading out to the right. Not a card, list item, callout or alert, which is the scope the rule states; it is the section boundary between the page and the footer, and docs/04 §02 specifies the terracotta. */
.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--terracotta),var(--terracotta-soft) 60%,transparent 100%)} /* §02: terracotta only */
.footer-shell{position:relative;width:100%;margin-inline:auto;padding-inline:var(--gutter)}
.footer-top{position:relative;display:grid;gap:16px;padding:20px 0 16px;border-bottom:1px solid rgba(255,255,255,.13)}
.footer-brand{min-width:0}
.footer-brand__head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.footer-brand__mark{width:70px;height:70px;display:grid;place-items:center;flex:none;padding:5px;border-radius:50%;background:linear-gradient(155deg,var(--terracotta),var(--navy-deep) 55%);box-shadow:0 8px 20px rgba(0,0,0,.35)} /* §02: terracotta+navy only, no raw hex */
.footer-brand__mark::before{content:"";position:absolute}
.footer-brand__mark img{display:block;width:60px;height:60px;padding:4px;border-radius:50%;object-fit:contain;background:#fff}
.footer-brand__rule{width:1px;align-self:stretch;background:rgba(255,255,255,.16)}
.footer-lockup{min-width:0}
.footer-lockup>span:not(.chrome-val),.footer-lockup>small{display:block;color:rgba(255,255,255,.66);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.footer-lockup>strong,.footer-lockup>.chrome-val{display:block;color:var(--terracotta-soft);font-family:var(--display);font-size:clamp(1.45rem,3vw,1.75rem);font-style:italic;line-height:1.05}
.footer-lockup>small{margin-top:4px;color:rgba(217,112,44,.88);font-size:12px;letter-spacing:.1em}
.footer-brand h2{max-width:34ch;margin-bottom:8px;color:#fff;font-size:clamp(1.25rem,1.05rem + .8vw,1.55rem);line-height:1.26}
.footer-brand>p{max-width:58ch;color:rgba(255,255,255,.72);font-size:14px;line-height:1.6}
.footer-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.footer-badges span{padding:5px 10px;border:1px solid rgba(255,255,255,.15);border-radius:99px;color:rgba(255,255,255,.82);font-size:12px;font-weight:650;line-height:1.2}
.footer-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-self:start}
.footer-stats>div,.footer-cta,.footer-affiliation{border:1px solid rgba(255,255,255,.13);border-radius:10px;background:rgba(255,255,255,.05)}
.footer-stats>div{padding:13px 14px}.footer-stats strong,.footer-stats .chrome-val{display:block;color:var(--terracotta-soft);font-family:var(--display);font-size:1.45rem;line-height:1}
.footer-stats span{display:block;margin-top:5px;color:rgba(255,255,255,.68);font-size:12px;line-height:1.35}
.footer-cta{align-self:start;padding:18px}
.footer-cta .label{margin-bottom:7px;color:var(--terracotta-soft)}
.footer-cta h3{max-width:24ch;margin-bottom:14px;color:#fff;font-size:1.1rem;font-style:italic;line-height:1.35}
.footer-cta__actions{display:flex;flex-wrap:wrap;gap:8px}
.footer-cta .btn-primary,.footer-secondary{min-height:44px;padding:10px 16px}
.footer-secondary{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-s);color:#fff;text-decoration:none;font-size:13px;font-weight:650}
.footer-secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.footer-join{display:none}
.footer-contact{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.footer-contact-card{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:6px;min-height:56px;padding:7px 8px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.05);color:#fff;text-decoration:none;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.footer-contact-card--primary{border-color:rgba(196,30,58,.35);background:rgba(196,30,58,.12)}
.footer-contact-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.footer-icon{width:30px;height:36px;display:grid;place-items:center;color:var(--terracotta-soft)}
.footer-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.footer-contact-card small{display:block;margin-bottom:2px;color:rgba(255,255,255,.68);font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.footer-contact-card b,.footer-contact-card .chrome-val{display:block;overflow:hidden;color:#fff;font-size:14px;font-weight:650;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.footer-directory{display:grid;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.footer-link-groups{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.footer-link-group h3{margin-bottom:7px;color:var(--terracotta-soft);font-family:var(--sans);font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.footer-link-group a{display:flex;align-items:center;min-height:40px;color:rgba(255,255,255,.76);font-size:14px;line-height:1.35;text-decoration:none}
.footer-link-group a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-affiliation{display:flex;align-items:center;gap:12px;align-self:start;padding:14px}
.footer-affiliation img{width:34px;height:auto;flex:none}
.footer-eyebrow{display:block;margin-bottom:3px;color:var(--terracotta-soft);font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.footer-affiliation strong,.footer-affiliation .chrome-val{display:block;color:#fff;font-family:var(--display);font-size:16px;line-height:1.25}
.footer-affiliation p{margin-top:4px;color:rgba(255,255,255,.7);font-size:13px;line-height:1.45}
.foot-base{position:relative;background:rgba(0,0,0,.18);color:rgba(255,255,255,.68);font-size:12.5px;line-height:1.5}
.foot-base__inner{width:100%;margin-inline:auto;padding:10px var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-base a{color:rgba(255,255,255,.82);text-decoration:none}
.foot-base a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-social{display:flex;align-items:center;gap:9px}
.footer-social>span{color:var(--terracotta-soft);font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.footer-social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#fff;transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.footer-social a:hover{transform:translateY(-2px);background:var(--crimson);border-color:transparent} /* §02: crimson for CTAs, single accent */
.footer-social svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.foot-base__nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-base__nav a{display:inline-flex;align-items:center;min-height:40px}
/* ---------- 18 · sticky mobile action bar ---------- */
.sticky-cta{
position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
grid-template-columns:1fr auto auto;gap:8px;align-items:stretch;
padding:9px 12px calc(9px + env(safe-area-inset-bottom));
background:var(--chrome-solid);border-top:1px solid rgba(255,255,255,.14)
}
@supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
.sticky-cta{background:var(--chrome);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
}
.sticky-cta .btn{min-height:44px;padding:11px 18px}
.sticky-cta .sticky-ico{
display:grid;place-items:center;width:46px;border:1px solid var(--glass-brd);border-radius:var(--r-s);
background:var(--glass);color:#fff
}
.sticky-cta .sticky-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-install{min-height:40px;padding:8px 12px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-s);background:transparent;color:#fff;font:inherit;font-weight:750;cursor:pointer}
.nav-install:hover{background:rgba(255,255,255,.1)}
.admission-dock{position:fixed;right:18px;bottom:18px;z-index:58;width:min(290px,calc(100vw - 36px));padding:13px 15px 14px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:var(--chrome-solid);box-shadow:0 18px 46px rgba(4,12,36,.3);color:#fff}
.admission-dock span{display:block;margin-bottom:4px;color:rgba(255,255,255,.66);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.admission-dock a{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#fff;font-size:17px;font-weight:850;line-height:1.2;text-decoration:none}
.admission-dock__go{display:grid!important;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--crimson);color:#fff!important;font-size:16px!important;letter-spacing:0!important;text-transform:none!important}
body.is-installed>.admission-dock{display:none}
@media(max-width:719px){
.sticky-cta{display:grid}
.admission-dock{display:none}
body{padding-bottom:64px}
}
/* ============================================================
19 · wide-screen composition — enhancement tiers
============================================================ */
/* --- ≥560px: two-up rhythms --- */
@media(min-width:560px){
.fac-grid{grid-template-columns:1fr 1fr;gap:0 44px}
.chip-grid{grid-template-columns:1fr 1fr;gap:0 44px}
.seo-grid{grid-template-columns:1fr 1fr}
.sem-grid{grid-template-columns:1fr 1fr;gap:32px 40px}
.notice-list a{display:flex;gap:24px;align-items:baseline}
.notice-list .date{flex:none;width:92px;margin-bottom:0}
.footer-cta__actions{flex-direction:row;align-items:center}
.footer-cta .btn,.footer-secondary{flex:0 0 auto}
.footer-link-groups{grid-template-columns:1fr 1fr;gap:18px 28px}
.stats .wrap,.stats .wrap--wide{grid-template-columns:repeat(4,1fr)}
.trust-strip{grid-template-columns:repeat(3,1fr)}
}
/* --- ≥760px: splits activate; tables become tables --- */
@media(min-width:760px){
:root{--tu-bar-h:34px}
.split,.media-row{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center}
.media-row figure{order:0}
.two-col{grid-template-columns:1.15fr .85fr;align-items:start}
.adm-grid{grid-template-columns:1.2fr .8fr;align-items:start}
.about-grid{grid-template-columns:1fr 1fr}
.article-layout{grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,72px);align-items:start}
.article-aside{position:sticky;top:calc(var(--nav-main-h) + var(--ice-space-7))}
.prog-grid{grid-template-columns:repeat(3,1fr)}
.seo-grid{grid-template-columns:repeat(3,1fr)}
.contact-grid{grid-template-columns:repeat(3,1fr);gap:0 var(--ice-space-8);border-top:0}
.contact-card{border-top:var(--ice-rule-width) solid rgba(255,255,255,.18);border-bottom:0;padding:var(--ice-space-6) 2px}
.quickbar .wrap--wide{grid-template-columns:repeat(3,1fr)}
.quickbar a:nth-child(odd){border-right:0}
.quickbar a:not(:nth-child(3n)){border-right:1px solid var(--hairline)}
.mini-steps{grid-template-columns:1fr 1fr;gap:0 var(--ice-space-10);border-top:0}
.mini-steps div{border-top:var(--ice-rule-width-active) solid var(--navy);border-bottom:0;margin-bottom:var(--ice-space-5)}
.adm-grid .mini-steps{grid-template-columns:1fr 1fr}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"body action" "tags action";align-items:center;gap:var(--ice-space-2) var(--ice-space-8);padding:var(--ice-space-5) var(--ice-space-2)}
.job>div{grid-area:body}
.job .tags{grid-area:tags;margin:0}
.job .btn{grid-area:action;align-self:center;justify-self:end}
.footer-top{grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);align-items:start}
.footer-brand{grid-row:1/span 2}
.footer-cta{grid-column:2}
.footer-directory{grid-template-columns:minmax(0,1fr) 240px;align-items:start}
.footer-link-groups{grid-template-columns:1fr 1fr}
.foot-base__inner{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-banner{flex-direction:row;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.map-embed iframe{height:360px}
/* compare table becomes a real table */
.table-scroll{overflow-x:auto}
.cmp{border-radius:var(--r-m);overflow:hidden}
.cmp thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
.cmp tr{display:table-row;padding:0}
.cmp td{display:table-cell;border-bottom:1px solid var(--hairline);padding:14px 16px}
.cmp tr+tr{border-top:0}
.cmp th{background:var(--navy-deep);color:#fff;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
html[data-theme="dark"] .cmp th{background:var(--navy-ink)}
.cmp tr:last-child td{border-bottom:none}
.cmp td[data-th]::before{display:none}
.hero-highlights{grid-template-columns:repeat(4,1fr)}
.hero-highlight{border-bottom:0!important;padding:14px 18px}
.hero-highlight:nth-child(odd){border-right:0}
.hero-highlight:not(:last-child){border-right:1px solid rgba(255,255,255,.11)}
.page-hero{padding:calc(var(--nav-h) + 64px) 0 64px}
.page-hero .facts div{padding-right:34px}
.lineart{right:var(--gutter);bottom:8%;width:min(430px,36vw);opacity:.42}
.statement-text{max-width:none}
}
/* --- ≥1000px: multi-column ledgers, quiet asymmetry --- */
/* Phone admission welcome: compact enough to avoid nested scrolling on
common iPhone portrait viewports while preserving 44px touch targets. */
/* Safari's visible viewport can become much shorter while its browser chrome
is expanded. Decorative details collapse first; both decisions stay visible. */
/* Wide phones in landscape cross the desktop width breakpoint but still have
phone-height viewports. Keep those as a compact single-panel dialog. */
@media(min-width:1000px){
.sem-grid{grid-template-columns:repeat(4,1fr);gap:0 36px}
.chip-grid{grid-template-columns:repeat(3,1fr);gap:0 44px}
.mini-steps{grid-template-columns:repeat(4,1fr);gap:0 var(--ice-space-8)}
.adm-grid .mini-steps{grid-template-columns:1fr 1fr}
.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.media-row{gap:clamp(36px,5vw,72px)}
.footer-top{grid-template-columns:minmax(0,1.1fr) minmax(170px,.7fr) minmax(280px,1fr);gap:24px}
.footer-brand{grid-row:auto}
.footer-cta{grid-column:auto}
.footer-contact{grid-template-columns:repeat(4,1fr);gap:10px}
.footer-directory{grid-template-columns:minmax(0,1fr) minmax(190px,1.1fr)}
.footer-link-groups{grid-template-columns:repeat(4,1fr);gap:18px}
.footer-join{display:block;position:absolute;z-index:0;right:0;bottom:10px;width:54%;overflow:hidden;color:rgba(255,255,255,.11);font-family:var(--display);font-size:clamp(3rem,5vw,4rem);font-style:italic;font-weight:700;line-height:1;pointer-events:none;text-align:center}
.footer-brand,.footer-stats,.footer-cta{position:relative;z-index:1}
.job p{max-width:72ch}
.quickbar .wrap--wide{grid-template-columns:repeat(6,1fr)}
.quickbar a{border-right:1px solid var(--hairline);border-bottom:0;padding:16px 18px}
.quickbar a:nth-child(3n){border-right:1px solid var(--hairline)}
.quickbar a:last-child{border-right:0}
.news-panel__inner{min-height:60px}
.news-item .ticker-text{font-size:15.5px;-webkit-line-clamp:1}
}
/* --- ≥1181px: desktop header — full-width, full-height cells --- */
@media(min-width:1181px){
:root{--nav-main-h:72px;--contact-h:36px}
/* contact utility row: inline priority links, no buttons */
.tc-actions{display:none}
.tc-links{display:flex;flex:1;min-width:0;align-items:center;gap:clamp(14px,2vw,34px)}
.tc-links a{
display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 2px;
color:#fff;text-decoration:none;font-weight:650;font-size:12px;white-space:nowrap
}.tc-links a:hover b,.tc-links a:hover .chrome-val{text-decoration:underline;text-underline-offset:3px}
.tc-links .tc-role{color:rgba(255,255,255,.78);font-weight:600;font-size:12px;letter-spacing:.02em}.tc-links b,.tc-links .chrome-val{font-weight:750;letter-spacing:.01em}
.tc-links .tc-line--wa .tc-ico{color:#57d07f;opacity:1}
.nav{gap:0;padding-right:0}
header.site .nav{box-shadow:inset 0 -1px 0 var(--header-hair)}
.brand-block{gap:14px;flex:0 0 auto;overflow:visible}
.brand{gap:11px}
.brand img{width:60px;height:60px;filter:none}.brand b,.brand .chrome-val{font-size:17.5px;letter-spacing:.04em;line-height:1}
.brand small{margin-top:6px;font-size:12px;letter-spacing:.14em}
/* TU affiliation — plain mark: divider + emblem + two-line name */
.affiliation-mark{
display:flex;align-items:center;gap:10px;min-width:max-content;
padding:0;text-decoration:none;color:var(--header-ink)
}
.affiliation-mark::before{content:"";align-self:stretch;width:1px;background:var(--header-hair)}
.affiliation-mark>img{width:22px;height:26px;object-fit:contain}.affiliation-mark small,.affiliation-mark strong,.affiliation-mark .chrome-val{display:block;font-family:var(--sans);line-height:1.3}
.affiliation-mark small{margin-bottom:3px;font-size:12px;font-weight:650;color:var(--header-ink-dim)}.affiliation-mark strong,.affiliation-mark .chrome-val{font-size:12.5px;font-weight:700;color:var(--header-ink);white-space:nowrap}
/* Desktop keeps the former-name row (it is the whole point) but drops the TU
row, which the brand block already carries as .affiliation-mark. */
.tu-ribbon{display:none}
:root{--tu-bar-h:0px}
.id-ribbon__former{height:32px;font-size:13px;letter-spacing:.03em}
:root{--former-bar-h:32px}
.menu-btn{display:none}
nav.links{
display:flex;position:static;flex-direction:row;gap:0;align-self:stretch;height:100%;
max-height:none;overflow:visible;padding:0;background:none;border:0;box-shadow:none
}
nav.links>a,.nav-item{position:relative;height:100%;display:flex;align-items:center;border-bottom:0}
nav.links>a:not(.nav-cta),.nav-item .nav-link,.nav-item .nav-caret{
color:var(--header-ink-soft);font-size:15px;font-weight:500;letter-spacing:.005em;
transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)
}
nav.links>a:not(.nav-cta){padding:0 clamp(8px,1vw,22px)}
nav.links>a:not(.nav-cta):hover{background:var(--header-glass-bg);color:var(--header-ink)}
nav.links>a.active:not(.nav-cta){background:transparent;color:var(--header-ink);border-left:0;padding-left:clamp(8px,1vw,22px);position:relative}
nav.links>a.active:not(.nav-cta)::after{content:"";position:absolute;bottom:0;left:15%;right:15%;height:3px;background:var(--crimson)}
nav.links a.active{border-left:0;padding-left:clamp(8px,1vw,22px)}
nav.links>a.nav-vacancy{gap:clamp(4px,.4vw,9px)}
.nav-vacancy__icon{width:clamp(12px,1vw,16px);height:clamp(12px,1vw,16px)}
nav.links>a.nav-vacancy:hover,nav.links>a.nav-vacancy:focus-visible{background:rgba(217,112,44,.16);color:var(--header-ink)}
nav.links>a.nav-vacancy.active{background:rgba(217,112,44,.24);color:var(--header-ink);border-left:0}
.nav-item{flex-wrap:nowrap;border-bottom:0}
.nav-item .nav-link{height:100%;display:flex;align-items:center;padding:0 2px 0 clamp(10px,1.3vw,24px);border-bottom:0}
.nav-caret{
height:100%;width:44px;min-width:44px;flex:none;
opacity:.75;transition:opacity var(--dur-fast) var(--ease)
}
.nav-caret svg{width:13px;height:13px}
.nav-item:hover,.nav-item:focus-within,.nav-item.is-open{background:var(--header-glass-bg)}
.nav-item:has(.nav-link.active){background:transparent}
.nav-item:has(.nav-link.active)::after{content:"";position:absolute;bottom:0;left:15%;right:15%;height:3px;background:var(--crimson)}
.nav-item:hover .nav-link,.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-link,.nav-item:focus-within .nav-caret,
.nav-item.is-open .nav-link,.nav-item.is-open .nav-caret,
.nav-item .nav-link.active{color:var(--header-ink);opacity:1}
.nav-item:hover .nav-caret svg,.nav-item:focus-within .nav-caret svg,.nav-item.is-open .nav-caret svg{transform:rotate(180deg)}
/* dropdown: crisp warm-paper extension flush to its parent cell */
.nav-dropdown{
position:absolute;top:100%;left:0;margin:0;min-width:270px;padding:0;
display:flex;flex-direction:column;flex-basis:auto;border-left:0;
background:var(--bg);
border:1px solid var(--hairline);border-top:0;border-radius:0 0 4px 4px;
box-shadow:0 16px 32px rgba(19,35,75,.18);
opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
transition:none;
z-index:5
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown{
opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
transition:none
}
.nav-item .nav-dropdown a{
display:flex;align-items:center;min-height:54px;padding:0 22px;
border-bottom:1px solid var(--hairline);border-left:0;
color:var(--navy);text-decoration:none;font-size:14px;font-weight:650;
/* `padding-left` is deliberately NOT in this list. The hover still nudges
the label, but it lands in one step instead of being animated, because
animating padding relayouts the dropdown on every pointer pass. A
transform is not the substitute here the way it is on `.notice-list`:
this row has a hover background and an inset rule, and translating the
anchor would drag both off the row. The background and the rule carry the
transition; the 6px is instant. */
transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)
}
.nav-item .nav-dropdown a:last-child{border-bottom:0}
/* The Guides menu carries twelve rows since the answer categories joined it,
and "Purbanchal University admission" does not fit 270px. Wider, shorter
rows, and the divider label picks up the paper background. */
.nav-dropdown--wide{min-width:320px}
/* Same specificity as the rule above it and later in the file, so it wins
without `!important`. The `!important` type-hierarchy trap on /courses is
the reason this is spelled out. */
.nav-item .nav-dropdown--wide a{min-height:46px}
.nav-dropdown__label{
margin:0;padding:14px 22px 6px;border-bottom:1px solid var(--hairline);
color:var(--slate);font-size:11px;font-weight:700;
letter-spacing:.08em;text-transform:uppercase
}
.nav-item .nav-dropdown a:hover,.nav-item .nav-dropdown a:focus-visible{
background:var(--surface-tint);padding-left:28px;box-shadow:inset 3px 0 0 var(--terracotta);color:var(--navy)
}
header.site .nav-dropdown a:focus-visible{outline-color:var(--crimson)}
.nav-controls{height:100%;flex:0 0 auto;margin-left:auto}
.theme-btn{height:100%;padding:0 clamp(6px,.8vw,10px);color:var(--header-ink-soft);border-radius:0}
.theme-btn::before{display:none}
.theme-btn:hover{background:var(--header-glass-bg);color:var(--header-ink)}
nav.links a.nav-cta{
margin:0 0 0 16px;padding:8px 20px !important;border-radius:4px !important;
height:36px !important;align-self:center !important;
background:rgba(255, 255, 255, 0.08) !important;
border:1px solid rgba(255, 255, 255, 0.2) !important;
color:#fff !important;
font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
transition:all var(--dur-fast) var(--ease)
}
nav.links a.nav-cta:hover{
background:rgba(255, 255, 255, 0.16) !important;
border-color:rgba(255, 255, 255, 0.4) !important;
}
}
@media(min-width:1181px) and (max-width:1320px){
nav.links>a:not(.nav-cta){padding-inline:var(--ice-space-2)}
nav.links>a.active:not(.nav-cta),nav.links a.active{padding-left:var(--ice-space-2)}
.nav-item .nav-link{padding-left:var(--ice-space-2)}
}
/* Theme-toggle label breakpoints.
The nav row sits flush to the right edge — .nav-cta's right edge lands exactly
on the viewport edge at every width, so the row carries no slack and any growth
in the toggle spills past it. html{overflow-x:clip} (L241) then swallows the
overflow with no scrollbar, so an over-eager label silently eats the Contact
button instead of producing a visible layout break.
Both label steps are therefore gated above the width where they measurably fit,
NOT at the width where the surrounding nav breakpoint happens to start:
"Dark"/"Light" needs >=1191px -> gated at 1200
"Switch to dark mode" needs >=1375px -> gated at 1400
Below each gate the toggle reads as an icon-only control, which is the same
affordance it has on mobile. If you lengthen either label, re-measure the row
before lowering these numbers. */
@media(min-width:1200px){
.theme-btn::after{content:"Dark";white-space:nowrap;display:inline}
html[data-theme="dark"] .theme-btn::after{content:"Light"}
}
@media(min-width:1400px){
.theme-btn{padding:0 20px}
.theme-btn::after{content:"Switch to dark mode"}
html[data-theme="dark"] .theme-btn::after{content:"Switch to light mode"}
}
/* --- ≥1440px: wide-rail editorial refinements --- */
@media(min-width:1440px){
.sec-head{max-width:820px}
.statement .wrap>*{margin-left:8.33%}
.page-hero h1{max-width:26ch}
}
/* mobile drawer boundary: everything below 1181px keeps the drawer;
nav row and ribbon sizes step down on small phones */
@media(max-width:360px){
.nav{padding-inline:12px}
.brand{gap:8px}
.brand img{width:40px;height:40px}.brand b,.brand .chrome-val{font-size:12.5px;letter-spacing:.015em}
.brand small{display:none}
.nav-controls{gap:6px}
}
/* Desktop tight band: at the 12px type floor the ESTD line is wider than the
brand name, so between the 1181px nav breakpoint and the 1320px content
rail it would widen the single header row into horizontal overflow. Cap the
brand text block there so the ESTD wraps to two balanced lines instead; at
≥1320px there is room for it on one line again. */
@media(min-width:1181px) and (max-width:1319px){
.brand b,.brand .chrome-val{max-width:195px}
.brand small{text-wrap:balance}
}
/* ---------- 21 · Visual Resource Hub (Blog Redesign) ---------- */
.resource-hub {
margin-top: var(--ice-space-8);
}
.resource-tab-row {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 12px;
margin-bottom: var(--ice-space-8);
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
.resource-tab-row::-webkit-scrollbar {
display: none; /* Safari/Chrome */
}
.resource-tab {
flex: 0 0 auto;
padding: 10px 20px;
font-family: var(--sans);
font-size: 13px;
font-weight: 650;
color: var(--navy);
background: var(--surface-tint);
border: 1px solid var(--hairline);
border-radius: 30px;
cursor: pointer;
transition: all var(--dur-fast) var(--ease);
}
.resource-tab:hover {
border-color: var(--terracotta);
background: var(--card);
transform: translateY(-1px);
}
.resource-tab.is-active {
background: var(--navy);
color: #fff;
border-color: var(--navy);
box-shadow: 0 4px 12px rgba(14, 22, 71, 0.15);
}
html[data-theme="dark"] .resource-tab {
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .resource-tab:hover {
border-color: var(--terracotta);
background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .resource-tab.is-active {
background: var(--navy-mid); /* §02: terracotta is a highlight, not a UI fill */
color: #fff;
border-color: var(--navy-mid);
box-shadow: 0 4px 12px rgba(19, 35, 75, 0.4);
}
/* Resource Grid */
.resource-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--ice-space-6);
}
@media(min-width:640px) {
.resource-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:1024px) {
.resource-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Resource Card */
.resource-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--card);
border: 1px solid var(--hairline);
border-radius: var(--r-l);
overflow: hidden;
text-decoration: none;
box-shadow: var(--surface-shadow);
transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.resource-card:hover {
transform: translateY(-6px);
border-color: var(--terracotta);
box-shadow: 0 20px 38px rgba(14, 22, 71, 0.08);
}
html[data-theme="dark"] .resource-card:hover {
box-shadow: 0 20px 38px rgba(0, 0, 0, 0.35);
border-color: var(--terracotta);
}
.resource-card__media {
position: relative;
overflow: hidden;
aspect-ratio: 16/10;
border-bottom: 1px solid var(--hairline);
}
.resource-card__media .ice-picture {
display: block;
width: 100%;
height: 100%;
}
.resource-card__media .ice-picture img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-med) var(--ease);
}
.resource-card:hover .resource-card__media .ice-picture img {
transform: scale(1.05);
}
.resource-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: var(--ice-space-5);
}
.resource-card__body .label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ice-color-text-accent);
margin-bottom: var(--ice-space-2);
}
.resource-card__body h3 {
font-family: var(--display); /* §03: use design system token, not bare stack */
font-size: 19px;
font-weight: 500;
line-height: 1.4;
color: var(--navy);
margin: 0 0 var(--ice-space-3) 0;
transition: color var(--dur-fast) var(--ease);
}
html[data-theme="dark"] .resource-card__body h3 {
color: #fff;
}
.resource-card:hover .resource-card__body h3 {
color: var(--ice-color-text-accent);
}
.resource-card__body p {
font-family: var(--sans);
font-size: 14px;
line-height: 1.55;
color: var(--slate);
margin: 0 0 var(--ice-space-5) 0;
flex-grow: 1;
}
html[data-theme="dark"] .resource-card__body p {
color: rgba(255, 255, 255, 0.7);
}
.resource-card__body .go {
font-family: var(--sans);
font-size: 11px;
font-weight: 750;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ice-color-text-action);
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: auto;
transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
html[data-theme="dark"] .resource-card__body .go {
color: var(--ice-color-text-action);
}
.resource-card:hover .resource-card__body .go {
color: var(--navy);
gap: 8px;
}
html[data-theme="dark"] .resource-card:hover .resource-card__body .go {
color: #fff;
}
/* Filtered cards are staged by the GSAP interaction bundle. */
.resource-card.is-hidden {
display: none;
}
/* ---------- 20 · reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.hero-video{display:none}
.video-ambient{display:none}
.typing-cursor{display:none}
.news-rail{scroll-behavior:auto}
}
/* =====================================================================
THE ICE DIFFERENCE — Digital Twin ecosystem USP band (homepage/courses)
A dark statement band with quiet ambient motion and direct hover states.
===================================================================== */
.usp-band{
position:relative;
overflow:hidden;
padding:clamp(60px,8vw,112px) 0;
background:
radial-gradient(70% 120% at 88% -12%, rgba(232,145,90,.20), transparent 58%),
radial-gradient(60% 120% at 6% 116%, rgba(95,168,232,.14), transparent 60%),
linear-gradient(178deg,#0c1a38 0%,#070d1e 100%);
color:#e7ebf4;
}
.usp-band__head{max-width:760px}
.usp-band .course-kicker,.usp-band .label{color:#e8915a}
.usp-band h2{color:#fff;letter-spacing:-.01em}
.usp-band__head>p:last-child{margin-top:18px;color:#a9b7d0;font-size:clamp(1.02rem,1.5vw,1.24rem);line-height:1.55;max-width:60ch}
/* ---- workflow flow ---- */
.usp-flow{
display:grid;gap:14px;margin:clamp(34px,5vw,52px) 0 0;padding:0;list-style:none;
}
.usp-step{
position:relative;padding:22px 22px 24px;
border:1px solid rgba(255,255,255,.12);border-radius:14px;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.usp-step__n{
display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;margin-bottom:14px;border-radius:11px;
background:rgba(232,145,90,.16);color:#e8915a;
font-family:var(--sans);font-weight:800;font-size:.9rem;letter-spacing:.02em;
}
.usp-step b{display:block;color:#fff;font-family:var(--display);font-size:1.5rem;letter-spacing:-.01em;line-height:1.05}
.usp-step small{display:block;margin-top:7px;color:#9fb0c9;font-size:.92rem;line-height:1.45}
.usp-step::after{content:"";position:absolute;inset:auto 0 0 22px;height:2px;width:34px;background:#e8915a;border-radius:2px}
/* ---- discipline roles ---- */
.usp-roles{display:grid;gap:12px;margin-top:16px;list-style:none}
/* The discipline colour is carried by the ROW ITSELF, not by a stripe down its
left edge. This was a 4px full-height bar on a 14px-rounded bordered card —
the one shape the craft floor names outright, and the one that survives on a
page precisely because it looks like a decision. Fixed 2026-08-22.
What replaces it does more work than it did: the border and a low-alpha wash
both take the discipline hue, so the whole card is tinted rather than tagged,
and the tint is what changes on hover. The `i` chevron already carries
`--role` too, so the colour still reads at both ends of the row. */
.usp-role{
position:relative;display:flex;align-items:baseline;gap:10px;
padding:18px 20px;
border:1px solid color-mix(in srgb,var(--role,#e8915a) 34%,transparent);
border-radius:14px;
background:
linear-gradient(90deg,
color-mix(in srgb,var(--role,#e8915a) 11%,transparent),
transparent 42%),
rgba(255,255,255,.03);
color:#e7ebf4;text-decoration:none;overflow:hidden;
transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.usp-role:hover,.usp-role:focus-visible{
border-color:color-mix(in srgb,var(--role,#e8915a) 58%,transparent);
background:
linear-gradient(90deg,
color-mix(in srgb,var(--role,#e8915a) 18%,transparent),
transparent 48%),
rgba(255,255,255,.05);
}
.usp-role b{font-family:var(--display);font-size:1.35rem;letter-spacing:-.01em;color:#fff}
.usp-role span{color:#a9b7d0;font-size:1rem}
.usp-role i{margin-left:auto;color:var(--role,#e8915a);font-style:normal;font-weight:800;font-size:1.15rem;transform:translateX(-4px);opacity:0;transition:transform .28s var(--ease),opacity .28s var(--ease)}
.usp-role--civil{--role:#e8915a}
.usp-role--elec{--role:#c7e85a}
.usp-role--comp{--role:#5fa8e8}
.usp-band__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vw,40px)}
.usp-band .btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.usp-band .btn-ghost:hover{background:rgba(255,255,255,.08)}
@media(min-width:640px){
.usp-flow{grid-template-columns:repeat(2,1fr)}
.usp-roles{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:960px){
.usp-flow{grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden}
.usp-flow .usp-step{border:0;border-radius:0;border-right:1px solid rgba(255,255,255,.12)}
.usp-flow .usp-step:last-child{border-right:0}
}
/* ---- motion (only when enabled) ---- */
@media(prefers-reduced-motion:no-preference){
html.motion-ok .usp-band::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(46% 40% at 88% -12%,rgba(232,145,90,.22),transparent 60%);
animation:uspGlow 8s ease-in-out infinite;
}
html.motion-ok .usp-band>.wrap{position:relative;z-index:1}
}
@keyframes uspGlow{0%,100%{opacity:.4}50%{opacity:.9}}
.usp-step{transition:border-color .28s var(--ease)}
.usp-step:hover{border-color:rgba(232,145,90,.5)}
.usp-step:hover .usp-step__n{background:#e8915a;color:#0c1a38}
.usp-role{transition:background-color .28s var(--ease)}
.usp-role:hover{background:rgba(255,255,255,.07)}
.usp-role:hover i{transform:translateX(0);opacity:1}
/* Kinetic underline used on direct actions and filter controls. GSAP only
animates the custom property, keeping the underline on the compositor. */
.ice-kinetic{--ice-motion-line:0;position:relative}
.ice-kinetic::after{
content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;
background:currentColor;opacity:.72;pointer-events:none;
transform:scaleX(var(--ice-motion-line));transform-origin:left center;
}
/* Contrast fix: the page-level heading rules outrank .usp-band; force light-on-dark. */
.usp-band .sec-head h2,.usp-band h2{color:#fff!important}
.usp-band .course-kicker,.usp-band .label{color:#e8915a!important}
.usp-band .usp-band__head>p:last-child{color:#a9b7d0!important}
.usp-band .usp-step b{color:#fff!important}
.usp-band .usp-role b{color:#fff!important}
/* Per-card Digital Twin tag on the /courses program rows */
.prog-usp{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:.82rem;font-weight:750;line-height:1.35;color:var(--u,#D9702C);letter-spacing:.005em}
.prog-usp span{font-size:.66rem;line-height:1}
.prog-usp--civil{--u:#C15A22}
.prog-usp--comp{--u:#2B6CB0}
.prog-usp--elec{--u:#5F7D16}
html.motion-ok .prog-row:hover .prog-usp span{animation:uspSpark 1.8s ease-in-out infinite}
@keyframes uspSpark{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}
/* ==========================================================================
14 · Homepage editorial layout + taller chrome (2026-08-02)
========================================================================== */
/* Taller header. The 72px bar was set when the nav carried fewer items; at
88px the brand lockup and the tools dropdown both get room to breathe. */
@media (min-width:1024px){
:root{--nav-main-h:88px}
}
/* Section headings sit beside their content rather than stacked on top of it,
which is the one structural change that makes a long single-column page read
as composed. Applied to a named list of sections rather than .course-section
so the courses and degree pages, which share the class, are untouched. */
@media (min-width:1080px){
body.page-home :is(#programs,#admissions,#campus-tour,#facilities,#notices,#faq) > .wrap{
display:grid;
grid-template-columns:minmax(0,24rem) minmax(0,1fr);
gap:clamp(2rem,3.6vw,4.25rem);
align-items:start;
}
body.page-home :is(#programs,#admissions,#campus-tour,#facilities,#notices,#faq) > .wrap > .course-section__heading{
grid-column:1;grid-row:1;
position:sticky;
top:calc(var(--nav-main-h) + 1.75rem);
text-align:left;
margin:0;
max-width:none;
}
body.page-home :is(#programs,#admissions,#campus-tour,#facilities,#notices,#faq) > .wrap > *:not(.course-section__heading){
grid-column:2;
}
body.page-home :is(#programs,#admissions,#campus-tour,#facilities,#notices,#faq) > .wrap > .course-section__heading h2{
font-size:clamp(1.85rem,1.2rem + 1.5vw,2.6rem);line-height:1.12;
}
}
/* The desktop nav row runs past the viewport between about 1400px and 1560px —
41px past the edge at 1440, which clipped the CONTACT button on the most
common laptop width. The per-link padding clamp hits its 22px ceiling before
there is room for it, so tighten it just inside that band. */
@media (min-width:1200px) and (max-width:1560px){
nav.links>a:not(.nav-cta),
nav.links>a.active:not(.nav-cta),
.nav-item .nav-link{padding-inline:8px}
.nav-item .nav-caret{padding-inline:1px}
/* The affiliation lockup is the widest thing that is repeated verbatim in the
hero and the footer, so it is the right ~150px to give back on a laptop. */
.brand-block{min-width:0}
.brand-block .affiliation-mark{display:none}
/* ...but ≥1181px had already dropped the TU ribbon row on the grounds that
the brand block carries TU, so across this band the affiliation disappeared
from the header entirely. Give the row back here: it costs header height
rather than nav width, which is the dimension this band is short of. */
.tu-ribbon{display:flex}
:root{--tu-bar-h:30px}
}
/* Section eyebrows carry a line icon. Same stroke, same box, aligned on the
cap height rather than the baseline so the glyph sits with the text. */
.course-kicker{display:inline-flex;align-items:center;gap:.5em}
.course-kicker .section-icon{flex:none;opacity:.85;color:var(--ice-color-text-action)}
body.page-home :is(#programs,#admissions,#campus-tour,#facilities,#notices,#faq) > .wrap > .course-section__heading .course-kicker{display:flex}