/* 大原会議 — style.css
 * 題材の語彙: 墨と灯。黒の地に生成りの文字、灯のような暖色の光彩（光彩は「漂う」だけ）。
 * 値はすべて :root のトークンから引く（直値は 1px ヘアラインのみ）。
 * 面は 6 つ、地はすべて --ink-bg。--ink-2 は参加者の器とダイアログの面だけ。
 * 角丸 0、影なし、塗りなし。区切りは余白と --rule-on-ink の細罫線だけ。
 */

/* ---------- 1. トークン ---------- */
:root {
  /* color */
  --ink-bg: #0f0f0f;         /* 地 */
  --ink-2: #161616;          /* 参加者の器・ダイアログの面 */
  --ink-3: #1f1f1f;          /* 顔の円の地 */
  --on-ink: #f2efe8;         /* 文字（ink-bg に 16.7:1、ink-2 に 15.8:1） */
  --on-ink-soft: #a39e94;    /* 肩書・日付（ink-bg 7.2:1、ink-2 6.8:1） */
  --on-ink-faint: #8c867d;   /* ラベル・補助（ink-bg 5.3:1、ink-2 5.0:1、ink-3 4.6:1）。計画の #6b665e は ink-2 で 3.2:1 だったので上げた */
  --rule-on-ink: rgba(242, 239, 232, 0.14); /* 罫線・枠 */
  --glow: 217, 201, 165;     /* rgb 成分。「漂う」の光彩にだけ rgba(var(--glow), .07〜.18) で使う */
  --seal: #b3402a;           /* 落款の朱。最新の一本の「新」印にだけ */

  /* type */
  --font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDPMincho", serif;
  --font-body: "EB Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --track: 0.06em;
  --track-wide: 0.12em;
  --track-display: 0.2em;
  --measure: 34em;

  /* space (4/8 リズム) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* layout */
  --header-h: 56px;
  --gutter: clamp(16px, 5vw, 64px);
  --container: 1152px;
  --section-pad: clamp(64px, 10vw, 128px);
  --stage-h: min(560px, 75vh);   /* 参加者の器。1280×800 で 600、768×1024 で 620、375×812 で 609（E2E の上限は 640／760／640） */

  /* motion（台帳は site-plan §7。#1 ヒーロー、#2 面の初回表示、#3 顔の入場、#4 漂う） */
  --dur-fast: 180ms;
  --dur-yugen: 600ms;
  --dur-rule: 600ms;
  --dur-hero: 700ms;
  --dur-reveal: 400ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* 黒スレートの乱流ノイズ（site-plan §6）。両面で共有する 1 枚のタイル。静止。 */
  --slate-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
@supports (height: 1svh) {
  :root { --stage-h: min(560px, 75svh); }
}

/* ---------- 2. リセットと和文の既定 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;   /* clip 非対応環境の fallback */
  overflow-x: clip;
  background: var(--ink-bg);
  -webkit-text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; }
/* scroll-behavior: smooth は動きの台帳（site-plan §7）に無いので入れない */

body {
  margin: 0;
  background: var(--ink-bg);
  color: var(--on-ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 2;
  letter-spacing: var(--track);
  font-feature-settings: "palt" 1;
  font-kerning: normal;
  line-break: strict;
  word-break: auto-phrase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 600;
  line-height: 1.5;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- 3. 骨組み ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 面 2〜5。地は body の --ink-bg のまま、区切りは余白と上端の細罫線 */
.section {
  position: relative;
  padding-block: var(--section-pad);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
/* 節の上端の細罫線。motion #7 で左から引かれる（既定は引かれた状態） */
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 1px;
  background: var(--rule-on-ink);
  transform-origin: left;
}
html.js-motion .section::before {
  transform: scaleX(0);
  transition: transform var(--dur-rule) var(--ease-out);
}
html.js-motion .section.in::before { transform: scaleX(1); }

/* 面の初回表示（motion #2）。JS が observer を作れたあと（html.js-motion）だけ初期状態を透明にする */
.reveal {
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
html.js-motion .reveal:not(.in) {
  opacity: 0;
  transform: translateY(8px);
}

/* ---------- 3b. 黒スレートの質感（site-plan §6。ヒーローと対談の面だけ） ----------
 * 層: 乱流ノイズのタイル（3.5%）→ 大きく柔らかい放射グラデ 4 枚 → --ink-bg のベタ。
 * 輝度の振れは 6% 以内。静止（アニメーションさせない）。上下 120px はベタへ抜いて面の継ぎ目を消す。 */
.slate { position: relative; background-color: var(--ink-bg); }
.slate > * { position: relative; z-index: 1; }
.slate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--slate-noise),
    radial-gradient(70% 55% at 18% 12%, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 50% at 84% 78%, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0) 72%),
    radial-gradient(95% 70% at 50% 108%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 70%),
    radial-gradient(80% 60% at 70% 4%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0) 74%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 240px 240px, auto, auto, auto, auto;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
}
@media (prefers-contrast: more) {
  .slate::after { display: none; }
}

/* ---------- 3c. 幽玄の出現（site-plan §12・motion #5） ----------
 * 行が blur(6px) からほどけ、10px 浮き上がる。色は形より遅れて立つ。
 * スクロール連動は animation-timeline: view()。非対応は .reveal の .in で同じ終状態へ。 */
