/* Five chapters, paced by the reader. */
.story-document { --story-header: 88px; scroll-padding-top: var(--story-header); scroll-snap-type: y proximity; }
.story-home #site-header { height: var(--story-header); }
.story-home .site-header { position: fixed; inset: 0 0 auto; height: var(--story-header); background: var(--bg); }
.story-skip { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; padding: 10px 0 10px 12px; }
.story-skip:hover { color: var(--green); }
.story-skip span { font-size: 18px; }
.story-opening { position: relative; }
.story-panel { position: relative; isolation: isolate; min-height: calc(100svh - var(--story-header)); scroll-snap-align: start; overflow: clip; --scene-shift: 0px; }
.story-layout { width: min(1280px, calc(100% - 144px)); min-height: inherit; margin-inline: auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; padding-block: 60px; }
.story-copy { position: relative; z-index: 2; transform: translateY(12px); transition: transform .85s var(--ease); }
.story-panel.is-current .story-copy { transform: translateY(0); }
.story-heading { font-family: var(--body); font-size: clamp(54px, 6.8vw, 96px); font-weight: 650; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.story-accent { color: oklch(.43 .08 170); }
.story-description { max-width: 37ch; margin-top: 28px; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.85; color: var(--muted); }
.story-description strong { font-weight: 650; color: var(--ink); }
.story-greeting { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; font-size: 12px; color: var(--primary); }
.story-greeting span { font-size: 19px; }
.story-text-link { display: inline-flex; align-items: center; gap: 30px; min-height: 44px; margin-top: 24px; font-size: 13px; font-weight: 500; }
.story-text-link span { font-size: 22px; transition: transform .25s var(--ease); }
.story-text-link:hover span { transform: translateY(3px); }
.story-text-link:hover { color: var(--green); }
.story-art-credit { position: absolute; z-index: 2; bottom: 22px; left: 5.5%; font-size: 10px; color: var(--muted); }

/* An invitation from Ali. */
.story-first { background: oklch(.94 .033 210); }
.story-sky { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; opacity: .4; mask-image: linear-gradient(to bottom, black 0%, transparent 68%); pointer-events: none; }
.ali-stage { position: relative; align-self: stretch; min-width: 0; display: flex; align-items: center; justify-content: center; }
.ali-stage-scene { width: 100%; transform: translate3d(0,var(--scene-shift),0); }
.ali-portrait { width: 100%; height: clamp(440px, 67svh, 730px); object-fit: contain; animation: ali-breathe 6s ease-in-out infinite; }
.ali-signature { position: absolute; bottom: 0; left: 15%; color: var(--muted); font-size: 11px; display: flex; flex-direction: column; line-height: 1.5; }
.ali-signature span { color: var(--primary); font-family: var(--display); font-size: 35px; font-weight: 500; }

/* Real-life steps, a window into the town. */
.story-action { background: oklch(.945 .035 155); }
.story-action .story-heading { font-size: clamp(52px, 6.25vw, 88px); }
.story-action .story-layout { gap: 64px; }
.story-small-note { margin-top: 24px; color: var(--primary); font-size: 12px; line-height: 1.9; }
.town-window { margin: 0; background: var(--surface); padding: 10px; transform: translate3d(0,var(--scene-shift),0) rotate(-3deg); box-shadow: 8px 10px 0 oklch(.77 .055 155); transition: rotate 1s var(--ease); }
.story-action.is-current .town-window { rotate: 1deg; }
.town-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); padding: 7px 4px 14px; font-size: 9px; }
.window-dots { display: inline-flex; gap: 4px; }
.window-dots i { height: 4px; width: 4px; background: oklch(.6 .08 155); }
.town-window > img { aspect-ratio: 1.45; width: 100%; height: auto; object-fit: cover; object-position: 58% center; }
.town-window figcaption { padding: 15px 5px 6px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--primary); line-height: 1.6; }
.screenshot-note { font-size: 9px; color: var(--muted); }

