:root, :root[data-theme], :root:not([data-theme="light"]) {
  --mode: light !important; color-scheme: light !important;
  --bg: #ece6dc !important; --bg2: #f8f5ef !important; --bg3: #ddd5c7 !important;
  --ink: #17202c !important; --ink2: #5a626e !important; --line: rgba(23, 32, 44, 0.11) !important;
  --panel: rgba(251, 248, 242, 0.86) !important; --panel-solid: #fbf8f2 !important; --chip: rgba(23, 32, 44, 0.05) !important;
  --land: #26344a !important; --ocean: #e6e0d4 !important; --rim: #fbf8f2 !important; --atmo: #c9b68f !important; --grat: #26344a !important;
  --sek: #b1432f !important; --ies: #2c6c66 !important; --uni: #a8854f !important;
  --focus: #a3412d !important; --btn-ink: #fbf8f2 !important;
  --shadow: 0 30px 60px -32px rgba(14, 20, 28, 0.5), 0 2px 10px -4px rgba(14, 20, 28, 0.14) !important;
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Hanken Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
  --brass: #a8854f;
  --accent: #a3412d;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}
body { font-family: var(--sans); font-size: 15px; }
.place { font-family: var(--serif); font-stretch: normal; font-weight: 400; letter-spacing: -0.005em; line-height: 1.04; }
.where { font-size: 13.5px; letter-spacing: 0.01em; }
#stage { background: radial-gradient(110% 85% at 58% 46%, #faf7f1 0%, #ece6dc 58%, #dcd3c3 100%); }

.panel { border: 0; border-radius: 22px; -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); }
.btn { border-radius: 999px; padding: 0.7em 1.25em; font-weight: 550; font-size: 14px; border-color: var(--line); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #2a3442; }
.iconbtn { width: 38px; height: 38px; border: 0; }

#globeUI .brand { left: calc(28px + var(--sal)); top: calc(26px + var(--sat)); max-width: 420px; }
.brand-eyebrow { margin: 0; font-size: 10.5px; font-weight: 650; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.brand h1 { font-family: var(--serif); font-stretch: normal; font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: -0.005em; margin-top: 8px; }
.brand p#brandSub { margin-top: 8px; font-size: 13.5px; color: var(--ink2); }

#listPanel { top: calc(140px + var(--sat)); left: calc(24px + var(--sal)); width: 310px; }
.filters { padding: 16px 16px 12px; gap: 6px; }
.chip { border: 0; padding: 0.42em 0.8em; font-weight: 550; font-size: 12.5px; }
.list h3 { font-size: 10.5px; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; margin: 18px 12px 6px; color: var(--ink2); }
.row { border-radius: 14px; padding: 9px 12px; }
.row strong { font-weight: 550; font-size: 14.5px; }
.row:not(.inactive) strong::after { content: 'Open'; margin-left: 8px; padding: 1px 7px 2px; border-radius: 999px; font-size: 10px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--accent); vertical-align: 2px; }
.row.inactive { opacity: 0.42; }

#card { right: calc(24px + var(--sar)); top: calc(24px + var(--sat)); width: 380px; padding: 24px 26px 22px; }
#card.show { animation: cardIn 0.55s var(--ease); }
.card-kicker { font-size: 10.5px; font-weight: 650; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.school { padding: 16px 0 18px; }
.school .tag { font-size: 10.5px; font-weight: 650; letter-spacing: 0.18em; text-transform: uppercase; }
.school .tag i { width: 7px; height: 7px; box-shadow: none; }
.school .place { font-size: 24px; margin-top: 8px; }
.school.live .place { font-size: 34px; }
.school .actions { margin-top: 16px; gap: 8px; }
.school .site { font-size: 12.5px; color: var(--ink2); text-decoration: none; border-bottom: 1px solid var(--line); margin-top: 14px; }
.school-intro { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: #2b3440; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 11px 5px; border-radius: 999px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); background: rgba(163, 65, 45, 0.1); }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: livePulse 2s var(--ease) infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(163, 65, 45, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(163, 65, 45, 0); } }
.soon { display: inline-flex; align-items: center; padding: 0.5em 1em; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: var(--ink2); background: var(--chip); }

#globeHint { border: 0; background: rgba(23, 32, 44, 0.72); color: #fff; font-size: 12.5px; padding: 0.65em 1.2em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.pin .dot { box-shadow: 0 0 0 2px #fbf8f2, 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); }
.pin .lbl { font-stretch: normal; font-weight: 550; font-size: 12.5px; border: 0; border-radius: 999px; padding: 0.3em 0.8em; box-shadow: 0 8px 20px -10px rgba(10, 14, 20, 0.45); }
.pin .lbl b { background: var(--accent); }
.pin:not(.inactive) .dot { animation: livePulse 2.4s var(--ease) infinite; }

#veil { background: radial-gradient(110% 90% at 50% 42%, #faf7f1 0%, #ece6dc 62%, #ddd5c7 100%) !important; }
#veil .veil-eyebrow { margin: 0 0 14px; font-size: 11px; font-weight: 650; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); }
#veil .place { font-size: clamp(40px, 6.4vw, 76px); max-width: 14ch; line-height: 1; }
#veil .veil-rule { display: block; width: 56px; height: 1px; margin: 22px auto 0; background: var(--brass); }
#veil .where { font-size: 15px; margin-top: 16px; letter-spacing: 0.04em; }

#ourCampus { background: #ece6dc; }
#ourCampusBack {
  left: calc(24px + var(--sal)); right: auto; top: calc(24px + var(--sat)); height: 44px; min-width: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; overflow: hidden; white-space: nowrap;
  color: var(--ink); background: rgba(251, 248, 242, 0.88); box-shadow: 0 10px 26px -12px rgba(10, 14, 20, 0.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13.5px; font-weight: 550;
  max-width: 44px; transition: max-width 0.4s var(--ease), background 0.2s;
}
#ourCampusBack svg { width: 20px; height: 20px; flex: none; }
#ourCampusBack span { opacity: 0; transition: opacity 0.3s; padding-right: 4px; }
@media (hover: hover) and (pointer: fine) {
  #ourCampusBack:hover, #ourCampusBack:focus-visible { max-width: 180px; background: #fbf8f2; }
  #ourCampusBack:hover span, #ourCampusBack:focus-visible span { opacity: 1; }
}

@media (max-width: 820px) {
  #globeUI .brand { left: calc(16px + var(--sal)); top: calc(16px + var(--sat)); }
  .brand h1 { font-size: 26px; }
  .brand p#brandSub { font-size: 12.5px; }
  #browseBtn { border: 0; box-shadow: var(--shadow); }
  #card { padding: 20px 20px 18px; }
  .school.live .place { font-size: 28px; }
  #ourCampusBack { left: calc(14px + var(--sal)); top: calc(14px + var(--sat)); }
}
#veil .veil-bar { position: relative; display: block; width: 140px; height: 1px; margin: 30px auto 0; background: rgba(23, 32, 44, 0.12); overflow: hidden; opacity: 0; transition: opacity 0.4s; }
#veil .veil-bar::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--accent); animation: veilSweep 1.6s var(--ease) infinite; }
#veil.waiting .veil-bar { opacity: 1; }
@keyframes veilSweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

#globeHint { animation: hintAway 0.8s var(--ease) 5s forwards; }
@keyframes hintAway { to { opacity: 0; visibility: hidden; } }

@media (max-width: 820px) {
  #listPanel { top: auto; }
  #card {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: 600px; margin: 0 auto; max-height: 75dvh;
    border-radius: 22px 22px 0 0; padding: 20px 20px calc(18px + var(--sab));
  }
}

@media (pointer: coarse) and (max-width: 1024px), (pointer: coarse) and (max-height: 500px) {
  .btn { min-height: 44px; font-size: 15px; }
  .iconbtn, #card .close { width: 44px; height: 44px; }
  #card .close { right: 8px; top: 8px; }
  #browseBtn { min-height: 44px; }
  #globeHint { font-size: 12px; }
  #ourCampusBack { left: calc(14px + var(--sal)); top: calc(14px + var(--sat)); }
  .school.live .place { font-size: 24px; }
  .school-intro { font-size: 15px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  #globeUI .brand { left: calc(14px + var(--sal)); top: calc(12px + var(--sat)); max-width: calc(100% - 160px); }
  .brand h1 { font-size: 24px; margin-top: 4px; }
  .brand p#brandSub { display: none; }
  #browseBtn { display: inline-flex; position: fixed; right: calc(14px + var(--sar)); top: calc(14px + var(--sat)); pointer-events: auto; background: var(--panel); border: 0; box-shadow: var(--shadow); }
  #listPanel { left: calc(8px + var(--sal)); right: auto; top: calc(8px + var(--sat)); bottom: calc(8px + var(--sab)); width: min(46vw, 330px); height: auto; }
  #listPanel:not(.open) { display: none; }
  #card {
    left: auto; right: calc(8px + var(--sar)); top: calc(8px + var(--sat)); bottom: calc(8px + var(--sab)); width: min(42vw, 360px);
    max-height: none; margin: 0; border-radius: 20px; padding: 18px 18px 16px; overflow: auto;
  }
  #globeUI:has(#card:not([hidden])) #browseBtn { display: none; }
  #globeHint { white-space: nowrap; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
}