@keyframes yugen-shape {
  from { opacity: 0; filter: blur(6px); transform: translateY(10px); }
  to   { opacity: 1; filter: blur(0);   transform: none; }
}
@keyframes yugen-color {
  from { color: var(--on-ink-faint); }
  to   { color: var(--yugen-ink, var(--on-ink)); }
}
@keyframes hero-exit {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-40px); }
}

/* 行の順番（段落間 240ms ＝ 行間 120ms の 2 段ぶん） */
html.js-motion .sec-head .eyebrow { --yi: 0; }
html.js-motion .sec-head h2 { --yi: 1; }
html.js-motion .lede { --yi: 2; }
html.js-motion .prose p { --yi: 0; }
html.js-motion .prose p:nth-of-type(2) { --yi: 2; }
html.js-motion .prose p:nth-of-type(3) { --yi: 4; }
html.js-motion .prose p:nth-of-type(4) { --yi: 6; }
html.js-motion .prose p:nth-of-type(5) { --yi: 7; }
html.js-motion .prose p:nth-of-type(6) { --yi: 8; }
html.js-motion .prose p:nth-of-type(7) { --yi: 9; }
html.js-motion .eyebrow { --yugen-ink: var(--on-ink-faint); }

@supports (animation-timeline: view()) {
  html.js-motion .prose p,
  html.js-motion .sec-head h2,
  html.js-motion .eyebrow,
  html.js-motion .lede {
    animation-name: yugen-shape, yugen-color;
    animation-fill-mode: both, both;
    animation-timing-function: var(--ease-out), linear;
    animation-timeline: view(), view();
    animation-range:
      entry calc(10% + var(--yi, 0) * 2%) cover calc(28% + var(--yi, 0) * 2%),
      entry calc(18% + var(--yi, 0) * 2%) cover calc(36% + var(--yi, 0) * 2%);
  }
  /* ヒーローの離脱（motion #6）。JS を使わない。translateY と opacity だけ */
  html.js-motion .hero-logo,
  html.js-motion .hero-thesis,
  html.js-motion .hero-sub {
    animation: hero-exit linear both;
    animation-timeline: view();
    animation-range: exit;
  }
}
@supports not (animation-timeline: view()) {
  html.js-motion .reveal:not(.in) .prose p,
  html.js-motion .reveal:not(.in) .sec-head h2,
  html.js-motion .reveal:not(.in) .eyebrow,
  html.js-motion .reveal:not(.in) .lede {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(10px);
    color: var(--on-ink-faint);
  }
  html.js-motion .prose p,
  html.js-motion .sec-head h2,
  html.js-motion .eyebrow,
  html.js-motion .lede {
    transition:
      opacity var(--dur-yugen) var(--ease-out) calc(var(--yi, 0) * 120ms),
      filter var(--dur-yugen) var(--ease-out) calc(var(--yi, 0) * 120ms),
      transform var(--dur-yugen) var(--ease-out) calc(var(--yi, 0) * 120ms),
      color var(--dur-yugen) linear calc(200ms + var(--yi, 0) * 120ms);
  }
}

/* ---------- 4. スキップリンク・たたき台の帯 ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 40;
  padding: var(--space-2) var(--space-4);
  background: var(--on-ink);
  color: var(--ink-bg);
  font-size: var(--text-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }

.mock-band {
  padding: var(--space-1) var(--gutter);
  color: var(--on-ink-soft);
  border-bottom: 1px solid var(--rule-on-ink);
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-align: center;
  line-height: 1.8;
}

/* ---------- 5. ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-inline: var(--gutter);
  background: var(--ink-bg);
  color: var(--on-ink);
  border-bottom: 1px solid var(--rule-on-ink);
}
.brand {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: var(--track-display);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav ul,
.footer-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
  list-style: none;
}
.site-nav a,
.footer-nav a {
  display: inline-block;
  padding-block: var(--space-2);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--on-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover,
.site-nav a:focus-visible,
.footer-nav a:hover,
.footer-nav a:focus-visible { color: var(--on-ink); }
.nav-channel a { color: var(--on-ink); }

/* ヘッダーからの移動で、ヘッダーの下を走る灯の線（台帳 #9）。押したときだけ JS が動かす。既定は見えない */
.nav-sweep {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
}
.nav-sweep i {
  display: block;
  height: 1px;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  background: linear-gradient(90deg, rgba(var(--glow), 0), rgba(var(--glow), 0.95) 70%, rgba(255, 248, 230, 1));
  box-shadow: 0 0 10px rgba(var(--glow), 0.8), 0 0 2px rgba(var(--glow), 1);
}

@media (max-width: 479px) {
  .brand { letter-spacing: 0.12em; font-size: 14px; }
  .site-nav a { font-size: var(--text-xs); letter-spacing: 0.06em; }
}

/* ---------- 6. ロゴ ---------- */
/* wordmark の WebP は地を透明に抜いてある（site/assets/logo/*-wordmark*.webp）。
   黒地に置くだけでよく、合成やマスクは要らない。 */
.logo-ink { display: block; }

