/* ============================================================
   Newton School — Mochi 02 website design preview
   Palette and typographic grammar sampled from
   600-Design\Mascot-Keyart-V2\Mascot-Keyart-V2.png
   ============================================================ */

:root{
  --ivory:#FFF8F3;
  --blush:#FBF7F9;
  --lav:#F1E9F4;
  --navy:#0D2543;
  --slate:#596A7D;
  --pink:#EA848D;
  --lavender:#CABBF1;
  --hair:rgba(234,132,141,.42);
  --hair-soft:rgba(13,37,67,.13);

  --sans:"Segoe UI",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:Constantia,"Sitka Text",Georgia,"Palatino Linotype","Times New Roman",serif;

  --gut:clamp(22px,5vw,88px);
  --shell:1320px;
  --hdr:66px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 18px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--navy);
  background:var(--ivory);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* the key art's diagonal ivory -> blush -> lavender wash */
.page-wash{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 85% at 8% 0%, #FFF8F3 0%, rgba(255,248,243,0) 58%),
    radial-gradient(110% 90% at 96% 100%, #EFE5F4 0%, rgba(239,229,244,0) 62%),
    linear-gradient(126deg,#FFF8F3 0%,#FDF7F6 34%,#FBF7F9 56%,#F4EDF6 80%,#F1E9F4 100%);
}

img{max-width:100%}
[hidden]{display:none!important}

a{color:inherit}
:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:2px}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.30em; text-transform:uppercase;
  color:var(--navy); margin:0;
}
.rule-short{
  display:block; width:72px; height:2px; background:var(--pink);
  margin:14px 0 0; border:0;
}
.deck{
  font-family:var(--serif);
  font-size:clamp(1.22rem,1.5vw + .7rem,1.72rem);
  line-height:1.38; color:var(--navy); margin:0; font-weight:400;
}
.micro{
  font-size:.875rem; line-height:1.62; color:var(--slate); margin:0;
}
.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.85rem,3.1vw + .45rem,3.15rem);
  line-height:1.17; letter-spacing:-.012em;
  margin:26px 0 0; max-width:19ch;
}
.section-title em{font-style:italic; color:#B5708A}

section{position:relative}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60;
  height:var(--hdr);
  padding-top:env(safe-area-inset-top,0px);
  display:flex; align-items:center;
  background:rgba(255,248,243,.80);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.hdr.is-stuck{border-bottom-color:var(--hair); background:rgba(255,248,243,.93)}
.hdr .shell{display:flex; align-items:center; justify-content:space-between; gap:20px}

.mark{
  text-decoration:none; display:flex; align-items:baseline; gap:12px; min-width:0;
}
.mark b{
  font-size:13px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  white-space:nowrap;
}
.mark span{
  font-family:var(--serif); font-size:12px; color:var(--slate); white-space:nowrap;
  font-style:italic;
}

.nav{display:flex; gap:30px; align-items:center}
.nav a{
  text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate); padding:6px 0; position:relative;
  transition:color .22s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--pink); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover,.nav a.is-active{color:var(--navy)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}

.burger{
  display:none; width:42px; height:42px; margin-right:-9px;
  background:none; border:0; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.burger i{
  display:block; position:relative; width:22px; height:1.8px; background:var(--navy);
  transition:background .2s ease;
}
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:22px; height:1.8px; background:var(--navy);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.burger i::before{top:-7px}
.burger i::after{top:7px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:55;
  padding:calc(var(--hdr) + env(safe-area-inset-top,0px) + 26px) var(--gut)
          calc(env(safe-area-inset-bottom,0px) + 32px);
  background:linear-gradient(160deg,#FFF8F3 0%,#FAF3F6 52%,#F1E9F4 100%);
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1), visibility .3s;
}
.drawer.is-open{opacity:1; visibility:visible; transform:none}
.drawer ul{list-style:none; margin:0; padding:0}
.drawer li{border-bottom:1px solid var(--hair-soft)}
.drawer li:first-child{border-top:1px solid var(--hair-soft)}
.drawer a{
  display:block; padding:19px 2px; text-decoration:none;
  font-family:var(--serif); font-size:1.62rem; line-height:1.2;
}
.drawer a small{
  display:block; font-family:var(--sans); font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--lavender); margin-bottom:5px;
}
.drawer .drawer-foot{
  margin-top:34px; padding-top:22px; border-top:2px solid var(--pink);
  font-size:11px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate);
}

