/* ============================================================
   バンコクスマイル 愛宕グリーンヒルズ店 (09-bangkok-smile-atago)
   The only stylesheet written for this site. ds.css, booking.css
   and media.css load AFTER this file and are shared; nothing here
   forks them. The three places where this file deliberately
   out-specifies booking.css are marked OVERRIDE and explained.

   THE READ. A Thai diner on the second floor of an office tower,
   for the people who work in and around Atago Green Hills. Lunch
   and dinner, Monday to Friday, eleven to ten, straight through.
   Saturday and Sunday it is dark. That week shape is the whole
   story, so the signature layout is a WEEK GRID: seven columns,
   five of them carrying one tall bar from 11:00 to 22:00, two of
   them empty. The office week, drawn.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text        #1F2420 on --bg #FBF8F2 ....... 14.88:1
     --muted       #5B615B on --bg ................  5.99:1 (on --bg-3 5.44:1)
     --accent      #17703A on --bg ................  5.80:1 (text AND fills)
     --accent-ink  #F4FBF5 on --accent ............  5.85:1
     --error       #A63A2A on --bg ................  6.08:1 (on --bg-2 6.34:1)
     --success     #2E6B45 on --bg ................  5.99:1
   One green. It is the same value whether it is a button, a link,
   a bar in the week grid or the current-language underline.
   ============================================================ */

:root {
  /* Ground. Warm white, the colour of the plaster wall by the door
     before the paint on it starts. */
  --bg: #FBF8F2;
  --bg-2: #FFFDF9;
  --bg-3: #F2EDE3;

  --text: #1F2420;
  --muted: #5B615B;
  --line: #E3DDD0;

  /* The one accent. Saturated green, dark enough to carry body text
     on its own and to carry pale text when it is a fill. */
  --accent: #17703A;
  --accent-strong: #125A2F;
  --accent-ink: #F4FBF5;
  --accent-tint: rgba(23, 112, 58, 0.09);

  --error: #A63A2A;
  --success: #2E6B45;

  /* One radius system, three steps. Photographs, cards and inputs
     all sit on it; the week bars use the smallest step. */
  --radius: 12px;
  --radius-sm: 7px;
  --radius-xs: 3px;

  --nav-h: 64px;
  --maxw: 1120px;
  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);

  /* TYPE. Archivo leads the display stack so Latin glyphs (the shop's
     own name, every clock time, every price) come from the grotesque,
     and ideographs fall through to Zen Kaku Gothic New behind it. */
  --font-display: "Archivo", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* The per-language families REPLACE the Japanese one rather than
   sitting behind it. Zen Kaku Gothic New covers a wide ideograph
   range and would otherwise set Traditional Chinese in Japanese
   glyph shapes. */
html[lang="en"] {
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
html[lang="zh-Hant"] {
  --font-display: "Archivo", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
}
html[lang="ko"] {
  --font-display: "Archivo", "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", Pretendard, "Malgun Gothic", sans-serif;
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  /* The motion dials ds.css reads. On body rather than :root because
     ds.css loads after this file and redeclares both on :root. A bright
     lunch room wants a clear lift and a quick settle. */
  --ds-lift: 3px;
  --ds-dur: 0.26s;

  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0 0 0.6rem;
}
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); }
h3 { font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); font-weight: 700; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* height:auto is load-bearing. Every <img> carries real width and
   height attributes so its box is reserved, and the height attribute
   maps to a used height that beats aspect-ratio unless released here. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }
a:hover { color: var(--text); }

/* Every clock time and every figure lines up in its column. */
.t, .wk-axis, .wk-hours, .info-list, .guide-band, .lo-note {
  font-variant-numeric: tabular-nums;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.sec { padding-block: clamp(3rem, 1.6rem + 5vw, 6rem); }

.sec-head { max-width: 46rem; margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.sec-head p { color: var(--muted); margin-bottom: 0; }

/* The one eyebrow on the page sits in the hero. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

/* ---------- reveal ----------
   motion.js takes ownership by putting .ds-motion on <html>, and
   ds.css then switches this transition off. If it never runs, this
   is the reveal. If scripting is off, the <noscript> block in each
   page turns it off. Nothing here can hide content forever. */
.rv { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.65rem 1.4rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-2); }

.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--text); }

.si { flex: none; vertical-align: -0.15em; }

