:root{
  --blue:#5A6430;
  --blue-lit:#7E8C54;
  --orange:#C0472C;
  --orange-bright:#FF8559;
  --on-orange:#FFFFFF;
  --paper:#F3F2E9;
  --panel:#FFFFFF;
  --ink:#15180D;
  --ink-soft:#535A44;
  --ink-faint:#8B9179;
  --rule:#15180D1c;
  --rule-soft:#15180D12;
  --sh-sm:0 1px 2px #15180D10, 0 12px 26px -18px #15180D3a;
  --sh-lg:0 2px 6px #15180D10, 0 40px 72px -40px #15180D52;
  --grain:.03;

  /* hero ground — switchable, see .hero[data-ground] below */
  --h-bg1:#F7F5EC; --h-bg2:#EBE9DA; --h-glow:#AFBE7E38;
  --h-ink:#191E0D; --h-soft:#555C41; --h-faint:#8A9076;
  --h-rule:#15180D22; --h-card:#FFFFFFd0; --h-veil:#15180D0a;
  --h-particle:#5A6430; --h-ray:#B6C58A; --h-rayop:.30;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --blue:#A9BA6E; --blue-lit:#C8D69B; --orange:#FF8559; --orange-bright:#FF8559; --on-orange:#1A0C07;
    --paper:#0A0D06; --panel:#161A0F; --ink:#EEF0E2; --ink-soft:#A3AA90; --ink-faint:#767D65;
    --rule:#FFFFFF1e; --rule-soft:#FFFFFF10; --grain:.05;
    --sh-sm:0 1px 2px #00000055, 0 12px 26px -18px #00000095;
    --sh-lg:0 2px 6px #00000055, 0 40px 72px -40px #000000a8;
  }
}
:root[data-theme="dark"]{
  --blue:#A9BA6E; --blue-lit:#C8D69B; --orange:#FF8559; --orange-bright:#FF8559; --on-orange:#1A0C07;
  --paper:#0A0D06; --panel:#161A0F; --ink:#EEF0E2; --ink-soft:#A3AA90; --ink-faint:#767D65;
  --rule:#FFFFFF1e; --rule-soft:#FFFFFF10; --grain:.05;
  --sh-sm:0 1px 2px #00000055, 0 12px 26px -18px #00000095;
  --sh-lg:0 2px 6px #00000055, 0 40px 72px -40px #000000a8;
}

*{box-sizing:border-box}
html{overflow-x:clip}
body{overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2{margin:0;font-weight:300;text-wrap:balance;
  font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:-.012em}
h3,h4{margin:0;font-family:"Plus Jakarta Sans",ui-sans-serif,sans-serif;font-weight:600;
  letter-spacing:-.015em;text-wrap:balance}
p{margin:0} img{display:block} a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.shell{max-width:1180px;margin:0 auto;padding:0 32px}
.lbl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint)}
.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:0;white-space:nowrap;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;font-weight:700;padding:13px 24px;
  border-radius:99px;transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s}
.btn-orange{background:var(--orange);color:var(--on-orange);box-shadow:0 12px 28px -14px var(--orange)}
.btn-orange:hover{box-shadow:0 18px 38px -14px var(--orange)}
.btn-line{border:1.5px solid var(--rule);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--blue);color:var(--blue)}

.tbc{border-bottom:1px dashed var(--orange);position:relative}
.tbc::after{content:"confirm";position:absolute;top:-8px;right:-4px;transform:translateX(100%);
  font-family:"IBM Plex Mono",monospace;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);background:color-mix(in srgb,var(--orange) 16%,transparent);
  padding:1px 4px;border-radius:3px;white-space:nowrap}

.grain{position:fixed;inset:-100%;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ================= dark hero band ================= */
.hero{position:relative;width:100%;height:min(760px,92vh);min-height:600px;overflow:hidden;
  background:
    radial-gradient(120% 92% at 50% 6%, var(--h-glow), transparent 62%),
    linear-gradient(180deg, var(--h-bg1) 0%, var(--h-bg2) 100%);
  color:var(--h-ink);isolation:isolate;transition:background .6s ease}

/* ---- the three grounds ---- */
.hero[data-ground="ivory"]{
  --h-bg1:#F7F5EC; --h-bg2:#EBE9DA; --h-glow:#AFBE7E38;
  --h-ink:#191E0D; --h-soft:#555C41; --h-faint:#8A9076;
  --h-rule:#15180D22; --h-card:#FFFFFFd0; --h-veil:#15180D0a;
  --h-particle:#5A6430; --h-ray:#B6C58A; --h-rayop:.30;
}
.hero[data-ground="sage"]{
  --h-bg1:#56653B; --h-bg2:#3A462A; --h-glow:#CBD9A03a;
  --h-ink:#F5F7EB; --h-soft:#CDD5B6; --h-faint:#9DA886;
  --h-rule:#FFFFFF30; --h-card:#3A462Acc; --h-veil:#FFFFFF18;
  --h-particle:#F0F5E0; --h-ray:#DEE8C0; --h-rayop:.20;
}
.hero[data-ground="forest"]{
  --h-bg1:#15220E; --h-bg2:#070C04; --h-glow:#3C5A2055;
  --h-ink:#F0F3E4; --h-soft:#B3BE95; --h-faint:#7F8A66;
  --h-rule:#FFFFFF24; --h-card:#1C2A12c0; --h-veil:#FFFFFF10;
  --h-particle:#E2EAC6; --h-ray:#C8D69B; --h-rayop:.17;
}
.rays{position:absolute;inset:-20% -10%;pointer-events:none;z-index:1;opacity:var(--h-rayop);
  transition:opacity .6s ease}
.rays i{position:absolute;top:-10%;height:130%;width:14%;transform-origin:top center;
  background:linear-gradient(180deg,var(--h-ray),transparent 78%);filter:blur(30px)}
.rays i:nth-child(1){left:13%;transform:rotate(11deg);animation:sway 21s ease-in-out infinite alternate}
.rays i:nth-child(2){left:36%;transform:rotate(-6deg);width:10%;animation:sway 26s ease-in-out infinite alternate-reverse}
.rays i:nth-child(3){left:59%;transform:rotate(8deg);width:16%;animation:sway 29s ease-in-out infinite alternate}
.rays i:nth-child(4){left:79%;transform:rotate(-12deg);width:9%;animation:sway 24s ease-in-out infinite alternate-reverse}
@keyframes sway{to{transform:rotate(0deg) translateX(3%)}}
#cloud{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;cursor:grab}
.hero-ui{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;justify-content:space-between}
.hero-ui a,.hero-ui button{pointer-events:auto}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 34px}
.topbar img{height:42px;width:auto}
.hnav{display:flex;gap:26px;align-items:center}
.hnav a{font-size:13.5px;font-weight:500;color:var(--h-soft)}
.hnav a:hover{color:var(--h-ink)}
/* buttons carry their own colour — the nav link rule must not reach inside them */
.hnav a.btn-orange{color:var(--on-orange)}
.hnav a.btn-glass{color:var(--h-ink)}
.hnav a.btn-wa{color:var(--wa-ink)}
.hnav .btn-orange{padding:11px 20px;font-size:13px}

.hcenter{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;text-align:center;padding:0 34px}
.heyebrow{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--h-faint)}
.hcenter h1{font-size:clamp(46px,7.4vw,100px);line-height:.98;letter-spacing:-.016em;
  color:var(--h-ink);max-width:15ch}
.hcenter h1 em{font-style:italic;color:var(--orange)}
.hsub{font-size:16.5px;line-height:1.55;color:var(--h-soft);max-width:52ch}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

.hbottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 34px 96px}
.hbottom .hcontrols{margin-left:auto}
.strapline{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(16px,2.1vw,26px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--h-soft);white-space:nowrap}
.strapline i{font-style:italic;text-transform:none;letter-spacing:0;color:var(--orange);
  font-size:.82em;padding:0 .28em}
.btn-glass{border:1px solid var(--h-rule);color:var(--h-ink);background:var(--h-veil);
  backdrop-filter:blur(8px)}
.btn-glass:hover{border-color:var(--orange);color:var(--orange)}
.hcontrols{display:flex;flex-direction:column;gap:8px;align-items:center}
.shapes,.grounds{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.grounds button{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--h-rule);background:var(--h-veil);backdrop-filter:blur(8px);
  color:var(--h-faint);transition:all .25s;display:flex;align-items:center;gap:7px}
.grounds button[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}
.grounds .sw{width:9px;height:9px;border-radius:50%;display:block;border:1px solid #15180D22}
.shapes button{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:7px 12px;border-radius:99px;cursor:pointer;
  border:1px solid var(--h-rule);background:var(--h-veil);backdrop-filter:blur(8px);
  color:var(--h-soft);transition:all .25s}
.shapes button[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}

/* ================= proof, straddling the join ================= */
.proof{position:relative;z-index:5;margin:-46px auto 0;max-width:1000px;
  background:var(--panel);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--sh-lg);
  display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden}
