/* ============================================================
   ヘアセットサロン シャルメ 三宮店 - Charme
   Stage-light salon theme. VARIANCE 6 / MOTION 4 / DENSITY 3
   Theme lock: light, whole page. Accent lock: stage magenta.
   Radius lock: 24px everywhere.

   DISPLAY FACE: Shippori Antique B1. Chosen because the project already
   carries four mincho faces and two rounded gothics (Zen Maru Gothic on 04,
   Kiwi Maru on 07), so a third rounded face would blur the set. The antique
   gothic reads fashion-editorial, which carries both the live-event styling
   this salon actually lives on and the bridal work. It ships a single 400
   weight, so display sizes carry the emphasis and no rule asks for a bold
   that does not exist (synthetic bold is banned here).

   CONTRAST RULE, measured: --text on --accent is 2.44:1 and FAILS. Accent
   surfaces always take --accent-ink (white, 5.87:1). Never --text.
   ============================================================ */

:root {
  --bg: #fdfbfc;
  --bg-2: #f6eef2;
  --bg-3: #efe3ea;
  --line: rgba(51, 39, 43, 0.14);
  --text: #33272b;
  --muted: #6b5a61;
  --accent: #c2185b;
  --accent-hover: #a3144c;
  --accent-ink: #ffffff;
  --warn: #a43a1c;
  --r: 24px;
  --font-display: "Shippori Antique B1", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-body: "Zen Kaku Gothic New", "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.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: 1280px;
  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(253, 251, 252, 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: 1.75rem; }

.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
}

.nav-links { display: flex; gap: 1.6rem; 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(--accent); }

.lang { display: flex; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; }
.lang a {
  padding: 0.3rem 0.6rem;
  border-radius: var(--r);
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.lang a:hover { color: var(--accent); }
.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;
  min-height: 48px;
  padding: 0.8rem 1.8rem;
  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, 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(--accent); color: var(--accent); }

.nav .btn { min-height: 40px; padding: 0.45rem 1.15rem; font-size: 0.9rem; }

/* ---------- Hero: lookbook header ----------
   Centred type block, then a full-width three-up strip pinned to the
   bottom of the first screen. Deliberately unlike the split, overlap and
   full-bleed heroes already used elsewhere in the project. */

.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4.5rem));
}

.hero-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; }

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

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
  margin-bottom: 1.3rem;
}

.hero h1 .em { color: var(--accent); }

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

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

.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.strip figure { border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.strip figcaption {
  padding: 0.7rem 0.9rem 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
}

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

section { padding: clamp(4rem, 8vw, 7rem) 0; }

.sec-head { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); }
.sec-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.35;
}
.sec-head p { color: var(--muted); max-width: 40em; margin-top: 0.8rem; }

/* ---------- Styles: stacked editorial rows ---------- */

.menu-list { list-style: none; }

.style-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
  border-top: 1px solid var(--line);
}
.style-row:last-child { border-bottom: 1px solid var(--line); }

.style-row h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  margin-bottom: 0.5rem;
}
.style-row h3 .tag {
  display: inline-block;
  margin-left: 0.7rem;
  padding: 0.15rem 0.7rem;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.style-row p { color: var(--muted); max-width: 42em; }
.style-row .price {
  margin-top: 0.6rem;
  font-weight: 700;
  color: var(--accent);
}
.style-row figure { border-radius: var(--r); overflow: hidden; background: var(--bg-2); }
.style-row figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

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

/* ---------- Pair band ---------- */

.band {
  background: var(--accent);
  color: var(--accent-ink);
}
.band .wrap { text-align: center; }
.band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  margin-bottom: 1rem;
}
.band p {
  max-width: 40em;
  margin: 0 auto 1.8rem;
  opacity: 0.95;
}
.band .btn-ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--accent-ink);
}
.band .btn-ghost:hover {
  background: var(--accent-ink);
  color: var(--accent);
  border-color: var(--accent-ink);
}

/* ---------- Hours: two schedule cards ---------- */

.sched {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.sched article {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--bg-2);
}
.sched h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.sched .time {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.sched p { color: var(--muted); font-size: 0.9rem; margin-top: 0.5rem; }

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

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.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.76rem;
  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: 0.9rem; flex-wrap: wrap; }

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

