/* ==========================================================================
   nagi — style.css
   方向性: 写真主役・引き算 / 高明度の淡色
   01(和モダン・暖色)・02(情報量系・寒色)のどちらとも重ならないように、
   ヒーローは写真を使わず、余白と大きな欧文で持たせる。
   ========================================================================== */

/* --- 1. トークン ---------------------------------------------------------- */
:root {
  /* 近白 + 淡いグレージュ。差し色は branches.webp の若芽から取った鈍いオリーブ */
  --paper:   #f7f6f3;
  --paper-2: #eeebe5;
  --paper-3: #e4e0d8;
  --ink:     #23241f;
  --ink-2:   #4e4f47;
  /* 補助テキストの色は、いちばん暗い地（--paper-2）に対して
     4.5:1 を満たすところまで落としてある。淡色系は、見た目の軽さを
     優先すると本文以外がすべて AA 未達になる。 */
  --mute:    #65655d;   /* #f7f6f3 で 5.44:1 / #eeebe5 で 4.94:1 */
  --line:    #dedbd3;
  --olive:   #616946;   /* #f7f6f3 で 5.37:1 / #eeebe5 で 4.88:1 */
  --olive-dp:#4c5237;

  --step--2: clamp(0.68rem, 0.66rem + 0.12vw, 0.75rem);
  --step--1: clamp(0.79rem, 0.76rem + 0.16vw, 0.88rem);
  --step-0:  clamp(0.91rem, 0.87rem + 0.20vw, 1.00rem);
  --step-1:  clamp(1.05rem, 0.98rem + 0.36vw, 1.31rem);
  --step-2:  clamp(1.28rem, 1.13rem + 0.75vw, 1.81rem);
  --step-3:  clamp(1.56rem, 1.28rem + 1.40vw, 2.56rem);
  --step-4:  clamp(1.94rem, 1.44rem + 2.50vw, 3.75rem);
  --step-5:  clamp(2.63rem, 1.53rem + 5.50vw, 6.50rem);

  --sp-2xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.31rem);
  --sp-xs:  clamp(0.50rem, 0.47rem + 0.12vw, 0.63rem);
  --sp-s:   clamp(0.75rem, 0.71rem + 0.18vw, 0.94rem);
  --sp-m:   clamp(1.25rem, 1.16rem + 0.45vw, 1.75rem);
  --sp-l:   clamp(2.00rem, 1.62rem + 1.90vw, 4.00rem);
  --sp-xl:  clamp(3.50rem, 2.55rem + 4.76vw, 8.00rem);
  --sp-2xl: clamp(5.00rem, 3.10rem + 9.52vw, 13.0rem);

  --wrap: 82rem;
  --header-h: 5.8rem;   /* ヘッダーの実測高。ヒーローの上余白がこれを下回らないようにする */

  --display: "Marcellus", "Times New Roman", serif;
  --sans:    "Murecho", "Hiragino Sans", "Yu Gothic", sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. 基礎 -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 2.05;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-weight: 400; line-height: 1.4; }

::selection { background: var(--olive); color: var(--paper); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--ink); color: var(--paper); padding: var(--sp-s) var(--sp-m);
}
.skip:focus { left: 0; }

.wrap { width: min(100% - var(--sp-l) * 2, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--sp-2xl); }

/* 欧文の見出しラベル。和文は小さく添える */
.label {
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: var(--sp-m);
}
.title {
  font-family: var(--display);
  font-size: var(--step-3);
  letter-spacing: 0.06em;
  line-height: 1.25;
}
.title-ja {
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  color: var(--mute);
  margin-top: var(--sp-s);
}
.body-text { color: var(--ink-2); max-width: 32em; margin-top: var(--sp-l); }
.body-text p + p { margin-top: var(--sp-m); }

/* --- 3. ヘッダー ---------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0; top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-m);
  padding: var(--sp-m) clamp(1.25rem, 4vw, 4rem);
  /* 地色を最初から敷く。ページと同じ色なので帯には見えないが、
     透明のままだと本文や写真がナビの下に透けて重なる。
     ヒーローが 100svh あるため、その間ずっと重なり続けていた。 */
  background: var(--paper);
  transition: background-color 0.5s var(--ease), padding 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
