/* ==========================================================================
   Prakriti — v3.  An open book, and a set of instruments.
   Display is Playfair Display, matched to the logo wordmark — a Didone with high
   stroke contrast, flat hairline serifs and ball terminals. Body is DM Sans.
   ========================================================================== */

:root{
  --bg:      #FFFFFF;
  --surface: #FFFFFF;
  --sand:    #F2F6FC;                 /* the palest wash of the logo's blue */
  --sand-2:  #EAE4D6;
  --night:   #0B0E20;                 /* the ink at the centre of the blot */
  --night-2: #141A32;

  --ink:     #14171C;
  --ink-2:   #59616B;
  --ink-3:   #8B8F96;
  --line:    #E3E8EF;
  --line-2:  #CBD5E1;

  --brand:   #243690;                 /* sampled from the logo */
  --brand-2: #4890C6;
  --cyan:    #6CC6EA;
  --accent:  #CE5C2E;
  --sun:     #E4A22C;
  --leaf:    #5E7A3E;

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --mono:    ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  --h1:  clamp(2.7rem, 6.7vw, 6rem);
  --h2:  clamp(1.9rem, 3.6vw, 3.1rem);
  --h3:  clamp(1.15rem, 1.7vw, 1.45rem);
  --lead:clamp(1.05rem, 1.3vw, 1.35rem);

  --gut:  clamp(1.15rem, 4vw, 3.5rem);
  --wrap: 1320px;
  --r:    10px;
  --r-sm: 6px;
  --ease: cubic-bezier(.2,.8,.25,1);
  --shadow: 0 1px 2px rgba(20,23,28,.04), 0 8px 24px -12px rgba(20,23,28,.14);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  font-size:clamp(1rem,.25vw + .95rem,1.06rem); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; font-feature-settings:"kern" 1; }
img,svg,video,iframe{ display:block; max-width:100% }
a{ color:inherit }
button{ font:inherit }
h1,h2,h3,h4{ font-family:var(--display); font-weight:500; margin:0 0 .45em; line-height:1.05;
  letter-spacing:-.018em }
h1{ font-size:var(--h1) } h2{ font-size:var(--h2) } h3{ font-size:var(--h3); line-height:1.2 }
p{ margin:0 0 1em }
::selection{ background:var(--sun); color:var(--night) }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.sec{ padding-block:clamp(3.5rem,7vw,7rem) }
.sec--sm{ padding-block:clamp(2.2rem,4vw,3.6rem) }
.sand{ background:var(--sand) }
.night{ background:var(--night); color:#E9ECF0 }
.night h1,.night h2,.night h3{ color:#fff }
.night a{ color:#fff }

.eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:1.1rem; font-weight:500 }
.night .eyebrow{ color:var(--sun) }
.lead{ font-size:var(--lead); line-height:1.45; color:var(--ink-2); max-width:40ch }
.night .lead{ color:rgba(255,255,255,.72) }
.small{ font-size:.85rem; color:var(--ink-3) }
.mb0{ margin-bottom:0 } .narrow{ max-width:64ch }
.grid2{ display:grid; gap:clamp(1.6rem,4vw,4rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); align-items:start }
.grid3{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)) }

/* -------------------------------------------------------------- header -- */
.top{ position:sticky; top:0; z-index:70; background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line) }
.top--over{ position:fixed; background:transparent; backdrop-filter:none; border-bottom-color:transparent;
  transition:background .35s, border-color .35s, backdrop-filter .35s }
.top--over[data-solid="true"]{ background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom-color:var(--line) }
.top__in{ display:flex; align-items:center; gap:1.3rem; min-height:64px }
.logo{ text-decoration:none; font-family:var(--display); font-size:1.42rem; font-weight:600;
  letter-spacing:-.03em; color:var(--brand) }
.top--over .logo{ color:#fff } .top--over[data-solid="true"] .logo{ color:var(--brand) }
.menu{ display:flex; align-items:center; gap:1.35rem }
.menu a{ text-decoration:none; font-size:.85rem; font-weight:500; color:var(--ink-2); white-space:nowrap }
.top--over .menu a{ color:rgba(255,255,255,.9) }
.top--over[data-solid="true"] .menu a{ color:var(--ink-2) }
.menu a:hover{ color:var(--brand) } .top--over .menu a:hover{ color:#fff }
.menu a[aria-current="page"]{ color:var(--brand); text-decoration:underline; text-underline-offset:6px;
  text-decoration-color:var(--sun); text-decoration-thickness:2px }
.menu .cta{ background:var(--brand); color:#fff !important; padding:.55rem 1.05rem; border-radius:100px; font-weight:600 }
.menu .cta:hover{ background:var(--night) }
.burger{ display:none; background:none; border:1px solid var(--line-2); border-radius:100px;
  padding:.42rem .85rem; font-size:.8rem; font-weight:600; cursor:pointer; color:inherit }
.top--over .burger{ color:#fff; border-color:rgba(255,255,255,.45) }
.top--over[data-solid="true"] .burger{ color:var(--ink); border-color:var(--line-2) }
@media (max-width:1220px){
  .burger{ display:block }
  .menu{ position:fixed; inset:84px 0 auto; background:var(--bg); flex-direction:column; align-items:stretch;
    gap:0; padding:.5rem var(--gut) 2rem; display:none; border-bottom:1px solid var(--line);
    max-height:calc(100dvh - 64px); overflow:auto }
  .menu[data-open="true"]{ display:flex }
  .menu a,.top--over .menu a{ color:var(--ink); padding-block:.9rem; border-bottom:1px solid var(--line);
    font-size:1.1rem }
  .menu .cta{ margin-top:1.2rem; text-align:center; border-bottom:0 }
}

/* ---------------------------------------------------------------- hero -- */
.hero{ position:relative; min-height:min(92svh,780px); display:flex; align-items:flex-end;
  overflow:hidden; background:var(--night) }
.hero__m{ position:absolute; inset:0 }
.hero__m img,.hero__m video{ width:100%; height:100%; object-fit:cover }
.hero__m::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,14,32,.55),rgba(11,14,32,.34) 40%,rgba(11,14,32,.92)) }
/* Hero reel — photographs crossfading like footage (media.HERO_REEL, site.js) */
.reelh picture{ display:block; width:100%; height:100% }
.reelh__s{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.6s ease }
.reelh__s.is-on{ opacity:1; z-index:1 }
.reelh__s.is-out{ opacity:0; z-index:0 }
.reelh__s img{ will-change:transform }
.reelh__s.is-on img,.reelh__s.is-out img{ animation:reelh-drift 9s cubic-bezier(.25,.55,.35,1) both }
@keyframes reelh-drift{
  from{ transform:scale(1.02) translate3d(0,0,0) }
  to  { transform:scale(1.09) translate3d(var(--kx,0),var(--ky,0),0) } }
.hero__m.reelh{ isolation:isolate }
.hero__m.reelh::after{ z-index:2 }
.reelh__dots[hidden]{ display:none }
/* Top-right, clear of the fixed Ask Prakriti button that sits bottom-right. */
.reelh__cap{ position:absolute; z-index:3; right:var(--gut); top:5.9rem;
  display:flex; align-items:center; gap:.75rem; max-width:min(25rem,38vw);
  padding:.5rem .95rem .5rem .75rem; border-radius:999px; background:rgba(11,14,32,.46);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92); font-size:.76rem; line-height:1.3; text-decoration:none }
.reelh__cap:hover{ background:rgba(11,14,32,.66); color:#fff }
.reelh__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.reelh__dots{ display:flex; gap:4px; flex:none }
.reelh__dots i{ position:relative; width:18px; height:3px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.28) }
.reelh__dots i.on::after{ content:""; position:absolute; inset:0; background:var(--sun);
  transform-origin:left; animation:reelh-fill 6.5s linear both }