.proof div{padding:26px 22px;display:flex;flex-direction:column;gap:2px;align-items:center;
  text-align:center;border-left:1px solid var(--rule-soft)}
.proof div:first-child{border-left:0}
.proof .n{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:46px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--blue)}
.proof .stars{color:var(--orange);font-size:11px;letter-spacing:.14em;margin-top:4px}
.proof .lbl{margin-top:8px}

/* ================= formula marquee ================= */
/* Full-bleed. "width:100vw" is the usual way to write this and it is subtly
   wrong: 100vw includes the scrollbar, the content box does not, so the strip
   ends up ~8-17px wider than the page and drags the whole document sideways.
   The clip on the root below is what actually contains it; the width stays
   100vw so the strip still reaches both edges. */
.formulas{margin-top:44px;width:100vw;margin-left:calc(50% - 50vw);
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  padding:15px 0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ftrack{display:flex;gap:44px;width:max-content;animation:roll 52s linear infinite}
.formulas:hover .ftrack{animation-play-state:paused}
@keyframes roll{to{transform:translateX(-50%)}}
.ftrack span{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;white-space:nowrap;
  color:var(--ink-soft);display:flex;align-items:baseline;gap:12px}
/* No uppercase transform here, unlike the eyebrow labels elsewhere. These
   labels carry proper nouns — "B.Tech" became "B.TECH", the brand spelled
   wrong — and since subject pages label by topic rather than by course, all
   caps also gave us "GRAPH THEORY" and "CHEMICAL REACTIONS", which is a lot
   of shouting for something meant to sit quietly under a formula. Each label
   keeps the capitals it was written with. */
.ftrack span i{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:9.5px;
  letter-spacing:.12em;color:var(--orange)}

/* ================= live explainers ================= */
.explain{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.demo{background:var(--panel);border:1px solid var(--rule);border-radius:20px;
  box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column}
.demo .art{position:relative;background:
  repeating-linear-gradient(to right, var(--rule-soft) 0 1px, transparent 1px 26px),
  repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px 26px);
  padding:14px}
.demo svg{width:100%;height:236px;display:block;color:var(--ink)}
.demo .cap{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--rule-soft)}
.demo .cap h3{font-size:20px;line-height:1.2}
.demo .cap p{font-size:14.5px;color:var(--ink-soft)}
.demo .readout{position:absolute;top:20px;right:22px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.04em;
  background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(6px);
  border:1px solid var(--rule);border-radius:8px;padding:6px 10px;color:var(--blue)}
.gline{stroke:currentColor;opacity:.26;stroke-width:1.1;fill:none}
.gcurve{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round}
.gbar{fill:var(--blue);opacity:.20;stroke:var(--blue);stroke-width:.8;stroke-opacity:.5}
.gtan{stroke:var(--orange);stroke-width:2.2;stroke-linecap:round;fill:none}
.gdot{fill:var(--orange)}
.glab{font-family:"IBM Plex Mono",monospace;font-size:10.5px;fill:var(--ink-faint)}

/* ================= sections ================= */

/* One vertical rhythm for the whole site.
 *
 * 96px between sections on a desktop, which is where it has always been and is
 * right for this measure. The number was fixed, though, so a 375px phone got
 * the same 96px — nearly a fifth of the screen height, empty, between every
 * section. clamp() keeps the desktop value exactly as it was (the ceiling is
 * reached by about 1200px) and eases down to 56px on a phone, with no jump at
 * a breakpoint because the middle is interpolated rather than stepped. */
:root{--section-gap:clamp(56px,8vw,96px)}
section{padding:var(--section-gap) 0 0}
.head{display:flex;flex-direction:column;gap:13px;max-width:56ch;margin-bottom:34px}
h2{font-size:clamp(36px,4.9vw,60px);line-height:1.0;font-weight:300}
h2 em{font-style:italic;color:var(--blue)}
.head p{font-size:16.5px;color:var(--ink-soft)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:20px;padding:28px 26px 30px;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--sh-sm);
  transition:transform .32s cubic-bezier(.2,.8,.25,1),box-shadow .32s}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.card .glyph{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;
  background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--blue);margin-bottom:3px}
.card .deg{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--orange)}
.card h3{font-size:19.5px;line-height:1.2}
.card p{font-size:14.5px;color:var(--ink-soft)}
.card .tp{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.card .tp span{font-family:"IBM Plex Mono",monospace;font-size:10px;border:1px solid var(--rule);
  padding:5px 10px;border-radius:99px;color:var(--ink-soft)}
.quiet{margin-top:18px;padding:16px 22px;border-radius:14px;border:1px dashed var(--rule);
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.quiet p{font-size:14.5px;color:var(--ink-soft)}

/* dashed path */
.pathband{position:relative;margin-top:80px;height:260px;background:var(--panel);
  border:1px solid var(--rule);border-radius:22px;box-shadow:var(--sh-sm);overflow:hidden}
.pathband svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pathcurve{fill:none;stroke:var(--blue-lit);stroke-width:2.2;stroke-dasharray:8 10;opacity:.85}
.rider{fill:var(--orange)}
.pill{position:absolute;transform:translate(-50%,-50%);background:var(--panel);border-radius:13px;
  box-shadow:var(--sh-sm);border:1px solid var(--rule);padding:10px 15px;white-space:nowrap;
  display:flex;flex-direction:column;gap:1px}
.pill .t{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:15px}
.pill .s{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint)}
.gchip{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:var(--panel);border:1px solid var(--rule);box-shadow:var(--sh-sm);
  display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:20px;color:var(--blue)}
.b1{animation:bob1 7s ease-in-out infinite}
.b2{animation:bob2 9s ease-in-out infinite}
.b3{animation:bob1 8s ease-in-out infinite reverse}
@keyframes bob1{0%,100%{margin-top:0}50%{margin-top:-10px}}
@keyframes bob2{0%,100%{margin-top:0}50%{margin-top:9px}}
.pathcap{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint)}

/* sine */
.sinepanel{margin-top:18px;background:var(--panel);border:1px solid var(--rule);border-radius:22px;
  box-shadow:var(--sh-sm);padding:34px 38px;display:grid;grid-template-columns:1fr 320px;
  gap:44px;align-items:center}
.sinepanel svg{width:100%;height:168px;display:block;color:var(--ink)}
.axis{stroke:currentColor;opacity:.22;stroke-width:1.1;fill:none}
.wave{fill:none;stroke:var(--blue);stroke-width:2.8;stroke-linecap:round}
.headdot{fill:var(--orange)}
.lab{font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--ink-faint)}
.sinepanel h3{font-size:21px;line-height:1.2;margin-bottom:10px}
.sinepanel p{font-size:15px;color:var(--ink-soft)}

/* method */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:24px 22px 26px;
  display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-sm);
  transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.step:hover{transform:translateY(-4px)}
.step .pip{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:11px;
  background:color-mix(in srgb,var(--blue) 11%,transparent);color:var(--blue);margin-bottom:3px}
.step h3{font-size:18px;line-height:1.16;font-weight:600}
.step p{font-size:14px;color:var(--ink-soft)}

/* visit — takes its colour from the hero ground, so the page reads as one piece
   instead of ending on a slab that belongs to a different design. */
:root{
  --visit-bg:linear-gradient(158deg,#EBEEDB 0%,#DFE5C8 100%);
  --visit-ink:#15180D; --visit-soft:#4E5540; --visit-faint:#7C8369;
  --visit-rule:#15180D1a; --visit-link:#15180D33; --visit-edge:#5A643028;
}
body.gpc-ground-sage{
  --visit-bg:linear-gradient(158deg,#56653B 0%,#3E4A2A 100%);
  --visit-ink:#F5F7EB; --visit-soft:#D2DABC; --visit-faint:#AAB491;
  --visit-rule:#FFFFFF22; --visit-link:#FFFFFF3a; --visit-edge:#FFFFFF20;
}
body.gpc-ground-forest{
  --visit-bg:linear-gradient(158deg,#1B2A12 0%,#101A0A 100%);
  --visit-ink:#EFF2E3; --visit-soft:#BFC9A6; --visit-faint:#8D9873;
  --visit-rule:#FFFFFF1c; --visit-link:#FFFFFF33; --visit-edge:#FFFFFF1a;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --visit-bg:linear-gradient(158deg,#1C2A14 0%,#111A0C 100%);
    --visit-ink:#EFF2E3; --visit-soft:#BFC9A6; --visit-faint:#8D9873;
    --visit-rule:#FFFFFF1c; --visit-link:#FFFFFF33; --visit-edge:#FFFFFF1a;
  }
}
:root[data-theme="dark"]{
  --visit-bg:linear-gradient(158deg,#1C2A14 0%,#111A0C 100%);
  --visit-ink:#EFF2E3; --visit-soft:#BFC9A6; --visit-faint:#8D9873;
  --visit-rule:#FFFFFF1c; --visit-link:#FFFFFF33; --visit-edge:#FFFFFF1a;
}

.visit{background:var(--visit-bg);border:1px solid var(--visit-edge);
  border-radius:26px;padding:44px 48px;color:var(--visit-ink);
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;
  overflow:hidden;box-shadow:var(--sh-sm)}
.visit::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--orange)}
.visit .lbl{color:var(--visit-faint)}
/* "1fr" is minmax(auto,1fr), and auto will not shrink below the content's
   min-content width. The email address is a single unbreakable token about
   203px wide, so on a 320px phone the row refused to fit its 224px container,
   overflowed by 81px, and the parent's overflow:hidden cut the address to
   "info@gpcmathstuition.c". minmax(0,1fr) lets the column shrink; the wrap
   rule then lets the address break rather than being clipped. */
.nap .row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:16px;padding:13px 0;
  border-bottom:1px solid var(--visit-rule);align-items:baseline}
