/* ==========================================================
   MIRROR OF THE TRADER — PROTOTYPE

   ARTWORK POLICY
   The four approved images are used unaltered. Nothing is drawn
   on top of them: no candles, no charts, no overlays, no masks.
   Each artwork sits in a <video> container that currently shows
   the original PNG as its poster. When the four animated assets
   are supplied they drop into assets/video/ and play in place
   with no markup change.
   ========================================================== */
:root{
  --black:#07070A; --deep:#0B0B0E; --line:rgba(221,186,92,.15);
  --ivory:#F3F0EA; --grey:#B5B2AC; --muted:#7D7B77;
  /* gold system — brighter, still elegant */
  --gold-primary:#DDBA5C; --gold-bright:#F0D07A; --gold-highlight:#FFE2A0;
  --gold-deep:#A97822; --gold-border:rgba(221,186,92,.55); --gold-glow:rgba(240,208,122,.25);
  /* legacy aliases so every existing rule inherits the new palette */
  --gold:var(--gold-primary); --gold-lt:var(--gold-bright); --gold-dim:var(--gold-deep);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1); --maxw:1180px; --text:700px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--black);overflow-x:hidden;max-width:100%}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-size:16px;line-height:1.75;color:var(--ivory);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(221,186,92,.3);color:#fff}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:400;line-height:1.14}
.h-xl{font-size:clamp(2.5rem,5.6vw,4.6rem);line-height:1.07}
.h-lg{font-size:clamp(1.95rem,4.2vw,3.2rem)}
.h-md{font-size:clamp(1.45rem,2.6vw,2.1rem)}
.h-sm{font-size:1.2rem}
.eyebrow{font-family:var(--sans);font-size:.67rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);display:block}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--grey);line-height:1.8}
p{color:var(--grey)}
.cap{font-size:.8rem;color:var(--muted);line-height:1.65}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4.5vw,44px)}
.narrow{max-width:var(--text);margin:0 auto}
section{position:relative;padding:clamp(76px,10vw,140px) 0}
.center{text-align:center}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0}

#loader{position:fixed;inset:0;z-index:9999;background:var(--black);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;transition:opacity .9s var(--ease),visibility .9s}
#loader.done{opacity:0;visibility:hidden}
#loader svg{width:82px;height:114px;overflow:visible}
#loader ellipse{fill:none;stroke:var(--gold);stroke-width:1.1;stroke-dasharray:520;stroke-dashoffset:520;animation:draw 1.5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
#loader circle{fill:var(--gold-lt);animation:ld 1.8s ease-in-out infinite}
@keyframes ld{0%,100%{opacity:.15}50%{opacity:.9}}
.lword{font-family:var(--serif);font-size:.92rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-dim);opacity:0;animation:fu 1s var(--ease) .7s forwards}
@keyframes fu{to{opacity:.9}}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-lt),var(--gold));box-shadow:0 0 14px rgba(221,186,92,.5)}

