/* ═══════════════════════════════════════════════════════════
   宿舍志 — Editorial Almanac aesthetic
   Warm paper · deep ink · single terracotta accent
   Fraunces (display) + IBM Plex Sans (body) + IBM Plex Mono (meta)
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#f4ede0;
  --paper-2:#ece3d2;
  --paper-3:#e3d8c1;
  --ink:#1a1714;
  --ink-2:#3d342a;
  --ink-3:#7a6e5d;
  --rule:#cdbf9f;
  --rule-2:#bdae8b;
  --accent:#b8431f;
  --accent-2:#d4621a;
  --accent-soft:#e8c9a8;
  --good:#3f6b3a;
  --bad:#a83232;
  --warn:#9a6b1a;
  --shadow:0 1px 0 rgba(26,23,20,.06),0 8px 28px -12px rgba(26,23,20,.18);
  --shadow-lg:0 2px 0 rgba(26,23,20,.08),0 30px 60px -20px rgba(26,23,20,.35);
  --serif:"Fraunces","Songti SC","STSong",serif;
  --sans:"IBM Plex Sans","PingFang SC","Hiragino Sans GB",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --maxw:1280px;
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(rgba(120,90,40,.025) 1px,transparent 1px),
    radial-gradient(rgba(120,90,40,.018) 1px,transparent 1px);
  background-size:3px 3px,7px 7px;
  background-position:0 0,1px 2px;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--accent);color:var(--paper)}

/* ───────── Masthead ───────── */
.masthead{max-width:var(--maxw);margin:0 auto;padding:34px 32px 22px}
.mast-top{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
.mast-kicker{color:var(--accent);font-weight:600}
.mast-contact{margin-left:auto;margin-right:auto;font-weight:500}
.mast-contact a{color:var(--ink-2);text-transform:none;letter-spacing:.04em}
.mast-contact a:hover{color:var(--accent)}
.mast-rule{margin:10px 0 0;height:1px;background:var(--ink);position:relative}
.mast-rule::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule)}
.mast-title-row{display:flex;align-items:flex-end;gap:18px;margin-top:14px;flex-wrap:wrap}
.mast-title{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(56px,9vw,108px);line-height:.85;
  letter-spacing:-.03em;margin:0;color:var(--ink);
}
.mast-romaji{
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.32em;color:var(--accent);
  padding-bottom:14px;border-left:1px solid var(--rule-2);padding-left:14px;
}
.mast-sub{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,2.4vw,26px);color:var(--ink-2);
  margin:14px 0 0;max-width:38ch;
}
.mast-stats{
  margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em;
}
.mast-stats b{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--ink);letter-spacing:-.02em}
.mast-stats .dot{color:var(--rule-2)}
.mast-stats i{font-style:normal;margin-left:6px}

/* ───────── Search ───────── */
.searchwrap{max-width:var(--maxw);margin:0 auto;padding:8px 32px 0}
.searchbox{
  position:relative;display:flex;align-items:center;
  background:var(--paper-2);border:1px solid var(--ink);
  border-radius:var(--r);box-shadow:var(--shadow);
  padding:0 16px;transition:border-color .2s,box-shadow .2s;
}
.searchbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,67,31,.15),var(--shadow)}
.search-ico{color:var(--ink-3);flex-shrink:0;margin-right:10px}
#search{
  flex:1;border:0;outline:0;background:transparent;
  font-family:var(--sans);font-size:17px;font-weight:500;
  padding:16px 0;color:var(--ink);
}
#search::placeholder{color:var(--ink-3);font-weight:400}
.clear-btn{
  border:0;background:var(--paper-3);color:var(--ink-2);
  width:26px;height:26px;border-radius:50%;cursor:pointer;
  font-size:18px;line-height:1;display:grid;place-items:center;
  transition:background .15s,color .15s;
}
.clear-btn:hover{background:var(--accent);color:var(--paper)}
.result-meta{
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
  letter-spacing:.05em;padding:12px 4px 0;min-height:18px;
}
.result-meta b{color:var(--ink);font-weight:600}

/* ───────── Layout ───────── */
.layout{
  max-width:var(--maxw);margin:0 auto;padding:14px 32px 40px;
  display:grid;grid-template-columns:208px minmax(0,1fr) 248px;
  gap:32px;align-items:start;
}

