/* 組版は 2026-10-18「十の言葉を読む」（英語版）に揃える。読む時刻で変わるのは色だけ（lente.js） */
:root {
  --ink: #1f2328;
  --ink-soft: #4a5058;
  --ink-faint: #5d636a;
  --rule: #dcdfe2;
  --paper: #ffffff;
  --tint: #f6f7f5;
  --accent: #295E7E;
  --grain-strength: 0.06;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.4 0 0 0 -0.7  2.4 0 0 0 -0.7  2.4 0 0 0 -0.7  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sans: "Noto Sans", "Zen Kaku Gothic New", sans-serif;
}
/* 夜（19時〜翌5時）だけは暗い紙に切り替える。明るい紙から連続で移すと、途中で文字が読めなくなるため */
/* 色は <html> に置く（lente.js が <head> で最初の描画の前に決める。ページを移るときに白く光らせない） */
:root.night {
  --ink: #e6e2da; --ink-soft: #c3bdb3; --ink-faint: #9e978c; --rule: #38352f;
  --paper: #201f1d; --tint: #2a2825; --accent: #8db4cc; --grain-strength: 0.05;
  color-scheme: dark;
}
html { background: var(--paper); }
@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 17.5px;
  line-height: 1.95;
  letter-spacing: 0.02em;
  text-rendering: optimizeLegibility;
  transition: background-color 2.4s ease, color 2.4s ease;
  position: relative; isolation: isolate;
}
.book { animation: open 0.7s ease both; }
@keyframes open { from { opacity: 0; } to { opacity: 1; } }
/* 粒: 均一で細かいノイズを薄く重ねる */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; will-change: transform; transform: translateZ(0); pointer-events: none; background-image: var(--grain); background-size: 180px 180px; opacity: var(--grain-strength); }
.book { max-width: 40.5em; margin: 0 auto; padding: 0 1.4rem 8rem; }

h1, h2, h3, h4 { font-weight: 600; }
p { margin: 0 0 1.25em; text-align: justify; text-justify: inter-character; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3, .gist, .sub, nav.toc .t { word-break: auto-phrase; text-wrap: balance; }
/* 本文はふつうの折り方。Safari の text-wrap: pretty は行を早く折り、両端揃えと重なると字間が開く（2026-10-23 iPhone で発覚） */
p { text-wrap: wrap; line-break: strict; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.label { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-faint); display: block; margin-bottom: 0.6rem; }
.front .ch-head .label { display: flex; align-items: center; }
/* 見出し・副題・図の説明は左揃え（両端揃えにすると、短い行の字間がばらける） */
h1, h2, h3, .gist, figcaption, blockquote p, cite, .frag-meta { text-align: left; }

/* 扉（index） */
.title-page { padding: 7rem 0 0; }
.title-page .kicker { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-faint); margin: 0 0 2.4rem; }
.title-page .title-en { font-family: "Newsreader", serif; font-size: clamp(3rem, 9vw, 4.6rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 1.6rem; color: var(--ink); }
.title-page .sub-ja { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.5; margin: 0 0 1.4rem; }
.title-page .colophon { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); line-height: 1.9; }

