/* 案A — Clinic Rose
   オフホワイト × ダスティローズ。明朝の見出しに幾何学サンセリフの本文。
   医療的な清潔さと上品さを前に出す方向。 */

:root {
  --bg:          #FDFBFA;
  --surface:     #F7F1F0;
  --surface-alt: #F0E4E4;

  --ink:         #33292B;
  --ink-soft:    #5D5053;
  --muted:       #96888B;
  --line:        #E9DCDC;

  --accent:      #C48792;
  --accent-soft: #F3E4E6;
  --accent-deep: #96606C;
  --on-accent:   #FFFFFF;

  --academy-bg:     #3A2C2F;
  --academy-ink:    #F7F0EF;
  --academy-muted:  #B9A7AA;
  --academy-accent: #E3B2BA;
  --academy-line:   rgb(255 255 255 / .16);

  --font-display: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body:    "Jost", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-ui:      "Jost", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

  --display-weight:  300;
  --display-track:   .04em;
  --display-leading: 1.42;
  --body-track:      .03em;

  --radius:      6px;
  --radius-hero: 6px;
}

/* 明朝の見出しは字面が小さいので、和文だけ少し大きく詰める */
.display { font-feature-settings: "palt" 1; }
h1.display { font-size: clamp(1.82rem, 4.4vw, 2.95rem); }

/* トップのヒーローは「日本人が訪れるサロン。」を1行に収める必要がある。
   一番きついのは 900px の直後で、2カラムに変わって文章側の幅が半分に落ちる。
   3.6vw はそこで収まる上限から決めた（アカデミーLPは見出しが短いので据え置き） */
.hero h1.display { font-size: clamp(1.82rem, 3.6vw, 2.95rem); }
/* 364px より狭い端末では下限の 1.82rem でもその一句が収まらず、
   「ン。」だけが次の行に落ちる。幅に追従させて必ず1行に収める。
   364px でちょうど 1.82rem になるので、この境界で大きさは連続する */
@media (max-width: 364px) { .hero h1.display { font-size: 8vw; } }

.pledge__en { letter-spacing: .06em; }

/* ロゴマーク（mark-a.png）と同じ色 #C48792（--accent）に2行とも揃える。
   Cormorant Garamond は行送り用の余白（アセンダー/ディセンダー）を
   グリフの外側に多く持つ書体なので、line-height:1 やmargin-topを0にしても
   まだ隙間が残る。負のmargin-topで実際の字面同士を詰める */
.brand__name { color: var(--accent); letter-spacing: .12em; display: block; }
.brand__sub  { color: var(--accent); letter-spacing: .18em; margin-top: -.28em; }
@media (max-width: 600px) {
  .brand__name { letter-spacing: .08em; }
  .brand__sub  { letter-spacing: .14em; }
}

/* ヒーロー写真のピンク背景と同じ色。文章側の余白にも同じ色を広げ、
   写真と地続きの1枚の面に見せる */
:root { --hero-tint: #F7D9D6; }