/* ==========================================================================
   Lady Rose Tarot — styles.css
   Art direction: ink and wash on cold-press paper.

   CONTENTS (search for the heading text)
     1. :root         palette, fonts, wordmark geometry, layout and motion tokens
     2. Base          reset, page ground, paper grain, focus styles, skip link
     3. Wordmark      the fixed header and the logo's scroll compression
     4. Buttons       the two actions (ink stamp / gilt-edged paper), coming-soon stamp,
                      the play glyph on "Sneak peek"
     5. Hero          layout, corner washes, card fan
     6. Sections      shared section grid, kickers, headings, lists, ornaments,
                      corner washes (.wc--*) and ink flicks (.ink--*)
     7. Reader / Readings / Events / Book / Deck / Close / Questions   per-section pieces, footer links
        Sneak peek   the full-screen video lightbox opened from the Deck section
     8. Reveal        the wet-brush mask that uncovers content on scroll
     9. Reduced motion

   The palette below is sampled from the card images in /Refs and is the
   only brand palette. Change a value here and it changes everywhere.
   Every colour outside this block is a var() reference or an rgba() of one
   of these values (used for hairlines and shadows).
   ========================================================================== */

/* ---------- Fonts, self-hosted (assets/fonts, latin subset, SIL Open Font License) ----------
   Served from this site rather than Google Fonts: one less third-party connection (faster on
   phones, nothing sent to Google about visitors, simpler security policy). Cormorant Garamond
   is a variable font, so one file covers weights 500-700. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url("assets/fonts/cormorant-garamond.woff2") format("woff2"); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italic.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap;
  src: url("assets/fonts/spectral-300.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap;
  src: url("assets/fonts/spectral-300-italic.woff2") format("woff2"); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/spectral-400.woff2") format("woff2"); }
@font-face { font-family: 'Pinyon Script'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/pinyon-script.woff2") format("woff2"); }

:root {
  /* Paper — sampled from card margins and washed skies */
  --paper:        #f0e9d7;  /* cream ground (Magician margin) */
  --paper-light:  #f4f3ec;  /* highlight paper (Temperance) */
  --paper-tea:    #e8ddc6;  /* tea-stained panel */
  --paper-stain:  #dbc8a4;  /* pooled tea (card back) */
  --paper-deep:   #d7bf97;  /* deep stain */

  /* Ink and lettering */
  --ink:          #311f1f;  /* soot ink */
  --wine:         #5a2a2d;  /* plum lettering on the cards */
  --umber:        #7b5749;  /* warm secondary text */

  /* Pigments */
  --rose:         #944d48;  /* rose madder, deep petal */
  --rose-mid:     #c0867c;
  --rose-pale:    #c78a8c;
  --gold:         #9c753f;  /* gilt frame */
  --gold-aged:    #b69d79;  /* aged gilt */
  --gold-light:   #d7b78e;  /* gilt highlight */
  --gold-text:    #7a5a2c;  /* gilt for small text: 5.2:1 on paper (WCAG AA). --gold and
                               --gold-aged are too pale for words; keep them for rules and art */
  --indigo:       #2c3d4f;  /* peacock indigo */
  --indigo-mid:   #526469;
  --teal:         #64828d;
  --sky:          #acb7c2;
  --sage:         #5d6650;  /* leaf */
  --sage-mid:     #8e9071;
  --sage-pale:    #b4b597;
  --lilac:        #8d7d99;  /* Temperance robe */

  /* Type */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:    'Spectral', Georgia, 'Times New Roman', serif;
  --font-script:  'Pinyon Script', 'Cormorant Garamond', cursive;

  /* Wordmark geometry. --wm-ratio-wide is the logo image's width / height; the
     large size in the hero and the 50px inscription in the header are both
     derived from it, so script.js only has to scale between the two. */
  --wm-ratio-wide:  3.197;
  --wm-big-w:   min(88vw, 940px);
  --wm-big-h:   calc(var(--wm-big-w) / var(--wm-ratio-wide));
  --wm-small-h: 50px;
  --safe-top:   env(safe-area-inset-top, 0px);
  --wm-top-big:   calc(var(--safe-top) + clamp(1.25rem, 4vh, 3rem));
  --wm-top-small: calc(var(--safe-top) + 9px);
  --header-h:     calc(var(--wm-small-h) + 18px + var(--safe-top));

  /* Layout. --edge is the slightly irregular border-radius that makes buttons
     and tabs look hand-cut rather than machine-rounded. */
  --container: 72rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --edge: 14px 4px 12px 5px / 5px 12px 4px 14px;   /* hand-cut paper edge */

  /* Motion */
  --ease-settle: cubic-bezier(.2, .85, .25, 1.04);
  --ease-out:    cubic-bezier(.16, .84, .3, 1);
}

@media (max-width: 639px) {
  :root {
    --wm-big-w:   92vw;
    --wm-small-h: 40px;
    --wm-top-big: calc(var(--safe-top) + clamp(1rem, 3vh, 2rem));
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Tea-stain ground behind everything (fixed, cheap gradients) */
.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 8% 6%,   rgba(219,200,164,.55), transparent 70%),
    radial-gradient(50% 40% at 95% 20%, rgba(172,183,194,.28), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(215,191,151,.45), transparent 70%),
    radial-gradient(40% 35% at 85% 85%, rgba(192,134,124,.16), transparent 70%);
}

