:root {
  --bg: #f2ece2;
  --surface: #f9f6f0;
  --text: #1b3327;
  --muted: #5a5f57;
  --accent: #e2a15a;
  --accent-text: #1b3327;
  --accent-ink: #8a4618;
  --font-heading: 'Montserrat', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-accent: 'Montserrat', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
}

/* ==========================================================================
   Direction "halo" — a design-led café or bar whose identity is its room.
   Cream daytime page with deep "wall" bands (the wall is derived from the text
   colour). On the wall hang backlit organic mirrors with a warm halo; each one
   holds the name, a photo or the Google rating. The name is set like the shop
   sign: wide geometric capitals with the descriptor spread to the same width.
   Supporting materials: cognac leather (menu folder with stitching, primary
   button on cream) and walnut slats (pattern hero, split pilaster, footer
   facade). The halo is the only shadow on the page; no blur, no card shadows.

   Tokens from new_site.py: --bg --surface --text --muted --accent --accent-text
                            --accent-ink --font-heading --font-body
   Palette rules: text is a deep chromatic dark (the wall is made from it),
   accent is a light lamp colour (accent/text ≥ 4.5, never small text on
   cream), accent_ink is the leather (≥ 4.5 on bg: prices, links on cream).
   Type scale (mobile → desktop), details in NOTES.md:
     lockup  clamp(3rem, 1.6rem + 6vw, 7rem), capped by the longest word
     h2      clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem)  500, caps, .16em
     body    Lora 1.0625rem / 1.6; caps labels Montserrat .6875rem .2em
   Spacing: 8px steps, sections clamp(3.5rem, 8vw, 6.5rem).
   ========================================================================== */

