/* Haishah's Reading Class: shared styles. "Exercise book" restyle (option A), 2026-10-23.
   Ruled paper, one pink margin line, hairline rows, flat sheets with a coloured top edge.
   Layers: ruling + margin z0, balls z1, page content z2. */

@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url('/nunito-latin.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700 800;font-display:swap;src:url('/playfair-display-latin.woff2') format('woff2')}

:root{
  --bg:#FFFBF7;
  --pink:#D63384; --pink-ink:#9D1D5B; --pink-300:#F9A8D4;
  --purple:#9B5EB5; --purple-ink:#6F3789;
  --gold:#F59E0B; --gold-ink:#8A5A00;
  --green:#059669; --green-ink:#065F46; --red-ink:#991B1B;
  --bm-bg:#DBEAFE; --bm-ink:#1E3A8A; --en-bg:#EEF2FF; --en-ink:#3730A3;
  --text:#1F2937;
  --muted:#4B5563; /* secondary text only: hints, footer, descriptors */
  --rule:rgba(155,94,181,.22); --rule-soft:rgba(155,94,181,.12);
  --paper:rgba(255,255,255,.7);
  --gutter:clamp(22px,5vw,56px);
  --margin-x:max(14px,calc((100vw - 1080px) / 2 - 30px));
  --ease-out:cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px;interpolate-size:allow-keywords}
body{
  font:600 17px/1.65 'Nunito',system-ui,sans-serif;color:var(--text);
  min-height:100svh;display:flex;flex-direction:column;
  background:var(--bg) linear-gradient(145deg,#FFF0F7 0%,#F3EEFF 50%,#FFF8E7 100%) fixed;
}
/* the paper: faint ruling (36px pitch) and one pink margin line */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,rgba(155,94,181,.075) 35px,rgba(155,94,181,.075) 36px)}
body::after{content:'';position:fixed;top:0;bottom:0;left:var(--margin-x);width:1px;z-index:0;pointer-events:none;background:rgba(214,51,132,.26)}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:800;color:var(--text)}
h1{font-size:clamp(40px,10vw,60px);line-height:1.05}
h2{font-size:clamp(26px,6vw,34px);line-height:1.15}
h3{font-size:22px;line-height:1.2}
p{max-width:62ch}
a{color:var(--pink-ink)}
ul,ol{list-style:none}
img,svg{display:block}
:focus-visible{outline:3px solid var(--purple-ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:8px;z-index:100;background:#fff;color:var(--text);padding:12px 16px;border-radius:12px;font-weight:800;text-decoration:none;transform:translateY(-72px);transition:transform 120ms var(--ease-out)}
.skip:focus{transform:none}
.emo{font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;line-height:1}

/* ---------- balls: solid, clean-edged, low opacity ---------- */
.bubbles{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;overflow:hidden;pointer-events:none;z-index:1}
.bubble{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.bubble.b1{background:rgba(214,51,132,.16);width:260px;height:260px;left:52%;top:4%}
.bubble.b2{background:rgba(245,158,11,.17);width:170px;height:170px;left:8%;top:55%}
.bubble.b3{background:rgba(155,94,181,.15);width:120px;height:120px;left:60%;top:70%}
@media (min-width:768px){.bubble.b1{width:500px;height:500px}.bubble.b2{width:300px;height:300px}.bubble.b3{width:200px;height:200px}}
.bubbles.lite .b3{display:none}
.strip,main,.site-header,.site-footer{position:relative;z-index:2}
@media print{.bubbles,body::before,body::after{display:none}}

/* ---------- layout: text starts right of the margin line ---------- */
.wrap{width:100%;max-width:calc(1080px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
@media (max-width:719px){.wrap,.hub,.strip,.site-footer,.hd-in{padding-left:36px}}
main{flex:1 0 auto}
.sec{position:relative;padding-block:44px}
.sec.tight{padding-block:28px}
.sec + .sec::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);max-width:1080px;margin-inline:auto;height:1px;background:linear-gradient(90deg,var(--rule),rgba(155,94,181,0))}
@media (max-width:719px){.sec + .sec::before{left:36px}}
.two-col{display:grid;gap:32px}
@media (min-width:1000px){
  .two-col{grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  .two-col.eq{grid-template-columns:1fr 1fr}
  .sticky{position:sticky;top:80px}
}

/* the one hand-made detail: a gold marker swash under page titles */
.swash{display:block;width:clamp(150px,44vw,230px);height:14px;margin-top:6px;color:var(--gold)}

/* ---------- header: flat ---------- */
.site-header{background:#FFFBF7;border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;max-width:calc(1080px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;min-height:44px;font:800 17px/1 'Playfair Display',Georgia,serif;color:var(--pink-ink);text-decoration:none;white-space:nowrap}
.brand .hide-sm{margin-left:.3em}
.site-header ul{display:flex;align-items:center}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 7px;font:800 14px/1 'Nunito',sans-serif;color:var(--muted);text-decoration:none}
.site-header nav a[aria-current="page"]{color:var(--text);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:7px}
.site-header nav a.reg{color:var(--pink-ink)}
.hide-sm{display:none}
@media (min-width:600px){.hide-sm{display:inline}.brand{font-size:20px}.site-header nav a{padding:0 12px}}
@media (max-width:359px){.hd-in{flex-wrap:wrap;justify-content:center;padding-block:4px}}
@media (hover:hover) and (pointer:fine){.site-header nav a:hover{color:var(--pink-ink)}}

/* ---------- footer: a flat line ---------- */
.site-footer{margin-top:40px;padding:28px var(--gutter);border-top:1px solid var(--rule);background:rgba(255,251,247,.7);text-align:left}
.site-footer p{max-width:none;font-size:14px;font-weight:700;color:var(--muted);line-height:1.8}
.site-footer p a{display:inline-flex;align-items:center;min-height:44px;font-weight:800}
.footer-credit{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:2px;font:700 13px/1 'Nunito',sans-serif;color:#6B7280;text-decoration:none;transition:color 160ms}
.footer-credit svg{width:11px;height:auto;flex:none}
@media (hover:hover) and (pointer:fine){.footer-credit:hover{color:var(--pink-ink)}}

/* ---------- buttons: soft-cornered, not pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:14px;font:800 17px/1 'Nunito',sans-serif;text-decoration:none;text-align:center;border:2px solid var(--pink);cursor:pointer;transition:transform 160ms var(--ease-out),background-color 160ms,border-color 160ms}
.btn-p{background:var(--pink);color:#fff}
.btn-s{background:transparent;color:var(--pink-ink)}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}
.btn-block{width:100%}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn-p:hover{background:var(--pink-ink);border-color:var(--pink-ink)}.btn-s:hover{background:rgba(214,51,132,.08)}}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- pills: status stays easy to spot ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:3px 10px;font:800 13px/1.4 'Nunito',sans-serif;white-space:nowrap}
.pill.full{background:#FEE2E2;color:var(--red-ink)}
.pill.open{background:#D1FAE5;color:var(--green-ink)}
.pill.wait{background:#FDE68A;color:#6B3A06;font-size:14px}
.pill.bm{background:var(--bm-bg);color:var(--bm-ink)}
.pill.en{background:var(--en-bg);color:var(--en-ink)}
.dash{color:var(--muted);font-weight:800}

/* ---------- teacher's note + highlighter ---------- */
mark{background:linear-gradient(transparent 52%,rgba(245,158,11,.42) 52%);color:inherit;padding:0 .12em;border-radius:2px}
.note{position:relative;margin-top:20px}
.note .nl{display:block;margin-bottom:2px;font:800 17px/1.3 'Playfair Display',Georgia,serif;color:var(--pink-ink)}
.note p{font-size:18px;font-weight:700;color:var(--text);line-height:1.6}
.note .btn{margin-top:12px}
@media (min-width:1260px){
  .note.hang .nl{position:absolute;right:calc(100% + 38px);top:0;margin:0;text-align:right}
}

/* ---------- home ---------- */
.first{display:flex;flex-direction:column;min-height:100svh;position:relative}
.strip{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding-inline:var(--gutter);font-size:13px;font-weight:700;color:var(--muted)}
.strip a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);font-weight:800;text-decoration:none}
.strip .loc-link{gap:6px}
.strip .loc-link .emo{font-size:15px}
.strip .loc-link .ext{color:var(--pink-ink);font-size:13px}
.since{margin-top:10px;font-size:16px;font-weight:700;color:var(--text)}
.hub{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:calc(1080px + 2 * var(--gutter));margin:0 auto;padding:20px var(--gutter) 40px}
.hub h1{font-size:clamp(42px,11.5vw,76px);line-height:1.04;text-wrap:balance}
.tagline{margin-top:18px;max-width:28ch;font-size:19px;color:var(--text);text-wrap:balance}
.menu{margin-top:26px}
.menu li{background:linear-gradient(90deg,var(--rule),rgba(155,94,181,0)) bottom/100% 1px no-repeat}
.menu li:first-child{background:linear-gradient(90deg,var(--rule),rgba(155,94,181,0)) bottom/100% 1px no-repeat,linear-gradient(90deg,var(--rule),rgba(155,94,181,0)) top/100% 1px no-repeat}
.menu a{display:flex;align-items:center;gap:16px;min-height:68px;text-decoration:none;color:var(--text)}
.menu .emo,.menu .t{transition:transform 180ms var(--ease-out)}
.menu .emo{font-size:26px;width:36px;flex:none;text-align:center}
.menu .t{flex:1;display:grid}
.menu .lbl{font:700 clamp(26px,7vw,32px)/1.1 'Playfair Display',Georgia,serif}
.menu .desc{display:none;font:600 15px/1.4 'Nunito',sans-serif;color:var(--muted)}
.menu .go{width:18px;height:18px;color:var(--pink);flex:none}
.hub .right .btn{margin-top:26px;display:flex;width:100%}
.chip-slot{display:flex;align-items:center;min-height:44px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:800 15px/1.3 'Nunito',sans-serif;color:var(--pink-ink);text-decoration:none;opacity:0;transform:translateY(4px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.chip.show{opacity:1;transform:none}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.chip[data-state="waiting"] .dot{background:var(--gold)}
.chip[data-state="open"] .dot{background:var(--green)}
.chip .ic{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.menu a:hover .emo,.menu a:hover .t{transform:translateX(8px)}.menu a:hover .lbl{color:var(--pink-ink)}}
@media (min-width:600px){.hub .right .btn{display:inline-flex;width:auto;min-width:220px}}
@media (min-width:900px){
  .strip{min-height:40px;font-size:14px}
  .hub{display:grid;grid-template-columns:1fr 1fr;column-gap:96px;align-items:center;padding-top:40px;padding-bottom:72px}
  .hub .left{grid-column:1}.hub .right{grid-column:2}
  .menu{margin-top:0}
  .menu a{min-height:92px}
  .menu .desc{display:block}
  .menu .lbl{font-size:34px}
}
.nm-a,.nm-b{display:inline}
@media (max-width:639px){.nm-a,.nm-b{display:block}}

/* home load sequence: once per session (html.intro is set by an inline script on first visit) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .intro .rise{animation:rise 420ms var(--ease-out) both;animation-delay:calc(var(--i) * 60ms)}
}

/* ---------- page heads ---------- */
.page-head{padding-top:44px;padding-bottom:6px}
.page-head p.lede{margin-top:16px;font-size:20px;line-height:1.55;color:var(--text);font-weight:700}
@media (min-width:1000px){.page-head{padding-top:64px}}
.where-pair{margin-top:20px;display:grid;gap:4px}
.wh-map{margin:-2px 0 0 42px;max-width:none}
.wh-map.flush{margin:2px 0 0}
.map-link{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:16px}
.wh{display:flex;align-items:baseline;gap:12px;font-size:19px;line-height:36px;color:var(--text);font-weight:700;max-width:none}
.wh .emo{font-size:22px;width:30px;flex:none;text-align:center}
.wh b{font:800 21px/1 'Playfair Display',Georgia,serif;margin-right:.35em}
.wh b.pc-purple{color:var(--purple-ink)}
.wh b.pc-pink{color:var(--pink-ink)}
.sh{font-size:clamp(26px,6vw,34px);margin-bottom:6px}

/* ---------- plans: flat sheets, coloured top edge, dotted terms ---------- */
.plans{display:grid;gap:22px;margin-top:4px}
@media (min-width:1000px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{--c:var(--pink);--ci:var(--pink-ink);display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:14px;background:var(--paper);border:1px solid var(--rule);border-top:6px solid var(--c)}
.plan.purple{--c:var(--purple);--ci:var(--purple-ink)}
.plan.gold{--c:var(--gold);--ci:var(--gold-ink)}
.ptop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-height:28px}
.kind{white-space:nowrap}
.kind{font-size:16px;font-weight:800;color:var(--ci)}
.plan h2{font-size:28px;line-height:1.15;margin-top:2px}
.pprice{margin-top:12px;display:grid;gap:0}
.from{font-size:15px;font-weight:800;color:var(--text)}
.price{display:flex;align-items:baseline;gap:6px;color:var(--pink)}
.price .cur{font:800 20px/1 'Nunito',sans-serif;color:var(--pink-ink)}
.price .num{font:800 56px/1 'Playfair Display',Georgia,serif;font-variant-numeric:lining-nums;color:var(--pink-ink)}
.per{font-size:17px;font-weight:800;color:var(--text)}
.pnote{margin-top:6px;font-size:16px;color:var(--text);line-height:1.5;font-weight:600}
.perf{margin:20px 0 4px;border-top:2px dotted var(--rule)}
.lead{padding:12px 0;font-size:16px;line-height:1.55;border-bottom:1px dotted var(--rule);max-width:none}
.lead strong{font-weight:800}
.terms li{padding:12px 0;font-size:16px;line-height:1.55;border-bottom:1px dotted var(--rule)}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:800;font-size:15px}
/* trial callout: soft gold tint, readable, with a link to the explanation */
.trialbox{margin:6px 0;padding:12px 14px;border-radius:10px;background:rgba(245,158,11,.20);font-size:16px;line-height:1.55}
.trialbox p{max-width:none}
.trialbox strong{font-weight:800}
.why-link{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:15px;color:var(--pink-ink)}
.tnote .why-link{min-height:0;display:inline;font-size:inherit}
/* html scroll-padding-top (72px) keeps #why-trial clear of the sticky 56px header */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.plan .pbtn{margin-top:auto;width:100%}
.plan .more + .pbtn{margin-top:8px}
@media (min-width:1000px){.plan .more{margin-bottom:12px}}

/* "Why a trial class first?": a soft tinted paper panel, like a teacher's note */
.why{display:grid;gap:22px;padding:28px 24px;border-radius:14px;background:rgba(245,158,11,.09);border:1px dashed rgba(138,90,0,.4)}
@media (min-width:1000px){.why{grid-template-columns:1.15fr 1fr;gap:56px;padding:36px 40px;align-items:start}}
.why .sh{margin-bottom:10px}
.why p{max-width:none;color:var(--text)}
.why-intro{font-size:20px;line-height:1.55;font-weight:700}
.why-lead{margin-top:16px;font:800 18px/1.4 'Playfair Display',Georgia,serif}
.why-list{margin-top:6px}
.why-list li{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px dotted var(--rule);font-size:18px;line-height:1.55}
.why-list li:last-child{border-bottom:0}
.why-list .emo{font-size:22px;width:30px;flex:none;text-align:center}
.why-list b{font-weight:800}
.why .soon{font-size:13px;margin-left:2px;vertical-align:1px}
.why-after{font-size:19px;font-weight:800;line-height:1.5}
.why-fee{margin-top:14px;font-size:18px;line-height:1.55;font-weight:600}
.why-small{margin-top:10px;font-size:16px;font-weight:700}
.why-flexi{margin-top:14px;padding-top:14px;border-top:1px dotted var(--rule);font-size:17px;line-height:1.55}
.why .btn{margin-top:20px}
.join{display:grid;margin-top:14px}
@media (min-width:760px){.join{grid-template-columns:1fr 1fr;column-gap:56px}}
.join li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:18px;font-weight:700}
.join li:first-child{border-top:1px solid var(--rule)}
@media (min-width:760px){.join li:nth-child(2){border-top:1px solid var(--rule)}}

/* quotes: plain, with a hanging quote mark */
.quotes{display:grid;margin-top:8px}
@media (min-width:760px){.quotes{grid-template-columns:1fr 1fr;column-gap:56px}}
.q{position:relative;padding:24px 0 22px 34px;border-bottom:1px dotted var(--rule)}
.q::before{content:'\201C';position:absolute;left:0;top:14px;font:800 52px/1 'Playfair Display',Georgia,serif;color:var(--pink)}
.q blockquote{font-size:18px;line-height:1.6;font-weight:600}
.q figcaption{margin-top:8px;font-size:14px;font-weight:800;color:var(--muted)}

/* ---------- timetable ---------- */
.tt-block{--c:var(--purple);border-top:6px solid var(--c);padding-top:18px}
.tt-block.pink{--c:var(--pink)}
.tt-block.gold{--c:var(--gold)}
.tt-block + .tt-block{margin-top:40px}
.tt-note{margin-top:8px;font-size:18px;font-weight:700;color:var(--text)}
.grid{width:100%;border-collapse:collapse;margin-top:14px}
.grid th{padding:8px 2px;text-align:center;font:800 15px/1.2 'Nunito',sans-serif;color:var(--purple-ink)}
.grid th:first-child,.grid td:first-child{text-align:left}
.grid td{height:46px;padding:2px;text-align:center;border-top:1px dotted var(--rule)}
.grid td.time{padding-right:8px;font-size:15px;font-weight:800;color:var(--text);white-space:nowrap}
.grid tr.gap td{height:8px;padding:0;border-top:0}
.small{font-size:14px;color:var(--muted);margin-top:12px}
.updated{font-size:14px;color:var(--muted);margin-top:8px}
.rows{margin-top:12px}
.rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;border-bottom:1px dotted var(--rule);font-size:19px;font-weight:800}
.rows li:first-child{border-top:1px dotted var(--rule)}
.rows li{padding:6px 0}
.rows .ft{display:flex;flex-direction:column;gap:6px;min-width:0}
.rows .live{display:flex;flex-wrap:wrap;gap:6px;font-weight:800}
.rows .live[hidden]{display:none}
.dots{display:grid;margin-top:10px}
.dots li{padding:11px 0;font-size:17px;line-height:1.55;border-bottom:1px dotted var(--rule)}
.dots li:first-child{border-top:1px dotted var(--rule)}

/* ---------- rules ---------- */
.ess{background:var(--paper);border:1px solid var(--rule);border-top:6px solid var(--pink);border-radius:14px;padding:22px 22px 12px}
.ess p{margin-top:6px;font-size:18px;font-weight:700;color:var(--text)}
.ess ul{margin-top:12px}
.ess li{padding:11px 0;font-size:17px;font-weight:700;line-height:1.5;border-bottom:1px dotted var(--rule)}
.ess li:last-child{border-bottom:0}
.accs{border-top:1px solid var(--rule)}
.acc{border-bottom:1px solid var(--rule);overflow:hidden}
.acc summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 2px;cursor:pointer;font:800 21px/1.2 'Playfair Display',Georgia,serif}
.acc summary::-webkit-details-marker{display:none}
.acc summary::marker{content:''}
.acc .chev{margin-left:auto;color:var(--pink);transition:transform 200ms var(--ease-out)}
.acc[open] .chev{transform:rotate(180deg)}
.acc .body{padding:0 2px 20px}
.rl li{padding:10px 0 10px 18px;position:relative;font-size:17px;line-height:1.6;border-bottom:1px dotted var(--rule)}
.rl li:last-child{border-bottom:0}
.rl li::before{content:'';position:absolute;left:2px;top:21px;width:6px;height:6px;border-radius:50%;background:var(--pink-300)}
.rl strong{font-weight:800}
details::details-content{block-size:0;overflow:clip;transition:block-size 220ms var(--ease-out),content-visibility 220ms allow-discrete}
details[open]::details-content{block-size:auto}
.rules-end{margin-top:24px;font-weight:700;font-size:18px}
.rules-end a,.js-fallback-note a,.li .v a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- register ---------- */
.reg-grid{display:grid;gap:28px;margin-top:8px}
@media (min-width:1000px){.reg-grid{grid-template-columns:5fr 7fr;gap:56px;align-items:start}.reg-pick{position:sticky;top:80px}}
.opts{display:grid;gap:14px}
.opt{--c:var(--pink);position:relative;display:flex;flex-direction:column;gap:2px;min-height:80px;padding:16px 44px 16px 18px;border-radius:14px;background:var(--paper);border:1px solid var(--rule);border-top:6px solid var(--c);cursor:pointer;transition:border-color 150ms,background-color 150ms,transform 100ms var(--ease-out)}
.opt.purple{--c:var(--purple)}
.opt.gold{--c:var(--gold)}
.opt:active{transform:scale(.99)}
.opt.is-sel{background:rgba(255,255,255,.96);border-color:var(--pink);border-top-color:var(--c);outline:2px solid var(--pink);outline-offset:-1px}
.opt:has(input:focus-visible){outline:3px solid var(--purple-ink);outline-offset:3px}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt .t{font:800 22px/1.2 'Playfair Display',Georgia,serif}
.opt .d{font-size:16px;line-height:1.45;color:var(--text);font-weight:600}
.opt .pill{margin-top:6px;align-self:flex-start}
.opt .chk{position:absolute;top:14px;right:14px;width:22px;height:22px;color:var(--pink);opacity:0;transition:opacity 150ms}
.opt.is-sel .chk{opacity:1}
.empty{display:none;color:var(--muted)}
@media (min-width:1000px){.empty{display:block;padding-top:24px}}
.pane{scroll-margin-top:72px}
.pane .tnote{margin-top:14px;font-size:17px;line-height:1.55;font-weight:700;max-width:none}
.fc{margin-top:22px;background:rgba(255,255,255,.85);border:1px solid var(--rule);border-radius:14px;padding:26px 22px}
@media (min-width:760px){.fc{padding:32px 30px}}
.fg{display:grid;gap:16px;margin-bottom:16px}
@media (min-width:620px){.fg.two{grid-template-columns:1fr 1fr}}
.f label{display:block;margin-bottom:6px;font-size:15px;font-weight:800}
.f .hint{margin-top:4px;font-size:14px;font-weight:600;color:var(--muted)}
.f input,.f select,.f textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:10px;border:1.5px solid #8B93A1;background:#fff;font:600 16px 'Nunito',sans-serif;color:var(--text)}
.f textarea{min-height:96px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--pink)}
.fnote{margin-top:14px;font-size:14px;color:var(--muted);text-align:center;max-width:none}
.err{margin-top:12px;font-size:15px;font-weight:800;color:var(--red-ink);text-align:center;max-width:none}
.err:empty{display:none}
.ok{margin-top:16px;padding:18px 20px;border-radius:10px;background:#D1FAE5;text-align:center}
.ok h3{font-size:20px;color:var(--green-ink)}
.ok p{margin:6px auto 0;font-size:16px;color:var(--green-ink);font-weight:700}
.ok a{font-weight:800;color:var(--green-ink)}
.fc .note{margin-top:0;margin-bottom:18px}
#locList{max-width:760px}
/* "Meet Teacher Shaf": soft purple-tinted paper, initial in a circle instead of a photo */
.meet{display:grid;gap:16px;padding:26px 24px;border-radius:14px;background:rgba(155,94,181,.08);border:1px dashed rgba(111,55,137,.4)}
@media (min-width:760px){.meet{grid-template-columns:auto 1fr;gap:28px;padding:32px 36px;align-items:start}}
.meet-mark{width:72px;height:72px;border-radius:50%;background:rgba(214,51,132,.14);color:var(--pink-ink);display:flex;align-items:center;justify-content:center;font:800 36px/1 'Playfair Display',Georgia,serif}
.meet .sh{margin-bottom:4px}
.meet p{max-width:62ch;color:var(--text)}
.meet-name{font:800 20px/1.4 'Playfair Display',Georgia,serif;color:var(--purple-ink)}
.meet-text{margin-top:10px;font-size:18px;line-height:1.6;font-weight:600}
.meet-how{margin-top:16px;font-size:18px;font-weight:800}
.li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px dotted var(--rule)}
.li:first-of-type{border-top:1px dotted var(--rule)}
.li .emo{font-size:22px;width:30px;flex:none;text-align:center;padding-top:2px}
.li .k{font-size:14px;font-weight:800;color:var(--muted)}
.li .v{font-weight:700;line-height:1.5;font-size:17px}
.li .v a{font-weight:800}
#locList h2{margin-bottom:10px}

.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:160ms}
}
@media (prefers-reduced-motion:reduce){
  /* gentler, not zero: keep colour/opacity fades, drop all movement */
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-property:opacity,color,background-color,border-color!important}
}