/* ===========================================================================
   A Life Revolution — Hélène
   Design language: "an ancient illuminated manuscript, lovingly restored."

   Not a spa site. Not minimal Scandinavian. Every surface is aged parchment,
   burnished gold, faint sacred geometry. Nothing digitally perfect; nothing
   flat. The ribbon — pressed into the paper like letterpress, edges catching
   gold — is the narrative thread: it flows from the logo and blooms into
   sacred geometry at each section.

   Palette (client brief — layered neutrals, no bright yellow gold):
     Parchment #F7F1E7 · Ivory #FBF8F3 · Champagne #F3E5C3
     Antique Gold #C6A25A · Burnished Gold #A47B33 · Bronze #8C6A43
     Walnut #4A3526 · Olive Sage #8A9173 · Stone #D7D0C5
   ======================================================================== */

:root {
  /* --- aged neutrals --- */
  --parchment:   #F7F1E7;
  --ivory:       #FBF8F3;
  --champagne:   #F3E5C3;
  --stone:       #D7D0C5;

  /* --- metals (decorative — never for small text on light ground) --- */
  --gold:        #C6A25A;
  --gold-deep:   #A47B33;
  --bronze:      #8C6A43;

  /* --- inks --- */
  --walnut:      #4A3526;
  --walnut-deep: #382919;
  --night:       #2E2113;          /* footer / darkest plate */
  --olive:       #8A9173;
  --ink:         #43301F;
  --muted:       #71603E;          /* AA on parchment for 16px+ */
  --bronze-ink:  #7E5E37;          /* darkened bronze — AA for small caps */

  /* --- on-dark inks --- */
  --lt:          #F7F1E7;
  --lt-soft:     rgba(247, 241, 231, 0.8);
  --lt-faint:    rgba(247, 241, 231, 0.6);

  --serif:  "Cormorant Garamond", "EB Garamond", "Iowan Old Style", Georgia, serif;
  --sans:   "Inter", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;

  --wrap: 1180px;
  --r:    6px;                     /* plaques, not pills */
  --r-lg: 10px;
  --shadow:    0 24px 60px rgba(56, 41, 25, 0.14);
  --shadow-sm: 0 10px 28px rgba(56, 41, 25, 0.10);
  --ease: cubic-bezier(0.25, 0.46, 0.2, 1);
  --slow: 1.1s;

  /* engraved hairlines */
  --line:      rgba(140, 106, 67, 0.34);
  --line-soft: rgba(140, 106, 67, 0.2);
  --line-gold: rgba(198, 162, 90, 0.55);

  /* --- texture plates (pure CSS/SVG — no image downloads) --- */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012 0.18' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.4'/%3E%3C/svg%3E");
  /* flower-of-life lattice — overlapping circle grid, barely-there */
  --geometry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='222' viewBox='0 0 128 222'%3E%3Cg fill='none' stroke='%238C6A43' stroke-width='0.8' opacity='0.5'%3E%3Ccircle cx='0' cy='0' r='64'/%3E%3Ccircle cx='128' cy='0' r='64'/%3E%3Ccircle cx='64' cy='111' r='64'/%3E%3Ccircle cx='0' cy='222' r='64'/%3E%3Ccircle cx='128' cy='222' r='64'/%3E%3C/g%3E%3C/svg%3E");
  /* seed-of-life rosette — blooms above section headings */
  --rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23A47B33' stroke-width='1.7'%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Ccircle cx='32' cy='23' r='9'/%3E%3Ccircle cx='32' cy='41' r='9'/%3E%3Ccircle cx='24.2' cy='27.5' r='9'/%3E%3Ccircle cx='39.8' cy='27.5' r='9'/%3E%3Ccircle cx='24.2' cy='36.5' r='9'/%3E%3Ccircle cx='39.8' cy='36.5' r='9'/%3E%3Ccircle cx='32' cy='32' r='18' opacity='0.55'/%3E%3C/g%3E%3C/svg%3E");
  /* corner floret — engraved into card corners */
  --floret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23A47B33' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 38 C2 20 8 8 26 5 M2 38 C20 38 32 32 35 14'/%3E%3Cpath d='M26 5 c3 4 1 8 -4 9 c-1 -5 0 -8 4 -9 Z M35 14 c-4 3 -8 1 -9 -4 c5 -1 8 0 9 4 Z'/%3E%3Ccircle cx='9' cy='31' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* nothing may ever push the page sideways */
html, body { overflow-x: clip; }

/* the scrollbar belongs to the manuscript too — burnished gold on parchment */
html { scrollbar-width: thin; scrollbar-color: #A47B33 #EFE6D4; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #EFE6D4; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C6A25A, #A47B33);
  border-radius: 6px; border: 2px solid #EFE6D4;
}
::-webkit-scrollbar-thumb:hover { background: #B8934C; }

/* =======================  the living page  =======================
   Layered like handmade paper: warm wash → watercolour stains →
   faint geometry → paper grain. The grain sits over everything
   (soft-light, pointer-events none) so even photographs feel printed. */
body {
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.75;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  background-color: var(--parchment);
  background-image:
    radial-gradient(1100px 640px at 50% -160px, rgba(243, 229, 195, 0.7), transparent 65%),
    radial-gradient(1000px 780px at 88% 12%,  rgba(138, 145, 115, 0.09), transparent 70%),
    radial-gradient(820px 700px at 6% 42%,    rgba(164, 123, 51, 0.07),  transparent 70%),
    radial-gradient(900px 720px at 78% 88%,   rgba(140, 106, 67, 0.08),  transparent 72%),
    /* tonal variation in the sheet itself — four small, weak, off-centre
       pools. Paper that has aged is never one colour, but the moment any of
       these is strong enough to find on its own it stops reading as paper
       and starts reading as a stain. */
    radial-gradient(340px 260px at 22% 18%, rgba(176, 132, 62, 0.07), transparent 70%),
    radial-gradient(280px 380px at 91% 46%, rgba(150, 112, 54, 0.06), transparent 72%),
    radial-gradient(420px 300px at 8% 74%,  rgba(168, 128, 68, 0.058), transparent 70%),
    radial-gradient(300px 240px at 64% 92%, rgba(160, 120, 58, 0.052), transparent 70%),
    linear-gradient(180deg, #FBF8F3 0%, #F7F1E7 32%, #F2E9D8 100%);
  position: relative;
}
/* Faint sacred lattice behind everything.
   0.11 on the layer with the lattice's own strokes at 0.5 inside its
   data-URI — the same 0.055 it has always rendered at. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--geometry);
  background-size: 128px 222px;
  opacity: 0.11;
}
/* paper grain over everything — the "printed, not built" veil */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: var(--noise);
  background-size: 220px 220px;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
main, header, section, footer { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(198, 162, 90, 0.35); }

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--walnut);
}
h1 { font-weight: 500; }

/* the script voice — used only for a single word: life, journey, breathe */
.script { font-family: var(--script); font-weight: 400; font-style: normal; letter-spacing: 0; }
h1 .script, h2 .script { font-size: 1.28em; line-height: 0.8; color: var(--gold-deep); }
.section-forest .script, .section-deep .script, .page-hero .script { color: var(--gold); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }
.center { text-align: center; }

/* --- eyebrow: an illuminated rubric — small caps between gold hairlines --- */
.eyebrow {
  font-family: var(--serif);
  font-size: 14px; font-weight: 600; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--bronze-ink);
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.eyebrow::before, .center .eyebrow::after {
  content: ""; height: 1px; flex: none; width: 34px;
  background: linear-gradient(90deg, transparent, var(--line-gold));
}
.center .eyebrow::before { background: linear-gradient(90deg, transparent, var(--line-gold)); }
.center .eyebrow::after  { background: linear-gradient(90deg, var(--line-gold), transparent); }
.center .eyebrow { justify-content: center; }

/* =======================  ornaments  ======================= */
/* rosette that crowns a centred section heading — the ribbon's bloom */
.orn { display: flex; justify-content: center; margin-bottom: 14px; }
.orn::before {
  content: ""; width: 52px; height: 52px;
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.8;
}
/* botanical divider — a drawn flourish, not a border */

/* =======================  header  ======================= */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(247, 241, 231, 0.92);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(251, 248, 243, 0.8) inset, 0 10px 30px rgba(56, 41, 25, 0.06);
}
/* double gold hairline under the header — a ruled manuscript margin */
.site-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--line-gold) 30%, var(--line-gold) 70%, transparent 96%);
  opacity: 0.6; pointer-events: none;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 82px; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