/* ---------- header ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  flex: none;
  white-space: nowrap;
  /* When the brand is allowed to wrap (under 420px) it breaks only at
     its space: never バンコクスマイル 愛/宕 or Bangkok Smile 아타/고. */
  word-break: keep-all;
  line-break: strict;
}
.nav-links {
  display: flex;
  gap: 0.2rem;
  margin-inline-start: 0.6rem;
  flex: 1 1 auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.55rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }

.lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  margin-inline-start: auto;
}
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.42rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-cta { flex: none; min-height: 44px; padding: 0.4rem 0.95rem; font-size: 0.9rem; }

@media (max-width: 960px) {
  .nav-links { display: none; }
}
@media (max-width: 420px) {
  .lang a { padding-inline: 0.28rem; font-size: 0.74rem; }
  .nav-cta { padding: 0.4rem 0.7rem; font-size: 0.84rem; }
  /* The English brand is the longest of the four. It may shrink and break
     at its space rather than push the row past the viewport. */
  .brand { font-size: 0.95rem; flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.15; }
  .nav .wrap { gap: 0.4rem; padding-inline: 14px; }
}
@media (max-width: 360px) {
  .brand { font-size: 0.88rem; }
  .lang a { padding-inline: 0.22rem; font-size: 0.7rem; }
}

/* ---------- FAMILY 1: split hero ----------
   Copy on the paper ground at the left; the gapao close-up bleeds
   to the right viewport edge. h02 is a 9:16 portrait, so the frame
   is tall by nature and the egg stays in the upper middle of it. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  /* The copy sits in the upper third of the hero, against the top of
     the photograph, instead of floating in the vertical middle of a
     900px viewport with an empty band above the eyebrow. */
  align-items: start;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  min-height: calc(100dvh - var(--nav-h));
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-inline-start: max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
  padding-inline-end: 0;
}
.hero-copy { max-width: 33rem; padding-block-start: clamp(2rem, 9vh, 5.5rem); }
.hero h1 {
  /* Two lines in all four languages at 1440 and at 390, with the
     manual <br> as the only break. */
  font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3rem);
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: var(--muted);
  max-width: 28rem;
  margin-bottom: 1.8rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* overflow:hidden is load-bearing. motion.js puts a scroll-linked
   scale(1.06 to 1.0) drift on `.hero img`, and this photograph is flush
   with the right edge of the viewport. The drift happens inside the
   frame, so the document never grows wider than the window. */
.hero-media { align-self: stretch; display: flex; overflow: hidden; }
.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  /* Keeps the egg and the chicken in frame at every desktop height. */
  object-position: 50% 45%;
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
    gap: 1.4rem;
    padding-inline: 0;
    padding-block: 0 clamp(2.2rem, 1.5rem + 3vw, 3.5rem);
  }
  .hero-media { order: -1; }
  .hero-media img {
    /* 4:3 keeps the copy and the reserve button inside the first 844px
       on a phone. The crop shows the egg and the top of the chicken. */
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    object-position: 50% 36%;
    border-radius: 0;
  }
  .hero-copy {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 20px;
    padding-block-start: 0;
  }
}

/* ---------- FAMILY 2: THE WEEK GRID ----------
   Seven columns, one per day. A weekday carries a bar from 11:00 to
   22:00 on an axis that runs 10:00 to 23:00, with the last-order
   tick at 21:30. Saturday and Sunday carry nothing but the word.
   The grid is aria-hidden: the same hours are written out beside it
   in text, so a screen reader, a printout and a page with CSS off
   all get the facts rather than a picture of them. */

.sec-hours { background: var(--bg-2); border-block: 1px solid var(--line); }

.week {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.5rem;
  --h: 260px;
}
.wk-axis {
  position: relative;
  height: var(--h);
  font-size: 0.74rem;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
}
.wk-axis span {
  position: absolute;
  inset-inline-end: 0;
  top: calc(var(--at) * 1%);
  transform: translateY(-50%);
  white-space: nowrap;
}
/* The last-order tick and the closing tick are thirty minutes apart on
   a thirteen-hour axis, ten pixels at this height. The last-order label
   hangs above its tick and the closing label hangs below its own, so
   both stay legible without either lying about where its line is. */