/* ---------- mascot presentation (CSS-only crop, source bytes untouched) ----------
   Source: Mascot-Source.png, 1024x1536.
   Hero window   = x 100..1006, y 186..1312   (906 x 1126)
   Badge window  = x 699..1003, y 987..1291   (304 x 304, circular)
   Only the poster's own lettering is cropped away. The artwork is never altered.
------------------------------------------------------------------------------- */
.mochi{position:relative; overflow:hidden}
.mochi img{
  position:absolute; height:auto; display:block;
  max-width:none;            /* the crop scales past 100% — the page reset must not clamp it */
}
/* hero window = x 96..1024, y 180..1336  (928 x 1156) */
.mochi--hero{
  aspect-ratio:928/1156;
  width:100%;
  /* feather the window so the artwork's own near-white ground
     dissolves into the wash instead of ending on a hard rectangle */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 5.5%, #000 97.2%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4.5%, #000 96.5%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 5.5%, #000 97.2%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4.5%, #000 96.5%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.mochi--hero img{width:110.345%; left:-10.345%; top:-15.571%}

.mochi--badge{
  aspect-ratio:1; border-radius:50%;
  box-shadow:0 0 0 1px rgba(202,187,241,.55), 0 14px 34px -18px rgba(13,37,67,.35);
}
.mochi--badge img{width:336.842%; left:-229.934%; top:-324.671%}

/* a field the exact tone of the artwork's own ground, fading out well past the
   window — so the feathered crop has nothing to butt against, as in the key art */
.art-halo{position:relative}
.art-halo::before{
  content:""; position:absolute; z-index:0;
  left:-14%; right:-14%; top:-8%; bottom:-8%;
  background:radial-gradient(closest-side ellipse at 50% 46%,
      rgba(247,246,248,1) 0%, rgba(247,246,248,.92) 44%,
      rgba(247,246,248,.52) 68%, rgba(247,246,248,0) 88%);
  pointer-events:none;
}
.art-halo .mochi{z-index:1}

/* ---------- hero ---------- */
.hero{padding-top:clamp(30px,5.2vw,74px)}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.92fr);
  gap:clamp(24px,3.6vw,64px);
  align-items:center;
}
.hero-copy{max-width:640px}
.hero h1{
  font-weight:900; text-transform:uppercase;
  font-size:clamp(2.75rem,5.2vw + 1rem,5.75rem);
  line-height:.915; letter-spacing:-.033em;
  margin:clamp(20px,2.6vw,34px) 0 0;
}
.hero .deck{margin-top:clamp(22px,2.4vw,32px); max-width:19ch}
.hero .micro{margin-top:clamp(18px,1.9vw,26px)}

.mochi-tag{
  margin:clamp(20px,2.2vw,30px) 0 0;
  font-size:13px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
}
.mochi-tag b{color:var(--lavender); font-weight:600; margin-right:12px}

.hero-links{
  display:flex; flex-wrap:wrap; gap:12px 30px;
  margin:clamp(24px,2.6vw,36px) 0 0;
}
.hero-links a{
  text-decoration:none; font-size:12.5px; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase;
  padding-bottom:7px; border-bottom:1.5px solid var(--pink);
  transition:border-color .25s ease, color .25s ease;
}
.hero-links a:last-child{color:var(--slate); border-bottom-color:var(--hair-soft)}
.hero-links a:hover{color:var(--navy); border-bottom-color:var(--navy)}

.hero-art{position:relative}
@media (prefers-reduced-motion:no-preference){
  .hero-art .mochi--hero{animation:drift 7.5s ease-in-out infinite}
}
@keyframes drift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-13px)}
}

/* hero foot band — the key art's bottom hairline with its two captions */
.band{
  margin-top:clamp(28px,3.4vw,52px);
  padding-top:15px;
  border-top:1.6px solid var(--pink);
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:8px 18px;
}
.band .l{font-size:12px; font-weight:700; letter-spacing:.20em; text-transform:uppercase}
.band .r{font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:var(--slate)}

/* ---------- generic section rhythm ---------- */
.sec{padding-block:clamp(66px,8.4vw,132px)}
.sec-head{max-width:760px}

/* ---------- philosophy ---------- */
.phil-body{
  margin-top:clamp(34px,4vw,58px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,66px);
}
.phil-body p{margin:0 0 1.1em}
.phil-body p:last-child{margin-bottom:0}
.lede{
  font-family:var(--serif); font-size:1.14rem; line-height:1.62; color:var(--navy);
}
.phil-body .rest{color:var(--slate); font-size:1rem; line-height:1.72}

.quote{
  margin:clamp(44px,5vw,78px) 0 0;
  padding:clamp(28px,3.4vw,44px) 0 0;
  border-top:1px solid var(--hair-soft);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,46px); align-items:start;
}
.quote .qmark{
  font-family:var(--serif); font-size:clamp(3rem,5vw,4.6rem); line-height:.8;
  color:var(--pink); opacity:.55;
}
.quote blockquote{
  margin:0; font-family:var(--serif);
  font-size:clamp(1.18rem,1.5vw + .62rem,1.66rem); line-height:1.44;
  max-width:30ch;
}
.quote figcaption{
  margin-top:20px; font-size:11px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--slate);
}

