/* ==========================================================================
   articles.css — Articles & Introduction to the Gathas section
   zarathushtra.com
   Loads after base.css. Covers:
     - Index page: two-button selector, slide animation, article list,
       DGM volume cards, support-file modals, contributor bio modals
     - Article pages: prose body, poem body, presentation note,
       journal note, footnotes, author bio, inline images, prev/next nav
     - DGM pages: volume hero, sub-section structure, multi-contributor
   Does NOT duplicate: reset, variables, sidebar, hamburger, footer (base.css)
   Does NOT duplicate: section-hero, accordion (homage.css / index.css patterns)
   ========================================================================== */


/* Google Fonts loaded by base.css — no additional weights needed here */

.articles-page {
  padding: 0 0 4rem 0;
}

.section-hero {
  position: relative;
  padding: 3.5rem 3rem 3rem;
  margin-bottom: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-dim);
}

.section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -10%,
    rgba(201, 168, 76, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

.section-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 3rem; right: 3rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.6) 20%,
    var(--gold) 50%,
    rgba(201, 168, 76, 0.6) 80%,
    transparent 100%
  );
}

.section-hero .hero-faravahar {
  position: absolute;
  right: 2.5rem; top: 50%;
  transform: translateY(-50%);
  width: 110px; height: auto;
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.6s ease;
}

.section-hero:hover .hero-faravahar { opacity: 0.09; }

.section-hero .hero-eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.55);
  margin-bottom: 0.75rem;
}

.section-hero .hero-title {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.15;
  margin: 0 0 1.1rem 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-hero .hero-intro {
  font-family: var(--font-body);
  font-size: 1.0rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  max-width: 62ch;
  margin: 0;
}


/* ==========================================================================
   INDEX PAGE — Two-button selector with slide animation
   Pure CSS radio trick. JS adds sessionStorage memory only.

   HTML structure required:
   <input type="radio" name="section" id="r-essays" class="sec-radio">
   <input type="radio" name="section" id="r-dgm"    class="sec-radio">
   <div class="sec-stage">
     <div class="sec-prompt">...</div>
     <div class="sec-btns">
       <label class="sec-btn" for="r-essays">Essays &amp; Reflections</label>
       <label class="sec-btn" for="r-dgm">Introduction to the Gathas</label>
     </div>
   </div>
   <div class="sec-panel sec-panel-essays">...</div>
   <div class="sec-panel sec-panel-dgm">...</div>
   ========================================================================== */

.sec-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

/* Stage: centred vertically on first load, collapses after selection */
.sec-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 38vh;
  padding: 3rem 3rem 2.5rem;
  transition: min-height 0.5s ease, padding 0.5s ease;
}

.sec-btns {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
}

.sec-btn {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.65);
  padding: 0.85rem 2rem;
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  user-select: none;
}

.sec-btn:hover {
  color: var(--gold);
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.04);
}

/* Content panels — hidden until a radio is checked */
.sec-panel {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease 0.15s, max-height 0.5s ease;
  border-top: 1px solid var(--gold-dim);
  padding: 0 3rem;
}

/* ── Essays radio checked ── */
#r-essays:checked ~ .sec-stage {
  min-height: 0;
  padding: 1.5rem 3rem 0;
  justify-content: flex-start;
}

#r-essays:checked ~ .sec-stage .sec-btn[for="r-essays"] {
  color: var(--gold);
  border-color: rgba(201, 168, 76, 0.5);
  background: rgba(201, 168, 76, 0.06);
}

#r-essays:checked ~ .sec-panel-essays {
  opacity: 1;
  max-height: 9999px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* ── DGM radio checked ── */
#r-dgm:checked ~ .sec-stage {
  min-height: 0;
  padding: 1.5rem 3rem 0;
  justify-content: flex-start;
}

#r-dgm:checked ~ .sec-stage .sec-btn[for="r-dgm"] {
  color: var(--gold);
  border-color: rgba(201, 168, 76, 0.5);
  background: rgba(201, 168, 76, 0.06);
}

