/* ============================================================
   3pm TOKYO - 01-3pm-tokyo
   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 neighbourhood day-and-night counter in Kamiuma,
   Setagaya, for people who live ten minutes from it. Plywood and
   chalk, plainspoken. The clock is the hero: this shop opens at
   11:00 and closes at 04:00 the next morning, and no other venue
   in the set can say that. So the signature layout family is a
   horizontal DAY BAR, one rail per weekday group, with the evening
   segment visibly crossing the midnight tick and carrying on into
   the next day's zone.

   PALETTE, measured against WCAG 2.1 (ratios computed, not guessed):
     --text   #23201C on --bg #F6EFE3 ........ 14.19:1
     --muted  #5C554B on --bg ................  6.43:1
     --accent-text #A8410F on --bg ...........  5.36:1
     --accent #C8551E on --bg ................  3.85:1  <- FILLS ONLY.
              Never body text. Large bold only.
     --accent-ink #FFF8F0 on --accent ........  4.18:1  (.book-ref is
              28.8px bold = large text, threshold 3:1)
     --panel-ink #F2EDE4 on --panel #1E1C19 .. 14.58:1
     --panel-accent #E8873F on --panel .......  6.45:1
     --error  #9B2C1A on --bg ................  6.64:1  (on --bg-2 7.35:1)
     --success #2F6B43 on --bg ...............  5.56:1
   ============================================================ */

:root {
  /* Ground. The plywood fascia in g1, unbleached. */
  --bg: #F6EFE3;
  --bg-2: #FFFBF3;
  --bg-3: #EFE6D6;

  --text: #23201C;
  --muted: #5C554B;
  --line: #E0D6C5;

  /* The festoon-lamp orange. Fills, rules, the .book-ref chip and the
     after-midnight band. --accent-text is the same orange darkened
     until it can legally carry words. */
  --accent: #C8551E;
  --accent-text: #A8410F;
  --accent-ink: #FFF8F0;

  /* Used exactly once, on the late-night band. */
  --panel: #1E1C19;
  --panel-ink: #F2EDE4;
  --panel-accent: #E8873F;

  --error: #9B2C1A;
  --success: #2F6B43;

  /* One radius system, three steps. */
  --radius: 10px;
  --radius-sm: 6px;
  --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, and every clock time) come from the grotesque, while
     ideographs fall through to the CJK face behind it. The chalk is in
     the photograph, not in the typeface: no script, no marker font. */
  --font-display: "Archivo", "M PLUS 1", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-body: "M PLUS 1", "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 1 covers a large ideograph range and
   would otherwise render Chinese and Korean in Japanese glyph shapes,
   which is the typographic version of a machine translation. */
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 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 plainspoken shop wants a small lift and a short settle. */
  --ds-lift: 2px;
  --ds-dur: 0.24s;

  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, not tidiness. Every <img> on this page
   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. Without this line every banded photograph
   rendered at its full 1200px height and none of the crops applied,
   including the one on g5 that keeps recognisable faces out of shot. */
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. */
.t, .day-hours, .rail-legend, .info-list, .hours-inline, .fact-v {
  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.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  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(14px); }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity 0.5s var(--ease), transform 0.5s 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(246, 239, 227, 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.15rem;
  letter-spacing: -0.02em;
  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: 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: 1rem; }
  .nav .wrap { gap: 0.4rem; padding-inline: 14px; }
}

/* ---------- FAMILY 1: hero band ----------
   Asymmetric: the copy sits on the paper ground at the left, the
   photograph bleeds to the right viewport edge. g4 is 3:2 and the
   band is built so the burger is never cropped through. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  min-height: calc(100dvh - var(--nav-h));
  padding-block: clamp(2rem, 1rem + 4vw, 4rem);
  padding-inline-start: max(20px, calc((100vw - var(--maxw)) / 2 + 20px));
  padding-inline-end: 0;
}
.hero-copy { max-width: 34rem; }
.hero h1 {
  /* Measured at 1280 and at 390: two lines in all four languages, with
     the manual <br> as the only break. 3.7rem put the Japanese onto a
     third line inside a 34rem column. */
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
  margin-bottom: 1rem;
}
.hero-sub {
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
  color: var(--muted);
  max-width: 27rem;
  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: without a clipping frame the
   scaled image pushed the document 9px wider than the window at 1280.
   The drift now happens inside the frame, which is what it was for. */
.hero-media { align-self: stretch; display: flex; overflow: hidden; }
.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: 50% 52%;
  border-start-start-radius: var(--radius);
  border-end-start-radius: var(--radius);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 1.6rem;
    padding-inline: 0;
    padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 4rem);
  }
  .hero-media { order: -1; }
  .hero-media img {
    aspect-ratio: 3 / 2;
    height: auto;
    min-height: 0;
    border-radius: 0;
  }
  .hero-copy {
    max-width: none;
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: 20px;
  }
}