.nap .v{font-size:15.5px;color:var(--visit-ink);overflow-wrap:anywhere}

/* Narrower than this and the 86px label column costs more than it earns —
   stack it above the value so the value gets the full width. */
@media (max-width:400px){
  .nap .row{grid-template-columns:1fr;gap:4px}
}
.nap .v a{border-bottom:1px solid var(--visit-link)}
.nap .v a:hover{color:var(--orange);border-color:var(--orange)}
.visit .tbc{border-bottom-color:var(--orange)}
.visitcta h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:40px;
  line-height:1.04;margin-bottom:12px;color:var(--visit-ink)}
.visitcta p{font-size:15px;color:var(--visit-soft);margin-bottom:20px}

footer.site{margin-top:96px;border-top:1px solid var(--rule);padding:44px 0 42px}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:52px;padding-bottom:28px}
.foot img{height:56px;width:auto;margin-bottom:16px}
.foot p{font-size:14px;color:var(--ink-soft);max-width:44ch}
.fnap{font-size:14px;color:var(--ink-soft);display:flex;flex-direction:column;gap:5px}
/* the business name heads the address block, the way a NAP listing is read */
.fnap-name{color:var(--ink);font-weight:600}
.fnap a:hover{color:var(--orange)}

/* Social marks, in the networks' own colours.
   Facebook blue and the Instagram gradient are fixed — both read correctly on
   the cream ground and on the dark one. X is the exception: its brand colour
   is black, which disappears on a dark background, so its disc takes
   currentColor and the glyph takes the paper colour, inverting with the theme. */
.fsocial{display:flex;gap:6px;margin-top:10px;list-style:none;padding:0}
.fsocial a,.fsocial .is-soon{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  /* a slow spring rather than a linear slide — the overshoot is what reads as
     considered rather than merely animated */
  transition:transform .42s cubic-bezier(.22,1.3,.36,1);
}
.fsocial li:first-child a,.fsocial li:first-child .is-soon{margin-left:-11px}
.fsocial .is-x a,.fsocial .is-x .is-soon{color:#000}

.fsocial svg{
  display:block;
  transition:filter .42s ease;
}

/* The ring. It rests invisible at the mark's own size and expands past it on
   hover, so the motion comes from the halo rather than from the logo itself —
   a brand mark that stretches looks cheap, a mark that is lit does not. */
.fsocial a::after,.fsocial .is-soon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  opacity:0;transform:scale(.72);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,1.3,.36,1);
  pointer-events:none;
}

.fsocial a:hover,.fsocial a:focus-visible,
.fsocial .is-soon:hover{
  transform:translateY(-4px) scale(1.06);
}
.fsocial a:hover::after,.fsocial a:focus-visible::after,
.fsocial .is-soon:hover::after{
  opacity:1;transform:scale(1.24);
}
.fsocial a:hover svg,.fsocial a:focus-visible svg,
.fsocial .is-soon:hover svg{
  filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--ink) 28%,transparent))
         saturate(1.12);
}
.fsocial a:active{transform:translateY(-1px) scale(1.02);transition-duration:.12s}

/* Waiting on a URL: same mark, same motion so the treatment can be seen now.
   The difference is behavioural — no pointer, and nothing to click. */
.fsocial .is-soon{cursor:default}

@media (prefers-reduced-motion:reduce){
  .fsocial a,.fsocial .is-soon,.fsocial a::after,.fsocial .is-soon::after,.fsocial svg{
    transition:none;
  }
  .fsocial a:hover,.fsocial .is-soon:hover{transform:none}
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fsocial .is-x a,
  :root:not([data-theme="light"]) .fsocial .is-x .is-soon{color:#fff}
}
:root[data-theme="dark"] .fsocial .is-x a,
:root[data-theme="dark"] .fsocial .is-x .is-soon{color:#fff}
.fsocial a:hover,.fsocial a:focus-visible{
  color:var(--orange);
  background:color-mix(in srgb,var(--orange) 9%,transparent);
}
/* The WhatsApp button is fixed to the bottom-right corner of the viewport, so
   it hangs over whatever the last row of the page happens to be. At 1366px
   that was "Terms and Conditions", 50px of which sat under the button and
   could not be clicked.

   Clearing it downwards works but costs a band of dead space across the whole
   width. Where the row fits on one line the cheaper answer is sideways: the
   nav simply stops short of the button's column and nothing needs to move
   down at all. Only when the row wraps — and the nav spans the full width —
   is vertical clearance actually required. */
:root{--wa-clearance:74px}
@media (max-width:640px){ :root{--wa-clearance:66px} }

.fbot{border-top:1px solid var(--rule-soft);padding-top:22px;
  padding-bottom:var(--wa-clearance);display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap}

@media (min-width:1200px){
  /* The button is 145px wide at right:22px, so it reaches 167px in from the
     viewport edge — but the page's own side margin already absorbs most of
     that, so only the remainder needs reserving. 150px covers the worst case
     in this range (narrow end, smallest side margin) and still leaves the
     copyright and the links on one line. Below 1200px the row is too tight to
     guarantee that, so it clears the button downwards instead. */
  .fbot{padding-bottom:8px;padding-right:150px}
}
.fbot span,.fbot a{font-size:12.5px;color:var(--ink-faint)}
.fbot nav{display:flex;gap:18px;flex-wrap:wrap}
.fbot a:hover{color:var(--ink)}

.note{margin-top:38px;background:var(--panel);border:1px solid var(--rule);
  border-left:4px solid var(--orange);border-radius:16px;padding:24px 28px;
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--sh-sm)}
.note h4{font-family:"Plus Jakarta Sans",sans-serif;font-size:14.5px;font-weight:700;letter-spacing:0}
.note p{font-size:13.5px;color:var(--ink-soft);max-width:76ch}
.note b{color:var(--ink)}

@media (max-width:940px){
  .hnav .btn-orange{display:inline-flex}
  .split{flex-direction:column;align-items:flex-start;gap:0;padding:0 24px;margin-top:0}
  .split h1.right{text-align:left}
  .hbottom{flex-direction:column;align-items:flex-start;padding:0 24px 84px}
  .shapes{bottom:auto;top:74px}
  .explain{grid-template-columns:1fr}
  .strapline{display:none}
  .hbottom{justify-content:center}
  .proof{grid-template-columns:1fr 1fr;margin-top:-34px}
  .proof div:nth-child(3){border-left:0}
  .proof div:nth-child(n+3){border-top:1px solid var(--rule-soft)}
  .cards{grid-template-columns:1fr}
  .sinepanel{grid-template-columns:1fr;gap:24px;padding:26px 24px}
  .steps{grid-template-columns:1fr 1fr}
  .visit{grid-template-columns:1fr;gap:30px;padding:30px 26px}
  .foot{grid-template-columns:1fr;gap:26px}
  .shell{padding:0 22px}
}
@media (max-width:620px){
  .steps,.proof{grid-template-columns:1fr}
  .topbar img{height:32px}
  .pathband{height:220px}
  .pill,.gchip{transform:translate(-50%,-50%) scale(.86)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ---- WordPress menu output ---------------------------------------------- */
.nav-list{display:flex;align-items:center;gap:inherit;list-style:none;margin:0;padding:0}
.nav-list li{list-style:none;margin:0;padding:0}
.hnav{align-items:center}
.hnav .nav-list{gap:26px}
.fbot .nav-list{gap:18px;flex-wrap:wrap}
.fbot nav{display:flex}
@media (max-width:940px){
  .hnav .nav-list{display:none}
  .bar .btn,.pagehead .btn{padding:10px 16px;font-size:12.5px}
}

/* ================= WhatsApp ================= */
:root{ --wa:#147E3A; --wa-ink:#FFFFFF; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --wa:#2BC468; --wa-ink:#08150C; } }
:root[data-theme="dark"]{ --wa:#2BC468; --wa-ink:#08150C; }

.btn-wa{background:var(--wa);color:var(--wa-ink);
  box-shadow:0 12px 28px -14px var(--wa)}
.btn-wa:hover{box-shadow:0 18px 38px -14px var(--wa)}

/* floating button — sits clear of the shape controls and the page edge */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--wa);color:var(--wa-ink);
  font-family:"Plus Jakarta Sans",ui-sans-serif,sans-serif;font-size:14px;font-weight:700;
  padding:13px 20px 13px 17px;border-radius:99px;white-space:nowrap;
  box-shadow:0 10px 30px -10px #14180d55, 0 2px 6px #14180d22;
  transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s;
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px #14180d66}
.wa-float:active{transform:translateY(-1px)}
.wa-float svg{flex:none}
@media (max-width:640px){
  /* on a phone the label costs more than it earns — keep the mark only */
  .wa-float{right:16px;bottom:16px;padding:15px;gap:0}
  .wa-float span{display:none}
}
@media (prefers-reduced-motion:reduce){ .wa-float{transition:none} }

/* contact rows get a WhatsApp line of their own */
.nap .v .wa-inline{display:inline-flex;align-items:center;gap:6px;color:var(--wa)}
.nap .v .wa-inline:hover{color:var(--wa);border-color:var(--wa)}

/* ================= dropdown for the Subjects menu ================= */
.nav-list li{position:relative}
.nav-list .sub-menu{
  position:absolute;left:-16px;top:100%;margin-top:10px;min-width:230px;
  display:flex;flex-direction:column;gap:0;list-style:none;padding:8px;
  background:var(--panel);border:1px solid var(--rule);border-radius:14px;
  box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.25,1), visibility .22s;
  z-index:70;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-list .sub-menu a{
  display:block;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink-soft);
  white-space:nowrap;transition:background .18s, color .18s;
}
.nav-list .sub-menu a:hover{background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--ink)}
.nav-list .sub-menu a::after{display:none}
/* a small hover bridge so the pointer can cross the gap */
.nav-list .menu-item-has-children > a::before{
  content:"";position:absolute;left:0;right:0;top:100%;height:14px;
}
.nav-list .menu-item-has-children > a{position:relative}
/* inside the dark hero the panel must not be white-on-white */
.hnav .sub-menu{background:var(--h-card);border-color:var(--h-rule);backdrop-filter:blur(14px)}
.hnav .sub-menu a{color:var(--h-soft)}
.hnav .sub-menu a:hover{color:var(--h-ink);background:var(--h-veil)}

/* "see the full syllabus" link on the home cards */
.card-link{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--blue);
}
.card-link span{transition:transform .24s cubic-bezier(.2,.8,.25,1)}
.card:hover .card-link span{transform:translateX(4px)}
.quiet a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 35%,transparent)}
.quiet a:hover{border-color:var(--blue)}

