/* ============================================================
   CITE BOURGOGNE 步高里 - 13-cite-bourgogne
   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, and the three places where this file deliberately
   out-specifies booking.css are marked OVERRIDE and explained.

   THE READ. A large Chinese restaurant on the ground floor of the
   Haiyuza building, one minute from Roppongi station: 135 seats,
   private rooms, a lunch service and a dinner service Monday to
   Saturday, closed on Sundays. The storefront is gold letters on
   dark wood with a lacquer-red cart beside the door, and the dining
   room is red banquettes and lacquer trays. So the page is warm
   off-white paper with ONE lacquer red, and its signature component
   is the HOURS LEDGER: a two-column table of the day, lunch on the
   left and dinner on the right, where the Sunday row visibly spans
   both columns because the restaurant is closed that day.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text   #221E1B on --bg #FBF7EF ........ 15.48:1
     --muted  #5F574E on --bg ................  6.64:1  (6.04 on --bg-3)
     --accent #A5261D on --bg ................  6.79:1  (fills and text)
     --accent-text #8E1F18 on --bg ...........  8.33:1
     --accent-ink #FFF7F2 on --accent ........  6.85:1
     --error  #8E1F18 on --bg ................  8.33:1
     --success #2F6B43 on --bg ...............  5.95:1
     --muted on --accent-tint #F6E4E0 ........  5.77:1
   ============================================================ */

:root {
  /* Ground. The plaster above the fascia in h06, warmed. */
  --bg: #FBF7EF;
  --bg-2: #FFFDF8;
  --bg-3: #F3ECDF;

  --text: #221E1B;
  --muted: #5F574E;
  --line: #E3D9C9;

  /* The lacquer red of the cart and the banquettes. Fills, the
     weekend span in the ledger, the 135 figure, the .book-ref chip.
     --accent-text is the same red one step darker for links. */
  --accent: #A5261D;
  --accent-text: #8E1F18;
  --accent-ink: #FFF7F2;
  /* The same red at a tint, for the weekend cells of the ledger. */
  --accent-tint: #F6E4E0;

  --error: #8E1F18;
  --success: #2F6B43;

  /* One radius system, two steps. Small on purpose: the storefront is
     square-cut wood and lattice, and the page follows it. */
  --radius: 6px;
  --radius-sm: 4px;

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

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

/* The per-language families REPLACE the Japanese ones rather than
   sitting behind them. Zen Kaku Gothic Antique covers a wide ideograph
   range and would otherwise render Chinese and Korean in Japanese
   glyph shapes. */
html[lang="en"] {
  --font-display: "Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
html[lang="zh-Hant"] {
  --font-display: "Public Sans", "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: "Public Sans", "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 per-site motion dials ds.css reads. They sit on body rather
     than on :root because ds.css loads AFTER this file and redeclares
     both on :root; a rule on body wins for every element inside it.
     A big, busy dining room wants a plain lift and a short settle. */
  --ds-lift: 2px;
  --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 the box is reserved, and the height attribute
   maps to a used height that OVERRIDES aspect-ratio unless it is
   released here. */
img { max-width: 100%; height: auto; display: block; }

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

/* Every clock time on the page lines up in its column. */
.ledger, .info-list, .guide-band, .rooms-num {
  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; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-text);
  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 entirely, 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;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); 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); 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, 247, 239, 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.2rem;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  text-decoration: none;
  flex: none;
}
.brand:hover { color: var(--text); }
.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;
}
.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-text);
  border-bottom-color: var(--accent);
}
.nav-cta { flex: none; min-height: 44px; padding: 0.4rem 0.95rem; font-size: 0.9rem; }

@media (max-width: 900px) {
  .nav-links { display: none; }
}
@media (max-width: 420px) {
  .lang a { padding-inline: 0.3rem; font-size: 0.74rem; }
  .nav-cta { padding: 0.4rem 0.7rem; font-size: 0.84rem; }
  .brand { font-size: 1.05rem; }
  .nav .wrap { gap: 0.4rem; padding-inline: 14px; }
}

