/* =========================================================================
   未明（MIMEI） — 共通読書キット CSS
   デザイン憲法: 白ベース・モノトーン・静謐。プラットフォームは透明に。
   アクセント「夜明け前の青」は一滴だけ。面で塗らない。
   ========================================================================= */

:root {
  /* ---- カラートークン ---- */
  --paper: #FBFBFA;       /* 純白ではなく僅かに温かい白 */
  --paper-sub: #F4F4F1;   /* カード等のわずかな地色差 */
  --ink: #1A1A1A;         /* 墨 */
  --ink-sub: #6B6B6B;     /* 副次テキスト */
  --ink-faint: #A6A6A2;   /* さらに控えめな注記 */
  --rule: #E4E4E1;        /* 罫線 */
  --rule-strong: #C9C9C4; /* やや強い罫線 */
  --dawn: #2E3A59;        /* 夜明け前の青。一滴だけ */
  --dawn-soft: rgba(46, 58, 89, 0.08);

  /* ---- フォント ---- */
  --font-heading: "Hannari", "Cormorant Garamond", serif;
  --font-latin: "Cormorant Garamond", "Hannari", serif;
  --font-body: "Noto Serif JP", serif;

  /* ---- タイポスケール ---- */
  --fs-body: 16px;
  --fs-body-lg: 17px;
  --fs-caption: 0.8rem;
  --fs-small: 0.875rem;
  --fs-h1: clamp(2.2rem, 5vw, 3.4rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.15rem;
  --fs-lead: 1.15rem;

  /* ---- 版面 ---- */
  --measure: 38em;        /* 行長 35〜40字相当 */
  --measure-narrow: 32em;
  --space-unit: 1rem;

  color-scheme: light;
}

/* ---- リセット最小限 ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a {
  color: var(--dawn);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .15s ease;
}
a:hover { opacity: .72; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 1.5px solid var(--dawn);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  letter-spacing: .02em;
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

/* =========================================================================
   共通ヘッダ／フッター — 透明・最小限
   ========================================================================= */

.site-header {
  padding: 1.6rem clamp(1.25rem, 5vw, 3rem) 1.2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
}

.site-header__logo {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  text-decoration: none;
  color: var(--ink);
}

.site-header__logo-ja {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: .12em;
}

.site-header__logo-en {
  font-family: var(--font-latin);
  font-size: .68rem;
  letter-spacing: .32em;
  color: var(--ink-sub);
  text-transform: uppercase;
}

.site-header__nav {
  font-size: var(--fs-small);
  color: var(--ink-sub);
}

.site-header__nav a {
  color: var(--ink-sub);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-header__nav a:hover {
  color: var(--dawn);
  border-bottom-color: currentColor;
  opacity: 1;
}

.site-footer {
  margin-top: 5rem;
  padding: 2.4rem clamp(1.25rem, 5vw, 3rem) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: var(--fs-caption);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
}

.site-footer a { color: var(--ink-sub); }

/* =========================================================================
   記事メタ・本文コンテナ（.prose）
   ========================================================================= */

.article-meta {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 6vw, 2rem);
  color: var(--ink-sub);
  font-size: var(--fs-small);
  display: flex;
  gap: .9em;
  align-items: baseline;
  letter-spacing: .03em;
}

.article-meta .dot { color: var(--rule-strong); }

.article-title {
  max-width: calc(var(--measure) + 4rem);
  margin: 0 auto;
  padding: .6rem clamp(1.25rem, 6vw, 2rem) 0;
  font-size: var(--fs-h1);
  line-height: 1.35;
}

.article-lead {
  max-width: var(--measure);
  margin: 1.6rem auto 0;
  padding: 0 clamp(1.25rem, 6vw, 2rem);
  font-size: var(--fs-lead);
  color: var(--ink-sub);
  line-height: 1.9;
  border-left: 2px solid var(--dawn);
  padding-left: calc(clamp(1.25rem, 6vw, 2rem) - 2px + 1rem);
  margin-left: clamp(0rem, 0vw, 0rem);
}

.prose {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding: 0 clamp(1.25rem, 6vw, 2rem);
}

.prose > * + * { margin-top: 1.6em; }

.prose p {
  margin: 0;
  line-height: 1.9;
}

.prose h2 {
  font-size: var(--fs-h2);
  margin-top: 3.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}

.prose h2 .no {
  display: block;
  font-family: var(--font-latin);
  font-size: .72rem;
  letter-spacing: .28em;
  color: var(--dawn);
  margin-bottom: .6em;
}

.prose h3 {
  font-size: var(--fs-h3);
  margin-top: 2.4rem;
  scroll-margin-top: 5rem;
}

.prose blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em 1.4em;
  border-left: 1px solid var(--rule-strong);
  color: var(--ink-sub);
  font-size: .98em;
  line-height: 1.9;
}

