/* ===========================================================
   宵 YOI — subpage layouts
   =========================================================== */

/* ---------- page head ------------------------------------ */

.phead {
  position: relative;
  padding: clamp(8rem, 6rem + 7vw, 13rem) 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  overflow: hidden;
}
.phead__inner { position: relative; z-index: 2; display: grid; gap: 1.8rem; }
.phead__title {
  font-family: var(--font-mincho);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem);
  line-height: 1.28;
  letter-spacing: 0.14em;
  color: var(--paper);
}
.phead__lead { max-width: 40em; }

/* 見出しの背後に一枚だけ写真を沈める */
.phead__bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(52%, 46rem);
  opacity: 0.34;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 92%);
  mask-image: linear-gradient(to left, #000 20%, transparent 92%);
}
.phead__bg img { width: 100%; height: 100%; object-fit: cover; }
/* 下端が直線で切れないよう、背景色へ落とす */
.phead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 52%, var(--ink) 96%);
}
@media (max-width: 760px) { .phead__bg { display: none; } }

/* パンくず */
.crumb {
  display: flex;
  gap: 0.9em;
  align-items: center;
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.crumb a { color: var(--brass); }
.crumb span { opacity: 0.5; }

/* ---------- generic section ------------------------------ */

.block { padding-block: var(--section-sm); }
.block--lg { padding-block: var(--section); }
.block + .block { border-top: 1px solid var(--line-soft); }

.two-col { display: grid; gap: clamp(2rem, 1rem + 5vw, 6rem); }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
@media (min-width: 900px) { .two-col--flip > *:first-child { order: 2; } }

.prose h3 {
  font-family: var(--font-mincho);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  letter-spacing: 0.12em;
  color: var(--paper);
  margin-top: 3.4rem;
  margin-bottom: 1.4rem;
}
.prose h3:first-child { margin-top: 0; }

/* ---------- style gallery -------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.4rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.filters button {
  padding: 0.85em 1.6em;
  background: none;
  border: 1px solid var(--line);
  color: var(--paper-dim);
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filters button:hover { color: var(--paper); border-color: var(--brass-dim); }
.filters button[aria-pressed="true"] { color: var(--ink); background: var(--brass-lit); border-color: var(--brass-lit); }

.gallery {
  display: grid;
  gap: clamp(0.9rem, 0.4rem + 1.8vw, 2.4rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px)  { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

/* 段差を付けて均一グリッドの退屈さを崩す */
.gallery > *:nth-child(4n + 2) { transform: translateY(clamp(1rem, 3vw, 3.4rem)); }
.gallery > *:nth-child(4n + 4) { transform: translateY(clamp(0.5rem, 1.6vw, 1.8rem)); }
@media (max-width: 759px) { .gallery > * { transform: none !important; } }

.card { display: grid; gap: 1rem; }
.card[hidden] { display: none; }
.card__media { overflow: hidden; }
.card__media img { transition: transform 1200ms var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.card__meta strong { font-weight: 400; color: var(--paper-2); }

/* ---------- stylist index -------------------------------- */

.roster { display: grid; gap: clamp(1.2rem, 0.6rem + 2.4vw, 3rem); }
@media (min-width: 700px)  { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .roster { grid-template-columns: repeat(4, 1fr); } }

.roster__item { display: grid; gap: 1.2rem; }
.roster__item .media img { filter: brightness(0.72) contrast(1.08); transition: filter 900ms var(--ease); }
.roster__item:hover .media img { filter: brightness(1) contrast(1.02); }
.roster__name {
  font-family: var(--font-mincho);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  letter-spacing: 0.16em;
  color: var(--paper);
}
.roster__role {
  margin-top: 0.5rem;
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- menu ----------------------------------------- */

.menu-group + .menu-group { margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.menu-group__title {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.menu-group__title h3 {
  font-family: var(--font-mincho);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  letter-spacing: 0.14em;
  color: var(--paper);
}
.menu-group__title em {
  font-family: var(--font-latin);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--brass);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem 1.6rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.price-row__name {
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--paper);
}
.price-row__note { grid-column: 1 / 2; color: var(--paper-dim); font-size: 0.86em; }
.price-row__yen {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  font-family: var(--font-latin);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  /* Garamond 既定の old-style は価格表だと読みにくい */
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--brass-lit);
  white-space: nowrap;
}
.price-row__yen small { font-size: 0.64em; letter-spacing: 0.2em; color: var(--paper-dim); margin-left: 0.5em; }

/* ---------- 指名の階段 ------------------------------------
   高単価サロンの料金は「店の料金表」ではなく「誰に頼むか」で決まる。
   実在の¥12,000超サロンはいずれも役職ごとの価格階段を出している。
   ---------------------------------------------------------- */

.ladder {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line);
}

.ladder__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  background: var(--ink);
}
@media (min-width: 680px) {
  .ladder__row { grid-template-columns: 10rem 1fr auto; }
}

.ladder__rank {
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  grid-column: 1 / -1;
}
@media (min-width: 680px) { .ladder__rank { grid-column: auto; padding-top: 0.3em; } }

.ladder__who {
  font-family: var(--font-mincho);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--paper);
}
.ladder__who small {
  display: block;
  margin-top: 0.5em;
  font-family: var(--font-gothic);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--paper-dim);
}

