/* ==========================================================================
   La Table du Berbère — design system
   One language: black, saffron gold, a heavy high-contrast display serif used
   large and uppercase, tracked uppercase sans for labels, warm glows, ghost
   numerals, vignetted photography. Square 1px buttons.
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-normal-100-900-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-normal-100-900-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-italic-100-900-latin.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces-italic-100-900-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/Jost-normal-100-900-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/Jost-normal-100-900-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/Jost-italic-100-900-latin.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Amiri"; src: url("/assets/fonts/Amiri-normal-400-arabic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Amiri"; src: url("/assets/fonts/Amiri-normal-700-arabic.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("/assets/fonts/NotoNaskhArabic-normal-400-700-arabic.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-normal-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-normal-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-normal-500-cyrillic.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-normal-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-normal-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-normal-600-cyrillic.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-italic-500-latin.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-italic-500-latin-ext.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/Cormorant-italic-500-cyrillic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/Jost-normal-100-900-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Jost"; src: url("/assets/fonts/Jost-italic-100-900-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  /* Brand palette: #3a1617 background, #CCA68A primary text, #DCA05B accent. Tonal variations are derived from these three. */
  --black: #3a1617;
  --black-2: #2d1011;
  --panel: #46191b;
  --burgundy: #3a1617;
  --burgundy-2: #4a1d1f;
  --gold: #dca05b;
  --gold-2: #e8b476;
  --gold-dim: rgba(220, 160, 91, .55);
  --cream: #e4c8ad;
  --white: #f4e4d2;
  --text: #cca68a;
  --muted: #b8947a;
  --muted-2: #9a775f;
  --line: rgba(204, 166, 138, .14);
  --line-2: rgba(204, 166, 138, .26);
  --line-gold: rgba(220, 160, 91, .42);
  --wa: #dca05b;

  --display: "Fraunces", "Amiri", Georgia, serif;
  --display-latin: "Fraunces", Georgia, serif;
  --wordmark: "Cormorant Garamond", "Amiri", Georgia, serif;
  --sans: "Jost", "Noto Naskh Arabic", system-ui, sans-serif;
  --fs-display: "opsz" 144, "SOFT" 100, "WONK" 1;

  --gutter: clamp(20px, 5vw, 80px);
  --wrap: 1280px;
  --wrap-narrow: 760px;
  --section: clamp(96px, 13vw, 180px);
  --section-sm: clamp(64px, 8vw, 110px);
  --head-h: 84px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 1.1s;
}
html[dir="rtl"] { --display: "Amiri", "Fraunces", serif; --sans: "Noto Naskh Arabic", "Jost", sans-serif; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.7; font-weight: 400; color: var(--text); background: var(--black); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; line-height: 1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }
address { font-style: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.ic { width: 1.1em; height: 1.1em; flex: none; }
html[dir="rtl"] .btn .ic--arrow, html[dir="rtl"] .link .ic { transform: scaleX(-1); }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; background: var(--gold); color: var(--black); padding: 10px 16px; z-index: 100; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.skip:focus { top: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section); }
.section--sm { padding-block: var(--section-sm); }
.section--line { border-top: 1px solid var(--line); }
.center { text-align: center; }
.grid2 { display: grid; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } .grid2--wide { grid-template-columns: 1.15fr .85fr; } .grid2--rev > :first-child { order: 2; } }

/* ---------- Glow & ghosts ---------- */
.glow { position: relative; isolation: isolate; }
.glow::before { content: ""; position: absolute; inset: -10% 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 58% 50% at var(--gx, 50%) var(--gy, 50%), rgba(220, 160, 91, .09), transparent 70%); }
.ghost { position: absolute; z-index: 0; pointer-events: none; font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(7rem, 22vw, 20rem); line-height: 1; color: rgba(204, 166, 138, .06); letter-spacing: -.04em; user-select: none; }
.ghost--tl { top: -0.2em; inset-inline-start: 0; }
.ghost--tr { top: -0.2em; inset-inline-end: 0; }
.ghost--br { bottom: -0.25em; inset-inline-end: 0; }

/* ---------- Typography ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.eyebrow--dash::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.eyebrow--lines { gap: 20px; }
.eyebrow--lines::before, .eyebrow--lines::after { content: ""; width: clamp(40px, 8vw, 110px); height: 1px; background: linear-gradient(to right, transparent, var(--gold-dim)); }
.eyebrow--lines::after { background: linear-gradient(to left, transparent, var(--gold-dim)); }
.eyebrow--it { font-family: var(--display); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: .12em; font-size: .9rem; }
html[dir="rtl"] .eyebrow { letter-spacing: .05em; }

.display { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(3.4rem, 9.5vw, 8.8rem); line-height: .92; letter-spacing: -.025em; text-transform: uppercase; color: var(--white); }
.display--xl { font-size: clamp(3.8rem, 12vw, 11.5rem); }
.display--md { font-size: clamp(2.2rem, 6.2vw, 5.6rem); }
.display, .title { overflow-wrap: anywhere; }
.title { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.02em; color: var(--white); }
.title--sm { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.title--xs { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1; letter-spacing: -.01em; color: var(--white); }
.accent, .title em, .display em { font-style: italic; font-weight: 700; color: var(--gold); letter-spacing: -.01em; }
.display em { text-transform: none; }
.dim { color: rgba(204, 166, 138, .32); font-style: italic; font-weight: 700; }
.eyebrow .dim { color: var(--muted); font-weight: 500; }
html[dir="rtl"] .display, html[dir="rtl"] .title, html[dir="rtl"] .title--xs { font-weight: 700; letter-spacing: 0; line-height: 1.15; }
html[dir="rtl"] .accent, html[dir="rtl"] .title em, html[dir="rtl"] .display em { font-style: normal; }

.caps { font-family: var(--sans); font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text); }
.caps--gold { color: var(--gold); }
.lead { font-size: clamp(1.05rem, 1.1vw + .5rem, 1.25rem); line-height: 1.75; color: var(--text); font-weight: 300; max-width: 58ch; }
.lead--it { font-family: var(--display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 1; font-size: clamp(1.15rem, 1.4vw + .5rem, 1.5rem); color: var(--muted); }
.prose { max-width: 64ch; font-weight: 300; }
.prose p + p { margin-top: 1.2em; }
.prose h2 { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--white); margin: 2.2em 0 .7em; line-height: 1.1; }
.prose h3 { font-family: var(--sans); font-size: .8rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 2em 0 .8em; }
.prose ul { margin: 1.2em 0; }
.prose li { position: relative; padding-inline-start: 1.6em; margin: .5em 0; }
.prose li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: .7em; height: 1px; background: var(--gold); }
.prose a { color: var(--gold-2); border-bottom: 1px solid var(--line-gold); }
.prose strong { font-weight: 500; color: var(--cream); }
.prose blockquote { margin: 2em 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.3em; color: var(--cream); padding-inline-start: 1.2em; border-inline-start: 1px solid var(--gold); }
.rule { width: 64px; height: 1px; background: var(--gold); margin: 26px auto; }
.rule--left { margin-inline: 0; }
.sechead { display: grid; justify-items: center; text-align: center; gap: 22px; margin-bottom: clamp(48px, 7vw, 96px); }
.sechead .rule { margin: 0; }
.sechead .lead { margin-inline: auto; }
.sechead--left { justify-items: start; text-align: start; }
.sechead--left .lead { margin-inline: 0; }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 34px; border: 1px solid var(--line-2); font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--cream); background: transparent; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); -webkit-tap-highlight-color: transparent; text-align: center; }
.btn:hover { border-color: var(--cream); background: rgba(204, 166, 138, .06); }
.btn--gold { border-color: var(--gold); color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: var(--black); }
.btn--fill { background: var(--gold); border-color: var(--gold); color: var(--black); font-weight: 600; }
.btn--fill:hover { background: var(--gold-2); border-color: var(--gold-2); color: var(--black); }
.btn--wide { width: 100%; justify-content: space-between; }
.btn .ic { width: 1em; height: 1em; }
html[dir="rtl"] .btn, html[dir="rtl"] .caps, html[dir="rtl"] .site-nav a, html[dir="rtl"] .tabbar a { letter-spacing: .04em; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btns--c { justify-content: center; }
.link { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); padding-block: 8px; transition: gap .4s var(--ease), color .4s; }
.link:hover { gap: 18px; color: var(--gold-2); }
.link .ic { width: 1em; height: 1em; }
.link--line::before { content: ""; width: 48px; height: 1px; background: var(--gold); }

/* ---------- Vignetted photography ---------- */
.vig { position: relative; }
.vig img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 46%, transparent 96%); mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 46%, transparent 96%); }
.vig--soft img { -webkit-mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 58%, transparent 98%); mask-image: radial-gradient(ellipse 80% 78% at 50% 50%, #000 58%, transparent 98%); }
.fade-b { position: relative; }
.fade-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(58, 22, 23, .35) 0, transparent 30%, transparent 55%, var(--black) 100%); pointer-events: none; }
.fade-x::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--black) 0, transparent 22%, transparent 78%, var(--black) 100%); pointer-events: none; }
.corners { position: relative; }
.corners::before, .corners::after { content: ""; position: absolute; width: 64px; height: 64px; border: 1px solid var(--gold-dim); pointer-events: none; }
.corners::before { top: 6%; inset-inline-end: 4%; border-width: 1px 1px 0 0; }
.corners::after { bottom: 6%; inset-inline-start: 4%; border-width: 0 0 1px 1px; }
html[dir="rtl"] .corners::before { border-width: 1px 0 0 1px; }
html[dir="rtl"] .corners::after { border-width: 0 1px 1px 0; }

