/* ═══════════════════════════════════════════════════════════════════════
   The session page's own stylesheet: the nav, the cursor, and every scroll
   scene from the hero down to the reservation dialog. Loaded after
   base.css, and only by a session page.

   An evening that wants a genuinely different layout gets a third sheet of
   its own loaded after this one — see `styles` in data/sessions.js — rather
   than edits in here, which every other evening also wears.
   ═══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════ CUSTOM CURSOR ════════════════════════ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 3000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--beige); }
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--beige-faint);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
}
.cursor-ring.is-hover { width: 58px; height: 58px; border-color: var(--wine-bright); }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ════════════════════════ NAV ════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.75rem) var(--gutter);
  /* scrim */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--surface) 90%, transparent) 0,
    color-mix(in srgb, var(--surface) 90%, transparent) 55%,
    color-mix(in srgb, var(--surface) 35%, transparent) 90%,
    transparent
  );
}
.nav-logo {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--beige);
}
.nav-meta { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.nav-meta .label { color: var(--beige-dim); }
/* a quiet way out of the page, next to the loud one */
.nav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.66rem, 0.8vw, 0.8rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--beige-dim);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--wine-bright); }

.nav-cta {
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.76rem; letter-spacing: 0.28em; text-transform: uppercase;
  text-decoration: none;
  padding: 0.7em 1.6em;
  border: 1px solid var(--beige-faint);
  border-radius: 999px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  background: transparent; color: var(--beige); cursor: pointer;
}
.nav-cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 860px) { .nav-meta .label { display: none; } }

/* ════════════════════════ SCENE / DEPTH SYSTEM ════════════════════════ */
.scene { position: relative; overflow: hidden; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.depth-0 { z-index: 0; }
.depth-1 { z-index: 1; }
.depth-2 { z-index: 2; }
.depth-3 { z-index: 3; }
.depth-4 { z-index: 4; pointer-events: auto; }
.depth-5 { z-index: 5; }

/* ════════════════════════ HERO ════════════════════════ */
.hero {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
}
.hero-bg { background: transparent; }
.glow {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
}
.glow-a {
  width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
  left: 8%; bottom: -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--panel) 5%, transparent), transparent 65%);
  animation: glow-breathe 9s ease-in-out infinite;
}
.glow-b {
  width: 30vw; height: 30vw; max-width: 420px; max-height: 420px;
  right: 6%; top: 8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--text) 4%, transparent), transparent 65%);
  animation: glow-breathe 12s ease-in-out infinite reverse;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* torn-paper collage scraps */
.scrap {
  position: absolute;
  background: var(--beige);
  opacity: 0.025;
}
.scrap-1 {
  width: clamp(120px, 16vw, 260px); height: clamp(150px, 20vw, 330px);
  top: 14%; left: 7%;
  clip-path: polygon(4% 0, 96% 3%, 100% 38%, 93% 72%, 98% 100%, 8% 97%, 0 64%, 5% 30%);
  transform: rotate(-9deg);
  animation: drift 14s ease-in-out infinite;
}
.scrap-2 {
  width: clamp(90px, 12vw, 200px); height: clamp(110px, 15vw, 250px);
  bottom: 16%; right: 9%;
  background: var(--wine);
  opacity: 0.07;
  clip-path: polygon(0 6%, 88% 0, 100% 30%, 92% 66%, 100% 94%, 12% 100%, 0 70%);
  transform: rotate(12deg);
  animation: drift 11s ease-in-out infinite reverse;
}
.scrap-3 {
  width: clamp(60px, 8vw, 130px); height: clamp(60px, 8vw, 130px);
  top: 22%; right: 22%;
  opacity: 0.02;
  clip-path: polygon(10% 0, 100% 12%, 88% 90%, 0 100%);
  transform: rotate(24deg);
  animation: drift 17s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -22px; }
}