/* ---------- 7. ヒーロー（motion #1: 一度きりのフェード） ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(480px, 72vh, 820px);
  min-height: clamp(480px, 72svh, 820px);
  padding: var(--space-16) var(--gutter) var(--space-20);
  text-align: center;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: hero-in var(--dur-hero) var(--ease-out) both;
}
.hero-logo {
  display: flex;
  justify-content: center;
  line-height: 0;
}
/* ロゴはほぼ正方形。高さでも上限を切り、ヒーローが黒い壁にならないようにする */
.hero-logo img {
  width: auto;
  height: auto;
  max-width: min(56vw, 400px);
  max-height: min(44vh, 400px);
  max-height: min(44svh, 400px);
}
.hero-thesis {
  margin-top: var(--space-8);
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(17px, 1.2vw + 12px, 22px);
  letter-spacing: var(--track-wide);
  line-height: 1.9;
}
.hero-sub {
  margin-top: var(--space-2);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  color: var(--on-ink-soft);
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 8. 節の見出し・落款 ---------- */
.sec-head { margin-bottom: var(--space-12); }
.eyebrow {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  color: var(--on-ink-faint);
  line-height: 1.4;
}
.sec-head h2 {
  font-size: var(--text-xl);
  letter-spacing: var(--track-wide);
}
.lede {
  margin-top: var(--space-6);
  max-width: var(--measure);
  font-family: var(--font-jp);
}

/* 落款: 朱の小さな角印。最新の一本の「新」にだけ */
.seal {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--seal);
  color: var(--on-ink);
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0;
}

/* ---------- 9. 本文（編集調の面） ---------- */
.prose {
  max-width: var(--measure);
  font-family: var(--font-jp);
  font-size: var(--text-md);
  line-height: 2.1;
}
.prose p + p { margin-top: calc(var(--space-6) + 4px); }
/* 本文の頭に置く一行（大原会議の「静寂の地で、真の豊かさを問い直す。」） */
.prose .prose-lead {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-ink);
}
/* 狭幅では固定の改行を外す。行長が短くなると「下で話す。」のような孤立行ができるため。文字列は変えない */
@media (max-width: 479px) {
  .prose br { display: none; }
}

/* 支援技術にだけ読ませる文字（最新の一本の「最新」など） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 10. Concept 大原会議（ラベル列＋本文列） ---------- */
.label-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
.label-grid .sec-head { margin-bottom: 0; }
@media (min-width: 768px) {
  .label-grid {
    grid-template-columns: minmax(180px, 1fr) 3fr;
    gap: var(--space-16);
    align-items: start;
  }
}

/* ---------- 11. Concept 大原対談（左ロゴ・右本文） ---------- */
.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
.media-logo {
  width: min(56vw, 280px);
  margin-inline: auto;
}
.media-logo img { width: 100%; }
/* 縦積みの幅ではヒーローの同じロゴの直下に来るので、二度続けて出さない */
@media (max-width: 767px) {
  .media-logo { display: none; }
}

@media (min-width: 768px) {
  .media-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-16);
  }
  .media-logo { width: 100%; max-width: 320px; margin-inline: 0; }
}

/* ---------- 12. Talks: 16:9 サムネイルと文字（カードは塗らない） ---------- */
.video-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
}
@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.video-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video-card:focus-visible { outline-offset: 4px; }

/* サムネイル（16:9 の静止画）。文字は下端に置き、上から下へ暗くなる帳（scrim）の上に載せる。
 * 帳は 78% で .65 に達する。文字の位置ではどの写真でも 6:1 以上（実測は release-gate に記録）。 */
.thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rule-on-ink);
  background: var(--ink-2);
  color: var(--on-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.video-card:hover .thumb,
.video-card:focus-visible .thumb { border-color: var(--on-ink-soft); }
.thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.65) 78%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}
.thumb-cap {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 10px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
/* 再生の印。既定は控えめ、ホバー／フォーカスで前に出る。位置は帳が .65 に達した帯の中 */
.thumb-play {
  font-size: 10px;
  line-height: 1.3;
  color: var(--on-ink);
  opacity: 0.7;   /* 控えめだが、いちばん明るい静止画の上でも 4.9:1 を保つ濃さ */
  transition: opacity var(--dur-fast) var(--ease-out);
}
.video-card:hover .thumb-play,
.video-card:focus-visible .thumb-play { opacity: 1; }
.thumb-no {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: var(--track-wide);
  line-height: 1.3;
  color: var(--on-ink);
}
.thumb-part {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  line-height: 1.3;
  color: var(--on-ink);
}
.thumb .seal {
  position: absolute;
  z-index: 1;
  top: var(--space-3);
  left: var(--space-3);
}

.card-meta {
  display: block;
  padding-top: var(--space-3);
  line-height: 1.7;
}
.card-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-3);
}
.card-theme {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--on-ink);
}
.video-card .card-name {
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  color: var(--on-ink-soft);
}
.video-card:hover .card-theme,
.video-card:focus-visible .card-theme {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}
.card-title,
.card-ep,
.card-date {
  font-size: var(--text-sm);
  color: var(--on-ink-soft);
}
.card-title, .card-ep { font-family: var(--font-jp); }
.card-date { font-family: var(--font-body); letter-spacing: 0.08em; }

.more-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

