/* ==========================================================================
   CHANDI — Modern Indian Café · Bar, one-north Singapore
   Built to Chandi Brand Specification v2.0 (16 Aug 2026)

   Standing rules encoded here, not merely described:
   · No pure black anywhere. Encre replaces it in every context.
   · Two darks only — Encre and Tabac.
   · Light dominates. Dark is punctuation, not ground.
   · One accent per surface. Bleu Trianon and Miel never at full strength together.
   · Accents never carry type on a light ground — Cuivre and Ardoise do.
   · Textures are grounds only. One per composition. Never at full strength
     behind running copy.
   · No moon in any form. No mandala, compass rose, ogee, paisley, elephant.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* The two darks */
  --encre:        #232B33;
  --encre-deep:   #1B2229;   /* Encre at depth — for stacked dark bands only */
  --tabac:        #5A4A3C;

  /* Light grounds — three quarters of every page */
  --blanc:        #F6F2EA;
  --craie:        #E8E2D6;
  --ficelle:      #D6CBB8;
  --gris:         #C2C6C0;

  /* Accents — decorative only */
  --bleu:         #93A8B8;
  --amande:       #B9C3A8;
  --miel:         #C89B5C;
  --rose:         #C9A091;

  /* The readable pair.
     The brand spec quotes Cuivre at 4.61:1 and Ardoise at 4.51:1 — both true,
     but only against Blanc cassé. On the Craie ground and on the textured
     grounds they fall to 3.99 and 3.91, under AA. The -deep variants below are
     the same hues taken down until they clear 4.5 on Craie, and they are what
     the darker bands use. Measured, not eyeballed. */
  --cuivre:       #8F6536;   /* 4.61 on Blanc cassé */
  --cuivre-deep:  #835C31;   /* 5.31 on Blanc, 4.60 on Craie */
  --ardoise:      #62717B;   /* 4.51 on Blanc cassé */
  --ardoise-deep: #5A6871;   /* 5.19 on Blanc, 4.50 on Craie */

  /* Semantic */
  --ink:          var(--encre);
  --ink-soft:     #4B555F;
  --ink-faint:    #5D646C;   /* was #6B747D — 4.26 on Blanc, under AA */
  --rule:         var(--gris);
  --accent:       var(--cuivre);

  /* Type — Canela and GT Ultra Fine are the brand's own licensed faces.
     Luxia is desktop-licence only; see assets/fonts/fonts.css. */
  --display: "Canela Web", Georgia, "Times New Roman", serif;
  --body:    "Canela Web", Georgia, "Times New Roman", serif;
  --label:   "GT Ultra Fine", "Canela Web", Georgia, serif;
  --deva:    "Noto Serif Devanagari", "Nirmala UI", serif;

  /* Letterspacing — fixed by the brand spec */
  --tr-desc:  0.34em;
  --tr-endo:  0.44em;
  --tr-label: 0.26em;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --band:   clamp(2.5rem, 4.2vw, 3.75rem);
  --shell:  80rem;
  --narrow: 60rem;
  --text:   34rem;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);

  --bar-h: 4.5rem;   /* sticky booking bar height, reserved at page foot */
}

/* ==========================================================================
   2 · RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg, picture, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3 · BASE TYPE
   ========================================================================== */
body {
  font-family: var(--body);
  font-size: clamp(0.95rem, 0.24vw + 0.9rem, 1.02rem);
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: 0.012em;
  color: var(--ink);
  background: var(--blanc);
  padding-bottom: var(--bar-h);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

p { max-width: var(--text); }
p + p { margin-top: 1.05em; }
em { font-style: italic; }

h1, .h1 { font: 300 clamp(1.95rem, 3.6vw, 3.1rem)/1.12 var(--display); letter-spacing: -0.006em; }
h2, .h2 { font: 300 clamp(1.55rem, 2.5vw, 2.25rem)/1.18 var(--display); letter-spacing: -0.004em; }
h3, .h3 { font: 300 clamp(1.05rem, 1.1vw, 1.24rem)/1.32 var(--display); letter-spacing: 0.002em; }
h4, .h4 { font: 300 clamp(0.98rem, 0.9vw, 1.08rem)/1.4 var(--display); }

.display { font-family: var(--display); font-weight: 300; line-height: 1.04; }

.label {
  font-family: var(--label); font-weight: 300;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  font-size: 0.6rem; line-height: 1.6; color: var(--cuivre);
}
.label--slate { color: var(--ardoise); }
.label--miel  { color: var(--miel); }
.label--pale  { color: var(--craie); }

.descriptor  { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-desc); font-size: 0.58rem; }
.endorsement { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-endo); font-size: 0.54rem; }

.lede {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.06rem, 1.3vw, 1.28rem);
  line-height: 1.56; max-width: 30rem; color: var(--ink-soft);
}
.deva { font-family: var(--deva); font-size: 1.12em; letter-spacing: 0.01em; }

.muted { color: var(--ink-soft); }
.centred { text-align: center; }
.centred p, .centred .lede { margin-inline: auto; }
.u-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   4 · LE FILET — the signature device
   The fine double rule: a hairline and its mirror a few millimetres apart.
   Structural, not decorative — it divides, frames, underlines and closes.
   ========================================================================== */
.filet {
  border: 0; height: 3px; width: 100%;
  background:
    linear-gradient(var(--rule), var(--rule)) top    / 100% 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat;
}
.filet--accent { --rule: var(--cuivre); opacity: 0.6; }
.filet--pale   { --rule: rgba(246,242,234,0.32); }

.filet-split {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.25rem;
  margin-inline: auto; max-width: 24rem;
}
.filet-split::before, .filet-split::after {
  content: ""; height: 3px;
  background:
    linear-gradient(var(--cuivre), var(--cuivre)) top    / 100% 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) bottom / 100% 1px no-repeat;
  opacity: 0.5;
}

/* Cannelure — fluting, as a repeating ground */
.flute      { background: url("../img/texture/cannelure-light.svg") repeat; }
.flute-dark { background-image: url("../img/texture/cannelure-dark.svg"); background-repeat: repeat; }

/* On Craie and on any textured ground, the accents step down to their -deep
   variants so body-size type still clears AA. One rule, no per-element fixes. */
