/* ==========================================================================
   NOVAIR — editorial pre-launch page
   One photograph, one form. Mobile-first; breakpoints 600px and 960px.
   Palette "Ink & Camel": ink background, warm cream text, camel accent.
   ========================================================================== */

:root {
  --ink: #0F0E0C;
  --cream: #F5F1EA;
  --camel: #C8A87C;
  --cream-60: rgba(245, 241, 234, .62);
  --cream-35: rgba(245, 241, 234, .35);
  --field: rgba(255, 255, 255, .08);
  --field-border: rgba(255, 255, 255, .2);

  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --max: 1280px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
/* Belt and braces against sideways scrolling on phones. `clip` (unlike `hidden`) does not turn
   body into a scroll container, so the sticky stage keeps working. */
body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
em { font-style: italic; }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid var(--camel); outline-offset: 4px; }

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

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

/* ---------- Shared pieces ---------- */
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .3em;
  text-indent: .3em;                        /* keep the letter-spaced word optically centred */
  text-transform: uppercase;
  color: var(--cream);
}
.wordmark--small { font-size: 15px; }

/* Small uppercase label style used by pills, badges, buttons */
.label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s, transform .25s var(--ease);
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .65; cursor: progress; }

/* The sign-up form: email + first name side by side, button full width beneath */
.signup { margin-top: 36px; max-width: 520px; }
.signup__input {
  width: 100%;
  height: 56px;
  padding: 0 18px;
  background: var(--field);
  border: 1px solid var(--field-border);
  border-radius: 2px;
  color: var(--cream);
  font-size: 15px;                          /* ≥16px below 600px (see media query) so iOS doesn't zoom */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s, background-color .25s;
}
.signup__input::placeholder { color: var(--cream-60); }
.signup__input:hover { border-color: var(--cream-35); }
.signup__input:focus { outline: none; border-color: var(--camel); background: rgba(255, 255, 255, .11); }
.signup__input[aria-invalid='true'] { border-color: var(--camel); }
.signup__button { margin-top: 10px; }
.signup__note { min-height: 20px; margin-top: 10px; font-size: 13px; color: var(--camel); }
/* The hero form's messages: small bronze italic directly under the button (success and errors alike) */
.hero .signup__note { min-height: 22px; margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.45; color: #A68A5B; }
.hero .signup__input:disabled, .hero .signup__button:disabled { opacity: .6; cursor: default; }
.signup__done {
  margin-top: 36px;
  max-width: 520px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.2;
  outline: none;
  animation: rise .8s var(--ease) both;
}
.signup__done em { display: block; margin-top: 6px; font-size: .62em; color: var(--camel); }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 599px) {
  .signup__input { font-size: 16px; }
}

/* ==========================================================================
   1. HERO — the photograph is the page
   ========================================================================== */
.hero {
  position: absolute;                       /* LAYER A of the stage: fills the sticky viewport */
  inset: 0;
  display: grid;
  align-items: end;
  padding: 96px var(--gutter) 92px;
  overflow: hidden;
  isolation: isolate;
  will-change: opacity;
}
/* Everything script.js fades out during the zoom */
[data-hero-ui] { will-change: opacity; }
/* Placeholder tone until assets/hero-lifestyle.jpg exists: a dusk street, roughly.
   script.js zooms this block toward the wallet (transform-origin is set from the photo). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  will-change: transform;
  background:
    radial-gradient(60% 50% at 68% 42%, rgba(200, 168, 124, .22), rgba(200, 168, 124, 0) 70%),
    linear-gradient(180deg, #2B2420 0%, #1B1714 55%, #0F0E0C 100%);
}
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 767px) {
  .hero__image { object-position: 51% 40%; }   /* phones: the man in the middle (script.js refines the layout) */
}   /* 40%: keeps headroom above the subject in wide, short windows */
/* The side blur: the same photo, blurred, shown only at the edges by a mask that is
   solid at the far left, clear from 35% to 75%, and partly solid again at the far right.
   Scaled up slightly so the blur has no transparent fringe at the viewport edge.
   Phones crop the sides off anyway, so the extra layer is only drawn from tablet up. */
.hero__image--blur {
  display: none;
  will-change: opacity;
  filter: blur(20px);
  transform: scale(1.06);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 6%, rgba(0, 0, 0, .7) 18%, transparent 35%, transparent 75%, rgba(0, 0, 0, .45) 88%, rgba(0, 0, 0, .75) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 6%, rgba(0, 0, 0, .7) 18%, transparent 35%, transparent 75%, rgba(0, 0, 0, .45) 88%, rgba(0, 0, 0, .75) 100%);
}
/* Legibility: ink gradient up the left side on desktop, up from the bottom on phones.
   It belongs to the hero itself, not to the zooming photo block: on phones that block is only
   screen-wide while the photo inside it is far wider, so when the zoom scaled and panned it, the
   gradient's right edge slid into view and left an ungraded strip down the right of the screen.
   Here it always covers exactly the screen. (z-index −1 keeps it above the photo, below the text.) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grad, 1);                  /* script.js fades the gradient out during the zoom */
  background: linear-gradient(0deg, rgba(15, 14, 12, .92) 0%, rgba(15, 14, 12, .62) 45%, rgba(15, 14, 12, .2) 75%, rgba(15, 14, 12, 0) 100%);
}

/* ---------- Fixed top bar: logo left, "Join the waitlist" right, on every screen ----------
   No background in any state: the logo and the pill float directly over the page. script.js adds
   .scrolled once the dark hero photo has given way to the light sections (logo turns Carbon) and
   .on-dark while the Carbon sign-up section is behind it (logo back to cream). */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  background: transparent;                  /* always — the bar itself is never painted */
  pointer-events: none;                     /* only the two links take clicks, not the empty bar */
}
.top-bar > * { pointer-events: auto; }

.brand-mark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #F2EFE8;                           /* cream over the dark hero photograph */
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3); /* soft lift so it reads over any part of the photo */
  transition: color .3s ease, text-shadow .3s ease;
}
.top-bar.scrolled .brand-mark { color: #171717; text-shadow: none; }                              /* light sections */
.top-bar.scrolled.on-dark .brand-mark { color: #F2EFE8; text-shadow: 0 1px 4px rgba(0, 0, 0, .2); }   /* Carbon sign-up */

/* "Join the waitlist" — a compact cream pill that scrolls to the sign-up */
.hero-waitlist-cta {
  padding: 8px 14px;
  border-radius: 999px;
  background: #F2EFE8;
  color: #171717;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hero-waitlist-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
/* Focus rings that read on the dark photo and on the cream bar alike */
.hero-waitlist-cta:focus-visible { outline: none; box-shadow: 0 0 0 2px #171717, 0 0 0 4px #F2EFE8; }
.brand-mark:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; }
.top-bar.scrolled:not(.on-dark) .hero-waitlist-cta { box-shadow: 0 0 0 1px rgba(23, 23, 23, .12), 0 4px 12px rgba(0, 0, 0, .08); }   /* cream on cream needs an edge */

@media (max-width: 767px) {
  .top-bar { padding: 14px 18px; }
  .brand-mark { font-size: 13px; }
  .hero-waitlist-cta { padding: 6px 11px; font-size: 9px; }
}

.hero__content { position: relative; z-index: 1; max-width: 560px; }
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(44px, 11vw, 56px);
  line-height: .98;
  letter-spacing: -.015em;
  max-width: 9.5ch;
  text-wrap: balance;
}
.hero__title em { font-weight: 300; color: var(--camel); }
.hero__lede {
  margin-top: 22px;
  max-width: 40ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-60);
}

/* "Scroll to explore" — bottom centre on desktop, bottom right on phones (the pill has the left) */
.hero__hint {
  position: absolute;
  right: var(--gutter);
  bottom: 30px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-60);
}
.hero__hint svg { animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(5px); opacity: 1; }
}
@media (max-width: 599px) {
  .hero__hint span { display: none; }       /* just the chevron beside the pill */
}

/* Keyboard users: jumps past the stage. Off-screen until it receives focus. */
.skip-stage {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 1001;                            /* above the fixed top bar */
  transform: translate(-50%, -200%);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: transform .25s var(--ease);
}
.skip-stage:focus-visible { transform: translate(-50%, 0); outline-offset: 2px; }

/* Short phones: keep the whole hero inside one viewport (the stage can't grow) */
@media (max-height: 700px) and (max-width: 599px) {
  .hero { padding-top: 72px; padding-bottom: 76px; }
  .hero__title { font-size: clamp(36px, 10vw, 44px); }
  .hero__lede { margin-top: 14px; font-size: 15px; }
  .signup { margin-top: 20px; }
  .signup__input, .btn { height: 50px; min-height: 50px; }
}

