/* ==========================================================================
   Wu Xing Dao Kung Fu - design system v15 · SILK & LACQUER / 3E EMERGENCE
   One fixed atmospheric world behind every page - public, member, admin.
   No stacked blocks: sections are transparent; silk panels float on lacquer.
   PART 1 = the 3E system (ported from designs/design-3e.html).
   PART 2 (below) = the platform layer: every legacy component class
   reskinned in the same language, preserving all JS contracts.
   ========================================================================== */
/* ============ SILK & LACQUER · 3E EMERGENCE ============
   One fixed atmospheric world behind everything. No bands.
   Chapters emerge: banners are hung, plaques settle while their
   brass brackets draw themselves, seals stamp in. Three sticky
   staged moments (hero, medallion, member teaser). Native scroll,
   transform/opacity only, timed failsafe, reduced-motion static. */
:root{
  --ink:#141311;
  --lac-deep:#161514;
  --lac:#1c1b19;
  --lac-mid:#242220;
  --lac-hi:#2e2b28;
  --seal:#9E2B25;--seal-hi:#B5342C;--steel:#3E6E8E;
  --silk:#F4EFE2;
  --silk-hi:#FAF7EE;
  --silk-lo:#EDE6D6;
  --brass:#8A8271;
  --brass-soft:rgba(138,130,113,.45);
  --brass-faint:rgba(138,130,113,.22);
  --body-ink:#2a2723;
  --cream:#E8E1D2;
  --cream-soft:rgba(244,239,226,.74);
  --serif:"Cormorant Garamond","Noto Serif SC",serif;
  --quote:"Cormorant Garamond","Noto Serif SC",serif;
  --sans:"Inter",sans-serif;
  --cjk:"Noto Serif SC",serif;
  --pad:clamp(1.25rem,4vw,3rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{overflow-x:clip}
body{
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  color:var(--cream);
  background:#1a1917;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-3.5rem;z-index:1000;background:var(--silk);color:var(--lac);padding:.6rem 1.1rem;font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--brass);transition:top .2s}
.skip:focus{top:1rem}

/* ============ THE WORLD (single fixed backdrop, no bands) ============ */
.world{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% -14%,rgba(158,43,37,.2) 0%,rgba(158,43,37,0) 58%),
    radial-gradient(95% 70% at 88% 78%,rgba(158,43,37,.1),transparent 62%),
    radial-gradient(120% 90% at 50% 116%,rgba(244,239,226,.06),transparent 55%),
    linear-gradient(180deg,#201e1c 0%,#1a1917 46%,#141311 100%);}
.world::after{content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,rgba(245,236,217,.013) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,rgba(245,236,217,.01) 0 1px,transparent 1px 9px);}
.world-wm{position:fixed;inset:0;z-index:-1;display:grid;place-items:center;pointer-events:none;will-change:transform}
.world-wm span{writing-mode:vertical-rl;white-space:nowrap;font-family:var(--cjk);font-weight:900;font-size:clamp(9rem,26vh,20rem);line-height:1;letter-spacing:.06em;color:var(--lac-hi);user-select:none}

/* ---- type ---- */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--silk)}
h1{font-size:clamp(2.7rem,1.4rem + 6vw,5.4rem);letter-spacing:.02em}
h2{font-size:clamp(1.9rem,1.35rem + 2.4vw,3.1rem);letter-spacing:.02em}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem)}
.hanzi{font-family:var(--cjk)}
p.lede{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);max-width:38em}

/* kicker: numeral chop + rule + label */
.kicker{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:clamp(1rem,2.5vw,1.6rem)}
.kicker .kn{font-family:var(--cjk);font-weight:600;font-size:.85rem;line-height:1;color:var(--brass);border:1px solid var(--brass-soft);padding:.42em .5em .34em;background:rgba(191,160,106,.07)}
.kicker .kt{font:600 .72rem/1 var(--sans);letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:var(--brass)}
.kicker::before,.kicker::after{content:"";height:1px;width:clamp(26px,6vw,64px);background:linear-gradient(90deg,transparent,var(--brass-soft));}
.kicker::after{background:linear-gradient(90deg,var(--brass-soft),transparent)}
.sec-head{text-align:center;max-width:46em;margin:0 auto clamp(2.2rem,5vw,3.4rem)}
.sec-head .sub{margin:1rem auto 0;max-width:36em;color:var(--cream-soft)}

/* ---- layout ---- */
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(2.6rem,5vw,4.4rem);position:relative}

/* silk thread connectors between chapters — horizontal divider (Grant, Jul 2026) */
.thread{width:min(300px,55%);height:1px;margin:clamp(1.3rem,3vw,2.3rem) auto;position:relative;background:linear-gradient(90deg,transparent,var(--brass-soft) 30%,var(--brass-soft) 70%,transparent)}
.thread::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%) rotate(45deg);background:var(--brass)}

/* ---- brass corner brackets (SVG, drawable) ---- */
.bk{position:absolute;width:26px;height:26px;stroke:var(--brass);stroke-width:1.5;fill:none;stroke-dasharray:100;stroke-dashoffset:0;pointer-events:none;z-index:3}
.bk.tl{top:-7px;left:-7px}
.bk.tr{top:-7px;right:-7px;transform:scaleX(-1)}
.bk.bl{bottom:-7px;left:-7px;transform:scaleY(-1)}
.bk.br{bottom:-7px;right:-7px;transform:scale(-1)}

/* ---- buttons ---- */
.btn{display:inline-block;font:600 .78rem/1 var(--sans);letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;text-decoration:none;padding:1.05em 2.1em .95em;border:1px solid transparent;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s;cursor:pointer}
.btn-silk{background:var(--silk);color:var(--lac);border-color:var(--silk)}
.btn-silk:hover{background:var(--silk-hi);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.btn-brass{background:transparent;color:var(--silk);border-color:var(--brass-soft)}
.btn-brass:hover{border-color:var(--brass);background:rgba(191,160,106,.1)}
.btn-lac{background:var(--lac);color:var(--silk);border-color:var(--lac)}
.btn-lac:hover{background:var(--lac-mid);box-shadow:0 6px 20px rgba(58,21,16,.28)}

/* ============ HEADER ============ */
header{position:sticky;top:0;z-index:100;background:rgba(32,13,8,.82);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--brass-faint);color:var(--silk)}
.hd-in{max-width:1320px;margin-inline:auto;padding:.7rem var(--pad);display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;margin-right:auto}
.brand svg{width:38px;height:38px;flex:none}
.brand .bn{font-family:var(--serif);font-weight:700;font-size:1.18rem;letter-spacing:.09em;line-height:1.05;color:var(--silk)}
.brand .bs{font:500 .6rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--brass);margin-top:.28em;display:block}
nav.main{display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.4rem)}
nav.main a{font:500 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--cream-soft);padding:.5em .15em;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav.main a:hover{color:var(--silk);border-bottom-color:var(--brass)}
nav.main a.login{border:1px solid var(--brass-soft);padding:.7em 1.2em;color:var(--brass);margin-left:.4rem}
nav.main a.login:hover{border-color:var(--brass);color:var(--silk);background:rgba(191,160,106,.1)}
.menu-btn{display:none;background:none;border:1px solid var(--brass-soft);color:var(--silk);width:44px;height:40px;cursor:pointer;position:relative}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:11px;width:20px;height:1.5px;background:var(--silk);transition:transform .25s,opacity .2s}
.menu-btn span{top:19px}
.menu-btn span::before{left:0;top:-6px}
.menu-btn span::after{left:0;top:6px}
.menu-btn[aria-expanded="true"] span{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span::before{opacity:0}
.menu-btn[aria-expanded="true"] span::after{transform:rotate(-90deg) translateX(6px)}
@media (max-width:1220px){
  .menu-btn{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#26100a;border-bottom:1px solid var(--brass-faint);flex-direction:column;align-items:stretch;padding:1rem var(--pad) 2rem;gap:0}
  nav.main.open{display:flex}
  nav.main a{padding:1em .2em;border-bottom:1px solid rgba(191,160,106,.14);font-size:.8rem}
  nav.main a.login{margin:1.2rem 0 0;text-align:center}
}

/* ============ STAGES (sticky staging, desktop + motion only) ============ */
.stage{position:relative;--p:0}

/* ============ HERO ============ */
.hero{position:relative;min-height:max(600px,100vh);min-height:max(600px,100svh);display:flex;align-items:center;padding-block:clamp(4.5rem,8vw,6rem) clamp(6rem,9vw,7.5rem);color:var(--silk)}
.hero-in{position:relative;width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad);text-align:center;z-index:2}
.hero-core{max-width:760px;margin-inline:auto;will-change:transform,opacity}
.hero .loc{font:600 .68rem/1.8 var(--sans);letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--brass);margin-bottom:2rem}
.hero-seal{width:clamp(74px,10vw,96px);margin:0 auto 2.2rem;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.hero h1{
  background:linear-gradient(180deg,#fdf7e9 20%,#ecdcb8 75%,#d8c395);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:1rem}
.hero .hz-line{font-family:var(--cjk);font-weight:600;font-size:clamp(1rem,.9rem + .8vw,1.35rem);letter-spacing:.9em;text-indent:.9em;color:var(--brass);margin-bottom:1.8rem}
.hero .lede{color:var(--cream-soft);margin-inline:auto;max-width:34em;margin-bottom:2.6rem}
.hero .ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* flanking banners, hung from their rods */
.vbanner{position:absolute;top:0;width:96px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 16px 30px rgba(0,0,0,.4));z-index:1}
.vbanner.l{left:var(--pad)}
.vbanner.r{right:var(--pad)}
.vbanner .rod{width:120px;height:8px;background:linear-gradient(90deg,var(--brass) 0 9px,#211008 9px calc(100% - 9px),var(--brass) calc(100% - 9px));border-radius:4px;margin-bottom:-2px;z-index:1}
.vbanner .cloth{
  width:82px;height:352px;padding:0 0 30px;display:flex;justify-content:center;align-items:center;
  background:linear-gradient(180deg,#5e2115,#451810 70%,#3b140d);
  border-inline:1px solid rgba(191,160,106,.35);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 26px),0 100%)}
.vbanner .cloth b{writing-mode:vertical-rl;font-family:var(--cjk);font-weight:600;font-size:1.7rem;letter-spacing:.55em;color:var(--silk);opacity:.95}
.vbanner .cap{margin-top:1rem;writing-mode:vertical-rl;font:600 .58rem/1 var(--sans);letter-spacing:.4em;text-transform:uppercase;color:var(--brass-soft)}
@media (max-width:1180px){.vbanner{display:none}}
/* proof line: hairlines only, no band */
.proof{position:absolute;left:0;right:0;bottom:0}
.proof::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(920px,86%);height:1px;background:linear-gradient(90deg,transparent,var(--brass-soft),transparent)}
.proof ul{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem 0;max-width:1180px;margin-inline:auto;padding:1rem var(--pad) 1.1rem}
.proof li{font:500 .68rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-soft);display:flex;align-items:center}
.proof li+li::before{content:"";width:4px;height:4px;background:var(--brass);transform:rotate(45deg);margin-inline:clamp(.8rem,2.5vw,1.6rem);flex:none}

/* ============ PHILOSOPHY (medallion stage) ============ */
.phil-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media (max-width:900px){.phil-grid{grid-template-columns:1fr}}
.reading{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.8rem 0;border-top:1px solid rgba(191,160,106,.18)}
.reading:last-of-type{border-bottom:1px solid rgba(191,160,106,.18)}
.reading .chip{writing-mode:vertical-rl;font-family:var(--cjk);font-weight:600;font-size:1.5rem;letter-spacing:.3em;color:var(--silk);background:linear-gradient(180deg,var(--lac-mid),var(--lac));padding:1rem .55rem;border:1px solid var(--brass-soft);align-self:start}
.reading h3{margin-bottom:.4rem}
.reading p{color:var(--cream-soft);max-width:32em}
.medallion{justify-self:center;width:min(100%,460px)}
.medallion figcaption{text-align:center;font:500 .68rem/1.7 var(--sans);letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--brass);margin-top:1.4rem}
.med-rot{transform-box:fill-box;transform-origin:center}
.el-node{transform-box:fill-box;transform-origin:center}