/* ================= ambient scroll layer ================= */
/* The dust field. --dust-strength scales every mote's alpha in one place:
   the same value that is nearly invisible as olive-on-ivory glares as a pale
   speck on a dark ground, so the dark themes take it down rather than using a
   second set of colours. */
:root{ --dust:#5A6430; --dust-gold:#C8973F; --dust-warm:#C0472C; --dust-strength:.5; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --dust:#A9BA6E; --dust-gold:#D9AE63; --dust-warm:#E4794F; --dust-strength:.34; }
}
:root[data-theme="dark"]{ --dust:#A9BA6E; --dust-gold:#D9AE63; --dust-warm:#E4794F; --dust-strength:.34; }

#gpc-ambient{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;display:block;

  /* Clear the reading column.
     The field is atmosphere, and atmosphere behind a paragraph is just
     noise -- lines crossing a line of text are read as part of it for a
     fraction of a second, which is exactly the cost you do not want on a
     page someone came to read. So it is masked away down the middle and
     left to do its work in the margins, where nothing competes. */
  -webkit-mask-image:linear-gradient(to right,
    #000 0, #000 6%, transparent 24%, transparent 76%, #000 94%, #000 100%);
  mask-image:linear-gradient(to right,
    #000 0, #000 6%, transparent 24%, transparent 76%, #000 94%, #000 100%);
}

/* A phone has no margins to spare, so there is nowhere for the field to sit
   that is not behind the words. Below the breakpoint it simply goes. */
@media (max-width:900px){
  #gpc-ambient{display:none}
}

/* the reading function — a curve down the left margin that draws as you scroll */
.gpc-spine{
  position:fixed;left:18px;top:0;height:100vh;width:60px;
  z-index:40;pointer-events:none;overflow:visible;
}
.gpc-spine path{fill:none;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gpc-spine .spine-ghost{stroke:var(--ink);opacity:.07}
.gpc-spine #gpc-spine-path{
  stroke:var(--dust-gold);
  opacity:.55;
  transition:stroke-dashoffset .12s linear;
}
.gpc-spine #gpc-spine-dot{
  fill:var(--orange);
  opacity:0;transition:opacity .3s ease;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--orange) 55%, transparent));
}

/* it needs margin to live in — hide it whenever the page fills the width */
@media (max-width:1360px){ .gpc-spine{display:none} }
@media (prefers-reduced-motion:reduce){
  .gpc-spine #gpc-spine-path{transition:none}
  .gpc-spine #gpc-spine-dot{display:none}
}

/* ================= mobile navigation ================= */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--rule);border-radius:12px;
  color:var(--ink);transition:border-color .2s,color .2s;
}
.nav-toggle:hover{border-color:var(--orange);color:var(--orange)}
.nav-toggle .bars{display:flex;flex-direction:column;gap:4px;width:18px}
.nav-toggle .bars i{display:block;height:1.8px;border-radius:2px;background:currentColor;
  transition:transform .28s cubic-bezier(.2,.8,.25,1),opacity .2s}
.nav-toggle .bars i:nth-child(1){width:18px}
.nav-toggle .bars i:nth-child(2){width:13px}
.nav-toggle .bars i:nth-child(3){width:16px}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(5.8px) rotate(45deg);width:18px}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-5.8px) rotate(-45deg);width:18px}
/* inside the hero the bar sits on the hero ground, not the page ground */
.hnav .nav-toggle{border-color:var(--h-rule);color:var(--h-ink)}

.nav-scrim{
  position:fixed;inset:0;z-index:90;background:#15180D66;backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s ease;
}
body.nav-open .nav-scrim{opacity:1}

.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:95;
  width:min(340px,86vw);
  background:var(--panel);border-left:1px solid var(--rule);
  box-shadow:-30px 0 60px -30px #15180D55;
  display:flex;flex-direction:column;gap:8px;padding:18px 20px 26px;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.25,1);
  overflow-y:auto;overscroll-behavior:contain;
}
body.nav-open .nav-drawer{transform:translateX(0)}
body.nav-open{position:fixed;left:0;right:0;width:100%}

.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--rule-soft)}
.nav-drawer-head img{height:36px;width:auto}
.nav-close{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule);border-radius:11px;color:var(--ink);cursor:pointer}
.nav-close:hover{border-color:var(--orange);color:var(--orange)}

.drawer-list{list-style:none;margin:0;padding:8px 0 0;display:flex;flex-direction:column;gap:2px;flex:1}
.drawer-list li{list-style:none}
.drawer-list > li > a{
  display:block;padding:13px 12px;border-radius:11px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;line-height:1.2;
  color:var(--ink);transition:background .18s,color .18s;
}
.drawer-list > li > a:hover{background:color-mix(in srgb,var(--blue) 10%,transparent)}
.drawer-list .sub-menu{
  list-style:none;margin:2px 0 8px;padding:0 0 0 12px;
  display:flex;flex-direction:column;gap:1px;
  border-left:1px solid var(--rule);
  /* the desktop dropdown styling must not leak in here */
  position:static;opacity:1;visibility:visible;transform:none;
  background:none;border-radius:0;box-shadow:none;min-width:0;
}
.drawer-list .sub-menu a{
  display:block;padding:9px 12px;border-radius:9px;
  font-family:"Plus Jakarta Sans",ui-sans-serif,sans-serif;font-size:14.5px;font-weight:500;
  color:var(--ink-soft);white-space:normal;
}
.drawer-list .sub-menu a:hover{background:color-mix(in srgb,var(--blue) 9%,transparent);color:var(--ink)}

.nav-drawer-foot{display:flex;flex-direction:column;gap:10px;padding-top:18px;
  border-top:1px solid var(--rule-soft)}
.nav-drawer-foot .btn{width:100%}
.nav-drawer-note{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  line-height:1.7;letter-spacing:.04em;color:var(--ink-faint);margin-top:4px}