#r-dgm:checked ~ .sec-panel-dgm {
  opacity: 1;
  max-height: 9999px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}


/* ==========================================================================
   INDEX PAGE — Essays panel: article list
   Format per row: linked title — author name (unlinked) if guest
   ========================================================================== */

.art-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.art-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(201, 168, 76, 0.07);
  font-family: var(--font-body);
  font-size: 1.0rem;
  line-height: 1.4;
}

.art-list li:last-child {
  border-bottom: none;
}

.art-list a {
  color: rgba(232, 223, 200, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.art-list a:hover {
  color: var(--gold2);
}

.art-author {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Poems sub-heading */
.art-subhead {
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}


/* ==========================================================================
   INDEX PAGE — DGM panel: volume cards + series header
   ========================================================================== */

.dgm-series-head {
  margin-bottom: 1.5rem;
}

.dgm-series-title {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.dgm-series-editor {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.55);
}

/* "About this series" trigger links */
.dgm-meta-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
}

.dgm-meta-link {
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.45);
  cursor: pointer;
  transition: color 0.2s ease;
}

.dgm-meta-link:hover {
  color: var(--gold);
}

/* Volume cards */
.vol-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vol-card {
  display: block;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 2px;
  background: rgba(201, 168, 76, 0.02);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.vol-card:hover {
  border-color: rgba(201, 168, 76, 0.28);
  background: rgba(201, 168, 76, 0.05);
}

.vol-num {
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
  margin-bottom: 0.3rem;
}

.vol-title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: rgba(232, 223, 200, 0.82);
  line-height: 1.35;
  margin-bottom: 0.25rem;
}

.vol-contrib {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.45);
}

.vol-subs {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(232, 223, 200, 0.35);
  margin-top: 0.3rem;
  line-height: 1.4;
}


/* ==========================================================================
   INDEX PAGE — Modal overlays (DGM support files + contributor bios)
   Pure CSS checkbox trick. One .modal-wrap per modal.

   HTML structure:
   <input type="checkbox" id="modal-forward" class="modal-toggle">
   <div class="modal-wrap">
     <label class="modal-overlay" for="modal-forward"></label>
     <div class="modal-box">
       <label class="modal-close" for="modal-forward">&#10005;</label>
       <h2 class="modal-title">...</h2>
       <div class="modal-body">...</div>
     </div>
   </div>
   ========================================================================== */

/* Contributor names inline in vol hero byline */
.vol-contrib-name {
  font-family: var(--font-body);
  font-style: italic;
  color: rgba(201, 168, 76, 0.6);
}

/* Per-section byline inside article body */
.vol-section-byline {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.55);
  margin-bottom: 1.5rem;
}

/* Vol contents anchor links */
.vol-contents-link {
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.45);
  transition: color 0.2s ease;
}

.vol-contents-link:hover { color: var(--gold); }

/* Modals are handled via JavaScript — see index.html inline script */

.modal-title {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}

.modal-body {
  font-family: var(--font-body);
  font-size: 1.0rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(232, 223, 200, 0.78);
}

.modal-body p {
  margin-bottom: 1rem;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.modal-body td, .modal-body th {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
  vertical-align: top;
}

.modal-body th {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.5);
  font-weight: 400;
}

/* Contributor bio modal — name and affiliation header */
.bio-modal-name {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.bio-modal-affil {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.5);
  margin-bottom: 1rem;
}


/* ==========================================================================
   ARTICLE PAGES — Hero
   Uses same structural classes as chapter pages in homage.css but with
   article-specific naming to avoid conflicts if both ever load.
   ========================================================================== */

.article-hero {
  position: relative;
  padding: 3rem 3rem 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--gold-dim);
  overflow: hidden;
}

.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% -5%,
    rgba(201, 168, 76, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.article-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 3rem; right: 3rem;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 168, 76, 0.5) 20%,
    var(--gold) 50%,
    rgba(201, 168, 76, 0.5) 80%,
    transparent 100%
  );
}

