/* ============================================================
   炭焼酒場いのうえ 神戸北野坂店
   Black-and-tan late-night sakaba. VARIANCE 7 / MOTION 5 / DENSITY 4
   Theme lock: neutral off-black, whole page. Accent lock: warm tan.
   Radius lock: 6px everywhere.
   ============================================================ */

:root {
  --bg: #111213;
  --bg-2: #191a1c;
  --bg-3: #202124;
  --line: rgba(240, 237, 230, 0.12);
  --text: #f0ede6;
  --muted: #a8a49a;
  --accent: #d9bd92;
  --accent-hi: #e3cba6;
  --accent-ink: #171310;
  --warn: #eba695;
  --font-display: "Murecho", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "M PLUS 2", "Hiragino Kaku Gothic ProN", sans-serif;
  --r: 6px;
  --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: 1260px;
  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(17, 18, 19, 0.9);
  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: 900;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}

.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;
  border-radius: var(--r);
  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;
  border-radius: var(--r);
  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: var(--accent-hi); }

.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: full-bleed, content anchored low ---------- */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.15) brightness(0.6);
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,18,19,0.95) 18%, rgba(17,18,19,0.35) 62%, rgba(17,18,19,0.15));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}

.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: 900;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.18;
  letter-spacing: 0.01em;
  margin-bottom: 1.4rem;
}

.hero-sub {
  color: var(--text);
  opacity: 0.85;
  max-width: 36em;
  margin-bottom: 2.2rem;
}

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

/* ---------- 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: 900;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.3;
}
.sec-head p {
  color: var(--muted);
  max-width: 42em;
  margin-top: 0.9rem;
}

/* ---------- Four pillars: asymmetric image grid ---------- */

/* Exactly four cells, explicitly placed: one tall signature on the left and
   three stacked on the right, so the grid never leaves a hole. */
.pillars {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(3, 200px);
  gap: 1rem;
}

.pillar {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg-2);
  display: flex;
  align-items: flex-end;
}
.pillar:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.pillar:nth-child(2) { grid-column: 2; grid-row: 1; }
.pillar:nth-child(3) { grid-column: 2; grid-row: 2; }
.pillar:nth-child(4) { grid-column: 2; grid-row: 3; }

.pillar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.15) brightness(0.62);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pillar:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .pillar img { transition: none; }
  .pillar:hover img { transform: none; }
}

.pillar-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(17,18,19,0.92), rgba(17,18,19,0));
}
.pillar-copy h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
}
.pillar:nth-child(1) .pillar-copy h3 { font-size: 1.6rem; }
.pillar-copy p { color: var(--muted); font-size: 0.9rem; }

/* ---------- Banquet courses: featured + stack ---------- */

.courses {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1rem;
}

.course {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.course.feat {
  grid-row: span 2;
  background: var(--bg-3);
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  min-height: 420px;
}
.course.feat img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(1.15) brightness(0.5);
}
/* Scrim so the card text keeps its contrast over the brighter parts of the
   photo, not just the dark ones. */
.course.feat::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,18,19,0.94) 30%, rgba(17,18,19,0.45));
  pointer-events: none;
}
.course.feat > * { position: relative; z-index: 2; }

.course .flag {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--r);
  padding: 0.25rem 0.7rem;
}
.course h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.4;
}
.course .meta { color: var(--muted); font-size: 0.9rem; }
.course .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--accent);
}
.course .price small { font-size: 0.85rem; color: var(--muted); font-family: var(--font-body); font-weight: 500; }

.courses-cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.courses-note { color: var(--muted); font-size: 0.85rem; }

/* ---------- 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,237,230,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: 900;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 1rem;
}
.reserve-copy p { color: var(--muted); max-width: 36em; }

.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: 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='%23a8a49a' 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.8 alpha keeps the placeholder at 5.2:1 on the input background; 0.65 fell
   under the 4.5:1 minimum. */
.field input::placeholder { color: rgba(168, 164, 154, 0.8); }

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: #eba695;
  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 ---------- */

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: 900;
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}

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

/* No extra opacity here: dimming --muted further dropped this disclosure
   line under the 4.5:1 minimum. */