@media (max-width:940px){
  .nav-toggle{display:inline-flex}
  /* the floating WhatsApp button must not sit under the open drawer */
  body.nav-open .wa-float{opacity:0;pointer-events:none;transition:opacity .2s}
}
@media (min-width:941px){
  .nav-drawer,.nav-scrim{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .nav-drawer,.nav-scrim,.nav-toggle .bars i{transition:none}
}

/* ---- admin-only ground preview ---- */
.grounds{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center}
.grounds-tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--h-faint);opacity:.8;margin-right:2px}
.grounds button{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;padding:6px 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--h-rule);background:var(--h-veil);backdrop-filter:blur(8px);
  color:var(--h-faint);transition:border-color .25s,color .25s;
  display:inline-flex;align-items:center;gap:7px}
.grounds button[aria-pressed="true"]{border-color:var(--orange);color:var(--orange)}
.grounds .sw{width:9px;height:9px;border-radius:50%;display:block;box-shadow:0 0 0 1px #15180D22 inset}
.grounds-save{font-family:"IBM Plex Mono",monospace;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--h-faint);border-bottom:1px solid var(--h-rule);margin-left:4px}
.grounds-save:hover{color:var(--orange);border-color:var(--orange)}
@media (max-width:700px){ .grounds-tag,.grounds-save{display:none} }

/* =========================================================================
   Photography and subject illustrations
   The course banners are rendered on the same ivory as --paper, so they are
   bled to the page ground rather than boxed: no frame, no visible edge.
   Every <picture> carries width and height, so the box is reserved before
   the file arrives and nothing below it shifts on load.
   ========================================================================= */

.pic{display:block}
.pic img{display:block;width:100%;height:auto}

/* --- subject page banner ------------------------------------------------ */
/* the opening paragraph of a long page, set a step larger to give it a way in */
.entry-body .lede{font-size:1.09rem;line-height:1.66;color:var(--ink)}
.entry-body .lede + h2{margin-top:38px}
.entry-banner{margin:0 0 6px;padding:0}
.entry-banner .pic img{
  width:100%;
  border-radius:20px;
  /* the banner ground already matches --paper, so only the corners need it */
  background:var(--paper);
}

/* Photographs run to the full column width, and at their own 3:2 shape that
   is most of a laptop screen -- the contact form would start below the fold.
   So each one is given a band ratio and cropped to it. aspect-ratio sets the
   box before the file arrives, exactly as width and height would, so holding
   the crop in CSS costs nothing in layout shift. */

/* --- About portrait ----------------------------------------------------- */
.entry-portrait{margin:0 0 34px;padding:0}
.entry-portrait .pic img{
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:50% 32%;   /* keep her face clear of the top edge */
  border-radius:20px;
  box-shadow:var(--sh-lg);
}

/* --- the classroom, in the Method section ------------------------------- */
.method-shot{margin:0 0 26px;padding:0}
.method-shot .pic img{
  aspect-ratio:16/7;
  object-fit:cover;
  object-position:50% 40%;
  border-radius:20px;
  box-shadow:var(--sh-lg);
}

/* --- the room, on the Contact page -------------------------------------- */
.contact-room{margin:0 0 36px;padding:0}
.contact-room .pic img{
  aspect-ratio:16/7;
  object-fit:cover;
  object-position:50% 45%;
  border-radius:20px;
  box-shadow:var(--sh-lg);
}
.contact-room figcaption{
  margin-top:11px;
  font-size:13.5px;
  color:var(--ink-soft);
  letter-spacing:.01em;
}

/* A photograph is lit for a light page. On a dark ground it glares, so take
   a little brightness out of it rather than leaving it burning on the page. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .entry-portrait .pic img,
  :root:not([data-theme="light"]) .method-shot .pic img,
  :root:not([data-theme="light"]) .contact-room .pic img{
    filter:brightness(.92) saturate(.96);
  }
}
:root[data-theme="dark"] .entry-portrait .pic img,
:root[data-theme="dark"] .method-shot .pic img,
:root[data-theme="dark"] .contact-room .pic img{
  filter:brightness(.92) saturate(.96);
}

/* A band that reads well at 1100px is a letterbox slot at 380px. Give the
   photographs back their height on a phone. */
@media (max-width:760px){
  .entry-portrait .pic img{aspect-ratio:4/3}
  .method-shot .pic img,
  .contact-room .pic img{aspect-ratio:3/2}
}

@media (max-width:620px){
  .entry-banner{margin-bottom:2px}
  .entry-portrait,.method-shot,.contact-room{margin-bottom:24px}
  .entry-portrait .pic img,
  .method-shot .pic img,
  .contact-room .pic img{border-radius:14px}
}

/* =========================================================================
   Thank you — the page after an enquiry is sent
   ========================================================================= */

.ty{max-width:62ch;margin:0 auto;padding:64px 0 28px}

.ty-mark{color:var(--blue);margin-bottom:22px}
.ty-mark svg{display:block}

.ty h1{
  font-size:clamp(28px,4vw,40px);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
  margin:0 0 16px;
}
.ty-lead{font-size:17px;line-height:1.62;color:var(--ink-soft);margin:0 0 40px}

.ty h2{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 16px;
}

/* the three steps — numbered because they genuinely happen in order */
.ty-next{border-top:1px solid var(--rule);padding-top:26px;margin-bottom:34px}
.ty-next ol{margin:0;padding:0;list-style:none;counter-reset:ty}
.ty-next li{
  counter-increment:ty;
  position:relative;
  padding-left:40px;
  margin-bottom:15px;
  line-height:1.58;
  color:var(--ink);
}
.ty-next li::before{
  content:counter(ty);
  position:absolute;left:0;top:1px;
  width:25px;height:25px;
  display:grid;place-items:center;
  border:1px solid var(--rule);
  border-radius:50%;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}

/* the one block that is allowed to raise its voice */
.ty-urgent{
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:20px;
  padding:26px 28px 24px;
  box-shadow:var(--sh-sm);
  margin-bottom:38px;
}
.ty-urgent p{margin:0 0 18px;line-height:1.58;color:var(--ink)}
.ty-urgent .cta-row{display:flex;flex-wrap:wrap;gap:11px}
.ty-hours{
  margin:18px 0 0 !important;
  font-size:13.5px;
  color:var(--ink-faint);
}

.ty-more{border-top:1px solid var(--rule);padding-top:26px}
.ty-more p{margin:0 0 14px;color:var(--ink-soft);line-height:1.58}
.ty-links{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--rule-soft)}
.ty-links li{background:var(--paper)}
.ty-links a{
  display:block;
  padding:13px 2px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.ty-links a:hover,.ty-links a:focus-visible{color:var(--orange)}

.ty-back{margin-top:36px;font-size:14.5px}
.ty-back a{color:var(--ink-faint)}
.ty-back a:hover{color:var(--ink)}

@media (max-width:620px){
  .ty{padding-top:40px}
  .ty-urgent{padding:22px 20px 20px;border-radius:16px}
  .ty-urgent .cta-row .btn{width:100%;justify-content:center}
}

/* =========================================================================
   The map
   ========================================================================= */

.gpc-map{margin:26px 0 0;padding:0}
.gpc-map iframe{
  display:block;
  width:100%;
  height:clamp(280px,40vh,420px);
  border:1px solid var(--rule);
  border-radius:20px;
  background:var(--panel);
}
.gpc-map figcaption{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 18px;
  margin-top:11px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.gpc-map figcaption a{color:var(--ink);text-underline-offset:3px}
.gpc-map figcaption a:hover{color:var(--orange)}

/* Google's map is lit for a light page; on a dark ground it is a glaring
   white slab, so take the worst of the brightness out of it. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gpc-map iframe{filter:brightness(.86) saturate(.9)}
}
:root[data-theme="dark"] .gpc-map iframe{filter:brightness(.86) saturate(.9)}

/* on the home page the map closes the Visit block, which has its own ground */
#visit .gpc-map{margin-top:30px}
#visit .gpc-map iframe{border-color:var(--visit-edge,var(--rule))}
#visit .gpc-map figcaption{color:var(--visit-soft,var(--ink-soft))}
#visit .gpc-map figcaption a{color:var(--visit-ink,var(--ink))}

@media (max-width:620px){
  .gpc-map iframe{border-radius:14px}
}

/* =========================================================================
   Subject hero
   Inherits every --h-* token from .hero, so the three grounds and both
   themes work here with no second set of colours. Only the proportions
   change: a subject page has a page below it to get on with, so the hero
   is a band rather than a screen.
   ========================================================================= */

.shero{
  height:auto;
  min-height:0;
  padding:0;
  display:block;
}
.shero-cloud{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  pointer-events:none;
}
.shero-in{
  position:relative;z-index:2;
  padding:62px 32px 56px;
  max-width:1120px;margin:0 auto;
}
.shero .lbl{color:var(--h-faint)}
.shero h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;
  font-size:clamp(32px,5vw,58px);
  line-height:1.04;
  letter-spacing:-.018em;
  color:var(--h-ink);
  margin:14px 0 0;
  max-width:16ch;
  text-wrap:balance;
}
.shero-sub{
  font-size:16.5px;
  line-height:1.55;
  color:var(--h-soft);
  max-width:48ch;
  margin:16px 0 0;
}
.shero .acts{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-start;margin-top:28px}
.shero .acts .btn-glass{color:var(--h-ink)}
.shero .acts .btn-orange{color:var(--on-orange)}

/* the entry below no longer needs to clear a banner */
.shero + main .entry{padding-top:54px}

@media (max-width:900px){
  /* the shape moves behind the text rather than beside it, so the text
     needs the ground to stay readable over it */
  .shero-in{padding:220px 20px 44px}
  .shero h1{max-width:none}
}
@media (max-width:620px){
  .shero-in{padding:180px 18px 38px}
  .shero .acts .btn{width:100%;justify-content:center}
}

/* =========================================================================
   Link to the Google listing
   A rating a business prints about itself counts for little; the same rating
   one click from the reviews it came from counts for a lot. So wherever the
   number appears, it is reachable.
   ========================================================================= */

.g-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 34%, transparent);
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.g-link:hover,.g-link:focus-visible{
  color:var(--orange);
  text-decoration-color:currentColor;
}
.proof .g-link{text-decoration-color:color-mix(in srgb, currentColor 28%, transparent)}

