/* =============================================================================
   Bulletin of YRIDEI — Paper Stylesheet (Dark theme · v2)
   常に濃い茶色の背景＋白系文字で表示するダークテーマ。
   OS の設定に関わらず、PC でもスマホでも同じ暗色で表示される。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Fonts
   ----------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* -----------------------------------------------------------------------------
   2. Color variables — Dark brown theme
   ----------------------------------------------------------------------------- */
:root {
  color-scheme: dark;                /* ブラウザにダークテーマを通知 */

  --bg-deep:       #1f1812;          /* 最暗の茶（地の基調） */
  --bg:            #2b2019;          /* 通常の濃い茶（本文の背景） */
  --bg-raised:     #342720;          /* 少し明るい茶（注・図のカード） */
  --bg-accent:     #3d2e24;          /* アクセント（注の背景など） */

  --text:          #f0ebe0;          /* 主要本文：温かみのあるオフホワイト */
  --text-soft:     #d8cdbb;          /* 引用・軽い本文：ベージュグレー */
  --text-muted:    #a89d89;          /* 注記・メタ：くすんだ暖灰 */

  --kin:           #d4b878;          /* 金色（強調・装飾） */
  --kin-soft:      #b89960;          /* 淡金 */
  --ai:            #8db4d4;          /* 薄藍（引用番号） */

  --line:          #5a4a3a;          /* 罫線 */
  --line-soft:     #443527;          /* 薄罫線 */
  --line-faint:    #36291e;          /* 最も薄い罫線 */
}

/* -----------------------------------------------------------------------------
   3. Global page / body
   ----------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  padding: 0;
  font-family: "Noto Serif JP", serif;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 30%, rgba(212,184,120,0.03) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(141,180,212,0.02) 0%, transparent 55%);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* -----------------------------------------------------------------------------
   4. Header navigation strip
   ----------------------------------------------------------------------------- */
.paper-nav {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 36px 0;
  font-family: "EB Garamond", "Cormorant Garamond", serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.paper-nav a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.paper-nav a:hover { color: var(--kin); border-bottom-color: var(--kin); }
.paper-nav .sep { margin: 0 10px; color: var(--line); }

.paper-volume {
  max-width: 780px;
  margin: 6px auto 0;
  padding: 0 36px;
  font-family: "EB Garamond", "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--kin);
  letter-spacing: 0.1em;
}

/* -----------------------------------------------------------------------------
   5. Masthead
   ----------------------------------------------------------------------------- */
.paper-masthead {
  max-width: 780px;
  margin: 48px auto 36px;
  padding: 0 36px;
  text-align: center;
}

.paper-masthead .vol-line {
  display: block;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.35em;
  color: var(--kin);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.paper-masthead .title-jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

.paper-masthead .subtitle-jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 0 0 28px;
}

.paper-masthead .rule {
  width: 60px;
  height: 1px;
  background: var(--kin);
  margin: 0 auto 28px;
  opacity: 0.7;
}

.paper-masthead .title-eu {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-soft);
  margin: 0 0 30px;
  letter-spacing: 0.01em;
}
.paper-masthead .title-eu em { font-weight: 500; }

.paper-masthead .byline {
  margin: 0 0 20px;
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0.06em;
}
.paper-masthead .byline .name-jp {
  display: inline-block;
  margin-right: 12px;
}
.paper-masthead .byline .name-en {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-muted);
}

.paper-masthead .version-mark {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--kin);
  text-transform: uppercase;
  margin-top: 10px;
}

/* -----------------------------------------------------------------------------
   6. Paper body
   ----------------------------------------------------------------------------- */
.paper-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 36px 40px;
}

/* Chapter heading level 1 — 第◯章 */
.paper-body .ch-1 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--text);
  margin: 72px 0 24px;
  padding: 14px 0 14px 0;
  border-top: 2px solid var(--kin);
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.04em;
  text-align: center;
}
.paper-body .ch-1::before {
  content: "◆";
  color: var(--kin);
  margin-right: 14px;
  font-size: 13px;
  vertical-align: middle;
}

/* Chapter heading level 2 — 1.1 節 */
.paper-body .ch-2 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  margin: 52px 0 18px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--kin);
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* Chapter heading level 3 — 1.7.1 */
.paper-body .ch-3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--text-soft);
  margin: 40px 0 14px;
  letter-spacing: 0.02em;
}
.paper-body .ch-3::before {
  content: "§ ";
  color: var(--kin);
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-weight: 400;
  margin-right: 2px;
}

