@import url('/fonts/fonts.css');

/* ══════════════════════════════════════════════════════════════════════════
   VELVET HOUSE — design system
   ──────────────────────────────────────────────────────────────────────────
   Klingatlan's liquid glass, in two lights.

   DARK is the identity — a candlelit room, warm near-black, brass. LIGHT is not
   an inversion of it but the same house by day: Klingatlan's own bone/paper
   ground with ink text and the same brass, which is why the two never read as
   different products.

   Two things do NOT invert when glass moves between grounds, and they are the
   whole reason this is two palettes rather than one filter:
     · speculars flip source — on dark the rim is lifted WHITE (a candle catching
       an edge), on light it is dropped INK (a shadow under a lens). A 60% white
       rim on a dark panel is a headlight; the same rim on bone is invisible.
     · brass changes job. On dark, brass-lit (#E8C185) is legible as text and the
       deep tone is a fill. On bone that same tone is unreadable, so the TEXT
       accent is the deep one. Hence `--accent-ink` (brass as words) is a
       separate token from the `--brass*` family (brass as fills and gradients).

   Theming is three-state: no `data-theme` follows the OS, `data-theme="light"`
   and `="dark"` pin it. Every token is defined on bare `:root` (dark, the
   identity default); the light blocks only redefine what differs.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── ground ─────────────────────────────────────────────────────────── */
  --ground:      #0C0908;
  --ground-rgb:  12, 9, 8;
  --ground-2:    #140F0D;
  --ground-lift: #1B1412;

  /* ── ink ────────────────────────────────────────────────────────────── */
  --ink:   #F7EEE2;
  --ink-2: #D9C7B5;
  --ink-3: #AC9686;
  --ink-4: #93806F;

  /* ── brass ──────────────────────────────────────────────────────────────
     The family is for FILLS (buttons, seals, glows); `--accent-ink` is the one
     ever set as a text colour, and it is the token that swaps roles between the
     two grounds. */
  --brass:      #C89A4E;
  --brass-lit:  #E8C185;
  --brass-deep: #8A6329;
  --brass-glow: rgba(200, 154, 78, 0.30);
  --accent-ink: #E8C185;
  --on-brass:   #1A0F04;                    /* ink laid ON a brass fill      */
  --ghost-ink:  rgba(232, 193, 133, 0.20);  /* oversized numerals, monograms */
  --ember-glow: rgba(168, 66, 46, 0.26);

  /* ── frosted glass ──────────────────────────────────────────────────────
     Three layers, and all three are needed for the material to read as frost
     rather than as translucent plastic: a backdrop BLUR of whatever is behind,
     a fine NOISE grain (real frosted glass scatters light — a perfectly smooth
     tint never looks frozen), and a specular RIM where a light source catches
     the edge. */
  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
  --glass-grain-opacity: 0.06;
  --glass-grain-blend: overlay;

  --glass-bg:   linear-gradient(152deg, rgba(255, 236, 214, 0.085) 0%, rgba(255, 236, 214, 0.045) 46%, rgba(255, 236, 214, 0.028) 100%);
  --glass-bg-2: linear-gradient(152deg, rgba(255, 236, 214, 0.055), rgba(255, 236, 214, 0.022));
  --glass-blur:   saturate(150%) blur(26px);
  --glass-blur-2: saturate(130%) blur(16px);

  --glass-rim: inset 0 1px 0.5px rgba(255, 233, 205, 0.26),
               inset 1px 0 0.5px rgba(255, 233, 205, 0.10),
               inset -1px 0 0.5px rgba(255, 233, 205, 0.07),
               inset 0 -1px 0.5px rgba(255, 233, 205, 0.04);
  --glass-depth: 0 2px 4px rgba(0, 0, 0, 0.30),
                 0 14px 34px -14px rgba(0, 0, 0, 0.55),
                 0 40px 90px -30px rgba(0, 0, 0, 0.70);
  --glass-depth-lift: 0 3px 6px rgba(0, 0, 0, 0.34),
                      0 22px 48px -16px rgba(0, 0, 0, 0.62),
                      0 60px 120px -34px rgba(0, 0, 0, 0.78);
  --glass-shadow:      var(--glass-rim), var(--glass-depth);
  --glass-shadow-lift: var(--glass-rim), var(--glass-depth-lift);

  /* ── surfaces & hairlines ───────────────────────────────────────────── */
  --surface-1:  rgba(255, 236, 214, 0.045);
  --surface-2:  rgba(255, 236, 214, 0.075);
  --surface-3:  rgba(255, 236, 214, 0.11);
  --hairline:   rgba(255, 233, 205, 0.11);
  --hairline-2: rgba(255, 233, 205, 0.055);
  --field-bg:   rgba(0, 0, 0, 0.30);
  --field-bg-focus: rgba(0, 0, 0, 0.42);
  --field-line-hover: rgba(255, 233, 205, 0.20);

  /* ── atmosphere ─────────────────────────────────────────────────────── */
  --bloom-1: var(--ember-glow);
  --bloom-2: var(--brass-glow);
  --bloom-3: rgba(120, 62, 40, 0.20);
  --bloom-opacity: 1;
  --page-grain-opacity: 0.42;
  --page-grain-blend: soft-light;
  --tint-veil: rgba(0, 0, 0, 0.34);          /* the alternating section wash  */
  --photo-wash: rgba(12, 9, 8, 0.52);        /* keeps a photo inside the room */
  --caption-shadow: rgba(0, 0, 0, 0.80);
  --error-ink: #F0A08C;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8C185' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --date-icon-filter: invert(78%) sepia(30%) saturate(560%) hue-rotate(348deg);

  /* ── type ───────────────────────────────────────────────────────────── */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-hero:  clamp(2.9rem, 1.4rem + 6.2vw, 6.5rem);
  --t-h2:    clamp(2.05rem, 1.3rem + 3.1vw, 3.6rem);
  --t-h3:    clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  --t-lead:  clamp(1.02rem, 0.96rem + 0.35vw, 1.2rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* ── rhythm ─────────────────────────────────────────────────────────── */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;
  --gut: clamp(18px, 4vw, 44px);
  --maxw: 1220px;
  --section-y: clamp(72px, 9vw, 132px);
  --nav-h: 68px;
  --nav-top: 14px;
  --theme-thumb: 32px;

  --ease: cubic-bezier(0.22, 0.8, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.48, 1);
  --t-fast: 0.18s;
  --t-base: 0.3s;
  --t-slow: 0.44s;
}