/* ---------- programs (editorial rows, not cards) ---------- */
.progs{margin-top:clamp(34px,4.2vw,60px); border-top:1.6px solid var(--pink)}
.prog{border-bottom:1px solid var(--hair-soft)}
.prog:last-child{border-bottom:1.6px solid var(--pink)}

.prog-head{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  font:inherit; color:inherit;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,2.6vw,42px); align-items:center;
  padding:clamp(22px,2.6vw,34px) 2px;
}
.prog-num{
  font-size:12px; font-weight:700; letter-spacing:.2em; color:var(--lavender);
  transition:color .25s ease;
}
.prog-name{
  font-family:var(--serif);
  font-size:clamp(1.42rem,2.3vw + .48rem,2.35rem); line-height:1.15;
  transition:color .25s ease;
}
.prog-name small{
  display:block; font-family:var(--sans); font-size:.8rem; font-weight:400;
  letter-spacing:0; color:var(--slate); margin-top:9px; line-height:1.55;
}
.prog-sign{position:relative; width:17px; height:17px; flex:none}
.prog-sign::before,.prog-sign::after{
  content:""; position:absolute; background:var(--navy); border-radius:1px;
  transition:transform .32s cubic-bezier(.4,0,.2,1), background .25s ease;
}
.prog-sign::before{left:0; right:0; top:7.6px; height:1.8px}
.prog-sign::after{top:0; bottom:0; left:7.6px; width:1.8px}
.prog-head[aria-expanded="true"] .prog-sign::after{transform:scaleY(0)}
.prog-head[aria-expanded="true"] .prog-num{color:var(--pink)}
.prog-head:hover .prog-name{color:#1B3F6B}

.prog-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.4,0,.2,1);
}
.prog-head[aria-expanded="true"] + .prog-panel{grid-template-rows:1fr}
.prog-panel > div{overflow:hidden}
.prog-inner{
  padding:0 2px clamp(26px,3vw,38px);
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.6vw,42px);
}
.prog-inner .spacer{width:22px}
@media (max-width:860px){ .prog-inner .spacer{display:none} .prog-inner{grid-template-columns:1fr} }

.courses{list-style:none; margin:0; padding:0; max-width:700px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:0 26px}
.courses li{
  padding:9px 0; font-size:.95rem; color:var(--navy);
  border-bottom:1px solid var(--hair-soft);
}
.prog-note{margin:18px 0 0; font-size:.86rem; color:var(--slate); max-width:46ch}

/* ---------- ask / explore / discover ---------- */
.learn{position:relative}
.learn-grid{
  margin-top:clamp(34px,4.2vw,58px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.learn-item{
  padding:clamp(22px,2.4vw,30px) clamp(20px,2.4vw,38px);
  border-left:1px solid var(--hair-soft);
}
.learn-item:first-child{border-left:1.6px solid var(--pink); padding-left:clamp(20px,2.4vw,34px)}
.learn-item h3{
  margin:0; font-size:12px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
}
.learn-item p{
  margin:16px 0 0; font-family:var(--serif); font-size:1.06rem; line-height:1.55;
  color:var(--navy);
}
.learn-badge{
  position:absolute; right:calc(var(--gut) - 6px); top:clamp(46px,6vw,86px);
  width:clamp(88px,9vw,128px);
}

/* ---------- instructor ---------- */
.who{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(26px,4vw,72px); align-items:start;
}
.who .who-name{
  font-family:var(--serif); font-size:clamp(1.7rem,2.6vw + .5rem,2.6rem);
  line-height:1.14; margin:24px 0 0;
}
.who .role{
  margin:14px 0 0; font-size:11px; font-weight:700; letter-spacing:.26em;
  text-transform:uppercase; color:var(--slate);
}
.who-text{padding-top:clamp(8px,1.4vw,26px)}
.who-text p{margin:0 0 1.1em; color:var(--slate); line-height:1.74}
.who-text p:last-child{margin-bottom:0}
.who-text .pull{
  font-family:var(--serif); color:var(--navy); font-size:1.2rem; line-height:1.55;
  border-left:2px solid var(--pink); padding-left:22px; margin-top:1.6em;
}

/* ---------- visit ---------- */
.visit-grid{
  margin-top:clamp(32px,4vw,56px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,4vw,72px); align-items:start;
}
.facts{margin:0; border-top:1.6px solid var(--pink)}
.facts div{
  display:grid; grid-template-columns:minmax(92px,.4fr) minmax(0,1fr);
  gap:18px; padding:17px 2px; border-bottom:1px solid var(--hair-soft);
}
.facts dt{
  font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate); padding-top:4px;
}
.facts dd{margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.5}
.facts dd span{display:block; font-family:var(--sans); font-size:.8rem; color:var(--slate); margin-top:5px}

.visit-note{
  font-family:var(--serif); font-size:clamp(1.1rem,1.4vw + .6rem,1.5rem);
  line-height:1.46; margin:0; max-width:24ch;
}
.visit-sub{margin:20px 0 0; font-size:.9rem; color:var(--slate); line-height:1.7; max-width:38ch}

/* ---------- footer ---------- */
.foot{
  padding-block:clamp(48px,5.4vw,78px) calc(clamp(30px,3.4vw,46px) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--hair-soft);
  background:linear-gradient(180deg,rgba(241,233,244,0) 0%,rgba(238,229,243,.62) 100%);
}
.foot-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
}
.foot-id{display:flex; align-items:center; gap:18px}
.foot-id .mochi--badge{width:58px; flex:none}
.foot-id b{font-size:13px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; display:block}
.foot-id span{font-family:var(--serif); font-style:italic; font-size:12.5px; color:var(--slate)}
.foot-nav{display:flex; flex-wrap:wrap; gap:10px 28px}
.foot-nav a{
  text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--slate); transition:color .22s ease;
}
.foot-nav a:hover{color:var(--navy)}
.foot-band{
  margin-top:clamp(28px,3.2vw,42px); padding-top:15px; border-top:1.6px solid var(--pink);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 18px;
}
.foot-band span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate)}
.foot-band .strong{color:var(--navy); font-weight:700}

