/* ==========================================================
   Table Matters — styles
   Colours & fonts live in :root below; change them there.

   The design language, in short:
   - Five earth colours: warm ivory, taupe, terracotta, olive and walnut.
   - Reading surfaces are calm, flat ivory and paper.
   - Feature panels use soft, out-of-focus "natural" textures with film grain
     (src/assets/img/tex-*.webp, made by scripts/make-textures.mjs).
   - Two recurring shapes from the logo: the ARCH (a person, a doorway) and the
     TABLE LINE (a level line things rest on).
   ========================================================== */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
/* Free stand-in for the logo font until "Apostrophe" is added (see src/_data/fonts.js) */
@font-face {
  font-family: "IM Fell DW Pica";
  src: url("/assets/fonts/im-fell-dw-pica.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* The five palette colours */
  --ivory: #f3e9dc;
  --taupe: #a48f7a;       /* decorative only; too light for text */
  --terracotta: #c2613f;  /* shapes, lines and markers */
  --olive: #6b6f4e;
  --walnut: #4a3223;

  /* Tints and shades of them */
  --paper: #f8f2ea;       /* raised surfaces: cards, fields */
  --linen: #eaddcb;       /* quiet panels */
  --line: #d9c9b5;        /* hairlines */
  --clay: #a44f31;        /* terracotta deep enough for buttons and link text */
  --clay-dark: #8c4128;
  --apricot: #e8b48f;     /* warm light, used on dark backgrounds */
  --moss: #3e4230;
  --night: #2b2019;
  --night-rgb: 43 32 25;
  --walnut-rgb: 74 50 35;

  /* Roles */
  --ink: var(--walnut);
  --ink-soft: #6f5c4c;
  --on-dark: var(--ivory);
  --on-dark-soft: color-mix(in srgb, var(--ivory) 80%, transparent);

  /* Natural textures */
  --tex-dusk: url("/assets/img/tex-dusk.webp");
  --tex-daylight: url("/assets/img/tex-daylight.webp");
  --tex-golden: url("/assets/img/tex-golden.webp");
  --tex-haze: url("/assets/img/tex-haze.webp");
  --tex-moss: url("/assets/img/tex-moss.webp");
  --grain-img: url("/assets/img/grain.png");

  /* Read by hero-shader.js */
  --shader-1: #c9744f; --shader-2: #e6b48e; --shader-3: #f3e9dc; --shader-4: #a9ab8c; --shader-shade: #4a3223;

  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "Logo", "IM Fell DW Pica", Georgia, serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.45rem + 1.2vw, 2.625rem);
  --step-3: clamp(2.2rem, 1.7rem + 2.2vw, 3.6rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 14px;
  /* An arch: a semicircular top on any box that's at least half as tall as it is wide */
  --arch: 9999px 9999px 0 0;
  --max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Grain ----------
   A very faint film-grain layer over the whole page. It scrolls with the content,
   like texture in paper. It's a tiny tiled PNG with baked-in transparency
   (no blend modes), so it stays cheap. Adjust with --grain-strength (0 = off).
   Textured panels add a little more of the same grain (see .tex). */
:root { --grain-strength: 0.2; }
body { position: relative; }
body::after {
  content: ""; position: absolute; inset: 0; z-index: 90; pointer-events: none;
  background: var(--grain-img) repeat 0 0 / 128px;
  opacity: var(--grain-strength);
}
.tex { position: relative; isolation: isolate; background: var(--bg-colour, var(--linen)) var(--bg-tex) center / cover no-repeat; }
.tex::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: var(--grain-img) repeat 0 0 / 128px; opacity: 0.35;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: color-mix(in srgb, var(--apricot) 60%, transparent); }
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0 0 0.6em; font-family: var(--font-serif); font-weight: 400; line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
main:focus { outline: none; }

.h1 { font-size: var(--step-3); letter-spacing: -0.01em; }
.h2 { font-size: var(--step-2); letter-spacing: -0.005em; }
.h3 { font-size: var(--step-1); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); font-family: var(--font-serif); }
/* Small, widely spaced capitals, like a label on a swatch */
.eyebrow { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.25rem; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
/* The table line: a short level rule */
.rule { display: block; width: 48px; margin: 1.75rem auto; border: 0; border-top: 2px solid var(--terracotta); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--ivory); padding: 0.6rem 1rem; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(700px + 2 * var(--gutter)); }
.container--wide { max-width: calc(1000px + 2 * var(--gutter)); }