/* 目次（index） */
nav.toc { margin: 4.5rem 0 2rem; padding: 2.2rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
nav.toc h2 { font-family: "Newsreader", serif; font-weight: 400; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0 0 1.6rem; }
nav.toc ol { list-style: none; margin: 0; padding: 0; }
nav.toc li.part { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 1.4rem 0 0.4rem; }
nav.toc li.part:first-child { margin-top: 0; }
nav.toc li.ch a { display: grid; grid-template-columns: 2.6em 1fr; text-decoration: none; color: var(--ink); padding: 0.3rem 0; }
nav.toc li.ch a:hover .t { border-bottom: 1px solid var(--ink-faint); }
nav.toc .n { color: var(--accent); font-family: "Newsreader", serif; font-weight: 400; font-size: 1.15em; letter-spacing: -0.02em; }
nav.toc .s { display: block; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.7; }
nav.toc .s[lang="en"] { font-family: "Newsreader", serif; font-style: italic; letter-spacing: 0; }
nav.toc .blank .t, nav.toc .blank .n { color: var(--ink-faint); }

/* 読むページ */
.running { display: flex; justify-content: space-between; align-items: baseline; padding: 1.6rem 0 0; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-faint); }
.running a { color: var(--ink-faint); text-decoration: none; }
.running [lang="en"] { font-family: "Newsreader", serif; font-size: 0.95rem; letter-spacing: 0; }
.running a:hover { color: var(--ink-soft); }
.front, article.chapter { padding-top: 6rem; }
.front :is(h1, h2) { font-size: 1.5rem; letter-spacing: 0.04em; margin: 0 0 2rem; }
.ch-head { margin-bottom: 3.4rem; } /* 題のまとまりと本文を離し、題と添える一行は近く（2026-10-23） */
.ch-num { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--accent); display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 0.8rem; }
.ch-num .digit { font-family: "Newsreader", serif; font-size: 1.15rem; line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.ch-head :is(h1, h2) { font-size: 1.85rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; margin: 0 0 0.45rem; }
.ch-head .gist { font-size: 1.08rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.ch-head .gist[lang="en"] { font-family: "Newsreader", serif; font-style: italic; letter-spacing: 0; }

/* 断片 — 日付と出どころ。本文は書き手の言葉をそのまま */
.frag { margin: 0 0 3rem; }
.frag-meta { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 0.9rem; text-align: left; }
.frag-meta time { font-family: "Newsreader", serif; font-size: 1.05rem; letter-spacing: 0; color: var(--accent); margin-right: 0.8em; }
.frag p { margin: 0 0 0.8em; }
.blank { color: var(--ink-faint); }

/* ---- 章の中身: 「十の言葉を読む」の組み方そのまま ---- */
blockquote.epigraph { margin: 0 0 3.8rem 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--accent); }
blockquote.epigraph p { font-size: 1.12rem; line-height: 1.8; margin: 0 0 0.6rem; text-align: left; }
blockquote.epigraph .orig, blockquote.q .orig { font-size: 0.92rem; color: var(--ink-soft); }
blockquote.epigraph cite { display: block; font-style: normal; font-family: var(--sans); font-size: 0.76rem; color: var(--ink-faint); line-height: 1.7; }
.lat { font-style: normal; letter-spacing: 0; }
article.chapter h3 { font-size: 1.2em; letter-spacing: 0.06em; margin: 4rem 0 0.9rem; line-height: 1.45; } /* 節の前は広く、見出しと本文は近く */
h3 .sec { font-family: var(--sans); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-faint); display: block; margin-bottom: 0.4rem; }
blockquote.q { margin: 1.6rem 0 1.8rem; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 1px solid var(--rule); color: var(--ink-soft); }
blockquote.q p { margin: 0 0 0.5rem; font-size: 0.98rem; text-align: left; }
blockquote.q cite { font-style: normal; font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint); }
.today { margin: 1.4rem 0 1.8rem; padding: 1rem 1.2rem; background: var(--tint); border-radius: 2px; font-size: 0.95rem; line-height: 1.85; transition: background-color 2.4s ease; }
.today .label { margin-bottom: 0.3rem; }
.today p { margin: 0; text-align: left; }
.question { margin: 2.4rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--rule); }
.question p { font-size: 1.06rem; margin: 0; text-align: left; }
.hook { margin: 2.6rem 0 0; padding-left: 1.2rem; border-left: 1px solid var(--rule); }
.hook p { margin: 0.2rem 0 0; font-size: 1.04rem; line-height: 1.8; text-align: left; }
.hook .label { margin-bottom: 0.1rem; }
figure { margin: 2.6rem 0; }
figure.bleed { margin-left: -1.4rem; margin-right: -1.4rem; }
figure.bleed figcaption { padding: 0 1.4rem; }
figure img { display: block; width: 100%; height: auto; background: var(--tint); }
figure img.portrait { max-width: 22rem; margin: 0 auto; }
figure img.mono { filter: grayscale(1); }
figure img.lineart { background: none; mix-blend-mode: multiply; }
figure svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
/* 横に長い図は、スマホでは縦に組み直した図に替える（文字が小さくならないように。2026-10-23 ayu「スマホで文字が小さい」） */
figure svg.wide { max-width: 640px; }
figure svg.tall { display: none; max-width: 340px; }
@media (max-width: 600px) { figure svg.wide { display: none; } figure svg.tall { display: block; } }
figcaption { font-family: var(--sans); font-size: 0.76rem; line-height: 1.75; color: var(--ink-faint); margin-top: 0.8rem; padding: 0 0.2rem; }
figcaption b { font-weight: 500; color: var(--ink-soft); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
:root.night figure img { filter: brightness(0.86); }
/* 白地に黒い線だけの絵は、夜は見え方だけ反転する（元の絵は書き換えない） */
:root.night figure img.lineart { filter: brightness(0.9); mix-blend-mode: normal; border-radius: 2px; }  /* 改変を禁じる絵（CC BY-ND）は色を反転しない。夜は少し暗くするだけ（2026-10-23） */
/* 夜の紙では、図の濃い字・線を明るい字に、明るい面を紙の色に入れ替える（字の色を属性で書いた図が、暗い紙に沈まないように） */
:root.night figure svg [fill="#1f2328"] { fill: var(--ink); }
:root.night figure svg [fill="#4a5058"], :root.night figure svg [fill="#6b7178"] { fill: var(--ink-faint); }
:root.night figure svg [stroke="#1f2328"], :root.night figure svg [stroke="#3b4148"], :root.night figure svg [stroke="#4a5058"] { stroke: var(--ink-soft); }
:root.night figure svg [fill="#295E7E"] { fill: var(--accent); }
:root.night figure svg [fill="#c9ced3"] { fill: #57544e; }
:root.night figure svg [stroke="#295E7E"] { stroke: var(--accent); }
:root.night figure svg [fill="#ffffff"], :root.night figure svg [fill="#f6f4ef"], :root.night figure svg [fill="#f6f7f5"], :root.night figure svg [fill="#eef1f3"], :root.night figure svg [fill="#e7ecef"] { fill: var(--tint); }
.sources { margin: 3.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 0.76rem; line-height: 1.8; color: var(--ink-faint); }
.sources h4 { font-family: "Newsreader", serif; font-size: 1.1rem; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-soft); margin: 0 0 0.6rem; }
.sources ol { margin: 0; padding-left: 1.3rem; }
.sources li { margin-bottom: 0.35rem; overflow-wrap: anywhere; }
.sources a { color: var(--ink-soft); }

[hidden] { display: none !important; }

/* スクロールに合わせて、読んでいる断片に灯りがともる */
.fade [data-fade] { transition: opacity 1.1s ease; }
.fade [data-fade]:not(.lit) { opacity: 0.25; }

.ornament { text-align: center; color: var(--ink-faint); letter-spacing: 1.2em; margin: 4.5rem 0 0; font-size: 0.8rem; }

/* 前後の章 */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 4.5rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.pager a { text-decoration: none; color: var(--ink); display: block; }
.pager .label { margin-bottom: 0.2rem; }
.pager .t { font-size: 1.05rem; }
.pager a:hover .t { border-bottom: 1px solid var(--ink-faint); }
.pager .next { text-align: right; grid-column: 2; }

/* 巻末（index）: この本について と、紙の色の設定（さりげなく） */
.endnote { margin-top: 4rem; font-family: var(--sans); font-size: 0.78rem; line-height: 1.85; color: var(--ink-faint); }
.endnote p { text-align: left; margin-bottom: 0.6em; }
.tones { margin-top: 1.4rem; }
.tones button { font: inherit; background: none; border: 0; padding: 0 0.25em; color: var(--ink-faint); cursor: pointer; }
.tones button[aria-pressed="true"] { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.3em; }

@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.85; letter-spacing: 0.01em; }
  .book { padding: 0 1.5rem 5rem; }
  .front, article.chapter { padding-top: 3.2rem; }
  .ch-head { margin-bottom: 2.8rem; }
  .ch-num .digit { font-size: 1.05rem; }
  .ch-head .gist { font-size: 0.98rem; line-height: 1.6; }
  blockquote.epigraph { padding-left: 1.1rem; margin-bottom: 3.2rem; }
  blockquote.epigraph p { font-size: 1rem; line-height: 1.75; }
  blockquote.epigraph cite, figcaption, .sources { font-size: 0.74rem; }
  article.chapter h3 { font-size: 1.08em; margin-top: 3.4rem; letter-spacing: 0.04em; }
  .running { padding-top: 1.35rem; }
  .ch-head :is(h1, h2) { font-size: 1.5rem; letter-spacing: 0.06em; line-height: 1.4; }
  figure.bleed { margin-left: -1.5rem; margin-right: -1.5rem; }
  figure.bleed figcaption { padding: 0 1.5rem; }
  .pair { grid-template-columns: 1fr; }
  .title-page { padding-top: 4.5rem; }
  .running span { display: none; }
  .title-page .sub-ja { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  body, .book, .frag, .ch-head { transition: none !important; animation: none !important; }
  .fade [data-fade] { opacity: 1 !important; }
}
@media print {
  @page { size: A5; margin: 18mm 16mm 20mm; }
  body { font-size: 10.5pt; line-height: 1.85; background: #fff; color: #1f2328; }
  body::before, .tones, .running, .pager { display: none; }
  .book { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  .fade [data-fade] { opacity: 1; }
  .frag { break-inside: avoid; }
}
/* ======== 扉と目次（index）: 余白で組む ======== */
/* 扉: 主張を引き、下寄りの左に小さく置く。右上に縦書きの副題。上に大きな間を残す */
.cover { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 2rem var(--side) 2.2rem; }
:root { --side: clamp(1.9rem, 5vw, 5.5rem); }
.cover-top, .cover-foot { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-faint); }
.cover-top .now b { font-weight: 500; color: var(--ink-soft); }
.cover-main { position: absolute; left: var(--side); top: 0; padding: 0; }
.cover-foot { grid-row: 2; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cover h1 { font-family: "Newsreader", serif; font-weight: 400; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1.1; letter-spacing: -0.012em; margin: 0; color: var(--ink); }
/* 副題の列の幅を右上のアイコンと同じにして、二つを同じ縦の軸に揃える */
.cover .sub-ja { position: absolute; top: 24vh; right: var(--side); width: 30.6px; text-align: center; writing-mode: vertical-rl; font-size: 0.98rem; font-weight: 500; letter-spacing: 0.6em; line-height: 30.6px; color: var(--ink-soft); margin: 0; }
.cover .note { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0; }
.cover-foot a { color: var(--ink-soft); text-decoration: none; }
.front .list { margin-top: 0.4rem; }
.cover-foot a:hover { color: var(--ink); }
.cover-foot .cue { display: inline-flex; align-items: center; gap: 0.7rem; }
.cover-foot .cue::after { content: ""; width: 1px; height: 2.6rem; background: var(--rule); }

.index { padding: 26vh var(--side) 18rem; }
.index aside { margin: 0 0 2.4rem; }
.index aside h2 { font-family: var(--sans); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-faint); margin: 0; }
.ctrl { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-faint); margin: 0 0 0.6rem; display: flex; gap: 0.2rem 0.5rem; flex-wrap: wrap; align-items: baseline; }
.ctrl .k { width: 4.6em; }
.ctrl button { font: inherit; background: none; border: 0; padding: 0; color: var(--ink-faint); cursor: pointer; }
.ctrl button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; }
.ctrl button:hover { color: var(--ink-soft); }

