/* ============================================

   集史 (Jāmiʿ al-Tawārīkh) — Design System

   Premium historical-scholarly aesthetic

   ============================================ */



/* --- Google Fonts --- */

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



/* --- CSS Custom Properties --- */

:root {

  --body-font-scale: 1;

  /* Color Palette — Deep gold & midnight */

  --gold-50: #fefce8;

  --gold-100: #fef9c3;

  --gold-200: #fef08a;

  --gold-300: #fde047;

  --gold-400: #d4a843;

  --gold-500: #b8922e;

  --gold-600: #9a7b24;

  --gold-700: #7c631d;

  --gold-800: #5e4b16;

  

  --midnight-50: #f0f1f5;

  --midnight-100: #d1d5e0;

  --midnight-200: #a3aabf;

  --midnight-300: #757f9e;

  --midnight-400: #4a5578;

  --midnight-500: #2d3555;

  --midnight-600: #1e2541;

  --midnight-700: #161c33;

  --midnight-800: #0f1425;

  --midnight-900: #0a0e1a;

  --midnight-950: #060911;



  --parchment: #f5f0e6;

  --parchment-dark: #e8dfd0;

  --ink: #2c2417;

  --ink-light: #4a3f30;

  --accent-red: #c4453a;

  --accent-teal: #3a8c8c;



  /* Typography */

  --font-display: 'Cormorant Garamond', 'Noto Serif JP', serif;

  --font-body: 'Noto Serif JP', 'Cormorant Garamond', serif;

  --font-ui: 'Inter', 'Noto Serif JP', sans-serif;



  /* Spacing */

  --space-xs: 0.25rem;

  --space-sm: 0.5rem;

  --space-md: 1rem;

  --space-lg: 1.5rem;

  --space-xl: 2rem;

  --space-2xl: 3rem;

  --space-3xl: 4rem;

  --space-4xl: 6rem;



  /* Layout */

  --max-width: 800px;

  --nav-width: 280px;

  --header-height: 64px;



  /* Transitions */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast: 150ms;

  --duration-normal: 300ms;

  --duration-slow: 500ms;



  /* Shadows */

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);

  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);

  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  --shadow-glow: 0 0 20px rgba(180, 146, 46, 0.15);

}



/* --- Reset & Base --- */

*, *::before, *::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  font-size: 16px;

  scroll-behavior: smooth;

  -webkit-text-size-adjust: 100%;

}



body {

  font-family: var(--font-body);

  background: var(--midnight-900);

  color: var(--midnight-100);

  line-height: 1.8;

  min-height: 100vh;

  overflow-x: hidden;

}



/* --- Background Pattern --- */

body::before {

  content: '';

  position: fixed;

  inset: 0;

  background: 

    radial-gradient(ellipse at 20% 50%, rgba(180, 146, 46, 0.04) 0%, transparent 50%),

    radial-gradient(ellipse at 80% 20%, rgba(58, 140, 140, 0.03) 0%, transparent 50%),

    radial-gradient(ellipse at 50% 80%, rgba(180, 146, 46, 0.02) 0%, transparent 50%);

  pointer-events: none;

  z-index: 0;

}



/* --- Typography --- */

h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-display);

  line-height: 1.3;

  letter-spacing: 0.01em;

}



h1 {

  font-size: 2.5rem;

  font-weight: 600;

  color: var(--gold-400);

}



h2 {

  font-size: 1.75rem;

  font-weight: 600;

  color: var(--gold-400);

  margin-top: var(--space-2xl);

  margin-bottom: var(--space-lg);

}



h3 {

  font-size: 1.05rem;

  font-weight: 600;

  color: var(--gold-200);

  margin-top: var(--space-xl);

  margin-bottom: var(--space-md);

}



p {

  margin-bottom: var(--space-md);

  text-align: justify;

  text-justify: inter-ideograph;

}



a {

  color: var(--gold-400);

  text-decoration: none;

  transition: color var(--duration-fast) var(--ease-out);

}



a:hover {

  color: var(--gold-300);

}



/* --- Page Header --- */

.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  height: var(--header-height);

  background: rgba(10, 14, 26, 0.85);

  backdrop-filter: blur(16px) saturate(1.5);

  -webkit-backdrop-filter: blur(16px) saturate(1.5);

  border-bottom: 1px solid rgba(180, 146, 46, 0.15);

  display: flex;

  align-items: center;

  padding: 0 var(--space-xl);

}



.site-header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

}



.site-header__brand {

  display: flex;

  align-items: center;

  gap: var(--space-sm);

  font-family: var(--font-display);

  font-size: 1.2rem;

  font-weight: 600;

  color: var(--gold-400);

  text-decoration: none;

}



.site-header__brand-icon {

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, var(--gold-600), var(--gold-400));

  border-radius: 4px;

  color: var(--midnight-900);

  font-size: 0.85rem;

  font-weight: 700;

}



.site-header__nav {

  display: flex;

  gap: var(--space-lg);

  align-items: center;

}



.site-header__link {

  font-family: var(--font-ui);

  font-size: 0.85rem;

  font-weight: 500;

  color: var(--midnight-200);

  text-decoration: none;

  padding: var(--space-xs) var(--space-sm);

  border-radius: 6px;

  transition: all var(--duration-fast) var(--ease-out);

}



.site-header__link:hover,

.site-header__link--active {

  color: var(--gold-400);

  background: rgba(180, 146, 46, 0.1);

}



