/* ============================================================================
   EGORA · page styles. The engine (scrollcraft.css) is the mechanism and is not
   edited; this file themes its tokens and styles the page's own markup.
   ========================================================================== */

:root {
  /* Afternoon: travertine ivory, warm ink, one oxblood accent. */
  --ivory: #F3EEE6;
  --stone: #EAE3D8;
  --ink: #1E1B17;
  --ink-soft: #5B5249;
  --oxblood: #5E2426;

  /* Evening: warm umber. The accent keeps its hue and gains lightness so it
     still clears contrast on the dark ground (one hue, two stops). */
  --umber: #2A211B;
  --umber-deep: #221A15;
  --bone: #EFE7DB;
  --bone-soft: #BDAF9D;
  --rose: #D6A3A1;

  --sc-canvas: var(--ivory);
  --sc-surface: var(--stone);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--oxblood);
  --sc-accent-ink: #F6F1E9;

  /* A light, high-contrast display serif for anything set large, and a quiet
     grotesk for everything read at text size. Nothing is set in tracked
     capitals: at this register, restraint is sentence case. */
  --sc-font-display: "Noto Serif Display", "Didot", "Bodoni 72", "Times New Roman", serif;
  --sc-font-text: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --sc-section: clamp(5.5rem, 11vw, 12rem);
  --sc-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --grid-gap: clamp(1rem, 2.2vw, 2rem);
  --maxw: 90rem;
  --bar-h: 4rem;

  --hair: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --hair-strong: color-mix(in oklab, var(--sc-ink) 30%, transparent);
  --sc-shadow-color: 24 30% 14%;

  /* Weighted, unhurried curves. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  background: var(--umber-deep);
  -webkit-tap-highlight-color: transparent;
}
body {
  background: var(--ivory);
  font-weight: 400;
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  letter-spacing: -0.003em;
}
.sc-grain { opacity: 0.028; z-index: 3; }

a, button { touch-action: manipulation; }
button { cursor: pointer; }
:focus-visible { outline: 1px solid var(--sc-accent); outline-offset: 4px; border-radius: 0; }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--ink); color: var(--ivory);
  font-size: 0.875rem; text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.chapter { padding-block: var(--sc-section); position: relative; }

/* ------------------------------------------------------------ typography -- */
.display {
  font-family: var(--sc-font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
  color: var(--sc-ink);
}
.display--xl { font-size: clamp(2.9rem, 1.6rem + 4.4vw, 6.2rem); line-height: 1; letter-spacing: -0.03em; }
.display--lg { font-size: clamp(2.2rem, 1.45rem + 2.6vw, 4rem); }

/* The lede is read, so it gets the regular weight: a display cut's hairlines
   thin out below ~24px. */
.lede {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.12rem + 0.55vw, 1.65rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--sc-ink);
  max-width: 38ch;
  text-wrap: pretty;
  margin: 0;
}
.body {
  color: var(--sc-ink-soft);
  line-height: 1.75;
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}
.caption {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--sc-ink-soft);
  max-width: 34ch;
}
.label, .field label, .field__label, .visit__label, .note cite, .signature__role {
  display: block;
  font-family: var(--sc-font-text);
  font-style: normal;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--sc-ink-soft);
}

/* --------------------------------------------------------------- wordmark --
   Set like a masthead: the name in mixed case, light, tightly fitted, so the
   long tail of the g carries the character. A plain line of text beneath says
   what and where. No tracked capitals, no ornament. */
.wm {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--sc-font-display);
  color: var(--sc-ink);
  text-decoration: none;
}
/* Room below the baseline for the g's descender inside the reveal mask. */
.wm__mask { display: block; overflow: hidden; padding-bottom: 0.24em; margin-bottom: -0.24em; }
.wm__name {
  display: block;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.9;
  margin-left: -0.04em; /* optical: the E's serif hangs outside the column */
}
.wm__place {
  display: block;
  margin-top: 1.35rem;
  font-family: var(--sc-font-text);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0;
  line-height: 1;
  color: color-mix(in oklab, var(--sc-ink) 78%, transparent);
}
.wm--bar {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1;
}

