@charset "utf-8";
/* ==========================================================================
   Lou Lou's Bistro + Foster's Bar
   The climb: Come. Sit. Stay. — one continuous ascent from bistro daylight
   into bar dusk. Every colour below is pipetted from the client's own logo,
   menu, and dining room. Nothing invented. See CONCEPT.md.
   ========================================================================== */

:root {
  /* ---- Ink & paper: sampled from their real logo and real printed menu ---- */
  --ink:            #1E3035;   /* the logo's slate-teal. never black */
  --ink-soft:       #3A4E54;
  --ink-faint:      #6E8087;
  --paper:          #F4F1E9;   /* their menu's warm bone */
  --paper-warm:     #EFE9DC;
  --paper-deep:     #E4DDD0;

  /* ---- The room: sampled from their own dining room photograph ---- */
  --sage:           #A6BDA4;   /* block-print tablecloth ground */
  --sage-deep:      #91A591;
  --tolix:          #CB3C21;   /* the red chairs — the sharp, scarce accent */
  --tolix-deep:     #9E1E0C;
  --rattan:         #C89B62;   /* the charger plates; upstairs lamplight */
  --rattan-lit:     #E9B475;

  /* ---- Upstairs: Foster's dusk ---- */
  --dusk:           #16252A;
  --dusk-deep:      #101C21;

  /* ---- Type ---- */
  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --text:    'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gold:    #B08A4F;   /* the mat line on a framed print */

  /* fluid scale — a 3x+ jump display-to-body is the law */
  --t-mega:  clamp(3rem, 8.4vw, 7.5rem);
  --t-huge:  clamp(2.3rem, 5.4vw, 4.4rem);
  --t-big:   clamp(1.7rem, 3.1vw, 2.7rem);
  --t-mid:   clamp(1.12rem, 1.7vw, 1.45rem);
  --t-body:  clamp(1.02rem, 1.18vw, 1.18rem);
  --t-small: clamp(.82rem, .93vw, .93rem);

  --measure: 34ch;
  --edge: clamp(1.25rem, 5vw, 5.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Every container is centred on the page and shares one measure. */
.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; }
:root { --shell: 76rem; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- The living ground: block print + press mis-register + grain ----
   The cloth is stamped by hand, so the sage sits a hair off the cream. That
   offset is the whole material idea; it is why this never reads like a stock
   pattern fill. -------------------------------------------------------- */
/* The global field is PAPER, not wallpaper. A pattern behind everything is a
   template move; the block print is held back and spent where it means
   something — under the menu, because a menu belongs on a tablecloth. */
.ground { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ground::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 88% 8%,  rgba(166,189,164,.20), transparent 58%),
    radial-gradient(90%  70% at 4% 96%,  rgba(200,155,98,.13),  transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
}

/* the cloth: a contained material, used once, on purpose */
.cloth { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cloth::before,
.cloth::after {
  content: ""; position: absolute; inset: -6%;
  background-image: url("/assets/img/blockprint.svg");
  background-size: clamp(240px, 26vw, 380px) auto;
  background-repeat: repeat;
}
.cloth { background: linear-gradient(180deg, rgba(166,189,164,.30), rgba(166,189,164,.42)); }
.cloth::before { filter: url(#sageify) brightness(1.6); opacity: .9; transform: translate3d(2.5px, 3px, 0); }
.cloth::after  { filter: url(#inkify);  opacity: .05; }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .40; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
}

/* the whole page sits above the ground */
.shell { position: relative; z-index: 2; }

/* ================= the standing rail: mark + the two floors ============== */
.rail {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 1.9rem) var(--edge);
  padding-top: max(clamp(1rem, 2.4vw, 1.9rem), env(safe-area-inset-top));
  mix-blend-mode: multiply;
  transition: color .9s var(--ease);
}
.rail__mark { width: clamp(132px, 15vw, 208px); height: auto; }
.rail__mark path, .rail__mark { color: var(--ink); }

/* the elevation index — floor NAMES, never numbers (TASTE.md 2026-07-21) */
.floors { display: grid; gap: .34rem; text-align: right; }
.floors__item {
  font-size: var(--t-small);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .28;
  text-decoration: none;
  transition: opacity .6s var(--ease);
  display: flex; align-items: center; justify-content: flex-end; gap: .55rem;
}
.floors__item[data-here="true"] { opacity: 1; }
.floors__item::before {
  content: ""; width: 0; height: 1px; background: currentColor;
  transition: width .6s var(--ease);
}
.floors__item[data-here="true"]::before { width: clamp(20px, 3vw, 42px); }

/* ============================ act one: COME ============================== */
.threshold {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 var(--edge) clamp(1.4rem, 3vw, 2.4rem);
  position: relative;
}
.threshold__type {
  align-self: center;
  padding-top: clamp(6rem, 13vh, 9rem);
  position: relative;
  max-width: 62ch;
}

/* the floor Lou Lou is actually sitting on — the first tread of the climb.
   Without it she floats; with it, the ground floor exists. */
.threshold::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(3.6rem, 7vh, 5.4rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30,48,53,.20) 12%, rgba(30,48,53,.20) 88%, transparent);
  pointer-events: none;
}

/* "Come." — the arrival word. Instrument Serif at full mega scale. */
.word {
  font-family: var(--display);
  font-size: var(--t-mega);
  font-weight: 500;
  font-variation-settings: 'opsz' 96;   /* hero optical: hairlines at their thinnest */
  line-height: .84;
  letter-spacing: -.028em;
  margin: 0;
  color: var(--ink);
}
.word em { font-style: italic; }

/* the two words that haven't happened yet — ghosted, and cropped by the
   viewport edge so the composition plainly continues upward (Exo Ape) */
.word--ahead { color: var(--ink); opacity: .10; }

.threshold__say {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-mid);
  line-height: 1.22;
  max-width: 22ch;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
  color: var(--ink-soft);
}
.threshold__sub {
  max-width: var(--measure);
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
}

/* the two intents, answered before any story (the FENN'S uncertainty chain) */
.intents { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.6rem, 3.4vw, 2.4rem); }
.btn {
  font-family: var(--display);
  font-variation-settings: 'opsz' 11;
  font-size: calc(var(--t-small) * 1.08);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn--now { border-color: var(--tolix); color: var(--tolix); }
.btn--now:hover, .btn--now:focus-visible { background: var(--tolix); color: var(--paper); }

/* the room plate: a tall standing panel at the right edge, floor to ceiling.
   Lou Lou sits in FRONT of it — that layering is what gives the hero depth. */
.plate {
  position: absolute;
  top: clamp(6.5rem, 13vh, 9.5rem);      /* clears the rail: the index stays on paper */
  right: 0;
  width: clamp(240px, 38vw, 660px);
  /* stops ABOVE the groundline, so there is real floor beneath the room */
  bottom: clamp(9rem, 19vh, 13rem);
  height: auto;
  margin: 0;
  overflow: hidden;
  z-index: 1;
}
.plate img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 34%; }
/* the paper doesn't stop at the photo's edge — it dissolves into it */
.plate::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--paper) 0%, rgba(244,241,233,.86) 10%, rgba(244,241,233,0) 52%),
    linear-gradient(0deg,  var(--paper) 0%, rgba(244,241,233,0) 22%);
}

