/* ============================================================
   THE CITY KOBE - 北野坂の美容室
   Ink navy ground, single copper accent, 18px radius.

   WHY THIS PALETTE. This salon is the only business in the project
   whose international customers are already documented rather than
   hoped for: several of its Google reviews are written in English,
   including one from a cruise passenger who came ashore for a
   haircut, and the owner answers in English. So the page is dressed
   for a visitor, not for a neighbourhood: ink navy reads as evening
   and as somewhere chosen rather than stumbled into, and the copper
   carries warmth so it never turns corporate. It is also the only
   navy ground in the set, which keeps it clear of 04's porcelain and
   cobalt and of 11's limestone and Aegean blue.

   TYPE. Kaisei HarunoUmi for display: a Japanese mincho with enough
   stroke contrast to read editorial, which suits a salon in the
   Kitano ijinkan district. Zen Kaku Gothic Antique for body, a
   humanist gothic that stays even at small sizes in Japanese and
   Latin alike, which matters on a page read in three languages.
   Neither family is used anywhere else in this project.
   Weights verified against the Google Fonts API before use:
   Kaisei HarunoUmi ships 400/500/700/800, Zen Kaku Gothic Antique
   ships 400/500/700. Nothing here requests a weight that does not
   exist, which is how two earlier sites shipped smeared synthetic
   bold.

   CONTRAST. Every pairing computed, worst is 4.94:1 (accent on the
   deepest surface). The accent began at #cf7b3f and was lightened to
   #d6874c precisely because the original failed that one pairing at
   4.36:1.
   ============================================================ */

:root {
  --bg: #101a2a;
  --bg-2: #17233a;
  --bg-3: #1e2c46;
  --line: rgba(238, 241, 246, 0.13);
  --text: #eef1f6;
  --muted: #a8b4c8;
  --accent: #d6874c;
  --accent-ink: #16110a;
  --warn: #e8a07a;
  --r: 18px;
  --font-display: "Kaisei HarunoUmi", "Hiragino Mincho ProN", serif;
  --font-body: "Zen Kaku Gothic Antique", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 68px;
  --wrap: 1120px;
}

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

/* ---------- Nav: inline bar, brand left, actions right ---------- */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  min-height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(16, 26, 42, 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: 1.2rem; }

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.nav-links { display: flex; gap: 1.5rem; margin-left: 1rem; font-size: 0.9rem; }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--text); }

.nav .langsw { margin-left: auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.8rem 1.6rem;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 0.98rem; 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); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #e09a66; }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.nav .btn { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.88rem; }

/* ---------- Hero: copy left, portrait slot right ---------- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: calc(var(--nav-h) + 3rem) 0 3rem;
}
.hero .wrap { display: contents; }
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: clamp(1.25rem, 4vw, 3rem);
}
.eyebrow {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--accent); margin-bottom: 1.2rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  /* Both ends of this clamp are measured, not guessed.
     The 3.2rem cap: the headline sits in a ~560px column at 1280px, so
     sizing purely from the viewport overshoots and wraps two authored
     lines into four.
     The 1.75rem floor: on a 360px phone the h1 box is 320px, and at the
     previous 2.05rem floor the first authored line 「日本語でも、英語でも。」
     needed 364px. Both authored lines wrapped and the hero rendered four
     lines. 1.75rem brings that line to about 311px, inside the box, so
     the hero holds its two intended lines on the narrowest phone. */
  font-size: clamp(1.75rem, 4.4vw, 3.2rem);
  line-height: 1.32; letter-spacing: 0.01em;
  margin-bottom: 1.3rem;
}
.hero-sub { color: var(--muted); max-width: 32em; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero-media {
  padding-right: clamp(1.25rem, 4vw, 3rem);
  display: flex; align-items: stretch;
}
.hero-media .m-ph { border-radius: var(--r); min-height: 60vh; }

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

section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46em; }
.sec-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.35;
}
.sec-head p { color: var(--muted); margin-top: 0.8rem; }

/* ---------- Visitor block: the practical answers, fast ---------- */

.visitor { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.fact { background: var(--bg-2); padding: 1.5rem 1.4rem; }
.fact h3 {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 0.5rem;
}
.fact p { font-size: 1.02rem; }
.fact .big { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; }

/* ---------- Services ---------- */

.menu-list { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.menu-row { background: var(--bg); padding: 1.3rem 1.4rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.menu-row h3 { font-size: 1.05rem; font-weight: 700; }
.menu-row .note { color: var(--muted); font-size: 0.9rem; flex: 1 1 18ch; }
.menu-row .tbc {
  margin-left: auto; color: var(--accent);
  font-size: 0.86rem; font-weight: 700; white-space: nowrap;
}
.sample-note { margin-top: 1.1rem; color: var(--muted); font-size: 0.86rem; }

/* ---------- Gallery ---------- */

.shots { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.shots .m-ph { border-radius: var(--r); }

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

.info-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.hours dt { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin-top: 1.2rem; }
.hours dt:first-child { margin-top: 0; }
.hours dd { font-size: 1.12rem; }
.info-list { list-style: none; }
.info-list li { padding: 1rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.2rem; }
.info-list li:first-child { border-top: none; }
.info-list .label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.info-list a.link { color: var(--accent); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.info-actions { margin-top: 1.4rem; }

/* ---------- Reserve: split ---------- */

.reserve { background: var(--bg-2); border-top: 1px solid var(--line); }
.reserve-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.reserve-copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.9rem; }
.reserve-copy p { color: var(--muted); max-width: 34em; }
.reserve-alt { margin-top: 1.6rem; padding-top: 1.3rem; 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.2rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.84rem; font-weight: 700; letter-spacing: 0.04em; }
.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.8rem 1rem; min-height: 44px; 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='%23a8b4c8' 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); border-color: var(--accent); }
.field input::placeholder { color: var(--muted); opacity: 1; }
.form-error, .form-ok { grid-column: 1 / -1; display: none; font-size: 0.93rem; }
.form-error { color: var(--warn); }
.form-ok { color: var(--text); background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1.1rem; }
.form-error.show, .form-ok.show { display: block; }
.form .btn { grid-column: 1 / -1; justify-self: start; }

/* ---------- Footer: two column ---------- */

footer { padding: 2.8rem 0 3.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }
.foot-grid { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot-brand { font-family: var(--font-display); font-size: 1.05rem; color: var(--text); margin-bottom: 0.3rem; }
.foot-links { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; }
.foot-links a:hover { color: var(--text); }
.demo-note { margin-top: 1.4rem; font-size: 0.78rem; opacity: 0.8; max-width: 60ch; }

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

/* ---------- Wider screens ---------- */

@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .shots { grid-template-columns: 1.4fr 1fr; }
  .info-grid { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; }
  .reserve-grid { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; }
}

/* ---------- Phone ---------- */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: calc(var(--nav-h) + 2rem);
  }
  .hero-copy { padding-right: clamp(1.25rem, 4vw, 3rem); }
  .hero-media { padding-left: clamp(1.25rem, 4vw, 3rem); }
  .hero-media .m-ph { min-height: 44vh; }
  .form { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  /* Keep brand, languages and the booking button on one row without
     any of them clipping off the right edge. */
  .nav .wrap { gap: 0.5rem; }
  .brand { font-size: 1rem; letter-spacing: 0.08em; }
  .nav .btn { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
  .hero-ctas .btn { width: 100%; }
}