/* ══ LIGHT — the same house by day ═══════════════════════════════════════
   Declared twice on purpose: once for "follow the OS" and once for the pinned
   choice, so the switch wins in BOTH directions. A shared class would have to
   be stamped by JS before first paint, which is exactly the flash this avoids. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;

    --ground:      #F4F1E9;
    --ground-rgb:  244, 241, 233;
    --ground-2:    #EDE8DC;
    --ground-lift: #FBF9F5;

    --ink:   #17130F;
    --ink-2: #423931;
    --ink-3: #6E625A;
    --ink-4: #6B6058;

    --accent-ink: #7E5A22;
    --ghost-ink:  rgba(138, 99, 41, 0.18);
    --ember-glow: rgba(168, 66, 46, 0.13);
    --brass-glow: rgba(200, 154, 78, 0.20);

    --glass-grain-opacity: 0.05;
    --glass-grain-blend: multiply;
    --glass-bg:   linear-gradient(152deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.32) 100%);
    --glass-bg-2: linear-gradient(152deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.26));
    --glass-blur:   saturate(190%) blur(30px);
    --glass-blur-2: saturate(160%) blur(20px);
    --glass-rim: inset 0 1px 0.5px rgba(255, 255, 255, 0.92),
                 inset 1px 0 0.5px rgba(255, 255, 255, 0.45),
                 inset -1px 0 0.5px rgba(23, 19, 15, 0.05),
                 inset 0 -1px 0.5px rgba(23, 19, 15, 0.07);
    --glass-depth: 0 1px 2px rgba(23, 19, 15, 0.04),
                   0 8px 24px -12px rgba(23, 19, 15, 0.16),
                   0 24px 56px -24px rgba(23, 19, 15, 0.20);
    --glass-depth-lift: 0 2px 4px rgba(23, 19, 15, 0.05),
                        0 14px 34px -14px rgba(23, 19, 15, 0.20),
                        0 40px 80px -28px rgba(23, 19, 15, 0.28);

    --surface-1:  rgba(255, 255, 255, 0.50);
    --surface-2:  rgba(255, 255, 255, 0.74);
    --surface-3:  rgba(255, 255, 255, 0.94);
    --hairline:   rgba(23, 19, 15, 0.11);
    --hairline-2: rgba(23, 19, 15, 0.06);
    --field-bg:   rgba(255, 255, 255, 0.72);
    --field-bg-focus: #FFFFFF;
    --field-line-hover: rgba(23, 19, 15, 0.22);

    --bloom-3: rgba(200, 154, 78, 0.14);
    --bloom-opacity: 0.85;
    --page-grain-opacity: 0.26;
    --page-grain-blend: multiply;
    --tint-veil: rgba(23, 19, 15, 0.035);
    --photo-wash: rgba(23, 19, 15, 0.28);
    --caption-shadow: rgba(0, 0, 0, 0.55);
    --error-ink: #A03A20;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E5A22' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --date-icon-filter: invert(34%) sepia(42%) saturate(760%) hue-rotate(1deg);
  }
}

:root[data-theme='light'] {
  color-scheme: light;

  --ground:      #F4F1E9;
  --ground-rgb:  244, 241, 233;
  --ground-2:    #EDE8DC;
  --ground-lift: #FBF9F5;

  --ink:   #17130F;
  --ink-2: #423931;
  --ink-3: #6E625A;
  --ink-4: #6B6058;

  --accent-ink: #7E5A22;
  --ghost-ink:  rgba(138, 99, 41, 0.18);
  --ember-glow: rgba(168, 66, 46, 0.13);
  --brass-glow: rgba(200, 154, 78, 0.20);

  --glass-grain-opacity: 0.05;
  --glass-grain-blend: multiply;
  --glass-bg:   linear-gradient(152deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.32) 100%);
  --glass-bg-2: linear-gradient(152deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.26));
  --glass-blur:   saturate(190%) blur(30px);
  --glass-blur-2: saturate(160%) blur(20px);
  --glass-rim: inset 0 1px 0.5px rgba(255, 255, 255, 0.92),
               inset 1px 0 0.5px rgba(255, 255, 255, 0.45),
               inset -1px 0 0.5px rgba(23, 19, 15, 0.05),
               inset 0 -1px 0.5px rgba(23, 19, 15, 0.07);
  --glass-depth: 0 1px 2px rgba(23, 19, 15, 0.04),
                 0 8px 24px -12px rgba(23, 19, 15, 0.16),
                 0 24px 56px -24px rgba(23, 19, 15, 0.20);
  --glass-depth-lift: 0 2px 4px rgba(23, 19, 15, 0.05),
                      0 14px 34px -14px rgba(23, 19, 15, 0.20),
                      0 40px 80px -28px rgba(23, 19, 15, 0.28);

  --surface-1:  rgba(255, 255, 255, 0.50);
  --surface-2:  rgba(255, 255, 255, 0.74);
  --surface-3:  rgba(255, 255, 255, 0.94);
  --hairline:   rgba(23, 19, 15, 0.11);
  --hairline-2: rgba(23, 19, 15, 0.06);
  --field-bg:   rgba(255, 255, 255, 0.72);
  --field-bg-focus: #FFFFFF;
  --field-line-hover: rgba(23, 19, 15, 0.22);

  --bloom-3: rgba(200, 154, 78, 0.14);
  --bloom-opacity: 0.85;
  --page-grain-opacity: 0.26;
  --page-grain-blend: multiply;
  --tint-veil: rgba(23, 19, 15, 0.035);
  --photo-wash: rgba(23, 19, 15, 0.28);
  --caption-shadow: rgba(0, 0, 0, 0.55);
  --error-ink: #A03A20;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237E5A22' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --date-icon-filter: invert(34%) sepia(42%) saturate(760%) hue-rotate(1deg);
}

/* ── reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.005em;
  overflow-x: clip;              /* never `hidden`: it makes <body> a scroll
                                    container and breaks position:sticky */
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
/* A `display` rule in a class beats the hidden attribute — .rail is display:flex,
   so hiding it after a successful booking silently did nothing. */
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; color: var(--ink); }
h1 { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); line-height: 1.18; letter-spacing: -0.018em; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── the room: bloom pools + grain ──────────────────────────────────────
   The most identity-carrying thing on the page: it makes the ground read as a
   lit room rather than a flat colour. The breath is 24s over 3% of opacity — at
   the edge of perception, which is the point; a visible pulse would read as a
   loading state. In light it is dialled back: bone needs a suggestion of warmth,
   not a spotlight. */