.band--craie, .tex, .card {
  --cuivre: var(--cuivre-deep);
  --ardoise: var(--ardoise-deep);
}
.band--encre, .card--encre, .bookbar, .nav, .foot { --cuivre: #8F6536; --ardoise: #62717B; }

/* Brand textures — grounds only, one per composition */
.tex { background-size: cover; background-position: center; }
.tex--warm     { background-image: url("../img/texture/warm.jpg"); }
.tex--marble   { background-image: url("../img/texture/marble.jpg"); }
.tex--gold     { background-image: url("../img/texture/gold.jpg"); }
.tex--sage     { background-image: url("../img/texture/sage.jpg"); }
.tex--swirl    { background-image: url("../img/texture/swirl.jpg"); }
.tex--paper    { background-image: url("../img/texture/paper.jpg"); }
.tex--ivory    { background-image: url("../img/texture/ivory.jpg"); }
.tex--beige    { background-image: url("../img/texture/beige.jpg"); }
.tex--linen    { background-image: url("../img/texture/linen.jpg"); }
.tex--waves    { background-image: url("../img/texture/waves.jpg"); }
.tex--contour  { background-image: url("../img/texture/contour.jpg"); }
.tex--scallop  { background-image: url("../img/texture/scallop.jpg"); }
.tex--radial   { background-image: url("../img/texture/radial.jpg"); }
.tex--handmade { background-image: url("../img/texture/handmade.jpg"); }

.seal { width: clamp(3.25rem, 6vw, 4.75rem); height: auto; margin-inline: auto; opacity: 0.95; }
.ribbon { width: 100%; height: 3rem; opacity: 0.5; }

/* ==========================================================================
   5 · LAYOUT
   ========================================================================== */
.shell   { width: min(100% - (var(--gutter) * 2), var(--shell));  margin-inline: auto; }
.narrow  { width: min(100% - (var(--gutter) * 2), var(--narrow)); margin-inline: auto; }

.band        { padding-block: var(--band); position: relative; }
.band--tight { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.band--craie { background: var(--craie); }
.band--encre { background: var(--encre); color: var(--blanc); }
.band--encre p  { color: rgba(246,242,234,0.82); }
.band--encre h1, .band--encre h2, .band--encre h3, .band--encre h4 { color: var(--blanc); }
.band--encre .label { color: var(--miel); }
.band--encre .muted { color: rgba(246,242,234,0.66); }

.stack    > * + * { margin-top: 1.05rem; }
.stack-lg > * + * { margin-top: clamp(1.1rem, 2vw, 1.6rem); }

.split { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--l { grid-template-columns: 1.15fr 0.85fr; }
  .split--r { grid-template-columns: 0.85fr 1.15fr; }
  .split--slim { grid-template-columns: 0.58fr 1.42fr; }
  .split--flip > :first-child { order: 2; }
}

/* The chapter eyebrow — a numeral, a label and a rule */
.eyebrow { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.eyebrow__num {
  font-family: var(--display); font-size: 0.95rem; color: var(--cuivre);
  font-feature-settings: "onum" 1;
}
.eyebrow::after {
  content: ""; flex: 1; height: 3px; max-width: 6rem;
  background:
    linear-gradient(var(--rule), var(--rule)) top    / 100% 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat;
  opacity: 0.85;
}
.eyebrow--c { justify-content: center; }
.eyebrow--c::after { display: none; }
.band--encre .eyebrow::after { --rule: rgba(200,155,92,0.45); }
.band--encre .eyebrow__num { color: var(--miel); }

/* ==========================================================================
   6 · PARALLAX AND MOTION
   Two kinds. Grounds drift on scroll; in-flow photographs breathe on their
   own with a slow Ken Burns. Both stop under prefers-reduced-motion.
   ========================================================================== */
.px { position: relative; overflow: hidden; isolation: isolate; }
.px__layer {
  position: absolute; inset: -12% 0; z-index: -1;
  background-size: cover; background-position: center;
  will-change: transform;
}

.frame { position: relative; overflow: hidden; background: var(--craie); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame--16x9{ aspect-ratio: 16 / 9; }
.frame--1x1 { aspect-ratio: 1 / 1; }

/* le filet, as an inset frame on photography */
.frame--filet::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid rgba(246,242,234,0.42);
}

@keyframes kenburns {
  from { transform: scale(1.0) translate3d(0, 0, 0); }
  to   { transform: scale(1.085) translate3d(0, -1.2%, 0); }
}
.kenburns { animation: kenburns 26s var(--ease-slow) infinite alternate; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .kenburns { animation: none; } }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal--1 { transition-delay: 0.1s; }
.reveal--2 { transition-delay: 0.2s; }
.reveal--3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   7 · LINKS AND BUTTONS
   ========================================================================== */
.link {
  font-family: var(--label); font-weight: 300;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  font-size: 0.6rem; color: var(--cuivre); text-decoration: none;
  padding-bottom: 0.45rem; display: inline-block; position: relative;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background:
    linear-gradient(currentColor, currentColor) top    / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 1px no-repeat;
  opacity: 0.45; transition: opacity 0.35s var(--ease);
}
.link:hover::after, .link:focus-visible::after { opacity: 1; }
.band--encre .link { color: var(--miel); }

.btn {
  display: inline-block; font-family: var(--label); font-weight: 300;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  font-size: 0.6rem; text-decoration: none; text-align: center;
  padding: 0.95rem 2rem; border: 1px solid var(--cuivre); color: var(--cuivre);
  background: transparent; cursor: pointer;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--cuivre); color: var(--blanc); }
.btn--solid { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--tabac); border-color: var(--tabac); }
.btn--pale  { border-color: var(--miel); color: var(--miel); }
.btn--pale:hover, .btn--pale:focus-visible { background: var(--miel); color: var(--encre); }

:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; }
.band--encre :focus-visible, .bookbar :focus-visible { outline-color: var(--miel); }

.skip { position: absolute; left: -9999px; background: var(--encre); color: var(--blanc); padding: 0.75rem 1.25rem; z-index: 200; }
.skip:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   8 · MASTHEAD
   Wordmark left, one control right. The navigation opens as a full overlay at
   every width, so the bar stays narrow and the type stays readable.
   ========================================================================== */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding-block: 1rem;
  transition: background-color 0.5s var(--ease), padding 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.masthead__mark { display: flex; align-items: center; line-height: 0; }
/* Wordmark only. The compact lockup carries "MODERN INDIAN CAFÉ · BAR" beneath
   the wordmark at roughly 6px on screen at this size — unreadable, and the
   brand's minimum-size rule is to drop to wordmark-only rather than ship
   illegible microtype. The descriptor still appears in the hero and footer,
   where there is room for it. */
.masthead__mark img { width: clamp(5.75rem, 7vw, 7rem); height: auto; display: block; }
.masthead__mark .m-light { display: block; }
.masthead__mark .m-dark  { display: none; }

.masthead.solid, .masthead--light {
  background: rgba(246,242,234,0.96); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(194,198,192,0.75);
}
.masthead.solid { padding-block: 0.75rem; }
.masthead.solid .m-light, .masthead--light .m-light { display: none; }
.masthead.solid .m-dark,  .masthead--light .m-dark  { display: block; }

/* The control */
.burger {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: none; border: 0; padding: 0.6rem 0; cursor: pointer;
  min-height: 40px; color: var(--blanc);
  font-family: var(--label); font-weight: 300;
  text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.7rem;
  transition: color 0.35s var(--ease);
}
.burger svg { width: 26px; height: 12px; stroke: currentColor; }
.burger:hover { color: var(--cuivre); }
.masthead.solid .burger, .masthead--light .burger { color: var(--encre); }
.masthead.solid .burger:hover, .masthead--light .burger:hover { color: var(--cuivre); }
@media (max-width: 32rem) { .burger__t { display: none; } }

/* The overlay — grouped, and it carries the whole site. Because everything is
   one gesture away, the pages themselves can stop repeating navigation. */