/* Lou Lou sits ON the groundline, in front of the room, clear of the index.
   She is the counterweight, not the subject — the word stays the subject. */
.greeter {
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  bottom: clamp(3.6rem, 7vh, 5.4rem);
  height: clamp(230px, 47vh, 440px);
  width: auto;
  filter: drop-shadow(0 16px 18px rgba(30, 48, 53, .16));
  pointer-events: none;
  z-index: 3;
}
/* the contact shadow that gives her real weight on the floor */
.greeter-shadow {
  position: absolute;
  right: clamp(1rem, 6vw, 7rem);
  bottom: clamp(3.1rem, 6.4vh, 4.9rem);
  width: clamp(140px, 28vh, 264px);
  height: 16px;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 44% 50% at 50% 50%, rgba(30,48,53,.34), transparent 74%);
  filter: blur(3.5px);
}

/* the honest live line: is anything actually open right now */
.now {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  font-size: var(--t-small);
  letter-spacing: .04em;
  color: var(--ink-soft);
  border-top: 1px solid rgba(30, 48, 53, .18);
  padding-top: 1rem;
}
.now__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; align-self: center; }
.now__dot[data-open="true"]  { background: var(--tolix); box-shadow: 0 0 0 4px rgba(203, 60, 33, .16); }
.now strong { font-weight: 700; color: var(--ink); }

/* ---------------------------- shared bits ------------------------------- */
.act { padding: clamp(5rem, 13vh, 11rem) var(--edge); position: relative; }

/* their own naming device: the name in display italic with a rule beneath —
   lifted straight from the dog cards Wesley and Scott already made */
.namecard { text-align: center; margin: 0 auto clamp(2.4rem, 6vw, 4rem); }
.namecard__name { font-family: var(--display); font-style: italic; font-size: var(--t-big); line-height: 1; margin: 0; }
.namecard__rule { width: min(320px, 52vw); height: 1px; background: currentColor; margin: .85rem auto 0; opacity: .75; }
.namecard__role {
  margin: 1rem 0 0; font-family: var(--display); font-weight: 500;
  font-variation-settings: 'opsz' 10;
  font-size: var(--t-small); letter-spacing: .22em;
  text-transform: uppercase; opacity: .62;
}