/* ---------- Reveal (quiet) ---------- */
html.js .rv { opacity: 0; transform: translateY(22px); }
html.js .rv.in { opacity: 1; transform: none; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
html.js .rv--img { transform: scale(1.04); }
html.js .rv--img.in { transform: none; transition-duration: 1.6s; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   Gate (once per session; auto-dismisses)
   ========================================================================== */

html:not(.gated) .gate { display: none; }
@media (prefers-reduced-motion: reduce) { .gate { display: none !important; } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-head { position: fixed; inset-inline: 0; top: 0; z-index: 60; transition: background-color .5s var(--ease), transform .5s var(--ease), border-color .5s; border-bottom: 1px solid transparent; }
.site-head.is-scrolled { background: rgba(58, 22, 23, .9); border-color: var(--line); backdrop-filter: blur(6px); }
.site-head.is-hidden { transform: translateY(-100%); }
.site-head__bar { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; height: var(--head-h); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
@media (min-width: 1024px) { .site-head__bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.brand { display: flex; align-items: center; gap: 14px; color: var(--white); min-width: 0; }
.brand__mark { width: 30px; height: auto; opacity: .95; }
.brand__text { display: grid; gap: 3px; min-width: 0; }
.brand__name { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(.8rem, 3.6vw, 1.05rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
@media (max-width: 400px) { .lang summary span { display: none; } .lang summary { padding: 12px 6px; } .brand__name { letter-spacing: .05em; } }
.brand__tag { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); display: none; }
@media (min-width: 1024px) { .brand__tag { display: block; } .brand__name { font-size: 1.2rem; } }
.site-nav { display: none; justify-content: center; gap: clamp(20px, 2.4vw, 40px); }
.site-nav a { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text); padding: 8px 0; position: relative; transition: color .4s; }
.site-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: inline-start; transition: transform .5s var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold); }
.site-nav a[aria-current="page"]::after, .site-nav a:hover::after { transform: scaleX(1); }
@media (min-width: 1024px) { .site-nav { display: flex; } }
.site-head__tools { display: flex; align-items: center; justify-content: end; gap: 10px; }
.site-head__reserve { display: none; min-height: 46px; padding: 0 24px; font-size: .68rem; }
@media (min-width: 1024px) { .site-head__reserve { display: inline-flex; } }
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; padding: 12px 10px; cursor: pointer; color: var(--text); }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 170px; background: var(--black-2); border: 1px solid var(--line-2); padding: 6px; z-index: 5; }
.lang li a { display: block; padding: 10px 14px; font-size: .78rem; letter-spacing: .08em; color: var(--text); }
.lang li a:hover, .lang li a[aria-current="true"] { color: var(--gold); background: rgba(204, 166, 138, .04); }
.burger { width: 48px; height: 48px; display: grid; place-items: center; position: relative; margin-inline-end: -10px; }
.burger span { position: absolute; width: 26px; height: 1px; background: var(--white); transition: transform .5s var(--ease); }
.burger span:first-child { transform: translateY(-5px); }
.burger span:last-child { transform: translateY(5px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }
.site-head.is-open { background: var(--black); border-color: transparent; }

/* Drawer (mobile) */
.drawer { position: fixed; inset: 0; z-index: 59; background: var(--black); padding-top: var(--head-h); overflow-y: auto; scroll-padding-top: calc(var(--head-h) + 12px); }
.drawer[hidden] { display: none; }
.drawer__in { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding: 24px 0 140px; display: grid; gap: 40px; }
.drawer__nav { display: grid; }
.drawer__nav a { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.9rem, 8vw, 3rem); text-transform: uppercase; letter-spacing: -.01em; color: var(--white); line-height: 1; opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i) * 50ms); }
.drawer__nav a small { font-family: var(--sans); font-size: .62rem; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; }
.drawer__nav a[aria-current="page"] { color: var(--gold); }
.drawer.is-in .drawer__nav a { opacity: 1; transform: none; }
.drawer__aside { display: grid; gap: 20px; }
.drawer__aside .caps { color: var(--muted); font-size: .66rem; }
.drawer__contact a { display: inline-block; padding: 6px 0; color: var(--cream); }
.drawer__langs { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.drawer__langs a { display: inline-block; padding: 10px 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.drawer__langs a[aria-current="true"] { color: var(--gold); }
@media (min-width: 1024px) { .drawer { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .drawer__nav a { transition: none; opacity: 1; transform: none; } }

/* Mobile tab bar */
.tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 58; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(58, 22, 23, .96); border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(8px); }
.tabbar a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); min-height: 64px; min-width: 0; }
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a .ic { width: 20px; height: 20px; }
.tabbar a.is-active, .tabbar a:hover { color: var(--gold); }
.tabbar__wa .ic { color: var(--wa); }
@media (max-width: 1023px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } }
@media (min-width: 1024px) { .tabbar { display: none; } }
body.is-locked { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; isolation: isolate; overflow: hidden; padding: calc(var(--head-h) + 40px) var(--gutter) 110px; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: .62; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 55%, transparent 0, rgba(58, 22, 23, .55) 70%, var(--black) 100%), linear-gradient(to bottom, rgba(58, 22, 23, .7) 0, transparent 30%, transparent 60%, var(--black) 100%); }
.hero__in { display: grid; justify-items: center; gap: 22px; max-width: 1100px; }
.hero__est { font-size: .68rem; letter-spacing: .4em; text-transform: uppercase; color: var(--text); }
.hero__title { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(3.1rem, 11vw, 10rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; color: var(--white); display: grid; }
.hero__title em { font-size: .5em; text-transform: none; letter-spacing: 0; margin-top: .22em; }
html[dir="rtl"] .hero__title { letter-spacing: 0; line-height: 1.1; }
.hero__tag { font-size: clamp(.72rem, 1.2vw, .9rem); letter-spacing: .36em; text-transform: uppercase; color: var(--cream); margin-top: 6px; }
.hero__btns { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero__btns .btn { min-width: 200px; }
.hero__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); font-size: .62rem; letter-spacing: .36em; text-transform: uppercase; color: var(--muted); }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; } }
@media (max-width: 1023px) { .hero { padding-bottom: 96px; } .hero__scroll { bottom: 28px; } }

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); background: var(--black-2); overflow: hidden; padding: 18px 0; }
.marquee__track { display: flex; gap: 0; width: max-content; animation: marquee 48s linear infinite; }
.marquee__item { display: flex; align-items: center; gap: 18px; padding: 0 40px; white-space: nowrap; }
.marquee__item .ic { width: 22px; height: 22px; color: var(--gold); }
.marquee__item strong { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--white); }
.marquee__item span { font-size: .78rem; color: var(--muted); font-weight: 300; }
@keyframes marquee { to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee__track { animation-direction: reverse; }

/* ---------- Signatures ---------- */
.sigs { display: grid; gap: clamp(32px, 5vw, 72px); }
.sig { position: relative; display: grid; gap: 28px; align-items: center; text-align: center; }
.sig__media { position: relative; aspect-ratio: 4 / 3; max-width: 560px; width: 100%; margin-inline: auto; }
.sig__media .ghost { font-size: clamp(8rem, 22vw, 16rem); inset-inline-end: 0; top: -8%; }
.sig__text { display: grid; gap: 14px; justify-items: center; }
.sig__text .lead { max-width: 40ch; margin-inline: auto; }
.sig__opts { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 2; max-width: 46ch; }
.sig__opts b { color: var(--gold); font-weight: 500; }
@media (min-width: 900px) {
  .sig { grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); text-align: start; }
  .sig__text { justify-items: start; }
  .sig__text .lead { margin-inline: 0; }
  .sig:nth-child(even) .sig__media { order: 2; }
}

/* ---------- Story block + rotating badge ---------- */
.story__media { position: relative; }
.story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.badge { position: absolute; width: 150px; height: 150px; display: grid; place-items: center; }
.badge--br { bottom: -40px; inset-inline-end: 0; }
@media (min-width: 900px) { .badge--br { inset-inline-end: -20px; } }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.badge svg text { font-family: var(--sans); font-size: 10.5px; letter-spacing: 3.2px; text-transform: uppercase; fill: var(--gold); }
.badge__core { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line-gold); background: var(--black); display: grid; place-items: center; }
.badge__core img { width: 26px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge svg { animation: none; } }
@media (max-width: 899px) { .badge { width: 120px; height: 120px; } .badge--br { bottom: -30px; inset-inline-end: 8px; } }
.story__text { display: grid; gap: 22px; justify-items: start; }

/* ---------- Tonight / menu rows ---------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.row__name { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.25rem, 2vw, 1.7rem); color: var(--white); display: flex; align-items: baseline; gap: 16px; }
.row__name::after { content: ""; flex: 1; border-bottom: 1px dotted rgba(204, 166, 138, .22); transform: translateY(-.25em); min-width: 24px; }
.row__right { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 1.05rem; color: var(--gold); white-space: nowrap; }
.row__desc { grid-column: 1 / -1; font-size: .95rem; color: var(--muted); font-weight: 300; max-width: 70ch; }
.row__opts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-top: 4px; }
.row__opts li::before { content: "◇"; color: var(--gold); margin-inline-end: 8px; font-size: .6em; vertical-align: middle; }
.row__tag { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line-gold); padding: 3px 8px; vertical-align: middle; font-family: var(--sans); font-weight: 500; }
.tonight-meta { margin-top: 28px; font-size: .9rem; color: var(--muted); max-width: 60ch; font-weight: 300; }
.tonight-meta span { display: block; margin-top: 6px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.course-label { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: block; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; margin-bottom: 40px; }
.tabs a, .tabs button { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.3rem, 2.4vw, 2rem); color: rgba(204, 166, 138, .38); padding: 6px 22px; position: relative; transition: color .4s; }
.tabs a + a::before, .tabs button + button::before { content: "◇"; position: absolute; inset-inline-start: -8px; top: 50%; transform: translateY(-50%); font-size: .55rem; color: var(--gold-dim); font-family: var(--sans); }
.tabs a:hover, .tabs a.is-active, .tabs button:hover, .tabs button[aria-pressed="true"] { color: var(--gold); text-shadow: 0 0 30px rgba(220, 160, 91, .35); }
.menu-note { text-align: center; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; line-height: 2; }

/* ---------- Atmosphere accordion ---------- */
.atmos { display: grid; gap: 14px; }
@media (min-width: 900px) { .atmos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 560px; } .atmos__item.is-open { grid-column: span 3; } }
.atmos__item { position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 120px; min-height: 160px; transition: grid-column .7s var(--ease), border-color .5s; cursor: pointer; text-align: start; }
.atmos__item.is-open { border-color: var(--line-gold); border-radius: 28px; min-height: 420px; }
.atmos__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.atmos__item.is-open img { opacity: .9; }
.atmos__item:hover img { transform: scale(1.03); }
.atmos__cap { position: absolute; inset-inline: 32px; bottom: 30px; display: grid; gap: 8px; transition: opacity .5s; z-index: 1; }
.atmos__cap .eyebrow { font-size: .62rem; letter-spacing: .3em; }
.atmos__cap h3 { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.5rem, 2.6vw, 2.2rem); color: var(--white); }
.atmos__cap p { font-size: .9rem; color: var(--text); font-weight: 300; max-width: 46ch; }
.atmos__item:not(.is-open) .atmos__cap p, .atmos__item:not(.is-open) .atmos__cap .eyebrow { display: none; }
@media (min-width: 900px) { .atmos__item:not(.is-open) .atmos__cap { inset: auto 0 36px 0; justify-items: center; } .atmos__item:not(.is-open) .atmos__cap h3 { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.1rem; letter-spacing: .08em; color: var(--text); } }
.atmos__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 22, 23, .9), transparent 55%); pointer-events: none; }

/* ---------- Words / trust boxes ---------- */
.boxes { display: grid; gap: 20px; }
@media (min-width: 800px) { .boxes { grid-template-columns: repeat(3, 1fr); } }
.box { border: 1px solid var(--line-2); padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 40px); text-align: center; display: grid; gap: 18px; justify-items: center; align-content: start; background: linear-gradient(to bottom, rgba(204, 166, 138, .02), transparent); }
.box__big { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(3.6rem, 6vw, 5.2rem); line-height: 1; color: var(--white); }
.box__big small { font-size: .35em; color: var(--gold); font-style: italic; font-weight: 700; }
.box__q { font-family: var(--display); font-style: italic; font-weight: 500; font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 1; font-size: 1.25rem; line-height: 1.4; color: var(--cream); }
.box__src { font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; padding-block: 6px; }
.box__src .ic { width: 1.2em; height: 1.2em; }
.box ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.box ul li { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text); border: 1px solid var(--line-2); padding: 6px 12px; }
.box__note { font-size: .7rem; color: var(--muted-2); letter-spacing: .1em; }

