/* RADIANT FLO · shared system (direction "ascent" + the VERDICT.md grafts)
   One ivory page, one fine gold line (the serpent) rising behind the content, scale contrast
   instead of caps labels, her photos in hairline frames. Built from directions/VERDICT.md Part 3.

   Paint order: .spine sits at z-index 1; section backgrounds paint under it; .wrap (z-index 2)
   paints over it, so the line threads behind words and photos and re-emerges in the white space.
   Page groups may add layout in /assets/css/pages/<group>.css, loaded after this file.
   Never edit this file from a page-porting task: it is shared by all 29 pages.

   ALIGNMENT SYSTEM ("centred sanctuary", _scratch/align/SYSTEM.md): every display element sits on the centre line of its
   composition at every width: eyebrows (gold rules both sides), kicks, headings, leads, quotes, prices, CTA groups, card text,
   closing bands, footer. On wide screens a split (photo beside copy) keeps its photo; the copy is centred inside its own column.
   Reading text keeps a left edge: a block with two or more body paragraphs, lists, FAQ answers, article prose, forms.
   Opt a block out with .is-left (left lockup) or force reading-left on a single long paragraph with .is-reading. */

/* ============================================================ 0. fonts ============================================================ */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/cormorant-garamond.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/jost.woff2) format('woff2')}

/* ============================================================ 1. tokens ============================================================ */
:root{
  --ivory:#FCFAF5; --silk:#F6F2E9; --champagne:#EDE6D6; --linen:#E5DCC8; --sand:#DDD0B8; --light:#FFFDF6;
  --gold:#B69A5E; --gold-soft:#CBB37D; --gold-pale:#E9D7A6; --gold-deep:#94783F; --gold-ink:#7D6433; --gold-text:#6E5A30; --gold-umber:#5E4C27;
  --ink:#2A241B; --ink-2:#3D3527; --soft:#6B655C; --night:#1E1913;
  --hair:rgba(182,154,94,.35); --hair-strong:rgba(182,154,94,.55); --hair-ivory:rgba(252,250,245,.6); --rule-ink:rgba(42,36,27,.12);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --bar:36px; --navh:88px; --max:1440px; --gutter:clamp(22px,5vw,80px); --cg:clamp(16px,2.2vw,32px); --measure:34em; --stroke:48px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.3s; --t-ui:.45s; --t-reveal:1.2s; --t-mask:1.7s; --t-settle:2.4s;
  --shadow-card:0 30px 70px -32px rgba(42,36,27,.45); --shadow-btn:0 18px 36px -20px rgba(42,36,27,.5);
  --pad:clamp(100px,14vw,190px); --pad-lg:clamp(110px,15vw,200px); --head-gap:clamp(44px,6vw,88px);
}
@media (max-width:767px){:root{--navh:70px;--cg:16px;--gutter:24px;--pad:96px;--pad-lg:110px;--head-gap:40px}}
html.no-bar{--bar:0px}

/* ============================================================ 2. base ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:only light;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + var(--navh) + 16px)}
html.motion{scroll-behavior:auto}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;position:relative;padding-top:0!important}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--linen);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
h1,h2,h3,h4,.kick,.eyebrow{text-wrap:balance}
p,blockquote,li,figcaption,dd{text-wrap:pretty}
.lead,.hero-line,.door-inv,.feel,cite,figcaption{text-wrap:balance}
.skip{position:absolute;left:12px;top:-60px;z-index:400;background:var(--ink);color:var(--ivory);padding:10px 16px;font-size:13px}
.skip:focus{top:12px}
main{display:block}
[hidden]{display:none!important}
.lnum{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
/* two phrases joined by a separator: .ph-pair > .ph + .sep + .ph. Phones stack the phrases and drop the separator (section 22); .ph-stack does it at every width (narrow columns) */
.ph-pair.ph-stack>.ph{display:block}.ph-pair.ph-stack>.sep{display:none}

.wrap{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap-n{position:relative;z-index:2;width:100%;max-width:680px;margin:0 auto;padding:0 var(--gutter)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg)}

/* section bands: the ground rhythm. Inner pages alternate ivory / silk / champagne, never two champagne in a row. */
.band{position:relative;padding:var(--pad) 0}
.band.lg{padding:var(--pad-lg) 0}
.band.sm{padding:clamp(64px,8vw,110px) 0}
.bg-ivory{background:var(--ivory)}.bg-silk{background:var(--silk)}.bg-champagne{background:var(--champagne)}.bg-light{background:var(--light)}
.hair-top{border-top:1px solid var(--hair)}.hair-bottom{border-bottom:1px solid var(--hair)}

/* ============================================================ 3. type ============================================================ */
.kick{display:block;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text);line-height:1.8}
.eyebrow{display:block;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-text);line-height:1.8;text-align:center}
.eyebrow::before,.eyebrow::after{content:"";display:inline-block;vertical-align:middle;position:relative;top:-.1em;width:40px;height:1px;background:var(--gold)}
.eyebrow::before{margin-right:16px}
.eyebrow::after{margin-left:calc(16px - .44em)}   /* the last letter's tracking already sits before it */
.h1{font-family:var(--serif);font-weight:300;font-size:clamp(60px,8.6vw,138px);line-height:.9;letter-spacing:-.018em;color:var(--ink)}
.h1 em,.h1 .it{font-style:italic;font-weight:300;color:var(--gold-deep);font-size:.74em;line-height:1.05;display:block;margin-top:.1em}
.h1.h1-long{font-size:clamp(44px,5vw,78px);line-height:1}
.h1.h1-long em{font-size:.78em}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(44px,6vw,96px);line-height:.96;letter-spacing:-.012em;color:var(--ink)}
.h2.h2-md{font-size:clamp(38px,4.6vw,72px)}
.h2 em,.h3 em,.final-h em,.ladder .call,.door-title em,.tile-word em{font-style:italic;font-weight:300;color:var(--gold-deep)}
.h3{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,50px);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.h4{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.8vw,26px);line-height:1.2;color:var(--ink)}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(21px,1.8vw,26px);line-height:1.45;color:var(--ink-2)}
.lead.it{font-style:italic;color:var(--gold-deep)}
/* AA: gold-deep passes only as large text (24px+); .lead is 24px from about 1340px wide, so below that the italic lead uses --gold-text */
@media (max-width:1339px){.lead.it{color:var(--gold-text)}}
.body{font-size:17px;line-height:1.8;color:var(--ink-2);max-width:var(--measure)}
.body em,.lead em{font-family:var(--serif);font-style:italic;color:var(--gold-text)}
.body>em{font-size:1.25em;line-height:1}
.body strong{font-weight:400;color:var(--ink)}
.body a,.small a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong);transition:color var(--t-fast),border-color var(--t-fast)}
.body a:hover,.small a:hover{color:var(--ink);border-color:var(--ink)}
.small{font-size:15px;line-height:1.7;color:var(--soft)}
.num{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;color:var(--gold-text);letter-spacing:.1em}
/* drop cap: a true three-line initial (VERDICT 3.2), sized per text style */
.dropcap::first-letter{font-family:var(--serif);font-weight:400;font-size:6.6em;line-height:.7;float:left;color:var(--gold-deep);margin:.1em .09em 0 -.03em}
.lead.dropcap::first-letter{font-size:5.5em;line-height:.72;margin:.07em .08em 0 -.02em}
.stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.stack>.kick+*{margin-top:-4px}
.cta-row{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:8px}
@media (max-width:767px){.cta-row{gap:22px}}

.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin-bottom:var(--head-gap)}
.sec-head .lead{max-width:30em}
/* -split: the head and its side link (e.g. "All retreats") stack on the axis, the link under the heading */
.sec-head-split{gap:14px}
.sec-head-split>div{display:flex;flex-direction:column;align-items:center;gap:18px}
.sec-head-center{align-items:center;text-align:center}   /* kept for old markup: every .sec-head is centred now */
.sec-head-offset{margin-left:calc(58.333% + var(--cg) / 2)}

/* ---- the reading rule. Centred stacks centre a single short paragraph; once a stack holds two or more body paragraphs they
   read left, in a measure-wide column that is itself centred under the heading. .is-reading forces that on one long paragraph. */
:is(.stack,.sec-head,.chapter-head,.hero-copy,.hero-txt,.anya-txt,.guide-txt,.final-txt,.ed-txt,.state-after,.door-body,.also-card,.offer-card,.oc-body,.coda-lede):has(>:is(.body,p:not([class]),p[class="rv"])~:is(.body,p:not([class]),p[class="rv"]))>:is(.body,p:not([class]),p[class="rv"]),
.is-reading{text-align:left;align-self:center;width:100%;max-width:var(--measure);margin-left:auto;margin-right:auto}
/* ---- opt-out: .is-left turns a lockup back into a left-edged block (lists, forms, a column that must hug a photo) */
.is-left,.is-left :is(.stack,.sec-head,.chapter-head){align-items:flex-start;text-align:left}
.is-left .eyebrow,.eyebrow.is-left{text-align:left}
.is-left .eyebrow::after,.eyebrow.is-left::after{display:none}
.is-left :is(.cta-row,.hero-cta,.final-cta,.guide-cta){justify-content:flex-start}

/* ============================================================ 4. buttons + links ============================================================ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 38px;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;text-align:center;border:1px solid transparent;transition:background var(--t-ui) var(--ease),color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.btn-gold{background:var(--gold-ink);color:var(--ivory);border-color:var(--gold-ink)}
.btn-gold:hover,.btn-gold:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--ivory);transform:translateY(-1px);box-shadow:var(--shadow-btn)}
.btn-line{background:transparent;color:var(--gold-text);border-color:var(--gold-deep)}
.btn-line:hover,.btn-line:focus-visible{background:var(--gold-ink);border-color:var(--gold-ink);color:var(--ivory)}
.btn-ivory{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.btn-ivory:hover,.btn-ivory:focus-visible{background:var(--gold-pale);border-color:var(--gold-pale);color:var(--ink)}
.btn.sm{min-height:46px;padding:0 26px;font-size:11.5px}
.link-ul{position:relative;display:inline-flex;align-items:center;min-height:44px;max-width:100%;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);white-space:nowrap}
.link-ul::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform-origin:center;transition:transform .5s var(--ease-out)}
.link-ul:hover::after{transform:scaleX(.4)}
.link-ul.on-dark{color:var(--ivory)}
.link-ul.on-dark::after{background:var(--gold-pale)}
.more{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 0 10px .3em;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;line-height:1.7;text-transform:uppercase;color:var(--gold-text);text-align:center}
.more::before{content:"";position:absolute;left:50%;bottom:6px;width:var(--stroke);height:1px;margin-left:calc(var(--stroke) / -2);background:var(--gold);transition:transform .5s var(--ease-out)}
a:hover .more::before,.more:hover::before,a:focus-visible .more::before{transform:scaleX(1.5)}
.more.no-rule::before{display:none}
/* inside a left block (.is-left) the rule leads in from the left, as before */
.is-left .more,.more.is-left{justify-content:flex-start;gap:14px;padding:0;text-align:left}
.is-left .more::before,.more.is-left::before{position:static;flex:none;width:34px;margin:0;transition:width .5s var(--ease-out)}
.is-left a:hover .more::before,.is-left .more:hover::before{transform:none;width:56px}
/* a link that closes a centred block on its own line sits on the axis */
p:has(>.more:only-child),p:has(>.link-ul:only-child){text-align:center}