/* hero content */
.hero-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(6rem, 12vh, 8rem) var(--gutter) clamp(5rem, 10vh, 7rem);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(4.8rem, 18.5vw, 17rem);
  line-height: 0.86;
  letter-spacing: -0.015em;
  display: flex;
  overflow: visible;
  white-space: nowrap;
}
.hero-title .word { display: inline-block; will-change: transform; }
.hero-title .word-cut { color: var(--wine-bright); position: relative; }
/* the "cut" — a thin slice starting inside the word and rising through the
   number. It reaches far to the left because the number is only two figures
   wide and the slice has to begin inside SESSION to read as a cut at all. */
.hero-title .word-cut { margin-left: 0.14em; }
.hero-title .word-cut::after {
  content: '';
  position: absolute; left: -300%; right: -6%; top: 34%;
  height: 1px;
  background: var(--beige);
  transform: rotate(-3deg);
  opacity: 0.65;
}
/* the one supporting statement — uppercase kicker above the wordmark */
.hero-kicker {
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beige);
}
/* the practical line — Akrobat information layer, solid white */
.hero-info {
  margin-top: clamp(3.2rem, 7vh, 4.8rem);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.2vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beige);
}
.hero-info .dot { color: var(--wine-bright); padding: 0 0.4em; }
.hero-cta { margin-top: clamp(1.5rem, 3.5vh, 2.5rem); padding: 6px; }
.hero-price {
  margin-top: clamp(1.4rem, 3vh, 2rem);
  font-weight: 600;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--beige);
}

.scroll-cue {
  position: absolute; bottom: clamp(1rem, 2.5vh, 2rem); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
@media (max-height: 760px) { .scroll-cue { display: none; } }
.scroll-cue .line {
  width: 1px; height: 56px;
  background: linear-gradient(var(--beige-faint), transparent);
  overflow: hidden; position: relative;
}
.scroll-cue .line::after {
  content: ''; position: absolute; top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--beige);
  animation: cue-drop 2.2s ease-in-out infinite;
}
@keyframes cue-drop { 0% { top: -50%; } 100% { top: 110%; } }

/* FOUC guard */
.preload-hero .hero-content,
.preload-hero .scroll-cue { visibility: hidden; }

/* mask helper for curtain text reveals */
.mask { overflow: hidden; display: block; padding-inline: 0.3em; margin-inline: -0.3em; }
.mask > span { display: block; will-change: transform; }

/* ════════════════════════ HERO STILLS ════════════════════════ */
/* The staged set, shot for the club, drifting behind the wordmark. Dimmed and
   framed so it sets the mood without competing with the mark. The documentary
   frames from an evening do the opposite job and never appear up here. */
.hero-still {
  position: absolute;
  width: clamp(7rem, 16vw, 13rem);
  opacity: 0.34;
  filter: saturate(0.85) contrast(1.05);
  border: 1px solid var(--beige-faint);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.55);
  will-change: transform;
}
.hero-still img { width: 100%; height: auto; display: block; }
.hero-still-1 { top: 12%; left: 6%; transform: rotate(-7deg); }
.hero-still-2 { bottom: 14%; right: 8%; transform: rotate(6deg); }
.hero-still-3 { top: 18%; right: 18%; width: clamp(5rem, 11vw, 9rem); transform: rotate(11deg); }

@media (max-width: 860px) {
  .hero-still { opacity: 0.22; }
  .hero-still-1 { top: 7%; left: -4%; }
  .hero-still-2 { bottom: 8%; right: -5%; }
  .hero-still-3 { display: none; }
}

/* the evening's own name, under the mark */
.hero-session {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--beige);
  margin-top: 0.1em;
}

/* ════════════════════════ LUMA CHECKOUT ════════════════════════ */
/* Luma's embed loads https://embed.lu.ma/checkout-button.css at runtime, so
   its rules land after ours and win on order. It sets, on the base state and
   again on :hover:
     color:#fff · background-color:#123/#234 · border:none · border-radius:100px
     font-size:1rem · font-weight:500 · padding:.5rem 1rem · transition:all
     box-shadow on hover
   Every one of those has to be answered, hover included — answering only the
   background left white text on a near-white button. Two classes beat their
   one, so none of this needs !important. */