/* ---------------------------------------------------------------- buttons -- */
/* Sentence case, the text face at reading size, and a small arrow that
   leans forward on hover. The weight of the button comes from its colour,
   not from shouting. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 3rem;
  padding: 0 1.3rem 0 1.4rem;
  border: 0; border-radius: 0;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  font: 500 0.9375rem/1 var(--sc-font-text);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none; user-select: none;
  transition: transform 160ms var(--ease-out), background-color 220ms ease, opacity 300ms var(--ease-out);
}
.btn__arrow { display: inline-block; font-weight: 400; transition: transform 300ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn--bar { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.875rem; }
.btn--full { width: 100%; min-height: 3.4rem; margin-top: 1.6rem; }

.link {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0;
  border: 0; background: none;
  color: inherit;
  font: 500 0.9375rem/1.2 var(--sc-font-text);
  letter-spacing: -0.005em;
  text-decoration: none;
}
/* A resting hairline, and a second one that grows over it on hover. */
.link::before, .link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform-origin: 0 50%;
}
.link::before { opacity: 0.3; }
.link::after { transform: scaleX(0); transition: transform 420ms var(--ease-out); }
.link--inline {
  padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: none;
}
.link--inline::before, .link--inline::after { bottom: -2px; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 84%, var(--ink)); }
  .evening .btn:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); }
  .link:hover::after { transform: scaleX(1); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
  .frame:hover img { scale: 1.03; }
  .bar__nav a:hover::after { transform: scaleX(1); }
}

/* ----------------------------------------------------------------- frames -- */
.frame { position: relative; overflow: hidden; background: color-mix(in oklab, var(--sc-ink) 7%, var(--sc-canvas)); margin: 0; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-slow); }
/* A slow settle as the image travels through the viewport. --sc-p comes from
   the nearest act; outside an act it resolves to 1, which is scale(1). */
.zoom-in { transform: scale(calc(1.09 - 0.09 * min(1, var(--sc-p, 1) * 1.6))); will-change: transform; }
figure { margin: 0; }

/* -------------------------------------------------------------------- bar -- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--sc-gutter) 0;
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem);
  color: var(--ink);
  --bar-bg: var(--ivory);
}
.bar[data-tone="evening"] {
  --bar-bg: var(--umber);
  --sc-ink: var(--bone); --sc-accent: var(--rose); --sc-accent-ink: var(--umber);
  color: var(--bone);
}
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--bar-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
  border-bottom: 1px solid color-mix(in oklab, currentColor 12%, transparent);
  opacity: 0;
  transition: opacity 500ms var(--ease-out), background-color 500ms ease;
}
.bar[data-state="solid"]::before { opacity: 1; }
.bar__mark { color: inherit; text-decoration: none; }
.bar__mark, .bar__nav {
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease-out), visibility 0s linear 500ms;
}
/* inherit, not visible: a child set to visible would stay painted even when
   the bar itself is hidden. */
.bar[data-state="solid"] .bar__mark, .bar[data-state="solid"] .bar__nav {
  opacity: 1; visibility: inherit;
  transition: opacity 500ms var(--ease-out), visibility 0s;
}
.bar__nav { margin-left: auto; display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.bar__nav a {
  position: relative;
  color: inherit; text-decoration: none;
  font-size: 0.875rem; letter-spacing: -0.005em;
  padding: 0.4rem 0;
}
.bar__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 420ms var(--ease-out);
}
.btn--bar { margin-left: auto; }
.bar__nav + .btn--bar { margin-left: 0; }
.bar[data-cta="off"] .btn--bar { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms; }