/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--clay);
  color: var(--ivory);
  font: 600 1rem/1.2 var(--font-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover { background: var(--clay-dark); }
.btn--small { min-height: 42px; padding: 0.55rem 1.2rem; font-size: 0.9375rem; }
/* A quieter outline button (the header) */
.btn--quiet { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn--quiet:hover { background: var(--paper); border-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; }
.center .actions, .actions.center, .closing .actions, .steps .actions { justify-content: center; }
.link-soft { font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.link-soft:hover { text-decoration-color: currentColor; }
.actions--light { color: var(--on-dark); }
.link-arrow { display: inline-flex; gap: 0.4em; font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-bottom: 2px; }
.link-arrow span { transition: transform 0.3s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }
.link-arrow:hover { border-bottom-color: currentColor; }
/* Text links get a larger, invisible tap area, so they're easy to hit with a thumb */
.link-soft, .link-arrow, .logo { position: relative; }
.link-soft::before, .link-arrow::before, .logo::before { content: ""; position: absolute; inset: -10px -6px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 0.5em; color: var(--ink); text-decoration: none; line-height: 1; font-size: 1.6rem; }
.mark { height: 1.05em; width: auto; aspect-ratio: 38.4 / 33.4; flex-shrink: 0; }
.logo__word { font-family: var(--font-logo); letter-spacing: 0.005em; text-transform: lowercase; white-space: nowrap; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 30; }
.site-header__inner {
  max-width: 1440px; margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 1.6rem; flex-wrap: wrap; }
.site-nav__list a { text-decoration: none; font-size: 0.975rem; padding-block: 0.4rem; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { border-bottom-color: var(--terracotta); }
.nav-toggle { display: none; }
/* On small screens the menu is folded away, so its "Get in touch" button also sits in the bar */
.site-header__cta { display: none; }
@media (max-width: 899px) {
  .js .site-header__inner { flex-wrap: nowrap; }
  .site-header__end { display: flex; align-items: center; gap: 0.5rem; }
  .site-header__cta { display: inline-flex; }
  .site-nav .btn--quiet { display: none; }
  .logo { font-size: 1.4rem; }
}
@media (max-width: 350px) { .site-header__cta { display: none; } .site-nav .btn--quiet { display: inline-flex; } }

@media (max-width: 899px) {
  .site-nav { width: 100%; flex-wrap: wrap; justify-content: center; }
  .site-nav__list { justify-content: center; }
  .js .nav-toggle {
    display: grid; place-items: center; width: 48px; height: 48px; margin-right: -10px;
    background: none; border: 0; color: var(--ink); cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
  .nav-toggle__bars { position: relative; transform: translateY(-3px); }
  .nav-toggle__bars::before { content: ""; position: absolute; left: 0; top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(1px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(-7px) rotate(-90deg); }

  .js .site-nav {
    position: absolute; left: 8px; right: 8px; top: calc(100% - 4px); width: auto; /* not 100%, or it spills past the screen edge */
    flex-direction: column; gap: 1.25rem;
    background: var(--paper); border-radius: var(--radius);
    box-shadow: 0 24px 48px -20px rgb(var(--walnut-rgb) / 0.35);
    padding: 1.5rem var(--gutter) 1.75rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.25s, transform 0.3s var(--ease), visibility 0s 0.3s;
  }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.3s var(--ease); }
  .js .site-nav__list { flex-direction: column; align-items: center; gap: 0.25rem; }
  .js .site-nav__list a { display: inline-block; font-size: 1.125rem; font-family: var(--font-serif); padding-block: 0.45rem; }
}

/* ---------- Hero ---------- */
.hero { padding: 0 8px; }
.hero__grid { display: grid; gap: 8px; }
.hero__panel { position: relative; overflow: hidden; border-radius: var(--radius); isolation: isolate; padding: clamp(1.5rem, 4vw, 2.75rem); }
.hero__panel--scene { --bg-tex: var(--tex-golden); --bg-colour: var(--ivory); min-height: 56svh; display: flex; align-items: flex-start; justify-content: flex-end; }
.hero__shader { --figure-x: 0.5; }
/* WebGL figure-across-the-table (hero-shader.js); fades in over the texture once ready */
.hero__shader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__shader.is-ready { opacity: 1; }
.hero__line { margin: 0; font-family: var(--font-serif); font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.01em; }
.hero__line--left { position: relative; text-align: right; max-width: 11ch; color: var(--ink); }
.hero__panel--photo { min-height: 78svh; display: flex; align-items: flex-end; background: var(--night); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.hero__panel--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--night-rgb) / 0) 30%, rgb(var(--night-rgb) / 0.82) 100%); }
.hero__copy { color: var(--on-dark); max-width: 34rem; }
.hero__line--right { color: var(--on-dark); margin-bottom: 1.25rem; display: none; }
.hero__line-end { display: inline; }
.hero__text { font-size: var(--step-0); color: color-mix(in srgb, var(--ivory) 92%, transparent); }
.hero__copy .actions { margin-top: 1.5rem; }
.hero__note { margin: 1.25rem 0 0; font-size: var(--step--1); color: color-mix(in srgb, var(--ivory) 85%, transparent); }

/* Phones and tablets: Hannah's photo stands on its own, with the words and buttons
   below it (not over her face), and the top panel is shorter so the booking
   button comes up sooner. */
@media (max-width: 899px) {
  .hero__panel--scene { min-height: 42svh; }
  .hero__panel--photo { display: block; min-height: 0; padding: 0; }
  .hero__panel--photo::after { display: none; }
  .hero__img { position: relative; z-index: auto; height: 56svh; min-height: 320px; max-height: 620px; object-position: 50% 42%; }
  .hero__copy { max-width: none; padding: 1.5rem clamp(1.5rem, 4vw, 2.75rem) 2rem; }
  .hero__copy .actions { margin-top: 1.25rem; }
}

/* Desktop: the headline is split across the two panels. The left block's LAST line
   ("are too heavy") sits level with "to have alone.", so reading across that row
   completes the sentence, and the opening lines above it are read first.
   The panels share grid rows (subgrid) to keep those lines aligned at any size. */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; height: min(calc(100svh - 82px), 940px); min-height: 620px; }
  .hero__panel { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; min-height: 0; }
  .hero__line--left { grid-row: 2; align-self: end; justify-self: end; max-width: 10ch; }
  .hero__line-end { display: none; }
  .hero__copy { display: contents; }
  .hero__line--right { display: block; grid-row: 2; align-self: end; margin: 0; }
  .hero__rest { grid-row: 3; padding-top: 1.25rem; max-width: 34rem; }
  /* the shader's figure sits to the left of the headline on desktop */
  .hero__shader { --figure-x: 0.27; }
}