.btn-reserve.luma-checkout--button,
.nav-cta.luma-checkout--button,
.footer-link.luma-checkout--button {
  font-family: var(--font-body);
  text-transform: uppercase;
  text-decoration: none;
  background-image: none;
  box-shadow: none;
}

/* ── the main button ── */
.btn-reserve.luma-checkout--button,
.btn-reserve.luma-checkout--button:hover {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  padding: 1.35em 2.8em;
  border: none;
  border-radius: 999px;
  box-shadow: none;
}
.btn-reserve.luma-checkout--button {
  background-color: var(--paper);
  color: var(--ink);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease, color 0.35s ease;
}
.btn-reserve.luma-checkout--button:hover {
  background-color: var(--beige);
  color: var(--ink);
  transform: translateY(-3px);
}
/* on the warm panel the button inverts, as the in-house one does */
.session .btn-reserve.luma-checkout--button {
  background-color: var(--ink);
  color: var(--paper);
}
.session .btn-reserve.luma-checkout--button:hover {
  background-color: var(--surface);
  color: var(--paper);
}

/* ── the small one in the nav ── */
.nav-cta.luma-checkout--button,
.nav-cta.luma-checkout--button:hover {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  padding: 0.7em 1.6em;
  border-radius: 999px;
  box-shadow: none;
}
.nav-cta.luma-checkout--button {
  background-color: transparent;
  color: var(--beige);
  border: 1px solid var(--beige-faint);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.nav-cta.luma-checkout--button:hover {
  background-color: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}

/* ── the plain word in the footer ── */
.footer-link.luma-checkout--button,
.footer-link.luma-checkout--button:hover {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font: inherit;
  box-shadow: none;
}
.footer-link.luma-checkout--button { color: inherit; }
.footer-link.luma-checkout--button:hover { color: var(--wine-bright); }

/* ════════════════════════ ONE-FIELD START ════════════════════════ */
/* The least a booking can ask for is an address. The endpoint still wants a
   name and the payment acknowledgement, so this hands the address to the full
   form rather than inventing a second, weaker way in. Every page that shows
   it also shows a plain reserve button, so JavaScript is never the only path. */
.quick-reserve { margin-top: clamp(2rem, 5vh, 3rem); }
.quick-reserve .label { display: block; color: var(--ink-dim); margin-bottom: 0.7rem; }
.quick-reserve-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  align-items: center;
}
.quick-reserve input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-faint);
  padding: 0.85em 0.1em;
  transition: border-color 0.25s ease;
}
.quick-reserve input[type="email"]::placeholder { color: var(--ink-faint); }
.quick-reserve input[type="email"]:focus { outline: none; border-color: var(--ink); }
.quick-reserve input[type="email"]:user-invalid { border-color: var(--wine); }
.quick-reserve .seats-note { margin-top: 1rem; }

/* ════════════════════════ THE EVENING BEFORE ════════════════════════ */
/* particulars under the title of the evening being shown as evidence */
.gallery-line {
  margin-top: 0.9em;
  color: var(--beige-dim);
  font-style: italic;
}
.gallery-more {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em 2rem;
}

/* ── the way into the evening those photographs came from ── */
/* A small uppercase link was too quiet for the one thing to do after a
   gallery, so it reads as a row: the evening's name, and an arrow that
   travels on hover. */