/* ---------- 13. ボタン（塗らない。細罫線と文字だけ） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--rule-on-ink);
  background: transparent;
  color: var(--on-ink-soft);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover,
.btn:focus-visible { border-color: var(--on-ink-soft); color: var(--on-ink); }

/* 文字ボタン（モード切替・送り・一時停止に共通） */
.text-btn {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--on-ink-soft);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.text-btn:hover,
.text-btn:focus-visible { color: var(--on-ink); }
.text-btn:disabled { color: var(--on-ink-faint); cursor: default; }

/* ---------- 14. Members: 見出し＋モード切替＋固定高さの器 ---------- */
.members-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6) var(--space-8);
}
.members-lead { min-width: 0; }

/* モード切替: 細罫線で区切った文字ボタン。選択中は文字を明るくし、下に細い線 */
.mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
}
.mode-switch button {
  min-height: 44px;   /* タッチ目標 */
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--on-ink-soft);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.mode-switch button + button { border-left: 1px solid var(--rule-on-ink); }
.mode-switch button:hover,
.mode-switch button:focus-visible { color: var(--on-ink); }
.mode-switch button[aria-pressed="true"] {
  color: var(--on-ink);
  border-bottom-color: var(--on-ink);
}
.mode-switch button:focus-visible { outline-offset: -3px; }

/* 参加者の面。漂うのときだけ、見出しと導入の裏まで続く一枚の場になる（v4）。
   全幅は section そのものの幅で取る（100vw ＋ 負のマージンはスクロールバーで溢れる） */
.members-field { position: relative; }
.members-field > .container,
.members-field > .stage-wrap { position: relative; z-index: 1; }

/* 流線の canvas。場の最下層に敷き、操作は一切受けない */
.flow-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 器の横幅。一覧・顔は本文の段に合わせ、漂うでは場いっぱいに開く */
.stage-wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.members-field[data-mode="drift"] .stage-wrap {
  max-width: none;
  padding-inline: 0;
}

/* 器: どのモードでも 20 人がこの中に収まり、内側にスクロールを作らない。
   高さはモードによらず --stage-h（切替で面の高さが動かない） */
.members-stage {
  position: relative;
  height: var(--stage-h);
  background: var(--ink-2);
  border: 1px solid var(--rule-on-ink);
  overflow: hidden;
}
/* 一覧はアコーディオンなので内容の高さに合わせる（内側にスクロールを作らない。site-plan §5 / E2E @v2 4） */
.members-stage[data-mode="list"] {
  height: auto;
  min-height: var(--stage-h);
  overflow: visible;
}
/* 漂う: 枠も塗りも外し、周囲と地続きにする */
.members-field[data-mode="drift"] .members-stage {
  background: transparent;
  border: 0;
}

.note { padding-block: var(--space-4); color: var(--on-ink-soft); font-size: var(--text-sm); }

/* ---- 14a. 一覧（list）: アコーディオン（v5）。行を押すとその場で開く ---- */
.roster-wrap {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-6);
}
.roster {
  list-style: none;
}
.roster .member-item { border-top: 1px solid var(--rule-on-ink); }
.roster-row {
  --rnear: 0;   /* ポインタの近さ 0〜1。JS が pointermove のたびに書く */
  display: flex;
  align-items: flex-start;
  gap: 0 var(--space-3);
  width: 100%;
  /* 近づくほど縦に伸びる。行そのものが起き上がるように */
  padding: calc(var(--space-3) + var(--rnear) * 15px) var(--space-4);
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding 180ms var(--ease-out);
}
/* 左の四角。ホバー／フォーカスで円の波が広がって消える（reduced-motion では明るくなるだけ） */
.roster-mark {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-top: 0.62em;
  background: var(--on-ink-soft);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.roster-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;
  border: 1px solid var(--on-ink-soft);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
.roster-row:hover .roster-mark,
.roster-row:focus .roster-mark,
.roster-row[aria-expanded="true"] .roster-mark { background: var(--on-ink); }
.roster-row:hover .roster-mark::after,
.roster-row:focus .roster-mark::after {
  animation: mark-wave 820ms var(--ease-out) infinite;
}
@keyframes mark-wave {
  from { opacity: 0.75; transform: scale(0.4); }
  to   { opacity: 0;    transform: scale(3); }
}

/* 開いている行の印。四角が円に変わり、まわりに灯のオーラをまとう。
   マウスが乗っている間だけ、そのオーラが息をする（燃えているように） */
.roster-row[aria-expanded="true"] .roster-mark {
  border-radius: 50%;
  background: rgba(var(--glow), 0.95);
}
.roster-row[aria-expanded="true"] .roster-mark::after {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 0;
  background: radial-gradient(circle, rgba(var(--glow), 0.5) 0%, rgba(var(--glow), 0.16) 44%, rgba(var(--glow), 0) 72%);
  opacity: 1;
  transform: scale(1);
  animation: none;
}
.roster-row[aria-expanded="true"]:hover .roster-mark::after,
.roster-row[aria-expanded="true"]:focus .roster-mark::after {
  animation: mark-burn 1500ms ease-in-out infinite alternate;
}
@keyframes mark-burn {
  from { opacity: 0.6; transform: scale(0.88); }
  to   { opacity: 1;   transform: scale(1.28); }
}

.roster-main { flex: 1 1 auto; min-width: 0; }
.roster-head {
  display: flex;
  align-items: baseline;
  gap: 0 var(--space-3);
  white-space: nowrap;
}
.roster-theme {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--on-ink);
}
.roster-person {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--on-ink-soft);
}
.roster-label {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--on-ink-soft);
}
/* 説明は高さを先に取っておき、ホバー／フォーカスで浮き上がる（下の行が動かない） */
.roster-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  height: 1.55em;
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--on-ink-soft);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.roster-row:hover .roster-desc,
.roster-row:focus .roster-desc {
  opacity: 1;
  transform: none;
}
/* 開いている行では略歴は下の面に全文が出ているので、抜き書きは出さない */
.roster-row[aria-expanded="true"] .roster-desc { opacity: 0; transform: translateY(6px); }
.roster-row:hover .roster-theme,
.roster-row:focus-visible .roster-theme {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

/* 開いた面: 写真＋略歴＋その人の対談。塗らない・角丸 0・影なし。区切りは細罫線だけ */
.roster-panel {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-4) var(--space-6) 21px;
  border-top: 1px solid var(--rule-on-ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.roster-panel.is-open { opacity: 1; transform: none; }
.panel-media { flex: 0 0 auto; }
.panel-media img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border: 1px solid var(--rule-on-ink);
  filter: saturate(0.82) brightness(0.9) contrast(1.04);
}
.panel-body { flex: 1 1 auto; min-width: 0; }
.panel-bio {
  max-width: 40em;
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--on-ink);
}
.panel-videos { margin-top: var(--space-4); }
.panel-video-list { list-style: none; }
.panel-video-list li + li { margin-top: 2px; }
.panel-video {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--on-ink-soft);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.panel-video:hover,
.panel-video:focus-visible { color: var(--on-ink); }
.panel-play { font-size: 10px; line-height: 1; }
.panel-video-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
}
.panel-note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--on-ink-soft);
}