@keyframes reelh-fill{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@media (max-width:760px){
  .reelh__cap{ top:4.9rem; bottom:auto; left:var(--gut); right:auto; max-width:calc(100% - 2 * var(--gut));
    font-size:.7rem; padding:.38rem .75rem .38rem .6rem }
  .hero--reel .hero__in{ padding-top:8.6rem } }
@media (prefers-reduced-motion:reduce){
  .reelh__s img{ animation:none !important }
  .reelh__dots i.on::after{ animation:none; transform:none } }
.hero__in{ position:relative; z-index:2; width:100%; color:#fff; padding-block:7rem clamp(2.2rem,5vw,4rem) }
.hero h1{ max-width:16ch; font-weight:600; line-height:1.07; letter-spacing:-.014em;
  text-shadow:0 2px 26px rgba(8,12,24,.5), 0 1px 4px rgba(8,12,24,.4) }
.hero h1 em{ font-style:italic; color:var(--sun) }
.hero__sub{ font-size:clamp(1.02rem,1.15vw,1.24rem); line-height:1.5; color:rgba(255,255,255,.9);
  text-shadow:0 1px 12px rgba(8,12,24,.5); max-width:44ch; margin:0 0 2rem }
.hero--page{ min-height:min(56svh,460px) }
.hero--page h1{ font-size:var(--h2); max-width:20ch }

/* Ask bar — the AI assistant, promoted out of the corner */
.askbar{ display:flex; gap:.5rem; max-width:37rem; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28); border-radius:100px; padding:.4rem .4rem .4rem 1.25rem;
  backdrop-filter:blur(10px); align-items:center }
.askbar input{ flex:1; background:none; border:0; color:#fff; font:inherit; font-size:.98rem; padding:.6rem 0 }
.askbar input::placeholder{ color:rgba(255,255,255,.62) }
.askbar input:focus{ outline:none }
.askbar button{ background:var(--sun); color:var(--night); border:0; border-radius:100px;
  padding:.62rem 1.25rem; font-weight:700; font-size:.9rem; cursor:pointer; white-space:nowrap }
.askbar button:hover{ background:#fff }
.asksugg{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; max-width:40rem }
.asksugg button{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22); color:#fff;
  border-radius:100px; padding:.35rem .85rem; font-size:.78rem; cursor:pointer }
.asksugg button:hover{ background:#fff; color:var(--night) }

/* ------------------------------------------------------------- buttons -- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff;
  text-decoration:none; padding:.85rem 1.5rem; border:1px solid var(--brand); border-radius:100px;
  font-size:.93rem; font-weight:600; cursor:pointer; transition:background .25s, transform .25s var(--ease) }
.btn:hover{ background:var(--night); border-color:var(--night); transform:translateY(-1px) }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.btn--line:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.night .btn--line{ color:#fff; border-color:rgba(255,255,255,.4) }
.night .btn--line:hover{ background:#fff; color:var(--night) }
.btn--sun{ background:var(--sun); border-color:var(--sun); color:var(--night) }
.btn--sun:hover{ background:#fff; border-color:#fff; color:var(--night) }
.btn--sm{ padding:.5rem 1rem; font-size:.83rem }
.btns{ display:flex; flex-wrap:wrap; gap:.7rem }

/* =========================================================== INSTRUMENTS = */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden }
.panel__h{ padding:1rem 1.35rem; border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:.8rem; flex-wrap:wrap; background:linear-gradient(var(--surface),var(--bg)) }
.panel__h .tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3) }
.panel__h h3{ margin:0; font-size:1.05rem; font-family:var(--body); font-weight:700; letter-spacing:-.01em }
.panel__b{ padding:clamp(1.2rem,2.4vw,2rem) }
.panel__f{ padding:1rem 1.35rem; border-top:1px solid var(--line); background:var(--bg);
  font-size:.8rem; color:var(--ink-3) }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.figure-lg{ font-family:var(--display); font-size:clamp(2rem,4vw,3.2rem); line-height:.9;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums }

/* --- Fit test ------------------------------------------------------------ */
.quiz__bar{ height:3px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:1.6rem }
.quiz__bar i{ display:block; height:100%; background:var(--accent); width:0; transition:width .45s var(--ease) }
.quiz__q{ font-family:var(--display); font-size:clamp(1.35rem,2.4vw,2rem); letter-spacing:-.03em;
  line-height:1.08; margin:0 0 1.4rem; max-width:24ch }
.opts{ display:grid; gap:.55rem }
.opt{ display:flex; gap:.85rem; align-items:flex-start; text-align:left; width:100%; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:.9rem 1.1rem;
  transition:border-color .2s, background .2s, transform .2s var(--ease) }
.opt:hover{ border-color:var(--brand); background:#fff; transform:translateX(3px) }
.opt b{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); padding-top:.18rem; font-weight:500 }
.opt span{ font-size:.97rem; line-height:1.45 }
.quiz__nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.4rem;
  font-size:.82rem; color:var(--ink-3) }
.quiz__nav button{ background:none; border:0; color:var(--ink-3); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; font-size:.82rem }
.quiz__nav button:hover{ color:var(--ink) }

.verdict{ display:none } .verdict[data-on="true"]{ display:block }
.verdict__score{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:.4rem }
.meter{ height:10px; border-radius:6px; background:var(--sand-2); overflow:hidden; margin:1.2rem 0 1.6rem }
.meter i{ display:block; height:100%; width:0; border-radius:6px; transition:width .9s var(--ease) }
.verdict__why{ display:grid; gap:.5rem; margin-bottom:1.6rem }
.why{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; line-height:1.45 }
.why b{ flex:none; width:1.15rem; height:1.15rem; border-radius:50%; margin-top:.22rem; font-size:.7rem;
  display:grid; place-items:center; color:#fff; font-weight:700 }
.why--y b{ background:var(--leaf) } .why--n b{ background:var(--accent) }

/* --- Cost calculator ----------------------------------------------------- */
.calcrow{ display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; align-items:center;
  padding:.7rem 0; border-bottom:1px solid var(--line) }
.calcrow:last-of-type{ border-bottom:0 }
.calcrow label{ font-size:.92rem }
.calcrow .hint{ display:block; font-size:.76rem; color:var(--ink-3); margin-top:.15rem }
.calcrow input[type=number]{ width:7.5rem; padding:.5rem .7rem; border:1px solid var(--line);
  border-radius:var(--r-sm); font:inherit; font-family:var(--mono); font-size:.9rem; text-align:right;
  background:var(--bg) }
.calcrow input:focus{ outline:none; border-color:var(--brand) }
.rng{ width:100%; accent-color:var(--brand) }

.bars{ display:grid; gap:1.1rem; margin-top:.5rem }
.bar__t{ display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; margin-bottom:.4rem }
.bar__t b{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1rem }
.bar__track{ height:2.1rem; background:var(--sand); border-radius:var(--r-sm); overflow:hidden; display:flex }
.bar__seg{ height:100%; transition:width .7s var(--ease) }
.legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-top:1rem; font-size:.78rem; color:var(--ink-2) }
.legend i{ display:inline-block; width:.7rem; height:.7rem; border-radius:2px; margin-right:.4rem;
  vertical-align:-1px }
.delta{ background:var(--sand); border-left:3px solid var(--leaf); border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1.1rem 1.3rem; margin-top:1.5rem }
.delta p{ margin:0; font-size:.95rem }

.costgrid{ display:grid; gap:clamp(1.6rem,3vw,3rem); grid-template-columns:1fr 1fr; align-items:start }
@media (max-width:1040px){ .costgrid{ grid-template-columns:1fr } }
@media (max-width:420px){ .calcrow{ grid-template-columns:1fr } .calcrow input[type=number]{ width:100% } }

/* --- Day scrubber -------------------------------------------------------- */
.day{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:0 }
@media (max-width:860px){ .day{ grid-template-columns:1fr } }
.day__media{ position:relative; background:var(--night); min-height:22rem }
.day__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .55s var(--ease) }
.day__media img[data-on="true"]{ opacity:1 }
.day__clock{ position:absolute; left:1.1rem; top:1.1rem; z-index:2; font-family:var(--mono);
  font-size:.78rem; letter-spacing:.1em; color:#fff; background:rgba(13,17,22,.6); backdrop-filter:blur(6px);
  padding:.35rem .7rem; border-radius:100px }
.day__body{ padding:clamp(1.4rem,2.6vw,2.2rem); display:flex; flex-direction:column; justify-content:center }
.day__body h3{ font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2.1rem); letter-spacing:-.03em; margin-bottom:.5rem }
.day__body p{ color:var(--ink-2); margin-bottom:.9rem }
.day__meta{ font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent) }
.track{ position:relative; padding:1.6rem 1.35rem 1.2rem }
.track__line{ position:relative; height:2px; background:var(--line-2); border-radius:2px }
.track__fill{ position:absolute; inset:0 auto 0 0; background:var(--brand); border-radius:2px; width:0;
  transition:width .45s var(--ease) }
.track__pts{ position:relative; display:flex; justify-content:space-between; margin-top:-6px }
.pt{ position:relative; width:10px; height:10px; border-radius:50%; background:var(--surface);
  border:2px solid var(--line-2); cursor:pointer; padding:0; transition:transform .25s var(--ease), background .25s, border-color .25s }
.pt:hover{ transform:scale(1.4) }
.pt[data-on="true"]{ background:var(--brand); border-color:var(--brand); transform:scale(1.5) }
.pt span{ position:absolute; top:1.1rem; left:50%; transform:translateX(-50%); font-family:var(--mono);
  font-size:.64rem; color:var(--ink-3); white-space:nowrap }
@media (max-width:640px){ .pt span{ display:none } }

/* --- Evidence room ------------------------------------------------------- */
.filterbar{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.5rem }
.fchip{ background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:.4rem .95rem;
  font-size:.82rem; cursor:pointer; color:var(--ink-2) }