@media (min-width: 720px) {
  .hero__image--blur { display: block; }
}
@media (max-width: 599px) {
}
@media (min-width: 960px) {
  .hero { align-items: center; padding: 120px var(--gutter); }
  /* Ink from the left for the headline, a faint lift at the right edge to match the blur, and
     a shallow base so the bottom pill always has something to sit on */
  .hero::after {
    background:
      linear-gradient(0deg, rgba(15, 14, 12, .55) 0%, rgba(15, 14, 12, 0) 22%),
      linear-gradient(270deg, rgba(15, 14, 12, .35) 0%, rgba(15, 14, 12, 0) 22%),
      linear-gradient(90deg, rgba(15, 14, 12, .9) 0%, rgba(15, 14, 12, .74) 26%, rgba(15, 14, 12, .3) 44%, rgba(15, 14, 12, 0) 62%);
  }
  .hero__hint { right: 50%; bottom: 40px; transform: translateX(50%); }
  .hero__content { max-width: 600px; }
  .hero__title { font-size: clamp(72px, 6.6vw, 96px); max-width: 9ch; }
  .hero__lede { margin-top: 28px; font-size: 17px; }
  .signup { margin-top: 40px; }
}

/* ==========================================================================
   2. THE STAGE — hero → zoom → cross-fade → folio opening
   A 500vh-tall track (300vh on phones) with a 100vh sticky stage inside it.
   script.js turns how far the track has scrolled (0 → 1) into the sequence.
   ========================================================================== */
.stage {
  position: relative;
  overflow-x: clip;               /* nothing in the stage may widen the page */
  height: 720vh;                  /* 1.2 zoom & cross-fade + 5 folio stages, + the pinned viewport (CONFIG.stage) */
  background: var(--ink);
  --stage-ink: var(--cream);
}
@media (max-width: 719px) {
  .stage { height: 620vh; }       /* phones: 1.2 zoom & cross-fade + 4 for the folio, + the pinned viewport (CONFIG.stagePhone) */
}
.stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;                 /* iOS: ignore the collapsing URL bar so the stage never jumps */
  overflow: hidden;
  /* iOS Safari lets 3D-transformed layers (the wallet and its strap) escape a plain
     overflow: hidden on a sticky box — which made the page scroll sideways and showed the dark
     body as a strip down the right. clip-path clips composited 3D layers too. */
  clip-path: inset(0);
  contain: paint;
  color: var(--stage-ink);
  background: inherit;
}
/* LAYER B: the 3D wallet. Invisible (and not painted) until it takes over from the photograph. */
.stage__folio {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

/* The studio: a warm cream ground (black leather needs a light ground to read), lit from the
   front — a touch lighter where the wallet sits, darker toward the edges. It cross-fades in with
   the wallet (the whole layer's opacity is driven by script.js). */
.stage__studio {
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 58% at 50% 42%, #F6F3EC 0%, #EEE9DE 48%, #E2DBCC 100%);
}
/* Film grain over the whole studio: takes the digital edge off the rendering */
.stage__grain {
  position: absolute;
  inset: 0;
  background: url('assets/grain.svg') 0 0 / 320px 320px repeat;
  opacity: .045;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- THE FOLIO ---------------------------------------------------------------
   The NOVAIR bifold wallet as a real 3D object made of flat layers, laid out on an
   880 × 600 grid (the open wallet at 40 units per cm: two 11 × 15 cm halves).
   script.js sets `zoom` on .folio__book so the whole thing fits the screen, which is
   why every size below is a plain px number.

     .folio__book          the whole object — script.js moves the "camera" by transforming this
       .folio__shadow      two soft shadows under it (tight when closed, wide when open)
       .folio__wall        the edges of each half's 5 mm slab: real 3D walls striped as its layers
       .folio__half        the right-hand half: one large zipped pocket
       .folio__leaf        the left-hand half: swings on the spine like a book cover
         .folio__face--cover    its outside (the plain black exterior)
         .folio__face--inside   its inside: passport, card slots, boarding pass, pen
       .folio__strap       closure strap + brass snap; flips away first

   Each half shows one half of the open interior artwork (.folio__spread) with the
   pockets, cards, boarding pass, pen and zip built on top as separate layers so each can
   move. Only transform and opacity are ever animated.
   ------------------------------------------------------------------------------ */
.folio {
  position: absolute;
  inset: 0;
  perspective: 2200px;
  perspective-origin: 50% var(--folio-cy, 40%);
}

/* Black Signature Edition: matte black leather, cream saddle stitching, brass hardware,
   warm grey suede lining. (See references/product-reference.jpg.) */
.folio {
  --img-cover: url('assets/folio-exterior-black.svg');
  --img-strap: url('assets/folio-strap-black.svg');
  --img-base: url('assets/folio-interior-black.svg');
  --stitch: #E8DFC8;
  --brass: #B8956A;
  --brass-light: #E6D2A3;
  --suede: #4A4A4A;
  --suede-light: #5C5A58;
  --suede-dark: #383736;
  --rim-a: #1A1817;
  --rim-b: #0C0B0B;
  --rim-c: #201E1D;
  --rim-d: #0F0E0E;
  /* The slab's edge, face → back: the suede lip, four inner layers each a shade darker with a dark
     seam between, then the outer leather. Used along each wall's depth (20 units = 5 mm). */
  --layers: #7A7670 0 1.6px, #080707 1.6px 2.6px, #615D58 2.6px 5.4px, #080707 5.4px 6.4px, #54504B 6.4px 9.2px,
            #080707 9.2px 10.2px, #47443F 10.2px 13px, #080707 13px 14px, #3B3834 14px 16.6px,
            #050404 16.6px 17.4px, #23211E 17.4px 19.2px, #3A3734 19.2px 20px;
  --shade: #060505;
}

/* A pool of warm camel light on the ink backdrop that widens as the folio opens */
.folio__light {
  position: absolute;
  left: 50%;
  top: var(--folio-cy, 40%);
  width: 150vmin;
  height: 110vmin;
  margin: -55vmin 0 0 -75vmin;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 72%);
  will-change: transform, opacity;
}

.folio__book {
  position: absolute;
  left: 50%;
  top: var(--folio-cy, 40%);
  width: 880px;
  height: 600px;
  margin: -300px 0 0 -440px;
  transform-style: preserve-3d;
  will-change: transform;
}
.folio__book > * { position: absolute; top: 0; }

.folio__shadow { background: rgb(50, 40, 30); border-radius: 30px; will-change: opacity; }   /* warm, like daylight on a cream table */
.folio__shadow--tight { left: 448px; top: 30px; width: 470px; height: 610px; filter: blur(44px); transform: translateZ(-23px); }
.folio__shadow--soft { left: -10px; top: 50px; width: 930px; height: 620px; filter: blur(60px); transform: translateZ(-24px); transform-origin: 100% 50%; will-change: opacity, transform; }

/* Tight contact shadow under the closed 10 mm block: anchors it to the table */
.folio__shadow--closed { left: 452px; top: 14px; width: 444px; height: 600px; border-radius: 22px; filter: blur(14px); transform: translateZ(-23px); opacity: 0; }

.folio__half {
  left: 440px;
  width: 440px;
  height: 600px;
  overflow: hidden;
  border-radius: 0 16px 16px 0;
  transform: translateZ(-1px);
}
.folio__half .folio__spread { left: -440px; }

.folio__leaf {
  left: 0;
  width: 440px;
  height: 600px;
  transform-origin: 100% 50%;               /* the spine */
  transform-style: preserve-3d;
  transform: rotateY(180deg);               /* closed until script.js takes over */
  will-change: transform;
}
.folio__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.folio__face--inside { border-radius: 16px 0 0 16px; }
.folio__face--cover {
  transform: rotateY(180deg) translateZ(20px);   /* the outside of the 5 mm slab: 20 units below the inside face */
  background: var(--img-cover) center / 100% 100% no-repeat;
  border-radius: 5px 16px 16px 5px;
}

/* Darkens a surface as it turns away from the light / sits in the cover's shadow */
.folio__shade {
  position: absolute;
  inset: 0;
  background: var(--shade);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.folio__shade--cast { background: linear-gradient(90deg, rgba(10, 8, 7, .95), rgba(10, 8, 7, .25) 70%, rgba(10, 8, 7, 0)); }
.folio__fold { position: absolute; top: 0; bottom: 0; width: 64px; pointer-events: none; }
.folio__face--inside .folio__fold { right: 0; background: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .14) 35%, rgba(0, 0, 0, 0)); }
.folio__half .folio__fold { left: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .14) 35%, rgba(0, 0, 0, 0)); }
/* The open interior catches its own light: brighter toward the centre, falling off to the edges */
.wl-light {
  inset: 0;
  background:
    radial-gradient(70% 60% at 42% 36%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .18));
  pointer-events: none;
}
.folio__face--cover {                       /* a soft rolled bevel: light catches the upper-left edges, the far edges fall off */
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset 3px 3px 5px rgba(255, 255, 255, .07), inset -3px -3px 6px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .5);
}

