:root { --story-ink:var(--blue-ink); --story-soft:var(--blue-muted); --story-moss:var(--blue-cobalt); --story-line:var(--blue-rule); --story-paper:var(--blue-paper); --chapter-rail-width:clamp(220px,15vw,264px); --story-gutter:clamp(32px,3.5vw,64px); }
html { scroll-behavior:smooth; }
body.story-home { background:var(--blue-paper); color:var(--blue-ink); }
body.story-home .story-page { width:calc(100% - var(--chapter-rail-width)); max-width:none; margin:0 0 0 var(--chapter-rail-width); padding:0!important; }
body.story-home footer.site { max-width:none; margin:0 0 0 var(--chapter-rail-width); padding:34px var(--story-gutter) 45px; background:var(--blue-paper); }
.story-page section,.story-page article[id],.story-page [id$="-title"] { scroll-margin-top:24px; }
html.anchor-settling { scroll-behavior:auto!important; }
.chapter-rail { position:fixed; z-index:30; inset:0 auto 0 0; width:var(--chapter-rail-width); box-sizing:border-box; display:flex; flex-direction:column; padding:32px 20px 26px; overflow-y:auto; background:var(--blue-paper); border-right:1px solid var(--blue-rule); color:var(--blue-ink); font:500 16px/1.35 var(--sans); }
.chapter-rail a,.chapter-mobile-header a { text-decoration:none; border:0; color:var(--blue-ink); }
.rail-brand { display:block; padding:0 8px; font-size:21px; font-weight:760; line-height:1.2; letter-spacing:-.025em; }
.rail-brand span { display:block; margin-top:9px; color:var(--blue-muted); font-size:13px; font-weight:500; line-height:1.45; letter-spacing:0; }
.chapter-list { display:grid; gap:2px; list-style:none; margin:auto 0; padding:0; }
.chapter-list a { display:grid; grid-template-columns:24px 1fr; gap:7px; align-items:baseline; min-height:48px; padding:12px 8px; border-left:3px solid transparent; line-height:1.3; }
.chapter-list a:hover,.chapter-list a[aria-current="location"] { border-left-color:var(--blue-cobalt); background:var(--blue-ice); color:var(--blue-ink); }
.chapter-list a[aria-current="location"] { font-weight:750; }
.chapter-number { color:var(--blue-cobalt); font-size:12px; font-weight:750; }
.rail-foot { display:grid; gap:17px; padding:0 8px; font-size:14px; }
.rail-progress { display:block; width:100%; height:3px; background:var(--blue-rule); }
.rail-progress span { display:block; width:0; height:100%; background:var(--blue-cobalt); }
.rail-foot a { font-weight:650; }
.chapter-mobile-header { display:none; }
.story-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,3.5vw,64px); min-height:100svh; padding:58px max(var(--story-gutter),calc((100% - 1400px)/2)) 64px; border:0; color:#fff; background:var(--blue-navy); }
.story-hero-copy { align-self:center; }
.story-hero h1,body.story-home .story-hero h1 { max-width:22ch; font-size:clamp(40px,3.2vw,56px); line-height:1.12; letter-spacing:-.04em; color:#fff; text-wrap:pretty; }
.story-hero h1 em { display:block; color:var(--blue-pale); }
.story-hero .story-eyebrow { color:var(--blue-pale); }
.story-hero .story-eyebrow span { color:var(--blue-pale); }
.story-lead { max-width:46ch; margin-top:26px; color:#e8f0ff!important; font-size:clamp(18px,1.25vw,20px); line-height:1.6; }
.story-hero-actions { margin-top:30px; }
.story-button { min-height:48px; background:var(--blue-cobalt); border-color:var(--blue-cobalt)!important; color:#fff!important; }
.story-button:hover { background:#396de9; color:#fff!important; }
.story-text-link { color:#fff!important; border-bottom-color:var(--blue-pale)!important; }
.story-hero-index { margin-top:38px; color:var(--blue-pale)!important; }
.story-hero-index span:first-child { color:#fff; }
.story-line { background:var(--blue-pale); }
.story-hero-visual { align-self:center; justify-self:end; display:flex; flex-direction:column; gap:18px; width:100%; max-width:600px; min-height:0; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; }
.story-hero-visual:before { display:none; }
.story-visual-label,.story-visual-caption { position:static; max-width:none; color:var(--blue-pale)!important; font-size:11px; }
.story-hero-visual figure { position:relative; inset:auto; width:100%; height:auto; border:1px solid #60718e; border-radius:9px; box-shadow:0 18px 40px #071c39a6; }
.story-hero-peeku { margin:0; }
.story-peeku-crop { height:auto; aspect-ratio:1.6; }
.story-peeku-crop img { display:block; width:100%; max-width:100%; height:100%; margin:0; object-fit:contain; }
.story-hero-fuel { align-self:stretch; max-width:none; margin:0!important; }
.story-fuel-crop { height:auto; aspect-ratio:2.1; }
.story-fuel-crop img { display:block; width:100%; max-width:100%; height:100%; margin:0; object-fit:cover; object-position:center 43%; }
.story-hero-visual figcaption { padding:12px 16px; text-transform:none; letter-spacing:0; }
.story-hero-visual figcaption strong { color:var(--blue-ink); }
.story-hero-visual figcaption span { display:block; color:var(--blue-muted); font:500 13px/1.4 var(--sans); }
.story-visual-caption { margin:0; }
.story-section { padding:100px max(var(--story-gutter),calc((100% - 1400px)/2)); background:var(--blue-paper); border-top:1px solid var(--blue-rule); }
.story-section-head { margin-bottom:52px; }
.story-section-head h2 { max-width:18ch; font-size:clamp(36px,3.6vw,54px); color:var(--blue-ink); }
.story-section-head > p:last-child { color:var(--blue-muted); font-size:clamp(17px,1.45vw,20px); }
.story-eyebrow,.story-kicker,.story-number { color:var(--blue-cobalt); font-size:13px; }
.story-case { gap:clamp(30px,4vw,60px); }
.story-case h3 { color:var(--blue-ink); }
.story-case-copy > p:not(.story-case-intro,.story-kicker),.story-ideas-grid p,.story-language p { color:var(--blue-muted); font-size:17px; }
.story-case-detail { background:var(--blue-ice); border-left-color:var(--blue-cobalt); }
.story-case-detail span,.story-case-media figcaption { color:var(--blue-muted); }
.story-case-media,.story-fuel-media { background:var(--blue-ice); border-color:var(--blue-rule); }
.story-case-crop { aspect-ratio:1.6; overflow:hidden; border-radius:6px; background:#fff; }
.story-case-media .story-case-crop img { display:block; width:100%; max-width:100%; height:100%; margin:0; border-radius:0; object-fit:contain; }
.story-fuel-media .story-case-crop { aspect-ratio:1.45; }
.story-fuel-media .story-case-crop img { object-fit:cover; object-position:center 43%; }
.story-case-media figcaption { text-transform:none; letter-spacing:0; font:400 14px/1.5 var(--sans); }
.story-journey { margin:0; padding:100px max(var(--story-gutter),calc((100% - 1400px)/2)); background:var(--blue-navy); color:#fff; }
.story-journey .story-section-head h2,.story-journey h3 { color:#fff; }
.story-journey .story-section-head p,.story-journey .story-prose p,.story-journey-strip p { color:#d8e5fb!important; }
.story-journey .story-eyebrow,.story-journey-strip span { color:var(--blue-pale); }
.story-journey-editorial { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px 7%; align-items:start; }
body.story-home .story-journey-editorial p,body.story-home .story-workspace-note p { color:#e1eaf9; }
.story-journey-editorial p { margin:0; max-width:62ch; font-size:18px; line-height:1.65; }
.story-journey-editorial .story-journey-opening { max-width:33ch; font-size:clamp(24px,2.5vw,36px); line-height:1.35; letter-spacing:-.025em; }
.story-journey-editorial .story-journey-turn { padding:7px 0 7px 25px; border-left:2px solid var(--blue-pale); }
.story-journey-turn span { display:block; margin:0 0 20px; color:var(--blue-pale); font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.story-workspace-note { display:grid; grid-template-columns:minmax(160px,.6fr) minmax(0,1.4fr); gap:10px 7%; align-items:start; margin-top:58px; padding:32px 0 0; border-top:1px solid #6c83a5; scroll-margin-top:24px; }
.story-workspace-note .story-kicker { grid-row:1/3; margin:4px 0 0; color:var(--blue-pale); }
body.story-home .story-workspace-note h3 { margin:0; max-width:18ch; color:#fff; font-size:clamp(27px,2.5vw,37px); line-height:1.18; letter-spacing:-.035em; }
.story-workspace-note p:last-child { grid-column:2; max-width:57ch; margin:0; font-size:17px; line-height:1.6; }
.story-work .story-section-head,.story-writing .story-section-head,.story-backstage .story-section-head { display:block; margin-bottom:40px; }
.story-context-map { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); grid-template-areas:'model task' 'records task'; gap:14px; }
.story-context-map>div { min-width:0; padding:29px 32px; border:1px solid var(--blue-rule); border-radius:8px; }
.story-context-map span { display:block; color:var(--blue-cobalt); font-size:12px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
.story-context-map h3 { margin:12px 0 9px; font-size:clamp(23px,2vw,30px); letter-spacing:-.035em; line-height:1.15; }
.story-context-map p { margin:0; max-width:42ch; color:var(--blue-muted); font-size:16px; line-height:1.55; }
.story-context-model { grid-area:model; background:#fff; }
.story-context-records { grid-area:records; background:var(--blue-ice); }
.story-context-task { grid-area:task; display:flex; flex-direction:column; justify-content:center; background:var(--blue-navy); }
body.story-home .story-context-task h3 { color:#fff; font-size:clamp(30px,3vw,44px); }
body.story-home .story-context-task p { color:#e1eaf9; font-size:18px; }
.story-context-task span { color:var(--blue-pale); }
.story-context-after { max-width:76ch; margin:34px 0 17px; color:var(--blue-muted); font-size:18px; line-height:1.6; }
.story-context-links { display:flex; flex-wrap:wrap; gap:15px 24px; margin:0; font-size:15px; font-weight:700; }
.story-legacy-anchor { height:0; scroll-margin-top:24px; }
.story-journey-strip { border-color:#6c83a5; }
.story-journey-strip > div+div { border-color:#6c83a5; }
.story-language-example,.story-workspace-example,.story-takeaway { background:var(--blue-ice); }
.story-language-example span,.story-workspace-example > span,.story-backstage-grid span,.story-takeaway-example > span { color:var(--blue-cobalt); }
.story-output { border-color:var(--blue-rule); }
.story-output-good { border-color:var(--blue-cobalt); }
.story-output small,.story-output em { color:var(--blue-muted); }
.story-workspace-steps span { color:var(--blue-cobalt); }
.story-backstage { background:#fff; }
.story-backstage-grid { margin-bottom:45px; }
.story-backstage-compare { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:36px 0 0; }
.story-backstage-compare figure { margin:0; }
.story-backstage-compare img { display:block; width:100%; height:auto; border:1px solid var(--blue-rule); border-radius:5px; }
.story-backstage-compare figcaption { margin-top:10px; color:var(--blue-muted); font-size:14px; line-height:1.4; }
.story-backstage-note { max-width:70ch; margin:32px 0 0; color:var(--blue-muted); font-size:18px; font-weight:400; line-height:1.6; }
.story-takeaway { margin:0; padding:80px clamp(30px,5vw,82px); }
.story-takeaway h2,.story-about h2 { color:var(--blue-ink); }
.story-takeaway-example { border-color:var(--blue-rule); }
.story-takeaway-question { color:var(--blue-cobalt)!important; }
.story-writing-list a:hover h3 { color:var(--blue-cobalt); }
.story-writing-list span { color:var(--blue-cobalt); }
.story-about { padding-bottom:100px; }
@media(max-width:1199px) {
  body.story-home .story-page { width:100%; margin:0; }
  body.story-home footer.site { margin:0; }
  .chapter-rail { display:none; }
  .chapter-mobile-header { position:sticky; z-index:40; top:0; display:flex; align-items:center; gap:16px; min-height:62px; padding:8px clamp(20px,3vw,38px); background:#f7f9fdf5; border-bottom:1px solid var(--blue-rule); backdrop-filter:blur(12px); font:600 14px/1.2 var(--sans); }
  .chapter-mobile-header .mobile-brand { margin-right:auto; font-size:16px; font-weight:750; white-space:nowrap; }
  .mobile-current { color:var(--blue-muted); font-size:13px; text-align:right; }
  #mobile-chapters { position:relative; }
  #mobile-chapters summary { display:flex; align-items:center; min-height:44px; padding:8px 11px; border:1px solid var(--blue-rule); border-radius:4px; cursor:pointer; list-style:none; color:var(--blue-ink); }
  #mobile-chapters summary::-webkit-details-marker { display:none; }
  #mobile-chapters summary:after { content:"⌄"; margin-left:8px; color:var(--blue-cobalt); }
  #mobile-chapters[open] nav { position:absolute; top:calc(100% + 8px); right:0; width:min(300px,calc(100vw - 36px)); max-height:calc(100dvh - 85px); overflow:auto; background:#fff; border:1px solid var(--blue-rule); box-shadow:0 14px 32px #10233f25; }
  #mobile-chapters ol { list-style:none; margin:0; padding:8px; }
  #mobile-chapters li a { display:block; min-height:44px; padding:12px 10px; }
  #mobile-chapters li a span { margin-right:9px; color:var(--blue-cobalt); font-size:11px; }
  #mobile-chapters a[aria-current="location"] { background:var(--blue-ice); font-weight:750; }
  .story-page section,.story-page article[id],.story-page [id$="-title"] { scroll-margin-top:73px; }
  .story-hero { min-height:calc(100svh - 62px); }
}
@media(max-width:800px) {
  .story-hero { grid-template-columns:1fr; min-height:0; gap:26px; padding:60px 32px 62px; }
  body.story-home .story-hero h1 { max-width:22ch; font-size:clamp(40px,6.5vw,52px); }
  .story-hero-visual { width:100%; }
  .story-section,.story-journey { padding:74px 32px; }
  .story-section-head h2 { font-size:clamp(34px,6vw,47px); }
  .story-takeaway { padding:72px 32px; }
  .story-backstage-compare { gap:14px; }
}
@media(max-width:580px) {
  .chapter-mobile-header { gap:8px; padding-inline:20px; }
  .mobile-current { max-width:110px; font-size:11px; }
  .story-hero { padding:42px 22px 55px; gap:22px; }
  body.story-home .story-hero h1 { max-width:22ch; font-size:clamp(32px,8.5vw,42px); }
  .story-lead { margin-top:20px; font-size:17px; }
  .story-hero-actions { margin-top:22px; gap:13px; }
  .story-hero-visual { gap:9px; }
  .story-hero-fuel { max-width:none; margin:0!important; }
  .story-hero-visual figcaption { padding:10px 12px; }
  .story-hero-visual figcaption span { display:block; font-size:11px; }
  .story-visual-label,.story-visual-caption { font-size:10px; }
  .story-section,.story-journey { padding:64px 22px; }
  .story-section-head h2 { font-size:clamp(31px,8vw,39px); }
  .story-section-head > p:last-child { font-size:17px; }
  .story-journey-strip > div { border-color:#6c83a5!important; }
  .story-backstage-compare { grid-template-columns:1fr; }
  .story-takeaway { padding:66px 22px; }
  body.story-home footer.site { padding-inline:22px; }
  .story-context-map { grid-template-columns:1fr; grid-template-areas:'model' 'records' 'task'; }
  .story-context-map>div { padding:22px; }
  .story-journey-editorial,.story-workspace-note { grid-template-columns:1fr; gap:20px; }
  .story-journey-editorial .story-journey-opening { max-width:35ch; }
  .story-workspace-note .story-kicker,.story-workspace-note p:last-child { grid-column:1; grid-row:auto; }
  .story-workspace-note { scroll-margin-top:73px; }
  .story-legacy-anchor { scroll-margin-top:73px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media print { .chapter-rail,.chapter-mobile-header { display:none!important; } body.story-home .story-page { width:100%; margin:0; } .story-hero,.story-journey { color:var(--blue-ink)!important; background:#fff!important; } }