/* =============================================================
   COOL EVENTS  (public/css/main.css)
   -------------------------------------------------------------
   Every page. booking.html adds css/book.css on top of it.

   One light theme, on purpose: the site is read on phones outdoors,
   where a dark ground loses its contrast to glare. Small type never
   drops below 15px, and nothing that must be read sits on a photo.

   Shape rule: photos and panels 18px, inner tiles 12px, anything
   you press is a full pill.
   =============================================================*/

:root {
  --cream:   #F7F4ED;   /* page ground */
  --paper:   #FFFDF8;   /* raised surfaces */
  --sand:    #EFE8DB;   /* quiet panels */
  --ink:     #1F0710;   /* 17.4:1 on cream */
  --ink-2:   #4B3B40;   /* 9.6:1 on cream */
  --maroon:  #56061D;
  --maroon-2:#3A0A18;
  --maroon-3:#2A0210;
  --gold:    #C9A84C;   /* fills and rules only, never small text on cream */
  --gold-2:  #E8C96A;
  --gold-ink:#6B5418;   /* gold that carries words: 6.4:1 */
  --line:    rgba(86, 6, 29, .14);

  /* Script for the logo and the hero line only: a script face carries a
     few words of flourish, never a sentence. Bodoni for headings, set in
     italic where a line needs a voice. Jost for everything read. */
  --script:  'Great Vibes', cursive;
  --display: 'Bodoni Moda', Didot, Georgia, serif;
  --body:    'Jost', system-ui, sans-serif;

  --r-lg: 18px;
  --r-md: 12px;
  --pad:  clamp(16px, 4vw, 40px);
  --max:  1320px;
  --nav:  68px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(58, 10, 24, .06), 0 18px 40px -18px rgba(58, 10, 24, .28);

  /* Stacking scale */
  --z-nav: 20;
  --z-sheet: 30;
  --z-bar: 25;
  --z-dialog: 40;
}

/* ─── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  font-size: 17.5px;
  font-weight: 450;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
::selection { background: var(--maroon); color: var(--cream); }

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--maroon);
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 6.6vw, 88px); }
h2 { font-size: clamp(34px, 4.4vw, 58px); }
h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 600; letter-spacing: 0; line-height: 1.18; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--gold-ink); }
.band h2 em { color: var(--gold-2); }
p { text-wrap: pretty; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--maroon); color: var(--cream); padding: 10px 16px; border-radius: 999px;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(72px, 10vw, 136px) 0; }
.section-tight { padding: clamp(48px, 7vw, 88px) 0; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 46ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 15px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 36px; height: 1px; background: var(--gold); }
.head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.head p { margin-top: 18px; }

/* Price pairs, rebuilt by main.js from js/pricing.js */
.price-was { color: var(--ink-2); font-weight: 500; text-decoration-thickness: 2px; margin-right: .3em; }
.price-pair { white-space: nowrap; }

/* ─── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: var(--maroon); color: var(--cream);
  transition: transform .25s var(--ease), background-color .25s, box-shadow .25s;
}
.btn:hover { background: var(--maroon-2); box-shadow: 0 10px 24px -10px rgba(58, 10, 24, .6); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-gold { background: var(--gold); color: var(--maroon-3); }
.btn-gold:hover { background: var(--gold-2); }
.btn-line { background: transparent; color: var(--maroon); box-shadow: inset 0 0 0 2px var(--maroon); }
.btn-line:hover { background: var(--maroon); color: var(--cream); }

.link {
  font-weight: 500; color: var(--maroon);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size .3s var(--ease);
}
.link:hover { background-size: 0 2px; background-position: 100% 100%; }

/* ─── Promo bar ────────────────────────────────────────────── */
.promo {
  display: block; background: var(--maroon-3); color: var(--cream);
  text-align: center; font-size: 15px; font-weight: 450; letter-spacing: .03em; padding: 10px var(--pad);
}
.promo strong { color: var(--gold-2); font-weight: 600; letter-spacing: .16em; }
.promo:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ─── Nav ──────────────────────────────────────────────────── */
/* The blur sits on a pseudo-element: backdrop-filter on .nav itself would
   make it the containing block for the fixed phone menu inside it. */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(247, 244, 237, .92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: var(--nav); }
.brand { display: flex; flex-direction: column; line-height: 1; margin-right: auto; position: relative; z-index: 2; }
.brand-name {
  font-family: var(--script); font-weight: 400; font-size: 36px; line-height: .95;
  color: var(--maroon); transition: color .4s;
}
.brand-sub {
  font-family: var(--display); font-style: italic; font-size: 15px; font-weight: 500;
  color: var(--gold-ink); margin: 2px 0 0 18px; transition: color .4s;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a:not(.btn) { font-weight: 500; font-size: 16px; letter-spacing: .06em; color: var(--ink); position: relative; padding: 6px 0; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--maroon); }
.nav-links .btn { min-height: 44px; padding: 0 22px; font-size: 14px; }
.menu-extra { display: none; }