.nav {
  position: fixed; inset: 0; z-index: 95;
  background: var(--encre);
  display: grid; align-content: center;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
  visibility: hidden;
  padding: 5rem var(--gutter) 3rem;
  overflow-y: auto;
}
.nav.open { transform: translateY(0); visibility: visible; }
.nav__in { width: min(100%, var(--shell)); margin-inline: auto; }
.nav__cols { display: grid; gap: clamp(1.75rem, 3vw, 3rem); }
@media (min-width: 46rem) { .nav__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .nav__cols { grid-template-columns: repeat(4, 1fr); } }
.nav__col { display: grid; align-content: start; gap: 0.15rem; }
.nav__h {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.58rem; color: var(--miel);
  padding-bottom: 0.75rem; margin-bottom: 0.5rem; max-width: none;
  border-bottom: 1px solid rgba(200,155,92,0.28);
}
.nav a {
  display: grid; gap: 0.1rem; text-decoration: none; color: var(--blanc);
  padding-block: 0.6rem; transition: color 0.3s var(--ease);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--miel); }
.nav__t { font-family: var(--display); font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.25; }
.nav__d { font-size: 0.8rem; color: rgba(246,242,234,0.5); line-height: 1.45; }
.nav a:hover .nav__d { color: rgba(246,242,234,0.68); }
.nav__meta {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(200,155,92,0.22);
  display: grid; gap: 0.4rem; font-size: 0.82rem; color: rgba(246,242,234,0.55);
}
.nav__meta p { max-width: none; }
.nav__meta a { display: inline; color: var(--miel); padding: 0; }

.nav__x {
  position: absolute; top: 1.25rem; right: var(--gutter);
  background: none; border: 0; color: var(--blanc); cursor: pointer; padding: 0.5rem;
}
.nav__x svg { width: 20px; height: 20px; stroke: currentColor; }

/* ==========================================================================
   9 · HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--blanc);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: min(80svh, 36rem);
}
@media (min-width: 62rem) { .hero { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }

.hero__in {
  position: relative; z-index: 2; min-width: 0;
  display: grid; align-content: center; justify-items: start;
  gap: 1.15rem; text-align: left;
  padding: 7.5rem clamp(1.5rem, 4vw, 4.5rem) 3rem clamp(1.5rem, 5vw, 6rem);
  background-image: url("../img/texture/handmade.jpg");
  background-size: cover; background-position: center;
}
.hero__in::after {
  /* le filet, standing on end, marking the join */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px;
  background:
    linear-gradient(var(--gris), var(--gris)) left  / 1px 100% no-repeat,
    linear-gradient(var(--gris), var(--gris)) right / 1px 100% no-repeat;
}
.hero__in > * { max-width: 30rem; }

.hero__media { position: relative; overflow: hidden; min-height: 18rem; min-width: 0; width: 100%; }
.hero__media img { will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

@media (max-width: 62rem) {
  .hero { grid-template-rows: auto auto; min-height: 0; }
  .hero__in { padding: 6.5rem var(--gutter) 2.5rem; justify-items: center; text-align: center; }
  .hero__in > * { margin-inline: auto; }
  .hero__in::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 3px;
    background:
      linear-gradient(var(--gris), var(--gris)) top    / 100% 1px no-repeat,
      linear-gradient(var(--gris), var(--gris)) bottom / 100% 1px no-repeat; }
  /* min-height + aspect-ratio makes the box derive its WIDTH from the height,
     which overflowed the viewport. Height is set outright instead. */
  .hero__media { aspect-ratio: auto; min-height: 0; height: min(52vw, 17rem); }
}

.hero__eyebrow { color: var(--cuivre); }
.hero__mark { width: clamp(7rem, 11vw, 10rem); height: auto; margin-block: 0.35rem 0.3rem; }
.hero__endo { color: var(--ink-faint); margin-top: 0.5rem; }
.hero__offer {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.85rem, 3.5vw, 3.05rem); line-height: 1.1;
  color: var(--encre); letter-spacing: -0.014em;
}
.hero__offer b { font-weight: 300; color: var(--cuivre); }
.hero__sub { color: var(--cuivre); max-width: 27rem; font-size: 1.05rem; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
@media (max-width: 62rem) { .hero__acts { justify-content: center; } }

/* Page openings */
.pagehead { padding: clamp(6.5rem, 10vw, 8rem) 0 clamp(1.25rem, 2.2vw, 2rem); text-align: center; position: relative; }
.pagehead h1 { margin-block: 1.1rem 0; }
.pagehead .lede { margin: 1.6rem auto 0; }

/* ==========================================================================
   10 · THE OFFER — the venue is the product
   ========================================================================== */
.offer { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 58rem) { .offer { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }

.figure-row { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: repeat(2, 1fr); text-align: center; }
@media (min-width: 46rem) { .figure-row { grid-template-columns: repeat(4, 1fr); } }
.figure-row--3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46rem) { .figure-row--3 { grid-template-columns: repeat(3, 1fr); } }
.figure { padding-top: 1.35rem;
  background:
    linear-gradient(var(--cuivre), var(--cuivre)) top   / 100% 1px no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) 0 2px / 100% 1px no-repeat; }
.band--encre .figure {
  background:
    linear-gradient(var(--miel), var(--miel)) top   / 100% 1px no-repeat,
    linear-gradient(var(--miel), var(--miel)) 0 2px / 100% 1px no-repeat; }
.figure__n { font-family: var(--display); font-weight: 300; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; margin-top: 0.5rem; max-width: none; }
.figure__l { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.6rem; color: var(--ardoise); max-width: none; }
.band--encre .figure__l { color: var(--miel); }

/* What the room does — the toys */
.toys {
  display: grid; gap: 1px;
  background: rgba(200,155,92,0.28);
  position: relative; isolation: isolate;
}
.toy {
  position: relative; isolation: isolate;
  background: transparent;
}
/* Texture under a translucent Encre wash — the panels stop reading as a flat
   swatch and pick up the plaster the rest of the site is built on. */
