/* attention-story.css (was fpv2.css; renamed because EasyPrivacy blocks any URL matching /fpv2.js, see README). Depends on the site's theme.css variables (--ink, --ink2, --ink3, --void, --s2, --line, --line2, --accent-text, --heat-0..4, --mono, --sans, --grotesk). */
.fpv2-fig{--fig-neutral:#33373F;--fig-pruned:var(--s2);margin:38px auto;width:min(960px,100vw - 56px);position:relative;left:50%;transform:translateX(-50%);}
:root[data-theme="light"] .fpv2-fig{--fig-neutral:#E6E3DA;--fig-pruned:var(--line);}  /* light surfaces sit on paper with no contrast, so the pruned blocks take the line tone there */
.fpv2-fig svg{display:block;width:100%;height:auto;background:var(--void);}
.fpv2-fig .fpv2-title{font-family:var(--grotesk);font-weight:500;font-size:22px;letter-spacing:-.01em;color:var(--h1);margin:0 0 10px;}
.fpv2-fig figcaption{font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink2);margin-top:12px;max-width:70ch;}
.fpv2-fig text{font-family:var(--sans);fill:var(--ink);}
.fpv2-fig .lab{font-size:12.5px;fill:var(--ink);}
.fpv2-fig .tick{font-family:var(--mono);font-size:11px;fill:var(--ink2);}
.fpv2-fig .cat{font-size:13px;fill:var(--ink);}
.fpv2-fig .speed{font-family:var(--grotesk);font-weight:700;font-size:15px;fill:var(--accent-text);}
.fpv2-fig .head{font-family:var(--grotesk);font-weight:500;font-size:14px;fill:var(--ink);}
.fpv2-fig .heads{font-family:var(--grotesk);font-weight:500;font-size:14px;fill:var(--ink);}
.fpv2-fig .headi{font-family:var(--grotesk);font-weight:500;font-size:14px;fill:#241A06;}
.fpv2-fig .note{font-size:11.5px;fill:var(--ink2);}
.fpv2-fig .notei{font-size:11.5px;fill:#241A06;}
.fpv2-fig .big{font-family:var(--grotesk);font-weight:700;font-size:22px;fill:var(--accent-text);}
.fpv2-fig .grid{stroke:var(--line);stroke-width:1;}
.fpv2-fig .axis{stroke:var(--line2);stroke-width:1;}
.fpv2-fig .leader{stroke:var(--ink3);stroke-width:1;}
@media(max-width:680px){.fpv2-fig .fpv2-title{font-size:18px;}}

/* fpv2-explainer.css */
.fpv2-story{
  width:100vw;height:720vh;position:relative;margin:44px 0 56px calc(50% - 50vw);
  padding:0!important;border:0!important;background:var(--void);
}
.fpv2-story-sticky{
  /* Capped: the matrix tops out at 720px plus its labels, so on tall viewports an uncapped
     panel left a blank band between the storyboard and the prose after it. */
  width:min(1440px,100vw);height:min(100vh - 64px,920px);position:sticky;top:64px;
  margin:0 auto;overflow:hidden;background:var(--void);
}
.fpv2-story canvas{display:block;width:100%;height:100%;}
/* Offsets are relative to .fpv2-story-sticky, which is the containing block: keep them
   independent of the viewport so a wider window never squeezes the canvas. */
.fpv2-story-copy{position:absolute;top:0;right:48px;width:min(390px,32%);height:100%;pointer-events:none;}
.fpv2-story-step{position:absolute;top:50%;left:0;width:100%;opacity:0;transform:translateY(calc(-50% + 18px));transition:opacity .18s linear,transform .35s ease;}
.fpv2-story-step.is-active{opacity:1;transform:translateY(-50%);}
.fpv2-story-step h4{font-size:30px!important;line-height:1.1;margin:0 0 15px!important;}
.fpv2-story-step p{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink2)!important;margin:0!important;max-width:36ch;}
.fpv2-story-progress{position:absolute;right:24px;top:50%;display:grid;gap:8px;transform:translateY(-50%);}
.fpv2-story-progress i{display:block;width:3px;height:28px;border-radius:2px;background:var(--line2);transition:background .2s;}
.fpv2-story-progress i.is-active{background:var(--accent);}
.fpv2-story-fallback{display:block;width:min(760px,100% - 32px);margin:30px auto;}
@media(max-width:760px){
  .fpv2-story{height:600vh;margin-top:26px;}
  .fpv2-story-sticky{height:calc(100svh - 64px);}
  /* The canvas already reserves the bottom band (see frames() in fpv2.js), so the copy needs
     no panel behind it; it sits directly on the section background. */
  .fpv2-story-copy{top:auto;right:22px;bottom:30px;left:22px;width:auto;height:190px;padding:0;background:none;border:0;backdrop-filter:none;}
  .fpv2-story-step{top:50%;}.fpv2-story-step h4{font-size:22px!important;margin-bottom:8px!important;}.fpv2-story-step p{font-size:14px;line-height:1.45;max-width:none;}
  .fpv2-story-progress{top:22px;right:18px;display:flex;transform:none}.fpv2-story-progress i{width:24px;height:3px;}
}
@media(prefers-reduced-motion:reduce){.fpv2-story-step{transition:none;}}
@media print{.fpv2-story{height:auto}.fpv2-story-sticky{position:relative;top:0;height:640px}.fpv2-story-step:not(:last-child),.fpv2-story-progress{display:none}.fpv2-story-step:last-child{opacity:1}}