/* =========================================================
   開腸瑜伽協会 — ベース
   役割: リセット・要素デフォルト・基本タイポ・共通ユーティリティ。
   依存: tokens.css
   ここには「素の要素」と「どのページでも使う最小限のヘルパ」だけ置く。
   セクション固有・コンポーネント固有は持ち込まない。
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }   /* スムーススクロールはJS(smooth.js)が担当。CSSのscroll-behaviorは併用すると二重に効いて重くなるため付けない */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;  /* 和文の詰め */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, svg { display: block; max-width: 100%; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--rose-greige); color: var(--ink); }

/* 日本語の折返しを自然に（孤立文字・助詞の行頭行末残りを抑える） */
main h1, main h2, main h3, main p { text-wrap: pretty; }

/* ---------- 共通ユーティリティ ---------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--maxw-text); }

/* 欧文の微小ラベル（数字・Scroll など） */
.latin { font-family: var(--font-latin); font-style: italic; letter-spacing: 0.02em; }
.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
/* 縦書き */
.vertical { writing-mode: vertical-rl; text-orientation: upright; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}