/* ---------- Plan your evening ---------- */
.plan { display: grid; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .plan { grid-template-columns: 1fr 1fr; } }
.plan__card { border: 1px solid var(--line-gold); padding: 28px 30px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; background: var(--panel); }
.plan__card .ic { color: var(--gold); width: 22px; height: 22px; margin-top: 4px; }
.plan__card h3 { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: 1.45rem; color: var(--white); }
.plan__card p { grid-column: 2; font-size: .95rem; color: var(--text); font-weight: 300; }
.plan__block { border-inline-start: 1px solid var(--line-gold); padding-inline-start: 26px; margin-top: 34px; }
.plan__block h2, .plan__block h3 { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.plan__block dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: .95rem; }
.plan__block dt { color: var(--cream); }
.plan__block dd { color: var(--muted); text-align: end; }
.plan__block ul { display: grid; gap: 8px; }
.plan__block ul a { color: var(--text); font-weight: 300; }
.plan__block ul a:hover { color: var(--gold); }
.map { position: relative; border: 1px solid var(--line-gold); min-height: 380px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M0 45h90M45 0v90' stroke='%23cfa24d' stroke-opacity='.1'/%3E%3C/svg%3E"); display: grid; grid-template-rows: 1fr auto; }
.map__card { display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; padding: 40px 24px; }
.map__pin { width: 36px; height: 36px; color: var(--gold); }
.map__name { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: 1.3rem; color: var(--white); }
.map__addr { font-size: .86rem; color: var(--muted); }
.map__gps { font-size: .66rem; letter-spacing: .2em; color: var(--muted-2); }
.map__load { margin-top: 10px; }
.map__foot { border-top: 1px solid var(--line-gold); }
.map__foot .btn { width: 100%; border: 0; justify-content: space-between; }
.map iframe { position: absolute; inset: 0 0 56px 0; width: 100%; height: calc(100% - 56px); border: 0; }

/* ---------- Reserve CTA ---------- */
.cta { text-align: center; display: grid; justify-items: center; gap: 22px; }
.cta .display { font-size: clamp(3rem, 8vw, 7rem); }
.cta .display em { display: block; font-size: .78em; }
.cta .caps { color: var(--muted); max-width: 48ch; line-height: 2; font-size: .74rem; }
.cta__bg { position: absolute; inset: -15% 0; z-index: -1; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.cta__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 50%, transparent, var(--black) 80%); }

