/* =====================================================================
   Rachel Pema Dawa, site v2 foundation (2026-11-07)
   One stylesheet for every page. Order: fonts, tokens, base, layout,
   type, ornaments, components, page blocks shared by many pages,
   motion and accessibility. Page-only CSS goes in /css/<page>.css.

   COMPONENT INDEX (search for the "== NAME" banner to jump)
   ---------------------------------------------------------------------
   LAYOUT
   .wrap            Centered content column with side gutter.
                    <div class="wrap">...</div>   (.wrap--narrow 760px, .wrap--wide 1440px)
   .section         Vertical rhythm for a page section (padding var(--section)).
                    <section class="section" aria-labelledby="x-h"><div class="wrap">...</div></section>
                    Grounds: .section--ivory2  .section--dawn  .section--parchment
   .section-head    Centered kicker + h2 + intro above a block.
                    <header class="section-head"><p class="kicker">..</p><h2 id="x-h">..</h2><p>..</p></header>
   .stack           Even vertical spacing between children (--flow, default --group).
   .grid-2 / .grid-3 / .grid-4   Responsive card grids (stack on phones).
   .center / .prose  Centered text block / readable left-aligned long copy (36em, centered in column).

   TYPE
   .kicker          Small letter-spaced Cinzel label (plum).          <p class="kicker">A call to your deeper truth</p>
   .h-caps          Cinzel capitals heading (hero style).
   .sub             Italic Cormorant subhead.                         <p class="sub">Finding clarity...</p>
   .lede            Larger intro paragraph.
   .draft-tag       Small "Draft" pill for preview-only prices.        <span class="draft-tag">Draft</span>

   ORNAMENTS (decorative, always aria-hidden="true")
   .lotus-rule      Gold lotus between two gold hairlines.            <div class="lotus-rule" aria-hidden="true"></div>
   .gold-rule       Thin gold hairline, centered, 120px.              <hr class="gold-rule">
   .fol             Flower-of-life circle (thin gold line art). Size it with width; it keeps 1:1.
                    <span class="fol" aria-hidden="true"></span>
   .spiral          Faint golden spiral (Page 2). Position absolutely inside a positioned block.
                    <span class="spiral" aria-hidden="true"></span>
   .waves           Soft gold wave lines with an ivory fade under them, full width, for the bottom of a hero.
                    <div class="waves" aria-hidden="true"></div>

   BUTTONS AND LINKS
   .btn .btn--plum  Main button: plum pill, gold-hi Cinzel text, thin gold inner line.
                    <a class="btn btn--plum" href="/#book">Book a free consultation<svg class="btn__arrow" aria-hidden="true"><use href="#i-arrow"/></svg></a>
   .btn--ivory      Secondary: ivory pill, plum text, gold hairline.
   .btn--gold       Gold pill, plum text: the "Book" button in the header nav and the phone menu.
   .btn--lg / .btn--sm / .btn--block   Size modifiers. .btn__arrow nudges right on hover.
   .text-link       Inline Cinzel link with arrow ("Read my story").  <a class="text-link" href="/about/"><span>Read my story</span><svg aria-hidden="true"><use href="#i-arrow"/></svg></a>
   .journey-link    Narrative "next page" card link (Rachel's "Discover ... ->" lines).
                    <a class="journey-link" href="/psychosynthesis/"><span class="journey-link__k">Continue the journey</span><span class="journey-link__t">Discover Psychosynthesis: A Journey Toward Wholeness</span><svg aria-hidden="true"><use href="#i-arrow"/></svg></a>
   .book-cta        Quiet closing block that ends every page with "Book a free consultation".
                    (markup in _partials/README.md)

   HEADER, MENU, DOCK (paste from /_partials, do not rebuild)
   .site-head       Fixed header. Transparent at the top, liquid glass capsule once scrolled (.is-stuck, set by JS after 24px).
   .brand / .mark   Logo lockup. .mark = gold ring (SVG) behind the lotus image; entrance plays once per visit; tilts toward a real mouse.
   .nav             Desktop links (>=1021px): Turning Points, Coaching, Tarot & Reiki, Psychosynthesis, About, then a gold Book button. No dropdown.
                    Active page: aria-current="page" on its link (gold underline). JS also marks it from the URL if missing.
   .menubtn / .menu Phone and tablet menu (<=1020px): circle-grow panel, the same five links, then a band with Book + Call.
   .head-book       Gold Book pill beside the menu button, tablets only (721-1020px).
   .site-head--min  Logo-only header for ad landing pages (/crossroads/). .site-foot--min drops the Explore column.
   .dock            Phone bottom bar (<=720px): Free consultation + Call or text. Shows after the first screen, hides while the menu is open.
                    Two equal pills that never shrink under their label; keep each label to about 18 characters.

   PANELS AND CARDS
   .panel           Translucent ivory panel, gold hairline, soft shadow. .panel--solid for an opaque one.
   .card            Smaller panel for grids. .card--link makes the whole card one link with a hover lift.
                    <a class="card card--link" href="..."><span class="num">01</span><h3 class="card__title">..</h3><p class="card__sub">..</p></a>
   .num             Number in a gold ring (01, 02...).               <span class="num">01</span>
   .badge           Icon in a gold ring, beside a title.             <span class="badge"><img src="/img/icons/tarot-60.webp" alt=""></span>
   .xcard           Expandable card (Page 2 turning points). Head is one big toggle; panel slides open.
                    Markup in _partials/README.md. id on the article so /inner-truth/#relationships opens it.
                    .xcard__art: the gold line drawing at the top of the card (76px; a 40px mark on phones).
                    <img class="xcard__art" src="/img/v2/cx-transitions.svg" width="100" height="100" alt="" aria-hidden="true" loading="lazy" decoding="async">
   .xcard--alchemy  Soul Alchemy treatment (brushed gold highlight closing line: .brushed).
   .fold--m         Phone-only fold (closed under 760px, open above). See MOBILE DISCLOSURE CONTRACT below.
   .fold            "More details" fold. Starts closed on every screen size.
                    <div class="fold"><button class="fold__btn" type="button" aria-expanded="false" aria-controls="f-x" data-disclose><span class="fold__text"><b>More details</b><small>hint</small></span><span class="fold__chev" aria-hidden="true"><svg><use href="#i-chev"/></svg></span></button><div class="fold__body" id="f-x">...</div></div>
   .pullquote       Large italic Cormorant quote with attribution.
                    <figure class="pullquote"><blockquote><p>"..."</p></blockquote><figcaption>Dr. Roberto Assagioli<small>interview with Sam Keen, 1974</small></figcaption></figure>
   .pull-line       One emphasised line between gold hairlines ("Even a small inner shift...").
   .brushed         Brushed gold highlight panel for a closing line.

   ROWS, MEDIA, WIDGETS
   .swipe           Swipe row: phone cards ~78% wide, arrow badge + one-time peek; desktop prev/next + drag.
                    <div class="swipe" data-swipe><button class="swipe__btn swipe__btn--prev" type="button" aria-label="Previous"><svg><use href="#i-arrow"/></svg></button><ul class="swipe__row">..li..</ul><button class="swipe__btn swipe__btn--next" type="button" aria-label="Next"><svg><use href="#i-arrow"/></svg></button></div>
                    .swipe--grid-721 / .swipe--grid-1021 : becomes a plain grid from that width (set --cols).
                    .swipe--center : phones open on the middle card, neighbours peek both sides (see the contract below).
   .lb-thumb        Thumbnail button that opens the lightbox (data-lightbox="template-id" or data-lightbox-src).
   .lb              Lightbox dialog (built by JS). Zoom: pinch/double-tap on phones, wheel/drag on desktop. Markers <-> legend linking.
   .marker / .legend   Numbered markers over art (style="--x:.5;--y:.3") and their legend list (data-region on both).
   .bk              Booking widget (ported from v1, ivory skin). Options come from the markup. See README.
                    The tile with aria-pressed="true" (else .bk__opt--feature) starts chosen, so Next is live on step 1.
                    Chosen tile: plum ring + a gold check that draws in; the progress line grows between steps.
   .form / .field   Form fields. .letters = email sign-up block (stub: shows thanks, sends nothing yet).
   .site-foot       Footer + .foot__credit (Website designed by Carson L, animated gold underline). A faint gold
                    flower of life watermark (::before) and a gold top hairline that draws from the centre (::after).

   SHARED PAGE BLOCKS
   .page-head       Inner page header: kicker, h1, italic subtitle, lotus rule (+ optional .page-head__art).
   .page-head--photo  Desktop (1021px+) only: a real photo out to the right screen edge, faded into the cream,
                    text in the column on its left. No photo (and no download) on phones and tablets.
                    Set --ph-ar (file width / height) on the header; optional --ph-max (width cap, 50vw),
                    --ph-fl (left fade end, 42%), --ph-ft (top fade end, 9%). See HERO PHOTO AND DEEP BANDS.
                    .page-head--wide for a landscape photo (--ph-ar about 1.5): it hangs from the header line.
                    <header class="page-head page-head--photo" data-hero style="--ph-ar:.8"><div class="page-head__art page-head__photo"><picture>
                    <source media="(min-width: 1021px)" srcset="/img/v2/x-600.webp 600w, /img/v2/x-1200.webp 1200w" sizes="34vw">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="600" height="750" alt=".." fetchpriority="high" decoding="async"></picture></div><div class="wrap">..</div></header>
   .band-deep       One deep plum band per page (a quote, a price block or a closing call): ivory and gold-hi
                    text, gold hairlines, glass cards. .band-deep--dusk = plum into lavender dusk.
                    <section class="section band-deep" ...>. Buttons inside: .btn--gold or .btn--ivory.
                    A .fold inside becomes a glass bar (Tarot & Reiki More details).
                    Keep a light section between it and the footer.
   .split           Photo beside text (stacks on phones). .split--flip puts the photo right.
   .photo           Framed real photo with a soft gold edge and offset backing (keeps its frame on phones).

   MOTION (every item plays once, after a short delay, and is off under reduced motion)
   .reveal          Fades and rises in when scrolled into view (IntersectionObserver threshold 0). style="--d:.1s" delays.
                    Group stagger (v2.js): reveals that enter together and share a parent arrive 90ms apart
                    (--d = .09s per place, max .45s). An inline --d always wins; a lone item never waits.
   [data-stagger-children]  On a parent that is NOT itself .reveal: v2.js makes each element child a .reveal,
                    so a list, grid or chip row arrives one by one.   <ul class="grid-3" data-stagger-children>..</ul>
   .settle          Photo settle, added by v2.js (never write it in HTML): starts at scale 1.04 in its own rounded
                    clip, settles to 1 in 1.4s. Auto on .photo img/video, .split photos, .home-me__photo,
                    .off-lineage__art img. Opt in any other photo with data-settle. Skips anything inside a hero
                    (.hero, .cx-hero), the egg (.eggx), the lightbox (.lb) or [data-still], and fetchpriority="high"
                    (first-screen) photos. Uses the element's own border radius.
   .draw            Divider draw, added by v2.js: every .lotus-rule and .gold-rule, plus anything with data-draw: the
                    lotus fades up, then the gold lines grow from the centre (1.2s). Same skips as .settle (heroes,
                    egg, lightbox, [data-still]). Journal drawings ([data-draw]) use the "ink" variant (journal.css).
   [data-still]     On an element or any parent: no settle and no draw inside it.
   [data-motion]    A block's own one-shot motion: v2.js adds .is-armed, then .is-on once that share of the block is on
                    screen (data-motion=".35"; default .3). Style the "before" look on .is-armed:not(.is-on).
                    Not armed under reduced motion. Used by the home spread fan and How line, the coaching Seasons
                    row and the footer top line (.site-foot is armed without the attribute).
   Hover (desktop, hover:hover + pointer:fine): only cards you can click lift 3px and warm to gold
                    (.card--link, .journey-link, .endband__next, closed .xcard). Static cards do not move.
   Page change      Soft 280ms cross-fade between pages (View Transitions); the header stays put.
   Reduced motion: decorative motion off, menus/folds/dialogs keep a short fade.
   ===================================================================== */

