@font-face{font-family:Archivo;font-style:normal;font-weight:200 700;font-display:swap;src:url('assets/archivo-var.woff2') format('woff2')}
@font-face{font-family:Liter;src:url('assets/Liter-Regular.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}body{margin:0;background:#f1ead8;font-family:Liter,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:5px}.film{--bg:#eee7d3;--fg:#22251f;--ink:#22251f;--paper:#fff9e9;--accent:#d76336;--hair:#22251f35;background:var(--bg);color:var(--fg);height:100dvh;min-height:580px;display:flex;flex-direction:column;overflow:hidden;transition:background-color .6s,color .4s}.film[data-theme=orange]{--bg:#d8663d;--fg:#231f1c;--accent:#d8663d;--hair:#231f1c45}.film[data-theme=dark]{--bg:#222923;--fg:#f3eddc;--hair:#f3eddc40}.film[data-theme=green]{--bg:#a8b6a1;--fg:#222923;--hair:#22292340}.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 4.6vw;padding:23px 0 19px;border-bottom:1px solid var(--hair);flex-shrink:0}.wordmark{font:400 36px Archivo,sans-serif;letter-spacing:-.01em;text-decoration:none;color:var(--fg);white-space:nowrap}.wordmark b{font-weight:700;text-decoration:underline solid #ae3505 3px;text-underline-offset:5px}.film[data-scene="2"] .wordmark b,.film[data-scene="3"] .wordmark b,.film[data-scene="6"] .wordmark b{text-decoration-color:#ff8000}.masthead>span{font-size:10px;letter-spacing:2px}.masthead button{border:0;background:transparent;color:inherit;font-size:12px}#story{flex:1;min-height:0;outline:none}.scene{display:grid;grid-template-columns:44% 56%;align-items:center;height:100%;padding:2vh 3.5vw 0 5.5vw}.story-copy{position:relative;z-index:2;max-width:570px}.eyebrow{font-size:11px;letter-spacing:1.5px;margin:0 0 24px;font-weight:700}.story-copy h1{font-size:clamp(44px,5.8vw,91px);line-height:.99;letter-spacing:-.045em;margin:0 0 27px;font-weight:900;-webkit-text-stroke:.018em currentColor;paint-order:stroke fill}.narration{font-size:clamp(17px,1.65vw,25px);line-height:1.48;max-width:470px;margin:0;opacity:.85}.art-wrap{min-width:0;align-self:center}.story-art{display:block;width:100%;max-height:calc(100dvh - 240px);overflow:visible}.story-art text{font-family:Liter,Arial,sans-serif}.story-art .tiny{font-size:13px;letter-spacing:1.1px;font-weight:700}.story-art .label{font-size:19px;font-weight:600}.story-art .bold{font-size:25px;font-weight:800;letter-spacing:-.5px}.story-art .ink{fill:var(--ink)}.story-art .paper{fill:var(--paper)}.art-caption{font-size:12px;line-height:1.5;opacity:.7;text-align:center;max-width:530px;margin:0 auto 10px}.transport{margin:0 4.6vw;padding:15px 0 17px;border-top:1px solid var(--hair);flex-shrink:0}.transport-main{display:flex;align-items:center;gap:22px}.play{border:0;background:var(--fg);color:var(--bg);padding:12px 19px;border-radius:2px;min-width:155px;font-size:15px}.play span{font-size:12px;margin-left:12px}.counter{font-size:12px;letter-spacing:.7px}.skip{margin-left:auto;display:flex;gap:8px}.skip button{background:transparent;color:var(--fg);border:1px solid var(--hair);width:43px;height:39px;font-size:20px}.skip button:disabled{opacity:.25;cursor:default}.chapters{display:flex;gap:7px;margin:16px 0 9px}.chapter{padding:8px 0;border:0;flex:1;background:transparent;position:relative;height:19px}.chapter:before{content:'';position:absolute;left:0;right:0;top:8px;height:3px;background:var(--hair)}.chapter-fill{display:block;height:3px;background:var(--fg);transform:scaleX(0);transform-origin:left;position:relative}.chapter.active:after{content:'';position:absolute;top:5px;width:3px;height:9px;left:0;background:var(--fg)}.transport-bottom{display:flex;justify-content:space-between;gap:16px;font-size:10px;opacity:.75}.transport-bottom a{color:inherit;text-decoration:none}.story-cta{display:inline-block;margin-top:22px;font-size:15px;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:7px}dialog{width:min(690px,calc(100vw - 24px));max-height:calc(100dvh - 30px);overflow:auto;border:0;padding:40px;background:#f3eddb;color:#263027;font:17px/1.55 Liter,Arial,sans-serif}dialog::backdrop{background:#171d18b5;backdrop-filter:blur(6px)}dialog h2{font-size:38px;line-height:1.1;letter-spacing:-1.5px;margin:12px 0 25px}dialog h3{font-size:17px;margin:24px 0 8px}dialog p{margin:0 0 14px}dialog .eyebrow{margin-right:20px}#close-about{float:right;background:transparent;border:0;font-size:28px}.local-note{font-size:12px;opacity:.7}.demo-link{display:block;background:#27382d;color:#f5f0e4;padding:13px 16px;text-decoration:none;font-size:15px;margin-top:25px}.reference-link{display:block;color:inherit;font-size:12px;margin-top:17px}
/* Original cut-paper motion. JavaScript scrubs these animations from one shared clock. */
.film{--ink:#151a23;--paper:#fff7e6;--card-yellow:#ffdc45;--card-pink:#f5a5b4;--card-teal:#76cfc2;--cut-disc:#f49b9c;--cut-ribbon:#2544b8;--cut-chip:#111c2b;transition:background-color .61s,color .366s}
.film[data-scene="0"]{--bg:#f3ca37;--fg:#18202b;--accent:#e34730;--hair:#18202b55}
.film[data-scene="1"]{--bg:#ef6d53;--fg:#161c29;--accent:#2244ad;--hair:#161c2955;--cut-disc:#f9d548;--cut-ribbon:#eab0c7;--cut-chip:#2346b8}
.film[data-scene="2"]{--bg:#2545b0;--fg:#fff6dc;--accent:#ffda43;--hair:#fff6dc55;--cut-disc:#163387;--cut-ribbon:#137f88;--cut-chip:#f49fb4}
.film[data-scene="3"]{--bg:#087b80;--fg:#fff6dc;--accent:#ffdc45;--hair:#fff6dc55;--cut-disc:#096c70;--cut-ribbon:#135ca3;--cut-chip:#ef8062}
.film[data-scene="4"]{--bg:#f2a1b4;--fg:#171e2c;--accent:#ffc936;--hair:#171e2c55;--cut-disc:#ef7659;--cut-ribbon:#3246a1;--cut-chip:#117b7d}
.film[data-scene="5"]{--bg:#f1cb3b;--fg:#171e2c;--accent:#df4c32;--hair:#171e2c55;--cut-disc:#f1949b;--cut-ribbon:#239698;--cut-chip:#2544b0}
.film[data-scene="6"]{--bg:#283fa0;--fg:#fff6dc;--accent:#ef7154;--hair:#fff6dc55;--cut-disc:#0c827d;--cut-ribbon:#f1c938;--cut-chip:#f4a2b7}
.narration{opacity:1}.art-caption{opacity:.9}.film[data-case="mara"][data-scene="3"] .story-art>text{fill:var(--fg)}
.scene{position:relative;isolation:isolate}.scene:after{content:'';pointer-events:none;position:absolute;inset:0;z-index:8;background:var(--accent);transform-origin:right;animation:colour-wipe .65s cubic-bezier(.65,0,.25,1) both}
.story-copy h1{animation:title-cut .8s .15s cubic-bezier(.2,.7,.2,1) both}.narration{animation:copy-enter .5s .55s both}
.colour-cutouts{opacity:.96;transform-origin:380px 280px;animation:cutout-drift 12s ease-in-out infinite}.cut-disc{transform-box:fill-box;transform-origin:center;animation:disc-roll 1.25s steps(12) both}.cut-ribbon{animation:ribbon-slide 1.4s steps(14) both}.cut-chip{transform-box:fill-box;transform-origin:center;animation:chip-turn 5s ease-in-out infinite}
.hero-paper{animation:paper-delivery 2s steps(18) both}.float-a{animation:order-arrival 1.2s steps(12) both}.float-b{animation:message-arrival 1.8s steps(16) both}.product-paper{animation:product-arrival 2.2s steps(18) both}.traveller{animation:traveller 4s steps(16) infinite}.clock-hand{transform-box:fill-box;transform-origin:bottom left;animation:clock-turn 8s steps(12) infinite}
.tilted-sheet{animation:certificate-arrive 1.15s steps(12) both}.blank-lens{transform-box:fill-box;transform-origin:center;animation:inspect-signature 2.2s steps(18) both}.hold-tag{animation:hold-stamp 3s steps(18) both}
.source-sheet{animation:certificate-arrive 1.2s steps(12) both}.scan{animation:scan-page 3s .9s steps(30) infinite}.field{animation:field-arrive .7s 1.4s steps(8) both}.field-b{animation-delay:2.2s}.field-c{animation-delay:3s}.source-thread{stroke-dasharray:700;stroke-dashoffset:700;animation:connect 2s 1s linear both}
.connect-thread{stroke-dasharray:2000;stroke-dashoffset:2000;animation:connect 4s .7s linear both}.node{animation:node-in .7s steps(8) both}.node-b{animation-delay:1.3s}.node-c{animation-delay:2s}.node-d{animation-delay:2.8s}.node-e{animation-delay:3.7s}.record-traveller{animation:follow-records 7s .8s linear infinite}
.question{animation:question-in 1s steps(12) both}.tool-strip{animation:certificate-arrive 1.3s steps(12) both}.check-row{animation:field-arrive .5s 1.7s steps(6) both}.check-row-b{animation-delay:2.5s}.check-row-c{animation-delay:3.3s}.model-orb{animation:node-in 1s 4s steps(12) both}.draw-line{stroke-dasharray:650;stroke-dashoffset:650;animation:connect 2.8s 1.4s linear both}
.correction{animation:paper-handover 2.4s steps(18) both}.signature-ink{stroke-dasharray:220;stroke-dashoffset:220;animation:connect 1s .8s linear both}.ada{animation:node-in 1s 1.2s steps(10) both}.decision-options{animation:node-in .8s 2.8s steps(10) both}.decision-thread{stroke-dasharray:120;stroke-dashoffset:120;animation:connect .9s 2.2s linear both}.final-paper{animation:record-filed 2s steps(18) both}
@keyframes colour-wipe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes title-cut{from{opacity:0;transform:translateX(-35px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes copy-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes disc-roll{from{transform:translate(250px,90px) rotate(70deg) scale(.4)}to{transform:none}}
@keyframes ribbon-slide{from{transform:translate(-500px,240px)}to{transform:none}}
@keyframes chip-turn{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(14deg)}}
@keyframes cutout-drift{0%,100%{transform:translate(-4px,2px) rotate(-.6deg)}50%{transform:translate(5px,-3px) rotate(.7deg)}}
@keyframes paper-delivery{0%{opacity:0;transform:translate(270px,-230px) rotate(25deg)}55%{opacity:1;transform:translate(-18px,20px) rotate(-5deg)}78%{transform:translate(7px,-8px) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes order-arrival{from{opacity:0;transform:translate(-230px,-50px) rotate(-15deg)}to{opacity:1;transform:none}}
@keyframes message-arrival{0%,30%{opacity:0;transform:translate(220px,120px) rotate(15deg)}100%{opacity:1;transform:none}}
@keyframes product-arrival{0%,40%{opacity:0;transform:translate(-40px,200px)}100%{opacity:1;transform:none}}
@keyframes traveller{50%{transform:translate(45px,-15px) rotate(5deg)}}
@keyframes clock-turn{to{transform:rotate(360deg)}}
@keyframes certificate-arrive{from{opacity:0;transform:translate(0,150px) rotate(-9deg)}to{opacity:1;transform:none}}
@keyframes inspect-signature{0%,25%{opacity:0;transform:translate(60px,-70px) scale(.35)}65%{opacity:1;transform:scale(1.07) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes hold-stamp{0%,60%{opacity:0;transform:translateY(-85px) scale(1.5)}78%{opacity:1;transform:translateY(8px) scale(.95)}100%{opacity:1;transform:none}}
@keyframes scan-page{0%,100%{transform:translateY(-65px);opacity:.8}55%{transform:translateY(125px);opacity:1}}
@keyframes field-arrive{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes connect{to{stroke-dashoffset:0}}
@keyframes node-in{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:none}}
@keyframes follow-records{0%{transform:translate(0,0)}25%{transform:translate(397px,0)}40%{transform:translate(397px,157px)}66%{transform:translate(-2px,157px)}79%{transform:translate(-2px,313px)}100%{transform:translate(393px,313px)}}
@keyframes question-in{from{opacity:0;transform:translate(-180px,-15px) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes paper-handover{0%{opacity:0;transform:translate(-150px,80px) rotate(-12deg)}65%{opacity:1;transform:translate(20px,0) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes record-filed{0%{opacity:0;transform:translate(0,220px) rotate(12deg)}70%{opacity:1;transform:translate(0,-12px) rotate(-2deg)}100%{opacity:1;transform:none}}
@media(min-width:1000px) and (max-height:750px){.story-copy h1{font-size:clamp(48px,5.4vw,75px)}.eyebrow{margin-bottom:18px}.story-copy h1{margin-bottom:20px}.narration{font-size:18px}.masthead{padding-top:17px;padding-bottom:14px}.transport{padding-top:10px;padding-bottom:10px}.story-cta{margin-top:15px}.chapters{margin-top:10px}}
@media(max-width:760px){.film{height:auto;min-height:100dvh;overflow:visible}.masthead{margin:0 21px;padding:19px 0 15px;gap:10px}.wordmark{font-size:32px}.masthead>span{display:none}.masthead button{font-size:10px}.scene{display:flex;flex-direction:column;align-items:stretch;padding:30px 26px 10px}.eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:19px}.story-copy h1{font-size:clamp(46px,12vw,74px);line-height:1.01;margin-bottom:20px}.narration{font-size:18px;max-width:540px}.art-wrap{width:100%;margin-top:18px}.story-art{max-height:350px;min-height:200px}.art-caption{font-size:11px;max-width:310px;margin-bottom:14px}.transport{margin:0 21px;padding:14px 0 17px}.transport-main{gap:12px}.play{font-size:13px;min-width:137px;padding:11px 12px}.counter{font-size:10px}.skip{gap:5px}.skip button{width:32px;height:34px}.transport-bottom{font-size:9px;gap:14px}.transport-bottom>span{max-width:190px}.story-cta{font-size:14px}.chapters{gap:5px}.story-copy{max-width:none}dialog{padding:27px}dialog h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.story-art .draw-line,.story-art .connect-thread,.story-art .source-thread,.story-art .decision-thread,.story-art .signature-ink{stroke-dashoffset:0!important}.film .story-art *{opacity:1!important}}
@media print{.film{height:auto;min-height:0}.masthead,.transport{display:none}.scene{height:auto;padding:30px}.story-art{max-height:none}dialog{display:none}}

@media(max-width:760px){.film{height:100dvh;min-height:570px;overflow:hidden}#story{overflow:auto;overscroll-behavior:contain}.scene{height:auto}.transport{flex-shrink:0}.art-wrap{align-self:stretch}}

/* Opening product transformation, completed within the 6.5-second chapter. */
.fungus-cluster{transform-origin:380px 365px;animation:fungus-to-powder 6.5s linear both}.grinder{transform-origin:380px 355px;animation:grinder-appear 6.5s linear both}.grinder-teeth{animation:grind-teeth .18s steps(2) infinite}.powder-speck{animation:powder-to-capsule 6.5s linear both}.capsule-motion{transform-origin:380px 220px;animation:capsule-to-jar 6.5s linear both}.capsule-left{animation:capsule-close-left 6.5s linear both}.capsule-right{animation:capsule-close-right 6.5s linear both}.jar-back,.jar-front{transform-origin:380px 470px;animation:jar-appear 6.5s linear both}.jar-lid{animation:jar-close 6.5s linear both}.product-phase{animation:phase-jar 6.5s steps(1) both}.phase-fungus{animation-name:phase-fungus}.phase-powder{animation-name:phase-powder}.phase-capsule{animation-name:phase-capsule}
@keyframes fungus-to-powder{0%{opacity:0;transform:scale(.3) translateY(35px)}10%,20%{opacity:1;transform:none}25%{transform:translate(6px,20px) scale(.85)}29%{opacity:1;transform:translate(-4px,85px) scale(.55)}35%,100%{opacity:0;transform:translateY(40px) scale(.05)}}
@keyframes grinder-appear{0%,18%{opacity:0;transform:translateY(40px)}23%,33%{opacity:1;transform:none}39%,100%{opacity:0;transform:translateY(35px)}}
@keyframes grind-teeth{to{transform:translateX(9px)}}
@keyframes powder-to-capsule{0%,25%{opacity:0;transform:translate(0,55px) scale(.2)}32%{opacity:1;transform:translate(var(--dust-x),var(--dust-y)) scale(1)}44%{opacity:1;transform:translate(var(--float-x),var(--float-y))}55%{opacity:1;transform:translate(0,-122px) scale(.25)}60%,100%{opacity:0;transform:translate(0,-122px) scale(0)}}
@keyframes capsule-to-jar{0%,43%{opacity:0;transform:scale(.75)}48%,61%{opacity:1;transform:none}69%{opacity:1;transform:translateY(20px) rotate(25deg) scale(.85)}80%{opacity:1;transform:translateY(145px) rotate(85deg) scale(.65)}84%,100%{opacity:0;transform:translateY(150px) rotate(85deg) scale(.65)}}
@keyframes capsule-close-left{0%,49%{transform:translateX(-55px)}59%,100%{transform:none}}
@keyframes capsule-close-right{0%,49%{transform:translateX(55px)}59%,100%{transform:none}}
@keyframes jar-appear{0%,59%{opacity:0;transform:translateY(75px) scale(.85)}68%,100%{opacity:1;transform:none}}
@keyframes jar-close{0%,80%{opacity:0;transform:translate(55px,-90px) rotate(12deg)}84%{opacity:1;transform:translate(30px,-55px) rotate(8deg)}92%{opacity:1;transform:translateY(4px)}96%,100%{opacity:1;transform:none}}
@keyframes phase-fungus{0%,24%{opacity:1}25%,100%{opacity:0}}
@keyframes phase-powder{0%,24%{opacity:0}25%,46%{opacity:1}47%,100%{opacity:0}}
@keyframes phase-capsule{0%,46%{opacity:0}47%,74%{opacity:1}75%,100%{opacity:0}}
@keyframes phase-jar{0%,74%{opacity:0}75%,100%{opacity:1}}
.speck-0{--dust-x:-120px;--dust-y:-70px;--float-x:-78px;--float-y:-125px}
.speck-1{--dust-x:-49px;--dust-y:-23px;--float-x:-31px;--float-y:-78px}
.speck-2{--dust-x:22px;--dust-y:24px;--float-x:14px;--float-y:-31px}
.speck-3{--dust-x:93px;--dust-y:71px;--float-x:60px;--float-y:16px}
.speck-4{--dust-x:-77px;--dust-y:-53px;--float-x:-50px;--float-y:-108px}
.speck-5{--dust-x:-6px;--dust-y:-6px;--float-x:-3px;--float-y:-61px}
.speck-6{--dust-x:65px;--dust-y:41px;--float-x:42px;--float-y:-14px}
.speck-7{--dust-x:-105px;--dust-y:88px;--float-x:-68px;--float-y:33px}
.speck-8{--dust-x:-34px;--dust-y:-36px;--float-x:-22px;--float-y:-91px}
.speck-9{--dust-x:37px;--dust-y:11px;--float-x:24px;--float-y:-44px}
.speck-10{--dust-x:108px;--dust-y:58px;--float-x:70px;--float-y:3px}
.speck-11{--dust-x:-62px;--dust-y:-66px;--float-x:-40px;--float-y:-121px}
.speck-12{--dust-x:9px;--dust-y:-19px;--float-x:5px;--float-y:-74px}
.speck-13{--dust-x:80px;--dust-y:28px;--float-x:52px;--float-y:-27px}
.speck-14{--dust-x:-90px;--dust-y:75px;--float-x:-58px;--float-y:20px}
.speck-15{--dust-x:-19px;--dust-y:-49px;--float-x:-12px;--float-y:-104px}
.speck-16{--dust-x:52px;--dust-y:-2px;--float-x:33px;--float-y:-57px}
.speck-17{--dust-x:-118px;--dust-y:45px;--float-x:-76px;--float-y:-10px}
.speck-18{--dust-x:-47px;--dust-y:92px;--float-x:-30px;--float-y:37px}
.speck-19{--dust-x:24px;--dust-y:-32px;--float-x:15px;--float-y:-87px}
.speck-20{--dust-x:95px;--dust-y:15px;--float-x:61px;--float-y:-40px}
.speck-21{--dust-x:-75px;--dust-y:62px;--float-x:-48px;--float-y:7px}
.speck-22{--dust-x:-4px;--dust-y:-62px;--float-x:-2px;--float-y:-117px}
.speck-23{--dust-x:67px;--dust-y:-15px;--float-x:43px;--float-y:-70px}
.speck-24{--dust-x:-103px;--dust-y:32px;--float-x:-66px;--float-y:-23px}
.speck-25{--dust-x:-32px;--dust-y:79px;--float-x:-20px;--float-y:24px}
.speck-26{--dust-x:39px;--dust-y:-45px;--float-x:25px;--float-y:-100px}
.speck-27{--dust-x:110px;--dust-y:2px;--float-x:71px;--float-y:-53px}
.speck-28{--dust-x:-60px;--dust-y:49px;--float-x:-39px;--float-y:-6px}
.speck-29{--dust-x:11px;--dust-y:96px;--float-x:7px;--float-y:41px}
@media(prefers-reduced-motion:reduce){.film .story-art .fungus-cluster,.film .story-art .grinder,.film .story-art .powder-speck,.film .story-art .capsule-motion,.film .story-art .phase-fungus,.film .story-art .phase-powder,.film .story-art .phase-capsule{opacity:0!important}.jar-back,.jar-front,.jar-lid{transform:none!important}}

/* Hand-inked title-sequence palette and independently articulated paper props. */
.film{--ink:#17180f;--paper:#f2e9cd;--ochre:#d4b340;--backplate:#dfcb74;--card-yellow:#d4b340;--card-pink:#bba082;--card-teal:#b7c396}
.film[data-scene="0"]{--bg:#485b26;--fg:#f4edda;--accent:#b99735;--hair:#f4edda44;--backplate:#829044}
.film[data-scene="1"]{--bg:#992719;--fg:#f4edda;--accent:#bb772c;--hair:#f4edda44;--backplate:#b64625}
.film[data-scene="2"]{--bg:#696e29;--fg:#fbf3db;--accent:#a69638;--hair:#fbf3db44;--backplate:#93964c}
.film[data-scene="3"]{--bg:#65224e;--fg:#f6ecd8;--accent:#a35b65;--hair:#f6ecd844;--backplate:#863662}
.film[data-scene="4"]{--bg:#ae4227;--fg:#fcf0d7;--accent:#cf7739;--hair:#fcf0d744;--backplate:#c46b38}
.film[data-scene="5"]{--bg:#4c622d;--fg:#f5eed9;--accent:#a7a348;--hair:#f5eed944;--backplate:#73864a}
.film[data-scene="6"]{--bg:#553451;--fg:#f6edda;--accent:#9a665d;--hair:#f6edda44;--backplate:#78526a}
.wordmark b,.film[data-scene="2"] .wordmark b,.film[data-scene="3"] .wordmark b,.film[data-scene="6"] .wordmark b{text-decoration-color:#e69b57}
.story-art .print-label{font-family:Liter,Arial,sans-serif;letter-spacing:1.05px;font-weight:600}
.story-art .tiny{fill:var(--fg)}
.story-art .jar-front .tiny{fill:var(--ink)}
.story-art .cut-chip{transform-box:fill-box;transform-origin:center}
.hand-breathe{transform-origin:10px 68px;animation:hand-breathe 6s ease-in-out infinite}
.pen-gesture{transform-origin:89px -80px;animation:pen-gesture 7s ease-in-out infinite}
.person-sway{transform-origin:0 180px;animation:person-sway 9s ease-in-out infinite}
.certificate-float{transform-origin:380px 300px;animation:certificate-float 8s ease-in-out infinite}
.loupe-sweep{transform-origin:410px 269px;animation:loupe-sweep 8s ease-in-out infinite}
.cabinet-rock{transform-origin:320px 490px;animation:cabinet-rock 11s ease-in-out infinite}
.reader-wheel{transform-origin:407px 325px;animation:reader-turn 8s linear infinite}
.feed-paper{animation:feed-paper 8s ease-in-out infinite}
.record-bob{animation:record-bob 7s ease-in-out infinite}.bob-two{animation-delay:-1.4s}.bob-three{animation-delay:-2.8s}.bob-four{animation-delay:-4.2s}.bob-five{animation-delay:-5.6s}
.ink-thread{stroke-dasharray:8 2;animation:thread-flow 14s linear infinite}
.thread-spool{transform-origin:386px 286px;animation:spool-rock 9s ease-in-out infinite}
.answer-slip{animation:answer-slip 7s ease-in-out infinite}
.expert-machine{transform-origin:450px 416px;animation:cabinet-rock 10s ease-in-out infinite}
.signed-sheet{transform-origin:390px 300px;animation:certificate-float 10s ease-in-out infinite}
.review-stamps{animation:record-bob 8s ease-in-out infinite}
.ledger-breathe{transform-origin:435px 397px;animation:ledger-breathe 8s ease-in-out infinite}
.clock-drift{transform-origin:398px 100px;animation:spool-rock 11s ease-in-out infinite}
.desk-lamp{transform-origin:635px 372px;animation:lamp-sway 12s ease-in-out infinite}
@keyframes hand-breathe{0%,100%{transform:rotate(-1.5deg) translateY(2px)}50%{transform:rotate(1.5deg) translateY(-2px)}}
@keyframes pen-gesture{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translate(3px,4px)}}
@keyframes person-sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.9deg)}}
@keyframes certificate-float{0%,100%{transform:translate(-3px,1px) rotate(-.8deg)}50%{transform:translate(4px,-3px) rotate(.8deg)}}
@keyframes loupe-sweep{0%,100%{transform:translate(-6px,-4px) rotate(-2deg)}50%{transform:translate(9px,5px) rotate(2deg)}}
@keyframes cabinet-rock{0%,100%{transform:rotate(-.3deg)}50%{transform:rotate(.35deg)}}
@keyframes reader-turn{to{transform:rotate(360deg)}}
@keyframes feed-paper{0%,100%{transform:translateY(-7px)}50%{transform:translateY(8px)}}
@keyframes record-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes thread-flow{to{stroke-dashoffset:-100}}
@keyframes spool-rock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes answer-slip{0%,100%{transform:translateY(-4px) rotate(-.5deg)}50%{transform:translateY(5px) rotate(.6deg)}}
@keyframes ledger-breathe{0%,100%{transform:skewY(-.5deg)}50%{transform:skewY(.5deg)}}
@keyframes lamp-sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
@media(prefers-reduced-motion:reduce){.story-art *{animation:none!important}}

/* Title-card typography: broader spacing and real medium/bold weights. */
.story-copy h1{font-family:Archivo,Arial,sans-serif;font-weight:700;letter-spacing:.012em;-webkit-text-stroke:0;line-height:1.02}
.story-art text,.story-art .print-label{font-family:Archivo,Arial,sans-serif;font-weight:600;letter-spacing:.09em}
.story-art .bold{font-weight:700;letter-spacing:.065em}
.story-art .tiny{font-weight:600;letter-spacing:.09em}
.eyebrow{font-family:Archivo,Arial,sans-serif;font-weight:600;letter-spacing:.13em}
.art-caption{font-family:Archivo,Arial,sans-serif;font-weight:500;letter-spacing:.025em}
/* The new films keep their key illustration visible on narrow screens. */
@media(max-width:760px){.film:not([data-case="mara"]) .scene{padding:22px 23px 8px}.film:not([data-case="mara"]) .story-copy h1{font-size:clamp(34px,9.4vw,47px);margin-bottom:15px}.film:not([data-case="mara"]) .eyebrow{font-size:9px;margin-bottom:13px}.film:not([data-case="mara"]) .narration{font-size:16px;line-height:1.45}.film:not([data-case="mara"]) .art-wrap{margin-top:9px}.film:not([data-case="mara"]) .story-art{max-height:255px;min-height:180px}.film:not([data-case="mara"]) .art-caption{font-size:10px;margin-bottom:7px}.film:not([data-case="mara"]) .story-cta{font-size:13px;margin-top:11px}}

/* With animation disabled, the wipe must not cover the static chapter. */
@media(prefers-reduced-motion:reduce){.scene::after{display:none}}

/* A film ends with a next step; setup opens outside the library player. */
.story-actions{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:20px;row-gap:9px}.story-actions .story-cta{font-weight:700}.story-actions a:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* Keep the longer HVAC conclusion and setup link above playback controls. */
@media(min-width:761px){.film[data-case="hvac"][data-scene="6"] .story-copy h1{font-size:clamp(42px,4.6vw,68px)}}

@media(min-width:761px) and (max-height:750px){.film[data-scene="6"] .story-copy h1{font-size:clamp(40px,4.3vw,60px);margin-bottom:16px}.film[data-scene="6"] .eyebrow{margin-bottom:14px}.film[data-scene="6"] .narration{font-size:17px}.film[data-scene="6"] .story-cta{margin-top:12px}}

/* Exit controls stay outside the scrolling scene, in the same place in every film. */
#story{overflow:auto;overscroll-behavior:contain}
.scene{height:auto;min-height:100%}
.story-controls{display:flex;align-items:center;gap:18px;flex-shrink:0}
.masthead .story-brand{font-size:28px;line-height:1.1;white-space:normal;min-width:0;max-width:60%}
.story-brand strong{display:block;font-weight:650;letter-spacing:-.03em}
.story-brand small{display:block;font:500 10px/1.45 Archivo,sans-serif;letter-spacing:.06em;margin-top:6px}
.masthead .story-brand+span{display:none}
.film[data-case="northline"] .story-brand strong{text-transform:uppercase;letter-spacing:.03em}
.film[data-case="travel"] .story-brand strong{font-style:italic}
.story-exit{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:2px solid var(--fg);border-radius:999px;background:var(--fg);color:var(--bg);font:600 13px Archivo,sans-serif;text-decoration:none;white-space:nowrap}
.story-exit:hover{filter:brightness(.85)}
.transport-bottom{align-items:center;opacity:1}
.transport-bottom>span{opacity:.75}
.transport-bottom a.story-exit{color:var(--bg)}
.is-embedded .masthead .story-exit{display:none}
@media(min-width:761px) and (max-height:900px){.film.is-embedded .story-copy h1{font-size:clamp(42px,4.4vw,68px);margin-bottom:18px}.film.is-embedded .narration{font-size:18px}.film.is-embedded .eyebrow{margin-bottom:16px}.film.is-embedded .story-art{max-height:calc(100dvh - 300px)}}
#close-about{position:sticky;top:0;min-height:44px;padding:10px 16px;border:2px solid #263027;border-radius:999px;background:#263027;color:#fff9e9;font:600 13px Archivo,sans-serif;z-index:2}
@media(max-width:760px){.masthead{display:grid;grid-template-columns:minmax(0,1fr) auto}.masthead .wordmark{font-size:23px}.story-controls{display:contents}.masthead #about{grid-column:1;text-align:left;padding:4px 0}.masthead .story-exit{grid-column:2;grid-row:1 / span 2;padding:10px 12px;font-size:12px}.is-embedded .masthead{display:flex}.is-embedded .story-controls{display:flex}.transport-bottom .story-exit{font-size:12px;padding:10px 12px}}
@media(max-width:760px){.masthead .story-brand{font-size:20px;max-width:none}.masthead .story-brand small{font-size:9px;max-width:28ch}.is-embedded .story-brand{max-width:68%}}