/* =========================================================================
   Worked demonstration inside page content
   The front page's version plays by itself, to be caught in passing. This one
   waits for the reader, and reports the shortfall closing — so the panel is
   built around the figures as much as the drawing.
   ========================================================================= */

.gdemo{
  margin:34px 0;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:20px;
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
.gdemo-head{padding:22px 24px 4px}
.gdemo-head h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;font-size:clamp(21px,2.6vw,27px);line-height:1.18;
  margin:9px 0 0;color:var(--ink);
}
.gdemo-art{padding:6px 10px 0}
.gdemo-art svg{display:block;width:100%;height:auto}

.gd-gridline{stroke:var(--rule-soft);stroke-width:1}
.gd-axis{stroke:var(--rule);stroke-width:1.4;fill:none}
.gd-curve{fill:none;stroke:var(--blue);stroke-width:2.6;stroke-linecap:round}
.gd-bar{fill:var(--blue-lit);fill-opacity:.26;stroke:var(--blue-lit);stroke-width:.8}
.gd-tick,.gd-fn{
  font-family:"IBM Plex Mono",monospace;font-size:11px;fill:var(--ink-faint);
}
.gd-fn{font-size:13px;fill:var(--blue)}

.gdemo-controls{padding:10px 24px 20px}
.gdemo-slider{display:block}
.gdemo-slider input{
  width:100%;margin-top:8px;accent-color:var(--blue);cursor:pointer;
}
.gdemo-slider input:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

.gdemo-figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1px;margin:18px 0 0;padding:0;
  background:var(--rule-soft);border:1px solid var(--rule);border-radius:12px;overflow:hidden;
}
.gdemo-figures > div{background:var(--panel);padding:13px 15px}
.gdemo-figures dt{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-faint);
}
.gdemo-figures dd{
  margin:6px 0 0;font-size:19px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.gdemo-figures .gd-exact{color:var(--blue)}
.gdemo-figures .gd-err{color:var(--orange);transition:color .4s ease}
.gdemo.is-converged .gd-err{color:var(--blue)}

.gdemo figcaption{
  padding:0 24px 22px;font-size:14.2px;line-height:1.6;color:var(--ink-soft);
}

@media (max-width:620px){
  .gdemo{border-radius:16px;margin:26px 0}
  .gdemo-head,.gdemo-controls,.gdemo figcaption{padding-left:18px;padding-right:18px}
  .gdemo-figures dd{font-size:17px}
}

/* =========================================================================
   Google reviews
   Shaped the way reviews look on Google, because that shape is what makes
   them read as reviews rather than as copy. The palette stays ours; only
   the arrangement and the mark are borrowed, and both are accurate — these
   are genuinely the reviews from the listing.
   ========================================================================= */

/* No extra margin. This is a <section>, so it already carries the shared
   rhythm above it; the additional 44px made it the only band on the page
   separated by 140px instead of 96, and a single wider gap reads as a hole
   rather than as deliberate. The white panel also draws its own edge against
   the cream, so it needs less separation than its neighbours, not more. */
.greviews{margin-top:0}

.greviews-head{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:20px 20px 0 0;
  border-bottom:0;
  padding:24px 26px;
}
.gmark{display:flex;flex:0 0 auto}
.greviews-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:1}
.greviews-score .scr{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;font-size:40px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.gstars{color:#F4B400;letter-spacing:2px;font-size:17px;line-height:1}
.gstars.sm{font-size:12.5px;letter-spacing:1.5px;display:block;margin-top:3px}
.gcount{font-size:14px;color:var(--ink-soft)}
.greviews-all{flex:0 0 auto;padding:11px 18px;font-size:13px}

/* --- the slider -----------------------------------------------------------
   A scroll container with snap points rather than a JavaScript carousel:
   swipe, trackpad, keyboard and screen readers all work before any script
   loads, and the arrows below simply add a second way in. */
.gslider{
  position:relative;
  border:1px solid var(--rule);
  border-top:0;
  border-radius:0 0 20px 20px;
  background:var(--rule-soft);
  overflow:hidden;
}
.gtrack{
  display:flex;
  gap:1px;
  margin:0;padding:0;list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
/* While it is drifting, snap has to go: it would drag the scroll back to the
   nearest card on every frame and the movement would judder to a halt. */
.gslider.is-flowing .gtrack{scroll-snap-type:none}
.gtrack::-webkit-scrollbar{display:none}
.gtrack:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}

.gcard{
  flex:0 0 clamp(250px, 33.333%, 380px);
  scroll-snap-align:start;
  background:var(--panel);
  padding:22px 24px 24px;
}
/* with only a couple of reviews, let them fill the width instead of
   sitting in a short row with a gap after them */
.gslider.is-static .gcard{flex:1 1 0}
.gcard-top{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.gavatar{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:16px;
  color:var(--panel);
}
.gavatar[data-tone="a"]{background:var(--blue)}
.gavatar[data-tone="b"]{background:var(--orange)}
.gavatar[data-tone="c"]{background:var(--blue-lit)}
.gavatar[data-tone="d"]{background:var(--dust-gold)}
.gname{font-weight:600;font-size:14.5px;color:var(--ink);display:block;line-height:1.2}
.gquote{
  margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);
  font-family:"Plus Jakarta Sans",ui-sans-serif,sans-serif;
}

/* --- the pause control ---
   Content that moves on its own has to be stoppable by somebody who cannot
   hover, so hovering is not the only way to hold it still. */
.gnav{
  display:flex;align-items:center;justify-content:flex-end;
  background:var(--panel);
  border-top:1px solid var(--rule);
  padding:9px 14px;
}
.gpause{
  display:inline-flex;align-items:center;gap:8px;
  font:500 12px/1 "Plus Jakarta Sans",sans-serif;
  padding:7px 13px 7px 10px;
  border:1px solid var(--rule);border-radius:99px;
  background:transparent;color:var(--ink-faint);cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.gpause:hover{color:var(--ink);border-color:var(--blue)}
.gpause:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* two bars for pause, a triangle once it is already stopped */
.gpause-ico{
  width:9px;height:10px;display:block;
  border-left:3px solid currentColor;border-right:3px solid currentColor;
}
.gpause[aria-pressed="true"] .gpause-ico{
  border:0;
  width:0;height:0;
  border-left:9px solid currentColor;
  border-top:5.5px solid transparent;
  border-bottom:5.5px solid transparent;
}

.greviews-note{
  margin:13px 0 0;font-size:13px;color:var(--ink-faint);
}

@media (max-width:620px){
  .greviews-head{padding:20px;border-radius:16px 16px 0 0}
  .gslider{border-radius:0 0 16px 16px}
  .gcard{flex:0 0 84%}
  .greviews-score .scr{font-size:32px}
  .greviews-all{width:100%;justify-content:center}
}

/* =========================================================================
   Numbered steps inside page content

   The same device as the Method steps on the home page, so a reader who has
   seen one recognises the other. Numbered because these genuinely happen in
   order -- numbering that encodes nothing is just decoration.

   Every selector here is written through .gsteps on purpose. The panel lives
   inside .entry-body, which styles any ul or ol it finds as a flex column and
   gives every h2 a large top margin -- both sensible for prose and both wrong
   for a panel. Those rules are more specific than a bare class, so this block
   has to out-specify them rather than merely come later.
   ========================================================================= */

.gsteps{
  margin:40px 0;
  padding:30px 30px 32px;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:22px;
  box-shadow:var(--sh-lg);
}
.gsteps .gsteps-head{margin:0 0 26px;max-width:44ch}
.gsteps .gsteps-head h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(24px,3.2vw,34px);
  line-height:1.12;
  margin:10px 0 0;
  color:var(--ink);
  text-wrap:balance;
}

.gsteps .gsteps-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
  /* The hairlines between cards used to be a tinted background showing
     through a 1px gap. That works only while the grid is full: four cards
     in a row of three left two empty cells, and the tint showed through
     them as a grey block. The panel colour goes here instead, and each card
     draws its own outline, so an empty cell is simply empty. */
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:16px;
  overflow:hidden;
}
.gsteps .gstep{
  background:var(--panel);
  padding:22px 22px 24px;
  margin:0;
  box-shadow:0 0 0 1px var(--rule-soft);
}
.gsteps .gstep-n{
  display:block;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.16em;
  color:var(--orange);
  margin:0 0 11px;
}
.gsteps .gstep h3{
  font-size:15.5px;line-height:1.3;color:var(--ink);
  margin:0 0 8px;
}
.gsteps .gstep-body p{
  margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);
}
.gsteps .gstep-body p + p{margin-top:9px}

