*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F3EEE4;font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent,#6D28D9);text-decoration:none}
a:hover{color:var(--ink,#1A1712)}
[data-hscroll]{scrollbar-width:none;-ms-overflow-style:none}
[data-hscroll]::-webkit-scrollbar{height:0;width:0;display:none}
::selection{background:var(--accent,#6D28D9);color:#fff}
@keyframes ggfade{0%,46%{opacity:1}54%,96%{opacity:0}100%{opacity:1}}
@keyframes ggfade2{0%,46%{opacity:0}54%,96%{opacity:1}100%{opacity:0}}
@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatx{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
@keyframes orbit{0%{transform:rotate(0deg) translateX(26px) rotate(0deg)}100%{transform:rotate(360deg) translateX(26px) rotate(-360deg)}}
@keyframes bob{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes dashmove{to{stroke-dashoffset:-400}}
@keyframes fadepulse{0%,100%{opacity:.15}50%{opacity:.7}}
@keyframes cfrFade{0%,3%{opacity:1}25%,97%{opacity:0}100%{opacity:1}}
@keyframes cfrFade2{0%,6%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@keyframes cfrFade6{0%,3%{opacity:1}17%,97%{opacity:0}100%{opacity:1}}
@keyframes cfrFade3{0%,4%{opacity:1}33%,96%{opacity:0}100%{opacity:1}}
.orbit{animation:orbit 14s linear infinite;transform-origin:center}
.bob{animation:bob 8s ease-in-out infinite}
.breathe{animation:breathe 9s ease-in-out infinite;transform-origin:center}
.dashmove{stroke-dasharray:6 10;animation:dashmove 6s linear infinite}
.fadepulse{animation:fadepulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.5}}
@keyframes dash{to{stroke-dashoffset:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.draw{stroke-dasharray:1400;stroke-dashoffset:1400}
.is-in .draw,[data-drawn] .draw{animation:dash 2.2s cubic-bezier(.65,0,.35,1) forwards}
.spin{animation:spin 26s linear infinite;transform-origin:center}
.spinr{animation:spinr 34s linear infinite;transform-origin:center}
.floaty{animation:floaty 7s ease-in-out infinite}
.floatx{animation:floatx 9s ease-in-out infinite}
.pulse{animation:pulse 5s ease-in-out infinite;transform-origin:center}
.par{transition:transform .5s cubic-bezier(.22,.61,.36,1);will-change:transform}
.mq-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.mq-wrap:hover .mq-track{animation-play-state:paused}
@keyframes travel{0%{left:2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:98%;opacity:0}}
.trav{animation:travel 2.8s cubic-bezier(.65,0,.35,1) infinite}
.step:hover .node{transform:scale(1.08)}
.node{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.cap{position:relative}
.cap-modal{position:absolute;left:0;top:0;width:420px;z-index:60;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
.cap:hover>.cap-modal{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.cap-modal-bg{display:none}
.cap-modal-card{position:relative;pointer-events:auto;width:100%;height:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--surface,#FBF8F1);border:1px solid var(--line,#DDD5C6);box-shadow:0 40px 90px -34px rgba(26,23,18,.5);transform:translateY(18px) scale(.98);transform-origin:bottom left;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.cap:hover>.cap-modal .cap-modal-card{transform:none}
.cap-modal-card>div:first-child{flex:0 0 auto;height:200px;min-height:200px!important}
.cap-modal-card>div:last-child{flex:0 0 auto;padding:clamp(20px,1.8vw,28px)!important;gap:11px!important}
@media(max-width:900px){.cap-modal{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;z-index:82}}
@media(prefers-reduced-motion:reduce){.cap-modal-card{transition:none}}
.cf-wrap{position:relative;width:100%;max-width:1400px;margin:0 auto}
.cf-stage{position:relative;height:clamp(440px,52vw,620px);perspective:2000px;touch-action:pan-y;cursor:grab}
.cf-stage:active{cursor:grabbing}
.cf-card{position:absolute;top:0;left:50%;width:clamp(300px,36vw,540px);height:100%;transform-style:preserve-3d;will-change:transform,opacity;transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s ease}
.cf-inner{width:100%;height:100%;display:flex;flex-direction:column;gap:16px;padding:clamp(26px,2.6vw,40px);background:#17130F;border:1px solid #2A2723;box-shadow:0 40px 90px -40px rgba(0,0,0,0.9)}
.cf-card.is-active .cf-inner{border-top:2px solid #9B6DFF;background:#1B1712}
.cf-card:not(.is-active) .cf-inner img{animation-play-state:paused!important}
.cf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid #4A453D;color:#F4EFE6;font-size:24px;cursor:pointer;transition:background .3s,color .3s;line-height:1}
.cf-arrow:hover{background:#F4EFE6;color:#141110}
.cf-dots{display:flex;gap:8px;justify-content:center;margin-top:clamp(28px,3vw,44px)}
.cf-dot{width:8px;height:8px;border-radius:50%;background:#3A352E;border:0;cursor:pointer;padding:0;transition:background .3s,transform .3s}
.cf-dot.on{background:#9B6DFF;transform:scale(1.3)}
@media(prefers-reduced-motion:reduce){.cf-card{transition:none}}
@keyframes glx{0%,100%{clip-path:inset(0 0 0 0)}20%{clip-path:inset(20% 0 40% 0)}40%{clip-path:inset(60% 0 8% 0)}60%{clip-path:inset(35% 0 45% 0)}80%{clip-path:inset(72% 0 12% 0)}}
.idx-row{position:relative;display:grid;grid-template-columns:104px 1fr auto;gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(18px,2vw,30px) 4px;border-bottom:1px solid var(--iline,#2A2723);transition:background .35s ease,padding-left .35s ease}
.idx-row::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;background:#9B6DFF;transform:scaleY(0);transform-origin:top;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.idx-row:hover::before{transform:scaleY(1)}
.idx-row:hover .idx-num{color:#9B6DFF}
.idx-row:hover .idx-cat{color:#B79BFF}
.idx-zzz{display:none};color:var(--iink,#F4EFE6);transition:background .35s ease,padding-left .35s ease}
.idx-row:hover{background:color-mix(in srgb,#9B6DFF 8%,transparent);padding-left:18px}
.idx-thumb{width:104px;height:70px;border:1px solid var(--iline,#2A2723);opacity:.5;transition:opacity .35s ease,transform .35s ease,border-color .35s ease;overflow:hidden}
.idx-row:hover .idx-thumb{opacity:1;transform:scale(1.02);border-color:#9B6DFF}
.idx-title{position:relative;font-size:clamp(22px,3vw,40px);font-weight:500;letter-spacing:-0.02em;line-height:1;color:#F4EFE6;transition:color .3s ease}
.idx-row:hover .idx-title{color:#9B6DFF}
.idx-cat{font-family:'Space Mono',monospace;font-size:clamp(10px,0.9vw,12.5px);letter-spacing:0.16em;text-transform:uppercase;color:var(--imut,#7C766C);text-align:right;white-space:nowrap}
@media(max-width:720px){.idx-row{grid-template-columns:64px 1fr}.idx-thumb{width:64px;height:44px}.idx-cat{display:none}}
@media(prefers-reduced-motion:reduce){.idx-row:hover .idx-title[data-text]::before,.idx-row:hover .idx-title[data-text]::after{animation:none;opacity:0}}
.fw-outline{-webkit-text-stroke:1.4px #F4EFE6;color:transparent}
.fw-card{position:sticky;background:#17130F;border:1px solid #2A2723;border-radius:14px;overflow:hidden;box-shadow:0 -20px 60px -30px rgba(0,0,0,0.8)}
.fw-grid{display:grid;grid-template-columns:1fr 1.1fr;min-height:min(80vh,700px)}
.fw-cta{display:inline-flex;align-items:center;gap:12px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:#F4EFE6;transition:gap .3s ease}
.fw-card:hover .fw-cta{gap:20px}
.fw-cta span.ar{transition:transform .3s ease}
.fw-card:hover .fw-cta span.ar{transform:translateX(4px)}
@media(max-width:820px){
.fw-grid{grid-template-columns:1fr;min-height:0}
.fw-card{position:static !important;top:auto !important;margin-bottom:16px;box-shadow:0 18px 40px -28px rgba(0,0,0,0.7)}
}
#navToggle{display:none}
@media(max-width:860px){
#navToggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:none;border:1px solid var(--line,#DDD5C6);border-radius:10px;cursor:pointer;color:var(--ink,#1A1712);padding:0;flex:0 0 auto}
#navLinks{position:absolute !important;top:100%;left:0;right:0;display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:0 !important;padding:8px clamp(16px,5vw,28px) 24px;background:var(--bg,#F3EEE4);border-bottom:1px solid var(--line,#DDD5C6);box-shadow:0 24px 40px -30px rgba(26,23,18,0.6);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .26s ease,transform .3s cubic-bezier(.22,.61,.36,1),visibility .3s}
#navLinks.open{opacity:1;visibility:visible;transform:translateY(0)}
#navLinks > a{font-size:16px !important;letter-spacing:0.03em !important;padding:16px 2px;border-bottom:1px solid var(--faint,#EAE3D5)}
#navLinks > [data-langswitch]{margin-top:18px;align-self:flex-start}
/* open panel is always light — undo the over-hero link colors */
[data-nav].over-hero #navToggle{color:#F4EFE6;border-color:rgba(244,239,230,0.28)}
#navLinks.open a{color:#5C554A !important}
[data-nav].over-hero #navLinks.open a{color:#5C554A !important}
[data-nav].over-hero #navLinks.open a[data-strong]{color:var(--ink,#1A1712) !important}
[data-nav].over-hero #navLinks.open [data-langswitch]{border-color:var(--line,#DDD5C6)}
[data-nav].over-hero #navLinks.open [data-langswitch] button{color:var(--muted,#7B7365)}
[data-nav].over-hero #navLinks.open [data-langswitch] button.active{background:var(--accent,#6D28D9);color:#fff}
}
/* ---------- MOBILE (≤700px): condensed layout ---------- */
@media(max-width:700px){
/* about: stats 2x2, photo below text */
#about [data-stagger]{grid-template-columns:1fr 1fr !important;max-width:none !important}
#about > div > div:last-child{min-height:0 !important;height:auto !important}
#about > div > div:last-child > div{position:relative !important;top:auto !important;right:auto !important;width:100% !important;max-width:320px;margin:8px auto 0 !important;aspect-ratio:4/5}
/* every two-column section wrapper collapses; no sticky title columns */
[data-cols]{grid-template-columns:1fr !important;gap:22px !important}
[data-cols] > div:first-child{position:static !important;top:auto !important}
[data-bento]{grid-template-columns:1fr !important}
[data-bento] [style*="grid-template-columns"]{grid-template-columns:1fr !important}
[data-tl-row]{grid-template-columns:1fr !important;gap:6px !important;padding-left:22px !important}
#process [data-stagger]{grid-template-columns:1fr !important}
#process [data-stagger] > div{min-height:0 !important;padding:26px 20px !important}
/* coverflow: one card at a time, arrows under the stage */
/* one card at a time, in normal flow — no absolute stacking on mobile */
.cf-stage{overflow:visible;height:auto !important;min-height:0 !important;perspective:none;cursor:default}
.cf-card{position:static !important;width:100% !important;height:auto !important;min-height:0 !important;transform:none !important;opacity:1 !important;transform-style:flat;transition:none}
.cf-card:not(.is-active){display:none !important}
.cf-inner{height:auto !important}
.cf-wrap{padding-bottom:60px}
.cf-arrow{top:auto !important;bottom:0 !important;transform:none !important;width:46px;height:46px}
.cf-wrap > .cf-arrow:first-of-type{left:calc(50% - 54px) !important;right:auto !important}
.cf-wrap > .cf-arrow:last-of-type{left:calc(50% + 6px) !important;right:auto !important}
.cf-dots{margin-top:14px}
/* condensed mobile: hide process, 6 featured, 8 index rows */
[data-hero-meta]{display:none !important}
#top{min-height:0 !important;padding-bottom:90px !important}
#top h1,#top > div{height:auto !important;min-height:0 !important}
#process{display:none !important}
.fw-card:nth-of-type(n+7){display:none !important}
#idxList:not(.show-all) .idx-row:nth-of-type(n+11){display:none !important}
#idxMore{display:flex !important}
/* trim decoration: big ghost numerals, marquee strip, custom cursor */
.mq-wrap{display:none}
.kp-cursor{display:none !important}
image-slot,image-slot *{touch-action:pan-y !important}
/* featured: tighter cards, image fills its panel */
.fw-card{border-radius:12px}
.fw-grid > div:has(> image-slot){min-height:clamp(240px,62vw,340px) !important}
.fw-card image-slot{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important}
.fw-grid > div{padding:26px 20px !important}
/* index rows: drop the wireframe thumb, keep title + category */
.idx-row{grid-template-columns:1fr !important;gap:6px !important;padding:16px 2px !important}
.idx-thumb{display:none !important}
/* experience timeline: stack date above entry */
#experience [data-tl-row]{grid-template-columns:1fr !important;gap:6px !important}
}
[data-nav]{transition:background .4s ease,border-color .4s ease}
[data-nav].over-hero{background:#141110 !important;border-bottom-color:rgba(244,239,230,0.12) !important}
[data-nav].over-hero a{color:rgba(244,239,230,0.6) !important}
[data-nav].over-hero a[data-strong]{color:#F4EFE6 !important}
[data-langswitch]{display:flex;border:1px solid var(--line,#DDD5C6);font-family:'Space Mono',monospace;overflow:hidden}
[data-langswitch] button{appearance:none;background:transparent;border:0;cursor:pointer;padding:6px 11px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:0.08em;color:var(--muted,#7B7365);transition:background .25s,color .25s}
[data-langswitch] button.active{background:var(--accent,#6D28D9);color:#fff}
[data-nav].over-hero [data-langswitch]{border-color:rgba(244,239,230,0.28)}
[data-nav].over-hero [data-langswitch] button{color:rgba(244,239,230,0.6)}
[data-nav].over-hero [data-langswitch] button.active{background:#9B6DFF;color:#fff}
.loader{position:fixed;inset:0;z-index:200;overflow:hidden}
.loader-panels{position:absolute;inset:0;display:flex}
.lp{flex:1;height:100%;background:var(--ink,#1A1712);transform:translateY(0);transition:transform .85s cubic-bezier(.76,0,.24,1)}
.loader.reveal .lp{transform:translateY(-101%)}
.loader.reveal .lp:nth-child(1){transition-delay:0s}
.loader.reveal .lp:nth-child(2){transition-delay:.06s}
.loader.reveal .lp:nth-child(3){transition-delay:.12s}
.loader.reveal .lp:nth-child(4){transition-delay:.18s}
.loader.reveal .lp:nth-child(5){transition-delay:.24s}
.loader.reveal .lp:nth-child(6){transition-delay:.30s}
.loader-fg{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,4vw,52px) clamp(16px,2vw,32px);color:var(--surface,#FBF8F1);transition:opacity .5s ease}
.loader.reveal .loader-fg{opacity:0}
.loader-top{display:flex;justify-content:space-between;align-items:center;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:color-mix(in srgb,var(--surface,#FBF8F1) 70%,transparent)}
.loader-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.lshow{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.lshow.active{opacity:1;transform:none}
.lshow-media{width:min(340px,64vw);height:min(400px,52vh);border:1px solid color-mix(in srgb,var(--surface,#FBF8F1) 24%,transparent);overflow:hidden;background:color-mix(in srgb,var(--surface,#FBF8F1) 8%,transparent)}
.lshow-idx{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.1em;color:var(--accent2,#9B6DFF)}
.lshow-title{font-size:clamp(26px,4vw,44px);font-weight:500;letter-spacing:-0.02em;text-align:center;line-height:1.05}
@media(prefers-reduced-motion:reduce){.lp,.loader-fg,.lshow{transition:none}}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-stagger]>*:not(.cf-card):not(.fw-card){opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
[data-stagger].is-in>*:not(.cf-card):not(.fw-card){opacity:1;transform:none}
.cue{display:inline-block;animation:drift 1s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){[data-reveal],[data-stagger]>*:not(.cf-card):not(.fw-card){opacity:1!important;transform:none!important;transition:none!important}.cue,.spin,.spinr,.floaty,.floatx,.pulse,.mq-track{animation:none!important}.draw{stroke-dashoffset:0!important}}