.menu-toggle {

  display: none;

  background: none;

  border: none;

  color: var(--gold-400);

  font-size: 1.5rem;

  cursor: pointer;

  padding: var(--space-xs);

}



/* --- Hero Section --- */

.hero {

  position: relative;

  padding: var(--space-4xl) var(--space-xl) var(--space-3xl);

  text-align: center;

  overflow: hidden;

}



.hero::before {

  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 600px;

  height: 600px;

  background: radial-gradient(circle, rgba(180, 146, 46, 0.08) 0%, transparent 70%);

  pointer-events: none;

}



.hero__badge {

  display: inline-flex;

  align-items: center;

  gap: var(--space-sm);

  font-family: var(--font-ui);

  font-size: 0.75rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--gold-500);

  background: rgba(180, 146, 46, 0.1);

  border: 1px solid rgba(180, 146, 46, 0.2);

  border-radius: 999px;

  padding: var(--space-xs) var(--space-md);

  margin-bottom: var(--space-xl);

  animation: fadeInUp 0.8s var(--ease-out) both;

}



.hero__title {

  font-size: clamp(2rem, 5vw, 3.5rem);

  font-weight: 700;

  color: var(--gold-50);

  margin-bottom: var(--space-sm);

  animation: fadeInUp 0.8s var(--ease-out) 0.1s both;

}



.hero__title-jp {

  display: block;

  font-size: clamp(1.2rem, 3vw, 1.8rem);

  font-weight: 500;

  color: var(--gold-400);

  margin-top: var(--space-xs);

}



.hero__subtitle {

  font-family: var(--font-display);

  font-size: 1.1rem;

  font-style: italic;

  color: var(--midnight-200);

  margin-bottom: var(--space-lg);

  animation: fadeInUp 0.8s var(--ease-out) 0.2s both;

}



.hero__meta {

  font-family: var(--font-ui);

  font-size: 0.85rem;

  color: var(--midnight-300);

  animation: fadeInUp 0.8s var(--ease-out) 0.3s both;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: var(--space-md) var(--space-xl);

}



.hero__meta-item strong {

  color: var(--gold-400);

  font-weight: 500;

}



.hero__lead {

  max-width: 42rem;

  margin: 0 auto var(--space-xl);

  font-size: 1.05rem;

  line-height: 1.9;

  color: var(--midnight-200);

  animation: fadeInUp 0.8s var(--ease-out) 0.25s both;

}



.hero__divider {

  width: 80px;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);

  margin: var(--space-xl) auto;

  animation: fadeIn 1s var(--ease-out) 0.5s both;

}



/* --- Main page layout --- */

.main-container {

  position: relative;

  z-index: 1;

  padding: 0 var(--space-xl) var(--space-4xl);

}



.content-wrapper {

  max-width: 1100px;

  margin: 0 auto;

}



.toc-section__title {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 3vw, 2rem);

  font-weight: 600;

  color: var(--gold-400);

  text-align: center;

  margin-bottom: var(--space-sm);

}



.toc-section__desc {

  text-align: center;

  color: var(--midnight-300);

  font-size: 0.95rem;

  margin-bottom: var(--space-2xl);

}



.toc-header {

  margin-bottom: var(--space-xl);

}



/* --- About page --- */

.about-article {

  max-width: 720px;

  margin: 0 auto;

  padding: var(--space-3xl) 0;

}



.about-header {

  text-align: center;

  margin-bottom: var(--space-3xl);

  padding-bottom: var(--space-xl);

  border-bottom: 1px solid rgba(180, 146, 46, 0.15);

}



.about-title {

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 4vw, 2.5rem);

  color: var(--gold-300);

  font-weight: 600;

  margin-bottom: var(--space-sm);

}



.about-subtitle {

  font-family: var(--font-ui);

  font-size: 0.95rem;

  color: var(--midnight-300);

  letter-spacing: 0.04em;

}



.about-section {

  margin-bottom: var(--space-2xl);

}



.about-section h2 {

  font-family: var(--font-display);

  font-size: 1.35rem;

  color: var(--gold-400);

  margin-bottom: var(--space-md);

  font-weight: 600;

}



.about-section p {

  color: var(--midnight-100);

  margin-bottom: var(--space-md);

  line-height: 1.9;

}



.about-section p strong {

  color: var(--gold-300);

  font-weight: 600;

}



.feature-grid {

  display: grid;

  gap: var(--space-lg);

  margin-top: var(--space-lg);

}



.feature-card {

  padding: var(--space-lg) 0;

  border-top: 1px solid rgba(180, 146, 46, 0.12);

}



.feature-card h3 {

  font-family: var(--font-display);

  font-size: 1.15rem;

  color: var(--gold-400);

  margin-bottom: var(--space-sm);

  font-weight: 600;

}



.feature-card p {

  color: var(--midnight-200);

  font-size: 0.95rem;

  margin-bottom: 0;

}



.about-list {

  list-style: none;

  padding: 0;

}



.about-list li {

  padding: var(--space-md) 0;

  border-bottom: 1px solid rgba(180, 146, 46, 0.08);

  color: var(--midnight-100);

  line-height: 1.8;

}



.about-list li strong {

  color: var(--gold-400);

}



.site-footer__inner {

  max-width: 1100px;

  margin: 0 auto;

}



.site-footer__text {

  margin: 0;

}



/* --- Chapter Grid --- */

.chapters-section {

  position: relative;

  z-index: 1;

  max-width: 1000px;

  margin: 0 auto;

  padding: 0 var(--space-xl) var(--space-4xl);

}