/* ---------- Gallery strip (numbered) ---------- */
.gal { display: grid; gap: 18px; }
@media (min-width: 700px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal__item { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--panel); aspect-ratio: 4 / 5; }
.gal__item picture, .gal__item .gal__btn { position: absolute; inset: 0; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform 1.4s var(--ease), opacity .6s; }
.gal__item:hover img { transform: scale(1.04); opacity: 1; }
.gal__item--wide { aspect-ratio: 4 / 3; }
.gal__n { position: absolute; top: 18px; inset-inline-start: 22px; font-family: var(--display); font-style: italic; font-weight: 600; font-size: .9rem; color: var(--gold); letter-spacing: .1em; z-index: 1; }
.gal__cap { position: absolute; inset-inline: 22px; bottom: 20px; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream); z-index: 1; }
.gal__cap::before { content: ""; display: block; width: 28px; height: 1px; background: var(--gold); margin-bottom: 10px; }
.gal__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(58, 22, 23, .85), transparent 45%); pointer-events: none; }
.gal__btn { display: block; width: 100%; height: 100%; text-align: start; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.filters button { border: 1px solid var(--line-2); padding: 12px 20px; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); transition: all .4s var(--ease); min-height: 44px; }
.filters button:hover, .filters button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.gal__item.is-hidden { display: none; }
.lightbox { border: 0; padding: 0; background: rgba(58, 22, 23, .97); color: var(--cream); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; display: none; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(58, 22, 23, .95); }
.lightbox figure { max-width: min(92vw, 1400px); display: grid; gap: 14px; padding: 16px; }
.lightbox img { max-height: 80vh; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }
.lightbox figcaption { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: center; }
.lightbox__close, .lightbox__nav { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: var(--cream); }
.lightbox__close { top: 16px; inset-inline-end: 16px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { inset-inline-start: 12px; } .lightbox__nav--prev .ic { transform: scaleX(-1); }
.lightbox__nav--next { inset-inline-end: 12px; }
html[dir="rtl"] .lightbox__nav--prev .ic { transform: none; } html[dir="rtl"] .lightbox__nav--next .ic { transform: scaleX(-1); }

/* ==========================================================================
   Page heads & inner pages
   ========================================================================== */
.phead { position: relative; overflow: hidden; padding: calc(var(--head-h) + clamp(56px, 9vw, 120px)) 0 clamp(48px, 7vw, 96px); text-align: center; display: grid; justify-items: center; gap: 22px; isolation: isolate; }
.phead--left { text-align: start; justify-items: start; }
.phead .lead { margin-inline: auto; }
.phead--left .lead { margin-inline: 0; }
.phead__bg { position: absolute; inset: -12% 0; z-index: -1; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.phead__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 40%, transparent, var(--black) 85%), linear-gradient(to bottom, rgba(58, 22, 23, .5), transparent 30%, var(--black)); }
.crumbs { display: flex; flex-wrap: wrap; gap: 12px; font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.phead__split { display: grid; gap: 40px; align-items: center; text-align: start; }
.phead__split .display--md { max-width: 12ch; }
@media (min-width: 900px) { .phead__split { grid-template-columns: 1fr 1fr; } }
.phead__split .display { max-width: 8ch; }
.course-nav { position: sticky; top: var(--head-h); z-index: 50; background: rgba(58, 22, 23, .95); border-block: 1px solid var(--line); backdrop-filter: blur(6px); }
.course-nav .wrap { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.course-nav .wrap::-webkit-scrollbar { display: none; }
.course-nav a { padding: 18px 22px; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .3s; }
.course-nav a:hover, .course-nav a.is-active { color: var(--gold); border-color: var(--gold); }
.site-head.is-hidden ~ main .course-nav { top: 0; }

/* Menu page: carte sections */
.carte-sec { position: relative; padding-block: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 70px); }
.carte-sec__head { display: grid; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.carte-sec__head .display { font-size: clamp(2.6rem, 7vw, 6rem); }
.carte-sec__head .lead { color: var(--muted); }
.carte-list { display: grid; }
.carte-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.carte-row__n { font-family: var(--display); font-style: italic; font-size: .78rem; color: var(--muted-2); align-self: center; width: 2ch; }
.carte-row__img { width: 78px; height: 78px; object-fit: cover; border-radius: 50%; grid-row: span 3; -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
.carte-row__body { display: grid; gap: 6px; }
.carte-row__name { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.15rem, 1.8vw, 1.5rem); color: var(--white); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.carte-row__name::after { content: ""; flex: 1; min-width: 40px; border-bottom: 1px dotted rgba(204, 166, 138, .2); transform: translateY(-.3em); }
.carte-row__name .row__tag { margin-inline-start: 0; }
.carte-row__desc { font-size: .92rem; color: var(--muted); font-weight: 300; max-width: 64ch; }
@media (min-width: 700px) { .carte-row { grid-template-columns: 2ch 78px 1fr; } }
@media (max-width: 699px) { .carte-row__img { display: none; } }
.carte-sec--sig .sig__media { max-width: 460px; }

/* Reservation page */
.steps { display: flex; justify-content: center; gap: 18px; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.steps b { color: var(--gold); font-weight: 500; }
.res-grid { display: grid; gap: clamp(32px, 5vw, 64px); margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .res-grid { grid-template-columns: 1.15fr .85fr; } }
.flabel { display: block; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.cal { border: 1px solid var(--line-2); background: var(--panel); padding: 22px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.cal__head b { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.cal__head button { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); }
.cal__head button:hover { color: var(--gold); }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 8px 0; }
.cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__days button { aspect-ratio: 1; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--cream); border: 1px solid transparent; display: grid; place-items: center; }
.cal__days button:disabled { color: var(--muted-2); cursor: default; }
.cal__days button:not(:disabled):hover { border-color: var(--line-2); }
.cal__days button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 24px rgba(220, 160, 91, .2); }
.pick { display: flex; flex-wrap: wrap; gap: 10px; }
.pick button { min-width: 64px; height: 56px; padding: 0 16px; border: 1px solid var(--line-2); font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--cream); background: var(--panel); transition: border-color .3s, color .3s; }
.pick button.pick--txt { font-family: var(--sans); font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 500; }
.pick button:hover { border-color: var(--line-gold); }
.pick button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.pick--time button { font-family: var(--sans); font-weight: 400; font-size: .85rem; letter-spacing: .1em; }
.res-side { display: grid; gap: 32px; align-content: start; }
.form { display: grid; gap: 22px; }
.form__row { display: grid; gap: 22px; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 10px; }
.field label { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 54px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line-2); color: var(--cream); font-size: 1rem; -webkit-appearance: none; appearance: none; transition: border-color .3s; border-radius: 0; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfa24d' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-inline-end: 44px; }
html[dir="rtl"] .field select { background-position: left 14px center; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { min-height: 130px; resize: vertical; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: start; }
.field--err input, .field--err select { border-color: #b8432a; }
.field__err { font-size: .78rem; color: #d86a4f; }
.hp { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form__foot { display: grid; gap: 16px; justify-items: start; }
.form__small { font-size: .78rem; color: var(--muted); font-weight: 300; }
.form__small a { color: var(--gold); }
.notice { border: 1px solid var(--line-gold); padding: clamp(28px, 4vw, 48px); display: grid; gap: 18px; text-align: center; justify-items: center; background: var(--panel); }
.notice--err { border-color: rgba(184, 67, 42, .5); text-align: start; justify-items: start; gap: 10px; }
.notice--err ul { display: grid; gap: 4px; font-size: .92rem; color: #d86a4f; }
.panel { border: 1px solid var(--line-2); padding: clamp(28px, 4vw, 52px); position: relative; background: linear-gradient(to bottom, rgba(204, 166, 138, .02), transparent); }
.panel--corners::before, .panel--corners::after { content: ""; position: absolute; width: 28px; height: 28px; border: 1px solid var(--gold); }
.panel--corners::before { top: -1px; inset-inline-start: -1px; border-width: 1px 0 0 1px; }
.panel--corners::after { bottom: -1px; inset-inline-end: -1px; border-width: 0 1px 1px 0; }

/* Info rows (contact) */
.inforows { display: grid; }
.inforow { display: grid; grid-template-columns: 52px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
.inforow__ic { width: 52px; height: 52px; border: 1px solid var(--line-gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold); }
.inforow__ic .ic { width: 20px; height: 20px; }
.inforow h2, .inforow h3 { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.inforow p, .inforow a { font-size: .98rem; color: var(--cream); font-weight: 300; line-height: 1.7; }
.inforow a:hover { color: var(--gold); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips a { border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 22px; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--cream); min-height: 46px; display: inline-flex; align-items: center; gap: 8px; }
.chips a:hover { border-color: var(--gold); color: var(--gold); }
.diamond { display: flex; align-items: center; gap: 0; margin: 36px 0; }
.diamond::before, .diamond::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.diamond span { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); margin: 0 -1px; }

/* Columns (philosophy) */
.cols3 { display: grid; gap: 0; }
@media (min-width: 800px) { .cols3 { grid-template-columns: repeat(3, 1fr); } .cols3 > * + * { border-inline-start: 1px solid var(--line); } }
.col { padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 44px); text-align: center; display: grid; gap: 22px; justify-items: center; }
.col .ic { width: 38px; height: 38px; color: var(--gold); }
.col h3 { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: 1.55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }
.col p { font-size: .98rem; color: var(--text); font-weight: 300; max-width: 32ch; }
@media (max-width: 799px) { .col { border-top: 1px solid var(--line); } }

/* Steps (experience) */
.evening { display: grid; gap: clamp(48px, 8vw, 110px); }
.ev { position: relative; display: grid; gap: 24px; align-items: center; }
.ev__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ev__text { display: grid; gap: 16px; justify-items: start; }
.ev__text .lead { max-width: 44ch; }
@media (min-width: 900px) { .ev { grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); } .ev:nth-child(even) .ev__media { order: 2; } .ev__media { position: relative; } }
.ev .ghost { font-size: clamp(6rem, 16vw, 13rem); top: -.3em; inset-inline-end: 0; }

/* FAQ */
.faq { display: grid; gap: 14px; }
.faq details { border: 1px solid var(--line-2); background: var(--panel); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; cursor: pointer; font-family: var(--display); font-weight: 700; font-variation-settings: var(--fs-display); font-size: 1.15rem; color: var(--white); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--gold); transition: transform .4s var(--ease); flex: none; }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq__a { padding: 0 26px 26px; color: var(--text); font-weight: 300; max-width: 68ch; }
.faq__group { padding-block: clamp(32px, 5vw, 56px); display: grid; gap: 24px; }
.faq__group h2 { font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
@media (min-width: 900px) { .faq__group { grid-template-columns: 240px 1fr; } }

/* Journal */
.posts { display: grid; gap: 20px; }
@media (min-width: 760px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { border: 1px solid var(--line-2); background: var(--panel); display: grid; }
.post a { display: grid; gap: 0; height: 100%; }
.post figure { overflow: hidden; }
.post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .85; transition: transform 1.4s var(--ease), opacity .6s; }
.post:hover img { transform: scale(1.04); opacity: 1; }
.post__b { padding: 26px 26px 30px; display: grid; gap: 12px; align-content: start; }
.post__date { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.post h2, .post h3 { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: 1.35rem; line-height: 1.15; color: var(--white); }
.post p { font-size: .92rem; color: var(--muted); font-weight: 300; }
.post .link { margin-top: 6px; }
.article__meta { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.article__body { max-width: 68ch; margin-inline: auto; font-size: 1.05rem; }
.article__body > p:first-child { font-family: var(--display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 1; font-size: 1.35em; color: var(--cream); line-height: 1.5; }
.article__hero { max-width: 1100px; margin: clamp(32px, 5vw, 56px) auto 0; }
.article__hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.legal { max-width: 70ch; margin-inline: auto; }
.notfound { min-height: 85svh; display: grid; place-items: center; text-align: center; padding-top: var(--head-h); }
.notfound__in { display: grid; justify-items: center; gap: 20px; }
.notfound .ghost { position: static; font-size: clamp(8rem, 30vw, 22rem); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot { position: relative; border-top: 1px solid var(--line); padding: clamp(72px, 9vw, 130px) 0 36px; overflow: hidden; isolation: isolate; }
.site-foot__bg { position: absolute; inset: 0; z-index: -1; }
.site-foot__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .12; }
.site-foot__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--black), rgba(58, 22, 23, .7) 40%, var(--black)); }
.site-foot__top { display: grid; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .site-foot__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } }
.site-foot__brand { display: grid; gap: 20px; justify-items: start; }
.site-foot__brand .brand__name { font-size: 1.5rem; }
.site-foot__brand p { font-size: .95rem; color: var(--muted); max-width: 34ch; font-weight: 300; }
.social { display: flex; gap: 12px; }
.social a { width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--text); transition: border-color .4s, color .4s; }
.social a:hover { border-color: var(--gold); color: var(--gold); }
.social .ic { width: 18px; height: 18px; }
.site-foot__col h2 { display: flex; align-items: center; gap: 12px; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.site-foot__col h2::before { content: ""; width: 24px; height: 1px; background: var(--gold); }
.site-foot__col ul { display: grid; gap: 4px; }
.site-foot__col li a { display: inline-block; padding: 9px 0; color: var(--text); font-weight: 300; }
.site-foot__col li a:hover { color: var(--gold); }
.site-foot__col address, .site-foot__col p { color: var(--text); font-weight: 300; line-height: 1.8; }
.site-foot__hours { margin-top: 14px; display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
.site-foot__hours em { color: var(--gold); font-style: italic; }
.site-foot__word { padding: clamp(32px, 5vw, 64px) 0; text-align: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.site-foot__word svg { display: block; width: 100%; height: auto; overflow: visible; }
.site-foot__word text { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); text-transform: uppercase; fill: none; stroke: rgba(204, 166, 138, .14); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.site-foot__bottom { padding-top: 28px; display: grid; gap: 14px; font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) { .site-foot__bottom { grid-template-columns: 1fr auto 1fr; align-items: center; } .site-foot__legal { justify-self: end; } }
.site-foot__legal { display: flex; gap: 24px; }
.site-foot__legal a { padding: 8px 0; display: inline-block; }
.site-foot__legal a:hover, .site-foot__bottom a:hover { color: var(--cream); }
.site-foot__credit { color: var(--gold); text-align: center; }
.site-foot__credit a { color: var(--gold); border-bottom: 1px solid var(--line-gold); display: inline-block; padding: 6px 0 3px; }
.site-foot__legal a { display: inline-block; padding-block: 6px; }
.site-foot__col address a, .site-foot__col p a { display: inline-block; padding-block: 3px; }

@media print { .site-head, .tabbar, .hero__media, .hero__toggle, .drawer, .gate { display: none !important; } body { background: var(--white); color: #000; } }

/* ==========================================================================
   Cinematic layer — loader, page transitions, hero opening, scene motion.
   Motion is transform/opacity only. Everything degrades to a static page
   under prefers-reduced-motion or without JS.
   ========================================================================== */

/* ---------- Brand loader (animated logo) ---------- */
.loader { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: #3a1617; background: radial-gradient(ellipse 72% 62% at 50% 48%, var(--burgundy-2) 0%, #3a1617 55%, var(--black-2) 100%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s var(--ease), visibility .55s; }
.loader__in { display: grid; justify-items: center; gap: 22px; transform: translateY(0); }
.loader__logo { width: clamp(170px, 30vw, 290px); height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); }
.loader__in { display: grid; justify-items: center; gap: 22px; }
.loader__in > picture, .loader__in > .loader__anim, .loader__in > .loader__still { grid-area: 1 / 1; }
.loader__in .loader__line { grid-area: 2 / 1; }
.loader__anim, .loader__still { display: none; }
html.entering[data-enter="first"] .loader__anim--full { display: block; }
html.entering[data-enter="nav"] .loader__still, html.entering[data-enter="page"] .loader__still, html.leaving.ready .loader__still { display: block; }
html.leaving:not(.ready) .loader__fast, html.leaving:not(.ready) .loader__fast[hidden] { display: block; }
.loader__fast img { margin: 0 auto; }
.loader__line { width: 1px; height: 54px; background: linear-gradient(to bottom, transparent, var(--gold-dim), transparent); opacity: .7; }
html.entering .loader, html.leaving .loader { opacity: 1; visibility: visible; pointer-events: auto; }
html.entering .loader { transition: none; }
html.entering .loader__in { animation: loaderBreathe 4s var(--ease) infinite alternate; }
html.leaving .loader__in { animation: loaderIn .7s var(--ease) both; }
html.entering.ready .loader { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s var(--ease) .15s, visibility .9s .15s; }
html.entering.ready[data-enter="nav"] .loader, html.entering.ready[data-enter="page"] .loader { transition-duration: .7s; transition-delay: .05s; }
html.entering[data-enter="home"] .loader__fast { display: block; }
html.entering:not(.ready) body { overflow: hidden; }
html.entering:not(.ready) .site-head, html.entering:not(.ready) .tabbar { visibility: hidden; }
@keyframes loaderIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes loaderBreathe { from { transform: scale(1); } to { transform: scale(1.025); } }

/* ---------- Opening sequence (hero) ---------- */
html.js .hero__media { opacity: 0; }
html.js .hero__media video, html.js .hero__media img { transform: scale(1.14); }
html.js .hero__est, html.js .hero__tag, html.js .hero__btns, html.js .hero__scroll, html.js .hero__toggle { opacity: 0; transform: translateY(26px); }
html.js .hero__title span, html.js .hero__title em { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(34%); }
html.js .site-head { opacity: 0; transform: translateY(-14px); }
html.js.ready .hero__media { animation: heroMedia 2.2s var(--ease) both; }
html.js.ready .hero__media video, html.js.ready .hero__media img { animation: kenBurns 9s cubic-bezier(.2, .6, .2, 1) both; }
html.js.ready .hero__est { animation: riseIn 1.1s var(--ease) .55s both; }
html.js.ready .hero__title span { animation: wipeUp 1.3s var(--ease) .7s both; }
html.js.ready .hero__title em { animation: wipeUp 1.3s var(--ease) .95s both; }
html.js.ready .hero__tag { animation: riseIn 1.1s var(--ease) 1.2s both; }
html.js.ready .hero__btns { animation: riseIn 1.1s var(--ease) 1.4s both; }
html.js.ready .hero__scroll, html.js.ready .hero__toggle { animation: riseIn 1.2s var(--ease) 1.9s both; }
html.js.ready .site-head { animation: headIn 1.1s var(--ease) 1.7s both; }
html.js.ready[data-page]:not([data-page="home"]) .site-head { animation-delay: .35s; }
html.js.ready .site-head.is-hidden { animation: none; opacity: 1; transform: translateY(-100%); }
@keyframes heroMedia { from { opacity: 0; } to { opacity: 1; } }
@keyframes kenBurns { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wipeUp { from { opacity: 0; clip-path: inset(0 -5% 100% -5%); transform: translateY(34%); } 60% { opacity: 1; } to { opacity: 1; clip-path: inset(-20% -5% -40% -5%); transform: none; } }
@keyframes headIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.hero__media { will-change: transform; }

/* Page headers on inner pages: same language, shorter. */
html.js .phead__bg img { transform: scale(1.1); }
html.js .phead .display, html.js .phead .crumbs, html.js .phead .eyebrow, html.js .phead .lead, html.js .phead .rule, html.js .phead .caps, html.js .phead .btns, html.js .phead .chips, html.js .phead .menu-note, html.js .phead .sig__media { opacity: 0; transform: translateY(22px); }
html.js.ready .phead__bg img { animation: kenBurns 7s cubic-bezier(.2, .6, .2, 1) both; }
html.js.ready .phead .crumbs { animation: riseIn 1s var(--ease) .15s both; }
html.js.ready .phead .eyebrow { animation: riseIn 1s var(--ease) .25s both; }
html.js.ready .phead .display { animation: riseIn 1.2s var(--ease) .35s both; }
html.js.ready .phead .rule { animation: riseIn 1s var(--ease) .55s both; }
html.js.ready .phead .caps, html.js.ready .phead .lead, html.js.ready .phead .menu-note { animation: riseIn 1.1s var(--ease) .65s both; }
html.js.ready .phead .btns, html.js.ready .phead .chips { animation: riseIn 1.1s var(--ease) .85s both; }
html.js.ready .phead .sig__media { animation: riseIn 1.4s var(--ease) .5s both; }
html.js .phead .sig__media.rv { opacity: 0; }
html.js.ready .phead .sig__media.rv { opacity: 1; transform: none; }

/* ---------- Scroll depth (JS sets transform on [data-depth]) ---------- */
[data-depth] { will-change: transform; }
.depth-wrap { position: relative; overflow: hidden; }

/* ---------- Mask reveal for imagery ---------- */
html.js .rv--mask { clip-path: inset(10% 8% 10% 8%); opacity: 0; transform: none; }
html.js .rv--mask img { transform: scale(1.14); transition: transform 1.8s var(--ease); }
html.js .rv--mask.in { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 1.5s var(--ease), opacity .9s var(--ease); }
html.js .rv--mask.in img { transform: none; }
html.js .sig__media.rv--mask { transform: translateY(50px) rotate(-3deg) scale(.96); }
html.js .sig:nth-child(even) .sig__media.rv--mask { transform: translateY(50px) rotate(3deg) scale(.96); }
html.js .sig__media.rv--mask.in { transform: none; transition: clip-path 1.5s var(--ease), opacity .9s var(--ease), transform 1.6s var(--ease); }
html.js .sig__text.rv { transform: translateX(40px); }
html.js .sig:nth-child(even) .sig__text.rv { transform: translateX(-40px); }
html.js .sig__text.rv.in { transform: none; transition-delay: .15s; }
@media (max-width: 899px) { html.js .sig__text.rv, html.js .sig:nth-child(even) .sig__text.rv { transform: translateY(22px); } }

/* ---------- Word-by-word statement ---------- */
[data-words] .w { display: inline-block; opacity: .14; transition: opacity .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-words].in .w { opacity: 1; }
html:not(.js) [data-words] .w { opacity: 1; }

/* ---------- Scenes: tone shifts between chapters ---------- */
.scene { position: relative; }
.scene--warm { background: linear-gradient(180deg, var(--black) 0%, var(--burgundy) 48%, var(--black) 100%); }
.scene--deep { background: linear-gradient(180deg, var(--black) 0%, var(--black-2) 100%); }
.scene--ember::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 50% at var(--gx, 50%) var(--gy, 50%), rgba(217, 95, 75, .10), transparent 70%); }

/* Maison scene — the house, over a full-bleed photograph */
.maison { position: relative; padding-block: clamp(120px, 16vw, 220px) clamp(96px, 12vw, 180px); isolation: isolate; overflow: hidden; }
.maison__bg { position: absolute; inset: -12% 0; z-index: -2; }
.maison__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .34; }
.maison__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--black) 0%, rgba(58, 22, 23, .35) 30%, rgba(58, 22, 23, .55) 70%, var(--black) 100%), linear-gradient(to right, rgba(58, 22, 23, .85) 0%, rgba(58, 22, 23, .35) 55%, transparent 100%); }
.maison__in { display: grid; gap: clamp(28px, 4vw, 48px); }
.maison__in .display { max-width: 14ch; }
.maison__cols { display: grid; gap: 28px; max-width: 62rem; }
.maison__cols .lead { max-width: 44ch; }
@media (min-width: 900px) { .maison__cols { grid-template-columns: 1fr 1fr; gap: 56px; } }
.facts { display: flex; flex-wrap: wrap; gap: 14px 36px; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.facts li { display: flex; align-items: center; gap: 12px; }
.facts li::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }
@media (min-width: 1100px) { .maison__in { padding-inline-end: clamp(260px, 28vw, 420px); } }

/* Reserve CTA scene — parallax photograph */
.cta__bg { inset: -15% 0; }
.cta__bg img { opacity: .34; }
html.js .cta__bg img { transform: scale(1.08); transition: transform 2.4s var(--ease); }
html.js .cta.in-view ~ .cta__bg img, html.js .cta__bg.in img { transform: none; }

/* Atmosphere: the open space breathes */
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
.atmos__item.is-open img { animation: breathe 14s linear infinite alternate; }
.atmos__item:hover img { transform: none; }

/* Gallery tiles & story media use the mask reveal */
html.js .gal__item.rv--mask { transform: none; }

/* ---------- Brand accents ---------- */
.site-head__reserve.btn { border-color: var(--gold); color: var(--white); }
.site-head__reserve.btn:hover { background: var(--gold); color: var(--black); }
.tabbar a[href*="reserv"], .tabbar a[href*="prenot"], .tabbar a[href*="booking"] { color: var(--cream); }
.cal__days button[aria-pressed="true"] { border-color: var(--gold); color: var(--white); box-shadow: 0 0 24px rgba(220, 160, 91, .22); }
.pick button[aria-pressed="true"] { border-color: var(--gold); color: var(--white); }
.tabs button[aria-pressed="true"] { color: var(--cream); }
.marquee__item strong { color: var(--cream); }
.hero__title em { color: var(--cream); }
.display em, .title em { color: var(--gold); }

/* ---------- Reduced motion: nothing moves, everything is there ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none !important; }
  html.js .hero__media, html.js .hero__est, html.js .hero__tag, html.js .hero__btns, html.js .hero__scroll, html.js .hero__toggle, html.js .hero__title span, html.js .hero__title em, html.js .site-head,
  html.js .phead .display, html.js .phead .crumbs, html.js .phead .eyebrow, html.js .phead .lead, html.js .phead .rule, html.js .phead .caps, html.js .phead .btns, html.js .phead .chips, html.js .phead .menu-note, html.js .phead .sig__media,
  html.js .rv--mask, html.js .sig__media.rv--mask, html.js .sig__text.rv { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; transition: none !important; }
  html.js .hero__media video, html.js .hero__media img, html.js .phead__bg img, html.js .rv--mask img, html.js .cta__bg img { transform: none !important; animation: none !important; }
  [data-depth] { transform: none !important; }
  [data-words] .w { opacity: 1 !important; transition: none !important; }
  .atmos__item.is-open img { animation: none !important; }
  html.js .site-head.is-hidden { transform: translateY(-100%) !important; }
}

/* ---------- Interlude: the evening, full bleed ---------- */
.interlude { position: relative; min-height: 88svh; display: grid; place-items: center; text-align: center; isolation: isolate; overflow: hidden; padding: clamp(96px, 12vw, 160px) 0; }
.interlude__bg { position: absolute; inset: -14% 0; z-index: -1; }
.interlude__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; opacity: .5; }
.interlude__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--black) 0%, transparent 28%, transparent 70%, var(--black) 100%), radial-gradient(ellipse 60% 60% at 50% 50%, transparent 30%, rgba(58, 22, 23, .65) 100%); }
.interlude__in { display: grid; justify-items: center; gap: 30px; }
.interlude__q { font-family: var(--display); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1; font-size: clamp(1.55rem, 3.4vw, 3.2rem); line-height: 1.25; color: var(--white); max-width: 26ch; }
html[dir="rtl"] .interlude__q { font-style: normal; }