/* ---------- FAMILY 2: THE DAY BAR ----------
   One rail per weekday group, 11:00 on the left to 05:00 the next
   morning on the right (an 18 hour domain), so the evening segment
   physically crosses the midnight tick and keeps going. The rail 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); }

.daybar { margin-top: 0.5rem; }

.rotation { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }

.day-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 1.1rem;
  row-gap: 0.35rem;
  align-items: center;
}
.day-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  margin: 0;
}
.day-hours {
  grid-column: 2;
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
/* A clock time must never break across two lines. At 390px the hours line
   wraps between the two sessions instead, which is where it should. */
.ses { white-space: nowrap; }
.day-row.is-closed .day-hours { color: var(--accent-text); font-weight: 700; }

.rail {
  position: relative;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--bg-3);
  overflow: hidden;
}
.day-row.is-closed .rail { background: transparent; border-style: dashed; }

/* The filled trading segments. --from and --to are percentages of the
   rail's domain, which runs 11:00 to 04:00 the next morning, 17 hours,
   and is written on the element as data rather than as design. The domain
   is the trading envelope exactly, so no rail ends in a dead grey tail
   that could be mistaken for another session. */
.rail-seg {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--from) * 1%);
  width: calc((var(--to) - var(--from)) * 1%);
  background: var(--accent);
  z-index: 1;
}
/* The after-midnight zone, laid OVER the segment so the part of the
   evening that belongs to the next morning reads darker. This is the
   whole argument of the section in one shape. */
.rail-night {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 76.47%;
  inset-inline-end: 0;
  background: rgba(30, 28, 25, 0.17);
  z-index: 2;
}
.rail-mid {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 76.47%;
  width: 2px;
  background: rgba(35, 32, 28, 0.42);
  z-index: 3;
}

/* The wipe. Justification: the page argues that the day runs without
   a break from lunch into the small hours, and a segment that draws
   itself from left to right is that argument, not decoration.
   It rides the shared .in hook, so there is no second animation
   system: motion.js, media.js and site.js all add .in, and the
   4 second failsafe in motion.js adds it to everything regardless. */
@media (prefers-reduced-motion: no-preference) {
  .rv .rail-seg {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
  }
  .rv.in .rail-seg { transform: none; }
  .rotation li:nth-child(2) .rail-seg { transition-delay: 0.05s; }
  .rotation li:nth-child(3) .rail-seg { transition-delay: 0.1s; }
}

.rail-legend {
  position: relative;
  height: 1.5rem;
  margin: 1rem 0 0 7.6rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--muted);
}
.rail-legend span {
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--at) * 1%);
  transform: translateX(-50%);
  white-space: nowrap;
}
.rail-legend span:first-child { transform: none; }
.rail-legend span:last-child { transform: translateX(-100%); }

/* At phone width the rail rotates: same geometry, same percentages,
   read top to bottom instead of left to right. */
