/* ==========================================================================
   Small World — design system
   ========================================================================== */

:root {
  /* Palette — drawn from the product photography, not the app */
  --ivory: #FBF7F0;
  --linen: #F3ECE1;
  --oat: #E7DCCB;
  --sand: #D8C8B1;
  --walnut: #7A5539;
  --walnut-deep: #4A3324;
  --umber: #2E211A;
  --ink: #2B221C;
  --ink-soft: #5E5248;
  --ink-mute: #70665C; /* AA on ivory and linen */
  --blush: #D8A7A0;
  --blush-soft: #F1DDD7;
  --sage: #9FAE93;
  --gold: #BF9A5F;

  --line: rgba(74, 51, 36, 0.14);
  --line-strong: rgba(74, 51, 36, 0.28);

  /* Type */
  /* Bellefair (one weight, 400) for headings; Frank Ruhl Libre stays behind it as the
     fallback for the one Hebrew sign Bellefair lacks (gershayim ״) */
  --font-display: "Bellefair", "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
  --font-body: "Assistant", "Segoe UI", "Arial Hebrew", Arial, sans-serif;
  --font-latin: "Playfair Display", "Didot", Georgia, serif;
  /* Small decorative labels only (world names) — never body text, buttons or prices */
  --font-accent: "Amatic SC", "Assistant", "Segoe UI", Arial, sans-serif;

  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --step-4: clamp(2.4rem, 1.7rem + 3vw, 4.4rem);

  /* Space & shape */
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(64px, 7.5vw, 112px);
  --section-y-tight: clamp(28px, 3.5vw, 56px); /* between same-colour neighbours */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --header-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
  --dur: 0.9s;

  --shadow-soft: 0 1px 2px rgba(46, 33, 26, 0.04), 0 18px 40px -18px rgba(46, 33, 26, 0.22);
  --shadow-deep: 0 2px 6px rgba(46, 33, 26, 0.08), 0 40px 80px -30px rgba(46, 33, 26, 0.45);

  /* World theme tokens — neutral brand defaults. Each themed world overrides
     these on its [data-world] containers; shared brand styles never change.
     See WORLDS.md. */
  --world-halo: var(--linen);                    /* glow behind showcase phone */
  --world-screen-bg: var(--ivory);               /* letterbox behind app screens */
  --world-film-glow: rgba(191, 154, 95, 0.18);   /* warm light in film section */
  --world-film-glow-2: rgba(216, 200, 177, 0.10);

  color-scheme: light;
}

/* ==========================================================================
   World themes — one block per world, accents only
   ========================================================================== */

[data-world="princess"] {
  --world-halo: var(--blush-soft);
  --world-screen-bg: #F7F1F6;
  --world-film-glow: rgba(191, 154, 95, 0.18);
  --world-film-glow-2: rgba(216, 167, 160, 0.12);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300; /* Assistant Light for running text */
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* format wrappers only — layout stays on the <img> */

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.15; color: var(--ink); }
/* Bellefair has a single weight: never let the browser fake a bolder one. Its
   verticals are dense, so headings get slight positive tracking and open leading
   (lighter to the eye without touching the letterforms) */
h1, h2, h3, .accordion__trigger, .details dt {
  font-synthesis-weight: none;
  letter-spacing: 0.02em;
}
.price { font-synthesis-weight: none; }
/* Light (300) is too faint below ~16px: small print, navigation and controls stay at 400 */
.skip-link,
.site-nav__list a,
.nav-toggle__label,
.collection__note,
.screens__note,
.film__note,
.product-option__desc,
.options__note,
.soon__handle,
.site-footer__copy,
.legal__draft {
  font-weight: 400;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--blush-soft); color: var(--umber); }

:focus-visible {
  outline: 2px solid var(--walnut);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--deep :focus-visible,
.site-footer :focus-visible { outline-color: var(--ivory); }

[lang="en"] { font-family: var(--font-latin); }

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

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--umber);
  color: var(--ivory);
  border-radius: var(--radius-s);
  text-decoration: none;
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ==========================================================================
   Shared components
   ========================================================================== */

.section { padding-block: var(--section-y); position: relative; }
.section--linen { background: var(--linen); }
.section--deep { background: var(--umber); color: var(--linen); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--walnut);
  margin-block-end: 22px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow [lang="en"] { font-style: italic; letter-spacing: 0.02em; font-size: 1.08em; }
.eyebrow--light { color: var(--sand); }

.section-head { max-width: 640px; margin-block-end: clamp(32px, 4.5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section-title {
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.22;
}

/* A quiet world name above world-specific sections */
.world-label {
  margin-block-end: 14px;
  font-family: var(--font-accent); /* hand-drawn accent, sized up: Amatic runs small and narrow */
  font-size: clamp(1.3rem, 1.2rem + 0.35vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--walnut);
}
.section--deep .section-title { color: var(--ivory); }

.section-lede {
  margin-block-start: 24px;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34em;
}
.section--deep .section-lede { color: rgba(243, 236, 225, 0.78); }

/* Buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --mag-x: 0px;   /* magnetic pull, set by script.js on desktop */
  --mag-y: 0px;
  --lift: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden; /* clips the click highlight; focus outlines are unaffected */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--mag-x), calc(var(--mag-y) + var(--lift)), 0);
  transition: background-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft),
              border-color 0.4s var(--ease-soft), transform 0.6s var(--ease-out),
              scale 0.2s var(--ease-out), box-shadow 0.4s var(--ease-soft),
              background-size 0.5s var(--ease-out);
}
/* While the pointer is over a magnetic button it follows more closely */
.btn.is-magnetic { transition-duration: 0.4s, 0.4s, 0.4s, 0.25s, 0.2s, 0.4s, 0.5s; }