/* ------------------------------------------------------------------- hero -- */
.hero__stage { background: #1d1813; }
.hero__media {
  object-position: 30% 50%;
  transform-origin: 62% 56%;
  transform: scale(calc(1 + var(--sc-p, 0) * 0.05));
  will-change: transform;
}
/* Atmosphere: warm window light arriving from the left. */
.hero__glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 80% at 6% 40%, rgba(255, 239, 210, 0.6), rgba(255, 239, 210, 0) 70%);
  mix-blend-mode: soft-light;
  opacity: clamp(0, var(--sc-p, 0) * 1.5, 1);
  transform: translate3d(calc((1 - min(1, var(--sc-p, 0) * 1.6)) * -14%), 0, 0);
}
/* A column of light under the copy only. It rises with the light, so the
   shadowed opening frames stay shadowed. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(243, 238, 230, 0.72) 0%, rgba(243, 238, 230, 0.55) 16%,
    rgba(243, 238, 230, 0.2) 27%, rgba(243, 238, 230, 0) 34%);
  opacity: clamp(0, (var(--sc-p, 0) - 0.08) * 3.2, 1);
}
.hero__copy {
  position: absolute; z-index: 2;
  left: var(--sc-gutter); top: 0; bottom: 0;
  width: min(25vw, 25rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(2rem, 5vh, 3.25rem);
  padding-top: var(--bar-h);
  color: var(--ink);
}
/* Sized so the name stays over the curtain and never reaches the dark wall or
   the plate behind it (measured: at 1440px the wall starts near 27% width). */