/* ============ STYLES (five hung banners) ============ */
#styles .ghost{position:absolute;top:4%;right:1.5%;writing-mode:vertical-rl;white-space:nowrap;font-family:var(--cjk);font-weight:900;font-size:clamp(9rem,18vw,15rem);line-height:1;color:rgba(245,236,217,.028);pointer-events:none;user-select:none}
.styles-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,2vw,1.6rem);max-width:1240px;margin-inline:auto;padding-inline:var(--pad);position:relative}
.sbanner{flex:1 1 188px;max-width:236px;min-width:186px;display:flex;flex-direction:column;align-items:center;text-decoration:none}
.sbanner .rod{width:calc(100% + 22px);height:8px;background:linear-gradient(90deg,var(--brass) 0 8px,#211008 8px calc(100% - 8px),var(--brass) calc(100% - 8px));border-radius:4px;margin-bottom:-2px;z-index:1}
.sbanner .cloth{
  width:100%;flex:1;position:relative;
  background:linear-gradient(180deg,var(--silk-hi),var(--silk) 60%,#eee0c2);
  box-shadow:0 18px 34px rgba(0,0,0,.38);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 24px),0 100%);
  padding:1.6rem 1.3rem 3.4rem;display:flex;flex-direction:column;min-height:400px;
  transition:box-shadow .35s ease,transform .35s ease}
.sbanner:hover .cloth{box-shadow:0 26px 44px rgba(0,0,0,.5);transform:translateY(6px)}
.sbanner .hz{writing-mode:vertical-rl;font-family:var(--cjk);font-weight:600;font-size:clamp(1.7rem,1.4rem + .8vw,2.1rem);letter-spacing:.32em;color:var(--lac-hi);align-self:center;margin-bottom:auto;padding-top:.4rem}
.sbanner .sn{font-family:var(--serif);font-weight:700;font-size:1.28rem;letter-spacing:.04em;color:var(--lac);margin-top:1.6rem}
.sbanner .se{font:600 .62rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--lac-hi);margin:.45rem 0 .8rem}
.sbanner .sd{font-size:.86rem;line-height:1.65;color:#4c332a}
.sbanner .cloth::before{content:"";position:absolute;inset:10px 10px 30px;border:1px solid rgba(107,36,27,.16);pointer-events:none}

/* ============ PROGRAMS (settling plaques) ============ */
.prog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.8vw,2.2rem)}
@media (max-width:980px){.prog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.prog-grid{grid-template-columns:1fr}}
.prog{position:relative;background:var(--silk-hi);border:1px solid rgba(107,36,27,.25);padding:2rem 1.8rem 1.9rem;box-shadow:0 16px 34px rgba(0,0,0,.32);transition:border-color .3s,box-shadow .3s}
.prog::before{content:"";position:absolute;inset:6px;border:1px solid rgba(107,36,27,.12);pointer-events:none}
.prog:hover{border-color:var(--brass);box-shadow:0 22px 44px rgba(0,0,0,.42)}
.prog .pn{font-family:var(--cjk);font-weight:600;font-size:.95rem;color:var(--seal);border:1px solid var(--brass-soft);width:2.1em;height:2.1em;display:grid;place-items:center;margin-bottom:1.3rem}
.prog h3{margin-bottom:.55rem;color:var(--lac)}
.prog p{font-size:.92rem;color:#4c332a}

/* ============ TIMETABLE (hung board) ============ */
.hangboard{max-width:980px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.hb-rod{width:min(72%,560px);height:9px;border-radius:5px;background:linear-gradient(90deg,var(--brass) 0 10px,#211008 10px calc(100% - 10px),var(--brass) calc(100% - 10px));z-index:1}
.hb-cords{width:min(60%,470px);height:34px;display:flex;justify-content:space-between}
.hb-cords i{width:1px;background:linear-gradient(180deg,var(--brass),var(--brass-soft))}
.board{width:100%;background:linear-gradient(180deg,#31130c,#28100a);border:1px solid var(--brass-soft);padding:clamp(1.6rem,4vw,3rem);position:relative;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.board::before{content:"";position:absolute;inset:8px;border:1px solid var(--brass-faint);pointer-events:none}
.board-head{text-align:center;margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.board-head .hz{font-family:var(--cjk);font-weight:600;letter-spacing:.6em;text-indent:.6em;color:var(--brass);font-size:1rem;margin-bottom:.5rem}
.board-head h3{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);color:var(--silk);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.4rem);position:relative;z-index:1}
@media (max-width:780px){.days{grid-template-columns:1fr}}
.day{background:var(--silk);border:1px solid rgba(191,160,106,.55)}
.day h4{font:600 .74rem/1 var(--sans);letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;text-align:center;color:var(--silk);background:linear-gradient(180deg,var(--lac-hi),var(--lac-mid));padding:.95em 0 .85em;border-bottom:1px solid rgba(191,160,106,.5)}
.day ul{list-style:none;padding:.5rem 1.2rem .9rem}
.day li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(107,36,27,.15);font-size:.9rem}
.day li:last-child{border-bottom:0}
.day li b{font-weight:600;color:var(--lac);letter-spacing:.02em}
.day li span{font-size:.8rem;color:#5d4130;white-space:nowrap;font-variant-numeric:tabular-nums}
.board-note{margin:clamp(1.4rem,3vw,2rem) auto 0;max-width:640px;text-align:center;border:1px solid var(--brass-soft);padding:1rem 1.6rem;position:relative;z-index:1}
.board-note p{font-size:.86rem;letter-spacing:.06em;color:var(--cream-soft)}
.board-note p b{color:var(--brass);font-weight:600}

/* ============ INSTRUCTOR ============ */
.inst-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media (max-width:900px){.inst-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.portrait{position:relative;aspect-ratio:3/4;border:1px solid var(--brass-soft);
  background:
    radial-gradient(120% 85% at 28% 18%,#562013,transparent 55%),
    radial-gradient(100% 80% at 78% 92%,#4a1c11,transparent 60%),
    linear-gradient(165deg,#3c160e,#241009 70%);
  box-shadow:0 26px 60px rgba(0,0,0,.4)}
.portrait::before{content:"";position:absolute;inset:9px;border:1px solid var(--brass-faint);pointer-events:none;z-index:2}
.portrait .wm{position:absolute;top:6%;right:10%;writing-mode:vertical-rl;white-space:nowrap;font-family:var(--cjk);font-weight:900;font-size:clamp(5rem,10vw,7.5rem);line-height:1;color:rgba(245,236,217,.05);letter-spacing:.12em;user-select:none}
.portrait .chop{position:absolute;right:9%;bottom:20%;width:44px;opacity:.9}
.portrait .plate{position:absolute;left:9px;right:9px;bottom:9px;background:rgba(30,14,8,.72);backdrop-filter:blur(2px);border-top:1px solid var(--brass-faint);padding:.9rem 1.2rem;text-align:center}
.portrait .plate b{display:block;font-family:var(--serif);font-weight:700;font-size:1.1rem;letter-spacing:.1em;color:var(--silk)}
.portrait .plate span{font:500 .62rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--brass)}
.inst-copy .kicker{justify-content:flex-start}
.inst-copy .kicker::before{display:none}
.inst-copy h2{margin-bottom:1.4rem}
.inst-quote{font-family:var(--quote);font-style:italic;font-weight:500;font-size:clamp(1.35rem,1.15rem + 1vw,1.8rem);line-height:1.45;color:var(--silk);border-left:2px solid var(--brass);padding-left:1.4rem;margin-bottom:1.6rem}
.inst-copy>p{color:var(--cream-soft);max-width:36em;margin-bottom:2rem}
.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:520px}
.creds div{background:var(--silk-hi);border:1px solid rgba(107,36,27,.25);padding:1.1rem 1.2rem;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.creds b{display:block;font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--lac);letter-spacing:.02em}
.creds span{font:500 .64rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#6d4a34}

/* ============ TESTIMONIALS ============ */
.scrolls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(2rem,4vw,3rem);max-width:1060px;margin-inline:auto}
.scroll{position:relative;background:linear-gradient(180deg,var(--silk-hi),var(--silk));border-inline:1px solid rgba(107,36,27,.14);padding:clamp(2.2rem,4vw,3rem) clamp(1.6rem,3vw,2.6rem);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.scroll::before,.scroll::after{content:"";position:absolute;left:-13px;right:-13px;height:15px;border-radius:8px;background:linear-gradient(90deg,var(--brass) 0 11px,#241009 11px calc(100% - 11px),var(--brass) calc(100% - 11px));box-shadow:0 4px 10px rgba(0,0,0,.3)}
.scroll::before{top:-8px}
.scroll::after{bottom:-8px}
.scroll blockquote{font-family:var(--quote);font-style:italic;font-weight:500;font-size:clamp(1.08rem,1rem + .5vw,1.3rem);line-height:1.6;color:#3d241a}
.scroll blockquote::before{content:"\201C";display:block;font-family:var(--serif);font-size:3rem;line-height:.6;color:var(--brass);margin-bottom:.7rem;font-style:normal}
.scroll figcaption{margin-top:1.5rem;display:flex;align-items:center;gap:.8rem;font:600 .7rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--lac-hi)}
.scroll figcaption::before{content:"";width:26px;height:1px;background:var(--brass)}
.stars{color:var(--seal);letter-spacing:.18em;font-size:.8rem;margin-bottom:1rem}

/* ============ MEMBERS (staged teaser) ============ */
.mem{max-width:1060px;margin-inline:auto}
.mem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.1rem;margin-bottom:2.6rem}
.mem-card{background:rgba(245,236,217,.045);border:1px solid var(--brass-faint);padding:2.2rem 1.9rem;text-align:center}
.mem-card svg{width:40px;height:40px;margin:0 auto 1.2rem;stroke:var(--brass);fill:none;stroke-width:1.3}
.mem-card h3{font-size:1.2rem;margin-bottom:.5rem;color:var(--silk)}
.mem-card p{font-size:.88rem;color:var(--cream-soft)}
.mem-cta{text-align:center}

/* ============ VISIT ============ */
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem)}
@media (max-width:900px){.visit-grid{grid-template-columns:1fr}}
.visit-info .kicker{justify-content:flex-start}
.visit-info .kicker::before{display:none}
.visit-info h2{margin-bottom:1.2rem}
.visit-info>p{color:var(--cream-soft);max-width:30em;margin-bottom:2.2rem}
.vlist{list-style:none;border-top:1px solid rgba(191,160,106,.18)}
.vlist li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;padding:1.15rem 0;border-bottom:1px solid rgba(191,160,106,.18)}
.vlist svg{width:22px;height:22px;stroke:var(--brass);fill:none;stroke-width:1.4}
.vlist a{color:var(--silk);text-decoration:none;border-bottom:1px solid var(--brass-soft);transition:border-color .2s}
.vlist a:hover{border-bottom-color:var(--brass)}
.vlist .vl-k{display:block;font:600 .6rem/1.6 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#c8a97c}
form.enq{background:var(--silk-hi);border:1px solid rgba(107,36,27,.25);padding:clamp(1.6rem,3.5vw,2.6rem);position:relative;box-shadow:0 26px 56px rgba(0,0,0,.4)}
form.enq::before{content:"";position:absolute;inset:7px;border:1px solid rgba(107,36,27,.12);pointer-events:none}
form.enq>*{position:relative;z-index:1}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:560px){.f-row{grid-template-columns:1fr}}
.field{margin-bottom:1.2rem}
.field label{display:block;font:600 .64rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--lac-hi);margin-bottom:.55rem}
.field input,.field select,.field textarea{width:100%;font:400 .96rem/1.5 var(--sans);color:var(--body-ink);background:var(--silk);border:1px solid rgba(107,36,27,.3);padding:.8em 1em;border-radius:0;transition:border-color .2s,box-shadow .2s;appearance:none}
.field select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b241b' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center}
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
form.enq .btn{width:100%;margin-top:.4rem}

/* ============ FOOTER (no band, hairline only) ============ */
footer{position:relative;padding-top:1px}
footer::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1100px,92%);height:1px;background:linear-gradient(90deg,transparent,var(--brass-soft),transparent)}
.ft-in{max-width:1180px;margin-inline:auto;padding:clamp(3rem,6vw,4.5rem) var(--pad) 2rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);color:var(--cream-soft)}
@media (max-width:820px){.ft-in{grid-template-columns:1fr}}
.ft-brand{display:flex;gap:1.1rem;align-items:flex-start}
.ft-brand svg{width:52px;flex:none}
.ft-brand .fb-n{font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:.08em;color:var(--silk);line-height:1.2}
.ft-brand p{font-size:.85rem;max-width:26em;margin-top:.6rem}
.ft h3{font:600 .66rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--brass);margin-bottom:1.2rem}
.ft ul{list-style:none}
.ft li{font-size:.88rem;padding:.32rem 0}
.ft a{color:var(--cream-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.ft a:hover{color:var(--silk);border-bottom-color:var(--brass)}
.socials{display:flex;gap:.9rem;margin-top:1.2rem}
.socials a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--brass-faint);transition:border-color .25s,background-color .25s}
.socials a:hover{border-color:var(--brass);background:rgba(191,160,106,.08)}
.socials svg{width:17px;height:17px;fill:var(--brass)}
.ft-base{text-align:center;padding:1.4rem var(--pad) 2rem;font:500 .68rem/1.8 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(245,236,217,.45);position:relative}
.ft-base::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(520px,70%);height:1px;background:linear-gradient(90deg,transparent,var(--brass-faint),transparent)}
.ft-base .hz{font-family:var(--cjk);letter-spacing:.5em;color:var(--brass-soft);display:block;margin-bottom:.3rem}