.section-heading {

  font-family: var(--font-display);

  font-size: 1.5rem;

  font-weight: 600;

  color: var(--gold-400);

  text-align: center;

  margin-bottom: var(--space-2xl);

  position: relative;

}



.section-heading::after {

  content: '';

  display: block;

  width: 40px;

  height: 2px;

  background: var(--gold-500);

  margin: var(--space-sm) auto 0;

}



.chapter-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: var(--space-lg);

}



.chapter-card {

  position: relative;

  background: linear-gradient(

    145deg,

    rgba(30, 37, 65, 0.6),

    rgba(22, 28, 51, 0.8)

  );

  border: 1px solid rgba(180, 146, 46, 0.12);

  border-radius: 12px;

  padding: var(--space-xl);

  text-decoration: none;

  color: inherit;

  transition: all var(--duration-normal) var(--ease-out);

  overflow: hidden;

  animation: fadeInUp 0.6s var(--ease-out) both;

}



.chapter-card::before {

  content: '';

  position: absolute;

  inset: 0;

  border-radius: 12px;

  background: linear-gradient(

    145deg,

    rgba(180, 146, 46, 0.05),

    transparent 50%

  );

  opacity: 0;

  transition: opacity var(--duration-normal) var(--ease-out);

}



.chapter-card:hover {

  border-color: rgba(180, 146, 46, 0.3);

  transform: translateY(-3px);

  box-shadow: var(--shadow-glow);

}



.chapter-card:hover::before {

  opacity: 1;

}



.chapter-card__number {

  font-family: var(--font-display);

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--gold-500);

  margin-bottom: var(--space-sm);

}



.chapter-card__title {

  font-family: var(--font-display);

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--gold-50);

  margin-bottom: var(--space-xs);

  line-height: 1.4;

}



.chapter-card__title-jp {

  font-family: var(--font-body);

  font-size: 0.95rem;

  font-weight: 500;

  color: var(--gold-400);

  margin-bottom: var(--space-sm);

}



.chapter-card__desc {

  font-family: var(--font-ui);

  font-size: 0.8rem;

  color: var(--midnight-300);

  line-height: 1.6;

}



.chapter-card__arrow {

  position: absolute;

  bottom: var(--space-lg);

  right: var(--space-lg);

  font-size: 1.2rem;

  color: var(--gold-500);

  opacity: 0;

  transform: translateX(-8px);

  transition: all var(--duration-normal) var(--ease-out);

}



.chapter-card:hover .chapter-card__arrow {

  opacity: 1;

  transform: translateX(0);

}



/* Card animation delay */

.chapter-card:nth-child(1) { animation-delay: 0.1s; }

.chapter-card:nth-child(2) { animation-delay: 0.15s; }

.chapter-card:nth-child(3) { animation-delay: 0.2s; }

.chapter-card:nth-child(4) { animation-delay: 0.25s; }

.chapter-card:nth-child(5) { animation-delay: 0.3s; }

.chapter-card:nth-child(6) { animation-delay: 0.35s; }

.chapter-card:nth-child(7) { animation-delay: 0.4s; }

.chapter-card:nth-child(8) { animation-delay: 0.45s; }

.chapter-card:nth-child(9) { animation-delay: 0.5s; }

.chapter-card:nth-child(10) { animation-delay: 0.55s; }



/* Special card for frontmatter/appendix */

.chapter-card--supplementary {

  background: linear-gradient(

    145deg,

    rgba(22, 28, 51, 0.4),

    rgba(15, 20, 37, 0.6)

  );

  border-style: dashed;

}



/* --- Chapter Page Layout --- */

.chapter-layout {

  display: flex;

  min-height: calc(100vh - var(--header-height));

}



.chapter-sidebar {

  position: fixed;

  top: var(--header-height);

  left: 0;

  bottom: 0;

  width: var(--nav-width);

  background: rgba(10, 14, 26, 0.95);

  backdrop-filter: blur(12px);

  border-right: 1px solid rgba(180, 146, 46, 0.1);

  overflow-y: auto;

  padding: var(--space-lg) 0;

  z-index: 50;

  transition: transform var(--duration-normal) var(--ease-out);

}



.chapter-sidebar__list {

  list-style: none;

  padding: 0 var(--space-sm);

}



.chapter-sidebar__item {

  margin-bottom: 0.25rem;

}



.chapter-sidebar__vol-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0.75rem 1rem;

  color: var(--gold-400);

  font-weight: 600;

  font-size: 0.95rem;

  cursor: pointer;

  border-radius: 4px;

  transition: background-color 0.2s, color 0.2s;

  user-select: none;

}



.chapter-sidebar__vol-header:hover {

  background-color: var(--midnight-700);

  color: var(--gold-300);

}



.chapter-sidebar__toggle-icon {

  font-size: 0.75rem;

  transition: transform 0.3s ease;

}



.chapter-sidebar__item--expanded .chapter-sidebar__toggle-icon {

  transform: rotate(180deg);

}



.chapter-sidebar__link {

  display: block;

  font-family: var(--font-ui);

  font-size: 0.8rem;

  font-weight: 400;

  color: var(--midnight-300);

  padding: var(--space-sm) var(--space-md);

  border-radius: 6px;

  text-decoration: none;

  transition: all var(--duration-fast) var(--ease-out);

  line-height: 1.4;

}



.chapter-sidebar__link:hover {

  color: var(--gold-400);

  background: rgba(180, 146, 46, 0.08);

}



