/* Home page. Reuses the About hero word, photo frame and stamp, the project cards, post cards and the ask panel. */
.home-hero{position:relative;overflow:hidden;margin-inline:calc(50% - 50vw + 14px);padding:clamp(28px,4vw,56px) max(22px,calc(50vw - 560px)) clamp(56px,7vw,96px);border-radius:var(--lr);background:#416EDD;color:#fff;text-align:center;transform-origin:50% 100%}
.home-hero>:not(canvas):not(.about-hero-word){position:relative}
.home-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.home-hero .about-hero-word{inset-block:auto;inset-block-start:6%;color:rgb(255 255 255/.07)}
.home-hero-in{display:flex;flex-direction:column;align-items:center}
.home-kick{justify-content:center}
.home-stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,64px);width:100%;margin-block:clamp(22px,3vw,40px) clamp(30px,4vw,54px)}
.home-photo{width:clamp(230px,38vh,400px);max-width:70vw;perspective:900px}
.home-photo .auth-photo-img{border-width:8px;border-radius:40px;box-shadow:0 40px 80px -30px rgb(12 22 64/.7)}
.home-photo .auth-photo-frame{border-radius:40px}
.home-photo .auth-photo-light{border-radius:32px}
.home-photo .auth-stamp{inset-block:auto -46px;inset-inline-end:-46px;width:124px;height:124px;border-radius:50%;background:#F3E5DA;box-shadow:0 18px 30px -16px rgb(12 22 64/.7)}
.home-photo .auth-stamp text{fill:#2857C0}
.home-photo .auth-stamp .ti{width:auto;height:auto;background:none;color:#2857C0;font-size:1.9rem}
.home-note{margin:0;padding:0;list-style:none;display:grid;gap:14px;font-weight:600}
.home-note-a{justify-items:start;text-align:start}
.home-note-a li{display:flex;align-items:baseline;gap:12px;padding-block-end:12px;border-block-end:1px solid rgb(255 255 255/.25);width:min(100%,240px)}
.home-note-a li>span:first-child{font:500 .72rem "JetBrains Mono",monospace;color:rgb(255 255 255/.7)}
.home-note-b{justify-items:end}
.home-mail{display:inline-flex;align-items:center;gap:10px;padding:10px 4px;border-block-end:2px solid #F3E5DA;color:#F3E5DA;font:500 clamp(.95rem,1.5vw,1.2rem) "JetBrains Mono",monospace;transition:gap .3s}
.home-mail:hover{gap:16px}
.home-soc{display:flex;gap:8px}
.home-soc a{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgb(255 255 255/.4);border-radius:14px;font-size:1.25rem;transition:background .3s,color .3s,transform .3s}
.home-soc a:hover{background:#fff;color:#2857C0;transform:translateY(-4px)}
.home-h1{margin:0;max-width:16ch;font-weight:800;font-size:clamp(2.7rem,8.2vw,7.4rem);line-height:1.18;color:#fff}
.home-lead{margin:18px 0 28px;max-width:46ch;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.9;color:rgb(255 255 255/.9)}
.home-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.home-ghost{display:inline-flex;align-items:center;gap:10px;height:60px;padding-inline:26px;border:1.5px solid rgb(255 255 255/.5);border-radius:999px;font-weight:600;transition:background .3s,color .3s}
.home-ghost:hover{background:#fff;color:#2857C0}
.home-ghost .ti{font-size:1.3rem;transition:transform .3s}
.home-ghost:hover .ti{transform:translateY(4px)}
.home-hint{position:absolute!important;inset-block-end:18px;left:50%;width:1.5px;height:40px;background:rgb(255 255 255/.3);overflow:hidden}
.home-hint i{position:absolute;inset:0;background:#fff;animation:home-hint 1.8s cubic-bezier(.6,0,.2,1) infinite}
@keyframes home-hint{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
.home-say{max-width:24ch}

.home-sec{padding-block:clamp(36px,6vw,96px) 0}
.home-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 24px;margin-block-end:20px}
.home-head .about-h{margin:0}
.home-more{display:inline-flex;align-items:center;gap:8px;height:46px;padding-inline:20px 16px;border:1.5px solid var(--line);border-radius:999px;font-weight:600;transition:background .3s,color .3s,border-color .3s}
.home-more .ti{font-size:1.2rem;transition:transform .45s cubic-bezier(.65,0,.35,1)}
[dir=rtl] .home-more .ti,[dir=rtl] .hs-end .ti,[dir=rtl] .cr-go .ti{transform:scaleX(-1)}
.home-more:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.home-more:hover .ti{transform:rotate(45deg)}
[dir=rtl] .home-more:hover .ti{transform:scaleX(-1) rotate(45deg)}

/* Sliders: native horizontal scroll with snap, plus drag, arrows, counter and a progress line. */
.hs-track{display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(50% - 50vw);padding:clamp(22px,3vw,40px) max(24px,calc(50vw - 536px)) 6px;scroll-padding-inline:max(24px,calc(50vw - 536px));cursor:grab}
.hs-track::-webkit-scrollbar{display:none}
.hs-track.drag{cursor:grabbing;scroll-snap-type:none}
.hs-track.drag a{pointer-events:none}
.hs-slide{flex:none;width:min(80vw,540px);scroll-snap-align:start}
.hs-slide .pj{margin:0!important}
.hs-nav{display:flex;align-items:center;gap:14px;padding-block-start:clamp(18px,2.4vw,30px)}
.hs-count{font:500 .85rem "JetBrains Mono",monospace;color:var(--muted)}
.hs-count b{font:800 1.5rem "Alexandria",sans-serif;color:var(--pr)}
.hs-bar{flex:1;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.hs-bar i{display:block;height:100%;background:var(--pr);transform:scaleX(var(--hp,.1));transform-origin:right;transition:transform .3s}
[dir=ltr] .hs-bar i{transform-origin:left}
.hs-b{display:grid;place-items:center;width:56px;height:56px;border:1.5px solid var(--line);border-radius:50%;font-size:1.4rem;transition:background .3s,color .3s,border-color .3s,transform .2s,opacity .3s}
[dir=ltr] .hs-b .ti{transform:scaleX(-1)}
.hs-b:hover{background:var(--pr);border-color:var(--pr);color:var(--onpr)}
.hs-b:active{transform:scale(.9)}
.hs-b:disabled{opacity:.35;pointer-events:none}
.hs-end{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/3;padding:clamp(22px,3vw,36px);border-radius:var(--lr);background:#312C3E;color:#F3E5DA}
[data-theme=dark] .hs-end{border:1px solid #4b445b}
.hs-end::after{content:"";position:absolute;inset:0;z-index:-1;background:#416EDD;transform:translateY(101%);transition:transform .6s cubic-bezier(.65,0,.35,1)}
.hs-end:hover::after{transform:none}
.hs-end span{font:500 .85rem "JetBrains Mono",monospace;color:#869BF0}
.hs-end strong{font:800 clamp(1.8rem,4vw,3rem)/1.25 "Alexandria",sans-serif}
.hs-end .ti{align-self:flex-end;font-size:3rem;transition:transform .6s cubic-bezier(.65,0,.35,1)}
.hs-end:hover .ti{transform:rotate(45deg)}
[dir=rtl] .hs-end:hover .ti{transform:scaleX(-1) rotate(45deg)}

/* Courses slider sits on a charcoal panel. */
.hs-dark{margin-block-start:clamp(36px,6vw,96px);margin-inline:calc(50% - 50vw + 14px);padding:clamp(36px,5vw,72px) max(22px,calc(50vw - 560px));border-radius:var(--lr);background:#312C3E;color:#F3E5DA;--line:rgb(243 229 218/.18);--muted:rgb(243 229 218/.7);--pr:#869BF0;--onpr:#1f1b29;--ink:#F3E5DA;--bg:#312C3E}
[data-theme=dark] .hs-dark{border:1px solid #4b445b}
.hs-dark .hs-track{margin-inline:calc(-1*max(22px,calc(50vw - 560px)));padding-inline:max(22px,calc(50vw - 560px));scroll-padding-inline:max(22px,calc(50vw - 560px))}
.hs-dark .hs-slide{width:min(76vw,400px)}
.cr{display:flex;flex-direction:column;gap:12px;height:100%;padding:14px 14px 20px;border:1px solid rgb(243 229 218/.16);border-radius:28px;background:rgb(243 229 218/.05);color:inherit;transition:background .4s,border-color .4s,transform .5s cubic-bezier(.65,0,.35,1)}
.cr:hover{background:#416EDD;border-color:#416EDD;transform:translateY(-8px)}
.cr-media{position:relative;overflow:hidden;display:block;aspect-ratio:16/10;border-radius:18px;background:#416EDD}
.cr-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.cr:hover .cr-media img{transform:scale(1.06)}
.cr-n{position:absolute;inset-block-start:12px;inset-inline-start:12px;padding:4px 12px;border-radius:999px;background:#F3E5DA;color:#312C3E;font:500 .75rem "JetBrains Mono",monospace}
.cr-k{font:500 .78rem "JetBrains Mono","IBM Plex Sans Arabic",monospace;color:#869BF0;transition:color .4s}
.cr:hover .cr-k{color:#fff}
.cr strong{flex:1;font:800 clamp(1.3rem,2.2vw,1.7rem)/1.4 "Alexandria",sans-serif}
.cr-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block-start:14px;border-block-start:1px solid rgb(243 229 218/.16)}
.cr-price{font:500 1.15rem "JetBrains Mono",monospace;color:#F3E5DA}
.cr-price del{opacity:.55;font-size:.85em;margin-inline-end:8px}
.cr-price ins{text-decoration:none}
.cr-go{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem}
.cr-go .ti{font-size:1.2rem;transition:transform .45s cubic-bezier(.65,0,.35,1)}
.cr:hover .cr-go .ti{transform:rotate(45deg)}
[dir=rtl] .cr:hover .cr-go .ti{transform:scaleX(-1) rotate(45deg)}

/* Skills: two lines that slide against each other with the scroll only. */
.home-band{overflow:hidden;margin-inline:calc(50% - 50vw);padding-block:clamp(40px,7vw,100px) 0}
.home-band-row{display:flex;justify-content:center;gap:clamp(22px,4vw,56px);margin:0;padding:0;list-style:none;white-space:nowrap;will-change:transform}
.home-band-row li{display:inline-flex;align-items:center;gap:.25em;font:800 clamp(2rem,6.4vw,5.4rem)/1.35 "Alexandria",sans-serif;color:color-mix(in srgb,var(--ink) 20%,transparent);transition:color .3s}
.home-band-row li .ti{font-size:.9em;color:var(--pr);opacity:.75;transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.home-band-row li:hover{color:var(--ink)}
.home-band-row li:hover .ti{opacity:1;transform:rotate(-10deg) scale(1.15)}

.home-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);padding-block-start:clamp(16px,2.4vw,28px)}
.home-ask{margin-block-start:clamp(40px,7vw,110px)}
.home-full{display:inline-block;margin-block-start:18px;margin-inline-start:6px;font-weight:600;color:#F3E5DA;text-decoration:underline;text-underline-offset:6px}
.home-chips{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:24px}
.home-chip{height:44px;padding-inline:14px 16px;font-size:.92rem;gap:8px}
.home-chip .ti{font-size:1.15rem;color:var(--pr)}
.home-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.home-chip[aria-pressed=true] .ti{color:inherit}
@media (max-width:860px){
	.home-stage{grid-template-columns:1fr;justify-items:center}
	.home-note-a{display:none}
	.home-note-b{order:2;justify-items:center}
	.home-photo .auth-stamp{width:96px;height:96px;inset-block-end:-30px;inset-inline-end:-28px}
	.home-posts{grid-template-columns:1fr}
	.hs-b{width:48px;height:48px}
	.home-band-row{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.home-hint i{animation:none}.cr,.cr *,.hs-end *{transition:none}}

/* Story: four chapters. Without script they read as a plain list; with it the section pins and the scroll plays them. */
.story{margin-inline:calc(50% - 50vw + 14px);border-radius:var(--lr);background:#312C3E;color:#F3E5DA;overflow:hidden}
[data-theme=dark] .story{border:1px solid #4b445b}
.story-pin{display:flex;flex-direction:column;gap:clamp(20px,3vw,36px);padding:clamp(28px,5vw,64px) max(22px,calc(50vw - 560px))}
.story-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.story-top .legal-kick>span:first-child{border-color:rgb(243 229 218/.5)}
.story-rail{position:relative;display:flex;align-items:center;justify-content:space-between;width:min(100%,280px);height:14px}
.story-rail::before,.story-rail i{content:"";position:absolute;inset-inline:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgb(243 229 218/.2)}
.story-rail i{background:#869BF0;transform:scaleX(var(--sp,0));transform-origin:right}
[dir=ltr] .story-rail i{transform-origin:left}
.story-rail b{position:relative;width:14px;height:14px;border-radius:50%;border:2px solid rgb(243 229 218/.35);background:#312C3E;transition:background .3s,border-color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.story-rail b.on{background:#869BF0;border-color:#869BF0;transform:scale(1.25)}
.story-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px);flex:1}
.story-vis{position:relative;aspect-ratio:1/.82;border-radius:32px;background:#221E2C;overflow:hidden}
.story-num{position:absolute;inset-block-end:-.18em;inset-inline-end:.06em;font:800 clamp(7rem,17vw,15rem)/1 "Alexandria",sans-serif;color:rgb(243 229 218/.07);pointer-events:none}
.sv{position:absolute;inset:11%;display:none}
.sv-site{display:block}
.sv-idea{display:none;place-items:center}
.sv-idea span{position:absolute;inset:0;margin:auto;width:34%;aspect-ratio:1;border:2px solid #869BF0;border-radius:50%;opacity:.5}
.sv-idea span:nth-child(2){width:58%;opacity:.3}
.sv-idea span:nth-child(3){width:84%;opacity:.15}
.sv-idea b{position:absolute;inset:0;margin:auto;width:13%;aspect-ratio:1;border-radius:50%;background:#F3E5DA;box-shadow:0 0 0 12px rgb(134 155 240/.25)}
.sv-wire{grid-template-columns:repeat(3,1fr);grid-template-rows:auto 1fr 1fr;gap:5%}
.sv-wire i{border:2px dashed rgb(243 229 218/.55);border-radius:14px}
.sv-wire i:first-child{grid-column:1/-1;height:34px}
.sv-wire i:nth-child(2){grid-column:1/3;grid-row:2/4}
.sv-code{flex-direction:column;justify-content:center;gap:7%;padding:6%}
.sv-code i{display:block;height:9px;border-radius:9px;background:#869BF0;transform-origin:left}
.sv-code i:nth-child(1){width:42%}.sv-code i:nth-child(2){width:70%;margin-left:8%;background:#F3E5DA}.sv-code i:nth-child(3){width:55%;margin-left:8%}.sv-code i:nth-child(4){width:30%;margin-left:16%;background:#B47D68}.sv-code i:nth-child(5){width:62%;margin-left:16%;background:#F3E5DA}.sv-code i:nth-child(6){width:38%;margin-left:8%}.sv-code i:nth-child(7){width:20%}
.sv-site{border-radius:18px;background:#FBF4EE;padding:5%}
.sv-nav{display:block;height:9px;width:38%;border-radius:9px;background:#312C3E;margin-block-end:5%}
.sv-hero{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;height:46%;padding:6%;border-radius:14px;background:#416EDD;margin-block-end:5%}
.sv-hero b{display:block;height:12px;width:70%;border-radius:12px;background:#fff}
.sv-hero b:last-child{width:44%;background:#F3E5DA}
.sv-site>i{display:inline-block;width:30%;height:24%;margin-inline-end:5%;border-radius:12px;background:#E3E6FB}
.sv-site>i:last-of-type{margin:0}
.sv-site em{position:absolute;inset-block-start:-18px;inset-inline-end:-18px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#869BF0;color:#1f1b29;font-size:1.9rem;font-style:normal;box-shadow:0 14px 30px -12px rgb(0 0 0/.6)}
.story-ch{position:relative;margin:0;padding:0;list-style:none;display:grid;gap:clamp(22px,3vw,40px)}
.story-ch li>span{font:500 .82rem "JetBrains Mono",monospace;color:#869BF0}
.story-ch strong{display:block;margin-block:8px 10px;font:800 clamp(2.4rem,6vw,5.4rem)/1.15 "Alexandria",sans-serif}
.story-ch p{margin:0;max-width:34ch;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.9;color:rgb(243 229 218/.82)}
.story.js .story-pin{height:100svh;min-height:560px;padding-block-start:112px}
.story.js .sv{display:grid;opacity:0;visibility:hidden}
.story.js .sv-code{display:flex}
.story.js .sv-site{display:block}
.story.js .story-ch{min-height:clamp(260px,40vh,420px)}
.story.js .story-ch li{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden}

/* Three words that slide in from opposite sides and fill with ink as they cross the screen. */
.mani{overflow:hidden;margin-inline:calc(50% - 50vw);padding:clamp(48px,9vw,140px) 24px 0;text-align:center}
.mani-line{margin:0;font:800 clamp(3.2rem,13vw,13rem)/1.12 "Alexandria",sans-serif;white-space:nowrap;color:var(--ink);will-change:transform}
.mani-line:nth-child(2){color:var(--pr)}
.mani-line:nth-child(3){font-size:clamp(2.2rem,9.4vw,9.4rem)}
.mani.js .mani-line{color:color-mix(in srgb,var(--ink) calc(var(--f,0)*100%),color-mix(in srgb,var(--ink) 14%,transparent))}
.mani.js .mani-line:nth-child(2){color:color-mix(in srgb,var(--pr) calc(var(--f,0)*100%),color-mix(in srgb,var(--ink) 14%,transparent))}

/* Principles: cards that stick and pile on top of each other. */
.stack{display:grid;gap:18px;padding-block-start:clamp(22px,3vw,40px)}
.stack-card{position:sticky;inset-block-start:calc(108px + var(--i)*22px);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px clamp(20px,4vw,56px);min-height:clamp(240px,34vh,340px);padding:clamp(26px,4vw,56px);border-radius:var(--lr);background:#312C3E;color:#F3E5DA;transform-origin:50% 0;box-shadow:0 -18px 40px -24px rgb(34 30 44/.5)}
[data-theme=dark] .stack-card{border:1px solid #4b445b}
.stack-card:nth-child(2){background:#416EDD;color:#fff}
.stack-card:nth-child(3){background:#F3E5DA;color:#312C3E}
.stack-card>.ti{grid-row:1/4;display:grid;place-items:center;width:clamp(84px,11vw,150px);aspect-ratio:1;border-radius:32px;background:rgb(255 255 255/.12);font-size:clamp(2.6rem,5vw,4.4rem)}
.stack-card:nth-child(3)>.ti{background:#416EDD;color:#fff}
.stack-n{font:500 .85rem "JetBrains Mono",monospace;opacity:.75}
.stack-card h3{margin:0;font:800 clamp(2rem,5vw,4.2rem)/1.2 "Alexandria",sans-serif;color:inherit}
.stack-card p{margin:0;max-width:44ch;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.9;opacity:.88}
@media (max-width:860px){
	.story-body{grid-template-columns:1fr}
	.story-vis{max-width:420px;width:100%;margin-inline:auto;aspect-ratio:1/.7}
	.story.js .story-ch{min-height:230px}
	.stack-card{grid-template-columns:1fr}
	.stack-card>.ti{grid-row:auto}
}

/* Bigger scroll motion: a line of huge words that travels with the scroll before the contact panel, and helpers for the scrubbed effects. */
.home-run{overflow:hidden;margin-inline:calc(50% - 50vw);padding-block:clamp(48px,8vw,120px) 0}
.home-run-row{display:flex;align-items:center;gap:clamp(18px,3vw,44px);width:max-content;margin:0;font:800 clamp(3rem,11vw,10rem)/1.3 "Alexandria",sans-serif;white-space:nowrap;will-change:transform}
.home-run-row span{color:var(--ink)}
.home-run-row span.o{color:var(--pr)}
.home-run-row .ti{font-size:.6em;color:var(--mocha)}
.hs-dark{will-change:clip-path}
.home .hs-slide,.home .bl-card,.home .about-row-t strong{will-change:transform}

/* ---- Round three: full-width photo hero, chapters, calmer story ---- */
.home-hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - 88px);margin-inline:calc(50% - 50vw);padding:0 max(24px,calc(50vw - 620px));border-radius:0 0 var(--lr) var(--lr);text-align:start}
.home-hero .about-hero-word{inset-block-start:auto;inset-block-end:8%}
.home-hero-in{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(16px,3vw,48px);width:100%}
.home-text{align-self:center;display:flex;flex-direction:column;align-items:flex-start;padding-block:clamp(36px,5vw,72px)}
.home-kick{justify-content:flex-start}
.home-h1{max-width:11ch;margin-block-start:20px;font-size:clamp(2.6rem,6.6vw,6.6rem);line-height:1.2}
.home-lead{margin:18px 0 26px}
.home-cta{justify-content:flex-start}
/* The photo is shown whole, large, and melts into the blue at its edges instead of sitting in a frame. */
.home-photo{align-self:end;width:min(50vw,86svh,760px);max-width:none;perspective:none}
.home-photo .auth-photo-img{border:0;border-radius:0;background:none;box-shadow:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 16%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 16%);mask-composite:intersect}
.home-photo .auth-stamp{inset-block:auto 12%;inset-inline:auto 4%}
.home-note-b{display:flex;flex-wrap:wrap;align-items:center;justify-items:start;gap:14px 22px;margin-block-start:clamp(22px,3vw,36px)}
.home-note-a{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,3vw,40px);padding-block:16px 22px;border-block-start:1px solid rgb(255 255 255/.28)}
.home-note-a li{width:auto;padding:0;border:0}
.home-hint{display:none}

/* Chapters: every section opens with its chapter number and one line that carries the story on. */
.home-head{align-items:flex-end;margin-block-end:clamp(18px,2.6vw,34px)}
.home-chap{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-weight:600;color:var(--pr)}
.home-chap span{padding:4px 12px;border:1px solid currentColor;border-radius:999px;font:500 .78rem "JetBrains Mono",monospace}
.home-head .about-h{display:block;font-size:clamp(2.2rem,5.6vw,4.4rem)}
.home-tell{margin:10px 0 0;max-width:44ch;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.9;color:var(--muted)}
.home .about-rows{border-block-start:1px solid var(--line)}

/* Story: a tall section with a sticky panel (no script pinning), edge to edge. */
.story{overflow:clip;margin-block-start:clamp(10px,2vw,30px)}
.story.js{height:380vh}
.story.js .story-pin{position:sticky;inset-block-start:0;height:100svh;min-height:560px;padding-block:clamp(96px,13vh,130px) clamp(24px,4vh,44px)}
.admin-bar .story.js .story-pin{inset-block-start:32px;height:calc(100svh - 32px)}
.story-top{align-items:flex-end}
.story-top .home-chap{color:#869BF0}
.story-h{margin:0;font:800 clamp(1.6rem,3.4vw,2.8rem)/1.3 "Alexandria",sans-serif;color:#F3E5DA}
.story-rail::before{display:block}
@media (max-width:860px){
	.home-hero{min-height:0}
	.home-hero-in{grid-template-columns:1fr}
	.home-photo{order:-1;width:min(100%,460px);margin-inline:auto}
	.home-text{padding-block:8px 28px}
	.home-note-a{display:grid;grid-template-columns:1fr;gap:8px}
	.home-note-b{order:0;justify-items:start}
	.story-top{flex-direction:column;align-items:flex-start}
}

/* ---- Hero in layers: field, giant word, rings, photo, arc, text. Each layer moves a different amount. ---- */
.hl{will-change:transform}
.home-hero{isolation:isolate}
.home-hero .about-hero-word{z-index:0}
.home-hero-in{z-index:2;align-items:center}
.home-photo{position:relative;z-index:1;width:min(46vw,74svh,700px);align-self:center;margin-block:clamp(18px,3vh,40px) clamp(18px,4vh,56px)}
.hl-img{display:block;position:relative}
.hl-rings{position:absolute;inset:-9%;z-index:-1}
.hl-rings i{position:absolute;inset:0;border:1.5px solid rgb(243 229 218/.3);border-radius:50%}
.hl-rings i:nth-child(2){inset:13%;border-style:dashed;border-color:rgb(243 229 218/.42)}
.hl-rings i:nth-child(3){inset:27%;border-color:rgb(243 229 218/.16);background:rgb(255 255 255/.05)}
.hl-arc{position:absolute;inset:-4%;width:108%;height:108%;overflow:visible;pointer-events:none;transform:rotate(-38deg)}
.hl-arc circle{fill:none;stroke:#F3E5DA;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:300 894}
.hl-arc circle:last-child{stroke:#312C3E;stroke-width:5;stroke-dasharray:70 1124;stroke-dashoffset:-520}
.hl-dots{position:absolute!important;z-index:0;inset-block-start:13%;inset-inline-start:4%;width:clamp(120px,16vw,240px);aspect-ratio:1;background:radial-gradient(circle,rgb(243 229 218/.5) 1.6px,transparent 2px) 0 0/22px 22px}
.hl-side{position:absolute!important;z-index:2;inset-block-start:50%;inset-inline-end:14px;writing-mode:vertical-rl;translate:0 -50%;font:500 .72rem "JetBrains Mono",monospace;letter-spacing:.24em;color:rgb(255 255 255/.6)}
.home-photo .auth-stamp{z-index:3;inset-block:auto 14%;inset-inline:auto 2%}
/* More air between the text blocks, and a wider headline so it breaks into fewer lines. */
.home-text{gap:0;padding-block:clamp(40px,6vw,84px)}
.home-kick{margin:0}
.home-h1{max-width:14ch;margin-block:clamp(26px,3.4vw,44px) 0;font-size:clamp(2.6rem,5.8vw,5.8rem);line-height:1.36}
.home-lead{margin:clamp(24px,3vw,38px) 0 clamp(30px,3.6vw,46px);max-width:40ch;line-height:2.05}
.home-cta{gap:16px}
.home-note-b{margin-block-start:clamp(34px,4.4vw,60px);gap:18px 30px}
.home-note-a{padding-block:20px 26px}
.home-chap>span[dir]{padding:4px 12px;border:1px solid currentColor;border-radius:999px;font:500 .78rem "JetBrains Mono",monospace}
.home-chap span{padding:0;border:0;font:inherit}
@media (max-width:860px){
	.home-photo{width:min(88%,430px);margin-block:26px 6px}
	.hl-side,.hl-dots{display:none}
	.home-h1{line-height:1.3}
}
/* The vertical label uses physical sides (its own writing mode would turn the logical ones), and the stamp sits on the text side of the photo. */
.hl-side{inset:auto;top:50%;left:16px;right:auto}
[dir=ltr] .hl-side{left:auto;right:16px}
.home-photo .auth-stamp{inset:auto;bottom:9%;right:-3%;left:auto;display:grid}
[dir=ltr] .home-photo .auth-stamp{right:auto;left:-3%}

/* ---- Hero as a story: the photo holds still while four beats of text pass. ---- */
.home-hero{display:block;overflow:clip;min-height:0}
.home-pin{display:flex;flex-direction:column;min-height:calc(100svh - 88px)}
.hero-chs{position:relative;display:grid;gap:clamp(28px,4vw,56px);margin-block:clamp(22px,3vw,40px);width:100%}
.hero-ch{display:flex;flex-direction:column;align-items:flex-start}
.hero-ch-n{font:500 .8rem "JetBrains Mono",monospace;color:rgb(255 255 255/.7)}
.hero-ch .home-h1{margin-block:14px 0}
.hero-ch .home-lead{margin:clamp(16px,2vw,26px) 0 0}
.hero-ch .home-cta{margin-block-start:clamp(24px,3vw,38px)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;width:100%}
.hero-foot .home-note-b{margin:0}
.hero-rail{width:min(100%,220px)}
.hero-rail::before{background:rgb(255 255 255/.25)}
.hero-rail i{background:#F3E5DA}
.hero-rail b{background:#416EDD;border-color:rgb(255 255 255/.5)}
.hero-rail b.on{background:#F3E5DA;border-color:#F3E5DA}
.hero-num{position:absolute;z-index:3;inset-block-end:6%;right:0;display:grid;place-items:center;width:clamp(84px,9vw,128px);aspect-ratio:1;border-radius:50%;background:#F3E5DA;color:#2857C0;font:800 clamp(1.8rem,3vw,2.8rem)/1 "Alexandria",sans-serif;box-shadow:0 18px 30px -16px rgb(12 22 64/.7)}
[dir=ltr] .hero-num{right:auto;left:0}
.home-hero.js{height:340vh}
.home-hero.js .home-pin{position:sticky;inset-block-start:88px;height:calc(100svh - 88px);min-height:540px}
.admin-bar .home-hero.js .home-pin{inset-block-start:120px;height:calc(100svh - 120px)}
.home-hero.js .hero-chs{display:block;height:clamp(250px,42vh,440px);margin-block:clamp(14px,2vw,28px)}
.home-hero.js .hero-ch{position:absolute;inset:0;justify-content:center;opacity:0;visibility:hidden}
.home-hero.js .hero-ch:first-child{opacity:1;visibility:visible}
.home-hero.js .home-text{padding-block:clamp(20px,3vw,44px)}
.home-hero.js .home-photo{width:min(44vw,66svh,640px);margin-block:10px}
@media (max-width:860px){
	.home-hero.js .home-photo{width:min(62%,36svh,300px);margin-block:14px 0}
	.home-hero.js .hero-chs{height:clamp(230px,34vh,320px)}
	.home-hero.js .home-h1{font-size:clamp(1.9rem,8vw,2.8rem)}
	.hero-foot .home-note-b{display:none}
	.home-hero.js .home-note-a{display:none}
}