/* Janet Foley: site styles.
   Look: "Warm paper" (cream ground, light high-contrast serif with a quiet sans, earth-tone fields, one
   decisive action colour). Composition: one motif, the mandorla, used for every picture, button and mark. */

/* the two typefaces, served from the site (Google Fonts' latin files, SIL Open Font License); each file holds both
   weights used (400 and 500) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #f6f0e6;            /* warm paper */
  --surface: #ece3d4;       /* one step down from the paper */
  --ink: #1d1c19;
  --muted: #57524a;
  --accent: #3c5134;        /* garden moss: the action colour */
  --accent-strong: #2b3b25;
  --accent-ink: #f6f0e6;
  --sage: #dde0ca;
  --gold: #ecdcb5;
  --moss: #2e3c29;
  --on-moss: #f4eee2;
  --on-moss-muted: #d3d6c3;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-text: "Jost", "Segoe UI", system-ui, sans-serif;

  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);
  --step-head: clamp(2.25rem, 1.1rem + 3.4vw, 3.75rem);
  --step-display: clamp(2.75rem, min(0.6rem + 6vw, 0.4rem + 11svh), 5.75rem);

  --margin: max(clamp(1rem, 2.2vw, 2rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7.5rem, 13vw, 13rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;

  /* The motif. A mandorla: two equal circles, each through the other's centre; their overlap.
     Upright for pictures, lying down for inline frames, and as end caps for buttons. */
  --mandorla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 173.2' preserveAspectRatio='none'%3E%3Cpath d='M50 0A100 100 0 0 1 50 173.2A100 100 0 0 1 50 0Z'/%3E%3C/svg%3E");
  --lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 173.2 100' preserveAspectRatio='none'%3E%3Cpath d='M0 50A100 100 0 0 1 173.2 50A100 100 0 0 1 0 50Z'/%3E%3C/svg%3E");
  --lens-h: 3.25rem;
  --button-shape: polygon(calc(1 * var(--lens-h)) 100%, calc(0.8714 * var(--lens-h)) 99.3371%, calc(0.7442 * var(--lens-h)) 97.3554%, calc(0.6198 * var(--lens-h)) 94.076%, calc(0.4993 * var(--lens-h)) 89.5337%, calc(0.3842 * var(--lens-h)) 83.7765%, calc(0.2755 * var(--lens-h)) 76.8656%, calc(0.1746 * var(--lens-h)) 68.8743%, calc(0.0824 * var(--lens-h)) 59.8873%, calc(0 * var(--lens-h)) 50%, calc(0.0824 * var(--lens-h)) 40.1127%, calc(0.1746 * var(--lens-h)) 31.1257%, calc(0.2755 * var(--lens-h)) 23.1344%, calc(0.3842 * var(--lens-h)) 16.2235%, calc(0.4993 * var(--lens-h)) 10.4663%, calc(0.6198 * var(--lens-h)) 5.924%, calc(0.7442 * var(--lens-h)) 2.6446%, calc(0.8714 * var(--lens-h)) 0.6629%, calc(1 * var(--lens-h)) 0%, calc(100% - 1 * var(--lens-h)) 0%, calc(100% - 0.8714 * var(--lens-h)) 0.6629%, calc(100% - 0.7442 * var(--lens-h)) 2.6446%, calc(100% - 0.6198 * var(--lens-h)) 5.924%, calc(100% - 0.4993 * var(--lens-h)) 10.4663%, calc(100% - 0.3842 * var(--lens-h)) 16.2235%, calc(100% - 0.2755 * var(--lens-h)) 23.1344%, calc(100% - 0.1746 * var(--lens-h)) 31.1257%, calc(100% - 0.0824 * var(--lens-h)) 40.1127%, calc(100% - 0 * var(--lens-h)) 50%, calc(100% - 0.0824 * var(--lens-h)) 59.8873%, calc(100% - 0.1746 * var(--lens-h)) 68.8743%, calc(100% - 0.2755 * var(--lens-h)) 76.8656%, calc(100% - 0.3842 * var(--lens-h)) 83.7765%, calc(100% - 0.4993 * var(--lens-h)) 89.5337%, calc(100% - 0.6198 * var(--lens-h)) 94.076%, calc(100% - 0.7442 * var(--lens-h)) 97.3554%, calc(100% - 0.8714 * var(--lens-h)) 99.3371%, calc(100% - 1 * var(--lens-h)) 100%);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(60, 81, 52, 0.18); }
@media (pointer: fine) { html { overscroll-behavior: none; } }
a, button, label, select, input, textarea { touch-action: manipulation; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 20; background: var(--accent); color: var(--accent-ink); padding: 0.75rem 1.25rem; text-decoration: none; }
.skip:focus { top: 0.75rem; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; hyphens: none; }
.display { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.02em; }
.head { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.015em; }
.lead, .statement { font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.3; font-weight: 400; }
.small { font-size: var(--step-small); line-height: 1.5; }
.sub { font-family: var(--font-text); font-size: var(--step-body); font-weight: 500; line-height: 1.35; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--muted); }

/* ---------- frame ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: calc(var(--section) / 2); }

/* ---------- the motif ---------- */
.mandorla {
  -webkit-mask: var(--mandorla) center / 100% 100% no-repeat; mask: var(--mandorla) center / 100% 100% no-repeat;
  aspect-ratio: 1 / 1.7321; overflow: hidden;
}
.mandorla img { width: 100%; height: 100%; object-fit: cover; }
.frame {
  display: inline-block; position: relative; height: 0.85em; width: 1.5em; margin-inline: 0.12em; vertical-align: -0.08em;
  -webkit-mask: var(--lens) center / 100% 100% no-repeat; mask: var(--lens) center / 100% 100% no-repeat;
  overflow: hidden; background: var(--surface);
}
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bullets { padding: 0; list-style: none; }
.bullets li { position: relative; padding-left: 1.35em; }
.bullets li + li { margin-top: 0.4em; }
.bullets li::before {
  content: ""; position: absolute; left: 0.1em; top: 0.38em; width: 0.5em; height: 0.866em; background: currentColor;
  -webkit-mask: var(--mandorla) center / 100% 100% no-repeat; mask: var(--mandorla) center / 100% 100% no-repeat;
}

