/* =========================================================================
   HOLI INDIAN RESTAURANT — "Ember & Ash"
   Design system + sections.  Numbered blocks map 1:1 to page sections so
   this file can be split into Elementor global widgets later.

   00  Tokens
   01  Reset & base
   02  Primitives  (container, eyebrow, display type, rule, button, frame)
   03  Preloader
   04  Header
   05  Hero
   06  Accolades band
   07  The house
   08  Signature dishes
   09  Rang
   10  The room (gallery)
   11  Visit
   12  Footer
   13  Motion base states  (+ ?noanim / ?flat test hooks)
   14  Responsive
   ========================================================================= */

/* -------------------------------------------------------------- 00 TOKENS */
:root {
  /* Ground — warm cinematic dark, after Amrit Palace */
  --ink:        #16100E;   /* deepest — footer, preloader                  */
  --ink-2:      #1D1613;   /* dark section ground                          */
  --ink-3:      #2A211C;   /* raised dark panel                            */

  /* Light bands — sand, after Amrit's #D8CBB8 but warmer                   */
  --sand:       #E4DACA;   /* primary light ground                         */
  --sand-2:     #EFE8DB;   /* raised light panel                           */
  --sand-3:     #D6C9B4;   /* recessed light band                          */

  /* Type */
  --cream:      #F4EDE1;   /* display type on dark                         */
  --cream-dim:  #C6B9A6;   /* secondary type on dark                       */
  --char:       #2B211C;   /* body type on light                           */
  --char-dim:   #6B5B4F;   /* secondary type on light                      */

  /* Accents */
  --gold:       #C9954F;   /* antique gold — rules, numerals, accents      */
  --gold-soft:  #A87F45;
  --maroon:     #6B1F3B;   /* Holi's own brand colour — used sparingly     */

  /* Type stacks */
  /* Display face.
     Zimmerl's own heading font is Valky (Kaligra, kaligra.co) — a commercial
     licence, so it is NOT shipped here. Prata is the closest free stand-in for
     its warm vintage-Didone character.

     TO SWITCH TO VALKY once a webfont licence has been bought: drop the
     licensed woff2 into css/fonts/, uncomment the @font-face below, and put
     "Valky" at the front of --display. Nothing else needs to change.
     Note Valky has no italic — keep the .dish__tag / .display em rules as they
     are, they already use the UI face for italics. */
  --display: "Valky", "Prata", "Bodoni Moda", "Didot", "Times New Roman", serif;
  --ui:      "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 68rem;
  --band:  clamp(6rem, 13vh, 11rem);   /* vertical section padding         */
  --band-lg: clamp(8rem, 20vh, 16rem); /* the roomy Zimmerl bands          */

  --line: rgba(201, 149, 79, 0.28);    /* gold hairline                    */
  --line-dark: rgba(43, 33, 28, 0.16); /* hairline on light                */

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Valky — Zimmerl's own display face (Kaligra), licensed via the client's
   Envato Elements subscription. woff2 is what every current browser fetches
   (25.9 KB, converted from the 69 KB TTF with wawoff2); the ttf stays only as a
   fallback for pre-2016 browsers and is otherwise never requested. */
@font-face {
  font-family: "Valky";
  src: url("fonts/valky-regular.woff2") format("woff2"),
       url("fonts/valky-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------- 01 RESET/BASE */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--char);
  font-family: var(--ui);
  font-weight: 300;
  font-size: clamp(0.975rem, 0.9rem + 0.25vw, 1.075rem);
  line-height: 1.78;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; height: 100vh; }

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

::selection { background: var(--gold); color: var(--ink); }

/* Lenis */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ------------------------------------------------------- 02 PRIMITIVES */

.container {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 74rem; }

/* Chapter eyebrow — the only uppercase micro-type on the page */
.eyebrow {
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: clamp(1.75rem, 4vw, 3.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.eyebrow--plain::before { display: none; }
.on-dark .eyebrow { color: var(--gold); }

/* Display type — sentence case, never bold, tight leading */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--char);
}
.on-dark .display { color: var(--cream); }

.display--xl { font-size: clamp(2.6rem, 7.2vw, 7.4rem); line-height: 0.98; }
/* Prata sets ~10% wider than Bodoni Moda at the same size — these steps are
   tuned so every heading holds the line breaks its markup declares */
.display--lg { font-size: clamp(2.05rem, 4.25vw, 3.9rem); }
.display--md { font-size: clamp(1.65rem, 2.95vw, 2.65rem); }
.display--sm { font-size: clamp(1.4rem, 2.1vw, 1.95rem); letter-spacing: -0.01em; }

/* Prata (and Valky) ship no italic — take italics from the UI face so the
   browser never synthesises a slanted fake */
.display em {
  font-family: var(--ui);
  font-style: italic;
  font-weight: 300;
  font-size: 0.94em;
}

/* Lede — the one paragraph that sits directly under a display heading */
.lede {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.22rem);
  line-height: 1.72;
  color: var(--char-dim);
  max-width: 34em;
}
.on-dark .lede { color: var(--cream-dim); }

.prose p + p { margin-top: 1.35em; }
.prose { max-width: 36em; color: var(--char-dim); }
.on-dark .prose { color: var(--cream-dim); }

.rule {
  height: 1px;
  background: var(--line-dark);
  border: 0;
  margin: 0;
}
.on-dark .rule { background: var(--line); }

/* Button — hairline box, gold rule that fills on hover */
.btn {
  --btn-fg: var(--char);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--ui);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid currentColor;
  white-space: nowrap;   /* a button label must never break across lines */
  overflow: hidden;
  isolation: isolate;
  transition: color 0.55s var(--ease), border-color 0.55s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
  z-index: -1;
}
.btn:hover { color: var(--ink); border-color: var(--gold); }
.btn:hover::before { transform: scaleY(1); }