/* List: 大きめの字で、ゆったり縦に */
.list { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.list a { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: 0.6rem; padding: 1.45rem 0; text-decoration: none; color: var(--ink); }
.list .n { font-family: "Newsreader", serif; font-size: 1rem; color: var(--ink-faint); }
.list .t { font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; }
.list .t, .list .s { word-break: auto-phrase; text-wrap: balance; }
.list .s { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.15rem; line-height: 1.6; } /* 題と添える一行は近く、章と章のあいだは広く（2026-10-23） */
.list .s[lang="en"] { font-family: "Newsreader", serif; font-style: italic; }
.list .k { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-faint); }
/* 触れた行だけが残り、ほかの行がふわっと引く。題には左から細い線が伸びる */
.list a { transition: opacity 0.7s ease; }
.list .n, .list .s { transition: color 0.7s ease; }
.list:has(a:focus-visible) a { opacity: 0.38; }
.list:has(a:focus-visible) a:focus-visible { opacity: 1; }
.list a:focus-visible .n { color: var(--accent); }
/* ホバーの動きはマウスのときだけ（スマホでは指が触れた行がホバーのまま残り、一覧全体が薄くなるため） */
@media (hover: hover) and (pointer: fine) {
  .list:has(a:hover) a { opacity: 0.38; }
  .list:has(a:hover) a:hover { opacity: 1; }
  .list a:hover .n { color: var(--accent); }
  .list a:hover .t { background-size: 100% 1px; }
  .pager a:hover .t, .cover-foot a:hover, .running a:hover { background-size: 100% 1px; }
}
.list .t { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.9s cubic-bezier(.2,.7,.2,1); padding-bottom: 0.15em; }
.list a:focus-visible .t { background-size: 100% 1px; }
.list a:focus-visible { outline: none; }