/* ============================================================ 5. announcement (rendered by /js/announce.js as .announce-bar > a > .ab-mq > span*8) ============================================================ */
/* the visual bar is 36px; its link reaches 44px (a transparent 8px apron over the top of the nav) for a full tap target */
.announce-bar{position:fixed;top:0;left:0;right:0;z-index:120;height:var(--bar);background:var(--champagne);border-bottom:1px solid rgba(182,154,94,.45);overflow:visible}
.announce-bar a{position:relative;display:flex;align-items:flex-start;height:calc(var(--bar) + 8px);margin-bottom:-8px;overflow:hidden;padding:0;color:var(--gold-text);font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;transition:color var(--t-fast)}
.announce-bar a:hover{color:var(--gold-umber)}
.ab-mq{display:flex;align-items:center;height:var(--bar);width:max-content;white-space:nowrap;animation:ab-mq 84s linear infinite}
.ab-mq>span{padding:0 34px}
.announce-bar a:hover .ab-mq{animation-play-state:paused}
@keyframes ab-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html.still .ab-mq,.announce-bar.static .ab-mq{display:block;width:100%;line-height:var(--bar);animation:none;text-align:center;overflow:hidden;text-overflow:ellipsis;padding:0 24px}
html.still .ab-mq>span+span{display:none}
html.no-bar .announce-bar{display:none}

/* ============================================================ 6. nav ============================================================ */
.nav{position:fixed;top:var(--bar);left:0;right:0;z-index:110;height:var(--navh);color:var(--ink);transition:background .5s var(--ease),box-shadow .5s,height .4s var(--ease)}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:160%;background:linear-gradient(to bottom,rgba(252,250,245,.96),rgba(252,250,245,.8) 45%,rgba(252,250,245,0));pointer-events:none;transition:opacity .5s}
.nav.solid::before{opacity:0}
/* over a dark full-bleed opening (.hero--bleed, unless .light-nav) the bar starts ivory-on-night: a soft dark veil instead of the ivory haze, until .solid */
body:has(.hero--bleed:not(.light-nav)) .nav:not(.solid){color:var(--ivory)}
body:has(.hero--bleed:not(.light-nav)) .nav:not(.solid)::before{height:150%;background:linear-gradient(to bottom,rgba(30,25,19,.5),rgba(30,25,19,.22) 50%,rgba(30,25,19,0))}
body:has(.hero--bleed:not(.light-nav)) .nav:not(.solid) .nl .book{color:var(--ivory);border-color:rgba(233,215,166,.7)}
body:has(.hero--bleed:not(.light-nav)) .nav:not(.solid) .nl .book:hover{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
body:has(.hero--bleed:not(.light-nav)) .nav:not(.solid) .nl a::after{background:var(--gold-pale)}
.nav.solid{background:rgba(252,250,245,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(182,154,94,.28);height:68px}
.nav-in{position:relative;height:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;min-height:44px}
.brand img{width:40px;height:40px}
.brand span{font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.nl{display:flex;align-items:center;gap:30px}
.nl a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;padding:6px 0}
.nl a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform var(--t-ui) var(--ease-out)}
.nl a:hover::after,.nl a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nl .book{border:1px solid rgba(148,120,63,.7);padding:12px 20px;color:var(--gold-text);transition:background var(--t-ui) var(--ease),color var(--t-ui),border-color var(--t-ui)}
.nl .book::after{display:none}
.nl .book:hover{background:var(--gold-ink);color:var(--ivory);border-color:var(--gold-ink)}
.burger{display:none;width:44px;height:44px;margin-right:-10px;flex-direction:column;justify-content:center;align-items:center;gap:7px;flex:none}
.burger span{display:block;width:26px;height:1px;background:currentColor;transition:transform .4s}
.burger:hover span:first-child{transform:translateY(-2px)}
.burger:hover span:last-child{transform:translateY(2px)}

/* phone menu */
.mm{position:fixed;inset:0;z-index:200;background:var(--ivory);color:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 80px) 28px 40px;opacity:0;transition:opacity .4s var(--ease);overflow-y:auto}
.mm[hidden]{display:none}
.mm.open{opacity:1}
.mm::before{content:"";position:absolute;left:28px;top:calc(var(--bar) + 72px);bottom:40px;width:1px;background:linear-gradient(to bottom,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
.mm-close{position:absolute;top:calc(var(--bar) + 14px);right:14px;width:48px;height:48px;font-size:38px;font-weight:200;line-height:1;color:var(--ink)}
.mm-links{display:flex;flex-direction:column;gap:0;padding-left:28px}
.mm-links a{display:flex;align-items:baseline;gap:16px;min-height:56px;font-family:var(--serif);font-weight:300;font-size:clamp(30px,9vw,40px);line-height:1.3;letter-spacing:.01em;transform:translateY(14px);opacity:0;transition:transform .7s var(--ease-out),opacity .7s var(--ease-out)}
.mm.open .mm-links a{transform:none;opacity:1}
.mm-links a:nth-child(2){transition-delay:.06s}.mm-links a:nth-child(3){transition-delay:.12s}.mm-links a:nth-child(4){transition-delay:.18s}.mm-links a:nth-child(5){transition-delay:.24s}.mm-links a:nth-child(6){transition-delay:.3s}
.mm-links a i{font-style:italic;font-size:14px;color:var(--gold-text);letter-spacing:.1em;min-width:26px}
.mm-links a[aria-current]{color:var(--gold-ink)}
.mm-links .mm-book{margin-top:28px;align-self:flex-start;min-height:54px;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;line-height:1;padding:0 28px;background:var(--gold-ink);color:var(--ivory);align-items:center}
.mm-foot{position:absolute;left:56px;right:28px;bottom:36px;display:flex;justify-content:space-between;gap:16px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-text)}
.mm-foot a{display:inline-flex;align-items:center;min-height:44px}

/* ============================================================ 7. the serpent spine ============================================================ */
.spine{position:absolute;top:0;left:0;width:100%;height:0;z-index:1;pointer-events:none;overflow:visible}
.spine-ghost{fill:none;stroke:rgba(182,154,94,.16);stroke-width:1}
.spine-halo{fill:none;stroke:rgba(233,215,166,.55);stroke-width:5;stroke-linecap:round;filter:url(#spineSoft)}
.spine-line{fill:none;stroke:url(#spineGrad);stroke-width:1.3;stroke-linecap:round}
.spine-node circle.ring{fill:var(--ivory);stroke:var(--gold);stroke-width:1;transition:fill .8s var(--ease),stroke .8s}
.spine-node circle.core{fill:var(--gold);opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .8s var(--ease),transform 1.1s var(--ease-out)}
.spine-node circle.halo{fill:var(--gold-pale);opacity:0;filter:url(#spineGlow);transition:opacity 1.2s var(--ease)}
.spine-node.on circle.core{opacity:1;transform:scale(1)}
.spine-node.on circle.halo{opacity:.7}
.spine-node.on circle.ring{stroke:var(--gold-deep)}
.spine-tip{opacity:0;transition:opacity .6s}
html.motion .spine-tip.on{opacity:1}
.tip-glow{fill:var(--gold-pale);filter:url(#spineGlow);opacity:.9}
.tip-dot{fill:var(--gold-deep)}
html.still .spine-ghost{display:none}
/* her serpent (pages with <body data-serpent>): slices of her unrolled gold-foil body + her rigid head, placed by site.js.
   On these pages the line only carries the route: the line, its halo, the tip and the node dots are not drawn. */
.serp{position:absolute;top:0;left:0;width:100%;height:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict}
.serp i{position:absolute;left:0;top:0;display:block;background:url(/assets/img/serpent/strip.webp) no-repeat;border-radius:50%;will-change:transform;backface-visibility:hidden}
.serp i.h{border-radius:0;background-image:url(/assets/img/serpent/head.webp)}
/* pass 2 · LIGHT: while the light sweeps (~3 s now and then, only at rest) site.js gives each part a warm light band (a second,
   screen-blended background layer moved along her body) and masks it to her own foil, so the light only ever lands on gold */
/* pass 2 · OPENING: her resting coil (her artwork on a canvas, placed and masked by site.js) */
.serp canvas.coil{position:absolute;left:0;top:0;width:388px;height:900px;transform-origin:0 0;pointer-events:none}
/* pass 2 · the seven points: six quiet gold points along her route that light as her head passes (abstract: a hairline ring and a
   gold seed, no colours, no symbols); the seventh is the crown */
.serp .sp-pt{position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;border:1px solid rgba(182,154,94,.6);background:rgba(255,253,246,.7)}
.serp .sp-pt::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--gold);transform:scale(.45);opacity:.55;transition:transform 1.2s var(--ease-out),opacity 1s var(--ease),box-shadow 1.6s var(--ease)}
.serp .sp-pt.lit{border-color:rgba(148,120,63,.75)}
.serp .sp-pt.lit::after{transform:scale(1);opacity:1;box-shadow:0 0 0 3px rgba(233,215,166,.5),0 0 18px 6px rgba(233,215,166,.75)}
@media (max-width:1023px){.serp .sp-pt{width:9px;height:9px;margin:-4.5px 0 0 -4.5px}.serp .sp-pt::after{inset:2.5px}.serp .sp-pt.lit::after{box-shadow:0 0 0 2px rgba(233,215,166,.45),0 0 8px 2px rgba(233,215,166,.7)}}
/* pass 2 · ARRIVAL: the crown as a line-drawn gold sunburst in her layer (under her), around the closing band's #crown. Before she
   arrives it rests small and quiet; when her head reaches it the rays draw outwards from the opening she comes through, the ring
   settles to full size and a warm glow blooms once */
.serp .sun{position:absolute;left:0;top:0;pointer-events:none;color:var(--gold-deep)}
.sun svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(var(--rot,0)) scale(.56);transition:transform 2.2s var(--ease-out)}
.sun-rays line{stroke:currentColor;stroke-width:.6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:.62;opacity:.5;transition:stroke-dashoffset 1.5s var(--ease-out),opacity 1.2s var(--ease)}
.sun-rays line.s{stroke-width:.45}
.sun-ring{fill:rgba(255,253,246,.5);stroke:currentColor;stroke-width:.55}
.sun-ring2{fill:none;stroke:currentColor;stroke-width:.3;opacity:.45}
.sun-core{fill:var(--gold);opacity:.8}
.sun-glow{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,rgba(238,214,152,.9) 0,rgba(238,214,152,.42) 32%,rgba(238,214,152,0) 66%);opacity:0;transform:scale(.6)}
.sun.on svg{transform:rotate(var(--rot,0))}
.sun.on .sun-rays line{stroke-dashoffset:0;opacity:1;transition-delay:calc(var(--d) * .9s + .25s)}
.sun.on .sun-glow{animation:sun-bloom 3.6s var(--ease) .2s both}
@keyframes sun-bloom{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1.04)}100%{opacity:.5;transform:scale(1)}}
html.still .sun svg,html.still .sun-rays line,html.still .sun-glow{transition:none;animation:none}
html.still .sun.on .sun-glow{opacity:.5;transform:none}
/* the closing band keeps the room the sunburst needs; the small 40px mark stays on every other page */
html.serpent .final .crown{width:300px;height:300px;margin:-34px auto -12px}
html.serpent .final .crown .crown-rays{visibility:hidden}
@media (max-width:1023px){html.serpent .final .crown{width:230px;height:230px;margin:-20px auto -14px}}
html.serpent .spine-halo,html.serpent .spine-ghost,html.serpent .spine-tip,html.serpent #spineNodes{display:none}
html.serpent .spine-line{visibility:hidden}
/* pages without her (no spine partial): the hero's "Begin" cue marked where the line set off, so it goes too */
body:not([data-serpent]) :is(.hero-cue,.cue){display:none}
@media (max-width:767px){.spine-halo{display:none}}
/* ?spine-debug overlay (drawn by site.js) */
.spine-debug{position:absolute;inset:0 auto auto 0;width:100%;z-index:500;pointer-events:none;overflow:hidden}
.spine-debug .sd-text{position:absolute;outline:1px solid rgba(220,40,40,.7);background:rgba(220,40,40,.06)}
.spine-debug .sd-pt{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(200,0,200,.85);box-shadow:0 0 0 2px #fff}
.spine-debug .sd-pt::after{content:attr(data-l);position:absolute;left:18px;top:-4px;font:11px/1.6 monospace;color:#a000a0;background:rgba(255,255,255,.9);padding:0 4px;white-space:nowrap}

/* cue dot: where the serpent begins (hero) */
.cue{display:inline-flex;flex-direction:column;align-items:center;gap:10px;color:var(--gold-text);padding-left:.3em;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase}
.cue-dot{display:block;order:2;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(182,154,94,.16)}
html.motion .cue-dot{animation:pulse 3s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(182,154,94,.18)}50%{box-shadow:0 0 0 9px rgba(182,154,94,.04)}}

/* ============================================================ 8. media utilities: frames, arches, masks ============================================================ */
.frame{position:relative;overflow:hidden;background:var(--linen)}
.frame::after{content:"";position:absolute;inset:16px;border:1px solid var(--hair-ivory);pointer-events:none;z-index:2;transition:inset .8s var(--ease-out),border-color .8s}
a:hover .frame::after,.frame.tight::after{inset:11px}
.frame>img,.frame>video{width:100%;height:100%;object-fit:cover}
.frame.no-hair::after{display:none}
.arch{border-radius:999px 999px 0 0}
.arch::after{border-radius:999px 999px 0 0;inset:12px;border-color:rgba(182,154,94,.55)}
.arch>img{filter:saturate(.92) contrast(1.02)}
.r34{aspect-ratio:3/4}.r45{aspect-ratio:4/5}.r23{aspect-ratio:2/3}.r169{aspect-ratio:16/9}.r1610{aspect-ratio:16/10}.r43{aspect-ratio:4/3}.r11{aspect-ratio:1}
.scrim::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(30,25,19,.45),rgba(30,25,19,0) 42%);pointer-events:none}
.slot-video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}

/* ============================================================ 9. heroes ============================================================ */
/* 9a. homepage hero: split on desktop, nocturne-style full frame on phone */
.hero{position:relative;min-height:max(720px,100svh);background:var(--ivory)}
.hero-media{position:absolute;top:var(--bar);right:0;bottom:0;width:clamp(380px,43vw,660px);overflow:hidden;background:var(--linen);z-index:2}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 40%;background:var(--linen);transform-origin:50% 35%}
html.motion .hero-video{transform:scale(1.07);transition:transform 4s var(--ease-out)}
html.motion .hero-video.settled{transform:scale(1)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,rgba(252,250,245,.18),rgba(252,250,245,0) 24%);pointer-events:none}
.hero-frame{position:absolute;inset:18px;border:1px solid rgba(252,250,245,.55);pointer-events:none;z-index:3}
.hero-scrim{display:none}
.hero-in{min-height:inherit;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--bar) + var(--navh) + 24px);padding-bottom:40px}
.hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:calc(100% - clamp(380px,43vw,660px) - 24px)}
.hero-h{display:flex;flex-direction:column;align-items:center}
.hero-h .w{display:block}
.hero-line{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,1.6vw,24px);line-height:1.45;color:var(--ink-2);max-width:440px}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:8px}
.hero-sub{margin-top:26px;max-width:calc(100% - clamp(380px,43vw,660px) - 24px);text-align:center}
.hero-new{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;color:var(--soft);transition:color var(--t-fast)}
.hero-new span{border-bottom:1px solid rgba(107,101,92,.35);padding-bottom:1px;transition:border-color var(--t-fast)}
.hero-new:hover{color:var(--ink)}.hero-new:hover span{border-color:var(--ink)}
/* the foot: the location line first, then the Begin cue under it on the axis, where the serpent starts (markup order is cue, location) */
.hero-foot{display:flex;flex-direction:column-reverse;align-items:center;text-align:center;gap:clamp(22px,3vh,34px);margin-top:clamp(28px,5vh,56px);max-width:calc(100% - clamp(380px,43vw,660px) - 24px);font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}

