/* ==========================================================================
   Radon Explorer — styles.css
   Design tokens → base → layout → journey (scroll story) → sections → forms
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Depth palette — the ground beneath the house */
  --depth-950: #050708;
  --depth-900: #0A0D0F;
  --depth-800: #11161A;
  --depth-700: #1A2126;
  --depth-600: #2A343B;

  /* Surface palette — warm neutrals, never pure white or pure black.
     Semantic names first; the older token names alias onto them so every
     existing rule follows the theme without being rewritten. */
  --page-bg: #F2EFE8;
  --surface: #FAF8F3;
  --surface-muted: #E8E3DA;
  --surface-sunk: #DFD9CE;
  --text-primary: #171B1E;
  --text-secondary: #596168;
  --text-muted: #7A838A;
  --border: rgba(23, 27, 30, 0.12);

  /* Material accents. These are the artwork's colours, not the page theme's —
     they stay the same in light and dark mode. This block was lost in the theme
     refactor, which left var(--amber) undefined and painted the booking buttons
     transparent. */
  --amber: #E39B3C;
  --amber-lo: #B87B25;
  --amber-hi: #F7D8A4;
  --mineral: #A6AEB3;
  --mineral-hi: #D6DCE0;
  --uranium: #2FA96A;
  --uranium-hi: #63E4A0;
  --assay: #4E82B4;
  --assay-hi: #9CC4E4;

  /* Primary call to action — deliberately identical in both themes */
  --cta-bg: #E99A22;
  --cta-bg-hover: #F2AA34;
  --cta-text: #17130C;
  --cta-border: rgba(255, 190, 85, 0.8);
  --cta-shadow: 0 8px 28px rgba(219, 132, 19, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);

  --paper: var(--page-bg);
  --paper-2: var(--surface-muted);
  --paper-3: var(--surface-sunk);

  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --rule: var(--border);
  --rule-dark: rgba(214, 220, 224, 0.16);

  /* Type */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.42rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.5rem, 1.8rem + 3.4vw, 4.6rem);

  --shell: min(1180px, 92vw);
  --radius: 14px;
  --radius-sm: 9px;
  --header-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}

/* Dark theme. The cinematic story section is dark in both modes; this changes
   the reading sections around it. */
html[data-theme="dark"] {
  --page-bg: #0D1215;
  --surface: #141B1F;
  --surface-muted: #1B2429;
  --surface-sunk: #101619;
  --text-primary: #F3F0E9;
  --text-secondary: #ABB4B8;
  --text-muted: #8A9398;
  --border: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; }
a { color: inherit; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
button { font: inherit; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

:focus-visible {
  outline: 3px solid var(--assay);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible, .journey :focus-visible, .site-footer :focus-visible { outline-color: var(--amber-hi); }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 600;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.shell { width: var(--shell); margin-inline: auto; }
.measure { max-width: 62ch; }

/* Utility labels — the instrument voice of the site */
.eyebrow {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; flex: none; opacity: 0.7;
}
.on-dark .eyebrow { color: var(--mineral); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary {
  background-color: var(--cta-bg);          /* solid colour, never a bare var() */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(0, 0, 0, 0.08) 100%);
  color: var(--cta-text);
  border: 1px solid var(--cta-border);
  box-shadow: var(--cta-shadow);
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}
.btn--primary:hover { background-color: var(--cta-bg-hover); box-shadow: 0 12px 34px rgba(219, 132, 19, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.34); }
.btn--primary:focus-visible { outline: 3px solid var(--cta-text); outline-offset: 3px; }
/* the CTA must not be dimmed by the theme, the sky state, or any ancestor */
html[data-theme="dark"] .btn--primary { background-color: var(--cta-bg); color: var(--cta-text); }
.book-dock, .header-cta { opacity: 1; }
.btn--ghost {
  background: rgba(10, 13, 15, 0.42);
  color: #F3F1EC;
  border-color: rgba(243, 241, 236, 0.32);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: rgba(243, 241, 236, 0.7); background: rgba(10, 13, 15, 0.6); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #000; }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: 0.6rem 1.05rem; min-height: 42px; font-size: 0.9rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(5, 7, 8, 0.72), rgba(5, 7, 8, 0));
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background-image: none;
  background-color: rgba(246, 244, 239, 0.93);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom-color: var(--rule);
}
.header-inner { width: var(--shell); margin-inline: auto; display: flex; align-items: center; gap: 1.4rem; }

.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; }
.brand__logo { display: block; width: 190px; height: auto; max-width: none; }
.brand__logo--dark { display: none; }
.site-header.is-solid .brand__logo--light { display: none; }
.site-header.is-solid .brand__logo--dark { display: block; }
html[data-theme="dark"] .site-header.is-solid .brand__logo--light { display: block; }
html[data-theme="dark"] .site-header.is-solid .brand__logo--dark { display: none; }

.site-nav { display: flex; gap: 1.35rem; }
.site-nav a {
  color: #E7E4DE; text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 0.35rem 0; border-bottom: 1px solid transparent;
}
.is-solid .site-nav a { color: var(--ink-2); }
.site-nav a:hover { border-bottom-color: currentColor; }

.theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, 0.32); background: transparent;
  color: #F3F1EC; cursor: pointer; display: grid; place-items: center;
}
.is-solid .theme-toggle { color: var(--ink); border-color: var(--rule); }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle .icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
html[data-theme="dark"] .theme-toggle .icon-light { display: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(243, 241, 236, 0.35);
  color: #F3F1EC; border-radius: 8px; width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center;
}
.is-solid .theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, 0.32); background: transparent;
  color: #F3F1EC; cursor: pointer; display: grid; place-items: center;
}
.is-solid .theme-toggle { color: var(--ink); border-color: var(--rule); }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle .icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
html[data-theme="dark"] .theme-toggle .icon-light { display: none; }