.roster-pager {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule-on-ink);
}
.roster-pager .text-btn + .text-btn { border-left: 1px solid var(--rule-on-ink); }

@media (max-width: 767px) {
  .roster-wrap { padding: var(--space-3) var(--space-3); }
  .roster-row { padding: 6px var(--space-2); }
  /* 1 行目に 主題（あふれたら省略記号）と 第◯回、2 行目に 氏名・肩書 */
  .roster-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-2);
  }
  /* 狭い幅では主題を切らずに 2 行まで折り返す（切れるのは氏名・肩書の側） */
  .roster-theme {
    grid-row: 1;
    grid-column: 1;
    font-size: 15px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .roster-label { grid-row: 1; grid-column: 2; justify-self: end; margin-left: 0; font-size: var(--text-xs); }
  .roster-person { grid-row: 2; grid-column: 1 / -1; font-size: var(--text-xs); line-height: 1.6; }
  .roster-desc { font-size: var(--text-xs); }
  .roster-panel {
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-2) var(--space-6) 17px;
  }
  .panel-bio { font-size: var(--text-xs); line-height: 1.85; }
}

/* ---- 14b. 顔（faces）: 円の頭文字。氏名は常に見せ、肩書はホバー／フォーカスで出る（誰かはホバーしなくても分かるように） ---- */
.faces {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 1024 未満は 4 列 × 5 行 */
  gap: 6px var(--space-2);
  align-content: space-evenly;
  height: 100%;
  padding: var(--space-2) var(--space-4);
  margin: 0;
}
@media (min-width: 1024px) {
  .faces {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px var(--space-6);
    padding: 10px var(--space-6);
  }
}
.face-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.face {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--rule-on-ink);
  border-radius: 0;
  background: var(--ink-3);
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--on-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.face.is-wide { font-size: 18px; }
/* 写真は頭文字の上に重ねる。読み込めなければ頭文字がそのまま残る */
.face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  /* 出自の違う 20 枚を一つの組写真に見せる。地の明るい写真が黒地から浮くのを抑える */
  filter: saturate(0.82) brightness(0.9) contrast(1.04);
  transition: filter var(--dur-fast) var(--ease-out);
}
.face-btn:hover .face img,
.face-btn:focus-visible .face img { filter: saturate(0.95) brightness(1) contrast(1); }
.face-cap {
  margin-top: var(--space-1);
  text-align: center;
}
.face-name {
  display: block;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--on-ink);
}
.face-title {
  display: block;
  font-family: var(--font-jp);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--on-ink-soft);
  opacity: 0;   /* 場所は常に確保（器の高さが変わらない）。ホバー／フォーカスで見える */
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* 5 列 × 4 行になる 1024 以上だけ円と字を大きくする（4 列 × 5 行の幅で大きくすると器にあふれる） */
@media (min-width: 1024px) {
  .face { width: 84px; height: 84px; font-size: 28px; }
  .face.is-wide { font-size: 20px; }
  .face-name { font-size: 13px; }
  .face-title { font-size: 12px; }
}
.face-btn:hover .face,
.face-btn:focus-visible .face { border-color: var(--on-ink-soft); }
.face-btn:hover .face-title,
.face-btn:focus-visible .face-title { opacity: 1; }
@media (hover: none) {
  .face-title { opacity: 1; }   /* タッチ端末にはホバーが無いので肩書を常に見せる（高さは確保済み） */
}
/* 1024 未満（4 列 × 5 行）: 四角を 72px のまま器に収めるため、余白と字を詰める */
@media (max-width: 1023px) {
  .faces { gap: 4px var(--space-2); padding: 6px var(--space-4); }
  .face-name { font-size: 11px; }
  .face-title { font-size: 10px; }
}
@media (max-width: 479px) {
  .faces { gap: 4px 6px; padding: 6px; }
}