/* ---------- reveal (only applied when motion is welcome) ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:90;
  background:var(--navy); color:var(--ivory); text-decoration:none;
  padding:12px 18px; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase;
}
.skip:focus{left:var(--gut); top:10px}

.js-reveal{opacity:0; transform:translateY(20px)}
.js-reveal.is-in{opacity:1; transform:none; transition:opacity .75s ease, transform .75s cubic-bezier(.22,.7,.3,1)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hero-grid{grid-template-columns:1fr; gap:clamp(20px,4vw,40px)}
  .hero-copy{max-width:none; order:1}
  .hero-art{order:2; width:min(72%,430px); margin-inline:auto}
  .phil-body,.who,.visit-grid{grid-template-columns:1fr}
  .learn-grid{grid-template-columns:1fr}
  .learn-item{border-left:0; border-top:1px solid var(--hair-soft); padding-inline:0}
  .learn-item:first-child{border-left:0; border-top:1.6px solid var(--pink); padding-left:0}
  /* stays positioned so .art-halo::before keeps resolving against the badge */
  .learn-badge{
    position:relative; right:auto; top:auto;
    width:96px; margin:clamp(30px,4vw,44px) 0 0 auto;
  }
  .who .who-name{margin-top:20px}
}

@media (max-width:760px){
  .nav{display:none}
  .burger{display:flex}
  .mark span{display:none}
  .hero-art{width:min(88%,360px)}
  .quote{grid-template-columns:1fr; gap:6px}
  .quote .qmark{font-size:3rem}
  .courses{grid-template-columns:1fr}
  .band .r,.foot-band span:last-child{font-size:10px}
  .facts div{grid-template-columns:1fr; gap:6px; padding:15px 2px}
  .facts dt{padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}
/* MVP additions: retain Mochi 02 typography, palette and hero geometry. */
.nav-register{border-bottom:2px solid var(--pink);padding-bottom:5px}.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:40px}.lesson-grid p{max-width:48ch;color:var(--slate)}.project-grid{margin-top:45px;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}.project-grid article{padding:30px 0;border-top:1px solid var(--hair-soft)}.project-grid h2,.project-grid h3{font:400 28px/1.3 var(--serif);margin:15px 0}.project-grid p{color:var(--slate);font-size:15px}.project-grid .eyebrow{font-size:10px;letter-spacing:.15em}.project-grid .button,.primary{display:inline-block;border:0;background:var(--navy);color:var(--ivory);padding:13px 22px;border-radius:4px;text-decoration:none;font:600 14px/1.5 var(--sans);cursor:pointer}.primary:hover{background:#284461}.primary:disabled{opacity:.5;cursor:default}.project-symbol{font-size:11px;letter-spacing:2px}.form-shell{max-width:940px;margin:0 auto;padding:55px 28px}.form-shell h1{font:400 clamp(44px,7vw,70px)/1.1 var(--serif);margin:12px 0 20px}.form-shell h2{font:400 30px/1.3 var(--serif);margin:30px 0 20px}.form-shell h3{font-size:17px;margin-top:28px}.form-shell .deck{font-size:23px}.preview-note{border-left:3px solid var(--pink);background:#ffffff70;padding:14px 18px;color:var(--slate);font-size:13px;margin:26px 0}.progress{list-style:none;display:flex;padding:0;gap:24px;border-bottom:1px solid var(--hair-soft);font-size:12px;margin:35px 0}.progress li{padding:12px 0;color:var(--slate)}.progress [aria-current]{border-bottom:3px solid var(--pink);color:var(--navy);font-weight:700}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin-bottom:32px}label{display:block;font:600 13px/1.6 var(--sans)}input:not([type=checkbox]),select,textarea{display:block;width:100%;font:400 16px/1.5 var(--sans);color:var(--navy);background:#fffdfb;border:1px solid #b5b5c1;border-radius:4px;padding:11px 12px;margin-top:6px}.wide{grid-column:1/-1}.secondary{background:transparent;color:var(--navy);border:1px solid var(--hair-soft);border-radius:4px;padding:12px 18px;font:600 13px var(--sans);cursor:pointer}.form-actions{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin:30px 0}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:#ffffff70;padding:24px;overflow-wrap:anywhere}.review-grid dt{font-size:11px;color:var(--slate)}.review-grid dd{margin:3px 0;font-size:15px}#agreement{border-top:1px solid var(--hair-soft);margin-top:38px;padding-top:35px}#agreement p,#full-policy p{font-size:15px;line-height:1.85}details{border:1px solid var(--hair-soft);padding:18px;margin:25px 0}summary{cursor:pointer;font-weight:600}#full-policy{padding-top:18px}.consents label,.intent{display:flex;align-items:flex-start;gap:12px;margin:20px 0;font-weight:400;font-size:14px}input[type=checkbox]{width:20px;height:20px;flex:0 0 20px;accent-color:var(--navy);margin-top:3px}#signature-pad{display:block;width:100%;height:170px;background:#fffdfb;border:1px solid #b5b5c1;margin:12px 0;touch-action:none;border-radius:4px}.hint{font-size:12px;color:var(--slate)}[role=alert]{color:#9b292e}#result{border:1px solid var(--pink);padding:25px;background:#fffaf8;margin-top:30px}#result button{margin:8px 8px 0 0}.form-footer{padding-top:30px;padding-bottom:35px;border-top:1px solid var(--hair-soft);font-size:13px}.form-step>label{margin-top:22px}.hero-art{pointer-events:none}.mochi-tag{display:none}@media(max-width:760px){.hdr{height:auto;min-height:66px}.hdr>.shell{flex-wrap:wrap;padding-block:14px;gap:15px}.hdr .nav{display:flex!important;gap:18px;font-size:12px}.hero{padding-top:45px}.lesson-grid,.project-grid{grid-template-columns:1fr}.fields,.review-grid{grid-template-columns:1fr}.wide{grid-column:auto}.progress{gap:12px;font-size:10px}.form-shell{padding:35px 22px}.primary,.secondary{min-height:44px}}

/* School subjects and teaching approach */
@media(min-width:901px){.hero-art{grid-column:1;grid-row:1}.hero-copy{grid-column:2;grid-row:1}.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.04fr)}}
.subject-list{margin-top:48px;border-top:1px solid var(--pink)}.subject-list article{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:32px 0;border-bottom:1px solid var(--line, #dcd6de)}.subject-list article:last-child{border-bottom-color:var(--pink)}.subject-list .eyebrow{padding-top:12px;color:#bf626d}.subject-list h3{font:clamp(28px,3vw,42px)/1.2 var(--serif);margin:0 0 24px}.subject-courses{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px}.subject-courses li{padding:0 0 12px;border-bottom:1px solid #ded7df;font-size:17px}.thinking-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:42px;margin-top:48px}.thinking-grid article{border-top:1px solid #d7cbdc;padding-top:24px}.thinking-symbol{font:42px var(--serif);color:#a58ac5}.thinking-grid h3{font:26px var(--serif);margin:24px 0 14px}.thinking-grid p{font-size:17px;line-height:1.8;color:var(--slate)}
@media(max-width:760px){.subject-courses{grid-template-columns:1fr}.subject-list article{grid-template-columns:30px 1fr}.thinking-grid{grid-template-columns:1fr;gap:28px}}

/* Existing English policy, with Mochi typography and palette. */
.policy-letter{max-width:940px;margin:auto;padding:64px 28px}.policy-letter> .eyebrow{color:#ad5262}.policy-section{padding:38px 0;border-bottom:1px solid #dcd4df}.policy-section:first-of-type{padding-top:20px}.policy-section h1{font:clamp(36px,5vw,58px)/1.12 var(--serif);max-width:20ch;margin:0 0 34px}.policy-section h2{font:clamp(28px,3vw,38px)/1.2 var(--serif);margin:0 0 24px}.policy-section h3{font:24px/1.4 var(--serif);margin:0 0 12px}.policy-section h3 span{font:14px var(--sans);display:block;margin-top:6px;color:var(--slate)}.policy-section p{font-size:17px;line-height:1.85;margin:0 0 18px}.policy-options{width:100%;border-collapse:collapse;margin:22px 0}.policy-options td{padding:22px 24px;background:rgba(235,222,241,.35);border-left:2px solid var(--pink);border-bottom:12px solid var(--blush)}.policy-options p:last-child{margin-bottom:0}.policy-letter a{color:var(--navy)}@media(max-width:600px){.policy-letter{padding:38px 22px}.policy-options td{padding:20px 16px}.policy-section p{font-size:16px}}

.subject-courses strong{display:block;font-weight:500}.subject-courses span{display:block;font-size:14px;line-height:1.7;color:var(--slate);margin-top:9px}.subject-intro{max-width:760px;font-size:17px;line-height:1.85;color:var(--slate);margin:0 0 28px}.calculus-bridge{margin-top:38px;padding:28px 0 0;border-top:1px solid var(--pink)}.calculus-bridge h4{font:30px/1.3 var(--serif);margin:14px 0 26px}.calculus-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}.calculus-pair h5{font:21px/1.4 var(--serif);margin:0 0 12px}.calculus-pair p,.bridge-note{font-size:15px;line-height:1.85;color:var(--slate)}.bridge-note{margin:24px 0 0;max-width:800px}@media(max-width:760px){.calculus-pair{grid-template-columns:1fr;gap:20px}}

.physics-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:32px;max-width:780px}.physics-figures figure{margin:0}.physics-figures img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:2px}.physics-figures figcaption{padding-top:14px}.physics-figures strong{display:block;font:21px/1.3 var(--serif)}.physics-figures span{display:block;font-size:13px;color:var(--slate);margin:7px 0}.physics-figures a{font-size:11px;color:var(--slate)}@media(max-width:520px){.physics-figures{gap:12px}.physics-figures strong{font-size:16px}.physics-figures span{font-size:11px}}

