/* ============================================================
   D.P.S. 西麻布店 - 12-dps-nishiazabu
   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 late-night karaoke bar on the fifth floor of a
   Nishi-Azabu building, for groups planning a night out. The bar
   in the photographs is black lacquer with a counter lit from
   below and a shelf of whisky backlit in cold white, with blue
   screens above it. The page is one dark theme end to end: the
   ground is the lacquer, the one accent is the ice blue of that
   backlit glass. The signature component is the NIGHT RAIL: one
   rail from 19:00 to 05:00 the next morning with midnight at its
   centre, because the venue's whole argument is that the night
   does not stop at twelve.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text   #ECEEF1 on --bg #0F1114 ........ 16.6:1
     --muted  #A9B0BA on --bg ................  8.6:1
     --accent #8ED1F2 on --bg ................ 11.1:1  (text and fills)
     --accent-ink #0B1218 on --accent ........ 11.0:1
     --error  #FFA394 on --bg ................  8.1:1
     --success #96DBAE on --bg ............... 11.4:1
     --muted on --bg-2 #15181D ...............  7.9:1
   ============================================================ */

:root {
  /* Ground. The lacquer of the counter in h01, never pure black. */
  --bg: #0F1114;
  --bg-2: #15181D;
  --bg-3: #1C2027;

  --text: #ECEEF1;
  --muted: #A9B0BA;
  --line: #2A2F38;

  /* The one accent: the ice blue of the backlit shelf. Used the same
     way everywhere: fills, the rail, links, the current language. */
  --accent: #8ED1F2;
  --accent-text: #8ED1F2;
  --accent-ink: #0B1218;

  --error: #FFA394;
  --success: #96DBAE;

  /* One radius system, three steps. Lacquer edges are tight. */
  --radius: 8px;
  --radius-sm: 5px;
  --radius-xs: 2px;

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

  /* TYPE. Outfit leads the display stack so the Latin mark (D.P.S.)
     and every clock time come from the geometric sans, while
     ideographs fall through to M PLUS 1p behind it. */
  --font-display: "Outfit", "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-body: "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}

/* The per-language families REPLACE the Japanese ones rather than
   sitting behind them. M PLUS 1p covers a large ideograph range and
   would otherwise render Chinese and Korean in Japanese glyph shapes. */
html[lang="en"] {
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
html[lang="zh-Hant"] {
  --font-display: "Outfit", "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: "Outfit", "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%;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  /* The per-site motion dials ds.css reads. On body rather than :root
     because ds.css loads AFTER this file and redeclares both on :root.
     Motion dial 5: a modest lift and a medium settle. */
  --ds-lift: 3px;
  --ds-dur: 0.28s;

  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: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  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: 600; }
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 would
   otherwise win over aspect-ratio and every crop below. */
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. */
.night-hours, .night-ticks, .info-list, .fact-tile, .ses {
  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; }

/* ---------- 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. With scripting off, the <noscript> block turns it off. */
.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: 600;
  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(--text); border-color: var(--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-3); }

.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(15, 17, 20, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  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: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.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;
}
.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: 600;
  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; }
  .lang { margin-inline-start: auto; }
}
@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: 1rem; }
  .nav .wrap { gap: 0.4rem; padding-inline: 14px; }
}