.wm--hero .wm__name {
  font-size: clamp(4rem, 2.2rem + 4.6vw, 7.4rem);
  transform: translate3d(0, calc((1 - clamp(0, (var(--sc-p, 0) - 0.14) / 0.2, 1)) * 132%), 0);
}
.wm--hero .wm__place { transform: translate3d(0, calc((1 - clamp(0, (var(--sc-p, 0) - 0.2) / 0.16, 1)) * 0.6rem), 0); }
.hero__line {
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  font-family: var(--sc-font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 1.1rem + 1.35vw, 2.45rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 13ch;
  text-wrap: balance;
}
.hero__sub { margin: 0 0 1.6rem; max-width: 30ch; line-height: 1.6; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
/* Foreground: a sheer curtain close to the lens, drawn out of frame first. */
.hero__curtain {
  position: absolute; z-index: 3; left: -2%; top: -3%; height: 106%;
  pointer-events: none;
  transform: translate3d(calc(min(1, var(--sc-p, 0) * 2.6) * -110%), 0, 0);
  will-change: transform;
}
.hero__curtain img { height: 100%; width: auto; max-width: none; }

/* ------------------------------------------------------------- philosophy -- */
.philosophy { background: var(--ivory); }
/* Chapters that follow a pinned act: the stage already spends a viewport
   sliding off, so full section padding on top reads as an empty screen. */
.philosophy, .details { padding-top: clamp(3rem, 5vw, 5rem); }
.philosophy__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.philosophy__portrait { grid-column: 1 / 6; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.philosophy__text { grid-column: 7 / 12; grid-row: 1; padding-top: clamp(0rem, 4vw, 4rem); }
.philosophy__text .display { font-size: clamp(2.1rem, 1.4rem + 2.3vw, 3.7rem); }
.philosophy__text .lede { margin-top: 2.6rem; }
.philosophy__text .body { margin-top: 1.4rem; }
.signature { margin: 2.4rem 0 0; }
.signature__name { display: block; font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: 1.75rem; letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 0.4rem; }
.philosophy__film { grid-column: 8 / 12; grid-row: 2; margin-top: clamp(3rem, 6vw, 5rem); }
.film { position: relative; overflow: hidden; }
.philosophy__film .film { aspect-ratio: 16 / 9; }
.film__poster, .film__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.film__video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.film.is-playing .film__video { opacity: 1; }

/* --------------------------------------------------------- tasting menu -- */
.menu { background: var(--ivory); border-top: 1px solid var(--hair); }
.menu__head .lede { margin-top: 2rem; }
.courses { list-style: none; margin: 0; padding: 0; }
.course {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  max-width: var(--maxw);
  margin: clamp(5rem, 11vw, 10.5rem) auto 0;
  padding-inline: var(--sc-gutter);
}
.course__img, .course__text { grid-row: 1; }
.course__img { aspect-ratio: 4 / 5; }
.course__name {
  margin: 0 0 1rem;
  font-family: var(--sc-font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 1.5rem + 2.1vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.course__desc { margin: 0; color: var(--ink-soft); line-height: 1.7; max-width: 32ch; }

.course--a .course__img { grid-column: 2 / 7; }
.course--a .course__text { grid-column: 8 / 12; align-self: end; padding-bottom: 8%; }
.course--b .course__img { grid-column: 7 / 12; }
.course--b .course__text { grid-column: 2 / 6; align-self: start; padding-top: 12%; }
.course--c .course__img { grid-column: 1 / 9; aspect-ratio: 4 / 3; }
.course--c .course__text { grid-column: 9 / 13; align-self: center; padding-left: 12%; }
.course--d .course__img { grid-column: 4 / 9; }
.course--d .course__text { grid-column: 10 / 13; align-self: end; }
.course--e .course__img { grid-column: 8 / 12; }
.course--e .course__text { grid-column: 3 / 7; align-self: center; }
.course--f .course__img { grid-column: 2 / 7; }
.course--f .course__text { grid-column: 8 / 12; align-self: start; padding-top: 18%; }
.course--g .course__img { grid-column: 2 / 12; aspect-ratio: 4 / 3; }
.course--g .course__text { grid-column: 2 / 7; grid-row: 2; margin-top: 2rem; }

.price {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
  margin-top: clamp(6rem, 12vw, 11rem);
}
.price__list { grid-column: 1 / 8; margin: 0; border-top: 1px solid var(--hair); padding-top: 2.25rem; }
.price__row { display: flex; align-items: baseline; gap: 1.25rem; padding-block: 0.6rem; }
.price__row dt {
  flex: 1; display: flex; align-items: baseline; gap: 1.25rem;
  font-family: var(--sc-font-display); font-weight: 300;
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.5rem);
  line-height: 1.1;
}
.price__row dt::after { content: ""; flex: 1; border-bottom: 1px dotted var(--hair-strong); transform: translateY(-0.25em); }
.price__row dd { margin: 0; font-weight: 500; font-size: 0.9375rem; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.price__note { grid-column: 9 / 13; margin: 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.7; }

/* ------------------------------------------------------------------ sauce -- */
.sauce__stage {
  background: var(--ivory);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
  padding: var(--bar-h) var(--sc-gutter) 0;
  border-top: 1px solid var(--hair);
}
.sauce__text { grid-column: 1 / 5; grid-row: 1; }
.sauce__title { font-size: clamp(2.1rem, 1.35rem + 2.2vw, 3.6rem); margin-bottom: clamp(2rem, 5vh, 3rem); }
/* The steps accumulate like a recipe card: each one arrives and stays. */
.sauce__lines { display: grid; gap: 1.1rem; }
.sauce__lines > p {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
  line-height: 1.38;
  max-width: 26ch;
  color: var(--ink);
}
.sauce__last { font-style: italic; margin-top: 0.6rem !important; padding-top: 1.1rem !important; border-top: 1px solid var(--hair); }
.sauce__frame { grid-column: 5 / 13; grid-row: 1; aspect-ratio: 16 / 9; }
.sauce__still { display: none; }

/* ---------------------------------------------------------------- details -- */
.details { background: var(--stone); }
.details__head .body { margin-top: 1.25rem; }
.details__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(2rem, 6vw, 5rem);
}
.detail .frame { aspect-ratio: 1; }
.detail--caviar { grid-column: 1 / 7; grid-row: 1; }
.detail--bread { grid-column: 9 / 12; grid-row: 1; margin-top: clamp(6rem, 16vw, 15rem); }
.detail--champagne { grid-column: 4 / 8; grid-row: 2; margin-top: clamp(4rem, 9vw, 8rem); }
.detail--wine { grid-column: 10 / 13; grid-row: 2; margin-top: clamp(8rem, 18vw, 16rem); }

/* ---------------------------------------------------------------- evening -- */
.evening {
  --sc-canvas: var(--umber);
  --sc-ink: var(--bone);
  --sc-ink-soft: var(--bone-soft);
  --sc-accent: var(--rose);
  --sc-accent-ink: var(--umber);
  --hair: color-mix(in oklab, var(--bone) 14%, transparent);
  --hair-strong: color-mix(in oklab, var(--bone) 32%, transparent);
  --sc-shadow-color: 20 35% 5%;
  background: var(--umber);
  color: var(--sc-ink);
}
.evening .course__desc, .evening .body { color: var(--sc-ink-soft); }

.room__head .lede { margin-top: 2rem; max-width: 40ch; }
.room__film-act { margin-top: clamp(4rem, 8vw, 7rem); }
/* The room opens like the curtains in the hero, from the centre outward. */
.room__film {
  aspect-ratio: 21 / 9;
  --open: clamp(0, var(--sc-p, 1) * 3.4, 1);
  clip-path: inset(0 calc((1 - var(--open)) * 50%) 0 calc((1 - var(--open)) * 50%));
}
.room__pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  margin-top: clamp(5rem, 10vw, 9rem);
}
.room__item--salon { grid-column: 1 / 8; }
.room__item--salon .frame { aspect-ratio: 16 / 10; }
.room__item--pass { grid-column: 9 / 13; margin-top: clamp(6rem, 14vw, 13rem); }
.room__item--pass .frame { aspect-ratio: 4 / 5; }
.room__name { margin: 1.5rem 0 0.6rem; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); line-height: 1.1; }

.cellar { border-top: 1px solid var(--hair); }
.cellar__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.cellar__text { grid-column: 1 / 5; grid-row: 1; padding-top: 2rem; }
.cellar__arch { grid-column: 6 / 13; grid-row: 1 / span 2; aspect-ratio: 5 / 6; }
.cellar__glass {
  grid-column: 3 / 7; grid-row: 2; align-self: end;
  aspect-ratio: 1; margin-bottom: clamp(-7rem, -8vw, -3rem); z-index: 2;
  box-shadow: var(--sc-e3);
}
.note { margin: 2.6rem 0 0; }
.note p {
  margin: 0;
  font-family: var(--sc-font-display);
  font-style: italic; font-weight: 400; letter-spacing: -0.012em;
  font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.85rem);
  line-height: 1.42;
  color: var(--sc-ink);
  max-width: 30ch;
}
.note footer { margin-top: 1.6rem; }

/* ------------------------------------------------------------ reservation -- */
.reserve { position: relative; padding-top: clamp(7rem, 12vw, 11rem); }
.reserve__main { position: relative; isolation: isolate; padding-block: clamp(5rem, 9vw, 8rem); }
.reserve__bg { position: absolute; inset: 0; z-index: -2; }
.reserve__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--umber) 0%, rgba(42, 33, 27, 0) 20%, rgba(42, 33, 27, 0) 78%, var(--umber) 100%),
    linear-gradient(90deg, rgba(42, 33, 27, 0.93) 0%, rgba(42, 33, 27, 0.8) 34%, rgba(42, 33, 27, 0.38) 58%, rgba(42, 33, 27, 0.5) 100%);
}
.reserve__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: start;
}
.reserve__intro { grid-column: 1 / 6; padding-top: clamp(1rem, 4vw, 4rem); }
.reserve__intro .lede { margin-top: 2rem; }
.reserve__intro .body { margin-top: 1.25rem; }
.booking {
  grid-column: 7 / 13;
  background: rgba(34, 26, 21, 0.95);
  border: 1px solid var(--hair);
  box-shadow: var(--sc-e3), inset 0 1px 0 color-mix(in oklab, var(--bone) 7%, transparent);
  padding: clamp(1.5rem, 3.2vw, 3rem);
}