/* ---------- buttons: one shape, a lens with pointed ends ---------- */
.button {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--lens-h); padding: 0 calc(var(--lens-h) * 0.95); color: var(--accent-ink);
  font-family: var(--font-text); font-size: var(--step-body); font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap;
  background-color: var(--accent); clip-path: var(--button-shape);
  translate: var(--pull-x, 0px) var(--pull-y, 0px);
  transition: transform var(--t-press) var(--ease-out), translate 320ms var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.button:focus-visible { clip-path: none; border-radius: 999px; outline: 2px solid var(--ink); outline-offset: 3px; }
.button:active { transform: scale(0.97); }
.button.button--light { background-color: var(--on-moss); color: var(--ink); }
.button.button--gold { background-color: var(--gold); color: var(--ink); }
.button.button--ink { background-color: var(--ink); color: var(--accent-ink); }
.button--wide { width: 100%; }
.button--small { --lens-h: 2.75rem; font-size: var(--step-small); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background-color: var(--accent-strong); }
  .button.button--light:hover { background-color: #fffaf1; }
  .button.button--gold:hover { background-color: #f3e6c6; }
  .button.button--ink:hover { background-color: #000; }
}
.link { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- header bar ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; padding-inline: var(--margin); background: var(--bg); position: relative; z-index: 5; }
.wordmark { font-family: var(--font-display); font-size: clamp(1.625rem, 1.3rem + 0.6vw, 2rem); font-weight: 500; letter-spacing: -0.01em; text-decoration: none; line-height: 1; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav a:not(.button) { text-decoration: none; font-size: var(--step-body); padding-block: 0.6rem; background-image: none; }
.nav a:not(.button)[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.3em; }
@media (hover: hover) and (pointer: fine) { .nav a:not(.button):hover { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.3em; } }
.menu-toggle { display: none; font-size: var(--step-body); font-weight: 500; padding: 0.75rem 0 0.75rem 1rem; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .menu-toggle:hover, .card h3 button:hover { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.3em; } }
@media (max-width: 760px) {
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.5rem var(--margin) 1.5rem; background: var(--bg); }
  .nav.is-open { display: flex; }
  .nav a:not(.button) { font-family: var(--font-display); font-size: 2rem; padding-block: 0.35rem; }
  .nav .button { margin-top: 0.75rem; }
}

/* ---------- hero: the garden film inside the mandorla ---------- */
.hero { position: relative; --mh: 150svh; --mw: calc(var(--mh) * 0.57735); --cx: 77vw; --cy: 52svh; --mx: calc(var(--cx) - var(--mw) / 2); --my: calc(var(--cy) - var(--mh) / 2); --ox: var(--cx); --oy: var(--cy); --sx: calc(var(--cx) - 50vw); --sy: 0px; }
.hero__stage { position: relative; height: calc(100svh - 5rem); min-height: 34rem; overflow: clip; }
.hero__film {
  position: absolute; inset: 0; background: #6f7a4f;
  -webkit-mask: var(--mandorla) no-repeat; mask: var(--mandorla) no-repeat;
  -webkit-mask-size: var(--mw) var(--mh); mask-size: var(--mw) var(--mh);
  -webkit-mask-position: var(--mx) var(--my); mask-position: var(--mx) var(--my);
}
.hero__film, .hero__shift { transform-origin: var(--ox) var(--oy); }
.hero__shift { position: absolute; inset: 0; transform: translate(var(--sx), var(--sy)); }
.hero__shift video { width: 100%; height: 100%; object-fit: cover; background: #6f7a4f; }
.hero__copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--margin) 6svh; max-width: calc(46vw + var(--margin)); }
.hero__copy h1 { max-width: 9.5em; }
@media (orientation: landscape) and (min-width: 561px) { .hero__copy h1 { font-size: max(2.75rem, min(var(--step-display), calc((77vw - 43.3svh - 3rem) / 6.3))); } }
.hero__copy h1 .line { display: block; }
.hero__copy p { margin-top: 2.25rem; max-width: 30ch; font-size: max(1.1875rem, var(--step-body)); }
.hero__copy .button { margin-top: 2.25rem; align-self: flex-start; }
.hero__pause { position: absolute; z-index: 3; right: var(--margin); bottom: 1.25rem; }
.hero__line { display: none; }
/* phones and any screen held upright (a tablet, a tall window): the mandorla rises from below the words.
   A phone or tablet turned on its side keeps the side-by-side layout instead. */
@media (orientation: portrait), (max-width: 560px) {
  .hero { --mw: 130vw; --mh: calc(130vw * 1.7321); --cx: 50vw; --mx: -15vw; --my: 58svh; --ox: 50vw; --oy: calc(58svh + 112.58vw); --sx: 0px; --sy: 0px; }
  .hero__stage { min-height: 40rem; }
  .hero__copy { justify-content: flex-start; padding-top: 9svh; max-width: none; }
  .hero__copy p { margin-top: 1.25rem; }
  .hero__copy .button { margin-top: 1.5rem; }
}
@media (orientation: portrait) and (prefers-reduced-motion: no-preference), (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero .hero__line { top: 0; bottom: auto; max-width: none; padding: clamp(5rem, 14svh, 8rem) var(--margin) 0; }
    /* the mandorla opens about its own centre, far below the screen: the film's box reaches down to the
       mandorla's foot so that, once grown, it still covers the whole screen; the film inside stays screen-sized */
    .hero__film { bottom: auto; height: calc(58svh + 225.2vw); }
    .hero__shift { bottom: auto; height: 100svh; }
  }
}
/* wide, short screens (a phone on its side): tighter spacing so the title, words and button fit one screen */
@media (orientation: landscape) and (max-height: 540px) {
  .hero__copy { justify-content: flex-start; padding-top: clamp(0.75rem, 4svh, 2rem); }
  .hero__copy p, .page-hero__copy p { margin-top: 1rem; max-width: 44ch; }
  .hero__copy .button, .page-hero__copy .button { margin-top: 1.25rem; }
}