/* Comfortable policy reading on phones and foldable touchscreens. */
@media(max-width:1000px){.policy-letter{max-width:720px;padding:32px 22px}.policy-section p{font-size:19px;line-height:1.8}.policy-section h1{font-size:38px;line-height:1.18}.policy-section h2{font-size:28px}.policy-section h3{font-size:24px}.policy-section h3 span{font-size:17px}.policy-options{display:block}.policy-options tbody,.policy-options tr,.policy-options td{display:block;width:auto}.policy-options td{padding:22px 18px}.policy-section{padding:30px 0}}

/* Unified responsive layout: narrow phone, unfolded tablet, desktop. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hero-grid>*,.subject-list article>*,.project-grid>*{min-width:0}
.subject-courses span,.project-grid p,.bridge-note,.calculus-pair p{font-size:17px;line-height:1.8}
@media(min-width:761px) and (max-width:1040px){
 .hero-grid{grid-template-columns:1fr 1fr}.hero-art{grid-column:1;grid-row:1;width:100%;order:0}.hero-copy{grid-column:2;grid-row:1;order:0}
 .hero h1{font-size:clamp(42px,6vw,62px)}.subject-courses{grid-template-columns:repeat(2,minmax(0,1fr))}.project-grid{gap:28px}
}
@media(max-width:760px){
 :root{--gut:22px}
 .hdr{position:relative;height:auto}.hdr>.shell{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding-block:16px}
 .hdr .nav{display:flex;flex-wrap:wrap;gap:8px 20px}.hdr .nav a{font-size:13px;min-height:40px;display:inline-flex;align-items:center;letter-spacing:.08em}
 .hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}.hero-copy,.hero-art{grid-column:auto;grid-row:auto}.hero-copy{order:1}.hero-art{order:2;width:min(80%,340px)}
 .hero h1{font-size:clamp(44px,12vw,68px)}.hero .deck{font-size:25px}.hero .micro{font-size:17px}
 .sec{padding-block:44px}.section-title{font-size:34px;line-height:1.2}.subject-list article{grid-template-columns:minmax(0,1fr);gap:12px;padding-block:28px}.subject-list .eyebrow{padding:0}.subject-courses,.project-grid,.calculus-pair{grid-template-columns:minmax(0,1fr)}
 .subject-courses strong{font-size:20px}.subject-courses li{padding-bottom:20px}.subject-courses span,.subject-intro,.bridge-note,.calculus-pair p,.project-grid p{font-size:18px;line-height:1.8}
 .physics-figures{gap:14px}.physics-figures strong{font-size:17px}.physics-figures span{font-size:13px}
 .policy-letter{padding:30px 22px}.policy-section p{font-size:19px;line-height:1.8}.policy-section h1{font-size:36px}.form-footer{font-size:16px;overflow-wrap:anywhere}
}
@media(max-width:380px){:root{--gut:18px}.physics-figures{grid-template-columns:1fr}.physics-figures figure{display:grid;grid-template-columns:90px 1fr;gap:18px}.physics-figures figcaption{align-self:center;padding:0}}

/* Keep reading-heavy subject content in one column on phone/tablet widths,
   including a Fold browser retaining a 980px layout viewport. */