/* Paper tooth: one grain layer, once, above the page at low opacity */
.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: url(assets/paper-grain.png) repeat;
  background-size: 320px 320px;
  mix-blend-mode: multiply;
  opacity: .8;
}

img { max-width: 100%; height: auto; display: block; }
/* Her artwork is not for saving: pictures ignore the pointer (so a right-click or
   long-press lands on the page, not the image), can't be dragged to the desktop,
   and iOS gets no "Save Image" sheet. The peek video keeps its controls; script.js
   blocks its context menu instead. A determined person can still screenshot. */
img, picture { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
video { -webkit-touch-callout: none; }
a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0 0 1.1em; }
strong, b { font-weight: 500; }

.visually-hidden {
  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-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--wine);
  color: var(--paper);
  padding: .6rem 1rem;
  font-family: var(--font-display);
  border-radius: var(--edge);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; outline: 2px solid var(--gold-light); outline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Wordmark — pinned manuscript title that compresses on scroll
   -------------------------------------------------------------------------- */
.wm {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  pointer-events: none;
}
.wm::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(240,233,215,.97), rgba(240,233,215,.9));
  border-bottom: 1px solid rgba(49,31,31,.28);
  box-shadow: 0 1px 0 rgba(156,117,63,.35);
  opacity: 0;
  transition: opacity .45s ease;
}
.wm.is-compact::before { opacity: 1; }

.wm-link {
  position: absolute;
  left: 50%;
  top: var(--wm-top-small);
  height: var(--wm-small-h);
  width: calc(var(--wm-small-h) * var(--wm-ratio-wide));
  transform: translateX(-50%);
  pointer-events: auto;
  display: block;
  border-radius: 4px;
}
.wm-link:focus-visible { outline-offset: 8px; }

.wm-img {
  position: absolute;
  top: 0; left: 50%;
  display: block;
  height: var(--wm-small-h);
  width: calc(var(--wm-small-h) * var(--wm-ratio-wide));
  max-width: none;
  transform-origin: 50% 0;
  transform: translateX(-50%);
  user-select: none;
  -webkit-user-drag: none;
}
/* Entrance: the painted lockup is uncovered by a wet brush, left to right */
.js .wm:not(.is-drawn) .wm-img { opacity: 0; }
.js .wm.is-drawing .wm-img {
  -webkit-mask-image: url(assets/brush-wipe.webp);
          mask-image: url(assets/brush-wipe.webp);
  -webkit-mask-size: 400% 100%;
          mask-size: 400% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: wmpaint 2.2s var(--ease-out) .35s forwards;
}
@keyframes wmpaint {
  from { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  12%  { opacity: 1; }
  to   { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* --------------------------------------------------------------------------
   Buttons — two actions, reused. Ink stamp and gilt-edged paper.
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  min-height: 3.25rem;
  padding: .85em 1.9em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  border-radius: var(--edge);
  cursor: pointer;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .35s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.985); }
button.btn { border: 0; }                 /* the booking form uses real <button>s */
button.btn:disabled { opacity: .6; cursor: progress; }
.btn--small { min-height: 2.75rem; padding: .7em 1.3em; font-size: .88rem; letter-spacing: .12em; }

/* Primary ("Book a reading"): wine ink stamp. The ::before is a 1px gilt ring drawn with
   a masked gradient; its background-position animates every 9s (the "sheen" keyframes)
   so a gold catch-light passes along the edge — the site's one continuous loop. */
.btn--primary {
  color: var(--paper-light);
  background:
    radial-gradient(120% 140% at 50% 30%, #6b3538 0%, var(--wine) 55%, #43202a 100%);
  box-shadow:
    0 1px 0 rgba(49,31,31,.4),
    0 14px 26px -16px rgba(49,31,31,.7);
}
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 11px 3px 9px 4px / 4px 9px 3px 11px;
  padding: 1px;
  background: linear-gradient(100deg,
    var(--gold-aged) 0%, var(--gold-aged) 38%,
    #f3e2bc 48%, var(--gold-light) 52%,
    var(--gold-aged) 62%, var(--gold-aged) 100%);
  background-size: 320% 100%;
  background-position: 100% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .8;
  animation: sheen 9s ease-in-out 3s infinite;
  pointer-events: none;
}
/* Secondary ("Visit the shop", "Get the book", "Get the deck", "Enquire"): paper with an
   ink hairline and an inner gilt line drawn with inset box-shadows; the rose icon sits left. */
.btn--secondary {
  color: var(--wine);
  background: var(--paper-light);
  box-shadow:
    inset 0 0 0 1px rgba(49,31,31,.75),
    inset 0 0 0 4px var(--paper-light),
    inset 0 0 0 5px rgba(156,117,63,.55),
    0 1px 0 rgba(49,31,31,.25),
    0 12px 24px -16px rgba(49,31,31,.5);
}
.btn--secondary .seal {
  width: 1.6em; height: 1.6em;
  flex: none;
  margin: -.3em .05em -.3em -.5em;
  filter: drop-shadow(0 1px 1px rgba(49,31,31,.25));
}
/* "Sneak peek": the deck video's invitation to press play — deliberately larger and
   louder than the other secondary buttons, in the section's own peacock indigo, with a
   slow glow pulsing around it and the play glyph sitting on its own gilt disc so the
   whole thing reads "watch this" rather than "read this". */
.btn--peek {
  color: var(--paper-light);
  background:
    radial-gradient(120% 140% at 50% 25%, #3d5266 0%, var(--indigo) 55%, #16222c 100%);
  box-shadow:
    0 1px 0 rgba(22,34,44,.5),
    0 18px 32px -16px rgba(22,34,44,.85),
    0 0 0 1px rgba(214,183,142,.55);
  min-height: 4.75rem;
  padding: 1.1em 2.6em;
  font-size: 1.25rem;
  letter-spacing: .18em;
  gap: 1em;
  animation: peek-glow 3.2s ease-in-out infinite;
}
.btn--peek .play {
  width: 2.3em; height: 2.3em;
  flex: none;
  margin: -.4em .1em -.4em -.75em;
  padding: .32em;
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--wine);
  background: radial-gradient(circle at 35% 30%, var(--gold-light) 0%, var(--gold) 62%, var(--gold-aged) 100%);
  box-shadow: 0 2px 8px rgba(22,34,44,.45);
  transition: transform .35s var(--ease-out);
  animation: peek-pulse 2.6s ease-in-out infinite;
}
@media (hover: hover) {
  .btn--peek:hover {
    background:
      radial-gradient(120% 140% at 50% 25%, #4b6379 0%, var(--indigo) 55%, #16222c 100%);
    box-shadow:
      0 1px 0 rgba(22,34,44,.5),
      0 24px 40px -16px rgba(22,34,44,.9),
      0 0 0 1px rgba(214,183,142,.8);
  }
  .btn--peek:hover .play { transform: scale(1.15); }
}
@keyframes peek-glow {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(22,34,44,.5),
      0 18px 32px -16px rgba(22,34,44,.85),
      0 0 0 1px rgba(214,183,142,.55),
      0 0 0 0 rgba(214,183,142,.4);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(22,34,44,.5),
      0 20px 38px -16px rgba(22,34,44,.9),
      0 0 0 1px rgba(214,183,142,.8),
      0 0 26px 8px rgba(214,183,142,.4);
  }
}
@keyframes peek-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn--primary:hover {
    box-shadow: 0 1px 0 rgba(49,31,31,.4), 0 22px 34px -18px rgba(49,31,31,.8);
  }
  .btn--primary:hover::before { opacity: 1; }
  .btn--secondary:not(.btn--peek):hover { background: var(--paper-tea); }
}