/* =====================================================================
   MOBILE DISCLOSURE CONTRACT (2026-11-10). One pattern for every page.
   Phones show the core line and the next step; detail folds behind a
   chevron. Desktop shows everything.

   1. PHONE FOLD  .fold.fold--m   Closed under 760px. Open, no chevron, no
      button from 760px. Write it with NO button: v2.js wraps the text of
      .fold__head in <button class="fold__btn" data-disclose aria-expanded
      aria-controls> plus a chevron on phones, and unwraps it at 760px+.
        <div class="fold fold--m">
          <h3 class="fold__head">Relationships &amp; Separation
            <span class="fold__sub">When your heart is torn.</span></h3>
          <div class="fold__body"><p>Longer text...</p></div>
        </div>
      Rules:
      - .fold__head is a heading (h2 to h4) holding text and inline spans
        only (no <p>, no links, no block tags): it becomes a button's content.
        Style its spans with descendant selectors, not ">" (they move into
        span.fold__text inside the button on phones).
      - .fold__body holds the detail. An id is optional (v2.js adds one).
      - Anything else inside .fold--m (a teaser line, a button) stays visible.
      - Optional: .fold--center for centered heads (chevron sits right after
        the text). data-open on the .fold starts it open on phones.
      - --fold-gap sets the space above the body (default 12px).
      - The chevron turns when open; the whole heading row is the tap target
        (48px+); Enter and Space work; aria-expanded is kept in sync; reduced
        motion swaps the height slide for a short fade.
   2. FOLD EVERYWHERE  .fold   Folds on desktop too (FAQ, session steps).
      Button in the markup, see the .fold line in the index above.
   3. ONE OPEN AT A TIME   Put data-fold-group on any parent: every .fold
      and .xcard inside it (any depth) closes when another opens.
        <ul class="cx" data-fold-group><li><div class="fold fold--m">..</div></li>..</ul>
      Without the attribute, sibling .fold elements (not .fold--m) still
      act as one group, as before.
   4. LINKS  /page/#id opens the fold that holds #id.
   5. PHONE CAROUSEL  .swipe.swipe--center  On phones the row opens on the
      middle card (or the li with data-start) with both neighbours peeking
      from the screen edges; cards are min(80vw,340px). Place the .swipe
      straight inside a .wrap. Tablet and desktop behave like .swipe.
   ===================================================================== */

/* == FONTS ============================================================= */
@font-face{font-family:"Cinzel";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/Cinzel.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 600;font-display:swap;src:url(/fonts/CormorantGaramond.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/CormorantGaramond-Italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cardo Name";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Cardo-name.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/HankenGrotesk.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* == TOKENS ============================================================ */
:root{
  /* palette: Rachel's mockups. Use only these. */
  --ivory:#fbf7ef;
  --ivory-2:#f6efe2;
  --parchment:#efe5d4;
  --line:rgba(74,16,41,.14);
  --plum:#6e1f43;
  --plum-deep:#4a1029;
  --plum-ink:#3a1424;
  --ink:#2e2226;
  --gold:#c9a24c;
  --gold-soft:#e3c98e;
  --gold-hi:#f3e2b4;
  --dawn:#efe3ee;
  --lavender:#a993c0;
  --sage:#7d8a70;

  /* derived surfaces (built only from the palette above) */
  --panel-bg:rgba(251,247,239,.86);
  --panel-line:rgba(201,162,76,.38);
  --shadow-card:0 18px 40px -26px rgba(74,16,41,.38),0 2px 6px -3px rgba(74,16,41,.12);
  --shadow-lift:0 26px 50px -26px rgba(74,16,41,.45),0 3px 8px -4px rgba(74,16,41,.16);

  /* type */
  --caps:"Cinzel","Trajan Pro",Georgia,serif;
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-body:1.0625rem;           /* 17px phones, 18px from 721px */

  /* layout + spacing (one set for the whole site) */
  --max:1160px;
  --gutter:clamp(20px,5vw,64px); /* page side margin */
  --section:clamp(32px,4.4vw,64px); /* half the gap between two sections */
  --stack:clamp(26px,3.2vw,44px);  /* between blocks inside a section */
  --group:clamp(14px,1.6vw,22px);  /* inside one group */
  --gap:clamp(20px,3.4vw,48px);    /* column gutter */
  --r-card:22px;
  --r-sm:14px;

  /* header: --head-h is the header's height at the top of the page (pad your first block with it) */
  --mark:56px;
  --head-h:78px;
  --stuck-h:76px;

  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  /* ornaments: inline SVG line art (gold), generated 2026-11-07 */
  --svg-fol:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a24c' stroke-width='.32'%3E%3Ccircle cx='20.000' cy='40.000' r='10'/%3E%3Ccircle cx='25.000' cy='31.340' r='10'/%3E%3Ccircle cx='25.000' cy='48.660' r='10'/%3E%3Ccircle cx='30.000' cy='22.679' r='10'/%3E%3Ccircle cx='30.000' cy='40.000' r='10'/%3E%3Ccircle cx='30.000' cy='57.321' r='10'/%3E%3Ccircle cx='35.000' cy='31.340' r='10'/%3E%3Ccircle cx='35.000' cy='48.660' r='10'/%3E%3Ccircle cx='40.000' cy='22.679' r='10'/%3E%3Ccircle cx='40.000' cy='40.000' r='10'/%3E%3Ccircle cx='40.000' cy='57.321' r='10'/%3E%3Ccircle cx='45.000' cy='31.340' r='10'/%3E%3Ccircle cx='45.000' cy='48.660' r='10'/%3E%3Ccircle cx='50.000' cy='22.679' r='10'/%3E%3Ccircle cx='50.000' cy='40.000' r='10'/%3E%3Ccircle cx='50.000' cy='57.321' r='10'/%3E%3Ccircle cx='55.000' cy='31.340' r='10'/%3E%3Ccircle cx='55.000' cy='48.660' r='10'/%3E%3Ccircle cx='60.000' cy='40.000' r='10'/%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3C/g%3E%3C/svg%3E");
  --svg-spiral:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100.7 100.0 L100.8 100.1 L100.8 100.1 L100.8 100.2 L100.8 100.3 L100.8 100.4 L100.7 100.5 L100.7 100.5 L100.7 100.6 L100.6 100.7 L100.6 100.8 L100.5 100.8 L100.5 100.9 L100.4 101.0 L100.3 101.0 L100.2 101.1 L100.1 101.1 L100.0 101.2 L99.9 101.2 L99.8 101.2 L99.7 101.2 L99.5 101.2 L99.4 101.2 L99.3 101.2 L99.1 101.2 L99.0 101.1 L98.9 101.1 L98.8 101.0 L98.6 100.9 L98.5 100.8 L98.4 100.7 L98.3 100.5 L98.2 100.4 L98.1 100.2 L98.1 100.1 L98.0 99.9 L98.0 99.7 L98.0 99.5 L98.0 99.3 L98.0 99.1 L98.0 98.9 L98.1 98.7 L98.2 98.4 L98.3 98.2 L98.4 98.0 L98.6 97.8 L98.7 97.6 L98.9 97.5 L99.1 97.3 L99.4 97.2 L99.6 97.0 L99.9 96.9 L100.2 96.8 L100.5 96.8 L100.8 96.7 L101.1 96.7 L101.4 96.8 L101.8 96.8 L102.1 96.9 L102.5 97.0 L102.8 97.2 L103.1 97.4 L103.5 97.6 L103.8 97.9 L104.1 98.2 L104.3 98.5 L104.6 98.9 L104.8 99.3 L105.0 99.7 L105.1 100.2 L105.2 100.7 L105.3 101.2 L105.3 101.7 L105.3 102.3 L105.2 102.8 L105.0 103.4 L104.8 103.9 L104.6 104.5 L104.3 105.0 L103.9 105.5 L103.5 106.0 L103.0 106.5 L102.5 107.0 L101.9 107.3 L101.2 107.7 L100.5 108.0 L99.8 108.2 L99.0 108.4 L98.2 108.5 L97.3 108.6 L96.5 108.5 L95.6 108.4 L94.7 108.2 L93.8 107.9 L92.9 107.5 L92.0 107.0 L91.2 106.4 L90.3 105.7 L89.6 105.0 L88.9 104.1 L88.2 103.2 L87.6 102.1 L87.1 101.0 L86.7 99.8 L86.4 98.6 L86.2 97.3 L86.1 95.9 L86.2 94.5 L86.4 93.1 L86.7 91.6 L87.2 90.1 L87.8 88.7 L88.5 87.3 L89.5 85.9 L90.5 84.6 L91.8 83.3 L93.1 82.1 L94.7 81.0 L96.3 80.1 L98.1 79.3 L100.0 78.6 L102.0 78.1 L104.1 77.7 L106.3 77.6 L108.6 77.6 L110.9 77.9 L113.2 78.4 L115.6 79.1 L117.9 80.1 L120.3 81.3 L122.5 82.7 L124.7 84.4 L126.7 86.4 L128.7 88.6 L130.4 91.0 L132.0 93.6 L133.4 96.5 L134.5 99.5 L135.4 102.8 L136.0 106.2 L136.3 109.7 L136.2 113.4 L135.9 117.1 L135.1 120.9 L134.0 124.7 L132.5 128.5 L130.6 132.2 L128.3 135.9 L125.6 139.4 L122.5 142.8 L119.0 145.9 L115.2 148.8 L110.9 151.5 L106.4 153.7 L101.5 155.6 L96.3 157.1 L90.8 158.1 L85.1 158.7 L79.2 158.7 L73.2 158.1 L67.1 157.0 L60.9 155.3 L54.8 153.0 L48.7 150.0 L42.7 146.4 L37.0 142.1 L31.5 137.2 L26.4 131.6 L21.6 125.5 L17.3 118.7 L13.6 111.4 L10.4 103.5 L7.9 95.2 L6.1 86.4 L5.1 77.2 L5.0 67.8 L5.7 58.0 L7.4 48.1 L10.1 38.2 L13.7 28.2 L18.4 18.4' fill='none' stroke='%23c9a24c' stroke-width='.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E %3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%23c9a24c' stop-opacity='0'/%3E%3Cstop offset='.18' stop-color='%23c9a24c'/%3E%3Cstop offset='.5' stop-color='%23f3e2b4'/%3E%3Cstop offset='.82' stop-color='%23c9a24c'/%3E%3Cstop offset='1' stop-color='%23e3c98e' stop-opacity='.2'/%3E%3C/linearGradient%3E %3ClinearGradient id='f' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbf7ef' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23fbf7ef' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23fbf7ef'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M0 196 C 260 150 520 236 820 196 S 1240 140 1440 178 L1440 240 L0 240 Z' fill='url(%23f)'/%3E %3Cg fill='none' stroke='url(%23g)' vector-effect='non-scaling-stroke' stroke-linecap='round'%3E %3Cpath d='M0 150 C 250 92 500 214 790 152 S 1210 84 1440 132' stroke-width='2' vector-effect='non-scaling-stroke'/%3E %3Cpath d='M0 176 C 290 122 530 226 830 176 S 1230 112 1440 160' stroke-width='1.4' stroke-opacity='.75' vector-effect='non-scaling-stroke'/%3E %3Cpath d='M0 122 C 210 164 520 100 760 132 S 1170 196 1440 104' stroke-width='1' stroke-opacity='.55' vector-effect='non-scaling-stroke'/%3E %3Cpath d='M0 204 C 330 160 560 238 880 200 S 1260 150 1440 190' stroke-width='1' stroke-opacity='.5' vector-effect='non-scaling-stroke'/%3E %3C/g%3E%3C/svg%3E");
  --svg-lotus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.25' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M24 3c5 6 5 14 0 20c-5-6-5-14 0-20z'/%3E%3Cpath d='M22.6 23.4c-6-2-9.6-8-9.6-15c5 2 8.8 7 9.6 15z'/%3E%3Cpath d='M25.4 23.4c6-2 9.6-8 9.6-15c-5 2-8.8 7-9.6 15z'/%3E%3Cpath d='M21.4 24.6c-8 0-14.6-4-18.4-10.4c7.2-.8 13.6 3.4 18.4 10.4z'/%3E%3Cpath d='M26.6 24.6c8 0 14.6-4 18.4-10.4c-7.2-.8-13.6 3.4-18.4 10.4z'/%3E%3Cpath d='M13 27.2c7 2.4 15 2.4 22 0'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width:721px){:root{--fs-body:1.125rem}}
@media (min-width:1021px){:root{--mark:92px;--head-h:122px}}

/* == BASE ============================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--stuck-h) + 1px);background:var(--ivory);scrollbar-color:var(--gold-soft) var(--ivory-2);-webkit-tap-highlight-color:transparent}
body{font:400 var(--fs-body)/1.6 var(--body);color:var(--ink);background:var(--ivory);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--plum);text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:rgba(201,162,76,.8)}
a:hover{text-decoration-color:var(--plum)}
button,input,select,textarea{font:inherit;color:inherit}
button,a,[role="button"]{touch-action:manipulation}
::selection{background:var(--gold-hi);color:var(--plum-deep)}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--plum);text-wrap:balance;letter-spacing:0}
h1{font-size:clamp(2.35rem,5.2vw,4rem);line-height:1.06}
h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.1}
h3{font-size:clamp(1.45rem,2vw,1.75rem);line-height:1.2}
h4{font-size:1.25rem;line-height:1.25}
p,li{text-wrap:pretty}
sup.tm{font-size:.55em;vertical-align:super;line-height:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--plum);color:var(--gold-hi);padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.nowrap{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:20px;height:20px;flex:none}
[hidden]{display:none!important}

/* == LAYOUT ============================================================ */
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(760px + var(--gutter) * 2)}
.wrap--wide{max-width:calc(1440px + var(--gutter) * 2)}
.section{position:relative;padding-block:var(--section)}
.section--ivory2{background:var(--ivory-2)}
.section--parchment{background:var(--parchment)}
.section--dawn{background:linear-gradient(180deg,var(--ivory) 0,var(--dawn) 50%,var(--ivory) 100%)}
.section--fade{background:linear-gradient(180deg,var(--ivory),var(--ivory-2) 50%,var(--ivory))}
.section-head{max-width:46rem;margin:0 auto var(--stack);text-align:center}
.section-head>*+*{margin-top:12px}
.section-head .lotus-rule{margin-block:14px}
.section-head p:not(.kicker){color:var(--plum-ink);font-size:1.0625em}
.stack>*+*{margin-top:var(--flow,var(--group))}
.center{text-align:center}
.prose{max-width:36em;margin-inline:auto}
.prose>*+*{margin-top:1em}
.prose h2,.prose h3{margin-top:1.4em}
.prose h2+*,.prose h3+*{margin-top:.6em}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:721px){
  .grid-2,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1021px){
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* == TYPE HELPERS ====================================================== */
.kicker{font:500 .875rem/1.4 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--plum)}
.h-caps{font-family:var(--caps);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--plum)}
.sub{font:italic 500 clamp(1.25rem,1.9vw,1.6rem)/1.35 var(--serif);color:var(--plum-ink)}
.lede{font-size:clamp(1.125rem,1.5vw,1.25rem);line-height:1.6;color:var(--plum-ink)}
.draft-tag{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 9px;border-radius:999px;font:600 .875rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--plum);background:var(--dawn);box-shadow:inset 0 0 0 1px rgba(110,31,67,.25)}

