/* KidzMeter: an illustrated workbook unfolded into a measuring journey. */
body[data-story="kidzmeter"]{--ex-accent:#df5143}
body[data-story="kidzmeter"] .top{border-bottom:2px solid #202321}
body[data-story="kidzmeter"] .chapters{background:#fffdf2f5;border-bottom:2px solid #202321;backdrop-filter:blur(12px)}
body[data-story="kidzmeter"] .chapters a{font:10px Mono,monospace;text-transform:uppercase;letter-spacing:.025em}
.kids-hero{padding:45px 0 70px;border-bottom:2px solid #202321;isolation:isolate}
.kids-hero:after{width:34px;background:repeating-linear-gradient(to bottom,#202321 0 2px,transparent 2px 22px);z-index:-1}
.kids-hero .wrap{grid-template-columns:1.1fr .9fr;gap:8vw;position:relative;z-index:1;min-height:640px}
.kids-hero .eyebrow{font-size:9px;letter-spacing:.1em;max-width:300px;padding-left:15px;border-left:3px solid #202321}
.kids-hero .kids-logo{max-width:535px;width:100%;margin:30px 0 25px;transform:rotate(-2deg) translateY(calc((var(--section-progress,.3) - .3)*-45px));mix-blend-mode:multiply}
.kids-hero .kids-logo img{width:100%;height:auto}
.kids-hero p{font-size:20px;max-width:390px;line-height:1.5}
.kids-hero> .wrap>div>a{font:11px Mono,monospace}
.kids-hero .hero-book{position:relative;transform:rotate(7deg) translateY(calc((var(--section-progress,.3) - .3)*70px));margin:10px auto 45px;max-width:340px;width:82%;box-shadow:15px 15px 0 #202321;border:2px solid #202321;z-index:2}
.kids-hero .hero-book:before{content:'';position:absolute;inset:-8px 4px 5px -8px;border:2px solid #202321;background:#fffdf2;z-index:-1;transform:rotate(-3deg)}
.kids-hero .hero-book .picture{background:#ffe333}
.kids-hero .hero-book figcaption{background:#fffdf2;margin:0;padding:12px;font:10px Mono,monospace;opacity:1;border-top:2px solid #202321}
.hero-book-wrap{position:relative;padding:35px 0 0}
.measure-orbit{position:absolute;left:-15%;right:-9%;top:7%;height:87%;border:2px dashed #20232180;border-radius:45%;transform:rotate(-22deg);z-index:-1;pointer-events:none}
.measure-orbit:before,.measure-orbit:after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #202321;background:#a4dff3;left:13%;top:6%}.measure-orbit:after{left:auto;right:15%;top:auto;bottom:6%;background:#f36958}
.kids-hero .hero-note{position:absolute;right:0;bottom:0;z-index:3;font:italic 21px/1.1 Georgia,serif;max-width:165px;background:#f4a2be;padding:18px 20px;border:2px solid #202321;transform:rotate(-7deg);box-shadow:5px 5px 0 #202321}
.hero-count{display:flex;gap:7px;align-items:center;margin-top:32px;max-width:360px}
.hero-count span{display:grid;place-items:center;width:38px;height:38px;border:2px solid #202321;background:#fffdf2;font:20px Display,Arial;border-radius:50%;flex-shrink:0}
.hero-count i{height:2px;background:#202321;flex:1}.hero-count span:nth-of-type(2){background:#a4dff3}.hero-count span:nth-of-type(3){background:#f36958}
.ruler{position:relative;height:70px;background:repeating-linear-gradient(to right,#202321 0 1px,transparent 1px 22px);background-size:auto 24px;background-repeat:repeat-x;border-top:0;border-bottom:2px solid #202321;overflow:hidden}
.ruler:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to right,#202321 0 2px,transparent 2px 110px);background-size:auto 40px;background-repeat:repeat-x}
.ruler:after{content:'MEASURE  /  COMPARE  /  DISCOVER';position:absolute;left:5vw;bottom:8px;font:9px Mono,monospace;letter-spacing:.25em}
body[data-story="kidzmeter"] h2{font-family:Display,Arial;font-size:clamp(45px,6vw,88px);letter-spacing:-.045em;line-height:.98}
body[data-story="kidzmeter"] .section{padding-block:110px}
body[data-story="kidzmeter"] .eyebrow{font-size:10px;letter-spacing:.1em}
body[data-story="kidzmeter"] .intro{gap:8vw}
.scale-words{position:relative;align-items:end;gap:20px;margin:75px 0 0;padding-bottom:38px;overflow:visible}
.scale-words:after{content:'';height:18px;position:absolute;left:0;right:0;bottom:-18px;background:repeating-linear-gradient(to right,#202321 0 1px,transparent 1px 20px)}
.scale-words span{position:relative;transform-origin:left bottom;transform:scale(calc(1 + (var(--section-progress,.5) - .5)*var(--size-grow,.1)))}
.scale-words span:nth-child(1){font-size:28px;--size-grow:.1}.scale-words span:nth-child(2){font-size:54px;--size-grow:.18}.scale-words span:nth-child(3){font-size:clamp(58px,7vw,100px);--size-grow:.28}
body[data-story="kidzmeter"] #participation{border-block:2px solid #202321;position:relative;overflow:hidden}
body[data-story="kidzmeter"] #participation:before{content:'YOU';position:absolute;right:-.05em;top:0;font:30vw/1 Display,Arial;letter-spacing:-.07em;color:#20232108;pointer-events:none;transform:translateY(calc(var(--section-progress,.5)*100px))}
.welcome-grid{position:relative;grid-template-columns:1fr .8fr;gap:8vw}.welcome-grid>figure{transform:rotate(-3deg) translateY(calc((var(--section-progress,.5) - .5)*-60px));box-shadow:14px 14px 0 #e3a652}
body[data-story="kidzmeter"] .steps{gap:18px}.steps article{position:relative;min-width:0;border-top:0}.steps strong{display:grid;place-items:center;width:55px;height:55px;border:2px solid #202321;border-radius:50%;font-size:34px;background:#ffe333;transform:rotate(-8deg)}.steps article:nth-child(2) strong{background:#f4a2be;transform:rotate(6deg)}.steps article:nth-child(3) strong{background:#d5e793;transform:rotate(-5deg)}.steps h3{font-size:21px;margin-top:18px}.steps p{font-size:15px;line-height:1.5;margin-top:12px}
body[data-story="kidzmeter"] #editorial{position:relative;padding-bottom:130px}
.book-spreads{gap:65px 55px;max-width:1100px;padding:25px 14px 25px 0;align-items:start}
.book-spreads figure{position:relative;border:2px solid #202321;padding:13px;background:#fff;box-shadow:9px 9px 0 #202321;transform:rotate(calc(-3deg + var(--section-progress,.5)*4deg)) translateY(calc((var(--section-progress,.5) - .5)*-35px));transform-origin:center bottom}
.book-spreads figure:nth-child(even){margin-top:90px;transform:rotate(calc(4deg - var(--section-progress,.5)*4deg)) translateY(calc((var(--section-progress,.5) - .5)*60px))}
.book-spreads figure:before{content:attr(data-book-tab);position:absolute;left:18px;top:-26px;font:10px/1 Mono,monospace;padding:8px 13px;background:#f36958;border:2px solid #202321;border-bottom:0;z-index:1}
.book-spreads figure:nth-child(2):before{background:#a4dff3}.book-spreads figure:nth-child(3):before{background:#d5e793}.book-spreads figure:nth-child(4):before{background:#f4a2be}
.book-spreads figcaption{font-size:11px;line-height:1.5}
body[data-story="kidzmeter"] #band{position:relative;border-block:2px solid #202321;overflow:hidden}
body[data-story="kidzmeter"] #band:before{content:'';position:absolute;top:0;left:0;right:0;height:20px;background:repeating-linear-gradient(to right,#202321 0 1px,transparent 1px 20px);transform:scaleX(var(--section-progress,.5));transform-origin:left}
.band-scroll{position:relative;border:2px solid #202321;padding:30px 24px 22px;margin-top:30px;scrollbar-color:#202321 #e8efb5;scrollbar-width:thin;overscroll-behavior-x:contain;scroll-behavior:auto;box-shadow:10px 10px 0 #202321}
.band-scroll .inner{width:max-content;gap:36px;align-items:center}.band-scroll figure{width:1050px;flex:none}.band-scroll img{width:100%;height:auto;max-height:none}.band-scroll figcaption{font:10px Mono,monospace;margin-top:22px;opacity:1}
.band-control{display:none;margin:32px 0 0;border:2px solid #202321;background:#fffdf2;padding:20px 24px}.kids-ready .band-control{display:block}
.band-control-head{display:flex;justify-content:space-between;align-items:center;gap:20px;font:11px Mono,monospace}.band-control-head output{font-size:10px;text-align:right}
.band-control input{width:100%;display:block;margin:18px 0;height:40px;accent-color:#df5143;cursor:ew-resize}
.band-shortcuts{display:flex;gap:8px;justify-content:space-between}.band-shortcuts button{border:2px solid #202321;background:#fffdf2;padding:11px 15px;cursor:pointer;font:10px Mono,monospace}.band-shortcuts button[aria-pressed="true"]{background:#ffe333;box-shadow:3px 3px 0 #202321;transform:translate(-2px,-2px)}
.band-control-note{font:10px/1.5 Mono,monospace;margin:17px 0 0}
body[data-story="kidzmeter"] #language .intro{margin-bottom:0}.dots{gap:18px;margin-top:35px}.dots i{width:55px;height:55px;box-shadow:4px 4px 0 #202321;transform:translateY(calc((var(--section-progress,.5) - .5)*var(--dot-lift,0px)))}.dots i:nth-child(2){--dot-lift:50px}.dots i:nth-child(3){--dot-lift:-30px}.dots i:nth-child(4){--dot-lift:30px}.dots i:nth-child(5){--dot-lift:-50px}
body[data-story="kidzmeter"] #outcome{border-top:2px solid #202321;position:relative;overflow:hidden}.kids-finish{position:relative;z-index:1;font-size:clamp(62px,9vw,130px)!important;max-width:1100px;transform:rotate(calc((var(--section-progress,.5) - .5)*-3deg))}
body[data-story="kidzmeter"] #outcome:after{content:'↗';position:absolute;right:3vw;bottom:-.23em;font:clamp(160px,38vw,540px)/1 Georgia,serif;color:#2023210c;pointer-events:none}
@media(max-width:1000px){.kids-hero .wrap{min-height:560px;gap:5vw}.kids-hero p{font-size:18px}.kids-hero .hero-note{font-size:18px;right:-5px;max-width:145px;padding:14px}.scale-words{gap:12px}.scale-words span:nth-child(2){font-size:44px}.scale-words span:nth-child(3){font-size:7vw}.welcome-grid{gap:5vw}.steps h3{font-size:18px}.steps p{font-size:14px}}
@media(max-width:760px){.kids-hero{padding:30px 0 45px}.kids-hero .wrap{grid-template-columns:1fr;gap:25px;min-height:0}.kids-hero:after{width:18px}.kids-hero .eyebrow{font-size:8px;max-width:260px}.kids-hero .kids-logo{width:90%;margin:25px 0;max-width:430px;transform:rotate(-2deg)}.kids-hero p{font-size:18px;max-width:300px}.hero-count{max-width:280px;margin-top:25px}.hero-count span{width:32px;height:32px;font-size:17px}.hero-book-wrap{padding:20px 25px 0}.kids-hero .hero-book{width:72%;max-width:270px;margin:5px auto 30px;transform:rotate(5deg);box-shadow:9px 9px 0 #202321}.kids-hero .hero-book figcaption{font-size:8px;padding:9px}.kids-hero .hero-note{right:4px;bottom:0;max-width:130px;font-size:17px;padding:12px}.measure-orbit{left:2%;right:2%;top:9%;height:80%}.ruler{height:60px}.ruler:after{font-size:8px;letter-spacing:.15em}body[data-story="kidzmeter"] .section{padding-block:72px}body[data-story="kidzmeter"] h2{font-size:47px}body[data-story="kidzmeter"] .intro{gap:28px}.scale-words{gap:16px;margin-top:40px;flex-wrap:wrap;padding-bottom:25px}.scale-words span:nth-child(1){font-size:24px}.scale-words span:nth-child(2){font-size:39px}.scale-words span:nth-child(3){font-size:16vw}.welcome-grid{grid-template-columns:1fr;gap:40px}.welcome-grid>figure{transform:none;max-width:340px;width:92%;margin-right:auto}.steps{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}.steps strong{width:44px;height:44px;font-size:27px}.steps h3{font-size:16px}.steps p{font-size:13px}.book-spreads{grid-template-columns:1fr;gap:46px;padding:20px 9px 20px 0}.book-spreads figure:nth-child(n){margin-top:0;transform:none;box-shadow:6px 6px 0 #202321}.book-spreads figure:nth-child(odd){transform:rotate(-1deg)}.book-spreads figure:nth-child(even){transform:rotate(1deg)}.book-spreads figure:before{font-size:9px}.book-spreads figcaption{font-size:10px}body[data-story="kidzmeter"] #editorial{padding-bottom:80px}.band-scroll{padding:20px 16px;box-shadow:6px 6px 0 #202321}.band-scroll figure{width:850px}.band-scroll .inner{width:max-content;gap:30px}.band-scroll figcaption{font-size:9px}.band-control{padding:16px;margin-top:25px}.band-control-head{align-items:start;font-size:10px;gap:15px}.band-control-head output{font-size:9px;max-width:125px}.band-shortcuts{gap:6px}.band-shortcuts button{font-size:8px;padding:10px 7px;flex:1}.band-control-note{font-size:9px}.dots{gap:12px}.dots i{width:40px;height:40px;box-shadow:3px 3px 0 #202321}.kids-finish{font-size:16vw!important;transform:none}}
:is(.reduce-motion,.experience-reduced) .kids-hero .kids-logo,:is(.reduce-motion,.experience-reduced) .kids-hero .hero-book,:is(.reduce-motion,.experience-reduced) .scale-words span,:is(.reduce-motion,.experience-reduced) .welcome-grid>figure,:is(.reduce-motion,.experience-reduced) .book-spreads figure,:is(.reduce-motion,.experience-reduced) .dots i,:is(.reduce-motion,.experience-reduced) .kids-finish,:is(.reduce-motion,.experience-reduced) body[data-story="kidzmeter"] #participation:before,:is(.reduce-motion,.experience-reduced) body[data-story="kidzmeter"] #band:before{transform:none!important}
@media(prefers-reduced-motion:reduce){html:not(.motion-user-on) .kids-hero .kids-logo,html:not(.motion-user-on) .kids-hero .hero-book,html:not(.motion-user-on) .scale-words span,html:not(.motion-user-on) .welcome-grid>figure,html:not(.motion-user-on) .book-spreads figure,html:not(.motion-user-on) .dots i,html:not(.motion-user-on) .kids-finish,html:not(.motion-user-on) body[data-story="kidzmeter"] #participation:before,html:not(.motion-user-on) body[data-story="kidzmeter"] #band:before{transform:none!important}}

/* One uninterrupted original artboard; only the viewport moves. */
.band-scroll{--band-height:210px;padding:20px 0 14px;touch-action:pan-y;cursor:grab;user-select:none;overflow-x:auto;max-width:100%}
.band-scroll.is-dragging{cursor:grabbing}
.band-scroll .inner{display:block;width:max-content;gap:0}
.band-scroll .band-complete{display:block;width:calc(var(--band-height)*82.4999);height:var(--band-height);max-width:none;object-fit:fill;pointer-events:none}
.band-source-caption{font:10px/1.7 Mono,monospace;margin:25px 0 0;max-width:900px}
.band-source-caption a{display:inline-block;margin-left:14px}
@media(max-width:760px){.band-scroll{--band-height:165px;padding:16px 0 12px}.band-source-caption{font-size:9px;margin-top:22px}.band-source-caption a{display:block;margin:8px 0 0}.band-control-head{flex-wrap:wrap}.band-control-head output{max-width:none;text-align:left}.band-shortcuts button{min-height:42px}}