/* Phone menu button: a maroon pill with its word, turning gold on open. */
.menu-btn {
  display: none; position: relative; z-index: 2;
  align-items: center; gap: 12px; height: 46px; padding: 0 8px 0 18px; margin-right: -4px;
  border-radius: 999px; background: var(--maroon); color: var(--cream);
  font-size: 15px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  transition: background-color .4s var(--ease), color .4s;
}
.menu-btn .mb-word { display: grid; }
.menu-btn .mb-word > span { grid-area: 1 / 1; transition: opacity .3s, transform .45s var(--ease); }
.menu-btn .mb-close { opacity: 0; transform: translateY(8px); }
.menu-btn .mb-lines {
  position: relative; width: 32px; height: 32px; border-radius: 999px;
  background: rgba(247, 244, 237, .14);
}
.menu-btn .mb-lines i {
  position: absolute; right: 8px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .45s var(--ease), width .45s var(--ease), top .45s var(--ease);
}
.menu-btn .mb-lines i:nth-child(1) { top: 12px; width: 16px; }
.menu-btn .mb-lines i:nth-child(2) { top: 19px; width: 10px; }
.menu-open .menu-btn { background: var(--gold); color: var(--maroon-3); }
.menu-open .menu-btn .mb-open { opacity: 0; transform: translateY(-8px); }
.menu-open .menu-btn .mb-close { opacity: 1; transform: none; }
.menu-open .menu-btn .mb-lines { background: rgba(42, 2, 16, .12); }
.menu-open .menu-btn .mb-lines i { top: 15.5px; width: 16px; }
.menu-open .menu-btn .mb-lines i:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-btn .mb-lines i:nth-child(2) { transform: rotate(-45deg); }
.menu-open .nav::before { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .nav { border-bottom-color: transparent; }
.menu-open .brand-name { color: var(--cream); }
.menu-open .brand-sub { color: var(--gold-2); }

/* ─── Hero ─────────────────────────────────────────────────── */
/* The slideshow IS the hero: one big photo box with the words on it,
   and two prints tucked over its edges. The words sit on a maroon scrim
   dense enough to hold contrast in sunlight whatever the photo does. */
.hero { padding: clamp(18px, 3vw, 36px) 0 clamp(64px, 8vw, 110px); }
.stage { position: relative; padding-right: clamp(0px, 8vw, 120px); }
.stage-box {
  position: relative; isolation: isolate;
  height: clamp(560px, 82svh, 800px);
  border-radius: var(--r-lg);
  box-shadow: -18px 18px 0 -1px var(--cream), -18px 18px 0 0 var(--gold), var(--shadow);
}
.slides {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  border-radius: var(--r-lg); background: var(--maroon-3);
}
.slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.4s ease, transform 7.5s linear;
}
.slides img.on { opacity: 1; transform: scale(1); }
.scrim {
  position: absolute; inset: 0; z-index: -1; border-radius: var(--r-lg); pointer-events: none;
  background:
    linear-gradient(90deg, rgba(42, 2, 16, .92) 0%, rgba(42, 2, 16, .8) 34%, rgba(42, 2, 16, .28) 62%, rgba(42, 2, 16, 0) 80%),
    linear-gradient(0deg, rgba(42, 2, 16, .55) 0%, rgba(42, 2, 16, 0) 30%);
}
.hero-copy {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(620px, 58%);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 5vw, 72px);
  color: var(--cream);
}
.hero .eyebrow { color: var(--gold-2); }
.hero .eyebrow::before { background: var(--gold-2); }
.hero h1 {
  font-family: var(--script); font-weight: 400; font-variation-settings: normal;
  font-size: clamp(62px, 7.2vw, 112px); line-height: 1.02; letter-spacing: 0;
  color: var(--cream); margin: 4px 0 22px -4px; padding-bottom: .08em;
  text-shadow: 0 2px 24px rgba(26, 1, 9, .45);
}
.hero h1 em { font-style: normal; font-weight: 400; color: var(--gold-2); }
.hero .lede {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 1.8vw, 25px); line-height: 1.45; color: #F4ECE6;
  margin-bottom: 34px; max-width: 30ch;
  text-shadow: 0 1px 12px rgba(26, 1, 9, .5);
}
.hero .link { color: var(--cream); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

.slide-bars {
  position: absolute; left: clamp(28px, 5vw, 72px); bottom: 26px; z-index: 1;
  width: min(300px, 40%); display: flex; gap: 6px;
}
.slide-bars button { flex: 1; height: 26px; position: relative; }
.slide-bars button::before, .slide-bars button::after {
  content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 2.5px; border-radius: 2px;
  background: rgba(255, 253, 248, .35);
}
.slide-bars button::after { background: var(--gold-2); transform: scaleX(0); transform-origin: left; }
.slide-bars button.done::after { transform: scaleX(1); }
.slide-bars button.run::after { animation: bar var(--slide-ms, 5200ms) linear forwards; }
.stage.paused .slide-bars button.run::after { animation-play-state: paused; }
@keyframes bar { to { transform: scaleX(1); } }

/* The two prints, laid over the box's right edge. */
.print {
  position: absolute; z-index: 2; margin: 0;
  background: var(--paper); padding: 8px 8px 30px; border-radius: 4px;
  box-shadow: 0 2px 4px rgba(42, 2, 16, .12), 0 28px 50px -18px rgba(42, 2, 16, .55);
  transition: transform .6s var(--ease);
}
.print img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.print figcaption {
  position: absolute; left: 0; right: 0; bottom: 3px; text-align: center;
  font-family: var(--script); font-size: 21px; line-height: 1; color: var(--maroon);
}
.print-a { width: clamp(170px, 17vw, 250px); aspect-ratio: 3 / 4.1; right: 0; top: 7%; transform: rotate(4deg); }
.print-b { width: clamp(150px, 14.5vw, 215px); aspect-ratio: 4 / 5.3; right: clamp(60px, 9vw, 140px); bottom: -7%; transform: rotate(-6deg); }
.print-a:hover { transform: rotate(1deg) translateY(-6px); }
.print-b:hover { transform: rotate(-2deg) translateY(-6px); }

/* ─── Photo reel (the one marquee) ─────────────────────────── */
/* Laid out like prints scattered on a table: paper border, slight tilt. */
.reel { overflow: hidden; padding: 28px 0 34px; }
.reel-track { display: flex; gap: 26px; width: max-content; animation: reel 28s linear infinite; }
@media (max-width: 820px) { .reel-track { animation-duration: 24s; } }
.reel:hover .reel-track { animation-play-state: paused; }
.reel img {
  height: clamp(230px, 30vw, 370px); width: auto; aspect-ratio: var(--ar, 3/4);
  object-fit: cover; background: var(--paper);
  padding: 9px 9px 30px; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(58, 10, 24, .08), 0 16px 34px -16px rgba(58, 10, 24, .35);
  transform: rotate(-1.6deg);
}
.reel img:nth-child(3n+2) { transform: rotate(1.3deg) translateY(10px); }
.reel img:nth-child(3n) { transform: rotate(-.6deg) translateY(-6px); }
@keyframes reel { to { transform: translateX(calc(-50% - 13px)); } }

/* ─── Packages ─────────────────────────────────────────────── */
.pkgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.pkg {
  display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pkg:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(58,10,24,.06), 0 30px 60px -24px rgba(58,10,24,.38); }
.pkg-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.pkg-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pkg:hover .pkg-img img { transform: scale(1.04); }
.pkg-body { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pkg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pkg-flag {
  font-size: 15px; font-weight: 500; letter-spacing: .04em; color: var(--maroon);
  background: rgba(201, 168, 76, .28); padding: 4px 12px; border-radius: 999px;
}
.pkg-price { font-family: var(--display); font-size: clamp(26px, 2.6vw, 32px); font-weight: 500; color: var(--ink); }
.pkg-price small { font-family: var(--body); font-size: 16px; font-weight: 450; color: var(--ink-2); letter-spacing: 0; }
.pkg-price .price-was { font-size: .7em; }
.pkg-points { display: flex; flex-wrap: wrap; gap: 8px; }
.pkg-points li { font-size: 15px; font-weight: 450; padding: 6px 12px; border-radius: 999px; background: var(--sand); color: var(--ink); }
.pkg-points li.hi { background: var(--maroon); color: var(--cream); }
.pkg-go { margin-top: auto; padding-top: 8px; font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); display: inline-flex; gap: 8px; }
.pkg-go .arrow { transition: transform .3s var(--ease); }
.pkg:hover .pkg-go .arrow { transform: translateX(5px); }

.build {
  margin-top: clamp(20px, 3vw, 36px);
  display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: clamp(18px, 3vw, 36px);
  padding: 14px clamp(14px, 2vw, 18px);
  border-radius: var(--r-lg); background: var(--sand);
}
.build img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); }
.build h3 { margin-bottom: 6px; }
.build p { color: var(--ink-2); }
.build .btn { margin-right: clamp(0px, 1.5vw, 14px); }