:root {
  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2rem;  --s5: 2.5rem;
  --s6: 3rem;   --s8: 4rem;  --s10: 5rem;   --s12: 6rem;
  --section-pad: clamp(3.5rem, 8vw, 6.5rem);
  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --container: 1180px;
  --bar-h: 4.75rem;

  /* Materials, derived from the palette. */
  --wall: color-mix(in srgb, var(--text) 88%, var(--bg));
  --wall-muted: color-mix(in srgb, var(--bg) 75%, var(--wall));
  --glass: color-mix(in srgb, var(--wall) 60%, #000);
  --led: color-mix(in srgb, var(--accent) 45%, #fff);
  --wood: color-mix(in srgb, var(--accent-ink) 35%, #2a2420);
  --wood-gap: color-mix(in srgb, var(--wood) 60%, #000);
  --hair: color-mix(in srgb, var(--text) 14%, transparent);
  --wall-hair: color-mix(in srgb, var(--bg) 16%, transparent);
  --dots: color-mix(in srgb, var(--text) 28%, transparent);
  --halo: 0 0 0 1.5px var(--led),
          -2px 3px 1.25rem .25rem color-mix(in srgb, var(--led) 55%, transparent),
          0 0 4rem 1rem color-mix(in srgb, var(--accent) 16%, transparent);
  --glow: 0 0 .5em color-mix(in srgb, var(--led) 45%, transparent),
          0 0 1.4em color-mix(in srgb, var(--accent) 22%, transparent);

  /* Pebble shapes, like the mirrors on the wall. Each element that uses one
     has a fixed aspect-ratio: percentage radii change with the aspect. */
  --pebble-a: 58% 42% 50% 50% / 46% 54% 46% 54%;
  --pebble-b: 42% 58% 60% 40% / 55% 45% 55% 45%;
  --pebble-c: 50% 50% 40% 60% / 60% 44% 56% 40%;
}

/* Browsers without color-mix(): plain values instead of the derived ones
   (a fallback line before a custom property does not work — the second one
   always wins — so the whole set is redefined here). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --wall: var(--text);
    --wall-muted: var(--bg);
    --glass: var(--text);
    --led: var(--accent);
    --wood: #4c301d;
    --wood-gap: #2e1d11;
    --hair: rgb(0 0 0 / .14);
    --wall-hair: rgb(255 255 255 / .16);
    --dots: rgb(0 0 0 / .28);
    --halo: 0 0 0 1.5px var(--accent), 0 0 1.25rem .25rem var(--accent);
    --glow: none;
  }
  .btn { border: 1px solid currentColor; }
  .hero-lead, .footer-address, .footer-meta { color: inherit; }
  .folder, .folder--open::before { outline: 1px dashed rgb(255 255 255 / .55); }
  .sticky-bar { border-top: 1px solid rgb(255 255 255 / .3); }
  .sticky-bar a { border: 1px solid var(--bg); }
  .lang-menu { border: 1px solid rgb(255 255 255 / .3); }
  .lightbox { background: rgb(0 0 0 / .92); }
}

/* Bands: every section is cream (day) or wall (evening); components only use
   the local tokens, so they render correctly on either. */
.band-cream {
  --paper: var(--bg);
  --ink: var(--text);
  --soft: var(--muted);
  --line: var(--hair);
  --link: var(--accent-ink);
  --rule: var(--accent-ink);
}
.band-wall {
  --paper: var(--wall);
  --ink: var(--bg);
  --soft: var(--wall-muted);
  --line: var(--wall-hair);
  --link: var(--led);
  --rule: var(--accent);
}
.band-cream, .band-wall { background: var(--paper); color: var(--ink); }

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

/* No CSS smooth scrolling: script.js animates anchor jumps itself, and an
   instant window.scrollTo keeps lazy images loading in screenshots. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3 { margin: 0; font-family: var(--font-heading); font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl { margin: 0; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--ink, var(--text)); outline-offset: 3px; }

.container { width: min(100% - 2 * var(--page-pad), var(--container)); margin-inline: auto; }

.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kicker, .label-caps, .hero-kicker {
  margin: 0 0 .9rem;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--soft);
}
:lang(ru) .kicker, :lang(ru) .label-caps, :lang(ru) .hero-kicker { letter-spacing: .14em; }

.link-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}
.link-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------- mirrors */
/* The signature: an organic mirror, backlit — border-radius (not clip-path),
   so the halo shadow follows the shape. Static, never animated. */
.mirror {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--shape, var(--pebble-a));
  background: var(--glass);
  box-shadow: var(--halo);
}
.mirror img { width: 100%; height: 100%; object-fit: cover; }
.mirror--glass {
  background:
    linear-gradient(115deg, transparent 0 38%, rgb(255 255 255 / .06) 42% 47%, transparent 51%),
    var(--glass);
  color: var(--bg);
}

/* Rating mirror: the Google score inside a small lit pebble. */
.rating-mirror {
  --shape: var(--pebble-c);
  flex: none;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .3rem;
  width: 7.5rem;
  aspect-ratio: 1;
  padding: .75rem;
  text-align: center;
  text-decoration: none;
}
.rating-value {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bg);
}
.rating-label {
  max-width: 80%;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--wall-muted);
}

/* -------------------------------------------------------------- lockup */
/* The name as the shop sign; the descriptor letters are spread to the exact
   width of the name. Font size is capped by the longest word (--len) so a
   long name never overflows its container. */
.lockup {
  --max: clamp(3rem, 1.6rem + 6vw, 7rem);
  --size: min(var(--max), calc(var(--fitv, 84vw) / (var(--len) * .92)));
  display: inline-grid;
  justify-items: center;
  row-gap: .7rem;
  max-width: 100%;
}
/* Where container units work, the longest word also caps the size. */
@supports (width: 1cqi) {
  .lockup { --size: min(var(--max), calc(var(--fit, 100cqi) / (var(--len) * .92))); }
}
.lockup-name {
  --track: clamp(.12em, calc(.4em - var(--len) * .03em), .26em);
  margin: 0 calc(var(--track) * -1) 0 0;
  font-family: var(--font-heading);
  font-size: var(--size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}
.lockup-sub {
  justify-self: stretch;
  font-family: var(--font-heading);
  font-size: max(.6875rem, calc(var(--size) * .2));
  font-weight: 500;
  line-height: 1;
}
.lockup-spread { display: flex; justify-content: space-between; gap: .08em; }
.lockup-spread i { font-style: normal; }
.lockup-spread .sp { width: .5em; }
.lockup-sub--plain { letter-spacing: .3em; text-transform: uppercase; text-align: center; }
.band-wall .lockup-name, .sign .lockup-name { text-shadow: var(--glow); }

/* ---------------------------------------------------------------- header */
.site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--line); }