@media(max-width:1040px){
 .subject-courses,.calculus-pair{grid-template-columns:minmax(0,1fr)}
 .subject-list article{grid-template-columns:minmax(0,1fr);gap:12px}
 .subject-list .eyebrow{padding-top:0}
 .subject-courses span,.subject-intro,.calculus-pair p,.bridge-note{font-size:18px;line-height:1.8}
}

@media(pointer:coarse) and (max-device-width:600px){
 :root{--gut:20px}.hdr{position:relative;height:auto}.hdr>.shell{flex-wrap:wrap;gap:10px;padding-block:15px}.hdr .nav{display:flex!important;flex-wrap:wrap;gap:15px}.mark span{display:none}
 .hero-grid{grid-template-columns:minmax(0,1fr)}.hero-copy,.hero-art{grid-column:auto;grid-row:auto}.hero-copy{order:1}.hero-art{order:2;width:80%}.hero h1{font-size:44px;overflow-wrap:anywhere}.section-title{font-size:32px}.hero .deck{font-size:24px}
 .subject-courses,.calculus-pair,.project-grid,.fields,.review-grid{grid-template-columns:minmax(0,1fr)}.shell{max-width:100%}.band{flex-wrap:wrap}.band .r{max-width:100%;white-space:normal}.policy-letter{padding:24px 20px}.policy-section h1{font-size:36px}
}

