.story-page{ --story-accent:#86dcca; background:#0b1014; color:#edf2f4; font-size:1rem; line-height:1.7; }
.story-page .topbar{ background:#0b1014; }
.story-page a:focus-visible{ outline:3px solid var(--story-accent); outline-offset:6px; }
.story-wrap{ width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.story-skip{ position:absolute; left:20px; top:-100px; background:#edf2f4; color:#10171c; padding:12px 20px; z-index:100; }
.story-skip:focus{ top:12px; }
.story-topline{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:#b7c6ce; font-size:.875rem; padding-bottom:36px; border-bottom:1px solid #34414a; }
.story-topline a{ color:var(--story-accent); }
.story-hero{ padding-top:44px; padding-bottom:0; }
.story-name{ color:var(--story-accent); font-size:1.125rem; font-weight:800; letter-spacing:.02em; margin:52px 0 16px; }
.story-hero h1{ max-width:1000px; margin:0; font-size:clamp(2.65rem,6.9vw,5.6rem); line-height:1.04; letter-spacing:-.055em; text-wrap:balance; overflow-wrap:break-word; }
.story-lead{ color:#c9d4d9; max-width:820px; font-size:clamp(1.125rem,2vw,1.4rem); line-height:1.65; margin:32px 0 44px; }
.story-facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid var(--story-accent); border-bottom:1px solid #34414a; }
.story-facts > div{ padding:26px 24px; border-right:1px solid #34414a; }
.story-facts > div:first-child{ padding-left:0; }
.story-facts > div:last-child{ border-right:0; }
.story-facts strong{ display:block; color:var(--story-accent); font-size:clamp(1.55rem,3.3vw,2.8rem); font-weight:750; letter-spacing:-.035em; line-height:1.25; }
.story-facts span{ display:block; color:#c5d0d6; font-size:.9375rem; margin-top:8px; }
.story-section{ padding-top:72px; padding-bottom:64px; border-bottom:1px solid #34414a; }
.story-kicker{ color:var(--story-accent); font-size:.875rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; margin:0 0 14px; }
.story-section h2{ font-size:clamp(1.8rem,3.5vw,2.65rem); line-height:1.16; letter-spacing:-.035em; margin:0 0 26px; text-wrap:balance; }
.story-section p{ color:#c9d4d9; margin-top:0; }
.story-section .story-kicker{ color:var(--story-accent); }
.story-intro{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; }
.story-intro > div:last-child{ padding-top:30px; }
.story-features{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.story-features article{ padding:28px 0; border-top:1px solid #34414a; }
.story-index{ display:block; color:var(--story-accent); font-size:.875rem; font-variant-numeric:tabular-nums; margin-bottom:10px; }
.story-section h3{ font-size:1.25rem; line-height:1.35; margin:0 0 14px; color:#edf2f4; }
.story-features p{ margin-bottom:0; }
.story-flow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding:0; list-style:none; counter-reset:workflow; margin:30px 0 0; }
.story-flow li{ counter-increment:workflow; border-top:3px solid var(--story-accent); background:#141e25; padding:20px; }
.story-flow li::before{ content:counter(workflow,decimal-leading-zero); display:block; color:var(--story-accent); margin-bottom:20px; font-size:.875rem; }
.story-flow p{ margin:0; }
.story-engineering{ display:grid; grid-template-columns:1.1fr .9fr; align-items:start; gap:52px; }
.story-boundary{ padding:28px; background:#19252d; border-left:3px solid var(--story-accent); }
.story-boundary p{ margin-bottom:20px; }
.story-privacy{ color:var(--story-accent); font-size:.875rem; font-weight:700; }
.story-link{ color:var(--story-accent); text-decoration:underline; text-underline-offset:5px; font-weight:750; }
.story-end{ padding-top:60px; padding-bottom:36px; }
.story-signoff{ font-size:clamp(1.7rem,3.2vw,2.6rem); max-width:850px; line-height:1.2; letter-spacing:-.025em; margin:0 0 44px; }
.story-next{ display:flex; justify-content:space-between; flex-wrap:wrap; align-items:end; gap:30px; padding:24px 0; border-top:1px solid #34414a; border-bottom:1px solid #34414a; }
.story-next a{ color:var(--story-accent); font-weight:750; padding:8px 0; }
.story-next span{ display:block; color:#bdcbd2; font-size:.875rem; font-weight:400; }
.story-credit{ color:#aebfc8; font-size:.875rem; margin-top:30px; }
@media(max-width:760px){ .story-intro,.story-engineering{ grid-template-columns:1fr; gap:12px; } .story-intro > div:last-child{ padding-top:0; } .story-flow{ grid-template-columns:repeat(2,minmax(0,1fr)); } .story-section{ padding-block:44px; } .story-name{ margin-top:36px; } }
@media(max-width:480px){ .story-wrap{ width:calc(100% - 32px); } .story-features,.story-flow{ grid-template-columns:1fr; } .story-facts{ grid-template-columns:1fr; } .story-facts > div{ padding:18px 0; border-right:0; border-bottom:1px solid #34414a; } .story-facts > div:last-child{ border-bottom:0; } .story-boundary{ padding:20px; } }