/* == ORNAMENTS ========================================================= */
.lotus-rule{--lotus-w:44px;--_side:calc(50% - var(--lotus-w) / 2 - 12px);display:block;width:min(100%,380px);height:26px;margin-inline:auto;background:var(--gold);
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%) left center/var(--_side) 1px no-repeat,var(--svg-lotus) center/var(--lotus-w) 26px no-repeat,linear-gradient(270deg,transparent,#000 70%) right center/var(--_side) 1px no-repeat;
  mask:linear-gradient(90deg,transparent,#000 70%) left center/var(--_side) 1px no-repeat,var(--svg-lotus) center/var(--lotus-w) 26px no-repeat,linear-gradient(270deg,transparent,#000 70%) right center/var(--_side) 1px no-repeat}
.gold-rule{border:0;height:1px;width:120px;margin:var(--group) auto;background:linear-gradient(90deg,rgba(201,162,76,0),var(--gold),rgba(201,162,76,0))}
.fol{display:block;aspect-ratio:1;background:var(--svg-fol) center/contain no-repeat;pointer-events:none}
.spiral{display:block;aspect-ratio:1;background:var(--svg-spiral) center/contain no-repeat;pointer-events:none;opacity:.22}
.waves{display:block;width:100%;height:clamp(84px,12vw,190px);background:var(--svg-waves) center bottom/100% 100% no-repeat;pointer-events:none}

/* == BUTTONS AND LINKS ================================================= */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 30px;border:0;border-radius:999px;font:500 .9375rem/1.1 var(--caps);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .16s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s var(--ease-out),color .2s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:3px;border-radius:inherit;pointer-events:none;z-index:-1}
.btn:active{transform:scale(.97)}
.btn__arrow,.btn svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ease-out)}
.btn--plum{color:var(--gold-hi);background:linear-gradient(180deg,#80294f 0%,var(--plum) 48%,var(--plum-deep) 100%);box-shadow:inset 0 1px 0 rgba(243,226,180,.35),inset 0 0 0 1px rgba(201,162,76,.7),0 12px 26px -12px rgba(74,16,41,.65),0 2px 5px -2px rgba(74,16,41,.35)}
.btn--plum::before{box-shadow:inset 0 0 0 1px rgba(227,201,142,.55)}
.btn--ivory{color:var(--plum);background:linear-gradient(180deg,#fffdf8,var(--ivory-2));box-shadow:inset 0 0 0 1px rgba(201,162,76,.75),inset 0 1px 0 #fff,0 10px 22px -14px rgba(74,16,41,.45)}
.btn--gold{color:var(--plum-deep);background:linear-gradient(180deg,#f7ebc6 0%,var(--gold-soft) 46%,var(--gold) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(110,31,67,.32),0 10px 22px -12px rgba(74,16,41,.5)}
.btn--gold::before{box-shadow:inset 0 0 0 1px rgba(255,253,248,.5)}
.btn--lg{min-height:58px;padding:0 36px;font-size:1rem}
.btn--sm{min-height:44px;padding:0 20px;font-size:.875rem;letter-spacing:.12em}
.btn--block{display:flex;width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
/* set by v2.js only when a label does not fit its pill (2026-11-10) */
.btn.btn--fit{gap:8px;padding-inline:14px;letter-spacing:.06em}
.btn--noarrow .btn__arrow{display:none}
.btn.btn--wrap{white-space:normal;text-wrap:balance;line-height:1.25;padding-block:10px}
@media (max-width:720px){.btn{padding:0 20px;gap:10px;font-size:.875rem;letter-spacing:.1em;white-space:nowrap}.btn--lg{padding:0 30px;font-size:.9375rem;letter-spacing:.16em}}
@media (hover:hover) and (pointer:fine){
  .btn--plum:hover{background:linear-gradient(180deg,#8a2f57 0%,#7a2449 48%,var(--plum-deep) 100%);box-shadow:inset 0 1px 0 rgba(243,226,180,.4),inset 0 0 0 1px rgba(227,201,142,.9),0 16px 30px -12px rgba(74,16,41,.7),0 3px 6px -2px rgba(74,16,41,.35)}
  .btn--ivory:hover{background:linear-gradient(180deg,#fff,var(--gold-hi))}
  .btn:hover .btn__arrow,.btn:hover>svg:last-child{transform:translateX(3px)}
}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 .875rem/1.2 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--plum);text-decoration:none;border-bottom:0}
.text-link svg{width:16px;height:16px;transition:transform .2s var(--ease-out)}
.text-link span{background:linear-gradient(var(--gold),var(--gold)) left bottom/100% 1px no-repeat;padding-bottom:3px}
@media (hover:hover) and (pointer:fine){.text-link:hover svg{transform:translateX(3px)}}
.journey-link{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 18px;max-width:40rem;margin:var(--stack) auto 0;padding:20px 24px;border-radius:var(--r-card);background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card);text-decoration:none;color:var(--plum);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.journey-link__k{grid-column:1;font:500 .875rem/1.3 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--plum-ink)}
.journey-link__t{grid-column:1;font:600 clamp(1.3rem,2.2vw,1.6rem)/1.2 var(--serif);text-wrap:balance}
.journey-link svg{grid-column:2;grid-row:1/3;width:44px;height:44px;padding:12px;border-radius:50%;color:var(--gold-hi);background:var(--plum);transition:transform .2s var(--ease-out)}
.journey-link:active{transform:scale(.985)}
@media (max-width:720px){.journey-link{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px;padding:20px 16px}.journey-link svg{grid-column:1;grid-row:auto}}
@media (hover:hover) and (pointer:fine){.journey-link:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-lift)}.journey-link:hover svg{transform:translateX(3px)}}

/* == HEADER ============================================================ */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px;pointer-events:none;transition:padding .35s var(--ease-out)}
.site-head__bar{position:relative;z-index:2;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;max-width:calc(var(--max) + var(--gutter) * 2);margin-inline:auto;padding:0 var(--gutter);border-radius:999px;transition:padding .35s var(--ease-out),background-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.site-head__bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transform:scale(.985);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
  background:linear-gradient(135deg,rgba(255,253,248,.95),rgba(251,247,239,.9) 48%,rgba(246,239,226,.93));
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(201,162,76,.32),inset 0 -8px 18px -12px rgba(201,162,76,.35),0 12px 32px -14px rgba(74,16,41,.38),0 2px 6px -2px rgba(74,16,41,.12)}
.site-head.is-stuck{padding-inline:max(12px,calc(50% - var(--max) / 2 - 22px))}
.site-head.is-stuck .site-head__bar{max-width:none;padding:6px}
.site-head.is-stuck .site-head__bar::before{opacity:1;transform:none}
.site-head.is-stuck{--mark:44px}

/* brand lockup */
.brand{display:inline-flex;align-items:center;gap:14px;min-width:0;text-decoration:none;color:var(--plum)}
.brand__text{display:grid;gap:5px;min-width:0}
.brand__name{font:400 clamp(1.3rem,2.15vw,2.1rem)/1.05 "Cardo Name",var(--serif);color:var(--plum);white-space:nowrap;letter-spacing:-.005em}
.brand__tag{display:none;font:600 .8125rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-ink)}
.brand__tag b{font-weight:500;white-space:nowrap}
.brand__tag i{font-style:normal;color:var(--gold);padding:0 .35em}
@media (min-width:1021px){.brand__tag{display:block}}
/* always two lines (coach / the rest): the header bar is capped at --max, so one line never fits beside the nav */
.brand__tag b:first-child{display:block}.brand__tag b:first-child+i{display:none}
.site-head.is-stuck .brand__tag{display:none}
/* Phones and tablets: title under the name in serif italic (Carson's pick "C2", 2026-11-10): name 19.2px, title 14.5px, same width */
@media (max-width:1020px){.site-head .brand__name{font-size:1.2rem}.site-head .brand__text{gap:2px}.site-head .brand__tag{display:block;font:italic 400 14.5px/1.15 var(--serif);letter-spacing:.01em;text-transform:none;color:var(--plum-ink);margin-top:1px}.site-head.is-stuck .brand__tag{display:none}}
.site-head.is-stuck .brand__name{font-size:1.5rem}
.site-head.is-stuck .brand{gap:10px}
/* Phones and tablets, stuck: keep the title under the name in the capsule (2026-11-12), name a touch smaller, both lines centred on the mark */
@media (max-width:1020px){.site-head.is-stuck .brand__tag{display:block;font-size:13.5px;line-height:1.1;margin-top:0}.site-head.is-stuck .brand__name{font-size:1.32rem;line-height:1}.site-head.is-stuck .brand__text{gap:2px;transform:translateY(-1px)}}

/* mark: gold ring behind the lotus, lotus in front with a soft shadow */
.mark{position:relative;display:block;flex:none;width:var(--mark);height:var(--mark);perspective:420px;transition:width .35s var(--ease-out),height .35s var(--ease-out)}
.mark__tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s var(--ease-out)}
.mark__ring{position:absolute;left:11%;top:15%;width:78%;height:78%;overflow:visible;transform:translateZ(0)}
.mark__ring circle{fill:none;stroke:var(--gold);stroke-width:3.2;stroke-dasharray:100 100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%}
.mark__ring circle+circle{stroke:var(--gold-hi);stroke-width:1.4}
.mark__ring{filter:drop-shadow(0 1px 1px rgba(74,16,41,.25))}
.mark__lotus{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translateZ(16px);filter:drop-shadow(0 4px 4px rgba(74,16,41,.26)) drop-shadow(0 1px 1px rgba(74,16,41,.18))}
/* entrance (html.intro is set by the head script on the first page of a visit) */
.intro .site-head .mark__ring circle{animation:ring-draw 1.25s var(--ease-out) .1s both}
.intro .site-head .mark__ring circle+circle{animation-delay:.3s}
.intro .site-head .mark__lotus{animation:lotus-rise 1s var(--ease-out) .65s both}
@keyframes ring-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes lotus-rise{
  from{opacity:0;transform:translateZ(16px) translateY(6px);filter:drop-shadow(0 0 0 rgba(74,16,41,0)) drop-shadow(0 0 0 rgba(74,16,41,0))}
  to{opacity:1;transform:translateZ(16px) translateY(0);filter:drop-shadow(0 4px 4px rgba(74,16,41,.26)) drop-shadow(0 1px 1px rgba(74,16,41,.18))}
}

/* desktop nav: five links and a gold Book button (no dropdown since 2026-11-08) */
.nav{display:none}
.nav__list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.nav__list>li>a:not(.btn){position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:999px;background:none;font:500 .875rem/1 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--plum-ink);text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .2s var(--ease-out)}
.nav__list>li>a:not(.btn)::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ease-out)}
.nav__list>li>a[aria-current="page"]::after{transform:scaleX(1)}
.nav__list>li>a[aria-current="page"]{color:var(--plum)}
@media (hover:hover) and (pointer:fine){
  .nav__list>li>a:not(.btn):hover{color:var(--plum)}
  .nav__list>li>a:not(.btn):hover::after{transform:scaleX(1)}
}
.nav__book{margin-left:10px}
.nav__book .btn,.head-book{min-height:44px;padding:0 22px;white-space:nowrap}
/* the Book pill beside the menu button: tablets only (phones have the dock, desktop has it in the nav) */
.head-book{display:none;margin-left:auto}
@media (min-width:721px) and (max-width:1020px){.head-book{display:inline-flex}}

