/* =========================================================
   articles.css — 記事の一覧（articles.html）と本文（article.html）
   読み物なので「紙」に寄せる。枠で囲まない・光らせない・角丸は1種類。
   区切りは余白と 1px の線。色は写真と、押せるもの・今いる所だけ。
   （判断の根拠は .claude/skills/jp-web-craft）
   ========================================================= */

.arts, .art { line-break: strict; }
/* 見出しの改行位置はデータで決める（articles.js の titleLines）。広い画面では行の途中で折らない */
.tl { display: block; }
@media (min-width: 900px) { .tl { white-space: nowrap; } }

/* =============== 一覧 =============== */
.arts { max-width: 1180px; }
.arts .doc-title { font-size: clamp(38px, 6vw, 76px); }
.arts-list { margin-top: clamp(48px, 8vh, 88px); }

.acard { display: grid; color: var(--ink); text-decoration: none; }
.acard-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10;
  border-radius: var(--rad); background: var(--surface); }
.acard-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease); }
a.acard:hover .acard-cover img { transform: scale(1.03); }

.acard-body { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.acard-kick { font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.acard-title { font-family: var(--font-display); font-weight: 400; font-feature-settings: "palt";
  font-size: clamp(22px, 2vw, 26px); line-height: 1.35; letter-spacing: 0; text-wrap: balance;
  transition: color .2s ease; }
a.acard:hover .acard-title { color: var(--acid); }
.acard-sub { font-size: 14px; line-height: var(--lh-ui); color: var(--ink-2); }
.acard-ex { font-size: 15px; line-height: var(--lh-read); letter-spacing: .04em; color: var(--ink); }
.acard-meta { display: flex; align-items: center; gap: 18px; margin-top: 6px;
  font: 400 13px/1 var(--font-mono); color: var(--faint); }
.acard-go { margin-left: auto; font: 500 14px/1 var(--font-jp); color: var(--ink);
  border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: color .2s, border-color .2s; }
a.acard:hover .acard-go { color: var(--acid); border-color: var(--acid); }

/* 話し手・聞き手 */
.acard-people, .art-people { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.pp { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.pp img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.pp small { display: block; font-size: 12px; font-weight: 400; color: var(--faint); }
.pp-x { display: none; }

/* 新しい1本：写真を大きく、文字は右に。枠は付けない */
.acard--feature { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 64px);
  align-items: end; padding-bottom: clamp(40px, 6vh, 64px); border-bottom: 1px solid var(--line); }
.acard--feature .acard-body { padding-top: 0; gap: 16px; }
.acard--feature .acard-title { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.3; }
.acard--feature .acard-meta { margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }

/* 2本目以降 */
.acard-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 48px clamp(24px, 3vw, 40px); margin-top: 48px; }

/* まだ書かれていない回は、枠を並べず1行で知らせる */
.arts-next { margin: 28px 0 0; font-size: 14px; line-height: var(--lh-ui); color: var(--faint); }

@media (max-width: 860px) {
  .acard--feature { grid-template-columns: 1fr; }
  .acard--feature .acard-body { padding-top: 22px; }
}

/* =============== 本文 =============== */
.art { position: relative; z-index: 10; isolation: isolate;
  padding: calc(var(--navh) + clamp(28px, 6vh, 64px)) var(--pad) 110px; }
/* 光る縁の上に長い文を置かない。本文の後ろは暗い紙にする */
.art::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(5,7,6,.9); }

/* 頭：左に見出し、右に表紙 */
.art-hero { max-width: 1240px; margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: end; }
.art-kick { margin: 0; font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.art-kick a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); }
.art-kick a:hover { color: var(--acid); text-decoration-color: var(--acid); }
.art-title { font-family: var(--font-display); font-weight: 400; font-synthesis: none; font-feature-settings: "palt";
  margin: 22px 0 0; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.25; letter-spacing: 0; }
.art-sub { margin: 20px 0 0; font-size: clamp(15px, 1.3vw, 17px); line-height: var(--lh-ui); color: var(--ink-2); }
.art-meta { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.art-people .pp img { width: 40px; height: 40px; }
.art-facts { margin: 0; display: flex; gap: 18px; font: 400 13px/1 var(--font-mono); color: var(--faint); }
.art-cover { margin: 0; }
.art-cover img { display: block; width: 100%; height: auto; border-radius: var(--rad); }
.art-cover figcaption { margin-top: 12px; font-size: 13px; line-height: var(--lh-ui); color: var(--faint); }

/* 本文の列。広い画面では左に目次、右の余白に注 */
.art-layout { max-width: 1240px; margin: clamp(64px, 10vh, 112px) auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 660px) minmax(0, 1fr); column-gap: 56px; }
.art-toc { grid-column: 1; justify-self: end; width: 100%; max-width: 220px;
  position: sticky; top: calc(var(--navh) + 32px); align-self: start; }
