/* ============================================================
   211 — depth layer. Loaded LAST, after modern.css.

   WHY THIS FILE EXISTS. The page displayed one photograph and it was
   the wrong one. stock-02.jpg, the hero, is a US Navy public-domain
   photograph of a sailor being shampooed aboard USS Iwo Jima, with a
   Pantene bottle in frame (data/stock-photos-14-27.json records the
   Wikimedia file page). stock-03.jpg is a dated CC-BY photograph of
   two old shampoo basins in somebody else's salon. Meanwhile
   photo-01.jpg — a wide, professionally lit photograph of THIS
   salon's actual room, marked verified: correct_business in
   data/photos.json — had never been shown at all.

   So the whole pass is one substitution and one quotation: the real
   room becomes a full-bleed lead image, the two stock photographs are
   dropped, and the single Google review the entire page was written
   around finally appears on it, in the customer's own words.

   Nothing here sets a typeface or the accent. Deep teal #0f5f66 and
   the Kosugi / M PLUS 1 pair are this salon's identity.

   TOKENS. modern.css here names spacing --sp-1..--sp-9 and type
   --step--2..--step-4. Aliased once below so a missing token degrades
   to a literal instead of collapsing a gap to zero.
   ============================================================ */

:root {
  --d2: var(--sp-2, 0.5rem);
  --d3: var(--sp-3, 0.75rem);
  --d4: var(--sp-4, 1rem);
  --d5: var(--sp-5, 1.5rem);
  --d6: var(--sp-6, 2rem);
  --d7: var(--sp-7, 3rem);
  --d8: var(--sp-8, 4rem);

  --dt-xs: var(--step--2, 0.72rem);
  --dt-sm: var(--step-0, 0.85rem);
  --dt-md: var(--step-2, 1rem);
}

/* ---------- The lead photograph ----------
   Full-bleed, because it is the only photograph of this salon that
   exists in the repository and the room is the argument. Breaking out
   of .wrap with a viewport-width trick rather than restructuring the
   markup keeps every measured hero rule above it untouched. */

.lead-shot {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.lead-shot .m-figure {
  aspect-ratio: 3 / 2;
  border-radius: 0;
}
.lead-shot .m-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A caption that says where the photograph came from, on the page rather
   than in a comment. It is inside .wrap again so it lines up with the type. */
.lead-cap {
  max-width: var(--wrap);
  margin: var(--d3) auto 0;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  font-size: var(--dt-sm);
  line-height: 1.8;
  color: var(--muted);
}

@media (min-width: 900px) {
  .lead-shot .m-figure { aspect-ratio: 2.4 / 1; }
}

/* ---------- The review ----------
   One sentence, written by a customer, that is the reason every other
   sentence on this page is phrased the way it is. It is set at the top
   of the type scale because nothing we could write would be better. */

.quote-band {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quote-fig {
  margin: 0 auto;
  max-width: 34em;
  text-align: center;
}
.quote-fig blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 5.2vw, 1.9rem);
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.quote-tr {
  margin-top: var(--d5);
  font-size: var(--dt-md);
  line-height: 1.85;
  color: var(--muted);
}
.quote-fig figcaption {
  margin-top: var(--d5);
  padding-top: var(--d4);
  border-top: 1px solid var(--line);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  font-size: var(--dt-sm);
  color: var(--muted);
}
/* Body face, not the display face: Kosugi sets its full stop on a
   near-full-width advance, so "4.8" came out as "4. 8" with a visible hole
   in the middle of the one number on the page a reader is going to check. */
.quote-fig .score {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- First visit ----------
   The three steps were three equal bordered boxes: same weight, same
   size, no sequence. They are now a numbered sequence — the figure sits
   in the margin at display scale, the rule runs under each step — so the
   ORDER is the visible thing, which is the whole point of a section that
   exists to tell a nervous first-timer what happens and when. */

.steps.steps-seq { display: grid; gap: 0; }
.steps.steps-seq .step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: var(--d6) 0;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: var(--d4);
  align-items: start;
}
.steps.steps-seq .step:last-child { border-bottom: 1px solid var(--line); }
.steps.steps-seq .step .n {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  margin: 0;
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.steps.steps-seq .step h3 {
  grid-column: 2;
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: var(--d2);
}
.steps.steps-seq .step p {
  grid-column: 2;
  color: var(--muted);
}

@media (min-width: 900px) {
  .steps.steps-seq { grid-template-columns: 1fr; }
  .steps.steps-seq .step {
    grid-template-columns: 3.5rem minmax(0, 18em) minmax(0, 1fr);
    column-gap: var(--d6);
    align-items: baseline;
  }
  .steps.steps-seq .step h3 { grid-column: 2; margin-bottom: 0; }
  .steps.steps-seq .step p { grid-column: 3; }
}

/* ---------- Services ----------
   The price column is 確認中 on every row because no published price
   exists for this salon and none was going to be invented to fill the
   gap. What the column can do is stop looking like an apology: it is
   set as a proper waiting state, aligned, in the accent, so it reads as
   "coming from the owner" rather than "we forgot". */
.svc .tbc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.svc .tbc::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  flex: none;
}