body::before {
  content: '';
  position: fixed;
  inset: -20vh -10vw;
  pointer-events: none;
  z-index: -2;
  opacity: var(--bloom-opacity);
  background:
    radial-gradient(46rem 40rem at 10% 6%, var(--bloom-1), transparent 68%),
    radial-gradient(40rem 36rem at 92% 34%, var(--bloom-2), transparent 66%),
    radial-gradient(52rem 30rem at 52% 108%, var(--bloom-3), transparent 70%);
  animation: breathe 24s var(--ease) infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: var(--page-grain-opacity);
  background-image: var(--glass-grain);
  mix-blend-mode: var(--page-grain-blend);
}
@keyframes breathe {
  from { opacity: calc(var(--bloom-opacity) * 0.86); transform: scale(1); }
  to   { opacity: var(--bloom-opacity);              transform: scale(1.035); }
}

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { width: min(var(--maxw), 100% - (var(--gut) * 2)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: linear-gradient(180deg, transparent, var(--tint-veil) 18%, var(--tint-veil) 82%, transparent); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--brass); color: var(--on-brass); padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.skip:focus { left: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 18px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; opacity: 0.55; }
.lead { font-size: var(--t-lead); color: var(--ink-3); max-width: 54ch; }
.muted { color: var(--ink-3); }

.section-head { max-width: 62ch; margin-bottom: clamp(34px, 4vw, 58px); }
.section-head .lead { margin-top: 20px; }

/* ── frosted glass ────────────────────────────────────────────────────────
   The grain is its own layer rather than part of the gradient, because it must
   NOT scale with the panel — frost has a fixed grain size whatever the size of
   the pane. `isolation` keeps its blend mode from reaching the page behind it. */
.glass, .glass-2 { position: relative; isolation: isolate; }
.glass::before, .glass-2::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: var(--glass-grain);
  background-size: 160px 160px;
  opacity: var(--glass-grain-opacity);
  mix-blend-mode: var(--glass-grain-blend);
  pointer-events: none;
  z-index: 0;
}
.glass > *, .glass-2 > * { position: relative; z-index: 1; }
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-lg);
}
.glass-2 {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--glass-blur-2);
  backdrop-filter: var(--glass-blur-2);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-md);
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border: 0; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.btn--brass {
  background: linear-gradient(168deg, var(--brass-lit), var(--brass) 58%, var(--brass-deep));
  color: var(--on-brass);
  box-shadow: 0 1px 0 rgba(255, 240, 214, 0.42) inset, 0 12px 28px -12px rgba(200, 154, 78, 0.66);
}
.btn--brass:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 240, 214, 0.5) inset, 0 18px 38px -12px rgba(200, 154, 78, 0.8); }
.btn--ghost {
  background: var(--surface-1); color: var(--ink);
  box-shadow: var(--glass-rim);
  -webkit-backdrop-filter: var(--glass-blur-2); backdrop-filter: var(--glass-blur-2);
}
.btn--ghost:hover { background: var(--surface-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--wide { width: 100%; }

/* ── header: a floating frosted pill ──────────────────────────────────────
   Not a full-bleed bar. The sticky element itself is transparent and unpadded,
   so what travels down the page is the pill, with the page visibly blurring
   THROUGH it — which is only true because nothing behind it is opaque: the
   moment the bar gets a solid background, backdrop-filter has nothing left to
   reveal and the whole material reads as a flat strip. */
.nav {
  position: sticky;
  top: var(--nav-top);
  z-index: 20;
  margin-top: var(--nav-top);
  pointer-events: none;             /* the gutter beside the pill stays inert */
}
.nav .wrap {
  pointer-events: auto;
  display: flex; align-items: center; gap: 20px;
  height: var(--nav-h);
  padding-inline: clamp(16px, 2vw, 26px);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(165%) blur(22px);
  backdrop-filter: saturate(165%) blur(22px);
  box-shadow: var(--glass-shadow);
  position: relative; isolation: isolate;
}
.nav .wrap::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background-image: var(--glass-grain); background-size: 160px 160px;
  opacity: var(--glass-grain-opacity); mix-blend-mode: var(--glass-grain-blend);
  pointer-events: none; z-index: 0;
}
.nav .wrap > * { position: relative; z-index: 1; }

.brand {
  font-family: var(--display); font-size: 1.34rem; letter-spacing: -0.015em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 0.32em;
}
.brand em { font-style: italic; color: var(--accent-ink); }
.nav-links { display: flex; align-items: center; gap: 24px; margin-inline-start: auto; }
.nav-links a {
  font-size: var(--t-small); color: var(--ink-3); text-decoration: none;
  position: relative; padding-block: 6px;
  transition: color var(--t-base) var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent-ink); transition: right var(--t-base) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
/* Only the narrowest pill drops the language pill into the sheet (see the
   460px block); everywhere else it lives in .nav-side and this copy is inert. */
.nav-links .lang { display: none; }
.nav-side { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.lang {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; padding: 9px 12px;
  border-radius: var(--r-pill); background: var(--surface-1);
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.lang:hover { color: var(--ink); background: var(--surface-2); }
.nav-toggle {
  display: none; background: var(--surface-1); border: 0; border-radius: var(--r-pill);
  width: 40px; height: 40px; cursor: pointer; color: var(--ink);
  align-items: center; justify-content: center;
}

/* ── theme switch: three states in one control ────────────────────────────
   Auto / light / dark, not a two-way flip — "follow my system" is a real
   preference, and a binary toggle silently discards it the first time it is
   touched. The thumb slides to the active third, so the state is readable
   without decoding the icons. */
.theme {
  position: relative; display: inline-flex; align-items: center;
  padding: 3px; border-radius: var(--r-pill);
  background: var(--surface-1); box-shadow: var(--glass-rim);
}
.theme::before {
  content: '';
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: var(--theme-thumb);
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, var(--brass-lit), var(--brass));
  box-shadow: 0 4px 12px -6px var(--brass-glow);
  transition: transform var(--t-slow) var(--ease-spring);
}
:root[data-theme='light'] .theme::before { transform: translateX(var(--theme-thumb)); }
:root[data-theme='dark'] .theme::before  { transform: translateX(calc(var(--theme-thumb) * 2)); }
.theme button {
  position: relative; z-index: 1;
  width: var(--theme-thumb); height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--ink-3); border-radius: var(--r-pill);
  transition: color var(--t-base) var(--ease);
}
.theme button svg { width: 15px; height: 15px; }
.theme button:hover { color: var(--ink); }
.theme button[aria-pressed='true'] { color: var(--on-brass); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(38px, 6vw, 84px) clamp(40px, 5vw, 64px); }
.hero-grid {
  display: grid; grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.hero h1 { margin-bottom: 26px; white-space: pre-line; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-figure { position: relative; padding: 10px; border-radius: var(--r-xl); }
.hero-figure img {
  width: 100%; height: clamp(340px, 46vw, 560px); object-fit: cover;
  border-radius: calc(var(--r-xl) - 10px);
}
.hero-figure::after {
  content: ''; position: absolute; inset: 10px; border-radius: calc(var(--r-xl) - 10px);
  background: linear-gradient(200deg, rgba(200, 154, 78, 0.10), transparent 42%, var(--photo-wash));
  pointer-events: none; z-index: 2;
}
.hero-caption {
  position: absolute; left: 26px; bottom: 26px; z-index: 3;
  font-family: var(--display); font-style: italic; font-size: 1.05rem; color: #F7EEE2;
  text-shadow: 0 2px 12px var(--caption-shadow);
}

.trust {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(34px, 4vw, 56px); padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px);
  gap: clamp(18px, 3vw, 40px);
}
.trust > div + div { border-inline-start: 1px solid var(--hairline); padding-inline-start: clamp(18px, 3vw, 40px); }
.trust strong {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: 1.7rem; color: var(--accent-ink); letter-spacing: -0.02em;
}
.trust span { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--ink-3); }

/* ── the ritual menu ────────────────────────────────────────────────────
   Deliberately NOT four equal cards. A printed menu — numbered rows, hairline
   rules, the price set in the display face and right-aligned — is both more
   distinctive and easier to scan for the one thing a guest is comparing, which
   is time against price. */
.menu { border-top: 1px solid var(--hairline); }
.ritual {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 3vw, 44px); align-items: start;
  padding: clamp(26px, 3.4vw, 42px) clamp(8px, 1.4vw, 20px);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: background var(--t-base) var(--ease);
}
.ritual::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(200, 154, 78, 0.09), transparent 60%);
  opacity: 0; transition: opacity var(--t-base) var(--ease); pointer-events: none;
}
.ritual:hover::before { opacity: 1; }
.ritual-num {
  font-family: var(--display); font-size: 1.05rem; color: var(--accent-ink);
  padding-top: 0.35em; font-variant-numeric: tabular-nums; opacity: 0.85;
}
.ritual-body h3 { margin-bottom: 6px; }
.ritual-lead {
  font-family: var(--display); font-style: italic; color: var(--accent-ink);
  font-size: 0.98rem; margin-bottom: 12px;
}
.ritual-body p { color: var(--ink-3); max-width: 52ch; }
.ritual-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--surface-1); box-shadow: var(--glass-rim);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2);
}
.ritual-aside { text-align: end; display: grid; gap: 14px; justify-items: end; min-width: 148px; }
.price {
  font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.05rem);
  color: var(--ink); letter-spacing: -0.02em; white-space: nowrap;
}
.price small { display: block; font-family: var(--sans); font-size: var(--t-micro); color: var(--ink-4); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
.ritual-cta {
  font-size: var(--t-small); font-weight: 700; color: var(--accent-ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap var(--t-base) var(--ease);
}
.ritual-cta:hover { gap: 12px; }
.menu-note { margin-top: 24px; font-size: var(--t-small); color: var(--ink-4); }

/* ── the house ────────────────────────────────────────────────────────── */
.house-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.pillars { display: grid; gap: 14px; }
.pillar { padding: clamp(20px, 2.4vw, 28px); }
.pillar h3 { font-size: 1.22rem; margin-bottom: 8px; }
.pillar p { color: var(--ink-3); font-size: 0.95rem; }
.pillar-mark {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 18px;
  display: grid; place-items: center;
  color: var(--accent-ink);
  background: linear-gradient(150deg, rgba(200, 154, 78, 0.22), rgba(200, 154, 78, 0.07));
  box-shadow: var(--glass-rim), 0 10px 24px -14px var(--brass-glow);
}
.pillar-mark svg { width: 21px; height: 21px; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--r-md); position: relative; aspect-ratio: 4 / 5; }
.gallery figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.045); }
.gallery .placeholder {
  width: 100%; height: 100%;
  background:
    radial-gradient(10rem 9rem at 32% 26%, rgba(232, 193, 133, 0.42), transparent 66%),
    radial-gradient(12rem 11rem at 76% 80%, rgba(168, 66, 46, 0.34), transparent 70%),
    linear-gradient(158deg, var(--ground-lift), var(--ground-2));
  box-shadow: var(--glass-rim);
  display: grid; place-items: center; gap: 12px; align-content: center;
}
/* A drawn candle rather than an empty box: a blank tile reads as a broken
   image, a lit one reads as a room we have not photographed yet. */