.demo-note { margin-top: 1.6rem; font-size: 0.8rem; }

/* ---------- 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 { min-height: 92dvh; }

  /* Single column: drop the explicit placement so the four cells just stack. */
  .pillars { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 230px; }
  .pillar:nth-child(1),
  .pillar:nth-child(2),
  .pillar:nth-child(3),
  .pillar:nth-child(4) { grid-column: 1; grid-row: auto; }
  .pillar:nth-child(1) { min-height: 280px; }

  .courses { grid-template-columns: 1fr; }
  .course.feat { grid-row: span 1; min-height: 340px; }

  .info-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}

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


/* ============================================================
   Chrome differentiation. Twelve sibling sites were sharing one
   nav, reservation block and footer, so two open tabs read as the
   same template. Variants are distributed so no two neighbouring
   sites repeat a combination.
   ============================================================ */

/* Chrome variant NAV-C: minimal rail. Brand is divided off by a rule, links sit
   left, language and a text-style CTA sit right. Heavier bottom border. */
.nav { border-bottom-width: 2px; }
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; }
.nav .brand { margin-right: 1.4rem; padding-right: 1.4rem; border-right: 1px solid var(--line); }
.nav-links { margin-left: 0; margin-right: auto; font-size: 0.86rem; letter-spacing: 0.07em; }
.nav .lang { order: 8; }
.nav .btn.btn-primary {
  background: none; color: var(--text); border: none; border-radius: 0;
  border-bottom: 2px solid var(--accent);
  padding-left: 0; padding-right: 0; order: 9;
}
.nav .btn.btn-primary:hover { background: none; color: var(--accent); }
@media (max-width: 900px) {
  .nav .brand { margin-right: auto; padding-right: 0; border-right: none; }
}

/* Chrome variant FOOT-B: everything centred in a single stacked block. */
.foot-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
.foot-links { justify-content: center; }
.demo-note { text-align: center; max-width: 62ch; margin-left: auto; margin-right: auto; }


/* Hero rebuilt. 05 and 06 shared one hero: full-bleed photo, content flexed to
   the bottom, same scrim, same padding-bottom clamp. 05 keeps the cinematic
   treatment; this one becomes type-led, the headline on flat black with the
   photograph as a band beneath it, which suits a bold Murecho display face. */
.hero { display: flex; flex-direction: column; min-height: auto; align-items: stretch; }
.hero::after { display: none; }
.hero > img {
  position: static; order: 2;
  width: 100%; height: clamp(240px, 40vh, 420px);
  object-fit: cover;
  filter: saturate(0.5) contrast(1.15) brightness(0.72);
}
.hero-inner {
  order: 1;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vh, 4.5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* ============================================================
   MEDIA LAYER OVERRIDES
   media.css loads after this file, so its generic .m-gallery grid
   would flatten the deliberate four-pillar composition. The .m-gallery
   class is carried only as the hook media.js binds the full-screen
   viewer to, so the layout is restored here at higher specificity.
   ============================================================ */

.pillars.m-gallery {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: repeat(3, 200px);
  gap: 1rem;
}
/* Beats media.css's `.m-gallery > *:nth-child(4n+1)` (0,2,0) at (0,4,0),
   which would otherwise span the signature cell across the wrong tracks. */
.pillars.m-gallery > .pillar:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.pillars.m-gallery > .pillar:nth-child(2) { grid-column: 2; grid-row: 1; }
.pillars.m-gallery > .pillar:nth-child(3) { grid-column: 2; grid-row: 2; }
.pillars.m-gallery > .pillar:nth-child(4) { grid-column: 2; grid-row: 3; }

/* The image fills the cell absolutely, so its tap target must too. */
.pillar > button {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.pillar > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

@media (max-width: 900px) {
  .pillars.m-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 230px;
  }
  .pillars.m-gallery > .pillar:nth-child(1),
  .pillars.m-gallery > .pillar:nth-child(2),
  .pillars.m-gallery > .pillar:nth-child(3),
  .pillars.m-gallery > .pillar:nth-child(4) { grid-column: 1; grid-row: auto; }
  .pillars.m-gallery > .pillar:nth-child(1) { min-height: 280px; }
}


/* ============================================================
   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; }
}