.art-body { grid-column: 2; min-width: 0; font-size: 16px; line-height: var(--lh-read); letter-spacing: .04em; color: var(--ink); }
.art-body p { margin: 0; }
/* 地の文が続くとき（自伝など）は段落の間をあける */
.chap > p + p, .art-body > p + p { margin-top: 1.3em; }
.art-loading { color: var(--faint); font-size: 14px; }

.toc-kick { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
.art-toc ol { list-style: none; margin: 0; padding: 0; }
.art-toc a { display: grid; grid-template-columns: 26px 1fr; padding: 10px 0; font-size: 13px; line-height: 1.6;
  color: var(--faint); text-decoration: none; border-top: 1px solid var(--line); transition: color .2s; }
.art-toc a span { font: 400 12px/1.6 var(--font-mono); }
.art-toc a:hover { color: var(--ink); }
.art-toc a.is-on { color: var(--ink); }
.art-toc a.is-on span { color: var(--acid); }

/* リード */
.art-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 2; color: var(--ink); font-weight: 500; }

/* プロフィール：枠で囲まず、上下の線で区切る */
.prof { margin-top: 64px; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; }
.prof-kick { display: none; }
.prof-icon { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; }
.prof-name { margin-top: 18px !important; font-family: var(--font-display); font-feature-settings: "palt"; font-size: 24px; line-height: 1.3; }
.prof-yomi { margin-top: 4px !important; font-size: 12px; color: var(--faint); letter-spacing: .1em; line-height: 1.5; }
.prof-org { margin-top: 10px !important; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.prof-line { list-style: none; margin: 0; padding: 0; }
.prof-line li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px;
  padding: 10px 0; font-size: 14px; line-height: var(--lh-ui); border-top: 1px solid var(--line); }
.prof-line li:first-child { border-top: 0; padding-top: 0; }
.prof-line time { font: 400 13px/1.7 var(--font-mono); color: var(--ink); white-space: nowrap; }
.prof-line time span { color: var(--faint); }
.prof-line p { color: var(--ink-2); }

/* 章 */
.chap { scroll-margin-top: calc(var(--navh) + 24px); }
.chap-head { margin: 112px 0 44px; }
.chap-no { font: 400 13px/1 var(--font-mono); color: var(--acid); }
.chap-title { margin: 16px 0 0; font-family: var(--font-display); font-weight: 400; font-feature-settings: "palt";
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.35; letter-spacing: 0; text-wrap: balance; }
.chap-deck { margin-top: 18px !important; font-size: 15px; line-height: var(--lh-read); color: var(--ink-2); }

/* 発言。聞き手は控えめに、話し手をはっきり */
.say { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; margin: 32px 0; }
.say-icon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-top: 6px; }
.say-name { font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: .06em; color: var(--faint); margin: 2px 0 6px !important; }
.say-main p + p { margin-top: 1em; }
.say--interviewer .say-main p:not(.say-name) { color: var(--ink-2); }
.say--subject .say-name { color: var(--acid); }

/* 用語の注。広い画面では本文の右の余白へ。囲まず、上の線だけ */
.note { margin: 32px 0; padding-top: 14px; border-top: 1px solid var(--line-2);
  font-size: 13.5px; line-height: 1.8; letter-spacing: .02em; color: var(--ink-2); }
.note-kick { display: none; }
.note-term { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.note-term small { display: block; font-size: 11.5px; font-weight: 400; color: var(--faint); letter-spacing: .08em; }
.note p + p, .note-term + p { margin-top: 8px !important; }
.note ul { margin: 8px 0 0; padding: 0; list-style: none; }
.note li { margin-top: 6px; }
.note strong { color: var(--ink); }

/* 画像。並べたものは高さがそろう（article.js が縦横比を --r に入れる） */
.fig { margin: 48px 0; }
.fig-imgs { display: flex; gap: 12px; align-items: flex-start; }
.fig-cell { flex: var(--r, 1.5) 1 0; min-width: 0; display: block; padding: 0; border-radius: var(--rad); overflow: hidden;
  background: var(--surface); cursor: zoom-in; opacity: 0; transition: opacity .5s ease; }
.fig-cell.is-in { opacity: 1; }
.fig-cell img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease); }
.fig-cell:hover img { transform: scale(1.02); }
.fig--n1 { max-width: min(100%, calc(var(--r, 1.5) * 560px)); margin-left: auto; margin-right: auto; }
.fig figcaption { margin-top: 12px; font-size: 13px; line-height: var(--lh-ui); color: var(--faint); letter-spacing: .02em; }