.is-solid .nav-toggle { color: var(--ink); border-color: var(--rule); }

@media (max-width: 900px) {
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; gap: 0;
    background: rgba(246, 244, 239, 0.985);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 4vw 1.2rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .site-nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav a { color: var(--ink); padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-size: 1.02rem; }
  .theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(243, 241, 236, 0.32); background: transparent;
  color: #F3F1EC; cursor: pointer; display: grid; place-items: center;
}
.is-solid .theme-toggle { color: var(--ink); border-color: var(--rule); }
.theme-toggle:hover { border-color: currentColor; }
.theme-toggle .icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
html[data-theme="dark"] .theme-toggle .icon-light { display: none; }

.nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
}

/* ---------- Sticky booking control ---------- */
.book-dock {
  position: fixed; z-index: 85;
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 0.6rem; align-items: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.book-dock.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.book-dock.is-suppressed { opacity: 0; transform: translateY(14px); pointer-events: none; }
.book-dock .btn { box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6); }
@media (max-width: 700px) {
  .book-dock {
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
  }
  .book-dock .btn { width: 100%; }
}

/* ==========================================================================
   THE JOURNEY — scroll-driven cross-section
   ========================================================================== */
.journey { position: relative; background: var(--depth-950); }

.stage {
  background-color: transparent;   /* nothing to fill: the camera reaches the edges */
  position: sticky; top: 0;
  /* Cover the LARGEST viewport: with 100svh the artwork stops short of the
     bottom once a mobile URL bar retracts, exposing the layer beneath it. */
  height: 100vh; height: 100lvh;
  /* `hidden` creates a programmatically scrollable box; hash navigation was
     silently setting stage.scrollTop and lifting the artwork off the bottom.
     `clip` keeps the camera contained without creating that inner scroller. */
  overflow: hidden;
  overflow: clip;
  background: radial-gradient(120% 80% at 50% 8%, #2A3138 0%, #10151A 45%, #050708 100%);
}

/* Camera box is sized in JS to the image "cover" rectangle */
/* Falls back to a full-bleed static frame if JS never runs */
.camera {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%;
  transform: none;
}
.layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.layer img { width: 100%; height: 100%; object-fit: cover; }

/* A single uncut master avoids duplicated path lanterns and raster seams. */
.layer--house { clip-path: none; }

/* Sky plate: a real animated layer painted behind the cut-out house.
   It reaches well above the artwork and stops at the tree line. */
.sky-plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  display: block;
}

/* The camera is clamped to the artwork's own bounds (see story.js), so no
   filler layer is needed below the image and no seam can appear. */

/* Uranium and radium glows are no longer CSS bands. They are drawn per deposit
   in image space by story.js (drawMinerals), so there is no straight horizontal
   edge and the rock texture underneath is preserved. */

/* Lighting + material overlays (all inside the camera) */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx--vignette {
  background: radial-gradient(78% 60% at 50% 42%, rgba(0, 0, 0, 0) 40%, rgba(3, 5, 6, 0.55) 78%, rgba(3, 5, 6, 0.9) 100%);
  /* release the deposit band so the mineral glow is never vignetted away */
  mask-image: linear-gradient(180deg, black 84%, rgba(0,0,0,0.35) 91%, transparent 98%);
  -webkit-mask-image: linear-gradient(180deg, black 84%, rgba(0,0,0,0.35) 91%, transparent 98%);
  opacity: 0.35;
}
.fx--underground {
  background: linear-gradient(180deg,
    rgba(4, 6, 8, 0) 58%, rgba(4, 6, 8, 0.5) 74%, rgba(4, 6, 8, 0.6) 86%,
    rgba(4, 6, 8, 0.28) 93%, rgba(4, 6, 8, 0.1) 100%);
  opacity: 0;
}
/* Glow that follows the deposits instead of a rectangle:
   a blurred, screen-blended duplicate of the deposit band itself. */