/* the medallion artwork as brand mark — cropped tight to its gold rim */
.brand-mark {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 32%, #5C4126, var(--walnut-deep) 68%);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(164, 123, 51, 0.55), 0 0 0 3px rgba(164, 123, 51, 0.14),
              0 4px 12px rgba(56, 41, 25, 0.28), inset 0 1px 2px rgba(243, 229, 195, 0.25);
}
.brand-mark img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  transform: scale(1.02);
}
.brand-name {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--walnut); line-height: 1.08; letter-spacing: 0.02em;
}
.brand-sub {
  font-family: var(--serif);
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--bronze-ink); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  text-decoration: none; font-family: var(--serif);
  font-size: 16.5px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--ink);
  position: relative; padding: 4px 0; transition: color 0.3s var(--ease);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -3px; height: 1px;
  background: var(--gold-deep);
  transition: left 0.4s var(--ease), right 0.4s var(--ease);
}
.nav a:hover { color: var(--walnut-deep); }
.nav a:hover::after, .nav a.active::after { left: 0; right: 0; }
.nav a.active { color: var(--walnut-deep); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; color: var(--walnut);
}

/* =======================  buttons — engraved brass plaques  ======================= */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 32px; border-radius: var(--r);
  text-decoration: none; cursor: pointer; white-space: nowrap; max-width: 100%;
  border: 1px solid rgba(74, 53, 38, 0.5);
  transition: box-shadow 0.45s var(--ease), filter 0.45s var(--ease);
}
/* the engraved inner border, set 3px into the metal */
.btn::after {
  content: ""; position: absolute; inset: 3px; border-radius: 3px;
  border: 1px solid rgba(56, 41, 25, 0.3);
  box-shadow: 0 1px 0 rgba(251, 248, 243, 0.28);
  pointer-events: none;
}
.btn-gold {
  color: #33230F;
  background:
    var(--fibres),
    linear-gradient(180deg, #DDBE85 0%, #C6A25A 42%, #A47B33 100%);
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(251, 248, 243, 0.55),
    inset 0 -3px 6px rgba(56, 41, 25, 0.28),
    0 6px 20px rgba(116, 87, 41, 0.28);
  text-shadow: 0 1px 0 rgba(251, 248, 243, 0.35);
}
.btn-gold:hover, .btn-gold:focus-visible {
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(251, 248, 243, 0.6),
    inset 0 -3px 6px rgba(56, 41, 25, 0.24),
    0 8px 26px rgba(116, 87, 41, 0.38),
    0 0 24px rgba(198, 162, 90, 0.35);
}
.btn-primary {
  color: var(--champagne);
  background: linear-gradient(180deg, #5C4126 0%, var(--walnut) 50%, var(--walnut-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(243, 229, 195, 0.22),
    inset 0 -3px 6px rgba(20, 12, 5, 0.4),
    0 6px 20px rgba(56, 41, 25, 0.3);
}
.btn-primary::after { border-color: rgba(198, 162, 90, 0.35); box-shadow: none; }
.btn-primary:hover, .btn-primary:focus-visible {
  filter: brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(243, 229, 195, 0.28),
    inset 0 -3px 6px rgba(20, 12, 5, 0.35),
    0 8px 26px rgba(56, 41, 25, 0.4), 0 0 22px rgba(198, 162, 90, 0.22);
}
.btn-ghost {
  color: var(--walnut); background: rgba(251, 248, 243, 0.5);
  border-color: rgba(140, 106, 67, 0.55);
  box-shadow: inset 0 1px 0 rgba(251, 248, 243, 0.7);
}
.btn-ghost::after { border-color: rgba(140, 106, 67, 0.28); box-shadow: none; }
.btn-ghost:hover, .btn-ghost:focus-visible {
  box-shadow: inset 0 1px 0 rgba(251, 248, 243, 0.7), 0 0 20px rgba(198, 162, 90, 0.25);
}
.btn-lg { padding: 18px 40px; font-size: 17px; }
/* the header plaque sits among 16.5px nav links — at full button size it
   shouts over them, so it is scaled down to sit level with the navigation */
.site-head .nav .btn {
  font-size: 13px; letter-spacing: 0.1em;
  padding: 10px 18px;
}
.site-head .nav .btn::after { inset: 2px; }
a:focus-visible, button:focus-visible, .choice:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 3px;
}

/* =======================  ceremonial hero (home)  ======================= */
.hero {
  position: relative; overflow: hidden;
  padding: 68px 0 44px; text-align: center;
}
/* volumetric light — soft rays behind the emblem */
.hero::before {
  content: ""; position: absolute; inset: -20% -10%; pointer-events: none;
  background:
    radial-gradient(46% 38% at 50% 30%, rgba(243, 229, 195, 0.85), transparent 70%),
    conic-gradient(from 178deg at 50% 30%,
      transparent 0deg,  rgba(198, 162, 90, 0.10) 8deg,  transparent 18deg,
      transparent 40deg, rgba(198, 162, 90, 0.08) 48deg, transparent 58deg,
      transparent 300deg, rgba(198, 162, 90, 0.09) 310deg, transparent 322deg,
      transparent 336deg, rgba(198, 162, 90, 0.1) 346deg, transparent 356deg);
  animation: rays 26s var(--ease) infinite alternate;
  /* fade the light out before the hero ends — no hard shading seam */
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 60%, transparent 94%);
}
@keyframes rays { from { opacity: 0.7; } to { opacity: 1; } }
.hero .wrap { position: relative; z-index: 1; }