.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: 1em; }

.prose figure {
  margin: 3rem calc(clamp(1.25rem, 6vw, 2rem) * -1);
  padding: 0 clamp(1.25rem, 6vw, 2rem);
}

.prose figure.bleed {
  max-width: none;
}

.prose figcaption {
  margin-top: .9em;
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  letter-spacing: .02em;
  line-height: 1.7;
}

.prose .visual-frame {
  overflow-x: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(1.5rem, 6vw, 3rem) 0;
}

.prose ul, .prose ol {
  padding-left: 1.4em;
  line-height: 1.9;
}
.prose li + li { margin-top: .5em; }

.prose strong { font-weight: 600; }
.prose em { font-style: normal; border-bottom: 1px dotted var(--rule-strong); }

/* ---- 出典セクション ---- */
.sources {
  max-width: var(--measure);
  margin: 4.5rem auto 0;
  padding: 2rem clamp(1.25rem, 6vw, 2rem) 0;
  border-top: 1px solid var(--rule);
}

.sources h2 {
  font-size: 1.05rem;
  font-family: var(--font-heading);
  margin-bottom: 1.2em;
}

.sources__group + .sources__group { margin-top: 1.8em; }

.sources__group-title {
  font-size: var(--fs-caption);
  color: var(--ink-faint);
  letter-spacing: .12em;
  margin-bottom: .8em;
}

.sources ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: src;
}

.sources li {
  counter-increment: src;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-sub);
  padding-left: 2.1em;
  position: relative;
  margin-top: .7em;
}

.sources li::before {
  content: counter(src, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--ink-faint);
  font-family: var(--font-latin);
  font-size: .85em;
}

.sources li a {
  word-break: break-all;
}

.sources li .src-note {
  display: block;
  color: var(--ink-faint);
  font-size: .92em;
}

/* =========================================================================
   sticky 現在地バー ＋ TOC オーバーレイ
   ========================================================================= */

.reading-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 251, 250, .92);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  transition: transform .28s ease;
}

.reading-bar.is-visible { transform: translateY(0); }

.reading-bar__inner {
  max-width: calc(var(--measure) + 4rem);
  margin: 0 auto;
  padding: .75rem clamp(1.25rem, 6vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1em;
}

.reading-bar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dawn);
  flex: none;
}

.reading-bar__label {
  font-size: var(--fs-small);
  color: var(--ink-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.reading-bar__progress {
  flex: none;
  font-family: var(--font-latin);
  font-size: .75rem;
  color: var(--ink-faint);
  letter-spacing: .05em;
}

.reading-bar__toc-btn {
  flex: none;
  appearance: none;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  padding: .35em .9em;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}

.reading-bar__toc-btn:hover {
  border-color: var(--dawn);
  color: var(--dawn);
}

.toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(251, 251, 250, .97);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}

.toc-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.toc-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem clamp(1.25rem, 6vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.toc-overlay__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  letter-spacing: .08em;
}

.toc-overlay__close {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-sub);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: .2em .4em;
}
.toc-overlay__close:hover { color: var(--dawn); }

.toc-overlay__list {
  flex: 1;
  overflow-y: auto;
  max-width: calc(var(--measure) + 4rem);
  width: 100%;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 6vw, 3rem) 3rem;
  list-style: none;
}

.toc-overlay__list li + li { margin-top: .3em; }

.toc-overlay__list a {
  display: block;
  padding: .9em 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  font-size: 1.05rem;
  transition: color .15s ease, padding-left .15s ease;
}

.toc-overlay__list a:hover {
  color: var(--dawn);
  padding-left: .5em;
}

.toc-overlay__list .toc-h3 a {
  padding-left: 1.4em;
  font-size: .92rem;
  color: var(--ink-sub);
}

.toc-overlay__list .toc-no {
  font-family: var(--font-latin);
  color: var(--dawn);
  font-size: .75em;
  margin-right: .8em;
}

/* =========================================================================
   レスポンシブ
   ========================================================================= */

@media (max-width: 640px) {
  :root {
    --fs-body: 15.5px;
    --fs-h2: 1.28rem;
  }
  .prose figure {
    margin-left: calc(clamp(1.25rem, 6vw, 2rem) * -1);
    margin-right: calc(clamp(1.25rem, 6vw, 2rem) * -1);
  }
  .site-header__nav { font-size: .78rem; }
  .reading-bar__progress { display: none; }
}

/* =========================================================================
   prefers-reduced-motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}