/* Signature loop: gold catch-light passing along gilt edges and rules */
@keyframes sheen {
  0%   { background-position: 100% 0; }
  28%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1rem;
}
@media (max-width: 479px) {
  .cta-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(var(--wm-top-big) + var(--wm-big-h) + clamp(1.5rem, 4vh, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  display: grid;
  align-content: center;
  overflow: hidden;
}
.hero-wm-space {           /* JS probe: where the large wordmark lives */
  position: absolute;
  top: var(--wm-top-big);
  left: 0;
  width: 1px;
  height: var(--wm-big-h);
  visibility: hidden;
}
.hero-washes {
  position: absolute;
  inset: -10% 0;
  pointer-events: none;
  z-index: 0;
}
.wash {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(.55);
  transition: opacity 1.8s ease var(--wd, 0s), transform 2.6s var(--ease-out) var(--wd, 0s);
  pointer-events: none;
}
.wash--sky   { background-image: url(assets/wash-sky.webp); }
.wash--lilac { background-image: url(assets/wash-lilac.webp); }
.wash--sage  { background-image: url(assets/wash-sage.webp); }
.wash.spatter { background-image: url(assets/spatter.webp); --wo: .9; transform: scale(.7); }
.wash.spatter--b { background-image: url(assets/spatter-2.webp); }
.intro .hero .wash, .no-intro .wash, .wash.is-in { opacity: min(1, calc(var(--wo, .7) * 1.35)); transform: scale(1); }
.wash--rose   { background-image: url(assets/wash-rose.webp); }
.wash--indigo { background-image: url(assets/wash-indigo.webp); }
.wash--gold   { background-image: url(assets/wash-gold.webp); }

.hero .wash--sky    { --wo: .5; width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -16vw; bottom: -14%; transition-delay: 0s; }
.hero .wash--indigo { --wo: .55; width: 44vw; height: 44vw; max-width: 620px; max-height: 620px; right: -18vw; top: -16%; transition-delay: .1s; }
.hero .wash--rose   { --wo: .6;  width: 42vw; height: 42vw; max-width: 600px; max-height: 600px; left: -18vw; bottom: -12%; transition-delay: .35s; }
.spatter--hero      { width: 18vw; height: 18vw; max-width: 260px; left: 4%; bottom: -2%; transition-delay: 1s; }
.hero .wash--gold   { --wo: .4;  width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: -12vw; top: -10%; transition-delay: .6s; }

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.hero-copy { text-align: center; max-width: 36rem; margin: 0 auto; }
.hero-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.3rem);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.hero-line em { font-style: italic; color: var(--wine); }
/* Section index: paper tabs with gilt edge and the section numeral */
.hero-index {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem .6rem;
  margin: 0 0 1.9rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-index a {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 2.5rem;
  padding: .5em 1em .5em .85em;
  color: var(--wine);
  text-decoration: none;
  background: var(--paper-light);
  border-radius: 10px 3px 9px 4px / 4px 9px 3px 10px;
  box-shadow:
    inset 0 0 0 1px rgba(49,31,31,.6),
    inset 0 0 0 3px var(--paper-light),
    inset 0 0 0 4px rgba(156,117,63,.5),
    0 1px 0 rgba(49,31,31,.2),
    0 8px 16px -12px rgba(49,31,31,.5);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s;
  -webkit-tap-highlight-color: transparent;
}
.hero-index .num {
  font-weight: 700;
  font-size: .85em;
  color: var(--gold-text);
  letter-spacing: .08em;
  padding-right: .55em;
  border-right: 1px solid rgba(156,117,63,.55);
}
.hero-index a:active { transform: translateY(1px); }
@media (hover: hover) {
  .hero-index a:hover {
    transform: translateY(-2px);
    background: var(--paper-tea);
    box-shadow:
      inset 0 0 0 1px rgba(49,31,31,.7),
      inset 0 0 0 3px var(--paper-tea),
      inset 0 0 0 4px rgba(156,117,63,.8),
      0 1px 0 rgba(49,31,31,.2),
      0 14px 22px -14px rgba(49,31,31,.6);
  }
}
.hero-copy .cta-row { justify-content: center; }

/* Card fan: three absolutely positioned cards. Before .is-settled they sit stacked and
   invisible; after it they translate/rotate into a fan with a slight overshoot easing. */
.fan {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 16 / 11;
  --card-w: clamp(96px, 27vw, 236px);
}
.fan-card {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--card-w);
  aspect-ratio: 2 / 3;
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-w) * -0.75);
  border-radius: 4% / 2.7%;
  transform: translate(0, 10%) rotate(0deg);
  opacity: 0;
  box-shadow:
    0 0 0 1px rgba(49,31,31,.35),
    0 1px 0 rgba(255,255,255,.35),
    0 22px 44px -20px rgba(49,31,31,.65);
  transition: transform 1.5s var(--ease-settle), opacity .8s ease, box-shadow .5s;
  will-change: transform;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.fan-card--l { transition-delay: .1s; z-index: 1; }