header{position:fixed;top:0;left:0;right:0;z-index:110;padding:15px 0;border-bottom:1px solid transparent;transition:background .55s var(--ease),border-color .55s,padding .55s var(--ease),transform .5s var(--ease)}
header.solid{background:rgba(7,7,10,.88);backdrop-filter:blur(16px);border-bottom-color:var(--line);padding:9px 0}
header.hide{transform:translateY(-100%)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--serif);font-size:1.04rem;letter-spacing:.09em;white-space:nowrap;position:relative}
.logo i{font-style:normal;color:var(--gold)}
.logo::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);background-size:280% 100%;background-position:200% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s ease-in-out 2s infinite;pointer-events:none}
@keyframes sheen{0%,74%{background-position:200% 0}100%{background-position:-140% 0}}
nav.main{display:flex;gap:clamp(10px,1.6vw,22px);align-items:center}
nav.main a{font-size:.715rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);position:relative;padding:6px 0;white-space:nowrap;transition:color .35s}
nav.main a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .45s var(--ease)}
nav.main a:hover{color:var(--ivory)}
nav.main a:hover::after,nav.main a.on::after{width:100%}
nav.main a.on{color:var(--gold)}
.hd-cta{display:flex;gap:9px;align-items:center}
.ntog{display:none;width:28px;height:16px;position:relative;flex:0 0 auto}
.ntog span{position:absolute;left:0;right:0;height:1px;background:var(--gold);transition:.4s var(--ease)}
.ntog span:nth-child(1){top:0}.ntog span:nth-child(2){top:7px}.ntog span:nth-child(3){top:14px}
.ntog.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ntog.x span:nth-child(2){opacity:0}
.ntog.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#mnav{position:fixed;inset:0;z-index:105;background:rgba(7,7,10,.985);backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;padding:80px 24px 40px;overflow-y:auto}
#mnav.open{opacity:1;visibility:visible}
#mnav a{font-family:var(--serif);font-size:1.6rem;color:var(--ivory);padding:8px 0;opacity:0;transform:translateY(14px)}
#mnav.open a{animation:mIn .55s var(--ease) forwards}
@keyframes mIn{to{opacity:1;transform:none}}
#mnav .mb{display:flex;flex-direction:column;gap:11px;margin-top:22px;width:min(300px,100%)}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 33px;font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border-radius:1px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s,color .4s,border-color .4s}
.btn::before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transition:left .85s var(--ease)}
.btn:hover::before{left:150%}
.btn-gold{background:linear-gradient(135deg,var(--gold),#A97822);color:#0A0A0A}
.btn-gold:hover{box-shadow:0 10px 34px -10px rgba(221,186,92,.7)}
.btn-ghost{border:1px solid var(--gold-dim);color:var(--ivory)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-lt);box-shadow:0 8px 30px -14px rgba(221,186,92,.5)}
.btn-sm{padding:10px 20px;font-size:.66rem;letter-spacing:.12em}
.tlink{color:var(--gold);font-size:.9rem;display:inline-flex;gap:8px;align-items:center;transition:color .35s}
.tlink .ar{transition:transform .4s var(--ease);display:inline-block}
.tlink:hover{color:var(--gold-lt)}.tlink:hover .ar{transform:translateX(6px)}

.rv{opacity:0;transform:translateY(30px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-l{opacity:0;transform:translateX(-32px);transition:opacity 1.05s var(--ease),transform 1.05s var(--ease)}
.rv-l.in{opacity:1;transform:none}
[data-stg]>*{opacity:0;transform:translateY(24px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-stg].in>*{opacity:1;transform:none}
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:top}
.wsplit .w i{display:inline-block;font-style:inherit;transform:translateY(106%);opacity:0;transition:transform 1.15s var(--ease),opacity 1.15s var(--ease)}
.wsplit.in .w i{transform:none;opacity:1}
.sweep{background-image:linear-gradient(100deg,var(--ivory) 32%,var(--gold-lt) 47%,#FFF6E0 52%,var(--gold-lt) 57%,var(--ivory) 72%);background-size:250% 100%;background-position:180% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.sweep.in{animation:swp 3.6s var(--ease) .5s}
@keyframes swp{0%{background-position:180% 0}100%{background-position:-90% 0}}
.shim{background-image:linear-gradient(100deg,var(--grey) 38%,var(--gold-lt) 50%,var(--grey) 62%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.shim.in{animation:shm 7s ease-in-out 1s infinite}
@keyframes shm{0%,70%{background-position:190% 0}100%{background-position:-110% 0}}

/* ===== ARTWORK / VIDEO CONTAINERS =====
   Aspect ratio is locked to each artwork's native ratio, so the
   still and the future video occupy identical space and nothing
   is cropped. object-fit:contain is used throughout because no
   cropping has been approved. */
.media{position:relative;width:100%;background:var(--black);overflow:hidden}
.media video,.media .still{width:100%;height:100%;object-fit:contain;display:block}
.media--mirror{aspect-ratio:1024/1024}
.media--banner{aspect-ratio:1983/793}
.media--about{aspect-ratio:1600/667}
.media--brain{aspect-ratio:1402/1122;max-width:min(100%, calc(82vh * 1402 / 1122));margin:0 auto}
.media--trader{aspect-ratio:1488/816}
.stage{position:relative;background:var(--black);isolation:isolate}
.stage-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,10,.5) 0%,transparent 20%,transparent 78%,var(--black) 100%)}
.stage-copy{position:absolute;inset:0;display:flex;align-items:flex-end;z-index:4}
.stage-copy .wrap{width:100%;padding-bottom:clamp(30px,5vw,62px)}
/* gentle section parallax on the media block only — artwork itself untouched */
.parallax{will-change:transform}

/* ===== HERO ===== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(104px,13vh,140px) 0 clamp(64px,9vh,100px);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-2px;z-index:0;background:
  radial-gradient(ellipse 62% 52% at 30% 46%,rgba(221,186,92,.12),transparent 64%),
  radial-gradient(ellipse 58% 48% at 76% 66%,rgba(221,186,92,.05),transparent 62%),
  linear-gradient(175deg,#08080B,#101014 48%,#08080B)}


.hero-copy{position:relative;z-index:8}
.hero-copy .h-xl{margin:14px 0 20px}
.hbtns{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:9;display:flex;
  flex-direction:column;align-items:center;gap:12px;opacity:1}
.cue span{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-bright);
  text-shadow:0 0 16px rgba(240,208,122,.5)}
.cue i{display:block;width:2px;height:74px;border-radius:2px;transform-origin:top;
  background:linear-gradient(180deg,var(--gold-highlight),var(--gold-primary) 45%,transparent);
  box-shadow:0 0 12px rgba(255,226,160,.7),0 0 26px rgba(221,186,92,.4);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.55}50%{transform:scaleY(1);opacity:1}}

.grid{display:grid;gap:clamp(13px,1.9vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:linear-gradient(160deg,rgba(22,22,26,.92),rgba(14,14,17,.92));border:1px solid var(--line);padding:clamp(20px,2.5vw,32px);overflow:hidden;transition:transform .6s var(--ease),border-color .6s,box-shadow .6s}
.card::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),rgba(221,186,92,.12),transparent 70%)}
.card:hover{transform:translateY(-7px);border-color:rgba(221,186,92,.36);box-shadow:0 22px 54px -26px rgba(0,0,0,.9)}
.card:hover::after{opacity:1}
.card .num{font-family:var(--serif);font-size:.84rem;color:var(--gold-dim);letter-spacing:.2em;display:block;margin-bottom:11px}
.chapcard .peek{max-height:0;overflow:hidden;opacity:0;transition:max-height .7s var(--ease),opacity .6s,margin .7s var(--ease)}
.chapcard:hover .peek{max-height:140px;opacity:1;margin-top:11px}
.lock{display:inline-flex;align-items:center;gap:8px;margin-top:15px;padding:8px 14px;border:1px solid rgba(221,186,92,.28);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);position:relative;overflow:hidden}
.lock::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(221,186,92,.3),transparent);animation:lk 6s ease-in-out infinite}
@keyframes lk{0%,68%{left:-100%}100%{left:170%}}
.quote{max-width:820px;margin:0 auto;text-align:center;padding:clamp(28px,4.6vw,54px) 0}
.quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.5}
.quote::before{content:'';display:block;width:1px;height:44px;margin:0 auto 24px;background:linear-gradient(180deg,transparent,var(--gold-dim),transparent)}
.acc{border-bottom:1px solid var(--line)}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;text-align:left;font-family:var(--serif);font-size:1.14rem;color:var(--ivory);transition:color .4s}
.acc button:hover{color:var(--gold-lt)}
.acc .ic{position:relative;width:13px;height:13px;flex:0 0 auto}
.acc .ic::before,.acc .ic::after{content:'';position:absolute;background:var(--gold);transition:transform .5s var(--ease),opacity .4s}
.acc .ic::before{top:6px;left:0;width:13px;height:1px}
.acc .ic::after{left:6px;top:0;width:1px;height:13px}
.acc.open .ic::after{transform:scaleY(0);opacity:0}
.acc .body{max-height:0;overflow:hidden;opacity:0;transition:max-height .65s var(--ease),opacity .5s}
.acc.open .body{opacity:1}
.acc .body p{padding-bottom:23px;max-width:62ch}

footer{border-top:1px solid var(--line);padding:clamp(54px,7vw,84px) 0 32px;background:var(--black);position:relative;overflow:hidden}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(221,186,92,.5),transparent);animation:fl 10s ease-in-out infinite}
@keyframes fl{0%,100%{opacity:.25;transform:translateX(-30%)}50%{opacity:.9;transform:translateX(30%)}}
.ftop{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(26px,4vw,52px);margin-bottom:44px}
.fnav{display:flex;flex-direction:column;gap:10px}
.fnav a,.fsoc a{font-size:.85rem;color:var(--grey);transition:color .35s,transform .35s var(--ease);width:fit-content}
.fnav a:hover{color:var(--gold)}
.fsoc{display:flex;flex-direction:column;gap:11px}
.fsoc a{display:inline-flex;align-items:center;gap:10px}
.fsoc a:hover{color:var(--gold);transform:translateX(4px)}
.fsoc svg{width:16px;height:16px;flex:0 0 auto;opacity:.72;transition:opacity .35s}
.fsoc a:hover svg{opacity:1}
.fbot{border-top:1px solid rgba(221,186,92,.09);padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.pnote{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(221,186,92,.24);background:rgba(221,186,92,.05);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dim)}
.pnote::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);animation:ld 2.4s ease-in-out infinite}

.view{display:none}
.view.active{display:block;animation:vin .85s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.phead{padding:clamp(126px,16vh,180px) 0 clamp(36px,5vw,62px);text-align:center;position:relative;overflow:hidden}
.phead::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 70% at 50% 0%,rgba(221,186,92,.12),transparent 68%)}

.auth{max-width:450px;margin:0 auto;background:linear-gradient(160deg,rgba(22,22,26,.95),rgba(13,13,16,.95));border:1px solid var(--line);padding:clamp(26px,4vw,42px);position:relative;overflow:hidden}
.auth::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:al 7s ease-in-out infinite}
@keyframes al{0%,60%{left:-100%}100%{left:160%}}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.tabs button{padding:0 0 13px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);position:relative;transition:color .4s}
.tabs button.on{color:var(--gold)}
.tabs button::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .5s var(--ease)}
.tabs button.on::after{width:100%}
.field{margin-bottom:18px}
.field label{display:block;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.022);border:1px solid rgba(221,186,92,.18);color:var(--ivory);padding:13px 15px;font-size:.93rem;font-family:var(--sans);border-radius:1px;transition:border-color .45s,background .45s,box-shadow .45s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(221,186,92,.045);box-shadow:0 0 0 3px rgba(221,186,92,.09)}
.field textarea{min-height:148px;resize:vertical;line-height:1.7}
.formnote{font-size:.77rem;color:var(--muted);margin-top:13px;line-height:1.6}
.toast{margin-top:15px;font-size:.83rem;color:var(--gold-lt);opacity:0;transform:translateY(-6px);transition:.5s var(--ease)}
.toast.show{opacity:1;transform:none}

.mbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:17px 0;border-bottom:1px solid var(--line);margin-bottom:38px}
.ring2{width:52px;height:52px;flex:0 0 auto}
.ring2 circle{fill:none;stroke-width:2.5}
.ring2 .bg{stroke:rgba(221,186,92,.16)}
.ring2 .fg{stroke:var(--gold);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.7s var(--ease)}
.reader{display:grid;grid-template-columns:248px 1fr;gap:clamp(22px,3.6vw,52px);align-items:start}
.chaplist{position:sticky;top:94px;border-left:1px solid var(--line);padding-left:19px;max-height:70vh;overflow-y:auto}
.chaplist button{display:block;width:100%;text-align:left;padding:10px 0;font-size:.85rem;color:var(--muted);position:relative;transition:color .4s,transform .4s var(--ease)}
.chaplist button::before{content:'';position:absolute;left:-20px;top:50%;width:1px;height:0;background:var(--gold);transform:translateY(-50%);transition:height .5s var(--ease)}
.chaplist button:hover{color:var(--grey);transform:translateX(3px)}
.chaplist button.on{color:var(--gold)}
.chaplist button.on::before{height:70%}
.readpane{max-width:660px}
.chap-body{animation:cin .8s var(--ease)}
@keyframes cin{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.readpane p{font-family:var(--serif);font-size:1.18rem;line-height:1.92;color:#DBD7CF;margin-bottom:1.25em}
.dropcap::first-letter{float:left;font-size:3.5em;line-height:.82;padding:.06em .1em 0 0;color:var(--gold);font-family:var(--serif)}
.readnav{display:flex;justify-content:space-between;gap:16px;margin-top:50px;padding-top:25px;border-top:1px solid var(--line)}

.jgrid{display:grid;grid-template-columns:296px 1fr;gap:clamp(18px,3vw,38px);align-items:start}
.jlist{display:flex;flex-direction:column;gap:9px}
.jentry{text-align:left;padding:15px 17px;border:1px solid var(--line);background:rgba(22,22,26,.6);position:relative;overflow:hidden;transition:border-color .45s,background .45s,transform .45s var(--ease)}
.jentry::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.jentry:hover{border-color:rgba(221,186,92,.3);transform:translateX(3px)}
.jentry.on{background:rgba(221,186,92,.06);border-color:rgba(221,186,92,.34)}
.jentry.on::before{transform:scaleY(1)}
.jentry b{display:block;font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--ivory);margin-bottom:4px}
.jentry span{font-size:.71rem;color:var(--muted)}
.jed{border:1px solid var(--line);background:linear-gradient(160deg,rgba(22,22,26,.88),rgba(13,13,16,.88));padding:clamp(19px,3vw,30px)}
.jprompt{border-left:2px solid var(--gold-dim);padding:11px 0 11px 17px;margin-bottom:22px;font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--grey)}
.jbar{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:18px}
.saved{font-size:.76rem;color:var(--gold);opacity:0;transition:opacity .5s}
.saved.show{opacity:1}

@media(max-width:1120px){nav.main{gap:11px}nav.main a{font-size:.66rem;letter-spacing:.08em}}
@media(max-width:960px){
  nav.main,.hd-cta .btn{display:none}
  .ntog{display:block}
  .hero{min-height:auto;padding-top:112px}
  
  
  .reader,.jgrid,.g3,.g2{grid-template-columns:1fr}
  .chaplist{position:static;max-height:none;display:flex;gap:6px;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line);padding:0 0 11px}
  .chaplist button{white-space:nowrap;padding:8px 13px;border:1px solid var(--line)}
  .chaplist button::before{display:none}
  .ftop{grid-template-columns:1fr;gap:30px}
  .stage-copy{position:static}
  .stage-copy .wrap{padding-top:24px;padding-bottom:0}
  .stage-scrim{background:linear-gradient(180deg,rgba(7,7,10,.45),transparent 26%)}
}
@media(max-width:560px){
  .hbtns{flex-direction:column;align-items:stretch}
  .hbtns .btn{width:100%}
  .quote p{font-size:1.2rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.rv-l,[data-stg]>*,.wsplit .w i{opacity:1!important;transform:none!important}
  .sweep,.shim{background:none;-webkit-text-fill-color:currentColor;color:var(--ivory)}
  .shim{color:var(--grey)}
  .parallax{transform:none!important}
  #loader{display:none}
}
/* ==========================================================
   MEMBER TOOLS — Worksheets & Trading Tools
   Habit Tracker · Personality Assessment · Control Plan
   Uses the existing black / charcoal / ivory / gold system.
   ========================================================== */

/* ---------- locked vs member state ---------- */
/* Gating: scope by body class so elements keep their natural display value
   (a forced display:block here would flatten flex components like .membernav,
   and an unscoped [data-member-only] rule loses to any later class rule). */
body:not(.is-member) [data-member-only]{display:none !important}
body.is-member [data-guest-only]{display:none !important}

.tool-card{position:relative;overflow:hidden}
.tool-card .preview{
  position:relative;margin-top:18px;border:1px solid var(--line);
  background:rgba(10,10,13,.7);padding:16px;overflow:hidden;max-height:168px
}
.tool-card .preview.blurred{filter:blur(3.5px) saturate(.7);opacity:.5;pointer-events:none;user-select:none}
.tool-card .preview::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(7,7,10,.92))
}
.lock-badge{
  position:absolute;top:16px;right:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border:1px solid rgba(221,186,92,.32);background:rgba(7,7,10,.86);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)
}
.tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---------- generic panel ---------- */
.panel{
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(22,22,26,.9),rgba(13,13,16,.9));
  padding:clamp(18px,2.6vw,30px)
}
.panel + .panel{margin-top:clamp(14px,2vw,20px)}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{
  padding:8px 14px;border:1px solid rgba(221,186,92,.26);background:transparent;color:var(--grey);
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;border-radius:1px;
  transition:border-color .35s,color .35s,background .35s
}
.chip:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(221,186,92,.06)}
.chip.danger:hover{border-color:#B06B5C;color:#D89384}
.chip[disabled]{opacity:.4;pointer-events:none}

/* Psychology test answer options. The selected state was previously toggled with
   a bare `on` class that had no rule, so the member could not see which option
   they had chosen. This matches the assessment's existing selected treatment
   (.yn button.sel) and adds a tick so selection is not signalled by colour
   alone. */
.ptopt.on{background:linear-gradient(135deg,var(--gold),#A97822);color:#0A0A0A;border-color:var(--gold);font-weight:600}
.ptopt.on::after{content:" \2713";font-weight:700;margin-left:6px}
.ptopt.on:hover{color:#0A0A0A;background:linear-gradient(135deg,var(--gold),#A97822)}

/* ---------- month navigator ---------- */
.monthnav{display:flex;align-items:center;gap:12px}
.monthnav .mlabel{
  font-family:var(--serif);font-size:1.35rem;min-width:200px;text-align:center;color:var(--ivory)
}
.monthnav select{
  background:rgba(255,255,255,.03);border:1px solid rgba(221,186,92,.2);color:var(--ivory);
  padding:8px 10px;font-family:var(--sans);font-size:.8rem;border-radius:1px
}
.monthnav select:focus{outline:none;border-color:var(--gold)}
.navbtn{
  width:34px;height:34px;border:1px solid rgba(221,186,92,.26);display:grid;place-items:center;
  color:var(--gold);transition:border-color .35s,background .35s,transform .35s var(--ease)
}
.navbtn:hover{border-color:var(--gold);background:rgba(221,186,92,.08);transform:translateY(-1px)}

/* ---------- progress rings ---------- */
.ringwrap{position:relative;display:inline-grid;place-items:center}
.ringwrap svg{transform:rotate(-90deg)}
.ringwrap circle{fill:none}
.ringwrap .trk{stroke:rgba(221,186,92,.15)}
.ringwrap .val{stroke:url(#goldgrad);stroke-linecap:round;transition:stroke-dashoffset .9s var(--ease)}
.ringwrap .pct{
  position:absolute;font-size:.72rem;font-weight:500;color:var(--ivory);letter-spacing:.02em
}
.ring-lg .pct{font-size:1.5rem;font-family:var(--serif)}
.ringwrap.done .val{filter:drop-shadow(0 0 6px rgba(221,186,92,.65))}

.overall{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.overall .stats{display:flex;gap:26px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--gold-lt);line-height:1.1}
.stat span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- habit table ---------- */
.tablescroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;max-width:100%}
.tablescroll::-webkit-scrollbar{height:8px}
.tablescroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
.tablescroll::-webkit-scrollbar-thumb{background:rgba(221,186,92,.28);border-radius:4px}
table.habits{border-collapse:collapse;width:max-content;min-width:100%;font-size:.82rem}
table.habits th,table.habits td{padding:8px 6px;border-bottom:1px solid rgba(221,186,92,.09);text-align:center;white-space:nowrap}
table.habits thead th{
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-dim);font-weight:500;
  position:sticky;top:0;background:#111114;z-index:2
}
table.habits td.name,table.habits th.name{
  text-align:left;min-width:210px;position:sticky;left:0;background:#111114;z-index:1;
  border-right:1px solid rgba(221,186,92,.12)
}
table.habits thead th.name{z-index:3}
table.habits td.name input{
  width:100%;background:transparent;border:1px solid transparent;color:var(--ivory);
  font-family:var(--sans);font-size:.84rem;padding:5px 7px;border-radius:1px;transition:border-color .3s,background .3s
}
table.habits td.name input:hover{border-color:rgba(221,186,92,.2)}
table.habits td.name input:focus{outline:none;border-color:var(--gold);background:rgba(221,186,92,.05)}
table.habits td.goal input{
  width:52px;background:rgba(255,255,255,.03);border:1px solid rgba(221,186,92,.18);color:var(--ivory);
  text-align:center;padding:5px;font-family:var(--sans);font-size:.8rem;border-radius:1px
}
table.habits td.goal input:focus{outline:none;border-color:var(--gold)}
table.habits tbody tr{transition:background .3s}
table.habits tbody tr:hover{background:rgba(221,186,92,.035)}
table.habits tbody tr:hover td.name{background:#16161a}
.wknd{background:rgba(255,255,255,.022)}
.today{box-shadow:inset 0 0 0 1px rgba(221,186,92,.4)}

/* elegant checkbox */
.hb{
  appearance:none;-webkit-appearance:none;width:19px;height:19px;border:1px solid rgba(221,186,92,.3);
  border-radius:2px;cursor:pointer;position:relative;transition:border-color .3s,background .3s,transform .25s var(--ease);
  vertical-align:middle;background:rgba(255,255,255,.02)
}
.hb:hover{border-color:var(--gold);background:rgba(221,186,92,.09)}
.hb:checked{background:linear-gradient(135deg,var(--gold),#A97822);border-color:var(--gold)}
.hb:checked::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #0A0A0A;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
  animation:tick .3s var(--ease)
}
@keyframes tick{from{opacity:0;transform:rotate(45deg) scale(.4)}to{opacity:1;transform:rotate(45deg) scale(1)}}
.hb:checked{animation:pop .32s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.hb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.rowbtn{color:var(--muted);font-size:.95rem;padding:3px 6px;transition:color .3s}
.rowbtn:hover{color:var(--gold)}
.rowbtn.del:hover{color:#C77E6D}
.notes-row td{padding:0 6px 10px}
.notes-row textarea{
  width:100%;min-height:52px;background:rgba(255,255,255,.02);border:1px solid rgba(221,186,92,.14);
  color:var(--grey);font-family:var(--sans);font-size:.8rem;padding:8px 10px;resize:vertical;border-radius:1px
}
.notes-row textarea:focus{outline:none;border-color:var(--gold)}

.savepill{
  display:inline-flex;align-items:center;gap:7px;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-dim);opacity:0;transition:opacity .4s
}
.savepill.show{opacity:1}
.savepill::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ---------- assessment ---------- */
.steps{display:flex;gap:6px;margin-bottom:28px;flex-wrap:wrap}
.steps div{
  flex:1;min-width:60px;height:2px;background:rgba(221,186,92,.15);position:relative;overflow:hidden
}
.steps div::after{
  content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease)
}
.steps div.on::after{transform:scaleX(1)}
.qcat{margin-bottom:26px}
.qcat h3{font-size:1.45rem;margin-bottom:4px}
.qrow{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid rgba(221,186,92,.1)
}
.qrow p{color:var(--ivory);font-size:1rem;flex:1;min-width:200px;margin:0}
.yn{display:flex;gap:8px;flex:0 0 auto}
.yn button{
  padding:9px 22px;border:1px solid rgba(221,186,92,.24);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);border-radius:1px;transition:all .35s var(--ease)
}
.yn button:hover{border-color:var(--gold);color:var(--gold-lt)}
.yn button.sel{background:linear-gradient(135deg,var(--gold),#A97822);color:#0A0A0A;border-color:var(--gold)}
.yn button.sel.no{background:linear-gradient(135deg,#4A4A50,#35353A);color:var(--ivory);border-color:#55555C}
.yn button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.bars{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.bar{display:grid;grid-template-columns:150px 1fr minmax(64px,auto);gap:14px;align-items:center;font-size:.82rem}
.bar .track{height:7px;background:rgba(221,186,92,.13);position:relative;overflow:hidden}
.bar .fill{
  position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold-lt));
  transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease)
}
/* Result VALUES — the percentages and bands members actually scan. These were
   .82rem in the row's dim body colour; now larger, brighter and heavier.
   Scoring, wording and ordering are untouched: presentation only. */
.bar span:last-child{
  text-align:right;color:var(--gold-lt);font-size:1.02rem;font-weight:700;
  letter-spacing:.01em;white-space:nowrap
}

.verdict{
  border:1px solid rgba(221,186,92,.28);background:rgba(221,186,92,.05);padding:22px;margin:24px 0
}
.verdict b{display:block;font-family:var(--serif);font-size:1.9rem;color:var(--gold-lt);margin-bottom:6px}
.typegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.typebox{border:1px solid var(--line);padding:18px;background:rgba(255,255,255,.017)}
.typebox h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;font-family:var(--sans);font-weight:500}
.typebox ul{display:flex;flex-direction:column;gap:6px}
.typebox li{font-size:.86rem;color:var(--grey);padding-left:14px;position:relative}
.typebox li::before{content:'—';position:absolute;left:0;color:var(--gold-dim)}
.scenario{
  border-left:2px solid var(--gold-dim);padding:14px 0 14px 18px;margin:22px 0;
  font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--grey);line-height:1.7
}
.thought{
  display:inline-block;padding:10px 18px;border:1px dashed rgba(221,186,92,.3);
  font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--gold-lt);margin-top:6px
}

.planfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.planfields .full{grid-column:1/-1}
.hist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.histrow{
  display:flex;justify-content:space-between;gap:14px;padding:11px 14px;border:1px solid var(--line);
  font-size:.84rem;align-items:center;flex-wrap:wrap
}
/* "53.3% · Moderate influence" and the per-pathway/profile score lines. */
.histrow b{
  color:var(--gold-lt);font-weight:700;font-family:var(--sans);font-size:1.06rem;
  letter-spacing:.01em
}

@media(max-width:700px){
  .bar{grid-template-columns:100px 1fr minmax(58px,auto);gap:10px;font-size:.76rem}
  .bar span:last-child{font-size:.95rem}
  .histrow b{font-size:1rem}
  .overall{gap:18px}
  .overall .stats{gap:16px}
  .monthnav .mlabel{min-width:120px;font-size:1.1rem}
  .qrow{flex-direction:column;align-items:flex-start;gap:12px}
  .yn{width:100%}
  .yn button{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .hb:checked,.hb:checked::after{animation:none!important}
  .ringwrap .val,.bar .fill,.steps div::after{transition:none!important}
}


/* ---------- member sub-navigation ---------- */
.membernav{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:0 0 16px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.membernav a,.membernav button{padding:8px 15px;border:1px solid rgba(221,186,92,.2);color:var(--grey);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;border-radius:1px;transition:border-color .35s,color .35s,background .35s}
.membernav a:hover,.membernav button:hover{border-color:var(--gold);color:var(--gold-lt);background:rgba(221,186,92,.06)}
.membernav a.on{border-color:var(--gold);color:var(--gold);background:rgba(221,186,92,.08)}
.membernav .spacer{flex:1}
@media(max-width:700px){.membernav{gap:6px}.membernav a{padding:7px 11px;font-size:.6rem}.membernav .spacer{display:none}}


/* ---------- Emotional Journal ---------- */
.emotabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}
.emotabs button{
  padding:10px 18px;border:1px solid rgba(221,186,92,.2);color:var(--grey);
  font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;border-radius:1px;
  transition:border-color .35s,color .35s,background .35s
}
.emotabs button:hover{border-color:var(--gold);color:var(--gold-lt)}
.emotabs button.on{border-color:var(--gold);color:var(--gold);background:rgba(221,186,92,.08)}
.emohd{margin-bottom:22px}
.emohd h2{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:4px}
.emohd p{font-size:.85rem;color:var(--muted)}

.emogrid{display:grid;grid-template-columns:330px 1fr;gap:clamp(16px,2.4vw,28px);align-items:start}
@media(max-width:900px){.emogrid{grid-template-columns:1fr}}
.emolist{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow-y:auto;padding-right:4px}
.emolist::-webkit-scrollbar{width:6px}
.emolist::-webkit-scrollbar-thumb{background:rgba(221,186,92,.25);border-radius:3px}
.emocard{
  text-align:left;padding:14px 16px;border:1px solid var(--line);background:rgba(22,22,26,.6);
  position:relative;overflow:hidden;transition:border-color .4s,background .4s,transform .4s var(--ease)
}
.emocard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.emocard:hover{border-color:rgba(221,186,92,.3);transform:translateX(3px)}
.emocard.on{background:rgba(221,186,92,.06);border-color:rgba(221,186,92,.34)}
.emocard.on::before{transform:scaleY(1)}
.emocard b{display:block;font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--ivory);margin-bottom:4px}
.emocard .sub{font-size:.72rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.emocard .dot{width:6px;height:6px;border-radius:50%;display:inline-block}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{
  background:rgba(255,255,255,.03);border:1px solid rgba(221,186,92,.18);color:var(--ivory);
  padding:9px 11px;font-family:var(--sans);font-size:.78rem;border-radius:1px
}
.filters input{flex:1;min-width:130px}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--gold)}

.slider{display:flex;align-items:center;gap:14px}
.slider input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:rgba(221,186,92,.2);border-radius:2px}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));cursor:pointer;
  box-shadow:0 0 0 3px rgba(221,186,92,.15);transition:box-shadow .3s
}
.slider input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px rgba(221,186,92,.2)}
.slider input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--gold);cursor:pointer}
.slider b{font-family:var(--serif);font-size:1.3rem;color:var(--gold-lt);min-width:52px;text-align:right}

.tagrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.tag{
  padding:7px 13px;border:1px solid rgba(221,186,92,.22);font-size:.68rem;letter-spacing:.06em;
  color:var(--grey);border-radius:20px;transition:all .3s var(--ease);cursor:pointer;background:transparent
}
.tag:hover{border-color:var(--gold);color:var(--gold-lt)}
.tag.on{background:rgba(221,186,92,.16);border-color:var(--gold);color:var(--gold-lt)}
.tag.add{border-style:dashed;color:var(--gold-dim)}
.chipbar{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.minitag{padding:3px 9px;border:1px solid rgba(221,186,92,.24);border-radius:20px;font-size:.63rem;color:var(--gold-dim)}

.stars{display:flex;gap:6px}
.stars button{font-size:1.5rem;color:rgba(221,186,92,.25);transition:color .3s,transform .3s var(--ease);line-height:1}
.stars button:hover{transform:scale(1.15)}
.stars button.on{color:var(--gold)}

/* insights board */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;align-items:start}
.col{border:1px solid var(--line);background:rgba(18,18,22,.6);padding:14px;min-height:120px;transition:border-color .3s,background .3s}
.col.dragover{border-color:var(--gold);background:rgba(221,186,92,.07)}
.col h4{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-family:var(--sans);font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px}
.col h4 span{color:var(--muted);font-size:.6rem}
.icard{
  border:1px solid rgba(221,186,92,.16);background:rgba(28,28,33,.85);padding:12px;margin-bottom:9px;
  cursor:grab;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s
}
.icard:hover{border-color:rgba(221,186,92,.36);transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(0,0,0,.8)}
.icard.dragging{opacity:.4;cursor:grabbing}
.icard p{font-size:.84rem;color:var(--ivory);line-height:1.6;margin-bottom:8px}
.icard .ibar{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.icard .ibar button{font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:3px 7px;border:1px solid transparent;transition:color .3s,border-color .3s}
.icard .ibar button:hover{color:var(--gold);border-color:rgba(221,186,92,.25)}
.icard .src{font-size:.6rem;color:var(--gold-dim);letter-spacing:.08em;text-transform:uppercase}
.emptyhint{font-size:.75rem;color:var(--muted);font-style:italic;padding:8px 0}
.cmpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:16px}
.cmpbox{border:1px solid var(--line);padding:16px;background:rgba(255,255,255,.017)}
.cmpbox h5{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-family:var(--sans);font-weight:500}
.cmpbox .big{font-family:var(--serif);font-size:1.7rem;color:var(--gold-lt);line-height:1.1}
.cmpbox .cap{margin-top:4px}