.header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--s2);
  padding-block: .5rem 0;
}

.brand {
  display: inline-grid;
  justify-items: start;
  align-content: center;
  min-height: 48px;
  min-width: 0;
  text-decoration: none;
}
.brand-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.brand-desc { display: none; }

.header-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); }
.header-phone {
  display: none;
  align-items: center;
  min-height: 44px;
  color: var(--led);
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Navigation: spaced caps; on phones one row that scrolls sideways. */
.nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 1.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  padding-right: 2rem;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--soft);
}
:lang(ru) .nav a { letter-spacing: .14em; }
.nav a:hover { color: var(--ink); }

/* -------------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .55rem 1.6rem;
  border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
/* On the wall the call button is the lit lamp; on cream it is stitched leather. */
.band-wall .btn-call { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }
.band-cream .btn-call { border-color: var(--accent-ink); background: var(--accent-ink); color: #fff; }
.band-cream .btn-call::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgb(255 255 255 / .5);
  border-radius: inherit;
  pointer-events: none;
}

.hero-actions, .contacts-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: clip; }
.hero-grid { padding-block: var(--s4) var(--s6); }
.hero-kicker { margin-bottom: 1.25rem; }
.hero-copy { container-type: inline-size; }

.hero-lead {
  max-width: 28ch;
  margin-top: var(--s3);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  font-style: italic;
  line-height: 1.4;
  color: color-mix(in srgb, var(--bg) 88%, var(--wall));
}

/* Hours in the hero: day in spaced caps, time in tabular figures. */
.hero-hours { display: grid; gap: .45rem; }
.hero-hours li { display: grid; gap: .05rem; }
.hero-hours .hours-time { white-space: normal; }
.hours-day {
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
}
.hours-time {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hours-line .hours-time { white-space: normal; }
.hours--leader .hours-line .hours-time { flex: 1; text-align: left; }

.hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}
.hero-actions { margin-top: var(--s4); }

/* type / pattern: the name inside a large glass mirror. */
.hero-mirror {
  container-type: inline-size;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 6 / 5;
  padding: 1.5rem;
}
.hero-mirror .lockup { --fit: 88cqi; --fitv: 60vw; }

.hero--pattern { background: var(--wood); }
.hero--pattern .hero-frame { padding: 1.25rem; }
.hero--pattern .hero-grid {
  width: auto;
  max-width: var(--container);
  padding: var(--s4) clamp(1.25rem, 4vw, 3rem) var(--s6);
  border-radius: .5rem;
  background: var(--wall);
}

/* photo: lockup on the wall, the room "in the mirror", a satellite mirror
   with the rating at its lower edge. */
.hero-photo-wrap { position: relative; margin-top: var(--s5); padding-bottom: 2rem; }
.hero-photo {
  --shape: var(--pebble-b);
  width: min(84%, calc(min(62svh, 26rem) * 4 / 5));
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}
.hero-photo img { object-position: 50% 30%; }
.rating-mirror--satellite {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 7rem;
}
.hero-foot { margin-top: var(--s4); }
.hero--photo .hero-hours { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); column-gap: var(--s3); }