.btn--primary {
  --btn-bg: var(--walnut-deep);
  --btn-fg: var(--ivory);
  box-shadow: 0 10px 24px -14px rgba(46, 33, 26, 0.6);
}
.btn--outline { border-color: var(--line-strong); }
.btn--quiet {
  overflow: visible;
  padding-inline: 6px;
  min-height: 44px;
  border-radius: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 calc(100% - 8px);
  background-repeat: no-repeat;
  color: var(--walnut-deep);
}
.btn[disabled] { cursor: not-allowed; transform: none; box-shadow: none; }
.btn--primary[disabled] { --btn-bg: var(--walnut); opacity: 0.88; }
.btn--outline[disabled] { color: var(--ink-soft); }

.btn__arrow { width: 18px; height: 18px; transition: transform 0.5s var(--ease-out); }

/* Hover — only on devices that can hover, so taps never leave a stuck state */
@media (hover: hover) {
  .btn--primary:not([disabled]):hover {
    --btn-bg: var(--umber);
    --lift: -2px;
    box-shadow: 0 16px 30px -14px rgba(46, 33, 26, 0.65);
  }
  .btn--outline:not([disabled]):hover { border-color: var(--walnut); }
  .btn--quiet:hover { background-size: 40% 1px; }
  .btn:not([disabled]):hover .btn__arrow { transform: translateX(-4px); }
}

/* Keyboard focus mirrors hover, alongside the focus ring */
.btn--primary:focus-visible {
  --btn-bg: var(--umber);
  box-shadow: 0 16px 30px -14px rgba(46, 33, 26, 0.65);
}
.btn--quiet:focus-visible { background-size: 40% 1px; }
.btn:focus-visible .btn__arrow { transform: translateX(-4px); }

/* Press — mouse, touch and keyboard (class set by script.js) */
.btn:not([disabled]).is-pressed { scale: 0.97; }
.btn--quiet:not([disabled]).is-pressed { scale: 0.98; }
.btn--primary:not([disabled]).is-pressed {
  --lift: 0px;
  box-shadow: 0 6px 14px -10px rgba(46, 33, 26, 0.55);
}

/* Click highlight — a soft ivory bloom from the point of contact */
.btn--primary::after {
  content: "";
  position: absolute;
  z-index: -1; /* above the button's fill, beneath its label */
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  width: 260%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(251, 247, 240, 0.22), rgba(251, 247, 240, 0));
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.btn--primary.is-rippling::after { animation: btn-bloom 0.75s var(--ease-out); }
@keyframes btn-bloom {
  from { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Wordmark */
.wordmark {
  font-family: var(--font-latin);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--umber);
  white-space: nowrap;
  transition: opacity 0.4s var(--ease-soft);
}
@media (hover: hover) {
  .wordmark:hover { opacity: 0.72; }
}

/* Phone presentation — one device used for every screen and the film */
.phone {
  --phone-w: 300px;
  position: relative;
  width: var(--phone-w);
  max-width: 100%;
  padding: calc(var(--phone-w) * 0.034);
  border-radius: calc(var(--phone-w) * 0.15);
  background: linear-gradient(145deg, #3a2d25, #1d1612 60%, #2b211b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(46, 33, 26, 0.18),
    var(--shadow-deep);
}
.phone::before {
  /* Dynamic island */
  content: "";
  position: absolute;
  top: calc(var(--phone-w) * 0.06);
  left: 50%;
  z-index: 3;
  width: 28%;
  height: calc(var(--phone-w) * 0.052);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #120d0a;
}
.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1158 / 2048;
  border-radius: calc(var(--phone-w) * 0.118);
  background: var(--world-screen-bg);
  isolation: isolate;
}
.phone__screen img,
.phone__screen video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* never crop or distort original screens */
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft), backdrop-filter 0.5s;
}
.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(251, 247, 240, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.site-nav__list {
  display: flex;
  gap: clamp(22px, 3vw, 44px);
}
.site-nav__list a {
  position: relative;
  padding-block: 8px;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s;
}
.site-nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 2px;
  height: 1px;
  background: var(--walnut);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.site-nav__list a:focus-visible,
.site-nav__list a[aria-current="true"] { color: var(--ink); }
.site-nav__list a:focus-visible::after,
.site-nav__list a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .site-nav__list a:hover { color: var(--ink); }
  .site-nav__list a:hover::after { transform: scaleX(1); }
}

.nav-toggle { display: none; }
.nav-toggle { -webkit-tap-highlight-color: transparent; transition: color 0.3s, scale 0.2s var(--ease-out); }
.nav-toggle.is-pressed { scale: 0.95; }
@media (hover: hover) {
  .nav-toggle:hover { color: var(--walnut); }
}

@media (max-width: 899px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-size: var(--step--1);
    font-weight: 500;
    cursor: pointer;
  }
  .nav-toggle__icon { position: relative; width: 22px; height: 10px; }
  .nav-toggle__icon span {
    position: absolute;
    inset-inline: 0;
    height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
  }
  .nav-toggle__icon span:first-child { top: 0; }
  .nav-toggle__icon span:last-child { top: 8.5px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child { top: 4.25px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child { top: 4.25px; transform: rotate(-45deg); }

  .site-nav__list {
    position: fixed;
    inset-inline: 0;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 247, 240, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 40px -24px rgba(46, 33, 26, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease-out), visibility 0s linear 0.4s;
  }
  .site-nav__list.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s var(--ease-soft), transform 0.5s var(--ease-out), visibility 0s;
  }
  .site-nav__list li + li { border-top: 1px solid var(--line); }
  .site-nav__list a {
    display: block;
    padding-block: 18px;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 300;
    color: var(--ink);
  }
  .site-nav__list a::after { display: none; }
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 24px) 72px;
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(241, 221, 215, 0.45), transparent 60%),
    linear-gradient(180deg, var(--ivory), var(--linen));
}
.hero__inner {
  /* The photograph keeps a set width (559px at 1440×900); the text column takes
     the rest, close enough to the image to read as one composition */
  --hero-media-w: min(clamp(340px, calc((100svh - var(--header-h) - 120px) * 5 / 6), 620px), 38.8vw, 560px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hero-media-w);
  align-items: center;
  gap: clamp(40px, 4.5vw, 72px);
}