.chapter-sidebar__link--active {

  color: var(--gold-400);

  background: rgba(180, 146, 46, 0.12);

  font-weight: 500;

}



.chapter-sidebar__link-num {

  font-size: 0.7rem;

  color: var(--gold-600);

  margin-right: var(--space-xs);

}



/* --- Chapter Content Area --- */

.chapter-content {

  flex: 1;

  margin-left: var(--nav-width);

  max-width: calc(100% - var(--nav-width));

}



.chapter-content__inner {

  max-width: var(--max-width);

  margin: 0 auto;

  padding: var(--space-3xl) var(--space-xl);

}



.chapter-header {

  margin-bottom: var(--space-3xl);

  padding-bottom: var(--space-2xl);

  border-bottom: 1px solid rgba(180, 146, 46, 0.15);

  animation: fadeInUp 0.6s var(--ease-out) both;

}



.chapter-header__number {

  font-family: var(--font-ui);

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: var(--gold-500);

  margin-bottom: var(--space-sm);

}



.chapter-header__title {

  font-size: 2rem;

  color: var(--gold-50);

  margin-bottom: var(--space-xs);

}



.chapter-header__title-jp {

  font-family: var(--font-body);

  font-size: 1.3rem;

  color: var(--gold-400);

  font-weight: 500;

}



.chapter-body {

  font-size: calc(1.05rem * var(--body-font-scale, 1));

  line-height: 2;

  color: var(--midnight-100);

  animation: fadeIn 0.8s var(--ease-out) 0.2s both;

}



.chapter-body p,

.glossary-layout p,

.glossary-table td,

.glossary-table th,

.glossary-layout li {

  font-size: calc(1.05rem * var(--body-font-scale, 1));

  line-height: 2;

  margin-bottom: var(--space-lg);

}



/* Chapter Headings Aesthetics (Distinct from Body Text) */

.chapter-main-heading,

.chapter-body h2 {

  font-family: var(--font-display);

  font-size: calc(1.65rem * var(--body-font-scale, 1));

  font-weight: 700;

  color: var(--gold-300);

  background: linear-gradient(135deg, var(--gold-200), var(--gold-400));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  margin-top: var(--space-2xl);

  margin-bottom: var(--space-xl);

  padding-bottom: var(--space-sm);

  border-bottom: 2px solid rgba(212, 168, 83, 0.4);

  line-height: 1.4;

  letter-spacing: 0.03em;

  text-shadow: 0 2px 10px rgba(212, 168, 83, 0.15);

}



.chapter-section-heading,

.chapter-body h3,

.chapter-subheading {

  font-family: var(--font-display);

  font-size: calc(1.05rem * var(--body-font-scale, 1));

  font-weight: 600;

  color: #fef08a; /* Luminous amber-gold */

  margin-top: var(--space-2xl);

  margin-bottom: var(--space-md);

  padding: var(--space-sm) var(--space-md);

  border-left: 4px solid var(--gold-400);

  background: linear-gradient(90deg, rgba(212, 168, 83, 0.15) 0%, rgba(212, 168, 83, 0.02) 70%, transparent 100%);

  border-radius: 0 8px 8px 0;

  line-height: 1.5;

  letter-spacing: 0.02em;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

}

/* 引用詩（見出し化しない） */
.chapter-poem-intro {
  color: var(--midnight-300);
  font-size: 0.9em;
  margin: 1.2em 0 0.4em;
}

.chapter-verse {
  color: var(--gold-200);
  font-family: var(--font-display);
  font-style: italic;
  margin: 0.15em 1.5rem;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  line-height: 1.85;
}



.chapter-body h4 {

  font-family: var(--font-display);

  font-size: calc(1.15rem * var(--body-font-scale, 1));

  font-weight: 600;

  color: #e2e8f0;

  margin-top: var(--space-xl);

  margin-bottom: var(--space-sm);

  padding-left: var(--space-sm);

  border-left: 3px solid var(--accent-teal);

}



/* Enhanced Footnote Block */

.chapter-body .footnote {

  font-size: calc(0.9rem * var(--body-font-scale, 1));

  color: var(--midnight-200);

  background: rgba(22, 28, 45, 0.4);

  border: 1px solid rgba(212, 168, 83, 0.15);

  border-left: 3px solid var(--gold-500);

  border-radius: 4px;

  padding: var(--space-sm) var(--space-md);

  margin: var(--space-sm) 0;

  scroll-margin-top: 100px;

  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);

}



.chapter-body .footnote.footnote--highlight {

  background: rgba(212, 168, 83, 0.18);

  border-color: var(--gold-400);

  box-shadow: 0 0 20px rgba(212, 168, 83, 0.25);

}



.footnote__marker {

  display: inline-block;

  font-weight: 700;

  color: var(--gold-400);

  margin-right: var(--space-xs);

  font-family: var(--font-ui);

}



/* Inline Footnote Reference Badge */

.footnote-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-ui);

  font-size: calc(0.78em * var(--body-font-scale, 1));

  font-weight: 600;

  color: var(--gold-400);

  background: rgba(212, 168, 83, 0.12);

  border: 1px solid rgba(212, 168, 83, 0.35);

  border-radius: 4px;

  padding: 0 5px;

  margin: 0 2px;

  line-height: 1.5;

  cursor: pointer;

  transition: all 0.2s var(--ease-out);

  vertical-align: baseline;

  text-decoration: none;

}



.footnote-badge:hover,

