/* Jeswin, v4. One stage, six strands.
   The hero and footer sit on the dark stage the braid was rendered on; everything
   between is a light sheet that slides over it. Colours of the six strands follow
   the heading order: Product, Marketing, Finance, Research, Quant, Design. */

@font-face{font-family:'Newsreader';src:url(../fonts/newsreader.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Geist';src:url(../fonts/geist.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(../fonts/geist-mono.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --stage:#000109;
  --paper:#f4f3ef;
  --card:#fdfdfb;
  --ink:#0c0d12;
  --ink-2:#41434c;
  --ink-3:#62656e;
  --rule:rgba(12,13,18,.13);
  --rule-2:rgba(12,13,18,.075);
  --c1:#ff6a55;--c2:#ffad33;--c3:#3fdc86;--c4:#22c4ea;--c5:#5b7cff;--c6:#b46bff;
  --spectrum:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));
  --serif:'Newsreader','Geist',Georgia,serif;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1240px;
  --gutter:clamp(16px,4.2vw,56px);
  --radius:22px;
  --ease:cubic-bezier(.16,.84,.24,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --stage-min:740px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--stage);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-optical-sizing:auto;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0}
::selection{background:#d9cdfd;color:var(--ink)}
:focus-visible{outline:2px solid var(--c5);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}

/* ------------------------------------------------------------------ nav */
.nav{position:fixed;inset:14px 0 auto;z-index:60;pointer-events:none;--fg:#fff}
.nav-in{pointer-events:auto;position:relative;width:min(100% - 2*var(--gutter) + 24px,var(--maxw) + 24px);margin:0 auto;height:60px;padding:0 10px 0 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-radius:999px;color:var(--fg);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 18px 40px -24px rgba(0,0,0,.8);transition:background .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),color .5s var(--ease)}
.nav.on-light{--fg:var(--ink)}
.nav.on-light .nav-in{background:rgba(250,249,246,.74);border-color:rgba(12,13,18,.07);box-shadow:0 18px 40px -26px rgba(12,13,18,.35)}
.logo{justify-self:start;display:inline-flex;align-items:center;gap:11px;font:450 21px/1 var(--sans);letter-spacing:-.035em;text-decoration:none;color:var(--fg);padding:4px 10px 4px 2px;border-radius:999px}
.logo .sq{width:38px;height:38px;border-radius:11px;overflow:hidden;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 22px -8px rgba(0,0,0,.6)}
.logo .sq img{width:100%;height:100%;object-fit:cover}
.lnks{display:flex;gap:2px}
.lnks a{font:500 12px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--fg);padding:11px 15px;border-radius:999px;transition:background .25s}
.lnks a:hover{background:rgba(255,255,255,.1)}
.nav.on-light .lnks a:hover{background:rgba(12,13,18,.06)}
.icos{justify-self:end;display:flex;gap:1px}
.ico{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:var(--fg);transition:background .25s,transform .25s var(--ease)}
.ico svg{width:15px;height:15px;fill:currentColor}
.ico:hover{background:rgba(255,255,255,.1);transform:translateY(-1px)}
.nav.on-light .ico:hover{background:rgba(12,13,18,.06)}
.nav-progress{position:absolute;left:50%;top:calc(100% - 2px);width:min(100% - 2*var(--gutter) - 40px,var(--maxw) - 16px);height:2px;transform:translateX(-50%);pointer-events:none;overflow:hidden;border-radius:2px;opacity:0;transition:opacity .4s}
.nav-progress::before{content:'';position:absolute;inset:0;background:var(--spectrum);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.nav.on-light .nav-progress{opacity:.9}

/* ------------------------------------------------------------------ stage (hero) */
.hero{position:relative}
.stage{position:sticky;top:min(0px,calc(100svh - var(--stage-min)));height:max(100svh,var(--stage-min));background:var(--stage);color:#fff;overflow:hidden;isolation:isolate;z-index:0}
.stage::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.05;mix-blend-mode:overlay;pointer-events:none;z-index:3}
.stage-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;justify-items:center;text-align:center;padding:calc(74px + clamp(28px,6svh,72px)) var(--gutter) clamp(30px,5.5svh,64px);transform-origin:50% 60%;will-change:transform,opacity}

.chip{display:inline-flex;align-items:center;gap:13px;padding:13px 26px 13px 17px;border-radius:999px;font:450 clamp(15px,1.25vw,18px)/1.35 var(--sans);letter-spacing:.003em;color:#fff;border:1.5px solid transparent;background:linear-gradient(rgba(9,11,22,.88),rgba(9,11,22,.88)) padding-box,linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6)) border-box;box-shadow:0 0 34px -6px rgba(124,110,255,.42),0 0 18px -8px rgba(255,140,90,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.chip strong{font-weight:650}
.bullet{position:relative;width:11px;height:11px;flex:none;border-radius:50%;background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c1));box-shadow:0 0 12px rgba(160,140,255,.8)}
.bullet::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(255,255,255,.55);animation:ping 2.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}70%,100%{transform:scale(1.25);opacity:0}}

