/* Layout: alternating night-sky and parchment bands, like an illuminated course poster. 1200px column.
   Deliberately one look — walnut library night, gold linework, ivory parchment — so there is no dark/light switch; every colour is explicit. */
:root{
  color-scheme:light;
  --night:#1E1510; --navy:#2E2118; --navy2:#3D2C1F; --teal:#1C4A55; --plum:#2E2447; --umber:#3F3120;
  --parch:#F3E9D3; --parch2:#EADBBC; --card:#FBF6EA;
  --ink:#2A1D14; --muted:#5C4B3E; --faint:#7A6A5A;
  --gold:#D8B66A; --gold-hi:#F0D594; --gold-deep:#8B6A22; --gold-line:rgba(216,182,106,.55);
  --on-night:#EEE5D0; --on-night-muted:#BFB7A5;
  --line:rgba(139,106,34,.28);
  --ok-bg:#DDEBDD; --ok-ink:#2D5E3F; --live:#B8342B;
  --shadow:0 18px 44px rgba(30,21,16,.25);
  --f-display:"Cinzel","Trajan Pro",Georgia,serif;
  --f-body:"EB Garamond","Garamond","Georgia",serif;
  --wrap:1200px; --gutter:clamp(16px,4vw,44px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--parch); color:var(--ink); font-family:var(--f-body); font-size:19px; line-height:1.55}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:600}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.caps{font-family:var(--f-display); letter-spacing:.14em; text-transform:uppercase}
.num{font-variant-numeric:tabular-nums lining-nums}

