/* A scroll-led drawing of the actual doobdoob broadcast layout. No ambient loop. */
.hero-story{--header-height:88px;background:#0b0b12;position:relative}
.hero-story .story-stage{background:radial-gradient(ellipse at 95% 40%,#21192d50,transparent 60%),#0b0b12;overflow:clip;isolation:isolate}
.hero-story .story-stage::after{display:none}
.hero-story.is-scroll{height:300vh;height:300svh}
.hero-story.is-scroll .story-stage{position:sticky;top:var(--header-height);height:calc(100vh - var(--header-height));height:calc(100svh - var(--header-height))}
.hero-story .story-inner{width:min(1440px,calc(100% - 96px));padding:26px 0 28px;min-height:720px;display:flex;flex-direction:column}
.hero-story.is-scroll .story-inner{height:100%;min-height:0}
.hero-story .story-meta{font-size:9px;color:#b7aebe;flex-shrink:0}
.story-layout{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(0,1.6fr);align-items:center;gap:48px;flex:1;min-height:0;padding:38px 0 32px}
.story-copy .story-title{font-family:Doto,monospace;font-variation-settings:'ROND' 100;font-weight:800;font-size:clamp(65px,6.45vw,102px);line-height:.97;letter-spacing:-.045em}
.story-copy .story-title span{color:#d5abd0}
.story-copy h3{font-size:clamp(23px,2.02vw,29px);letter-spacing:-.055em;line-height:1.45;margin:28px 0 15px}
.story-copy>p{font-size:13px;line-height:1.9;color:#aaa1b2}
.story-copy .story-link{font-size:11px;gap:40px;padding:10px 17px;margin-top:24px;background:#ffffff05}
.broadcast-figure{margin:0;min-width:0;align-self:center}
.drawing-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:25px;font:9px monospace;letter-spacing:.12em;color:#a99ab6}
.drawing-count{color:#dfb5d4;font-variant-numeric:tabular-nums}
.broadcast-drawing{position:relative;aspect-ratio:16/9;width:100%;border-radius:5px;background:#0c0e17;box-shadow:0 30px 70px #0005,0 0 0 1px #c3a4ed0b}
.broadcast-blueprint{width:100%;height:100%;display:block;overflow:visible}
.blueprint-guides{stroke:#c0a4df;stroke-width:.7;stroke-opacity:.16;fill:none;stroke-dasharray:3 9}
.draw-block{--content:1;--panel:1}
.draw-block .structure,.draw-block .detail-line,.draw-block .signal-trace,.draw-block .headline-stroke,.draw-block .caption-stroke,.draw-block .alert-line,.draw-block .reading-progress,.draw-block .market-chart{fill:none;stroke:url(#drawing-ink);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.draw-block .structure{stroke-opacity:.85}
.draw-block .detail-line{stroke-opacity:.65;stroke-width:1}
.draw-block .headline-stroke{stroke:#dbe0e8;stroke-width:8;stroke-linecap:square;stroke-opacity:.8}
.draw-block .caption-stroke{stroke:#c0c6d5;stroke-width:4;stroke-linecap:square;stroke-opacity:.75}
.draw-block .signal-trace{stroke:#8ec7bc;stroke-width:1.6}
.draw-block .reading-progress{stroke:#8ec7bc;stroke-width:2}
.draw-block .alert-line,.draw-block .market-chart{stroke:#e680a1;stroke-width:1.6}
.draw-block .chart-violet{stroke:#a79cde}
.draw-block .live-outline{stroke:#f56f8b;fill:#f56f8b0a}
.draw-block .incident-dot{stroke:#ff728c;fill:#ff728c;stroke-width:1;opacity:var(--content)}
.draw-block .draw-label{font:10px Arial,'Apple SD Gothic Neo',sans-serif;letter-spacing:.025em;fill:#d3c8de;opacity:var(--content)}
.draw-block .logo-label{font-family:Doto,monospace;font-size:21px;font-weight:800;letter-spacing:-.08em}
.draw-block .red-label{fill:#f58aa7}
.draw-block .teal-label{fill:#94c6bc}
.draw-block .scene-label{font:11px monospace;letter-spacing:.25em;fill:#8e849f}
.draw-block .source-label{font-size:7px;letter-spacing:.15em}
.draw-block .score-label{font-weight:600;font-size:12px;fill:#b8b2cd}
.draw-block .keyword-label{fill:#e9c9d4}
.draw-block .panel-fill{fill:#0c101c;opacity:var(--panel);stroke:none}
.draw-block .keyword-fill{fill:#622838;opacity:calc(var(--panel) * .38);stroke:none}
.news-illustration{opacity:.55}
.broadcast-reference{position:absolute;inset:0;width:100%;height:100%;border-radius:5px;object-fit:contain;background:#08090e}
.broadcast-reference[hidden]{display:none}
.drawing-corner{position:absolute;width:13px;height:13px;pointer-events:none;border-color:#9b7fb5;border-style:solid;opacity:.6}
.corner-tl{top:-8px;left:-8px;border-width:1px 0 0 1px}.corner-br{bottom:-8px;right:-8px;border-width:0 1px 1px 0}
.broadcast-figure figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:22px;min-height:36px}
.drawing-note{font-size:10px;line-height:1.65;color:#81788d;max-width:320px}
.compare-button{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;background:transparent;padding:2px 0 5px;border-bottom:1px solid #b7a2c74d;color:#b6a4c7;font-size:10px}
.compare-button:hover,.compare-button[aria-pressed=true]{color:#f0c8e3;border-color:#f0c8e3}
.story-footer{flex-shrink:0;border-top:1px solid #ffffff1c;padding-top:22px}
.story-caption{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.story-chapter{font:10px monospace;letter-spacing:.08em;color:#d1acd0;min-width:125px}
.story-description{font-size:14px;color:#c8c0d2;line-height:1.6}
.scroll-hint{font:9px monospace;letter-spacing:.09em;color:#8f839b;margin-left:auto;white-space:nowrap}
.scroll-hint>span{font:17px Arial;margin-left:8px;color:#cdb1d5}
.story-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.story-steps button{position:relative;text-align:left;padding:15px 0 0;font-size:11px;color:#7f748c;background:transparent}
.story-steps button[aria-current=step]{color:#f0e5f3}
.step-number{font:9px monospace;color:#b391ad;margin-right:12px}
.step-track{position:absolute;top:0;left:0;width:100%;height:1px;background:#ffffff16}
.step-track:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#e795b5,#a695d5);transform:scaleX(var(--step-progress,0));transform-origin:left}
.hero-story:not(.is-scroll) .story-layout{padding-block:40px}
.hero-story:not(.is-scroll) .scroll-hint{display:none}
@media(min-width:701px) and (max-height:800px){
 .hero-story .story-inner{padding-top:20px;padding-bottom:20px}
 .story-layout{gap:35px;padding:22px 0}
 .story-copy .story-title{font-family:Doto,monospace;font-variation-settings:'ROND' 100;font-weight:800;font-size:clamp(58px,5.5vw,78px)}
 .story-copy h3{font-size:24px;margin:18px 0 10px}
 .story-copy>p{font-size:12px}
 .story-copy .story-link{margin-top:15px}
 .story-footer{padding-top:16px}.story-caption{margin-bottom:15px}
 .drawing-heading{margin-bottom:18px}.broadcast-figure figcaption{margin-top:18px}
}
@media(min-width:701px) and (max-width:1100px){
 .hero-story .story-inner{width:calc(100% - 64px)}
 .story-layout{grid-template-columns:minmax(245px,.85fr) minmax(0,1.5fr);gap:32px}
 .story-copy .story-title{font-family:Doto,monospace;font-variation-settings:'ROND' 100;font-weight:800;font-size:clamp(58px,6.45vw,72px)}
 .story-copy h3{font-size:23px}.story-copy>p{font-size:12px}
 .broadcast-figure figcaption{flex-direction:column;gap:10px}
 .drawing-kicker{font-size:8px;letter-spacing:.05em}.story-description{font-size:12px}
}
@media(max-width:700px){
 .hero-story{--header-height:72px}
 .hero-story.is-scroll{height:285vh;height:285svh}
 .hero-story .story-inner{width:calc(100% - 40px);padding:20px 0 20px;min-height:0}
 .hero-story .story-meta{font-size:7px}
 .story-layout{grid-template-columns:1fr;gap:26px;padding:25px 0 20px;align-content:center}
 .story-copy{display:grid;grid-template-columns:1.05fr 1fr;gap:0 16px;align-items:center}
 .story-copy .story-title{font-family:Doto,monospace;font-variation-settings:'ROND' 100;font-weight:800;font-size:clamp(37px,10.3vw,66px);grid-row:1/3}
 .story-copy h3{font-size:clamp(15px,4.1vw,22px);line-height:1.5;letter-spacing:-.055em;margin:0 0 8px}
 .story-copy>p{font-size:10px;line-height:1.7}
 .story-copy .story-link{display:none}
 .drawing-heading{font-size:7px;letter-spacing:.06em;margin-bottom:18px}
 .broadcast-figure figcaption{margin-top:17px;gap:14px;align-items:flex-start;min-height:33px}
 .drawing-note{font-size:9px;max-width:205px}.compare-button{font-size:9px;gap:6px}
 .story-footer{padding-top:17px}
 .story-caption{display:grid;grid-template-columns:1fr auto;gap:8px 10px;margin-bottom:17px}
 .story-chapter{font-size:8px}.story-description{font-size:12px;grid-column:1/-1;grid-row:2}
 .scroll-hint{font-size:7px}.scroll-hint>span{font-size:12px;margin-left:3px}
 .story-steps{gap:12px}.story-steps button{font-size:10px;padding-top:13px}.step-number{display:block;margin:0 0 4px;font-size:8px}
 .hero-story:not(.is-scroll) .story-layout{padding:28px 0}
}
@media(max-width:700px) and (max-height:730px){
 .hero-story .story-inner{padding-top:16px;padding-bottom:16px}
 .story-layout{gap:18px;padding:18px 0}.story-copy .story-title{font-family:Doto,monospace;font-variation-settings:'ROND' 100;font-weight:800;font-size:clamp(35px,9.6vw,47px)}
 .story-copy h3{font-size:15px}.story-copy>p{font-size:9px}
 .drawing-heading{margin-bottom:13px}.broadcast-figure figcaption{margin-top:12px}
 .story-footer{padding-top:13px}.story-caption{margin-bottom:13px}
}
@media(prefers-reduced-motion:reduce){.hero-story.is-scroll{height:auto}.hero-story.is-scroll .story-stage{position:relative;top:auto;height:auto}.hero-story .scroll-hint{display:none}}

.hero-story .story-meta{display:flex;justify-content:space-between;gap:20px;font-family:monospace;letter-spacing:.08em}
@media(max-width:700px){.story-meta>span:last-child{display:none}.story-copy .story-title{grid-row:1/3;margin:0}}