/* 入場（motion #3）: 30ms ずつの段差フェード。js-motion の下だけ */
html.js-motion .faces .member-item {
  animation: faces-in var(--dur-reveal) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes faces-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- 14c. 漂う（drift）: 左から右へ流れる風。v3 で作り直し（site-plan §5C） ----
 * 毎フレーム動かすのは .orb の transform と opacity だけ。
 * --near（0〜1、0.2 刻み）は光彩の大きさとサムネの濃さだけを動かす（どちらも合成で済む）。
 * filter を変えるのは .is-near の付け外しだけ（240ms の遷移）。 */
.drift-toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 8;
}
.drift-field {
  position: absolute;
  inset: 0;
  overflow: hidden;   /* 風は器の外へ出る。器の内側にスクロールは作らない */
  overflow: clip;     /* clip はスクロールコンテナを作らない（フォーカスで中身がずれない） */
}
.orb {
  position: absolute;
  left: 0;
  top: 48px;          /* 上の 48px は一時停止ボタンの行（JS は高さから 48 を引く） */
  width: 208px;          /* 主題（最大 12 字）が 1 行に収まる幅 */
  margin: 0;
  padding: 48px 0 4px;   /* 上の空きは光点とサムネの場所。光彩の裾に文字を入れない */
  border: 0;
  background: transparent;
  color: var(--on-ink-soft);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --near: 0;
}
/* 合成レイヤーはループが走っている間だけ持つ（止めている・画面外のときは手放す） */
.drift-field.is-running .orb { will-change: transform, opacity; }
.orb:focus-visible { outline-offset: -2px; }   /* 端の光彩でも枠が器の overflow に欠けない */
/* ホバー・フォーカス・固定の間は光を満たす。ループは held の --near を計算しないので、
   その区間の値は CSS が受け持つ（JS は inline の --near を外して譲る） */
.orb.is-held { z-index: 5; --near: 1; }
.orb.is-near { z-index: 4; }

/* 光彩。放射グラデは一度だけ描き、以後は scale だけを動かす */
.orb-glow {
  position: absolute;
  left: 50%;
  top: 21px;
  width: 128px;
  height: 128px;
  /* 静止は 0.58、近づくと 1.18 まで育つ。ホバーで「完全に光が大きくなる」ことを見た目で分かる差にする */
  transform: translate(-50%, -50%) scale(calc(0.58 + 0.60 * var(--near)));
  background: radial-gradient(circle, rgba(var(--glow), 0.24) 0%, rgba(var(--glow), 0.09) 34%, rgba(var(--glow), 0) 70%);
  pointer-events: none;
  transition: transform 200ms var(--ease-out);
}
/* 光点。光彩の芯 */
.orb-glow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(var(--glow), 0.72);
  transition: background-color 240ms var(--ease-out);
}
.orb.is-near .orb-glow::after,
.orb.is-held .orb-glow::after { background: rgba(var(--glow), 1); }

/* 円のサムネ。縁は放射のマスクでやわらげ、四角い面を出さない */
.orb-thumb {
  position: absolute;
  left: 50%;
  top: 21px;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 50%;
  opacity: calc(var(--near) * 0.9);
  transform: translate(-50%, -50%) scale(calc(0.6 + 0.4 * var(--near)));
  -webkit-mask-image: radial-gradient(circle, #000 52%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle, #000 52%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.orb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* 押せる位置に入った瞬間の跳ね。近づく間の 0.58→1.18 を土台に、当たり判定に入ったら一段上へ。
   少し行き過ぎる曲線で「急に大きくなった」と分かるようにする */
.orb.is-held .orb-glow {
  transform: translate(-50%, -50%) scale(1.62);
  transition: transform 150ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
.orb.is-held .orb-thumb {
  opacity: 1;
  border-color: rgba(var(--glow), 0.5);
  transform: translate(-50%, -50%) scale(1.3);
  transition: opacity 150ms var(--ease-out), transform 150ms cubic-bezier(0.2, 1.5, 0.4, 1), border-color 150ms var(--ease-out);
}

/* ラベル。ぼかさない（v4）。サムネと同じく --near で小さい字から大きくなる。
   起点は上辺の中央にして、光彩の側ではなく外へ向かって育てる */
.orb-label {
  position: relative;
  display: block;
  transform-origin: top center;
  transform: scale(calc(0.72 + 0.28 * var(--near)));
  opacity: calc(0.85 + 0.15 * var(--near));
  transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out);
}

.orb-theme {
  display: block;
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-right: -0.1em;   /* 字間の右余りを詰めて中央に見せる */
  white-space: nowrap;    /* 折り返すと光彩の高さが揃わず、レーンの間隔が崩れる */
  color: var(--on-ink-soft);
  transition: color 240ms var(--ease-out);
}
.orb-meta {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--on-ink-soft);
  transition: color 240ms var(--ease-out);
}
.orb-meta .orb-person { font-family: var(--font-jp); }
.orb.is-near .orb-theme,
.orb.is-held .orb-theme,
.orb.is-near .orb-meta,
.orb.is-held .orb-meta,
.orb:focus-visible .orb-theme,
.orb:focus-visible .orb-meta { color: var(--on-ink); }

.orb-date-short { display: none; }
@media (max-width: 767px) {
  .orb { width: 158px; padding: 42px 0 4px; }
  .orb-glow { top: 18px; width: 108px; height: 108px; }
  .orb-thumb { top: 18px; width: 38px; height: 38px; }
  .orb-theme { font-size: 11px; letter-spacing: 0.06em; margin-right: -0.06em; }
  .orb-meta { font-size: 9px; letter-spacing: 0.02em; }
}
@media (max-width: 479px) {
  .orb-date { display: none; }
  .orb-date-short { display: inline; }
}

/* ---- 14d. 光彩の脇に出るカード（覆いにしない。器の内側に収まる） ---- */
.orb-card {
  position: absolute;
  z-index: 7;
  width: 260px;
  max-height: calc(100% - 16px);
  padding: var(--space-4);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--rule-on-ink);
  text-align: left;
}
.orb-card .card-name {
  display: block;
  padding-right: var(--space-6);
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: var(--on-ink);
}
.orb-card .card-title {
  display: block;
  margin-top: 2px;
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-ink-soft);
}
.orb-card .card-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--on-ink-soft);
}
.orb-card .card-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;   /* 略歴 2〜3 文はここで収まる。途中で切らない */
  line-clamp: 6;
  overflow: hidden;
  margin-top: var(--space-3);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  line-height: 1.9;
  color: var(--on-ink);
}
.orb-card .card-watch {
  margin-top: var(--space-3);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule-on-ink);
  background: transparent;
  color: var(--on-ink);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.orb-card .card-watch:hover,
