/* =========================================================
   base.css v2 — リセット＋組版の土台（顧問の流儀）
   ========================================================= */
/* 記事の見出し（.interview .hero h1）用の部分書体。Shippori Mincho Medium を見出しに使う文字だけに絞って自前配信（OFL-1.1・static/assets/fonts/OFL-ShipporiMincho.txt）。
   Google Fonts 版の読み込みを待たずに最初の描画から同じ書体で出すため（読み込み前後で折り返しが変わると画面が揺れる）。
   ここに無い文字は次の書体（Shippori Mincho → Yu Mincho）に落ちる。作り直しは tools/fonts/subset-hero.py（版を上げたら build.mjs の HERO_FONT も直す） */
@font-face {
  font-family: "Shippori Mincho Hero";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/shippori-mincho-hero.v1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+2015, U+2026, U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF01-FF60;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
/* 画面外に退避したモバイルナビ等による横スクロールを構造的に防ぐ
   （clip はスクロールコンテナを作らないので position: sticky と両立する） */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: .02em;
  color: var(--color-ink);
  background: var(--color-ivory);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: normal;
}

/* 画像の安全弁: width/height 属性（CLS対策で必須）が CSS の高さとして効いて縦に伸びる事故を防ぐ。
   枠いっぱいに切り抜く箇所だけ、個別に height:100% / object-fit を上書きする */
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-mincho);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-feature-settings: "palt";
  text-wrap: pretty;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
p { text-wrap: unset; } /* 本文はベタ組み */
em { font-style: normal; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
ul, ol { padding-inline-start: 1.2em; }
hr { border: 0; border-top: 1px solid var(--color-line); }

:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-dark :focus-visible, .site-footer :focus-visible, .motto :focus-visible, .interlude :focus-visible, .cta-band :focus-visible {
  outline-color: var(--color-gold-light);
}
::selection { background: rgb(196 163 90 / .28); }

/* 固定ヘッダーにページ内リンクの飛び先が隠れないように */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.container { width: min(100% - 2.5rem, 1160px); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.container--story { width: min(100% - 2.5rem, 1040px); margin-inline: auto; }

/* スキップリンク */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--color-brown); color: var(--color-on-dark);
  padding: .6em 1em; border-radius: var(--radius); font-size: var(--fs-meta);
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* スクロール連動の出現。main.js が <html> に reveal-ready を付けたときだけ隠す
   ＝ JS が読めなかった環境・印刷・動きを減らす設定では何も隠れない */
.reveal-ready [data-reveal]:not(.is-visible) {
  opacity: 0;
  transform: translateY(22px);
}
.reveal-ready [data-reveal] {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 1ms);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  .reveal-ready [data-reveal] { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .reveal-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  .site-header, .sample-bar, .topbar, .nav-toggle, .skip-link { display: none !important; }
}

/* スクリーンリーダー専用 */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[hidden] { display: none !important; }