/* Material layout with a Bandori stage palette and self-hosted Source Han Sans. */
@font-face{
  font-family:"Campus Source Han Sans";
  src:url("fonts/campus-han-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Campus Source Han Sans";
  src:url("fonts/campus-han-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Campus Source Han Sans";
  src:url("fonts/campus-han-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
:root{
  color-scheme:dark;
  --paper:#171321;--ink:#f5edf8;--muted:#bfb0cc;--accent:#ff80b3;
  --orange:#ff80b3;--line:#49344f;--surface:#241d30;--raised:#30243e;--selected:#512741;
  --map-bg:#1b192c;--region:#39314e;--region-alt:#343951;--region-third:#43334e;
  --region-hover:#5c4c73;--region-selected:#764664;--map-label:#e1d3ec;
}
body{font-family:"Campus Source Han Sans","Microsoft YaHei","PingFang SC",sans-serif;line-height:1.5}
button,input,select,textarea,.brand-icon{font-family:inherit}
#map,#map:active{cursor:default;touch-action:pan-y pinch-zoom}
:root .marker:not(.active) .pin{fill:var(--accent);stroke:var(--map-bg);stroke-width:1.4}
:root .marker:not(.active) .halo{opacity:.12}
:root .marker:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
body::before{display:block;height:3px;background:var(--band-gradient)}
.map-section::before{display:none}
.header{height:80px;border-bottom:0;gap:24px}
.brand{font-size:20px;font-weight:500;letter-spacing:0}
.brand-name{font-family:"Campus Source Han Sans","Microsoft YaHei","PingFang SC",sans-serif;font-weight:700}
.brand-logo{display:block;width:166px;height:auto;flex-shrink:0}
.header .about-link{margin-left:auto;white-space:nowrap}
:root .brand-icon{transform:none;border:0;border-radius:16px;background:var(--selected);color:var(--accent)}
.brand small{font-size:11px;letter-spacing:.3px}
.header-note{letter-spacing:0;margin-left:16px}
.about-link{padding:10px 16px;border-radius:24px;color:var(--accent)}
.about-link:hover{background:var(--raised)}
.intro{padding:32px 0 24px}
.intro h1{font-size:clamp(28px,3.1vw,42px);font-weight:700;letter-spacing:-.5px;line-height:1.35;margin:10px 0 14px}
.intro p,.section-heading p{font-size:14px;line-height:1.8}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:1px;color:var(--muted)}
.stats{gap:28px;padding:16px 24px;background:var(--surface);border-radius:24px}
.stats strong{font-size:30px;color:var(--accent);font-weight:400}
.stats span{font-size:12px}
.band-strip{padding-bottom:24px}
.band-items{gap:8px}
.band-chip{font-size:11px;background:var(--surface);border:1px solid color-mix(in srgb,var(--band) 35%,transparent);color:var(--band);border-radius:8px;padding:5px 10px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
:root .map-section{border:1px solid var(--line);border-radius:28px;box-shadow:0 12px 40px #10091940}
.map-toolbar{min-height:80px;padding:16px 20px;gap:16px;border-color:var(--line)}
.map-toolbar .search{width:320px;min-height:48px;border-radius:28px;padding:10px 18px}
:root .search{background:var(--raised);border-color:transparent}
.search input{font-size:14px;min-width:0}
:root .search:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.search-results{border-radius:20px;padding:8px;box-shadow:0 8px 24px #0005;top:76px;right:20px;width:320px}
.search-results button{border-radius:12px;min-height:48px}
:root .focus-button{border:0;border-radius:24px;background:var(--selected);color:var(--accent);min-height:44px;padding:10px 18px}
:root .focus-button:hover{background:#683350}
.breadcrumb button{border-radius:18px;min-height:40px;padding:8px}
.breadcrumb button:hover{background:var(--raised)}
.map-actions{border:0;border-radius:18px;box-shadow:0 4px 16px #0004}
.map-actions button{width:44px;height:44px}
.map-caption{background:#241d30ed;border-radius:16px;padding:12px 16px;top:18px;left:18px}
.map-caption small{margin-top:4px}
.legend{background:#241d30ed;padding:8px 12px;border-radius:12px}
.map-footer{padding:16px 24px;color:var(--muted);font-size:11px}
:root .popup{border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 8px 28px #0005}
.popup h3{font-weight:500;color:var(--ink)}
.popup>button{width:32px;height:32px;border-radius:50%}
.popup>button:hover{background:var(--raised)}
.details{padding-top:48px}
h2{font-weight:500;letter-spacing:0}
.section-heading{gap:20px}
:root .outline-button{border-radius:24px;min-height:44px;padding:10px 20px;color:var(--accent)}
.outline-button:hover{background:var(--raised)}
.district-tabs{gap:8px}
.district-tabs button{min-height:40px;border-radius:20px;padding:8px 16px}
:root .district-tabs button.active{background:var(--accent);border-color:var(--accent);color:#361225}
.district-tabs button:not(:disabled):not(.active):hover{background:var(--raised)}
.district-tabs button:disabled{opacity:.45}
.results-heading{color:var(--muted);margin-bottom:16px}
.campus-grid{gap:16px}
:root .campus-card{border:1px solid transparent;border-radius:24px;padding:24px;background:var(--surface);transition:background .18s,border-color .18s,box-shadow .18s}
:root .campus-card:hover{background:var(--raised);border-color:var(--line);box-shadow:0 4px 12px #0002}
:root .campus-card.selected{background:var(--selected);border-color:var(--accent)}
.campus-card h3{font-weight:500;font-size:18px;line-height:1.5}
.card-bottom{border-top:1px solid var(--line);font-size:11px;padding-top:16px}
:root .tag{border-radius:8px;padding:4px 10px;color:var(--muted)}
.club-label{font-size:12px;letter-spacing:0}
.club-contact a{text-underline-offset:3px}
:root #campus-detail{background:var(--raised);border:1px solid var(--line);border-radius:28px;padding:28px;margin-bottom:20px}
#campus-detail h3{font-size:22px;font-weight:500;line-height:1.5;margin-bottom:14px}
#campus-detail .club-info{margin:20px 0;font-size:14px;gap:10px}
#campus-detail p{font-size:13px}
.campus-detail-logo{margin:0 20px}
.school-icon.school-logo{background:#fff}
footer{gap:24px;border-color:var(--line)}
footer strong{font-weight:500}
@media(max-width:800px){
  .header-note{display:none}
  .header{height:auto;min-height:72px}
  .intro{padding:24px 0 18px}
  .stats{padding:12px 16px;gap:18px}
  .map-toolbar{gap:12px;padding:14px}
  .map-toolbar .search{width:100%}
  .search-results{top:136px;left:14px;right:14px;width:auto}
  .campus-detail-logo{margin:0}
}
@media(max-width:520px){
  .header{gap:8px;padding-top:12px;padding-bottom:12px}
  .brand{font-size:14px;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
  .brand-logo{width:136px}
  .brand small{font-size:10px;margin-top:2px}
  .about-link{font-size:11px;padding:8px}
  .intro{align-items:flex-start;flex-direction:column;gap:12px}
  .intro h1{font-size:28px;letter-spacing:0}
  .stats{width:100%;gap:32px;border-radius:20px}
  .stats div{flex-direction:row;align-items:baseline;gap:8px}
  .stats strong{font-size:24px}
  .band-chip{font-size:10px;padding:4px 8px}
  :root .map-section{border-radius:22px}
  :root .focus-button{padding:8px 12px;font-size:11px}
  .map-caption{top:12px;left:12px;padding:8px 10px;font-size:11px}
  .map-caption small{font-size:9px}
  .legend{left:12px;font-size:10px}
  .map-actions{right:12px}
  .map-footer{padding:14px 16px}
  .details{padding-top:32px}
  .section-heading{gap:12px}
  :root .outline-button{padding:8px 12px;white-space:nowrap}
  .district-tabs button{padding:8px 13px;font-size:12px}
  :root .campus-card{padding:20px;border-radius:20px}
  :root #campus-detail{padding:20px;border-radius:24px}
  #campus-detail h3{font-size:19px}
  #campus-detail .club-info{font-size:13px}
  .search input{font-size:13px}
}