/* ─── Prints band (the one maroon block) ───────────────────── */
.band { background: var(--maroon); color: var(--cream); }
.band h2 { color: var(--cream); }
.band .lede { color: #EADFD9; }
.band-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1.1fr .9fr .9fr;
  grid-template-rows: auto auto;
}
.band-copy { grid-column: 1; grid-row: 1; padding: 8px clamp(0px, 2vw, 24px) 24px 0; align-self: end; }
.band-copy .btn { margin-top: 30px; }
.band figure { overflow: hidden; border-radius: var(--r-lg); background: var(--maroon-2); }
.band figure img { width: 100%; height: 100%; object-fit: cover; }
.band .b1 { grid-column: 2; grid-row: 1 / 3; }
.band .b2 { grid-column: 3; grid-row: 1; aspect-ratio: 4 / 5; }
.band .b3 { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 10; }
.band .b4 { grid-column: 3; grid-row: 2; aspect-ratio: 4 / 5; }

/* ─── Steps ────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: step; }
.step:nth-child(2) { margin-top: clamp(0px, 6vw, 80px); }
.step:nth-child(3) { margin-top: clamp(0px, 3vw, 40px); }
.step figure { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 22px; background: var(--sand); }
.step img { width: 100%; height: 100%; object-fit: cover; }
.step h3 { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.step h3::before {
  counter-increment: step; content: counter(step);
  font-size: 19px; font-family: var(--display); font-style: italic; font-weight: 500; color: var(--maroon-3);
  background: var(--gold); width: 30px; height: 30px; flex: none;
  display: inline-grid; place-items: center; border-radius: 999px; transform: translateY(-3px);
}
.step p { color: var(--ink-2); max-width: 36ch; }

/* ─── Included ─────────────────────────────────────────────── */
.incl { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.incl figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); }
.incl figure img { width: 100%; height: 100%; object-fit: cover; }
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin-top: 36px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-weight: 500; line-height: 1.4; }
.ticks svg { width: 26px; height: 26px; color: var(--gold-ink); margin-top: -1px; }
.ticks.one { grid-template-columns: 1fr; }

/* ─── Closing CTA ──────────────────────────────────────────── */
.closer { position: relative; padding-bottom: clamp(72px, 10vw, 136px); }
.closer-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 9; background: var(--sand); }
.closer-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.closer-card {
  position: relative; margin: -120px clamp(16px, 5vw, 64px) 0 auto; max-width: 560px;
  background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(26px, 4vw, 44px);
}
.closer-card h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 14px; }
.closer-card p { color: var(--ink-2); margin-bottom: 28px; }
.closer-card .cta-row { gap: 14px 24px; }

/* ─── Areas line ───────────────────────────────────────────── */
.areas { color: var(--ink-2); font-size: 15px; max-width: 90ch; }
.areas strong { color: var(--ink); }