/* the emblem — logo medallion with the great Flower of Life waking behind it */
.emblem { position: relative; width: min(620px, 100%); margin: 0 auto 8px; }
.emblem-geometry {
  /* explicit offsets + size, not `inset`/`aspect-ratio` — older Chrome/WebViews
     drop unknown shorthands and pin the flower to the top-left */
  position: absolute; top: -18%; left: -18%; width: 136%; height: 136%;
  pointer-events: none;
  transform-origin: 50% 50%; transform-box: border-box;
  animation: turn 240s linear infinite;
  opacity: 0.5;
}
@keyframes turn { to { transform: rotate(360deg); } }
/* golden light bursting from the mandala — wakes further as you scroll.
   --burst (0→1) is set by app.js from scroll position. */
.emblem-burst {
  /* taller than the emblem so the light spills down the page below the coin */
  position: absolute; top: -30%; left: -40%; width: 180%; height: 200%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%,
      rgba(248, 224, 158, 1) 0%, rgba(228, 192, 116, 0.55) 20%,
      rgba(220, 182, 110, 0.2) 36%, transparent 56%),
    repeating-conic-gradient(from 8deg at 50% 40%,
      rgba(224, 190, 120, 0) 0deg,
      rgba(233, 202, 134, 0.48) 4deg,
      rgba(224, 190, 120, 0) 9deg,
      rgba(240, 214, 152, 0.3) 13deg,
      rgba(224, 190, 120, 0) 19deg);
  -webkit-mask-image: radial-gradient(ellipse 52% 42% at 50% 38%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 52% 42% at 50% 38%, #000 40%, transparent 100%);
  filter: blur(5px);
  opacity: calc(0.7 + var(--burst, 0) * 0.3);
  transform: scale(calc(0.97 + var(--burst, 0) * 0.14));
  transform-origin: 50% 40%;
  animation: burstTurn 70s linear infinite;
  transition: opacity 0.35s linear;
}
@keyframes burstTurn { to { rotate: 360deg; } }
/* The aum, sitting just outside the gold band on the right.
   The band's outer edge falls at 89.6% of the emblem's width, so 91% puts
   the glyph clear of it without a gap opening up. No z-index, and first in
   the markup, so the flower of life paints over it.
   It is dropped below 760px. Above that the emblem is capped at 620 and the
   glyph still lands inside the window; below it the emblem goes full-width,
   and anything reaching past its right edge is cut by the page overflow. */