.hero__title {
  font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.7rem);
  font-weight: 300;
  line-height: 1.2;
  text-wrap: balance;
}
.hero__title-line { display: block; }
.hero__title-line--soft { color: var(--walnut); font-style: italic; }
.hero__lede {
  margin-block-start: 28px;
  max-width: 28em;
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--ink-soft);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-block-start: 44px;
}
.hero__media {
  margin: 0;
  justify-self: end; /* toward the outer edge — an editorial asymmetry */
  width: 100%;
  /* Width follows the viewport height, so short screens keep the 5:6 framing */
  max-width: clamp(340px, calc((100svh - var(--header-h) - 120px) * 5 / 6), 620px);
}
.hero__frame {
  /* Framing of the photograph, shared with the WebGL view (script.js reads these).
     The print, the phone and both hands fill the photo's width, so it is never
     zoomed: the 5:6 frame only trims a sliver of plain sheet, a little more
     from the sleeves below than from the top */
  --hero-zoom: 1;
  --hero-x: 0.5;
  --hero-y: 0.4;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  /* A clean rectangle: the photograph carries the warmth on its own */
  border-radius: 2px;
  background: var(--oat);
  transform: translateZ(0);
}
.hero__img {
  /* Cover the frame at --hero-zoom, anchored on the same focus point as the crop */
  position: absolute;
  left: calc((1 - var(--hero-zoom)) * var(--hero-x) * 100%);
  top: calc((1 - var(--hero-zoom)) * var(--hero-y) * 100%);
  width: calc(var(--hero-zoom) * 100%);
  height: calc(var(--hero-zoom) * 100%);
  max-width: none;
  object-fit: cover;          /* crop, never stretch */
  object-position: calc(var(--hero-x) * 100%) calc(var(--hero-y) * 100%);
  transition: opacity 1.2s var(--ease-soft);
}
.hero__frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
}
.hero__frame.is-gl canvas { opacity: 1; }
.hero__frame.is-gl .hero__img { opacity: 0; }

.hero__scroll {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.hero__scroll span {
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(var(--walnut), transparent);
  animation: scroll-hint 2.6s var(--ease-soft) infinite;
  transform-origin: top;
}
@keyframes scroll-hint {
  0% { transform: scaleY(0); opacity: 0; }
  30% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(12px); opacity: 0; }
}

@media (min-width: 900px) {
  /* Optical centring: a text block centred to the pixel reads slightly low
     beside a tall photograph, so it sits a touch above the image's midline */
  .hero__copy { padding-block-end: clamp(16px, 2.5vw, 40px); }
}

@media (max-width: 899px) {
  .hero { min-height: auto; padding-block-end: 88px; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__copy { order: 1; }
  .hero__media { order: 2; max-width: 460px; justify-self: center; }
}
@media (max-width: 899px) and (min-height: 500px) {
  /* On phones, open with the photograph — it is the product */
  .hero__media { order: 0; }
  .hero__frame { aspect-ratio: 4 / 4.8; }
}
@media (max-width: 599px) and (min-height: 500px) {
  /* Phones: the photograph runs edge to edge */
  .hero__media {
    max-width: none;
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(var(--gutter) * -1);
  }
  .hero__frame { border-radius: 0; }
}
@media (max-width: 480px) {
  .hero__actions .btn--primary { width: 100%; }
  .hero__actions { justify-content: center; }
}

/* ==========================================================================
   2. The story — how Small World works
   ========================================================================== */

.story { background: var(--ivory); }
.story__title {
  max-width: 18em;
  margin-inline: auto;
  margin-block-end: clamp(32px, 4.5vw, 64px);
  text-align: center;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem);
  font-weight: 300;
  line-height: 1.28;
}
.story__title em {
  display: inline-block;
  margin-block-start: 0.25em;
  font-style: italic;
  font-size: 0.72em;
  color: var(--walnut);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 56px);
  max-width: 1040px; /* a narrower measure keeps the visuals supporting, not leading */
  margin-inline: auto;
}
.step { display: flex; flex-direction: column; gap: 20px; }