/* ==========================================================================
   Final pass: brand palette (#3a1617 / #CCA68A / #DCA05B), premium wordmark,
   scroll scenes (La Soirée, memories, Instagram), consent, hero video.
   ========================================================================== */

/* ---------- Wordmark: Cormorant Garamond, tracked small caps ---------- */
.brand__name { font-family: var(--wordmark); font-weight: 600; font-variation-settings: normal; font-size: clamp(1rem, 3.4vw, 1.3rem); letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.brand__tag { font-family: var(--sans); font-size: .56rem; letter-spacing: .34em; color: var(--gold); }
@media (min-width: 1024px) { .brand__tag { display: block; } .brand { gap: 16px; } .brand__mark { width: 34px; } }
.site-foot__brand .brand__name { font-size: 1.45rem; letter-spacing: .18em; }

/* ---------- Hero video: let the footage breathe ---------- */
.hero__media video, .hero__media img { opacity: .8; }
.hero__poster { position: absolute; inset: 0; display: none; }
.hero.no-video video { display: none; }
.hero.no-video .hero__poster { display: block; }
.hero__scrim { background: radial-gradient(ellipse 70% 60% at 50% 55%, transparent 0, rgba(58, 22, 23, .35) 70%, rgba(58, 22, 23, .9) 100%), linear-gradient(to bottom, rgba(58, 22, 23, .55) 0, transparent 28%, transparent 62%, var(--black) 100%); }
.hero__title { color: var(--white); }
.hero__title em { color: var(--cream); }

/* ---------- Reveal variants (direction changes per chapter) ---------- */
html.js .rv--left { transform: translateX(-44px); }
html.js .rv--right { transform: translateX(44px); }
html.js .rv--scale { transform: scale(.94); }
html.js .rv--left.in, html.js .rv--right.in, html.js .rv--scale.in { transform: none; }
html[dir="rtl"].js .rv--left { transform: translateX(44px); }
html[dir="rtl"].js .rv--right { transform: translateX(-44px); }
@media (max-width: 767px) { html.js .rv--left, html.js .rv--right, html[dir="rtl"].js .rv--left, html[dir="rtl"].js .rv--right { transform: translateY(22px); } }
html.js .rv--mask picture { overflow: hidden; }
html.js .rv--left, html.js .rv--right { will-change: transform; }
html.js .rule.rv { transform: scaleX(0); transform-origin: center; }
html.js .rule.rv.in { transform: none; transition: transform 1.2s var(--ease) .2s, opacity .6s; }
html.js .rv--mask[style*="--i"] { transition-delay: calc(var(--i, 0) * 110ms); }
html.js .rv--mask[style*="--i"] img { transition-delay: calc(var(--i, 0) * 110ms); }

/* ---------- Scroll scrub: --p goes 0 → 1 while the element crosses the viewport ---------- */
.atmos--grow { transform: scale(calc(.9 + var(--p, .5) * .1)); transform-origin: center top; transition: none; }
html.js .atmos--grow.rv { transform: scale(.9); }
html.js .atmos--grow.rv.in { transform: scale(calc(.9 + var(--p, .5) * .1)); transition: opacity 1.1s var(--ease); }
.scene--food::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(220, 160, 91, .08), transparent 70%); }
.scene--deep { background: linear-gradient(180deg, var(--black) 0%, var(--black-2) 50%, var(--black) 100%); }
.scene--warm { background: linear-gradient(180deg, var(--black) 0%, var(--burgundy-2) 50%, var(--black) 100%); }

/* ---------- La Soirée: sticky photographs, four steps ---------- */
.soiree { position: relative; padding-block: var(--section) clamp(60px, 8vw, 120px); border-top: 1px solid var(--line); }
.soiree__head { display: grid; justify-items: center; text-align: center; gap: 22px; margin-bottom: clamp(56px, 8vw, 110px); }
.soiree__head .lead { max-width: 30ch; }
.soiree__grid { display: grid; gap: 40px; }
.soiree__sticky { display: none; }
.soiree__steps { display: grid; gap: clamp(64px, 10vw, 120px); }
.soiree__step { display: grid; gap: 26px; }
.soiree__img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.soiree__img img { width: 100%; height: 100%; object-fit: cover; }
.soiree__img::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line-gold); pointer-events: none; }
.soiree__text { display: grid; gap: 16px; }
.soiree__text .lead { max-width: 46ch; }
.soiree__count { position: absolute; z-index: 2; inset-inline-start: 24px; bottom: 22px; display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); color: var(--white); font-size: 2.2rem; line-height: 1; }
.soiree__count i { font-family: var(--sans); font-style: normal; font-size: .7rem; letter-spacing: .3em; color: var(--gold); }
.soiree__count b { font-weight: 800; }
@media (min-width: 900px) {
  .soiree__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
  .soiree__sticky { display: block; position: sticky; top: calc(var(--head-h) + 24px); height: calc(100vh - var(--head-h) - 48px); height: calc(100svh - var(--head-h) - 48px); }
  .soiree__frame { position: relative; height: 100%; max-height: 820px; overflow: hidden; background: var(--black-2); }
  .soiree__frame .soiree__img { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; transform: scale(1.08); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); clip-path: none; }
  .soiree__frame .soiree__img.is-active { opacity: 1; transform: none; }
  .soiree__frame .soiree__img img { transform: none !important; }
  .soiree__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(58, 22, 23, .75), transparent 40%); }
  .soiree__steps { gap: 0; }
  .soiree__step { min-height: 78vh; align-content: center; padding-block: 10vh; }
  .soiree__step .title, .soiree__step .lead, .soiree__step .eyebrow { transition: color .8s var(--ease); }
  .soiree__step:not(.is-active) .title { color: var(--text); }
  .soiree__step:not(.is-active) .lead { color: var(--muted); }
  .soiree__step:not(.is-active) .eyebrow { color: var(--muted); }
  .soiree__step > .soiree__img { display: none; }
  html.js .soiree__step .rv { opacity: 1; transform: none; clip-path: none; }
}