.fan-card--c { transition-delay: 0s;  z-index: 3; }
.fan-card--r { transition-delay: .2s; z-index: 2; }
.fan.is-settled .fan-card { opacity: 1; }
.fan.is-settled .fan-card--l { transform: translate(-60%, 5%) rotate(-15deg); }
.fan.is-settled .fan-card--c { transform: translate(0, -5%) rotate(0deg); }
.fan.is-settled .fan-card--r { transform: translate(60%, 5%) rotate(15deg); }
@media (hover: hover) {
  .fan.is-settled .fan-card:hover { z-index: 4; box-shadow: 0 0 0 1px rgba(49,31,31,.35), 0 34px 50px -22px rgba(49,31,31,.75); }
  .fan.is-settled .fan-card--l:hover { transform: translate(-60%, -1%) rotate(-15deg); transition-duration: .6s; }
  .fan.is-settled .fan-card--c:hover { transform: translate(0, -11%) rotate(0deg); transition-duration: .6s; }
  .fan.is-settled .fan-card--r:hover { transform: translate(60%, -1%) rotate(15deg); transition-duration: .6s; }
}
.splatter {
  position: absolute;
  width: 22%;
  left: -6%;
  bottom: 2%;
  opacity: .5;
  pointer-events: none;
}
/* Ink flicks placed through the sections (decorative, inline SVG via #o-splat) */
.ink {
  position: absolute;
  z-index: 0;
  width: clamp(90px, 12vw, 190px);
  height: auto;
  aspect-ratio: 3 / 2;
  color: var(--ink);
  opacity: 0;
  transform: scale(.6) rotate(var(--rot, 0deg));
  transition: opacity 1.2s ease var(--wd, .6s), transform 1.6s var(--ease-out) var(--wd, .6s);
  pointer-events: none;
}
.ink.is-in { opacity: .55; transform: scale(1) rotate(var(--rot, 0deg)); }
.ink--wine { color: var(--wine); }
.ink--indigo { color: var(--indigo); }
.ink--rose { color: var(--rose); }
.ink--gold { color: var(--gold); }