/* ============ EMERGENCE (all hidden states live here only) ============ */
@media (prefers-reduced-motion:no-preference){
  /* generic emergence: rise / settle / hang / stamp */
  .js .em{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.9,.24,1)}
  .js .em.settle{transform:translate3d(0,32px,0) scale(.982)}
  .js .em.hang{transform:translate3d(0,-48px,0);transition:opacity .7s ease,transform .95s cubic-bezier(.18,1.22,.34,1)}
  .js .em.stamp{transform:scale(1.32) rotate(6deg);transition:opacity .4s ease,transform .55s cubic-bezier(.2,1.4,.36,1)}
  .js .em.thread{transform:scaleX(0);transform-origin:center;transition:opacity .7s ease,transform 1s ease}
  .js .em.in{opacity:1;transform:none}
  .js .em.d1{transition-delay:.1s}
  .js .em.d2{transition-delay:.2s}
  .js .em.d3{transition-delay:.3s}
  .js .em.d4{transition-delay:.4s}
  /* brackets draw themselves once their plaque settles */
  .js .em .bk{stroke-dashoffset:100}
  .js .em.in .bk{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease .35s}
  /* staged children (medallion + member stages) */
  .js .st{opacity:0;transform:translate3d(0,30px,0);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.9,.24,1)}
  .js .st.d1{transition-delay:.14s}
  .js .st.d2{transition-delay:.28s}
  .js .stage.s1 .st.g1,.js .stage.s2 .st.g2,.js .stage.s3 .st.g3{opacity:1;transform:none}
  /* hero load cascade */
  .js .h-em{opacity:0;transform:translate3d(0,18px,0);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.9,.24,1)}
  .js .h-em.stamp{transform:scale(1.3) rotate(5deg);transition:opacity .5s ease,transform .6s cubic-bezier(.2,1.4,.36,1)}
  .js .h-em.hang{transform:translate3d(0,-60px,0);transition:opacity .7s ease,transform 1.05s cubic-bezier(.18,1.22,.34,1)}
  .js.loaded .h-em{opacity:1;transform:none}
  .js .h-em.t1{transition-delay:.05s}
  .js .h-em.t2{transition-delay:.2s}
  .js .h-em.t3{transition-delay:.36s}
  .js .h-em.t4{transition-delay:.5s}
  .js .h-em.t5{transition-delay:.64s}
  .js .h-em.t6{transition-delay:.85s}
  /* hero release while the stage holds */
  .js .hero-core{transform:translate3d(0,calc(var(--p,0)*-44px),0);opacity:calc(1 - var(--p,0)*.6)}
  /* medallion: rings and pentagram draw in, elements pop, ring breathes with scroll */
  .js .dr{stroke-dashoffset:100;transition:stroke-dashoffset 1.4s ease}
  .js .dr2{transition-delay:.18s}
  .js .dr3{transition-delay:.36s}
  .js .dr4{transition-delay:.54s}
  .js .stage.s2 .dr{stroke-dashoffset:0}
  .js .ctr{opacity:0;transition:opacity .9s ease .6s}
  .js .stage.s2 .ctr{opacity:1}
  .js .el-node{opacity:0;transform:scale(.35);transition:opacity .5s ease,transform .7s cubic-bezier(.2,1.35,.4,1)}
  .js .e2{transition-delay:.09s}
  .js .e3{transition-delay:.18s}
  .js .e4{transition-delay:.27s}
  .js .e5{transition-delay:.36s}
  .js .stage.s3 .el-node{opacity:1;transform:none}
}
.dr,.bk path{stroke-dasharray:100}
/* sticky staging: desktop + motion only; otherwise chapters flow normally */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .js .stage-hero{height:116vh}
  .js .stage-med{height:118vh}
  .js .stage-mem{height:172vh}
  .js .stage .stage-pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(2.5rem,5vh,4.5rem)}
  .js .stage-hero .stage-pin{display:flex;align-items:center;justify-content:center}
  .js .med-rot{transform:rotate(calc(var(--p,0)*22deg))}
}
@media (min-width:900px) and (max-height:820px) and (prefers-reduced-motion:no-preference){
  .js .stage-med .medallion{width:min(100%,340px)}
  .js .stage .sec-head{margin-bottom:1.8rem}
}

/* ==========================================================================
   PART 2 · PLATFORM LAYER
   Legacy component classes reskinned in the 3E language. Every class/id the
   JavaScript touches keeps its name (site.js, page scripts, Bob's editor).
   ========================================================================== */

/* ---- legacy token aliases (old pages + inline styles keep working) ---- */
:root{
  --sumi:var(--lac-deep);
  --paper:var(--silk);
  --paper-aged:var(--silk-lo);
  --cinnabar:var(--seal);
  --jade:#6d8a72;
  --jade-hi:#7a9c80;
  --steel-hi:#4f82a2;
  --water:#22303a;
  --ochre:#b8863b;
  --ink-soft:rgba(51,32,21,.78);
  --ink-faint:rgba(51,32,21,.5);
  --paper-soft:rgba(245,236,217,.9);
  --paper-faint:rgba(245,236,217,.62);
  --hairline:var(--brass-faint);
  --hairline-strong:var(--brass-soft);
  --font-display:"Cormorant Garamond","Noto Serif SC",serif;
  --font-brush:"Ma Shan Zheng","Noto Serif SC",serif;
  --font-body:var(--sans);
  --radius:5px;
  --radius-lg:10px;
  --shadow-lift:0 18px 44px rgba(12,5,3,.5);
  --max-width:1180px;
}

/* ---- the world on every page (atmosphere + public watermark) ---- */
body{position:relative}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 22% 0%, rgba(158,43,37,.18), transparent 60%),
    radial-gradient(110% 80% at 82% 100%, rgba(20,19,17,.9), transparent 62%),
    linear-gradient(175deg,#201e1c 0%,#1a1917 48%,#141311 100%);
}
body.page-scene::after{
  content:"无形道";
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:-1;
  writing-mode:vertical-rl;
  white-space:nowrap;
  font-family:var(--cjk);
  font-weight:900;
  font-size:clamp(9rem,26vh,20rem);
  line-height:1;
  letter-spacing:.06em;
  color:rgba(245,236,217,.03);
  pointer-events:none;
  user-select:none;
}

/* ---- base typography over the old defaults ---- */
main p{margin:0 0 1.1em}
main h1,main h2,main h3,main h4{margin:0 0 .5em}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:.02em;color:var(--silk);text-wrap:balance}
h1{font-size:clamp(2.4rem,5.5vw,4rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.7rem)}
h3{font-size:clamp(1.3rem,2.3vw,1.6rem)}
h4{font-size:1.1rem}
.lead{font-family:var(--quote);font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.6;color:var(--cream-soft)}
.small{font-size:.85rem}
.muted{color:var(--paper-faint)}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font:600 .7rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--brass);margin:0 0 1.1em}
.eyebrow::before{content:"";width:2.2em;height:1px;background:var(--brass-soft)}
.eyebrow--plain::before{display:none}
.hanzi{font-family:var(--cjk);font-weight:600;color:var(--brass)}
.hanzi-vertical{writing-mode:vertical-rl;white-space:nowrap;font-family:var(--cjk);font-weight:900;line-height:1;color:var(--lac-hi);user-select:none;pointer-events:none;display:inline-block}
.hero-hanzi{font-size:clamp(4.2rem,15vw,10rem);color:var(--lac-hi);margin-inline:auto}
.brush-underline{position:relative;display:inline-block;padding-bottom:.24em}
.brush-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,var(--brass),rgba(191,160,106,.15))}
.hairline-rule{border:0;height:1px;background:var(--brass-faint);margin:clamp(1.8rem,4vw,2.6rem) 0}
.brush-divider{height:1px;margin:clamp(2.2rem,5vw,3.6rem) auto;width:min(320px,60%);background:linear-gradient(90deg,transparent,var(--brass-soft) 30%,var(--brass-soft) 70%,transparent);position:relative}
.brush-divider::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;transform:translate(-50%,-50%) rotate(45deg);background:var(--brass)}

