/* Page shell for "Doctrine Over Time" (/doctrine). The timeline itself is
   styled by timeline.css; this handles the hero, intro, and closing note. */

.doc-page { max-width: 1760px; margin: 0 auto; padding: 56px clamp(16px, 3.5vw, 52px) 84px; }

.doc-hero { margin-bottom: 22px; }
.doc-eyebrow { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: #a8823f; font-weight: 700; margin: 0 0 9px; }
.doc-title { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(34px, 5.2vw, 54px); line-height: 1.05; color: #3b3630; margin: 0 0 14px; letter-spacing: 0.01em; text-wrap: balance; }
.doc-explain { max-width: none; }
.doc-explain p { font-size: 19px; line-height: 1.65; color: #4a4335; margin: 0 0 11px; }
.doc-explain b { color: #7a5e26; }
.doc-explain em { color: #5f5647; }

/* On wide screens the intro flows across the full width in balanced columns
   (one per paragraph) instead of a narrow block stranded on the left, while
   each column keeps a comfortable reading measure. */
@media (min-width: 960px) {
  .doc-explain { column-gap: 52px; }
  .doc-explain p { break-inside: avoid; margin: 0 0 15px; }
  #doctrine-page .doc-explain { column-count: 2; }
  #succession-page .doc-explain { column-count: 3; }
}

.doc-controls-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 22px 0 14px; }

.doc-note { margin-top: 26px; border-left: 3px solid #c9a24e; background: rgba(233, 220, 181, 0.42); padding: 14px 18px; border-radius: 0 10px 10px 0; }
.doc-note b { display: block; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: #a8823f; margin-bottom: 5px; }
.doc-note p { margin: 0; font-size: 16.5px; line-height: 1.6; color: #4a4335; }
.doc-note em { color: #7a5e26; font-style: italic; }