.gallery .placeholder::before {
  content: ''; width: 10px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 40% 30%, #FFF0D2, var(--brass) 70%);
  box-shadow: 0 0 22px 6px rgba(232, 193, 133, 0.35);
}
.gallery .placeholder span {
  font-family: var(--display); font-style: italic; color: var(--ink-3); font-size: 0.95rem;
  padding: 0 22px; text-align: center;
}

/* ── team ─────────────────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.member { overflow: hidden; }
.member-photo { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: var(--ground-lift); }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-photo .monogram {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--display); font-size: 3.2rem; color: var(--ghost-ink);
  background: linear-gradient(168deg, var(--ground-lift), var(--ground-2));
}
.member-body { padding: 18px 20px 22px; }
.member-body h3 { font-size: 1.2rem; }
.member-body .note { font-family: var(--display); font-style: italic; color: var(--accent-ink); font-size: 0.92rem; margin-top: 2px; }
.member-body .langs { margin-top: 12px; font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }
.empty-note {
  padding: clamp(24px, 3vw, 36px); font-family: var(--display); font-style: italic;
  color: var(--ink-3); font-size: 1.05rem; text-align: center;
}

/* ── steps ────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); counter-reset: step; }
.step { padding: clamp(24px, 2.6vw, 32px); position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: 2.6rem; color: var(--ghost-ink);
  line-height: 1; display: block; margin-bottom: 14px;
}
.step h3 { font-size: 1.18rem; margin-bottom: 8px; }
.step p { color: var(--ink-3); font-size: 0.95rem; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--hairline); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--display); font-size: clamp(1.08rem, 1rem + 0.4vw, 1.32rem); color: var(--ink);
  transition: color var(--t-base) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 13px; height: 13px;
  border-right: 1.5px solid var(--accent-ink); border-bottom: 1.5px solid var(--accent-ink);
  transform: translateY(-70%) rotate(45deg); transition: transform var(--t-base) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq .answer { padding: 0 44px 26px 0; color: var(--ink-3); max-width: 68ch; }
.faq details[open] .answer { animation: fade-up var(--t-slow) var(--ease-out) both; }

/* ── contact ──────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.hours { padding: clamp(22px, 2.6vw, 32px); }
.hours-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--hairline-2);
  font-size: 0.95rem;
}
.hours-row:last-child { border-bottom: 0; }
.hours-row.is-today .day::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass); margin-inline-end: 9px; vertical-align: middle;
  box-shadow: 0 0 10px var(--brass);
}
.hours-row .day { color: var(--ink-3); }
.hours-row.is-today .day { color: var(--ink); }
.hours-row .time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.hours-row .time.closed { color: var(--ink-4); }
.contact-facts { display: grid; gap: 14px; }
.fact { padding: clamp(20px, 2.4vw, 28px); }
.fact h3 { font-size: 1.1rem; margin-bottom: 8px; }
.fact p, .fact a { color: var(--ink-3); font-size: 0.95rem; text-decoration: none; }
.fact a:hover { color: var(--accent-ink); }
.fact .big { font-family: var(--display); font-size: 1.3rem; color: var(--ink); letter-spacing: -0.01em; }

/* ── forms ────────────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 16px; }
.field > span, .field-label {
  display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
input[type='text'], input[type='tel'], input[type='email'], input[type='date'],
input[type='time'], input[type='number'], input[type='password'], select, textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--field-bg); color: var(--ink);
  border: 1px solid var(--hairline);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--field-line-hover); }
input:focus, select:focus, textarea:focus { border-color: var(--brass); outline: none; background: var(--field-bg-focus); }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
textarea { min-height: 92px; resize: vertical; }
select {
  appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
/* The native date/time indicator is black-on-black in a dark field. */
input[type='date']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator { filter: var(--date-icon-filter); cursor: pointer; }