/* The signature: a table that sets itself for the party. */
.plan { margin: 0 0 2rem; display: grid; justify-items: center; gap: 0.9rem; }
.plan__svg { width: min(100%, 18rem); height: auto; overflow: visible; }
.plan__table { fill: #30261F; stroke: color-mix(in oklab, var(--rose) 50%, transparent); stroke-width: 1; }
.plan__candle { fill: var(--bone); opacity: 0.4; transition: opacity 700ms ease; }
.plan__glow { opacity: 0; transition: opacity 1100ms var(--ease-out); }
.plan.is-lit .plan__candle { opacity: 1; }
.plan.is-lit .plan__glow { opacity: 1; animation: flicker 2.7s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 37% { opacity: 0.86; } 58% { opacity: 0.97; } 81% { opacity: 0.9; } }
.seat {
  transform-box: view-box;
  transform-origin: 160px 160px;
  transform: rotate(var(--a, 540deg));
  opacity: 0;
}
.plan.is-ready .seat { transition: transform 820ms var(--ease-in-out), opacity 480ms var(--ease-out); }
.seat.is-on { opacity: 1; }
.seat__chair { fill: none; stroke: var(--bone-soft); stroke-width: 1.2; stroke-linecap: round; }
.seat__plate { fill: rgba(239, 231, 219, 0.08); stroke: rgba(239, 231, 219, 0.78); stroke-width: 0.9; }
.seat__rim { fill: none; stroke: rgba(239, 231, 219, 0.32); stroke-width: 0.8; }
.seat__glass { fill: none; stroke: var(--rose); stroke-width: 0.9; }
.plan__caption { text-align: center; }
.plan__party { display: block; font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: 1.65rem; letter-spacing: -0.015em; line-height: 1.15; }
.plan__when { display: block; margin-top: 0.45rem; font-size: 0.875rem; color: var(--sc-ink-soft); }

.form { transition: opacity 280ms var(--ease-out), filter 280ms var(--ease-out); }
.form.is-leaving { opacity: 0; filter: blur(3px); }
.form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.field { margin-top: 1.4rem; }
.field label, .field__label { margin-bottom: 0.2rem; }
.field input, .field select {
  display: block; width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0;
  border: 0; border-bottom: 1px solid var(--hair-strong); border-radius: 0;
  background: transparent;
  color: var(--sc-ink);
  font: 400 1rem/1.3 var(--sc-font-text);
  color-scheme: dark;
  -webkit-appearance: none; appearance: none;
  transition: border-color 200ms ease;
}
.field select {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:invalid { color: var(--sc-ink-soft); }
.field option { background: var(--umber-deep); color: var(--bone); }
.field input:focus-visible, .field select:focus-visible { outline: none; border-bottom-color: var(--rose); box-shadow: 0 1px 0 var(--rose); }
.field [aria-invalid="true"] { border-bottom-color: #E9B3AC; }
.field__err { margin: 0.45rem 0 0; min-height: 1.1rem; font-size: 0.8125rem; line-height: 1.35; color: #EDBDB6; }
.stepper { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.6rem; }
.stepper__btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong); border-radius: 0; background: transparent;
  color: var(--sc-ink); font: 300 1.25rem/1 var(--sc-font-text);
  -webkit-user-select: none; user-select: none;
  transition: transform 140ms var(--ease-out), border-color 200ms ease, opacity 200ms ease;
}
.stepper__btn:active { transform: scale(0.94); }
.stepper__btn[disabled] { opacity: 0.3; cursor: default; }
.stepper__value { min-width: 2ch; text-align: center; font-family: var(--sc-font-display); font-size: 2rem; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .stepper__btn:not([disabled]):hover { border-color: var(--rose); }
}
.form__small { margin: 0.9rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--sc-ink-soft); }
.confirm { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.confirm.is-entering { opacity: 0; transform: translateY(8px); }
.confirm__title { margin: 0; font-family: var(--sc-font-display); font-weight: 300; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: 1.1; outline: none; }
.confirm__body { margin: 1.1rem 0 0; font-family: var(--sc-font-display); font-size: 1.35rem; line-height: 1.45; max-width: 30ch; }
.confirm__back { margin-top: 1.75rem; }

.visit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
  padding-block: clamp(5rem, 10vw, 9rem) var(--sc-section);
}
.visit__img { grid-column: 1 / 8; aspect-ratio: 16 / 10; }
.visit__info { grid-column: 9 / 13; display: grid; gap: 2.25rem; }
.visit__block p { margin: 0.7rem 0 0; line-height: 1.7; }
.visit__label { margin: 0; }

/* ----------------------------------------------------------------- footer -- */
.foot { background: var(--umber-deep); padding: clamp(4.5rem, 8vw, 7rem) 0 2rem; border-top: 1px solid var(--hair); }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
}
.foot__mark { grid-column: 1 / 6; color: inherit; text-decoration: none; }
.wm--foot .wm__name { font-size: clamp(3.6rem, 2.2rem + 4.4vw, 7rem); }
.foot__col { grid-row: 1; font-size: 0.875rem; line-height: 1.75; color: var(--sc-ink-soft); }
.foot__col:nth-child(2) { grid-column: 7 / 9; }
.foot__col:nth-child(3) { grid-column: 9 / 11; }
.foot__col:nth-child(4) { grid-column: 11 / 13; }
.foot__col p { margin: 0; }
.foot__small { margin-top: clamp(3.5rem, 7vw, 6rem); }
.foot__small p { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--hair); font-size: 0.75rem; line-height: 1.6; color: var(--sc-ink-soft); }

