/* Shared design system: tokens, type, layout and components used by every page. */
html,body{margin:0;background:#0A0B0E}
.pk{--ink:#0A0B0E;--ink2:#111318;--ink3:#181B22;--fg:#F3F0EA;--fg2:#C2BCB2;--fg3:#9A948A;--line:rgba(243,240,234,.13);--line2:rgba(243,240,234,.24);
 font-family:'Inter',system-ui,sans-serif;font-weight:400;color:var(--fg);background:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
.pk *{box-sizing:border-box}
.pk img,.pk video{display:block;width:100%;height:auto}
.pk figure{margin:0}
.pk p,.pk h1,.pk h2,.pk h3,.pk h4,.pk ul,.pk ol{margin:0}
.pk a{color:inherit}
.pk ::selection{background:var(--acc);color:#0A0B0E}

/* type */
.title{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(52px,8.6vw,136px);line-height:.9;letter-spacing:-.045em;text-wrap:balance}
.h2{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(34px,4.4vw,62px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.02em}
.h4{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--fg);max-width:36ch;letter-spacing:-.005em}
.body{font-size:16px;line-height:1.65;color:var(--fg2);max-width:60ch}
.label{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;font-size:12px;letter-spacing:.02em}
.dim{color:var(--fg2)}
.acc{color:var(--acc)}

/* layout */
.wrap{max-width:1312px;margin-inline:auto;padding-inline:clamp(20px,5vw,72px)}
.sec{position:relative;padding-block:clamp(88px,10vw,152px)}
.sec>.wrap{display:flex;flex-direction:column;gap:clamp(48px,5.4vw,80px)}
.stack{display:flex;flex-direction:column;gap:20px}
.stack-s{display:flex;flex-direction:column;gap:12px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,88px);align-items:start}
.split-r{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,88px);align-items:center}
.al-c{align-items:center}.al-e{align-items:end}

/* surfaces */
.raise{background:var(--ink2)}
.grad{background:
 radial-gradient(110% 85% at 100% 0%,var(--g2) 0%,transparent 62%),
 radial-gradient(70% 70% at 0% 100%,var(--g3) 0%,transparent 70%),
 linear-gradient(165deg,var(--g1) 0%,#08090C 78%);--fg2:#DAD4CA;--fg3:#B9B2A7}
.grad::before{content:"";position:absolute;inset:0;background-image:url(../img/grain.png);background-size:256px;opacity:.55;mix-blend-mode:overlay;pointer-events:none}
.grad>*{position:relative}
.paper{background:#EEEAE3;color:#15130F;--fg:#15130F;--fg2:#4A443C;--fg3:#6A645B;--line:rgba(21,19,15,.14);--line2:rgba(21,19,15,.28);--acc:var(--accd)}
.hr{height:1px;border:0;background:var(--line);margin:0}

/* nav */
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 28px;padding-block:18px;border-bottom:1px solid var(--line)}
.nav .brand{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:10px}
.nav .brand i{width:9px;height:9px;border-radius:50%;background:var(--acc);display:inline-block}
.nav nav{display:flex;flex-wrap:wrap;gap:0 26px}
.nav nav a{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:14px;text-decoration:none;color:var(--fg2);min-height:44px;display:inline-flex;align-items:center}
.nav nav a:hover{color:var(--fg)}

/* case hero */
.hero{padding-block:clamp(56px,7vw,104px) clamp(48px,6vw,80px)}
.hero .wrap{display:flex;flex-direction:column;gap:clamp(28px,3vw,40px)}
.kick{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.kick .mono{color:var(--fg2)}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line2);padding-top:20px}
.meta div{display:flex;flex-direction:column;gap:6px}
.meta p:last-child{font-size:15px;line-height:1.45;color:var(--fg)}
.stage{padding-block:0 clamp(56px,7vw,104px)}
.stage figure{border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}

/* section head */
.sh{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.sh .no{display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px solid var(--line2)}
.sh .no .mono{color:var(--fg2)}
.sh .hd{display:flex;flex-direction:column;gap:20px}

/* figures */
.fig{display:flex;flex-direction:column;gap:12px}
.fig img,.fig video{border-radius:10px;background:var(--ink3)}
.paper .fig img{background:#E2DDD4}
.fig figcaption,.cap{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;line-height:1.55;color:var(--fg3);letter-spacing:.01em}
.fig figcaption b,.cap b{font-weight:500;color:var(--fg);margin-right:10px}
.frame{background:var(--ink3);border-radius:12px;padding:clamp(14px,2vw,28px)}
.paper .frame{background:#E2DDD4}
.phone img{max-width:300px !important;margin-inline:auto}
.cover{width:100%;height:100%;object-fit:cover}

/* points: no arrows */
.pts{list-style:none;padding:0;display:flex;flex-direction:column}
.pts li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.pts li:last-child{border-bottom:1px solid var(--line)}
.pts b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16.5px;color:var(--fg);letter-spacing:-.005em}
.pts span{font-size:15.5px;color:var(--fg2);line-height:1.55}
.pts.one li{grid-template-columns:1fr}
.nums{list-style:none;padding:0;counter-reset:n;display:flex;flex-direction:column}
.nums li{counter-increment:n;display:grid;grid-template-columns:44px minmax(0,1fr);padding:14px 0;border-top:1px solid var(--line);font-size:16px;color:var(--fg)}
.nums li::before{content:counter(n,decimal-leading-zero);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--acc);padding-top:4px}
.nums li:last-child{border-bottom:1px solid var(--line)}

/* annotation: arrows allowed here */
.ann{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;align-items:center}
.ann>.fig{margin-right:clamp(40px,5vw,72px)}
.ann ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:22px;counter-reset:a}
.ann li{counter-increment:a;position:relative;display:flex;flex-direction:column;gap:4px;padding-left:44px}
.ann li::before{content:counter(a);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--acc);color:var(--acc);font-family:'JetBrains Mono',monospace;font-size:12px;display:flex;align-items:center;justify-content:center}
.ann li::after{content:"";position:absolute;right:calc(100% + 8px);top:14px;width:clamp(28px,4.4vw,64px);height:1px;background:var(--acc)}
.ann .tip{position:absolute;right:calc(100% + 8px + clamp(28px,4.4vw,64px));top:10px;width:0;height:0;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-right:8px solid var(--acc)}
.ann li b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:17px;color:var(--fg)}
.ann li span{font-size:15px;color:var(--fg2);line-height:1.5}
.ann-l{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ann-l>.fig{order:2;margin-right:0;margin-left:clamp(40px,5vw,72px)}
.ann-l li::after{right:auto;left:calc(100% + 8px)}
.ann-l .tip{right:auto;left:calc(100% + 8px + clamp(28px,4.4vw,64px));border-right:0;border-left:8px solid var(--acc)}

/* flow diagram with arrows */
.flow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
.flow .st{position:relative;padding:18px 28px 0 0;border-top:1px solid var(--line2);display:flex;flex-direction:column;gap:6px}
.flow .st::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.flow .st:not(:last-child)::after{content:"";position:absolute;right:10px;top:-5px;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;border-left:8px solid var(--fg3)}
.flow .st .mono{color:var(--acc)}
.flow .st b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:17px;color:var(--fg);letter-spacing:-.01em;line-height:1.25}
.flow .st span{font-size:14px;color:var(--fg2);line-height:1.45}