.footnote-badge:focus-visible {

  color: var(--midnight-950);

  background: var(--gold-400);

  border-color: var(--gold-400);

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(212, 168, 83, 0.4);

  outline: none;

}



/* Glassmorphism Footnote Modal Popup */

.footnote-modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(8, 11, 18, 0.75);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.25s var(--ease-out);

}



.footnote-modal-overlay.is-active {

  opacity: 1;

  pointer-events: auto;

}



.footnote-modal {

  width: 100%;

  max-width: 600px;

  background: linear-gradient(145deg, rgba(30, 37, 58, 0.95), rgba(18, 22, 35, 0.98));

  border: 1px solid rgba(212, 168, 83, 0.4);

  border-radius: 12px;

  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 32px rgba(212, 168, 83, 0.15);

  transform: translateY(20px) scale(0.96);

  transition: transform 0.25s var(--ease-out);

  overflow: hidden;

  display: flex;

  flex-direction: column;

}



.footnote-modal-overlay.is-active .footnote-modal {

  transform: translateY(0) scale(1);

}



.footnote-modal__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1rem 1.5rem;

  background: rgba(212, 168, 83, 0.1);

  border-bottom: 1px solid rgba(212, 168, 83, 0.2);

}



.footnote-modal__title {

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--gold-300);

  margin: 0;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.footnote-modal__badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  background: var(--gold-400);

  color: var(--midnight-950);

  font-size: 0.85rem;

  font-weight: 800;

  padding: 2px 8px;

  border-radius: 4px;

}



.footnote-modal__close {

  background: transparent;

  border: none;

  color: var(--midnight-300);

  font-size: 1.25rem;

  cursor: pointer;

  padding: 0.25rem 0.5rem;

  border-radius: 4px;

  transition: all 0.15s var(--ease-out);

}



.footnote-modal__close:hover {

  color: var(--gold-400);

  background: rgba(255, 255, 255, 0.05);

}



.footnote-modal__body {

  padding: 1.5rem;

  max-height: 60vh;

  overflow-y: auto;

}



.footnote-modal__text {

  font-size: calc(1.05rem * var(--body-font-scale, 1));

  line-height: 1.9;

  color: var(--midnight-100);

  margin: 0;

}



.footnote-modal__footer {

  padding: 1rem 1.5rem;

  background: rgba(14, 18, 28, 0.6);

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  display: flex;

  justify-content: flex-end;

}



.footnote-modal__jump {

  background: transparent;

  border: 1px solid rgba(212, 168, 83, 0.4);

  color: var(--gold-400);

  font-size: 0.85rem;

  font-weight: 600;

  padding: 0.5rem 1rem;

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.2s var(--ease-out);

}



.footnote-modal__jump:hover {

  background: rgba(212, 168, 83, 0.15);

  border-color: var(--gold-300);

  color: var(--gold-300);

  transform: translateY(-1px);

}



/* Translation status badge */

.translation-status {

  display: inline-flex;

  align-items: center;

  gap: var(--space-xs);

  font-family: var(--font-ui);

  font-size: 0.7rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  padding: 4px 10px;

  border-radius: 999px;

  margin-bottom: var(--space-lg);

}



.translation-status--pending {

  color: var(--midnight-300);

  background: rgba(117, 127, 158, 0.15);

  border: 1px solid rgba(117, 127, 158, 0.2);

}



.translation-status--done {

  color: var(--accent-teal);

  background: rgba(58, 140, 140, 0.1);

  border: 1px solid rgba(58, 140, 140, 0.2);

}



.translation-status__dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: currentColor;

}



/* --- Chapter Navigation (prev/next) --- */

.chapter-nav {

  display: flex;

  justify-content: space-between;

  gap: var(--space-lg);

  margin-top: var(--space-4xl);

  padding-top: var(--space-2xl);

  border-top: 1px solid rgba(180, 146, 46, 0.12);

}



.chapter-nav__link {

  display: flex;

  flex-direction: column;

  gap: var(--space-xs);

  padding: var(--space-lg);

  background: rgba(30, 37, 65, 0.4);

  border: 1px solid rgba(180, 146, 46, 0.1);

  border-radius: 10px;

  text-decoration: none;

  flex: 1;

  max-width: 45%;

  transition: all var(--duration-normal) var(--ease-out);

}



.chapter-nav__link:hover {

  border-color: rgba(180, 146, 46, 0.3);

  background: rgba(30, 37, 65, 0.6);

  transform: translateY(-2px);

}



.chapter-nav__link--next {

  text-align: right;

  margin-left: auto;

}



.chapter-nav__label {

  font-family: var(--font-ui);

  font-size: 0.7rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--gold-500);

}



.chapter-nav__title {

  font-family: var(--font-display);

  font-size: 0.95rem;

  font-weight: 600;

  color: var(--gold-50);

}



/* --- Glossary Page --- */

.glossary-layout {

  max-width: 900px;

  margin: 0 auto;

  padding: var(--space-3xl) var(--space-xl);

}



.glossary-section {

  margin-bottom: var(--space-3xl);

  animation: fadeInUp 0.6s var(--ease-out) both;

}



.glossary-section__title {

  font-family: var(--font-display);

  font-size: 1.3rem;

  font-weight: 600;

  color: var(--gold-400);

  margin-bottom: var(--space-lg);

  padding-bottom: var(--space-sm);

  border-bottom: 1px solid rgba(180, 146, 46, 0.15);

}



.glossary-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.9rem;

}