/* The quiet part of the journey. */
.story-together { background: oklch(.23 .04 245); color: var(--surface); }
.story-scene { position: absolute; z-index: -2; inset: -22px 0; height: calc(100% + 44px); width: 100%; object-fit: cover; transform: translate3d(0,var(--scene-shift),0); }
.sunset-scene { object-position: 50% 58%; }
.sunset-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,oklch(.17 .035 225 / .9),oklch(.17 .035 225 / .42) 65%,oklch(.17 .035 225 / .14)); }
.story-together .story-layout { grid-template-columns: 1fr; align-items: start; padding-top: clamp(85px, 13svh, 145px); }
.story-together .story-copy { max-width: 900px; }
.story-together .story-heading span { color: oklch(.89 .1 82); }
.story-together .story-description { max-width: 50ch; color: oklch(.95 .015 82); }
.story-together .story-text-link:hover { color: oklch(.89 .1 82); }
.story-together .story-art-credit { color: oklch(.9 .02 82); }

/* A whole little world, and the way into the rest of the site. */
.story-final { display: grid; place-items: start center; background: oklch(.87 .055 215); text-align: center; padding: 46px 60px 310px; min-height: max(760px, calc(100svh - var(--story-header))); }
.final-scene { object-position: 55% 55%; }
.final-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom,oklch(.97 .015 210 / .24),transparent 60%,oklch(.2 .05 165 / .14)); }
.story-final .story-copy { max-width: 950px; }
.story-final-name { font-family: var(--display); font-weight: 500; font-size: 24px; margin-bottom: 14px; }
.story-final .story-heading { font-size: clamp(54px, 6.4vw, 88px); line-height: 1.08; }
.story-final .story-description { max-width: none; margin-top: 20px; color: var(--ink); font-size: 16px; }
.story-explore { margin-top: 25px; }
.story-principle { margin: 18px auto 0; max-width: 42ch; width: fit-content; padding: 4px 10px; background: oklch(.98 .008 205 / .95); color: var(--primary); font-size: 11px; line-height: 1.8; }
.story-final .story-art-credit { color: var(--surface); background: oklch(.22 .04 190 / .88); padding: 3px 7px; }

/* Chapter links stay optional, and never intercept scrolling. */
.story-progress { position: fixed; z-index: 10; right: 17px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--primary); }
.story-progress-label { writing-mode: vertical-rl; font-size: 8px; letter-spacing: .12em; margin-bottom: 13px; }
.story-progress a { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 38px; position: relative; font-family: var(--display); font-size: 13px; opacity: .6; }
.story-progress a::before { content: ''; height: 2px; width: 5px; position: absolute; left: 0; background: currentColor; transition: width .3s var(--ease); }
.story-progress a[aria-current=step] { opacity: 1; font-weight: 700; }
.story-progress a[aria-current=step]::before { width: 13px; }
.story-progress a:hover { opacity: 1; }
.story-progress-current { font-size: 8px; margin-top: 10px; white-space: nowrap; }
body[data-story-active=story-together] .story-progress { color: oklch(.96 .03 82); }
body[data-story-active=story-town] .story-progress { background: oklch(.98 .008 205 / .95); padding: 10px 4px; }
.story-home .welcome { scroll-snap-align: start; }
.story-home .welcome h2 { font-size: 34px; line-height: 1.4; }
@keyframes ali-breathe { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-6px) rotate(.4deg); } }