.btn--gold { --btn-fg: var(--gold); }
.on-dark .btn { --btn-fg: var(--cream); }
.on-dark .btn--gold { --btn-fg: var(--gold); }

.btn--solid {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.btn--solid:hover { color: var(--ink); }

/* Text link with a rule that draws in */
.tlink {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.4rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left bottom;
  transition: background-size 0.6s var(--ease);
}
.tlink:hover { background-size: 100% 1px; }

/* Framed photograph — the clip-reveal target */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.frame--tall  { aspect-ratio: 3 / 4; }
.frame--port  { aspect-ratio: 4 / 5; }
.frame--land  { aspect-ratio: 4 / 3; }
.frame--wide  { aspect-ratio: 16 / 10; }

/* Ghost word — huge outlined display type behind content */
.ghost {
  position: absolute;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.03em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(43, 33, 28, 0.13);
  font-size: clamp(7rem, 21vw, 22rem);
  z-index: 0;
}
.on-dark .ghost { -webkit-text-stroke-color: rgba(244, 237, 225, 0.09); }
.ghost--solid {
  -webkit-text-stroke: 0;
  color: rgba(201, 149, 79, 0.09);
}

/* Index numeral */
.numeral {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 0.8;
  color: var(--gold);
  opacity: 0.64;
  letter-spacing: -0.03em;
}

/* Section grounds */
.section { position: relative; padding-block: var(--band); }
.section--dark { background: var(--ink-2); color: var(--cream-dim); }
.section--ink  { background: var(--ink);   color: var(--cream-dim); }
.section--sand2 { background: var(--sand-2); }
.section--flush { padding-block: 0; }

/* ----------------------------------------------------------- 03 PRELOADER */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--ink);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pl__inner { text-align: center; width: min(84vw, 30rem); }
.pl__mark {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--cream);
  line-height: 1.16;   /* room for the mask not to clip the glyph bottoms */
  overflow: hidden;
}
.pl__mark span { display: inline-block; }
.pl__sub {
  margin-top: 1.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
}
.pl__track {
  margin-top: 2.75rem;
  height: 1px;
  width: 100%;
  background: rgba(244, 237, 225, 0.14);
  position: relative;
  overflow: hidden;
}
.pl__bar {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}
.pl__pct {
  margin-top: 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  color: var(--cream-dim);
  font-variant-numeric: tabular-nums;
}
/* curtain panels */
.pl__curtain {
  position: fixed;
  inset: 0;
  z-index: 8999;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}
