/* ============================================================
   CITRON blanc - 神戸・布引町のヘアサロン
   Citrus-and-linen theme. VARIANCE 6 / MOTION 3 / DENSITY 3
   Theme lock: light, whole page. Accent lock: deep citron (--accent).
   Radius lock: 6px everywhere.

   Type note: Klee One is modelled on Japanese pen-written textbook
   lettering. It reads calm and personal rather than commercial, which
   suits a quiet neighbourhood salon. It ships 400/600 only, so nothing
   here asks for a heavier weight (no synthetic bold).

   Accent note: --accent #5f6b22 is deliberately dark enough to work BOTH
   as body-size text on linen (5.37:1) and as a button surface carrying
   --accent-ink (5.37:1). One token, both jobs, so no second accent is
   needed anywhere.
   ============================================================ */

:root {
  --bg: #f7f6f1;
  --bg-2: #efeee7;
  --bg-3: #e7e5da;
  --line: #dcdad0;
  --text: #2b2c28;
  --muted: #63655c;
  --accent: #5f6b22;
  --accent-hover: #4e5a1c;
  --accent-ink: #f7f6f1;
  --warn: #9c3b22;
  --r: 6px;
  --font-display: "Klee One", "Hiragino Mincho ProN", serif;
  /* M PLUS 1p for body, not the project-wide Zen Kaku Gothic New. Its rounder
     terminals sit closer to Klee One's pen-written display face than a neutral
     gothic does, which suits a calm neighbourhood salon. Weights 400/500/700
     ship in the family; 600 does NOT, and is only used here by Klee One on the
     display face, so no synthetic bold is possible. */
  --font-body: "M PLUS 1p", "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.9;
  -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: 1020px;
  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(247, 246, 241, 0.92);
  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: 600;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}

.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; }
.lang a {
  padding: 0.3rem 0.55rem;
  border-radius: var(--r);
  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;
  border-radius: var(--r);
  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: var(--accent-hover); }

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

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

/* ---------- Family 1: type-led hero with a narrow bleeding image strip ---- */

.hero {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr minmax(0, 32vw);
  align-items: stretch;
}

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

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

.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.35;
  margin-bottom: 1.4rem;
}

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

.hero-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}
.hero-hours b { font-weight: 700; }
.hero-hours span { color: var(--muted); }

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

.hero-media { position: relative; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(0.98) brightness(1.02);
}

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

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

.sec-head { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.4;
}
.sec-head p { color: var(--muted); max-width: 40em; margin-top: 0.8rem; }

/* ---------- Family 2: asymmetric service grid with one image cell -------- */

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.svc {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.svc h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; }
.svc p { color: var(--muted); font-size: 0.95rem; }
.svc .tbc {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent);
  border-top: 1px dashed var(--line);
}

.svc-media {
  grid-column: span 3;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
}
.svc-media img { width: 100%; height: clamp(220px, 34vw, 380px); object-fit: cover; }

.price-note { margin-top: 1.4rem; color: var(--muted); font-size: 0.88rem; }

/* ---------- Family 3: centred booking-promise steps --------------------- */

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

.promise-inner { max-width: 62ch; margin: 0 auto; text-align: center; }
.promise-inner h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.9rem;
}
.promise-inner > p { color: var(--muted); }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.6rem;
  text-align: left;
}
.step {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.4rem;
}
.step .no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
}
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.3rem; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Family 4: full-bleed band with copy at the foot ------------- */

.band { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; padding: 0; }
.band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.96);
}
.band-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: linear-gradient(to top, rgba(247,246,241,0.97) 35%, rgba(247,246,241,0));
}
.band-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.8rem;
}
.band-copy p { color: var(--text); max-width: 38em; }

/* ---------- Family 5: hours and access grid ----------------------------- */

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

.hours dt {
  font-weight: 700;
  margin-top: 1.3rem;
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}
.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: 1rem 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.1em;
  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.6rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Family 6: reservation split --------------------------------- */

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

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

.reserve-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 0.9rem;
}
.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.3rem; }

.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 700; }

.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='%2363655c' 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, not a tint: alpha placeholders repeatedly failed AA in this project. */
.field input::placeholder { color: var(--muted); opacity: 1; }

.form-error { grid-column: 1 / -1; display: none; color: var(--warn); 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: 600;
  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); }
.demo-note { margin-top: 1.5rem; font-size: 0.82rem; }

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

.rv {
  opacity: 0;
  transform: translateY(18px);
  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; min-height: auto; }
  .hero-copy { padding: calc(var(--nav-h) + 2.5rem) 1.25rem 2.5rem; }
  .hero-media { min-height: 46vh; }

  .services { grid-template-columns: 1fr; }
  .svc-media { grid-column: span 1; }
  .steps { grid-template-columns: 1fr; }
  .info-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .band { min-height: 50vh; }
}

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

/* ============================================================
   Chrome variants. Combination NAV-A / RES-B / FOOT-B, which no
   other site in the project uses. The inline nav is kept because a
   quiet neighbourhood salon should not shout in its header; the
   differentiation is carried by the centred booking column and the
   stacked footer. Layout only: no colour token changes, so every
   measured contrast pairing is unchanged.
   ============================================================ */

/* Chrome variant RES-B: single centred column, narrow measure. */
.reserve-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; gap: 2rem; text-align: center; }
.reserve-copy p { margin-left: auto; margin-right: auto; }
.reserve-alt { text-align: center; }
.form { grid-template-columns: 1fr; text-align: left; }
.form .btn { justify-self: stretch; }

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

/* ---------- Media layer overrides ----------
   .m-gallery on .services is a behaviour hook so the one content photo
   opens in the viewer. media.css loads later, so the services grid and
   the full-width media cell are restored here at higher specificity. */
.services.m-gallery > *:nth-child(4n+1) { grid-column: auto; grid-row: auto; }
.services.m-gallery { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.services.m-gallery > .svc-media { grid-column: span 3; }
@media (max-width: 900px) {
  .services.m-gallery { grid-template-columns: 1fr; }
  .services.m-gallery > .svc-media { grid-column: span 1; }
}

/* The photo IS the control. */
.m-shot {
  display: block; width: 100%;
  padding: 0; border: none; background: none;
  cursor: pointer; min-height: 44px;
}
.m-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }


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