/* Ishan Dubey · Blue Sky · all styles.
   Tokens first, then: sky · top bar · hero · sheet · statement · receipts + how I think · work · experience + education ·
   the making of + spread · kind words · toolkit · contact · jump menu · intro choreography · responsive · reduced motion. */

:root{
  --zen:#0A58B5;--mid:#2A77C8;--hor:#4F97DB;--under:#C6D7EA;
  --tsh:0 1px 2px rgba(3,24,62,.5),0 2px 16px rgba(3,24,62,.45);   /* white type on the sky */
  --ink:#0E1116;--ink2:#2A313B;--mut:#5B6573;--soft:#9AA4B1;--paper:#FBFCFD;--panel:#F3F7FB;--hair:#D9E3EC;
  --lime:#C6F432;--limed:#A9D51C;
  --news:#EFE7D6;--receipt:#F7F5EE;--manila:#E6CD9A;--manila2:#D8BA80;
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --vt:"VT323",ui-monospace,monospace;
  --deva:"Rozha One","Kohinoor Devanagari","Devanagari Sangam MN","Nirmala UI",sans-serif;
  --out:cubic-bezier(.16,1,.3,1);--io:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.45,.64,1);
  --pad:clamp(16px,3vw,44px);--navh:58px;
  --colw:min(1200px,calc(100% - 2 * var(--pad)));
}
*,*::before,*::after{box-sizing:border-box}
html{background:#2A77C8;-webkit-text-size-adjust:100%;scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){html.smooth{scroll-behavior:smooth}}
body{margin:0;color:var(--ink);background:transparent;font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--lime);color:var(--ink)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
img,canvas,svg{display:block}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}
.skip{position:fixed;left:12px;top:-64px;z-index:120;padding:12px 16px;border-radius:12px;background:var(--ink);color:#fff;font:500 14px/1 var(--sans);text-decoration:none;transition:top .2s var(--out)}
.skip:focus{top:12px}

/* ============ sky ============ */
#sky{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
#sky.on{opacity:1}
#skyfb{position:fixed;left:0;top:0;display:block;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0A58B5 0%,#2A77C8 52%,#4F97DB 100%)}
html.gl #skyfb{opacity:0;transition:opacity 1.2s ease .2s}

/* ============ top: pill nav ============ */
.top{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;flex-direction:column;align-items:center;padding-top:max(12px,env(safe-area-inset-top,0px));pointer-events:none}
.pill{pointer-events:auto;position:relative;z-index:2;display:flex;align-items:center;gap:4px;width:min(980px,calc(100vw - 24px));height:var(--navh);padding:0 8px 0 22px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(238,245,251,.7));
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(14,40,70,.07),0 14px 34px -16px rgba(16,60,110,.45),0 2px 6px -2px rgba(16,60,110,.16)}
.me{display:flex;flex-direction:column;justify-content:center;line-height:1.15;margin-right:auto;min-width:0;padding-right:12px}
.me-name{font:700 15.5px/1.15 var(--sans);letter-spacing:-.015em;color:var(--ink);text-decoration:none;width:max-content}
.me-sub{display:flex;align-items:center;gap:7px;margin-top:3px;min-width:0;font:500 12.5px/1.25 var(--sans);color:var(--mut);white-space:nowrap}
.me-sub a{color:var(--ink2);text-decoration:none;border-bottom:1px solid rgba(14,17,22,.2);padding-bottom:1px;transition:color .2s,border-color .2s}
.me-sub a:hover,.me-sub a:focus-visible{color:var(--ink);border-color:var(--ink)}
.me-sub .em{min-width:0;overflow:hidden;text-overflow:ellipsis}
.me-sub i{font-style:normal;color:var(--mut)}
.links{display:flex;gap:2px;margin-right:8px}
.links a{position:relative;padding:11px 14px;border-radius:999px;text-decoration:none;font:500 14px/1 var(--sans);color:var(--ink2);letter-spacing:-.005em;transition:background .2s,color .2s}
.links a:hover{background:rgba(14,17,22,.055);color:var(--ink)}
.links a::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:3px;border-radius:3px;background:var(--lime);box-shadow:0 0 0 1px rgba(110,150,10,.18);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--out)}
.links a.on{color:var(--ink)}
.links a.on::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font:500 14px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:transform .2s var(--out),background .2s,box-shadow .2s;box-shadow:0 6px 16px -8px rgba(14,17,22,.6)}
.btn:hover{background:#1E2530}
.btn:active{transform:translateY(1px) scale(.98)}
.btn .ico{width:15px;height:15px;flex:none}
.btn.ok{background:var(--lime);color:var(--ink)}
.menu-btn{display:none}
.dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(198,244,50,.3),0 0 0 4px rgba(90,130,0,.25);display:inline-block;margin-right:9px}