@media (max-width: 860px) {
  .index { padding: 14vh var(--side) 10rem; }
  .cover { padding-bottom: 2.6rem; }
  .cover .sub-ja { top: 15vh; font-size: 0.8rem; letter-spacing: 0.42em; color: var(--ink-faint); }
  .cover h1 { font-size: 2.6rem; letter-spacing: -0.01em; }
  .cover-foot { font-size: 0.75rem; }
  .list a { grid-template-columns: 2.4rem 1fr; padding: 1.3rem 0; }
  .list .t { font-size: 1.02rem; letter-spacing: 0.06em; }
  .list .s { font-size: 0.84rem; }
  :root:not(.night) #guides { --full: 0.12; }
  :root.night #guides#guides { --full: 0.09; }
  .index aside { position: static; }
  .index aside .about { max-width: 32rem; }
}
@media (prefers-reduced-motion: reduce) { .card { opacity: 1; transform: none; } .card img { transition: none; } }

/* 製図の跡（lente.js の drawGuides）。紙の下に固定し、開いたときに一度だけ定規で引くように現れる */
#guides { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; color: var(--ink); }
/* 文字の背後では線を引く: 目次までスクロールしたら、また読むページでは、ごく薄く */
/* --quiet: 0（扉）→ 1（目次・読むページ）。スクロールに合わせて連続して変わる */
#guides { --full: 0.17; --low: 0.055; opacity: calc(var(--full) - (var(--full) - var(--low)) * var(--quiet, 0)); will-change: opacity; transform: translateZ(0); }
:root[data-tone="evening"] #guides { --full: 0.16; }
:root.night #guides { --full: 0.11; --low: 0.045; }
#guides line, #guides circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rule 2.8s cubic-bezier(.4,0,.2,1) forwards; }
/* 破線は実際の長さで点を刻む（画面の長さに比例させると、短い画面で点が消える） */
#guides line.dash { stroke-dasharray: 3 5; stroke-dashoffset: 0; animation: appear 3s ease forwards; opacity: 0; }
#guides .faint { opacity: 0.6; }
#guides .arc { stroke-dasharray: 0.62 0.38; stroke-dashoffset: 0.9; animation: arc 4s cubic-bezier(.4,0,.2,1) forwards; }
#guides .tick { animation: appear 2s ease 1s forwards; stroke-dasharray: none; opacity: 0; }
#guides.drawn * { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
#guides.drawn line.dash { stroke-dasharray: 3 5; }
#guides.drawn .arc { stroke-dashoffset: 0.15; }
@keyframes rule { to { stroke-dashoffset: 0; } }
@keyframes arc { to { stroke-dashoffset: 0.15; } }
@keyframes appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #guides * { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; } #guides .arc { stroke-dashoffset: 0.15 !important; } }
@media print { #guides { display: none; } }

/* 右上の紙の色のアイコン（さりげなく） */
.tone-ctrl { position: absolute; top: 1.6rem; right: var(--side); z-index: 20; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; }
.tone-btn { display: block; background: none; border: 0; padding: 0.3rem; color: var(--ink-soft); cursor: pointer; opacity: 1; transition: color .4s ease, opacity .4s ease; }
.tone-btn:hover, .tone-btn[aria-expanded="true"] { color: var(--ink); }
.tone-btn svg { width: 21px; height: 21px; }
.tone-menu { position: absolute; top: 2.3rem; right: 0; list-style: none; margin: 0; padding: 0.5rem 0; min-width: 8.5rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.35); }
.tone-menu button { display: flex; align-items: center; gap: 0.6rem; width: 100%; background: none; border: 0; padding: 0.35rem 0.9rem; font: inherit; color: var(--ink-faint); cursor: pointer; text-align: left; }
.tone-menu button svg { width: 15px; height: 15px; flex: none; }
.tone-menu button:hover { color: var(--ink); }
.tone-menu button[aria-pressed="true"] { color: var(--ink); }
.tone-menu li:first-child { border-bottom: 1px solid var(--rule); padding-bottom: 0.35rem; margin-bottom: 0.35rem; }
@media print { .tone-ctrl { display: none; } }

