/* ============================================================
   211 - 北野坂の美容室
   Cool paper ground, graphite ink, one deep teal accent, 2px radius.

   WHY THIS PALETTE AND VOICE. The only review captured for this
   salon says 「美容院が苦手な私ですが、ここは安心して行ける美容院だ
   と思いました」: a person who finds hair salons uncomfortable, saying
   this is one they can walk into without dread. That is a far more
   useful brief than "4.8 stars". So nothing here performs. The ground
   is a cool paper rather than a bright white, the accent is a deep
   teal that reads considered rather than loud, and the corners are
   nearly square at 2px because softness would be a costume. Quiet is
   the product.

   It also has to sit apart from the project's other salons: 13 is
   near-white with magenta, 14 linen with citron, 15 violet-grey, and
   16, the other Kitano salon, is ink navy with copper at 18px radius.
   A pale ground with a cold accent and sharp corners collides with
   none of them.

   TYPE. Kosugi for display: a clean, unfussy gothic (see the de-dup note below),
   used only at large sizes where its lightness reads as composure.
   M PLUS 1 for body, a clean modern gothic that stays legible small
   in both Japanese and Latin. Neither is used anywhere else in this
   project, and the three Kaisei variants already in use are
   deliberately avoided so this does not read as a sibling of 03 or 16.
   Weights checked against the Google Fonts API before writing the
   link: Kosugi ships 400 only, so nothing requests more, and
   M PLUS 1 serves 400/500/700. Two earlier sites here shipped smeared
   synthetic bold by asking for weights a family does not have.

   CONTRAST. Every pairing computed, worst is 5.20:1 (muted on the
   deepest surface). Ink on accent is 7.37:1, accent as text on the
   ground is 6.80:1.

   CASCADE. This file is mobile-first and uses ONLY min-width queries.
   A sibling site lost its entire mobile collapse because an unscoped
   layout rule was appended after a max-width query, and media queries
   add no specificity, so source order won. With no max-width rules to
   override, that failure cannot happen here.
   ============================================================ */

:root {
  --bg: #f5f6f4;
  --bg-2: #ebeeea;
  --bg-3: #e0e4de;
  --line: rgba(35, 39, 43, 0.14);
  --text: #23272b;
  --muted: #565d63;
  --accent: #0f5f66;
  --accent-deep: #0b4b51;
  --accent-ink: #ffffff;
  --warn: #8a3b1f;
  --r: 2px;
  --font-display: "Kosugi", "Hiragino Mincho ProN", serif;  /* de-dup 2026-09-13: Hina Mincho collided with 19-mixbar-hana, which keeps it (its lounge identity leans on that delicacy). Kosugi is a clean unfussy gothic, better suited to this salon's crisp cool-white and graphite scheme than a delicate mincho was. */
  --font-body: "M PLUS 1", "Hiragino Kaku Gothic ProN", sans-serif;
  --nav-h: 64px;
  --wrap: 1060px;
}

* { 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, 2.5rem);
}

/* ---------- Navigation: minimal rail, brand divided off by a rule ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 246, 244, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap {
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 0.6rem;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
  padding-right: 0.9rem;
  border-right: 1px solid var(--line);
  margin-right: 0.2rem;
}
.nav-links { display: none; }
.nav .langsw { margin-left: auto; }
.nav .btn-nav {
  display: none;
  font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  white-space: nowrap;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: 0.8rem 1.6rem;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 0.98rem; font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* ---------- Hero: centred and type-led, image as a band beneath ---------- */

section { padding: clamp(3.5rem, 8vw, 6rem) 0; }

.hero { padding-top: calc(var(--nav-h) + 2rem); text-align: center; }
.hero .eyebrow {
  font-size: 0.74rem; letter-spacing: 0.22em; font-weight: 700;
  color: var(--accent); margin-bottom: 1.2rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  /* Capped well below the viewport-derived maximum: this headline sits
     in a centred column, not across the full width, so a vw-only size
     overshoots its actual box. A sibling site rendered four lines that
     way. */
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.45;
  letter-spacing: 0.04em;
  margin: 0 auto 1.3rem;
  max-width: 14em;
}
.hero-sub {
  color: var(--muted);
  max-width: 34em;
  margin: 0 auto 2rem;
}