/* ================================================================ mobile == */
@media (max-width: 1100px) {
  .bar__nav { display: none; }
  .bar__nav + .btn--bar { margin-left: auto; }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .hero__copy { width: min(30vw, 22rem); }
}

@media (max-width: 860px) {
  :root { --bar-h: 3.5rem; }
  .bar__nav { display: none; }
  .btn--bar { min-height: 2.4rem; padding: 0 0.95rem; font-size: 0.8125rem; }

  .hero__media { object-position: 50% 50%; transform-origin: 50% 50%; }
  .hero__copy {
    left: var(--sc-gutter); right: var(--sc-gutter); width: auto;
    justify-content: space-between; gap: 0;
    padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 1.25rem) 0 calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(243, 238, 230, 0.9) 0%, rgba(243, 238, 230, 0.74) 24%, rgba(243, 238, 230, 0.3) 34%, rgba(243, 238, 230, 0) 42%,
      rgba(243, 238, 230, 0) 66%, rgba(243, 238, 230, 0.6) 82%, rgba(243, 238, 230, 0.86) 100%);
  }
  .hero__glow { background: radial-gradient(90% 60% at 0% 30%, rgba(255, 239, 210, 0.55), rgba(255, 239, 210, 0) 70%); }
  .wm--hero .wm__name { font-size: 3.7rem; }
  .hero__line { font-size: 1.6rem; margin-top: 1.25rem; max-width: 15ch; }
  .wm--hero .wm__place { margin-top: 1.05rem; }
  .hero__sub { font-size: 0.9375rem; margin-bottom: 1.1rem; max-width: 34ch; }
  .hero__curtain { left: -6%; }

  .philosophy__grid, .details__grid, .room__pair, .cellar__grid, .reserve__grid, .visit, .price, .foot__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .philosophy__portrait { grid-column: 1 / 6; grid-row: 1; }
  .philosophy__text { grid-column: 1 / -1; grid-row: 2; padding-top: 2.5rem; }
  .philosophy__film { grid-column: 2 / -1; grid-row: 3; margin-top: 3rem; }

  .course { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 4.5rem; }
  .course .course__img, .course .course__text { grid-row: auto; padding: 0; align-self: start; }
  .course .course__text { margin-top: 1.4rem; }
  .course--a .course__img, .course--d .course__img, .course--f .course__img { grid-column: 1 / 6; }
  .course--b .course__img, .course--e .course__img { grid-column: 2 / -1; }
  .course--c .course__img, .course--g .course__img { grid-column: 1 / -1; }
  .course .course__text { grid-column: 1 / -1; }
  .course--b .course__text, .course--e .course__text { grid-column: 2 / -1; }

  .price__list, .price__note { grid-column: 1 / -1; }
  .price__note { margin-top: 1.5rem; }

  .sauce__stage {
    display: flex; flex-direction: column; justify-content: center; gap: 1.4rem;
    padding: calc(var(--bar-h) + 0.75rem) var(--sc-gutter) 1.25rem;
  }
  .sauce__frame { order: -1; width: min(100%, 46svh); aspect-ratio: 1; align-self: center; flex: none; }
  .sauce__title { font-size: 1.85rem; margin-bottom: 1rem; }
  .sauce__lines { gap: 0.45rem; }
  .sauce__lines > p { font-size: 1.05rem; line-height: 1.32; max-width: 34ch; }
  .sauce__last { margin-top: 0.25rem !important; padding-top: 0.55rem !important; }

  .detail--caviar { grid-column: 1 / -1; grid-row: auto; }
  .detail--bread { grid-column: 3 / -1; grid-row: auto; margin-top: 3.5rem; }
  .detail--champagne { grid-column: 1 / 5; grid-row: auto; margin-top: 3.5rem; }
  .detail--wine { grid-column: 3 / -1; grid-row: auto; margin-top: 3.5rem; }

  .room__film { aspect-ratio: 4 / 3; }
  .room__item--salon, .room__item--pass { grid-column: 1 / -1; }
  .room__item--pass { grid-column: 2 / -1; margin-top: 4rem; }

  .cellar__text { grid-column: 1 / -1; padding-top: 0; }
  .cellar__arch { grid-column: 1 / -1; grid-row: 2; margin-top: 3rem; }
  .cellar__glass { grid-column: 3 / -1; grid-row: 3; margin: -5rem 0 0; }

  .reserve__intro, .booking { grid-column: 1 / -1; }
  .booking { margin-top: 3rem; }
  .form__row--2 { grid-template-columns: 1fr; }
  .reserve__scrim {
    background:
      linear-gradient(180deg, var(--umber) 0%, rgba(42, 33, 27, 0.72) 30%, rgba(42, 33, 27, 0.55) 55%, var(--umber) 100%);
  }

  .visit__img, .visit__info { grid-column: 1 / -1; }
  .visit__info { margin-top: 2.5rem; grid-template-columns: 1fr 1fr; }
  .visit__block:first-child { grid-column: 1 / -1; }

  .foot__mark { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .foot__col, .foot__col:nth-child(n) { grid-column: span 3; grid-row: auto; margin-top: 1rem; }
}