.orb-card .card-watch:focus-visible { border-color: var(--on-ink-soft); }
.orb-card .card-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--on-ink);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}
/* 768〜1023 は器が狭く、260px だと光彩の脇（12px 空け）に入らず上下へ逃げてしまう。
   上下へ出すと、カードが下のレーンの光彩を覆ってホバーが届かない。幅だけ詰めて「脇に出す」を保つ */
@media (min-width: 768px) and (max-width: 1023px) {
  .orb-card { width: 200px; }
}
@media (max-width: 767px) {
  .orb-card { width: 200px; padding: var(--space-3); }
  .orb-card .card-name { font-size: var(--text-base); }
  .orb-card .card-bio { -webkit-line-clamp: 5; line-clamp: 5; }
}

/* ---------- 15. フッター ---------- */
.site-footer {
  padding-block: var(--space-12);
  border-top: 1px solid var(--rule-on-ink);
  color: var(--on-ink);
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-8);
}
.copyright {
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--on-ink-soft);
  white-space: nowrap;
}
.footer-nav ul { flex-wrap: wrap; }

@media (max-width: 767px) {
  .footer-grid { flex-direction: column; align-items: flex-start; }
}

/* ---------- 16. 詳細ダイアログ（動画カードと参加者で共用） ---------- */
.detail {
  width: min(720px, calc(100vw - 2 * var(--space-4)));
  max-width: none;
  max-height: calc(100vh - 2 * var(--space-4));
  margin: auto;
  padding: 0;
  border: 1px solid var(--rule-on-ink);
  background: var(--ink-2);
  color: var(--on-ink);
  overflow: auto;
}
.detail::backdrop { background: rgba(15, 15, 15, 0.84); }
.detail-inner {
  position: relative;
  padding: var(--space-8) var(--space-6) var(--space-8);
  background: var(--ink-2);
}
@media (min-width: 768px) {
  .detail-inner { padding: var(--space-8) var(--space-8) var(--space-12); }
}
.dialog-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--on-ink);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.detail .member-name {
  padding-right: var(--space-12); /* 閉じるボタンと重ねない */
  font-size: var(--text-lg);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.detail .member-title {
  margin-top: var(--space-1);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  color: var(--on-ink-soft);
  line-height: 1.6;
}
.detail .member-label {
  margin-top: var(--space-1);
  font-family: var(--font-body);  /* 数字と中黒は EB Garamond、漢字は Noto Serif JP に落ちる */
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--on-ink-soft);
  line-height: 1.6;
}
.detail .member-title:empty,
.detail .member-label:empty,
.detail .member-bio:empty { display: none; }

.detail .embed { margin-top: var(--space-6); }
.embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--ink-bg);
}
.embed-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.embed-frame iframe,
.embed-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border: 1px solid var(--rule-on-ink);
  background: rgba(15, 15, 15, 0.78);   /* 静止画の上でも 8:1 以上を保つ帳 */
  color: var(--on-ink);
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  text-align: center;
}
.embed-empty .play-mark {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  line-height: 1;
  letter-spacing: 0;
  color: var(--on-ink);
}

.detail .member-bio {
  margin-top: var(--space-6);
  max-width: var(--measure);
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 2;
}

/* ---------- 17. reduced-motion: 何も動かさない（animation-duration: 0s ではなく animation: none） ---------- */
/* ---------- COMING SOON（まだ公開していない回） ----------
   押せない。氏名・写真の代わりに英字の札と第◯回だけを出す。ホバーの反応は止める */