.check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.9rem; color: var(--ink-3); margin-bottom: 14px; cursor: pointer;
  line-height: 1.5;
}
.check input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--brass); flex: 0 0 auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: var(--t-micro); color: var(--ink-4); margin-top: 14px; }
.form-status { min-height: 22px; margin-top: 12px; font-size: 0.92rem; color: var(--accent-ink); }
.form-status.is-error { color: var(--error-ink); }

/* ── booking wizard ───────────────────────────────────────────────────── */
.book-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(26px, 3.6vw, 56px); align-items: start; }
.book-panel { padding: clamp(24px, 3vw, 38px); }
.rail { display: flex; gap: 8px; margin-bottom: 26px; }
.rail-step { flex: 1; display: grid; gap: 8px; }
.rail-step .bar { height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.rail-step .bar::after {
  content: ''; display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brass), var(--brass-lit));
  transition: width var(--t-slow) var(--ease-out);
}
.rail-step[data-state='done'] .bar::after, .rail-step[data-state='active'] .bar::after { width: 100%; }
.rail-step span {
  font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4);
  transition: color var(--t-base) var(--ease);
}
.rail-step[data-state='active'] span { color: var(--accent-ink); font-weight: 700; }
.rail-step[data-state='done'] span { color: var(--ink-3); }