/* ─── Page header (inner pages) ────────────────────────────── */
.page-head { padding: clamp(36px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); }
.page-head h1 { font-size: clamp(42px, 6.4vw, 84px); margin-bottom: 18px; }
.back { display: inline-flex; gap: 8px; font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); margin-bottom: 26px; }
.back:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ─── Package detail ───────────────────────────────────────── */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.detail-img { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); position: sticky; top: calc(var(--nav) + 20px); }
.detail-img img { width: 100%; height: 100%; object-fit: cover; }
.durations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 30px 0; }
.dur { background: var(--paper); border-radius: var(--r-md); padding: 16px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.dur-h { font-weight: 500; color: var(--ink-2); font-size: 15px; }
.dur-p { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; margin-top: 4px; }
.dur-p .price-pair { white-space: normal; display: flex; flex-direction: column; }
.dur-p .price-was { font-size: 16px; font-family: var(--body); }
.fine { font-size: 15px; color: var(--ink-2); margin-top: 16px; }
.detail h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 48px 0 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { font-weight: 450; padding: 8px 16px; border-radius: 999px; background: var(--sand); }

.addons { display: grid; gap: 10px; }
.addon {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 16px 20px; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 450;
}
.addon b { color: var(--maroon); white-space: nowrap; }

/* Backdrop swatches: a marquee you can drag (initMarquee in main.js).
   Without JavaScript, or with reduced motion, a plain scroll strip
   whose first swatch lines up with the heading above. */
.swatches {
  --edge: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  padding: 0 var(--edge) 10px; scroll-padding-inline: var(--edge);
}
.swatch-track { display: flex; gap: 14px; width: max-content; }
.swatch { flex: none; width: clamp(170px, 19vw, 250px); scroll-snap-align: start; }
.swatches.marquee {
  overflow: hidden; padding: 0 0 10px; scroll-snap-type: none;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.swatches.marquee.dragging { cursor: grabbing; }
.marquee .swatch-track { will-change: transform; }
.marquee .swatch img { pointer-events: none; -webkit-user-drag: none; }
.swatch img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-md); background: var(--sand); box-shadow: inset 0 0 0 1px var(--line); }
.swatch figcaption { font-family: var(--display); font-style: italic; font-size: 18px; margin-top: 10px; }

/* Prints trio on the print page */
.trio { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; align-items: end; }
.trio figure { border-radius: var(--r-lg); overflow: hidden; background: var(--sand); }
.trio img { width: 100%; height: 100%; object-fit: cover; }
.trio figure:nth-child(1) { aspect-ratio: 4 / 5; }
.trio figure:nth-child(2) { aspect-ratio: 3 / 4; }
.trio figure:nth-child(3) { aspect-ratio: 4 / 5; transform: translateY(-40px); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 44px; }
.facts h3 { font-size: 21px; margin-bottom: 6px; }
.facts p { color: var(--ink-2); font-size: 16px; }

.switch {
  display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: center;
  padding: 14px; padding-right: 24px; border-radius: var(--r-lg); background: var(--sand);
}
.switch img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
.switch p { color: var(--ink-2); }

/* Packages page: build your own */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.builder figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--sand); }
.builder figure img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Gallery ──────────────────────────────────────────────── */
.masonry { columns: 3 300px; column-gap: 14px; }
.masonry button { display: block; width: 100%; margin-bottom: 14px; break-inside: avoid; border-radius: var(--r-md); overflow: hidden; background: var(--sand); }
.masonry img { width: 100%; transition: transform .8s var(--ease), opacity .3s; }
.masonry button:hover img { transform: scale(1.03); }

.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh;
  width: 100vw; height: 100dvh; margin: 0; z-index: var(--z-dialog);
}
.lightbox::backdrop { background: rgba(26, 1, 9, .92); }
.lightbox-inner { width: 100%; height: 100%; display: grid; place-items: center; padding: 64px 16px 24px; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 96px); object-fit: contain; border-radius: var(--r-md); }
.lb-btn {
  font-family: var(--body);
  position: fixed; width: 52px; height: 52px; border-radius: 999px;
  background: var(--cream); color: var(--maroon); display: grid; place-items: center;
  font-size: 26px; font-weight: 700; line-height: 1;
}
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ─── FAQ ──────────────────────────────────────────────────── */
.qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px clamp(24px, 5vw, 72px); padding: 28px 0; border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa h2 { font-size: clamp(21px, 2vw, 25px); line-height: 1.2; letter-spacing: -.015em; }
.qa p { color: var(--ink-2); max-width: 58ch; }
.qa a { color: var(--maroon); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Contact ──────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.reach { display: grid; gap: 10px; margin: 8px 0 32px; }
.reach a, .reach div {
  display: flex; flex-direction: column; padding: 18px 22px; border-radius: var(--r-md);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .25s, transform .25s var(--ease);
}
.reach a:hover { box-shadow: inset 0 0 0 2px var(--maroon); }
.reach span { font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.reach b { font-family: var(--display); font-weight: 500; font-size: clamp(21px, 2.2vw, 26px); color: var(--maroon); overflow-wrap: anywhere; }
.contact figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 11; background: var(--sand); }
.contact figure img { width: 100%; height: 100%; object-fit: cover; }

.form { background: var(--paper); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 40px); box-shadow: var(--shadow); display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; font-size: 16px; letter-spacing: .02em; }
.field label i { font-style: normal; font-weight: 500; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: var(--r-md);
  border: 1.5px solid rgba(86, 6, 29, .28); background: var(--cream);
  font-size: 17px; font-weight: 500; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 4px rgba(201, 168, 76, .35); }