/* An authored break for the Japanese headline on narrow screens. Left to
   wrap on its own at 390px it broke after 方 and left 「にも。」 alone on
   the second line, a three-character orphan under a thirteen-character
   headline. Breaking after 少し gives 6 and 7 characters instead. The
   rule is written mobile-first and switched OFF above 620px, where the
   headline fits on one line and the break would be wrong. */
.hero h1 .brk { display: inline; }
.hero-ctas { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; }

.hero-band { margin-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------- Section heads ---------- */

.sec-head { margin-bottom: clamp(2rem, 5vw, 3rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.sec-head p { color: var(--muted); max-width: 38em; margin-top: 0.8rem; }

/* ---------- First visit: numbered, calm ---------- */

.steps { list-style: none; display: grid; gap: 1rem; }
.step {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.4rem 1.3rem;
}
.step .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-size: 0.85rem; font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.8rem;
}
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* ---------- Services: hairline rows ---------- */

.svc { list-style: none; border-top: 1px solid var(--line); }
.svc li {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
  display: grid; gap: 0.3rem;
}
.svc h3 { font-size: 1.05rem; font-weight: 700; }
.svc .note { color: var(--muted); font-size: 0.92rem; }
.svc .tbc {
  color: var(--accent); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.04em;
}

.sample-note { margin-top: 1.2rem; color: var(--muted); font-size: 0.84rem; }

/* ---------- Access: stacked ---------- */

.hours { margin-bottom: 1.8rem; }
.hours dt {
  font-size: 0.76rem; letter-spacing: 0.14em; font-weight: 700;
  color: var(--accent); margin-top: 1.1rem;
}
.hours dt:first-child { margin-top: 0; }
.hours dd { font-size: 1.1rem; }

.info-list { list-style: none; }
.info-list li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  display: grid; gap: 0.2rem;
}
.info-list li:first-child { border-top: 1px solid var(--line); }
.info-list .label {
  font-size: 0.74rem; letter-spacing: 0.14em; font-weight: 700;
  color: var(--muted);
}
.info-list a.link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--accent); font-weight: 700; text-decoration: underline;
}
.info-actions { margin-top: 1.4rem; }

/* ---------- Reserve: centred narrow column ---------- */

.reserve { background: var(--bg-2); border-top: 1px solid var(--line); }
.reserve-inner { max-width: 600px; margin: 0 auto; }
.reserve h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: 0.03em;
  margin-bottom: 0.9rem;
}
.reserve-copy p { color: var(--muted); }
.reserve-alt {
  margin: 1.4rem 0 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.93rem; color: var(--muted);
}
.reserve-alt a { color: var(--accent); font-weight: 700; text-decoration: underline; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.85rem; 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.85rem 0.9rem;
  min-height: 46px;
  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='%23565d63' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.field input:focus, .field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.field input::placeholder { color: var(--muted); }

.form-error, .form-ok { display: none; font-size: 0.92rem; }
.form-error { color: var(--warn); font-weight: 700; }
.form-ok { color: var(--text); background: var(--bg-3); border: 1px solid var(--line); padding: 0.9rem 1rem; border-radius: var(--r); }
.form-error.show, .form-ok.show { display: block; }

/* ---------- Footer: bordered strip ---------- */

footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem 0 3rem;
  color: var(--muted);
  font-size: 0.88rem;
}
.foot-brand {
  font-family: var(--font-display);
  font-size: 1.2rem; letter-spacing: 0.14em;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.2rem; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; }
.foot-links a:hover { color: var(--text); }
.demo-note { margin-top: 1.6rem; font-size: 0.8rem; line-height: 1.8; max-width: 60ch; }

/* ---------- Reveal ---------- */

.rv { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Wider screens. min-width only, so the phone layout above is the
   base and nothing can silently override it.
   ============================================================ */

@media (min-width: 620px) {
  .hero h1 .brk { display: none; }
  .hero-ctas { flex-direction: row; justify-content: center; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .svc li { grid-template-columns: 1fr auto; align-items: baseline; column-gap: 1.5rem; }
  .svc .note { grid-column: 1; }
  .svc .tbc { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (min-width: 900px) {
  :root { --nav-h: 68px; }
  .nav-links {
    display: flex; gap: 1.5rem; margin-left: 1.5rem;
    font-size: 0.9rem;
  }
  .nav-links a { color: var(--muted); }
  .nav-links a:hover { color: var(--text); }
  .nav .btn-nav { display: inline-flex; align-items: center; min-height: 44px; margin-left: 1.2rem; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .access-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
  .hours { margin-bottom: 0; }
}