/* =========================================================
   FOLIO — Magazine-style section page numbers
   Editorial convention: bottom-right corner of each major
   section. Pure decoration — aria-hidden, pointer-events: none.
   Numbered statically in HTML (no JS counter).
   ========================================================= */

/* Utility class to ensure sections anchor correctly */
.has-folio {
  position: relative;
}

/* Container */
.folio {
  position: absolute;
  bottom: clamp(16px, 2vh, 28px);
  right: clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  line-height: 1;
  z-index: 2;
}

/* Shared type treatment */
.folio-num,
.folio-total {
  font-family: var(--ds-font-mono, 'JetBrains Mono', 'IBM Plex Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  font-weight: 500;
  text-transform: uppercase;
}

/* Current section number — full ink */
.folio-num {
  color: var(--ds-ink, #1a1614);
}

/* Total count — muted */
.folio-total {
  color: var(--ds-ink, #1a1614);
  opacity: 0.4;
}

/* Vertical oxblood rule between numbers */
.folio-rule {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--ds-oxblood, #8d2f2a);
  opacity: 0.6;
  margin: 0 8px;
  vertical-align: middle;
}

/* Hide on small screens — too cluttered */
@media (max-width: 600px) {
  .folio {
    display: none;
  }
}