:root{
 --black:#000000; --paper:#F2EBE0; --cream:#EFECE6; --char:#221B17; --rust:#B8452A; --rust-d:#8B2617;
 --serif:"Bodoni Moda",Georgia,serif; --sans:"Archivo",system-ui,sans-serif; --geo:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--paper);
 font-family:var(--sans);font-weight:300;font-size:20px;line-height:1.8;-webkit-font-smoothing:antialiased}
.w{max-width:1180px;margin:0 auto;padding:0 40px}
p{margin:0 0 1.45em}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* display type — serif ONLY at large sizes */
.big{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:-.01em;
 font-size:clamp(46px,7.2vw,92px);margin:0 0 54px}
.big .b{color:var(--rust)}

/* mid headings — blade serif, tracked caps */
.mid{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6.2vw,84px);
 letter-spacing:-.012em;line-height:1.1;margin:150px auto 118px;text-align:center;max-width:15ch}
.mid .b{color:var(--rust);font-style:italic}

/* emphasis: body size, bold — never serif */
.q{font-family:var(--sans);font-weight:600;font-size:1em;line-height:1.7;color:var(--rust);margin:2em 0}
.statement{font-family:var(--serif);font-style:italic;font-weight:400;
 font-size:clamp(25px,2.95vw,40px);line-height:1.38;color:var(--rust-d);
 max-width:960px;margin:1.5em auto 1.7em;text-align:center}
.void .statement{color:var(--rust)}

/* NAV */
.nav{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.94);backdrop-filter:blur(10px);
 border-bottom:1px solid rgba(242,235,224,.13)}
.nav .w{display:flex;align-items:center;justify-content:space-between;padding:18px 40px}
.nav .id{font-family:var(--serif);font-size:15px;letter-spacing:.3em;text-transform:uppercase}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:15.5px;color:#A79C92;font-family:var(--geo)}
.nav li:hover{color:var(--paper)}

/* HERO */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;
 overflow:hidden;background:#000;text-align:center}
