/* ============================================================
   BAR KAMAKURA - Kitanozaka, Kobe
   Bottle-green theme. VARIANCE 7 / MOTION 4 / DENSITY 3
   Theme lock: dark bottle green, whole page.
   Accent lock: amber whisky (single accent, surfaces and text).
   Radius lock: 2px everywhere.
   All pairings measured at WCAG AA or better (lowest 4.90:1).
   ============================================================ */

:root {
  --bg: #12211c;
  --bg-2: #182c25;
  --bg-3: #1c3028;
  --line: rgba(240, 231, 215, 0.14);
  --text: #f0e7d7;
  --muted: #b6a98f;
  --accent: #c98f4a;
  --accent-hover: #d79f5c;
  --accent-ink: #16100a;
  --warn: #e2a67e;
  --r: 2px;
  --font-display: "Marcellus", "Noto Serif JP", serif;
  --font-body: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --nav-h: 70px;
}

* { 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, 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(18, 33, 28, 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-size: 1.3rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.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-hover); }

.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: offset overlap ---------- */

.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 3.5rem) 0 clamp(2.5rem, 6vw, 5rem);
}

/* The measure is capped on the h1 itself, in em, NOT on this wrapper in ch.
   `ch` resolves against the element's OWN font, and this wrapper inherits the
   1rem body font, so `max-width: 22ch` here was about 176px. The h1 inside
   renders Japanese at roughly 66px a glyph at desktop, so that box fitted
   under three characters per line and the headline ran down the page in eight
   lines. `ch` is a Latin measure; for CJK at display size, cap the heading in
   em so the limit scales with the type it is actually constraining. */
.hero-head { max-width: none; }
.hero h1 { max-width: 11em; }

.eyebrow {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  line-height: 1.28;
  letter-spacing: 0.01em;
}

/* The image column rides up into the headline block: the overlap is the
   composition, so it collapses to a plain stack under 900px. */
.hero-body {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

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

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

.hero-media {
  position: relative;
  margin-top: clamp(-7rem, -6vw, -2rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.78) contrast(1.05);
}

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

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

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

.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.35;
}

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

/* ---------- Improvised cocktails: copy + mood chips ---------- */

.cocktail { background: var(--bg-2); border-block: 1px solid var(--line); }

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

.cocktail-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.35;
  margin-bottom: 1.1rem;
}
.cocktail-copy p { color: var(--muted); max-width: 34em; }

.price-pair {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.price-item .label { display: block; color: var(--muted); font-size: 0.85rem; }
.price-item .amount {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent);
}

.mood-intro {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.mood-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.mood {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  background: var(--bg-3);
  font-weight: 500;
}
.mood span { display: block; color: var(--muted); font-size: 0.82rem; }

/* ---------- Bottles: asymmetric bento ---------- */

.bottles-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto auto;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.cell {
  background: var(--bg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.cell h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
}
.cell p { color: var(--muted); }

.cell-img {
  grid-row: span 2;
  padding: 0;
  position: relative;
  min-height: 340px;
}
.cell-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.74) contrast(1.05);
}

.bottles-note {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.86rem;
}

/* ---------- Room: stat rail ---------- */

.room { background: var(--bg-2); border-block: 1px solid var(--line); }

.room-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.room-photo {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.room-photo img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.78) contrast(1.05);
}

.stat-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2rem 0 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.stat-item .num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  color: var(--accent);
  line-height: 1.2;
}
.stat-item .lbl { color: var(--muted); font-size: 0.85rem; }

/* ---------- Access and charge ---------- */

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

.charge {
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
}
.charge .amount {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--accent);
  line-height: 1.2;
}
.charge p { color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; }

.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-list { list-style: none; }
.info-list li {
  padding: 1.05rem 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-list a.link { color: var(--accent); font-weight: 700; }
.info-list a.link:hover { text-decoration: underline; }

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

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

.reserve { background: var(--bg-2); border-top: 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: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  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.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);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  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='%23b6a98f' 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 tint measured at 4.90:1 on the input background. */
.field input::placeholder { color: #928b76; }

.field-note {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.86rem;
}

.form-error {
  grid-column: 1 / -1;
  display: none;
  color: var(--warn);
  font-size: 0.92rem;
  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-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  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.82rem; }

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

.rv {
  opacity: 0;
  transform: translateY(20px);
  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 { padding-top: calc(var(--nav-h) + 2.5rem); }
  .hero-head { max-width: none; }
  .hero-body { grid-template-columns: 1fr; align-items: stretch; }
  .hero-media { margin-top: 0; }

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

  .bottles-grid { grid-template-columns: 1fr; }
  .cell-img { grid-row: auto; min-height: 260px; }

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

@media (max-width: 560px) {
  .lang { font-size: 0.72rem; }
  .nav .wrap { gap: 0.9rem; }
  .hero-ctas .btn { width: 100%; }
  .mood-grid { grid-template-columns: 1fr; }
  .stat-rail { grid-template-columns: 1fr; gap: 1rem; }
}


/* ============================================================
   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-B: two-row navigation, brand centred over a hairline rule.
   --nav-h grows because the bar is now two rows; hero padding keys off it. */
:root { --nav-h: 108px; }
.nav { height: auto; }
.nav .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "lang brand cta" "links links links";
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.nav .brand { grid-area: brand; justify-self: center; }
.nav .lang  { grid-area: lang;  justify-self: start; margin-left: 0; }
.nav .btn   { grid-area: cta;   justify-self: end; }
.nav-links {
  grid-area: links; justify-self: stretch; justify-content: center;
  margin-left: 0; border-top: 1px solid var(--line); padding-top: 0.5rem;
}
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav .wrap { grid-template-columns: auto 1fr auto; grid-template-areas: "brand lang cta"; }
  .nav .brand { justify-self: start; }
  .nav .lang { justify-self: end; }
}

/* Chrome variant FOOT-C: a bordered strip, brand and links on one rule-bound row. */
.foot-grid {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.2rem 0;
}
.foot-links { justify-content: flex-end; }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; text-align: left; }
  .foot-links { justify-content: flex-start; }
}


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