/* ==========================================================
   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:#050405; --deep:#100002; --line:rgba(169,130,56,.34);
  --ivory:#F3E8D8; --grey:#B5B2AC; --muted:#8F8C86; /* was #7D7B77: 4.3:1 on cards; now 5.1:1+ */
  /* gold system — brighter, still elegant */
  --gold-primary:#D4AF5A; --gold-bright:#E6C778; --gold-highlight:#F3DC9C;
  --gold-deep:#A98238; --gold-text:#B98B2E; /* readable small-text gold: 5.5:1+ on cards; --gold-deep stays for borders/gradients */ --gold-border:rgba(169,130,56,.75); --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:'Lora',Georgia,'Times New Roman',serif; /* v9: reading serif for content (headings, quotes, cards, long-form) */
  --brand:'Cormorant Garamond',Georgia,'Times New Roman',serif; /* wordmark only */
  --sans:'Lora',Georgia,'Times New Roman',serif; /* v27: Lora is the site-wide interface font too (was Inter); Cormorant stays for the wordmark only via --brand */
  --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,input,select,textarea,optgroup,option{font-family:inherit}   /* v27: form controls never fall back to the browser's system font */
input::placeholder,textarea::placeholder{font-family:inherit}
button{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:.8rem;font-weight:500;letter-spacing:.08em;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(--brand);font-size:.92rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-text);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(0,0,0,.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(--brand);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:.85rem;letter-spacing:.06em;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(0,0,0,.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:.8rem;font-weight:500;letter-spacing:.08em;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:.8rem;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{color:var(--ivory)}
/* v8: the gold sweep paints text through background-clip:text with a transparent fill. WebKit/mobile engines do not reliably paint that when the
   text sits in transformed/opacity-animated children (.wsplit words) or an animated background, leaving the heading invisible. It is now an
   enhancement for fine-pointer desktops only; everywhere else the heading keeps its solid ivory colour. */
@media (hover:hover) and (pointer:fine){@supports ((-webkit-background-clip:text) or (background-clip:text)){.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{color:var(--grey)}
@media (hover:hover) and (pointer:fine){@supports ((-webkit-background-clip:text) or (background-clip:text)){.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(0,0,0,.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,#000000,#101014 48%,#000000)}


.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:.8rem;letter-spacing:.08em;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-text);letter-spacing:.08em;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}
/* touch / no-hover devices can never hover: show the description */
@media(hover:none),(pointer:coarse){.chapcard .peek{max-height:none;opacity:1;margin-top:11px;overflow:visible}}
/* failsafe: reveal.js could not run (script blocked / failed) -> never leave copy hidden */
html.reveal-failsafe .rv,html.reveal-failsafe .rv-l,html.reveal-failsafe [data-stg]>*,html.reveal-failsafe .wsplit .w i,html.reveal-failsafe .rev,html.reveal-failsafe .pq .line,html.reveal-failsafe .pq cite,html.reveal-failsafe .chapcard .peek{opacity:1!important;transform:none!important;max-height:none!important}
html.reveal-failsafe .pq .rule{width:min(320px,62%)!important}
.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:.8rem;letter-spacing:.08em;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{font-size:.85rem;color:var(--grey);transition:color .35s,transform .35s var(--ease);width:fit-content}
.fnav a:hover{color:var(--gold)}
.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:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text)}
.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:.08em;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:.8rem;letter-spacing:.08em;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:.85rem;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 minmax(0,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:.8rem;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:.85rem;color:var(--gold);opacity:0;transition:opacity .5s}
.saved.show{opacity:1}

@media(max-width:1480px){nav.main{gap:11px}nav.main a{font-size:.8rem;letter-spacing:.08em}}
/* the longer 'Trading Psychology Assessments & Tools' label needs a little more room just above the burger breakpoint */
@media(max-width:1300px){nav.main{gap:9px}nav.main a{font-size:.8rem;letter-spacing:.05em}}
@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(0,0,0,.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(0,0,0,.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(0,0,0,.86);
  font-size:.8rem;letter-spacing:.08em;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:.8rem;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:.8rem;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:.8rem;letter-spacing:.08em;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:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);font-weight:500;
  position:sticky;top:0;background:#050405;z-index:2
}
table.habits td.name,table.habits th.name{
  text-align:left;min-width:210px;position:sticky;left:0;background:var(--deep);z-index:1;
  border-right:1px solid rgba(221,186,92,.12)
}
/* v25: the habit-name column is wider than before (272px on tablet/desktop, about the width it had on a phone) so the standard statements sit on one line, and a little
   narrower on the smallest phones so the Goal and the first days stay in view; whatever does not fit wraps onto further lines and the row grows. Names are never cut off. */
table.habits td.name,table.habits th.name{box-sizing:border-box;width:clamp(200px,66vw,272px);min-width:clamp(200px,66vw,272px);max-width:clamp(200px,66vw,272px);white-space:normal}
table.habits td.name textarea.hname{
  display:block;width:100%;box-sizing:border-box;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;
  background:transparent;border:1px solid transparent;color:var(--ivory);
  font-family:var(--sans);font-size:.84rem;line-height:1.38;padding:5px 7px;border-radius:1px;transition:border-color .3s,background .3s
}
table.habits td.name textarea.hname:hover{border-color:rgba(221,186,92,.2)}
table.habits td.name textarea.hname:focus{outline:none;border-color:var(--gold);background:rgba(221,186,92,.05)}
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:#050405}
.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:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-text);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:.8rem;letter-spacing:.08em;
  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:.8rem;letter-spacing:.08em;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-text)}
.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
}

/* Book-worksheet rows on the Worksheets & Tools page: each whole row is a link into the reader (v25). Same gold-on-black as the rest. */
a.wsrow{color:var(--ivory);text-decoration:none;cursor:pointer;min-height:46px;transition:border-color .3s,background .3s,box-shadow .3s}
a.wsrow>span{flex:1 1 auto;min-width:0}
a.wsrow:hover,a.wsrow:focus-visible{border-color:var(--gold);background:rgba(221,186,92,.05);box-shadow:0 8px 30px -16px rgba(221,186,92,.5)}
a.wsrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a.wsrow .wsopen{font-style:normal;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--gold-lt);border:1px solid var(--gold-dim);padding:6px 12px;line-height:1;white-space:nowrap}
a.wsrow:hover .wsopen,a.wsrow:focus-visible .wsopen{background:linear-gradient(135deg,var(--gold),#A97822);color:#0A0A0A;border-color:var(--gold-bright)}

@media(max-width:700px){
  .bar{grid-template-columns:100px 1fr minmax(58px,auto);gap:10px;font-size:.85rem}
  .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:.8rem;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:.8rem}.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:.8rem;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:.8rem;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:.85rem;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:.8rem;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-text)}
.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:.8rem;color:var(--gold-text)}

.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(6,6,6,.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:.8rem;letter-spacing:.08em;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:.8rem}
.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:.8rem;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:.8rem;color:var(--gold-text);letter-spacing:.08em;text-transform:uppercase}
.emptyhint{font-size:.8rem;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:.8rem;letter-spacing:.08em;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}
/* v15: a standalone quotation / reflective question is a real paragraph (so read-aloud tools and assistive tech treat it as text, not a heading)
   but keeps exactly the look it had when it was marked up as an <h3> */
.readpane p.quoteline{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 h2 + p.quoteline{margin-top:1.2rem}
/* Tables that the manuscript stored as rows of | characters are rendered as real tables (same Lora, black and gold; wraps on phones, never scrolls sideways). */
.readpane table.mdtable{width:100%;border-collapse:collapse;margin:1.8rem 0 2.2rem;font-family:var(--serif);font-size:clamp(.98rem,1.6vw,1.08rem);line-height:1.55;color:inherit}
.readpane .mdtable th,.readpane .mdtable td{border:1px solid rgba(221,186,92,.38);padding:.75rem .95rem;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.readpane .mdtable thead th{background:rgba(221,186,92,.13);color:var(--gold-lt)}
.readpane .mdtable tbody th{color:var(--gold-lt);font-weight:400;width:34%}
.readpane .mdtable tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
@media (max-width:560px){.readpane table.mdtable{font-size:.95rem}.readpane .mdtable th,.readpane .mdtable td{padding:.6rem .65rem}.readpane .mdtable tbody th{width:38%}}
.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-text)}
.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:.8rem;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:.8rem;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:.8rem;border-radius:1px}
.audiometa label{font-size:.8rem;letter-spacing:.08em;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:.8rem;color:var(--gold-text);letter-spacing:.06em;margin-left:auto;
  /* v20: one line, never wider than 14rem (the width of the longest Chrome note, "Reading with Google UK English Female"). Browsers expose different voice catalogues (Edge lists long "Microsoft … Online (Natural) - English (United Kingdom)" names), and a long note used to wrap the toolbar onto an extra row. The full text stays in the title attribute. */
  min-width:0;max-width:min(100%,14rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v20: the voice list is capped so a long voice name cannot push Speed / Volume / Audio-only onto extra rows. Shorter lists keep their natural width, so the Chrome layout is unchanged. */
.audiometa #auVoice{max-width:min(100%,251px);text-overflow:ellipsis}
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
}
/* ---------- paginated reader (Pages | Scroll) ----------
   Pages lays the one chapter out into CSS columns, one column per page. The text is not copied, split or hidden; Scroll is the original layout. */
.readpane .pg-head{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px}
.pg-mode{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.pg-mode button{font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:999px;color:var(--muted);transition:color .3s,background .3s}
.pg-mode button:hover{color:var(--grey)}
.pg-mode button[aria-pressed=true]{color:var(--gold-lt);background:rgba(221,186,92,.13)}
.pg-mode button:focus-visible,.pg-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.readpane .pg-foot{display:none}
.readpane.paged .pg-view{overflow:hidden;position:relative;touch-action:pan-y}
.readpane.paged .chap-body{animation:none;height:var(--pgh,600px);width:var(--pgw,100%);margin-left:3px;column-width:var(--pgw,100%);column-gap:var(--pgg,56px);column-fill:auto}
.readpane.paged.measuring .chap-body{height:auto;column-width:auto;columns:auto}
.readpane.paged :is(h1,h2,h3,h4,h5,h6,.eyebrow,p.quoteline,.pgn){break-after:avoid}
.readpane.paged :is(h1,h2,h3,h4,h5,h6,.pgk,tr,.readnav){break-inside:avoid}
.readpane.paged p{orphans:3;widows:3}
.readpane.paged .chap-body > :first-child{margin-top:0}
.readpane.paged .readnav{display:none}           /* in Pages the Previous / Next buttons below carry on to the neighbouring chapter */
.readpane.paged{min-width:0}
.readpane.paged .pg-foot{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(10px,2vw,22px);margin-top:14px}
.pg-btn{font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);border:1px solid rgba(221,186,92,.28);padding:9px 16px;border-radius:2px;transition:border-color .3s,background .3s,opacity .3s;white-space:nowrap}
.pg-btn:hover:not([disabled]){border-color:var(--gold);background:rgba(221,186,92,.08)}
.pg-btn[disabled]{opacity:.3;cursor:default}
.pg-mid{text-align:center;min-width:0}
.pg-count{font-family:var(--sans);font-size:.85rem;letter-spacing:.08em;color:var(--grey);font-variant-numeric:tabular-nums}
.pg-prog{height:2px;background:rgba(221,186,92,.16);margin-top:9px;position:relative}
.pg-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--gold-dim),var(--gold-lt))}
body.audio-only .readpane .pg-foot{display:none}
@media(max-width:560px){.pg-btn .t{display:none}.pg-btn{padding:9px 14px;font-size:.95rem}}
@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%;max-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}
/* v8: quotation shimmer = desktop-only enhancement (see .sweep note); solid ivory on touch/mobile. The gradient is only applied together with the clip so it can never paint as a block behind the text. */
@media (hover:hover) and (pointer:fine){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .pq.in .line{background-image:linear-gradient(100deg,var(--ivory) 34%,#FFF3D6 48%,var(--gold-lt) 52%,var(--ivory) 68%);
      background-size:250% 100%;animation:pqSweep 7s var(--ease) 1.2s infinite;-webkit-background-clip:text;background-clip:text;color:transparent}
  }
}
@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:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);
  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:.08em}