@media(min-width:1600px) { .story-layout { gap: 80px; } .ali-portrait { height: min(75svh,790px); } .story-final { padding-top: 65px; } }
@media(max-width:1050px) {
  .story-layout { width: calc(100% - 110px); gap: 20px; }
  .story-heading { font-size: clamp(54px, 7vw, 76px); }
  .story-action .story-layout { gap: 30px; }
  .story-action .story-heading { font-size: 62px; }
  .story-description { font-size: 15px; }
  .town-window-bar { font-size: 8px; }
  .ali-portrait { height: 540px; }
  .ali-signature { left: 5%; }
}
@media(max-width:760px) {
  .story-document { --story-header: 76px; scroll-snap-type: none; }
  .story-layout { width: calc(100% - 64px); grid-template-columns: 1fr; gap: 24px; padding-block: 40px 65px; }
  .story-first .story-layout { grid-template-columns: 1fr; gap: 0; }
  .story-heading { font-size: clamp(46px, 8.7vw, 62px); line-height: 1.06; letter-spacing: -.035em; }
  .story-greeting { margin-bottom: 20px; font-size: 10px; }
  .story-greeting span { font-size: 15px; }
  .story-description { font-size: 14px; margin-top: 20px; max-width: 36ch; line-height: 1.85; }
  .story-text-link { font-size: 12px; margin-top: 15px; min-height: 36px; }
  .ali-stage { height: 340px; margin-top: -12px; }
  .ali-stage-scene { height: 100%; }
  .ali-portrait { width: 100%; height: 100%; }
  .ali-signature { bottom: 15px; left: 8px; font-size: 9px; }
  .ali-signature span { font-size: 26px; }
  .story-art-credit { left: 24px; bottom: 17px; font-size: 9px; }
  .story-action .story-heading { font-size: clamp(45px, 8.7vw, 62px); }
  .story-action .story-layout { padding-top: 50px; gap: 35px; }
  .story-small-note { display: none; }
  .town-window { width: min(100%,500px); justify-self: center; padding: 8px; box-shadow: 5px 7px 0 oklch(.77 .055 155); margin-bottom: 12px; }
  .town-window > img { aspect-ratio: 1.7; }
  .town-window figcaption { font-size: 11px; padding: 10px 4px 3px; gap: 3px; }
  .town-window-bar { padding-block: 4px 10px; }
  .story-together .story-layout { padding-top: 70px; }
  .story-together .story-heading { font-size: clamp(48px, 9vw, 68px); }
  .sunset-scene { object-position: 52% center; }
  .sunset-shade { background: linear-gradient(180deg,oklch(.17 .035 225 / .8),oklch(.17 .035 225 / .25) 70%); }
  .story-final { min-height: calc(100svh - var(--story-header)); padding: 48px 24px 310px; }
  .story-final .story-heading { font-size: clamp(45px, 8.8vw, 64px); }
  .story-final-name { font-size: 23px; }
  .story-final .story-description { font-size: 14px; }
  .story-principle { max-width: 33ch; font-size: 10px; }
  .final-scene { object-position: 60% center; }
  .story-progress { inset: auto 18px 15px auto; flex-direction: row; gap: 1px; transform: none; padding: 3px 5px; background: oklch(.98 .008 205 / .96); color: var(--primary); }
  .story-progress a { width: 44px; min-height: 44px; font-size: 12px; }
  .story-progress a::before { left: calc(50% - 2px); bottom: 1px; width: 4px; }
  .story-progress a[aria-current=step]::before { left: calc(50% - 6px); width: 12px; }
  .story-progress-label, .story-progress-current { display: none; }
  body[data-story-active=story-together] .story-progress { color: var(--primary); }
  body[data-story-active=story-town] .story-progress { padding: 3px 5px; }
  .story-home .welcome h2 { font-size: 29px; }
}
@media(max-width:640px) {
  .story-document { --story-header: 72px; }
  .story-layout { width: calc(100% - 44px); }
  .story-heading { font-size: clamp(43px, 11vw, 59px); }
  .story-first .story-layout { padding-top: 35px; }
  .story-greeting { font-size: 10px; margin-bottom: 18px; }
  .story-description { font-size: 13px; margin-top: 18px; }
  .story-text-link { margin-top: 12px; }
  .ali-stage { height: 310px; margin-top: -8px; }
  .story-action .story-heading { font-size: clamp(43px, 10.7vw, 57px); }
  .story-action .story-layout { padding-top: 40px; }
  .story-together .story-heading { font-size: clamp(46px, 11.5vw, 60px); }
  .story-final .story-heading { font-size: clamp(43px, 11vw, 58px); }
  .story-explore { margin-top: 22px; font-size: 12px; }
  .story-skip { font-size: 11px; gap: 7px; padding-left: 0; }
  .story-skip span { font-size: 15px; }
  .desktop-break { display: none; }
}
@media(min-width:641px) and (max-width:760px) {
  .story-first .story-layout { grid-template-columns: 1.35fr 1fr; gap: 12px; }
  .story-first .story-heading { font-size: clamp(43px,6.5vw,49px); }
  .story-first .ali-stage { min-height: 440px; height: auto; margin-top: 0; }
  .story-first .ali-portrait { height: 440px; }
  .story-first .ali-signature { left: 0; bottom: 0; }
  .story-action .story-layout { grid-template-columns: 1.2fr 1fr; gap: 25px; }
  .story-action .story-heading { font-size: 46px; }
  .story-action .town-window-bar { font-size: 7px; }
  .story-action .town-window > img { aspect-ratio: 1.2; }
  .story-action .town-window figcaption { font-size: 10px; }
}
@media(max-width:370px) {
  .story-art-credit { bottom: 70px; }
  .story-home .site-header { padding-inline: 16px; gap: 10px; }
  .story-home .brand > span { font-size: 18px; }
  .story-skip span { display: none; }
}
@media(max-height:700px) and (min-width:761px) { .story-layout { padding-block: 42px; } .story-heading { font-size: clamp(54px,6.1vw,80px); } .story-description { margin-top: 20px; } .ali-portrait { height: 460px; } .story-final { min-height: 700px; padding-top: 34px; } }
@media(prefers-reduced-motion:reduce) {
  .story-document { scroll-snap-type: none; }
  .story-copy,.ali-stage-scene,.ali-portrait,.story-scene,.town-window { transform: none !important; rotate: none !important; animation: none !important; transition: none !important; }
}

