:root{--paper:#efefed;--ink:#141414;--muted:#777774;--glass:#dededb80;--glass-line:#ffffff65;--surface:#f3f3f0;--line:#d3d3ce}body{background:var(--paper);color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.035' filter='url(%23n)'/%3E%3C/svg%3E")}.site-shell{max-width:1600px;padding:0 32px}header{position:sticky;top:0;z-index:20;margin:0 -32px;padding:23px 32px;background:color-mix(in srgb,var(--paper) 70%,transparent);backdrop-filter:blur(18px);font:13px Arial,sans-serif;color:var(--ink);align-items:center}.header-discipline{margin-right:auto;margin-left:70px}.header-right{display:flex;align-items:center;gap:36px;font:10px var(--mono)}.theme-toggle{background:transparent;border:1px solid var(--line);border-radius:20px;width:36px;height:22px;padding:4px;cursor:pointer}.theme-toggle span{display:block;width:12px;height:12px;background:var(--ink);border-radius:50%;transition:transform .3s}.vex-home{position:relative;padding-top:25px}.home-name{text-align:center;font-size:clamp(55px,8.9vw,142px);line-height:1.06;letter-spacing:-7px;margin:15px 0 -36px;font-weight:500;transition:opacity .3s}.home-name span{color:inherit}.hover-word{position:absolute;top:35px;left:0;right:0;text-align:center;font-size:clamp(60px,9vw,142px);letter-spacing:-6px;opacity:0;transition:opacity .35s;pointer-events:none;white-space:nowrap}.tile-active .hover-word{opacity:1}.tile-active .home-name{opacity:0}.home-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:245px 122px 122px;gap:14px}.glass-tile{background:var(--glass);border:1px solid var(--glass-line);border-radius:30px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:26px;display:flex;justify-content:space-between;align-items:flex-end;font-size:18px;transition:background .4s,box-shadow .4s,transform .4s;overflow:hidden}.glass-tile:hover,.glass-tile:focus-visible{background:color-mix(in srgb,var(--glass) 70%,var(--surface));box-shadow:0 10px 30px #00000008;transform:translateY(-3px)}.tile-about{grid-column:1}.tile-work{grid-column:2/5}.tile-career{grid-column:1/3;grid-row:2/4}.identity-tile{grid-column:3;grid-row:2/4;background:#171918;color:#e8e8de;border-radius:30px;padding:24px;position:relative;overflow:hidden;background-image:radial-gradient(ellipse at 90% 15%,#6e76603d,transparent 70%)}.identity-monogram{font-size:80px;letter-spacing:-6px;font-weight:500}.identity-monogram>span{color:#9cac88}.identity-tile p{font-size:23px;line-height:1.1;margin:12px 0}.identity-note{font:7px var(--mono);letter-spacing:1px;color:#929889}.tile-tools{grid-column:4;grid-row:2;padding:14px 20px;font-size:12px;position:relative}.tile-tools>span{z-index:1}.tool-loop{position:absolute;inset:12px 0 38px;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 18%,#000 82%,transparent)}.tool-loop>div{display:flex;width:max-content;gap:12px;animation:tools-loop 24s linear infinite}.tool-loop span{display:flex;align-items:center;justify-content:center;min-width:86px;height:56px;border-radius:14px;background:#99998c17;border:1px solid #99998c10;font:10px var(--mono)}@keyframes tools-loop{to{transform:translateX(-50%)}}.tile-contact{grid-column:4;grid-row:3;font-size:16px;padding:22px}.home-caption{display:flex;justify-content:space-between;align-items:center;margin:26px 0 35px}.home-caption p{font:11px/1.8 var(--mono);color:var(--muted)}.home-caption a{font:9px var(--mono);color:var(--muted)}.ticker{border-radius:10px;background:var(--ink);color:var(--paper)}.section{margin-top:120px}.career{grid-template-columns:260px 1fr;gap:80px}.role,.stack-enabled .role{background:var(--surface);border-color:var(--line);border-radius:24px;padding:32px}.role h3{font-size:21px}.role>p,.role details p{font-size:14px;color:var(--muted)}.role ul{font-size:12px}h2{font-weight:500;font-size:36px;letter-spacing:-1.5px}.company{color:var(--muted)}.role strong{color:var(--ink)}.role details{border-color:var(--line)}#projects{gap:28px}.project{background:var(--glass);border:1px solid var(--line);border-radius:26px;padding:10px 10px 22px;overflow:hidden}.project:nth-child(3){grid-column:1/-1}.project-cover{height:340px;border-radius:20px}.project:nth-child(3) .project-cover{height:460px}.project-caption{padding:4px 14px}.project-caption h3{font-size:20px;font-weight:500}.project p,.project small{margin-left:14px;margin-right:14px}.project p{font-size:11px;max-width:650px}.project small{display:block}.project-arrow{font-size:32px}.project-caption>span{font-size:8px}.toolkit{border-radius:30px;background:#191b19;padding:40px}.toolkit h2{font-size:32px}.toolkit .skill p{color:#b1b1a5}.about{grid-template-columns:260px 1fr;gap:80px}.reveal-copy p{font:clamp(24px,3vw,42px)/1.35 Arial,sans-serif;letter-spacing:-1.2px;margin-bottom:32px;color:var(--ink)}.reveal-copy span{color:color-mix(in srgb,var(--ink) 22%,var(--paper));transition:color .15s}.reveal-copy .word-visible{color:var(--ink)}.closing h2{font-size:clamp(38px,6vw,86px);font-weight:500}.closing h2 span{color:var(--muted)}.project-detail{max-width:1250px;margin:auto;padding:55px 0}.detail-heading h1{font-size:clamp(40px,5vw,76px);letter-spacing:-3px;max-width:1000px;margin:16px 0}.detail-heading>span:last-child{font:11px var(--mono);color:var(--muted)}.detail-art{height:550px;border-radius:30px;background:radial-gradient(ellipse at top right,#424a40,#171c19);position:relative;margin:40px 0;overflow:hidden}.detail-art .tool-graphic{inset:35px}.detail-intro{display:grid;grid-template-columns:2fr 1fr;gap:120px;margin:45px 24px 80px}.detail-intro>p{font-size:22px;margin:0}.detail-intro>div>span{font:10px var(--mono);color:var(--muted)}.detail-intro>div p{font:12px/1.7 var(--mono);margin:10px 0 25px}.detail-evidence{border-top:1px solid var(--line);padding-top:40px;max-width:800px}.detail-evidence p{color:var(--muted);font-size:17px}.detail-evidence .button{margin-top:20px}.detail-navigation{display:flex;justify-content:space-between;gap:30px;margin-top:100px;border-top:1px solid var(--line);padding-top:30px;font:12px var(--mono)}
:root[data-theme=dark]{--paper:#101110;--ink:#eeeeea;--muted:#999c93;--glass:#25282590;--glass-line:#ffffff0d;--surface:#1c1f1c;--line:#343831}.theme-toggle[aria-pressed=true] span{transform:translateX(13px)}[data-theme=dark] .role-date,[data-theme=dark] summary,[data-theme=dark] .role ul,[data-theme=dark] .outcome-note,[data-theme=dark] .about p,[data-theme=dark] .project p,[data-theme=dark] .project small{color:var(--muted)}[data-theme=dark] .closing{border-color:var(--line)}
@media(max-width:1000px){.home-grid{grid-template-rows:220px 110px 110px}.glass-tile{padding:22px}.identity-monogram{font-size:60px}.identity-tile p{font-size:20px}.career,.about{grid-template-columns:190px 1fr;gap:40px}.home-name{letter-spacing:-4px}.header-discipline{margin-left:35px}.project-cover{height:260px}.detail-intro{gap:50px}}
@media(max-width:600px){.site-shell{padding:0 16px}header{margin:0 -16px;padding:18px 16px;font-size:11px}.header-discipline{margin:0 0 0 auto;font-size:9px}.header-right{gap:12px;margin-left:14px}.header-right>span{display:none}.vex-home{padding-top:22px}.home-name{font-size:clamp(34px,9vw,54px);letter-spacing:-2px;margin-bottom:-10px}.hover-word{display:none}.tile-active .home-name{opacity:1}.home-grid{grid-template-columns:1fr 1fr;grid-template-rows:175px 175px 175px 120px;gap:12px}.glass-tile{border-radius:24px;padding:22px;font-size:16px}.tile-about{grid-column:1/3;grid-row:1}.tile-work{grid-column:1/3;grid-row:2}.tile-career{grid-column:1;grid-row:3}.identity-tile{grid-column:2;grid-row:3;border-radius:24px;padding:20px}.identity-monogram{font-size:50px}.identity-tile p{font-size:18px;margin:5px 0}.identity-note{font-size:5px}.tile-tools{grid-column:1;grid-row:4;padding:16px;font-size:11px}.tile-contact{grid-column:2;grid-row:4;font-size:14px}.tool-loop span{min-width:70px;font-size:9px}.home-caption{display:block;margin:20px 0 28px}.home-caption p{font-size:10px}.home-caption p br{display:none}.section{margin-top:70px}.career,.about{display:block}.role,.stack-enabled .role{padding:22px}.role h3{font-size:18px}.role>p{font-size:12px}#projects{grid-template-columns:1fr}.project:nth-child(3){grid-column:auto}.project-cover,.project:nth-child(3) .project-cover{height:240px}.project-caption h3{font-size:18px}.toolkit{padding:26px 20px;border-radius:24px}.about h2{font-size:32px}.reveal-copy p{font-size:26px;letter-spacing:-.7px}.closing h2{font-size:40px}.detail-heading h1{font-size:38px;letter-spacing:-1.5px}.detail-art{height:300px;border-radius:24px}.detail-art .tool-graphic{inset:15px}.detail-intro{display:block;margin:25px 8px 45px}.detail-intro>p{font-size:18px}.detail-intro>div{margin-top:30px}.detail-navigation{font-size:10px;gap:22px;margin-top:60px}}
@media(prefers-reduced-motion:reduce){.tool-loop>div{animation:none}.reveal-copy span{color:var(--ink)}.glass-tile:hover{transform:none}}
.career .section-intro{top:90px}.stack-enabled .role{top:calc(90px + var(--card-order)*18px)}html{scroll-padding-top:90px}@media(max-width:600px){.career .section-intro{position:static}.stack-enabled .role{top:calc(78px + var(--card-order)*12px)}}@media(prefers-reduced-motion:reduce){.stack-enabled .role{position:static}}

.home-only .home-caption{margin-bottom:24px}.destination-view main>.section{margin-top:65px;margin-bottom:100px}.destination-view .about{min-height:65vh}@media(max-width:600px){.destination-view main>.section{margin-top:40px;margin-bottom:65px}}

.skill-tools{display:flex;flex-direction:column;gap:12px;margin:20px 0}.tool-chip{display:flex;align-items:center;gap:11px;font:11px var(--mono);color:#d5d8cf}.tool-logo{display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;background:#f6f6f2;border-radius:12px;border:1px solid #ffffff1a}.tool-logo img{width:28px;height:28px;object-fit:contain}.tool-loop>div{gap:0;animation-duration:65s}.tool-loop .tool-chip{flex:0 0 74px;min-width:74px;height:56px;background:none;border:0;padding:0;gap:0}.tool-loop .tool-chip>span:last-child{display:none}.tool-loop .tool-logo{min-width:52px;width:52px;height:52px;background:#f6f6f2;border:1px solid #00000006}.tool-loop .tool-logo img{width:30px;height:30px}.tool-loop span{animation:none}.tool-loop .tool-logo{font-size:0}@media(prefers-reduced-motion:reduce){.tool-loop>div{animation:none}}
/* Career uses the same frosted panels and generous type as the homepage. */
.career-page-heading{grid-column:1/-1;margin-bottom:-25px}.career-page-heading h1{font-size:clamp(68px,9vw,132px);font-weight:500;letter-spacing:-6px;line-height:1;margin:0 0 22px}.career-page-heading h1 span{color:var(--muted)}.career-page-heading>p{font-size:17px;color:var(--muted);margin:0}.career{gap:65px 70px;grid-template-columns:260px minmax(0,1fr)}.career .section-intro h2{font-size:34px;font-weight:500}.career .section-intro p{font:15px/1.65 Arial,sans-serif;max-width:240px}.career .section-intro>a{display:inline-block;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(14px);border-radius:16px;padding:15px 20px;font:11px Arial,sans-serif}.role,.stack-enabled .role{background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--glass-line);border-radius:30px;padding:34px 38px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 0 #ffffff30,0 8px 24px #00000003}.career-card-meta{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px}.career-company{display:flex;align-items:center;gap:13px;margin-bottom:20px}.employer-logo{display:flex;align-items:center;justify-content:center;width:112px;height:52px;background:#fff;border:1px solid #00000006;border-radius:14px;flex-shrink:0;padding:10px}.employer-logo img{width:100%;height:28px;object-fit:contain}.employer-moodys{background:#052d54}.career .company{font:12px Arial,sans-serif;color:var(--muted)}.career .role h3{font-size:clamp(24px,2.4vw,36px);line-height:1.15;font-weight:500;letter-spacing:-1px;max-width:580px;margin:0 0 22px}.career .role-top{gap:24px}.career .role-date{font:10px/1.5 var(--mono);max-width:125px;text-align:right;padding-top:15px}.career .role>p{font-size:15px;max-width:650px;margin:0 0 26px}.career .role ul{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0 0 22px}.career .role li{flex:1 1 145px;background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;padding:17px;font:11px/1.6 Arial,sans-serif;color:var(--muted)}.career .role li strong{display:block;font:27px/1.2 Arial,sans-serif;letter-spacing:-.7px;color:var(--ink);margin-bottom:8px}.career .role details{margin-top:24px;padding-top:18px}.career .role summary{font:12px Arial,sans-serif;color:var(--ink);padding:3px 0}.career .outcome-note{font:10px/1.65 var(--mono);color:var(--muted);max-width:650px}
@media(max-width:900px){.career{grid-template-columns:190px minmax(0,1fr);gap:45px 35px}.role,.stack-enabled .role{padding:26px}.career .role-top{display:block}.career .role-date{text-align:left;max-width:none;padding-top:0;margin-bottom:18px}.career .role h3{font-size:28px}.career .company{font-size:11px}.career .role li{flex-basis:120px}.career .role li strong{font-size:24px}}
@media(max-width:600px){.career-page-heading{margin-bottom:36px}.career-page-heading h1{font-size:76px;letter-spacing:-4px}.career-page-heading>p{font-size:14px}.career .section-intro{margin-bottom:36px}.career .section-intro p{max-width:320px;font-size:14px}.role,.stack-enabled .role{border-radius:24px;padding:23px}.career .role h3{font-size:27px}.career .role>p{font-size:13px}.career-company{gap:10px}.employer-logo{width:95px;height:46px}.career .role li{flex-basis:110px;padding:14px}.career-card-meta{font-size:8px}}
/* Static visual career gallery, inspired by the reference project cards. */
.career{display:block}.career-page-heading{margin-bottom:45px}.career .section-intro{position:static;display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:35px}.career .section-intro>.section-number,.career .section-intro h2{display:none}.career .section-intro p{max-width:560px;margin:0}.career #roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:0}.career .role{position:static;top:auto;margin:0;padding:12px;border-radius:30px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 #ffffff12;backdrop-filter:none}.employer-panel{height:300px;border-radius:22px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 15% 10%,#365976,#09293e 75%);color:#d4e0e6}.employer-backblaze .employer-panel{background:radial-gradient(ellipse at 80% 10%,#ffd4ba,#ec9980 65%,#a85848);color:#723d32}.employer-color .employer-panel{background:radial-gradient(ellipse at 10% 10%,#d3ecd8,#a0cdb8 65%,#658d80);color:#355549}.employer-panel:after{content:'';position:absolute;width:360px;height:360px;border:1px solid currentColor;border-radius:50%;opacity:.12;right:-100px;bottom:-220px}.employer-panel img{width:55%;max-width:280px;height:90px;object-fit:contain;position:relative;z-index:1}.employer-color .employer-panel img{width:42%;max-width:210px}.employer-panel .career-card-meta{position:absolute;top:22px;left:24px;right:24px;border:0;margin:0;padding:0;color:inherit;font-size:9px;display:flex;justify-content:space-between}.employer-panel-note{position:absolute;bottom:22px;left:24px;font:8px var(--mono);letter-spacing:1.2px;opacity:.7}.career-card-content{padding:24px 18px 15px}.career-caption{display:flex;align-items:baseline;justify-content:space-between;gap:15px}.career .career-caption h3{font-size:29px;margin:0;font-weight:500;letter-spacing:-1px}.career-caption>span{font:10px var(--mono);color:var(--muted);text-align:right}.career .career-role-name{font-size:14px;color:var(--muted);margin:10px 0 22px}.career-card-content>p:not(.career-role-name){font:13px/1.7 Arial,sans-serif;color:var(--muted);margin:0 0 24px}.career .role ul{gap:10px}.career .role li{background:color-mix(in srgb,var(--paper) 45%,transparent);flex-basis:110px;padding:14px;border-color:var(--glass-line);border-radius:16px}.career .role li strong{font-size:24px}.career .role details p{font-size:13px;line-height:1.7}.career .role details{margin-top:20px}.career .outcome-note{display:block}
@media(max-width:750px){.career #roles{grid-template-columns:1fr}.employer-panel{height:280px}.career .section-intro{display:block}.career .section-intro>a{margin-top:20px}.career .career-caption h3{font-size:27px}.career-caption>span{font-size:9px}.career .role{padding:10px;border-radius:26px}.career-card-content{padding:22px 12px 12px}}

/* About: each word changes color directly under the pointer. */
.reveal-copy span,.reveal-copy .word-visible{color:var(--muted);transition:color .18s ease}.reveal-copy span:hover{color:#ae5635}[data-theme=dark] .reveal-copy span:hover{color:#efad8c}@media(prefers-reduced-motion:reduce){.reveal-copy span{transition:none}}

.reveal-copy span.word-trail{color:#ae5635}[data-theme=dark] .reveal-copy span.word-trail{color:#efad8c}
/* The reading trail highlights both text and its background. */
.reveal-copy span{border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:color .18s ease,background-color .18s ease,box-shadow .18s ease}
.reveal-copy span.word-trail,.reveal-copy span:hover{background-color:#e8c9ad80;box-shadow:0 0 0 2px #e8c9ad80}
[data-theme=dark] .reveal-copy span.word-trail,[data-theme=dark] .reveal-copy span:hover{background-color:#a75d3545;box-shadow:0 0 0 2px #a75d3545}
@media(prefers-reduced-motion:reduce){.reveal-copy span{transition:none}}

/* Include inter-word spacing in one continuous highlight band. */
.reveal-copy span{border-radius:0;padding:0;box-shadow:none!important}
/* Black highlight with white lettering in both themes. */
.reveal-copy span.word-trail,.reveal-copy span:hover,
[data-theme=dark] .reveal-copy span.word-trail,[data-theme=dark] .reveal-copy span:hover{background-color:#000;color:#fff;box-shadow:none}
[data-theme=dark] .reveal-copy span.word-trail,[data-theme=dark] .reveal-copy span:hover{background-color:#fff;color:#000}

.identity-tile{padding:0;background:#d5d3c9}.identity-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:grayscale(100%)}

.career-caption h3{min-width:0}.career-company-logo{display:block;width:auto;height:34px;max-width:210px;object-fit:contain;object-position:left;filter:brightness(0)}
[data-theme=dark] .career-company-logo{filter:brightness(0) invert(1)}
@media(max-width:600px){.career-company-logo{height:28px;max-width:175px}}

/* Keep each row’s context controls level despite different metric heights. */
.career .role{display:flex;flex-direction:column}
.career-card-content{display:flex;flex-direction:column;flex:1}
.career .role details{margin-top:auto}
.career .role ul{margin-bottom:20px}

header .brand,header .header-right{flex-shrink:0}
header .header-skills{display:block;flex:1;min-width:0;margin:0 42px;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.header-skills-track{display:flex;width:max-content;animation:header-skills-scroll 40s linear infinite}
.header-skills-group{display:flex;align-items:center;gap:24px;padding-right:24px;white-space:nowrap}
.header-skills-group>span{font:13px Arial,sans-serif}.header-skills-group .skill-divider{color:var(--muted)}
.header-skills:hover .header-skills-track{animation-play-state:paused}
@keyframes header-skills-scroll{to{transform:translateX(-50%)}}
@media(max-width:750px){header .header-skills{margin:0 18px}.header-skills-group{gap:16px;padding-right:16px}.header-skills-group>span{font-size:11px}}
@media(max-width:480px){header{flex-wrap:wrap}header .header-skills{order:3;flex:0 0 100%;margin:14px 0 0}header .header-right{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.header-skills-track{animation:none}.header-skills{overflow-x:auto}}

.tile-contact{color:var(--ink);text-align:left;cursor:pointer}
.contact-dialog{width:min(460px,calc(100% - 32px));padding:38px;border:1px solid var(--glass-line);border-radius:30px;background:var(--paper);color:var(--ink);box-shadow:0 24px 100px #0005}
.contact-dialog::backdrop{background:#0007;backdrop-filter:blur(8px)}
.contact-dialog h2{font-size:36px;margin:0 0 12px}.contact-dialog>p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:28px}
.contact-close{position:absolute;right:18px;top:14px;border:0;background:transparent;color:var(--ink);font-size:26px;cursor:pointer;padding:6px}
.contact-links{display:grid;gap:10px}.contact-links>a,.contact-pending{display:flex;flex-direction:column;gap:7px;padding:18px;background:var(--glass);border:1px solid var(--glass-line);border-radius:16px}.contact-links small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.contact-links>a:hover{background:var(--surface)}

.desktop-mockup{position:absolute;width:80%;max-width:850px;left:50%;top:50%;transform:translate(-50%,-45%)}
.desktop-screen{padding:9px;background:#141414;border-radius:12px 12px 0 0;border:1px solid #555;box-shadow:0 20px 50px #0005}.desktop-screen img{display:block;width:100%;border-radius:4px;aspect-ratio:2372/1550;object-fit:cover}
.desktop-chin{height:25px;background:linear-gradient(#d5d5d5,#aaa);border-radius:0 0 12px 12px}.desktop-stand{height:35px;width:15%;margin:auto;background:linear-gradient(90deg,#999,#ddd,#aaa);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.desktop-base{height:6px;width:30%;margin:auto;border-radius:50%;background:#c5c5c5}
.plumbing-case .detail-art{height:680px;background:radial-gradient(ellipse at top,#3e606e,#0d2533)}
.case-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:40px 0}.case-metrics>div{padding:24px;background:var(--glass);border:1px solid var(--glass-line);border-radius:20px}.case-metrics strong{display:block;font-size:36px;font-weight:500;margin-bottom:10px}.case-metrics span{font-size:13px;color:var(--muted)}
.case-section{margin:65px 0}.case-section p{max-width:800px;font-size:17px;line-height:1.8;color:var(--muted)}.case-section .case-note{font-size:13px}.case-evidence{display:block;width:100%;max-width:1100px;border-radius:18px;margin-top:28px}
@media(max-width:750px){.plumbing-case .detail-art{height:420px}.case-metrics{grid-template-columns:repeat(2,1fr)}.case-metrics strong{font-size:28px}}
@media(max-width:480px){.plumbing-case .detail-art{height:280px}.desktop-mockup{width:90%}.desktop-screen{padding:5px}.desktop-chin{height:15px}.desktop-stand{height:24px}}

.project-cover:has(.desktop-mockup),.plumbing-case .detail-art{background:radial-gradient(ellipse at 85% 15%,#fff2cf 0%,transparent 55%),linear-gradient(135deg,#d9f5ff,#a6d9ef 65%,#bcebe1)}
.project-cover:has(.desktop-mockup) .project-index{color:#254a5a}

/* Desktop and mobile landing-page previews share one stage. */
.project-cover:has(.phone-mockup) .desktop-mockup{width:70%;left:41%}
.phone-mockup{position:absolute;width:22%;right:5%;top:50%;transform:translateY(-42%);padding:5px;background:#151515;border:1px solid #777;border-radius:22px;box-shadow:0 14px 28px #0004;overflow:hidden}
.phone-mockup img{display:block;width:100%;border-radius:17px}.phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:29%;height:7px;border-radius:20px;background:#111}
.plumbing-case .desktop-mockup{width:70%;left:41%}.plumbing-case .phone-mockup{width:21%;max-width:220px;right:5%;border-radius:35px;padding:7px}.plumbing-case .phone-mockup img{border-radius:28px}.plumbing-case .phone-island{height:13px;top:14px}
@media(max-width:480px){.plumbing-case .phone-mockup{border-radius:18px;padding:4px}.plumbing-case .phone-mockup img{border-radius:14px}.plumbing-case .phone-island{height:6px;top:8px}.phone-mockup{border-radius:15px;padding:3px}.phone-mockup img{border-radius:12px}.phone-island{height:5px;top:6px}}

.website-showcase{margin:32px 0}.website-showcase .case-evidence{margin:0}.website-showcase figcaption{font:12px/1.6 var(--mono);color:var(--muted);margin-top:14px}

.repository-cover{display:block;width:100%;height:100%;object-fit:contain;padding:35px 12px 12px;background:#edf1f4}.repository-art{height:auto;background:#edf1f4;padding:12px}.repository-art .repository-cover{height:auto;padding:0;max-height:800px}.tool-case-intro{font-size:21px;line-height:1.6;max-width:850px;color:var(--muted)}.tool-case>.case-note{font:12px/1.7 var(--mono);color:var(--muted)}.project-cover:has(.repository-cover) .project-index{color:#374650;z-index:2}

.device-scene{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 85% 15%,#fff0c4,transparent 60%),linear-gradient(135deg,#b2eaff,#abe0d7)}
.device-color-2{background:radial-gradient(ellipse at 20% 10%,#ffe3aa,transparent 65%),linear-gradient(135deg,#ffc4b3,#edb5dc 70%,#c5bdf7)}
.device-color-3{background:radial-gradient(ellipse at 85% 10%,#e8d5ff,transparent 60%),linear-gradient(135deg,#b8c9ff,#d0b8ee 60%,#f4bdd4)}
.laptop-mockup{position:absolute;width:75%;left:4%;top:50%;transform:translateY(-40%)}
.laptop-screen{position:relative;border:7px solid #202124;border-radius:12px 12px 3px 3px;aspect-ratio:16/10;overflow:hidden;background:#f3f4f8;box-shadow:0 15px 35px #23334535}
.laptop-screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.laptop-base{height:10px;width:110%;margin-left:-5%;background:linear-gradient(#eee,#9da1a6);border-radius:2px 2px 50% 50%;box-shadow:0 12px 20px #23334525}
.tool-phone{position:absolute;width:22%;right:6%;top:50%;transform:translateY(-27%);border:5px solid #202124;border-radius:24px;background:#202124;box-shadow:0 14px 24px #23334545;overflow:hidden}
.tool-phone-screen{position:relative;aspect-ratio:9/19.5;overflow:hidden;border-radius:18px;background:#f3f4f8}.tool-phone-screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.tool-phone .phone-island{top:4px;height:7px}
.laptop-screen .tool-graphic{inset:0}.tool-phone-screen .tool-graphic{inset:0}.tool-phone-screen svg{width:100%;height:100%}
.detail-art.device-art{height:580px;background:transparent;padding:0}.device-art .laptop-screen{border-width:10px}.device-art .tool-phone{border-width:7px;border-radius:36px;max-width:220px}.device-art .tool-phone-screen{border-radius:28px}.device-art .phone-island{height:12px;top:7px}
.project-cover:has(.device-scene) .project-index{color:#344351;z-index:2}
@media(max-width:750px){.detail-art.device-art{height:420px}}
@media(max-width:480px){.detail-art.device-art{height:280px}.device-art .laptop-screen{border-width:5px}.device-art .tool-phone{border-width:4px;border-radius:18px}.device-art .tool-phone-screen{border-radius:14px}.device-art .phone-island{height:6px;top:4px}}
.tool-phone{transform:translateY(-50%)}
.laptop-mockup{transform:translateY(-50%)}

.tablet-mockup{position:absolute;width:80%;left:50%;top:50%;transform:translate(-50%,-50%);padding:11px;background:#202124;border:1px solid #62666a;border-radius:22px;box-shadow:0 20px 40px #23334540}
.tablet-screen{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f3f4f8}.tablet-screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.tablet-camera{position:absolute;width:4px;height:4px;border-radius:50%;background:#555;top:3px;left:50%}.tablet-screen .tool-graphic{inset:0}
.detail-art.device-art .tablet-mockup{width:70%;max-width:740px}
@media(max-width:480px){.tablet-mockup{padding:7px;border-radius:15px}.tablet-screen{border-radius:9px}.detail-art.device-art .tablet-mockup{width:85%}}

.performance-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:32px 0}.performance-panels .website-showcase{margin:0}.performance-crop{position:relative;aspect-ratio:1280/1697.6667;overflow:hidden;border-radius:18px;background:#edf1f4}.performance-crop img{display:block;width:100%;height:auto;position:absolute;left:0;top:0}.performance-crop-1 img{transform:translateY(-33.333333%)}.performance-crop-2 img{transform:translateY(-66.666667%)}
@media(max-width:750px){.performance-panels{grid-template-columns:1fr;max-width:600px}}

.tile-about,.tile-work{background:color-mix(in srgb,var(--glass) 60%,transparent)}
.tile-about:hover,.tile-work:hover,.tile-about:focus-visible,.tile-work:focus-visible{background:color-mix(in srgb,var(--glass) 75%,transparent)}
.resume-download{display:inline-block;border:1px solid var(--line);border-radius:14px;padding:13px 20px;background:var(--glass);color:var(--ink);font:12px Arial,sans-serif;white-space:nowrap}.resume-download:disabled{opacity:.6}.resume-download:hover{background:var(--surface)}

/* Give career expand controls a clear interactive state in both themes. */
.career .role details summary{border-radius:12px;padding:18px 16px;margin-inline:-16px;transition:none;}
.career .role details summary:hover,
.career .role details summary:focus-visible{background:var(--ink);color:var(--paper);box-shadow:none;}
.career .role details summary:focus-visible{outline:2px solid var(--ink);outline-offset:12px;}
@media(prefers-reduced-motion:reduce){.career .role details summary{transition:none;}}

/* Solid page backgrounds in both themes. */
:root{--paper:#fff;}
:root[data-theme=dark]{--paper:#000;}
body{background-color:var(--paper);background-image:none;}

/* Glass career cards with a soft reflection and translucent surface. */
.career .role{
 background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.12) 45%),rgba(210,215,212,.28);
 border:1px solid rgba(150,160,155,.25);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 32px rgba(0,0,0,.04);
 backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
}
:root[data-theme=dark] .career .role{
 background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.015) 45%),rgba(32,38,35,.32);
 border-color:rgba(255,255,255,.13);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.15);
}

/* Clear top tiles keep the overlapping name legible at every screen size. */
.tile-about,.tile-work{
 background:color-mix(in srgb,var(--glass) 22%,transparent);
 backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.tile-about:hover,.tile-work:hover,.tile-about:focus-visible,.tile-work:focus-visible{
 background:color-mix(in srgb,var(--glass) 32%,transparent);
}

/* About: scroll controls contrast without moving or blurring the copy. */
.reveal-copy.scroll-reveal span,
.reveal-copy.scroll-reveal span:hover,
[data-theme=dark] .reveal-copy.scroll-reveal span:hover {
 color:color-mix(in srgb,var(--ink) var(--reveal,100%),var(--reveal-dim));
 background:transparent;box-shadow:none;transition:none;
}
@media(prefers-reduced-motion:reduce){
 .reveal-copy.scroll-reveal span{color:var(--ink)}
}

.reveal-copy.scroll-reveal{--reveal-dim:#b9b9b5}
[data-theme=dark] .reveal-copy.scroll-reveal{--reveal-dim:#484b49}
.reveal-copy.scroll-reveal p{
 font-size:clamp(38px,4.6vw,64px);line-height:1.22;letter-spacing:-.035em;
 margin-bottom:64px;
}
@media(max-width:600px){
 .reveal-copy.scroll-reveal p{font-size:clamp(32px,8.5vw,44px);line-height:1.25;margin-bottom:44px}
}