/* Each step has one authentic visual, all on the same linen tile */
.step__visual {
  /* crop of the artwork detail, per tile shape (see .step__visual--detail) */
  --detail-w: 200%;
  --detail-x: -36%;
  --detail-y: -130%;
  position: relative;
  aspect-ratio: 5 / 4; /* gentle landscape: equal heights, modest presence */
  overflow: hidden;
  border-radius: 2px;
  background: var(--linen);
}
.step__visual--screen img {
  /* the whole screen, never cropped: 82% of the tile's height, centred */
  position: absolute;
  inset: 9% 0;
  margin: auto;
  width: auto;
  height: 82%;
  max-width: none;
  border: 1px solid var(--line);
  border-radius: 10px;
}
/* A full photograph filling the tile (step 02: from photo to watercolour) */
.step__visual--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 45%;
}
/* Step 02: the frame sits in the middle of the image — centre it in every tile shape */
.step__visual--creation img { object-position: 50% 50%; }
/* Step 03: keep the framed print and its name in view (lower right of the photo) */
.step__visual--gift img { object-position: 60% 62%; }
/* A square artwork shown whole, centred, on a tile matched to its own paper */
.step__visual--whole { background: #F8F2EA; }
.step__visual--whole img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
/* The corner of the framed artwork — the code that opens the world */
.step__visual--detail img {
  position: absolute;
  width: var(--detail-w);
  max-width: none;
  height: auto;
  left: var(--detail-x);
  top: var(--detail-y);
}

.step__num {
  display: block;
  margin-block-end: 10px;
  font-family: var(--font-latin);
  font-size: var(--step-0);
  letter-spacing: 0.08em;
  color: var(--walnut);
}
.step__title { margin-block-end: 8px; font-size: var(--step-1); font-weight: 400; }
.step p { max-width: 24em; color: var(--ink-soft); }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step { flex-direction: row; align-items: center; gap: 20px; }
  .step__visual {
    flex: 0 0 30%;
    aspect-ratio: 4 / 5; /* small portrait thumbnails read best beside text */
    --detail-w: 240%;
    --detail-x: -36.4%;
    --detail-y: -86.3%;
  }
  .step__text { flex: 1; min-width: 0; }
}

/* ==========================================================================
   4b. Print collection (princess world) — editorial gallery
   ========================================================================== */

.collection { background: var(--ivory); padding-block-start: var(--section-y-tight); }

/* Heading and introduction beside the room photograph */
.collection__intro {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
  gap: clamp(40px, 7vw, 112px);
  margin-block-end: clamp(32px, 4.5vw, 64px);
}
.collection__title {
  max-width: 13em;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.22;
}
.collection__lede {
  margin-block-start: 20px;
  max-width: 26em;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-soft);
}
.collection__room {
  justify-self: end;
  /* Desktop: the photograph's height follows the screen, so it is seen whole
     beside its heading without scrolling (phones and tablets: see below) */
  width: min(560px, 100%, calc((100svh - var(--header-h) - 48px) * 1122 / 1402));
  margin: 0;
}
.collection__room img {
  width: 100%;
  height: auto;
  aspect-ratio: 1122 / 1402; /* the photograph's own proportions — never cropped */
  border-radius: 2px;
}

/* Six print designs: one image-led horizontal rail.
   The first print aligns with the page content; the rail runs on to the
   viewport edge so the next print peeks in. Native scrolling throughout. */
.collection__controls {
  display: flex;
  justify-content: flex-end; /* the far (left) side in RTL, above the rail's direction of travel */
  gap: 10px;
  margin-block-end: 20px;
}
.collection__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--walnut-deep);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft), opacity 0.3s;
}
.collection__arrow svg { width: 18px; height: 18px; }
.collection__arrow:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) {
  .collection__arrow:not(:disabled):hover { border-color: var(--walnut); }
}

.collection__list {
  /* the rail spans the full section; its start padding lines the first print
     up with the page content (percentages = the section's own width) */
  --rail-start: max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter)));
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0;
  padding-inline: var(--rail-start);
  padding-block-end: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-start);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.collection__list::-webkit-scrollbar { display: none; }
.collection__list:focus-visible { outline-offset: -2px; }
.collection__list.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .collection__list { cursor: grab; }
}

.collection__item {
  flex: 0 0 min(520px, 38vw);
  scroll-snap-align: start;
}
.collection__print { margin: 0; }
.collection__print img {
  width: 100%;
  height: auto;
  aspect-ratio: 1; /* the whole print: names and code areas stay visible */
  border: 1px solid var(--line); /* a hairline edge, like paper on a wall */
  -webkit-user-drag: none;
  user-select: none;
}
.collection__label {
  margin-block-start: 14px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--walnut);
}
.collection__note {
  margin-block-start: clamp(32px, 4vw, 48px);
  font-size: var(--step--1);
  color: var(--ink-mute);
}

@media (max-width: 899px) {
  .collection__intro { grid-template-columns: 1fr; align-items: start; gap: 32px; }
  .collection__room { justify-self: start; width: min(560px, 100%); } /* prominent, not a whole tablet screen */
}

/* Phones: one large print at a time, the next one peeking in */
@media (max-width: 760px) {
  .collection__intro { margin-block-end: 40px; }
  .collection__controls { display: none; } /* swiping is the natural control */
  .collection__item { flex-basis: 82vw; }
  .collection__note { margin-block-start: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .collection__list { scroll-behavior: auto; }
}

/* ==========================================================================
   5. Experience
   ========================================================================== */

.experience { background: var(--ivory); padding-block-start: var(--section-y-tight); }

.experience__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "chapters stage"; /* RTL: chapters right, phone left */
  gap: clamp(40px, 6vw, 96px);
}
.chapters { grid-area: chapters; }
.experience__stage {
  grid-area: stage;
  position: sticky;
  top: calc(var(--header-h) + 4vh);
  height: calc(100svh - var(--header-h) - 8vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.experience__stage::before {
  /* soft linen halo behind the device */
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 999px 999px 40px 40px / 50% 50% 40px 40px;
  background: radial-gradient(closest-side, var(--world-halo), transparent);
  opacity: 0.8;
}
.phone--stage { --phone-w: min(320px, 24vw, calc((100svh - var(--header-h) - 8vh - 80px) * 0.54)); }

.phone--stage .phone__screen img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.8s var(--ease-soft), transform 1.2s var(--ease-out);
}
.phone--stage .phone__screen img.is-active { opacity: 1; transform: none; }

.experience__progress { display: flex; gap: 10px; }
.experience__progress li {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background-color 0.5s, width 0.6s var(--ease-out);
}
.experience__progress li.is-active { width: 44px; background: var(--walnut); }

.chapter {
  min-height: 56svh;
  display: flex;
  align-items: center;
}
.chapter__text { max-width: 26em; }
/* Desktop: chapters not yet in focus recede — the large title fades (4.4:1),
   the small label and text turn to the muted ink (5.3:1) — and all of it stays readable */
.chapter__num,
.chapter__title,
.chapter p { transition: color 0.7s var(--ease-soft), opacity 0.7s var(--ease-soft); }
@media (min-width: 900px) {
  .chapter:not(.is-active) .chapter__title { opacity: 0.62; }
  .chapter:not(.is-active) .chapter__num,
  .chapter:not(.is-active) p { color: var(--ink-mute); }
}
.chapter__num {
  display: block;
  margin-block-end: 16px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--walnut);
}
.chapter__title { font-size: var(--step-3); font-weight: 300; line-height: 1.22; margin-block-end: 18px; }
.chapter p { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.75; }