.fchip:hover{ border-color:var(--brand); color:var(--brand) }
.fchip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff }
.works{ columns:3 18rem; column-gap:1rem }
.work{ break-inside:avoid; margin-bottom:1rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow) }
.work img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover }
.work__b{ padding:1.15rem 1.25rem }
.work__ph{ position:relative; display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in }
.work__ph img{ transition:transform .5s ease }
.work__ph:hover img{ transform:scale(1.03) }
.work{ overflow:hidden }
.work__more{ position:absolute; right:.7rem; bottom:.7rem; padding:.3rem .65rem; border-radius:999px;
  background:rgba(11,14,32,.72); color:#fff; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase }
.work__ph:focus-visible{ outline:3px solid var(--sun); outline-offset:-3px }
.work--hit{ box-shadow:0 0 0 3px var(--sun) }
.work{ scroll-margin-top:6.5rem }
/* full-screen photographs (site.js gallery) */
.gal{ position:fixed; inset:0; z-index:130; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:.5rem; padding:clamp(.6rem,3vw,2.2rem); background:rgba(8,11,15,.96) }
.gal[hidden]{ display:none }
html.gal-open{ overflow:hidden }
.gal__f{ grid-column:2; margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem;
  min-width:0; max-height:100%; }
.gal__f img{ max-width:100%; max-height:calc(100svh - 7rem); object-fit:contain; border-radius:6px;
  opacity:0; transition:opacity .35s ease }
.gal__f img.in{ opacity:1 }
.gal__f figcaption{ display:flex; gap:1rem; justify-content:space-between; width:100%; max-width:60rem;
  color:rgba(255,255,255,.72); font-size:.85rem }
.gal__t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.gal__c{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; flex:none }
.gal__x{ position:absolute; top:.6rem; right:1rem; z-index:2; background:none; border:0; color:#fff;
  font-size:2.4rem; line-height:1; cursor:pointer }
.gal__nav{ width:3rem; height:3rem; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer }
.gal__nav:hover{ background:rgba(255,255,255,.16) }
.gal__nav[hidden]{ visibility:hidden; display:block }
.gal__p{ grid-column:1 } .gal__n{ grid-column:3 }
@media (max-width:760px){
  .gal{ grid-template-columns:1fr; grid-template-rows:1fr auto; padding:3.2rem .6rem 1rem }
  .gal__f{ grid-column:1; grid-row:1 }
  .gal__nav{ grid-row:2; position:static; justify-self:center }
  .gal__p{ grid-column:1; justify-self:start; margin-left:20% } .gal__n{ grid-column:1; justify-self:end; margin-right:20% } }
/* the inaugural graduating class — the school's own announcement cards */
.class26{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.8rem;
  margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut); scroll-padding-inline:var(--gut);
  scrollbar-width:thin }
.class26 button{ flex:none; scroll-snap-align:start; padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--r); overflow:hidden; box-shadow:0 1px 0 var(--line) }
.class26 img{ display:block; height:clamp(15rem,30vw,21rem); width:auto }
.class26 button:focus-visible{ outline:3px solid var(--sun); outline-offset:2px }

.work__k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.6rem }
.work__q{ font-family:var(--display); font-size:1.1rem; letter-spacing:-.02em; line-height:1.25; margin-bottom:.5rem }
.work p{ font-size:.9rem; color:var(--ink-2); margin-bottom:.6rem }
.work p:last-child{ margin-bottom:0 }
.work__n{ border-top:1px solid var(--line); padding-top:.7rem; font-size:.82rem; color:var(--ink-3); font-style:italic }

/* --- Cards, quotes, media ------------------------------------------------ */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(1.3rem,2.2vw,1.9rem) }
.night .card{ background:var(--night-2); border-color:rgba(255,255,255,.1) }
.card h3{ margin-bottom:.45em } .card p{ font-size:.94rem; color:var(--ink-2) }
.night .card p{ color:rgba(255,255,255,.68) }
.card p:last-child{ margin-bottom:0 }
.card__k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leaf); display:block; margin-bottom:.8rem }

.tiles{ display:grid; gap:.7rem; grid-template-columns:repeat(6,1fr) }
.tile{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--night); min-height:15rem;
  display:flex; align-items:flex-end; text-decoration:none; color:#fff; grid-column:span 2 }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,17,22,0) 30%,rgba(13,17,22,.9)) }
.tile:hover img{ transform:scale(1.05) }
.tile__t{ position:relative; z-index:2; padding:1.3rem }
.tile h3{ font-size:1.25rem; margin-bottom:.2em } .tile p{ font-size:.86rem; color:rgba(255,255,255,.75); margin:0 }
.tile--w3{ grid-column:span 3 } .tile--w4{ grid-column:span 4 } .tile--tall{ min-height:23rem }
@media (max-width:880px){ .tiles{ grid-template-columns:repeat(2,1fr) }
  .tile,.tile--w3,.tile--w4{ grid-column:span 2; min-height:13rem } .tile--tall{ min-height:16rem } }

.pull{ position:relative; min-height:56svh; display:grid; align-items:center; overflow:hidden; background:var(--night) }
.pull img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42 }
.pull__in{ position:relative; z-index:2; color:#fff }
.pull blockquote{ margin:0 0 1.2rem; font-family:var(--display); font-size:clamp(1.4rem,3vw,2.6rem);
  line-height:1.16; letter-spacing:-.016em; font-weight:500; max-width:22ch }
.pull cite{ font-style:normal; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sun) }

.reel{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)) }
.play{ position:relative; border:0; padding:0; background:var(--night); cursor:pointer; overflow:hidden;
  border-radius:var(--r); aspect-ratio:16/10; width:100%; text-align:left; color:#fff }
.play img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.8; transition:transform .9s var(--ease) }
.play::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,17,22,0) 45%,rgba(13,17,22,.85)) }
.play:hover img{ transform:scale(1.06) }
.play__b{ position:absolute; z-index:2; left:1rem; bottom:1rem; right:1rem }
.play__b em{ display:block; font-style:normal; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sun); margin-bottom:.3rem }
.play__b strong{ font-family:var(--display); font-size:1.1rem; font-weight:500; letter-spacing:-.02em }
.play__i{ position:absolute; z-index:2; top:.9rem; right:.9rem; width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(255,255,255,.2); backdrop-filter:blur(6px); display:grid; place-items:center; transition:background .3s }
.play:hover .play__i{ background:var(--sun) }
.play__i svg{ width:.8rem; fill:#fff; margin-left:2px } .play:hover .play__i svg{ fill:var(--night) }

.lightbox{ position:fixed; inset:0; z-index:120; background:rgba(8,11,15,.96); display:none; place-items:center; padding:var(--gut) }
.lightbox[data-open="true"]{ display:grid }
.lightbox iframe{ width:min(1100px,100%); aspect-ratio:16/9; border:0; border-radius:var(--r) }
.lightbox__x{ position:absolute; top:1rem; right:1.2rem; background:none; border:0; color:#fff; font-size:2.3rem; cursor:pointer }

/* --- Q&A ----------------------------------------------------------------- */
.qa{ border-top:1px solid var(--line) }
.qa summary{ cursor:pointer; list-style:none; padding:1.1rem 2.6rem 1.1rem 0; position:relative;
  font-size:1rem; font-weight:600; line-height:1.4 }
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{ content:""; position:absolute; right:.5rem; top:1.45rem; width:.62rem; height:.62rem;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg);
  transition:transform .3s var(--ease) }
.qa[open] summary::after{ transform:rotate(-135deg) }
.qa__b{ padding:0 2.6rem 1.3rem 0; color:var(--ink-2); max-width:72ch }
.qa__b p{ margin:0 }
.qagroup{ margin-bottom:2.6rem } .qagroup[hidden]{ display:none }
.qagroup > h3{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--leaf); font-weight:500; margin-bottom:.4rem }
.search input{ width:100%; max-width:29rem; padding:.85rem 1.2rem; font:inherit; background:var(--surface);
  border:1px solid var(--line); border-radius:100px }
.search input:focus{ outline:none; border-color:var(--brand) }

.hard{ border-left:3px solid var(--accent); background:var(--surface); border-radius:0 var(--r) var(--r) 0;
  padding:1.3rem 1.5rem; box-shadow:var(--shadow) }
.hard h3{ font-family:var(--body); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; line-height:1.35; margin-bottom:.55em }
.hard p{ font-size:.94rem; color:var(--ink-2); margin-bottom:.7em } .hard p:last-child{ margin-bottom:0 }

.fact{ background:var(--surface); border-left:3px solid var(--brand); border-radius:0 var(--r) var(--r) 0;
  padding:clamp(1.2rem,2vw,1.8rem); box-shadow:var(--shadow) }
.fact p{ margin:0 }

/* --- misc ---------------------------------------------------------------- */
.ticks{ list-style:none; padding:0; margin:0 0 1.1rem }
.ticks li{ position:relative; padding-left:1.4rem; margin-bottom:.45rem; font-size:.95rem }
.ticks li::before{ content:""; position:absolute; left:0; top:.58em; width:.4rem; height:.4rem;
  background:var(--sun); border-radius:50% }
.beats{ list-style:none; margin:0; padding:0 }
.beats li{ border-top:1px solid var(--line); padding:1.25rem 0; display:grid; grid-template-columns:3rem 1fr; gap:1rem }
.night .beats li{ border-top-color:rgba(255,255,255,.13) }
.beats b{ font-family:var(--mono); font-size:.78rem; color:var(--accent); font-weight:500; padding-top:.2rem }
.night .beats b{ color:var(--sun) }
.beats h3{ font-family:var(--body); font-size:1rem; font-weight:700; letter-spacing:0; line-height:1.4; margin-bottom:.15rem }
.beats p{ margin:0; font-size:.92rem; color:var(--ink-2) }
.night .beats p{ color:rgba(255,255,255,.66) }
.tbl{ width:100%; border-collapse:collapse; font-size:.93rem }
.tbl th,.tbl td{ text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line); vertical-align:top }
.tbl th{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500 }
.tbl-scroll{ overflow-x:auto }
.sticky{ position:sticky; top:5.5rem }
@media (max-width:900px){ .sticky{ position:static } }
.field{ margin-bottom:.9rem }
.field label{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem }
.field input,.field select,.field textarea{ width:100%; padding:.8rem 1rem; font:inherit; font-size:.96rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink) }
.field textarea{ min-height:6rem; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand) }
.consent{ display:flex; gap:.65rem; align-items:flex-start }
.consent input{ width:auto; margin-top:.28rem; flex:none }
.consent label{ font-family:var(--body); text-transform:none; letter-spacing:0; font-size:.8rem;
  color:var(--ink-2); line-height:1.5 }
