/* ============================================================
   欧風料理 もん - est. 1936, Kitanagasa-dori
   White-tablecloth yoshoku: cool porcelain grey ground, graphite
   ink, ONE bordeaux accent like a glass of red on starched linen.
   Deliberately unlike 23-takahama (warm washi + brick red), 07
   (warm white + tomato), 19/27 (dark plum grounds + amber): this
   is the only COOL light ground with a wine accent in the set.
   Display: Kaisei Decol 400/500/700 (Taisho-romantic mincho, fits
   a 1936 Western-food house; weights verified against the Fonts
   API). Body: Zen Kaku Gothic New, shared with 02/13 by design:
   multi-weight JP gothics on Google Fonts are nearly exhausted,
   and gestalt (porcelain/bordeaux/Decol) shares nothing with
   either site. Radius 0: starched linen is sharp.
   VARIANCE 6 / MOTION 2 / DENSITY 3. Wrap 1150px.
   Contrast, computed before writing (worst pairing 5.55):
   ink/bg 13.23, muted/bg 6.04, accent-as-text/bg 8.50,
   cream-on-accent 8.54, warn/bg 7.01.
   ============================================================ 
   de-dup 2026-09-13: same-role font collision fix (verification pass, batch 31-50): now Shippori Mincho (role-reuse; 08 uses it as body). Kaisei Decol stays on 18-roiroi (first user). */

:root {
  --bg: #eff0ed;
  --bg-2: #e5e7e2;
  --bg-3: #dbded7;
  --line: rgba(36, 38, 43, 0.16);
  --text: #24262b;
  --muted: #565a63;
  --accent: #7c2434;
  --accent-ink: #f7eef0;
  --warn: #8c3418;
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 66px;
}

* { 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.9;
  -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: 1150px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* ---------- Navigation: single rail, brand set off by a rule ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(239, 240, 237, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { width: 100%; display: flex; align-items: center; gap: 1.4rem; }
.brand {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.45rem; letter-spacing: 0.14em;
  white-space: nowrap;
  padding-right: 1.4rem; border-right: 1px solid var(--line);
}
.brand small {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: 0.6rem; letter-spacing: 0.3em; color: var(--muted);
}
.nav-links { display: flex; gap: 1.5rem; font-size: 0.92rem; font-weight: 500; }
.nav-links a { color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  margin-left: auto; white-space: nowrap;
  font-weight: 700; color: var(--accent);
  text-decoration: underline; text-underline-offset: 4px;
  min-height: 44px; display: inline-flex; align-items: center;
}

/* Language switcher (lang.css supplies .langsw) sits before the CTA */
.nav .langsw { margin-left: auto; }
.nav .langsw ~ .nav-cta { margin-left: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.9rem 1.8rem; min-height: 48px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700;
  white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  border-radius: 0;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #6a1e2c; }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* ---------- Hero: era statement beside the cutlet ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: calc(var(--nav-h) + 2rem) 0 3rem;
}
.hero-copy { padding-left: clamp(1.25rem, calc((100vw - 1150px) / 2 + 3rem), 50vw); padding-right: 0.5rem; }
.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.24em;
  color: var(--accent); margin-bottom: 1.3rem;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.35; letter-spacing: 0.03em; margin-bottom: 1.4rem;
}
.hero-sub { color: var(--muted); max-width: 30em; margin-bottom: 2.2rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-media { padding-right: clamp(1.25rem, 3vw, 3rem); }

/* ---------- Sections ---------- */

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.7rem, 3.2vw, 2.4rem); line-height: 1.4;
}
.sec-head p { color: var(--muted); max-width: 40em; margin-top: 0.8rem; }

/* ---------- Signature dish ---------- */

.dish {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  background: var(--bg-2);
  border-top: 3px solid var(--accent);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.dish h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.6rem;
}
.dish .price {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; color: var(--accent); margin: 0.6rem 0 1rem;
}
.dish p { color: var(--muted); }
.dish-note { margin-top: 1.2rem; font-size: 0.85rem; color: var(--muted); }