.glossary-table th {

  font-family: var(--font-ui);

  font-size: 0.75rem;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--gold-500);

  text-align: left;

  padding: var(--space-sm) var(--space-md);

  border-bottom: 1px solid rgba(180, 146, 46, 0.2);

}



.glossary-table td {

  padding: var(--space-sm) var(--space-md);

  border-bottom: 1px solid rgba(180, 146, 46, 0.06);

  vertical-align: top;

}



.glossary-table tr:hover td {

  background: rgba(180, 146, 46, 0.04);

}



.glossary-table td:first-child {

  font-family: var(--font-display);

  color: var(--gold-50);

  font-weight: 500;

  white-space: nowrap;

}



.glossary-table td:last-child {

  color: var(--midnight-100);

}



/* Glossary search */

.glossary-search {

  position: relative;

  margin-bottom: var(--space-2xl);

}



.glossary-search__input {

  width: 100%;

  font-family: var(--font-ui);

  font-size: 0.95rem;

  padding: var(--space-md) var(--space-lg);

  background: rgba(30, 37, 65, 0.5);

  border: 1px solid rgba(180, 146, 46, 0.15);

  border-radius: 10px;

  color: var(--midnight-50);

  outline: none;

  transition: all var(--duration-fast) var(--ease-out);

}



.glossary-search__input::placeholder {

  color: var(--midnight-400);

}



.glossary-search__input:focus {

  border-color: var(--gold-500);

  box-shadow: 0 0 0 3px rgba(180, 146, 46, 0.1);

}



.glossary-search__icon {

  position: absolute;

  left: var(--space-md);

  top: 50%;

  transform: translateY(-50%);

  color: var(--midnight-400);

  font-size: 1rem;

}



/* --- Footer --- */

.site-footer {

  position: relative;

  z-index: 1;

  text-align: center;

  padding: var(--space-2xl) var(--space-xl);

  border-top: 1px solid rgba(180, 146, 46, 0.08);

  font-family: var(--font-ui);

  font-size: 0.75rem;

  color: var(--midnight-400);

}



.site-footer a {

  color: var(--gold-600);

}



/* Glossary tabs & cards (glossary.html) */

.glossary-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-bottom: 2rem;

  justify-content: center;

}



.glossary-tab {

  padding: 0.45rem 0.9rem;

  background: transparent;

  border: 1px solid rgba(180, 146, 46, 0.25);

  color: var(--midnight-200);

  border-radius: 4px;

  cursor: pointer;

  font-family: var(--font-ui);

  font-size: 0.85rem;

  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);

}



.glossary-tab:hover,

.glossary-tab.active {

  background: rgba(180, 146, 46, 0.12);

  color: var(--gold-300);

  border-color: var(--gold-500);

}



.glossary-list {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 1.25rem;

  padding-bottom: var(--space-3xl);

}



.glossary-card {

  padding: var(--space-md) 0;

  border-top: 1px solid rgba(180, 146, 46, 0.12);

}



.glossary-card h3 {

  color: var(--gold-400);

  margin-bottom: 0.25rem;

  font-size: 1.1rem;

  font-family: var(--font-display);

  font-weight: 600;

}



.glossary-card .yomi {

  color: var(--midnight-400);

  font-size: 0.8rem;

  font-family: var(--font-ui);

  margin-bottom: 0.6rem;

}



.glossary-card p {

  color: var(--midnight-200);

  font-size: 0.9rem;

  line-height: 1.65;

  margin: 0;

}



/* --- Animations --- */

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(16px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes pulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.6; }

}



/* --- Scrollbar --- */

::-webkit-scrollbar {

  width: 8px;

}



::-webkit-scrollbar-track {

  background: var(--midnight-900);

}



::-webkit-scrollbar-thumb {

  background: var(--midnight-600);

  border-radius: 4px;

}



::-webkit-scrollbar-thumb:hover {

  background: var(--midnight-500);

}



/* --- Responsive --- */

@media (max-width: 768px) {

  :root {

    --nav-width: 260px;

  }



  .site-header__nav {

    display: none;

  }



  .menu-toggle {

    display: block;

  }



  .hero {

    padding: var(--space-3xl) var(--space-md) var(--space-2xl);

  }



  .chapter-grid {

    grid-template-columns: 1fr;

  }



  .chapter-sidebar {

    transform: translateX(-100%);

  }



  .chapter-sidebar--open {

    transform: translateX(0);

  }



  .chapter-content {

    margin-left: 0;

    max-width: 100%;

  }



  .chapter-content__inner {

    padding: var(--space-xl) var(--space-md);

  }



  .chapter-nav {

    flex-direction: column;

  }



  .chapter-nav__link {

    max-width: 100%;

  }



  h1 {

    font-size: 1.8rem;

  }



  h2 {

    font-size: 1.4rem;

  }

}



@media (max-width: 480px) {

  .hero__title {

    font-size: 1.6rem;

  }



  .chapters-section {

    padding: 0 var(--space-md) var(--space-2xl);

  }

}



/* ============================================

   Font Size Controller in Header

   ============================================ */

.font-size-ctrl {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  background: var(--midnight-800);

  border: 1px solid var(--gold-800);

  border-radius: var(--radius-full);

  padding: 0.25rem 0.75rem;

  margin-left: auto;

  margin-right: 1rem;

  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);

}



.font-size-ctrl__icon {

  font-size: 0.75rem;

  color: var(--gold-400);

  font-weight: 700;

  user-select: none;

}



.font-size-ctrl__icon--large {

  font-size: 1rem;

}



