/* リセットと地の文。ブランド差はトークンで吸収する */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-feature-settings: "palt" 1;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  word-break: keep-all;      /* 日本語見出しの語中改行を禁止（必須） */
  line-break: strict;
  overflow-wrap: normal;
}
p { margin: 0; max-width: var(--measure); }
img, svg, video { display: block; max-width: 100%; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 0.25em; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }

/* --- レイアウト --- */
.page { width: 100%; max-width: var(--width-page); margin-inline: auto; padding-inline: var(--space-5); }
.narrow { max-width: var(--width-narrow); }
.section { padding-block: var(--section-y); border-top: var(--rule); }
.section--invert {
  background: var(--color-bg-invert);
  color: var(--color-ink-invert);
  border-top-color: var(--color-rule-invert);
}
.section--invert p, .section--invert .meta { color: color-mix(in srgb, var(--color-ink-invert) 75%, transparent); }
.section--invert a { color: var(--color-ink-invert); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; align-items: center; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); } .gap-9 { gap: var(--space-9); }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-6); }
.col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }  .col-5 { grid-column: span 5; } .col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
@media (max-width: 820px) {
  /* 12トラックのままだと gap 11本ぶん（264px）が最小幅に乗り、
     360px 幅でグリッドが親からはみ出す。1カラムに畳んでギャップを消す。 */
  .grid-12 { grid-template-columns: minmax(0, 1fr); }
  .grid-12 > * { grid-column: 1 / -1; }
  .section { padding-block: var(--space-8); }
}

/* --- 読み込み時の段階的フェードアップ（演出はこれ1つだけ） --- */
@keyframes reveal-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal { animation: reveal-up 700ms var(--ease) both; }
.reveal:nth-child(2) { animation-delay: 80ms; }
.reveal:nth-child(3) { animation-delay: 160ms; }
.reveal:nth-child(4) { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}