/* ============================================================
   大衆焼鳥 つばき - Taishu Yakitori Tsubaki
   Dark ember izakaya theme. VARIANCE 7 / MOTION 5 / DENSITY 4
   Theme lock: dark, whole page. Accent lock: ember vermillion.
   Radius lock: sharp (0) everywhere.
   ============================================================ */

:root {
  --bg: #14110c;
  --bg-2: #1c1812;
  --bg-3: #241f17;
  --line: rgba(240, 234, 223, 0.12);
  --text: #f0eadf;
  --muted: #bdb19d;
  --accent: #e2593a;
  --accent-deep: #b8432a;
  --accent-ink: #190f0a;
  --warn: #f0a08c;
  --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 68px;
}

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

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(20, 17, 12, 0.88);
  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: 2rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
}

.nav-links {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 500;
}

.nav-links a { color: var(--muted); transition: color 0.25s; }
.nav-links a:hover { color: var(--text); }

.lang {
  display: flex;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lang a {
  padding: 0.3rem 0.55rem;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] {
  color: var(--text);
  border-color: var(--line);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s, background 0.25s, border-color 0.25s;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: #ea6547; }

.btn-ghost {
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--muted); }

.nav .btn { padding: 0.55rem 1.15rem; font-size: 0.9rem; }

/* ---------- Hero ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 3rem) clamp(1.25rem, 5vw, 4.5rem) 3rem;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 1.4rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

.hero-sub {
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 2.2rem;
}

.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-media {
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
}

.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05) brightness(0.72) sepia(0.22);
}

.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(20,17,12,0.05) 40%, rgba(20,17,12,0.55));
  pointer-events: none;
}

.tategaki {
  position: absolute;
  top: 50%; right: clamp(1rem, 3vw, 2.5rem);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  letter-spacing: 0.28em;
  color: var(--text);
  text-shadow: 0 2px 18px rgba(20, 17, 12, 0.7);
  z-index: 2;
}

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

section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

.sec-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.3;
}

.sec-head p {
  color: var(--muted);
  max-width: 40em;
  margin-top: 0.9rem;
}

/* ---------- Menu ---------- */

.menu-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.menu-feature {
  position: relative;
  background: var(--bg-2);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.menu-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05) brightness(0.6) sepia(0.22);
}

.menu-feature-copy {
  position: relative;
  z-index: 2;
  padding: 2rem;
  background: linear-gradient(to top, rgba(20,17,12,0.92), rgba(20,17,12,0));
}

.menu-feature h3 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
}

.menu-feature .kana { color: var(--muted); font-size: 0.88rem; }

.menu-feature .price {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.25rem;
  margin-top: 0.4rem;
}

.menu-items {
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

.menu-item {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(240,234,223,0.07);
}
.menu-item:nth-child(-n+2) { border-top: none; }

.menu-item .name {
  font-weight: 700;
  font-size: 1.05rem;
}
.menu-item .kana {
  color: var(--muted);
  font-size: 0.78rem;
}
.menu-item .dots {
  flex: 1;
  border-bottom: 1px dotted rgba(240,234,223,0.25);
  transform: translateY(-4px);
}
.menu-item .price {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.happy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.1rem;
  margin-top: 2.5rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--accent);
  background: var(--bg-2);
}
.happy .hh-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent);
}
.happy .hh-price { font-weight: 700; font-size: 1.15rem; }
.happy .hh-when { color: var(--muted); font-size: 0.9rem; }

.menu-note {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Drinks: scroll-snap pills */

.drinks {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.drinks::-webkit-scrollbar { height: 4px; }
.drinks::-webkit-scrollbar-thumb { background: var(--line); }

.drink {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.8rem 1.3rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.drink .price { color: var(--accent); font-weight: 700; }

/* ---------- Atmosphere band ---------- */

.band {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.05) brightness(0.55) sepia(0.22);
}

.band-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  background: linear-gradient(to top, rgba(20,17,12,0.9) 30%, rgba(20,17,12,0));
}

.band-copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 0.9rem;
}