/* A soft lift, clipped to the same band so it can never wash across the soil */
.fx--shafts {
  background: repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 46px);
  mask-image: linear-gradient(180deg, transparent 62%, black 78%, transparent 99%);
  -webkit-mask-image: linear-gradient(180deg, transparent 62%, black 78%, transparent 99%);
  opacity: 0;
}
.fx--interior {
  background:
    radial-gradient(4.5% 9% at 43% 34%, rgba(250, 219, 165, 0.78), transparent 72%),
    radial-gradient(4.5% 9% at 57% 32%, rgba(250, 219, 165, 0.72), transparent 72%),
    radial-gradient(4% 8% at 44% 18%, rgba(250, 219, 165, 0.66), transparent 72%),
    radial-gradient(4% 8% at 57% 17%, rgba(250, 219, 165, 0.62), transparent 72%),
    radial-gradient(3.5% 7% at 41% 52%, rgba(250, 219, 165, 0.55), transparent 72%),
    radial-gradient(3% 6% at 53% 50%, rgba(250, 219, 165, 0.45), transparent 72%);
  mix-blend-mode: screen; opacity: 0;
}
/* Exterior + interior lighting responses to the sky */
.fx--daylight {
  background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.12) 34%, rgba(255,255,255,0) 58%);
  mix-blend-mode: soft-light; opacity: 0;
}
.fx--moonlight {
  background:
    radial-gradient(46% 34% at 78% 6%, rgba(188, 208, 240, 0.5), rgba(188,208,240,0) 70%),
    linear-gradient(200deg, rgba(158, 186, 226, 0.22) 0%, rgba(158,186,226,0) 46%);
  mix-blend-mode: screen; opacity: 0;
}
.fx--night {
  background: linear-gradient(180deg, rgba(18, 30, 58, 0.96) 0%, rgba(20, 32, 56, 0.88) 46%, rgba(14, 22, 40, 0.72) 100%);
  mix-blend-mode: multiply; opacity: 0;
}
.fx--indoor-haze {
  /* masked to the rooms: a soft haze above the interiors, never a fog bank */
  background: radial-gradient(16% 34% at 49.5% 44%, rgba(198, 214, 222, 0.34) 0%, rgba(198, 214, 222, 0.16) 55%, rgba(198, 214, 222, 0) 100%);
  mask-image: linear-gradient(180deg, transparent 8%, black 22%, black 62%, transparent 68%);
  -webkit-mask-image: linear-gradient(180deg, transparent 8%, black 22%, black 62%, transparent 68%);
  opacity: 0;
}

/* Entry-path SVG (inside the camera, so it scales cleanly) */
.entry-paths { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; vector-effect: non-scaling-stroke; }
/* Programmatic stage glides hide straight annotations until the camera parks. */
html[data-stage-scrolling="true"] .entry-paths,
html[data-stage-scrolling="true"] .fx--shafts { opacity: 0 !important; }
/* Deliberately restrained: these annotate the entry routes, they do not compete
   with the artwork. Thin, semi-transparent, no heavy bloom. */
/* Legible over both the pale slab and the dark soil, with a soft glow rather
   than a hard neon line. A slow travelling dash draws the eye along the route. */
.entry-paths path {
  fill: none; stroke: rgba(145, 220, 255, 0.96); stroke-width: 4.2; stroke-linecap: round;
  stroke-dasharray: 300; stroke-dashoffset: 300;
  filter: drop-shadow(0 0 5px rgba(135, 215, 255, 0.95)) drop-shadow(0 0 13px rgba(80, 170, 230, 0.72));
}
.entry-paths circle {
  fill: rgba(205, 242, 255, 1);
  stroke: rgba(95, 190, 240, 0.85); stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(175, 235, 255, 1)) drop-shadow(0 0 16px rgba(85, 180, 235, 0.85));
  opacity: 0.84;
}
html[data-motion="reduced"] .entry-paths circle { animation: none; opacity: 0.82; }

/* Resolution-independent grain, in screen space so it never scales.
   Fades in as the camera zooms, masking softness in the source artwork. */
.fx--grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Localized darkening behind the active copy only — never the whole frame */
.fx--read-dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  transition: background-position 0.4s var(--ease);
  background: radial-gradient(ellipse 55% 90% at 22% 60%, rgba(3, 6, 9, 0.9) 0%, rgba(3,6,9,0.45) 45%, rgba(3,6,9,0) 76%);
}
.fx--read-dim[data-align="right"] { background: radial-gradient(ellipse 55% 90% at 78% 60%, rgba(3,6,9,0.9) 0%, rgba(3,6,9,0.45) 45%, rgba(3,6,9,0) 76%); }
.fx--read-dim[data-align="center"] { background: radial-gradient(ellipse 62% 80% at 50% 52%, rgba(3,6,9,0.86) 0%, rgba(3,6,9,0.42) 48%, rgba(3,6,9,0) 78%); }

/* The artwork camera establishes z-index:1. The effect canvas needs its own
   level or browsers paint it underneath the camera even though it appears
   later in the markup. */
.particles {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; pointer-events: none;
  mix-blend-mode: normal;
}

/* Readability scrim behind scene copy */
.stage-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 7, 8, 0.3) 0%, rgba(5, 7, 8, 0.04) 22%, rgba(5, 7, 8, 0) 52%, rgba(5, 7, 8, 0.24) 84%, rgba(5, 7, 8, 0.5) 100%);
}

/* ---------- Story copy ----------
   The copy lives inside the sticky stage and is switched by opacity, so it is
   pinned by the very element that pins the artwork. Previously it was a second,
   nested sticky panel, which is why the text could drift out of step with the
   camera in some browsers. One sticky element now, one clock. */
