@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&display=swap');
:root{--paper:#e7ebf0;--blue:#315e97;--lime:#5685c1}.floating-nav{position:fixed;top:20px;left:50%;transform:translate(-50%,-110px);opacity:0;z-index:20;background:#202020ed;backdrop-filter:blur(20px);border:1px solid #ffffff26;border-radius:60px;padding:9px 12px;gap:23px;box-shadow:0 10px 35px #0002;transition:transform .5s,opacity .5s}.floating-nav.visible{transform:translate(-50%,0);opacity:1}.floating-nav a{font-size:12px;color:var(--ink)}.mini-brand{display:flex;align-items:center;gap:8px;font-weight:800;padding-right:12px}.mini-brand img{width:30px;height:30px;object-fit:cover;object-position:top;background:var(--accent);border-radius:50%}.motion-toggle{background:transparent;border:1px solid #ffffff30;border-radius:50%;color:var(--ink);width:30px;height:30px;cursor:pointer}.light-section{background:var(--paper);color:#222}.light-section .section-label{color:#62625d;border-color:#2223}.intro-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:8%;align-items:end}.intro h1{font-size:clamp(45px,5.7vw,88px)}em,.handwritten{font-family:Caveat,Georgia,serif;font-style:normal;font-weight:500}h1 em,h2 em{color:var(--accent);font-size:1.14em}.intro-note p{font-size:16px;line-height:1.8;color:#65655f;margin-bottom:25px}.handwritten{font-size:29px}.scribble{font-family:Caveat,serif;font-size:70px;color:var(--accent)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;margin-top:90px;padding-top:30px;border-top:1px solid #2222}.principles span{font-size:10px;letter-spacing:1px;color:#666}.principles h3{font-size:22px;font-weight:500;letter-spacing:-.8px;margin:18px 0 12px}.principles p{font-size:14px;line-height:1.65;color:#65655f;max-width:260px}.projects{background:var(--bg)}.project-heading{align-items:center;margin-bottom:65px}.project-heading h2{font-size:clamp(40px,4.7vw,72px)}.study-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.study-card{position:relative;display:flex;flex-direction:column;min-width:0;text-align:left;border:0;border-radius:18px;padding:27px;color:#171717;overflow:hidden;cursor:pointer;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}.study-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px #0004}.study-orange{background:#183f73}.study-blue{background:var(--blue)}.study-dark{grid-column:1/-1;background:#232923;color:#edf0df}.study-meta{display:flex;justify-content:space-between;width:100%;font-size:10px;letter-spacing:1.2px;z-index:2}.study-meta>span{font-size:23px}.type-art{padding:60px 5px 50px}.type-art>span{display:block;font-size:clamp(50px,7.5vw,115px);font-weight:800;letter-spacing:-.085em;line-height:.95}.outline-type{-webkit-text-stroke:1px #171717;color:transparent;margin-left:10px}.art-star{display:inline-block;font-size:.68em;margin-left:8px;transition:transform .8s}.study-card:hover .art-star{transform:rotate(120deg)}.type-art small{display:block;font-size:8px;letter-spacing:3px;margin-top:30px}.study-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid currentColor;padding-top:19px;margin-top:auto}.study-caption strong{font-size:19px;font-weight:500;letter-spacing:-.5px}.study-caption>span{font-size:8px;letter-spacing:.7px}.hover-label{position:absolute;right:30px;bottom:80px;background:#171717;color:white;padding:14px;border-radius:50px;font-size:9px;opacity:0;transform:translateY(15px);transition:.3s}.study-card:hover .hover-label,.study-card:focus-visible .hover-label{opacity:1;transform:translateY(0)}.ui-art{height:330px;display:grid;place-items:center;position:relative}.mini-window{background:#f9f8f0;width:74%;padding:22px;border-radius:12px;box-shadow:12px 18px 0 #102b523b;transform:rotate(-6deg);transition:transform .6s}.study-card:hover .mini-window{transform:rotate(0) translateY(-5px)}.window-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:26px}.mini-window>small{font-size:6px;letter-spacing:1px}.mini-window h3{font-size:25px;line-height:1.05;letter-spacing:-1px;margin:9px 0 18px;font-weight:500}.mini-chart{height:50px;display:flex;align-items:end;gap:8px}.mini-chart i{flex:1;background:#6894cb;height:40%;border-radius:3px 3px 0 0;transition:height .7s}.mini-chart i:nth-child(2n){height:70%;background:#315e97}.mini-chart i:nth-child(3n){height:90%;background:#102b52}.study-card:hover .mini-chart i:nth-child(odd){height:95%}.mini-task{display:flex;justify-content:space-between;font-size:6px;margin-top:14px;border-top:1px solid #2222;padding-top:10px}.floating-sticker{position:absolute;right:0;bottom:32px;background:#4577b5;border-radius:50%;padding:26px 19px;font-size:13px;transform:rotate(12deg);box-shadow:0 5px 15px #0001}.floating-sticker em{font-size:23px}.orbit-art{position:relative;height:310px;display:grid;place-items:center;overflow:hidden}.orbit-ring{position:absolute;width:400px;height:160px;border:1px solid #5685c180;border-radius:50%;animation:orbit 18s linear infinite}.ring-two{animation-delay:-6s}.ring-three{animation-delay:-12s}.orbit-core{font-size:160px;color:var(--lime);animation:spin 30s linear infinite}.orbit-word{position:absolute;left:3%;font-size:40px;line-height:1.05;letter-spacing:-2px;z-index:1}.orbit-word em{color:var(--lime);font-size:1.3em}.study-dark .study-caption{border-color:#ffffff35}.work-note{color:#909089;font-size:11px;line-height:1.7;margin-top:25px}.playground{background:#1d1d1b}.play-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:50px}.play-heading p{color:#aaa;line-height:1.7;font-size:14px}.play-stage{height:500px;background:#111311;border:1px solid #ffffff1c;border-radius:18px;position:relative;overflow:hidden;--mood:var(--accent)}.play-stage[data-mood=blue]{--mood:var(--blue)}.play-stage[data-mood=lime]{--mood:var(--lime)}.play-grid{position:absolute;inset:0;background:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:45px 45px}.kinetic-object{position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);transition:translate .3s ease-out}.kinetic-object span{position:absolute;inset:0;font-size:270px;line-height:.8;color:var(--mood);transition:color .4s;animation:spin 28s linear infinite;transform-origin:50% 50%}.kinetic-object span:nth-child(2){color:transparent;-webkit-text-stroke:1px var(--mood);translate:35px 20px;animation-direction:reverse}.kinetic-object span:nth-child(3){color:transparent;-webkit-text-stroke:1px var(--mood);translate:-35px -20px}.stage-coordinate{position:absolute;top:28px;left:28px;font-size:9px;letter-spacing:1.5px;color:#aaa}.stage-label{position:absolute;left:35px;bottom:85px;font-size:50px;letter-spacing:-2px;line-height:1}.stage-label em{color:var(--mood);font-size:1.3em;transition:color .4s}.stage-note{position:absolute;right:28px;bottom:30px;font-size:8px;letter-spacing:1px;color:#aaa}.mood-picker{position:absolute;left:30px;bottom:25px;display:flex;gap:10px}.mood-picker button{width:24px;height:24px;border-radius:50%;border:3px solid #171717;outline:1px solid transparent;cursor:pointer}.mood-picker button[aria-pressed=true]{outline-color:white}.mood-picker button[data-color=orange]{background:var(--accent)}.mood-picker button[data-color=blue]{background:var(--blue)}.mood-picker button[data-color=lime]{background:var(--lime)}.personal-layout{display:grid;grid-template-columns:1fr 1.25fr;gap:12%;align-items:center;padding:35px 4%}.polaroid{position:relative;max-width:350px;padding:16px 16px 25px;background:#fffdf7;transform:rotate(-7deg);box-shadow:0 18px 45px #2222;margin:0;transition:transform .5s}.polaroid:hover{transform:rotate(-2deg)}.polaroid>div{background:#d9e7df;height:340px;overflow:hidden}.polaroid img{width:100%;height:100%;object-fit:cover;object-position:top}.polaroid figcaption{font-family:Caveat,serif;font-size:23px;text-align:center;margin-top:18px}.tape{position:absolute;top:-17px;left:33%;width:110px;height:36px;background:#cfb99077;transform:rotate(3deg)}.eyebrow{font-size:10px;letter-spacing:1.6px;color:#888}.personal-copy h2{font-size:clamp(38px,4.3vw,65px);margin:25px 0}.personal-copy p{color:#66665e;font-size:15px;line-height:1.8}.signature-name{display:block;font-size:55px;margin-top:20px}footer{overflow:hidden;padding-bottom:0!important}footer h2{font-size:clamp(40px,7.5vw,110px);margin-bottom:40px}.footer-rotator{display:inline-block;font-family:Caveat,serif;font-size:1.1em;min-width:7ch}.contact-note{display:flex;align-items:center;gap:25px;margin-bottom:65px}.contact-spark{font-size:55px;color:var(--accent)}.contact-note p{font-size:14px;line-height:1.8}.contact-note p>span{color:#888;font-size:12px}.footer-name{font-size:clamp(150px,30vw,480px);font-weight:800;letter-spacing:-.09em;line-height:.95;margin-top:65px;display:flex;justify-content:space-between;align-items:center}.footer-name>span{color:var(--accent);font-size:.65em;animation:spin 40s linear infinite}dialog{width:min(850px,92vw);max-height:90svh;overflow:auto;background:var(--paper);color:#222;border:0;border-radius:20px;padding:45px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:20px;top:20px;width:35px;height:35px;background:transparent;border:1px solid #2224;border-radius:50%;cursor:pointer}dialog h2{margin:22px 0;font-size:52px}dialog>p{max-width:600px;font-size:16px;line-height:1.7;color:#666}#dialog-art{margin:30px 0;border-radius:12px;padding:25px;overflow:hidden}#dialog-art .type-art{padding:30px}#dialog-art .orbit-art{color:white}.dialog-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:8px;letter-spacing:1px}.dialog-done{background:#222;color:white;border:0;border-radius:30px;padding:15px 20px;cursor:pointer}.reveal{transition:opacity .7s,translate .7s cubic-bezier(.2,.7,.2,1)}.motion-enabled .reveal:not(.is-visible){opacity:0;translate:0 35px}.motion-paused *{animation-play-state:paused!important}.motion-paused .reveal{opacity:1!important;translate:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes orbit{from{transform:rotate(-30deg) rotateY(0)}to{transform:rotate(330deg) rotateY(360deg)}}@media(max-width:700px){.floating-nav{gap:16px;white-space:nowrap;top:12px;padding:8px 12px}.floating-nav a{font-size:11px}.mini-brand{padding-right:0}.mini-brand img{width:24px;height:24px}.intro-layout{grid-template-columns:1fr;gap:15px}.intro-note{max-width:400px}.scribble{display:none}.intro-note p{font-size:14px}.principles{margin-top:40px;gap:18px}.principles h3{font-size:17px}.principles p{font-size:12px}.principles span{font-size:8px}.study-grid{grid-template-columns:1fr}.study-dark{grid-column:auto}.study-card{padding:22px}.type-art>span{font-size:85px}.ui-art{height:320px}.study-caption strong{font-size:17px}.orbit-word{font-size:30px;top:30px}.orbit-art{height:320px}.orbit-ring{width:290px}.play-heading{display:block}.play-heading p{margin-top:25px}.play-stage{height:450px}.stage-label{font-size:40px;left:25px}.stage-note{font-size:6px;right:15px;bottom:32px}.kinetic-object{width:180px;height:180px;top:43%}.kinetic-object span{font-size:210px}.personal-layout{grid-template-columns:1fr;gap:60px;padding:15px 0}.polaroid{width:260px;margin:auto}.polaroid>div{height:290px}.personal-copy h2{font-size:45px}.personal-copy p{font-size:14px}.dialog-bottom{align-items:start;flex-direction:column}dialog{padding:32px 24px}dialog h2{font-size:38px}.footer-name{margin-top:50px}.footer-rotator{font-size:1em}.footer-bottom{font-size:8px}}@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;translate:none!important}.kinetic-object{transition:none}.floating-nav{transition:none}}
/* Simplified section layouts. */
.principles h3{margin-top:0}
.polaroid img{object-position:center 58%}
/* Pointer movement uses a single spring animation loop, without CSS transition lag. */
.badge{transition:none;backface-visibility:hidden;transform-style:preserve-3d}
.badge.is-moving{will-change:transform}
.strap{transform-origin:50% 0;transition:none;backface-visibility:hidden}
.strap{transform-style:flat}
.strap::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#ffffff22,transparent 32%,transparent 72%,#0005);border-right:2px solid #151515;opacity:var(--strap-light,.18)}
.strap.is-moving{will-change:transform}
#home .strap.is-flexible{background:none;border:0;box-shadow:none;overflow:visible}
#home .strap.is-flexible::before,#home .strap.is-flexible::after{display:none}
#home .strap .strap-segment{position:absolute;left:0;width:100%;height:calc(12.5% + .5px);transform-origin:50% 0;background:linear-gradient(90deg,#101010 0%,#383838 2%,#202020 5%,#191919 36%,#151515 90%,#090909 98%);border-left:1px solid #ffffff18;border-right:1px solid #080808;pointer-events:none}
#home .strap .strap-segment:last-child{border-radius:0 0 3px 3px}
/* Reference-inspired dark ribbon: a bevel and fine weave give the strap depth. */
#home .strap{background:linear-gradient(90deg,#171717 0%,#343434 8%,#282828 35%,#242424 78%,#111 100%);box-shadow:inset 1px 0 #ffffff1a,inset -1px 0 #0009,3px 2px 6px #0005}
#home .strap::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 3px)}
#home .badge-rig{transform-style:flat;transform-origin:50% 0}
#home .badge-rig.is-moving{will-change:transform}
#home .badge-shell{position:absolute;left:0;z-index:0;pointer-events:none;transform-origin:50% 18px;transform-style:preserve-3d}
#home .badge{z-index:1}
#home .strap{z-index:3;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#101010 0%,#383838 2%,#202020 5%,#191919 36%,#151515 90%,#090909 98%);border-left:1px solid #ffffff18;border-right:1px solid #080808;box-shadow:inset 2px 0 #ffffff06,2px 1px 3px #0008}
#home .badge-shell span{position:absolute;inset:0;border-radius:21px;background:#292929;border:1px solid #ffffff0d;backface-visibility:visible}
#home .badge-shell span:last-child{background:linear-gradient(120deg,#363636,#171717);box-shadow:0 14px 26px #0005}
#home .strap::before{display:none}
#home .strap::after{background:linear-gradient(100deg,#ffffff20,transparent 40%,#0004);border:0}
/* Real depth layers: the portrait and lettering sit above the card surface. */
.badge-rig{perspective:850px}
.badge{overflow:visible;background:transparent;transform-style:preserve-3d;box-shadow:0 22px 38px #0007,0 2px 0 2px #202020;isolation:auto}
.badge-face{position:absolute;inset:0;background:var(--accent);border-radius:14px;box-shadow:inset 0 0 0 2px #ffffff25;transform:translateZ(0);pointer-events:none}
.badge img{width:100%;left:0;bottom:0;height:96%;object-fit:contain;object-position:center bottom;transform:translateZ(12px);border-radius:14px;pointer-events:none}
.badge-title{transform:translateZ(32px);pointer-events:none;text-shadow:0 3px 9px #0006}
.badge-top{transform:translateZ(18px);pointer-events:none}
.badge-bottom{transform:translateZ(19px);border-radius:0 0 13px 13px;pointer-events:none}
.badge .slot{transform:translateZ(3px);pointer-events:none}
.badge-glare{position:absolute;inset:0;border-radius:14px;pointer-events:none;transform:translateZ(24px);background:radial-gradient(ellipse at var(--glare-x,50%) var(--glare-y,50%),#fff9 0%,#fff2 28%,transparent 65%);opacity:var(--glare-opacity,0)}
@media(prefers-reduced-motion:reduce){.badge-title,.badge img,.badge-top,.badge-bottom,.badge-glare{transform:none}.badge-glare{display:none}}
/* Reference refinement: a solid laminated badge, pivoting from its attachment. */
.badge-rig{perspective:1200px}
.badge{overflow:hidden;background:var(--accent);transform-origin:50% 18px;border-color:#414141;box-shadow:0 10px 20px #0004,inset 0 0 0 2px #ffffff20}
#home .badge{border-top-color:#565656;border-left-color:#454545;border-right-color:#282828;border-bottom-color:#242424;box-shadow:var(--edge-x,0px) var(--edge-y,3px) 0 1px #242424,0 18px 30px #0006,inset 1px 1px 0 #ffffff38,inset -1px -1px 0 #0006}
.badge-face,.badge img,.badge-title,.badge-top,.badge-bottom,.badge .slot,.badge-glare{transform:none}
.badge img{width:110%;height:100%;left:-5%;bottom:-8px}
.badge-title{text-shadow:0 1px 4px #0003}
.badge-glare{z-index:5;background:linear-gradient(115deg,transparent 15%,#ffffff50 48%,transparent 75%);background-position:var(--glare-x,50%) var(--glare-y,50%);background-size:200% 200%}
/* Keep the interactive hero from selecting text during pointer gestures. */
.hero{user-select:none;-webkit-user-select:none}
.badge{cursor:grab}
.badge.dragging{cursor:grabbing}

/* Agent card color */
.badge,.badge-face{background:#183f73}
.badge-bottom{font-size:7.8px}

/* Blue admit ticket finish, contained entirely inside the ID card face. */
.badge-face{z-index:0;isolation:isolate;overflow:hidden;background-color:#183f73;background-image:radial-gradient(circle at 1px 1px,#87acd950 1px,transparent 1.5px),linear-gradient(138deg,#ffffff12,transparent 42%,#0e244530);background-size:9px 9px,100% 100%;background-position:var(--ticket-pattern-x,0px) var(--ticket-pattern-y,0px),center;transition:background-position .18s ease-out}
.badge img{z-index:1}
.badge-title,.badge-top,.badge-bottom{z-index:2}
@media(prefers-reduced-motion:reduce){.badge-face{transition:none}}

.name-track{animation-duration:var(--name-duration,91.2s)}
.name-track > .name-group{display:flex;flex-shrink:0;padding:0}
.name-group > span{display:block;flex-shrink:0;padding-right:.4em}


/* Scroll parallax layers use transform-only movement and skip layout changes. */
.scroll-parallax{translate:0 var(--scroll-parallax-y,0px);will-change:translate}
.scroll-section{transform:translate3d(0,var(--scroll-section-y,0px),0);will-change:transform}
@media(prefers-reduced-motion:reduce){.scroll-parallax{translate:none!important;will-change:auto}}
@media(prefers-reduced-motion:reduce){.scroll-section{transform:none!important;will-change:auto}}

/* Extended landing frame keeps the hero on screen before the next section enters. */
.hero{height:115svh;min-height:820px;max-height:none}
@media(max-width:700px){.hero{height:105svh;min-height:760px;max-height:none}}
/* Keep the three ID-card text lines evenly spaced. */
#home:focus{outline:none}
.badge-title{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.badge-title small{margin:0;line-height:1}
.badge-heading{display:block;line-height:1}
.badge-name{position:relative;margin-top:0;line-height:1}
.badge-name span{position:absolute;right:0;top:50%;transform:translateY(-50%);line-height:1}

/* Retro perspective grid: one tile of travel creates a seamless 15s loop. */
#home .hero-retro-grid{position:absolute;inset:0;overflow:hidden;pointer-events:none;perspective:200px;opacity:.5;--grid-angle:65deg;mask-image:linear-gradient(to bottom,transparent 2%,#000 28%,#000 72%,transparent 100%)}
#home .hero-retro-plane{position:absolute;inset:0;transform:rotateX(var(--grid-angle));transform-style:preserve-3d}
#home .hero-retro-lines{position:absolute;left:-100%;top:-100%;width:300%;height:400%;background:linear-gradient(135deg,#102b52 10%,#183f73 40%,#87acd9 55%,#183f73 72%,#102b52 95%);-webkit-mask-image:linear-gradient(to right,#000 1px,transparent 1px),linear-gradient(to bottom,#000 1px,transparent 1px);mask-image:linear-gradient(to right,#000 1px,transparent 1px),linear-gradient(to bottom,#000 1px,transparent 1px);-webkit-mask-size:60px 60px;mask-size:60px 60px;animation:hero-retro-travel 15s linear infinite;will-change:transform}
#home .hero-retro-grid.is-paused .hero-retro-lines{animation-play-state:paused;will-change:auto}
@keyframes hero-retro-travel{from{transform:translateY(-60px)}to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#home .hero-retro-lines{animation:none;will-change:auto}}
/* The interactive canvas renders the perspective mesh and its blue hover glow together. */
#home.kinetic-grid-ready .hero-retro-grid{display:block}
#home.kinetic-grid-ready .hero-kinetic-grid{display:none}
#home .hero-retro-hover{position:absolute;inset:0;perspective:200px;pointer-events:none;opacity:var(--retro-hover,0);transition:opacity .25s ease;mask-image:radial-gradient(circle 220px at var(--retro-x,50%) var(--retro-y,50%),#000 0%,#000a 35%,transparent 100%)}
#home .hero-retro-hover .hero-retro-lines{background:linear-gradient(135deg,#5685c1,#d5dfec 55%,#5685c1)}
@media(prefers-reduced-motion:reduce){#home .hero-retro-hover{display:none}}
/* Fade the compressed horizon before its subpixel lines shimmer. */
#home .hero-retro-grid{mask-image:linear-gradient(to bottom,transparent 0%,transparent 42%,#000 57%,#000 78%,transparent 100%)}
#home .hero-retro-plane{backface-visibility:hidden;transform-style:flat}
#home .hero-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;mask-image:linear-gradient(#000 0%,#000 45%,transparent 85%)}
#home .hero-star-layer{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat;animation:hero-star-twinkle 9s ease-in-out infinite}
#home .hero-stars.is-paused .hero-star-layer{animation-play-state:paused}
@keyframes hero-star-twinkle{0%,100%{opacity:.8}19%{opacity:.52}38%{opacity:.92}57%{opacity:.68}76%{opacity:1}89%{opacity:.72}}
@media(prefers-reduced-motion:reduce){#home .hero-star-layer{animation:none;opacity:1}}
#home .hero-retro-lines{-webkit-mask-image:linear-gradient(to right,transparent,#000 0.5px,#000 1.2px,transparent 2px),linear-gradient(to bottom,transparent,#000 0.5px,#000 1.2px,transparent 2px);mask-image:linear-gradient(to right,transparent,#000 0.5px,#000 1.2px,transparent 2px),linear-gradient(to bottom,transparent,#000 0.5px,#000 1.2px,transparent 2px);backface-visibility:hidden}