@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); gap: 4rem; }
  .hero-copy { text-align: left; margin: 0; }
  .hero-index { justify-content: flex-start; }
  .hero-copy .cta-row { justify-content: flex-start; }
  .fan { margin: 0 0 0 auto; }
}
@media (max-width: 1023px) {
  .fan { order: -1; }
}
@media (max-width: 639px) {
  .fan { --card-w: clamp(84px, 23vw, 104px); max-width: 300px; aspect-ratio: 16 / 10.5; }
  .hero { padding-bottom: 2rem; }
  .hero-inner { gap: 1.1rem; }
  .hero-line { font-size: clamp(1.35rem, 1rem + 1.9vw, 2.3rem); }
  .hero-index { margin-bottom: 1.4rem; font-size: .72rem; letter-spacing: .1em; gap: .45rem .45rem; }
  .hero-index a { min-height: 2.2rem; padding: .4em .75em .4em .65em; }
}
@media (max-height: 760px) and (max-width: 639px) {
  :root { --wm-big-w: 80vw; }
  .fan { --card-w: 78px; aspect-ratio: 16 / 9.5; }
  .hero-index { display: none; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: clamp(4.5rem, 10vw, 8.5rem) var(--gutter);
  scroll-margin-top: var(--header-h);
  overflow-x: clip;            /* blooms bleed past the edge without widening the page */
}
main { overflow-x: clip; }
.section-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  gap: clamp(2.25rem, 5vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .section-inner { grid-template-columns: 1fr 1fr; }
  .section-inner.flip .section-media { order: 2; }
}
.section-copy { max-width: 34rem; }
.kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.kicker::before { content: ""; width: 2.5rem; height: 1px; background: var(--gold-aged); }
.section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.7rem);
  line-height: 1.02;
  color: var(--wine);
  margin: .7rem 0 1.25rem;
  text-wrap: balance;
}
.section h2 .sub {
  display: block;
  font-size: .5em;
  font-weight: 500;
  font-style: italic;
  color: var(--umber);
  letter-spacing: .01em;
  margin-top: .35em;
}
.lead { font-size: 1.1em; }
.note {
  font-size: .86em;
  color: var(--umber);
  font-style: italic;
  margin-top: 1.25rem;
}
.section .cta-row { margin-top: 1.9rem; }

.ruled-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
}
.ruled-list li {
  padding: .85rem 0;
  border-top: 1px solid rgba(49,31,31,.24);
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .25rem 1rem;
  align-items: baseline;
}
.ruled-list li:last-child { border-bottom: 1px solid rgba(49,31,31,.24); }
.ruled-list .num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-text);
  letter-spacing: .06em;
}
.ruled-list b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22em;
  color: var(--wine);
  line-height: 1.2;
}
.ruled-list span:not(.num) { display: block; font-size: .95em; }

/* "Areas served" block in Readings: plain text for search engines, styled as a footnote */
.areas {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(49,31,31,.22);
}
.areas h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--wine);
  margin: 0 0 .4rem;
}
.areas p { font-size: .88em; color: var(--umber); margin: 0; }
.areas strong { font-weight: 500; color: var(--ink); }

/* Ornamental rule with a rose at the centre (gilt lines carry the catch-light) */
.rule-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 28rem;
  color: var(--wine);
}
.rule-ornament .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    var(--gold-aged) 0%, var(--gold-aged) 40%, #efdcb2 50%, var(--gold-aged) 60%, var(--gold-aged) 100%);
  background-size: 300% 100%;
  animation: sheen 9s ease-in-out infinite;
}
.rule-ornament .line:last-child { animation-delay: .5s; }
.rule-ornament .rose { width: 3.2rem; height: 3.2rem; flex: none; }

/* Corner and margin washes. Each section gets two large clouds in opposite corners or
   at the side margins (.wc--tl/tr/bl/br/l/r), a small spatter (.wc--*-sm) and an ink flick
   (.ink--*). Sizes are viewport-based and each is pushed part-way off the edge so it lives
   in the gutter and in the open band between sections, not under text or artwork.
   --wd staggers the bloom-in; --wo (set on the colour classes) is the resting opacity. */
.wc { --s: min(30vw, 420px); width: var(--s); padding-bottom: var(--s); }
.wc--tl { left: -12vw; top: -12%; --wd: .1s; }
.wc--tr { right: -12vw; top: -12%; --wd: .1s; }
.wc--bl { left: -12vw; bottom: -12%; --wd: .35s; }
.wc--br { right: -12vw; bottom: -12%; --wd: .35s; }
.wc--l  { left: -14vw; top: 28%; --wd: .2s; }
.wc--r  { right: -14vw; top: 28%; --wd: .2s; }
.wc--tl-sm, .wc--tr-sm, .wc--bl-sm, .wc--br-sm { --s: min(16vw, 220px); --wd: .8s; }
.wc--tl-sm { left: 1%; top: -4%; }
.wc--tr-sm { right: 1%; top: -4%; }
.wc--bl-sm { left: 1%; bottom: -4%; }
.wc--br-sm { right: 1%; bottom: -4%; }
.wash--lilac.wc, .wash--sage.wc { --wo: .5; }
.ink--tl { left: 2%;  top: 3%;    --rot: -30deg; }
.ink--tr { right: 2%; top: 3%;    --rot: 150deg; }
.ink--bl { left: 2%;  bottom: 3%; --rot: 20deg; --wd: 1s; }
.ink--br { right: 2%; bottom: 3%; --rot: -160deg; --wd: 1s; }
@media (max-width: 899px) {
  .wc { --s: min(38vw, 260px); }
  .wc--l, .wc--r { top: 40%; }
}
@media (min-width: 1500px) {
  .wc--tl, .wc--bl, .wc--l { left: calc((100vw - 72rem) / 2 - var(--s) * .7); }
  .wc--tr, .wc--br, .wc--r { right: calc((100vw - 72rem) / 2 - var(--s) * .7); }
}