/* 9b. .hero--page: the standard inner-page opening (ivory, kick + H1 + lead + CTA, optional arched portrait at >=1024) */
.hero--page{position:relative;background:var(--ivory);padding:calc(var(--bar) + var(--navh) + clamp(48px,7vh,96px)) 0 clamp(56px,8vh,96px);min-height:60svh;display:flex;align-items:center}
.hero--page.tall{min-height:70svh}
.hero--page.short{min-height:0;padding-bottom:clamp(40px,5vw,64px)}
.hero--page .hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;width:100%}
.hero--page .hero-grid.no-media{grid-template-columns:minmax(0,1fr)}
.hero--page .hero-grid.no-media>.hero-txt{margin-inline:auto}
.hero--page .hero-txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.hero--page .hero-txt .lead{max-width:30em}
/* meta row: every item after the first carries its dot in a 23px lead-in; on phone the facts stack, one per line on the axis, with no dots */
.hero--page .hero-meta{display:flex;justify-content:center;gap:4px 0;flex-wrap:wrap;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}
.hero--page .hero-meta>span{position:relative;padding-left:23px}
.hero--page .hero-meta>span:first-child{padding-left:0}
.hero--page .hero-meta>span:first-child::before{display:none}
.hero--page .hero-meta>span::before{content:"\00B7";position:absolute;left:7px;top:0;color:var(--gold-deep)}
.hero--page .hero-arch{position:relative;justify-self:end;width:min(100%,460px);aspect-ratio:3/4;overflow:hidden;background:var(--linen)}
.hero--page .hero-arch img,.hero--page .hero-arch video{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.hero--page .hero-cue,.hero-cue{display:flex;justify-content:center;margin-top:18px}

/* 9c. .hero--bleed: cinematic full-bleed opening for ceremonies, retreats, about, the retreat page */
.hero--bleed{position:relative;min-height:clamp(640px,100svh,1200px);background:var(--night);color:var(--ivory);overflow:hidden;display:flex;align-items:flex-end}
.hero--bleed .hero-media{position:absolute;inset:0;width:auto;top:0;z-index:0}
.hero--bleed .hero-video{object-position:50% 40%;background:var(--night)}
.hero--bleed .hero-media::after{background:linear-gradient(to top,rgba(30,25,19,.78),rgba(30,25,19,.28) 48%,rgba(30,25,19,.05) 75%),linear-gradient(to right,rgba(30,25,19,.42),rgba(30,25,19,0) 60%)}
.hero--bleed .hero-frame{inset:18px;border-color:rgba(252,250,245,.4)}
.hero--bleed .hero-in{padding-top:calc(var(--bar) + var(--navh) + 40px);padding-bottom:clamp(40px,6vh,72px);min-height:0;display:block}
/* the copy block keeps to one side of the frame on wide screens (she usually stands in the middle), its words centred inside it.
   .copy-center: a frame with no figure in the middle (a landscape) takes the block on the page axis, over a deeper floor veil. */
.hero--bleed .hero-copy{max-width:min(42%,560px);margin-left:auto;gap:22px}
.hero--bleed.copy-left .hero-copy{margin-left:0}
.hero--bleed.copy-center .hero-copy{margin-left:auto;margin-right:auto;max-width:min(820px,76%)}
.hero--bleed.copy-center .hero-media::after{background:linear-gradient(to top,rgba(30,25,19,.84),rgba(30,25,19,.44) 48%,rgba(30,25,19,.1) 80%)}
.hero--bleed .kick,.hero--bleed .eyebrow{color:var(--gold-pale)}
.hero--bleed .eyebrow::before,.hero--bleed .eyebrow::after{background:var(--gold-pale)}
.hero--bleed .h1{color:var(--ivory)}
.hero--bleed .h1 em{color:var(--gold-pale)}
.hero--bleed .lead,.hero--bleed .hero-line{color:rgba(252,250,245,.9)}
.hero--bleed .link-ul{color:var(--ivory)}.hero--bleed .link-ul::after{background:var(--gold-pale)}
.hero--bleed.light-nav{color:var(--ink)}
@media (min-width:1024px) and (max-width:1200px){.hero--bleed .hero-copy{max-width:560px}.hero--bleed .hero-media::after{background:linear-gradient(to top,rgba(30,25,19,.84),rgba(30,25,19,.4) 55%,rgba(30,25,19,.1) 80%)}}

/* ============================================================ 10. statement / ladder ============================================================ */
/* the lines rise as one centred stack; at >=1024 the stack is held inside the band the serpent leaves free (it runs at 21% of the
   page, the page capped at --max, so on a 1920 screen the band stays the 1440 band: 0.58 of the page less 2 x 32px of air) */
.state{padding:clamp(130px,17vw,240px) 0 clamp(120px,15vw,200px);background:var(--ivory);text-align:center}
.state .kick{margin-bottom:clamp(40px,5vw,72px)}
.ladder{display:flex;flex-direction:column;align-items:center;gap:.1em;font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.4vw,84px);line-height:1.06;letter-spacing:-.012em;color:var(--ink);text-align:center;margin-left:auto;margin-right:auto}
.ladder .ln{display:block}
.ladder .call{margin-top:.45em;max-width:18ch}
@media (min-width:1024px){.ladder{max-width:calc(min(100vw, var(--max)) * .58 - 64px)}.ladder .ln{text-wrap:balance}}
.state-after{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px;max-width:480px;margin:clamp(56px,7vw,96px) auto 0}