/* Introductory section title (はじめに・結論) */
.paper-body .ch-intro {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--text);
  margin: 40px 0 22px;
  padding: 10px 0;
  border-top: 1px solid var(--kin);
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: 0.08em;
  text-align: center;
}

/* Paragraphs */
.paper-body p {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  line-height: 2.05;
  color: var(--text);
  text-align: justify;
  text-justify: inter-ideograph;
  text-indent: 1em;
  margin: 0 0 1em;
}

.paper-body .ch-1 + p,
.paper-body .ch-2 + p,
.paper-body .ch-3 + p,
.paper-body .ch-intro + p,
.paper-body p.no-indent { text-indent: 0; }

/* Reader's note block */
.paper-body .reader-note {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text-soft);
  background: var(--bg-raised);
  padding: 20px 26px;
  margin: 32px 0;
  border-left: 3px solid var(--kin-soft);
}
.paper-body .reader-note .note-label {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: 0.3em;
  color: var(--kin);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.paper-body .reader-note p {
  font-size: inherit;
  line-height: inherit;
  text-indent: 0;
  margin: 0;
}

/* Figure / diagram block */
.paper-body .figure-block {
  margin: 40px 0;
  padding: 24px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--kin);
}
.paper-body .figure-block .fig-label {
  display: block;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: var(--kin);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.paper-body .figure-block .fig-caption-jp {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin: 0 0 4px;
  text-indent: 0;
}
.paper-body .figure-block .fig-caption-eu {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
  text-indent: 0;
}
.paper-body .figure-block .fig-sub {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 20px;
  text-indent: 0;
}
.paper-body .figure-block .fig-content {
  font-size: 14px;
  line-height: 1.85;
  color: var(--text-soft);
}
.paper-body .figure-block .fig-content p {
  text-indent: 0;
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 0.5em;
}
.paper-body .figure-block .fig-branch {
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--bg-accent);
  border-left: 2px solid var(--kin-soft);
}
.paper-body .figure-block .fig-branch .branch-head {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.paper-body .figure-block .fig-focus {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(212,184,120,0.08);
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--text);
}
.paper-body .figure-block .fig-footnote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
}
.paper-body .figure-block .fig-footnote p {
  font-size: inherit;
  line-height: inherit;
  text-indent: 0;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   7. Quotations
   ----------------------------------------------------------------------------- */
.paper-body blockquote {
  margin: 28px 0;
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--kin);
}

.paper-body blockquote .quote-eu {
  display: block;
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-soft);
  letter-spacing: 0.01em;
  margin: 0;
  text-indent: 0;
  text-align: justify;
}

.paper-body blockquote .quote-ja {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  font-size: 14.5px;
  line-height: 2;
  color: var(--text);
  margin: 14px 0 0;
  text-indent: 0;
  text-align: justify;
  text-justify: inter-ideograph;
}
.paper-body blockquote .quote-ja::before {
  content: "〔";
  color: var(--kin);
  margin-right: 1px;
}
.paper-body blockquote .quote-ja::after {
  content: "〕";
  color: var(--kin);
  margin-left: 1px;
}

/* Inline citation reference */
.paper-body .cite,
.paper-body blockquote .cite {
  display: inline-block;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ai);
  vertical-align: super;
  line-height: 1;
  margin: 0 1px;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
   8. Notes section
   ----------------------------------------------------------------------------- */
.notes-section {
  max-width: 780px;
  margin: 60px auto 0;
  padding: 0 36px;
}
.notes-section .notes-head {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.35em;
  color: var(--kin);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 8px;
}
.notes-section .notes-head-jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  margin: 0 0 20px;
  letter-spacing: 0.3em;
}
.notes-section .note-entry {
  font-family: "Noto Serif JP", serif;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text-soft);
  margin: 0 0 18px;
  padding: 14px 20px;
  background: var(--bg-raised);
  border-left: 2px solid var(--line);
}
.notes-section .note-entry strong {
  color: var(--text);
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   9. References
   ----------------------------------------------------------------------------- */
.references {
  max-width: 780px;
  margin: 50px auto 0;
  padding: 0 36px;
}
.references .ref-head {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.35em;
  color: var(--kin);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 8px;
}
.references .ref-head-jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: 0.3em;
}
.references .ref-entry {
  font-family: "EB Garamond", "Noto Serif JP", serif;
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-soft);
  margin: 0 0 10px;
  padding-left: 32px;
  text-indent: -32px;
}
.references .ref-entry em {
  font-style: italic;
  color: var(--text);
}
.references .ref-no {
  display: inline-block;
  width: 26px;
  font-family: "EB Garamond", serif;
  font-style: italic;
  color: var(--kin);
}
.references .ref-citloc {
  display: block;
  font-family: "Noto Serif JP", serif;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  padding-left: 26px;
  text-indent: 0;
}