/* problem to solution */
.pp{display:flex;flex-direction:column}
.pp .r{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.pp .r:last-child{border-bottom:1px solid var(--line)}
.pp .x{color:var(--fg2);font-size:15.5px}
.pp .y{color:var(--fg);font-size:15.5px;font-weight:500}
.pp svg{width:44px;height:12px;justify-self:center}
.pp .hdr{border-top:0;padding-bottom:8px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border-top:1px solid var(--line2)}
.stat{padding:22px 20px 0 0;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.04em;color:var(--fg)}
.stat span{font-size:14px;color:var(--fg2)}

/* tags, buttons, notes */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:12.5px;padding:6px 12px;border:1px solid var(--line2);border-radius:999px;color:var(--fg2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:15px;text-decoration:none;border:1px solid var(--line2);color:var(--fg)}
.btn.solid{background:var(--fg);color:#0A0B0E;border-color:var(--fg)}
.btn:hover{border-color:var(--fg)}
.note{border-left:2px solid var(--acc);padding:4px 0 4px 18px;display:flex;flex-direction:column;gap:4px;max-width:64ch}
.note p:last-child{font-size:15px;color:var(--fg2)}
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.ba .fig figcaption b{color:var(--acc)}

/* spec table */
.spec{display:flex;flex-direction:column}
.spec .r{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) minmax(0,4fr);gap:24px;padding:18px 0;border-top:1px solid var(--line);align-items:baseline}
.spec .r:last-child{border-bottom:1px solid var(--line)}
.spec .k{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.spec .v{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:18px;color:var(--fg);letter-spacing:-.01em}
.spec .w{font-size:15px;color:var(--fg2)}

/* swatches */
.sws{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}
.sw{display:flex;flex-direction:column;gap:10px}
.sw i{display:block;aspect-ratio:4/3;border-radius:8px;border:1px solid var(--line)}
.sw b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:15px}
.sw span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fg3)}

/* pull */
.pull{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(30px,3.8vw,54px);line-height:1.08;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.pull em{font-style:normal;color:var(--acc)}

/* next */
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;text-decoration:none;padding-block:clamp(56px,7vw,96px)}
.next .title{font-size:clamp(40px,6vw,88px)}
.next:hover .title{color:var(--acc)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px;border-top:1px solid var(--line)}
.foot a{font-family:'Inter Tight',sans-serif;font-weight:500;font-size:14px;color:var(--fg2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot a:hover{color:var(--fg)}

/* scroll frame */
.scroll{max-height:720px;overflow-y:auto;border-radius:10px;background:var(--ink3)}
.scroll img{border-radius:0}
.scroll:focus-visible,.pk a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rv{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.rv.d1{animation-delay:.12s}.rv.d2{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{animation:none}}

@media (max-width:1024px){
 .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
 .sh,.split,.split-r{grid-template-columns:minmax(0,1fr)}
 .ann,.ann-l{grid-template-columns:minmax(0,1fr);gap:28px}
 .ann>.fig,.ann-l>.fig{margin:0;order:0}
 .ann li::after,.ann .tip{display:none}
 .flow{grid-auto-flow:row;grid-auto-columns:auto}
 .flow .st{border-top:0;border-left:1px solid var(--line2);padding:0 0 22px 22px}
 .flow .st::before{left:-4px;top:4px}
 .flow .st:not(:last-child)::after{right:auto;left:-5px;top:auto;bottom:2px;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:8px solid var(--fg3);border-bottom:0}
}
@media (max-width:720px){
 .g2,.g3,.g4,.ba{grid-template-columns:minmax(0,1fr)}
 .meta{grid-template-columns:minmax(0,1fr)}
 .pts li{grid-template-columns:minmax(0,1fr);gap:4px}
 .pp .r{grid-template-columns:minmax(0,1fr);gap:6px}
 .pp svg{transform:rotate(90deg);justify-self:start;width:28px}
 .spec .r{grid-template-columns:minmax(0,1fr);gap:6px}
 .next{grid-template-columns:minmax(0,1fr)}
}