/* the panel reaches a little wider than the reading column it sits in */
.entry .gsteps{
  margin-left:calc(-1 * clamp(0px, 4vw, 40px));
  margin-right:calc(-1 * clamp(0px, 4vw, 40px));
}

@media (max-width:620px){
  .gsteps{padding:22px 18px 24px;border-radius:16px;margin:30px 0}
  .entry .gsteps{margin-left:0;margin-right:0}
}

/* =========================================================================
   Credentials row on a subject page
   A reader who arrives here from a search never passes the home page, so the
   proof bar never reaches them. These are the same figures, from the same
   settings, put where that reader actually is.
   ========================================================================= */

.creds{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;
  margin:26px 0 6px;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:18px;
  overflow:hidden;
}
.cred{
  background:var(--panel);
  padding:18px 20px 19px;
  box-shadow:0 0 0 1px var(--rule-soft);
}
.cred-v{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:30px;line-height:1;
  color:var(--blue);
  font-variant-numeric:tabular-nums;
}
.cred-star{font-size:19px;color:#F4B400;margin-left:4px}
.cred-k{
  display:block;
  margin-top:8px;
  font-size:13px;line-height:1.45;
  color:var(--ink-soft);
}

@media (max-width:620px){
  .creds{border-radius:14px;margin-top:20px}
  .cred{padding:15px 16px 16px}
  .cred-v{font-size:26px}
}

/* =========================================================================
   Subjects — the landing page
   ========================================================================= */

.subj-intro{
  max-width:62ch;
  margin:44px auto 0;
  font-size:17px;
  line-height:1.62;
  color:var(--ink-soft);
}
.subj-intro p{margin:0 0 14px}

/* These groups are <section> elements, so they also pick up the 96px top
   padding that "section{padding:96px 0 0}" gives the big home-page bands —
   on top of their own margin. Stacked, that left a 150px hole between the
   intro and the first group heading. The group's own margin sets the rhythm
   here; the page-level padding is not wanted a second time.
   (The home page's copies are <div>s, which is why only this page showed it.) */
.subj-group{margin-top:56px;padding-top:0}
.subj-group .head{max-width:56ch;margin-bottom:30px}
.subj-group .head h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(26px,3.6vw,40px);
  line-height:1.1;
  margin:10px 0 0;
  color:var(--ink);
}
.subj-group .head p{
  margin:13px 0 0;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.58;
}

/* the school group gets fewer cards; let them keep the same width as the
   degree row above rather than stretching to fill it */
.subj-group .cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
/* Two cards where the row above has three. Match that row's column width
   instead of stretching to fill, and fall back to the same auto-fit as the
   degrees once a third column no longer fits — otherwise the school cards
   end up narrower than the degree cards on a tablet. */
#school .cards,
#home-school .cards{
  grid-template-columns:repeat(auto-fit,minmax(280px,calc(33.333% - 12px)));
}
@media (max-width:1000px){
  #school .cards,
  #home-school .cards{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* The home page reuses the Subjects-page grouping, one heading level deeper:
   the section already owns the h2, so the group heading is an h3 and the
   subject titles are h4. Both need the same look they have on Subjects. */
#courses .subj-group{margin-top:46px}
#courses .subj-group:first-of-type{margin-top:34px}
#courses .subj-group .head h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(24px,3.1vw,34px);
  line-height:1.12;
  margin:10px 0 0;
  color:var(--ink);
}
#courses .card h4{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500;
  font-size:21px;
  line-height:1.2;
  margin:12px 0 0;
  color:var(--ink);
}

.courses-all{margin:34px 0 0;text-align:center}
.courses-all a{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
}
.courses-all a:hover{border-color:var(--orange);color:var(--orange)}

.card-for{
  margin:14px 0 0 !important;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-faint);
  font-style:italic;
}

@media (max-width:620px){
  .subj-group{margin-top:40px}
  .subj-intro{margin-top:32px;font-size:16px}
  #school .cards,
  #home-school .cards{grid-template-columns:1fr}
}

/* =========================================================================
   Subjects in the footer
   Drawn from the same list the Subjects page and the home page use, so it
   cannot fall out of step with them. It also gives every page a route into
   all five — useful for a visitor, and it means each subject page is one
   link from every other page on the site.
   ========================================================================= */

.fsubjects ul{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.fsubjects a{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:14.5px;
  color:var(--ink-soft);
  text-decoration:none;
}
.fsubjects a:hover{color:var(--ink)}
.fsub-deg{
  font-family:"IBM Plex Mono",monospace;
  font-size:9.5px;
  letter-spacing:.12em;
  color:var(--ink-faint);
  white-space:nowrap;
}
.fsub-all a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fsub-all{margin-top:3px}

@media (max-width:940px){
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .foot{grid-template-columns:1fr;gap:34px}
}

/* =========================================================================
   Lining figures in the display face

   Cormorant Garamond ships old-style numerals by default: 1 has no upper
   serif and sits at x-height, so "Classes 6 to 10" reads as "Classes 6 to IO"
   and the proof bar's "13+" as "I3+". Old-style figures are lovely inside a
   paragraph, where they sit among lowercase letters — they are wrong in a
   heading, and wrong anywhere a number is the thing being read.

   Both properties are set: font-variant-numeric is the standard one, and
   font-feature-settings covers browsers that only honour the raw OpenType
   flag. Anywhere Cormorant carries a number is listed here.
   ========================================================================= */

h1, h2, h3, .display,
.strapline,
.proof .n,
.ftrack span,
.pill .t, .gchip,
.visitcta h3,
.scr, .cred-v,
.gsteps .gsteps-head h2,
.subj-group .head h2,
.gdemo-head h3, .gdemo-figures dd,
.entry-cta h2,
.ty h1, .ty-urgent h3,
.shero h1,
.card h3, .deg{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

/* =========================================================================
   The teacher
   A parent choosing a tuition centre is choosing a person, so the portrait
   leads and everything else follows it.
   ========================================================================= */

.teacher{max-width:1000px;margin:0 auto;padding:56px 0 0}

.teacher-head{
  display:grid;
  grid-template-columns:minmax(260px,400px) 1fr;
  gap:44px;
  align-items:center;
  margin-bottom:52px;
}
.teacher-photo{margin:0}
.teacher-photo .pic img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:50% 28%;
  border-radius:22px;
  box-shadow:var(--sh-lg);
}
.teacher-id h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:300;
  font-size:clamp(44px,6.5vw,74px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:12px 0 0;
}
.teacher-role{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--orange);
  margin:14px 0 0;
}
.teacher-lead{
  font-size:17px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:44ch;
  margin:20px 0 0;
}
.teacher-id .acts{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-start;margin-top:28px}

/* the five things that are true at once */
.teacher-facts ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:20px;
  overflow:hidden;
}
.teacher-facts li{
  background:var(--panel);
  padding:26px 26px 28px;
  margin:0;
  box-shadow:0 0 0 1px var(--rule-soft);
}
.teacher-facts h2{
  font-family:"Plus Jakarta Sans",ui-sans-serif,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 9px;
}
.teacher-facts p{
  margin:0;
  font-size:14.2px;
  line-height:1.6;
  color:var(--ink-soft);
}

.teacher-body{max-width:64ch;margin:46px auto 0;color:var(--ink-soft);line-height:1.65}
.teacher .entry-cta{margin-top:52px}

@media (max-width:820px){
  .teacher-head{grid-template-columns:1fr;gap:30px}
  .teacher-photo .pic img{aspect-ratio:3/2}
  .teacher{padding-top:36px}
}
@media (max-width:620px){
  .teacher-facts li{padding:22px 20px 24px}
  .teacher-id .acts .btn{width:100%;justify-content:center}
}


