/* chemistry labs. version 3, home page first.
   Umbrella green, one bright colour per sub-brand, one colour on screen at a time.
   Helvetica Now does all the work. Schoolbell is for the occasional handwritten line. Lowercase belongs to the logo alone.
   Objects from the web stand in for the words beside them. Flat colour, hard cut-paper shadows. */
@font-face{font-family:"HND";src:url(/fonts/HelveticaNowDisplay-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"HND";src:url(/fonts/HelveticaNowDisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"HND";src:url(/fonts/HelveticaNowDisplay-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"HND";src:url(/fonts/HelveticaNowDisplay-Black.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Schoolbell";src:url(/fonts/Schoolbell.ttf) format("truetype");font-display:swap}
:root{
  --sulphur:#f6cb0e;--redpen:#c9201b;--bengal:#c9201b;--print:"HND",Helvetica,Arial,sans-serif;--on-accent:#fdf8f0;--accent:#c9201b;--deep:#100d09;--penc:#c9201b;
  --green:#17823f;--green-deep:#0f6a31;--red:#c9201b;--logo-red:#bc1823;--sun:#f6cb0e;--pink:#ec3a90;--sky:#0b9fcc;--copper:#2036c8;--paper:#fdf8f0;--ink:#100d09;
  --text:"HND","Helvetica Neue",Helvetica,Arial,sans-serif;--hand:"Schoolbell","Bradley Hand",cursive;--typed:var(--text);--giant:var(--text);
  --rail:clamp(26px,6vw,96px);--pad:clamp(10px,calc(var(--rail) - 48px),38px);--tabs:66px;--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.7,.5,1);--bar:clamp(62px,6vw,86px);
  --cut:drop-shadow(0 12px 12px rgba(16,13,9,.3));
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;background:var(--green)}
body{font:400 clamp(1.06rem,1.25vw,1.2rem)/1.36 var(--text);color:var(--paper);background:var(--green);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@view-transition{navigation:auto}

/* type */
.big{font:900 clamp(2.1rem,min(5vw,9vh),5.1rem)/1.08 var(--text);letter-spacing:-.038em}
.lg{font:900 clamp(1.8rem,min(3.4vw,6.4vh),3.3rem)/1.04 var(--text);letter-spacing:-.033em}
.say{font:500 clamp(1.02rem,min(1.5vw,2.8vh),1.4rem)/1.26 var(--text);letter-spacing:-.012em}
.hand{font:400 clamp(1.3rem,1.9vw,1.75rem)/1.08 var(--hand)}
.typed{font:700 clamp(.82rem,1vw,.95rem)/1.2 var(--typed);text-transform:uppercase}
.mark{position:relative;display:inline-block;color:var(--ink);isolation:isolate;padding:0 .1em;margin:0 -.03em}
.mark::before{content:"";position:absolute;inset:.1em 0 .03em;background:var(--sun);z-index:-1;transform:rotate(-1.1deg);transform-origin:left}
.js .mark::before{animation:swipe .6s var(--ease) .95s backwards}
@keyframes swipe{from{transform:scaleX(0) rotate(-1.1deg)}}

/* the umbrella: a green bar with the logo, over everything, on every page */

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px 14px}

/* hero: the sentence, with its objects */
.hero{position:relative;height:100svh;min-height:520px;max-height:1000px;overflow:hidden;background:var(--green);padding:calc(var(--bar) + clamp(18px,4vh,44px)) var(--rail) 22px;display:flex;flex-direction:column;justify-content:center}
.hero h1{position:relative;z-index:2;max-width:min(1000px,94%)}
.nb{white-space:nowrap}
.slot{display:inline-block;width:1.34em;height:.72em;vertical-align:baseline}
.slot--wide{width:1.58em}
.slot--tall{width:1.12em}
.hero__do{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(18px,3.4vh,36px)}
.thing{position:absolute;left:0;top:0;z-index:4;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-drag:none;will-change:transform;filter:var(--cut)}
.thing.held{cursor:grabbing;filter:drop-shadow(10px 14px 0 rgba(16,13,9,.26))}
.spark{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;pointer-events:none;z-index:5;animation:spark .5s var(--ease) forwards}
.spark path{fill:none;stroke:var(--sun);stroke-width:3.5;stroke-linecap:round}
@keyframes spark{from{transform:scale(.3);opacity:1}to{transform:scale(1.35) rotate(24deg);opacity:0}}
@media (max-width:760px){.big{font-size:min(9.2vw,6svh);line-height:1.12}.hero{padding-top:calc(var(--bar) + 12px)}}

/* tubes and tickets */
.tube{cursor:pointer;transition:transform .35s var(--spring);transform-box:fill-box;transform-origin:50% 100%}
.tube:hover{transform:translateY(-14px) rotate(-3deg)}
.tube.pop .liq{animation:pop .5s var(--spring)}
@keyframes pop{40%{transform:translateY(-12px)}}
.liq{transform-box:fill-box}
.burst{position:absolute;display:grid;place-items:center;width:clamp(96px,10vw,140px);aspect-ratio:1;color:var(--ink);text-align:center;font:400 clamp(.95rem,1.25vw,1.2rem)/1.02 var(--hand);padding:1.6em;transform:rotate(var(--r,10deg));isolation:isolate}
.burst svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:var(--paper);animation:turn 40s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}

/* equations made of objects */
.to{position:relative;display:block;height:3px;background:currentColor;transform-origin:left}
.to::after{content:"";position:absolute;right:0;top:50%;width:11px;height:11px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.js [data-up] .to{transform:scaleX(0);transition:transform .7s var(--ease) .25s}
.js [data-up].on .to{transform:none}
.pins{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,2vw,22px)}
.pins li{background:var(--paper);color:var(--ink);font:700 .92rem/1 var(--typed);text-transform:uppercase;padding:.72em 1em;border-radius:50%;transition:transform .25s var(--spring)}
.pins li:hover{transform:rotate(-4deg) scale(1.07)}

/* why: elements go in, the flask fills, the stamp lands */
.why{position:relative;height:150svh;background:var(--green);z-index:1}
.why__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;align-items:center;padding:calc(var(--bar) + 14px) var(--rail) 18px;gap:12px}
.why__text{font:800 clamp(1.3rem,min(3.7vw,6.2svh),3.6rem)/1.14 var(--text);letter-spacing:-.03em;max-width:29em}
@media (max-width:820px){.why__text{font-size:min(6vw,3.5svh)}}
.why__text .endline{font-weight:inherit;color:inherit;background:linear-gradient(var(--sun),var(--sun)) no-repeat 0 55%/0 92%;transition:background-size .9s var(--ease),color .3s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.why__text .endline.on{background-size:100% 92%;color:var(--ink)}
.flaskwrap{position:absolute;right:calc(var(--rail) + clamp(10px,3vw,50px));bottom:calc(var(--tabs) + clamp(30px,5vh,50px));width:clamp(40px,4.6vw,66px)}
.flask{width:100%;height:auto;display:block}
.bub{animation:bub 2.2s ease-in infinite}
.bub:nth-of-type(2){animation-delay:.7s}.bub:nth-of-type(3){animation-delay:1.3s}
@keyframes bub{0%{transform:translateY(20px);opacity:0}25%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.drop{position:absolute;left:50%;top:0;width:44%;height:auto;z-index:1;opacity:0;filter:var(--cut);will-change:transform}
.flaskwrap .stamp{position:absolute;right:-60%;bottom:-16%;width:150%;z-index:3;color:var(--paper)}

/* the room: prints on a table */
@media (max-width:760px){.print{width:var(--mw)}.table__title{top:calc(var(--bar) + 16px);transform:none}}

/* the ask */
.ask{position:relative;min-height:100svh;background:var(--green);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--bar) + 20px) var(--rail) 40px;z-index:1}
.ask__env{position:absolute;right:clamp(10px,10vw,170px);top:50%;width:clamp(150px,min(30vw,56vh),460px);height:auto;transform:translateY(-50%) rotate(8deg);filter:var(--cut);transition:transform .5s var(--spring)}
.ask .say,.ask .btn{position:relative;z-index:2}
.ask .btn{margin-top:clamp(18px,3vh,30px);align-self:flex-start}
@media (max-width:760px){.ask__env{top:auto;bottom:6%;right:-20px;transform:rotate(8deg)}}

.js [data-up]{transform:translateY(24px);transition:transform .75s var(--ease)}
.js [data-up].on{transform:none}
.fig-bub circle{animation:bub 2.6s ease-in infinite}
.fig-bub circle:nth-child(2){animation-delay:.9s}.fig-bub circle:nth-child(3){animation-delay:1.6s}
.fig-drop{animation:drop2 1.9s cubic-bezier(.55,0,.9,.5) infinite}
@keyframes drop2{0%{transform:translateY(-22px) scale(.3);opacity:0}30%{transform:translateY(-22px) scale(1);opacity:1}90%{transform:translateY(74px);opacity:1}100%{transform:translateY(80px);opacity:0}}
.fig-fire{transform-origin:150px 476px;animation:flick .5s ease-in-out infinite alternate}
@keyframes flick{from{transform:scale(1,.96)}to{transform:scale(.95,1.07)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-up],.js .eq[data-up] img,.js .reaction[data-up] img{opacity:1;transform:none}
  .why{height:auto}
  .why__stage{position:static;height:auto}
}

/* ── pills: the next dates, always one tap away ─────────── */
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.pills__lead{font:700 .86rem/1 var(--text);opacity:.86;width:100%}
.dpill{display:inline-flex;align-items:center;gap:.5em;padding:.5em .85em;border-radius:99px;background:rgba(253,248,240,.17);text-decoration:none;font:400 clamp(.74rem,.9vw,.84rem)/1 var(--text);white-space:nowrap;transition:transform .24s var(--spring),background .18s}
.dpill b{font-weight:800;font-size:1.14em;letter-spacing:-.01em}
.dpill em{font-style:normal;font-weight:500;text-transform:uppercase;letter-spacing:.03em;opacity:.84;padding-left:.5em;border-left:1px solid currentColor}
.dpill:hover{transform:translateY(-3px);background:rgba(253,248,240,.3)}
.dpill:active{transform:scale(.94);transition-duration:.06s}
.on-light .dpill{background:rgba(16,13,9,.1)}
.on-light .dpill:hover{background:rgba(16,13,9,.18)}
.hero .pills{position:relative;z-index:3;margin-top:clamp(12px,2.2vh,22px)}

/* ── the deck: one experiment, one card, one screen ─────── */
.deck{position:relative;padding:14px var(--pad) 0;background:var(--deckbg,var(--green));z-index:1}
.xcard{--top:calc(10px + var(--i)*7px);position:sticky;top:var(--top);height:calc(100svh - 10px - var(--tabs) - 34px);margin-bottom:26px;background:var(--c);color:var(--t);border-radius:clamp(16px,2vw,28px);box-shadow:0 -2px 16px rgba(16,13,9,.2);overflow:hidden;display:grid;transform-origin:50% 0;will-change:transform;isolation:isolate}
.xcard::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--dim,0);pointer-events:none;z-index:9}
.xcard__in{min-height:0;display:grid;gap:clamp(8px,2vh,20px) clamp(20px,4vw,60px);padding:clamp(16px,3.4vh,36px) calc(var(--rail) - var(--pad))}
@media (min-width:821px){.xcard__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}}
@media (max-width:820px){.xcard__in{grid-template-rows:auto minmax(0,1fr) auto}}
.xcard__say{display:grid;gap:clamp(6px,1.6vh,14px);align-content:center;min-height:0}
.xcard__see{min-height:0;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.xcard__see svg.line{max-height:100%;width:auto;max-width:100%;height:100%}
.xcard__foot{display:contents}
@media (max-width:820px){.xcard__foot{display:grid;gap:9px}}
.xcard .pills{margin-top:clamp(2px,.6vh,6px)}
.s-sun{--c:var(--sun);--t:var(--ink);--bg:var(--ink);--fg:var(--paper);--figfill:var(--paper);--accent:var(--red);--figpen:var(--red)}
.s-pink{--c:var(--pink);--t:var(--ink);--bg:var(--ink);--fg:var(--paper);--figfill:var(--paper);--accent:var(--sun);--figpen:var(--ink)}
.s-sky{--c:var(--sky);--t:var(--ink);--bg:var(--ink);--fg:var(--paper);--figfill:var(--paper);--accent:var(--sun);--figpen:var(--ink)}
.s-copper{--c:var(--copper);--t:var(--paper);--bg:var(--sun);--fg:var(--ink);--figfill:var(--paper);--accent:var(--sun);--figpen:var(--sun)}
.line{overflow:visible;color:var(--t)}
.snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;pointer-events:none}
html{scroll-snap-type:y proximity}