/* Physical-phone fallback when Android retains a wide CSS viewport. */
.phone-layout{--gut:22px}
.phone-layout .hdr{position:relative;height:auto;min-height:0}
.phone-layout .hdr>.shell{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding-block:18px}
.phone-layout .mark{flex:none;white-space:nowrap}.phone-layout .mark span{display:none}
.phone-layout .hdr .nav{position:static;display:flex!important;flex-wrap:wrap;gap:10px 20px;width:100%;margin:0}
.phone-layout .nav a{font-size:12px;letter-spacing:.08em;white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}
.phone-layout .hero{padding-top:30px}
.phone-layout .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:30px}
.phone-layout .hero-copy{order:1;width:100%;max-width:none;margin:0}
.phone-layout .hero-art{order:2;width:min(80%,300px);margin-inline:auto}
.phone-layout .hero h1{font-size:38px;line-height:1.05;letter-spacing:-.035em;overflow-wrap:normal;word-break:normal;hyphens:none}
.phone-layout .hero .deck{font-size:25px;line-height:1.45;max-width:none}
.phone-layout .hero .micro{font-size:17px;line-height:1.65;max-width:none}
.phone-layout .hero-links a{font-size:12px;letter-spacing:.1em;white-space:nowrap}
@media(max-width:600px){.hero h1{font-size:clamp(30px,8.5vw,46px);overflow-wrap:normal;word-break:normal;hyphens:none}.hdr>.shell{flex-direction:column;align-items:flex-start}.hdr .nav{flex-wrap:wrap}.hero .deck,.hero .micro{max-width:none}}

