/* ============================================================
   鉄板屋INOUE - 神戸・下山手通(東門街の路地)
   Lantern-in-the-alley theme. VARIANCE 7 / MOTION 3 / DENSITY 3
   Theme lock: dark, whole page. Accent lock: lantern cream.
   Radius lock: 4px everywhere.

   WHY THIS PALETTE. The shop is eleven seats in an alley off
   東門街, open until 5am, and the only thing that marks it from
   the street is a white lantern. So the ground is the sooty
   brown-black of a seasoned griddle and the single accent is the
   warm glow of that lantern. The accent is used the way the
   lantern is used: sparingly, as the thing you look for.

   Distinct from the project's other dark sites on both axes:
   01-tsubaki is warm charcoal with a VERMILION accent, 06-inoue
   (a different, unrelated business) is NEUTRAL black #111213 with
   a mid TAN #d9bd92, 12-bar-sky is blue-charcoal with silver,
   20-bar-konjo is asphalt grey with signal yellow. This ground is
   browner than all four (#221c15) and the accent is a pale glow
   cream (#f2dfae), lighter and yellower than 06's tan, carried by
   a radial lantern glow no other site uses.

   Contrast, computed from these hex values, not assumed:
   text #f0e8da on bg 13.97 / muted #b3a78f on bg 7.16, on bg-3
   5.87 / accent #f2dfae on bg 12.91 / ink #241a08 on accent 13.0.
   ============================================================ */

:root {
  --bg: #221c15;
  --bg-2: #2a231b;
  --bg-3: #332b21;
  --line: rgba(242, 231, 210, 0.14);
  --text: #f0e8da;
  --muted: #b3a78f;
  --accent: #f2dfae;
  --accent-hover: #f8ead0;
  --accent-ink: #241a08;
  --warn: #eda07d;
  --r: 4px;
  /* Sawarabi Gothic ships weight 400 ONLY (wght@700 returns HTTP 400 from the
     Fonts API, verified before writing this). It is drawn like the brush
     lettering on izakaya signs and chochin, which is literally this shop's
     one landmark. Every rule using it pins font-weight: 400. */
  --font-display: "Sawarabi Gothic", "Hiragino Sans", sans-serif;  /* de-dup 2026-09-13: Reggae One collided three ways (24/26/29); 26 keeps it. Sawarabi Gothic is plain and sturdy, which suits an eleven-seat alley counter that feeds people at three in the morning better than a shout face did. */
  /* Kaisei Opti ships 400/500/700 (verified; de-duped from Tokumin 2026-09-13). A mincho body suits a
     night spot the way it does on 08-kamakura, and the family is unused
     in this project (Opti is 03's display, HarunoUmi is 16's). */
  --font-body: "Kaisei Opti", "Hiragino Mincho ProN", serif;  /* de-duped from Kaisei Tokumin (kept by 23); Opti is the sibling face, 400/500/700 verified; role-reuse with 03 display */
  --nav-h: 62px;
}

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