.evening-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: clamp(1.4rem, 3.5vh, 2rem) 0;
  border-top: 1px solid var(--beige-faint);
  border-bottom: 1px solid var(--beige-faint);
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.evening-link:hover, .evening-link:focus-visible { border-color: var(--wine-bright); }
.evening-link-text { display: flex; flex-direction: column; gap: 0.45em; }
.evening-link-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1;
  transition: color 0.3s ease;
}
.evening-link:hover .evening-link-title { color: var(--wine-bright); }
.evening-link-go {
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1;
  color: var(--beige-dim);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.evening-link:hover .evening-link-go { transform: translateX(0.4em); color: var(--wine-bright); }

/* ════════════════════════ WHAT PEOPLE MADE ════════════════════════ */
.works { padding: clamp(6rem, 14vh, 10rem) var(--gutter); }
.works-inner { max-width: 78rem; margin: 0 auto; }
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: start;
}
.works-item:nth-child(even) { margin-top: clamp(1.2rem, 4vh, 3rem); }

/* ════════════════════════ CUT LINE DIVIDER ════════════════════════ */
.cutline {
  position: relative;
  border: none;
  border-top: 1px dashed var(--beige-faint);
  margin: 0 var(--gutter);
}
.cutline::before {
  content: '✂\FE0E';
  position: absolute; left: clamp(1rem, 8vw, 6rem); top: 50%;
  transform: translateY(-52%) rotate(180deg);
  background: var(--black);
  padding: 0 0.5em;
  color: var(--beige-dim);
  font-size: 1.1rem;
}

/* ════════════════════════ MANIFESTO (word lighting) ════════════════════════ */
.manifesto {
  min-height: 100svh;
  display: flex; align-items: center;
}
.manifesto-inner {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter);
}
.manifesto-text {
  font-size: clamp(1.7rem, 3.6vw, 3.2rem);
  line-height: 1.45;
  font-weight: 400;
}
.manifesto-text .word { color: var(--beige-ghost); transition: color 0.18s ease; }
.manifesto-text .word.lit { color: var(--beige); }
.manifesto-text .word.accent.lit { color: var(--wine-bright); font-style: italic; }
.manifesto-tagline {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  color: var(--beige);
  line-height: 1.15;
}
.manifesto-tagline em { color: var(--wine-bright); font-style: normal; }

/* ════════════════════════ IMAGE SLOTS (placeholders) ════════════════════════ */
.img-slot {
  position: relative;
  border: 1px solid var(--beige-faint);
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, var(--beige-ghost) 14px 15px),
    var(--black-soft);
  overflow: hidden;
}
.img-slot::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--beige-dim);
  text-align: center;
  padding: 1rem;
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.img-slot:has(img)::after { display: none; }
.ratio-34 { aspect-ratio: 3 / 4; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-11 { aspect-ratio: 1 / 1; }

/* ════════════════════════ THE TABLE (atmosphere grid) ════════════════════════ */
.table-section {
  padding: clamp(7rem, 16vh, 12rem) var(--gutter);
}
.offset-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 7.5rem);
  line-height: 0.95;
  margin-bottom: clamp(4rem, 10vh, 7rem);
}
.offset-title .line-1 { display: block; text-align: left; }
.offset-title .line-2 { display: block; text-align: right; color: var(--wine-bright); padding-right: 4%; }

.table-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: start;
}
.table-item { display: flex; flex-direction: column; gap: 1rem; }
.table-item .caption { font-style: italic; color: var(--beige-dim); font-size: 0.95em; }
.table-item-1 { grid-column: 1 / 5; margin-top: 6rem; }
.table-item-2 { grid-column: 5 / 9; }
.table-item-3 { grid-column: 9 / 13; margin-top: 10rem; }
@media (max-width: 860px) {
  .table-item-1, .table-item-2, .table-item-3 { grid-column: 2 / 12; margin-top: 0; }
}

/* ════════════════════════ THE EVENING (recap gallery) ════════════════════════ */
/* Only on a page for an evening that has happened, and only when there are
   photographs to show — see `gallery` in data/sessions.js. */
.gallery { padding: clamp(6rem, 14vh, 10rem) var(--gutter); }
.gallery-inner { max-width: 78rem; margin: 0 auto; }
.gallery-head { margin-bottom: clamp(3rem, 8vh, 5rem); }
.gallery-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1;
  margin-top: 0.3em;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: start;
}
/* on the home page: where to go after the photographs */
.gallery-more {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em 2rem;
}