/* ───────── Filters ───────── */
.filters{position:sticky;top:16px;font-size:13px}
.filter-block{padding:14px 0;border-bottom:1px dashed var(--rule)}
.filter-block:first-child{padding-top:4px}
.filter-h{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;
}
.fselect{
  width:100%;font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule-2);border-radius:var(--r);
  padding:8px 10px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a6e5d' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.fselect:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px rgba(184,67,31,.15)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  font-family:var(--sans);font-size:12px;font-weight:500;
  padding:5px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--rule-2);background:var(--paper);
  color:var(--ink-2);transition:all .15s;user-select:none;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.toggles{display:flex;flex-direction:column;gap:8px}
.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--ink-2);user-select:none}
.toggle input{
  appearance:none;width:16px;height:16px;border:1.5px solid var(--rule-2);
  border-radius:3px;background:var(--paper);cursor:pointer;
  position:relative;flex-shrink:0;transition:all .15s;
}
.toggle input:checked{background:var(--accent);border-color:var(--accent)}
.toggle input:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.toggle:hover{color:var(--ink)}
.reset-btn{
  margin-top:16px;width:100%;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:9px;
  border:1px solid var(--rule-2);background:transparent;
  color:var(--ink-3);border-radius:var(--r);cursor:pointer;transition:all .15s;
}
.reset-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ───────── Results ───────── */
.results{display:flex;flex-direction:column;gap:0}
.card{
  display:grid;grid-template-columns:auto 1fr auto;gap:0;
  padding:18px 4px;border-bottom:1px solid var(--rule);
  cursor:pointer;transition:background .15s,padding .15s;position:relative;
}
.card:hover{background:var(--paper-2);padding-left:12px;padding-right:12px;margin:0 -8px;border-radius:var(--r)}
.card-num{
  font-family:var(--mono);font-size:11px;color:var(--rule-2);
  font-weight:500;padding-top:5px;width:34px;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.card-main{min-width:0;padding-right:16px}
.card-meta-top{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;
}
.card-meta-top .sep{color:var(--rule-2);margin:0 6px}
.card-title{
  font-family:var(--serif);font-weight:600;font-size:21px;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 4px;line-height:1.25;
}
.card-sub{font-size:12.5px;color:var(--ink-3);line-height:1.4}
.card-badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-self:end}
.badge{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.04em;padding:3px 7px;border-radius:3px;
  border:1px solid transparent;white-space:nowrap;
}
.badge.ok{background:rgba(63,107,58,.1);color:var(--good);border-color:rgba(63,107,58,.25)}
.badge.no{background:rgba(168,50,50,.08);color:var(--bad);border-color:rgba(168,50,50,.2)}
.badge.mid{background:rgba(154,107,26,.1);color:var(--warn);border-color:rgba(154,107,26,.25)}
.badge.neutral{background:var(--paper-3);color:var(--ink-2);border-color:var(--rule-2)}

.empty{padding:64px 24px;text-align:center;color:var(--ink-3)}
.empty .big{font-family:var(--serif);font-size:32px;font-style:italic;color:var(--ink-2);margin-bottom:8px}
.skel{
  height:64px;border-bottom:1px solid var(--rule);
  background:linear-gradient(90deg,var(--paper) 25%,var(--paper-2) 50%,var(--paper) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}

.show-more{margin-top:18px;text-align:center}
.show-more button{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 26px;
  background:var(--ink);color:var(--paper);border:0;border-radius:var(--r);
  cursor:pointer;transition:background .15s;
}
.show-more button:hover{background:var(--accent)}

/* ───────── Rail ───────── */
.rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:18px}
.ad-slot{
  min-height:250px;background:var(--paper-2);
  border:1px dashed var(--rule-2);border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.ad-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);position:absolute;top:8px;right:10px;
}
.ad-fallback{
  flex:1;display:grid;place-items:center;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:16px;
  color:var(--ink-3);padding:20px 8px;
}
.ad-fallback small{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em}
/* AdSense unit fills the slot once loaded */
.ad-slot .adsbygoogle{display:block;width:100%;min-height:250px}
.rail-card{background:var(--ink);color:var(--paper);padding:18px;border-radius:var(--r)}
.rail-card h4{font-family:var(--serif);font-weight:600;font-size:17px;margin:0 0 8px;color:var(--accent-soft)}
.rail-card p{font-size:12.5px;line-height:1.6;margin:0 0 10px;color:#d9cdb5}
.rail-card b{color:var(--paper)}
.rail-card .muted{color:#9a8d72;font-size:11.5px;margin-bottom:0}
.rail-contact{
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:14px 16px;text-align:center;
}
.contact-label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;
}
.rail-contact a{
  font-family:var(--serif);font-style:italic;font-size:16px;font-weight:500;color:var(--accent);
}
.rail-contact a:hover{text-decoration:underline;text-underline-offset:3px}

/* ───────── Modal ───────── */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(26,23,20,.55);backdrop-filter:blur(3px);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.modal-card{
  position:relative;z-index:1;background:var(--paper);border:1px solid var(--ink);
  border-radius:var(--r);max-width:680px;width:100%;max-height:88vh;
  overflow-y:auto;box-shadow:var(--shadow-lg);
  animation:pop .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.modal-close{
  position:absolute;top:14px;right:14px;z-index:2;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--rule-2);background:var(--paper);
  color:var(--ink-2);font-size:18px;cursor:pointer;
  display:grid;place-items:center;transition:all .15s;
}
.modal-close:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.modal-body{padding:36px 40px 32px}
.modal-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.modal-title{font-family:var(--serif);font-weight:700;font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:0 0 4px}
.modal-addr{font-size:13px;color:var(--ink-3);margin:0 0 6px}
.modal-multicampus{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:18px}
.modal-rule{height:1px;background:var(--ink);margin:18px 0;position:relative}
.modal-rule::after{content:"";position:absolute;inset:3px 0 0;height:1px;background:var(--rule)}
.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:18px 0}
.fact{padding:13px 0;border-bottom:1px solid var(--rule)}
.fact:nth-child(odd){padding-right:14px}
.fact:nth-child(even){padding-left:14px;border-left:1px dashed var(--rule)}
.fact-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.fact-val{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink);line-height:1.3}
.fact-val.long{font-size:15px}
.fact-val .tag{font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 6px;border-radius:3px;margin-left:4px;vertical-align:2px}
.tag.ok{background:rgba(63,107,58,.12);color:var(--good)}
.tag.no{background:rgba(168,50,50,.1);color:var(--bad)}
.tag.mid{background:rgba(154,107,26,.12);color:var(--warn)}
.modal-foot{margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em;border-top:1px dashed var(--rule);padding-top:14px}