.menu-toggle{display:none;border:1px solid var(--navy);background:transparent;color:var(--navy);font:600 15px var(--sans);padding:10px 16px;min-height:44px;border-radius:4px;cursor:pointer}.subject-list>article{scroll-margin-top:100px}
@media(max-width:760px){.hdr>.shell{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}.menu-toggle{display:block}.hdr .nav{flex-basis:100%;width:100%;flex-direction:column;align-items:stretch;gap:0!important}.menu-ready .hdr .nav:not(.is-open){display:none!important}.hdr .nav.is-open{display:flex!important}.hdr .nav a{display:flex;padding:12px 0;min-height:44px;font-size:16px;border-bottom:1px solid var(--hair-soft)}}
.phone-layout .hdr>.shell{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.phone-layout .menu-toggle{display:block}
.phone-layout .hdr .nav{flex-basis:100%;width:100%;flex-direction:column;align-items:stretch;gap:0!important}
.phone-layout.menu-ready .hdr .nav:not(.is-open){display:none!important}
.phone-layout .hdr .nav.is-open{display:flex!important}
.phone-layout .hdr .nav a{display:flex;padding:12px 0;min-height:44px;font-size:16px;border-bottom:1px solid var(--hair-soft)}
.course-image{display:block;width:100%;max-width:360px;height:auto;aspect-ratio:3/2;margin:0 0 18px;object-fit:contain}

/* Compact contact invitation */
#subjects{padding-bottom:32px}#visit{padding-block:40px 54px}#visit .shell{border-top:1px solid var(--hair-soft);padding-top:36px}#visit .eyebrow{margin-bottom:18px}#visit .section-title{font-size:clamp(30px,3.5vw,48px);line-height:1.15;margin:0 0 16px}#visit .contact-intro{color:var(--slate);margin-bottom:24px}#visit p{overflow-wrap:anywhere}@media(max-width:600px){#subjects{padding-bottom:16px}#visit{padding-block:24px 32px}#visit .shell{padding-top:24px}}

/* More legible school wordmarks */
.hdr .mark b{font-size:16px}.hdr .mark span{font-size:14px}.hero-copy>.eyebrow{font-size:15px}

/* Keep navigation reachable after jumping to a subject. */
body{overflow-x:clip}
.hdr,.phone-layout .hdr{position:sticky;top:0;z-index:60;background:rgba(255,248,243,.97);border-bottom:1px solid var(--hair-soft)}
html{scroll-padding-top:100px}
.back-to-top{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:55;min-height:44px;padding:10px 16px;border:1px solid var(--hair-soft);border-radius:24px;background:var(--navy);color:var(--ivory);font:600 14px/1.5 var(--sans);cursor:pointer;box-shadow:0 3px 14px #0d254320}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Course artwork: preserve the complete composition at every width. */
.subject-courses{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 36px;align-items:start}
.subject-courses li{min-width:0;padding-bottom:24px}
.course-image{width:100%;max-width:none;height:auto;aspect-ratio:3/2;object-fit:contain;display:block;margin:0 0 20px;border-radius:6px}
.subject-courses strong{line-height:1.4}
.subject-courses span{max-width:65ch}
#physics .subject-courses{grid-template-columns:minmax(0,1fr)}
@media(min-width:1041px){
 #physics .subject-courses li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:30px;align-content:start}
 #physics .course-image{grid-column:1;grid-row:1/3;margin:0}
 #physics .subject-courses strong,#physics .subject-courses span{grid-column:2}
}
.physics-figures{max-width:900px;gap:24px;align-items:start}
.physics-figures img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;object-position:center;background:rgba(255,248,243,.65)}
.physics-figures figure{min-width:0}
@media(max-width:1040px){
 .subject-courses{grid-template-columns:minmax(0,1fr);gap:28px}
 .course-image{max-width:640px;margin-inline:auto}
}
@media(max-width:600px){
 .physics-figures{grid-template-columns:minmax(0,1fr);gap:22px}
 .physics-figures figure{display:grid;grid-template-columns:110px minmax(0,1fr);gap:20px;align-items:center}
 .physics-figures figcaption{padding:0}
 .physics-figures strong{font-size:22px}
 .physics-figures span{font-size:14px}
}
.phone-layout .subject-courses{grid-template-columns:minmax(0,1fr)}
.phone-layout #physics .subject-courses li{display:block}

/* Quiet frames keep illustrations secondary to course descriptions. */
.course-image{width:82%;max-width:320px;border:1px solid rgba(13,37,67,.14);border-radius:10px;margin:0 0 18px;background:var(--ivory)}
.physics-figures img{border:1px solid rgba(13,37,67,.14);border-radius:8px}
@media(max-width:1040px){.course-image{width:82%;max-width:360px;margin:0 0 18px}}

/* Align each course as one centered editorial unit. */
.subject-courses li{width:100%;max-width:320px;justify-self:center}
.course-image{width:100%;max-width:none;margin-inline:0}
#physics .subject-courses li{max-width:none}
@media(max-width:1040px){
 .subject-courses li,#physics .subject-courses li{max-width:360px;margin-inline:auto}
 .course-image{width:100%;max-width:none;margin-inline:0}
}
.phone-layout .subject-courses li,.phone-layout #physics .subject-courses li{max-width:360px;margin-inline:auto}

/* Slightly larger course copy within the aligned artwork layout. */
.subject-courses strong{font-size:22px;line-height:1.4;font-weight:600}
.subject-courses span{font-size:19px;line-height:1.7}

@media(max-width:1040px){.subject-courses li,#physics .subject-courses li{max-width:400px}}
.phone-layout .subject-courses li,.phone-layout #physics .subject-courses li{max-width:400px}

/* Single-column courses use the available reading width. */
@media(max-width:1040px){#subjects>.shell{padding-inline:24px}.subject-courses li,#physics .subject-courses li{max-width:none;width:100%}.course-image{width:100%;max-width:none}}
.phone-layout .subject-courses li,.phone-layout #physics .subject-courses li{max-width:none;width:100%}