.note{ font-size:.79rem; color:var(--ink-3) }
.crumb{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) }
.crumb a{ color:inherit }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem }
.chips a{ font-size:.8rem; padding:.38rem .85rem; border:1px solid var(--line); border-radius:100px;
  text-decoration:none; color:var(--ink-2); background:var(--surface) }
.chips a:hover{ background:var(--brand); color:#fff; border-color:var(--brand) }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:1rem; top:1rem; z-index:200; background:var(--night); color:#fff; padding:.7rem 1.1rem }
.rev{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.rev.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .rev{ opacity:1; transform:none; transition:none } }

/* --------------------------------------------------------------- footer -- */
.foot{ background:var(--night); color:#98A3AE; padding-block:clamp(3rem,6vw,5rem) 1.8rem; font-size:.87rem }
.foot a{ color:#DCE2E9; text-decoration:none } .foot a:hover{ color:var(--sun) }
.foot h4{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sun); font-weight:500; margin:0 0 1rem }
.foot__g{ display:grid; gap:2.2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr)) }
.foot ul{ list-style:none; margin:0; padding:0 } .foot li{ margin-bottom:.5rem; line-height:1.5 }
.foot__b{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.13); display:flex;
  flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; font-size:.76rem }
.machine{ margin-top:1.4rem; padding:.8rem 1rem; border:1px dashed rgba(255,255,255,.2);
  border-radius:var(--r-sm); font-size:.73rem }
.machine code{ color:var(--sun); font-family:var(--mono) }

/* ------------------------------------------------------------- assistant */
.fab{ position:fixed; right:clamp(.9rem,2.5vw,1.7rem); bottom:clamp(.9rem,2.5vw,1.7rem); z-index:80;
  display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff; border:0;
  border-radius:100px; padding:.8rem 1.25rem; font-size:.88rem; font-weight:600; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(13,17,22,.5); transition:transform .3s var(--ease) }
.fab:hover{ transform:translateY(-2px) }
.fab .dot{ width:.42rem; height:.42rem; border-radius:50%; background:var(--sun); animation:pulse 2.2s infinite }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.3} }
.chat{ position:fixed; right:clamp(.9rem,2.5vw,1.7rem); bottom:clamp(.9rem,2.5vw,1.7rem); z-index:90;
  border-top:3px solid var(--brand);
  width:min(25rem,calc(100vw - 1.8rem)); max-height:min(35rem,calc(100dvh - 1.8rem)); background:var(--bg);
  border-radius:14px; box-shadow:0 28px 64px -20px rgba(13,17,22,.55); border:1px solid var(--line);
  display:none; flex-direction:column; overflow:hidden }
.chat[data-open="true"]{ display:flex }
.chat__h{ background:var(--brand); color:#fff; padding:.95rem 1.1rem; display:flex; align-items:center; gap:.7rem }
.chat__h strong{ font-family:var(--display); font-size:1.02rem; font-weight:500 }
.chat__h span{ display:block; font-family:var(--mono); font-size:.64rem; color:rgba(255,255,255,.66); letter-spacing:.06em }
.chat__x{ margin-left:auto; background:none; border:0; color:#fff; font-size:1.45rem; cursor:pointer }
.chat__log{ flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.7rem }
.msg{ max-width:88%; padding:.7rem .95rem; border-radius:12px; font-size:.9rem; line-height:1.55 }
.msg--bot{ background:var(--surface); border:1px solid var(--line); align-self:flex-start }
.msg--me{ background:var(--brand); color:#fff; align-self:flex-end }
.msg--bot p{ margin:0 0 .5em } .msg--bot p:last-child{ margin:0 }
.chat__c{ display:flex; flex-wrap:wrap; gap:.3rem; padding:0 1rem .7rem }
.chip{ background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:.32rem .75rem;
  font-size:.76rem; cursor:pointer }
.chip:hover{ background:var(--brand); color:#fff }
.chat__f{ display:flex; gap:.45rem; padding:.75rem 1rem .95rem; border-top:1px solid var(--line) }
.chat__f input{ flex:1; padding:.6rem .9rem; font:inherit; font-size:.9rem; border:1px solid var(--line); border-radius:100px }
.chat__f button{ background:var(--brand); color:#fff; border:0; border-radius:100px; padding:0 1rem; font-weight:600; cursor:pointer }
.chat__n{ font-size:.66rem; color:var(--ink-3); padding:0 1rem .75rem }
.typing span{ display:inline-block; width:.36rem; height:.36rem; border-radius:50%; background:var(--ink-3);
  margin-right:.2rem; animation:blink 1.2s infinite }
.typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* --------------------------------------------------------- rollout note --
   Injected by site.js. Bottom centre on wide screens. Below 1000px the centred
   pill would run into Ask Prakriti, so it spans the width and lifts the button. */
.rollout{ position:fixed; left:50%; transform:translateX(-50%); bottom:clamp(.9rem,2.5vw,1.7rem); z-index:85;
  display:flex; align-items:center; gap:.35rem; width:max-content; max-width:min(40rem,calc(100vw - 2 * var(--gut)));
  background:var(--night); color:#E9ECF0; border:1px solid rgba(255,255,255,.16); border-radius:100px;
  padding:.45rem .45rem .45rem 1.15rem;
  font-size:.82rem; line-height:1.4; box-shadow:0 12px 30px -10px rgba(13,17,22,.5) }
.rollout a{ color:var(--sun); text-underline-offset:2px; white-space:nowrap }
.rollout a:hover{ color:#fff }
.rollout__x{ flex:none; display:grid; place-items:center; width:1.9rem; height:1.9rem; padding:0; border:0;
  border-radius:50%; background:none; color:rgba(255,255,255,.65); font-size:1.25rem; line-height:1; cursor:pointer }
.rollout__x:hover{ color:#fff; background:rgba(255,255,255,.12) }
.has-rollout .foot{ padding-bottom:calc(var(--rollout-h,2.8rem) + 3.2rem) }
@media (max-width:999px){
  .rollout{ left:clamp(.9rem,2.5vw,1.7rem); right:clamp(.9rem,2.5vw,1.7rem); transform:none; width:auto;
    max-width:none; border-radius:14px; font-size:.8rem; padding-left:1rem }
  .rollout > span{ flex:1 }
  .has-rollout .fab{ bottom:calc(clamp(.9rem,2.5vw,1.7rem) + var(--rollout-h,3.2rem) + .55rem) }
  .has-rollout .foot{ padding-bottom:calc(var(--rollout-h,3.2rem) + 6.5rem) }
}
@media print{ .rollout{ display:none } }

/* --- learner voices + press strip (Alpha School pattern) ----------------- */
.voices__list{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)) }
.voice{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow) }
.voice blockquote{ margin:0 0 .9rem; font-family:var(--display); font-size:1.12rem; line-height:1.3;
  letter-spacing:-.02em; color:var(--ink) }
.voice figcaption{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent) }
.press__list{ display:flex; flex-wrap:wrap; gap:.5rem 2.2rem; align-items:center }
.presslogo{ display:flex; flex-direction:column; gap:.15rem; text-decoration:none; padding:.5rem 0 }
.presslogo b{ font-family:var(--display); font-size:1.05rem; font-weight:500; letter-spacing:-.02em }
.presslogo span{ font-size:.76rem; color:var(--ink-3); max-width:26ch; line-height:1.4 }
a.presslogo:hover b{ color:var(--brand) }
.night .presslogo span{ color:rgba(255,255,255,.6) }
.commit{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)) }
.commit > div{ border-top:2px solid var(--accent); padding-top:1.1rem }
.commit h3{ font-size:1.3rem; margin-bottom:.4em }
.commit p{ font-size:.94rem; color:var(--ink-2); margin:0 }

/* --- what's on ----------------------------------------------------------- */
.evs{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)) }
.ev{ display:flex; gap:1.2rem; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.3rem 1.4rem; box-shadow:var(--shadow) }
.ev__date{ flex:none; width:3.4rem; text-align:center; border-right:1px solid var(--line); padding-right:1.1rem }
.ev__date b{ display:block; font-family:var(--display); font-size:2rem; line-height:.9; letter-spacing:-.04em;
  color:var(--brand)}
.ev__date span{ display:block; margin-top:.35rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.ev__b{ min-width:0 }
.ev__who{ font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .35rem }
.ev__b h3{ font-size:1.2rem; margin-bottom:.4em }
.ev__b p{ font-size:.92rem; color:var(--ink-2); margin-bottom:.6em }
.ev__meta{ font-family:var(--mono); font-size:.72rem; color:var(--ink-3); margin:0 !important }
.ev__open{ display:inline-block; margin-top:.7rem; background:var(--sun); color:var(--night);
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.28rem .7rem; border-radius:100px }

/* --- seasonal blurb: catchline + six sentences, in a spoken shape -------- */
.blurb{ position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow); max-width:44rem }
.blurb::after{ content:""; position:absolute; left:2.6rem; bottom:-13px; width:24px; height:24px;
  background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:rotate(45deg) skew(-6deg,-6deg) }
.blurb__tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); display:block; margin-bottom:.9rem }
.blurb__line{ font-family:var(--display); font-size:clamp(1.35rem,2.4vw,2rem); line-height:1.1;
  letter-spacing:-.03em; margin:0 0 .8rem }
