/* =========================================================
   Ditoui landing pages: shared brand styles.
   Every page in this repo uses this file, so a change here
   updates all pages. Colours and fonts are at the top.
   ========================================================= */
/* =========================================================
   Aesthetic Mexico · Ditoui
   Follows the Ditoui Branding Guidelines (Notion, Feb 2026).
   One typeface: Cormorant Garamond. Light (300) by default,
   Regular (400) for emphasis, nav, buttons and labels.
   Colour comes from photography first, then sage, with Ditoui
   red and blue used as small, deliberate accents.
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     Type scale. Every text style on the page uses one of these
     six sizes. Each grows smoothly from phone to desktop.
     Sizes at 390 / 1024 / 1440 px wide:
       --step-label   15 / 16 / 18   uppercase labels, nav, buttons (kept readable: Hope asked for nothing too small)
       --step-0       20 / 22 / 23   body text (the reading size)
       --step-1       23 / 27 / 29   small headings: names, days, FAQ questions
       --step-2       26 / 31 / 36   leads and intros
       --step-3       36 / 49 / 58   section titles
       --step-4       56 / 77 / 96   display (¡Hola!)
     The hero title and the scroll banners are sized on their own.
     --------------------------------------------------------- */
  --step-label: clamp(15px, 13.4px + 0.32vw, 18px);
  --step-0: clamp(20px, 18px + 0.35vw, 23px);
  --step-1: clamp(23px, 19px + 0.75vw, 29px);
  --step-2: clamp(26px, 20px + 1.1vw, 36px);
  --step-3: clamp(36px, 22px + 2.6vw, 58px);
  --step-4: clamp(56px, 30px + 4.6vw, 96px);
  --body: var(--step-0);   /* kept so older rules and the template still work */
  --label-track: 0.18em;   /* letter-spacing for uppercase labels */

  /* Spacing scale: the gaps between things */
  --space-1: 12px;
  --space-2: clamp(16px, 1.4vw, 22px);   /* label to title */
  --space-3: clamp(22px, 2.2vw, 32px);   /* title to lead */
  --space-4: clamp(32px, 3.4vw, 48px);   /* lead to text, block to block */
  --space-5: clamp(48px, 5vw, 72px);     /* larger blocks: lists, calls to action */
  --section: clamp(72px, 9vw, 128px);    /* top and bottom of every chapter */

  /* Reading width: about 65 characters a line at body size */
  --measure: calc(var(--step-0) * 28);
  --measure-wide: calc(var(--step-0) * 38);
  /* Brand palette */
  --sage: #3E4436;        /* workhorse: buttons, quote, footer */
  --sage-dark: #2F3429;
  --blue: #223A7A;        /* Ditoui blue: the closing "book" band */
  --red: #E31E27;         /* Ditoui red: tiny accents only (seat dot, numerals) */
  --bg: #F8F6F3;          /* off-white */
  --surface: #FFFFFF;
  --tint: #F1EBE3;        /* warm sand tint for alternating sections */
  --ink: #1A1A1A;
  --mute: #666666;
  --rule: #D4C5B5;
  --placeholder: #D4C5B5;
  --accent: #3E4436;      /* sage as a text accent */
  --logo: #35363A;        /* POS logo colour, from Ditoui_logo_POS */
  --on-dark: #F8F6F3;

  --serif: 'Cormorant Garamond', Garamond, Georgia, serif;

  --max: 1180px;
  --max-text: var(--measure);
  --gutter: clamp(20px, 5vw, 56px);
  /* One left edge for the whole page: content sits inside --max */
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161714; --surface: #1E201B; --tint: #22241F; --ink: #F1EEE8; --mute: #A39E95;
    --rule: #3A3D34; --placeholder: #2A2C26; --accent: #B9C3A8; --logo: #F1EEE8;
  }
}
:root[data-theme="dark"] {
  --bg: #161714; --surface: #1E201B; --tint: #22241F; --ink: #F1EEE8; --mute: #A39E95;
  --rule: #3A3D34; --placeholder: #2A2C26; --accent: #B9C3A8; --logo: #F1EEE8;
}

