/* The story kit: the hub's long-form page patterns, for any page that loads hub.css. It goes with story.js, which
   adds the motion. Without JS, or with reduced motion, every block simply shows in its final state.

   Layout and type
     .hero                the opening screen: .hero__in, a .hero__title of .hero__line > span lines that rise in, and
                          a still grid behind it until [data-live-grid] brings the live one
     .section             a chapter of the page (big space above)           .section--tight  less space above
     .section-title       a chapter heading                                 .intro           the paragraph under it
     .source              the small sources line under a figure             .link-arrow      a text link with →
     .accent              red text inside a heading or sentence             .duo / .duo__text  text beside a figure
     .subsection / .subsection__h   a ruled sub-part inside a chapter
   Motion (story.js)
     [data-reveal]        fades and rises in when it scrolls into view
     [data-reveal-group]  its children do the same, one after another
     [data-count]         a number that counts up when it appears
     [data-live-grid]     a section with the live grid behind it (signals, lit cells, a cursor trail)
   Blocks
     .scrolly [data-scrolly]   a sticky figure beside steps that scroll past (.scrolly__vis, .scrolly__steps,
                               .scrolly__step[data-step]); .waffle[data-waffle="88,37,6"] is a 100-square figure
                               whose three shares colour in step by step, .waffle__key its key
     .statement [data-read-along]  a big closing line whose words fill in as you read it
     .compare             what climbed vs what stayed flat: .compare__col.is-up / .is-flat, rows with a slope
     .squares             n in 4 as squares that turn over                  .multiples  N× figures with bars on one scale
     .stat-list           big figures with a line of text each              .big-figure a huge number beside a sentence
     .field               a full-width section with an illustration behind the text (.field__in, .field__text)
     .dark-section        the dark band (.stat-row of big figures, .cta-row)
     .journey [data-journey]   numbered steps on one line, with a traveller dot (.journey__list, .journey__text)
     .closing             the closing question (.closing__title) with .doors of .door links
     .store-test [data-store-test]  a store address field and button that open the grader and start the test there
     .read-progress [data-read-progress="<selector>"]  a thin red bar under the header that fills as you read the
                          element the selector names (an article's text)
     [data-toc]           a contents list whose links point at headings: the one being read is marked .is-on
     .ico                 a line icon (an inline 48×48 SVG, pathLength="1" on each shape, .a for its red detail) that draws
                          itself in when its [data-reveal-group] or [data-reveal] scrolls into view
*/

:root{--bar-h:57px}
section{scroll-margin-top:calc(var(--bar-h) + 16px)}
/* the hero's grid runs 40px past the column; on a phone that would widen the page, so the page clips it at its edge
   (clip, unlike hidden, keeps sticky blocks working) */
main{overflow-x:clip}