/* ======================================================== reduced motion == */
@media (prefers-reduced-motion: reduce) {
  /* No scrubbing and no pinned travel. The hero is its fully lit frame with the
     copy at rest; the sauce is shown as before and after. */
  .hero { height: 100vh !important; height: 100svh !important; }
  .hero [data-sc-cue], .hero .sc-split__i { opacity: 1 !important; transform: none !important; }
  .hero__curtain, .hero__glow { display: none; }
  .hero__scrim { opacity: 1; }
  .hero__media, .wm--hero .wm__name, .wm--hero .wm__place { transform: none; }

  .sauce { height: auto !important; }
  .sauce__stage { position: relative !important; height: auto !important; padding-block: var(--sc-section); }
  .sauce [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .sauce__lines { display: block; min-height: 0; }
  .sauce__lines > p { margin-bottom: 1rem; }
  .sauce__frame { display: none; }
  .sauce__still { display: grid; grid-column: 5 / 13; grid-row: 1; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
  .sauce__still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

  .zoom-in { transform: none; }
  .room__film { clip-path: none; }
  .film__video { display: none; }
  .frame img { transition: none; }
  .plan.is-ready .seat { transition: opacity 200ms ease; }
  .plan.is-lit .plan__glow { animation: none; }
  .form, .confirm { transition-duration: 150ms; }
  .form.is-leaving { filter: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .sauce__still { grid-template-columns: 1fr; margin-top: 2rem; }
}