/* -----------------------------------------------------------------------------
   10. End mark and footer
   ----------------------------------------------------------------------------- */
.end-mark {
  max-width: 780px;
  margin: 60px auto 0;
  padding: 0 36px;
  text-align: center;
  color: var(--kin);
  font-size: 14px;
  letter-spacing: 1em;
}

.paper-foot {
  max-width: 780px;
  margin: 40px auto 0;
  padding: 28px 36px 60px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: "EB Garamond", serif;
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.paper-foot .back {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.paper-foot .back:hover { color: var(--kin); border-bottom-color: var(--kin); }
.paper-foot .imprint {
  font-style: italic;
  color: var(--kin);
  letter-spacing: 0.12em;
}

/* -----------------------------------------------------------------------------
   11. Responsive — only adjusts dimensions, never toggles visibility
   ----------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .paper-nav,
  .paper-volume,
  .paper-masthead,
  .paper-body,
  .notes-section,
  .references,
  .end-mark,
  .paper-foot {
    padding-left: 20px;
    padding-right: 20px;
  }
  .paper-masthead .title-jp { font-size: 22px; line-height: 1.5; }
  .paper-masthead .subtitle-jp { font-size: 14px; }
  .paper-masthead .title-eu { font-size: 15.5px; }
  .paper-body .ch-1 { font-size: 18.5px; margin: 56px 0 20px; }
  .paper-body .ch-2 { font-size: 16.5px; margin: 42px 0 16px; }
  .paper-body .ch-3 { font-size: 15px; margin: 32px 0 12px; }
  .paper-body .ch-intro { font-size: 17px; }
  .paper-body p { font-size: 15.5px; line-height: 1.95; }
  .paper-body blockquote {
    margin: 22px 0;
    padding-left: 16px;
  }
  .paper-body blockquote .quote-eu { font-size: 13.5px; line-height: 1.78; }
  .paper-body blockquote .quote-ja { font-size: 14px; line-height: 1.92; }
  .notes-section .note-entry { font-size: 13px; padding: 12px 16px; }
  .references .ref-entry { font-size: 12.5px; padding-left: 26px; text-indent: -26px; }
  .references .ref-citloc { padding-left: 22px; }
  .paper-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .paper-masthead .title-jp { font-size: 20px; }
  .paper-masthead .subtitle-jp { font-size: 13.5px; }
  .paper-body p { font-size: 15px; }
  .paper-body blockquote .quote-eu { font-size: 13px; }
  .paper-body blockquote .quote-ja { font-size: 13.5px; }
}

/* -----------------------------------------------------------------------------
   12. Print — light theme for clean printouts (dark bg too ink-intensive)
   ----------------------------------------------------------------------------- */
@media print {
  :root { color-scheme: light; }
  html, body { background: white; color: black; }
  .paper-body p,
  .paper-body .ch-1,
  .paper-body .ch-2,
  .paper-body .ch-3,
  .paper-body .ch-intro,
  .paper-masthead .title-jp,
  .paper-masthead .byline,
  .paper-body blockquote .quote-ja,
  .notes-section .note-entry strong,
  .references .ref-entry em,
  .references .ref-head-jp {
    color: black;
  }
  .paper-body blockquote .quote-eu,
  .paper-body blockquote .quote-ja { color: #222; }
  .paper-body .figure-block,
  .paper-body .reader-note,
  .notes-section .note-entry {
    background: #f7f2e8;
    color: black;
  }
  .paper-nav, .paper-volume, .paper-foot .back { display: none; }
  .paper-masthead, .paper-body, .notes-section, .references, .paper-foot {
    max-width: 100%;
  }
  .paper-body blockquote { page-break-inside: avoid; }
}