.site-header.is-solid {
  background: rgba(247, 246, 243, 0.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding-block: var(--sp-s);
}

.brand {
  font-family: var(--display);
  font-size: var(--step-1);
  letter-spacing: 0.5em;
  text-transform: lowercase;
}

.nav { display: flex; gap: clamp(1.25rem, 2.6vw, 2.75rem); }
.nav a {
  font-family: var(--display);
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
  padding-block: 0.3em;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--olive);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after,
.nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-current { color: var(--ink); }

.nav-toggle { display: none; }

/* --- 4. ヒーロー: 写真ではなく余白と欧文で持たせる ------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* 上はヘッダーの高さを必ず確保する。写真がヘッダーの下に潜り込んで
     頭を切られていたため、余白ではなく実寸で逃がす。 */
  padding-block: calc(var(--header-h) + var(--sp-l)) var(--sp-xl);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  align-items: center;
}
.hero__word {
  font-family: var(--display);
  font-size: var(--step-5);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.hero__word span {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.5em;
  color: var(--olive);
  text-transform: uppercase;
  margin-bottom: var(--sp-m);
}
.hero__read {
  margin-top: var(--sp-l);
  color: var(--ink-2);
  max-width: 28em;
}
.hero__meta {
  margin-top: var(--sp-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-s) var(--sp-l);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  color: var(--mute);
}
/* 写真を紙地に溶かす。三段構えで、どれか一つでは足りない。
   1) multiply  — 白い壁が紙の色と同化して、矩形の面が消える
   2) mask      — 四辺を羽化させ、切り抜きの縁をなくす
   3) filter    — 壁を純白側へ持ち上げる。持ち上げないと multiply で
                  わずかに濁り、四角い影として残る */
.hero__figure {
  position: relative;
  overflow: hidden;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 12%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 12%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: min(66svh, 34rem);
  object-fit: cover;
  /* 順序が重要。contrast を先に置くこと。
     brightness を先にすると白は 255 まで上がるが、後段の contrast(0.94) が
     中間へ引き戻して 247 で頭打ちになり、壁が紙より一段暗い矩形として残る。
     この値で壁は実測 (247,246,243) = 紙地と完全に一致する。 */
  filter: contrast(0.94) brightness(1.05) saturate(0.88);
}

/* --- 5. 視差（弱く。効かない環境でも成立する） ----------------------------
   拡大率はここだけに書く。JS はこの値を読んで、はみ出した余白の範囲を
   超えない移動量を計算する。二箇所に数値を持つと必ずずれる。 */
.parallax { overflow: hidden; --pscale: 1.18; }
.parallax img {
  will-change: transform;
  transform: translate3d(0, var(--shift, 0px), 0) scale(var(--pscale));
}
@media (prefers-reduced-motion: reduce) {
  .parallax { --pscale: 1; }
  .parallax img { transform: none; will-change: auto; }
}

/* --- 6. コンセプト -------------------------------------------------------- */
.concept__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-l);
  align-items: start;
}
.concept__stills { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-m); }
.concept__stills img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.concept__stills figure:last-child { margin-top: var(--sp-xl); }
figcaption {
  font-family: var(--display);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  color: var(--mute);
  margin-top: var(--sp-xs);
}

/* --- 7. こだわり（3つ） --------------------------------------------------- */
.points { display: grid; grid-template-columns: 1fr; gap: var(--sp-l); margin-top: var(--sp-xl); }
.point { border-top: 1px solid var(--line); padding-top: var(--sp-m); }
.point__no {
  font-family: var(--display);
  font-size: var(--step--2);
  letter-spacing: 0.3em;
  color: var(--olive);
}
.point h3 { font-family: var(--display); font-size: var(--step-2); margin: var(--sp-2xs) 0 var(--sp-xs); }
.point h3 small { display: block; font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.2em; color: var(--mute); margin-top: var(--sp-2xs); }
.point p { font-size: var(--step--1); color: var(--ink-2); }

/* --- 8. 料金 -------------------------------------------------------------- */
.menu { background: var(--paper-2); }
.menu__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); margin-top: var(--sp-xl); }
.menu__list { border-top: 1px solid var(--line); }
.menu__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-m);
  align-items: baseline;
  padding-block: var(--sp-m);
  border-bottom: 1px solid var(--line);
}
.menu__row dt { font-family: var(--display); font-size: var(--step-1); letter-spacing: 0.08em; }
.menu__row dt small {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-top: var(--sp-2xs);
  line-height: 1.9;
}
.menu__row dd { font-family: var(--display); font-size: var(--step-1); color: var(--ink-2); white-space: nowrap; }
.menu__note { font-size: var(--step--2); color: var(--mute); margin-top: var(--sp-m); }
.menu__note li { padding-left: 1.2em; position: relative; }
.menu__note li::before { content: "—"; position: absolute; left: 0; color: var(--olive); }