/* ---------- hero: the opening screen; its title lines rise in one after another ---------- */
.hero{position:relative;isolation:isolate;min-height:calc(100svh - var(--bar-h));display:flex;flex-direction:column;justify-content:center;gap:56px;padding-block:clamp(48px,8vw,96px) 40px}
/* a still grid until story.js replaces it with the live one */
.hero::before{content:"";position:absolute;inset:0 -40px;z-index:-1;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(ellipse 55% 70% at 85% 40%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 55% 70% at 85% 40%,#000 0%,transparent 72%)}
.hero.has-grid::before{display:none}
.hero .live-grid{inset:0 -40px;width:calc(100% + 80px);
  -webkit-mask-image:radial-gradient(ellipse 60% 78% at 82% 42%,#000 0%,transparent 74%);mask-image:radial-gradient(ellipse 60% 78% at 82% 42%,#000 0%,transparent 74%)}
.hero__in{display:flex;flex-direction:column;gap:30px}
.hero__title{font-size:clamp(44px,7.4vw,104px);line-height:1;letter-spacing:-.02em}
.hero__line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__line > span{display:block}
html.js .hero__line > span{transform:translateY(105%);animation:story-rise .95s cubic-bezier(.2,.75,.15,1) forwards}
.hero__line:nth-child(2) > span{animation-delay:.12s}
.hero__line:nth-child(3) > span{animation-delay:.24s}
@keyframes story-rise{to{transform:none}}

/* ---------- layout and type ---------- */
.section{padding-block:clamp(88px,13vw,168px) 0}
.section--tight{padding-top:clamp(40px,6vw,72px)}
.section-title{font-size:clamp(34px,4.6vw,58px);line-height:1.06;letter-spacing:-.015em;margin-top:18px;text-wrap:balance}
.intro{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--ink2);margin-top:20px}
.intro b{color:var(--ink);font-family:var(--display);font-size:1.25em;font-weight:600}
.source{margin-top:40px;font:11px/1.8 var(--mono);letter-spacing:.03em;color:var(--ink3)}
.source a{color:var(--ink2)}
.link-arrow{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--stamp);align-self:flex-start}
.link-arrow i{font-style:normal;transition:transform .25s}
.link-arrow:hover i{transform:translateX(4px)}
.accent{color:var(--stamp)}
.duo{display:flex;flex-wrap:wrap;gap:48px clamp(40px,6vw,96px);align-items:center}
.duo__text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column}
.subsection{margin-top:clamp(72px,10vw,128px);padding-top:28px;border-top:1px solid var(--ink)}
.subsection__h{font-size:clamp(18px,1.7vw,21px);color:var(--ink2);line-height:1.55}
.subsection__h .cap{display:block;color:var(--stamp);margin-bottom:8px;font-size:12px}

/* ---------- reveal on scroll ---------- */
html.js [data-reveal],html.js [data-reveal-group] > *{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
html.js .in[data-reveal],html.js .in[data-reveal-group] > *{opacity:1;transform:none}

/* ---------- the live grid (a canvas story.js puts behind [data-live-grid] sections) ---------- */
[data-live-grid]{position:relative;isolation:isolate}
.live-grid{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 55% 65% at 50% 45%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 55% 65% at 50% 45%,#000 0%,transparent 72%)}

/* a small "scroll on" cue */
.scroll-cue{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;min-height:44px;font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-decoration:none}
.scroll-cue i{font-style:normal;color:var(--stamp);font-size:16px;animation:story-bob 2.2s ease-in-out infinite}
@keyframes story-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- scrolly: a sticky figure while the steps scroll past (story.js sets s1, s2, … on the figure) ---------- */
.scrolly{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0 clamp(40px,7vw,112px);margin-top:8px}
.scrolly__steps{grid-column:1;grid-row:1}
.scrolly__vis{grid-column:2;grid-row:1;position:sticky;top:calc(var(--bar-h) + 50svh - 260px);align-self:start;display:flex;flex-direction:column;gap:22px;padding-block:40px}
html:not(.js) .scrolly__vis{display:none}
html:not(.js) .scrolly{grid-template-columns:minmax(0,1fr)}
.scrolly__step{min-height:72svh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding-block:24px}
html.js .scrolly__step{opacity:.18;transition:opacity .5s ease}
html.js .scrolly__step.is-on{opacity:1}
.scrolly__step b{font:600 clamp(104px,14vw,200px)/.85 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.scrolly__step b.blue{color:var(--blue)} .scrolly__step b.accent{color:var(--stamp)}
.scrolly__step p{font:600 clamp(26px,2.8vw,38px)/1.15 var(--display);letter-spacing:-.01em}
.scrolly__step small{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
html:not(.js) .scrolly__step{min-height:0;padding-block:28px}
/* the waffle: 100 squares; l1, l2 and l3 mark the first, second and third share, coloured as s1, s2 and s3 arrive */
.waffle{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,.6vw,7px);width:min(100%,440px)}
.waffle i{aspect-ratio:1;background:var(--track);transition:background-color .3s ease calc(var(--i) * 7ms),transform .3s ease calc(var(--i) * 7ms)}
.waffle.s1 i.l1{background:var(--ink)}
.waffle.s2 i.l2{background:var(--blue)}
.waffle.s3 i.l3{background:var(--stamp);animation:story-pop .55s cubic-bezier(.3,.7,.2,1.4) calc(var(--i) * 90ms + .15s) both}
@keyframes story-pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.waffle__key{display:flex;flex-wrap:wrap;gap:6px 20px;font:12px var(--mono);letter-spacing:.04em;color:var(--ink2)}
.waffle__key span{display:inline-flex;align-items:center;gap:8px;opacity:.25;transition:opacity .4s}
.waffle__key span::before{content:"";width:10px;height:10px}
.waffle__key .k1::before{background:var(--ink)} .waffle__key .k2::before{background:var(--blue)} .waffle__key .k3::before{background:var(--stamp)}
.waffle.s1 + .waffle__key .k1,.waffle.s2 + .waffle__key .k2,.waffle.s3 + .waffle__key .k3{opacity:1}

/* ---------- statement: a big line whose words fill in as you read (--word-fill per word), then a stroke draws ---------- */
.statement{margin:clamp(64px,9vw,120px) 0 0;font-size:clamp(36px,5.2vw,76px)}
.statement blockquote{margin:0}
.statement p{font:600 1em/1.04 var(--display);letter-spacing:-.025em}
.statement__line{display:block}
.statement__line--accent{color:var(--stamp)}
html.js .statement .word{opacity:calc(.16 + var(--word-fill,0) * .84)}
.statement__mark{position:relative;display:inline-block;white-space:nowrap}
.statement__mark svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.3em;overflow:visible}
.statement__mark path{fill:none;stroke:var(--stamp);stroke-width:5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
html.js .statement__mark path{stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.5,.1,.2,1)}
html.js .statement.done .statement__mark path{stroke-dashoffset:0}
.statement figcaption{margin-top:28px;font-size:16px}
html.js .statement figcaption{opacity:0;transform:translateY(8px);transition:opacity .6s .4s,transform .6s .4s}
html.js .statement.done figcaption{opacity:1;transform:none}

/* ---------- compare: what climbed vs what stayed flat; each row's slope on one shared scale ---------- */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(32px,5vw,72px);margin-top:clamp(40px,5vw,64px)}
.compare__h{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:2px solid currentColor;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.compare__h span{font-size:18px;letter-spacing:0}
.is-up .compare__h{color:var(--blue)} .is-flat .compare__h{color:var(--stamp)}
.compare__row{display:grid;grid-template-columns:minmax(4.2ch,auto) minmax(0,1fr) 120px;align-items:center;gap:8px clamp(16px,2vw,28px);padding:26px 0;border-bottom:1px solid var(--rule)}
.compare__d{font:600 clamp(52px,5.4vw,76px)/.9 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;flex-direction:column}
.compare__d small{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:8px}
.is-up .compare__d{color:var(--blue)}
.compare__t p{font-size:17px;font-weight:500;line-height:1.35}
.compare__t span{display:block;margin-top:6px;font:13px var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
.compare__t s{text-decoration:none} .compare__t b{color:var(--ink);font-weight:600}
.compare__line{width:120px;height:48px;overflow:visible}
.compare__line line{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.is-up .compare__line line{stroke:var(--blue)} .is-flat .compare__row:last-child .compare__line line{stroke:var(--stamp)}
.compare__line circle.a{fill:var(--ground);stroke:var(--ink3);stroke-width:2}
.compare__line circle.b{fill:var(--ink)}
.is-up .compare__line circle.b{fill:var(--blue)} .is-flat .compare__row:last-child circle.b{fill:var(--stamp)}
html.js .compare__line line{stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.4,.1,.2,1) calc(var(--d,0) * 90ms + .35s)}
html.js .compare__line circle.b{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .3s,transform .4s cubic-bezier(.3,.7,.2,1.5);transition-delay:calc(var(--d,0) * 90ms + 1.2s)}
html.js .in > .compare__row .compare__line line{stroke-dashoffset:0}
html.js .in > .compare__row .compare__line circle.b{opacity:1;transform:none}
html.js .is-flat.in .compare__row:last-child circle.b{animation:story-ping 1.6s ease-out 2.2s 2}
@keyframes story-ping{0%{filter:drop-shadow(0 0 0 rgba(200,50,30,.6))}100%{filter:drop-shadow(0 0 7px rgba(200,50,30,0))}}

/* ---------- squares: "n in 4", each filled square turns over like a card ---------- */
.squares{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:28px}
.squares__row{display:flex;align-items:center;gap:24px}
.squares__grid{display:grid;grid-template-columns:repeat(4,clamp(34px,4vw,48px));gap:6px;flex:none;perspective:400px}
.squares__grid i{aspect-ratio:1;border:1.5px solid var(--ink);background:transparent}
.squares__grid i.on{background:var(--ink)}
.squares__row.is-red .squares__grid i{--c:var(--stamp);border-color:var(--stamp)} .squares__row.is-red .squares__grid i.on{background:var(--stamp)}
html.js .squares:not(.in) .squares__grid i.on{background:transparent}
html.js .squares.in .squares__grid i.on{animation:story-flip .7s cubic-bezier(.3,.6,.2,1) both}
.squares__grid i:nth-child(2){animation-delay:.18s !important} .squares__grid i:nth-child(3){animation-delay:.36s !important}
.squares__row.is-red .squares__grid i.on{animation-delay:.75s !important}
@keyframes story-flip{0%{transform:rotateY(0);background:transparent}49%{background:transparent}50%{transform:rotateY(90deg)}51%{background:var(--c,var(--ink))}100%{transform:rotateY(0);background:var(--c,var(--ink))}}
.squares__row b{display:block;font:600 clamp(36px,4vw,52px)/1 var(--display)}
.squares__row.is-red b{color:var(--stamp)}
.squares__row > div > span{display:block;font-size:15px;color:var(--ink2);margin-top:6px}
.squares__key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:11px var(--mono);letter-spacing:.04em;color:var(--ink3);padding-top:16px;border-top:1px dashed var(--dash)}
.squares__key i{width:10px;height:10px;background:var(--ink)} .squares__key i.off{background:transparent;border:1.5px solid var(--ink);margin-left:12px}

/* ---------- multiples: N× figures, each with "ours vs the baseline" bars on one shared scale (--w) ---------- */
.multiples{display:flex;flex-wrap:wrap;gap:40px clamp(28px,4vw,56px);margin-top:44px}
.multiple{flex:1 1 240px;min-width:0;display:flex;flex-direction:column}
.multiple b{display:block;font:600 clamp(64px,8vw,112px)/.95 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.multiple.is-red b{color:var(--stamp)}
.multiple__t{display:block;font-size:16px;color:var(--ink2);margin-top:10px;min-height:2.9em}
.multiple__bars{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.multiple__bars > span{position:relative;height:22px;width:var(--w);transform-origin:left;transition:transform 1.1s cubic-bezier(.25,.7,.1,1)}
.multiple__bars .fb{background:var(--ink)} .multiple.is-red .multiple__bars .fb{background:var(--stamp)}
.multiple__bars .fb.open::after{content:"";position:absolute;left:100%;width:30%;top:50%;border-top:2px dashed var(--ink)}
.multiple__bars .lag{height:10px;background:#AEB6C0}
.multiple__bars em{position:absolute;left:0;top:calc(100% + 4px);font:10px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.multiple__bars .fb em{top:50%;left:10px;transform:translateY(-50%);color:#fff}
.multiple__bars .lag em{top:-1px;left:calc(100% + 8px)}
html.js .multiples:not(.in) .multiple__bars > span{transform:scaleX(0)}
html.js .multiples.in .multiple__bars > span{transform:scaleX(1);transition-delay:calc(var(--d,0) * 90ms + .3s)}
html.js .multiples.in .multiple__bars .lag{transition-delay:calc(var(--d,0) * 90ms + .1s)}

/* ---------- stat list: big figures, a line of text beside each ---------- */
.stat-list{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:flex;flex-direction:column}
.stat-list li{display:grid;grid-template-columns:minmax(3.3ch,auto) minmax(0,1fr);align-items:center;gap:4px 24px;padding:22px 0;border-top:1px solid var(--rule)}
.stat-list li:last-child{border-bottom:1px solid var(--rule)}
.stat-list b{font:600 clamp(48px,5.4vw,76px)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-list li.is-red b{color:var(--stamp)}
.stat-list li > span{font-size:17px;color:var(--ink2);line-height:1.4;max-width:17rem}

/* ---------- field: a full-width section with an illustration behind the text; a soft wash keeps the text readable ---------- */
.field{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(56px,8vw,112px);min-height:80svh;display:flex;align-items:center;padding-block:clamp(56px,6vw,80px)}
.field > svg,.field > canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.field::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,var(--ground) 0%,var(--ground) 30%,rgba(238,240,242,.7) 44%,rgba(238,240,242,0) 58%)}
.field__in{width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.field__text{grid-column:1}
.field .section-title{font-size:clamp(34px,3.8vw,54px)}
.field .stat-list{margin-top:clamp(24px,3vw,36px)}
.field .stat-list li{padding:12px 0}
.field .stat-list b{font-size:clamp(40px,3.8vw,54px)}
.field .source{margin-top:22px}

/* ---------- big figure: a huge number beside a sentence; a marker sweeps over the <mark> ---------- */
.big-figure{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px clamp(24px,4vw,56px);padding-top:28px;border-top:1px solid var(--ink)}
.big-figure__n{font:600 clamp(80px,11vw,160px)/.85 var(--display);letter-spacing:-.04em;color:var(--stamp);grid-row:span 2}
.big-figure blockquote{margin:0}
.big-figure p{font:600 clamp(26px,3vw,40px)/1.18 var(--display);letter-spacing:-.01em}
.big-figure mark{color:inherit;background:linear-gradient(var(--stamp-tint),var(--stamp-tint)) 0 88%/100% 55% no-repeat;padding:0 .08em;box-shadow:inset 0 -.08em 0 var(--stamp)}
html.js .big-figure mark{background-size:0 55%;box-shadow:none;transition:background-size 1s cubic-bezier(.5,.1,.2,1) .5s}
html.js .big-figure.in mark{background-size:100% 55%;box-shadow:inset 0 -.08em 0 var(--stamp)}
.big-figure figcaption{font:11px/1.7 var(--mono);letter-spacing:.04em;color:var(--ink3);align-self:start}
.big-figure figcaption a{color:var(--ink2)}

/* ---------- dark section ---------- */
.dark-section{background:var(--stage);color:var(--stage-ink);margin-top:clamp(96px,14vw,176px);padding-block:clamp(80px,11vw,140px)}
.dark-section .label{color:var(--stamp-on-dark)} .dark-section .label .mute{color:var(--stage-mute)}
.dark-section .section-title{color:#fff}
.dark-section .section-title em{font-style:normal;color:var(--stamp-on-dark)}
.dark-section .btn--primary{box-shadow:6px 6px 0 rgba(255,255,255,.12)}
.dark-section .source{color:var(--stage-mute)} .dark-section .source a{color:var(--stage-soft)}
.stat-row{display:flex;flex-wrap:wrap;gap:32px 28px;margin-top:clamp(48px,6vw,72px)}
.stat-row > div{flex:1 1 200px;min-width:0;border-top:1px solid var(--stage-rule);padding-top:18px}
.stat-row b{display:block;font:600 clamp(56px,6.4vw,88px)/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.stat-row > div > span{display:block;font-size:15px;color:var(--stage-mute);margin-top:8px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(48px,6vw,64px)}
.cta-row span{font-size:15px;color:var(--ink2)}
.dark-section .cta-row span{color:var(--stage-soft)}

/* ---------- journey: numbered steps; a vertical list that fills as you scroll, and on wide screens a line with a
   traveller dot that stops at each station (story.js sets --prog, .lit, .in and .live) ---------- */
.journey{position:relative;margin-top:44px}
.journey__list{list-style:none;margin:0;padding:0;position:relative}
.journey__list::before{content:"";position:absolute;left:15px;top:28px;bottom:28px;width:1px;background:var(--rule)}
.journey__list::after{content:"";position:absolute;left:15px;top:28px;width:1px;height:calc((100% - 56px) * var(--prog,0));background:var(--stamp);transition:height .2s linear}
.journey__list li > a,.journey__list li > div{display:grid;grid-template-columns:32px minmax(0,1fr) auto 20px;align-items:center;gap:6px 20px;padding:20px 0;text-decoration:none;color:var(--ink);position:relative}
.journey__list small{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:12px var(--mono);background:var(--ground);border:1.5px solid var(--ink);position:relative;z-index:1}
.journey__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.journey__text b{font:600 clamp(22px,2.2vw,28px)/1.15 var(--display)}
.journey__text > span{font-size:15px;color:var(--ink2)}
.journey__list em{font:11px var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.journey__list em.live{color:var(--good)}
.journey__list i{font-style:normal;color:var(--stamp);transition:transform .25s}
.journey__list a:hover i{transform:translateX(5px)}
.journey__list a:hover .journey__text b{color:var(--stamp)}
.journey__list a:hover small{border-color:var(--stamp);color:var(--stamp)}
.journey__list .is-soon .journey__text{opacity:.7}
.journey__list .is-soon small{border-style:dashed;color:var(--ink3);border-color:var(--ink3)}
.journey__list .is-next em{color:var(--stamp)}
.journey__list li.lit small{border-color:var(--stamp);color:var(--stamp)}
.journey__track,.journey__dot{display:none}
@media (min-width:861px){
  .journey{--stop:8s}
  .journey__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .journey__list::before,.journey__list::after{display:none}
  .journey__list li > a,.journey__list li > div{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 28px 0 0;height:100%}
  .journey__list small{width:36px;height:36px;margin-bottom:10px;z-index:2}
  .journey__text{gap:6px}
  .journey__list em{order:3;margin-top:auto;padding-top:6px}
  .journey__list i{display:none}
  .journey__list a .journey__text b::after{content:"\00a0→";color:var(--stamp);opacity:0;display:inline-block;transform:translateX(-4px);transition:opacity .2s,transform .25s}
  .journey__list a:hover .journey__text b::after{opacity:1;transform:none}
  /* the line runs through the station centres: the first is at 18px, each next one 20% further */
  .journey__track{display:block;position:absolute;left:18px;top:17px;width:80%;height:2px;z-index:1}
  .journey__track .solid,.journey__track .dash{position:absolute;top:0;height:2px;transform-origin:left;transition:transform 1.2s cubic-bezier(.4,.1,.2,1)}
  .journey__track .solid{left:0;width:25%;background:var(--ink)}
  .journey__track .dash{left:25%;width:75%;background:repeating-linear-gradient(90deg,var(--ink3) 0 6px,transparent 6px 12px);transition-delay:.5s}
  html.js .journey:not(.in) .journey__track span{transform:scaleX(0)}
  .journey__dot{display:block;position:absolute;top:12px;left:12px;width:12px;height:12px;border-radius:50%;background:var(--stamp);box-shadow:0 0 0 4px var(--ground);opacity:0;z-index:3;pointer-events:none}
  .journey.live .journey__dot{animation:story-travel var(--stop) cubic-bezier(.5,0,.3,1) 1.4s infinite}
  .journey.live .journey__list small{animation:story-arrive var(--stop) ease-out calc(1.4s + var(--i) * var(--stop) * .22) infinite}
  @keyframes story-travel{
    0%{left:12px;opacity:0} 3%{opacity:1} 10%{left:12px}
    22%{left:calc(12px + 20%)} 32%{left:calc(12px + 20%)}
    44%{left:calc(12px + 40%)} 54%{left:calc(12px + 40%)}
    66%{left:calc(12px + 60%)} 76%{left:calc(12px + 60%)}
    88%{left:calc(12px + 80%);opacity:1} 97%{left:calc(12px + 80%);opacity:0} 100%{left:calc(12px + 80%);opacity:0}}
  @keyframes story-arrive{0%{box-shadow:0 0 0 0 rgba(200,50,30,.45);border-color:var(--stamp);color:var(--stamp)} 9%{box-shadow:0 0 0 10px rgba(200,50,30,0)} 14%,100%{box-shadow:0 0 0 0 rgba(200,50,30,0)}}
}

/* ---------- closing: the last question and its doors ---------- */
.closing{overflow:hidden;padding-block:clamp(112px,15vw,192px) clamp(72px,9vw,112px);text-align:center}
.closing__title{font:600 clamp(36px,5vw,68px)/1.06 var(--display);letter-spacing:-.02em}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(40px,5vw,64px);text-align:left}
.door{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 28px 64px;background:#fff;border:1px solid var(--rule);color:var(--ink);text-decoration:none;
  transition:transform .25s,box-shadow .25s,border-color .25s,background-color .3s,color .3s}
.door small{font:12px var(--mono);color:var(--stamp)}
.door b{font:600 clamp(24px,2.4vw,32px)/1.1 var(--display)}
.door > span{font-size:15px;color:var(--ink2);line-height:1.5}
.door i{position:absolute;left:28px;bottom:24px;font-style:normal;font-size:20px;color:var(--stamp);transition:transform .25s}
.door em{position:absolute;top:-11px;left:20px;background:var(--stamp);color:#fff;font:10px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.door:hover{color:var(--ink);border-color:var(--ink);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--stamp)}
.door:hover i{transform:translateX(6px)}
/* a door can be marked (from a page's own script): dark, with its <em> tag showing */
.door.is-marked{background:var(--stage);border-color:var(--stage);color:#fff;box-shadow:8px 8px 0 var(--stamp)}
.door.is-marked > span{color:var(--stage-soft)}
.door.is-marked small,.door.is-marked i{color:var(--stamp-on-dark)}
.door.is-marked em{opacity:1;transform:none}

/* ---------- store test: the grader's store field (story.js sends it to the grader's #url=, which starts the test) ---------- */
.store-test{display:flex;flex-wrap:wrap;gap:10px;max-width:560px}
.store-test label{flex:1 1 260px;display:flex}
.store-test input{width:100%;min-height:54px;padding:0 18px;border:1.5px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:500 17px var(--font)}
.store-test input::placeholder{color:var(--ink3)}
.store-test input:focus-visible,.store-test .btn:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}
.store-test .btn{min-height:54px}
.stage .store-test input,.dark-section .store-test input{border-color:var(--stage-mute)}
.stage .store-test input:focus-visible,.dark-section .store-test input:focus-visible{outline-color:var(--stamp-on-dark)}
.closing .store-test{justify-content:center;margin:clamp(32px,4vw,44px) auto 0}

/* ---------- line icons: ink lines with one red detail, drawn in as their group appears ---------- */
.ico{display:block;width:52px;height:52px}
.ico svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico .a{stroke:var(--stamp)}
.ico .bg{fill:var(--ground)}
html.js .ico svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,.1,.2,1) calc(var(--d,0) * 90ms + .25s)}
html.js .ico svg .a{transition-delay:calc(var(--d,0) * 90ms + .85s)}
html.js .in .ico svg *,html.js .in.ico svg *{stroke-dashoffset:0}
:hover > .ico .a{animation:story-nudge .5s ease}
@keyframes story-nudge{50%{transform:translateY(-2px)}}

/* ---------- reading progress: a thin bar under the header (story.js sets --read from 0 to 1) ---------- */
.read-progress{position:fixed;top:var(--bar-h);left:0;right:0;z-index:30;height:3px;pointer-events:none}
.read-progress i{display:block;height:100%;background:var(--stamp);transform-origin:left;transform:scaleX(var(--read,0))}
html:not(.js) .read-progress{display:none}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .scrolly{grid-template-columns:minmax(0,1fr)}
  .scrolly__vis{grid-column:1;grid-row:1;top:var(--bar-h);z-index:2;background:var(--ground);flex-direction:row;align-items:center;gap:16px;
    padding-block:14px;margin-inline:calc(-1 * clamp(16px,3vw,32px));padding-inline:clamp(16px,3vw,32px);border-bottom:1px solid var(--rule)}
  .scrolly__steps{grid-row:2}
  .waffle{width:clamp(132px,38vw,220px);flex:none;gap:3px}
  .waffle__key{flex-direction:column;gap:8px}
  .scrolly__step{min-height:62svh}
  .compare{grid-template-columns:minmax(0,1fr)}
  .doors{grid-template-columns:minmax(0,1fr);gap:24px}
  .field{display:block;min-height:0;padding-block:0 clamp(56px,10vw,80px)}
  .field__in{grid-template-columns:minmax(0,1fr);padding-top:min(92vw,560px)}
  .field::before{background:linear-gradient(180deg,rgba(238,240,242,0) 0,rgba(238,240,242,0) min(64vw,380px),var(--ground) min(90vw,540px))}
}
@media (max-width:640px){
  .store-test .btn{flex:1 1 100%}
  .hero{min-height:auto;gap:40px}
  .hero__title{font-size:10.4vw}
  .big-figure{grid-template-columns:minmax(0,1fr)}
  .big-figure__n{grid-row:auto}
  .compare__row{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"d t" "d l"}
  .compare__d{grid-area:d;align-self:start} .compare__t{grid-area:t} .compare__line{grid-area:l;width:96px;height:38px}
  .stat-row{gap:28px 20px}
  .stat-row > div{flex:1 1 calc(50% - 10px)}
  .journey__list li > a,.journey__list li > div{grid-template-columns:32px minmax(0,1fr) 16px;row-gap:8px}
  .journey__list em{grid-column:2;grid-row:2}
  .journey__list i{grid-column:3;grid-row:1}
}

/* ---------- reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-reveal-group] > *{opacity:1;transform:none;transition:none}
  html.js .hero__line > span{transform:none;animation:none}
  .scroll-cue i{animation:none}
  .waffle i,.waffle__key span,html.js .scrolly__step{transition:none}
  .waffle.s3 i.l3{animation:none}
  html.js .statement .word{opacity:1}
  html.js .statement__mark path{stroke-dashoffset:0;transition:none}
  html.js .statement figcaption{opacity:1;transform:none;transition:none}
  html.js .compare__line line{stroke-dashoffset:0;transition:none}
  html.js .compare__line circle.b{opacity:1;transform:none;transition:none}
  html.js .is-flat.in .compare__row:last-child circle.b{animation:none}
  html.js .squares:not(.in) .squares__grid i.on{background:var(--c,var(--ink))}
  html.js .squares.in .squares__grid i.on{animation:none}
  html.js .multiples .multiple__bars > span{transform:none;transition:none}
  html.js .big-figure mark{transition:none}
  .journey.live .journey__dot,.journey.live .journey__list small{animation:none}
  html.js .ico svg *{stroke-dashoffset:0;transition:none}
  :hover > .ico .a{animation:none}
  html.js .journey:not(.in) .journey__track span{transform:none}
}