/* ============================================================ 11. offering tiles ============================================================ */
.offer{background:var(--silk);padding:var(--pad) 0 clamp(100px,13vw,170px)}
.offer .h2{font-size:clamp(44px,5.4vw,84px)}
.tiles{row-gap:clamp(64px,8vw,130px);align-items:start}
.tile{position:relative;display:flex;flex-direction:column;gap:24px;color:inherit}
.tile.t1{grid-column:1/6;margin-top:clamp(60px,9vw,150px)}
.tile.t2{grid-column:8/13}
.tile.t3{grid-column:3/11}
.tile-img{position:relative;display:block;overflow:hidden;background:var(--linen);aspect-ratio:3/4}
.t3 .tile-img{aspect-ratio:16/10}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform 2.2s var(--ease)}
.tile-img::after{content:"";position:absolute;inset:14px;border:1px solid rgba(252,250,245,.55);pointer-events:none;transition:border-color .8s,inset .8s var(--ease-out)}
.tile-img.arch::after{border-color:rgba(182,154,94,.55);inset:12px}
.tile:hover .tile-img img,.tile:focus-visible .tile-img img{transform:scale(1.04)}
.tile:hover .tile-img::after{inset:10px}
.tile-txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.tile-word{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,50px);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.tile-line{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text)}
.tile-txt .more{margin-top:2px}

/* ============================================================ 12. retreat / event doors ============================================================ */
.retreats{background:var(--champagne);padding:var(--pad) 0}
.retreats .h2{max-width:14ch}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px)}
.door{position:relative;display:flex;flex-direction:column;gap:28px;color:inherit}
.door:nth-child(2){margin-top:clamp(40px,7vw,120px)}
.door-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sand)}
.door-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.door-media .slot-video,.door-media>img{transition:transform 2.4s var(--ease)}
.door:hover .door-media .slot-video,.door:hover .door-media>img{transform:scale(1.035)}
.door-media::before{content:"";position:absolute;inset:16px;border:1px solid var(--hair-ivory);pointer-events:none;z-index:2;transition:inset .8s var(--ease-out)}
.door:hover .door-media::before{inset:11px}
.door-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,25,19,.45),rgba(30,25,19,0) 42%);pointer-events:none}
.door-date{position:absolute;left:36px;bottom:30px;z-index:3;font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.4vw,34px);line-height:1;color:var(--ivory);letter-spacing:.01em}
.door-date b{font-weight:300;font-style:italic;color:var(--gold-pale);margin-right:.18em}
.door-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0 4%}
.door-title{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,54px);line-height:1;letter-spacing:-.01em;color:var(--ink)}
.door-inv{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:var(--ink-2)}
.door-urg{color:var(--gold-text)}   /* AA: 10.5px caps label on champagne (gold-deep is only 3.4:1) */
.door-body .more{margin-top:2px}
.doors.ret-single{grid-template-columns:minmax(0,1fr);max-width:620px;margin-left:auto;margin-right:auto}
.doors.ret-single .door{margin-top:0}

/* ============================================================ 13. quote band ============================================================ */
.quote{position:relative;padding:clamp(130px,17vw,230px) 0;background:var(--sand);overflow:hidden}
.quote-bg{position:absolute;inset:0;overflow:hidden}
.quote-bg img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:50% 50%;filter:saturate(.85)}
.quote-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(246,242,233,.92),rgba(237,230,214,.72) 40%,rgba(246,242,233,.9))}
.quote-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:34px}
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(28px,3.5vw,50px);line-height:1.25;max-width:760px;text-wrap:balance;color:var(--ink)}
.quote blockquote::before{content:"\201C";display:block;font-style:normal;font-size:1.8em;line-height:.5;color:var(--gold);margin-bottom:.25em}
.quote cite{font-style:normal;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-umber)}
/* a centred attribution (quote bands, the featured review) carries the eyebrow's rule on each side */
.quote cite,.rev-feature figcaption,.cite-c{display:block;text-align:center}
.quote cite::before,.quote cite::after,.rev-feature figcaption::before,.rev-feature figcaption::after,.cite-c::before,.cite-c::after{content:"";display:inline-block;vertical-align:middle;position:relative;top:-.1em;width:28px;height:1px;background:var(--gold)}
.quote cite::before,.rev-feature figcaption::before,.cite-c::before{margin-right:14px}
.quote cite::after,.rev-feature figcaption::after,.cite-c::after{margin-left:calc(14px - .4em)}
.quote .rating a{color:var(--ink-2)}
.quote.plain{background:var(--silk)}
.quote.plain .quote-veil{display:none}

/* ============================================================ 14. meet anya ============================================================ */
.anya{background:var(--silk);padding:var(--pad-lg) 0}
.anya-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,8vw,140px);align-items:center}
.anya-media{position:relative;padding-right:22%;padding-bottom:16%}
.anya-fig{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--linen)}
.anya-fig img{width:100%;height:112%;object-fit:cover;object-position:50% 18%;margin-top:-6%}
.anya-fig2{position:absolute;right:0;bottom:0;width:44%;aspect-ratio:3/4;overflow:hidden;background:var(--linen);box-shadow:var(--shadow-card);border:6px solid var(--silk)}
.anya-fig2 img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.anya-txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.anya-h{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:6px}
.anya-h .big,.big-name{font-family:var(--serif);font-weight:300;font-size:clamp(76px,9.6vw,140px);line-height:.85;letter-spacing:-.025em;color:var(--ink)}
.anya .lead.it{margin-top:-4px}
.anya .more{margin-top:2px}

/* ============================================================ 15. reviews ============================================================ */
.voices{background:var(--champagne);padding:var(--pad-lg) 0}
.voices-grid{row-gap:clamp(64px,8vw,120px)}
.voices-head{grid-column:1/6;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;align-self:center}
.rating{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--ink-2);margin-top:4px;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.rating .stars{color:var(--gold-deep);letter-spacing:.2em;font-size:13px}
.rating a{color:var(--gold-text);display:inline-flex;min-height:44px;align-items:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(110,90,48,.4)}   /* the underline sits on the words, not at the foot of the 44px tap box */
.rev-feature{grid-column:7/13;display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;align-self:center}
.rev-feature blockquote{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(28px,3vw,44px);line-height:1.22;color:var(--ink)}
.rev-feature blockquote::before{content:"\201C";display:block;font-size:1.9em;line-height:.5;color:var(--gold);margin-bottom:.22em;font-style:normal}
.rev figcaption,.rev-feature figcaption,.rev cite{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-text);font-style:normal;display:block}
.rev{display:flex;flex-direction:column;gap:20px;padding-left:28px;border-left:1px solid var(--hair-strong);break-inside:avoid;text-align:left}
.rev figcaption,.rev cite{display:flex;align-items:center;gap:14px}
.rev figcaption::before,.rev cite::before{content:"";flex:none;width:28px;height:1px;background:var(--gold)}
.rev.r1{grid-column:1/6}
.rev.r2{grid-column:8/13}
.rev blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.5vw,23px);line-height:1.5;color:var(--ink-2)}
/* inner-page quotes: a row or column of hairline reviews */
.quotes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.rev-masonry{columns:2;column-gap:clamp(32px,4vw,64px)}
.rev-masonry .rev{margin-bottom:clamp(40px,5vw,64px)}

/* ============================================================ 16. guide CTA (object + seal + $11.11) ============================================================ */
.guide{background:var(--silk);padding:var(--pad-lg) 0;overflow:hidden}
.guide-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,8vw,140px);align-items:center}
.guide-fig{position:relative;aspect-ratio:4/5;overflow:visible;background:var(--linen);max-width:560px}
.guide-fig>img:first-child{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.85)}
.guide-fig::after{content:"";position:absolute;inset:16px;border:1px solid var(--hair-ivory);pointer-events:none}
.guide-card{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:5/7;transform:translate(-50%,-50%) rotate(-2deg);background:var(--light);outline:1px solid var(--hair-strong);outline-offset:-9px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:13% 5%;z-index:3}
/* the kick is set as two lines ("Radiant Flo" / "Free Guide", partials/guide-fig.html); a one-line kick still works */
.guide-card .kick{font-size:8.5px;letter-spacing:.28em;line-height:1.9}
.guide-card .kick>span{display:block;white-space:nowrap}
.guide-card .gc-mark{width:22%;color:var(--gold-deep)}
.guide-card .gc-title{font-family:var(--serif);font-weight:300;font-size:clamp(18px,1.9vw,30px);line-height:1.05;color:var(--ink);text-wrap:balance}
.guide-card .gc-title em{font-style:italic;color:var(--gold-deep)}
@media (max-width:1263px){.guide-card .gc-title em{color:var(--gold-text)}}
.seal{position:absolute;right:-6%;bottom:-6%;width:148px;height:148px;border-radius:50%;background:var(--champagne);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:4;box-shadow:0 0 0 1px var(--hair-strong),0 0 0 6px var(--champagne),0 0 0 7px var(--hair-strong)}
.seal .seal-n{font-family:var(--serif);font-weight:300;font-size:36px;line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.seal .seal-l{font-family:var(--sans);font-weight:400;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-text);margin-top:8px;line-height:1.5}
.guide-txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.guide-txt .body{max-width:30em;text-wrap:balance}
.guide-cta{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:8px}
.price{display:flex;flex-direction:column;align-items:center;line-height:1}
.price-n{font-family:var(--serif);font-weight:300;font-size:40px;color:var(--gold-deep);letter-spacing:-.01em;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.price-l{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);margin-top:6px}

/* ============================================================ 17. closing band (the crown) ============================================================ */
.final{position:relative;background:var(--light);background-image:radial-gradient(ellipse 60% 70% at 72% 45%,rgba(233,215,166,.55),rgba(255,253,246,0) 70%);overflow:hidden}
.final-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:max(720px,100svh)}
.final-media{position:relative;overflow:hidden;background:var(--champagne)}
.final-img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;object-position:38% 32%}
.final-txt{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:26px;padding:clamp(90px,11vw,160px) clamp(28px,7vw,120px)}
.crown{position:relative;display:block;width:40px;height:40px;margin:0 auto 10px;color:var(--gold-deep)}
.crown-rays{width:100%;height:100%;transform:scale(.4) rotate(-30deg);opacity:0;transition:transform 1.6s var(--ease-out),opacity 1.2s var(--ease)}
.crown.on .crown-rays,html.still .crown-rays,html.no-spine .crown-rays{transform:none;opacity:1}
html.motion .crown.on .crown-rays{animation:rays 14s linear infinite 1.6s}
@keyframes rays{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.final-h{font-family:var(--serif);font-weight:300;font-size:clamp(58px,7.2vw,116px);line-height:.92;letter-spacing:-.018em;color:var(--ink)}
.final-h.final-h-long{font-size:clamp(40px,4.6vw,76px);line-height:1}
.final .lead{max-width:440px}
.final .body{max-width:34em}
.final-cta{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;margin-top:8px}
.final.no-media .final-grid{grid-template-columns:minmax(0,1fr);min-height:0}
.final.no-media .final-txt{align-items:center;text-align:center;padding:clamp(110px,14vw,200px) var(--gutter)}
.final.no-media .final-cta{justify-content:center}

/* ============================================================ 18. footer ============================================================ */
.foot{position:relative;z-index:2;background:var(--ivory);color:var(--ink);padding:clamp(72px,9vw,120px) 0 48px;border-top:1px solid var(--hair)}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:36px;text-align:center}
.foot-brand{display:flex;flex-direction:column;gap:16px;align-items:center}
.foot-brand img{width:56px;height:56px}
.foot-brand span{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.3em;text-transform:uppercase}
.foot-brand p{font-size:15px;line-height:1.7;color:var(--soft);max-width:38ch;text-wrap:balance}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 32px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);transition:color var(--t-fast)}
.foot-nav a:hover{color:var(--gold-ink)}
.foot-small{grid-column:1/-1;justify-self:stretch;display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;padding-top:24px;border-top:1px solid var(--rule-ink);font-size:13px;color:var(--soft)}
.foot-small a{display:inline-flex;align-items:center;min-height:44px}
.foot-small a:hover{color:var(--gold-ink)}
/* her sign-off (the closing line of every original footer) */
.foot-brand .foot-sign{font-family:var(--serif);font-style:italic;font-weight:300;font-size:21px;max-width:none;line-height:1.4;color:var(--ink-2);margin-top:6px}
.foot-copy{grid-column:1/-1;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft)}