/* ---------- FAMILY 1: the fascia band ----------
   The storefront runs full bleed across the top of the page and the
   copy sits beneath it on the paper ground, headline at the left and
   the subtext with the buttons at the right. The hero is a two-row
   grid: the copy row is as tall as it needs to be, the photograph
   takes whatever the viewport leaves, so the reserve button is on
   screen at 1440x900 and at 390x844 without scrolling.

   THE CROP is load-bearing. The source frame carries two posters to
   the right of the doorway with small prices on them. At desktop the
   image is drawn 145% of the band's width and anchored to the band's
   top-left corner, so the frame ends at about 69% of the source,
   before the posters, and the fascia sits a third of the way across
   the band. At phone width the band is a 5:4 cover anchored left,
   which shows the same left 70% of the source. motion.js puts a
   scale(1.06 to 1.0) drift on the image; overflow:hidden on the band
   is what keeps that inside the viewport. */

.hero {
  display: grid;
  grid-template-rows: minmax(300px, 1fr) auto;
  min-height: calc(100dvh - var(--nav-h));
}
.hero-media {
  position: relative;
  overflow: hidden;
  /* The wood of the fascia, so the band is never paper while the
     photograph loads. */
  background: #2A2320;
  border-bottom: 3px solid var(--accent);
}
.hero-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 145%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.hero-copy {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem) 20px clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.hero h1 {
  /* Measured at 1440 and at 390: two lines in all four languages, with
     the manual <br> as the only break. */
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  margin: 0;
}
html[lang="en"] .hero h1 { font-size: clamp(1.85rem, 1.2rem + 2vw, 2.55rem); }
html[lang="ko"] .hero h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.9rem); }
.hero-lead { padding-top: 0.4rem; }
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: var(--muted);
  max-width: 28rem;
  margin-bottom: 1.4rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 860px) {
  .hero { grid-template-rows: auto auto; min-height: 0; }
  .hero-media { aspect-ratio: 5 / 4; }
  .hero-media img { width: 100%; object-position: 0 50%; }
  .hero-copy {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding-top: 1.5rem;
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  }
  .hero-lead { padding-top: 0; }
}

/* ---------- FAMILY 2: THE HOURS LEDGER ----------
   One row for Monday to Saturday, a lunch column and a dinner column.
   The Sunday row spans both columns because the restaurant is closed
   that day, and that span is the whole argument of the section: six
   days have two services, the seventh has none. The markup carries
   table roles, so a screen reader gets a table. */

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

.ledger {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr);
  border-top: 2px solid var(--text);
}
.ledger-head, .ledger-row { display: contents; }
.ledger-head span {
  padding: 0.6rem 0.9rem 0.6rem 0;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.ledger-day {
  padding: 1.1rem 0.9rem 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
  align-self: stretch;
}
.ledger-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 1.1rem 0.9rem;
  border-bottom: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
.ledger-k {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}
.ledger-t {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  font-weight: 700;
  white-space: nowrap;
}
.ledger-cell.is-late .ledger-t,
.ledger-cell.is-late .ledger-k { color: var(--accent-text); }
/* The closed day: one cell across both service columns, on the
   lacquer tint so the gap in the week reads at a glance. --accent-text
   on --accent-tint measures 7.24:1, computed, not guessed. */
.ledger-cell.is-closed {
  grid-column: 2 / 4;
  background: var(--accent-tint);
}
.ledger-cell.is-closed .ledger-k { color: var(--accent-text); }
.ledger-cell.is-closed .ledger-t { color: var(--accent-text); }

.ledger-note {
  margin-top: 1.2rem;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
  max-width: 46rem;
}

@media (max-width: 719px) {
  .ledger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ledger-head span:first-child { display: none; }
  .ledger-head span { padding-inline-start: 0.9rem; }
  .ledger-day {
    grid-column: 1 / 3;
    padding: 0.9rem 0 0.35rem;
    border-bottom: 0;
  }
  .ledger-cell {
    padding: 0.7rem 0.9rem 0.9rem;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  .ledger-cell + .ledger-cell { border-inline-start: 1px solid var(--line); }
  .ledger-cell.is-closed { grid-column: 1 / 3; }
  .ledger-row:last-child .ledger-cell { border-bottom: 1px solid var(--line); }
  .ledger-t { font-size: 1.1rem; }
}

/* ---------- FAMILY 3: the dish trio ----------
   Three photographs, three cells: one tall on the left, two stacked
   on the right. Exactly as many cells as there are dishes. */

.trio {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(1rem, 0.7rem + 1.5vw, 1.6rem);
}
.trio figure { margin: 0; min-width: 0; }
.trio-main { grid-row: 1 / 3; }
.trio-main img {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--radius);
}
.trio-side img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
}
.trio figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
}
.trio-main { display: flex; flex-direction: column; }
.trio-main img { flex: 1 1 auto; }