.phone--inline { display: none; }

/* Mobile & tablet: a swipeable row of devices */
@media (max-width: 899px) {
  .experience__layout { display: block; }
  .experience__stage { display: none; }
  .chapters {
    display: flex;
    gap: 20px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block-end: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chapters::-webkit-scrollbar { display: none; }
  .chapters:focus-visible { outline-offset: -2px; } /* the row runs edge to edge; keep the ring visible */
  .chapter {
    flex: 0 0 min(78vw, 340px);
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    scroll-snap-align: start;
  }
  .chapter__title { font-size: var(--step-2); margin-block-end: 10px; }
  .chapter p { font-size: var(--step-0); }
  .phone--inline { display: block; --phone-w: min(78vw, 300px); margin-inline: auto; order: -1; }
}

/* ==========================================================================
   5b. App screens (princess world) — one continuous strip of real screenshots
   ========================================================================== */

/* One shared height keeps the strip calm; each screenshot keeps its own width.
   The cap stays at or below every file's own height (770px and up), so nothing
   is shown larger than its pixels. Phones: one screen, the next peeking in. */
.screens {
  --shot-h: max(420px, min(760px, 84svh));
  padding-block: clamp(40px, 5vw, 72px) clamp(8px, 1vw, 16px);
}
/* gallery → note → film read as one linen band */
.screens + .film,
.future + .film { padding-block-start: var(--section-y-tight); }

.screens__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.screens__title {
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.22;
}
.screens__lede {
  margin-block: 12px clamp(20px, 2.4vw, 32px);
  max-width: 34em;
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink-soft);
}
.screens__controls { display: flex; gap: 10px; flex-shrink: 0; }

.screens__list {
  --rail-start: max(var(--gutter), calc((100% - 1280px) / 2 + var(--gutter)));
  display: flex;
  align-items: flex-end; /* labels sit above; every screenshot shares one baseline */
  gap: 10px;
  margin: 0;
  padding-inline: var(--rail-start);
  padding-block-end: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-start);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.screens__list::-webkit-scrollbar { display: none; }
.screens__list:focus-visible { outline-offset: -2px; }
.screens__list.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .screens__list { cursor: grab; }
}

.screens__item { flex: 0 0 auto; scroll-snap-align: start; }

.screens__label {
  margin-block-end: 10px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--walnut);
  white-space: nowrap;
}

.screens__shot { margin: 0; }
.screens__shot img {
  height: var(--shot-h);
  width: auto; /* the file's own proportions — never cropped */
  outline: 1px solid var(--line); /* a hairline so pale screens keep their edge on linen */
  outline-offset: -1px;
  -webkit-user-drag: none;
  user-select: none;
}
.screens__note {
  margin-block-start: 18px;
  font-size: var(--step--1);
  color: var(--ink-mute);
}

/* Phones: one screenshot at a time, the next one peeking in */
@media (max-width: 760px) {
  .screens { --shot-h: min(136vw, 70svh); }
  .screens__controls { display: none; } /* swiping is the natural control */
  .screens__list { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .screens__list { scroll-behavior: auto; }
}

/* ==========================================================================
   5c. The world keeps growing — a quiet editorial note inside the linen band
   ========================================================================== */

.future { padding-block: clamp(32px, 4vw, 56px) 0; }
.future__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: end;
  gap: 16px clamp(32px, 6vw, 96px);
  padding-block-start: clamp(28px, 3.5vw, 44px);
  border-block-start: 1px solid var(--line); /* a hairline, like a page break */
}
.future__head .world-label { margin-block-end: 10px; }
.future__title {
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.22;
}
.future__body {
  max-width: 34em;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-soft);
}

@media (max-width: 760px) {
  .future__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. Film
   ========================================================================== */

.film { overflow: hidden; }
.film::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 25% 50%, var(--world-film-glow), transparent 70%),
    radial-gradient(40% 40% at 90% 10%, var(--world-film-glow-2), transparent 70%);
  pointer-events: none;
}
.film__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(48px, 8vw, 128px);
}
.film__note {
  margin-block-start: 28px;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.film__player { display: flex; justify-content: center; }
.film__frame {
  position: relative;
  width: min(340px, 78vw);
  aspect-ratio: 576 / 1024;
  overflow: hidden;
  border-radius: 2px;
  background: var(--umber);
}
/* The video overdraws the frame by 1px on every side (the frame clips it), so
   the dark frame background can never show as a hairline at fractional edges */
.film__video {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
}

.film__play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(251, 247, 240, 0.55);
  border-radius: 50%;
  background: rgba(46, 33, 26, 0.38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ivory);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s var(--ease-out), scale 0.2s var(--ease-out), background-color 0.4s, opacity 0.4s;
}
.film__play svg { width: 34px; height: 34px; margin-inline-start: 4px; transform: scaleX(1); }
@media (hover: hover) {
  .film__play:hover { transform: scale(1.06); background: rgba(46, 33, 26, 0.55); }
}
.film__play:focus-visible { background: rgba(46, 33, 26, 0.55); }
.film__play.is-pressed { scale: 0.94; }
.film__play[hidden] { display: none; }

