/* ============================================================
   Cafe&Bar DINGO - basement cafe and bar behind Nankinmachi.
   Brick-cellar theme: warm dark brick ground, verdigris (aged
   copper) accent. VARIANCE 6 / MOTION 3 / DENSITY 3.
   Theme lock: dark. Accent lock: verdigris #5fae9a only.
   Radius lock: 9px. Wrap 1100px.
   Display: Kaisei Decol (400/700 verified on the Fonts API).
   Body: IBM Plex Sans JP. Reused from site 09 deliberately: the
   JA-capable multi-weight catalogue is nearly exhausted, and the
   two sites share no palette, radius or layout.
   Contrast, computed before writing: text/bg 14.63, muted/bg 8.93,
   muted/bg-2 7.78, accent-as-text 6.69, ink-on-accent 6.26. All AA.
   ============================================================ 
   de-dup 2026-09-13: same-role font collision fix (verification pass, batch 31-50): now Noto Serif JP (role-reuse; 05 uses it as body). Kaisei Decol stays on 18-roiroi. */
:root {
  --bg: #26150f; --bg-2: #33211a; --bg-3: #3e2a21;
  --line: rgba(242, 233, 224, 0.14);
  --text: #f2e9e0; --muted: #c7b6a8;
  --accent: #5fae9a; --accent-ink: #0f231e; --warn: #e8a27c;
  --font-display: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-body: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 66px; --r: 9px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.85; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.75rem); }

/* Nav: minimal rail. Brand divided off by a rule; the booking CTA is an
   underlined text link, not a filled button. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--nav-h);
  display: flex; align-items: center; background: rgba(38, 21, 15, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); }
.nav .wrap { width: 100%; display: flex; align-items: center; gap: 1.1rem; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.14em; white-space: nowrap; padding-right: 1.1rem;
  border-right: 1px solid var(--line); }
.nav-links { display: flex; gap: 1.4rem; font-size: 0.9rem; font-weight: 500; }
.nav-links a { color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.lang { display: flex; gap: 0.3rem; margin-left: auto; font-size: 0.78rem; font-weight: 700; }
.lang a { padding: 0.35rem 0.5rem; min-height: 44px; display: inline-flex; align-items: center;
  color: var(--muted); border: 1px solid transparent; white-space: nowrap; }
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { color: var(--text); border-color: var(--line); }
.nav-cta { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
  font-weight: 700; font-size: 0.9rem; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.8rem 1.7rem; font-family: var(--font-body); font-size: 1rem;
  font-weight: 700; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  border-radius: var(--r); transition: transform 0.15s, background 0.2s, border-color 0.2s; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #6fbfab; }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* Hero: copy left, basement-door slot right. */
.hero { min-height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 2.5rem) clamp(1.25rem, 4vw, 3rem) 2.5rem
           clamp(1.25rem, 5vw, 4.5rem); }
.eyebrow { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--accent); margin-bottom: 1.3rem; }
.hero h1 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.35; margin-bottom: 1.4rem; }
.hero-sub { color: var(--muted); max-width: 32em; margin-bottom: 2.1rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-media { border-left: 1px solid var(--line); display: flex; }
.hero-media > * { flex: 1; }

section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-head { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); }
.sec-head h2 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.3rem); line-height: 1.35; }
.sec-head p { color: var(--muted); max-width: 40em; margin-top: 0.85rem; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.menu-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.note { margin-top: 1.2rem; color: var(--muted); font-size: 0.88rem; }

.steps { list-style: none; counter-reset: s; max-width: 34em; }
.steps li { counter-increment: s; position: relative; padding: 0.9rem 0 0.9rem 3.2rem;
  border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0.85rem;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 1px solid var(--accent); border-radius: var(--r);
  color: var(--accent); font-weight: 700; }

.hours { max-width: 30em; }
.hours dt { font-weight: 700; margin-top: 1.3rem; color: var(--accent);
  font-size: 0.84rem; letter-spacing: 0.1em; }
.hours dt:first-child { margin-top: 0; }
.hours dd { font-size: 1.12rem; font-weight: 500; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.info-list { list-style: none; }
.info-list li { padding: 1rem 0; display: flex; flex-direction: column; gap: 0.15rem;
  border-bottom: 1px solid var(--line); }
.info-list .label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--muted); }
.info-list a.link { color: var(--accent); font-weight: 700; min-height: 44px;
  display: inline-flex; align-items: center; }