.emblem-aum {
  position: absolute; left: 91%; top: 47%;
  transform: translateY(-50%);
  font-family: "Noto Serif Devanagari", "Noto Sans Devanagari", serif;
  font-size: 96px; line-height: 1;
  color: #B0722F;
  opacity: 0.3;
  pointer-events: none; user-select: none;
}
.dk .emblem-aum { color: #D9BA73; opacity: 0.34; }


@media (max-width: 760px) { .emblem-aum { display: none; } }

/* The white glow behind the wordmark.

   It has to be its own layer underneath, not a filter on the type: the
   lockup is composited with mix-blend-mode multiply so the letters read
   through the light rays behind them, and multiply annihilates white —
   a glow drawn inside that layer would be exactly nothing.

   Underneath, it works with the blend rather than against it. Multiplying
   gold over white leaves the gold untouched, so the letters stay crisp and
   only the ground behind them lifts. The ring is centred on the text's own
   radius: 190 of the lockup's units is 59% of the emblem's half-width. */
.emblem-typeglow {
  position: absolute; z-index: 1; pointer-events: none;
  left: 4%; top: 4%; width: 92%; height: 92%; border-radius: 50%;
  background: radial-gradient(circle,
    transparent 42%,
    rgba(255, 253, 248, 0.42) 57%,
    rgba(255, 252, 245, 0.36) 67%,
    transparent 82%);
  filter: blur(15px);
}
.dk .emblem-typeglow {
  background: radial-gradient(circle,
    transparent 42%,
    rgba(255, 248, 232, 0.16) 58%,
    rgba(255, 246, 226, 0.13) 66%,
    transparent 80%);
}

.emblem-lockup {
  position: relative; z-index: 3; width: 100%; height: auto;
  /* transparent type: where the orbiting letters or the gold band pass
     over the light rays or any part of the emblem, the light reads
     through the ink instead of being pasted over it */
  mix-blend-mode: multiply;
}
/* A L I R E N — the letters hidden inside "A life REVOLUTION".
   Filled with the medallion's own deep green, nothing more: no stroke,
   no filter, no halo. Quietly part of the same object. */
.emblem-lockup .aliren {
  fill: url(#alirenGrad);
}

/* ---- ALIREN: green while it is a word, gold once it is a phrase ----------
   The colour is animated on the gradient's own stops rather than on the
   letters. `fill` cannot transition between `url(#alirenGrad)` and
   `url(#goldText)` — a paint server is not an interpolatable value — but
   stop-color is an ordinary animatable colour, so moving the gradient moves
   every letter that references it, and the letters keep their gradient fill
   throughout.

   Two animations rather than one. The settle has to run once and only once,
   after the reveal; the breathing has to run forever. A single infinite
   animation cannot have an intro. The second begins where the first ends,
   on the same gold, so the join is invisible. */
#alirenGrad stop {
  animation:
    alirenSettle 1.3s var(--ease) 3.6s both,
    alirenBreathe 18s ease-in-out 5s infinite;
}
@keyframes alirenSettle {
  from { stop-color: #3B4A26; }   /* held through the whole reveal */
  to   { stop-color: #A87F3E; }
}
@keyframes alirenBreathe {
  0%, 100% { stop-color: #A87F3E; }
  50%      { stop-color: #3B4A26; }
}
/* the dark plate needs its own pair — keyframes cannot be parameterised */
.dk #alirenGrad stop {
  animation:
    alirenSettleDk 1.3s var(--ease) 3.6s both,
    alirenBreatheDk 18s ease-in-out 5s infinite;
}
@keyframes alirenSettleDk {
  from { stop-color: #9FB47A; }
  to   { stop-color: #D9BA73; }
}
@keyframes alirenBreatheDk {
  0%, 100% { stop-color: #D9BA73; }
  50%      { stop-color: #9FB47A; }
}
/* settled gold, and no breathing */
@media (prefers-reduced-motion: reduce) {
  #alirenGrad stop { animation: none; stop-color: #A87F3E; }
  .dk #alirenGrad stop { animation: none; stop-color: #D9BA73; }
}
/* ---- the acrostic reveal -------------------------------------------------
   The mark opens as the word it hides: A-li-RE-N, gathered tight. Then the
   letters that were never part of it grow back in from nothing and the caps
   track apart, and ALIREN unfolds into A life REVOLUTION. Same letters, same
   order -- only the spacing between them ever changes. */
.emblem-lockup .grow-script {
  animation: alirenScript 2.4s cubic-bezier(.22,1,.36,1) 1.1s both;
}
@keyframes alirenScript {
  from { font-size: 0px; opacity: 0; }
  to   { font-size: 112px; opacity: 1; }
}
.emblem-lockup .grow-caps {
  animation: alirenCaps 2.4s cubic-bezier(.22,1,.36,1) 1.1s both;
}
@keyframes alirenCaps {
  from { font-size: 0px; letter-spacing: 0px; opacity: 0; }
  to   { font-size: 55px; letter-spacing: 4px; opacity: 1; }
}
.emblem-lockup .caps-spread {
  animation: alirenSpread 2.4s cubic-bezier(.22,1,.36,1) 1.1s both;
}
/* RE and N track with VOLUTIO between them, so this value and the one in
   alirenCaps have to stay equal — they are the same word */
@keyframes alirenSpread {
  from { letter-spacing: 8px; }
  to   { letter-spacing: 4px; }
}
/* The space between "life" and "REVOLUTION" is a zero-width character whose
   letter-spacing IS the gap. It was a dx, which cannot be animated — so the
   full word space was already open while the mark still read AliREN, and the
   acrostic came apart as "Ali REN" before it had said anything. Carried on a
   tspan it can start at 8 like every other gap in the gathered word, and open
   to 28 with the rest of the phrase. */
.emblem-lockup .wordgap {
  animation: alirenGap 2.4s cubic-bezier(.22,1,.36,1) 1.1s both;
}
@keyframes alirenGap {
  from { font-size: 34px; }
  to   { font-size: 120px; }
}
/* anyone who has asked for less motion simply gets the finished wordmark */
@media (prefers-reduced-motion: reduce) {
  .emblem-lockup .grow-script,
  .emblem-lockup .grow-caps,
  .emblem-lockup .caps-spread,
  .emblem-lockup .wordgap { animation: none; }
}

/* the wordmark ring — orbits the still medallion, anticlockwise, forever */
.emblem-ring {
  transform-box: view-box;
  /* the centre in the lockup's own coordinates -- NOT 50% 50%. The viewBox
     starts at -20 -20, so 50% resolves to 320px, and Chrome places that at
     user (320,320) rather than offsetting it by the viewBox origin. The
     phrase then orbits a point 20 units down and right of the medallion and
     visibly swings off the circle. 300 300 is the actual centre. */
  transform-origin: 300px 300px;
  /* the mark holds the artwork's own position while AliREN unfolds -- a
     phrase that is still assembling itself should not also be moving --
     and only then does the finished band begin to turn. 3.6s is the
     reveal's 1.1s wait plus its 2.4s, with a beat to settle. */
  animation: orbit 80s linear infinite 3.6s;
}
@media (prefers-reduced-motion: reduce) {
  .emblem-ring { animation: none; }
}
@keyframes orbit { to { transform: rotate(-360deg); } }
/* the medallion artwork, concentric with the 600×600 lockup at (300,300) r≈160.
   Measured in the photo: artwork centre (0.49875, 0.5), rim radius 0.402 of
   image width — so display width 0.2667/0.402 = 66.34% puts the rim at 160. */
.emblem-medallion {
  position: absolute; z-index: 2;
  /* the wordmark orbits at radius 188 of the 600 viewBox, so the disc is
     sized to radius 150 -- that leaves the text clearly outside the rim */
  left: 21.5%; top: 21.5%;
  width: 57%; height: auto; aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* the artwork is cropped tight to its own gold rim, so clip at the edge --
     this also removes the white corners the source carries */
  object-fit: cover;
  clip-path: circle(49.5% at 50% 50%);
  filter: drop-shadow(0 22px 44px rgba(116, 87, 41, 0.42)) saturate(0.96);
}
/* a burnished halo behind the medallion — candlelight on gold */
.emblem::after {
  content: ""; position: absolute; z-index: 0;
  left: 17%; top: 17%; width: 66%; height: 66%; border-radius: 50%;
  /* Warm illumination sitting behind the emblem rather than on it. Three
     stops of the same amber at falling strength, reaching past the gold band
     — one stop reads as a ring drawn around the disc; three read as light. */
  background: radial-gradient(circle,
    rgba(214, 172, 92, 0.34) 24%,
    rgba(203, 158, 78, 0.17) 44%,
    rgba(186, 138, 62, 0.07) 62%,
    transparent 78%);
  animation: halo 7s ease-in-out infinite alternate;
  pointer-events: none;
}
/* the second, wider pool — very faint, and it does not breathe with the first,
   so the light never pulses as a single object */
.emblem::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -6%; top: -6%; width: 112%; height: 112%; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(214, 172, 92, 0.10) 32%,
    rgba(196, 146, 66, 0.045) 54%,
    transparent 74%);
  animation: halo 11s ease-in-out infinite alternate-reverse;
}
@keyframes halo { from { opacity: 0.75; transform: scale(0.985); } to { opacity: 1; transform: scale(1.015); } }

.hero h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  max-width: 780px; margin: 26px auto 20px;
  color: var(--walnut);
}
.hero h1 em { font-style: italic; color: var(--gold-deep); }
.hero-lede {
  font-size: clamp(17px, 1.5vw, 20px); color: var(--muted);
  max-width: 560px; margin: 0 auto 36px;
  font-family: var(--serif); font-size: 20px; line-height: 1.6;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.hero-note {
  margin-top: 28px; font-size: 14.5px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.hero-note svg { width: 16px; height: 16px; flex: none; color: var(--gold-deep); }

/* =======================  sections  ======================= */
.section { padding: 104px 0; position: relative; }

/* champagne tint — a deeper, warmer leaf of the same book */
.section-tint, .section-sand {
  background:
    var(--fibres),
    radial-gradient(900px 500px at 50% 0%, rgba(251, 248, 243, 0.5), transparent 70%),
    linear-gradient(180deg, rgba(243, 229, 195, 0.5), rgba(240, 226, 196, 0.66));
  background-blend-mode: soft-light, normal, normal;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* deep walnut — the night pages, gold ink on dark leather */
.section-deep, .section-forest {
  background:
    var(--noise),
    radial-gradient(1000px 560px at 50% -80px, rgba(164, 123, 51, 0.2), transparent 70%),
    radial-gradient(800px 600px at 85% 100%, rgba(92, 65, 38, 0.5), transparent 70%),
    linear-gradient(180deg, #45311D 0%, var(--walnut-deep) 55%, #30220F 100%);
  background-blend-mode: overlay, normal, normal, normal;
  color: var(--lt-soft);
  border-top: 1px solid rgba(198, 162, 90, 0.25);
  border-bottom: 1px solid rgba(198, 162, 90, 0.25);
  position: relative;
}
/* faint geometry glows gold on the dark pages */
.section-deep::before, .section-forest::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--geometry);
  background-size: 128px 222px;
  opacity: 0.06;
  filter: invert(0.8) sepia(1) saturate(2);
}
.section-deep > .wrap, .section-forest > .wrap { position: relative; }
.section-deep h2, .section-forest h2,
.section-deep h3, .section-forest h3 { color: var(--champagne); }
.section-deep .eyebrow, .section-forest .eyebrow { color: var(--gold); }
.section-deep .lede, .section-forest .lede { color: var(--lt-soft); }

.section-head { max-width: 700px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(30px, 3.5vw, 44px); margin-bottom: 18px; }
.lede { font-size: 18.5px; color: var(--muted); font-family: var(--serif); line-height: 1.6; }

/* =======================  the ribbon  =======================
   A ceremonial silk banner pressed into the paper — letterpress, not paint.
   Three strokes fake the emboss: an ivory highlight above, a walnut shade
   below, gold catching only the edge. It draws itself as you scroll
   (pathLength=1 trick), then its bloom opens. */
.flow {
  position: relative; height: 200px;
  /* start high — the ribbon emerges from inside the section above —
     and keep the between-section band tight */
  margin: -64px auto -20px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
  /* paint the ribbon + bloom lower so the flower comes to rest on the
     boundary of the section it introduces (layout is unaffected) */
  transform: translateY(28px);
}
.flow svg { height: 100%; width: 150px; overflow: visible; }
.flow path {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s var(--ease) 0.15s;
}
.flow .flow-light  { stroke: rgba(251, 248, 243, 0.95); stroke-width: 2.1; transform: translate(-2px, -1.8px); }
.flow .flow-shade  { stroke: rgba(74, 53, 38, 0.35);    stroke-width: 2.6; transform: translate(2px, 2px); }
.flow .flow-gold   { stroke: var(--gold-deep); stroke-width: 2.4; opacity: 0.9; }
.flow.in path { stroke-dashoffset: 0; }
/* the bloom — the ribbon becomes flower. Its centre sits exactly on the
   path's endpoint (75,188 of the 150×190 viewBox → 50% / 98.9%), and it
   only opens once the line has finished drawing (2.6s draw + 0.15s delay). */
.flow .flow-bloom {
  position: absolute; top: 98.9%; left: 50%; width: 84px; height: 84px;
  transform: translate(-50%, -50%) scale(0.1); opacity: 0;
  background: var(--rosette) center / contain no-repeat;
  transition: opacity 0.9s var(--ease) 2.75s, transform 1.4s var(--ease) 2.75s;
}
.flow.in .flow-bloom { opacity: 0.92; transform: translate(-50%, -50%) scale(1); }
/* on dark sections the ribbon passes in gold light */
.section-deep + .flow .flow-shade, .section-forest + .flow .flow-shade { stroke: rgba(20, 12, 5, 0.5); }

/* =======================  empathy strip ("sound familiar")  ======================= */
.stuck-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
}
.stuck {
  position: relative;
  background: rgba(247, 241, 231, 0.05);
  border: 1px solid rgba(198, 162, 90, 0.3);
  border-radius: var(--r-lg); padding: 28px 26px;
  box-shadow: inset 0 1px 0 rgba(243, 229, 195, 0.08), inset 0 0 30px rgba(20, 12, 5, 0.3);
}
.stuck::before {
  content: ""; position: absolute; top: 7px; left: 7px; width: 22px; height: 22px;
  background: var(--floret) center / contain no-repeat; opacity: 0.5;
  filter: invert(0.75) sepia(0.6);
}
.stuck p { font-family: var(--serif); font-size: 20px; color: var(--champagne); font-style: italic; line-height: 1.45; }

/* =======================  cards — pressed into the paper  =======================
   No floating. Debossed: a soft inner shade at the top edge, an ivory relief
   below, gold hairline edging, engraved florets in the corners. */
.svc, .step, .quote, .form-card {
  position: relative;
  background:
    var(--fibres),
    linear-gradient(168deg, var(--ivory) 0%, var(--parchment) 55%, #F1E7D2 100%);
  background-blend-mode: soft-light, normal;
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 2px 5px rgba(74, 53, 38, 0.1),
    inset 0 -1px 0 rgba(251, 248, 243, 0.85),
    0 1px 0 rgba(251, 248, 243, 0.7),
    0 14px 34px rgba(56, 41, 25, 0.07);
}
/* engraved corner florets */
.svc::before, .quote::before, .form-card::before {
  content: ""; position: absolute; top: 9px; left: 9px; width: 26px; height: 26px;
  background: var(--floret) center / contain no-repeat; opacity: 0.55; pointer-events: none;
}
.svc::after, .quote::after, .form-card::after {
  content: ""; position: absolute; bottom: 9px; right: 9px; width: 26px; height: 26px;
  background: var(--floret) center / contain no-repeat; opacity: 0.55; pointer-events: none;
  transform: rotate(180deg);
}

.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 26px; }
.svc {
  padding: 36px 30px;
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow 0.6s var(--ease), border-color 0.6s var(--ease);
}
.svc:hover {
  border-color: rgba(164, 123, 51, 0.75);
  box-shadow:
    inset 0 2px 5px rgba(74, 53, 38, 0.08),
    inset 0 -1px 0 rgba(251, 248, 243, 0.85),
    0 1px 0 rgba(251, 248, 243, 0.7),
    0 18px 44px rgba(116, 87, 41, 0.14),
    0 0 30px rgba(198, 162, 90, 0.14);
}
.svc-ico {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  color: var(--gold-deep);
  background: radial-gradient(circle at 40% 32%, rgba(251, 248, 243, 0.9), rgba(243, 229, 195, 0.5));
  box-shadow: inset 0 0 0 1px rgba(164, 123, 51, 0.4), inset 0 2px 4px rgba(74, 53, 38, 0.12);
  display: grid; place-items: center; margin-bottom: 6px;
  transition: color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.svc:hover .svc-ico {
  color: var(--bronze-ink);
  box-shadow: inset 0 0 0 1px rgba(164, 123, 51, 0.65), inset 0 2px 4px rgba(74, 53, 38, 0.1),
              0 0 18px rgba(198, 162, 90, 0.3);
}
.svc-ico svg { width: 28px; height: 28px; }
.svc h3 { font-size: 23px; }
.svc p { font-size: 15.5px; color: var(--muted); flex: 1; }
.svc-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--bronze-ink);
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--line-gold), transparent) 1;
  border-top-width: 1px; border-top-style: solid;
}
.svc-price { color: var(--walnut); font-family: var(--serif); font-size: 18px; font-weight: 600; }
.tag {
  display: inline-block; font-family: var(--serif); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 12px;
  border-radius: 3px; color: var(--bronze-ink);
  background: linear-gradient(180deg, rgba(243, 229, 195, 0.9), rgba(233, 214, 172, 0.85));
  border: 1px solid rgba(164, 123, 51, 0.45);
  box-shadow: inset 0 1px 0 rgba(251, 248, 243, 0.7), inset 0 -1px 2px rgba(116, 87, 41, 0.15);
}

/* =======================  split feature + gilded plates  ======================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
/* a photograph mounted like a museum plate: double gold frame, warm grade */
.split-img {
  position: relative; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(164, 123, 51, 0.6);
  box-shadow:
    0 0 0 6px rgba(247, 241, 231, 0.9),
    0 0 0 7px rgba(164, 123, 51, 0.45),
    var(--shadow);
}
.split-img img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  filter: sepia(0.22) saturate(0.88) contrast(0.94) brightness(1.04);
}
/* painted veil: warm highlights, matte shadows */
.split-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 12%, rgba(243, 229, 195, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(198, 162, 90, 0.1), rgba(56, 41, 25, 0.18));
  mix-blend-mode: soft-light;
}
.split ul { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.split li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; }
.split li svg { width: 19px; height: 19px; flex: none; color: var(--gold-deep); margin-top: 4px; }
.section-deep .split li svg, .section-forest .split li svg { color: var(--gold); }

/* =======================  steps — chapters of the journey  ======================= */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.step { padding: 34px 28px; }
.step-n {
  font-family: var(--serif); font-size: 52px; line-height: 1; margin-bottom: 14px;
  font-weight: 500; font-style: italic;
  background: linear-gradient(160deg, #D3B478, var(--gold-deep) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h3 { font-size: 21px; margin-bottom: 9px; }
.step p { font-size: 15px; color: var(--muted); }

/* =======================  credentials — the illuminated ledger  ======================= */
.cred-list { list-style: none; }
.cred-list li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 10px 0; font-size: 15px;
  border-bottom: 1px solid var(--line-soft);
}
.cred-list li:last-child { border-bottom: 0; }
.cred-list .yr {
  font-family: var(--serif); font-weight: 600; font-style: italic;
  color: var(--gold-deep); flex: none; min-width: 92px; font-size: 16px;
}

/* =======================  retreat / event cards  ======================= */

/* =======================  spa day menu  =======================
   Packages read as three small plaques side by side; the add-on list
   flows in two columns so a long menu doesn't tower over them. */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.pkg {
  position: relative; padding: 26px 24px 24px; text-align: center;
  background: rgba(247, 241, 231, 0.05);
  border: 1px solid rgba(198, 162, 90, 0.34);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(243, 229, 195, 0.08), inset 0 0 30px rgba(20, 12, 5, 0.28);
}
.pkg.feature { border-color: rgba(198, 162, 90, 0.75); background: rgba(198, 162, 90, 0.09); }
.pkg h4 {
  font-family: var(--serif); font-size: 13px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px;
}
.pkg .amount {
  font-family: var(--serif); font-size: 34px; font-weight: 600;
  color: var(--champagne); line-height: 1; display: block; margin-bottom: 12px;
}
.pkg p { font-size: 14.5px; color: var(--lt-soft); line-height: 1.6; }

/* the add-on menu — two columns on anything wider than a phone */
.menu-list { list-style: none; columns: 2; column-gap: 46px; }
.menu-list li {
  break-inside: avoid; display: flex; justify-content: space-between;
  align-items: baseline; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid rgba(198, 162, 90, 0.18);
  font-size: 15px;
}
.menu-list li:last-child { border-bottom: 0; }
.menu-list em { display: block; font-style: italic; font-size: 13px; color: var(--lt-faint); margin-top: 2px; }
.menu-list b {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--champagne); white-space: nowrap;
}
.menu-list .soft { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--lt-faint); }
@media (max-width: 720px) { .menu-list { columns: 1; } }

