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

/* ===================== SHARED PAGE COMPONENTS =====================
   TYPE LAW: the Didone (Bodoni) is CEREMONIAL ONLY — page titles, chapter
   gates and wordmarks, all above ~46px. Everything else uses the geometric
   face, which stays sharp and full at any size. No serif italics anywhere.
   ================================================================== */
.nav .id{font-family:var(--geo);font-weight:500;font-size:15.5px;letter-spacing:.28em}

.phero{position:relative;min-height:66vh;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% 46%,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:92px 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:30px}
.phero h1{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(46px,9vw,124px);line-height:1.02;letter-spacing:-.012em;color:#FBF6EF}
.phero h1 .b{color:var(--rust)}
.phero .sub{font-family:var(--geo);font-weight:500;color:var(--rust);
 font-size:clamp(19px,2.5vw,32px);letter-spacing:.1em;margin-top:22px}

/* light crossing the cream/black boundary */
.cross{position:relative;height:196px;overflow:hidden;
 background:linear-gradient(180deg,var(--paper) 0%,#C9A899 22%,#6B4032 42%,#1A1008 66%,#000 100%)}
.cross.up{background:linear-gradient(180deg,#000 0%,#1A1008 34%,#6B4032 58%,#C9A899 78%,var(--paper) 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}}

/* chapter gate */
.gate{position:relative;background:#000;padding:16px 0 58px;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 h2{font-family:var(--serif);font-weight:400;margin:0;
 font-size:clamp(38px,6.6vw,96px);line-height:1.04;letter-spacing:-.008em;color:#FBF6EF}
.gate h2 .b{color:var(--rust);display:block;margin-top:.04em}
/* SECOND-ROW RULE: a two-part title always breaks before the redish part */
.mid .b,.journey h3 .b,.reveal h2 .b{display:block}
.gate .sub{font-family:var(--geo);font-weight:400;color:#B7ACA1;
 font-size:clamp(16px,1.9vw,21px);letter-spacing:.06em;margin:20px auto 0;max-width:48ch}

/* reading */
.paper.pad.rd{padding:58px 0 40px}
.paper.pad.rd .w{max-width:1000px;padding:0 34px}
.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 1.6em;text-align:center;letter-spacing:0}
.void .statement{color:var(--rust)}
.cad{padding-left:0}
.cad .mk{color:var(--rust);font-weight:400;margin-right:15px;font-family:var(--sans)}
.paper .cad b,.paper strong{font-weight:600;color:var(--char)}
.rd .em{color:var(--rust-d);font-weight:600}
.chain{margin:1.6em 0}
.chain p{margin:0 0 .55em;padding-left:34px;position:relative}
.chain p::before{content:"\2192";position:absolute;left:0;top:0;color:var(--rust);font-weight:400}
.axisline{font-family:var(--geo);font-weight:500;font-size:clamp(19px,2.2vw,28px);
 color:var(--rust-d);text-align:center;margin:1.4em auto;letter-spacing:.02em}

/* doors */
.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(--geo);font-weight:400;color:#FBF6EF;margin:0;
 font-size:clamp(40px,6.2vw,82px);line-height:1.1;letter-spacing:-.005em}
.door h3 .b{color:var(--rust)}
.door p{color:#B7ACA1;max-width:48ch;margin:24px auto 0;font-size:19.5px;line-height:1.75;font-family:var(--sans)}
.dates-line{font-family:var(--geo);font-size:15px;letter-spacing:.14em;color:#7E736A;margin-top:24px;line-height:1.9}
.curious{display:inline-flex;align-items:center;gap:14px;margin-top:32px;
 font-family:var(--geo);font-weight:400;font-size:clamp(20px,2.2vw,27px);
 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}
@keyframes corepulse{0%,100%{opacity:.85}50%{opacity:1}}
.fl{transform-origin:50% 100%}
.flk1{animation:flick 2.4s ease-in-out infinite}
.flk2{animation:flick 3.1s ease-in-out infinite .35s}
.flk3{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}}
.spk1{animation:rise 4.2s ease-out infinite}
.spk2{animation:rise 5.4s ease-out infinite 1.4s}
.spk3{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}}


/* ---- definition centrepiece ---- */
.plate{position:relative;background:#000;overflow:hidden;padding:74px 0 88px;text-align:center}
.plate .glow{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:radial-gradient(circle at 50% 44%,rgba(139,38,23,.30) 0%,rgba(0,0,0,1) 64%)}
.plate .w{position:relative;z-index:2}
.plate .lead-in{font-family:var(--geo);font-size:13px;letter-spacing:.3em;text-transform:uppercase;
 color:var(--rust);margin-bottom:34px}
.defn{font-family:var(--serif);font-weight:400;color:#FBF6EF;
 font-size:clamp(26px,3.5vw,47px);line-height:1.28;letter-spacing:-.006em;
 max-width:22ch;margin:0 auto}
.defn .b{color:var(--rust)}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;
 border-top:1px solid rgba(242,235,224,.16)}
.keys div{padding:26px 20px 0;border-right:1px solid rgba(242,235,224,.16)}
.keys div:last-child{border-right:none}
.keys .n{font-family:var(--geo);font-size:12px;letter-spacing:.26em;color:var(--rust);margin-bottom:12px}
.keys .t{font-family:var(--geo);font-weight:400;font-size:17.5px;line-height:1.45;color:var(--cream)}

/* ---- chapter numeral ---- */
.gate .num{font-family:var(--geo);font-size:12.5px;letter-spacing:.34em;text-transform:uppercase;
 color:var(--rust);margin-bottom:22px}

/* ---- in-page heading on cream ---- */
.h2c{font-family:var(--geo);font-weight:500;font-size:clamp(23px,2.6vw,32px);
 line-height:1.3;color:var(--char);margin:2.4em 0 .2em;letter-spacing:-.004em}
.h2c .b{color:var(--rust-d)}
.h2c+p{margin-top:1.1em}
.rule{width:64px;height:1px;background:var(--rust);opacity:.7;margin:.9em 0 0}

/* ---- quiet inline invitation inside the reading ---- */
.aside{border-left:2px solid rgba(184,69,42,.45);padding:4px 0 4px 26px;margin:2.4em 0}
.aside p{margin:0;font-size:18px;color:#4A403A}
.aside a{color:var(--rust-d);font-weight:600;border-bottom:1px solid rgba(184,69,42,.4)}

/* ---- opening aperture emblem ---- */
.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:.28;transform:scaleY(.6)}50%{opacity:.95;transform:scaleY(1)}}
.emb-ap g{transform-box:fill-box;transform-origin:center}
.emb-ap .dot{fill:#B8452A;stroke:none;animation:corepulse 2.6s ease-in-out infinite}


/* ================= 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){
 .phero .inner{padding:64px 0}
 .gate{padding:12px 0 44px}
 .cross{height:140px}
 .paper.pad.rd{padding:44px 0 32px}
 .paper.pad.rd .w{padding:0 24px}
 .door{padding:56px 0}.door .emblem{height:104px}
 .curious{font-size:19px}
 .keys{grid-template-columns:1fr 1fr}
 .keys div{border-right:none;border-top:1px solid rgba(242,235,224,.12);padding:20px 12px 0}
 .keys div:nth-child(-n+2){border-top:none}
 .plate{padding:52px 0 62px}
}

/* --- Redefining Health: the definition must read as prose, not a poem --- */
.phero{min-height:auto}
.phero .inner{padding:76px 0 30px}
.plate{padding:30px 0 78px}
.plate .lead-in{margin-bottom:26px}
.defn{font-family:var(--geo);font-weight:400;
 font-size:clamp(21px,2.5vw,34px);line-height:1.44;letter-spacing:.002em;
 max-width:min(950px,55ch);text-align:left;margin-left:auto;margin-right:auto}
.defn .b{font-weight:500}
@media(max-width:900px){
 .phero .inner{padding:56px 0 22px}
 .plate{padding:22px 0 54px}
 .defn{font-size:clamp(19px,3vw,23px);line-height:1.5;max-width:40ch}
}

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