/* ============================================================================
THE PROSPERITY PAPERS — shared design system
Golden-hour: deep charcoal/navy base rising into warm amber horizon glow.
Cormorant Garamond (display, caps + letterspacing) · Author (body).
Used by every paper in the 2026 series. Copy this file into each paper's
deploy folder as series.css — see README.md.
============================================================================ */
:root{
/* -- golden-hour palette, keyed to the hero photograph ------------------ */
--sky-0:#120D12; /* warm near-black — the photo's mountain darks */
--sky-1:#191219; /* upper sky */
--sky-2:#221824; /* panel — espresso plum */
--sky-3:#2C202B; /* raised panel */
--horizon:#B65C28; /* deep burnt orange at the horizon line */
--amber:#E09A4F; /* primary accent — warm amber */
--amber-hi:#F2C382; /* highlight amber, large type only */
--ivory:#F4EEE2; /* headline / emphasis text */
--soft:#CDC7BA; /* body text — 9.2:1 on --sky-0 */
--muted:#948D7E; /* captions, metadata — 4.9:1 on --sky-0 */
--hair:rgba(244,238,226,.14);
--hair-amber:rgba(224,154,79,.38);
--display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--body:"Author",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
--maxw:800px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:dark;}
body{
margin:0;background:var(--sky-0);color:var(--soft);
font-family:var(--body);font-size:21px;line-height:1.72;font-weight:400;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
position:relative;
}
body::after{ /* fine photographic grain over everything, barely there */
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
background-size:240px 240px;
}
::selection{background:var(--amber);color:var(--sky-0);}
h1,h2,h3,h4{font-family:var(--display);color:var(--ivory);font-weight:600;
line-height:1.1;text-wrap:balance;margin:0;}
strong,b{color:var(--ivory);font-weight:500;}
em{font-style:italic;}
a{color:var(--amber);}
p{margin:0 0 18px;}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* ---- the "—— to ——" rule motif, echoing the book cover ------------------ */
.rulelab{display:flex;align-items:center;gap:20px;
font-family:var(--body);font-size:13px;font-weight:500;letter-spacing:.34em;
text-transform:uppercase;color:var(--amber);white-space:nowrap;}
.rulelab::before,.rulelab::after{content:"";flex:1;height:1px;min-width:24px;
background:linear-gradient(90deg,transparent,var(--hair-amber));}
.rulelab::after{background:linear-gradient(90deg,var(--hair-amber),transparent);}
.rulelab.left{justify-content:flex-start;}
.rulelab.left::before{display:none;}
.rulelab.left::after{flex:1;}
/* ---- cover: the hero photograph -----------------------------------------
Golden-hour jet over the range (assets/hero.webp — each paper ships its
own). Two scrims sit over the photo: a vertical fade that darkens the
cloud deck behind the headline and dissolves the bottom edge into the
page ground, and a soft center-column dim behind the text stack that
leaves the jet and sun at the edges vivid. ------------------------------ */
.cover{
position:relative;display:flex;align-items:center;
min-height:100vh;min-height:100svh; /* vh first: old Safari lacks svh */
text-align:center;overflow:hidden;
background-color:var(--sky-0);
}
.cover::before{ /* the photograph, on its own layer so it can drift */
content:"";position:absolute;inset:0;z-index:0;
background:url("assets/hero.webp") center 38% / cover no-repeat;
}
.cover::after{ /* scrims: vertical fade + center-column dim */
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:
linear-gradient(180deg,
rgba(16,11,15,.78) 0%, rgba(16,11,15,.34) 26%,
rgba(16,11,15,.14) 46%, rgba(16,11,15,.32) 68%,
rgba(18,13,18,.86) 90%, var(--sky-0) 100%),
linear-gradient(90deg,
rgba(16,11,15,0) 2%, rgba(16,11,15,.42) 26%,
rgba(16,11,15,.42) 74%, rgba(16,11,15,0) 98%);
}
@media (max-width:800px){
/* portrait: the jet centers in the upper half (fuselage on the centerline,
wing sweeping off the left edge), and the text block drops to the lower
third over the dark mountains so nothing overlaps the aircraft */
.cover{align-items:flex-end;}
.cover .wrap{padding-bottom:9vh;padding-bottom:9svh;}
.cover .series{margin-bottom:22px;}
.cover::before{background-image:url("assets/hero-mobile.webp");background-position:66% 30%;}
.cover::after{
background:
linear-gradient(180deg,
rgba(16,11,15,.72) 0%, rgba(16,11,15,.24) 24%,
rgba(16,11,15,.10) 44%, rgba(16,11,15,.38) 66%,
rgba(18,13,18,.88) 90%, var(--sky-0) 100%),
linear-gradient(90deg,
rgba(16,11,15,0) 2%, rgba(16,11,15,.26) 26%,
rgba(16,11,15,.26) 74%, rgba(16,11,15,0) 98%);
}
}
/* gate on small screens: the photo backs only the first viewport, so the
tall form section never stretches it (stretching = the old blur) */
@media (max-width:800px){
.gatecover::before,.gatecover::after{bottom:auto;height:100vh;height:100svh;}
}
/* the drift stays desktop-only: on small screens the crop is already tight,
and any transform scale costs sharpness the phone can't spare */
@media (min-width:800px) and (prefers-reduced-motion:no-preference){
.cover::before{animation:kenburns 46s ease-in-out alternate infinite;}
@keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.03) translateY(-.4%);}}
}
.cover .wrap{width:100%;
padding-top:10vh;padding-top:10svh;
padding-bottom:14vh;padding-bottom:14svh;}
.cover .series{font-size:13px;letter-spacing:.4em;text-transform:uppercase;
color:var(--soft);font-weight:500;margin-bottom:34px;
text-shadow:0 1px 4px rgba(11,14,22,.95), 0 0 16px rgba(11,14,22,.85);}
.cover h1{
font-size:clamp(40px,8.6vw,88px);font-weight:600;letter-spacing:.14em;
text-transform:uppercase;line-height:1.14;text-indent:.14em; /* balances tracking */
text-shadow:0 2px 26px rgba(0,0,0,.6);
}
.cover h1 .amber{color:var(--amber-hi);}
@media (prefers-reduced-motion:no-preference){
.cover h1 .amber{
background:linear-gradient(100deg, var(--amber-hi) 0%, #FFF6DF 16%, var(--amber-hi) 32%);
background-size:260% 100%;background-position:120% 0;
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
animation:goldsheen 6.5s ease-in-out 1.4s 3 forwards; /* three slow passes, then still */
}
@keyframes goldsheen{to{background-position:-140% 0;}}
}
.cover .sub{color:var(--ivory);max-width:36em;
margin:30px auto 0;font-style:italic;font-family:var(--display);
font-size:clamp(20px,2.8vw,25px);text-shadow:0 1px 16px rgba(0,0,0,.7);}
.cover .firmline{margin-top:46px;font-size:13px;letter-spacing:.3em;
text-transform:uppercase;color:var(--soft);
text-shadow:0 1px 4px rgba(11,14,22,.95), 0 0 18px rgba(11,14,22,.85);}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
width:1px;height:48px;overflow:hidden;z-index:1;}
.scrollcue::before{content:"";position:absolute;left:0;top:-48px;width:1px;height:48px;
background:linear-gradient(var(--amber),transparent);
animation:drop 2.6s ease-in-out infinite;}
@keyframes drop{60%{transform:translateY(96px);}100%{transform:translateY(96px);}}
/* ---- sections ----------------------------------------------------------- */
section{position:relative;padding:104px 0 64px;scroll-margin-top:56px;}
section .rulelab{margin-bottom:34px;}
section h2{font-size:clamp(36px,6vw,56px);margin-bottom:26px;font-weight:600;}
section h3{font-size:clamp(26px,3.6vw,33px);margin:52px 0 16px;font-weight:600;}
.lede{font-size:clamp(21px,2.9vw,25px);color:var(--ivory);}
.lede.dcap::first-letter{ /* editorial drop cap on the opening passage */
font-family:var(--display);font-weight:600;color:var(--amber-hi);
font-size:3.4em;line-height:.8;float:left;padding:8px 14px 0 0;
}
.pull{border-left:1px solid var(--amber);padding:6px 0 6px 26px;margin:34px 0;
font-family:var(--display);font-size:clamp(22px,3.2vw,28px);color:var(--ivory);
line-height:1.35;font-style:italic;}
.pull b{font-weight:600;font-style:normal;}
/* layered diagram */
.layers{margin:40px 0;}
.layerrow{display:grid;grid-template-columns:minmax(64px,var(--w)) 1fr;gap:22px;
align-items:center;padding:18px 0;border-bottom:1px solid var(--hair);}
.layerrow:last-child{border-bottom:none;}
.layerrow .bar{height:60px;border:1px solid var(--hair-amber);border-radius:3px;
display:flex;align-items:center;justify-content:center;position:relative;
background:linear-gradient(120deg,rgba(224,154,79,.16),var(--sky-2) 70%);
font-family:var(--display);font-size:25px;color:var(--amber);}
.layerrow .bar::after{content:"";position:absolute;right:-11px;top:50%;width:10px;height:1px;background:var(--amber);}
.layerrow h4{font-size:23px;margin-bottom:3px;}
.layerrow p{margin:0;color:var(--soft);font-size:18px;}
.l1{--w:20%;} .l2{--w:40%;} .l3{--w:60%;}
/* strategy cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0;}
.grid.two{grid-template-columns:repeat(2,1fr);}
.cardx{position:relative;background:linear-gradient(170deg,var(--sky-3),var(--sky-2));
border:1px solid var(--hair);border-radius:5px;padding:26px 24px 24px;
transition:transform .35s ease,border-color .35s ease;}
.cardx::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
background:linear-gradient(90deg,var(--amber),transparent);}
.cardx:hover{transform:translateY(-4px);border-color:var(--hair-amber);}
.cardx h4{font-size:24px;margin-bottom:10px;}
.cardx p{margin:0;font-size:18.5px;color:var(--soft);}
.cardx .ord{font-size:11px;letter-spacing:.28em;color:var(--amber);
text-transform:uppercase;font-weight:500;font-family:var(--body);
display:block;margin-bottom:12px;}
/* freedoms / benefit rows */
.freedoms{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:30px 0;}
.freedom{border-top:1px solid var(--hair);padding-top:16px;font-size:18.5px;}
.freedom::before{content:"⟶";color:var(--amber);display:block;margin-bottom:8px;font-size:18px;}
.note{background:var(--sky-2);border:1px solid var(--hair);border-left:2px solid var(--amber);
border-radius:5px;padding:20px 24px;margin:34px 0;color:var(--ivory);
font-family:var(--display);font-size:clamp(21px,2.9vw,24px);line-height:1.45;}
.src{font-size:16px;color:var(--muted);font-style:italic;}
.src a{color:var(--muted);}
ul.gild{list-style:none;margin:18px 0;padding:0;}
ul.gild li{position:relative;padding:0 0 12px 30px;}
ul.gild li::before{content:"";position:absolute;left:2px;top:12px;width:14px;height:1px;background:var(--amber);}
/* conclusion */
.finale .bigq{font-family:var(--display);font-size:clamp(24px,3.8vw,34px);
color:var(--ivory);border-left:1px solid var(--amber);padding-left:26px;
margin:30px 0;line-height:1.35;font-style:italic;}
.action{font-family:var(--display);font-size:clamp(56px,11vw,120px);
color:var(--ivory);line-height:1;margin-top:34px;letter-spacing:.06em;
text-transform:uppercase;}
.action .amber{color:var(--amber-hi);font-style:italic;text-transform:none;letter-spacing:0;}
/* CTA panels + buttons */
.invite{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:stretch;margin:36px 0;}
.invite > *{min-width:0;}
.panelx{background:linear-gradient(165deg,var(--sky-3),var(--sky-2));
border:1px solid var(--hair-amber);border-radius:7px;padding:34px 30px;}
.panelx h4{font-size:27px;margin-bottom:12px;}
.btn{display:inline-block;margin-top:18px;color:#191204;
background:linear-gradient(180deg,#F0B269 0%,var(--amber) 55%,#CD8A3E 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 1px 3px rgba(0,0,0,.45);
text-decoration:none;font-weight:600;font-size:18px;letter-spacing:.05em;
border-radius:3px;padding:14px 26px;border:0;cursor:pointer;font-family:var(--body);
transition:transform .25s ease, box-shadow .25s ease;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(224,154,79,.7);}
.btn:focus-visible{outline:2px solid var(--amber-hi);outline-offset:3px;}
.btn.ghost{background:transparent;color:var(--amber-hi);
border:1px solid var(--hair-amber);box-shadow:none;}
.btn.ghost:hover{border-color:var(--amber);box-shadow:0 8px 24px -14px rgba(224,154,79,.55);}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:8px;}
.btnrow .btn{margin-top:10px;}
/* ---- inline signup mini-form (waitlist, series) --------------------------
Two-row grid: name + email share the first row, the button takes the
second at full width, so fields never get starved inside a panel. ------- */
.wl-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;}
.wl-form input{width:100%;min-width:0;background:rgba(244,238,226,.05);
border:1px solid var(--hair);border-radius:3px;color:var(--ivory);
font-family:var(--body);font-size:18px;padding:14px 15px;}
.wl-form input[type="hidden"]{display:none;}
.wl-form input::placeholder{color:rgba(148,141,126,.75);}
.wl-form input:focus{outline:none;border-color:var(--amber);
box-shadow:0 0 0 3px rgba(224,154,79,.18);}
.wl-form .btn{margin-top:0;white-space:nowrap;grid-column:1 / -1;text-align:center;}
.wl-alt{font-size:15.5px;color:var(--muted);margin-top:12px;}
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.wl-done{display:none;margin-top:18px;border-left:2px solid var(--spark, var(--amber));
border-left-color:var(--amber);padding:10px 0 10px 18px;
font-family:var(--display);font-size:22px;color:var(--ivory);line-height:1.5;}
.wl-wrap.done .wl-form,.wl-wrap.done .wl-alt{display:none;}
.wl-wrap.done .wl-done{display:block;}
@media (max-width:560px){ .wl-form{grid-template-columns:1fr;} }
@media (max-width:760px){ .invite .bookart{aspect-ratio:1402/1122;width:100%;max-width:460px;margin:0 auto;min-height:0;} }
.bookart{border-radius:7px;border:1px solid var(--hair);min-height:280px;position:relative;overflow:hidden;
background:#000;}
.bookart img{position:absolute;inset:0;width:100%;height:100%;display:block;
object-fit:contain;object-position:center;} /* full product shot, never cropped:
its black ground merges with the panel's, so letterboxing is invisible */
.bookart .spine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);
width:150px;height:200px;border-radius:4px;
background:linear-gradient(180deg,#1A1E2C 0%,#2A2027 70%,#54331D 100%);
border:1px solid var(--hair-amber);
box-shadow:0 30px 50px -20px rgba(0,0,0,.7);}
.bookart .spine::before{content:"PASSPORT\A TO\A PROSPERITY";white-space:pre;
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
text-align:center;font-family:var(--display);font-size:14px;letter-spacing:.16em;
color:var(--amber-hi);line-height:2;}
.bookart .spine::after{ /* the cover's rule motif, drawn not typed */
content:"";position:absolute;left:28%;right:28%;top:50%;height:1px;
background:linear-gradient(90deg,var(--hair-amber),transparent 38%,transparent 62%,var(--hair-amber));}
.phone{font-family:var(--display);font-size:clamp(26px,4.6vw,40px);color:var(--ivory);margin:26px 0 6px;}
.phone b{color:var(--amber-hi);font-weight:600;}
.phone a{color:inherit;text-decoration:none;}
.phone-sub{color:var(--soft);font-size:18px;}
/* ---- gate: registration above the fold ----------------------------------
Desktop: two-column hero over the photo — the story on the left, the form
card on the right, the jet flying toward it. Mobile: title, then form,
then props; the form finishes inside the first screen. ------------------ */
.gatecover .wrap.gatewrap{
max-width:1080px;display:grid;
grid-template-areas:"intro form" "props form";
grid-template-columns:1.1fr .9fr;column-gap:56px;row-gap:0;
align-items:center;text-align:left;
padding-top:7vh;padding-top:7svh;
padding-bottom:7vh;padding-bottom:7svh;
}
.gate-intro{grid-area:intro;align-self:end;}
.gatewrap .gate-props{grid-area:props;align-self:start;margin:32px 0 0;max-width:none;}
.gatewrap .gateform{grid-area:form;margin:0;width:100%;max-width:500px;justify-self:center;}
.gatecover .series{margin-bottom:20px;font-size:12.5px;letter-spacing:.3em;}
.gatecover .rulelab{margin-bottom:26px;max-width:280px;}
.gatecover h1{font-size:clamp(34px,4.6vw,58px);text-indent:0;line-height:1.16;}
.gatecover .sub{margin:22px 0 0;font-size:clamp(19px,2.3vw,23px);max-width:30em;}
@media (min-width:901px){
.gatecover::after{ /* dim the story column, keep the jet's sky vivid */
background:
linear-gradient(180deg,
rgba(16,11,15,.60) 0%, rgba(16,11,15,.26) 30%,
rgba(16,11,15,.28) 70%, rgba(18,13,18,.92) 100%),
linear-gradient(90deg,
rgba(16,11,15,.62) 0%, rgba(16,11,15,.40) 44%,
rgba(16,11,15,.08) 78%, rgba(16,11,15,0) 100%);
}
}
@media (max-width:900px){
.gatecover .wrap.gatewrap{
grid-template-areas:"intro" "form" "props";grid-template-columns:1fr;
column-gap:0;text-align:center;
padding-top:9vh;padding-top:9svh;
}
.gatecover .rulelab{margin:0 auto 22px;justify-content:center;}
.gatecover .rulelab.left::before{display:block;}
.gatecover h1{font-size:clamp(34px,7.6vw,54px);}
.gatecover .sub{margin:18px auto 0;}
.gatewrap .gateform{justify-self:stretch;max-width:560px;margin:30px auto 0;}
.gatewrap .gate-props{text-align:left;margin:38px auto 0;max-width:560px;}
}
/* ---- gate form ---------------------------------------------------------- */
.gateform{margin:40px auto 0;max-width:480px;text-align:left;
background:rgba(18,13,18,.68);border:1px solid var(--hair);border-radius:8px;
padding:26px 24px 22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.gateform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.gateform label{display:block;margin-bottom:14px;font-size:16px;letter-spacing:.06em;
color:var(--soft);}
.gateform input{width:100%;margin-top:6px;background:rgba(244,238,226,.05);
border:1px solid var(--hair);border-radius:3px;color:var(--ivory);
font-family:var(--body);font-size:18px;padding:14px 15px;}
.gateform input::placeholder{color:rgba(148,141,126,.7);}
.gateform input:focus{outline:none;border-color:var(--amber);
box-shadow:0 0 0 3px rgba(224,154,79,.18);}
.gateform .btn{width:100%;text-align:center;margin-top:8px;font-size:16px;}
.gateform .fineprint{font-size:15.5px;color:var(--soft);margin-top:14px;line-height:1.6;}
.gate-props{list-style:none;margin:38px auto 0;padding:0;max-width:560px;text-align:left;}
.gate-props li{position:relative;padding:0 0 18px 34px;font-size:19.5px;color:var(--soft);
text-shadow:0 1px 10px rgba(0,0,0,.75);}
.gate-props li::before{content:"";position:absolute;left:0;top:13px;width:20px;height:1px;background:var(--amber);}
.gate-props li b{color:var(--ivory);}
/* ---- footer ------------------------------------------------------------- */
footer{border-top:1px solid var(--hair);margin-top:90px;padding:40px 0 70px;
font-size:16px;color:var(--soft);line-height:1.8;}
footer .fp{letter-spacing:.28em;text-transform:uppercase;margin-bottom:14px;color:var(--amber);}
/* ---- reading tracker: slim bar pinned to the top of the brief -----------
Appears once the reader scrolls past the cover. Shows a 2px amber
progress fill and which section you are in. JS-only (hidden without). -- */
.tracker{
position:fixed;top:0;left:0;right:0;z-index:60;
background:rgba(18,13,18,.82);
backdrop-filter:blur(12px) saturate(1.05);-webkit-backdrop-filter:blur(12px) saturate(1.05);
border-bottom:1px solid var(--hair);
transform:translateY(-100%);transition:transform .45s cubic-bezier(.3,.6,.3,1);
display:none;
}
.js .tracker{display:block;}
.tracker.show{transform:translateY(0);}
.trk-bar{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(244,238,226,.07);}
.trk-bar span{display:block;height:100%;width:0;
background:linear-gradient(90deg,var(--horizon),var(--amber) 60%,var(--amber-hi));}
.trk-inner{max-width:var(--maxw);margin:0 auto;padding:12px 24px 11px;
display:flex;align-items:center;justify-content:space-between;gap:18px;}
.trk-title{font-family:var(--display);font-size:18px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ivory);white-space:nowrap;}
.trk-secs{list-style:none;display:flex;gap:4px;margin:0;padding:0;}
.trk-secs a{display:block;padding:5px 11px;border-radius:999px;text-decoration:none;
font-size:13.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--muted);transition:color .3s ease;}
.trk-secs a:hover{color:var(--soft);}
.trk-secs li.on a{color:var(--amber-hi);}
.trk-secs li.on a{position:relative;}
.trk-secs li.on a::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;
height:1px;background:var(--amber);}
.trk-cta{white-space:nowrap;font-size:12.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;text-decoration:none;color:#191204;
background:linear-gradient(180deg,#F0B269,var(--amber) 60%,#CD8A3E);
border-radius:999px;padding:8px 16px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.trk-cta:hover{filter:brightness(1.06);}
@media (max-width:900px){ .trk-cta{display:none;} }
@media (max-width:760px){
.trk-title{display:none;}
.trk-inner{justify-content:center;padding:10px 10px 9px;}
.trk-secs a{padding:4px 7px;letter-spacing:.12em;}
}
/* ---- section furniture: numerals, glows, dividers ----------------------- */
section{overflow:visible;}
.watermark{ /* enormous outlined numeral behind each main section */
position:absolute;top:34px;right:-14px;z-index:-1;pointer-events:none;
font-family:var(--display);font-weight:500;line-height:1;
font-size:clamp(170px,24vw,300px);
color:transparent;-webkit-text-stroke:1px rgba(224,154,79,.15);
user-select:none;
}
@supports not (-webkit-text-stroke:1px black){ .watermark{color:rgba(224,154,79,.06);} }
.content section{position:relative;z-index:0;}
/* faint horizon glows breathing at alternating edges */
.content section:nth-of-type(odd)::before{
content:"";position:absolute;top:12%;left:-38vw;width:60vw;height:70%;z-index:-2;
background:radial-gradient(50% 50% at 50% 50%, rgba(182,92,40,.09), transparent 70%);
pointer-events:none;
}
.content section:nth-of-type(even)::before{
content:"";position:absolute;top:12%;right:-38vw;width:60vw;height:70%;z-index:-2;
background:radial-gradient(50% 50% at 50% 50%, rgba(224,154,79,.07), transparent 70%);
pointer-events:none;
}
/* ornament between sections: hairline meeting a gold point */
.content section + section::after{
content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
width:min(420px,72%);height:7px;pointer-events:none;
background:
radial-gradient(circle 3px at 50% 50%, var(--amber) 0 2px, transparent 3px),
linear-gradient(90deg,transparent,var(--hair-amber) 26%,transparent 49%,transparent 51%,var(--hair-amber) 74%,transparent) 50% 50%/100% 1px no-repeat;
}
/* ---- stat pair (the 70 / 90 treatment) ---------------------------------- */
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:38px 0 10px;
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.stat{padding:28px 26px;text-align:center;}
.stat + .stat{border-left:1px solid var(--hair);}
.stat-n{display:block;font-family:var(--display);font-weight:600;line-height:1;
font-size:clamp(58px,8.6vw,92px);color:var(--amber-hi);font-variant-numeric:tabular-nums;}
.stat-n i{font-style:normal;font-size:.5em;vertical-align:.42em;color:var(--amber);}
.stat-l{display:block;margin-top:10px;font-size:16px;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);line-height:1.7;}
@media (max-width:560px){
.statrow{grid-template-columns:1fr;}
.stat + .stat{border-left:none;border-top:1px solid var(--hair);}
}
/* ---- "next leg" chip: becomes a link when the next paper releases -------
While unreleased: Next leg · … · September 15
Once live: swap the for Read Part II · … */
.morelink{display:inline-flex;align-items:center;gap:12px;margin:30px 0 0;
padding:11px 20px;border:1px solid var(--hair-amber);border-radius:999px;
font-size:14px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
color:var(--amber);text-decoration:none;}
.morelink::before{content:"";width:16px;height:1px;background:var(--amber);flex:0 0 auto;}
a.morelink:hover{border-color:var(--amber);box-shadow:0 8px 24px -16px rgba(224,154,79,.6);}
a.morelink[href^="#"]::after{content:"↓";font-size:13px;line-height:1;}
/* ---- the 2026 series index ---------------------------------------------- */
.series-index{margin:40px 0 0;border-top:1px solid var(--hair);}
.series-index li{list-style:none;display:flex;align-items:baseline;gap:20px;
padding:16px 4px;border-bottom:1px solid var(--hair);}
.series-index{padding:0;}
.series-index .pt{font-family:var(--display);font-size:21px;color:var(--muted);
min-width:74px;letter-spacing:.06em;}
.series-index .nm{font-size:19px;color:var(--soft);flex:1;}
.series-index .st{font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.series-index li.now .pt,.series-index li.now .nm{color:var(--ivory);}
.series-index li.now .pt{color:var(--amber-hi);}
.series-index li.now .st{color:var(--amber);}
/* ---- scroll reveal (JS adds .in; no-JS shows everything) ---------------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s ease;}
.js .rv.in{opacity:1;transform:none;}
/* the section rules draw themselves in as they arrive */
.js .rulelab.rv::before,.js .rulelab.rv::after{
transform:scaleX(0);transition:transform 1.15s cubic-bezier(.25,.6,.3,1) .2s;}
.js .rulelab.rv::before{transform-origin:right;}
.js .rulelab.rv::after{transform-origin:left;}
.js .rulelab.rv.in::before,.js .rulelab.rv.in::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.scrollcue::before,.cover::before{animation:none;}
.js .rv{opacity:1;transform:none;transition:none;}
.js .rulelab.rv::before,.js .rulelab.rv::after{transform:none;transition:none;}
.cardx,.btn{transition:none;}
}
@media (max-width:760px){
.grid,.grid.two,.freedoms{grid-template-columns:1fr;}
.invite{grid-template-columns:1fr;}
.gateform .row{grid-template-columns:1fr;}
.layerrow{grid-template-columns:minmax(56px,var(--w)) 1fr;gap:14px;}
section{padding:78px 0 48px;}
.cover h1{letter-spacing:.1em;text-indent:.1em;}
}
@media print{
.scrollcue,.tracker,.watermark{display:none !important;}
.content section::before,.content section + section::after{display:none;}
:root{--sky-0:#fff;--sky-1:#fff;--sky-2:#faf7f0;--sky-3:#f4efe4;
--ivory:#111;--soft:#222;--muted:#555;--hair:#ccc;
--amber:#8a5a1e;--amber-hi:#8a5a1e;--horizon:#8a5a1e;
--hair-amber:rgba(138,90,30,.5);}
html{color-scheme:light;}
.cover{min-height:auto;background:#fff;}
.cover h1,.cover .sub,.gate-props li{text-shadow:none;}
.gateform{background:#fff;}
.js .rv{opacity:1;transform:none;}
}
/* ---- gate, small phones: compress the form so Register fits the fold ---- */
@media (max-width:560px){
.gatecover .series{font-size:11px;margin-bottom:14px;}
.gatecover .rulelab{margin-bottom:16px;}
.gatecover .sub{font-size:18.5px;}
.gatewrap .gateform{margin-top:22px;padding:18px 16px 14px;}
.gatewrap .gateform label{margin-bottom:9px;font-size:15px;}
.gatewrap .gateform input{padding:12px 13px;font-size:17px;margin-top:4px;}
.gatewrap .gateform .row{grid-template-columns:1fr 1fr;gap:10px;}
.gatewrap .gateform .btn{padding:12px 20px;}
.gatewrap .gateform .fineprint{margin-top:10px;font-size:14.5px;}
}
/* ---- gate, portrait screens: settle the title zone over the jet ---------
The jet band sits behind the title on portrait gates; this scrim keeps it
present but subdued so the type owns the top of the page. -------------- */
@media (max-width:800px){
.gatecover::after{
background:
linear-gradient(180deg,
rgba(16,11,15,.74) 0%, rgba(16,11,15,.62) 30%,
rgba(16,11,15,.42) 54%, rgba(16,11,15,.46) 80%,
rgba(18,13,18,.90) 96%, var(--sky-0) 100%),
linear-gradient(90deg,
rgba(16,11,15,0) 2%, rgba(16,11,15,.20) 26%,
rgba(16,11,15,.20) 74%, rgba(16,11,15,0) 98%);
}
}
/* tablets: slide the jet right so its nose clears the title column */
@media (min-width:561px) and (max-width:800px){
.cover::before{background-position:52% 30%;}
}