/* ---------- native dropdown readability ----------
   The closed control stays on-brand; the OS-rendered option list is forced to
   dark text on white, which is the only combination that reads correctly in
   Chrome, Edge and mobile where the popup is drawn by the platform. */
select{
  color:var(--ivory);
  background-color:rgba(255,255,255,.03);
  border:1px solid rgba(221,186,92,.2)
}
select:focus{outline:none;border-color:var(--gold)}
select option,
select optgroup{
  color:#111111;
  background:#ffffff;
  background-color:#ffffff
}
select option:checked,
select option:hover{
  color:#111111;
  background:#F0E6CE
}
@media (prefers-color-scheme: dark){
  select option, select optgroup{ color:#111111; background-color:#ffffff }
}

/* ---------- book reader heading hierarchy ---------- */
.readpane h1.booktitle{
  font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,3.4rem);color:var(--ivory);
  font-weight:600;letter-spacing:.01em;margin:0 0 .3em;line-height:1.1
}
.readpane p.booksub{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.5rem);
  color:var(--gold-lt);margin-bottom:2.4rem
}
.readpane h2{
  font-family:var(--serif);font-size:clamp(1.5rem,2.8vw,2.05rem);
  color:#DDBA5C;font-weight:700;letter-spacing:.015em;
  margin:2.9rem 0 1rem;padding-bottom:.5rem;
  border-bottom:1px solid rgba(221,186,92,.22)
}
.readpane h3{
  font-family:var(--serif);font-size:clamp(1.22rem,2.1vw,1.5rem);
  color:var(--gold-lt);font-weight:700;margin:2.1rem 0 .75rem;line-height:1.3
}
.readpane h4{
  font-family:var(--sans);font-size:.95rem;color:var(--ivory);font-weight:600;
  letter-spacing:.01em;margin:1.6rem 0 .6rem
}
.readpane h2 + h3{margin-top:1.2rem}
.readpane h2.chapline{
  border-bottom:none;font-size:clamp(1.45rem,2.6vw,1.9rem);
  margin:1.5rem 0 .45rem;padding-bottom:0;color:#DDBA5C;font-weight:700
}
.readpane h2.chapline + p{margin-top:0}
.readpane blockquote.entry{
  border-left:2px solid var(--gold-dim);padding:.9rem 0 .9rem 1.3rem;margin:1.6rem 0;
  font-family:var(--serif);font-style:italic;color:var(--gold-lt);font-size:1.06rem;line-height:1.75
}
.readpane ul{margin:0 0 1.4rem 0;padding-left:0}
.readpane li{
  font-family:var(--serif);font-size:1.08rem;line-height:1.8;color:#D5D1C9;
  padding-left:1.4rem;position:relative;margin-bottom:.55rem
}
.readpane li::before{content:'—';position:absolute;left:0;color:var(--gold-dim)}
.readpane strong{color:var(--ivory);font-weight:600}
.readpane em{color:var(--gold-lt);font-style:italic}