/* starry night bands */
.night{background-color:var(--night); color:var(--on-night);
  background-image:
    radial-gradient(1px 1px at 23px 41px, rgba(255,238,200,.75), transparent 60%),
    radial-gradient(1px 1px at 131px 17px, rgba(255,238,200,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 177px 139px, rgba(240,213,148,.8), transparent 60%),
    radial-gradient(1px 1px at 71px 163px, rgba(255,238,200,.45), transparent 60%),
    radial-gradient(1px 1px at 211px 83px, rgba(255,238,200,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 97px 97px, rgba(255,238,200,.35), transparent 60%),
    radial-gradient(900px 500px at 78% 0%, rgba(200,140,60,.22), transparent 65%),
    radial-gradient(700px 400px at 0% 100%, rgba(110,50,30,.35), transparent 65%), linear-gradient(180deg,#1E1510,#2E2118);
  background-size:240px 190px,240px 190px,240px 190px,240px 190px,240px 190px,240px 190px,100% 100%,100% 100%,100% 100%}

/* ornaments */
.orn{display:flex; align-items:center; gap:14px; color:var(--gold); justify-content:center}
.orn::before,.orn::after{content:""; height:1px; flex:1; max-width:160px; background:linear-gradient(90deg,transparent,var(--gold-line))}
.orn::after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.orn span{font-size:12px}
.eyebrow{font-family:var(--f-display); font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
.night .eyebrow{color:var(--gold)}
.h-sec{font-family:var(--f-display); font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin-top:8px; letter-spacing:.02em}
.night .h-sec{color:var(--gold-hi)}
.lede{color:var(--muted); font-size:20px; max-width:60ch}
.night .lede{color:var(--on-night-muted)}
.sec-head{display:flex; align-items:end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap; margin-bottom:32px}
.sec-head > div{min-width:0}
.sec-head .lede{margin-top:10px; font-size:19px}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- header ---------- */
.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:60; background:rgba(30,21,16,.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--gold-line); color:var(--on-night)}
.topbar .wrap{display:flex; align-items:center; gap:18px; min-height:70px; position:relative}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; white-space:nowrap}
.brand b{display:block; font-family:var(--f-display); font-size:20px; font-weight:600; letter-spacing:.12em; color:var(--gold-hi); line-height:1.1}
.brand small{display:block; font-size:13px; font-style:italic; color:var(--on-night-muted)}
.nav{display:flex; gap:2px; margin-inline:auto}
.nav a{white-space:nowrap; text-decoration:none; padding:8px 10px; border-radius:99px; color:var(--on-night-muted); font-family:var(--f-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600}
.nav a:hover{color:var(--gold-hi)}
.nav a{transition:background .3s ease, color .3s ease}
.nav a[aria-current="page"],.nav a[aria-current="location"]{color:var(--night); background:var(--gold)}
.hdr-right{display:flex; align-items:center; gap:10px}
.cur{display:inline-flex; border:1px solid var(--gold-line); border-radius:99px; padding:3px}
.cur button{border:0; background:none; border-radius:99px; padding:3px 10px; font-size:13px; font-weight:600; color:var(--on-night-muted); font-family:var(--f-display); letter-spacing:.06em}
.cur button[aria-pressed="true"]{background:var(--gold); color:var(--night)}
.menubtn{display:none; border:1px solid var(--gold-line); background:transparent; border-radius:12px; width:42px; height:42px; place-items:center}
.menubtn span{display:block; width:18px; height:1.5px; background:var(--gold-hi); box-shadow:0 6px 0 var(--gold-hi),0 -6px 0 var(--gold-hi)}
@media (max-width:1180px){
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; background:var(--night); border-bottom:1px solid var(--gold-line); padding:6px var(--gutter) 16px; box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:15px 4px; border-radius:0; border-bottom:1px solid rgba(216,182,106,.18); font-size:14px}
  .nav a[aria-current="page"],.nav a[aria-current="location"]{background:none; color:var(--gold-hi)}
  .menubtn{display:grid}
  .hdr-right{margin-left:auto}
  .hdr-right .hdr-cta{display:none}
}
@media (max-width:1380px){ .hdr-right .hdr-cta{display:none} }
@media (max-width:460px){ .brand small{display:none} .brand b{font-size:17px} .brand svg{width:28px; height:28px} .topbar .wrap{gap:10px} }
@media (max-width:400px){ .brand{gap:8px} .brand b{font-size:15px; letter-spacing:.08em} .brand svg{width:24px; height:24px} .topbar .wrap{gap:8px} .cur button{padding:3px 8px} .menubtn{width:38px; height:38px} }
@media (max-width:350px){ .brand b{font-size:13px; letter-spacing:.04em} .brand svg{display:none} .cur button{padding:2px 6px; font-size:12px} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:99px; border:1px solid transparent; padding:12px 24px; font-family:var(--f-display); font-weight:600; font-size:14px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, background .2s; white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.gold{background:linear-gradient(180deg,#F0D594,#D2A84E); color:var(--night); border-color:#B8913F; box-shadow:0 6px 20px rgba(216,182,106,.25)}
.btn.gold:hover{box-shadow:0 10px 30px rgba(216,182,106,.4)}
.btn.navy{background:var(--navy); color:var(--gold-hi); border-color:var(--navy)}
.btn.navy:hover{background:var(--navy2)}
.btn.line{border-color:var(--gold-deep); color:var(--ink); background:transparent}
.night .btn.line{border-color:var(--gold-line); color:var(--gold-hi)}
.btn.line:hover{background:rgba(216,182,106,.12)}
.btn.ok{background:var(--ok-bg); color:var(--ok-ink)}
.btn.sm{padding:8px 16px; font-size:12.5px}
.btn.wide{width:100%}

/* ---------- common ---------- */
.screen{display:none}
.screen.active{display:block; animation:fade .5s ease both}
@keyframes fade{from{opacity:.4}to{opacity:1}}
.band{padding-block:clamp(60px,8vw,100px)}
.band.p2{background:var(--parch2)}
.frame{position:relative; background:var(--card); border:1px solid var(--gold-deep); outline:1px solid var(--line); outline-offset:-7px; border-radius:18px}
.frame::before{content:"◆"; position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--gold-deep); background:inherit; padding:0 6px; line-height:1.4}
.card{padding:26px; display:flex; flex-direction:column; gap:12px; min-width:0}
.grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.tagrow{display:flex; flex-wrap:wrap; gap:7px}
.tag{border:1px solid var(--gold-deep); color:var(--gold-deep); border-radius:99px; padding:1px 11px; font-family:var(--f-display); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.tag.plain{border-color:var(--line); color:var(--muted)}
.tag.ok{background:var(--ok-bg); color:var(--ok-ink); border-color:transparent}
.tag.live{background:var(--live); color:#FFF6EA; border-color:transparent}
.meta{color:var(--muted); font-size:17px; display:flex; flex-wrap:wrap; gap:2px 14px}
.meta b{color:var(--ink); font-weight:600}
.pricerow{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:10px; flex-wrap:wrap}
.price{font-family:var(--f-display); font-weight:600; font-size:24px; color:var(--ink); font-variant-numeric:lining-nums tabular-nums}
.price small{font-family:var(--f-body); font-weight:400; font-size:15px; color:var(--faint); letter-spacing:0}
.fine{font-size:16px; color:var(--faint)}
.fine a{color:var(--gold-deep)}
ul.feat{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:18px; color:var(--muted)}
ul.feat li{display:flex; gap:10px}
ul.feat li::before{content:"✵"; color:var(--gold-deep); font-size:13px; line-height:1.9; flex:none}
.night ul.feat{color:var(--on-night-muted)} .night ul.feat li::before{color:var(--gold)}
.night .card ul.feat{color:var(--muted)} .night .card ul.feat li::before{color:var(--gold-deep)}
details.syll summary{cursor:pointer; font-family:var(--f-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); font-weight:600}
details.syll ul{margin-top:10px}

/* ribbon heading (like "COURSE SCHEDULE") */
.ribbon{display:block; width:max-content; max-width:calc(100% - 20px); margin:-24px auto 18px; background:var(--navy); color:var(--gold-hi); border:1px solid var(--gold); border-radius:12px; padding:7px 26px; font-family:var(--f-display); font-size:17px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-align:center; box-shadow:0 6px 16px rgba(30,21,16,.25)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(26px,4vw,44px) clamp(60px,7vw,96px); position:relative; overflow:hidden}
.moons{display:block; width:min(100%,520px); height:auto; margin:0 auto}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,70px); align-items:center; margin-top:clamp(20px,3vw,34px)}
.hero-grid > *{min-width:0}
@media (max-width:940px){.hero-grid{grid-template-columns:1fr}}
.h-hero{font-family:var(--f-display); font-weight:700; font-size:clamp(42px,6vw,78px); line-height:1.02; letter-spacing:.02em; margin-top:14px;
  background:linear-gradient(180deg,#F7E3AE 0%,#D8B66A 55%,#B48A3A 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .sub{font-size:clamp(22px,2.4vw,28px); font-style:italic; color:var(--on-night); margin-top:12px; max-width:30ch; line-height:1.3}
.hero .lede{margin-top:16px}
.taglinks{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:24px; font-size:19px; color:#E3C98E}
.taglinks a{text-decoration:none} .taglinks a:hover{color:var(--gold-hi)}
.taglinks i{font-style:normal; color:var(--gold)}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero-visual{display:grid; justify-items:center; width:100%}
.photo-wrap{position:relative; width:min(100%,330px); margin-top:34px}
.nakring{position:absolute; left:50%; top:50%; width:170%; max-width:none; aspect-ratio:1; transform:translate(-50%,-50%); transform-origin:50% 50%; pointer-events:none; overflow:visible; animation:ringturn 480s linear infinite}
@keyframes ringturn{from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)}}
.nakring text{font-family:var(--f-display); font-size:7.6px; letter-spacing:.06em; fill:rgba(216,182,106,.55)}
.nakring text.now{fill:var(--gold-hi); font-weight:700}
.hero-photo{position:relative; margin:0; aspect-ratio:4/5; max-width:100%; border-radius:999px 999px 24px 24px; padding:7px; background:linear-gradient(180deg,#F0D594,#8B6A22); box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero-photo::after{content:""; position:absolute; inset:14px; border-radius:999px 999px 16px 16px; border:1px solid rgba(240,213,148,.55); pointer-events:none}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:999px 999px 18px 18px}
.nextcard{position:relative; width:min(100%,380px); margin-top:-64px; color:var(--ink); padding:20px 22px; display:grid; gap:8px; box-shadow:var(--shadow)}
.livepill{display:inline-flex; align-items:center; gap:7px; background:var(--live); color:#FFF6EA; border-radius:99px; padding:2px 11px; font-family:var(--f-display); font-size:11px; font-weight:700; letter-spacing:.16em; width:max-content}
.livepill i{width:6px; height:6px; border-radius:50%; background:#FFF6EA; animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.3}}
.nextcard h3{font-family:var(--f-display); font-size:18px; line-height:1.3}
.cd{display:flex; gap:20px; font-family:var(--f-display); font-variant-numeric:lining-nums tabular-nums}
.cd div{font-size:26px; font-weight:600; color:var(--navy); line-height:1}
.cd small{display:block; font-family:var(--f-body); font-size:13px; font-style:italic; color:var(--faint); margin-top:4px}

/* strip */
.strip{border-block:1px solid var(--gold-line); padding-block:16px}
.strip .wrap{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center; align-items:center; font-size:clamp(18px,2vw,22px); color:var(--gold-hi); text-align:center}
.strip i{font-style:normal; color:var(--gold); font-size:14px}

/* ---------- recordings: featured ---------- */
.feature{display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; border-radius:22px; border:1px solid var(--gold-deep); box-shadow:var(--shadow)}
.feature > *{min-width:0}
@media (max-width:820px){.feature{grid-template-columns:1fr}}
.feature .fcopy{background:var(--card); padding:clamp(24px,4vw,44px); display:grid; gap:14px; align-content:center}
.feature .fcopy h3{font-family:var(--f-display); font-size:clamp(26px,3vw,36px); line-height:1.12; color:var(--navy)}
.feature .fcopy .fsub{font-style:italic; font-size:21px; color:var(--muted)}
.feature .fart{display:grid; place-items:center; padding:clamp(20px,3vw,36px); position:relative}
.feature .fart img{width:min(100%,420px); border-radius:50%; box-shadow:0 0 0 1px var(--gold-line), 0 0 60px rgba(216,182,106,.25)}

/* ---------- recordings: tiles ---------- */
.tiles{display:grid; gap:24px; grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr))}
.rtile{display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:0 6px 18px rgba(30,21,16,.08); transition:transform .25s ease, box-shadow .25s ease, border-color .25s; cursor:pointer; min-width:0}
.rtile:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(30,21,16,.22); border-color:var(--gold-deep)}
.rart{position:relative; aspect-ratio:5/3; max-width:100%; overflow:hidden}
.rart svg,.rart img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.rart::after{content:""; position:absolute; inset:auto 0 0 0; height:46%; background:linear-gradient(0deg,rgba(8,14,30,.85),transparent); pointer-events:none}
.rart .rcat{z-index:1; position:absolute; left:12px; bottom:10px; font-family:var(--f-display); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-hi); font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.6)}
.rart .rnew{z-index:1; position:absolute; right:12px; top:12px; background:var(--gold); color:var(--night); border-radius:99px; padding:1px 10px; font-family:var(--f-display); font-size:10.5px; font-weight:700; letter-spacing:.14em}
.rbody{padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1}
.rbody h3{font-family:var(--f-body); font-weight:600; font-size:20px; line-height:1.25; color:var(--ink)}
.rbody .rmeta{font-size:15.5px; color:var(--faint); font-style:italic}
.rfoot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px}
.rfoot .price{font-size:20px}
.c-l1{background:linear-gradient(150deg,#1B2F5E,#0B1630)} .c-l2{background:linear-gradient(150deg,#1F5561,#0C2229)}
.c-pr{background:linear-gradient(150deg,#3A2E62,#15112A)} .c-dv{background:linear-gradient(150deg,#123B63,#0A1A30)}
.c-he{background:linear-gradient(150deg,#47305A,#1A1024)} .c-re{background:linear-gradient(150deg,#5A4424,#1E150A)}
.c-mu{background:linear-gradient(150deg,#1E4A48,#0B1F1F)} .c-l3{background:linear-gradient(150deg,#4A3A16,#1A1208)} .c-nw{background:linear-gradient(150deg,#1A2F5C,#0C1730)}

.libtools{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.libtools input{flex:1 1 260px; min-width:0; border:1px solid var(--gold-deep); background:var(--card); border-radius:99px; padding:11px 20px; font:inherit; font-size:18px; color:var(--ink)}
.libtools input::placeholder{color:var(--faint); font-style:italic}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:var(--card); border-radius:99px; padding:6px 14px; font-size:16.5px; color:var(--muted)}
.chip b{font-weight:600; color:var(--gold-deep); margin-left:4px}
.chip[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--gold-hi)}
.chip[aria-pressed="true"] b{color:var(--gold-hi)}
.libcount{margin:18px 0 18px; font-style:italic; color:var(--faint)}
.empty{padding:30px 0; color:var(--muted)}
.paths{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); margin-top:28px}
.path{display:flex; align-items:center; gap:12px; text-decoration:none; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--card); transition:border-color .2s}
.path:hover{border-color:var(--gold-deep)}
.path .dot{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--gold-hi); font-size:17px; border:1px solid var(--gold)}
.path b{display:block; font-weight:600; font-size:17.5px; line-height:1.2}
.path span{font-size:15px; color:var(--faint); font-style:italic}

/* ---------- today's pañcāṅga ---------- */
.pgrid{display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:clamp(30px,5vw,64px); align-items:center}
.pgrid > *{min-width:0}
@media (max-width:860px){.pgrid{grid-template-columns:1fr} .pwheel{margin-inline:auto}}
.pwheel{width:100%; max-width:440px; height:auto}
.pwheel .lab{font-family:var(--f-display); font-size:15px; font-weight:600; letter-spacing:.08em; fill:var(--gold-hi)}
.pwheel .val{font-family:var(--f-body); font-size:15px; font-style:italic; fill:var(--on-night)}
.plist{display:grid; gap:12px; margin-top:22px}
.plist div{display:grid; grid-template-columns:130px 1fr; gap:14px; padding-bottom:12px; border-bottom:1px solid rgba(216,182,106,.2)}
.plist dt{font-family:var(--f-display); font-size:14px; letter-spacing:.12em; color:var(--gold); padding-top:3px}
.plist dd{margin:0; font-size:20px}
.plist dd small{display:block; font-size:15px; font-style:italic; color:var(--on-night-muted)}

/* ---------- schedule ---------- */
.schedule{padding:34px clamp(18px,3vw,34px) 14px}
.slot{display:grid; grid-template-columns:80px 1fr auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line)}
.slot:last-child{border-bottom:0}
.slot > div{min-width:0}
@media (max-width:640px){.slot{grid-template-columns:64px 1fr} .slot .btn{grid-column:2; justify-self:start}}
.datechip{background:var(--navy); color:var(--gold-hi); border-radius:50%; aspect-ratio:1; max-width:100%; display:grid; place-content:center; text-align:center; border:1px solid var(--gold)}
.datechip .d{font-family:var(--f-display); font-size:24px; font-weight:600; line-height:1}
.datechip .m{font-family:var(--f-display); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; margin-top:2px}
.slot h3{font-family:var(--f-display); font-size:18px; line-height:1.3; margin-bottom:3px; color:var(--navy)}
.tzline{font-size:15.5px; color:var(--faint); font-style:italic}

/* ---------- icon circles (how it works / details) ---------- */
.steps{display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.step{display:grid; grid-template-columns:54px 1fr; gap:14px; align-items:start}
.icirc{width:54px; height:54px; border-radius:50%; background:var(--navy); border:1px solid var(--gold); display:grid; place-items:center; color:var(--gold-hi)}
.icirc svg{width:24px; height:24px}
.step h3{font-family:var(--f-display); font-size:17px; color:var(--navy); letter-spacing:.04em}
.step p{font-size:17.5px; color:var(--muted); margin-top:4px}

/* ---------- readings ---------- */
.reading h3{font-family:var(--f-display); font-size:21px; color:var(--navy)}
.reading .who{font-style:italic; color:var(--faint); font-size:17px}

/* ---------- teachers ---------- */
.lead-teacher{display:grid; grid-template-columns:280px 1fr; gap:clamp(24px,4vw,52px); align-items:center}
.lead-teacher > *{min-width:0}
@media (max-width:720px){.lead-teacher{grid-template-columns:1fr}}
.lead-teacher .ph{border-radius:999px 999px 22px 22px; padding:6px; background:linear-gradient(180deg,#F0D594,#8B6A22); max-width:280px}
.lead-teacher .ph img{border-radius:999px 999px 17px 17px; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; width:100%}
.lead-teacher h3{font-family:var(--f-display); font-size:clamp(26px,3vw,36px); color:var(--navy)}
.guests{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); margin-top:38px; padding-top:30px; border-top:1px solid var(--line)}
.guest{display:flex; gap:14px; align-items:flex-start}
.mono{flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-display); color:var(--gold-hi); font-size:17px; border:1px solid var(--gold); background:var(--navy)}
.guest h4{font-family:var(--f-display); font-size:17px; color:var(--navy)}
.guest h4 span{display:block; font-family:var(--f-body); font-style:italic; font-weight:400; font-size:15px; color:var(--faint); letter-spacing:0}
.guest p{font-size:17px; color:var(--muted); margin-top:6px}

/* ---------- class cards ---------- */
.ct{font-family:var(--f-display); font-size:19px; line-height:1.3; color:var(--navy)}
.desc{font-size:18px; color:var(--muted)}
.cthumb{height:130px; border-radius:12px; overflow:hidden; position:relative}
.cthumb svg,.cthumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cthumb .tag{position:absolute; top:10px; left:10px}

/* ---------- books ---------- */
.cover{aspect-ratio:3/4; max-width:100%; border-radius:6px 14px 14px 6px; padding:22px 18px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center; border:1px solid var(--gold); outline:1px solid rgba(216,182,106,.4); outline-offset:-10px; box-shadow:inset 7px 0 0 rgba(0,0,0,.25), var(--shadow)}
.cover .ba{font-family:var(--f-display); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-night-muted)}
.cover .bt{font-family:var(--f-display); font-size:20px; font-weight:600; line-height:1.25; color:var(--gold-hi)}
.cover .orn2{font-size:22px; color:var(--gold)}

/* ---------- tiers ---------- */
.billing{display:inline-flex; border:1px solid var(--gold-deep); border-radius:99px; padding:3px; margin-top:24px; background:var(--card)}
.billing button{border:0; background:none; border-radius:99px; padding:7px 18px; font-size:17px; color:var(--muted)}
.billing button[aria-pressed="true"]{background:var(--navy); color:var(--gold-hi)}
.tier h3{font-family:var(--f-display); font-size:22px; color:var(--navy)}
.tier .price{font-size:40px}
.tier.hot{background:var(--navy); color:var(--on-night); border-color:var(--gold)}
.tier.hot h3,.tier.hot .price{color:var(--gold-hi)}
.tier.hot .price small,.tier.hot p{color:var(--on-night-muted)!important}
.tier.hot ul.feat{color:var(--on-night-muted)} .tier.hot ul.feat li::before{color:var(--gold)}
.tier.hot::before{color:var(--gold); background:var(--navy)}
.hotlabel{position:absolute; top:-13px; right:22px; background:var(--gold); color:var(--night); border-radius:99px; padding:2px 12px; font-family:var(--f-display); font-size:11px; font-weight:700; letter-spacing:.14em}

/* membership teaser */
.teaser{display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap; padding:clamp(26px,4vw,40px); border-radius:22px; border:1px solid var(--gold)}
.teaser > div{min-width:0}
.teaser h2{font-family:var(--f-display); font-size:clamp(24px,3vw,34px); color:var(--gold-hi); margin-top:8px}
.teaser p{color:var(--on-night-muted); margin-top:6px}

/* ---------- footer ---------- */
footer{padding-block:56px 30px; border-top:1px solid var(--gold-line)}
.fgrid{display:grid; gap:32px; grid-template-columns:1.4fr 1fr 1fr 1fr}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}
.fgrid > div{min-width:0}
footer h4{font-family:var(--f-display); color:var(--gold-hi); font-size:15px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:17.5px}
footer a{color:var(--on-night); text-decoration:none}
footer a:hover{color:var(--gold-hi)}
footer p{color:var(--on-night-muted); font-size:17.5px}
.fbottom{margin-top:40px; padding-top:20px; border-top:1px solid rgba(216,182,106,.25); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:15px; color:var(--on-night-muted)}
.copy{border:1px solid var(--gold-line); background:none; color:var(--gold-hi); border-radius:99px; padding:0 9px; font-size:13px; margin-left:6px}

/* ---------- sticky bar ---------- */
.stickybar{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom,0px)); z-index:70; width:min(calc(100% - 24px),660px);
  display:flex; align-items:center; gap:14px; padding:10px 10px 10px 20px; border-radius:99px; background:rgba(30,21,16,.96); color:var(--on-night); border:1px solid var(--gold); box-shadow:var(--shadow)}
.stickybar .lab{flex:1; min-width:0; font-family:var(--f-display); font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--gold-hi)}
.stickybar .lab small{display:block; font-family:var(--f-body); font-weight:400; color:var(--on-night-muted); font-size:15px; overflow:hidden; text-overflow:ellipsis}
.stickybar .x{border:0; background:none; width:34px; height:34px; border-radius:50%; color:var(--on-night-muted); font-size:20px; flex:none}
.stickybar .x:hover{background:rgba(255,255,255,.08)}

/* ---------- request dialog ---------- */
dialog{border:1px solid var(--gold-deep); border-radius:22px; padding:0; width:min(540px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); background:var(--card); color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.45)}
dialog::backdrop{background:rgba(20,14,10,.65); backdrop-filter:blur(3px)}
.dlg{padding:28px; display:grid; gap:14px}
.dlg-head{display:flex; justify-content:space-between; gap:12px; align-items:start}
.dlg-head h2{font-family:var(--f-display); font-size:22px; color:var(--navy)}
.dlg-head button{border:1px solid var(--line); background:none; border-radius:50%; width:36px; height:36px; font-size:20px; flex:none; color:var(--muted)}
.summary{background:var(--navy); color:var(--on-night); border-radius:14px; padding:12px 16px; font-size:17px}
.summary b{display:block; font-family:var(--f-display); font-weight:600; color:var(--gold-hi); font-size:16px; letter-spacing:.02em}
.summary .k{font-style:italic; color:var(--on-night-muted); font-size:15px}
.field{display:grid; gap:4px}
.field label{font-size:16px; color:var(--muted)}
.field input,.field textarea{width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 13px; font:inherit; font-size:18px; background:#FFFDF7; color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--gold-deep)}
.field textarea{min-height:80px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:480px){.row2{grid-template-columns:1fr}}
.notice{border-radius:14px; padding:14px; font-size:17.5px}
.notice.ok{background:var(--ok-bg); color:var(--ok-ink)}
.notice.info{background:var(--parch2); color:var(--ink)}

.ts-box:empty{display:none}
.ts-box{min-height:65px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* former inline style attributes (!important keeps their old precedence) */
.ix-1{margin-top:14px !important}
.ix-2{margin-top:44px !important}
.ix-3{margin-top:48px !important;margin-bottom:18px !important}
.ix-4{margin-top:36px !important}
.ix-5{margin-top:16px !important;font-size:15.5px !important;color:var(--on-night-muted) !important;font-style:italic !important}
.ix-6{margin-top:22px !important}
.ix-7{margin-top:34px !important}
.ix-8{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)) !important}
.ix-9{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)) !important}
.ix-10{padding-bottom:clamp(60px,8vw,100px) !important}
.ix-11{padding-block:clamp(44px,6vw,72px) !important}
.ix-12{font-size:clamp(34px,5vw,60px) !important}
.ix-13{margin-inline:auto !important;max-width:40ch !important}
.ix-14{margin-top:18px !important}
.ix-15{margin:16px auto 0 !important}
.ix-16{padding-top:clamp(40px,5vw,60px) !important}
.ix-17{margin:14px auto 0 !important}
.ix-18{margin-top:26px !important;margin-bottom:18px !important}
.ix-19{margin-top:50px !important;margin-bottom:18px !important}
.ix-20{margin-top:30px !important}
.ix-21{display:grid !important;gap:14px !important}
.ix-22{width:max-content !important}
.ix-23{font-size:19.5px !important}
.ix-24{display:flex !important;gap:10px !important;flex-wrap:wrap !important}
.ix-25{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)) !important}
.ix-26{padding-top:clamp(36px,5vw,56px) !important}
.ix-27{margin-top:0 !important}
.ix-28{margin-top:40px !important;align-items:stretch !important}
.ix-29{color:var(--muted) !important}
.ix-30{margin-top:auto !important}
.ix-31{margin-top:26px !important}
.ix-32{max-width:36ch !important}
.ix-33{display:grid !important;gap:12px !important}
.ix-34{text-align:center !important}
.ix-35{object-position:center 42% !important}
.ix-36{font-size:16px !important}
.ix-37{padding:18px !important}

/* WhatsApp click-to-chat button */
.wa-fab{position:fixed;right:clamp(14px,3vw,24px);bottom:calc(clamp(14px,3vw,24px) + env(safe-area-inset-bottom,0px));z-index:55;width:54px;height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .15s ease,box-shadow .15s ease}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(0,0,0,.5)}
.wa-fab:focus-visible{outline:3px solid #D8B66A;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wa-fab{transition:none}}