.hero .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 50% 40%,rgba(139,38,23,.42) 0%,rgba(90,22,14,.18) 34%,rgba(0,0,0,1) 66%)}
.hero .inner{position:relative;z-index:2;padding:150px 0}
.hero .nm{font-family:var(--serif);font-size:clamp(16px,2vw,23px);letter-spacing:.46em;
 text-transform:uppercase;color:#E8DFD2;margin-bottom:76px}
.hero h1{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(50px,10vw,146px);line-height:1.1;letter-spacing:-.01em}
.hero h1 .a{display:block;color:#FBF6EF}
.hero h1 .b{display:block;font-style:italic;color:var(--rust);margin-top:.06em}
.hero .line{margin:76px auto 0;max-width:50ch;font-size:20px;line-height:1.85;color:#B7ACA1}

/* PORTRAIT */
.reveal{position:relative;overflow:hidden;background:#000}
.reveal .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 72% 46%,rgba(139,38,23,.46) 0%,rgba(96,24,15,.20) 32%,rgba(0,0,0,1) 62%)}
.reveal .w{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:64px;
 align-items:center;padding-top:120px;padding-bottom:0;min-height:86vh}
.reveal .copyside{position:relative;z-index:3}
.reveal h2{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(36px,5.4vw,70px);line-height:1.22;letter-spacing:-.012em;color:#FBF6EF}
.reveal h2 .b{display:block;font-style:italic;color:var(--rust);margin-top:.18em}
.figure{align-self:end;position:relative;z-index:2}
.figure img{width:100%;display:block;filter:none}

/* TRANSITIONS */
.to-cream{height:150px;background:linear-gradient(180deg,#000 0%,#3A2119 42%,#A98476 72%,var(--paper) 100%)}
.to-black{height:150px;background:linear-gradient(180deg,var(--paper) 0%,#A98476 28%,#3A2119 58%,#000 100%)}
.seam{display:flex;align-items:center;justify-content:center;gap:16px;padding:52px 0 0}
.seam i{display:block;width:70px;height:1px;background:var(--rust);opacity:.65}
.seam b{display:block;width:5px;height:5px;background:var(--rust);transform:rotate(45deg)}

/* PAPER */
.paper{background:var(--paper);color:var(--char)}
.paper p{color:#231C18;line-height:1.65}
.paper .big{color:var(--char)}
.paper .mid{color:var(--char)}
.paper .q{color:var(--rust-d)}
.pad{padding:126px 0 136px}
.paper .w{max-width:1180px;padding:0 72px}
.cad .mk{color:var(--rust);font-weight:400;margin-right:15px;font-family:var(--sans)}
.cad b{font-weight:600;color:var(--char)}
.drop::first-letter{font-family:var(--serif);font-weight:400;float:left;font-size:5.1em;
 line-height:.82;padding:.06em .12em 0 0;color:var(--rust)}

/* ARROW */
.onward{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0 4px}
.onward span{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--rust-d)}
.onward svg{width:26px;height:44px;animation:drift 2.1s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(11px);opacity:1}}

/* BOOKS */
.books-sec{background:#000;padding:104px 0 120px}
.books-sec .big{text-align:center;color:#FBF6EF}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.book img{width:100%;display:block;box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.book h4{font-family:var(--geo);font-weight:400;font-size:22px;margin:26px 0 8px;line-height:1.42;letter-spacing:.01em}
.book span{display:block;font-size:16px;color:#A79C92;line-height:1.6;min-height:52px}
.buy{display:inline-block;margin-top:22px;background:var(--rust-d);color:#fff;
 font-size:15px;font-weight:500;letter-spacing:.04em;padding:14px 30px}
.kids{display:grid;grid-template-columns:210px 1fr;gap:40px;align-items:center;
 margin-top:100px;padding-top:52px;border-top:1px solid rgba(242,235,224,.15)}
.kids img{width:100%;display:block}
.kids h4{font-family:var(--geo);font-weight:400;font-size:25px;margin:0 0 14px;line-height:1.42}
.kids p{font-size:17.5px;color:#A79C92;margin:0 0 20px;max-width:62ch}

/* PURE BLACK SECTIONS */
.void{background:#000;padding:104px 0}
.void .big{color:#FBF6EF}
.void p{color:var(--cream)}
.origins p{max-width:55ch;margin-left:auto;margin-right:auto;line-height:1.8}
.origins .q{max-width:55ch;margin-left:auto;margin-right:auto}
.void .q{color:var(--rust)}
.void a.inline{color:var(--rust);font-weight:600;font-style:italic;border-bottom:1px solid rgba(184,69,42,.5)}

/* BUTTONS */
.btn{display:inline-block;font-size:16px;font-weight:500;letter-spacing:.04em;padding:18px 38px;
 text-align:center}
.btn.solid{background:var(--rust-d);color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(242,235,224,.55);color:var(--paper)}
.btnstack{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:66px}
.journey{text-align:center;padding-top:40px}
.journey .eyebrow{font-family:var(--geo);font-weight:400;font-size:clamp(14px,1.5vw,17px);
 letter-spacing:.26em;text-transform:uppercase;color:var(--rust);margin:0 0 40px}
.journey h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.3vw,58px);
 line-height:1.16;color:#FBF6EF;margin:0 0 40px}
.journey h3 .a{display:block;white-space:nowrap}
.journey h3 .b{display:block;font-style:italic;color:var(--rust);
 font-size:1.5em;line-height:1.1;margin-top:.34em}
.kit{display:block;width:108px;height:auto;margin:76px auto 84px}
.fire{display:block;width:200px;height:auto;margin:92px auto 78px}
.fl{transform-origin:50% 100%}
.f1{animation:flick 2.4s ease-in-out infinite}
.f2{animation:flick 3.1s ease-in-out infinite .35s}
.f3{animation:flick 2.7s ease-in-out infinite .9s}
@keyframes flick{0%,100%{transform:scaleY(1) scaleX(1) translateX(0);opacity:.92}
 28%{transform:scaleY(1.08) scaleX(.96) translateX(-1.2px);opacity:1}
 55%{transform:scaleY(.95) scaleX(1.04) translateX(1.4px);opacity:.86}
 78%{transform:scaleY(1.04) scaleX(.99) translateX(-.6px);opacity:.97}}
.spark {animation:rise 4.2s ease-out infinite}
.spark2{animation:rise 5.4s ease-out infinite 1.4s}
.spark3{animation:rise 3.6s ease-out infinite 2.6s}
.spark4{animation:rise 6.1s ease-out infinite 3.4s}
@keyframes rise{0%{transform:translate(0,0) scale(1);opacity:0}
 12%{opacity:.95}45%{transform:translate(7px,-42px) scale(.8);opacity:.8}
 75%{transform:translate(-5px,-74px) scale(.55);opacity:.4}
 100%{transform:translate(3px,-108px) scale(.3);opacity:0}}
.dates{margin:64px auto 0;max-width:55ch;text-align:left}
.dates .row{display:flex;justify-content:space-between;gap:24px;
 padding:20px 0;border-top:1px solid rgba(242,235,224,.18);font-size:18.5px}
.dates .row:last-child{border-bottom:1px solid rgba(242,235,224,.18)}
.dates .row b{font-weight:500;color:#FBF6EF}
.dates .row span{color:var(--rust);font-weight:500;white-space:nowrap}
.journey p{max-width:55ch;margin-left:auto;margin-right:auto;line-height:1.8;text-align:left}
.journey .eyebrow,.journey h3{text-align:center}

/* MASTERCLASS */
.mc{background:#000;padding:130px 0 140px;text-align:center;position:relative;overflow:hidden}
.mc .halo{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 50% 26%,rgba(139,38,23,.30) 0%,rgba(0,0,0,1) 58%)}
.mc .w{position:relative;z-index:2}
.mc .word{font-family:var(--serif);font-weight:400;color:#FBF6EF;
 font-size:clamp(30px,7.4vw,104px);letter-spacing:.34em;text-indent:.34em;line-height:1.1;margin:0}
.mc .t{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.2vw,54px);
 line-height:1.3;margin:64px 0 0;text-align:center}
.mc .t .a{color:#FBF6EF}
.mc .t .b{color:var(--rust)}
.mc .copy{color:var(--cream);line-height:1.85;font-size:19.5px;
 max-width:55ch;margin:52px auto 0;text-align:center}
.mcbtns{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:86px}

.thr{position:relative;height:300px;background:#000;overflow:hidden;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.thr .beam{width:1px;height:132px;background:linear-gradient(180deg,transparent,var(--rust));position:relative}
.thr .beam::after{content:"";position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;
 background:var(--rust);box-shadow:0 0 12px 3px rgba(184,69,42,.9);animation:fall 2.6s cubic-bezier(.5,0,.5,1) infinite}
@keyframes fall{0%{top:0;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:132px;opacity:0}}
.thr .tag{font-family:var(--geo);font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#7E736A}
.thr .rail{position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,transparent,rgba(184,69,42,.85),transparent)}
footer{padding:70px 0;border-top:1px solid rgba(242,235,224,.13);font-size:16px;color:#8F857B;background:#000}
footer .fw{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}

@media(max-width:900px){
 body{font-size:18px}
 .w{padding:0 24px} .nav .w{padding:16px 24px} .nav ul{display:none}
 .reveal .w{grid-template-columns:1fr;gap:40px;padding-top:80px;min-height:0}
 .figure{max-width:420px;margin:0 auto}
 .books{grid-template-columns:1fr;gap:76px;max-width:340px;margin-inline:auto}
 .book span{min-height:0}
 .kids{grid-template-columns:1fr;gap:24px} .kids img{max-width:220px}
 .pad{padding:64px 0 72px} .books-sec{padding:72px 0 84px} .void{padding:72px 0}
 .mc{padding:84px 0 92px} .mc .grid{grid-template-columns:1fr;gap:34px;margin-top:44px}
 .mc .word{letter-spacing:.2em;text-indent:.2em}
 .btnstack{align-items:stretch} .btn{width:100%}
 .journey{padding-top:80px} .paper .w{padding:0 24px}
 .to-cream,.to-black{height:100px}
}

/* ================= MAP OF SELF ================= */
.mhero{position:relative;background:#000;overflow:hidden;padding:64px 0 0;text-align:center}
.mhero .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 42% 56%,rgba(139,38,23,.32) 0%,rgba(0,0,0,1) 66%)}
.mhero .w{position:relative;z-index:2;max-width:1320px}
.mhero .kick{font-family:var(--geo);font-size:clamp(12px,1.4vw,15px);letter-spacing:.32em;
 text-transform:uppercase;color:var(--rust);margin-bottom:28px}
.mhero h1{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(40px,7.4vw,102px);line-height:1.02;letter-spacing:-.012em;color:#FBF6EF}
.mhero .whereare{font-family:var(--geo);font-weight:500;color:var(--rust);
 font-size:clamp(20px,2.6vw,34px);letter-spacing:.1em;margin-top:20px}

/* --- the instrument --- */
.aperture{max-width:1120px;margin:18px auto -46px}
.aperture svg{width:100%;height:auto;display:block;overflow:visible}
.ap-arc,.ap-far{transform-box:view-box;transform-origin:55px 280px}
.a1{animation:br1 7s ease-in-out infinite}
.a2{animation:br2 7s ease-in-out infinite .55s}
.a3{animation:br3 7s ease-in-out infinite 1.1s}
.a5{animation:br5 7s ease-in-out infinite 2.2s}
@keyframes br1{0%,100%{transform:scale(1)}48%{transform:scale(1.038)}}
@keyframes br2{0%,100%{transform:scale(1)}48%{transform:scale(1.0235)}}
@keyframes br3{0%,100%{transform:scale(1)}48%{transform:scale(1.016)}}
@keyframes br4{0%,100%{transform:scale(1)}48%{transform:scale(1.0125)}}
@keyframes br5{0%,100%{transform:scale(1)}48%{transform:scale(1.010)}}
@keyframes brf1{0%,100%{transform:scale(1)}48%{transform:scale(1.0074)}}
@keyframes brf2{0%,100%{transform:scale(1)}48%{transform:scale(1.006)}}
.ap-far{opacity:.2}
.apf1{animation:brf1 7s ease-in-out infinite 2.75s}
.apf2{animation:brf2 7s ease-in-out infinite 3.3s}
.ap-l3{animation:br4 7s ease-in-out infinite 1.65s, crawl 9s linear infinite}
@keyframes crawl{to{stroke-dashoffset:-64}}
.sweep{transform-box:view-box;transform-origin:55px 280px;animation:sweep 22s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:rotate(-21deg)}50%{transform:rotate(21deg)}}
.ap-core{animation:corepulse 3.2s ease-in-out infinite}
@keyframes corepulse{0%,100%{r:4.5;opacity:.9}50%{r:7;opacity:1}}
.ap-halo{animation:haloring 3.2s ease-out infinite}
@keyframes haloring{0%{r:5;opacity:.55}100%{r:30;opacity:0}}
.mote{animation:drift 9s ease-in-out infinite}
.m2{animation-delay:2.5s}.m3{animation-delay:5s}.m4{animation-delay:7s}
@keyframes drift{0%,100%{opacity:.14}50%{opacity:.4}}
.ap-lbl{font-family:var(--geo);font-size:9.4px;letter-spacing:.19em;text-transform:uppercase;fill:#A79C92}
.ap-code{font-family:var(--geo);font-weight:500;font-size:11.4px;letter-spacing:.06em;fill:#F2EBE0}
.ap-axis{font-family:var(--geo);font-size:14px;letter-spacing:.26em;text-transform:uppercase;fill:#EDE6DB}
.ap-far-lbl{font-family:var(--geo);font-size:9.4px;letter-spacing:.19em;text-transform:uppercase;fill:#8F857B}

/* ================= INVITATION (heartbeat) ================= */
.invite{position:relative;background:#000;padding:52px 0 34px;text-align:center;overflow:hidden}
.invite .w{position:relative;z-index:2}
.beat{position:relative;display:inline-block;padding:56px 74px}
.beat .ring{position:absolute;inset:0;border:1px solid rgba(184,69,42,.55)}
.beat .ring.r2{animation:ringout 3.4s ease-out infinite}
.beat .ring.r3{animation:ringout 3.4s ease-out infinite 1.7s}
@keyframes ringout{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.14);opacity:0}}
.beat h2{font-family:var(--serif);font-weight:400;color:#FBF6EF;margin:0;
 font-size:clamp(32px,5.4vw,68px);line-height:1.04;letter-spacing:.02em;
 animation:beatpulse 3.4s ease-in-out infinite}
@keyframes beatpulse{0%,100%{transform:scale(1);text-shadow:0 0 0 rgba(184,69,42,0)}
 14%{transform:scale(1.028);text-shadow:0 0 30px rgba(184,69,42,.5)}
 28%{transform:scale(1)}42%{transform:scale(1.018)}56%{transform:scale(1)}}
.beat p{color:#B7ACA1;font-size:19px;margin:20px auto 0;max-width:40ch}
.ecg{display:block;width:min(520px,84vw);height:44px;margin:26px auto 4px}
.ecg path{fill:none;stroke:var(--rust);stroke-width:1.6;stroke-linecap:round;
 stroke-dasharray:620;stroke-dashoffset:620;animation:trace 3.4s linear infinite}
@keyframes trace{0%{stroke-dashoffset:620}70%{stroke-dashoffset:0}100%{stroke-dashoffset:-620}}
.beat .go{display:inline-block;margin-top:26px;background:var(--rust-d);color:#fff;
 font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:.04em;padding:18px 42px;cursor:pointer}

/* ================= QUIZ ================= */
.quizwrap{background:#000;padding:4px 0 40px;position:relative;overflow:hidden}
.quizwrap .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 50% 26%,rgba(139,38,23,.24) 0%,rgba(0,0,0,1) 64%)}
.quizwrap .w{position:relative;z-index:2}
.qprog{max-width:300px;margin:0 auto 26px}
.qprog svg{width:100%;height:auto;display:block;overflow:visible}
.pa{transition:opacity .6s ease,stroke-width .6s ease}
.pa.lit{opacity:1!important;stroke-width:2!important;animation:sparkarc .8s ease-out}
@keyframes sparkarc{0%{stroke:#FBE3C0;filter:drop-shadow(0 0 8px rgba(240,168,104,.9))}
 100%{stroke:#B8452A;filter:none}}
.qcount{font-family:var(--geo);font-size:16px;font-weight:400;letter-spacing:.28em;
 text-transform:uppercase;color:#D9CEC2;text-align:center;margin-top:20px}
.qcard{max-width:840px;margin:0 auto;position:relative;min-height:430px}
.qstep{display:none}
.qstep.on{display:block;animation:slidein .48s cubic-bezier(.22,1,.36,1)}
.qstep.out{display:block;animation:slideout .3s ease forwards;pointer-events:none}
@keyframes slidein{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
@keyframes slideout{to{opacity:0;transform:translateX(-46px)}}
.qq{font-family:var(--serif);font-weight:400;color:#FBF6EF;font-size:clamp(25px,3.5vw,42px);
 line-height:1.22;margin:0 0 36px;text-align:center}
.qopt{display:block;width:100%;text-align:left;background:transparent;cursor:pointer;
 border:1px solid rgba(242,235,224,.2);color:var(--cream);
 font-family:var(--sans);font-weight:400;font-size:18.5px;line-height:1.6;
 padding:19px 26px 19px 62px;margin-bottom:13px;position:relative;
 transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}
.qopt::before{content:"";position:absolute;left:26px;top:25px;width:12px;height:12px;
 border:1px solid rgba(242,235,224,.4);border-radius:50%;transition:all .25s}
.qopt:hover{border-color:rgba(184,69,42,.8);background:rgba(184,69,42,.1);transform:translateX(5px)}
.qopt:hover::before{border-color:var(--rust)}
.qopt.sel{border-color:var(--rust);background:rgba(184,69,42,.18);
 box-shadow:0 0 40px -8px rgba(184,69,42,.6)}
.qopt.sel::before{background:var(--rust);border-color:var(--rust);box-shadow:0 0 14px 4px rgba(184,69,42,.7)}
.qnav{display:flex;justify-content:center;margin-top:30px}
.qback{background:none;border:none;color:#7E736A;font-family:var(--geo);font-size:13.5px;
 letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:10px 0}
.qback:hover{color:var(--cream)}
.qback[disabled]{opacity:.22;cursor:default}

/* result */
.qresult{display:none}
.qresult.on{display:block;animation:slidein .6s cubic-bezier(.22,1,.36,1)}
.rlevel{text-align:center}
.rlevel .code{font-family:var(--geo);font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:var(--rust)}
.rlevel h3{font-family:var(--serif);font-weight:400;color:#FBF6EF;margin:16px 0 0;
 font-size:clamp(32px,5.2vw,62px);line-height:1.1}
.rlevel .tag{color:#B7ACA1;font-size:18.5px;margin-top:14px}
.spread{max-width:580px;margin:44px auto 50px}
.srow{display:grid;grid-template-columns:96px 1fr 46px;align-items:center;gap:16px;margin-bottom:13px}
.srow .sl{font-family:var(--geo);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#8F857B}
.srow .sb{height:3px;background:rgba(242,235,224,.13);position:relative;overflow:hidden}
.srow .sf{position:absolute;left:0;top:0;bottom:0;background:var(--rust);width:0;
 transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.srow .sn{font-family:var(--geo);font-size:12.5px;color:#8F857B;text-align:right}
.srow.top .sl,.srow.top .sn{color:var(--cream)}
.srow.top .sf{box-shadow:0 0 16px 2px rgba(184,69,42,.7)}
.rbody{max-width:760px;margin:0 auto}
.rbody p{color:var(--cream);line-height:1.75}
.rbody h4{font-family:var(--geo);font-weight:500;font-size:13px;letter-spacing:.26em;
 text-transform:uppercase;color:var(--rust);margin:42px 0 18px}
.rbody ul{list-style:none;padding:0;margin:0 0 24px}
.rbody li{padding:9px 0 9px 28px;position:relative;color:var(--cream);line-height:1.66;font-size:18px}
.rbody li::before{content:"\2192";position:absolute;left:0;top:9px;color:var(--rust)}
.rcta{text-align:center;margin-top:48px}
.retake{background:none;border:none;color:#7E736A;font-family:var(--geo);font-size:13px;
 letter-spacing:.2em;text-transform:uppercase;cursor:pointer;margin:28px auto 0;display:block}
.retake:hover{color:var(--cream)}

/* ================= LIVING INVITATIONS ================= */
.doors{background:#000;padding:0 0 30px}
.door{position:relative;padding:70px 0;border-top:1px solid rgba(242,235,224,.13);text-align:center}
.door:first-child{border-top:none}
.door .emblem{height:132px;display:flex;align-items:center;justify-content:center;margin-bottom:30px}
.door h3{font-family:var(--serif);font-weight:400;color:#FBF6EF;margin:0;
 font-size:clamp(28px,4.4vw,56px);line-height:1.12}
.door h3 .b{font-style:italic;color:var(--rust)}
.door p{color:#B7ACA1;max-width:48ch;margin:22px auto 0;font-size:19px;line-height:1.75}
.door .go{display:inline-block;margin-top:32px;font-family:var(--sans);font-weight:500;
 font-size:16px;letter-spacing:.04em;padding:17px 38px}
.door .go.solid{background:var(--rust-d);color:#fff}
.door .go.line{border:1px solid rgba(242,235,224,.5);color:var(--paper)}

/* emblem: opening aperture (masterclass) */
.emb-ap circle,.emb-ap path{fill:none;stroke:#B8452A}
.emb-ap .o1{animation:open 4.6s ease-in-out infinite}
.emb-ap .o2{animation:open 4.6s ease-in-out infinite .5s}
.emb-ap .o3{animation:open 4.6s ease-in-out infinite 1s}
@keyframes open{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:.95;transform:scaleY(1)}}
.emb-ap g{transform-box:fill-box;transform-origin:center}
/* emblem: converging arcs (work with me) */
.emb-c path{fill:none;stroke:#B8452A;stroke-width:1.4}
.emb-c .c1{animation:converge 5s ease-in-out infinite}
.emb-c .c2{animation:converge 5s ease-in-out infinite reverse}
@keyframes converge{0%,100%{transform:translateX(-12px);opacity:.4}50%{transform:translateX(0);opacity:1}}
.emb-c .dot{fill:#B8452A;stroke:none;animation:corepulse 2.4s ease-in-out infinite}
/* fire */
.fl{transform-origin:50% 100%}
.f1{animation:flick 2.4s ease-in-out infinite}
.f2{animation:flick 3.1s ease-in-out infinite .35s}
.f3{animation:flick 2.7s ease-in-out infinite .9s}
@keyframes flick{0%,100%{transform:scaleY(1) scaleX(1) translateX(0);opacity:.92}
 28%{transform:scaleY(1.08) scaleX(.96) translateX(-1.2px);opacity:1}
 55%{transform:scaleY(.95) scaleX(1.04) translateX(1.4px);opacity:.86}
 78%{transform:scaleY(1.04) scaleX(.99) translateX(-.6px);opacity:.97}}
.spark{animation:rise 4.2s ease-out infinite}
.spark2{animation:rise 5.4s ease-out infinite 1.4s}
.spark3{animation:rise 3.6s ease-out infinite 2.6s}
@keyframes rise{0%{transform:translate(0,0) scale(1);opacity:0}
 12%{opacity:.95}45%{transform:translate(7px,-34px) scale(.8);opacity:.8}
 75%{transform:translate(-5px,-60px) scale(.55);opacity:.4}
 100%{transform:translate(3px,-86px) scale(.3);opacity:0}}


/* --- the light crossing (was missing on this page) --- */
.cross{position:relative;height:196px;overflow:hidden;
 background:linear-gradient(180deg,var(--paper) 0%,#C9A899 22%,#6B4032 42%,#1A1008 66%,#000 100%)}
.cross .beam{position:absolute;left:50%;top:14%;transform:translateX(-50%);
 width:1px;height:72%;background:linear-gradient(180deg,rgba(184,69,42,.55),var(--rust) 45%,rgba(184,69,42,.9))}
.cross .beam::after{content:"";position:absolute;left:-2.5px;width:6px;height:6px;border-radius:50%;
 background:var(--rust);box-shadow:0 0 14px 4px rgba(184,69,42,.85);
 animation:travel 3.1s cubic-bezier(.45,0,.5,1) infinite}
@keyframes travel{0%{top:0;opacity:0}12%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}}
.paper.pad.tsos{padding:58px 0 34px}
.paper.pad.tsos .w{max-width:1000px;padding:0 34px}

/* --- NO ITALIC SERIF ANYWHERE. Fuller weight instead of thin Didone italic. --- */
.statement{font-family:var(--serif);font-style:normal;font-weight:500;
 font-size:clamp(21px,2.35vw,31px);line-height:1.45;color:var(--rust-d);
 max-width:900px;margin:1.5em auto 1.6em;text-align:center;letter-spacing:-.005em}
.qq{font-weight:500;font-style:normal}
.mhero .whereare,.door h3 .b,.rlevel h3 .b{font-style:normal}

/* --- living doors: big and dramatic, like the homepage titles --- */
.door h3{font-family:var(--serif);font-weight:400;font-style:normal;
 font-size:clamp(44px,7vw,92px);line-height:1.04;letter-spacing:-.012em}
.door h3 .b{color:var(--rust);font-style:normal}
.door p{font-size:19.5px;margin-top:26px}

/* --- curiosity link with a blinking eye --- */
.curious{display:inline-flex;align-items:center;gap:14px;margin-top:34px;
 font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.4vw,30px);
 color:var(--paper);border-bottom:1px solid rgba(184,69,42,.5);padding-bottom:7px;
 transition:color .3s,border-color .3s}
.curious:hover{color:var(--rust);border-color:var(--rust)}
.eye{width:46px;height:26px;flex:none;overflow:visible}
.eye path,.eye circle{fill:none;stroke:#B8452A;stroke-width:1.5}
.eyeball{transform-box:fill-box;transform-origin:center;animation:blink 5.4s ease-in-out infinite}
@keyframes blink{0%,88%,100%{transform:scaleY(1)}92%{transform:scaleY(.06)}96%{transform:scaleY(1)}}
.eye .iris{fill:#B8452A;stroke:none;animation:corepulse 3.6s ease-in-out infinite}


/* ===== TYPE LAW =====
   The Didone is a display face. It is beautiful above ~46px and turns fragile
   and squiggly below it. So: serif for large display only, geometric for
   everything mid-sized. */
.qq{font-family:var(--serif);font-weight:400;font-style:normal;
 font-size:clamp(30px,4.2vw,52px);line-height:1.18;color:#FBF6EF;letter-spacing:-.008em}
.statement{font-family:var(--sans);font-weight:500;font-style:normal;
 font-size:clamp(19px,1.75vw,23px);line-height:1.66;color:var(--rust-d);
 max-width:62ch;margin:1.5em auto .4em;text-align:center;letter-spacing:0}
.door p,.beat p{font-family:var(--sans)}

/* ===== masterclass invitation ===== */
.mc-stack .take{font-family:var(--geo);font-size:clamp(14px,1.7vw,19px);letter-spacing:.3em;
 text-transform:uppercase;color:#B7ACA1;margin-bottom:16px}
.mc-stack .four{font-family:var(--geo);font-weight:400;color:var(--rust);
 font-size:clamp(22px,3vw,38px);line-height:1.2;margin-bottom:22px}
.mc-stack .word{font-family:var(--serif);font-weight:400;color:#FBF6EF;margin:0;
 font-size:clamp(28px,6.6vw,92px);letter-spacing:.3em;text-indent:.3em;line-height:1.1}
.mc-stack .msg{color:#B7ACA1;max-width:44ch;margin:30px auto 0;font-size:19.5px;line-height:1.7}

/* fingerprint: press to enter */
.print{display:inline-flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px;cursor:pointer}
.print svg{width:82px;height:96px;overflow:visible}
.print path{fill:none;stroke:#B8452A;stroke-width:1.5;stroke-linecap:round;opacity:.55}
.print .scan{position:absolute}
.pf1{animation:ridge 3.6s ease-in-out infinite}
.pf2{animation:ridge 3.6s ease-in-out infinite .18s}
.pf3{animation:ridge 3.6s ease-in-out infinite .36s}
.pf4{animation:ridge 3.6s ease-in-out infinite .54s}
.pf5{animation:ridge 3.6s ease-in-out infinite .72s}
@keyframes ridge{0%,100%{opacity:.34}42%{opacity:1;stroke:#F0A868}}
.print .scanline{stroke:#F0A868;stroke-width:1.2;opacity:.9;
 animation:scandown 3.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes scandown{0%{transform:translateY(0);opacity:0}8%{opacity:.9}
 92%{opacity:.9}100%{transform:translateY(88px);opacity:0}}
.print .lbl{font-family:var(--geo);font-size:14px;letter-spacing:.26em;text-transform:uppercase;
 color:#B7ACA1;transition:color .3s}
.print:hover .lbl{color:var(--paper)}
.print:hover path{opacity:.95}

/* dates line, muted like the far-territory labels */
.dates-line{font-family:var(--geo);font-size:15px;letter-spacing:.14em;color:#7E736A;
 margin-top:26px;line-height:1.9}


/* =========================================================================
   TYPE LAW — the Didone (Bodoni) is CEREMONIAL ONLY. It is used for exactly
   three things on this page: the page title, the MASTERCLASS wordmark and the
   course name. Everywhere else — navigation, section titles, questions,
   answers, links, results — uses the geometric face, which stays sharp,
   full and legible at every size. Nothing else gets the serif.
   ========================================================================= */
.nav .id{font-family:var(--geo);font-weight:500;font-size:15.5px;letter-spacing:.28em}
.beat h2{font-family:var(--geo);font-weight:400;letter-spacing:.01em}
.qq{font-family:var(--geo);font-weight:400;font-size:clamp(24px,2.7vw,35px);
 line-height:1.34;letter-spacing:.004em;margin-bottom:32px}
.door h3{font-family:var(--geo);font-weight:400;letter-spacing:-.005em;
 font-size:clamp(40px,6.2vw,82px);line-height:1.1}
.curious{font-family:var(--geo);font-weight:400;font-size:clamp(20px,2.2vw,27px)}
.rlevel h3{font-family:var(--geo);font-weight:500}
.mc-stack .word,.mhero h1{font-family:var(--serif)}


/* ================= THE LAW, FINAL =================
   The serif appears in three places only: the page title in the hero, the
   MASTERCLASS wordmark, and the drop cap that opens a reading section.
   Every other title, gate, heading, statement and link is the geometric
   face, upright. Where a title has two parts, the redish part begins its
   own line. ================================================= */
.gate h2{font-family:var(--geo);font-weight:400;letter-spacing:-.008em}
.gate h2 .b{font-family:var(--geo);font-style:normal;color:var(--rust);display:block}
.big{font-family:var(--geo);font-weight:400;letter-spacing:-.008em}
.big .b{font-family:var(--geo);font-style:normal;color:var(--rust)}
.endcta h3,.endcta h3 .b{font-family:var(--geo);font-style:normal}
.closing,.closing .b{font-family:var(--geo);font-style:normal}
.mc .t,.mc .t .a,.mc .t .b{font-family:var(--geo);font-style:normal}
.mid,.mid .b{font-family:var(--geo);font-style:normal}
.journey h3,.journey h3 .b{font-family:var(--geo);font-style:normal}
.door h3,.door h3 .b{font-family:var(--geo);font-style:normal}
.mc-stack .four{font-family:var(--geo)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:900px){
 .mhero{padding:56px 0 24px}
 .beat{padding:38px 22px}
 .qopt{font-size:16.5px;padding:17px 20px 17px 52px}
 .qopt::before{left:20px;top:23px}
 .qq{font-size:23px;margin-bottom:26px}
 .srow{grid-template-columns:74px 1fr 40px;gap:11px}
 .door{padding:56px 0}.door .emblem{height:104px}
 .paper.pad.tsos{padding:44px 0 50px}
 .paper.pad.tsos .w{padding:0 24px}
 .cross{height:140px}
}

.nav ul a{color:inherit;text-decoration:none}
.nav li a:hover{color:var(--paper)}
.nav .id a{color:inherit;text-decoration:none}

footer{padding:64px 0 58px;border-top:1px solid rgba(242,235,224,.14);background:#000;text-align:center}
footer .fmail a{font-family:var(--geo);font-weight:400;font-size:clamp(19px,2.1vw,25px);
 color:var(--rust);letter-spacing:.03em;text-decoration:none;
 border-bottom:1px solid rgba(184,69,42,.4);padding-bottom:5px}
footer .fmail a:hover{color:#E0642F}
footer .fsoc{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;
 padding:0;margin:38px 0 34px}
footer .fsoc a{font-family:var(--geo);font-size:14.5px;letter-spacing:.13em;text-transform:uppercase;
 color:#8F857B;text-decoration:none}
footer .fsoc a:hover{color:var(--paper)}
footer .fend{font-family:var(--sans);font-size:14px;color:#6E655D;letter-spacing:.02em}
@media(max-width:900px){footer{padding:46px 0 44px} footer .fsoc{gap:12px 20px;margin:28px 0 26px}}

/* ===== LAW, TIGHTENED =====
   A page title and the link that leads to it must look the same. Since every
   door and nav item is geometric, every page title is geometric too. The serif
   now survives on exactly three things: the homepage wordmark THE SCIENCE OF
   SELF, the MASTERCLASS wordmark, and the drop cap. Nothing else. */
.phero h1,.phero h1 .b,.mhero h1,.mhero h1 .b{font-family:var(--geo);font-weight:400;letter-spacing:-.012em}
.gate h2,.gate h2 .b{font-family:var(--geo)}

/* ---------- rhythm: tightened transitions (appended last; body-prefixed so
   these win over the earlier duplicate height rules) ---------- */
body div.to-cream,body div.to-black{height:96px}
body div.cross{height:124px}
body div.thr{height:132px;gap:16px}
body div.thr .beam{height:64px}
/* footer menu row */
.fnav{list-style:none;display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:center;
 padding:0;margin:0 0 34px}
.fnav a{font-family:var(--geo);font-weight:400;font-size:15px;letter-spacing:.1em;
 opacity:.85}
.fnav a:hover{opacity:1;color:var(--rust)}