h1{margin-top:clamp(24px,4.4svh,46px);max-width:14.9em;font:380 clamp(40px,min(6.4vw,11.2svh),118px)/1.02 var(--serif);letter-spacing:-.024em;color:#fff;font-optical-sizing:auto}
.title-line{display:block}
.pair{white-space:nowrap}
.x{display:inline-block;font:300 .52em/1 var(--sans);vertical-align:.34em;margin:0 .1em;-webkit-background-clip:text;background-clip:text;color:transparent;padding:.08em 0}
.pair:nth-child(2) .x{background-image:linear-gradient(135deg,var(--c1),var(--c2))}
.pair:nth-child(3) .x{background-image:linear-gradient(135deg,var(--c2),var(--c3))}
.pair:nth-child(4) .x{background-image:linear-gradient(135deg,var(--c3),var(--c4))}
.pair:nth-child(5) .x{background-image:linear-gradient(135deg,var(--c4),var(--c5))}
.pair:nth-child(6) .x{background-image:linear-gradient(135deg,var(--c5),var(--c6))}

.hero-art{grid-row:3;align-self:center;justify-self:unsafe center;position:relative;z-index:-1;pointer-events:none;width:var(--art-w);aspect-ratio:2.4;margin-block:calc(var(--art-w) / -9.6);--art-w:min(100vw,186svh);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
.hero-art::before{content:'';position:absolute;inset:0;background:var(--lqip) center/cover no-repeat;filter:blur(14px) saturate(1.2)}
.hero-art picture,.hero-art img,.hero-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-art video{opacity:0;transition:opacity 1.2s var(--ease);max-width:none}
.hero-art video.on{opacity:1}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,1080px);margin-top:0}
.stat{position:relative;padding:4px 10px 0}
.stat+.stat::before{content:'';position:absolute;left:0;top:10%;height:80%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)}
.n{font:350 clamp(38px,min(4.1vw,7svh),70px)/1 var(--serif);letter-spacing:-.025em;font-variant-numeric:lining-nums;white-space:nowrap}
.l{margin-top:12px;font:450 14px/1.3 var(--sans);letter-spacing:.01em;color:#fff}

/* ------------------------------------------------------------------ the light sheet */
.sheet{position:relative;z-index:2;background:var(--paper)}
.sheet-top{border-radius:clamp(26px,3.2vw,48px) clamp(26px,3.2vw,48px) 0 0;box-shadow:0 -40px 80px -30px rgba(0,0,0,.55);padding:clamp(76px,9vw,132px) 0 0}
.sheet-main{border-radius:0 0 clamp(26px,3.2vw,48px) clamp(26px,3.2vw,48px);padding-bottom:clamp(110px,12vw,180px);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}

.strands{display:flex;justify-content:center;gap:7px;margin:0 auto clamp(40px,5vw,60px)}
.strands i{--c:var(--c1);width:26px;height:3px;border-radius:3px;background:var(--c)}
.strands i:nth-child(2){--c:var(--c2)}.strands i:nth-child(3){--c:var(--c3)}.strands i:nth-child(4){--c:var(--c4)}.strands i:nth-child(5){--c:var(--c5)}.strands i:nth-child(6){--c:var(--c6)}

.about{max-width:920px;margin:0 auto}
.about p{font:400 clamp(19px,1.62vw,22px)/1.66 var(--serif);color:var(--ink-2);letter-spacing:.002em}
.about p+p{margin-top:1.05em}
.about b{font-weight:600;color:var(--ink)}
.about a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(12,13,18,.32);transition:text-decoration-color .25s}
.about a:hover{text-decoration-color:var(--ink)}

