: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}
}

/* ---- Science of SELF page ---- */
.phero{position:relative;min-height:74vh;display:flex;align-items:center;
 justify-content:center;text-align:center;background:#000;overflow:hidden}
.phero .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 50% 42%,rgba(139,38,23,.40) 0%,rgba(90,22,14,.17) 34%,rgba(0,0,0,1) 66%)}
.phero .inner{position:relative;z-index:2;padding:96px 0}
.phero .kick{font-family:var(--geo);font-size:clamp(13px,1.5vw,16px);letter-spacing:.3em;
 text-transform:uppercase;color:var(--rust);margin-bottom:52px}
.phero h1{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(44px,8.4vw,118px);line-height:1.04;letter-spacing:-.012em;color:#FBF6EF}
.phero h1 .b{display:block;font-style:italic;color:var(--rust);margin-top:.1em}
.phero .line{margin:56px auto 0;max-width:44ch;font-size:20px;line-height:1.8;color:#B7ACA1}

/* chapter gate: black card carrying the travelling light */
.gate{position:relative;background:#000;padding:120px 0 128px;text-align:center;overflow:hidden}
.gate .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 50% 58%,rgba(139,38,23,.30) 0%,rgba(0,0,0,1) 60%)}
.gate .w{position:relative;z-index:2}
.gate .beam{width:1px;height:120px;margin:0 auto 54px;position:relative;
 background:linear-gradient(180deg,transparent,var(--rust))}
.gate .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}
.gate h2{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(44px,9vw,128px);line-height:1;letter-spacing:.04em;color:#FBF6EF;text-transform:uppercase}
.gate .sub{font-family:var(--serif);font-style:italic;color:var(--rust);
 font-size:clamp(22px,3.4vw,44px);line-height:1.24;margin:20px auto 0;max-width:24ch}

/* principles */
.prin p{margin-bottom:2em}
.prin .lead{font-weight:600;color:var(--rust-d)}
.closing{font-family:var(--serif);font-size:clamp(24px,3vw,40px);line-height:1.34;
 color:var(--char);text-align:center;max-width:100%;margin:52px auto 8px}
.closing .b{font-style:italic;color:var(--rust-d)}
.cta-link{display:inline-block;margin-top:14px;font-family:var(--geo);font-size:17px;
 letter-spacing:.03em;color:var(--rust-d);border-bottom:1px solid rgba(184,69,42,.45);padding-bottom:3px}
.void .cta-link{color:var(--rust);border-bottom-color:rgba(184,69,42,.55)}
.endcta{background:#000;padding:74px 0 92px;text-align:center;position:relative;overflow:hidden}
.endcta .glow{position:absolute;inset:0;z-index:1;
 background:radial-gradient(circle at 50% 46%,rgba(139,38,23,.32) 0%,rgba(0,0,0,1) 60%)}
.endcta .w{position:relative;z-index:2}
.endcta h3{font-family:var(--serif);font-weight:400;color:#FBF6EF;margin:0 0 34px;
 font-size:clamp(30px,4.6vw,62px);line-height:1.16}
.endcta h3 .b{font-style:italic;color:var(--rust)}
/* light crossing the cream/black boundary, half above, half below */
.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}}

/* tighter rhythm between chapters */
.paper.pad.tsos{padding:58px 0 64px}
.paper.pad.tsos .w{max-width:1000px;padding:0 34px}
.gate{padding:16px 0 58px}
.closing span{display:block;white-space:nowrap}

/* ===== TYPE LAW (matched to the rest of the site) =====
   Serif is ceremonial only — page title and chapter gates, above ~46px.
   Everything else uses the geometric face. No serif italics. */
.nav .id{font-family:var(--geo);font-weight:500;font-size:15.5px;letter-spacing:.28em}
.gate .sub{font-family:var(--geo);font-weight:400;font-style:normal;color:var(--rust);
 font-size:clamp(19px,2.4vw,30px);line-height:1.34;letter-spacing:.02em;margin:20px auto 0;max-width:26ch}
.statement{font-family:var(--sans);font-weight:500;font-style:normal;
 font-size:clamp(20px,1.9vw,25px);line-height:1.6;color:var(--rust-d);
 max-width:62ch;margin:1.6em auto;text-align:center;letter-spacing:0}
.closing{font-family:var(--geo);font-weight:400;font-style:normal}
.closing .b{font-family:var(--geo);font-style:normal;color:var(--rust-d)}
.endcta h3 .b{font-style:normal}
.cta-link{font-family:var(--geo)}

/* ================= 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)}


.closing .b{margin-top:.18em}
@media(max-width:900px){
 .gate{padding:12px 0 44px}.phero .inner{padding:70px 0}
 .cross{height:140px}.paper.pad.tsos{padding:44px 0 50px}
 .paper.pad.tsos .w{padding:0 24px}
 .closing span{white-space:normal}}

.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)}