:root{
--display:'Marcellus',Georgia,serif;
--body:'DM Sans',system-ui,-apple-system,sans-serif;
--paper:#F9F9F6;--paper-rgb:249,249,246;--card:#FFFFFF;--cream:#FBF6E9;--linen:#EBE9E2;--wheat:#F8F0DA;--earth:#EDE3D0;
--ink:#1E2A1C;--body-ink:#4A5546;--soft-ink:#5E6659;
--forest:#26331F;--forest-deep:#1A2416;--band-rgb:26,36,22;
--moss:#4F6647;--sage:#93A489;
--gold:#C6A24F;--gold-rgb:198,162,79;--gold-lit:#E8CE86;--gold-pale:#F6EBCD;--gold-ink:#7A5D1A;--gold-deep:#7A5C18;
--line:rgba(198,162,79,.4);--line-soft:rgba(198,162,79,.22);--line-dark:rgba(232,206,134,.34);
--terra:#9E5346;--terra-rgb:158,83,70;--terra-pale:#F6E7E1;
--on-dark:#FCFBF4;--on-dark-rgb:250,248,236;
--rc:28px;--ri:24px;--rs:18px;
--sh:0 8px 30px rgba(30,42,28,.06);
--sh-l:0 18px 56px rgba(30,42,28,.11);
--gutter:clamp(22px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--gold-deep)}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;font-weight:400}
input,button,summary{font-family:inherit}
summary::-webkit-details-marker{display:none}
summary{list-style:none;cursor:pointer}
::selection{background:var(--gold-pale);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes turn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[data-rail]{scrollbar-width:none}
[data-rail]::-webkit-scrollbar{display:none}
[data-marquee]{animation:mq 68s linear infinite}
[data-marquee]:hover{animation-play-state:paused}
[data-turn]{animation:turn 180s linear infinite}
[data-turn-r]{animation:turn 240s linear infinite reverse}
[data-turn-s]{animation:turn 300s linear infinite}
[data-turn-sr]{animation:turn 380s linear infinite reverse}
[data-turn-xs]{animation:turn 560s linear infinite}
details[open] [data-chev]{transform:rotate(45deg)}
@media(min-width:1081px){[data-navtoggle],[data-mobilemenu]{display:none!important}}
@media(max-width:1080px){
[data-navlinks]{display:none!important}
[data-two],[data-three],[data-four],[data-feature]{grid-template-columns:1fr!important}
[data-herogrid]{grid-template-columns:1fr!important;gap:40px!important}
[data-heropic]{height:76vw!important;max-height:520px!important}
[data-featurepic]{min-height:300px!important;order:-1!important}
[data-fabig]{font-size:40px!important}
}
@media(max-width:720px){[data-three],[data-four]{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-marquee],[data-breath],[data-turn],[data-turn-r],[data-turn-s],[data-turn-sr],[data-turn-xs]{animation:none!important}}
/* --- shell ------------------------------------------------------------- */
.page{min-height:100vh;background:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:12px 18px;border-radius:8px;z-index:200}
.skip:focus{left:12px;top:12px}
.hdr{position:sticky;top:14px;z-index:100;display:flex;justify-content:center;padding:14px 16px 0}
.navbar{display:flex;align-items:center;gap:20px;background:var(--cream);border-radius:999px;padding:8px 8px 8px 26px;box-shadow:0 6px 26px rgba(30,42,28,.10);max-width:100%;transition:box-shadow .4s ease,padding .4s ease,background-color .4s ease}
.hdr.is-stuck .navbar{box-shadow:0 14px 40px rgba(30,42,28,.18);background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand img{width:30px;height:30px;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(-9deg) scale(1.1)}
.brand span{font-family:var(--display);font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.navlinks{display:flex;align-items:center;gap:19px;font-size:14.5px;color:var(--ink)}
.navlinks a{position:relative;padding:4px 0;transition:color .25s ease}
.navlinks a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-deep);transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.navlinks a:hover::after{transform:scaleX(1)}
.navlinks a[aria-current=page]{color:var(--gold-deep)}
.navlinks a[aria-current=page]::after{transform:scaleX(1)}
/* The "Private work" disclosure. The menu is held open by :hover, by :focus-within and
   by the button's own aria-expanded, so it works with a pointer, with a keyboard and with
   a tap. The menu's own ::before bridges the gap between the pill and the panel, so the
   pointer can cross it without the menu closing underneath. */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop-btn{font-family:var(--body);font-size:14.5px;font-weight:400;line-height:1.4;color:var(--ink);background:none;border:0;padding:4px 0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .25s ease}
.navdrop-btn:hover,.navdrop-btn[aria-expanded=true],.navdrop-btn.is-current{color:var(--gold-deep)}
.navdrop-chev{flex:none;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s ease}
.navdrop-btn[aria-expanded=true] .navdrop-chev{transform:translateY(1px) rotate(-135deg)}
.navdrop-menu{position:absolute;top:calc(100% + 17px);left:-18px;min-width:274px;background:var(--cream);border-radius:22px;padding:10px;box-shadow:0 16px 44px rgba(30,42,28,.16);display:flex;flex-direction:column;z-index:120;opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .24s ease,transform .24s ease,visibility .24s}
.navdrop-menu::before{content:'';position:absolute;left:0;right:0;top:-17px;height:17px}
.navdrop:hover .navdrop-menu,.navdrop:focus-within .navdrop-menu,.navdrop-btn[aria-expanded=true]+.navdrop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.navlinks .navdrop-menu a{display:block;padding:12px 16px;border-radius:15px;font-size:15px;line-height:1.4;white-space:nowrap;color:var(--ink);transition:background-color .2s ease,color .2s ease}
.navlinks .navdrop-menu a::after{display:none}
.navdrop-menu a:hover{background:var(--wheat);color:var(--gold-deep)}
.navdrop-menu a[aria-current=page]{color:var(--gold-deep)}
.navdrop-note{margin-left:6px;color:#5E6659}
.navdrop-menu a:hover .navdrop-note,.navdrop-menu a[aria-current=page] .navdrop-note{color:var(--gold-deep)}
.navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;border:1px solid rgba(30,42,28,.12);background:var(--cream);cursor:pointer;color:var(--ink);flex:none;transition:background-color .25s ease,transform .25s ease}
.navtoggle:hover{background:var(--wheat)}
.navtoggle:active{transform:scale(.94)}
.btn{display:inline-block;position:relative;font-family:var(--body);font-size:15px;font-weight:500;padding:17px 32px;border-radius:999px;border:0;cursor:pointer;text-align:center;text-decoration:none;transition:background-color .3s ease,color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
a.btn-primary,button.btn-primary,.btn-primary{background:var(--gold-deep);color:#fff;box-shadow:0 4px 16px rgba(122,92,24,.20)}
a.btn-primary:hover,button.btn-primary:hover,.btn-primary:hover{background:#63490F;color:#fff;box-shadow:0 12px 30px rgba(122,92,24,.34)}
a.btn-ghost,button.btn-ghost,.btn-ghost{background:var(--cream);color:var(--ink);border:1px solid var(--line)}
a.btn-ghost:hover,button.btn-ghost:hover,.btn-ghost:hover{background:var(--wheat);color:var(--ink);box-shadow:0 12px 30px rgba(30,42,28,.12)}
.btn-nav{font-size:14.5px;padding:14px 24px;white-space:nowrap}
.mobilemenu{position:sticky;top:76px;z-index:99;padding:10px 16px 0}
.mobilemenu-card{background:var(--cream);border-radius:24px;padding:14px 20px;box-shadow:0 10px 30px rgba(30,42,28,.14);display:flex;flex-direction:column;font-size:16px}
.mobilemenu-card a{padding:13px 0;border-top:1px solid rgba(30,42,28,.08);transition:color .2s ease,padding-left .25s ease}
.mobilemenu-card a:first-child{border-top:0}
.mobilemenu-card a:hover{color:var(--gold-deep);padding-left:6px}
.mobilemenu-card a[aria-current=page]{color:var(--gold-deep)}
.foot{background:var(--forest-deep);padding:clamp(50px,6vw,72px) clamp(24px,6vw,80px) 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:36px;max-width:1300px;margin:0 auto 44px}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img{width:34px;height:34px;display:block}
.foot-brand span{font-family:var(--display);font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark)}
.foot-blurb{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(252,251,244,.6)}
/* The brand line. It sits inside the blurb rather than above it so the footer keeps one
   paragraph, and it is lifted out of the blurb's 60% white — the line is the one thing in
   this column a reader is meant to remember, and 60% reads as small print. */
.foot-line{display:block;margin-bottom:8px;font-family:var(--display);font-size:15.5px;line-height:1.5;color:rgba(252,251,244,.9)}
.foot-head{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(252,251,244,.5);margin:0 0 16px;font-weight:500}
.foot-list{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none;font-size:15px;color:rgba(252,251,244,.85)}
.foot-list a{transition:color .22s ease,padding-left .3s cubic-bezier(.2,.8,.2,1);display:inline-block}
.foot-list a:hover{color:#fff;padding-left:5px}
.foot-social{display:flex;gap:12px;margin-top:20px}
.foot-social a{width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:var(--on-dark);transition:background-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease}
.foot-social a:hover{background:rgba(255,255,255,.10);border-color:rgba(198,162,79,.6);transform:translateY(-3px)}
.foot-legal{max-width:1300px;margin:0 auto;padding:22px 0;border-top:1px solid rgba(255,255,255,.10);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:14px;color:rgba(252,251,244,.5)}
.foot-legal a{text-decoration:underline}
.foot-legal a:hover{color:#fff}
.foot-mark{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 0 52px}
.foot-mark img{width:82px;height:82px;opacity:.92;animation:lo-breathe 8s ease-in-out infinite}
.foot-mark div{font-family:var(--display);color:var(--on-dark);font-size:clamp(24px,4.2vw,48px);letter-spacing:.26em;text-transform:uppercase;line-height:1.1;text-align:center}
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:120;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid rgba(30,42,28,.08);padding:12px 16px;display:flex;gap:12px;align-items:center}
.mobilebar-text{flex:1;min-width:0}
.mobilebar-label{font-size:13px;color:#5E6659}
.mobilebar-detail{font-size:15px;font-weight:700}
.mobilebar .btn{font-size:15px;padding:15px 24px;white-space:nowrap}
.pre-reveal{opacity:0;transform:translateY(26px)}
[data-reveal]{transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
.is-revealed{opacity:1;transform:none}

/* --- motion keyframes -------------------------------------------------- */
/* Four slow, low-amplitude loops. Every one of them is decoration on a
   pseudo-element or a mark, never on text or on anything that carries meaning, so
   switching them off in the reduced-motion block below costs the page nothing. */
@keyframes lo-breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes lo-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-4%,0) scale(1.12)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes lo-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.5);opacity:.35}}
@keyframes lo-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* --- authored pages ---------------------------------------------------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
/* 908, not 900, and the number is load-bearing. .narrow holds the hero of an authored
   page; .wrap .prose holds the copy under it. .wrap is 1240 with 24px of horizontal
   padding and .prose centres an 860px measure inside it, so body copy begins at
   (V-1240)/2 + 24 + (1192-860)/2. A .narrow of 908 with the same 24px of padding
   begins at (V-908)/2 + 24. Those are the same number at every viewport width, and at
   908 and below both collapse to the same 24px gutter. Changing either the container
   width or the measure means recomputing the other: the pair was 768/720 until the
   written pages were widened to sit beside the design's own 820-860 copy blocks. */
.narrow{max-width:908px;margin:0 auto;padding:0 24px}
.crumb{font-size:13.5px;color:#5E6659;margin:26px 0 0}
.crumb a{transition:color .2s ease}
.crumb a:hover{text-decoration:underline;color:var(--gold-deep)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--linen);color:var(--gold-deep);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:9px 18px;border-radius:999px}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:999px;background:var(--gold);flex:none;animation:lo-pulse 3.4s ease-in-out infinite}
.eyebrow-gold{background:var(--gold-pale);color:var(--gold-ink)}
.lede{font-size:19px;line-height:1.6;color:var(--body-ink)}
.hero{padding:0}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,72px);line-height:1.06;letter-spacing:-.01em;margin:26px 0 0}
.hero-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,58px);align-items:center;margin-top:34px}
.hero-split img{width:100%;max-width:100%;border-radius:34px;object-fit:cover;box-shadow:0 24px 60px rgba(30,42,28,.18)}
/* A hero photograph with the H1 floating over it on a light panel. This page used to open
   on the radial ground and carry its photograph halfway down the article, where the picture
   is the subject of the page; it opens on the picture instead. Four things make it read as
   a photograph rather than as a card with a slab on it. The frame bleeds out of the .narrow
   hero column to the same 1240 container the design's own pages use. The panel is held to
   the left of it, below the subject's eyeline, so the picture is still a picture. The frame
   is 3:2 against a source that is slightly wider, so the crop shaves the sides rather than
   cutting her hands off the bottom. And because the water in this photograph is blown out
   almost to paper white, a 50% paper fill has no visible edge of its own — so the panel
   borrows one: a clay hairline, a deep shadow, and the same bottom scrim figure.wide uses
   under its caption. Photograph, scrim and panel share one grid cell, so a headline that
   wraps to another line grows the frame instead of spilling out of the picture. */