.toys::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/texture/swirl.jpg") center / cover;
}
.toys::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, rgba(35,43,51,0.93) 0%, rgba(35,43,51,0.86) 55%, rgba(27,34,41,0.95) 100%);
}
@media (min-width: 40rem) { .toys { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .toys { grid-template-columns: repeat(3, 1fr); } }
.toy { padding: clamp(1.4rem, 2.4vw, 2rem); }
.toy__i { width: 26px; height: 26px; stroke: var(--miel); fill: none; stroke-width: 1; margin-bottom: 0.7rem; }
.toy h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.toy p { font-size: 1rem; line-height: 1.72; max-width: none; color: rgba(246,242,234,0.82); }

/* ==========================================================================
   11 · THE MENU
   ========================================================================== */
.movement + .movement { margin-top: clamp(4rem, 8vw, 7rem); }
.movement__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.movement__head p { margin-inline: auto; color: var(--ink-soft); }

.card {
  background: var(--blanc);
  border: 1px solid rgba(194,198,192,0.9);
  outline: 1px solid rgba(194,198,192,0.9); outline-offset: 6px;
  padding: clamp(1.75rem, 4.5vw, 4rem) clamp(1.35rem, 4vw, 3.5rem);
}
.card--encre { background: var(--encre); color: var(--blanc); border-color: rgba(200,155,92,0.42); outline-color: rgba(200,155,92,0.42); }

.plate {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1.15rem;
  padding-block: clamp(1.15rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(194,198,192,0.7);
}
.plate:first-child { border-top: 0; }
.plate__n { font-family: var(--display); font-size: 0.92rem; color: var(--cuivre); padding-top: 0.5rem; font-feature-settings: "onum" 1; }
.plate__b { min-width: 0; }
.plate__name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.02rem, 1.15vw, 1.2rem); line-height: 1.32;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem;
}
.plate__price { margin-left: auto; color: var(--cuivre); font-weight: 300; font-feature-settings: "onum" 1; white-space: nowrap; padding-left: 1.25rem; }
.plate__line { margin-top: 0.55rem; color: var(--ink-soft); max-width: 42rem; }
.plate__limited { display: block; margin-top: 0.45rem; color: var(--cuivre); font-style: italic; font-size: 0.95rem; }

.tag {
  font-family: var(--label); font-weight: 300; font-size: 0.56rem;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--ardoise); border: 1px solid rgba(98,113,123,0.38);
  padding: 0.2rem 0.5rem 0.15rem; white-space: nowrap; line-height: 1.4;
}
.tag--fire { color: var(--cuivre); border-color: rgba(143,101,54,0.4); }

/* The fold-out: story, what makes it modern, allergens */
.tell { margin-top: 0.85rem; }
.tell summary {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.62rem; color: var(--ardoise);
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: 0.6rem; padding: 0.3rem 0; transition: color 0.3s var(--ease);
}
.tell summary::-webkit-details-marker { display: none; }
.tell summary::after {
  content: ""; width: 1.6rem; height: 3px;
  background:
    linear-gradient(currentColor, currentColor) top    / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 1px no-repeat;
  opacity: 0.55;
}
.tell summary:hover { color: var(--cuivre); }
.tell[open] summary { color: var(--cuivre); margin-bottom: 0.75rem; }
.tell__body { display: grid; gap: 1.1rem; padding-left: 1.1rem; border-left: 1px solid rgba(143,101,54,0.28); }
.tell__body p { font-size: 0.97rem; color: var(--ink-soft); max-width: 40rem; }
.tell__k { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.58rem; color: var(--cuivre); display: block; margin-bottom: 0.3rem; }

@media (max-width: 34rem) { .plate { grid-template-columns: 1.75rem 1fr; gap: 0 0.85rem; } }

.legend { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; margin-top: 1.75rem; }
.legend span { font-family: var(--label); font-weight: 300; font-size: 0.6rem; text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--ardoise); }

/* ==========================================================================
   12 · CARDS AND GRIDS
   ========================================================================== */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 44rem) { .grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.tile { display: grid; gap: 1rem; text-decoration: none; }
.tile .frame img { transition: transform 1.2s var(--ease); }
.tile:hover .frame img { transform: scale(1.04); }
.tile h3 { font-size: 1.18rem; }
.tile p { font-size: 0.93rem; color: var(--ink-soft); margin-top: 0.25rem; max-width: none; }
.band--encre .tile p { color: rgba(246,242,234,0.72); }

/* People */
.person { display: grid; gap: 1.25rem; }
.person__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.star {
  font-family: var(--label); font-weight: 300; font-size: 0.58rem;
  text-transform: uppercase; letter-spacing: var(--tr-label);
  color: var(--encre); background: var(--miel); padding: 0.25rem 0.6rem 0.2rem;
}
.person h3 { font-size: 1.45rem; }
.person__role { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.6rem; color: var(--ardoise); }
.band--encre .person__role { color: var(--miel); }
.person p { font-size: 0.96rem; max-width: none; }

/* Pull quote */
.pull { text-align: center; }
.pull blockquote { font-family: var(--display); font-weight: 300; font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.12; letter-spacing: -0.012em; max-width: 22ch; margin-inline: auto; }
.pull cite { display: block; margin-top: 1.75rem; font-style: normal; }

/* Detail rows */
.detail__row { display: grid; gap: 0.3rem 2rem; padding-block: 1.1rem; border-top: 1px solid rgba(194,198,192,0.7); }
@media (min-width: 34rem) { .detail__row { grid-template-columns: 10rem 1fr; } }
.detail__row:first-child { border-top: 0; padding-top: 0; }
.detail__row dt { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.62rem; color: var(--ardoise); padding-top: 0.28rem; }
.detail__row dd { margin: 0; }
.detail__row a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.detail__row a:hover, .detail__row a:focus-visible { border-bottom-color: currentColor; }
.band--encre .detail__row { border-color: rgba(200,155,92,0.26); }
.band--encre .detail__row dt { color: var(--miel); }

/* FAQ — answer-engine fodder, and useful to a guest */
.faq { border-top: 1px solid rgba(194,198,192,0.7); }
.faq details { border-bottom: 1px solid rgba(194,198,192,0.7); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0;
  font-family: var(--display); font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  position: relative; transition: color 0.3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 12px; height: 12px;
  border-right: 1px solid var(--cuivre); border-bottom: 1px solid var(--cuivre);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.35s var(--ease);
}
.faq details[open] summary { color: var(--cuivre); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { padding: 0 2.5rem 1.6rem 0; }
.faq__a p { color: var(--ink-soft); }

/* Journal */
.post { display: grid; gap: 1.1rem; text-decoration: none; }
.post__meta { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.6rem; color: var(--ardoise); }
.post h3 { font-size: 1.3rem; }
.post p { font-size: 0.94rem; color: var(--ink-soft); max-width: none; }
.prose { max-width: 38rem; margin-inline: auto; }
.prose h2 { margin-top: 2.5rem; margin-bottom: 0.9rem; }
.prose p + p { margin-top: 1.1em; }
.prose blockquote { font-family: var(--display); font-size: 1.4rem; line-height: 1.4; margin: 2rem 0; padding-left: 1.5rem; border-left: 1px solid var(--cuivre); }

/* ==========================================================================
   13 · FORMS
   ========================================================================== */
.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; gap: 1.4rem; }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field > span { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.6rem; color: var(--ardoise); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-weight: 300; font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--gris);
  padding: 0.6rem 0; border-radius: 0; width: 100%;
  transition: border-color 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--cuivre); }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--cuivre) 50%), linear-gradient(135deg, var(--cuivre) 50%, transparent 50%);
  background-position: calc(100% - 10px) 1.1rem, calc(100% - 5px) 1.1rem;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 1.5rem;
}
.form__note { font-size: 0.85rem; color: var(--ardoise); max-width: 34rem; }
.card--encre .field > span { color: var(--miel); }
.card--encre .field input, .card--encre .field select, .card--encre .field textarea { color: var(--blanc); border-bottom-color: rgba(200,155,92,0.4); }
.card--encre .field input:focus, .card--encre .field select:focus, .card--encre .field textarea:focus { border-bottom-color: var(--miel); }
.card--encre .field select option { color: var(--ink); }