.form .btn { justify-self: start; }
.form .btn[disabled] { opacity: .6; pointer-events: none; }
.status { font-weight: 500; min-height: 1.6em; }
.field [aria-invalid="true"] { border-color: #8E1B1B; background: #FBF1F0; }
.field-err { color: #8E1B1B; font-size: 15px; font-weight: 500; }
.status.ok { color: #1D5B2C; }
.status.err { color: #8E1B1B; }

/* ─── Space requirements ───────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(40px, 6vw, 72px); }
.stat { background: var(--paper); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); box-shadow: inset 0 0 0 1px var(--line); }
.stat b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4vw, 52px); color: var(--maroon); line-height: 1; }
.stat span { display: block; margin-top: 10px; font-weight: 450; color: var(--ink-2); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.plan {
  /* The drawings were made for a dark ground, so they keep one. */
  --off-white: #F5F0E8; --light-muted: #DCD3D2; --gold-light: var(--gold-2);
  background: var(--maroon-3); color: var(--off-white); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 30px);
}
.plan h2 { color: var(--cream); font-size: 22px; margin-bottom: 8px; }
.plan svg { width: 100%; height: auto; display: block; }
.plan .dim-line { stroke: var(--light-muted); stroke-width: 1.4; }
.plan .ext-line { stroke: rgba(196, 184, 186, .45); stroke-width: 1; }
.plan .dim-text { fill: var(--off-white); font-family: var(--body); font-size: 18px; font-weight: 600; }
.plan .part-text { fill: var(--light-muted); font-family: var(--body); font-size: 16px; font-weight: 500; }
.plan p { color: #EADFD9; font-size: 16px; margin-top: 8px; }
.plan strong { color: var(--gold-2); }
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
.needs h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 20px; }

/* ─── 404 ──────────────────────────────────────────────────── */
.lost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.lost figure { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--sand); }
.lost img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Footer ───────────────────────────────────────────────── */
.foot { background: var(--maroon-3); color: #EADFD9; padding: clamp(56px, 7vw, 88px) 0 28px; }
.foot-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(234, 223, 217, .16); }
.foot .brand-name { color: var(--cream); font-size: 52px; }
.foot .brand-sub { color: var(--gold-2); }
.foot-big { font-family: var(--display); font-style: italic; font-size: clamp(26px, 3vw, 36px); font-weight: 400; color: var(--cream); line-height: 1.1; margin-top: 26px; max-width: 16ch; }
.foot h2 { font-family: var(--body); font-size: 15px; font-weight: 500; color: var(--gold-2); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 14px; }
.foot li { margin-bottom: 10px; }
.foot a { font-weight: 450; }
.foot a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; font-size: 15px; }
.socials { display: flex; gap: 10px; }
.socials a, .socials span {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(234, 223, 217, .1); color: var(--cream); transition: background-color .25s;
}
.socials a:hover { background: var(--gold); color: var(--maroon-3); }
.socials svg { width: 20px; height: 20px; }

/* Mobile book bar */
.book-bar { display: none; }