/* ---------- audiobook player ---------- */
.audiobar{
  position:sticky;top:74px;z-index:20;margin-bottom:22px;
  border:1px solid var(--line);background:rgba(13,13,17,.96);backdrop-filter:blur(14px);
  padding:14px 16px
}
.audiotop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.audiobtn{
  width:38px;height:38px;border:1px solid rgba(221,186,92,.28);display:grid;place-items:center;
  color:var(--gold);border-radius:50%;transition:border-color .3s,background .3s,transform .3s var(--ease);
  flex:0 0 auto;font-size:.72rem;letter-spacing:0
}
.audiobtn:hover{border-color:var(--gold);background:rgba(221,186,92,.1);transform:translateY(-1px)}
.audiobtn.play{width:46px;height:46px;background:linear-gradient(135deg,var(--gold),#A97822);color:#0A0A0A;border-color:var(--gold)}
.audiobtn.play:hover{box-shadow:0 6px 20px -8px rgba(221,186,92,.7)}
.audiobtn[disabled]{opacity:.35;pointer-events:none}
.audiotrack{flex:1;min-width:180px;display:flex;align-items:center;gap:11px}
.audioprog{
  flex:1;height:4px;background:rgba(221,186,92,.16);position:relative;cursor:pointer;border-radius:2px
}
.audioprog .fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold-lt));border-radius:2px}
.audioprog .knob{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;background:var(--gold-lt);transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(221,186,92,.2)}
.audiotime{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.audiometa{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:11px;padding-top:11px;border-top:1px solid rgba(221,186,92,.1)}
.audiometa select{padding:6px 9px;font-size:.72rem;border-radius:1px}
.audiometa label{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.audiovol{display:flex;align-items:center;gap:8px;min-width:120px}
.audiovol input[type=range]{-webkit-appearance:none;appearance:none;height:3px;background:rgba(221,186,92,.2);border-radius:2px;flex:1}
.audiovol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);cursor:pointer}
.audionote{font-size:.66rem;color:var(--gold-dim);letter-spacing:.06em;margin-left:auto}
body.audio-only .readpane .chap-body > *:not(.readnav){display:none}
body.audio-only .readpane .chap-body::after{
  content:'Audio-only mode — text hidden. Use the toggle to bring it back.';
  display:block;padding:60px 0;text-align:center;color:var(--muted);font-size:.9rem;font-style:italic
}
@media(max-width:700px){
  .audiobar{position:static}
  .audiotop{gap:9px}
  .audiobtn{width:34px;height:34px}
  .audiobtn.play{width:42px;height:42px}
  .audionote{margin-left:0;width:100%}
}


/* ---------- cinematic pull-quotes (verbatim manuscript lines) ---------- */
.pq{position:relative;max-width:860px;margin:0 auto;padding:clamp(46px,7vw,84px) clamp(20px,5vw,60px);text-align:center;overflow:hidden}
.pq::before{
  content:'\201C';position:absolute;top:clamp(4px,1.6vw,16px);left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:clamp(4.5rem,9vw,7rem);line-height:1;color:var(--gold);opacity:.22;pointer-events:none
}
.pq q{quotes:none}
.pq q::before,.pq q::after{content:''}
.pq .line{
  display:block;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.5;color:var(--ivory);
  opacity:0;transform:translateY(22px);
  transition:opacity 1.5s var(--ease),transform 1.5s var(--ease)
}
.pq.in .line{opacity:1;transform:none}
.pq.in .line{
  background-image:linear-gradient(100deg,var(--ivory) 34%,#FFF3D6 48%,var(--gold-lt) 52%,var(--ivory) 68%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pqSweep 7s var(--ease) 1.2s infinite
}
@keyframes pqSweep{0%,62%{background-position:190% 0}100%{background-position:-70% 0}}
.pq cite{
  display:block;margin-top:clamp(18px,2.6vw,28px);font-family:var(--sans);font-style:normal;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);
  opacity:0;transition:opacity 1.2s var(--ease) .5s
}
.pq.in cite{opacity:1}
.pq .rule{
  display:block;width:0;height:1px;margin:clamp(20px,3vw,30px) auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transition:width 1.8s var(--ease) .35s
}
.pq.in .rule{width:min(320px,62%)}