/* split: copy on the wall, a walnut seam, the photo behind a straight window. */
.hero--split .hero-grid { padding: 0; }
.hero--split .hero-copy { padding: var(--s4) var(--page-pad) var(--s5); }
.hero-seam { height: 2.5rem; }
.hero-window { aspect-ratio: 4 / 5; overflow: hidden; }
.hero-window img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- slats */
.slats {
  --slat: 18px;
  background:
    linear-gradient(180deg, rgb(0 0 0 / .18), transparent 30% 70%, rgb(0 0 0 / .22)),
    repeating-linear-gradient(90deg, var(--wood) 0 calc(var(--slat) - 3px), var(--wood-gap) calc(var(--slat) - 3px) var(--slat));
}

/* ------------------------------------------------------------- sections */
.section { padding-block: var(--section-pad); }
.band-cream + .band-cream { padding-top: 0; }

.section-head { margin: 0 0 var(--s5); }
.section-title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}
:lang(ru) .section-title { letter-spacing: .12em; }
.section-head::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  margin-top: 1.1rem;
  background: var(--rule);
}

/* ------------------------------------------------------------ locations */
.plaques { display: grid; gap: 0; border-top: 1px solid var(--line); }
.plaque { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.plaque-name { margin-bottom: .3rem; font-family: var(--font-heading); font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.plaque-address { font-size: 1.125rem; font-weight: 500; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; }
.plaque-note { margin-top: .35rem; font-style: italic; color: var(--soft); }

/* ----------------------------------------------------------- menu folder */
/* Cognac leather around a cream page; the stitching is a dashed outline
   pulled into the middle of the leather. */
.folder {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: .625rem solid var(--accent-ink);
  border-radius: 1.25rem;
  outline: 1px dashed color-mix(in srgb, var(--bg) 55%, var(--accent-ink));
  outline-offset: -.3125rem;
  background: var(--surface);
}
.folder-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.item { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.item:first-child { padding-top: 0; }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item-body { flex: 1; min-width: 0; }
.item-img { flex: none; width: clamp(3.25rem, 12vw, 4rem); height: clamp(3.25rem, 12vw, 4rem); border-radius: .75rem; object-fit: cover; }
.item-head { display: flex; align-items: baseline; gap: .6rem; }
.item-name {
  min-width: 0;
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
}
.item-leader { flex: 1; min-width: .5rem; border-bottom: 1.5px dotted var(--dots); transform: translateY(-.25em); }
.item-price {
  flex: none;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.item-desc { margin-top: .3rem; font-size: .96875rem; line-height: 1.5; color: var(--muted); }

/* Pocket at the foot of the folder: the link to the full online menu. */
.pocket {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: 4.5rem;
  margin: var(--s4) calc(-1 * clamp(1.25rem, 4vw, 2.5rem)) calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
  padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 .75rem .75rem;
  background: var(--accent-ink);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------- about */
.about-grid { display: grid; gap: var(--s6); }
.about-mirror {
  --shape: var(--pebble-b);
  width: 84%;
  max-width: 26rem;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}
.about-text {
  max-width: 30em;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  line-height: 1.45;
}
.facts { display: grid; margin-top: var(--s5); border-top: 1px solid var(--line); }
.fact { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.fact::before {
  content: "";
  flex: none;
  width: .5rem;
  aspect-ratio: 1;
  border-radius: var(--pebble-c);
  background: var(--accent);
}

/* ---------------------------------------------------------------- steps */
.steps { display: grid; border-top: 1px solid var(--line); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.step-num { grid-row: 1 / 3; font-family: var(--font-heading); font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4rem); font-weight: 200; line-height: .9; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.step-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; }
.step-desc { grid-column: 2; color: var(--soft); }

/* -------------------------------------------------------------- reviews */
/* Cards shaped like the backs of the boucle chairs. */
.quotes { display: grid; gap: var(--s3); }
.quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--hair);
  border-radius: 2rem 2rem .75rem .75rem;
  background: var(--surface);
}
.quote-text { font-size: 1.0625rem; font-style: italic; line-height: 1.6; }
.quote-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote-meta b { font-weight: 600; color: var(--text); letter-spacing: .16em; }
.stars { display: inline-flex; gap: .15rem; }
.star { width: .95rem; height: .95rem; fill: var(--hair); }
.star--on { fill: var(--accent-ink); }
.reviews-more { margin-top: var(--s3); }

/* -------------------------------------------------------------- gallery */
/* A wall of tall frames, like the slats; one row when there are few photos. */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
.gallery-item { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: .375rem; background: var(--glass); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s3);
  background: color-mix(in srgb, var(--glass) 94%, transparent);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(92vw, 1200px); max-height: 88vh; border-radius: .75rem; object-fit: contain; }
.lightbox-close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--led);
  border-radius: 50%;
  background: transparent;
  color: var(--led);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* ------------------------------------------------------------- contacts */
.contacts-grid { display: grid; gap: var(--s5); }
.hours-block { margin-bottom: var(--s4); }
.hours--leader li { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; }
.hours--leader li + li { border-top: 1px solid var(--hair); }
/* Contacts hours: day ··· time, a dotted leader between them. */
.hours--leader .hours-day { flex: 1; display: flex; align-items: baseline; gap: .6rem; font-size: .75rem; color: var(--muted); }
.hours--leader .hours-day::after { content: ""; flex: 1; min-width: 1rem; border-bottom: 1.5px dotted var(--dots); transform: translateY(-.25em); }
.hours--leader .hours-time { font-size: 1rem; }
.contacts-actions { margin-bottom: var(--s4); }

.contacts { display: grid; border-top: 1px solid var(--hair); }
.contact { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s2); padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.contact dt { padding-top: .2rem; font-family: var(--font-heading); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact dd { margin: 0; overflow-wrap: anywhere; }
.contact dd a { display: inline-block; padding-block: .6em; margin-block: -.6em; color: var(--link); text-decoration: none; }
.contact-phone dd a { font-family: var(--font-heading); font-weight: 500; color: var(--accent-ink); font-variant-numeric: tabular-nums; }

.contacts-map { display: flex; flex-direction: column; }
.map { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hair); border-radius: 1.25rem; background: var(--surface); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.route-link { align-self: flex-start; margin-top: var(--s1); }

/* --------------------------------------------------------------- footer */
/* A slatted facade with the name lit like the sign; below, a dark strip. */
.facade { padding-block: clamp(3rem, 8vw, 5rem); }
.facade-inner { display: grid; justify-items: center; }
.sign {
  container-type: inline-size;
  display: grid;
  justify-items: center;
  width: min(100%, 44rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: .5rem;
  background: var(--glass);
  color: var(--bg);
}
.sign .lockup { --fit: 86cqi; --fitv: 70vw; --max: clamp(2.75rem, 1.5rem + 6vw, 8rem); }

.footer-strip { padding: var(--s4) 0 calc(var(--s4) + var(--bar-h)); background: var(--wood-gap); color: var(--bg); }
.footer-main { display: grid; gap: .25rem; margin-bottom: var(--s3); }
.footer-name { display: none; }
.footer-address { color: color-mix(in srgb, var(--bg) 80%, var(--wood-gap)); }
.footer-phone a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bg) 40%, transparent); font-variant-numeric: tabular-nums; }
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid rgb(255 255 255 / .14);
  font-size: .8125rem;
  color: color-mix(in srgb, var(--bg) 70%, var(--wood-gap));
}
.footer-credit a { display: inline-block; padding-block: .8rem; margin-block: -.8rem; color: inherit; }