/* ---------- intro: a statement with pictures inside the line ---------- */
.intro { padding-block: clamp(6rem, 22vh, 13rem); }
.intro p { max-width: 36ch; margin-inline: auto; text-align: center; line-height: 1.3; }
@media (max-width: 760px) { .intro p { text-align: left; max-width: none; } }

/* ---------- presences: the square plate and the drawn message ---------- */
.presences { background: var(--sage); min-height: 88svh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.plate { position: relative; margin: clamp(1.5rem, 2.8vw, 2.5rem); margin-right: 0; aspect-ratio: 1; align-self: center; overflow: hidden; }
.plate__art { position: absolute; inset: 6% 0; margin: auto; height: 88%; transition: opacity var(--t-ui) ease, transform 600ms var(--ease-out); }
.plate__art img { width: 100%; height: 100%; object-fit: cover; }
.plate__message { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.75rem; padding: 12%; color: var(--ink); text-align: center; visibility: hidden; opacity: 0; transition: opacity var(--t-ui) ease, visibility 0s linear var(--t-ui); }
.plate__message .mandorla { width: 2.6rem; }
.plate__message blockquote { max-width: 22ch; }
.plate.is-message .plate__message { visibility: visible; opacity: 1; transition-delay: 0s; }
.plate.is-message .plate__art { opacity: 0; transform: scale(0.92); }
.presences__text { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding: clamp(2.5rem, 5vw, 5rem) var(--margin) clamp(2rem, 3vw, 2.75rem) clamp(2.5rem, 5vw, 5rem); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; margin-top: 1.75rem; }
.tabs [role="tab"] { font-size: var(--step-body); color: var(--muted); padding-block: 0.5rem; min-height: 44px; text-decoration: none; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.35em; }
@media (hover: hover) and (pointer: fine) { .tabs [role="tab"]:hover { color: var(--ink); } }
.presence h3 { font-size: var(--step-head); line-height: 1.02; }
.presence p { margin-top: 1.5rem; max-width: 36ch; }
.presence[hidden] { display: none; }
.presences__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
@media (max-width: 760px) {
  .presences { grid-template-columns: 1fr; min-height: 0; }
  .plate { margin: var(--margin) var(--margin) 0; }
  .presences__text { padding: 2.5rem var(--margin) 3rem; }
  .presences__actions .button { flex: 1 1 100%; }
}

/* ---------- gifts: one paragraph with picture words ---------- */
.gifts p.statement { grid-column: 1 / 12; max-width: none; line-height: 1.32; }
.gifts .frame { height: 1em; width: 1.9em; vertical-align: -0.14em; }
.gifts__art { grid-column: 2 / 6; margin-top: 4.5rem; }
.gifts__after { grid-column: 7 / 13; margin-top: 4.5rem; align-self: center; }
.gifts__after p { max-width: 40ch; }
.gifts__after .link { display: inline-block; margin-top: 1.25rem; font-weight: 500; }
@media (max-width: 760px) {
  .gifts p.statement { grid-column: 1 / -1; }
  .gifts .frame { width: 1.3em; }
  .gifts__after { grid-column: 1 / -1; margin-top: 2.5rem; }
  .gifts__art { grid-column: 2 / 12; margin-top: 3rem; }
}

/* ---------- training: Lily Dale, open on the field ----------
   On a computer the picture stands large at the left, as tall as the screen allows, the words beside it; on an
   upright screen the words come first and the picture follows, whole and wide. */
.training { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--gutter); }
.training__art { grid-column: 1 / 7; grid-row: 1 / -1; align-self: center; justify-self: center; margin: 0; width: min(32vw, 30rem, calc((100svh - 9rem) * 0.57735)); }
.training__art figcaption { margin-top: 1.25rem; text-align: center; color: var(--muted); }
.training__head { grid-column: 7 / 13; grid-row: 2; }
.training__head h2 { max-width: 10em; }
.training__text { grid-column: 7 / 13; grid-row: 3; display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2.5rem; }
.training__text p { margin-top: 0.75rem; max-width: 36ch; }
.training__text .button { align-self: flex-start; }
@media (max-width: 900px), (orientation: portrait) {
  .training { display: flex; flex-direction: column; }
  .training__head h2 { max-width: 14em; }
  .training__text { margin-top: 2rem; gap: 2.25rem; }
  .training__text p { max-width: 60ch; }
  .training__art { order: 3; display: flex; flex-direction: column; width: min(76%, 22rem, calc((100svh - 3rem) * 0.57735)); margin: 3rem auto 0; }
  .training__art figcaption { order: -1; margin: 0 0 1rem; }
}

/* ---------- readings: two plans, two fields ---------- */
.plans { display: grid; grid-template-columns: 5fr 7fr; min-height: 90svh; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr auto; grid-template-areas: "name name" "for art" "incl art" "foot foot"; column-gap: var(--gutter); padding: clamp(2rem, 3vw, 2.5rem) var(--margin); }
.plan h3 { grid-area: name; }
.plan__for { grid-area: for; }
.plan__incl { grid-area: incl; }
.plan__foot { grid-area: foot; }
.plan__art { grid-area: art; align-self: center; justify-self: end; width: clamp(8rem, 16vw, 15rem); margin-top: 2rem; }
.plan--angelic .plan__art { width: clamp(9rem, 22vw, 20rem); }
.plan--spiritual { background: var(--sage); padding-left: var(--margin); }
.plan--angelic { background: var(--gold); padding-right: var(--margin); }
.plan h3 { font-size: var(--step-head); line-height: 1.02; }
.plan__for { margin-top: 1.25rem; max-width: 26ch; font-size: var(--step-body); }
.plan__incl { align-self: end; margin-top: 3rem; max-width: 38ch; }
.plan__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 2.5rem; }
.price { display: flex; align-items: baseline; gap: 0.75rem; }
.price-line { margin-top: 1.25rem; }
.price__amount { font-family: var(--font-display); font-size: var(--step-display); line-height: 0.85; letter-spacing: -0.02em; }
@media (max-width: 760px) {
  .plans { grid-template-columns: 1fr; }
  .plan { min-height: 70svh; padding: 2rem var(--margin); }
  .plan__art, .plan--angelic .plan__art { width: 34vw; }
  .plan--angelic { order: -1; }
  .plan__foot .button { width: 100%; }
}