/* ---------- Scroll story: "an open door, and a seat at the table" ----------
   Static by default; main.js adds .is-scrolly (when motion is allowed) and
   updates --p from 0 → 1 as the section scrolls past.
   Evening: a tall doorway traces itself around the "Perhaps…" lines, filling the
   screen. Warm light gathers inside it at "You are welcome", then you pass through
   it into daylight. There, beneath "Why Table Matters", two arch-shaped wooden
   pieces (two people) come together and become the legs of a round table
   (drawn in 3D by story-table.js). */
.story { position: relative; margin-top: 8px; color: var(--on-dark); }
.story__sky { position: absolute; inset: 0; overflow: hidden; --bg-tex: var(--tex-dusk); --bg-colour: var(--night); }
.story__day { position: absolute; inset: 0; opacity: 0; --bg-tex: var(--tex-daylight); --bg-colour: var(--ivory); }
.story__door {
  --door-top: 4svh;
  --door-w: max(540px, min(84vw, 88svh));
  position: absolute; left: 50%; top: var(--door-top);
  width: var(--door-w); max-width: none; translate: -50% 0; overflow: visible; pointer-events: none;
  /* we walk through the middle of the screen */
  transform-origin: 50% calc(52svh - var(--door-top));
}
/* Phones: the doorway sits just inside the screen edges, so it still reads as a door */
@media (max-width: 600px) {
  .story__door { --door-w: calc(100vw - 16px); }
  .story.is-scrolly .story__scene--familiar { padding-inline: 1.75rem; }
  .story.is-scrolly .story__lines { font-size: 1.125rem; gap: 0.9rem; margin-block: 1.5rem; }
}
.story__door-line { fill: none; stroke: var(--apricot); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.story__door-glow, .story__door-light { opacity: 0; }
/* The table at the end of the story (story-table.js draws it; 600 × 200 scene units) */
.story__table {
  position: absolute; left: 50%; bottom: clamp(1rem, 5svh, 3.5rem);
  width: min(92vw, 640px); max-width: none; aspect-ratio: 3 / 1; translate: -50% 0; pointer-events: none;
}
.story__scene { position: relative; text-align: center; padding: var(--section) var(--gutter); max-width: 46rem; margin-inline: auto; }
.story__scene .h2 { color: var(--apricot); }
.story__lines { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1.1rem; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.45; }
.story__closing { margin: 2rem auto 0; max-width: 32rem; color: var(--on-dark-soft); }
.story__scene--why { color: var(--ink); max-width: 40rem; }
.story__scene--why .h2 { color: var(--ink); }
.story__why-text { font-size: var(--step-1); font-family: var(--font-serif); line-height: 1.55; margin-bottom: 1.5rem; }

/* Static fallback: the "why" panel sits on its own daylight texture */
.story:not(.is-scrolly) .story__door,
.story:not(.is-scrolly) .story__table { display: none; }
.story:not(.is-scrolly) .story__scene--why { max-width: none; background: var(--ivory) var(--tex-daylight) center / 100% 100%; }
.story:not(.is-scrolly) .story__scene--why > * { max-width: 40rem; margin-inline: auto; }

.story.is-scrolly {
  height: 480vh;
  /* Timeline, all driven by --p */
  --draw-door: clamp(0, (var(--p) - 0.02) / 0.36, 1);
  --glow: clamp(0, (var(--p) - 0.42) / 0.08, 1);
  --fill: clamp(0, (var(--p) - 0.535) / 0.035, 1);    /* quick, so it never lingers half-lit */
  --t: clamp(0, (var(--p) - 0.57) / 0.15, 1);
  --through: calc(var(--t) * var(--t));                 /* eases in, like stepping forward */
  --day: clamp(0, (var(--p) - 0.66) / 0.05, 1);
  /* the table at the end has its own timeline in story-table.js */
}
.story.is-scrolly .story__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.story.is-scrolly .story__scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-block: calc(var(--door-top, 4svh) + 3rem) 1.5rem;
  max-width: none;
}
.story.is-scrolly .story__scene--why { padding-block: 1.5rem calc(min(92vw, 640px) / 3 + clamp(1rem, 5svh, 3.5rem)); }
.story.is-scrolly .story__scene > * { max-width: 34rem; }
.story.is-scrolly .story__day { opacity: var(--day); }