/* =========================================================
   Reset + base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  font-size: var(--body);
  line-height: 1.55;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
/* Headings and leads wrap into even lines; body text avoids one-word last lines */
h1, h2, h3, h4, summary, .hero-eyebrow, .prose-lead, .hero-sub, .prose-note, .book-lead, .fit-cta p, .sig-line { text-wrap: balance; }
p, li { text-wrap: pretty; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Lining figures for dates, prices and stats */
.hero-eyebrow, .chapter-label, .price-label, .proof, .scarcity, .price-main, .footer-contact { font-variant-numeric: lining-nums; }

/* Shared UI label: uppercase is for UI elements only */
.hero-eyebrow, .chapter-label, .host-role, .price-label,
.sig-sub, .scarcity, .footer-badges {
  font-size: var(--step-label); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase;
  line-height: 1.4;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn-solid, .btn-primary {
  display: inline-block;
  padding: 17px 40px;
  font-family: var(--serif);
  font-size: var(--step-label); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
  border: 2px solid var(--sage);
  background: var(--sage);
  color: #fff;
  cursor: pointer;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.btn-solid:hover, .btn-primary:hover { background: var(--sage-dark); border-color: var(--sage-dark); }
.btn-solid.on-dark { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink); }
.btn-solid.on-dark:hover { background: transparent; color: var(--on-dark); }
.btn-link {
  font-size: var(--step-label); font-weight: 600;
  letter-spacing: var(--label-track); text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: opacity 0.3s ease;
}
.btn-link:hover { opacity: 0.7; }
.btn-link.on-dark { color: var(--on-dark); }

/* =========================================================
   Nav
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
}
.brand { display: inline-flex; align-items: center; }
/* The logo PNG is a mask, so it takes --logo: charcoal on light (POS),
   off-white on dark (NEG). */
.logo {
  display: block;
  height: 44px;
  aspect-ratio: 718 / 628;
  background: var(--logo);
  -webkit-mask: url(ditoui-logo.png) no-repeat center / contain;
  mask: url(ditoui-logo.png) no-repeat center / contain;
}
.logo-lg { height: 72px; margin-bottom: 20px; }
.nav nav { display: flex; gap: 30px; align-items: center; }
.nav nav a {
  font-size: var(--step-label); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--ink);
}
.nav nav a:hover { color: var(--accent); }
.nav .nav-cta {
  background: var(--sage); color: #fff;
  padding: 10px 20px;
  transition: background 0.4s ease;
}
.nav .nav-cta:hover { background: var(--sage-dark); color: #fff; }
@media (max-width: 760px) {
  .nav nav a:not(.nav-cta) { display: none; }
  .logo { height: 38px; }
}

/* =========================================================
   1. Hero: full-bleed photo, title over it
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--on-dark);
  overflow: hidden;
  background: #2b2a26;
}
.hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Shade so white type reads over a busy, colourful photo */
.hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20,18,14,0.82) 0%, rgba(20,18,14,0.6) 24%, rgba(20,18,14,0.22) 40%, transparent 56%);
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--max);
  margin: 0 auto;
  padding: 104px var(--gutter) clamp(32px, 5vh, 64px);
}
.hero-eyebrow { margin-bottom: 20px; }
@media (max-width: 640px) {
  .hero-inner { padding-top: 96px; padding-bottom: 20px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero h1 { margin-bottom: 14px; }
  .hero-sub { margin-bottom: 16px; }
  .hero-points { margin-bottom: 18px; }
  .hero-points li { padding-top: 8px; }
  .scarcity { margin-top: 12px; }
}
.hero-eyebrow, .hero-sub, .hero .scarcity, .hero-actions { text-shadow: 0 1px 12px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5); }
.hero h1 {
  font-weight: 400;
  font-size: clamp(52px, 12.4vw, 154px);
  line-height: 0.95; letter-spacing: 0.03em;
  white-space: nowrap;
  margin: 0 0 28px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35);
}
.hero h1 em { font-style: italic; }
@media (max-width: 640px) { .hero h1 { white-space: nowrap; font-size: 12.6vw; } }
.hero-sub {
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.25; max-width: 22em;
  margin: 0 0 28px;
}
.hero-sub span { font-style: italic; white-space: nowrap; }
/* Four glanceable points, one line of thought each */
.hero-points {
  list-style: none; padding: 0;
  margin: 0 0 28px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px; max-width: 1060px;
}
.hero-points li {
  border-top: 1px solid rgba(248,246,243,0.55);
  padding-top: 12px;
  font-size: var(--step-0);
  font-weight: 600; line-height: 1.3;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
@media (max-width: 900px) {
  .hero-points { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
}
/* Phones: one calm list instead of a 2x2 grid of ruled boxes */
@media (max-width: 640px) {
  .hero-points { grid-template-columns: 1fr; gap: 6px; }
  .hero-points li { border-top: 0; padding: 0 0 0 22px; position: relative; line-height: 1.25; text-wrap: balance; }
  .hero-points li::before {
    content: ''; position: absolute; left: 0; top: 0.62em;
    width: 12px; height: 1px; background: rgba(248,246,243,0.8);
  }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.scarcity {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 22px; color: var(--accent);
}
.scarcity.on-dark { color: var(--on-dark); }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 25%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* =========================================================
   2. Proof bar
   ========================================================= */
.proof {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step-0); color: var(--mute); letter-spacing: 0.01em;
  line-height: 1.35;
}
.proof-item span {
  display: block;
  font-size: var(--step-2); font-weight: 400;
  color: var(--ink); letter-spacing: 0.02em;
  margin-bottom: 4px;
}
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; gap: 20px; } }