/* Section washes (decorative pigment behind media and copy) */
.section .wash { z-index: 0; }
.section-media { position: relative; }
.section-media > :not(.wash) { position: relative; z-index: 1; }
.section-copy { position: relative; isolation: isolate; }
.section-copy > .wash { z-index: -1; }

}

/* The Reader — portrait on a pigment wash inside a gilt arch */
.portrait {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
}
.portrait-arch {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  padding: 3% 5% 0;
}
.portrait figcaption {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--wine);
  text-align: center;
  margin-top: .2rem;
}
.portrait figcaption span { display: block; }
.portrait .cap-name { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: .02em; }
.portrait .cap-real { font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); font-weight: 600; letter-spacing: .04em; margin-top: .15em; color: var(--umber); }
.creed {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--wine);
}
.creed li { display: flex; align-items: baseline; gap: .7rem; }
.creed li::before {
  content: "";
  flex: none;
  width: .75rem;
  height: 1px;
  background: var(--gold-aged);
  transform: translateY(-.35em);
}
.creed-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--wine);
  margin: 0 0 .4rem;
}
.creed-line b {
  font-style: normal;
  font-weight: 700;
  font-size: .82em;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* "Coming soon" ink-stamp tag on a button */
.btn--soon { margin-top: .5rem; }
.btn--soon .soon {
  position: absolute;
  top: -.85rem;
  right: -.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .16em;
  line-height: 1;
  padding: .4em .7em .35em;
  color: var(--paper-light);
  background: var(--rose);
  border-radius: 8px 3px 7px 3px / 3px 7px 3px 8px;
  box-shadow: 0 0 0 1px rgba(49,31,31,.35), 0 3px 6px -2px rgba(49,31,31,.45);
  transform: rotate(-4deg);
}

/* Readings */

/* Events — format grid */
.formats {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(49,31,31,.24);
  box-shadow: 0 0 0 1px rgba(49,31,31,.24);
}
.formats li {
  background: var(--paper);
  padding: 1.1rem 1.1rem 1.2rem;
}
.formats b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--wine);
  line-height: 1.15;
  margin-bottom: .4rem;
}
.formats .num { display: block; font-family: var(--font-display); font-weight: 700; color: var(--gold-text); letter-spacing: .1em; margin-bottom: .6rem; }
.formats span:not(.num) { font-size: .95em; }
@media (max-width: 479px) { .formats { grid-template-columns: 1fr; } }

/* Book */
.book-wrap { position: relative; max-width: 380px; margin: 0 auto; }
.book { width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 26px 30px rgba(49,31,31,.25)); }
@media (hover: hover) {
  .book { transition: transform .8s var(--ease-out); }
  .book-wrap:hover .book { transform: translateY(-6px) rotate(-.6deg); }
}

/* Ornament under the portrait, inside the arch */
.portrait-ornament {
  position: relative;
  z-index: 2;
  width: 72%;
  height: auto;
  margin: -14% auto .4rem;
  filter: drop-shadow(0 4px 6px rgba(49,31,31,.18));
}

/* Painted accents: rose and feather (Readings), peacock (Events), figure (Close) */
.accent { margin: 0; position: relative; z-index: 1; }
.accent img { width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(49,31,31,.22)); }
.accent--readings { max-width: 380px; margin: 0 auto; }
.accent--events   { max-width: 400px; margin: 0 auto; }
.accent--close    { width: min(300px, 55vw); margin: 0 auto 1.25rem; }
.accent--close img { filter: drop-shadow(0 12px 16px rgba(49,31,31,.2)); }
@media (max-width: 899px) {
  .accent--readings, .accent--events { max-width: 260px; }
}
@media (hover: hover) {
  .accent img { transition: transform 1s var(--ease-out); }
  .accent:hover img { transform: translateY(-6px); }
}