.hero-photo{--hero-bleed:min(1192px,100vw - 48px);width:var(--hero-bleed);margin:26px 0 0;margin-left:calc(50% - var(--hero-bleed)/2)}
.hero-photo-frame{display:grid;border-radius:34px;overflow:hidden;box-shadow:0 26px 64px rgba(30,42,28,.16)}
.hero-photo-frame>img{grid-area:1/1;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%;display:block}
.hero-photo-frame::after{content:'';grid-area:1/1;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(30,42,28,.30) 0%,rgba(30,42,28,0) 54%)}
.hero-glass{grid-area:1/1;z-index:2;align-self:end;justify-self:start;max-width:min(560px,62%);margin:clamp(18px,2.6vw,34px);padding:clamp(22px,2.4vw,30px) clamp(24px,2.8vw,34px) clamp(26px,2.8vw,34px);border-radius:26px;background:rgba(249,249,246,.5);backdrop-filter:blur(18px) saturate(112%);-webkit-backdrop-filter:blur(18px) saturate(112%);border:1px solid rgba(122,92,24,.28);box-shadow:0 22px 54px rgba(30,42,28,.26)}
.hero-photo .hero-glass h1{font-size:clamp(27px,2.9vw,42px);margin:16px 0 0}
.hero-photo-note{font-size:14px;line-height:1.55;color:#5E6659;margin:16px 0 0;max-width:56ch}
/* On a tablet the panel takes the full width of the frame rather than 62% of it; on a
   phone the frame turns portrait so the photograph is still a photograph once the panel
   has taken the bottom half of it, and the headline comes down far enough that her face
   stays above the panel's top edge. */
@media(max-width:860px){
.hero-glass{max-width:none;justify-self:stretch;margin:14px}
.hero-photo .hero-glass h1{font-size:clamp(24px,4.4vw,34px);margin:14px 0 0}
}
@media(max-width:560px){
.hero-photo-frame>img{aspect-ratio:3/4;object-position:57% 50%}
.hero-glass{margin:10px;padding:20px 22px 24px}
.hero-photo .hero-glass h1{font-size:clamp(23px,5.8vw,29px)}
}
}
/* Cover art and other portrait graphics: capped so a 4:5 image cannot fill the column
   with one picture. Without this the 13 Keys cover and the episode artwork render at the
   full measure — 700px tall and taller once the grid collapses to a single column. */
