/* ═══ LAYOUT.CSS — Page scaffolding, section wrappers, grid ═══ */

/* ── Section base ── */
.page-section {
  width: 100%;
}

.section-content-wrapper {
  max-width: var(--max-content-width);
  margin:    0 auto;
  padding:   0 var(--space-lg);
}

.section-vertical-padding {
  padding-top:    var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

/* ── Section header row with flanking rules ── */
.section-header-row {
  display:         flex;
  align-items:     center;
  gap:             var(--space-md);
  margin-bottom:   var(--space-xl);
  text-align:      center;
}

.section-header-row h2 {
  white-space:     nowrap;
  letter-spacing:  var(--letter-spacing-wide);
}

.section-dividing-rule {
  flex:             1;
  height:           1px;
  background-color: var(--colour-ink);
  opacity:          0.35;
}

/* ── Full-width rule between sections ── */
.full-width-rule {
  width:            100%;
  height:           1px;
  background-color: var(--colour-ink);
  opacity:          0.2;
}

/* ── Ornament divider (typographic characters) ── */
.ornament-divider {
  text-align:     center;
  color:          var(--colour-crimson);
  letter-spacing: var(--letter-spacing-wide);
  margin:         var(--space-md) 0;
  font-size:      var(--font-size-small);
}

/* ── Biography two-column grid ── */
.biography-two-column-grid {
  display:               grid;
  grid-template-columns: 1fr 280px;
  gap:                   var(--space-xl);
  align-items:           start;
}

@media (max-width: 768px) {
  .biography-two-column-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Folio ornament between biography and works ── */
.folio-ornament-figure {
  max-width: var(--max-content-width);
  margin:    0 auto;
  opacity:   0.8;
}

.folio-ornament-image {
  width:      100%;
  height:     auto;
}

/* ── Colophon ornament in contact section ── */
.colophon-ornament-figure {
  max-width: 600px;
  margin:    var(--space-xl) auto 0;
  opacity:   0.75;
}

.colophon-ornament-image {
  width:  100%;
  height: auto;
}

/* ── Scroll-reveal base state ── */
.reveal-on-scroll {
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal-on-scroll.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── Footer ── */
.site-footer {
  border-top:     2px solid var(--colour-ink);
  padding-top:    var(--space-xl);
  padding-bottom: var(--space-xl);
  text-align:     center;
  color:          var(--colour-sepia);
  font-style:     italic;
  font-size:      var(--font-size-small);
}

.site-footer__content {
  max-width: var(--max-content-width);
  margin:    0 auto;
  padding:   0 var(--space-lg);
}

.site-footer__name-line {
  font-family:     var(--font-family-cinzel);
  font-style:      normal;
  letter-spacing:  var(--letter-spacing-wide);
  font-size:       var(--font-size-base);
  color:           var(--colour-ink);
  margin-bottom:   var(--space-xs);
}

.site-footer__motto {
  color:         var(--colour-sepia);
  margin-bottom: var(--space-sm);
}

.site-footer__made-line {
  color:         var(--colour-ink-faded);
  margin-bottom: var(--space-xs);
}

.site-footer__copyright {
  color:      var(--colour-ink-faded);
  font-style: normal;
}