/* A full-width story section, using the same content grid as the hero. */
html { scroll-behavior: smooth; }
.story { --page-text: var(--sand); background: var(--jungle); color: var(--page-text); scroll-margin-top: 0; }
.story-inner { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(40px, 5vw, 76px); }
.story-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: clamp(44px, 6vw, 88px); }
.story-label { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.story-label > span { font-size: 27px; line-height: 1; }
.story-side-note { font-size: 9px; letter-spacing: .15em; text-align: right; }
.story-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.story h1 { margin: -8px 0 0; font-family: var(--font-heading); font-size: clamp(46px, 5.6vw, 80px); font-weight: 400; line-height: 1.12; letter-spacing: -.025em; }
.story-underline { display: inline-block; padding-bottom: 12px; border-bottom: 3px solid var(--sand); border-radius: 0 0 48% 12%; }
.story-copy { min-width: 0; max-width: 465px; padding-top: 3px; }
.story-copy p { font-size: 15px; line-height: 1.85; margin: 0 0 21px; text-wrap: pretty; }
.story-copy .story-lead { font-family: var(--font-heading); font-size: clamp(23px, 2.15vw, 30px); font-weight: 400; line-height: 1.3; margin-bottom: 25px; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy strong { font-weight: 600; }
.story-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 5vw, 70px); margin-top: clamp(56px, 7vw, 96px); }
.story-principles article { border-top: 1px solid #F7F4EE50; padding-top: 20px; }
.story-number { display: block; margin-bottom: 23px; font-size: 10px; letter-spacing: .1em; }
.story h3 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(23px, 2.25vw, 31px); line-height: 1.25; margin: 0 0 13px; }
.story-principles p { font-size: 13px; line-height: 1.8; margin: 0; max-width: 280px; }
.story-signoff { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 68px; padding-top: 28px; border-top: 1px solid #F7F4EE50; }
.story-signoff p { margin: 0; font-size: 13px; line-height: 1.7; }
.story-signoff p > span { font-weight: 600; }
.story-signature { font-family: var(--font-heading); font-size: 23px; line-height: 1.3; }
@media (max-width: 760px) {
  .story-topline { margin-bottom: 40px; }
  .story-side-note { max-width: 150px; font-size: 8px; line-height: 1.6; }
  .story-intro { grid-template-columns: 1fr; gap: 40px; }
  .story h1 { font-size: clamp(46px, 10vw, 68px); }
  .story h1 br:nth-of-type(2) { display: none; }
  .story-copy { max-width: 540px; }
  .story-principles { grid-template-columns: 1fr; gap: 28px; }
  .story-principles article { display: grid; grid-template-columns: 35px minmax(0, 1fr); column-gap: 15px; padding-top: 24px; }
  .story-number { grid-row: 1 / 3; padding-top: 7px; margin: 0; }
  .story-principles p { max-width: 100%; }
  .story-signoff { margin-top: 40px; }
  .story-signature { font-size: 20px; }
}
@media (max-width: 380px) { .story-signoff { flex-direction: column; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Companion annotation belongs to its illustration, never the viewport. */
.story-heading { min-width: 0; }
.story-companion { display: flex; align-items: center; gap: 18px; max-width: 100%; width: 390px; margin: 38px 0 0; }
.story-companion__art { flex: 0 1 160px; min-width: 0; aspect-ratio: 1; overflow: hidden; border-radius: 50% 50% 46% 46%; background: var(--sand); }
.story-companion__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-companion .brand-callout { flex: 1 1 170px; }
.story-companion .brand-callout__text { font-size: clamp(16px, 1.5vw, 21px); }
.story-companion .brand-callout__arrow { stroke: currentColor; justify-self: start; width: 70px; }
@media (max-width: 760px) { .story-companion { margin-top: 28px; } }

/* The entire story page shares one uninterrupted Jungle surface. */
.story-page { background:var(--jungle); color:var(--sand); }
.story-page .brand,.story-page .brand span,.story-page .chevron { color:var(--sand); }
.story-page .brand img{background:transparent;border-radius:0;mix-blend-mode:normal}
.story-page .developer-menu__links { color:var(--soil); }
.story-page .site-header nav>a[aria-current=page] { background:transparent; text-decoration:underline; text-underline-offset:6px; }
.story h1 { color:var(--sand); }
.story-page .story-inner { padding-top:clamp(32px,4vw,60px); }