/* ほかのリンクも、一覧と同じく左から細い線が伸びる */
.pager .t, .cover-foot a, .running a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.9s cubic-bezier(.2,.7,.2,1), color 0.7s ease; padding-bottom: 0.15em; }
.pager a:focus-visible .t, .cover-foot a:focus-visible, .running a:focus-visible { background-size: 100% 1px; }
.pager a:hover .t { border-bottom: 0; }

/* しおり */
.shiori-btn { margin-left: auto; align-self: center; display: block; background: none; border: 0; padding: 0.3rem; margin-right: -0.3rem; color: var(--ink-soft); cursor: pointer; transition: color .4s ease; }
.shiori-btn:hover { color: var(--ink); }
.shiori-btn.on { color: var(--accent); }
.tone-ctrl .tone-menu { right: 0; }
.cover-foot { justify-content: flex-start; gap: 2.6rem; }
.cover-foot .shiori { color: var(--ink-soft); text-decoration: none; }
.list a { position: relative; }
.list .liked { position: absolute; right: 0; top: 1.75rem; color: var(--accent); opacity: 0.8; }
@media (max-width: 640px) { .list .liked { top: 1.5rem; } .cover-foot { flex-direction: column; gap: 0.15rem; line-height: 1.5; } }

/* スマホ: 指で押したその瞬間だけ、行がわずかに沈む */
@media (hover: none) { .list a:active { opacity: 0.6; transition: opacity 0.15s ease; } }

