:root{
  --night:#090e20;--deep:#0d1530;--panel:#111d3d;--ice:#e5edff;--muted:#a8b6d8;
  --line:rgba(176,198,255,.22);--blue:#647fff;--cyan:#74e5ee;--violet:#a78bfa;
  --lilac:#c5baff;--steel:#829ac4;--mono:'DM Mono',monospace;
  --sans:'Space Grotesk',Arial,sans-serif;--display:'Sora','Space Grotesk',Arial,sans-serif;--y2k:'Michroma','Sora',sans-serif;
  --pixel:'Press Start 2P',monospace;--gothic:'Grenze Gotisch',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--night);color:var(--ice);font-family:var(--sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--cyan);color:var(--night)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.09;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");mix-blend-mode:screen}
.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;position:relative;z-index:30;background:rgba(9,14,32,.86);backdrop-filter:blur(16px)}
.wordmark{font-family:var(--y2k);font-size:17px;font-weight:700;letter-spacing:-1px;text-shadow:0 0 18px rgba(116,229,238,.28)}
.wordmark span{color:var(--cyan)}.wordmark i{font:8px var(--pixel);vertical-align:top;margin-left:4px;color:var(--violet)}
.top-note,.nav,.menu-toggle,.eyebrow,.hero-index,.hero-bottom,.project-type,.art-tag,.art-number,.filter,.replace-note,.manifesto-bottom,.skills,.contact-top,.social-links,footer,.dialog-actions,.dialog-close{font-family:var(--mono);font-size:10px;letter-spacing:.07em}
.top-note{margin-left:auto;margin-right:9vw;color:var(--muted)}
.nav{display:flex;gap:28px}.nav a{position:relative;color:#c7d4f4}.nav a:after{content:"";height:1px;background:var(--cyan);position:absolute;left:0;bottom:-7px;width:0;transition:width .2s}.nav a:hover:after{width:100%}
.menu-toggle{display:none;background:none;border:1px solid var(--line);padding:8px 11px}
.hero{min-height:730px;padding:38px 4vw 30px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;background:radial-gradient(ellipse at 78% 36%,rgba(101,113,255,.24),transparent 33%),radial-gradient(ellipse at 45% 78%,rgba(61,214,225,.14),transparent 37%),linear-gradient(125deg,#080d1e 5%,#111b3a 56%,#11152e 100%)}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.42;background:repeating-linear-gradient(135deg,transparent 0 36px,rgba(164,190,255,.09) 37px 38px,transparent 39px 78px);mask-image:linear-gradient(90deg,transparent 10%,black 72%)}
.hero:after{content:"";position:absolute;right:4%;top:13%;width:34vw;height:34vw;max-width:470px;max-height:470px;border-radius:50%;background:conic-gradient(from 35deg,rgba(116,229,238,.1),rgba(108,126,255,.4),rgba(179,145,255,.12),rgba(116,229,238,.36),rgba(116,229,238,.1));filter:blur(1px);opacity:.6;z-index:-1}
.hero-index{line-height:1.7;position:relative;z-index:2;color:#a9b9e4}
.hero-title-wrap{position:relative;z-index:2;padding:36px 0 28px}
.eyebrow{font-size:9px;margin:0 0 20px;color:#8fa4d5;text-transform:uppercase}
.hero h1{font-family:var(--y2k);font-size:clamp(64px,12.5vw,184px);letter-spacing:-.09em;line-height:.88;margin:0;font-weight:500;max-width:1120px;text-transform:uppercase;text-shadow:0 8px 45px rgba(71,95,206,.18)}
.hero h1 span{font-family:var(--gothic);font-size:1.14em;font-weight:700;font-style:normal;letter-spacing:-.035em;color:var(--ice);text-transform:none;text-shadow:0 0 22px rgba(167,139,250,.38)}
.hero h1 em{font-family:var(--y2k);font-style:normal;color:transparent;font-size:.74em;letter-spacing:-.08em;-webkit-text-stroke:1.5px var(--cyan);text-shadow:0 0 22px rgba(116,229,238,.2)}
.hero-sticker{position:absolute;width:clamp(90px,13vw,155px);right:12%;top:2%;transform:rotate(12deg);animation:float 8s ease-in-out infinite;filter:drop-shadow(0 15px 20px rgba(0,0,0,.32))}
.hero-sticker svg{width:100%;overflow:visible}.hero-sticker text{font:7px var(--pixel);letter-spacing:.5px;fill:var(--ice)}
.hero-sticker circle{fill:#6c85ff!important;stroke:#b5c8ff;stroke-width:1.2}.hero-sticker path{stroke:#09101f!important}
@keyframes float{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-13px) rotate(3deg)}}
.hero-bottom{display:flex;align-items:end;justify-content:space-between;line-height:1.7;position:relative;z-index:2;color:#b5c5e9}
.hero-bottom p{font-family:var(--sans);font-size:14px;line-height:1.45;margin:0;color:#d8e2ff}
.scroll-link{border-bottom:1px solid #8fa4d5;padding-bottom:6px;color:var(--cyan)}.scroll-link span{font-size:16px;margin-left:14px}
.hero-mark{text-align:right;color:#e1e9ff}.hero-mark span{color:#8193bd}
.hero-shape{position:absolute;pointer-events:none}.shape-one{width:270px;height:270px;border:1px solid rgba(178,201,255,.42);border-radius:50%;right:-70px;top:24%;opacity:.5;box-shadow:inset 0 0 35px rgba(112,141,255,.16),0 0 36px rgba(112,141,255,.1)}
.shape-two{width:115px;height:115px;background:radial-gradient(circle at 30% 25%,#effcff 0 2%,#9bafff 16%,#506dcb 42%,#19234a 72%);border-radius:50%;right:9%;bottom:12%;opacity:.92;box-shadow:inset -14px -20px 30px rgba(3,8,25,.6),0 15px 35px rgba(69,83,201,.35)}
.work-section{padding:108px 4vw 118px;background:linear-gradient(135deg,#dce7ff 0%,#e7eaff 30%,#d4e5f5 57%,#e7e2ff 100%);color:#111a35;position:relative;overflow:hidden}
.work-section:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.19;background-image:radial-gradient(#536cbb 1px,transparent 1px);background-size:15px 15px;mask-image:linear-gradient(90deg,black,transparent 72%)}
.work-section>*{position:relative;z-index:1}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:45px}
.section-heading h2{font-family:var(--gothic);font-size:clamp(60px,8vw,112px);letter-spacing:-.035em;line-height:.82;margin:0;font-weight:700}
.section-heading h2 span{font-family:var(--y2k);font-size:.56em;letter-spacing:-.08em;text-transform:uppercase;color:#465bb1;vertical-align:middle}
.section-aside{text-align:right;font-size:12px;line-height:1.5;margin:0 0 4px;color:#34466e}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px;border-bottom:1px solid rgba(20,37,83,.24);padding-bottom:18px}
.filter{background:rgba(238,243,255,.24);border:1px solid rgba(20,37,83,.35);border-radius:2px;padding:10px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
.filter:hover,.filter.active{background:#182653;color:#e7f2ff;border-color:#182653;box-shadow:0 0 18px rgba(70,91,177,.2)}.filter sup{font:7px var(--pixel);margin-left:5px;color:var(--cyan)}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:50px 22px;align-items:start}
.project-card{min-width:0;transition:opacity .2s,transform .2s}.project-card.hidden{display:none}.project-card.card-large{grid-column:span 2}.project-card.card-wide{grid-column:span 2}
.project-open{width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;color:inherit}
.project-image{height:clamp(260px,34vw,480px);position:relative;overflow:hidden;isolation:isolate;transition:filter .35s,transform .35s;border-radius:2px}
.card-large .project-image{height:clamp(350px,50vw,650px)}.card-wide .project-image{height:clamp(280px,36vw,450px)}
.project-open:hover .project-image{filter:saturate(1.18) contrast(1.04)}.project-open:hover .arrow{transform:translate(4px,-4px) rotate(45deg)}
.artwork{border:1px solid rgba(29,46,94,.28);box-shadow:0 12px 32px rgba(34,52,111,.13)}
.artwork:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.36;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.13) 6px,transparent 7px),repeating-linear-gradient(90deg,transparent 0 47px,rgba(15,26,65,.14) 48px,transparent 49px)}
.art-tag,.art-number{position:absolute;z-index:4;top:18px}.art-tag{left:18px;background:rgba(8,15,37,.82);color:#cce9ff;padding:7px 9px;border:1px solid rgba(189,215,255,.38);backdrop-filter:blur(8px);font-size:8px}.art-number{right:18px;font:8px var(--pixel);color:#13234e;text-shadow:0 1px rgba(255,255,255,.4)}
.art-inara{background:radial-gradient(ellipse at 74% 24%,#c4b5ff 0 5%,transparent 24%),radial-gradient(ellipse at 24% 76%,#5ce0dc 0,transparent 34%),linear-gradient(128deg,#263a88 0%,#596fe0 36%,#a7a8f4 57%,#325d92 100%)}
.art-inara:after{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(135deg,transparent 0 28px,rgba(235,244,255,.22) 29px 30px,transparent 31px 60px);mix-blend-mode:screen}
.figure-inara{position:absolute;z-index:2;width:32%;height:65%;bottom:-4%;left:33%;background:linear-gradient(140deg,#d9eaff,#53648f 40%,#111a38 90%);border-radius:48% 48% 12% 12%;transform:rotate(-7deg);box-shadow:30px 22px 0 -5px rgba(27,39,83,.75),inset -16px 0 22px rgba(5,11,31,.62)}
.figure-inara:before{content:"";position:absolute;width:60%;height:39%;left:19%;top:-24%;border-radius:45% 48% 40% 43%;background:radial-gradient(circle at 30% 25%,#f0fbff,#82e5ec 42%,#647fff 73%,#263477);box-shadow:inset -12px -3px 0 #3b4eab}
.figure-inara:after{content:"";position:absolute;width:120%;height:15%;left:-10%;top:32%;background:linear-gradient(90deg,#b6c8ff,#68dce9,#b6a5ff);transform:rotate(-20deg);border:2px solid #172553}
.art-scribble{position:absolute;z-index:3;right:7%;bottom:11%;font-family:var(--gothic);font-weight:700;font-size:clamp(40px,7vw,100px);line-height:.72;letter-spacing:-.03em;color:#f1f4ff;text-shadow:0 3px 20px rgba(13,19,52,.4);transform:rotate(-8deg)}
.art-notes{background:radial-gradient(ellipse at 12% 20%,#70e8de 0,transparent 35%),radial-gradient(ellipse at 90% 82%,#ac9bff 0,transparent 38%),linear-gradient(135deg,#506fda,#c2d0ff 55%,#5366bd);background-size:cover}
.art-notes:after{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(rgba(7,18,53,.62) 1px,transparent 1.4px);background-size:13px 13px;opacity:.55}
.notes-orb{position:absolute;z-index:2;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 28% 23%,#f3f6ff 0 2%,#b2d7ff 12%,#6b82f1 34%,#9f84e8 57%,#162d66 78%);top:16%;left:22%;box-shadow:14px 18px 0 rgba(16,31,83,.2),inset -25px -25px 35px rgba(8,17,58,.5);transform:rotateX(12deg) rotateY(-17deg)}
.notes-orb:after{content:"";position:absolute;inset:23%;border:2px solid rgba(231,245,255,.7);border-radius:50%;transform:scaleX(.45) rotate(30deg);box-shadow:0 0 20px rgba(180,241,255,.55)}
.notes-type{position:absolute;z-index:3;bottom:7%;left:6%;font-family:var(--y2k);font-size:clamp(18px,3vw,38px);font-weight:700;line-height:.95;letter-spacing:-.08em;color:#f5f7ff;text-shadow:0 3px 16px #273d8c;transform:rotate(-5deg)}
.notes-cross{position:absolute;z-index:3;right:8%;top:40%;font:42px var(--pixel);color:#e2faff;text-shadow:0 0 18px var(--cyan)}
.art-motion{background:radial-gradient(ellipse at 76% 16%,#b6a7ff 0,transparent 32%),radial-gradient(ellipse at 18% 72%,#64dce5 0,transparent 36%),linear-gradient(120deg,#263c8c,#7893ed 50%,#b4c8f5)}
.art-motion:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(110deg,transparent 49.4%,rgba(13,27,72,.35) 50%,transparent 50.6%),linear-gradient(20deg,transparent 49.5%,rgba(13,27,72,.24) 50%,transparent 50.5%)}
.motion-head{position:absolute;z-index:2;left:35%;top:20%;width:32%;aspect-ratio:.86;background:radial-gradient(circle at 28% 22%,#e7faff,#70dce9 36%,#6170d6 70%,#2b316d);border-radius:48% 50% 42% 40%;transform:rotate(20deg);box-shadow:22px 18px 0 -3px #1c285f,inset -14px -9px 18px rgba(6,15,52,.38)}
.motion-head:before{content:"";position:absolute;left:10%;top:30%;width:75%;height:15%;background:#c8c2ff;border-radius:100%;transform:rotate(-12deg)}
.motion-head:after{content:"";position:absolute;left:48%;top:60%;width:18%;height:7%;background:#101b43;border-radius:100%}
.motion-lines{position:absolute;z-index:2;inset:18% 8%;border:2px solid rgba(235,248,255,.85);border-radius:50%;transform:rotate(-35deg) scaleY(.5);box-shadow:0 0 22px rgba(130,230,245,.35)}
.motion-lines:before,.motion-lines:after{content:"";position:absolute;inset:-14% 10%;border:1px solid rgba(235,248,255,.76);border-radius:50%;transform:rotate(18deg)}.motion-lines:after{inset:-26% 20%;transform:rotate(-15deg)}
.motion-type{position:absolute;z-index:3;right:7%;bottom:8%;font:clamp(13px,2vw,24px) var(--pixel);line-height:1.55;text-align:right;color:#fff;transform:rotate(-7deg);text-shadow:0 3px 12px #273d8c}
.art-oceans{background:radial-gradient(ellipse at 70% 22%,rgba(112,227,239,.28),transparent 25%),linear-gradient(160deg,#101b48 0%,#243c83 48%,#6379c4 66%,#8ed9e5 67%,#182852 68%)}
.art-oceans:after{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(189,227,255,.18) 31px,transparent 32px);transform:skewY(-9deg) scale(1.1)}
.ocean-sun{position:absolute;z-index:2;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 28% 24%,#effdff,#90e7eb 28%,#8b88eb 63%,#4c55a1);top:16%;right:15%;box-shadow:0 0 0 18px rgba(116,229,238,.12),0 0 0 36px rgba(167,139,250,.1),inset -15px -18px 25px rgba(19,30,81,.45)}
.ocean-ship{position:absolute;z-index:2;width:45%;height:15%;background:linear-gradient(90deg,#09132d,#61709e 55%,#0b1532);top:53%;left:20%;clip-path:polygon(0 0,100% 0,77% 70%,18% 100%);transform:rotate(-7deg);filter:drop-shadow(0 14px 8px rgba(3,9,27,.35))}
.ocean-ship:after{content:"";position:absolute;width:4px;height:100px;background:#d7f7ff;left:50%;top:-95px}
.ocean-type{position:absolute;z-index:3;left:7%;bottom:7%;font-family:var(--gothic);font-size:clamp(44px,6vw,78px);font-weight:700;line-height:.7;letter-spacing:-.02em;color:#f0f5ff;text-shadow:0 4px 18px #111a48}
.art-story{background:radial-gradient(ellipse at 78% 20%,#c3baff,transparent 33%),linear-gradient(135deg,#b6d7f4,#e4edff 55%,#8fd6e4);display:flex;gap:1.5%;padding:8% 5%;background-image:linear-gradient(rgba(35,53,109,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(35,53,109,.13) 1px,transparent 1px),linear-gradient(135deg,#b6d7f4,#e4edff 55%,#8fd6e4);background-size:25px 25px,25px 25px,cover}
.story-panel{height:65%;width:31%;margin-top:4%;border:2px solid #26396e;position:relative;background:#718ae0;box-shadow:8px 12px 0 rgba(42,61,128,.16)}
.panel-a{transform:rotate(-4deg);background:linear-gradient(160deg,#91e1ec 0 45%,#7378d9 45% 70%,#182957 70%)}.panel-b{transform:rotate(3deg);background:linear-gradient(20deg,#c3baff 0 35%,#192b61 35% 38%,#82dce9 38% 70%,#647be0 70%)}.panel-c{transform:rotate(-2deg);background:linear-gradient(160deg,#182957 0 30%,#7e8ae6 30% 60%,#8fe0e7 60%)}
.story-panel:after{content:"";position:absolute;left:35%;top:20%;width:35%;aspect-ratio:1;border:2px solid #15234f;border-radius:50%;background:rgba(224,244,255,.55);box-shadow:0 0 18px rgba(193,249,255,.35)}
.story-type{position:absolute;z-index:3;bottom:9%;left:6%;font:8px var(--pixel);letter-spacing:.08em;background:#101d45;color:#eaf5ff;padding:10px}
.art-worlds{background:radial-gradient(ellipse at 78% 28%,#a5a4f1 0,transparent 31%),radial-gradient(ellipse at 15% 78%,#6ce1e2 0,transparent 34%),linear-gradient(125deg,#17285f,#7187d5 52%,#c4b9f5);background-size:cover}
.art-worlds:after{content:"";position:absolute;inset:0;z-index:0;background:repeating-linear-gradient(45deg,transparent 0 20px,rgba(233,246,255,.25) 21px 22px);mix-blend-mode:screen}
.world-eye{position:absolute;z-index:2;top:14%;right:12%;width:52%;aspect-ratio:1.4;border-radius:100% 0 100% 0;background:linear-gradient(135deg,#e5fbff,#7de1ec 38%,#6a73d9 75%);transform:rotate(45deg);border:2px solid #24346f;box-shadow:0 12px 24px rgba(10,17,57,.3)}
.world-eye:before{content:"";position:absolute;inset:24%;background:radial-gradient(circle at 28% 28%,#edfaff,#8ca4f2 55%,#283b81);border-radius:50%;border:2px solid #24346f}.world-eye:after{content:"";position:absolute;inset:39%;background:#0b1535;border-radius:50%;box-shadow:0 0 18px #8ef1ee}
.world-grid{position:absolute;z-index:2;left:8%;bottom:7%;width:35%;height:40%;border:1px solid #e5edff;transform:skewY(-20deg);background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(225,244,255,.65) 13px 14px),repeating-linear-gradient(90deg,transparent 0 12px,rgba(225,244,255,.65) 13px 14px);opacity:.66}
.world-type{position:absolute;z-index:3;top:15%;left:8%;font-family:var(--y2k);font-size:clamp(16px,3vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.08em;color:#f1f5ff;text-shadow:0 3px 16px #1d2d73}
.project-meta{display:flex;justify-content:space-between;align-items:start;padding-top:15px}.project-type{font-size:8px;color:#55658e;margin:0 0 8px}.project-meta h3{font-size:clamp(20px,2.4vw,31px);letter-spacing:-.055em;line-height:1.05;margin:0;font-weight:600;color:#13234f}.arrow{font-size:24px;transition:transform .2s;color:#445bb5}
.replace-note{margin:45px 0 0;color:#4b5e8b;font-size:9px}.replace-note span{color:#5b6ed4;font-size:16px;vertical-align:middle;margin-right:6px}
.manifesto{padding:100px 4vw 35px;background:radial-gradient(ellipse at 80% 40%,rgba(167,139,250,.8),transparent 32%),radial-gradient(ellipse at 20% 88%,rgba(116,229,238,.65),transparent 37%),linear-gradient(120deg,#233d86,#697de0 54%,#a2b9ec);color:#101b42;position:relative;overflow:hidden}
.manifesto:after{content:"";position:absolute;right:7%;top:12%;width:190px;height:190px;border:1px solid rgba(16,27,66,.35);border-radius:50%;box-shadow:0 0 0 14px rgba(235,244,255,.1),0 0 0 28px rgba(235,244,255,.08);pointer-events:none}
.manifesto>*{position:relative;z-index:1}.manifesto .eyebrow{color:#20366f}
.manifesto-text{font-family:var(--y2k);font-size:clamp(30px,6.4vw,84px);line-height:1.08;letter-spacing:-.09em;max-width:1120px;margin:50px 0 90px;font-weight:500;text-transform:uppercase}
.outlined{font-family:var(--gothic);font-size:1.18em;color:transparent;-webkit-text-stroke:1.3px #101b42;font-style:normal;text-transform:none}.acid{background:#101b42;color:#9beaf1;padding:0 .1em;transform:rotate(-2deg);display:inline-block}
.manifesto-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(16,27,66,.4);padding-top:15px;color:#14285c}
.about-section{padding:110px 4vw 125px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:30px;position:relative;overflow:hidden;background:linear-gradient(115deg,#0b1229,#111c3b 52%,#10152e)}
.about-section:before{content:"";position:absolute;right:-8%;top:-25%;width:48vw;height:48vw;border:1px solid rgba(144,169,255,.14);border-radius:50%;box-shadow:0 0 0 34px rgba(144,169,255,.035),0 0 0 68px rgba(144,169,255,.025),inset 0 0 80px rgba(112,132,255,.08);pointer-events:none}
.about-label{display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:1}.about-label .eyebrow{color:#8196c9}
.about-symbol{font-family:var(--y2k);font-size:clamp(55px,7vw,96px);font-weight:700;letter-spacing:-.13em;color:#d9e6ff;text-shadow:0 0 28px rgba(116,229,238,.24)}.about-symbol span{font-family:var(--pixel);color:var(--cyan);font-size:.32em;vertical-align:top;margin-left:8px}
.about-content{position:relative;z-index:1}.about-content h2{font-family:var(--gothic);font-size:clamp(54px,7.2vw,98px);line-height:.82;letter-spacing:-.035em;font-weight:700;margin:0 0 35px;color:#e6edff}.about-content h2 em{font-family:var(--y2k);font-size:.7em;font-style:normal;font-weight:400;color:var(--cyan);text-transform:uppercase}
.about-copy{max-width:490px;font-size:16px;line-height:1.6;margin:0 0 18px;color:#c1cee9}.about-copy.small{font-size:12px;color:#8396c4}
.skills{display:flex;flex-wrap:wrap;gap:7px;margin-top:30px;max-width:500px}.skills span{border:1px solid rgba(173,198,255,.3);padding:8px 10px;border-radius:1px;color:#cbd9fa;background:rgba(95,122,212,.08);font-size:8px}
.about-decoration{font-family:var(--pixel);font-size:clamp(13px,2.2vw,25px);line-height:1.7;letter-spacing:.02em;font-weight:400;align-self:end;justify-self:end;transform:rotate(8deg);color:var(--violet);text-shadow:0 0 20px rgba(167,139,250,.3)}
.contact-section{background:radial-gradient(ellipse at 72% 35%,rgba(84,104,218,.3),transparent 36%),linear-gradient(125deg,#070c1c,#111a39 58%,#12142f);color:var(--ice);padding:65px 4vw 45px;position:relative;overflow:hidden;min-height:590px}
.contact-section:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background:repeating-linear-gradient(135deg,transparent 0 38px,rgba(116,229,238,.26) 39px 40px,transparent 41px 80px)}
.contact-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.contact-top .eyebrow{color:#9aaddc;margin:0}
.contact-section h2{font-family:var(--y2k);font-size:clamp(57px,10vw,137px);letter-spacing:-.09em;line-height:.88;font-weight:500;margin:85px 0 65px;position:relative;z-index:1;text-transform:uppercase}
.contact-section h2 em{font-family:var(--gothic);font-weight:700;font-style:normal;color:var(--cyan);font-size:1.15em;text-transform:none;text-shadow:0 0 26px rgba(116,229,238,.3)}
.contact-bottom{display:flex;justify-content:space-between;align-items:end;position:relative;z-index:2}
.contact-email{font:clamp(10px,1.4vw,16px) var(--mono);border-bottom:1px solid #9fb4e2;padding-bottom:8px;color:#e7f0ff}.contact-email span{margin-left:20px;color:var(--cyan)}
.social-links{display:flex;gap:18px;color:#c1cee9}.social-links a:hover{color:var(--cyan)}
.contact-stamp{position:absolute;right:8%;top:28%;border:1px solid var(--cyan);color:var(--cyan);border-radius:50%;width:115px;height:115px;display:grid;place-content:center;text-align:center;font:8px var(--pixel);line-height:2;transform:rotate(14deg);box-shadow:0 0 30px rgba(116,229,238,.14),inset 0 0 22px rgba(116,229,238,.08)}
footer{min-height:75px;display:flex;align-items:center;justify-content:space-between;padding:15px 4vw;background:#060a18;color:var(--ice);border-top:1px solid var(--line)}footer .wordmark{font-family:var(--y2k);font-size:14px}footer>span{color:#8193bd}
.project-dialog{width:min(560px,calc(100% - 32px));border:1px solid rgba(173,198,255,.5);padding:36px;background:linear-gradient(135deg,#e8f0ff,#cfdcf6);color:#101b42;box-shadow:12px 12px 0 #647fff}
.project-dialog::backdrop{background:rgba(3,7,19,.82);backdrop-filter:blur(7px)}
.project-dialog .eyebrow{color:#5367aa}.dialog-close{position:absolute;top:15px;right:16px;background:none;border:0;cursor:pointer;color:#273c7e}
.project-dialog h2{font-family:var(--gothic);font-size:clamp(40px,7vw,66px);letter-spacing:-.025em;line-height:.88;margin:0 0 22px}
.project-dialog p:not(.eyebrow){font-size:16px;line-height:1.6;max-width:440px;color:#263962}
.dialog-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(31,53,116,.25);padding-top:20px;margin-top:30px}.dialog-actions a{border-bottom:1px solid;padding-bottom:5px;color:#314ba2}.dialog-actions span{color:#61729d}
@media(min-width:1400px){.hero,.work-section,.manifesto,.about-section,.contact-section{padding-left:max(4vw,calc((100vw - 1400px)/2));padding-right:max(4vw,calc((100vw - 1400px)/2))}}
@media(max-width:700px){
 .topbar{height:62px;padding:0 5vw}.wordmark{font-size:14px}.top-note{display:none}.menu-toggle{display:block;margin-left:auto;margin-right:0;color:var(--cyan)}.nav{display:none;position:absolute;top:61px;left:0;right:0;background:rgba(9,14,32,.97);border-bottom:1px solid var(--line);padding:24px 5vw;flex-direction:column;gap:20px}.nav.open{display:flex}
 .hero{min-height:610px;padding:28px 5vw 25px}.hero h1{font-size:clamp(52px,13.5vw,105px);line-height:.95}.hero h1 span{font-size:1.05em}.hero-sticker{right:3%;top:-2%;width:82px}.hero-bottom{align-items:start;gap:20px;flex-wrap:wrap}.hero-bottom p{width:48%;font-size:12px}.hero-mark{margin-left:auto}.scroll-link{order:3}.shape-two{width:78px;height:78px;right:8%;bottom:20%}
 .work-section{padding:75px 5vw 80px}.section-heading{align-items:start;gap:15px;flex-direction:column;margin-bottom:30px}.section-heading h2{font-size:66px}.section-aside{text-align:left}.filter-row{gap:6px}.filter{font-size:8px;padding:8px 10px}
 .project-grid{grid-template-columns:1fr;gap:35px}.project-card.card-large,.project-card.card-wide{grid-column:auto}.project-image,.card-large .project-image,.card-wide .project-image{height:clamp(300px,95vw,480px)}.project-meta h3{font-size:25px}
 .manifesto{padding:75px 5vw 25px}.manifesto-text{font-size:clamp(29px,9vw,55px);margin:40px 0 65px}.manifesto:after{width:100px;height:100px;right:5%;top:9%}.manifesto-bottom{font-size:8px;gap:20px}
 .about-section{padding:75px 5vw 85px;grid-template-columns:1fr 2fr;gap:15px}.about-label{grid-column:1/-1;flex-direction:row;align-items:start}.about-symbol{font-size:45px}.about-content{grid-column:1/-1}.about-content h2{font-size:clamp(55px,13vw,82px)}.about-decoration{position:absolute;right:5%;bottom:8%;font-size:13px;opacity:.8}
 .contact-section{padding:45px 5vw 35px;min-height:570px}.contact-top{font-size:8px}.contact-section h2{font-size:clamp(48px,12vw,86px);margin:90px 0 55px}.contact-stamp{width:78px;height:78px;font-size:6px;right:7%;top:22%}.contact-bottom{align-items:start;flex-direction:column;gap:35px}.social-links{flex-wrap:wrap;gap:15px;font-size:9px}
 footer{padding:20px 5vw;gap:15px;flex-wrap:wrap;font-size:8px}footer>span{order:3;width:100%}.project-dialog{padding:30px 23px}.dialog-actions{font-size:8px}
}


/* Small graphic accents: pixel fragments and a wireframe-style orbit. */
.hero-location{font:7px var(--pixel);color:var(--cyan);margin-left:8px;white-space:nowrap}
.pixel-cluster{position:absolute;z-index:1;right:28%;bottom:22%;display:grid;grid-template-columns:repeat(3,8px);gap:6px;transform:rotate(18deg);opacity:.72;filter:drop-shadow(0 0 8px rgba(116,229,238,.38))}
.pixel-cluster i{width:8px;height:8px;background:#8be7ed;display:block}
.pixel-cluster i:nth-child(2n){background:#8b9cff}.pixel-cluster i:nth-child(3n){opacity:.28}.pixel-cluster i:nth-child(4),.pixel-cluster i:nth-child(8){opacity:0}
.hero-orbit{position:absolute;z-index:0;right:10%;top:29%;width:290px;height:105px;border:1px solid rgba(163,211,255,.48);border-radius:50%;transform:rotate(-34deg);box-shadow:0 0 18px rgba(116,229,238,.08),inset 0 0 18px rgba(116,229,238,.06);pointer-events:none}
.hero-orbit:before{content:"";position:absolute;inset:14px -12px;border:1px solid rgba(172,158,255,.42);border-radius:50%;transform:rotate(52deg)}
@media(max-width:700px){.hero-location{display:inline-block;font-size:6px;margin-left:0;margin-top:4px}.pixel-cluster{right:31%;bottom:27%;transform:scale(.7) rotate(18deg)}.hero-orbit{width:175px;height:70px;right:5%;top:33%}}

/* Real artwork cover support. */
.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}

/* ==========================================================
   ONLYDROP / V3 — chromatic editorial interface
   Full-screen section navigation, warm/cool color collisions,
   animated graphic ornaments and responsive panel transitions.
   ========================================================== */
:root{
  --night:#101326;--deep:#171b36;--panel:#1d2446;--ice:#f0f2ff;--muted:#a9aecb;
  --line:rgba(194,199,255,.22);--blue:#748cff;--cyan:#76e5e8;--violet:#b59cff;
  --lilac:#d1c4ff;--steel:#8996bd;--coral:#ff745f;--amber:#ffbf68;--pink:#ff67b5;
  --mono:'DM Mono',monospace;--sans:'Space Grotesk',Arial,sans-serif;
}
html,body{width:100%;height:100%;overflow:hidden}
body{display:flex;flex-direction:column;overflow:hidden;background:var(--night)}
.topbar{height:70px;min-height:70px;flex:0 0 70px;border-bottom-color:rgba(207,209,255,.18);background:rgba(15,18,39,.9)}
.top-note{color:#aab3d8}
.nav a.active{color:var(--coral)}
.nav a:after{background:linear-gradient(90deg,var(--cyan),var(--pink),var(--amber))}
.views{position:relative;flex:1 1 auto;min-height:0;height:calc(100dvh - 122px);overflow:hidden;isolation:isolate}
.view-panel{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(5%,0,0) scale(.985);transition:opacity .42s ease,transform .62s cubic-bezier(.2,.75,.2,1),visibility 0s linear .62s;scrollbar-width:thin;scrollbar-color:rgba(139,158,220,.6) transparent}
.view-panel::-webkit-scrollbar{width:7px}.view-panel::-webkit-scrollbar-thumb{background:rgba(139,158,220,.45);border-radius:20px}.view-panel.active{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);z-index:2;transition-delay:0s}
.view-panel.enter-next{animation:panelFromRight .72s cubic-bezier(.16,.8,.2,1) both}
.view-panel.enter-prev{animation:panelFromLeft .72s cubic-bezier(.16,.8,.2,1) both}
@keyframes panelFromRight{0%{opacity:0;transform:translate3d(7%,0,0) scale(.975);filter:blur(7px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes panelFromLeft{0%{opacity:0;transform:translate3d(-7%,0,0) scale(.975);filter:blur(7px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
.bottom-bar{height:52px;min-height:52px;flex:0 0 52px;display:grid;grid-template-columns:88px minmax(100px,1fr) minmax(160px,260px) 88px;gap:18px;align-items:center;padding:0 4vw;background:#090b19;border-top:1px solid rgba(192,198,255,.2);position:relative;z-index:25}
.view-count{display:flex;align-items:center;gap:9px;font:9px var(--mono);color:#a7b1d4}.view-count span:first-child{color:var(--coral)}.view-count i{display:block;width:1px;height:12px;background:rgba(201,207,255,.35)}
.view-progress{height:2px;background:rgba(186,196,255,.16);overflow:hidden}.view-progress span{height:100%;width:25%;display:block;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink),var(--amber));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.view-caption{font:8px var(--mono);letter-spacing:.14em;color:#8995bd;text-align:center}
.step-controls{display:flex;justify-content:flex-end;gap:7px}.step-controls button{width:30px;height:27px;border:1px solid rgba(190,199,255,.3);background:transparent;color:var(--ice);font-size:15px;cursor:pointer;transition:background .2s,color .2s,transform .2s}.step-controls button:hover{background:var(--coral);border-color:var(--coral);color:#18152a;transform:translateY(-2px)}
/* The home view behaves like a cover, not a long-scrolling page. */
.view-panel>.hero{height:100%;min-height:540px;padding:28px 4vw 24px;background:radial-gradient(ellipse at 81% 34%,rgba(255,103,181,.19),transparent 25%),radial-gradient(ellipse at 64% 67%,rgba(255,160,102,.17),transparent 30%),radial-gradient(ellipse at 38% 76%,rgba(83,213,222,.17),transparent 34%),linear-gradient(125deg,#090d20 0%,#151a39 55%,#202044 100%)}
.hero:before{opacity:.52;background:repeating-linear-gradient(135deg,transparent 0 29px,rgba(193,197,255,.12) 30px 31px,transparent 32px 63px),radial-gradient(circle at 60% 40%,rgba(255,180,125,.12),transparent 34%)}
.hero:after{background:conic-gradient(from 35deg,rgba(116,229,238,.12),rgba(108,126,255,.5),rgba(255,105,170,.31),rgba(255,190,102,.4),rgba(116,229,238,.1));filter:blur(2px);opacity:.82;animation:slowSpin 28s linear infinite}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.hero h1{font-size:clamp(58px,10.4vw,153px);text-shadow:0 10px 50px rgba(71,95,206,.2)}
.hero h1 span{color:#f5eaff;text-shadow:0 0 25px rgba(255,105,181,.33)}
.hero h1 em{-webkit-text-stroke:1.5px #8ce9ed;text-shadow:0 0 20px rgba(255,114,95,.25)}
.hero-sticker{right:13%;top:0;filter:drop-shadow(0 15px 28px rgba(0,0,0,.4));animation:float 6.5s ease-in-out infinite,stickerTilt 11s ease-in-out infinite}
@keyframes stickerTilt{0%,100%{rotate:0deg}50%{rotate:-9deg}}
.hero-sticker circle{fill:#ffb96e!important;stroke:#ffe4c3!important}.hero-sticker path{stroke:#281b35!important}
.hero-bottom p{color:#eff0ff}.scroll-link{color:#ffb887;border-color:rgba(255,184,135,.6)}
.hero-mark{color:#f3eaff}.hero-mark span{color:#a9a8cb}
.shape-two{background:radial-gradient(circle at 28% 22%,#fff0d4 0 2%,#ff9b81 18%,#a16dce 43%,#3446a5 73%);box-shadow:inset -14px -20px 30px rgba(3,8,25,.6),0 15px 40px rgba(255,104,151,.3)}
.hero-orbit{border-color:rgba(255,183,139,.55);box-shadow:0 0 22px rgba(255,122,129,.13),inset 0 0 20px rgba(116,229,238,.06)}
.hero-orbit:before{border-color:rgba(117,231,233,.58)}
.pixel-cluster{filter:drop-shadow(0 0 10px rgba(255,118,162,.55))}.pixel-cluster i:nth-child(1),.pixel-cluster i:nth-child(5){background:var(--coral)}.pixel-cluster i:nth-child(2n){background:#9d9bff}.pixel-cluster i:nth-child(3n){background:#ffc17b}
.chromatic-ribbon{position:absolute;z-index:1;right:11%;bottom:14%;width:clamp(150px,22vw,310px);height:clamp(70px,9vw,130px);border-radius:50%;transform:rotate(-24deg) skewX(-18deg);background:linear-gradient(105deg,rgba(91,220,226,.03),rgba(97,124,255,.7) 28%,rgba(255,96,166,.86) 54%,rgba(255,181,100,.83) 73%,rgba(255,181,100,0));filter:blur(1px);opacity:.76;mix-blend-mode:screen;box-shadow:0 0 40px rgba(255,105,166,.25);animation:ribbonDrift 9s ease-in-out infinite alternate;pointer-events:none}
.chromatic-ribbon:before,.chromatic-ribbon:after{content:"";position:absolute;inset:13% 0;border:1px solid rgba(255,223,207,.5);border-radius:50%;transform:rotate(9deg);filter:blur(.4px)}.chromatic-ribbon:after{inset:-12% 9%;border-color:rgba(131,228,241,.45);transform:rotate(-10deg)}
@keyframes ribbonDrift{from{translate:0 0;rotate:-3deg}to{translate:12px -13px;rotate:5deg}}
.hero-crosshair{position:absolute;z-index:3;left:6%;top:43%;font:28px var(--mono);color:var(--coral);opacity:.9;animation:pulseMark 3.8s ease-in-out infinite}.hero-crosshair span{display:block;margin-left:24px;margin-top:-4px;font:7px var(--pixel);color:#9ba8d1}
@keyframes pulseMark{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.hero-coordinate{position:absolute;z-index:2;right:5%;top:18%;font:7px/1.8 var(--pixel);letter-spacing:.04em;color:#aeb7de;text-align:right;transform:rotate(90deg) translateX(100%);transform-origin:right top;opacity:.74}
.hero-coordinate b{color:var(--amber);font-weight:400}
/* Work gallery: icy paper interrupted by warm graphic accents. */
.view-panel>.work-section{min-height:100%;padding:38px 4vw 50px;background:radial-gradient(ellipse at 78% 6%,rgba(255,146,117,.48),transparent 24%),radial-gradient(ellipse at 18% 67%,rgba(123,174,255,.43),transparent 36%),linear-gradient(125deg,#e8eeff 0%,#dfe7fa 34%,#e8e0f3 65%,#f6e5df 100%)}
.work-section:before{opacity:.23;background-image:radial-gradient(#536cbb 1px,transparent 1px),repeating-linear-gradient(135deg,transparent 0 44px,rgba(255,111,117,.16) 45px 46px,transparent 47px 90px);background-size:14px 14px,auto;mask-image:linear-gradient(90deg,black,transparent 85%)}
.work-section:after{content:"";position:absolute;right:-115px;top:28%;width:290px;height:290px;border-radius:50%;border:1px solid rgba(72,79,147,.25);box-shadow:0 0 0 17px rgba(255,255,255,.1),0 0 0 34px rgba(255,104,122,.06),inset -35px -18px 55px rgba(255,119,115,.14);pointer-events:none}
.section-heading{margin-bottom:24px}.section-heading h2{font-size:clamp(54px,6vw,88px)}.section-heading h2 span{color:#d65b63}.section-aside{color:#4f587a}
.eyebrow{color:#7883b0}.filter-row{margin-bottom:20px;gap:7px}.filter{border-color:rgba(35,49,103,.3);background:rgba(248,249,255,.45)}.filter:hover,.filter.active{background:#282750;border-color:#282750;color:#fff}.filter sup{color:#ff9f83}
.project-grid{gap:34px 20px}.project-image{height:clamp(225px,26vw,360px)}.card-large .project-image{height:clamp(270px,35vw,435px)}.card-wide .project-image{height:clamp(230px,29vw,350px)}
.project-open:hover .project-image{transform:translateY(-5px) rotate(-.35deg);filter:saturate(1.24) contrast(1.05)}
.artwork{box-shadow:0 12px 32px rgba(34,52,111,.13),inset 0 0 55px rgba(255,255,255,.12)}
.art-tag{background:rgba(14,17,43,.83);border-color:rgba(255,192,151,.55);color:#ffe4d2}
.art-number{color:#ed6b67;text-shadow:0 1px rgba(255,255,255,.75)}
.art-inara{background:radial-gradient(ellipse at 75% 21%,#ffbc91 0 5%,transparent 25%),radial-gradient(ellipse at 25% 78%,#5ce0dc 0,transparent 36%),linear-gradient(128deg,#263a88 0%,#6879db 35%,#d18ab0 59%,#345d92 100%)}
.art-notes{background:radial-gradient(circle at 70% 28%,#ff9f85 0 4%,transparent 24%),linear-gradient(135deg,#a9c7ee,#b7a9e9 48%,#f1b4ad)}
.art-motion{background:radial-gradient(ellipse at 70% 75%,#ffb87a,transparent 33%),linear-gradient(125deg,#1a295c,#5f70c8 55%,#da7fa5)}
.art-oceans{background:radial-gradient(circle at 68% 28%,#ffe1a8 0 9%,transparent 10%),linear-gradient(155deg,#273b83,#639ab9 48%,#e58a83)}
.art-story{background:linear-gradient(120deg,#f6c0ac,#a5c4e5 44%,#9c8fce 78%,#f5c68d)}
.art-worlds{background:radial-gradient(circle at 72% 40%,#ff8e9d,transparent 23%),linear-gradient(130deg,#21366d,#6353a2 49%,#d58e90)}
.work-quote{margin:26px 0 8px;min-height:74px;padding:13px 20px;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden;background:linear-gradient(100deg,rgba(27,39,85,.94),rgba(74,61,117,.94) 58%,rgba(173,83,95,.95));color:#f0eeff;box-shadow:8px 8px 0 rgba(55,62,126,.12)}
.work-quote:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(255,255,255,.08) 12px,transparent 13px 24px);opacity:.5;pointer-events:none}
.work-quote p{margin:0;font:clamp(11px,1.5vw,17px) var(--y2k);letter-spacing:.03em;position:relative;z-index:1}.work-quote em{font:700 1.45em var(--gothic);color:var(--amber)}.quote-index{margin-left:auto;font:7px var(--pixel);color:#ffc2b4;position:relative;z-index:1}.quote-orb{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:radial-gradient(circle at 28% 22%,#fff1d8,#ff9c8b 18%,#a17de4 47%,#4e6ac2 75%);box-shadow:inset -5px -7px 9px rgba(15,17,49,.45),0 0 18px rgba(255,139,139,.35);animation:slowSpin 13s linear infinite}
.replace-note{padding-top:8px}
/* About and contact become independent animated scenes. */
.view-panel>.about-section{min-height:100%;padding:55px 4vw 60px;grid-template-columns:1fr 2fr .7fr;align-items:center;background:radial-gradient(ellipse at 15% 75%,rgba(91,221,226,.15),transparent 34%),radial-gradient(ellipse at 86% 23%,rgba(255,116,95,.19),transparent 28%),linear-gradient(120deg,#11162f,#1a2043 55%,#262044)}
.about-section:before{right:-7%;top:-22%;width:43vw;height:43vw;border-color:rgba(255,177,149,.2);box-shadow:0 0 0 34px rgba(144,169,255,.04),0 0 0 68px rgba(255,123,127,.035),inset 0 0 80px rgba(255,121,142,.08)}
.about-content h2{font-size:clamp(50px,6.2vw,88px)}.about-content h2 em{color:#ffae9c}.about-label .eyebrow{color:#ffbd9b}.about-symbol{color:#f3eaff;text-shadow:0 0 28px rgba(255,105,181,.3)}.about-symbol span{color:var(--amber)}.about-copy{color:#d5d8f2}.about-copy.small{color:#a7aed1}.skills span{border-color:rgba(255,184,149,.33);background:rgba(255,111,129,.07);color:#e7e3ff}.about-decoration{color:#ff9c91;text-shadow:0 0 20px rgba(255,139,127,.35)}
.view-panel>.contact-section{min-height:100%;padding:42px 4vw 42px;background:radial-gradient(ellipse at 78% 36%,rgba(255,100,154,.3),transparent 32%),radial-gradient(ellipse at 25% 88%,rgba(98,216,223,.17),transparent 34%),linear-gradient(125deg,#0a0e21,#171b3b 58%,#292043)}
.contact-section:before{opacity:.28;background:repeating-linear-gradient(135deg,transparent 0 31px,rgba(255,174,140,.23) 32px 33px,transparent 34px 66px),radial-gradient(circle at 75% 40%,rgba(255,110,160,.18),transparent 24%)}
.contact-section h2{font-size:clamp(58px,9.2vw,125px);margin:clamp(35px,7vh,75px) 0 clamp(35px,7vh,72px)}.contact-section h2 em{color:#ffae8b;text-shadow:0 0 25px rgba(255,105,146,.32)}
.contact-stamp{border-color:var(--amber);color:var(--amber);box-shadow:0 0 30px rgba(255,191,104,.17),inset 0 0 22px rgba(255,191,104,.1);animation:float 6s ease-in-out infinite}
.contact-email{border-color:rgba(255,174,139,.6)}.contact-email span{color:var(--amber)}.social-links a:hover{color:var(--coral)}
/* Motion accents throughout the interface. */
.project-card{animation:cardReveal .7s both;animation-delay:calc(var(--card-index,0) * 65ms)}
.project-card:nth-child(1){--card-index:0}.project-card:nth-child(2){--card-index:1}.project-card:nth-child(3){--card-index:2}.project-card:nth-child(4){--card-index:3}.project-card:nth-child(5){--card-index:4}.project-card:nth-child(6){--card-index:5}
@keyframes cardReveal{from{opacity:0;transform:translateY(22px) rotate(.5deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
/* Keep dialog above all panels and echo the warm/cool palette. */
.project-dialog{box-shadow:10px 10px 0 #f27678;border-color:rgba(112,99,174,.5);background:linear-gradient(135deg,#f1efff,#d7dff7 72%,#f8d9cc)}.project-dialog .eyebrow{color:#a9586a}.dialog-close{color:#873f67}
@media(max-width:700px){
  .topbar{height:62px;min-height:62px;flex-basis:62px;padding:0 5vw}.views{height:calc(100dvh - 112px)}
  .view-panel{transform:translate3d(4%,0,0) scale(.99)}
  .view-panel>.hero{min-height:520px;padding:24px 5vw 20px}.hero h1{font-size:clamp(51px,12.5vw,94px)}.hero-sticker{right:4%;top:3%;width:76px}.hero-coordinate{display:none}.hero-crosshair{left:4%;top:49%;font-size:20px}.chromatic-ribbon{right:4%;bottom:16%;width:180px;height:75px}.hero-bottom p{width:47%}
  .view-panel>.work-section{padding:28px 5vw 38px}.section-heading{margin-bottom:22px}.project-grid{gap:27px 14px}.project-image,.card-large .project-image,.card-wide .project-image{height:clamp(240px,72vw,390px)}.work-section:after{width:150px;height:150px;right:-90px;top:45%}.work-quote{gap:10px;padding:12px}.quote-orb{width:27px;height:27px;flex-basis:27px}.work-quote p{font-size:10px}.quote-index{font-size:6px}
  .view-panel>.about-section{padding:36px 5vw 45px;grid-template-columns:1fr;gap:26px;align-content:center}.about-label{grid-column:auto;flex-direction:row;align-items:center}.about-symbol{font-size:42px}.about-content{grid-column:auto}.about-content h2{font-size:clamp(48px,12vw,78px);margin-bottom:25px}.about-decoration{right:6%;bottom:5%;font-size:10px}.about-section:after{width:70vw;height:70vw;left:20%;bottom:-20%}
  .view-panel>.contact-section{padding:32px 5vw 30px;display:flex;flex-direction:column;justify-content:center}.contact-section h2{font-size:clamp(48px,11vw,82px);margin:62px 0 58px}.contact-stamp{width:72px;height:72px;font-size:6px;right:8%;top:23%}.contact-bottom{gap:30px}.contact-top{font-size:8px}
  .bottom-bar{height:50px;min-height:50px;flex-basis:50px;padding:0 5vw;grid-template-columns:55px minmax(40px,1fr) 78px;gap:11px}.view-caption{display:none}.step-controls button{width:29px;height:27px}
  .menu-toggle{margin-left:auto;margin-right:0}.nav{top:61px}
}
@media(max-height:650px) and (min-width:701px){.view-panel>.hero{min-height:480px;padding-top:18px;padding-bottom:17px}.hero-title-wrap{padding:20px 0}.hero h1{font-size:clamp(58px,9vw,120px)}.view-panel>.about-section{padding-top:28px;padding-bottom:28px}.about-content h2{font-size:clamp(45px,5vw,68px);margin-bottom:20px}.contact-section h2{margin:35px 0}.view-panel>.work-section{padding-top:24px}}


/* ==========================================================
   ONLYDROP / V4 — full-screen visual index + discipline pages
   ========================================================== */
html,body{width:100%;height:100%;overflow:hidden}
body{display:flex;flex-direction:column;overflow:hidden;background:var(--night)}
.topbar{height:70px;min-height:70px;flex:0 0 70px;padding:0 4vw;background:rgba(12,15,36,.94);border-bottom:1px solid rgba(205,207,255,.2)}
.topbar .wordmark{font-size:16px}
.top-note{color:#aeb6d9}
.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:9px;letter-spacing:.15em;color:#c8cbea}
.nav a.active{color:var(--coral)}
.nav a:after{background:linear-gradient(90deg,var(--cyan),var(--pink),var(--amber))}
.menu-toggle{display:none}
.views{position:relative;flex:1 1 auto;min-height:0;height:calc(100dvh - 70px);overflow:hidden;isolation:isolate}
.view-panel{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(4%,0,0) scale(.99);transition:opacity .38s ease,transform .55s cubic-bezier(.2,.75,.2,1),visibility 0s linear .55s;scrollbar-width:thin;scrollbar-color:rgba(139,158,220,.55) transparent}
.view-panel::-webkit-scrollbar{width:7px}.view-panel::-webkit-scrollbar-thumb{background:rgba(139,158,220,.45);border-radius:20px}
.view-panel.active{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0) scale(1);z-index:2;transition-delay:0s}
.view-panel.enter-next{animation:panelFromRight .65s cubic-bezier(.16,.8,.2,1) both}
.view-panel.enter-prev{animation:panelFromLeft .65s cubic-bezier(.16,.8,.2,1) both}
/* First screen: identity and five large visual category links. */
.index-panel{background:radial-gradient(ellipse at 76% 22%,rgba(255,108,153,.18),transparent 29%),radial-gradient(ellipse at 25% 88%,rgba(72,200,226,.16),transparent 34%),linear-gradient(125deg,#0a0e22 0%,#171b3b 51%,#211d40 100%)}
.index-screen{position:relative;isolation:isolate;min-height:100%;padding:22px 4vw 17px;display:flex;flex-direction:column;gap:clamp(13px,2vh,22px);overflow:hidden}
.index-screen:before{content:"";position:absolute;z-index:-1;inset:0;opacity:.36;background:repeating-linear-gradient(135deg,transparent 0 38px,rgba(185,195,255,.11) 39px 40px,transparent 41px 82px),radial-gradient(circle at 60% 60%,rgba(255,177,130,.12),transparent 33%);mask-image:linear-gradient(120deg,transparent 0%,black 45%,black 85%,transparent 100%);pointer-events:none}
.index-topline,.index-footer,.menu-heading,.index-meta,.index-kicker,.index-alias,.visual-label,.visual-number,.category-info p,.work-topline{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.index-topline{display:flex;justify-content:space-between;align-items:center;color:#929fca;font-size:8px;line-height:1.5}
.index-topline b{color:var(--coral);font-weight:400}
.index-intro{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);align-items:center;gap:3vw;min-height:clamp(130px,21vh,190px);padding:2px 0 10px}
.index-name-block{position:relative;z-index:2}
.index-kicker{margin:0 0 10px;color:#a9b6dc;font-size:8px}
.index-kicker span{margin-left:12px;color:var(--coral)}
.index-intro h1{margin:0;font:500 clamp(48px,7.6vw,104px)/.93 var(--y2k);letter-spacing:-.105em;color:#f2f1ff;text-shadow:0 8px 36px rgba(88,107,217,.22)}
.index-intro h1 span{font-family:var(--gothic);font-size:1.12em;letter-spacing:-.035em;color:#ffb79b;text-shadow:0 0 24px rgba(255,113,161,.18)}
.index-alias{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:8px;color:#c4c9e8}
.index-alias i{font-size:16px;font-style:normal;color:var(--amber)}
.alias-rule{height:1px;width:38px;background:linear-gradient(90deg,var(--cyan),var(--pink),var(--amber))}
.index-description{position:relative;z-index:2;max-width:390px;padding:0 38px 0 0}
.index-description>p{margin:0;color:#d5daf3;font-size:clamp(12px,1.12vw,15px);line-height:1.55;max-width:360px}
.index-meta{display:flex;justify-content:space-between;gap:10px;margin-top:18px;color:#8997c1;font-size:7px}
.index-meta span:last-child{color:#ffab91}
.index-spark{position:absolute;right:7%;top:10%;color:var(--coral);font-size:28px;animation:pulseMark 4s ease-in-out infinite}
.menu-heading{display:flex;align-items:center;justify-content:space-between;color:#98a4cb;font-size:8px;padding-top:2px}
.menu-heading span:last-child{color:#747fa8}.menu-heading i{color:var(--coral);font-style:normal}
.category-menu{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(9px,1.3vw,18px);flex:1;min-height:0;align-items:stretch}
.category-card{display:flex;flex-direction:column;min-width:0;min-height:0;color:#f0efff;border:1px solid rgba(196,198,255,.21);background:rgba(31,35,73,.42);box-shadow:0 13px 33px rgba(0,0,0,.16);overflow:hidden;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .3s}
.category-card:hover{transform:translateY(-7px) rotate(-.45deg);border-color:rgba(255,174,145,.72);background:rgba(48,48,91,.68);box-shadow:0 20px 40px rgba(0,0,0,.27),0 0 26px rgba(255,120,155,.1)}
.category-visual{position:relative;display:block;flex:1 1 auto;min-height:145px;max-height:clamp(145px,22vh,230px);overflow:hidden;isolation:isolate;background:#26315f}
.category-visual:before{content:"";position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(135deg,transparent 0 15px,rgba(255,255,255,.2) 16px,transparent 17px 31px);mix-blend-mode:soft-light;pointer-events:none}
.visual-label,.visual-number{position:absolute;z-index:5;top:11px;font-size:6px;color:rgba(255,255,255,.78)}.visual-label{left:12px}.visual-number{right:12px;color:#ffd1bd}
.category-info{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:72px;padding:12px 13px;background:rgba(13,16,39,.89);border-top:1px solid rgba(220,216,255,.18)}
.category-info h2{font:clamp(11px,1.05vw,15px)/1.2 var(--sans);font-weight:600;margin:0 0 7px;color:#f0efff;letter-spacing:-.02em}
.category-info p{font-size:6px;line-height:1.45;margin:0;color:#a7afd4;letter-spacing:.08em}
.category-arrow{font:18px var(--sans);color:var(--coral);transition:transform .25s}.category-card:hover .category-arrow{transform:translate(3px,-3px)}
/* Illustrated card covers are deliberately CSS-based placeholders. */
.cat-anim2d .category-visual{background:radial-gradient(ellipse at 76% 25%,rgba(255,180,116,.95),transparent 24%),linear-gradient(137deg,#223d84,#8374c9 54%,#de789d)}
.anim2d-silhouette{position:absolute;width:39%;height:64%;left:35%;bottom:-6%;border-radius:48% 47% 12% 18%;background:linear-gradient(120deg,#151b43,#293b72 55%,#171b3b);transform:rotate(-12deg);box-shadow:inset 9px 0 0 rgba(112,213,226,.4),10px 4px 0 rgba(255,177,144,.42)}
.anim2d-silhouette:before{content:"";position:absolute;width:62%;aspect-ratio:1;left:20%;top:-33%;border-radius:45% 52% 45% 48%;background:linear-gradient(145deg,#ffcfb0,#c66e9b 65%,#5557a4);box-shadow:inset -8px -6px 0 rgba(39,43,102,.25)}
.anim2d-silhouette:after{content:"";position:absolute;width:145%;height:9px;left:-43%;top:20%;border-radius:50%;background:linear-gradient(90deg,transparent,#ffb4a3,transparent);transform:rotate(-34deg);filter:blur(2px)}
.visual-motion-lines{position:absolute;left:9%;top:39%;width:35%;height:48%;border-top:1px solid rgba(255,235,217,.75);border-bottom:1px solid rgba(255,235,217,.38);transform:skewY(-32deg)}
.visual-cross{position:absolute;right:12%;bottom:13%;font-size:30px;color:#ffe0bc;text-shadow:0 0 13px #fa8ca9;animation:pulseMark 3s infinite}
.cat-anim3d .category-visual{background:radial-gradient(ellipse at 48% 42%,#7e9ae8 0,transparent 33%),linear-gradient(135deg,#182450,#354d9d 52%,#d07b9c)}
.anim3d-orbit{position:absolute;left:9%;top:36%;width:82%;height:38%;border:1px solid rgba(255,203,177,.8);border-radius:50%;transform:rotate(-27deg);box-shadow:0 0 10px rgba(255,151,157,.28)}
.anim3d-grid{position:absolute;inset:57% -10% -30%;opacity:.5;background:repeating-linear-gradient(90deg,rgba(180,215,255,.42) 0 1px,transparent 1px 17px),repeating-linear-gradient(0deg,rgba(180,215,255,.38) 0 1px,transparent 1px 17px);transform:perspective(85px) rotateX(35deg)}
.cat-art2d .category-visual{background:radial-gradient(circle at 75% 15%,rgba(255,177,123,.9),transparent 25%),linear-gradient(128deg,#1d326a,#876bbd 50%,#d78b9d)}
.art2d-shape{position:absolute;filter:drop-shadow(7px 10px 10px rgba(12,13,40,.3))}.shape-a{width:54%;height:68%;left:19%;top:21%;border-radius:52% 38% 45% 42%;background:linear-gradient(132deg,#8ff0e8,#647bd2 42%,#ef83a6 76%,#ffc17b);transform:rotate(-24deg)}.shape-b{width:28%;height:35%;right:13%;bottom:10%;border:2px solid rgba(255,231,210,.8);border-radius:48% 52% 41% 59%;transform:rotate(28deg)}
.art2d-pixels{position:absolute;right:12%;top:23%;width:52px;height:52px;background:linear-gradient(90deg,transparent 25%,#ffc1a4 25% 50%,transparent 50% 75%,#8cf1e9 75%),linear-gradient(transparent 25%,#a7a4ff 25% 50%,transparent 50% 75%,#ff9a9c 75%);background-size:20px 20px;mix-blend-mode:screen;opacity:.8}
.art2d-type{position:absolute;left:8%;bottom:10%;font:clamp(15px,2vw,25px)/.95 var(--gothic);color:#fff1de;transform:rotate(-8deg);text-shadow:2px 3px 0 #5b4d9c}
.cat-story .category-visual{background:linear-gradient(145deg,#293b78,#807bc4 52%,#e9a28c)}
.story-thumb{position:absolute;top:28%;height:42%;width:29%;border:1px solid rgba(255,239,218,.82);background:linear-gradient(140deg,rgba(255,199,167,.7),rgba(82,116,180,.8));box-shadow:5px 6px 0 rgba(17,22,56,.25)}
.thumb-a{left:8%;transform:rotate(-8deg)}.thumb-b{left:35%;top:25%;background:linear-gradient(140deg,#8ee0df,#5f6fbe 60%,#322f69);transform:rotate(3deg)}.thumb-c{right:8%;transform:rotate(9deg);background:linear-gradient(140deg,#ffd29c,#dd7f9a 55%,#6954a2)}
.story-thumb:after{content:"";position:absolute;left:18%;top:22%;width:60%;height:48%;border:1px solid rgba(255,245,225,.72);border-radius:50% 30% 44% 35%;transform:rotate(-15deg)}
.story-scribble{position:absolute;left:10%;bottom:10%;font:7px var(--pixel);color:#fff1d7;letter-spacing:.1em}
.cat-projects .category-visual{background:radial-gradient(ellipse at 70% 22%,rgba(255,178,117,.8),transparent 25%),linear-gradient(132deg,#192957,#505fa4 54%,#b56e9e)}
.projects-disc{position:absolute;left:28%;top:20%;width:50%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#85e8e3,#8783e9,#ff8eaf,#ffc17c,#85e8e3);box-shadow:inset -13px -13px 22px rgba(17,19,54,.6),0 10px 25px rgba(255,111,155,.22)}
.projects-orbit{position:absolute;left:8%;top:38%;width:84%;height:30%;border:1px solid rgba(255,224,194,.8);border-radius:50%;transform:rotate(29deg)}
.projects-type{position:absolute;left:9%;bottom:11%;font:clamp(13px,1.7vw,22px)/.92 var(--gothic);color:#fff0de;text-shadow:1px 2px #544d9b}
.projects-pixels{position:absolute;right:12%;top:13%;width:38px;height:38px;background:radial-gradient(#ffc49c 2px,transparent 3px);background-size:9px 9px}
.index-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#7f8bb7;font-size:7px;min-height:14px}
.index-footer b{color:var(--coral);font-weight:400}.index-footer a{color:#ffb49a;transition:color .2s}.index-footer a:hover{color:#fff}
/* Category pages: the chosen discipline is shown as its own section. */
.work-panel>.work-section{min-height:100%;padding:28px 4vw 38px;background:radial-gradient(ellipse at 82% 7%,rgba(255,146,117,.42),transparent 23%),radial-gradient(ellipse at 15% 70%,rgba(123,174,255,.33),transparent 37%),linear-gradient(125deg,#e8eeff 0%,#dfe7fa 34%,#e8e0f3 65%,#f6e5df 100%)}
.work-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;font-size:8px;color:#657099}
.back-index{display:inline-flex;align-items:center;gap:8px;color:#bf596d;border-bottom:1px solid rgba(191,89,109,.45);padding-bottom:5px;transition:gap .2s,color .2s}
.back-index:hover{gap:13px;color:#623f83}
.section-heading{align-items:end;margin-bottom:20px}
.section-heading h2{font-size:clamp(45px,6vw,82px);line-height:.98}
.section-heading h2 span{color:#d65b63}
.section-aside{max-width:260px;color:#4f587a;line-height:1.5}
.category-switcher{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;position:relative;z-index:2}
.category-switcher .filter{border:1px solid rgba(35,49,103,.3);background:rgba(248,249,255,.44);color:#333b67;padding:9px 11px;font-size:8px;cursor:pointer;transition:all .2s}
.category-switcher .filter:hover,.category-switcher .filter.active{background:#282750;border-color:#282750;color:#fff}
.category-switcher .filter.active{box-shadow:3px 3px 0 rgba(255,116,95,.6)}
.project-card.hidden{display:none!important}
.project-grid{gap:30px 20px}
.project-image{height:clamp(220px,25vw,340px)}
.card-large .project-image{height:clamp(250px,32vw,420px)}
.art-tag{background:rgba(14,17,43,.83);border-color:rgba(255,192,151,.55);color:#ffe4d2}
.art-number{color:#ed6b67;text-shadow:0 1px rgba(255,255,255,.75)}
.work-quote{margin:30px 0 9px}
/* Supporting sections and clear ways back to the category index. */
.about-back,.contact-back{margin-top:30px;font:8px var(--mono);letter-spacing:.12em}
.contact-back{position:absolute;left:4vw;bottom:20px}
.about-section{min-height:100%;}
.contact-section{min-height:100%;}
@media(max-width:1100px){
  .category-menu{grid-template-columns:repeat(3,minmax(0,1fr));}
  .category-card:nth-child(4),.category-card:nth-child(5){min-height:190px}
  .category-visual{min-height:145px;max-height:190px}
  .index-screen{overflow:visible}
}
@media(max-width:700px){
  .topbar{height:62px;min-height:62px;flex:0 0 62px;padding:0 5vw}
  .views{height:calc(100dvh - 62px)}
  .top-note{display:none}
  .menu-toggle{display:block;margin-left:auto;margin-right:0;color:#eef0ff;border-color:rgba(196,198,255,.35);cursor:pointer}
  .nav{display:none;position:absolute;right:5vw;top:61px;min-width:160px;padding:17px 19px;background:rgba(16,19,43,.98);border:1px solid rgba(196,198,255,.26);box-shadow:0 16px 35px rgba(0,0,0,.4);flex-direction:column;gap:18px;align-items:flex-start}
  .nav.open{display:flex}
  .index-screen{padding:18px 5vw 18px;gap:15px;overflow:visible}
  .index-topline{font-size:6px;gap:15px}.index-topline span:last-child{text-align:right}
  .index-intro{grid-template-columns:1fr;gap:13px;min-height:0;padding:9px 0 4px}
  .index-intro h1{font-size:clamp(48px,13vw,78px)}
  .index-kicker{font-size:7px;margin-bottom:8px}
  .index-alias{font-size:6px;margin-top:8px}
  .index-description{max-width:78%;padding:0}
  .index-description>p{font-size:12px;line-height:1.45}
  .index-meta{font-size:6px;margin-top:9px}
  .menu-heading{font-size:7px}
  .category-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .category-card{min-height:0}
  .category-visual{min-height:138px;max-height:180px}
  .category-info{min-height:62px;padding:9px 9px;gap:5px}
  .category-info h2{font-size:11px;margin-bottom:5px}
  .category-info p{font-size:5px}
  .category-arrow{font-size:15px}
  .index-footer{font-size:6px;flex-wrap:wrap;padding-top:3px}
  .work-panel>.work-section{padding:23px 5vw 35px}
  .work-topline{font-size:7px;margin-bottom:18px}
  .section-heading{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .section-heading h2{font-size:clamp(43px,11vw,66px)}
  .section-aside{max-width:300px;margin:0}
  .category-switcher{gap:6px;margin-bottom:18px}
  .category-switcher .filter{font-size:6px;padding:8px 8px}
  .project-grid{gap:24px 12px}
  .project-image,.card-large .project-image,.card-wide .project-image{height:clamp(190px,56vw,290px)}
  .project-meta h3{font-size:17px}
  .about-section{padding:34px 5vw 42px!important;grid-template-columns:1fr!important;align-content:center;gap:24px}
  .about-label,.about-content{grid-column:auto!important}
  .about-content h2{font-size:clamp(43px,11vw,70px)}
  .about-decoration{right:6%;bottom:7%;font-size:9px}
  .contact-section{padding:28px 5vw 65px!important;justify-content:center}
  .contact-section h2{font-size:clamp(48px,11vw,78px);margin:55px 0 42px}
  .contact-back{left:5vw;bottom:17px}
  .contact-stamp{width:68px;height:68px;font-size:6px;right:8%;top:18%}
}
@media(max-width:390px){
  .category-menu{grid-template-columns:1fr}
  .category-visual{min-height:168px;max-height:190px}
  .category-card{display:grid;grid-template-columns:1fr}
  .index-description{max-width:85%}
}
@media(max-height:680px) and (min-width:701px){
  .index-screen{padding-top:14px;padding-bottom:12px;gap:10px}
  .index-intro{min-height:115px}
  .index-intro h1{font-size:clamp(45px,6vw,80px)}
  .category-visual{min-height:118px;max-height:17vh}
  .category-info{min-height:62px;padding:9px}
}



/* ==========================================================
   ONLYDROP / V5 — smoke, particles, legible display type,
   and cross-fading work previews in the discipline index.
   ========================================================== */
:root {
  --night: #030407;
  --deep: #080b14;
  --panel: #0b1020;
  --ice: #f4f3fb;
  --muted: #a5abc2;
  --line: rgba(193, 201, 232, .19);
  --blue: #718cff;
  --cyan: #7ee6ee;
  --violet: #a78bfa;
  --lilac: #d5ccff;
  --steel: #8998ba;
  --sans: 'Space Grotesk', Arial, sans-serif;
  --display: 'Sora', 'Space Grotesk', Arial, sans-serif;
  --gothic: 'Grenze Gotisch', Georgia, serif;
}
body { background:#030407; }
.topbar { background:rgba(3,4,7,.94); border-bottom-color:rgba(192,199,230,.16); }
.index-panel { background:#030407; isolation:isolate; }
.index-panel::before,
.index-panel::after {
  content:""; position:absolute; z-index:0; pointer-events:none; inset:-22%;
  filter:blur(68px); opacity:.52; transform:translate3d(0,0,0);
}
.index-panel::before {
  background:
    radial-gradient(ellipse 27% 18% at 18% 38%, rgba(93,116,191,.25), transparent 72%),
    radial-gradient(ellipse 25% 20% at 75% 32%, rgba(126,72,130,.23), transparent 72%),
    radial-gradient(ellipse 35% 20% at 53% 85%, rgba(34,126,145,.17), transparent 72%);
  animation: smokeDriftA 24s ease-in-out infinite alternate;
}
.index-panel::after {
  background:
    radial-gradient(ellipse 24% 17% at 58% 22%, rgba(178,92,107,.16), transparent 73%),
    radial-gradient(ellipse 36% 19% at 91% 75%, rgba(62,88,153,.2), transparent 72%),
    radial-gradient(ellipse 27% 18% at 12% 88%, rgba(105,69,133,.19), transparent 72%);
  animation: smokeDriftB 31s ease-in-out infinite alternate;
}
@keyframes smokeDriftA {
  0% { transform:translate(-3%,2%) scale(1) rotate(-4deg); }
  50% { transform:translate(3%,-2%) scale(1.12) rotate(3deg); }
  100% { transform:translate(-1%,4%) scale(1.05) rotate(-2deg); }
}
@keyframes smokeDriftB {
  0% { transform:translate(2%,-3%) scale(1.04) rotate(3deg); }
  50% { transform:translate(-3%,3%) scale(1.15) rotate(-4deg); }
  100% { transform:translate(2%,1%) scale(1.08) rotate(2deg); }
}
.index-screen { z-index:1; background:transparent; }
.index-screen > :not(.particle-canvas) { position:relative; z-index:2; }
.index-screen:before {
  z-index:0; opacity:.16;
  background:repeating-linear-gradient(135deg,transparent 0 52px,rgba(177,190,232,.12) 53px 54px,transparent 55px 108px),
    radial-gradient(circle at 54% 54%,rgba(247,116,153,.11),transparent 39%);
}
.particle-canvas { position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; opacity:.74; }
.index-topline { color:#a6acc3; }
.index-intro h1 {
  font-family:var(--display); font-weight:800; letter-spacing:-.075em;
  color:#faf9ff; text-shadow:0 6px 32px rgba(115,135,224,.23);
}
.index-intro h1 span {
  font-family:var(--display); font-size:1em; font-weight:800; letter-spacing:-.075em;
  color:#f1a2a1; text-shadow:0 0 25px rgba(245,112,146,.2);
}
.index-alias { color:#d7d8e5; }
.index-description>p { color:#e0e2f0; }
.index-spark { text-shadow:0 0 18px rgba(255,118,151,.75); }
.menu-heading { color:#c0c2d4; }
.category-card {
  background:rgba(12,14,24,.76);
  border-color:rgba(197,203,232,.22);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  backdrop-filter:blur(5px);
}
.category-card:hover {
  border-color:rgba(255,161,137,.82);
  background:rgba(20,20,34,.9);
  box-shadow:0 22px 48px rgba(0,0,0,.55),0 0 28px rgba(255,111,151,.14);
}
.category-visual { background-color:#111522; }
.category-info { background:rgba(4,6,12,.94); border-top-color:rgba(210,212,235,.16); }
.category-info h2 { font-family:var(--display); font-size:clamp(12px,1.08vw,16px); font-weight:700; letter-spacing:-.035em; color:#fbfaff; }
.category-info p { color:#aeb4ca; }
.category-arrow { color:#ff9c89; }
.visual-label { color:rgba(255,255,255,.9); text-shadow:0 1px 8px #000; }
.visual-number { color:#ffc0aa; text-shadow:0 1px 8px #000; }
/* Real portfolio images / loops fade over the CSS art placeholders when supplied. */
.category-slides { position:absolute; inset:0; z-index:2; overflow:hidden; }
.category-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.15s cubic-bezier(.2,.65,.3,1); background:#080b14; }
.category-slide.is-active { opacity:1; }
.category-slide img,.category-slide video { width:100%; height:100%; display:block; object-fit:cover; }
.category-visual.has-media { background:#05070c; }
.category-visual.has-media > :not(.category-slides):not(.visual-label):not(.visual-number):not(.visual-slide-counter) { display:none !important; }
.category-visual.has-media::after {
  content:""; position:absolute; z-index:3; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 27%,transparent 68%,rgba(0,0,0,.35));
}
.visual-slide-counter { position:absolute; z-index:5; right:11px; bottom:10px; padding:5px 7px;
  color:#f3f0ff; background:rgba(3,4,9,.72); border:1px solid rgba(255,255,255,.22);
  font:7px var(--mono); letter-spacing:.12em; backdrop-filter:blur(8px);
}
/* Keep key headings and project names highly legible; gothic is now a small accent only. */
.section-heading h2,
.project-meta h3,
.about-content h2,
.contact-section h2,
.project-dialog h2,
.category-info h2 {
  font-family:var(--display); font-weight:700; letter-spacing:-.055em; line-height:1.02;
}
.section-heading h2 { color:#f5f4fc; font-size:clamp(46px,6.1vw,84px); }
.section-heading h2 span { font-family:var(--display); font-weight:700; }
.project-meta h3 { color:#f8f7ff; font-size:clamp(20px,2.35vw,32px); }
.project-type { color:#ffb09c; }
.about-content h2 { line-height:.98; }
.about-content h2 em,.contact-section h2 em { font-family:var(--display); font-weight:700; font-style:normal; color:#ffa68f; text-transform:none; }
.contact-section h2 { font-family:var(--display); letter-spacing:-.065em; line-height:.98; text-transform:none; }
.project-dialog h2 { font-family:var(--display); line-height:1.04; }
/* Gallery panels now retain the dark atmospheric identity; artwork becomes the brightest layer. */
.view-panel>.work-section {
  color:#f3f1fb;
  background:
    radial-gradient(ellipse at 85% 7%,rgba(198,92,120,.17),transparent 26%),
    radial-gradient(ellipse at 10% 79%,rgba(66,137,171,.17),transparent 34%),
    linear-gradient(130deg,#07090f 0%,#101321 52%,#171020 100%);
}
.work-section:before {
  opacity:.13;
  background-image:radial-gradient(rgba(173,183,226,.65) .7px,transparent .9px),
    repeating-linear-gradient(135deg,transparent 0 44px,rgba(255,146,131,.12) 45px 46px,transparent 47px 90px);
  background-size:14px 14px,auto;
}
.work-section:after { border-color:rgba(176,180,224,.16); box-shadow:0 0 0 17px rgba(255,255,255,.025),0 0 0 34px rgba(255,104,122,.035),inset -35px -18px 55px rgba(255,119,115,.06); }
.work-topline { color:#aab0c9; }
.back-index { color:#ffad97; border-bottom-color:rgba(255,173,151,.45); }
.back-index:hover { color:#fff; }
.section-aside { color:#c0c3d5; }
.category-switcher .filter { border-color:rgba(204,208,230,.26); background:rgba(255,255,255,.045); color:#dfe1ee; }
.category-switcher .filter:hover,.category-switcher .filter.active { background:#ece9fa; color:#11121b; border-color:#ece9fa; }
.category-switcher .filter.active { box-shadow:3px 3px 0 rgba(255,116,95,.72); }
.project-meta h3 { color:#f5f3fb; }
.project-type { color:#ffaf98; }
.replace-note { color:#aeb4ca; }
.replace-note span { color:#ffab91; }
.work-quote { background:linear-gradient(100deg,rgba(18,24,47,.96),rgba(55,43,75,.96) 58%,rgba(99,43,64,.95)); }
.project-dialog { color:#181827; }
@media (max-width:1100px) {
  .index-panel::before,.index-panel::after { opacity:.38; }
}
@media (max-width:700px) {
  .index-intro h1 { font-size:clamp(49px,13vw,82px); }
  .category-info h2 { font-size:11px; }
  .section-heading h2 { font-size:clamp(42px,10vw,68px); }
  .project-meta h3 { font-size:18px; }
}



/* ==========================================================
   ONLYDROP / V6 — kinetic index, animated placeholders,
   irregular editorial geometry and cursor parallax.
   ========================================================== */
.index-screen {
  --pointer-x:50%; --pointer-y:48%; --parallax-x:0px; --parallax-y:0px;
  padding-top:clamp(15px,2vh,28px);
  padding-bottom:clamp(12px,1.8vh,22px);
  gap:clamp(10px,1.55vh,18px);
  perspective:1200px;
}
.index-screen::after {
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--pointer-x) var(--pointer-y),rgba(117,151,255,.12),transparent 68%),
             radial-gradient(260px circle at calc(var(--pointer-x) + 18%) calc(var(--pointer-y) - 15%),rgba(255,126,154,.08),transparent 70%);
  mix-blend-mode:screen; transition:opacity .35s ease;
}
.index-topline { position:relative; z-index:3; }
.index-intro { min-height:clamp(116px,18vh,172px); transform:translate3d(calc(var(--parallax-x) * -.35),calc(var(--parallax-y) * -.35),0); transition:transform .22s ease-out; }
.index-intro h1 { font-size:clamp(54px,8.4vw,116px); letter-spacing:-.08em; }
.index-intro h1 span { font-family:var(--display); font-weight:800; }
.index-name-block::after { content:"VISUAL / MOTION / IMAGE"; display:block; position:absolute; top:14%; right:-4.5rem; transform:rotate(-90deg); transform-origin:right center; font:7px var(--mono); letter-spacing:.24em; color:rgba(220,221,244,.47); }
.menu-heading { position:relative; z-index:3; padding-left:2px; }
.category-menu {
  display:grid; grid-template-columns:1.02fr .96fr 1.08fr .97fr 1.12fr;
  gap:clamp(9px,1.2vw,17px); align-items:stretch;
  transform:translate3d(calc(var(--parallax-x) * .22),calc(var(--parallax-y) * .22),0);
  transition:transform .25s ease-out;
}
.category-card {
  --card-rotate-x:0deg; --card-rotate-y:0deg; --card-glow-x:50%; --card-glow-y:50%;
  border:0; background:transparent; overflow:visible; min-height:0;
  transform:perspective(950px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y));
  transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .35s;
  filter:drop-shadow(0 19px 23px rgba(0,0,0,.44));
}
.category-card:nth-child(1) { margin-top:13px; rotate:-1.2deg; }
.category-card:nth-child(2) { margin-top:0; rotate:1.1deg; }
.category-card:nth-child(3) { margin-top:21px; rotate:-.7deg; }
.category-card:nth-child(4) { margin-top:5px; rotate:1.35deg; }
.category-card:nth-child(5) { margin-top:16px; rotate:-1deg; }
.category-card:hover { transform:perspective(950px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateY(-9px) scale(1.025); filter:drop-shadow(0 28px 32px rgba(0,0,0,.54)); }
.category-card::before {
  content:""; position:absolute; z-index:4; pointer-events:none; inset:0;
  background:radial-gradient(170px circle at var(--card-glow-x) var(--card-glow-y),rgba(255,255,255,.22),transparent 72%);
  opacity:0; transition:opacity .3s; mix-blend-mode:screen;
}
.category-card:hover::before { opacity:1; }
.category-visual {
  min-height:clamp(155px,22vh,235px); max-height:none; flex:1 1 auto;
  border:1px solid rgba(230,230,255,.28);
  border-radius:19px 5px 24px 5px;
  box-shadow:inset 0 0 35px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.035);
  transform:translateZ(24px); transition:border-radius .5s,filter .4s;
}
.category-card:nth-child(2) .category-visual { border-radius:46% 9px 18px 7px / 18% 7px 25px 9px; }
.category-card:nth-child(3) .category-visual { border-radius:4px 38px 5px 34px; }
.category-card:nth-child(4) .category-visual { border-radius:30px 5px 38px 5px; }
.category-card:nth-child(5) .category-visual { border-radius:5px 28px 5px 42px; }
.category-card:hover .category-visual { border-radius:7px 40px 8px 32px; filter:saturate(1.2) contrast(1.08); }
.category-visual::before { opacity:.45; mix-blend-mode:overlay; }
.category-visual::after { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; background:linear-gradient(145deg,transparent 35%,rgba(0,0,0,.16)),linear-gradient(25deg,rgba(255,255,255,.09),transparent 36%); }
.category-info {
  margin:0 -5px; min-height:74px; padding:12px 14px 10px;
  border:1px solid rgba(199,204,236,.16); border-top:0;
  border-radius:0 0 15px 15px; background:linear-gradient(115deg,rgba(8,10,18,.94),rgba(27,20,37,.82));
  clip-path:polygon(0 0,100% 0,97% 100%,3% 94%);
}
.category-card:nth-child(odd) .category-info { transform:rotate(-.7deg) translateY(-2px); }
.category-card:nth-child(even) .category-info { transform:rotate(.8deg) translateY(-2px); }
.category-info h2 { font-family:var(--display); font-size:clamp(12px,1.12vw,16px); font-weight:750; letter-spacing:-.045em; }
.category-info p { font-size:6px; letter-spacing:.1em; }
.category-arrow { font-size:22px; }
.category-card:nth-child(1) .category-visual { background:#37244d; }
.category-card:nth-child(2) .category-visual { background:#142f4c; }
.category-card:nth-child(3) .category-visual { background:#482444; }
.category-card:nth-child(4) .category-visual { background:#20394a; }
.category-card:nth-child(5) .category-visual { background:#38243e; }
.category-slides { border-radius:inherit; }
.category-slide { overflow:hidden; background:#080a12; }
.category-slide img,.category-slide video { width:100%; height:100%; object-fit:cover; transform:scale(1.035); filter:saturate(1.05) contrast(1.06); }
.category-slide.is-active img,.category-slide.is-active video { animation:demoImageDrift 6.8s ease-in-out both; }
@keyframes demoImageDrift { 0%{transform:scale(1.035) translate3d(0,0,0)} 50%{transform:scale(1.12) translate3d(-1.3%,.7%,0)} 100%{transform:scale(1.07) translate3d(.7%,-.5%,0)} }
.visual-demo-tag { position:absolute; z-index:6; left:11px; bottom:10px; padding:5px 7px; font:6px var(--mono); letter-spacing:.14em; color:#fff; background:rgba(5,6,12,.68); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(9px); }
.visual-slide-counter { bottom:10px; right:10px; z-index:6; }
.category-visual.has-media > :not(.category-slides):not(.visual-label):not(.visual-number):not(.visual-slide-counter):not(.visual-demo-tag) { display:none!important; }
.category-visual.has-media .category-slides { z-index:1; }
.visual-label,.visual-number { z-index:6; text-shadow:0 2px 8px rgba(0,0,0,.85); }
.index-footer { position:relative; z-index:3; }
.index-footer span:nth-child(2) { display:none; }
/* Atmospheric smoke gets more organic movement and a slightly richer warm/cool split. */
.index-panel::before { opacity:.68; filter:blur(83px) saturate(1.35); }
.index-panel::after { opacity:.6; filter:blur(92px) saturate(1.3); }
.particle-canvas { opacity:.9; mix-blend-mode:screen; }
.grain { opacity:.12; }
.topbar { backdrop-filter:blur(18px); }
/* Mouse-responsive depth on the cover; touch and reduced-motion users get a clean static layout. */
@media (min-width:1101px) and (hover:hover) and (pointer:fine) {
  .index-topline { transform:translate3d(calc(var(--parallax-x) * -.2),0,0); }
  .index-footer { transform:translate3d(calc(var(--parallax-x) * -.18),0,0); }
  .index-screen:after { transition:background-position .12s linear; }
}
@media (max-width:1100px) {
  .category-menu { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
  .category-card:nth-child(n) { margin-top:0; rotate:0deg; }
  .category-visual { min-height:175px; }
}
@media (max-width:700px) {
  .index-screen { padding:18px 5vw 17px; gap:13px; }
  .index-intro { transform:none; }
  .index-name-block::after { display:none; }
  .category-menu { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; transform:none; }
  .category-card:nth-child(n) { margin-top:0; rotate:0deg; }
  .category-card { transform:none; }
  .category-card:hover { transform:translateY(-3px); }
  .category-visual { min-height:150px; }
  .category-info { margin:0; min-height:66px; }
  .visual-demo-tag { font-size:5px; }
}
@media (max-width:390px) {
  .category-menu { grid-template-columns:1fr; }
  .category-visual { min-height:195px; }
}



/* ==========================================================
   ONLYDROP / V7 — always-on motion, visible particle field,
   reliable timed cross-fades, and whole-site parallax.
   FX are ON by default; the header control pauses all motion.
   ========================================================== */
.topbar { gap:clamp(12px,2vw,26px); }
.top-note { margin-left:auto; margin-right:clamp(8px,1.8vw,24px); white-space:nowrap; }
.motion-toggle {
  display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:8px 10px; border:1px solid rgba(151,165,211,.35); border-radius:999px;
  background:rgba(255,255,255,.035); color:#cfd4e9; cursor:pointer;
  font:8px var(--mono); letter-spacing:.13em; line-height:1;
  transition:background .25s,border-color .25s,color .25s,transform .25s;
}
.motion-toggle:hover { transform:translateY(-2px); border-color:rgba(255,163,143,.8); background:rgba(255,130,151,.1); color:#fff; }
.motion-indicator { width:7px; height:7px; border-radius:50%; background:#8af0cf; box-shadow:0 0 10px #8af0cf,0 0 20px rgba(138,240,207,.55); animation:fxPulse 1.8s ease-in-out infinite; }
.motion-toggle[aria-pressed="false"] .motion-indicator { background:#888b9d; box-shadow:none; animation:none; }
@keyframes fxPulse { 0%,100%{opacity:.55;scale:.8} 50%{opacity:1;scale:1.2} }

/* Keep the atmospheric smoke legible on true black and moving all the time. */
.index-panel::before { opacity:.82; filter:blur(58px) saturate(1.55); }
.index-panel::after { opacity:.76; filter:blur(72px) saturate(1.5); }
.index-screen { --pointer-x:50%; --pointer-y:50%; transform-style:preserve-3d; }
.index-screen::after {
  content:""; position:absolute; z-index:0; inset:0; pointer-events:none;
  background:radial-gradient(480px circle at var(--pointer-x) var(--pointer-y),rgba(135,167,255,.15),transparent 70%),
             radial-gradient(320px circle at calc(var(--pointer-x) - 16%) calc(var(--pointer-y) + 14%),rgba(255,113,143,.075),transparent 72%);
  mix-blend-mode:screen; opacity:.95;
}
.particle-canvas { z-index:1; opacity:1; mix-blend-mode:screen; filter:drop-shadow(0 0 4px rgba(121,168,255,.12)); }
.index-screen > :not(.particle-canvas) { z-index:3; }
.index-topline,.menu-heading,.index-footer { transition:translate .3s ease-out; }
@keyframes orbBreathe { from{scale:.94;filter:saturate(1) brightness(.92)} to{scale:1.06;filter:saturate(1.3) brightness(1.2)} }
.index-spark { animation:pulseMark 3.2s ease-in-out infinite, sparkFloat 5s ease-in-out infinite; }
@keyframes sparkFloat { 0%,100%{translate:0 0} 50%{translate:5px -10px} }

/* The slides are layered from the start; no image-load event is required to begin the timer. */
.category-slides { z-index:2; border-radius:inherit; }
.category-slide { position:absolute; inset:0; z-index:0; opacity:0; visibility:hidden; transition:opacity 1.35s cubic-bezier(.22,.7,.2,1),visibility 0s linear 1.4s; }
.category-slide.is-active { z-index:2; opacity:1; visibility:visible; transition:opacity 1.35s cubic-bezier(.22,.7,.2,1),visibility 0s; }
.category-slide img,.category-slide video { width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.04); filter:saturate(1.12) contrast(1.08); }
.category-slide.is-active img,.category-slide.is-active video { animation:slideKenBurns 5.8s ease-in-out both; }
.category-slide.is-broken { display:none; }
@keyframes slideKenBurns { 0%{transform:scale(1.04) translate3d(0,0,0)} 100%{transform:scale(1.15) translate3d(-1.5%,.8%,0)} }
.visual-demo-tag { position:absolute; z-index:7; left:11px; bottom:10px; padding:5px 7px; color:#fff; background:rgba(3,4,9,.76); border:1px solid rgba(255,255,255,.42); backdrop-filter:blur(8px); font:6px var(--mono); letter-spacing:.13em; }
.visual-slide-counter { z-index:7; }
.category-card { animation:cardLevitate 6s ease-in-out infinite; will-change:translate,transform; }
.category-card:nth-child(2) { animation-delay:-1.1s; }
.category-card:nth-child(3) { animation-delay:-2.25s; }
.category-card:nth-child(4) { animation-delay:-3.4s; }
.category-card:nth-child(5) { animation-delay:-4.55s; }
@keyframes cardLevitate { 0%,100%{translate:0 0} 50%{translate:0 -7px} }
.category-visual::before { animation:visualScan 10s linear infinite; }
@keyframes visualScan { 0%{background-position:0 0,0 0;filter:hue-rotate(0deg)} 50%{background-position:30px -22px,0 0;filter:hue-rotate(18deg)} 100%{background-position:0 0,0 0;filter:hue-rotate(0deg)} }
.category-card:hover { z-index:5; }

/* Mouse parallax carries through each tab and its page-specific ornament. */
.view-panel { perspective:1400px; --view-x:0; --view-y:0; }
.view-panel > .work-section,
.view-panel > .about-section,
.view-panel > .contact-section {
  transform:perspective(1400px) rotateY(calc(var(--view-x) * -.24deg)) rotateX(calc(var(--view-y) * .18deg));
  transform-origin:50% 45%; transition:transform .28s ease-out;
}
.work-section { background-image:radial-gradient(460px circle at calc(50% + var(--view-x) * 130px) calc(42% + var(--view-y) * 110px),rgba(255,134,135,.18),transparent 68%),linear-gradient(135deg,#080b12,#151729 52%,#221729); color:#f2f0fa; }
.work-section::before { opacity:.2; background-image:radial-gradient(rgba(180,190,235,.7) .8px,transparent 1px),repeating-linear-gradient(135deg,transparent 0 44px,rgba(255,146,131,.12) 45px 46px,transparent 47px 90px); background-size:14px 14px,auto; }
.work-section::after { animation:decorationOrbit 35s linear infinite; }
@keyframes decorationOrbit { to{transform:rotate(360deg)} }
.about-section { background-image:radial-gradient(430px circle at calc(74% + var(--view-x) * 100px) calc(35% + var(--view-y) * 90px),rgba(255,119,157,.16),transparent 70%),linear-gradient(115deg,#070a12,#11182b 52%,#171326); }
.about-section::after { animation:slowSpin 38s linear infinite; }
.contact-section { background-image:radial-gradient(500px circle at calc(72% + var(--view-x) * 110px) calc(34% + var(--view-y) * 100px),rgba(255,106,151,.2),transparent 70%),linear-gradient(125deg,#05070d,#111a30 58%,#171126); }
.contact-stamp { animation:stampHover 7s ease-in-out infinite; }
@keyframes stampHover { 0%,100%{translate:0 0} 50%{translate:0 -12px} }

/* Small screen: retain ambient animation and readable controls, omit mouse tilt. */
@media(max-width:900px) {
  .top-note { display:none; }
  .motion-toggle { margin-left:auto; margin-right:4px; }
  .topbar { gap:10px; }
}
@media(max-width:700px) {
  .topbar { padding-left:5vw; padding-right:5vw; }
  .motion-toggle { padding:7px 8px; font-size:7px; }
  .motion-indicator { width:6px; height:6px; }
  .category-card { animation-duration:7.5s; }
  .view-panel > .work-section,.view-panel > .about-section,.view-panel > .contact-section { transform:none; }
}
@media(max-width:390px) {
  .topbar .wordmark { font-size:13px; }
  .motion-toggle { padding:6px 7px; gap:5px; }
  .menu-toggle { padding:6px 8px; }
}
.motion-paused .index-panel::before,
.motion-paused .index-panel::after,
.motion-paused .index-spark,
.motion-paused .category-card,
.motion-paused .category-visual::before,
.motion-paused .work-section::after,
.motion-paused .about-section::after,
.motion-paused .contact-stamp,
.motion-paused .motion-indicator { animation-play-state:paused!important; }
.motion-paused .category-slide.is-active img,
.motion-paused .category-slide.is-active video { animation-play-state:paused!important; }
.motion-paused .category-slide { transition:none!important; }
@media(prefers-reduced-motion:reduce) {
  /* Explicit FX control is available; keep only very gentle motion by default. */
  .category-card { animation-duration:14s; }
  .category-slide { transition-duration:2s; }
}


/* ==========================================================
   ONLYDROP / V8 — layered mixed-media collage language.
   Inspired by the supplied reference: painterly overlaps,
   pixel fragments, hand marks, 3D forms, graffiti and sigils.
   ========================================================== */
:root {
  --gothic: 'UnifrakturCook','Grenze Gotisch',Georgia,serif;
  --acid:#b6e27a; --rust:#a9474e; --cream:#e7d7c2; --electric:#28b9e7;
}
/* Keep the interface mostly black; let artworks and collage fragments carry color. */
.topbar { border-bottom-color:rgba(226,220,204,.21); background:rgba(4,5,8,.9); }
.wordmark { text-shadow:0 0 14px rgba(43,174,221,.42); }
.wordmark span { color:#f1a18e; }
.index-panel { background:#050609; }
.index-panel::before { opacity:.9; filter:blur(70px) saturate(1.65); }
.index-panel::after { opacity:.8; filter:blur(88px) saturate(1.5); }
.index-screen { background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.018),transparent 58%); }
.index-screen:before {
  opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath d='M0 40L160 0M0 120L160 80M40 160L120 0' stroke='%23d7d1c5' stroke-opacity='.18' stroke-width='1'/%3E%3Ccircle cx='12' cy='18' r='1.5' fill='%23fff' fill-opacity='.4'/%3E%3C/svg%3E"),radial-gradient(circle at 60% 60%,rgba(255,142,117,.13),transparent 33%);
  background-size:160px 160px,auto; mask-image:linear-gradient(120deg,transparent,black 32%,black 88%,transparent);
}
.index-intro h1 { font-family:var(--display); font-weight:800; letter-spacing:-.09em; }
.index-intro h1 span { font-family:var(--display); color:#f3a28d; text-shadow:3px 4px 0 rgba(115,48,62,.8),0 0 26px rgba(243,162,141,.3); }
.index-kicker,.index-alias,.index-topline,.menu-heading,.index-footer { color:rgba(230,226,214,.76); }
.index-description>p { color:#e7e3dc; }
.index-meta span:last-child,.index-kicker span { color:var(--acid); }
.index-spark { color:#f2e4d3; font-size:40px; }
/* Collage elements live between the animated background and readable controls. */
.visual-language-layer { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; perspective:1200px; }
.collage-deco { position:absolute; display:block; height:auto; object-fit:contain; user-select:none; will-change:transform,filter; }
.deco-brush { width:min(58vw,760px); left:-13%; top:39%; opacity:.38; mix-blend-mode:screen; transform:rotate(-14deg); animation:brushDrift 13s ease-in-out infinite alternate; }
.deco-tribal { width:clamp(170px,21vw,310px); left:-2%; bottom:-11%; opacity:.38; mix-blend-mode:screen; transform:rotate(-12deg); animation:tribalFloat 10s ease-in-out infinite alternate; }
.deco-graffiti { width:clamp(190px,26vw,390px); right:-5%; top:16%; opacity:.36; transform:rotate(12deg); mix-blend-mode:screen; animation:graffitiFloat 12s ease-in-out infinite alternate; }
.deco-pixels { width:clamp(90px,12vw,180px); right:2%; bottom:6%; opacity:.48; transform:rotate(14deg); image-rendering:pixelated; animation:pixelBlink 4.4s steps(2,end) infinite; }
.deco-star { width:clamp(65px,9vw,120px); left:44%; top:15%; opacity:.72; animation:starWander 8s ease-in-out infinite; }
@keyframes brushDrift { from{transform:translate3d(-1%,2%,0) rotate(-14deg) scale(.97)} to{transform:translate3d(4%,-5%,0) rotate(-8deg) scale(1.05)} }
@keyframes tribalFloat { from{transform:translate3d(0,0,0) rotate(-14deg)} to{transform:translate3d(13px,-18px,0) rotate(-7deg)} }
@keyframes graffitiFloat { from{transform:translate3d(0,0,0) rotate(12deg)} to{transform:translate3d(-22px,14px,0) rotate(7deg)} }
@keyframes pixelBlink { 0%,100%{opacity:.35;filter:hue-rotate(0)} 50%{opacity:.7;filter:hue-rotate(38deg)} }
@keyframes starWander { 0%,100%{transform:translate(0,0) rotate(0) scale(.9)} 50%{transform:translate(12px,-18px) rotate(24deg) scale(1.12)} }
@keyframes chromeBob { 0%,100%{transform:translate3d(0,0,0) rotate(0)} 50%{transform:translate3d(10px,-18px,24px) rotate(12deg)} }
/* Menu grid has a poster-like asymmetry rather than five identical columns. */
.category-menu { grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:minmax(132px,1fr) minmax(132px,1fr); gap:clamp(10px,1.25vw,18px); }
.category-card:nth-child(1) { grid-column:span 5; grid-row:1; margin:10px 0 0 0; rotate:-1.3deg; }
.category-card:nth-child(2) { grid-column:span 3; grid-row:1; margin:-5px 0 0 0; rotate:1.6deg; }
.category-card:nth-child(3) { grid-column:span 4; grid-row:1; margin:16px 0 0 0; rotate:-.7deg; }
.category-card:nth-child(4) { grid-column:span 4; grid-row:2; margin:-8px 0 0 2%; rotate:1.1deg; }
.category-card:nth-child(5) { grid-column:span 8; grid-row:2; margin:5px 0 0 0; rotate:-.7deg; }
.category-card { border:0; background:transparent; filter:drop-shadow(0 16px 22px rgba(0,0,0,.58)); }
.category-card::before { inset:-9px; border:1px solid rgba(236,222,208,.2); clip-path:polygon(2% 0,99% 3%,100% 96%,4% 100%); opacity:.7; }
.category-visual { min-height:0; max-height:none; border:1px solid rgba(235,228,216,.24); box-shadow:inset 0 0 35px rgba(0,0,0,.35),0 0 0 4px rgba(255,255,255,.018); }
.category-card:nth-child(1) .category-visual { border-radius:2px 38px 3px 17px; clip-path:polygon(0 4%,96% 0,100% 90%,93% 100%,4% 96%); }
.category-card:nth-child(2) .category-visual { border-radius:48% 5px 9px 34px; clip-path:polygon(7% 0,100% 6%,95% 100%,0 91%); }
.category-card:nth-child(3) .category-visual { border-radius:3px 18px 42px 4px; clip-path:polygon(0 0,100% 4%,94% 100%,5% 93%); }
.category-card:nth-child(4) .category-visual { border-radius:30px 3px 20px 4px; clip-path:polygon(4% 0,100% 4%,96% 100%,0 93%); }
.category-card:nth-child(5) .category-visual { border-radius:5px 34px 4px 32px; clip-path:polygon(0 5%,97% 0,100% 88%,5% 100%); }
.category-info { margin:0 -3px; min-height:61px; padding:10px 15px; border:0; border-bottom:1px solid rgba(237,221,207,.25); border-radius:0; background:linear-gradient(100deg,rgba(6,7,11,.97),rgba(19,18,26,.86)); clip-path:polygon(0 0,100% 0,97% 100%,3% 92%); }
.category-card:nth-child(odd) .category-info { transform:rotate(-.8deg) translateY(-4px); }
.category-card:nth-child(even) .category-info { transform:rotate(.7deg) translateY(-4px); }
.category-info h2 { font-size:clamp(14px,1.25vw,18px); font-weight:800; letter-spacing:-.055em; text-shadow:1px 2px 0 rgba(0,0,0,.65); }
.category-info p { color:#d0bdad; font-size:6px; }
.category-arrow { color:#ff9a83; font-size:25px; text-shadow:0 0 13px rgba(255,145,125,.5); }
.category-card:hover { filter:drop-shadow(0 24px 31px rgba(0,0,0,.72)) drop-shadow(0 0 12px rgba(238,128,108,.18)); }
.category-card:nth-child(1):after,.category-card:nth-child(3):after,.category-card:nth-child(5):after { content:""; position:absolute; z-index:8; right:-8px; top:16%; width:32px; height:76px; background:linear-gradient(180deg,#36c0e8,#1689c9); clip-path:polygon(20% 0,100% 9%,72% 100%,0 85%); opacity:.88; transform:rotate(8deg); pointer-events:none; }
.category-card:nth-child(2):after,.category-card:nth-child(4):after { content:"✳"; position:absolute; z-index:8; right:-13px; top:-17px; color:#f1cdb5; font:32px var(--sans); text-shadow:0 0 16px rgba(255,199,166,.8); pointer-events:none; }
.visual-label { color:#fff4e9; }
.visual-number { color:var(--acid); font-size:7px; }
.visual-demo-tag { border-color:rgba(247,230,215,.54); color:#f7e9db; }
/* Add rough edge, collage cuts and visible color shifts to demo art in the category cards. */
.category-slide img { filter:saturate(1.24) contrast(1.13) brightness(.94); }
.category-slide.is-active img { animation:demoImageDrift 5.6s ease-in-out both, demoHueShift 12s ease-in-out infinite alternate; }
@keyframes demoHueShift { from{filter:saturate(1.18) contrast(1.1) hue-rotate(-7deg)} to{filter:saturate(1.35) contrast(1.16) hue-rotate(9deg)} }
/* Project cards become smaller mixed-media posters, with the image as the main visual. */
.project-image { border-radius:3px 25px 4px 18px; border:1px solid rgba(231,221,206,.28); box-shadow:0 19px 35px rgba(0,0,0,.34); }
.project-card:nth-child(2n) .project-image { clip-path:polygon(0 1%,98% 0,100% 94%,5% 100%); border-radius:0; }
.project-card:nth-child(3n) .project-image { clip-path:polygon(4% 0,100% 5%,96% 100%,0 92%); border-radius:0; }
.project-open:hover .project-image { transform:translateY(-5px) rotate(-.35deg); }
.project-art-media { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.18) contrast(1.12); transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .4s; }
.project-image.has-demo-media:before { z-index:1; opacity:.28; mix-blend-mode:soft-light; }
.project-image.has-demo-media:after { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 28%,transparent 60%,rgba(0,0,0,.55)),linear-gradient(120deg,rgba(39,191,218,.12),transparent 38%,rgba(234,124,110,.15)); pointer-events:none; }
.project-image.has-demo-media > :not(.project-art-media):not(.art-tag):not(.art-number) { opacity:0!important; }
.project-image.has-demo-media .art-tag { z-index:4; color:#f7eadf; border-color:rgba(255,238,220,.48); background:rgba(5,6,10,.72); }
.project-image.has-demo-media .art-number { z-index:4; color:#fff; }
.project-open:hover .project-art-media { transform:scale(1.08) rotate(.6deg); filter:saturate(1.35) contrast(1.15); }
.project-meta { padding:16px 5px 0; }
.project-meta h3 { font-family:var(--display); font-size:clamp(21px,2.4vw,34px); letter-spacing:-.06em; }
/* Section-specific decorative stacks: abstract, not ornamental wallpaper. */
.section-decor { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.section-decor img { position:absolute; height:auto; object-fit:contain; opacity:.25; mix-blend-mode:screen; }
.work-decor img:first-child { width:min(58vw,750px); left:-17%; top:14%; transform:rotate(-19deg); animation:brushDrift 16s ease-in-out infinite alternate; }
.work-decor img:nth-child(2) { width:170px; right:3%; top:12%; opacity:.38; animation:pixelBlink 5s steps(2,end) infinite; }
.about-decor img:first-child { width:clamp(240px,33vw,440px); right:-7%; top:16%; opacity:.2; transform:rotate(-15deg); animation:tribalFloat 13s ease-in-out infinite alternate; }
.about-decor img:nth-child(2) { width:130px; left:9%; bottom:8%; opacity:.55; animation:starWander 7s ease-in-out infinite; }
.contact-decor img:first-child { width:min(58vw,650px); right:-12%; top:22%; opacity:.25; transform:rotate(17deg); animation:graffitiFloat 14s ease-in-out infinite alternate; }
.contact-decor img:nth-child(2) { width:180px; left:3%; bottom:7%; opacity:.22; animation:pixelBlink 4.5s steps(2,end) infinite; }
/* Keep content above decoration layers and maintain readable contrast. */
.work-section>*:not(.section-decor),.about-section>*:not(.section-decor),.contact-section>*:not(.section-decor) { position:relative; z-index:2; }
.work-section .section-decor,.about-section .section-decor,.contact-section .section-decor { z-index:0; }
.work-section { background-image:radial-gradient(ellipse at 17% 20%,rgba(30,164,193,.14),transparent 27%),radial-gradient(ellipse at 86% 72%,rgba(192,76,83,.15),transparent 35%),linear-gradient(135deg,#050609,#11121a 56%,#191018); }
.about-section { background-image:radial-gradient(ellipse at 75% 22%,rgba(31,165,184,.16),transparent 31%),linear-gradient(115deg,#06070a,#12151e 52%,#1b1118); }
.contact-section { background-image:radial-gradient(ellipse at 72% 35%,rgba(183,73,83,.24),transparent 34%),linear-gradient(125deg,#050609,#11131b 60%,#190e16); }
/* Titles use the strongest readable face; blackletter is restricted to tiny flourishes. */
.index-intro h1,.category-info h2,.section-heading h2,.project-meta h3,.about-content h2,.contact-section h2,.project-dialog h2 { font-family:var(--display); font-weight:800; }
/* Mobile: keep the collage layered but reduce overlap and fit the two-row menu. */
@media(max-width:1100px) {
  .category-menu { grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:auto auto; }
  .category-card:nth-child(1) { grid-column:span 3; grid-row:1; }
  .category-card:nth-child(2) { grid-column:span 3; grid-row:1; }
  .category-card:nth-child(3) { grid-column:span 3; grid-row:2; }
  .category-card:nth-child(4) { grid-column:span 3; grid-row:2; }
  .category-card:nth-child(5) { grid-column:span 6; grid-row:3; }
  .category-visual { min-height:150px; }
}
@media(max-width:700px) {
  .visual-language-layer { opacity:.58; }
  .deco-brush { width:100vw; left:-35%; top:48%; opacity:.3; }
  .deco-tribal { width:150px; left:-38px; bottom:-3%; }
  .deco-graffiti { width:190px; right:-75px; top:15%; }
  .deco-pixels { width:82px; right:0; bottom:1%; }
  .deco-star { width:65px; left:80%; top:36%; }
  .category-menu { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto; gap:12px; }
  .category-card:nth-child(1),.category-card:nth-child(2),.category-card:nth-child(3),.category-card:nth-child(4) { grid-column:span 1; grid-row:auto; margin:0; rotate:0deg; }
  .category-card:nth-child(5) { grid-column:span 2; grid-row:auto; margin:0; rotate:0deg; }
  .category-visual { min-height:145px; }
  .category-card:nth-child(n) .category-visual { clip-path:none; border-radius:13px 3px 16px 4px; }
  .category-info { min-height:62px; }
  .section-chrome { width:125px; }
  .project-image,.project-card:nth-child(2n) .project-image,.project-card:nth-child(3n) .project-image { clip-path:none; border-radius:12px 3px 14px 3px; }
}
@media(max-height:740px) and (min-width:701px) {
  .index-intro { min-height:clamp(105px,15vh,145px); }
  .category-menu { grid-template-rows:minmax(108px,1fr) minmax(108px,1fr); }
  .category-visual { min-height:108px; }
}

/* ==========================================================
   ONLYDROP / V9 — technical sci-fi ornaments + genuine 3D
   Decorative language stays outside the artwork windows.
   ========================================================== */
:root{
  --night:#07090d;--deep:#0b1017;--panel:#111923;--ice:#edf1f4;--muted:#aab6c1;
  --line:rgba(166,203,214,.22);--blue:#7b9eb6;--cyan:#83dce6;--violet:#a9a6c9;
  --coral:#d89a83;--amber:#f0c17c;--display:'Sora','Space Grotesk',Arial,sans-serif;
}
.index-panel{background:radial-gradient(ellipse at 72% 24%,rgba(45,120,144,.13),transparent 34%),radial-gradient(ellipse at 15% 80%,rgba(157,87,76,.10),transparent 30%),linear-gradient(128deg,#07090d 0%,#0b1118 55%,#121018 100%)}
.index-screen{background:transparent}
.index-screen:before{opacity:.14;background-image:linear-gradient(rgba(148,199,210,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(148,199,210,.12) 1px,transparent 1px);background-size:74px 74px;mask-image:radial-gradient(ellipse at center,black 20%,transparent 85%)}
/* Vector HUD layer: registration crosses, points, circular radar lines and guide paths. */
.visual-language-layer{z-index:0;opacity:.95;perspective:1200px}
.deco-hud-frame{width:min(88vw,1280px);left:-9%;top:2%;opacity:.30;mix-blend-mode:screen;animation:hudDrift 22s ease-in-out infinite alternate}
.deco-hud-radar{width:clamp(220px,32vw,470px);right:-5%;top:8%;opacity:.27;mix-blend-mode:screen;animation:hudRotate 44s linear infinite}
.deco-hud-cross{width:min(70vw,900px);right:-14%;bottom:-16%;opacity:.34;mix-blend-mode:screen;animation:hudFloat 15s ease-in-out infinite alternate}
.hud-coordinate{position:absolute;color:rgba(174,220,226,.52);font:8px var(--mono);letter-spacing:.2em;writing-mode:vertical-rl;text-transform:uppercase}
.hud-coordinate-a{left:1.8%;top:30%}.hud-coordinate-b{right:1.6%;bottom:23%;transform:rotate(180deg)}
@keyframes hudDrift{from{transform:translate3d(-1.5%,0,0) rotate(-1deg)}to{transform:translate3d(2%,1%,24px) rotate(1deg)}}
@keyframes hudRotate{from{transform:rotate(0deg) translateY(0)}to{transform:rotate(360deg) translateY(-8px)}}
@keyframes hudFloat{from{transform:translate3d(0,0,0) rotate(-2deg)}to{transform:translate3d(-1.5%,-2%,20px) rotate(2deg)}}
.index-topline,.index-intro,.menu-heading,.category-menu,.index-footer{position:relative;z-index:3}
.index-topline{color:#a4b3c2}
.index-intro{grid-template-columns:minmax(0,1.14fr) minmax(210px,.62fr) minmax(150px,.48fr);gap:2.4vw;min-height:clamp(165px,22vh,230px);align-items:center}
.index-name-block{z-index:3}
.index-intro h1{font-family:var(--display);font-size:clamp(48px,6.5vw,91px);font-weight:800;letter-spacing:-.085em;line-height:.9;text-shadow:0 7px 35px rgba(90,164,180,.13)}
.index-intro h1 span{font-family:var(--display);font-weight:800;color:#d9a38f;letter-spacing:-.09em;text-shadow:0 0 26px rgba(216,154,131,.15)}
.index-description{padding-right:0;max-width:380px}
.index-description>p{color:#d6dee2;font-size:clamp(12px,1.05vw,14px)}
.index-meta{color:#81939e}.index-meta span:last-child{color:#dba28f}
.index-3d-stage{position:relative;z-index:4;width:100%;height:clamp(150px,20vh,218px);min-width:145px;justify-self:center;perspective:950px;isolation:isolate;transform:translate3d(calc(var(--parallax-x,0px)*.55),calc(var(--parallax-y,0px)*.55),0);filter:drop-shadow(0 18px 20px rgba(0,0,0,.48))}
.index-3d-stage:before{content:"";position:absolute;inset:9% 6%;border:1px solid rgba(135,211,220,.24);clip-path:polygon(8% 0,100% 0,92% 100%,0 88%);transform:rotate(-8deg);z-index:-1}
.index-3d-stage:after{content:"";position:absolute;inset:2% 16%;border-top:1px dashed rgba(220,168,145,.42);border-bottom:1px dashed rgba(220,168,145,.26);transform:rotate(23deg);pointer-events:none}
#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;cursor:crosshair}
.index-3d-fallback{position:absolute;inset:0;display:grid;place-items:center;perspective:800px;z-index:1;opacity:0;pointer-events:none}
.no-webgl .index-3d-fallback{opacity:1}
.no-webgl #hero3d{opacity:0}
.fallback-poly{width:86px;height:105px;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-28deg);clip-path:polygon(50% 0,91% 19%,100% 64%,53% 100%,5% 76%,0 30%);background:linear-gradient(115deg,#b8cbd0 0 12%,#536d7c 25%,#17232c 58%,#d4a18a 77%,#364b56 100%);box-shadow:0 20px 35px #000;animation:fallbackSpin 12s linear infinite}
.fallback-ring{position:absolute;width:150px;height:58px;border:1px solid rgba(131,220,230,.62);border-radius:50%;transform:rotate(-24deg);animation:fallbackRing 17s linear infinite}
@keyframes fallbackSpin{to{transform:rotateX(340deg) rotateY(332deg)}}@keyframes fallbackRing{to{transform:rotate(336deg)}}
.object-caption,.object-readout,.object-axis{position:absolute;z-index:4;color:rgba(203,224,228,.55);font:7px var(--mono);letter-spacing:.16em;pointer-events:none}
.object-caption{bottom:0;left:4px}.object-readout{right:0;top:12%;line-height:1.8;text-align:right;font-size:6px}.object-axis{font-size:8px;color:#d9a38f}.axis-x{left:12%;top:25%}.axis-y{right:18%;bottom:28%;color:#83dce6}.axis-z{left:20%;bottom:21%;color:#a9a6c9}
.index-spark{color:#e5b18e;right:31%;top:7%;font-size:24px;z-index:4}
/* The 3D discipline card uses a faceted object, not a gradient ball. */
.cat-anim3d .category-visual{background:linear-gradient(135deg,#101d2a,#263b49 58%,#48353a)}
.anim3d-poly{position:absolute;left:39%;top:24%;width:25%;height:55%;background:linear-gradient(125deg,#d4d9d5,#647c88 25%,#172733 62%,#d3a18c 83%);clip-path:polygon(50% 0,100% 27%,79% 84%,42% 100%,0 56%,14% 15%);filter:drop-shadow(12px 18px 9px rgba(0,0,0,.55));transform:rotateY(25deg) rotateX(-12deg);animation:polyFloat 8s ease-in-out infinite}
.anim3d-poly:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 46%,rgba(255,255,255,.32) 47%,transparent 49% 100%);clip-path:polygon(50% 0,100% 27%,42% 100%,0 56%)}
.tile-3d-label{position:absolute;left:11px;bottom:10px;color:rgba(222,234,236,.62);font:7px var(--mono);letter-spacing:.16em}
@keyframes polyFloat{0%,100%{transform:translateY(0) rotateY(24deg) rotateX(-12deg)}50%{transform:translateY(-8px) rotateY(38deg) rotateX(3deg)}}
/* All cover images are intentionally quiet placeholders; decoration belongs to the page chrome. */
.category-slides{border:0;mix-blend-mode:normal}
.category-slide{background:#222831;}
.category-slide img,.category-slide video{filter:none!important;transform:scale(1.005);opacity:.72}
.category-slide.is-active img,.category-slide.is-active video{animation:slotBreath 5.8s ease-in-out both!important}
@keyframes slotBreath{0%,100%{transform:scale(1.005)}50%{transform:scale(1.025)}}
.visual-demo-tag{background:rgba(5,8,11,.67);border-color:rgba(148,204,214,.38);color:rgba(226,238,240,.72);font:6px var(--mono);letter-spacing:.16em}
.visual-slide-counter{color:rgba(226,238,240,.72)}
.category-card{filter:drop-shadow(0 15px 23px rgba(0,0,0,.62))}
.category-card:nth-child(1) .category-visual,.category-card:nth-child(2) .category-visual,.category-card:nth-child(3) .category-visual,.category-card:nth-child(4) .category-visual,.category-card:nth-child(5) .category-visual{clip-path:polygon(0 3%,96% 0,100% 91%,93% 100%,4% 96%);border-radius:3px 21px 4px 13px}
.category-card:nth-child(2) .category-visual{clip-path:polygon(6% 0,100% 6%,94% 100%,0 92%);border-radius:37px 4px 10px 25px}
.category-info{background:linear-gradient(100deg,rgba(6,8,12,.98),rgba(17,22,29,.92));border-bottom:1px solid rgba(136,191,201,.27)}
.category-info h2,.project-meta h3,.section-heading h2,.about-content h2,.contact-section h2,.project-dialog h2{font-family:var(--display)!important;font-weight:750;letter-spacing:-.055em;line-height:1.02}
.category-info p{color:#9daeb5}
.category-arrow{color:#df9e84}
/* Project image wells: no synthetic artwork. Keep a calm dark surface for future real work. */
.project-image,.project-image.has-demo-media{background:#171c23!important;border:1px solid rgba(146,190,199,.27);box-shadow:0 20px 40px rgba(0,0,0,.38);}
.project-art-media{filter:grayscale(.5) brightness(.66) contrast(.92)!important;opacity:.72;transform:none!important}
.project-image.has-demo-media:after{background:linear-gradient(135deg,rgba(131,220,230,.06),transparent 48%,rgba(218,154,131,.08))!important}
.project-image.has-demo-media:before{opacity:.14!important}
.project-image.has-demo-media .art-tag{background:rgba(5,8,11,.8);color:#b5d0d4;border-color:rgba(131,220,230,.35);font-size:7px}
.project-meta h3{color:#eef2f3!important}
.project-type{color:#8eaab0!important}
/* Vector ornament sets for work, about and contact. No fake chrome orb decoration. */
.section-decor{overflow:hidden;pointer-events:none}
.section-decor img{position:absolute;height:auto;object-fit:contain;mix-blend-mode:screen;filter:none}
.work-decor img:first-child{width:min(62vw,820px);right:-14%;left:auto;top:8%;opacity:.2;animation:hudFloat 18s ease-in-out infinite alternate}
.work-decor img:nth-child(2){width:min(52vw,650px);right:-8%;top:auto;bottom:-12%;opacity:.21;animation:hudRotate 75s linear infinite}
.about-decor img:first-child{width:clamp(230px,36vw,490px);right:-6%;top:5%;opacity:.2;animation:hudRotate 60s linear infinite}
.about-decor img:nth-child(2){width:clamp(260px,44vw,570px);left:-12%;bottom:-14%;opacity:.18;animation:hudDrift 24s ease-in-out infinite alternate}
.contact-decor img:first-child{width:min(63vw,850px);right:-18%;top:-6%;opacity:.22;animation:hudDrift 22s ease-in-out infinite alternate}
.contact-decor img:nth-child(2){width:min(46vw,600px);left:-8%;bottom:-12%;opacity:.18;animation:hudRotate 70s linear infinite}
.section-chrome{display:none!important}
/* About portrait frame; the image itself can be replaced with the user's portrait. */
.about-section{display:grid;grid-template-columns:minmax(90px,.48fr) minmax(205px,.9fr) minmax(300px,1.65fr) minmax(90px,.38fr);gap:clamp(18px,2.5vw,38px);align-items:center;padding-top:clamp(52px,7vh,90px);padding-bottom:clamp(54px,7vh,95px);background-image:radial-gradient(ellipse at 75% 22%,rgba(31,165,184,.10),transparent 31%),linear-gradient(115deg,#06080c,#111720 52%,#171218)!important}
.about-portrait{position:relative;z-index:2;width:100%;max-width:370px;margin:0;justify-self:center;transform:rotate(-2deg);filter:drop-shadow(18px 23px 22px rgba(0,0,0,.48));}
.portrait-tech-frame{position:relative;aspect-ratio:0.88;overflow:hidden;clip-path:polygon(7% 0,100% 3%,94% 100%,0 94%);background:#171c24;border:1px solid rgba(131,220,230,.42);}
.portrait-tech-frame:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(168,219,222,.12) 6px,transparent 7px),linear-gradient(130deg,rgba(115,214,225,.1),transparent 40%,rgba(215,150,127,.14));mix-blend-mode:screen}
.portrait-tech-frame:after{content:"";position:absolute;z-index:3;inset:8px;border:1px solid rgba(212,231,231,.28);clip-path:polygon(0 0,88% 0,100% 14%,100% 100%,12% 100%,0 88%);pointer-events:none}
.portrait-tech-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:contrast(1.035) saturate(.94);}
.portrait-cross{position:absolute;z-index:4;color:#9be4eb;text-shadow:0 0 12px rgba(131,220,230,.5);font:18px var(--sans)}
.portrait-cross-a{top:10%;left:8%}.portrait-cross-b{right:8%;bottom:10%;color:#e0a28d}
.portrait-scanline{position:absolute;z-index:3;left:-8%;right:-8%;height:1px;top:32%;background:rgba(174,227,231,.56);box-shadow:0 0 12px rgba(131,220,230,.5);animation:portraitScan 7s ease-in-out infinite alternate}
@keyframes portraitScan{from{transform:translateY(0)}to{transform:translateY(150px)}}
.about-portrait figcaption{display:flex;justify-content:space-between;gap:8px;padding:10px 2px;color:#8ca7ae;font:6px var(--mono);letter-spacing:.12em}
.about-content h2{font-size:clamp(42px,5.4vw,76px)!important;line-height:.98!important;color:#edf1f4}
.about-content h2 em{font-family:var(--display);font-size:1em;color:#dba089;text-transform:none}
.about-label .eyebrow{color:#9bd4dc}
.about-decoration{font:8px var(--mono);letter-spacing:.16em;color:#dba089;line-height:1.8;transform:rotate(90deg);align-self:center;justify-self:center;white-space:nowrap}
.about-section:after{display:none}
/* titles use a highly legible face; gothic is only used in small decorative labels, if any. */
.index-intro h1,.index-intro h1 span,.section-heading h2,.project-meta h3,.about-content h2,.contact-section h2,.project-dialog h2{font-family:var(--display)!important}
.section-heading h2{font-size:clamp(48px,6vw,86px);color:#eff3f4}
.project-dialog h2{font-size:clamp(33px,5vw,54px)}
.contact-section h2{font-size:clamp(54px,8vw,112px);line-height:.95;color:#f0f3f4}
.contact-section h2 em{font-family:var(--display)!important;color:#d99a83}
/* Parallax drift is applied to decoration layers as well as the WebGL object. */
.work-decor,.about-decor,.contact-decor{transform:translate3d(calc(var(--view-x,0)*-9px),calc(var(--view-y,0)*-7px),0);transition:transform .4s ease-out}
.category-card{transform-style:preserve-3d;backface-visibility:hidden}
.category-card:nth-child(odd){animation:cardHoverDrift 8.5s ease-in-out infinite}
.category-card:nth-child(even){animation:cardHoverDrift 9.5s ease-in-out -3s infinite reverse}
@keyframes cardHoverDrift{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* Responsive portrait / 3D stage */
@media(max-width:1100px){
 .index-intro{grid-template-columns:minmax(0,1fr) minmax(190px,.7fr) minmax(130px,.48fr)}
 .about-section{grid-template-columns:minmax(70px,.4fr) minmax(180px,.8fr) minmax(240px,1.55fr)}
 .about-decoration{display:none}
}
@media(max-width:820px){
 .index-intro{grid-template-columns:minmax(0,1fr) minmax(185px,.7fr);min-height:150px}
 .index-3d-stage{position:absolute;right:0;top:-3%;width:clamp(125px,24vw,190px);height:145px;opacity:.78;pointer-events:none}
 .index-description{max-width:300px}
 .index-intro h1{font-size:clamp(43px,8vw,68px)}
 .about-section{grid-template-columns:minmax(145px,.72fr) minmax(0,1.28fr);gap:22px;padding:55px 5vw}
 .about-label{grid-column:1/-1;grid-row:1;flex-direction:row;align-items:center}
 .about-portrait{grid-column:1;grid-row:2;max-width:270px}
 .about-content{grid-column:2;grid-row:2}
}
@media(max-width:560px){
 .index-screen{padding-left:5vw;padding-right:5vw}
 .index-intro{grid-template-columns:1fr;min-height:172px;align-items:start;padding-top:8px}
 .index-intro h1{font-size:clamp(42px,12vw,60px)}
 .index-description{max-width:72%;padding-top:12px}
 .index-description>p{font-size:11px}
 .index-3d-stage{right:-3%;top:3%;width:130px;height:126px;opacity:.7}
 .object-readout,.object-axis{display:none}
 .hud-coordinate{display:none}
 .deco-hud-frame{width:140vw;left:-30%;top:16%;opacity:.19}
 .deco-hud-radar{width:80vw;right:-26%;top:15%;opacity:.21}
 .deco-hud-cross{width:115vw;right:-35%;bottom:-8%;opacity:.22}
 .about-section{display:flex;flex-direction:column;align-items:stretch;gap:24px;padding:45px 6vw 55px}
 .about-label{order:0}.about-portrait{order:1;width:min(70%,270px);align-self:center}
 .about-content{order:2}.about-content h2{font-size:clamp(39px,11vw,60px)!important;margin-bottom:20px}
 .about-portrait figcaption{font-size:5px}
 .about-decoration{display:none}
 .section-heading h2{font-size:clamp(42px,12vw,62px)}
}
@media(prefers-reduced-motion:reduce){
 .deco-hud-frame,.deco-hud-radar,.deco-hud-cross,.about-portrait .portrait-scanline,.category-card:nth-child(odd),.category-card:nth-child(even),.anim3d-poly{animation-duration:24s!important}
}