/* YouTube：押すまでは写真と再生ボタンだけ */
.fig--video .yt, .fig--video .yt-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  border-radius: var(--rad); overflow: hidden; background: #000; }
.fig--video .yt { cursor: pointer; }
.fig--video .yt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; opacity: .85; }
.fig--video .yt:hover img { transform: scale(1.02); opacity: 1; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: rgba(0,0,0,.6); box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); transition: background-color .2s; }
.yt-play::after { content: ""; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff; }
.fig--video .yt:hover .yt-play { background: var(--acid); box-shadow: none; }
.fig--video .yt:hover .yt-play::after { border-left-color: #050706; }

/* 抜き出した言葉：記号で飾らず、書体と余白だけで立てる */
.pq { margin: 80px 0; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pq blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-feature-settings: "palt";
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1.6; letter-spacing: 0; color: var(--ink); text-wrap: pretty; }
.pq figcaption { margin-top: 18px; font-size: 13px; color: var(--faint); letter-spacing: .04em; }

.art-aside { color: var(--ink-2); font-size: 14px; }
.art-credit { margin-top: 96px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; line-height: 1.6; }
.art-credit span { font-size: 12px; color: var(--faint); margin-right: 10px; }

/* 読み進めた分だけ伸びる線 */
.art-progress { position: fixed; left: 0; right: 0; top: var(--navh); height: 1px; z-index: 81; pointer-events: none; }
.art-progress i { display: block; height: 100%; background: var(--acid); transform-origin: 0 50%; transform: scaleX(0); }

/* ほかの記事 */
.art-more { max-width: 1180px; margin: 128px auto 0; padding-top: 56px; border-top: 1px solid var(--line); }
.art-more-kick { display: none; }
.art-more-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); }
.art-more .arts-list { margin-top: 36px; }
.art-more .acard-row { margin-top: 0; }
.art-back { margin-top: 40px !important; }
.art .doc-foot { max-width: 1180px; margin-left: auto; margin-right: auto; }
.art-missing { max-width: 720px; margin: 10vh auto 0; }

/* 拡大表示 */
.lb { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink); }
.lb::backdrop { background: rgba(0,0,0,.94); }
.lb[open] { display: grid; place-items: center; animation: fsIn .3s var(--ease); }
.lb-fig { margin: 0; max-width: min(92vw, 1400px); display: grid; gap: 14px; }
.lb-fig img { max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: 0 auto; display: block; border-radius: var(--rad); }
.lb-fig figcaption { display: flex; gap: 16px; font-size: 13px; line-height: var(--lh-ui); color: var(--ink-2); }
.lb-n { font: 400 12px/1.6 var(--font-mono); color: var(--ink); white-space: nowrap; }
.lb-x, .lb-p, .lb-q { position: fixed; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-2); background: #000; color: var(--ink); font-size: 18px;
  transition: border-color .2s, color .2s; }
.lb-x:hover, .lb-p:hover, .lb-q:hover { border-color: var(--ink); }
.lb-x { top: 20px; right: 20px; }
.lb-x i { position: absolute; left: 14px; right: 14px; top: 50%; height: 1.5px; background: currentColor; }
.lb-x i:first-child { transform: rotate(45deg); } .lb-x i:last-child { transform: rotate(-45deg); }
.lb-p { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-q { right: 20px; top: 50%; transform: translateY(-50%); }
html.lb-open { overflow: hidden; }

/* 広い画面：注を右の余白へ */
@media (min-width: 1180px) {
  .note { float: right; clear: right; width: 236px; margin: 8px -292px 20px 0; }
}
/* 目次が入らない幅 */
@media (max-width: 1179px) {
  .art-layout { grid-template-columns: minmax(0, 660px); justify-content: center; }
  .art-toc { display: none; }
  .art-body { grid-column: 1; }
}
@media (max-width: 900px) {
  .art-hero { grid-template-columns: 1fr; }
  .art-cover { order: -1; }
  .prof { grid-template-columns: 1fr; gap: 24px; }
  .prof-id { display: grid; grid-template-columns: 80px 1fr; column-gap: 20px; align-items: center; }
  .prof-icon { width: 80px; height: 80px; grid-row: span 3; }
  .prof-name { margin-top: 0 !important; }
}
@media (max-width: 560px) {
  .art-body { font-size: 15.5px; }
  .say { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .say-icon { width: 32px; height: 32px; }
  .fig-imgs { gap: 6px; }
  .prof-line li { grid-template-columns: 1fr; gap: 0; }
  .art-meta { display: grid; }
  .lb-p, .lb-q { top: auto; bottom: 20px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-cell { opacity: 1; transition: none; }
}