.ch{--night:#ffffff;--night-2:#ffffff;--night-3:#ffffff;--ink:#0f1a2e;--dim:#3f4859;--faint:#5f6878;--line:#e5e1d9;--line-2:#d4cec3;--glow:#0c4da2;--glow-soft:rgba(228,179,22,0.121);--gold:#E4B316;--cream:#0c4da2;--glass:linear-gradient(180deg, rgba(60,44,16,0.044), rgba(60,44,16,0.016));--glass-b:#e5e1d9}
.ch .ch-strip{--night:#0c4da2;--night-2:#0c4da2;--night-3:#0c4da2;--ink:#ffffff;--dim:rgba(255,255,255,0.84);--faint:rgba(255,255,255,0.84);--line:rgba(255,255,255,0.208);--line-2:rgba(255,255,255,0.364);--glow:#f6ce50;--glow-soft:rgba(0,20,60,0.165);--gold:#E4B316;--cream:#ffffff;--glass:linear-gradient(180deg, rgba(255,255,255,0.132), rgba(255,255,255,0.048));--glass-b:rgba(255,255,255,0.234)}
html.lt #hero, html.lt .hp-hero{--night:#0b0910;--night-2:#120d16;--night-3:#1a1320;--ink:#f6efe9;--dim:rgba(246,239,233,.62);--faint:rgba(246,239,233,.38);--line:rgba(255,222,196,.22);--line-2:rgba(255, 222, 196, .28);--glow:#ffd6a8;--glow-soft:rgba(255, 200, 140, .55);--gold:#E4B316;--cream:#f3e7dc;--glass:linear-gradient(180deg, rgba(255, 240, 232, .11), rgba(255, 240, 232, .04));--glass-b:rgba(255, 240, 230, .18)}
html.lt .ch-tk, html.lt .ch-strip, html.lt .ch-foot{--night:#0c4da2;--night-2:#0c4da2;--night-3:#0c4da2;--ink:#ffffff;--dim:rgba(255,255,255,0.84);--faint:rgba(255,255,255,0.84);--line:rgba(255,255,255,0.208);--line-2:rgba(255,255,255,0.364);--glow:#f6ce50;--glow-soft:rgba(0,20,60,0.165);--gold:#E4B316;--cream:#ffffff;--glass:linear-gradient(180deg, rgba(255,255,255,0.132), rgba(255,255,255,0.048));--glass-b:rgba(255,255,255,0.234)}
html.lt #camber, html.lt .hp-camber{--night:#071f42;--night-2:#0b2b58;--night-3:#0b2b58;--ink:#f2f5fa;--dim:rgba(242,245,250,0.8);--faint:rgba(242,245,250,0.8);--line:rgba(200,220,255,0.16);--line-2:rgba(200,220,255,0.28);--glow:#f6ce50;--glow-soft:rgba(120,170,255,0.275);--gold:#E4B316;--cream:#ffffff;--glass:linear-gradient(180deg, rgba(200,220,255,0.11), rgba(200,220,255,0.04));--glass-b:rgba(200,220,255,0.18)}
/* Layout fixes, both modes */
/* Programme section bar: below 1100 px the price and Apply button (both already on the page) leave, so the section links fit on one line */
@media (max-width: 1099px) { .pg-bar-r { display: none; } }
.pg-bar li a { white-space: nowrap; }
/* The menu sheet on phones was still see-through (its phone rule had no blur to catch): solid in both modes */
.nm-sheet { background: #120d16; }
html.lt .nm-sheet { background: #fff; }
/* Programme section bar: the Apply label sat at the top of its button */
.pg .pg-bar-r .dk-btn { display: inline-flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; }
/* Header at 1180 to 1359 px: the Light | Dark control shows its icons only, so the header fits */
@media (min-width: 1180px) and (max-width: 1359px) { .ch-mode span { display: none; } }
/* The site header looks the same in light and dark: SRM blue strip, white bar, colour logo */
.ch-logo .lg-dk { display: none; }
.ch-logo .lg-lt { display: inline; }
html:root .ch-strip, html:root.ch-up .ch-strip { background: #0c4da2; }
html:root .ch-bar::before { background: #fff; border-color: rgba(15, 26, 46, .06); box-shadow: 0 1px 2px rgba(15, 26, 46, .06), 0 12px 32px rgba(15, 26, 46, .16); }
html:root .ch-mode button[aria-pressed="true"] { background: #0c4da2; color: #fff; }
html:root .ch-strip .ch-gold, html:root .ch-strip .ch-gold:hover { color: #f6ce50; }
html:root .ch :focus-visible { outline-color: #0c4da2; }
html:root .ch .ch-strip :focus-visible { outline-color: #f6ce50; }
/* SRM gold: a line under the top strip, the hero's forms-open chip, the Admissions 2027 label in the announcements bar */
header.ch .ch-strip { box-shadow: inset 0 -3px 0 #e4b316; }
.desk #hero .chip, #main .hp-chip { background: #e4b316; border-color: #e4b316; color: #1a1218; }
.desk #hero .chip b, #main .hp-chip b { background: #1a1218; box-shadow: none; }
#main .ch-tk .ch-tk-label, .desk #hero .ch-tk .ch-tk-label { align-self: center; justify-self: start; height: auto; padding: calc(5 * var(--u, 1px)) calc(11 * var(--u, 1px)); border-radius: 99px; background: #e4b316; color: #1a1218; }
#main .ch-tk .ch-tk-label i, .desk #hero .ch-tk .ch-tk-label i { background: #1a1218; box-shadow: none; }
/* Laptop hero fits the window, so the announcements bar shows without scrolling: the photo loses sky from the top, the title sits above the bar */
.desk #hero { height: clamp(600px, calc(100vh / var(--z, 1)), 900px); overflow: hidden; }
.desk #hero canvas { top: auto; bottom: 0; }
.desk #hero .h1 { top: auto; bottom: calc(48px / var(--z, 1) + 44px); }
/* Phones and tablets: the hero photo gives up sky so the announcements bar shows on the first screen too */
@media (max-width: 1179px) { .hp-art img { min-height: 260px; max-height: calc(100vh - 125px); max-height: calc(100svh - 125px); object-fit: cover; object-position: 50% 100%; } }
@media (max-width: 699px) { .hp-hero { padding-bottom: 28px; } .hp-art img { max-height: calc(100vh - 230px); max-height: calc(100svh - 230px); } }

/* home, tablets and small laptops: the "I am" switch goes under its heading, clear of the floating buttons */
@media (min-width: 861px) and (max-width: 1279px) { .nd-top { flex-direction: column; align-items: flex-start; } }
/* home founders card: the poster crop keeps its words */
@media (min-width: 561px) { .st-dh img { object-position: 82% 50%; } }
.find input { text-overflow: ellipsis; }
.dk-h2, .ch-fh { text-wrap: balance; }
/* Larger text: the laptop homepage poster and the header keep their own scale, so nothing runs off the side */
html.nm-t3 .desk { zoom: calc(var(--z, 1) / 1.14); }
html.nm-t3 body > header.ch { zoom: calc(1 / 1.14); }
/* the ticker label is never under 12 px */
@media (max-width: 1179px) { .ch-tk .ch-tk-label { font-size: 12px; } }

/* Access, both modes: a strong focus ring, voice for Ask SRM, read-aloud */
:focus-visible { outline: 3px solid #ffd6a8; outline-offset: 2px; }
html.lt :focus-visible { outline-color: #0c4da2; }
/* light mode: gold on the blue footer and ticker and on dark photo bands; SRM blue wherever a section mapped the ring to a pale border colour */
html.lt :is(.ch-foot, .ch-tk, .desk #hero, .desk #camber, .hp-camber) :focus-visible { outline-color: #f6ce50; }
html.lt :is(.cx, .nd, .gl, .mx, .st) :is(a, button, input):focus-visible, html:root .ch-mode button:focus-visible { outline-color: #0c4da2; }
/* text boxes and menus: a clear blue edge while typing (their own outline is off) */
html.lt :is(.dk-field, .sch-form, .nm-field, .ask-field):focus-within, html.lt :is(#ad-enq, .ck-form) :is(input, select, textarea):focus { border-color: #0c4da2 !important; box-shadow: 0 0 0 1px #0c4da2 !important; }

/* Ask SRM: mic, language and Listen */
.ask-mic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ask-line); border-radius: 11px; background: none; color: var(--ask-ink); cursor: pointer; }
.ask-mic:hover { border-color: var(--ask-ink); }
.ask-mic[aria-pressed="true"] { background: #e4b316; border-color: #e4b316; color: #1a1218; }
.ask-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 2px 0; font-size: 13px; color: var(--ask-faint); }
.ask-vseg { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-vseg button { min-height: 34px; padding: 0 11px; border: 1px solid var(--ask-line); border-radius: 9px; background: none; color: var(--ask-ink); font: 500 13.5px var(--ask-f); cursor: pointer; }
.ask-vseg button[aria-pressed="true"] { background: var(--ask-cream); border-color: transparent; color: #1a1218; }
.ask-vstat { flex-basis: 100%; color: var(--ask-ink); }
.ask-vstat:empty { display: none; }
.ask-lrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.ask-listen { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px 0 10px; border: 1px solid var(--ask-line); border-radius: 10px; background: none; color: var(--ask-ink); font: 500 13.5px var(--ask-f); cursor: pointer; }
.ask-listen[aria-pressed="true"] { background: var(--ask-cream); border-color: transparent; color: #1a1218; }
.ask-lnote { font-size: 13px; color: var(--ask-faint); }
html.lt .ask-vseg button[aria-pressed="true"], html.lt .ask-listen[aria-pressed="true"] { background: #0c4da2; color: #fff; }

/* Read page aloud */
.lsn-now { outline: 3px solid #ffd6a8; outline-offset: 5px; border-radius: 3px; }
html.lt .lsn-now { outline-color: #0c4da2; }
.lsn-bar { position: fixed; z-index: 990; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); padding: 7px 7px 7px 16px; border-radius: 14px; border: 1px solid rgba(255, 240, 230, .18); background: #17121c; color: #f6efe9; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); font: 500 15px/1.3 var(--f); }
.lsn-bar[hidden] { display: none; }
.lsn-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e4b316; }
.lsn-bar button { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: #f3e7dc; color: #1a1218; font: 500 15px var(--f); cursor: pointer; }
html.lt .lsn-bar { background: #0f1a2e; border-color: transparent; color: #fff; box-shadow: 0 12px 32px rgba(15, 26, 46, .3); }
html.lt .lsn-bar button { background: #fff; color: #0f1a2e; }
/* on phones, above the Ask SRM button */
@media (max-width: 699px) { .lsn-bar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* Listen button: above Ask SRM on laptops and tablets; phones use the menu's Display settings and the Stop bar */
.lsn-fab { position: fixed; z-index: 41; right: 160px; bottom: 24px; display: none; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 15px; border: 1px solid rgba(255, 240, 230, .2); border-radius: 999px; background: #17121c; color: #f6efe9; font: 500 15px var(--f, Geist, sans-serif); box-shadow: 0 10px 28px rgba(0, 0, 0, .4); cursor: pointer; }
.lsn-fab:hover { border-color: rgba(255, 240, 230, .45); }
.lsn-fab[aria-pressed="true"] { background: #e4b316; border-color: #e4b316; color: #1a1218; }
html.lt .lsn-fab { background: #fff; border-color: rgba(15, 26, 46, .12); color: #0f1a2e; box-shadow: 0 8px 24px rgba(15, 26, 46, .14); }
html.lt .lsn-fab[aria-pressed="true"] { background: #e4b316; border-color: #e4b316; color: #1a1218; }
html.ask-on .ask-panel:not([hidden]) ~ .lsn-fab { display: none; }
@media (min-width: 860px) { .lsn-fab { display: inline-flex; } .lsn-bar { display: none !important; } }
@media print { .lsn-fab, .lsn-bar { display: none !important; } }
/* text boxes inside a field: the field's own edge shows focus, so the box inside draws no second ring */
html:root :is(.dk-field, .sch-form, .nm-field, .ask-field) :is(input, textarea):focus-visible, html:root .ask-ui .ask-field textarea:focus-visible { outline: none; }

/* Light mode: hand-set rules on top of the automatic html.lt twins (theme.py). Loaded last, in css/theme.css. */
html.lt { color-scheme: light; }
/* sections: white and ivory in turn; the Newsroom is a navy feature band */
html.lt body, html.lt .desk { background: #fff; }
html.lt section[aria-labelledby^="mx-rk"], html.lt section[aria-labelledby^="gl-h"], html.lt .desk #adm, html.lt .hp-adm { background: #f8f6f2; }
html.lt section[aria-labelledby^="cx-h"], html.lt section[aria-labelledby^="st-h"], html.lt section[aria-labelledby^="mx-ev"] { background: #fff; }
/* eyebrow dots in SRM gold, no glow */
html.lt .dk-eyebrow::before, html.lt .desk .eyebrow:before, html.lt .cx .eb::before, html.lt .hp-rail li::before, html.lt .ch-col h3::before, html.lt .nm-ht::before { background: #e4b316; box-shadow: none; }
/* cards: white on ivory, a hairline and a soft shadow */
html.lt .dk-glass, html.lt .desk .lab.glass { background: #fff; box-shadow: 0 1px 2px rgba(15, 26, 46, .05), 0 10px 30px rgba(15, 26, 46, .06); }
html.lt .mx-eleven .th { color: #0c4da2; }
html.lt .cx .groups a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* photos stay as shot */
html.lt .gl-pic img, html.lt .mx-evpic img { filter: none; }
html.lt .hp-pano::after { background: none; }
/* Newsroom band */
html.lt .desk #camber, html.lt .hp-camber { background: #0b1f3d; }
html.lt .desk #camber :is(.big, .body, .nt, .nm, h2, h3, p, li, span, time) { color: #f3f5f9; }
html.lt .desk #camber .eyebrow, html.lt .hp-camber .dk-eyebrow { color: #f6ce50; }
html.lt .hp-camber :is(.hp-big, .hp-body, .nt, .nm, h2, h3, p, li, span, time) { color: #f3f5f9; }
/* admissions card */
html.lt .desk #adm .panel, html.lt .hp-card.dk-glass { background: #fff; border: 1px solid rgba(15, 26, 46, .07); box-shadow: 0 2px 4px rgba(15, 26, 46, .05), 0 24px 60px rgba(15, 26, 46, .14); }
/* Newsroom on phones and tablets: the car photo's dusk ground blends into the navy band */
html.lt .hp-car img { mix-blend-mode: lighten; }
/* card photos as shot, no fade */
html.lt .dep-nph::after, html.lt .dep-pane::after, html.lt .pg-endph::after { background: none; }
/* Display switches: grey when off, SRM blue when on, white knob */
html.lt .nm-sw i { background: #cdc7bc; }
html.lt .nm-sw i::after { background: #fff; box-shadow: 0 1px 2px rgba(15, 26, 46, .3); }
html.lt .nm-sw[aria-checked="true"] i { background: #0c4da2; }
html.lt .nm-sw[aria-checked="true"] i::after { background: #fff; }
/* checklist ticks in SRM blue; the What do you need? row on ivory */
html.lt .pl-steps input { accent-color: #0c4da2; }
html.lt section[aria-labelledby^="nd-h"] { background: #f8f6f2; }

/* review 6 Nov: the decorative dot and scan line read as a stray mark and a crack on white; photo captions on phones get a stronger wash */
html.lt .dep-photo::before { display: none; }
html.lt .dk-scan { display: none; }
@media (max-width: 860px) { html.lt main .pg-pane .pg-tint { background: linear-gradient(180deg, rgba(60,44,16,.036), rgba(255,255,255,0) 42%, rgba(255,255,255,.9) 68%, rgba(255,255,255,.97)); } }
/* finder sort menus: the arrow in ink, not cream on white */
html.lt .pf-sort select, html.lt .pf-mbar select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6577' stroke-width='1.4'/%3E%3C/svg%3E"); }
/* home programme search: the hint in the same soft grey as the site's other search boxes */
html.lt .find input::placeholder { color: #5f6878; }