.pl__curtain span {
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
}

/* -------------------------------------------------------------- 04 HEADER */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  color: var(--cream);
  transition: background-color 0.6s var(--ease), padding 0.6s var(--ease),
              box-shadow 0.6s var(--ease), color 0.6s var(--ease);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 16, 14, 0.92);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  z-index: -1;
}
.site-header.is-solid { padding-block: 0.85rem; }
.site-header.is-solid::after { opacity: 1; }

.hdr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}

/* Typeset emblem — replaces the raster logo (which has a baked-in maroon
   background and a literal cutlery icon) */
.emblem { display: inline-flex; flex-direction: column; line-height: 1; }
.emblem__name {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: currentColor;
}
.emblem__sub {
  margin-top: 0.42rem;
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

.nav { display: flex; justify-content: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
/* the drawer only exists below the desktop breakpoint */
.nav--drawer { display: none; }
.nav a {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.82;
  padding-block: 0.35rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left bottom;
  transition: opacity 0.4s var(--ease), background-size 0.6s var(--ease);
}
.nav a:hover { opacity: 1; background-size: 100% 1px; }

.hdr__end { display: flex; align-items: center; gap: 1.5rem; }
.hdr__tel {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  opacity: 0.75;
}
.hdr .btn { padding: 0.8rem 1.5rem; }

/* Mobile nav */
.nav-toggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  background: none; border: 0; padding: 0;
  cursor: pointer; color: inherit;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 0.35rem; right: 0.35rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 0.95rem; }
.nav-toggle span:nth-child(2) { top: 1.5rem; }
.is-open .nav-toggle span:nth-child(1) { transform: translateY(0.275rem) rotate(45deg); }
.is-open .nav-toggle span:nth-child(2) { transform: translateY(-0.275rem) rotate(-45deg); }

/* ---------------------------------------------------------------- 05 HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(7rem, 14vh, 10rem) clamp(2.5rem, 6vh, 4rem);
}
.hero__stage { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: -6% 0 0 0;
  height: 112%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: transform, opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(22,16,14,0.80) 0%, rgba(22,16,14,0.42) 26%,
                    rgba(22,16,14,0.52) 62%, rgba(22,16,14,0.93) 100%),
    radial-gradient(120% 80% at 50% 42%, rgba(22,16,14,0.10) 0%, rgba(22,16,14,0.72) 100%);
}
.hero__inner { position: relative; z-index: 3; width: 100%; }

/* the statement line sits optically centred in the frame, not the flow */
.hero__statement {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-54%);
  z-index: 2;
  text-align: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.hero__statement .display {
  color: var(--cream);
  text-wrap: balance;
  text-shadow: 0 0.06em 0.5em rgba(22, 16, 14, 0.34);
}

/* opposed edge labels, at the statement's mid-height */
.hero__edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}
.hero__edge--l { left: var(--gutter); }
.hero__edge--r { right: var(--gutter); }

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2.5rem;
}
.hero__blurb { max-width: 30rem; color: var(--cream-dim); font-size: 0.95rem; line-height: 1.75; }

/* Floating accolade card — Amrit's floating review card, carrying the
   Diners' Choice 2026 badge the client asked to keep */
.dc-card {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1rem 1.5rem 1rem 1rem;
  background: var(--sand-2);
  color: var(--char);
  box-shadow: 0 1.5rem 3.5rem rgba(22, 16, 14, 0.42);
  transition: transform 0.6s var(--ease);
}
.dc-card:hover { transform: translateY(-4px); }
.dc-card__badge { width: 4.25rem; height: 4.25rem; flex: none; }
.dc-card__t {
  display: block;
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.dc-card__s {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.5875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--char-dim);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.5625rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-dim);
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}
.scroll-cue i {
  display: block;
  width: 1px;
  height: 2.75rem;
  background: linear-gradient(var(--gold), transparent);
}