.wk-axis .above { transform: translateY(-100%); }
.wk-axis .below { transform: none; }
.wk-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
}
.wk-day { display: grid; gap: 0.5rem; text-align: center; }
.wk-col {
  position: relative;
  height: var(--h);
  border-radius: var(--radius-xs);
  background: var(--bg-3);
  overflow: hidden;
}
/* --from and --to are percentages of the axis (10:00 to 23:00, 13 hours). */
.wk-bar {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--from) * 1%);
  height: calc((var(--to) - var(--from)) * 1%);
  background: var(--accent);
  border-radius: var(--radius-xs);
}
/* The last-order tick, drawn across the bar in the paper colour. */
.wk-lo {
  position: absolute;
  inset-inline: 0;
  top: calc(var(--at) * 1%);
  height: 2px;
  background: var(--bg-2);
  opacity: 0.9;
}
.wk-day.is-closed .wk-col {
  background: transparent;
  border: 1px dashed var(--line);
}
.wk-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
}
.wk-day.is-closed .wk-name { color: var(--muted); }
.wk-day.is-closed .wk-col::after {
  content: attr(data-closed);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  writing-mode: vertical-rl;
  letter-spacing: 0.1em;
}
html[lang="en"] .wk-day.is-closed .wk-col::after { writing-mode: vertical-rl; }

/* The bars grow down from 11:00 when the grid arrives. It rides the
   shared .in hook, so there is no second animation system. */
@media (prefers-reduced-motion: no-preference) {
  .rv .wk-bar {
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 0.55s var(--ease);
  }
  .rv.in .wk-bar { transform: none; }
  .wk-day:nth-child(2) .wk-bar { transition-delay: 0.05s; }
  .wk-day:nth-child(3) .wk-bar { transition-delay: 0.1s; }
  .wk-day:nth-child(4) .wk-bar { transition-delay: 0.15s; }
  .wk-day:nth-child(5) .wk-bar { transition-delay: 0.2s; }
}

.wk-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.wk-hours li { display: grid; gap: 0.1rem; }
.wk-hours .k {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.wk-hours .v { font-weight: 700; }
.wk-hours .v.is-closed { color: var(--accent); }
.lo-note { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); max-width: 46rem; }

@media (max-width: 560px) {
  .week { --h: 190px; grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0.4rem; }
  .wk-days { gap: 0.3rem; }
  .wk-name { font-size: 0.78rem; }
  .wk-axis { font-size: 0.66rem; }
  .wk-day.is-closed .wk-col::after { font-size: 0.66rem; }
}

/* ---------- FAMILY 3: the plate gallery, 2 + 1 ----------
   One tall cell at the left, two stacked at the right. Three photos,
   three cells, nothing empty. */

.plates {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.2rem);
}
.plates figure { margin: 0; min-width: 0; }
.plates figure:first-child { grid-row: 1 / 3; }
.plates img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
/* The gapao plate sits at the left of h04, so the tall crop leans left. */
.plates figure:first-child img { aspect-ratio: 4 / 5; object-position: 30% 50%; }
.plates figure:not(:first-child) img { aspect-ratio: 16 / 9.4; }
.plates figcaption {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
}
.plates figure { display: flex; flex-direction: column; }
.plates figure img { flex: 1 1 auto; min-height: 0; }

@media (max-width: 719px) {
  .plates { grid-template-columns: 1fr; grid-template-rows: none; }
  .plates figure:first-child { grid-row: auto; }
  .plates figure:first-child img { aspect-ratio: 4 / 3; }
  .plates figure:not(:first-child) img { aspect-ratio: 3 / 2; }
}

/* ---------- FAMILY 4: the price two-up ----------
   The one image-plus-text split below the hero. A stir-fry plate
   and a beer beside a plain card with the budget guide. The
   photograph is cropped to its left two thirds on purpose: a menu
   stand at the right edge of the frame carries part of a price. */

