/* ============================================================
   writing-essay.css
   Shared across all essay pages (not the listing page)
   Two-column body · Typography · Pull quotes · Figures
   ============================================================ */

/* ── ESSAY BODY — two-column newspaper grid ── */
.essay-body {
  padding: 4rem 6vw 6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  row-gap: 0;
  align-items: start;
}
.full { grid-column: 1 / -1 }

/* Per-row vertical divider via right-border on odd left columns */
.essay-body > div:not(.full):nth-child(odd)  { border-right: 1px solid var(--linen-4); padding-right: 2rem }
.essay-body > div:not(.full):nth-child(even) { padding-left: 2rem }

/* ── TYPOGRAPHY ── */
.essay-p {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; line-height: 1.95;
  color: var(--bark); margin-bottom: 1.1rem;
}
/* Drop cap on first paragraph */
.essay-p.drop::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4.2rem; font-weight: 900;
  float: left; line-height: .82;
  margin-right: .12em; margin-top: .08em;
  color: var(--rose);
}

/* Section heading — small caps label style */
.essay-h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem; 
  font-weight: 700;
  letter-spacing: 0.42em; 
  text-transform: uppercase;
  color: var(--espresso);
  margin: 2rem 0 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linen-4);
}

/* ── PULL QUOTE ── */
.pull-quote {
  grid-column: 1 / -1;
  border-top: 2px solid var(--rose);
  border-bottom: 1px solid var(--linen-4);
  padding: 1.8rem 0;
  margin: 1rem 0 1.5rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--espresso);
  position: relative;
}
.pull-quote::before {
  content: '"';
  font-size: 4rem; line-height: 1;
  color: var(--rose); opacity: .2;
  position: absolute; top: 1rem; left: -1rem;
  font-family: 'Playfair Display', serif;
}
.pull-quote cite {
  display: block;
  font-size: .65rem; font-style: normal;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--stone); margin-top: .8rem;
}

/* ── FIGURE — full width with caption ── */
.essay-figure {
  grid-column: 1 / -1;
  margin: 1.5rem 0;
}
.essay-figure img {
  width: 100%;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
  display: block;
  border: 1px solid var(--linen-4);
  background: var(--linen-3);
}
.essay-figure figcaption {
  display: flex; justify-content: space-between;
  align-items: baseline; flex-wrap: wrap; gap: .3rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--linen-4);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 300;
  font-style: italic; color: var(--stone); line-height: 1.5;
}
.essay-figure figcaption span {
  font-family: 'DM Mono', monospace;
  font-style: normal; font-size: .52rem;
  letter-spacing: .12em; color: var(--stone-lt);
  white-space: nowrap;
}

/* Inline figure — right column companion */
.essay-figure-inline {
  margin: 0;
  display: flex; flex-direction: column;
  align-self: start;
}
.essay-figure-inline img {
  width: 100%; display: block;
  border: 1px solid var(--linen-4);
  background: var(--linen-3);
  object-fit: cover; max-height: 420px;
}
.essay-figure-inline figcaption {
  display: flex; justify-content: space-between;
  align-items: baseline; flex-wrap: wrap; gap: .3rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linen-4);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .75rem; font-weight: 300;
  font-style: italic; color: var(--stone); line-height: 1.5;
}
.essay-figure-inline figcaption span {
  font-family: 'DM Mono', monospace;
  font-style: normal; font-size: .5rem;
  letter-spacing: .1em; color: var(--stone-lt); white-space: nowrap;
}

/* ── CAPTION / FOOTNOTE ── */
.essay-caption {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem; font-weight: 300;
  color: var(--stone); font-style: italic;
  margin-top: -.4rem; margin-bottom: 1.2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--linen-4);
  line-height: 1.6;
}

/* ── TEAM / DARK CALLOUT BOXES ── */
.team-box {
  grid-column: 1 / -1;
  background: var(--linen-3);
  border: 1px solid var(--linen-4);
  border-left: 3px solid var(--rose);
  padding: 1.8rem 2rem;
  margin: 1.5rem 0;
}
.team-box-label {
  font-size: .52rem; font-weight: 600;
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--rose); margin-bottom: .9rem;
}
.team-box-text {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 1rem;
  color: var(--bark); line-height: 1.75;
}

.dark-callout {
  grid-column: 1 / -1;
  background: var(--espresso);
  padding: 2rem 2.5rem;
  margin: 1.5rem 0;
  border-left: 3px solid var(--rose);
}
.dark-callout-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--linen); line-height: 1.55;
}
.dark-callout-text em { color: var(--rose); font-style: normal }

/* ── STAT BOX ── */
.stat-box {
  background: var(--linen-3);
  border: 1px solid var(--linen-4);
  border-left: 3px solid var(--rose);
  padding: 1.5rem 1.8rem; margin: 1.2rem 0;
}
.stat-box-num {
  font-family: 'Playfair Display', serif;
  font-weight: 900; font-style: italic;
  font-size: 2.5rem; line-height: 1;
  color: var(--rose); margin-bottom: .4rem;
}
.stat-box-label {
  font-size: .82rem; font-weight: 300;
  color: var(--bark); line-height: 1.6;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .essay-body {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 3rem 6vw 4rem;
  }
  .essay-body > div:not(.full):nth-child(odd)  { border-right: none; padding-right: 0 }
  .essay-body > div:not(.full):nth-child(even) { padding-left: 0 }
  .pull-quote, .team-box, .dark-callout,
  .essay-figure, .essay-figure-inline { grid-column: 1 }
  .essay-figure-inline { position: static }
}
@media (max-width: 480px) {
  .essay-body { padding-left: 5vw; padding-right: 5vw }
}