/* ------------------------------------------------------- 06 ACCOLADES */
.accolades {
  background: var(--ink);
  color: var(--cream-dim);
  padding-block: clamp(2.5rem, 6vh, 4.25rem);
  border-top: 1px solid rgba(244, 237, 225, 0.07);
}
.accolades__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.accolade { display: grid; gap: 0.55rem; }
.accolade + .accolade {
  border-left: 1px solid rgba(244, 237, 225, 0.09);
  padding-left: clamp(1.5rem, 4vw, 4rem);
}
.accolade__t {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  color: var(--cream);
  line-height: 1.25;
}
.accolade__s {
  font-size: 0.5875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ----------------------------------------------------------- 07 THE HOUSE */
.house { background: var(--sand); overflow: hidden; padding-block: var(--band-lg); }
.house__ghost { top: -7%; left: -5%; }
.house__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.house__head { padding-top: clamp(0rem, 4vw, 4.5rem); }
.house__head .display { margin-top: 1.9rem; }
.house__body { padding-top: clamp(1rem, 9vw, 9rem); }
.house__body .prose { margin-bottom: 2.4rem; }

/* the photograph runs past the right gutter */
.house__plate {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}
.house__plate .frame--wide { margin-right: calc(var(--gutter) * -1); }
.house__caption {
  padding-bottom: 1rem;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--char-dim);
  border-top: 1px solid var(--line-dark);
  padding-top: 1.1rem;
}

/* ------------------------------------------------------ 08 SIGNATURE DISHES */
.dishes { background: var(--sand-3); padding-block: var(--band-lg) 0; overflow: hidden; }
.dishes__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(3.5rem, 9vw, 8rem);
}
.dishes__head .display { margin-top: 1.8rem; }

/* each dish is a full band, photo alternating sides, numeral crossing the edge */
.dish {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(3rem, 8vw, 7rem);
  border-top: 1px solid var(--line-dark);
}
.dish:nth-of-type(even) .dish__media { order: 2; }
.dish__media { position: relative; }
.dish__num {
  position: absolute;
  top: clamp(-2.5rem, -4vw, -1.5rem);
  left: clamp(-1.25rem, -2.5vw, -0.75rem);
  z-index: 2;
}
.dish:nth-of-type(even) .dish__num { left: auto; right: clamp(-1.25rem, -2.5vw, -0.75rem); }
.dish__copy { max-width: 32rem; }
.dish:nth-of-type(even) .dish__copy { justify-self: end; }
.dish__kind {
  font-size: 0.5875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.dish__name { margin-top: 1.1rem; }
.dish__note { margin-top: 1.3rem; color: var(--char-dim); }
.dish__tag {
  margin-top: 1.8rem;
  font-family: var(--ui);      /* display face has no italic */
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 300;
  color: var(--char-dim);
  letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------- 09 RANG */
.rang {
  position: relative;
  background: var(--ink-2);
  color: var(--cream-dim);
  overflow: hidden;
  padding-block: var(--band-lg);
}
.rang__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.26;
  z-index: 0;
}
.rang__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(29,22,19,0.97) 0%, rgba(29,22,19,0.80) 48%, rgba(29,22,19,0.55) 100%);
}
/* the Devanagari word drifts horizontally on scroll */
.rang__word {
  position: absolute;
  left: 0;
  bottom: -2vw;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(9rem, 30vw, 32rem);
  line-height: 0.72;
  color: rgba(201, 149, 79, 0.10);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.rang__grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.rang__copy .display { margin-top: 1.8rem; }
.rang__copy .prose { margin-top: 1.9rem; }
.rang__actions { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
.rang__note {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--cream-dim);
  max-width: 26rem;
}
.rang__plate { position: relative; }
.rang__plate .frame { box-shadow: 0 2rem 5rem rgba(0,0,0,0.5); }

/* ------------------------------------------------------------ 10 THE ROOM */
.room { background: var(--sand); padding-block: var(--band-lg); overflow: hidden; }
.room__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(3rem, 8vw, 6.5rem);
}
.room__head .display { margin-top: 1.7rem; }

