/* ==========================================================================
   1kmschool.sg — story pages (two-track schools)
   A scrolling map with one plain sentence at a time, then an easy-reading
   page. Same meaning-colours as the checker: jade = within 1 km,
   steel = 1–2 km, slate = beyond 2 km.
   ========================================================================== */
:root{--serif:'Source Serif 4', Georgia, 'Times New Roman', serif}

.st-intro{background:var(--ink);color:var(--bone);padding:52px 0 44px}
.st-intro .wrap{max-width:760px}
.st-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin:0 0 14px}
.st-intro h1{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.06;
  font-size:clamp(2rem,6.2vw,3.3rem);margin:0 0 18px;color:var(--bone)}
.st-dek{font-family:var(--serif);font-size:clamp(1.2rem,2.7vw,1.45rem);line-height:1.55;color:var(--on-dark);margin:0 0 20px;max-width:40ch}
.st-meta{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--dim);margin:0}
.st-meta a{color:var(--on-dark)}

/* --- the scrolling map --- */
.scrolly{position:relative;background:#141B1F}
.scrolly-map{position:sticky;top:0;height:100vh;height:100svh;z-index:0;background:#141B1F}
.scrolly-map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35)}
.scrolly-map .leaflet-control-attribution{background:rgba(20,27,31,.8);color:#9AAAB0;font-size:10px}
.scrolly-map .leaflet-control-attribution a{color:#C9D5D8}
.steps{position:relative;z-index:1;margin-top:-100vh;margin-top:-100svh;padding:100vh 16px 34vh;pointer-events:none}
.step{max-width:560px;margin:0 auto 92vh;background:rgba(12,18,22,.92);color:#F4F1EA;
  padding:24px 26px;font-family:var(--serif);font-size:clamp(1.18rem,2.5vw,1.42rem);line-height:1.6;
  box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:auto}
.step:last-child{margin-bottom:0}
.step p{margin:0}
.step p + p{margin-top:.8em}
.chip{display:inline-block;padding:0 .38em;border-radius:3px;font-family:var(--body);font-weight:600;font-size:.92em;line-height:1.35}
.chip-1{background:var(--jade);color:#fff}
.chip-2{background:var(--steel);color:#fff}
.chip-b{background:#E9E4DA;color:#1B2A30}
.chip-s{background:var(--bone);color:var(--ink)}

.st-label{font-family:var(--body);font-weight:600;font-size:13px;color:#F4F1EA;white-space:nowrap;
  text-shadow:0 1px 3px #000,0 0 8px #000;pointer-events:none}
.st-label.l1{color:var(--jade-lt)}
.st-label.l2{color:var(--steel-lt)}

/* --- the easy-reading page --- */
.st-body{background:var(--paper);color:var(--text);padding:56px 0 64px}
.st-body .wrap{max-width:740px}
.st-body h2{font-family:var(--display);font-weight:800;letter-spacing:-.022em;line-height:1.15;
  font-size:clamp(1.5rem,3.6vw,2rem);color:var(--ink);margin:46px 0 14px}
.st-body h2:first-child{margin-top:0}
.st-body p,.st-body li{font-family:var(--serif);font-size:1.2rem;line-height:1.7}
.st-body p{margin:0 0 16px}
.st-body ul{padding-left:1.2em;margin:0 0 16px}
.st-body a{color:var(--steel)}

.fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0 8px}
.fam-card{background:var(--card);border:1px solid var(--rule-soft);border-top:5px solid var(--slate);padding:18px 18px 16px}
.fam-card.f1{border-top-color:var(--jade)}
.fam-card.f2{border-top-color:var(--steel)}
.fam-card h3{font-family:var(--display);font-weight:700;font-size:1.08rem;margin:0 0 8px;color:var(--ink)}
.fam-card p{font-size:1.06rem;line-height:1.6;margin:0}

.st-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 8px}
.st-cta .btn{text-decoration:none}
.st-cta .btn-check{background:var(--ink);color:var(--bone)}
.st-cta .btn-check:hover{background:#183641}
.st-cta .btn-wa{background:var(--wa,#25D366);color:var(--ink);border:0;border-radius:999px;box-shadow:0 4px 16px rgba(37,211,102,.28)}

.st-faq details{border-top:1px solid var(--rule);padding:14px 0}
.st-faq details:last-child{border-bottom:1px solid var(--rule)}
.st-faq summary{font-family:var(--display);font-weight:700;font-size:1.08rem;cursor:pointer;color:var(--ink)}
.st-faq details p{margin:10px 0 0}

.st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:18px 0}
.st-grid a{display:block;background:var(--card);border:1px solid var(--rule-soft);border-left:4px solid var(--steel);
  padding:14px 16px;text-decoration:none;color:var(--ink)}
.st-grid a:hover{border-color:var(--steel)}
.st-grid b{display:block;font-family:var(--display);font-size:1.02rem;margin-bottom:4px}
.st-grid span{font-family:var(--serif);font-size:.98rem;line-height:1.5;color:var(--muted)}

.st-source{font-family:var(--mono)!important;font-size:12.5px!important;line-height:1.7!important;color:var(--muted)}

@media(prefers-reduced-motion:reduce){.scrolly-map *{transition:none!important}}