/* every second photograph sits a little lower, so the grid reads as a page
   someone laid out by hand rather than a contact sheet */
.gallery-item:nth-child(even) { margin-top: clamp(1.5rem, 5vh, 4rem); }

/* ════════════════════════ SESSION 01 PANEL — warm paper ════════════════════════ */
.session {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(7rem, 18vh, 13rem) var(--gutter);
  will-change: clip-path;
}
.session ::selection { background: var(--wine-on-panel); color: var(--paper); }
.session-inner { position: relative; max-width: 72rem; margin: 0 auto; }
.session-kicker { color: var(--ink-dim); }
.session-title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 9rem);
  line-height: 0.92;
  margin: clamp(1.2rem, 3vh, 2rem) 0 clamp(2.5rem, 6vh, 4rem);
}
.session-title .thin { color: transparent; -webkit-text-stroke: 1px var(--ink-dim); }
/* on the warm panel, not the dark ground — see --accent-on-panel */
.session-title .accent { color: var(--wine-on-panel); }
.session-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 860px) { .session-grid { grid-template-columns: 1fr; } }
.session-desc {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  max-width: 46ch;
  color: var(--ink-dim);
}
.session-desc + .session-desc { margin-top: 1.2em; }
.session-facts {
  border-top: 1px dashed var(--ink-faint);
}
.fact {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 2rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--ink-faint);
}
.fact dt.label { color: var(--ink-dim); }
.fact dd { font-style: italic; text-align: right; color: var(--ink); }
.fact dd strong { color: var(--wine-on-panel); font-weight: 600; font-style: normal; }
.session-cta-row {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}

.session .btn-reserve { background: var(--ink); color: var(--paper); }
.session .btn-reserve:hover { background: var(--surface); }
.seats-note { font-style: italic; color: var(--ink-dim); }

/* ════════════════════════ RITUAL STEPS ════════════════════════ */
.ritual {
  padding: clamp(7rem, 16vh, 12rem) var(--gutter);
}
.ritual-inner { max-width: 64rem; margin: 0 auto; }
.ritual-head { margin-bottom: clamp(3.5rem, 8vh, 6rem); }
.ritual-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 1;
  margin-top: 1rem;
}
.step {
  display: grid;
  grid-template-columns: clamp(4rem, 10vw, 8rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: baseline;
  padding: clamp(1.6rem, 4vh, 2.6rem) 0;
  border-top: 1px dashed var(--beige-faint);
}
.step:last-child { border-bottom: 1px dashed var(--beige-faint); }
.step-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  color: var(--wine-bright);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  margin-bottom: 0.35em;
}
.step p { color: var(--beige-dim); max-width: 52ch; }

/* ════════════════════════ WHAT IS INCLUDED ════════════════════════ */
.included {
  padding: clamp(7rem, 16vh, 12rem) var(--gutter);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.included-inner { max-width: 64rem; margin: 0 auto; }
.included-head { margin-bottom: clamp(3rem, 7vh, 5rem); }
.included-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 1;
  margin-top: 1rem;
}
.included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px dashed var(--beige-faint);
  border-left: 1px dashed var(--beige-faint);
}
@media (max-width: 640px) { .included-grid { grid-template-columns: 1fr; } }
.included-item {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: clamp(1.3rem, 3vh, 1.9rem) clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px dashed var(--beige-faint);
  border-right: 1px dashed var(--beige-faint);
}
.included-item .num {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--wine-bright);
}
.included-item p { color: var(--beige); }
.included-item p em { color: var(--beige-dim); font-size: 0.9em; }