.pane { display: none; animation: fade-up var(--t-slow) var(--ease-out) both; }
.pane.is-active { display: block; }

.picker { display: grid; gap: 10px; margin-bottom: 20px; }
.pick {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-1); box-shadow: var(--glass-rim);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.pick:hover { background: var(--surface-2); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick strong { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--ink); font-weight: 400; }
.pick small { display: block; color: var(--ink-4); font-size: var(--t-small); margin-top: 2px; }
.pick .pick-price { font-family: var(--display); color: var(--ink-2); white-space: nowrap; }
.pick:has(input:checked) {
  background: linear-gradient(150deg, rgba(200, 154, 78, 0.24), rgba(200, 154, 78, 0.09));
  box-shadow: var(--glass-rim), 0 0 0 1px var(--brass-deep), 0 12px 30px -14px var(--brass-glow);
}
.pick:has(input:checked) .pick-price { color: var(--accent-ink); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 9px; margin-top: 6px; }
.slot {
  position: relative; padding: 13px 6px; border-radius: var(--r-sm); text-align: center;
  background: var(--surface-1); box-shadow: var(--glass-rim); cursor: pointer;
  font-variant-numeric: tabular-nums; font-size: 0.98rem; color: var(--ink-2);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot:hover { background: var(--surface-3); color: var(--ink); transform: translateY(-1px); }
.slot:has(input:checked) {
  background: linear-gradient(160deg, var(--brass-lit), var(--brass));
  color: var(--on-brass); font-weight: 700;
  box-shadow: 0 10px 24px -12px var(--brass-glow);
}
.slot.is-taken {
  cursor: not-allowed; color: var(--ink-4); background: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline-2); text-decoration: line-through;
  text-decoration-color: var(--hairline);
}
.slot.is-taken:hover { transform: none; background: transparent; color: var(--ink-4); }
.slots-msg { padding: 22px 0; color: var(--ink-3); font-family: var(--display); font-style: italic; }

