/* Plasma University public website - shared styles */
:root {
  --navy: #0d4c80;
  --navy-2: #2858a8;
  --crimson: #1484b8;
  --crimson-2: #1898c8;
  --silver: #8d96a3;
  --gold: #f8c650;
  --gold-2: #fbd77a;
  --red: #d42a2a;
  --sky: #1898c8;
  --cream: #eef7fc;
  --paper: #ffffff;
  --ink: #1b2533;
  --ink-2: #4a5566;
  --ink-3: #7a8494;
  --line: #dbe9f2;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(14, 34, 64, .10);
  --wrap: 1200px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--crimson); text-decoration: none; }
a:hover { color: var(--crimson-2); }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--ink-2); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); margin-bottom: .8em; }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 720px; }
.section { padding: 88px 0; }
.section.alt { background: var(--cream); }
.section.dark { background: var(--navy); color: #dfe6f1; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark p { color: #c3d0ea; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head p { margin: 0; max-width: 560px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 2px solid transparent; transition: .2s; cursor: pointer; }
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-2); color: #fff; transform: translateY(-1px); }
.btn-outline { border-color: currentColor; color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--cream); color: var(--navy); }
.btn-ghost-light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: var(--navy); }
.link-arrow { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.link-arrow::after { content: "\2192"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }

/* top utility bar */
.topbar { background: var(--navy); color: #c3d0ea; font-size: .82rem; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 16px; }
.topbar a { color: #dfe6f1; }
.topbar a:hover { color: #fff; }
.topbar .tb-links { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar .tb-contact { display: flex; gap: 18px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 20px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.brand img { width: 54px; height: auto; }
.brand-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; line-height: 1.05; }
.brand-name small { display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--crimson); font-weight: 700; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--ink); font-weight: 500; font-size: .95rem; padding: 10px 14px; border-radius: 8px; }
.nav a:hover, .nav a.active { color: var(--crimson); background: rgba(24,152,200,.06); }
.nav .btn { margin-left: 10px; padding: 11px 20px; }
.nav .btn-primary { color: #fff; background: var(--crimson); }
.nav .btn-primary:hover { background: var(--crimson-2); color: #fff; }
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; color: var(--navy); }
.menu-toggle span { display: block; height: 2px; background: currentColor; margin: 6px 8px; border-radius: 2px; transition: .2s; }

/* hero */
.hero { position: relative; color: #fff; min-height: 640px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(100deg, rgba(13,76,128,.94) 0%, rgba(13,76,128,.78) 45%, rgba(13,76,128,.35) 100%), var(--hero-img, none) center/cover no-repeat, linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--crimson) 140%); }
.hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 520px; height: 520px; border-radius: 50%; border: 60px solid rgba(255,255,255,.05); }
.hero .wrap { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 80px; }
.hero h1 { color: #fff; max-width: 780px; }
.hero h1 em { font-style: normal; color: var(--gold-2); }
.hero p { color: #d6deea; font-size: 1.2rem; max-width: 620px; }
.hero .eyebrow { color: var(--gold-2); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.page-hero { min-height: 380px; }
.page-hero .wrap { padding-top: 70px; padding-bottom: 70px; }
.crumbs { font-size: .85rem; color: #c3d0ea; margin-bottom: 14px; }
.crumbs a { color: #fff; }

/* quick links strip */
.quick { margin-top: -56px; position: relative; z-index: 5; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.quick-item { padding: 26px 24px; border-right: 1px solid var(--line); color: var(--ink); display: flex; gap: 16px; align-items: flex-start; transition: background .2s; }
.quick-item:last-child { border-right: 0; }
.quick-item:hover { background: var(--cream); color: var(--ink); }
.quick-item .ic { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(24,152,200,.08); color: var(--crimson); }
.quick-item strong { display: block; color: var(--navy); font-size: 1.02rem; }
.quick-item span { font-size: .88rem; color: var(--ink-3); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 10px; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 3.2rem); color: #fff; line-height: 1; }
.stat span { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: #c3d0ea; }

/* split / about */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.media { border-radius: var(--radius); min-height: 420px; box-shadow: var(--shadow); position: relative; overflow: hidden;
  background: var(--img, none) center/cover no-repeat, linear-gradient(135deg, var(--navy-2), var(--crimson)); }
.media .badge { position: absolute; left: 22px; bottom: 22px; background: #fff; border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); }
.media .badge b { font-family: var(--serif); font-size: 1.8rem; color: var(--crimson); display: block; line-height: 1; }
.media .badge span { font-size: .8rem; color: var(--ink-3); }
.checks { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; }
.checks li { padding-left: 30px; position: relative; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--crimson) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* cards */
.grid { display: grid; gap: 24px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card-img { aspect-ratio: 16/10; background: var(--img, none) center/cover no-repeat, linear-gradient(135deg, var(--navy-2), var(--crimson)); position: relative; }
.card-img .tag { position: absolute; top: 14px; left: 14px; background: var(--crimson); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }
.card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card-body p { font-size: .95rem; }
.card-body .meta { font-size: .8rem; color: var(--ink-3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
.card-body .link-arrow { margin-top: auto; }
.faculty { padding: 30px 26px; border-top: 4px solid var(--crimson); }
.faculty .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--cream); color: var(--crimson); display: grid; place-items: center; margin-bottom: 18px; }
.faculty ul { list-style: none; padding: 0; margin: 0 0 18px; font-size: .9rem; color: var(--ink-2); }
.faculty li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.faculty li:last-child { border-bottom: 0; }

/* campuses */
.campus { padding: 22px 24px; display: flex; gap: 16px; align-items: center; }
.campus .pin { flex: 0 0 44px; height: 44px; border-radius: 50%; background: rgba(13,76,128,.07); color: var(--navy); display: grid; place-items: center; }
.campus strong { display: block; color: var(--navy); }
.campus span { font-size: .87rem; color: var(--ink-3); }
.campus.main { background: var(--navy); border-color: var(--navy); }
.campus.main strong { color: #fff; }
.campus.main span { color: #c3d0ea; }
.campus.main .pin { background: var(--crimson); color: #fff; }

/* events */
.event { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.event:first-child { padding-top: 0; }
.event .date { flex: 0 0 72px; text-align: center; background: var(--crimson); color: #fff; border-radius: 12px; padding: 10px 6px; }
.event .date b { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
.event .date span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.event h4 { font-family: var(--sans); font-size: 1.05rem; margin-bottom: 4px; }
.event p { margin: 0; font-size: .9rem; }

/* quote / leadership */
.quote { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.8rem); color: var(--navy); line-height: 1.45; border-left: 4px solid var(--crimson); padding-left: 28px; margin: 0 0 20px; }
.person { display: flex; align-items: center; gap: 14px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--img, none) center/cover, linear-gradient(135deg, var(--navy-2), var(--crimson)); }

/* CTA */
.cta { background: linear-gradient(120deg, var(--crimson) 0%, #0a2463 100%); color: #fff; border-radius: 22px; padding: 56px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta h2 { color: #fff; margin-bottom: 8px; }
.cta p { color: #dbe6fb; margin: 0; max-width: 560px; }

/* program table / filters */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink-2); padding: 9px 16px; border-radius: 999px; font-size: .9rem; cursor: pointer; font-family: var(--sans); }
.chip.on, .chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.prog { padding: 22px 24px; }
.prog .lvl { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--crimson); }
.prog h3 { font-family: var(--sans); font-size: 1.05rem; margin: 6px 0 8px; }
.prog .facts { display: flex; gap: 14px; font-size: .85rem; color: var(--ink-3); margin-top: auto; }

/* steps */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; position: relative; }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--serif); font-size: 2.4rem; color: rgba(24,152,200,.18); position: absolute; right: 20px; top: 14px; }

/* contact */
.form { display: grid; gap: 16px; }
.form label { font-size: .85rem; font-weight: 600; color: var(--navy); display: grid; gap: 6px; }
.form input, .form select, .form textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid rgba(24,152,200,.25); border-color: var(--crimson); }
.info-row { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-row .ic { flex: 0 0 42px; height: 42px; border-radius: 10px; background: var(--cream); color: var(--crimson); display: grid; place-items: center; }
.info-row strong { display: block; color: var(--navy); }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.gallery div { border-radius: 12px; background: var(--img, none) center/cover no-repeat, linear-gradient(135deg, var(--navy-2), var(--crimson)); }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }

/* footer */
.site-footer { background: #0a3d68; color: #a9b8d6; padding: 72px 0 0; font-size: .92rem; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer a { color: #c3d0ea; }
.site-footer a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.foot-brand img { width: 64px; }
.foot-brand b { font-family: var(--serif); color: #fff; font-size: 1.3rem; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; }
.socials a:hover { background: var(--crimson); border-color: var(--crimson); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 56px; padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; }

.svg-ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* responsive */
@media (max-width: 1080px) {
  .g4, .steps { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav a { padding: 10px 10px; font-size: .9rem; }
}
@media (max-width: 920px) {
  .menu-toggle { display: block; }
  .nav { position: fixed; inset: 82px 0 auto 0; background: #fff; flex-direction: column; align-items: stretch; padding: 12px 24px 24px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); transform: translateY(-120%); transition: transform .3s; max-height: calc(100vh - 82px); overflow: auto; }
  .nav.open { transform: none; }
  .nav a { padding: 14px 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav .btn { margin: 14px 0 0; justify-content: center; }
  .split, .g3, .g2 { grid-template-columns: 1fr; }
  .quick-grid, .stats { grid-template-columns: repeat(2, 1fr); }
  .quick-item:nth-child(2) { border-right: 0; }
  .quick-item { border-bottom: 1px solid var(--line); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .topbar .tb-links { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .section { padding: 64px 0; }
  .g4, .steps, .quick-grid, .foot-grid { grid-template-columns: 1fr; }
  .quick-item { border-right: 0; }
  .hero { min-height: 560px; }
  .cta { padding: 36px 24px; }
  .brand-name { font-size: 1.15rem; }
  .topbar .tb-contact span { display: none; }
}

/* blue + gold brand accents (official Plasma University colours) */
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-2); color: var(--navy); transform: translateY(-1px); }
.hero .eyebrow, .stat b { color: var(--gold); }
.hero h1 em { color: var(--gold-2); }
.faculty { border-top-color: var(--gold); }
.event .date { background: var(--navy); border-bottom: 4px solid var(--gold); }
.step::before { color: rgba(248,198,80,.35); }
.media .badge b { color: var(--navy); }
.media .badge { border-left: 4px solid var(--gold); }
.campus.main .pin { background: var(--gold); color: var(--navy); }
.card-img .tag { background: var(--gold); color: var(--navy); }
.quote { border-left-color: var(--gold); }
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.topbar { border-bottom: 3px solid var(--gold); }
.anniv { display: inline-flex; align-items: center; gap: 10px; background: rgba(248,198,80,.14); border: 1px solid rgba(248,198,80,.5); color: var(--gold-2); padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; margin-bottom: 18px; }
.anniv b { font-family: var(--serif); font-size: 1.05rem; color: var(--gold); }
/* header fit on laptop widths */
.nav a { white-space: nowrap; }
.brand-name, .brand-name small { white-space: nowrap; }
.anniv { display: flex; width: fit-content; max-width: 100%; }
@media (max-width: 1240px) { .nav a { padding: 10px 9px; font-size: .9rem; } .nav .btn { margin-left: 6px; padding: 10px 16px; } }
@media (max-width: 560px) { .topbar .tb-contact a[href^="mailto"] { display: none; } .topbar .wrap { justify-content: center; } }
.hero .wrap { width: 100%; }
.site-footer p { color: #a9b8d6; }
.promo { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s; }
.promo:hover { transform: translateY(-3px); }
.promo img { width: 100%; height: auto; }
.brand img { width: 64px; }
/* logo palette: sky blue #1898c8, gold #f8c650, shield blue #2858a8, red outline #d42a2a */
.topbar { background: var(--navy); border-bottom: 3px solid var(--gold); box-shadow: 0 3px 0 var(--red) inset; }
.hero { background: linear-gradient(100deg, rgba(13,76,128,.95) 0%, rgba(24,152,200,.80) 55%, rgba(24,152,200,.40) 100%), var(--hero-img, none) center/cover no-repeat, linear-gradient(135deg, var(--navy) 0%, var(--sky) 100%); }
.section.dark { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 100%); }
.cta { background: linear-gradient(120deg, var(--sky) 0%, var(--navy-2) 100%); }
.card-img, .media, .gallery div { background-color: var(--sky); }
.event .date { background: var(--sky); }
.site-footer { border-top: 4px solid var(--gold); }
.foot-bottom { border-top-color: rgba(255,255,255,.12); }
.brand-name small { color: var(--red); }
.eyebrow { color: var(--crimson); }
.card-img .tag { background: var(--gold); color: var(--navy); }
/* ===== App mode on phones (PWA): bottom tab bar, compact header; laptop/PC unchanged ===== */
.appbar, .install-banner { display: none; }
@media (max-width: 768px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .appbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(13,76,128,.10); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .appbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-3); font-size: .7rem; font-weight: 600; padding: 4px 0; border-radius: 10px; -webkit-tap-highlight-color: transparent; }
  .appbar a .svg-ic { width: 23px; height: 23px; }
  .appbar a.on { color: var(--crimson); }
  .appbar a.appbar-main .svg-ic { width: 48px; height: 48px; padding: 12px; margin-top: -22px; border-radius: 50%; background: var(--gold); color: var(--navy); box-shadow: 0 6px 16px rgba(248,198,80,.55); border: 3px solid #fff; }
  .appbar a.appbar-main { color: var(--navy); }
  .topbar { display: none; }
  .site-header .wrap { min-height: 64px; }
  .brand img { width: 48px; }
  .nav { inset: 64px 0 auto 0; max-height: calc(100vh - 64px - 70px); }
  .hero { min-height: 0; }
  .hero .wrap { padding-top: 44px; padding-bottom: 72px; }
  .install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 61; background: #fff; border-radius: 16px; box-shadow: 0 12px 34px rgba(13,76,128,.25); padding: 12px 14px; align-items: center; gap: 12px; border-left: 4px solid var(--gold); }
  .install-banner:not([hidden]) { display: flex; }
  .install-banner img { width: 44px; height: 44px; border-radius: 10px; }
  .install-banner div { flex: 1; min-width: 0; }
  .install-banner b { display: block; color: var(--navy); font-size: .92rem; }
  .install-banner span { font-size: .8rem; color: var(--ink-3); }
  .install-banner .btn { padding: 9px 16px; font-size: .85rem; }
  .install-x { background: none; border: 0; font-size: 1.5rem; color: var(--ink-3); cursor: pointer; padding: 0 4px; }
}
/* opened from the home screen icon: feels like a native app */
@media (display-mode: standalone) {
  .topbar { display: none; }
  body { -webkit-user-select: none; user-select: none; overscroll-behavior-y: contain; }
  input, textarea, select, p, h1, h2, h3 { -webkit-user-select: text; user-select: text; }
}
/* ===== v2: many pages - dropdown menu, article pages, illustrations ===== */
.nav .dd{position:relative}
.nav .dd > a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin:0 0 3px 7px;opacity:.6}
.nav .dd-menu{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:8px;display:none;z-index:70}
.nav .dd:hover .dd-menu,.nav .dd:focus-within .dd-menu{display:grid}
.nav .dd-menu a{padding:8px 12px;font-size:.9rem;border-radius:6px;white-space:nowrap}
.nav .dd-menu a:hover{background:var(--cream)}
.nav .dd-menu.wide{grid-template-columns:1fr 1fr;min-width:480px}
@media (max-width:920px){.nav .dd-menu{position:static;display:grid;box-shadow:none;border:0;padding:0 0 6px 14px;min-width:0}.nav .dd-menu.wide{grid-template-columns:1fr;min-width:0}.nav .dd > a::after{display:none}.nav .dd-menu a{border-bottom:0;padding:8px 6px;font-size:.88rem;color:var(--ink-2)}}
.page-hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.page-hero .hero-art svg{width:100%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.25));border-radius:22px}
@media (max-width:920px){.page-hero .wrap{grid-template-columns:1fr}.page-hero .hero-art{display:none}}
.art svg{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow)}
.prose p{font-size:1.02rem}
.prose h2{margin-top:.2em}
.split.flip > :first-child{order:2}
@media (max-width:920px){.split.flip > :first-child{order:0}}
.ic-card{padding:26px 24px}
.ic-card .ic{width:50px;height:50px;border-radius:14px;background:var(--cream);color:var(--crimson);display:grid;place-items:center;margin-bottom:16px}
.ic-card h3{font-family:var(--sans);font-size:1.06rem;margin-bottom:6px}
.ic-card p{font-size:.94rem;margin:0}
.ic-card .tag{display:inline-block;margin-top:12px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);background:var(--gold-2);padding:3px 9px;border-radius:999px}
.timeline{position:relative;margin:10px 0 0;padding-left:28px;border-left:3px solid var(--line)}
.timeline .ti{position:relative;padding:0 0 26px}
.timeline .ti::before{content:"";position:absolute;left:-37px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 2px var(--crimson)}
.timeline .ti b{font-family:var(--serif);font-size:1.3rem;color:var(--crimson);display:block}
.timeline .ti h4{font-family:var(--sans);font-size:1.02rem;margin:2px 0 4px}
.timeline .ti p{margin:0;font-size:.95rem}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:600;color:var(--navy);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--crimson);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 16px;margin:0}
.note-box{border-left:4px solid var(--gold);background:var(--cream);padding:18px 22px;border-radius:0 12px 12px 0}
.note-box b{color:var(--navy);display:block;margin-bottom:4px}
.section-nav{background:var(--cream);border-radius:var(--radius);padding:22px}
.section-nav h4{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson);margin-bottom:10px}
.section-nav .links{display:flex;flex-wrap:wrap;gap:8px}
.section-nav .links a{background:#fff;border:1px solid var(--line);color:var(--navy);padding:7px 14px;border-radius:999px;font-size:.88rem;font-weight:500}
.section-nav .links a.on,.section-nav .links a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.sources{font-size:.85rem;color:var(--ink-3)}
.sources a{word-break:break-all}
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px}
.sitemap-grid h3{font-family:var(--sans);font-size:1rem;border-bottom:2px solid var(--gold);padding-bottom:6px}
.sitemap-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}/* v2 nav: 8 menus must fit on laptop widths */


@media (max-width:920px){.nav:not(.open){transform:translateY(calc(-100% - 120px))}}
@media (max-width:920px){.page-hero .hero-art{display:block;max-width:420px;margin-top:8px}}
.ic-card .tag,.ic-card .link-arrow{align-self:flex-start}

/* ===== v3 (2026-10-20): real photos from the university Facebook page ===== */
.page-hero.has-photo{min-height:460px}
.page-hero.has-photo .hero-art{display:none}
.page-hero.has-photo .wrap{grid-template-columns:1fr}
.page-hero.has-photo .wrap > div:first-child{max-width:760px}
.hero-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 22px 50px rgba(0,0,0,.3);border:6px solid rgba(255,255,255,.9)}
/* photo mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.mosaic a{position:relative;border-radius:14px;overflow:hidden;background:var(--img) center/cover no-repeat,var(--sky);display:block}
.mosaic a.big{grid-column:span 2;grid-row:span 2}
.mosaic a.wide{grid-column:span 2}
.mosaic a span{position:absolute;inset:auto 0 0 0;padding:28px 14px 10px;color:#fff;font-size:.82rem;line-height:1.3;background:linear-gradient(transparent,rgba(5,30,55,.85));opacity:0;transform:translateY(8px);transition:.25s}
.mosaic a:hover span,.mosaic a.big span{opacity:1;transform:none}
.mosaic a::after{content:"";position:absolute;inset:0;background:rgba(13,76,128,0);transition:.25s}
.mosaic a:hover::after{background:rgba(13,76,128,.12)}
@media (max-width:920px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}}
/* full gallery */
.gfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}
.gf{border:1px solid var(--line);background:#fff;color:var(--navy);padding:9px 16px;border-radius:999px;font:600 .9rem var(--sans);cursor:pointer}
.gf.on,.gf:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.gcount{margin-left:auto;color:var(--ink-3);font-size:.9rem}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ggrid .gi{display:block;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--cream)}
.ggrid .gi img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.ggrid .gi:hover img{transform:scale(1.06)}
.ggrid .gi.hide{display:none}
/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(4,18,34,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.lb.open{display:flex}
.lb img{max-width:min(1200px,94vw);max-height:78vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb p{color:#dfe6f1;max-width:900px;text-align:center;margin:14px 0 0;font-size:.95rem}
.lb button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:26px;cursor:pointer}
.lb button:hover{background:var(--gold);color:var(--navy)}
.lb .x{top:18px;right:18px}.lb .pv{left:18px;top:50%}.lb .nx{right:18px;top:50%}
.lb .n{color:#8fa4bf;font-size:.8rem;margin-top:6px}
/* photo cards on the home page */
.card-img{background-size:cover!important}
.photo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.photo-strip div{aspect-ratio:1;background:var(--img) center/cover no-repeat}
@media (max-width:920px){.photo-strip{grid-template-columns:repeat(3,1fr)}}
.feature-band{position:relative;color:#fff;background:linear-gradient(90deg,rgba(13,76,128,.95),rgba(13,76,128,.55)),var(--img) center/cover no-repeat;border-radius:22px;padding:64px 56px;overflow:hidden}
.feature-band h2{color:#fff}.feature-band p{color:#d6deea;max-width:620px}
.feature-band .eyebrow{color:var(--gold)}
.feature-band .nums{display:flex;gap:40px;margin:22px 0 26px;flex-wrap:wrap}
.feature-band .nums b{display:block;font:700 2.4rem var(--serif);color:var(--gold-2);line-height:1}
.feature-band .nums span{font-size:.85rem;color:#c3d0ea;text-transform:uppercase;letter-spacing:.08em}
@media (max-width:640px){.feature-band{padding:40px 24px}}
.hero{background:linear-gradient(100deg,rgba(8,40,78,.93) 0%,rgba(13,76,128,.74) 42%,rgba(13,76,128,.18) 100%),var(--hero-img,none) center/cover no-repeat,linear-gradient(135deg,var(--navy) 0%,var(--sky) 100%)}
@media (max-width:920px){.hero{background:linear-gradient(180deg,rgba(8,40,78,.88),rgba(13,76,128,.75)),var(--hero-img,none) center/cover no-repeat,var(--navy)}}
.mosaic{grid-auto-flow:dense}

/* ===== v4 (2026-10-21): two-tier university header + mega menus ===== */
.site-header{background:#fff;border-bottom:0;box-shadow:0 2px 18px rgba(13,40,70,.08)}
.site-header .hd-main .wrap{display:flex;align-items:center;gap:24px;min-height:92px}
.site-header .brand{gap:14px;flex-shrink:0}
.site-header .brand img{width:68px;height:auto}
.site-header .brand-name{font-size:1.65rem;color:var(--navy);line-height:1.05}
.site-header .brand-name small{font-size:.7rem;letter-spacing:.14em;margin-top:6px;color:var(--red)}
.hd-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.hd-link{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-size:.9rem;font-weight:500;white-space:nowrap}
.hd-link .svg-ic{width:17px;height:17px;color:var(--crimson)}
.hd-link:hover{color:var(--crimson)}
.hd-actions .btn{padding:11px 20px;font-size:.92rem;white-space:nowrap}
.nav-mobile-only{display:none!important}
@media (min-width:921px){
  .site-header .nav{display:block;background:var(--navy);padding:0;position:relative}
  .site-header .nav-inner{display:flex;align-items:stretch;justify-content:flex-start;min-height:54px;gap:0;position:relative}
  .site-header .nav .nav-home,.site-header .nav .dd>a{display:flex;align-items:center;color:#fff;font-weight:600;font-size:.95rem;padding:0 19px;height:54px;border-radius:0;background:none;border-bottom:3px solid transparent;border-top:3px solid transparent;white-space:nowrap}
  .site-header .nav .nav-home{padding:0 16px 0 2px}
  .site-header .nav .nav-home .svg-ic{width:19px;height:19px}
  .site-header .nav .dd>a::after{border-color:#fff;opacity:.7}
  .site-header .nav .dd:hover>a,.site-header .nav .dd:focus-within>a,.site-header .nav .nav-home:hover,.site-header .nav a.active{background:rgba(255,255,255,.08);border-bottom-color:var(--gold);color:#fff}
  .site-header .nav .dd{position:static}
  .site-header .nav .dd-menu.mega{position:absolute;left:24px;right:24px;top:100%;display:none;grid-template-columns:2fr 1fr;gap:32px;padding:30px 32px;background:#fff;border:0;border-top:3px solid var(--gold);border-radius:0 0 16px 16px;box-shadow:0 24px 50px rgba(13,40,70,.18);min-width:0;z-index:80}
  .site-header .nav .dd:hover .dd-menu.mega,.site-header .nav .dd:focus-within .dd-menu.mega{display:grid}
  .site-header .nav .dd-menu .cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-content:start}
  .site-header .nav .dd-menu h5{font:700 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line)}
  .site-header .nav .dd-menu .cols a{display:block;padding:8px 0;color:var(--ink);font-weight:500;font-size:.96rem;border-radius:0;background:none;white-space:normal;transition:color .15s,padding .15s}
  .site-header .nav .dd-menu .cols a:hover{color:var(--crimson);padding-left:6px;background:none}
  .dd-feature{display:block;border-radius:14px;overflow:hidden;background:var(--cream);padding:0!important;white-space:normal!important}
  .dd-feature .ph{display:block;aspect-ratio:16/9;background:var(--img) center/cover no-repeat,var(--sky)}
  .dd-feature b{display:block;padding:14px 16px 3px;font-family:var(--serif);font-size:1.08rem;color:var(--navy)}
  .dd-feature span:last-child{display:block;padding:0 16px 16px;font-size:.86rem;color:var(--ink-3)}
  .dd-feature:hover b{color:var(--crimson)}
}
@media (min-width:921px) and (max-width:1180px){
  .hd-link{display:none}
  .site-header .nav .dd>a{padding:0 12px;font-size:.9rem}
  .site-header .brand-name{font-size:1.4rem}
}
@media (max-width:920px){
  .hd-actions{display:none}
  .site-header .hd-main .wrap{min-height:72px}
  .site-header .brand img{width:52px}
  .site-header .brand-name{font-size:1.2rem}
  .site-header .brand-name small{font-size:.58rem;letter-spacing:.1em}
  .menu-toggle{display:block;margin-left:auto}
  .site-header .nav{inset:72px 0 auto 0}
  .nav .nav-inner{display:block;padding:0}
  .nav .nav-home{display:none}
  .nav .dd-menu.mega{display:block!important}
  .nav .dd-menu .cols{display:block}
  .nav .dd-menu h5{display:none}
  .dd-feature{display:none!important}
  .nav-mobile-only{display:flex!important;margin-top:14px;justify-content:center}
}@media (min-width:921px){.site-header{top:-92px}}
@media (max-width:920px){.site-header .nav .dd>a{display:block;font-weight:700;color:var(--navy);padding:14px 6px;border-bottom:1px solid var(--line)}.site-header .nav .dd-menu.mega{padding:4px 0 8px 12px}.site-header .nav .dd-menu .cols a{display:block;padding:9px 6px;font-size:.93rem;font-weight:500;color:var(--ink-2);border-bottom:0;white-space:normal}.site-header .nav .dd-menu .cols a:hover{color:var(--crimson)}}
@media (max-width:920px){.site-header .brand-name small .so{display:none}.site-header .brand{min-width:0}.site-header .brand-name{white-space:normal}.site-header .brand-name small{white-space:nowrap;font-size:.56rem}}