/* OneEden: one paper, one palette transition system, restrained chapter details. */
:root{--gold:var(--brass,#9e8358);--gold-ink:#86693f}
body{background-image:url('../assets/oneeden/paper-grain.svg');background-size:240px 240px;background-attachment:scroll;background-blend-mode:multiply}
body::before,body::after{content:none}
.eyebrow,.story-header>.eyebrow{color:var(--gold-ink)}
.story .eyebrow{color:#cdb88f}
.roadmap .eyebrow{color:var(--gold-ink)}
.ruled,.section-header .ruled{padding-bottom:0;padding-top:36px}
.ruled::after,.section-header .ruled::after,.art::before{border:0;width:64px;height:24px;background:var(--gold);-webkit-mask:url('../assets/oneeden/ornament-sprig.svg') left center/contain no-repeat;mask:url('../assets/oneeden/ornament-sprig.svg') left center/contain no-repeat}
.ruled::after,.section-header .ruled::after{top:0;bottom:auto;left:-19px}
.story-header::before,.creed .signoff::before{width:64px;height:24px;background:var(--gold);-webkit-mask:url('../assets/oneeden/ornament-sprig.svg') center/contain no-repeat;mask:url('../assets/oneeden/ornament-sprig.svg') center/contain no-repeat;opacity:.9}
.cta{border-color:var(--gold)}
.cta:hover{background:var(--gold);border-color:var(--gold);color:var(--cream)}
.cta-solid{border-color:var(--ink)}

/* Animate only opacity and transforms: no blurred text or full-form rasterisation. */
.reveal-ready,.reveal-ready:not(.team-card){filter:none;transition:opacity .65s ease,transform .85s cubic-bezier(.16,1,.3,1)}
.reveal-ready:not(.team-card){transform:translateY(16px)}
.reveal-ready.in-view:not(.team-card){transform:none}
.team-card.reveal-ready{transform:translateY(20px) rotate(-1deg)}
.team-card.in-view{transform:rotate(-1deg)}
.hero::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 45%,transparent 65%,#1e140d18);opacity:calc(1 - var(--hero-progress))}
/* Keep the complete hero above the arriving page until its whole-screen exit fade finishes. */
.hero{z-index:4;height:100dvh;min-height:100svh}
.manifesto-signature{display:block;width:150px;margin:44px auto 0;color:var(--gold)}
.manifesto-signature.brand-mark{background:var(--gold)}
.creed .stanza{opacity:.8}
.creed .stanza.is-read{opacity:.9}
.creed .stanza.is-lit{opacity:1}
.creed .roll{max-width:52ch;margin-inline:auto}
.collection .benefits li .benefit-number{color:var(--gold-ink);font:400 15px/1.4 var(--display);letter-spacing:.14em}
.roadmap header .eyebrow::after{border:0;width:120px;height:28px;left:calc(50% - 60px);bottom:-44px;background:var(--gold-ink);-webkit-mask:url('../assets/oneeden/ornament-star.svg') center/contain no-repeat;mask:url('../assets/oneeden/ornament-star.svg') center/contain no-repeat}
.circle-portrait::after{content:'';position:absolute;inset:7px;border:1px solid #9e83584d;border-radius:113px 113px 2px 2px;pointer-events:none}
.faq-q .plus{width:16px;height:16px;background:var(--gold);-webkit-mask:url('../assets/oneeden/ornament-leaf.svg') center/contain no-repeat;mask:url('../assets/oneeden/ornament-leaf.svg') center/contain no-repeat;transition:transform .35s ease}
.faq-q .plus::before,.faq-q .plus::after{display:none}
.faq-q[aria-expanded=true] .plus{transform:rotate(180deg)}

/* Chapter tears remain; the illustrations bleed into the paper with real pigment edges. */
.story{background:var(--dark);color:#d2e1ec}
.collection,.roadmap{background:transparent;color:inherit;position:relative}
.circles,.footer-scene{background:var(--cream);color:var(--ink)}
.signup,.faq{background:transparent;color:inherit}
.collection,.circles{position:relative;z-index:2;overflow-x:clip;overflow-y:visible}
.roadmap{z-index:1;padding-top:80px;padding-bottom:220px}
.collection::before,.circles::before{content:'';position:absolute;left:0;right:0;top:-62px;height:64px;background:var(--cream);pointer-events:none;-webkit-mask:url('../assets/oneeden/torn-edge.png') 0 0/2000px 64px repeat-x;mask:url('../assets/oneeden/torn-edge.png') 0 0/2000px 64px repeat-x}
.circles::before{-webkit-mask-position:-1300px 0;mask-position:-1300px 0}
.shared-table{-webkit-mask:url('../assets/oneeden/watercolour-perimeter-alpha-v2.webp') center/100% 100% no-repeat;mask:url('../assets/oneeden/watercolour-perimeter-alpha-v2.webp') center/100% 100% no-repeat;mask-mode:alpha}
.footer-scene .scene-art{-webkit-mask:url('../assets/oneeden/watercolour-perimeter-alpha-v2.webp') center top/max(116vw,900px) auto no-repeat,linear-gradient(transparent 120px,#fff 240px);mask:url('../assets/oneeden/watercolour-perimeter-alpha-v2.webp') center top/max(116vw,900px) auto no-repeat,linear-gradient(transparent 120px,#fff 240px);-webkit-mask-composite:source-over;mask-composite:add;mask-mode:alpha}
.footer-scene .scene-pin::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:42%;z-index:8;pointer-events:none;background:linear-gradient(transparent,#140c058c 45%,#140c05e6 75%,#140c05)}
.ticker.is-paused .ticker-track{animation-play-state:paused}
.floating-nav{--menu-size:78px}
.floating-nav.is-reading{--menu-size:54px}
.floating-nav .nav-menu,.floating-nav.is-reading .nav-menu{position:absolute;left:50%;right:auto;translate:-50% 0;bottom:calc(var(--menu-size) + 16px);width:220px;max-width:calc(100vw - 32px);height:auto;max-height:calc(100dvh - var(--menu-size) - 90px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:20px}
.floating-nav .nav-menu a{height:auto;min-height:44px;padding:13px 16px;font-size:14px;line-height:1.3}
.floating-nav.is-open .nav-social{display:flex}

/* Native cursors keep the illustration crisp, with no tracking script or trailing layer. */
@media(hover:hover) and (pointer:fine){
 html,body{cursor:url('../assets/oneeden/cursor-olive.svg') 4 3,auto}
 a[href],button,summary,[role="button"],label[for],.chip,.chip input,input[type="checkbox"],input[type="radio"]{cursor:url('../assets/oneeden/cursor-finger-v2.svg') 13 4,pointer}
 input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="url"],input[type="password"],textarea,[contenteditable="true"]{cursor:text}
 button:disabled{cursor:wait}
 input:disabled,textarea:disabled{cursor:not-allowed}
}

@media(max-width:809px){
 .floating-nav{--menu-size:66px}
 .floating-nav.is-reading{--menu-size:48px}
 .floating-nav,.floating-nav.is-reading{bottom:max(12px,env(safe-area-inset-bottom))}
 .roadmap{padding-bottom:160px}
 .creed .roll{max-width:31ch}
 /* Mobile: quieter chapter labels, larger one-line headings (8.6vw keeps WHAT COMES NEXT. on one line inside the 84vw column). */
 .eyebrow,.story-header>.eyebrow{font-size:10.5px}
 main h2,.story-header h2{font-size:clamp(26px,8.6vw,40px)}
 .roadmap header{text-align:center}
 .roadmap header h2{padding-top:22px}
 .circles .team-carousel{touch-action:pan-x pan-y pinch-zoom;overscroll-behavior-x:contain}
 .carousel-dots{gap:0;margin-top:12px}
 .carousel-dots button{width:36px;height:44px;flex:0 0 36px;border-radius:0;background:transparent;touch-action:manipulation}
 .carousel-dots button::before{content:none}
 .carousel-dots button::after{content:'';position:absolute;left:15px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.3;transition:opacity .2s,transform .2s}
 .carousel-dots button[aria-current=true]{background:transparent}
 .carousel-dots button[aria-current=true]::after{opacity:1;transform:scale(1.3)}
 .chip span{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .signup-form .field input{font-size:16px}
 .footer-nav a{min-height:44px;display:inline-flex;align-items:center}
}
@media(hover:none){.cta:not(.cta-solid):hover{background:transparent;color:inherit;box-shadow:none;transform:none}}
@media(prefers-reduced-motion:reduce){
 .reveal-ready,.reveal-ready:not(.team-card){opacity:1;transform:none;filter:none;transition:none}
 .creed .stanza,.creed .stanza.is-read,.creed .stanza.is-lit{opacity:1}
 .faq-q .plus{transition:none}
}

/* Floating menu: frosted glass. Dark glass over brown sections, light glass over cream (.on-light set by the scroll engine). */
.floating-nav .nav-menu{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 50px rgba(20,12,5,.28);transition:opacity .25s,transform .25s,visibility .25s,background .45s,border-color .45s,box-shadow .45s}
.floating-nav .nav-menu a{color:var(--cream);text-shadow:none;transition:background .2s,color .45s}
.floating-nav .nav-menu a:hover{background:rgba(255,255,255,.14);color:var(--cream)}
.floating-nav .nav-menu a[aria-current=location]{background:rgba(210,225,236,.9);color:var(--navy);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.floating-nav.on-light .nav-menu{background:linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,.1));border-color:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 50px rgba(60,40,20,.16)}
.floating-nav.on-light .nav-menu a{color:var(--ink)}
.floating-nav.on-light .nav-menu a:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.floating-nav .menu-toggle{border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px rgba(20,12,5,.22)}
.floating-nav.on-light .menu-toggle{border-color:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 24px rgba(60,40,20,.14)}

/* Deferred art: until a section is near (.is-near from script.js), skip its heavy background and mask images. Without JS, nothing is deferred. */
.defer-art .circles:not(.is-near) .character-crop,.defer-art .footer-scene:not(.is-near) .character-crop,.defer-art .circles:not(.is-near) .circle-art{background-image:none!important}
.defer-art .circles:not(.is-near) .shared-table,.defer-art .footer-scene:not(.is-near) .scene-art{-webkit-mask-image:none!important;mask-image:none!important}
/* Keep the small shared edge mask active; defer only scene/portrait artwork. */

/* Simple rounded media with controls directly over the illustration. */
.manifesto-listen{position:relative;margin:0 auto 40px;width:100%;max-width:620px;border-radius:18px;overflow:hidden}
.listen-cover{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:18px;background:transparent;box-shadow:none;-webkit-mask:none;mask:none}
.listen-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.02);transition:transform 8s ease}
.manifesto-listen.is-playing .listen-cover img{transform:scale(1.07)}
.listen-cover::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(#140c0566,transparent 28%,transparent 58%,#140c05b3);pointer-events:none}
.listen-cover::after{content:none}
.listen-bar{position:absolute;inset:0;z-index:2;margin:0;padding:0;text-align:left;pointer-events:none}
.listen-bar::before{content:none}
.listen-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:64px;height:64px;padding:0;border:1px solid #f4eee370;border-radius:50%;background:#1e140dc4;box-shadow:0 2px 12px #140c0526;color:#f4eee3;pointer-events:auto;transition:background .2s,transform .2s}
.listen-play:hover,.manifesto-listen.is-playing .listen-play{background:#1e140de6;color:#f4eee3}
.listen-play svg{width:25px;height:25px;fill:currentColor}
.listen-play .i-play{margin-left:2px}
.listen-play .i-pause,.manifesto-listen.is-playing .listen-play .i-play{display:none}
.manifesto-listen.is-playing .listen-play .i-pause{display:block}
.listen-meta{display:contents}
.listen-title{position:absolute;top:18px;left:20px;right:20px;font:500 11px/1.5 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#f4eee3;text-shadow:0 1px 5px #140c0580}
.listen-seek{--p:0%;position:absolute;left:20px;bottom:4px;-webkit-appearance:none;appearance:none;width:calc(100% - 40px);height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y;pointer-events:auto}
.listen-seek::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,#f4eee3 var(--p),#f4eee350 var(--p))}
.listen-seek::-moz-range-track{height:3px;border-radius:3px;background:#f4eee350}
.listen-seek::-moz-range-progress{height:3px;border-radius:3px;background:#f4eee3}
.listen-seek::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;margin-top:-3.5px;border:0;border-radius:50%;background:#f4eee3}
.listen-seek::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#f4eee3}
.listen-time{position:absolute;right:20px;bottom:48px;margin:0;padding:0;font:400 11px/1 var(--body);font-variant-numeric:tabular-nums;color:#f4eee3;white-space:nowrap;text-shadow:0 1px 5px #140c0580}
.manifesto-text{margin:0 auto}
.manifesto-text>summary{display:flex;width:max-content;max-width:100%;gap:12px;list-style:none;margin:0 auto;padding:10px 2px;min-height:48px;cursor:pointer;color:#d8c39b;border:0;border-bottom:1px solid #cdb88f59;border-radius:0;background:none}
.manifesto-text>summary::-webkit-details-marker{display:none}
.manifesto-text>summary:hover{background:none;border-color:#cdb88f;color:#f4eee3;box-shadow:none;transform:none}
.manifesto-text>summary .read-book{width:25px;height:25px;flex:none;fill:none;stroke:#d8c39b;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.manifesto-text>summary span{width:auto;font:inherit;transition:none}
.manifesto-text .when-open,.manifesto-text[open] .when-closed{display:none}
.manifesto-text[open] .when-open{display:inline}
.manifesto-text[open]>summary{margin-bottom:56px}
.manifesto-text[open] .creed{animation:creed-open .6s ease both}
@keyframes creed-open{from{opacity:0;transform:translateY(10px)}}
@media(max-width:809px){
 .manifesto-listen{margin-bottom:36px}
 .manifesto-listen,.listen-cover{border-radius:14px}
 .listen-cover{aspect-ratio:4/3}
 .listen-play{width:56px;height:56px}
 .listen-title{top:14px;left:16px;right:16px;font-size:10px}
 .listen-seek{left:16px;width:calc(100% - 32px)}
 .listen-time{right:16px}
 .manifesto-text[open]>summary{margin-bottom:40px}
}
@media(hover:hover) and (pointer:fine){.listen-play,.listen-seek,.manifesto-text>summary{cursor:url('../assets/oneeden/cursor-finger-v2.svg') 13 4,pointer}}
@media(prefers-reduced-motion:reduce){.listen-cover img,.manifesto-listen.is-playing .listen-cover img{transition:none;transform:none}.manifesto-text[open] .creed{animation:none}}

/* Membership opens on cream paper (its tear sits over the blue manifesto); its last screen stays clear so the page-wide fade into the brown Pilot is unchanged. */
.collection{background:linear-gradient(to bottom,var(--cream) calc(100% - 100vh),transparent calc(100% - 100vh))}

/* Circles: cream paper except its last screen, so the page can fade into the brown Invitation. */
.circles{background:linear-gradient(to bottom,var(--cream) calc(100% - 100vh),transparent calc(100% - 100vh))}
/* Invitation on brown (26 Oct): light text from the page fade, pale-gold details. */
.signup .eyebrow{color:#cdb88f}
.signup .signup-form .field input{border-bottom-color:#d2e1ec59}
.signup .signup-form .field input:focus{border-bottom-color:#d2e1ec;box-shadow:0 1px 0 #d2e1ec}
.signup .chip span{border-color:#d2e1ec59;background:transparent}
.signup .chip:hover span{background:#d2e1ec14;border-color:#cdb88f}
.signup .chip input:checked+span{background:#d2e1ec;border-color:#d2e1ec;color:var(--dark)}
.signup .consent input{accent-color:#cdb88f}
.signup .cta-solid{background:transparent;border-color:#cdb88f;color:inherit}
.signup .cta-solid:hover{background:#cdb88f;border-color:#cdb88f;color:var(--dark)}

/* Mars Rejects-style section changes (26 Oct). script.js sets body[data-tone] and each section's data-state (past/active/next). */
body{background-color:var(--dark);transition:background-color .9s cubic-bezier(.45,0,.25,1)}
body[data-tone=dark]{background-color:var(--dark);color:#d2e1ec}
body[data-tone=cream]{background-color:var(--cream);color:var(--ink)}
body[data-tone=blue]{background-color:#d2e1ec;color:var(--ink)}
.story{color:var(--cream)}
.story h2{color:#d2e1ec}
.signup{color:var(--cream)}
.collection,.roadmap,.circles,.faq{color:var(--ink)}
.story{background:transparent}
.tone-sections [data-state]>*{transition:opacity .5s ease}
.tone-sections [data-state=next]>*{opacity:.1}
.tone-sections [data-state=past]>*{opacity:0}
/* The section fade replaces the old one-by-one text reveals. */
.tone-sections .reveal-ready,.tone-sections .reveal-ready:not(.team-card){opacity:1;transform:none;transition:none}
.tone-sections .team-card.reveal-ready{transform:rotate(-1deg)}
@media(prefers-reduced-motion:reduce){body,.tone-sections [data-state]>*{transition:none}.tone-sections [data-state]>*{opacity:1}}

/* Invitation on brown: beige text, gold labels and details (owner, 26 Oct). */
.signup .field label,.signup .circle-picks legend{color:#cdb88f}
.signup .optional{color:#cdb88f;opacity:.75}
.signup .consent a{color:#cdb88f}
.signup .signup-form .field input{border-bottom-color:#cdb88f59;color:var(--cream)}
.signup .signup-form .field input:focus{border-bottom-color:#cdb88f;box-shadow:0 1px 0 #cdb88f}
.signup .chip span{border-color:#cdb88f66;color:var(--cream)}
.signup .chip:hover span{background:#cdb88f1a;border-color:#cdb88f}
.signup .chip input:checked+span{background:#cdb88f;border-color:#cdb88f;color:var(--dark)}
.signup .ruled::after{background:#cdb88f}
/* Mobile: the menu button keeps its full size while reading (owner, 26 Oct). */
@media(max-width:809px){
 .floating-nav.is-reading{--menu-size:66px}
 .floating-nav.is-reading .menu-toggle{width:66px;height:66px;border-width:10px}
 .floating-nav.is-reading .nav-social{height:66px}
}
/* Paper grain as one fixed layer over every section (section fills used to hide the body grain). Below the menu, never clickable. */
body{background-image:none}
body::before{content:'';position:fixed;inset:0;z-index:24;pointer-events:none;background:url('../assets/oneeden/paper-grain.svg') 0 0/240px 240px;mix-blend-mode:multiply}
/* Written manifesto: justified, with each line's last (or only) row centred (owner, 26 Oct). */
/* Each verse flows as one justified block; its final row is centred. Lines stay separate elements (bold lines, lighting JS). */
.creed .stanza{display:block;text-align:justify;text-align-last:center;-webkit-hyphens:none;hyphens:none}
.creed .stanza .line,.creed .stanza .roll{display:inline;margin:0;max-width:none;text-wrap:wrap}
.creed .stanza .line::after{content:' '}
/* Buttons: filled, no outline (owner, 26 Oct). Brown on cream, white on blue, beige on brown; hover shifts to gold. */
:is(a,button).cta{border:0;box-shadow:none}
.collection :is(a,button).cta,.circles :is(a,button).cta,.faq :is(a,button).cta{background:var(--dark);color:var(--cream)}
.collection :is(a,button).cta:hover,.circles :is(a,button).cta:hover,.faq :is(a,button).cta:hover{background:var(--gold-ink);color:var(--cream)}
.roadmap :is(a,button).cta{background:#fff;color:var(--ink)}
.roadmap :is(a,button).cta:hover{background:var(--gold-ink);color:var(--cream)}
.story :is(a,button).cta,.signup :is(a,button).cta,.signup .cta-solid{background:var(--cream);color:var(--dark)}
.story :is(a,button).cta:hover,.signup :is(a,button).cta:hover,.signup .cta-solid:hover{background:#cdb88f;color:var(--dark)}

/* Verse of the day: blue button top-right (matches the menu button), cream paper card. */
.verse-toggle{position:fixed;top:max(18px,env(safe-area-inset-top));right:18px;z-index:31;display:grid;place-items:center;width:52px;height:52px;padding:0;border:6px solid rgba(255,255,255,.55);border-radius:50%;background:var(--red) padding-box;color:var(--ink);box-shadow:0 6px 20px rgba(20,12,5,.16);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.verse-toggle:hover{transform:translateY(-1px) rotate(-6deg);box-shadow:0 8px 24px rgba(20,12,5,.2)}
.verse-toggle svg{width:22px;height:22px;overflow:visible}
.verse-toggle .bell{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.verse-toggle .leaf{fill:var(--gold-ink)}
.verse-dot{position:absolute;top:3px;right:3px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--red);transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.verse-toggle.has-unread .verse-dot{transform:scale(1)}
.verse-toggle[aria-expanded=true]{transform:none}
.verse-card{position:fixed;top:calc(max(18px,env(safe-area-inset-top)) + 64px);right:18px;z-index:31;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 120px);overflow:auto;padding:22px 26px 18px;border-radius:20px;background:var(--cream);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(158,131,88,.22),0 24px 60px rgba(20,12,5,.28);text-align:center;outline:none;animation:verse-in .35s cubic-bezier(.16,1,.3,1)}
.verse-card[hidden]{display:none}
@keyframes verse-in{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.verse-head{display:flex;align-items:center;gap:10px;text-align:left}
.verse-eyebrow,.verse-date,.verse-ref{margin:0;font:500 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.verse-date{flex:1;letter-spacing:.08em;color:rgba(30,20,13,.55)}
.verse-close{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-8px -12px -8px 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.verse-close:hover{background:rgba(158,131,88,.12)}
.verse-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.verse-sprig{display:block;width:64px;height:24px;margin:16px auto 6px;background:var(--gold);-webkit-mask:url('../assets/oneeden/ornament-sprig.svg') center/contain no-repeat;mask:url('../assets/oneeden/ornament-sprig.svg') center/contain no-repeat}
.verse-text{margin:6px 0 14px;font:400 21px/1.38 var(--display);color:var(--ink);text-wrap:pretty}
.verse-card:not(.is-glass):not(.is-loaded) .verse-text{opacity:.5}
.verse-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}
.verse-actions button{min-height:40px;padding:0 20px;border:0;border-radius:40px;background:var(--dark);color:var(--cream);font:500 13px/1 var(--body);cursor:pointer;transition:background .2s}
.verse-actions button:hover{background:var(--gold-ink)}
.verse-actions .verse-copy{background:rgba(158,131,88,.16);color:var(--ink)}
.verse-actions .verse-copy:hover{background:rgba(158,131,88,.3)}
.verse-status{min-height:1.4em;margin:8px 0 0;font:400 12px/1.4 var(--body);color:var(--gold-ink)}
.verse-toggle:focus-visible,.verse-card button:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
@media(max-width:809px){
 .verse-toggle{top:max(14px,env(safe-area-inset-top));right:14px;width:46px;height:46px;border-width:5px}
 .verse-toggle svg{width:20px;height:20px}
 .verse-card{top:calc(max(14px,env(safe-area-inset-top)) + 56px);right:16px;padding:20px 22px 16px}
 .verse-text{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.verse-card,.verse-toggle,.verse-dot{animation:none;transition:none}}
.verse-card:focus,.verse-card:focus-visible{outline:none}
/* iPhone-style red badge with a count. */
.verse-dot{top:-4px;right:-4px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ff3b30;color:#fff;font:600 12px/1 -apple-system,BlinkMacSystemFont,'Inter',sans-serif;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(20,12,5,.25)}

/* Focus outlines: keyboard only (owner, 27 Oct). script.js sets html[data-input] from the last pointer/keyboard use;
   focused whole sections (menu links move focus there for screen readers) never draw a box. */
html{-webkit-tap-highlight-color:transparent}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
html[data-input=pointer] :focus,html[data-input=pointer] :focus-visible,html[data-input=pointer] .chip input:focus-visible+span{outline:none!important}
/* Torn edges as a plain cream image, not a mask: iPhone WebKit skipped repainting the masked strip after the letter closed (27 Oct). */
.collection::before,.circles::before{-webkit-mask:none;mask:none;background:url('../assets/oneeden/torn-edge-cream-v2.png') 0 0/2000px 64px repeat-x}
.circles::before{background-position:-1300px 0}

/* Chapter icons in the site's illustration style (objects.svg): soft brown/gold line, paper/olive gradient fills.
   Each plays once when its section becomes active (data-state from script.js) and resets when the section is left. */
.ruled.has-chapter-icon{padding-top:54px}
.ruled.has-chapter-icon::after{display:none}
.chapter-icon{position:absolute;top:0;left:-7px;width:48px;height:43px;overflow:visible;fill:none;stroke:var(--icon-ink,#735e42);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.signup{--icon-ink:#c2a878}
/* Envelope: flap folds open, letter rises, glow ticks appear. */
.icon-envelope .ce-shadow{fill:#000;stroke:none;opacity:.18}
.icon-envelope .ce-back{fill:#ece3ce}
.icon-envelope .ce-flap-open,.icon-envelope .ce-flap,.icon-envelope .ce-front,.icon-envelope .ce-sheet{fill:url(#ce-paper)}
.icon-envelope .ce-seal{fill:url(#ce-olive)}
.icon-envelope .ce-lines{opacity:.45}
.icon-envelope .ce-folds{opacity:.45}
.icon-envelope .ce-glow{opacity:0}
.icon-envelope .ce-flap-closed,.icon-envelope .ce-flap-open{transform-box:view-box;transform-origin:50px 38px}
.icon-envelope .ce-flap-open{transform:scaleY(0)}
.icon-envelope .ce-letter{transform:translateY(8px)}
[data-state=active] .icon-envelope .ce-flap-closed{transform:scaleY(0);transition:transform .35s cubic-bezier(.5,0,.75,0) .55s}
[data-state=active] .icon-envelope .ce-flap-open{transform:scaleY(1);transition:transform .4s cubic-bezier(.25,1,.5,1) .9s}
[data-state=active] .icon-envelope .ce-letter{transform:translateY(-16px);transition:transform .9s cubic-bezier(.16,1,.3,1) 1.1s}
[data-state=active] .icon-envelope .ce-glow{opacity:.5;transition:opacity .5s ease 1.75s}
@media(prefers-reduced-motion:reduce){
 .icon-envelope .ce-flap-closed{transform:scaleY(0)}
 .icon-envelope .ce-flap-open{transform:none}
 .icon-envelope .ce-letter{transform:translateY(-16px)}
 .icon-envelope .ce-glow{opacity:.5}
 [data-state] .icon-envelope *{transition:none!important}
}

/* Remaining chapter icons (27 Oct): quill, gate, star, circle of people, seedling. Same style, size and trigger as the envelope. */
.chapter-icon{color:var(--icon-ink,#735e42)}
.story{--icon-ink:#c2a878}
.chapter-icon.is-centered{position:relative;display:block;top:auto;left:auto;margin:0 auto 16px}
.story-header.has-chapter-icon::before{display:none}
.roadmap header .eyebrow::after{display:none}
.chapter-icon .ci-shadow{fill:#000;stroke:none;opacity:.12}
.chapter-icon .ci-glow{opacity:0}
.chapter-icon *{transform-box:view-box}
[data-state=active] .chapter-icon .ci-glow{opacity:.5;transition:opacity .5s ease 1.6s}
/* Quill writes a flourish. */
.icon-quill .cq-ink{stroke-dasharray:1;stroke-dashoffset:1}
.icon-quill .cq-quill{transform:translateX(-56px);opacity:0}
[data-state=active] .icon-quill .cq-ink{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s cubic-bezier(.45,0,.25,1) .6s}
[data-state=active] .icon-quill .cq-quill{transform:none;opacity:1;transition:transform 1.2s cubic-bezier(.45,0,.25,1) .6s,opacity .3s ease .5s}
/* Gate doors swing open onto the garden. */
.icon-gate .cg-left{transform-origin:29px 50px}
.icon-gate .cg-right{transform-origin:71px 50px}
[data-state=active] .icon-gate .cg-door{transform:scaleX(.22);transition:transform 1.2s cubic-bezier(.65,0,.35,1) .6s}
/* Star turns into place, lines draw outward, one twinkle. */
.icon-star .cs-star{transform-origin:50px 45px;transform:scale(.3) rotate(-90deg);opacity:0}
.icon-star .cs-left{transform-origin:32px 45px;transform:scaleX(0)}
.icon-star .cs-right{transform-origin:68px 45px;transform:scaleX(0)}
.icon-star .cs-spark{opacity:0}
[data-state=active] .icon-star .cs-star{transform:none;opacity:1;transition:transform .9s cubic-bezier(.34,1.3,.64,1) .6s,opacity .3s ease .6s}
[data-state=active] .icon-star .cs-line{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) 1s}
[data-state=active] .icon-star .cs-spark{animation:cs-twinkle 1s ease 1.6s both}
@keyframes cs-twinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:.9;transform:none}}
.icon-star .cs-spark{transform-origin:72px 26px}
/* People gather around the table. */
.icon-circles .cc-p{opacity:0}
.icon-circles .cc-p0{transform:translate(0,-14px)}.icon-circles .cc-p1{transform:translate(13px,-7px)}.icon-circles .cc-p2{transform:translate(13px,7px)}
.icon-circles .cc-p3{transform:translate(0,14px)}.icon-circles .cc-p4{transform:translate(-13px,7px)}.icon-circles .cc-p5{transform:translate(-13px,-7px)}
[data-state=active] .icon-circles .cc-p{transform:none;opacity:1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .4s ease}
[data-state=active] .icon-circles .cc-p0{transition-delay:.6s}[data-state=active] .icon-circles .cc-p1{transition-delay:.7s}[data-state=active] .icon-circles .cc-p2{transition-delay:.8s}
[data-state=active] .icon-circles .cc-p3{transition-delay:.9s}[data-state=active] .icon-circles .cc-p4{transition-delay:1s}[data-state=active] .icon-circles .cc-p5{transition-delay:1.1s}
/* Seedling grows and unfurls two leaves. */
.icon-seed .cf-stem{stroke-dasharray:1;stroke-dashoffset:1}
.icon-seed .cf-l1{transform-origin:50px 56px;transform:scale(0)}
.icon-seed .cf-l2{transform-origin:50px 46px;transform:scale(0)}
[data-state=active] .icon-seed .cf-stem{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease-out .6s}
[data-state=active] .icon-seed .cf-l1{transform:none;transition:transform .7s cubic-bezier(.34,1.4,.64,1) 1.05s}
[data-state=active] .icon-seed .cf-l2{transform:none;transition:transform .7s cubic-bezier(.34,1.4,.64,1) 1.25s}
@media(prefers-reduced-motion:reduce){
 .chapter-icon *{transition:none!important;animation:none!important}
 .chapter-icon .ci-glow{opacity:.5}
 .icon-quill .cq-ink,.icon-seed .cf-stem{stroke-dashoffset:0}
 .icon-quill .cq-quill,.icon-star .cs-star,.icon-star .cs-line,.icon-circles .cc-p,.icon-seed .cf-leaf{transform:none;opacity:1}
 .icon-gate .cg-door{transform:scaleX(.22)}
}

/* Membership illustrations come alive (js/objects-alive.js inlines exact copies; parts are .pN in symbol order). */
.eden-alive .eo,.eden-alive .eo *{transform-box:view-box}
.eden-alive.is-playing .eo-journal .p3{animation:eo-ribbon 1s cubic-bezier(.16,1,.3,1) both}
@keyframes eo-ribbon{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
.eden-alive.is-playing .eo-cup .p4{animation:eo-steam 2.4s ease-out both}
@keyframes eo-steam{0%{transform:translateY(10px);opacity:0}35%{opacity:.6}100%{transform:translateY(-4px);opacity:.35}}
.eden-alive.is-playing .eo-books :is(.p6,.p7,.p8){animation:eo-drop .9s cubic-bezier(.34,1.35,.64,1) both;transform-origin:80px 80px}
@keyframes eo-drop{from{transform:translateY(-22px) rotate(-6deg);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
.eden-alive.is-playing .eo-brush :is(.p0,.p1,.p2){animation:eo-dab 1.3s ease-in-out both;transform-origin:58px 126px}
@keyframes eo-dab{0%,100%{transform:none}35%{transform:rotate(-14deg)}55%{transform:rotate(-10deg)}75%{transform:rotate(-13deg)}}
.eden-alive.is-playing .eo-bowl :is(.p3,.p4){animation:eo-fruit .9s cubic-bezier(.34,1.45,.64,1) both}
@keyframes eo-fruit{from{transform:translateY(-24px);opacity:0}50%{opacity:1}to{transform:none;opacity:1}}
.eden-alive.is-playing .eo-lamp :is(.p3,.p4){animation:eo-chain .7s ease-in-out both}
@keyframes eo-chain{0%,100%{transform:none}40%{transform:translateY(5px)}}
.eden-alive.is-playing .eo-lamp .p5{animation:eo-glow 1.6s ease .5s both}
@keyframes eo-glow{0%{opacity:0}40%{opacity:.9}100%{opacity:.35}}
.eden-alive.is-playing .eo-sprig{animation:eo-sway 2.2s ease-in-out both;transform-origin:52px 136px}
@keyframes eo-sway{0%,100%{transform:none}25%{transform:rotate(-6deg)}55%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
.eden-alive.is-playing .eo-door .p4{animation:eo-plants 2s ease-in-out both;transform-origin:26px 130px}
@keyframes eo-plants{0%,100%{transform:none}30%{transform:skewX(-8deg)}60%{transform:skewX(5deg)}85%{transform:skewX(-2deg)}}
.eden-alive.is-playing .eo-letter :is(.p2,.p3){animation:eo-lift 1.4s ease-in-out both}
@keyframes eo-lift{0%,100%{transform:none}45%{transform:translateY(-8px)}}
.eden-alive.is-playing .eo-letter :is(.p4,.p5){animation:eo-seal .6s cubic-bezier(.34,1.6,.64,1) .7s both;transform-origin:80px 99px}
@keyframes eo-seal{from{transform:scale(0)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.eden-alive .eo,.eden-alive .eo *{animation:none!important}}

/* Performance (27 Oct): paper grain is printed into backgrounds instead of a full-screen blended overlay
   (the overlay forced a whole-screen re-blend on every scroll frame). Same grain tile; shows faintly on brown too. */
body::before{content:none!important}
body{background-image:url('../assets/oneeden/paper-grain.svg');background-size:240px 240px;background-repeat:repeat;background-blend-mode:normal}
.collection::after,.circles::after{content:'';position:absolute;left:0;right:0;top:0;bottom:100vh;z-index:-1;pointer-events:none;background:url('../assets/oneeden/paper-grain.svg') 0 0/240px 240px}
.footer-scene{background:url('../assets/oneeden/paper-grain.svg') 0 0/240px 240px,var(--cream)}

/* Small life (27 Oct). Transform/opacity only; runs only when visible; reduced motion turns it all off. */
/* 1. Bell rings once while today's verse is unread. */
.verse-toggle.is-ringing svg{animation:bell-ring 1s ease-in-out;transform-origin:50% 12%}
@keyframes bell-ring{0%,100%{transform:none}12%{transform:rotate(16deg)}26%{transform:rotate(-13deg)}40%{transform:rotate(9deg)}54%{transform:rotate(-6deg)}68%{transform:rotate(3deg)}}
/* 2. Envelope floats gently and its wax seal glints, only while the Manifesto is the active section. */
.envelope-face::after{content:'';position:absolute;left:49.7%;top:58.7%;width:14.4%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,244,220,.75) 50%,transparent 62%) 160% 0/300% 100% no-repeat;opacity:0}
.story[data-state=active] .envelope-face{animation:env-float 5s ease-in-out infinite}
.story[data-state=active] .envelope-face::after{animation:seal-glint 5s ease-in-out 1.2s infinite}
@keyframes env-float{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes seal-glint{0%,62%{opacity:0;background-position:160% 0}66%{opacity:1}82%{opacity:1;background-position:-60% 0}86%,100%{opacity:0;background-position:-60% 0}}
/* 3. Sent: the letter slides in, the flap seals, and the envelope flies off. */
.sent-envelope{display:none;width:72px;height:65px;margin:4px 0 6px}
.sent-envelope svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#c2a878;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sent-envelope *{transform-box:view-box}
.signup-form.is-sent .sent-envelope{display:block;animation:se-fly .8s cubic-bezier(.55,0,.75,.2) 1.7s both}
.sent-envelope .se-letter{transform:translateY(-16px)}
.sent-envelope .se-flap-closed{transform-origin:50px 38px;transform:scaleY(0)}
.sent-envelope .se-flap-open{transform-origin:50px 38px}
.signup-form.is-sent .se-letter{animation:se-in .5s cubic-bezier(.16,1,.3,1) .2s both}
.signup-form.is-sent .se-flap-open{animation:se-fold-up .25s ease-in .75s both}
.signup-form.is-sent .se-flap-closed{animation:se-fold-down .3s cubic-bezier(.25,1,.5,1) 1s both}
.signup-form.is-sent .se-seal{animation:se-seal .4s cubic-bezier(.34,1.6,.64,1) 1.25s both;transform-origin:50px 58px}
@keyframes se-in{from{transform:translateY(-16px)}to{transform:translateY(8px)}}
@keyframes se-fold-up{to{transform:scaleY(0)}}
@keyframes se-fold-down{from{transform:scaleY(0)}to{transform:none}}
@keyframes se-seal{from{transform:scale(0)}to{transform:none}}
@keyframes se-fly{to{transform:translate(140px,-90px) rotate(-14deg) scale(.5);opacity:0}}
/* 4. Two small butterflies: a slow wandering drift, a fluttery bob on top, and flap-then-glide wings. */
.hero-butterflies{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.butterfly{position:absolute;left:0;top:0;width:28px;height:22px;opacity:0;will-change:transform}
.bf-two{width:22px;height:18px}
.bf-bob,.bf-tilt{display:block;width:100%;height:100%}
.butterfly svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:#735e42;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.bf-bob{animation:bf-bob 1.9s ease-in-out infinite}
.bf-tilt{animation:bf-tilt 3.3s ease-in-out infinite}
.bf-two .bf-bob{animation-duration:2.3s;animation-delay:-.7s}
.bf-two .bf-tilt{animation-duration:2.9s;animation-delay:-1.2s}
@keyframes bf-bob{0%,100%{transform:translateY(0)}22%{transform:translateY(-9px)}45%{transform:translateY(-3px)}70%{transform:translateY(-12px)}}
@keyframes bf-tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(7deg)}}
.bf-wing{transform-box:fill-box;animation:bf-flap 1.6s linear infinite}
.bf-two .bf-wing{animation-duration:1.9s;animation-delay:-.5s}
.bf-l{transform-origin:100% 50%}.bf-r{transform-origin:0 50%}
@keyframes bf-flap{0%{transform:none}6%{transform:scaleX(.2)}12%{transform:none}18%{transform:scaleX(.2)}24%{transform:none}30%{transform:scaleX(.25)}36%{transform:none}60%{transform:scaleX(.8)}80%{transform:none}100%{transform:none}}
.bf-one{animation:bf-path-one 46s linear 3s infinite}
.bf-two{animation:bf-path-two 58s linear 14s infinite}
@keyframes bf-path-one{0%{transform:translate(-4vw,58vh);opacity:0}2%{opacity:1}10%{transform:translate(7vw,50vh)}20%{transform:translate(16vw,56vh)}30%{transform:translate(25vw,46vh)}40%{transform:translate(36vw,52vh)}50%{transform:translate(48vw,42vh)}60%{transform:translate(62vw,50vh)}70%{transform:translate(76vw,40vh)}80%{transform:translate(90vw,47vh)}88%{transform:translate(103vw,38vh);opacity:1}89%,100%{transform:translate(103vw,38vh);opacity:0}}
@keyframes bf-path-two{0%{transform:translate(103vw,46vh) scaleX(-1);opacity:0}2%{opacity:.95}12%{transform:translate(92vw,54vh) scaleX(-1)}24%{transform:translate(80vw,44vh) scaleX(-1)}36%{transform:translate(68vw,52vh) scaleX(-1)}48%{transform:translate(55vw,41vh) scaleX(-1)}60%{transform:translate(42vw,49vh) scaleX(-1)}72%{transform:translate(28vw,40vh) scaleX(-1)}84%{transform:translate(12vw,48vh) scaleX(-1)}94%{transform:translate(-5vw,42vh) scaleX(-1);opacity:.95}95%,100%{transform:translate(-5vw,42vh) scaleX(-1);opacity:0}}
.hero.is-offscreen .hero-butterflies *,.page-idle .hero-butterflies *{animation-play-state:paused}
/* 5. A breeze through the meadow. */
.hero-meadow img{transform-origin:50% 100%;animation:meadow-breeze 7s ease-in-out infinite alternate}
@keyframes meadow-breeze{from{transform:skewX(-.7deg)}to{transform:skewX(.7deg)}}
.hero.is-offscreen .hero-meadow img,.page-idle .hero-meadow img{animation-play-state:paused}
/* 8. Choosing a circle: the chip pops and a small leaf appears. */
.chip span{position:relative}
.chip input:checked+span{animation:chip-pop .35s cubic-bezier(.34,1.6,.64,1)}
.chip input:checked+span::after{content:'';position:absolute;top:-7px;right:-4px;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 17C3 8 9 3 17 3c0 8-5 14-14 14Z' fill='%23a8b18d' stroke='%23735e42' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M4 16 13 7' fill='none' stroke='%23735e42' stroke-width='.9' opacity='.6'/%3E%3C/svg%3E") center/contain no-repeat;animation:chip-leaf .45s cubic-bezier(.34,1.6,.64,1) both}
@keyframes chip-pop{50%{transform:scale(1.07)}}
@keyframes chip-leaf{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
/* 9. FAQ answers slide open softly and their text fades in. */
.faq-answer{transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.faq-answer p{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.faq-answer.open p{opacity:1;transform:none;transition-delay:.12s}
/* 10. Menu dots morph into an X. */
.menu-toggle[aria-expanded=true]{transform:none}
.menu-toggle span{transition:transform .35s cubic-bezier(.65,0,.35,1),opacity .2s ease}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateX(7px) rotate(45deg) scale(5,.5)}
.menu-toggle[aria-expanded=true] span:nth-child(2){transform:scale(0);opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateX(-7px) rotate(-45deg) scale(5,.5)}
@media(prefers-reduced-motion:reduce){
 .verse-toggle svg,.envelope-face,.envelope-face::after,.butterfly,.bf-wing,.bf-bob,.bf-tilt,.hero-meadow img,.chip span,.chip span::after,.sent-envelope,.sent-envelope *{animation:none!important}
 .hero-butterflies{display:none}
 .faq-answer,.faq-answer p,.menu-toggle span{transition:none}
}
/* Hero paints its own background colour over the body, so it carries the same grain; butterflies leave with the garden scene. */
.hero{background-image:url('../assets/oneeden/paper-grain.svg');background-size:240px 240px}
.hero-butterflies{opacity:calc(1 - var(--hero-progress,0))}

/* Menu bloom (27 Oct): the panel grows out of the button as a circle, links cascade in, one pill glides between links. */
.floating-nav .nav-menu,.floating-nav.is-reading .nav-menu{display:flex;opacity:1;transform:none;visibility:hidden;pointer-events:none;
 --bloom-at:50% calc(100% + 16px + var(--menu-size)/2);
 -webkit-clip-path:circle(calc(var(--menu-size)/2) at var(--bloom-at));clip-path:circle(calc(var(--menu-size)/2) at var(--bloom-at));
 transition:clip-path .34s cubic-bezier(.55,0,.75,.2),-webkit-clip-path .34s cubic-bezier(.55,0,.75,.2),visibility 0s linear .34s,background .45s,border-color .45s,box-shadow .45s}
.floating-nav .nav-menu.open{visibility:visible;pointer-events:auto;-webkit-clip-path:circle(170% at var(--bloom-at));clip-path:circle(170% at var(--bloom-at));
 transition:clip-path .62s cubic-bezier(.6,.05,.2,1),-webkit-clip-path .62s cubic-bezier(.6,.05,.2,1),visibility 0s,background .45s,border-color .45s,box-shadow .4s ease .5s}
.floating-nav .nav-menu a{position:relative;z-index:1;background:transparent!important;opacity:0;transform:translateY(10px);transition:opacity .15s ease,transform .2s ease,color .3s}
.floating-nav .nav-menu.open a{opacity:1;transform:none;transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1),color .3s}
.floating-nav .nav-menu.open a:nth-child(2){transition-delay:.1s}.floating-nav .nav-menu.open a:nth-child(3){transition-delay:.14s}
.floating-nav .nav-menu.open a:nth-child(4){transition-delay:.18s}.floating-nav .nav-menu.open a:nth-child(5){transition-delay:.22s}
.floating-nav .nav-menu.open a:nth-child(6){transition-delay:.26s}.floating-nav .nav-menu.open a:nth-child(7){transition-delay:.3s}
.floating-nav .nav-menu.open a:nth-child(8){transition-delay:.34s}
.floating-nav .nav-menu a.is-pill{color:var(--navy)}
.nav-pill{position:absolute;left:8px;right:8px;top:0;z-index:0;border-radius:40px;background:rgba(210,225,236,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);opacity:0;pointer-events:none;transition:transform .42s cubic-bezier(.65,0,.35,1),height .42s cubic-bezier(.65,0,.35,1),opacity .25s}
.nav-pill.no-glide{transition:none}
@media(prefers-reduced-motion:reduce){
 .floating-nav .nav-menu,.floating-nav .nav-menu.open,.floating-nav .nav-menu a,.floating-nav .nav-menu.open a,.nav-pill{transition:none!important}
}
/* The panel's shadow only appears once the bloom has finished (the growing circle would otherwise cut it into an arc). */
.floating-nav .nav-menu:not(.open),.floating-nav.on-light .nav-menu:not(.open){box-shadow:none}
.floating-nav .nav-menu a{box-shadow:none!important}
.floating-nav .nav-menu:not(.open) .nav-pill{opacity:0!important;transition:opacity .15s ease}

/* Menu as liquid glass (27 Oct, replaces the clip-path bloom): the glass is a ::before blob that starts as the button
   (hidden behind it) and swells into the panel with a soft spring; links flow in with it and back out with it together.
   script.js sets --bx/--by/--sx/--sy (button position/size relative to the panel). */
.floating-nav .nav-menu,.floating-nav.is-reading .nav-menu,.floating-nav.on-light .nav-menu{-webkit-clip-path:none!important;clip-path:none!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;isolation:isolate;
 transition:visibility 0s linear .42s!important}
.floating-nav .nav-menu.open{transition:visibility 0s!important}
.floating-nav .nav-menu::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:20px;pointer-events:none;
 background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);
 -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 18px 50px rgba(20,12,5,.28);
 transform:translate(var(--bx,0px),var(--by,120px)) scale(var(--sx,.2),var(--sy,.2));border-radius:50%;opacity:0;
 transition:transform .42s cubic-bezier(.55,0,.45,1),border-radius .42s cubic-bezier(.55,0,.45,1),opacity .2s ease .22s,background .45s,border-color .45s}
.floating-nav.on-light .nav-menu::before{background:linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,.1));border-color:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 50px rgba(60,40,20,.16)}
.floating-nav .nav-menu.open::before{transform:none;border-radius:20px;opacity:1;
 transition:transform .7s cubic-bezier(.3,1.32,.5,1),border-radius .55s cubic-bezier(.3,1,.5,1),opacity .12s ease,background .45s,border-color .45s}
/* Links and pill: in after the swell (cascade), out together toward the button while the glass shrinks. */
.floating-nav .nav-menu a,.floating-nav .nav-menu .nav-pill{transition-property:opacity,transform,color}
.floating-nav .nav-menu:not(.open) a{opacity:0;transform:translateY(calc(var(--by,120px)*.35)) scale(.85);transition:opacity .22s ease,transform .42s cubic-bezier(.55,0,.45,1),color .3s;transition-delay:0s!important}
.floating-nav .nav-menu.open a{opacity:1;transform:none;transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1),color .3s}
.floating-nav .nav-menu.open a:nth-child(2){transition-delay:.16s}.floating-nav .nav-menu.open a:nth-child(3){transition-delay:.2s}
.floating-nav .nav-menu.open a:nth-child(4){transition-delay:.24s}.floating-nav .nav-menu.open a:nth-child(5){transition-delay:.28s}
.floating-nav .nav-menu.open a:nth-child(6){transition-delay:.32s}.floating-nav .nav-menu.open a:nth-child(7){transition-delay:.36s}
.floating-nav .nav-menu.open a:nth-child(8){transition-delay:.4s}
.floating-nav .nav-menu:not(.open) .nav-pill{opacity:0!important;transition:opacity .2s ease!important}
@media(prefers-reduced-motion:reduce){.floating-nav .nav-menu::before,.floating-nav .nav-menu a{transition:none!important}}
.floating-nav .nav-pill.no-glide{transition:opacity .35s ease .2s}
.floating-nav .nav-menu.open::before{transition:transform .75s cubic-bezier(.42,1.28,.5,1),border-radius .6s cubic-bezier(.42,1,.5,1),opacity .12s ease,background .45s,border-color .45s}
.floating-nav .nav-menu,.floating-nav.is-reading .nav-menu{overflow:visible}
.floating-nav .nav-menu.open a:nth-child(2){transition-delay:.24s}.floating-nav .nav-menu.open a:nth-child(3){transition-delay:.28s}
.floating-nav .nav-menu.open a:nth-child(4){transition-delay:.32s}.floating-nav .nav-menu.open a:nth-child(5){transition-delay:.36s}
.floating-nav .nav-menu.open a:nth-child(6){transition-delay:.4s}.floating-nav .nav-menu.open a:nth-child(7){transition-delay:.44s}
.floating-nav .nav-menu.open a:nth-child(8){transition-delay:.48s}
.floating-nav .nav-pill.no-glide{transition:opacity .35s ease .3s}

/* Verse card as liquid glass (27 Oct): the glass grows out of the bell and flows back into it; content follows.
   Light glass + ink text over light sections, smoky glass + cream text over brown (html.ui-light from script.js). */
.verse-card.is-glass{display:block;background:transparent;box-shadow:none;animation:none;isolation:isolate;overflow:visible;visibility:hidden;pointer-events:none;transition:visibility 0s linear .42s;color:var(--cream)}
.verse-card.is-glass.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.verse-card.is-glass::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:20px;pointer-events:none;
 background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);
 -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 24px 60px rgba(20,12,5,.3);
 transform:translate(var(--bx,140px),var(--by,-160px)) scale(var(--sx,.15),var(--sy,.15));border-radius:50%;opacity:0;
 transition:transform .42s cubic-bezier(.55,0,.45,1),border-radius .42s cubic-bezier(.55,0,.45,1),opacity .2s ease .22s,background .45s,border-color .45s}
.verse-card.is-glass.is-open::before{transform:none;border-radius:20px;opacity:1;
 transition:transform .75s cubic-bezier(.42,1.28,.5,1),border-radius .6s cubic-bezier(.42,1,.5,1),opacity .12s ease,background .45s,border-color .45s}
html.ui-light .verse-card.is-glass{color:var(--ink)}
html.ui-light .verse-card.is-glass::before{background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.3));border-color:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 60px rgba(60,40,20,.18)}
.verse-card.is-glass .verse-text{color:inherit}
.verse-card.is-glass .verse-eyebrow,.verse-card.is-glass .verse-ref,.verse-card.is-glass .verse-status{color:#d8c39b}
.verse-card.is-glass .verse-date{color:rgba(244,238,227,.6)}
.verse-card.is-glass .verse-close{color:inherit}
.verse-card.is-glass .verse-sprig{background:#cdb88f}
.verse-card.is-glass .verse-share{background:var(--cream);color:var(--dark)}
.verse-card.is-glass .verse-share:hover{background:#cdb88f}
.verse-card.is-glass .verse-copy{background:rgba(255,255,255,.14);color:inherit}
html.ui-light .verse-card.is-glass .verse-eyebrow,html.ui-light .verse-card.is-glass .verse-ref,html.ui-light .verse-card.is-glass .verse-status{color:var(--gold-ink)}
html.ui-light .verse-card.is-glass .verse-date{color:rgba(30,20,13,.55)}
html.ui-light .verse-card.is-glass .verse-sprig{background:var(--gold)}
html.ui-light .verse-card.is-glass .verse-share{background:var(--dark);color:var(--cream)}
html.ui-light .verse-card.is-glass .verse-share:hover{background:var(--gold-ink)}
html.ui-light .verse-card.is-glass .verse-copy{background:rgba(158,131,88,.16)}
/* Content flows in after the swell and back toward the bell with the glass. */
.verse-card.is-glass>*{opacity:0;transform:translate(calc(var(--bx,140px)*.3),calc(var(--by,-160px)*.3)) scale(.9);transition:opacity .22s ease,transform .42s cubic-bezier(.55,0,.45,1),color .3s}
.verse-card.is-glass.is-open>*{opacity:1;transform:none;transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1),color .3s}
.verse-card.is-glass.is-open>:nth-child(1){transition-delay:.2s}.verse-card.is-glass.is-open>:nth-child(2){transition-delay:.25s}
.verse-card.is-glass.is-open>:nth-child(3){transition-delay:.3s}.verse-card.is-glass.is-open>:nth-child(4){transition-delay:.35s}
.verse-card.is-glass.is-open>:nth-child(5){transition-delay:.4s}.verse-card.is-glass.is-open>:nth-child(6){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){.verse-card.is-glass,.verse-card.is-glass::before,.verse-card.is-glass>*{transition:none!important}}

/* Performance (28 Oct): section colours as composited layers (see setToneLayer in script.js). The body colour no longer animates. */
body,body[data-tone]{transition:none;background-color:var(--dark);background-image:none}
.tone-layers{position:fixed;inset:0;z-index:-1;pointer-events:none}
.tone-layers .tl{position:absolute;inset:0;opacity:0;will-change:opacity;background:url('../assets/oneeden/paper-grain.svg') 0 0/240px 240px}
.tl-dark{background-color:var(--dark)!important}.tl-cream{background-color:var(--cream)!important}.tl-blue{background-color:#d2e1ec!important}
.tone-layers .tl.is-under{opacity:1;z-index:1;transition:none}
.tone-layers .tl.is-top{opacity:1;z-index:2;transition:opacity .9s cubic-bezier(.45,0,.25,1)}
@media(prefers-reduced-motion:reduce){.tone-layers .tl.is-top{transition:none}}