.info-list a.link:hover { text-decoration: underline; }
.info-actions { margin-top: 1.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Reserve: full-width band, copy above a three-column form. */
.reserve { background: var(--bg-2); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.reserve-copy { max-width: 44em; margin-bottom: 2rem; }
.reserve-copy h2 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.65rem, 3vw, 2.3rem); margin-bottom: 0.9rem; }
.reserve-copy p { color: var(--muted); }
.reserve-alt { margin-top: 1.3rem; font-size: 0.9rem; color: var(--muted); }
.reserve-alt a { color: var(--accent); font-weight: 700; }
.form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.05em; }
.field input, .field select { background: var(--bg); border: 1px solid var(--line);
  color: var(--text); font-family: var(--font-body); font-size: 1rem;
  padding: 0.85rem 1rem; border-radius: var(--r); appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c7b6a8' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.field input:focus, .field select:focus { outline: 2px solid var(--accent);
  outline-offset: 0; border-color: var(--accent); }
.field input::placeholder { color: rgba(199, 182, 168, 0.85); }
.form-error { grid-column: 1 / -1; display: none; color: var(--warn);
  font-size: 0.9rem; font-weight: 500; }
.form-error.show { display: block; }
.form-ok { grid-column: 1 / -1; display: none; color: var(--text);
  background: var(--bg-3); border: 1px solid var(--line); padding: 1rem 1.2rem;
  border-radius: var(--r); font-size: 0.95rem; }
.form-ok.show { display: block; }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.form-hint { grid-column: 1 / -1; color: var(--muted); font-size: 0.85rem; }

/* Footer: centred stack. */
footer { padding: 3rem 0 3.5rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.88rem; text-align: center; }
.foot-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--text); margin-bottom: 0.4rem; }
.foot-links { display: flex; gap: 1.5rem; justify-content: center; margin-top: 0.9rem; }
.foot-links a:hover { color: var(--text); }
.demo-note { margin-top: 1.5rem; font-size: 0.8rem; }

.rv { opacity: 0; transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .lang a, .nav-links a { transition: none; }
}

/* Mobile collapses live in a max-width block that nothing later overrides:
   every appended rule below this point must be min-width scoped (the
   04-eyelit cascade lesson). */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-top: calc(var(--nav-h) + 2.25rem); }
  .hero-media { border-left: none; border-top: 1px solid var(--line);
    min-height: 44vh; }
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .menu-slots { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .nav .wrap { gap: 0.55rem; }
  .brand { font-size: 1.05rem; padding-right: 0.6rem; }
  .lang { gap: 0.1rem; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.7rem; }
  .nav-cta { font-size: 0.8rem; }
  .hero-ctas .btn { width: 100%; }
}

/* THE NAV BOOKING BUTTON OVERFLOWED THE VIEWPORT ON SMALL PHONES.
   Measured at a 390px viewport: the CTA's right edge sat at 401px (brand to
   103, languages 112 to 218, CTA 227 to 401). The nav is fixed, so the
   document reports no overflow and every scroll-width check passes while the
   primary conversion control is partly off-screen: the same defect class
   found on 11 of 15 earlier sites. Compact header below 430px fixes it.
   This is a max-width block placed at the END of the file, which is safe:
   the earlier cascade trap was an UNSCOPED rule after a mobile query, not a
   scoped one. */
@media (max-width: 430px) {
  .nav .wrap { gap: 0.5rem; }
  .nav .btn { padding: 0.45rem 0.7rem; font-size: 0.78rem; min-width: 0; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.7rem; }
  .brand { font-size: 1.05rem; }
}