/* ─── Reveal on scroll ─────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* translate, not transform, so a revealed element keeps its own
     transform (hover lifts, tilt) once it is in. */
  .js .rv { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: var(--d, 0ms); }
  .js .rv.in { opacity: 1; translate: none; }
  /* Hero, in order: the box settles, the eyebrow rule draws, the headline
     is written on word by word (see Motion below), then the subheader,
     the buttons, and the two prints drop onto the corner. */
  .stage-box { animation: stage-in 1.3s var(--ease) both; }
  .hero-copy > .eyebrow { animation: rise .9s var(--ease) .45s both; }
  .hero-copy > .lede { animation: rise 1s var(--ease) 1.35s both; }
  .hero-copy > .cta-row { animation: rise 1s var(--ease) 1.55s both; }
  .hero .slide-bars { animation: fade .8s ease 1.8s both; }
  .print { animation: drop 1.2s var(--ease) backwards; }
  .print-a { animation-delay: 1s; }
  .print-b { animation-delay: 1.2s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes stage-in { from { opacity: 0; translate: 0 26px; } }
@keyframes drop { from { opacity: 0; transform: translateY(-60px) rotate(0deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel { overflow-x: auto; }
  .reel-track { animation: none; }
  .slides img { transform: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ─── Tablet ───────────────────────────────────────────────── */
@media (max-width: 1050px) {
  .nav-links { gap: 22px; }
  .band-grid { grid-template-columns: 1fr 1fr; }
  .band-copy { grid-column: 1 / -1; grid-row: auto; padding-right: 0; }
  .band .b1 { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 5; }
  .band .b2 { grid-column: 2; grid-row: auto; aspect-ratio: 4 / 5; }
  .band .b3 { grid-column: 1 / -1; grid-row: auto; }
  .band .b4 { display: none; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-top > :first-child { grid-column: 1 / -1; }
}

/* ─── Phone ────────────────────────────────────────────────── */
@media (max-width: 820px) {
  :root { --nav: 64px; }
  body { font-size: 17px; }

  .menu-btn { display: inline-flex; }

  /* The menu: a full-screen maroon sheet that wipes down from the top,
     big italic links rising in one after another, prints along the foot. */
  .nav-links {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: stretch; gap: 0;
    background:
      radial-gradient(120% 70% at 100% 0%, rgba(201, 168, 76, .16), transparent 60%),
      var(--maroon-3);
    padding: calc(var(--promo-h, 0px) + var(--nav) + 20px) var(--pad) 28px;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .7s cubic-bezier(.7, 0, .2, 1), visibility 0s .7s;
    overflow-y: auto; overflow-x: hidden;
  }
  .menu-open .nav-links { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
  .nav-links a:not(.btn) {
    font-family: var(--display); font-style: italic; font-weight: 400;
    font-size: clamp(40px, 12vw, 54px); line-height: 1.1; letter-spacing: 0;
    padding: 8px 0; color: var(--cream);
    display: flex; align-items: baseline; gap: 14px;
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s, transform .7s var(--ease), color .3s;
  }
  .nav-links a:not(.btn)::after {
    position: static; content: ''; flex: 1; height: 1px; background: rgba(232, 201, 106, .28);
    transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .25s;
  }
  .nav-links a[aria-current="page"] { color: var(--gold-2); }
  .menu-open .nav-links a:not(.btn) { opacity: 1; transform: none; }
  .menu-open .nav-links a:not(.btn)::after { transform: scaleX(1); }
  .menu-open .nav-links > :nth-child(1) { transition-delay: .18s; }
  .menu-open .nav-links > :nth-child(2) { transition-delay: .24s; }
  .menu-open .nav-links > :nth-child(3) { transition-delay: .30s; }
  .menu-open .nav-links > :nth-child(4) { transition-delay: .36s; }
  .menu-open .nav-links > :nth-child(5) { transition-delay: .42s; }
  .menu-open .nav-links > :nth-child(6) { transition-delay: .48s; }
  .nav-links .btn {
    margin-top: 28px; min-height: 58px; font-size: 15px;
    background: var(--gold); color: var(--maroon-3);
    opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .7s var(--ease);
  }
  .menu-open .nav-links .btn { opacity: 1; transform: none; }
  .menu-extra { display: block; margin-top: 32px; position: relative; }
  .menu-prints { display: flex; gap: 12px; margin: 0 -4px 26px; }
  .menu-prints img {
    width: calc(33.33% - 8px); aspect-ratio: 3 / 4; object-fit: cover;
    background: var(--paper); padding: 5px 5px 18px; border-radius: 2px;
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6);
    opacity: 0; transform: translateY(30px) rotate(0deg);
    transition: opacity .6s .45s, transform .9s var(--ease) .45s;
  }
  .menu-open .menu-prints img:nth-child(1) { opacity: 1; transform: rotate(-4deg); }
  .menu-open .menu-prints img:nth-child(2) { opacity: 1; transform: rotate(2deg) translateY(-8px); transition-delay: .52s; }
  .menu-open .menu-prints img:nth-child(3) { opacity: 1; transform: rotate(-1.5deg) translateY(4px); transition-delay: .59s; }
  .menu-contact { display: grid; gap: 4px; }
  .menu-contact a {
    font-family: var(--body) !important; font-style: normal !important; font-size: 17px !important;
    color: #EADFD9 !important; padding: 4px 0 !important; opacity: 1 !important; transform: none !important;
  }
  .nav-links .menu-contact a::after { display: none; }
  body.menu-open { overflow: hidden; }

  .incl, .detail, .builder, .contact, .lost, .needs { grid-template-columns: 1fr; }

  /* Phone hero: a tall photo box, words along the bottom on a scrim that
     rises from below, the two prints fanned over the top corner. */
  .hero { padding-top: 34px; }
  .stage { padding-right: 0; }
  .stage-box {
    height: max(580px, min(78svh, 680px));
    box-shadow: -10px 10px 0 -1px var(--cream), -10px 10px 0 0 var(--gold), var(--shadow);
  }
  .scrim {
    background: linear-gradient(0deg, rgba(42, 2, 16, .96) 0%, rgba(42, 2, 16, .86) 42%, rgba(42, 2, 16, .35) 64%, rgba(42, 2, 16, 0) 80%);
  }
  .hero-copy { top: auto; width: 100%; padding: 24px 20px 26px; justify-content: flex-end; }
  .hero h1 { font-size: clamp(52px, 14.5vw, 70px); margin-bottom: 14px; }
  .hero .lede { font-size: 19px; margin-bottom: 24px; }
  .slide-bars { top: 14px; bottom: auto; left: 16px; width: 44%; }
  .print { padding: 5px 5px 20px; }
  .print figcaption { font-size: 16px; bottom: 1px; }
  .print-a { width: 30%; right: 3%; top: -26px; }
  .print-b { width: 25%; right: 30%; top: -14px; bottom: auto; }

  .pkgs { grid-template-columns: 1fr; }
  .build { grid-template-columns: 1fr; padding: 14px 14px 22px; }
  .build > div { padding: 0 6px; }
  .build .btn { justify-self: start; margin: 0 6px; }

  .band-grid { gap: 10px; }

  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step:nth-child(n) { margin-top: 0; }
  .step figure { aspect-ratio: 16 / 11; }

  .incl figure { aspect-ratio: 4 / 3; }
  .ticks { grid-template-columns: 1fr; gap: 16px; }

  .closer-img { aspect-ratio: 4 / 3; }
  .closer-card { margin: -64px 12px 0; }

  .detail-img { position: static; aspect-ratio: 4 / 3; order: -1; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio figure:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .trio figure:nth-child(3) { transform: none; }
  .facts { grid-template-columns: 1fr; gap: 20px; }
  .switch { grid-template-columns: 96px 1fr; padding-right: 14px; }
  .switch .btn { grid-column: 1 / -1; justify-self: start; }

  .qa { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .masonry { columns: 2 140px; column-gap: 10px; }
  .masonry button { margin-bottom: 10px; }
  .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; }

  .foot-top { grid-template-columns: 1fr; }
  .foot { padding-bottom: 100px; }

  .book-bar {
    display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-bar);
    transform: translateY(140%); transition: transform .45s var(--ease);
  }
  .book-bar.show { transform: none; }
  .book-bar .btn { width: 100%; min-height: 56px; box-shadow: 0 14px 30px -10px rgba(42, 2, 16, .6); }
  .menu-open .book-bar { transform: translateY(140%); }
}

@media (max-width: 420px) {
  .durations { grid-template-columns: 1fr; }
  .dur { display: flex; justify-content: space-between; align-items: center; }
  .dur-p { margin: 0; }
  .dur-p .price-pair { flex-direction: row; align-items: baseline; gap: 8px; }
}

/* Space drawings keep a legible size on phones and scroll sideways instead. */
.plan-svg { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.reach b.email { font-size: clamp(18px, 4.6vw, 24px); overflow-wrap: normal; word-break: normal; }
@media (max-width: 820px) {
  .plan-svg svg { min-width: 500px; }
}

/* ─── Art layer ────────────────────────────────────────────── */
/* Film grain over the whole page, so the flat cream reads like paper.
   Fixed and pointer-free, so it never repaints on scroll. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .05 0 0 0 0 .08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* A gold hairline offset behind a photo, like a print on its mount. */
.framed { box-shadow: -16px 16px 0 -1px var(--cream), -16px 16px 0 0 var(--gold); }
.band .framed { box-shadow: -16px 16px 0 -1px var(--maroon), -16px 16px 0 0 var(--gold); }

/* Script signature under a heading. Short words only. */
.sign { display: block; font-family: var(--script); font-size: clamp(34px, 3.4vw, 46px); color: var(--gold-ink); line-height: 1; margin-top: 10px; transform: rotate(-3deg); transform-origin: left; }
.band .sign { color: var(--gold-2); }

@media (max-width: 820px) {
  .framed { box-shadow: -10px 10px 0 -1px var(--cream), -10px 10px 0 0 var(--gold); }
  .band .framed { box-shadow: -10px 10px 0 -1px var(--maroon), -10px 10px 0 0 var(--gold); }
}

/* Bodoni's display cut has hairlines that vanish in sunlight. Capping the
   optical size keeps the elegance but gives every stroke some body. */
h1, h2 { font-variation-settings: 'opsz' 40; }
h3, .pkg-price, .dur-p, .stat b, .reach b, .foot-big, .swatch figcaption, .brand-sub,
.hero .lede, .step h3::before { font-variation-settings: 'opsz' 14; }
.hero h1 { font-variation-settings: normal; }
.qa h2, .plan h2, .needs h2, .detail h2 { font-variation-settings: 'opsz' 18; }

@media (max-width: 820px) {
  .eyebrow { letter-spacing: .12em; gap: 10px; }
  .eyebrow::before { width: 22px; }
}

@media (max-width: 820px) {
  .hero .eyebrow::before { display: none; }
  .hero .eyebrow { letter-spacing: .1em; }
}

/* ─── Privacy and terms ────────────────────────────────────── */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--nav) + 28px); }
.legal-toc-title { font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; }
.legal-toc ol { display: grid; gap: 2px; border-left: 1px solid var(--line); }
.legal-toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; color: var(--ink-2); transition: color .2s, border-color .2s; }
.legal-toc a:hover { color: var(--maroon); border-left-color: var(--gold); }
.legal-body { max-width: 68ch; }
.legal-body section { scroll-margin-top: calc(var(--nav) + 24px); }
.legal-body section + section { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line); }
.legal-body h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 16px; font-variation-settings: 'opsz' 24; }
.legal-body p { margin-bottom: 14px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body ul { display: grid; gap: 10px; margin: 4px 0 16px; }
.legal-body li { position: relative; padding-left: 22px; }
.legal-body li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--gold); }
.legal-body strong { font-weight: 600; color: var(--ink); }
.legal-body a { color: var(--maroon); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.foot-legal { display: inline-flex; gap: 18px; margin-left: 20px; }
.foot-legal a { color: #EADFD9; }

@media (max-width: 820px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { display: none; }
  .foot-legal { display: flex; margin: 10px 0 0; }
}

/* =============================================================
   MOTION
   -------------------------------------------------------------
   Everything here is tied to the idea of a photo booth: photos
   develop like instant prints, headlines rise into place, the
   script lines are written on, and the slideshow flashes like a
   camera. Only transform, opacity, filter and clip-path animate.

   How it runs: main.js puts .in on an element when it scrolls into
   view (IntersectionObserver, no scroll listeners). The "before"
   state is keyed on html.js, which an inline script in <head> sets
   before first paint, so nothing flashes visible and then hides.
   With JavaScript off, or with reduced motion asked for, every
   element simply shows.

   Scroll-linked depth (parallax, the closing wipe) uses CSS
   scroll-driven animations where the browser has them, and is
   skipped where it does not.
   =============================================================*/

/* Headline words, split at build time into .w > .wi. The padding and
   matching negative margin give descenders and italic overhang room
   inside the clipping box without moving the text. */
.w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding: 0 .1em .22em; margin: 0 -.1em -.22em;
}
.wi { display: inline-block; }

/* Page transitions: pages cross-fade and the nav holds still. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.nav { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vt-out .3s ease both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 16px; } }

@media (prefers-reduced-motion: no-preference) {

  /* ── Headlines rise in, word by word ── */
  .js .split .wi {
    transform: translateY(115%);
    transition: transform 1.05s var(--ease);
    transition-delay: calc(var(--i, 0) * 60ms + 60ms);
  }
  .js .split.in .wi { transform: none; }

  /* The hero line is script, so it is written on instead: each word
     unmasked left to right, one after another, like a pen. */
  .hero h1 .w { overflow: visible; }
  .js .hero h1 .wi {
    transform: none;
    clip-path: inset(-40% 120% -40% -20%);
    transition: clip-path .7s cubic-bezier(.65, .05, .3, 1);
    transition-delay: calc(var(--i) * 160ms + 650ms);
  }
  .js .hero h1.in .wi { clip-path: inset(-40% -20% -40% -20%); }

  /* ── Photos develop like an instant print ── */
  .js :is(.pkg-img, .step figure, .incl figure, .band figure, .trio figure, .builder figure,
          .detail-img, .masonry button, .contact figure, .lost figure, .swatch):not(.in) img { opacity: 0; }
  .js :is(.pkg-img, .step figure, .incl figure, .band figure, .trio figure, .builder figure,
          .detail-img, .masonry button, .contact figure, .lost figure, .swatch).in img {
    animation: develop 2s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: var(--dd, 0ms);
  }

  /* ── Lists fall into place one item at a time ── */
  .js :is(.ticks, .pkg-points, .chips, .durations, .addons, .facts, .stats):not(.in) > * { opacity: 0; translate: 0 16px; }
  .js :is(.ticks, .pkg-points, .chips, .durations, .addons, .facts, .stats) > * {
    transition: opacity .6s ease, translate .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms + 150ms);
  }

  /* ── How it works: the numbers pop in ── */
  .js .step:not(.in) h3::before { scale: 0; }
  .step h3::before { transition: scale .7s cubic-bezier(.34, 1.56, .64, 1) .45s; }

  /* ── Eyebrow rules draw out ── */
  .eyebrow::before { transform-origin: left; animation: draw-x 1s var(--ease) .5s backwards; }

  /* ── Script, written on ── */
  .js .rv:not(.in) .sign,
  .js .foot:not(.in) .brand-name { clip-path: inset(-50% 115% -50% -15%); }
  .sign, .foot .brand-name { transition: clip-path 1.4s cubic-bezier(.65, .05, .3, 1) .35s; }
  .rv.in .sign, .foot.in .brand-name { clip-path: inset(-50% -15% -50% -15%); }
  .print figcaption { animation: write 1.1s cubic-bezier(.65, .05, .3, 1) 2.1s backwards; }
  .summary-img-label { animation: write 1.2s cubic-bezier(.65, .05, .3, 1) .9s backwards; }
  .intro .nav .brand-name { animation: write 1.6s cubic-bezier(.65, .05, .3, 1) .15s backwards; }
  .intro .nav .brand-sub { animation: fade 1s ease 1.2s backwards; }

  /* ── The camera flash between slides ── */
  .stage-box::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: var(--r-lg); background: #FFFDF8; opacity: 0;
  }
  .stage-box.flash::after { animation: flash .75s ease-out; }

  /* ── Booking: sections and the docket rise in ── */
  .js .bk-sec:not(.in), .js .summary-card:not(.in) { opacity: 0; translate: 0 28px; }
  .bk-sec, .summary-card { transition: opacity .8s ease, translate 1s var(--ease); }

  /* ── The offer code catches the light now and then ── */
  .promo strong {
    background: linear-gradient(100deg, var(--gold-2) 42%, #FFF6D6 50%, var(--gold-2) 58%) 100% 0 / 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shine 4.5s ease-in-out 2s infinite;
  }
}