/* ============================================================ 19. NEW components ============================================================ */
/* 19a. forms + booking embed wrapper */
.embed{position:relative;z-index:2;background:var(--ivory);border:1px solid var(--hair);padding:clamp(20px,3vw,40px)}
.embed iframe{width:100%;border:0;display:block;background:var(--ivory);border-radius:0!important}   /* GHL embeds bring an inline 8px radius */
.embed .embed-note{margin-top:16px;font-size:13px;color:var(--soft)}
.bg-ivory .embed{background:var(--light)}

/* 19b. FAQ */
.faq{border-top:1px solid var(--hair);text-align:left}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:44px;padding:20px 0;font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3;color:var(--ink);transition:color var(--t-fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/14px 1px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) center/1px 14px no-repeat;transition:transform .45s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-body{padding:0 0 22px;max-width:var(--measure)}
.faq .faq-body p{font-size:17px;line-height:1.8;color:var(--ink-2)}
.faq .faq-body p+p{margin-top:1em}
.faq .faq-body .pull{text-align:left;margin:22px 0 6px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,2vw,28px);line-height:1.3;color:var(--gold-deep)}
.faq .faq-body a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong)}

/* 19c. article / journal body */
.prose{position:relative;z-index:2;max-width:680px;margin:0 auto;padding:0 var(--gutter);font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.65;color:var(--ink-2)}
.prose>*+*{margin-top:1.2em}
.prose p{text-wrap:pretty}
.prose .lead{font-size:clamp(23px,2vw,28px);line-height:1.45;color:var(--ink)}
.prose h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.012em;color:var(--ink);margin-top:2.2em}
.prose h2 em{font-style:italic;color:var(--gold-deep)}
.prose h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;color:var(--ink);margin-top:1.8em}
.prose .kick+h2,.prose .kick+h3{margin-top:14px}
.prose>:is(h2,h3,.kick),.prose-txt>:is(h2,h3,.kick){text-align:center}
.prose a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong);transition:color var(--t-fast),border-color var(--t-fast)}
.prose a:hover{color:var(--ink);border-color:var(--ink)}
.prose strong{font-weight:500;color:var(--ink)}
.prose ul,.prose ol{padding-left:0}
.prose li{position:relative;padding-left:28px}
.prose li+li{margin-top:.5em}
.prose ul li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--gold)}
.prose ol{counter-reset:li}
.prose ol li::before{counter-increment:li;content:counter(li,upper-roman);position:absolute;left:0;top:.1em;font-style:italic;font-size:15px;color:var(--gold-text);letter-spacing:.1em}
.prose blockquote,.prose .callout{font-style:italic;font-weight:300;font-size:clamp(26px,2.4vw,30px);line-height:1.3;color:var(--ink);text-align:center;text-wrap:balance;max-width:30em;margin:1.6em auto}
/* set-apart lines (callouts, pull quotes) carry a short centred gold rule above instead of a side rule */
.prose blockquote::before,.prose .callout::before,.prose .pull::before,.prose-txt .callout::before,.prose-txt .pull::before{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:0 auto 18px}
.prose .pull{font-style:italic;font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.25;color:var(--gold-deep);text-align:center;margin:2em auto;max-width:560px;text-wrap:balance}
.prose figure{margin:2em 0}
.prose figure img{width:100%}
.prose figcaption{font-family:var(--sans);font-weight:300;font-size:13px;color:var(--soft);margin-top:12px;text-align:center}
.prose .sans{font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.8}
.prose .dropcap:not(.lead)::first-letter,.prose-txt .dropcap:not(.lead)::first-letter{font-size:6.1em;line-height:.72;margin:.06em .08em 0 -.02em}
.prose .signoff{font-style:italic;font-weight:300;font-size:clamp(22px,2vw,26px);color:var(--ink);margin-top:2.4em;text-align:center}
.author{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:14px;align-items:center;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:30px 0;margin-top:3em}
.author img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 30%}
.author .author-name{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;color:var(--ink);margin-top:4px}
.author p{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.7;color:var(--soft);margin-top:6px;max-width:34em;text-wrap:balance}
.prose-sec{position:relative;padding:clamp(56px,7vw,96px) 0}
.prose-sec.alt{background:var(--silk)}

/* 19d. editorial spread: image 6 cols + text 5 cols, flipping sides */
.ed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--cg);align-items:center;row-gap:40px}
.ed .ed-media{grid-column:1/7;grid-row:1}
.ed .ed-txt{grid-column:8/13;grid-row:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.ed.flip .ed-media{grid-column:7/13;grid-row:1}
.ed.flip .ed-txt{grid-column:1/6;grid-row:1}
.ed .ed-txt .body,.ed .ed-txt p{max-width:34em}
.ed .ed-txt .h3{font-size:clamp(34px,3.6vw,52px);line-height:1.02}
.ed .ed-media .frame{aspect-ratio:4/5}

/* 19e. offer / price cards */
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,32px);align-items:stretch;justify-content:center}
.offers.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.offers.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.offers.stagger>:nth-child(n+4){margin-top:48px}
.offer-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;background:var(--ivory);border:1px solid var(--hair);padding:32px;color:inherit}
.bg-ivory .offer-card{background:var(--light)}
.offer-card .h3{font-size:clamp(26px,2.4vw,34px);line-height:1.05}
.offer-card .oc-num{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15px;color:var(--gold-text);letter-spacing:.1em}
.offer-card p{font-size:16px;line-height:1.75;color:var(--ink-2)}
.offer-card .price{margin-top:auto;padding-top:14px;flex-direction:row;align-items:baseline;justify-content:center;gap:12px}
.offer-card .price-n{font-size:40px}
.offer-card .price-l{margin-top:0}
.offer-card .dates{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink-2);width:100%;text-align:left}
.offer-card .dates span{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--rule-ink)}
.offer-card .oc-actions{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;margin-top:4px}
.offer-card .oc-actions .btn{width:100%}
.offer-card .oc-note{font-family:var(--serif);font-style:italic;font-weight:300;font-size:17px;line-height:1.45;color:var(--gold-text)}
.offer-card .oc-note a{color:inherit;border-bottom:1px solid var(--hair-strong)}
.offer-card.feature{grid-column:span 2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center}
.offer-card.feature .frame{aspect-ratio:3/4}
.offer-card.feature .oc-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}

/* 19f. numbered in-page index */
.index{position:relative;z-index:2;border-top:1px solid var(--hair)}
.index summary{display:none}
.index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--cg)}
.index.one-col ol{grid-template-columns:minmax(0,1fr)}
.index li{border-bottom:1px solid var(--hair)}
.index a{display:flex;align-items:center;gap:22px;min-height:52px;padding:10px 0;font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.2;color:var(--ink);transition:color var(--t-fast)}
.index a i{font-style:italic;font-weight:400;font-size:14px;color:var(--gold-text);letter-spacing:.1em;min-width:34px}
.index a:hover{color:var(--gold-ink)}
.index-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 var(--cg)}

/* 19g. step lists: four roman-numeral columns at >=1024, stacked on phone */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);border-top:1px solid var(--hair);padding-top:28px}
.steps li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.steps .num{font-size:15px}
.steps h3,.steps .h4{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.8vw,26px);line-height:1.2;color:var(--ink)}
.steps p{font-size:16px;line-height:1.75;color:var(--ink-2);text-align:left;align-self:stretch}   /* step words are reading: left, under a centred numeral and heading */
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* 19h. two hairline columns ("Come if / Please wait if", "Your body / Your heart") */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
.cols>div{border-top:1px solid var(--hair);padding-top:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.cols h3,.cols .h4{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.8vw,26px);line-height:1.2;color:var(--ink)}
.cols ul{display:flex;flex-direction:column;gap:10px;max-width:100%;text-align:left}
.cols li{position:relative;padding-left:24px;font-size:16px;line-height:1.7;color:var(--ink-2)}
.cols li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--gold)}
.cols.stack-col{grid-template-columns:minmax(0,1fr);gap:28px}

/* 19i. "feel" list: italic serif words with gold dots */
.feel{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.4vw,30px);line-height:1.6;color:var(--ink);max-width:28em;text-wrap:balance;text-align:center;margin-left:auto;margin-right:auto}
.feel .it{white-space:nowrap}
.feel .dot{color:var(--gold);font-style:normal;font-size:.5em;vertical-align:middle;margin:0 .45em}

/* 19j. small hairline cards ("Also on Radiant Flo", "Begin here") */
.also{--also-gap:clamp(28px,4vw,56px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--also-gap)}
.also>*{flex:0 1 calc((100% - 2 * var(--also-gap)) / 3);min-width:0}
.also.two>*{flex-basis:calc((100% - var(--also-gap)) / 2)}
.also-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;border-top:1px solid var(--gold);padding-top:22px;color:inherit}
.also-card .h4{font-size:clamp(22px,1.9vw,28px)}
.also-card p{font-size:16px;line-height:1.7;color:var(--ink-2)}
.also-card .more{margin-top:4px}

/* 19k. credentials hairline list */
.creds{border-top:1px solid var(--hair)}
.creds li{display:flex;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid var(--hair);font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.6vw,24px);color:var(--ink)}
.creds li .num{min-width:28px}

/* 19l. sticky phone bar (graft 11) */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:105;display:none;align-items:center;justify-content:space-between;gap:16px;height:calc(56px + env(safe-area-inset-bottom,0px));padding:0 20px env(safe-area-inset-bottom,0px);background:rgba(252,250,245,.88);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-top:1px solid var(--hair);transform:translateY(100%);transition:transform .5s var(--ease-out)}
.stick .btn{min-height:44px;padding:0 24px;font-size:11.5px}
.stick .link-ul{font-size:11.5px}
.stick.show{transform:none}
@media (max-width:767px){html.js .stick:not([hidden]){display:flex}}
html.still .stick{display:none!important}

