:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#050609;color:#eaeef7;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:280px}.filters{position:absolute;width:0;height:0;overflow:hidden}.site{max-width:1920px;margin:auto}.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:27px 4vw;background:#050609}.mark{display:block;width:clamp(220px,35vw,480px);flex-shrink:1}.mark img{display:block;width:100%;height:auto}.nav-link{font-size:12px;color:#d9e2f5;text-decoration:none;white-space:nowrap}.nav-link span{margin-left:12px;color:#8babff}a:focus-visible{outline:2px solid #a9c4ff;outline-offset:5px}a:hover{color:#a9c4ff}.intro{position:relative;min-height:min(760px,75vw);display:flex;align-items:end;overflow:hidden;background:#101a35}.intro-art{position:absolute;inset:0;filter:url(#posterize) saturate(.9) contrast(1.15)}.intro-art img,.intro-art video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.intro-art video:not([src]){display:none}.intro:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(3,5,12,.94),rgba(3,5,12,.15) 48%,rgba(3,5,12,.14)),linear-gradient(90deg,rgba(5,7,13,.3),transparent 70%)}.intro-caption{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;padding:clamp(28px,4vw,70px)}.intro-caption p{margin:0;font-size:clamp(20px,2.8vw,42px);letter-spacing:-.035em;line-height:1.12;max-width:520px}.intro-caption p:last-child{font-size:clamp(14px,1.1vw,16px);line-height:1.4;letter-spacing:0;justify-self:end;color:#d6dcec}.work{padding:clamp(80px,10vw,150px) 4vw;background:#080b12}.section-heading{display:grid;grid-template-columns:1fr 3fr;align-items:baseline;gap:24px;padding:0 0 30px;border-bottom:1px solid #a0abc266}.section-heading p,.project-label{font-size:11px;letter-spacing:.05em;color:#a9b6d0}.section-heading p{margin:0}.section-heading h1{font-size:clamp(28px,3.2vw,46px);font-weight:400;letter-spacing:-.035em;margin:0}.project{padding:40px 0 64px;border-bottom:1px solid #a0abc255;display:grid;grid-template-columns:1fr 1.2fr 1.65fr;gap:24px;align-items:start}.project-label{display:flex;flex-direction:column;gap:12px}.project-main h2{font-size:clamp(30px,3vw,45px);font-weight:400;letter-spacing:-.045em;line-height:1;margin:0 0 25px}.project-main p{font-size:15px;line-height:1.6;color:#b9c4d6;max-width:36ch;margin:0}.aquatic-art,.secret-art{position:relative;overflow:hidden;aspect-ratio:1.5;background:#0c1522}.aquatic-art{background:radial-gradient(ellipse at 68% 84%,#45738d 0%,#1b415a 21%,#0a1f33 52%,#030c18 100%)}.water-surface{position:absolute;width:180%;height:100%;left:-40%;top:-30%;border-radius:50%;border:1px solid #a5d3e778;box-shadow:0 0 0 12px #a5d3e70c,0 0 0 32px #a5d3e711,0 0 0 62px #a5d3e70a,0 0 0 100px #a5d3e70b;transform:rotate(-12deg);animation:drift 12s ease-in-out infinite alternate}.water-reflection{position:absolute;width:80%;height:90%;top:36%;left:25%;background:linear-gradient(130deg,transparent 25%,#b2d8e844 40%,transparent 50%,#87c4e229 65%,transparent 75%);filter:blur(12px);transform:skewX(-22deg);animation:drift 15s ease-in-out infinite alternate-reverse}.aquatic-grain{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#d0e9fa0b 0 1px,transparent 1px 4px)}.secret-art{background:#0a0b0e}.secret-art img{width:100%;height:100%;object-fit:cover;filter:blur(14px) brightness(.75);transform:scale(1.2) skewX(-9deg)}.secret-art:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,#02030b66 4px 5px)}footer{padding:32px 4vw 45px;display:flex;justify-content:space-between;gap:24px;color:#9ca9bf;font-size:12px}footer p{margin:0}footer a{color:#dce5f4;text-decoration:none;border-bottom:1px solid #718099;padding-bottom:3px;overflow-wrap:anywhere}footer a span{margin-left:8px;color:#91adfa}@keyframes drift{to{translate:3% 4%}}@media(max-width:700px){.masthead{padding:24px 6vw;align-items:start;flex-direction:column;gap:18px}.mark{width:min(100%,360px)}.nav-link{font-size:12px}.intro{min-height:72svh}.intro-art img,.intro-art video{object-position:55% center}.intro-caption{grid-template-columns:1fr;gap:28px;padding:30px 6vw}.intro-caption p{font-size:clamp(27px,7vw,40px)}.intro-caption p:last-child{justify-self:start;font-size:14px}.work{padding:75px 6vw}.section-heading{grid-template-columns:1fr;gap:18px}.project{grid-template-columns:1fr;padding:28px 0 45px;gap:24px}.project-label{flex-direction:row;justify-content:space-between}.project-main h2{margin:0 0 16px}.project-main p{max-width:60ch}.aquatic-art,.secret-art{aspect-ratio:1.35}.secret-art{grid-row:auto}footer{padding:30px 6vw 40px;flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}
.aquatic-art{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 55%,#102a40,#07101b 70%)}.aquatic-art img{width:min(88%,460px);height:100%;object-fit:contain;display:block}
/* Simplified project layout */
.section-heading{display:block;padding-bottom:0;border:0;margin-bottom:50px}
.project{grid-template-columns:1fr 1.35fr;gap:clamp(36px,6vw,100px);padding:0 0 100px;border:0}
.project:last-child{padding-bottom:0}
footer a{border:0;text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.project{grid-template-columns:1fr;gap:24px;padding-bottom:64px}.section-heading{margin-bottom:40px}}
@font-face{font-family:Jost;src:url('assets/jost-latin.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
:root{font-family:Jost,'Century Gothic',sans-serif}
/* Poster-inspired composition */
:root{background:#02040b;color:#f2f5ff}
.site{background:#05070f}
.masthead{padding:clamp(24px,3.6vw,58px) 4vw;align-items:end}
.mark{width:clamp(260px,53vw,760px)}
.nav-link{font-size:13px;letter-spacing:.01em;padding-bottom:4px}
.intro{min-height:clamp(530px,68vw,820px);background:#0b153b}
.intro-art{filter:url(#posterize) saturate(1.15) contrast(1.12);inset:-2%;animation:picture-drift 18s ease-in-out infinite alternate}
.intro:after{background:linear-gradient(0deg,#02040fe8 0%,#03061255 37%,#0205150a 75%),linear-gradient(90deg,#080f2670,transparent 64%)}
.intro-caption{padding:clamp(28px,4vw,70px);grid-template-columns:1fr auto}
.intro-caption p:first-child{font-size:clamp(32px,5vw,76px);line-height:.99;letter-spacing:-.045em;max-width:780px;text-shadow:0 2px 24px #0008}
.intro-caption p:last-child{font-size:15px;line-height:1.3;padding:13px 16px;color:#f4f7ff;background:#243da6;justify-self:end}
.work{background:linear-gradient(145deg,#101f52 0%,#08152e 34%,#050910 75%);padding-top:clamp(90px,11vw,180px)}
.section-heading{margin-bottom:clamp(60px,8vw,120px)}
.section-heading h1{font-size:clamp(42px,7.3vw,104px);line-height:.95;letter-spacing:-.05em;max-width:800px}
.project-main h2{font-size:clamp(40px,4.7vw,68px)}
.project-main p{font-size:clamp(16px,1.2vw,19px);line-height:1.6;max-width:39ch}
.aquatic-art,.secret-art{aspect-ratio:1.25;clip-path:polygon(0 0,93% 0,100% 8%,100% 100%,7% 100%,0 92%)}
.aquatic-art{background:radial-gradient(circle at 50% 50%,#326590,#122e4d 48%,#08152d 80%)}
.aquatic-art img{width:min(88%,520px);animation:bubble-float 8s ease-in-out infinite alternate;filter:drop-shadow(0 20px 22px #0009)}
.secret-art{background:radial-gradient(ellipse at 50% 50%,#3c2c19,#090b14 75%)}
.secret-art img{filter:blur(13px) brightness(.95);transform:scale(1.2) skewX(-9deg)}
footer{background:#05070f;padding-top:42px;padding-bottom:48px}
@keyframes picture-drift{to{transform:scale(1.035) translate3d(-.6%,.3%,0)}}
@keyframes bubble-float{to{transform:translateY(-10px)}}
@media(max-width:700px){.masthead{padding:26px 6vw 24px;gap:24px}.mark{width:min(100%,440px)}.intro{min-height:76svh}.intro-caption{grid-template-columns:1fr;gap:24px;padding:34px 6vw}.intro-caption p:first-child{font-size:clamp(38px,10vw,62px)}.intro-caption p:last-child{justify-self:start;font-size:14px}.work{padding:85px 6vw 70px}.section-heading{margin-bottom:58px}.section-heading h1{font-size:clamp(40px,10vw,68px)}.project-main h2{font-size:clamp(38px,9vw,55px)}.project-main p{font-size:16px}.aquatic-art,.secret-art{aspect-ratio:1.15}}
@media(prefers-reduced-motion:reduce){.intro-art,.aquatic-art img{animation:none}}
/* Let the aquarium artwork fade into the page instead of ending in a panel. */
.aquatic-art{isolation:isolate;clip-path:none;overflow:visible;background:transparent}
.aquatic-art::before{content:"";position:absolute;inset:-12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(68,173,224,.35) 0%,rgba(38,115,175,.17) 38%,rgba(15,42,82,0) 70%)}
.aquatic-art img{filter:drop-shadow(0 16px 32px rgba(12,92,144,.24))}
.work{position:relative;isolation:isolate;overflow:hidden}
.work::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(4,9,24,.22),rgba(4,9,24,.65)),url('assets/greeble.webp') center top / cover no-repeat;opacity:.17;mix-blend-mode:screen;mask-image:linear-gradient(to bottom,black 0%,black 38%,transparent 86%)}
/* Soft sculpted surfaces */
:root{background:#122549}
.site{background:#122549;overflow:hidden}
.masthead{background:#122549;align-items:center}
.mark img{mix-blend-mode:screen}
.nav-link{display:inline-flex;align-items:center;gap:12px;padding:14px 20px;border-radius:999px;background:#162c51;box-shadow:7px 7px 15px #081630aa,-6px -6px 15px #2847739c;color:#f1f6ff;transition:box-shadow .2s ease,transform .2s ease}
.nav-link span{margin:0;color:#acdfff}
.nav-link:hover{color:white;transform:translateY(-1px);box-shadow:9px 9px 18px #081630b0,-7px -7px 18px #2b4b7da6}
.nav-link:active{transform:translateY(1px);box-shadow:inset 5px 5px 10px #081630aa,inset -5px -5px 10px #2847739c}
.intro{margin:10px 4vw 38px;border-radius:34px;box-shadow:inset 9px 9px 25px #03091799,12px 12px 30px #08162fa8,-9px -9px 25px #28477380;isolation:isolate}
.intro:after{border-radius:inherit}
.intro-caption p:last-child{border-radius:18px;background:#1b3865d9;box-shadow:inset 3px 3px 8px #5d81a452,inset -4px -4px 9px #06162c80;padding:15px 20px}
.work{background:#122549;padding-top:clamp(70px,8vw,120px)}
.work::before{opacity:.11;mix-blend-mode:screen}
.section-heading{margin-bottom:clamp(48px,6vw,90px)}
.project{padding:clamp(28px,3.7vw,60px);margin:0 0 clamp(35px,5vw,75px);border-radius:36px;background:#172d50;box-shadow:16px 16px 32px #09172eb3,-12px -12px 30px #28457280;align-items:center}
.project:last-child{padding:clamp(28px,3.7vw,60px);margin-bottom:0}
.project-main p{color:#d0deef}
.aquatic-art{clip-path:none;background:transparent;box-shadow:none;overflow:visible}
.aquatic-art::before{background:radial-gradient(ellipse at center,rgba(93,201,236,.32),rgba(54,145,194,.14) 40%,transparent 70%)}
.secret-art{clip-path:none;border-radius:28px;box-shadow:inset 9px 9px 21px #050c1ab3,inset -8px -8px 20px #35557980;overflow:hidden}
.secret-art:after{border-radius:inherit;box-shadow:inset 8px 8px 20px #050c1a99,inset -7px -7px 16px #466b8b55}
footer{background:#122549;color:#c1d0e3;padding-top:54px}
footer a{color:#eff8ff}
@media(max-width:700px){.masthead{align-items:flex-start}.nav-link{padding:12px 17px}.intro{margin:0 5vw 26px;border-radius:25px}.work{padding:72px 6vw 55px}.project,.project:last-child{padding:27px;margin-bottom:35px;border-radius:27px}.project:last-child{margin-bottom:0}.aquatic-art{aspect-ratio:1.05}.secret-art{border-radius:22px}footer{padding-top:36px}}
@media(prefers-reduced-motion:reduce){.nav-link{transition:none}}
/* Ambient color extends the moving image into the surrounding page. */
:root{font-family:Helvetica,Arial,sans-serif}
.intro-wrap{position:relative;isolation:isolate}
.ambient{position:absolute;inset:-35px 0 -50px;z-index:-1;overflow:hidden;pointer-events:none;filter:blur(55px) saturate(1.4);opacity:.65;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent)}
.ambient img,.ambient video{position:absolute;width:100%;height:100%;object-fit:cover;inset:0}
.ambient video:not([src]){display:none}
.intro{position:relative;z-index:0}
/* Diffuse glass highlights keep the sculpted surfaces soft. */
.nav-link{background:linear-gradient(150deg,#42638a99,#1b345da8 45%,#122c50ba);box-shadow:inset 1px 1px 2px #d3f4ff45,inset -1px -1px 2px #07152e99,7px 7px 18px #07142f99,-6px -6px 16px #35598566}
.intro{box-shadow:inset 1px 1px 2px #e1f8ff66,inset -3px -3px 14px #07152e88,13px 13px 32px #07142ea8,-9px -9px 25px #35598573}
.intro-caption p:last-child{background:linear-gradient(145deg,#719dbe66,#294c7ca8 45%,#10294ba8);backdrop-filter:blur(14px);box-shadow:inset 1px 1px 2px #d8f7ff66,inset -2px -2px 5px #07152e80,5px 8px 18px #050d1f55}
.project,.project:last-child{position:relative;background:linear-gradient(145deg,rgba(93,135,174,.21),rgba(24,49,86,.72) 36%,rgba(14,36,70,.84));box-shadow:inset 1px 1px 2px #e4faff55,inset -2px -2px 5px #0a1b3680,16px 16px 32px #08162db3,-12px -12px 30px #34598380}
.project::before{content:"";position:absolute;inset:1px 1px auto;height:38%;border-radius:inherit;background:linear-gradient(165deg,rgba(202,240,255,.13),rgba(154,221,255,.025) 40%,transparent 70%);pointer-events:none}
.project>*{position:relative}
.aquatic-art::before{background:radial-gradient(ellipse at center,rgba(144,231,255,.42),rgba(74,182,223,.20) 42%,transparent 70%)}
.secret-art{background:radial-gradient(ellipse at center,#513d2f,#122b4a 76%);box-shadow:inset 7px 7px 18px #08192f99,inset -6px -6px 16px #8ac9ee40}
footer a{color:#f1f9ff}
@media(prefers-reduced-motion:reduce){.ambient video{display:none}}
/* Sculpted metallic housing inspired by early-2000s hardware interfaces. */
body{background:#060a14;padding:clamp(10px,2vw,28px)}
.site{max-width:1380px;border-radius:48px 48px 22px 22px;background:#13294a;box-shadow:0 18px 55px #000a,0 0 0 2px #8c9cab,0 0 0 4px #202b3a}
.masthead{padding:clamp(22px,3vw,42px) clamp(20px,4vw,52px);border-radius:44px 44px 0 0;background:linear-gradient(165deg,#f0f5f5 0%,#8f9da9 18%,#e2edf3 28%,#445668 55%,#b9cad3 72%,#293849 100%);box-shadow:inset 0 2px 3px #fff,inset 0 -5px 8px #101c2eaa;gap:24px}
.mark{width:clamp(230px,40vw,520px);padding:12px 17px;background:#05080e;border-radius:14px;box-shadow:inset 2px 3px 6px #000,0 1px 1px #fff8}
.mark img{mix-blend-mode:normal}
.nav-link{background:linear-gradient(#536271,#111821 42%,#05090f 53%,#263b4d);border:1px solid #b4c5d0;color:#f7fbff;box-shadow:inset 0 1px 1px #ffffffaa,0 2px 5px #0a1222a0;padding:12px 20px}
.nav-link:hover{box-shadow:inset 0 1px 2px #fff,0 3px 8px #061323b0}
.intro{margin:18px clamp(14px,2vw,30px) 36px;border:6px solid transparent;border-radius:24px;background:linear-gradient(#071022,#071022) padding-box,linear-gradient(145deg,#e1edf0,#5b6e7d 28%,#d1dfe6 48%,#35485d 75%,#a4bcc7) border-box;box-shadow:0 9px 22px #030b1a99,inset 0 1px 2px #fff8;min-height:clamp(480px,55vw,680px)}
.intro:after{border-radius:17px}
.work{background:linear-gradient(165deg,#1b3f68,#0c203d 65%,#081526);padding:clamp(60px,7vw,110px) clamp(20px,4vw,56px)}
.work::before{opacity:.16}
.section-heading{margin-bottom:clamp(42px,5vw,70px)}
.section-heading h1{font-size:clamp(36px,5vw,68px);letter-spacing:-.04em}
.project,.project:last-child{border:5px solid transparent;border-radius:25px;background:linear-gradient(145deg,#426988,#1a3a5a 42%,#102a49) padding-box,linear-gradient(145deg,#e3f0f2,#728995 25%,#c4d3d9 45%,#405568 75%,#a7c0c8) border-box;box-shadow:inset 0 1px 2px #e5fcff88,0 12px 26px #030e1e99;margin-bottom:clamp(28px,4vw,55px)}
.project:last-child{margin-bottom:0;background:linear-gradient(145deg,#3d527b,#1c2c50 45%,#101b37) padding-box,linear-gradient(145deg,#dce8ed,#708393 25%,#c4d3d9 45%,#405568 75%,#9cb1c0) border-box}
.project::before{border-radius:18px}
.project-main h2{font-size:clamp(36px,4vw,58px)}
.aquatic-art{background:transparent;clip-path:none;border:0;box-shadow:none}
.secret-art{border-radius:18px}
.credit{font-size:11px;line-height:1.5;margin-top:12px;color:#b8c9d8}.credit a{color:inherit}
footer{background:#0a162a;padding:34px clamp(20px,4vw,56px) 40px}
.work::before{z-index:-2}
@media(max-width:700px){body{padding:10px}.site{border-radius:28px 28px 16px 16px}.masthead{border-radius:25px 25px 0 0;padding:24px 22px;gap:20px}.mark{width:min(100%,390px)}.intro{margin:14px 14px 28px;min-height:70svh;border-width:5px;border-radius:18px}.intro:after{border-radius:13px}.work{padding:60px 20px}.project,.project:last-child{padding:23px;border-width:4px;border-radius:21px;margin-bottom:30px}.project:last-child{margin-bottom:0}.section-heading{margin-bottom:42px}footer{padding:30px 22px 35px}}
/* Textured backdrop and a slow reflected light, never a rapid flash. */
body{position:relative;isolation:isolate;background:#050a17}
body::before{content:"";position:fixed;inset:-5%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% 25%,rgba(65,141,225,.28),transparent 45%),linear-gradient(rgba(3,9,23,.35),rgba(3,9,23,.78)),url('assets/greeble.webp') center / cover no-repeat;opacity:.5;animation:background-glow 12s ease-in-out infinite alternate}
.work::before{animation:surface-glow 11s ease-in-out infinite alternate}
@keyframes background-glow{from{opacity:.35}to{opacity:.62}}
@keyframes surface-glow{from{opacity:.12}to{opacity:.23}}
@media(prefers-reduced-motion:reduce){body::before,.work::before{animation:none}}
/* Layered industrial texture and softly travelling blue light. */
body::before{inset:-5%;z-index:-2;background:linear-gradient(rgba(3,9,23,.2),rgba(3,9,23,.7)),url('assets/industrial.svg') center / cover no-repeat;opacity:.52;animation:industrial-drift 24s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 28%,rgba(71,170,255,.32),transparent 48%);animation:ambient-pulse 12s ease-in-out infinite alternate}
.work::before{background:linear-gradient(180deg,rgba(4,9,24,.12),rgba(4,9,24,.58)),url('assets/industrial.svg') center top / cover no-repeat;opacity:.20;animation:surface-glow 11s ease-in-out infinite alternate}
.work::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 35%,rgba(75,178,255,.25),transparent 47%);animation:ambient-pulse 12s ease-in-out infinite alternate}
.intro-art{z-index:-1}
.intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/industrial.svg') center / cover no-repeat;mix-blend-mode:screen;opacity:.12;animation:surface-glow 11s ease-in-out infinite alternate}
.site{position:relative;isolation:isolate;animation:frame-light 12s ease-in-out infinite alternate}
.site::after{content:"";position:absolute;inset:0;z-index:5;padding:3px;border-radius:inherit;pointer-events:none;background:conic-gradient(from 25deg at 50% 50%,transparent 2%,rgba(133,219,255,.72) 14%,transparent 28%,transparent 53%,rgba(100,191,255,.45) 66%,transparent 81%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:specular-pulse 12s ease-in-out infinite alternate}
@keyframes industrial-drift{from{transform:scale(1.02) translate3d(-.4%,0,0);opacity:.38}to{transform:scale(1.06) translate3d(.4%,-.4%,0);opacity:.58}}
@keyframes ambient-pulse{from{opacity:.18}to{opacity:.55}}
@keyframes frame-light{from{box-shadow:0 18px 55px #000a,0 0 0 2px #8c9cab,0 0 0 4px #202b3a,0 0 14px #3a9de322}to{box-shadow:0 18px 55px #000a,0 0 0 2px #9bbbd0,0 0 0 4px #273c53,0 0 32px #5abfff66}}
@keyframes specular-pulse{from{opacity:.28}to{opacity:.82}}
/* Pointer movement gently bends the obscured secret-project surface. */
.secret{perspective:900px}
.secret-art{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .28s ease,box-shadow .28s ease;will-change:transform}
.secret-art img{transform:scale(1.2) skewX(calc(-9deg + var(--warp,0deg)));transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){body::before,body::after,.work::before,.work::after,.intro::before,.site,.site::after{animation:none}.secret-art,.secret-art img{transition:none}}

/* Darker metal, without bright outlines. */
body{background:#040810}
.site{background:#0b1525;box-shadow:0 20px 55px #000c,0 0 22px #204b7144}
.site::after{display:none}
.masthead{background:linear-gradient(155deg,#526372 0%,#2b3949 18%,#627382 31%,#1b2939 57%,#465d6f 77%,#111c2a 100%);box-shadow:inset 0 2px 4px #9baebc42,inset 0 -6px 14px #02080ec9}
.mark{box-shadow:inset 2px 3px 8px #000b}
.nav-link{border:0;background:linear-gradient(#354554,#101821 47%,#080e17 60%,#1a3040);box-shadow:inset 0 1px 2px #7f9bad55,0 4px 10px #020711a8}
.nav-link:hover{box-shadow:inset 0 1px 2px #9fc1d166,0 5px 14px #020711c0}
.intro{border:0;background:#050b17;box-shadow:0 12px 28px #02050db3,inset 0 1px 3px #91b5c044}
.work{background:linear-gradient(155deg,#132a46,#09182d 55%,#060e1b)}
.project,.project:last-child{border:0;background:linear-gradient(145deg,#334d62,#172b40 36%,#0d1c2f 74%,#172c40);box-shadow:inset 1px 1px 3px #96b6c43d,inset -3px -3px 10px #02081399,0 14px 30px #020711a8}
.project:last-child{background:linear-gradient(145deg,#303d57,#192640 40%,#0b1529 76%,#192940)}
.project::before{background:linear-gradient(165deg,rgba(165,205,226,.10),rgba(100,160,196,.015) 42%,transparent 70%)}
footer{background:#07101e}
@keyframes frame-light{from{box-shadow:0 20px 55px #000c,0 0 14px #2585c522}to{box-shadow:0 20px 55px #000c,0 0 32px #4bafff55}}
@media(max-width:700px){.intro,.project,.project:last-child{border:0}}

/* Dark polished metal: broad reflections instead of bright outlines. */
body{background:#02050b}
.site{background:#080f1b;box-shadow:0 24px 65px #000e,0 0 36px #19558a2b}
.masthead{background:linear-gradient(160deg,#16212b 0%,#455564 11%,#778896 15%,#293846 22%,#101b27 42%,#334b5b 56%,#657988 60%,#1a2938 68%,#090f19 100%);box-shadow:inset 0 3px 7px #a8c8d14a,inset 0 -10px 24px #02050cda,0 12px 25px #0008}
.mark{background:linear-gradient(160deg,#111923,#020305 35%,#080e17 75%,#1a2935);box-shadow:inset 3px 4px 11px #000e,inset -2px -2px 8px #47647838,0 4px 10px #0008}
.nav-link{background:linear-gradient(175deg,#596c7b 0%,#1c2a37 24%,#05090f 49%,#0a111b 60%,#243b4a 100%);box-shadow:inset 0 2px 4px #b1d2df42,inset 0 -3px 7px #000b,0 5px 12px #000a}
.nav-link:hover{background:linear-gradient(175deg,#7896a8,#263d50 25%,#07111c 50%,#183c57);box-shadow:inset 0 2px 4px #bfeaff66,0 0 18px #328bdc55,0 5px 12px #000b}
.intro{background:#030712;box-shadow:inset 0 2px 6px #66889938,0 16px 35px #000c,0 0 22px #1a68ae22}
.intro-caption p:last-child{background:linear-gradient(155deg,#64839880,#1d3954ba 35%,#071523d9 63%,#28445dba);box-shadow:inset 1px 2px 4px #b8e1ed4a,inset -2px -3px 8px #0009,0 8px 20px #0008}
.work{background:linear-gradient(145deg,#101f31 0%,#081322 44%,#050b14 100%)}
.work::before{opacity:.25;filter:contrast(1.18) saturate(.8)}
.work::after{background:radial-gradient(ellipse at 74% 28%,rgba(73,157,214,.25),transparent 43%),radial-gradient(ellipse at 20% 75%,rgba(39,87,144,.18),transparent 45%)}
.project,.project:last-child{background:linear-gradient(155deg,#465c6d 0%,#243746 14%,#3b5364 21%,#182a3b 32%,#0b1828 58%,#1d3346 78%,#080f1a 100%);box-shadow:inset 2px 3px 7px #b0d1db35,inset -4px -5px 12px #01050bb3,0 18px 34px #000a}
.project:last-child{background:linear-gradient(155deg,#485366 0%,#253143 15%,#3d4d64 22%,#17263b 35%,#0b1324 62%,#1e3149 80%,#080e19 100%)}
.project::before{height:48%;background:linear-gradient(160deg,rgba(205,235,248,.16),rgba(129,185,212,.04) 26%,transparent 54%);animation:metal-sheen 16s ease-in-out infinite alternate}
.aquatic-art::before{background:radial-gradient(ellipse at center,rgba(92,194,233,.29),rgba(32,102,158,.12) 42%,transparent 70%)}
.secret-art{background:radial-gradient(ellipse at center,#302b27,#091426 76%);box-shadow:inset 8px 9px 22px #000b,inset -5px -5px 16px #7da4bb2b}
footer{background:linear-gradient(#0a1523,#04080e)}
@keyframes metal-sheen{from{opacity:.5}to{opacity:1}}
@keyframes frame-light{from{box-shadow:0 24px 65px #000e,0 0 16px #2585c51c}to{box-shadow:0 24px 65px #000e,0 0 36px #4bafff45}}
@media(prefers-reduced-motion:reduce){.project::before{animation:none}}
/* Visitor counter mockup; the live count requires a backend. */
.brand-unit{display:flex;align-items:center;gap:clamp(12px,2vw,26px);min-width:0}
.brand-unit .mark{flex:0 1 auto;min-width:0}
.visitor-meter{flex:none;display:flex;flex-direction:column;gap:5px;min-width:116px;padding:9px 12px 10px;border-radius:10px;background:linear-gradient(155deg,#26343e,#0c141c 33%,#03080c 70%,#1b2c38);box-shadow:inset 2px 2px 5px #000c,inset -1px -1px 3px #728e9a55,0 2px 6px #0006}
.visitor-label{font:9px/1 Helvetica,Arial,sans-serif;letter-spacing:.11em;color:#b5cbd5;white-space:nowrap}
.visitor-label em{font:inherit;font-size:8px;letter-spacing:.04em;color:#8298a5;font-style:normal;margin-left:4px}
.visitor-digits{font:600 21px/1 'Lucida Console',Consolas,monospace;letter-spacing:.1em;color:#a8e8fa;text-shadow:0 0 8px #36b9e977,0 0 18px #2189ca44;font-variant-numeric:tabular-nums}
@media(max-width:700px){.brand-unit{width:100%;gap:10px}.brand-unit .mark{width:auto;flex:1;min-width:0}.visitor-meter{min-width:92px;padding:8px}.visitor-label{font-size:8px}.visitor-label em{font-size:7px;margin-left:2px}.visitor-digits{font-size:16px;letter-spacing:.06em}}
@media(max-width:340px){.brand-unit{flex-wrap:wrap}.brand-unit .mark{flex:1 1 100%}}
/* Hand-drawn domain tag, separate from the original wordmark. */
.mark{display:flex;align-items:center;gap:clamp(5px,1vw,12px)}
.mark img{width:auto;flex:1 1 auto;min-width:0}
.net-tag{display:block;width:clamp(48px,7vw,90px);height:auto;flex:0 0 auto;overflow:visible;transform:rotate(-9deg);filter:drop-shadow(0 0 5px #45a9ed70)}
.tag-shadow{stroke:#13609b;stroke-width:8;opacity:.7;transform:translate(1px,2px)}
.tag-ink{stroke:#e8faff;stroke-width:5}
.tag-scratch{stroke:#a4dbfb;stroke-width:1.5;opacity:.9}
@media(max-width:700px){.net-tag{width:clamp(35px,10vw,65px)}.mark{gap:5px}}
/* The handwritten tag overlays the wordmark without changing its layout. */
.mark{position:relative;display:block}
.mark img{display:block;width:100%;height:auto}
.net-tag{position:absolute;right:5px;bottom:-8px;width:clamp(48px,6vw,82px);height:auto;margin:0;transform:rotate(-9deg)}
@media(max-width:700px){.net-tag{width:clamp(35px,9vw,60px);right:3px;bottom:-7px}}
.net-tag{right:-16px;bottom:-14px;z-index:2}
@media(max-width:700px){.net-tag{right:-14px;bottom:-12px}}
.net-tag{right:0;bottom:0;transform:translate(12%,25%) rotate(-9deg)}
@media(max-width:700px){.net-tag{right:0;bottom:0}}
/* Keep the hand-drawn tag inside the lower corner of the logo panel. */
.net-tag{right:7px;bottom:2px;width:clamp(48px,5.5vw,72px);transform:rotate(-8deg);filter:drop-shadow(0 1px 2px #02070b)}
.tag-shadow{stroke:#142b3b;stroke-width:8;opacity:.9;transform:translate(1px,2px)}
.tag-ink{stroke:#c4e7fa;stroke-width:4.5}
.tag-scratch{stroke:#eef9ff;stroke-width:1.3;opacity:.85}
@media(max-width:700px){.net-tag{width:clamp(42px,9vw,58px);right:6px;bottom:1px}}
/* Keep the wordmark in place, with the domain tag immediately to its right. */
.masthead{display:flex;flex-direction:column;align-items:stretch;gap:20px}
.brand-unit{width:100%;display:block}
.brand-unit .mark{display:block;width:min(520px,calc(100% - 78px));max-width:100%;position:relative}
.net-tag{position:absolute;right:0;top:50%;bottom:auto;width:clamp(52px,6vw,76px);transform:translate(104%,-50%) rotate(-8deg)}
.header-tools{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
@media(max-width:700px){.masthead{align-items:stretch}.brand-unit .mark{width:min(390px,calc(100% - 62px))}.net-tag{width:clamp(46px,10vw,60px);right:0;top:50%;bottom:auto}.header-tools{gap:12px}}
.net-tag{width:clamp(70px,8vw,100px)}
.brand-unit .mark{width:min(520px,calc(100% - 103px))}
@media(max-width:700px){.net-tag{width:clamp(60px,13vw,80px)}.brand-unit .mark{width:min(390px,calc(100% - 83px))}}
/* Explicitly clip video layers on mobile browsers and draw arrows as icons. */
.intro-art{inset:0;border-radius:inherit;overflow:hidden;clip-path:inset(0 round 24px)}
.intro-art img,.intro-art video{border-radius:inherit}
.intro::before{border-radius:inherit;clip-path:inset(0 round 24px)}
.arrow-icon{display:inline-block;width:14px;height:14px;flex:none;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-link .arrow-icon{color:#acdfff}footer .arrow-icon{margin-left:8px;color:#91adfa}
@media(max-width:700px){.intro-art,.intro::before{clip-path:inset(0 round 18px)}}
/* Supplied Aqua Regis artwork and title. */
.project-main h2 .aqua-title{display:block;width:min(100%,420px);height:auto}
.aquatic-art img{mix-blend-mode:screen}
.aquatic-art{isolation:auto}
.aquatic-art img{-webkit-mask-image:radial-gradient(circle closest-side,#000 78%,#000 85%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 78%,#000 85%,transparent 100%)}
.secret-title{position:relative;width:min(100%,420px)}
.secret-title img{display:block;width:100%;height:auto}
.secret-title::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 5%,#ffe7ab 42%,#fff8df 50%,#e5b76b 58%,transparent 95%);background-size:220% 100%;-webkit-mask:url("assets/secret-specular.png") center/100% 100% no-repeat;mask:url("assets/secret-specular.png") center/100% 100% no-repeat;mix-blend-mode:screen;opacity:.25;animation:gold-light 12s ease-in-out infinite alternate}
@keyframes gold-light{from{background-position:0% 50%;opacity:.12}to{background-position:100% 50%;opacity:.32}}
@media(prefers-reduced-motion:reduce){.secret-title::after{animation:none;opacity:.14}}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 22px}