.stage__copy {
  position: absolute; inset: 0; z-index: 4;
  display: grid;
  /* One row, the height of the stage. Without this the row grows to the tallest
     card and align-self centres against that instead of against the viewport,
     which pushed the Stage 6 panel off the bottom on short screens. */
  grid-template-rows: minmax(0, 1fr);
  padding: calc(var(--header-h) + 2rem) calc((100% - var(--shell)) / 2) clamp(3rem, 12vh, 8rem);
  pointer-events: none;
}
.scene-card {
  grid-area: 1 / 1;                 /* every card shares one cell and cross-fades */
  align-self: end; justify-self: start;
  position: relative;
  isolation: isolate;
  max-width: 32rem;
  color: #F1EFEA;
  pointer-events: auto;
  will-change: opacity, transform;
}
.scene-card[data-align="right"] { justify-self: end; }
.scene-card[data-align="center"] { justify-self: center; text-align: center; align-self: center; }
.scene-card[data-align="center"] .eyebrow { justify-content: center; }
.scene-card[data-align="center"] .note { margin-inline: auto; }
.scene-card--hero { align-self: center; max-width: 38rem; }

/* Stage 6 keeps clear of the house so the interior, the lighting and the gas
   stay visible. Right-hand column on anything wide enough; on a phone it moves
   into the sky above the artwork instead of covering it. */
.scene-card--variation {
  justify-self: end; align-self: center;
  width: min(26vw, 24rem); max-width: 24rem;
  text-align: left;
  margin-right: clamp(6rem, 12vw, 15rem);
}
.scene-card--variation[data-align="right"] .eyebrow { justify-content: flex-start; }
@media (max-width: 1100px) {
  .scene-card--variation { width: min(34vw, 22rem); font-size: 0.94em; margin-right: clamp(1rem, 7vw, 5rem); }
}
@media (max-width: 760px) {
  /* above the artwork, never over it */
  .scene-card--variation { align-self: start; justify-self: stretch; width: auto; margin: 0; }
}