/* The chosen brand headline is the first-screen hook. */
.story-brand { min-height: calc(100svh - var(--story-header)); padding: 36px 60px 150px; background: oklch(.87 .075 220); }
.story-brand .final-scene { inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center bottom; transform: none; }
.story-brand .final-shade { background: linear-gradient(to bottom,oklch(.97 .015 210 / .12),transparent 55%); }
.story-brand .story-final-name { font-size: clamp(28px,3.3vw,44px); line-height: 1.1; margin-bottom: 22px; }
.story-brand .story-heading { font-size: clamp(54px,7.5vw,96px); line-height: 1.05; font-weight: 700; }
.story-together .story-close-button { background: var(--accent); color: var(--ink); box-shadow: 4px 4px 0 oklch(.15 .03 225); }
.story-together .story-closing-principle { background: transparent; color: oklch(.94 .02 82); margin: 18px 0 0; padding: 0; text-align: left; }
@media(max-width:760px) {
  .story-brand { padding: 48px 24px 250px; place-items: center; }
  .story-brand .story-heading { font-size: clamp(38px,11vw,64px); }
  .story-brand .story-final-name { font-size: 28px; margin-bottom: 20px; }
}

/* The standalone hook follows the panorama, before Ali's invitation. */
.story-hook { display: grid; place-items: center; padding: 64px 72px; background: var(--ink); color: var(--surface); }
.hook-copy { width: min(100%,1100px); text-align: center; }
.hook-title { margin: 0; font-family: var(--body); font-size: clamp(56px,7.5vw,96px); font-weight: 800; line-height: .98; letter-spacing: -.035em; text-transform: uppercase; }
.hook-title > span { display: block; white-space: nowrap; transform: translateY(8px); transition: transform .65s var(--ease); }
.hook-title > span:nth-child(2) { transition-delay: .07s; }
.hook-title > span:nth-child(3) { transition-delay: .14s; }
.story-hook.is-current .hook-title > span { transform: translateY(0); }
.hook-accent { color: var(--accent); }
.hook-support { max-width: 42ch; margin: 32px auto 0; color: oklch(.9 .02 205); font-size: clamp(16px,1.5vw,20px); line-height: 1.75; }
.story-hook .hook-link { margin-top: 28px; color: var(--accent); }
.story-hook .hook-link:hover { color: var(--surface); }
body[data-story-active=story-hook] .story-progress { color: oklch(.96 .015 205); background: transparent; }
@media(max-width:760px) {
  .story-hook { padding: 48px 24px; }
  .hook-title { font-size: clamp(40px,11.3vw,64px); line-height: 1.02; }
  .hook-support { max-width: 29ch; margin-top: 28px; font-size: 15px; }
  .story-art-credit { bottom: 76px; }
}
@media(prefers-reduced-motion:reduce) { .hook-title > span { transform: none !important; transition: none !important; } }

/* A quieter first screen keeps the panorama, headline and primary invitation. */
.story-home[data-story-active=story-town] .story-progress{visibility:hidden;pointer-events:none}
.story-brand .story-art-credit{display:none}
.story-home .site-header .brand-subtitle{display:none}
.hero-beta-note{margin:16px auto 0;max-width:38ch;width:fit-content;padding:4px 9px;background:oklch(.98 .008 205 / .94);font-size:12px;line-height:1.7;color:var(--primary)}
.hero-beta-cta{margin-top:28px}

@media(max-width:370px) { .hook-title { font-size:38px; } }