/* menu button (phones and tablets) */
.menubtn{position:relative;z-index:3;display:grid;place-content:center;gap:5px;flex:none;width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;color:var(--gold-hi);background:linear-gradient(180deg,#80294f,var(--plum) 50%,var(--plum-deep));box-shadow:inset 0 0 0 1px rgba(201,162,76,.7),inset 0 0 0 3px rgba(110,31,67,1),inset 0 0 0 4px rgba(227,201,142,.45),0 8px 18px -10px rgba(74,16,41,.6);transition:width .35s var(--ease-out),height .35s var(--ease-out),transform .15s var(--ease-out)}
.menubtn:active{transform:scale(.94)}
.menubtn:focus-visible{border-radius:50%}
.menubtn i{display:block;width:20px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .45s var(--ease-out),opacity .3s var(--ease-out)}
.menu-open .menubtn i:nth-of-type(1){transform:translateY(6.6px) rotate(45deg)}
.menu-open .menubtn i:nth-of-type(2){opacity:0;transform:scaleX(.2)}
.menu-open .menubtn i:nth-of-type(3){transform:translateY(-6.6px) rotate(-45deg)}
.site-head.is-stuck .menubtn{width:44px;height:44px}

/* phone menu panel */
.menu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;pointer-events:auto;overflow:hidden;
  padding:calc(62px + env(safe-area-inset-top,0px)) calc(var(--gutter) - 6px) calc(20px + env(safe-area-inset-bottom,0px));
  background:radial-gradient(120% 55% at 90% 0%,rgba(243,226,180,.55),rgba(243,226,180,0) 60%),radial-gradient(90% 50% at 0% 100%,rgba(239,227,238,.9),rgba(239,227,238,0) 70%),var(--ivory);
  clip-path:circle(0 at var(--mx,calc(100% - 44px)) var(--my,44px));visibility:hidden;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s linear .6s}
.menu-open .menu{clip-path:circle(150% at var(--mx,calc(100% - 44px)) var(--my,44px));visibility:visible;transition:clip-path .65s cubic-bezier(.7,0,.2,1),visibility 0s}
html.menu-open{overflow:hidden}
.menu-open .site-head.is-stuck .site-head__bar::before{opacity:0}
/* the panel under the bar scrolls, never the whole overlay, so links cannot slide under the brand.
   10px top and 6px side padding keep focus rings inside the scroll box; the overlay padding above is reduced to match, so links sit where they did */
.menu__inner{width:100%;max-width:572px;margin-inline:auto;padding:10px 6px 0;display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(transparent,#000 6px);mask-image:linear-gradient(transparent,#000 6px)}
.menu__links{list-style:none;margin:0;padding:0}
.menu__links>li{border-bottom:1px solid var(--line)}
.menu__links>li>a{display:flex;align-items:center;justify-content:space-between;min-height:52px;font:600 1.6rem/1.1 var(--serif);color:var(--plum);text-decoration:none}
.menu__links>li>a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}
.menu__band{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.menu__band .btn{min-height:52px;min-width:0;padding-inline:16px;font-size:.875rem;letter-spacing:.1em}
.menu__band svg{width:18px;height:18px}
.menu__note{margin-top:16px;font-size:.9375rem;color:var(--plum-ink);text-align:center}
.menu [data-stagger]{opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.menu-open .menu [data-stagger]{opacity:1;transform:none;transition-delay:calc(.22s + var(--i,0) * .045s)}
/* short screens (Opera on the OnePlus shows 641px): tighter rows so the whole menu fits without scrolling; targets stay 40px+ */
@media (max-height:700px){.menu__links>li>a{min-height:44px;font-size:1.5rem}.menu__band{gap:8px;margin-top:12px;padding-bottom:12px}.menu__band .btn{min-height:48px}.menu__note{margin-top:8px}}
@media (min-width:1021px){
  .nav{display:block;flex:none}
  .menubtn,.menu{display:none}
}
/* 1021-1299px: no room for the tagline beside the five links and Book, so show the name only and tighten the links */
@media (min-width:1021px) and (max-width:1299px){.site-head:not(.is-stuck){--mark:76px}.brand{gap:12px}.brand__tag{display:none}.brand__name{font-size:1.5rem}.nav__list>li>a:not(.btn){padding:0 8px;letter-spacing:.06em}.nav__list>li>a:not(.btn)::after{left:8px;right:8px}.nav__book{margin-left:6px}.nav__book .btn{padding:0 18px}}

/* == PHONE DOCK ======================================================== */
.dock{display:none}
/* 2026-11-10: two equal columns that never shrink under their label (minmax(max-content,1fr)), so a long
   label like "Crossroads Spread" can no longer run past the dock edge. Under 400px the labels step down to 14px.
   v2.js adds .is-tight (and then .is-bare, icons off) only if a phone's font settings still make it overflow. */
@media (max-width:720px){
  .dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);gap:6px;padding:6px;border-radius:999px;
    background:linear-gradient(135deg,rgba(255,253,248,.95),rgba(251,247,239,.9) 50%,rgba(246,239,226,.93));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
    box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(201,162,76,.36),0 14px 30px -12px rgba(74,16,41,.42);
    transform:translateY(150%);transition:transform .45s var(--ease-drawer)}
  .dock.is-on{transform:none}
  .menu-open .dock,.dock.is-typing,.dock.is-away{transform:translateY(150%)}
}
.dock__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 12px;border-radius:999px;font:600 .9375rem/1.1 var(--body);letter-spacing:0;text-decoration:none;white-space:nowrap;user-select:none;-webkit-user-select:none;transition:transform .15s var(--ease-out)}
.dock__btn svg{width:18px;height:18px;flex:none;transition:transform .15s var(--ease-out)}
.dock__btn:active svg{transform:scale(.86)}
.dock__btn:active{transform:scale(.98)}
.dock__btn--plum{color:var(--gold-hi);background:linear-gradient(180deg,#80294f,var(--plum) 50%,var(--plum-deep));box-shadow:inset 0 0 0 1px rgba(201,162,76,.7)}
.dock__btn--ivory{color:var(--plum);background:linear-gradient(180deg,#fffdf8,var(--ivory-2));box-shadow:inset 0 0 0 1px rgba(201,162,76,.75)}
@media (max-width:399px){.dock__btn{gap:6px;padding:0 9px;font-size:.875rem}.dock__btn svg{width:16px;height:16px}}
.dock.is-tight .dock__btn{gap:5px;padding:0 7px;font-size:.875rem}
.dock.is-tight .dock__btn svg{width:15px;height:15px}
.dock.is-bare .dock__btn svg{display:none}

/* == PANELS AND CARDS ================================================== */
.panel{position:relative;padding:clamp(22px,4vw,48px);border-radius:var(--r-card);background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card)}
.panel--solid{background:var(--ivory)}
.card{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.6vw,28px);border-radius:var(--r-card);background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card);color:var(--ink);text-align:center;align-items:center}
.card__title{font:600 clamp(1.4rem,2vw,1.65rem)/1.15 var(--serif);color:var(--plum)}
.card__sub{font:italic 500 1.15rem/1.35 var(--serif);color:var(--plum-ink)}
.card__meta{font:500 .875rem/1.3 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--plum)}
.card__price{font:600 1.75rem/1 var(--serif);color:var(--plum);font-variant-numeric:lining-nums tabular-nums}
.card--feature{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 4px rgba(243,226,180,.55),var(--shadow-lift)}
.card__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:999px;font:500 .875rem/1.2 var(--caps);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--gold-hi);background:var(--plum)}
.card--link{text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.card--link:active{transform:scale(.985)}
.card__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:32px;padding-top:6px;font:500 .875rem/1.2 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}
.card__go svg{width:16px;height:16px;transition:transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card--link:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-lift)}.card--link:hover .card__go svg{transform:translateX(3px)}}
.num{display:inline-grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;font:500 1.0625rem/1 var(--caps);letter-spacing:.04em;color:var(--plum);background:radial-gradient(circle,rgba(243,226,180,.55),rgba(251,247,239,0) 70%);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 4px var(--ivory),inset 0 0 0 5px rgba(201,162,76,.4)}
.badge{display:inline-grid;place-items:center;flex:none;width:60px;height:60px;border-radius:50%;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 4px var(--ivory),inset 0 0 0 5px rgba(201,162,76,.35)}
.badge img{width:44px;height:44px;object-fit:contain}
@media (max-width:720px){.badge{width:52px;height:52px}.badge img{width:38px;height:38px}.num{width:46px;height:46px;font-size:1rem}}