/* 19m. guide popup (/js/guide-popup.js injects .rfp markup + its own CSS after this file; these out-specify it) */
html .rfp-box{background:var(--ivory);border:1px solid var(--hair-strong);box-shadow:var(--shadow-card);border-radius:0}
html .rfp.s .rfp-box{max-width:860px}
html .rfp-panel{background:var(--champagne)}
html .rfp-sl{font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.34em;color:var(--gold-text)}
html .rfp.s .rfp-body h2,html .rfp-body h2{font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.01em;font-size:clamp(34px,3vw,44px);line-height:.98;color:var(--ink)}
html .rfp.s .rfp-body h2 em,html .rfp-body h2 em{display:block;font-style:italic;font-size:.74em;letter-spacing:0;text-transform:none;color:var(--gold-deep);margin-top:.12em}
html .rfp-body p,html .rfp.s .rfp-body p{font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;color:var(--ink-2)}
html .rfp-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 34px;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;background:var(--gold-ink);color:var(--ivory);transition:background var(--t-ui) var(--ease)}
html .rfp-cta:hover{background:var(--ink);color:var(--ivory)}
html .rfp-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--gold-text);padding:0}
html .rfp.s .rfp-x{background:transparent}
html .rfp-no{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--soft);min-height:44px}
html .rfp-bg{background:rgba(30,25,19,.5)}
@media (max-width:767px){html .rfp.s .rfp-body{background:var(--champagne)}}

/* 19n. generic chapter head inside bands */
.chapter-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.chapter-head .h3{font-size:clamp(34px,3.6vw,52px);line-height:1.02}

/* ============================================================ 20. motion layer ============================================================ */
/* Entrances start hidden only when site.js is running in motion mode (html.motion.js). No JS, or a JS error (html.no-js), shows everything. */
html.motion.js .rv{opacity:0;transform:translateY(26px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
html.motion.js .rv.in,html.motion.js.no-js .rv{opacity:1;transform:none}
html.motion.js .mask{clip-path:inset(0 0 100% 0);transition:clip-path var(--t-mask) var(--ease-out)}
html.motion.js .mask img,html.motion.js .mask video{transform:scale(1.12);transition:transform var(--t-settle) var(--ease-out)}
html.motion.js .mask.in,html.motion.js.no-js .mask{clip-path:inset(0 0 0 0)}
html.motion.js .mask.in img,html.motion.js .mask.in video,html.motion.js.no-js .mask img,html.motion.js.no-js .mask video{transform:none}
html.motion.js .tile:hover .mask.in img{transform:scale(1.04)}
html.motion.js .door:hover .mask.in video,html.motion.js .door:hover .mask.in img{transform:scale(1.035)}
html.motion.js .anya-fig2.mask,html.motion.js .anya-fig2.mask img{transition-delay:.35s}
html.motion.js .final-media.mask{clip-path:inset(8% 8% 8% 8%)}
html.motion.js .final-media.mask.in{clip-path:inset(0)}
html.motion.js .mask.open-center{clip-path:inset(8%)}
html.motion.js .mask.open-center.in{clip-path:inset(0)}
.par img,.par-img{will-change:transform}
/* slot videos sit over their poster <img>; they fade in once they are actually playing (the hero never fades: its poster is the clip's first frame) */
html.motion .slot-video{opacity:0;transition:opacity 1.6s var(--ease),transform var(--t-settle) var(--ease-out)}
html.motion .slot-video.playing,html.still .slot-video{opacity:1}
html.motion.js .mask .slot-video{transition:opacity 1.6s var(--ease),transform var(--t-settle) var(--ease-out)}
html.motion.js .mask.in .slot-video{transform:none}
html.motion.js .door:hover .mask.in .slot-video{transform:scale(1.035)}
.gap-mark{position:absolute;width:1px;height:1px;pointer-events:none}
/* home retreats band: the serpent's two points run between the two doors; once the Shasta door has ended (one centred door,
   .ret-single) they move beside the door, so her route never crosses its words */
#portalsA{left:50%;top:42%}
#portalsB{left:50%;top:80%}
#portals:has(.doors.ret-single) :is(#portalsA,#portalsB){left:calc(50% + 420px)}
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 800px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ab-mq{display:block;width:100%;line-height:var(--bar);animation:none;text-align:center;overflow:hidden;text-overflow:ellipsis;padding:0 24px}
  .ab-mq>span+span{display:none}
  .par img,.par-img{will-change:auto;transform:none!important}
}
html.still *,html.still *::before,html.still *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* .coda · her legacy footer columns (Navigate / Sessions / Connect) where an original page carries them: one quiet tier joined to the
   shared footer (event pages, the library guide pages, contact). The footer's own brand sentence would repeat the coda lede, so it steps back. */
.coda{position:relative;z-index:2;background:var(--ivory);border-top:1px solid var(--hair);padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,64px)}
.coda-in{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2.3fr));gap:40px var(--cg);align-items:start}
.coda-lede{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.coda-lede .kick{text-wrap:balance}
.coda-lede .lead{font-size:clamp(20px,1.6vw,23px);max-width:22em}
.coda-col{display:flex;flex-direction:column;align-items:center;text-align:center;border-top:1px solid var(--hair);padding-top:16px}
.coda-col h2{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;letter-spacing:.04em;color:var(--gold-text);margin-bottom:6px}
.coda-col a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:1.4;color:var(--ink-2);transition:color var(--t-fast)}
.coda-col a:hover{color:var(--gold-ink)}
.coda + .foot{border-top:0;padding-top:clamp(40px,5vw,64px)}
@media (max-width:1023px){.coda-in{grid-template-columns:repeat(3,minmax(0,1fr))}.coda-lede{grid-column:1/-1}}
@media (max-width:767px){
  .coda-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  /* lede + three columns: the third column would sit alone in the left half, so it takes the axis at one column's width */
  .coda-col:last-child:nth-child(even){grid-column:1/-1;justify-self:center;width:calc((100% - 20px) / 2)}
}
.coda + .foot .foot-brand>p:not(.foot-sign){display:none}

