:root {
  --surface: #fff;
  --canvas: #f6f8f5;
  --line: #dce6de;
  --ink: #17312b;
  --accent: #19604c;
  --subtle: #50665d;
}

html[data-theme="dark"] {
  --surface: #162721;
  --canvas: #0e1d19;
  --line: #31473d;
  --ink: #e9f4ec;
  --accent: #9be1bc;
  --subtle: #b2c9bc;
}

body, html[data-theme="dark"] body {
  background: var(--canvas);
  color: var(--ink);
}

.announcement, html[data-theme="dark"] .announcement { background: #14312a; }
header, html[data-theme="dark"] header {
  background: var(--surface);
  border-color: var(--line);
  padding-block: 13px;
}
header nav a.active, html[data-theme="dark"] header nav a.active { color: var(--accent); }
header nav a.active::after, html[data-theme="dark"] header nav a.active::after { background: var(--accent); }
.settings-shortcut, html[data-theme="dark"] .settings-shortcut {
  background: var(--surface);
  border-color: var(--line);
  color: var(--accent);
}
.btn.dark, html[data-theme="dark"] .btn.dark { background: #19604c; color: #fff; box-shadow: none; }
.btn.dark:hover, html[data-theme="dark"] .btn.dark:hover { background: #104735; }
.textlink, html[data-theme="dark"] .textlink { color: var(--accent); }

.campus-masthead {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-top: 30px;
  padding: clamp(30px, 4.5vw, 64px);
  overflow: hidden;
  border-radius: 32px;
  color: #f5fbf6;
  background: radial-gradient(ellipse at 86% 7%, #26594b 0, transparent 56%), #112d27;
}
.masthead-copy, .masthead-media { min-width: 0; }
.masthead-university {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #deeee3;
}
.masthead-university img { display: block; border: 2px solid white; border-radius: 50%; flex: 0 0 46px; }
.masthead-university strong, .masthead-university small { display: block; line-height: 1.6; }
.masthead-university strong { font-size: 12px; }
.masthead-university small { color: #adcbbd; font-size: 11px; }
.campus-masthead h1, html[data-theme="dark"] .campus-masthead h1 {
  color: #fff;
  font-size: clamp(41px, 4.9vw, 69px);
  line-height: 1.09;
  letter-spacing: -.055em;
  margin: 30px 0 20px;
}
.campus-masthead h1 em { color: #d8f58e; font-style: normal; }
.campus-masthead h1 em::after { content: none; }
.masthead-lead { max-width: 47ch; color: #c2dacf; font-size: 14px; line-height: 1.85; }
.masthead-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
.masthead-actions .btn { min-height: 48px; background: #d8f58e; color: #17312b; }
.masthead-secondary { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #f1faef; }
.masthead-secondary:hover { text-decoration: underline; }
.masthead-media { position: relative; align-self: stretch; min-height: 355px; border-radius: 23px; overflow: hidden; background: #204539; }
.masthead-photo { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.masthead-media::after { content: ''; position: absolute; inset: 40% 0 0; pointer-events: none; background: linear-gradient(transparent, #112d27a6); }
.masthead-media .masthead-live, html[data-theme="dark"] .masthead-media .masthead-live {
  position: absolute;
  z-index: 1;
  inset: auto 17px 17px;
  width: auto;
  max-width: 245px;
  margin: 0;
  transform: none;
  padding: 17px 19px;
  background: #102e27ee;
  border: 1px solid #ffffff36;
  border-radius: 17px;
  box-shadow: none;
}
.masthead-live .campus-live-title .live-indicator,
.masthead-live .campus-live-value p,
.masthead-live .campus-live-foot b,
.masthead-live > small,
html[data-theme="dark"] .masthead-live .campus-live-value p,
html[data-theme="dark"] .masthead-live .campus-live-foot b { color: #d2e9dc; }
.masthead-live .campus-live-value strong, html[data-theme="dark"] .masthead-live .campus-live-value strong { color: #d8f58e; font-size: 45px; }
.masthead-live .live-mark { background: #ffffff16; color: #d8f58e; }
.masthead-live .campus-mini-track { background: #ffffff25; }
.masthead-live .campus-mini-track span { background: #d8f58e; }

.campus-section-links, html[data-theme="dark"] .campus-section-links {
  gap: 13px 24px;
  justify-content: flex-start;
  margin-top: 14px;
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
.campus-section-links a, html[data-theme="dark"] .campus-section-links a { color: var(--accent); }
.pathways { margin-top: 64px; }
.pathways .section-head h2 br { display: none; }
.pathways .section-head .muted-heading { margin-left: .2em; }
.help-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
.help-grid .help, .help-grid .help:nth-child(-n+2), .help-grid .help:last-child,
html[data-theme="dark"] .help-grid .help {
  grid-column: auto;
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 9px 9px 19px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 21px;
  box-shadow: 0 8px 20px #122c2210;
}
.help-grid .help:hover { border-color: #6a9e82; box-shadow: 0 15px 30px #122c2220; }
.help-grid .help .help-art { height: auto; aspect-ratio: 3/2; margin: 0 0 14px; border-radius: 13px; object-fit: contain; }
.help-grid .help .help-top { padding-inline: 7px; color: var(--accent); }
.help-grid .help .icon, .help-grid .help .arr { background: #3d895316; border-color: transparent; color: inherit; }
.help-grid .help h3 { font-size: 16px; margin: 14px 7px 7px; }
.help-grid .help p, html[data-theme="dark"] .help-grid .help p { color: var(--subtle); opacity: 1; font-size: 12px; margin: 0 7px; }
.help-grid .help-index { display: none; }

.impact-board { background: radial-gradient(ellipse at 95% 0, #275644, transparent 60%), #122e27; border-color: #355e50; }
.impact-board .impact-heading h2, html[data-theme="dark"] .impact-board .impact-heading h2 { color: #f6fff7; }
.impact-board .impact-heading p { color: #b9d6c7; }
.metric-grid .metric-card {
  background: linear-gradient(155deg, color-mix(in srgb,var(--metric-accent) 22%,#213c34), #1d392f 84%);
  border-color: #ffffff24;
  color: #eef8f1;
}
.metric-grid .metric-card .metric-top, html[data-theme="dark"] .metric-grid .metric-card .metric-top { color: #e1efe6; }
.metric-grid .metric-card > strong, html[data-theme="dark"] .metric-grid .metric-card > strong { color: #fff; }
.metric-grid .metric-card .metric-bottom small, html[data-theme="dark"] .metric-grid .metric-card .metric-bottom small { color: #c6dbd1; }
.card, .recent-card, .journey-card, .news-carousel { border-radius: 21px; }
.card, .recent-card, .journey-card { border-color: var(--line); }
.news-carousel, .news-controls { border-color: var(--line); }
.cta, .cta-new { background: radial-gradient(ellipse at 88% 50%, #2a614d, transparent 62%), #173b2f; }

@media (max-width:1100px) {
  .help-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .campus-masthead { margin-top: 16px; grid-template-columns: minmax(0,1fr); border-radius: 24px; padding: 24px 20px 20px; gap: 24px; }
  .campus-masthead h1 { font-size: clamp(35px, 9vw, 54px); margin: 23px 0 15px; }
  .masthead-lead { font-size: 13px; }
  .masthead-media { min-height: 270px; border-radius: 16px; }
  .masthead-actions { gap: 8px 15px; margin-top: 18px; }
  .masthead-actions .btn, .masthead-secondary { font-size: 12px; }
  .masthead-media .masthead-live { inset: auto 12px 12px; padding: 12px 14px; max-width: 195px; }
  .masthead-live .campus-live-value strong { font-size: 38px; }
  .pathways { margin-top: 43px; }
  .help-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
  .help-grid .help h3 { font-size: 14px; }
  .help-grid .help p { font-size: 11px; }
  .help-grid .help:last-child { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .help-grid .help:last-child .help-art { grid-row: 1/4; align-self: center; margin: 0; }
}