/* Homepage only. Legacy project templates retain their existing styles. */
:root{--page:#f7f8fa;--surface:#fff;--surface-soft:#eef0f5;--ink:#19202e;--muted:#646d80;--line:#dfe3ec;--accent:#6552da;--cyan:#007e9f;--shadow:rgba(34,38,68,.15);--header:rgba(247,248,250,.8);color-scheme:light}
:root[data-theme=dark]{--page:#0d111b;--surface:#171d29;--surface-soft:#131925;--ink:#eff1f8;--muted:#a0a9bc;--line:#2c3444;--accent:#b8a2ff;--cyan:#53d6ee;--shadow:rgba(0,0,0,.5);--header:rgba(13,17,27,.8);color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:40px}body.portfolio-home{margin:0;background:var(--page);color:var(--ink);font-family:"proxima-nova",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} .portfolio-home *{box-sizing:border-box}.portfolio-home h1,.portfolio-home h2,.portfolio-home h3,.portfolio-home p{margin:0}.portfolio-home a{color:inherit;text-decoration:none}.portfolio-home button,.portfolio-home input{font:inherit}.portfolio-home button{color:inherit;cursor:pointer}.portfolio-home button{border:0;background:none}.portfolio-home img{display:block;max-width:100%;height:auto}.portfolio-home a,.portfolio-home button,.portfolio-home input{-webkit-tap-highlight-color:transparent}.portfolio-home :focus-visible{outline:3px solid var(--accent);outline-offset:5px}.portfolio-home ::selection{background:#b8adff;color:#151324}.portfolio-home [hidden]{display:none!important}.wrap{width:min(1240px,calc(100% - 112px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:10px;left:10px;z-index:100;background:var(--surface);padding:12px;transform:translateY(-160%)}.skip-link:focus{transform:none}.enhanced-only{display:none!important}.js .enhanced-only{display:flex!important}.reading-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#9448f6,#1acaf1);z-index:60}.site-header{height:112px;display:flex;align-items:center;gap:52px;position:relative;z-index:3}.brand{display:inline-flex;gap:12px;align-items:center;font-size:19px;font-weight:700;letter-spacing:-.6px;white-space:nowrap}.brand-period{color:var(--accent)}.brand-mark{width:36px;height:36px;background:linear-gradient(35deg,#dc26ee,#6654fa 45%,#00d5e8);mask:url('../xc-mask.png') center/contain no-repeat;-webkit-mask:url('../xc-mask.png') center/contain no-repeat}.site-header nav{display:flex;gap:30px;margin-left:auto;font-size:14px;font-weight:600}.site-header nav a{position:relative;padding:10px 0}.site-header nav a:after{content:'';position:absolute;bottom:4px;left:0;width:0;height:2px;background:var(--accent);transition:width .2s}.site-header nav a:hover:after{width:100%}.header-controls{gap:16px;align-items:center;border-left:1px solid var(--line);padding-left:25px}.icon-button{display:grid;place-items:center;min-width:40px;min-height:40px;border-radius:50%}.icon-button:hover{background:var(--surface-soft)}.icon-button svg{width:23px;height:23px}.motion-toggle{display:flex;align-items:center;gap:7px;padding:10px 0;font-size:11px!important;white-space:nowrap;color:var(--muted)!important}.motion-indicator{width:6px;height:6px;border-radius:50%;background:var(--cyan)}[data-motion=off] .motion-indicator{background:var(--muted)}
.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:615px;padding-top:35px;padding-bottom:88px}.hero-copy{position:relative;z-index:2;padding-bottom:12px}.eyebrow{text-transform:uppercase;font-size:11px;font-weight:600;letter-spacing:1.7px;line-height:1.5;color:var(--muted);display:flex;align-items:center;gap:10px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent)}.hero h1{font-size:clamp(54px,5.8vw,83px);letter-spacing:-4.8px;font-weight:700;line-height:1.035;margin-top:25px}.gradient-text{background:linear-gradient(100deg,#a34ade 0%,#6860e6 40%,#0787c8 85%);color:transparent;background-clip:text;-webkit-background-clip:text}[data-theme=dark] .gradient-text{background-image:linear-gradient(100deg,#d78bff,#998bff 40%,#30cfea 90%)}.hero-description{font-size:19px;line-height:1.6;color:var(--muted);margin-top:25px!important;letter-spacing:-.1px}.hero-actions{display:flex;gap:27px;align-items:center;margin-top:31px}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:14px 23px;border-radius:7px;font-size:14px;font-weight:600;background-color:var(--surface-soft)!important;border:1px solid var(--line)!important;transition:transform .2s,box-shadow .2s}.button-primary{background-color:var(--ink)!important;color:var(--page)!important;border-color:var(--ink)!important;box-shadow:0 6px 15px var(--shadow)}.button:hover{transform:translateY(-2px)}.button span{font-size:19px;font-weight:400}.text-link{display:inline-flex;gap:13px;align-items:center;font-size:14px;font-weight:600;padding:8px 0}.text-link:hover{color:var(--accent)}.tagline{align-items:center;gap:9px;color:var(--muted)!important;text-align:left;font-size:12px!important;margin-top:34px;padding:6px 0;max-width:370px}.tagline>span:first-child{font-size:19px;color:var(--accent)}.tagline-refresh{opacity:.5}.tagline:hover .tagline-refresh{opacity:1}.hero-art{position:relative;aspect-ratio:1.08;min-width:0;isolation:isolate;margin-right:-20px}.hero-art:before{content:'';position:absolute;inset:0 -15% -5%;z-index:-2;background:radial-gradient(ellipse at 65% 34%,rgba(91,221,243,.17),transparent 53%),radial-gradient(ellipse at 25% 66%,rgba(145,115,235,.19),transparent 55%);filter:blur(16px);pointer-events:none}.hero-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:50%;inset:8% 4% 5%;transform:rotate(-25deg) scaleY(.85);z-index:-1}.orbit-two{inset:18% -5% 17%;transform:rotate(32deg) scaleY(.87);border-style:dashed;opacity:.65}.art-coordinate{position:absolute;right:0;top:3%;font-size:8px;letter-spacing:2px;color:var(--muted);writing-mode:vertical-rl;opacity:.65}.logo-control{position:absolute;inset:0;width:100%;height:100%;padding:0;touch-action:pan-y;border-radius:28px;cursor:grab!important}.logo-control:active{cursor:grabbing!important}.logo-fallback{position:absolute;inset:9% 8% 12%;filter:drop-shadow(15px 24px 12px var(--shadow));transform:perspective(800px) rotateY(var(--logo-turn,-12deg)) rotateZ(-7deg);animation:logo-float 8s ease-in-out infinite;transition:opacity .3s}.logo-color{display:block;width:100%;height:100%;mask:url('../xc-mask.png') center/contain no-repeat;-webkit-mask:url('../xc-mask.png') center/contain no-repeat;background:linear-gradient(35deg,#d922e8,#6951ff 28%,#00d4e6 55%,#a9eb63 75%,#ffa771);background-size:240% 240%;animation:logo-gradient 20s ease-in-out infinite alternate}.logo-color:after{content:'';position:absolute;inset:0;background:url('../x-shadows.png') center/contain no-repeat;opacity:.45}.logo-canvas{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}.logo-canvas canvas{width:100%;height:100%;display:block}.hero-art.has-webgl .logo-canvas{opacity:1}.hero-art.has-webgl .logo-fallback{opacity:0}.logo-ground{position:absolute;left:22%;right:15%;bottom:13%;height:5%;border-radius:50%;background:var(--shadow);filter:blur(16px);z-index:-1}.logo-hint{position:absolute;bottom:0;left:0;right:0;align-items:center;justify-content:center;gap:8px;font-size:10px;color:var(--muted);letter-spacing:.3px;pointer-events:none}.logo-hint>span:first-child{font-size:17px}.art-caption{position:absolute;right:-3%;bottom:14%;font-size:8px;letter-spacing:1.4px;line-height:1.6;color:var(--muted);transform:rotate(-90deg);transform-origin:right}.hero-footnote{position:absolute;bottom:17px;left:0;right:0;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:17px;color:var(--muted);font-size:11px;letter-spacing:.2px}.hero-footnote a{display:flex;gap:25px}.hero-footnote a span{color:var(--accent)}
.projects-section{position:relative;padding:82px 0 105px;overflow:hidden}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:45px;margin-bottom:45px}.section-number{opacity:.6;letter-spacing:.5px}.section-heading h2{font-size:clamp(30px,3.1vw,44px);line-height:1.14;letter-spacing:-1.5px;margin-top:15px}.accent-dot{color:var(--accent)}.section-heading>p{font-size:14px;line-height:1.65;color:var(--muted);max-width:340px;padding-bottom:3px}.active-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px;padding:10px 3px}.active-slot{perspective:1100px;min-width:0;--rest-tilt:-2deg;--rest-y:5deg}.active-slot:nth-child(2){--rest-tilt:2deg;--rest-y:-4deg}.active-slot:nth-child(3){--rest-tilt:-1.8deg;--rest-y:4deg}.active-slot:nth-child(4){--rest-tilt:2deg;--rest-y:-5deg}.active-card{height:100%;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:2px 5px 0 color-mix(in srgb,var(--line) 85%,var(--muted)),0 26px 28px -16px var(--shadow);transform:rotateZ(var(--rest-tilt)) rotateY(var(--rest-y));transition:transform .35s,box-shadow .35s;transform-style:preserve-3d;animation:card-float 7s ease-in-out infinite;animation-delay:calc(var(--card-index) * -1.7s);display:flex;flex-direction:column}.active-visual{height:228px;position:relative;overflow:hidden;border-radius:12px 12px 0 0;background:#151c29}.active-visual:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 35px rgba(0,0,0,.08);pointer-events:none}.active-visual img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.active-card:hover img{transform:scale(1.035)}.project-type{position:absolute;top:15px;left:15px;background:rgba(13,17,27,.75);color:#fff;font-size:8px;letter-spacing:1.5px;padding:5px 8px;border:1px solid #ffffff30;border-radius:3px;backdrop-filter:blur(8px)}.active-copy{padding:21px 20px 18px;flex:1;display:flex;flex-direction:column}.active-copy h3{font-size:21px;letter-spacing:-.65px;font-weight:700;line-height:1.2}.active-copy>p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:10px;margin-bottom:24px}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}.tags{display:flex;gap:5px;flex-wrap:wrap}.tags span{font-size:9px;font-weight:600;color:var(--muted);background:var(--surface-soft);border:1px solid var(--line);border-radius:4px;padding:3px 7px}.card-link{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;color:var(--accent)!important;flex-shrink:0}.card-link:before{content:'';position:absolute;inset:0;border-radius:13px}.card-link:hover{background:var(--accent);color:var(--surface)!important}.active-card:focus-within{outline:2px solid var(--accent);outline-offset:6px}.project-status{font-size:10px;color:var(--muted);white-space:nowrap}.project-status span:first-child{margin-left:3px}.active-slot:hover .active-card,.active-slot:focus-within .active-card{animation-play-state:paused;transform:rotateZ(0) rotateY(0) translateY(-5px);box-shadow:0 3px 0 var(--line),0 30px 35px -20px var(--shadow)}
.work-section{padding-block:35px 105px}.work-section .section-heading{margin-bottom:32px}.work-toolbar{justify-content:space-between;align-items:center;gap:20px;margin-bottom:29px}.work-filters{display:flex;gap:7px;flex-wrap:wrap}.filter-button{font-size:11px!important;padding:9px 14px!important;border:1px solid var(--line)!important;border-radius:5px;white-space:nowrap;transition:background .2s}.filter-button.is-active{background:var(--ink)!important;color:var(--page)!important;border-color:var(--ink)!important}.filter-button:hover:not(.is-active){background:var(--surface-soft)!important}.work-search{position:relative;display:block;flex-shrink:0}.work-search input{width:200px;border:1px solid var(--line);border-radius:5px;padding:9px 35px 9px 12px;background:var(--surface);color:var(--ink);font-size:11px}.work-search>span:last-child{position:absolute;right:12px;top:3px;font-size:23px;color:var(--muted);pointer-events:none}.work-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 24px}.work-card{grid-column:span 2;min-width:0}.work-card.work-featured{grid-column:span 3}.work-image{position:relative;overflow:hidden;background:var(--surface-soft);border:1px solid var(--line);border-radius:9px;aspect-ratio:1.64}.work-featured .work-image{aspect-ratio:1.94}.work-image img{height:100%;width:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.65,.3,1)}.work-card:hover img{transform:scale(1.045)}.work-open{position:absolute;right:14px;bottom:14px;width:31px;height:31px;display:grid;place-items:center;background:#0c14213d;border:1px solid #ffffff99;border-radius:50%;color:#fff;backdrop-filter:blur(8px);transition:background .2s}.work-card:hover .work-open{background:#ffffff;color:#181c27}.work-caption{padding:12px 1px 0;display:flex;justify-content:space-between;align-items:baseline;gap:12px}.work-caption h3{font-size:13px;font-weight:600;line-height:1.4;letter-spacing:-.1px}.work-caption>span{color:var(--muted);font-size:9px;text-align:right;white-space:nowrap}.work-placeholder{display:grid;place-items:center;height:100%;font-size:40px;color:var(--accent);background:radial-gradient(ellipse at top right,#807bf329,transparent)}.work-empty{padding:40px;text-align:center;color:var(--muted)}
.about-section{background:var(--surface-soft);border-block:1px solid var(--line);padding:85px 0 90px;position:relative;overflow:hidden}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:95px}.about-section h2{font-size:clamp(35px,3.9vw,55px);line-height:1.13;letter-spacing:-1.9px;margin-top:25px}.about-italic{font-family:Georgia,serif;font-weight:400;font-style:italic;color:var(--accent);letter-spacing:-1.6px}.about-copy{padding-top:36px;position:relative;z-index:1}.about-lead{font-size:22px;line-height:1.4;letter-spacing:-.5px;margin-bottom:23px!important}.about-copy>p:not(.about-lead){font-size:15px;line-height:1.8;color:var(--muted);margin-top:15px}.about-copy a{color:var(--ink);border-bottom:1px solid var(--line)}.site-footer{display:flex;align-items:center;gap:25px;min-height:130px}.footer-brand{font-size:15px}.footer-brand .brand-mark{width:27px;height:27px}.footer-note{font-size:10px;color:var(--muted)}.footer-actions{display:flex;align-items:center;gap:24px;margin-left:auto}.achievement-open{align-items:center;gap:8px;font-size:11px!important}.achievement-open>span:first-child{font-size:24px;color:var(--accent)}.achievement-count{color:var(--muted);font-size:9px;margin-left:3px}.back-top{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--line);border-radius:50%}
.portfolio-dialog{background:var(--surface);color:var(--ink);width:min(880px,calc(100% - 32px));max-height:85dvh;border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:0 30px 100px #0005;overscroll-behavior:contain}.portfolio-dialog::backdrop{background:#060c19b8;backdrop-filter:blur(8px)}body:has(.portfolio-dialog[open]){overflow:hidden}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.dialog-heading h2{font-size:32px;letter-spacing:-1px;line-height:1.15;margin-top:8px}.dialog-close{font-size:30px!important;flex-shrink:0}.project-dialog-content{min-height:100px;overflow-wrap:anywhere}.project-dialog-content img,.project-dialog-content video,.project-dialog-content iframe{max-width:100%;height:auto}.project-dialog-content p{margin-block:14px}.project-dialog-content a{text-decoration:underline}.project-dialog-content .button{text-decoration:none}.project-dialog-content figure{margin-inline:0}.project-dialog-content iframe{width:100%;aspect-ratio:16/9}.achievement-dialog{max-width:640px}.achievement-intro{font-size:14px;color:var(--muted)}.achievement-meter{height:3px;background:var(--line);margin:24px 0}.achievement-meter span{height:100%;display:block;width:0;background:linear-gradient(90deg,#9254ea,#14bacf);transition:width .3s}.achievement-list{padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}.achievement-list li{border:1px solid var(--line);padding:15px;border-radius:8px;position:relative}.achievement-list strong{display:block;font-size:13px}.achievement-list p{font-size:11px;color:var(--muted);line-height:1.5;margin-top:5px}.achievement-list .is-unlocked{background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}.achievement-list .is-unlocked strong:before{content:'✧ ';color:var(--accent)}.achievement-reset{border-top:1px solid var(--line);padding-top:12px;margin-top:20px}.achievement-reset .text-link{font-size:12px;color:var(--muted)}#reset-confirm p{font-size:13px;margin-block:10px}#reset-no{margin-left:20px}.achievement-toast{position:fixed;left:24px;bottom:24px;z-index:80;max-width:380px;width:calc(100% - 48px);display:flex;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 15px 45px var(--shadow);animation:toast-in .35s ease-out}.toast-star{font-size:29px;color:var(--accent)}.achievement-toast .eyebrow{font-size:8px;letter-spacing:1.3px}.achievement-toast strong{font-size:16px;display:block;margin-top:4px}.achievement-toast p{font-size:11px;color:var(--muted);margin-top:3px}.achievement-toast button{font-size:20px;margin-left:auto;align-self:flex-start;padding:0 4px}.portfolio-cursor{display:none;position:fixed;left:0;top:0;width:28px;height:28px;border:1px solid var(--accent);border-radius:50%;pointer-events:none;z-index:100;transform:translate(-100px,-100px);transition:width .2s,height .2s,opacity .2s;opacity:0}.portfolio-cursor:before{content:'';position:absolute;width:4px;height:4px;background:var(--accent);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.portfolio-cursor>span{position:absolute;top:35px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:9px;background:var(--ink);color:var(--page);padding:4px 8px;border-radius:4px;opacity:0}.portfolio-cursor.has-label>span{opacity:1}.cursor-ready .portfolio-cursor{display:block}.cursor-ready .portfolio-cursor.is-visible{opacity:1}.portfolio-home.cursor-ready a,.portfolio-home.cursor-ready button:not(.logo-control){cursor:none}.cursor-ready .portfolio-cursor.is-interactive{width:36px;height:36px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
@keyframes logo-gradient{from{background-position:0% 100%}to{background-position:100% 0%}}@keyframes logo-float{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes card-float{0%,100%{translate:0 0}50%{translate:0 -7px}}@keyframes toast-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
[data-motion=off] *,[data-background=true] *{animation-play-state:paused!important}[data-motion=off] .active-card,[data-motion=off] .logo-fallback{animation:none!important}[data-motion=off] .active-card{transform:none!important}[data-motion=off] .portfolio-home *,[data-motion=off]{scroll-behavior:auto!important;transition:none!important}.hero-art.is-paused .logo-fallback,.hero-art.is-paused .logo-color{animation-play-state:paused}.projects-section.is-offscreen .active-card{animation-play-state:paused}
@media(min-width:1500px){.hero{min-height:690px}.hero h1{font-size:88px}.hero-art{margin-left:10px}.active-visual{height:250px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.site-header{gap:25px}.header-controls{padding-left:15px;gap:8px}.hero{min-height:560px;grid-template-columns:1.1fr 1fr}.hero h1{font-size:66px;letter-spacing:-3.5px}.hero-description{font-size:17px}.hero-actions{gap:18px}.button{padding:12px 17px;gap:18px}.hero-art{margin-right:-10px}.art-caption{display:none}.active-grid{gap:18px}.active-visual{height:190px}.active-copy{padding:18px 15px}.active-copy h3{font-size:19px}.active-copy>p{font-size:12px}.tags span{font-size:8px;padding:3px 5px}.section-heading>p{max-width:280px}.about-grid{gap:60px}.footer-note{display:none}.work-caption{display:block}.work-caption>span{display:block;text-align:left;margin-top:3px}}
@media(max-width:800px){.wrap{width:calc(100% - 44px)}.site-header{height:90px;gap:20px;flex-wrap:wrap;align-content:center}.brand{font-size:16px;gap:8px}.brand-mark{width:30px;height:30px}.site-header nav{gap:19px;font-size:12px}.header-controls{border:0;padding:0}.motion-toggle span:last-child{display:none}.hero{grid-template-columns:1.1fr 1fr;min-height:480px;padding-top:22px;padding-bottom:85px}.hero h1{font-size:52px;letter-spacing:-2.7px}.hero .eyebrow{font-size:8px;letter-spacing:1.1px}.hero-description{font-size:15px;margin-top:20px!important}.hero-actions{gap:16px;flex-wrap:wrap;margin-top:23px}.hero-actions .text-link{font-size:12px}.hero-actions .button{font-size:12px}.tagline{font-size:10px!important;max-width:300px;margin-top:22px}.hero-art{margin-left:-15px;margin-right:-15px}.logo-hint{font-size:8px;bottom:-13px}.art-coordinate{font-size:6px}.projects-section{padding:60px 0 75px}.section-heading{gap:25px;margin-bottom:35px}.section-heading h2{font-size:32px}.section-heading>p{font-size:12px;max-width:210px}.active-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 30px;padding:5px}.active-visual{height:auto;aspect-ratio:1.25}.active-copy{padding:22px}.active-copy h3{font-size:22px}.active-copy>p{font-size:14px}.tags span{font-size:10px}.work-section{padding-bottom:70px}.work-toolbar{align-items:stretch;flex-direction:column;gap:15px}.work-search input{width:100%}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}.work-card,.work-card.work-featured{grid-column:span 1}.work-featured .work-image{aspect-ratio:1.64}.about-section{padding:65px 0}.about-grid{gap:40px}.about-section h2{font-size:38px}.about-lead{font-size:19px}.about-copy>p:not(.about-lead){font-size:14px}.about-copy{padding-top:30px}.desktop-break{display:none}.site-footer{min-height:100px}.footer-actions{gap:13px}}
@media(max-width:580px){.wrap{width:calc(100% - 40px)}.site-header{height:auto;padding-top:24px;gap:20px 10px}.site-header .brand{font-size:16px}.site-header nav{order:3;width:100%;justify-content:center;gap:37px;border-top:1px solid var(--line);padding-top:7px;margin:0}.header-controls{margin-left:auto;gap:8px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:42px;padding-bottom:70px}.hero-copy{padding:0}.hero .eyebrow{font-size:9px;letter-spacing:1.25px}.hero h1{font-size:clamp(51px,12vw,67px);line-height:1.05;margin-top:22px;letter-spacing:-3px}.hero-description{font-size:17px;max-width:340px}.hero-actions{gap:22px;margin-top:25px}.hero-actions .button{font-size:13px;padding:13px 18px}.hero-actions .text-link{font-size:12px}.tagline{margin-top:25px;max-width:100%;font-size:11px!important}.hero-art{width:100%;max-width:390px;aspect-ratio:1.18;margin:25px auto 24px}.hero-orbit{inset:5% 5%}.hero-art:before{inset:-10% -5%}.art-coordinate{right:0;font-size:7px}.logo-fallback{inset:6% 11% 9%}.logo-hint{bottom:-4px;font-size:9px}.hero-footnote{font-size:10px;bottom:7px;padding-top:13px}.projects-section{padding:51px 0 65px}.section-heading{display:block;margin-bottom:30px}.section-heading h2{font-size:32px;letter-spacing:-1px;max-width:320px}.section-heading>p{font-size:13px;max-width:100%;margin-top:16px}.section-heading>p br{display:none}.eyebrow{font-size:9px;letter-spacing:1.5px}.active-grid{grid-template-columns:1fr;gap:30px;padding:0 8px}.active-visual{aspect-ratio:1.45}.active-card{transform:rotateZ(-1deg)}.active-slot:nth-child(even) .active-card{transform:rotateZ(1deg)}.active-copy{padding:24px}.active-copy h3{font-size:24px}.active-copy>p{font-size:14px;margin-bottom:22px}.tags span{font-size:10px}.card-link{width:35px;height:35px}.work-section{padding-top:20px;padding-bottom:55px}.work-grid{gap:26px;grid-template-columns:1fr}.work-image,.work-featured .work-image{aspect-ratio:1.65}.work-caption{display:flex;align-items:baseline}.work-caption h3{font-size:14px}.work-caption>span{font-size:10px;text-align:right}.work-filters{gap:6px}.filter-button{font-size:10px!important;padding:8px 11px!important}.about-grid{grid-template-columns:1fr;gap:8px}.about-section{padding:52px 0 55px}.about-section h2{font-size:43px;letter-spacing:-1.7px}.about-copy{padding-top:22px}.about-lead{font-size:21px;max-width:330px}.about-copy>p:not(.about-lead){font-size:15px}.site-footer{padding-block:27px;flex-wrap:wrap;gap:19px}.footer-brand{font-size:14px}.footer-actions{gap:15px}.achievement-open>span:nth-child(2){display:none}.achievement-count{font-size:10px}.portfolio-dialog{padding:22px;max-height:90dvh}.dialog-heading h2{font-size:27px}.achievement-list{grid-template-columns:1fr}.achievement-toast{left:15px;bottom:15px;width:calc(100% - 30px)}.footer-note{display:none}}
@media(hover:none),(pointer:coarse){.active-card{animation:none;transform:none!important}.portfolio-cursor{display:none!important}.logo-control{touch-action:pan-y}.active-slot:hover .active-card{transform:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portfolio-home *, .portfolio-home *:before,.portfolio-home *:after{animation:none!important;transition:none!important}.active-card{transform:none!important}.portfolio-cursor{display:none!important}}

/* Upright, original logo: the same moving color field lights the mark, reflection and CTA. */
.header-band,.hero{--page:#0a1020;--surface:#151d30;--surface-soft:#171f33;--ink:#f4f6ff;--muted:#a5b0c6;--line:#ffffff20;--accent:#bc9aff;--cyan:#54ddf5;color:var(--ink);background:#0a1020;color-scheme:dark}
.header-band{position:relative;z-index:2}.header-band .site-header{height:102px}.hero{display:block;min-height:0;padding:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 78% 38%,#103458 0%,transparent 51%),radial-gradient(ellipse at 60% 85%,#29153e 0%,transparent 40%),linear-gradient(115deg,#0a1020,#080e1b)}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 60%,#5cabe405 60.1%,transparent 60.4%,transparent 85%,#5cabe408 85.1%,transparent 85.5%);pointer-events:none}.hero-layout{position:relative;display:grid;grid-template-columns:1.03fr 1fr;align-items:center;min-height:625px;padding-top:25px;padding-bottom:100px}.hero-copy{padding-bottom:18px}.hero h1{font-size:clamp(56px,5.7vw,80px);letter-spacing:-4px}.hero .gradient-text{background:none;color:#f4f6ff}.hero-description{color:#b8c3d7;max-width:430px}.hero .eyebrow{color:#c4cbda}.hero .hero-art{aspect-ratio:1.04;margin-right:-12px}.hero .hero-art:before{display:none}.logo-control{inset:0 0 17%;height:83%;z-index:2}.logo-fallback{inset:7% 9% 4%;transform:none!important;animation:none!important;filter:drop-shadow(0 12px 25px #05081366);transition:none}.logo-color{position:relative;animation:none}.color-sync,.hero .button-primary{background-color:transparent!important;background-image:linear-gradient(48deg,#f000e6 0%,#5f4cf5 18%,#00c7eb 36%,#8fd83f 58%,#ff9d41 78%,#ed326b 100%)!important;background-size:400% 100%!important;background-position:0% 0%;animation:original-gradient 24s ease-in-out infinite alternate;filter:hue-rotate(var(--color-shift,0deg))}.logo-color:after{opacity:.5;background-image:url('../x-shadows.png')}.logo-color:before{content:'';position:absolute;inset:0;background:url('../x-highlights.png') center/contain no-repeat;opacity:.45}.logo-aura{position:absolute;inset:25% 20% 22%;filter:blur(60px) hue-rotate(var(--color-shift,0deg));opacity:.17;border-radius:50%;z-index:-1;pointer-events:none}.logo-plinth{position:absolute;left:13%;right:10%;height:12%;bottom:10%;border-radius:2px 2px 6px 6px;background:linear-gradient(100deg,#080d18,#19253a 60%,#0c1321);box-shadow:0 18px 25px #02050dc9;transform:perspective(700px) rotateX(15deg);z-index:1;pointer-events:none}.plinth-light{position:absolute;top:0;left:1%;right:1%;height:2px;opacity:.8;box-shadow:0 0 9px #53c9ff26}.logo-reflection{position:absolute;top:89%;left:9%;right:9%;height:25%;transform:scaleY(-1);opacity:.3;filter:blur(3px);mask:linear-gradient(to top,#000,transparent 88%);-webkit-mask:linear-gradient(to top,#000,transparent 88%);pointer-events:none;z-index:0}.logo-reflection .logo-color{height:100%;mask-size:100% 100%;-webkit-mask-size:100% 100%}.logo-hint{bottom:0;z-index:3;color:#a6b6cf}.hero-actions .button-primary{position:relative;border:1px solid #ffffff35!important;color:#fff!important;isolation:isolate;box-shadow:0 4px 25px #674eff30;text-shadow:0 1px 4px #091025b0;padding:15px 25px;border-radius:9px;background-blend-mode:multiply;background-color:#bcb2d3!important}.button-primary:before{content:'';position:absolute;inset:1px;background:inherit;border-radius:inherit;filter:blur(16px);opacity:.75;z-index:-1;transform:translateY(6px);pointer-events:none}.hero-actions .text-link{border:1px solid #94a0b8;border-radius:9px;padding:14px 20px;color:#edf1ff;gap:15px;font-weight:500}.hero-actions .text-link:hover{border-color:#d5c6ff;background:#ffffff08}.hero .hero-footnote{bottom:20px;color:#8e9cb5;border-color:#ffffff14}.hero.is-paused .color-sync,.hero.is-paused .button-primary{animation-play-state:paused}.hero.is-offscreen .color-sync,.hero.is-offscreen .button-primary{animation-play-state:paused}
@keyframes original-gradient{0%{background-position:0% 0%}100%{background-position:100% 0%}}

/* Workbench: gentle X/Y depth with a moving, low-contrast varnish. */
.active-slot{--rest-x:5deg;--rest-y:-5deg;--rest-tilt:-1.4deg;--tilt-x:0deg;--tilt-y:0deg;--sheen-x:50%;--sheen-y:30%}.active-slot:nth-child(2){--rest-x:4deg;--rest-y:4deg;--rest-tilt:1.2deg}.active-slot:nth-child(3){--rest-x:5deg;--rest-y:-4deg;--rest-tilt:-1deg}.active-slot:nth-child(4){--rest-x:4deg;--rest-y:5deg;--rest-tilt:1.5deg}.active-card{transform:rotateX(calc(var(--rest-x) + var(--tilt-x))) rotateY(calc(var(--rest-y) + var(--tilt-y))) rotateZ(var(--rest-tilt));box-shadow:1px 3px 0 color-mix(in srgb,var(--line) 75%,var(--muted)),0 24px 30px -16px var(--shadow),0 6px 13px -6px var(--shadow);transition:transform .3s ease-out,box-shadow .3s}.active-card:after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,#fff0 42%,#fff8 49%,#fff4 51%,#fff0 58%) var(--sheen-x) 50%/230% 100% no-repeat,radial-gradient(circle at var(--sheen-x) var(--sheen-y),#fff3,transparent 44%);mix-blend-mode:screen;opacity:.12;transition:opacity .3s}.active-slot:hover .active-card,.active-slot:focus-within .active-card{transform:rotateX(calc(var(--rest-x) + var(--tilt-x))) rotateY(calc(var(--rest-y) + var(--tilt-y))) rotateZ(var(--rest-tilt));box-shadow:1px 4px 0 var(--line),0 32px 34px -21px var(--shadow),0 8px 17px -8px var(--shadow)}.active-slot:hover .active-card:after,.active-slot:focus-within .active-card:after{opacity:.3}

/* The work gallery is one shared plane, not individually scattered cards. */
.work-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:66px 25px 45px;margin:-35px -20px 0;scrollbar-width:thin;scrollbar-color:var(--line) transparent;outline-offset:-4px;scroll-behavior:auto;position:relative}.work-grid{display:grid;width:max-content;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:360px;grid-template-rows:repeat(2,auto);gap:28px 27px;transform:perspective(3000px) rotateX(9deg) rotateY(-3deg) rotateZ(-1.5deg);transform-origin:left center;transform-style:preserve-3d;padding-right:35px}.work-card,.work-card.work-featured{grid-column:auto;display:block;min-width:0;background:var(--surface);padding:7px 7px 0;border:1px solid var(--line);border-radius:11px;box-shadow:0 15px 25px -15px var(--shadow),0 3px 4px -2px var(--shadow);transition:box-shadow .25s,translate .25s}.work-card:hover,.work-card:focus-visible{box-shadow:0 22px 27px -16px var(--shadow);translate:0 -3px}.work-image,.work-featured .work-image{aspect-ratio:1.7;border:0;border-radius:6px;isolation:isolate}.work-image:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 15%,#ffffff16 38%,transparent 65%);pointer-events:none;z-index:1}.work-caption{padding:12px 8px 14px;display:block;min-height:68px}.work-caption h3{font-size:14px}.work-caption>span{display:block;text-align:left;font-size:10px;margin-top:2px}.work-pan-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:17px;padding-top:14px;border-top:1px solid var(--line)}.work-pan-bar p{font-size:11px;color:var(--muted)}.work-pan-bar p>span:not(.sr-only){margin-left:5px}.pan-controls{align-items:center;gap:12px}.pan-controls .icon-button{border:1px solid var(--line);border-radius:50%;min-width:35px;min-height:35px}.pan-controls button:disabled{opacity:.3;cursor:default}.pan-position{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:20px;text-align:center}.pan-touch{display:none}
@media(min-width:1500px){.hero-layout{min-height:680px}.hero h1{font-size:86px}}
@media(max-width:1100px){.hero-layout{min-height:590px;grid-template-columns:1.1fr 1fr}.hero h1{font-size:66px;letter-spacing:-3.5px}.hero-actions{gap:15px}.hero-actions .button-primary{padding:13px 19px}.hero-actions .text-link{padding:12px 15px;font-size:12px}.work-grid{grid-auto-columns:330px}}
@media(max-width:800px){.header-band .site-header{height:90px}.hero-layout{min-height:500px;padding-bottom:85px}.hero h1{font-size:52px;letter-spacing:-2.7px}.hero .hero-art{margin-left:-15px;margin-right:-12px}.hero-actions{gap:12px}.hero-actions .text-link{padding:10px 0;border:0}.logo-hint{font-size:8px;bottom:-8px}.work-grid{grid-auto-columns:300px;grid-template-columns:none;gap:23px;transform:perspective(3000px) rotateX(7deg) rotateY(-2deg) rotateZ(-1deg)}.work-caption{display:block}.work-caption>span{text-align:left}}
@media(max-width:580px){.header-band .site-header{height:auto;padding-bottom:5px}.hero{padding:0;display:block}.hero-layout{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:39px;padding-bottom:70px}.hero h1{font-size:clamp(51px,12vw,67px);letter-spacing:-3px}.hero-actions{gap:13px}.hero-actions .button-primary{font-size:13px;padding:13px 18px;gap:15px}.hero-actions .text-link{font-size:12px;gap:9px}.hero .hero-art{margin:28px auto 24px;aspect-ratio:1.1;max-width:390px}.logo-fallback{inset:5% 10% 3%}.logo-hint{font-size:9px;bottom:-5px}.hero .hero-footnote{bottom:13px}.active-card,.active-slot:nth-child(even) .active-card{transform:rotateX(var(--rest-x)) rotateY(var(--rest-y)) rotateZ(var(--rest-tilt))}.work-viewport{margin:-15px -13px 0;padding:40px 16px 28px}.work-grid{grid-auto-columns:min(76vw,310px);grid-template-columns:none;grid-template-rows:repeat(2,auto);gap:20px;transform:perspective(3000px) rotateX(6deg) rotateY(-1deg) rotateZ(-.8deg);padding-right:12px}.work-caption{display:block;min-height:66px}.work-caption h3{font-size:13px}.work-caption>span{text-align:left;font-size:9px}.work-pan-bar{gap:10px}.work-pan-bar p{font-size:10px;max-width:220px}.pan-controls{gap:6px}.pan-controls .icon-button{min-width:31px;min-height:31px}.pan-desktop{display:none}.pan-touch{display:inline}}
@media(hover:none),(pointer:coarse){.pan-desktop{display:none}.pan-touch{display:inline}.active-card:after{opacity:.2}.active-slot .active-card,.active-slot:hover .active-card{transform:rotateX(3deg) rotateY(-2deg)!important;animation:none}}
[data-motion=off] .active-slot .active-card{transform:none!important}[data-motion=off] .work-grid{transform:none}.hero[data-motion=off] .color-sync{animation:none}
@media(prefers-reduced-motion:reduce){.work-grid,.active-slot .active-card{transform:none!important}.color-sync{animation:none!important}}

/* Selected work: a complete scene, with room for cards to lift and land. */
.logo-control{cursor:pointer!important}.hero .logo-hint{font-size:10px}
.active-slot{--rest-x:12deg;--rest-y:-14deg;--rest-tilt:-3deg;perspective:1000px}.active-slot:nth-child(2){--rest-x:9deg;--rest-y:12deg;--rest-tilt:2.5deg}.active-slot:nth-child(3){--rest-x:13deg;--rest-y:-11deg;--rest-tilt:-2deg}.active-slot:nth-child(4){--rest-x:10deg;--rest-y:14deg;--rest-tilt:3deg}
.active-card{box-shadow:1px 1px 30px color-mix(in srgb,var(--line) 75%,var(--muted)),0 24px 30px -16px var(--shadow),0 6px 13px -6px var(--shadow);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;transform:rotateX(var(--rest-x)) rotateY(var(--rest-y)) rotateZ(var(--rest-tilt))}
.active-slot:hover,.active-slot:focus-within{position:relative;z-index:5}.active-slot:hover .active-card,.active-slot:focus-within .active-card{transform:translate3d(0,-12px,30px) rotateX(0) rotateY(0) rotateZ(0) scale(1.045);animation-play-state:paused;box-shadow:0 10px 35px color-mix(in srgb,var(--line) 55%,transparent),0 40px 45px -18px var(--shadow),0 15px 25px -10px var(--shadow)}
.work-section{width:100%;max-width:none;margin:0;padding-block:35px 85px;overflow:clip}.work-section>.section-heading{margin-bottom:32px}.work-toolbar{margin-bottom:0}.work-viewport{width:100%;margin:0;padding:85px max(7vw,24px) 80px;overflow:visible;perspective:1800px;position:relative;isolation:isolate;outline-offset:-8px;scrollbar-width:none}.work-viewport:before{content:'';position:absolute;inset:12% 6% 8%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%);pointer-events:none}.work-viewport:after{content:'→';position:absolute;right:2.7%;top:47%;font-size:25px;color:var(--accent);opacity:0;transition:opacity .2s;pointer-events:none}.work-viewport[data-edge=next]:after{opacity:1}.work-viewport[data-edge=prev]:after{content:'←';right:auto;left:2.7%;opacity:1}
.work-grid{width:100%;max-width:1440px;margin:0 auto;padding:0;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:34px 32px;transform:rotate3d(1,-.25,.12,9deg);transform-origin:center center;transform-style:preserve-3d;position:relative}.scene-ready .work-grid{min-height:610px;align-content:center}.work-card,.work-card.work-featured{grid-column:auto;transform:rotateX(var(--work-x,2deg)) rotateY(var(--work-y,-3deg)) rotateZ(var(--work-z,-1.5deg));transform-style:preserve-3d;box-shadow:0 23px 30px -20px var(--shadow),0 5px 13px -8px var(--shadow);transition:transform .3s,box-shadow .3s;translate:none;padding:8px 8px 0}.work-card:nth-child(3n+2){--work-x:-1deg;--work-y:2deg;--work-z:1.2deg}.work-card:nth-child(3n){--work-x:3deg;--work-y:-2deg;--work-z:-.6deg}.work-card:hover,.work-card:focus-visible{translate:none;transform:translateZ(20px) rotateX(0) rotateY(0) rotateZ(0);box-shadow:0 32px 37px -19px var(--shadow);z-index:2}.work-image,.work-featured .work-image{aspect-ratio:1.55;background:var(--surface-soft)}.work-image img{object-fit:cover;transform:none!important;width:100%;height:100%}.work-caption{min-height:65px;padding:12px 9px 13px}.work-pan-bar{margin-top:0}.pan-position{min-width:44px;font-size:12px}.work-viewport.is-empty{display:none}.work-empty{width:min(1240px,calc(100% - 40px));margin-inline:auto!important}.work-viewport:not(.scene-ready)+.work-pan-bar{display:none}
@media(min-width:1600px){.work-viewport{padding-inline:8vw}.scene-ready .work-grid{min-height:720px}}
@media(max-width:1100px){.work-grid{gap:27px 23px}.scene-ready .work-grid{min-height:520px}.work-viewport{padding-block:70px}.work-caption h3{font-size:12px}}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));transform:rotate3d(1,-.2,.1,7deg)}.scene-ready .work-grid{min-height:590px}.work-viewport{padding-inline:7vw}.work-caption h3{font-size:14px}}
@media(max-width:580px){.work-section{padding-block:20px 55px}.work-grid{grid-template-columns:1fr;gap:27px;transform:rotate3d(1,-.1,0,4deg)}.scene-ready .work-grid{min-height:650px}.work-viewport{padding:40px 26px}.work-card,.work-card.work-featured{transform:rotateX(2deg) rotateY(-2deg) rotateZ(-1deg)}.work-caption{min-height:60px}.work-viewport:after{display:none}.work-pan-bar p{max-width:200px}.active-slot .active-card{transform:rotateX(8deg) rotateY(-9deg) rotateZ(-2deg)}.active-slot:nth-child(even) .active-card{transform:rotateX(9deg) rotateY(9deg) rotateZ(2deg)}}
@media(hover:none),(pointer:coarse){.active-slot .active-card,.active-slot:hover .active-card{transform:rotateX(7deg) rotateY(-8deg) rotateZ(-1deg)!important}.active-slot:nth-child(even) .active-card{transform:rotateX(7deg) rotateY(8deg) rotateZ(1deg)!important}.work-card:hover{transform:rotateX(2deg) rotateY(-2deg);box-shadow:0 23px 30px -20px var(--shadow)}}
[data-motion=off] .work-card,[data-motion=off] .work-card:hover,[data-motion=off] .active-slot .active-card{transform:none!important}[data-motion=off] .work-grid{transform:none!important}
@media(prefers-reduced-motion:reduce){.work-grid,.work-card,.work-card:hover,.active-slot .active-card{transform:none!important}}
/* Keep the scene's empty plane from intercepting its projected card faces. */
.work-grid{pointer-events:none}.work-card{pointer-events:auto}

