/* Gushi Laoshi's pages for Google (tools/schools/pages.mjs): the city, school
   and teacher pages. The map's colours and type, no script, quick to load. */
:root {
  --fg: #1A1813; --fg-2: #4A453B; --muted: #6F685B; --paper: #F4F1E9; --card: #FFFDF8; --hair: rgba(26, 24, 19, .12);
  --seal: #C8452E; --seal-text: #A83A25; --seal-soft: rgba(200, 69, 46, .08);
  --university: #5B8BC9; --language-school: #E0A23C; --confucius-institute: #C8452E; --community-school: #5FA86A; --tutor: #8A6FC2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--fg); font: 16px/1.6 Inter, system-ui, -apple-system, sans-serif; }
a { color: var(--seal-text); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 880px; margin: 0 auto; padding: 18px 20px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none; font: 600 18px/1 Fraunces, Georgia, serif; }
.brand b { color: var(--seal-text); font-weight: 600; }
.chop { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--seal); color: #fff; font: 600 16px/1 'Noto Serif SC', serif; }
main { max-width: 880px; margin: 0 auto; padding: 8px 20px 40px; }
h1 { font: 600 clamp(28px, 5vw, 40px)/1.15 Fraunces, Georgia, serif; margin: 10px 0 12px; }
h2 { font: 600 20px/1.3 Fraunces, Georgia, serif; margin: 28px 0 10px; }
.lead { font-size: 18px; color: var(--fg-2); margin: 0 0 18px; }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.btn { display: inline-block; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--hair); background: var(--card); color: var(--fg); text-decoration: none; font-weight: 500; font-size: 14px; }
.btn.seal { background: var(--seal); border-color: var(--seal); color: #fff; }
.places { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.places li { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; }
.places li a { text-decoration: none; color: var(--fg); }
.places li b { font-size: 17px; }
.places small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.places p { margin: 6px 0 0; color: var(--fg-2); font-size: 14.5px; }
.kind { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; font-size: 12px; background: var(--paper); color: var(--fg-2); }
.kind::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--language-school); vertical-align: 1px; }
.kind.university::before { background: var(--university); } .kind.confucius-institute::before { background: var(--confucius-institute); }
.kind.community-school::before { background: var(--community-school); } .kind.tutor::before { background: var(--tutor); }
.cities { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; }
.cities small { color: var(--muted); }
.facts { padding-left: 20px; }
.facts.big li { margin: 8px 0; }
.cta { margin: 28px 0; padding: 18px 20px; border-radius: 16px; background: var(--seal-soft); }
.cta h2 { margin-top: 0; }
.own { color: var(--muted); font-size: 14px; }
.photo { border-radius: 24px; object-fit: cover; }
footer { max-width: 880px; margin: 0 auto; padding: 20px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 13.5px; }
footer a { color: var(--muted); }