/* ============================================================ 21. tablet ============================================================ */
@media (max-width:1180px){
  .nl{gap:20px}.nl a{letter-spacing:.2em;font-size:10.5px}.nl .book{padding:11px 16px}
}
/* tablet portrait (up to 1199 wide): the closing band is capped, so its portrait is not a 1366px-tall crop of a face */
@media (max-width:1199px){.final-grid{min-height:clamp(640px,100svh,900px)}}
@media (max-width:1023px){
  .nl{display:none}.burger{display:flex}
  .hero-media{width:44vw}
  .hero-copy,.hero-foot,.hero-sub{max-width:calc(100% - 44vw - 16px)}
  .h1{font-size:clamp(56px,8vw,96px)}
  .sec-head-offset{margin-left:0}
  .tile.t1{grid-column:1/7}.tile.t2{grid-column:8/13}.tile.t3{grid-column:3/11}
  .anya-grid{grid-template-columns:1fr;gap:56px}
  .anya-media{max-width:620px;width:100%;margin-left:auto;margin-right:auto}
  .voices-head{grid-column:1/-1}.rev-feature{grid-column:1/-1;max-width:820px;margin-left:auto;margin-right:auto}
  .rev.r1{grid-column:1/7}.rev.r2{grid-column:7/13}
  .guide-grid{grid-template-columns:1fr;gap:56px}
  .guide-fig{max-width:520px;margin-left:auto;margin-right:auto}
  .foot-in{grid-template-columns:1fr;gap:32px}
  .final-cta .link-ul,.cta-row .link-ul{white-space:normal;line-height:1.6;padding:8px 0;text-wrap:balance}
  .final-cta .link-ul::after,.cta-row .link-ul::after{bottom:4px}
  .hero--page .hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  /* the page-hero portrait stays on tablet and phone: a 4:5 arch centred under the copy (add .d-only to hide it below 1024) */
  .hero--page .hero-arch{justify-self:center;width:min(80%,440px);aspect-ratio:4/5}
  .hero--page .hero-arch.d-only{display:none}
  /* the Begin cue stays on the axis under the copy: the serpent starts at its dot and turns onto the 12px rail at the top of the
     next section (site.js, rail mode), so the cue never has to sit at the screen edge */
  .hero--bleed .hero-copy,.hero--bleed.copy-left .hero-copy{max-width:min(86%,620px);margin-left:auto;margin-right:auto}
  .hero--bleed .hero-media::after{background:linear-gradient(to top,rgba(30,25,19,.84),rgba(30,25,19,.42) 50%,rgba(30,25,19,.08) 80%)}
  .ed .ed-media,.ed.flip .ed-media{grid-column:1/-1;grid-row:auto;max-width:620px;width:100%;justify-self:center}
  .ed .ed-txt,.ed.flip .ed-txt{grid-column:1/-1;grid-row:auto}
  .offers,.offers.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .offers.stagger>:nth-child(n+4){margin-top:0}
  .offer-card.feature{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes-grid{grid-template-columns:minmax(0,1fr);max-width:720px}
  .also>*{flex-basis:calc((100% - var(--also-gap)) / 2)}
  .quotes-grid{margin-left:auto;margin-right:auto}
  /* the closing band stacks below 1024 (two ~300px halves cramped the words): the photo above as a landscape-ish crop */
  .final-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .final-media{aspect-ratio:4/3}
  .final-img{object-position:40% 28%}
  .final-txt{padding:88px var(--gutter) 110px}
  .final .lead{max-width:30em}
}

/* tablet (768-1023): a long CTA label wraps instead of running off the edge */
@media (min-width:768px) and (max-width:1023px){
  .final-cta{min-width:0;max-width:100%}
  .final-cta .btn{white-space:normal;line-height:1.6;padding:12px 28px;text-wrap:balance;max-width:100%;text-align:center}
  .final-cta .link-ul{max-width:100%}
}

/* ============================================================ 22. phone ============================================================ */
@media (max-width:767px){
  body{font-size:16px;padding-bottom:0}
  .nav.solid{height:60px}
  .brand img{width:34px;height:34px}.brand span{font-size:18px;letter-spacing:.22em}
  .announce-bar a{font-size:10.5px;letter-spacing:.24em}
  .btn{min-height:54px;padding:0 28px;letter-spacing:.26em;font-size:11px}
  .h2{font-size:clamp(40px,11.5vw,52px)}
  .h2.h2-md{font-size:clamp(36px,10vw,44px)}
  .h3{font-size:clamp(30px,8.5vw,36px)}
  .body{font-size:16px}
  .lead{font-size:20px}
  .small{font-size:13px}
  .sec-head-offset{margin-left:0}
  /* phone CTA groups: the primary button fills the column, its companion text link sits centred under it with the short
     centred stroke every centred text link carries (the same mark as .more) */
  .cta-row .btn,.hero-cta .btn,.final-cta .btn,.guide-cta .btn{width:100%}
  .cta-row,.hero-cta,.final-cta,.guide-cta{align-self:stretch;flex-direction:column;align-items:stretch;gap:14px}
  :is(.cta-row,.hero-cta,.final-cta,.guide-cta)>.link-ul{align-self:center;justify-content:center;text-align:center;padding-left:.3em}
  :is(.cta-row,.hero-cta,.final-cta,.guide-cta)>.link-ul::after{left:50%;right:auto;width:var(--stroke);margin-left:calc(var(--stroke) / -2)}
  .is-left :is(.cta-row,.hero-cta,.final-cta,.guide-cta)>.link-ul{align-self:flex-start}
  .is-left :is(.cta-row,.hero-cta,.final-cta,.guide-cta)>.link-ul::after{left:0;margin-left:0}
  .link-ul{white-space:normal;line-height:1.6;text-wrap:balance}
  /* a standalone link on its own centred line may wrap on a phone: it takes the short centred stroke, so the mark never runs across a broken label */
  p:has(>.link-ul:only-child)>.link-ul{justify-content:center;text-align:center;padding:8px 0 12px .3em}
  p:has(>.link-ul:only-child)>.link-ul::after{left:50%;right:auto;width:var(--stroke);margin-left:calc(var(--stroke) / -2);bottom:4px}
  .is-left p:has(>.link-ul:only-child)>.link-ul::after{left:0;margin-left:0}
  /* the rating line: one centred line, its link inline (the 44px box comes from padding) */
  .rating{display:block;text-align:center;white-space:nowrap}
  .rating a{display:inline;min-height:0;padding:12px 0}
  /* two phrases joined by a separator (.ph · .sep): on phone the phrases stack and the separator steps out, so no line ends on a dot */
  .ph-pair>.ph{display:block}
  .ph-pair>.sep{display:none}
  .eyebrow{letter-spacing:.36em}
  .eyebrow::before,.eyebrow::after{width:22px}
  .eyebrow::before{margin-right:12px}
  .eyebrow::after{margin-left:calc(12px - .36em)}

  /* homepage hero: one 100svh frame, the 9:16 clip filling the screen, copy over the lower third (graft 1) */
  .hero{min-height:0;display:flex;flex-direction:column;background:var(--ivory)}
  .hero-media{position:absolute;top:0;left:0;right:0;bottom:auto;width:100%;height:min(100svh,900px);background:var(--night)}
  .hero-media::after{background:none}
  .hero-video{object-position:46% 42%;background-position:46% 42%}
  .hero-scrim{display:block;position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(30,25,19,.78),rgba(30,25,19,.3) 46%,rgba(30,25,19,0) 68%);pointer-events:none}
  .hero-frame{inset:14px;border-color:rgba(252,250,245,.35)}
  .hero-in{display:contents}
  .hero-copy{position:relative;z-index:3;min-height:min(100svh,900px);justify-content:flex-end;padding:0 var(--gutter) 28px;max-width:none;gap:16px;color:var(--ivory)}
  .hero-copy .eyebrow{color:var(--gold-pale);font-size:11px}
  .hero-copy .eyebrow::before,.hero-copy .eyebrow::after{background:var(--gold-pale)}
  .hero-copy .h1{color:var(--ivory);font-size:clamp(54px,16vw,70px)}
  .hero-copy .h1 .it,.hero-copy .h1 em{color:var(--gold-pale)}
  .hero-line{font-size:18px;max-width:330px;color:rgba(252,250,245,.9)}
  .hero-cta{width:100%;margin-top:4px}
  .hero-cta .link-ul{color:var(--ivory);min-height:44px}
  .hero-cta .link-ul::after{background:var(--gold-pale)}
  .hero-sub{position:relative;z-index:2;max-width:none;padding:22px var(--gutter) 0;margin-top:0}
  .hero-foot{position:relative;z-index:2;max-width:none;margin-top:14px;padding:0 var(--gutter) 28px;gap:22px;font-size:10.5px;letter-spacing:.24em}
  .hero-loc{line-height:1.6;max-width:22em}

  .hero--page{padding-top:calc(var(--bar) + var(--navh) + 36px);padding-bottom:48px;min-height:0}
  .hero--page .hero-txt{gap:20px}
  .hero--page .hero-txt .lead{font-size:18px;line-height:1.5;text-wrap:balance}
  .hero--page .hero-meta{flex-direction:column;align-items:center;gap:2px}
  .hero--page .hero-meta>span{padding-left:0}
  .hero--page .hero-meta>span::before{display:none}
  .hero--page .hero-grid{gap:36px}
  .hero--page .hero-arch{width:86%;max-width:none;justify-self:center}
  .hero--page .h1{font-size:clamp(50px,14.5vw,62px)}
  .hero--page .h1.h1-long{font-size:clamp(40px,10.5vw,48px)}
  .hero--bleed{min-height:min(100svh,900px)}
  .hero--bleed .hero-copy{max-width:none;min-height:0;padding:0}
  .hero--bleed .hero-in{display:block}

  .state{padding:110px 0 100px}
  .state .kick{margin-bottom:36px}
  .ladder{font-size:clamp(34px,9.6vw,42px);line-height:1.1;gap:.14em}
  .ladder .call{max-width:14ch}
  .state-after{margin-top:48px;gap:28px}
  .state-after .btn{width:100%}

  .offer{padding:96px 0}
  .tiles{row-gap:64px}
  .tile.t1,.tile.t2,.tile.t3{grid-column:1/-1;margin-top:0}
  .tile.t2{width:86%;margin-left:auto;margin-right:auto}
  .t3 .tile-img{aspect-ratio:4/3}
  .tile-word{font-size:36px}

  .retreats{padding:96px 0}
  .retreats .h2{max-width:none}
  .doors{grid-template-columns:1fr;gap:64px}
  .door:nth-child(2){margin-top:0}
  .door-date{left:30px;bottom:26px}
  .door-body{padding-right:0}

  .quote{padding:110px 0}
  .quote blockquote{font-size:30px}
  .anya{padding:96px 0}
  .anya-media{padding-right:16%;padding-bottom:18%}
  .anya-fig2{width:48%}
  .anya-h .big,.big-name{font-size:clamp(76px,24vw,100px)}
  .voices{padding:96px 0}
  .voices-grid{row-gap:52px}
  .rev.r1,.rev.r2{grid-column:1/-1}
  .rev{padding-left:22px}
  .rev.r2{display:none}
  .rev-feature blockquote{font-size:28px}
  .rev-masonry{columns:1}
  .guide{padding:96px 0}
  .guide-fig{width:82%;max-width:none;margin-left:auto;margin-right:auto}
  .seal{width:118px;height:118px;right:-10%;bottom:-8%}
  .guide-card .kick{font-size:7.5px;letter-spacing:.24em}
  .seal .seal-n{font-size:30px}
  .guide-cta{gap:22px;width:100%}
  .final-grid{grid-template-columns:1fr;min-height:0}
  .final-media{aspect-ratio:4/5}
  .final-img{object-position:40% 28%}
  .final-txt{padding:76px var(--gutter) 100px}
  .final-h{font-size:clamp(58px,17vw,74px)}
  .final-h.final-h-long{font-size:clamp(36px,10vw,44px)}
  .final.no-media .final-txt{padding:96px var(--gutter)}
  .foot{padding-bottom:88px}
  .foot-small{gap:0 20px;font-size:13px}

  .embed{padding:16px}
  .prose{font-size:19px}
  .prose .lead{font-size:23px}
  .prose h2{font-size:clamp(32px,9vw,40px)}
  .prose blockquote,.prose .callout{font-size:24px}
  .prose .pull{font-size:28px}
  .ed{row-gap:28px}
  .ed .ed-media,.ed.flip .ed-media{max-width:none;width:86%;margin-left:auto;margin-right:auto}
  .ed .ed-txt .h3{font-size:clamp(32px,9vw,40px)}
  .offers,.offers.two,.offers.four{grid-template-columns:minmax(0,1fr);gap:20px}
  .offer-card{padding:26px 22px}
  .offer-card.feature{grid-template-columns:minmax(0,1fr);gap:22px}
  .steps,.steps.three,.steps.two{grid-template-columns:minmax(0,1fr);gap:28px}
  .cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .also,.also.two{--also-gap:28px}
  .also>*,.also.two>*{flex-basis:100%}
  .quotes-grid{gap:36px}
  .faq summary{font-size:20px;padding:16px 0}
  /* index collapses into a "Contents" disclosure */
  .index summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;list-style:none;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-text)}
  .index summary::-webkit-details-marker{display:none}
  .index summary::after{content:"";width:12px;height:12px;background:linear-gradient(var(--gold-deep),var(--gold-deep)) center/12px 1px no-repeat,linear-gradient(var(--gold-deep),var(--gold-deep)) center/1px 12px no-repeat;transition:transform .45s var(--ease-out)}
  .index[open] summary::after{transform:rotate(45deg)}
  .index ol{grid-template-columns:minmax(0,1fr)}
  .index li:first-child{border-top:1px solid var(--hair)}
  .index a{font-size:20px;min-height:48px}
  .index li:last-child{border-bottom:0}
  .feel{font-size:22px}
}
@media (max-width:374px){.rating{font-size:11px;letter-spacing:.1em}.rating .stars{font-size:12px;letter-spacing:.12em}}
@media (max-width:400px){
  .hero-copy .h1{font-size:clamp(48px,15vw,58px)}
  .mm-links a{font-size:30px}
  .btn{padding:0 20px;letter-spacing:.22em}
}

/* ============================================================ 23. late additions ============================================================ */
/* .g.stack-m: a 12-column grid whose children (with inline grid-column spans) all go full width under 768px */
@media (max-width:767px){.g.stack-m>*{grid-column:1/-1!important}}
.embed{overflow-wrap:anywhere}
.index.cols-5 ol{grid-template-columns:repeat(5,minmax(0,1fr))}
.prose-sec .prose>h2:first-child,.prose-sec .prose>.rv:first-child{margin-top:0}
.prose-txt{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.65;color:var(--ink-2);gap:0}
.prose-txt>*+*{margin-top:1.2em}
.prose-txt h2{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.012em;color:var(--ink);margin-top:0}
.prose-txt h2 em{font-style:italic;color:var(--gold-deep)}
.prose-txt a{color:var(--gold-text);border-bottom:1px solid var(--hair-strong)}
.prose-txt strong{font-weight:500;color:var(--ink)}
/* .prose-txt (the text column of an .ed spread) gets the article furniture .prose has */
/* an .ed text column set as prose reads left; its headings, kicks and set-apart lines stay on the axis */
.ed .ed-txt.prose-txt{gap:0;text-align:left;align-items:stretch}
.prose-txt .callout{font-style:italic;font-weight:300;font-size:clamp(26px,2.4vw,30px);line-height:1.3;color:var(--ink);text-align:center;text-wrap:balance;margin:.6em auto}
.prose-txt .pull{font-style:italic;font-weight:300;font-size:clamp(28px,3vw,40px);line-height:1.25;color:var(--gold-deep);margin:.8em auto;text-wrap:balance;text-align:center}
.prose-txt .lead.it{font-size:clamp(24px,2vw,28px);color:var(--gold-deep)}
.prose-txt ul{display:flex;flex-direction:column;gap:.5em}
.prose-txt li{position:relative;padding-left:28px}
.prose-txt ul li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--gold)}
.prose-sec .ed .ed-media .frame,.prose-sec .ed-media.frame{max-width:560px}
@media (max-width:1023px){.index.cols-5 ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:767px){.index.cols-5 ol{grid-template-columns:minmax(0,1fr)}.prose-txt{font-size:19px}.prose-txt h2{font-size:clamp(32px,9vw,40px)}.prose-txt .callout{font-size:24px}}