@keyframes develop {
  0%   { opacity: 0; transform: scale(1.14); filter: saturate(0) brightness(1.55) contrast(.7) blur(8px); }
  35%  { opacity: 1; }
  100% { transform: none; filter: none; }
}
@keyframes draw-x { from { scale: 0 1; } }
@keyframes write { from { clip-path: inset(-50% 115% -50% -15%); } to { clip-path: inset(-50% -15% -50% -15%); } }
@keyframes flash { 0% { opacity: 0; } 10% { opacity: .5; } 100% { opacity: 0; } }
@keyframes shine { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Buttons: a streak of light crosses on hover ── */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 253, 248, .3) 50%, transparent 70%);
  translate: -120% 0; transition: translate .9s var(--ease);
}
.btn:hover::before { translate: 120% 0; }

/* ── Package cards lean toward the pointer, with a sheen that follows it.
   main.js sets --rx/--ry/--mx/--my, on devices with a real hover only. ── */
.pkg { position: relative; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); }
.pkg:hover { --ty: -4px; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty)); }
.pkg.tilting { transition: transform .12s linear, box-shadow .45s var(--ease); }
.pkg::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 253, 248, .32), transparent 45%);
  opacity: 0; transition: opacity .4s; mix-blend-mode: soft-light;
}
.pkg:hover::after { opacity: 1; }

/* ── Scroll-linked depth, where the browser supports it ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The hero box eases back as it leaves; the prints drift at their own pace. */
    .stage-box {
      animation: stage-in 1.3s var(--ease) both, recede linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
    }
    .print-a, .print-b {
      animation: drop 1.2s var(--ease) backwards, drift-a linear both;
      animation-timeline: auto, view();
    }
    .print-a { animation-delay: 1s, 0s; }
    .print-b { animation-name: drop, drift-b; animation-delay: 1.2s, 0s; }

    /* The closing photo wipes open from the top and pans as it passes. */
    .closer-img { animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .closer-img img { scale: 1.16; animation: pan linear both; animation-timeline: view(); }

    /* The prints band slides one photo against the others. */
    .band .b1 { animation: drift-a linear both; animation-timeline: view(); }
  }
}
@keyframes recede { to { scale: .93; } }
@keyframes drift-a { from { translate: 0 40px; } to { translate: 0 -50px; } }
@keyframes drift-b { from { translate: 0 80px; } to { translate: 0 -90px; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0 round var(--r-lg)); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); } }
@keyframes pan { from { translate: 0 -7%; } to { translate: 0 7%; } }