/* Story in motion: the approved navy / forest / olive cinematic reading page. */
body.story-page {
  --story-navy: #0A1628;
  --story-lilac: #D6D4ED;
  --story-forest: #1B3A32;
  --story-olive: #BDB414;
  --story-gutter: clamp(24px, 5.2vw, 88px);
  margin: 0; padding: 0; background: var(--story-navy); color: var(--story-lilac);
  font-family: Inter, sans-serif;
}
.story-page *, .story-page *::before, .story-page *::after { box-sizing: border-box; }
.story-page main { margin: 0; padding: 0; outline: none; }
.story-page :is(h1,h2,h3,p,figure) { margin: 0; color: inherit; }
.story-page :is(h1,h2) { font-family: 'Funnel Display', sans-serif; font-weight: 700; letter-spacing: -.055em; overflow-wrap: anywhere; }
.story-page a { color: inherit; }
.story-page a:focus-visible, .story-page button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.story-page section[id] { scroll-margin-top: 88px; }
.story-page .navbar, .story-page .navbar[data-compact-nav] {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 64px;
  min-height: 0; z-index: 40; padding: 0; border: 0;
  background: #0A1628 !important; color: #D6D4ED; transform: none !important;
  mix-blend-mode: normal !important; --immersive-link-ink: #D6D4ED;
}
.story-page .navbar .container { max-width: none; width: 100%; height: 100%; margin: 0; padding: 0 var(--story-gutter) !important; }
.story-page .navbar .nav-wrap, .story-page .navbar .nav-wrap.dark { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; min-height: 64px; padding: 0; background: none; }
.story-page .nav-logo-wrap { display: inline-flex; align-items: center; flex: 0 0 auto; width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
.story-page .navbar .nav-logo-wrap img { display: block; width: 35px; height: auto; filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(655%) hue-rotate(196deg) brightness(98%) contrast(88%) !important; }
.story-page .nav-menu, .story-page .nav-menu-area { padding: 0; margin: 0; background: none; }
.story-page .navbar .nav-menu { margin-left: auto; }
.story-page .nav-menu-area { display: flex; align-items: center; gap: 32px; }
.story-page .navbar :is(.nav-link,.footer-email,.menu-button,.w-icon-nav-menu),
.story-page .navbar[data-compact-nav] :is(.nav-link,.footer-email,.menu-button,.w-icon-nav-menu) {
  color: #D6D4ED !important; background: transparent !important; font: 400 14px/1.4 Inter,sans-serif; border: 0; border-radius: 0;
}
.story-page .navbar .nav-link { width: auto; min-height: 44px; margin: 0; padding: 12px 0; text-decoration: none; }
.story-page .navbar .nav-link[aria-current="page"] { text-decoration: underline; text-decoration-color: #BDB414; text-underline-offset: 9px; text-decoration-thickness: 2px; }
.story-page .menu-button { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 10px; cursor: pointer; }
.story-page .w-icon-nav-menu { font-family: webflow-icons !important; font-size: 24px !important; }
.story-eyebrow { font: 400 11px/1.7 Inter,sans-serif; text-transform: uppercase; letter-spacing: .22em; }
.story-opening { position: relative; isolation: isolate; min-height: 780px; height: 100svh; }
.story-opening-stage { position: absolute; inset: 0; overflow: hidden; background: #0A1628; pointer-events: none; }
.story-backdrop, .story-wing { display: block; position: absolute; inset: 0; transform-origin: 50% 73%; }
.story-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.story-backdrop { transform: scale(var(--story-camera, 1)); }
.story-wing { background: url('../images/story/corridor.webp') 50% 70% / cover no-repeat; }
.story-wing-left { clip-path: polygon(0 0, 14% 0, 26% 78%, 0 93%); transform: translateX(calc(-1 * var(--story-wing-x, 0%))) scale(var(--story-wing-scale, 1)); transform-origin: 0 70%; }
.story-wing-right { clip-path: polygon(92% 0, 100% 0, 100% 95%, 77% 78%); transform: translateX(var(--story-wing-x, 0%)) scale(var(--story-wing-scale, 1)); transform-origin: 100% 70%; }
.story-sculpture-position { position: absolute; bottom: 8%; left: 50%; width: clamp(150px, 16vw, 275px); transform: translateX(-50%); }
.story-sculpture { display: block; width: 100%; height: auto; transform: translateY(var(--story-sculpture-y, 0px)) scale(var(--story-sculpture-scale, 1)); transform-origin: 50% 85%; }
.story-stage-shade { position: absolute; inset: 0; background: #0A1628; opacity: var(--story-shade, 0); }
.story-opening-copy { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: clamp(126px, 16svh, 180px) var(--story-gutter) 0; text-align: center; pointer-events: none; }
.story-opening h1 { max-width: 12ch; margin: 22px auto 18px; font-size: clamp(76px, 9.8vw, 156px); line-height: .87; }
.story-opening-dek { font-size: clamp(16px, 1.6vw, 24px); font-weight: 400; letter-spacing: .015em; line-height: 1.5; }
.story-opening-cue { position: absolute; bottom: 28px; left: var(--story-gutter); right: var(--story-gutter); z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; }
.story-opening-cue a { display: inline-flex; gap: 22px; align-items: center; min-height: 44px; text-decoration: none; }
.story-opening-cue a span { font-size: 21px; }
.story-opening-cue > span { opacity: .8; }
.story-rail { position: fixed; z-index: 35; right: 18px; top: 30%; display: grid; gap: 30px; }
.story-rail::before { content: ''; position: absolute; left: 15px; top: 22px; bottom: 22px; width: 1px; background: rgb(214 212 237 / 30%); }
.story-rail a { position: relative; display: flex; align-items: center; gap: 8px; width: 44px; min-height: 44px; text-decoration: none; font-size: 10px; color: #D6D4ED; background: #0A1628; border-radius: 24px; }
.story-rail-dot { width: 6px; height: 6px; flex: 0 0 auto; margin-left: 12px; border-radius: 100%; background: #D6D4ED; }
.story-rail a[aria-current="location"] .story-rail-dot { background: #BDB414; box-shadow: 0 0 0 3px rgb(189 180 20 / 20%); }
.story-rail a[aria-current="location"] > span:last-child { text-decoration: underline; text-underline-offset: 4px; }
.story-chapter { position: relative; margin: 0 var(--story-gutter); padding: clamp(72px, 9vw, 132px) 0; border-top: 1px solid rgb(214 212 237 / 55%); display: grid; grid-template-columns: minmax(150px, 24fr) minmax(0, 64fr); gap: 7%; }
.story-chapter-side { padding-right: clamp(16px, 3vw, 48px); border-right: 1px solid rgb(214 212 237 / 30%); }
.story-chapter-number { display: block; font-family: 'Funnel Display', sans-serif; font-size: clamp(88px, 14vw, 200px); font-weight: 700; letter-spacing: -.08em; line-height: .8; margin-bottom: 48px; }
.story-chapter-side .story-eyebrow { line-height: 2; }
.story-reading { min-width: 0; max-width: 62ch; }
.story-reading h2 { font-size: clamp(42px, 4.7vw, 72px); line-height: .98; margin-bottom: 30px; text-wrap: balance; }
.story-reading > p { max-width: 62ch; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.65; letter-spacing: -.018em; margin: 0 0 24px; }
.story-reading p.story-draft-note { max-width: 54ch; font-size: 12px; line-height: 1.6; opacity: .8; margin-bottom: 38px; letter-spacing: 0; }
.story-draft-note span { color: #D6D4ED; display: block; font-weight: 600; }
.story-motion-toggle { display: inline-flex; align-items: center; min-height: 44px; margin-top: 44px; background: none; border: 0; border-bottom: 1px solid rgb(214 212 237 / 50%); color: inherit; padding: 10px 0; font: 400 12px/1.4 Inter,sans-serif; cursor: pointer; }
.story-motion-toggle[hidden] { display: none; }
.story-motion-toggle:disabled { cursor: default; opacity: .65; }
.story-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 44px; padding: 8px 0; margin-top: 16px; font: 400 15px/1.5 Inter,sans-serif; color: inherit; background: none; border: 0; border-bottom: 1px solid #BDB414; border-radius: 0; text-decoration: none; cursor: pointer; }
.story-text-link:hover { border-bottom-color: currentColor; }
.story-detail { overflow: hidden; }
.story-detail-window { position: relative; height: clamp(260px, 34vw, 510px); overflow: hidden; background: #1B3A32; }
.story-detail-window [data-story-art] { width: 100%; height: 100%; transform: translateX(var(--story-detail-x, 0%)) scale(var(--story-detail-scale, 1.14)); }
.story-detail-window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-detail h2 { font-size: clamp(38px, 5vw, 76px); line-height: 1; text-align: center; padding: 56px var(--story-gutter) 70px; text-wrap: balance; }
.story-perspective { background: #D6D4ED; color: #0A1628; padding: clamp(72px, 9vw, 132px) var(--story-gutter); overflow: hidden; }
.story-perspective-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 7%; max-width: 1440px; margin: auto; }
.story-perspective .story-eyebrow { margin-bottom: 30px; font-size: 11px; line-height: 1.7; letter-spacing: .22em; }
.story-perspective-art { min-width: 0; }
.story-perspective-art [data-story-art] { transform: translateY(var(--story-perspective-y, 0px)) rotate(var(--story-perspective-rotate, 0deg)); }
.story-perspective-art img { display: block; width: 100%; height: auto; }
.story-next { padding: clamp(88px, 10vw, 144px) var(--story-gutter) 96px; text-align: center; }
.story-closing-line { width: min(65%, 720px); height: 2px; margin: 0 auto 52px; background: rgb(189 180 20 / 20%); }
.story-closing-line span { display: block; width: 100%; height: 100%; background: #BDB414; transform: scaleX(var(--story-line, 1)); transform-origin: 0 50%; }
.story-next h2 { font-size: clamp(64px, 9.7vw, 148px); line-height: .87; margin: 24px auto 32px; }
.story-next > p:not(.story-eyebrow) { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; }
.story-next-links { display: flex; align-items: center; justify-content: center; gap: clamp(48px, 8vw, 120px); margin-top: 34px; }
.story-next .footer-email { color: #D6D4ED; background: none; border-radius: 0; }
.story-footer { padding: 0 var(--story-gutter); background: #0A1628; color: #D6D4ED; }
.story-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.story-footer-top { display: flex; justify-content: space-between; align-items: end; gap: 32px; padding: 32px 0; }
.story-footer-top a { text-decoration: none; font-size: 14px; }
.story-footer-top a:has(.link-icon) { gap: 8px; }
.story-footer .story-footer-name { flex-direction: column; align-items: flex-start; justify-content: center; font-size: 16px !important; }
.story-footer-name span { display: block; margin-top: 6px; font-size: 12px; opacity: .7; }
.story-footer-top p { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; line-height: 1.8; text-align: right; }
.story-footer-bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgb(214 212 237 / 22%); padding: 22px 0; font-size: 11px; color: rgb(214 212 237 / 85%); }
.story-footer-bottom > div { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.story-footer-bottom button { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.story-footer-bottom button[hidden] { display: none; }
.story-footer-bottom a { text-decoration: none; }

@media (min-width:992px) and (min-height:700px) {
 [data-story-motion="on"][data-story-mode="cinematic"] .story-opening { height: 190svh; min-height: 0; }
 [data-story-motion="on"][data-story-mode="cinematic"] .story-opening-stage { position: sticky; top: 0; height: 100svh; }
 [data-story-motion="on"][data-story-mode="cinematic"] .story-opening-cue { top: calc(100svh - 76px); bottom: auto; }
}
@media (min-width:1800px) {
 .story-chapter { max-width: 1624px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
}
@media (max-width:991px) {
 .story-page .menu-button { display: flex; }
 .story-page .navbar .nav-menu.w-nav-menu { position: absolute; top: 64px; left: 0; right: 0; width: 100%; margin: 0; background: #0A1628; padding: 20px var(--story-gutter) 28px; border: 0; border-bottom: 1px solid rgb(214 212 237 / 25%); border-radius: 0; box-shadow: none; }
 html.nav-enhanced .story-page .navbar .nav-menu:not([data-nav-menu-open]) { display: none; }
 html.nav-enhanced .story-page .navbar .nav-menu[data-nav-menu-open] { display: block; }
 .story-page .nav-menu-area { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
 .story-page .navbar .nav-menu .nav-link { text-align: left; width: 100%; justify-content: flex-start; font-size: 17px; }
 .story-opening { min-height: 700px; height: 100svh; }
 .story-opening-copy { padding-top: 140px; }
 .story-opening h1 { font-size: clamp(80px, 12vw, 116px); }
 .story-sculpture-position { width: min(26vw, 215px); bottom: 10%; }
 .story-rail { display: none; }
 .story-chapter { grid-template-columns: 150px minmax(0, 1fr); gap: 40px; }
 .story-perspective-inner { gap: 32px; }
 .story-reading h2 { font-size: 48px; }
}
@media (max-width:599px) {
 body.story-page { --story-gutter: 24px; }
 .story-opening { min-height: 720px; height: 100svh; }
 .story-opening-copy { padding-top: 132px; }
 .story-opening-copy .story-eyebrow { max-width: 25ch; margin: auto; font-size: 10px; }
 .story-opening h1 { font-size: clamp(66px, 17.4vw, 99px); margin-top: 24px; line-height: .91; letter-spacing: -.055em; }
 .story-opening-dek { max-width: 25ch; margin: auto; font-size: 15px; }
 .story-backdrop img { object-position: 50% 70%; }
 .story-wing { display: none; }
 .story-sculpture-position { width: 42vw; max-width: 196px; bottom: 14%; }
 .story-opening-cue { bottom: 28px; }
 .story-opening-cue > span { max-width: 12ch; text-align: right; line-height: 1.6; font-size: 10px; }
 .story-chapter { display: block; padding: 60px 0; }
 .story-chapter-side { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding: 0; margin-bottom: 46px; border: 0; }
 .story-chapter-number { font-size: 86px; margin: 0; }
 .story-chapter-side .story-eyebrow { font-size: 9px; letter-spacing: .16em; }
 .story-motion-toggle { width: 100%; margin-top: 0; text-align: left; }
 .story-reading h2 { font-size: clamp(40px, 11.5vw, 60px); margin-bottom: 24px; }
 .story-reading > p { font-size: 18px; line-height: 1.65; }
 .story-reading p.story-draft-note { font-size: 12px; }
 .story-detail-window { height: 280px; }
 .story-detail h2 { padding-top: 40px; padding-bottom: 48px; font-size: clamp(34px, 9vw, 48px); }
 .story-perspective { padding-top: 60px; padding-bottom: 40px; }
 .story-perspective-inner { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
 .story-perspective-art { max-width: 370px; width: 100%; align-self: center; }
 .story-next { padding-top: 72px; padding-bottom: 70px; }
 .story-closing-line { width: 100%; margin-bottom: 38px; }
 .story-next h2 { font-size: clamp(60px, 16.5vw, 88px); }
 .story-next-links { gap: 32px; flex-wrap: wrap; }
 .story-next .story-text-link { font-size: 14px; gap: 20px; }
 .story-footer-top { flex-wrap: wrap; align-items: start; }
 .story-footer-top p { display: none; }
 .story-footer-bottom { display: block; font-size: 11px; }
 .story-footer-bottom > div { margin-top: 14px; gap: 16px; }
}
@media (max-height:699px) and (min-width:600px) {
 .story-opening { min-height: 740px; height: auto; }
}
@media (prefers-reduced-motion:reduce) {
 .story-page *, .story-page *::before, .story-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Enlarged type gets its own document space; the camera never clips text. */
[data-story-reflow] .story-opening { display: flex; flex-direction: column; height: auto; min-height: 0; }
[data-story-reflow] .story-opening-copy { position: relative; order: -1; padding-top: 120px; padding-bottom: 32px; pointer-events: auto; }
[data-story-reflow] .story-opening-stage { position: relative; inset: auto; height: 600px; min-height: 600px; width: 100%; }
[data-story-reflow] .story-opening-cue { position: relative; inset: auto; padding: 24px var(--story-gutter); flex-wrap: wrap; }