.ladder__yen {
  font-family: var(--font-latin);
  font-size: 1.2rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--brass-lit);
  white-space: nowrap;
}

/* 薬剤名と工程数を書く行。ここが空欄だと何を書いても安く見える */
.spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin-top: 0.9rem;
}
.spec span {
  padding: 0.4em 0.9em;
  border: 1px solid var(--line);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
}

/* 保証・キャンセル規定。金額と日数を明示するのが高単価のシグナル */
.terms {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
  border: 1px solid var(--line);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.terms h3 {
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
}
.terms dl { display: grid; gap: 0.8rem; }
.terms dt { font-family: var(--font-mincho); letter-spacing: 0.1em; color: var(--paper); }
.terms dd { margin: 0 0 0.4rem; color: var(--paper-dim); font-size: 0.9em; }

/* ---------- recruit / reserve steps ---------------------- */

.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line-soft); }
.step {
  counter-increment: step;
  background: var(--ink);
  padding: clamp(1.8rem, 1rem + 2.6vw, 3.2rem) 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 4.5rem 1fr;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  color: var(--brass-dim);
  padding-top: 0.5em;
}
.step h3 {
  font-family: var(--font-mincho);
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem);
  letter-spacing: 0.12em;
  color: var(--paper);
  margin-bottom: 0.9rem;
}

/* ---------- form ----------------------------------------- */

.form { display: grid; gap: 1.8rem; max-width: 40rem; }
.field { display: grid; gap: 0.7rem; }
.field > label {
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 1.05em 1.1em;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: inherit;
  font-size: var(--t-body);
  letter-spacing: 0.06em;
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brass); outline: none; }
.field textarea { min-height: 9rem; resize: vertical; }

.form__note {
  padding: 1.4rem 1.6rem;
  border-left: 1px solid var(--brass-dim);
  color: var(--paper-dim);
  font-size: 0.9em;
}

/* ---------- stylist detail ------------------------------- */

.bio-hero { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
@media (min-width: 900px) { .bio-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; } }

.bio-name {
  font-family: var(--font-mincho);
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  letter-spacing: 0.16em;
  color: var(--paper);
  line-height: 1.2;
}
.bio-name small {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--font-latin);
  font-size: 0.22em;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--brass);
}

.facts { display: grid; gap: 0; margin-top: 2.6rem; }
.facts__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.4rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.facts__row:last-child { border-bottom: 1px solid var(--line-soft); }
.facts__row dt {
  font-family: var(--font-latin);
  font-size: var(--t-label);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: 0.3em;
}
.facts__row dd { margin: 0; }

.pair { display: grid; gap: clamp(0.9rem, 0.4rem + 1.6vw, 2rem); }
@media (min-width: 700px) { .pair { grid-template-columns: repeat(2, 1fr); } }

/* ---------- next page link ------------------------------- */

.next {
  display: grid;
  gap: 1.4rem;
  padding-block: var(--section-sm);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  justify-items: center;
}
.next__title {
  font-family: var(--font-mincho);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem);
  letter-spacing: 0.16em;
  color: var(--paper);
  transition: color var(--dur) var(--ease);
}
.next:hover .next__title { color: var(--brass-lit); }