/* Deck — three faces that lift, with a bloom underneath */
.deck-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 2.6vw, 1.5rem);
  align-items: end;
}
.deck-card {
  position: relative;
  margin: 0;
  text-align: center;
  cursor: default;
}
.deck-card .bloom {
  position: absolute;
  inset: -28% -34% -10%;
  background: url(assets/wash-rose.webp) center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .7s ease, transform 1.1s var(--ease-out);
  pointer-events: none;
}
.deck-card:nth-child(2) .bloom { background-image: url(assets/wash-gold.webp); }
.deck-card:nth-child(3) .bloom { background-image: url(assets/wash-indigo.webp); }
.deck-card img {
  position: relative;
  z-index: 1;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4% / 2.7%;
  box-shadow: 0 0 0 1px rgba(49,31,31,.35), 0 18px 34px -18px rgba(49,31,31,.6);
  transition: transform .7s var(--ease-out), box-shadow .7s;
}
.deck-card figcaption {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--wine);
  margin-top: .8rem;
}
.deck-card figcaption i { display: block; font-weight: 500; font-size: .85em; color: var(--umber); }
.deck-card .badge {
  position: absolute;
  z-index: 2;
  top: -6%;
  right: -7%;
  width: clamp(2.6rem, 8vw, 4.2rem);
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(49,31,31,.35));
  transform: rotate(8deg);
}
@media (hover: hover) {
  .deck-card:hover img { transform: translateY(-12px) rotate(-1.2deg); box-shadow: 0 0 0 1px rgba(49,31,31,.35), 0 34px 44px -20px rgba(49,31,31,.7); }
  .deck-card:hover .bloom { opacity: .9; transform: scale(1); }
}
.deck-card.is-lifted img { transform: translateY(-12px) rotate(-1.2deg); }
.deck-card.is-lifted .bloom { opacity: .9; transform: scale(1); }

.collector {
  margin-top: 1.75rem;
  padding: 1.4rem 1.5rem 1.4rem 1.6rem;
  background: var(--paper-light);
  box-shadow:
    inset 0 0 0 1px rgba(49,31,31,.45),
    inset 0 0 0 5px var(--paper-light),
    inset 0 0 0 6px rgba(156,117,63,.6);
  border-radius: 2px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}
.collector .seal { width: 3.6rem; height: 3.6rem; margin-top: -.1rem; filter: drop-shadow(0 2px 3px rgba(49,31,31,.25)); }
.collector-plus {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--wine);
  margin: 0 0 .7rem;
}
.collector h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--wine);
  margin: 0 0 .4rem;
  line-height: 1.15;
}
.collector p { margin: 0; font-size: .95em; }

/* Sneak peek — the deck video in a lightbox. A native <dialog> opened with showModal()
   sits in the browser's top layer, above the header and the paper grain, and gives us
   Escape, focus containment and the ::backdrop for free. The video keeps its 768x1168
   shape and is sized by whichever is tighter, the screen's height or its width, so it
   fills a phone edge to edge and stands as a tall card on a desktop screen. Closed,
   the dialog is display:none and costs nothing. */
