/* =============================================================================
   base.css — 要素のデフォルトとページ全体の変数
   リセット、リンク / 画像 / ボタン、テーマカラー、左右余白。デザイントークン
   （文字サイズ、ウェイト、パレット、書体）は先に読み込まれる tokens.css にある。
   ============================================================================= */

:root {
  /* テーマカラー。初期値はトークンから取り、暗い背景のセクションでは上書きする
     （Services は白にする）ので、これを参照して書かれた部品は自動で追従する。固定の
     ブランドカラーはトークン（--c-*）を直接使う。 */
  --accent: var(--c-blue);
  --accent-deep: var(--c-deep);
  --text: var(--c-ink);
  --text-muted: var(--c-muted);
  --rule: var(--c-line);
  --gutter: 5.5vw;
  --photo-radius: 16px;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

* {
  box-sizing: border-box;
}

/* 行頭の始め括弧（「, （, 『）の全角ボックスの空き半分を詰め、括弧の線が下の行の文字と
   揃うようにする。サイト内のすべてのテキストに継承される。非対応ブラウザでは従来どおり
   全角のままになる。 */
html {
  text-spacing-trim: trim-start;
  /* 日本語の禁則を厳しめに：小さい仮名（ィ・ッ など）や長音で行が始まらないようにする（2026-10-30）。 */
  line-break: strict;
}

::selection {
  background: #f7c3a7;
  color: var(--accent-deep);
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

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

img {
  max-width: 100%;
  display: block;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  /* 続けてタップしたときに iPhone がページを拡大しないように（送りボタンを 2 回押すと拡大していた。
     2026-10-30）。2 本指の拡大はそのまま使える。 */
  touch-action: manipulation;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

@media (max-width:1100px) {
  :root {
    --gutter: 5vw;
  }
}

@media (max-width:760px) {
  :root {
    --gutter: 6vw;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --photo-radius: 12px;
  }
}

/* すべての h2 を不透明度 90% にして、背後の地の面をうっすら透かす。.9 は --enter
   （js/motion.js が設定する表示の進行度）を置き換えるのではなく掛け合わせるので、
   見出しのフェードインはそのまま効く。 */
h2 {
  opacity: calc(var(--enter, 1) * .9) !important;
}