/* ---------- FAMILY 1: full-bleed hero ----------
   h01 fills the band, a scrim darkens the lower left, and the copy sits
   at the bottom of the frame like a caption on a screen. overflow:hidden
   is load-bearing: motion.js puts a scale(1.06 to 1.0) drift on
   `.hero img` and without a clipping frame the scaled image would push
   the document wider than the viewport. */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 55%;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(15, 17, 20, 0.96) 0%, rgba(15, 17, 20, 0.72) 38%, rgba(15, 17, 20, 0.18) 70%, rgba(15, 17, 20, 0.05) 100%),
    linear-gradient(to right, rgba(15, 17, 20, 0.55) 0%, rgba(15, 17, 20, 0.05) 60%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 20px clamp(2.4rem, 1.6rem + 3vw, 4rem);
}
.hero h1 {
  /* Two lines in all four languages with the manual <br> as the only
     break: 11 ideographs on the longer Japanese line at 3.5rem = 616px,
     inside a 46rem column. At 390 the minimum is 1.9rem so the same line
     is 334px inside 350px. */
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.5rem);
  max-width: 46rem;
  margin-bottom: 1rem;
  color: var(--text);
}
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: var(--text);
  opacity: 0.86;
  max-width: 30rem;
  margin-bottom: 1.6rem;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero .btn-ghost {
  border-color: rgba(236, 238, 241, 0.45);
  background: rgba(15, 17, 20, 0.35);
}
.hero .btn-ghost:hover { background: rgba(15, 17, 20, 0.7); border-color: var(--text); }

@media (max-width: 719px) {
  .hero-img { object-position: 58% 50%; }
  .hero-copy { padding-inline: 20px; }
  .hero-sub { font-size: 0.98rem; }
}

/* ---------- FAMILY 2: THE NIGHT RAIL ----------
   One rail for the whole week, 19:00 on the left to 05:00 the next
   morning on the right (a ten hour domain), so midnight sits dead centre
   and the fill runs straight through it. The rail is aria-hidden: the
   hours are written out beside it, so a screen reader, a printout and a
   page with CSS off all get the fact rather than a picture of it. */

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

.night {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}
.night-rail {
  position: relative;
  height: 62px;
  margin-top: 0.4rem;
}
.night-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
}
.night-ticks li {
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--at) * 1%);
  transform: translateX(-50%);
  white-space: nowrap;
}
.night-ticks li:first-child { transform: none; }
.night-ticks li:last-child { transform: translateX(-100%); }
/* Midnight is the argument of the rail, so its tick reads in the accent. */
.night-ticks li:nth-child(4) { color: var(--accent-text); font-weight: 700; }

/* The fill. Ice blue at the door, fading toward the small hours: the
   same accent, less of it, never a second colour. */
.night-fill {
  position: absolute;
  inset-inline: 0;
  top: 2rem;
  height: 22px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--accent) 0%, rgba(142, 209, 242, 0.62) 50%, rgba(142, 209, 242, 0.28) 100%);
}
.night-mid {
  position: absolute;
  top: 1.7rem;
  inset-inline-start: 50%;
  width: 2px;
  height: calc(22px + 0.6rem);
  background: var(--text);
  transform: translateX(-50%);
}

/* The wipe. The page argues that the night runs without a break from
   the door to the small hours, and a fill that draws itself left to right
   is that argument. It rides the shared .in hook, so there is no second
   animation system. */
@media (prefers-reduced-motion: no-preference) {
  .rv .night-fill {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s var(--ease) 0.1s;
  }
  .rv.in .night-fill { transform: none; }
}

.night-text {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
}
.night-hours {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 700;
  color: var(--text);
}
.night-every { color: var(--accent-text); margin-inline-end: 0.35em; }
.ses { white-space: nowrap; }
/* The one fact worth large type: no closing day, all year. Seven day
   chips with nothing to distinguish them said the same thing seven times
   and wrapped 6+1 at phone width in Chinese, so the fact is said once. */
.night-open {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--accent-text);
}
html[lang="en"] .night-open { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); letter-spacing: -0.02em; }

@media (max-width: 719px) {
  .night-ticks li.tk-min { display: none; }
  .night-ticks { font-size: 0.72rem; }
}

/* The date rule. Not an inverted panel: the page is already dark, so
   this is a bordered field on the same ground, split into the statement
   and its three consequences. */
.rule {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 0.8rem + 2vw, 3rem);
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg);
}
.rule h3 { max-width: 20em; }
.rule-lede { color: var(--muted); margin-bottom: 0; }
.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.rule-list li {
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}
.rule b, .rule-list b { color: var(--accent-text); font-weight: 700; }