@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:#050405;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(--brand);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 ---------- */






.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:.8rem;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:.85rem;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:.8rem;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:.8rem;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:.8rem;letter-spacing:.08em;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:.8rem;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:.8rem;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:.8rem;letter-spacing:.12em;text-transform:uppercase}

.state{padding:3px 10px;font-size:.8rem;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:.8rem;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:.8rem;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:.85rem;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(0,0,0,.62) 78%,rgba(0,0,0,.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(0,0,0,.7) 70%,rgba(0,0,0,.96) 100%)}
}

/* ================= v6 OPENING SEQUENCE ================= */
#brandload{background:#050405}
#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:.8rem;letter-spacing:.08em;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:var(--serif);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:.8rem;letter-spacing:.08em;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:.8rem;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:.85rem;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:.85rem;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:.8rem;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:var(--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}
}

/* ==========================================================
   PUBLIC — Trading Psychology Assessments & Tools (/tools)
   Reuses .card / .tool-card / .lock-badge / .tool-actions from the member hub.
   ========================================================== */
.tools-h1{font-size:clamp(1.55rem,6.2vw,2.7rem);letter-spacing:.045em;line-height:1.22;overflow-wrap:anywhere}
.tools-grid{align-items:stretch}
.tools-grid .tool-card{display:flex;flex-direction:column}
.tools-grid .tool-card .tool-actions{margin-top:auto;padding-top:18px;align-items:center}
.tool-sub{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--gold);margin-top:3px;line-height:1.3}
.tool-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:14px}
.tool-meta li{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);border:1px solid rgba(221,186,92,.22);padding:4px 10px}
.tool-signin{font-size:.8rem;color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(221,186,92,.5);padding:12px 2px;display:inline-block}
.tool-signin:hover{color:var(--gold-highlight)}
.tools-grid .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:640px){
  .tools-grid .tool-actions{flex-direction:column;align-items:stretch}
  .tools-grid .tool-actions .btn{width:100%}
  .tools-grid .tool-actions .tool-signin{text-align:center}
}

/* Homepage — "What access includes": one premium card */
.access-card{max-width:760px;margin:0 auto;text-align:center;padding:clamp(28px,5vw,52px) clamp(22px,5vw,56px);border-color:var(--gold-border);box-shadow:0 0 0 1px rgba(221,186,92,.06),0 24px 60px -30px rgba(0,0,0,.8)}
.access-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,3.6vw,1.95rem);letter-spacing:.06em;line-height:1.3;color:var(--ivory);overflow-wrap:anywhere}
.access-sum{margin:18px auto 0;max-width:54ch;font-size:clamp(1rem,1.5vw,1.1rem);line-height:1.8;color:var(--grey)}
.access-price{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--gold-bright)}
.access-note{margin-top:8px;font-size:.88rem}

/* Checkout — Point 7 structure */
.co-h1{font-size:clamp(1.5rem,5.4vw,2.6rem);letter-spacing:.05em;line-height:1.25;overflow-wrap:anywhere}
.co-lede{max-width:54ch;margin:18px auto 0}
.panel .eyebrow + .colist{margin-top:16px}
.co-types{font-size:.8rem;letter-spacing:.06em;line-height:1.8;color:var(--grey);margin:-4px 0 22px;padding-top:14px;border-top:1px solid var(--line)}
.colist{list-style:none}
.access-price,.access-title,.co-h1,.tools-h1{text-wrap:balance}
#mnav a{overflow-wrap:anywhere}
/* mobile menu: '#mnav a' (id specificity) was overriding .btn-gold's dark label with ivory -> ~1.9:1 on gold */
#mnav{text-align:center}
#mnav a.btn-gold{color:#0A0A0A}


/* ================= UPDATE: banner media (home / read / tools) ================= */
.media--read{aspect-ratio:16/9}
.media--read video,.media--read .still{object-fit:cover}
.media--tests{aspect-ratio:1916/821}
.media--tests .still{object-fit:contain}
.tool-desc{margin-top:10px;line-height:1.7}
.stage--tools .stage-copy{position:static}
.stage--tools .stage-copy .wrap{padding-top:clamp(22px,3.5vw,38px);padding-bottom:0}
.stage--tools .stage-scrim{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 18%)}

.hero--video{display:block;min-height:0;padding:0;overflow:hidden;text-align:left}
.hero--video .hero-stage{position:relative;width:100%;height:clamp(420px,min(56.25vw,80svh),880px);background:var(--black);overflow:hidden}
.hero--video .hero-media,.hero--video .hero-media video,.hero--video .hero-media .still{position:absolute;inset:0;width:100%;height:100%}
.hero--video .hero-media video,.hero--video .hero-media .still{object-fit:cover;object-position:62% 35%;display:block}
.hero--video .hero-quote-wrap{position:absolute;left:0;top:0;bottom:0;width:100%;z-index:4;display:flex;align-items:center;
  padding:0 clamp(20px,5vw,72px);pointer-events:none}
.hero--video .hero-quote{font-family:var(--serif);font-style:italic;font-weight:400;text-align:left;
  font-size:clamp(1.9rem,3.3vw,3.2rem);line-height:1.16;max-width:min(13em,36%);color:var(--ivory);margin:0;
  text-shadow:0 2px 24px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.6)}
.hero--video .hero-stage::after{content:'';position:absolute;left:0;right:0;top:0;height:22%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.hero--video .hero-sub{position:relative;z-index:4;margin:0;padding:clamp(28px,4vw,44px) clamp(20px,5vw,72px) clamp(44px,6vw,72px);text-align:left}
.hero--video .hero-sub .lede{margin:0 0 22px;max-width:52ch}
.hero--video .hbtns{justify-content:flex-start}
.hero--video .cue{display:none}
@media(max-width:900px){
  .hero--video .hero-stage{height:clamp(440px,118vw,640px);margin-top:0}
  .hero--video .hero-media video,.hero--video .hero-media .still{object-position:64% center}
  .hero--video .hero-sub{padding-left:clamp(20px,5vw,44px);padding-right:clamp(20px,5vw,44px)}
  .hero--video .hero-quote-wrap{align-items:flex-end;padding-bottom:clamp(22px,6vw,40px)}
  .hero--video .hero-quote-wrap::before{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;
    background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0))}
  .hero--video .hero-quote{font-size:clamp(1.65rem,7.4vw,2.3rem);max-width:min(14em,92%)}
}

/* /tools: tighter rhythm between the headline block, the Foundations line and the cards */
.stage--tools + .pq-wrap .pq{padding-top:clamp(30px,4vw,50px);padding-bottom:clamp(22px,3vw,36px)}
.stage--tools + .pq-wrap + .glowbed{padding-top:clamp(8px,1.6vw,20px);padding-bottom:clamp(56px,8vw,110px)}
.stage--tools + .pq-wrap + .glowbed .lede{margin-bottom:clamp(22px,3vw,32px)!important}


/* ================= /tools interactive doors (hotspots + floating preview) ================= */
.media--tests{position:relative}
.doors{position:absolute;inset:0;z-index:3}
.door-hot{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;
  border-radius:46% 46% 1% 1% / 17% 17% 1% 1%;transition:background .35s ease,box-shadow .35s ease;-webkit-tap-highlight-color:transparent}
.door-hot:hover,.door-hot.on{background:rgba(240,208,122,.10);box-shadow:inset 0 0 0 1.5px rgba(240,208,122,.65),0 0 24px rgba(240,208,122,.32)}
.door-hot:focus-visible{outline:2px solid var(--gold-bright,#F0D07A);outline-offset:2px;background:rgba(240,208,122,.10)}
.door-backdrop{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.38);opacity:0;transition:opacity .25s ease}
.door-backdrop.in{opacity:1}
.door-panel{position:fixed;z-index:91;left:50%;top:50%;width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow:auto;
  padding:clamp(24px,4vw,36px);background:linear-gradient(180deg,rgba(8,8,8,.97),rgba(0,0,0,.98));
  border:1px solid rgba(221,186,92,.38);box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.6),0 0 40px rgba(221,186,92,.08);
  opacity:0;transform:translate(-50%,calc(-50% + 14px));transition:opacity .25s ease,transform .25s ease;outline:none}