/* the dogs' real written traits, scattered the way their cards scatter them */
.traits { display: flex; flex-wrap: wrap; gap: .55rem .9rem; justify-content: center; max-width: 62ch; margin: 0 auto; }
.traits li { list-style: none; font-family: var(--display); font-style: italic; font-size: var(--t-mid); line-height: 1.3; opacity: .85; }
.traits li::after { content: "·"; margin-left: .9rem; opacity: .45; }
.traits li:last-child::after { content: ""; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   THE CLIMB — acts two and three. The page rises out of the bistro's daylight
   into the bar's dusk. One reveal verb: RISE.
   ========================================================================== */

/* the riser: the word that names the act, set against the edge of the frame
   so the composition plainly continues upward (the Exo Ape crop) */
.riser {
  margin: 0 0 clamp(1.6rem, 4vw, 3rem);
  line-height: .8;
  overflow: hidden;
}
.riser span {
  display: block;
  font-family: var(--display);
  font-size: var(--t-huge);
  letter-spacing: -.02em;
  color: var(--ink);
  opacity: .16;
}
.riser--up span { color: var(--rattan); opacity: .28; }

.head {
  font-family: var(--display);
  font-size: var(--t-big);
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0 0 1.1rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 72;
}

/* ---- act two: the bistro, told as a 7+5 split with a counterweight ---- */
.two {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-bottom: clamp(4rem, 10vh, 8rem);
}
.two__say p { max-width: 46ch; color: var(--ink-soft); margin: 0 0 1rem; }
.two__fig { margin: 0; }
.two__fig img { width: 100%; height: auto; }
.two__fig figcaption {
  font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .8rem;
}

/* ---- the menu, printed on the cloth ---- */
.menu { position: relative; padding: clamp(4.5rem, 11vh, 9rem) var(--edge); overflow: hidden; }
.menu__inner { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }
.menu__head { margin-bottom: clamp(2.4rem, 6vw, 4rem); max-width: 52ch; }
.head--menu { font-style: italic; }
.menu__note { color: var(--ink-soft); margin: 0; max-width: 44ch; }

/* a grid, not CSS columns: courses stay whole and the three tracks stay even */
.menu__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.6rem, 3.4vw, 3.2rem) clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.course { margin: 0; }
.course__name {
  font-family: var(--display);
  font-size: var(--t-mid);
  font-weight: 400;
  margin: 0 0 .2rem;
  /* a second course inside the same track needs air above it */
}
.dish + .course__name,
.sides + .course__name,
.dish + .course__add + .course__name { margin-top: clamp(1.8rem, 3.4vw, 2.8rem); }
.course__name {
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(30, 48, 53, .28);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.course__name--dog { font-style: italic; }
.course__price { font-family: var(--text); font-size: var(--t-small); font-weight: 700; }
.course__add {
  font-size: var(--t-small); color: var(--ink-faint); margin: .5rem 0 .9rem;
  font-style: italic;
}
.dish { margin: .9rem 0 0; }
.dish dt {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  font-weight: 600; margin-top: .95rem; color: var(--ink);
}
.dish dt b { font-weight: 700; color: var(--tolix); font-variant-numeric: tabular-nums; }
.dish dt b::before { content: "$"; opacity: .55; font-weight: 400; }
.dish dt span { font-weight: 400; font-size: var(--t-small); color: var(--ink-faint); }
.dish dt span::before { content: ""; }
.dish dd {
  margin: .18rem 0 0; font-size: var(--t-small); line-height: 1.5;
  color: var(--ink-soft); max-width: 42ch;
}
.dish--plain dt { font-weight: 500; margin-top: .55rem; }
.sides { list-style: none; margin: .9rem 0 1.6rem; padding: 0; columns: 2; }
.sides li { font-size: var(--t-small); margin-bottom: .35rem; color: var(--ink-soft); }

/* ---- act three: upstairs, where the light goes ---- */
.act--bar {
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--dusk) 26%, var(--dusk-deep) 100%);
  color: var(--paper);
  padding-top: clamp(6rem, 15vh, 12rem);
}
.act--bar .head { color: var(--paper); }
.upstairs {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 8vh, 6rem);
}
.upstairs__say p { max-width: 46ch; color: rgba(244, 241, 233, .76); margin: 0 0 1rem; }
.upstairs__hours {
  font-family: var(--display); font-style: italic;
  font-size: var(--t-mid); color: var(--rattan-lit) !important;
}
.upstairs__dog {
  width: 100%; height: auto; justify-self: center;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5));
}
.namecard--dark, .traits--dark { color: var(--paper); }
.traits--dark li { opacity: .78; }

/* ---- the close ---- */
.close {
  position: relative; z-index: 2;
  background: var(--dusk-deep);
  color: var(--paper);
  padding: clamp(4rem, 10vh, 8rem) var(--edge) clamp(2rem, 4vh, 3rem);
  padding-bottom: max(clamp(2rem, 4vh, 3rem), env(safe-area-inset-bottom));
}
.close__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 1400px; margin: 0 auto;
}
.head--close { font-style: italic; color: var(--rattan-lit); }
.close__addr { font-family: var(--display); font-size: var(--t-mid); line-height: 1.35; margin: 0 0 1.4rem; }
.btn--light { border-color: rgba(244,241,233,.5); color: var(--paper); }
.btn--light:hover, .btn--light:focus-visible { background: var(--paper); color: var(--dusk-deep); }
.hours__floor {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: var(--t-mid); margin: 0 0 .9rem; color: var(--rattan-lit);
}
.hours dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .35rem .9rem; }
.hours dt { color: rgba(244,241,233,.62); font-size: var(--t-small); }
.hours dd { margin: 0; text-align: right; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.close__contact p { margin: 0 0 .9rem; font-size: var(--t-small); color: rgba(244,241,233,.78); }
.close__contact a { color: var(--paper); text-underline-offset: 3px; }
.close__events { font-style: italic; }
.social { display: inline-flex; color: var(--rattan-lit); }
.colophon {
  max-width: 1400px; margin: clamp(3rem, 7vh, 5rem) auto 0;
  padding-top: 1.4rem; border-top: 1px solid rgba(244,241,233,.16);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-size: var(--t-small); color: rgba(244,241,233,.55);
}
.colophon a { color: rgba(244,241,233,.8); }

/* ------------------------------- phone ---------------------------------- */
/* ------------------------------- phone ----------------------------------
   The main stage. Not a squeezed desktop: the climb is re-composed as a real
   stack — you read the invitation, you're told what's open, then the room
   opens beneath it with Lou Lou sitting at its edge. ---------------------- */
@media (max-width: 860px) {
  .two, .upstairs { grid-template-columns: 1fr; }
  .two { align-items: start; }
  .two__fig { order: -1; }

  .threshold {
    grid-template-rows: auto auto auto;
    padding-bottom: 0;
    row-gap: clamp(1.2rem, 4vw, 2rem);
  }
  .threshold__type { order: 1; padding-top: clamp(7rem, 17vh, 10rem); align-self: start; }
  .threshold__say { max-width: 100%; }
  .now { order: 2; }

  /* the room opens full-bleed at the foot of the invitation */
  .plate {
    order: 3;
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: calc(100% + 2 * var(--edge));
    margin-left: calc(-1 * var(--edge));
    height: clamp(230px, 40vh, 360px);
  }
  .plate::after {
    background: linear-gradient(0deg, rgba(244,241,233,.30), rgba(244,241,233,0) 46%);
  }
  /* she sits on the lower edge of the room, still in front of it */
  .greeter {
    bottom: 0;
    right: clamp(.5rem, 4vw, 2rem);
    height: clamp(180px, 27vh, 250px);
  }
  .greeter-shadow { display: none; }
  .threshold::after { display: none; }

  .rail { mix-blend-mode: normal; }
  .rail__mark { width: clamp(112px, 34vw, 150px); }
  .floors { gap: .18rem; }
  .floors__item { letter-spacing: .1em; }

  .upstairs__dog { max-width: 300px; margin-inline: auto; }
  .colophon { flex-direction: column; gap: .35rem; }
}

@media (max-width: 420px) {
  .floors__item { font-size: .72rem; }
  .floors__item::before { display: none; }
}

/* ==========================================================================
   THE MULTI-PAGE SHELL — nav, page tops, frames, strata, gallery, forms.
   The zoom law: a frame never moves; the picture inside it does. Every image
   sits oversized in its frame and settles back to rest as it is reached, so
   the page reads as breathing rather than sliding.
   ========================================================================== */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .8rem 1.2rem;
}
.skip:focus { left: 0; }

