/* Gentium Plus 6.200, self-hosted (SIL Open Font License: fonts/OFL.txt).
   Covers Latin incl. medieval abbreviations, European languages, polytonic
   Greek, Cyrillic, IPA, and standard transliterations. */
@font-face {
  font-family: "Gentium Plus";
  src: url("../fonts/GentiumPlus-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gentium Plus";
  src: url("../fonts/GentiumPlus-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Gentium Plus";
  src: url("../fonts/GentiumPlus-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gentium Plus";
  src: url("../fonts/GentiumPlus-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Logic/math symbols Gentium lacks (∀ ∈ ∪ ∩ ⊢ ⊨ □ ◇ …): use the reader's
   installed math font for just those characters, never for ordinary text. */
@font-face {
  font-family: "Marginalia Math";
  src: local("Cambria Math"), local("STIX Two Math"), local("STIXTwoMath-Regular"),
       local("Noto Sans Math"), local("NotoSansMath-Regular");
  unicode-range: U+2200-22FF, U+27C0-27EF, U+2980-2AFF, U+25A1, U+25C7, U+25CA;
}

:root {
  --ink: #1c1a17;
  --paper: #fbf8f2;
  --rule: #d8cfc0;
  --accent: #7a4a2f;
  --gloss-bg: #f3ede1;
  --commentary-bg: #f6f1e6;
  --prompt-border: #a98d63;
  /* The column grows with the screen up to --max-width, and the type grows
     with it (see body font-size), so wide screens get a wide page without
     lines becoming too long to read comfortably. */
  --max-width: 68rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Scripts Gentium doesn't cover (Hebrew, Arabic, Devanagari, CJK) fall
     through to the reader's system fonts. */
  font-family: "Gentium Plus", "Marginalia Math", Georgia, "Times New Roman", serif;
  /* ~17px on phones, rising to ~22px on large monitors. Everything below is
     sized in em so commentary, glosses and prompts scale with it. */
  font-size: clamp(1.05rem, 0.75rem + 0.65vw, 1.4rem);
  line-height: 1.65;
}

a { color: var(--accent); }

.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 0.75rem 1.25rem;
}

.site-title {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 4rem;
}

h1 { font-size: 1.4em; }

.edition-list { list-style: none; padding: 0; }
.edition-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.edition-section, .edition-meta { color: #6b6156; font-size: 0.8em; margin-left: 0.4rem; }

.edition-header { margin-bottom: 1.5rem; }
.edition-kicker { color: #6b6156; font-size: 0.85em; font-style: italic; margin: 0; }

.block-heading :is(h1, h2, h3) {
  font-size: 1.2em;
  margin: 2rem 0 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}

.passage {
  margin-bottom: 1.75rem;
}

.passage-text p {
  margin: 0 0 0.75rem;
  text-align: justify;
  hyphens: auto;
}

.attachment {
  margin: 0.6rem 0 0.6rem 0.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: 0.35rem;
  font-size: 0.88em;
}

.attachment-label {
  display: inline-block;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
}

.attachment.commentary {
  background: var(--commentary-bg);
  border-left: 3px solid var(--accent);
}

.attachment.commentary summary {
  cursor: pointer;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 700;
  font-family: system-ui, sans-serif;
}

.attachment.commentary .attachment-body {
  margin-top: 0.5rem;
}

.attachment.gloss {
  background: var(--gloss-bg);
  border-left: 3px solid #9c8b6a;
  font-size: 0.84em;
  font-style: italic;
}

.attachment.prompt {
  background: #fff;
  border: 1px dashed var(--prompt-border);
}

.prompt-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  font-family: system-ui, sans-serif;
  margin-bottom: 0.4rem;
}

.prompt-due, .prompt-share {
  font-size: 0.8em;
  color: #6b6156;
}

.prompt-question p { margin: 0 0 0.5rem; }

.prompt-box {
  width: 100%;
  min-height: 4.5rem;
  font-family: inherit;
  font-size: 1em;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  background: #fafafa;
  color: #8a8378;
  resize: vertical;
}

.empty { color: #6b6156; }

@media (max-width: 30rem) {
  main { padding: 1rem 1rem 3rem; }
  /* Justifying ~40-character lines opens wide gaps between words. */
  .passage-text p { text-align: left; }
}