/* ---- layout: sections are TRANSPARENT (the one-world rule) ---- */
.container{width:min(var(--max-width),92vw);margin-inline:auto}
.container--narrow{width:min(780px,92vw)}
.section{padding:clamp(2.6rem,5.5vw,4.4rem) 0;position:relative;background:none}
.section--tight{padding:clamp(2.2rem,4.5vw,3.6rem) 0}
.section--ink,.section--aged{background:none;-webkit-mask-image:none;mask-image:none;color:inherit}
.section--ink h1,.section--ink h2,.section--ink h3{color:var(--silk)}
.section--ink .lead{color:var(--cream-soft)}
.section--ink .muted{color:var(--paper-faint)}
.art::before,.art::after{content:none!important}
.bg-clouds-faint{background:none}
.grid{display:grid;gap:clamp(1.1rem,2.4vw,1.8rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){.grid--4,.grid--5{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--2,.grid--3,.grid--4,.grid--5{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---- public header/nav on legacy selectors (3E chrome) ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(32,13,8,.85);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--brass-faint)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--silk);flex:none}
.brand__name{font-family:var(--font-display);font-size:1.2rem;font-weight:700;letter-spacing:.09em;line-height:1.05;color:var(--silk);white-space:nowrap}
.brand__sub{display:block;font:500 .58rem/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--brass);margin-top:.3em;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:clamp(.6rem,1.1vw,.95rem)}
.site-nav a{font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--cream-soft);padding:.5em .1em;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.site-nav a:hover{color:var(--silk);border-bottom-color:var(--brass-soft)}
.site-nav a.is-active{color:var(--silk);border-bottom-color:var(--brass)}
.site-nav a[href*="login"]{position:relative;border:1px solid var(--brass-soft);padding:.7em 1em;color:var(--brass);margin-left:1.2rem;text-align:center}
/* a quiet divider sets Member Login apart as the account area on the far right */
.site-nav a[href*="login"]::before{content:"";position:absolute;left:-1.15rem;top:50%;transform:translateY(-50%);width:1px;height:1.7em;background:var(--brass-soft);opacity:.55}
.site-nav a[href*="login"]:hover{border-color:var(--brass);color:var(--silk);background:rgba(191,160,106,.1)}
.nav-toggle{display:none;background:none;border:1px solid var(--brass-soft);border-radius:var(--radius);padding:.5em .8em;font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;color:var(--silk)}
@media (max-width:1220px){
  .nav-toggle{display:inline-flex}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(32,13,8,.97);border-bottom:1px solid var(--brass-soft);padding:.6rem 4vw 1.2rem}
  .site-nav.is-open{display:flex}
  .site-nav a{padding:.95em 0;border-bottom:1px solid var(--brass-faint)}
  .site-nav a[href*="login"]{margin:1rem 0 0;text-align:center}
  .site-nav a[href*="login"]::before{display:none}
}
@keyframes nav-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.site-nav.is-open,.portal-nav.is-open{animation:nav-drop .22s ease}

/* ---- seal (the chop) ---- */
.seal{display:inline-grid;place-items:center;width:52px;height:52px;background:var(--seal);color:var(--silk-hi);font-family:var(--font-brush);font-size:1.02rem;line-height:1.05;text-align:center;border-radius:3px;box-shadow:inset 0 0 0 2px rgba(245,236,217,.5),inset 0 0 16px rgba(30,8,4,.55);transform:rotate(-2deg);user-select:none;flex:none}
.seal--lg{width:84px;height:84px;font-size:1.7rem;border-radius:5px}
.seal--sm{width:34px;height:34px;font-size:.72rem}

/* ---- legacy buttons mapped to the 3E button language ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1.02em 2em .92em;font:600 .76rem/1 var(--sans);letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;text-decoration:none;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,box-shadow .25s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--primary{background:var(--silk);color:var(--lac);border-color:var(--silk)}
.btn--primary:hover{background:var(--silk-hi);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.btn--outline{background:transparent;color:var(--silk);border-color:var(--brass-soft)}
.btn--outline:hover{border-color:var(--brass);background:rgba(191,160,106,.1)}
.btn--ghost{background:none;color:var(--brass);border-color:transparent;padding-inline:.9em;position:relative}
.btn--ghost:hover{color:var(--silk)}
.btn--sm{padding:.6em 1.2em .55em;font-size:.68rem}
.btn--block{width:100%}
/* on silk surfaces the roles flip: primary = lacquer, text = body ink */
:is(.card,.auth-card,.quote-card,.form-success) .btn--primary{background:var(--lac);color:var(--silk);border-color:var(--lac)}
:is(.card,.auth-card,.quote-card,.form-success) .btn--primary:hover{background:var(--lac-mid)}
:is(.card,.auth-card,.quote-card) .btn--outline{color:var(--lac);border-color:rgba(58,21,16,.4)}
:is(.card,.auth-card,.quote-card) .btn--outline:hover{border-color:var(--lac);background:rgba(58,21,16,.06)}
:is(.card,.auth-card,.quote-card) .btn--ghost{color:var(--seal)}
:is(.card,.auth-card,.quote-card) .btn--ghost:hover{color:var(--lac)}