/* =========================================================
   Chapters
   ========================================================= */
.chapter {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section) var(--gutter);
}
/* Full-width tinted band; content keeps the same left edge */
.chapter.tint {
  max-width: none;
  background: var(--tint);
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.chapter-label { color: var(--accent); margin-bottom: var(--space-2); }

.section-title {
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.12; letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}
.section-title em { font-style: italic; color: var(--accent); }

/* Heading stack, one rule for every section:
     label (--step-label, caps)  -> space-2
     title (--step-3)            -> space-3 to a lead, space-4 straight to content
     lead  (--step-2)            -> space-4 to content
   Sub-headings inside a section (names, days, list heads, FAQ
   questions) all share the --step-1 role below. */
.section-title:not(:has(+ .prose-lead, + .prose-note, + .book-lead)) { margin-bottom: var(--space-4); }

.prose-lead, .book-lead {
  font-size: var(--step-2);
  font-weight: 300; line-height: 1.3;
  max-width: var(--measure);
  margin: 0 0 var(--space-4);
}

/* Sub-heading role: sentence case, regular weight, ink */
.host-name, .day h4, .studio-points h3, .filter h3, .included h3, details summary {
  font-size: var(--step-1); font-weight: 400;
  letter-spacing: 0.02em; line-height: 1.25;
  font-style: normal; text-transform: none; color: var(--ink);
}
.prose-lead em { font-style: italic; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.1em; }
.prose em { font-style: italic; }
.prose-note {
  max-width: var(--measure);
  font-size: var(--step-0); color: var(--mute);
  margin: 0 0 var(--space-4);
}

.hola {
  font-weight: 400; font-style: italic;
  font-size: var(--step-4);
  line-height: 1; letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}
.hola span { color: var(--red); font-style: normal; font-weight: 300; }
.chapter.intro { padding-bottom: var(--section); }

/* Sign-off: hands the letter straight to the hosts section below */
.signature {
  margin-top: var(--space-5);
  display: flex; align-items: center; gap: 24px;
  max-width: var(--measure);
}
.sig-faces { display: flex; flex-shrink: 0; }
.sig-faces img {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: center 20%;
  border: 3px solid var(--bg);
  filter: grayscale(1);
}
.sig-faces img + img { margin-left: -18px; }
.sig-hello { font-size: var(--step-0); font-style: italic; color: var(--mute); }
.sig-line { font-size: var(--step-2); font-weight: 400; font-style: italic; line-height: 1.15; letter-spacing: 0.01em; }
.sig-sub { display: inline-block; margin-top: 10px; color: var(--accent); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sig-sub:hover { opacity: 0.7; }

/* =========================================================
   4. Hosts
   ========================================================= */
.hosts { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 720px) { .hosts { grid-template-columns: 1fr; gap: 56px; } }
.host-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--placeholder);
  margin-bottom: 28px;
}
.host-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.host-name {
  margin: 0 0 6px;
}
.host-role { color: var(--accent); margin-bottom: var(--space-2); }