/* ==========================================================================
   14 · THE BOOKING BAR — always on, four ways in
   ========================================================================== */
.bookbar {
  position: fixed; inset: auto 0 0 0; z-index: 85;
  background: var(--encre-deep);
  border-top: 1px solid rgba(200,155,92,0.4);
  box-shadow: 0 -8px 34px rgba(27,34,41,0.34);
}
.bookbar__in {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.55rem clamp(0.75rem, 3vw, 1.75rem);
  width: min(100%, var(--shell)); margin-inline: auto;
}
.bookbar__lead {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.6rem; color: var(--miel);
  max-width: none; flex: 0 0 auto; padding-right: 0.5rem;
}
.bookbar__acts { display: flex; gap: 0.5rem; flex: 1; justify-content: flex-end; }
.bookbar a {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.66rem; text-decoration: none;
  padding: 0.85rem 1.15rem; text-align: center; white-space: nowrap;
  border: 1px solid rgba(200,155,92,0.45); color: var(--craie);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.bookbar a:hover, .bookbar a:focus-visible { background: rgba(200,155,92,0.16); color: var(--blanc); }
/* Four solid colours, one per action. Deliberate deviation from the brand's
   "one accent per surface" rule: this bar is the primary conversion control on
   every page and needs to be told apart at a glance. Solid fills with Encre
   type — every pair clears AA. */
.bookbar a { border-color: transparent; color: var(--encre); font-weight: 400; }
.bookbar a.bb1 { background: var(--miel); }
.bookbar a.bb2 { background: var(--bleu); }
.bookbar a.bb3 { background: var(--amande); }
.bookbar a.bb4 { background: var(--rose); }
.bookbar a:hover, .bookbar a:focus-visible { background: var(--blanc); color: var(--encre); }

@media (max-width: 62rem) {
  :root { --bar-h: 3.9rem; }
  .bookbar__lead { display: none; }
  .bookbar__in { padding: 0.4rem 0.4rem; gap: 0.35rem; }
  .bookbar__acts { gap: 0.3rem; }
  .bookbar a { flex: 1; padding: 0.7rem 0.35rem; font-size: 0.52rem; letter-spacing: 0.14em; }
}
@media (max-width: 26rem) { .bookbar a { font-size: 0.48rem; letter-spacing: 0.1em; padding: 0.65rem 0.2rem; } }

/* ==========================================================================
   15 · FOOTER
   ========================================================================== */
.foot { background: var(--encre); color: var(--craie); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; }
.foot a { color: var(--craie); text-decoration: none; transition: color 0.3s var(--ease); }
.foot a:hover { color: var(--miel); }
.foot h2 { font-family: var(--label); font-weight: 300; font-size: 0.62rem; text-transform: uppercase; letter-spacing: var(--tr-label); color: var(--miel); margin-bottom: 1.1rem; }

.foot__partners { text-align: center; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid rgba(200,155,92,0.22); }
.foot .foot__houses { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0; margin-top: 1.1rem; }
.foot .foot__houses li { font-family: var(--label); font-weight: 300; text-transform: uppercase; letter-spacing: var(--tr-label); font-size: 0.6rem; color: rgba(246,242,234,0.62); padding-inline: 0.95rem; position: relative; }
.foot .foot__houses li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0.7em; transform: translateY(-50%); background: rgba(200,155,92,0.4); }

.foot__cols { display: grid; gap: clamp(2.25rem, 4vw, 3.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 54rem) { .foot__cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot__mark img { width: 12rem; height: auto; }
.foot__cols p { font-size: 0.9rem; color: rgba(246,242,234,0.62); max-width: 22rem; }
.foot ul { list-style: none; display: grid; gap: 0.6rem; }
.foot li { font-size: 0.92rem; }

.foot__base { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid rgba(200,155,92,0.22); display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; align-items: center; }
.foot__base p, .foot .foot__legal { font-size: 0.74rem; color: rgba(246,242,234,0.5); max-width: none; }
.foot .foot__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

/* ==========================================================================
   16 · COOKIE NOTICE
   ========================================================================== */
.cookie {
  position: fixed; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--bar-h) + 0.85rem); z-index: 88;
  max-width: 46rem; margin-inline: auto;
  background: var(--blanc);
  border: 1px solid var(--gris);
  outline: 1px solid var(--gris); outline-offset: 5px;
  box-shadow: 0 12px 44px rgba(35,43,51,0.2);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.cookie[hidden] { display: none; }
.cookie.show { opacity: 1; transform: none; }
.cookie__in {
  padding: 1.25rem clamp(1.1rem, 3vw, 1.6rem);
  display: grid; gap: 1.1rem; align-items: center;
}
@media (min-width: 52rem) { .cookie__in { grid-template-columns: 1fr auto; gap: 1.75rem; } }
.cookie p { font-size: 0.83rem; line-height: 1.65; color: var(--ink-soft); max-width: none; }
.cookie .label { margin-bottom: 0.4rem; }
.cookie a { color: var(--cuivre); }
.cookie__acts { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.cookie .btn { padding: 0.65rem 1rem; font-size: 0.58rem; }
.cookie__x { border-color: var(--gris); color: var(--ardoise); }
.cookie__x:hover, .cookie__x:focus-visible { background: var(--ardoise); border-color: var(--ardoise); color: var(--blanc); }

/* A footer link that is really a button, for reopening consent */
.foot__linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: none;
  transition: color 0.3s var(--ease);
}
.foot__linkbtn:hover { color: var(--miel); }

/* ==========================================================================
   17 · THE SPINE — the signature structural device
   Le filet, the brand's double hairline, run as one continuous vertical rule
   down the left of every page. Chapter numerals hang off it. It is the one
   thing that should be unmistakably Chandi, so everything around it stays
   quiet. It breaks and reforms across dark bands rather than being redrawn.
   ========================================================================== */
.spine {
  position: fixed; left: clamp(0.9rem, 2.4vw, 2.1rem); top: 0; bottom: var(--bar-h);
  width: 3px; z-index: 70; pointer-events: none; display: none;
  background:
    linear-gradient(var(--gris), var(--gris)) left  / 1px 100% no-repeat,
    linear-gradient(var(--gris), var(--gris)) right / 1px 100% no-repeat;
  opacity: 0.5;
}
@media (min-width: 78rem) { .spine { display: block; } }

/* The travelling marker — a Cuivre segment that tracks scroll progress. */
.spine__run {
  position: absolute; left: -1px; right: -1px; top: 0; height: 0;
  background:
    linear-gradient(var(--cuivre), var(--cuivre)) left  / 1px 100% no-repeat,
    linear-gradient(var(--cuivre), var(--cuivre)) right / 1px 100% no-repeat;
}

/* Chapter numerals hung off the spine, inside each band. */
.chapter { position: relative; }
@media (min-width: 78rem) {
  .chapter::before {
    content: attr(data-chapter);
    position: absolute; right: calc(100% + 1.1rem); top: 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--label); font-weight: 300;
    font-size: 0.53rem; letter-spacing: var(--tr-label);
    text-transform: uppercase; color: var(--cuivre); white-space: nowrap;
    opacity: 0.85;
  }
}
.band--encre .chapter::before { color: var(--miel); }