/* ---- silk panels (all card-like components) ---- */
.card,.auth-card,.stat,.quote-card,.form-success{
  position:relative;
  background:linear-gradient(168deg,var(--silk-hi) 0%,var(--silk) 55%,var(--silk-lo) 100%);
  color:var(--body-ink);
  border:1px solid var(--brass-soft);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 0 rgba(245,236,217,.08),0 22px 44px rgba(12,5,3,.42);
}
.card{padding:clamp(1.4rem,2.5vw,2rem);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card::before{content:"";position:absolute;inset:7px;border:1px solid var(--brass-faint);border-radius:3px;pointer-events:none}
.card:not(.card--static):hover{transform:translateY(-3px);box-shadow:0 2px 0 rgba(245,236,217,.08),0 30px 60px rgba(12,5,3,.55);border-color:var(--brass)}
.card--static:hover{transform:none}
:is(.card,.auth-card,.stat,.quote-card,.notice,.form-success) :is(h1,h2,h3,h4){color:var(--lac)}
:is(.card,.auth-card,.stat,.quote-card,.notice,.form-success) .muted{color:var(--ink-faint)}
:is(.card,.auth-card,.stat,.quote-card,.notice,.form-success) .lead{color:var(--ink-soft)}
:is(.card,.auth-card,.stat,.quote-card,.notice) .eyebrow{color:var(--seal)}
:is(.card,.auth-card,.stat,.quote-card,.notice) .eyebrow::before{background:rgba(58,21,16,.3)}
.card--ink{background:linear-gradient(160deg,var(--lac) 0%,var(--lac-deep) 100%);color:var(--cream);border-color:var(--brass-soft)}
.card--ink :is(h1,h2,h3,h4){color:var(--silk)}
.card--ink .muted{color:var(--paper-faint)}
.card__hanzi{position:absolute;top:.9rem;right:1.1rem;font-family:var(--cjk);font-weight:600;font-size:1.9rem;line-height:1;color:rgba(124,39,24,.3);user-select:none;transition:color .25s ease}
.card:not(.card--static):hover .card__hanzi{color:rgba(124,39,24,.55)}

/* ---- quote cards (testimonials) ---- */
.quote-card{padding:2.5rem clamp(1.4rem,2.5vw,2rem) 1.6rem}
.quote-card::after{content:"\201C";position:absolute;top:.3rem;right:1.1rem;font-family:var(--quote);font-size:4.2rem;line-height:1;color:rgba(124,39,24,.22);pointer-events:none}
.quote-card blockquote{margin:0 0 1.2rem;font-family:var(--quote);font-size:1.14rem;line-height:1.55;color:var(--ink-soft)}
.quote-card figcaption{display:flex;align-items:center;gap:.7em;font:600 .8rem/1 var(--sans);letter-spacing:.1em;color:var(--body-ink)}
.quote-card figcaption::before{content:"";width:2em;height:1px;background:rgba(58,21,16,.35)}
.quote-card figcaption span{font-weight:400;color:var(--ink-faint);letter-spacing:.05em}

/* ---- ink-wash placeholders on the dark world ---- */
.wash{position:relative;border-radius:var(--radius);overflow:hidden;min-height:260px;display:grid;place-items:center;color:rgba(245,236,217,.5);border:1px solid var(--brass-soft);background:linear-gradient(150deg,#4d1a12 0%,#2c110b 55%,#1e0e08 100%)}
.wash::before{content:"";position:absolute;inset:8px;border:1px solid var(--brass-faint);pointer-events:none}
.wash--jade{background:linear-gradient(150deg,#3a4a3f 0%,#22301f 55%,#1a1208 100%)}
.wash--water{background:linear-gradient(150deg,#2b3d4a 0%,#1b2730 55%,#170d08 100%)}
.wash--ochre{background:linear-gradient(150deg,#7a5a2a 0%,#4a3618 55%,#241207 100%)}
.wash--ink{background:linear-gradient(150deg,#4d1a12 0%,#2c110b 55%,#1e0e08 100%)}
.wash--cinnabar{background:linear-gradient(150deg,#7c2718 0%,#4d1a12 55%,#241009 100%)}
.wash__hanzi{font-family:var(--cjk);font-weight:900;font-size:clamp(3.4rem,8vw,6rem);color:rgba(245,236,217,.13);user-select:none}
.wash__label{position:absolute;bottom:.9rem;left:1.1rem;font:600 .64rem/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(245,236,217,.55)}

/* ---- timetable: the carved notice board ---- */
.timetable{width:100%;border-collapse:collapse;font-size:.92rem;background:linear-gradient(168deg,var(--silk-hi),var(--silk-lo));color:var(--body-ink);border:1px solid var(--brass-soft);box-shadow:0 22px 44px rgba(12,5,3,.42)}
.timetable th,.timetable td{border:1px solid rgba(191,160,106,.35);padding:.85em .95em;text-align:left;vertical-align:top}
.timetable th{font:600 .66rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;background:var(--lac);color:var(--cream);border-color:rgba(191,160,106,.4)}
.timetable tbody th{background:rgba(58,21,16,.06);color:var(--ink-soft)}
.timetable .slot{display:block}
.timetable .slot__name{font-weight:600}
.timetable .slot__time{display:block;font-size:.8rem;color:var(--ink-faint)}
.timetable .slot + .slot{margin-top:.7em;padding-top:.7em;border-top:1px dashed rgba(191,160,106,.5)}
.timetable td:empty::after{content:"\2014";color:var(--ink-faint);opacity:.4}
.timetable-note{display:flex;align-items:center;gap:.6em;margin-top:1rem;font-size:.82rem;color:var(--paper-faint)}
.timetable-note::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--brass);flex:none}
.table-scroll{overflow-x:auto}

/* ---- forms ---- */
.field{margin-bottom:1.2rem}
.field label{display:block;font:600 .66rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:inherit;opacity:.75;margin-bottom:.5em}
.field input,.field select,.field textarea{width:100%;padding:.8em .95em;font:inherit;font-size:.95rem;color:var(--body-ink);background:rgba(255,253,247,.85);border:1px solid var(--brass-soft);border-radius:var(--radius)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid rgba(124,39,24,.45);outline-offset:1px;border-color:var(--seal)}
.field--inline{display:flex;align-items:center;gap:.6em}
.field--inline label{margin:0;letter-spacing:.04em;text-transform:none;font:inherit;opacity:1}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}
.form-status{margin:.8rem 0 0;color:#41573f}
.form-status.is-error{color:var(--seal)}
.form-success{text-align:center;padding:1.6rem 1rem}
.form-success .seal{margin-bottom:1rem}

/* ---- auth ---- */
.auth-wrap{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) 0}
.auth-card{width:min(440px,92vw);padding:clamp(2.2rem,5vw,2.8rem) clamp(1.6rem,4vw,2.4rem);text-align:center}
.auth-card::before{content:"";position:absolute;inset:8px;border:1px solid var(--brass-faint);border-radius:1px;pointer-events:none}
.auth-card > *,.auth-card form{position:relative}
.auth-card .seal{margin-bottom:1.3rem}
.auth-card form{text-align:left;margin-top:1.4rem}
.auth-label{font:600 .64rem/1.4 var(--sans);letter-spacing:.36em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .5rem}
.auth-links{display:flex;justify-content:space-between;gap:1rem;margin-top:1.2rem;font-size:.82rem}
.auth-links a{color:var(--ink-soft)}
.auth-pane{display:none}
.auth-pane.is-active{display:block}

/* ---- member portal chrome ---- */
.portal-header{position:sticky;top:0;z-index:100;background:rgba(32,13,8,.9);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);color:var(--silk);border-bottom:1px solid var(--brass-soft)}
.portal-header .brand__sub{color:var(--brass)}
.portal-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.7rem 0}
.portal-nav{display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.6rem)}
.portal-nav a{font:500 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--cream-soft);padding:.4em 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.portal-nav a:hover{color:var(--silk)}
.portal-nav a.is-active{color:var(--silk);border-bottom-color:var(--brass)}
.avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--seal);color:var(--silk);font:600 .78rem/1 var(--sans);letter-spacing:.05em;flex:none;box-shadow:inset 0 0 0 1px rgba(245,236,217,.4)}
@media (max-width:1220px){
  .portal-header .nav-toggle{display:inline-flex}
  .portal-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(32,13,8,.97);border-bottom:1px solid var(--brass-soft);padding:.6rem 4vw 1.2rem}
  .portal-nav.is-open{display:flex}
  .portal-nav a{padding:.95em 0;border-bottom:1px solid var(--brass-faint)}
}
.page-head{padding:clamp(2.2rem,5vw,3.2rem) 0 1.2rem;border-bottom:1px solid var(--brass-faint)}
.page-head h1{font-size:clamp(1.9rem,3.8vw,2.6rem);margin-bottom:.3em}

/* ---- notices / stats / badges ---- */
.notice{display:flex;gap:1rem;padding:1.1rem 1.2rem;background:linear-gradient(168deg,var(--silk-hi),var(--silk-lo));color:var(--body-ink);border:1px solid var(--brass-soft);border-left:3px solid var(--seal);border-radius:var(--radius);margin-bottom:.8rem;box-shadow:0 14px 30px rgba(12,5,3,.35)}
.notice__date{flex:none;font-family:var(--font-display);font-size:.95rem;color:var(--ink-faint);width:4.2em}
.notice h4{margin-bottom:.2em}
.notice p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.stat{padding:1.3rem 1.5rem}
.stat__label{font:600 .62rem/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5em}
.stat__value{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:600;line-height:1;color:var(--lac)}
.stat__delta{font-size:.78rem;margin-top:.4em}
.stat__delta.up{color:#41573f}
.stat__delta.down{color:var(--seal)}
.badge{display:inline-flex;align-items:center;gap:.4em;font:600 .66rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:.24em .7em;border-radius:2px}
.badge--active{background:rgba(109,138,114,.22);color:#3c5138}
.badge--lapsed{background:rgba(51,32,21,.1);color:var(--ink-faint)}
.badge--failed{background:rgba(124,39,24,.16);color:var(--seal)}
.badge--pending{background:rgba(184,134,59,.2);color:#7a5a1e}
.tier-badge{display:inline-flex;align-items:center;gap:.45em;font:600 .62rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:.28em .7em;border-radius:2px}
.tier-badge--open{background:rgba(109,138,114,.22);color:#3c5138}
.tier-badge--restricted{background:rgba(124,39,24,.16);color:var(--seal)}
.tier-badge--granted{background:rgba(184,134,59,.2);color:#7a5a1e}

/* ---- video library ---- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.4rem}
.video-card{position:relative;background:linear-gradient(168deg,var(--silk-hi),var(--silk-lo));color:var(--body-ink);border:1px solid var(--brass-soft);border-radius:var(--radius);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 14px 30px rgba(12,5,3,.35)}
.video-card:hover{transform:translateY(-3px);border-color:var(--brass);box-shadow:0 24px 48px rgba(12,5,3,.5)}
.video-card__thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.video-card__thumb .wash__hanzi{font-size:2.6rem}
.video-card__duration{position:absolute;bottom:.6rem;right:.6rem;font:600 .68rem/1 var(--sans);letter-spacing:.08em;color:var(--silk);background:rgba(20,8,4,.75);padding:.25em .55em;border-radius:2px}
.video-card__body{padding:.9rem 1rem 1rem}
.video-card__title{font-weight:600;font-size:.96rem;line-height:1.35;margin:0 0 .25em;color:var(--lac)}
.video-card__meta{font-size:.76rem;color:var(--ink-faint);letter-spacing:.04em}
.video-card__play{position:absolute;inset:0;display:grid;place-items:center}
.video-card__play span{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:rgba(245,236,217,.14);border:1px solid rgba(245,236,217,.5);color:var(--silk);backdrop-filter:blur(2px);transition:background .18s,transform .18s}
.video-card:hover .video-card__play span{background:rgba(124,39,24,.9);transform:scale(1.06)}
.video-card--locked .video-card__thumb::after{content:"";position:absolute;inset:0;background:rgba(20,8,4,.55)}
.seal-lock{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;color:rgba(245,236,217,.85)}
.seal-lock .seal{transform:rotate(-6deg)}
.seal-lock__text{display:block;margin-top:.7rem;font:600 .62rem/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.video-card--locked:hover{transform:none}
.video-card--locked{cursor:default}
.course-row{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.course-row__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;padding-bottom:.6rem;border-bottom:1px solid var(--brass-faint)}
.course-row__head h3{margin:0;color:var(--silk)}
.course-row__head .hanzi{font-size:1.2em;margin-right:.35em}

/* ---- player / lists / grading ---- */
.player-frame{position:relative;aspect-ratio:16/9;background:var(--ink);border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;color:var(--paper-faint);border:1px solid var(--brass-soft)}
.lesson-list{list-style:none;margin:0;padding:0}
.lesson-list li{display:flex;align-items:center;gap:.9rem;padding:.8rem .9rem;border:1px solid var(--brass-soft);border-radius:var(--radius);margin-bottom:.55rem;background:linear-gradient(168deg,var(--silk-hi),var(--silk-lo));color:var(--body-ink);font-size:.92rem}
.lesson-list li.is-current{border-color:var(--seal);box-shadow:inset 3px 0 0 var(--seal)}
.lesson-list .num{font-family:var(--font-display);font-size:1.05rem;color:var(--ink-faint);width:1.6em;text-align:center;flex:none}
.lesson-list .done{color:#41573f;margin-left:auto;flex:none}
.lesson-list .lock{color:var(--seal);margin-left:auto;flex:none;font-size:.75rem;letter-spacing:.1em}
.sash-track{display:flex;align-items:center;gap:0;margin:1.6rem 0}
.sash-step{flex:1;text-align:center;position:relative}
.sash-step::before{content:"";display:block;height:10px;background:var(--step,var(--silk-lo));border:1px solid rgba(191,160,106,.45)}
.sash-step:first-child::before{border-radius:3px 0 0 3px}
.sash-step:last-child::before{border-radius:0 3px 3px 0}
.sash-step__label{display:block;margin-top:.55em;font:600 .62rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.sash-step.is-current .sash-step__label{color:var(--body-ink)}
.sash-step.is-current::after{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);width:9px;height:9px;background:var(--seal)}
.req-list{list-style:none;margin:0;padding:0}
.req-list li{display:flex;align-items:flex-start;gap:.8rem;padding:.75rem 0;border-bottom:1px dashed rgba(191,160,106,.45);font-size:.95rem}
.req-list .tick{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;border:1px solid var(--brass-soft);color:var(--ink-faint);margin-top:.1em}
.req-list li.is-done .tick{background:#5a7259;border-color:#5a7259;color:var(--silk)}

/* ---- admin shell ---- */
.admin-layout{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 60px)}
.admin-sidebar{background:rgba(24,9,5,.72);color:var(--cream-soft);padding:1.6rem 0 2rem;border-right:1px solid var(--brass-faint)}
.admin-sidebar h4{font:600 .58rem/1.5 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--brass);opacity:.8;padding:0 1.4rem;margin:1.6rem 0 .5rem}
.admin-sidebar a{display:block;padding:.55em 1.4rem;font-size:.86rem;text-decoration:none;color:var(--cream-soft);border-left:2px solid transparent;transition:color .15s,background .15s}
.admin-sidebar a:hover{color:var(--silk);background:rgba(245,236,217,.04)}
.admin-sidebar a.is-active{color:var(--silk);border-left-color:var(--seal);background:rgba(124,39,24,.18)}
.admin-main{padding:clamp(1.6rem,3vw,2.6rem) clamp(1.2rem,3vw,2.8rem) 4rem;min-width:0}
.admin-main h1{color:var(--silk)}
@media (max-width:880px){
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{display:flex;flex-wrap:wrap;gap:.2rem;padding:.8rem;border-right:0;border-bottom:1px solid var(--brass-soft)}
  .admin-sidebar h4{display:none}
  .admin-sidebar a{border-left:0;border-radius:2px;padding:.45em .9em}
  .admin-sidebar a.is-active{background:rgba(124,39,24,.35)}
}
.src{display:inline-flex;align-items:center;font:600 .56rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:.2em .55em;border-radius:2px;vertical-align:middle;margin-left:.6em}
.src--ours{background:rgba(109,138,114,.22);color:#9db89a}
.src--ghl{background:rgba(34,48,58,.5);color:#9db4c4}
.src--cdn{background:rgba(184,134,59,.24);color:#d8b878}
:is(.card,.auth-card) .src--ours{color:#3c5138}
:is(.card,.auth-card) .src--ghl{color:#22303a}
:is(.card,.auth-card) .src--cdn{color:#7a5a1e}

/* ---- data tables ---- */
.data-table{width:100%;border-collapse:collapse;font-size:.9rem;background:transparent;color:inherit;border:0}
.data-table th,.data-table td{padding:.7em .9em;text-align:left;border-bottom:1px solid rgba(191,160,106,.3)}
.data-table th{font:600 .62rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:inherit;opacity:.6;background:none}
.data-table tr:hover td{background:rgba(191,160,106,.07)}
:is(.card) .data-table th{color:var(--ink-faint);opacity:1}

/* ---- toggle ---- */
.toggle{position:relative;display:inline-block;width:42px;height:23px;flex:none}
.toggle input{opacity:0;width:0;height:0}
.toggle__track{position:absolute;inset:0;background:rgba(51,32,21,.25);border-radius:20px;transition:background .18s;cursor:pointer}
.toggle__track::before{content:"";position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--silk);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.toggle input:checked + .toggle__track{background:var(--seal)}
.toggle input:checked + .toggle__track::before{transform:translateX(18px)}
.toggle input:focus-visible + .toggle__track{outline:2px solid rgba(124,39,24,.5)}

/* ---- proof band / crumbs / socials / map ---- */
.proof-band{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,5vw,4rem);text-align:center}
.proof-band__item strong{display:block;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:600;line-height:1.1;color:var(--silk)}
.proof-band__item span{font:600 .66rem/1.8 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
@media (max-width:560px){.proof-band{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1rem}}
.crumbs{font-size:.78rem;letter-spacing:.06em;color:var(--paper-faint);margin-bottom:1rem}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--brass)}
.social-row{display:flex;gap:.7rem;margin-top:.9rem;flex-wrap:wrap}
.social-row a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:none;color:#fff;box-shadow:0 2px 8px rgba(12,5,3,.35);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.social-row a:hover{transform:translateY(-3px);box-shadow:0 9px 20px rgba(12,5,3,.45);filter:brightness(1.08)}
.social-row svg{width:18px;height:18px;fill:currentColor;display:block}
.social-row a[aria-label="Facebook"]{background:#1877F2}
.social-row a[aria-label="Instagram"]{background:radial-gradient(circle at 30% 108%,#fdf497 0%,#fd5949 45%,#d6249f 62%,#4f5bd5 92%)}
.social-row a[aria-label="YouTube"]{background:#FF0000}
.map-frame{border:1px solid var(--brass-soft);border-radius:var(--radius);overflow:hidden;background:var(--lac-deep)}
.map-frame iframe{display:block;width:100%;height:340px;border:0;filter:sepia(.28) saturate(.75) contrast(.96)}

/* ---- legacy public footer on the world (no band, long dissolve) ---- */
.site-footer{position:relative;color:var(--cream-soft);padding:clamp(5rem,10vw,8rem) 0 2rem;font-size:.92rem;background:linear-gradient(180deg,transparent 0%,rgba(18,7,4,.65) 30%,rgba(14,5,3,.92) 100%);-webkit-mask-image:none;mask-image:none}
.site-footer a{color:var(--cream-soft);text-decoration:none}
.site-footer a:hover{color:var(--silk);text-decoration:underline}
.site-footer h4{color:var(--brass);font:600 .66rem/1.5 var(--sans);letter-spacing:.3em;text-transform:uppercase;margin-bottom:1em}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:860px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55em}
.site-footer__bottom{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--brass-faint);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.78rem;color:var(--paper-faint)}

/* ---- element ring (legacy inline SVG support) ---- */
.element-ring{width:min(380px,80vw);margin-inline:auto;display:block}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.ring-track{transform-box:fill-box;transform-origin:center;animation:spin-slow 80s linear infinite}
.ring-node{transform-box:fill-box;transform-origin:center}

/* ---- scroll reveal (site.js) ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.8,.32,1);will-change:opacity,transform}
.reveal.reveal--in{opacity:1;transform:none}

/* ---- edit mode (Bob) ---- */
.editable-region{outline:1.5px dashed rgba(191,160,106,.55);outline-offset:4px;cursor:text;transition:outline-color .15s,background-color .15s}
.editable-region:hover{outline-color:var(--brass)}
.editable-region:focus{outline:2px solid var(--brass);outline-offset:4px;background:rgba(191,160,106,.08)}
html.edit-open .editable-image{outline:2px dashed rgba(191,160,106,.55);outline-offset:3px;cursor:pointer}
html.edit-open .editable-image:hover{outline-color:var(--brass)}
.uploaded-figure{margin:1.5rem 0}
.uploaded-figure img{max-width:100%;height:auto;display:block;border-radius:3px;border:1px solid var(--brass-soft)}
html.edit-open body{margin-right:360px}
.edit-panel{position:fixed;top:0;right:0;bottom:0;z-index:999;width:360px;display:flex;flex-direction:column;background:#1c0b06;color:var(--silk);border-left:1px solid var(--brass);box-shadow:-14px 0 40px rgba(10,4,2,.6);font-size:.85rem;line-height:1.45}
.edit-panel .seal{flex:none}
.edit-panel .btn--outline,.edit-panel .btn--ghost{color:var(--silk)}
.edit-panel__head{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-bottom:1px solid var(--brass-soft)}
.edit-panel__head strong{display:block;font-family:var(--font-display);font-size:1.1rem;line-height:1.2}
.edit-panel__head span{font-size:.75rem;color:var(--paper-faint);letter-spacing:.05em}
.edit-panel__log{flex:1;overflow-y:auto;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.edit-msg{max-width:95%;padding:.55rem .8rem;border-radius:4px;white-space:pre-wrap;word-wrap:break-word}
.edit-msg--bob{align-self:flex-start;background:rgba(245,236,217,.07);border:1px solid var(--brass-faint)}
.edit-msg--you{align-self:flex-end;background:rgba(124,39,24,.4)}
.edit-panel__ask{display:flex;flex-direction:column;gap:.5rem;padding:.8rem 1rem;border-top:1px solid var(--brass-faint)}
.edit-panel__ask textarea{width:100%;resize:vertical;min-height:64px;padding:.5em .7em;font:inherit;font-size:.85rem;border-radius:3px;border:1px solid var(--brass-soft);background:rgba(245,236,217,.08);color:var(--silk)}
.edit-panel__actions{display:flex;gap:.6rem;padding:.8rem 1rem 1rem;border-top:1px solid var(--brass-faint)}
.edit-panel__actions .btn{flex:1}
@media (max-width:860px){
  html.edit-open body{margin-right:0;padding-bottom:50vh}
  .edit-panel{top:auto;left:0;width:100%;height:46vh;border-left:0;border-top:1px solid var(--brass)}
}

/* ---- chat widget (Bob, public + member) ---- */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:90;width:54px;height:54px;border:0;border-radius:6px;background:var(--seal);color:var(--silk-hi);font-family:var(--font-brush);font-size:1.5rem;cursor:pointer;transform:rotate(-2deg);box-shadow:inset 0 0 0 2px rgba(245,236,217,.5),0 8px 24px rgba(10,4,2,.5);transition:transform .15s}
.chat-fab:hover{transform:rotate(-2deg) scale(1.06)}
.chat-panel{position:fixed;right:18px;bottom:84px;z-index:95;width:min(370px,calc(100vw - 28px));height:min(480px,70vh);display:none;flex-direction:column;background:var(--silk);color:var(--body-ink);border:1px solid var(--brass);border-radius:4px;box-shadow:0 18px 50px rgba(10,4,2,.55);overflow:hidden}
.chat-panel.is-open{display:flex}
.chat-panel__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.75rem 1rem;background:var(--lac);color:var(--silk);border-bottom:1px solid var(--brass-soft)}
.chat-panel__head strong{font-family:var(--font-display);font-size:1.05rem}
.chat-panel__head button{background:none;border:0;color:var(--silk);font-size:1.1rem;cursor:pointer;line-height:1}
.chat-log{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;line-height:1.5}
.chat-msg{max-width:85%;padding:.55rem .8rem;border-radius:4px;white-space:pre-wrap;word-wrap:break-word}
.chat-msg--bot{align-self:flex-start;background:var(--silk-lo);border:1px solid rgba(191,160,106,.4)}
.chat-msg--user{align-self:flex-end;background:rgba(124,39,24,.1);border:1px solid rgba(124,39,24,.25)}
.chat-msg a{color:var(--seal)}
.chat-input{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid rgba(191,160,106,.4);background:var(--silk)}
.chat-input input{flex:1;padding:.55em .8em;font:inherit;font-size:.9rem;border:1px solid var(--brass-soft);border-radius:3px;background:rgba(255,253,247,.85);color:var(--body-ink)}
.chat-input button{flex:none}
.chat-note{padding:0 .9rem .6rem;font-size:.68rem;color:var(--ink-faint);text-align:center;background:var(--silk)}

/* ---- lib filter pills (member library) ---- */
.lib-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0}
.lib-filters a{font:600 .66rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--cream-soft);padding:.5em 1.1em;border:1px solid var(--brass-faint);border-radius:20px;transition:color .2s,border-color .2s,background .2s}
.lib-filters a.is-active{background:var(--silk);color:var(--lac);border-color:var(--silk)}
.lib-filters a:hover:not(.is-active){border-color:var(--brass);background:rgba(191,160,106,.1)}

/* ---- utilities / a11y ---- */
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.text-center{text-align:center}
.flex{display:flex;align-items:center;gap:1rem}
.flex--between{justify-content:space-between}
.flex--wrap{flex-wrap:wrap}
.skip-link{position:fixed;top:10px;left:-9999px;z-index:1000;padding:.7em 1.2em;background:var(--silk);color:var(--lac);font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--brass);border-radius:var(--radius)}
.skip-link:focus{left:10px}

/* buttons on ANY silk surface flip to lacquer (tables, lists, notices too) */
:is(.timetable,.lesson-list li,.notice,.card .table-scroll) .btn--outline{color:var(--lac);border-color:rgba(58,21,16,.4)}
:is(.timetable,.lesson-list li,.notice,.card .table-scroll) .btn--outline:hover{border-color:var(--lac);background:rgba(58,21,16,.06)}
:is(.timetable,.lesson-list li,.notice,.card .table-scroll) .btn--ghost{color:var(--seal)}
:is(.timetable,.lesson-list li,.notice,.card .table-scroll) .btn--ghost:hover{color:var(--lac)}

/* nav unread badge (Messages) */
.nav-badge{display:none;min-width:17px;height:17px;padding:0 4px;margin-left:.35em;border-radius:9px;background:var(--seal);color:var(--silk-hi);font:600 .62rem/17px var(--sans);text-align:center;vertical-align:middle}
.nav-badge.on{display:inline-block}

/* ==========================================================================
   BRAND LAYER (2026-07-08): official identity per the Brand Identity Master
   Prompt. Ink black + seal red lead; stone hairlines (no gold); steel blue
   is the interactive signal colour; the real logo replaces the square chop.
   ========================================================================== */
.kicker .kt,.eyebrow{color:var(--seal-hi)}
:is(.card,.auth-card,.stat,.quote-card,.notice) .eyebrow{color:var(--seal)}
.btn-silk,.btn--primary{background:var(--seal);color:#F4EFE2;border-color:var(--seal)}
.btn-silk:hover,.btn--primary:hover{background:var(--seal-hi);box-shadow:0 6px 24px rgba(158,43,37,.35)}
:is(.card,.auth-card,.quote-card,.form-success) .btn--primary{background:var(--seal);color:#F4EFE2;border-color:var(--seal)}
:is(.card,.auth-card,.quote-card,.form-success) .btn--primary:hover{background:var(--seal-hi)}
.site-nav a:hover{border-bottom-color:var(--steel)}
.site-nav a.is-active{border-bottom-color:var(--steel)}
.portal-nav a.is-active{border-bottom-color:var(--steel)}
main a:not(.btn):not(.card):not(.video-card){color:var(--steel)}
:is(.card,.auth-card,.quote-card,.notice) a:not(.btn){color:var(--steel)}
.toggle input:checked + .toggle__track{background:var(--steel)}
.lesson-list li.is-current{border-color:var(--steel);box-shadow:inset 3px 0 0 var(--steel)}
.admin-sidebar a.is-active{border-left-color:var(--seal);background:rgba(158,43,37,.14)}
/* the real logo mark */
.brand .logo-img{width:46px;height:46px;flex:none;display:block}
.seal--logo{background:none;box-shadow:none;transform:none;border-radius:0;width:46px;height:46px;padding:0}
.chat-fab{background:var(--lac);border:1px solid var(--brass-soft);box-shadow:0 8px 24px rgba(0,0,0,.5);transform:none}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab img{width:44px;height:44px;display:block;margin:auto}

/* ==========================================================================
   FAQ (2026-07-08): shared accordion for the public-page question chapters.
   Rice-paper card family; steel blue open/close affordance.
   ========================================================================== */
.faq-list{max-width:760px;margin-inline:auto;display:grid;gap:.8rem;text-align:left}
.faq-item{position:relative;background:linear-gradient(168deg,var(--silk-hi) 0%,var(--silk) 55%,var(--silk-lo) 100%);color:var(--body-ink);border:1px solid var(--brass-soft);border-radius:var(--radius);box-shadow:0 2px 0 rgba(245,236,217,.08),0 14px 30px rgba(12,5,3,.3)}
.faq-item summary{display:flex;align-items:baseline;gap:.85em;padding:1.05rem 1.25rem .95rem;cursor:pointer;list-style:none;font-family:var(--serif);font-weight:600;font-size:1.04rem;line-height:1.4;color:var(--lac);transition:color .2s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"+";flex:none;width:1em;font-family:var(--sans);font-weight:600;font-size:1.05em;line-height:1;color:var(--steel)}
.faq-item[open] summary::before{content:"\2212"}
.faq-item summary:hover{color:var(--seal)}
.faq-item summary:focus-visible{outline:2px solid var(--steel);outline-offset:2px;border-radius:2px}
.faq-item > div{padding:0 1.25rem 1.15rem;margin-left:calc(1em + .85em)}
.faq-item > div p{font-size:.95rem;line-height:1.65}
.faq-item > div p + p{margin-top:.6em}
@media (max-width:560px){.faq-item > div{margin-left:0}}

/* --------------------------------------------------------------------------
   Nav dropdown (public site: Classes menu). Robust: CSS hover on desktop,
   .is-open toggle (site.js) on tap/mobile.
   -------------------------------------------------------------------------- */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd__btn{display:inline-flex;align-items:center;gap:.4em;background:none;border:0;cursor:pointer;
  font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream-soft);
  padding:.5em .1em;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.nav-dd__btn:hover{color:var(--silk);border-bottom-color:var(--brass-soft)}
.nav-dd__btn::after{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);margin-left:.15em}
.nav-dd__menu{position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:230px;background:rgba(26,25,23,.98);backdrop-filter:blur(10px);border:1px solid var(--brass-soft);
  border-radius:var(--radius);box-shadow:0 18px 44px rgba(0,0,0,.5);padding:.5rem 0;
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:120}
.nav-dd:hover .nav-dd__menu,.nav-dd.is-open .nav-dd__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd__menu a{display:block;padding:.6em 1.2rem;font:500 .74rem/1.3 var(--sans);letter-spacing:.08em;
  text-transform:none;text-decoration:none;color:var(--cream-soft);border-bottom:0}
.nav-dd__menu a:hover{color:var(--silk);background:rgba(191,160,106,.1)}
.nav-dd__menu a span{display:block;font-size:.66rem;color:var(--brass);letter-spacing:.02em;margin-top:.1em}
.nav-dd__menu hr{border:0;height:1px;background:var(--brass-faint);margin:.4rem 0}
.nav-dd__menu .soon{color:var(--paper-faint)}
.nav-dd__menu .soon span{color:var(--paper-faint)}
@media (max-width:1220px){
  .nav-dd{width:100%;display:block}
  .nav-dd__btn{width:100%;justify-content:space-between;padding:.95em 0;border-bottom:1px solid var(--brass-faint)}
  .nav-dd__menu{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:none;
    border:0;box-shadow:none;padding:.2rem 0 .6rem 1rem;backdrop-filter:none}
  .nav-dd:hover .nav-dd__menu{transform:none}
}

/* Contact styled as the primary button in the public nav (shared) */
.site-nav .nav-cta{background:var(--seal);color:#F4EFE2;border:1px solid var(--seal);padding:.6em 1.3em;border-radius:2px;text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:.7rem}
.site-nav .nav-cta:hover{background:var(--seal-hi);border-color:var(--seal-hi)}
@media (max-width:1220px){.site-nav .nav-cta{display:inline-block;text-align:center;margin-top:.6rem}}

/* --------------------------------------------------------------------------
   Fixes (2026-07-09): age-card button alignment, dropdown hover bridge,
   clearer active-page state.
   -------------------------------------------------------------------------- */
/* age cards: equal-height flex so the CTA buttons line up across the row */
.age-card{display:flex;flex-direction:column}
.age-card > p:last-child{margin-top:auto;margin-bottom:0;padding-top:.4rem}

/* dropdown opens on HOVER with no dead gap: a transparent bridge fills the
   space between the Classes button and the menu so the cursor never leaves */
.nav-dd__menu{top:calc(100% + .4rem)}
.nav-dd__menu::before{content:"";position:absolute;left:0;right:0;top:-.5rem;height:.5rem;background:transparent}
@media (max-width:1220px){.nav-dd__menu::before{display:none}}

/* clearer active state on top-level links */
.site-nav a.is-active{color:var(--brass);border-bottom:2px solid var(--brass);font-weight:600}
/* current section: the Classes button takes the exact same active treatment as
   any other top-level link (identical 2px underline, weight and position) so it
   reads as a normal highlighted link, not a special case */
.nav-dd.is-current .nav-dd__btn{color:var(--brass);border-bottom:2px solid var(--brass);font-weight:600}
.nav-dd__menu a.is-active{color:var(--silk);background:rgba(191,160,106,.16)}
.nav-dd__menu a.is-active span{color:var(--brass)}

/* --------------------------------------------------------------------------
   Blog: prev/next post navigation
   -------------------------------------------------------------------------- */
.postnav-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.postnav{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.2rem;border:1px solid var(--brass-soft);border-radius:var(--radius);background:linear-gradient(168deg,var(--silk-hi),var(--silk-lo));color:var(--lac);text-decoration:none;font-family:var(--quote);font-size:1.02rem;line-height:1.3;transition:transform .18s,box-shadow .18s,border-color .18s}
.postnav:hover{transform:translateY(-2px);border-color:var(--brass);box-shadow:0 14px 30px rgba(12,5,3,.4)}
.postnav span{font:600 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--seal)}
.postnav--next{text-align:right;align-items:flex-end}
@media (max-width:560px){.postnav-row{grid-template-columns:1fr}.postnav--next{text-align:left;align-items:flex-start}}

/* --------------------------------------------------------------------------
   Timetable polish + gentle per-class colour coding (2026-07-09)
   Little Dragons = jade, Teens = steel blue, Adults = seal red. Subtle.
   -------------------------------------------------------------------------- */
.timetable{border-radius:var(--radius-lg);overflow:hidden;border-color:var(--brass-soft)}
.timetable thead th{background:var(--lac);color:var(--cream);font-size:.62rem;letter-spacing:.2em;padding:.95em 1em}
.timetable tbody th[scope="row"]{background:rgba(58,21,16,.05);font-size:.62rem;letter-spacing:.16em;color:var(--ink-soft);white-space:nowrap;vertical-align:middle}
.timetable td,.timetable th{border-color:rgba(138,130,113,.26)}
.timetable td{padding:.7em .8em;vertical-align:middle}
.timetable tbody tr:hover td{background:rgba(191,160,106,.045)}
.timetable td:empty::after{color:rgba(138,130,113,.5)}
/* class slots become tidy colour-coded chips */
.timetable .slot{position:relative;display:block;padding:.5em .7em .5em .8rem;border-radius:3px;border-left:3px solid var(--brass);background:rgba(138,130,113,.06)}
.timetable .slot__name{font-weight:600;font-size:.92rem;letter-spacing:0}
.timetable .slot__time{display:block;font-size:.79rem;color:var(--ink-faint);margin-top:.1em}
.timetable .slot--kids{border-left-color:var(--jade);background:rgba(109,138,114,.09)}
.timetable .slot--teens{border-left-color:var(--steel);background:rgba(62,110,142,.09)}
.timetable .slot--adults{border-left-color:var(--seal);background:rgba(158,43,37,.08)}
/* home age-card bands pick up the same class colours (quiet accent) */
.age-card--kids .age-band{color:var(--jade-hi)}
.age-card--teens .age-band{color:var(--steel-hi)}
.age-card--adults .age-band{color:var(--seal-hi)}

/* In-article CTA insert (Ticket D: high-traffic blog posts -> contact) */
.post-body .cta-insert,.scroll .cta-insert{margin:1.8rem 0;padding:1.1em 1.3em;border-left:3px solid var(--seal);background:rgba(158,43,37,.06);border-radius:3px;font-style:normal}
.post-body .cta-insert p,.scroll .cta-insert p{margin:0}
.post-body .cta-insert a,.scroll .cta-insert a{color:var(--seal);font-weight:700}

/* --------------------------------------------------------------------------
   PWA install dialog (offered when tapping Member Login in a browser)
   -------------------------------------------------------------------------- */
.pwa-lock{overflow:hidden}
.pwa-ov{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(12,6,4,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease}
.pwa-ov.is-in{opacity:1}
.pwa-card{position:relative;width:100%;max-width:360px;text-align:center;color:var(--body-ink);background:linear-gradient(168deg,var(--silk-hi) 0%,var(--silk) 60%,var(--silk-lo) 100%);border:1px solid var(--brass-soft);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(8,3,2,.6);padding:2rem 1.6rem 1.6rem;transform:translateY(10px) scale(.98);transition:transform .2s ease}
.pwa-ov.is-in .pwa-card{transform:none}
.pwa-logo{display:block;margin:0 auto .9rem;border-radius:14px;box-shadow:0 6px 18px rgba(8,3,2,.4)}
.pwa-h{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--lac);margin:0 0 .5rem}
.pwa-p{font-size:.95rem;line-height:1.55;color:var(--ink-soft);margin:0 0 1.1rem}
.pwa-steps{text-align:left;margin:0 0 1.1rem;padding-left:1.25rem;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.pwa-steps li{margin:.32rem 0}
.pwa-steps strong{color:var(--lac)}
.pwa-actions{display:flex;flex-direction:column;gap:.55rem;align-items:stretch}
.pwa-install{width:100%}
.pwa-cont{background:none;border:0;color:var(--ink-faint);font:600 .82rem/1 var(--sans);letter-spacing:.04em;padding:.65em;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pwa-cont:hover{color:var(--seal)}
.pwa-x{position:absolute;top:.45rem;right:.65rem;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--ink-faint);cursor:pointer;padding:.15rem .3rem}
.pwa-x:hover{color:var(--seal)}

/* --------------------------------------------------------------------------
   Page media: cinematic feature bands + framed figures (About, class pages)
   -------------------------------------------------------------------------- */
.media-band{position:relative;margin:2.4rem 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--brass-soft);box-shadow:var(--shadow-lift)}
.media-band img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.media-band figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.4rem .95rem;font:600 .66rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--silk);background:linear-gradient(to top,rgba(10,5,3,.85),rgba(10,5,3,.15) 70%,transparent)}
.media-figure{margin:1.9rem 0}
.media-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--brass-soft);box-shadow:0 14px 30px rgba(12,5,3,.32)}
.media-figure figcaption{margin-top:.65rem;font:500 .82rem/1.45 var(--quote);font-style:italic;letter-spacing:.01em;color:var(--cream-soft);text-align:center}

/* Side-by-side media + text, alternating (concise sections / class pages) */
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:center;margin:2.6rem 0}
.media-split--flip .media-split__media{order:2}
.media-split__media{margin:0}
.media-split__media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 28%;border-radius:var(--radius-lg);border:1px solid var(--brass-soft);box-shadow:0 16px 34px rgba(12,5,3,.34)}
.media-split__media figcaption{margin-top:.6rem;font:500 .8rem/1.45 var(--quote);font-style:italic;color:var(--cream-soft);text-align:center}
.media-split__body > :first-child{margin-top:0}
@media (max-width:760px){.media-split{grid-template-columns:1fr;gap:1.2rem}.media-split--flip .media-split__media{order:0}}

/* uniform square photo strip + split-cell photo (class pages) */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.5vw,1.1rem)}
.photo-strip figure{margin:0}
.photo-strip img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--brass-soft);box-shadow:0 12px 26px rgba(12,5,3,.3)}
@media (max-width:640px){.photo-strip{grid-template-columns:1fr 1fr}}
.split-photo{margin:0;align-self:stretch}
.split-photo img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover;object-position:center;border-radius:var(--radius-lg);border:1px solid var(--brass-soft);box-shadow:0 16px 34px rgba(12,5,3,.34)}

/* Click-to-play YouTube facade (loads the video only when clicked = fast) */
.yt-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--brass-soft);box-shadow:var(--shadow-lift);cursor:pointer;background:#0c0705}
.yt-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,opacity .3s}
.yt-facade:hover img{transform:scale(1.03);opacity:.92}
.yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-facade__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgba(140,43,39,.92);display:grid;place-items:center;box-shadow:0 8px 30px rgba(0,0,0,.5);transition:transform .2s,background .2s}
.yt-facade:hover .yt-facade__play{transform:translate(-50%,-50%) scale(1.08);background:var(--seal-hi)}
.yt-facade__play::after{content:"";width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #F4EFE2;margin-left:5px}
.yt-facade__title{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.4rem 1rem;font:600 .98rem/1.35 var(--font-display);color:var(--silk);background:linear-gradient(to top,rgba(8,4,3,.86),transparent);text-align:left;pointer-events:none}
.yt-facade:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* 2-up landscape photo pair (class pages with fewer photos) */
.photo-strip--pair{grid-template-columns:1fr 1fr}
.photo-strip--pair img{aspect-ratio:3/2}
@media (max-width:640px){.photo-strip--pair{grid-template-columns:1fr}}

/* 2-up portrait photo pair */
.photo-strip--portrait{grid-template-columns:1fr 1fr}
.photo-strip--portrait img{aspect-ratio:4/5}
@media (max-width:640px){.photo-strip--portrait{grid-template-columns:1fr}}
.social-row a[aria-label="Pinterest"]{background:#E60023}

/* ============================================================
   Nav CTA + membership pages (added 2026-07-29)
   ============================================================ */

/* The Contact CTA used to be copy-pasted into 13 pages' inline <style> blocks
   and was MISSING from timetable.html and login.html, so the button rendered
   unstyled there. Defined once here instead; the per-page copies are harmless
   duplicates and get removed as those pages are next touched. */
.site-nav .nav-cta{background:var(--seal);color:#F4EFE2;border:1px solid var(--seal);
  padding:.6em 1.3em;border-radius:5px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;font-size:.7rem}
.site-nav .nav-cta:hover{background:var(--seal-hi)}

/* A dropdown parent that is ALSO the CTA. render_site_nav checks `children`
   before `cta`, so without this a CTA item silently loses its styling the
   moment it gains a child. Matches .nav-cta, plus room for the caret. */
.site-nav .nav-dd__btn--cta{background:var(--seal);color:#F4EFE2;border:1px solid var(--seal);
  padding:.6em 1.1em .6em 1.3em;border-radius:5px;text-transform:uppercase;
  letter-spacing:.14em;font-weight:600;font-size:.7rem;border-bottom-color:var(--seal)}
.site-nav .nav-dd__btn--cta:hover{background:var(--seal-hi);color:#F4EFE2;
  border-bottom-color:var(--seal-hi)}
.site-nav .nav-dd__btn--cta::after{opacity:.8}
/* The active-page marker is a 2px brass underline (.nav-dd.is-current), which
   reads as a stray yellow line hanging off a solid red button. Redundant too:
   the button IS the marker. Suppressed for the CTA only - About and Classes
   keep their underline. Specificity has to beat .nav-dd.is-current .nav-dd__btn. */
.site-nav .nav-dd.is-current .nav-dd__btn--cta{
  color:#F4EFE2;border-bottom:1px solid var(--seal);font-weight:600}
.site-nav .nav-dd.is-current .nav-dd__btn--cta:hover{
  border-bottom-color:var(--seal-hi)}

/* ---- Legal / terms pages ---- */
.legal{color:var(--cream-soft)}
.legal h2{margin:2.6rem 0 1rem;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.legal h2:first-of-type{margin-top:0}
.legal p{margin:0 0 1rem;line-height:1.75;max-width:70ch}
.legal a{color:var(--ochre);text-decoration:underline;text-underline-offset:.2em}
.legal a:hover{color:var(--silk)}
.legal__stamp{font:600 .62rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass);margin:0 0 2.4rem;padding-bottom:1.2rem;
  border-bottom:1px solid var(--brass-faint)}
.legal__list{margin:0 0 1.4rem;padding-left:1.4rem;line-height:1.75}
.legal__list>li{margin-bottom:.9rem;padding-left:.3rem;max-width:70ch}
.legal__list::marker,.legal__list>li::marker{color:var(--ochre);font-weight:600}
.legal__sublist{margin:.8rem 0 0;padding-left:1.4rem;list-style:lower-alpha}
.legal__sublist>li{margin-bottom:.6rem}
.legal__checks{margin:0 0 1.4rem;padding:0;list-style:none;line-height:1.7}
.legal__checks>li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;max-width:70ch}
.legal__checks>li::before{content:"";position:absolute;left:.2rem;top:.62em;width:.4rem;
  height:.4rem;border-right:1.5px solid var(--ochre);border-bottom:1.5px solid var(--ochre);
  transform:rotate(45deg)}
.legal__defs{margin:0 0 1.6rem}
.legal__defs dt{font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--silk);
  margin-top:1.1rem}
.legal__defs dd{margin:.35rem 0 0;padding-left:1.1rem;line-height:1.7;max-width:68ch;
  border-left:1px solid var(--brass-faint)}

/* ---- Membership form ---- */
.mform{max-width:100%}
.mform fieldset{border:0;padding:0;margin:0 0 2.6rem}
.mform legend{padding:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.15rem,2.2vw,1.45rem);color:var(--lac);margin-bottom:.5rem}
.mform__hint{margin:0 0 1.6rem;font-size:.86rem;line-height:1.65;color:rgba(42,39,35,.72)}
.mform__req{color:var(--seal);font-weight:600}
/* Nested legal text INSIDE the form sits on paper, not on the dark scene. */
.mform__legal{background:rgba(107,36,27,.045);border:1px solid rgba(107,36,27,.16);
  border-left:3px solid var(--seal);padding:1.15rem 1.3rem;margin:0 0 1.6rem;
  font-size:.84rem;line-height:1.7;color:rgba(42,39,35,.86);max-height:15rem;overflow-y:auto}