/* =======================  price ledger  ======================= */
.price-list { list-style: none; margin-top: 4px; }
.price-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0; font-size: 14.5px;
  border-bottom: 1px solid var(--line-soft);
}
.price-list li:last-child { border-bottom: 0; }
.price-list em { font-style: italic; color: var(--muted); font-size: 13px; }
.price-list b {
  font-family: var(--serif); font-size: 16.5px; font-weight: 600;
  color: var(--walnut); white-space: nowrap;
}

/* =======================  quotes — marginalia  ======================= */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.quote { padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; }
.quote-mark {
  font-family: var(--serif); font-size: 64px; line-height: 0.55; height: 28px;
  background: linear-gradient(160deg, #D3B478, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.quote p { font-family: var(--serif); font-size: 17.5px; color: var(--ink); font-style: italic; flex: 1; line-height: 1.6; }
.quote-who { font-size: 13px; font-weight: 600; color: var(--bronze-ink); letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--serif); }

/* =======================  gallery — plates in an atlas  ======================= */
.gal { columns: 3; column-gap: 22px; }
.gal figure {
  break-inside: avoid; margin-bottom: 22px; border-radius: 4px;
  overflow: hidden; position: relative; cursor: pointer;
  border: 1px solid rgba(164, 123, 51, 0.55);
  box-shadow: 0 0 0 5px rgba(247, 241, 231, 0.9), 0 0 0 6px rgba(164, 123, 51, 0.4), var(--shadow-sm);
}
.gal img {
  width: 100%; transition: transform 1.4s var(--ease), filter 1.4s var(--ease);
  filter: sepia(0.22) saturate(0.88) contrast(0.94) brightness(1.03);
}
.gal figure:hover img { transform: scale(1.035); filter: sepia(0.12) saturate(0.95) contrast(0.96) brightness(1.06); }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px;
  background: linear-gradient(transparent, rgba(46, 33, 19, 0.88));
  color: var(--champagne); font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: 0.03em;
  opacity: 0; transform: translateY(8px); transition: all 0.6s var(--ease);
}
.gal figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* =======================  forms — writing in the book  ======================= */
.form-card { padding: 42px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--walnut); margin-bottom: 8px; letter-spacing: 0.06em;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: rgba(251, 248, 243, 0.75);
  border: 1px solid var(--line);
  border-radius: 4px; padding: 13px 15px;
  box-shadow: inset 0 2px 4px rgba(74, 53, 38, 0.07);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-deep);
  box-shadow: inset 0 2px 4px rgba(74, 53, 38, 0.06), 0 0 0 4px rgba(198, 162, 90, 0.18);
}
.field ::placeholder { color: rgba(113, 96, 62, 0.55); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hint { font-size: 13.5px; color: var(--muted); margin-top: 7px; }

/* choice chips — small stamped seals */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  font-family: var(--serif);
  border: 1px solid var(--line); background: rgba(251, 248, 243, 0.7);
  border-radius: 4px; padding: 11px 17px; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(251, 248, 243, 0.8);
  transition: all 0.3s var(--ease);
}
.choice:hover { border-color: var(--gold-deep); }
.choice.sel {
  border-color: rgba(164, 123, 51, 0.7); color: var(--walnut-deep);
  background: linear-gradient(180deg, rgba(243, 229, 195, 0.95), rgba(233, 214, 172, 0.9));
  box-shadow: inset 0 1px 0 rgba(251, 248, 243, 0.7), inset 0 -2px 4px rgba(116, 87, 41, 0.14);
}
.choice.sel::before { content: "✦ "; color: var(--gold-deep); }