@media (max-width: 899px) {
  .film__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ==========================================================================
   7. The gift — product presentation
   ========================================================================== */

.product { background: var(--ivory); padding-block-end: clamp(56px, 7vw, 96px); }
.product__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: clamp(40px, 6vw, 104px);
}

/* Option panels are swapped by script.js; [hidden] always wins */
[data-option-panel][hidden] { display: none !important; }

.product__visual {
  margin: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--linen);
}
.product__visual--gift img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone--product { --phone-w: min(300px, 44vw); }

.product__world {
  margin-block-end: 14px;
  font-family: var(--font-accent); /* same accent as .world-label */
  font-size: clamp(1.3rem, 1.2rem + 0.35vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--walnut);
}
.product__title {
  margin-block-end: 14px;
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.22;
}

.product__intro {
  margin-block-end: 28px;
  max-width: 30em;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Two-option selector: native radios, styled as quiet cards */
.product__options {
  display: grid;
  gap: 12px;
  min-inline-size: 0;
  margin: 0 0 32px;
  padding: 0;
  border: 0;
}
.product-option { position: relative; display: block; cursor: pointer; }
.product-option__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.product-option__body {
  display: block;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  transition: border-color 0.3s var(--ease-soft), background-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}
.product-option__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.product-option__name { font-size: var(--step-1); color: var(--ink); }
.product-option__name em { color: var(--walnut); }
.product-option__price { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.product-option__desc {
  display: block;
  margin-block-start: 4px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.product-option__input:checked + .product-option__body {
  border-color: var(--walnut);
  background: var(--linen);
  box-shadow: inset 0 0 0 1px var(--walnut);
}
.product-option__input:focus-visible + .product-option__body {
  outline: 2px solid var(--walnut);
  outline-offset: 3px;
}
@media (hover: hover) {
  .product-option:hover .product-option__input:not(:checked) + .product-option__body { border-color: rgba(122, 85, 57, 0.5); }
}

.price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.price__currency { font-size: 0.6em; color: var(--walnut); }

.product__summary {
  padding-block-start: 28px;
  border-top: 1px solid var(--line);
}
.product__price {
  margin-block-end: 28px;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: var(--umber);
}
.product__price .price__currency { font-size: 0.45em; }
.product__includes-title {
  margin-block-end: 14px;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.product__includes { display: grid; gap: 10px; margin-block-end: 36px; }
.product__includes li {
  position: relative;
  padding-inline-start: 26px;
  color: var(--ink-soft);
}
.product__includes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.8em;
  width: 12px;
  height: 1px;
  background: var(--gold);
}
.product__includes strong { font-weight: 600; color: var(--ink); }
.product__cta { width: 100%; }

@media (min-width: 900px) {
  .phone--product { --phone-w: min(300px, 24vw); }
}
@media (max-width: 899px) {
  .product__inner { grid-template-columns: 1fr; gap: 40px; }
}

.options__note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-block-start: 48px;
  color: var(--ink-soft);
  text-align: center;
}
.product__note {
  justify-content: flex-start;
  margin-block-start: 18px;
  font-size: var(--step--1);
  text-align: start;
}
.options__dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
}
.options__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgb(159, 174, 147);
  opacity: 0;
  animation: soft-pulse 2.8s var(--ease-soft) infinite;
}
@keyframes soft-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70%, 100% { transform: scale(3.5); opacity: 0; }
}

/* ==========================================================================
   7a. Waitlist
   ========================================================================== */

/* 7a. Coming soon — a calm, centred invitation (no form) */
.soon__inner {
  max-width: calc(720px + 2 * var(--gutter));
  text-align: center;
}
.soon__kicker {
  margin-block-end: 14px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--walnut);
}
.soon__title { font-size: var(--step-3); font-weight: 300; line-height: 1.22; }
.soon__sparkle { font-size: 0.8em; }
.soon__lede {
  margin: 18px auto 0;
  max-width: 30em;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-soft);
}
.soon__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: clamp(28px, 3.5vw, 40px);
}
.soon__icon { width: 20px; height: 20px; flex-shrink: 0; }
.soon__handle {
  margin-block-start: 18px;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.soon__handle a {
  display: inline-block;
  padding-block: 4px; /* comfortable tap target */
  color: var(--walnut-deep);
  text-underline-offset: 3px;
  text-decoration-color: rgba(122, 85, 57, 0.45);
}
@media (max-width: 480px) {
  .soon__actions .btn { width: 100%; }
}

.waitlist { --error: #9C4A33; } /* warm terracotta; 5.6:1 on linen */
.waitlist__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 104px);
  max-width: calc(1040px + 2 * var(--gutter));
}
.waitlist__title { font-size: var(--step-3); font-weight: 300; line-height: 1.15; }
.waitlist__lede {
  margin-block-start: 18px;
  max-width: 26em;
  line-height: 1.75;
  color: var(--ink-soft);
}