.taste-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 0.8rem + 2vw, 2.4rem);
  align-items: center;
}
.pair-fig { margin: 0; }
.pair-fig img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 28% 50%;
  border-radius: var(--radius);
}
.pair-fig figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
}
.pair-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
}
.pair-card h3 { margin-bottom: 0.5rem; }
.pair-card p { color: var(--muted); }
.guide-rows {
  display: grid;
  gap: 0.7rem;
  margin: 1.2rem 0 0.9rem;
  padding: 0;
  list-style: none;
}
.guide-rows li {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.guide-rows .k {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.guide-band {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
  font-weight: 800;
  color: var(--accent);
}
.guide-note { font-size: 0.85rem; color: var(--muted); margin-bottom: 0; }

@media (max-width: 719px) {
  .taste-grid { grid-template-columns: 1fr; }
  /* 1:1 at 0% keeps the visible source inside x 0..1067, so the menu
     stand at the right of the original stays out of the phone crop too. */
  .pair-fig img { aspect-ratio: 1 / 1; object-position: 0% 50%; }
}

/* ---------- FAMILY 5: the diptych ----------
   Two photographs side by side and nothing else: the door and the
   window. The storefront is cropped to roughly its right half at desktop
   (4/5, object-position 100%) so the fascia and the entrance carry
   the frame; that clips the edge of the menu A-board, and the square
   crop under 560px shows the menu board plus a sliver of the price
   board. Nothing on either board is legible at rendered size and
   nothing is transcribed. The HTML comment above the img says the same. The window frame
   is cropped to its left half so the photo wall on the right of the
   original, with its framed portraits, never appears. */

.diptych {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.2rem);
}
.diptych figure { margin: 0; min-width: 0; }
.diptych img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.diptych .dp-door img { object-position: 100% 55%; }
.diptych .dp-window img { object-position: 0% 50%; }
.diptych figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 560px) {
  .diptych { grid-template-columns: 1fr; }
  /* Only the storefront goes square: the window frame stays 4/5 at 0%
     so its visible source width (0..853) never reaches the portrait wall. */
  .diptych .dp-door img { aspect-ratio: 1 / 1; }
  .diptych .dp-window img { aspect-ratio: 4 / 5; object-position: 0% 50%; }
}

/* ---------- FAMILY 6: the information list ---------- */

.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 1rem + 2vw, 3rem);
  align-items: start;
}
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.info-list li:first-child { border-top: 1px solid var(--line); }
.info-list .label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding-top: 0.15rem;
}
.info-list a { min-height: 44px; display: inline-flex; align-items: center; }
.info-list a[data-tel] { font-weight: 700; }
.info-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.info-side p { color: var(--muted); font-size: 0.93rem; }

@media (max-width: 719px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-list li { grid-template-columns: 1fr; row-gap: 0.15rem; }
}

/* ---------- FAMILY 7: the booking block ---------- */

.reserve { background: var(--bg-2); border-top: 1px solid var(--line); }
.reserve-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.reserve-copy p { color: var(--muted); }
.reserve-alt {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.reserve-alt .tel-big {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 0.9rem + 1.5vw, 1.8rem);
}
.field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5;
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.6rem 0.8rem;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 100%;
}
.field .hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
.form textarea { border-radius: var(--radius-sm); }

/* OVERRIDE 1 and 2. booking.css hardcodes #f0a08c for the field error
   text and the rejected input's border. On this warm white that is
   under 2:1 and the one string a guest must read would be invisible.
   booking.css loads AFTER this file, so these rules are written one
   step more specific on purpose. */
.form .field .field-msg { color: var(--error); font-weight: 700; }
.form .field.bad input,
.form .field.bad select,
.form .field.bad textarea { border-color: var(--error); border-width: 2px; }

.form-error, .form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  line-height: 1.7;
}
.form-error.show, .form-ok.show { display: block; }
.form-error {
  color: var(--error);
  background: rgba(166, 58, 42, 0.07);
  border: 1px solid rgba(166, 58, 42, 0.32);
  font-weight: 700;
}
.form-error a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  color: var(--success);
  background: rgba(46, 107, 69, 0.07);
  border: 1px solid rgba(46, 107, 69, 0.3);
}

.book-result { border-radius: var(--radius); margin-top: 1.2rem; }
/* OVERRIDE 3. booking.css paints this link with --accent; here the
   accent already passes as text, and the id keeps the rule above
   booking.css's own selector so the underline colour is deliberate. */
#book-result .tel-row a { color: var(--accent); }
.ref-note {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

@media (min-width: 861px) {
  .reserve-grid > #book-result,
  .reserve-grid > .ref-note { grid-column: 2; }
}
@media (max-width: 860px) {
  .reserve-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.2rem, 1.5rem + 2vw, 3.2rem);
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 1.6rem;
}
.foot-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.foot-grid p { color: var(--muted); font-size: 0.9rem; margin-bottom: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; }
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--muted);
}
.foot-links a:hover { color: var(--text); }
.demo-note {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62rem;
  margin-bottom: 0.4rem;
}