.door-panel.in{opacity:1;transform:translate(-50%,-50%)}
.door-panel[hidden],.door-backdrop[hidden]{display:none}
.door-panel .num{display:block;margin-bottom:6px}
.door-panel h2{margin:0 0 10px;padding-right:34px}
.door-panel .tool-desc{margin-top:8px}
.door-close{position:absolute;top:10px;right:12px;width:40px;height:40px;font-size:1.7rem;line-height:1;color:var(--gold);background:transparent;border:0;cursor:pointer}
.door-close:hover,.door-close:focus-visible{color:var(--gold-bright,#F0D07A)}
@media(prefers-reduced-motion:reduce){.door-panel,.door-backdrop,.door-hot{transition:none}}

/* Homepage redesign v5 */
.home-journey{padding-top:clamp(56px,8vw,96px)}
.home-guide-btns{display:flex;gap:16px;justify-content:center;margin-top:30px;flex-wrap:nowrap}
.home-guide-btns .btn{flex:0 1 auto}
.home-chaps{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,24px);max-width:1080px;margin:0 auto}
.home-chaps .home-chap{grid-column:span 2;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:132px}
.home-chaps .home-chap:last-child{grid-column:3 / span 2}
@media(max-width:900px){.home-chaps{grid-template-columns:repeat(2,1fr)}.home-chaps .home-chap,.home-chaps .home-chap:last-child{grid-column:auto}.home-chaps .home-chap:last-child{grid-column:1 / -1;max-width:calc(50% - 8px);justify-self:center;width:100%}}
@media(max-width:560px){.home-guide-btns{flex-direction:column;align-items:stretch}.home-chaps{grid-template-columns:1fr}.home-chaps .home-chap:last-child{max-width:none}}
.home-chaps .home-chap{border-color:var(--gold-border)}

/* v7 */
/* 1-2 homepage */
.home-journey{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(36px,5vw,56px)}
.home-guide{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(36px,5vw,64px)}
.has-dust{padding-top:clamp(36px,5vw,64px)}
.home-chaps .home-chap{min-height:0;justify-content:flex-start;padding:clamp(18px,2vw,26px)}
.home-chaps .home-chap .home-chap-sum{margin-top:12px;font-size:.92rem;line-height:1.65;color:var(--grey)}
/* 3-4 tools: door intro on the woman's back (desktop) or directly below the image (narrow) */
.stage--tools{container-type:inline-size}
.door-intro{position:absolute;z-index:4;left:41.9cqw;width:16.2cqw;top:calc(.705 * 42.85cqw);text-align:center;pointer-events:none;
  padding:.8cqw .6cqw;border-radius:6px;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,0) 78%);text-shadow:0 1px 10px rgba(0,0,0,.9)}