.font-size-ctrl__slider {

  -webkit-appearance: none;

  width: 90px;

  height: 4px;

  background: var(--midnight-600);

  border-radius: 2px;

  outline: none;

  cursor: pointer;

}



.font-size-ctrl__slider::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: var(--gold-500);

  border: 2px solid var(--midnight-900);

  cursor: pointer;

  transition: transform 0.15s var(--ease-out), background 0.15s var(--ease-out);

}



.font-size-ctrl__slider::-webkit-slider-thumb:hover {

  transform: scale(1.25);

  background: var(--gold-400);

}



.font-size-ctrl__value {

  font-size: 0.75rem;

  font-family: var(--font-mono);

  color: var(--gold-400);

  min-width: 38px;

  text-align: right;

  font-feature-settings: "tnum";

}



@media (max-width: 768px) {

  .font-size-ctrl {

    margin-right: 0.5rem;

    padding: 0.2rem 0.5rem;

    gap: 0.3rem;

  }

  .font-size-ctrl__slider {

    width: 60px;

  }

}



/* ============================================

   Interactive Genealogy Tree Design System

   ============================================ */

.genealogy-container {

  margin: var(--space-xl) 0 var(--space-3xl);

  padding: var(--space-xl);

  background: rgba(18, 22, 35, 0.4);

  border: 1px solid rgba(180, 146, 46, 0.15);

  border-radius: 12px;

  box-shadow: var(--shadow-md), var(--shadow-glow);

  position: relative;

  overflow: hidden;

}



.genealogy-header {

  text-align: center;

  margin-bottom: var(--space-2xl);

  border-bottom: 1px dashed rgba(180, 146, 46, 0.2);

  padding-bottom: var(--space-md);

}



.genealogy-title {

  font-size: 1.6rem;

  color: var(--gold-400);

  margin: 0 0 var(--space-xs);

}



.genealogy-subtitle {

  font-family: var(--font-ui);

  font-size: 0.8rem;

  color: var(--midnight-300);

}



.genealogy-tree-scroll {

  overflow-x: auto;

  padding: var(--space-md) 0;

  cursor: grab;

  scroll-behavior: smooth;

}



.genealogy-tree-scroll::-webkit-scrollbar {

  height: 6px;

}



.genealogy-tree {

  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 1400px; /* Force minimum width to lay out all 7 columns side-by-side */

  padding: 0 var(--space-lg);

}



/* Tiers */

.tree-tier {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

}



.spouse-block {

  display: flex;

  align-items: center;

  gap: var(--space-lg);

  position: relative;

  background: rgba(30, 37, 65, 0.2);

  padding: var(--space-xs) var(--space-md);

  border-radius: var(--space-md);

  border: 1px dashed rgba(180, 146, 46, 0.2);

}



.spouse-marriage {

  font-family: var(--font-ui);

  font-size: 0.7rem;

  color: var(--gold-500);

  background: var(--midnight-800);

  border: 1px solid var(--gold-700);

  padding: 2px 6px;

  border-radius: 4px;

  user-select: none;

  font-weight: 600;

  position: relative;

}



.spouse-marriage::before,

.spouse-marriage::after {

  content: '';

  position: absolute;

  top: 50%;

  width: var(--space-lg);

  height: 1px;

  background: rgba(180, 146, 46, 0.4);

}



.spouse-marriage::before {

  right: 100%;

}

.spouse-marriage::after {

  left: 100%;

}



/* Nodes */

.tree-node {

  width: 170px;

  padding: var(--space-sm) var(--space-md);

  background: linear-gradient(135deg, rgba(22, 28, 51, 0.85), rgba(14, 18, 30, 0.95));

  border: 1px solid rgba(180, 146, 46, 0.25);

  border-radius: 8px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

  text-align: center;

  cursor: pointer;

  transition: all var(--duration-normal) var(--ease-out);

  position: relative;

  user-select: none;

}



.tree-node:hover {

  border-color: var(--gold-400);

  transform: translateY(-4px);

  box-shadow: 0 8px 20px rgba(180, 146, 46, 0.3), var(--shadow-glow);

  z-index: 10;

}



.active-node {

  border-color: var(--gold-400);

  box-shadow: 0 0 12px rgba(180, 146, 46, 0.2);

}



.node-label {

  font-family: var(--font-ui);

  font-size: 0.65rem;

  font-weight: 600;

  color: var(--gold-500);

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: var(--space-xs);

}



.node-name {

  font-family: var(--font-display);

  font-size: 0.95rem;

  font-weight: 600;

  color: var(--gold-50);

  line-height: 1.2;

}



.node-lifespan {

  font-family: var(--font-ui);

  font-size: 0.6rem;

  color: var(--midnight-300);

  margin-top: 2px;

}



.spouse-node {

  border-color: rgba(58, 140, 140, 0.4);

}

.spouse-node .node-label {

  color: var(--accent-teal);

}

.spouse-node:hover {

  border-color: var(--accent-teal);

  box-shadow: 0 8px 20px rgba(58, 140, 140, 0.3);

}



/* Connectors */

.tree-connector-v {

  width: 1px;

  height: var(--space-lg);

  background: rgba(180, 146, 46, 0.3);

}



.tree-branch-container {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  position: relative;

}



.tree-branch-header-line {

  width: 85%; /* Extends over 7 columns */

  height: 1px;

  background: rgba(180, 146, 46, 0.3);

  position: relative;

}