/* what each card shows */
.to{position:relative;display:block;height:3px;background:currentColor;transform-origin:left}
.to::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.xcard__obj{position:absolute;filter:var(--cut);pointer-events:none;z-index:2}

/* ── the rack: our navigation. A tube per experiment, and yours fills as you go ── */
@media (prefers-reduced-motion:reduce){.xcard{position:relative;top:auto;height:auto;min-height:calc(100svh - var(--bar) - 56px)}html{scroll-snap-type:none}}

/* ── The hooks: one big object per card, chosen for contrast and surprise, each with something to do ── */
.xcard__in{position:relative;z-index:1}
.xcard__see{container-type:size}
.xcard__say{position:relative;z-index:2}

/* Build Club: the goal, on a plate */
.feast{position:relative;width:min(100cqw,122cqh);aspect-ratio:1.22;user-select:none}
.feast img{position:absolute;height:auto;filter:var(--cut);-webkit-user-drag:none;transition:transform .7s var(--spring),opacity .3s}
.feast__plate{width:80%;left:10%;bottom:4%}
.feast__fork{width:9.4%;left:0;bottom:7%;transform:rotate(-7deg)}
.feast__knife{width:8.4%;right:0;bottom:6%;transform:rotate(7deg)}
.feast__moon{width:45%;left:27.5%;bottom:15%;cursor:pointer;touch-action:manipulation;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.js .hooked:not(.live) .feast__moon{transform:translateY(-70%) rotate(-30deg);opacity:0}
.js .hooked:not(.live) .feast__fork{transform:translateX(-60%) rotate(-30deg);opacity:0}
.js .hooked:not(.live) .feast__knife{transform:translateX(60%) rotate(30deg);opacity:0}
.feast__moon.back{animation:eleback .6s var(--spring)}
@keyframes eleback{from{transform:scale(.2)}to{transform:none}}
.feast__note{position:absolute;right:3%;top:1%;margin:0;color:var(--figpen);transform:rotate(-4deg)}

/* Practicals: four problems, and you learn to ride by riding */

/* Reactions: the range, with a mirror ball */

/* Venture Catalyst: months of work, under pressure */
.steam{position:relative;width:min(88cqw,105cqh);aspect-ratio:779/618}
.steam img{width:100%;height:auto;filter:var(--cut);display:block;-webkit-user-drag:none;user-select:none}
.hooked.live .steam img{animation:tremble 3.6s linear infinite}
@keyframes tremble{0%,50%,74%,100%{transform:none}54%{transform:translate(-2px,0) rotate(-.5deg)}58%{transform:translate(2px,-1px) rotate(.5deg)}62%{transform:translate(-2px,1px) rotate(-.6deg)}66%{transform:translate(2px,0) rotate(.6deg)}70%{transform:translate(-1px,0)}}
.puff{position:absolute;left:28%;top:-6%;width:13%;aspect-ratio:1;border-radius:50%;background:#fff;filter:blur(7px);opacity:0;pointer-events:none}
.hooked.live .puff{animation:puff 3.6s linear infinite}
.puff:nth-of-type(2){--dx:-70%;animation-delay:.14s!important}
.puff:nth-of-type(3){--dx:60%;animation-delay:.3s!important}
.puff:nth-of-type(4){--dx:-20%;animation-delay:.46s!important}
@keyframes puff{0%,62%{opacity:0;transform:none}66%{opacity:.9}100%{opacity:0;transform:translate(var(--dx,20%),-260%) scale(3.4)}}

/* The ask: the line is open */

/* Phones: the words run top to bottom and the object takes what is left */
@media (max-width:820px){
  :root{--tabs:62px}
  .xcard__in{padding-top:54px}
  #practicals .xcard__in{display:flex;flex-direction:column}
  #practicals .xcard__say{display:contents}
  #practicals .xcard__see{order:2;flex:0 0 auto;height:auto;container-type:normal;position:static}
  #practicals .go{order:3}
  .xcard .rider{right:2%;bottom:2%;width:min(54vw,30svh);z-index:0}
}
@media (max-width:820px) and (max-height:600px){
}
@media (prefers-reduced-motion:reduce){.specks,.range__hang img,.range__sway img,.hooked.live .steam img,.hooked.live .puff,.ask__env:hover{animation:none!important}}


/* The stamp. Lost in an earlier pass, which left a black disc beside the flask */
.stamp{color:var(--red);aspect-ratio:1}
.stamp text{font-family:var(--text);font-weight:900;fill:currentColor}
.stamp circle{fill:none;stroke:currentColor}
.js .stamp[data-land]{opacity:0;transform:scale(1.7) rotate(var(--r,-14deg))}
.js .stamp[data-land].on{opacity:1;transform:rotate(var(--r,-14deg));transition:transform .22s cubic-bezier(.2,1.5,.5,1),opacity .06s}


/* ── The logo floats, with no bar behind it. It reads whatever passes under it ── */
.flogo:hover{transform:scale(1.07) rotate(-2deg)}
.flogo:active{transform:scale(.93)}

/* ── Navigation: a shelf of glass, one flower per experiment, its name always showing ── */
.tabs{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:55;display:flex;align-items:flex-end;gap:0;padding:0 5px;background:var(--paper);border-radius:12px 12px 0 0;box-shadow:0 -3px 16px rgba(16,13,9,.2);height:calc(var(--shelf) + env(safe-area-inset-bottom))}
.tabs a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(68px,5.6vw,80px);height:var(--shelf);padding-bottom:env(safe-area-inset-bottom);color:var(--ink);text-decoration:none;box-sizing:content-box}
.tabs a span{font:800 clamp(.72rem,.84vw,.8rem)/1.05 var(--text);letter-spacing:-.018em;text-align:center;padding:0 2px;border-radius:5px;transition:color .2s}
.tabs a:hover span,.tabs a.is-here span{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;text-decoration-color:var(--c)}
.tabs a[data-tab="/calendar/"]:hover span,.tabs a[data-tab="/calendar/"].is-here span{text-decoration-color:var(--ink)}
.tabs a[aria-current] span{color:var(--paper);background:var(--ink);padding:.28em .4em}
:root{--shelf:62px}
@media (max-width:820px){
  :root{--shelf:62px;--tabs:68px}
  .tabs{left:0;right:0;transform:none;justify-content:space-around;border-radius:10px 10px 0 0}
  .tabs a{flex:1 1 0;width:auto;min-width:0}
  .tabs a span{font-size:clamp(.75rem,3.4vw,.875rem);letter-spacing:-.025em}
}

/* ── Name units: every name is set like the logo. The logo signs it at the bottom right ── */

/* ── Buttons: asking for an invite is a ticket. Everything else is a link ── */
.go{display:inline-flex;align-items:baseline;gap:.4em;width:fit-content;color:inherit;text-decoration:none;font:800 clamp(1rem,1.3vw,1.22rem)/1.15 var(--text);letter-spacing:-.022em;border-bottom:3px solid currentColor;padding-bottom:2px;justify-self:start;transition:gap .25s var(--spring)}
.go:hover{gap:.75em}

/* ── Sub pages: a first screen, then cards, then what the page needs ── */
.s-paper{--c:var(--paper);--t:var(--ink);--bg:var(--ink);--fg:var(--paper);--figfill:var(--paper);--accent:var(--red);--figpen:var(--red)}
.lead{position:relative;min-height:100svh;overflow:hidden;background:var(--c);color:var(--t);display:grid;gap:clamp(10px,2vh,20px) clamp(20px,4vw,60px);padding:calc(var(--bar) + clamp(10px,3vh,30px)) var(--rail) calc(var(--tabs) + 22px)}
.lead__say{display:grid;gap:clamp(8px,1.8vh,16px);align-content:center;justify-items:start;position:relative;z-index:2;min-height:0}
.lead__see{position:relative;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.lead .hero__do{margin-top:clamp(4px,1vh,10px)}
.lead .steam{width:min(80cqw,95cqh)}
.lead .rider{right:2%;bottom:3%;width:min(94cqw,120cqh)}
@media (min-width:821px){.lead{height:100svh;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}.lead__see{height:100%}}
@media (max-width:820px){.lead{height:100svh;grid-template-rows:auto minmax(0,1fr)}.lead .typed{display:none}}
.big{margin:0}
.xcard:not(#build-club):not(#practicals):not(#reactions):not(#venture-catalyst) .xcard__say{gap:clamp(10px,2vh,18px)}
.js .hooked:not(.live) .hook{transform:translateY(30%) rotate(-14deg) scale(.7);opacity:0}
.hook:hover{transform:scale(1.04) rotate(-3deg)}
.sec{position:relative;z-index:1;padding:clamp(64px,9vw,120px) var(--rail) clamp(70px,9vw,120px)}
.wrap{max-width:1280px;margin-inline:auto;width:100%}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--sun{background:var(--sun);color:var(--ink)}
.sec--paper{background:var(--paper);color:var(--ink)}
.sec--pink{background:var(--pink);color:var(--ink)}
.sec--copper{background:var(--copper);color:var(--paper)}
.ask-sheet{background:var(--paper);color:#000;max-width:820px;margin-inline:auto;padding:clamp(24px,4vw,52px);border-radius:18px;--penc:var(--red);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.ask-sheet .lg{letter-spacing:-.035em}
.sticky{display:none!important}
.away{margin-top:0;gap:7px}
.away-lead{font:700 .86rem/1 var(--text);text-transform:none;opacity:.86;width:100%}
.away .cap{display:inline-flex;align-items:center;gap:.5em;padding:.5em .85em;border-radius:99px;background:rgba(16,13,9,.1);text-decoration:none;font:400 clamp(.74rem,.9vw,.84rem)/1 var(--text);white-space:nowrap;transition:transform .24s var(--spring),background .2s}
.away .cap b{font-weight:800;font-size:1.14em;letter-spacing:-.01em}
.away .cap em{font-style:normal;font-weight:500;text-transform:uppercase;letter-spacing:.03em;opacity:.84;padding-left:.5em;border-left:1px solid currentColor}
.away .cap:hover{transform:translateY(-3px);background:rgba(16,13,9,.18)}

/* Practicals: pick your problem */

/* Founder Content: what happens */
.beats{counter-reset:n;display:grid;margin-top:clamp(16px,2.6vw,28px);border-top:2px solid currentColor}
.beats li{counter-increment:n;display:grid;grid-template-columns:clamp(40px,5vw,70px) 1fr;align-items:baseline;padding:clamp(12px,1.5vw,20px) 0;border-bottom:2px solid currentColor;font:900 clamp(1.25rem,2.8vw,2.5rem)/1.05 var(--text);letter-spacing:-.03em;transition:transform .3s var(--spring)}
.beats li::before{content:"0" counter(n);font:700 .9rem/1 var(--typed);letter-spacing:0}

/* Venture Catalyst: what people are building */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(18px,2.4vw,28px)}
.chips li{background:var(--paper);color:var(--ink);font:700 clamp(.9rem,1.1vw,1.05rem)/1 var(--text);padding:.72em 1em;border-radius:99px;transition:transform .28s var(--spring),background .15s;cursor:default}
.chips li:hover{transform:translateY(-5px) rotate(-3deg);background:var(--sun)}
.sec .hero__do{margin-top:clamp(20px,3vw,32px)}

/* Calendar */
.peek{position:fixed;left:0;top:0;z-index:30;width:clamp(220px,24vw,340px);aspect-ratio:3/2;object-fit:cover;pointer-events:none;opacity:0;border:8px solid #fff;box-shadow:0 8px 20px rgba(16,13,9,.2);transition:opacity .2s;will-change:transform}
.peek.on{opacity:1}

/* The real flask fills up */
.rflask{position:relative;isolation:isolate;z-index:2}
.rflask__mask{position:absolute;inset:0;-webkit-mask:url(/img/things/flask.webp) center/100% 100% no-repeat;mask:url(/img/things/flask.webp) center/100% 100% no-repeat;mix-blend-mode:multiply;overflow:hidden}
.rflask__fill{position:absolute;left:0;right:0;bottom:0;height:74%;background:var(--sun);transform:translateY(100%)}

/* The elephant in the room */

.lead .away-lead{font:700 .86rem/1 var(--text);text-transform:none;letter-spacing:0}
.away .cap{flex-wrap:nowrap;flex-direction:row}
.away .cap em,.away .cap b{display:inline}
/* Words never run under the floating logo; the object can use that space */
@media (min-width:821px){.xcard__in{padding-top:clamp(66px,11vh,88px)}.xcard__see{margin-top:clamp(-50px,-6vh,-30px)}}

/* Venture Catalyst: three steps in one row */
.flow{counter-reset:n;display:grid;gap:clamp(8px,1.2vw,16px);margin-top:clamp(14px,2vw,24px)}
@media (min-width:821px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
.flow li{counter-increment:n;background:var(--paper);color:var(--ink);border-radius:14px;padding:clamp(14px,1.6vw,24px);font:800 clamp(1.05rem,1.55vw,1.5rem)/1.16 var(--text);letter-spacing:-.022em;box-shadow:0 8px 20px rgba(16,13,9,.2);transition:transform .3s var(--spring)}
.flow li::before{content:"0" counter(n);display:block;font:700 .86rem/1 var(--typed);letter-spacing:0;margin-bottom:.8em}
.flow__next{margin-top:clamp(28px,4vw,52px)}
.sec--copper{padding-bottom:calc(var(--tabs) + 60px)}

/* Build Club: the rooms, small */
.rooms3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.2vw,18px);margin-top:clamp(14px,2vw,24px)}
.rooms3 img{width:100%;aspect-ratio:4/3;object-fit:cover;border:clamp(4px,.5vw,8px) solid #fff;box-shadow:0 8px 20px rgba(16,13,9,.2);transition:transform .4s var(--spring)}
.rooms3 img:nth-child(1){transform:rotate(-2deg)}.rooms3 img:nth-child(2){transform:rotate(1.5deg)}.rooms3 img:nth-child(3){transform:rotate(-1deg)}

/* Calendar: a periodic table of what is on */
.calpage{background:var(--paper);color:var(--ink);padding:calc(var(--bar) + 6px) var(--rail) calc(var(--tabs) + 48px);display:grid;gap:clamp(10px,1.6vh,18px)}
@media (min-width:901px){.calpage{height:100svh;min-height:620px;grid-template-rows:minmax(0,4fr) minmax(0,1fr)}}
.ptable{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:clamp(3px,.4vw,6px);min-height:0}
.pt__title{grid-column:3/7;grid-row:1/3;align-self:end;justify-self:center;margin:0;font-size:clamp(3rem,min(8.4vw,15vh),8.5rem)}
.pt__legend{grid-column:3/7;grid-row:3;display:flex;flex-wrap:wrap;gap:6px;align-self:start;justify-content:center;padding-top:6px}
.pt__legend button{display:inline-flex;align-items:center;gap:.45em;padding:.5em .85em;border:0;border-radius:99px;cursor:pointer;font:800 clamp(.78rem,.95vw,.92rem)/1 var(--text);background:rgba(16,13,9,.08);color:var(--ink);transition:transform .25s var(--spring),background .2s,color .2s}
.pt__legend button[style]::before{content:"";width:.8em;height:.8em;background:var(--c);border-radius:2px}
.pt__legend button:hover{transform:translateY(-2px)}
.pt__legend button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.pt__soon{grid-column:1;align-self:center;margin:0;font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1;color:var(--red)}
.el{--c0:var(--c);container-type:size;position:relative;display:block;background:var(--c);color:var(--t);text-decoration:none;border-radius:4px;min-height:0;transition:transform .28s var(--spring),opacity .2s,box-shadow .2s;grid-column:var(--dc,auto);grid-row:var(--dr,auto);animation:elin .5s var(--spring) backwards;animation-delay:calc(var(--n,0)*24ms)}
@keyframes elin{from{opacity:0;transform:translateY(16px) scale(.86)}}
.el{padding:0 4px 6px 8px}
.el__n,.el__m,.el__s{position:absolute;display:block}
.el__name,.el__sub{display:block}
.el:not(.el--ghost){display:flex;flex-direction:column;justify-content:flex-end}
.el__n{left:8px;top:6px;font:700 max(9px,min(10cqw,14cqh))/1 var(--typed)}
.el__m{right:6px;top:6px;font:700 max(9px,min(10cqw,14cqh))/1 var(--typed);text-transform:uppercase}
.el__s{left:8px;top:19cqh;font:900 min(34cqw,40cqh)/1 var(--text);letter-spacing:-.04em}
.el__name{font:800 max(9.5px,min(9.6cqw,13cqh))/1.02 var(--text);letter-spacing:-.015em}
.el__sub{margin-top:1px;font:500 max(8.5px,min(8cqw,11cqh))/1.1 var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.el:hover{transform:scale(1.1) rotate(-2deg);z-index:3;box-shadow:0 8px 20px rgba(16,13,9,.2)}
.el.dim{opacity:.14}
@media (max-width:900px){
  .calpage{padding-bottom:calc(var(--tabs) + 56px)}
  .ptable{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(84px,24vw,120px)}
  .el{grid-column:auto;grid-row:auto}
  .el--first{grid-column:1;grid-row:1}
  .el--re{grid-column:4;grid-row:1}
  .pt__title{grid-column:2/4;grid-row:1;align-self:center;font-size:clamp(1.8rem,9vw,2.6rem)}
  .pt__legend{grid-column:1/-1;grid-row:2;justify-content:flex-start;align-self:center;padding:0}
  .ptable--soon .pt__soon{grid-column:1/-1;font-size:1.2rem;align-self:end}
  .ptable--soon{grid-auto-rows:auto}
  .ptable--soon .el{height:clamp(84px,24vw,120px)}
  .el__sub{white-space:normal;overflow:visible}
}

.hook{display:block;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;filter:var(--cut);cursor:pointer;transition:transform .7s var(--spring),opacity .3s;user-select:none;-webkit-user-drag:none;margin-inline:auto}

/* Empty places keep the shape of the table until there is something to put in them */
.el--ghost{background:rgba(16,13,9,.05);animation:none;pointer-events:none}
.el--ghost:hover{transform:none;box-shadow:none}
@media (max-width:900px){.el--ghost{display:none}}

/* The floating logo: large enough to be the brand on every screen. Green logos never carry a red dot. The primary unit, white with a red dot, sits on the first screen only */
.flogo{position:fixed;left:var(--rail);top:clamp(12px,2vh,20px);z-index:60;width:clamp(92px,9.2vw,136px);color:var(--paper);transition:color .2s,transform .3s var(--spring)}
.flogo svg{display:block;width:100%;height:auto}
.flogo[data-tone=light]{color:var(--green-deep)}
.flogo:hover{transform:scale(1.05) rotate(-1.5deg)}
.flogo:active{transform:scale(.95)}

/* Practicals: the problems, as a list you run a finger down */
.probs{margin-top:clamp(14px,2vw,26px);border-top:2px solid var(--ink)}
.prob{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto clamp(64px,8vw,120px);grid-template-rows:auto auto;align-items:center;gap:2px clamp(14px,2.4vw,36px);padding:clamp(12px,1.7vh,20px) clamp(4px,1vw,16px);border-bottom:2px solid var(--ink);color:var(--ink);text-decoration:none;transition:background .2s,padding .3s var(--spring)}
.prob__name{grid-column:1;font:800 clamp(1.5rem,3.1vw,3rem)/1.02 var(--text);letter-spacing:-.04em}
.prob__pain{grid-column:1;font-size:clamp(1rem,1.5vw,1.45rem);line-height:1.1;color:var(--red)}
.prob em{grid-column:2;grid-row:1/3;font:700 clamp(.72rem,.95vw,.92rem)/1.1 var(--typed);font-style:normal;text-transform:uppercase;text-align:right}
.prob img{grid-column:3;grid-row:1/3;width:100%;height:clamp(60px,10vh,104px);object-fit:contain;filter:var(--cut);transition:transform .45s var(--spring);-webkit-user-drag:none}
.prob:hover{background:var(--pink);padding-left:clamp(12px,1.8vw,28px)}
.prob:hover .prob__pain{color:var(--ink)}
.prob:hover img{transform:scale(1.28) rotate(-6deg)}
@media (max-width:640px){.prob{grid-template-columns:minmax(0,1fr) 62px}.prob em{grid-column:1;grid-row:auto;text-align:left;margin-top:5px}.prob img{grid-column:2;grid-row:1/4;height:64px}}
.xcard .slip{justify-self:start}
.pt__title{font-size:clamp(3rem,min(7.4vw,14vh),7.5rem)}
.el__s{letter-spacing:-.05em}

/* Short and narrow screens: the first screen keeps its words, and sub pages may scroll */
@media (max-width:820px){.hero .dpill--soon{display:none}}
@media (max-width:820px) and (max-height:700px){.lead{height:auto;min-height:100svh}.lead__see{height:170px;min-height:170px}}
@media (max-width:820px) and (max-height:700px){.big{font-size:min(8.2vw,5.2svh)}.hero .hero__do{margin-top:12px}}

/* Names: capitals in Helvetica Now Black, signed by the logo on the same baseline */
.ask .name{font-size:clamp(2.5rem,min(6.2vw,12vh),6.4rem);position:relative;z-index:2}
.pt__title{font-size:clamp(3rem,min(8.4vw,15vh),8.5rem)}
.lead .name{font-size:clamp(2.6rem,min(5.8vw,10.4vh),6rem)}

/* The primary logo unit: white with a red dot, larger on the first screen */
.flogo{transform-origin:0 0}
.flogo[data-primary]{--dot:#e8261c;transform:scale(1.28)}
.flogo[data-primary]:hover{transform:scale(1.32) rotate(-1deg)}

/* Buttons: a strip of litmus paper. Touch it and the colour runs across */

/* Less empty space on the first screen */
.hero{justify-content:center;padding-top:calc(var(--bar) + 8px)}
.hero .big{font-size:clamp(2.6rem,min(5.7vw,10.2vh),6.4rem);line-height:1.08;max-width:100%}
.hero h1{max-width:100%}
.hero .hero__do{margin-top:clamp(14px,2.6vh,26px)}
@media (max-width:760px){.hero .big{font-size:min(9.8vw,6svh);line-height:1.12}}
@media (max-width:820px) and (max-height:700px){.hero .big{font-size:min(8.2vw,5.2svh)}}

/* Reactions: each object answers when you touch it */

.hero{padding-bottom:calc(var(--tabs) + 56px)}
@media (max-width:760px){.hero .big{font-size:min(9.2vw,5.5svh);line-height:1.11}.hero .hero__do{gap:10px 12px}.hint{font-size:.98rem}}
@media (max-width:820px) and (max-height:700px){.hero .big{font-size:min(8.2vw,5.1svh)}.hero{padding-bottom:calc(var(--tabs) + 44px)}}
@media (max-width:820px) and (max-height:600px){.hero .pills__lead{display:none}}
@media (max-width:820px) and (max-height:700px){.hero .hint{display:none}}
@media (max-width:820px) and (max-height:600px){.hero .big{font-size:min(7.8vw,4.8svh)}}
@media (max-width:820px) and (max-height:700px){.hero .big{font-size:min(8.8vw,5.6svh)}.hero .hero__do{margin-top:9px}.hero .pills{margin-top:8px}.hero{padding-top:calc(var(--bar) + 2px)}}
@media (max-width:820px) and (max-height:600px){.hero .big{font-size:min(8.2vw,5.4svh)}}
@media (max-width:820px) and (max-height:700px){.hero{justify-content:flex-start;padding-top:calc(var(--bar) + 6px)}}

/* Names: capitals in Helvetica Now Black. Reactions and Venture Catalyst are signed: logo, rule, name */
.lockup{display:block;margin:0;font:inherit;max-width:100%}
.name{display:block;font:900 clamp(1.9rem,min(4.4vw,8.4vh),4.6rem)/1 var(--text);text-transform:uppercase;letter-spacing:-.035em;margin:0}
.lockup--co{display:inline-flex;align-items:baseline;gap:.13em;width:fit-content;justify-self:start;font-size:clamp(2.1rem,min(4.6vw,9vh),4.6rem)}
.lead .lockup--co{font-size:clamp(2.1rem,min(5vw,9.6vh),5rem)}
.lockup--co .name{white-space:nowrap;font-size:1em;line-height:1}
/* Signed at the bottom right. The stacked logo stands on the name's baseline, and "by" sits on the logo's first line, so it reads "by chemistry labs." */
.lockup__by{--h:max(20px,.34em);display:inline-flex;align-items:baseline;gap:calc(var(--h)*.16);flex:none;color:inherit}
.lockup__by i{position:relative;bottom:calc(var(--h)*.55);font:500 max(9px,calc(var(--h)*.36))/1 var(--text);font-style:normal;letter-spacing:-.01em}
.lockup__by svg{display:block;flex:none;width:auto;height:var(--h)}
.lead .lockup:not(.lockup--co) .name{font-size:clamp(2.6rem,min(5.8vw,10.4vh),6rem)}

/* Buttons: a plain rectangle */
.btn{display:inline-flex;align-items:center;gap:.6em;width:fit-content;justify-self:start;background:var(--bg,var(--sun));color:var(--fg,var(--ink));font:800 clamp(1rem,1.25vw,1.18rem)/1 var(--text);letter-spacing:-.018em;white-space:nowrap;text-decoration:none;padding:.95em 1.3em;border-radius:0;transition:background .15s,color .15s}
.btn:hover{background:var(--fg,var(--ink));color:var(--bg,var(--sun))}
.btn .arw{display:inline-block;width:1em;height:1em;position:relative;flex:none}
.btn .arw>span{display:block;overflow:hidden;width:1em;height:1em;position:relative}
.btn .arw i{position:absolute;inset:0;font-style:normal;line-height:1;transition:transform .3s var(--ease)}
.btn .arw i+i{transform:translateX(-120%)}
.btn:hover .arw i{transform:translateX(120%)}
.btn:hover .arw i+i{transform:none}

/* Reactions: the words across the top, four smaller objects in a line, reading left to right */
@media (min-width:821px){
}
@media (max-width:820px){
  .xcard .rider{width:min(58vw,32svh)}
}
@media (max-width:820px) and (max-height:600px){
}

/* The footer logo is white, so it can carry the red dot */

/* First-screen objects stay hidden and small until the script has sized them, so nothing flashes huge on a slow connection */
.js .thing{visibility:hidden;width:1.2em;height:1.2em}

/* Short phones: the brand paragraph gets the whole screen */
@media (max-width:820px) and (max-height:700px){.why__text{font-size:min(5.3vw,3.05svh)}.flaskwrap{display:none}}
.why__text{line-height:1.2}
.flaskwrap{bottom:calc(var(--tabs) + 2px);right:calc(var(--rail) - 14px)}

/* Phase 2: photos, company logos and proof */
.sec--pink .rooms3{margin-top:0}
.sec--copper .rooms3{margin-top:clamp(20px,3vw,36px)}
.sec--pink + .sec--pink{padding-top:0}
/* Who is in the room: a strip of the same paper as the prints above it, each logo in its own colours */
.said .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.said .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vc__note{margin:0;font:700 clamp(.98rem,1.25vw,1.15rem)/1.26 var(--text);letter-spacing:-.012em;max-width:42ch}
.invite{display:block;justify-self:start}
.invite summary{list-style:none;cursor:pointer}
.invite summary::-webkit-details-marker{display:none}
.invite__menu{margin-top:10px}
.invite__menu .pills__lead{color:inherit}
.s-copper .invite__menu .dpill,.sec--copper .invite__menu .dpill{background:rgba(253,248,240,.17)}
@media (max-width:820px) and (max-height:700px){.hero .big{font-size:min(8.8vw,5.6svh)}}
/* The logos turn on the reels of the slot machine from the first sentence. A reel is white, so each logo keeps its own colours. All twelve show at once. On a wide screen six reels run across the page, on a phone three stand taller */
.credits{position:relative;z-index:1;background:var(--paper);color:var(--ink);display:grid;justify-items:center;gap:clamp(14px,2.6vh,28px);padding:clamp(28px,5vh,56px) var(--rail) clamp(32px,5.6vh,60px);overflow:hidden}
.credits__t{margin:0;text-align:center;font:400 clamp(1.05rem,1.35vw,1.3rem)/1.2 var(--text);letter-spacing:.005em;color:rgba(16,13,9,.68)}
.machine{--p:0;--b:0;position:relative;justify-self:center;width:min(100%,calc((100svh - var(--bar) - var(--tabs) - 60px)*1.44));aspect-ratio:879/611;container-type:inline-size}
.machine::before{content:"";position:absolute;left:6.5%;right:9.5%;top:14.5%;bottom:3%;border-radius:7%;box-shadow:0 22px 44px rgba(16,13,9,.3),0 4px 10px rgba(16,13,9,.22)}
.machine__frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;user-select:none}
.reel{position:absolute;top:15.8%;height:80.3%;container-type:size;overflow:hidden;background:#fffaf1}
.reel:nth-child(1){left:8%;width:22.3%}
.reel:nth-child(2){left:37.6%;width:22.2%}
.reel:nth-child(3){left:67.1%;width:21.9%}
.reel__strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.reel.fast .reel__strip{filter:blur(1.6px)}
.cell{height:25cqh;display:grid;place-items:center;overflow:hidden}
.cell img{display:block;max-width:76%;height:calc(var(--k,1)*13cqh);width:auto;object-fit:contain;-webkit-user-drag:none;user-select:none}
.cell img[src*="blinkit"],.cell img[src*="tvf"]{border-radius:5px}
.cell b{font:900 13.5cqh/1 var(--text);color:var(--red);text-transform:uppercase;letter-spacing:.01em}
.machine__rod{position:absolute;left:93.29%;top:27.17%;width:3.75%;height:auto;z-index:3;transform-origin:27% 100%;transform:scaleY(calc(1 - 1.8*var(--p)));pointer-events:none}
.machine__ball{position:absolute;left:92.26%;top:18.49%;width:8.08%;height:auto;z-index:4;transform:translateY(calc(var(--p)*28.7cqw)) scale(calc(1 + var(--b)*.22));pointer-events:none}
.machine__lamp{position:absolute;left:48.35%;top:7%;width:0;height:0;z-index:3;pointer-events:none}
.machine__lamp::after{content:"";position:absolute;left:-7cqw;top:-7cqw;width:14cqw;height:14cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,226,120,.95),rgba(255,120,40,.45) 34%,rgba(255,120,40,0) 68%);opacity:0;mix-blend-mode:screen}
.machine.running .machine__lamp::after{animation:lamp .32s steps(2,jump-none) infinite}
.machine.won .machine__lamp::after{animation:lamp .16s steps(2,jump-none) 12}
@keyframes lamp{from{opacity:.15}to{opacity:1}}
.machine__pull{position:absolute;inset:0;z-index:5;width:100%;height:100%;padding:0;border:0;background:none;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.machine__pull:active{cursor:grabbing}
.machine__pull:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.machine--wide{aspect-ratio:1590/611;width:min(100%,calc((100svh - var(--bar) - var(--tabs) - 96px)*2.6))}
.machine--wide::before{left:3%;right:5.5%}
.machine--wide .reel:nth-child(1){left:4.4%;width:12.3%}
.machine--wide .reel:nth-child(2){left:20.8%;width:12.3%}
.machine--wide .reel:nth-child(3){left:35.7%;width:12.3%}
.machine--wide .reel:nth-child(4){left:50.6%;width:12.3%}
.machine--wide .reel:nth-child(5){left:65.5%;width:12.3%}
.machine--wide .reel:nth-child(6){left:81.8%;width:12.1%}
.machine--wide .cell{height:50cqh}
.machine--wide .cell img{height:calc(var(--k,1)*15cqh);max-width:80%}
.machine--wide .cell b{font-size:13cqh}
.machine--wide .machine__rod{left:96.23%;width:2.2%}
.machine--wide .machine__ball{left:95.72%;width:4.47%;transform:translateY(calc(var(--p)*15.85cqw)) scale(calc(1 + var(--b)*.22))}
.machine--wide .machine__lamp{left:50%}
.machine--wide .machine__lamp::after{left:-4.5cqw;top:-4.5cqw;width:9cqw;height:9cqw}
@media (min-width:901px){.machine--tall{display:none}}
@media (max-width:900px){.machine--wide{display:none}}
@media (max-width:760px){
  .credits .machine--tall{width:calc(100% + 2*var(--rail) - 12px);margin-inline:calc(6px - var(--rail))}
}

/* The footer: tiny on purpose, because emoji appear nowhere else on the site. Apple emoji beside each page, and a clean Instagram icon */
.foot{position:relative;z-index:1;background:var(--paper);color:var(--ink);border-top:1px solid rgba(16,13,9,.1);padding:clamp(20px,2.4vw,32px) var(--rail) calc(var(--tabs) + 72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,1.6vw,20px) clamp(24px,4vw,64px);align-items:start}
.foot__logo{display:block;width:clamp(76px,6.4vw,92px);color:var(--green-deep);--dot:currentColor}
.foot__logo svg{display:block;width:100%;height:auto}
.foot__list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);grid-template-columns:repeat(2,max-content);gap:0 clamp(28px,3.4vw,48px)}
.foot__list a{display:flex;align-items:center;gap:7px;min-height:25px;color:inherit;text-decoration:none;font:500 .84rem/1.1 var(--text);letter-spacing:-.005em}
.foot__list img,.foot__list svg{flex:none;display:block;width:14px;height:14px;transition:transform .3s var(--spring);-webkit-user-drag:none}
.foot__list a:hover img,.foot__list a:hover svg{transform:scale(1.35) rotate(-8deg)}
.foot__list a:active img,.foot__list a:active svg{transform:scale(.9)}
.foot__list a:hover span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.foot__legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 16px;padding-top:10px;border-top:1px solid rgba(16,13,9,.12);font-size:.76rem;color:rgba(16,13,9,.66)}
.foot__legal a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
.foot__legal a:hover{color:var(--ink)}
@media (max-width:760px){
  .foot{grid-template-columns:minmax(0,1fr)}
  .foot__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
  .foot__list a{min-height:34px;font-size:.88rem}
  .foot__legal a{padding-block:4px}
}

/* Terms, refunds, privacy and contact: a title and words to read, nothing else */
.doc{position:relative;z-index:1;background:var(--paper);color:var(--ink);min-height:72svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);align-items:start;padding:calc(var(--bar) + clamp(24px,5vh,56px)) var(--rail) clamp(48px,8vh,88px)}
.doc__head{display:grid;gap:12px;position:sticky;top:calc(var(--bar) + 16px)}
.doc__head .name{font-size:clamp(2.6rem,min(5.2vw,10vh),5.2rem)}
.doc__head .typed{margin:0}
.doc__body{max-width:38em;font-size:clamp(1.05rem,1.25vw,1.18rem);line-height:1.5}
.doc__lead{font-weight:700;margin:0}
.doc__body h2{margin:1.75em 0 .4em;font:900 clamp(1.3rem,1.9vw,1.65rem)/1.12 var(--text);letter-spacing:-.025em}
.doc__body p{margin:0}
.doc__body ul{margin:0;padding-left:1.15em;list-style:disc;display:grid;gap:.4em}
.doc__body a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em}
.doc__body a:hover{color:var(--green-deep)}
@media (max-width:760px){
  .doc{grid-template-columns:minmax(0,1fr)}
  .doc__head{position:static}
}