.mform__legal p{margin:0 0 .8rem}
.mform__legal p:last-child{margin-bottom:0}
.mform__legal strong{color:var(--lac)}
.mform__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem}
@media (max-width:620px){.mform__grid{grid-template-columns:1fr}}
.mform__price{display:flex;align-items:baseline;gap:.6rem;padding:1rem 1.2rem;
  background:rgba(184,134,59,.1);border:1px solid rgba(184,134,59,.35);margin:0 0 1.6rem}
.mform__price b{font-family:var(--serif);font-size:1.6rem;color:var(--lac);line-height:1}
.mform__price span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(42,39,35,.7)}
/* Guardian block: hidden until "under 18" is ticked. */
.mform__branch{display:none}
.mform__branch.is-open{display:block}

/* ---- Signature pad ---- */
.sigpad{margin:0 0 .6rem}
.sigpad__canvas{width:100%;height:170px;display:block;background:var(--silk-hi);
  border:1px solid rgba(107,36,27,.3);border-radius:0;touch-action:none;cursor:crosshair}
.sigpad__canvas:focus-visible{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 1px var(--brass)}
.sigpad__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.5rem}
.sigpad__note{margin:0;font-size:.76rem;line-height:1.5;color:rgba(42,39,35,.62)}
.sigpad__clear{background:none;border:0;padding:0;cursor:pointer;font:600 .68rem/1 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--seal);
  border-bottom:1px solid transparent}