/* =========================================================================
   Touch targets
   =========================================================================
   Apple asks for 44px, Google for 48px. Measured on a 375px viewport these
   were 29px (the hero shape chips), 36px (the card links) and 13px (the
   Google rating link) — all comfortably missable with a thumb. The text
   stays the size it was; only the hit area grows. */
@media (max-width:900px){
  .shapes button,.grounds button{
    min-height:44px;
    padding-top:0;padding-bottom:0;
    display:inline-flex;align-items:center;
  }
  .card-link,.g-link,.fsub-all a,.courses-all a{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  /* Link lists in the footer: stacked links, not links inside a sentence, so
     growing the hit area costs nothing and they were 16-23px tall. */
  .fbot nav a,.fsubjects a,.fnap a{
    min-height:44px;
    display:inline-flex;align-items:center;
  }
  .gpause{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}

  /* The contact block. These are not prose links — they are the page's actual
     calls to action, one per row, and on a phone tapping the number IS the
     conversion. They measured 20-26px. */
  .nap .v a,.gpc-map figcaption a{
    min-height:44px;
    display:inline-flex;align-items:center;
  }

  /* the smallest decorative labels, nudged up to something readable on a phone */
  .pathcap{font-size:11px}
  .heyebrow{font-size:11px}
}

/* Deliberately NOT enlarged: the phone number, email and "Open in Google Maps"
   links that sit inside sentences on the contact and visit blocks. WCAG 2.5.8
   exempts a link in a run of text precisely because padding it out to 44px
   wrecks the line spacing of the paragraph around it. They are already large
   horizontally and sit on their own line in most places. */

/* =========================================================================
   Blog

   No new visual language. The listing reuses the .card chrome from the home
   page, and a single post reuses the .entry prose column from About and the
   legal pages — so an article is set at the same measure, in the same type,
   on the same paper. Everything below is the joinery those two need.
   ====================================================================== */

/* --- listing header, modelled on .contact-head -------------------------- */
.blog-head{max-width:64ch;padding:72px 0 0;display:flex;flex-direction:column;gap:14px}
.blog-head h1{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(38px,5.4vw,66px);line-height:1.0;letter-spacing:-.016em;
}
.blog-intro{font-size:16.5px;line-height:1.7;color:var(--ink-soft)}
.blog-intro > * + *{margin-top:.9em}
.blog-intro a{color:var(--blue);border-bottom:1px solid color-mix(in srgb,var(--blue) 35%,transparent)}

/* The eyebrow becomes a trail on a post and an archive, so it holds links. */
.lbl a{color:inherit;border-bottom:1px solid transparent;transition:border-color .2s}
.lbl a:hover{border-bottom-color:currentColor}
.lbl-sep{margin:0 6px;opacity:.5}

/* --- the grid ----------------------------------------------------------
   auto-fit rather than a fixed three, because a blog has an awkward number
   of posts far more often than the subject lists do: two posts should sit as
   two, not as two-thirds of a row that never fills. */
.posts{
  margin-top:44px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

.card-post{padding-top:28px}
/* A card with a picture wears it full width; the negative margins undo the
   card's own padding, and the radius is one pixel inside the card's so the
   border still reads as a continuous edge. */
.card-post-thumb{
  display:block;margin:-28px -26px 4px;overflow:hidden;
  border-radius:19px 19px 0 0;background:var(--rule-soft);
}
.card-post-thumb img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.25,1);
}
.card:hover .card-post-thumb img{transform:scale(1.035)}

.card-post h3{font-size:20.5px;line-height:1.22}
.card-post-title{color:var(--ink);display:block}
.card-post-title:hover{color:var(--blue)}
/* The whole card is the target; the title carries the accessible name. */
.card-post-title::after{content:"";position:absolute;inset:0}
.card-post{position:relative}
.card-post-meta{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
}
.card-post .card-link{margin-top:auto}

.posts-empty{
  margin-top:44px;padding:44px 34px;border:1px dashed var(--rule);border-radius:18px;
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
  color:var(--ink-soft);font-size:16px;
}

/* --- pagination --------------------------------------------------------- */
.pagination{margin-top:40px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pagination .page-numbers{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;
  min-width:40px;padding:10px 14px;border-radius:12px;text-align:center;
  border:1px solid var(--rule);color:var(--ink-soft);background:var(--panel);
  transition:border-color .2s,color .2s,transform .2s;
}
.pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.pagination .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.pagination .page-numbers.dots{border-color:transparent;background:none;min-width:0;padding:10px 4px}

/* --- single post -------------------------------------------------------- */
.entry-figure{margin:0 0 34px}
.entry-figure img{width:100%;height:auto;border-radius:16px;display:block}
.entry-figure figcaption{font-size:13px;color:var(--ink-faint);margin-top:9px}

.entry-tags{
  max-width:70ch;margin:38px auto 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center;
}
.entry-tags a{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--rule);border-radius:99px;
  padding:7px 13px;color:var(--ink-soft);transition:border-color .2s,color .2s;
}
.entry-tags a:hover{border-color:var(--blue);color:var(--blue)}

/* --- previous / next ---------------------------------------------------- */
.post-nav{
  max-width:70ch;margin:56px auto 0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.post-nav-item{
  display:flex;flex-direction:column;gap:7px;padding:22px 24px;
  background:var(--panel);border:1px solid var(--rule);border-radius:16px;
  box-shadow:var(--sh-sm);transition:transform .3s cubic-bezier(.2,.8,.25,1),box-shadow .3s;
}
.post-nav-item:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.post-nav-next{text-align:right}
.post-nav-dir{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange);
}
.post-nav-title{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:20px;
  line-height:1.2;color:var(--ink);
}

/* --- search form -------------------------------------------------------- */
.search-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.search-form label{flex:1 1 220px;display:block}
.search-form .search-field{
  width:100%;font:inherit;font-size:16px;padding:12px 15px;border-radius:12px;
  border:1px solid var(--rule);background:var(--panel);color:var(--ink);
}
.search-form .search-field:focus{outline:2px solid var(--blue);outline-offset:1px}
.search-form .search-submit{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;padding:12px 20px;border-radius:12px;cursor:pointer;
  border:1px solid var(--blue);background:var(--blue);color:#fff;
}

@media (max-width:940px){
  .blog-head{padding-top:48px}
  .posts{margin-top:32px}
  .post-nav-next{text-align:left}
}

@media (max-width:400px){
  .card-post-thumb{margin-left:-22px;margin-right:-22px}
}

@media (prefers-reduced-motion:reduce){
  .card:hover .card-post-thumb img{transform:none}
  .post-nav-item:hover{transform:none}
}

/* --- finding things once there are more than a handful ------------------- */
.blog-filter{
  margin-top:38px;padding-bottom:22px;border-bottom:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px}
.blog-chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 15px;border-radius:99px;
  border:1px solid var(--rule);color:var(--ink-soft);background:var(--panel);
  transition:border-color .2s,color .2s,background .2s;
}
.blog-chip:hover{border-color:var(--blue);color:var(--blue)}
.blog-chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.blog-chip-n{
  font-size:10px;opacity:.62;font-variant-numeric:tabular-nums;
}
.blog-chip.is-on .blog-chip-n{opacity:.8}
.blog-search{display:flex;gap:8px;flex:0 1 300px}
.blog-search .search-field{
  width:100%;font:inherit;font-size:16px;padding:10px 14px;border-radius:99px;
  border:1px solid var(--rule);background:var(--panel);color:var(--ink);
}
.blog-search .search-field:focus{outline:2px solid var(--blue);outline-offset:1px}
.blog-search .search-submit{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:10px 18px;border-radius:99px;cursor:pointer;
  border:1px solid var(--blue);background:var(--blue);color:#fff;white-space:nowrap;
}

/* The listing sits under the filter bar, so it needs less air of its own. */
.blog-filter + .posts{margin-top:30px}

/* --- more in this category ---------------------------------------------- */
.related{margin-top:64px;padding-top:44px;border-top:1px solid var(--rule)}
.related-h{
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(26px,3.4vw,36px);line-height:1.08;margin-bottom:8px;
}
.related .posts{margin-top:24px}

@media (max-width:760px){
  .blog-filter{flex-direction:column;align-items:stretch;gap:14px}
  .blog-search{flex:1 1 auto}
}

/* --- blog teaser on the home page ---------------------------------------
   Same .posts grid the blog listing uses, just given the home page's own
   top spacing instead of the listing's (that one follows a filter bar; this
   one follows the section head, like every other home-page grid). */
#blog-teaser .posts{margin-top:0}

/* --- spacing inside a list item ------------------------------------------
   .entry-body > * + * only reaches direct children, so a numbered step that
   holds several <p> tags (and sometimes a nested <ul>) needs its own rule or
   they run together with no visual gap. */
.entry-body li > p + p,
.entry-body li > ul,
.entry-body li > ol{margin-top:.6em}