/* ============================================
   base.css — カスタムプロパティ／タイポグラフィ基礎
   ============================================ */

:root {
  /* ---- 色 ---- */
  --color-bg: #F8F4EC;
  --color-bg-alt: #FDFBF6;
  --color-surface: #EDE4D4;
  --color-ink: #2B2622;
  --color-ink-sub: #5A5044;
  --color-ink-mute: #8B7F6C;
  --color-line: #DCD2C0;
  --color-cta: #C4622D;
  --color-photo-ph: #E4DACA;

  --color-on-dark: #F8F4EC;
  --color-on-dark-mute: #9E958A;
  --color-line-dark: #4A423B;
  --color-white: #FFFFFF;

  --color-scrim-from: rgba(43, 38, 34, 0);
  --color-scrim-to: rgba(43, 38, 34, 0.72);
  --color-header-bg: rgba(248, 244, 236, 0.94);
  --color-overlay: rgba(43, 38, 34, 0.18);

  /* ---- 六彩（ロゴマークから採色。面には使わずアクセントのみ） ---- */
  --rokusai-1: #9CAE36;  /* 黄緑 */
  --rokusai-2: #C6AE42;  /* 芥子 */
  --rokusai-3: #DEA25A;  /* 橙 */
  --rokusai-4: #D296A2;  /* 桃 */
  --rokusai-5: #5AA2BA;  /* 水 */
  --rokusai-6: #1E4272;  /* 紺 */

  /* ---- 書体 ---- */
  --font-serif: "Zen Old Mincho", serif;
  --font-sans: "Noto Sans JP", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- タイプスケール ----
     基準は SP（375px）。375px 〜 768px を線形に補間し、
     768px 以上は下のメディアクエリで PC の値に固定する。
     --fluid は 375px→768px（幅 393px）の進捗係数。 */
  --fluid: calc((100vw - 375px) / 393);

  --fs-hero: clamp(25px, calc(29px + 31 * var(--fluid)), 60px);
  --fs-statement: clamp(29px, calc(34px + 38 * var(--fluid)), 72px);
  --fs-title: clamp(20px, calc(22px + 18 * var(--fluid)), 40px);
  --fs-concept: clamp(20px, calc(20px + 12 * var(--fluid)), 32px);
  --fs-quote: clamp(20px, calc(20px + 10 * var(--fluid)), 30px);
  --fs-lead: clamp(13px, calc(13px + 2 * var(--fluid)), 15px);
  --fs-body: clamp(14px, calc(14px + 3 * var(--fluid)), 17px);
  --fs-meta: clamp(11px, calc(11px + 2 * var(--fluid)), 13px);
  --fs-brand: clamp(16px, calc(17px + 5 * var(--fluid)), 22px);
  --fs-menu: clamp(12px, calc(12px + 2 * var(--fluid)), 14px);
  --fs-nav: 15px;          /* ヘッダーに並べる選択肢（PC のみ使用） */
  --fs-cta: clamp(15px, calc(15px + 1 * var(--fluid)), 16px);

  --lh-hero: 1.65;
  --lh-title: 1.55;
  --lh-body: 2.1;
  --lh-tight: 1.4;

  --ls-meta: .14em;
  --ls-wide: .08em;
  --ls-hero: 0;

  /* ---- 余白スケール ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 80px;
  --sp-11: 96px;

  --gutter: clamp(20px, calc(22px + 26 * var(--fluid)), 48px);
  --section-py: clamp(56px, calc(64px + 64 * var(--fluid)), 128px);

  /* ---- 寸法 ---- */
  --maxw: 1080px;
  --maxw-narrow: 640px;
  --header-h: clamp(58px, calc(58px + 18 * var(--fluid)), 76px);
  /* ヘッダーは本文のガターより詰めて、左右の端に寄せる */
  --header-px: clamp(12px, calc(14px + 10 * var(--fluid)), 24px);
  --hero-h: 470px;
  --badge-size: 116px;
  --logo-size: clamp(30px, calc(32px + 12 * var(--fluid)), 44px);
  --tap-min: 44px;
  --cta-h: 52px;
  --dot-size: 7px;
  --border-w: 1px;
  --radius-full: 50%;
  --radius-none: 0;

  /* ---- モーション ---- */
  --dur-fade: 1.2s;
  --dur-ui: .3s;
  --ease: ease;

  /* ---- 重なり ---- */
  --z-header: 100;
  --z-nav: 90;
  --z-hero-body: 3;
  --z-hero-scrim: 2;
}

@media (min-width: 768px) {
  :root {
    --fs-hero: 60px;
    --fs-statement: 72px;
    --fs-title: 40px;
    --fs-concept: 32px;
    --fs-quote: 30px;
    --fs-lead: 15px;
    --fs-body: 17px;
    --fs-meta: 13px;
    --fs-brand: 22px;
    --fs-menu: 14px;
    --fs-nav: 15px;
    --fs-cta: 16px;
    --ls-hero: .05em;

    --gutter: 48px;
    --section-py: 128px;
    --header-h: 76px;
    --header-px: 24px;
    --hero-h: 100vh;
    --logo-size: 44px;
    --dot-size: 8px;
  }
}

/* アドレスバーの伸縮で FV の高さが跳ねないようにする */
@supports (height: 100svh) {
  @media (min-width: 768px) {
    :root {
      --hero-h: 100svh;
    }
  }
}

/* 横向きの端末など画面が低いときは FV を画面高に合わせる */
@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --hero-h: 100svh;
  }
}

/* ---- 基礎タイポグラフィ ---- */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-feature-settings: "palt";
  overflow-x: hidden;
}

body.is-nav-open {
  overflow: hidden;
}

/* 本文 */
.text {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-sub);
}

.text > p + p {
  margin-top: var(--sp-5);
}

/* mono のラベル・メタ・キャプション */
.label,
.caption,
.note {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  line-height: var(--lh-tight);
  color: var(--color-ink-mute);
}

.label--heading {
  display: block;
}

.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: var(--border-w);
  height: var(--border-w);
  margin: calc(var(--border-w) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-header);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--color-bg-alt);
  color: var(--color-ink);
  font-size: var(--fs-meta);
  font-family: var(--font-mono);
  transform: translateY(-200%);
  transition: transform var(--dur-ui) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: var(--border-w) solid var(--color-cta);
  outline-offset: var(--sp-1);
}

/* 画像プレースホルダ（写真が未支給の間も面として成立させる） */
/* 画像が無い間は代替テキストを表示せず、面色だけを見せる */
.photo,
.hero__image,
.archive__photo {
  position: relative;
  background-color: var(--color-photo-ph);
  object-fit: cover;
  color: transparent;
  font-size: 0;
}

/* 読み込みに失敗した img は置換要素でなくなり ::before が描画される。
   これで壊れた画像アイコンを面色で覆い、プレースホルダとして成立させる。
   画像が入れば ::before は描画されない。 */
.photo::before,
.hero__image::before,
.archive__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-photo-ph);
}

.archive__photo::before {
  border-radius: var(--radius-full);
}

.photo--wide {
  width: 100%;
  aspect-ratio: 3 / 2;
}

.photo--square {
  width: 100%;
  aspect-ratio: 1 / 1;
}