.sigpad__clear:hover{border-bottom-color:var(--seal)}

/* ---- Checkboxes in a .field (added 2026-07-30) --------------------------
   `.field input` sets width:100% and appearance:none, which turns a checkbox
   into a full-width empty text box. The fix existed ONLY in contact.html's
   inline <style>, so every other page rendered agreement checkboxes as giant
   blank rectangles. Defined once here. Same failure as .nav-cta. */
.field--inline{align-items:flex-start}
.field--inline input[type=checkbox]{
  flex:0 0 auto;width:1.15rem;height:1.15rem;min-width:1.15rem;margin:.12em 0 0;
  padding:0;border-radius:3px;border:1px solid rgba(107,36,27,.5);
  background:var(--silk-hi);cursor:pointer;position:relative;appearance:none}
.field--inline input[type=checkbox]:hover{border-color:var(--seal)}
.field--inline input[type=checkbox]:checked{background:var(--seal);border-color:var(--seal)}
/* the tick, drawn rather than relying on a glyph that varies by platform */
.field--inline input[type=checkbox]:checked::after{
  content:"";position:absolute;left:.36rem;top:.14rem;width:.28rem;height:.55rem;
  border:solid var(--silk-hi);border-width:0 2px 2px 0;transform:rotate(42deg)}
.field--inline input[type=checkbox]:focus-visible{
  outline:2px solid var(--brass);outline-offset:2px}
.field--inline label{cursor:pointer;line-height:1.55}
/* an agreement tick is a paragraph of text, not a one-word label */
.mform .field--inline{gap:.7em;margin-bottom:1.2rem}
.mform .field--inline label{font-size:.92rem;color:var(--body-ink)}
.mform .field--inline label a{color:var(--seal);font-weight:600;
  text-decoration:underline;text-underline-offset:.15em}

/* Belt and braces for the above (2026-07-30): even if the reveal script runs
   on a cached copy, or a future edit re-adds the class, the footer legal bar
   stays visible. Nothing that carries a legal link may depend on an animation. */
.site-footer__bottom.reveal{opacity:1;transform:none}