/* ------------------------------- the rail -------------------------------- */
.rail__home { display: inline-flex; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__item {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: 'opsz' 11;
  font-size: calc(var(--t-small) * 1.06); letter-spacing: .19em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); opacity: .7; position: relative;
  transition: opacity .4s var(--ease); padding: .3rem 0;
}
.nav__item::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: currentColor; transition: right .5s var(--ease);
}
.nav__item:hover, .nav__item:focus-visible { opacity: 1; }
.nav__item:hover::after, .nav__item:focus-visible::after, .nav__item.is-here::after { right: 0; }
.nav__item.is-here { opacity: 1; }
.nav__book {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: 'opsz' 11;
  font-size: calc(var(--t-small) * 1.06); letter-spacing: .19em; text-transform: uppercase;
  text-decoration: none; border: 1px solid rgba(30,48,53,.34); color: var(--ink);
  padding: .66rem 1.2rem; transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.nav__book:hover, .nav__book:focus-visible { background: var(--ink); color: var(--paper); }
.rail__toggle { display: none; }

/* ---------------------------- page openings ------------------------------ */
.page-top {
  padding: clamp(8rem, 20vh, 13rem) var(--edge) clamp(2rem, 5vh, 4rem);
  max-width: 1400px; margin: 0 auto;
}
.eyebrowless {
  font-family: var(--display); font-style: italic; font-size: var(--t-mid);
  color: var(--ink-faint); margin: 0 0 .6rem;
}
.page-title {
  font-family: var(--display); font-size: var(--t-huge); line-height: 1;
  letter-spacing: -.024em; margin: 0; font-weight: 500; max-width: 18ch;
  font-variation-settings: 'opsz' 96;
}
.page-title em { font-style: italic; color: var(--ink-soft); }
.page-lede { max-width: 52ch; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; color: var(--ink-soft); font-size: var(--t-mid); font-family: var(--display); font-style: italic; line-height: 1.3; }

/* ------------------------- frames that zoom ------------------------------ */
.frame { margin: 0; overflow: hidden; position: relative; background: var(--paper-deep); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; }
.frame--tall { aspect-ratio: 4/5; }
.frame--stratum { aspect-ratio: 5/4; }
.frame--lane { aspect-ratio: 4/5; }
/* the frame's own edge: a hairline, like a mounted print */
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(30,48,53,.10);
}

/* the lane of plates that runs under the bistro act */
.strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  margin: clamp(2.5rem, 6vh, 5rem) 0;
}

.ghost {
  display: inline-block; margin-top: 1.1rem;
  font-size: var(--t-small); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .25rem;
  transition: opacity .4s var(--ease);
}
.ghost:hover { opacity: .6; }

.two--wide { grid-template-columns: 5fr 7fr; }
.two--flip { grid-template-columns: 7fr 5fr; }
.two--flip .two__say { order: -1; }

.handover {
  margin: clamp(3rem, 8vh, 6rem) 0;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
  border-top: 1px solid rgba(30,48,53,.18);
  border-bottom: 1px solid rgba(30,48,53,.18);
}
.handover p {
  font-family: var(--display); font-style: italic; font-size: var(--t-mid);
  line-height: 1.35; max-width: 46ch; margin: 0; color: var(--ink-soft);
}
.dogpair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(3rem, 7vh, 5rem); }
.dogpair .traits li { font-size: var(--t-body); }

/* ------------------------------ the quote -------------------------------- */
.quote {
  position: relative; z-index: 2;
  padding: clamp(4rem, 11vh, 8rem) var(--edge);
  background: var(--ink); color: var(--paper);
}
.quote blockquote { max-width: 60ch; margin: 0 auto; text-align: center; }
.quote p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.35; margin: 0 0 1.4rem;
}
.quote cite {
  font-family: var(--text); font-style: normal; font-size: var(--t-small);
  letter-spacing: .16em; text-transform: uppercase; color: var(--rattan-lit);
}