.band-copy p { color: var(--text); max-width: 38em; opacity: 0.92; }

/* ---------- Info / Access ---------- */

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.hours dt {
  font-weight: 700;
  margin-top: 1.4rem;
  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: 1.1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.info-list li + li { border-top: 1px solid rgba(240,234,223,0.07); }
.info-list .label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.info-list a.link {
  color: var(--accent);
  font-weight: 700;
}
.info-list a.link:hover { text-decoration: underline; }

.info-actions { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Reservation ---------- */

.reserve { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.reserve-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.reserve-copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 1rem;
}
.reserve-copy p { color: var(--muted); max-width: 34em; }

.reserve-alt {
  margin-top: 2rem;
  padding-top: 1.5rem;
  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.4rem;
}

.field { display: flex; flex-direction: column; gap: 0.5rem; }
.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;
  padding: 0.85rem 1rem;
  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='%23bdb19d' 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);
}

/* 0.78 alpha keeps the placeholder readable (about 5.5:1 on the input fill). */
.field input::placeholder { color: rgba(189, 177, 157, 0.78); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: #f0a08c;
  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;
  font-size: 0.95rem;
}
.form-ok.show { display: block; }

.form .btn { grid-column: 1 / -1; justify-self: start; }

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

footer {
  padding: 3rem 0 3.5rem;
  border-top: 1px solid var(--line);
  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: 800;
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.foot-links { display: flex; gap: 1.5rem; align-items: center; }
.foot-links a:hover { color: var(--text); }

.demo-note { margin-top: 1.6rem; font-size: 0.78rem; opacity: 0.65; }

/* ---------- Reveal on scroll ---------- */

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

@media (max-width: 900px) {
  .nav-links { display: none; }

  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-top: calc(var(--nav-h) + 2.5rem); min-height: auto; }
  .hero-media { min-height: 46vh; border-left: none; border-top: 1px solid var(--line); }
  .tategaki { font-size: 1.5rem; right: 1.25rem; }

  .menu-grid { grid-template-columns: 1fr; }
  .menu-feature { min-height: 320px; }
  .menu-items { grid-template-columns: 1fr; }
  .menu-item:nth-child(-n+2) { border-top: 1px solid rgba(240,234,223,0.07); }
  .menu-item:first-child { border-top: none; }

  .info-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .band { min-height: 52vh; }
}

@media (max-width: 520px) {
  .lang { font-size: 0.72rem; }
  .nav .wrap { gap: 0.9rem; }
  .hero-ctas .btn { width: 100%; }
}


/* ============================================================
   MOBILE HEADER REPAIR (2026-09-13)
   Found by rendering this site at a TRUE 390px viewport. Every
   code-level check passed: JSON-LD parsed, contrast computed,
   node --check clean. None of them can see that the shop's own
   name was breaking character by character in its own header
   (シ/ャ/ル/メ) and that 日本語 was stacking vertically in the
   language switcher.

   Appended last so it wins on source order without raising
   specificity, and uses no colour values, so nothing can regress.
   ============================================================ */

/* A shop's name must never break mid-word in its own header. */
.brand { white-space: nowrap; }

/* 日本語 is one word to a reader; it must not become 日/本/語. */
.lang a { white-space: nowrap; }

@media (max-width: 430px) {
  /* THE BOOKING BUTTON WAS RUNNING OFF THE SCREEN.
     Measured at a 358px viewport, the nav CTA's right edge sat between
     366px and 466px on eleven of fifteen sites. The nav is fixed and
     does not scroll, so the document reported no overflow and every
     automated check passed while the primary conversion control was
     partly invisible on a small phone.
     The header keeps brand, languages and the booking button; they just
     stop competing for room. */
  .nav .wrap { gap: 0.5rem; }
  .nav .btn {
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
    min-width: 0;
  }
  .lang { gap: 0.1rem; }
  .lang a { padding: 0.3rem 0.35rem; font-size: 0.68rem; }
  .brand { font-size: 1.05rem; letter-spacing: 0.04em; }
}