/* =========================================================
   5. Colour gallery
   ========================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(180px, 22vw, 320px);
  gap: 6px;
  padding: 6px;
  background: var(--bg);
}
.gallery figure { position: relative; margin: 0; overflow: hidden; }
.gallery .g-tall { grid-row: span 2; }
.gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s ease;
}
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 18px 14px;
  font-size: var(--step-0); font-style: italic; color: #fff; line-height: 1.3;
  text-wrap: balance;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
}

/* =========================================================
   6. The journey
   ========================================================= */
.arc { max-width: var(--max-text); }

/* Centred sections: only the short head (label, title, lead or note)
   and the single call to action are centred. Anything read line by
   line (cards, lists) stays left-aligned. */
.chapter.centred { text-align: center; }
.chapter.centred .chapter-label,
.chapter.centred .section-title,
.chapter.centred .prose-lead,
.chapter.centred .prose-note { margin-left: auto; margin-right: auto; max-width: var(--measure); }
/* A centred title gets the wider column so a sentence-long title stays at three lines or fewer */
.chapter.centred .section-title, .book .section-title { max-width: var(--measure-wide); }
/* Journey: Then / Now / Next side by side */
.chapter.centred .arc {
  max-width: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  margin-top: 0;
}
.chapter.centred .day {
  display: block; padding: 28px 0 0;
  border-bottom: none; border-top: 2px solid var(--accent);
}
.chapter.centred .day-num { margin-bottom: 12px; }
@media (max-width: 820px) {
  .chapter.centred .arc { grid-template-columns: 1fr; gap: 40px; }
}
.chapter.centred .filter { text-align: left; }
.day {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.day:last-child { border-bottom: none; }
@media (max-width: 640px) {
  .day { grid-template-columns: 52px 1fr; gap: 18px; padding: 28px 0; }
}
.day-num {
  font-size: var(--step-2); font-weight: 300; font-style: italic;
  line-height: 1; color: var(--red);
}
.day h4 {
  margin: 4px 0 10px;
}

/* =========================================================
   7-8. Image + text splits (studios, Colima 71)
   ========================================================= */
.stay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 900px) {
  .stay { grid-template-columns: 1fr; gap: 40px; }
  .stay.flip .stay-img { order: 2; }
}
.stay-img { aspect-ratio: 4 / 5; overflow: hidden; background: var(--placeholder); }

/* Studio visits: short intro + image, then three points to glance at */
.studio-head {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 80px); align-items: center;
  margin-bottom: var(--space-5);
}
.studio-head .prose-lead { margin-bottom: 0; }
.studio-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--placeholder); }
.studio-img img { width: 100%; height: 100%; object-fit: cover; }
.studio-points {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.studio-points li { border-top: 2px solid var(--accent); padding-top: var(--space-2); }
.studio-points h3 { margin: 0 0 10px; }
.studio-points p { line-height: 1.55; }
@media (max-width: 820px) {
  .studio-head { grid-template-columns: 1fr; }
  .studio-points { grid-template-columns: 1fr; gap: 28px; }
}
.stay-img img { width: 100%; height: 100%; object-fit: cover; }
/* Three more looks inside Colima 71, under the text */
.stay-photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.stay-photos .frame { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--placeholder); }
.stay-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .stay-photos { order: 3; } }
@media (max-width: 760px) {
  .stay-photos { grid-template-columns: repeat(3, 72vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); scrollbar-width: none; }
  .stay-photos .frame { scroll-snap-align: start; }
}

/* =========================================================
   9-10. Lists, price
   ========================================================= */
.filter, .included {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
@media (max-width: 720px) { .filter, .included { grid-template-columns: 1fr; gap: 40px; } }
.filter h3, .included h3 { margin: 0 0 var(--space-1); }
.filter ul, .included ul { list-style: none; margin: 0; padding: 0; }
.filter li, .included li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}
.filter li:last-child, .included li:last-child { border-bottom: none; }

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  background: var(--surface);
  margin: 0 0 var(--space-3);
}
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }
.price-cell { padding: 40px 36px; }
.price-cell + .price-cell { border-left: 1px solid var(--rule); }
@media (max-width: 640px) {
  .price-cell + .price-cell { border-left: none; border-top: 1px solid var(--rule); }
}
.price-label { color: var(--mute); margin-bottom: var(--space-1); }
.price-main {
  font-size: var(--step-3); font-weight: 300;
  letter-spacing: 0.02em; line-height: 1.1;
}
.price-main span { font-size: var(--step-label); color: var(--mute); margin-left: 6px; letter-spacing: var(--label-track); }
.food-note { margin-top: var(--space-4); }
.food-note em { font-style: italic; color: var(--accent); }