/* ---------- how a reading works: many into one ---------- */
.flow__intro { grid-column: 1 / 6; align-self: end; }
.flow__art { grid-column: 9 / 12; justify-self: end; width: min(100%, 15rem); mix-blend-mode: multiply; }
.flow__intro p { margin-top: 1.5rem; max-width: 36ch; }
.flow__figure { grid-column: 1 / -1; margin-top: 4rem; }
.flow__svg .t-a { fill: #c9cdb2; }
.flow__svg .t-b { fill: #a7ae8b; }
.flow__svg .t-c { fill: var(--accent); }
.flow__parts { display: none; }
.flow__steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 2.5rem; padding: 0; list-style: none; }
.flow__steps h3 { font-family: var(--font-text); font-size: var(--step-lead); font-weight: 500; line-height: 1.2; }
.flow__steps p { margin-top: 0.6rem; max-width: 32ch; }
@media (max-width: 760px) {
  .flow__intro { grid-column: 1 / -1; }
  .flow__art { grid-column: 1 / -1; grid-row: 1; justify-self: start; width: 9rem; margin-bottom: 2rem; }
  /* on a phone each step sits beside its own drawing: scattered (Ask), a narrow band (Receive), rows (Carry);
     both columns share the figure's three rows, so a drawing stays level with its step whatever the text's length */
  .flow__figure { display: grid; grid-template-columns: minmax(5.5rem, 30%) 1fr; grid-template-rows: repeat(3, auto); column-gap: 1.25rem; row-gap: 2rem; margin-top: 2.5rem; }
  .flow__svg--wide { display: none; }
  .flow__parts { display: grid; grid-column: 1; grid-row: 1 / 4; grid-template-rows: subgrid; }
  .flow__part { display: block; width: 100%; height: auto; align-self: center; overflow: visible; }
  .flow__steps { grid-column: 2; grid-row: 1 / 4; grid-template-columns: 1fr; grid-template-rows: subgrid; margin-top: 0; }
  .flow__steps li { align-self: center; }
  .flow__steps h3 { font-size: 1.375rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .flow__svg use { transition: transform 1400ms var(--ease-expo); transition-delay: calc(var(--i) * 35ms); transform-box: fill-box; }
  .js .flow:not(.is-in) .flow__svg use { transform: translate(var(--dx), var(--dy)); }
}

/* ---------- questions: tabbed index cards ---------- */
.faq__head { grid-column: 3 / 11; }
.cards { grid-column: 3 / 11; margin-top: 3.5rem; }
.card { --tab-w: 200px; --tab-x: calc(var(--n) * min(150px, (100% - var(--tab-w)) / 5)); position: relative; padding-top: 40px; margin-top: -40px; }
.card:first-child { margin-top: 0; }
.card__shape { position: relative; padding: 1.5rem 2rem 2.5rem; min-height: 9rem; }
.card__shape::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: -40px; z-index: -1; background: var(--card-bg, var(--sage));
  clip-path: polygon(0 40px, var(--tab-x) 40px, var(--tab-x) 0, calc(var(--tab-x) + var(--tab-w)) 0, calc(var(--tab-x) + var(--tab-w)) 40px, 100% 40px, 100% 100%, 0 100%);
}
.card { isolation: isolate; }
.card:nth-child(3n+1) { --card-bg: var(--sage); }
.card:nth-child(3n+2) { --card-bg: var(--gold); }
.card:nth-child(3n+3) { --card-bg: var(--surface); }
.card__tab { position: absolute; top: -40px; left: var(--tab-x); width: var(--tab-w); height: 40px; display: flex; align-items: center; padding-left: 1.25rem; font-size: var(--step-small); font-weight: 500; }
.card h3 { font-family: var(--font-text); font-size: var(--step-body); font-weight: 500; line-height: 1.4; }
.card h3 button { display: block; width: 100%; text-align: left; padding-block: 0.5rem; min-height: 44px; }
.js .card:not(.is-open) .card__answer { display: none; }
@media (prefers-reduced-motion: no-preference) { .js .card.is-open .card__answer { animation: fade-in var(--t-ui) var(--ease-out); } }
@keyframes fade-in { from { opacity: 0; } }
.card__answer p { padding-top: 0.75rem; max-width: 50ch; }
@media (max-width: 760px) {
  .faq__head, .cards { grid-column: 1 / -1; }
  .card { --tab-w: 120px; --tab-x: calc(var(--n) * min(48px, (100% - var(--tab-w)) / 5)); }
  .card__tab { padding-left: 1rem; }
  .card__shape { padding: 1.25rem 1.25rem 2.25rem; }
}

/* ---------- the question: open on the field ----------
   The words float in the evening light; the fields are pale slips; a gold perforation with a small gold mandorla
   at each end runs between the two halves. */
.ask { overflow-x: clip; }
.coupon { grid-column: 2 / 12; position: relative; display: grid; grid-template-columns: 46fr 54fr; min-height: 26rem; }
.coupon__left { display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: 3rem; }
.coupon__left h2 { max-width: 8em; }
.coupon__left p { max-width: 30ch; }
.coupon form { position: relative; border-left: 4px dotted #c9973e; padding: 3rem; display: grid; gap: 0.625rem; align-content: center; }
.coupon form::before, .coupon form::after { content: ""; position: absolute; left: -2px; width: 1.1rem; height: 1.9rem; background: #c9973e; -webkit-mask: var(--mandorla) center / 100% 100% no-repeat; mask: var(--mandorla) center / 100% 100% no-repeat; }
.coupon form::before { top: 0; transform: translate(-50%, -60%); }
.coupon form::after { bottom: 0; transform: translate(-50%, 60%); }
.field { width: 100%; min-height: 3.25rem; padding: 0.8rem 1rem; background: var(--surface); color: var(--ink); border: 0; border-radius: 0; font-size: 1rem; }
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
select.field { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
textarea.field { min-height: 7rem; resize: vertical; }
.coupon form .button { margin-top: 0.5rem; }
.form-note { min-height: 1.5em; color: var(--ink); }
.field-error { margin: -0.25rem 0 0.25rem; font-size: 1rem; color: #8a2f22; }
.field[aria-invalid="true"] { outline: 2px solid #8a2f22; outline-offset: 0; }
@media (max-width: 860px) {
  .coupon { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .coupon__left { padding: 2rem 0.5rem; }
  .coupon form { border-left: 0; border-top: 4px dotted #c9973e; padding: 2rem 0.5rem; }
  .coupon form::before, .coupon form::after { top: -2px; bottom: auto; width: 1.9rem; height: 1.1rem; -webkit-mask-image: var(--lens); mask-image: var(--lens); }
  .coupon form::before { left: 0; transform: translate(-40%, -50%); }
  .coupon form::after { left: auto; right: 0; transform: translate(40%, -50%); }
}

/* ---------- footer: the name, built from mandorlas ---------- */
.footer { background: var(--bg); color: var(--ink); padding: clamp(3rem, 6vw, 5rem) var(--margin) calc(2rem + env(safe-area-inset-bottom)); margin-top: calc(var(--section) / 2); }
/* on very wide screens the footer keeps to a readable width, centred like the sections */
.footer { padding-inline: max(var(--margin), calc((100% - 1640px) / 2)); }
.footer a:not(.button) { color: var(--ink); }
.mark { display: flex; align-items: flex-end; gap: clamp(0.75rem, 3vw, 3rem); }
.mark__word { flex: 1 1 0; min-width: 0; width: 100%; height: auto; overflow: visible; }
.mark__word text { font-family: var(--font-display); font-size: 72px; font-weight: 500; fill: var(--moss); }
/* the name as stained glass wind chimes (js/footer-glass.js): leaded panes on gold threads from a gold bar */
.mark.is-glass .mark__word text { fill: #f8f1e2; stroke: #2b2a22; stroke-width: 5; stroke-linejoin: round; paint-order: stroke; }
.mark__glass { stroke: #2b2a22; stroke-width: 3; stroke-linejoin: round; }
.mark__lead { fill: none; stroke: #2b2a22; stroke-width: 6; }
.mark__bar { stroke: #c9973e; stroke-width: 2.5; stroke-linecap: round; }
.mark__thread { stroke: #c9973e; stroke-width: 1.6; }
.mark.is-glass .mark__word { cursor: default; }
.footer__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; margin-top: 3.5rem; }
.footer__cols ul { list-style: none; padding: 0; }
.footer__cols li + li { margin-top: 0.35rem; }
.footer__cols a { text-decoration: none; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) { .footer__cols a:hover { text-decoration: underline; text-underline-offset: 0.25em; } }
.footer__col { grid-column: span 2; }
.footer__col h2 { font-family: var(--font-text); font-size: var(--step-small); font-weight: 500; margin-bottom: 0.75rem; color: var(--ink); }
.footer__contact { grid-column: 9 / 13; font-size: var(--step-small); }
.footer__contact p + p { margin-top: 0.35rem; }
.footer__last { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; font-size: var(--step-small); }
.credits { margin-top: 2.5rem; max-width: 62ch; font-size: 1rem; color: var(--muted); }
.credits a { color: var(--muted); }
@media (max-width: 760px) {
  .mark { flex-direction: column; align-items: stretch; gap: 4px; }
  .mark.is-glass { gap: 2.5rem; }
  .footer__col { grid-column: span 6; }
  .footer__contact { grid-column: 1 / -1; }
}

/* ---------- inner pages ---------- */
/* The title picture is a whole mandorla window: on a computer at the right of the words, sized to the
   screen's height and kept clear of its edge; on an upright screen under the words. Scrolling away, the window
   drifts up a little and the picture inside leans in (title-drift, title-lean), with no jump to the full screen. */
.page-hero {
  position: relative; overflow: clip;
  --stage-h: max(calc(100svh - 5rem), 34rem);
  --mh: min(calc(var(--stage-h) - 6rem), 58rem); --mw: calc(var(--mh) * 0.57735);
  --cx: min(74vw, calc(100vw - var(--mw) / 2 - 4.5rem)); --cy: calc(var(--stage-h) / 2);
}
.page-hero__copy { position: absolute; z-index: 2; top: 0; left: 0; height: var(--stage-h); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--margin) 6svh; max-width: min(calc(48vw + var(--margin)), calc(var(--cx) - var(--mw) / 2 - 2rem)); }
.page-hero__copy p { margin-top: 2.25rem; max-width: 34ch; font-size: max(1.1875rem, var(--step-body)); }
.page-hero__copy .button { margin-top: 2.25rem; align-self: flex-start; }
.page-hero__scene { position: relative; }
.page-hero__stage { position: relative; height: var(--stage-h); }
.page-hero__art {
  position: absolute; margin: 0; left: calc(var(--cx) - var(--mw) / 2); top: calc(var(--cy) - var(--mh) / 2); width: var(--mw); height: var(--mh);
  background: var(--surface); -webkit-mask: var(--mandorla) center / 100% 100% no-repeat; mask: var(--mandorla) center / 100% 100% no-repeat;
}
.page-hero__shift { position: absolute; inset: 0; overflow: hidden; }
.page-hero__shift img, .page-hero__shift video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px), (orientation: portrait) {
  .page-hero { --mw: min(76vw, 24rem); --mh: calc(var(--mw) * 1.7321); --stage-h: calc(var(--mh) + 3.5rem); --cx: 50vw; }
  .page-hero__copy { position: relative; height: auto; justify-content: flex-start; padding: 9svh var(--margin) 0; max-width: none; }
  .page-hero__copy p { margin-top: 1.25rem; }
  .page-hero__copy .button { margin-top: 1.5rem; }
  .page-hero__scene { margin-top: 1.5rem; }
}

/* a statement on its own, set at the left edge */
.say p.statement { grid-column: 1 / 10; max-width: none; }
.say__art { grid-column: 10 / 13; grid-row: 1; justify-self: end; width: min(100%, 16rem); }
.say--art p.statement { grid-column: 1 / 9; grid-row: 1; align-self: center; }
.say .frame { height: 1em; width: 1.9em; vertical-align: -0.14em; }
@media (max-width: 760px) { .say p.statement, .say--art p.statement { grid-column: 1 / -1; } .say .frame { width: 1.4em; } .say__art { grid-column: 1 / -1; grid-row: 2; justify-self: start; width: 10rem; margin-top: 2.5rem; } }

/* a picture beside its words */
.split { align-items: center; }
.split__art { grid-column: 1 / 6; }
.split__text { grid-column: 7 / 13; }
.split--flip .split__art { grid-column: 8 / 13; grid-row: 1; }
.split--flip .split__text { grid-column: 1 / 7; grid-row: 1; }
.split__text h2 { max-width: 10em; }
.split__text > p { margin-top: 1.5rem; }
.split__text .bullets { margin-top: 1.75rem; }
.split__text h3 { margin-top: 2.5rem; }
.split__text h3 + p { margin-top: 0.6rem; }
.split__text .price { margin-top: 2.5rem; }
.split__text .button { margin-top: 1.75rem; }
@media (max-width: 760px) {
  .split__art, .split--flip .split__art { grid-column: 2 / 12; grid-row: 1; margin-bottom: 2.5rem; }
  .split__text, .split--flip .split__text { grid-column: 1 / -1; grid-row: 2; }
}

/* a full-bleed field of colour */
.field-band { padding: clamp(4.5rem, 9vw, 8rem) var(--margin); }
.field-band--sage { background: var(--sage); }
.field-band--gold { background: var(--gold); }
.field-band .band__head { grid-column: 1 / 6; }
.field-band .band__text { grid-column: 7 / 13; }
.field-band .band__text p + p { margin-top: 1em; }
@media (max-width: 760px) { .field-band .band__head, .field-band .band__text { grid-column: 1 / -1; } .field-band .band__text { margin-top: 1.5rem; } }

/* rows: one item per line, the name large */
.rows { grid-column: 1 / -1; margin-top: 3.5rem; padding: 0; list-style: none; }
.rows > li { display: grid; grid-template-columns: 8.5rem minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--gutter); align-items: center; padding-block: 1.75rem; }
.rows > li + li { margin-top: 0.5rem; }
.rows .mandorla { width: 8.5rem; }
.rows h3 { font-size: var(--step-head); line-height: 1.02; }
.rows p { max-width: 44ch; }
.rows--words > li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 760px) {
  .rows > li { grid-template-columns: 7.5rem minmax(0, 1fr); row-gap: 0.75rem; }
  .rows .mandorla { width: 7.5rem; grid-row: span 2; }
  .rows p { grid-column: 2; }
  .rows--words > li { grid-template-columns: 1fr; }
  .rows--words p { grid-column: 1; }
}

/* closing call to book */
.closing { text-align: left; }
.closing h2 { grid-column: 1 / 8; }
.closing .closing__side { grid-column: 8 / 13; align-self: end; }
.closing .closing__side p { margin-bottom: 1.75rem; max-width: 36ch; }
@media (max-width: 760px) { .closing h2, .closing .closing__side { grid-column: 1 / -1; } .closing .closing__side { margin-top: 1.5rem; } }

/* the booking calendar slot: a picture of where the calendar will sit */
.booking { align-items: start; }
.booking__head { grid-column: 1 / -1; margin-bottom: 3rem; }
.booking__head p { margin-top: 1.25rem; max-width: 52ch; }
.calendar { grid-column: 1 / 9; background: #fffdf8; color: var(--ink); padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid #ddd3c2; } /* taste-skill-ignore: the calendar is an interface fragment (data-ui) */
.calendar__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.calendar__month { font-family: var(--font-display); font-size: var(--step-lead); }
.calendar__status { font-size: var(--step-small); font-weight: 500; color: var(--accent); }
.calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 1.25rem; font-variant-numeric: tabular-nums; }
.calendar__grid > span { display: grid; place-items: center; aspect-ratio: 1.25; font-size: 1rem; background: var(--bg); }
.calendar__grid > .dow { background: none; aspect-ratio: auto; padding-block: 0.4rem; color: var(--muted); }
.calendar__grid > .open { background: var(--sage); font-weight: 500; }
.calendar__grid > .empty { background: none; }
.calendar__times { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.calendar__times span { padding: 0.55rem 0.9rem; background: var(--bg); font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.calendar__note { margin-top: 1.25rem; font-size: var(--step-small); color: var(--muted); max-width: none; }
.booking__side { grid-column: 10 / 13; }
.booking__side h3 { font-size: var(--step-lead); line-height: 1.15; }
.booking__side p { margin-top: 1rem; }
.booking__side .bullets { margin-top: 1rem; }
.booking__side .button { margin-top: 1.75rem; }
.choice { display: grid; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; border: 0; min-width: 0; }
.choice label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .choice label:hover { background: #e2d8c6; } }
.choice label { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.9rem 1rem; background: var(--surface); cursor: pointer; min-height: 44px; }
.choice input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; flex: none; transform: translateY(0.15rem); }
.choice strong { font-weight: 500; }
@media (max-width: 900px) { .calendar, .booking__side { grid-column: 1 / -1; } .booking__side { margin-top: 2.5rem; } }

/* ---------- living pictures and garden air (js/living.js, js/garden-air.js; never under reduced motion) ---------- */
.living-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; pointer-events: none; transition: opacity 700ms ease; }
.living-canvas.is-ready { opacity: 1; }
.living-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.001; pointer-events: none; }
.garden-air { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
/* mosaic shapes (js/mosaic-shapes.js): tiles gathering into a lily, a wing or a dove in the empty stretches, drawn whole and still under reduced motion */
.mosaic-sky { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
/* About's golden path (js/golden-path.js) and Contact's lantern (js/lantern.js) */
.golden-path { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.lantern-paper { position: fixed; z-index: 60; overflow: hidden; padding: 1rem 1.25rem; background: #f6efe1; color: var(--ink); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; transform-origin: center; pointer-events: none; }
.lantern { position: fixed; z-index: 61; width: 58px; height: 100px; pointer-events: none; }
.lantern::before { content: ""; position: absolute; inset: -34px -46px; border-radius: 50%; background: rgba(255, 206, 122, 0.5); filter: blur(18px); }
.lantern i { position: absolute; inset: 0; background: #f0bd5f; -webkit-mask: var(--mandorla) center / 100% 100% no-repeat; mask: var(--mandorla) center / 100% 100% no-repeat; }
.lantern i::after { content: ""; position: absolute; inset: 24% 30%; background: #fff4d8; -webkit-mask: var(--mandorla) center / 100% 100% no-repeat; mask: var(--mandorla) center / 100% 100% no-repeat; }
.lantern-spark { position: fixed; z-index: 60; width: 4px; height: 4px; border-radius: 50%; background: #f7d58b; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .living-canvas, .living-video, .garden-air { display: none; } }
/* tile halos (js/tile-halos.js): the broken mosaic rings round the moving pictures, behind the words */
.has-halo { isolation: isolate; }
.tile-halo { position: absolute; left: 0; top: 0; z-index: -1; display: block; pointer-events: none; }

/* ---------- motion layer ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .hero h1 .line { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js .hero h1 .line > span { display: block; transform: translateY(105%); animation: rise-line 900ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i) * 100ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(12px); animation: rise-in 500ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .hero__film { clip-path: inset(100% 0 0 0); animation: shutter-open 1100ms var(--ease-in-out) 150ms forwards; }
  .js .hero__shift video { transform: scale(1.12); animation: settle 1500ms var(--ease-soft) 100ms forwards; }
  .js .page-hero__art { clip-path: inset(100% 0 0 0); animation: shutter-open 1100ms var(--ease-in-out) 150ms forwards; }
  .js .page-hero__shift img, .js .page-hero__shift video { transform: scale(1.12); animation: settle 1500ms var(--ease-soft) 100ms forwards; }
  .js .page-hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js .page-hero h1 .line > span { display: block; transform: translateY(105%); animation: rise-line 900ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i, 0) * 100ms); }
  .js .page-hero [data-load] { opacity: 0; transform: translateY(12px); animation: rise-in 500ms var(--ease-out) forwards; animation-delay: var(--d); }
  .plate__art img { transition: transform 900ms var(--ease-soft); }
}
@keyframes rise-line { to { transform: none; } }
@keyframes rise-in { to { opacity: 1; transform: none; } }
@keyframes shutter-open { to { clip-path: inset(0); } }
@keyframes settle { to { transform: none; } }

/* The signature move: on scroll the mandorla opens until the garden fills the screen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { height: calc(220svh - 5rem); view-timeline-name: --hero; }
    .hero__stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
    .hero__film, .js .hero__film { animation: shutter-open 1100ms var(--ease-in-out) 150ms both, hero-open linear both; animation-timeline: auto, --hero; animation-range: normal, contain 14% contain 74%; }
    .hero__shift { animation: hero-centre linear both; animation-timeline: --hero; animation-range: contain 14% contain 74%; }
    .hero__copy { animation: hero-leave linear both; animation-timeline: --hero; animation-range: contain 0% contain 11%; }
    /* the closing words come up on the film itself, no box: the garden dims towards dusk behind them */
    .hero__film::after { content: ""; position: absolute; inset: 0; background: #11160d; opacity: 0; pointer-events: none; animation: hero-dusk linear both; animation-timeline: --hero; animation-range: contain 56% contain 78%; }
    .hero__line { display: block; position: absolute; z-index: 1; pointer-events: none; left: 0; bottom: 0; max-width: min(calc(15em + 2 * var(--margin)), calc(44vw + var(--margin))); padding: 0 var(--margin) clamp(2.5rem, 10svh, 6.5rem); color: var(--on-moss); font-size: var(--step-head); line-height: 1.3; letter-spacing: -0.01em; animation: hero-arrive linear both; animation-timeline: --hero; animation-range: contain 66% contain 80%; }
    /* the inner pages: as the title scrolls away, the words lift and fade, the window drifts up and the
       picture leans in (the window itself is only moved, never scaled, so its edge stays clean) */
    .page-hero__stage { animation: title-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .js .page-hero__shift > img, .js .page-hero__shift > video, .js .page-hero__shift > canvas { animation: settle 1500ms var(--ease-soft) 100ms both, title-lean linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
    .page-hero__copy { animation: hero-leave linear both; animation-timeline: view(); animation-range: exit 15% exit 85%; }
  }
}

@keyframes hero-open {
  0% { transform: scale(1.0000); }
  10% { transform: scale(1.1746); }
  20% { transform: scale(1.3797); }
  30% { transform: scale(1.6207); }
  40% { transform: scale(1.9037); }
  50% { transform: scale(2.2361); }
  60% { transform: scale(2.6265); }
  70% { transform: scale(3.0852); }
  80% { transform: scale(3.6239); }
  90% { transform: scale(4.2567); }
  100% { transform: scale(5.0000); }
}
@keyframes hero-centre {
  0% { transform: translate(calc(var(--sx) * var(--hk0, 1.0000)), calc(var(--sy) * var(--hk0, 1.0000))) scale(1.0000); }
  10% { transform: translate(calc(var(--sx) * var(--hk1, 0.7662)), calc(var(--sy) * var(--hk1, 0.7662))) scale(0.8513); }
  20% { transform: translate(calc(var(--sx) * var(--hk2, 0.5798)), calc(var(--sy) * var(--hk2, 0.5798))) scale(0.7248); }
  30% { transform: translate(calc(var(--sx) * var(--hk3, 0.4319)), calc(var(--sy) * var(--hk3, 0.4319))) scale(0.6170); }
  40% { transform: translate(calc(var(--sx) * var(--hk4, 0.3152)), calc(var(--sy) * var(--hk4, 0.3152))) scale(0.5253); }
  50% { transform: translate(calc(var(--sx) * var(--hk5, 0.2236)), calc(var(--sy) * var(--hk5, 0.2236))) scale(0.4472); }
  60% { transform: translate(calc(var(--sx) * var(--hk6, 0.1523)), calc(var(--sy) * var(--hk6, 0.1523))) scale(0.3807); }
  70% { transform: translate(calc(var(--sx) * var(--hk7, 0.0972)), calc(var(--sy) * var(--hk7, 0.0972))) scale(0.3241); }
  80% { transform: translate(calc(var(--sx) * var(--hk8, 0.0552)), calc(var(--sy) * var(--hk8, 0.0552))) scale(0.2759); }
  90% { transform: translate(calc(var(--sx) * var(--hk9, 0.0235)), calc(var(--sy) * var(--hk9, 0.0235))) scale(0.2349); }
  100% { transform: translate(calc(var(--sx) * var(--hk10, 0.0000)), calc(var(--sy) * var(--hk10, 0.0000))) scale(0.2000); }
}
@keyframes hero-dusk { to { opacity: 0.5; } }
@keyframes title-drift { to { transform: translateY(-9svh); } }
@keyframes title-lean { to { scale: 1.08; } }
@keyframes hero-leave { to { opacity: 0; transform: translateY(-6svh); visibility: hidden; } }
@keyframes hero-arrive { from { opacity: 0; visibility: hidden; transform: translateY(16px); } to { opacity: 1; visibility: visible; transform: none; } }

/* ---------- welcome screen and sound (js/sound.js) ---------- */
/* until the visitor chooses, only the living field shows behind the welcome; the page's opening waits */
html.gate .bar, html.gate main, html.gate .footer { visibility: hidden; }
html.gate .hero, html.gate .hero *, html.gate .page-hero, html.gate .page-hero * { animation-play-state: paused !important; }
.welcome { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 2rem var(--margin); background: rgba(246, 240, 230, 0.84); color: var(--ink); text-align: center; overflow-y: auto; transition: opacity 800ms var(--ease-out), visibility 0s linear 800ms; }
.welcome.is-leaving { opacity: 0; visibility: hidden; }
.welcome__inner { display: flex; flex-direction: column; align-items: center; max-width: 32rem; transition: transform 900ms var(--ease-out); }
.welcome.is-leaving .welcome__inner { transform: translateY(-1.5rem) scale(1.03); }
.welcome__mark { width: 2.5rem; background: var(--accent); margin-bottom: 1.75rem; }
.welcome__name { font-family: var(--font-display); font-size: var(--step-display); line-height: 1; letter-spacing: -0.02em; }
.welcome__line { margin-top: 0.75rem; font-family: var(--font-display); font-size: var(--step-lead); color: var(--muted); }
.welcome__note { margin-top: 2rem; max-width: 34ch; }
.welcome__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.25rem; }
.sound-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.25rem; font-size: var(--step-small); color: var(--ink); }
.sound-toggle__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.95rem; }
.sound-toggle__bars i { width: 0.3rem; height: 100%; background: currentColor; -webkit-mask: var(--mandorla) center / 100% 100% no-repeat; mask: var(--mandorla) center / 100% 100% no-repeat; transform-origin: bottom; transform: scaleY(0.45); transition: transform 400ms var(--ease-out); }
.sound-toggle.is-on .sound-toggle__bars i { transform: scaleY(1); }
@media (prefers-reduced-motion: no-preference) {
  .sound-toggle.is-on .sound-toggle__bars i { animation: sound-bar 1300ms ease-in-out infinite; }
  .sound-toggle.is-on .sound-toggle__bars i:nth-child(2) { animation-delay: -430ms; }
  .sound-toggle.is-on .sound-toggle__bars i:nth-child(3) { animation-delay: -860ms; }
}
@keyframes sound-bar { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
@media (hover: hover) and (pointer: fine) { .sound-toggle:hover .sound-toggle__label { text-decoration: underline; text-underline-offset: 0.3em; } }
@media (prefers-reduced-motion: reduce) { .welcome, .welcome__inner { transition: none; } }
/* moving between pages with the sound on (js/sound.js): each page opens in a frame that fades in over the last,
   so the sound never stops; the page underneath is hidden and asleep */
html.in-shell, html.in-shell body { height: 100%; overflow: hidden; }
html.in-shell body > *:not(.shell) { display: none !important; }
.shell { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
html.in-shell .shell { pointer-events: auto; background: #e8cfa2; }
.shell__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; visibility: hidden; }
.shell__frame.is-in { visibility: visible; }
/* the passage: a wash of warm evening light over the page being left, clearing over the next */
.shell__veil { position: absolute; inset: 0; z-index: 2; background: #f6ead2; opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease-out); }
.shell__veil.is-on { opacity: 1; transition-duration: 400ms; }
.shell__veil:not(.is-on) { transition-duration: 700ms; }
@media (prefers-reduced-motion: reduce) { .shell__veil { transition: none; } }