/* ==========================================================================
   18 · FOOTER GROUND — the room, held back to a whisper
   ========================================================================== */
.foot { position: relative; isolation: isolate; overflow: hidden; }
.foot__ground {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("../img/banner/mains-1200.jpg");
  background-size: cover; background-position: center 40%;
  opacity: 0.3;
}
.foot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(35,43,51,0.9) 0%, rgba(35,43,51,0.78) 45%, rgba(35,43,51,0.93) 100%);
}

/* ==========================================================================
   19 · THE RESERVE MODULE — the most important block on the site
   Sits high on the page, not at the bottom. Compact enough to read at a
   glance, complete enough to act on.
   ========================================================================== */
.reserve {
  background: var(--encre);
  border: 1px solid rgba(200,155,92,0.35);
  outline: 1px solid rgba(200,155,92,0.35); outline-offset: 6px;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  color: var(--blanc);
}
@media (min-width: 68rem) { .reserve { grid-template-columns: 0.72fr 1.28fr; align-items: center; } }
.reserve h2 { font-size: clamp(1.4rem, 2.1vw, 1.95rem); }
.reserve p { color: rgba(246,242,234,0.78); font-size: 0.98rem; line-height: 1.7; }
.reserve__grid { display: grid; gap: 1rem 1.1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .reserve__grid { grid-template-columns: repeat(4, 1fr); } }
.reserve .field > span { color: var(--miel); }
.reserve .field > span { font-size: 0.68rem; letter-spacing: 0.2em; }
.reserve .field input, .reserve .field select {
  color: var(--blanc); border-bottom-color: rgba(200,155,92,0.45);
  font-size: 1.12rem; padding: 0.7rem 0;
}
.reserve .field input::placeholder { color: rgba(246,242,234,0.4); }
.reserve .btn { font-size: 0.68rem; padding: 1rem 2.1rem; }
.reserve .field input:focus, .reserve .field select:focus { border-bottom-color: var(--miel); }
.reserve .field select option { color: var(--ink); }
.reserve__go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.reserve__alt { font-size: 0.9rem; color: rgba(246,242,234,0.66); }
.reserve__alt a { color: var(--miel); }

/* ==========================================================================
   20 · INDEX — a contents list, the way a menu card opens
   ========================================================================== */
.index { display: grid; }
.index a {
  display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 1.25rem;
  align-items: baseline; text-decoration: none;
  padding-block: 0.85rem; border-top: 1px solid rgba(194,198,192,0.6);
  transition: color 0.3s var(--ease);
}
.index a:last-child { border-bottom: 1px solid rgba(194,198,192,0.6); }
.index a:hover { color: var(--cuivre); }
.index__n { font-family: var(--label); font-weight: 300; font-size: 0.55rem; letter-spacing: var(--tr-label); color: var(--cuivre); }
.index__t { font-family: var(--display); font-size: clamp(1rem, 1.2vw, 1.18rem); }
.index__d { font-size: 0.8rem; color: var(--ink-faint); text-align: right; }
@media (max-width: 44rem) { .index__d { display: none; } }
.band--encre .index a { border-color: rgba(200,155,92,0.22); }
.band--encre .index__n { color: var(--miel); }
.band--encre .index__d { color: rgba(246,242,234,0.5); }

/* Prose measure — narrower, for the longer dish stories */
.tell__body p { font-size: 0.92rem; line-height: 1.8; }
.tell__lead { font-family: var(--display); font-size: 1.02rem; line-height: 1.55; color: var(--ink) !important; }

/* ==========================================================================
   21 · COURSES — the menu, folded into three
   Each course opens and closes. Plates run two columns wide so twenty-two
   fit in roughly half the scroll they used to need.
   ========================================================================== */
.courses { display: grid; gap: 0; }

.course { border-top: 1px solid rgba(143,101,54,0.3); }
.course:last-child { border-bottom: 1px solid rgba(143,101,54,0.3); }
.course__head {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 3rem 1fr auto; gap: 1.25rem;
  align-items: baseline; padding: clamp(1rem, 1.8vw, 1.4rem) 0;
  transition: color 0.3s var(--ease);
}
.course__head::-webkit-details-marker { display: none; }
.course__n { font-family: var(--label); font-weight: 300; font-size: 0.6rem; letter-spacing: var(--tr-label); color: var(--cuivre); }
.course__t { font-family: var(--display); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.1; }
.course__c { font-family: var(--label); font-weight: 300; font-size: 0.58rem; letter-spacing: var(--tr-label); color: var(--ink-faint); position: relative; padding-right: 1.9rem; }
.course__c::after {
  content: ""; position: absolute; right: 0.15rem; top: 0.1em; width: 10px; height: 10px;
  border-right: 1px solid var(--cuivre); border-bottom: 1px solid var(--cuivre);
  transform: rotate(45deg); transition: transform 0.35s var(--ease);
}
.course[open] .course__c::after { transform: rotate(-135deg); top: 0.35em; }
.course__head:hover .course__t { color: var(--cuivre); }
.course__body { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.course__blurb { color: var(--ink-faint); font-size: 0.9rem; margin: 0 0 1.75rem 4.25rem; max-width: 40rem; }
@media (max-width: 40rem) { .course__blurb { margin-left: 0; } }

/* Two columns of plates */
.plates--two { display: grid; gap: 0 clamp(2rem, 4vw, 4rem); }
@media (min-width: 60rem) { .plates--two { grid-template-columns: 1fr 1fr; } }
.plates--two .plate { border-top: 1px solid rgba(194,198,192,0.65); }
@media (min-width: 60rem) { .plates--two .plate:nth-child(2) { border-top: 1px solid rgba(194,198,192,0.65); } }
.plates--two .plate:first-child { border-top: 0; }
@media (min-width: 60rem) { .plates--two .plate:nth-child(2) { border-top: 0; } }

.plate { grid-template-columns: 2.4rem 1fr; align-items: start; }

.tag--sig { color: var(--cuivre-deep); border-color: rgba(131,92,49,0.55); background: transparent; }

/* The story, opened — larger and set to read like prose, not a caption */
.tell__body { padding-left: 1rem; border-left: 1px solid rgba(143,101,54,0.3); max-width: 34rem; }
.tell__body p { font-size: 0.95rem; line-height: 1.85; color: var(--ink-soft); }
.tell__lead {
  font-family: var(--display); font-size: 1.12rem; line-height: 1.5;
  color: var(--ink) !important; letter-spacing: -0.002em;
}

/* Banner frame — the collage artwork runs wide and shallow */
.frame--banner { aspect-ratio: 1942 / 560; }
@media (max-width: 46rem) { .frame--banner { aspect-ratio: 3 / 2; } }

/* A full-bleed banner band */
.banner-band { padding-block: 0; position: relative; }
.banner-band .frame { border-block: 1px solid rgba(194,198,192,0.7); }
.banner-band__cap {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 2.25rem); transform: translateX(-50%);
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.58rem; color: var(--encre);
  background: rgba(246,242,234,0.82); padding: 0.6rem 1.35rem; white-space: nowrap;
}

