/* ==========================================================================
   layout.css: page width, sections, and the two-column "split" layouts.
   ========================================================================== */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(2.75rem, 5.5vw, 5rem); position: relative; }
.section--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--paper2 {
  background-color: var(--paper-2);
  background-image:
    var(--grain),
    radial-gradient(ellipse 50% 70% at 85% 15%, rgba(255, 246, 225, 0.55), transparent 70%),
    radial-gradient(ellipse 45% 60% at 10% 90%, rgba(198, 154, 59, 0.08), transparent 70%);
  background-size: 220px 220px, 100% 100%, 100% 100%;
}
/* Sections on a dark background. */
.on-dark .kicker { color: var(--brass-light); }
.on-dark .lede { color: rgba(251, 246, 238, 0.82); }
.on-dark a:not(.btn) { color: var(--brass-light); }

.section--crimson { background: var(--crimson); color: #fbf6ee; }
.section--crimson .lede { color: rgba(251, 246, 238, 0.86); }

.section-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .kicker { justify-content: center; }

/* ---------- Split: two columns that stack on small screens ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4.5vw, 4rem); align-items: center; }
.split--top { align-items: start; }
.split--gap-top { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* A photo that fills the full height of the text beside it (desktop). */
.split--fill { align-items: stretch; }
.split--fill > div { align-self: center; }
.split--fill .fill-figure { margin: 0; display: flex; }
.split--fill .fill-figure img {
  width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 58%;
  border: 10px solid var(--facade); box-shadow: 0 20px 40px rgba(36, 22, 27, 0.18);
}
/* Wider photo column where the picture should lead. */
.split--wide-media { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 860px) {
  .split--fill .fill-figure img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .split--wide-media { grid-template-columns: minmax(0, 1fr); }
}

/* A framed photo inside a split. */
.framed-photo { margin: 0; }
.framed-photo img { width: 100%; border: 10px solid var(--facade); box-shadow: 0 20px 40px rgba(36, 22, 27, 0.18); }