/* ------------------------------- what's on ------------------------------- */
.whatson { margin: clamp(3rem, 8vh, 6rem) 0; }
.whatson__head, .barnote .head { font-family: var(--display); font-size: var(--t-big); font-weight: 400; margin: 0 0 1.4rem; }
.whatson__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.whatson__list li {
  display: grid; grid-template-columns: minmax(9rem, 1.4fr) 1fr 1fr;
  gap: .4rem clamp(1rem, 3vw, 2.4rem); align-items: baseline;
  padding: clamp(1rem, 2.4vw, 1.6rem) 0;
  border-top: 1px solid rgba(244,241,233,.18);
}
.whatson__list li:last-child { border-bottom: 1px solid rgba(244,241,233,.18); }
.whatson__list b { font-family: var(--display); font-size: var(--t-mid); font-weight: 400; }
.whatson__list span { font-size: var(--t-small); color: var(--rattan-lit); }
.whatson__list i { font-style: normal; font-size: var(--t-small); opacity: .62; }
.whatson__list p { grid-column: 1 / -1; margin: .3rem 0 0; font-size: var(--t-small); opacity: .74; max-width: 62ch; }
.whatson__list--light li { border-color: rgba(30,48,53,.18); }
.whatson__list--light span { color: var(--tolix); }

/* --------------------------- services strata ----------------------------- */
.stratum {
  display: grid; grid-template-columns: 6fr 6fr; align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3.5rem, 9vh, 7rem) var(--edge);
  max-width: 1500px; margin: 0 auto;
}
.stratum--flip .stratum__say { order: -1; }
.stratum__lede {
  font-family: var(--display); font-style: italic; font-size: var(--t-mid);
  line-height: 1.32; color: var(--ink-soft); margin: 0 0 1rem;
}
.stratum__say p { max-width: 50ch; color: var(--ink-soft); }
.ticks { list-style: none; margin: 1.4rem 0 0; padding: 0; columns: 2 14rem; column-gap: 2rem; }
.ticks li { font-size: var(--t-small); margin-bottom: .5rem; padding-left: 1.1rem; position: relative; break-inside: avoid; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--tolix); }
.pillars {
  list-style: none; margin: 1.6rem 0 0; padding: 1.2rem 0 0; display: flex; flex-wrap: wrap;
  gap: .5rem 1.4rem; border-top: 1px solid rgba(30,48,53,.18);
}
.pillars li { font-family: var(--display); font-style: italic; font-size: var(--t-mid); color: var(--ink-soft); }
.booking { font-size: var(--t-small); letter-spacing: .1em; text-transform: uppercase; color: var(--tolix); margin-top: 1.2rem; }
.stratum .btn { margin-top: 1.6rem; }
.soon { font-style: italic; color: var(--ink-faint); }

/* -------------------------- reservations / form -------------------------- */
.book__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.6vw, 2rem); margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.book__card { border: 1px solid rgba(30,48,53,.22); padding: clamp(1.6rem, 3.4vw, 2.6rem); }
.book__card--soft { background: rgba(166,189,164,.16); border-color: transparent; }
.book__card .head { font-size: var(--t-mid); }
.book__card p { color: var(--ink-soft); max-width: 40ch; }
.book__or { font-size: var(--t-small); margin-top: 1rem; }
.enquiry { border-top: 1px solid rgba(30,48,53,.2); padding-top: clamp(2rem, 5vh, 3.4rem); }
.enquiry__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem clamp(1rem, 2.4vw, 1.8rem); }
.enquiry__wide { grid-column: 1 / -1; }
.enquiry label { display: grid; gap: .4rem; font-size: var(--t-small); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.enquiry input, .enquiry select, .enquiry textarea {
  font: inherit; font-size: var(--t-body); text-transform: none; letter-spacing: 0;
  color: var(--ink); background: rgba(255,255,255,.5);
  border: 1px solid rgba(30,48,53,.24); border-radius: 0; padding: .8rem .9rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.enquiry input:focus, .enquiry select:focus, .enquiry textarea:focus {
  outline: none; border-color: var(--tolix); background: #fff;
}
.enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.6rem; }
.enquiry__fine { font-size: var(--t-small); color: var(--ink-faint); max-width: 44ch; margin: 0; }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); cursor: pointer; }
.btn--solid:hover { background: var(--tolix); border-color: var(--tolix); }
.enquiry__state { margin-top: 1rem; font-size: var(--t-small); }
.enquiry__state[data-ok="true"] { color: var(--tolix); }

/* ------------------------------- gallery --------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.6rem, 3.4vw, 2.4rem); }
.filters button {
  font: inherit; font-size: var(--t-small); letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: 1px solid rgba(30,48,53,.28); color: var(--ink);
  padding: .55rem 1.1rem; cursor: pointer; border-radius: 0;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.filters button:hover { border-color: var(--ink); }
.filters button.is-here { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.gallery {
  columns: 3 20rem; column-gap: clamp(.6rem, 1.4vw, 1.1rem);
  padding: clamp(1rem, 3vh, 2rem) var(--edge) clamp(4rem, 10vh, 7rem);
  max-width: 1500px; margin: 0 auto;
}
.shot {
  break-inside: avoid; margin: 0 0 clamp(.6rem, 1.4vw, 1.1rem);
  position: relative; overflow: hidden; cursor: zoom-in; background: var(--paper-deep);
}
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem .9rem .8rem;
  font-size: var(--t-small); color: var(--paper);
  background: linear-gradient(0deg, rgba(16,28,33,.82), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.shot:hover figcaption, .shot:focus-within figcaption { opacity: 1; transform: none; }
.shot[hidden] { display: none; }

/* ------------------------------ lightbox --------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(16,28,33,.94); padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: min(92vw, 1100px); max-height: 88vh; display: grid; gap: .8rem; }
.lightbox__fig img { max-width: 100%; max-height: 80vh; object-fit: contain; margin: 0 auto; }
.lightbox__fig figcaption { color: var(--paper); font-size: var(--t-small); text-align: center; opacity: .8; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: transparent; border: 0; color: var(--paper);
  cursor: pointer; font-size: 2.4rem; line-height: 1; padding: .6rem 1rem; opacity: .7;
  transition: opacity .3s var(--ease);
}
.lightbox__close { top: max(1rem, env(safe-area-inset-top)); right: 1rem; font-size: 2.8rem; }
.lightbox__nav--prev { left: .4rem; }
.lightbox__nav--next { right: .4rem; }
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }

/* -------------------------------- phone ---------------------------------- */
@media (max-width: 980px) {
  .rail { align-items: center; }
  .rail__toggle {
    display: grid; gap: 5px; background: transparent; border: 0; cursor: pointer;
    padding: .6rem; z-index: 50;
  }
  .rail__toggle span { display: block; width: 26px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
  .rail__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .rail__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; background: var(--paper);
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 1.1rem; padding: 0 var(--edge);
    clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease);
    pointer-events: none;
  }
  .nav.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
  .nav__item { font-family: var(--display); font-size: clamp(2rem, 9vw, 3.2rem); text-transform: none; letter-spacing: -.01em; opacity: 1; }
  .nav__item::after { display: none; }
  .nav__book { margin-top: 1rem; }
  .stratum, .two--wide, .two--flip, .dogpair, .book__grid { grid-template-columns: 1fr; }
  .stratum--flip .stratum__say, .two--flip .two__say { order: 0; }
  .strip { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; }
  .whatson__list li { grid-template-columns: 1fr; gap: .15rem; }
  .gallery { columns: 2 10rem; }
  .ticks { columns: 1; }
}
@media (max-width: 560px) { .gallery { columns: 1; } }

