/* Free Bacchus — Journal article refinement
   ------------------------------------------------------------------
   Loads after the article's own styles and refines them. Palette and
   typefaces are unchanged: this is about measure, rhythm and the
   treatment of the pull-lines.

   Three width tiers:
     text   41rem  — prose, ~68 characters per line
     media  52rem  — figures, key figures, timeline, video, receipt
     bleed  100vw  — hero band only
   ------------------------------------------------------------------ */

:root{
  --measure: 41rem;
  --media: 52rem;
}

/* ---------- 1. Container widens; prose narrows ---------- */

main#content.article{
  max-width: var(--media);
  padding: 0 clamp(20px,5vw,40px) clamp(60px,8vw,110px);
}

/* every text element sits on the reading measure, centred in the media column */
.article > p,
.article > h2,
.article > h3,
.article > ol,
.article > ul,
.article > .art-dek,
.article > .art-sources{
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* media-width elements fill the container */
.article > figure,
.article > .fb-figs,
.article > .fb-tl,
.article > .fb-receipt,
.article > .art-video{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- 2. Vertical rhythm ---------- */

.article > h2{
  margin: clamp(52px,6.5vw,78px) 0 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.article > h2 + p{ margin-top: 0 }

.article > p{
  font-size: 19px;
  line-height: 1.78;
  margin: 0 0 24px;
}

.article .art-dek{
  margin-bottom: clamp(30px,4vw,42px);
  padding-bottom: clamp(26px,3.5vw,36px);
  border-bottom: 1px solid var(--hairline);
  text-wrap: pretty;
}

.article p.lead{ font-size: 21.5px; line-height: 1.68 }
.article p.lead::first-letter{
  font-size: 3.2em;
  line-height: .78;
  margin: 8px 12px 0 0;
  color: var(--copper-deep);
}

/* ---------- 3. Signature: the pull-lines ---------- *
   Each article closes its sections with a single aphorism, authored
   as such. They were rendering as ordinary italic paragraphs. Given
   their own measure, scale and rule, they become the article's
   punctuation — the standard's voice between sections.               */

.article > p:has(> em:only-child){
  max-width: 44rem;
  margin: clamp(44px,5.5vw,66px) auto;
  padding-top: clamp(26px,3vw,34px);
  text-align: center;
  position: relative;
}
.article > p:has(> em:only-child)::before{
  content:"";
  position:absolute; top:0; left:50%;
  width:46px; height:1px;
  transform: translateX(-50%);
  background: var(--copper);
}
.article > p:has(> em:only-child) > em{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style: italic;
  font-size: clamp(23px,2.9vw,30px);
  line-height: 1.36;
  color: var(--copper-deep);
  text-wrap: balance;
  display: block;
}

/* ---------- 4. Figures ---------- */

.article figure{ margin: clamp(38px,5vw,56px) 0 }
.article figure img{ border-radius: 2px }
.article figcaption{
  max-width: var(--measure);
  margin: 14px auto 0;
  text-align: left;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--taupe);
  padding-left: 14px;
  border-left: 1px solid rgba(168,124,92,.45);
}

/* ---------- 5. Sources ---------- */

.art-sources{ margin-top: clamp(52px,6vw,72px) }
.art-sources ol{ padding-left: 0; list-style: none; counter-reset: src }
.art-sources li{
  counter-increment: src;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}
.art-sources li::before{
  content: counter(src);
  position: absolute; left: 0; top: 1px;
  font-family:"Karla",sans-serif;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--copper-deep);
}

/* ---------- 6. Reading progress ---------- */

.fb-progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--copper);
  z-index: 999;
  pointer-events: none;
  transition: width .1s linear;
}

/* ---------- 7. Responsive ---------- */

@media (max-width: 700px){
  .article > p{ font-size: 18px; line-height: 1.72 }
  .article p.lead{ font-size: 19.5px }
  .article > p:has(> em:only-child) > em{ font-size: 21px }
  .article figcaption{ font-size: 10px }
}

@media (prefers-reduced-motion: reduce){
  .fb-progress{ transition: none }
}

@media print{
  .fb-progress{ display: none }
}