/* =========================================================
   OOPS Art · type and colour system (loaded last on every page)
   Roles: display / h2 / h3 / lede / body / small / note
   One text ink, one body tone, one muted tone, one accent.
   ========================================================= */
:root{
  --fs-h1:clamp(36px,4.4vw,58px);
  --fs-h2:clamp(28px,3vw,40px);
  --fs-h3:22px;
  --fs-lede:clamp(17px,1.4vw,19px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-note:14px;
  --lh-body:1.75;
  --lh-small:1.65;
  --ink:#2F2838;        /* headings, strong text */
  --text:#463F52;       /* reading text on light surfaces */
  --muted:#6B6475;      /* secondary text on light surfaces */
  --on-dark:#F4EFF8;    /* headings on dark */
  --on-dark-text:#DCD2E6;
  --measure:36em;
}
body{color:var(--text)}
/* headings */
main h1,main h2,main h3,main h4{color:var(--ink);font-weight:700;letter-spacing:-.005em;text-wrap:balance}
.phead.hb h1.h1,.phead h1.h1{font-size:var(--fs-h1)!important;line-height:1.14}
main .h2,main h2.h2{font-size:var(--fs-h2);line-height:1.2}
main h2.yr{font-size:var(--fs-h1);font-weight:600}
main h3{font-size:var(--fs-h3);line-height:1.35}
/* component titles: one h3 size everywhere */
.ab h3,.box h3,.day h3,.kh h3,.subf h3,.talk h3,.tn h3,.age .tx h3,.ev .tx h3,.loc .tx h3,.tile h3,.wd h3,.panel h2,.subhero h2{font-size:var(--fs-h3);line-height:1.35}
.tc h3,.tcd h3,.tbd h3{font-size:28px;line-height:1.25}
main h3.strip-h{font-size:var(--fs-h3)}
.bio h3.h2,.bio h1.h2{font-size:var(--fs-h1);line-height:1.14}
/* dark surfaces */
.phead h1,.phead h2,.wall .h2,.fin h2,.fin .h1,.wall h3,.band h2{color:var(--on-dark)}
.phead.hb .subhero>h2{color:var(--ink)}
.fin .ft .h1{font-size:var(--fs-h1)}
/* paragraphs */
main p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text)}
main .lede,.phead .lede{font-size:var(--fs-lede);line-height:1.7;color:var(--muted);max-width:var(--measure)}
.phead .lede,.wall p,.fin p{color:var(--on-dark-text)}
/* compact descriptions inside cards and tiles */
.age .when,.tc p,.tbd p,.day p,.four p,.tile p,.ev .tx p,.tn p,.ab p,.ab li,.pn-ev,.fs li{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.tc .tx p,.tcd .tbd p{color:var(--text)}
/* small print */
p.closed,p.mosnote,p.polnote,figcaption,.fine{font-size:var(--fs-note);line-height:1.6;color:var(--muted)}
/* long reading blocks keep a comfortable measure */
.bio p,.tbd p,.ft p{max-width:36em}
/* the on-dark exceptions above must win over the card rules */
.wall p,.fin .ft p{color:var(--on-dark-text)}
/* FAQ questions */
.faq summary{font-size:18px;line-height:1.5;color:var(--ink)}
/* links in running text */
main p a:not(.btn){color:var(--coral);text-underline-offset:3px}

/* ---------- studio: about, distilled ---------- */
.about{background:var(--paper)}
.about .agrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);margin-top:36px;align-items:start}
.about .agrid .lede{max-width:26em}
.about .m4{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.about .m4 li{display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
.about .m4 .n{font:600 15px/1.9 var(--en);color:var(--coral)}
.about .m4 b{font-size:var(--fs-body);font-weight:700;color:var(--ink);line-height:1.5}
.about .m4 span.d{grid-column:2;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
.about .why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none}
.about .why li{padding-top:16px;border-top:2px solid var(--ink)}
.about .why b{display:block;font-size:var(--fs-body);color:var(--ink);margin-bottom:6px;line-height:1.4}
.about .why span{display:block;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)}
@media(max-width:900px){.about .agrid{grid-template-columns:1fr;gap:28px}.about .why{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.about .why{grid-template-columns:1fr}}
.about .agrid .lede{color:var(--text)}

[hidden]{display:none!important}

/* ===== English layout adjustments ===== */
.links a,.langsw{white-space:nowrap}
.langsw{font:700 13px/1 var(--en);padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;margin-right:2px}
.langsw:hover{background:var(--paper)}
@media(max-width:900px){.langsw{padding:7px 10px}}
html.lang-en .band h2,html.lang-en .band h1.sp{font-size:clamp(34px,5.4vw,82px)!important;max-width:14em;line-height:1.08}
html.lang-en .band h2.m{font-size:clamp(32px,4.8vw,72px)!important}
html.lang-en .band .tag{letter-spacing:.14em}
html.lang-en .links a{padding:11px 12px}
html.lang-en .band h1.sp{max-width:20em!important}
/* narrow phones: keep brand, language, enroll and menu on one row (English labels are longer) */
@media(max-width:520px){.nav .in{gap:7px}.brand{gap:6px;flex-shrink:0}.brand>img{width:28px}.wm img{height:30px}.nav .btn.sm{padding:9px 11px;font-size:13.5px;white-space:nowrap}.nav .btn.sm .arr{display:none}.langsw{padding:6px 8px;font-size:12px;margin-right:0}.burger{width:38px;height:38px;margin-left:0;flex-shrink:0}.burger i{width:18px;margin:3.5px auto}.nav .in{justify-content:space-between}}
@media(max-width:520px){main .btn{white-space:normal;max-width:100%;text-align:center;line-height:1.3}}

/* =========================================================
   v4 design review pass (2026-10): rhythm, readable small type,
   quieter sections, hero legibility, phone overlap
   ========================================================= */
:root{
  --muted:#5E5769;              /* a notch darker for small grey text */
  --sp-section:clamp(56px,7vw,96px);   /* normal gap between sections */
  --sp-section-lg:clamp(72px,9vw,120px); /* only after the hero and before the closing call */
}
/* hero: headline was inheriting the dark heading colour on a dark photo */
.band h1,.band h1 .w,.band h1 .c,.hero-static h1{color:#fff}
.band h1 .em,.band h1 .em .c,.hero-static h1 em{color:#FFC9B3}
.hero{height:320vh}
.band.b1 .ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center}
/* rhythm: one gap by default, a bigger one only at the two big turns */
.pad{padding:var(--sp-section) 0}
.pick.pad,.fin.pad{padding:var(--sp-section-lg) 0}
.sub-sec{background:var(--paper)}
/* section labels: the small English tags above every heading made all sections look alike.
   Page heads keep theirs because they carry real context (term, season). */
main .kick{display:none}
main .phead .kick{display:inline-flex}
main .kick + h2,main .kick + .h2{margin-top:0!important}
main .phead .kick + h2,main .phead .kick + .h2{margin-top:revert!important}
/* small type: nothing content-bearing below 13px */
.links a small{font-size:11.5px}
.wd h3 small{font-size:12.5px}
.wd .cp small,.wd.off .cl span,.wd .it i,.pn-wk b,.news i{font-size:13px}
.subf .chk{font-size:13.5px}
.langsw{font-size:13px}
/* floating helper must not sit on the sticky call bar (phones and small tablets) */
@media(max-width:980px){
  body .obot-fab{bottom:84px;right:12px}
}
@media(max-width:640px){
  body .obot-fab{padding:12px;gap:0}
  .obot-fab .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hero-static h1 span:first-child{font-size:.82em}
}

/* ---- acquisition layer: trust strip, help line, tap targets ---- */
.trust{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;padding-top:0;padding-bottom:36px;font-size:15px;font-weight:600;color:var(--ink)}
.trust span{display:inline-flex;align-items:center;gap:10px}
.trust span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral,#FF875F);flex:none}
.agehelp{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:center;margin-top:44px;text-align:center}
.agehelp p{margin:0;font-size:var(--fs-body);color:var(--ink);max-width:34em}
.ah-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* footer WeChat copy button looks like the other footer links */
footer button.wxcopy{display:block;background:none;border:0;padding:4px 0;margin:0;font:inherit;color:#EADFF0;text-align:left;cursor:pointer;min-height:44px}
footer button.wxcopy:hover{color:var(--yellow)}
/* 44px minimum hit area for small links */
footer a,.promo a{min-height:44px;display:flex;align-items:center}
.promo a{display:inline-flex}
.langsw,.burger{min-height:44px;min-width:44px}
@media(max-width:520px){.burger{width:44px;height:44px}.langsw{min-height:44px;padding:6px 10px}.trust{justify-content:flex-start;padding-left:16px;padding-right:16px}}
:focus-visible{outline:3px solid var(--coral,#FF875F);outline-offset:3px;border-radius:4px}

footer .fine a{display:inline-flex;min-height:44px;padding:0 4px}

/* ---- audit round 01 ---- */
/* age picker: the age badge must sit above the card photo (it was painted under it on the home page) */
.age .num{z-index:2}
/* student artwork is shown whole on a paper mat instead of being cropped by the card */
.age .im,.ages .age .im{background:#F3EEE6}
.age:hover .im img,.ages .age:hover .im img{transform:none}
.hero-static{background-image:url('../img/hero-teacher-guides-1800.jpg');background-position:50% 35%}
/* phones and portrait tablets: real class photo on top, headline on solid colour below */
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse){
  .hero-static{background:#2A1D38 url('../img/hero-teacher-guides-1200.jpg') center top/100% auto no-repeat;min-height:0;align-items:flex-start}
  .hero-static::before{background:linear-gradient(180deg,rgba(42,29,56,0) 0%,rgba(42,29,56,0) calc(75vw - 170px),rgba(42,29,56,.9) calc(75vw - 70px),#2A1D38 calc(75vw - 40px))}
  .hero-static .in{padding:calc(75vw - 40px) 0 44px}
}
@media (min-width:721px) and (orientation:portrait) and (max-width:1024px){
  .hero-static{background-image:url('../img/hero-teacher-guides-1800.jpg')}
}
/* proof grid: the group photo gets two rows instead of a 150px strip; the poster is shown whole */
@media (min-width:981px){.bento .e{grid-column:1/4;grid-row:4/7}.bento .f{grid-column:4/7;grid-row:5/7}}
.bento img.poster{object-fit:contain;background:#B4D0D3}
/* video wall: keep the teacher in frame */
.vgrid video[data-src*="v-paint-teacher"]{object-position:22% 50%}
/* news thumbnails use the photos' own 16:9 shape */
.news a{grid-template-columns:128px 1fr}
.news img{width:128px;height:72px}
@media(max-width:600px){.news a{grid-template-columns:112px 1fr}.news img{width:112px;height:63px}}
/* contrast fixes */
.method .four div:nth-child(1) b{color:#B83C7A}
footer .fine a{text-decoration:underline;text-underline-offset:2px}
.btn .arr{color:inherit}
.band::before{opacity:calc(.45 + .55*var(--k,1))}
.band .tag{color:#fff}
@media (max-width:900px){.hsh{background:linear-gradient(180deg,rgba(25,14,38,.45) 0%,rgba(25,14,38,.8) 45%,rgba(25,14,38,.94) 100%)}}
@media (max-width:720px){
  .hero-static{background-size:132% auto;background-position:40% 0}
  .hero-static::before{background:linear-gradient(180deg,rgba(42,29,56,0) 0%,rgba(42,29,56,0) calc(99vw - 170px),rgba(42,29,56,.9) calc(99vw - 70px),#2A1D38 calc(99vw - 40px))}
  .hero-static .in{padding-top:calc(99vw - 40px)}
}
.age .im,.ages .age .im{aspect-ratio:4/3}
#ages h2{word-break:keep-all}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* phones/tablets: the last proof photo (group) spans both columns instead of sitting alone at half width */
@media(max-width:980px){.bento .f{grid-column:1/-1!important;aspect-ratio:16/10!important}}
/* ---- audit round 03 ---- */
/* headings break at punctuation, not mid-word (falls back to anywhere only if a line would overflow) */
main h1,main h2,main h3{word-break:keep-all;overflow-wrap:anywhere}
/* phones: the week grid skips the two closed days (the note under it says so) */
@media(max-width:640px){.wd.off{display:none}}
/* phones: no empty summary box or $0 total before a class is picked, so the class list starts higher */
@media(max-width:980px){body.nopick .sum,body.nopick .totbar{display:none!important}}
/* ---- audit round 04 ---- */
/* classes header on phones: keep the teacher in frame (the narrow crop used to cut him off) */
@media(max-width:640px){.phead.hb .hbg video[data-cms-media="classes.m1"]{display:none}.phead.hb .hbg:has(video[data-cms-media="classes.m1"]){background:#1e1626 url('../vid/hero-classes.jpg') 20% 0/auto 300px no-repeat}.hsh{background:linear-gradient(180deg,rgba(25,14,38,0) 0,rgba(25,14,38,0) 190px,rgba(30,22,38,.95) 285px,#1e1626 300px)}.phead.hb{min-height:0;align-items:flex-end}.phead.hb .in{padding:270px 0 40px}}
/* desktop hero, last band: buttons are fully shown a little earlier in the scroll */
.band.b4 .ctas{--kb:clamp(0,(var(--k,0) - .6)*4,1)}
.nav .tel{color:#A63A1B}
/* desktop video wall: the last clip gets a 16:9-ish slot instead of a flat strip */
@media(min-width:981px){.vgrid .v3{grid-row:4/7}.vgrid .v6{grid-row:7/10}}