.reserve { background: var(--bg-2); }

.reserve-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.reserve-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  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.45rem; }
.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 1.1rem;
  min-height: 48px;
  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='%236b5a61' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}
.field input:focus,
.field select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
/* Solid --muted: every alpha tint measured under 4.5:1 on this ground. */
.field input::placeholder { color: var(--muted); }

.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;
  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.1rem; color: var(--text); margin-bottom: 0.3rem; }
.foot-links { display: flex; gap: 1.4rem; align-items: center; }
.foot-links a:hover { color: var(--accent); }
.demo-note { margin-top: 1.5rem; font-size: 0.79rem; }

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

.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; }
  .strip { grid-template-columns: 1fr; }
  .strip figure:nth-child(n+3) { display: none; }
  .style-row { grid-template-columns: 1fr; }
  .style-row figure { order: -1; }
  .sched { grid-template-columns: 1fr; }
  .info-grid, .reserve-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}

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

/* ============================================================
   Chrome variants. Combination NAV-B / RES-C / FOOT-C, which no
   other site in the project uses. Layout only: no colour token is
   touched here, so every contrast pairing is unchanged.
   ============================================================ */

/* 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 RES-C: full-width band, copy across the top, form in a
   three-column rank beneath it. */
.reserve-grid { grid-template-columns: 1fr; gap: 2.4rem; }
.reserve-copy p { max-width: 62ch; }
.form { grid-template-columns: repeat(3, 1fr); }
.form .field.full { grid-column: auto; }
.form .btn { grid-column: 1 / -1; justify-self: center; min-width: 16rem; }
@media (max-width: 900px) { .form { grid-template-columns: 1fr; } }

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

/* ---------- Media layer overrides ----------
   Two independent .m-gallery groups: the hero strip (a lookbook) and
   the styles list. The class is a behaviour hook only, so media.css's
   grid rules are overridden back to each group's intended layout. */
.strip.m-gallery {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1rem);
}
.strip.m-gallery > *:nth-child(4n+1) { grid-column: auto; grid-row: auto; }
@media (max-width: 900px) {
  .strip.m-gallery { grid-template-columns: 1fr; }
}
/* The styles list stays a stacked list, not a grid. */
.menu-list.m-gallery { display: block; }

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

/* Shippori Antique B1 ships a SINGLE weight (400). Any heavier request is
   synthesised by the browser, which smears the glyphs: the h1 here
   was rendering visibly double-struck. Presence comes from size,
   tracking and colour instead, never from a weight the font lacks. */
.brand, .hero h1, .sec-head h2, .style-row h3, .band h2,
.sched .time, .reserve-copy h2, .foot-brand {
  font-weight: 400;
}

@media (max-width: 560px) {
  /* Four languages stop fitting in a row once each label is
     unbreakable, so the switcher becomes a thumb-scrollable rail
     rather than wrapping into a second line that doubles the nav. */
  .lang {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 48vw;
  }
  .lang::-webkit-scrollbar { display: none; }
  .lang a { flex: 0 0 auto; }
}

@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; }

  /* THE BRAND AND THE LANGUAGE RAIL WERE OVERLAPPING BY 19px.
     Measured at 360px: the brand's right edge reached 90px while the
     switcher's left edge began at 71px, so 「シャルメ」 sat underneath
     the language pills. Cause: .nav .lang is a grid item in a 1fr
     column with justify-self:end. That shrink-wraps the item to its
     content and pins it right, so once four unbreakable labels exceed
     the column the overflow runs LEFTWARD, across the brand. Stopping
     the wrap (the earlier fix) removed the tall header but exposed
     this collision underneath it.
     Stretching the item makes it fill its column and scroll inside
     itself instead of spilling over a neighbour. min-width:0 is the
     part that actually lets a grid item shrink below min-content. */
  .nav .lang {
    justify-self: stretch;
    min-width: 0;
    max-width: none;
    /* flex-start, NOT flex-end. Pushing the rail right clipped its left
       edge, so 「日本語」 rendered as a lone 「語」: the label for the
       language the visitor is actually reading was the one cut off.
       Starting at the left keeps the current language whole and lets
       the later entries scroll into view instead. */
    justify-content: flex-start;
  }
}