.menu__allergy {
  max-width: 44rem; margin: 1rem auto 0; text-align: center;
  font-size: 0.85rem; line-height: 1.7; color: var(--ink-faint);
}

/* ==========================================================================
   22 · THE BAR
   Same two-column rhythm as the food, tighter rows — a drinks list is scanned,
   not read.
   ========================================================================== */
.drink {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 1rem;
  padding-block: 0.85rem; border-top: 1px solid rgba(194,198,192,0.55);
  align-items: baseline;
}
.drink:first-child { border-top: 0; }
@media (min-width: 60rem) { .plates--two .drink:nth-child(2) { border-top: 0; } }
.drink__n { font-family: var(--display); font-size: 0.85rem; color: var(--cuivre); font-feature-settings: "onum" 1; }
.drink__t {
  font-family: var(--display); font-weight: 300; font-size: 1.05rem; line-height: 1.3;
  display: flex; align-items: baseline; gap: 1rem;
}
.drink__p { margin-left: auto; color: var(--cuivre); font-feature-settings: "onum" 1; white-space: nowrap; }
.drink__d { font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.15rem; max-width: 30rem; }

/* Tap targets — WCAG 2.5.8 wants 24px minimum; Apple and Google both say 44.
   Footer and legal links sit at 30px from line-height alone, so padding is
   added on touch pointers only, where it costs nothing visually. */
@media (pointer: coarse) {
  .foot li a, .foot .foot__legal a, .foot__linkbtn,
  .foot .foot__houses a, .nav__meta a, .reserve__alt a, .cookie p a,
  .detail__row dd a, .prose a, .form__note a, .menu__allergy a,
  .band--encre .stack p a, .narrow p a, .place__n, .nav__meta a,
  .legal a, .legal button.link, .legal__nav a {
    display: inline-block; padding-block: 0.5rem; min-height: 44px;
  }
  .nav a { padding-block: 0.4rem; }
  /* The wordmark is 4:1, so at header width the link is only ~23px tall.
     Grow the hit area on touch without changing the mark itself. */
  .masthead__mark { min-height: 44px; }
  .link { padding-block: 0.45rem 0.6rem; }
}

/* ==========================================================================
   23 · OUR OTHER PLACES
   ========================================================================== */
.places { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .places { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .places { grid-template-columns: repeat(4, 1fr); } }
.place {
  border: 1px solid rgba(194,198,192,0.85);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  display: grid; align-content: start; gap: 0.5rem;
  background: rgba(246,242,234,0.55);
}
.place__k {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.55rem; color: var(--cuivre); max-width: none;
}
.place h3 { font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.25; }
.place__n { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
a.place__n:hover { border-bottom-color: var(--cuivre); color: var(--cuivre); }
.place__b { font-size: 0.9rem; color: var(--ink-soft); max-width: none; }
.place__m { font-size: 0.78rem; line-height: 1.6; color: var(--ink-faint); max-width: none; margin-top: 0.35rem; }

/* ==========================================================================
   24 · TABS — chapters in one row, detail on demand
   Every panel stays in the DOM. With JavaScript off, all of them show; the
   content is never dependent on script.
   ========================================================================== */
.tabs__strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(143,101,54,0.28);
  border-bottom: 1px solid rgba(143,101,54,0.28);
}
@media (min-width: 52rem) { .tabs__strip { grid-template-columns: repeat(4, 1fr); } }
.tabs__t {
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.1rem 1.15rem 1rem 0; display: grid; gap: 0.3rem;
  border-left: 1px solid rgba(143,101,54,0.18);
  transition: color 0.3s var(--ease);
  color: var(--ink-faint);
}
.tabs__t:first-child { border-left: 0; padding-left: 0; }
@media (min-width: 52rem) { .tabs__t { padding-left: 1.15rem; } .tabs__t:first-child { padding-left: 0; } }
@media (max-width: 52rem) { .tabs__t:nth-child(odd) { border-left: 0; padding-left: 0; } .tabs__t:nth-child(even) { padding-left: 1.15rem; } }
.tabs__n { font-family: var(--label); font-weight: 300; letter-spacing: var(--tr-label); font-size: 0.55rem; color: var(--cuivre); }
.tabs__l { font-family: var(--display); font-weight: 300; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.25; color: var(--ink); }
.tabs__t[aria-selected="true"] { position: relative; }
.tabs__t[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 1.15rem; bottom: -1px; height: 2px; background: var(--cuivre);
}
.tabs__t:first-child[aria-selected="true"]::after { left: 0; }
.tabs__t:hover .tabs__l { color: var(--cuivre); }
.tabs__p { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.tabs__p[hidden] { display: none; }
.tabs__h { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: 1rem; }
.tabs__p p { max-width: 40rem; }
.tabs__grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 58rem) { .tabs__grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   25 · LEGAL PAGES
   ========================================================================== */
.legal__upd { font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.9rem; max-width: none; }
.legal__nav {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem 0; margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(194,198,192,0.7);
}
.legal__nav li { position: relative; padding-inline: 0.9rem; }
.legal__nav li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 0.75em;
  transform: translateY(-50%); background: rgba(194,198,192,0.9);
}
.legal__nav a {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.6rem; color: var(--ardoise);
  text-decoration: none;
}
.legal__nav a:hover, .legal__nav a[aria-current="page"] { color: var(--cuivre); }

.legal h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin-top: 2.1em; margin-bottom: 0.5em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6em; margin-bottom: 0.35em; color: var(--ink-soft); }
.legal ul { padding-left: 1.15em; margin-block: 0.6em; }
.legal li { margin-block: 0.35em; }
.legal a { color: var(--cuivre); text-decoration: none; border-bottom: 1px solid rgba(143,101,54,0.4); }
.legal a:hover { border-bottom-color: var(--cuivre); }
.legal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; background: rgba(194,198,192,0.28); padding: 0.1em 0.35em; }
.legal .note {
  background: var(--craie); border-left: 2px solid var(--cuivre);
  padding: 1.1rem 1.35rem; margin-block: 1.8em;
}
.legal .note p { margin: 0; font-size: 0.95rem; }
.legal table { width: 100%; border-collapse: collapse; margin-block: 1.4em; font-size: 0.9rem; }
/* A four-column table will not fit a 320px screen. Scroll it inside its own
   box instead of letting it push the page sideways. */
.legal .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 1.4em; }
.legal .scroller table { margin-block: 0; min-width: 30rem; }
.legal th, .legal td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid rgba(194,198,192,0.8); vertical-align: top; }
.legal th {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.58rem; color: var(--ardoise);
}

/* ==========================================================================
   25 · LEGAL PAGES
   ========================================================================== */