/* =======================  booking success  ======================= */
.done { text-align: center; padding: 30px 10px; }
.done-ico {
  width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 22px;
  color: var(--gold-deep);
  background: radial-gradient(circle at 40% 32%, rgba(251, 248, 243, 0.95), rgba(243, 229, 195, 0.6));
  box-shadow: inset 0 0 0 1px rgba(164, 123, 51, 0.5), 0 0 30px rgba(198, 162, 90, 0.3);
  display: grid; place-items: center;
}
.done-ico svg { width: 32px; height: 32px; }
.done h3 { font-size: 28px; margin-bottom: 10px; }
.done p { color: var(--muted); max-width: 430px; margin: 0 auto 8px; }
.hidden { display: none; }

/* =======================  aside / trust rail  ======================= */
.rail { display: flex; flex-direction: column; gap: 18px; }
.rail-card {
  position: relative;
  background:
    var(--noise),
    linear-gradient(170deg, #45311D, var(--walnut-deep) 70%);
  background-blend-mode: overlay, normal;
  color: var(--lt-soft); border-radius: var(--r-lg); padding: 30px;
  border: 1px solid rgba(198, 162, 90, 0.4);
  box-shadow: inset 0 1px 0 rgba(243, 229, 195, 0.12), var(--shadow-sm);
}
.rail-card h3 { font-size: 21px; color: var(--champagne); margin-bottom: 14px; }
.rail-card ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.rail-card li { display: flex; gap: 11px; font-size: 14.5px; color: var(--lt-soft); }
.rail-card li svg { width: 17px; height: 17px; flex: none; color: var(--gold); margin-top: 3px; }
.rail-note {
  background: linear-gradient(175deg, rgba(243, 229, 195, 0.65), rgba(240, 226, 196, 0.8));
  border: 1px solid rgba(164, 123, 51, 0.4); border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(251, 248, 243, 0.7), inset 0 2px 6px rgba(74, 53, 38, 0.05);
  padding: 22px; font-size: 14.5px; color: var(--ink);
}
.rail-note b { color: var(--walnut); font-family: var(--serif); font-size: 15.5px; }

/* =======================  contact strip  ======================= */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.contact-item {
  display: flex; gap: 15px; align-items: flex-start;
  background: rgba(247, 241, 231, 0.05); border: 1px solid rgba(198, 162, 90, 0.32);
  border-radius: var(--r-lg); padding: 24px;
  box-shadow: inset 0 1px 0 rgba(243, 229, 195, 0.08), inset 0 0 30px rgba(20, 12, 5, 0.25);
}
.contact-item svg { width: 21px; height: 21px; flex: none; color: var(--gold); margin-top: 3px; }
.contact-item span {
  display: block; font-family: var(--serif); font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--lt-faint); font-weight: 600; margin-bottom: 3px;
}
.contact-item a, .contact-item p { color: var(--champagne); text-decoration: none; font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.contact-item > div { min-width: 0; }
.contact-item a:hover { color: var(--gold); }

/* =======================  footer — the closing page  ======================= */
.site-foot {
  position: relative;
  background:
    var(--noise),
    radial-gradient(800px 400px at 50% 0%, rgba(164, 123, 51, 0.14), transparent 70%),
    linear-gradient(180deg, #38281706 0%, transparent 0%),
    linear-gradient(180deg, var(--walnut-deep), var(--night) 70%);
  background-blend-mode: overlay, normal, normal, normal;
  color: var(--lt-faint); padding: 70px 0 34px;
  border-top: 1px solid rgba(198, 162, 90, 0.3);
}
/* gold rule with a centre seal-mark above the footer */
.site-foot::before {
  content: ""; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 162, 90, 0.7), transparent);
}
.site-foot .brand-name { color: var(--champagne); }
.site-foot .brand-sub { color: var(--gold); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; margin-bottom: 44px; }
.foot-blurb { margin-top: 16px; font-size: 14.5px; max-width: 330px; line-height: 1.7; }
.foot-tags {
  margin-top: 10px; font-family: var(--serif); font-size: 13.5px;
  letter-spacing: 0.12em; color: var(--gold);
}
.foot-col h4 {
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px; font-weight: 600;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { text-decoration: none; font-size: 14.5px; transition: color 0.3s var(--ease); }
.foot-col a:hover { color: var(--champagne); }
.foot-bot {
  border-top: 1px solid rgba(198, 162, 90, 0.18); padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}

/* =======================  page hero (inner pages) — a chapter cover  ======================= */
.page-hero {
  position: relative; overflow: hidden;
  background:
    var(--noise),
    radial-gradient(900px 480px at 50% -60px, rgba(164, 123, 51, 0.25), transparent 70%),
    linear-gradient(180deg, #45311D 0%, var(--walnut-deep) 60%, #33240F 100%);
  background-blend-mode: overlay, normal, normal;
  color: var(--lt-soft); padding: 84px 0 76px;
  border-bottom: 1px solid rgba(198, 162, 90, 0.3);
}
/* a great faded rosette watermark on the right of every chapter cover */
.page-hero::after {
  content: ""; position: absolute; right: -120px; top: 50%; width: 460px; height: 460px;
  transform: translateY(-50%);
  background: var(--rosette) center / contain no-repeat;
  opacity: 0.1; filter: invert(0.8) sepia(0.9); pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(36px, 4.6vw, 58px); color: var(--champagne); margin-bottom: 16px; max-width: 760px; }
.page-hero p { font-family: var(--serif); font-size: 19px; color: var(--lt-soft); max-width: 600px; line-height: 1.6; }
.page-hero .eyebrow { color: var(--gold); }


/* =======================  gold dust (canvas) + lightbox  ======================= */
.dust {
  position: fixed; inset: 0; z-index: 89; pointer-events: none;
}
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(30, 21, 10, 0.93); padding: 32px; cursor: zoom-out;
}
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 88vh; border-radius: 4px;
  border: 1px solid rgba(164, 123, 51, 0.7);
  box-shadow: 0 0 0 8px rgba(247, 241, 231, 0.08), 0 40px 90px rgba(0, 0, 0, 0.6);
}

