/* storydeck engine styles: layout, components, scroll motion and Present mode.
   Colours and fonts come from theme.css; restyle there, not here. */
html{scroll-behavior:smooth}
body{margin:0}
body.detail-open{overflow:hidden}
[hidden]{display:none !important}
.sd{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:17px;line-height:1.6;overflow-x:hidden}
.sd *{box-sizing:border-box}
.sd a{color:var(--accent)}
.sd.dark .icon-moon,.sd.light .icon-sun{display:none}

/* Layout */
.sd-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.sd-section{padding:96px 0}
.sd-rule{border-top:1px solid var(--line)}
.sd-stack{display:flex;flex-direction:column;gap:18px}
.sd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.sd-grid.wide{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.sd-gap{margin-top:40px}

/* Type */
.sd-eyebrow{margin:0;font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.sd-eyebrow.small{font-size:12px;letter-spacing:.14em}
.sd-eyebrow.accent{color:var(--accent)}
.sd-display{margin:0;font-family:var(--font-display);font-weight:800;line-height:1;text-transform:uppercase;text-wrap:balance}
.sd-h1{font-size:128px;line-height:.9}
.sd-h2{font-size:56px}
.sd-h3{font-size:30px;line-height:1.05}
.sd-lead{margin:0;max-width:760px;font-size:19px;color:var(--text-2);text-wrap:pretty}
.sd-body{margin:0;color:var(--text-3)}
.sd a.sd-link{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.sd-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}

/* Cards, features, chips, buttons */
.sd-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .2s}
.sd-card .sd-body{flex-grow:1}
.sd-card:has(.sd-open):hover{border-color:var(--accent);transform:translateY(-2px)}
.sd-card:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.sd-open{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.sd-open::after{content:"";position:absolute;inset:0;border-radius:6px}
.sd-open:focus-visible{outline:none}
.sd-feature{display:flex;gap:20px;align-items:center;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.sd-feature>svg{flex:none}
.sd-feature>div{display:flex;flex-direction:column;gap:4px}
.sd-chips{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sd-chips li{padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;font-weight:600}
.sd-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid currentColor;border-radius:999px;background:none;color:inherit;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.sd-btn:disabled{opacity:.4;cursor:default}
.sd-btn.primary,.sd a.sd-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Band: an inverted full-width strip, good for headline numbers */
.sd-band{background:var(--band-bg);color:var(--band-text)}
.sd-band .sd-eyebrow{color:var(--band-label)}
.sd-band .sd-lead,.sd-band .sd-body{color:var(--band-text-2)}
.sd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:32px}
.sd-stat{display:flex;flex-direction:column;gap:8px}
.sd-stat-num{font-family:var(--font-display);font-weight:800;font-size:112px;line-height:.85}

/* Rows: a numbered list that can be split across several deck frames */
.sd-rows{display:flex;flex-direction:column;gap:14px}
.sd-row{display:grid;grid-template-columns:56px 240px minmax(0,1fr);gap:24px;align-items:baseline;padding:20px 24px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.sd-row-num{font-family:var(--font-display);font-weight:800;font-size:40px;line-height:1;color:var(--accent)}
.sd-row h3{font-size:26px}

/* Route: a numbered badge with a line that draws itself beside a chapter */
.sd-route{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:40px}
.sd-rail{position:relative}
.sd-badge{width:96px;height:96px;border-radius:50%;border:2px solid var(--accent);background:var(--surface);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:40px;color:var(--accent)}
.sd-rail svg{position:absolute;left:0;top:96px;width:96px;height:calc(100% - 96px);overflow:visible}
.sd-route-body{display:flex;flex-direction:column;gap:32px;padding-top:14px;min-width:0}

/* Figures: give each theme its own image with theme-dark-only / theme-light-only (rule is also inline in index.html) */
.sd.dark .theme-light-only,.sd.light .theme-dark-only{display:none !important}
.sd-figure{margin:0;display:flex;flex-direction:column;gap:14px}
.sd-figure img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.sd-figure figcaption{font-size:14px;color:var(--muted)}

/* Hero: full-bleed image per theme (set in theme.css), text on the right */
.sd-hero{position:relative;min-height:max(780px,min(56vw,100vh));overflow:hidden;background:var(--hero-sky) var(--hero-image) left top/cover no-repeat}
.sd-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,20,0) 30%,rgba(8,12,20,.45) 62%,rgba(8,12,20,.6) 100%)}
.sd-hero-line{position:absolute;inset:0;width:100%;height:100%}
.sd-hero-inner{position:relative;padding-top:88px}
.sd-hero-copy{max-width:560px;margin-left:auto;display:flex;flex-direction:column;gap:22px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.sd-hero .sd-eyebrow{color:var(--hero-ink-2)}
.sd-hero .sd-eyebrow.accent{color:var(--hero-ink-accent)}
.sd-hero .sd-display{color:var(--hero-ink)}
.sd-hero .sd-lead{font-size:20px;line-height:1.55;color:var(--hero-ink-2)}

/* Fixed controls (Present, theme) and the scroll-progress meter */
.sd-controls{position:fixed;top:20px;right:20px;z-index:6;display:flex;gap:8px}
.sd .sd-icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none}
.sd-present-link{opacity:.75;transition:opacity .2s}
.sd-present-link:hover,.sd-present-link:focus-visible{opacity:1}
.sd-meter{position:fixed;right:28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.sd-meter>span{background:var(--bg);padding:2px 6px;border-radius:3px}
.sd-meter-track{width:4px;height:220px;background:var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.sd-meter-fill{width:4px;height:220px;background:var(--accent);border-radius:2px;transform-origin:bottom}

/* Detail sheets: open from a card on the page; each is also a deck frame */
.sd-detail{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px}
.sd-backdrop{position:absolute;inset:0;border:0;background:rgba(8,12,20,.8);cursor:pointer}
.sd-sheet{position:relative;width:100%;max-width:1120px;max-height:calc(100vh - 48px);overflow:auto;background:var(--sheet-bg);color:var(--sheet-text);border-radius:10px;padding:40px 48px;display:flex;flex-direction:column;gap:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.sd-sheet .sd-eyebrow{color:var(--sheet-label)}
.sd-sheet .sd-eyebrow.accent{color:var(--sheet-accent)}
.sd-sheet .sd-lead{color:var(--sheet-text-2)}
.sd-sheet .sd-h2{font-size:60px;line-height:.95}
.sd-sheet .sd-chips li{border-color:var(--sheet-text)}
.sd-sheet .sd-btn.primary{background:var(--sheet-text);border-color:var(--sheet-text);color:var(--sheet-bg)}
.sd-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sd-sheet-close{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid var(--sheet-text);border-radius:50%;background:none;color:var(--sheet-text);cursor:pointer}
.sd-sheet-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid var(--sheet-line)}
.sd-sheet-foot>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sd-callout{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:8px;background:var(--callout-bg);color:var(--callout-text)}
.sd-callout>svg{flex:none}
.sd-callout>div{display:flex;flex-direction:column;gap:4px}
.sd-sheet .sd-callout .sd-eyebrow{color:var(--callout-label)}

/* Closing frame (deck only) and footer */
.sd-closing{position:relative;min-height:720px;padding:96px 64px;display:flex;flex-direction:column;justify-content:center;gap:28px}
.sd-closing .sd-h1{font-size:140px}
.sd-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;font-size:20px}
.sd-footer{padding:96px 0 72px}
.sd-footer .sd-wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end;justify-content:space-between}

/* Scroll motion: progressive enhancement where scroll-driven animations exist */
@keyframes sd-draw{to{stroke-dashoffset:0}}
@keyframes sd-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes sd-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports (animation-timeline: view()){
.motion .draw-on-view{stroke-dashoffset:1;animation:sd-draw linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
.motion .draw-on-scroll{stroke-dashoffset:1;animation:sd-draw linear both;animation-timeline:scroll(root);animation-range:0px 520px}
.motion .rise{animation:sd-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
.motion .sd-meter-fill{animation:sd-fill linear both;animation-timeline:scroll(root)}
}
@media (prefers-reduced-motion: reduce){
.motion .draw-on-view,.motion .draw-on-scroll{animation:none;stroke-dashoffset:0}
.motion .rise{animation:none}
}

/* Small screens */
@media (max-width:900px){
.sd-hero{background-position:22% top}
.sd-hero-scrim{background:rgba(8,12,20,.55)}
.sd-hero-copy{margin-left:0}
}
@media (max-width:820px){
.sd-route{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
.sd-badge{width:44px;height:44px;font-size:20px}
.sd-rail svg{width:44px;top:44px;height:calc(100% - 44px)}
.sd-meter,.sd-present-link{display:none !important}
.sd-h1{font-size:72px}
.sd-h2{font-size:40px}
.sd-row{grid-template-columns:44px minmax(0,1fr)}
.sd-row>p{grid-column:2}
.sd-links{grid-template-columns:1fr}
}

/* Present mode (/present or ?present): one frame per screen, scaled to fit */
body:not(.presenting) .deck-only{display:none !important}
body.presenting{overflow:hidden}
body.presenting .sd-meter,body.presenting .sd-controls{display:none !important}
.deck{position:fixed;inset:0;z-index:30;background:var(--bg);color:var(--text);overflow:hidden}
.deck-slide{position:absolute;inset:0;overflow:hidden}
.deck-stage{position:absolute;left:50%;top:50%;width:1280px;transform-origin:center center}
.deck .sd-open,.deck [data-close],.deck [data-nav]{display:none !important}
.deck .sd-hero{min-height:720px;background-position:40% top}
.deck .sd-sheet{max-height:none;overflow:visible;box-shadow:none;margin:0 auto}
.deck .sd-rule{border-top:0}
.cue-present{display:none}
.deck .cue-scroll{display:none}
.deck .cue-present{display:inline}
.deck-progress{position:absolute;left:0;top:0;height:4px;background:var(--accent);transition:width .25s;z-index:2}
.deck-bar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;align-items:center;padding:4px 6px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--text);opacity:0;transition:opacity .25s;z-index:2;font-family:var(--font-mono);font-size:13px}
.deck:hover .deck-bar,.deck-bar:focus-within,.deck.show-bar .deck-bar{opacity:1}
.deck-bar button,.deck-bar a{min-width:44px;height:44px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:none}
.deck-bar button:hover,.deck-bar a:hover{background:var(--surface-2)}
.deck-count{padding:0 8px;letter-spacing:.08em;white-space:nowrap}
.deck-tag{position:absolute;top:18px;left:20px;z-index:2;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--muted)}
.deck-blank{position:fixed;inset:0;background:#000;z-index:40}
.deck.exporting .deck-progress,.deck.exporting .deck-bar,.deck.exporting .cue-present{display:none}