.hero-split .art,.art{width:auto;max-width:min(360px,100%);height:auto;border-radius:26px;display:block}
.prose figure.cover{max-width:min(300px,100%);margin:34px auto 0}
.prose figure.cover img{width:100%;height:auto;max-height:none;border-radius:26px;object-fit:contain;box-shadow:0 18px 44px rgba(30,42,28,.15)}
.band{padding:clamp(52px,6.5vw,92px) 0;position:relative}
.band[id]{scroll-margin-top:104px}
.band-linen{background:var(--linen)}
.band-cream{background:var(--cream)}
/* The same trick as the hero ground, at a quarter of the strength: one soft aura so a
   flat fill has a direction to it. Decorative, behind the content, and it cannot affect
   layout because the band is already position:relative with its children promoted. */
.band-linen::before,.band-cream::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(72% 88% at 88% 6%,rgba(198,162,79,.10) 0%,rgba(198,162,79,0) 62%),radial-gradient(58% 74% at 4% 96%,rgba(232,206,134,.14) 0%,rgba(232,206,134,0) 66%)}
.band-linen>*,.band-cream>*{position:relative}
/* The hero ground. A radial wash rather than a flat fill, with one slow-drifting gold
   aura behind it, so the top of every authored page has the same depth the design's own
   pages get from their photographs. */