/* ════════════════════════ FAQ ════════════════════════ */
.faq {
  padding: clamp(7rem, 16vh, 12rem) var(--gutter);
}
.faq-inner { max-width: 52rem; margin: 0 auto; }
.faq-head { margin-bottom: clamp(3rem, 7vh, 5rem); }
.faq-head h2 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 1;
  margin-top: 1rem;
}
.faq-item { border-top: 1px dashed var(--beige-faint); }
.faq-item:last-child { border-bottom: 1px dashed var(--beige-faint); }
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding: clamp(1.2rem, 3vh, 1.7rem) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--wine-bright); }
.faq-item summary .faq-mark {
  font-family: var(--font-display);
  color: var(--wine-bright);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] summary .faq-mark { transform: rotate(45deg); }
.faq-item .faq-answer {
  padding: 0 0 clamp(1.4rem, 3vh, 1.9rem);
  max-width: 56ch;
  color: var(--beige-dim);
}

/* ════════════════════════ FINAL CTA ════════════════════════ */
.finale {
  position: relative;
  min-height: 92svh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding-top: clamp(5rem, 11vh, 7.5rem);
  padding-bottom: clamp(2rem, 5vh, 4rem);
}
.finale-content { position: relative; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; }
.finale-title {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 13vw, 13rem);
  line-height: 0.9;
  margin: clamp(1.5rem, 3vh, 2.2rem) 0;
}
.finale-title .outline { color: transparent; -webkit-text-stroke: 1.5px var(--beige); }
.finale-sub {
  font-style: italic; color: var(--beige-dim);
  max-width: 36ch;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}
.finale-meta {
  display: flex; align-items: baseline; gap: clamp(1.25rem, 3vw, 2.25rem);
  flex-wrap: wrap; justify-content: center;
  margin-bottom: clamp(2.25rem, 5vh, 3.5rem);
}
.finale-meta .label { color: var(--beige); }
.finale-meta .dot { color: var(--wine-bright); }

/* ════════════════════════ RESERVE MODAL ════════════════════════ */
.reserve-dialog {
  width: min(92vw, 30rem);
  max-height: 88vh;
  overflow-y: auto;
  margin: auto;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--paper);
  color: var(--ink);
  border: none;
  border-radius: 18px;
}
.reserve-dialog::backdrop {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.reserve-dialog[open] { animation: reserve-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes reserve-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.reserve-close {
  position: absolute; top: clamp(1rem, 3vw, 1.5rem); right: clamp(1rem, 3vw, 1.5rem);
  width: 2.2rem; height: 2.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1;
  background: none; border: 1px solid var(--ink-faint); border-radius: 50%;
  color: var(--ink); cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.reserve-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reserve-kicker { color: var(--ink-dim); margin-bottom: 0.6rem; }
.reserve-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 1.9rem);
  line-height: 1.15;
  margin-bottom: 0.8rem;
}
.reserve-sub { color: var(--ink-dim); font-style: italic; margin-bottom: 1.8rem; line-height: 1.5; }
.reserve-field { display: block; margin-bottom: 1.2rem; }
.reserve-field .label { display: block; color: var(--ink-dim); margin-bottom: 0.5rem; }
.reserve-field input, .reserve-field select {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none; border-bottom: 1px solid var(--ink-faint);
  padding: 0.6em 0.1em;
  transition: border-color 0.25s ease;
}
.reserve-field input:focus, .reserve-field select:focus {
  outline: none; border-color: var(--ink);
}
.reserve-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reserve-error {
  color: var(--wine-on-panel); font-size: 0.9rem; margin-bottom: 1rem;
}
.reserve-consent {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin: 0.3rem 0 1.7rem;
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1.5;
  color: var(--ink-dim);
  cursor: pointer;
}
.reserve-consent input[type="checkbox"] {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--wine-on-panel);
  cursor: pointer;
}
.reserve-submit {
  width: 100%; justify-content: center; margin-top: 0.6rem;
  background: var(--wine-on-panel); color: var(--paper);
}
.reserve-submit:hover { background: var(--wine); }
.reserve-submit:disabled { opacity: 0.6; cursor: progress; transform: none; }
.reserve-success .btn-reserve { width: 100%; justify-content: center; margin-top: 0.6rem; }