/* v2 editorial layer: lighter text, photographic panels, no band canvases */
body { font-family: 'P2 Sans', 'Profile Sans', Arial, sans-serif; font-weight: 400; }
.standfirst { font-weight: 400; font-size: 20px; line-height: 1.6; color: #b9c3cf; }
.standfirst + .standfirst { color: var(--text); font-weight: 450; }
.hero-link, nav, footer, .contact-button { font-weight: 500; }
.lead { font-weight: 450; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.4; letter-spacing: -.012em; text-wrap: pretty; }
.closing-body p { font-weight: 400; }
h2 { text-wrap: balance; }

/* Editorial photo panels */
.ed { position: relative; border-top: 1px solid var(--rule); }
.ed-grid { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: center; }
.ed-learned, .ed-here { padding: clamp(96px, 10vw, 150px) 0; }
.ed-fig { margin: 0; position: relative; overflow: hidden; background: var(--bg-2); }
.ed-fig img, .ed-bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-fig::after, .ed-bleed::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.ed-copy { width: auto; margin: 0; max-width: 500px; }
.ed-copy h2, .ed-split-title { font-size: clamp(46px, 4.6vw, 72px); line-height: .98; letter-spacing: -.045em; margin-bottom: 30px; }
.ed-copy p:not(.lead) { color: #a3afbd; font-size: 17px; line-height: 1.8; margin-top: 24px; max-width: 58ch; text-wrap: pretty; }

/* What I learned: tall image left, copy right, aligned low */
.ed-learned .ed-fig { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
.ed-learned .ed-copy { grid-column: 8 / span 5; align-self: end; padding-bottom: 6%; }

/* Why I'm here: copy left, landscape photo right */
.ed-here .ed-copy { grid-column: 1 / span 5; }
.ed-here .ed-fig { box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.ed-here .ed-fig { grid-column: 6 / span 7; aspect-ratio: 4 / 3; }

/* What it's for: full-bleed image, then a two-column spread */
.ed-for { padding-bottom: clamp(96px, 10vw, 150px); }
.ed-bleed { margin: 0; position: relative; height: min(72vh, 640px); min-height: 420px; overflow: hidden; }
.ed-bleed img { object-position: 50% 45%; }
.ed-bleed::before { content: ''; position: absolute; inset: auto 0 0; height: 38%; z-index: 1; background: linear-gradient(0deg, var(--bg), transparent); }
.ed-split { align-items: start; margin-top: clamp(-56px, -3.6vw, -32px); position: relative; z-index: 2; }
.ed-split-title { grid-column: 1 / span 5; margin: 0; }
.ed-split .ed-copy { grid-column: 7 / span 6; max-width: 560px; padding-top: 10px; }

/* Closing image: quieter */
.coastal-frame img { filter: brightness(.7); }
.coastal-stage { height: min(70svh, 680px); }

footer { flex-wrap: wrap; }
footer .credits { flex-basis: 100%; order: 3; font-size: 10px; letter-spacing: .08em; color: #5d6b7c; text-transform: uppercase; }

@media (max-width: 900px) {
  .ed-learned, .ed-here { padding: 72px 0 80px; }
  .ed-grid { display: block; }
  .ed-fig { margin-bottom: 36px; }
  .ed-learned .ed-fig { aspect-ratio: 4 / 4.4; }
  .ed-learned .ed-fig img { object-position: 50% 40%; }
  .ed-here .ed-fig { margin: 40px 0 0; }
  .ed-copy h2, .ed-split-title { font-size: clamp(40px, 10.5vw, 56px); margin-bottom: 22px; }
  .ed-bleed { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .ed-split { margin-top: -28px; }
  .ed-split .ed-copy { padding-top: 0; }
  .ed-split-title { margin-bottom: 22px; }
  .ed-for { padding-bottom: 80px; }
  .lead { font-size: 20px; }
}
.ed-bleed picture { display: block; height: 100%; }
/* r3: tighten the run into the closing, keep faces in frame */
.ed-bleed img { object-position: 50% 20%; }
.ed-for { padding-bottom: clamp(80px, 8vw, 112px); }
.coastal-shade { background: linear-gradient(180deg, var(--bg) 0%, rgba(8,17,28,.15) 22%, rgba(8,17,28,.3) 70%, var(--bg) 100%); }
.closing-body { padding-top: 32px; }
@media (max-width: 900px) { .ed-for { padding-bottom: 72px; } .closing-body { padding-top: 24px; } }