/* Studio background and a dimensional box: the logo lights a physical scene. */
.header-band{position:absolute;inset:0 0 auto;background:linear-gradient(#050a15b3,transparent);z-index:5}.hero{background-image:linear-gradient(90deg,#060c17a6 0%,#070e1940 45%,#08132912 70%),linear-gradient(0deg,#080e19ab,transparent 26%,#040a130d 80%),url('hero-studio-b2-dark.avif');background-size:cover;background-position:center center;background-repeat:no-repeat}.hero:before{display:none}.hero-layout{padding-top:125px;min-height:800px;padding-bottom:100px}.hero-copy{text-shadow:0 2px 20px #030710a8}.hero .hero-description{color:#c1cbdc}.hero .hero-art{isolation:isolate}.hero .logo-aura{inset:22% 15% 17%;opacity:.22;mix-blend-mode:screen}.logo-plinth{left:12%;right:8%;bottom:10%;height:13%;transform:none;background:none;box-shadow:none;border:0;border-radius:0;filter:drop-shadow(0 16px 10px #02040b9c);z-index:1}.plinth-top{position:absolute;inset:0 0 65%;background:linear-gradient(165deg,#2b3649,#101b2d 67%,#29374b);clip-path:polygon(7% 0,100% 0,93% 100%,0 100%)}.plinth-front{position:absolute;left:0;right:7%;top:35%;bottom:0;background:linear-gradient(105deg,#0b1422,#182437 55%,#10192a);border-bottom:1px solid #02060d;box-shadow:inset 0 1px 0 #8ba5cc17}.plinth-side{position:absolute;left:93%;right:0;top:0;bottom:0;background:linear-gradient(125deg,#080f1b,#10192a);clip-path:polygon(0 35%,100% 0,100% 65%,0 100%)}.plinth-light{top:calc(35% - 1px);left:1%;right:8%;height:2px;opacity:.88;box-shadow:none;mask:linear-gradient(90deg,transparent,#000 9%,#000 86%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 86%,transparent)}.plinth-spill{position:absolute;top:26%;left:2%;right:9%;height:13%;opacity:.35;filter:blur(6px) hue-rotate(var(--color-shift,0deg));pointer-events:none}.logo-reflection{top:88%;height:25%;opacity:.26;mix-blend-mode:screen}.hero .logo-hint{bottom:-2%;text-shadow:0 1px 6px #020611;color:#b4c0d5}.hero .hero-footnote{border-color:#b5c7e323;color:#b2bfd1;text-shadow:0 1px 5px #020710}.hero .tagline{color:#afbbd0!important}
@media(min-width:1500px){.hero-layout{min-height:825px}}
@media(max-width:1100px){.hero-layout{min-height:710px;padding-top:130px}.hero{background-position:58% center}}
@media(max-width:800px){.hero-layout{min-height:620px;padding-top:125px}.hero{background-position:60% center}.logo-plinth{height:14%;bottom:9%}}
@media(max-width:580px){.header-band .site-header{padding-bottom:5px}.hero-layout{padding-top:163px;padding-bottom:70px;min-height:0}.hero{background-image:linear-gradient(180deg,#060b15e0 0%,#07101da6 42%,#08132914 64%,#080e1966 100%),url('hero-studio-b2-dark.avif');background-position:center,65% bottom;background-size:cover,auto 100%;background-color:#080e19}.hero .hero-art{margin-top:35px}.hero .hero-copy{text-shadow:0 2px 15px #030710}.logo-plinth{height:14%;bottom:10%;left:13%;right:8%}.hero .logo-hint{bottom:-3%;font-size:8px}.hero .hero-footnote{bottom:12px}}

/* Hero hand-off, highlighted headline, scroll-pinned work, and the About capability grid. */
:root{--page-edge:#f7f8fa}
:root[data-theme=dark]{--page-edge:#0d111b}
.hero .gradient-text{color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;filter:hue-rotate(var(--color-shift,0deg)) drop-shadow(0 3px 18px #0409149e);padding-right:.04em}
.hero-layout{z-index:3}
/* The hero dips into the next section's surface, clipped by the hero itself. */
.hero:after{content:'';position:absolute;left:-12vw;right:-12vw;bottom:-1px;height:46px;background:radial-gradient(50% 100% at 50% 0,transparent 99.3%,var(--page-edge) 100%);filter:blur(.6px);z-index:1;pointer-events:none}
.hero .hero-footnote{bottom:48px}
@media(max-width:800px){.hero:after{height:34px}.hero .hero-footnote{bottom:40px}}
@media(max-width:580px){.hero:after{height:24px;left:-26vw;right:-26vw}.hero .hero-footnote{bottom:30px}}

/* Selected work: the scene holds still while the page scrolls a new set in. */
.work-section{overflow:visible;overflow-x:clip}
.work-viewport{perspective:580px}
.work-grid{transform:rotate3d(1,-.25,.12,9deg) scale(.86)}
.work-viewport:after{display:none}
.work-search{display:none}
.work-section.scroll-pin .work-pin{height:calc(100vh + (var(--pin-pages,1) - 1) * var(--pin-step,72vh) + var(--pin-hold,0px))}
.work-section.scroll-pin .work-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.work-section.scroll-pin .work-viewport{padding-block:clamp(14px,3vh,48px)}
.work-section.scroll-pin .work-toolbar{margin-bottom:0}
.work-section.scroll-pin .scene-ready .work-grid{min-height:min(610px,58vh)}
.work-pan-bar[hidden]{display:none}
.work-section.scroll-pin .work-pan-bar{position:relative;z-index:3}
.pan-controls{gap:16px}
.pan-dots{display:flex;align-items:center;gap:7px;margin-left:-6px}
.pan-dot{position:relative;display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.pan-dot:before{content:'';width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--muted) 45%,transparent);transition:background .2s,transform .2s}
.pan-dot:hover:before{background:color-mix(in srgb,var(--accent) 60%,transparent);transform:scale(1.15)}
.pan-dot.is-active:before{background:var(--accent);transform:scale(1.3)}
.pan-dot:focus-visible{outline:2px solid var(--accent);outline-offset:0}
@media(max-width:1100px){.work-section.scroll-pin .scene-ready .work-grid{min-height:min(520px,54vh)}}
@media(max-width:900px){.work-section.scroll-pin .scene-ready .work-grid{min-height:min(590px,62vh)}.work-grid{transform:rotate3d(1,-.2,.1,7deg) scale(.9)}}
@media(max-width:580px){.work-grid{transform:rotate3d(1,-.1,0,4deg) scale(.97)}}

/* About: personal copy on the left, what I actually work on beside it. */
.about-grid{grid-template-columns:1.02fr 1fr;gap:72px;align-items:start}
.about-intro .about-copy{padding-top:26px}
.capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;position:relative;z-index:1;padding-top:46px}
.capability{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:25px 23px 27px;min-height:178px;box-shadow:0 18px 28px -24px var(--shadow)}
.capability-icon{display:block;color:var(--cap-color,var(--accent))}
.capability-icon svg{width:29px;height:29px;display:block}
.capability-build,.capability-measure{--cap-color:#2f8bf0}
[data-theme=dark] .capability-build,[data-theme=dark] .capability-measure{--cap-color:#45b6ff}
.capability h3{font-size:17px;font-weight:700;letter-spacing:-.4px;margin-top:17px}
.capability p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:8px}
@media(max-width:1100px){.about-grid{gap:48px}.capability-grid{gap:15px;padding-top:40px}.capability{padding:20px 18px 22px;min-height:164px}}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:46px}.capability-grid{padding-top:0}}
@media(max-width:580px){.capability-grid{grid-template-columns:1fr;gap:13px}.capability{min-height:0}}

/* A hovered workbench card leans toward the pointer the way the AI Clouds inspector does,
   so the gloss band and highlight read as a reflection on a tilting surface. */
.active-slot{perspective:1300px}
.active-card:after{background:linear-gradient(112deg,#fff0 42%,#fff9 49%,#fff5 51%,#fff0 58%) var(--gx,50%) 50%/230% 100% no-repeat,radial-gradient(circle at var(--sx,50%) var(--sy,50%),#ffffff4d,#fff0 44%)}
.active-slot:hover .active-card,.active-slot:focus-within .active-card{transform:translate3d(0,-12px,30px) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg)) rotateZ(0) scale(1.04);transition:transform .1s linear,box-shadow .35s}
.active-slot:hover .active-card:after,.active-slot:focus-within .active-card:after{opacity:calc(var(--gloss,.3) * .45)}

/* The work scene leans the same way; its gloss lives on the thumbnail frame. */
.work-card:hover,.work-card:focus-visible{transform:translateZ(14px) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg)) rotateZ(0);transition:transform .1s linear,box-shadow .3s}
.work-image:after{background:linear-gradient(112deg,#fff0 42%,#fff9 49%,#fff5 51%,#fff0 58%) var(--gx,50%) 50%/230% 100% no-repeat,radial-gradient(circle at var(--sx,50%) var(--sy,50%),#ffffff4d,#fff0 44%);mix-blend-mode:screen;opacity:.08;transition:opacity .3s}
.work-card:hover .work-image:after,.work-card:focus-visible .work-image:after{opacity:calc(var(--gloss,.3) * .45)}

/* Theme switch: a pill showing the destination — moon while light, sun while dark. */
.theme-toggle{flex:0 0 auto;width:auto;min-width:0;height:auto;padding:3px;border:0!important;background:none!important;border-radius:999px;line-height:0;cursor:pointer}
.theme-track{position:relative;display:block;width:50px;height:27px;border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(7px);border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);transition:background .25s}
.theme-toggle:hover .theme-track{background:color-mix(in srgb,var(--surface) 92%,transparent)}
.theme-sun,.theme-moon{position:absolute;top:50%;translate:0 -50%;color:var(--ink);opacity:0;transition:opacity .22s}
.theme-sun{left:6px;width:14px;height:14px}
.theme-moon{right:7px;width:12px;height:12px}
.theme-knob{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--ink);transition:translate .3s cubic-bezier(.35,1.35,.5,1)}
.theme-toggle[aria-pressed=false] .theme-moon{opacity:.85}
.theme-toggle[aria-pressed=true] .theme-sun{opacity:.85}
.theme-toggle[aria-pressed=true] .theme-knob{translate:23px 0}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.theme-knob{transition:none}}

/* The brand mark gets the hero logo's shadow and highlight plates layered over its gradient. */
.brand-mark{position:relative;display:inline-block;flex-shrink:0}
.brand-mark:before,.brand-mark:after{content:'';position:absolute;inset:0;background-position:center;background-size:contain;background-repeat:no-repeat;pointer-events:none}
.brand-mark:before{background-image:url('../x-highlights.png');opacity:.45}
.brand-mark:after{background-image:url('../x-shadows.png');opacity:.5}

/* The hero follows the theme: a matched dawn plate, light tokens, and a pale plinth. */
:root[data-theme=light] .header-band,:root[data-theme=light] .hero{--page:#eceff5;--surface:#fff;--surface-soft:#f3f5f9;--ink:#141b2a;--muted:#5a6579;--line:#121c3024;--accent:#6552da;--cyan:#0d93bb;background-color:#eceff5;color-scheme:light}
:root[data-theme=light] .header-band{background:linear-gradient(#f2f5fabf,transparent)}
:root[data-theme=light] .hero{background-image:linear-gradient(90deg,#eef2f8e8 0%,#eef2f8c4 36%,#f0f4fa54 62%,#ffffff00 82%),linear-gradient(0deg,#eceff5b8,transparent 28%),url('hero-studio-v2-light.avif');background-size:cover;background-position:center center;background-repeat:no-repeat}
:root[data-theme=light] .hero-copy{text-shadow:0 2px 16px #ffffffd9}
:root[data-theme=light] .hero .eyebrow{color:#4e5a73}
:root[data-theme=light] .hero .hero-description{color:#48536a}
:root[data-theme=light] .hero .tagline{color:#5a6579!important}
:root[data-theme=light] .hero .logo-hint{color:#55607a;text-shadow:none}
:root[data-theme=light] .hero .hero-footnote{color:#5a6579;border-color:#121c3022;text-shadow:none}
:root[data-theme=light] .hero-actions .text-link{border-color:#9aa4b8;color:#1b2333!important}
:root[data-theme=light] .hero-actions .text-link:hover{border-color:#6552da;background:#1119300a}
:root[data-theme=light] .hero-actions .button-primary{border-color:#ffffff6b!important;text-shadow:0 1px 5px #2a1b6b8c;box-shadow:0 6px 22px #5a46c73d}
:root[data-theme=light] .logo-fallback{filter:drop-shadow(0 14px 24px #28344d3d)}
:root[data-theme=light] .logo-plinth{filter:drop-shadow(0 14px 12px #2a3a5538)}
:root[data-theme=light] .plinth-top{background:linear-gradient(165deg,#f4f6fa,#dbe1ea 67%,#eef1f7)}
:root[data-theme=light] .plinth-front{background:linear-gradient(105deg,#c5cedc,#dfe5ee 55%,#c9d2df);border-bottom-color:#a7b2c3;box-shadow:inset 0 1px 0 #ffffffd1}
:root[data-theme=light] .plinth-side{background:linear-gradient(125deg,#b2bccb,#cad3e0)}
:root[data-theme=light] .hero .logo-aura{opacity:.3;mix-blend-mode:normal}
:root[data-theme=light] .logo-reflection{opacity:.17;mix-blend-mode:normal}
:root[data-theme=light] .hero .gradient-text{filter:hue-rotate(var(--color-shift,0deg)) drop-shadow(0 2px 12px #ffffffe6)}
@media(max-width:580px){:root[data-theme=light] .hero{background-image:linear-gradient(180deg,#eef2f8e8 0%,#eef2f8b0 42%,#f0f4fa2b 64%,#eceff573 100%),url('hero-studio-v2-light.avif');background-position:center,65% bottom;background-size:cover,auto 100%}}
.plinth-light{opacity:.5}
.plinth-spill{opacity:.25}
/* The motion control gets its own pill so it reads against the bright hero plate too. */
.portfolio-home .motion-toggle{flex:0 0 auto;height:27px;padding:0 13px 0 11px;border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(7px);color:var(--ink)!important;opacity:.92;transition:background .2s,opacity .2s}
.portfolio-home .motion-toggle:hover{background:color-mix(in srgb,var(--surface) 92%,transparent);opacity:1}
.motion-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.motion-indicator{box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 25%,transparent)}
[data-motion=off] .motion-indicator{box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 22%,transparent)}
/* A modal lives in the top layer, above the custom cursor ring, so inside one the
   native pointer comes back rather than leaving nothing on screen. */
.portfolio-home.cursor-ready.dialog-open a,.portfolio-home.cursor-ready.dialog-open button{cursor:pointer}
.dialog-open .portfolio-cursor{display:none!important}
/* A 30px glyph outgrew the 40px min-height, turning the 50% radius into an oval. */
.dialog-close{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;line-height:1;flex-shrink:0}
/* With the filter gone, the category rides alongside the title in the caption. */
.work-caption{display:flex;align-items:center;justify-content:space-between;gap:12px}
.work-caption h3{min-width:0}
.work-badge{flex:0 0 auto;background:var(--surface-soft);color:var(--muted);font-size:8px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line);border-radius:3px;white-space:nowrap}
.work-caption{min-height:0}
.work-section.scroll-pin .work-caption{min-height:44px}
/* The pinned stage is a full viewport tall, so centring it leaves dead space under the
   heading. Pull the pin up into that slack and tighten the heading above it. */
.work-section.scroll-pin>.section-heading{margin-bottom:18px}
.work-section.scroll-pin .work-pin{margin-top:-11vh}
.work-section.scroll-pin .work-viewport{padding-block:clamp(10px,2vh,34px)}
/* Scroll-in introductions. The resting state is only applied once JS marks the section ready. */
.reveal-ready .reveal-type{clip-path:inset(0 101% 0 -2px)}
.reveal-ready.is-revealed .reveal-type{animation:reveal-type .85s steps(var(--type-steps,22)) both}
@keyframes reveal-type{to{clip-path:inset(0 -2px 0 -2px)}}
.reveal-ready .reveal-fade,.reveal-ready .reveal-item{opacity:0}
.reveal-ready .reveal-fade{transform:translateY(15px)}
.reveal-ready .reveal-item{transform:translateY(26px)}
.reveal-ready.is-revealed .reveal-fade,.reveal-ready.is-revealed .reveal-item{opacity:1;transform:none;transition:opacity .7s ease,transform .85s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
[data-motion=off] .reveal-type,[data-motion=off] .reveal-fade,[data-motion=off] .reveal-item{clip-path:none!important;opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.reveal-type,.reveal-fade,.reveal-item{clip-path:none!important;opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}
/* The hero owns the first screen, so nothing below it reveals before a scroll. */
.hero-layout{min-height:95vh}
@media(min-width:1500px){.hero-layout{min-height:95vh}}
@media(max-width:1100px){.hero-layout{min-height:93vh}}
@media(max-width:800px){.hero-layout{min-height:90vh}}
@media(max-width:580px){.hero-layout{min-height:0}}
.work-section.scene-armed .work-card{opacity:0}

/* ---- Phone layout: a dedicated hero and a flat work stack ---- */
@media(max-width:580px){
/* No room for nav beside the brand and the two control pills. */
.site-header nav{display:none}
.header-band .site-header{padding-bottom:0}

/* The plate and the logo get their own full-bleed block above the copy, framed on the
   right half of the image where the window and the floor reflection are. */
.hero,:root[data-theme=light] .hero{background-image:none;background-size:auto;background-position:center}
.hero{background-color:#080e19}
:root[data-theme=light] .hero{background-color:#eceff5}
.hero-layout{padding-top:0;padding-bottom:58px;gap:0}
.hero .hero-art{order:-1;width:100vw;max-width:none;margin:0 calc(50% - 50vw);aspect-ratio:.96;overflow:hidden;isolation:isolate;background-image:linear-gradient(180deg,#050a14b8 0%,#05091326 34%,#080e1900 62%,#080e19 97%),url('hero-studio-b2-dark.avif');background-size:cover;background-position:76% center;background-repeat:no-repeat}
:root[data-theme=light] .hero .hero-art{background-image:linear-gradient(180deg,#eef2f8cc 0%,#eef2f840 32%,#eceff500 60%,#eceff5 97%),url('hero-studio-v2-light.avif')}
.logo-control{inset:17% 0 16%;height:auto}
.logo-fallback{inset:4% 11% 3%}
.logo-plinth{left:15%;right:11%;bottom:12%;height:11%}
.logo-reflection{top:87%;height:13%;left:12%;right:12%}
.hero .logo-aura{inset:28% 18% 24%}
.hero .logo-hint{display:none}
.hero .hero-copy{padding-top:30px;text-shadow:none}
.hero h1{font-size:clamp(46px,11.5vw,60px)}
.hero .hero-description{max-width:none}
.hero .hero-footnote{position:static;margin-top:38px;bottom:auto}
.hero:after{display:none}

/* A plain stack reads better than a projected plane on a narrow screen. */
.work-viewport{perspective:none;padding:26px 22px 10px}
.work-grid,[data-motion=off] .work-grid{transform:none!important;grid-template-columns:1fr;gap:20px;min-height:0!important}
.scene-ready .work-grid{min-height:0}
.work-card,.work-card.work-featured,.work-card:hover,.work-card:focus-visible{transform:none!important;translate:none!important;box-shadow:0 10px 22px -16px var(--shadow),0 2px 6px -4px var(--shadow)}
.work-viewport:before{display:none}
}
/* With its label hidden there is nothing to pad around, so the pill becomes a dot. */
@media(max-width:800px){.portfolio-home .motion-toggle{width:27px;padding:0;gap:0;justify-content:center}}

/* ---- A wider work scene, and a spinner while a project loads ---- */
/* The scene is the section's subject, so it runs close to the page edges instead of
   stopping at the text measure. Three 1.55 thumbnails in two rows gain about .43px of
   height for every px of width, so the cap is expressed in viewport height: the plane
   stays as large as the pinned stage can hold, dipping slightly over the pager below. */
@media(min-width:581px){
.work-viewport{padding-inline:max(2.5vw,18px)}
.work-grid{max-width:calc(233vh - 582px)}
}
/* Cards now reach over the bar, so it keeps its dots and index clickable above them. */
.work-pan-bar{position:relative;z-index:3}

/* A project's content comes over the network, which takes a moment. */
.project-loader{display:flex;align-items:center;justify-content:center;gap:13px;min-height:170px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase}
.project-loader .spinner{width:27px;height:27px;flex:0 0 auto;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:project-spin .8s linear infinite}
@keyframes project-spin{to{transform:rotate(1turn)}}
/* A ring that breathes rather than turns, where motion is unwelcome. */
@keyframes project-breathe{50%{opacity:.3}}
[data-motion=off] .project-loader .spinner{animation:project-breathe 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.project-loader .spinner{animation:project-breathe 1.4s ease-in-out infinite}}

/* ---- Hero parallax: the scene separates as the page scrolls ---- */
/* home.js writes two numbers. --scroll-p runs straight down the hero, 0 at the top and 1
   once it has nearly scrolled away; it is the lag of the plate behind the page and the fan
   of the copy. --lift-p is eased and finishes near the middle of the hero, while the scene
   is still on screen; it takes the mark off its plinth. The plinth follows a third of the
   way, enough to read as lifting with it rather than holding the mark down, and the
   reflection falls by what the mark gained, which is where a mirrored surface would put
   it, losing its contrast and its edge with the distance. */
.hero{--scroll-p:0;--lift-p:0;--plate-drift:74px;--logo-lift:72px;--plinth-lift:22px;--reflection-drop:46px;--copy-lift:30px}
[data-motion=off] .hero{--scroll-p:0!important;--lift-p:0!important}
@media(prefers-reduced-motion:reduce){.hero{--scroll-p:0!important;--lift-p:0!important}}

/* The plate holds its own position, so scrolling the page slides it within the hero. The
   uncovered band is at the hero's top edge, which is above the viewport by then. */
.hero,:root[data-theme=light] .hero{background-position:center calc(50% + var(--scroll-p) * var(--plate-drift))}

/* The mark lifts past the plinth; its ground shadow drops away and spreads as it goes. */
.logo-control{translate:0 calc(var(--lift-p) * var(--logo-lift) * -1);scale:calc(1 + var(--lift-p) * .045)}
.logo-fallback{filter:drop-shadow(0 calc(12px + var(--lift-p) * 17px) calc(25px + var(--lift-p) * 21px) #05081366)}
:root[data-theme=light] .logo-fallback{filter:drop-shadow(0 calc(14px + var(--lift-p) * 15px) calc(24px + var(--lift-p) * 19px) #28344d3d)}
.hero .logo-aura{translate:0 calc(var(--lift-p) * var(--logo-lift) * -.9);scale:calc(1 + var(--lift-p) * .17)}
.logo-plinth{translate:0 calc(var(--lift-p) * var(--plinth-lift) * -1);filter:drop-shadow(0 calc(16px + var(--lift-p) * 11px) calc(10px + var(--lift-p) * 13px) #02040b9c)}
:root[data-theme=light] .logo-plinth{filter:drop-shadow(0 calc(14px + var(--lift-p) * 10px) calc(12px + var(--lift-p) * 11px) #2a3a5538)}
.logo-reflection{translate:0 calc(var(--lift-p) * var(--reflection-drop));opacity:calc(.26 * (1 - var(--lift-p) * .62));filter:blur(calc(3px + var(--lift-p) * 5px))}
:root[data-theme=light] .logo-reflection{opacity:calc(.17 * (1 - var(--lift-p) * .62))}

/* The copy rises faster than the hero it sits in, each line a little ahead of the one above. */
.hero-copy{opacity:calc(1 - var(--scroll-p) * .55)}
.hero-copy>*{translate:0 calc(var(--scroll-p) * var(--copy-lift) * var(--copy-depth,1) * -1)}
.hero-copy .eyebrow{--copy-depth:.55}
.hero-copy h1{--copy-depth:1}
.hero-copy .hero-description{--copy-depth:1.45}
.hero-copy .hero-actions{--copy-depth:1.85}
.hero-copy .tagline{--copy-depth:2.2}
/* The invitation to scroll has been taken, so it is the first thing to go. */
.hero .hero-footnote{opacity:clamp(0,calc(1 - var(--scroll-p) * 2.4),1);translate:0 calc(var(--scroll-p) * 26px)}

@media(max-width:580px){
/* The phone hero keeps its plate in the art block, and shorter travel in a shorter scene. */
.hero{--plate-drift:40px;--logo-lift:40px;--plinth-lift:12px;--reflection-drop:24px;--copy-lift:18px}
.hero .hero-art{background-position:76% calc(50% + var(--scroll-p) * var(--plate-drift))}
}

/* ---- Reveals that replay: leaving reverses them, returning plays them again ---- */
/* The resting state carries its own transition now, so removing .is-revealed runs the
   introduction backwards instead of snapping it away. The entry keeps its long, soft
   curve; the exit is quicker and runs in the opposite order, items leading and the eyebrow
   last. Because these are transitions and not one-shot animations, a scroll that turns
   around mid-way reverses from wherever the section had got to. --reveal-travel is the
   side the section left by, so what comes back comes back from where it went. */
.reveal-ready .reveal-type{animation:none;clip-path:inset(0 101% 0 -2px);transition:clip-path .5s steps(var(--type-steps,22));transition-delay:var(--exit-delay,0ms)}
.reveal-ready.is-revealed .reveal-type{animation:none;clip-path:inset(0 -2px 0 -2px);transition:clip-path .85s steps(var(--type-steps,22));transition-delay:var(--reveal-delay,0ms)}
.reveal-ready .reveal-fade,.reveal-ready .reveal-item{transition:opacity .35s ease,transform .45s cubic-bezier(.4,0,.7,.6);transition-delay:var(--exit-delay,0ms)}
/* Re-arming the scene hides its cards outright, so they are given a fade to do it with. */
.work-card,.work-card.work-featured{transition:box-shadow .25s,translate .25s,opacity .3s}
.reveal-ready .reveal-fade{transform:translateY(calc(15px * var(--reveal-travel,1)))}
.reveal-ready .reveal-item{transform:translateY(calc(26px * var(--reveal-travel,1)))}
/* Nothing may hold the cards hidden where the flight that uncovers them will not run. */
[data-motion=off] .work-section.scene-armed .work-card{opacity:1}