/* ============================================================================
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:17.5px;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:12px;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-1600.webp");background-position:100% 38%;}
.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%);
}
}
@media (max-width:560px){
.cover::before{background-position:92% 38%;}
}
/* 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:12px;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(19px,2.6vw,24px);text-shadow:0 1px 16px rgba(0,0,0,.7);}
.cover .firmline{margin-top:46px;font-size:12px;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(24px,3.4vw,31px);margin:52px 0 16px;font-weight:600;}
.lede{font-size:clamp(18px,2.4vw,21px);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(21px,3vw,27px);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:20px;margin-bottom:3px;}
.layerrow p{margin:0;color:var(--muted);font-size:15.5px;}
.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:21px;margin-bottom:10px;}
.cardx p{margin:0;font-size:15.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:15.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(18px,2.4vw,21px);line-height:1.45;}
.src{font-size:13.5px;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:24px;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:15px;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:15.5px;padding:13px 14px;}
.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:12.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:19px;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:560/830;width:100%;max-width:320px;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:cover;object-position:center 45%;}
.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(--muted);font-size:15px;}
/* ---- gate body: props + form live BELOW the hero on solid ground --------
(never inside the photo section, so the image is only ever stretched to
one viewport and the form always sits on calm, dark, legible ground) ---- */
.gate-body{position:relative;padding:64px 0 30px;}
.gate-body::before{ /* faint afterglow continuing the sunset downward */
content:"";position:absolute;top:0;left:0;right:0;height:300px;pointer-events:none;
background:radial-gradient(62% 100% at 50% 0%, rgba(182,92,40,.13), transparent 72%);
}
.gate-body .wrap{text-align:center;}
/* ---- 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:13px;letter-spacing:.06em;
color:var(--muted);}
.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:16px;padding:13px 14px;}
.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:12.5px;color:var(--muted);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 16px 34px;font-size:16.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:12.5px;color:var(--muted);line-height:1.75;}
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:15px;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:4px 10px;border-radius:999px;text-decoration:none;
font-size:11.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:11.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:13px;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:9px 18px;border:1px solid var(--hair-amber);border-radius:999px;
font-size:11.5px;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:19px;color:var(--muted);
min-width:74px;letter-spacing:.06em;}
.series-index .nm{font-size:16px;color:var(--soft);flex:1;}
.series-index .st{font-size:11px;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;}
}
/* ============================================================================
PART III "CLEARING CUSTOMS" — palette variant (appended per-paper override).
Keyed to this paper's hero photograph: deep twilight over the range, the
last rose-ember glow behind the summit. Midnight indigo ground, rose-brass
accents. Same system, different hour of the same flight.
============================================================================ */
:root{
--sky-0:#0B0F1E; /* midnight indigo — the photo's night sky */
--sky-1:#101627;
--sky-2:#182036; /* panel — deep slate blue */
--sky-3:#212B47;
--horizon:#B0543C; /* rose ember at the horizon line */
--amber:#D8926A; /* primary accent — rose brass (5.9:1 on sky-0) */
--amber-hi:#F4C6A8; /* highlight, large type only */
--ivory:#F1EFEA;
--soft:#C9CDDA; /* body text — 9.4:1 on sky-0 */
--muted:#8D93A8; /* captions — 4.9:1 on sky-0 */
--hair:rgba(241,239,234,.14);
--hair-amber:rgba(216,146,106,.42);
}
/* buttons pick up the rose-brass instead of the flagship's amber */
.btn{background:linear-gradient(180deg,#F0AC85 0%,var(--amber) 55%,#B96F4A 100%);}
.trk-cta{background:linear-gradient(180deg,#F0AC85,var(--amber) 60%,#B96F4A);}
.gate-body::before{background:radial-gradient(62% 100% at 50% 0%, rgba(176,84,60,.14), transparent 72%);}