.blurb__body{ color:var(--ink-2); margin:0 0 1.1rem; font-size:.98rem }
.blurb__cta{ font-weight:600; font-size:.9rem; color:var(--brand); text-decoration:none;
  border-bottom:1.5px solid var(--sun); padding-bottom:2px }
.blurb__cta:hover{ border-bottom-color:var(--brand) }

/* --- the enemy statement ------------------------------------------------- */
.enemy{ font-family:var(--display); font-size:clamp(1.7rem,3.6vw,3rem); line-height:1.12;
  letter-spacing:-.018em; font-weight:600; max-width:20ch; margin:0 0 1.2rem }
.enemy em{ font-style:italic; color:var(--accent) }
.night .enemy em{ color:var(--sun) }
.refuse{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.4rem }
.refuse span{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; padding:.4rem .85rem;
  border:1px solid var(--line-2); border-radius:100px; color:var(--ink-2) }
.night .refuse span{ border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.75) }

.stagegrid{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));
  margin-top:1.4rem }
.stagegrid button{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.8rem 1rem; text-align:left; cursor:pointer; transition:border-color .2s, transform .2s var(--ease) }
.stagegrid button:hover{ border-color:var(--brand); transform:translateY(-2px) }
.stagegrid b{ display:block; font-family:var(--display); font-size:1.05rem; letter-spacing:-.02em }
.stagegrid span{ font-family:var(--mono); font-size:.68rem; color:var(--ink-3) }

/* the core and the thread are decoration — they must never eat a click */
.dial__core,.dial__coretext,.dial__thread,.ring__age,.ring__line{ pointer-events:none }
.ring__hit{ pointer-events:stroke }
.dob select{ padding:.6rem .9rem; font:inherit; font-size:.92rem; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); cursor:pointer }
.dob select:focus{ outline:none; border-color:var(--brand) }

/* ==========================================================================
   The dial — a cross-section of a tree. Prakriti means nature; a tree keeps
   its growth in concentric rings you can read. One hue per stage, warm at the
   pith and cool at the bark: clay, turmeric, mehendi, teal, indigo. Near to far.
   ========================================================================== */
.dial{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,23rem);
  gap:clamp(1.5rem,4vw,4rem); align-items:center }
@media (max-width:900px){ .dial{ grid-template-columns:1fr } }
.dial__ring-host{ position:relative }
.dial__svg{ width:100%; max-width:35rem; margin-inline:auto; overflow:visible; display:block }

.dial__grain line{ stroke:#B9C6D6; stroke-width:1; opacity:.28; pointer-events:none }

.ring{ cursor:pointer; outline:none }
.ring__band{ fill:var(--tint); opacity:0; transition:opacity .45s var(--ease); pointer-events:none }
.ring__hit{ fill:none; stroke:transparent; stroke-width:42; pointer-events:stroke }
.ring__line{ fill:none; stroke:var(--hue); stroke-width:2.5; stroke-linecap:round; opacity:.55;
  pointer-events:none; transition:stroke-width .35s var(--ease), opacity .35s var(--ease);
  stroke-dasharray:2400; stroke-dashoffset:2400; animation:grow 1.5s var(--ease) forwards }
@keyframes grow{ to{ stroke-dashoffset:0 } }
.ring:hover .ring__line,.ring[data-hi="true"] .ring__line{ stroke-width:7; opacity:1 }
.ring[data-hi="true"] .ring__band{ opacity:.55 }
.ring:focus-visible .ring__hit{ stroke:var(--hue); opacity:.18 }
.ring__age{ font-family:var(--mono); font-size:11px; fill:var(--ink-3); letter-spacing:.08em;
  paint-order:stroke; stroke:#fff; stroke-width:7px; pointer-events:none; transition:fill .3s }
.ring[data-hi="true"] .ring__age{ fill:var(--hue); font-weight:700 }

.dial__core{ fill:var(--brand); pointer-events:none }
.dial__coretext{ font-family:var(--mono); font-size:10px; fill:#fff; letter-spacing:.06em;
  pointer-events:none }
html[data-stage] .dial__core{ fill:var(--stage) }

@media (prefers-reduced-motion:reduce){
  .ring__line{ animation:none; stroke-dashoffset:0 }
}

.dial__cap{ opacity:0; transition:opacity .35s var(--ease); border-left:3px solid var(--hue,var(--line-2));
  padding-left:1.4rem }
.dial__cap[data-on="true"]{ opacity:1 }
.dial__ring{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hue,var(--accent)); display:block; margin-bottom:.7rem }
.dial__label{ font-family:var(--display); font-size:clamp(1.6rem,2.6vw,2.3rem); letter-spacing:-.018em; font-weight:600;
  line-height:1.05; margin:0 0 .3rem; color:var(--hue,var(--ink)) }
.dial__meta{ font-family:var(--mono); font-size:.76rem; color:var(--ink-3); margin:0 0 1.1rem }
.dial__asks{ font-family:var(--display); font-size:1.1rem; line-height:1.35; color:var(--ink-2); margin:0 }

.dob{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1.6rem;
  padding-top:1.4rem; border-top:1px solid var(--line) }
.dob label{ flex:1 0 100%; font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3) }
.dob select{ padding:.6rem .9rem; font:inherit; font-size:.92rem; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); cursor:pointer }
.dob select:focus{ outline:none; border-color:var(--brand) }
#dobOut{ flex:1 0 100%; font-size:.9rem; color:var(--ink-2); min-height:1.3em; margin:0 }
.linkish{ background:none; border:0; padding:0; font:inherit; color:var(--stage,var(--brand));
  font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px }

/* --- the site takes the stage's colour once one is picked ---------------- */
html[data-stage] .sp__asks,
html[data-stage] .dial__ring{ color:var(--stage) }
html[data-stage] #stagePanel{ background:var(--stage-tint) }
html[data-stage] .sp__facts .num b{ color:var(--stage) }
html[data-stage] .stagechip{ background:var(--stage) }
html[data-stage] .btn.sp__cta{ background:var(--stage); border-color:var(--stage) }
html[data-stage] .btn.sp__cta:hover{ background:var(--night); border-color:var(--night) }

.sp__facts{ display:grid; gap:1.4rem 2rem; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  margin:2rem 0 0 }
.sp__facts .num b{ font-size:clamp(2.2rem,4vw,3.4rem); color:var(--accent) }
.sp__facts .num span{ color:var(--ink-3) }
.sp__asks{ font-family:var(--display); font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.3;
  color:var(--accent); margin:0 0 1.4rem; max-width:26ch }
.sp__look{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem }

.stagechip{ display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff;
  border-radius:100px; padding:.32rem .5rem .32rem .85rem; font-size:.76rem; font-weight:600 }
.stagechip__x{ background:rgba(255,255,255,.24); border:0; color:#fff; width:1.15rem; height:1.15rem;
  border-radius:50%; cursor:pointer; font-size:.8rem; line-height:1; display:grid; place-items:center }