/* the owners' own words — the founding voice, in their handwriting so to speak.
   Light where the category's award-winners all go dark. */
.voice { padding: clamp(1rem, 3vh, 2rem) var(--edge) clamp(2rem, 6vh, 4rem); max-width: 1400px; margin: 0 auto; }
.voice blockquote {
  margin: 0; max-width: 30ch;
  border-left: 2px solid var(--tolix); padding-left: clamp(1rem, 2.4vw, 1.8rem);
}
.voice p {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.3rem, 2.9vw, 2.3rem); line-height: 1.3; margin: 0 0 .9rem;
}
.voice cite {
  font-family: var(--text); font-style: normal; font-size: var(--t-small);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}

/* ==========================================================================
   THE POLISH PASS — glass rail, extravagant framing, gilt detail.
   Held against Atelier Crenn and Eleven Madison Park (captured this session):
   at the top of this market the chrome recedes, every label is a tracked serif
   cap, and the photography is presented like framed work rather than dropped
   into a grid. That is what this section does.
   ========================================================================== */

/* -------------------------- the glass rail -------------------------------
   It only frosts once the page has actually moved, so the first viewport is
   never covered by a bar — the hero stays whole. ------------------------- */
.rail {
  mix-blend-mode: normal;
  transition: background .6s var(--ease), backdrop-filter .6s var(--ease),
              border-color .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease);
  border-bottom: 1px solid transparent;
  align-items: center;
}
.rail.is-glass {
  background: rgba(244, 241, 233, .62);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border-bottom-color: rgba(30, 48, 53, .12);
  padding-top: max(.72rem, env(safe-area-inset-top));
  padding-bottom: .72rem;
  box-shadow: 0 1px 30px rgba(30, 48, 53, .07);
}
.rail.is-glass .rail__mark { width: clamp(112px, 11vw, 158px); }
/* a hairline of gilt under the glass — the mat line on a framed print */
.rail.is-glass::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,138,79,.5) 22%, rgba(176,138,79,.5) 78%, transparent);
}
.rail__mark { transition: width .6s var(--ease); }

/* ---------------------- extravagant photo framing ------------------------
   Every picture is presented as a mounted print: a bone mat, a gilt hairline,
   a cast shadow, and a caption set in the display serif. The frame is the
   fixed object; the picture breathes inside it. --------------------------- */
.frame {
  background: var(--paper);
  padding: clamp(.5rem, .9vw, .85rem);            /* the mat */
  box-shadow:
    0 1px 2px rgba(30,48,53,.10),
    0 18px 40px -18px rgba(30,48,53,.30);
  overflow: visible;
}
.frame > img {
  position: relative; z-index: 1;
  box-shadow: 0 0 0 1px rgba(30,48,53,.10);
}
.frame::after {                                    /* the gilt line, inset on the mat */
  content: ""; position: absolute; inset: clamp(.24rem, .42vw, .4rem);
  border: 1px solid rgba(176,138,79,.40);
  box-shadow: none; pointer-events: none; z-index: 2;
}
.frame--tall  { aspect-ratio: 4/5; }
.frame--lane  { aspect-ratio: 4/5; }
.frame--stratum { aspect-ratio: 5/4; }
.frame--tall > img, .frame--lane > img, .frame--stratum > img { height: 100%; }

/* the caption plate a gallery would screw to the wall beneath the work */
.frame figcaption, .plate figcaption {
  position: absolute; left: 0; right: 0; bottom: calc(-1 * clamp(1.5rem, 2.6vw, 2rem));
  font-family: var(--display); font-variation-settings: 'opsz' 10;
  font-size: var(--t-small); letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center;
}

/* the lane becomes a gallery wall: alternating heights, hung off one line */
.strip { align-items: start; }
.strip .frame:nth-child(even) { margin-top: clamp(1.2rem, 3.4vw, 3rem); }
.strip .frame:nth-child(3n)   { aspect-ratio: 1/1; }