@media (max-width: 719px) {
  .rule { grid-template-columns: 1fr; }
}

/* ---------- FAMILY 3: the bottles band ----------
   Two portrait frames, edge to edge, uneven. The larger is the decanter
   shelf, the smaller the whisky shelf. Heights are fixed rather than
   ratio-driven so two 3:4 portraits do not make a 1000px band. */

.shelf { padding-block: clamp(3rem, 1.6rem + 5vw, 6rem) 0; }
.shelf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 6px;
}
.shelf-grid img {
  width: 100%;
  height: clamp(300px, 40vw, 560px);
  object-fit: cover;
}
.shelf-grid img:first-child { object-position: 50% 62%; }
.shelf-grid img:last-child { object-position: 50% 58%; }
.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) {
  .shelf-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4px; }
  .shelf-grid img { height: 260px; }
}

/* ---------- FAMILY 4: the lounge split ----------
   The one image-plus-text split on the page. */

.lounge-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.lounge-copy p { color: var(--muted); }
.ig-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.lounge-fig { margin: 0; }
.lounge-fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 55% 50%;
  border-radius: var(--radius);
}
@media (max-width: 860px) {
  .lounge-grid { grid-template-columns: 1fr; }
  .lounge-fig { order: -1; }
}

/* ---------- FAMILY 5: the street frame ----------
   Full bleed and wide. Cropped to the upper part on purpose: the cars at
   the crossing sit along the bottom of the frame. */

/* No top padding: the lounge section above already ends with its own
   block padding, and a second gap read as a hole in the page. */
.street-band { padding-block: 0; }
.street-band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 36%;
}
@media (max-width: 719px) {
  .street-band img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
}

/* ---------- FAMILY 6: the access bento ----------
   Three columns: the D.P.S. mark (the one captionable frame), the facts
   in the middle, and the door on the right. Exactly four cells for four
   things; the two photographs give the grid its variation. */

.access-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr) minmax(0, 0.8fr);
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  align-items: stretch;
}
.access-fig { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.access-fig img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.fig-mark img { object-position: 30% 50%; }
.fig-door img { object-position: 50% 50%; }
.access-fig figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.7;
}
.access-mid { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.fact-tile {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
}
.fact-big {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.fact-label { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }

.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.3rem 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.info-list .label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  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: auto; }

/* The price band: a per-person guide as Google Maps lists it, never a menu
   price. Same wording and disclaimer as 01. */
.price-guide {
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.price-guide h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.price-guide p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.guide-band {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 0.9rem 0 0.4rem;
}
.price-guide .guide-note { font-size: 0.85rem; }

@media (max-width: 960px) {
  .access-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .access-mid { grid-column: 1 / -1; grid-row: 1; }
  .access-fig img { min-height: 0; height: auto; aspect-ratio: 3 / 4; }
}
@media (max-width: 719px) {
  .info-list li { grid-template-columns: 1fr; row-gap: 0.1rem; }
  .access-grid { gap: 0.8rem; }
}

/* ---------- 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: 700;
  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: 600;
  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 select option, .field select optgroup { background: var(--bg-3); color: var(--text); }
.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 ground that is legible
   (6.6:1) but it is a second warm colour, so the page's own error tone
   is used instead. 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(255, 163, 148, 0.08);
  border: 1px solid rgba(255, 163, 148, 0.35);
  font-weight: 700;
}
.form-error a { color: var(--error); text-decoration: underline; text-underline-offset: 3px; }
.form-ok {
  color: var(--success);
  background: rgba(150, 219, 174, 0.08);
  border: 1px solid rgba(150, 219, 174, 0.35);
}

.book-result { border-radius: var(--radius); margin-top: 1.2rem; }
/* OVERRIDE 3. booking.css paints this link with --accent; here that is
   the same ice blue, which is legible, but the id keeps the rule
   explicit and 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: 700;
  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;
}