/* staggered columns — photography framed as art, deliberately uneven */
.room__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: start;
}
.room__col { display: grid; gap: clamp(1rem, 2.5vw, 2.25rem); }
.room__col--a { padding-top: clamp(1.5rem, 4vw, 3.25rem); }
.room__col--c { padding-top: clamp(0.75rem, 2vw, 1.75rem); }
.room__cap {
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--char-dim);
  padding-top: 0.85rem;
}

/* ---------------------------------------------------------- 10b THE MENUS */
.menus {
  background: var(--ink-2);
  color: var(--cream-dim);
  overflow: hidden;
  padding-block: var(--band-lg);
}
.menus__ghost { left: -4%; bottom: -10%; }
.menus__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: start;
}
.menus__intro .display { margin-top: 1.8rem; }
.menus__intro .lede { margin-top: 1.8rem; }
.menus__actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
}

.menus__list { display: grid; border-top: 1px solid var(--line); }

/* one reusable row — maps to an Elementor loop item */
.menu-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(0.9rem, 3vw, 2.5rem);
  padding: clamp(1.3rem, 2.4vw, 1.85rem) 0;
  border-bottom: 1px solid var(--line);
}
.menu-row__i {
  font-family: var(--display);
  font-size: 0.8125rem;
  color: var(--gold);
  opacity: 0.7;
}
.menu-row__name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.28rem, 2.1vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cream);
  transition: transform 0.6s var(--ease), color 0.5s var(--ease);
}
.menu-row__note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--cream-dim);
  max-width: 34em;
}
.menu-row__meta {
  font-size: 0.5875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
  transition: color 0.5s var(--ease);
}
.menu-row:hover .menu-row__name { color: var(--gold); transform: translateX(0.5rem); }
.menu-row:hover .menu-row__meta { color: var(--gold); }

/* --------------------------------------------------------------- 11 VISIT */
.visit { position: relative; background: var(--sand-2); overflow: hidden; padding-block: var(--band-lg); }
.visit__ghost { right: -6%; bottom: 2%; }
.visit__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
}
/* shopfront bleeds off the left gutter */
.visit__shot { margin-left: calc(var(--gutter) * -1); }
.visit__panel .display { margin-top: 1.8rem; }

.hours { margin-top: 2.6rem; border-top: 1px solid var(--line-dark); }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 0.875rem;
}
.hours__row dt { color: var(--char-dim); letter-spacing: 0.02em; }
.hours__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.hours__row--closed dd { color: var(--maroon); }

.visit__meta {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
}
.meta__k {
  font-size: 0.5875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.5rem;
}
.meta__v { font-size: 0.9rem; line-height: 1.65; color: var(--char); }
.meta__v a:hover { color: var(--gold-soft); }

.visit__actions { margin-top: 2.75rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* -------------------------------------------------------------- 12 FOOTER */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--cream-dim);
  padding-top: clamp(4.5rem, 10vh, 8rem);
  overflow: hidden;
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 8vh, 6rem);
}
.foot__mark .emblem__name { font-size: 1.5rem; color: var(--cream); }
.foot__blurb { margin-top: 1.5rem; font-size: 0.85rem; max-width: 22rem; line-height: 1.75; }
.foot__h {
  font-size: 0.5875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; font-size: 0.875rem; }
.foot__list a { opacity: 0.8; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); }
.foot__list a:hover { opacity: 1; color: var(--gold); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: 1.6rem;
  border-top: 1px solid rgba(244, 237, 225, 0.09);
  font-size: 0.75rem;
  color: rgba(198, 185, 166, 0.7);
}