/* ---------- animated gold divider ---------- */
.gdiv{position:relative;height:1px;border:0;margin:0;background:rgba(221,186,92,.12);overflow:visible}
.gdiv::after{
  content:'';position:absolute;top:0;left:0;height:1px;width:34%;
  background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);
  animation:gdivRun 11s ease-in-out infinite
}
@keyframes gdivRun{0%,100%{transform:translateX(-40%);opacity:.25}50%{transform:translateX(240%);opacity:.9}}

/* ---------- ambient dust (background only, never over artwork) ---------- */
.dustfield{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.dustfield i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(214,180,116,.55);box-shadow:0 0 5px rgba(221,186,92,.4);
  animation:dustRise linear infinite
}
@keyframes dustRise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.7}
  88%{opacity:.5}
  100%{transform:translate3d(18px,-190px,0);opacity:0}
}
section.has-dust{position:relative}
section.has-dust > .wrap{position:relative;z-index:1}
/* never inside artwork containers */
.media .dustfield,.stage .dustfield{display:none!important}

/* ---------- slow background glow ---------- */
.glowbed{position:relative;isolation:isolate}
.glowbed::before{
  content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 40% at 30% 32%,rgba(221,186,92,.055),transparent 68%),
             radial-gradient(ellipse 40% 36% at 74% 70%,rgba(221,186,92,.04),transparent 66%);
  animation:bedShift 34s ease-in-out infinite
}
@keyframes bedShift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-1.6%,0) scale(1.07)}}
.glowbed > .wrap{position:relative;z-index:1}

/* ---------- chapter card lift ---------- */
.chapcard{transition:transform .6s var(--ease),border-color .6s,box-shadow .6s}
.chapcard:hover{transform:translateY(-9px) scale(1.012)}
.chapcard .num{transition:color .5s,letter-spacing .5s var(--ease)}
.chapcard:hover .num{color:var(--gold);letter-spacing:.26em}

@media(prefers-reduced-motion:reduce){
  .pq .line,.pq cite{opacity:1!important;transform:none!important;animation:none!important;
    background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--ivory)!important}
  .pq .rule{width:min(320px,62%)!important;transition:none!important}
  .gdiv::after,.dustfield,.glowbed::before{display:none!important}
}


/* ================= v5 CINEMATIC MOTION SYSTEM ================= */
/* default section reveal: opacity 0→1, translateY 24→0, scale .97→1 */
.rev{opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rev.in{opacity:1;transform:none}
.rev-d1{transition-delay:.12s}.rev-d2{transition-delay:.24s}.rev-d3{transition-delay:.36s}

/* ---------- branded loading screen ---------- */
#brandload{position:fixed;inset:0;z-index:10000;background:#050507;display:grid;place-items:center;
  transition:opacity .6s var(--ease),visibility .6s}
#brandload.gone{opacity:0;visibility:hidden;pointer-events:none}
#brandload .bl{position:relative;text-align:center}
#brandload .bt{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,2.5rem);letter-spacing:.16em;
  color:var(--ivory);opacity:0;animation:blIn .7s var(--ease) .1s forwards;
  background-image:linear-gradient(100deg,var(--ivory) 38%,var(--gold-highlight) 50%,var(--ivory) 62%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text}
#brandload.sweep .bt{color:transparent;animation:blIn .7s var(--ease) forwards, blSweep .8s var(--ease) .35s}
@keyframes blIn{to{opacity:1}}
@keyframes blSweep{0%{background-position:180% 0}100%{background-position:-60% 0}}
#brandload .bc{width:5px;height:5px;border-radius:50%;margin:18px auto 0;background:var(--gold-highlight);
  box-shadow:0 0 14px var(--gold-bright);opacity:0;animation:blFlick .5s ease-in-out .9s}
@keyframes blFlick{0%,100%{opacity:0}40%{opacity:1}70%{opacity:.4}}

/* ---------- cursor particles ---------- */
#curdust{position:fixed;inset:0;pointer-events:none;z-index:9000}
#curdust i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--gold-bright);box-shadow:0 0 6px var(--gold-glow);opacity:.55;
  animation:curFade 1.1s ease-out forwards}
@keyframes curFade{to{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.3)}}

/* ---------- cards & buttons (v5) ---------- */
.card,.tool-card,.dashcard{
  transition:transform .55s var(--ease),border-color .55s,box-shadow .55s,background .55s}
.card:hover,.tool-card:hover{
  transform:translateY(-5px);border-color:var(--gold-border);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.9), 0 0 0 1px var(--gold-glow), 0 0 26px -8px var(--gold-glow)}
.chapcard:hover{transform:translateY(-4px);border-color:var(--gold-border)}
.chapcard:hover h3{color:var(--gold-highlight)}
.chapcard h3{transition:color .5s var(--ease)}
.btn{border:1px solid transparent}
.btn-gold{background:linear-gradient(135deg,var(--gold-primary),var(--gold-deep));color:#0A0A0A;border-color:var(--gold-bright)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 10px 30px -10px var(--gold-glow),0 0 22px -6px var(--gold-glow)}
.btn-ghost{background:rgba(10,10,13,.6);border-color:var(--gold-border);color:var(--ivory)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--gold-bright);color:var(--gold-highlight);
  box-shadow:0 8px 26px -12px var(--gold-glow)}
.btn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.chip:focus-visible,.navbtn:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}

/* ---------- freedom word glow (light only, no objects) ---------- */

/* No markup uses .freedom-wrap or .freedom-glow; the image rule below is the
   only live style in this section. The glow animation's keyframes and rules
   were removed with the markup, leaving fragments that no browser could parse. */
.freedom-wrap img{width:100%;display:block}

/* ---------- cinemagraph / video-ready containers ---------- */



@keyframes ambBreathe{0%,100%{opacity:.45}50%{opacity:.9}}



/* ---------- ambient mode + voice preview ---------- */
.ambbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--gold-border);background:rgba(13,13,17,.9);padding:12px 15px;margin-bottom:18px}
.ambbar .lbl{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-primary)}
.togg{position:relative;width:44px;height:22px;border-radius:22px;border:1px solid var(--gold-border);
  background:rgba(255,255,255,.03);transition:background .4s,border-color .4s;flex:0 0 auto}
.togg::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--gold-deep);transition:transform .4s var(--ease),background .4s}
.togg[aria-pressed="true"]{background:var(--gold-glow);border-color:var(--gold-bright)}
.togg[aria-pressed="true"]::after{transform:translateX(22px);background:var(--gold-highlight)}
.ambdot{width:7px;height:7px;border-radius:50%;background:var(--gold-deep);transition:background .4s,box-shadow .4s}
.ambdot.on{background:var(--gold-highlight);box-shadow:0 0 10px var(--gold-bright);animation:ld 2.2s ease-in-out infinite}
.readmark{background:linear-gradient(90deg,var(--gold-glow),transparent);
  box-shadow:inset 2px 0 0 var(--gold-bright);border-radius:2px;transition:background .3s}

@media(prefers-reduced-motion:reduce){
  .rev{opacity:1!important;transform:none!important}
  #brandload{display:none!important}
  #curdust{display:none!important}
}


/* ================= MEMBER QUESTIONS ================= */
.qtabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}
.qtabs button{padding:10px 18px;border:1px solid rgba(221,186,92,.2);color:var(--grey);
  font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;border-radius:1px;
  transition:border-color .35s,color .35s,background .35s}
.qtabs button:hover{border-color:var(--gold);color:var(--gold-lt)}
.qtabs button.on{border-color:var(--gold);color:var(--gold);background:rgba(221,186,92,.08)}
.qtabs .adm{margin-left:auto;border-style:dashed}

.notice{border:1px solid var(--gold-border);background:rgba(221,186,92,.05);
  padding:18px 20px;margin-bottom:22px;font-size:.9rem;line-height:1.7;color:var(--grey)}
.notice b{color:var(--gold-lt);font-weight:400;font-family:var(--serif);font-size:1.05rem;display:block;margin-bottom:8px}

.qfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.qfilters input,.qfilters select{background:rgba(255,255,255,.03);border:1px solid rgba(221,186,92,.18);
  color:var(--ivory);padding:9px 12px;font-family:var(--sans);font-size:.79rem;border-radius:1px}
.qfilters input{flex:1;min-width:160px}
.qfilters input:focus,.qfilters select:focus{outline:none;border-color:var(--gold)}