/* =======================  responsive  ======================= */
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 38px; }
  .gal { columns: 2; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .book-layout { grid-template-columns: 1fr !important; }
  .page-hero::after { opacity: 0.06; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .flow { height: 150px; margin: -10px auto; transform: translateY(22px); }
  /* Hung off the header's own bottom edge, not fixed at a measured offset.

     It was `position: fixed; top: 82px`, and 82 was the header's height typed
     out as a number — so any change to the header's padding or type size left
     a gap or an overlap. Worse, `.site-head` carries a backdrop-filter, which
     makes IT the containing block for fixed descendants rather than the
     viewport. The panel was therefore measured from a box that moves: on a
     phone, where the browser's URL bar collapses as you scroll, the header
     shifts and the menu slid down with it.

     `top: 100%` on an absolute child of the sticky header has neither problem.
     The panel is always exactly under the header, whatever height it is and
     wherever the header happens to be. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: linear-gradient(180deg, var(--parchment), #F2E9D8);
    border-bottom: 1px solid var(--line);
    padding: 8px 0 18px; transform: translateY(-130%); transition: transform 0.4s var(--ease);
    box-shadow: var(--shadow);
  }
  .nav.open { transform: translateY(0); }
  .nav a { padding: 14px 26px; width: 100%; font-size: 17px; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin: 12px 26px 0; }
  .nav-toggle { display: block; }
  .hero { padding: 44px 0 70px; }
  .hero-cta .btn { flex: 1 1 100%; }
  /* engraved plaques must never outgrow the phone: wrap, and ease the spacing */
  .btn { white-space: normal; text-align: center; }
  .btn-lg { padding: 16px 22px; font-size: 15.5px; letter-spacing: 0.1em; }
  .gal { columns: 1; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .field-row { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  body::before { opacity: 0.04; }
}

/* mobile tap targets — her audience arrives on a phone, often stressed */
@media (max-width: 720px) {
  .foot-col a, .contact-item a, .site-foot a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0;
  }
  .foot-col li { line-height: 1.2; }
  .foot-col ul { gap: 0; }
  .foot-bot { gap: 10px; }
  .svc-meta a, .lede a, .hint a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (hover: none) and (pointer: coarse) {
  .nav a { min-height: 44px; display: flex; align-items: center; }
}

/* =======================  reveal — ink appearing on old paper  ======================= */
/* The reveal only ever hides content when scripting is present to bring it
   back. Ungated, `opacity: 0` is a promise the page cannot always keep: if
   the observer never runs — no JS, a script error, a zero-height viewport —
   every section on the site stays invisible forever and the page is blank.
   The `js` class is set by the head snippet, before first paint. */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }

/* =======================  reduced motion — everything settles  ======================= */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: 0.01ms !important; }
  .flow path { stroke-dashoffset: 0; }
  .flow .flow-bloom { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  .emblem-geometry, .hero::before { animation: none !important; }
  .dust { display: none; }
}