.summary { padding: clamp(22px, 2.6vw, 30px); position: sticky; top: calc(var(--nav-h) + var(--nav-top) * 2 + 14px); }
.summary h3 { font-size: 1.15rem; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hairline-2); font-size: 0.94rem; }
.summary-row:last-of-type { border-bottom: 0; }
.summary-row dt { color: var(--ink-4); }
.summary-row dd { margin: 0; color: var(--ink); text-align: end; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.summary-total .price { font-size: 1.5rem; }
.summary-empty { color: var(--ink-4); font-family: var(--display); font-style: italic; }

.wizard-actions { display: flex; gap: 10px; margin-top: 22px; }
.wizard-actions .btn--brass { flex: 1; }

.done { text-align: center; padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px); }
.done h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin-bottom: 12px; }
.done p { color: var(--ink-3); max-width: 44ch; margin-inline: auto; }
.done .ref {
  display: inline-block; margin-top: 20px; padding: 12px 22px; border-radius: var(--r-pill);
  background: var(--surface-2); box-shadow: var(--glass-rim);
  font-family: var(--display); font-size: 1.4rem; letter-spacing: 0.12em; color: var(--accent-ink);
}
.done .seal {
  width: 62px; height: 62px; margin: 0 auto 22px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--brass-lit), var(--brass-deep) 74%);
  box-shadow: 0 0 34px -6px var(--brass-glow);
  display: grid; place-items: center; color: var(--on-brass);
  animation: seal-in 0.6s var(--ease-spring) both;
}
@keyframes seal-in { from { transform: scale(0.4) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── voucher ──────────────────────────────────────────────────────────── */
.voucher-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.4vw, 52px); align-items: center; }
.voucher-card {
  padding: clamp(26px, 3vw, 40px); border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(200, 154, 78, 0.24), rgba(168, 66, 46, 0.14) 60%, var(--surface-1));
  box-shadow: var(--glass-shadow-lift);
  isolation: isolate;
}
.voucher-card::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--glass-grain); background-size: 160px 160px;
  opacity: var(--glass-grain-opacity); mix-blend-mode: var(--glass-grain-blend);
  pointer-events: none;
}
.voucher-card::after {
  content: ''; position: absolute; inset: 12px; border-radius: calc(var(--r-lg) - 12px);
  border: 1px solid rgba(200, 154, 78, 0.40); pointer-events: none;
}
.voucher-card > * { position: relative; z-index: 1; }
.voucher-card .mark {
  font-family: var(--display); font-style: italic; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  color: var(--ink); letter-spacing: -0.02em;
}
.voucher-lead { margin-top: 14px; color: var(--ink-2); }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--hairline); padding-block: clamp(34px, 4vw, 54px); margin-top: clamp(40px, 5vw, 72px); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 20px 34px; justify-content: space-between; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer a { font-size: var(--t-small); color: var(--ink-3); text-decoration: none; }
.footer a:hover { color: var(--accent-ink); }
.footer small { font-size: var(--t-micro); color: var(--ink-4); }