/* ============================================================ 23. wow pass 1: speed, pause control, contrast ============================================================ */
/* hero poster: a real <picture> under the hero loop. It is the page's LCP image (preloaded at high priority, the 720 frame on phones);
   the loop paints over it once it plays, and reduced motion / paused keeps only the picture. */
.hero-poster{position:absolute;inset:0;display:block;overflow:hidden}
.hero-poster img{width:100%;height:100%;object-fit:cover;object-position:48% 40%;transform-origin:50% 35%}
.hero--bleed .hero-poster img{object-position:50% 40%}
.hero-poster~.hero-video{background:transparent}
html.motion .hero-poster img{transform:scale(1.07);transition:transform 4s var(--ease-out)}
html.motion .hero-media.settled .hero-poster img,html.motion .hero-media.settled .hero-video{transform:scale(1)}
@media (max-width:767px){.hero-poster img{object-position:46% 42%}}

/* the hero's words paint at once: the headline is the LCP, so it never waits for site.js. Only the small parts around it rise in,
   by CSS alone; the headline and lead settle with a transform only (an opacity fade would hold the LCP back). Hero photos skip the mask wipe. */
html.motion.js :is(.hero,.hero--page,.hero--bleed) .rv{opacity:1;transform:none;transition:none}
html.motion :is(.hero,.hero--page,.hero--bleed) :is(.eyebrow,.hero-line,.cta-row,.hero-cta,.hero-sub,.hero-foot,.hero-cue,.hero-call,.hero-meta,.hero-proof).rv{animation:hero-rise 1s var(--ease-out) both}
html.motion :is(.hero,.hero--page,.hero--bleed) :is(.h1,.lead).rv{animation:hero-settle 1.2s var(--ease-out) both}
html.motion :is(.hero,.hero--page,.hero--bleed) .hero-line.rv{animation-delay:.1s}
html.motion :is(.hero,.hero--page,.hero--bleed) :is(.cta-row,.hero-cta).rv{animation-delay:.2s}
html.motion :is(.hero,.hero--page,.hero--bleed) :is(.hero-sub,.hero-call,.hero-proof).rv{animation-delay:.3s}
html.motion :is(.hero,.hero--page,.hero--bleed) :is(.hero-foot,.hero-cue).rv{animation-delay:.4s}
@keyframes hero-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes hero-settle{from{transform:translateY(10px)}}
html.motion.js :is(.hero,.hero--page,.hero--bleed) .mask{clip-path:none;transition:none}
html.motion.js :is(.hero,.hero--page,.hero--bleed) .mask>img{animation:hero-img 2.6s var(--ease-out) both}
@keyframes hero-img{from{transform:scale(1.06)}to{transform:none}}

/* Pause motion: the header toggle (nav partial). A 44px target with a hairline ring; the glyph shows what a press will do. */
.nl{margin-left:auto}
.nav-act{display:flex;align-items:center;gap:4px;flex:none}
.motion-tog{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;color:var(--gold-text);border-radius:50%;margin-right:-6px}
.motion-tog::before{content:"";position:absolute;inset:8px;border:1px solid currentColor;border-radius:50%;opacity:.42;transition:opacity var(--t-fast) var(--ease),inset var(--t-fast) var(--ease)}
.motion-tog:hover::before{opacity:.9;inset:6px}
.motion-tog svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;overflow:visible}
.motion-tog .i-play{display:none;fill:currentColor;stroke:none}
.motion-tog[aria-pressed="true"] .i-pause{display:none}
.motion-tog[aria-pressed="true"] .i-play{display:inline}
.motion-tog:focus-visible{outline-offset:0}
body:has(.hero--bleed:not(.light-nav)) .nav:not(.solid) .motion-tog{color:var(--gold-pale)}
html.still .motion-tog{display:none}   /* reduced motion: nothing moves, nothing to pause */
@media (max-width:1023px){.motion-tog{margin-right:0}}
html.paused .ab-mq,html.paused .cue-dot,html.paused .crown-rays{animation-play-state:paused}

/* contrast: small light-gold labels over moving footage get a local soft shadow, so the brightest frames keep them readable */
.hero--bleed :is(.eyebrow,.kick),.hero--bleed .hero-call{text-shadow:0 0 14px rgba(30,25,19,.75),0 1px 2px rgba(30,25,19,.55)}
@media (max-width:767px){.hero .hero-copy .eyebrow{text-shadow:0 0 14px rgba(30,25,19,.75),0 1px 2px rgba(30,25,19,.55)}}
/* focus over dark footage: the ring turns pale gold */
.hero--bleed :focus-visible{outline-color:var(--gold-pale)}
@media (max-width:767px){.hero .hero-copy :focus-visible{outline-color:var(--gold-pale)}}

/* reviews beside booking: a compact strip of her real Google reviews (exact words, names as on /reviews) next to the main booking
   buttons. The rating line is centred on the axis; the quotes are short hairline .rev cards (reading text keeps its left edge). */
.proof{display:flex;flex-direction:column;align-items:center;margin:clamp(56px,6vw,88px) auto 0;max-width:1120px;text-align:center}
.proof .rating{margin:0}
.proof-q{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px clamp(28px,3.2vw,52px);width:100%;margin-top:22px;text-align:left}
.proof .rev{gap:14px;padding-left:22px}
.proof .rev blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,1.35vw,20px);line-height:1.5;color:var(--ink-2)}
.proof .rev figcaption{gap:12px}
.proof .rev figcaption::before{width:22px}
/* two-card strips stay a pair, held to the reading width */
.proof-q:has(> .rev:nth-child(2):last-child){max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:767px){
  .proof{margin-top:48px}
  .proof-q{gap:24px;max-width:var(--measure)}
  .proof-q>.rev:nth-child(n+3){display:none}   /* phones: two quotes are enough beside a button */
}
/* in a hero (/begin): one quote under the button, on the axis */
.hero-proof{margin:6px auto 0;max-width:30em}
.hero-proof .proof-q{display:flex;justify-content:center;margin-top:10px}
.hero-proof .rev{border-left:0;padding-left:0;align-items:center;text-align:center;gap:10px}
.hero-proof .rev blockquote{font-size:19px}
.hero-proof .rev figcaption::before,.hero-proof .rev figcaption::after{content:"";flex:none;width:22px;height:1px;background:var(--gold)}

/* ============================================================ 24. wow pass 3: the gold moon, the arrival cover, soft page transitions ============================================================ */
/* THE GOLD MOON: tonight's real phase, line-drawn in gold, over her next ceremony (site.js writes it from /js/ceremony-dates.js).
   One centred stack on the axis: moon, "Coming up", the ceremony's name, its date and a quiet day count. The whole stack is the link. */
.moon-next{display:flex;justify-content:center;text-align:center;margin:0 auto}
.moon-next>a{display:inline-flex;flex-direction:column;align-items:center;gap:12px;max-width:30em;padding:4px 10px;color:var(--ink)}
.moon{width:52px;height:52px;flex:none;overflow:visible}
.moon-halo{fill:none;stroke:var(--gold);stroke-width:.6;opacity:.55;transition:opacity var(--t-ui) var(--ease)}
.moon-disc{fill:#F1EADA;stroke:none}   /* the moon in shadow: a breath darker than the ivory, so the disc reads whole */
.moon-rim{fill:none;stroke:var(--gold-deep);stroke-width:.85}
.moon-txt{display:flex;flex-direction:column;align-items:center;gap:6px}
.moon-txt .kick{line-height:1.5}
.moon-name{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,1.75vw,25px);line-height:1.25;color:var(--ink);text-wrap:balance;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color var(--t-ui) var(--ease)}
.moon-when{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:10px;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.14em;line-height:1.7;color:var(--ink-2);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.moon-sep{color:var(--gold)}
.moon-in{color:var(--gold-text)}
.moon-next>a:hover .moon-name,.moon-next>a:focus-visible .moon-name{text-decoration-color:var(--gold)}
.moon-next>a:hover .moon-halo{opacity:1}
/* motion: the halo ring draws itself round once the stack reveals */
html.motion.js .moon-next.rv .moon-halo{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease-out) .25s,opacity var(--t-ui) var(--ease)}
html.motion.js .moon-next.rv.in .moon-halo{stroke-dashoffset:0}
/* places: under the ceremonies hero, above her contents; in the home closing band, under its two invitations */
#contents .moon-next{margin-bottom:clamp(48px,5.5vw,76px)}
.final-txt .moon-next{margin-top:clamp(14px,2vw,30px)}
@media (max-width:767px){.moon-next>a{gap:10px}.moon{width:48px;height:48px}.moon-name{font-size:21px}}

/* THE ARRIVAL COVER: the first page of a visit only (the head script sets html.arriving once per browser session, never under reduced
   motion, ?shot or Pause motion). An ivory veil, already slightly see-through, over a page that paints beneath it at once: her mark
   fades up, turns into place and rises, and the veil lifts, 0.8 s in all. The veil is a soft radial wash (opaque only behind the mark, about
   60% at the screen edges), which keeps the page legible through it and costs Speed Index less than a solid sheet.
   Only opacity and transform of HTML boxes animate (no SVG stroke drawing), so it runs on the compositor and takes no main-thread time
   from the loading page. It never takes a click (pointer-events:none). */
.arrive-veil{display:none}
html.arriving .arrive-veil{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 58% 52% at 50% 50%,var(--ivory) 0,rgba(252,250,245,.84) 52%,rgba(252,250,245,.62) 100%);pointer-events:none;animation:arrive-lift .8s var(--ease) both}
.arrive-mark{display:block;width:60px;height:60px;animation:arrive-mark .8s var(--ease-out) both}
.arrive-mark svg{width:100%;height:100%;overflow:visible}
.arrive-mark .a-rays{stroke:var(--gold-deep);stroke-width:1.4;stroke-linecap:round;fill:none}
.arrive-mark .a-ring{fill:none;stroke:var(--gold);stroke-width:1.1}
.arrive-mark .a-serp{fill:none;stroke:var(--gold-deep);stroke-width:2.4;stroke-linecap:round}
.arrive-mark .a-eye{fill:var(--gold-deep)}
@keyframes arrive-lift{0%,30%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes arrive-mark{0%{opacity:0;transform:translateY(10px) scale(.92) rotate(-8deg)}35%{opacity:1}100%{opacity:1;transform:translateY(-14px) scale(1) rotate(0)}}

/* SOFT PAGE TRANSITIONS: same-site links cross-fade with a slight rise (about 0.3 s); the header stays put. Reduced motion: none
   (the at-rule only exists for no-preference); Pause motion and ?shot skip it (the head script's pageswap / pagereveal hooks).
   Browsers without cross-document view transitions simply load the next page. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav{view-transition-name:rf-nav}
  .announce-bar{view-transition-name:rf-bar}
  ::view-transition-old(root){animation:vt-out .24s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease-out) .04s both}
  ::view-transition-group(rf-nav),::view-transition-group(rf-bar){animation-duration:.3s}
  ::view-transition-old(rf-nav),::view-transition-new(rf-nav),::view-transition-old(rf-bar),::view-transition-new(rf-bar){animation-duration:.3s}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}