/* The page that doesn't exist: the same machine, and it keeps landing on 4 0 4 */
.lost{position:relative;min-height:100svh;background:var(--green);color:var(--paper);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(20px,3vw,48px);padding:calc(var(--bar) + 10px) var(--rail) calc(var(--tabs) + 40px);overflow:hidden}
.lost__say{display:grid;gap:clamp(12px,2vh,20px);justify-items:start}
.lost .machine{justify-self:end}
.lost .name{font-size:clamp(2.6rem,min(5.4vw,10vh),5.6rem)}
.lost .say{margin:0;max-width:24em;min-height:2.8em}
.machine--lost .reel__strip{top:-25cqh}
.machine--lost .cell{height:50cqh}
.machine--lost .cell b{font-size:44cqh;line-height:1}
.lost.won .btn{animation:winbtn .46s var(--spring) 3}
@keyframes winbtn{50%{transform:scale(1.1) rotate(-2deg)}}
@media (max-width:760px){
  .lost{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(14px,2.4vh,24px)}
  .lost .machine{justify-self:center;width:calc(100% + 2*var(--rail) - 12px);margin-inline:calc(6px - var(--rail))}
}

/* ── 9 Nov: one plain slider of logos, on paper, in their own colours. Only as tall as its contents ── */
.credits{padding-inline:0}
.logos{display:flex;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos__track{--g:clamp(44px,5.4vw,88px);display:flex;flex:none;align-items:center;gap:var(--g);padding:0 var(--g) 0 0;margin:0;list-style:none;animation:logos 52s linear infinite}
.logos:hover .logos__track{animation-play-state:paused}
.logos__track img{display:block;height:calc(var(--k,1)*clamp(24px,2.9vw,38px));width:auto;max-width:none}
@keyframes logos{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.logos{-webkit-mask-image:none;mask-image:none;padding-inline:var(--rail)}.logos__track{animation:none;flex-wrap:wrap;flex:1;justify-content:center;padding:0}.logos__track[aria-hidden]{display:none}}

/* ── 9 Nov: the calendar is a table of coloured glass ── */
/* Real lab glass: a flat, thin, slightly tinted plate. Colour gathers only at the cut edge, the thickness shows along the bottom, and the tint falls on the paper as a soft shadow. One end is frosted for writing on, like a microscope slide. No gloss, no gradient. */
.el:not(.el--ghost){--g:11%;background:color-mix(in srgb,var(--c) var(--g),transparent);border:1px solid color-mix(in srgb,var(--c) 38%,#8ea59b);border-bottom-width:2px;border-radius:1px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 15%,rgba(142,165,155,.16)),inset 0 0 0 3px rgba(255,255,255,.6),2px 4px 5px -2px rgba(40,52,46,.2),4px 6px 9px -3px color-mix(in srgb,var(--c) 26%,transparent);overflow:hidden}
.el[data-kind=club]{--g:20%}
.el[data-kind=re]{--g:15%}
.el:not(.el--ghost)::before{content:"";position:absolute;left:3px;right:3px;top:3px;height:calc(19% - 2px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .58 0 0 0 0 .56 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23f)'/%3E%3C/svg%3E"),rgba(226,229,224,.72)}
.el__n,.el__m{z-index:1}
.el:not(.el--ghost):hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 15%,rgba(142,165,155,.16)),inset 0 0 0 3px rgba(255,255,255,.6),2px 10px 12px -2px rgba(40,52,46,.2),4px 12px 16px -3px color-mix(in srgb,var(--c) 26%,transparent)}
.el--ghost{background:none;border:1px solid rgba(100,120,110,.2);border-bottom-width:2px;box-shadow:inset 0 0 0 2px rgba(142,165,155,.05),1px 2px 3px -2px rgba(40,52,46,.12);border-radius:1px}

/* ── 9 Nov: Calendar is a utility, so it stands a little apart from the four experiences ── */
.tabs a[data-tab="/calendar/"]{margin-left:clamp(8px,1.6vw,20px)}

/* ── 9 Nov: the one form ── */
.apply{padding-top:clamp(84px,12vh,130px)}
.apply .ask-sheet{box-shadow:inset 0 8px 0 var(--to,transparent);transition:box-shadow .35s var(--ease)}
html[data-to=club]{--to:var(--sun)}html[data-to=content]{--to:var(--pink)}html[data-to=catalyst]{--to:var(--copper)}
.ask__for{margin:.4em 0 1.1em;font:500 1.12rem/1.3 var(--text)}
.story__text{max-width:24em;margin:.3em 0 0;font:800 clamp(1.5rem,3.4vw,2.8rem)/1.14 var(--text);letter-spacing:-.03em}

/* ── 9 Nov: fewer type treatments. Small labels are one of two styles, every name is one size ── */
.dpill,.dpill b{font-size:.8125rem;font-weight:800;letter-spacing:-.01em}
.dpill em,.typed,.slip em{font:700 .75rem/1.1 var(--text);text-transform:uppercase;letter-spacing:.03em}
.dpill em{font-style:normal}.slip em{font-style:normal}
.pills__lead,.range figcaption b{font:800 .8125rem/1.1 var(--text);letter-spacing:-.01em}
.tabs a span{font-size:.8125rem}
.ask .name,.table__title{font:900 clamp(1.9rem,min(4.4vw,8.4vh),4.6rem)/1 var(--text);letter-spacing:-.035em;text-transform:uppercase}
.hero__do .hint{font-size:.95rem}
.pt__title{font-size:clamp(1.9rem,min(6.2vw,12vh),6.2rem)}
@media (max-width:900px){.pt__title{font-size:clamp(1.5rem,7vw,2.2rem)}}
@media (max-width:760px){.tabs a span{font-size:.75rem}.range figcaption b{font-size:.75rem}}

.invite__members{margin-top:12px;max-width:34em;font-size:1rem;line-height:1.45}.invite__members p{margin:0 0 8px}.invite__members a{text-decoration:underline}

/* ── 9 November, third pass: say what each thing is, and stop performing ──
   An object either takes you somewhere or stays still. Nothing makes a sound. Nothing holds a click. Copy never waits for a scroll. */
.need{margin:0;font:800 clamp(.92rem,1.3vw,1.18rem)/1.2 var(--text);text-transform:uppercase;letter-spacing:.01em}
.room{--wh:clamp(150px,calc((100svh - var(--bar) - var(--tabs) - 92px)/2),440px);position:relative;z-index:1;background:var(--green);color:var(--paper);padding:calc(var(--bar) + 2px) 0 calc(var(--tabs) + 16px);overflow:hidden}
.room h2{padding-inline:var(--rail)}
.wall{display:grid;gap:clamp(6px,.8vw,10px);margin-top:clamp(10px,1.6vh,18px)}
.wall__row{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wall__row.held{cursor:grabbing}
.wall__track{display:flex;width:max-content;will-change:transform}
.wall__track img{display:block;flex:none;height:var(--wh);width:calc(var(--wh)*var(--r));object-fit:cover;background:rgba(0,0,0,.14);margin-right:clamp(6px,.8vw,10px);-webkit-user-drag:none;pointer-events:none}
.menu{list-style:none;margin:0;padding:0;display:grid;gap:clamp(5px,1vh,10px);width:100%;align-self:center}
.menu__row{display:grid;grid-template-columns:clamp(30px,min(5vw,9vh),64px) minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.2vw,18px);background:var(--paper);color:var(--ink);text-decoration:none;padding:clamp(4px,1vh,10px) clamp(10px,1.4vw,18px);transition:transform .2s var(--ease)}
.menu__row img{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:var(--cut);-webkit-user-drag:none}
.menu__row b{font:800 clamp(1rem,1.7vw,1.5rem)/1.05 var(--text);letter-spacing:-.02em}
.menu__row em{font:700 clamp(.72rem,.85vw,.82rem)/1.1 var(--typed);font-style:normal;text-transform:uppercase;text-align:right}
.menu__row:hover{transform:translateX(6px)}
.xcard__see:has(.menu){display:flex;container-type:normal}
.lead--list{align-items:center}
.lead--list .lead__see{background:var(--paper);color:var(--ink);padding:clamp(12px,2vh,22px) clamp(14px,1.8vw,26px);height:auto;min-height:0;display:block;container-type:normal;align-self:center;width:100%}
.lead--list .probs{margin-top:clamp(8px,1.2vh,14px)}
.lead--list .prob{padding-block:clamp(6px,1.1vh,12px)}
.lead--list .prob__name{font-size:clamp(1.2rem,2.1vw,1.9rem)}
.lead--list .prob__pain{font-size:clamp(.98rem,1.2vw,1.15rem)}
.lead--list .prob img{height:clamp(40px,7.4vh,68px)}
.lead--list .prob:hover{background:color-mix(in srgb,var(--pink) 22%,var(--paper));padding-left:clamp(4px,1vw,16px)}

/* 9 November, fourth pass: the handwritten line under each name, Reactions in emoji, emoji in the navigation */
.sub{margin:0;color:var(--figpen)}
.ideas{list-style:none;margin:0;padding:0;display:grid;gap:clamp(6px,1.5vh,14px);font:800 clamp(1.2rem,2.6vw,2.3rem)/1.05 var(--text);letter-spacing:-.025em}
.ideas li{display:flex;align-items:center;gap:.5em}
.ideas img{width:1.2em;height:1.2em;flex:none}
.ideas li:last-child{font-size:.62em;gap:.8em}
.ideas li:last-child img{width:1.5em;height:1.5em;padding:.15em}
.xcard__see:has(.ideas){container-type:normal;justify-content:flex-start;height:auto;align-self:center}
@media (max-width:820px){
  .ideas{grid-template-columns:1fr 1fr;font-size:1.06rem}
  .ideas li:last-child{grid-column:1/-1;font-size:.95rem}
}
.tabs a{gap:3px}
.tabs__e{display:block;width:clamp(24px,1.8vw,26px);height:auto;transition:transform .2s var(--ease);-webkit-user-drag:none}
.tabs a:hover .tabs__e,.tabs a.is-here .tabs__e,.tabs a[aria-current] .tabs__e{transform:translateY(-2px)}
.flow__say{margin-top:clamp(12px,1.8vw,22px)}
.feast__note{white-space:nowrap}