/* Dark areas outside the bands: focus rings and outlines in cream. */
.site-footer, .sticky-bar, .lightbox { --ink: var(--bg); }

/* ------------------------------------------------------ sticky mobile bar */
.sticky-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: .5rem;
  padding: .625rem var(--page-pad) calc(.625rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--led) 40%, transparent);
  background: var(--glass);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.sticky-bar.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.sticky-bar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .4rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: 999px;
  color: var(--bg);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
}
.sticky-bar .sticky-call { border-color: var(--accent); background: var(--accent); color: var(--accent-text); }

/* ------------------------------------------------------------- phones */
@media (max-width: 699px) {
  /* Two buttons share the row evenly instead of wrapping ragged. */
  .hero-actions .btn, .contacts-actions .btn { flex: 1 1 auto; padding-inline: 1.1rem; }
  /* Reviews: a row of chair-back cards to swipe, the next one peeking in. */
  .quotes {
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 21rem);
    gap: var(--s2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--page-pad));
    padding: 0 var(--page-pad) .25rem;
    scroll-padding-inline: var(--page-pad);
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { scroll-snap-align: start; }
}
@media (max-width: 479px) {
  .item--img .item-head { flex-wrap: wrap; row-gap: .15rem; }
  .item--img .item-leader { display: none; }
  .item--img .item-price { flex-basis: 100%; }
}
@media (max-width: 899px) {
  /* The big mirror hangs on the wall, not edge to edge. */
  .hero-mirror { width: calc(100% - 1.5rem); margin-inline: auto; }
  /* An odd number of photos: the first one runs across both columns. */
  .gallery-cell:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .gallery-cell:first-child:nth-last-child(odd) .gallery-item { aspect-ratio: 3 / 2; }
}