/* --- 9. 帯 ---------------------------------------------------------------- */
.band { position: relative; height: clamp(16rem, 44vh, 30rem); overflow: hidden; }
/* 素材の色温度が全体の淡色から浮くため、彩度と明度を寄せてから使う */
.band img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.25) brightness(1.16) contrast(0.92); }
.band__text {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding-inline: var(--sp-m);
}
.band__text p {
  font-family: var(--display);
  font-size: var(--step-2);
  letter-spacing: 0.3em;
  color: var(--ink);
  background: rgba(247, 246, 243, 0.82);
  padding: var(--sp-m) var(--sp-l);
}

/* --- 10. サロン情報 ------------------------------------------------------- */
.info__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); margin-top: var(--sp-xl); }
.info__list { border-top: 1px solid var(--line); }
.info__row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--sp-m);
  padding-block: var(--sp-m);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.info__row dt {
  font-family: var(--display);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}
.info__row dd { color: var(--ink-2); }
.info__media { display: grid; gap: var(--sp-m); }
.info__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- 11. 予約 ------------------------------------------------------------- */
.book { text-align: center; }
.book__tel {
  font-family: var(--display);
  font-size: var(--step-4);
  letter-spacing: 0.08em;
  display: inline-block;
  margin-block: var(--sp-m) var(--sp-s);
}
.book__hours { font-size: var(--step--1); color: var(--mute); }
.book__note { font-size: var(--step--1); color: var(--ink-2); max-width: 34em; margin: var(--sp-l) auto 0; }

/* --- 12. フッター --------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-xl) clamp(1.25rem, 4vw, 4rem) var(--sp-l);
  font-size: var(--step--2);
  color: var(--mute);
}
.site-footer__top { display: grid; grid-template-columns: 1fr; gap: var(--sp-l); }
.site-footer .brand { color: var(--ink); }
.site-footer nav ul { display: grid; gap: var(--sp-xs); }
.site-footer a:hover { color: var(--ink); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-s) var(--sp-m);
  justify-content: space-between;
  margin-top: var(--sp-l); padding-top: var(--sp-m);
  border-top: 1px solid var(--line);
  letter-spacing: 0.08em;
}
.fiction { max-width: 50em; line-height: 1.9; }

/* --- 13. 出現（既定は可視。JS がある時だけ隠す） -------------------------- */
.js-anim .fade { opacity: 0; transform: translateY(1.2rem); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js-anim .fade.is-in { opacity: 1; transform: none; }
.js-anim .fade[data-delay="1"] { transition-delay: 0.14s; }
.js-anim .fade[data-delay="2"] { transition-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .fade { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}

/* --- 14. 画面幅（2箇所） -------------------------------------------------- */
@media (min-width: 48em) {
  .points { grid-template-columns: repeat(3, 1fr); }
  .menu__grid { grid-template-columns: 1.1fr 0.9fr; }
  .info__grid { grid-template-columns: 0.9fr 1.1fr; }
  .info__media { grid-template-columns: 1fr 1fr; }
  .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 64em) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; }
  .concept__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-2xl); }
}

/* --- 15. 狭い画面のナビ --------------------------------------------------- */
@media (max-width: 47.99em) {
  .nav-toggle {
    display: block;
    background: none; border: 1px solid var(--line); color: var(--ink);
    font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.24em;
    text-transform: uppercase; padding: 0.55em 1.1em; cursor: pointer;
  }
  .nav {
    position: fixed; inset: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--sp-l);
    font-size: var(--step-1);
    opacity: 0; visibility: hidden;
    transition: opacity 0.45s var(--ease), visibility 0.45s;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav a { font-size: var(--step-2); }
  .concept__stills figure:last-child { margin-top: 0; }

  /* backdrop-filter は「固定要素の包含ブロック」を作る。
     ヘッダーに掛けたままだと、その子である .nav の
     position:fixed / inset:0 がビューポートではなくヘッダーの箱に
     閉じ込められ、全画面メニューが高さ59pxに潰れて背景が透ける。
     狭い画面ではヒーローが画面より高く is-solid が最初から付くため、
     常時この状態だった。すりガラスをやめて不透明にする。 */
  .site-header.is-solid {
    backdrop-filter: none;
    background: var(--paper);
  }

  /* ナビは inset:0 でヘッダーごと覆うため、そのままだと開閉ボタンが
     ナビの下に隠れ、Esc 以外に閉じる手段がなくなる。
     ヘッダーの重ね順の中で、ブランドと開閉ボタンをナビより前に出す。 */
  .nav { z-index: 1; }
  .brand,
  .nav-toggle { position: relative; z-index: 2; }
}