.band-hero{background:radial-gradient(118% 128% at 16% -8%,var(--wheat) 0%,var(--linen) 40%,var(--paper) 100%);padding:10px 0 clamp(46px,6vw,86px);overflow:hidden}
.band-hero::after{content:'';position:absolute;top:-16%;right:-12%;width:min(560px,62vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(198,162,79,.22) 0%,rgba(198,162,79,0) 68%);pointer-events:none;animation:lo-drift 26s ease-in-out infinite}
.band-hero>*{position:relative}
.band-dark{background:radial-gradient(120% 92% at 76% 16%,var(--moss) 0%,var(--forest) 46%,var(--forest-deep) 100%);color:var(--on-dark)}
.band-dark h2,.band-dark h3{color:var(--on-dark)}
.band-dark p,.band-dark li{color:rgba(252,251,244,.78)}
/* The written pages used to be one 800px column, which read as a narrow strip beside the
   design's full-width sections. The prose column is now a three-track grid inside a 1240px
   container: body copy sits in an 860px measure so the line length stays readable, and the
   blocks that are not body copy — headings, figures, card grids, the testimonial rail —
   are placed across all three tracks so they use the width the design pages use. Grid
   placement rather than negative margins, because margin-left is already spoken for by the
   element rules below, and specificity fights over it are how the last attempt broke. */
.prose{display:grid;grid-template-columns:minmax(0,1fr) min(860px,100%) minmax(0,1fr)}
.prose>*{grid-column:2;min-width:0}
/* Only furniture crosses the measure. An earlier version widened headings to 960 and
   figures and accordions to 900 as well, which gave one column four different left edges
   — a heading 120px to the left of its own first sentence, a figure 90px to the left of
   that. Anything a reader reads in sequence now shares the 860px measure; the blocks
   below are the ones that are deliberately the width of the container, so the offset
   reads as a decision rather than as a mistake. */
.prose>.cards,.prose>.rail,.prose>.railnav,.prose>.hero-split,.prose>.postlist,.prose>.grid-list,.prose>figure.wide,.prose>.pull,.prose>.stats,.prose>.split{grid-column:1/-1;justify-self:stretch;width:100%}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.12;margin:clamp(44px,5vw,64px) 0 0}
/* A short gold rule over every section heading. It costs one pseudo-element and it does
   the thing the written pages were missing next to the design's own: it marks where a
   section starts, and it draws the eye to the left edge the whole column now shares. */