.article-section-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.5);
  margin-bottom: 0.9rem;
}

.article-title {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.15;
  margin: 0 0 0.75rem 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Author line under title */
.article-byline {
  font-family: var(--font-body);
  font-size: 1.0rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.6);
  margin-bottom: 0;
}

/* Conference / journal provenance note — italic, below byline */
.article-note {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(232, 223, 200, 0.45);
  line-height: 1.5;
  margin-top: 0.5rem;
}


/* ==========================================================================
   ARTICLE PAGES — Prose body
   ========================================================================== */

.article-body {
  max-width: 72ch;
  padding: 0 3rem 2rem;
}

.article-body p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 1.4rem;
}

.article-body p:last-child {
  margin-bottom: 0;
}

/* Section headings within article */
.article-body h2, .article-body h3 {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.65);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}

/* Numbered and bulleted lists — tighter spacing */
.article-body ol,
.article-body ul {
  margin: 0.5rem 0 1.2rem 1.75rem;
}

.article-body li {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(232, 223, 200, 0.85);
  margin-bottom: 0.15rem;
}

/* Blockquotes — Gatha verses and quoted passages — NO left border */
.article-body blockquote {
  margin: 1.25rem 0 1.25rem 1.5rem;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: none;
  border: none;
  background: transparent;
}

/* All blockquote paragraphs forced italic for consistency */
.article-body blockquote p {
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(232, 223, 200, 0.82);
  margin-bottom: 0;
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Nested blockquotes — no additional indent or border */
.article-body blockquote blockquote {
  margin: 0.25rem 0;
  padding: 0;
  border: none;
}

/* Italic caption lines inside list items
   e.g. "Asha is our grounding of the Law — the Root Chakra" */
.article-body li blockquote,
.article-body li blockquote p {
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.55);
  margin: 0.25rem 0 0.5rem 0;
  padding: 0;
  border: none;
}

/* <address> tag — used for Chakra/Amesha Spenta caption lines
   e.g. "Asha is our grounding of the Law — the Root Chakra" */
.article-body address {
  font-family: var(--font-body);
  font-size: 1.0rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  text-align: center;
  display: block;
  margin: 0.5rem 0;
  letter-spacing: 0.02em;
}

/* Footnotes blockquotes — same treatment */
.article-footnotes blockquote {
  border: none;
  background: transparent;
  margin-left: 1rem;
  padding: 0;
}

/* Extra section blockquotes */
.article-extra blockquote {
  border: none;
  background: transparent;
  margin-left: 1rem;
  padding: 0.25rem 0 0.25rem 1rem;
}

/* Quote attribution lines — translator/author credits after blockquotes */
.quote-attribution {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 600;
  color: rgba(232, 223, 200, 0.65);
  text-align: right;
  margin: 0.25rem 0 1.25rem 0;
}

/* Copyright / attribution block at end of article
   Add class="article-attribution" manually to the © paragraph in each file */
.article-attribution,
.article-body p.article-attribution {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.35;
  color: rgba(232, 223, 200, 0.5);
  margin-top: 2rem;
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
}

/* Extra sections after bio (book promos, see-also links etc.) */
.article-extra {
  max-width: 72ch;
  padding: 1rem 3rem 1.5rem;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  margin-top: 0.5rem;
}

.article-extra p {
  font-family: var(--font-body);
  font-size: 1.0rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(232, 223, 200, 0.65);
  margin-bottom: 1rem;
}

.article-extra ul,
.article-extra ol {
  margin: 0.5rem 0 1rem 1.5rem;
}

.article-extra li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(232, 223, 200, 0.6);
  margin-bottom: 0.25rem;
}

/* Bold and italic within prose */
.article-body strong {
  font-weight: 600;
  color: rgba(232, 223, 200, 0.92);
}

.article-body em {
  font-style: italic;
  color: rgba(232, 223, 200, 0.88);
}