/* giant wordmark cropped by the viewport bottom — Amrit's closing device */
.foot__wordmark {
  font-family: var(--display);
  font-size: clamp(5rem, 21vw, 21rem);
  line-height: 0.74;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(201, 149, 79, 0.16);
  margin-bottom: -0.16em;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

/* ------------------------------------------------- 13 MOTION BASE STATES */
/* Masked line rise — the wrapper clips, the inner element moves.
   Percentage transforms are set here and animated with fromTo in JS. */
/* padding/negative-margin pair gives descenders room inside the mask without
   shifting the baseline */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.line-mask > .line-inner { display: block; transform: translateY(112%); }

.split-char { display: inline-block; will-change: transform, opacity; }
/* keeps a split heading from breaking in the middle of a word */
.split-word { display: inline-block; white-space: nowrap; }

[data-reveal] { opacity: 0; transform: translateY(2.25rem); }
[data-reveal-clip] .frame__inner,
.frame[data-reveal-clip] img { transform: scale(1.06); }
.frame[data-reveal-clip] { clip-path: inset(0 0 100% 0); }

/* ?noanim — render the finished state, no motion. Layout truth for captures. */
html.noanim .line-mask > .line-inner { transform: none !important; }
html.noanim [data-reveal] { opacity: 1 !important; transform: none !important; }
html.noanim .frame[data-reveal-clip] { clip-path: none !important; }
html.noanim .frame[data-reveal-clip] img { transform: none !important; }
html.noanim .split-char { opacity: 1 !important; transform: none !important; }
html.noanim #preloader, html.noanim .pl__curtain { display: none !important; }
html.noanim .hero__slide { opacity: 0; }
html.noanim .hero__slide.is-active { opacity: 1; }
html.noanim .pl__sub { opacity: 1 !important; }

/* ?flat — cap viewport-sized blocks so a full-page capture stays a sane
   height (svh resolves against the capture window, which can be enormous) */
html.flat .hero { min-height: 46rem; }
html.flat .page-hero { min-height: 32rem; }
html.flat * { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .line-mask > .line-inner { transform: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .frame[data-reveal-clip] { clip-path: none !important; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------- 14 RESPONSIVE */
@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
  .hdr { grid-template-columns: auto 1fr; }
  .hdr__end { justify-self: end; }
  .hdr__tel { display: none; }

  .nav--drawer {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 790;
    background: var(--ink);
    place-content: center;
    justify-items: center;
    gap: 1.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease), visibility 0.6s;
  }
  .is-open .nav--drawer { opacity: 1; visibility: visible; }
  .nav--drawer a { font-size: 0.9rem; letter-spacing: 0.26em; }
}

@media (max-width: 900px) {
  .hero__edge { display: none; }
  .hero__foot { grid-template-columns: 1fr; }
  .dc-card { justify-self: start; }
  /* once the hero foot stacks, the centred scroll cue lands on top of the
     accolade card — and "scroll" is a redundant affordance on a phone anyway */
  .scroll-cue { display: none; }

  .accolades__grid { grid-template-columns: 1fr; gap: 0; }
  .accolade { padding-block: 1.35rem; }
  .accolade + .accolade {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(244, 237, 225, 0.09);
  }

  .house__grid, .dishes__head, .room__head, .rang__grid, .visit__grid,
  .menus__grid { grid-template-columns: 1fr; }
  .menu-row { grid-template-columns: auto minmax(0, 1fr); }
  .menu-row__meta { grid-column: 2; margin-top: 0.6rem; }
  .house__head, .house__body { padding-top: 0; }
  .house__plate { grid-template-columns: 1fr; }
  .house__plate .frame--wide { margin-right: calc(var(--gutter) * -1); }

  .dish { grid-template-columns: 1fr; gap: 2rem; }
  .dish:nth-of-type(even) .dish__media { order: 0; }
  .dish:nth-of-type(even) .dish__copy { justify-self: start; }
  .dish:nth-of-type(even) .dish__num { left: clamp(-1.25rem, -2.5vw, -0.75rem); right: auto; }

  .rang__grid { gap: 3rem; }
  .rang__veil {
    background: linear-gradient(180deg, rgba(29,22,19,0.94) 0%, rgba(29,22,19,0.86) 60%, rgba(29,22,19,0.94) 100%);
  }

  .visit__shot { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }

  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__mark { grid-column: 1 / -1; }
}

/* ------------------------------------------------- 15 RANG PAGE SECTIONS */

/* interior page hero — shorter than the home hero, same cinematic ground */
.page-hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding-block: clamp(9rem, 20vh, 14rem) clamp(4rem, 10vh, 7rem);
}
.page-hero__bg {
  position: absolute;
  inset: -8% 0 0 0;
  height: 116%;
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: 0;
}
.page-hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(22,16,14,0.88) 0%, rgba(22,16,14,0.55) 42%, rgba(22,16,14,0.94) 100%);
}
.page-hero__word {
  position: absolute;
  right: -2vw;
  top: 6%;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(8rem, 26vw, 26rem);
  line-height: 0.72;
  color: rgba(201, 149, 79, 0.12);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.page-hero__inner { position: relative; z-index: 3; }
.page-hero__inner .display { margin-top: 1.9rem; }
.page-hero__lede { margin-top: 1.9rem; color: var(--cream-dim); }

/* how it works — editorial rows, numeral in the margin */
.terms { background: var(--sand-3); padding-block: var(--band-lg); }
.terms__list { display: grid; }
.term {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  border-top: 1px solid var(--line-dark);
}
.term:last-child { border-bottom: 1px solid var(--line-dark); }
.term__num { display: block; }
.term__body { max-width: 34rem; }
.term__note { margin-top: 1.1rem; color: var(--char-dim); }

/* full-bleed breathing band */
.band { height: clamp(18rem, 48vh, 34rem); overflow: hidden; position: relative; }
.band__img {
  position: absolute;
  inset: -10% 0 0 0;
  height: 120%;
  background-size: cover;
  background-position: center;
}

/* closing call to action */
.reserve { background: var(--ink-2); padding-block: var(--band-lg); text-align: center; }
.reserve__inner { display: grid; justify-items: center; gap: 1.9rem; }
.reserve__inner .lede { text-align: center; }
.reserve__actions {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .term { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 640px) {
  /* Header crunch: at 375px the bar has ~130px left for the button after the
     emblem, hamburger and gutters, but "Order online" at the desktop padding
     and tracking needs ~155px. Tighten the button and close the gap rather
     than let it wrap or shrink the tap target. */
  .hdr { gap: 1rem; }
  .hdr__end { gap: 0.85rem; }
  .hdr .btn {
    padding: 0.75rem 0.9rem;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
  }

  .room__grid { grid-template-columns: 1fr; }
  .room__col--a, .room__col--c { padding-top: 0; }
  .visit__meta { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  /* On a short phone (320x568) the absolutely-positioned statement and the
     bottom-anchored blurb fight for the same band and overlap. Stack the hero
     instead: statement in normal flow, above the blurb. Safe at any height. */
  .hero { flex-direction: column; justify-content: flex-end; align-items: stretch; }
  .hero__statement {
    position: static;
    transform: none;
    text-align: left;
    padding-inline: var(--gutter);
    margin-bottom: 1.6rem;
  }

  .dc-card { padding: 0.85rem 1.15rem 0.85rem 0.85rem; gap: 0.9rem; }
  .dc-card__badge { width: 3.4rem; height: 3.4rem; }
}

/* Small phones (iPhone SE / 320–400px). The header is the only thing that runs
   out of room: emblem + Order online + hamburger. NOTE body has
   overflow-x:hidden, so an overflowing header will NOT show up in
   scrollWidth — compare .hdr__end's right edge against clientWidth instead. */
@media (max-width: 400px) {
  .hdr { gap: 0.7rem; }
  .emblem__name { font-size: 1.35rem; letter-spacing: 0.2em; text-indent: 0.2em; }
  .emblem__sub  { font-size: 0.44rem; letter-spacing: 0.28em; text-indent: 0.28em; }
  .hdr__end { gap: 0.6rem; }
  .hdr .btn { padding: 0.8rem 0.7rem; letter-spacing: 0.1em; }  /* keeps a 44px+ tap target */
}