.qcard{border:1px solid var(--line);background:linear-gradient(160deg,rgba(22,22,26,.86),rgba(14,14,17,.86));
  padding:20px 22px;margin-bottom:12px;transition:border-color .45s,transform .45s var(--ease)}
.qcard:hover{border-color:var(--gold-border);transform:translateY(-2px)}
.qcard h3{font-family:var(--serif);font-size:1.24rem;color:var(--ivory);margin-bottom:8px;line-height:1.35}
.qmeta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.71rem;color:var(--muted);margin-bottom:12px}
.qcat{padding:3px 10px;border:1px solid rgba(221,186,92,.26);border-radius:20px;color:var(--gold);font-size:.63rem;letter-spacing:.08em}
.qbody{font-size:.92rem;line-height:1.75;color:var(--grey);margin-bottom:14px}
.qanswer{border-left:2px solid var(--gold);padding:14px 0 14px 18px;margin-top:16px}
.qanswer .who{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
/* Published author answers. The decorative serif read thin and small over long
   answers, so the body uses the readable sans at a larger size, slightly
   heavier and brighter, with more air between paragraphs. The small gold
   "ANSWER FROM THE AUTHOR" heading above stays branded. */
.qanswer p{
  font-family:var(--sans);font-size:1.06rem;line-height:1.75;font-weight:420;
  color:#EDE9E1;margin-bottom:1.05em;letter-spacing:.002em
}
.qanswer p:last-child{margin-bottom:0}
@media(max-width:700px){ .qanswer p{font-size:1.02rem;line-height:1.72} }
.qlinks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.qlink{padding:6px 12px;border:1px solid rgba(221,186,92,.22);font-size:.66rem;color:var(--gold-lt);
  letter-spacing:.06em;transition:border-color .35s,background .35s}
.qlink:hover{border-color:var(--gold);background:rgba(221,186,92,.07)}
.qfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(221,186,92,.1)}
.helpful{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid rgba(221,186,92,.24);
  font-size:.68rem;color:var(--grey);transition:all .35s var(--ease)}
.helpful:hover{border-color:var(--gold);color:var(--gold-lt)}
.helpful.on{background:rgba(221,186,92,.14);border-color:var(--gold);color:var(--gold-lt)}
.helpful[disabled]{opacity:.5;pointer-events:none}
.feat{padding:3px 9px;border:1px solid var(--gold);color:var(--gold-lt);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}

.state{padding:3px 10px;font-size:.61rem;letter-spacing:.11em;text-transform:uppercase;border:1px solid}
.state.submitted{color:#B9B6B0;border-color:rgba(185,182,176,.4)}
.state.review{color:var(--gold);border-color:var(--gold-border)}
.state.answered{color:#8FA87E;border-color:rgba(143,168,126,.5)}
.state.notpub{color:#B06B5C;border-color:rgba(176,107,92,.5)}
.state.withdrawn{color:var(--muted);border-color:rgba(124,122,118,.4)}

.confirms{display:flex;flex-direction:column;gap:11px;margin:18px 0}
.confirms label{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--grey);line-height:1.6;cursor:pointer}
.confirms input{margin-top:3px;flex:0 0 auto}
.formerr{border:1px solid rgba(176,107,92,.5);background:rgba(176,107,92,.08);padding:14px 16px;
  font-size:.86rem;color:#D89384;line-height:1.65;margin-bottom:16px}
.formok{border:1px solid rgba(143,168,126,.5);background:rgba(143,168,126,.08);padding:14px 16px;
  font-size:.86rem;color:#A8C098;line-height:1.65;margin-bottom:16px}
.care{border:1px solid var(--gold-border);background:rgba(221,186,92,.06);padding:18px 20px;
  font-size:.92rem;color:var(--ivory);line-height:1.75;margin-bottom:16px}

.modrow{border:1px solid var(--line);padding:18px 20px;margin-bottom:12px;background:rgba(20,20,24,.7)}
.modrow .priv{font-size:.66rem;color:var(--gold-deep);letter-spacing:.08em;margin-bottom:8px}
.modbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.modbar select,.modbar input{background:rgba(255,255,255,.03);border:1px solid rgba(221,186,92,.18);
  color:var(--ivory);padding:8px 10px;font-size:.75rem;font-family:var(--sans)}
.modrow textarea{width:100%;min-height:110px;background:rgba(255,255,255,.02);border:1px solid rgba(221,186,92,.16);
  color:var(--ivory);padding:12px 14px;font-family:var(--sans);font-size:.88rem;line-height:1.7;margin-top:12px;resize:vertical}
.modrow textarea:focus{outline:none;border-color:var(--gold)}
.bell{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--gold-border);
  background:rgba(221,186,92,.06);font-size:.78rem;color:var(--gold-lt);margin-bottom:16px}
.bell b{width:6px;height:6px;border-radius:50%;background:var(--gold-highlight);box-shadow:0 0 8px var(--gold-bright)}
.qempty{font-size:.88rem;color:var(--muted);font-style:italic;padding:26px 0;text-align:center}
@media(max-width:700px){
  .qtabs .adm{margin-left:0}
  .qfilters input,.qfilters select{width:100%}
}


/* ================= v6 HERO — single cinematic composition ================= */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:clamp(96px,12vh,130px) 0 clamp(70px,9vh,104px);overflow:hidden;isolation:isolate}
.hero-art{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.hero-art img{
  width:min(92vw, 78vh); height:auto; max-height:82vh; object-fit:contain;
  filter:drop-shadow(0 50px 90px rgba(0,0,0,.85));
  opacity:0; transform:scale(1.04);
  animation:heroArtIn 2.4s var(--ease) .15s forwards, heroDrift 34s ease-in-out 2.6s infinite
}
@keyframes heroArtIn{to{opacity:1;transform:scale(1)}}
@keyframes heroDrift{0%,100%{transform:scale(1) translate3d(0,0,0)}50%{transform:scale(1.045) translate3d(0,-1%,0)}}
/* light that reads as coming from inside the mirror */
.hero-art::after{
  content:'';position:absolute;left:50%;top:48%;width:min(46vw,38vh);height:min(56vw,52vh);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,226,160,.30),rgba(221,186,92,.10) 45%,transparent 72%);
  animation:heroGlow 9s ease-in-out 1.4s infinite}
@keyframes heroGlow{0%,100%{opacity:.45}50%{opacity:1}}
.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,transparent 34%,rgba(7,7,10,.62) 78%,rgba(7,7,10,.92) 100%)}
.hero-inner{position:relative;z-index:4;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 clamp(20px,4.5vw,44px);display:flex;justify-content:center;text-align:center}
.hero-copy{max-width:min(46rem,92%)}
.hero-copy .h-xl{margin:16px 0 20px;text-shadow:0 4px 30px rgba(0,0,0,.85)}
.hero-copy .lede{margin:0 auto;max-width:52ch;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.hbtns{justify-content:center}
@media(max-width:900px){
  .hero{min-height:92svh;padding-top:104px}
  .hero-art img{width:min(96vw,58vh);max-height:56vh}
  .hero-art{align-items:flex-start;padding-top:8vh}
  .hero-veil{background:radial-gradient(ellipse 78% 52% at 50% 32%,transparent 26%,rgba(7,7,10,.7) 70%,rgba(7,7,10,.96) 100%)}
}

/* ================= v6 OPENING SEQUENCE ================= */
#brandload{background:#06060A}
#brandload .mirrormark{width:52px;height:70px;margin:0 auto 18px;display:block;overflow:visible}
#brandload .mirrormark ellipse{fill:none;stroke:var(--gold-bright);stroke-width:1.4;
  stroke-dasharray:300;stroke-dashoffset:300;animation:mmDraw .75s var(--ease) .05s forwards}
#brandload .mirrormark circle{fill:var(--gold-highlight);opacity:0;animation:mmSpark .5s ease-out .6s forwards}
@keyframes mmDraw{to{stroke-dashoffset:0}}
@keyframes mmSpark{0%{opacity:0;transform:scale(.4)}60%{opacity:1}100%{opacity:.75;transform:scale(1)}}
#brandload .bt{font-size:clamp(1.2rem,3vw,1.9rem);letter-spacing:.2em}
#brandload .bc{display:none}

/* ================= v6 MOTION REFINEMENTS ================= */
/* brighter, larger, slower dust */
.dustfield i{width:3px;height:3px;background:rgba(240,208,122,.85);
  box-shadow:0 0 9px rgba(255,226,160,.75),0 0 18px rgba(221,186,92,.35)}
@keyframes dustRise{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  14%{opacity:.9}
  84%{opacity:.55}
  100%{transform:translate3d(22px,-240px,0) scale(1.15);opacity:0}
}
#curdust i{width:4px;height:4px;background:var(--gold-highlight);
  box-shadow:0 0 8px rgba(255,226,160,.8),0 0 16px rgba(221,186,92,.4);opacity:.7}