.legal__upd { font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.75rem; max-width: none; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: center; margin-top: 1.5rem; }
.legal__nav a {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.6rem; color: var(--ardoise);
  text-decoration: none; padding-block: 0.5rem;
}
.legal__nav a:hover, .legal__nav a[aria-current] { color: var(--cuivre); }
.legal h2 { margin-top: 2.25rem; margin-bottom: 0.6rem; }
.legal h3 { margin-top: 1.5rem; margin-bottom: 0.35rem; color: var(--ink-soft); }
.legal ul { padding-left: 1.15em; margin-block: 0.75rem; }
.legal li { margin-block: 0.4rem; }
.legal a { color: var(--cuivre-deep); }
.legal code { font-family: ui-monospace, monospace; font-size: 0.88em; background: var(--craie); padding: 0.1em 0.35em; }
.legal .note {
  background: var(--craie); border-left: 2px solid var(--cuivre);
  padding: 1.1rem 1.35rem; margin-block: 1.75rem;
}
.legal .note p { margin: 0; font-size: 0.95rem; }
.legal table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: 0.9rem; }
/* Below ~30rem a three-column table cannot fit. Scroll it rather than let it
   push the whole page wide. */
@media (max-width: 30rem) {
  .legal table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .legal table th, .legal table td { white-space: normal; min-width: 8rem; }
}
.legal th, .legal td { text-align: left; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--gris); vertical-align: top; }
.legal th {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.58rem; color: var(--ardoise);
}
.legal button.link { text-transform: none; letter-spacing: 0; font-family: inherit; font-size: inherit; padding: 0; }
.legal button.link::after { display: none; }
.legal button.link { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Forms through the house API — result line, picker hint, honeypot.
   --------------------------------------------------------------------------- */
.form__result { font-size: 0.95rem; line-height: 1.65; padding: 1rem 1.2rem; border-left: 2px solid var(--cuivre); background: rgba(143,101,54,0.07); }
.form__result code { font-family: var(--label); letter-spacing: 0.12em; font-size: 0.85em; }
.form__result--ok  { border-left-color: var(--cuivre-deep, #835C31); }
.form__result--err { border-left-color: var(--ardoise-deep, #5A6871); }
.form__result--note { border-left-color: var(--miel); }
.reserve .form__result { color: var(--blanc); background: rgba(246,242,234,0.06); grid-column: 1 / -1; }
.reserve .form__result--err { color: var(--blanc); }
.field__hint { font-size: 0.8rem; color: var(--ardoise); margin-top: 0.35rem; }
.reserve .field__hint { color: rgba(246,242,234,0.7); grid-column: 1 / -1; margin: 0; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
   The calendar. Drawn against a .js-date field, in the brand's own palette —
   a native date picker cannot be styled and renders in the browser's locale.
   Works on both grounds: Blanc cassé over Craie, and reversed inside .reserve.
   --------------------------------------------------------------------------- */
.field--cal { position: relative; }
.cal {
  position: absolute; z-index: 60; top: calc(100% + 0.6rem); left: 0;
  width: 19.5rem; max-width: min(19.5rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem 1.15rem;
  background: var(--blanc); color: var(--ink);
  border: 1px solid var(--gris);
  box-shadow: 0 18px 44px -18px rgba(35,43,51,0.45);
}
.cal__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.7rem; }
.cal__month {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.64rem; color: var(--ink); margin: 0;
}
.cal__nav {
  appearance: none; background: none; border: 1px solid var(--gris); color: var(--ink);
  width: 1.9rem; height: 1.9rem; line-height: 1; font-size: 1rem; cursor: pointer;
}
.cal__nav:hover, .cal__nav:focus-visible { border-color: var(--cuivre); color: var(--cuivre); }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; }
.cal__dow {
  margin-bottom: 0.3rem; font-family: var(--label); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.55rem; color: var(--ink-faint);
}
.cal__dow span { text-align: center; }
.cal__d {
  appearance: none; background: none; border: 1px solid transparent; color: var(--ink);
  font-family: inherit; font-size: 0.85rem; aspect-ratio: 1; min-height: 2.25rem; cursor: pointer;
}
.cal__d:hover:not(:disabled), .cal__d:focus-visible:not(:disabled) { border-color: var(--cuivre); color: var(--cuivre); }
.cal__d:disabled { color: var(--gris); cursor: default; }
.cal__d.is-today { text-decoration: underline; text-underline-offset: 0.25em; }
.cal__d.is-on { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

/* Reversed, for the dark reservation module */
.reserve .cal { background: var(--encre); color: var(--blanc); border-color: rgba(200,155,92,0.42); }
.reserve .cal__month, .reserve .cal__nav, .reserve .cal__d { color: var(--blanc); }
.reserve .cal__nav { border-color: rgba(200,155,92,0.42); }
.reserve .cal__dow { color: rgba(246,242,234,0.6); }
.reserve .cal__nav:hover, .reserve .cal__nav:focus-visible,
.reserve .cal__d:hover:not(:disabled), .reserve .cal__d:focus-visible:not(:disabled) { border-color: var(--miel); color: var(--miel); }
.reserve .cal__d:disabled { color: rgba(246,242,234,0.28); }
.reserve .cal__d.is-on { background: var(--miel); color: var(--encre); border-color: var(--miel); }

@media (max-width: 30rem) { .cal { left: 50%; transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   "chandi at a glance" (audit K10) — the facts as visible HTML, directly below
   the hero stats, so an answer engine lifts them from the page rather than
   inferring them. And the marketing opt-in, which must never be pre-ticked.
   --------------------------------------------------------------------------- */
.glance { max-width: 62rem; margin-inline: auto; }
.glance__h {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: var(--tr-label); font-size: 0.66rem; color: var(--cuivre-deep, #835C31);
  margin: 0 0 1.4rem;
}
.glance__list { display: grid; gap: 0.85rem 2.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.glance__list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0 1rem; align-items: baseline; }
.glance__list dt {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.58rem; color: var(--ardoise-deep, #5A6871);
}
.glance__list dd { margin: 0; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 46rem) {
  .glance__list { grid-template-columns: 1fr; }
  .glance__list > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem; }
.field--check input { width: 1rem; height: 1rem; margin-top: 0.25rem; }
.field--check span {
  font-family: inherit; font-size: 0.88rem; line-height: 1.55; text-transform: none;
  letter-spacing: normal; color: inherit;
}
.reserve .field--check span { color: rgba(246,242,234,0.86); }
.reserve__consent { grid-column: 1 / -1; }
.reserve .form__note { color: rgba(246,242,234,0.66); }

/* Journal byline (audit K12) — author and date, quiet under the lede. */
.post__byline {
  font-family: var(--label); font-weight: 300; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.58rem; color: var(--ardoise-deep, #5A6871);
  margin-top: 1.5rem;
}

/* Per-field validation message (audit I3). Ardoise rather than a red, which
   the palette does not contain; the text carries the meaning, not the colour. */
.field__err {
  font-size: 0.8rem; line-height: 1.5; margin-top: 0.4rem;
  color: var(--ardoise-deep, #5A6871);
}
.reserve .field__err { color: var(--miel); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--cuivre); }
.reserve .field input[aria-invalid="true"] { border-bottom-color: var(--miel); }