@media (max-width: 719px) {
  .daybar {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0.4rem;
    align-items: start;
  }
  .rotation {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .day-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  .rail {
    order: 1;
    height: 250px;
    width: 22px;
    flex: none;
  }
  .day-name { order: 2; }
  .day-hours { order: 3; font-size: 0.8rem; line-height: 1.6; }
  .rail-seg {
    inset-inline: 0;
    width: auto;
    inset-block-start: calc(var(--from) * 1%);
    inset-block-end: auto;
    height: calc((var(--to) - var(--from)) * 1%);
  }
  .rail-night {
    inset-inline: 0;
    inset-block-start: 76.47%;
    inset-block-end: 0;
  }
  .rail-mid {
    inset-inline: 0;
    inset-block-start: 76.47%;
    inset-block-end: auto;
    width: auto;
    height: 2px;
  }
  @media (prefers-reduced-motion: no-preference) {
    .rv .rail-seg { transform: scaleY(0); transform-origin: center top; }
  }
  .rail-legend {
    grid-column: 1;
    grid-row: 1;
    height: 250px;
    margin: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 0.68rem;
  }
  .rail-legend span {
    inset-inline-start: auto;
    inset-inline-end: 0;
    top: calc(var(--at) * 1%);
    transform: translateY(-50%);
    text-align: end;
  }
  .rail-legend span:first-child { transform: none; }
  .rail-legend span:last-child { transform: translateY(-100%); }
}

/* ---------- FAMILY 3: the late-night band ----------
   The one inverted panel on this page, used once, for the one thing
   this shop has that the others do not: a session that ends after
   sunrise-adjacent hours and therefore a booking convention that has
   to be spelled out. On the panel the accent lifts to #E8873F. */

.panel-band { padding-block: clamp(2rem, 1rem + 3vw, 3.5rem); }
.panel {
  --accent: var(--panel-accent);
  --accent-text: var(--panel-accent);
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1rem + 3vw, 3rem);
}
/* em, not ch: the ch unit is the width of "0", about half an em in a
   CJK face, so 20ch broke the Japanese heading after ten characters. */
.panel h2 { color: var(--panel-ink); max-width: 20em; }
.panel-lede { color: var(--panel-ink); opacity: 0.86; max-width: 46rem; }
.panel-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: 52rem;
}
.panel-list li {
  padding-inline-start: 1.1rem;
  border-inline-start: 2px solid var(--panel-accent);
  color: var(--panel-ink);
  opacity: 0.92;
  font-size: 0.97rem;
}
.panel-list b { color: var(--panel-accent); font-weight: 700; }

/* ---------- FAMILY 4: the arrival frame ----------
   Full bleed, and deliberately wide. The A-board at the left of this
   frame carries a legible price list; it is kept at a size where the
   board is texture and it is never transcribed. */

.frame-band { position: relative; }
.frame-band img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 34%;
}
.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) {
  /* 4/3 is this photograph's own ratio, so the phone gets the whole frame
     uncropped, at the smallest scale on the page. */
  .frame-band img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
}

/* ---------- FAMILY 5: the two-up ----------
   One photograph and one plainspoken card. They stagger because two
   blocks arriving together read as one block and lose the pairing. */

.taste-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 0.8rem + 2vw, 2.4rem);
  /* The photograph is a 3:4 portrait and the card is short. Centring the
     card against it balances the pair instead of hanging it from the top
     of a 676px column. */
  align-items: center;
}
.pair-fig { margin: 0; }
.pair-fig img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  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-band {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 800;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin: 1.2rem 0 0.4rem;
}
.guide-note { font-size: 0.85rem; color: var(--muted); margin-bottom: 0; }

@media (max-width: 719px) {
  .taste-grid { grid-template-columns: 1fr; }
  .pair-fig img { aspect-ratio: 4 / 5; }
}

/* ---------- FAMILY 6: the counter band ---------- */

.counter-band img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Cropped low on purpose, and verified by looking at the rendered band:
     every recognisable face in this photograph sits in the upper third of
     it, and at this crop the frame holds the counter, a glass and two
     torsos with no face in shot at all.
     The source is only 675px wide, so a full-bleed band upscales it about
     1.9x and it is soft. That is a limit of the one counter frame that
     exists, not a processing choice; it is the first photograph to replace
     when the owner supplies their own. */
  object-position: 50% 80%;
}
@media (max-width: 719px) {
  .counter-band img { aspect-ratio: 4 / 3; }
}

/* ---------- FAMILY 7: 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-actions { margin-top: 1.4rem; }
.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 8: 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%;
}
/* The select keeps its native arrow on purpose. Stripping the
   appearance to match the paper ground exactly would remove the one
   affordance that says "this opens". */
.field .hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}
/* booking.css styles .form textarea already; it reads --bg-3 and --line
   from here, so only the radius needs saying. */
.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
   measures 1.82:1 and the one string a guest must be able to 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(155, 44, 26, 0.07);
  border: 1px solid rgba(155, 44, 26, 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, which is a
   fill colour here and measures 4.26:1 at this size. 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, which is where a plain two-column
   grid puts the third and fourth children. */
@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;
}