.stagechip__x:hover{ background:#fff; color:var(--ink) }
@media (max-width:1320px){ .stagechip{ display:none } }


/* ==========================================================================
   The palette, used structurally. Same six hues as the dial, so colour on
   this site always means something: it tells you where in the school you are.
   ========================================================================== */
:root{
  --c1:#C0562B;  --c1t:#F3E2D4;   /* clay      · early years */
  --c2:#D99323;  --c2t:#F8EACB;   /* turmeric  · primary */
  --c3:#6E8B3D;  --c3t:#E5EDD1;   /* mehendi   · middle */
  --c4:#1E7A8F;  --c4t:#D2E6EE;   /* teal      · igcse */
  --c5:#243690;  --c5t:#D8DCF0;   /* indigo    · senior */
  --c6:#A84A6B;  --c6t:#F0DAE2;   /* madder    · bridge */
}

/* The three promises, each in its own hue */
.commit > div:nth-child(1){ border-top-color:var(--c1) }
.commit > div:nth-child(2){ border-top-color:var(--c3) }
.commit > div:nth-child(3){ border-top-color:var(--c5) }
.commit > div:nth-child(1) h3{ color:var(--c1) }
.commit > div:nth-child(2) h3{ color:var(--c3) }
.commit > div:nth-child(3) h3{ color:var(--c5) }
.night .commit > div:nth-child(1) h3{ color:#E8875C }
.night .commit > div:nth-child(2) h3{ color:#A8C46C }
.night .commit > div:nth-child(3) h3{ color:#7FA8DA }

/* Numbers on the dark bands stop being one colour */
.nums .num:nth-child(1) b{ color:#E8875C }
.nums .num:nth-child(2) b{ color:#EFB84B }
.nums .num:nth-child(3) b{ color:#A8C46C }
.nums .num:nth-child(4) b{ color:#5FBDB2 }
.nums .num:nth-child(5) b{ color:#7FA8DA }

/* Card and group labels cycle through the palette */
.cards > .card:nth-child(6n+1) .card__k{ color:var(--c1) }
.cards > .card:nth-child(6n+2) .card__k{ color:var(--c2) }
.cards > .card:nth-child(6n+3) .card__k{ color:var(--c3) }
.cards > .card:nth-child(6n+4) .card__k{ color:var(--c4) }
.cards > .card:nth-child(6n+5) .card__k{ color:var(--c5) }
.cards > .card:nth-child(6n+6) .card__k{ color:var(--c6) }
.qagroup:nth-of-type(6n+1) > h3{ color:var(--c1); border-bottom:2px solid var(--c1t) }
.qagroup:nth-of-type(6n+2) > h3{ color:var(--c2); border-bottom:2px solid var(--c2t) }
.qagroup:nth-of-type(6n+3) > h3{ color:var(--c3); border-bottom:2px solid var(--c3t) }
.qagroup:nth-of-type(6n+4) > h3{ color:var(--c4); border-bottom:2px solid var(--c4t) }
.qagroup:nth-of-type(6n+5) > h3{ color:var(--c5); border-bottom:2px solid var(--c5t) }
.qagroup:nth-of-type(6n+6) > h3{ color:var(--c6); border-bottom:2px solid var(--c6t) }
.qagroup > h3{ padding-bottom:.45rem }

/* Evidence Room: each subject keeps its own colour, so the wall reads as a spectrum */
.works > .work:nth-child(6n+1){ border-top:4px solid var(--c1) }
.works > .work:nth-child(6n+2){ border-top:4px solid var(--c2) }
.works > .work:nth-child(6n+3){ border-top:4px solid var(--c3) }
.works > .work:nth-child(6n+4){ border-top:4px solid var(--c4) }
.works > .work:nth-child(6n+5){ border-top:4px solid var(--c5) }
.works > .work:nth-child(6n+6){ border-top:4px solid var(--c6) }
.filterbar > .fchip:nth-child(6n+2):hover{ border-color:var(--c1); color:var(--c1) }
.filterbar > .fchip:nth-child(6n+3):hover{ border-color:var(--c2); color:var(--c2) }
.filterbar > .fchip:nth-child(6n+4):hover{ border-color:var(--c3); color:var(--c3) }
.filterbar > .fchip:nth-child(6n+5):hover{ border-color:var(--c4); color:var(--c4) }
.filterbar > .fchip:nth-child(6n+6):hover{ border-color:var(--c5); color:var(--c5) }

/* The uncomfortable questions and the honesty page, in rotation */
.hard:nth-child(5n+1){ border-left-color:var(--c1) }
.hard:nth-child(5n+2){ border-left-color:var(--c2) }
.hard:nth-child(5n+3){ border-left-color:var(--c3) }
.hard:nth-child(5n+4){ border-left-color:var(--c4) }
.hard:nth-child(5n+5){ border-left-color:var(--c5) }

/* Beat lists get a coloured marker instead of one flat accent */
.beats li:nth-child(6n+1) b{ color:var(--c1) }
.beats li:nth-child(6n+2) b{ color:var(--c2) }
.beats li:nth-child(6n+3) b{ color:var(--c3) }
.beats li:nth-child(6n+4) b{ color:var(--c4) }
.beats li:nth-child(6n+5) b{ color:var(--c5) }
.beats li:nth-child(6n+6) b{ color:var(--c6) }
.night .beats li b{ filter:brightness(1.55) saturate(.85) }

/* Bullets alternate, so a long list has some life in it */
.ticks li:nth-child(4n+1)::before{ background:var(--c1) }
.ticks li:nth-child(4n+2)::before{ background:var(--c2) }
.ticks li:nth-child(4n+3)::before{ background:var(--c3) }
.ticks li:nth-child(4n+4)::before{ background:var(--c4) }

/* A soft tinted band, for sections that should feel warmer than paper */
.tint{ background:linear-gradient(180deg,var(--bg),#F2F6FC 40%,var(--bg)) }
.stagegrid button:nth-child(1):hover{ border-color:var(--c6) }
.stagegrid button:nth-child(2):hover{ border-color:var(--c3) }

/* Server-rendered stage cards: real content for readers and crawlers alike.
   The dial is the fast way in; this is the complete way in. */
.stagecards{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  margin-top:2.5rem }
.stagecard{ background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--hue);
  border-radius:var(--r); padding:1.4rem 1.5rem }
.stagecard__k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hue); display:block; margin-bottom:.7rem }
.stagecard h3{ font-size:1.35rem; margin-bottom:.4rem; color:var(--hue) }
.stagecard__asks{ font-family:var(--display); font-size:1.05rem; line-height:1.35; color:var(--ink);
  margin-bottom:.9rem }
.stagecard__hero{ font-weight:600 }
.stagecard p{ font-size:.9rem; color:var(--ink-2); margin-bottom:.7rem }
.stagecard__facts{ font-family:var(--mono); font-size:.76rem; color:var(--ink-3) }
.stagecard a{ font-weight:600; color:var(--hue); text-decoration:none; border-bottom:1.5px solid currentColor }
.daylist{ padding:0 1.35rem 1.4rem }

/* --- the quick enquiry form --------------------------------------------- */
.quickform{ max-width:38rem }
.qf__grid{ display:grid; gap:.6rem 1rem; grid-template-columns:repeat(2,minmax(0,1fr)) }
.qf__grid .field{ margin-bottom:0 }
.qf__wide{ grid-column:1 / -1 }
@media (max-width:520px){ .qf__grid{ grid-template-columns:1fr } .qf__grid .field label[for="qf-y"]{ display:none } }
.qf__ctx{ background:var(--stage-tint,var(--sand)); border-left:3px solid var(--stage,var(--brand));
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:.9rem 1.1rem; margin:0 0 1.2rem;
  font-size:.9rem; color:var(--ink); line-height:1.5 }
.quickform .qf__more{ margin:.9rem 0 }
.quickform .qf__note{ margin-top:.6rem }
.quickform .consent{ margin:1.1rem 0 1.2rem }
html[data-stage] .quickform .btn[type="submit"]{ background:var(--stage); border-color:var(--stage) }

/* ==========================================================================
   Brand marks. The logo is a watercolour ink blot; the site follows it.
   ========================================================================== */
/* The header carries the full wordmark lockup, uncropped, tagline included.
   The stamp is used whole elsewhere — footer, the centre of the dial, watermarks —
   and is not repeated here, where it would say "Prakriti" twice. */
.logo{ display:flex; align-items:center; text-decoration:none }
.logo__word{ width:auto; height:50px; flex:none }
.top--over .logo__word{ filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.4)) }
.top--over[data-solid="true"] .logo__word{ filter:none }

.top__in{ min-height:84px }
@media (max-width:820px){ .logo__word{ height:38px } }
@media (max-width:820px){ .top__in{ min-height:66px } .menu{ inset:66px 0 auto } }

/* The full lockup, not the stamp. The artwork is dark -- watercolour type
   plus a grey tagline -- and the footer is near-black, so it sits on a light
   plate rather than being recoloured. Altering the logo is not ours to do. */
.foot__mark{ display:inline-block; background:#FFFFFF; border-radius:12px;
  padding:.8rem 1rem; margin-bottom:1.15rem; max-width:100% }
.foot__logo{ display:block; width:auto; height:50px; max-width:100% }
.foot__cam{ margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.14) }
.foot__cam img{ width:200px; height:auto; margin-bottom:.7rem; opacity:.92 }
.foot__cam p{ margin:0; font-size:.76rem; color:#9AA6B2; line-height:1.5 }

/* --- the watercolour blot, used as the site's graphic device -------------- */
.sec{ position:relative }
/* clip, not hidden — `overflow:hidden` would kill position:sticky inside */
.sec:has(> .blotbg){ overflow:clip }
.blotbg{ position:absolute; z-index:0; pointer-events:none; user-select:none;
  opacity:.055; mix-blend-mode:multiply }
.night .blotbg{ mix-blend-mode:screen; opacity:.13 }
.blotbg--tr{ top:-14%; right:-12%; width:min(46vw,620px) }
.blotbg--bl{ bottom:-18%; left:-14%; width:min(40vw,520px); transform:scaleX(-1) }
.sec > .wrap{ position:relative; z-index:1 }

/* the hero carries the mark itself, bleeding off the corner */
.hero__blot{ position:absolute; z-index:1; right:-4%; top:-14%; width:min(46vw,560px);
  opacity:.34; pointer-events:none; mix-blend-mode:screen }
@media (max-width:760px){ .hero__blot{ width:90vw; right:-28%; top:-6% } }

/* the dial's pith becomes the blot */
.dial__core{ fill:var(--brand) }
/* The blot is the pith at the centre of the rings, so it has to sit INSIDE
   the innermost one. The dial's viewBox is 660 wide rendered at 560px, so the
   innermost ring's line now falls at 101.8px from centre and its tinted band
   at 90.8px. At 24% the blot's radius is 67px, leaving about 24px of clear
   field between the mark and Blue-G2. Both are percentages, so that gap
   holds at every width. */
.dialblot{ position:absolute; left:50%; top:50%; width:24%; transform:translate(-50%,-50%);
  pointer-events:none; opacity:.95 }

/* ring labels: grade above, ages below */
.ring__grade{ font-family:var(--mono); font-size:12px; font-weight:700; fill:var(--ink);
  letter-spacing:.04em; paint-order:stroke; stroke:#fff; stroke-width:7px; pointer-events:none;
  transition:fill .3s }
.ring[data-hi="true"] .ring__grade{ fill:var(--hue) }
.ring__age{ font-size:10.5px }

/* `hidden` must win over the display rule above, or an empty chip shows */
.stagechip[hidden]{ display:none !important }

/* Ghost buttons on dark surfaces were inheriting the ink colour and vanishing */
.hero .btn--line,
.pull .btn--line,
.night .btn--line{ color:#fff; border-color:rgba(255,255,255,.55) }
.hero .btn--line:hover,
.pull .btn--line:hover,
.night .btn--line:hover{ background:#fff; color:var(--night); border-color:#fff }

/* --- the published record ------------------------------------------------ */
.writing{ list-style:none; margin:0; padding:0; counter-reset:w;
  columns:2 22rem; column-gap:2.6rem }
.wr{ break-inside:avoid; padding:.85rem 0; border-bottom:1px solid var(--line) }
.wr a{ text-decoration:none }
.wr__t{ font-family:var(--display); font-size:1.05rem; line-height:1.3; letter-spacing:-.015em;
  color:var(--ink); display:block; margin-bottom:.28rem }
.wr a:hover .wr__t{ color:var(--brand); text-decoration:underline; text-underline-offset:3px }
.wr__m{ font-family:var(--mono); font-size:.7rem; color:var(--ink-3); letter-spacing:.02em; display:block }
.wr__note{ color:var(--accent) }
.wr--ph{ display:grid; grid-template-columns:4.6rem minmax(0,1fr); column-gap:.9rem; align-items:start }
.wr__ph img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:6px;
  background:var(--line) }


/* ---- "In draft" status tag ------------------------------------------------
   A site status, not a nag bar: it sits beside the wordmark and stays shut
   until asked. <details> so it needs no JS and the sentence is in the HTML
   for crawlers. The auto margin that used to live on .logo lives here now,
   so this is what pushes the nav right. ------------------------------------ */
.draft{ position:relative; margin-right:auto; flex:none }
.draft__tag{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  list-style:none; background:var(--sand); border:1px solid var(--line); color:var(--brand);
  font-family:var(--display); font-style:italic; font-size:.82rem; line-height:1;
  padding:.34rem .68rem .38rem; border-radius:100px; white-space:nowrap;
  transition:background .2s, border-color .2s }
.draft__tag::-webkit-details-marker{ display:none }
.draft__tag:hover{ background:#fff; border-color:var(--brand-2) }
.draft__dot{ width:.42rem; height:.42rem; border-radius:50%; background:var(--sun); flex:none;
  animation:draftpulse 2.4s ease-in-out infinite }
@keyframes draftpulse{ 0%,100%{ opacity:.3; transform:scale(.8) } 50%{ opacity:1; transform:scale(1) } }

.draft__note{ position:absolute; top:calc(100% + .45rem); left:0; z-index:5; width:max-content;
  max-width:min(34ch, calc(100vw - 2rem)); margin:0; background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem; font-size:.88rem;
  line-height:1.52; box-shadow:0 18px 44px rgba(11,14,32,.17) }

/* the masthead is transparent over the hero film, so invert there */
.top--over .draft__tag{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.36);
  color:#fff }
.top--over .draft__tag:hover{ background:rgba(255,255,255,.26) }

@media (prefers-reduced-motion:reduce){ .draft__dot{ animation:none; opacity:.9 } }
@media (max-width:420px){
  .draft__tag{ font-size:.75rem; padding:.3rem .56rem .34rem }
}


/* ---- the calculator's two headline figures -------------------------------
   A fee that rises every grade cannot be one number, and the one-time
   admission charge falls only in the first year, so the panel leads with both
   rather than making a parent work it out. --------------------------------- */
.twofig{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin:0 0 .2rem }
.twofig > div{ background:var(--sand); border:1px solid var(--line); border-radius:12px;
  padding:.85rem .95rem }
.twofig span{ display:block; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:.25rem }
.twofig b{ font-family:var(--display); font-size:1.5rem; font-weight:600; letter-spacing:-.02em;
  color:var(--brand); line-height:1.1 }
.twofig b.is-range{ font-size:1.12rem; line-height:1.3 }
@media (max-width:520px){ .twofig{ grid-template-columns:1fr } }


/* ---- the hero ask bar ----------------------------------------------------
   Sits over the film rather than in a band of its own, so the campus stays
   visible behind it. Frosted rather than solid for the same reason. It feeds
   the same assistant as the floating button: site.js listens for #askForm
   and for any [data-ask] element, so a chip needs no wiring of its own. ---- */
.heroask{ display:flex; gap:.5rem; align-items:center; margin:1.6rem 0 .8rem;
  max-width:34rem; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.32);
  border-radius:100px; padding:.38rem .38rem .38rem 1.1rem; backdrop-filter:blur(14px) }
.heroask input{ flex:1; min-width:0; background:none; border:0; outline:none; color:#fff;
  font-family:var(--body); font-size:1rem; padding:.62rem 0 }
.heroask input::placeholder{ color:rgba(255,255,255,.72) }
.heroask input:focus-visible{ outline:none }
.heroask:focus-within{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.18) }
.heroask button{ flex:none; background:var(--sun); color:#1A1205; border:0; border-radius:100px;
  padding:.68rem 1.35rem; font-family:var(--body); font-size:.92rem; font-weight:700; cursor:pointer;
  transition:transform .18s var(--ease), filter .18s var(--ease) }
.heroask button:hover{ filter:brightness(1.07); transform:translateY(-1px) }

.heroask__c{ display:flex; flex-wrap:wrap; gap:.45rem; max-width:40rem }
.hchip{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26); color:#fff;
  border-radius:100px; padding:.45rem .9rem; font-family:var(--body); font-size:.82rem;
  cursor:pointer; backdrop-filter:blur(10px); transition:background .18s var(--ease) }
.hchip:hover{ background:rgba(255,255,255,.22) }

@media (max-width:560px){
  .heroask{ margin-top:1.3rem; padding-left:.95rem }
  .heroask input{ font-size:.95rem }
  .heroask button{ padding:.62rem 1.1rem }
  .heroask__c .hchip:nth-child(n+4){ display:none }
}


/* ---- the chat's lead capture --------------------------------------------
   Sits inside a bot message so it reads as part of the conversation rather
   than a form that has dropped on top of one. Consent is a real tick box,
   not fine print: nothing is sent until it is ticked. ------------------- */
/* div only: p.lead is the site-wide intro paragraph and must stay inline-flowing */
div.lead{ display:grid; gap:.5rem; margin-top:.2rem }
.lead input[type="text"]{ width:100%; padding:.55rem .8rem; font:inherit; font-size:.86rem;
  border:1px solid var(--line-2); border-radius:9px; background:#fff; color:var(--ink) }
.lead input[type="text"]:focus-visible{ outline:2px solid var(--brand); outline-offset:1px;
  border-color:var(--brand) }
.lead__k{ display:flex; gap:.5rem; align-items:flex-start; font-size:.74rem; line-height:1.45;
  color:var(--ink-2); cursor:pointer }
.lead__k input{ margin-top:.15rem; accent-color:var(--brand); flex:none }
.lead__k a{ color:var(--brand); text-decoration:underline }
.lead__b{ display:flex; gap:.45rem; align-items:center; margin-top:.1rem }
.lead__go{ background:var(--brand); color:#fff; border:0; border-radius:100px;
  padding:.5rem 1.15rem; font:inherit; font-size:.84rem; font-weight:600; cursor:pointer }
.lead__go:disabled{ opacity:.6; cursor:default }
.lead__skip{ background:none; border:0; color:var(--ink-3); font:inherit; font-size:.8rem;
  text-decoration:underline; cursor:pointer }
.lead__msg{ margin:0; font-size:.76rem; color:var(--accent) }
.lead__msg:empty{ display:none }
/* one question at a time: each step of the chat follow-up is its own small form */
.leadf{ display:grid; gap:.5rem; margin-top:.5rem }
.leadf input{ width:100%; padding:.55rem .8rem; font:inherit; font-size:.86rem;
  border:1px solid var(--line-2); border-radius:9px; background:#fff; color:var(--ink) }
.leadf input:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; border-color:var(--brand) }
.msg--bot > .lead__b{ margin-top:.55rem }

/* --- journal block: the latest three, then the sign-up (build/journal.py) ---
   One colour only. The six hues mean a stage of school, and a post is not one. */
.jr__h{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:1rem 2rem; margin-bottom:clamp(1.6rem,3vw,2.6rem) }
.jr__h h2{ max-width:20ch; margin:0 }
.jr__all{ font-weight:600; font-size:.92rem; color:var(--brand); text-decoration:none; white-space:nowrap }
.jr__all:hover{ text-decoration:underline; text-underline-offset:3px }
.jr__l{ display:grid; gap:clamp(1.6rem,3vw,2.8rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)) }
.jr__i{ display:flex; flex-direction:column; border-top:2px solid var(--brand); padding-top:1rem }
.jr__i--ph{ border-top:0; padding-top:0 }
.jr__ph{ display:block; margin-bottom:1rem; border-radius:var(--r-sm); overflow:hidden; background:var(--line) }
.jr__ph img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; transition:transform .5s ease }
.jr__ph:hover img{ transform:scale(1.03) }
@media (prefers-reduced-motion:reduce){ .jr__ph img{ transition:none } .jr__ph:hover img{ transform:none } }
.jr__k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.75rem }
.jr__t{ font-size:clamp(1.25rem,1.8vw,1.55rem); line-height:1.2; margin-bottom:.6rem }
.jr__t a{ text-decoration:none }
.jr__t a:hover{ color:var(--brand); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:4px }
.jr__d{ font-size:.94rem; color:var(--ink-2); margin-bottom:1rem }
.jr__by{ margin:auto 0 0; font-size:.84rem; font-weight:600; color:var(--ink) }
.jr__s{ margin-top:clamp(2.2rem,4vw,3.4rem); padding:clamp(1.2rem,2.5vw,2rem); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); display:grid; gap:1.4rem 2.6rem;
  grid-template-columns:minmax(0,1fr) minmax(0,480px); align-items:center }
.jr__s h3{ margin-bottom:.35rem }
.jr__s p{ color:var(--ink-2); margin-bottom:.5rem }
.jr__s .note a{ color:var(--ink-3) }
.jr__f{ width:100%; height:320px; border:0; border-radius:var(--r-sm); background:#fff }
@media (max-width:820px){ .jr__s{ grid-template-columns:1fr } }

/* ==========================================================================
   Home, dial-first (Oct 2026). The rings are the front door: who we are, the
   hook, a date of birth and three questions for the stage on show, in one
   screen. Then four quiet blocks. Depth lives on inner pages and in the chat.
   ========================================================================== */
.dh{ position:relative; background:var(--bg);
  padding-block:clamp(6rem,8.5vw,7.2rem) clamp(2.2rem,4vw,3.4rem) }
.dh__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  grid-template-areas:"text dial" "cap dial"; grid-template-rows:auto 1fr;
  gap:0 clamp(2rem,5vw,5.5rem); align-items:start }
.dh__text{ grid-area:text } .dh__dial{ grid-area:dial; align-self:center } .dh__cap{ grid-area:cap }
.dh__h{ font-size:clamp(2rem,3.7vw,3.3rem); line-height:1.07; font-weight:500; max-width:19ch;
  margin:0 0 1.5rem; letter-spacing:-.02em }
.dh__id{ display:block; font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.14em;
  line-height:1.65; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.1rem; max-width:none }
.dh .dob{ margin-top:0; padding-top:0; border-top:0 }
/* rotating quotes: stacked in one grid cell, so the block never changes height */
.qrot{ display:grid; margin:-.3rem 0 1.9rem; max-width:44ch }
.qrot__h{ margin:0 0 .5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent) }
.qrot__p{ margin:0; font-size:1rem; line-height:1.6; color:var(--ink-2) }
/* out first, then in: the two quotes never overlap */
.qrot__q{ grid-area:1/1; margin:0; opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s }
.qrot__q.is-on{ opacity:1; visibility:visible;
  transition:opacity .7s var(--ease) .45s, visibility 0s linear .45s }
@media (prefers-reduced-motion:reduce){ .qrot__q,.qrot__q.is-on{ transition:none } }
.qrot__dots{ grid-area:2/1; display:flex; gap:4px; margin-top:.7rem }
.qrot__dots button{ position:relative; width:22px; height:15px; padding:0; border:0; background:none; cursor:pointer }
.qrot__dots button::after{ content:""; position:absolute; left:0; right:0; top:6px; height:3px; border-radius:2px;
  background:var(--line-2); transition:background .3s }
.qrot__dots button.on::after{ background:var(--sun) }
.qrot__dots button:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.qrot__q blockquote{ margin:0; font-family:var(--display); font-style:italic; font-size:clamp(1.1rem,1.5vw,1.35rem);
  line-height:1.4; color:var(--ink-2) }
.qrot__q figcaption{ margin-top:.55rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3) }
.qrot__q cite{ font-style:normal }
/* the logo is 24% of its host, so the host must be exactly as wide as the rings */
.dh .dial__ring-host{ width:100%; max-width:34rem; margin-inline:auto }
.dh .dial__svg{ max-width:100% }
.dh .dial__cap{ margin-top:2rem }
.dh .dial__asks{ font-size:1.02rem }
.dial__qs{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.1rem }
.dial__qs .chip{ cursor:pointer; font-size:.84rem; color:var(--ink); padding:.42rem .9rem;
  transition:background .2s, color .2s, border-color .2s }