.waitlist__label {
  display: block;
  margin-block-end: 10px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--walnut-deep);
}
.waitlist__row { display: flex; flex-wrap: wrap; gap: 12px; }
.waitlist__input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--ivory);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.3s var(--ease-soft);
}
.waitlist__input::placeholder { color: var(--ink-mute); opacity: 1; }
/* Addresses are typed left-to-right, kept at the Hebrew start edge */
.waitlist__input:not(:placeholder-shown) { direction: ltr; text-align: right; }
@media (hover: hover) {
  .waitlist__input:hover { border-color: rgba(122, 85, 57, 0.5); }
}
.waitlist__input:focus-visible { border-color: var(--walnut); }
.waitlist__input[aria-invalid="true"] { border-color: var(--error); }
.waitlist__submit { flex: none; }

.waitlist__error {
  margin-block-start: 8px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--error);
}

.waitlist__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-block-start: 22px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.waitlist__checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.2em 0 0;
  accent-color: var(--walnut-deep);
  cursor: pointer;
}
.waitlist__checkbox[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.waitlist__consent label { cursor: pointer; }

.waitlist__privacy {
  margin-block-start: 14px;
  font-size: var(--step--1);
  line-height: 1.7; /* a few sentences now: keep them easy to read */
  color: var(--ink-mute);
}
.waitlist__privacy [lang="en"] { white-space: nowrap; } /* "Small World" never splits across lines */

/* Always present for screen readers; takes no space while empty */
.waitlist__status {
  margin-block-start: 18px;
  padding: 14px 18px;
  border-inline-start: 2px solid var(--walnut);
  background: rgba(251, 247, 240, 0.7);
  font-size: 0.95rem;
  color: var(--ink);
}
.waitlist__status:empty { margin: 0; padding: 0; border: 0; }
.waitlist__status--error { border-inline-start-color: var(--error); }
.waitlist__form[aria-busy="true"] .waitlist__submit { cursor: progress; opacity: 0.88; }

/* Confirmation — replaces the form after a successful submission */
.waitlist__done {
  padding: clamp(24px, 4vw, 36px);
  border-inline-start: 2px solid var(--walnut);
  background: rgba(251, 247, 240, 0.7);
}
.waitlist__done-title:focus { outline: none; } /* focus is moved here by script, not by the visitor */
.waitlist__done-title { margin-block-end: 10px; font-size: var(--step-2); font-weight: 400; }
.waitlist__done p { color: var(--ink-soft); line-height: 1.75; }
.waitlist__done-note { margin-block-start: 12px; font-size: var(--step--1); }
.waitlist__done a,
.thanks a:not(.btn) {
  color: var(--walnut-deep);
  text-underline-offset: 3px;
  text-decoration-color: rgba(122, 85, 57, 0.45);
  overflow-wrap: anywhere;
}

@media (max-width: 899px) {
  .waitlist__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  .waitlist__submit { width: 100%; }
}

/* ==========================================================================
   7b. About the artwork
   ========================================================================== */

.details-band { padding-block: 0 var(--section-y); background: var(--ivory); }
.details-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 104px);
  padding-block-start: clamp(40px, 6vw, 72px);
  /* a hairline inside the gutters */
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.details-band__title { margin-block-end: 16px; font-size: var(--step-2); font-weight: 400; }
.details-band__lede { max-width: 28em; line-height: 1.75; color: var(--ink-soft); }

.details { margin: 0; }
.details__row {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 24px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}
.details__row:first-child { border-top: 0; padding-block-start: 0; }
.details dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--walnut-deep);
}
.details dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 899px) {
  .details-band__inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .details__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.faq .section-head { margin-block-end: 0; position: sticky; top: calc(var(--header-h) + 40px); }

.accordion { border-top: 1px solid var(--line-strong); }
.accordion__item { border-bottom: 1px solid var(--line-strong); }
.accordion__heading { font-size: inherit; }
.accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-height: 72px;
  padding: 22px 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  text-align: start;
  cursor: pointer;
  transition: color 0.3s;
}
@media (hover: hover) {
  .accordion__trigger:hover { color: var(--walnut); }
  .accordion__trigger:hover .accordion__icon { scale: 1.15; }
}
.accordion__trigger:focus-visible { color: var(--walnut); }
.accordion__trigger.is-pressed .accordion__icon { scale: 0.8; }
.accordion__trigger { -webkit-tap-highlight-color: transparent; }
.accordion__icon {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  transition: scale 0.3s var(--ease-out);
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out);
}
.accordion__icon::after { transform: rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel { overflow: hidden; }
.accordion__panel p {
  padding-block-end: 28px;
  max-width: 36em;
  color: var(--ink-soft);
}

@media (max-width: 899px) {
  .faq__inner { grid-template-columns: 1fr; gap: 32px; }
  .faq .section-head { position: static; }
}

/* ==========================================================================
   9. Closing & footer
   ========================================================================== */

.closing {
  padding-block: clamp(56px, 7vw, 88px) clamp(12px, 1.2vw, 18px); /* ivory below the wordmark */
  overflow: hidden; /* crops the oversized wordmark at the sides; never widens the page */
  text-align: center;
  background: linear-gradient(180deg, var(--ivory), var(--linen));
}
.closing__title {
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.2;
}
.closing__actions {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(24px, 3vw, 36px);
}
/* The brand name, oversized and faint, sinking into the edge of the page.
   It sits below the text, so it never overlaps or competes with it. */
.closing__mark {
  margin-block: clamp(16px, 2.5vw, 32px) 0; /* no negative margin: the whole letter height stays inside */
  font-size: min(20vw, 18rem); /* a little wider than the page: cropped slightly at both sides */
  font-weight: 400;
  line-height: 0.9; /* a snug box that still holds every glyph: the gap below is the padding */
  letter-spacing: -0.01em;
  color: var(--walnut);
  opacity: 0.07;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  /* flex centring overflows equally on both sides, so the name stays centred
     even where it is wider than the container (in either text direction) */
  display: flex;
  justify-content: center;
}

.site-footer {
  padding-block: 56px calc(48px + env(safe-area-inset-bottom, 0px));
  background: var(--umber);
  color: var(--sand);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
}
.wordmark--footer { color: var(--ivory); }
.site-footer__tagline { font-style: italic; }
.site-footer__copy { font-size: var(--step--1); color: rgba(216, 200, 177, 0.7); }

@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
}
.site-footer__link {
  color: var(--sand);
  text-underline-offset: 3px;
  text-decoration-color: rgba(216, 200, 177, 0.5);
  transition: color 0.3s, text-decoration-color 0.3s;
}
@media (hover: hover) {
  .site-footer__link:hover { color: var(--ivory); text-decoration-color: currentColor; }
}