/* section transitions between pages */
.view.active{animation:viewFade .7s var(--ease)}
@keyframes viewFade{from{opacity:0;transform:translateY(14px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}

/* chapter change in the reader */
.chap-body{animation:chapIn .85s var(--ease)}
@keyframes chapIn{from{opacity:0;transform:translateY(20px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

/* brain artwork: slow luminous pulse */
.glowspot{animation:brainPulse 8.5s ease-in-out infinite}
@keyframes brainPulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* headline gold sweep, slightly wider and slower */
@keyframes swp{0%{background-position:190% 0}100%{background-position:-80% 0}}

@media(prefers-reduced-motion:reduce){
  .hero-art img{animation:none!important;opacity:1!important;transform:none!important}
  .hero-art::after,.glowspot{animation:none!important}
  .view.active,.chap-body{animation:none!important}
}


/* ---------- checkout ---------- */
.cogrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);align-items:start}
@media(max-width:840px){.cogrid{grid-template-columns:1fr}}
.colist{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.colist li{font-size:.9rem;color:var(--grey);padding-left:22px;position:relative;line-height:1.6}
.colist li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--gold);background:radial-gradient(circle,var(--gold-highlight),transparent 70%)}
.cototal{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 0;margin:8px 0 12px;border-top:1px solid var(--gold-border);border-bottom:1px solid var(--gold-border)}
.cototal span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cototal b{font-family:var(--serif);font-size:2.1rem;color:var(--gold-bright);font-weight:400}
.corow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.coterms{display:flex;gap:11px;align-items:flex-start;font-size:.83rem;color:var(--grey);
  line-height:1.6;margin-top:14px;cursor:pointer}
.coterms input{margin-top:3px;flex:0 0 auto}

/* ---------- production additions ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:10001;padding:12px 20px;background:var(--gold-primary);
  color:#0A0A0A;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
.legal h2{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--gold-bright);
  margin:2.4rem 0 .9rem;font-weight:600}
.legal p{margin-bottom:1.15em;line-height:1.85}
.legal ul{margin:0 0 1.4rem}
.legal li{color:var(--grey);padding-left:1.3rem;position:relative;margin-bottom:.55rem;line-height:1.75}
.legal li::before{content:'—';position:absolute;left:0;color:var(--gold-deep)}
.legal a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;color:var(--gold-bright)}
.ltable{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:.88rem}
.ltable th,.ltable td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ltable th{color:var(--gold);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.ltable td{color:var(--grey);line-height:1.65}
.linkbtn{color:var(--gold-bright);font-size:.86rem;text-decoration:underline;text-underline-offset:3px;background:none;border:0}
.linkbtn:hover{color:var(--gold-highlight)}
.securenote{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:16px;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
[data-member-only][hidden],[data-guest-only][hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.steps-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:14px}
.steps-list li{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--muted);transition:color .4s}
.steps-list li .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--gold-deep);flex:0 0 auto;transition:all .4s}
.steps-list li.active{color:var(--ivory)}
.steps-list li.active .dot{border-color:var(--gold-bright);box-shadow:0 0 10px var(--gold-glow);animation:ld 1.6s ease-in-out infinite}
.steps-list li.done{color:var(--grey)}
.steps-list li.done .dot{background:var(--gold-primary);border-color:var(--gold-primary);box-shadow:none;animation:none}
.legal-masthead{border-left:2px solid var(--gold-deep);padding:4px 0 4px 18px;margin:0 0 2.2rem}
.legal-masthead p{margin:0 0 .35em;font-size:.92rem;color:var(--grey);line-height:1.65}
.legal-masthead p:first-child{color:var(--gold-bright);font-family:var(--serif);font-size:1.15rem}
.legal h2{letter-spacing:.02em;font-size:clamp(1.1rem,2vw,1.35rem);text-transform:none}
.consent{margin:22px 0 4px;padding:18px 20px;border:1px solid var(--gold-border);
  background:rgba(221,186,92,.04)}
.consent .coterms{margin:0 0 14px}
.consent .coterms:last-of-type{margin-bottom:0}
.consent .coterms span{flex:1}
.consent .coterms a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}
.consent .coterms input{width:17px;height:17px;accent-color:var(--gold-primary);cursor:pointer}
.consent-note{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(221,186,92,.16);
  font-size:.78rem;line-height:1.7;color:var(--muted)}
.consent.invalid{border-color:rgba(176,107,92,.65);background:rgba(176,107,92,.06)}
.consent .coterms.miss span{color:#D89384}
.purchase-confirm{margin-top:18px;padding:18px 20px;border:1px solid var(--gold-border);
  background:rgba(221,186,92,.04)}
.purchase-confirm p{font-size:.82rem;line-height:1.75;color:var(--grey);margin:0}
.purchase-confirm .pc-links{margin-top:12px;padding-top:12px;border-top:1px solid rgba(221,186,92,.16);
  font-size:.76rem;letter-spacing:.04em}
.purchase-confirm .pc-links a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px}

/* ================= PROTECTED BOOK READER =================
   Scoped to #readPane, which exists only in the member reader and holds the
   paid chapter text. Public pages, legal pages, journals, worksheets, Ask the
   Author and every form are untouched — none of them contain #readPane.
   These are deterrents layered on top of the server-side entitlement checks,
   not a replacement for them. */
#readPane{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  position:relative;
}
/* controls inside the reader stay fully interactive */
#readPane button,#readPane a,#readPane input,#readPane select,#readPane textarea,
#readPane [contenteditable="true"]{
  -webkit-user-select:auto; -moz-user-select:auto; -ms-user-select:auto; user-select:auto;
  -webkit-touch-callout:default;
}
#readPane img{-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* Copyright watermark. One element, tiled by background-repeat, sitting above
   the text but inert: it cannot intercept input, cannot be selected, and cannot
   be copied, because it is a background image rather than text nodes.
   `inset:0` inside the position:relative #readPane means it can never widen the
   page, so it cannot introduce horizontal scrolling at any width. */
#readPane .wm-layer{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* v12 sat at .055, invisible in Chrome and Edge and effectively absent from
     screenshots. Raised so a captured page carries a visible ownership mark,
     while staying far below body-text contrast so reading is unaffected. */
  background-repeat:repeat;opacity:.14;mix-blend-mode:screen;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  max-width:100%;overflow:hidden;
}
/* Narrower screens get a smaller tile so the line still reads, and a touch more
   opacity to survive mobile screenshot compression. */
@media (max-width:700px){ #readPane .wm-layer{opacity:.17;background-size:340px 209px} }
@media print{ #readPane .wm-layer{opacity:.22} }

/* small, quiet notice when a copy attempt is refused */
#wmToast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);
  z-index:9999;padding:9px 16px;border:1px solid var(--gold-border);
  background:rgba(10,10,13,.94);color:var(--grey);
  font-family:var(--sans);font-size:.74rem;letter-spacing:.03em;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s
}
#wmToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* print: the reader is replaced by a notice. #readPane exists only in the
   member app, so printing legal pages and public pages is unaffected. */
@media print{
  #readPane > *{display:none !important}
  #readPane::after{
    content:'Printing protected Mirror of the Trader book content is disabled.';
    display:block;padding:40px 0;text-align:center;
    font-family:Georgia,serif;font-size:14pt;color:#000
  }
  #readPane .wm-layer{display:none !important}
  .audiobar,.ambbar,#chapList{display:none !important}
}


/* ---------- print-friendly control plan ----------
   When the Control Plan is the active view, printing shows the plan alone:
   navigation, tabs, audio bars and other tools are excluded, and the fields
   render as readable text rather than form controls. */
@media print{
  body:has(#v-plan.active) header,
  body:has(#v-plan.active) footer,
  body:has(#v-plan.active) .membernav,
  body:has(#v-plan.active) .tool-actions,
  body:has(#v-plan.active) #brandload,
  body:has(#v-plan.active) .savepill,
  body:has(#v-plan.active) #curdust,
  body:has(#v-plan.active) #progress{display:none !important}
  body:has(#v-plan.active) .view:not(#v-plan){display:none !important}
  body:has(#v-plan.active) #v-plan{display:block !important}
  body:has(#v-plan.active) .panel{border:0;background:none;padding:0}
  body:has(#v-plan.active) #v-plan input,
  body:has(#v-plan.active) #v-plan textarea{
    border:0;border-bottom:1px solid #999;background:none;color:#000;
    padding:2px 0;resize:none;min-height:auto}
  body:has(#v-plan.active) #v-plan label{color:#444;font-weight:600}
  body:has(#v-plan.active) #v-plan,
  body:has(#v-plan.active) #v-plan *{color:#000 !important}
}