/* ============================================================================
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){
.cover::before{background-image:url("assets/hero-1600.webp");}
}
/* 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(--muted);font-weight:500;margin-bottom:34px;}
.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;}
}