/* ---------- Navigation: minimal rail (variant C) ----------
   The brand sits in its own ruled cell; the booking CTA is an
   underlined text link rather than 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(34, 28, 21, 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: 400;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  padding-right: 1.1rem;
  border-right: 1px solid var(--line);
  white-space: nowrap;
}
.nav-links {
  display: flex;
  gap: 1.4rem;
  font-size: 0.9rem;
}
.nav-links a { color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }

.lang { display: flex; gap: 0.2rem; margin-left: auto; font-size: 0.8rem; font-weight: 700; }
.lang a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  color: var(--muted);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { color: var(--text); border-color: var(--line); }

.nav-cta {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: 0.9rem; font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.nav-cta:hover { color: var(--accent-hover); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  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.25s, border-color 0.25s, color 0.25s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* ---------- Hero: copy under a lantern glow, then the alley strip ----------
   No photograph up top: this shop's job online is BEING FOUND, so the
   hero's visual is the route itself. */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(3rem, 8vh, 5rem)) 0 clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
}
.hero::before {
  /* The lantern: a warm radial glow behind the headline. Decorative,
     pointer-events none, cheap to paint. */
  content: "";
  position: absolute;
  top: -140px; right: 8%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(242, 223, 174, 0.16) 0%,
    rgba(242, 223, 174, 0.05) 45%,
    transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1.3rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  /* Floor lowered from 1.9rem: the second authored line is 12 CJK glyphs
     (たどり着けたら勝ちです。), which at 30.4px needs ~365px and wrapped,
     stranding a lone 「す。」 on a third line at phone widths. At 1.65rem
     (26.4px) it needs ~317px and fits the 360px content box. Verified by
     re-measuring: 2 lines at 360 and 390. */
  font-size: clamp(1.65rem, 5vw, 3.1rem);
  line-height: 1.4;
  letter-spacing: 0.03em;
  max-width: 17em;
  margin-bottom: 1.4rem;
}
.hero-sub {
  color: var(--muted);
  max-width: 36em;
  margin-bottom: 2rem;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* The alley strip: three ruled steps, the hero's visual. */
.alley {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.alley li {
  list-style: none;
  padding: 1.4rem 1.3rem 1.5rem;
  background: var(--bg-2);
}
.alley li + li { border-left: 1px solid var(--line); }
.alley .step-no {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}
.alley .step-t { font-weight: 700; font-size: 1.05rem; display: block; margin-bottom: 0.35rem; }
.alley .step-d { color: var(--muted); font-size: 0.9rem; line-height: 1.75; }

/* ---------- Sections ---------- */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.band { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.45;
  margin-bottom: 0.8rem;
}
.sec-head p { color: var(--muted); max-width: 40em; }

/* ---------- Dishes: a griddle board, names only ---------- */
.board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.board li {
  list-style: none;
  background: var(--bg);
  padding: 1.25rem 1.3rem;
}
.board .dish { font-weight: 700; font-size: 1.08rem; display: block; }
.board .dish-d { color: var(--muted); font-size: 0.88rem; }
.board li.feat { background: var(--bg-3); }
.board li.feat .dish { color: var(--accent); }
.menu-note { margin-top: 1.1rem; color: var(--muted); font-size: 0.85rem; }

/* ---------- Night facts: three plain columns ---------- */
.night-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.night-grid h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
  padding-top: 0.8rem;
  border-top: 2px solid var(--accent);
}
.night-grid p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Seats + access ---------- */
.access-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.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.12rem; font-weight: 500; }
.hours .hours-note { color: var(--muted); font-size: 0.88rem; font-weight: 400; margin-top: 0.2rem; }

.seat-plate {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 1.4rem 1.5rem;
  margin-top: 1.6rem;
}
.seat-plate .n {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--accent);
}
.seat-plate p { color: var(--muted); font-size: 0.92rem; }

.info-list { list-style: none; }
.info-list li { padding: 1rem 0; display: flex; flex-direction: column; gap: 0.15rem; }
.info-list li + li { border-top: 1px solid var(--line); }
.info-list .label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.info-actions { margin-top: 1.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Reserve: split (variant A) ---------- */
.reserve { background: var(--bg-2); border-top: 1px solid var(--line); }
.reserve-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.reserve-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 1rem;
}
.reserve-copy p { color: var(--muted); max-width: 34em; }
.reserve-alt { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.reserve-alt a { color: var(--accent); font-weight: 700; }

.form { display: grid; grid-template-columns: 1fr 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.05em; }
.field input,
.field select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 48px;
  padding: 0.7rem 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='%23b3a78f' 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);
}
/* Solid muted, not an alpha tint: tinted placeholders failed 4.5:1 on
   four earlier sites and had to be repaired. */
.field input::placeholder { color: var(--muted); }

.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); border-radius: var(--r); padding: 1rem 1.2rem; font-size: 0.95rem; }
.form-ok.show { display: block; }
.form .btn { grid-column: 1 / -1; justify-self: start; }

/* ---------- Footer: bordered strip (variant C) ---------- */
footer {
  border-top: 1px solid var(--line);
  border-bottom: 6px solid var(--bg-3);
  padding: 2.2rem 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.foot-strip {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.foot-brand { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--text); }
.foot-strip .addr { margin-right: auto; }
.foot-strip a { min-height: 44px; display: inline-flex; align-items: center; }
.foot-strip a:hover { color: var(--text); }
.demo-note { margin-top: 1.1rem; font-size: 0.8rem; }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s 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; }
}

/* ---------- Mobile (mobile-last max-width, so keep every later
   layout block scoped: an unscoped rule after this one silently
   killed 04-eyelit's collapse) ---------- */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .alley { grid-template-columns: 1fr; }
  .alley li + li { border-left: none; border-top: 1px solid var(--line); }
  .board { grid-template-columns: 1fr; }
  .night-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .access-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .nav .wrap { gap: 0.6rem; }
  .brand { font-size: 1.02rem; padding-right: 0.6rem; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.72rem; }
  .nav-cta { font-size: 0.8rem; }
  .hero-ctas .btn { width: 100%; }
}