.section-cta {
  margin-top: var(--space-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
}
.section-cta p { color: var(--mute); max-width: 22em; }

/* =========================================================
   11. Quote: sage band
   ========================================================= */
.quote-section {
  background: var(--sage);
  color: var(--on-dark);
  padding: clamp(90px, 14vw, 160px) var(--gutter);
}
.quote-section figure { max-width: var(--max-text); margin: 0 auto; }
.quote-section blockquote {
  font-size: var(--step-3);
  font-weight: 300; font-style: italic;
  line-height: 1.25;
  margin: 0;
}
.quote-section figcaption {
  margin-top: 28px;
  font-size: var(--step-label); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase;
  opacity: 0.8;
}

/* =========================================================
   12. FAQ
   ========================================================= */
details { border-bottom: 1px solid var(--rule); padding: var(--space-2) 0; max-width: var(--measure-wide); }
details:first-of-type { border-top: 1px solid var(--rule); }
details summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+';
  font-size: var(--step-2); font-weight: 300; line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
}
details[open] summary::after { content: '–'; }
details p { margin: var(--space-1) 0 0; max-width: var(--measure); }

/* =========================================================
   13. Final action: Ditoui blue band
   ========================================================= */
.book {
  position: relative; overflow: hidden;
  background: var(--sage-dark); color: var(--on-dark);
}
.book-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Sage shade over the photo, deepest behind the text */
.book::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(47,52,41,0.94) 0%, rgba(47,52,41,0.88) 60%, rgba(47,52,41,0.74) 100%);
}
.book-inner {
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section) var(--gutter);
}
.book .chapter-label { color: var(--on-dark); opacity: 0.8; }
.book-inner { text-align: center; }
.book .section-title { color: var(--on-dark); margin-left: auto; margin-right: auto; }
.book .section-title em { color: var(--on-dark); }
.book-lead { margin-left: auto; margin-right: auto; }
.book-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 32px; }

