/* Everything Awaken — company look (EA-018). Chapters own their colours; the Journal
   chapter keeps the app's Awaken-Morphism + Inter (Founder, 06-10-2026).
   Scroll story: js/scrub.js writes each .chapter's progress --p (0→1); every beat below is
   pure CSS reading --p. No .motion class (reduced motion / no JS) = stacked, final state. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/inter.woff2") format("woff2");}
/* Bricolage Grotesque (SIL OFL), latin subset, self-hosted so no visitor request goes to Google */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url("../assets/fonts/bricolage.woff2") format("woff2");}
:root{
  --black:#000;
  --white:#FAF7FE;
  --blue:#4850B2;
  --blue-deep:#363c8a;
  --blue-light:#6b73c9;
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --gutter:clamp(16px,5vw,64px);
  --bar-fg:var(--blue);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--white);color:var(--blue);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px;}
::selection{background:var(--blue);color:var(--white);}

/* ── top bar: one line at any width; colour follows the chapter under it ── */
body[data-tone=dark]{--bar-fg:var(--white);}
.bar{position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:64px;padding:0 var(--gutter);color:var(--bar-fg);transition:color .35s;}
.bar-home{display:flex;align-items:center;gap:10px;white-space:nowrap;font:700 1.05rem/1 var(--display);letter-spacing:-.01em;}
.bar-home svg{width:28px;height:28px;flex:none;}
.bar-nav{display:flex;gap:22px;font-size:.92rem;font-weight:500;white-space:nowrap;}
.bar-nav a{opacity:.75;transition:opacity .2s;}
.bar-nav a:hover{opacity:1;}
/* phones: only Blog + Guide stay, plain text, tap-sized (Founder 10-10) */
@media (max-width:760px){.bar{gap:10px;}.bar-nav{gap:6px;font-size:.88rem;}.bar-nav a:not(.q){display:none;}
  .bar-nav a.q{opacity:1;display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-weight:600;}}
@media (max-width:359px){.bar-home span{display:none;}}
/* section dots: where you are on a long page, and a jump to any part */
.dots{position:fixed;right:clamp(6px,1.4vw,20px);top:50%;translate:0 -50%;z-index:10;display:grid;gap:10px;color:var(--bar-fg);transition:color .35s;}
.dots a{display:block;width:8px;height:8px;border-radius:4px;border:1.5px solid currentColor;transition:height .3s,background-color .3s;}
body[data-chapter=awaken] .dots a[href="#awaken"],body[data-chapter=journal] .dots a[href="#journal"],
body[data-chapter=learning] .dots a[href="#learning"],body[data-chapter=kids] .dots a[href="#kids"],
body[data-chapter=founder] .dots a[href="#founder"],body[data-chapter=social] .dots a[href="#social"]{height:22px;background:currentColor;}
html:not(.motion) .dots{display:none;}

/* ── chapter system ── */
.motion .chapter{height:var(--len,300vh);}
.motion .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip;} /* clip: focus can't scroll it */
.motion .layer{position:absolute;inset:0;}
html:not(.motion) .stage,html:not(.motion) .layer{position:relative;}
.motion .beat{
  --tin:clamp(0,(var(--p,0) - var(--a,-1)) / (var(--b,0) - var(--a,-1)),1);
  --tout:clamp(0,(var(--p,0) - var(--c,2)) / (var(--d,3) - var(--c,2)),1);
  opacity:min(var(--tin),1 - var(--tout));
  transform:translateY(calc((1 - var(--tin)) * 48px - var(--tout) * 48px));
}
/* a line that "lights up" as the reader reaches it */
.motion .lit{opacity:calc(.16 + .84 * clamp(0,(var(--p,0) - var(--a)) / (var(--b) - var(--a)),1));}
/* constellation canvases (js/constellation.js) fill their layer */
.field{position:absolute;inset:0;pointer-events:none;}

/* ── 1 · Everything Awaken: night sky → the eyelid opens → logo + name → mission cards ── */
.ch-awaken{--len:760vh;}
.night{background:var(--black);color:var(--white);display:grid;place-items:center;padding:0 var(--gutter);text-align:center;}
.night-line{position:relative;font:600 clamp(2rem,6.4vw,5.4rem)/1.05 var(--display);letter-spacing:-.025em;max-width:13ch;}
.night-cue{position:absolute;left:50%;bottom:28px;width:1px;height:48px;background:currentColor;opacity:.5;transform-origin:top;animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%{transform:scaleY(0);}50%{transform:scaleY(1);}100%{transform:scaleY(1);opacity:0;}}
.eye{background:var(--white);}
.motion .eye{--t:clamp(0,(var(--p,0) - .04) / .18,1);clip-path:ellipse(95% calc(var(--t) * 95%) at 50% 50%);}

.few{display:grid;place-items:center;padding:0 var(--gutter);text-align:center;}
.few p{position:relative;font:700 clamp(2.4rem,8vw,7rem)/1 var(--display);letter-spacing:-.035em;max-width:11ch;}