/* Superscript footnote references */
.article-body sup {
  font-family: var(--font-head);
  font-size: 0.6rem;
  color: rgba(201, 168, 76, 0.6);
  vertical-align: super;
  letter-spacing: 0.05em;
}

/* Horizontal rule — section divider within article */
.article-body hr {
  border: none;
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  margin: 2.5rem 0;
}

/* Inline images within article body */
.article-body img {
  max-width: 100%;
  border: 1px solid rgba(201, 168, 76, 0.15);
}

/* Default block display for non-floated images */
.article-body p > img:not([style*="float"]) {
  display: block;
  margin: 1.5rem auto;
}

/* Float-right images — clear after the containing section */
.article-body img[style*="float:right"] {
  max-width: 45%;
}

.article-img-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(232, 223, 200, 0.45);
  text-align: center;
  margin-top: -1rem;
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   ARTICLE PAGES — Poem body
   Preserves line breaks and stanza spacing.
   ========================================================================== */

.poem-body {
  max-width: 100ch;
  padding: 0 3rem 2rem;
}

.poem-body p {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 0.85;
  color: var(--text);
  margin-bottom: 2.5rem;
  white-space: pre-line;
}

.poem-body p:last-child {
  margin-bottom: 0;
}

/* Poem stanza groups — blockquote wrapper spacing matches paragraph gap */
.poem-body blockquote {
  margin: 0 0 2.5rem 0;
  padding: 0;
  border: none;
  background: transparent;
}

.poem-body blockquote:last-child {
  margin-bottom: 0;
}

.poem-body blockquote p {
  line-height: 0.85;
  margin-bottom: 2.5rem;
  font-style: normal;
  color: var(--text);
}

.poem-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Poem attribution — date and place */
.poem-attribution {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  color: rgba(232, 223, 200, 0.5);
  padding: 0 3rem 2rem;
  margin: 0;
}

.poem-attribution p {
  margin: 0;
  line-height: 1.35;
}


/* ==========================================================================
   ARTICLE PAGES — Footnotes
   ========================================================================== */

.article-footnotes {
  max-width: 72ch;
  padding: 0 3rem 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(201, 168, 76, 0.15);
}

.footnotes-label {
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
  margin-bottom: 1rem;
}

.footnote-item {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(232, 223, 200, 0.55);
}

.footnote-item-num {
  font-family: var(--font-head);
  font-size: 0.62rem;
  color: rgba(201, 168, 76, 0.45);
  flex-shrink: 0;
  padding-top: 0.25rem;
  min-width: 1.4rem;
}


/* ==========================================================================
   ARTICLE PAGES — Author bio block
   For guest-authored articles: appears after footnotes.
   ========================================================================== */

.article-bio {
  max-width: 72ch;
  padding: 1.25rem 1.5rem;
  margin: 1rem 3rem 2rem;
  border-left: 2px solid rgba(201, 168, 76, 0.2);
  background: rgba(201, 168, 76, 0.02);
  border-radius: 0 2px 2px 0;
}

.article-bio-name {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.6);
  margin-bottom: 0;
}

.article-bio p {
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(232, 223, 200, 0.6);
  margin-bottom: 0.75rem;
}

.article-bio p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   ARTICLE PAGES — Prev / Next navigation
   ========================================================================== */

.article-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 3rem;
  margin-top: 1rem;
  border-top: 1px solid var(--gold-dim);
  font-family: var(--font-body);
  font-size: 0.92rem;
}

.article-nav-prev,
.article-nav-next { flex: 1; max-width: 38%; }

.article-nav-prev { text-align: left; }
.article-nav-next { text-align: right; }

.article-nav-index {
  flex-shrink: 0;
  text-align: center;
}

.article-nav a {
  color: rgba(201, 168, 76, 0.6);
  text-decoration: none;
  line-height: 1.45;
  transition: color 0.2s ease;
  display: inline-block;
}

.article-nav a:hover { color: var(--gold2); }

.article-nav-index a {
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.45);
}

.article-nav-index a:hover { color: var(--gold); }