/* The doorway: each stroke has pathLength="1", so 1 → 0 draws it in */
.story.is-scrolly .story__door-line { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--draw-door)); opacity: min(1, var(--draw-door) * 30); }
.story.is-scrolly .story__door-glow { opacity: var(--glow); }
.story.is-scrolly .story__door-light { opacity: var(--fill); }
/* ...then we step through it */
.story.is-scrolly .story__door { transform: scale(calc(1 + var(--through) * 5)); opacity: calc(1 - clamp(0, (var(--p) - 0.7) / 0.03, 1)); }

.story.is-scrolly .story__scene--familiar { opacity: clamp(0, (0.56 - var(--p)) / 0.06, 1); transform: translateY(calc(clamp(0, (var(--p) - 0.5) / 0.06, 1) * -24px)); }
.story.is-scrolly .story__scene--familiar .h2 { --o: clamp(0, (var(--p) - 0.01) / 0.05, 1); }
.story.is-scrolly .story__lines li { --o: clamp(0, (var(--p) - (0.07 + var(--i) * 0.085)) / 0.05, 1); }
.story.is-scrolly .story__closing { --o: clamp(0, (var(--p) - 0.42) / 0.05, 1); }
.story.is-scrolly .story__scene--familiar .h2,
.story.is-scrolly .story__lines li,
.story.is-scrolly .story__closing { opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 14px)); }
.story.is-scrolly .story__scene--why { --o: clamp(0, (var(--p) - 0.69) / 0.07, 1); opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 24px)); }