/* == EXPANDABLE CARDS (.xcard) ========================================= */
.xcards{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1021px){.xcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.xcard{position:relative;border-radius:var(--r-card);background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card);transition:box-shadow .25s var(--ease-out),transform .25s var(--ease-out)}
.xcard.is-open{box-shadow:inset 0 0 0 1.5px var(--gold),var(--shadow-lift)}
.xcard__top{position:relative;padding:clamp(22px,3vw,32px) clamp(20px,3vw,34px) 8px;text-align:center}
.xcard__top>*+*{margin-top:10px}
.xcard__title{font:600 clamp(1.5rem,2.3vw,1.9rem)/1.15 var(--serif);color:var(--plum)}
/* the card's gold line drawing (img/v2/cx-*.svg, same as the home crossroads cards): 76px above the title; phones: inner-truth.css */
.xcard__art{display:block;flex:none;align-self:center;width:76px;height:76px;margin-inline:auto}
.xcard__kicker{font:italic 500 1.25rem/1.3 var(--serif);color:var(--plum)}
.xcard__sub{font:italic 500 1.2rem/1.35 var(--serif);color:var(--plum-ink)}
.xcard__lead{color:var(--ink)}
.xcard__toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin:0;padding:6px 16px 14px;border:0;background:none;cursor:pointer;font:500 .875rem/1.2 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--plum)}
.xcard__toggle::before{content:"";position:absolute;inset:0;border-radius:var(--r-card) var(--r-card) 0 0}
.xcard__toggle:focus-visible{outline:none}
.xcard__toggle:focus-visible::before{outline:2px solid var(--plum);outline-offset:-4px}
.xcard__chev{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--gold-hi);background:var(--plum);transition:transform .3s var(--ease-out)}
.xcard__chev svg{width:16px;height:16px}
[aria-expanded="true"] .xcard__chev,[aria-expanded="true"] .fold__chev{transform:rotate(180deg)}
[aria-expanded="true"] .when-closed,[aria-expanded="false"] .when-open{display:none}
.xcard__more{padding:6px clamp(20px,3vw,34px) clamp(22px,3vw,30px);overflow:hidden}
.xcard__more>*+*{margin-top:1em}
.xcard__more h4{margin-top:1.4em;text-align:center;font:italic 600 1.45rem/1.2 var(--serif);color:var(--plum)}
.xcard__more h4::after{content:"";display:block;width:64px;height:1px;margin:10px auto 0;background:var(--gold)}
.xcard__close{display:flex;margin:18px auto 0}
/* a closed card is one big toggle (.xcard__toggle::before covers it), so it lifts like a link card */
@media (hover:hover) and (pointer:fine){.xcard:not(.is-open):hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-lift)}}
.xcard--alchemy{background:linear-gradient(180deg,rgba(251,247,239,.9),rgba(243,226,180,.32)),var(--panel-bg)}
.brushed{position:relative;isolation:isolate;margin:var(--group) auto 0;max-width:34em;padding:18px 26px;text-align:center;font:italic 500 clamp(1.3rem,2vw,1.55rem)/1.35 var(--serif);color:var(--plum-ink)}
.brushed::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:4px 30px 6px 26px/18px 8px 24px 10px;background:linear-gradient(100deg,rgba(227,201,142,0) 0%,rgba(227,201,142,.55) 8%,rgba(243,226,180,.85) 40%,rgba(227,201,142,.6) 88%,rgba(227,201,142,0) 100%);filter:blur(.4px)}
.brushed b,.brushed strong{font-weight:600;color:var(--plum)}

/* == FOLDS ("More details") ============================================ */
.fold{margin-top:var(--group)}
.fold__btn{display:flex;align-items:center;gap:16px;width:100%;min-height:58px;padding:12px 14px 12px 20px;border:0;border-radius:18px;text-align:left;cursor:pointer;color:var(--plum);background:linear-gradient(160deg,rgba(251,247,239,.92),rgba(246,239,226,.7));box-shadow:inset 0 0 0 1px var(--panel-line);transition:box-shadow .2s var(--ease-out),background-color .2s var(--ease-out)}
.fold__btn:focus-visible{border-radius:18px}
.fold__text{flex:1;display:grid;gap:2px}
.fold__text b{font:600 1.35rem/1.15 var(--serif)}
.fold__text small{font-size:.9375rem;color:var(--plum-ink)}
.fold__thumb{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--ivory),0 0 0 3px var(--gold)}
.fold__chev{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:var(--gold-hi);background:var(--plum);transition:transform .3s var(--ease-out)}
.fold__chev svg{width:18px;height:18px}
.fold__body{overflow:hidden}
.fold__body>:first-child{margin-top:var(--group)}
.fold__body>*+*{margin-top:1em}
@media (hover:hover) and (pointer:fine){.fold__btn:hover{box-shadow:inset 0 0 0 1px var(--gold)}}

/* == PHONE FOLDS (.fold--m, 2026-11-10) ================================
   Closed on phones (under 760px), plain open content from 760px. The markup has
   no button: v2.js wraps the .fold__head text in a button with a chevron on
   phones and unwraps it at 760px+. Full contract: MOBILE DISCLOSURE at the top. */
.fold.fold--m{margin-top:0}
.fold--m .fold__body>:first-child{margin-top:var(--fold-gap,12px)}
.fold__sub{display:block;margin-top:6px;font:italic 500 1.15rem/1.35 var(--serif);color:var(--plum-ink);letter-spacing:0;text-transform:none}
@media (max-width:759px){
  .fold--m .fold__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;margin:0;padding:6px 0;border-radius:12px;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;color:inherit;background:none;box-shadow:none}
  .fold--m .fold__text{display:block;flex:0 1 auto;min-width:0}
  .fold--m .fold__chev{width:32px;height:32px}
  .fold--m .fold__chev svg{width:16px;height:16px}
  .fold--center .fold__btn{justify-content:center;text-align:center}
  .fold--m .fold__btn:hover{box-shadow:none}
  .fold--m.is-open .fold__chev{box-shadow:0 0 0 3px rgba(243,226,180,.8)}
}

/* == QUOTES ============================================================ */
.pullquote{position:relative;max-width:40rem;margin:var(--stack) auto;padding-top:34px;text-align:center}
.pullquote::before{content:"\201C";position:absolute;top:-6px;left:50%;transform:translateX(-50%);font:600 4.5rem/1 var(--serif);color:var(--gold)}
.pullquote blockquote p{font:italic 500 clamp(1.6rem,3.1vw,2.35rem)/1.25 var(--serif);color:var(--plum)}
.pullquote figcaption{margin-top:16px;font:500 .875rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-ink)}
.pullquote figcaption small{display:block;margin-top:4px;font:italic 500 1.05rem/1.3 var(--serif);letter-spacing:0;text-transform:none}
.pull-line{max-width:32rem;margin:var(--stack) auto;padding:18px 0;text-align:center;font:italic 500 clamp(1.4rem,2.4vw,1.85rem)/1.3 var(--serif);color:var(--plum);border-block:1px solid var(--gold-soft)}

/* == SWIPE ROWS ======================================================== */
.swipe{position:relative;min-width:0;--card-w:78%;--cols:3}
.swipe__row{display:flex;gap:14px;margin:0 0 -14px;padding:6px 2px 32px;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;position:relative}
.swipe__row::-webkit-scrollbar{display:none}
.swipe__row>*{flex:0 0 var(--card-w);scroll-snap-align:start;min-width:0;display:flex}
.swipe__row>*>*{flex:1}
.swipe.is-drag .swipe__row{scroll-snap-type:none;cursor:grabbing;user-select:none}
.swipe__btn{position:absolute;top:calc(50% - 10px);z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;cursor:pointer;color:var(--plum);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold),0 8px 18px -8px rgba(74,16,41,.45);transition:opacity .25s var(--ease-out),transform .15s var(--ease-out)}
.swipe__btn svg{width:18px;height:18px}
.swipe__btn--prev{left:-8px}
.swipe__btn--prev svg{transform:rotate(180deg)}
.swipe__btn--next{right:-8px}
.swipe__btn:active{transform:scale(.94)}
.swipe.is-start .swipe__btn--prev,.swipe.is-end .swipe__btn--next,.swipe.is-fit .swipe__btn{opacity:0;pointer-events:none}
@media (hover:none),(pointer:coarse){
  .swipe__btn--prev{display:none}
  .swipe__btn--next{right:-4px;animation:nudge 1.6s var(--ease-in-out) 1.2s 3 both}
  .swipe.is-touched .swipe__btn--next{opacity:0;pointer-events:none;animation:none}
}
@keyframes nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(5px)}}
@media (max-width:1020px){
  .swipe__row{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .swipe.is-end .swipe__row{-webkit-mask-image:none;mask-image:none}
}
/* .swipe--center (2026-11-10): phones only. Opens on the middle card (or the li with data-start), with the
   cards on both sides peeking in from the screen edges. The row bleeds to the screen edge, so put the
   .swipe straight inside a .wrap. Tablets and desktop keep the normal row or grid. */
@media (max-width:720px){
  .swipe--center{--card-w:min(80vw,340px)}
  .swipe--center .swipe__row{margin-inline:calc(var(--gutter) * -1);padding-inline:calc((100vw - var(--card-w)) / 2);-webkit-mask-image:none;mask-image:none}
  .swipe--center .swipe__row>*{scroll-snap-align:center;scroll-snap-stop:always}
  .swipe--center .swipe__btn{display:none}
}
@media (min-width:721px){.swipe{--card-w:46%}}
@media (min-width:721px){
  .swipe--grid-721 .swipe__row{display:grid;grid-template-columns:repeat(var(--cols-721,2),minmax(0,1fr));overflow:visible;-webkit-mask-image:none;mask-image:none;padding-inline:0}
  .swipe--grid-721 .swipe__btn{display:none}
}
@media (min-width:1021px){
  .swipe{--card-w:31.5%}
  .swipe--grid-1021 .swipe__row,.swipe--grid-721 .swipe__row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);overflow:visible;-webkit-mask-image:none;mask-image:none;padding-inline:0}
  .swipe--grid-1021 .swipe__btn,.swipe--grid-721 .swipe__btn{display:none}
}