.prose>h2{position:relative;padding-top:28px}
.prose>h2::before{content:'';position:absolute;top:0;left:0;width:48px;height:2px;background:linear-gradient(90deg,var(--gold) 0%,rgba(198,162,79,0) 100%)}
.prose>:first-child.hero,.prose>h2:first-child{padding-top:0}
.prose>h2:first-child::before{display:none}
.prose h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.2vw,27px);line-height:1.22;margin:34px 0 0}
.prose>:first-child{margin-top:0}
.prose p,.prose li{font-size:18px;line-height:1.66;color:var(--body-ink)}
.prose p{margin:16px 0 0}
.prose ul,.prose ol{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prose blockquote{margin:26px 0 0;padding:2px 0 2px 22px;border-left:2px solid var(--line);font-family:var(--display);font-size:21px;line-height:1.4}
/* Buttons, offer cards and episode tiles are anchors too, and each already owns its own
   colour. Only the links that read as links inside a sentence are painted here. */
.prose a:not(.btn):not(.card-link):not(.tile){color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .22s ease,text-decoration-color .22s ease}
.prose a:not(.btn):not(.card-link):not(.tile):hover{color:#63490F;text-decoration-thickness:2px}
.prose figure{margin:34px 0 0}
/* Portrait photographs are cropped to a frame rather than allowed to run the full height
   of the column. Landscape files are unaffected — they are shorter than the cap. */
.prose figure img{width:100%;max-height:min(560px,66vh);border-radius:28px;display:block;object-fit:cover}
/* The animated cover on /donate. Framed exactly like a photograph in the same column —
   same measure, same radius — and held at the file's own 16:9 so the frame is the whole
   picture at every width: no letterbox bars, and no reflow when the first frame decodes,
   because the box is the right shape before the video has loaded a byte. The ground
   underneath is the page's own earth rather than the browser's black. */
.prose figure.reel video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:28px;display:block;background:var(--earth);box-shadow:0 18px 44px rgba(30,42,28,.15)}
.prose figcaption{margin-top:12px;font-size:14px;color:#5E6659}
.answer{background:var(--cream);border-radius:26px;padding:clamp(26px,3vw,38px);margin:26px 0 0;box-shadow:0 4px 26px rgba(30,42,28,.05);border-left:3px solid var(--gold);transition:box-shadow .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.answer:hover{box-shadow:0 14px 44px rgba(30,42,28,.10);transform:translateY(-2px)}
.answer p{font-size:18px;line-height:1.6;color:var(--body-ink);margin:0}
.answer p+p{margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));gap:22px;margin-top:34px}
.card{background:var(--cream);border-radius:28px;padding:32px 30px;box-shadow:0 4px 26px rgba(30,42,28,.05);display:flex;flex-direction:column;gap:12px;transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(30,42,28,.13)}
.card h3{margin:0;font-family:var(--display);font-weight:400;font-size:25px;line-height:1.2}
.card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--body-ink)}
.card .price{font-family:var(--display);font-size:22px;color:var(--gold-deep)}
.card .meta{font-size:13.5px;color:#5E6659}
.card-link{margin-top:auto;font-size:14.5px;color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;transition:color .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-link{color:#63490F;transform:translateX(4px)}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0;padding:0;list-style:none;font-size:14px;color:#5E6659}
.pills li{background:var(--linen);padding:8px 15px;border-radius:999px;transition:background-color .25s ease,transform .25s ease}
.pills li:hover{background:var(--wheat);transform:translateY(-2px)}
.band-dark .pills li{background:rgba(255,255,255,.08);color:rgba(252,251,244,.85)}
.band-dark .tag,.band-dark .lede{color:rgba(252,251,244,.72)}
.band-dark .prose a:not(.btn):not(.card-link){color:var(--gold-lit)}
.band-dark .prose a:not(.btn):not(.card-link):hover{color:var(--gold-pale)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
/* Each question is a card rather than a rule-separated row. Nineteen of them stacked as
   hairlines read as a table of contents; as cards they read as something to open, and the
   open one is visibly the one you are in. */
.qa{margin-top:12px;background:var(--paper);border:1px solid rgba(30,42,28,.09);border-radius:22px;padding:0 clamp(18px,2.2vw,26px);transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
.qa:hover{border-color:rgba(198,162,79,.55);box-shadow:0 10px 30px rgba(30,42,28,.07)}
.qa[open]{background:var(--cream);border-color:rgba(198,162,79,.55)}
.band-cream .qa,.band-linen .qa{background:var(--paper)}
.band-cream .qa[open],.band-linen .qa[open]{background:var(--card)}
.qa summary{padding:20px 40px 20px 0;font-family:var(--display);font-size:clamp(19px,2vw,23px);line-height:1.3;position:relative;transition:color .25s ease}
.qa summary:hover{color:var(--gold-deep)}
.qa summary::after{content:'+';position:absolute;right:2px;top:18px;font-family:var(--body);font-size:24px;color:var(--gold-deep);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.qa[open] summary::after{content:'\2212'}
.qa summary:hover::after{transform:rotate(90deg)}
.qa[open] summary:hover::after{transform:none}
.qa .qa-body{padding:0 0 22px}
.qa[open] .qa-body{animation:lo-rise .42s cubic-bezier(.2,.8,.2,1) both}
.qa .qa-body p{margin:0 0 12px;font-size:16.5px;line-height:1.66;color:var(--body-ink)}
.qa .qa-body p:last-child{margin-bottom:0}
/* Thirty covers on one wall. Narrower columns mean five across the page measure and two
   across a phone, rather than one 700px-tall picture per episode. */
.grid-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,196px),1fr));gap:22px;margin-top:38px;padding:0;list-style:none}
.tile{background:var(--cream);border-radius:24px;overflow:hidden;box-shadow:0 4px 26px rgba(30,42,28,.05);display:flex;flex-direction:column;height:100%;transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}
.tile:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(30,42,28,.16)}
.tile img{width:100%;aspect-ratio:4/5;max-height:290px;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.tile-body h3{margin:0;font-family:var(--display);font-weight:400;font-size:18.5px;line-height:1.24;transition:color .25s ease}
.tile:hover .tile-body h3{color:var(--gold-deep)}
.tile-body p{margin:0;font-size:13.5px;line-height:1.55;color:#5E6659}
.postlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:0 44px;margin:38px 0 0;padding:0;list-style:none}
.postitem{border-top:1px solid rgba(30,42,28,.10);padding:28px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;transition:padding-left .4s cubic-bezier(.2,.8,.2,1)}
.postitem:hover{padding-left:12px}
.postitem h2{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.16}
.postitem h2 a{transition:color .25s ease}
.postitem:hover h2 a{color:var(--gold-deep)}
.postitem p{margin:0;font-size:16px;line-height:1.62;color:var(--body-ink)}
.postitem time{font-size:13.5px;color:#5E6659;letter-spacing:.04em}
/* --- blocks the written pages were missing ------------------------------ */
/* A pull quote at container width. The written pages had one texture — paragraph after
   paragraph in a single measure — and this is the cheapest way to break it: the sentence
   the page is actually about, set in display type, with the reading column resuming
   underneath. Used for the lines the implementation brief wants the site able to say. */
.pull{margin:clamp(44px,5vw,64px) 0 0;padding:clamp(32px,4vw,52px) clamp(26px,4vw,58px);background:var(--cream);border-radius:34px;position:relative;overflow:hidden;box-shadow:0 4px 30px rgba(30,42,28,.05)}
.pull::before{content:'\201C';position:absolute;top:clamp(-18px,-1vw,-6px);left:18px;font-family:var(--display);font-size:clamp(120px,14vw,190px);line-height:1;color:rgba(198,162,79,.20);pointer-events:none}
.pull p{position:relative;margin:0;max-width:900px;font-family:var(--display);font-size:clamp(21px,2.7vw,32px);line-height:1.3;color:var(--ink)}
.pull p+p{margin-top:16px}
.pull cite{position:relative;display:block;margin-top:20px;font-style:normal;font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;color:#5E6659}
.band-dark .pull{background:rgba(255,255,255,.06)}
.band-dark .pull p{color:var(--on-dark)}
.band-dark .pull cite{color:rgba(252,251,244,.66)}

/* A row of the two or three numbers a page turns on — a price, a duration, a cap. The
   figures are display type at size, which is the one thing the design's own pages do that
   the written pages did not do at all. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(18px,2.4vw,34px);margin:clamp(38px,4.4vw,54px) 0 0;padding:0;list-style:none}
.stats li{display:flex;flex-direction:column;gap:7px;padding:26px 26px 28px;background:var(--paper);border-radius:26px;border-top:2px solid var(--gold)}
.stats b{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.4vw,52px);line-height:1;color:var(--gold-deep)}
.stats span{font-size:14.5px;line-height:1.55;color:var(--body-ink)}
.band-cream .stats li,.band-linen .stats li{background:var(--paper)}
.band-dark .stats li{background:rgba(255,255,255,.06);border-top-color:var(--gold)}
.band-dark .stats b{color:var(--gold-lit)}
.band-dark .stats span{color:rgba(252,251,244,.78)}

/* A photograph at container width with its caption laid over the foot of it. Used where a
   page needs air rather than another sentence — and, now that there are ten originals
   instead of six, where a page can afford a second, different frame of its own subject. */
figure.wide{margin:clamp(42px,5vw,64px) 0 0;position:relative;border-radius:34px;overflow:hidden;box-shadow:0 26px 64px rgba(30,42,28,.16)}
figure.wide img{width:100%;max-height:min(520px,58vh);object-fit:cover;display:block;border-radius:0}
figure.wide figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:52px clamp(22px,3vw,36px) clamp(18px,2.4vw,26px);font-size:14.5px;line-height:1.5;color:var(--on-dark);background:linear-gradient(180deg,rgba(26,36,22,0) 0%,rgba(26,36,22,.72) 68%)}

/* Two columns at container width: a reading column and something beside it. The written
   pages had no way to put a photograph next to a paragraph without either shrinking the
   photograph into the measure or dropping it full width. */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(26px,3.6vw,52px);align-items:center;margin:clamp(42px,5vw,64px) 0 0}
.split>figure,.split>img{margin:0}
.split img{width:100%;border-radius:32px;object-fit:cover;display:block;box-shadow:0 22px 56px rgba(30,42,28,.18)}
.split-body>:first-child{margin-top:0}
.split-body h2{margin-top:0}
.split-body h2::before{display:none}

.form{display:flex;flex-direction:column;gap:14px;max-width:560px}
.form label{display:flex;flex-direction:column;gap:7px;font-size:14px;color:#5E6659}
.form input,.form textarea,.form select{font-family:var(--body);font-size:16px;padding:15px 18px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);width:100%;transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.form textarea{min-height:130px;resize:vertical}
.form input:hover,.form textarea:hover,.form select:hover{border-color:var(--gold)}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--gold-deep);outline:none;background:var(--cream);box-shadow:0 0 0 4px rgba(122,92,24,.12)}
.form .hint{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:#5E6659}
.form .hp{position:absolute;left:-9999px}
/* The spam trap, and the one rule that keeps it out of sight. The hidden attribute is a
   user agent declaration, so any author rule that sets display on the same element beats
   it - which is how .form{display:flex} on a p.form.hp[hidden] put "Do not fill this in"
   into the Founding Circle waitlist, between the reader's email and the submit button. The
   honeypot has to stay in the markup (Netlify matches it by name, and all four forms
   declare netlify-honeypot), so what changes is that hidden now wins outright. */
[hidden]{display:none!important}
.note{background:var(--cream);border-radius:22px;padding:24px 26px;margin:26px 0 0;border-left:3px solid var(--sage);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.note:hover{transform:translateX(4px)}
.note p{margin:0;font-size:15.5px;line-height:1.62;color:var(--body-ink)}
.note p+p{margin-top:10px}
.rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:38px 4px 20px}
.rail::-webkit-scrollbar{display:none}
.rail blockquote{flex:none;width:min(380px,80vw);scroll-snap-align:center;background:var(--cream);border-radius:26px;padding:32px 30px 34px;box-shadow:0 4px 26px rgba(30,42,28,.05);margin:0;border-left:0;font-family:var(--body);font-size:inherit;transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}
.rail blockquote:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(30,42,28,.14)}
.rail blockquote p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body-ink)}
.rail cite{font-family:var(--display);font-size:20px;margin-top:24px;display:block;font-style:normal;color:var(--gold-deep)}
.railnav{display:flex;justify-content:center;gap:14px;margin-top:8px}
.railnav button{width:52px;height:52px;border-radius:999px;border:1px solid rgba(30,42,28,.12);background:var(--cream);color:var(--gold-deep);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.railnav button:hover{background:var(--wheat);transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,42,28,.12)}
.railnav button:active{transform:translateY(0)}
.embed{position:relative;padding-bottom:56.25%;height:0;border-radius:24px;overflow:hidden;margin-top:30px;background:var(--forest-deep)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* The Calendly inline widget. The card reserves its height in CSS so the page does not
   jump when the iframe finishes loading, and the widget is given the site's own palette
   through its query string rather than arriving in Calendly's default blue. */
.scheduler{background:var(--cream);border-radius:32px;padding:14px;box-shadow:0 10px 40px rgba(30,42,28,.09);margin-top:30px}
.scheduler iframe{width:100%;height:1060px;border:0;border-radius:22px;display:block;background:var(--paper)}
.scheduler-fallback{margin:16px 4px 4px;font-size:14px;line-height:1.6;color:#5E6659}
.tag{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5E6659}
/* --- the floating signup ----------------------------------------------- */
/* Fixed furniture, so its stacking is deliberate: above the page and above the sticky nav
   pill (z 100), below the mobile bar (z 120) whose buttons it must never cover. The
   container is transparent to the pointer so a fixed box in the corner cannot eat a click
   meant for the page; only the pill and the panel take one. column-reverse puts the
   panel above the pill on screen while keeping the pill first in the DOM, which is what
   lets the panel be the pill's CSS sibling and keeps the tab order launcher-then-fields. */
.signup{position:fixed;z-index:115;right:clamp(12px,2vw,26px);bottom:calc(clamp(12px,2vw,26px) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px;pointer-events:none;max-width:calc(100vw - 24px)}
.signup>*{pointer-events:auto}
.signup-launch{display:inline-flex;align-items:center;gap:11px;padding:11px 21px 11px 13px;border:1px solid var(--line);border-radius:999px;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:14.5px;cursor:pointer;box-shadow:0 10px 30px rgba(30,42,28,.14);transition:opacity .6s ease,transform .5s cubic-bezier(.2,.8,.2,1),background-color .3s ease,box-shadow .3s ease}
.signup-launch img{width:26px;height:26px;display:block;animation:lo-breathe 9s ease-in-out infinite}
.signup-launch:hover{background:var(--card);box-shadow:0 16px 42px rgba(30,42,28,.2)}
/* Visible by default and hidden only once JavaScript has taken it over, so a reader with
   none is shown the pill immediately rather than never. */
.signup.is-js .signup-launch{opacity:0;transform:translateY(14px);pointer-events:none}
.signup.is-js.is-ready .signup-launch{opacity:1;transform:none;pointer-events:auto}
.signup.is-js.is-open .signup-launch{opacity:0;transform:translateY(8px);pointer-events:none}
/* Collapsed with visibility rather than the hidden attribute: the fields stay out of the
   tab order either way, and this lets the panel open on :focus-within for a reader with no
   JavaScript — the same escape hatch the nav dropdown has. The focus-within rule is scoped
   to :not(.is-js) because once JavaScript is driving, returning focus to the launcher
   after a close would otherwise reopen the panel underneath it. */
.signup-panel{position:relative;overflow:hidden;width:min(362px,calc(100vw - 24px));background:linear-gradient(176deg,var(--card),var(--cream));border:1px solid var(--line);border-radius:var(--rc);box-shadow:0 26px 70px rgba(30,42,28,.22);opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transform-origin:100% 100%;transition:opacity .34s ease,transform .4s cubic-bezier(.2,.8,.2,1),visibility .4s}
.signup-launch[aria-expanded=true]+.signup-panel,.signup:not(.is-js):focus-within .signup-panel{opacity:1;visibility:visible;transform:none}
/* The panel itself does not scroll — the body inside it does, so the geometry stays put
   behind the copy instead of sliding up out of the frame with it. */
.signup-body{position:relative;z-index:1;padding:28px 26px 24px;max-height:min(78vh,640px);overflow-y:auto}
.signup-geo{position:absolute;inset:0;width:100%;height:100%;z-index:0;color:var(--gold);stroke:currentColor;fill:none;opacity:.17}
.signup-geo g[data-turn-s],.signup-geo g[data-turn-sr]{transform-box:fill-box;transform-origin:50% 50%}
.signup-geo-ring{opacity:.45}
.signup-close{position:absolute;top:13px;right:13px;z-index:2;width:34px;height:34px;border-radius:999px;border:1px solid var(--line-soft);background:rgba(255,255,255,.72);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background-color .25s ease,transform .25s ease}
.signup-close:hover{background:var(--wheat)}
.signup-close:active{transform:scale(.94)}
.signup-sigil{display:grid;place-items:center;width:62px;height:62px;border-radius:999px;background:var(--card);border:1px solid var(--line-soft);box-shadow:0 8px 22px rgba(30,42,28,.08)}
.signup-sigil img{width:44px;height:44px;display:block;animation:lo-breathe 9s ease-in-out infinite}
.signup-title{font-family:var(--display);font-weight:400;font-size:23px;line-height:1.2;margin:17px 0 0;color:var(--ink)}
.signup-lede{margin:10px 0 0;font-size:14.5px;line-height:1.62;color:var(--body-ink)}
/* Reuses .form for the field idiom and only tightens it: a panel is not a page column. */
.signup-form{margin-top:19px;gap:12px;max-width:none}
.signup-form label{font-size:13px}
.signup-form label>span:first-child{display:flex;align-items:baseline;gap:9px}
.signup-form input{padding:12px 15px;border-radius:12px;font-size:15px;background:rgba(255,255,255,.74)}
/* .form signals focus with a border and an inner glow. A ring is added on top of it here
   for the same reason CONTRAST_FIXES adds one to the export's fields: a colour change
   inside the field boundary is not a focus indicator. */
.signup-form input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.signup-form .hint{font-size:12.5px}
.signup-optional{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.signup-submit{width:100%;padding:15px 24px;font-size:15px}
.signup-fine{margin:0;font-size:12.5px;line-height:1.5;color:var(--soft-ink)}
@media(max-width:960px){.navtoggle{display:flex}}
@media(max-width:720px){.hero h1{font-size:clamp(32px,9vw,44px)}.foot-mark{padding:32px 0 96px}.scheduler{border-radius:24px;padding:8px}.scheduler iframe{height:1180px}}
@media(max-width:1040px){.grid-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.grid-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(max-width:600px){.grid-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tile-body{padding:14px 15px 17px}.tile-body h3{font-size:16px}.tile-body p{display:none}.prose figure.cover{max-width:210px}.hero-split .art,.art{max-width:230px;margin-left:auto;margin-right:auto}}
@media(min-width:721px){.mobilebar{display:none}}
/* Under 600px the pill drops its label and becomes the mark alone — the full sentence is
   already the button's aria-label — and the panel takes the width of the screen. */
@media(max-width:600px){
.signup{left:12px;right:12px;max-width:none;align-items:stretch}
.signup-launch{align-self:flex-end;width:52px;height:52px;padding:0;justify-content:center;gap:0}
.signup-launch-label{display:none}
.signup-panel{width:100%}
.signup-body{padding:24px 20px 20px;max-height:70vh}
.signup-title{font-size:21px}
}
/* The sticky mobile bar is a sibling that comes first, so the panel can lift itself clear
   of it on exactly the pages that carry one. */
@media(max-width:720px){.mobilebar~.signup{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
/* Everything above that moves, switched off in one place. The design export's own base
   layer already stops its inline animations; this covers the rules added here. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.pre-reveal{opacity:1!important;transform:none!important}
.band-hero::after{animation:none!important}
}
.dc-h1:hover{background:#63490F !important;color:var(--on-dark) !important}
.dc-h2:hover{background:var(--gold-pale) !important;color:var(--ink) !important}
.dc-h3:hover{background:var(--on-dark) !important;color:#2A2410 !important}
.dc-h4:hover{background:rgba(232,206,134,.14) !important;color:var(--on-dark) !important}
.dc-h5:hover{background:var(--gold-pale) !important}
.dc-f6:focus{border-color:var(--gold-lit) !important;outline:2px solid var(--gold-lit) !important;outline-offset:2px !important}
.dc-h7:hover{background:var(--on-dark) !important}
.dc-h8:hover{background:var(--gold-pale) !important;box-shadow:var(--sh-l) !important}
.dc-h9:hover{border:1px solid var(--gold) !important;color:var(--ink) !important}
.dc-f10:focus{border-color:var(--gold-deep) !important;outline:2px solid var(--gold-deep) !important;outline-offset:2px !important}
.dc-h11:hover{background:#63490F !important}