/* ---------- Daylight sections ---------- */
.section { padding-block: var(--section); }
/* Fade from the bottom of the story's daylight into the page */
.story + .section { background: linear-gradient(#e2dbc8, var(--ivory) 160px); }
.section__head { text-align: center; max-width: 36rem; margin: 0 auto 3rem; }
.section__head p { color: var(--ink-soft); }

/* Specialty cards */
.cards {
  list-style: none; padding: 0; margin: 0 0 2.5rem;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  max-width: 920px; margin-inline: auto;
}
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
.card a {
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card a:hover { border-color: var(--terracotta); transform: translateY(-2px); }
.card__title { font-size: var(--step-1); margin-bottom: 0.6rem; }
.card__text { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; flex-grow: 1; }
.card__more { font-size: 0.9375rem; font-weight: 500; margin-top: 0.5rem; color: var(--clay); }
.card__more span { display: inline-block; transition: transform 0.3s var(--ease); }
.card a:hover .card__more span { transform: translateX(4px); }

/* Meet Hannah: her photo in an arch */
.meet { position: relative; isolation: isolate; }
.meet__grid { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.meet__photo { position: relative; margin: 0 auto; aspect-ratio: 4 / 5; max-width: 440px; width: 100%; }
.meet__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--arch); }
.meet__text p { font-size: var(--step-0); }
@media (min-width: 900px) { .meet__grid { grid-template-columns: 5fr 6fr; } }

/* Steps: three small arches standing on one shared line, all in terracotta */
.steps { background: var(--linen); border-radius: var(--radius); margin-inline: 8px; }
.steps__list { list-style: none; padding: 0; margin: 3rem 0 1rem; display: grid; gap: 2.5rem; }
.steps__list li { text-align: center; max-width: 22rem; margin-inline: auto; position: relative; }
.steps__num {
  display: grid; place-items: end center; width: 52px; height: 64px; margin: 0 auto 1.25rem; padding-bottom: 0.6rem;
  border: 1.5px solid var(--terracotta); border-radius: var(--arch);
  font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; color: var(--ink);
  position: relative; z-index: 1;
}
.steps__list p { color: var(--ink-soft); }
@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .steps__list li:not(:last-child)::after { content: ""; position: absolute; top: 62.5px; left: calc(50% + 26px); width: calc(100% - 52px + 2rem); border-top: 1.5px solid var(--terracotta); }
}

/* FAQ */
.faq-preview__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .faq-preview__grid { grid-template-columns: 2fr 3fr; gap: 4rem; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0; font-family: var(--font-serif); font-size: var(--step-1); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--clay), var(--clay)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--clay), var(--clay)) center / 1.5px 10px no-repeat;
  transition: transform 0.3s var(--ease), background-color 0.3s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--paper); }
.faq summary:hover::after { background-color: var(--paper); }
.faq__answer { padding-bottom: 1.5rem; color: var(--ink-soft); max-width: 40rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* Closing invitation: an open doorway (a tall arch) standing on the walnut footer */
.closing {
  --bg-tex: var(--tex-golden); --bg-colour: var(--linen);
  width: calc(100% - 2 * var(--gutter)); max-width: 640px;
  margin: var(--section) auto 0;
  border-radius: var(--arch);   /* semicircular top, straight sides: it's taller than half its width */
  text-align: center;
  padding: clamp(7.5rem, 30vw, 13rem) clamp(1.25rem, 5vw, 3rem) clamp(4rem, 9vw, 6rem);
  background-position: center bottom; /* the warm, grassy part of the texture sits at the foot */
}
.closing__inner { max-width: 32rem; padding: 0; }
.closing p { color: var(--ink); }

/* ---------- Footer: walnut, like the table top ---------- */
.site-footer { --line: rgb(243 233 220 / 0.18); --ink-soft: var(--on-dark-soft); background: var(--walnut); color: var(--on-dark); padding-block: 3.5rem 2rem; font-size: 0.975rem; }
.site-footer .logo { color: var(--on-dark); }
.site-footer__top { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.site-footer__brand p { margin: 1rem 0 0; }
.site-footer__brand p + p { margin-top: 0.25rem; }
.site-footer__nav { display: flex; gap: 3rem; flex-wrap: wrap; }
.site-footer__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; align-content: start; }
.site-footer__nav a { text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__bottom { padding-top: 1.75rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.site-footer__crisis { max-width: 52rem; margin: 0; }
.site-footer__bottom p { margin: 0; }
.site-footer :focus-visible { outline-color: var(--apricot); }
@media (min-width: 900px) { .site-footer__top { grid-template-columns: 1fr auto; } }

/* ---------- Inner pages ---------- */
.page-hero { --bg-tex: var(--tex-haze); --bg-colour: var(--linen); overflow: hidden; text-align: center; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem); margin: 0 8px; border-radius: var(--radius); }
.page-hero .lede { max-width: 36rem; margin-inline: auto; }
.page-hero .actions { justify-content: center; }
.page-body { padding-block: clamp(2rem, 5vw, 4rem) var(--section); }

.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; margin-bottom: 0.4em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--terracotta); }
.prose a:not(.btn):not(.link-soft) { text-decoration-color: var(--terracotta); }
.prose-photo { width: 100%; max-width: 400px; margin: 0 auto 2.5rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--arch); }
.verse { margin: 2.5rem 0; text-align: center; }
.verse blockquote { margin: 0 auto; max-width: 30rem; font-family: var(--font-serif); font-style: italic; font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); }
.verse figcaption { margin-top: 0.75rem; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.verse::before { content: ""; display: block; width: 48px; margin: 0 auto 1.5rem; border-top: 2px solid var(--terracotta); }

.steps-inline { list-style: none; padding: 0 !important; display: grid; gap: 1.75rem; counter-reset: s; }
.steps-inline li { counter-increment: s; position: relative; padding-left: 4rem; margin: 0 !important; }
.steps-inline li::before {
  content: counter(s); position: absolute; left: 0; top: -0.4rem;
  display: grid; place-items: end center; width: 40px; height: 50px; padding-bottom: 0.45rem; border-radius: var(--arch);
  border: 1.5px solid var(--terracotta); font-family: var(--font-serif); font-size: 1.15rem; line-height: 1;
}
.steps-inline h2, .steps-inline h3 { margin: 0 0 0.3rem !important; font-size: var(--step-1); }
.steps-inline p { color: var(--ink-soft); margin: 0; }

.facts { margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }

.more-help { padding-block: 0 1rem; }
.pill-links { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.pill-links a { display: inline-block; padding: 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 0.975rem; transition: background-color 0.25s, border-color 0.25s; }
.pill-links a:hover { background: var(--paper); border-color: var(--terracotta); }

/* Contact */
.contact { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .contact { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.contact__book, .contact__form { border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); margin: 0 !important; }
.contact__form { background: var(--paper); border: 1px solid var(--line); }
.contact__book { --bg-tex: var(--tex-moss); --bg-colour: var(--olive); --ink-soft: var(--on-dark-soft); color: var(--on-dark); }
.contact__book :focus-visible { outline-color: var(--apricot); }
.contact__form label { display: block; font-size: 0.9375rem; font-weight: 500; margin-bottom: 0.35rem; }
.contact__form .optional { font-weight: 400; color: var(--ink-soft); }
.contact__form input, .contact__form textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--ivory); border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact__form input:focus, .contact__form textarea:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--terracotta) 22%, transparent); }
.form-note { font-size: 0.9rem; color: var(--ink-soft); }