/* == LIGHTBOX ========================================================== */
.lb-thumb{position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--r-card);overflow:hidden;cursor:zoom-in;background:var(--ivory-2);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card);text-align:left}
.lb-thumb__art{position:relative}
.lb-thumb__art img{width:100%}
.lb-thumb__hint{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;font:600 .9375rem/1 var(--body);color:var(--plum);background:rgba(251,247,239,.92);box-shadow:inset 0 0 0 1px var(--gold)}
.lb-thumb__hint svg{width:16px;height:16px}
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--ink);background:var(--ink);overscroll-behavior:contain}
.lb::backdrop{background:var(--ink)}
.lb[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;animation:lb-in .25s var(--ease-out)}
.lb.is-closing{animation:lb-out .18s var(--ease-out) forwards}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@keyframes lb-out{to{opacity:0}}
.lb__stage{position:relative;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.lb__stage.is-panning{cursor:grabbing}
.lb__canvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.lb__canvas>img{width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.lb__bar{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:10px;z-index:3;display:flex;gap:8px}
.lb__btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;color:var(--plum);background:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold),0 6px 16px -8px rgba(0,0,0,.6)}
.lb__btn svg{width:20px;height:20px}
.lb__btn:active{transform:scale(.94)}
/* two-tone focus ring: gold-hi shows on the dark stage, the plum-deep band shows on ivory */
.lb__btn:focus-visible{outline-color:var(--gold-hi);box-shadow:inset 0 0 0 1px var(--gold),0 0 0 3px var(--plum-deep),0 6px 16px -8px rgba(0,0,0,.6)}
.lb__title{position:absolute;left:10px;top:calc(10px + env(safe-area-inset-top,0px));z-index:3;max-width:calc(100% - 178px);padding:10px 16px;border-radius:22px;font:600 1.15rem/1.2 var(--serif);color:var(--gold-hi);background:rgba(46,34,38,.82)}
.lb__title:empty{display:none}
/* phones: a legend sheet already names the art, so the title chip goes (it covered marker 6). .lb__title follows .lb__side in the DOM */
@media (max-width:1020px){.lb__side:not(:empty)~.lb__title{display:none}}
.lb__side{max-height:38vh;overflow-y:auto;overscroll-behavior:contain;padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));background:var(--ivory);border-radius:20px 20px 0 0}
.lb__side h2{font-size:1.5rem;margin-bottom:10px;text-align:center}
.lb__side:empty{display:none}
@media (min-width:1021px){
  .lb[open]{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(320px,380px)}
  .lb__side{max-height:none;height:100%;border-radius:0;padding:72px 26px 26px}
  .lb__title{max-width:60%}
}
/* markers over art, and their legend */
.marker{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);z-index:2;display:grid;place-items:center;width:30px;height:30px;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;font:500 .875rem/1 var(--caps);color:var(--gold-hi);background:var(--plum);box-shadow:0 0 0 1.5px var(--gold-hi),0 0 0 3px rgba(110,31,67,.35),0 4px 10px -3px rgba(0,0,0,.45);transform:scale(var(--ms,1));transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
button.marker{cursor:pointer}
button.marker::before{content:"";position:absolute;inset:-7px;border-radius:50%} /* 44px hit area, 30px disc */
.marker.is-active{background:var(--gold-hi);color:var(--plum-deep);box-shadow:0 0 0 2px var(--plum),0 0 0 8px rgba(243,226,180,.55),0 6px 14px -4px rgba(0,0,0,.5);transform:scale(calc(var(--ms,1) * 1.15))}
.lb .marker{transform:scale(calc(1 / var(--z,1)))}
.lb .marker.is-active{transform:scale(calc(1.2 / var(--z,1)))}
.legend{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.legend__item{display:grid;grid-template-columns:30px 1fr;gap:2px 12px;align-items:start;width:100%;padding:10px 12px;border:0;border-radius:14px;text-align:left;cursor:pointer;background:none;color:var(--ink);transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.legend__item .marker{position:static;margin:0;grid-row:1/3;transform:none;width:30px;height:30px}
.legend__item b{font:600 1.15rem/1.2 var(--serif);color:var(--plum)}
.legend__item span:last-child{font-size:.9375rem;line-height:1.45;color:var(--plum-ink)}
.legend__item.is-active{background:var(--ivory-2);box-shadow:inset 0 0 0 1px var(--gold)}
.legend__item.is-active .marker{background:var(--gold-hi);color:var(--plum-deep)}

/* == BOOKING WIDGET (.bk, ported from v1, ivory skin) ================== */
.bk{position:relative;padding:clamp(20px,3vw,34px);border-radius:24px;background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card)}
.bk fieldset{border:0;padding:0;margin:0;min-width:0}
.bk__step{display:none}
.bk__step.is-on{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;animation:rise .45s var(--ease-out)}
.bk legend{width:100%;margin-bottom:12px;padding:0;text-align:center;font:600 clamp(1.45rem,2.2vw,1.8rem)/1.2 var(--serif);color:var(--plum);outline:none}
.bk__steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:6px;margin:0 0 18px;padding:0;list-style:none}
.bk__steps li{position:relative;padding-top:8px;text-align:center;font:500 .75rem/1.2 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:rgba(58,20,36,.6);border-top:3px solid var(--parchment);transition:color .3s var(--ease-out)}
/* progress line (2026-11-11): the gold fill grows along each step's track instead of switching colour */
.bk__steps li::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.bk__steps li.is-on{color:var(--plum)}
.bk__steps li.is-on::before{transform:none}
.bk__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bk button[data-pick]{font:inherit;color:var(--ink);cursor:pointer;border:0;border-radius:16px;background:var(--ivory);box-shadow:inset 0 0 0 1px rgba(201,162,76,.55);transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out),transform .15s var(--ease-out)}
.bk button[data-pick]:active{transform:scale(.98)}
.bk button[aria-pressed="true"]{background:rgba(243,226,180,.55);box-shadow:inset 0 0 0 2px var(--plum)}
.bk__opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:76px;padding:10px 8px;text-align:center}
.bk__opt b{font:600 1rem/1.2 var(--body);color:var(--plum)}
.bk__opt small{font-size:.875rem;line-height:1.25;color:var(--plum-ink)}
.bk__opt em{font:600 1.3rem/1 var(--serif);font-style:normal;color:var(--plum);font-variant-numeric:lining-nums}
.bk__opt--feature{grid-column:1/-1;min-height:70px;background:linear-gradient(180deg,#fffdf8,rgba(243,226,180,.45))!important;box-shadow:inset 0 0 0 1.5px var(--gold)!important}
.bk__opt--feature[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--plum)!important}
/* 2026-11-11: once another session is chosen the feature tile reads as an ordinary unchosen tile */
.bk__opts:has(>[aria-pressed="true"]:not(.bk__opt--feature)) .bk__opt--feature{background:var(--ivory)!important;box-shadow:inset 0 0 0 1px rgba(201,162,76,.55)!important}
/* chosen tile: a plum disc with a gold check that draws in, on the tile's top-right corner */
.bk__opt{position:relative}
.bk__opt::before,.bk__opt::after{content:"";position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;pointer-events:none;opacity:0}
.bk__opt::before{background:var(--plum);box-shadow:0 0 0 2px var(--ivory),0 3px 8px -3px rgba(74,16,41,.5);transform:scale(.5);transition:opacity .2s var(--ease-out),transform .35s var(--ease-out)}
.bk__opt::after{background:var(--gold-hi);clip-path:inset(0 100% 0 0);transition:clip-path .35s var(--ease-out) .12s,opacity 0s .12s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat}
.bk__opt[aria-pressed="true"]::before{opacity:1;transform:none}
.bk__opt[aria-pressed="true"]::after{opacity:1;clip-path:inset(0)}
.bk__opt--soft b{color:var(--plum-ink)}
.bk__seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk__seg button{min-height:48px;font-weight:600!important}
.bk__label{font-weight:600;text-align:center;color:var(--plum)}
.bk__days{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.bk__days button{flex:none;display:grid;gap:2px;width:60px;padding:8px 0;text-align:center;scroll-snap-align:start}
.bk__days b{font:600 1.4rem/1 var(--serif);color:var(--plum)}
.bk__days small{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--plum-ink)}
.bk__times{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.bk__times button{min-height:46px;font-weight:600!important}
.bk__hint{grid-column:1/-1;text-align:center;font-size:.9375rem;color:var(--plum-ink)}
.bk__sum{display:grid;margin:0}
.bk__sum div{display:grid;grid-template-columns:88px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.bk__sum dt{color:var(--plum-ink)}
.bk__sum dd{margin:0;font-weight:600}
.bk__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.bk__nav .btn{margin-left:auto;white-space:nowrap}
.bk__back{min-height:44px;padding:0 4px;border:0;background:none;cursor:pointer;font:600 1rem var(--body);color:var(--plum);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.bk.is-sent>*:not(.thanks){display:none}
.bk.is-sent .thanks{display:block;animation:rise .5s var(--ease-out)}
.bk [hidden]{display:none!important}
@media (max-width:720px){
  .bk{padding:18px 14px;border-radius:20px}
  .bk legend{font-size:1.4rem;margin-bottom:8px}
  .bk__opt{min-height:68px}
  .bk .field textarea{min-height:84px}
}

/* == FORMS AND LETTERS ================================================= */
/* 2026-11-10: minmax(0,1fr) tracks and min-width:0 on fields. An auto grid track grew to the input's
   built-in minimum width (about 20 characters), so on narrow cards the inputs ran past the card edge. */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.field label{font-weight:600;font-size:1rem;color:var(--plum-ink)}
.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;min-height:52px;padding:12px 16px;border-radius:14px;border:1px solid rgba(201,162,76,.6);background:#fffdf8;color:var(--ink);font:400 1rem/1.4 var(--body);transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 4px rgba(110,31,67,.14)}
.field input::placeholder,.field textarea::placeholder{color:#6e5a61}
.field--inline{display:flex;gap:10px}
.field--inline input{flex:1;min-width:0}
.form [aria-invalid="true"]{border-color:#a3263f}
.err{min-height:0;font-size:.9375rem;color:#8f1d36}
.err:empty{display:none}
.stubnote{font-size:.875rem;color:var(--plum-ink);opacity:.85}
.thanks{display:none;text-align:center}
.thanks h3{margin-bottom:6px}
.form.is-sent>*:not(.thanks){display:none}
.form.is-sent .thanks{display:block;animation:rise .5s var(--ease-out)}
@media (pointer:coarse){.field input,.field select,.field textarea{font-size:16px}}
@media (max-width:720px){.field--inline{flex-direction:column}.field--inline .btn{width:100%}}
.letters{display:grid;gap:var(--group) var(--gap);align-items:center;text-align:center}
.letters h2{margin-bottom:8px}
.letters .form{text-align:left;width:100%;max-width:560px;margin-inline:auto}
/* 721px+: the row wraps on the space it has; under ~485px the button drops below a full-width input (phones already stack) */
@media (min-width:721px){.letters .field--inline{flex-wrap:wrap}.letters .field--inline input{flex:1 1 240px}.letters .field--inline .btn{flex:1 0 auto}}
@media (min-width:1021px){.letters{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);text-align:left}.letters .form{margin:0}}

/* == FOOTER ============================================================ */
.site-foot{position:relative;isolation:isolate;overflow:clip;padding:48px 0 calc(28px + env(safe-area-inset-bottom,0px));color:rgba(251,247,239,.86);background:radial-gradient(80% 120% at 100% 0%,rgba(110,31,67,.6),rgba(110,31,67,0) 60%),var(--plum-deep)}
/* a faint gold flower of life in the plum (watermark), and a gold hairline on the top edge that draws out from
   the centre once, as the footer arrives (v2.js arms .site-foot like [data-motion]; reduced motion: drawn) */
.site-foot::before{content:"";position:absolute;z-index:-1;right:max(-160px,calc(50% - 820px));top:50%;width:min(600px,92vw);aspect-ratio:1;transform:translateY(-50%);background:var(--gold-soft);-webkit-mask:var(--svg-fol) center/contain no-repeat;mask:var(--svg-fol) center/contain no-repeat;opacity:.08;pointer-events:none}
.site-foot::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(227,201,142,0),rgba(227,201,142,.7) 22%,var(--gold-hi) 50%,rgba(227,201,142,.7) 78%,rgba(227,201,142,0));transform-origin:50% 50%}
.site-foot.is-armed::after{transition:transform 1.6s var(--ease-out) .2s}
.site-foot.is-armed:not(.is-on)::after{transform:scaleX(0)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:28px var(--gap);padding-bottom:28px}
.site-foot .brand{color:var(--ivory)}
.site-foot .brand__name{color:var(--ivory);font-size:1.75rem}
.site-foot .mark{--mark:64px}
.site-foot .mark__lotus{filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.foot__line{margin:14px 0 16px;max-width:24em;font-size:1rem;color:rgba(251,247,239,.78)}
.foot__social{display:flex;gap:10px}
.foot__social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgba(227,201,142,.5);transition:background-color .2s var(--ease-out),color .2s var(--ease-out)}
.foot__social svg{width:19px;height:19px}
.foot__social a:hover{background:rgba(243,226,180,.12)}
.site-foot :focus-visible{outline-color:var(--gold-hi)} /* the plum ring vanishes on plum-deep */
.foot__col h2{margin:6px 0 10px;font:500 .875rem/1 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.foot__col ul{margin:0;padding:0;list-style:none}
.foot__col a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;line-height:1.25;color:rgba(251,247,239,.92);text-decoration:none;transition:color .2s var(--ease-out)}
.foot__col a:hover{color:var(--gold-hi)}
.foot__small{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:0;padding-top:18px;border-top:1px solid rgba(251,247,239,.14);font-size:.9375rem;color:rgba(251,247,239,.62)}
/* credit line: exact behaviour from carson-design reference/credit-line.md */
.foot__credit{margin:10px 0 0;text-align:right;font-size:.9rem}
.foot__credit a{display:inline-block;padding:13px 6px;margin:-13px -6px;color:rgba(251,247,239,.6);text-decoration:none;transition:color .3s var(--ease-out)} /* padding grows the hit area to ~44px, the negative margin keeps the layout */
.foot__credit a:hover,.foot__credit a:focus-visible{color:var(--gold-hi)}
.foot__name{position:relative;display:inline-block}
.foot__name::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;opacity:.7;transform-origin:left center}
.foot__credit a.is-armed .foot__name::after{transform:scaleX(0)}
.foot__credit a.is-in .foot__name{animation:credit-name 2200ms ease both}
.foot__credit a.is-in .foot__name::after{animation:credit-line 2200ms ease both}
@keyframes credit-line{
  0%{transform:scaleX(0);height:2.5px;background:var(--gold);opacity:1;box-shadow:0 0 0 rgba(227,201,142,0)}
  30%{transform:scaleX(1);height:2.5px;background:var(--gold);opacity:1;box-shadow:0 0 12px 1px rgba(227,201,142,.95)}
  60%{transform:scaleX(1);height:2.5px;background:var(--gold);opacity:1;box-shadow:0 0 10px 1px rgba(227,201,142,.7)}
  100%{transform:scaleX(1);height:1.5px;background:currentColor;opacity:.7;box-shadow:0 0 0 rgba(227,201,142,0)}
}
@keyframes credit-name{0%,15%{color:inherit;text-shadow:none}35%,60%{color:var(--gold-hi);text-shadow:0 0 10px rgba(227,201,142,.55)}100%{color:inherit;text-shadow:none}}
@media (max-width:720px){
  .site-foot{padding:40px 0 calc(96px + env(safe-area-inset-bottom,0px))}
  .foot__top{grid-template-columns:1fr 1fr;gap:22px 18px;padding-bottom:22px}
  .foot__brand{grid-column:1/-1}
  .foot__small{justify-content:center;text-align:center}
  .foot__credit{text-align:center}
}

/* == SHARED PAGE BLOCKS ================================================ */
/* inner page header */
.page-head{position:relative;padding:calc(var(--head-h) + clamp(20px,4vw,48px)) 0 var(--section);text-align:center;background:radial-gradient(70% 90% at 50% 0%,rgba(239,227,238,.85),rgba(239,227,238,0) 70%),linear-gradient(180deg,var(--ivory-2),var(--ivory))}
.page-head .wrap>*+*{margin-top:14px}
.page-head h1{max-width:18em;margin-inline:auto}
.page-head .sub{max-width:30em;margin-inline:auto}
.page-head .lotus-rule{margin-block:18px}
.page-head__art{position:absolute;pointer-events:none;z-index:0}
.page-head .wrap{position:relative;z-index:1}
/* photo beside text */
.split{display:grid;gap:var(--stack) var(--gap);align-items:center}
@media (min-width:861px){.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}.split--flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.split--flip>.photo{order:2}}
.photo{position:relative;margin:0 14px 14px 0}
.photo::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:var(--r-card);background:var(--parchment);box-shadow:inset 0 0 0 1px var(--panel-line)}
.photo img{position:relative;width:100%;border-radius:var(--r-card);box-shadow:0 0 0 1px rgba(201,162,76,.5),var(--shadow-card)}
.photo figcaption{position:relative;margin-top:22px;text-align:center;font:italic 500 1.1rem/1.35 var(--serif);color:var(--plum-ink)}
@media (min-width:861px){.photo{margin:0 24px 24px 0}.photo::before{inset:24px -24px -24px 24px}}
/* quiet booking path that ends every page */
.book-cta{text-align:center}
.book-cta>*+*{margin-top:12px}
.book-cta>p{max-width:34em;margin-inline:auto;text-wrap:pretty}
.book-cta .btn{margin-top:var(--group)}
.book-cta__alt{font-size:.9375rem;color:var(--plum-ink)}
.book-cta__alt a{font-weight:600;white-space:nowrap}

/* == HERO PHOTO AND DEEP BANDS (2026-11-11, layout pass) ================
   .page-head--photo  Desktop (1021px+): a real photo out to the right screen edge, faded into the cream on
   its left, top and bottom; the text column sits to its left. The photo keeps its own shape: its height is
   the hero height under the header, its width that times --ph-ar (file width / height), capped at --ph-max.
   It sits on the hero's bottom edge, so heads stay under the header. Phones and tablets show no photo, and
   the <source media> means they never download it. */
.page-head__photo{display:none}
@media (min-width:1021px){
  .page-head--photo{--ph:clamp(600px,47vw,760px);--ph-w:min(var(--ph-max,50vw),calc((var(--ph) - var(--head-h) + 10px) * var(--ph-ar,.8)));display:grid;align-content:center;min-height:var(--ph);overflow-x:clip}
  .page-head--photo .wrap{max-width:none;padding-left:max(var(--gutter),calc(50vw - var(--max) / 2));padding-right:calc(var(--ph-w) * .8 + 2vw)}
  .page-head__photo{display:block;right:0;bottom:0;width:var(--ph-w);margin:0}
  .page-head__photo img{width:100%;height:auto;filter:sepia(.06) saturate(1.04);
    -webkit-mask:linear-gradient(90deg,transparent,#000 var(--ph-fl,42%)),linear-gradient(0deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 var(--ph-ft,9%));-webkit-mask-composite:source-in;
    mask:linear-gradient(90deg,transparent,#000 var(--ph-fl,42%)),linear-gradient(0deg,transparent,#000 18%),linear-gradient(180deg,transparent,#000 var(--ph-ft,9%));mask-composite:intersect}
  .page-head--photo .fol.page-head__art{display:none} /* the photo takes the flower of life's place */
  /* .page-head--wide: a landscape photo (--ph-ar about 1.5). It hangs from the header line, so the top right is never
     blank; the hero is as tall as the photo (or the text, if that is longer); the text stops 10% into the photo's fade. */
  .page-head--wide{--ph:calc(var(--ph-max,50vw) / var(--ph-ar,1.5) + var(--head-h) - 10px)}
  .page-head--wide .wrap{padding-right:calc(var(--ph-w) * .9 + 2vw)}
  .page-head--wide .page-head__photo{top:calc(var(--head-h) - 10px);bottom:auto}
}
@media (min-width:1021px) and (max-width:1279px){.page-head--wide{--ph-max:46vw}}
/* entrance: fades in with a 16px drift from the right, once on load (1.6s) */
@media (min-width:1021px) and (prefers-reduced-motion:no-preference){.page-head__photo img{animation:ph-in 1.6s cubic-bezier(.23,1,.32,1) .1s both}}
@keyframes ph-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* .band-deep  One deep band per page for a quote, a price block or a closing call (audit item 4).
   Ivory and gold-hi text on plum, gold hairlines top and bottom, glass cards, gold focus rings.
   .band-deep--dusk: plum into the soft lavender of the home hero's evening sky.
   Buttons inside: .btn--gold (main) or .btn--ivory. Keep a light section between a band and the footer. */
.band-deep{--on:rgba(251,247,239,.92);position:relative;z-index:1;isolation:isolate;padding-block:calc(var(--section) + 18px);color:var(--on);
  background:radial-gradient(80% 60% at 50% 0%,rgba(243,226,180,.12),rgba(243,226,180,0) 62%),radial-gradient(60% 80% at 100% 100%,rgba(110,31,67,.85),rgba(110,31,67,0) 70%),linear-gradient(180deg,var(--plum-deep),#3c0c21)}
.band-deep--dusk{background:radial-gradient(70% 55% at 50% 0%,rgba(243,226,180,.15),rgba(243,226,180,0) 60%),radial-gradient(70% 70% at 0% 100%,rgba(169,147,192,.28),rgba(169,147,192,0) 70%),linear-gradient(180deg,var(--plum-ink) 0%,var(--plum-deep) 48%,#552651 100%)}
.band-deep::before,.band-deep::after{content:"";position:absolute;z-index:-1;left:50%;width:min(100% - var(--gutter) * 2,var(--max));height:1px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(90deg,rgba(227,201,142,0),rgba(227,201,142,.7) 22%,var(--gold-hi) 50%,rgba(227,201,142,.7) 78%,rgba(227,201,142,0))}
.band-deep::before{top:14px}
.band-deep::after{bottom:14px}
.band-deep :is(h2,h3,h4,.card__title,.card__price){color:var(--gold-hi)}
.band-deep h2{text-wrap:balance}
.band-deep :is(p,li,.lede,.sub,.card__sub,.card__meta){color:var(--on)}
.band-deep .kicker,.band-deep .pullquote figcaption{color:var(--gold-soft)}
.band-deep .pullquote blockquote p,.band-deep .pull-line{color:var(--ivory)}
.band-deep .section-head p:not(.kicker){color:var(--on)}
.band-deep a:not(.btn){color:var(--gold-hi);text-decoration-color:rgba(243,226,180,.6)}
.band-deep .text-link span{background-image:linear-gradient(var(--gold-soft),var(--gold-soft))}
.band-deep .lotus-rule{background:var(--gold-soft)}
.band-deep :focus-visible{outline-color:var(--gold-hi)}
.band-deep .num{color:var(--gold-hi);background:radial-gradient(circle,rgba(243,226,180,.16),rgba(243,226,180,0) 70%);box-shadow:inset 0 0 0 1px var(--gold-soft),inset 0 0 0 5px rgba(227,201,142,.14)}
.band-deep :is(.card,.panel){background:linear-gradient(180deg,rgba(251,247,239,.1),rgba(251,247,239,.04));box-shadow:inset 0 0 0 1px rgba(227,201,142,.45),0 26px 50px -30px rgba(0,0,0,.6);color:var(--on)}
.band-deep .field label{color:var(--on)}
.band-deep .field input:focus{box-shadow:0 0 0 3px rgba(243,226,180,.6)}
.band-deep .err{color:var(--gold-hi)}
.band-deep .stubnote{color:var(--on)}
.band-deep .photo::before{background:rgba(243,226,180,.1);box-shadow:inset 0 0 0 1px rgba(227,201,142,.45)}
.band-deep .fold__chev{box-shadow:inset 0 0 0 1px rgba(227,201,142,.7)}
/* a "More details" fold inside a band: a glass bar like the band's cards (polish 2026-11-11; phone folds .fold--m keep their own bare look) */
.band-deep .fold:not(.fold--m)>.fold__btn{color:var(--gold-hi);background:linear-gradient(180deg,rgba(251,247,239,.1),rgba(251,247,239,.04));box-shadow:inset 0 0 0 1px rgba(227,201,142,.45)}
.band-deep .fold:not(.fold--m) .fold__text small{color:var(--on)}
.band-deep .fold:not(.fold--m) .fold__thumb{box-shadow:0 0 0 2px var(--plum-deep),0 0 0 3px var(--gold-soft)}
@media (hover:hover) and (pointer:fine){.band-deep .fold:not(.fold--m)>.fold__btn:hover{box-shadow:inset 0 0 0 1px var(--gold-soft)}}

/* == MOTION ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out) var(--d,0s),transform .9s var(--ease-out) var(--d,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal:target{transform:none;transition:opacity .8s var(--ease-out)} /* an anchor target skips the rise: the scroll is measured on the risen-from box, which left it 16px under the header */
/* photo settle (2026-11-11). v2.js adds .settle (and --settle-r, the photo's own corner radius) only when
   motion is allowed, then .is-in on entering, and removes both when it ends, so a photo is never left at 1.04.
   The clip keeps the zoom inside the rounded frame; in the last 18% it opens past the edge so the photo's
   own ring and shadow return softly instead of popping. .settle--own: the photo has its own clip-path. */
.settle:not(.is-in){transform:scale(1.04);clip-path:inset(1.923% round calc(var(--settle-r,0px) / 1.04))}
.settle.is-in{animation:settle 1.4s cubic-bezier(.23,1,.32,1) calc(var(--d,0s) + .12s) both}
.settle--own.is-in{animation-name:settle-own}
@keyframes settle{
  0%{transform:scale(1.04);clip-path:inset(1.923% round calc(var(--settle-r,0px) / 1.04))}
  82%{transform:none;clip-path:inset(0 round var(--settle-r,0px))}
  100%{transform:none;clip-path:inset(-64px round calc(var(--settle-r,0px) + 64px))}}
@keyframes settle-own{
  0%{transform:scale(1.04);clip-path:inset(1.923% round calc(var(--settle-r,0px) / 1.04))}
  100%{transform:none;clip-path:inset(0 round var(--settle-r,0px))}}
/* divider draw (2026-11-11): the lotus fades up in its slot, then the gold lines grow from the centre.
   Only clip-path, opacity and a 5px rise, so the mask that draws the rule is untouched. */
.draw:not(.is-in){opacity:0}
.draw.is-in{animation:draw 1.2s cubic-bezier(.23,1,.32,1) calc(var(--d,0s) + .15s) both}
@keyframes draw{
  0%{opacity:0;transform:translateY(5px);clip-path:inset(0 calc(50% - var(--lotus-w,0px) / 2 - 3px))}
  32%{opacity:1;transform:none;clip-path:inset(0 calc(50% - var(--lotus-w,0px) / 2 - 3px))}
  100%{opacity:1;transform:none;clip-path:inset(0 0)}}
/* soft cross-fade between pages (2026-11-11). Browsers without View Transitions load normally.
   The header gets its own name, so it stays put instead of fading with the page. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.23,1,.32,1)}
  .site-head{view-transition-name:site-head}
  ::view-transition-group(site-head),::view-transition-new(site-head){animation:none}
  ::view-transition-old(site-head){display:none}
}

/* == ACCESSIBILITY AND PREFERENCES ===================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:opacity .2s var(--ease-out)}
  .intro .site-head .mark__ring circle,.intro .site-head .mark__lotus{animation:none}
  .mark__tilt{transition:none;transform:none!important}
  .menu,.menu-open .menu{clip-path:none;opacity:0;transition:opacity .2s var(--ease-out),visibility 0s linear .2s}
  .menu-open .menu{opacity:1;transition:opacity .2s var(--ease-out),visibility 0s}
  .menu [data-stagger],.menu-open .menu [data-stagger]{transform:none;transition:opacity .2s var(--ease-out);transition-delay:0s}
  .swipe__btn--next{animation:none!important}
  .btn,.card--link,.journey-link{transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
  .btn:hover .btn__arrow{transform:none}
  .bk__step.is-on,.thanks,.lb[open]{animation-duration:.01s}
  .site-head,.site-head__bar,.site-head__bar::before,.mark,.menubtn{transition-duration:.01s}
  .fold__chev,.xcard__chev,.dock{transition-duration:.01s}
  .settle,.draw{animation:none!important;transform:none!important;opacity:1!important}
  .settle:not(.settle--own),.draw{clip-path:none!important}
  .xcard,.bk__steps li::before,.bk__opt::before,.bk__opt::after{transition-duration:.01s;transition-delay:0s}
  .xcard:hover{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .site-head__bar::before,.dock{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ivory)}
}
@media (prefers-contrast:more){
  .site-head__bar::before,.dock{background:var(--ivory);box-shadow:inset 0 0 0 1px var(--plum)}
}
@media print{.site-head,.dock,.menu{display:none}.reveal,.settle,.draw{opacity:1!important;transform:none!important;animation:none!important}.settle:not(.settle--own),.draw{clip-path:none!important}.fold__body[hidden],.xcard__more[hidden]{display:block!important}.fold__chev,.xcard__chev{display:none}}

/* == END BAND: Next card + booking (every page) ========================
   Audit item 12: the ending varies by its ground, set per page in the HTML (.section--ivory2 on About and
   the notes, .section--parchment on Coaching, Tarot & Reiki and the Journal, .section--dawn on
   Psychosynthesis and Turning Points), then the footer with its watermark and drawn top line. */
.endband__grid{display:grid;gap:var(--stack) var(--gap);align-items:center;max-width:calc(1040px + var(--gutter) * 2)}
.endband__next{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 18px;padding:20px 24px;border-radius:var(--r-card);background:var(--panel-bg);box-shadow:inset 0 0 0 1px var(--panel-line),var(--shadow-card);text-decoration:none;color:var(--plum);transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.endband__k{grid-column:1;font:500 .875rem/1.3 var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--plum-ink)}
.endband__t{grid-column:1;font:600 clamp(1.45rem,2.4vw,1.85rem)/1.15 var(--serif);text-wrap:balance}
.endband__line{grid-column:1;font:italic 500 1.1rem/1.35 var(--serif);color:var(--plum-ink);text-wrap:balance}
.endband__next svg{grid-column:2;grid-row:1/4;width:48px;height:48px;padding:13px;border-radius:50%;color:var(--gold-hi);background:var(--plum);transition:transform .2s var(--ease-out)}
.endband__next:active{transform:scale(.985)}
.endband__book{display:grid;justify-items:center;gap:12px;text-align:center}
.endband__alt{font-size:.9375rem;color:var(--plum-ink)}
.endband__alt a{display:inline-block;padding:12px 4px;margin:-12px 0;font-weight:600;white-space:nowrap} /* 44px tap height, same line box (2026-11-10) */
@media (min-width:861px){.endband__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
@media (hover:hover) and (pointer:fine){.endband__next:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gold),var(--shadow-lift)}.endband__next:hover svg{transform:translateX(3px)}}

/* == AD LANDING HEADER AND FOOTER (logo only) ========================== */
.site-head--min .site-head__bar{justify-content:center}
@media (min-width:721px){.site-head--min .site-head__bar{justify-content:flex-start}}
.site-foot--min .foot__top{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media (max-width:720px){.site-foot--min .foot__top{grid-template-columns:minmax(0,1fr)}}/* header: the brand never shrinks under the nav; nav tightens instead (Carson 2026-11-08) */
@media (min-width:1021px){.site-head__bar>.brand{flex:0 0 auto}.brand__tag{font-size:.875rem;letter-spacing:.1em}}
@media (min-width:1300px) and (max-width:1499px){.site-head:not(.is-stuck) .brand__name{font-size:1.85rem}.nav__list>li>a:not(.btn){padding:0 10px}.nav__list>li>a:not(.btn)::after{left:10px;right:10px}}

/* == LOGO FLAME (Carson 2026-11-09) ==================================
   The header lotus is two layers: .mark__lotus (base, flame tips faded out)
   and .mark__flame (flame only). The flame flickers from its base for about
   5 seconds after load, then rests (WCAG 2.2.2). Hovering the logo lights it
   again while the pointer stays. Off under reduced motion. */
.mark__flame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:translateZ(16px);transform-origin:50% 37%;pointer-events:none;
  filter:drop-shadow(0 4px 4px rgba(74,16,41,.2));animation:flame-burn 1.6s ease-in-out .9s 3 both}
@keyframes flame-burn{
  0%{transform:translateZ(16px) scale(1,1) skewX(0);filter:drop-shadow(0 0 0 rgba(255,184,92,0)) drop-shadow(0 4px 4px rgba(74,16,41,.2))}
  22%{transform:translateZ(16px) scale(1.012,1.05) skewX(-1.6deg);filter:drop-shadow(0 -2px 7px rgba(255,184,92,.55)) drop-shadow(0 4px 4px rgba(74,16,41,.2))}
  46%{transform:translateZ(16px) scale(.994,.982) skewX(1deg);filter:drop-shadow(0 -1px 4px rgba(255,184,92,.3)) drop-shadow(0 4px 4px rgba(74,16,41,.2))}
  72%{transform:translateZ(16px) scale(1.008,1.035) skewX(-.8deg);filter:drop-shadow(0 -2px 6px rgba(255,184,92,.45)) drop-shadow(0 4px 4px rgba(74,16,41,.2))}
  100%{transform:translateZ(16px) scale(1,1) skewX(0);filter:drop-shadow(0 0 0 rgba(255,184,92,0)) drop-shadow(0 4px 4px rgba(74,16,41,.2))}}
@media (hover:hover) and (pointer:fine){.brand:hover .mark__flame{animation:flame-burn 1.6s ease-in-out infinite}}
@media (prefers-reduced-motion:reduce){.mark__flame{animation:none!important}}
.intro .site-head .mark__flame{animation:lotus-rise 1s var(--ease-out) .65s both,flame-burn 1.6s ease-in-out 1.7s 3}
@media (prefers-reduced-motion:reduce){.intro .site-head .mark__flame{animation:none!important}}

/* H2 lotus (Carson 2026-11-09): simple lotus, flame centre petal with a small heart, drawn from her logo */
.lotus-rule{--lotus-w:46px;height:31px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%) left center/var(--_side) 1px no-repeat,url(/img/v2/lotus-simple.webp) center/var(--lotus-w) 31px no-repeat,linear-gradient(270deg,transparent,#000 70%) right center/var(--_side) 1px no-repeat;
  mask:linear-gradient(90deg,transparent,#000 70%) left center/var(--_side) 1px no-repeat,url(/img/v2/lotus-simple.webp) center/var(--lotus-w) 31px no-repeat,linear-gradient(270deg,transparent,#000 70%) right center/var(--_side) 1px no-repeat}

/* == LOGO FIRE (Carson 2026-11-09, option 6) ==========================
   Header logo is a looping animated WebP made from a video of her logo, with
   headroom above for the flame. Reduced motion gets the still logo. */
.mark__fire{position:absolute;inset:0;transform:translateZ(16px)}
.mark__fire .mark__lotus{transform:none}
@media (prefers-reduced-motion:no-preference){
  .mark__fire .mark__lotus{position:absolute;left:0;top:-16.6%;width:100%;height:116.6%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(74,16,41,.22))}
}