/* --------------------------------------------------------- hover motion */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn, .sticky-bar a, .nav a, .link-more { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
  .btn:not(.btn-call):hover { border-color: var(--ink); }
  .band-wall .btn-call:hover { background: var(--led); border-color: var(--led); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-bar { transition: none; }
}

/* ---------------------------------------------------------- two columns */
@media (min-width: 700px) {
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plaques { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
  .rating-mirror { width: 8.5rem; }
  .rating-mirror--satellite { width: 7.5rem; }
}

/* -------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  :root { --bar-h: 0px; }
  .site-header { position: sticky; top: 0; }
  .header-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .5rem var(--s4); padding-block: .5rem; }
  .brand-desc {
    display: block;
    margin-top: .2rem;
    font-family: var(--font-heading);
    font-size: .5625rem;
    font-weight: 500;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--soft);
  }
  .nav { grid-column: 2; grid-row: 1; justify-content: center; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; gap: 0 1.75rem; }
  .header-actions { grid-column: 3; grid-row: 1; }
  .header-phone { display: inline-flex; }

  .slats { --slat: 24px; }

  /* type / pattern: mirror on the left, copy bottom-aligned on the right. */
  .hero--type .hero-grid, .hero--pattern .hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--s4);
    min-height: min(84vh, 760px);
    padding-block: var(--s6);
  }
  .hero--type .hero-kicker, .hero--pattern .hero-kicker { grid-column: 8 / 13; grid-row: 2; }
  .hero-mirror { grid-column: 1 / 8; grid-row: 1 / 5; align-self: center; aspect-ratio: 7 / 5; }
  .hero-side { grid-column: 8 / 13; grid-row: 3; }
  .hero-side .hero-lead { margin-top: 0; }
  .hero--pattern .hero-frame { padding: var(--s4) clamp(3rem, 6vw, 6rem); }
  .hero--pattern .hero-grid { padding-inline: clamp(2rem, 4vw, 3.5rem); }

  /* photo: copy and hours on the left, the photo mirror on the right. */
  .hero--photo .hero-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--s4);
    min-height: min(84vh, 780px);
    padding-block: var(--s6);
  }
  .hero--photo .hero-copy { grid-column: 1 / 7; grid-row: 2; }
  .hero--photo .hero-foot { grid-column: 1 / 7; grid-row: 3; }
  .hero-photo-wrap { grid-column: 7 / 13; grid-row: 1 / 5; align-self: center; margin-top: 0; padding: 0 0 3rem 5.5rem; }
  .hero-photo { width: 100%; max-height: min(80vh, 44rem); }
  .rating-mirror--satellite { right: auto; left: 0; bottom: 0; }

  /* split: copy, a full-height pilaster, the photo. */
  .hero--split .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) clamp(3.5rem, 6vw, 6rem) minmax(0, 6fr);
    min-height: min(84vh, 760px);
  }
  .hero--split .hero-copy { align-self: center; padding: var(--s8) var(--s5) var(--s8) max(var(--page-pad), calc((100vw - var(--container)) / 2)); }
  .hero-seam { height: auto; }
  .hero-window { position: relative; aspect-ratio: auto; }
  .hero-window img { position: absolute; inset: 0; }

  .folder--open .folder-list {
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), auto);
    column-gap: calc(1.375rem + 4rem);
  }
  .folder--open .item { padding-block: 1.1rem; border-bottom: 1px solid var(--hair); }
  .folder--open .item--page-start { padding-top: 0; }
  .folder--open .item--page-end { padding-bottom: 0; border-bottom: 0; }
  .folder--open::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: calc(50% - .6875rem);
    width: 1.375rem;
    background: var(--accent-ink);
    outline: 1px dashed color-mix(in srgb, var(--bg) 55%, var(--accent-ink));
    outline-offset: -4px;
  }

  .about-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--s10); }
  .about-mirror { grid-column: 2; grid-row: 1; width: 100%; max-width: 30rem; }
  .about-main { grid-column: 1; grid-row: 1; }
  .about-grid--text { grid-template-columns: minmax(0, 1fr); }

  .steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
  .step { grid-template-columns: minmax(0, 1fr); align-content: start; padding-right: var(--s3); }
  .step + .step { border-left: 1px solid var(--line); padding-left: var(--s3); }
  .step-num { grid-row: auto; margin-bottom: var(--s2); }
  .step-desc { grid-column: auto; }

  .gallery-grid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: .5rem; }
  .gallery-item { aspect-ratio: 3 / 4; }
  .gallery-grid--few .gallery-item { aspect-ratio: 3 / 2; max-height: 34rem; width: 100%; }
  .gallery-cell--feature { grid-column: span 2; grid-row: span 2; }
  .gallery-cell--wide { grid-column: span 2; }
  .gallery-cell--feature .gallery-item, .gallery-cell--wide .gallery-item { aspect-ratio: auto; height: 100%; }

  .contacts-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); }
  .map { flex: 1; aspect-ratio: 4 / 3; min-height: 24rem; }

  .footer-main { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--s3); }

  .sticky-bar { display: none; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  /* Not enough width for brand, links and phone in one row. */
  .header-row { grid-template-columns: minmax(0, 1fr) auto; padding-block: .5rem 0; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .header-actions { grid-column: 2; }
}
@media (min-width: 900px) {
  .brand { max-width: 20rem; }
}

@media (min-width: 1000px) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plaques { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Language switch (base/lang_switch.html.j2): a <details> dropdown — the
   current language in a pill, the three languages in a glass menu. */
.lang-switch { position: relative; }
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 44px;
  padding: 0 .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { content: ""; }
.lang-caret { width: .7em; height: .7em; flex: none; transition: transform .15s ease; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 40;
  min-width: 11rem;
  margin: 0;
  padding: .35rem;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--led) 35%, transparent);
  border-radius: .75rem;
  background: var(--glass);
  color: var(--bg);
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: .7em;
  min-height: 44px;
  padding: 0 .8rem;
  border-radius: .5rem;
  color: var(--bg);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.lang-menu a:hover { background: rgb(255 255 255 / .06); }
.lang-menu a[aria-current="page"] { pointer-events: none; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .35em; }
.lang-menu .lang-name { color: var(--wall-muted); font-family: var(--font-body); font-weight: 400; font-size: .9em; letter-spacing: 0; }