/* ---------- The four floors: a ledger, not cards ---------- */

.floors { list-style: none; border-top: 1px solid var(--line); }
.floors li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 1.25rem; align-items: baseline;
  padding: 1.3rem 0.25rem;
  border-bottom: 1px solid var(--line);
}
.floors .fl {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; color: var(--accent);
}
.floors .what { font-weight: 500; }
.floors .what small { display: block; color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.floors .cap { color: var(--muted); font-size: 0.95rem; white-space: nowrap; }
.floors-total {
  margin-top: 1.1rem; text-align: right;
  font-family: var(--font-display); font-size: 1.1rem;
}
.floors-total b { font-size: 1.6rem; color: var(--accent); font-weight: 700; }

/* ---------- Hours / access ---------- */

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.hours dt {
  font-weight: 700; margin-top: 1.3rem; color: var(--accent);
  font-size: 0.85rem; letter-spacing: 0.1em;
}
.hours dt:first-child { margin-top: 0; }
.hours dd { font-size: 1.15rem; font-weight: 500; }
.info-list { list-style: none; }
.info-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.info-list li:first-child { border-top: 1px solid var(--line); }
.info-list .label {
  display: block; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--muted);
}
.info-list a.link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.info-actions { margin-top: 1.6rem; }

/* ---------- Reservation: full-width band ---------- */

.reserve { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reserve-head { max-width: 46em; margin-bottom: 2rem; }
.reserve-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 0.8rem; }
.reserve-head p { color: var(--muted); }
.form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; }
.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; min-height: 48px;
  border-radius: 0; 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='%23565a63' 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: var(--muted); opacity: 1; }
.form-error { grid-column: 1 / -1; display: none; color: var(--warn); font-weight: 500; }
.form-error.show { display: block; }
.form-ok {
  grid-column: 1 / -1; display: none;
  background: var(--bg); border: 1px solid var(--line);
  padding: 1rem 1.2rem;
}
.form-ok.show { display: block; }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.reserve-alt { margin-top: 1.6rem; font-size: 0.92rem; color: var(--muted); }
.reserve-alt a { color: var(--accent); font-weight: 700; text-decoration: underline; }

/* ---------- Footer ---------- */

footer {
  padding: 2.8rem 0 3.2rem;
  color: var(--muted); font-size: 0.88rem;
}
.foot-grid { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.foot-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); margin-bottom: 0.3rem; }
.demo-note { margin-top: 1.5rem; font-size: 0.8rem; }

/* ---------- Mobile (mobile-first would be cleaner; these are
     max-width overrides, all placed AFTER the base rules and with
     nothing appended after them, per the 04-eyelit cascade lesson) */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 2rem; }
  .hero-copy { padding: 0 clamp(1.25rem, 4vw, 3rem); }
  .hero-media { padding: 0 clamp(1.25rem, 4vw, 3rem); }
  .dish { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

@media (max-width: 430px) {
  .nav .wrap { gap: 0.6rem; }
  .brand { font-size: 1.15rem; padding-right: 0.8rem; }
  .nav-cta { font-size: 0.85rem; }
  .floors li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .floors .cap { grid-column: 2; white-space: normal; }
  .hero-ctas .btn { width: 100%; }
}

/* THE LANGUAGE LINKS HAD COLLAPSED INTO ONE UNSEGMENTED STRING (日本語ENES,
   24px tall) because this stylesheet's .lang links carry no padding or
   minimum height. Verified by screenshot at 390px. 44px targets restored,
   with visible separation, and a compact header for small phones. */
.lang { gap: 0.3rem; }
.lang a { padding: 0.3rem 0.55rem; min-height: 44px; display: inline-flex;
  align-items: center; }
@media (max-width: 430px) {
  .nav .wrap { gap: 0.45rem; }
  .nav .btn { padding: 0.45rem 0.65rem; font-size: 0.76rem; min-width: 0; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.72rem; }
  .brand { font-size: 1rem; }
}