/* Payment page (/pay/) */
.pay__draft { padding: 0.75rem 1rem; border: 1px dashed var(--terracotta); border-radius: 10px; color: var(--clay); font-size: 0.9375rem; }
.pay__amount { text-align: center; padding: 1.75rem var(--gutter); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.pay__amount .eyebrow { margin-bottom: 0.5rem; }
.pay__fee { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.2; margin-bottom: 0.4rem; }
.pay__amount .muted { margin: 0; }
.pay__per { display: block; font-family: var(--font-sans); font-size: 1rem; color: var(--ink-soft); }
.pay__methods { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pay__methods { grid-template-columns: 1fr 1fr; } }
.pay__method { text-align: center; padding: clamp(1.5rem, 4vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.pay__method h2 { margin: 0 0 1rem !important; }
.pay__method p { margin: 0.75rem 0 0; }
.pay__qr { display: block; width: 220px; max-width: 100%; height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 10px; background: #fff; object-fit: contain; }
.pay__detail { font-family: var(--font-serif); font-size: var(--step-1); letter-spacing: 0.04em; user-select: all; }
.pay__phone-tip { font-size: 0.9375rem; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .pay__phone-tip { display: none; } }
.pay__copy { margin-left: 0.4rem; min-height: 36px; padding: 0.3rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ivory); color: var(--clay); font: 500 0.875rem/1 var(--font-sans); letter-spacing: 0; vertical-align: middle; cursor: pointer; }
.pay__copy:hover { border-color: var(--terracotta); }
.pay__placeholder { display: grid; place-items: center; border: 1.5px dashed var(--taupe); background: var(--ivory); color: var(--ink-soft); font-size: 0.875rem; }
.pay__placeholder--inline { display: inline-block; padding: 0.1rem 0.75rem; border-radius: 6px; font-family: var(--font-sans); letter-spacing: 0; }

/* ---------- Gentle reveal on scroll (enabled by main.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

@media print {
  body::after, .tex::before { display: none; }
  .site-header nav, .nav-toggle, .story__sky, .story__door, .story__table { display: none !important; }
  .story { color: #000; height: auto !important; }
  .site-footer { background: none; color: #000; }
}