/* 著者紹介（はじめにの後ろ） */
.profile { margin-top: 5.5rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.profile h3 { font-family: "Newsreader", serif; font-weight: 400; font-size: 1.6rem; letter-spacing: -0.01em; margin: 0.2rem 0 1.6rem; }
.profile p { font-size: 0.95em; }
.timeline { list-style: none; margin: 2.2rem 0 2rem; padding: 0; font-family: var(--sans); font-size: 0.8rem; line-height: 1.7; color: var(--ink-soft); }
.timeline li { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: 0 1rem; padding: 0.45rem 0; }
.timeline .y { font-family: "Newsreader", serif; font-size: 0.95rem; color: var(--accent); }
.timeline .o { color: var(--ink-faint); text-align: right; }
.contact { font-family: var(--sans); font-size: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; text-align: left; }
.contact .k { color: var(--ink-faint); margin-right: 0.6rem; }
.contact a { color: var(--ink-soft); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.9s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) and (pointer: fine) { .contact a:hover { background-size: 100% 1px; } }
@media (max-width: 640px) { .timeline li { grid-template-columns: 3rem 1fr; } .timeline .o { grid-column: 2; text-align: left; } }

/* 薄くなった段落の中のリンクにフォーカスが来たら、段落ごと灯す */
.fade [data-fade]:focus-within { opacity: 1; }

/* ノートの断片は短い行が多く、英語が混ざると両端揃えで字間が開くので左揃え */
.frag p { text-align: left; }

/* 言葉の章の中の「ノートから」（作者のノートをそのまま） */
.notes { margin: 0 0 3rem; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 1px solid var(--rule); }
.notes > .label { margin-bottom: 1rem; }
.notes .frag { margin-bottom: 0; }

/* 作者紹介の連絡先は年表と同じ小さな字の 2 列 */
.profile .contact { display: grid; grid-template-columns: 3.6rem 1fr; gap: 0.35rem 1rem; font-size: 0.8rem; }
.profile .contact .k { margin: 0; }
@media (max-width: 640px) { .profile .contact { grid-template-columns: 3rem 1fr; } }
/* 前後の章が無いとき（しおりのページ）は線ごと消す */
.pager:empty { display: none; }
.pager .t { word-break: auto-phrase; }
/* 扉と読むページで右の軸をそろえる（スマホは本文の余白と同じ） */
@media (max-width: 640px) { :root { --side: 1.5rem; } }

/* 作者紹介のキーワード（年表・連絡先と同じ 2 列） */
.profile .keywords { display: grid; grid-template-columns: 3.6rem 1fr; gap: 0 1rem; font-family: var(--sans); font-size: 0.8rem; line-height: 1.9; color: var(--ink-soft); margin: 2rem 0 0; text-align: left; }
.profile .keywords .k { color: var(--ink-faint); }
.profile .keywords + .timeline { margin-top: 1.4rem; }
@media (max-width: 640px) { .profile .keywords { grid-template-columns: 3rem 1fr; } }
.profile .keywords { grid-template-columns: 4.6rem 1fr; }
.profile .keywords .kw { display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; }
.profile .keywords .kw span { white-space: nowrap; }
@media (max-width: 640px) { .profile .keywords { grid-template-columns: 4.6rem 1fr; } }
/* 作者紹介のキーワード・年表・連絡先は、同じ縦の軸（左の列 4.6rem）に揃える */
.timeline li, .timeline li { grid-template-columns: 4.6rem 1fr auto; }
.profile .contact { grid-template-columns: 4.6rem 1fr; }
@media (max-width: 640px) { .timeline li { grid-template-columns: 4.6rem 1fr; } .profile .contact { grid-template-columns: 4.6rem 1fr; } }
.timeline .r, .timeline .o { word-break: auto-phrase; text-wrap: balance; }
/* 欧文の引用は字間を詰める（和文の字間がかかると間延びする） */
[lang="el"], blockquote p:not(.orig):lang(en) { letter-spacing: 0; font-family: "Newsreader", serif; }
.pager .t { text-wrap: balance; }
.pager .next .t { display: inline-block; max-width: 100%; }
.nw { white-space: nowrap; }
[lang="de"] { letter-spacing: 0; font-family: "Newsreader", serif; }
/* ルビ: 小さく淡く。行間を押し広げすぎない（2026-10-23） */
ruby { ruby-position: over; }
rt { font-size: 0.48em; font-weight: 400; letter-spacing: 0.04em; color: var(--ink-faint); font-feature-settings: normal; }
h1 rt, h2 rt, h3 rt, .list .t rt { font-size: max(9px, 0.45em); letter-spacing: 0.06em; }

/* はじめに: Vision / Philosophy / Theme（2026-10-23） */
.about-sec { margin-top: 3.2rem; }  /* 上は ＊＊＊（罫線は置かない。2026-10-24 ayu） */
.about-sec .label { margin-bottom: 0.4rem; }
.about-sec h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.5; margin: 0 0 1.4rem; }
.about-items, .about-themes { list-style: none; margin: 0; padding: 0; }
.about-items li { padding: 1.4rem 0; }  /* 番号と項目の罫線は置かない。余白で区切る（2026-10-24 ayu） */
.about-items li:first-child { border-top: 0; padding-top: 0.2rem; }
.about-items .ai-t { font-weight: 600; letter-spacing: 0.08em; margin: 0 0 0.4rem; }
.about-items p { margin: 0 0 0.5rem; }
.about-themes { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.about-themes a, .about-themes li > span { display: block; padding: 1rem 1.1rem 0.9rem; border: 1px solid var(--rule); border-radius: 3px; text-decoration: none; color: var(--ink); height: 100%; box-sizing: border-box; transition: border-color 0.4s; }
.th-t { display: block; font-weight: 600; letter-spacing: 0.08em; }
.th-en { display: block; font-family: "Newsreader", serif; font-style: italic; font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.1rem; }
.th-ex { display: block; font-family: var(--sans); font-size: 0.75rem; color: var(--ink-faint); margin-top: 0.7rem; }
@media (hover: hover) { .about-themes a:hover { border-color: var(--accent); } }

.about-sec .vision-fig { margin: 3.6rem 0 1.2rem; }
:root.night .vision-fig svg [fill="#9aa3ab"] { fill: #6f6b64; }
.about-themes a { display: grid; grid-template-columns: 12.5rem 1fr; align-items: baseline; column-gap: 1rem; }
.about-themes .th-en { grid-column: 1; margin-top: 0.15rem; }
.about-themes .th-ex { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; align-self: center; }
@media (max-width: 640px) { .about-themes a { grid-template-columns: 1fr; } .about-themes .th-ex { grid-column: 1; grid-row: auto; margin-top: 0.5rem; } }
/* 札: 英語を上、名前、右に一行の説明（2026-10-23 ayu） */
.about-themes .th-en { grid-column: 1; grid-row: 1; margin: 0 0 0.15rem; }
.about-themes .th-t { grid-column: 1; grid-row: 2; }
.about-themes .th-ex { grid-column: 2; grid-row: 1 / span 2; font-size: 0.85rem; line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 640px) { .about-themes .th-en, .about-themes .th-t, .about-themes .th-ex { grid-column: 1; grid-row: auto; } .about-themes .th-ex { margin-top: 0.5rem; } }
.about-themes .th-ex { word-break: auto-phrase; text-wrap: balance; }
/* 札をやめ、目次のような静かな一覧に（説明なしで立つ形。2026-10-23） */
.about-themes { gap: 0; border-top: 1px solid var(--rule); }
.about-themes a, .about-themes li > span { display: grid; grid-template-columns: 9.5rem 1fr auto; align-items: baseline; column-gap: 1rem; padding: 1.15rem 0.2rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); border-radius: 0; height: auto; }
.about-themes .th-en { grid-column: 1; grid-row: 1; margin: 0; font-size: 0.95rem; }
.about-themes .th-t { grid-column: 2; grid-row: 1; font-size: 1.05rem; }
.about-themes .th-go { grid-column: 3; grid-row: 1; font-family: "Newsreader", serif; color: var(--ink-faint); transition: transform 0.4s, color 0.4s; }
@media (hover: hover) { .about-themes a:hover { border-color: color-mix(in srgb, var(--rule) 70%, transparent); } .about-themes a:hover .th-t { color: var(--accent); } .about-themes a:hover .th-go { color: var(--accent); transform: translateX(3px); } }
@media (max-width: 640px) { .about-themes a { grid-template-columns: 7.2rem 1fr auto; } .about-themes .th-en, .about-themes .th-t { grid-row: 1; } .about-themes .th-en { grid-column: 1; } .about-themes .th-t { grid-column: 2; } }
.about-themes .th-en { font-size: 1.2rem; letter-spacing: -0.005em; }
.about-themes .th-t { font-size: 0.92rem; letter-spacing: 0.06em; white-space: nowrap; }
.about-themes a, .about-themes li > span { grid-template-columns: 8.6rem 1fr auto; }
@media (max-width: 640px) { .about-themes a { grid-template-columns: 7.6rem 1fr auto; column-gap: 0.6rem; } .about-themes .th-en { font-size: 1.1rem; } .about-themes .th-t { font-size: 0.86rem; letter-spacing: 0.04em; } }

/* 近い章と、前後の章（2026-10-23 ayu「Previous / Next はもっと小さく下の方に一行に」「関連する章を・・・の後に」） */
.near { margin-top: 2.6rem; }
.near > .label { margin-bottom: 0.6rem; }
.near ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.near li a { display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; padding: 0.9rem 0.1rem; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); text-decoration: none; color: var(--ink); }
.near .n { font-family: "Newsreader", serif; font-size: 0.9rem; color: var(--ink-faint); font-variant-numeric: lining-nums; }
.near .t { display: block; font-size: 1rem; transition: color 0.4s; }
.near .s { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--ink-soft); word-break: auto-phrase; }
@media (hover: hover) { .near li a:hover .t { color: var(--accent); } }
.pager { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 3.2rem; padding-top: 0.9rem; font-size: 0.8rem; }
.pager a { display: inline-flex; align-items: baseline; gap: 0.5em; min-width: 0; color: var(--ink-soft); }
.pager .label { margin: 0; font-size: 0.72rem; white-space: nowrap; }
.pager .t { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager .t[lang="en"] { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; }
.pager .next { margin-left: auto; text-align: right; }
.pager .pn { font-family: "Newsreader", serif; font-size: 0.85rem; color: var(--ink-faint); font-variant-numeric: lining-nums; white-space: nowrap; }
.pager .pn .no { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.06em; }
.pager .next .t { display: inline; }

/* 章の終わりの並びを一つの型に（2026-10-23 ayu「線と余白、Sources・人・Related のタイトルや罫線がバラバラ」）
   ＊＊＊ が本文と終わりの区切り。そのあとの Sources・Books・People・Related は同じ見出し・同じ間隔で、罫線は引かない。線は前後の章の上の一本だけ */
.ornament { letter-spacing: 0.9em; padding-left: 0.9em; font-size: 0.72rem; margin: 3.6rem 0 0; line-height: 1; }
article.chapter h3.after-orn { margin-top: 3.2rem; }
article.chapter > .ornament + .sources { margin-top: 3.4rem; }
.sources, .kin, .near { margin: 2.8rem 0 0; padding: 0; border: 0; }
.sources h4, .kin h4, .near > .label { font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; line-height: 1.4; color: var(--ink-faint); margin: 0 0 0.9rem; }
.kin h4:not(:first-child) { margin-top: 2.8rem; }
.kin ul { margin: 0; }
.near ol { border: 0; display: grid; gap: 0.6rem; }
.near li a { grid-template-columns: 2.6rem 1fr; column-gap: 0.9rem; align-items: center; padding: 0.5rem 0; border: 0; }
.near .n { justify-self: start; font-size: 0.85rem; white-space: nowrap; }
.near .n .no { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.06em; }
.near li a { grid-template-columns: 3.4rem 1fr; }
.near .t { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.05em; }
.near .s { font-family: var(--sans); font-size: 0.75rem; line-height: 1.6; color: var(--ink-faint); margin-top: 0.15rem; }
.pager { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
article.chapter .kin { margin: 2.8rem 0 0; padding: 0; border: 0; }
/* 読むページで開く本と人の札（地図の .card を、画面に固定して使う） */
.card.on-read { position: fixed; top: 50%; right: auto; left: 50%; width: min(24rem, calc(100vw - 2.8rem)); max-height: min(36rem, calc(100vh - 6rem)); transform: translate(-50%, calc(-50% + 8px)); z-index: 1000; }
.card.on-read.show { transform: translate(-50%, -50%); }
.card-veil { position: fixed; inset: 0; z-index: 999; background: color-mix(in srgb, var(--ink) 18%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.card-veil.show { opacity: 1; pointer-events: auto; }
.card .card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1rem; margin: 1.4rem 0 0; font-family: var(--sans); font-size: 0.78rem; }
.card .card-foot a { color: var(--accent); text-decoration: none; }
.card .card-foot .out { margin: 0; }
@media (max-width: 760px) {
  .card.on-read, .card.on-read.show { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 72%; }
  .card.on-read { transform: translateY(105%); }
  .card.on-read.show { transform: none; }
}
/* 章の終わりの区切りは罫線。本文 ─ Sources・Books・People ─ Related ─ 前後の章（2026-10-23 ayu「Sources のまえは罫線で、People と Related の間も」） */
article.chapter > .sources, article.chapter > .kin:first-of-type:not(.sources ~ .kin) { margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.near { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.pager { margin-top: 3rem; }
.card-veil { background: rgb(20 22 25 / 0.28); }
.card.on-read { max-height: min(44rem, calc(100vh - 5rem)); }
.card.on-read .note { text-wrap: wrap; }
/* 終わりのまとまりは、どれも上に一本の罫線（Sources・Books・People・Related・前後の章。2026-10-23 ayu「Books People の間も罫線で、ルール的に」） */
article.chapter > .kin, article.chapter > .kin:first-of-type:not(.sources ~ .kin) { margin-top: 0; padding-top: 0; border-top: 0; }
article.chapter .kin h4, article.chapter .kin h4:not(:first-child) { margin: 3rem 0 0.9rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
article.chapter > .sources, .near, .pager { margin-top: 3rem; }
article.chapter > .sources:first-of-type { margin-top: 4rem; }
.pager a { gap: 0.6em; font-size: 0.85rem; }
.pager .ar { font-family: "Newsreader", serif; color: var(--ink-faint); transition: transform 0.4s; }
.pager .t { font-size: 0.85rem; }
@media (hover: hover) { .pager .prev:hover .ar { transform: translateX(-3px); } .pager .next:hover .ar { transform: translateX(3px); } }
/* Safari: 文節の切れ目（lente.js の phrase が入れる <wbr>）でだけ折る */
.ph { word-break: keep-all; overflow-wrap: anywhere; }

/* 上に戻る（右下。長いページで読み進めたときだけ、静かに出る） */
.to-top { position: fixed; right: var(--side); bottom: calc(1.4rem + env(safe-area-inset-bottom)); z-index: 15; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink-soft); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s linear .6s, color .4s ease, bottom .5s cubic-bezier(.2,.7,.2,1); }
.to-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body.sheet-open .to-top { opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .to-top:hover { color: var(--ink); } .to-top:hover svg { transform: translateY(-2px); } .to-top svg { transition: transform .4s ease; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .to-top { display: none; } }
/* 扉のスマホでは、下に浮かぶ三つのタブ（atlas.css の .rail）の上に積む。タブが引いたら元の位置へ（2026-10-24 ayu「ナビゲーションと被らないように」） */
@media (max-width: 760px) { body:has(.rail:not(.away)) .to-top { bottom: calc(18px + 51px + 12px + env(safe-area-inset-bottom)); } }
@media (pointer: coarse) and (max-height: 500px) { body:has(.rail:not(.away)) .to-top { bottom: calc(12px + 51px + 12px + env(safe-area-inset-bottom)); } }
html.map-open .to-top { display: none; }
/* 段落の頭に置く、要の一句（例: ブリコラージュの四つの芯）。太字で叫ばず、色と少しの重さで軸を見せる（2026-10-24） */
article.chapter p > strong:first-child { font-weight: 600; color: var(--accent); letter-spacing: 0.04em; margin-right: 0.3em; }

/* 作者の写真（白黒。2026-10-24 ayu）。スマホは名前の上に、PC は写真の隣に名前と紹介（ayu「PC の時は写真の隣に名前と紹介」）
   写真の幅は本文の 38.2%（本文 ÷ φ²）。元の切り抜きは 312px なので、これより大きくするとぼやける。夜の紙では少し沈める */
.profile .who { margin-top: 1.8rem; }
.profile .portrait { margin: 0; width: 38.2%; min-width: 10rem; max-width: 14rem; }
.profile .portrait img { display: block; width: 100%; height: auto; }
html.night .profile .portrait img { filter: brightness(0.8); }
.profile .who-t h3 { margin-top: 1.4rem; }
@media (min-width: 641px) {
  .profile .who { display: grid; grid-template-columns: 38.2% 1fr; gap: 0 2.2rem; align-items: start; }
  .profile .who .portrait { width: 100%; min-width: 0; max-width: none; }
  .profile .who-t h3 { margin-top: -0.35rem; }  /* 名前の頭を写真の上端にそろえる */
  .profile .who-t p:last-child { margin-bottom: 0; }
}
/* 紹介は本文より小さく、Keywords は紹介の下に「 / 」区切りで（2026-10-24 ayu「もっと文字小さくて良い」「Keywords もこの並びに」） */
.profile .who-t p { font-size: 0.86em; line-height: 1.9; }
.profile .who-t .kw-line { margin-top: 1.2rem; font-family: var(--sans); font-size: 0.76rem; line-height: 1.9; color: var(--ink-soft); }
.profile .who-t .kw-line .k { display: block; color: var(--ink-faint); margin-bottom: 0.1rem; }
.profile .who-t .kw-i { white-space: nowrap; }
.profile .who-t .sl { color: var(--ink-faint); }
.profile .who + .timeline { margin-top: 2.2rem; }

/* はじめにの見出し（2026-10-24 ayu「ジャンプ率」「タイトル一言ずつ」）
   節の見出し（Vision・Philosophy）は章の節（h3）と同じ大きさ。スマホでも章と同じ比にする
   Philosophy の三つは、題そのものが章へのリンク（英語の添え書きと「→」の行は置かない） */
@media (max-width: 640px) { .about-sec h3 { font-size: 1.08em; letter-spacing: 0.04em; } }
.about-items .ai-t a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size 0.4s ease; }
@media (hover: hover) and (pointer: fine) { .about-items .ai-t a:hover { background-size: 100% 1px; } }
.about-items .ai-t a:focus-visible { background-size: 100% 1px; }
.about-items .ai-t .ar { font-family: var(--sans); font-weight: 400; font-size: 0.78rem; color: var(--accent); margin-left: 0.8rem; }

/* 2026-10-24 レビュー 1 回目
   作者の漢字の名前は英語の名前のあとに小さく。スマホでは下の帯（タブ・上に戻る）の下にフォーカスを隠さない（WCAG 2.4.11） */
.profile h3 .ja { font-family: "Shippori Mincho", serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-soft); margin-left: 0.9rem; }
@media (max-width: 640px) { html { scroll-padding-bottom: 7rem; } }