@font-face{font-family:Coolvetica;src:url('assets/coolvetica.otf') format('opentype');font-display:swap;font-weight:500 900}@font-face{font-family:Coolvetica;src:url('assets/coolvetica-book.otf') format('opentype');font-display:swap;font-weight:100 400}
:root{--paper:#f7f5ef;--stone:#e5e3d9;--blue:#add9ed;--coral:#ff6840;--ink:#302f2b;--muted:#696a64;--line:rgba(48,47,43,.2);--x:0px;--y:0px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--stone);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;transition:background .8s ease}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:40px;min-height:44px;padding:10px 18px;transition:background .2s,transform .2s,color .2s}button:hover{background:var(--ink);color:var(--paper)}button:active{transform:scale(.96)}button:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:5px}button:disabled{opacity:.25;cursor:default}a{color:inherit}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4,.display,.brand,.big-number{font-family:Coolvetica,Arial,sans-serif;font-weight:500}h2{font-size:clamp(48px,6.8vw,108px);line-height:.97;letter-spacing:-.045em;max-width:1050px}h3{font-size:clamp(27px,3vw,48px);line-height:1.07;letter-spacing:-.025em}p{line-height:1.5}em{font-style:normal;color:#bd4127}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}.label{font-size:13px;line-height:1.4}.muted{color:var(--muted)}.small{font-size:13px;line-height:1.5}.lead{font-size:clamp(18px,1.6vw,26px);line-height:1.4;max-width:580px}.caption{font-size:12px;line-height:1.5;color:var(--muted)}.pill{border:1px solid var(--line);border-radius:40px;padding:8px 13px;display:inline-flex;font-size:12px;align-items:center;gap:9px;width:fit-content}.dot{width:6px;height:6px;border-radius:50%;background:var(--coral);display:inline-block}.kicker{margin-bottom:24px}.rule{width:100%;height:1px;background:var(--line);margin:22px 0}.stack{display:flex;flex-direction:column;gap:22px}.row{display:flex;gap:16px;align-items:center}.spread{justify-content:space-between}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;height:100%}.two-col.wide-right{grid-template-columns:.85fr 1.15fr}.two-col.wide-left{grid-template-columns:1.3fr 1fr}.align-start{align-items:start}.full{width:100%}.accent{color:#c1462a}.white{color:var(--paper)}.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.primary:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}.light-button{background:var(--paper)}.text-button{padding:6px 0;min-height:32px;border:none;border-radius:0;background:none!important;display:flex;align-items:center;gap:14px}.text-button:hover{color:#b54125}.text-button span{font-size:21px}.chip-set{display:flex;gap:8px;flex-wrap:wrap}.chip-set button{font-size:13px;padding:9px 16px;min-height:38px}.chip-set button[aria-pressed=true],.choice[aria-pressed=true]{background:var(--ink);color:var(--paper)}
header{height:78px;position:fixed;top:0;left:0;right:0;z-index:30;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{font-size:23px;text-decoration:none;letter-spacing:-.035em;display:flex;align-items:center;gap:11px}.brand-symbol{display:flex;width:33px;position:relative}.brand-symbol i{width:22px;height:22px;border:1.5px solid currentColor;border-radius:50%;display:block}.brand-symbol i+i{margin-left:-11px;background:var(--coral);border:none;mix-blend-mode:multiply}body[data-tone=coral] .brand-symbol i+i{background:var(--ink);mix-blend-mode:normal}.header-actions{display:flex;align-items:center;gap:14px}.header-actions>button:not(.text-button){padding:0;width:38px;height:38px;min-height:38px;font-size:19px;border:none}.header-actions .text-button{font-size:13px}footer{height:70px;position:fixed;bottom:0;left:0;right:0;z-index:30;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:30px}.footer-left{display:flex;align-items:center;gap:30px;font-size:12px;flex-shrink:0}#scene-number{font-variant-numeric:tabular-nums}#notes{font-size:12px}#progress{display:flex;align-items:center;gap:4px;max-width:320px;flex:1}#progress button{border:0;border-radius:0;padding:0;min-height:22px;flex:1;position:relative}#progress button:after{content:'';height:2px;position:absolute;left:0;right:0;background:var(--ink);opacity:.15;top:10px}#progress button.current:after{background:var(--coral);height:4px;opacity:1;top:9px}#progress button.visited:after{opacity:.5}#progress button:hover{background:transparent}#progress button:hover:after{opacity:1}.nav{display:flex;gap:8px;align-items:center}.nav>button{width:42px;height:42px;min-height:42px;padding:0;font-size:21px}.nav-hint{font-size:9px;letter-spacing:.12em;margin-right:15px}.atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;transition:opacity .7s}.colour-cloud{position:absolute;filter:blur(75px);border-radius:50%;opacity:.82;transition:all 1.3s cubic-bezier(.2,.7,.2,1);transform:translate(var(--x),var(--y))}.cloud-one{width:56vw;height:55vw;max-height:800px;right:-8vw;top:-12vw;background:var(--blue)}.cloud-two{width:42vw;height:31vw;right:5vw;bottom:-8vw;background:var(--coral);opacity:.48}body[data-tone=paper]{background:var(--paper)}body[data-tone=paper] .atmosphere{opacity:.12}body[data-tone=blue]{background:var(--blue)}body[data-tone=blue] .cloud-one{background:var(--stone);right:40%;top:10%;width:50vw}body[data-tone=blue] .cloud-two{right:-25%;opacity:.25}body[data-tone=coral]{background:var(--coral)}body[data-tone=coral] .cloud-two{background:var(--paper);right:10%;bottom:-40%;opacity:.9}body[data-tone=coral] .cloud-one{right:-30%;top:-40%;opacity:.7}body[data-tone=ink]{background:var(--ink);color:var(--paper);--line:rgba(247,245,239,.25);--muted:#c8c8be}body[data-tone=ink] .atmosphere{opacity:.2}body[data-tone=ink] .cloud-one{right:-30%;top:-50%}body[data-tone=ink] em{color:var(--coral)}body[data-tone=ink] button:hover{background:var(--paper);color:var(--ink)}body[data-tone=ink] #progress button:after{background:var(--paper)}
#stage{position:fixed;inset:78px 0 70px;perspective:1400px}.scene{position:absolute;inset:0;padding:3vh 6vw 4vh;display:flex;flex-direction:column;justify-content:center;visibility:hidden;pointer-events:none;opacity:0;transform:translateY(75px) scale(.97);filter:blur(8px);transition:opacity .65s,transform .85s cubic-bezier(.19,1,.22,1),filter .65s,visibility .85s;overflow:hidden}.scene.active{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0) scale(1);filter:blur(0);z-index:2}.scene.before{transform:translateY(-85px) scale(1.035)}.scene>*{flex-shrink:0}.scene.active .reveal{animation:arrive .9s cubic-bezier(.16,1,.3,1) both}.scene.active .reveal:nth-child(2){animation-delay:.08s}.scene.active .reveal:nth-child(3){animation-delay:.16s}.scene.active .reveal:nth-child(4){animation-delay:.24s}@keyframes arrive{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}.scene .scene-content{height:100%;display:flex;flex-direction:column;justify-content:center;gap:30px}.scene .scene-content>.two-col{height:auto;flex:1;max-height:100%}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.section-top .eyebrow{color:var(--muted)}.scene-title-small{font-size:clamp(45px,5.3vw,84px)}
#drawer{padding:30px 40px 45px;border:0;border-radius:28px 0 0 28px;background:var(--paper);color:var(--ink);height:100dvh;max-height:100dvh;width:min(760px,90vw);max-width:90vw;margin:0 0 0 auto;box-shadow:-20px 0 90px #302f2b20;overflow-y:auto}#drawer::backdrop{background:#302f2b55;backdrop-filter:blur(10px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}.dialog-head button{width:42px;height:42px;padding:0}#drawer h2{font-size:52px;margin:0 0 28px;line-height:1.03}#drawer h3{font-size:27px;margin:30px 0 12px}#drawer p{font-size:16px;line-height:1.65;margin-bottom:18px}#drawer .source{border-top:1px solid var(--line);padding:20px 0}#drawer .source a{display:block;font-size:18px;font-weight:600;margin-bottom:12px;text-underline-offset:4px}#drawer .source p{font-size:14px;margin-bottom:10px}.contents-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.contents-grid button{border:0;border-bottom:1px solid var(--line);border-radius:0;text-align:left;display:flex;align-items:center;gap:18px;font-size:16px;padding:16px 0;line-height:1.3}.contents-grid button:hover{background:none;color:#b54125}.contents-grid span{font-size:10px;color:var(--muted)}.drawer-actions{display:flex;gap:12px;margin-bottom:28px}.drawer-actions button{font-size:13px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}#toast{position:fixed;bottom:90px;left:50%;transform:translate(-50%,10px);padding:14px 22px;background:var(--ink);color:var(--paper);border-radius:30px;font-size:13px;opacity:0;pointer-events:none;z-index:60;transition:.3s;max-width:90vw;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}body.motion-paused .scene{transition-duration:.01s}body.motion-paused .world-stage img{transform:none}/* Desktop presentation shell. The reading plane stays still. */
h2{font-size:clamp(48px,5.2vw,84px);line-height:1;max-width:none}h3{font-size:clamp(26px,2.2vw,36px)}.lead{font-size:clamp(18px,1.65vw,24px)}.two-col{gap:5vw}.stack{gap:22px}.kicker{margin-bottom:18px}.scene{padding:2vh 6vw 7vh}.scene .scene-content{gap:22px;min-height:0}.scene .scene-content>.two-col{height:100%}.auto-frames{position:relative}.auto-frame{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1),visibility .4s}.auto-frame.is-shown{opacity:1;visibility:visible;transform:none}[data-active]{transition:opacity .5s,color .5s,transform .7s,background .5s}.sequence-footer{position:absolute;bottom:1.5vh;left:6vw;right:6vw;display:flex;align-items:center;gap:28px;min-height:24px;color:var(--muted)}.sequence-footer>span{font-size:10px;letter-spacing:.05em;display:flex;gap:9px;align-items:center;opacity:.45;white-space:nowrap}.sequence-footer>span.is-current{opacity:1;color:var(--ink)}.sequence-footer i{display:block;width:24px;height:2px;background:var(--line);position:relative;overflow:hidden}.sequence-footer .is-current i:after{content:'';position:absolute;inset:0;background:var(--coral);transform-origin:left;transform:scaleX(var(--beat-progress,0))}.sequence-footer>b{margin-left:auto;font-size:18px;font-weight:400;opacity:.6}body[data-tone=ink] .sequence-footer>span.is-current{color:var(--paper)}body[data-tone=paper] .atmosphere{opacity:.2}.cloud-one{transition:background 1s,opacity 1s;will-change:transform}.cloud-two{transition:background 1s,opacity 1s;will-change:transform}
@media(max-height:760px){header{height:60px}footer{height:54px}#stage{inset:60px 0 54px}.scene{padding-top:2vh;padding-bottom:7vh}.stack{gap:17px}.scene .scene-content{gap:18px}.kicker{margin-bottom:14px}.lead{font-size:20px}h2{font-size:clamp(46px,5.1vw,76px)}.caption{font-size:11px}.sequence-footer{bottom:1vh}}
/* Link between the concept deck and the research deck, styled like the other header text buttons. */
a.text-button{text-decoration:none}a.text-button:hover{color:#b54125}
/* Phones show the desktop layout scaled to fit (see the viewport tag). Held upright it would be tiny, so ask people to turn the phone. */
.rotate-hint{display:none}
@media (orientation:portrait) and (pointer:coarse){
 .rotate-hint{display:flex;position:fixed;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:4vw;padding:0 10vw;background:var(--stone);color:var(--ink);text-align:center}
 .rotate-hint p{font-family:Coolvetica,Arial,sans-serif;font-size:6vw;line-height:1.1;letter-spacing:-.02em;max-width:14em}
 .rotate-phone{width:14vw;height:24vw;border-radius:3vw;border:1vw solid var(--ink);position:relative;animation:rotate-hint 2.4s ease-in-out infinite}
 .rotate-phone:after{content:'';position:absolute;left:50%;bottom:1.6vw;width:3vw;height:3vw;margin-left:-1.5vw;border-radius:50%;background:var(--coral)}
}
@keyframes rotate-hint{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}