/* the mark draws itself (ring → sun rises → rays → book opens) while the name is written in */
.brand{--lt:clamp(0,(var(--p,0) - .36) / .13,1);display:grid;place-items:center;align-content:center;gap:clamp(18px,3vh,36px);padding:80px var(--gutter) 40px;text-align:center;}
html:not(.motion) .brand{--lt:1;padding-block:96px;}
.brand-logo{width:clamp(96px,17vh,170px);overflow:visible;}
.brand>:not(.field){position:relative;} /* above its constellation (Founder 10-10) */
.brand-logo .ring{stroke-dasharray:183;stroke-dashoffset:calc(183 * (1 - clamp(0,var(--lt) * 2.4,1)));}
.brand-logo .sun{opacity:clamp(0,var(--lt) * 2.5 - .5,1);transform:translateY(calc((1 - clamp(0,var(--lt) * 2.5 - .5,1)) * 12px));}
.brand-logo .ray{stroke-dasharray:6;stroke-dashoffset:calc(6 * (1 - clamp(0,var(--lt) * 4 - 2.2 - var(--k) * .2,1)));}
.brand-logo .book{fill:var(--white);}
.brand-logo .page{transform-origin:32px 42px;transform:scaleX(clamp(0,var(--lt) * 3 - 1.2,1));}
.mark{font:800 clamp(2.4rem,10.5vw,8.6rem)/.9 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.04em;text-wrap:balance;
  clip-path:inset(-20% calc((1 - clamp(0,var(--lt) * 1.7 - .45,1)) * 115% - 12%) -20% -12%);}

/* mission cards: same slide as the Journal row, company look (no shadows, big type, a drawing each) */
.ea-row{display:grid;align-content:center;padding:72px 0 24px;}
.track{position:relative;}
.panel{--n:var(--near,1);flex:none;width:min(86vw,600px);display:grid;align-content:start;gap:clamp(14px,3vh,28px);opacity:calc(.18 + .82 * var(--n));}
.art{height:clamp(96px,19vh,190px);}
.art svg{height:100%;width:auto;max-width:100%;overflow:visible;}
.say{font:500 clamp(1.7rem,3.4vw,2.6rem)/1.2 var(--display);letter-spacing:-.02em;text-wrap:pretty;}
.say strong{display:block;margin-top:.5em;font-weight:800;}
.loop{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;transform-origin:60px 60px;animation:spin 5s linear infinite;stroke-dasharray:calc(226px - 70px * var(--n)) 400px;}
@keyframes spin{to{transform:rotate(360deg);}}
.escape{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:170;stroke-dashoffset:calc(170 * (1 - var(--n)));}
.step{fill:currentColor;transform-box:fill-box;transform-origin:bottom;transform:scaleY(clamp(0,var(--n) * 4 - var(--k) * .8,1));}
.climb{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:280;stroke-dashoffset:calc(280 * (1 - var(--n)));}
.peak{fill:currentColor;transform-box:fill-box;transform-origin:center;transform:scale(clamp(0,var(--n) * 3 - 2,1));}
.rise{fill:currentColor;transform:translateY(calc((1 - var(--n)) * 70px));}
.glow{stroke:currentColor;stroke-width:6;stroke-linecap:round;opacity:clamp(0,var(--n) * 3 - 2,1);}
.horizon-line{stroke:currentColor;stroke-width:4;}
.hold h2{font:600 1rem/1 var(--sans);opacity:.7;}
.hold ul{list-style:none;display:grid;gap:clamp(8px,1.6vh,18px);}
.hold li{font:700 clamp(1.7rem,4.4vw,3.4rem)/1.02 var(--display);font-variation-settings:"wdth" 85;letter-spacing:-.03em;opacity:calc(.18 + .82 * clamp(0,var(--n) * 5 - var(--k),1));}

/* static fallback (reduced motion / no JS): the same story, stacked */
html:not(.motion) .night,html:not(.motion) .few{min-height:70vh;}
html:not(.motion) .night-cue{display:none;}

/* ── 2 · Awaken Journal: full Awaken Blue, the app's own Morphism + Inter ──
   Vertical scroll slides a row of cards right→left (scrub.js moves .track and gives every
   card --near: 1 when centred, 0 a card-width away). Each card's drawing plays on --near. */