/* ── legal pages ──────────────────────────────────────────────────────── */
.doc { padding-block: clamp(48px, 6vw, 84px); }
.doc-body { max-width: 72ch; }
.doc-body h2 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); margin: 38px 0 10px; }
.doc-body p { color: var(--ink-3); }
.doc-body dl { margin: 0; }
.doc-back { margin-top: 44px; display: inline-flex; gap: 8px; align-items: center; color: var(--accent-ink); text-decoration: none; font-size: var(--t-small); font-weight: 700; }

/* ── utilities ──────────────────────────────────────────────────────────
   A strict `style-src 'self'` blocks style="" attributes outright, so every
   one-off spacing tweak is a class. Not a workaround — the CSP is the privacy
   promise on the page, and classes are the honest way to keep it. */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 20px; }
.mt-4 { margin-top: 26px; }
.mb-2 { margin-bottom: 14px; }
.m-0 { margin: 0; }
.span-all { grid-column: 1 / -1; }
.title-md { font-size: var(--t-h2); }
.brand-sm { font-size: 1.2rem; }
.italic { font-style: italic; }

/* ── scroll reveal ────────────────────────────────────────────────────── */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.07s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.14s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.21s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.35s; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero-grid, .house-grid, .contact-grid, .book-grid, .voucher-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .summary { position: static; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* The pill keeps its shape; the links drop into a glass sheet hung under it
     and aligned to it, rather than a full-bleed panel — a window-wide sheet
     under a floating pill reads as two unrelated objects. */
  /* Specificity matters here: `.nav .wrap > *` below the pill sets
     position:relative to lift children above the grain layer, and it outranks a
     bare `.nav-links`. Without matching that weight the dropdown silently stays
     in the flex row and overflows the pill. */
  .nav .wrap > .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 22px 18px;
    border-radius: var(--r-lg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: saturate(165%) blur(22px); backdrop-filter: saturate(165%) blur(22px);
    box-shadow: var(--glass-shadow-lift);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
  }
  .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { font-size: 1.02rem; padding: 14px 0; border-bottom: 1px solid var(--hairline-2); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-flex; order: 3; }
  .nav-side { gap: 8px; }
  .nav-side .btn { padding: 11px 16px; font-size: 0.86rem; }
  .trust { grid-template-columns: 1fr; }
  .trust > div + div { border-inline-start: 0; border-top: 1px solid var(--hairline); padding: 16px 0 0; padding-inline-start: 0; }
  .ritual { grid-template-columns: auto 1fr; }
  .ritual-aside { grid-column: 2; justify-items: start; text-align: start; margin-top: 4px; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .hero-caption { left: 20px; bottom: 20px; font-size: 0.95rem; }
}
@media (max-width: 620px) {
  /* Measured, not guessed: at 430px the full-size row is 501px of content in a
     394px pill. The switch shrinks instead of being dropped — it is the control
     that was asked for, and the booking CTA is the one that earns money. */
  :root { --nav-h: 60px; --nav-top: 10px; --theme-thumb: 26px; }
  .nav .wrap { gap: 10px; padding-inline: 14px; }
  .brand { font-size: 1.14rem; }
  .nav-side .btn { padding: 10px 13px; font-size: 0.8rem; }
  .lang { padding: 8px 10px; }
  .theme button svg { width: 14px; height: 14px; }
  .hero-actions .btn { flex: 1; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
/* Below ~460px the pill cannot hold brand + language + theme + CTA + burger.
   The language pill moves into the dropdown rather than squeezing the theme
   switch, which is the control that was asked to be visible. */
@media (max-width: 460px) {
  .nav-side .lang { display: none; }
  .nav-links .lang { display: inline-flex; align-self: flex-start; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ── print: the house rules and the privacy notice get read on paper ──── */
@media print {
  body::before, body::after, .nav, .footer, .hero-figure { display: none; }
  body { background: #fff; color: #111; }
  .doc-body p, .doc-body dd { color: #333; }
  h1, h2, h3 { color: #111; }
}

/* Visible to a screen reader, not to the eye — the theme buttons are icons and
   `title` is not reliably announced. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}