/* phone menu sheet */
.menu{position:fixed;left:10px;right:10px;top:calc(max(12px,env(safe-area-inset-top,0px)) + var(--navh) + 8px);z-index:49;max-height:calc(100svh - var(--navh) - 40px);overflow:auto;border-radius:24px;padding:8px 10px 14px;background:rgba(251,252,253,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #fff;box-shadow:0 30px 60px -20px rgba(16,60,110,.45);transform-origin:top center}
.menu[hidden]{display:none}
.menu a.m{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px;border-bottom:1px solid var(--hair);font:700 22px/1 var(--sans);letter-spacing:-.03em;text-decoration:none}
.menu a.m small{font:500 10.5px/1 var(--mono);color:var(--mut);letter-spacing:.06em;text-align:right}
.menu .mrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 6px 2px 14px}
.menu .mrow span{font:500 14px/1.2 var(--mono);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}

/* ============ hero ============ */
.hero{position:relative;z-index:3;padding:calc(max(12px,env(safe-area-inset-top,0px)) + var(--navh) + 72px) var(--pad) 0;text-align:center;overflow-x:clip}
.corner{position:absolute;top:calc(max(12px,env(safe-area-inset-top,0px)) + var(--navh) + 52px);margin:0;display:flex;align-items:center;gap:14px;font:500 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:#fff;text-shadow:0 0 1px rgba(3,24,62,.6),0 1px 2px rgba(3,24,62,.55),0 1px 10px rgba(3,24,62,.55),0 0 22px rgba(3,24,62,.35);white-space:nowrap}
.corner.l{left:var(--pad)}
.corner.r{right:var(--pad)}
.cross{position:relative;width:24px;height:24px;flex:none}
.cross::before,.cross::after{content:"";position:absolute;background:#fff;box-shadow:0 0 8px rgba(3,24,62,.45)}
.cross::before{left:0;right:0;top:50%;height:1.5px;margin-top:-.75px}
.cross::after{top:0;bottom:0;left:50%;width:1.5px;margin-left:-.75px}
.chip{display:inline-flex;align-items:center;margin:0;padding:10px 16px 10px 14px;font:500 12.5px/1 var(--mono);color:#fff;letter-spacing:.01em;border:1px solid var(--lime);background:rgba(4,28,70,.34);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 3px rgba(198,244,50,.12);white-space:nowrap;max-width:100%}
.chip .k{opacity:.72;margin-right:.6em}
.chip .typed{display:inline-block;min-width:1ch;text-align:left}
.chip .caret{display:inline-block;width:7px;height:14px;margin-left:3px;background:var(--lime);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hl{margin:18px 0 0;color:#fff;font-weight:800}
.l1{display:block;font:800 clamp(38px,6.05vw,92px)/1.02 var(--sans);letter-spacing:-.048em;word-spacing:.14em;text-shadow:0 2px 26px rgba(3,24,62,.45),0 1px 2px rgba(3,24,62,.32)}
.l1 .w{display:inline-block;white-space:nowrap}
.l1 .arr{display:inline-block;margin:0 .16em;font-weight:700}
.l1 .arr i{display:inline-block;font-style:normal;transform:translateY(-.04em)}
.l2{display:block;margin-top:.04em;font:400 italic clamp(46px,7.5vw,114px)/.98 var(--serif);letter-spacing:-.025em;text-shadow:0 2px 30px rgba(3,24,62,.45),0 1px 2px rgba(3,24,62,.32)}
.word{position:relative;display:inline-block;vertical-align:-.16em;margin:0 .04em}
.word canvas{display:block}
#w-systems canvas{image-rendering:pixelated}
.intro{max-width:640px;margin:22px auto 0;font:500 clamp(16.5px,1.32vw,19.5px)/1.52 var(--sans);letter-spacing:-.012em;color:#fff;text-shadow:var(--tsh);text-wrap:balance}
.mk{position:relative;display:inline;text-shadow:none;padding:.06em .3em;margin:0 .03em;color:var(--ink);background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 0/0% 100%;transition:background-size .7s var(--out);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:2px}
.go .mk{background-size:100% 100%}
.go .mk.b{transition-delay:.25s}
.roles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:20px auto 0;padding:0;list-style:none}
.roles li{padding:8px 12px 7px;border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.9);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);box-shadow:0 8px 18px -12px rgba(16,60,110,.45)}

/* loading states while art.js renders: live text stands in for the collage words, the CRT boots */
.word .wfb{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);text-align:center;white-space:nowrap;transition:opacity .5s ease;pointer-events:none}
.l1 .word .wfb{font:inherit;letter-spacing:inherit}
.mk-title .word .wfb{font:700 1em/1 var(--sans);font-size:calc(var(--wh,100px) * .62);letter-spacing:-.045em}
.word.ready .wfb,html:not(.js) .word .wfb{opacity:0}
.crt .boot{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:400 22px/1 var(--vt);color:#fff;text-shadow:var(--tsh);white-space:nowrap;transition:opacity .4s ease;pointer-events:none}
.crt .boot i{width:150px;height:6px;border:1px solid #fff;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 0/30% 100%;animation:boot 1.6s var(--io) infinite}
@keyframes boot{0%{background-position:-40% 0}100%{background-position:140% 0}}
.crt.ready .boot{opacity:0}

/* hover the CRT: it answers in VT323 on the lower part of its screen */
.crt .term{position:absolute;display:flex;flex-direction:column;justify-content:flex-end;padding:6px 9px;font:400 18px/1.05 var(--vt);color:var(--lime);text-align:left;white-space:nowrap;overflow:hidden;background:linear-gradient(transparent,rgba(8,12,10,.82) 38%);opacity:0;transition:opacity .25s ease;pointer-events:none;text-shadow:0 0 6px rgba(198,244,50,.45)}
.crt .term .t2::after{content:"_";animation:blink 1s steps(1) infinite}
.crt.ready:hover .term,.crt.term-on .term{opacity:1}

/* CRT block */
.crt{position:relative;display:inline-block;margin:40px auto -54px;z-index:2}
.crt .art{position:relative}

/* selection boxes (Figma style) */
.sel{position:absolute;inset:-9px;pointer-events:none;border:1.5px solid var(--lime);box-shadow:0 0 0 1px rgba(80,120,0,.12)}
.sel .h{position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid var(--limed);opacity:0;transition:opacity .15s}
.sel .h.tl{left:-5.5px;top:-5.5px}.sel .h.tr{right:-5.5px;top:-5.5px}.sel .h.bl{left:-5.5px;bottom:-5.5px}.sel .h.br{right:-5.5px;bottom:-5.5px}
.sel .h.tm{left:50%;top:-5.5px;margin-left:-4.5px}.sel .h.bm{left:50%;bottom:-5.5px;margin-left:-4.5px}.sel .h.ml{left:-5.5px;top:50%;margin-top:-4.5px}.sel .h.mr{right:-5.5px;top:50%;margin-top:-4.5px}
.tag{position:absolute;left:-1.5px;bottom:calc(100% + 5px);display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 7px;background:var(--lime);color:var(--ink);font:500 11px/1.15 var(--mono);letter-spacing:.01em;white-space:nowrap;text-align:left;box-shadow:0 4px 12px -6px rgba(40,70,0,.5)}
.tag::before{content:"";width:9px;height:9px;flex:none;border:1.5px solid var(--ink);border-radius:2px}
.dims{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);padding:4px 7px;background:var(--ink);color:var(--lime);font:500 10.5px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;border-radius:3px;opacity:0;transition:opacity .15s}
.crt .dims{opacity:1;background:var(--lime);color:var(--ink)}
.prop:hover .sel,.prop.sel-on .sel,.prop:focus-visible .sel{border-color:#D8FF5C;box-shadow:0 0 0 1px rgba(80,120,0,.2),0 0 22px rgba(198,244,50,.35)}
.prop.sel-on .h,.prop:focus-visible .h{opacity:1}
.prop.sel-on .dims,.prop:focus-visible .dims,.prop:hover .dims{opacity:1}

/* floating props */
.props{position:absolute;left:0;top:0;right:0;height:0;z-index:1}
.prop{position:absolute;left:0;top:0;margin:0;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none;will-change:transform}
.prop.drag{cursor:grabbing;z-index:5}
.prop .bob{position:relative}
.prop canvas{pointer-events:none}
.prop.flash .sel{animation:flash .9s var(--out) 2}
@media (prefers-reduced-motion:no-preference){
  .prop .bob{animation:bob var(--bt,6s) ease-in-out var(--bd,0s) infinite}
  .prop.drag .bob,.prop.sel-on .bob{animation-play-state:paused}
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(.6deg)}}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(198,244,50,.9)}100%{box-shadow:0 0 0 18px rgba(198,244,50,0)}}

/* art pieces: hidden until drawn, then they fade or pop in (props after the headline) */
.js .prop{opacity:0}
.js.go .prop.ready{opacity:1;transition:opacity .5s ease var(--pd,1.2s)}
.js.go .prop.ready .sel{animation:selin .7s var(--out) var(--pd,1.2s) both}
.js .word canvas,.js .crt canvas.art,.js .cb-stage canvas{opacity:0;transition:opacity .7s ease}
.js .word.ready canvas,.js .crt.ready canvas.art,.js .cardbox.ready .cb-stage canvas{opacity:1}
.js .crt:not(.ready) .sel{opacity:0}
.js .crt .sel{transition:opacity .6s ease .2s}
.js .cardbox{opacity:0}
.js.go .cardbox.ready{opacity:1;transition:opacity .7s ease .15s}
.js .cardbox:not(.ready) .note,.js .cardbox:not(.ready) .cb-hit{opacity:0}
@keyframes selin{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(-60px -400px -60px -400px)}}
.prop.tr .tag{left:auto;right:-1.5px}
.prop .tag{white-space:nowrap;line-height:1.3;align-items:flex-start}
.prop .tag::before{margin-top:1px}
.tag .st{display:none}
.measure [data-in]{transform:none!important;transition:none!important}
.cardbox .note{transition:opacity .3s ease}
.cardbox.out .note{opacity:.12}

/* cardbox: HOW I THINK */
.cardbox{position:absolute;left:0;top:0;z-index:2;text-align:left}
.cardbox .note{position:absolute;left:4px;bottom:calc(100% + 14px);margin:0;padding:9px 12px 10px;background:var(--news);color:var(--ink);box-shadow:0 10px 24px -14px rgba(20,40,60,.55),0 1px 0 rgba(255,255,255,.6) inset;transform:rotate(-2deg);white-space:nowrap}
.cardbox .note b{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:#6B5E45}
.cardbox .note span{display:block;margin-top:6px;font:600 14.5px/1 var(--sans);letter-spacing:-.01em}
.cardbox .note::after{content:"";position:absolute;left:50%;top:-8px;width:54px;height:16px;margin-left:-27px;background:rgba(255,255,255,.55);transform:rotate(3deg);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cb-stage{position:relative}
.cb-cards{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.icard{position:absolute;pointer-events:none;background:#FFFEF8;border-radius:5px 5px 2px 2px;box-shadow:0 -6px 18px -8px rgba(20,30,40,.35),0 0 0 1px rgba(20,30,40,.08);transform:translateY(0);transition:transform .55s var(--spring);background-image:linear-gradient(transparent 0 31px,#E4412F 31px 32px,transparent 32px),repeating-linear-gradient(transparent 0 17px,rgba(43,75,168,.16) 17px 18px);background-position:0 0,0 30px;text-align:left;overflow:hidden}
.icard .t{position:absolute;left:12px;top:12px;font:600 10px/1 var(--mono);letter-spacing:.12em;color:#151515}
.icard .in{position:absolute;left:12px;right:10px;top:40px}
.icard .ln{display:block;font:700 19px/18px var(--hand);color:#1C2F7A}
.icard .bd{display:block;margin-top:6px;font:500 11.5px/18px var(--sans);color:#26303C;letter-spacing:-.005em}
.cb-hit{position:absolute;pointer-events:auto;border:1.5px dashed transparent;border-radius:4px;transition:border-color .15s,background .15s}
.cb-hit:hover,.cb-hit:focus-visible{border-color:var(--lime);background:rgba(198,244,50,.12);outline:none}
.cb-hit.on{border-color:transparent}

/* ============ sheet (paper panel on the sky) ============ */
.sheet{position:relative;z-index:1;overflow-x:clip;margin:0 clamp(8px,1.6vw,24px);background:var(--paper);border-radius:30px;box-shadow:0 50px 120px -50px rgba(10,50,100,.45),0 1px 0 #fff inset}
.rails{position:absolute;top:0;bottom:0;left:50%;width:var(--colw);transform:translateX(-50%);border-left:1px solid var(--hair);border-right:1px solid var(--hair);pointer-events:none}
.col{position:relative;width:var(--colw);margin:0 auto}
.rule{position:relative;height:1px;background:var(--hair)}
.rule i{position:absolute;top:-6px;width:13px;height:13px}
.rule i::before,.rule i::after{content:"";position:absolute;background:var(--ink)}
.rule i::before{left:0;right:0;top:6px;height:1px}
.rule i::after{top:0;bottom:0;left:6px;width:1px}
.rule i:first-child{left:calc((100% - var(--colw)) / 2 - 6px)}
.rule i:last-child{right:calc((100% - var(--colw)) / 2 - 6px)}
.secno{margin:0;font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 clamp(16px,2.6vw,40px);margin-bottom:34px}
.head h2{margin:10px 0 0;font:700 clamp(34px,3.6vw,52px)/1 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.head .count{font:500 12px/1 var(--mono);color:var(--mut);letter-spacing:.06em;white-space:nowrap;padding-bottom:6px}

/* statement */
.statement{position:relative;padding:clamp(100px,11vw,158px) clamp(16px,2.6vw,40px) clamp(70px,7.6vw,110px)}
.glitch{position:relative;margin:26px 0 0;max-width:1100px;font:600 clamp(28px,3.9vw,58px)/1.08 var(--sans);letter-spacing:-.035em;text-wrap:pretty}
.glitch .g1{color:#87919E}
.glitch .g2{color:var(--ink)}
.glitch .gl{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:multiply}
/* layer colours multiply back to the base colour exactly: red x cyan = grey (g1) or ink (g2) */
.glitch .gl-r .g1{color:#FF919E}.glitch .gl-c .g1{color:#87FFFF}
.glitch .gl-r .g2{color:#FF1116}.glitch .gl-c .g2{color:#0EFFFF}
.glitch .gl-r{transform:translateX(calc(var(--dx,0px) + var(--sx,0px)))}
.glitch .gl-r.sl{clip-path:var(--clip,none)}
.glitch .gl-c{transform:translateX(calc(var(--dx,0px) * -1))}
.glitch.glitching .gl{opacity:1}
.glitch.glitching .base{opacity:var(--bo,1)}
.glitch.pre .base{opacity:0}
/* the boxed phrase gets selected, Figma style, once the statement resolves; its tag hangs under the paragraph */
.rcsel{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;border:1.5px solid var(--limed);opacity:0;transition:opacity .3s}
.rcsel.on{opacity:1;animation:selin .6s var(--out) both}
.rcsel .h{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid var(--limed)}
.rcsel .h.tl{left:-5px;top:-5px}.rcsel .h.tr{right:-5px;top:-5px}.rcsel .h.bl{left:-5px;bottom:-5px}.rcsel .h.br{right:-5px;bottom:-5px}
.rctag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 7px;background:var(--lime);color:var(--ink);font:500 11px/1.15 var(--mono);white-space:nowrap;box-shadow:0 4px 12px -6px rgba(40,70,0,.5);opacity:0;transform:translateY(-6px);transition:opacity .35s ease .25s,transform .5s var(--out) .25s;pointer-events:none}
.rctag.on{opacity:1;transform:none}
.rctag i{font-style:normal;font-family:var(--sans);font-weight:700}

/* ============ the receipts + how I think (on the sky) ============ */
.proof{position:relative;z-index:1;padding:clamp(96px,10vw,150px) 0 clamp(100px,10vw,150px);text-align:center}
.proof-h{margin:0}
.receipts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);width:var(--colw);margin:38px auto 0;padding:0;list-style:none;align-items:start;text-align:left}
.rcpt{position:relative;transform:rotate(var(--r,0deg));filter:drop-shadow(0 22px 22px rgba(10,40,80,.22)) drop-shadow(0 2px 2px rgba(10,40,80,.12));transition:transform .5s var(--out)}
.rcpt:hover{transform:rotate(0deg) translateY(-4px)}
.rcpt::before{content:"";position:absolute;left:50%;top:-11px;z-index:2;width:84px;height:24px;margin-left:-42px;background:rgba(250,248,240,.62);transform:rotate(var(--tr,-3deg));box-shadow:0 1px 2px rgba(0,0,0,.08)}
.slip{position:relative;padding:20px 20px 34px;background:var(--receipt);color:#151515;
  background-image:radial-gradient(rgba(120,100,60,.06) 1px,transparent 1.2px);background-size:5px 5px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.slip .rt{display:flex;justify-content:space-between;gap:10px;font:500 10px/1 var(--mono);letter-spacing:.14em;color:#6E6757;text-transform:uppercase}
.slip hr{margin:14px 0;border:0;border-top:1.5px dashed rgba(21,21,21,.3)}
.slip .big{display:block;font:800 clamp(38px,3.7vw,56px)/1 var(--sans);letter-spacing:-.045em;white-space:nowrap}
.slip .big.long{font-size:clamp(25px,2.25vw,34px);letter-spacing:-.035em;padding:.24em 0 .2em}
.slip .lab{display:block;margin-top:10px;font:500 15px/1.35 var(--sans);letter-spacing:-.01em;color:#2B2A26}
.slip .ctx{display:flex;align-items:center;gap:8px;font:600 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.slip .ctx::before{content:"";flex:none;width:7px;height:7px;background:var(--lime);box-shadow:0 0 0 1px rgba(60,90,0,.5)}
.slip .bc{height:22px;margin-top:14px;opacity:.85;background:repeating-linear-gradient(90deg,#151515 0 2px,transparent 2px 4px,#151515 4px 5px,transparent 5px 8px,#151515 8px 11px,transparent 11px 12px,#151515 12px 13px,transparent 13px 16px)}

.think{margin-top:clamp(90px,10vw,150px)}
.think-h{margin:0;color:#fff;font:400 italic clamp(44px,5.6vw,84px)/1 var(--serif);letter-spacing:-.025em;text-shadow:0 2px 26px rgba(3,24,62,.45),0 1px 2px rgba(3,24,62,.32)}
.limel{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:8px 12px;background:var(--lime);color:var(--ink);font:500 11.5px/1 var(--mono);letter-spacing:.12em;box-shadow:0 8px 20px -12px rgba(40,70,0,.6)}
.pins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);width:var(--colw);margin:48px auto 0;padding:0;list-style:none;align-items:start;text-align:left}
.pin{position:relative;margin:0;padding:18px 18px 20px;background:#FFFEF8;border-radius:3px;transform:rotate(var(--r,0deg));box-shadow:0 26px 40px -26px rgba(10,40,80,.55),0 2px 4px rgba(10,40,80,.1);
  background-image:linear-gradient(transparent 0 47px,rgba(228,65,47,.75) 47px 48px,transparent 48px);transition:transform .5s var(--out),box-shadow .5s var(--out)}
.pin:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 34px 50px -26px rgba(10,40,80,.6),0 2px 4px rgba(10,40,80,.1)}
.pin::before{content:"";position:absolute;left:50%;top:-9px;z-index:2;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4FFD0 0 2px,#C6F432 3px,#8DB813 100%);box-shadow:0 0 0 1px rgba(40,60,0,.45),0 4px 5px -1px rgba(10,30,50,.45)}
.pin .pt{display:flex;justify-content:space-between;align-items:center;gap:10px;height:30px;font:600 10.5px/1 var(--mono);letter-spacing:.12em;color:#151515}
.pin .pt span{color:#6B6455}
.pin h3{margin:20px 0 0;font:400 italic clamp(23px,1.85vw,27px)/1.05 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.pin p{margin:12px 0 0;font:400 14.5px/26px var(--sans);color:var(--ink2);background:repeating-linear-gradient(transparent 0 25px,rgba(43,75,168,.17) 25px 26px)}

/* ============ work ============ */
.work{padding:clamp(70px,7vw,104px) 0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 30px;padding:0 clamp(16px,2.6vw,40px)}
.fbtn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 8px 0 15px;border-radius:999px;border:1px solid var(--hair);background:#fff;font:500 14px/1 var(--sans);color:var(--ink2);transition:background .2s,border-color .2s,color .2s}
.fbtn:hover{border-color:#A9B7C6;color:var(--ink)}
.fbtn b{min-width:26px;height:26px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--panel);font:600 11px/1 var(--mono);color:var(--mut)}
.fbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.fbtn[aria-pressed="true"] b{background:var(--lime);color:var(--ink)}
.wbody{transition:opacity .16s ease}
.wbody.swap{opacity:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px);padding:0 clamp(16px,2.6vw,40px)}
.card{position:relative;display:flex;flex-direction:column;padding:10px 10px 22px;background:#fff;border-radius:20px;border:1px solid #E3EAF1;box-shadow:0 1px 0 #fff inset,0 18px 40px -30px rgba(16,50,90,.35);transition:transform .45s var(--out),box-shadow .45s var(--out)}
.card:hover{transform:translateY(-6px);box-shadow:0 1px 0 #fff inset,0 34px 60px -32px rgba(16,50,90,.45)}
.cover{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#E9EEF3;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--out);will-change:transform}
.cover canvas{width:100%;height:100%;opacity:0;transition:opacity .5s ease}
.cover canvas.drawn{opacity:1}
.crow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 12px 0}
.year{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--panel);border:1px solid #E1E9F0;color:var(--ink);font:600 11.5px/1 var(--mono);letter-spacing:.02em;white-space:nowrap}
.year.now{background:var(--lime);border-color:rgba(100,140,0,.35)}
.stamp{display:inline-flex;align-items:center;padding:5px 7px 4px;border:1.5px solid rgba(14,17,22,.78);border-radius:3px;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);transform:rotate(-1.5deg);white-space:nowrap}
.card h3{margin:12px 12px 0;font:600 clamp(18px,1.45vw,21px)/1.28 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.res{display:flex;gap:10px;align-items:baseline;margin:12px 12px 0;font:500 14.5px/1.45 var(--sans);color:var(--ink2)}
.res b{flex:none;padding:3px 6px;background:var(--lime);font:600 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 12px 0;padding:0;list-style:none}
.tags li{padding:6px 10px;border-radius:999px;background:var(--panel);border:1px solid #E4EBF2;font:500 12px/1 var(--sans);color:var(--ink2)}
.more{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;margin:auto 12px 0;padding-top:18px}
.more a{display:inline-flex;align-items:center;gap:6px;padding-bottom:3px;font:500 13.5px/1 var(--sans);text-decoration:none;color:var(--ink);letter-spacing:-.005em;background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100%/0% 1.5px;transition:background-size .35s var(--out)}
.more a.prim::after{content:"";position:absolute;inset:0;border-radius:20px}
.card:hover .more a.prim,.more a:hover,.more a:focus-visible{background-size:100% 1.5px}
.more a.sec{position:relative;z-index:2;color:var(--mut)}
.more a.sec:hover{color:var(--ink)}
.card.flash,.ic.flash{animation:cardflash 1.6s var(--out)}
@keyframes cardflash{0%,40%{box-shadow:0 0 0 4px var(--lime),0 30px 60px -30px rgba(16,50,90,.45)}100%{box-shadow:0 0 0 0 rgba(198,244,50,0),0 18px 40px -30px rgba(16,50,90,.35)}}
.subhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:clamp(48px,5vw,72px) clamp(16px,2.6vw,40px) 20px;padding-top:18px;border-top:1px solid var(--hair)}
.subhead h3{margin:0;font:700 clamp(21px,1.8vw,26px)/1.1 var(--sans);letter-spacing:-.03em}
.subhead.first{margin-top:0;padding-top:0;border-top:0}
.subhead span{font:500 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--mut);white-space:nowrap}
/* compact index cards */
.icards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:0;padding:0 clamp(16px,2.6vw,40px);list-style:none}
.icards>li{display:flex}
.ic{position:relative;display:flex;flex-direction:column;width:100%;min-height:236px;padding:16px 18px 18px;background:#fff;border:1px solid #E3EAF1;border-radius:16px;color:var(--ink);text-decoration:none;transition:transform .4s var(--out),box-shadow .4s var(--out),border-color .2s}
.ic:hover{transform:translateY(-4px);border-color:#C8D4E0;box-shadow:0 26px 44px -32px rgba(16,50,90,.45)}
.ic .it{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid rgba(228,65,47,.5)}
.ic .no{font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--mut)}
.ic h4{margin:16px 0 0;font:700 clamp(19px,1.5vw,21px)/1.15 var(--sans);letter-spacing:-.025em}
.ic p{margin:8px 0 0;font:400 14.5px/1.5 var(--sans);color:var(--mut)}
.ic .if{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px}
.ic .tags{margin:0}
.ic .arr{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:50%;font:500 14px/1 var(--sans);transition:background .25s,color .25s,border-color .25s,transform .4s var(--out)}
.ic:hover .arr,.ic:focus-visible .arr{background:var(--ink);border-color:var(--ink);color:#fff;transform:translate(2px,-2px)}
.showmore{display:flex;justify-content:center;margin:22px clamp(16px,2.6vw,40px) 0}
.showmore[hidden]{display:none}
.sbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--hair);background:#fff;font:500 14px/1 var(--sans);transition:background .2s,border-color .2s}
.sbtn:hover{border-color:var(--ink)}
/* case studies: manila folders */
.folders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);margin:0;padding:0 clamp(16px,2.6vw,40px);list-style:none}
.folders>li{display:flex}
.folder{position:relative;display:flex;flex-direction:column;width:100%;padding-top:30px;color:var(--ink);text-decoration:none;isolation:isolate}
.folder .back{position:absolute;left:0;right:0;top:30px;bottom:0;z-index:-2;background:var(--manila2);border-radius:2px 12px 12px 12px}
.folder .tab{position:absolute;left:0;top:6px;z-index:-2;height:26px;min-width:86px;padding:0 16px;display:flex;align-items:center;background:var(--manila2);border-radius:10px 12px 0 0;font:600 11px/1 var(--mono);letter-spacing:.12em;color:#3E3018}
.folder .paper{position:absolute;left:10%;right:7%;top:20px;height:70px;z-index:-1;background:#FCFBF6;border-radius:2px;transform:rotate(-1.4deg);box-shadow:0 1px 3px rgba(60,40,10,.18);background-image:repeating-linear-gradient(transparent 0 11px,rgba(43,75,168,.13) 11px 12px);transition:transform .45s var(--out)}
.folder:hover .paper,.folder:focus-visible .paper{transform:translateY(-12px) rotate(-2.4deg)}
.folder .front{position:relative;display:flex;flex-direction:column;flex:1;margin-top:22px;padding:22px 22px 20px;background:linear-gradient(180deg,#EED8A9,var(--manila));border-radius:3px 3px 12px 12px;box-shadow:0 -1px 0 rgba(255,255,255,.55) inset,0 22px 40px -28px rgba(70,45,10,.6);min-height:218px}
.folder .co{font:600 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5E4A26}
.folder h4{margin:10px 0 0;font:700 clamp(20px,1.6vw,23px)/1.12 var(--sans);letter-spacing:-.025em}
.folder p{margin:8px 0 0;font:400 14.5px/1.5 var(--sans);color:#3A3222}
.folder .ff{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px}
.folder .tags li{background:rgba(255,255,255,.45);border-color:rgba(94,74,38,.22);color:#3A3222}
.folder .tags{margin:0}
.folder .rd{flex:none;font:600 13px/1 var(--sans);white-space:nowrap}

/* experience + education rows */
.exp,.edu{padding:clamp(70px,7vw,104px) 0}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.row{position:relative;display:grid;grid-template-columns:minmax(170px,.62fr) minmax(220px,1fr) minmax(300px,1.45fr);gap:clamp(20px,3vw,48px);padding:34px clamp(16px,2.6vw,40px) 36px;border-bottom:1px solid var(--hair);transition:background .3s}
.row:hover{background:var(--panel)}
.row::before,.row::after{content:"";position:absolute;bottom:-5px;width:9px;height:9px;background:linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat}
.row::before{left:-5px}.row::after{right:-5px}
.when{font:500 12px/1.75 var(--mono);color:var(--mut);letter-spacing:.02em}
.when b{display:block;font-weight:500;color:var(--ink)}
.who h3{display:flex;align-items:center;gap:12px;margin:0;font:700 clamp(22px,2vw,28px)/1.08 var(--sans);letter-spacing:-.03em}
.who p{margin:7px 0 0;font:500 16px/1.4 var(--sans);color:var(--mut)}
.who .type{margin-top:9px;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.live{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1px rgba(80,120,0,.45)}
.live::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 0 rgba(150,200,20,.6)}
@media (prefers-reduced-motion:no-preference){.live::after{animation:pulse 2s var(--out) infinite}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(150,200,20,.6)}80%,100%{box-shadow:0 0 0 12px rgba(198,244,50,0)}}
.hlc{display:inline-flex;align-items:stretch;margin:16px 0 0;border:1px solid var(--ink);border-radius:5px;overflow:hidden;background:#fff}
.hlc b{display:flex;align-items:center;padding:6px 8px;background:var(--ink);color:#fff;font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.hlc span{display:flex;align-items:center;padding:6px 10px;font:600 13.5px/1.1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.row.cur .hlc{border-color:var(--ink)}
.pts{margin:0;padding:0;list-style:none}
.pts li{position:relative;padding-left:20px;margin:0 0 9px;font:400 15.5px/1.5 var(--sans);color:var(--ink2)}
.pts li::before{content:"";position:absolute;left:0;top:.74em;width:9px;height:1.5px;background:var(--ink)}
.row.flash{animation:rowflash 1.8s var(--out)}
@keyframes rowflash{0%,45%{background:rgba(198,244,50,.45)}100%{background:transparent}}
.courses small{display:block;margin-bottom:12px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.courses ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.courses li{padding:6px 9px;border:1px solid var(--hair);border-radius:4px;background:#fff;font:500 11.5px/1.2 var(--mono);color:var(--ink2)}

/* ============ the making of ============ */
.making{position:relative;z-index:1;padding:clamp(130px,13vw,190px) 0 clamp(220px,26vw,360px);overflow:clip;text-align:center}
.mk-title{margin:0;color:#fff;font-weight:400;text-shadow:0 2px 26px rgba(3,24,62,.45),0 1px 2px rgba(3,24,62,.32)}
.mk-title .s{display:block;font:400 italic clamp(44px,6.4vw,96px)/1 var(--serif);letter-spacing:-.025em}
.mk-title .word{margin-top:6px;vertical-align:0}
.side{position:absolute;top:clamp(150px,14vw,210px);max-width:250px;margin:0;font:400 clamp(17px,1.4vw,20px)/1.32 var(--serif);color:#fff;text-shadow:var(--tsh)}
.side.l{left:var(--pad);text-align:left}
.side.r{right:var(--pad);text-align:right}
.shelf{position:relative;margin:clamp(40px,5vw,70px) auto 0;height:calc(var(--bw) * 1.4 + 90px);--bw:clamp(170px,20vw,290px);perspective:1700px;perspective-origin:50% 42%;touch-action:pan-y;cursor:grab;outline:none}
.shelf.drag{cursor:grabbing}
.shelf:focus-visible .book.c .face{outline:2px solid var(--ink);outline-offset:6px}
.track{position:absolute;left:50%;top:20px;width:0;height:0;transform-style:preserve-3d}
.book{position:absolute;left:calc(var(--bw) / -2);top:0;width:var(--bw);height:calc(var(--bw) * 1.4);transform-style:preserve-3d;padding:0;will-change:transform}
.book .face{position:absolute;inset:0;background:#E9EEF3;box-shadow:0 30px 50px -26px rgba(10,40,80,.55);overflow:hidden;border-radius:2px 4px 4px 2px}
.book .face canvas{width:100%;height:100%}
.book .face::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.08) 4%,transparent 9%,transparent 92%,rgba(0,0,0,.06));pointer-events:none}
.book .sd{position:absolute;top:0;width:26px;height:100%;background:linear-gradient(90deg,#141920,#2B323D 40%,#10141A)}
.book .sd.l{left:0;transform-origin:left center;transform:rotateY(90deg)}
.book .sd.r{right:0;transform-origin:right center;transform:rotateY(-90deg);background:repeating-linear-gradient(0deg,#F4F1E8 0 2px,#E2DDD0 2px 3px)}
.book .shade{position:absolute;inset:0;background:#0A1E33;opacity:0;pointer-events:none}
.book .open{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);padding:7px 11px;background:var(--ink);color:#fff;font:500 10.5px/1 var(--mono);letter-spacing:.1em;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.book.c .open{opacity:1}
.book.c:hover .face{box-shadow:0 0 0 2px var(--lime),0 40px 60px -26px rgba(10,40,80,.6)}
.bar{position:absolute;left:var(--pad);bottom:clamp(150px,16vw,230px);padding:14px 16px 13px;text-align:left;color:var(--ink);background:var(--receipt);transform:rotate(-1.2deg);box-shadow:0 22px 34px -20px rgba(3,24,62,.7),0 1px 2px rgba(3,24,62,.18)}
.bar svg{height:46px;width:170px}
.bar p{margin:12px 0 0;font:500 11.5px/1 var(--mono);letter-spacing:.14em}
.bar p+p{margin-top:9px;color:var(--mut);font-size:10.5px}
.shelf-nav{position:absolute;right:var(--pad);bottom:clamp(150px,16vw,230px);display:flex;gap:8px}
.rbtn{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid #fff;display:grid;place-items:center;font:500 16px/1 var(--mono);color:var(--ink);transition:background .2s,transform .2s var(--out)}
.rbtn:hover{background:#fff;transform:translateY(-2px)}

/* spread overlay */
.spread{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(12px,3vw,48px)}
.spread[hidden]{display:none}
.sp-bg{position:absolute;inset:0;background:rgba(9,30,52,.42);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .35s ease}
.spread.on .sp-bg{opacity:1}
.sp-book{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);width:min(1180px,100%);height:min(720px,calc(100svh - 40px));background:var(--paper);border-radius:10px;box-shadow:0 60px 120px -40px rgba(5,20,40,.7);perspective:2000px;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .35s ease,transform .5s var(--out)}
.spread.on .sp-book{opacity:1;transform:none}
.sp-l{position:relative;padding:22px;background:#EEF2F6;border-radius:10px 0 0 10px;display:flex;align-items:center;justify-content:center}
.sp-l::after{content:"";position:absolute;right:0;top:0;bottom:0;width:36px;background:linear-gradient(90deg,transparent,rgba(10,30,50,.12));pointer-events:none}
.sp-l canvas{height:min(640px,calc(100svh - 100px));width:auto;aspect-ratio:5/7;box-shadow:0 20px 40px -20px rgba(10,30,60,.5)}
.sp-r{position:relative;overflow:auto;padding:clamp(26px,3.2vw,48px) clamp(24px,3.4vw,52px) 30px;transform-origin:left center;background:linear-gradient(90deg,rgba(10,30,50,.08),transparent 40px),var(--paper);border-radius:0 10px 10px 0}
.spread.on .sp-r{animation:pageopen .7s var(--out)}
@keyframes pageopen{from{transform:rotateY(-70deg);opacity:.2}to{transform:none;opacity:1}}
.sp-k{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0;padding-right:44px;font:500 11px/1.2 var(--mono);letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
.sp-k .deva{font:400 17px/1 var(--deva);letter-spacing:0;color:var(--ink);text-transform:none}
.sp-r h3{margin:16px 0 0;font:400 italic clamp(40px,4.4vw,64px)/.98 var(--serif);letter-spacing:-.02em}
.sp-text{margin:18px 0 0;max-width:580px;font:400 clamp(16.5px,1.3vw,18.5px)/1.55 var(--sans);color:var(--ink2)}
.sp-facts{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.sp-facts li{padding:6px 9px;border:1px solid var(--hair);border-radius:4px;font:500 11.5px/1.2 var(--mono);color:var(--ink2);background:#fff}
.slot{position:relative;margin:28px 0 0;max-width:580px;display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center}
.slot .ph{position:relative;aspect-ratio:4/3;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.75) 0 1.2px,transparent 1.6px) 0 0/7px 7px,linear-gradient(180deg,#0A58B5,#4F97DB);outline:1.5px solid var(--lime);outline-offset:5px}
.slot .ph::before,.slot .ph::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--ink)}
.slot .ph::before{left:6px;top:6px;border-right:0;border-bottom:0}
.slot .ph::after{right:6px;bottom:6px;border-left:0;border-top:0}
.slot .ph b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--ink);background:var(--lime);padding:5px 6px;white-space:nowrap}
.slot .ph.has{outline-color:transparent}
.slot .ph img{width:100%;height:100%;object-fit:cover}
.slot .ph.has::before,.slot .ph.has::after{display:none}
.slot p{margin:0;font:500 14px/1.45 var(--sans);color:var(--ink2)}
.slot p small{display:block;margin-bottom:6px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:var(--mut);text-transform:uppercase}
.sp-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--hair)}
.sp-nav .pg{font:500 11.5px/1 var(--mono);letter-spacing:.12em;color:var(--mut)}
.sp-x{position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--hair);display:grid;place-items:center;font:500 18px/1 var(--sans)}
.sp-x:hover{border-color:var(--ink)}

/* ============ kind words ============ */
.words{position:relative;z-index:1;padding:clamp(60px,7vw,110px) 0 clamp(70px,8vw,120px)}
.words .head,.toolkit .head{width:var(--colw);margin:0 auto 34px;padding:0;color:var(--ink)}
.words .head h2{color:#fff;text-shadow:var(--tsh)}
.words .secno,.words .count{color:rgba(255,255,255,.88);text-shadow:var(--tsh)}
.quotes{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(14px,1.8vw,24px);width:var(--colw);margin:0 auto;align-items:start}
.q{position:relative;margin:0;padding:26px 26px 24px;background:var(--paper);border-radius:20px;box-shadow:0 30px 60px -36px rgba(10,50,100,.5),0 1px 0 #fff inset;display:flex;flex-direction:column}
.q:nth-child(2){margin-top:46px}
.q:nth-child(3){margin-top:92px}
.q .lab{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--hair);border-radius:4px;font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.q .lab::before{content:"";width:6px;height:6px;background:var(--lime);box-shadow:0 0 0 1px rgba(80,120,0,.35)}
.q blockquote{margin:18px 0 0;font:400 clamp(20px,1.65vw,24px)/1.32 var(--serif);letter-spacing:-.005em;color:var(--ink);text-wrap:pretty}
.q figcaption{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--hair)}
.av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:500 12.5px/1 var(--mono);letter-spacing:.04em}
.q .nm{display:flex;flex-direction:column;line-height:1.25}
.q .nm b{font:600 15px/1.25 var(--sans);letter-spacing:-.01em}
.q .nm b a{text-decoration:none;background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100%/0 1px;transition:background-size .3s var(--out)}
.q .nm b a:hover{background-size:100% 1px}
.q .nm span{font:500 13px/1.3 var(--sans);color:var(--mut)}

/* ============ toolkit ============ */
.toolkit{position:relative;z-index:1;padding:clamp(20px,3vw,40px) 0 clamp(40px,5vw,70px)}
.tk{width:var(--colw);margin:0 auto;padding:clamp(34px,4.6vw,64px) clamp(20px,4vw,56px) clamp(26px,3vw,40px);background:var(--paper);border-radius:30px;box-shadow:0 50px 120px -50px rgba(10,50,100,.5),0 1px 0 #fff inset}
.tk .head{width:auto;padding:0;margin-bottom:28px}
.tk-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.tk-row{display:grid;grid-template-columns:minmax(220px,.42fr) 1fr;gap:12px 40px;padding:20px 0;border-bottom:1px solid var(--hair)}
.tk-row h3{margin:4px 0 0;font:600 17px/1.25 var(--sans);letter-spacing:-.015em}
.tk-row h3 small{margin-left:8px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--mut)}
.tk-row.ai h3::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;vertical-align:1px;background:var(--lime);box-shadow:0 0 0 1px rgba(80,120,0,.45)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{padding:7px 11px;border-radius:999px;border:1px solid #E1E9F0;background:var(--panel);font:500 13px/1 var(--sans);color:var(--ink2)}
.tk-row.ai .chips li{background:#fff;border-color:#D3DEE8}

/* ============ contact ============ */
.contact{position:relative;z-index:1;padding:clamp(20px,3vw,40px) 0 0}
.ct{position:relative;width:var(--colw);margin:0 auto;padding:clamp(40px,6vw,88px) clamp(22px,5vw,72px) clamp(28px,3.4vw,44px);background:var(--paper);border-radius:30px;box-shadow:0 50px 120px -50px rgba(10,50,100,.5),0 1px 0 #fff inset;overflow:hidden}
.ct .secno{display:flex;justify-content:space-between;gap:12px}
.big{margin:22px 0 0;font:700 clamp(40px,8.4vw,126px)/.96 var(--sans);letter-spacing:-.055em;text-wrap:balance}
.big .g{color:#87919E}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.85fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(30px,3.4vw,48px)}
.ct-body{margin:0;max-width:560px;font:400 clamp(17px,1.35vw,19.5px)/1.55 var(--sans);color:var(--ink2)}
.mailrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(26px,3vw,40px)}
.mail{font:600 clamp(22px,2.9vw,42px)/1.12 var(--sans);letter-spacing:-.035em;color:var(--ink);text-decoration:none;user-select:all;-webkit-user-select:all;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 92%/100% .22em;padding:0 .06em;overflow-wrap:anywhere}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,2.6vw,34px) 0 0;padding:0;list-style:none}
.pills a{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--hair);background:#fff;font:500 14px/1 var(--sans);text-decoration:none;transition:border-color .2s,transform .2s var(--out)}
.pills a:hover{border-color:var(--ink);transform:translateY(-2px)}
.pills a span{font:500 12px/1 var(--mono);color:var(--mut)}
.nowc{margin:0;padding:20px 22px 8px;border-radius:20px;background:var(--ink);color:#fff;box-shadow:0 30px 50px -34px rgba(10,30,60,.7)}
.nowc .nh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.nowc .nh h3{display:flex;align-items:center;gap:10px;margin:0;font:600 17px/1 var(--sans);letter-spacing:-.015em}
.nowc .nh span{font:500 10.5px/1 var(--mono);letter-spacing:.12em;color:#93A0AF;text-transform:uppercase}
.nowc dl{margin:0}
.nowc .r{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.nowc .r:last-child{border-bottom:0}
.nowc dt{padding-top:2px;font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#93A0AF}
.nowc dd{margin:0;font:500 15px/1.4 var(--sans);color:#fff;letter-spacing:-.005em}
.foot{position:relative;z-index:1;display:flex;justify-content:center;gap:10px;padding:clamp(150px,18vw,240px) var(--pad) calc(48px + env(safe-area-inset-bottom,0px));font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--ink)}
.foot>span,.foot>a{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(251,252,253,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #fff;box-shadow:0 12px 26px -16px rgba(3,24,62,.6)}
.foot a{text-decoration:none;transition:background .2s}
.foot a:hover{background:#fff;text-decoration:underline}

/* ============ jump menu ============ */
.jump{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .45s var(--out),visibility 0s linear .45s}
.jump.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .45s var(--out),visibility 0s}
.jump.on .jump-btn,.jump.on .jump-panel{pointer-events:auto}
.jump-btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 15px;border-radius:999px;background:rgba(14,17,22,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:500 13.5px/1 var(--sans);box-shadow:0 14px 30px -14px rgba(10,30,60,.6)}
.jump-btn:hover{background:var(--ink)}
.jump-btn svg{width:14px;height:14px}
.jump-btn kbd{padding:4px 6px;border:1px solid rgba(255,255,255,.22);border-radius:5px;font:500 10px/1 var(--mono);color:var(--lime)}
.jump-panel{width:244px;padding:8px;border-radius:18px;background:rgba(251,252,253,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #fff;box-shadow:0 30px 60px -20px rgba(16,60,110,.5);transform-origin:bottom right}
.jump-panel[hidden]{display:none}
.jump-panel ol{margin:0;padding:0;list-style:none}
.jump-panel a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;text-decoration:none;font:600 15px/1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.jump-panel a:hover,.jump-panel a:focus-visible{background:var(--panel);outline:none}
.jump-panel kbd{width:24px;height:24px;display:grid;place-items:center;flex:none;border:1px solid var(--hair);border-radius:6px;background:#fff;font:500 11px/1 var(--mono);color:var(--mut)}
.jump-panel a.on kbd{background:var(--lime);border-color:rgba(100,140,0,.4);color:var(--ink)}
.jump-panel p{margin:6px 10px 4px;font:500 10.5px/1.35 var(--mono);letter-spacing:.04em;color:var(--mut)}

/* ============ no script ============ */
.nos{position:relative;z-index:2;max-width:760px;margin:clamp(24px,6vw,72px) auto;padding:clamp(24px,4vw,44px);background:var(--paper);border-radius:24px;box-shadow:0 40px 90px -40px rgba(10,50,100,.5);font:400 16px/1.6 var(--sans)}
.nos h1{margin:0;font:800 clamp(34px,5vw,56px)/1 var(--sans);letter-spacing:-.04em}
.nos h2{margin:28px 0 8px;font:700 20px/1.2 var(--sans)}
.nos ul{margin:0;padding-left:20px}
html:not(.js) .top,html:not(.js) main,html:not(.js) .jump,html:not(.js) .skip{display:none}

/* ============ intro choreography ============ */
.js [data-in]{opacity:0;transform:translateY(16px)}
.js .go [data-in],.js.go [data-in]{opacity:1;transform:none;transition:opacity .8s ease var(--d,0s),transform 1s var(--out) var(--d,0s)}
.js [data-in="pop"]{transform:scale(.92)}
.js [data-in="down"]{transform:translateY(-18px)}
.js [data-in="blur"]{filter:blur(10px);transform:translateY(10px)}
.js.go [data-in="blur"]{filter:none;transition:opacity .9s ease var(--d,0s),transform 1.1s var(--out) var(--d,0s),filter .9s ease var(--d,0s)}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease var(--d,0s),transform 1s var(--out) var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rcpt.rv,.pin.rv{transform:translateY(22px) rotate(var(--r,0deg))}
.rcpt.rv.in,.pin.rv.in{transform:rotate(var(--r,0deg))}
.rcpt.rv.in:hover,.pin.rv.in:hover{transform:rotate(0deg) translateY(-4px)}
html:not(.js) .rv{opacity:1;transform:none}

/* ============ responsive ============ */
@media (min-width:1900px){
  .l1{font-size:min(5vw,112px)}
  .l2{font-size:min(6.6vw,150px)}
  .intro{max-width:760px;font-size:22px}
  .roles li{font-size:12px}
  .chip{font-size:14px}
  .corner{font-size:12.5px}
}
@media (max-width:1180px) and (min-width:701px){
  .hero{padding-top:calc(max(12px,env(safe-area-inset-top,0px)) + var(--navh) + 106px)}
}
@media (max-width:1100px){
  .links a{padding:11px 10px}
  .row{grid-template-columns:minmax(150px,.6fr) 1fr}
  .row .pts,.row .courses{grid-column:2}
  .quotes{grid-template-columns:1fr 1fr}
  .q:nth-child(3){grid-column:1 / -1;margin-top:0}
  .q:nth-child(2){margin-top:30px}
  .side{display:none}
  .receipts,.pins{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .icards,.folders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-grid{grid-template-columns:1fr}
  .nowc{max-width:520px}
}
@media (max-width:860px){
  .links,.pill>.btn{display:none}
  .menu-btn{display:inline-flex;height:42px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;align-items:center;gap:8px;font:500 14px/1 var(--sans)}
  .menu-btn i{width:14px;height:8px;border-top:1.5px solid #fff;border-bottom:1.5px solid #fff;transition:transform .3s}
  .menu-btn[aria-expanded="true"] i{transform:scaleY(.2)}
  .grid{grid-template-columns:1fr}
  .tk-row{grid-template-columns:1fr}
}
@media (max-width:700px){
  :root{--navh:54px}
  html{scroll-padding-top:36px}
  .pill{padding-left:18px;width:calc(100vw - 20px)}
  .hero{min-height:0;padding-top:calc(max(12px,env(safe-area-inset-top,0px)) + var(--navh) + 70px);padding-bottom:40px}
  .corner{top:calc(max(12px,env(safe-area-inset-top,0px)) + var(--navh) + 50px);font-size:9.5px;letter-spacing:.14em;gap:8px}
  .corner .cross{width:16px;height:16px}
  .corner.r{display:none}
  .corner.l{left:0;right:0;justify-content:center}
  .chip{display:inline-block;font-size:10.5px;padding:8px 11px;white-space:normal;line-height:1.45;text-align:center;margin-top:8px;max-width:100%;letter-spacing:0}
  .chip .dot{vertical-align:0}
  .chip .k{margin-right:.4em}
  .chip .caret{display:none}
  .chip .typed{display:inline;min-width:0!important}
  .hl{margin-top:20px}
  .l1{line-height:1.06}
  .l1 .w.word{display:block;width:max-content;margin:6px auto 0}
  .l1 .arr{display:block;width:max-content;margin:4px auto 0;font-size:.8em}
  .l1 .arr i{transform:rotate(90deg)}
  .me-sub{font-size:11.5px;gap:6px}
  .intro{margin-top:16px;font-size:16px}
  .roles{gap:6px;margin-top:16px}
  .roles li{font-size:9.5px;padding:7px 9px 6px}
  .crt{margin:38px auto 0}
  .crt .dims{display:none}
  .cardbox{display:none}
  .tag .lg{display:none}
  .tag .st{display:inline}
  .prop .tag{white-space:normal;width:max-content;max-width:150px;font-size:10px;padding:4px 6px 4px 5px;gap:5px;opacity:0;transition:opacity .2s}
  .prop.sel-on .tag{opacity:1}
  .prop .tag::before{width:7px;height:7px}
  .crt .tag{font-size:10px}
  .sheet{border-radius:24px}
  .head{flex-direction:column;align-items:flex-start;gap:12px}
  .statement{padding-top:76px}
  .proof{padding:76px 0 84px}
  .receipts,.pins{grid-template-columns:1fr;max-width:340px;gap:26px}
  .think{margin-top:84px}
  .filters{gap:6px}
  .fbtn{height:36px;gap:7px;padding:0 5px 0 11px;font-size:13px}
  .fbtn b{min-width:22px;height:22px;font-size:10.5px}
  .icards,.folders{grid-template-columns:1fr}
  .ic{min-height:0}
  .subhead{flex-direction:column;gap:8px}
  .row{grid-template-columns:1fr;gap:12px;padding-top:26px;padding-bottom:28px}
  .row .pts,.row .courses{grid-column:auto;margin-top:6px}
  .quotes{grid-template-columns:1fr}
  .q:nth-child(n){margin-top:0;grid-column:auto}
  .bar{position:relative;left:auto;bottom:auto;margin:34px auto 0;display:flex;flex-direction:column;align-items:center;text-align:center}
  .shelf-nav{position:relative;right:auto;bottom:auto;justify-content:center;margin-top:18px}
  .sp-book{grid-template-columns:1fr;grid-template-rows:auto auto;overflow:auto;height:calc(100svh - 24px)}
  .sp-l{border-radius:10px 10px 0 0;padding:18px}
  .sp-l canvas{height:auto;width:min(200px,52vw)}
  .sp-l::after{display:none}
  .sp-r{overflow:visible;border-radius:0 0 10px 10px;background:var(--paper)}
  .slot{grid-template-columns:110px 1fr;gap:14px}
  .tk,.ct{border-radius:24px}
  .tk-row{padding:18px 0}
  .nowc .r{grid-template-columns:96px 1fr}
  .foot{flex-direction:column;align-items:center;gap:12px;text-align:center}
  .jump-btn .lbl-k,.jump-btn .jt{display:none}
  .jump-btn{width:46px;height:46px;padding:0;justify-content:center}
  .jump-btn svg{width:16px;height:16px}
}
@media (prefers-reduced-motion:reduce){
  .crt .boot i{animation:none;background-size:100% 100%}
  .js.go .cardbox.ready,.js.go .prop.ready,.js .word canvas,.js .crt canvas.art{transition:none}
  .js.go .prop.ready .sel,.rcsel.on{animation:none}
  .crt .term .t2::after{animation:none}
  .js [data-in],.rv{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .rcpt.rv,.pin.rv{transform:rotate(var(--r,0deg))!important}
  .chip .caret{animation:none}
  .icard{transition:transform .01s}
  .card,.cover,.ic,.folder .paper,.rcpt,.pin,.wbody,.rctag{transition:none}
}