/* ---------- Memories: a strip that drifts with the scroll ---------- */
.memories { position: relative; padding-block: var(--section) 0; overflow: hidden; border-top: 1px solid var(--line); }
.memories__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.memories__head .lead { max-width: 40ch; }
@media (min-width: 900px) { .memories__head { grid-template-columns: 1fr 1fr; align-items: end; } .memories__head .lead { justify-self: end; text-align: end; } }
.memories__track { display: flex; gap: clamp(14px, 2vw, 28px); padding-inline: var(--gutter); padding-bottom: var(--section); width: max-content; transform: translate3d(calc(var(--p, 0) * var(--travel, 0px)), 0, 0); will-change: transform; }
.memories__item { position: relative; width: clamp(200px, 26vw, 340px); aspect-ratio: 3 / 4; overflow: hidden; flex: none; }
.memories__item:nth-child(even) { margin-top: clamp(28px, 4vw, 64px); }
.memories__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.memories__item:hover img { transform: scale(1.05); }
.memories__item::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .memories__track { width: auto; overflow-x: auto; transform: none !important; } }

/* ---------- Gallery: one ratio everywhere ---------- */
.gal__item, .gal__item--wide { aspect-ratio: 4 / 5; }
.gal__item img { opacity: 1; }

/* ---------- Instagram, before the footer on every page ---------- */
.insta { position: relative; padding-block: var(--section-sm) var(--section-sm); border-top: 1px solid var(--line); }
.insta__head { display: grid; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.insta__intro { display: grid; gap: 14px; }
.insta__intro .eyebrow .ic { width: 16px; height: 16px; }
.insta__intro .lead { max-width: 42ch; }
.insta__handle { display: inline-flex; align-items: center; gap: 12px; padding-block: 6px; font-family: var(--wordmark); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: .04em; color: var(--white); }
.insta__handle .ic { width: 1em; height: 1em; color: var(--gold); transition: transform .5s var(--ease); }
.insta__handle:hover .ic { transform: translateX(6px); }
html[dir="rtl"] .insta__handle:hover .ic { transform: translateX(-6px) scaleX(-1); }
html[dir="rtl"] .insta__handle .ic { transform: scaleX(-1); }
@media (min-width: 900px) { .insta__head { grid-template-columns: 1fr auto; align-items: end; } }
.insta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-inline: 6px; }
@media (min-width: 700px) { .insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .insta__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.insta__item { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--panel); display: block; }
.insta__item picture, .insta__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.insta__item img { transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.9); }
.insta__item:hover img { transform: scale(1.06); filter: none; }
.insta__ic { position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(58, 22, 23, .7); color: var(--white); opacity: .85; }
.insta__ic .ic { width: 14px; height: 14px; }
.insta__foot { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

/* ---------- Footer: solid giant wordmark ---------- */
.site-foot__word { padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(20px, 3vw, 40px); border-bottom: 1px solid var(--line); }
.site-foot__word svg { width: 100%; max-width: 1600px; margin-inline: auto; }
.site-foot__word text { font-family: var(--wordmark); font-weight: 500; font-variation-settings: normal; text-transform: uppercase; letter-spacing: .02em; fill: #cca68a; stroke: none; }
.site-foot__langs { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 16px; margin-inline-start: -4px; }
.site-foot__langs a { display: inline-block; min-width: 40px; text-align: center; font-size: .62rem; letter-spacing: .26em; color: var(--muted); padding: 11px 4px; }
.site-foot__langs a[aria-current="true"], .site-foot__langs a:hover { color: var(--gold); }
.site-foot__legal button { background: none; border: 0; padding: 6px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.site-foot__legal button:hover { color: var(--gold); }

/* ---------- Tab bar in brand colours ---------- */
.tabbar__wa .ic { color: var(--gold); }
.tabbar a.is-active { color: var(--white); }

/* ---------- Consent ---------- */
.consent { position: fixed; z-index: 85; inset-inline: 0; bottom: 0; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.consent[hidden], body.is-locked .consent { display: none; }
.consent [hidden] { display: none !important; }
html.leaving .loader { transition: opacity .35s var(--ease), visibility 0s; }
@media (max-width: 1023px) { .consent { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
.consent__box { pointer-events: auto; width: min(100%, 720px); background: rgba(45, 16, 17, .96); border: 1px solid var(--line-gold); padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px); display: grid; gap: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); transform: translateY(24px); opacity: 0; animation: consentIn .9s var(--ease) forwards; }
@keyframes consentIn { to { transform: none; opacity: 1; } }
.consent__title { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; color: var(--white); }
.consent__text { font-size: .95rem; line-height: 1.7; color: var(--text); font-weight: 300; }
.consent__text a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.consent__opts { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.consent__opt { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; cursor: pointer; }
.consent__opt span { display: grid; gap: 4px; }
.consent__opt b { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--white); font-weight: 500; }
.consent__opt small { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.consent__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__opt i { width: 46px; height: 26px; border-radius: 13px; border: 1px solid var(--line-2); position: relative; transition: background .4s, border-color .4s; }
.consent__opt i::after { content: ""; position: absolute; top: 4px; inset-inline-start: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .4s var(--ease), background .4s; }
.consent__opt input:checked + i { background: rgba(220, 160, 91, .18); border-color: var(--gold); }
.consent__opt input:checked + i::after { transform: translateX(20px); background: var(--gold); }
html[dir="rtl"] .consent__opt input:checked + i::after { transform: translateX(-20px); }
.consent__opt input:disabled + i { opacity: .55; }
.consent__opt input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 3px; }
.consent__btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.consent__btns .btn { min-height: 46px; padding: 0 22px; font-size: .68rem; }
.consent__more { background: none; border: 0; padding: 10px 6px; font: inherit; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); cursor: pointer; margin-inline-start: auto; }
.consent__more:hover { color: var(--white); }

/* ---------- Language specifics ---------- */
html[lang="zh"] { --display: "Noto Serif SC", "Songti SC", "PingFang SC", "Microsoft YaHei", serif; --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; --fs-display: normal; --wordmark: "Cormorant Garamond", serif; }
html[lang="zh"] .display, html[lang="zh"] .title, html[lang="zh"] .title--sm, html[lang="zh"] .hero__title { font-weight: 700; letter-spacing: .04em; line-height: 1.15; }
html[lang="zh"] .eyebrow, html[lang="zh"] .caps, html[lang="zh"] .btn, html[lang="zh"] .site-nav a, html[lang="zh"] .crumbs, html[lang="zh"] .tabbar a { letter-spacing: .14em; }
html[lang="zh"] .display--xl { font-size: clamp(3rem, 9vw, 8rem); }
html[lang="ru"] { --display: "Cormorant Garamond", Georgia, serif; --fs-display: normal; }
html[lang="ru"] .display, html[lang="ru"] .title, html[lang="ru"] .title--sm, html[lang="ru"] .title--xs, html[lang="ru"] .hero__title, html[lang="ru"] .consent__title, html[lang="ru"] .marquee__item strong, html[lang="ru"] .soiree__count { font-weight: 600; letter-spacing: 0; }
html[lang="ru"] .display--xl { font-size: clamp(3.2rem, 10vw, 9.5rem); line-height: .95; }
html[lang="ru"] .eyebrow, html[lang="ru"] .caps, html[lang="ru"] .btn, html[lang="ru"] .site-nav a { letter-spacing: .18em; }
html[lang="ru"] .lead--it, html[lang="ru"] .interlude__q { font-style: italic; }

/* ---------- Reduced motion additions ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .rv--left, html.js .rv--right, html.js .rv--scale, html.js .rule.rv, .atmos--grow, html.js .atmos--grow.rv, html.js .atmos--grow.rv.in { transform: none !important; transition: none !important; }
  .soiree__frame .soiree__img { transition: none !important; }
  .soiree__step { opacity: 1 !important; }
  .consent__box { animation: none; transform: none; opacity: 1; }
}

/* Latin brand wordmark keeps the house display face in every language */
html[lang="zh"] .hero__title span, html[lang="ru"] .hero__title span, html[lang="zh"] .phead .display--xl, html[lang="ru"] .phead .display--xl { font-family: var(--display-latin); font-weight: 800; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; letter-spacing: -.03em; }
html[lang="zh"] .hero__title span { letter-spacing: -.02em; }
.atmos-h { font-size: clamp(2.3rem, 4.6vw, 4.4rem); }
html[lang="zh"] .consent__title, html[lang="zh"] .insta__handle { font-family: var(--display); font-weight: 700; letter-spacing: .04em; }
html[lang="zh"] .eyebrow, html[lang="zh"] .caps { font-weight: 500; }

/* ==========================================================================
   v5: Berber mark instead of dash separators, promo scene, "Ce soir" composition,
   memories loop, flag language selectors, hollow footer wordmark, menu choice fields.
   ========================================================================== */
:root { --mark-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18'/><path d='M4 8c3 3 5 4 8 4s5-1 8-4'/><path d='M4 16c3-3 5-4 8-4s5 1 8 4'/></svg>"); }
.mark, .eyebrow--dash::before, .eyebrow--mark::before, .eyebrow--lines::before, .eyebrow--lines::after, .link--line::before, .gal__cap::before, .site-foot__col h2::before, .marquee__sep, .soiree__count i::before, .diamond::before, .diamond::after, .loader__line {
  content: ""; display: inline-block; flex: none; background: var(--gold); -webkit-mask: var(--mark-svg) center / contain no-repeat; mask: var(--mark-svg) center / contain no-repeat; border: 0; height: auto;
}
.eyebrow--dash::before, .eyebrow--mark::before { width: 14px; height: 14px; }
.eyebrow--lines { gap: 16px; }
.eyebrow--lines::before, .eyebrow--lines::after { width: 14px; height: 14px; background: var(--gold-dim); }
.rule { width: 22px; height: 22px; background: var(--gold); -webkit-mask: var(--mark-svg) center / contain no-repeat; mask: var(--mark-svg) center / contain no-repeat; margin: 22px auto; }
.rule--left { margin-inline: 0; }
.sechead .rule { margin: 0; }
html.js .rule.rv { transform: scale(.4); }
html.js .rule.rv.in { transform: none; }
.link--line::before { width: 13px; height: 13px; }
.gal__cap::before { width: 12px; height: 12px; margin-bottom: 10px; display: block; }
.site-foot__col h2::before { width: 13px; height: 13px; }
.diamond { gap: 14px; justify-content: center; }
.diamond::before, .diamond::after { flex: none; width: 10px; height: 10px; background: var(--gold-dim); }
.diamond span { width: 6px; height: 6px; }
.loader__line { width: 16px; height: 16px; background: var(--gold-dim); opacity: 1; margin-top: 4px; }
.loader__in .loader__line { grid-area: 2 / 1; }
.hero__scroll::after { display: none; }
.hero__scroll { display: grid; justify-items: center; gap: 10px; }
.hero__scroll .ic { width: 14px; height: 14px; color: var(--gold); animation: nod 2.6s var(--ease) infinite; }
@keyframes nod { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(6px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll .ic { animation: none; } }

/* Ticker: icon separators, soft edges */
.marquee { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee__item { border: 0; padding: 0 22px; gap: 14px; }
.marquee__sep { width: 12px; height: 12px; background: var(--gold-dim); margin: 0 4px; align-self: center; }
.marquee__track { animation-duration: 56s; }
.soiree__count i { display: inline-flex; align-items: center; gap: 6px; }
.soiree__count i::before { width: 10px; height: 10px; background: var(--gold); }

/* ---------- Promo scene (first scene after the hero) ---------- */
.maison__bg img { opacity: .4; }
.maison__bg::after { background: linear-gradient(to bottom, var(--black) 0%, rgba(58, 22, 23, .25) 28%, rgba(58, 22, 23, .4) 72%, var(--black) 100%), linear-gradient(to right, rgba(58, 22, 23, .78) 0%, rgba(58, 22, 23, .3) 50%, rgba(58, 22, 23, .1) 100%); }
.maison__in .display { text-shadow: 0 2px 30px rgba(58, 22, 23, .6); }

/* ---------- Ce soir: compose your menu ---------- */
.compose { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); }
.compose__grid { display: grid; gap: clamp(48px, 7vw, 100px); }
.compose__intro { display: grid; gap: 22px; align-content: start; }
.compose__intro .lead { max-width: 46ch; }
.compose__req { display: inline-flex; align-items: center; gap: 12px; font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.compose__req .ic { width: 14px; height: 14px; }
.compose__lists { display: grid; gap: clamp(44px, 6vw, 72px); }
.compose__group { position: relative; transition: opacity .8s var(--ease); }
.compose__head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; margin-bottom: 22px; }
.compose__n { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(3rem, 6vw, 5rem); line-height: .8; color: rgba(204, 166, 138, .18); transition: color .8s var(--ease); }
.compose__group.is-active .compose__n { color: var(--gold); }
.compose__head .eyebrow { margin-bottom: 8px; }
.compose__rows { display: grid; border-top: 1px solid var(--line); }
.compose__row { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: background .5s; }
.compose__row:hover { background: linear-gradient(to right, rgba(220, 160, 91, .06), transparent 70%); }
.compose__img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-gold); }
.compose__name { font-family: var(--display); font-weight: 800; font-variation-settings: var(--fs-display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.1; color: var(--white); margin-bottom: 6px; }
.compose__desc { font-size: .92rem; color: var(--text); font-weight: 300; line-height: 1.6; }
.compose__opts { color: var(--gold); font-weight: 400; }
.compose__incl { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--muted); }
.compose__incl .ic { width: 16px; height: 16px; color: var(--gold); flex: none; }
html.js .compose__row.rv { transition-delay: calc(var(--i, 0) * 60ms); }
@media (min-width: 1024px) {
  .compose__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .compose__intro { position: sticky; top: calc(var(--head-h) + 40px); }
  .compose__group:not(.is-active) { opacity: .55; }
}
html[lang="ru"] .compose__name, html[lang="zh"] .compose__name { font-weight: 700; }

/* ---------- Memories: continuous drift, drag, loop ---------- */
.memories { padding-block: var(--section) var(--section-sm); }
.memories__viewport { overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.memories__viewport.is-dragging { cursor: grabbing; }
.memories__track { display: flex; gap: clamp(14px, 2vw, 28px); padding: 0 0 clamp(28px, 4vw, 64px); width: max-content; transform: none; will-change: transform; }
.memories__item { position: relative; width: clamp(200px, 24vw, 320px); aspect-ratio: 3 / 4; overflow: hidden; flex: none; }
.memories__item:nth-child(even) { margin-top: clamp(24px, 3vw, 48px); margin-bottom: calc(clamp(24px, 3vw, 48px) * -1); }
.memories__item img { pointer-events: none; }
.memories__viewport:hover .memories__item:not(:hover) img { filter: saturate(.75); }
@media (prefers-reduced-motion: reduce) { .memories__viewport { overflow-x: auto; scrollbar-width: none; } .memories__viewport::-webkit-scrollbar { display: none; } }

/* ---------- Language selector with flags ---------- */
.flag { display: inline-block; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); vertical-align: middle; }
.flag svg { display: block; width: 100%; height: 100%; }
.lang summary { gap: 10px; padding: 10px 10px; border-radius: 999px; transition: background .4s; }
.lang summary:hover, .lang[open] summary { background: rgba(204, 166, 138, .08); }
.lang summary .ic { width: 12px; height: 12px; transition: transform .4s var(--ease); color: var(--muted); }
.lang[open] summary .ic { transform: rotate(180deg); }
.lang ul { min-width: 220px; padding: 8px; border-radius: 14px; background: rgba(45, 16, 17, .96); backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); animation: langIn .35s var(--ease); }
@keyframes langIn { from { opacity: 0; transform: translateY(-6px); } }
.lang li a { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 9px; font-size: .84rem; letter-spacing: .02em; text-transform: none; }
.lang li a small { font-size: .62rem; letter-spacing: .2em; color: var(--muted); }
.lang li a[aria-current="true"] { background: rgba(220, 160, 91, .1); color: var(--white); }
.lang li a[aria-current="true"]::after { content: ""; width: 10px; height: 10px; background: var(--gold); -webkit-mask: var(--mark-svg) center / contain no-repeat; mask: var(--mark-svg) center / contain no-repeat; }
.drawer__langs { gap: 10px 16px; }
.drawer__langs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 4px; }
.site-foot__col .site-foot__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; margin-inline-start: 0; }
.site-foot__langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid transparent; transition: border-color .4s, transform .4s var(--ease); }
.site-foot__langs a:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.site-foot__langs a[aria-current="true"] { border-color: var(--gold); }
.site-foot__langs .flag { width: 22px; height: 15px; }