/* ───────── GEO content (machine-readable facts + FAQ) ───────── */
.geo-content{max-width:var(--maxw);margin:40px auto 0;padding:0 32px}
.geo-inner{
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;
  border-top:1px solid var(--ink);padding-top:32px;
}
.geo-block h2{
  font-family:var(--serif);font-weight:600;font-size:24px;
  letter-spacing:-.01em;margin:0 0 12px;color:var(--ink);
}
.geo-block p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:0 0 12px}
.geo-block strong{color:var(--accent);font-weight:600}
.faq-item{
  border-bottom:1px solid var(--rule);padding:14px 0;
}
.faq-item:first-of-type{border-top:1px solid var(--rule)}
.faq-item summary{
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"+";font-family:var(--mono);font-weight:600;color:var(--accent);
  font-size:16px;width:16px;flex-shrink:0;transition:transform .2s;
}
.faq-item[open] summary::before{content:"–"}
.faq-item summary:hover{color:var(--accent)}
.faq-item p{margin:10px 0 0 26px;font-size:14px;line-height:1.7;color:var(--ink-2)}
@media (max-width:720px){
  .geo-content{padding:0 18px;margin-top:32px}
  .geo-inner{grid-template-columns:1fr;gap:32px}
}

/* ───────── Footer ───────── */
.foot{border-top:2px solid var(--ink);margin-top:20px;background:var(--paper-2)}
.foot-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 32px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);flex-wrap:wrap;gap:8px;
}
.foot .muted{color:var(--ink-3)}

/* ───────── Responsive ───────── */
@media (max-width:1024px){
  .layout{grid-template-columns:180px minmax(0,1fr);gap:24px}
  .rail{display:none}
}
@media (max-width:720px){
  .masthead,.searchwrap,.layout,.foot-inner{padding-left:18px;padding-right:18px}
  .layout{grid-template-columns:1fr;gap:0}
  .filters{position:static;border-bottom:1px solid var(--ink);margin-bottom:8px;padding-bottom:10px}
  .filter-block{display:none}
  .filters.expanded .filter-block{display:block}
  .filters::before{
    content:"筛选  ›";display:block;font-family:var(--mono);font-size:12px;
    letter-spacing:.1em;color:var(--accent);padding:8px 0;cursor:pointer;
  }
  .filters.expanded::before{content:"筛选  ⌄"}
  .card{grid-template-columns:1fr;gap:6px}
  .card-num{display:none}
  .card-badges{justify-self:start}
  .mast-stats{font-size:11px}
  .modal-body{padding:28px 22px 24px}
  .fact-grid{grid-template-columns:1fr}
  .fact:nth-child(even){padding-left:0;border-left:0}
}