/* --------------------------- gallery, framed ----------------------------- */
.shot {
  background: var(--paper);
  padding: clamp(.42rem, .8vw, .7rem);
  box-shadow: 0 1px 2px rgba(30,48,53,.10), 0 16px 34px -16px rgba(30,48,53,.26);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.shot::after {
  content: ""; position: absolute; inset: clamp(.2rem, .38vw, .34rem);
  border: 1px solid rgba(176,138,79,.36); pointer-events: none; z-index: 2;
}
.shot > img { position: relative; z-index: 1; transition: transform 1.1s var(--ease); }
.shot:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(30,48,53,.12), 0 28px 52px -18px rgba(30,48,53,.34); }
.shot:hover > img { transform: scale(1.045); }
.shot figcaption {
  z-index: 3; padding: 2.6rem 1rem 1rem;
  font-family: var(--display); font-variation-settings: 'opsz' 11;
  letter-spacing: .12em; text-transform: uppercase; font-size: calc(var(--t-small) * .95);
}

/* ------------------------- the threshold plate --------------------------- */
.plate {
  padding: clamp(.5rem, .9vw, .9rem);
  background: var(--paper);
  box-shadow: 0 2px 4px rgba(30,48,53,.10), 0 34px 70px -30px rgba(30,48,53,.36);
  overflow: visible;
}
.plate img { position: relative; z-index: 1; }
.plate::after {
  content: ""; position: absolute; inset: clamp(.24rem, .42vw, .42rem);
  border: 1px solid rgba(176,138,79,.42);
  background: none; z-index: 2; pointer-events: none;
}

/* ------------------------------ fine detail ------------------------------ */
.eyebrowless {
  font-variation-settings: 'opsz' 24; font-weight: 400;
  letter-spacing: .02em;
}
.page-title em, .word em, .head em { font-style: italic; font-weight: 400; }
.threshold__say, .stratum__lede, .page-lede, .upstairs__hours,
.handover p, .quote p, .voice p, .namecard__name, .traits li, .pillars li {
  font-variation-settings: 'opsz' 40;
}
.menu__note, .course__add, .enquiry__fine, .fine { font-family: var(--text); }
.course__name {
  font-weight: 500; font-variation-settings: 'opsz' 48; letter-spacing: -.005em;
  border-bottom-color: rgba(176,138,79,.5);
}
.dish dt { font-family: var(--text); font-weight: 600; letter-spacing: -.002em; }
.dish dt b { font-family: var(--display); font-variation-settings: 'opsz' 20; font-weight: 600; }
.hours__floor, .whatson__head, .namecard__name { font-weight: 500; }
.filters button, .book__or, .booking, .colophon, .hours dt, .hours dd,
.whatson__list span, .whatson__list i {
  font-family: var(--display); font-variation-settings: 'opsz' 11; letter-spacing: .13em;
}
.quote cite, .voice cite {
  font-family: var(--display); font-variation-settings: 'opsz' 10; font-weight: 500;
}
.ticks li::before { background: var(--gold); }

/* ==========================================================================
   PASS THREE: the button system, centred containers, and the footer set right.
   ========================================================================== */

/* --------------------------- THE BUTTON ----------------------------------
   Not a rectangle with a border. Four layers:
     1. a soft lozenge with a gilt hairline and an inner highlight
     2. an ink fill that WIPES UP from the floor on hover (the site's one verb)
     3. a sheen that travels across the face
     4. a lifted, warm cast shadow
   One shape, three tones (default, quiet, solid, light). ------------------ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  isolation: isolate; overflow: hidden;
  padding: .92em 1.9em;
  border: 0; border-radius: 999px;
  color: var(--ink); background: transparent;
  text-decoration: none; cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(30,48,53,.26),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 1px 1px rgba(30,48,53,.05);
  transition: color .55s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease);
}
.btn::before {                       /* the gilt hairline, just inside */
  content: ""; position: absolute; inset: 3px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(176,138,79,.42);
  opacity: .9; transition: opacity .55s var(--ease); z-index: 1;
}
.btn::after {                        /* the ink that rises to fill */
  content: ""; position: absolute; inset: 0; border-radius: 999px; z-index: 0;
  background: linear-gradient(180deg, var(--ink-soft), var(--ink));
  transform: translateY(101%);
  transition: transform .62s var(--ease);
}
.btn__label { position: relative; z-index: 2; display: block; }
.btn__sheen {                        /* the travelling highlight */
  position: absolute; z-index: 3; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn:hover, .btn:focus-visible {
  color: var(--paper); transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(30,48,53,.18),
    0 12px 24px -12px rgba(30,48,53,.45);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover::before, .btn:focus-visible::before { opacity: .55; }
.btn:hover .btn__sheen, .btn:focus-visible .btn__sheen {
  opacity: 1; animation: sheen .9s var(--ease) forwards;
}
.btn:active { transform: translateY(0); }
@keyframes sheen { to { left: 115%; opacity: 0; } }

/* the quiet one: the second choice in a pair */
.btn--quiet { color: var(--tolix); box-shadow: inset 0 0 0 1px rgba(203,60,33,.34), inset 0 1px 0 rgba(255,255,255,.5); }
.btn--quiet::before { box-shadow: inset 0 0 0 1px rgba(203,60,33,.28); }
.btn--quiet::after { background: linear-gradient(180deg, var(--tolix), var(--tolix-deep)); }

/* the solid one: a form's single commitment */
.btn--solid { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(30,48,53,.5); }
.btn--solid::after { transform: translateY(0); background: linear-gradient(180deg, var(--ink-soft), var(--ink)); }
.btn--solid:hover::after { background: linear-gradient(180deg, var(--tolix), var(--tolix-deep)); }

/* on the dark floors */
.btn--light { color: var(--paper); box-shadow: inset 0 0 0 1px rgba(244,241,233,.34), inset 0 1px 0 rgba(255,255,255,.14); }
.btn--light::before { box-shadow: inset 0 0 0 1px rgba(233,180,117,.44); }
.btn--light::after { background: linear-gradient(180deg, var(--paper), #fff); }
.btn--light:hover, .btn--light:focus-visible { color: var(--dusk-deep); }

/* the rail's compact one */
.btn--sm { padding: .66em 1.35em; font-size: calc(var(--t-small) * 1.02); }

@media (prefers-reduced-motion: reduce) {
  .btn__sheen { display: none; }
  .btn::after { transition: none; }
}

/* ---------------------- centred containers everywhere -------------------- */
.rail__inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.act { padding-inline: var(--edge); }
.threshold__inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  position: relative; align-self: center; padding-top: clamp(5rem, 11vh, 7.5rem);
}
.threshold { display: grid; grid-template-rows: 1fr auto; }
.threshold__type { max-width: 40ch; padding-top: 0; }
.now { max-width: var(--shell); margin-inline: auto; width: 100%; }
.threshold::after { left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--edge), var(--shell)); right: auto; }
.stratum { display: block; padding-inline: var(--edge); }
.stratum__inner {
  display: grid; grid-template-columns: 6fr 6fr; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.stratum--flip .stratum__inner .stratum__say { order: -1; }
.menu { padding-inline: var(--edge); }
.menu__inner { max-width: var(--shell); }
.gallery { max-width: var(--shell); }
.page-top { padding-inline: var(--edge); max-width: none; }
.close__inner, .quote blockquote, .voice .wrap { max-width: var(--shell); margin-inline: auto; }

/* ------------------------------ the footer ------------------------------- */
.close__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.4rem); max-width: none;
}
.close__cell { min-width: 0; }
.head--close {
  font-style: italic; color: var(--rattan-lit);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.25; margin-bottom: 1rem;
}
.close__addr { font-family: var(--display); font-size: var(--t-mid); line-height: 1.4; margin: 0 0 1.4rem; color: var(--paper); }
.hours__floor { color: var(--rattan-lit); font-size: calc(var(--t-mid) * .92); margin-bottom: .8rem; }
.hours dl { grid-template-columns: 1fr auto; gap: .45rem .9rem; }
.hours dt { color: rgba(244,241,233,.66); }
.hours dd { color: var(--paper); }
.close__contact p, .close__contact a { color: rgba(244,241,233,.82); }
.colophon { max-width: none; }