.dial__qs .chip:hover,.dial__qs .chip:focus-visible{ background:var(--hue,var(--brand));
  border-color:var(--hue,var(--brand)); color:#fff; outline:none }
.dial__fallback{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.92rem;
  color:var(--ink-2) }
.dial__fallback[hidden]{ display:none }
/* the panel under the dial keeps to the essentials here; the full stage lives on Programmes */
.dh ~ #stagePanel .sp__body{ display:none }
@media (max-width:900px){
  .dh{ padding-top:5.6rem }
  .dh__grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:"text" "dial" "cap";
    grid-template-rows:auto }
  .dh__h{ font-size:clamp(1.7rem,7vw,2.3rem); margin-bottom:1.1rem }
  .dh__id{ font-size:.62rem; margin-bottom:.8rem }
  .qrot{ margin-bottom:1.3rem }
  .qrot__p{ font-size:.95rem; line-height:1.55 }
  .qrot__q blockquote{ font-size:1.05rem }
  .dh .dob{ gap:.5rem }
  .dh .dob select{ padding:.5rem .8rem }
  .dh__dial{ margin-top:.4rem }
  .dh .dial__ring-host{ max-width:32rem }
  .dh .dial__cap{ margin-top:1.4rem }
}

.proofrow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.4rem clamp(1.2rem,3vw,2.6rem);
  border-block:1px solid var(--line); padding-block:1.7rem }
