:root{color-scheme:dark;--bg:#0b0b0e;--text:#f4f2f4;--muted:#aaa9b3;--lime:#d1f778}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:6px}header{height:106px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;position:relative;z-index:5}.mark{font-size:57px;line-height:1;color:#d8c8ee;font-weight:200}nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:5px;border:1px solid #303034;border-radius:50px;background:linear-gradient(150deg,#202024,#101013);gap:5px}nav a,nav button{border:0;background:none;padding:12px 25px;font-size:14px;color:#b4b2ba;white-space:nowrap}nav a[aria-current]{background:#2c2c30;border-radius:30px;color:white}.contact{background:transparent;border:1px solid #44434a;border-radius:50px;padding:15px 23px;font-size:14px}.contact span{margin-left:18px}.hero{text-align:center;position:relative;z-index:4;padding:24px 20px 0}.eyebrow{font-size:11px;letter-spacing:.32em;margin:0 0 22px;color:#d5d2da}h1{font-size:clamp(36px,4.2vw,64px);line-height:1.04;letter-spacing:-.045em;font-weight:400;margin:0}h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.045em;line-height:1.2;background:linear-gradient(100deg,#fff 25%,#c4a0fc 73%,#f1b2a9);color:transparent;background-clip:text;-webkit-background-clip:text}.subtitle{font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:#bdbbc4;margin:21px auto 27px;max-width:900px}.actions{display:flex;justify-content:center;gap:20px}.actions button{padding:16px 27px;border-radius:50px;font-size:14px;transition:transform .25s,box-shadow .25s}.actions button:hover{transform:translateY(-3px)}.actions span{margin-left:17px}.primary{background:var(--lime);color:#14170c;border:1px solid var(--lime);box-shadow:0 0 28px #ccff7320}.primary:hover{box-shadow:0 0 34px #ccff7340}.secondary{background:linear-gradient(#18181c,#101013);border:1px solid #515057}.portfolio{position:relative;height:490px;isolation:isolate;touch-action:pinch-zoom;user-select:none}.stage{position:absolute;top:35px;left:50%;width:1300px;height:370px;transform:translateX(-50%) scale(var(--scale,1));transform-origin:50% 0}.rack{position:relative;height:100%;animation:drift 7s ease-in-out infinite}.folder{position:absolute;width:200px;height:252px;left:var(--x);top:var(--y);z-index:var(--z);transform:translateY(0) perspective(900px) rotateY(-37deg) skewY(15deg);transition:transform .85s cubic-bezier(.2,.75,.15,1),filter .6s;will-change:transform;border:0;background:none;padding:0;isolation:isolate;filter:drop-shadow(3px 5px 2px hsl(var(--h) 90% 70% / .28))}.folder.active{transform:translateY(-98px) perspective(900px) rotateY(-37deg) skewY(15deg);filter:drop-shadow(0 0 13px hsl(var(--h) 90% 60% / .34))}.folder-face{position:absolute;inset:0;clip-path:polygon(0 0,48% 0,57% 9%,94% 9%,100% 13%,100% 97%,96% 100%,4% 100%,0 97%);background:linear-gradient(125deg,#fff9,transparent 30%,transparent 77%,#fff9),radial-gradient(ellipse at 26% 20%,hsl(var(--h) 100% 78% / .75),transparent 60%),radial-gradient(ellipse at 84% 90%,hsl(calc(var(--h) + 25) 100% 73% / .85),transparent 52%),linear-gradient(145deg,hsl(var(--h) 90% 46% / .93),hsl(var(--h) 95% 14% / .93) 63%,hsl(var(--h) 85% 50% / .9));border-radius:12px;box-shadow:inset 2px 0 2px #fff,inset -4px -2px 2px hsl(var(--h) 100% 82%),inset 0 0 32px #ffffff2b}.folder-face:after{content:'';position:absolute;inset:3px;border-radius:10px;box-shadow:inset 0 0 18px #ffffff38;border-left:1px solid #ffffff8c;border-bottom:1px solid #ffffffb0}.folder::after{content:'';position:absolute;inset:100% 0 auto;height:160px;background:linear-gradient(hsl(var(--h) 100% 60% / .26),transparent);filter:blur(16px);transform:skewX(-22deg);pointer-events:none}.folder-content{position:absolute;inset:80px 0 0;display:flex;align-items:center;flex-direction:column;gap:17px;text-shadow:0 1px 10px #0006}.folder-content svg{width:44px;height:44px;fill:none;stroke:#fff;stroke-width:1.1}.folder-title{font-size:25px;letter-spacing:-.04em}.folder-open{font-size:11px;opacity:0;transition:opacity .4s;color:#fffd}.folder.active .folder-open{opacity:1}.aura{position:absolute;z-index:-1;left:8%;right:8%;top:43%;height:40%;background:linear-gradient(90deg,#b2de21,#c86237,#732ab5,#086bff);opacity:.12;filter:blur(48px);border-radius:50%}.scroll-hint{position:absolute;bottom:4px;left:0;right:0;display:flex;align-items:center;flex-direction:column;gap:13px;color:#91909c;font-size:12px;letter-spacing:.14em}.mouse{width:18px;height:29px;border:1px solid #aaa6b5;border-radius:20px;position:relative}.mouse:after{content:'';position:absolute;width:2px;height:6px;top:5px;left:7px;background:#bdb8c8;border-radius:5px;animation:scroll 2s infinite}.mobile-hint{display:none}dialog{border:1px solid #45404f;border-radius:25px;background:#15131c;color:#ede9f3;padding:44px;max-width:520px;width:calc(100% - 36px);box-shadow:0 25px 100px #000a}dialog::backdrop{background:#050508b0;backdrop-filter:blur(12px)}dialog h2{font-size:30px;font-weight:400}dialog p{color:#b9b4c5;line-height:1.7}dialog a{color:var(--lime)}.close{position:absolute;right:18px;top:12px;background:none;border:0;font-size:30px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes drift{50%{transform:translateY(7px)}}@keyframes scroll{50%{transform:translateY(6px);opacity:.4}}@media(min-width:1000px) and (min-height:850px){header{height:120px}.hero{padding-top:35px}.portfolio{margin-top:28px;height:calc(100svh - 475px);min-height:450px}.stage{top:60px}}@media(max-width:800px){header{height:86px;padding:0 24px}nav a,nav button{padding:10px 14px}.top-contact{display:none}.mark{font-size:43px}nav{left:auto;right:20px;transform:none}.hero{padding-top:28px}h1{font-size:clamp(32px,5.4vw,48px)}.subtitle{max-width:580px;padding:0 18px}.portfolio{height:420px;margin-top:40px}.stage{top:45px}}@media(max-width:520px){header{height:72px;padding:0 19px}nav{right:15px}nav a,nav button{padding:10px 11px;font-size:12px}nav button:last-child{display:none}.hero{padding:22px 16px 0}.eyebrow{font-size:9px;letter-spacing:.25em;margin-bottom:18px}h1{font-size:clamp(29px,7.7vw,39px);letter-spacing:-.05em}h1 em{display:inline-block;max-width:370px;line-height:1.06;margin-top:5px}.subtitle{font-size:13px;line-height:1.6;padding:0 5px;margin:20px auto;max-width:350px}.actions{gap:9px}.actions button{font-size:12px;padding:14px 16px}.actions span{margin-left:7px}.portfolio{margin-top:48px;height:calc(100svh - 405px);min-height:300px;max-height:420px}.stage{top:33px}.desktop-hint{display:none}.mobile-hint{display:inline}.scroll-hint{font-size:10px;letter-spacing:.1em;bottom:0;gap:10px}.mouse{height:23px;width:15px}.mouse:after{left:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.zoomed{overflow-y:auto}.blank{min-height:100svh}.blank main{padding:50px 8%}.blank h1{font-size:40px}.back{display:inline-block;color:#bbb4c8;font-size:14px;margin-bottom:70px}

/* Clip the visual archive at the viewport, never widen the document. */
html{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
body{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none}
main,header,.hero{min-width:0;max-width:100%}
.portfolio{width:100%;max-width:100%;overflow:hidden;overflow:clip}
.stage{top:70px}
.folder[aria-hidden="true"]{pointer-events:none}
@media(max-width:800px){nav{left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 80px)}.mark{font-size:30px}.stage{top:55px}}
@media(max-width:520px){header{justify-content:center}.mark{position:absolute;left:12px;font-size:22px}nav{left:50%;right:auto;max-width:calc(100% - 76px);transform:translateX(-50%)}nav a,nav button{padding:10px clamp(8px,2.7vw,13px)}.stage{top:42px}.actions{flex-wrap:wrap}}

/* Each area owns its space, including a separate scroll instruction row. */
body:not(.blank){height:100dvh;min-height:360px;display:grid;grid-template-rows:auto minmax(0,1fr)}
body:not(.blank)>header{height:72px}
body:not(.blank)>main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
.mark{font-size:38px}
nav{padding:4px;gap:2px}
nav a,nav button{padding:9px 20px;font-size:13px}
.contact{padding:11px 19px;font-size:13px}
.hero{padding:20px 20px 14px}
.eyebrow{font-size:10px;letter-spacing:.28em;margin:0 0 13px}
h1{font-size:clamp(30px,3.3vw,50px);line-height:1.04}
h1 em{line-height:1.1}
.subtitle{font-size:15px;line-height:1.45;margin:15px auto 18px;max-width:760px}
.actions{gap:14px}
.actions button{font-size:13px;padding:12px 22px}
.portfolio{height:auto!important;min-height:0;max-height:none;margin:0;overflow:hidden;overflow:clip}
.stage{top:var(--stage-top,50px)}
.scroll-hint{position:static;margin:0;padding:18px 12px 22px;gap:9px;font-size:11px;line-height:1.3;background:var(--bg);z-index:2}
.mouse{height:24px;width:16px}.mouse:after{left:6px}
@media(max-width:800px){.top-contact{display:none}.hero{padding-top:15px}.subtitle{font-size:14px;max-width:570px}.mark{font-size:28px}}
@media(max-width:520px){body:not(.blank)>header{height:62px}.mark{font-size:22px}nav a,nav button{padding:9px 12px;font-size:12px}.hero{padding:12px 15px 10px}.eyebrow{font-size:9px;margin-bottom:11px}h1{font-size:clamp(27px,7.2vw,35px)}h1 em{margin-top:3px;line-height:1.08}.subtitle{font-size:13px;line-height:1.45;margin:13px auto 15px;max-width:330px}.actions{gap:9px}.actions button{font-size:12px;padding:11px 15px}.scroll-hint{padding:12px 10px 16px;font-size:10px}}
@media(max-height:700px){body:not(.blank)>header{height:56px}.hero{padding-top:8px;padding-bottom:8px}.eyebrow{margin-bottom:8px}h1{font-size:clamp(26px,min(7.2vw,4.9vh),38px)}.subtitle{margin:10px auto 12px;font-size:13px}.actions button{padding:10px 18px}.scroll-hint{padding-top:10px;padding-bottom:12px;gap:6px}.mouse{height:20px}}
@media(max-height:520px){body:not(.blank)>header{height:46px}.mark{font-size:26px}nav a,nav button{padding:7px 15px;font-size:12px}.contact{padding:8px 16px;font-size:12px}.hero{padding-top:3px;padding-bottom:6px}.eyebrow{font-size:9px;margin-bottom:6px}h1{font-size:26px}.subtitle{font-size:12px;margin:7px auto 9px}.actions button{padding:8px 15px;font-size:12px}.scroll-hint{flex-direction:row;justify-content:center;padding:8px 10px;font-size:10px}.mouse{width:13px;height:18px}.mouse:after{left:5px;height:4px}}

.folder{width:240px;height:300px}.folder-content{inset:94px 0 0;gap:20px}.folder-content svg{width:48px;height:48px}.folder-title{font-size:28px}

/* Let the actual folder reflections fade through the reserved hint row. */
body:not(.blank)>main{overflow:hidden;overflow:clip;isolation:isolate}
.portfolio{overflow:visible}
.scroll-hint{background:transparent;text-shadow:0 1px 8px #0b0b0e}

/* Chromatic Fan: a frontal, softly curved archive of frosted glass. */
:root{--lime:#f4f0ef;--bg:#0b0b0f}
body{background:radial-gradient(ellipse at 50% 25%,#17141c 0,transparent 60%),var(--bg)}
h1 em{background-image:linear-gradient(105deg,#fbf8fc 25%,#ceb0f4 95%)}
.primary{color:#17131a;background:#f5f1ef;border-color:#fff8;box-shadow:0 4px 30px #e1cbf412}
.primary:hover{box-shadow:0 4px 30px #e1cbf42a}
.folder{width:300px;height:350px;transform:translateY(0) perspective(1100px) rotateY(var(--angle)) rotateZ(var(--tilt));filter:drop-shadow(0 3px 3px hsl(var(--h) 95% 80% / .48))}
.folder.active{transform:translateY(-80px) perspective(1100px) rotateY(var(--angle)) rotateZ(var(--tilt));filter:drop-shadow(0 0 16px hsl(var(--h) 95% 70% / .2))}
.folder-face{border-radius:20px;background:linear-gradient(115deg,#fff9,transparent 17%,transparent 75%,#fffb),radial-gradient(ellipse at 16% 25%,hsl(calc(var(--h) + 20) 100% 80% / .8),transparent 48%),radial-gradient(ellipse at 90% 90%,hsl(calc(var(--h) + 40) 100% 72% / .92),transparent 48%),radial-gradient(ellipse at 55% 55%,hsl(var(--h) 80% 8% / .5),transparent 64%),linear-gradient(155deg,hsl(var(--h) 84% 57% / .91),hsl(var(--h) 70% 20% / .83));box-shadow:inset 3px 0 2px #fff,inset -4px -3px 3px hsl(var(--h) 100% 87%),inset 0 0 30px #ffffff35}
.folder-face:after{border-radius:17px;inset:4px;box-shadow:inset 0 0 28px #ffffff1c;border-left:1px solid #fff9;border-bottom:1px solid #fffc}
.folder-content{inset:120px 0 0;gap:21px}.folder-content svg{width:53px;height:53px}.folder-title{font-size:29px}.folder-open{font-size:12px}
.folder::after{height:200px;filter:blur(22px);transform:skewX(-5deg);background:linear-gradient(hsl(var(--h) 100% 70% / .32),transparent)}
.aura{left:0;right:0;top:60%;height:45%;background:linear-gradient(90deg,#5435bc,#1464dd,#f087b6,#fca62e,#8f49b9);opacity:.13;filter:blur(54px)}

/* Reference-matched glass artwork, with independent interactive folder layers. */
.stage{width:1536px}
.folder{width:var(--card-w);height:var(--card-h);transform:translateY(0) perspective(1600px) rotateY(var(--angle)) skewY(var(--skew));filter:none}
.folder.active{transform:translateY(-60px) perspective(1600px) rotateY(var(--angle)) skewY(var(--skew));filter:none}
.folder-art,.folder-reflection{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:hue-rotate(var(--color-shift)) saturate(1.15) brightness(var(--glass-brightness));user-select:none}
.folder-reflection{inset:calc(100% - 24px) 0 auto;height:75%;transform:scaleY(-1);opacity:.4;filter:hue-rotate(var(--color-shift)) saturate(1.35) brightness(.75) blur(9px);mask-image:linear-gradient(to top,#0009,transparent 85%);-webkit-mask-image:linear-gradient(to top,#0009,transparent 85%)}
.folder::after{display:none}
.folder-content{inset:38% 0 0;gap:32px;text-shadow:0 1px 10px #0003}
.folder-content svg{width:58px;height:58px;stroke-width:.85}.folder-title{font-size:27px;letter-spacing:-.035em}
.folder[data-group="1"] .folder-content{inset:36% 0 0;gap:40px}
.folder[data-group="1"] .folder-content svg{width:65px;height:76px}
.folder-open{display:none}
.aura{top:72%;height:31%;opacity:.085;filter:blur(45px)}

.folder-art{filter:saturate(.78) brightness(var(--glass-brightness))}
.folder:not([data-group="1"]) .folder-art{filter:grayscale(1) brightness(var(--glass-brightness))}
.folder-tint{position:absolute;inset:0;pointer-events:none;mask:url('/assets/glass-folder.png') center/100% 100% no-repeat;-webkit-mask:url('/assets/glass-folder.png') center/100% 100% no-repeat;background:hsl(var(--h) 85% 52%);mix-blend-mode:color}
.folder[data-group="1"] .folder-tint{display:none}
.folder[data-slot="9"] .folder-art,.folder[data-slot="10"] .folder-art,.folder[data-slot="11"] .folder-art,.folder[data-slot="12"] .folder-art,.folder[data-slot="9"] .folder-tint,.folder[data-slot="10"] .folder-tint,.folder[data-slot="11"] .folder-tint,.folder[data-slot="12"] .folder-tint{transform:scaleX(-1)}

/* Independent low-amplitude breathing; selection lift remains a separate transform. */
.rack{animation:none}
.folder{animation:folder-breathe var(--sway-duration,9s) ease-in-out var(--sway-delay,0s) infinite;will-change:transform,translate}
@keyframes folder-breathe{0%,100%{translate:0 calc(var(--sway-distance,6px)*-.5)}50%{translate:0 var(--sway-distance,6px)}}
.primary{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 20% 0%,#ffb65388,transparent 65%),linear-gradient(125deg,#ff7b17,#fc4d08 55%,#ff961f);border:1px solid #ffa34d;color:#241006;box-shadow:inset 0 1px 1px #ffe0a8aa,inset 0 -1px 2px #a82708aa,0 4px 25px #ff690d24}
.primary:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('/assets/glass-folder.png') center 55%/100% 350%;filter:grayscale(1) contrast(1.2);mix-blend-mode:soft-light;opacity:.65}
.primary:hover{box-shadow:inset 0 1px 1px #ffe0a8aa,0 5px 28px #ff690d45}
@media(prefers-reduced-motion:reduce){.folder{animation:none;translate:none}}

/* Separate source-matched artwork preserves each primary folder's unique light and perspective. */
.folder[data-group]{transform:translateY(0)}
.folder[data-group].active{transform:translateY(-60px)}
.folder[data-group] .folder-art{transform:none;filter:none}
.folder[data-group] .folder-tint{display:none}
.folder[data-group] .folder-reflection{filter:blur(8px);transform:scaleY(-1);opacity:.48}
.folder[data-group="0"] .folder-art{top:-8%;height:116%}
.folder[data-group="2"] .folder-art{top:-4%;height:110%}
.folder[data-group="0"] .folder-content{transform:skewY(3deg)}
.folder[data-group="2"] .folder-content{transform:skewY(-3deg)}

/* Clean orange glass: no reused folder silhouette inside the button. */
.primary{color:#fff;background:radial-gradient(ellipse at 18% 0%,#ffb25180,transparent 60%),linear-gradient(115deg,#ff750a,#ff4d00 58%,#ff840d);border-color:#ff9848;box-shadow:inset 0 1px 1px #ffe0b377,0 3px 22px #ff5b0025;animation:cta-glow 6.5s ease-in-out infinite;text-shadow:0 1px 2px #9d270050}
.primary:before{display:none}
@keyframes cta-glow{50%{box-shadow:inset 0 1px 1px #ffe0b377,0 3px 28px #ff5b0040;filter:brightness(1.045)}}
nav a,nav button{position:relative;transition:color .2s,background .2s}
nav a:after,nav button:after{content:'';position:absolute;left:25%;right:25%;bottom:4px;height:1px;background:#e8d9ff;transform:scaleX(0);transition:transform .22s ease;transform-origin:center}
nav a:hover,nav button:hover,nav a:focus-visible,nav button:focus-visible{color:#fff;background:#ffffff08;border-radius:30px}
nav a:hover:after,nav button:hover:after,nav a:focus-visible:after,nav button:focus-visible:after{transform:scaleX(1)}
.folder[aria-hidden="true"] .folder-art{filter:hue-rotate(calc(var(--h)*1deg - 220deg)) brightness(.92);transform:none!important}
.folder[aria-hidden="true"][data-slot="10"] .folder-art,.folder[aria-hidden="true"][data-slot="11"] .folder-art,.folder[aria-hidden="true"][data-slot="12"] .folder-art{filter:hue-rotate(calc(var(--h)*1deg - 38deg)) brightness(.92)}
.folder[aria-hidden="true"] .folder-tint{display:none}
.folder-art{z-index:2;transition:transform .6s ease,filter .6s;transform-origin:50% 95%}
.folder-reflection{z-index:0}.folder-content{z-index:3}
.folder-papers{position:absolute;inset:22% 13% 8%;z-index:1;pointer-events:none;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.folder-papers i{position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,#fff,#e9e7ed);box-shadow:0 2px 9px #0003;transform:rotate(-3deg)}
.folder-papers i:after{content:'';position:absolute;left:15%;right:15%;top:18%;height:30%;background:repeating-linear-gradient(transparent 0 12px,#bab7c333 12px 13px)}
.folder-papers i+ i{transform:translate(7px,4px) rotate(3deg)}
.folder:hover .folder-papers,.folder:focus-visible .folder-papers{transform:translateY(-85px) rotate(-2deg)}
.folder.opening{animation-play-state:paused}
.folder[data-group].opening .folder-art{transform:perspective(800px) rotateX(-30deg) scale(1.06)}
.folder.opening .folder-papers{transform:translateY(-110px) scale(1.12)}
body:not(.blank)>header,body:not(.blank)>main{transition:opacity .55s ease,filter .55s ease}
.page-leaving>header,.page-leaving>main{opacity:0;filter:blur(5px)}
.typed-character{opacity:0;animation:type-letter .001s step-end forwards}
@keyframes type-letter{to{opacity:1}}
.blank main{animation:page-arrive .55s ease-out both}
@keyframes page-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.typed-character{opacity:1}.primary,.blank main{animation:none}.page-leaving>header,.page-leaving>main{opacity:1;filter:none}}

.folder-papers{inset:36% 16% 22%}
.folder:hover .folder-papers,.folder:focus-visible .folder-papers{transform:translateY(-115px) rotate(-2deg)}
h1 em:has(.typed-character){background:none;color:#d9c3f3}

/* Heading stays visible by default; typing only hides letters temporarily. */
.typed-character{opacity:1;animation:none}
.folder[data-group="0"] .folder-content{transform:perspective(850px) rotateY(15deg) skewY(-2deg);transform-origin:center}
.folder[data-group="2"] .folder-content{transform:perspective(850px) rotateY(-15deg) skewY(2deg);transform-origin:center}
.primary{background:#7133ca;border-color:#bd8aff;color:#fff;text-shadow:0 1px 3px #28103a55;box-shadow:inset 0 1px 1px #ead6ff99,0 4px 25px #8b40ec30;animation:none}
.primary:before{display:block;inset:-80%;border-radius:50%;background:radial-gradient(ellipse at 25% 35%,#e5bdffb0,transparent 33%),radial-gradient(ellipse at 70% 60%,#4c167fcc,transparent 42%),radial-gradient(ellipse at 45% 80%,#b668f7cc,transparent 40%),linear-gradient(125deg,#5520a1,#a054dc);background-size:100% 100%;filter:blur(9px);mix-blend-mode:normal;opacity:1;animation:violet-flow 10s ease-in-out infinite alternate;z-index:-1}
.primary:hover{box-shadow:inset 0 1px 1px #ead6ff99,0 5px 30px #9450ee55}
@keyframes violet-flow{from{transform:translate(-5%,-4%) rotate(-8deg) scale(1)}to{transform:translate(7%,6%) rotate(12deg) scale(1.12)}}
.folder-transition{position:fixed;inset:0;z-index:200;pointer-events:auto;overflow:hidden}
.transition-folder{isolation:isolate;perspective:800px;transform-origin:center;pointer-events:none}
.transition-folder .folder-art{filter:none;transform:none;z-index:2}
.transition-folder .folder-tint{display:none}
.transition-folder .folder-content{z-index:3}
.transition-folder .folder-papers{z-index:1}
.page-leaving>header,.page-leaving>main{transition-delay:.35s}
@media(prefers-reduced-motion:reduce){.primary:before{animation:none}.typed-character{opacity:1}}

/* Frosted violet with independent, softly drifting internal light fields. */
.primary{background:linear-gradient(125deg,#763ac8cc,#49216abf);border-color:#d8b6ff99;box-shadow:inset 0 1px 2px #ffffffb0,inset 0 -1px 2px #c18aff80,inset 1px 0 2px #f2dfff88,0 5px 25px #793be735;backdrop-filter:blur(12px)}
.primary:before{inset:-55%;background:radial-gradient(ellipse at 25% 30%,#e9c4ffcc,transparent 37%),radial-gradient(ellipse at 75% 65%,#351258dd,transparent 45%),radial-gradient(ellipse at 55% 80%,#b979ffaa,transparent 42%);filter:blur(10px);animation:violet-flow 11s ease-in-out infinite alternate}
.primary:after{content:'';position:absolute;inset:-45%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 75% 20%,#f5e6ffb3,transparent 28%),radial-gradient(ellipse at 25% 70%,#6130acbb,transparent 40%);filter:blur(12px);mix-blend-mode:screen;opacity:.55;animation:glass-caustic 14.7s ease-in-out -6.4s infinite alternate}
@keyframes glass-caustic{from{transform:translate(8%,-5%) rotate(8deg)}to{transform:translate(-9%,7%) rotate(-14deg)}}
body:not(.blank)>header,body:not(.blank)>main{transition:opacity .32s ease;filter:none!important;transition-delay:0s}
.page-leaving>header,.page-leaving>main{opacity:0;filter:none;transition-delay:0s}
.blank main{animation:page-arrive .35s ease-out both}
@media(max-width:600px){
 .portfolio{overflow:hidden;overflow:clip;mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 85%,transparent 100%);touch-action:pinch-zoom}
 .stage{width:100%;height:100%;left:0;top:0;transform:none}
 .rack{height:100%;width:100%;perspective:1000px}
 .folder,.folder[data-group],.folder[data-group].active{left:50%;top:50%;width:var(--mobile-card-w);height:var(--mobile-card-h);z-index:var(--mobile-depth);transform:translate3d(calc(-50% + var(--mobile-side,0px)),calc(-50% + var(--mobile-offset) + var(--drag-y,0px)),0) scale(var(--mobile-scale));transition:transform .62s cubic-bezier(.22,.75,.2,1),opacity .4s;filter:none}
 .folder[aria-hidden="true"]{opacity:.85}
 .folder:not(.active) .folder-content{opacity:.75}
 .folder .folder-art{top:0!important;height:100%!important;transform:none}
 .folder-reflection{display:none}
 .folder-content,.folder[data-group="1"] .folder-content{inset:37% 0 0;gap:20px}
 .folder-content svg,.folder[data-group="1"] .folder-content svg{width:45px;height:52px}
 .folder-title{font-size:25px}
 .dragging .folder{transition:none}
 .folder-papers{display:none}
 .aura{top:15%;height:70%;opacity:.1}
 .hero{z-index:50;background:linear-gradient(#0b0b0f 75%,#0b0b0f00)}
 .scroll-hint{font-size:11px;padding-top:8px}
}
@media(prefers-reduced-motion:reduce){.primary:before,.primary:after{animation:none}.folder{transition:none}}
/* A continuous mobile reel: equal perspective, no detached decorative edges. */
.mobile-rail{display:none}
.primary{background:linear-gradient(115deg,#30164edd,#9564ce99 45%,#301946ee);border:1px solid #e0b8ffc4;box-shadow:inset 0 2px 3px #fff9,inset 0 -5px 9px #17062799,inset 3px 0 7px #d39cff55,inset -3px 0 7px #d39cff55,0 7px 28px #7d3ed344}
.primary:before{inset:-38%;background:radial-gradient(ellipse at 26% 35%,#f9dfffaa,transparent 25%),radial-gradient(ellipse at 68% 58%,#16052ad9,transparent 32%),url('/assets/refined-pink.png') center 56%/115% 260%;filter:hue-rotate(265deg) saturate(.8) blur(3px);opacity:.86;animation:violet-flow 12s ease-in-out -3s infinite alternate}
.primary:after{inset:-65%;background:radial-gradient(ellipse at 70% 32%,#fff9,transparent 22%),radial-gradient(ellipse at 25% 65%,#b978ff88,transparent 37%);filter:blur(8px);opacity:.65}
.folder.opening{pointer-events:none}
@media(max-width:600px){
 .portfolio .stage{display:none}
 .mobile-rail{display:block;position:absolute;inset:0;transform:translate3d(0,var(--drag-y,0px),0);transition:transform .4s cubic-bezier(.2,.75,.2,1)}
 .dragging .mobile-rail{transition:none}
 .mobile-rail .mobile-card{left:50%;top:50%;width:var(--mobile-card-w);height:var(--mobile-card-h);transform:translate3d(-50%,calc(-50% + var(--mobile-offset)),0);z-index:var(--mobile-depth);transition:transform .43s cubic-bezier(.22,.75,.25,1);animation:none;filter:none;opacity:1}
 .mobile-rail .mobile-card .folder-art{filter:hue-rotate(var(--mobile-hue)) saturate(.88) brightness(1.04);transform:none;top:0;height:100%;z-index:2}
 .mobile-rail .mobile-card .folder-content{transform:perspective(850px) rotateY(15deg) skewY(-2deg);inset:38% 0 0;opacity:1;gap:18px}
 .mobile-rail .folder-papers{display:block;inset:30% 18% 20%;transform:translateY(0) perspective(850px) rotateY(15deg) skewY(-2deg);transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:1}
 .mobile-rail .active .folder-papers{transform:translateY(-40%) perspective(850px) rotateY(15deg) skewY(-2deg);transition-delay:.22s}
 .mobile-rail .folder-open{display:none}
 .mobile-rail .folder:after{display:none}
 .portfolio{mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
}

/* Keep the gradient painted on one stable text surface throughout its reveal. */
h1 em{display:inline-block}
.primary{background:#6500d9;color:#fff;border-color:#c994ff;box-shadow:inset 0 2px 3px #f3d9ff9c,inset 0 -4px 9px #260055aa,0 5px 30px #8c18ed55;text-shadow:0 1px 3px #170032,0 0 9px #230047;font-weight:500}
.primary:before{inset:-55%;border-radius:0;background:radial-gradient(ellipse at 22% 32%,#6750ff,transparent 28%),radial-gradient(ellipse at 72% 67%,#11002e,transparent 42%),url('/assets/refined-blue.png') center 50%/120% 300%;filter:hue-rotate(42deg) saturate(1.5) contrast(1.25);opacity:1;animation:purple-current 7s ease-in-out -2s infinite alternate}
.primary:after{inset:-50%;background:radial-gradient(ellipse at 73% 32%,#d882ffb3,transparent 26%),radial-gradient(ellipse at 30% 65%,#410079aa,transparent 34%);filter:blur(7px);mix-blend-mode:screen;opacity:.5;animation:glass-caustic 9.3s ease-in-out -5s infinite alternate}
@keyframes purple-current{from{transform:translate(-10%,-6%) rotate(-9deg) scale(1)}to{transform:translate(12%,9%) rotate(13deg) scale(1.14)}}
@media(max-width:600px){
 .actions .secondary{display:none}
 .actions .primary{min-width:245px;padding:16px 26px;font-size:14px}
 .mobile-rail .mobile-card.opening{z-index:100}
}
@media(prefers-reduced-motion:reduce){.primary:before,.primary:after{animation:none}}

/* Slow color blooms above the glass texture, below the readable label. */
.primary .cta-colors{position:absolute;inset:0;margin:0;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden}
.color-wave{position:absolute;inset:0;clip-path:circle(0% at 24% 65%);background:#164d03;animation:green-bloom 27s cubic-bezier(.4,0,.2,1) infinite}
.color-wave:before{content:'';position:absolute;inset:-55%;background:radial-gradient(ellipse at 22% 32%,#6750ff,transparent 28%),radial-gradient(ellipse at 72% 67%,#11002e,transparent 42%),url('/assets/refined-blue.png') center 50%/120% 300%;filter:hue-rotate(-115deg) saturate(1.5) contrast(1.25);animation:purple-current 7s ease-in-out -2s infinite alternate}
.color-wave.orange{background:#8a2600;animation-name:orange-bloom;clip-path:circle(0% at 75% 32%)}
.color-wave.orange:before{filter:hue-rotate(170deg) saturate(1.6) contrast(1.2)}
.color-wave.violet{background:#6500d9;animation-name:violet-bloom;clip-path:circle(0% at 35% 70%)}
.color-wave.violet:before{filter:hue-rotate(42deg) saturate(1.5) contrast(1.25)}
@keyframes green-bloom{0%,18.5%{clip-path:circle(0% at 24% 65%)}33.33%,89%{clip-path:circle(120% at 24% 65%)}89.01%,100%{clip-path:circle(0% at 24% 65%)}}
@keyframes orange-bloom{0%,44.44%{clip-path:circle(0% at 75% 32%)}59.26%,89%{clip-path:circle(120% at 75% 32%)}89.01%,100%{clip-path:circle(0% at 75% 32%)}}
@keyframes violet-bloom{0%,70.37%{clip-path:circle(0% at 35% 70%);opacity:1}85.19%,90%{clip-path:circle(120% at 35% 70%);opacity:1}100%{clip-path:circle(120% at 35% 70%);opacity:0}}
.folder,.mobile-rail .mobile-card{animation:folder-breathe var(--sway-duration,9s) ease-in-out var(--sway-delay,0s) infinite,folder-turn calc(var(--sway-duration,9s)*1.27) ease-in-out var(--sway-delay,0s) infinite;transform-style:preserve-3d}
@keyframes folder-turn{0%,100%{rotate:0 1 0 -3.45deg}50%{rotate:0 1 0 3.45deg}}
.folder.opening,.mobile-rail .mobile-card.opening{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.color-wave,.color-wave:before,.folder,.mobile-rail .mobile-card{animation:none!important}.cta-colors{display:none}}

/* Soft diffusion masks mix the ink over the existing moving glass. */
@property --ink-radius{syntax:'<percentage>';inherits:false;initial-value:0%}
.primary .color-wave{clip-path:none;--ink-radius:0%;mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.7) at 24% 65%,#000 0%,#000e 32%,#0008 62%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.7) at 24% 65%,#000 0%,#000e 32%,#0008 62%,transparent 100%);animation:ink-green 30s ease-in-out infinite;opacity:0}
.primary .color-wave.orange{mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.5) at 75% 32%,#000 0%,#000e 32%,#0008 62%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.5) at 75% 32%,#000 0%,#000e 32%,#0008 62%,transparent 100%);animation-name:ink-orange}
.primary .color-wave.violet{mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.6) at 35% 70%,#000 0%,#000e 32%,#0008 62%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.6) at 35% 70%,#000 0%,#000e 32%,#0008 62%,transparent 100%);animation-name:ink-violet}
@keyframes ink-green{0%,16.67%{--ink-radius:0%;opacity:0}20%{--ink-radius:7%;opacity:.6}36.67%,89%{--ink-radius:250%;opacity:1}89.01%,100%{--ink-radius:0%;opacity:0}}
@keyframes ink-orange{0%,46.67%{--ink-radius:0%;opacity:0}50%{--ink-radius:7%;opacity:.6}66.67%,89%{--ink-radius:250%;opacity:1}89.01%,100%{--ink-radius:0%;opacity:0}}
@keyframes ink-violet{0%,76.67%{--ink-radius:0%;opacity:0}80%{--ink-radius:7%;opacity:.6}88%,93%{--ink-radius:250%;opacity:1}100%{--ink-radius:250%;opacity:0}}
.primary,.primary:hover{animation:ink-halo 30s ease-in-out infinite}
@keyframes ink-halo{
 0%,16.67%,93%,100%{border-color:#c994ff;box-shadow:inset 0 2px 3px #f3d9ff9c,inset 0 -4px 9px #260055aa,0 5px 30px #8c18ed55}
 36.67%,46.67%{border-color:#b9ff8c;box-shadow:inset 0 2px 3px #eaffd99c,inset 0 -4px 9px #154400aa,0 5px 30px #66f52455}
 66.67%,76.67%{border-color:#ffc287;box-shadow:inset 0 2px 3px #ffe6ce9c,inset 0 -4px 9px #632200aa,0 5px 30px #ff731955}
}
@media(prefers-reduced-motion:reduce){.primary,.primary:hover,.primary .color-wave{animation:none!important}.primary .cta-colors{display:none}}

/* Editorial folder labels: large flush-left type, atmospheric icon at right. */
.folder .folder-content,.folder[data-group="1"] .folder-content{inset:49% 9% auto 8%;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-align:left;text-shadow:0 2px 12px #130d2840}
.folder .folder-title{order:0;white-space:nowrap;font-size:calc(var(--card-w,285px)*.14);font-weight:400;letter-spacing:-.065em;line-height:1.05}
.folder .folder-content svg,.folder[data-group="1"] .folder-content svg{order:1;flex:0 0 34px;width:34px;height:39px;stroke-width:1.2;opacity:.78;filter:blur(.6px) drop-shadow(0 0 5px #fff5);animation:label-icon-drift 6.7s ease-in-out var(--sway-delay,0s) infinite alternate}
@keyframes label-icon-drift{from{translate:0 -2px;opacity:.62;filter:blur(.5px) drop-shadow(0 0 3px #fff4)}to{translate:0 2px;opacity:.88;filter:blur(.9px) drop-shadow(0 0 7px #fff6)}}
@media(max-width:600px){
 .mobile-rail .mobile-card .folder-content{inset:49% 10% auto 8%;gap:10px;flex-direction:row;align-items:center;justify-content:space-between}
 .mobile-rail .mobile-card .folder-title{font-size:calc(var(--mobile-card-w)*.14)}
 .mobile-rail .mobile-card .folder-content svg{flex-basis:28px;width:28px;height:33px}
}
@media(prefers-reduced-motion:reduce){.folder .folder-content svg{animation:none}}

/* Image labels share the face plane; the near edge reads larger than the far edge. */
.folder .folder-content,.folder[data-group="1"] .folder-content{inset:47% 7% auto 7%;gap:9px;transform:none;transform-origin:center;align-items:center}
.folder[data-group="0"] .folder-content{transform:perspective(430px) rotateY(34deg)}
.folder[data-group="2"] .folder-content{transform:perspective(430px) rotateY(-34deg)}
.folder .folder-label{display:block;order:0;width:80%;height:auto;min-width:0;pointer-events:none;filter:drop-shadow(0 1px 1px #23173024);user-select:none}
.folder .folder-content svg,.folder[data-group="1"] .folder-content svg{flex:0 0 13%;width:13%;height:36px}
@media(max-width:600px){
 .mobile-rail .mobile-card .folder-content{inset:47% 7% auto 7%;transform:perspective(430px) rotateY(34deg);gap:9px}
 .mobile-rail .mobile-card .folder-content svg{flex-basis:13%;width:13%;height:32px}
}
/* Larger symbols and a softly lifted, still crisp image label. */
.folder[data-group="2"] .folder-content{transform-origin:left center;transform:perspective(700px) rotateY(-34deg);left:7%}
.folder .folder-label{width:74%;filter:blur(.18px) drop-shadow(0 1px 2px #fff4) drop-shadow(0 3px 5px #160f2850);animation:label-light 7.3s ease-in-out var(--sway-delay,0s) infinite alternate}
.folder .folder-content svg,.folder[data-group="1"] .folder-content svg{flex-basis:18%;width:18%;height:47px}
@keyframes label-light{from{filter:blur(.15px) drop-shadow(0 0 2px #fff3) drop-shadow(0 2px 4px #160f2840)}to{filter:blur(.3px) drop-shadow(0 0 4px #fff5) drop-shadow(0 3px 6px #160f2850)}}
@media(max-width:600px){.mobile-rail .mobile-card .folder-content svg{flex-basis:18%;width:18%;height:43px}}
@media(prefers-reduced-motion:reduce){.folder .folder-label{animation:none}}

/* Anchor the visible symbol independently from the perspective-compressed label row. */
.folder .folder-icon{position:absolute;right:9%;top:49%;z-index:3;width:15%;height:44px;fill:none;stroke:#fff;stroke-width:1.2;transform-origin:right center;opacity:.76;filter:blur(.6px) drop-shadow(0 0 5px #fff5);animation:label-icon-drift 6.7s ease-in-out var(--sway-delay,0s) infinite alternate;pointer-events:none}
.folder[data-group="0"] .folder-icon{transform:perspective(430px) rotateY(34deg)}
.folder[data-group="1"] .folder-icon{width:9%;height:44px}
.folder[data-group="2"] .folder-icon{transform:perspective(700px) rotateY(-34deg)}
.folder .folder-label{opacity:.83}
@keyframes label-light{from{filter:blur(.3px) drop-shadow(0 0 2px #fff3) drop-shadow(0 2px 4px #160f2830)}to{filter:blur(.5px) drop-shadow(0 0 4px #fff4) drop-shadow(0 3px 6px #160f2840)}}
@media(max-width:600px){
 .mobile-rail .mobile-card .folder-icon{right:9%;top:49%;width:15%;height:40px;transform:perspective(430px) rotateY(34deg)}
 .mobile-rail .mobile-card[data-mobile-group="1"] .folder-icon{width:9%}
}
@media(prefers-reduced-motion:reduce){.folder .folder-icon{animation:none}}

/* One measured face projection keeps labels and symbols in the same perspective. */
.face-plane{position:absolute;inset:0;z-index:3;transform-origin:0 0;pointer-events:none}
.folder .face-plane .folder-content,.mobile-rail .mobile-card .face-plane .folder-content{inset:43% 7% auto 3%;transform:none;transform-origin:0 0;gap:0}
.folder .face-plane .folder-label{width:76%}
.folder .face-plane .folder-icon,.mobile-rail .mobile-card .face-plane .folder-icon{right:7%;top:44%;transform:none;width:15%;height:50px}
.folder[data-group="1"] .face-plane .folder-icon,.mobile-rail .mobile-card[data-mobile-group="1"] .face-plane .folder-icon{width:9%}

/* Align optical centers after projection, with a slightly flatter Mob App label. */
.folder[data-group="1"] .folder-label,.mobile-rail .mobile-card[data-mobile-group="1"] .folder-label{transform:scaleY(.92);transform-origin:center}
.folder .folder-icon{translate:none!important}
/* The button uses the original blue, pink and gold folder textures. */
.primary{background:#163675;text-shadow:0 1px 3px #0c1028,0 0 9px #141527;color:#fff}
.primary:before{inset:-40%;background:#102751 url('/assets/refined-blue.png') center 56%/115% 255%;filter:none;opacity:1;animation:purple-current 9s ease-in-out -2s infinite alternate}
.primary:after{background:radial-gradient(ellipse at 70% 30%,#fff7,transparent 24%),radial-gradient(ellipse at 30% 70%,#ffffff25,transparent 40%);filter:blur(8px);opacity:.42;mix-blend-mode:screen}
.primary .color-wave.green{background:#a94e79}
.primary .color-wave.orange{background:#6e4827}
.primary .color-wave.violet{background:#163675}
.primary .color-wave:before{inset:-40%;background:#a94e79 url('/assets/refined-pink.png') center 56%/115% 255%;filter:none;animation:purple-current 9s ease-in-out -2s infinite alternate}
.primary .color-wave.orange:before{background:#6e4827 url('/assets/refined-gold.png') center 56%/115% 255%;filter:none}
.primary .color-wave.violet:before{background:#102751 url('/assets/refined-blue.png') center 56%/115% 255%;filter:none}
@keyframes ink-halo{
 0%,16.67%,93%,100%{border-color:#b6d7ff;box-shadow:inset 0 2px 3px #fff9,inset 0 -2px 3px #aad0ffb3,0 5px 0 #193966,0 7px 1px #8ab9fa99,0 9px 2px #0a1834,0 13px 28px #4588ec55}
 36.67%,46.67%{border-color:#ffd0df;box-shadow:inset 0 2px 3px #fff9,inset 0 -2px 3px #ffd1deb3,0 5px 0 #773b5b,0 7px 1px #f7a5c099,0 9px 2px #341525,0 13px 28px #e96c9955}
 66.67%,76.67%{border-color:#ffe1a5;box-shadow:inset 0 2px 3px #fff9,inset 0 -2px 3px #ffe3aab3,0 5px 0 #795626,0 7px 1px #f6cb8499,0 9px 2px #34230c,0 13px 28px #ecb44d55}
}
@media(prefers-reduced-motion:reduce){.primary{border-color:#b6d7ff;box-shadow:inset 0 2px 3px #fff9,0 5px 0 #193966,0 7px 1px #8ab9fa99,0 9px 2px #0a1834,0 13px 28px #4588ec55}}

/* One palette clock drives both the headline and the glass rim. */
@property --glass-tone{syntax:'<color>';inherits:true;initial-value:#7aa8ff}
@property --work-lift{syntax:'<length>';inherits:true;initial-value:0px}
:root{animation:shared-palette 30s ease-in-out infinite}
@keyframes shared-palette{0%,16.67%,93%,100%{--glass-tone:#7aa8ff}36.67%,46.67%{--glass-tone:#efa0ba}66.67%,76.67%{--glass-tone:#edc17b}}
h1 em{background:linear-gradient(110deg,color-mix(in srgb,var(--glass-tone),white 62%) 8%,var(--glass-tone) 55%,color-mix(in srgb,var(--glass-tone),white 28%) 90%);background-clip:text;-webkit-background-clip:text;color:transparent}
.primary,.primary:hover{animation:none;text-shadow:none;border-color:color-mix(in srgb,var(--glass-tone),white 38%);box-shadow:inset 0 1px 2px #ffffffb3,inset 0 -1px 2px #ffffff80,0 3px 5px color-mix(in srgb,var(--glass-tone),transparent 48%),0 10px 28px color-mix(in srgb,var(--glass-tone),transparent 70%)}
.primary span{text-shadow:none}
.primary:after{inset:auto 1px 0;height:8px;border-radius:0 0 50px 50px;filter:none;mix-blend-mode:normal;opacity:.95;animation:none;background:linear-gradient(to bottom,#fff0 0%,color-mix(in srgb,var(--glass-tone),transparent 72%) 25%,#ffffffc4 47%,color-mix(in srgb,var(--glass-tone),#1b2037 40%) 60%,color-mix(in srgb,var(--glass-tone),white 55%) 84%,#ffffff99 100%);box-shadow:inset 0 -1px 1px #fff9;z-index:0}
/* Several diffuse clouds meet instead of a single circular wipe. */
.primary .color-wave,.primary .color-wave.orange,.primary .color-wave.violet{mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.5) at 12% 70%,#000d, #0007 38%,transparent 100%),radial-gradient(ellipse calc(var(--ink-radius)*.8) calc(var(--ink-radius)*2) at 53% 24%,#000e,#0007 42%,transparent 100%),radial-gradient(ellipse calc(var(--ink-radius)*1.1) calc(var(--ink-radius)*1.7) at 90% 63%,#000e,#0006 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse var(--ink-radius) calc(var(--ink-radius)*1.5) at 12% 70%,#000d,#0007 38%,transparent 100%),radial-gradient(ellipse calc(var(--ink-radius)*.8) calc(var(--ink-radius)*2) at 53% 24%,#000e,#0007 42%,transparent 100%),radial-gradient(ellipse calc(var(--ink-radius)*1.1) calc(var(--ink-radius)*1.7) at 90% 63%,#000e,#0006 40%,transparent 100%)}
.folder .folder-icon{stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
@keyframes folder-breathe{0%,100%{translate:0 calc(var(--work-lift,0px) + var(--sway-distance,6px)*-.5)}50%{translate:0 calc(var(--work-lift,0px) + var(--sway-distance,6px))}}
@media(min-width:601px){.folder[data-group]{transition:transform .85s cubic-bezier(.2,.75,.15,1),--work-lift .5s ease}.work-peek .folder[data-group]{--work-lift:calc(var(--card-h)*-.15)}}
@media(prefers-reduced-motion:reduce){:root{animation:none}.work-peek .folder[data-group]{translate:0 var(--work-lift,0px)}}

/* Artwork and its projected printing open as one physical face. */
.folder-front{position:absolute;inset:0;z-index:2;transform-origin:50% 95%;pointer-events:none}
.folder.opening .folder-art{transform:none!important}
.folder.opening .folder-label,.folder.opening .folder-icon{animation-play-state:paused}
.folder .face-plane .folder-content,.mobile-rail .mobile-card .face-plane .folder-content{inset:55% 12% auto;display:flex;justify-content:center;align-items:center;text-align:center;transform:none}
.folder .face-plane .folder-label{width:100%}
.folder .face-plane .folder-icon,.mobile-rail .mobile-card .face-plane .folder-icon{left:50%;right:auto;top:24%;width:20%;height:23%;transform:translateX(-50%);transform-origin:center}
.folder[data-group="1"] .face-plane .folder-icon,.mobile-rail .mobile-card[data-mobile-group="1"] .face-plane .folder-icon{width:14%}
/* The selection lift and works preview share a continuously interpolated transform. */
@keyframes folder-breathe{0%,100%{translate:0 calc(var(--sway-distance,6px)*-.5)}50%{translate:0 var(--sway-distance,6px)}}
@media(min-width:601px){
 .folder[data-group]{--selection-rise:0px;transform:translateY(calc(var(--selection-rise) + var(--work-lift)));transition:transform 1.15s cubic-bezier(.25,.65,.25,1)}
 .folder[data-group].active{--selection-rise:-60px;transform:translateY(calc(var(--selection-rise) + var(--work-lift)))}
}
@media(max-width:600px){
 .mobile-rail .mobile-card{translate:none;animation:mobile-folder-turn calc(var(--sway-duration,9s)*1.27) ease-in-out var(--sway-delay,0s) infinite}
}
@keyframes mobile-folder-turn{0%,100%{rotate:0 1 0 -3.9675deg}50%{rotate:0 1 0 3.9675deg}}
/* A rendered glass capsule carries the same cloudy material and a real lower bevel. */
.primary,.primary:hover{background:transparent;border:0;box-shadow:0 10px 28px color-mix(in srgb,var(--glass-tone),transparent 78%);overflow:visible;isolation:isolate}
.primary:before,.primary .color-wave:before{inset:-3px -4px -6px;background:transparent url('/assets/glass-capsule.png') center/106% 148% no-repeat;filter:none;transform:none;border-radius:inherit;animation:none;opacity:1}
.primary:after{inset:8% 6% 15%;height:auto;border-radius:inherit;box-shadow:none;z-index:-1;background:radial-gradient(ellipse at 24% 35%,#ffffff45,transparent 33%),radial-gradient(ellipse at 72% 65%,#839bff30,transparent 35%);mix-blend-mode:screen;filter:blur(5px);opacity:.5;animation:capsule-light 8s ease-in-out infinite alternate;pointer-events:none}
.primary .cta-colors{inset:-3px -4px -6px;overflow:visible}
.primary .color-wave.green,.primary .color-wave.orange,.primary .color-wave.violet{background:transparent;border-radius:inherit}
.primary .color-wave:before{inset:0;filter:hue-rotate(112deg) saturate(.75)}
.primary .color-wave.orange:before{background:transparent url('/assets/glass-capsule.png') center/106% 148% no-repeat;filter:hue-rotate(185deg) saturate(.75)}
.primary .color-wave.violet:before{background:transparent url('/assets/glass-capsule.png') center/106% 148% no-repeat;filter:none}
@keyframes capsule-light{from{transform:translate(-4%,-3%) scale(.94);opacity:.35}to{transform:translate(4%,3%) scale(1.06);opacity:.7}}
@media(prefers-reduced-motion:reduce){.mobile-rail .mobile-card,.primary:after{animation:none!important}.folder[data-group]{transition:none}.work-peek .folder[data-group]{translate:none}}

/* Quiet face marks: natural glyph widths and a compact, centered lockup. */
.folder .face-plane .folder-content,.mobile-rail .mobile-card .face-plane .folder-content{inset:53% 18% auto;text-shadow:none}
.folder .face-plane .folder-label{width:100%;opacity:.9;animation:none;filter:none;transform:scaleY(1.3);transform-origin:center}
.folder[data-group="1"] .face-plane .folder-label{transform:scaleY(1.05)}
.folder[data-group="2"] .face-plane .folder-label{transform:scaleY(1.3)}
.folder .face-plane .folder-icon,.mobile-rail .mobile-card .face-plane .folder-icon{top:29%;width:14%;height:18%;stroke-width:1.35;opacity:.83;filter:blur(.12px);animation:none}
.folder[data-group="1"] .face-plane .folder-icon,.mobile-rail .mobile-card[data-mobile-group="1"] .face-plane .folder-icon{width:9%}
.mobile-rail .mobile-card .face-plane .folder-label{transform:scaleY(1.35)}
@media(max-width:600px){.mobile-rail .mobile-card .face-plane .folder-content{inset:53% 20% auto}}

.folder .face-plane .folder-content,.mobile-rail .mobile-card .face-plane .folder-content{right:auto;width:64%;transform:translateX(-50%)}
@media(max-width:600px){.mobile-rail .mobile-card .face-plane .folder-content{width:60%;right:auto}}
h1 em.cycling-title{position:relative;background:none;color:inherit;max-width:100%}
.title-reserve{visibility:hidden;display:block;white-space:nowrap}
.title-line{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.title-ink{background:linear-gradient(110deg,color-mix(in srgb,var(--glass-tone),white 62%),var(--glass-tone) 60%,color-mix(in srgb,var(--glass-tone),white 28%));background-clip:text;-webkit-background-clip:text;color:transparent}
.typing-cursor{display:inline-block;flex:0 0 1px;height:.83em;background:var(--glass-tone);margin-left:.09em;animation:cursor-blink 1s steps(1) infinite}
@keyframes cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:600px){h1 em.cycling-title{font-size:.88em}}

/* Preserve the symbols' native aspect ratios before projecting onto the glass. */
.folder .face-plane .folder-icon,.mobile-rail .mobile-card .face-plane .folder-icon{top:38%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%) scaleY(1.3);transform-origin:center;overflow:visible}
.folder[data-group="1"] .face-plane .folder-icon{aspect-ratio:24 / 42;transform:translate(-50%,-50%) scaleY(1.05)}
.folder[data-group="2"] .face-plane .folder-icon{aspect-ratio:41 / 40}
.mobile-rail .mobile-card .face-plane .folder-icon{transform:translate(-50%,-50%) scaleY(1.35)}
.mobile-rail .mobile-card[data-mobile-group="1"] .face-plane .folder-icon{aspect-ratio:24 / 42}
.mobile-rail .mobile-card[data-mobile-group="2"] .face-plane .folder-icon{aspect-ratio:41 / 40}

/* Fourth portfolio direction: mint glass with the same gold face geometry. */
.folder[data-group="3"] .folder-art{top:-4%;height:110%;filter:hue-rotate(115deg)}
.folder[data-group="3"] .folder-reflection{filter:hue-rotate(115deg) blur(4px)}
.folder[data-group="3"] .face-plane .folder-label{transform:scaleY(1.3)}
.folder[data-group="3"] .face-plane .folder-icon{aspect-ratio:1}