/* Video (hidden in the HTML until the file exists) */
.video-section { max-width: var(--max); margin: 0 auto; padding: clamp(60px, 10vw, 120px) var(--gutter); }
.video-frame { background: var(--ink); aspect-ratio: 16 / 9; overflow: hidden; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-caption { margin-top: 20px; color: var(--mute); }

/* =========================================================
   Footer: sage, reversed logo
   ========================================================= */
footer {
  background: var(--sage);
  color: var(--on-dark);
  padding: var(--space-5) var(--edge);
  --logo: var(--on-dark);
}
.footer-inner {
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 48px;
  align-items: end;
}
@media (max-width: 820px) { .footer-inner { grid-template-columns: 1fr; gap: 32px; } }
.footer-tagline { font-size: var(--step-1); font-style: italic; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; }
.footer-contact a:hover { opacity: 0.7; }
.footer-badges {
  display: flex; flex-direction: column; gap: 8px;
  text-align: right; opacity: 0.8;
}
@media (max-width: 820px) { .footer-badges { text-align: left; } }

/* =========================================================
   Scroll banners: words start far apart, close in on scroll.
   main.js sets --p from 0 (apart) to 1 (together).
   ========================================================= */
.spread-banner {
  overflow: hidden;
  background: var(--tint);
  color: var(--ink);
  padding: var(--section) 0;
  text-align: center;
}
.spread-banner.alt { background: var(--sage); color: var(--on-dark); }
.spread-banner.blue { background: var(--blue); color: var(--on-dark); }
.pull-credit {
  margin-top: clamp(28px, 4vw, 44px);
  padding: 0 var(--gutter);
  font-size: var(--step-label); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase;
  opacity: 0.85;
}
/* Each line is fixed, so only the gaps between words move */
.spread-line {
  --p: 0;
  white-space: nowrap;
  font-size: max(clamp(23px, 6.5vw, 104px), var(--body));
  font-weight: 500; line-height: 1.12;
  letter-spacing: -0.005em;
  word-spacing: calc((1 - var(--p)) * 0.9em);
}
@media (max-width: 640px) {
  .btn-solid, .btn-primary { padding: 16px 22px; letter-spacing: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .spread-line { --p: 1 !important; }
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   Photo breaks: full-bleed pictures between text sections
   ========================================================= */
.photo-band, .photo-pair { position: relative; margin: 0; background: #2b2a26; }
.photo-band img {
  display: block; width: 100%;
  height: clamp(360px, 72vh, 820px);
  object-fit: cover;
}
.photo-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.photo-pair img {
  display: block; width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover;
}
.photo-band figcaption, .photo-pair figcaption {
  grid-column: 1 / -1;
  background: var(--bg, #f8f6f3);
  padding: 12px var(--edge) 0;
  color: var(--mute);
  font-style: italic;
  font-size: var(--step-0);
}
.photo-band, .photo-pair { background: transparent; }
@media (max-width: 640px) {
  .photo-band img { height: 62vh; }
  .photo-pair { gap: 2px; }
}

/* =========================================================
   Scroll motion. Everything below only moves when the script
   adds .motion to <html>, which it skips for reduced motion.
   ========================================================= */
.frame { display: block; overflow: hidden; }

.motion .hero-bg, .motion .frame img, .motion .frame video, .motion .book-bg { will-change: transform; }

/* Hero copy arrives in a short sequence on load */
@keyframes dt-rise { from { opacity: 0; transform: translateY(14px); } }
.motion .hero-inner > * { animation: dt-rise 900ms cubic-bezier(0.23, 1, 0.32, 1) both; }
.motion .hero-inner > :nth-child(2) { animation-delay: 70ms; }
.motion .hero-inner > :nth-child(3) { animation-delay: 140ms; }
.motion .hero-inner > :nth-child(4) { animation-delay: 210ms; }
.motion .hero-inner > :nth-child(5) { animation-delay: 280ms; }
.motion .hero-inner > :nth-child(6) { animation-delay: 350ms; }

/* Gallery tiles and the closing words rise into place once */
.motion .gallery figure, .motion .book-inner > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 900ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion .gallery figure.is-in, .motion .book-inner > .is-in { opacity: 1; transform: none; }

/* The peak: Diego and Frida's studios open from a strip,
   edged like the cut-paper flags in the hero */
.photo-band.peak { margin-top: clamp(48px, 12vh, 140px); }
.peak-window { position: relative; }
.motion .peak-window { clip-path: inset(var(--inset, 0%) 0 var(--inset, 0%) 0); }
.motion .peak-window::before, .motion .peak-window::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 1; height: 14px;
  background-size: 28px 14px; background-repeat: repeat-x; pointer-events: none;
}
.motion .peak-window::before { top: var(--inset, 0%); background-image: radial-gradient(circle at 50% 100%, transparent 12.5px, var(--bg, #f8f6f3) 13px); }
.motion .peak-window::after { bottom: var(--inset, 0%); background-image: radial-gradient(circle at 50% 0, transparent 12.5px, var(--bg, #f8f6f3) 13px); }
.motion .peak figcaption { opacity: var(--cap, 1); transition: opacity 400ms ease-out; }

/* <picture> wrappers serve AVIF (much lighter) with JPEG fallback;
   they stay out of the layout so existing image styles still apply. */
picture { display: contents; }

/* Layered hero: the papel picado is split into an inner spiral and outer
   rings over a plain sky, so scrolling flies you into the tunnel.
   The layers load after the page appears; until then the photo shows. */
.hero-layers { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease-out; }
.hero-layers img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: var(--ox, 19%) var(--oy, 41%); will-change: transform;
}
.hero-bg { transition: opacity 600ms ease-out; }
.hero.layers-ready { background: linear-gradient(to bottom, #4D6A97 0%, #5A76A1 100%); }
.hero.layers-ready .hero-layers { opacity: 1; }
.hero.layers-ready .hero-bg { opacity: 0; }

/* Header film (wide screens): fades in over the photo once it plays.
   When it's on, the papel picado layers stay unloaded. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 700ms ease-out;
}
.hero.video-playing .hero-video { opacity: 1; }
.hero-sound {
  position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(32px, 5vh, 64px);
  font: inherit; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--on-dark); background: rgba(20,18,14,0.35);
  border: 1px solid rgba(248,246,243,0.6); padding: 10px 16px; cursor: pointer;
  backdrop-filter: blur(4px);
}
.hero-sound:hover { background: rgba(20,18,14,0.6); }

/* Host film: a phone-shaped player in the hosts section */
.host-film { max-width: 340px; margin: 0 auto var(--space-5); text-align: center; }
/* In the ¡Hola! letter: the film sits beside the letter on wide screens and leads it on phones */
.intro-grid {
  display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(280px, 380px);
  gap: clamp(40px, 7vw, 120px); align-items: center; justify-content: center;
}
.intro-grid .host-film { order: 2; margin: 0; max-width: 380px; width: 100%; }
.intro-copy { order: 1; }
.intro-copy .prose { margin-top: var(--space-4); }
.intro-copy .signature { margin-top: var(--space-4); }
@media (max-width: 900px) {
  .intro-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .intro-grid .host-film { order: 0; position: static; margin: 0 auto; max-width: 320px; }
}
.host-film video { display: block; width: 100%; aspect-ratio: 9 / 16; background: #2b2a26; object-fit: cover; }
.host-film figcaption { margin-top: var(--space-1); font-style: italic; color: var(--mute); font-size: var(--step-0); }
.host-film figcaption span { display: block; font-style: normal; font-size: var(--step-label); font-weight: 500; letter-spacing: var(--label-track); text-transform: uppercase; margin-top: 4px; }
@media (max-width: 720px) { .host-film { max-width: 300px; } }

/* The walk: Charlie's walk through the arcade moves only as you scroll.
   Without motion it is a still scene: poster frame, photo, loop. */
.walk { background: var(--bg); padding: clamp(56px, 8vw, 112px) var(--gutter); }
.walk-stage {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 56px); align-items: center;
}
.walk-film { height: min(80vh, 820px); aspect-ratio: 9 / 16; overflow: hidden; background: #2b2a26; }
.walk-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.walk-side { align-self: stretch; display: flex; flex-direction: column; }
.walk-left { justify-content: space-between; }
.walk-right { justify-content: flex-end; }
.walk-line {
  font-size: clamp(30px, 3.4vw, 52px); font-style: italic; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 32px; max-width: 11ch; text-wrap: balance;
}
.walk-photo { overflow: hidden; aspect-ratio: 3 / 4; background: #2b2a26; width: min(100%, 34vh); max-width: 100%; }
.walk-right { align-items: flex-end; }
.walk-photo img, .walk-photo video { display: block; width: 100%; height: 100%; object-fit: cover; }
.walk-photo video.roots { object-position: 50% 0; }
.walk-right .walk-photo { margin-bottom: 8vh; }
@media (max-width: 760px) {
  .walk-stage { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .walk-right, .walk-left .walk-photo { display: none; }
  .walk-line { text-align: center; margin: 0 auto; }
  .walk-film { height: 70svh; }
}
.motion .walk { height: 260vh; padding: 0; }
.motion .walk-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box;
  padding: 112px var(--gutter) 32px;
}
.motion .walk-film { height: min(calc(100svh - 144px), 860px); }
/* Nothing in the scene may spill into the next section */
.motion .walk-stage { overflow: hidden; }
.motion .walk-side { max-height: calc(100svh - 144px); }
.motion .walk-line, .motion .walk-photo { will-change: transform, opacity; }
@media (max-width: 760px) {
  .motion .walk { height: 230vh; }
  .motion .walk-stage { align-content: center; padding-top: 96px; }
  .motion .walk-film { height: min(64svh, calc(100svh - 280px)); }
  .walk-line { font-size: clamp(26px, 7vw, 32px); }
}

/* Journey: Then, Now and Next as three photo cards. Nothing pins;
   the cards rise in one after another as they arrive. */
#journey .arc { align-items: start; }
#journey .day { text-align: left; border-top: none; padding-top: 0; }
.day-photo { aspect-ratio: 3 / 4; background: #d9cfc0; margin-bottom: 24px; }
.day-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#journey .day-num { margin-bottom: 4px; }
#journey .day h4 { margin-top: 0; }
@media (max-width: 820px) {
  .day-photo { aspect-ratio: 4 / 3; }
}
.motion #journey .day {
  opacity: 0; transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.23, 1, 0.32, 1), transform 1000ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.motion #journey .day.is-in { opacity: 1; transform: none; }

/* =========================================================
   Conversion pass: hero price, fit prompt, price note, trust row
   ========================================================= */
.hero .btn-link.on-dark { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }
.hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  margin-top: 22px;
}
.hero-meta .scarcity { margin-top: 0; }
.hero-price {
  font-size: var(--step-label); font-weight: 500;
  letter-spacing: var(--label-track); text-transform: uppercase; line-height: 1.4;
  color: var(--on-dark); font-variant-numeric: lining-nums;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(248,246,243,0.45); padding-bottom: 2px;
}
.hero-price:hover { border-bottom-color: currentColor; }

.fit-cta {
  margin-top: var(--space-5);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.fit-cta p {
  font-size: var(--step-1);
  font-style: italic; color: var(--ink); margin: 0;
}

.price-note {
  margin: 0 0 var(--space-5);
  color: var(--mute);
  max-width: var(--measure);
}

.trust {
  list-style: none; padding: var(--space-3) 0 0; margin: var(--space-5) 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px 40px;
  font-size: var(--step-label); letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--mute); font-variant-numeric: lining-nums;
}
.trust strong { color: var(--ink); font-weight: 500; }

@media (max-width: 640px) {
  .hero-actions { gap: 16px 24px; }
  .hero-meta { gap: 8px 20px; margin-top: 18px; }
  .hero-price, .trust { letter-spacing: 0.12em; }
  .trust { flex-direction: column; gap: 8px; }
}


/* =========================================================
   Invitation, deadline, how to reserve, past guests
   ========================================================= */
/* Personal line when the link carries ?from=Name */
.hero-invite {
  font-style: italic; font-size: var(--step-1); margin-bottom: var(--space-1);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.scarcity { flex-wrap: wrap; row-gap: 6px; }
.scarcity > span:not(.dot) { white-space: nowrap; }
.deadline::before { content: "·"; margin-right: 12px; }
/* Phones: the deadline gets its own line, lined up under the seats text */
@media (max-width: 640px) {
  .deadline { flex-basis: 100%; padding-left: 20px; }
  .deadline::before { content: none; }
}

/* How to hold your seat: numbered steps under the price */
.reserve {
  max-width: var(--measure-wide);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--rule);
}
.reserve h3 { font-weight: 400; font-size: var(--step-1); margin: 0 0 var(--space-3); }
.reserve ol { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.reserve li {
  counter-increment: step; position: relative;
  padding: 0 0 var(--space-2) 3.2em; margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule); text-wrap: pretty;
}
.reserve li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.reserve li::before {
  content: counter(step, upper-roman) ".";
  position: absolute; left: 0; top: 0.05em; width: 2.4em;
  font-style: italic; color: var(--red);
}
.reserve strong { font-weight: 500; }

/* Past guests */
.testimonials .quotes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-5);
  margin-top: var(--space-4);
}
@media (max-width: 900px) { .testimonials .quotes { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--space-4); } }
.testimonials figure { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.testimonials blockquote {
  margin: 0 0 var(--space-2); font-style: italic; font-size: var(--step-1); line-height: 1.35;
  text-wrap: pretty;
}
.testimonials blockquote::before { content: "\201C"; color: var(--red); font-style: normal; margin-right: 0.05em; }
.testimonials blockquote::after { content: "\201D"; color: var(--red); font-style: normal; }
.testimonials figcaption {
  font-size: var(--step-label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--mute);
}

/* Draft placeholders: obvious on purpose, so nothing ships with one by accident */
.fill { background: #FFF1A8; color: #1A1A1A; padding: 0 0.2em; font-style: normal; }

/* Phones: square host portraits keep the page shorter without losing the faces */
@media (max-width: 720px) { .host-img { aspect-ratio: 1 / 1; } }