.folio__strap {                            /* on the right long edge, its middle (and the snap) at the folio's half height */
  left: 734px;
  top: 262px;                               /* 262 + 76 / 2 = 300: the vertical middle of the 600-unit height */
  width: 160px;                             /* ~3.5 cm on the front; its end meets the right edge at x 880 */
  height: 76px;                             /* ~1.9 cm wide */
  background: var(--img-strap) center / 100% 100% no-repeat;
  transform-origin: 146px 50%;              /* x 880: where it wraps round the edge */
  transform: translateZ(3px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}
/* The strap's run down the right edge, from the cover's face (z +23) to the back cover (z −20) */
.folio__strap-wrap {
  left: 881px; top: 262px; width: 43px; height: 76px;      /* just proud of the edge wall at 880 */
  transform-origin: 0 50%; transform: translateZ(23px) rotateY(90deg);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, .35)),
    linear-gradient(90deg, #1C1B19, #121110);
  box-shadow: inset 0 10px 0 -8.6px rgba(232, 223, 200, .55), inset 0 -10px 0 -8.6px rgba(232, 223, 200, .55);   /* the stitching runs on round the edge */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

/* The open interior: leather rim, suede field, centre crease */
.folio__spread {
  position: absolute;
  top: 0;
  left: 0;
  width: 880px;
  height: 600px;
  background: var(--img-base) 0 0 / 100% 100% no-repeat;
}

/* ---- Interior parts (all positioned by script.js in half-local px) ---- */
.wl { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* a suede pocket flap: lighter rolled top edge, stitched line, shadow it casts */
.wl-flap {
  background:
    radial-gradient(90% 70% at 30% 0%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--suede-light), var(--suede) 16%, var(--suede-dark));
  border-radius: 7px 7px 0 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .18), 0 -9px 14px rgba(0, 0, 0, .5), inset 0 -20px 30px rgba(0, 0, 0, .18);
}
.wl-flap::before { content: ''; position: absolute; left: 11px; right: 9px; top: 10.5px; border-top: 1.6px dashed rgba(0, 0, 0, .55); }
.wl-flap::after { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; border-top: 1.6px dashed var(--stitch); opacity: .9; }
.wl-passport {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 8%),
    radial-gradient(80% 60% at 25% 10%, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #26375C, #1A2847 50%, #111A30);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 -2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
  will-change: transform;
}
.wl-passport__word {
  position: absolute; left: 0; right: 0; top: 36px;
  text-align: center;
  font: 500 22px/1 var(--sans);
  letter-spacing: .22em; text-indent: .22em;
  color: #D4B87C;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 238, 190, .35);   /* embossed gold foil */
}
.wl-passport__crest { position: absolute; left: 50%; top: 80px; width: 46px; height: 46px; margin-left: -23px; border: 2px solid #D4B87C; border-radius: 50%; opacity: .85; box-shadow: 0 -1px 0 rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 238, 190, .3), inset 0 1px 0 rgba(0, 0, 0, .5); }
.wl-passport__crest::after { content: ''; position: absolute; inset: 10px; border: 1.5px solid #D9BE84; border-radius: 50%; opacity: .7; }
.wl-card { border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 -3px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); will-change: transform; }
.wl-card--black { background: linear-gradient(135deg, #343434, #141414 70%, #0F0F0F); }
.wl-card--white { background: linear-gradient(135deg, #FFFFFE, #E4E4E0 60%, #CFCFCB); }
.wl-card--navy { background: linear-gradient(135deg, #2B3242, #151923); }
.wl-card::after { content: ''; position: absolute; left: 14px; top: 9px; width: 34px; height: 8px; border-radius: 2px; background: rgba(216, 190, 132, .8); }
/* Boarding pass in the bottom pocket: only its top strip shows above the flap */
.wl-pass {
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(90deg, #1A2847 0 54px, rgba(0, 0, 0, 0) 54px),
    linear-gradient(180deg, #FBF9F4, #EFEBE2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 -3px 6px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .8);
  will-change: transform, opacity;
}
.wl-pass::before { content: ''; position: absolute; left: 54px; top: 0; bottom: 0; border-left: 2px dashed rgba(26, 40, 71, .45); }   /* the tear-off line */
.wl-pass__title, .wl-pass__route { position: absolute; top: 14px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: #1A2847; }
.wl-pass__title { left: 70px; font-weight: 500; color: rgba(26, 40, 71, .7); }
.wl-pass__route { right: 16px; }

/* Pen sleeve by the spine on the left panel, with the pen and the leather loop that holds it */
.wl-sleeve {
  background: linear-gradient(90deg, #171615, #262523 45%, #1A1917);
  border-radius: 6px;
  box-shadow: 2px 3px 6px rgba(0, 0, 0, .55), inset 1px 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(0, 0, 0, .45);
}
.wl-sleeve::after { content: ''; position: absolute; inset: 5px; border: 1.4px dashed var(--stitch); border-radius: 4px; opacity: .75; }
.wl-pen {
  border-radius: 7px 7px 3px 3px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 64px, #C9A877 64px 68px, rgba(0, 0, 0, 0) 68px),
    linear-gradient(90deg, #0E0E0E, #3A3A3A 40%, #161616 70%, #0B0B0B);
  box-shadow: 2px 3px 5px rgba(0, 0, 0, .55);
  will-change: transform, opacity;
}
.wl-pen::before {                           /* the brass clip */
  content: ''; position: absolute; left: 4px; top: 8px; width: 5px; height: 54px; border-radius: 3px;
  background: linear-gradient(90deg, #6B4A2A, #E6C58A 50%, #8A6A40);
}
.wl-loop {
  border-radius: 8px;
  background: linear-gradient(90deg, #121110, #2A2826 50%, #121110);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.wl-loop::after { content: ''; position: absolute; inset: 6px 5px; border: 1.4px dashed var(--stitch); border-radius: 5px; opacity: .8; }

/* The right panel: one large zipped leather pocket, cream stitching round it, a brass zip across the top */
.wl-pocket {
  border-radius: 12px 12px 8px 8px;
  background:
    radial-gradient(90% 70% at 25% 15%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #201F1D, #141312 55%, #0E0D0C);
  box-shadow: 0 -2px 0 rgba(255, 255, 255, .06), 0 6px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.wl-pocket::after { content: ''; position: absolute; inset: 11px; border: 1.8px dashed var(--stitch); border-radius: 8px; opacity: .9; }
.wl-pocket::before {                        /* the stitched seam just under the zip */
  content: ''; position: absolute; left: 18px; right: 18px; top: 66px; border-top: 1.6px dashed var(--stitch); opacity: .55;
}
.wl-ziptrack {                              /* closed zip: dark tape, interlocked brass teeth */
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #E0C48E 0 1.5px, var(--brass) 1.5px 3.5px, #3A2F22 3.5px 5px);
  box-shadow: 0 0 0 3px #0B0B0A, 0 1px 3px 3px rgba(0, 0, 0, .5);
}
.wl-zipgap {                                /* the open part: teeth parted, suede lining between them */
  border-radius: 14px / 22px;               /* the parted teeth bow apart in the middle of the opening */
  background:
    repeating-linear-gradient(90deg, #E0C48E 0 1.5px, var(--brass) 1.5px 3.5px, #3A2F22 3.5px 5px) 0 0 / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, #E0C48E 0 1.5px, var(--brass) 1.5px 3.5px, #3A2F22 3.5px 5px) 0 100% / 100% 5px no-repeat,
    linear-gradient(180deg, var(--suede-dark), var(--suede) 45%, var(--suede-light));
  box-shadow: inset 0 9px 12px rgba(0, 0, 0, .7), inset 0 -2px 4px rgba(0, 0, 0, .4), 0 0 0 3px #0B0B0A;
  clip-path: inset(0 100% 0 0);             /* script.js runs it open */
}
.wl-pull {                                  /* the slider and its tab, hanging just below the teeth */
  border-radius: 4px;
  background: linear-gradient(160deg, #E6C58A, var(--brass) 45%, #6B4A2A);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 245, 220, .5), inset 0 0 0 1px rgba(90, 65, 35, .6);
  will-change: transform;
}
.wl-pull::after {
  content: ''; position: absolute; left: 9px; top: 12px; width: 12px; height: 26px; border-radius: 3px 3px 6px 6px;
  background: linear-gradient(160deg, #E6C58A, var(--brass) 50%, #6B4A2A);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(90, 65, 35, .6);
}
.wl-glint { background: linear-gradient(90deg, rgba(255, 250, 235, 0), rgba(255, 250, 235, .55), rgba(255, 250, 235, 0)); opacity: 0; pointer-events: none; }

/* ---- Stage 4: the open wallet stands up; stage 5: it becomes the front of a file box ----
   .folio__body holds everything that stands (both panels, strap, the file box); it turns on its
   bottom edge. The table shadows stay outside it. */
.folio__body { left: 0; top: 0; width: 880px; height: 600px; transform-style: preserve-3d; transform-origin: 50% 100%; will-change: transform; }
:where(.folio__body > *) { position: absolute; top: 0; }   /* zero specificity: a child's own top (the strap's 262) always wins */
.folio__contact {                           /* the standing wallet's shadow on the table */
  left: 10px; top: 470px; width: 860px; height: 170px;
  background: radial-gradient(50% 50% at 50% 60%, rgba(40, 32, 24, .85), rgba(40, 32, 24, 0) 100%);
  filter: blur(18px);
  transform: translateZ(-23px);
  opacity: 0;
  will-change: opacity;
}

/* The file box: four panels standing behind the wallet, papers between them (script.js moves them) */
.box { left: 0; top: 0; width: 880px; height: 600px; transform-style: preserve-3d; pointer-events: none; visibility: hidden; }
.box > * { position: absolute; transform-origin: 50% 100%; }   /* 3D-transformed while visible, so the browser layers them anyway */
.box-panel__face {
  position: absolute; left: 0; right: 0; bottom: 0; top: 40px;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0 2px, rgba(255, 255, 255, 0) 2px),          /* cut top edge catching the light */
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, .55) 34%, rgba(0, 0, 0, .8)),   /* shade from the panel in front */
    radial-gradient(80% 50% at 30% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #22201E, #161514 50%, #0C0B0A);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
}
.box-panel__face::after {                   /* cream stitching round the top and sides */
  content: ''; position: absolute; left: 12px; right: 12px; top: 11px; bottom: 0;
  border: 1.8px dashed var(--stitch); border-bottom: 0; border-radius: 6px 6px 0 0; opacity: .85;
}
.box-tab {                                  /* leather index tab on the panel's top edge */
  position: absolute; top: 2px; width: 172px; height: 42px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, #2A2826, #171615 70%, #121110);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -2px 6px rgba(0, 0, 0, .35);
}
.box-tab::after { content: ''; position: absolute; inset: 6px 7px 0; border: 1.5px dashed var(--stitch); border-bottom: 0; border-radius: 5px 5px 0 0; opacity: .85; }
.box-tab__label {
  position: absolute; left: 0; right: 0; top: 15px;
  text-align: center; font: 600 13px/1 var(--sans); letter-spacing: .24em; text-indent: .24em;
  text-transform: uppercase; color: var(--stitch);
}
/* V folds between neighbouring panels: each 100 × 100 element is cut to a triangle and laid onto
   three points in 3D by script.js (matrix3d), so the local axes run along the fold's edges.
   *-a: corner at the crease top, top edge (local x) running out to the panel.
   *-b: left edge (local y) is the crease itself — that's where the shadow sits. */
.box > .box-fold {
  left: 0; top: 0; width: 100px; height: 100px;
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
.box-fold--front-a { background: radial-gradient(circle at 0 0, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(232, 223, 200, .5) 0 .5px, rgba(0, 0, 0, 0) .5px), #23211E; }
.box-fold--front-b { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%), #1E1C1A; }
.box-fold--back-a  { background: radial-gradient(circle at 0 0, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(232, 223, 200, .4) 0 .5px, rgba(0, 0, 0, 0) .5px), #121110; }
.box-fold--back-b  { background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 45%), #0E0D0C; }

.box-doc { border-radius: 4px 4px 0 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 -3px 8px rgba(0, 0, 0, .3); visibility: hidden; }
.box-doc__heading { position: absolute; left: 24px; top: 14px; font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: rgba(23, 23, 23, .78); }
.box-doc--sheet, .box-doc--form { background: linear-gradient(180deg, #FAF8F3, #ECE8DF); }
.box-doc--sheet::after, .box-doc--form::after {          /* typed lines */
  content: ''; position: absolute; left: 24px; right: 30%; top: 36px; height: 40px;
  background: repeating-linear-gradient(rgba(23, 23, 23, 0) 0 7px, rgba(23, 23, 23, .2) 7px 9px);
}
.box-doc--form::before { content: ''; position: absolute; right: 22px; top: 10px; width: 46px; height: 16px; border-radius: 2px; background: #C9AE80; }   /* a stamp */
.box-doc--pass {
  background:
    linear-gradient(90deg, #1A2847 0 64px, rgba(0, 0, 0, 0) 64px),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0 120px, #B79A68 120px 168px, rgba(0, 0, 0, 0) 168px),
    linear-gradient(180deg, #F6F1E4, #E9E2D1);
}
.box-doc--pass::before {                    /* barcode */
  content: ''; position: absolute; right: 26px; top: 10px; width: 80px; height: 22px;
  background: repeating-linear-gradient(90deg, #222 0 2px, rgba(0, 0, 0, 0) 2px 4px, #222 4px 5px, rgba(0, 0, 0, 0) 5px 8px);
}
.box-doc--pass::after { content: 'LHR  ✈  JFK'; position: absolute; left: 184px; top: 14px; font: 600 12px/1 var(--sans); letter-spacing: .14em; white-space: nowrap; color: #1A2847; }
.box-doc--envelope { border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #D8C29A, #C4A979); }
.box-doc--envelope::after { content: ''; position: absolute; left: 34px; top: 12px; width: 120px; height: 30px; background: #F7F4EC; }
.box-doc--slip {                            /* till receipt: torn top edge */
  border-radius: 0;
  background: linear-gradient(180deg, #FFFFFD, #EDEBE5);
  clip-path: polygon(0 6px, 10% 0, 20% 6px, 30% 0, 40% 6px, 50% 0, 60% 6px, 70% 0, 80% 6px, 90% 0, 100% 6px, 100% 100%, 0 100%);
}
.box-doc--slip::after { content: ''; position: absolute; left: 10px; right: 12px; top: 16px; height: 34px; background: repeating-linear-gradient(rgba(23, 23, 23, 0) 0 5px, rgba(23, 23, 23, .2) 5px 7px); }

/* The wallet's thickness: the four edges of each half's 5 mm slab, as real 3D walls. Each wall's
   front points outward (backface hidden), so only edges turned toward the camera are drawn:
   the right and bottom of the closed block, the bottom of the open spread, the top once it stands.
   Back half walls live in .folio__body (x 440–880); leaf walls live in .folio__leaf (x 0–440) and
   swing with the cover, so closed they stack on top of the back half's. */
.folio__wall { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.folio__body > .folio__wall--bottom, .folio__leaf > .folio__wall--bottom {
  top: 600px; width: 440px; height: 20px;
  transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(180deg, var(--layers));
}
.folio__body > .folio__wall--top, .folio__leaf > .folio__wall--top {
  top: -20px; width: 440px; height: 20px;
  transform-origin: 50% 100%; transform: rotateX(90deg);
  background: linear-gradient(0deg, var(--layers));
}
.folio__body > .folio__wall--bottom, .folio__body > .folio__wall--top { left: 440px; }
.folio__leaf > .folio__wall--bottom, .folio__leaf > .folio__wall--top { left: 0; }
.folio__body > .folio__wall--right {
  left: 880px; top: 0; width: 20px; height: 600px;
  transform-origin: 0 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, var(--layers));
}
.folio__leaf > .folio__wall--left {
  left: -20px; top: 0; width: 20px; height: 600px;
  transform-origin: 100% 50%; transform: rotateY(-90deg);
  background: linear-gradient(270deg, var(--layers));
}

.stage__fallback {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 90%;
  height: 62%;
  object-fit: contain;
}

/* Captions: one per beat, each anchored to a different corner of the stage; script.js turns
   the current one on and they cross-fade over 0.4s */
.stage__captions { position: absolute; inset: 0; pointer-events: none; }
.caption {
  position: absolute;
  max-width: 420px;
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #171717;                           /* Carbon: the captions sit on the cream studio */
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .4s ease, transform .4s ease;
  will-change: opacity, transform;
}
.caption.is-on { opacity: 1; transform: none; }
.caption--bl { left: 48px; bottom: 48px; text-align: left; }
.caption--tl { left: 48px; top: 112px; text-align: left; }   /* top pair sits below the fixed top bar */
.caption--tr { right: 48px; top: 112px; text-align: right; }
.caption--br { right: 48px; bottom: 48px; text-align: right; }
@media (max-width: 719px) {
  .caption { max-width: 280px; font-size: 20px; }
  .caption--bl, .caption--tl { left: 24px; }
  .caption--tr, .caption--br { right: 24px; }
  .caption--bl, .caption--br { bottom: 24px; }
  .caption--tl, .caption--tr { top: 76px; }
}
/* Without JS there is no scrubbing, so just show the first caption */
html:not(.js) .caption:first-child { opacity: 1; transform: none; }

/* A5 → A4 progress rail */
.stage__progress {
  position: absolute;
  opacity: 0;                     /* script.js shows it once the folio is on stage */
  will-change: opacity;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  color: rgba(23, 23, 23, .6);
}
@media (max-width: 699px) {
  .stage__progress { display: none; }     /* no spare width beside the open folio on phones */
}
.stage__progress i {
  position: relative;
  width: 1px;
  height: clamp(80px, 16vh, 140px);
  background: rgba(23, 23, 23, .2);
}
.stage__progress b {
  position: absolute;
  inset: 0;
  background: #171717;
  transform: scaleY(0);
  transform-origin: top;
}

/* ==========================================================================
   ONE SCREEN PER SECTION — each major section fills the viewport with its content
   centred, breathing room top and bottom; on short screens it simply grows.
   ========================================================================== */
.screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: clamp(60px, 10vh, 120px);
  padding-bottom: clamp(60px, 10vh, 120px);
}
@media (min-width: 1025px) and (min-height: 720px) {
  .screen { max-height: 100vh; }           /* desktop: one clean screen per section */
}

/* ==========================================================================
   2b. THE PROBLEM — portrait photograph left, the argument right, on the cream ground
   ========================================================================== */
.problem { padding-left: 24px; padding-right: 24px; background: #F2EFE8; color: #171717; }
.problem__inner { display: grid; gap: 40px; width: 100%; max-width: var(--max); margin-inline: auto; }
.problem__figure { margin: 0; }
.problem__image {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}
.problem__text { align-self: center; }
.problem__eyebrow {
  display: block;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A68A5B;                           /* bronze */
}
.problem-headline {
  max-width: 760px;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(32px, 3.8vw, 56px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #171717;
}
.problem-headline em { font-style: italic; color: inherit; }
.problem-body { max-width: 480px; margin-top: 40px; font-size: 17px; line-height: 1.6; color: rgba(23, 23, 23, .65); }
.problem-divider { width: 48px; height: 2px; margin: 48px 0 32px; background: #A68A5B; }
.problem-closer {
  max-width: 520px;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'opsz' 72;
  font-size: 20px;
  line-height: 1.35;
  color: #171717;
}
.problem-closer strong {                    /* the brand, set as a mark rather than bold */
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: .78em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A68A5B;                           /* bronze, like the eyebrow and the divider */
}

@media (min-width: 768px) {
  .problem { padding-left: 48px; padding-right: 48px; }
  .problem__inner { grid-template-columns: 50fr 50fr; gap: 60px; align-items: center; }
  .problem__image { max-height: 80vh; aspect-ratio: 3 / 4; height: auto; }   /* poster-sized: fills its column, never taller than 80vh */
  .problem__text { padding-left: 24px; }
  .problem-body { font-size: 20px; }
  .problem-closer { font-size: 26px; }
}
@media (min-width: 1025px) {
  .problem { padding-left: 80px; padding-right: 80px; }
  .problem__inner { grid-template-columns: 38vw minmax(0, 1fr); gap: 80px; }   /* the photo is 38% of the screen's width; the text takes the rest */
  .problem__text { padding-left: 40px; }
  .problem__image { max-height: min(80vh, calc(100vh - 2 * clamp(60px, 10vh, 120px))); }   /* dominant, but still one screen */
}

/* Scroll reveal: the figure slides in from the left, the text rises a beat later */
.js [data-reveal] { opacity: 0; transition: opacity .9s var(--ease), transform .9s var(--ease); }   /* no permanent layer per section photo: the browser layers them only while they animate */
.js .problem__figure[data-reveal] { transform: translateX(-20px); }
.js .problem__text[data-reveal] { transform: translateY(16px); }
/* The revealed state. `html.js` gives it one more point of specificity than any section's
   start-offset rule (.js .solution-content[data-reveal] etc.), wherever those sit in this file —
   otherwise a later start rule wins the tie and the element stays shifted for good. */
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   2c. THE SOLUTION — the argument left, the product right, on the cream ground
   ========================================================================== */
.solution {
  display: flex;
  flex-direction: column;
  justify-content: center;                  /* takes only the height it needs; its content is centred within that */
  padding: clamp(80px, 12vh, 140px) 24px clamp(40px, 6vh, 70px);   /* tighter below, so the lifestyle pair reads as its continuation */
  background: #E5E1D7;                      /* a shade cooler than the problem section's cream: a quiet tonal step */
  color: #171717;
}
.solution__inner { display: grid; gap: 40px; width: 100%; max-width: 1280px; margin-inline: auto; }
.solution__figure { order: -1; margin: 0; }               /* image first on phones */
.solution__image {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}
.solution-content { align-self: center; }
.solution .eyebrow {
  display: block;
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A68A5B;
}
.solution-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #171717;
}
.benefits { margin-top: 72px; }
.benefit {
  display: grid;
  grid-template-columns: 38fr 62fr;
  gap: 32px;
  padding: 22px 0;
  border-top: 1px solid rgba(23, 23, 23, .1);
}
.benefit:last-child { border-bottom: 1px solid rgba(23, 23, 23, .1); }
.benefit-label { padding-top: 2px; font-size: 13px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: #A68A5B; }
.benefit-copy { font-size: 15px; line-height: 1.6; color: rgba(23, 23, 23, .75); }

@media (min-width: 768px) {
  .solution { padding-left: 48px; padding-right: 48px; }
  .solution__inner { grid-template-columns: minmax(0, 1fr) 34vw; column-gap: 8%; align-items: center; }   /* the photo is 34% of the screen's width; the text takes the rest */
  .solution__figure { order: 0; }
  .solution__image { max-height: 72vh; aspect-ratio: 3 / 4; height: auto; width: 100%; }
}
@media (min-width: 1025px) {
  .solution { padding-left: 80px; padding-right: 80px; }
}
@media (max-width: 479px) {
  .benefit { grid-template-columns: 1fr; gap: 8px; }
}

/* Scroll reveal: text slides in from the left, the product from the right, the benefits follow */
.js .solution-content[data-reveal] { transform: translateX(-20px); transition-duration: .6s; transition-timing-function: ease-out; }
.js .solution__figure[data-reveal] { transform: translateX(20px); transition-duration: .6s; transition-timing-function: ease-out; }
.js .benefit[data-reveal] { transform: translateY(10px); transition-duration: .5s; }

/* ==========================================================================
   2d. LIFESTYLE — headline, then four portraits in a 2 × 2 grid on the greige ground.
   Taller than a screen by nature, so it is the one section that is not a .screen.
   ========================================================================== */
.lifestyle { padding: clamp(60px, 8vh, 100px) 24px; background: #EFEDE6; color: #171717; }   /* a lighter, warmer cream than the solution's greige */
.lifestyle-container { width: 100%; max-width: 1280px; margin-inline: auto; }
.lifestyle-header { display: flex; flex-direction: column; gap: 20px; margin-bottom: 56px; }
.lifestyle-tagline {
  max-width: 360px;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: rgba(23, 23, 23, .7);
}
.lifestyle-tagline em { font-style: italic; }
.lifestyle-headline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(32px, 8vw, 44px);
  line-height: 1;
  letter-spacing: -.015em;
  color: #171717;
}
.lifestyle-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.lifestyle-img {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}
@media (min-width: 768px) {
  .lifestyle { padding-left: 48px; padding-right: 48px; }
  .lifestyle-header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .lifestyle-headline { font-size: clamp(42px, 5.5vw, 76px); }
  .lifestyle-tagline { align-self: flex-end; text-align: right; }
  .lifestyle-grid { grid-template-columns: 1fr 1fr; }
  .lifestyle-img { aspect-ratio: 3 / 4; height: auto; }
}
@media (min-width: 1025px) {
  .lifestyle { padding-left: 80px; padding-right: 80px; }
}
/* reveal: headline first, then the four portraits in reading order, 120ms apart */
.js .lifestyle-headline[data-reveal], .js .lifestyle-tagline[data-reveal] { transform: translateY(10px); transition-duration: .6s; }
.js .lifestyle-img[data-reveal] { transform: translateY(20px); transition-duration: .7s; }

/* ==========================================================================
   5. EMAIL CAPTURE — the open folio left, "Something is coming. Be first." and the form right,
   on Carbon
   ========================================================================== */
.capture { padding-left: 24px; padding-right: 24px; background: #171717; color: #F2EFE8; }
.capture__inner { display: grid; gap: 40px; width: 100%; max-width: 1280px; margin-inline: auto; align-items: center; }
.capture__figure { margin: 0; }
.capture-img {
  display: block;
  width: 100%;
  height: auto;                             /* let the aspect ratio win over the intrinsic height attribute */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 57%;                 /* the photo is portrait: centre the square on the folio and papers, hands in frame */
  border-radius: 2px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}
.capture-headline {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(42px, 4.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: #F2EFE8;
}
.capture-headline em { font-style: italic; color: inherit; }
.capture-body { max-width: 480px; margin: 0 0 48px; font-size: 15px; line-height: 1.6; color: rgba(242, 239, 232, .75); }
.capture-form { max-width: 540px; margin: 0; }
.capture-input {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 20px 24px;
  background: transparent;
  border: 1px solid rgba(242, 239, 232, .25);
  border-radius: 2px;
  color: #F2EFE8;
  font-family: var(--sans);
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s;
}
.capture-input::placeholder { color: rgba(242, 239, 232, .5); }
.capture-input:focus { outline: none; border-color: #A68A5B; }
.capture-input[aria-invalid='true'] { border-color: #A68A5B; }
.capture-cta {
  display: block;
  width: 100%;
  padding: 22px 32px;
  border: 0;
  border-radius: 2px;
  background: #F2EFE8;
  color: #171717;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, opacity .25s;
}
.capture-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.capture-cta[disabled] { opacity: .65; cursor: progress; transform: none; box-shadow: none; }
.capture-note { min-height: 20px; margin: 12px 0 0; font-size: 13px; color: #C8A87C; }
.capture-done { margin: 0; max-width: 540px; font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; color: #F2EFE8; }
.capture-done em { display: block; margin-top: 6px; font-size: .62em; color: #C8A87C; }
.js .capture__figure[data-reveal] { transform: translateX(-20px); transition-duration: .7s; }
.js .capture-content[data-reveal] { transform: translateY(16px); transition-duration: .7s; }
@media (min-width: 768px) {
  .capture { padding-left: 48px; padding-right: 48px; }
  .capture__inner { grid-template-columns: 1fr 1fr; gap: 64px; }
  .capture-body { font-size: 17px; }
}
@media (min-width: 1025px) {
  .capture { padding-left: 80px; padding-right: 80px; }
  .capture__inner { gap: 96px; }
  .capture-img { max-height: calc(100vh - 2 * clamp(60px, 10vh, 120px)); max-width: calc(100vh - 2 * clamp(60px, 10vh, 120px)); margin-inline: auto; }
}

/* ==========================================================================
   6. FOOTER — one line: copyright left, legal links right, a light cream slab to close the page
   ========================================================================== */
.footer { padding: 32px 24px; background: #EFEDE6; color: rgba(23, 23, 23, .6); border-top: 1px solid rgba(23, 23, 23, .06); }
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1280px;
  margin-inline: auto;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.footer-content nav { display: flex; gap: 28px; }
.footer-content a { color: rgba(23, 23, 23, .7); transition: color .25s; }
.footer-content a:hover { color: #171717; }
.footer-content a:focus-visible { outline-color: #171717; }   /* the camel ring is too faint on the cream footer */
@media (min-width: 768px) {
  .footer { padding: 32px 48px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Clearance for the fixed top bar ----------
   Every section below the stage starts at least 80px down, so its first line never sits under
   the bar when you land on it (a jump to the sign-up, or reading from the top). Sections that
   already had more keep it. */
.screen { padding-top: max(80px, clamp(60px, 10vh, 120px)); }
.lifestyle { padding-top: max(80px, clamp(60px, 8vh, 100px)); }

/* ---------- Waitlist modal: a framed copy of the "Something is coming" section ----------
   No flash: the container only switches visibility; the overlay and the panel fade their OWN opacity.
   (A fading ancestor would stop the overlay's backdrop blur from working until the fade ended, so the
   page showed sharp, then snapped to blurred.) Field, button, note and "on the list" reuse the
   section's own .capture-* styles. */
.waitlist-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  visibility: hidden; pointer-events: none;
  transition: visibility .3s ease;
}
.waitlist-modal.active { visibility: visible; pointer-events: auto; }
.waitlist-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .3s ease;
}
.waitlist-modal-content {
  position: relative;
  width: 100%; max-width: 900px;
  max-height: calc(100vh - 48px); max-height: calc(100svh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 2px;
  background: #171717; color: #F2EFE8;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.waitlist-modal.active .waitlist-modal-overlay { opacity: 1; }
.waitlist-modal.active .waitlist-modal-content { opacity: 1; transform: none; }
.waitlist-modal-content:focus { outline: none; }
.waitlist-modal-close {                     /* cream circle, Carbon × */
  position: absolute; top: 16px; right: 16px; z-index: 1;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: #F2EFE8; color: #171717;
  font: 300 24px/1 var(--sans);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .2s ease;
}
.waitlist-modal-close:hover { transform: scale(1.06); }
.waitlist-modal-close:focus-visible { outline: 1.5px solid #F2EFE8; outline-offset: 3px; }
.waitlist-modal-grid { display: grid; gap: 28px; padding: 24px; align-items: center; }
.waitlist-modal-image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 40%; border-radius: 2px; }   /* the open folio centred in the square, hands in view */
.waitlist-modal-title {                     /* the section's headline, scaled for the frame */
  margin: 0 0 20px;
  font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 144;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.015em;
  color: #F2EFE8;
}
.waitlist-modal-title em { font-style: italic; color: inherit; }
.waitlist-modal-body { margin: 0 0 28px; font-size: 15px; line-height: 1.6; color: rgba(242, 239, 232, .75); }
.waitlist-modal .capture-done { font-size: clamp(24px, 2.6vw, 30px); }
@media (min-width: 768px) {
  .waitlist-modal-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; }
  .waitlist-modal-text { padding-right: 8px; }
}
@media (max-width: 767px) {
  .waitlist-modal { padding: 12px; }
  .waitlist-modal-content { max-height: calc(100vh - 24px); max-height: calc(100svh - 24px); }
  /* A small accent: the photo at its own proportions (no crop, no stretch), centred, 180px tall where there's
     room and shorter on the smallest screens so the whole modal fits without scrolling. Narrow enough to sit
     clear of the close button, so it starts at the panel's 24px padding. */
  .waitlist-modal-grid { gap: 24px; }
  .waitlist-modal-image { display: flex; justify-content: center; padding: 0; }
  .waitlist-modal-image img { width: auto; max-width: 100%; height: clamp(130px, calc(100svh - 410px), 180px); aspect-ratio: auto; border-radius: 12px; }
  .waitlist-modal-title { margin-bottom: 12px; }
  .waitlist-modal-body { margin-bottom: 20px; }
  .waitlist-modal .capture-note { min-height: 0; }
  .waitlist-modal .capture-note:empty { margin: 0; }   /* no reserved gap under the button until there's a message */
}
@media (prefers-reduced-motion: reduce) {
  .waitlist-modal, .waitlist-modal-overlay, .waitlist-modal-content { transition: none; }
}

/* ---------- Leather realism ----------
   Every leather surface gets the same three things real leather has under light:
   1. Pebble grain — assets/leather-grain.svg: an SVG feTurbulence relief lit from the top left
      (feDiffuseLighting), so each pebble has a lit shoulder and a shadowed side, plus faint mottling.
   2. A soft sheen and a highlight along the top-left edge, where the rolled edge catches the light.
   3. Stacked shadows: a crisp edge line, a short contact shadow, a wider ambient one.
   The suede linings and the cream stitching are left as they are. */
.folio {
  --grain: url('assets/leather-grain.webp') 0 0 / 230px 230px;   /* fine grain, like the Black Signature PU — pre-rendered from leather-grain.svg so no live SVG filter is ever drawn */
  --sheen: radial-gradient(130% 90% at 16% 6%, rgba(255, 244, 226, .09), rgba(255, 255, 255, 0) 52%);
  --edge-light: linear-gradient(135deg, rgba(255, 240, 220, .13) 0%, rgba(255, 240, 220, .04) 9%, rgba(255, 255, 255, 0) 24%);
}
.folio__face--cover {
  background: var(--grain), var(--sheen), var(--edge-light), var(--img-cover) center / 100% 100% no-repeat;
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 244, 226, .16),          /* the rolled top-left edge catching the light */
    inset 4px 4px 7px rgba(255, 255, 255, .05),
    inset -2px -2px 0 rgba(0, 0, 0, .55),                  /* the far edges turning away */
    inset -6px -6px 12px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.wl-pocket {
  background:
    var(--grain), var(--sheen), var(--edge-light),
    linear-gradient(160deg, #22201E, #151413 55%, #0E0D0C);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 244, 226, .14),
    inset -1.5px -1.5px 0 rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    0 1px 1px rgba(0, 0, 0, .55),                           /* crisp contact */
    0 4px 8px rgba(0, 0, 0, .38),                           /* short shadow */
    0 14px 26px rgba(0, 0, 0, .28);                         /* ambient */
}
.wl-sleeve {
  background: var(--grain), var(--edge-light), linear-gradient(90deg, #171615, #282624 45%, #1A1917);
  box-shadow: inset 1px 1px 0 rgba(255, 244, 226, .14), inset -1px -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .5), 2px 4px 8px rgba(0, 0, 0, .45);
}
.wl-loop {
  background: var(--grain), var(--edge-light), linear-gradient(90deg, #121110, #2C2A27 50%, #121110);
  box-shadow: inset 1px 1px 0 rgba(255, 244, 226, .16), inset -1px -1px 0 rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .55), 0 4px 8px rgba(0, 0, 0, .45);
}
.box-panel__face {
  background:
    linear-gradient(180deg, rgba(255, 244, 226, .16) 0 2px, rgba(255, 255, 255, 0) 2px),           /* cut top edge catching the light */
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, .55) 34%, rgba(0, 0, 0, .8)),   /* shade from the panel in front */
    var(--grain), var(--sheen), var(--edge-light),
    linear-gradient(180deg, #23211F, #171615 50%, #0C0B0A);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 244, 226, .12), inset -1.5px 0 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .7);
}
.box-tab {
  background: var(--grain), var(--edge-light), linear-gradient(180deg, #2B2927, #181716 70%, #121110);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 244, 226, .18), inset -1px 0 0 rgba(0, 0, 0, .5), 0 -1px 1px rgba(0, 0, 0, .4), 0 -3px 8px rgba(0, 0, 0, .35);
}
.box-fold--front-a { background: radial-gradient(circle at 0 0, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(232, 223, 200, .5) 0 .5px, rgba(0, 0, 0, 0) .5px), url('assets/leather-grain.webp') 0 0 / 50px 50px, #23211E; }
.box-fold--front-b { background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%), url('assets/leather-grain.webp') 0 0 / 50px 50px, #1E1C1A; }
.box-fold--back-a  { background: radial-gradient(circle at 0 0, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 60%), linear-gradient(180deg, rgba(232, 223, 200, .4) 0 .5px, rgba(0, 0, 0, 0) .5px), url('assets/leather-grain.webp') 0 0 / 50px 50px, #121110; }
.box-fold--back-b  { background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 45%), url('assets/leather-grain.webp') 0 0 / 50px 50px, #0E0D0C; }

/* Short desktop windows (e.g. a laptop browser with toolbars): fit the hero's headline, intro and form
   between the top bar and the scroll hint instead of running past them. */
@media (min-width: 960px) and (max-height: 760px) {
  .hero { padding-top: 84px; padding-bottom: 84px; }
  .hero__title { font-size: clamp(40px, 8.2vh, 72px); }
  .hero__lede { margin-top: 14px; font-size: 15px; line-height: 1.5; }
  .signup { margin-top: 22px; }
  .signup__input, .btn { height: 50px; min-height: 50px; }
}

/* ==========================================================================
   RESERVATION + THANKS PAGES (reservation.html, thanks.html)
   Both on the landing page's cream ground: Carbon type, bronze italic accents.
   ========================================================================== */
body.page-light { background: #F2EFE8; color: #171717; }
.top-bar--light .brand-mark { color: #171717; text-shadow: none; }   /* the logo on a cream page, scrolled or not */

/* ---- Reservation (reservation.html) — the landing page's palette: Paper cream ground, Carbon type, Bronze
   italic accents, Soft grey for secondary text, a deeper cream for the offer card. Brand kit fonts: Playfair
   Display for the headline and the italic accents, Inter for body and UI. ---- */
body.page-reserve {
  --rv-carbon: #171717; --rv-paper: #F2EFE8; --rv-card: #E8E4D9; --rv-bronze: #A68A5B; --rv-grey: #4A4642;
  --rv-line: rgba(166, 138, 91, .2);        /* bronze hairline, 20% */
  --rv-rule: rgba(166, 138, 91, .45);       /* a firmer bronze hairline: photo frame, pills */
  --rv-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rv-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  background: var(--rv-paper); color: var(--rv-carbon); font-family: var(--rv-sans);
}
html:has(body.page-reserve) { scroll-padding-top: 80px; }   /* keyboard focus never lands under the sticky header */
.rv { width: 100%; max-width: 640px; margin-inline: auto; padding: 0 20px 72px; }
/* Header: the NOVAIR wordmark left, membership status right — full width, like the landing page's top bar.
   Sticky, on the page's own cream, so the wordmark stays in view all the way down. */
.rv-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 0 36px; padding: 24px 20px;
  background: var(--rv-paper);
}
.rv-wordmark { font-family: var(--rv-sans); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: .28em; text-decoration: none; color: var(--rv-carbon); }
.rv-wordmark:focus-visible { outline: 1.5px solid var(--rv-carbon); outline-offset: 4px; }
.rv-status {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--rv-carbon);
}
.rv-status strong { font-weight: 700; }
.rv-status__icon { width: 13px; height: 13px; flex: none; }

.rv-hero { display: flex; flex-direction: column-reverse; gap: 28px; margin-bottom: 28px; }   /* phones: image on top */
.rv-title { margin: 0 0 14px; font-family: var(--rv-serif); font-weight: 400; font-size: clamp(36px, 9vw, 48px); line-height: 1.08; letter-spacing: -.01em; color: var(--rv-carbon); }
.rv-title em { font-style: italic; color: var(--rv-bronze); }
.rv-sub { margin: 0 0 20px; font-size: 16px; font-weight: 500; color: var(--rv-carbon); }
.rv-body { max-width: 34em; margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--rv-carbon); }
.rv-body:last-child { margin-bottom: 0; }
.rv-media {                                /* the hero photo: its frame takes the photo's own proportions, so cover crops nothing */
  position: relative; margin: 0;
  aspect-ratio: 1147 / 1372; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--rv-rule);
  background: var(--rv-card);
  box-shadow: 0 28px 60px rgba(23, 23, 23, .14), 0 8px 18px rgba(23, 23, 23, .07);   /* soft lift off the cream */
}
.rv-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.rv-card {
  margin-bottom: 14px; padding: 22px 18px 18px;
  border-radius: 16px; border: 1px solid var(--rv-line);
  position: relative;                       /* paints above the photo's shadow */
  background: var(--rv-card);
  box-shadow: 0 18px 40px rgba(23, 23, 23, .05);
}
.rv-card__top { display: grid; grid-template-columns: 1fr; align-items: center; column-gap: 16px; row-gap: 8px; margin-bottom: 14px; }
/* "Pay $1 | Save $50": Inter for the words, Playfair Display italic bronze for the amounts, a thin bronze rule between */
.rv-card__title {
  display: flex; align-items: center; flex-wrap: wrap;
  margin: 0; font-family: var(--rv-sans); font-weight: 400; font-size: 16px; line-height: 1.2; letter-spacing: 0;
  color: var(--rv-carbon);
}
.rv-card__title em {
  margin-left: .28em;
  font-family: var(--rv-serif); font-style: italic; font-weight: 400; font-size: 1.12em;   /* optically level with the Inter beside it */
  font-variant-numeric: lining-nums; color: var(--rv-bronze);
}
.rv-card__divider { display: inline-block; width: 0; height: 1.05em; margin: 0 .7em; border-left: 1px solid var(--rv-bronze); opacity: .6; }
.rv-card__price { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 700; color: var(--rv-carbon); }
.rv-card__price span { display: block; margin-top: 2px; font-family: var(--rv-serif); font-style: italic; font-weight: 400; font-size: 14px; font-variant-numeric: lining-nums; color: var(--rv-bronze); }
.rv-card__body { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--rv-grey); }

.page-reserve .reserve__form { max-width: none; }
.page-reserve .reserve__input {
  display: block; width: 100%; margin-bottom: 12px; padding: 16px 20px;
  background: var(--rv-paper); border: 1px solid rgba(23, 23, 23, .52); border-radius: 999px;
  color: var(--rv-carbon); font-family: var(--rv-sans); font-size: 16px;
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
.page-reserve .reserve__input::placeholder { color: var(--rv-grey); }
.page-reserve .reserve__input:focus { outline: none; border-color: var(--rv-carbon); box-shadow: 0 0 0 1px var(--rv-carbon); }
.page-reserve .reserve__input[aria-invalid='true'] { border-color: var(--rv-bronze); box-shadow: 0 0 0 1px var(--rv-bronze); }
.page-reserve .reserve__input[aria-invalid='true']:focus { box-shadow: 0 0 0 2px var(--rv-carbon); }   /* still shows focus while flagged */
/* RESERVE NOW: the one Carbon block on the page, so it is the first thing the eye finds; bronze on hover */
.page-reserve .reserve__cta {
  display: block; width: 100%; padding: 17px 28px; border: 0; border-radius: 999px;
  background: var(--rv-carbon); color: var(--rv-paper);
  font-family: var(--rv-sans); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(23, 23, 23, .16);
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s;
}
.page-reserve .reserve__cta span { margin-right: 6px; }
@media (hover: hover) {                    /* not on touch, where a tap would leave it stuck in the hover colour */
  .page-reserve .reserve__cta:hover { transform: translateY(-1px); background: var(--rv-bronze); box-shadow: 0 14px 30px rgba(166, 138, 91, .34); }
}
.page-reserve .reserve__cta:focus-visible { outline: 2px solid var(--rv-carbon); outline-offset: 3px; }
.page-reserve .reserve__cta[disabled] { opacity: .65; cursor: progress; transform: none; background: var(--rv-carbon); box-shadow: none; }
.page-reserve .reserve__note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--rv-grey); }
.page-reserve .reserve__note:empty { margin: 0; }   /* stays in the accessibility tree so its messages are announced */
.page-reserve .reserve__skip {
  display: block; width: fit-content; margin: 6px auto 0; padding: 10px 6px;
  font-family: var(--rv-serif); font-style: italic; font-size: 14px; color: var(--rv-bronze);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color .2s ease;
}
.page-reserve .reserve__skip:hover, .page-reserve .reserve__skip:focus-visible { text-decoration-color: currentColor; }
.page-reserve .reserve__skip:focus-visible { outline: 1.5px solid var(--rv-carbon); outline-offset: 2px; }
.page-reserve .reserve__done { margin: 4px 0 0; font-family: var(--rv-sans); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--rv-carbon); }
.page-reserve .reserve__done em { display: block; margin-top: 4px; font-family: var(--rv-serif); font-style: italic; font-weight: 400; font-size: 15px; color: var(--rv-bronze); }
.page-reserve .reserve__done:focus { outline: none; }

/* Locked rows: visible, not interactive — cream, a bronze hairline, the text dimmed to 60% */
.rv-locked {
  position: relative; display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; padding: 16px 18px; min-height: 68px;
  border-radius: 16px; border: 1px solid var(--rv-line); background: var(--rv-paper);
  color: var(--rv-carbon); cursor: default; user-select: none;
}
.rv-locked__icon { display: grid; place-items: center; width: 28px; height: 28px; flex: none; color: var(--rv-bronze); }
.rv-locked__icon svg, .rv-locked__badge svg { width: 13px; height: 13px; }
.rv-locked__text { flex: 1; min-width: 0; opacity: .6; }
.rv-locked__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--rv-carbon); }
.rv-locked__sub { margin: 2px 0 0; font-size: 12px; color: var(--rv-carbon); }
/* "Deposit first" / "Upgrade to unlock": bronze hairline pills, Playfair italic */
.rv-locked__pill, .rv-locked__badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rv-rule); background: var(--rv-paper);
  font-family: var(--rv-serif); font-style: italic; font-weight: 400; font-size: 12px; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rv-bronze);
}
.rv-locked--sealed { justify-content: center; min-height: 76px; overflow: hidden; }
.rv-locked__veil {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 18px;
  filter: blur(4px); opacity: .6;
}
.rv-locked__kicker { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--rv-bronze); }
.rv-locked__veil .rv-locked__title { font-size: 14px; }
.rv-locked__badge { position: relative; padding: 7px 14px; }

/* Phones (below 760px): the image stays small (220px at most) so the offer and RESERVE NOW fit on the first
   screen. Heights use svh — the viewport with the browser's bars showing — so it holds on iPhone Safari and
   Android Chrome alike. */
.rv-body--short { display: none; }
@media (max-width: 759.98px) {
  .rv { padding-bottom: 48px; }
  .rv-head { margin-bottom: 4px; padding: 14px 20px; }
  .rv-wordmark { font-size: 14px; }
  .rv-status { gap: 6px; font-size: 10px; letter-spacing: .14em; }
  .rv-hero { gap: 14px; margin-bottom: 14px; }
  .rv-media { aspect-ratio: auto; height: 30vh; height: 30svh; min-height: 150px; max-height: 220px; }
  .rv-media { box-shadow: 0 8px 20px rgba(23, 23, 23, .10); }   /* lighter, so it doesn't shade the headline below */
  .rv-media__img { object-position: 50% 18%; }   /* a short strip of a tall photo: his whole head and the folio in frame */
  .rv-title { margin-bottom: 4px; font-size: 34px; }
  .rv-sub { margin-bottom: 4px; font-size: 15px; }
  .rv-body--full { display: none; }
  .rv-body--short { display: block; margin: 0; font-size: 14px; line-height: 1.45; }
  .rv-card { padding: 14px 16px 6px; }
  .rv-card__top { row-gap: 4px; margin-bottom: 8px; }
  .rv-card__price { font-size: 12.5px; }
  .rv-card__price span { display: inline; margin: 0 0 0 6px; font-size: 13.5px; }   /* one line: "Early-Bird Price: $149.00  Save $50.00" */
  .rv-card__body { margin-bottom: 10px; font-size: 13.5px; line-height: 1.5; }
  .page-reserve .reserve__cta { padding: 15px 24px; }
  .page-reserve .reserve__skip { margin-top: 2px; padding: 8px 6px; }
  .page-reserve .reserve__input { padding: 13px 18px; margin-bottom: 10px; }
  .rv-locked { gap: 10px; padding: 14px 14px; }
  .rv-locked__pill, .rv-locked__badge { padding: 5px 11px; font-size: 11px; letter-spacing: .06em; }   /* room for "Three quick questions." on one line */
  /* Guests (no sign-up in this browser) also get the email field: give its height back from the photo */
  .rv:has(.reserve__email:not([hidden])) .rv-media { height: calc(30vh - 56px); height: calc(30svh - 56px); min-height: 136px; }
  .rv:has(.reserve__email:not([hidden])) .rv-media__img { object-position: 50% 14%; }
}

@media (min-width: 760px) {
  .rv { max-width: 980px; padding: 0 40px 96px; }
  .rv-head { margin-bottom: 24px; padding: 26px 32px; }   /* the landing top bar's 32px inset */
  /* sized so RESERVE NOW sits above the fold on a 1280×800 laptop */
  .rv-hero { flex-direction: row; align-items: center; gap: 56px; margin-bottom: 28px; }
  .rv-hero__text { flex: 1 1 52%; }
  .rv-media { flex: 0 0 38%; }
  .rv-title { margin-bottom: 18px; font-size: 56px; }
  .rv-sub { font-size: 17px; }
  .rv-card { padding: 26px 28px 20px; }
  .rv-card__top { grid-template-columns: 1fr auto; }
  .rv-card__title { font-size: 18px; }
  .rv-card__price { grid-column: auto; text-align: right; }
  .rv-locked { padding: 18px 24px; }
}

/* ---- Thanks ---- */
.thanks {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 90px); min-height: calc(100svh - 90px);
  max-width: 1280px; margin-inline: auto;
  padding: 120px 24px 64px;
}
.thanks__title {
  margin: 0 0 24px;
  font-family: var(--serif); font-weight: 300; font-variation-settings: 'opsz' 144;
  font-size: clamp(64px, 11vw, 140px); line-height: 1; letter-spacing: -.02em;
  color: #171717;
}
.thanks__body { max-width: 520px; margin: 0; font-size: 17px; line-height: 1.6; color: rgba(23, 23, 23, .74); }
.thanks__sign { margin: 56px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: #A68A5B; }
@media (min-width: 900px) { .thanks { padding-left: 80px; padding-right: 80px; } }