.soon-mark {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.24em;
  line-height: 1.6;
  color: var(--on-ink-soft);
  white-space: nowrap;
}
.thumb-soon { display: grid; place-items: center; }
.thumb-soon::after { display: none; }
/* YouTube の公開を待っている回: 静止画を帳で沈め、その上に札を置く */
.thumb-awaiting { display: grid; place-items: center; }
.thumb-awaiting::after { background: rgba(15, 15, 15, 0.88); }   /* 静止画の題字が札と競らない濃さ */
.thumb-awaiting .soon-mark { position: relative; z-index: 1; color: var(--on-ink); }
.embed-empty.is-awaiting .soon-mark { color: var(--on-ink); }
.video-card.is-soon { cursor: default; }
.video-card.is-soon .card-theme { font-weight: 400; color: var(--on-ink-soft); }
.video-card.is-soon:hover .thumb { border-color: var(--rule-on-ink); }
.video-card.is-soon:hover .card-theme { text-decoration: none; }

.roster-row[data-soon="true"] { cursor: default; }
.roster-row[data-soon="true"] .roster-theme {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  letter-spacing: 0.24em;
  color: var(--on-ink-soft);
}
.roster-row[data-soon="true"]:hover .roster-mark { background: var(--on-ink-soft); }
.roster-row[data-soon="true"]:hover .roster-mark::after { animation: none; }
.roster-row[data-soon="true"]:hover .roster-theme { text-decoration: none; }

.face-btn:disabled { cursor: default; }
.face-btn:disabled:hover .face { border-color: var(--rule-on-ink); }
.face .soon-mark {
  padding-inline: 4px;
  font-size: 9px;
  letter-spacing: 0.16em;
  white-space: normal;
  text-align: center;
}
.face-btn[data-soon="true"] .face-name { font-weight: 400; color: var(--on-ink-soft); }

/* ---------- 参加者が少ないとき（8 人以下。.is-few は JS が付ける） ----------
   一覧は行が減るだけ。顔と漂うは、減った分だけ一つひとつを大きくする */
.faces.is-few {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6);
}
.faces.is-few .face { width: 148px; height: 148px; font-size: 44px; }
.faces.is-few .face-name { font-size: 15px; }
.faces.is-few .face-title { font-size: 13px; }
.faces.is-few .face .soon-mark { font-size: 12px; letter-spacing: 0.2em; }
@media (max-width: 1023px) {
  .faces.is-few .face { width: 132px; height: 132px; }
}
@media (max-width: 479px) {
  .faces.is-few {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3);
  }
  .faces.is-few .face { width: 120px; height: 120px; font-size: 36px; }
  .faces.is-few .face-name { font-size: 13px; }
  .faces.is-few .face-title { font-size: 11px; }
  .faces.is-few .face .soon-mark { font-size: 11px; }
}

/* 一覧: 行が少ないので器の最小の高さ（他のモードと揃える分）を外し、下に空きを残さない */
.members-stage[data-mode="list"]:has(.roster-wrap.is-few) { min-height: 0; }

/* 漂う: 寸法は main.js の measure()（orbW）と対 */
.drift-field.is-few .orb { width: 290px; padding: 72px 0 6px; }
.drift-field.is-few .orb-glow { top: 32px; width: 192px; height: 192px; }
.drift-field.is-few .orb-glow::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.drift-field.is-few .orb-thumb { top: 32px; width: 68px; height: 68px; }
.drift-field.is-few .orb-theme { font-size: 18px; }
.drift-field.is-few .orb-meta { font-size: 13px; }
@media (max-width: 767px) {
  .drift-field.is-few .orb { width: 210px; padding: 58px 0 4px; }
  .drift-field.is-few .orb-glow { top: 25px; width: 150px; height: 150px; }
  .drift-field.is-few .orb-thumb { top: 25px; width: 54px; height: 54px; }
  .drift-field.is-few .orb-theme { font-size: 14px; }
  .drift-field.is-few .orb-meta { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner,
  .hero-logo,
  .hero-thesis,
  .hero-sub { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .faces .member-item { animation: none !important; }
  .prose p,
  .sec-head h2,
  .eyebrow,
  .lede {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .section::before { animation: none !important; transform: scaleX(1) !important; }
  /* 漂う: --near は書かれない。サムネは薄く出したまま、ラベルは等倍で読める状態に（台帳 #8） */
  .orb-label { transform: none; opacity: 1; }
  .orb-thumb { opacity: 0.5; transform: translate(-50%, -50%) scale(0.85); }
  .orb-glow { transform: translate(-50%, -50%) scale(0.72); }
  /* 一覧（v5）: 波は出さず印が明るくなるだけ。説明と開閉は遷移なしで即時（getAnimations() を空に保つ） */
  /* 波と燃え方は止める。ただし開いている行のオーラは静かに残す（状態の目印なので消さない） */
  .roster-mark::after { animation: none !important; display: none; }
  .roster-row[aria-expanded="true"] .roster-mark::after { display: block; }
  .roster-mark { transition: none; }
  .roster-row { transition: none; }
  .roster-desc { transition: none; }
  .roster-panel { transition: none; }
}