.door-intro p{margin:0}
.door-intro-h,.door-intro-s{display:block}
.door-intro-h{font-family:var(--serif);font-size:max(.78rem,1.3cqw);letter-spacing:.04em;line-height:1.25;color:var(--gold-bright,#F0D07A)}
.door-intro-s{margin-top:.7cqw;font-family:var(--serif);font-size:max(.74rem,1.02cqw);line-height:1.4;color:var(--ivory)}
@media(max-width:1100px){
  .door-intro{position:static;width:auto;max-width:34rem;margin:0 auto;padding:22px 20px 0;background:none;pointer-events:auto}
  .door-intro-h{font-size:1.15rem}.door-intro-s{font-size:1rem;margin-top:8px}
  .stage--tools .stage-copy .wrap{padding-top:18px}
}
/* 5-6 read hero */
.stage--read .stage-copy{align-items:flex-start}
.stage--read .stage-copy .wrap{padding-top:clamp(24px,4.5vw,64px);padding-bottom:0}
.stage--read .stage-copy h1{font-size:clamp(1.7rem,3.6vw,3rem)}
.stage--read .stage-scrim{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 45%,transparent 78%,var(--black) 100%),linear-gradient(90deg,rgba(0,0,0,.5),transparent 55%)}
.read-cue{position:absolute;left:50%;bottom:clamp(12px,2vw,24px);transform:translateX(-50%);z-index:6;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  color:var(--gold);background:rgba(0,0,0,.35);border:1px solid rgba(221,186,92,.35);opacity:.8;transition:opacity .25s,border-color .25s}
.read-cue:hover,.read-cue:focus-visible{opacity:1;border-color:var(--gold-bright,#F0D07A)}
.read-cue:focus-visible{outline:2px solid var(--gold-bright,#F0D07A);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.read-cue svg{animation:readcue 2.4s ease-in-out infinite}}
@keyframes readcue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
#readstart{scroll-margin-top:84px}
@media(max-width:600px){
  .stage--read .stage-copy{position:static}
  .stage--read .stage-copy .wrap{padding-top:22px;padding-bottom:64px}
  .stage--read .stage-scrim{background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 26%)}
}
@media(min-width:601px) and (max-width:900px){.stage--read .stage-copy{position:absolute}}
/* 7-8 read content */
.read-epigraph{margin:0 0 30px;padding:0 0 0 18px;border-left:1px solid var(--gold-border);font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--grey)}
.read-epigraph strong{font-weight:400}
.read-fade{-webkit-mask-image:linear-gradient(180deg,#000 8%,transparent 96%);mask-image:linear-gradient(180deg,#000 8%,transparent 96%);margin-bottom:0}
.read-fade p{margin-bottom:.4em}
.read-cta{margin-top:10px}
.read-cta-h{font-size:clamp(1.5rem,3vw,2rem);font-style:italic;color:var(--ivory);margin:0 0 22px}

/* ================= v9 ================= */
/* task 1: homepage - tighten the gap between the last Inside-the-Book card and YOUR NEXT STEP (was ~2 x 140px of section padding) */
.has-dust{padding-bottom:clamp(24px,3.5vw,48px)}
.home-next{padding-top:clamp(28px,4vw,56px)}
/* task 6: homepage book-card category/number labels - larger, brighter gold, uppercase, tracked */
.home-chaps .home-chap .num,.home-chaps .home-chap:hover .num{font-size:max(.92rem,.95rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-bright,#F0D07A);margin-bottom:12px}
/* task 2: footer groups */
.fgroup{min-width:0}
.fhead{display:block;margin:0 0 15px;font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);list-style:none}
summary.fhead{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px;margin-bottom:6px;padding:0;border-bottom:1px solid var(--line)}
summary.fhead::-webkit-details-marker{display:none}
summary.fhead::after{content:'';flex:none;width:9px;height:9px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .3s}
details.fgroup[open] summary.fhead::after{transform:rotate(-135deg);margin-top:4px}
summary.fhead:focus-visible{outline:2px solid var(--gold-bright,#F0D07A);outline-offset:3px}
details.fgroup[open] .fnav{padding-top:10px}
@media(max-width:700px){
  .ftop{gap:26px}
  .fgroup .fnav{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
  .flegal .fnav{grid-template-columns:1fr}
  .fgroup .fnav a{font-size:.92rem;line-height:1.4;padding:4px 0;width:auto}
}
/* task 7: soften hard banner -> page cuts. Bottom blend into the page background; purely visual overlays (pointer-events none, under all text/hotspots), media files untouched.
   About and Read already blend through .stage-scrim, so only the home hero and the Tools door image needed it. */
.hero--video .hero-media::after,.media--tests::after{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(56px,15%,160px);pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55) 55%,var(--black))}
.media--tests::after{z-index:2}
/* task 9: About redesign (video stage unchanged; text now below it) */
.ab-hero{text-align:center;padding:clamp(40px,6vw,76px) 0 clamp(36px,5vw,64px)}
.ab-hero .wrap{max-width:860px}
.ab-eb{display:flex;align-items:center;justify-content:center;gap:14px}
.ab-eb i{display:block;width:34px;height:1px;background:var(--gold)}
.ab-gold{color:var(--gold)}
.ab-lede{max-width:62ch;margin:22px auto 30px;color:var(--ivory);line-height:1.85;font-size:clamp(1.02rem,1.6vw,1.18rem)}
.ab-sec{padding:clamp(40px,6vw,80px) 0;text-align:center}
.ab-sec h2{margin:14px 0 0}
.ab-sub{max-width:60ch;margin:16px auto 0;color:var(--ivory);line-height:1.8}
.ab-grid{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px);text-align:left}
.ab-card{display:flex;flex-direction:column;border:1px solid var(--gold-border,rgba(221,186,92,.3));background:rgba(255,255,255,.02);border-radius:6px;overflow:hidden}
.ab-img,.ab-slot{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ab-slot{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#000000,#000000);border-bottom:1px solid var(--gold-border,rgba(221,186,92,.3))}
.ab-slot-t{font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.ab-cb{display:flex;gap:16px;padding:22px 22px 26px}
.ab-ic{flex:none;width:34px;height:34px}
.ab-ic svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ab-cb h3{margin:0 0 8px;font-size:.82rem;font-family:var(--sans);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.ab-cb p{margin:0;color:var(--ivory);line-height:1.7;font-size:.98rem}
.ab-quote{background:radial-gradient(120% 90% at 50% 100%,#000000 0,#000000 70%)}
.ab-closegrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;text-align:left}
.ab-slot--books{border:1px solid var(--gold-border,rgba(221,186,92,.3));border-radius:6px}
@media(max-width:900px){.ab-grid{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}.ab-closegrid{grid-template-columns:1fr}.ab-closegrid h2,.ab-closegrid .ab-sub{text-align:center}.ab-closegrid .ab-sub{margin-left:auto!important}}
/* task 8: Lora is wider/taller than Cormorant - normalise x-height so serif content does not overflow; falls back to Georgia (same metrics family) if the web font is unavailable */
h1,h2,h3,.lede,.pq,.pq q,.home-chap,.access-sum,.acc .body,.ab-lede,.ab-sub{font-size-adjust:.5}
.ab-cb h3,.btn{font-size-adjust:none}

/* v10: About cards. Why-this-matters = compact centred cards with large gold circular icon; Find-inside = text overlaid on the image */
.ab-ico{display:block;width:clamp(76px,8vw,96px);height:auto;aspect-ratio:1;margin:0 auto 14px;mix-blend-mode:screen;border-radius:50%}
.ab-card--why{align-items:center;text-align:center;padding:clamp(24px,3vw,34px) clamp(20px,2.4vw,28px) clamp(26px,3vw,34px)}
.ab-card--why h3{margin:0 0 12px;font-size:.84rem;font-family:var(--sans);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.ab-card--why p{margin:0;color:var(--ivory);line-height:1.7;font-size:.98rem}
.ab-card--find{position:relative;aspect-ratio:4/5;justify-content:flex-end}
.ab-card--find .ab-img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.ab-card--find::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 22%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.94) 100%)}
.ab-ov{position:relative;z-index:2;text-align:center;padding:0 clamp(18px,2.2vw,26px) clamp(22px,2.6vw,30px)}
.ab-ov h3{margin:0 0 10px;font-size:.84rem;font-family:var(--sans);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-bright,#F0D07A)}
.ab-ov p{margin:0;color:#F3F0EA;line-height:1.65;font-size:.96rem}
.ab-closefig{margin:0}
.ab-closefig img{display:block;width:100%;height:auto;border:1px solid var(--gold-border,rgba(221,186,92,.3));border-radius:6px}
@media(max-width:900px){.ab-card--find{aspect-ratio:4/5;max-width:520px;width:100%;margin-left:auto;margin-right:auto}.ab-grid--why .ab-card{max-width:520px;width:100%;margin-left:auto;margin-right:auto}}
@media(max-width:420px){.ab-card--find{aspect-ratio:3/4}}
/* v10: scroll arrow on Home / About / Tools (same .read-cue as /read) - keep it clear of copy and of the burned-in video art */
.stage--tools .stage-copy{padding-bottom:clamp(54px,6vw,72px)}
@media(max-width:700px){.read-cue--edge{bottom:-22px}}

/* ================= v11: The Thought Library (public, read-only) ================= */
.tl-hero{position:relative;margin-top:64px;background:var(--black);isolation:isolate;overflow:hidden}
/* same treatment as the Home/About cinematic banners: full-bleed, soft top fade under the header, bottom gradient into the page black */
.tl-banner{display:block;position:relative;width:100%;height:clamp(300px,min(56.25vw,calc(100svh - 64px)),1000px)}
.tl-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.tl-banner::before{content:'';position:absolute;left:0;right:0;top:0;height:18%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.tl-banner::after{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(44px,9%,96px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.5) 50%,var(--black))}
/* tablet + desktop (>=600px): the banner carries the words visually; the real heading + copy stay in the DOM for screen readers and search */
@media(min-width:600px){
  .tl-herotext{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
/* phones (<600px): the artwork half of the banner (books, candle, chess knight) stays clearly visible - the picture is only cropped by CSS, never edited -
   and the live text sits below it, pulled up over the picture's bottom fade, so no artwork is covered */
@media(max-width:599px){
  /* v12.1: text sits ON the banner (grid stack); artwork shows below the copy, bottom-anchored */
  .tl-hero{display:grid;grid-template-columns:100%;text-align:center;padding-bottom:0}
  .tl-banner{grid-area:1/1;height:auto;min-height:100%;position:relative}
  .tl-banner img{position:absolute;right:0;bottom:0;left:auto;top:auto;width:auto;max-width:none;height:min(118vw,100%);object-fit:cover;object-position:100% 100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .tl-banner::before{height:78%;background:linear-gradient(180deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.72) 45%,rgba(0,0,0,0) 100%)}
  .tl-herotext{grid-area:1/1;position:relative;z-index:2;align-self:start;padding:clamp(26px,7vw,40px) clamp(18px,5.5vw,32px) clamp(228px,78vw,350px)}
}
.tl-brand{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--gold);margin-bottom:16px}
.tl-brand::after{content:'';display:block;width:min(240px,60%);height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.tl-h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,11vw,3rem);line-height:1.08;color:#F4DFB5;margin:0 0 18px;letter-spacing:.005em;text-shadow:0 2px 18px rgba(0,0,0,.85)}
.tl-hook{font-family:var(--serif);font-size:clamp(1.12rem,4.6vw,1.3rem);line-height:1.5;color:var(--ivory);max-width:26ch;margin:0 auto 22px;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.tl-desc{font-family:var(--serif);font-size:1rem;line-height:1.7;color:var(--ivory);max-width:38ch;margin:0 auto}
.tl-hero .read-cue{bottom:clamp(12px,2vw,24px)}
@media(max-width:599px){.tl-hero .read-cue{display:none}}

.tl-main{padding:clamp(8px,2vw,20px) 0 clamp(36px,5vw,64px)}
.tl-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 clamp(30px,4.4vw,52px)}
.tl-chip{font-family:var(--serif);font-size:.98rem;min-height:44px;padding:9px 20px;border-radius:999px;border:1px solid var(--gold-border,rgba(221,186,92,.4));background:rgba(0,0,0,.5);color:var(--ivory);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.tl-chip:hover{border-color:var(--gold-bright,#F0D07A)}
.tl-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0A0A0A}
.tl-chip:focus-visible,.tl-card:focus-visible,.tl-more .btn:focus-visible{outline:2px solid var(--gold-bright,#F0D07A);outline-offset:3px}
.tl-group[hidden],.tl-more[hidden]{display:none}
.tl-group{margin:0 0 clamp(34px,4.6vw,56px)}
.tl-cat{display:flex;align-items:center;gap:20px;margin:0 0 6px;font-family:var(--sans);font-weight:500;font-size:clamp(.82rem,1.6vw,1rem);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.tl-cat::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(221,186,92,.5),rgba(221,186,92,.08))}
.tl-cat-line{margin:0 0 20px;font-family:var(--serif);font-style:italic;color:var(--grey-light,#BDB7AA);font-size:.98rem;line-height:1.6}
.tl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
@media(max-width:1000px){.tl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.tl-grid{grid-template-columns:1fr}}
.tl-card{display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;min-height:88px;padding:18px 20px;border:1px solid var(--gold-border,rgba(221,186,92,.4));border-radius:8px;background:rgba(255,255,255,.015);color:var(--ivory);text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.tl-t{font-family:var(--serif);font-size:1.04rem;line-height:1.45;overflow-wrap:anywhere}
.tl-ar{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);transition:background .2s,color .2s}
.tl-ar svg{width:18px;height:18px}
.tl-card:hover,.tl-card:focus-visible{border-color:var(--gold-bright,#F0D07A);background:rgba(221,186,92,.06)}
.tl-card:hover .tl-ar,.tl-card:focus-visible .tl-ar{background:var(--gold);color:#0A0A0A}
@media(prefers-reduced-motion:no-preference){.tl-card:hover{transform:translateY(-2px)}}
.tl-more{text-align:center;margin-top:clamp(8px,2vw,24px)}
.tl-more .btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 30px;font-family:var(--serif);font-size:1rem;letter-spacing:.02em;text-transform:none}
/* detail */
.tl-detail{padding:calc(64px + clamp(28px,4vw,52px)) 0 clamp(56px,8vw,96px)}
.tl-detail .wrap{max-width:780px}
.tl-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--sans);font-size:.8rem;letter-spacing:.06em;color:var(--grey-light,#BDB7AA);margin-bottom:clamp(26px,4vw,40px)}
.tl-crumb a{color:var(--gold);text-decoration:none;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.tl-crumb a:hover,.tl-crumb a:focus-visible{text-decoration:underline}
.tl-dh1{font-family:var(--serif);font-weight:500;font-size:clamp(1.65rem,5.2vw,2.5rem);line-height:1.28;color:#F4DFB5;margin:0 0 clamp(22px,3vw,32px);text-wrap:balance}
.tl-caught{font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.tl-why{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,3.4vw,1.55rem);line-height:1.5;color:#EBCB7E;margin:0 0 clamp(30px,4.6vw,52px);padding:4px 0 4px 20px;border-left:2px solid var(--gold)}
.tl-body{border-top:1px solid var(--line);padding-top:clamp(28px,4vw,44px)}
.tl-psych h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,3vw,1.75rem);color:var(--ivory);margin:0 0 18px}
.tl-psych p,.tl-block p{font-family:var(--serif);color:var(--ivory);line-height:1.85;font-size:clamp(1.02rem,1.5vw,1.1rem);margin:0 0 1.15em;max-width:66ch}
.tl-key{padding:6px 0 6px 20px;border-left:2px solid var(--gold-border,rgba(221,186,92,.5));margin:1.6em 0 0!important;font-size:1.12rem!important}
.tl-key strong{color:#F4DFB5;font-weight:600}
.tl-block{margin-top:clamp(26px,3.6vw,38px);padding-top:clamp(20px,3vw,28px);border-top:1px solid var(--line)}
.tl-block h3,.tl-related h3{font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.tl-block p{margin:0}
.tl-block--q{padding:clamp(20px,3vw,28px);border:1px solid var(--gold-border,rgba(221,186,92,.4));border-radius:8px;background:rgba(221,186,92,.04)}
.tl-block--q p{font-size:clamp(1.12rem,2vw,1.28rem);color:#F4DFB5}
.tl-related{margin-top:clamp(30px,4vw,44px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--line)}
.tl-related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tl-related a{display:block;padding:14px 18px;min-height:44px;border:1px solid var(--gold-border,rgba(221,186,92,.4));border-radius:8px;color:var(--ivory);text-decoration:none;font-family:var(--serif);line-height:1.5;transition:border-color .2s,background .2s}
.tl-related a:hover,.tl-related a:focus-visible{border-color:var(--gold-bright,#F0D07A);background:rgba(221,186,92,.06);outline-offset:3px}
.tl-back{margin:clamp(34px,5vw,56px) 0 0;display:flex;flex-wrap:wrap;gap:12px}
.tl-back .btn{min-height:44px}

/* v11: the extra "The Thought Library" menu item needs more header room: header row may be wider than the page column, nav tightens in two steps, burger menu takes over below 1180px (was 960px) */
#hdr .wrap.hd{max-width:1480px}
@media(max-width:1180px){nav.main,.hd-cta .btn{display:none}.ntog{display:block}}
.tl-group{padding:0}
.tl-detail section,.tl-group{padding-top:0;padding-bottom:0}
.tl-block{padding-top:clamp(20px,3vw,28px)}
.tl-block--q{padding:clamp(20px,3vw,28px)}
.tl-related{padding-top:clamp(22px,3vw,30px)}
.tl-detail .tl-block{padding-top:clamp(20px,3vw,28px)}
.tl-detail .tl-block--q{padding:clamp(20px,3vw,28px)}
.tl-detail .tl-related{padding-top:clamp(22px,3vw,30px)}

/* v12: reflection under the banner, end quotation, Lora headings in the breakdowns */
.tl-reflect{padding:clamp(40px,6vw,76px) 0 clamp(36px,5vw,56px);text-align:center}
.tl-refl-h{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.25;color:#F4DFB5;margin:0 0 clamp(18px,2.6vw,26px)}
.tl-reflect p{font-family:var(--serif);color:var(--ivory);line-height:1.85;margin:0 0 1.1em;font-size:clamp(1.02rem,1.5vw,1.14rem)}
.tl-reflect p:nth-last-child(2){color:#F4DFB5;font-weight:600}
.tl-reflect p:last-child{color:var(--gold);margin:1.6em 0 0;font-size:1rem;font-style:italic}
.tl-endquote{padding:clamp(40px,6vw,76px) 0 clamp(56px,8vw,100px);text-align:center;border-top:1px solid var(--line)}
.tl-endquote blockquote{margin:0}
.tl-endquote p{font-family:var(--serif);font-style:italic;color:#F4DFB5;line-height:1.7;font-size:clamp(1.15rem,2.6vw,1.5rem);max-width:34em;margin:0 auto}
.tl-cat{font-family:var(--serif);font-weight:600;letter-spacing:.08em;font-size:clamp(.95rem,2vw,1.15rem)}
.tl-caught{font-family:var(--serif);font-weight:600;font-size:clamp(.95rem,2.2vw,1.05rem);letter-spacing:.08em}
.tl-psych h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.55rem,3.8vw,2.1rem);line-height:1.25;color:#F4DFB5;margin:0 0 20px}
.tl-block h3,.tl-related h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.2rem,2.8vw,1.45rem);line-height:1.3;letter-spacing:.005em;text-transform:none;color:#EBCB7E;margin:0 0 12px}
.tl-detail .tl-block{padding-top:clamp(24px,3.4vw,32px)}
.tl-block--q h3{color:#F4DFB5}

/* v13: desktop layered pop-out for a thought (>=1100px, fine pointer). One readable front panel, three darker offset layers behind it. Phones/tablets never get this. */
html.tl-pop-open{overflow:hidden;scrollbar-gutter:stable}
.tl-pop{position:fixed;inset:0;z-index:300;display:none}
@media(min-width:1100px) and (hover:hover) and (pointer:fine){
  .tl-pop{display:block}
  .tl-pop-bd{position:absolute;inset:0;background:rgba(5,5,8,.82);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:0;transition:opacity .4s ease}
  .tl-pop-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(72px,10vh,110px) 40px 40px}
  .tl-pop-wrap{position:relative;width:min(880px,calc(100vw - 160px));max-height:calc(100vh - clamp(190px,26vh,250px));display:flex}
  .tl-pop-layer,.tl-pop-panel{border-radius:10px;border:1px solid rgba(221,186,92,.3)}
  .tl-pop-layer{position:absolute;inset:0;background:#050405;opacity:0;transform:translate(0,0) scale(.9);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease;pointer-events:none}
  .tl-pop-layer.l1{background:#050405;border-color:rgba(221,186,92,.26)}
  .tl-pop-layer.l2{background:#050405;border-color:rgba(221,186,92,.18)}
  .tl-pop-layer.l3{background:#050405;border-color:rgba(221,186,92,.11)}
  .tl-pop-panel{position:relative;flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#000000,#000000);padding:clamp(38px,4.4vw,58px) clamp(34px,5vw,64px) clamp(34px,4vw,48px);box-shadow:0 0 0 1px rgba(221,186,92,.08),0 0 46px rgba(221,186,92,.13),0 34px 90px rgba(0,0,0,.7);opacity:0;transform:translate(calc(var(--ox,0px)*.3),calc(var(--oy,0px)*.3 + 30px)) scale(.9);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s ease;outline:none}
  .tl-pop.in .tl-pop-bd{opacity:1}
  .tl-pop.in .tl-pop-panel{opacity:1;transform:none}
  .tl-pop.in .tl-pop-layer{opacity:1}
  .tl-pop.in .tl-pop-layer.l1{transform:translate(-26px,-20px) scale(.985);transition-delay:.07s}
  .tl-pop.in .tl-pop-layer.l2{transform:translate(28px,-40px) scale(.965);transition-delay:.13s}
  .tl-pop.in .tl-pop-layer.l3{transform:translate(-10px,-62px) scale(.94);transition-delay:.19s}
  .tl-pop:not(.in) .tl-pop-panel,.tl-pop:not(.in) .tl-pop-layer{transition-duration:.3s;transition-delay:0s}
  .tl-pop-x{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--gold-border,rgba(221,186,92,.45));background:rgba(10,10,14,.85);color:var(--gold);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
  .tl-pop-x:hover,.tl-pop-x:focus-visible{background:var(--gold);color:#0A0A0A;border-color:var(--gold-bright,#F0D07A)}
  .tl-pop-x:focus-visible,.tl-pop-foot .btn:focus-visible,.tl-pop .tl-related a:focus-visible{outline:2px solid var(--gold-bright,#F0D07A);outline-offset:3px}
  .tl-pop .tl-detail{padding:0}
  .tl-pop-cat{font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 48px 16px 0}
  .tl-pop .tl-dh1{font-size:clamp(1.55rem,2.4vw,2.1rem);margin-right:40px}
  .tl-pop .tl-why{margin-bottom:clamp(24px,3vw,36px)}
  .tl-pop .tl-body{padding-top:clamp(22px,3vw,32px)}
  .tl-pop-foot{margin:clamp(30px,4vw,44px) 0 0}
  .tl-pop-foot .btn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){
  .tl-pop-bd,.tl-pop-layer,.tl-pop-panel{transition:none!important;transform:none!important}
  .tl-pop-layer{opacity:1}
  .tl-pop.in .tl-pop-layer.l1{transform:translate(-26px,-20px) scale(.985)!important}
  .tl-pop.in .tl-pop-layer.l2{transform:translate(28px,-40px) scale(.965)!important}
  .tl-pop.in .tl-pop-layer.l3{transform:translate(-10px,-62px) scale(.94)!important}
}


/* =====================================================================
   v18 — LIGHT reading theme, paid book reader only.
   Everything below is scoped to #memberReader[data-rtheme="light"], an element that wraps only the
   reader. Dark (the default) has no rules here, so it renders exactly as in v17. Nothing outside
   #memberReader is selected, and nothing is set on html/body.
   Approved palette (no other colours):
     page #F4E8D9 · text/quotes #291A18 · large headings + gold accents #AC7D35
     small labels/metadata #70544D · dividers/borders rgba(172,125,53,.5)
   ===================================================================== */
#memberReader[data-rtheme="light"]{
  background:#F4E8D9;color:#291A18;color-scheme:light;
  padding:6px clamp(14px,3vw,30px) 30px;border-radius:2px
}
#memberReader[data-rtheme="light"] .mbar{border-bottom-color:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .eyebrow{color:#70544D}
#memberReader[data-rtheme="light"] .mbar .h-md{color:#4A101B;font-weight:700}  /* bold keeps it "large text" (≥18.66px bold) for AA at every screen size */
#memberReader[data-rtheme="light"] #readPct{color:#291A18!important} /* beats the inline colour on the element */
#memberReader[data-rtheme="light"] .cap{color:#70544D}
#memberReader[data-rtheme="light"] .ring2 .bg{stroke:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .ring2 .fg{stroke:#AC7D35}
/* chapter list / mobile chapter row */
#memberReader[data-rtheme="light"] .chaplist{border-left-color:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .chaplist button{color:#70544D}
#memberReader[data-rtheme="light"] .chaplist button:hover{color:#291A18}
#memberReader[data-rtheme="light"] .chaplist button.on{color:#291A18;font-weight:600}
#memberReader[data-rtheme="light"] .chaplist button::before{background:#AC7D35}
#memberReader[data-rtheme="light"] .chaplist button > span[style]{opacity:1!important}  /* inline opacity:.6 would drop the label below AA */
#memberReader[data-rtheme="light"] .chaplist button > span[style*="color"]{color:#70544D!important}  /* "read" dot: text glyph, so the AA label gold */
@media(max-width:960px){
  #memberReader[data-rtheme="light"] .chaplist{border-bottom-color:rgba(172,125,53,.5)}
  #memberReader[data-rtheme="light"] .chaplist button{border-color:rgba(172,125,53,.5)}
  #memberReader[data-rtheme="light"] .chaplist button.on{border-color:#AC7D35}
}
/* the page */
#memberReader[data-rtheme="light"] .readpane p{color:#291A18}
#memberReader[data-rtheme="light"] .readpane h1.booktitle{color:#4A101B}
#memberReader[data-rtheme="light"] .readpane p.booksub{color:#70544D}
#memberReader[data-rtheme="light"] .readpane h2,
#memberReader[data-rtheme="light"] .readpane h2.chapline{color:#4A101B}
#memberReader[data-rtheme="light"] .readpane h2{border-bottom-color:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .readpane h2.chapline{border-bottom:none}
#memberReader[data-rtheme="light"] .readpane h3{color:#4A101B}
#memberReader[data-rtheme="light"] .readpane h4{color:#291A18}
#memberReader[data-rtheme="light"] .readpane .chap-body > .eyebrow{color:#70544D}
#memberReader[data-rtheme="light"] .readpane p.quoteline{color:#291A18}
#memberReader[data-rtheme="light"] .readpane blockquote.entry{color:#291A18;border-left-color:#AC7D35}
#memberReader[data-rtheme="light"] .readpane li{color:#291A18}
#memberReader[data-rtheme="light"] .readpane li::before{color:#4A101B}
#memberReader[data-rtheme="light"] .readpane strong{color:#291A18}
#memberReader[data-rtheme="light"] .readpane em{color:#291A18}
#memberReader[data-rtheme="light"] .readpane .readnav{border-top-color:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .readpane .readnav .tlink{color:#70544D}
#memberReader[data-rtheme="light"] .readpane .readnav .tlink:hover{color:#291A18}
#memberReader[data-rtheme="light"] .readpane .mdtable th,
#memberReader[data-rtheme="light"] .readpane .mdtable td{border-color:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .readpane .mdtable thead th{background:rgba(172,125,53,.16);color:#291A18;font-weight:600}
#memberReader[data-rtheme="light"] .readpane .mdtable tbody th{color:#291A18;font-weight:600}
#memberReader[data-rtheme="light"] .readpane .mdtable tbody tr:nth-child(even){background:rgba(29,26,23,.04)}
#memberReader[data-rtheme="light"] .readpane .readmark{background:linear-gradient(90deg,rgba(172,125,53,.24),transparent);box-shadow:inset 2px 0 0 #AC7D35}
body.audio-only #memberReader[data-rtheme="light"] .readpane .chap-body::after{color:#70544D}
/* Dark | Light and Pages | Scroll */
#memberReader[data-rtheme="light"] .pg-mode{border-color:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .pg-mode button{color:#70544D}
#memberReader[data-rtheme="light"] .pg-mode button:hover{color:#291A18}
#memberReader[data-rtheme="light"] .pg-mode button[aria-pressed=true]{color:#291A18;background:rgba(172,125,53,.16);box-shadow:inset 0 0 0 1px #AC7D35}  /* charcoal on a tint: 4.49:1 on solid #AC7D35 would miss AA for small text */
#memberReader[data-rtheme="light"] .pg-mode button:focus-visible,
#memberReader[data-rtheme="light"] .pg-btn:focus-visible,
#memberReader[data-rtheme="light"] .audiobtn:focus-visible,
#memberReader[data-rtheme="light"] .chip:focus-visible,
#memberReader[data-rtheme="light"] .chaplist button:focus-visible{outline:2px solid #70544D;outline-offset:2px}
/* page footer */
#memberReader[data-rtheme="light"] .pg-btn{color:#70544D;border-color:#AC7D35}
#memberReader[data-rtheme="light"] .pg-btn:hover:not([disabled]){border-color:#70544D;background:rgba(172,125,53,.12)}
#memberReader[data-rtheme="light"] .pg-count{color:#70544D}
#memberReader[data-rtheme="light"] .pg-prog{background:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .pg-prog i{background:#AC7D35}
/* audio bar */
#memberReader[data-rtheme="light"] .audiobar{background:#F4E8D9;border-color:rgba(172,125,53,.5);backdrop-filter:none}
#memberReader[data-rtheme="light"] .audiobtn{color:#291A18;border-color:#AC7D35}
#memberReader[data-rtheme="light"] .audiobtn:hover{border-color:#70544D;background:rgba(172,125,53,.12)}
#memberReader[data-rtheme="light"] .audiobtn.play{background:#AC7D35;color:#291A18;border-color:#AC7D35}
#memberReader[data-rtheme="light"] .audiobtn.play:hover{box-shadow:0 6px 20px -8px rgba(29,26,23,.45)}
#memberReader[data-rtheme="light"] .audioprog{background:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .audioprog .fill{background:#AC7D35}
#memberReader[data-rtheme="light"] .audioprog .knob{background:#AC7D35;box-shadow:0 0 0 3px rgba(172,125,53,.25)}
#memberReader[data-rtheme="light"] .audiotime,
#memberReader[data-rtheme="light"] .audiometa label,
#memberReader[data-rtheme="light"] .audionote{color:#70544D}
#memberReader[data-rtheme="light"] .audiometa{border-top-color:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .audiometa select{color:#291A18;background-color:#F4E8D9;border-color:#AC7D35}
#memberReader[data-rtheme="light"] .audiometa select:focus{border-color:#70544D;outline:2px solid #70544D;outline-offset:1px}
#memberReader[data-rtheme="light"] .audiovol input[type=range]{background:rgba(172,125,53,.5)}
#memberReader[data-rtheme="light"] .audiovol input[type=range]::-webkit-slider-thumb{background:#AC7D35}
#memberReader[data-rtheme="light"] .audiovol input[type=range]::-moz-range-thumb{background:#AC7D35;border:0}
#memberReader[data-rtheme="light"] .chip{color:#70544D;border-color:#AC7D35}
#memberReader[data-rtheme="light"] .chip:hover{color:#291A18;border-color:#70544D;background:rgba(172,125,53,.12)}
/* watermark: multiply, so the faint classic-gold mark darkens the parchment instead of lightening it */
#memberReader[data-rtheme="light"] #readPane .wm-layer{mix-blend-mode:multiply;opacity:.2}
@media (max-width:700px){ #memberReader[data-rtheme="light"] #readPane .wm-layer{opacity:.24} }
@media print{ #memberReader[data-rtheme="light"] #readPane .wm-layer{opacity:.22} }


/* Optional GA4 choice panel — visually isolated from existing page components. */
.mott-analytics-choice {
  position: fixed;
  inset: auto 14px 14px;
  z-index: 9998;
  width: min(630px, calc(100% - 28px));
  margin-inline: auto;
  padding: 19px 22px 18px;
  color: #F4E8D9;
  background: #241d1b;
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgb(0 0 0 / 45%);
  font-family: inherit;   /* v27: Lora (was Inter) */
}
.mott-analytics-choice__heading {
  margin: 0 0 7px;
  color: #F4E8D9;
  font-family: Lora, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
}
.mott-analytics-choice__copy {
  margin: 0 0 14px;
  color: #e8dfd3;
  font-size: .85rem;
  line-height: 1.6;
}
.mott-analytics-choice a { color: #edcf9a; text-decoration: underline; }
.mott-analytics-choice__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mott-analytics-choice__actions button {
  flex: 1 1 185px;
  min-height: 43px;
  padding: 10px 14px;
  cursor: pointer;
  color: #f3ede2;
  background: #3a302c;
  border: 1px solid #a78b58;
  border-radius: 5px;
  font-family: inherit;   /* v27: Lora (was Inter) */
  font-size: .85rem;
  font-weight: 500;
}
.mott-analytics-choice__actions button:hover,
.mott-analytics-choice__actions button:focus-visible { background: #574432; }
.mott-analytics-choice button:focus-visible,
.mott-analytics-settings:focus-visible { outline: 2px solid #e9c58a; outline-offset: 3px; }
.mott-analytics-settings {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.mott-analytics-settings:hover { text-decoration: underline; }
.mott-analytics-settings--floating {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 9997;
  color: #f3ede2;
  background: #302a25;
  padding: 7px 10px;
  border: 1px solid var(--gold-border);
  border-radius: 4px;
  font-size:.8rem;
}
@media (max-width: 480px) {
  .mott-analytics-choice { inset: auto 10px 10px; width: calc(100% - 20px); padding: 15px; }
  .mott-analytics-choice__actions { gap: 8px; }
  .mott-analytics-choice__actions button { flex-basis: 100%; }
}

/* ---- v26: personal result reports, Control Plan summary cards and priorities ---- */
.rpt{display:block}
.rpt .rpt-h{font-size:1.45rem;color:var(--gold-lt);margin:34px 0 14px}
.rpt .rpt-h:first-child{margin-top:6px}
.rpt .rpt-sub{margin:-6px 0 12px;color:var(--grey)}
.rpt .rpt-card{border:1px solid var(--line);background:rgba(255,255,255,.017);padding:clamp(16px,3vw,26px);margin:16px 0}
.rpt .rpt-card h4{font-size:1.25rem;color:var(--ivory);margin-bottom:4px}
.rpt .rpt-level{color:var(--gold-text);margin-bottom:10px}
.rpt .rpt-lead{color:var(--ivory);margin-bottom:14px}
.rpt .rpt-why{color:var(--grey);margin:16px 0 10px}
.rpt .rpt-why b{color:var(--gold-lt);font-weight:500}
.rpt .rpt-ref{margin:12px 0}
.rpt .rpt-if{margin-top:16px}
.rpt h5.eyebrow{margin:16px 0 6px}
.rpt .rpt-card ul:not(.typebox ul){display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.rpt .rpt-card ul:not(.typebox ul) li{font-size:.9rem;color:var(--grey);padding-left:14px;position:relative}
.rpt .rpt-card ul:not(.typebox ul) li::before{content:'—';position:absolute;left:0;color:var(--gold-text)}
.rpt .rpt-chain{list-style:none;display:grid;gap:6px;margin:6px 0 14px;padding:0}
.rpt .rpt-chain li{font-size:.9rem;color:var(--grey);border-left:2px solid var(--gold-border);padding-left:12px}
.rpt .rpt-chain b{color:var(--gold-lt);font-weight:500;margin-right:6px}
.rpt .rpt-combo,.rpt .rpt-check{border:1px solid var(--gold-border);padding:16px 18px;margin:18px 0;background:rgba(221,186,92,.04)}
.rpt .rpt-combo h4,.rpt .rpt-check h4{font-size:1.1rem;color:var(--gold-lt);margin-bottom:8px}
.rpt .rpt-check ul{display:flex;flex-direction:column;gap:6px}
.rpt .rpt-check li{font-size:.9rem;color:var(--ivory)}
.rpt .rpt-strengths{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0}
.rpt .rpt-strengths li{font-size:.92rem;color:var(--grey)}
.rpt .rpt-strengths b{color:var(--ivory);font-weight:500}
.rpt .rpt-note{margin:12px 0}
.rpt .rpt-disc{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}
.rpt > ul{display:flex;flex-direction:column;gap:6px;padding:0;list-style:none}
.rpt > ul li{font-size:.92rem;color:var(--grey);padding-left:14px;position:relative}
.rpt > ul li::before{content:'—';position:absolute;left:0;color:var(--gold-text)}

.plantips{margin-top:6px}
.plantip{font-size:.8rem;color:var(--gold-text);line-height:1.5;margin:4px 0 0}
.plantip::before{content:'Tip · ';letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}

.sumhead{font-size:1.4rem;color:var(--gold-lt);margin:34px 0 8px}
.sumgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1023px){.sumgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sumgrid{grid-template-columns:1fr}}
.sumcard{border:1px solid var(--line);background:rgba(255,255,255,.017);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.sumcard h4{font-size:1.05rem;color:var(--ivory);overflow-wrap:anywhere}
.sumcard .sumstatus{color:var(--muted);margin:0}
.sumcard .sumresult{color:var(--gold-lt);font-family:var(--serif);font-size:1.02rem;overflow-wrap:anywhere}
.sumcard .sumrow{font-size:.84rem;color:var(--grey);line-height:1.55;margin:0;overflow-wrap:anywhere}
.sumcard .sumrow .eyebrow{display:block;margin-bottom:2px}
.sumcard .tool-actions{margin-top:auto;padding-top:6px}
.sumcard-empty{opacity:.9}
.priolist{list-style:none;padding:0;display:grid;gap:12px;counter-reset:prio;margin-top:12px}
.priocard{border:1px solid var(--gold-border);padding:16px 18px 16px 52px;position:relative;background:rgba(221,186,92,.04)}
.priocard::before{counter-increment:prio;content:counter(prio);position:absolute;left:16px;top:14px;font-family:var(--serif);font-size:1.5rem;color:var(--gold-lt)}
.priocard h4{font-size:1.05rem;color:var(--ivory);margin-bottom:4px}
.priocard p{font-size:.88rem;color:var(--grey);margin:4px 0}
.priocard .priofrom{color:var(--gold-text)}
.sumdisc{margin-top:22px;color:var(--muted)}
@media print{.sumgrid{grid-template-columns:repeat(2,1fr)}.plantips{display:none}}

/* v26: discreet, repeated, semi-transparent copyright mark behind assessment questions and personal
   results. It sits above the text without covering it (pointer-events:none, low opacity), names no
   member and carries no email or token. It is a visual deterrent only. */
[data-protect]{position:relative}
.rpt[data-protect]::after,#asBody[data-protect]::after,.panel[data-protect]::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--wm-tile);background-repeat:repeat;opacity:.07;mix-blend-mode:screen;overflow:hidden
}
@media (max-width:700px){.rpt[data-protect]::after,#asBody[data-protect]::after,.panel[data-protect]::after{background-size:340px 209px;opacity:.09}}
@media print{.rpt[data-protect]::after,#asBody[data-protect]::after,.panel[data-protect]::after{opacity:.14}}

/* v26: a worksheet heading that would be stranded at the bottom of a page starts its own page (set only for that opening). */
#readPane.paged .chap-body .ws-newpage{break-before:column}

/* v26.1: "Cookie settings" now sits in the footer's always-visible bottom row (beside the copyright line) instead of inside the
   collapsed "Legal & Policies" group. Same button, same behaviour; it only needs to read as a quiet footer link there. */
.fbot .mott-analytics-settings--footer {
  color: var(--grey);
  font-size:.85rem;
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold-border);
  min-height: 32px;
  padding: 4px 2px;
}
.fbot .mott-analytics-settings--footer:hover { color: var(--ivory); text-decoration-color: var(--gold); }

/* ===== v27 — Personal Trading Control Plan: desktop workspace width (this page only; the reader and other reading pages stay narrow) ===== */
.wrap--plan{max-width:1180px}
@media (min-width:720px){#v-plan .planfields{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* the existing two-column form, now with room to breathe */
#v-plan .plantip{max-width:62ch;overflow-wrap:anywhere}
#v-plan .sumcard{padding:22px 22px 20px;gap:10px}
#v-plan .sumcard .sumrow{font-size:.9rem;line-height:1.65}
#v-plan .priocard{padding:20px 24px 20px 58px}
#v-plan .priocard p{font-size:.92rem;max-width:78ch}
.planstory{margin:34px 0 8px;border:1px solid var(--gold-border);border-left-width:3px;background:rgba(221,186,92,.035);padding:clamp(20px,3vw,30px) clamp(20px,3.4vw,36px)}
.planstory h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:12px}
.planstory p{font-size:1.02rem;line-height:1.85;color:var(--ivory);max-width:74ch;margin:0 0 .9em}
.planstory p:last-of-type{margin-bottom:0}
.planstory .storynote{font-size:.8rem;color:var(--muted);margin-top:14px;max-width:74ch}
@media print{.planstory{break-inside:avoid}}

/* ===== v28 journaling & self-reflection (Lora inherited; burgundy joins the black/gold/ivory identity) ===== */
:root{--burgundy:#8A3B43;--burgundy-lt:#B5646C}
#hubCards[hidden],#emoHost[hidden]{display:none}
#emoHost,#emoHost *{font-family:var(--sans)}
.jstatus{font-size:.8rem;color:var(--muted);min-height:1em}
.jstatus.ok{color:#8FA87E}.jstatus.err{color:#D58C7C;max-width:46ch}.jstatus.saving,.jstatus.dirty,.jstatus.wait{color:var(--gold-text)}
.jsec{font-size:1.05rem;color:var(--gold);margin:26px 0 12px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.jsec:first-child{margin-top:0}
.jsavebar{align-items:center;margin-top:22px}
.jsaved{font-size:.85rem;color:#8FA87E}
.jcheck{display:flex;gap:10px;align-items:center;margin:6px 0 14px;color:var(--ivory);cursor:pointer}
.jcheck input{accent-color:var(--gold);width:18px;height:18px}
.jprompt{font-style:italic;margin-top:18px}
.jtrades{display:grid;gap:10px}
.jtrade{border:1px solid rgba(221,186,92,.2);border-radius:10px;background:rgba(255,255,255,.015)}
.jtrade.open{border-color:rgba(221,186,92,.4)}
.jtradehead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;width:100%;text-align:left;padding:12px 14px;color:var(--ivory)}
.jhalf{padding:4px 16px 16px;border-top:1px solid rgba(221,186,92,.14)}
.jhalf h5{font-size:.95rem;color:var(--gold-lt);margin:14px 0 4px}
.jbadge{font-size:.8rem;letter-spacing:.06em;padding:3px 9px;border-radius:20px;border:1px solid rgba(221,186,92,.3);color:var(--gold-text)}
.jbadge.ok{border-color:rgba(143,168,126,.5);color:#8FA87E}
.jbadge.wait{border-color:rgba(138,59,67,.7);color:var(--burgundy-lt)}
.jbadge.draft{border-style:dashed}
.minitag.wait{border-color:rgba(138,59,67,.7);color:var(--burgundy-lt)}
.jradio{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.jr{padding:7px 14px;border:1px solid rgba(221,186,92,.25);border-radius:20px;font-size:.8rem;color:var(--muted);transition:color .3s,border-color .3s,background .3s}
.jr:hover{border-color:var(--gold);color:var(--gold-lt)}
.jr.on{background:rgba(221,186,92,.16);border-color:var(--gold);color:var(--gold-lt)}
.addtag{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.addtag input{padding:6px 10px;font-size:.8rem;max-width:170px}
.chip.danger{color:#D58C7C}
.jglance{margin:0 0 30px}
.jstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.jstat{border:1px solid rgba(221,186,92,.2);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.015)}
.jstat b{font-size:1.35rem;color:var(--gold-lt);font-weight:600}
.jpanel{border:1px solid rgba(221,186,92,.16);border-radius:10px;padding:14px 16px;margin:12px 0;min-width:0}
.jpanel h4{font-size:.9rem;color:var(--gold);margin-bottom:10px}
.jpanel ul{margin:0;padding-left:1.1em;display:grid;gap:8px;line-height:1.6;font-size:.88rem}
.jpos{border-color:rgba(143,168,126,.35)}.jdev{border-color:rgba(138,59,67,.55)}
.jcols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.jcols{grid-template-columns:1fr}}
.jb{display:grid;grid-template-columns:minmax(80px,28%) 1fr auto;gap:10px;align-items:center;margin:7px 0;font-size:.8rem}
.jt{height:8px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.jt i{display:block;height:100%;background:var(--gold);border-radius:4px}
.jv{color:var(--muted);font-size:.8rem;white-space:nowrap}
.jstack{display:flex;height:12px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.07)}
.jstack .y{background:#8FA87E}.jstack .p{background:var(--gold)}.jstack .n{background:var(--burgundy)}
.jlegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.jlegend .y{color:#8FA87E}.jlegend .p{color:var(--gold-text)}.jlegend .n{color:var(--burgundy-lt)}
.jshift{display:grid;grid-template-columns:1fr auto auto;gap:12px;font-size:.82rem;padding:6px 0;border-bottom:1px solid rgba(221,186,92,.1)}
.jtable{width:100%;border-collapse:collapse;font-size:.82rem}
.jtable th,.jtable td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(221,186,92,.12);vertical-align:top}
.jtable thead th{color:var(--gold);font-weight:600}
.jtable tbody th{font-weight:500;color:var(--ivory)}
@media(max-width:620px){.jtable{display:block;overflow-x:auto}}
.jhow{margin:12px 0;font-size:.82rem;color:var(--muted)}
.jhow summary{cursor:pointer;color:var(--gold-text)}
.jhow p{line-height:1.65;margin:8px 0}
.jweeknav{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.jmonthbar{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin-bottom:18px}
.jlink{color:var(--gold-text);text-decoration:underline;margin:2px 10px 2px 0;font-size:.82rem}
.jtip{border-left:2px solid var(--gold);padding:2px 0 2px 12px;margin:10px 0}
.jbook,.jnote{font-size:.82rem;color:var(--muted)}
.jquote{margin:6px 0 8px;padding-left:10px;border-left:2px solid rgba(221,186,92,.35);color:var(--muted);font-size:.8rem}
.jhid{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;font-size:.8rem}
.icard.auto{border-style:dashed}
.icard .ibar select{max-width:150px;font-size:.8rem}
.jcompare{margin-top:30px}
@media(max-width:480px){.jb{grid-template-columns:1fr auto}.jb .jt{grid-column:1/-1;order:3}}

/* ===== v29: journal integrity UI, trade form, charts, five-column Insights board ===== */
:root{--jc1:#D2A23A;--jc2:#4AA8DB}
:root[data-site-theme="light"]{--jc1:#AC7D35;--jc2:#4A101B}
.jerr{border-color:rgba(213,140,124,.6)}
.jerr p{margin:8px 0 14px;line-height:1.7}
.jstatus{font-size:.9rem}
.jstatus.err{max-width:60ch;line-height:1.5}
.jtwo{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:6px 16px 16px}
@media(max-width:900px){.jtwo{grid-template-columns:1fr}}
.jhalf h5{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--gold-lt);margin:10px 0 4px}
.jradio,.jscale{display:flex;flex-wrap:wrap;gap:8px}
.jr,.js{min-height:44px;padding:8px 14px;border:1px solid rgba(221,186,92,.35);border-radius:10px;color:var(--ivory);font-size:.95rem;line-height:1.3;text-align:left}
.js{min-width:44px;text-align:center;padding:8px 0}
.jr:hover,.js:hover{border-color:var(--gold)}
.jr.on,.js.on{background:rgba(221,186,92,.18);border-color:var(--gold);color:var(--gold-lt);font-weight:600}
.jscn{margin-top:6px}
.jcheck{display:flex;gap:10px;align-items:center;margin:12px 0;font-size:1rem}
.jcheck input{width:20px;height:20px}
.jsec{font-size:1.25rem}
/* charts */
.jchart{display:grid;gap:10px;margin:10px 0}
.jrow,.jrow2{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:12px;align-items:center;position:relative;border-radius:8px;padding:2px 4px}
.jrow:focus-visible,.jrow2:focus-visible,.jpt:focus-visible,.jcol:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jrl{font-size:.95rem;color:var(--ivory);overflow-wrap:anywhere}
.jrt{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.jpair{display:grid;gap:5px}
.jrt i{display:block;height:100%;border-radius:5px}
.s1{background:var(--jc1)}.s2{background:var(--jc2)}
.jrv,.jrv2{font-size:.9rem;color:var(--grey);white-space:nowrap}
.jrv2{display:grid;gap:1px;text-align:right}.jrv2 b{font-weight:500;color:var(--ivory)}
.jlegend2{display:flex;gap:18px;flex-wrap:wrap;font-size:.9rem;color:var(--ivory);margin:6px 0}
.jlegend2 i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.jlegend2 .k1{background:var(--jc1)}.jlegend2 .k2{background:var(--jc2)}
.jrow[data-tip]:hover::after,.jrow[data-tip]:focus::after,.jrow2[data-tip]:hover::after,.jrow2[data-tip]:focus::after{content:attr(data-tip);position:absolute;left:150px;bottom:100%;z-index:5;max-width:min(420px,90%);padding:8px 12px;border:1px solid var(--gold-border);border-radius:8px;background:#000;color:var(--ivory);font-size:.85rem;line-height:1.45;box-shadow:0 6px 22px rgba(0,0,0,.5);pointer-events:none}
.jline{width:100%;overflow:hidden}.jline svg{width:100%;height:auto;display:block}
.jgrid{stroke:rgba(255,255,255,.12);stroke-width:1}
.jaxis{fill:var(--grey);font-size:12px;font-family:var(--sans)}.jmiss{fill:var(--muted);font-style:italic}
.jval{fill:var(--ivory);font-size:13px;font-weight:600;font-family:var(--sans)}
.jpath{fill:none;stroke:var(--jc1);stroke-width:2.5;stroke-linejoin:round}
.jpt circle:not(.jhit){fill:var(--jc1);stroke:#000;stroke-width:2}.jpt .jhit,.jcol .jhit{fill:transparent}
.jcol rect:not(.jhit){fill:var(--jc1)}
.jpt:hover circle:not(.jhit),.jpt:focus circle:not(.jhit){r:8}
.jcol:hover rect:not(.jhit),.jcol:focus rect:not(.jhit){opacity:.8}
.jtv summary{font-size:.9rem}
.jtvw{overflow-x:auto;max-width:100%}
.jtable{font-size:.95rem}
.jhow{font-size:.95rem}
.jcharts{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.jcharts{grid-template-columns:1fr}}
.jmonthbar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 18px}
.jweeknav{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.jpanel,.icard,.jstat,.jtip,.jtrade{overflow-wrap:anywhere}
/* Insights: five categories side by side on wide screens; deliberate steps below */
.board.jboard{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.jboard .col{min-width:0;padding:14px 12px}
.jboard .col h4{font-size:1.02rem;display:flex;justify-content:space-between;gap:8px;overflow-wrap:anywhere}
.jboard .icard p{font-size:.95rem;line-height:1.6}
.jboard .ibar{display:flex;flex-wrap:wrap;gap:6px}
.jboard .ibar select{max-width:100%}
@media(max-width:1279px){.board.jboard{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){.board.jboard{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.board.jboard{grid-template-columns:1fr}}
/* wide member interface: journal board may exceed the text column */
#emoHost{width:min(1280px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}
@media(max-width:700px){#emoHost{width:calc(100vw - 32px)}}

/* ===== v29: global Dark / Light / System theme =====
   Dark (default): true #000000 page, warm ivory text, restrained gold — the :root tokens above.
   Light: warm ivory/off-white page, dark charcoal text, muted accessible gold.
   Selected by html[data-site-theme]; the paid book reader is unaffected (own [data-rtheme] rules are more specific and set their own colours). */
.themesw{display:inline-flex;border:1px solid var(--gold-border);border-radius:999px;padding:2px;gap:2px;margin-right:10px;vertical-align:middle}
.themesw button{min-height:32px;padding:4px 12px;border-radius:999px;font-size:.85rem;line-height:1.2;color:var(--grey);font-weight:500;letter-spacing:0}
.themesw button:hover{color:var(--ivory)}
.themesw button[aria-pressed="true"]{background:var(--gold);color:#0A0A0A;font-weight:600}
.themesw:focus-within{outline:none}.themesw button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.themesw--menu{margin:22px 0 0;display:flex;width:max-content}
.themesw--float{position:fixed;right:12px;bottom:12px;z-index:200;background:var(--black)}
:root[data-site-theme="light"]{
  --black:#F4E8D9; --deep:#F4E8D9; --line:rgba(172,125,53,.28);
  --ivory:#291A18; --grey:#70544D; --muted:#70544D;
  --gold-primary:#4A101B; --gold-bright:#4A101B; --gold-highlight:#D4A64B; --gold-deep:#AC7D35; --gold-text:#4A101B;
  --gold-border:rgba(172,125,53,.5); --gold-glow:rgba(172,125,53,.18);
  --burgundy:#500D19; --burgundy-lt:#4A101B; color-scheme:light}
:root[data-site-theme="light"] body{background:var(--black);color:var(--ivory)}
:root[data-site-theme="light"] ::selection{background:rgba(172,125,53,.25);color:#000}
:root[data-site-theme="light"] .btn-gold,:root[data-site-theme="light"] .ptopt.on,:root[data-site-theme="light"] .yn button.sel,:root[data-site-theme="light"] .themesw button[aria-pressed="true"]{background:#500D19;color:#FFF3E5;border-color:#500D19}
:root[data-site-theme="light"] .btn-ghost{border-color:#500D19;color:var(--ivory)}
:root[data-site-theme="light"] header#hdr,:root[data-site-theme="light"] header#hdr.solid{background:rgba(244,232,217,.96)}
:root[data-site-theme="light"] #mnav{background:#F4E8D9}
:root[data-site-theme="light"] footer{background:var(--black)}
:root[data-site-theme="light"] .panel,:root[data-site-theme="light"] .jstat,:root[data-site-theme="light"] .jtrade,:root[data-site-theme="light"] .col,:root[data-site-theme="light"] .icard,:root[data-site-theme="light"] .jpanel{background:#FFF3E5;border-color:rgba(172,125,53,.3)}
:root[data-site-theme="light"] input,:root[data-site-theme="light"] select,:root[data-site-theme="light"] textarea{background:#FFF8EF;color:#291A18;border-color:rgba(172,125,53,.45)}
:root[data-site-theme="light"] .jgrid{stroke:rgba(0,0,0,.14)}
:root[data-site-theme="light"] .jrt,:root[data-site-theme="light"] .jstack{background:rgba(0,0,0,.09)}
:root[data-site-theme="light"] .jpt circle:not(.jhit){stroke:#fff}
:root[data-site-theme="light"] .jrow[data-tip]:hover::after,:root[data-site-theme="light"] .jrow[data-tip]:focus::after,:root[data-site-theme="light"] .jrow2[data-tip]:hover::after,:root[data-site-theme="light"] .jrow2[data-tip]:focus::after{background:#FFF8EF;color:#291A18}
:root[data-site-theme="light"] .jr,:root[data-site-theme="light"] .js{color:#291A18;border-color:rgba(172,125,53,.5)}
:root[data-site-theme="light"] .jr.on,:root[data-site-theme="light"] .js.on{background:#500D19;color:#FFF3E5}
:root[data-site-theme="light"] .jstack .y{background:#4F6B3F}:root[data-site-theme="light"] .jlegend .y,:root[data-site-theme="light"] .jstatus.ok,:root[data-site-theme="light"] .jbadge.ok{color:#3F5A31}
:root[data-site-theme="light"] .jstatus.err{color:#9A3A2A}
/* media sections keep their dark scheme (photo/video overlays, text on imagery) */
:root[data-site-theme="light"] .hero--video,:root[data-site-theme="light"] .stage,:root[data-site-theme="light"] .tl-hero,:root[data-site-theme="light"] .ab-slot,:root[data-site-theme="light"] #loader,:root[data-site-theme="light"] #brandload{
  --black:#050405; --ivory:#F3E8D8; --grey:#C8C5BF; --muted:#A6A39D; --gold-primary:#D4AF5A; --gold-bright:#E6C778; --gold-text:#D4AF5A; --line:rgba(169,130,56,.34); color:var(--ivory)}
.themesw--hd{margin-right:6px}.themesw--hd button{min-height:30px;padding:3px 9px;font-size:.85rem}
@media(max-width:1180px){.themesw--hd button{padding:3px 7px}.themesw--hd{margin-right:2px}}
:root[data-site-theme="light"] .btn-ghost,:root[data-site-theme="light"] .btn-ghost:hover{background:transparent}
:root[data-site-theme="light"] .btn-ghost:hover{border-color:#4A101B;color:#4A101B}

/* ===== v29: wide member interfaces (reader and editorial text stay narrow) ===== */
:root{--maxw-member:1280px}
#v-worksheets .wrap,#v-tracker .wrap,#v-journal .wrap{max-width:var(--maxw-member)}   /* #v-plan keeps its approved v27 1180px (inside the 1150-1300px target) */
#v-assess .wrap,#v-psychtests .wrap{max-width:1200px!important}
#v-questions .wrap{max-width:1100px!important}
/* inside the wider frame, running text keeps a readable measure */
#v-assess .qtext,#v-assess .qprompt,#v-psychtests .qtext,#v-psychtests .qprompt,#v-assess .rtext p,#v-psychtests .rtext p{max-width:78ch}

/* v29 light: panels that are dark glass in Dark mode */
:root[data-site-theme="light"] .auth,
:root[data-site-theme="light"] .card,
:root[data-site-theme="light"] .col,
:root[data-site-theme="light"] .door-panel,
:root[data-site-theme="light"] .emocard,
:root[data-site-theme="light"] .jed,
:root[data-site-theme="light"] .jentry,
:root[data-site-theme="light"] .modrow,
:root[data-site-theme="light"] .panel,
:root[data-site-theme="light"] .qcard{background:#FFF3E5}
:root[data-site-theme="light"] .emocard.on{background:rgba(138,100,20,.12)}
:root[data-site-theme="light"] .tl-pop,:root[data-site-theme="light"] .mott-analytics-choice,:root[data-site-theme="light"] .mott-analytics-choice *{
  --black:#000; --ivory:#F3F0EA; --grey:#C8C5BF; --muted:#A6A39D; --gold-primary:#DDBA5C; --gold-bright:#F0D07A; --gold-text:#DDBA5C; --line:rgba(221,186,92,.2)}

/* header: full segmented control where there is room (>=1500px, and <=1180px when the nav collapses); a one-button cycler in between so the header never overflows */
.themecycle{display:none;min-height:32px;padding:3px 12px;margin-right:8px;border:1px solid var(--gold-border);border-radius:999px;font-size:.8rem;color:var(--ivory);font-weight:500}
.themecycle:hover{border-color:var(--gold)}.themecycle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.themecycle{font-size:0!important;width:36px;height:36px;padding:0!important;margin-right:6px!important;border-radius:50%!important;position:relative}
.themecycle::before{content:'◐';font-size:1.15rem;line-height:34px;color:var(--gold);display:block;text-align:center}
.themecycle[data-pref="light"]::before{content:'☀'}.themecycle[data-pref="system"]::before{content:'◑'}
@media(min-width:1181px){.themesw--hd{display:none}.themecycle{display:inline-block}}
@media(max-width:700px){.themesw--hd,.themecycle{display:none}}
/* v29: the larger type sizes would crowd the header between the burger breakpoint (1180px) and ~1330px; tighten spacing there (text sizes stay >= 12.8px) */
@media(min-width:1181px) and (max-width:1479px){
  #hdr .hd{gap:10px}
  .logo{letter-spacing:.02em;font-size:.98rem}
  nav.main{gap:7px}nav.main a{letter-spacing:0}
  .hd-cta .btn-sm{padding:8px 9px;letter-spacing:0}
  .hd-cta{gap:6px}
  .themecycle{margin-right:2px!important}
}

/* v29: the paid book reader keeps its v28 control sizes EXACTLY (narration bar, title strip). The site-wide readability increase would otherwise
   change the toolbar height and therefore the reader's page counts; the reader's own typography is a separate, approved design (v18/v19/v27). */
#memberReader .mbar .eyebrow,#memberReader .chap-body .eyebrow{font-size:.67rem;letter-spacing:.25em}
#memberReader .audiobtn,#memberReader .audiotime,#memberReader select,#memberReader option{font-size:.72rem}
#memberReader label{font-size:.62rem;letter-spacing:.13em}
#memberReader #auOnly.chip{font-size:.66rem;letter-spacing:.11em}
#memberReader .audionote{font-size:.66rem;letter-spacing:.06em}
#memberReader .pg-mode button{font-size:.64rem;letter-spacing:.14em}
#memberReader .pg-btn{font-size:.72rem}
#memberReader .pg-count{font-size:.76rem}
#memberReader{--black:#07070A;--deep:#0B0B0E}
@media(max-width:560px){#memberReader .pg-btn{font-size:.95rem}}