.tree-sons-grid {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  width: 100%;

  gap: var(--space-sm);

  align-items: start;

}



.son-column {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

}



.tree-connector-branch-v {

  width: 1px;

  height: var(--space-lg);

  background: rgba(180, 146, 46, 0.3);

}



.tree-connector-sub-v {

  width: 1px;

  height: var(--space-md);

  background: rgba(180, 146, 46, 0.2);

}



.sub-nodes {

  display: flex;

  flex-direction: column;

  gap: var(--space-xs);

  width: 100%;

  align-items: center;

}



.sub-node {

  width: 150px;

  padding: 6px var(--space-sm);

  font-size: 0.8rem;

  background: rgba(18, 22, 35, 0.6);

  border-color: rgba(180, 146, 46, 0.15);

}



.sub-node .node-name {

  font-size: 0.8rem;

}



.highlight-son {

  border-color: var(--accent-red);

}

.highlight-son:hover {

  border-color: var(--accent-red);

  box-shadow: 0 8px 20px rgba(196, 69, 58, 0.3);

}



/* Info Panel */

.genealogy-panel {

  margin-top: var(--space-xl);

  padding: var(--space-md) var(--space-lg);

  background: rgba(10, 14, 26, 0.6);

  border: 1px solid rgba(180, 146, 46, 0.2);

  border-radius: 8px;

  min-height: 100px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.panel-placeholder {

  display: flex;

  align-items: center;

  gap: var(--space-md);

  color: var(--midnight-300);

  font-family: var(--font-ui);

  font-size: 0.8rem;

}



.panel-placeholder .panel-icon {

  font-size: 1.5rem;

}



.panel-content {

  animation: fadeIn var(--duration-normal) var(--ease-out);

}



.panel-title {

  font-size: 1.15rem;

  color: var(--gold-300);

  margin-bottom: 2px;

}



.panel-badge {

  display: inline-block;

  font-family: var(--font-ui);

  font-size: 0.65rem;

  font-weight: 700;

  text-transform: uppercase;

  color: var(--midnight-950);

  background: var(--gold-400);

  padding: 1px 6px;

  border-radius: 4px;

  margin-bottom: var(--space-sm);

}



.panel-desc {

  font-size: 0.85rem;

  line-height: 1.6;

  color: var(--midnight-100);

  margin: 0;

  text-align: left;

}



/* Submenu structure in Sidebar */

.chapter-sidebar__submenu {

  list-style: none;

  padding-left: var(--space-xl);

  margin: var(--space-xs) 0 var(--space-sm);

  display: none; /* Controlled by active class */

}



.chapter-sidebar__item--expanded .chapter-sidebar__submenu {

  display: block;

}



.chapter-sidebar__sublink {

  display: block;

  font-family: var(--font-ui);

  font-size: 0.75rem;

  color: var(--midnight-300);

  padding: 4px var(--space-sm);

  border-radius: 4px;

  text-decoration: none;

  transition: all var(--duration-fast) var(--ease-out);

}



.chapter-sidebar__sublink:hover,

.chapter-sidebar__sublink--active {

  color: var(--gold-400);

  background: rgba(180, 146, 46, 0.06);

}







/* --- Glossary Popup --- */

.glossary-term {

  color: #faead6;

  border-bottom: 1px dashed #faead6;

  cursor: pointer;

  transition: all 0.2s var(--ease-out);

}

.glossary-term:hover {

  background-color: rgba(250, 234, 214, 0.15);

}



.glossary-popup {

  display: none;

  position: absolute;

  z-index: 1000;

  width: 320px;

  background-color: var(--midnight-800);

  border: 1px solid var(--midnight-600);

  border-radius: 8px;

  padding: 1rem;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  font-family: 'Noto Serif JP', serif;

  color: var(--midnight-100);

  animation: fadeIn 0.2s ease-out;

}



.glossary-popup__header {

  margin-bottom: 0.5rem;

  padding-bottom: 0.5rem;

  border-bottom: 1px solid var(--midnight-600);

  display: flex;

  justify-content: space-between;

  align-items: baseline;

}



.glossary-popup__title {

  color: var(--gold-400);

  font-size: 1.1rem;

  font-weight: bold;

}



.glossary-popup__yomi {

  color: var(--midnight-300);

  font-size: 0.8rem;

}



.glossary-popup__desc {

  font-size: 0.9rem;

  line-height: 1.6;

}



/* --- Accordion UI for Aligned Translations --- */
.t-row {
  margin-bottom: 1.2em;
}

.t-row:not(.is-heading) .translation-line {
  cursor: pointer;
  transition: background 0.15s ease-in-out;
  padding: 0.5rem;
  border-radius: 4px;
}

.t-row:not(.is-heading) .translation-line:hover {
  background: rgba(192, 161, 84, 0.12); /* Gold subtle background */
}

.t-row:not(.is-heading) .translation-line.is-active {
  background: rgba(192, 161, 84, 0.22);
}

.t-row.is-heading .translation-line {
  cursor: default;
}

.original-inline {
  margin: 0.2em 0.5rem 0.8em 0.5rem;
  padding: 1rem;
  background-color: var(--midnight-700);
  border-right: 3px solid var(--gold-500); /* Right border for RTL */
  color: var(--gold-100);
  font-size: 1.1em;
  line-height: 1.8;
  border-radius: 0 4px 4px 0;
}

.original-inline[dir="rtl"] {
  text-align: right;
  font-family: 'Times New Roman', Times, serif; /* Or a specific Persian font if available */
}