.proofrow b{ display:block; font-family:var(--display); font-size:clamp(1.7rem,2.6vw,2.4rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.1; color:var(--brand); margin-bottom:.35rem }
html[data-stage] .proofrow b{ color:var(--stage) }
.proofrow span{ display:block; font-size:.86rem; line-height:1.42; color:var(--ink-2); max-width:24ch }
.proofrow__more{ margin:1rem 0 0; font-size:.9rem }
.proofrow__more a{ color:var(--brand); font-weight:600; text-decoration:none }
.proofrow__more a:hover{ text-decoration:underline; text-underline-offset:3px }
@media (max-width:760px){ .proofrow{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* fixed headers need both edges, or the solid state stops short of the right edge */
.top--over{ left:0; right:0 }

.pull--reel{ min-height:min(68svh,620px) }
.pull--reel img{ opacity:1 }
.pull--reel .reelh__cap{ top:auto; bottom:1.2rem }
@media (max-width:760px){ .pull--reel .reelh__cap{ top:auto; bottom:1rem } }

/* ---- Why an inkblot (inkblot.html) ---------------------------------------
   The Freedom graphic is shown whole, never cropped, on white. */
.ink{ background:#fff; padding-top:clamp(6rem,8.5vw,7.2rem) }
.ink .crumb{ margin-bottom:1.1rem }
.ink__h{ font-size:var(--h2); max-width:20ch; margin-bottom:0 }
.ink__art{ margin:clamp(1rem,3vw,2.2rem) auto 0; max-width:1240px; padding-inline:16px }
.ink__art img{ display:block; width:100%; height:auto }
.ink__quote{ margin:0 0 1.4rem; padding-left:1.1rem; border-left:3px solid var(--brand);
  font-family:var(--display); font-size:clamp(1.12rem,1.6vw,1.32rem); line-height:1.5; color:var(--ink) }
.ink__list{ list-style:none; margin:1rem 0 0; padding:0 }
.ink__list li{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:.6rem clamp(1.6rem,4vw,4rem);
  align-items:baseline; border-top:1px solid var(--line); padding-block:clamp(1.2rem,2.4vw,1.9rem) }
.ink__list li:last-child{ border-bottom:1px solid var(--line) }
.ink__list h2{ font-size:clamp(1.5rem,2.6vw,2.25rem); line-height:1.15; margin:0 }
.ink__list p{ font-size:var(--lead); line-height:1.45; color:var(--ink-2); margin:0 }
@media (max-width:760px){ .ink__list li{ grid-template-columns:minmax(0,1fr) } }

/* True cost, side by side (Oct 2026): a Prakriti column beside the other
   school's for every head, and a two-row result for the joining year and the next. */
.calchead,.calcrow--2{ display:grid; grid-template-columns:minmax(0,1fr) 6.4rem 6.4rem; gap:.5rem .6rem;
  align-items:center }
.calchead{ padding:.9rem 0 .1rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); text-align:right }
.calchead span:nth-child(2){ color:var(--brand) }
.calchead span{ line-height:1.35 }
.calcrow--2 input[type=number]{ width:100% }
.calcrow--2 input:first-of-type{ border-color:color-mix(in srgb,var(--brand) 35%,var(--line)) }
@media (max-width:560px){
  .calchead,.calcrow--2{ grid-template-columns:1fr 1fr }
  .calcrow--2 label{ grid-column:1 / -1 }
  .calchead span:first-child{ display:none }
  .calchead{ text-align:left }
}
.cmp{ width:100%; border-collapse:collapse; margin:0 0 .3rem; font-size:.9rem }
.cmp th,.cmp td{ padding:.6rem .5rem; border-bottom:1px solid var(--line); text-align:right; vertical-align:top }
.cmp thead th{ font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400 }
.cmp thead th:first-of-type{ color:var(--brand) }
.cmp tbody th{ text-align:left; font-weight:500; color:var(--ink-2); padding-left:0 }
.cmp td{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.cmp tbody td:nth-of-type(1){ color:var(--brand); font-weight:600 }
.cost__disc{ margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid var(--line); font-size:.82rem;
  line-height:1.5; color:var(--ink-2) }
.cost__disc a{ color:var(--brand); white-space:nowrap }