@media (max-width: 719px) {
  .trio { grid-template-columns: 1fr; grid-template-rows: none; }
  .trio-main { grid-row: auto; }
  .trio-main img { aspect-ratio: 4 / 3; }
  .trio-side img { aspect-ratio: 3 / 2; }
}

/* ---------- FAMILY 4: the private-room statement ----------
   One figure that is in the data, set large, and the copy beside it.
   The budget guide sits inside the copy column on the paper card. */

.sec-rooms { background: var(--bg-3); border-block: 1px solid var(--line); }
.rooms-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
.rooms-figure {
  display: flex;
  flex-direction: column;
  padding-top: 0.4rem;
}
.rooms-num {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 9vw, 10rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent-text);
}
.rooms-unit {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 700;
  margin-top: 0.6rem;
}
.rooms-copy p { color: var(--muted); }
.rooms-copy h2 { color: var(--text); }
.guide {
  margin-top: 1.6rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 1rem + 1.2vw, 1.8rem);
}
.guide h3 { margin-bottom: 0.5rem; }
.guide p { color: var(--muted); font-size: 0.95rem; }
.guide-band {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.95rem + 1vw, 1.7rem);
  font-weight: 800;
  color: var(--accent-text);
  margin: 1rem 0 0.4rem;
}
/* The range is two halves, lunch and dinner. Each half is unbreakable,
   so when the column is too narrow for the whole line it breaks at the
   slash and never strands a 5,999 on its own row. */
.guide-half { display: inline-block; white-space: nowrap; }
.guide-note { font-size: 0.85rem; margin-bottom: 0; }

@media (max-width: 860px) {
  .rooms-grid { grid-template-columns: 1fr; gap: 1rem; }
  .rooms-figure { flex-direction: row; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
  .rooms-num { font-size: clamp(4rem, 2.5rem + 8vw, 6rem); }
  .rooms-unit { margin-top: 0; }
}

/* ---------- FAMILY 5: the arrival frame ----------
   Full bleed, and deliberately shown wider than the band so the far
   right strip of the source is clipped. The menu boards to the right
   of the doorway are texture at this size and nothing on them is
   transcribed. */

.frame-band { position: relative; overflow: hidden; }
.frame-band img {
  width: 116%;
  max-width: none;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 45% 66%;
}
.frame-note {
  max-width: var(--maxw);
  margin: 0.8rem auto 0;
  padding-inline: 20px;
  font-size: 0.82rem;
  color: var(--muted);
}
@media (max-width: 719px) {
  .frame-band img { aspect-ratio: 5 / 4; object-position: 40% 60%; }
}

/* ---------- FAMILY 6: the information list, two clusters ---------- */

.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.9fr);
  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: 6.5rem minmax(0, 1fr);
  gap: 0.3rem 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-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: 1000px) {
  .info-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .info-side { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-side { grid-column: auto; }
  .info-list li { grid-template-columns: 1fr; row-gap: 0.15rem; }
  .info-list + .info-list li:first-child { border-top: 0; }
}

/* ---------- 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);
  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 paper ground that is
   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(142, 31, 24, 0.07);
  border: 1px solid rgba(142, 31, 24, 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(47, 107, 67, 0.07);
  border: 1px solid rgba(47, 107, 67, 0.3);
}

.book-result { border-radius: var(--radius); margin-top: 1.2rem; }
/* OVERRIDE 3. booking.css paints this link with --accent; the id
   raises the specificity above booking.css's own selector. */
#book-result .tel-row a { color: var(--accent-text); }
.ref-note {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--muted);
}

/* The confirmation panel and the note that explains it belong under the
   form, not under the left-hand column. */
@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;
}

/* hero-h1-phone-cap: at phone widths the English headline ran to four lines. Two lines max is the rule;
   html[lang] lifts the specificity above the hero copy rules so this cap wins at 480px and below. */
@media (max-width: 480px) { html[lang] .hero h1 { font-size: clamp(1.45rem, 6.4vw, 1.85rem); line-height: 1.15; } }