.story-page { min-height: 100svh; background: #f4f0e9; }
.story-header { background: rgba(248,245,239,.98); }
.story-page main { overflow: hidden; }
.story-hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: clamp(45px,7vw,110px); align-items: center; padding: clamp(35px,6vw,85px) clamp(22px,8vw,130px) clamp(65px,9vw,125px); color: white; background: var(--ink); }
.story-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 42px; color: #b7c9d0; font-size: 12px; }
.story-breadcrumb a { font-weight: 800; text-underline-offset: 3px; }
.story-kicker { margin: 0 0 15px; color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.story-hero h1 { max-width: 900px; margin: 0; font-size: clamp(50px,6.2vw,96px); line-height: .86; letter-spacing: -.062em; }
.story-hero__lead { max-width: 760px; margin: 30px 0 0; color: #cad7dc; font-size: clamp(17px,1.7vw,25px); font-weight: 750; line-height: 1.5; }
.story-portrait { position: relative; align-self: stretch; min-height: 560px; margin: 0; overflow: hidden; border: 1px solid rgba(215,223,0,.7); background: #173f51; }
.story-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 58%,rgba(6,43,64,.88)); pointer-events: none; }
.story-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.story-portrait figcaption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; color: white; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.story-article { padding: clamp(75px,10vw,150px) clamp(22px,8vw,130px); }
.story-section { display: grid; grid-template-columns: minmax(0,760px); justify-content: center; padding: 0 0 clamp(70px,9vw,130px); }
.story-section + .story-section { padding-top: clamp(20px,3vw,45px); border-top: 1px solid rgba(6,43,64,.16); }
.story-section--with-media { grid-template-columns: minmax(0,660px) minmax(300px,480px); gap: clamp(45px,8vw,120px); align-items: center; }
.story-section--media-left { grid-template-columns: minmax(340px,560px) minmax(0,680px); }
.story-section__copy h2 { margin: 0 0 28px; color: var(--ink); font-size: clamp(36px,4.4vw,64px); line-height: .94; letter-spacing: -.045em; }
.story-section__copy p { margin: 0 0 20px; color: #45616f; font-size: 17px; line-height: 1.78; }
.story-section__copy strong { color: var(--ink); }
.story-inline-media { position: relative; margin: 0; overflow: hidden; background: #173f51; box-shadow: 18px 18px 0 rgba(6,43,64,.08); }
.story-inline-media--portrait { aspect-ratio: 4/5; }
.story-inline-media--landscape { aspect-ratio: 4/3; }
.story-inline-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(6,43,64,.92)); pointer-events: none; }
.story-inline-media img { width: 100%; height: 100%; object-fit: cover; }
.story-inline-media--portrait img { object-position: center; }
.story-inline-media--landscape img { object-position: center; }
.story-inline-media figcaption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; display: grid; gap: 6px; color: white; }
.story-inline-media figcaption strong { font-size: clamp(20px,2vw,30px); line-height: 1; }
.story-inline-media figcaption span { color: #c8d6dc; font-size: 12px; line-height: 1.45; }
.story-result { margin: 30px 0 !important; padding: 24px 27px; background: var(--lime); font-size: 20px !important; line-height: 1.45 !important; }
.story-section--quote { padding-bottom: 0; }
.story-quote { margin: 0; padding: clamp(32px,4vw,55px); color: var(--ink); background: var(--lime); }
.story-quote p { margin: 0; color: var(--ink); font-size: clamp(24px,2.8vw,40px); font-weight: 900; line-height: 1.25; }
.story-quote cite { display: block; margin-top: 20px; font-size: 13px; font-style: normal; font-weight: 900; text-transform: uppercase; }
@media (max-width: 980px) {
  .story-hero { grid-template-columns: minmax(0,1fr) minmax(260px,.55fr); }
  .story-portrait { min-height: 480px; }
  .story-section--with-media,.story-section--media-left { grid-template-columns: 1fr; }
  .story-inline-media { width: min(100%,620px); }
  .story-section--media-left .story-inline-media { order: 2; }
}
@media (max-width: 680px) {
  .story-hero { grid-template-columns: 1fr; padding: 28px 20px 65px; }
  .story-breadcrumb { margin-bottom: 28px; }
  .story-hero h1 { font-size: clamp(48px,14vw,68px); }
  .story-portrait { min-height: 520px; }
  .story-article { padding: 65px 20px 90px; }
  .story-section { padding-bottom: 75px; }
  .story-inline-media { width: 100%; box-shadow: 10px 10px 0 rgba(6,43,64,.08); }
}