/* --- 16. 装飾 --------------------------------------------------------------
   淡色・低情報量のサイトは、何も足さないと「白い紙」に見えてしまう。
   ここで足すのは、写真でもイラストでもない、地の質と細い線だけ。
   外部素材は一切使わない（すべて CSS とインライン SVG）。
   -------------------------------------------------------------------------- */

/* 16-1. 紙のざらつき
   本文の下（z-index:-1）に敷く。文字の上に重ねると、
   淡色サイトではただでさえ細い本文のコントラストを削ってしまう。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ヘッダーは不透明なので、そのままでは粒が乗らず、
   ここだけ平坦な帯として境目が見えてしまう（実測 σ=0 対 0.71）。
   同じ地をヘッダー自身にも敷いて継ぎ目を消す。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* 半透明＋blur になったら、下の地の粒がそのまま透けるので二重にしない */
.site-header.is-solid::before { opacity: 0; }

/* 16-2. ヒーローの円弧と点
   大きな欧文の背後に一本だけ線を通す。閉じた円にすることで
   「凪（なぎ）＝波のない水面」の連想に寄せている。 */
.hero__grid { position: relative; z-index: 1; }

/* 円弧は見出しの箱を基準に置く。ヒーロー全体を基準にすると、
   段組が変わる幅ごとに座標を書き直すことになり、そのたびに
   「どの幅にも当てはまらない区間」が生まれる（実際 768〜1023px で発生した）。

   見出しの子にしてしまえば、見出しが動けば円も動く。
   大きさも見出しの高さに対する比で決めるため、字が大きくなれば円も大きくなる。
   結果としてブレークポイントが一つも要らない。 */
.hero__wordwrap { position: relative; }

.hero__arc,
.hero__dot {
  position: absolute;
  pointer-events: none;
  /* 見出しの文字より後ろに回す。.hero__grid が z-index:1 で
     重ね合わせの文脈を作っているので、そこから外へは抜けない。 */
  z-index: -1;
  top: 50%;
  left: 0;
  translate: -30% -50%;
  height: 320%;
  aspect-ratio: 1;
}
.hero__arc {
  border: 1px solid var(--line);
  border-radius: 50%;
}
/* 円周上の一点。右上 45 度 */
.hero__dot::after {
  content: "";
  position: absolute;
  right: 14.6%; top: 14.6%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--olive);
}

/* 16-3. 見出しラベルの連番と飾り罫 */
.label {
  display: flex;
  align-items: center;
  gap: 0.9em;
}
.label::before {
  content: attr(data-no);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--olive);
}
.label::after {
  content: "";
  width: clamp(1.75rem, 5vw, 4.5rem);
  height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.label:not([data-no])::before { content: none; }
.book .label { justify-content: center; }

/* 16-4. 節の区切り飾り
   罫を引くだけだと事務的になるので、中央に小さな菱形を一つ置く。
   意味を持たないため aria-hidden にする。 */
.ornament {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  width: min(100% - var(--sp-l) * 2, 26rem);
  margin-inline: auto;
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
}
.ornament i {
  width: 6px; height: 6px;
  border: 1px solid var(--olive);
  rotate: 45deg;
}

/* 16-5. 帯の文言の板に細い二重罫
   角の鉤括弧も試したが、写真の明るい部分では線が浮いて
   「飾り」ではなく「はみ出した線」に見えた。板の輪郭を
   はっきりさせるほうが、装飾としても可読性としても素直だった。 */
.band__text p {
  position: relative;
  outline: 1px solid rgba(97, 105, 70, 0.28);
  outline-offset: 0;
}
.band__text p::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(97, 105, 70, 0.22);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body::before { opacity: 0.035; }
}

/* 予約節は1カラム中央寄せ。番号ラベルだけ grid の既定で左に寄るため打ち消す */
.book .label { justify-self: center; }
/* フッター各列は段落を積むだけなので、間隔を規則で持たせる（HTML 側の style 属性を廃した） */
.site-footer__top > div > * + * { margin-top: 1rem; }