.peek {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  overflow: hidden;
}
.peek:not([open]) { display: none; }
.peek[open] { display: grid; place-items: center; }
.peek::backdrop {
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(90,42,45,.35), transparent 70%),
    rgba(33,20,20,.94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
html.peek-open { overflow: hidden; }

.peek-inner {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: .9rem;
  padding: calc(var(--safe-top) + 4rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1.1rem);
  animation: peek-in .55s var(--ease-out) both;
}
.peek-video {
  /* Height first: everything not taken by the padding above and the caption below.
     Then capped by the width the screen allows at the card's shape. */
  --peek-h: calc(100vh - var(--safe-top) - env(safe-area-inset-bottom, 0px) - 7.6rem);
  --peek-w: calc(100vw - 2rem);
  display: block;
  height: min(var(--peek-h), calc(var(--peek-w) * 1168 / 768));
  width: auto;
  aspect-ratio: 768 / 1168;
  background: #fff;
  border-radius: 4% / 2.7%;
  box-shadow:
    0 0 0 1px rgba(240,233,215,.28),
    0 30px 60px -24px rgba(0,0,0,.9);
}
@supports (height: 1dvh) {
  .peek-video { --peek-h: calc(100dvh - var(--safe-top) - env(safe-area-inset-bottom, 0px) - 7.6rem); }
}
.peek-inner figcaption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: var(--paper);
  text-align: center;
  line-height: 1.2;
}
.peek-kicker {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .3rem;
}
.peek-close {
  position: absolute;
  z-index: 2;
  top: calc(var(--safe-top) + .9rem);
  right: .9rem;
  width: 2.8rem; height: 2.8rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(240,233,215,.08);
  box-shadow: inset 0 0 0 1px rgba(215,183,142,.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s, transform .3s var(--ease-out);
}
.peek-close svg { width: 1.2rem; height: 1.2rem; }
.peek-close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
@media (hover: hover) {
  .peek-close:hover { background: rgba(240,233,215,.18); transform: rotate(90deg); }
}
@keyframes peek-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Close */
.close {
  text-align: center;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.close .section-inner { display: block; max-width: 44rem; }
.close-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 2rem 0 .6rem;
  text-wrap: balance;
}
.signature {
  font-family: var(--font-script);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  color: var(--wine);
  margin: 0 0 2rem;
  line-height: 1;
}
.close .cta-row { justify-content: center; }

/* Questions (FAQ): a ruled list of native <details>, one column, readable measure.
   The + turns to a − when open; no animation, so nothing to switch off for reduced motion. */
.faq-inner { position: relative; max-width: 46rem; margin: 0 auto; }
.faq-list { margin: 1.6rem 0 0; border-bottom: 1px solid rgba(49,31,31,.24); }
.faq-item { border-top: 1px solid rgba(49,31,31,.24); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 1.6rem;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0;
  min-height: 2.75rem;                 /* comfortable tap target */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.22em;
  line-height: 1.25;
  color: var(--wine);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  justify-self: end;
  font-weight: 500;
  font-size: 1.4em;
  line-height: .8;
  color: var(--gold-text);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--rose); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.faq-item p { margin: -.2rem 0 1.1rem; max-width: 40rem; }
.faq .cta-row { margin-top: 1.8rem; }

/* Sessions: the public offerings (filled by booking.js) and the request form.
   Cards and the form share the gilt-edged paper panel of the deck's collector note. */
.sessions-inner { position: relative; max-width: 64rem; margin: 0 auto; }
.sessions .lead { max-width: 44rem; }
.currency-switch { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin: 1.2rem 0 .8rem; font-size: .9rem; color: var(--umber); }
.currency-switch[hidden] { display: none; }
.currency-switch button {
  font: 600 .9rem/1 var(--font-display); letter-spacing: .12em; color: var(--wine);
  padding: .55rem .9rem; min-height: 2.5rem; background: transparent; cursor: pointer;
  border: 1px solid rgba(49,31,31,.3); border-radius: var(--edge);
}
.currency-switch button[aria-pressed="true"] { background: var(--wine); color: var(--paper-light); border-color: var(--wine); }
.session-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; margin: .4rem 0 2.4rem; }
.session-list[aria-busy="true"]::after { content: "Loading sessions\2026"; color: var(--umber); font-style: italic; }
.session-empty { grid-column: 1 / -1; color: var(--umber); }
.session-card, .booking-form, .form-done {
  background: var(--paper-light);
  box-shadow: inset 0 0 0 1px rgba(49,31,31,.45), inset 0 0 0 5px var(--paper-light), inset 0 0 0 6px rgba(156,117,63,.6);
  border-radius: 2px;
}
.session-card { display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.3rem; }
.session-card h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--wine); }
.session-meta { margin: .35rem 0 .6rem; font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; color: var(--gold-text); }
.session-tag { margin: 0 0 .7rem; font-style: italic; }
.session-inc { margin: 0 0 1.1rem; padding-left: 1.1rem; font-size: .92em; color: var(--umber); }
.session-inc li { margin: .15rem 0; }
.session-card .btn { margin-top: auto; align-self: flex-start; }
.booking-form, .form-done { padding: clamp(1.4rem, 3vw, 2.2rem); max-width: 46rem; }
.booking-form h3, .form-done h3 { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--wine); }
.booking-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.form-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.form-row label { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.form-row .optional { font-weight: 500; color: var(--umber); }
.form-row input, .form-row select, .form-row textarea {
  font: 400 1rem/1.4 var(--font-body); color: var(--ink);
  background: #fffdf7; border: 1px solid rgba(49,31,31,.35); border-radius: 3px;
  padding: .7rem .8rem; min-height: 2.9rem; width: 100%;
}
.form-row textarea { resize: vertical; }
.form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.form-row input:user-invalid, .form-row textarea:user-invalid { border-color: var(--rose); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; margin: .8rem 0 .4rem; color: var(--umber); }
.form-status.is-error { color: var(--rose); }
.form-done:focus { outline: none; }
.form-done p { margin: 0; }

.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; margin-bottom: .9rem; }
.foot-nav a { color: var(--wine); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; padding: .35rem 0; }
.foot-nav a:hover { text-decoration: underline; }

footer {
  padding: 1.5rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(49,31,31,.22);
  text-align: center;
  font-size: .82rem;
  color: var(--umber);
}
footer p { margin: .2em 0; }

/* --------------------------------------------------------------------------
   Reveal — content arrives like a page uncovered by a wet brush.
   The element is masked with brush-wipe.webp (opaque left, feathered right edge)
   at 400% width, parked so only the transparent part covers the element; .is-in
   slides the mask left over 1.4s, uncovering the content behind a ragged edge.
   .is-done (added by script.js after the transition) removes the mask entirely so
   the element is no longer composited separately. Only applies when JS runs.
   -------------------------------------------------------------------------- */
.js .reveal {
  -webkit-mask-image: url(assets/brush-wipe.webp);
          mask-image: url(assets/brush-wipe.webp);
  -webkit-mask-size: 400% 100%;
          mask-size: 400% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  transition: -webkit-mask-position 1.4s var(--ease-out) var(--rd, 0s);
  transition: mask-position 1.4s var(--ease-out) var(--rd, 0s), -webkit-mask-position 1.4s var(--ease-out) var(--rd, 0s);
}
.js .reveal.is-in {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}
.js .reveal.is-done {
  -webkit-mask-image: none;
          mask-image: none;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { -webkit-mask-image: none !important; mask-image: none !important; }
  .wash { opacity: min(1, calc(var(--wo, .7) * 1.35)); transform: none; }
  .fan-card { opacity: 1; }
  .fan-card--l { transform: translate(-60%, 5%) rotate(-15deg); }
  .fan-card--c { transform: translate(0, -5%); }
  .fan-card--r { transform: translate(60%, 5%) rotate(15deg); }
  .btn--primary::before, .rule-ornament .line { animation: none; background-position: 0 0; }
  .js .wm .wm-img { opacity: 1; animation: none; -webkit-mask-image: none; mask-image: none; }
}