.ch-journal{
  --len:520vh;
  --neu-raise:7px 7px 16px color-mix(in srgb,var(--blue-deep) 75%,transparent),-6px -6px 14px color-mix(in srgb,var(--blue-light) 55%,transparent);
  --neu-well:inset 5px 5px 12px color-mix(in srgb,var(--blue-deep) 75%,transparent),inset -5px -5px 12px color-mix(in srgb,var(--blue-light) 50%,transparent);
  background:var(--blue);color:#fff;font-family:var(--sans);
}
.ch-journal .stage{display:flex;flex-direction:column;justify-content:safe center;gap:clamp(20px,4vh,40px);padding:84px 0 32px;}
.j-head{display:flex;align-items:center;gap:18px;padding:0 var(--gutter);}
.quill{flex:none;width:clamp(48px,6vw,80px);aspect-ratio:1;background:#fff;-webkit-mask:url(../assets/logo-journal.svg) center/contain no-repeat;mask:url(../assets/logo-journal.svg) center/contain no-repeat;}
.ch-journal h2{font:700 clamp(2.1rem,6vw,4.6rem)/1 var(--sans);letter-spacing:-.04em;}
.j-head p{font-size:clamp(1rem,1.8vw,1.35rem);opacity:.85;margin-top:6px;}

.track{display:flex;gap:clamp(18px,3vw,36px);padding:16px var(--gutter) 28px;will-change:transform;}
.card{--n:var(--near,1);flex:none;width:min(84vw,500px);display:flex;flex-direction:column;gap:12px;padding:clamp(20px,3vw,32px);border-radius:28px;
  background:var(--blue);box-shadow:var(--neu-raise);opacity:calc(.45 + .55 * var(--n));transform:scale(calc(.94 + .06 * var(--n)));}
.card h3{font-size:.95rem;font-weight:600;opacity:.75;}
.card h4{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.15;letter-spacing:-.02em;}
.card p{font-size:.98rem;line-height:1.55;opacity:.92;}
.card .pill{align-self:flex-start;margin-top:auto;}
.well{position:relative;height:clamp(130px,21vh,210px);border-radius:20px;box-shadow:var(--neu-well);overflow:hidden;margin-bottom:6px;}

/* features: four apps fall into one day */
.day{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;height:100%;}
.app{border-radius:12px;padding:10px 12px;background:var(--blue);box-shadow:var(--neu-raise);font-size:.8rem;line-height:1.3;
  transform:translate(calc((1 - var(--n)) * var(--x)),calc((1 - var(--n)) * var(--y))) rotate(calc((1 - var(--n)) * var(--r)));}
.app b{display:block;font-size:.88rem;white-space:nowrap;}
.app span{opacity:.75;}

/* standard: a page whose rules get ticked */
.doc{display:grid;align-content:center;gap:12px;height:100%;padding:0 26px;}
.rule{display:flex;align-items:center;gap:10px;}
.rule i{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.35);}
.rule svg{flex:none;width:20px;height:20px;stroke:#7CE0A3;stroke-width:3;fill:none;stroke-dasharray:24;stroke-dashoffset:calc(24 * (1 - clamp(0,var(--n) * 5 - var(--k),1)));}

/* security: the lock closes, the three things holding it light up */
.lock{position:absolute;left:12%;top:50%;width:64px;translate:0 -50%;}
.lock .shackle{transform:translateY(calc((1 - var(--n)) * -14px));}
.chips{position:absolute;right:8%;top:50%;translate:0 -50%;display:grid;gap:10px;}
.chip{padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:600;box-shadow:var(--neu-raise);opacity:calc(.25 + .75 * clamp(0,var(--n) * 4 - var(--k),1));}

/* privacy: what you write vs what reaches us */
.cipher{display:grid;align-content:center;gap:10px;height:100%;padding:0 18px;font-size:.88rem;}
.cipher small{display:block;font-size:.72rem;opacity:.7;margin-bottom:2px;}
.cipher .line{position:relative;padding:8px 12px;border-radius:10px;box-shadow:var(--neu-raise);white-space:nowrap;overflow:hidden;}
.cipher .plain,.cipher .enc{display:block;}
.cipher .to .plain{opacity:calc(1 - var(--n));}
.cipher .to .enc{position:absolute;inset:8px 12px;opacity:var(--n);font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em;}

/* know more */
.links{list-style:none;display:grid;gap:10px;}
.links a{display:block;padding:11px 16px;border-radius:14px;box-shadow:var(--neu-raise);font-weight:500;}
.links a:active{box-shadow:var(--neu-well);}
.status{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:8px 14px;border-radius:999px;box-shadow:var(--neu-well);font-size:.85rem;}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#7CE0A3;}
.pill{padding:13px 22px;border-radius:999px;font-weight:600;background:var(--blue);box-shadow:var(--neu-raise);transition:box-shadow .2s;}
.pill:active{box-shadow:var(--neu-well);}
.pill-main{background:#fff;color:var(--blue);}

/* short phones (SE-class): tighter head and drawing so the card's button stays on screen */
@media (max-height:740px){
  .ch-journal .stage{gap:14px;padding-top:72px;}
  .j-head p{display:none;}
  .quill{width:40px;}
  .ch-journal h2{font-size:2rem;}
  .well{height:112px;}
  .card{gap:8px;}
  .card p{font-size:.92rem;line-height:1.5;}
}

/* no motion: the cards are a normal swipeable row */
html:not(.motion) .ch-journal .stage{padding-block:96px 64px;}
html:not(.motion) .track{overflow-x:auto;scroll-snap-type:x mandatory;}
html:not(.motion) .card{scroll-snap-align:center;}

/* ── 3 · Awaken Learning: its own dawn, its own voice (from css/learning.css) ── */
.ch-learning{--len:220vh;--night:#0b0a1f;--dusk:#1d1846;--sun:#ffb347;--ember:#ff6a3d;background:var(--night);color:#f4f1ff;font-family:var(--sans);}
.sky{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 70% at 50% 100%,#3a2466 0%,var(--dusk) 38%,var(--night) 75%);}
.sky .sun{position:absolute;left:50%;bottom:-38vmin;width:76vmin;height:76vmin;margin-left:-38vmin;border-radius:50%;
  background:radial-gradient(circle,#ffe2a8 0%,var(--sun) 35%,var(--ember) 62%,transparent 72%);filter:blur(6px);
  opacity:clamp(0,var(--p,1) * 2,.9);transform:translateY(calc((1 - clamp(0,var(--p,1) * 1.6,1)) * 40vmin));}
.sky .horizon{position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--sun),transparent);box-shadow:0 0 40px 8px rgba(255,140,60,.35);}
.learn{display:grid;align-content:center;gap:clamp(14px,2.6vh,24px);padding:84px var(--gutter) 40px;}
.learn-name{font-weight:700;color:var(--sun);}
.ch-learning h2{font:900 clamp(2.8rem,10vw,7.5rem)/.95 var(--sans);letter-spacing:-.045em;max-width:12ch;}
.ch-learning h2 span{background:linear-gradient(90deg,#ffe2a8,var(--sun) 45%,var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent;}
.learn-text{max-width:36em;font-size:clamp(1.02rem,1.9vw,1.3rem);line-height:1.55;}
.learn-status{display:inline-flex;align-items:center;gap:10px;width:fit-content;font-weight:500;}
.learn-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 12px var(--sun);}
.learn-pill{width:fit-content;padding:12px 22px;border-radius:999px;border:1px solid rgba(255,179,71,.5);color:var(--sun);font-weight:600;}

/* ── 4 · Awaken Kids: the page turns red, Tash slides in and says hi ── */
.ch-kids{--len:240vh;--red:#B9473F;--cream:#F6F0DE;background:var(--red);color:var(--cream);}
.kids{display:grid;align-content:center;justify-items:center;gap:clamp(16px,3vh,32px);padding:80px var(--gutter) 32px;text-align:center;}
@media (min-width:900px){.kids{grid-template-columns:1fr 1fr;align-items:center;justify-items:start;text-align:left;column-gap:64px;}.tash{order:2;justify-self:center;}}
.tash{position:relative;--t:clamp(0,(var(--p,1) - .04) / .2,1);transform:translateX(calc((1 - var(--t)) * 80vw)) rotate(calc((1 - var(--t)) * 16deg));}
.porthole{overflow:hidden;background:#F6F0DE;border-radius:999px 999px 28px 28px;padding:20px 30px 0;box-shadow:0 18px 40px rgba(0,0,0,.2);}
.porthole img{display:block;height:min(30vh,300px);width:auto;transform-origin:50% 100%;animation:hi 1.8s ease-in-out infinite;}
@keyframes hi{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg) translateY(-6px);}}
.bubble{position:absolute;top:-6px;left:62%;white-space:nowrap;padding:10px 16px;border-radius:18px 18px 18px 4px;background:#fff;color:var(--red);
  font:800 clamp(1rem,2vw,1.3rem)/1 var(--display);box-shadow:0 10px 24px rgba(0,0,0,.18);transform-origin:0 100%;
  transform:scale(clamp(0,(var(--p,1) - .22) / .06,1));}
.kids-text{display:grid;gap:clamp(10px,2vh,18px);justify-items:inherit;}
.ch-kids h2{font:800 clamp(2.6rem,8vw,6rem)/1 var(--display);letter-spacing:-.04em;}
.kids-text p{max-width:30ch;font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.45;}
.kids-status{padding:8px 16px;border-radius:999px;background:rgba(0,0,0,.16);font-size:.95rem !important;}

/* ── 5 · Founder ── */
.ch-founder{--len:220vh;background:var(--black);color:var(--white);}
.founder{display:grid;align-content:center;gap:clamp(14px,2.6vh,28px);padding:76px var(--gutter) 28px;}
@media (min-width:900px){.founder{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:center;column-gap:64px;}}
.f-photo{margin:0;--t:clamp(0,(var(--p,1) - .02) / .22,1);clip-path:inset(calc((1 - var(--t)) * 100%) 0 0 0 round 20px);}
.f-photo img{display:block;width:100%;height:min(24vh,240px);object-fit:cover;object-position:50% 22%;border-radius:20px;}
@media (min-width:900px){.f-photo img{height:min(72vh,660px);}}
.f-text{display:grid;gap:clamp(10px,2vh,20px);}
.f-text h2{font:600 1rem/1 var(--sans);opacity:.7;}
.f-quote{font:500 clamp(1rem,1.9vw,1.55rem)/1.42 var(--display);max-width:36ch;}
.f-quote em{font-style:normal;font-weight:700;}
.f-attrib{font-weight:600;}
.f-pill{width:fit-content;padding:12px 22px;border-radius:999px;border:1.5px solid currentColor;font-weight:600;}

/* ── 6 · Social: platforms slide past right→left (same row as the Journal), each a full screen
   in its own colour with the live preview from /social (css/social.css, recoloured per platform) ── */
.ch-social{--len:700vh;color:#fff;font-family:var(--sans);}
.s-track{gap:0;padding:0;height:100%;}
html:not(.motion) .s-track{height:auto;}
.sp{flex:none;width:100vw;min-height:100%;background:var(--bg);display:grid;align-content:safe center;justify-items:center;
  gap:clamp(14px,3vh,30px);padding:76px var(--gutter) 28px;grid-template-columns:minmax(0,1fr);grid-template-areas:"pv" "text";}
.sp-text{grid-area:text;width:min(100%,980px);display:grid;gap:clamp(8px,1.4vh,14px);align-content:start;}
.sp .m,.sp .s-map{grid-area:pv;}
.sp .s-map{width:min(100%,520px);}
@media (min-width:900px){
  .sp-text{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;}
  .sp-text > :not(.finds){grid-column:1;}
  .sp-text .finds{grid-column:2;grid-row:1 / span 4;align-self:center;}
}
.sp h2,.sp-close h3{font:800 clamp(2.2rem,6vw,4.8rem)/1 var(--display);letter-spacing:-.035em;max-width:14ch;}
.sp h3{font:800 clamp(2.4rem,6vw,5rem)/.95 var(--display);letter-spacing:-.04em;}
.sp h4{font:700 clamp(1.2rem,2.2vw,1.7rem)/1.15 var(--display);}
.sp p{max-width:44ch;line-height:1.5;opacity:.92;}
.sp a:not(.follow){text-decoration:underline;text-underline-offset:3px;}
.finds{list-style:none;display:grid;gap:10px;font-size:.95rem;line-height:1.45;}
.finds li{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.12);}
.finds b{display:block;}
.follow-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.follow{padding:12px 20px;border-radius:999px;background:#fff;color:var(--pc);font-weight:700;}
.handle{opacity:.8;font-size:.92rem;}
@media (max-width:640px){.sp{padding-right:calc(var(--gutter) + 18px);}.sp h3{font-size:clamp(2.2rem,10vw,3rem);}}
@media (max-width:899px){.finds{display:none;}}
@media (max-height:740px){.sp-text > p:not(.follow-row){display:none;}}

/* ── the platform layouts: each looks like a real post there, and plays while its panel is in view ── */
.m{position:relative;width:min(100%,500px);border-radius:18px;background:#fff;color:#0f1419;font:14px/1.4 var(--sans);
  box-shadow:0 24px 60px rgba(0,0,0,.3);overflow:hidden;text-align:left;}
.m *{animation-play-state:paused;}
.sp.on .m *{animation-play-state:running;}
.m .a{animation:seq 8s var(--d,0s) infinite both;}
@keyframes seq{0%{opacity:0;transform:translateY(10px);}6%,92%{opacity:1;transform:none;}100%{opacity:0;}}
.m svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.m-head{display:flex;align-items:center;gap:10px;padding:14px 16px 8px;}
.m .av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9em;color:#fff;background:var(--pc);}
.who{display:grid;min-width:0;line-height:1.25;}
.who small{color:#5b6470;font-size:.86em;}
.m-text{padding:2px 16px 10px;}
.m-actions{display:flex;justify-content:space-around;gap:6px;padding:8px 10px 12px;border-top:1px solid #eef0f3;color:#5b6470;font-size:.86em;font-weight:600;}
.m-actions > span{display:inline-flex;align-items:center;gap:6px;}
/* the like: a tap, a ripple, then it fills in the platform's colour */
.like{position:relative;--lc:var(--pc);}
.like svg{animation:likefill 8s infinite both;}
@keyframes likefill{0%,42%{fill:transparent;stroke:currentColor;transform:none;}46%{fill:var(--lc);stroke:var(--lc);transform:scale(1.3);}52%,94%{fill:var(--lc);stroke:var(--lc);transform:none;}100%{fill:transparent;stroke:currentColor;}}
.like::after{content:"";position:absolute;left:10px;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--lc);opacity:0;animation:ripple 8s infinite;}
@keyframes ripple{0%,43%{opacity:0;transform:scale(.4);}46%{opacity:.8;}58%,100%{opacity:0;transform:scale(1.7);}}

.m-link{display:grid;grid-template-columns:118px 1fr;margin:0 16px 12px;border:1px solid #e3e6ea;border-radius:10px;overflow:hidden;}
.m-thumb{display:grid;place-items:center;padding:10px;background:var(--pc);color:#fff;font-weight:700;font-size:.82em;line-height:1.25;text-align:center;}
.m-cap{display:grid;align-content:center;gap:2px;padding:10px 12px;}
.m-cap small{color:#5b6470;}

.rd-title{display:block;padding:2px 16px 8px;font-size:1.06em;}
.m-rd .rd-body{padding:0 16px 10px;}
.m-rd .m-actions{justify-content:flex-start;gap:16px;border-top:0;padding-left:16px;}
.vote{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f1f3f5;color:#1c1b22;}
.rd-reply{display:flex;align-items:center;gap:8px;margin:0 16px 14px !important;padding:8px 12px;border-left:2px solid #e3e6ea;color:var(--pc);font-weight:600;opacity:1 !important;}
.m .av.sm{width:22px;height:22px;}

.m-yt{width:auto;background:#0f0f0f;color:#fff;border-radius:22px;}
.yt-screen{position:relative;height:clamp(280px,40vh,380px);aspect-ratio:9/16;font-size:15px;}
.m-yt .yt-frame{height:100%;width:100%;border-radius:0;box-shadow:none;background:var(--pc);padding:0 58px 70px 14px;}
.yt-rail{position:absolute;right:8px;bottom:62px;display:grid;gap:12px;}
.yt-rail span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.3);}
.yt-rail .dis svg{transform:rotate(180deg);}
.m-yt .like{--lc:#fff;}
.m-yt .like::after{left:50%;}
.yt-meta{position:absolute;left:12px;right:56px;bottom:16px;display:grid;gap:4px;font-size:.78em;line-height:1.3;}
.sub{display:inline-block;margin-left:4px;padding:2px 9px;border-radius:999px;background:#fff;color:#0f0f0f;font-weight:700;}

.m-ig{width:clamp(240px,32vh,340px);}
.m-ig .av{background:conic-gradient(#F58529,#DD2A7B,#8134AF,#515BD4,#F58529);padding:2px;width:36px;height:36px;}
.m-ig .av i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#fff;border:2px solid #fff;color:#1c1b22;font-style:normal;font-size:.72em;}
.dots3{margin-left:auto;color:#5b6470;}
.ig-media{position:relative;aspect-ratio:1;background:#fafafa;font-size:15px;overflow:hidden;}
.m-ig .m-actions{justify-content:flex-start;gap:16px;border-top:0;color:#1c1b22;padding-left:14px;}
.m-ig .save{margin-left:auto;}
.m-ig .like{--lc:#ED4956;}
.m-ig .m-text{font-size:.9em;padding:0 14px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.m-x{padding-top:12px;}
.x-item{position:relative;display:flex;gap:10px;padding:4px 16px 10px;}
.x-item:not(:nth-last-child(2))::before{content:"";position:absolute;left:33px;top:44px;bottom:-4px;width:2px;background:#cfd9de;}
.m-x .av{width:36px;height:36px;background:#000;font-size:.72em;}
.x-item small{color:#536471;}
.x-item p{margin-top:2px;}
.m-x .m-actions{border-top:1px solid #eff3f4;}
.m-x .like{--lc:#F91880;}

.m-gh{font-size:13px;}
.gh-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;color:#0969da;}
.gh-top svg{color:#59636e;width:16px;height:16px;}
.gh-pub{padding:0 8px;border:1px solid #d0d7de;border-radius:999px;color:#59636e;font-size:.85em;}
.gh-tabs{display:flex;gap:16px;padding:0 14px;border-bottom:1px solid #d0d7de;color:#59636e;}
.gh-tabs span{padding:8px 0;}
.gh-tabs .on{color:#1f2328;font-weight:600;box-shadow:inset 0 -2px #fd8c73;}
.gh-files{list-style:none;margin:10px 14px;border:1px solid #d0d7de;border-radius:8px;overflow:hidden;}
.gh-files li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid #d8dee4;}
.gh-files li:first-child{border-top:0;}
.gh-files svg{width:16px;height:16px;color:#59636e;}
.gh-files svg.fd{fill:#54aeff;stroke:none;}
.gh-term{margin:0 14px 14px;padding:10px 12px;border-radius:8px;background:#1c1b22;color:#eef0f7;}
.gh-term code{display:flex;flex-direction:column;gap:.5em;font:500 .92em/1.4 ui-monospace,Menlo,monospace;}
@media (min-width:900px){.m{font-size:16px;}.m:not(.m-yt,.m-ig){width:min(100%,580px);}.m-gh{font-size:14.5px;}.yt-screen{height:clamp(300px,44vh,420px);}.m-ig{width:clamp(260px,36vh,360px);}}

/* the hub map draws itself when its panel arrives */
.s-map{height:auto;overflow:visible;}
.sp:not(.on) .s-map *{animation-play-state:paused;}

/* ---------- hub map ---------- */
.s-map{width:100%;height:auto;overflow:visible;display:block;}.s-map .ray{fill:none;stroke:#fff;stroke-width:1.6;stroke-opacity:.38;stroke-dasharray:1;stroke-dashoffset:1;
  animation:ray-draw .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.35s + var(--i) * .12s);transition:stroke-opacity .25s,stroke-width .25s;}.s-map .ray.on{stroke-opacity:1;stroke-width:2.6;}.s-map .spark{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.07 .93;stroke-dashoffset:.07;opacity:0;
  animation:spark 7s linear infinite;animation-delay:calc(1.7s + var(--i) * .4s);}
@keyframes ray-draw{to{stroke-dashoffset:0;}}
@keyframes spark{0%{stroke-dashoffset:.07;opacity:1;}18%{stroke-dashoffset:-.93;opacity:1;}19%,100%{opacity:0;}}.s-map .node{cursor:pointer;}.s-map .node .dot,.node .halo{transform-box:fill-box;transform-origin:center;}.s-map .node .dot{fill:#fff;transform:scale(0);animation:pop .55s cubic-bezier(.34,1.45,.64,1) forwards;animation-delay:calc(.95s + var(--i) * .12s);}.s-map .node .halo{fill:#fff;opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.34,1.45,.64,1);}.s-map .node text{font:600 17px Inter,system-ui,sans-serif;fill:#fff;opacity:0;animation:fade .5s ease forwards;animation-delay:calc(1.1s + var(--i) * .12s);}.s-map .node:hover .halo,.node:focus .halo,.node.on .halo{opacity:.16;transform:scale(1.25);}.s-map .node:hover text,.node.on text{fill:#fff;}.s-map .hub .hub-core{fill:#fff;}.s-map .hub .hub-ring{fill:none;stroke:#fff;stroke-opacity:.22;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:transform .4s cubic-bezier(.34,1.45,.64,1),stroke-opacity .3s;}.s-map .hub:hover .hub-ring,.hub:focus .hub-ring{transform:scale(1.12);stroke-opacity:.5;}.s-map .hub text{font:700 15px Inter,system-ui,sans-serif;fill:var(--blue);letter-spacing:.01em;}
@keyframes pop{to{transform:scale(1);}}
@keyframes fade{to{opacity:1;}}

/* ---------- previews: shared stage ---------- */
.pv{position:relative;height:160px;border-radius:16px;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;font-size:12px;
  display:flex;align-items:center;justify-content:center;}
.pv-big{height:clamp(180px,34vh,380px);font-size:clamp(14px,1.6vw,19px);border-radius:26px;}
.s-stage{min-width:0;}
.pv *{animation-play-state:paused;}
.sp.on .pv *{animation-play-state:running;}

/* Instagram: a carousel that swipes itself */
.ig-track{position:absolute;inset:12% 0 22%;display:flex;width:300%;animation:ig 6.6s cubic-bezier(.22,1,.36,1) infinite;}
.ig-slide{width:33.333%;padding:0 12%;display:flex;flex-direction:column;justify-content:center;gap:.35em;}
.ig-slide b,.ig-slide small{display:block;}
.ig-slide{background:none;}
.ig-slide b{font-size:1.25em;line-height:1.2;color:var(--pc);font-weight:700;}
.ig-slide small{color:#6a6676;font-size:1em;}
.ig-track::before{content:none;}
.ig-dots{position:absolute;bottom:9%;display:flex;gap:.5em;}
.ig-dots i{width:.55em;height:.55em;border-radius:50%;background:color-mix(in srgb,var(--pc) 22%,transparent);animation:dot 6.6s infinite;}
.ig-dots i:nth-child(2){animation-delay:2.2s;} .ig-dots i:nth-child(3){animation-delay:4.4s;}
@keyframes ig{0%,26%{transform:translateX(0);}33%,59%{transform:translateX(-33.333%);}66%,92%{transform:translateX(-66.666%);}100%{transform:translateX(0);}}
@keyframes dot{0%,30%{background:var(--pc);transform:scale(1.25);}34%,100%{background:color-mix(in srgb,var(--pc) 22%,transparent);transform:none;}}

/* YouTube: a 10-second Short in miniature */
.yt-frame{position:relative;height:86%;aspect-ratio:9/16;border-radius:.9em;background:var(--pc);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:0 .8em;text-align:center;box-shadow:0 .6em 1.4em rgba(54,60,138,.3);}
.yt-line{font-weight:700;line-height:1.2;position:relative;}
.yt-line.l1{animation:yt1 6s infinite;}
.yt-line.l1::after{content:"";position:absolute;left:0;top:55%;height:.12em;width:0;background:#fff;animation:strike 6s infinite;}
.yt-line.l2{opacity:0;font-weight:500;animation:yt2 6s infinite;}
.yt-lock{width:1.5em;height:1.2em;border-radius:.25em;background:#fff;position:relative;transform:scale(0);animation:lock 6s cubic-bezier(.34,1.45,.64,1) infinite;}
.yt-lock::before{content:"";position:absolute;left:.3em;right:.3em;top:-.6em;height:.75em;border:.18em solid #fff;border-bottom:none;border-radius:.6em .6em 0 0;}
.yt-bar{position:absolute;left:.7em;right:.7em;bottom:.7em;height:.25em;border-radius:1em;background:rgba(255,255,255,.3);overflow:hidden;}
.yt-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(0);animation:bar 6s linear infinite;}
@keyframes yt1{0%{opacity:0;}8%,40%{opacity:1;}48%,100%{opacity:0;}}
@keyframes strike{0%,22%{width:0;}32%,100%{width:100%;}}
@keyframes yt2{0%,46%{opacity:0;transform:translateY(.4em);}54%,92%{opacity:1;transform:none;}100%{opacity:0;}}
@keyframes lock{0%,52%{transform:scale(0);}62%,92%{transform:scale(1);}100%{transform:scale(0);}}
@keyframes bar{to{transform:scaleX(1);}}

/* X: a thread that writes itself */
.pv-x{flex-direction:column;align-items:stretch;justify-content:center;gap:.7em;padding:0 9%;}
.pv-x::before{content:"";position:absolute;left:calc(9% + .45em);top:24%;bottom:24%;width:.14em;background:color-mix(in srgb,var(--pc) 25%,transparent);}
.x-post{position:relative;padding-left:1.8em !important;font-size:1em;line-height:1.35;color:#1c1b22;opacity:0;animation:post 6s cubic-bezier(.22,1,.36,1) infinite;}
.x-post::before{content:"";position:absolute;left:.1em;top:.2em;width:.9em;height:.9em;border-radius:50%;background:var(--pc);}
.x-post:nth-child(2){animation-delay:.6s;} .x-post:nth-child(3){animation-delay:1.2s;}
@keyframes post{0%{opacity:0;transform:translateY(.6em);}10%,85%{opacity:1;transform:none;}95%,100%{opacity:0;}}

/* Reddit: a question that gets answered */
.pv-rd{justify-content:flex-start;align-items:center;gap:1em;padding:0 9%;}
.rd-vote{flex:none;}
.rd-up{display:block;width:0;height:0;border-left:.7em solid transparent;border-right:.7em solid transparent;border-bottom:.95em solid var(--pc);animation:up 6s cubic-bezier(.34,1.45,.64,1) infinite;}
.rd-body{display:flex;flex-direction:column;gap:.45em;min-width:0;flex:1;}
.rd-body b{font-size:1.05em;line-height:1.3;color:#1c1b22;}
.rd-body i{display:block;height:.45em;border-radius:1em;background:color-mix(in srgb,var(--pc) 18%,transparent);transform-origin:left;transform:scaleX(0);animation:line 6s cubic-bezier(.22,1,.36,1) infinite;}
.rd-body i:nth-of-type(2){width:86%;animation-delay:.25s;} .rd-body i:nth-of-type(3){width:64%;animation-delay:.5s;}
.rd-body em{font-style:normal;font-size:.95em;color:var(--pc);font-weight:600;opacity:0;animation:fadeloop 6s infinite;animation-delay:1.1s;}
@keyframes up{0%,10%{transform:none;}18%{transform:translateY(-.5em);}26%,100%{transform:none;}}
@keyframes line{0%{transform:scaleX(0);}14%,88%{transform:scaleX(1);}100%{transform:scaleX(0);}}
@keyframes fadeloop{0%{opacity:0;}10%,85%{opacity:1;}100%{opacity:0;}}

/* GitHub: the real check, typed out */
.pv-gh{background:#1c1b22;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);justify-content:flex-start;padding:0 8%;}
.pv-gh code{display:flex;flex-direction:column;gap:.6em;font:500 .9em/1.4 ui-monospace,"SF Mono",Menlo,monospace;color:#eef0f7;}
.gh-l{display:block;white-space:nowrap;overflow:hidden;}
.gh-cmd::before{content:"$ ";color:#9aa3ff;}
.gh-cmd{width:0;animation:type 6s steps(39,end) infinite;}
.gh-out{color:#8fe0b4;opacity:0;animation:out 6s infinite;}
.gh-out::before{content:"✓ ";}
@keyframes type{0%{width:0;}40%,92%{width:39ch;}100%{width:0;}}
@keyframes out{0%,46%{opacity:0;}52%,92%{opacity:1;}100%{opacity:0;}}

/* LinkedIn: a note from the founder */
.pv-li{justify-content:flex-start;align-items:flex-start;gap:.9em;padding:12% 9% 0;}
.li-av{flex:none;width:2.6em;height:2.6em;border-radius:50%;background:var(--pc);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.05em;box-shadow:none;}
.li-txt{display:flex;flex-direction:column;gap:.15em;min-width:0;}
.li-txt b{font-size:1.02em;color:#1c1b22;}
.li-txt small{font-size:.9em;color:#6a6676;}
.li-txt p{margin-top:.6em !important;font-size:.98em;line-height:1.4;color:#1c1b22;opacity:0;animation:fadeloop 6s infinite;animation-delay:.4s;}

/* ── footer: every page, grouped, small and quiet ── */
.foot{--line:color-mix(in srgb,var(--blue) 14%,transparent);background:var(--white);color:var(--blue);border-top:1px solid var(--line);
  padding:56px var(--gutter) 24px;font-size:.85rem;line-height:1.45;}
.foot-top{display:grid;gap:40px;}
@media (min-width:1000px){.foot-top{grid-template-columns:minmax(220px,1fr) 3.2fr;column-gap:64px;}}
.foot-logo{display:inline-flex;align-items:center;gap:10px;font:700 1.1rem/1 var(--display);letter-spacing:-.01em;}
.foot-logo svg{width:28px;height:28px;}
.foot-brand p{margin-top:10px;opacity:.7;}
.foot-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:240px;}
.foot-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);transition:background-color .2s,color .2s;}
.foot-social a:hover{background:var(--blue);color:var(--white);}
.foot-social svg{width:16px;height:16px;}
.foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px 28px;}
.foot h2{font:600 .78rem/1.3 var(--sans);opacity:.6;margin-bottom:12px;}
.foot ul{list-style:none;}
.foot-links ul{display:grid;gap:8px;}
.foot-links a,.foot-bottom a{opacity:.85;}
.foot-links a:hover,.foot-bottom a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:.8rem;}
.foot-bottom p{opacity:.7;}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:18px;}
@media (max-width:640px){.foot-links{grid-template-columns:1fr 1fr;}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;}}

/* reduced motion: no scroll tracking, so the bar stays over the black opening */
html:not(.motion) .bar{position:absolute;}
body[data-chapter=""] .dots{opacity:0;pointer-events:none;}
/* phones: keep text clear of the section dots */
@media (max-width:640px){.night,.few,.brand,.learn,.kids,.founder{padding-right:calc(var(--gutter) + 18px);}}
/* over the footer the bar gets a soft backing, so it never sits on top of the links */
body[data-chapter=""] .bar{background:color-mix(in srgb,var(--white) 90%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.bar{transition:color .35s,background-color .35s;}