@media (max-width: 980px) {
  .close__grid { grid-template-columns: 1fr 1fr; }
  .stratum__inner { grid-template-columns: 1fr; }
  .stratum--flip .stratum__inner .stratum__say { order: 0; }
}
@media (max-width: 620px) {
  .close__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ------------------- the threshold, recomposed as a grid ------------------
   Two columns inside the centred measure: the invitation on the left, the
   room standing on the right, Lou Lou sitting in front of both. ---------- */
.threshold__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(6rem, 13vh, 9rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
}
.threshold__type { max-width: 34ch; align-self: center; }
.threshold__say { max-width: 24ch; margin-top: clamp(1rem, 2.2vw, 1.6rem); }
.threshold__sub { max-width: 36ch; margin-top: .9rem; }
.intents { flex-wrap: nowrap; gap: .7rem; margin-top: clamp(1.4rem, 2.8vw, 2rem); }

/* the room plate: back to a standing portrait panel, inside the grid */
.plate {
  position: relative; inset: auto;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  justify-self: end; align-self: center;
  max-width: 30rem;
}
.plate img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 40%; }

/* Lou Lou sits at the foot of the plate, breaking its lower edge */
.greeter {
  position: absolute; z-index: 3;
  right: clamp(-1.5rem, -1vw, 1rem);
  bottom: clamp(-3.5rem, -5vh, -1.5rem);
  height: clamp(190px, 30vh, 330px); width: auto;
  filter: drop-shadow(0 16px 20px rgba(30,48,53,.20));
}
.greeter-shadow {
  position: absolute; z-index: 2;
  right: clamp(-1rem, -.5vw, 1.4rem);
  bottom: clamp(-3.7rem, -5.3vh, -1.8rem);
  width: clamp(130px, 20vh, 210px); height: 14px;
  background: radial-gradient(ellipse 44% 50% at 50% 50%, rgba(30,48,53,.34), transparent 74%);
  filter: blur(3.5px);
}
.threshold::after { display: none; }
.now {
  border-top: 1px solid rgba(30,48,53,.16);
  padding-top: 1rem; padding-inline: 0;
  margin-bottom: clamp(1rem, 2.4vh, 1.8rem);
}

@media (max-width: 900px) {
  .threshold__inner {
    grid-template-columns: 1fr; gap: clamp(3.5rem, 9vh, 5rem);
    padding-top: clamp(7rem, 16vh, 9rem);
  }
  .threshold__type { max-width: 100%; }
  .plate { max-width: min(78vw, 26rem); justify-self: center; aspect-ratio: 4/5; }
  .greeter { right: clamp(-1rem, -2vw, 0rem); bottom: clamp(-2.5rem, -4vh, -1rem); height: clamp(160px, 24vh, 240px); }
  .greeter-shadow { right: clamp(-.5rem, -1vw, .6rem); bottom: clamp(-2.7rem, -4.2vh, -1.2rem); width: clamp(110px, 16vh, 150px); }
  .intents { flex-wrap: wrap; }
}

.btn__label { white-space: nowrap; }
.intents { width: max-content; max-width: 100%; }
@media (max-width: 900px) { .intents { width: 100%; } }

/* the page opening fills its centred container instead of hugging one edge */
.page-title { max-width: 24ch; }
.page-lede { max-width: 58ch; }
.page-top .wrap { display: grid; gap: 0; }