/* Local scrim: a soft gradient that travels with the copy, not a box */
.scene-card::before {
  content: "";
  position: absolute; inset: -2.6rem -1.6rem;
  z-index: -1; border-radius: 2.5rem;
  background: radial-gradient(ellipse 96% 88% at 32% 50%,
    rgba(5, 10, 14, 0.92) 0%, rgba(5, 10, 14, 0.82) 38%,
    rgba(5, 10, 14, 0.52) 64%, rgba(5, 10, 14, 0) 90%);
}
.scene-card[data-align="right"]::before { background: radial-gradient(ellipse 96% 88% at 68% 50%, rgba(5,10,14,0.92) 0%, rgba(5,10,14,0.82) 38%, rgba(5,10,14,0.52) 64%, rgba(5,10,14,0) 90%); }
.scene-card[data-align="center"]::before { background: radial-gradient(ellipse 98% 90% at 50% 50%, rgba(5,10,14,0.9) 0%, rgba(5,10,14,0.78) 40%, rgba(5,10,14,0.48) 66%, rgba(5,10,14,0) 90%); }
.scene-card h1, .scene-card h2 { color: #FBFAF7; text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 8px 24px rgba(0,0,0,0.45); }
.scene-card p { color: #D9D5CD; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem); text-shadow: 0 1px 4px rgba(0,0,0,0.7); max-width: 58ch; }

/* Scroll length only — these carry no content */
/* Spacers overlay the sticky stage. Without this they intercept every click
   meant for the story controls and the hero buttons underneath. */
.scene-track { position: relative; margin-top: -100vh; margin-top: -100lvh; pointer-events: none; }
.scene-spacer { height: calc(var(--scene-len, 170) * 1svh); }

/* Copy relocated into normal flow when motion is reduced */
.story-flow { display: none; }
html[data-motion="reduced"] .story-flow {
  display: block; background: var(--depth-900);
  padding: clamp(3rem, 8vh, 5rem) calc((100% - var(--shell)) / 2);
}
html[data-motion="reduced"] .story-flow .scene-card {
  display: block; position: static; max-width: 62ch;
  margin: 0 0 3rem; opacity: 1 !important; visibility: visible !important;
  transform: none !important; text-align: left;
}
html[data-motion="reduced"] .story-flow .scene-card::before { display: none; }
html[data-motion="reduced"] .scene-track { display: none; }
html[data-motion="reduced"] .scroll-hint { display: none; }

/* ---------- Signature element: the depth gauge ---------- */
.gauge {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  z-index: 80; width: 132px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.gauge.is-active { opacity: 1; pointer-events: auto; }
.gauge__rail {
  position: relative; height: 46svh; width: 1px;
  background: linear-gradient(180deg, rgba(214, 220, 224, 0.08), rgba(214, 220, 224, 0.4) 22%, rgba(99, 228, 160, 0.55));
  margin-left: 14px;
}
.gauge__ticks { list-style: none; margin: 0; padding: 0; }
.gauge__tick {
  position: absolute; left: -14px; right: -104px;
  display: flex; align-items: center; gap: 6px;
  min-height: 44px;                 /* full-row hit area, unchanged visually */
  margin-top: -22px; padding: 0 0 0 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--data); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-align: left;
  color: rgba(214, 220, 224, 0.5);
  border-radius: 6px;
  transition: color 0.2s var(--ease);
}
.gauge__tick::before {
  content: ""; flex: none; width: 9px; height: 1px;
  background: rgba(214, 220, 224, 0.45);
  transition: width 0.2s var(--ease), background-color 0.2s var(--ease);
}
.gauge__tick:hover { color: #F2F0EA; }
.gauge__tick:hover::before { width: 16px; background: var(--amber-hi); }
.gauge__tick:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 2px; }
.gauge__tick[aria-current="step"] { color: #F2F0EA; }
.gauge__tick[aria-current="step"]::before { width: 16px; background: var(--amber); }
.gauge__head {
  /* centred on both axes: JS supplies `top` as a percentage of the rail, and the
     translate takes care of the dot's own width and height */
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 4px rgba(227, 155, 60, 0.2), 0 0 14px rgba(227, 155, 60, 0.9);
  transition: top 0.25s var(--ease);
  pointer-events: none;
}
.gauge__readout { margin: 0 0 0.75rem 14px;
  font-family: var(--data); font-size: 0.62rem; letter-spacing: 0.14em;
  color: rgba(214, 220, 224, 0.75); text-transform: uppercase; margin-bottom: 0.75rem;
}
.gauge__readout b { display: block; color: #F2F0EA; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.06em; }
@media (max-width: 900px) { .gauge { display: none; } }

/* Story controls — their own group, opposite corner from the booking dock so
   the two can never collide. Safe-area aware on both axes. */
.story-controls {
  position: absolute; z-index: 8;
  left: calc(22px + env(safe-area-inset-left, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  pointer-events: auto;
}
.chip {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(10, 13, 15, 0.55); color: #E9E6E0; border: 1px solid rgba(233, 230, 224, 0.28);
  border-radius: 999px; padding: 0.55rem 0.95rem; cursor: pointer; text-decoration: none;
  backdrop-filter: blur(6px); min-height: 40px; display: inline-flex; align-items: center;
}
.chip:hover { border-color: rgba(233, 230, 224, 0.7); }
.chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 700px) {
  /* one row above the booking dock, never on top of it */
  .story-controls {
    left: calc(12px + env(safe-area-inset-left, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
  .chip { font-size: 0.62rem; padding: 0.5rem 0.75rem; }
}

@media (max-width: 760px) {
  /* Busy artwork behind small text: use a restrained panel pinned to the bottom */
  .stage__copy { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 9.5rem); }
  .scene-card, .scene-card--hero, .scene-card[data-align="right"], .scene-card[data-align="center"] {
    align-self: end; justify-self: stretch;
    max-width: none; margin: 0; text-align: left;
    background: rgba(8, 14, 18, 0.68);
    backdrop-filter: blur(12px) saturate(110%);
    -webkit-backdrop-filter: blur(12px) saturate(110%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 1.15rem 1.15rem 1.25rem;
    box-shadow: 0 18px 55px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .scene-card::before { display: none; }
  .scene--center .scene-card .eyebrow { justify-content: flex-start; }
  .scene-card .note { max-width: none; }
}

/* Very narrow phones need a tighter header and hero rhythm. Without this the
   190px wordmark competes with both controls, and the tall hero card can rise
   behind the fixed header. */
@media (max-width: 360px) {
  .header-inner { gap: 0.5rem; }
  .brand__logo { width: 132px; }
  .stage__copy {
    padding-top: calc(var(--header-h) + 0.5rem);
    padding-inline: 0.5rem;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8rem);
  }
  .scene-card--hero { align-self: center; padding: 0.9rem; }
  .scene-card--hero .eyebrow {
    margin-bottom: 0.6rem;
    gap: 0.45rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
  .scene-card--hero .eyebrow::before { width: 18px; }
  .scene-card--hero h1 { font-size: 2.1rem; margin-bottom: 0.35em; }
  .scene-card--hero p { font-size: 0.92rem; line-height: 1.45; margin-bottom: 0.8rem; }
  .hero-actions { display: grid; gap: 0.45rem; }
  .scene-card--hero .btn {
    width: 100%; min-height: 44px;
    padding: 0.65rem 0.75rem;
    font-size: 0.84rem;
  }
}

/* ==========================================================================
   Standard sections
   ========================================================================== */
.section { padding: clamp(4rem, 10vh, 7.5rem) 0; scroll-margin-top: var(--header-h); }
.section--paper { background: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--dark { background: var(--depth-900); color: #E9E6E0; }
.section--dark h2, .section--dark h3 { color: #FBFAF7; }
.section--dark p { color: #C9C5BD; }
.section__head { max-width: 46rem; margin-bottom: 3rem; }
.section__head p { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; }
.section--dark .section__head p { color: #C3BFB7; }

.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }
.card__tag {
  font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--assay); margin-bottom: 0.9rem; display: block;
}
.card--dark { background: var(--depth-800); border-color: var(--rule-dark); }
html[data-theme="dark"] .card { background: var(--surface); }
html[data-theme="dark"] .section--paper2 { background: var(--surface-sunk); }
html[data-theme="dark"] .site-header.is-solid { background-color: rgba(20, 27, 31, 0.94); }
html[data-theme="dark"] .sheet, html[data-theme="dark"] .sheet__head { background: var(--page-bg); }
html[data-theme="dark"] .error-summary { background: #2A1D12; border-color: #8A5A2E; }
html[data-theme="dark"] .error-summary a, html[data-theme="dark"] .error-text { color: #F0B27A; }
html[data-theme="dark"] .form-status[data-state="success"] { background: #16241B; border-color: #3E6B4E; }
html[data-theme="dark"] .form-status[data-state="error"] { background: #2A1D12; border-color: #8A5A2E; }
html[data-theme="dark"] .form-status[data-state="pending"] { background: #16202A; border-color: #35546F; }
html[data-theme="dark"] .field[data-invalid="true"] input, html[data-theme="dark"] .field[data-invalid="true"] select, html[data-theme="dark"] .field[data-invalid="true"] textarea { background: #241A12; }
html[data-theme="dark"] .placeholder { color: var(--assay-hi); background: rgba(156, 196, 228, 0.12); border-color: rgba(156, 196, 228, 0.45); }
html[data-theme="dark"] .scale__mark span { background: rgba(20, 27, 31, 0.9); color: #EDEAE3; }
html[data-theme="dark"] .scale__grip { background: #F3F0E9; border-color: #141B1F; }
html[data-theme="dark"] .scale__needle { background: #F3F0E9; box-shadow: 0 0 0 2px rgba(13,18,21,0.9); }
html[data-theme="dark"] .scale__bubble { background: #F3F0E9; color: #141B1F; }
html[data-theme="dark"] .btn--dark { background: var(--surface-muted); color: var(--text-primary); }
html[data-theme="dark"] .btn--dark:hover { background: #222D33; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Manual explore ---------- */
.explore { display: grid; gap: 1.6rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .explore { grid-template-columns: 1fr; } }
.explore__figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--depth-900); border: 1px solid var(--rule-dark);
  aspect-ratio: 3072 / 1024;
}
.explore__figure img { width: 100%; height: 100%; object-fit: contain; }
.hotspot {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(10, 13, 15, 0.5); backdrop-filter: blur(3px);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  font-family: var(--data); font-size: 0.68rem;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.hotspot::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  animation: pulse 3.4s var(--ease) infinite;
}
@keyframes pulse { 0% { transform: scale(0.85); opacity: 0.9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
.hotspot:hover, .hotspot[aria-pressed="true"] { background: var(--amber); color: #21150A; transform: scale(1.1); border-color: var(--amber-hi); }
.explore__panel { background: var(--depth-800); border: 1px solid var(--rule-dark); border-radius: var(--radius); padding: 1.7rem; min-height: 14rem; }
.explore__panel h3 { color: #FBFAF7; }
.explore__panel p { color: #C9C5BD; }

/* ---------- Level scale ---------- */
.levels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 2.4rem; align-items: start; }
@media (max-width: 900px) { .levels { grid-template-columns: 1fr; } }

.scale {
  position: relative; height: 84px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, #3E6E8F 0%, #4E82B4 18%, #A6AEB3 36%, #D6B87A 55%, #C98B3E 75%, #A9622B 100%);
  border: 1px solid var(--rule);
}
.scale__marks { position: absolute; inset: 0; }
.scale__mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.8); }
.scale__mark span {
  position: absolute; top: 6px; left: 7px; white-space: nowrap;
  font-family: var(--data); font-size: 0.64rem; letter-spacing: 0.06em; color: #10151A;
  background: rgba(255, 255, 255, 0.86); padding: 2px 6px; border-radius: 4px;
}
.scale[data-interactive] { cursor: ew-resize; touch-action: none; }
.scale[data-interactive]:hover .scale__grip { transform: translateX(-50%) scale(1.12); }
.scale__needle {
  position: absolute; top: -8px; bottom: -8px; width: 3px;
  background: var(--ink); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  transition: left 0.12s var(--ease);
}
.scale.is-dragging .scale__needle { transition: none; }
/* A visible grip: the control has to look draggable, not decorative */
.scale__grip {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); border: 2px solid #FFFDF9;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.16s var(--ease);
}
.scale__grip::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 9px, rgba(255,255,255,0.85) 9px 10px, transparent 10px 12px,
      rgba(255,255,255,0.85) 12px 13px, transparent 13px 15px, rgba(255,255,255,0.85) 15px 16px, transparent 16px);
}
.scale__bubble {
  position: absolute; left: 50%; top: -30px; transform: translateX(-50%);
  font-family: var(--data); font-size: 0.74rem; font-weight: 500;
  background: var(--ink); color: var(--paper);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.scale__hint {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: 0.9rem 0 0; font-size: 0.86rem; color: var(--ink-2);
}
.scale__hint svg { flex: none; margin-top: 0.2rem; color: var(--assay); }
/* The native number spinner sits exactly where the unit goes, so it is removed
   and the unit is a separate element with reserved space behind it. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.unit-input { position: relative; }
.unit-input input[type="number"] {
  padding-right: 4.4rem;              /* room for the unit at any value width */
  font-variant-numeric: tabular-nums;
}
.unit-input span {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  font-family: var(--data); font-size: 0.8rem; color: var(--ink-3);
  pointer-events: none; user-select: none;
}

.readout {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.5rem; margin-top: 1.5rem;
}
.readout__value { font-family: var(--data); font-size: 2.4rem; letter-spacing: -0.02em; line-height: 1; }
.readout__value small { font-size: 0.9rem; letter-spacing: 0.08em; color: var(--ink-3); margin-left: 0.35rem; }
.readout__band { font-family: var(--data); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--assay); margin: 0.7rem 0 0.6rem; }
.slider-row { display: flex; align-items: flex-end; gap: 1.2rem; margin-top: 1rem; flex-wrap: wrap; }
input[type="range"] { width: 100%; accent-color: var(--assay); height: 44px; cursor: ew-resize; }

.band-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.band-list li {
  display: grid; grid-template-columns: 6.2rem 1fr; gap: 1rem; align-items: baseline;
  padding: 0.9rem 0; border-top: 1px solid var(--rule);
}
.band-list b { font-family: var(--data); font-size: 0.86rem; letter-spacing: 0.02em; }
.band-list p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }

/* ---------- Partner card ---------- */
.partner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.8rem; align-items: center;
  border: 1px solid var(--rule); border-left: 3px solid var(--assay);
  border-radius: var(--radius); background: var(--surface); padding: 2rem;
}
@media (max-width: 760px) { .partner { grid-template-columns: 1fr; } }
.partner p:last-of-type { margin-bottom: 0; }
.ext-note { font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-3); }

/* ---------- Process ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.4rem; padding: 1.8rem 0; border-top: 1px solid var(--rule-dark); }
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--data); font-size: 0.9rem; color: var(--amber); letter-spacing: 0.08em; padding-top: 0.3rem;
}
.steps h3 { margin-bottom: 0.3rem; }

/* ---------- FAQ ---------- */
.faq details {
  border-top: 1px solid var(--rule); padding: 0.3rem 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--display); font-size: var(--step-1); line-height: 1.25; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--data); font-size: 1.3rem; color: var(--ink-3);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 1.3rem; max-width: 60ch; color: var(--ink-2); }

/* ---------- Booking ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 120; background: rgba(5, 7, 8, 0.66);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease);
}
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 121; right: 0; top: 0; bottom: 0; width: min(560px, 100%);
  background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform 0.32s var(--ease);
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.5);
}
.sheet.is-open { transform: none; }
@media (max-width: 700px) {
  .sheet { top: auto; left: 0; right: 0; height: 92svh; width: 100%; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .sheet.is-open { transform: none; }
}
.sheet__head {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem 1.7rem 1rem; border-bottom: 1px solid var(--rule);
}
.sheet__head h2 { font-size: var(--step-2); margin: 0; }
.sheet__head p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.sheet__close {
  margin-left: auto; flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; cursor: pointer; font-size: 1.1rem;
}
.sheet__body { padding: 1.6rem 1.7rem 3rem; }

/* Inline booking form stays readable; inside the sheet it fills the panel */
#formHost { max-width: 46rem; margin-inline: auto; }
.form-grid { display: grid; gap: 1.05rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.86rem; font-weight: 600; }
.field .hint { font-size: 0.76rem; color: var(--ink-3); }
.req { color: #A9622B; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  font: inherit; font-size: 1rem; /* ≥16px prevents iOS zoom */
  padding: 0.75rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); width: 100%; min-height: 48px;
}
textarea { min-height: 108px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--assay); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-color: #A9622B; background: #FFF6EF; }
.error-text { font-size: 0.8rem; color: #8C4A1C; font-weight: 500; }
.contact-preference { border: 0; margin: 0; padding: 0; }
.contact-preference legend { font-size: 0.86rem; font-weight: 600; padding: 0; margin-bottom: 0.6rem; }
.pref-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.pref {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--surface); padding: 0.8rem 0.9rem; cursor: pointer;
  min-height: 56px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pref:hover { border-color: var(--assay); }
.pref input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--assay); }
.pref strong { display: block; font-size: 0.92rem; }
.pref small { display: block; color: var(--ink-3); font-size: 0.78rem; line-height: 1.4; margin-top: 2px; }
.pref:has(input:checked) { border-color: var(--assay); box-shadow: inset 0 0 0 1px var(--assay); }
.pref:has(input:focus-visible) { outline: 3px solid var(--assay); outline-offset: 2px; }
.pref-panel[hidden] { display: none; }
[data-contact-for][hidden] { display: none; }
.steps--after li { border-top-color: var(--rule-dark); }

.checkbox { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-size: 0.88rem; }
.checkbox input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--assay); }
.error-summary {
  border: 1px solid #C2703A; background: #FFF3E9; border-radius: var(--radius-sm);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.error-summary h3 { font-family: var(--body); font-size: 1rem; font-weight: 700; margin-bottom: 0.4rem; }
.error-summary ul { margin: 0; padding-left: 1.1rem; }
.error-summary a { color: #8C4A1C; }
.form-status { margin-top: 1.2rem; border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; font-size: 0.95rem; }
.form-status[data-state="success"] { background: #EAF3EC; border: 1px solid #7FB295; }
.form-status[data-state="error"] { background: #FFF3E9; border: 1px solid #C2703A; }
.form-status[data-state="pending"] { background: #EEF3F8; border: 1px solid #9CC4E4; }
.form-status:empty { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.privacy-line { font-size: 0.8rem; color: var(--ink-3); margin-top: 1rem; }

/* ---------- Contact / footer ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.contact-list dt, .contact-list b { font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); display: block; }
.contact-list a { font-size: var(--step-1); text-decoration: none; border-bottom: 1px solid var(--rule); }
.contact-list a:hover { border-bottom-color: currentColor; }

.placeholder {
  font-family: var(--data); font-size: 0.82rem;
  background: rgba(78, 130, 180, 0.12); border: 1px dashed rgba(78, 130, 180, 0.6);
  padding: 0.1em 0.45em; border-radius: 5px; color: #2E5A80; white-space: nowrap;
}
.section--dark .placeholder { color: var(--assay-hi); background: rgba(156, 196, 228, 0.12); border-color: rgba(156, 196, 228, 0.5); }

.refs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.refs li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; font-size: 0.92rem; }
.refs a { color: var(--assay-hi); }
.section--paper .refs a { color: #2E5A80; }

.site-footer { background: var(--depth-950); color: #A7ADB2; padding: 4rem 0 2.5rem; font-size: 0.92rem; }
.site-footer a { color: #D6DCE0; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.footer-grid h3 { font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6E7A82; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; font-size: 0.82rem; color: #6E7A82; }
.disclaimer { font-size: 0.85rem; color: #8B9298; max-width: 68ch; margin-top: 1.6rem; }

/* ---------- Legal pages ---------- */
.legal { padding-top: calc(var(--header-h) + 4rem); }
.legal h2 { font-size: var(--step-2); margin-top: 2.4rem; }
.legal p, .legal li { max-width: 68ch; color: var(--ink-2); }

/* Optional gentle proximity snap — enabled from config.js (scene.snap) */
html[data-snap="on"] { scroll-snap-type: y proximity; }
html[data-snap="on"] .scene-spacer { scroll-snap-align: start; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) { scroll-behavior: auto; }
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html:not([data-motion="full"]) .scroll-hint::after { animation: none; }
  html:not([data-motion="full"]) .hotspot::after { display: none; }
  html:not([data-motion="full"]) .reveal { opacity: 1; transform: none; }
}
/* and the reverse: an explicit Motion:off must stop things even without the OS flag */
html[data-motion="reduced"] .hotspot::after { display: none; }
html[data-motion="reduced"] .scroll-hint::after { animation: none; }
html[data-motion="reduced"] { scroll-behavior: auto; }
/* Keep one settled gas/mineral frame for reduced motion; story.js stops all
   movement while retaining the explanatory overlays. */
html[data-motion="reduced"] .particles { display: block; }
html[data-motion="reduced"] .fx--grain, html[data-motion="reduced"] .fx--read-dim { opacity: 0 !important; }
/* Static directional haze replaces the moving vapour */
html[data-motion="reduced"] .static-haze { display: none; }
.static-haze {
  display: none;
}
html[data-motion="reduced"] .scene-card { opacity: 1 !important; transform: none !important; }
html[data-motion="reduced"] .entry-paths path { stroke-dashoffset: 0; }

/* ---------- Stage 6 panel on small screens ----------
   Appended last so it wins on source order over the generic mobile card rules. */
@media (max-width: 760px) {
  /* The artwork is bottom-anchored on a phone, so the copy sits in the sky above
     it: the whole house and the gas animation stay unobstructed. */
  .scene-card--variation[data-align="right"] {
    align-self: start; justify-self: stretch;
    width: auto; margin: calc(var(--header-h) + 0.5rem) 0 0;
    max-height: 44svh; overflow-y: auto;
    font-size: 0.94em;
  }
  .scene-card--variation .note { display: none; }
}

/* Short landscape phones: a narrow right-hand column that scrolls rather than
   overflowing, leaving about two thirds of the width for the house. */
@media (max-height: 560px) and (orientation: landscape) {
  /* reclaim the vertical padding: there is very little height to work with */
  .stage__copy { padding-top: calc(var(--header-h) + 0.4rem); padding-bottom: 3.5rem; }
  .scene-card--hero {
    align-self: start;
    max-width: min(72vw, 36rem);
  }
  .scene-card--hero .eyebrow { display: none; }
  .scene-card--hero h1 { font-size: 2.5rem; margin-bottom: 0.28em; }
  .scene-card--hero p { font-size: 0.9rem; line-height: 1.4; margin-bottom: 0.65rem; }
  .scene-card--hero .hero-actions { display: flex; flex-wrap: nowrap; gap: 0.5rem; }
  .scene-card--hero .btn {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .scene-card--variation[data-align="right"] {
    align-self: center; justify-self: end;
    width: min(34vw, 21rem); margin: 0;
    max-height: calc(100svh - var(--header-h) - 4.2rem); overflow-y: auto;
    font-size: 0.85em;
  }
  .scene-card--variation h2 { font-size: 1.45rem; }
  .scene-card--variation .note { display: none; }
}