/* ---------- Footer wordmark: hollow, depth rising from below ---------- */
.site-foot__word { padding: clamp(36px, 5vw, 72px) var(--gutter) clamp(24px, 3vw, 48px); }
.site-foot__word text { fill: url(#fw-fill); stroke: #cca68a; stroke-width: 1.1; paint-order: stroke fill; }
.site-foot__word .fw-depth { fill: #cca68a; stroke: none; opacity: .22; filter: url(#fw-blur); }

/* ---------- Reservation: menu choice ---------- */
.res-menu { display: grid; gap: 18px; }
.res-menu__grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .res-menu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.res-menu .field label { display: flex; align-items: center; gap: 10px; }
.res-menu .field label::before { content: ""; width: 11px; height: 11px; background: var(--gold); -webkit-mask: var(--mark-svg) center / contain no-repeat; mask: var(--mark-svg) center / contain no-repeat; }
.res-menu__p { font-size: .92rem; color: var(--muted); max-width: 70ch; }
.notice__menu { display: grid; gap: 6px; margin-top: 18px; font-size: .95rem; }
.notice__menu b { color: var(--gold); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; margin-inline-end: 8px; }

/* Header entrance plays once; afterwards hide/show is a plain transform transition */
html.js .site-head.is-in { opacity: 1; animation: none; transform: none; }
html.js .site-head.is-in.is-hidden { transform: translateY(-100%); }

/* ---------- v6: La Soirée frame shows only the active photograph (beats the generic reveal rules) ---------- */
@media (min-width: 900px) {
  html.js .soiree__frame .soiree__img, html.js .soiree__frame .soiree__img.in { opacity: 0 !important; clip-path: none !important; transform: scale(1.08); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease) !important; z-index: 0; }
  html.js .soiree__frame .soiree__img.is-active, html.js .soiree__frame .soiree__img.is-active.in { opacity: 1 !important; transform: none; z-index: 1; }
  html.js .soiree__frame .soiree__img img { transform: none !important; transition: none !important; }
}
/* page transition: the arriving page draws the logo again */
html.leaving .loader__still { display: none; }
/* hero: never show a frozen black frame; poster sits under the video until it plays */
.hero__poster { display: block; z-index: -1; }
.hero.is-playing .hero__poster { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero.no-video video { display: none; }
.hero.no-video .hero__poster { opacity: .8; }

/* loader fallbacks: the cached still is shown whenever the animation is not yet available */
html.entering[data-enter="nav"] .loader__still, html.leaving .loader__still, html.entering[data-enter="home"] .loader__still, html.entering[data-enter="first"] .loader.show-still .loader__still { display: block; }
.loader.has-anim .loader__still { display: none !important; }
.loader__fast, .loader__fast[hidden] { display: block; position: relative; z-index: 1; }
.loader__fast:empty { display: none; }

/* ---------- v7: ambient media is never gated; ticker is an exchange-rate display ---------- */
.hero__media, .hero__media video, .hero__media img { pointer-events: none; }
.hero__media video::-webkit-media-controls, .maison__fig video::-webkit-media-controls { display: none !important; }
.hero__in, .hero__btns .btn { position: relative; z-index: 2; pointer-events: auto; }
/* promo scene: the film is the background from the first paint (poster frame until it plays), the poster image stays underneath as fallback */
/* ticker */
.marquee { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; max-width: 100vw; }
.marquee::-webkit-scrollbar { display: none; }
.marquee__track { display: flex; flex-wrap: nowrap; width: max-content; min-width: max-content; animation: marquee 56s linear infinite; animation-play-state: running !important; will-change: transform; backface-visibility: hidden; }
.marquee__item, .marquee__item strong, .marquee__item span { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: marquee 56s linear infinite; }
  html.js .hero__media video, html.js .maison__fig video { animation: none !important; transform: none !important; }
}

/* ---------- v8: the scene's right-side media card carries promo.mp4 (same place, size and framing as the former photograph) ---------- */
.maison__fig { position: absolute; z-index: -1; inset-inline-end: var(--gutter); bottom: clamp(60px, 9vw, 130px); width: clamp(200px, 19vw, 275px); aspect-ratio: 9 / 16; margin: 0; background: var(--black-2); }
.maison__fig-media video, .maison__fig-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.maison__fig-media video { z-index: 1; pointer-events: none; }
.maison__fig-media img { z-index: 0; }
.maison__fig-media.is-video img { opacity: 0; transition: opacity .8s var(--ease); }
.maison__fig-media { position: absolute; inset: 0; }
.maison__fig-media::after { content: ""; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 1px var(--line-gold); pointer-events: none; }
.maison__fig .badge { z-index: 3; }
html.js .maison__fig-media.rv--mask img, html.js .maison__fig-media.rv--mask video { transform: none !important; }
@media (max-width: 1099px) { .maison__fig { position: relative; inset: auto; bottom: auto; width: min(100%, 240px); margin-top: 8px; z-index: 0; } }

/* ---------- v10 ---------- */
/* loader: an arriving page shows the finished logo (no second drawing); only a direct home load replays it */
html.entering[data-enter="nav"] .loader__fast { display: none !important; }
html.entering[data-enter="nav"] .loader__still { display: block; }
/* promo card: the seal sits on the outer bottom corner of the card on desktop, on the lower edge centre on mobile; the card is 4:5 and full width on mobile */
.maison__fig .badge { width: 112px; height: 112px; bottom: -56px; inset-inline-end: -56px; z-index: 3; }
.maison__fig .badge__core { width: 50px; height: 50px; }
.maison__fig .badge__core img { width: 22px; }
.maison__fig .badge svg text { font-size: 9.5px; letter-spacing: 2.6px; }
@media (max-width: 1099px) {
  /* full bleed: the card escapes the content gutter on both sides (no 100vw, so no scrollbar overflow) */
  .maison__fig { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; margin-top: 8px; margin-bottom: 56px; }
  .maison__fig-media::after { box-shadow: none; }
  .maison__fig .badge { inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; bottom: -56px; }
}

/* ---------- v14: reservation photo behind the page header only; per-dish quantity counters ---------- */
.phead__bg picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.phead__bg img { position: absolute; inset: 0; }
.res-choice { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; align-content: start; }
.res-choice legend { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 0; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.res-choice legend::before { content: ""; width: 11px; height: 11px; align-self: center; background: var(--gold); -webkit-mask: var(--mark-svg) center / contain no-repeat; mask: var(--mark-svg) center / contain no-repeat; }
.res-choice legend small { font-size: .66rem; letter-spacing: .12em; text-transform: none; color: var(--muted); }
.res-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 8px 8px 14px; border: 1px solid var(--line); transition: border-color .35s var(--ease), background-color .35s var(--ease); }
.res-item.is-set { border-color: var(--gold); background: rgba(220, 160, 91, .08); }
.res-item__name { font-size: .95rem; color: var(--cream); line-height: 1.35; cursor: pointer; }
.res-menu .res-item label::before { content: none; }
.res-item.is-set .res-item__name { color: var(--white); }
.res-qty { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--gold-dim); background: rgba(0, 0, 0, .18); }
.res-qty .res-qty__btn { flex: none; width: 40px; min-width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 0; color: var(--gold); cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease); }
.res-qty__btn .ic { width: 16px; height: 16px; }
.res-qty__btn:hover { background: rgba(220, 160, 91, .14); color: var(--white); }
.res-qty__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.res-qty__btn:disabled { opacity: .35; cursor: default; background: transparent; }
.res-qty .res-qty__in { width: 2.6em; min-width: 0; height: 40px; min-height: 0; line-height: 40px; padding: 0; border: 0; border-radius: 0; border-inline: 1px solid var(--line); background: transparent; color: var(--white); font: inherit; font-size: 1rem; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.res-qty__in::-webkit-outer-spin-button, .res-qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.res-qty__in:focus { outline: 1px solid var(--gold); outline-offset: -1px; }
/* step one: "Are you staying at Riad Chay?" opens the rest of the form */
.res-stay { grid-column: 1 / -1; display: grid; gap: 22px; }
.res-stay__head { display: grid; gap: 10px; justify-items: center; text-align: center; }
.res-stay__q { margin: 0; }
.res-stay__p { margin: 0; font-size: .95rem; color: var(--muted); max-width: 52ch; }
.res-stay__cards { display: grid; gap: 14px; }
@media (min-width: 760px) { .res-stay__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.res-stay__card { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; row-gap: 6px; padding: clamp(20px, 2.6vw, 30px); padding-inline-end: 56px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .14); cursor: pointer; transition: border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease); }
.res-stay__card:hover { border-color: var(--gold-dim); }
.res-stay__in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.res-stay__ic { grid-row: span 2; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line-gold); border-radius: 50%; color: var(--gold); transition: background-color .4s var(--ease), color .4s var(--ease); }
.res-stay__ic .ic { width: 24px; height: 24px; }
.res-stay__t { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--white); line-height: 1.5; }
.res-stay__s { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.res-stay__tick { position: absolute; top: 50%; inset-inline-end: 18px; width: 26px; height: 26px; margin-top: -13px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; color: transparent; transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.res-stay__tick .ic { width: 14px; height: 14px; }
.res-stay__card:has(.res-stay__in:checked) { border-color: var(--gold); background: rgba(220, 160, 91, .08); }
.res-stay__card:has(.res-stay__in:checked) .res-stay__ic { background: var(--gold); color: var(--black); }
.res-stay__card:has(.res-stay__in:checked) .res-stay__tick { background: var(--gold); border-color: var(--gold); color: var(--black); }
.res-stay__card:has(.res-stay__in:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.res-stay__hotel { max-width: 560px; width: 100%; justify-self: center; }
.res-stay__hint { font-size: .8rem; color: var(--muted); }
html.js .res-stay__hotel.is-off { display: none; }
html.js .res-grid.is-staged > :not(.res-stay):not(.hp):not(input) { display: none; }
html.js .res-stay__hotel.is-in, html.js .res-grid.is-revealed > :not(.res-stay):not(.hp):not(input) { animation: resReveal .8s var(--ease) both; }
html.js .res-grid.is-revealed > :nth-child(4) { animation-delay: .08s; }
html.js .res-grid.is-revealed > :nth-child(5) { animation-delay: .16s; }
html.js .res-grid.is-revealed > :nth-child(6) { animation-delay: .24s; }
@keyframes resReveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .res-stay__hotel.is-in, html.js .res-grid.is-revealed > * { animation: none; } }
/* dish with variations: the row opens its variations, each with its own counter */
.res-var { border: 1px solid var(--line); transition: border-color .35s var(--ease), background-color .35s var(--ease); }
.res-var.is-set { border-color: var(--gold); background: rgba(220, 160, 91, .05); }
.res-var__sum { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.res-var__sum::-webkit-details-marker { display: none; }
.res-var__sum:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.res-var__txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.res-var__hint { font-size: .74rem; letter-spacing: .04em; color: var(--gold); }
.res-var__count { flex: none; font-size: .95rem; color: var(--white); font-variant-numeric: tabular-nums; }
.res-var__chev { flex: none; width: 18px; height: 18px; color: var(--gold); transition: transform .35s var(--ease); }
.res-var[open] > .res-var__sum .res-var__chev { transform: rotate(180deg); }
.res-var[open] > .res-var__sum { border-bottom: 1px solid var(--line); }
.res-var.is-set .res-var__sum .res-item__name { color: var(--white); }
.res-var__list { display: grid; gap: 6px; padding: 8px; }
.res-item--opt { padding-inline-start: 12px; background: rgba(0, 0, 0, .12); }
.res-var__sum .res-item__name { font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.res-item--opt .res-item__name { font-size: .6rem; }

/* ==========================================================================
   Reservation — drinks row and confirmation screen
   ========================================================================== */
@media (min-width: 760px) {
  .res-menu__grid .res-choice--drink { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; }
  .res-menu__grid .res-choice--drink legend { grid-column: 1 / -1; }
}

.resok { max-width: 980px; margin: 0 auto; display: grid; gap: clamp(22px, 3vw, 32px); outline: 0; }
.resok__head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.resok__seal { width: 72px; height: 72px; color: var(--gold); animation: resokSeal 1.2s var(--ease) both; }
.resok__seal svg { width: 100%; height: 100%; }
.resok__title { max-width: 18ch; font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.02; overflow-wrap: anywhere; }
.resok__pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--line-gold); font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); background: rgba(220, 160, 91, .06); }
.resok__pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(220, 160, 91, .6); animation: resokPulse 2.2s ease-out infinite; }
.resok__grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .resok__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.resok__card { border: 1px solid var(--line-2); padding: clamp(22px, 3vw, 34px); background: linear-gradient(to bottom, rgba(204, 166, 138, .035), transparent); position: relative; min-width: 0; }
.resok__card::before { content: ""; position: absolute; top: -1px; inset-inline-start: -1px; width: 24px; height: 24px; border: 1px solid var(--gold); border-width: 1px 0 0 1px; }
.resok__h { font-family: var(--sans); font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }
.resok__facts { display: grid; gap: 0; margin: 0; }
.resok__facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.resok__facts > div:last-child { border-bottom: 0; }
.resok__facts dt { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; letter-spacing: .08em; color: var(--muted); flex: none; }
.resok__facts dt .ic { width: 15px; height: 15px; color: var(--gold-dim); }
.resok__facts dd { margin: 0; color: var(--white); font-size: 1rem; text-align: end; min-width: 0; overflow-wrap: anywhere; }
.resok__notes { margin: 16px 0 0; padding: 14px 16px; border-inline-start: 2px solid var(--gold-dim); background: rgba(0, 0, 0, .14); font-size: .92rem; color: var(--cream); }
.resok__notes b { display: block; font-size: .64rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.resok__ref { margin: 16px 0 0; font-size: .74rem; letter-spacing: .08em; color: var(--muted-2); }
.resok__group + .resok__group { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.resok__gh { margin: 0 0 10px; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.resok__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.resok__group li { display: flex; gap: 12px; align-items: baseline; color: var(--white); font-size: 1rem; line-height: 1.4; }
.resok__qty { flex: none; min-width: 2.6em; font-family: var(--display-latin); font-size: 1.05rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.resok__empty { margin: 0; color: var(--cream); }
.resok__wa { display: grid; gap: 18px; align-items: center; border: 1px solid var(--line-gold); padding: clamp(22px, 3vw, 34px); background: radial-gradient(ellipse 90% 120% at 0% 0%, rgba(220, 160, 91, .12), transparent 60%), var(--panel); position: relative; }
@media (min-width: 900px) { .resok__wa { grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; } }
.resok__waic { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); }
.resok__waic .ic { width: 26px; height: 26px; }
.resok__watx h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--white); line-height: 1.2; }
.resok__watx p { margin: 0; color: var(--cream); font-size: .95rem; }
.resok__actions { display: grid; gap: 12px; }
@media (min-width: 560px) and (max-width: 899px) { .resok__actions { grid-template-columns: 1fr 1fr; } }
.resok__actions .btn { min-height: 54px; padding: 0 24px; white-space: nowrap; }
.resok__actions .btn.is-copied { border-color: var(--gold); color: var(--gold); }
.resok__src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; inset-inline-start: 0; top: 0; resize: none; }
.resok__toast { position: absolute; inset-inline-end: clamp(22px, 3vw, 34px); bottom: -14px; margin: 0; padding: 6px 14px; background: var(--gold); color: var(--black); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.resok__toast.is-on { opacity: 1; transform: none; }
.resok__warn { text-align: center; font-size: .9rem; }
.resok__sent { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0; font-size: .9rem; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.resok__sent .ic { width: 16px; height: 16px; color: var(--gold-dim); flex: none; }
.resok__more { margin: 0; text-align: center; }
@media (max-width: 559px) {
  .resok__facts > div { flex-direction: column; gap: 2px; align-items: flex-start; }
  .resok__facts dd { text-align: start; }
  .resok__actions .btn { width: 100%; white-space: normal; }
  .resok__toast { inset-inline: 22px; text-align: center; }
}
@keyframes resokSeal { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes resokPulse { 0% { box-shadow: 0 0 0 0 rgba(220, 160, 91, .55); } 70% { box-shadow: 0 0 0 10px rgba(220, 160, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 160, 91, 0); } }
@media (prefers-reduced-motion: reduce) { .resok__seal, .resok__pill i { animation: none; } }