.opening { position: relative; isolation: isolate; overflow: hidden; background: #071a35; }
.opening::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #071a35 8%, #071a35ed 25%, #071a35b0 41%, #071a351a 72%); }
.story-grid, .family-grid { display: grid; align-items: center; }
.story-grid {
  min-height: clamp(470px, 40vw, 620px);
  grid-template-columns: minmax(0, 410px) 1fr;
  padding-block: clamp(46px, 5.3vw, 88px);
}
.about-hero-image { position: absolute; z-index: -2; top: 0; right: 0; width: 78%; height: 100%; object-fit: cover; object-position: right center; }
.kicker { display: flex; align-items: center; gap: .8rem; color: var(--brass); font: 700 .76rem/1.3 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.kicker::before { content: ""; width: 36px; border-bottom: 2px solid currentColor; }
h1, h2 { font-family: var(--serif); font-weight: normal; text-wrap: balance; }
h1 { font-size: clamp(3.3rem, 5.15vw, 5.4rem); letter-spacing: -.052em; line-height: 1.02; margin-block: 17px 23px; }
h1 em { color: var(--brass); font-weight: normal; }
.story-copy .intro { font: 1.25rem/1.48 var(--serif); color: var(--ivory); }
.story-copy > p:not(.intro):not(.kicker) { margin-top: 15px; font-size: 1rem; line-height: 1.65; color: #cbd5e2; }
.family-section { color: var(--ink); background: var(--paper); border-top: 3px solid #bd9a5e; }
.family-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: start; gap: clamp(32px, 9vw, 140px); padding-block: clamp(48px, 6.5vw, 100px); }
h2 { font-size: clamp(2.5rem, 3.5vw, 4.2rem); line-height: 1.08; letter-spacing: -.048em; margin-bottom: 24px; }
.family-copy p { font: 1.075rem/1.68 var(--sans); max-width: 60ch; margin-bottom: 14px; }
.family-copy strong { font-weight: 600; overflow-wrap: anywhere; }
.publisher { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: #254d76; font-weight: 650; text-decoration-thickness: 1px; }
.publisher img { width: 37px; margin-right: 5px; }
.publisher span { margin-left: 3px; }
.cabinet img { width: 100%; padding: 6px; background: #fbf8f0; border: 1px solid #baaa8d; }
.cabinet figcaption { margin-top: 10px; font: .9rem/1.5 var(--sans); color: #536478; }
@media (max-width: 840px) {
  .opening::before { display: none; }
  .story-grid, .family-grid { grid-template-columns: 1fr; gap: 32px; }
  .story-grid { min-height: 0; }
  .about-hero-image { position: static; width: 100%; height: auto; }
  .story-copy, .family-copy { max-width: 64ch; }
  .family-grid { padding-block: 42px; }
  .cabinet { max-width: 580px; }
}
@media (max-width: 460px) {
  .story-grid { padding-block: 35px; }
  h1 { font-size: clamp(2.85rem, 12.2vw, 3.5rem); }
}