/* ------------------------------------------------------------------ GitHub and Claude cards */
.signals{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:clamp(70px,8vw,112px)}
.ghcard,.claude-stats{position:relative;background:var(--card);border:1px solid var(--rule-2);border-radius:var(--radius);box-shadow:0 1px 0 #fff inset,0 30px 60px -44px rgba(12,13,18,.4)}
.ghcard{display:block;padding:26px 30px 24px;text-decoration:none;color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ghcard:hover{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 36px 70px -40px rgba(12,13,18,.45)}
.gh-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.gh-l{display:inline-flex;align-items:center;gap:10px;font:500 16px/1 var(--sans);letter-spacing:-.01em}
.gh-l svg{width:19px;height:19px;fill:currentColor}
.gh-r{display:inline-flex;align-items:center;gap:14px;font:400 14px/1 var(--sans);color:var(--ink-2)}
.arw{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);font:400 14px/1 var(--sans);color:var(--ink);transition:background .3s,color .3s,transform .4s var(--ease)}
.ghcard:hover .arw{background:var(--ink);color:#fff;transform:rotate(45deg)}
.gh-scroll{display:block;overflow-x:auto;scrollbar-width:thin}
.gh-cal{display:grid;grid-template-columns:30px repeat(53,minmax(0,1fr));grid-template-rows:18px repeat(7,auto);gap:4px;min-width:700px}
.gh-lab{font:400 11px/1 var(--mono);color:var(--ink-3);white-space:nowrap;align-self:start}
.gh-lab.wd{align-self:center}
.gh-day{aspect-ratio:1;border-radius:3px;background:rgba(12,13,18,.06)}
.gh-day[data-level="1"]{background:#cdc0f6}
.gh-day[data-level="2"]{background:#a88df0}
.gh-day[data-level="3"]{background:#7c5ce0}
.gh-day[data-level="4"]{background:#5234bd}

.claude-stats{padding:26px 30px 28px}
.claude-toolbar{display:flex;justify-content:center}
.claude-brand{display:inline-flex;align-items:center;gap:11px}
.claude-mark img{width:24px;height:24px}
.claude-brand h2{font:500 16px/1 var(--sans);letter-spacing:-.01em}
.claude-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:24px}
.claude-metric{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 10px;text-align:center;position:relative}
.claude-metric+.claude-metric::before{content:'';position:absolute;left:0;top:8%;height:84%;width:1px;background:var(--rule-2)}
.claude-metric span{font:400 13px/1.2 var(--sans);color:var(--ink-3)}
.claude-metric strong{font:400 clamp(26px,2.4vw,34px)/1 var(--serif);letter-spacing:-.015em;white-space:nowrap}

/* ------------------------------------------------------------------ section heads */
.sheet-main>section{padding-top:clamp(104px,11vw,168px)}
.collection-head,.sec-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin:0 auto clamp(42px,5vw,70px)}
.collection-no{display:inline-flex;align-items:center;gap:16px;font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--ink-3)}
.collection-no::before,.collection-no::after{content:'';width:clamp(36px,5vw,64px);height:1px;background:var(--rule)}
.collection-head h2,.sec-top h2{font:380 clamp(38px,5.2vw,74px)/1.04 var(--serif);letter-spacing:-.026em}

/* ------------------------------------------------------------------ research: books */
.research-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,48px);padding-top:6px}
.research-entry{--ry:0deg;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink);outline-offset:8px;perspective:1300px;perspective-origin:50% 40%}
.research-entry:nth-child(1){--ry:16deg}
.research-entry:nth-child(2){--ry:7deg}
.research-entry:nth-child(3){--ry:-7deg}
.research-entry:nth-child(4){--ry:-16deg}
.book{--t:clamp(12px,1.35vw,19px);position:relative;width:min(100%,262px);aspect-ratio:2/3;transform-style:preserve-3d;transform:rotateY(calc(var(--ry) + var(--ty,0deg))) rotateX(var(--tx,0deg)) translateZ(var(--lift,0px));transition:transform 1s var(--ease)}
.research-entry:hover .book,.research-entry:focus-visible .book{--ry:0deg;--lift:34px}
.research-entry.tilting .book{transition:transform .25s ease-out}
.book::after{content:'';position:absolute;left:4%;right:4%;bottom:-6%;height:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(12,13,18,.42),transparent);transform:translateZ(calc(var(--t) / -2)) rotateX(90deg) translateZ(-2px);filter:blur(6px);opacity:.75;transition:opacity .8s}
.book-cover,.book-back{position:absolute;inset:0;border-radius:3px 9px 9px 3px;overflow:hidden;background:#090c16}
.book-cover{transform:translateZ(calc(var(--t) / 2));box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.book-back{transform:translateZ(calc(var(--t) / -2)) rotateY(180deg);background:#0b0e19}
.book-spine{position:absolute;left:0;top:0;width:var(--t);height:100%;transform:translateX(calc(var(--t) / -2)) rotateY(-90deg);background:linear-gradient(90deg,#05070d,color-mix(in oklab,var(--book-accent) 34%,#0a0d18) 45%,#05070d);border-radius:2px}
.book-pages{position:absolute;right:0;top:1.4%;width:calc(var(--t) - 2px);height:97.2%;transform:translateX(calc(var(--t) / 2 - 1px)) rotateY(90deg);background:repeating-linear-gradient(90deg,#f6f2e8 0 1px,#ddd7ca 1px 2px);box-shadow:inset 0 0 6px rgba(0,0,0,.25)}
.book-cover img,.book-cover picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.book-cover::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(255,255,255,.16) 2.6%,rgba(0,0,0,.22) 5%,rgba(255,255,255,.04) 7%,transparent 11%)}
.book-label{position:absolute;z-index:3;left:9%;top:6.5%;font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:7px 10px;border-radius:999px;background:rgba(5,7,14,.38);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.book-type{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:44px 9% 20px 12%;background:linear-gradient(180deg,transparent,rgba(4,6,12,.86) 46%,rgba(4,6,12,.96))}
.book-type h3{font:420 clamp(19px,1.62vw,23px)/1.14 var(--serif);letter-spacing:-.012em;color:#fff}
.book-rule{display:block;height:2px;margin-top:14px;margin-right:26px;border-radius:2px;background:linear-gradient(90deg,var(--book-accent),transparent 85%)}
.book-arrow{position:absolute;right:9%;bottom:14px;font:400 17px/1 var(--sans);color:var(--book-accent);transition:transform .5s var(--ease)}
.research-entry:hover .book-arrow{transform:translate(2px,-2px)}
.book-shine{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent calc(var(--shine,30%) - 22%),rgba(255,255,255,.2) var(--shine,30%),transparent calc(var(--shine,30%) + 22%));mix-blend-mode:screen;opacity:0;transition:opacity .6s}
.research-entry:hover .book-shine{opacity:1}
.research-description{margin-top:34px;max-width:262px;font:400 15.5px/1.55 var(--sans);color:var(--ink-2);text-align:center}

/* ------------------------------------------------------------------ work: exhibit cards */
.work-grid{--cols:5;--gap:clamp(16px,1.9vw,26px);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--gap) * 1.6) var(--gap)}
.quant-grid{--cols:3}
.docs-grid{--cols:4}
.work-card{position:relative;width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));display:flex;flex-direction:column;gap:18px}
.quant-card{max-width:340px}
.work-visual{position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#05070f;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .9s var(--ease),box-shadow .9s var(--ease);box-shadow:0 30px 50px -36px rgba(12,13,18,.75),0 8px 18px -12px rgba(12,13,18,.35)}
.work-card.tilting .work-visual{transition:transform .2s ease-out,box-shadow .9s var(--ease)}
.work-card:hover .work-visual{--lift:-6px;box-shadow:0 44px 70px -40px rgba(12,13,18,.8),0 12px 24px -14px rgba(12,13,18,.35)}
.work-visual picture,.work-visual img{position:absolute;inset:0;width:100%;height:100%}
.work-visual img{object-fit:cover;object-position:50% 42%;transform:scale(1.015);transition:transform 1.4s var(--ease)}
.work-card:hover .work-visual img{transform:scale(1.075)}
.work-visual::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.12);pointer-events:none}
.glare{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at var(--gx,50%) var(--gy,-10%),rgba(255,255,255,.26),rgba(255,255,255,.04) 38%,transparent 60%);mix-blend-mode:screen;opacity:0;transition:opacity .5s}
.work-card:hover .glare{opacity:1}
.work-copy{text-align:center}
.work-copy h3{font:500 16px/1.35 var(--sans);letter-spacing:-.008em}
.work-copy h3 a{text-decoration:none;color:var(--ink)}
.work-copy h3 a::after{content:'';position:absolute;inset:0;z-index:2;border-radius:18px}
.work-copy h3 a span{position:relative;left:0;top:0;margin-left:2px;color:var(--ink-3);transition:left .45s var(--ease),top .45s var(--ease),color .3s}
.work-card:hover h3 a span{left:2px;top:-2px;color:var(--ink)}
.work-copy p,.file-meta{display:none}
.file-links{position:relative;z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.file-links a{font:500 12.5px/1 var(--sans);text-decoration:none;color:var(--ink);padding:10px 14px;border-radius:999px;background:var(--card);border:1px solid var(--rule);transition:background .3s,color .3s,border-color .3s}
.file-links a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ------------------------------------------------------------------ design: a small gallery */
.design-grid{--gap:clamp(16px,2vw,28px);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--gap) * 1.8) var(--gap)}
.design-piece{margin:0;display:flex;flex-direction:column;gap:18px;width:calc((100% - 2 * var(--gap)) / 3)}
.design-piece.feature{width:100%}
.design-piece.wide{width:calc((100% - var(--gap)) / 2)}
.design-frame{position:relative;display:block;width:100%;padding:0;border:0;border-radius:18px;overflow:hidden;background:#05070f;cursor:zoom-in;box-shadow:0 30px 50px -36px rgba(12,13,18,.7),0 8px 18px -12px rgba(12,13,18,.3);transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.design-frame:hover{transform:translateY(-5px);box-shadow:0 44px 70px -40px rgba(12,13,18,.75),0 12px 24px -14px rgba(12,13,18,.3)}
.design-frame::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.feature .design-frame,.wide .design-frame{aspect-ratio:16/9}
.feature .design-frame{cursor:pointer}
.feature .design-frame picture,.feature .design-frame img,.feature .design-frame video,.wide .design-frame picture,.wide .design-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .design-frame video{opacity:0;transition:opacity 1.2s var(--ease)}
.feature .design-frame video.on{opacity:1}
.design-frame img{transition:transform 1.4s var(--ease)}
.wide .design-frame:hover img,.feature .design-frame:hover img{transform:scale(1.03)}
.dp-mat{display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;padding:10% 11%;background:linear-gradient(180deg,#fbfaf7,#ecebe5)}
.design-piece.portrait .design-frame{background:#f3f2ee}
.dp-mat picture{display:contents}
.dp-mat img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:2px;box-shadow:0 1px 2px rgba(12,13,18,.14),0 26px 40px -22px rgba(12,13,18,.55);transition:transform 1.2s var(--ease)}
.design-frame:hover .dp-mat img{transform:translateY(-3px) scale(1.012)}
.dp-phone{padding:8% 11%}
.dp-phone img{border-radius:clamp(16px,1.9vw,28px);box-shadow:0 0 0 clamp(4px,.5vw,7px) #0c0d12,0 0 0 calc(clamp(4px,.5vw,7px) + 1px) #3a3c44,0 30px 50px -24px rgba(12,13,18,.6)}
.dp-play{position:absolute;left:50%;top:50%;width:clamp(64px,7vw,92px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .6s var(--ease),background .4s;z-index:2}
.dp-play::before{content:'';position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:.62em 0 .62em 1.05em;border-color:transparent transparent transparent #fff;font-size:clamp(14px,1.5vw,20px)}
.feature .design-frame:hover .dp-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.24)}
.design-piece figcaption{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.dp-title{font:500 16px/1.35 var(--sans);letter-spacing:-.008em;color:var(--ink)}
.feature .dp-title{font:400 clamp(24px,2.2vw,30px)/1.2 var(--serif);letter-spacing:-.015em}
.dp-meta{font:400 13.5px/1.45 var(--sans);color:var(--ink-3)}
.dp-link{margin-top:8px;font:500 12.5px/1 var(--sans);text-decoration:none;color:var(--ink);padding:10px 14px;border-radius:999px;background:var(--card);border:1px solid var(--rule);transition:background .3s,color .3s,border-color .3s}
.dp-link:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.js .design-piece.rv .design-frame{clip-path:inset(12% 0 0 0 round 18px);transition:clip-path 1.4s var(--ease) var(--d,0ms),transform .9s var(--ease),box-shadow .9s var(--ease)}
.js .design-piece.rv.in .design-frame{clip-path:inset(0 0 0 0 round 18px)}

.design-piece.pair{width:calc((100% - var(--gap)) / 2)}
.pair .dp-mat{aspect-ratio:5/4;padding:8% 9%}
.design-piece.pair .design-frame{background:#f3f2ee}
.dp-mat .mbp-screen img{max-width:none;max-height:none;box-shadow:none;border-radius:0}
.design-frame:hover .dp-mat .mbp-screen img{transform:none}
.pair .dp-device{padding:6% 6.5% 8.5%}

/* a 14-inch MacBook Pro, front on, drawn to Apple's proportions (312.6 mm wide, 3024 x 1964 display) */
.mbp{position:relative;display:block;width:100%;container-type:inline-size}
.mbp-lid{position:relative;display:block;width:92cqw;margin:0 auto;aspect-ratio:312.6/214;border-radius:3.3cqw 3.3cqw .9cqw .9cqw;background:linear-gradient(180deg,#d9dadd,#bfc1c6);padding:.32cqw;box-shadow:0 .2cqw .6cqw rgba(12,13,18,.18)}
.mbp-lid::before{content:'';position:absolute;inset:.32cqw;border-radius:3cqw 3cqw .7cqw .7cqw;background:#050506}
.mbp-screen{position:absolute;left:1.49cqw;right:1.49cqw;top:1.75cqw;aspect-ratio:3024/1964;overflow:hidden;border-radius:1.05cqw 1.05cqw .2cqw .2cqw;background:#000}
.mbp-screen picture,.mbp-screen img{display:block;width:100%;height:100%;object-fit:cover}
.mbp-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 34%,transparent 46%);pointer-events:none}
.mbp-notch{position:absolute;left:50%;top:1.6cqw;width:6cqw;height:1.45cqw;transform:translateX(-50%);background:#050506;border-radius:0 0 .7cqw .7cqw;z-index:1}
.mbp-notch::after{content:'';position:absolute;left:50%;top:38%;width:.42cqw;height:.42cqw;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a3550,#0b0d14 70%)}
.mbp-hinge{display:block;width:79cqw;height:.85cqw;margin:0 auto;background:linear-gradient(180deg,#26272b,#0f1013);border-radius:0 0 .5cqw .5cqw}
.mbp-base{position:relative;display:block;width:100cqw;height:3.05cqw;margin-top:-.12cqw;border-radius:.35cqw .35cqw 1.9cqw 1.9cqw/.35cqw .35cqw 1.5cqw 1.5cqw;background:linear-gradient(180deg,#f4f5f7 0%,#e2e3e6 22%,#c7c9ce 62%,#9ea1a8 100%);box-shadow:inset 0 .12cqw 0 rgba(255,255,255,.9),inset 0 -.25cqw .4cqw rgba(0,0,0,.12)}
.mbp-scoop{position:absolute;left:50%;top:0;width:13cqw;height:1.05cqw;transform:translateX(-50%);border-radius:0 0 50% 50%/0 0 100% 100%;background:linear-gradient(180deg,#b9bbc0,#dcdde1)}
.mbp::after{content:'';position:absolute;left:4%;right:4%;bottom:-2.6cqw;height:3.4cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(12,13,18,.34),rgba(12,13,18,0));filter:blur(3px);z-index:-1}
.design-frame:hover .mbp{transform:translateY(-3px)}
.mbp{transition:transform 1.2s var(--ease)}

/* the stage: a render of a conference hall; the slides are a live carousel laid exactly over its LED wall */
.design-piece.deck{gap:14px}
.stage-view{position:relative;overflow:hidden;border-radius:18px;background:#02030a;box-shadow:0 30px 50px -36px rgba(12,13,18,.7),0 8px 18px -12px rgba(12,13,18,.3)}
.stage-view::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);pointer-events:none}
.stage-shot{position:relative;width:100%}
.stage-shot>picture,.stage-shot>picture img{display:block;width:100%;height:auto}
.deck-screen{position:absolute;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.deck-track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.deck-track::-webkit-scrollbar{display:none}
.deck-track:focus-visible{box-shadow:inset 0 0 0 3px var(--c5)}
.deck-slide{flex:0 0 100%;width:100%;height:100%;padding:0;border:0;background:#000;cursor:zoom-in;scroll-snap-align:center;scroll-snap-stop:always}
.deck-slide picture,.deck-slide img{display:block;width:100%;height:100%;object-fit:cover}
.deck-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.deck-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--rule);background:var(--card);color:var(--ink);font:400 18px/1 var(--sans);cursor:pointer;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.deck-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.deck-btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.deck-count{min-width:76px;text-align:center;font:500 13px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.deck-count b{font-weight:600;color:var(--ink)}
.js .design-piece.deck.rv .stage-view{clip-path:inset(10% 0 0 0 round 18px);transition:clip-path 1.4s var(--ease) var(--d,0ms)}
.js .design-piece.deck.rv.in .stage-view{clip-path:inset(0 0 0 0 round 18px)}

.viewer{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;overflow:hidden}
.viewer[open]{display:grid;place-items:center}
.viewer::backdrop{background:rgba(1,2,9,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.viewer-media{display:grid;place-items:center;width:100%;height:100%;padding:clamp(56px,7vh,84px) clamp(12px,3vw,48px)}
.viewer-media img,.viewer-media video{display:block;width:auto;height:auto;max-width:calc(100vw - 2 * clamp(12px,3vw,48px));max-height:calc(100dvh - 2 * clamp(56px,7vh,84px));border-radius:10px;box-shadow:0 40px 90px -30px #000;background:#000}
.viewer-media video{width:min(calc(100vw - 2 * clamp(12px,3vw,48px)),calc((100dvh - 2 * clamp(56px,7vh,84px)) * 16 / 9))}
.viewer-close{position:fixed;top:clamp(12px,2vh,22px);right:clamp(12px,2vw,26px);z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff;font:300 26px/1 var(--sans);cursor:pointer;transition:background .3s}
.viewer-close:hover{background:rgba(255,255,255,.18)}

/* ------------------------------------------------------------------ experience */
.xp{display:grid;gap:16px;max-width:1080px;margin:0 auto}
.xrow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:start;padding:30px 34px 32px;background:var(--card);border:1px solid var(--rule-2);border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.xrow:hover{transform:translateY(-2px);box-shadow:0 30px 60px -44px rgba(12,13,18,.45)}
.xrole{font:400 clamp(21px,2.05vw,27px)/1.25 var(--serif);letter-spacing:-.012em}
.xorg{color:var(--ink-3);white-space:nowrap}
.xnote{margin-top:12px;font:400 16.5px/1.6 var(--sans);color:var(--ink-2)}
.xnote b{font-weight:600;color:var(--ink)}
.xdate{font:500 12.5px/1 var(--mono);letter-spacing:.01em;white-space:nowrap;padding:10px 13px;border-radius:999px;border:1px solid var(--rule-2);background:var(--paper);color:var(--ink)}
.xrow-featured{background:var(--stage);border-color:transparent;color:#fff}
.xrow-featured::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--spectrum)}
.xrow-featured::after{content:'';position:absolute;inset:auto -10% -60% 30%;height:140%;background:radial-gradient(closest-side,rgba(91,124,255,.22),rgba(180,107,255,.1) 45%,transparent);pointer-events:none}
.xrow-featured .xorg,.xrow-featured .xnote,.xrow-featured .xnote b{color:#fff}
.xrow-featured .xdate{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#fff}
.xrow-featured>*{position:relative;z-index:1}

/* ------------------------------------------------------------------ education */
.education-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:1080px;margin:0 auto}
.education-card{display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:center;gap:22px;text-align:center;padding:30px 22px 32px;background:var(--card);border:1px solid var(--rule-2);border-radius:var(--radius);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.education-card:hover{transform:translateY(-3px);box-shadow:0 30px 60px -44px rgba(12,13,18,.45)}
.education-card h3{font:400 clamp(21px,1.8vw,24px)/1.2 var(--serif);letter-spacing:-.012em}
.education-card p{margin-top:10px;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.education-year{font:500 12px/1 var(--mono);letter-spacing:.02em;padding:9px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--rule-2)}

/* ------------------------------------------------------------------ footer */
.foot{position:relative;z-index:1;margin-top:calc(-1 * clamp(26px,3.2vw,48px));background:var(--stage);color:#fff;overflow:hidden;isolation:isolate;padding:calc(clamp(26px,3.2vw,48px) + clamp(100px,12vw,170px)) 0 clamp(20px,3vw,44px)}
.foot::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.foot-art{position:relative;width:100%;height:clamp(170px,19vw,330px);margin-top:clamp(56px,7vw,96px);overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-composite:intersect}
.foot-art picture,.foot-art img,.foot-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.foot-art video{opacity:0;transition:opacity 1.2s var(--ease);max-width:none}
.foot-art video.on{opacity:1}
.foot .strands{margin-bottom:clamp(30px,4vw,44px)}
.foot .strands i{box-shadow:0 0 14px var(--c)}
.cta{max-width:17.5em;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(32px,4vw,48px);text-align:center;font:380 clamp(30px,4.3vw,60px)/1.12 var(--serif);letter-spacing:-.022em}
.cta a{display:inline-flex;align-items:center;gap:10px;font:500 17px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;color:var(--stage);background:#fff;padding:19px 30px;border-radius:999px;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 18px 50px -12px rgba(91,124,255,.55);transform:translate(var(--mx,0),var(--my,0));transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cta a:hover{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 22px 70px -10px rgba(180,107,255,.75)}

/* ------------------------------------------------------------------ hero motion */
.stage-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);background:radial-gradient(520px circle at var(--gx,50%) var(--gy,40%),rgba(120,110,255,.13),rgba(91,124,255,.05) 40%,transparent 70%)}
.stage:hover .stage-glow{opacity:1}
.hero-art{translate:var(--px,0) var(--py,0);transition:translate 1.2s var(--ease)}
.js .stage h1.rv{opacity:1;transform:none}
.js .stage h1 .title-word,.js .stage h1 .x{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(10px);transition:opacity 1s var(--ease),transform 1.3s var(--ease),filter 1.1s var(--ease);transition-delay:var(--wd,0ms)}
.js.ready .stage h1 .title-word,.js.ready .stage h1 .x{opacity:1;transform:none;filter:blur(0)}

/* ------------------------------------------------------------------ reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .stage .rv{transform:translateY(18px)}
.js .research-entry.rv:not(.in) .book{--ry:0deg;--lift:-60px}
.js .research-entry.rv .book{transition:transform 1.6s var(--ease) calc(var(--d,0ms) + 120ms)}
.js .research-entry.rv.in:hover .book,.js .research-entry.rv.in:focus-visible .book{transition:transform 1s var(--ease)}
.js .research-entry.rv.in.tilting .book{transition:transform .25s ease-out}
.js .work-card.rv .work-visual{clip-path:inset(14% 0 0 0 round 18px);transition:clip-path 1.4s var(--ease) var(--d,0ms),transform .9s var(--ease),box-shadow .9s var(--ease)}
.js .work-card.rv.in .work-visual{clip-path:inset(0 0 0 0 round 18px)}
.js .work-card.rv.in.tilting .work-visual{transition:clip-path 1.4s var(--ease),transform .2s ease-out,box-shadow .9s var(--ease)}
.js .stage .hero-art{opacity:0;transform:scale(1.035);transition:opacity 1.8s var(--ease) .15s,transform 2.4s var(--ease) .15s}
.js.ready .stage .hero-art{opacity:1;transform:none}

/* ------------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .product-grid{--cols:3}
  .work-card.product-card{max-width:300px}
  .docs-grid{--cols:4}
}
@media (max-width:1000px){
  .research-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:72px;max-width:640px;margin:0 auto}
  .research-entry:nth-child(1),.research-entry:nth-child(3){--ry:10deg}
  .research-entry:nth-child(2),.research-entry:nth-child(4){--ry:-10deg}
  .docs-grid{--cols:2}
  .work-card.doc-card{max-width:300px}
  .claude-metrics{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .claude-metric:nth-child(4)::before{display:none}
  .education-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nav{inset:calc(10px + env(safe-area-inset-top)) 0 auto}
  .nav-in{height:54px;grid-template-columns:auto 1fr;padding:0 6px 0 8px}
  .lnks{display:none}
  .logo{font-size:19px;gap:9px}
  .logo .sq{width:34px;height:34px;border-radius:10px}
  .ico{width:33px;height:33px}
  .ico svg{width:14px;height:14px}
  /* phones (OnePlus 15, iPhone 18 Pro Max): the whole hero in the first screen, clear of the safe areas */
  :root{--stage-min:600px}
  .stage-in{padding:calc(64px + 22px + env(safe-area-inset-top)) var(--gutter) calc(clamp(24px,4svh,40px) + env(safe-area-inset-bottom))}
  .chip{font-size:13.5px;padding:9px 16px 9px 14px;gap:9px;max-width:100%;justify-content:center;text-align:center;border-radius:20px}
  h1{margin-top:clamp(32px,5.4svh,46px);font-size:clamp(34px,10.2vw,52px);line-height:1.06;max-width:8.6em}
  /* three pairs, Product x Marketing / Finance x Research / Quant x Design, so no line starts with a cross */
  .stage-in h1 .pair:nth-child(3) .x,.stage-in h1 .pair:nth-child(5) .x{display:none}
  .stage-in h1 .pair:nth-child(3)::before,.stage-in h1 .pair:nth-child(5)::before{content:"";display:block}
  .hero-art{--art-w:330vw}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}
  .stat{padding:2px 2px 0}
  .n{font-size:clamp(27px,8vw,36px)}
  .l{font-size:clamp(10px,2.7vw,11px);margin-top:6px;white-space:nowrap}
  .about p{font-size:18.5px;line-height:1.66}
  .signals{margin-top:64px}
  .ghcard,.claude-stats{padding:22px 18px 20px;border-radius:18px}
  .gh-l{font-size:15px}
  .gh-r{font-size:12.5px;gap:10px}
  .arw{width:26px;height:26px;font-size:12px}
  .claude-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .claude-metric:nth-child(4)::before{display:block}
  .claude-metric:nth-child(odd)::before{display:none}
  .research-grid{gap:44px 18px}
  .research-description{font-size:14.5px;margin-top:26px}
  .book-label{font-size:8px;padding:6px 8px;letter-spacing:.12em}
  .book-type{padding:30px 8% 13px 11%}
  .book-type h3{font-size:15.5px}
  .book-arrow{right:8%;bottom:8px;font-size:14px}
  .book-rule{margin-top:10px;margin-right:20px}
  .product-grid,.docs-grid,.quant-grid{--cols:2}
  .work-card.product-card,.work-card.doc-card,.quant-card{max-width:none}
  .work-copy h3{font-size:15px}
  .design-piece{width:calc((100% - var(--gap)) / 2)}
  .design-piece.wide,.design-piece.pair{width:100%}
  .stage-shot{width:172%;margin-left:-36%}
  .deck-btn{width:48px;height:48px}
  .dp-title{font-size:15px}
  .xrow{grid-template-columns:1fr;gap:16px;padding:24px 22px 26px}
  .xorg{display:block;white-space:normal;margin-top:6px;font-size:.84em}
  .xdate{justify-self:start;grid-row:1}
  .education-grid{grid-template-columns:1fr}
  .education-card{padding:26px 20px 28px}
  .cta{font-size:clamp(28px,8.2vw,40px)}
  .foot-art{height:190px;margin-top:52px}
  .foot-art>picture,.foot-art>video{left:-70%;width:240%}
  .cta a{font-size:16px;padding:17px 26px}
}
@media (max-width:380px){
  .book-type h3{font-size:14.5px}
  .chip{font-size:13px}
  .l{font-size:10px;letter-spacing:0}
  .ico{width:30px}
  .logo span:last-child{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .stage .hero-art,.js .stage h1 .title-word,.js .stage h1 .x{opacity:1;transform:none;filter:none}
  .js .work-card.rv .work-visual,.js .design-piece.rv .design-frame,.js .design-piece.deck.rv .stage-view{clip-path:none}
}
@media print{
  .nav,.hero-art,.foot-art{display:none}
  .stage{position:static;height:auto}
}