/* ==========================================================================
   DGM VOLUME PAGES — Hero
   Extends article-hero with volume-specific elements.
   ========================================================================== */

.vol-hero-series {
  display: block;
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
  margin-bottom: 0;
}

.vol-hero-num {
  display: block;
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.5);
  margin-bottom: 0.65rem;
}

/* Sub-section anchor links within a volume */
.vol-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
}

.vol-contents a {
  font-family: var(--font-head);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.45);
  transition: color 0.2s ease;
}

.vol-contents a:hover { color: var(--gold); }


/* ==========================================================================
   DGM VOLUME PAGES — Sub-section headings
   ========================================================================== */

.vol-section {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
}

.vol-section-title {
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.65);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}

/* Sketches and Selections — blockquotes centered like original */
.vol-section blockquote {
  text-align: center;
  margin: 1.5rem auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: 52ch;
}

.vol-section blockquote p {
  font-style: italic;
  color: rgba(232, 223, 200, 0.82);
  margin-bottom: 0.4rem;
}

.vol-section blockquote small {
  display: block;
  font-family: var(--font-head);
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(201, 168, 76, 0.5);
  margin-top: 0.25rem;
}

/* Editor's note — slightly different shade to distinguish from main article */
.vol-editors-note .article-body p {
  color: rgba(232, 223, 200, 0.72);
  font-size: 1.05rem;
}

/* Vol 11 — inline photo display (replaces old JS popups) */
.vol11-photo {
  margin: 2rem 0;
}

.vol11-photo img {
  display: block;
  max-width: 100%;
  width: 480px;
  margin: 0 auto;
  border: 1px solid rgba(201, 168, 76, 0.15);
}

.vol11-photo-caption {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.4);
  text-align: center;
  margin-top: 0.6rem;
}

.vol11-responses {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(201, 168, 76, 0.08);
}

.vol11-response {
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(201, 168, 76, 0.15);
}

.vol11-response p {
  font-family: var(--font-body);
  font-size: 1.0rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(232, 223, 200, 0.72);
  margin-bottom: 0.6rem;
}

.vol11-respondent {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-style: italic;
  color: rgba(201, 168, 76, 0.45);
}


/* ==========================================================================
   RESPONSIVE — Mobile (≤767px)
   ========================================================================== */

@media (max-width: 767px) {

  /* Index */
  .section-hero {
    padding: 2.5rem 1.25rem 2rem;
  }

  .section-hero::after {
    left: 1.25rem; right: 1.25rem;
  }

  .section-hero .hero-faravahar { display: none; }

  .section-hero .hero-title {
    font-size: clamp(1.1rem, 6vw, 1.5rem);
  }

  .sec-stage {
    padding: 2.5rem 1.25rem 2rem;
    min-height: 30vh;
  }

  .sec-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .sec-btn {
    width: 100%;
    text-align: center;
    max-width: 280px;
  }

  .sec-panel {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  #r-essays:checked ~ .sec-stage,
  #r-dgm:checked ~ .sec-stage {
    padding: 1rem 1.25rem 0;
  }

  .art-list li { font-size: 0.95rem; }

  .modal-box {
    padding: 1.5rem;
    max-height: 90vh;
  }

  /* Article pages */
  .article-hero {
    padding: 2.5rem 1.25rem 2rem;
  }

  .article-hero::after {
    left: 1.25rem; right: 1.25rem;
  }

  .article-body,
  .poem-body,
  .article-footnotes {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    max-width: 100%;
  }

  .article-body img[style*="float:right"] {
    float: none;
    max-width: 80%;
    margin: 1rem auto;
    display: block;
  }

  .article-extra {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .article-body p,
  .poem-body p { font-size: 1.05rem; }

  .article-bio {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .article-nav {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem;
    gap: 0.75rem;
    text-align: center;
  }

  .article-nav-prev,
  .article-nav-next {
    max-width: 100%;
    text-align: center;
  }

  .article-nav-index { order: -1; }

  .vol11-photo img { width: 100%; }
}