/* generated */
@font-face{font-family:Space;src:url(assets/space-grotesk-var-latin.woff2);font-weight:300 700;font-display:swap}
@font-face{font-family:Bodoni;src:url(assets/bodoni-moda-var-latin.woff2);font-weight:400 900;font-display:swap}
@font-face{font-family:Bodoni;src:url(assets/bodoni-moda-italic-var-latin.woff2);font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:Garamond;src:url(assets/eb-garamond-italic-var-latin.woff2);font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:Mono;src:url(assets/jetbrains-mono-var-latin.woff2);font-weight:100 800;font-display:swap}

/* ---------- foundations ---------- */
:root{--ink:#eff1dc;--dark:#0f130c;--lime:#d5f66a;--muted:#aab09c;--paper:#eeeddf;--pad:clamp(22px,5vw,84px);--spring:cubic-bezier(.2,1.65,.35,1);--ease:cubic-bezier(.2,.65,.25,1);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{margin:0;background:var(--dark);color:var(--ink);font-family:Space,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,a{-webkit-tap-highlight-color:transparent}
button{color:inherit;font:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:700;letter-spacing:-.075em;line-height:.86}
h3{font-family:Bodoni,Georgia,serif;font-weight:500;letter-spacing:-.045em;line-height:1.03}
em{font-family:Garamond,Georgia,serif;font-weight:400;letter-spacing:-.045em}
img{display:block;width:100%;height:100%;object-fit:cover}
.mono,.eyebrow{font-family:Mono,monospace;font-size:10px;line-height:1.6;letter-spacing:.1em}
.eyebrow{color:var(--lime)}
.skip{position:fixed;top:-100px;z-index:100;background:var(--lime);color:var(--dark);padding:15px}.skip:focus{top:0}

/* ---------- masthead ---------- */
.masthead{position:absolute;top:0;left:0;right:0;z-index:15;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);gap:30px}
.brand{display:flex;align-items:center;gap:12px;font-family:Mono,monospace;font-size:10px;line-height:1.35;letter-spacing:.12em}
.sunmark{font-family:Arial,sans-serif;font-size:44px;line-height:1;color:var(--lime)}
.desktop-nav{display:flex;gap:22px;font-size:12px;align-items:center;padding:6px 7px 6px 23px;border-radius:40px}
.journal-link{padding:11px 16px;border-radius:30px;background:#effbd91a;border:1px solid #ffffff25}
.journal-link span{padding-left:14px}
.menu-toggle,.mobile-menu{display:none}
.glass{background:linear-gradient(135deg,#edf8ce22,#141d10a8 55%,#c8e3aa10);border:1px solid #f3ffdf3a;box-shadow:inset 0 1px 0 #ffffff3a,inset 0 -1px 0 #0003,0 12px 35px #0004;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%)}
.desktop-nav,.menu-toggle,.chapter-dock{background:linear-gradient(135deg,#edf8ce22,#141d10a8 55%,#c8e3aa10);border:1px solid #f3ffdf3a;box-shadow:inset 0 1px 0 #ffffff3a,inset 0 -1px 0 #0003,0 12px 35px #0004;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%)}

/* ---------- the poster ---------- */
.hero{position:relative;height:100svh;min-height:640px;max-height:1200px;overflow:hidden;--hp:0}
.hero-photo{position:absolute;inset:0}
.hero-photo img{object-position:62% center}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0f130c 0%,#0f130cd0 22%,#0f130c20 58%,transparent 80%),linear-gradient(180deg,#0f130c99,transparent 28%)}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) clamp(78px,11svh,120px);z-index:2;transform:translate3d(0,calc(var(--hp) * -70px),0);opacity:calc(1 - var(--hp) * 1.25)}
.hero-copy .eyebrow{display:flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.08em;margin-bottom:clamp(18px,3svh,34px)}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:var(--lime);box-shadow:0 0 0 0 #d5f66a77;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px #d5f66a00}100%{box-shadow:0 0 0 0 #d5f66a00}}
.hero h1{font-size:clamp(112px,30vw,220px);letter-spacing:-.085em;line-height:.76}
.hero h1 .weed{color:var(--lime)}
.hero-script{font-family:Garamond,serif;font-style:italic;font-size:clamp(50px,13vw,96px);letter-spacing:-.06em;line-height:1;margin:14px 0 26px}
.hero-location{font-size:14px;line-height:1.65;max-width:300px;text-wrap:pretty}
.hero-cue{position:absolute;right:var(--pad);bottom:28px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:#eff1dcaa;font-size:8px;opacity:calc(1 - var(--hp) * 3)}
.hero-cue i{display:block;width:1px;height:38px;background:linear-gradient(#eff1dc00,#d5f66a);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- sticky stages ---------- */
.stage{position:relative;height:calc((var(--beats) + .55) * 100svh)}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--dark)}
.plates,.plate{position:absolute;inset:0}
.plate{opacity:0;will-change:opacity}
.plate.is-on{opacity:1}
.plate-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0f130c 0%,#0f130ccc 26%,#0f130c1a 60%,transparent 85%)}
.stage-head{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:94px var(--pad) 0;gap:20px}
.stage-head>.mono{color:var(--muted);font-size:8px;text-align:right}
.beats{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 var(--pad) clamp(64px,9svh,110px);pointer-events:none}
.beat{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(64px,9svh,110px);opacity:0;transform:translate3d(0,20px,0);will-change:opacity,transform}
.beat h2{font-size:clamp(60px,15.5vw,150px);line-height:.88;text-wrap:balance}
.manifesto .beat h2{font-size:clamp(84px,24vw,210px);line-height:.82}
.beat p{font-size:15px;line-height:1.6;margin-top:20px;max-width:360px;color:#e4e7d4;text-wrap:pretty}
.ticks{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:7px}
.ticks i{display:block;width:2px;height:18px;background:#eff1dc3a;border-radius:2px;transition:background .3s,height .3s}
.ticks i.on{background:var(--lime);height:34px}
/* the dig */
.earth .plate.over{clip-path:inset(0 0 var(--wipe,0%) 0)}
.earth .plate.under img{object-position:center 40%}
.wipe-line{position:absolute;left:0;right:0;bottom:var(--wipe,0%);height:2px;background:var(--lime);z-index:2;pointer-events:none;box-shadow:0 0 24px #d5f66a99}
.wipe-line span{position:absolute;right:var(--pad);bottom:8px;color:var(--lime);font-size:8px}
.earth .plate-shade{background:linear-gradient(0deg,#0f130c 0%,#0f130cc4 24%,#0f130c14 55%,transparent 80%)}

/* ---------- after blocks ---------- */
.after{position:relative;z-index:2}
.after-dark{background:var(--dark);padding:56px var(--pad) 72px}
.after-paper{background:var(--paper);color:var(--dark);padding:56px var(--pad) 72px}
.fact-row{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;margin-bottom:46px}
.fact-row>p{font-size:15px;line-height:1.7;color:var(--muted);max-width:420px}
.big-number{display:flex;align-items:center;gap:16px}
.big-number strong{font-size:110px;font-weight:500;letter-spacing:-.07em;line-height:1;color:var(--lime)}
.big-number span{font-size:9px}
.fact-strip{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:10px;color:#4f5a3c;border-top:1px solid #0f130c22;border-bottom:1px solid #0f130c22;padding:18px 0;margin-bottom:40px}
.line-button,.plain-link{display:flex;justify-content:space-between;align-items:center;gap:30px;width:fit-content;min-height:44px;border-bottom:1px solid #d5f66a70;font-size:12px;color:var(--lime);padding:10px 0;text-align:left}
.line-button span,.plain-link span{font-size:22px}
.after-paper .line-button{color:#3f5424;border-color:#3f542466}

/* ---------- rails: scroll down for the story, swipe for the photographs ---------- */
.rail{min-width:0}
.story-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative}
.story-track::-webkit-scrollbar{display:none}
.story-card{position:relative;flex:0 0 46%;height:540px;scroll-snap-align:start;overflow:hidden;background:#1a2217;color:var(--ink);isolation:isolate;border-radius:4px}
.story-card>img{position:absolute;inset:0}
.card-shade{position:absolute;inset:0;background:linear-gradient(0deg,#08190cf2,transparent 78%)}
.card-number{position:absolute;top:24px;left:28px;z-index:1;font-size:9px}
.card-copy{position:relative;display:flex;flex-direction:column;justify-content:end;height:100%;padding:34px;z-index:2}
.card-copy h3{font-size:50px;margin-bottom:18px}
.card-copy p{font-size:14px;line-height:1.7;max-width:340px;color:#e2e5d4}
.card-copy .line-button{margin-top:14px}
.track-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.track-footer>.mono{font-size:8px;color:var(--muted)}
.track-controls{display:flex}
.track-controls button{width:44px;height:44px;padding:0;display:grid;place-items:center}
.track-controls button::after{content:'';height:5px;width:5px;border-radius:10px;background:#5c6650;transition:width .3s,background .3s}
.track-controls button[aria-current=true]::after{width:20px;background:var(--lime)}
.rail--paper .track-footer>.mono{color:#576349}
.rail--paper .track-controls button::after{background:#a5ad91}
.rail--paper .track-controls button[aria-current=true]::after{background:#334728}
.after-paper button:focus-visible,.after-paper [tabindex]:focus-visible{outline-color:#496830}

/* ---------- posters ---------- */
.poster{position:relative;height:100svh;min-height:620px;max-height:1100px;overflow:hidden;display:flex;align-items:end}
.poster>img{position:absolute;inset:0}
.poster-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0f130c 0%,#0f130cc9 28%,#0f130c1a 62%,transparent 85%)}
.poster-copy{position:relative;z-index:2;padding:0 var(--pad) clamp(64px,9svh,110px);max-width:760px}
.poster-copy .eyebrow{margin-bottom:26px}
.poster h2{font-size:clamp(72px,19vw,170px);line-height:.86}
.poster h2 em{display:block;font-size:.82em;line-height:1.1;letter-spacing:-.05em;padding-top:6px}
.people h2 em{display:inline;font-size:1.12em;line-height:1}
.poster-line{font-size:15px;line-height:1.65;margin-top:22px;max-width:380px;color:#e4e7d4;text-wrap:pretty}
.poster-actions{margin-top:14px;display:flex;flex-direction:column;align-items:start;gap:2px}
.people>img{object-position:48% 40%}
.place>img{object-position:58% center}

/* ---------- the journal ---------- */
.chapter.journal{padding:70px var(--pad) 80px}
.section-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #14191033;padding-bottom:20px;margin-bottom:40px;gap:24px}
.section-top>.mono{font-size:8px;text-align:right}
.journal{background:var(--paper);color:var(--dark)}
.journal .eyebrow,.journal .section-top>.mono{color:#637047}
.journal-heading{display:flex;align-items:end;justify-content:space-between;margin:40px 0}
.journal h2{font-size:clamp(100px,12vw,170px)}
.journal h2 em{font-size:.9em;line-height:1.1}
.journal-heading p{font-size:14px;line-height:1.7;color:#657154;padding-bottom:10px}
.journal-filter{display:flex;gap:10px;margin:35px 0 30px;flex-wrap:wrap}
.journal-filter button{border:1px solid #14191044;border-radius:30px;padding:12px 19px;min-height:44px;font-size:12px;transition:transform .6s var(--spring),background .3s}
.journal-filter button[aria-pressed=true]{background:var(--dark);color:var(--ink);border-color:var(--dark)}
.journal-entry{width:100%;border-top:1px solid #14191040;display:grid;grid-template-columns:140px 1fr 100px 35px;align-items:center;gap:30px;padding:28px 0;text-align:left;transition:padding .25s,background .25s}
.journal-entry:hover{background:#e3e8cf;padding-left:15px;padding-right:15px}
.journal-entry[hidden]{display:none}
.entry-index,.reading-time{font-size:8px;color:#64704d}
.entry-title{font-family:Bodoni,serif;font-size:clamp(25px,3vw,44px);line-height:1.15;letter-spacing:-.04em}
.entry-arrow{font-size:28px;color:#597440}
.journal-count{font-size:8px;color:#64704d;border-top:1px solid #14191040;padding-top:25px}
.journal button:focus-visible{outline-color:#3a5223}

/* ---------- footer, dock, reader ---------- */
footer{padding:70px var(--pad) 24px;overflow:hidden}
.footer-top{display:flex;justify-content:space-between;align-items:center}
.footer-top p{font-size:28px;line-height:1.2;letter-spacing:-.04em}
.footer-top p em{font-size:40px;color:var(--lime)}
.round-arrow{display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:50%;font-size:27px;color:var(--lime);background:linear-gradient(140deg,#efffd34d,#25411980 60%,#d5f66a22);border:1px solid #efffdc77;box-shadow:inset 0 2px 1px #ffffff44,0 10px 30px #0003;transition:transform .6s var(--spring)}
.footer-wordmark{font-size:clamp(140px,24vw,400px);font-weight:700;line-height:1.1;letter-spacing:-.1em;display:flex;align-items:center;justify-content:space-between;margin:38px 0 10px}
.footer-wordmark span{font-size:.58em;letter-spacing:0;color:var(--lime);font-weight:400;padding-right:.07em}
.footer-bottom{border-top:1px solid #eff1dc30;padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:8px;color:var(--muted)}
.chapter-dock{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,110px);z-index:12;display:flex;border-radius:40px;padding:6px;transition:transform .65s var(--spring)}
.chapter-dock.visible{transform:translate(-50%,0)}
.chapter-dock a{font:10px Mono,monospace;min-width:56px;height:42px;display:grid;place-items:center;border-radius:30px;color:#c2cdb4;transition:background .3s,box-shadow .3s}
.chapter-dock a[aria-current=true]{background:linear-gradient(145deg,#f0ffc3,var(--lime));color:var(--dark);box-shadow:inset 0 1px 0 #fff9,0 3px 10px #07100255}
.reader{border:0;margin:0 0 0 auto;padding:0;width:min(760px,100%);height:100%;max-height:100%;max-width:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--dark);color-scheme:light}
.reader::backdrop{background:#071006bb;backdrop-filter:blur(8px)}
.reader-bar{position:sticky;top:0;padding:15px 35px;display:flex;align-items:center;justify-content:space-between;background:var(--paper);z-index:2;border-bottom:1px solid #14191033}
.reader-bar .mono{font-size:9px}
.reader-close{border:1px solid #14191044;border-radius:30px;padding:10px 18px;min-height:44px;font-size:12px}
.reader-progress{height:2px;background:#657e39;position:sticky;top:75px;z-index:3;width:var(--read-progress,0%)}
#reader-content{padding:35px 60px 45px;font-size:16px;line-height:1.85}
#reader-content h2,#reader-content h3{font-family:Bodoni,serif;font-size:45px;line-height:1.08;font-weight:500;letter-spacing:-.04em;margin:22px 0 30px}
#reader-content p{margin:24px 0}
#reader-content .sum{font-size:20px;line-height:1.65}
#reader-content .kick,#reader-content .src,#reader-content .doc-head,#reader-content .doc-foot{font:10px/1.8 Mono,monospace;color:#5b674a}
#reader-content a{text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
#reader-content .src{border-top:1px solid #14191033;padding-top:24px;margin-top:35px}
.reader-end{padding:15px 60px 70px;display:flex;flex-direction:column;align-items:start;gap:18px}
.reader-end>.mono{font-size:8px;color:#65714f}
.reader .plain-link{color:#3f5424;border-color:#3f542466}
.reader button:focus-visible,.reader a:focus-visible{outline-color:#49662a}
body.reading{overflow:hidden}

/* ---------- interaction polish ---------- */
.round-arrow,.menu-toggle,.reader-close,.chapter-dock a{transition:transform .6s var(--spring),background .3s,box-shadow .3s}
@media(hover:hover){.round-arrow:hover,.menu-toggle:hover,.journal-filter button:hover,.reader-close:hover{transform:translateY(-3px) scale(1.06)}.chapter-dock a:hover{transform:translateY(-3px)}.journal-link:hover{background:#effbd933}}
.round-arrow:active,.menu-toggle:active,.journal-filter button:active,.reader-close:active,.chapter-dock a:active{transform:scale(.9);transition-duration:.12s}

/* ---------- desktop composition ---------- */
@media(min-width:99999px){
 .hero{display:grid;grid-template-columns:44% 56%}
 .hero-photo{position:absolute;left:44%;right:0;top:0;bottom:0;overflow:hidden}
 .hero-photo img{transform:scale(calc(1 + var(--hp) * .08));transform-origin:center 40%}
 .hero-shade{background:linear-gradient(90deg,#0f130c,#0f130c00 22%),linear-gradient(0deg,#0f130c99,transparent 40%)}
 .hero-copy{right:auto;width:44%;padding-bottom:clamp(60px,10vh,110px)}
 .hero h1{font-size:clamp(150px,13.5vw,250px);white-space:nowrap}   /* 10-12: Safari text-only zoom at 125% wrapped WEED to WEE/D and pushed WILD off the top; the words may run into the photograph but never break */
 .hero-script{font-size:clamp(56px,5vw,96px)}
 .hero-cue{right:auto;left:var(--pad);bottom:24px;flex-direction:row;gap:14px}
 .hero-cue i{width:38px;height:1px;background:linear-gradient(90deg,#eff1dc00,#d5f66a);animation-name:cue-x}
 @keyframes cue-x{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
 .beat{max-width:900px}
 .beat p{font-size:17px;max-width:460px}
 .stage-head{padding-top:110px}
 .poster-copy{padding-bottom:clamp(60px,10vh,110px)}
 .poster-line{font-size:17px;max-width:460px}
 .poster-actions{flex-direction:row;gap:36px}
 .after-dark,.after-paper{padding:70px var(--pad) 90px}
}
@media(max-width:1150px) and (min-width:99999px){.hero h1{font-size:13.5vw}.fact-row{gap:30px}.journal-entry{grid-template-columns:110px 1fr 80px 30px;gap:18px}}

/* ---------- phones ---------- */
@media(max-width:99999px){
 :root{--pad:22px}
 .masthead{padding:18px 22px;gap:15px}
 .brand{font-size:8px;gap:9px}.sunmark{font-size:34px}
 .desktop-nav{display:none}
 .menu-toggle{display:flex;gap:16px;align-items:center;min-height:44px;font-size:12px;border-radius:30px;padding:0 15px}
 .menu-toggle>span{font-size:24px;color:var(--lime)}
 .mobile-menu:not([hidden]){display:flex;position:absolute;top:82px;left:14px;right:14px;z-index:20;color:var(--dark);padding:15px 22px;flex-direction:column;border-radius:26px;background:#d5f66aed;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid #f7ffdeaa;box-shadow:0 30px 50px #0005;animation:glass-arrive .45s var(--spring)}
 @keyframes glass-arrive{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:none}}
 .mobile-menu a{display:flex;align-items:center;gap:25px;min-height:60px;font-size:22px;letter-spacing:-.04em;border-bottom:1px solid #14191030}
 .mobile-menu a span{font:9px Mono,monospace}
 .mobile-menu a:focus-visible{outline-color:var(--dark)}
 .hero-copy{padding-bottom:clamp(74px,10svh,110px)}
 .hero-location{font-size:13px;max-width:240px}
 .hero-cue{bottom:22px}
 .stage-head{padding-top:88px}
 .beat h2{font-size:clamp(58px,15.5vw,96px)}
 .manifesto .beat h2{font-size:clamp(80px,24vw,130px)}
 .beat p{font-size:14px;margin-top:16px}
 .ticks{right:12px}
 .fact-row{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
 .big-number strong{font-size:84px}
 .fact-strip{font-size:8px;gap:10px 18px;padding:14px 0;margin-bottom:30px}
 .rail{margin:0 -22px}
 .story-track{gap:12px;padding:0 22px;scroll-padding:22px}
 .story-card{flex-basis:84%;height:470px}
 .card-number{top:22px;left:22px;font-size:8px}
 .card-copy{padding:24px}
 .card-copy h3{font-size:40px;margin-bottom:14px}
 .card-copy p{font-size:13px}
 .track-footer{padding:0 22px}
 .track-footer>.mono{max-width:160px}
 .after-dark,.after-paper{padding:46px 22px 60px}
 .poster h2{font-size:clamp(72px,19vw,100px)}
 .poster-line{font-size:14px}
 .chapter.journal{padding:50px 22px 70px}
 .section-top{margin-bottom:30px;padding-bottom:16px;align-items:start;gap:20px}
 .section-top>.mono{max-width:150px}
 .journal-heading{display:block;margin:35px 0}
 .journal h2{font-size:clamp(85px,23vw,135px)}
 .journal-heading p{font-size:13px;margin-top:22px}
 .journal-filter{gap:7px;margin:27px 0 22px}
 .journal-filter button{padding:10px 12px;font-size:10px}
 .journal-entry{grid-template-columns:1fr 30px;gap:10px;padding:23px 0}
 .entry-index{grid-column:1}.entry-title{grid-column:1;font-size:28px;max-width:95%}.reading-time{grid-column:1;grid-row:3}.entry-arrow{grid-column:2;grid-row:1/4;font-size:26px}
 .journal-entry:hover{padding-left:5px;padding-right:5px}
 footer{padding:45px 22px 90px}
 .footer-top p{font-size:21px}.footer-top p em{font-size:31px}
 .footer-wordmark{font-size:25vw;margin:32px 0 20px}
 .footer-bottom{gap:18px;align-items:start}.footer-bottom span{max-width:155px}
 .chapter-dock{padding:4px}.chapter-dock a{min-width:57px;height:40px}
 .reader-bar{padding:12px 22px}.reader-close{font-size:11px;padding:9px 15px}.reader-progress{top:69px}
 #reader-content{padding:22px 25px 30px;font-size:15px;line-height:1.8}
 #reader-content h2,#reader-content h3{font-size:35px}#reader-content .sum{font-size:18px}
 .reader-end{padding:15px 25px 55px}
 /* no layer promotion on phones; the September lesson */
 .plate,.beat{will-change:auto}
}
@media(max-width:360px){
 .hero h1{font-size:100px}.hero-script{font-size:46px}.hero-location{font-size:12px}
 .beat h2{font-size:54px}.manifesto .beat h2{font-size:76px}
 .poster h2{font-size:64px}
 .story-card{height:440px}.card-copy h3{font-size:34px}
 .entry-title{font-size:25px}
}

/* ---------- motion preference ---------- */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-copy,.hero-photo img{transform:none!important;opacity:1!important}
 .beat{transform:none!important}
}

/* ---------- the assembly: WILD WEED rises out of the photograph on first load ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero h1 .l{display:inline-block}
.hero-dev{position:absolute;inset:0;background:#0f130c;opacity:0;pointer-events:none}
/* hold everything until fonts and the photograph are ready; without scripts the poster is simply static */
.js:not(.assemble) .hero-copy,.js:not(.assemble) .hero-cue{opacity:0}
.assemble .hero-dev{animation:develop 2.4s var(--ease) both}
.assemble .hero h1 .l{animation:rise .8s var(--ease) both;animation-delay:calc(.2s + var(--i) * .085s)}
.assemble .hero h1 .weed .l{color:var(--ink);animation:rise .8s var(--ease) both,flush .7s var(--ease) both;animation-delay:calc(.2s + var(--i) * .085s),1.85s}
.assemble .hero-script{animation:write .8s var(--ease) 2.05s both}
.assemble .hero-copy .eyebrow{animation:settle-up .6s var(--ease) 2.45s both}
.assemble .hero-location{animation:settle-up .6s var(--ease) 2.6s both}
.assemble .hero-cue{animation:fade .6s var(--ease) 3.1s both}
@keyframes develop{from{opacity:.78}to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translate3d(0,.34em,0) scale(.9);filter:blur(14px)}55%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}
@keyframes flush{from{color:var(--ink);text-shadow:0 0 0 #d5f66a00}45%{text-shadow:0 0 34px #d5f66aa6}to{color:var(--lime);text-shadow:none}}
@keyframes write{from{opacity:0;clip-path:inset(-.1em 100% -.4em 0)}to{opacity:1;clip-path:inset(-.1em -2% -.4em 0)}}   /* 10-12: the end state kept clipping descenders (the g and y of "growing some seriously"); the bottom inset is negative now */
@keyframes settle-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:99999px){.assemble .hero-photo img{animation:settle-in 3.4s var(--ease) backwards}@keyframes settle-in{from{transform:scale(1.08)}to{transform:scale(1)}}}
@media(prefers-reduced-motion:reduce){.js:not(.assemble) .hero-copy,.js:not(.assemble) .hero-cue{opacity:1}.hero-dev{display:none}.hero h1 .weed .l{color:var(--lime)!important}.hero-script,.hero-location,.hero-copy .eyebrow,.hero-cue,.hero h1 .l{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}}

/* ---------- WATER: the WebGL displacement crossfade sits over the plates, under the shade ---------- */
.ripple-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;pointer-events:none}
.ripple-canvas.is-ready{opacity:1}
@media(prefers-reduced-motion:reduce){.ripple-canvas{display:none}}

/* ---------- tabloid rails: every card is a full-bleed page; the headline is the caption ---------- */
.rail{margin:0 calc(-1 * var(--pad))}
.story-track{gap:0;padding:0;scroll-padding:0;scroll-snap-type:x mandatory}
.story-card{flex:0 0 100%;height:min(82svh,760px);border-radius:0;scroll-snap-align:center}
.card-shade{background:linear-gradient(0deg,#0a140bf0 0%,#0a140b80 34%,transparent 66%)}
.card-number{top:26px;left:var(--pad);font-size:9px;color:#eff1dccc}
.card-copy{padding:0 var(--pad) 44px}
.card-copy h3{font-size:clamp(54px,7vw,104px);margin-bottom:16px;max-width:12ch;text-wrap:balance}
.card-copy p{font-size:15px;max-width:420px}
.track-footer{padding:16px var(--pad) 0;margin-top:0}
.after-dark,.after-paper{padding-bottom:40px}
.fact-row,.fact-strip{margin-bottom:36px}
@media(min-width:99999px){
 .story-card{flex-basis:64%;height:min(78vh,820px);scroll-snap-align:start}
 .story-card+.story-card{margin-left:4px}
 .card-copy h3{font-size:clamp(64px,5.6vw,110px)}
}
@media(max-width:99999px){
 .rail{margin:0 -22px}
 .story-track{gap:0;padding:0;scroll-padding:0}
 .story-card{flex-basis:100%;height:min(82svh,720px)}
 .card-number{left:22px}
 .card-copy{padding:0 22px 40px}
 .card-copy h3{font-size:clamp(46px,13vw,64px);margin-bottom:12px}
 .card-copy p{font-size:14px}
 .track-footer{padding:14px 22px 0}
}
@media(max-width:360px){.story-card{height:min(82svh,600px)}.card-copy h3{font-size:42px}}
.after.flower{padding-top:0;padding-bottom:28px}
.after.flower .track-footer{padding-bottom:0}

/* ---------- stage renderers: the canvas sits over the plates, under the shade; the DOM seam yields to the drawn one ---------- */
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;pointer-events:none}
.stage-canvas.is-ready{opacity:1}
.stage.gl .wipe-line{opacity:0}
@media(prefers-reduced-motion:reduce){.stage-canvas{display:none}}

/* iOS: letters are plain spans, never italic; the sun mark is text, never emoji */
.hero h1 .l{font-style:normal}
.sunmark,.footer-wordmark span{font-family:'Hiragino Sans','Apple Symbols',Arial,sans-serif;font-variant-emoji:text}
/* phones: the words and the actions clear the floating dock on short viewports (seen on iPhone 17, 754px tall) */
@media(max-width:99999px){.beat{bottom:max(104px,13svh)}.poster-copy{padding-bottom:max(104px,13svh)}.card-copy{padding-bottom:52px}}

/* ---------- 2026-10-07: the old mark, the glyphs, the plates, full-screen spreads, the pond finale ---------- */
.brand .mark{width:40px;height:40px;flex-shrink:0}
.eyebrow .glyph{width:36px;height:36px;object-fit:contain;margin-right:12px;flex-shrink:0}
.stage-head .eyebrow,.rail-head .eyebrow,.poster-copy .eyebrow{display:flex;align-items:center}
.after-paper .eyebrow .glyph{filter:invert(1) grayscale(1) contrast(1.1)}
/* diagram blocks: a drawing, a sentence, the numbers */
.diagram{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;margin-bottom:64px}
.plate-fig{margin:0}
.plate-fig img{width:100%;height:auto;display:block}
.plate-fig figcaption,.catchment figcaption{font-size:9px;color:var(--muted);margin-top:14px;letter-spacing:.12em}
.diagram-copy h3{font-size:clamp(34px,3.4vw,56px);margin-bottom:18px;text-wrap:balance}
.diagram-copy p{font-size:15px;line-height:1.7;color:#d9dccb;max-width:460px}
.diagram-copy p.small{font-size:13px;color:var(--muted);margin-top:12px}
.diagram-copy .big-number{margin-top:26px}
.diagram-copy .fact-strip{color:var(--muted);border-color:#eff1dc22;margin:26px 0 6px}
.catchment{margin:0 0 72px}
.catchment img{width:100%;height:auto;display:block;border-radius:6px}
/* rail heads */
.rail-head{display:flex;justify-content:space-between;align-items:center;padding:34px 0 16px;gap:20px}
.rail-head>.mono{font-size:8px;color:var(--muted)}
.after-paper .rail-head .eyebrow{color:#5b6a3c}.after-paper .rail-head>.mono{color:#6b765a}
/* spreads: one photograph per screen, the next one peeking, a progress bar and a nudge until the first swipe */
.rail{position:relative}
.story-track{scroll-snap-type:x mandatory;scroll-padding:0}
.story-card{flex:0 0 92%;height:100svh;max-height:none;scroll-snap-align:start;scroll-snap-stop:always}
.story-card+.story-card{margin-left:4px}
.card-number{top:64px}
.spread-ui{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;flex-direction:row-reverse;align-items:center;gap:14px;padding:18px var(--pad) 0;pointer-events:none}
.track-controls{display:flex;gap:4px;flex:1}
.track-controls button{flex:1;height:28px;width:auto;padding:0;display:block;pointer-events:auto;place-items:unset}
.track-controls button::after{content:'';display:block;height:2px;width:100%;border-radius:0;background:#eff1dc45;transition:background .3s}
.track-controls button[aria-current=true]::after{background:var(--lime);width:100%}
.rail-count{font-size:9px;color:#eff1dcc0;flex-shrink:0}
.swipe-chip{position:absolute;right:var(--pad);top:50svh;transform:translateY(-50%);font-size:9px;color:var(--dark);background:var(--lime);padding:11px 13px;border-radius:30px;transition:opacity .4s;animation:nudge 1.6s ease-in-out infinite;box-shadow:0 8px 24px #0006}
.rail.touched .swipe-chip{opacity:0}
@keyframes nudge{50%{transform:translate(6px,-50%)}}
.after.flower{padding-top:0}
/* the finale: the pond, the name, its reflection */
.finale{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:var(--dark)}
.finale>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finale-shade{position:absolute;inset:0;background:linear-gradient(0deg,#0f130cf2 0%,#0f130c8c 24%,#0f130c1a 56%,transparent 80%),linear-gradient(180deg,#0f130c66,transparent 22%)}   /* 2026-10-10: lighter, Sean: "the image comes out dull" */
.finale-copy{position:relative;z-index:2;flex:1;padding:16svh var(--pad) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.emblem{width:92px;height:92px;object-fit:contain;margin-bottom:8px;filter:drop-shadow(0 6px 24px #0009)}
.fin-name{position:relative;font-family:Bodoni,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(46px,9vw,112px);line-height:.96;letter-spacing:-.02em;text-shadow:0 5px 42px #000e;text-wrap:balance;max-width:12ch}
.fin-name>span{display:block}
.fin-name .refl{position:absolute;left:0;right:0;top:100%;transform:scaleY(-1);opacity:.26;filter:blur(2px);text-shadow:none;-webkit-mask-image:linear-gradient(#000,transparent 72%);mask-image:linear-gradient(#000,transparent 72%);pointer-events:none}
.fin-line{font-family:Bodoni,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(20px,3vw,34px);color:var(--ink);margin-top:clamp(84px,16vw,150px)}
.fin-line i{font-style:inherit;color:var(--lime)}
.finale .round-arrow{margin-top:14px}
.finale .footer-bottom{position:relative;z-index:2;margin:70px var(--pad) 24px;border-color:#eff1dc30}
@media(max-width:99999px){
 .brand .mark{width:34px;height:34px}
 .eyebrow .glyph{width:30px;height:30px;margin-right:10px}
 .diagram{grid-template-columns:1fr;gap:28px;margin-bottom:48px}
 .diagram-copy h3{font-size:34px}
 .catchment{margin-bottom:52px}
 .rail-head{padding:26px 0 12px}
 .story-card{flex-basis:92%;height:100svh}
 .card-copy{padding-bottom:max(104px,13svh)}
 .spread-ui{padding:16px 22px 0}
 .swipe-chip{right:22px}
 .finale-copy{padding-top:14svh}
 .emblem{width:76px;height:76px}
 .fin-name{font-size:clamp(44px,13vw,70px)}
 .finale .footer-bottom{margin:60px 22px 100px}
}
@media(prefers-reduced-motion:reduce){.swipe-chip{animation:none}}

@media(max-width:99999px){.story-card .card-copy{padding-bottom:max(108px,14svh)}}
@media(max-width:99999px){.finale .footer-bottom{margin-bottom:140px}}
/* 2026-10-07: the horizontals are full screen. One photograph fills the viewport; the bar, the counter and the nudge are the cue. */
.story-card,.story-card+.story-card{flex:0 0 100%;margin-left:0}
@media(min-width:99999px){.story-card{flex-basis:100%;height:100svh;max-height:none}}
@media(max-width:99999px){.story-card{flex-basis:100%}}

/* ---------- 2026-10-08: desktop composition pass. Phones are untouched; everything here is ≥900px or hover-only. ---------- */
/* spreads: arrows for the mouse; the chip is a touch word */
.spread-arrow{display:none}
@media(min-width:99999px) and (hover:hover){
 .swipe-chip{display:none}
 .spread-arrow{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:56px;height:56px;margin-top:-28px;border-radius:50%;font-size:26px;line-height:1;color:var(--lime);background:linear-gradient(140deg,#efffd32e,#0f130cb8 58%,#d5f66a1f);border:1px solid #efffdc66;box-shadow:inset 0 1px 0 #ffffff3a,0 10px 30px #0006;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transition:transform .6s var(--spring),opacity .3s,background .3s}
 .spread-arrow.prev{left:var(--pad)}.spread-arrow.next{right:var(--pad)}
 .spread-arrow:hover{transform:translateY(-3px) scale(1.06)}.spread-arrow:active{transform:scale(.9);transition-duration:.12s}
 .spread-arrow[aria-disabled=true]{opacity:0;pointer-events:none}
}
@media(min-width:99999px){
 /* the words: spread headlines, diagram headings, chapter heads and the EARTH / WATER beats grow into the width */
 .card-copy{padding-bottom:64px}
 .card-copy h3{font-size:clamp(66px,6.6vw,124px);max-width:none}
 .card-copy p{font-size:17px;max-width:520px}
 .card-number{top:70px;font-size:10px}
 .rail-count{font-size:10px}
 .beat{max-width:1040px}
 .beat h2{font-size:clamp(116px,11.5vw,172px)}
 .beat p{font-size:18px;margin-top:24px;max-width:500px}
 .eyebrow .glyph{width:46px;height:46px;margin-right:14px}
 .stage-head .eyebrow,.rail-head .eyebrow,.poster-copy .eyebrow,.section-top .eyebrow,.hero-copy .eyebrow{font-size:12px}
 .stage-head>.mono,.rail-head>.mono,.section-top>.mono{font-size:9px}
 .rail-head{padding:44px 0 20px}
 .diagram{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);min-height:72svh;margin-bottom:80px}
 .diagram-copy h3{font-size:clamp(40px,3.9vw,64px);margin-bottom:24px}
 .diagram-copy p{font-size:17px;max-width:520px}
 .diagram-copy p.small{font-size:14px}
 .diagram-copy .big-number{margin-top:34px}
 .big-number strong{font-size:140px}
 .big-number span{font-size:10px}
 .diagram-copy .fact-strip{font-size:11px;margin:34px 0 10px}
 .plate-fig figcaption,.catchment figcaption{font-size:10px}
 .catchment{margin-bottom:96px}
 .journal-heading p{font-size:16px}
 .fin-line{font-size:clamp(24px,2.6vw,38px)}
 .emblem{width:112px;height:112px}
}

/* ---------- 2026-10-08: the wheel. On desktop the chapter navigation is a dial, after the live site's wheel: it turns with the page, the chapter under the pointer is lit, and it opens to a bezel you can click. Replaces the glass pill and the dock at ≥900px. ---------- */
.wheel-nav{display:none}
@media(min-width:99999px){
 .desktop-nav,.chapter-dock{display:none}
 .wheel-nav{position:fixed;top:16px;right:calc(var(--pad) - 6px);z-index:16;display:flex;align-items:center;gap:16px}
 .wheel-label{font-size:9px;color:#eff1dcb0;letter-spacing:.16em;text-align:right;transition:opacity .3s}
 .wheel-nav.open .wheel-label{opacity:0}
 .wheel-toggle{position:relative;width:84px;height:84px;padding:0;border-radius:50%;color:var(--ink);background:radial-gradient(circle at 50% 50%,#0f130c66 60%,#0f130c00 72%);transition:width .55s var(--ease),height .55s var(--ease),background .4s}
 .wheel-nav.open .wheel-toggle{width:360px;height:360px;background:radial-gradient(circle at 50% 50%,#0f130ccc 64%,#0f130c00 72%)}
 .wheel-toggle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
 .wheel-toggle .rot{transform-origin:100px 100px;transform-box:view-box}
 .wheel-toggle .pointer{fill:var(--lime)}
 .wheel-toggle .hub{fill:var(--lime)}
 .wheel-toggle .rays{color:var(--lime)}
 .q .hit{fill:transparent}
 .q text{font-family:Mono,monospace;font-size:10.5px;letter-spacing:2.4px;fill:#eff1dc5c;transition:fill .4s}
 .q.on text{fill:var(--lime)}
 .wheel-nav.open .q{pointer-events:auto;cursor:pointer}
 .wheel-nav.open .q:hover text,.q:focus-visible text{fill:var(--ink)}
 .wheel-nav.open .q.on:hover text{fill:var(--lime)}
 .q:focus-visible{outline:none}.q:focus-visible .hit{fill:#d5f66a14}
 .wheel-nav:not(.open) .q text{fill:#eff1dc40}
 .wheel-nav:not(.open) .q.on text{fill:var(--lime)}
 @media(hover:hover){.wheel-toggle:hover{background:radial-gradient(circle at 50% 50%,#0f130c99 60%,#0f130c00 72%)}}
}
@media(prefers-reduced-motion:reduce){.wheel-toggle{transition:none}}

/* ---------- 2026-10-08: the poster on desktop is B, "through the type". The photograph fills the poster, nearly black on the left; WILD is cut out of it (the still version by background-clip, set by hero-wind.js), and the wind layer moves the plants inside the letters. ---------- */
@media(min-width:99999px){
 .hero-photo{left:0}
 .hero-shade{background:linear-gradient(90deg,#0f130c 0%,#0f130cf8 24%,#0f130cd8 40%,#0f130c80 58%,#0f130c1a 78%,transparent 100%),linear-gradient(0deg,#0f130ca8,transparent 42%)}
}
/* every width (Sean, 2026-10-08: the same wind treatment on the phone too) */
.js .hero h1 .wild .l{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:brightness(1.35) saturate(1.15) contrast(1.05);background-repeat:no-repeat}
.assemble .hero h1 .wild .l{animation-name:rise-lift}
@keyframes rise-lift{from{opacity:0;transform:translate3d(0,.34em,0) scale(.9)}to{opacity:1;transform:none}}
.wind-canvas{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.wind-canvas.is-live{opacity:1}
@media(prefers-reduced-motion:reduce){.wind-canvas{display:none}.js .hero h1 .wild .l{background-image:none!important;color:var(--ink);-webkit-text-fill-color:var(--ink);filter:none}}
/* phones: the headline band is shaded harder so the stencil has something to cut against (the desktop has its near-black left side) */
@media(max-width:99999px){.hero-shade{background:linear-gradient(0deg,#0f130c 0%,#0f130cf4 26%,#0f130cc8 44%,#0f130c60 62%,#0f130c10 80%,transparent 92%),linear-gradient(180deg,#0f130c99,transparent 28%)}}
@media(max-width:99999px){.js .hero h1 .wild .l{filter:brightness(1.6) saturate(1.15) contrast(1.05)}}
/* iOS: the arrows (↗ ↘ ↙ → ↑) take emoji presentation in WebKit; U+FE0E in the markup plus a symbol font keeps them as glyphs */
.line-button span,.plain-link span,.entry-arrow,.mobile-menu a,.round-arrow,.journal-link span,.spread-arrow,.hero-cue,.swipe-chip{font-variant-emoji:text}
.line-button span,.plain-link span,.entry-arrow,.round-arrow,.journal-link span,.spread-arrow{font-family:Space,'Hiragino Sans','Apple Symbols',Arial,sans-serif}

/* ---------- 2026-10-08, from the Apple study: reveal on enter, stat tiles, the desktop reading sizes ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}
/* stat tiles: the number big in lime, the clause in mono, on a dark tile with a hairline (the fact strip and the big number, same words) */
.stat-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:30px 0 10px}
.stat-tiles--one{grid-template-columns:minmax(0,1fr)}
.stat{display:flex;flex-direction:column;justify-content:space-between;min-height:160px;padding:26px 24px 22px;border-radius:28px;background:#161c12;border:1px solid #eff1dc14}
.stat strong{font-size:clamp(48px,4.4vw,72px);font-weight:600;letter-spacing:-.05em;line-height:.95;color:var(--lime)}
.stat span{font-size:10px;letter-spacing:.14em;color:var(--muted);margin-top:16px}
.stat p.small{margin-top:14px;max-width:460px;color:#d9dccb}
.stat-tiles--one .stat{flex-direction:row;align-items:center;gap:28px;min-height:0}
.stat-tiles--one .stat strong{font-size:clamp(72px,7vw,120px)}
.stat-tiles--one .stat span{margin-top:0;flex:0 0 auto}
.stat-tiles--one .stat p.small{margin-top:0}
.diagram-copy .stat-tiles{margin-top:30px}
@media(min-width:99999px){
 .diagram-copy p{font-size:19px;line-height:1.65;max-width:560px}
 .card-copy p{font-size:19px;line-height:1.6;max-width:580px}
 .beat p{font-size:21px;line-height:1.5;color:#c9cfb6;max-width:560px}
 .poster-line{font-size:19px;max-width:520px;color:#d4d8c4}
 .journal-heading p{font-size:18px}
 .stat-tiles{gap:14px}
}
@media(max-width:99999px){
 .stat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stat-tiles .stat:nth-child(3){grid-column:1/-1}
 .stat{min-height:130px;padding:20px 18px 16px;border-radius:22px}
 .stat strong{font-size:44px}
 .stat-tiles--one .stat{flex-direction:column;align-items:start;gap:10px}
 .stat-tiles--one .stat strong{font-size:84px}
}

/* ---------- 2026-10-08: the chapter bar (Apple study, item 4). On desktop the wheel lives in a slim sticky bar that arrives once the poster has gone: mark and name left, the chapter and the wheel right. The poster keeps only the mark and the cue. ---------- */
@media(min-width:99999px){
 .wheel-nav{top:0;right:0;left:0;height:64px;padding:0 var(--pad);justify-content:space-between;gap:24px;background:#0f130cb8;border-bottom:1px solid #eff1dc14;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);transform:translateY(-100%);transition:transform .55s var(--ease)}
 .wheel-nav.visible{transform:none}
 .bar-brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
 .bar-brand .mark{width:30px;height:30px}
 .bar-brand .mono{font-size:10px;letter-spacing:.14em}
 .bar-right{display:flex;align-items:center;gap:16px}
 .wheel-label{font-size:9px}
 .wheel-seat{position:relative;width:56px;height:56px}
 .wheel-toggle{position:absolute;top:0;right:0;width:56px;height:56px}
 .wheel-nav.open .wheel-toggle{width:340px;height:340px}
 .wheel-toggle .pointer{transform:translateY(3px)}
 .masthead .desktop-nav{display:none}
}

/* ---------- 2026-10-08: video where it is the subject (Apple study, item 6). The clip's own frame is the still; the file loads and plays only in view on desktop; a round glass button pauses it. ---------- */
.card-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#1a2217}
.video-toggle{display:none;position:absolute;right:var(--pad);bottom:48px;z-index:4;width:44px;height:44px;padding:0;border-radius:50%;place-items:center;color:var(--ink);background:linear-gradient(140deg,#efffd32e,#0f130cb8 58%,#d5f66a1f);border:1px solid #efffdc66;box-shadow:inset 0 1px 0 #ffffff3a,0 10px 30px #0006;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);transition:transform .6s var(--spring),opacity .3s}
.has-video .video-toggle{display:grid}
.video-toggle span{display:block;width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}        /* play */
.playing .video-toggle span{width:4px;height:14px;border:0;margin:0;background:currentColor;box-shadow:7px 0 0 currentColor;transform:translateX(-3px)}       /* pause */
@media(hover:hover){.video-toggle:hover{transform:translateY(-3px) scale(1.06)}}
.video-toggle:active{transform:scale(.9);transition-duration:.12s}
/* the catchment clips: two tiles under the map */
.clip-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 96px}
.clip-tile{position:relative;margin:0;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:#161c12;border:1px solid #eff1dc14;isolation:isolate}
.clip-tile .card-video{position:absolute}
.clip-tile figcaption{position:absolute;left:22px;bottom:18px;z-index:3;font-size:10px;letter-spacing:.14em;color:#eff1dccc;text-shadow:0 1px 8px #000a}
.clip-tile .video-toggle{right:18px;bottom:14px;width:40px;height:40px}
.catchment{margin-bottom:14px}
@media(max-width:99999px){.clip-tiles{gap:10px;margin-bottom:52px}.clip-tile{border-radius:22px}.clip-tile figcaption{left:16px;bottom:14px}}

/* ---------- 2026-10-08: DIG IT. without the filter row; the line in Sean's words with weight; the finale's return is a glass pot leaf ---------- */
.journal-heading .journal-line{font-family:Bodoni,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(34px,3.8vw,60px);line-height:1.05;letter-spacing:-.03em;color:var(--dark);max-width:11ch;text-align:right;padding-bottom:14px}
.journal-list{margin-top:36px}
.leaf-arrow{width:104px;height:104px;border-radius:0;background:none;border:0;box-shadow:none;display:block;overflow:visible}
.leaf-arrow .leaf-svg{width:100%;height:100%;overflow:visible}
.leaf-arrow .leaf-rim{transition:fill-opacity .3s}
@media(hover:hover){.leaf-arrow:hover .leaf-rim{fill-opacity:.8}}
@media(max-width:99999px){.journal-heading .journal-line{text-align:left;font-size:34px;margin-top:22px;max-width:none}.journal-list{margin-top:26px}.leaf-arrow{width:92px;height:92px}}
/* the leaf as glass: a blurred, saturated see-through body clipped to the leaf, a bright rim behind, a highlight and the arrow on top */
.leaf-arrow{position:relative;width:100px;height:100px;transform:scale(1.04)}
.leaf-arrow>*{position:absolute;inset:0;width:100%;height:100%}
.leaf-arrow .leaf-rim-svg,.leaf-arrow .leaf-top-svg{overflow:visible;pointer-events:none}
.leaf-glass{display:block;background:linear-gradient(140deg,#efffd34a,#2a4a1e66 55%,#d5f66a38),radial-gradient(70% 45% at 36% 18%,#ffffff66,#ffffff00 70%);-webkit-backdrop-filter:blur(16px) saturate(170%) brightness(1.12);backdrop-filter:blur(16px) saturate(170%) brightness(1.12);transition:background .3s}
.leaf-arrow .leaf-rim-svg path{transition:fill-opacity .3s}
@media(hover:hover){.leaf-arrow:hover{transform:scale(1.04) translateY(-3px)}.leaf-arrow:hover .leaf-rim-svg path{fill-opacity:.9}}
.leaf-arrow:active{transform:scale(.95)}
@media(max-width:99999px){.leaf-arrow{width:92px;height:92px;transform:none}}

/* ---------- 2026-10-10: AVOCA FARMS, the previous build's section carried over (copy verbatim), on paper after the people spread ---------- */
.avoca .diagram-copy h3 em{display:block;font-style:italic;font-weight:400;font-size:.6em;margin-top:.18em;letter-spacing:0}
.after-paper .diagram-copy h3{color:var(--dark)}
.after-paper .diagram-copy p{color:#3f4a30}
.after-paper .diagram-copy .fact-strip{color:#4f5a3c;border-color:#0f130c22}
.avoca .poster-actions{flex-direction:row;flex-wrap:wrap;gap:8px 32px;margin-top:22px}
a.line-button{text-decoration:none}
.avoca-fig img{border-radius:28px}
.avoca-fig figcaption{color:#6b765a}
.avoca-tiles .clip-tile{aspect-ratio:5/4;border-color:#0f130c14;background:#e6e8d8}
.avoca-tiles .clip-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avoca-tiles .clip-tile figcaption{color:#eff1dc}
@media(max-width:99999px){.avoca-tiles{grid-template-columns:1fr}.avoca-fig img{border-radius:22px}.avoca .poster-actions{flex-direction:column;gap:2px}}
.avoca-tiles .clip-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:2;background:linear-gradient(0deg,#0f130ca6,transparent);pointer-events:none}   /* the captions sit on light packaging */
.avoca-tiles{grid-template-columns:1fr}.avoca-tiles .clip-tile{aspect-ratio:16/10}   /* 2026-10-10: one tile, the Farmer Flight photograph was not Sean’s and is gone */
.avoca-fig img{aspect-ratio:4/5;object-fit:cover}   /* 2026-10-10: the Avoca Club frame is the figure; no tile row */
@media(max-width:99999px){.avoca-fig img{aspect-ratio:4/5}}
/* 2026-10-10: the live site's two Avoca slides, revolving (7 s each, 2 s dissolve), as on the live site; reduced motion shows the first */
.avoca-slides{position:relative;aspect-ratio:3/4;border-radius:28px;overflow:hidden;background:#e6e8d8}
.avoca-slides .avoca-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
.avoca-slides .avoca-slide+.avoca-slide{opacity:0;animation:avoca-cross 14s ease-in-out infinite}
@keyframes avoca-cross{0%,43%{opacity:0}50%,93%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.avoca-slides .avoca-slide+.avoca-slide{animation:none}}
@media(max-width:99999px){.avoca-slides{border-radius:22px}}

/* ---------- 2026-10-10: the Apple-motion pass (Sean: "push") — desktop only, off under reduced motion ---------- */
@media(min-width:99999px) and (prefers-reduced-motion:no-preference){
 .deep .poster>img,.deep .finale>img{transform:translate3d(0,calc(var(--py,0) * -7%),0) scale(1.14);will-change:transform}
 .deep .plate-fig img,.deep .catchment,.deep .avoca-slides,.deep .stat-tiles{transform:translate3d(0,calc(var(--dp,0) * 24px),0) scale(var(--ds,1));will-change:transform}
 .deep .story-card{transition:transform .75s var(--ease)}
 .deep .story-card:not(.is-active){transform:scale(.965)}
 .deep .story-card>img,.deep .story-card>.card-video{transition:filter .75s var(--ease)}
 .deep .story-card:not(.is-active)>img,.deep .story-card:not(.is-active)>.card-video{filter:brightness(.72)}
}

/* ---------- 2026-10-10: the phone's pill is the wheel (Sean: "push"); the dock stays ---------- */
@media(max-width:99999px){
 .menu-toggle{width:52px;height:52px;min-height:0;padding:0;border-radius:50%;display:grid;place-items:center;gap:0}
 .mini-wheel{display:block;width:38px;height:38px;color:var(--ink)}
 .mini-wheel svg{display:block;width:100%;height:100%;overflow:visible}
 .mini-wheel .rot{transform-origin:100px 100px;transform-box:view-box}
 .mini-wheel .hub,.mini-wheel .pointer{fill:var(--lime)}
 .menu-toggle[aria-expanded=true] .mini-wheel{color:var(--lime)}
}
/* 2026-10-10, Sean: "I'm not sure that's necessary, that horizontal pill at the bottom" — the dock is hidden on phones; the wheel shows the place and the Explore sheet has the links. Markup and script stay; delete this rule to bring it back. */
@media(max-width:99999px){.chapter-dock{display:none}}

/* ---------- 2026-10-10, Sean: "a half a pot leaf that bounces into a whole one back into a half so that we feel like there's something to the right. You could put the arrow inside the pot leaf." ---------- */
.swipe-chip{right:-30px;padding:0;background:none;box-shadow:none;border-radius:0;width:88px;height:88px;animation:leaf-in 2.6s var(--spring) infinite}
.leaf-cue{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 18px #0009)}
.leaf-cue .leaf-body{fill:var(--lime);fill-opacity:.92;stroke:#f3ffd8;stroke-width:1.2;stroke-linejoin:round}
.leaf-cue .leaf-arrow{stroke:var(--dark);stroke-width:3.2}
@keyframes leaf-in{0%,12%{transform:translate(0,-50%)}50%,62%{transform:translate(-44px,-50%)}100%{transform:translate(0,-50%)}}
@media(max-width:99999px){.swipe-chip{right:-30px}}
@media(prefers-reduced-motion:reduce){.swipe-chip{animation:none;transform:translate(-44px,-50%)}}
@media(min-width:99999px){
 .spread-arrow{width:72px;height:72px;margin-top:-36px;border-radius:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:0;overflow:visible}
 .spread-arrow .leaf-cue{filter:drop-shadow(0 10px 18px #0009)}
 .spread-arrow .leaf-body{fill:#0f130cb8;stroke:#d5f66a;stroke-width:1.4;fill-opacity:1;transition:fill .3s}
 .spread-arrow .leaf-arrow{stroke:var(--lime)}
 .spread-arrow:hover .leaf-body{fill:#1d2a16d9}
 .spread-arrow.prev .leaf-cue{transform:scaleX(-1)}
}

/* ---------- 2026-10-10: the plates on phones — numbered hotspots and a caption rail (Sean: "how could these illustrations be really informative and interesting on mobile") ---------- */
.plate-art{position:relative}
.hotspots,.plate-steps{display:none}
@media(max-width:99999px){
 .plate-fig[data-steps]{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
 .plate-fig[data-steps] figcaption{padding:0 var(--pad)}
 .hotspots{display:block;position:absolute;inset:0;pointer-events:none}
 .hotspot{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;padding:0;border-radius:50%;background:#0f130cd0;border:1px solid #d5f66a99;color:var(--lime);font-family:'JetBrains Mono',Menlo,monospace;font-size:10px;letter-spacing:.06em;pointer-events:auto;transition:background .35s,color .35s,transform .5s var(--spring)}
 .hotspot.on{background:var(--lime);color:var(--dark);border-color:var(--lime);transform:translate(-50%,-50%) scale(1.12);animation:hot-pulse 1.9s ease-out infinite}
 @keyframes hot-pulse{0%{box-shadow:0 0 0 0 #d5f66a99}100%{box-shadow:0 0 0 16px #d5f66a00}}
 .plate-steps{display:block;padding:6px var(--pad) 0}
 .steps-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .steps-track::-webkit-scrollbar{display:none}
 .step{flex:0 0 100%;scroll-snap-align:start;display:flex;gap:14px;align-items:baseline;padding:18px 0 6px}
 .step .mono{color:var(--lime);font-size:11px;flex:0 0 auto}
 .step p{margin:0;font-size:16px;line-height:1.5;color:#d9dccb}
 .after-paper .step p{color:#3f4a30}
 .after-paper .hotspot{background:#eff1dcd0;color:#3f5424;border-color:#3f542466}.after-paper .hotspot.on{background:#3f5424;color:#eff1dc}
}
@media(prefers-reduced-motion:reduce){.hotspot.on{animation:none}}
/* 2026-10-10, Sean: "the page now on mobile drifts open to the right" — two causes, both from today: the leaf cue hangs past the rail's right edge,
   and the plate figure (negative margins + the picture) made the diagram's 1fr column wider than the screen. Clip the rail, let the column shrink, belt on body. */
@media(max-width:99999px){
 .rail{overflow:clip}
 .diagram{grid-template-columns:minmax(0,1fr)}
 .plate-fig[data-steps]{min-width:0}
 .plate-art{overflow:clip}
 body{overflow-x:clip}
}

/* ---------- 2026-10-10, probe18 on Sean's iPhone (iOS 18.7, 375 × 567 visible, 3×): crashed at the THE FLOWER rail head when he pinched in to read
   "FIVE COLAS. SWIPE." (8 px). Two fixes: the small mono lines are readable on phones so nobody pinches; and every photograph's `sizes` is 96vw on
   phones, which makes a 3× phone take the 1080 rung instead of 1600 — about half the decoded memory per image (28 were decoded at the crash). ---------- */
@media(max-width:99999px){
 .rail-head>.mono{font-size:11px;letter-spacing:.12em}
 .card-number{font-size:10px}
 .stage-head>.mono{font-size:10px}
}

/* ---------- 2026-10-11: the catchment map on phones — the mobile map inlined so its numbered steps are tappable and light up, with the same caption rail as the plates ---------- */
.catchment .map-inline{width:100%;height:auto;overflow:visible}
.catchment .map-inline text{font-family:'JetBrains Mono',ui-monospace,monospace}
.catchment .map-inline .map-land{fill:rgba(233,236,242,.045);stroke:rgba(233,236,242,.38);stroke-width:1.4}
.catchment .map-inline .map-road{fill:none;stroke:rgba(233,236,242,.25);stroke-width:14;stroke-linecap:round;stroke-linejoin:round}
.catchment .map-inline .map-road-edge{fill:none;stroke:#e9ecf2;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.catchment .map-inline .map-water{fill:none;stroke:#c8ff2e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.catchment .map-inline .map-lift{stroke-dasharray:10 9}
.catchment .map-inline .map-fine{fill:none;stroke:rgba(233,236,242,.76);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.catchment .map-inline .map-dim{fill:none;stroke:rgba(233,236,242,.38);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.catchment .map-inline .map-roots{fill:none;stroke:rgba(233,236,242,.86);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.catchment .map-inline .map-step{fill:#e9ecf2;font-size:19px;letter-spacing:2.1px}
.catchment .map-inline .map-accent{fill:#c8ff2e}
.catchment .map-inline .tank-water,.catchment .map-inline .pond-level{fill:rgba(200,255,46,.38);transform-box:fill-box;transform-origin:center bottom}
.catchment .map-inline .flow-arrow{stroke-width:1.9}
.catchment .map-inline .wloop-mobile{display:block;width:100%;height:auto;max-height:none}
.catchment .map-inline .wloop-mobile .map-step{font-size:22px;letter-spacing:1.7px}
.catchment .map-inline .wflow{animation:wseep 3s linear infinite}
.catchment .map-inline .wrain{animation:wrn 3.2s ease-in-out infinite}
.catchment .map-inline .tank-water{animation:tankfill 8s ease-in-out infinite}
.catchment .map-inline .pond-level{animation:pondlive 5.5s ease-in-out infinite}
.catchment .map-inline .flow-arrow{animation:arrowpulse 2.4s ease-in-out infinite}
.catchment .map-inline .tank-water{animation:none;transform:scaleY(.68)}
.catchment .map-inline .pond-level{animation:none;transform:none}
.catchment .map-inline text{fill:#e9ecf2}
.catchment .map-inline{display:none}
@media(max-width:99999px){
 .catchment picture{display:none}
 .catchment .map-inline{display:block;width:100%;height:auto}
 .catchment .map-inline .map-step{cursor:pointer;transition:fill .35s}
 .catchment .map-inline .map-step.on{fill:var(--lime)}
 .catchment .plate-steps{padding-top:6px}
}

/* ---------- 2026-10-11: the phone landing, after Sean's list (compass makes no sense on the poster; the eyebrow gets lost; no cola in the crop;
   Wild west more prominent; Mendocino County; not balanced; the name in the sky). Desktop untouched except the copy and the Wild west line. ---------- */
.hero-sky{display:none}
.hero-script--west{font-size:clamp(34px,8.5vw,60px);margin:2px 0 14px;color:#eff1dccc}
@media(min-width:99999px){.hero-script--west{font-size:clamp(36px,3vw,56px)}}
.assemble .hero-script--west{animation:write .8s var(--ease) 2.3s both}
@media(max-width:99999px){
 .hero-photo img{object-position:18% 40%!important}
 .hero-sky{display:block;position:absolute;left:var(--pad);top:max(16svh,120px);z-index:1;margin:0;font-family:Space,sans-serif;font-weight:600;font-size:clamp(46px,14.5vw,72px);line-height:.92;letter-spacing:.04em;color:#eff1dc;opacity:.3;-webkit-text-stroke:.6px #eff1dc55;transform:translate3d(0,calc(var(--hp) * -40px),0);pointer-events:none}
 .hero-sky span{display:block}
 .js:not(.assemble) .hero-sky{opacity:0}
 .assemble .hero-sky{animation:fade 1.6s var(--ease) 1.2s both}
 .hero-copy{padding-bottom:clamp(96px,14svh,150px)}
 .hero-copy .eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;margin-bottom:18px}
 .hero-copy .eyebrow::after{content:"";flex:1;height:1px;background:#d5f66a66;margin-left:6px}
 .hero-location{font-size:12px;letter-spacing:.06em;max-width:none;color:#d9dccb}
 .masthead .brand,.menu-toggle,.mini-label{opacity:0;transform:translateY(-10px);transition:opacity .5s var(--ease),transform .55s var(--ease);pointer-events:none}
 .past-hero .masthead .brand,.past-hero .menu-toggle,.past-hero .mini-label{opacity:1;transform:none;pointer-events:auto}
 .mini-label{font-size:9px;color:var(--muted);margin-right:12px;align-self:center}
 .masthead{display:flex;align-items:center}
}
@media(prefers-reduced-motion:reduce){.hero-sky,.hero-script--west{animation:none!important;opacity:.3}.hero-script--west{opacity:1}}
@media(max-width:99999px){
 /* the masthead was absolute (poster only) — on phones it is now the bar that arrives after the poster and stays */
 .past-hero .masthead{position:fixed;background:linear-gradient(#0f130cd9,#0f130c00);padding-bottom:26px}
 .mini-label{margin-left:auto}
}

/* 2026-10-11, Sean: "keep the logo and write next to it a small family pot farm, then fix FOLEY FAMILY FARMS so it's above Wild Weed and not on top of it" */
.brand-tag{display:none}
@media(max-width:99999px){
 .masthead .brand{opacity:1;transform:none;pointer-events:auto}
 .brand-name{display:none}.brand-tag{display:inline;color:var(--lime)}
 .past-hero .brand-name{display:inline}.past-hero .brand-tag{display:none}
 .hero-sky{position:static;margin:0 0 20px;transform:none;font-size:clamp(40px,12.5vw,64px)}
 .hero-copy{padding-bottom:clamp(84px,11svh,130px)}
}

/* 2026-10-11, Sean: "bring the compass back to the landing page but make it look more like a sun but still a compass" — the phone dial is a lime sun
   (disc + rays as the ticks, the four cardinal rays long) with the leaf on the disc in ink; it still turns a quarter per chapter and the pointer still marks the top. */
@media(max-width:99999px){
 .menu-toggle{opacity:1;transform:none;pointer-events:auto}
 .mini-wheel{width:40px;height:40px}
 .mini-wheel .sun{fill:var(--lime)}
 .mini-wheel .hub-leaf{fill:#0f130c;opacity:.85}
 .mini-wheel .pointer{fill:var(--ink)}
}
/* 2026-10-11, Sean: "when you start scrolling the landing page have Foley scroll up and fade out then Family then Farms, then the whole page" —
   scroll-mapped through --hp (the hero's exit, 0 → 1): each word lifts 44 px and fades in its own window (FOLEY 0–.22, FAMILY .08–.30, FARMS .16–.38),
   the rest of the block holds until .34 and leaves by .80. Phones only; desktop keeps its single lift. */
@media(max-width:99999px){
 .hero-sky span{transform:translate3d(0,calc(var(--w,0) * -44px),0);opacity:calc(1 - var(--w,0))}
 .hero-sky span:nth-child(1){--w:clamp(0,calc(var(--hp) / .22),1)}
 .hero-sky span:nth-child(2){--w:clamp(0,calc((var(--hp) - .08) / .22),1)}
 .hero-sky span:nth-child(3){--w:clamp(0,calc((var(--hp) - .16) / .22),1)}
 .hero-copy{--b:clamp(0,calc((var(--hp) - .34) / .46),1);transform:translate3d(0,calc(var(--b) * -70px),0);opacity:calc(1 - var(--b))}
}
@media(prefers-reduced-motion:reduce){.hero-sky span{transform:none;opacity:1}}

/* 2026-10-11, Sean: "switch the logo text A small family pot farm with Foley Family Farms and keep the effect" — the brand reads FOLEY FAMILY FARMS beside the mark on the poster again; the three ghosted lines above WILD are A SMALL / FAMILY / POT FARM with the same staggered exit. */
@media(max-width:99999px){.brand-name{display:inline}.brand-tag{display:none}.hero-sky{font-size:clamp(36px,11.5vw,60px)}}

/* 2026-10-11, Sean: "take out small … make it A / Family / Pot Farm / growing some seriously (a different text treatment) / WILD WEED". The new line is Sean's own,
   set in the Garamond italic like "Wild ideas."; it is the fourth stage of the exit before the block goes. Phones only. */
.hero-grow{display:none}
@media(max-width:99999px){
 .hero-sky{margin-bottom:6px}
 .hero-grow{display:block;margin:0 0 10px;font-family:Garamond,serif;font-style:italic;font-size:clamp(26px,7.4vw,42px);letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
 .hero-grow span{display:block;--w:clamp(0,calc((var(--hp) - .24) / .22),1);transform:translate3d(0,calc(var(--w) * -36px),0);opacity:calc(1 - var(--w))}   /* the exit lives on the span: the entrance animation's fill would override it on the p */
 .js:not(.assemble) .hero-grow{opacity:0}
 .assemble .hero-grow{animation:write .8s var(--ease) 1.9s both}
 .hero-copy{--b:clamp(0,calc((var(--hp) - .42) / .4),1)}
}
@media(prefers-reduced-motion:reduce){.hero-grow{animation:none}.hero-grow span{transform:none;opacity:1}}

/* ---------- 2026-10-11, Sean: the place line "should cascade down with the scroll instead of up and cross into the next frame where it lands in the sky".
   Phones: as the poster leaves, the line sinks (58 svh over the hero's exit) instead of lifting with the block and fades between .40 and .62; the same words sit in the
   SUN stage's sky (top 18 svh of the pin) and fade in over the same window, so at the crossing the two coincide and the line appears to land; it stays through
   ONE SUN and leaves before ONE SEASON (--pos .55 → .85). Desktop unchanged. ---------- */
.stage-sky{display:none}
@media(max-width:99999px){
 .hero-copy .hero-location span{display:block;--s:clamp(0,calc((var(--hp) - .40) / .22),1);transform:translate3d(0,calc(var(--hp) * 58svh),0);opacity:calc(1 - var(--s))}   /* on the span: the entrance animation's fill on the p would override it */
 .hero-copy{--b:clamp(0,calc((var(--hp) - .42) / .4),1)}
 .hero{overflow:visible}.hero-photo{overflow:hidden}
 .stage.manifesto .stage-sky{display:block;position:absolute;left:var(--pad);right:var(--pad);top:18svh;z-index:3;margin:0;font-size:12px;letter-spacing:.06em;color:#0f130c;text-shadow:0 0 14px #ffffff80,0 1px 2px #ffffff60;text-wrap:pretty;pointer-events:none;
  --in:clamp(0,calc((var(--hp) - .40) / .22),1);--out:clamp(0,calc((var(--pos,0) - .55) / .3),1);opacity:calc(var(--in) * (1 - var(--out)));transform:translate3d(0,calc((1 - var(--in)) * 10px),0)}
}
@media(prefers-reduced-motion:reduce){.hero-copy .hero-location span{transform:none;opacity:1}.stage-sky{display:none!important}}

/* 2026-10-11, Sean: "the line should be lime not black and take Wild West with it" — both lines sink together on phones and land in the sky in lime, with an ink shadow for the bright plate. */
@media(max-width:99999px){
 .hero-copy .hero-location span,.hero-copy .hero-script--west span{color:var(--lime);display:block;--s:clamp(0,calc((var(--hp) - .40) / .22),1);transform:translate3d(0,calc(var(--hp) * 58svh),0);opacity:calc(1 - var(--s))}
 .hero-copy .hero-script--west{color:var(--lime)}
 .stage.manifesto .stage-sky{color:var(--lime);text-shadow:0 1px 3px #0f130ccc,0 0 18px #0f130c99;top:14svh}
 .stage-sky span{display:block}
 .stage-sky .sky-west{font-family:Garamond,serif;font-style:italic;font-size:clamp(34px,8.5vw,60px);letter-spacing:-.06em;line-height:1;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.hero-copy .hero-script--west span{transform:none;opacity:1}}
/* the block's own lift now waits until the two sinking lines have landed (.62 → .95), so it cannot pull them off the landing spot mid-crossing */
@media(max-width:99999px){.hero-copy{--b:clamp(0,calc((var(--hp) - .62) / .33),1)}}
@media(max-width:99999px){.stage.manifesto .stage-sky{top:8svh}}   /* measured: the landed pair sat ~55 px below the sinking pair at the crossing; 8 svh puts them within 10 px */

/* ---------- 2026-10-11, Sean: "the text should not cross into the next frame; instead it should be white as before and go down but stop at the bottom of the front page,
   then scroll up with the end of the page." The sky landing is gone (markup removed). On phones the two lines sink as the scroll starts, stop just inside the poster's
   bottom edge (min(40 svh × hp, 9 svh)), never fade, and leave with the poster. The block's lift and fade now sit on the headline and "Wild ideas." instead of the block,
   so the two lines are not carried or faded with it. ---------- */
@media(max-width:99999px){
 .hero{overflow:hidden}
 .hero-copy{transform:none;opacity:1}
 .hero-copy>h1,.hero-copy>.hero-script:not(.hero-script--west){transform:translate3d(0,calc(var(--b,0) * -70px),0);opacity:calc(1 - var(--b,0))}
 .hero-copy{--b:clamp(0,calc((var(--hp) - .42) / .4),1)}
 .hero-copy .hero-location span,.hero-copy .hero-script--west span{color:#eff1dc;transform:translate3d(0,min(calc(var(--hp) * 40svh),9svh),0);opacity:1}
 .hero-copy .hero-script--west{color:#eff1dccc}.hero-copy .hero-location{color:#d9dccb}
}

/* the sink lives on a wrapper (.hero-tail) around the two lines: on the lines themselves it fought their entrance animations (fill-mode) and the write-in clip hid the sunk text */
@media(max-width:99999px){
 .hero-tail{transform:translate3d(0,min(calc(var(--hp) * 40svh),9svh),0)}
 .hero-copy .hero-location span,.hero-copy .hero-script--west span{transform:none}
}
@media(prefers-reduced-motion:reduce){.hero-tail{transform:none}}

/* 2026-10-11, Sean: "take out THE FLOWER / FOUR COLAS. SWIPE. and keep the frames bleeding into each other" — the flower rail has no head; on phones the paper padding above
   and below it is gone too, so the cards run edge to edge straight out of the SUN stage. */
@media(max-width:99999px){.flower--bleed{padding-top:0;padding-bottom:0}}
@media(min-width:99999px){.flower--bleed{padding-top:0}}
@media(max-width:99999px){.after-paper.flower--bleed{padding-bottom:0!important}}   /* a later phone rule set 28 px; the frames bleed */
/* 2026-10-11, Sean: "do the same for the other horizontals" — on phones every rail bleeds: a rail that leads its block cancels the block's top padding, every rail cancels the
   bottom padding, so the frames run edge to edge into whatever comes next (the build rail follows the hugel plate and keeps the plate's spacing above it). */
@media(max-width:99999px){
 .after>.rail{margin-bottom:-40px}
 .after>.rail:first-child{margin-top:-56px}
 .after.flower{margin-bottom:0}
}
@media(max-width:99999px){.after>.rail:first-child{margin-top:-46px}}   /* measured: the phone top padding is 46 px, not 56; the rails had overshot by 10 */

/* ---------- 2026-10-12, Sean on the study: "the wheel should be there and the text needs better treatment". First pass, wide screens only.
   The phone poster was arriving at desktop width with phone metrics (22 px gutter, 8 px brand, a 52 px compass, the whole stack in the left third).
   Here the type is sized by the viewport's height and the headline uses the width: A / FAMILY / POT FARM and the growing line top of the block,
   WILD WEED on one line across the frame, Wild ideas. under it, "Wild west," and the place line in the bottom-right corner. Every exit (the
   stack lifting one word at a time, the growing line, the headline, the two sinking lines) is on the same spans as the phone, so the choreography is unchanged. */
@media(min-width:900px){
 :root{--gut:clamp(48px,4.5vw,96px)}   /* the poster's own gutter; --pad stays 22 px because the phone bleeds hard-code it */
 .masthead{padding:30px var(--gut)}
 .brand{font-size:11px;gap:14px;letter-spacing:.14em}
 .brand .mark{width:50px;height:50px}
 .menu-toggle{width:96px;height:96px}
 .mini-wheel{width:76px;height:76px}
 .past-hero .masthead{padding-top:18px;padding-bottom:22px}
 .past-hero .menu-toggle{width:64px;height:64px}
 .past-hero .mini-wheel{width:50px;height:50px}
 .hero-copy{padding-left:var(--gut);padding-right:var(--gut);padding-bottom:clamp(56px,7vh,92px)}
 .hero-sky{font-size:clamp(52px,7vh,84px);margin-bottom:12px;letter-spacing:.05em}
 .hero-grow{font-size:clamp(34px,4.6vh,54px);margin-bottom:10px}
 .hero h1{font-size:clamp(190px,27vh,330px);white-space:nowrap;line-height:.8}
 .hero h1 br{display:none}
 .hero h1 .weed{margin-left:.16em}
 /* Sean 10-12: "Wild ideas. Wild west. could be the same line and then keep Anderson Valley .. on the right side" — the copy block becomes a wrapping row:
    the stack, the growing line and the headline each take the full width; the last row is Wild ideas. + Wild west, on the left and the place line on the right, on one baseline. */
 .hero-copy{display:flex;flex-wrap:wrap;align-items:baseline}
 .hero-sky,.hero-grow,.hero h1{flex:0 0 100%}
 .hero-copy>.hero-script{font-size:clamp(64px,9vh,108px);margin:12px 0 0;flex:0 0 auto}
 .hero-tail{position:static;flex:1 1 auto;display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin:12px 0 0 .3em;max-width:none;text-align:left}
 .hero-script--west{font-size:clamp(64px,9vh,108px);margin:0}
 .hero-location{font-size:13px;letter-spacing:.16em;text-align:right;white-space:nowrap}
 .hero-cue{left:50%;right:auto;transform:translateX(-50%)}
}

/* ---------- 2026-10-12, Sean: "we need a better looking menu when clicking the compass and we need it throughout".
   The Explore sheet (the lime pill under the compass, absolute to the top of the document, so it was gone once the bar went fixed) becomes a dark-glass
   panel fixed to the right edge at every width and on every part of the page: an eyebrow, the four chapters as big numbered lines with a hairline
   between, the place line at the foot, the rest of the page dimmed. Same markup, same toggle in app.js; the compass stays on top of it to close it. */
@keyframes menu-in{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes menu-line{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes menu-dim{from{opacity:0}to{opacity:1}}
.mobile-menu:not([hidden]){display:flex;flex-direction:column;justify-content:flex-end;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(540px,100%);z-index:40;margin:0;padding:120px clamp(28px,4.5vw,72px) 44px;border-radius:0;color:var(--ink);background:linear-gradient(165deg,#1a2414f0,#0f130cf6 60%);border-left:1px solid #f3ffdf22;box-shadow:-30px 0 80px #0006,inset 1px 0 0 #ffffff14;-webkit-backdrop-filter:blur(30px) saturate(140%);backdrop-filter:blur(30px) saturate(140%);animation:menu-in .55s var(--ease) both}
.mobile-menu:not([hidden])::before{content:"";position:fixed;top:0;bottom:0;left:0;right:min(540px,100%);background:#0f130c8c;animation:menu-dim .5s var(--ease) both;pointer-events:none}
.mobile-menu:not([hidden]) a{display:grid;grid-template-columns:52px 1fr;align-items:baseline;gap:0 18px;min-height:0;padding:clamp(16px,2.4vh,26px) 0;font-family:Space,sans-serif;font-weight:700;font-size:clamp(34px,4.6vh,54px);line-height:1;letter-spacing:-.05em;color:var(--ink);border-bottom:1px solid #eff1dc1c;transition:color .3s,transform .5s var(--ease);animation:menu-line .6s var(--ease) both}
.mobile-menu:not([hidden]) a:first-of-type{border-top:1px solid #eff1dc1c;animation-delay:.08s}
.mobile-menu:not([hidden]) a:nth-of-type(2){animation-delay:.15s}
.mobile-menu:not([hidden]) a:nth-of-type(3){animation-delay:.22s}
.mobile-menu:not([hidden]) a:nth-of-type(4){animation-delay:.29s}
.mobile-menu:not([hidden]) a span{font:500 11px/1 Mono,monospace;letter-spacing:.16em;color:var(--lime);transform:translateY(-.9em)}
@media(hover:hover){.mobile-menu:not([hidden]) a:hover{color:var(--lime);transform:translateX(10px)}}
.mobile-menu:not([hidden]) a:focus-visible{outline-color:var(--lime)}
.mobile-menu:not([hidden])::after{content:"ANDERSON VALLEY — MENDOCINO COUNTY — california.";display:block;margin-top:34px;font:500 11px/1.6 Mono,monospace;letter-spacing:.16em;color:var(--muted)}
body:has(.mobile-menu:not([hidden])) .masthead{z-index:50}
body:has(.mobile-menu:not([hidden])) .menu-toggle .mini-wheel{color:var(--lime)}
@media(max-width:600px){.mobile-menu:not([hidden]){padding-top:110px}.mobile-menu:not([hidden])::before{display:none}}
@media(prefers-reduced-motion:reduce){.mobile-menu:not([hidden]),.mobile-menu:not([hidden]) a,.mobile-menu:not([hidden])::before{animation:none}}

/* ---------- 2026-10-12, Sean: "look into the size of illustrations, they seem to have gotten too big for the desktop view, they need to adjust to the screen".
   The phone plates, the phone map and the Avoca frame were full-width at 1860 px (the hugel plate 2026 px tall, the map near 4000). Wide screens only:
   the drawing is capped to the screen's height and shrink-wrapped so the numbered hotspots stay registered to it; the plate keeps its caption rail
   under it with the copy beside; the map stands at 78 vh with its eight steps as a list beside it; the clip tiles and the Avoca frame are capped too. */
@media(min-width:900px){
 .diagram{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:clamp(40px,5vw,96px);align-items:center;margin-bottom:96px}
 .plate-fig[data-steps]{margin:0}
 .plate-fig[data-steps] figcaption{padding:0;margin-top:16px}
 .plate-fig .plate-art{width:fit-content;max-width:100%;margin:0 auto}
 .plate-fig .plate-art picture{display:block}
 .plate-fig .plate-art img{height:min(62vh,36vw);width:auto;max-width:none}   /* an explicit height: width:auto + max-width:100% inside a fit-content box resolves to 0 */
 .plate-steps{padding:6px 0 0}
 .hotspot{width:38px;height:38px;font-size:11px}
 .diagram-copy h3{font-size:clamp(36px,3.4vw,54px)}
 .diagram-copy p{font-size:17px;max-width:520px}
 .catchment{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:clamp(40px,5vw,96px);align-items:center;max-width:1240px;margin:0 auto 40px}
 .catchment .map-inline.wloop-mobile{grid-row:1/3;display:block;width:auto;height:78vh;max-height:900px;max-width:min(44vw,560px)}
 .catchment figcaption{grid-column:2;align-self:end;margin:0 0 6px}
 .catchment .plate-steps{grid-column:2;align-self:start;padding:0}
 .catchment .steps-track{flex-direction:column;gap:0;overflow:visible;scroll-snap-type:none}
 .catchment .step{flex:0 0 auto;padding:14px 0;border-bottom:1px solid #eff1dc14}
 .catchment .step p{font-size:17px}
 .clip-tiles{max-width:1240px;margin:0 auto 110px}
 .avoca .diagram{align-items:center}
 .avoca-slides{height:min(70vh,760px);width:auto;aspect-ratio:3/4;margin-left:auto}
}

/* ---------- 2026-10-12: the rails were tried as spreads (cards at 62 % of the width, the next one showing at the right edge, ?v=mod9); Sean: "one card per view". The phone's full-width card stands at every width. */

/* ---------- 2026-10-12, Sean's screenshot mid-scroll: "Wild west." sinking away from "Wild ideas." (the phone exit, where it is its own line that sinks with
   the place line). On wide screens the last row is one line, so the whole row sinks together: Wild ideas., Wild west. and the place line, on the same
   58 svh path, fading over the same window; the spans' own sink is neutralised so nothing moves twice. */
@media(min-width:900px){
 .hero-copy{--pb:clamp(56px,7vh,92px);--sink:min(calc(var(--hp) * 58svh),calc(var(--pb) - 10px))}   /* the row sinks, stops 10 px above the poster's bottom edge and rides out with it (Sean 10-11: "stop at the bottom of the front page") */
 .hero-copy>.hero-script:not(.hero-script--west){transform:translate3d(0,var(--sink),0);filter:none}   /* Sean 10-12: "it should stick to the bottom" — no fade; the poster's edge carries the row out */
 .hero-tail{transform:translate3d(0,var(--sink),0)}
 .hero-copy .hero-location span,.hero-copy .hero-script--west span{transform:none;opacity:1}
 .hero-cue{filter:opacity(calc(1 - var(--hp) * 24))}   /* the cue's fade-in animation owns its opacity (fill-mode), so the exit lives on a filter */
}
@media(prefers-reduced-motion:reduce){.hero-copy>.hero-script:not(.hero-script--west),.hero-tail{transform:none;filter:none}}

/* ---------- 2026-10-12, Sean: "and Wild Weed should dissolve" — on wide screens the headline no longer lifts; it dissolves in place (opacity + a soft blur)
   between .28 and .62 of the poster's exit, and the wind canvas inside WILD dissolves with it. */
@media(min-width:900px){
 .hero-copy{--d:clamp(0,calc((var(--hp) - .28) / .34),1)}
 .hero-copy>h1{transform:none;opacity:calc(1 - var(--d));filter:blur(calc(var(--d) * 16px))}
 .hero-copy .wind-canvas{filter:opacity(calc(1 - var(--d))) blur(calc(var(--d) * 16px))}
}
@media(prefers-reduced-motion:reduce){.hero-copy>h1{filter:none}.hero-copy .wind-canvas{filter:none}}

/* ---------- 2026-10-12, Sean: "on the second frame this bar should fade in more gently". The bar's shade switched on in one step with `.past-hero`;
   it lives on a pseudo-element now and fades over 1.4 s, the chapter label over the same, and the compass eases between its poster and bar sizes. */
.masthead{background:none!important}
.masthead::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#0f130cd9,#0f130c00);opacity:0;transition:opacity 1.4s var(--ease);pointer-events:none}
.past-hero .masthead::before{opacity:1}
.past-hero .masthead{padding-bottom:26px}
.mini-label{transition:opacity 1.4s var(--ease) .2s,transform 1.4s var(--ease) .2s}
.menu-toggle,.mini-wheel{transition:width .9s var(--ease),height .9s var(--ease),transform .6s var(--spring),background .3s,box-shadow .3s}
@media(prefers-reduced-motion:reduce){.masthead::before,.mini-label,.menu-toggle,.mini-wheel{transition:none}}

/* ---------- 2026-10-12, Sean: the beat lines ("Full sun. Full term. Full spectrum." and so on) "are too small relative to the page, and we can't really read them".
   The body copy had stayed at phone sizes (13–16 px) on an 1860 px screen. Wide screens: every reading line scales with the width, the labels with it. */
@media(min-width:900px){
 .beat{max-width:none;left:var(--gut);right:var(--gut);bottom:clamp(72px,10vh,120px)}
 .beat h2{font-size:clamp(72px,9vw,150px)}
 .manifesto .beat h2{font-size:clamp(96px,12vw,210px)}
 .beat p{font-size:clamp(20px,1.5vw,30px);line-height:1.5;margin-top:26px;max-width:36ch;color:#eef0e0}
 .stage-head{padding:120px var(--gut) 0}
 .stage-head>.mono,.section-top>.mono{font-size:12px}
 .mono,.eyebrow{font-size:12px}
 .card-number{font-size:12px;top:34px;left:var(--gut)}
 .card-copy{padding:0 var(--gut) 56px}
 .card-copy h3{font-size:clamp(60px,5.4vw,104px)}
 .card-copy p{font-size:clamp(19px,1.35vw,26px);line-height:1.55;max-width:44ch}
 .poster-copy{padding-left:var(--gut);padding-right:var(--gut)}
 .poster-line{font-size:clamp(20px,1.5vw,30px);line-height:1.5;max-width:40ch;margin-top:28px}
 .diagram-copy p{font-size:clamp(19px,1.35vw,26px);line-height:1.6;max-width:46ch}
 .diagram-copy p.small{font-size:clamp(16px,1.1vw,20px)}
 .step p{font-size:clamp(18px,1.25vw,24px)}
 .step .mono{font-size:12px}
 .plate-fig figcaption,.catchment figcaption{font-size:12px}
 .stat span{font-size:12px}
 .stat p.small{font-size:clamp(16px,1.1vw,20px)}
 .line-button,.plain-link{font-size:14px}
 .journal-line{font-size:clamp(20px,1.5vw,30px)}
 .entry-title{font-size:clamp(32px,3vw,54px)}
 .reading-time,.entry-index{font-size:12px}
 .fin-line{font-size:clamp(24px,2vw,40px)}
 .footer-bottom{font-size:11px}
 .clip-tile figcaption{font-size:12px}
}

/* ---------- 2026-10-12: the card number and the rail count sat under the fixed bar and collided with the brand; both clear it on wide screens. */
@media(min-width:900px){
 .card-number{top:172px}   /* under the rail count */
 .spread-ui{padding:118px var(--gut) 0}   /* the count and the swipe chip live in this strip */
}

/* ---------- 2026-10-12, Sean on the finale: "Foley Family Farms needs to be much bigger and on one line and across the dark part of the picture with the
   reflection of the text in the water, the pot leaf should be apple glass and the arrow should be better integrated into the design of the leaf".
   Wide screens: the name is one line at 10.4 vw set across the tree band (top 52 vh), its mirror directly below it in the pond; the emblem and
   "Ancient ways for better dayz" sit in the sky above; the leaf is a clearer glass (deeper blur, specular highlight, bright rim) at every width, and its
   arrow is the midrib: stem to the tip of the centre leaflet, the head at the tip (the path is in the study's index.html). */
@media(min-width:900px){
 .finale{min-height:100vh}
 .finale-copy{padding:10vh var(--gut) 0;gap:14px}
 .emblem{width:124px;height:124px;margin-bottom:10px}
 .fin-line{margin:0;font-size:clamp(26px,2.1vw,40px)}
 .fin-name{position:absolute;left:var(--gut);right:var(--gut);top:50vh;margin:0;max-width:none;font-size:clamp(110px,10.4vw,215px);line-height:1;letter-spacing:-.03em;white-space:nowrap;text-align:center;text-shadow:0 12px 70px #000c}
 .fin-name .refl{top:100%;margin-top:-.08em;opacity:.42;filter:blur(1.6px);-webkit-mask-image:linear-gradient(#000 0%,#0000 82%);mask-image:linear-gradient(#000 0%,#0000 82%)}
 .finale .round-arrow{position:absolute;left:calc(50% - 56px);bottom:150px;margin:0;width:112px;height:112px}
 .finale .footer-bottom{position:absolute;left:0;right:0;bottom:0;margin:0 var(--gut) 30px}
}
.leaf-glass{background:linear-gradient(152deg,#ffffff66 0%,#ffffff1c 38%,#d5f66a2e 66%,#ffffff40 100%),radial-gradient(62% 36% at 34% 16%,#ffffffc0,#ffffff00 72%);-webkit-backdrop-filter:blur(24px) saturate(185%) brightness(1.18);backdrop-filter:blur(24px) saturate(185%) brightness(1.18);box-shadow:inset 0 1px 0 #ffffffb0,inset 0 -10px 22px #0f130c55,inset 0 0 0 1px #ffffff40}
.leaf-arrow .leaf-rim-svg path{fill-opacity:.3}
.leaf-arrow .leaf-top-svg path:first-child{stroke:#ffffff;stroke-opacity:.82;stroke-width:1.2}
.leaf-arrow .leaf-vein{filter:drop-shadow(0 0 6px #d5f66a99)}
@media(hover:hover){.leaf-arrow:hover .leaf-rim-svg path{fill-opacity:.55}}

/* ---------- 2026-10-12, Sean: "ancient ways for better days is not distinguishable, perhaps it should be along the bottom below the line".
   Wide screens: the line leaves the sky and sits centred at the foot of the frame, below the footer's rule, between the two footer labels. */
@media(min-width:900px){
 .fin-line{position:absolute;left:var(--gut);right:var(--gut);bottom:36px;z-index:3;margin:0;text-align:center;font-size:clamp(24px,1.9vw,36px);pointer-events:none;text-shadow:0 4px 24px #000c}
 .finale .footer-bottom{padding-top:26px}
 .finale .footer-bottom span{max-width:22ch}
}

/* ---------- 2026-10-12, Sean: "when it appears it appear as it is being written out, and the pot leaf is not subtle enough".
   The finale line is hidden until the finale is half in view (app.js adds .is-in once), then writes on over 1.8 s. The leaf steps back: 96 px, the glass
   fills at a third of the strength, the specular and the rim softer, the frosted rim under it fainter, the midrib thinner with no glow. */
.js .finale .fin-line{opacity:0}
.js .finale.is-in .fin-line{animation:write 1.8s var(--ease) .5s both}
@media(prefers-reduced-motion:reduce){.js .finale .fin-line{opacity:1;animation:none}}
@media(min-width:900px){.finale .round-arrow{width:96px;height:96px;left:calc(50% - 48px);bottom:160px}}
.leaf-glass{background:linear-gradient(152deg,#ffffff2e 0%,#ffffff0e 38%,#d5f66a1a 66%,#ffffff22 100%),radial-gradient(62% 36% at 34% 16%,#ffffff6a,#ffffff00 72%);-webkit-backdrop-filter:blur(18px) saturate(150%) brightness(1.08);backdrop-filter:blur(18px) saturate(150%) brightness(1.08);box-shadow:inset 0 1px 0 #ffffff66,inset 0 -8px 18px #0f130c40,inset 0 0 0 1px #ffffff22}
.leaf-arrow .leaf-rim-svg path{fill-opacity:.16}
.leaf-arrow .leaf-top-svg path:first-child{stroke:#ffffff;stroke-opacity:.5;stroke-width:1}
.leaf-arrow .leaf-vein{filter:none;stroke-width:1.8;stroke-opacity:.9}
@media(hover:hover){.leaf-arrow:hover .leaf-rim-svg path{fill-opacity:.32}}

/* ---------- 2026-10-12, Sean: "write it more slowly and make the text larger" — the finale line writes on over 3.4 s and is set at 2.6 vw (up to 52 px). */
.js .finale.is-in .fin-line{animation-duration:3.4s;animation-delay:.6s}
@media(min-width:900px){.fin-line{font-size:clamp(32px,2.6vw,52px);bottom:30px}.finale .footer-bottom span{max-width:18ch}}

/* ---------- 2026-10-12, Sean: "write it more slowly and replace the illustration of the mountain with rain into the pond with the leaf and integrate the arrow
   in a more design way". The line writes on over 5.5 s. The emblem is gone; the glass leaf stands where it was, in the sky above the name, and the leaf
   itself is the arrow: it points up by nature, so the chevron is gone, a faint midrib stays inside it and a long thin lime stem with a dot at its foot
   hangs below it — the leaf is the head, the stem the shaft (paths in the study's index.html). */
.js .finale.is-in .fin-line{animation-duration:5.5s}
@media(min-width:900px){
 .emblem{display:none}
 .finale-copy{padding-top:0}
 .finale .round-arrow{top:9vh;bottom:auto;left:calc(50% - 54px);width:108px;height:108px}
 .finale .round-arrow:hover{transform:translateY(-4px) scale(1.04)}
}
.leaf-arrow .leaf-vein{stroke-opacity:.55}
.leaf-arrow .leaf-stem{stroke-opacity:.9;transition:transform .6s var(--ease);transform-origin:50px 88px}
.leaf-arrow .leaf-stem-foot{opacity:.9}
@media(hover:hover){.leaf-arrow:hover .leaf-stem{transform:scaleY(1.12)}}

/* ---------- 2026-10-12, Sean: "ancient ways for better days should fade in as it is written in and can you make the pot leaf without the line and arrow and a little lower".
   The line's reveal is a soft-edged mask sweeping across (a wide gradient, 120 % → 0 %) with the opacity rising over the first third, so the words
   fade in as they are written. The leaf is the plain glass leaf again (vein and stem removed from the study's index.html), at 16 vh. */
@keyframes write-soft{from{opacity:0;-webkit-mask-position:120% 0;mask-position:120% 0}35%{opacity:1}to{opacity:1;-webkit-mask-position:0% 0;mask-position:0% 0}}
.js .finale .fin-line{-webkit-mask-image:linear-gradient(90deg,#000 55%,#0000 80%);mask-image:linear-gradient(90deg,#000 55%,#0000 80%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;clip-path:none}
.js .finale.is-in .fin-line{animation:write-soft 5.5s var(--ease) .6s both}
@media(prefers-reduced-motion:reduce){.js .finale .fin-line{-webkit-mask-image:none;mask-image:none;animation:none;opacity:1}}
@media(min-width:900px){.finale .round-arrow{top:16vh}}

/* ---------- 2026-10-12, Sean: "can you integrate the menu in the compass so form follows function". The Explore panel becomes a compass rose that
   opens out of the dial: a dark-glass disc under the compass with the sixteen ticks on its ring (the four cardinal ones heavier), the lime sun at the
   hub, and the four chapters at the four points — EARTH north, WATER east, ALL IN. south, DIG IT. west — the same mapping as the desktop wheel's
   quadrants. Same markup (the arrows left the labels; the numbers carry the bearing), same toggle. Replaces the side panel above. */
@keyframes rose-in{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes rose-word{from{opacity:0}to{opacity:1}}
.mobile-menu:not([hidden]){top:calc(30px + 96px + 16px);right:var(--gut,22px);bottom:auto;left:auto;width:min(440px,calc(100vw - 44px));height:min(440px,calc(100vw - 44px));padding:0;margin:0;display:block;border-radius:50%;border:1px solid #f3ffdf33;background:radial-gradient(circle at 50% 50%,#1a2414f0 0%,#0f130cf5 72%);box-shadow:0 30px 80px #0008,inset 0 0 0 1px #ffffff0e,inset 0 0 70px #d5f66a0c;transform-origin:100% 0;animation:rose-in .6s var(--spring) both}
.past-hero .mobile-menu:not([hidden]){top:calc(18px + 64px + 14px)}
.mobile-menu:not([hidden])::before{content:"";position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 10px #d5f66a1f,0 0 44px #d5f66a66;animation:none;pointer-events:none}
.mobile-menu:not([hidden])::after{content:"";position:absolute;inset:12px;margin:0;border-radius:50%;background:repeating-conic-gradient(from -1deg,#d5f66a88 0 2deg,transparent 2deg 22.5deg),repeating-conic-gradient(from -2.2deg,#d5f66a 0 4.4deg,transparent 4.4deg 90deg);-webkit-mask:radial-gradient(circle,transparent 0 44%,#000 44.5% 50%,transparent 50.5%);mask:radial-gradient(circle,transparent 0 44%,#000 44.5% 50%,transparent 50.5%);pointer-events:none}
.mobile-menu:not([hidden]) a{position:absolute;display:block;grid-template-columns:none;width:auto;min-height:0;padding:0;border:0;text-align:center;font-size:clamp(22px,1.7vw,32px);letter-spacing:-.03em;line-height:1;animation:rose-word .5s var(--ease) both;transition:color .3s}
.mobile-menu:not([hidden]) a:first-of-type{border:0}
.mobile-menu:not([hidden]) a span{display:block;transform:none;margin:0 0 7px;font-size:10px;letter-spacing:.2em}
.mobile-menu:not([hidden]) a:nth-of-type(1){top:56px;left:0;right:0;animation-delay:.18s}
.mobile-menu:not([hidden]) a:nth-of-type(2){right:50px;top:50%;transform:translateY(-50%);animation-delay:.26s}
.mobile-menu:not([hidden]) a:nth-of-type(3){bottom:56px;left:0;right:0;animation-delay:.34s}
.mobile-menu:not([hidden]) a:nth-of-type(4){left:50px;top:50%;transform:translateY(-50%);animation-delay:.42s}
@media(hover:hover){.mobile-menu:not([hidden]) a:hover{color:var(--lime);transform:none}.mobile-menu:not([hidden]) a:nth-of-type(2):hover,.mobile-menu:not([hidden]) a:nth-of-type(4):hover{transform:translateY(-50%)}}
@media(max-width:600px){.mobile-menu:not([hidden]){top:90px;right:22px;padding:0}}
@media(prefers-reduced-motion:reduce){.mobile-menu:not([hidden]),.mobile-menu:not([hidden]) a{animation:none}}

/* ---------- 2026-10-12, Sean on the rose: "the dial is good, make it dissolve when closed and make the menu items more clear and make the center a sun".
   Closing adds .closing for half a second (study app.js) and the rose dissolves — scale, blur, fade; the chapter words move in off the tick ring and get
   bigger and brighter; the hub is a sun: a lime disc with sixteen rays, drawn in gradients on the ::before. */
@keyframes rose-out{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:scale(.92);filter:blur(10px)}}
.mobile-menu.closing{animation:rose-out .5s var(--ease) both;pointer-events:none}
.mobile-menu.closing a{animation:none}
.mobile-menu:not([hidden]) a{font-size:clamp(26px,2vw,38px);color:#f6f8ea;text-shadow:0 2px 18px #000c}
.mobile-menu:not([hidden]) a span{font-size:11px;color:var(--lime)}
.mobile-menu:not([hidden]) a:nth-of-type(1){top:92px}
.mobile-menu:not([hidden]) a:nth-of-type(3){bottom:92px}
.mobile-menu:not([hidden]) a:nth-of-type(2){right:84px}
.mobile-menu:not([hidden]) a:nth-of-type(4){left:84px}
.mobile-menu:not([hidden])::before{width:116px;height:116px;margin:-58px 0 0 -58px;background:radial-gradient(circle,var(--lime) 0 29%,transparent 30%),repeating-conic-gradient(from -3deg,var(--lime) 0 6deg,transparent 6deg 22.5deg);-webkit-mask:radial-gradient(circle,#000 0 30%,transparent 31% 38%,#000 39% 50%,transparent 51%);mask:radial-gradient(circle,#000 0 30%,transparent 31% 38%,#000 39% 50%,transparent 51%);box-shadow:none;filter:drop-shadow(0 0 18px #d5f66a88)}
@media(prefers-reduced-motion:reduce){.mobile-menu.closing{animation:none;opacity:0}}

/* ---------- 2026-10-12, Sean (screenshot of the rose): "the words need to be clear and not overlapping the graphics" — DIG IT. and WATER were touching the sun's rays.
   The disc grows to 520 px, the sun shrinks to 92 px, the words move out to a band between the sun and the tick ring, a step smaller. */
.mobile-menu:not([hidden]){width:min(520px,calc(100vw - 44px));height:min(520px,calc(100vw - 44px))}
.mobile-menu:not([hidden])::before{width:92px;height:92px;margin:-46px 0 0 -46px}
.mobile-menu:not([hidden]) a{font-size:clamp(22px,1.75vw,33px)}
.mobile-menu:not([hidden]) a:nth-of-type(1){top:104px}
.mobile-menu:not([hidden]) a:nth-of-type(3){bottom:104px}
.mobile-menu:not([hidden]) a:nth-of-type(2){right:70px}
.mobile-menu:not([hidden]) a:nth-of-type(4){left:70px}
@media(max-width:600px){.mobile-menu:not([hidden])::before{width:64px;height:64px;margin:-32px 0 0 -32px}.mobile-menu:not([hidden]) a{font-size:19px}.mobile-menu:not([hidden]) a:nth-of-type(1){top:64px}.mobile-menu:not([hidden]) a:nth-of-type(3){bottom:64px}.mobile-menu:not([hidden]) a:nth-of-type(2){right:40px}.mobile-menu:not([hidden]) a:nth-of-type(4){left:40px}}

/* ---------- 2026-10-12, Sean: "maybe the words need to be written along the perimeter of the circle, written around the inside the perimeter of the circle".
   The rose is one SVG now (study markup): the tick ring, the sun with its rays at the hub, and the four words on arcs just inside the ring — EARTH over
   the top, WATER down the right, ALL IN. along the bottom reading left to right as on a seal, DIG IT. up the left — each a link with a quadrant hit area.
   The gradient sun and ticks of the earlier pass are off. */
.mobile-menu:not([hidden])::before,.mobile-menu:not([hidden])::after{display:none}
.mobile-menu:not([hidden]) svg.rose{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:rose-word .6s var(--ease) .15s both}
.rose-ring{stroke:#eff1dc22;stroke-width:.8}
.rose-sun{filter:drop-shadow(0 0 6px #d5f66a99)}
.mobile-menu:not([hidden]) a.rose-q{position:static;display:inline;animation:none;transform:none;font:700 12.5px/1 Space,sans-serif;letter-spacing:.14em;text-shadow:none;padding:0;border:0}
.rose-hit{fill:transparent;pointer-events:all}
.rose-word{fill:#f6f8ea;transition:fill .3s;pointer-events:none}
@media(hover:hover){a.rose-q:hover .rose-word{fill:var(--lime)}a.rose-q:hover{transform:none}}
a.rose-q:focus-visible{outline:none}a.rose-q:focus-visible .rose-word{fill:var(--lime)}

/* ---------- 2026-10-12, Sean: "its doing something weird" (DIG IT. floating outside the disc) — the hover rule for the earlier flat labels was still reaching the
   curved links and shifting the hovered word by half its box; the curved links take no transform at all now. And: "the rose should turn so the current
   chapter sits at the top" — the ticks and the words sit in a group that app.js turns with the dial (a quarter per chapter); the sun and the ring stay. */
.mobile-menu:not([hidden]) a.rose-q,.mobile-menu:not([hidden]) a.rose-q:hover,.mobile-menu:not([hidden]) a.rose-q:nth-of-type(n):hover{transform:none!important;position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important}
.rose-rot{transform-origin:100px 100px;transform-box:view-box}

/* ---------- 2026-10-19, from the handoff's open list (Sean: "Rose, leaf, finale"). The rose lights the current chapter: the dial's write() toggles .on on the
   four links as the chapter changes (study app.js), and the lit word is lime, the rest as before. On the poster nothing is lit. */
a.rose-q.on .rose-word{fill:var(--lime)}

/* ---------- 2026-10-19: the leaf quieter still (Sean asked twice on 10-12). The frosted rim under the glass leaf is gone (fill-opacity 0, its drop shadow with it);
   the hover no longer brings it back — the lift on hover is the feedback. */
.leaf-arrow .leaf-rim-svg path{fill-opacity:0}
@media(hover:hover){.leaf-arrow:hover .leaf-rim-svg path{fill-opacity:0}}

/* ---------- 2026-10-19: the finale arrives in order — the name, then its reflection in the pond, then the leaf, then the line writing on. Keyed on .is-in
   (the finale half in view), every width; the finale's children left the generic reveal-on-enter (study app.js), which had each arrive on its own at 8 %.
   The entrances use the `translate` property, not `transform`, so the reflection keeps its flip and the leaf keeps its hover lift; each keyframe has only
   a `from`, so the end state is whatever the stylesheet says (the reflection's .42 / .26, the leaf's position). The line's write-on starts at 3.4 s. */
@keyframes fin-rise{from{opacity:0;translate:0 28px}}
@keyframes fin-settle{from{opacity:0;translate:0 -10px}}
@keyframes fin-float{from{opacity:0;translate:0 12px}}
.js .finale:not(.is-in) .fin-name>span,.js .finale:not(.is-in) .round-arrow,.js .finale:not(.is-in) .emblem{opacity:0}
.js .finale.is-in .fin-name>span:first-child{animation:fin-rise 1.6s var(--ease) both}
.js .finale.is-in .fin-name>.refl{animation:fin-settle 1.8s var(--ease) 1s both}
.js .finale.is-in .round-arrow{animation:fin-float 1.6s var(--ease) 2.2s both}
.js .finale.is-in .emblem{animation:fin-float 1.4s var(--ease) both}
.js .finale.is-in .fin-line{animation-delay:3.4s}
@media(prefers-reduced-motion:reduce){.js .finale .fin-name>span,.js .finale .round-arrow,.js .finale .emblem{animation:none}.js .finale:not(.is-in) .fin-name>span:first-child,.js .finale:not(.is-in) .round-arrow,.js .finale:not(.is-in) .emblem{opacity:1}.js .finale:not(.is-in) .fin-name>.refl{opacity:.26}}
@media(prefers-reduced-motion:reduce) and (min-width:1100px){.js .finale:not(.is-in) .fin-name>.refl{opacity:.42}}

/* ---------- 2026-10-19, Sean on his phone run: "I think there is still some risk of pinch crash." The pinch guard (study app.js, phones only): while the page is
   pinched the root carries .pinching — every backdrop-filter off, the wind canvas hidden (its loop stops in hero-wind.js), will-change cleared; the scroll-mapped
   transforms hold still in app.js. Pinch itself stays possible (Sean: "keep pinch, ship the guard, test on the LAN"). */
.pinching .leaf-glass,.pinching .menu-toggle,.pinching .mobile-menu,.pinching .mobile-menu:not([hidden]),.pinching .desktop-nav,.pinching .chapter-dock,.pinching .glass,.pinching .wheel-nav,.pinching .spread-arrow,.pinching .video-toggle{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pinching .wind-canvas{display:none!important}
.pinching .plate,.pinching .beat,.pinching .plate-fig img,.pinching .catchment,.pinching .avoca-slides,.pinching .stat-tiles,.pinching .poster>img,.pinching .finale>img{will-change:auto!important}

/* ---------- 2026-10-19, from the deploy session's keyboard walk of the candidate: a .line-button could take focus while its block was still at opacity 0 (reveal-on-enter
   content not yet in view). Hidden-until-revealed content is visibility:hidden as well, so it is out of the tab order until it arrives; visibility flips at once on .in. */
.js [data-reveal]{visibility:hidden;transition:opacity .9s var(--ease),transform .9s var(--ease),visibility 0s}
.js [data-reveal].in{visibility:visible}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{visibility:visible}}

/* ---------- 2026-10-19 (phone run, probe24 passed), Sean: "the logo with the hills and the sun and 'foley family farms' needs some padding below it so the A from
   A FAMILY POT FARM doesn't encroach on it." Measured at 375 wide: with a 509 or 629 px viewport the poster sits at its 640 px minimum, the copy block is 597 px
   tall and bottom-anchored, so the stack's top lands 18 px above the brand's bottom (61 px); at 667 there are 9 px. Below the wide pass the poster now grows to
   hold the copy: the copy block flows in the poster's own column with a top margin of 86 px (the masthead's 22 px, the 40 px mark, 24 px clear), and the poster
   is as tall as the screen or the copy, whichever is more. On short screens the copy's bottom padding eases so the growth stays small. The wide pass (≥ 1100)
   keeps its absolute block: there the stack's top is far below the 50 px brand. */
@media(max-width:899px){
 .hero{height:auto;min-height:max(100svh,640px);display:flex;flex-direction:column;justify-content:flex-end}
 .hero-copy{position:relative;left:auto;right:auto;bottom:auto;margin-top:86px}
 @media(max-height:700px){.hero-copy{padding-bottom:clamp(56px,9svh,96px)}}
}

/* ---------- 2026-10-19 (phone run), Sean: "On the pages where we read more there is a 'close' pill button on the top right. I think it should just be a big fat 'X'
   instead." The field-note reader's close is a bold × (Space Grotesk 700, 36 px) with no pill: a 48 px round hit area (44 minimum), the keyboard focus ring kept,
   aria-label "Close reading panel" unchanged (study markup: the text is "×" now). */
.reader-close{border:0;background:none;border-radius:50%;padding:0;width:48px;height:48px;min-height:44px;margin:-8px -12px -8px 0;display:grid;place-items:center;font:700 36px/1 Space,Arial,sans-serif;color:var(--dark);letter-spacing:0}
.reader-close:focus-visible{outline:2px solid #657e39;outline-offset:2px}
@media(hover:hover){.reader-close:hover{background:#14191012}}

/* ---------- 2026-10-20, the tablet widths (handoff §4 item 3: "Decide where the wide pass should start (900? 1100?)"). Measured in the pane at 768 × 1024, 1024 × 768,
   1024 × 1366, 1180 × 820 and 1366 × 1024. Between 600 and 1100 the phone build was stretched: the 34 px mark and 52 px compass on a tablet, WILD WEED at the phone's
   220 px cap filling half the frame, the plates 1024 × 819 (taller than a landscape iPad), the phone map 980 × 2091 (nearly three screens), reading lines 980 px long,
   and since the 10-19 brand clearance a 1024 × 768 poster 960 px tall with the last row below the fold. The wide pass fitted every landscape iPad when simulated from
   900 (plates 461 × 369, map 281 × 599, the poster on one screen), so every `min-width:1100px` block above now reads 900 (and the clearance block `max-width:899px`).
   One guard was needed: the wide headline is sized by the frame's height, so on portrait tablets (900 × 1200, 1024 × 1366) WILD WEED ran 150–200 px past the right
   edge. It is now the smaller of its height size and the column's width ÷ 4.7 (WILD WEED is 4.52 em wide), and the two scripts likewise (7 vw); at Sean's 1860 × 1025
   and at 1180 × 820 neither cap bites. Between 900 and 1099 the place line may wrap so "Wild west." keeps one line. Portrait iPads under 900 (744–834) keep the phone build. */
@media(min-width:900px){
 .hero h1{font-size:min(clamp(190px,27vh,330px),calc((100vw - 2 * var(--gut)) / 4.7))}
 .hero-copy>.hero-script,.hero-script--west{font-size:min(clamp(64px,9vh,108px),7vw)}
 .hero-script--west{white-space:nowrap}
}
@media(min-width:900px) and (max-width:1099px){
 .hero-location{white-space:normal;max-width:26ch;line-height:1.6}
}
/* The Avoca frame is sized by height (70 vh, 3:4) and on a portrait tablet that made it wider than its column (570 px in 345 at 900 × 1200, a 203 px page overflow);
   its height is also held to 50 vw, which keeps it inside its column at every width measured and changes nothing at 1860 or 1180. */
@media(min-width:900px){.avoca-slides{height:min(70vh,760px,50vw)}}

/* ---------- 2026-10-20, Sean: "the one criticism is that words on the front page jitter and get slightly jumbled after repeated scrolling." The wind canvas now
   lives inside the h1 (hero-wind.js), at its origin, so it carries the h1's own scroll transform, fade and (on wide screens) dissolve instead of sitting still
   in .hero-copy while the letters moved under it. The h1 is its positioning box; the canvas no longer takes the dissolve filter itself, it inherits the h1's
   (the old rule would blur it twice). */
.hero h1{position:relative}
.hero-copy .wind-canvas{filter:none}

/* ---------- 2026-10-20, Sean, reviewing the production page on his Mac: "the sections that read more (#read-4) should fit on screen and have slightly bigger text
   for greater readability." Measured by the deploy session in -19e, the same at every width (the study carries the phone's reader sizes everywhere): heading 35 px,
   lede 18, body 15, the source and label lines 10 / 9 / 8 px; on a desktop the 760 px panel ran body lines to about 95 characters. Now: on phones the body is 17 px,
   the lede 19, labels 12; from 900 px the panel stays 760 px with a 592 px text column, the body 18 px (about 70 characters a line, 75 at most), the lede 22, the
   heading 46, every label and source line 12 px. The progress line sits under the bar at its real height. "Fit on screen" was his Safari window hanging 132 pt past
   a 1728 pt screen (set by this session's osascript); the panel is the window's full height and scrolls inside itself. */
#reader-content{font-size:17px;line-height:1.75}
#reader-content .sum{font-size:19px;line-height:1.55}
#reader-content .kick,#reader-content .src,#reader-content .doc-head,#reader-content .doc-foot{font-size:12px;line-height:1.7}
.reader-bar .mono,.reader-end>.mono{font-size:12px}
.reader-progress{top:57px}   /* the bar is 57 px tall since the big ×; the line had sat 12 px below it */
@media(min-width:900px){
 .reader-bar{padding:12px 84px}
 #reader-content{padding:40px 84px 50px;font-size:18px;line-height:1.72}
 #reader-content h2,#reader-content h3{font-size:46px;line-height:1.08;margin:20px 0 28px}
 #reader-content .sum{font-size:22px;line-height:1.5}
 #reader-content p{margin:22px 0}
 .reader-end{padding:15px 84px 70px}
}

/* ---------- 2026-10-20, Sean: "Wild west. should be "In the Wild West."" (study markup). Measured at 360, 390, 768, 900, 1024, 1440 and 1728: one line everywhere,
   clear of the place line, nothing past the right edge. On the wide row the gap after "Wild ideas." was 5 px (here and before the change): the tail's
   `margin-left:.3em` resolved on the tail's own 16 px, not on the script's 70–108 px. The word space now sits on "Wild ideas." as .2 of its own size, and the
   tail has none, so a wrapped row starts flush at the gutter; the gap before the place line is 24 px (from 40) so the longer row still fits on one line at 1024. */
@media(min-width:900px){
 .hero-copy>.hero-script:not(.hero-script--west){margin-right:.2em}
 .hero-tail{margin-left:0;gap:24px}
}
@media(min-width:1100px) and (max-width:1499px){.hero-location{white-space:normal;max-width:26ch;line-height:1.6}}   /* the longer line needs the place line to wrap up to 1499, as it already does from 900 to 1099 */

/* ---------- 2026-10-20, Sean: "the circle pill button with an "X" on the read more panes do not need a circle around the "X"." The × had no border, but on hover it
   took a round grey tint (the circle a mouse shows on the way to clicking it), and a keyboard focus drew a round ring. Both are gone: hover only darkens the ×,
   keyboard focus turns it green with a short underline. Same 48 px hit area. */
.reader-close,.reader-close:hover{background:none!important;border:0!important;border-radius:0;box-shadow:none}
@media(hover:hover){.reader-close:hover{color:#000}}
.reader-close:focus-visible{outline:none;color:#3f5424;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* ---------- 2026-10-20, Sean: "what if we swapped the hero with the image on the ONE SEASON page", then "Yes, swap them in the study." The poster carries the flower
   photograph now (study markup; the colas lit against the golden hillside separate from the background by themselves, which the hero frame did not) and the
   ONE SEASON plate carries the hero frame. The phone build's focus rule (18 % 40 %, set for the hero's cola at the far left) is replaced by the flower's: the
   big central cola. hero-wind.js reads the focus from here, so the still letters and the wind follow. */
.hero-photo img{object-position:66% 42%!important}
/* The wind's brightness inside WILD (hero-wind.js reads --wind-boost; defaults 1.6 phones / 1.35 desktop, tuned for the old frame's dark leaves). On phones WILD now
   cuts through the flower frame's bright cola and pink leaves; tried at 375 x 509: 0.95 and 1.2 dissolve the letters into the shaded photo, 1.6 reads but busy,
   2.0 gives the clearest letter shapes. Desktop keeps 1.35: there WILD falls on the dark foliage at the foot of the frame and reads as before. */
@media(max-width:899px){.hero{--wind-boost:2}}

/* ---------- 2026-10-20, Sean (screenshot, iPad in portrait, Safari with its tab bar): "that band on the bottom is showing when i load the front page on ipad
   portrait." The strip under the poster was the next section's photograph: the poster's height came from 100svh (the smallest viewport: Safari's bars all
   shown), which on his iPad came out about 35 pt shorter than the visible window. The same unit sized the pinned stages, the full-screen posters and the
   finale. From 600 pt up (and 600 pt tall, so phones in landscape keep svh exactly as before; every iPad is at least 744 tall) those now take 100lvh (the largest viewport): always at least the visible window, and constant while scrolling, so nothing
   resizes when Safari's bars collapse (100dvh would). Phones keep svh, which matches an iPhone at load; on a desktop svh = lvh, so nothing changes there. */
@media(min-width:600px) and (min-height:600px){
 .pin{height:100lvh}
 .stage{height:calc((var(--beats) + .55) * 100lvh)}
 .poster{height:100lvh}
 .finale{min-height:100lvh}
 .hero,.poster{max-height:none}   /* the old caps (1200 / 1100 pt) left the same strip on a portrait iPad Pro (1024 x 1366: the poster stopped at 1200) */
}
@media(min-width:600px) and (max-width:899px) and (min-height:600px){.hero{min-height:max(100lvh,640px)}}
@media(min-width:900px) and (min-height:600px){.hero{height:100lvh}}

/* ---------- 2026-10-20, Sean, with a sheet of sun icons: "can you propose a design where the wheel has sun rays coming out of it"; of the five proposed
   (history/wheel-2026-10-20/review/): "B — Points is great". Sixteen pointed rays, long and short in turn, in the dial's own turning group (study markup),
   so they turn with the dial as the chapters pass and need no script; drawn outside the dial's 200-unit frame (the SVG already overflows visibly), from just
   under the glass rim out to about half the button's radius. The leaf at the hub was centred and its stem halved the same day. */
.mini-wheel .sun-rays{opacity:.95}

/* ---------- 2026-10-20, Sean: "i think that the wheel when open in the form of a menu needs a little transperancy is that possible?" The open rose was a dark
   disc at 94-96 % (the 10-12 radial gradient). Now about 70 % at the centre and 78 % at the rim, over a 16 px blur, so the photograph shows through as soft
   colour, not detail; the chapter words keep a faint dark outline under the letters (painted under the fill) so they stay crisp over bright frames. The pinch
   guard still turns the blur off while the page is pinched. */
.mobile-menu:not([hidden]){background:radial-gradient(circle at 50% 50%,#1a2414b3 0%,#0f130cc7 72%);-webkit-backdrop-filter:blur(16px) saturate(135%);backdrop-filter:blur(16px) saturate(135%)}
.rose-word{paint-order:stroke;stroke:#0f130c;stroke-opacity:.6;stroke-width:1.4px;stroke-linejoin:round}

/* 2026-10-20, Sean, with a screenshot of the open rose: "this wheel doesnt look good enough for me, it needs a design enhancement."
   Then, on the review page (history/rose-2026-10-20/review/): "A — Compass. Put it in the study."
   The compass rose: a sharper glass rim (a lit top edge, an inner hairline, a deeper shadow), a 64-step scale in a bezel, a pointed
   marker per chapter (the current one lime), faint quadrant lines, the chapter number over each word, a pointed-ray sun like the
   button's. One property, --rose-turn (written by app.js), turns the dial back and turns each word forward again, so the words stay
   upright at every angle. The heavy outline on the words is replaced by a soft shadow. */
.mobile-menu:not([hidden]){background:radial-gradient(circle at 50% 38%,#24301cb8 0%,#141a10cc 58%,#0c100ad9 100%);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid #f3ffdf2e;box-shadow:inset 0 1px 0 #ffffff24,inset 0 -18px 40px #0005,0 28px 70px #000a,0 0 0 1px #0f130c55}
.rose-ring{stroke:#eff1dc40;stroke-width:.6}
.rose-ring-in{stroke:#eff1dc24;stroke-width:.5}
.rose-ring-hub{stroke:#eff1dc1f;stroke-width:.5}
.rose-rot{transform:rotate(calc(var(--rose-turn,0deg) * -1))}
.rose-up{transform-box:fill-box;transform-origin:50% 50%;transform:rotate(var(--rose-turn,0deg));filter:drop-shadow(0 1px 3px #000b)}
.mobile-menu:not([hidden]) a.rose-q{font:700 10px/1 Space,sans-serif;letter-spacing:.15em}
.rose-word{font:700 10px/1 Space,sans-serif;letter-spacing:.15em;fill:#f6f8ea;stroke:none;paint-order:normal}
.rose-num{font:500 5.4px/1 Mono,monospace;letter-spacing:.22em;fill:#eff1dc80;transition:fill .3s;pointer-events:none}
.rose-mark{fill:#eff1dc66;transition:fill .3s;pointer-events:none}
a.rose-q.on .rose-num,a.rose-q:hover .rose-num,a.rose-q:focus-visible .rose-num{fill:var(--lime)}
a.rose-q.on .rose-mark{fill:var(--lime);filter:drop-shadow(0 0 4px #d5f66a90)}
.rose-sun{filter:drop-shadow(0 0 5px #d5f66a90)}
.pinching .rose-up,.pinching .rose-sun,.pinching a.rose-q.on .rose-mark{filter:none}