/* Inline links in running text (waitlist privacy line) */
.waitlist__privacy a {
  display: inline-block; /* one piece, never split across lines */
  padding-block: 4px;    /* a comfortable tap target (≥ 24px tall) */
  white-space: nowrap;
  color: var(--walnut-deep);
  text-underline-offset: 3px;
  text-decoration-color: rgba(122, 85, 57, 0.45);
}
@media (hover: hover) {
  .waitlist__privacy a:hover { text-decoration-color: currentColor; }
}

/* ==========================================================================
   Legal pages (privacy notice)
   ========================================================================== */

.legal {
  padding-block: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(48px, 8vw, 96px)) clamp(72px, 10vw, 128px);
  background: var(--ivory);
}
.legal__inner { max-width: calc(42em + 2 * var(--gutter)); }
.legal__back {
  padding-block: 8px;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-underline-offset: 4px;
  text-decoration-color: rgba(122, 85, 57, 0.4);
}
.legal__kicker {
  margin-block-end: 12px;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--walnut);
}
.legal__title { font-size: var(--step-3); font-weight: 300; line-height: 1.15; }
.legal__draft {
  margin-block: 28px;
  padding: 14px 18px;
  border-inline-start: 2px solid var(--walnut);
  background: var(--linen);
  font-size: 0.95rem;
}
.legal__updated { margin-block: 14px 28px; font-size: var(--step--1); color: var(--ink-mute); }
.legal__lede { margin-block-start: 28px; font-size: var(--step-1); line-height: 1.75; color: var(--ink-soft); }
.legal__section {
  margin-block-start: clamp(32px, 5vw, 48px);
  padding-block-start: clamp(24px, 4vw, 32px);
  border-top: 1px solid var(--line);
}
.legal__section h2 { margin-block-end: 12px; font-size: var(--step-1); font-weight: 500; }
.legal__section p + p { margin-block-start: 10px; }
.legal__section p,
.legal__list { line-height: 1.8; color: var(--ink-soft); }
.legal__list { display: grid; gap: 6px; margin-block-end: 12px; }
.legal__list li { position: relative; padding-inline-start: 22px; }
.legal__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--gold);
}
.legal__pending { font-style: italic; color: var(--ink-mute) !important; }
.legal a:not(.btn) {
  color: var(--walnut-deep);
  text-underline-offset: 3px;
  text-decoration-color: rgba(122, 85, 57, 0.45);
  overflow-wrap: anywhere;
}
.legal__return { margin-block-start: clamp(40px, 6vw, 64px); }

/* Thank-you page (fallback when JavaScript is unavailable) */
.thanks {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 48px) 96px;
  background: linear-gradient(180deg, var(--ivory), var(--linen));
}
.thanks__inner { max-width: calc(34em + 2 * var(--gutter)); }
.thanks__title { font-size: var(--step-3); font-weight: 300; line-height: 1.15; }
.thanks__text { margin-block-start: 18px; font-size: var(--step-1); line-height: 1.75; color: var(--ink-soft); }
.thanks__note { margin-block-start: 14px; font-size: var(--step--1); color: var(--ink-mute); }
.thanks__note a { white-space: nowrap; }
.thanks__actions { margin-block-start: 36px; }

/* ==========================================================================
   Motion — reveals
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease-soft), transform 1.1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal="fade"] { transform: scale(0.985); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Line rise — the hero and closing headlines. Each line is a mask; its text
   rises from just below its own baseline. The mask is drawn with a clip-path
   that reaches beyond the line box (no padding or margins, so layout is
   unchanged), leaving room for descenders, the tall lamed, italic overhang
   and punctuation so nothing is ever clipped. */
.rise-line {
  display: block;
  clip-path: inset(-0.16em -0.24em -0.26em -0.24em);
}
.rise-line__inner { display: inline-block; }
.js [data-reveal="lines"] { opacity: 1; transform: none; } /* the heading itself stays put */
.js [data-reveal="lines"] .rise-line__inner {
  opacity: 0;
  transform: translateY(calc(100% + 0.3em));
  transition: opacity 0.9s var(--ease-soft), transform 1.05s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal="lines"] .rise-line:nth-child(2) .rise-line__inner {
  transition-delay: calc(var(--reveal-delay, 0s) + 0.14s);
}
.js [data-reveal="lines"].is-visible .rise-line__inner { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal="lines"] .rise-line__inner { opacity: 1; transform: none; }
  .hero__scroll { display: none; }
  .btn, .film__play, .nav-toggle, .accordion__icon { scale: none !important; translate: none !important; }
  .btn { --mag-x: 0px !important; --mag-y: 0px !important; --lift: 0px !important; }
  .btn--primary::after { display: none; }
}