:root {
  --ink: #121110;
  --ink-soft: #1b1a18;
  --paper: #eceae4;
  --paper-soft: #d8d5cd;
  --orange: #ff5b14;
  --yellow: #ffd335;
  --green: #45c983;
  --line: rgba(18, 17, 16, 0.2);
  --white-line: rgba(255, 255, 255, 0.2);
  --sans: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  --serif: Georgia, "Songti SC", serif;
  --mono: "Courier New", "Microsoft YaHei", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
body.dialog-open { overflow: hidden; }
.pointer-glow { position:fixed;left:var(--pointer-x,-500px);top:var(--pointer-y,-500px);z-index:20;width:420px;height:420px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,91,20,.2),rgba(255,91,20,.07) 35%,transparent 70%);filter:blur(12px);mix-blend-mode:screen;opacity:.7;pointer-events:none;transition:opacity .25s; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
img { max-width: 100%; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 1000; background: var(--orange); color: #fff; padding: .8rem 1rem; text-decoration: none; }
.skip-link:focus { top: 1rem; }
.kicker { margin: 0; font: 700 10px/1.5 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.kicker span { color: var(--orange); }
.section { padding: 150px 6.5vw; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.site-header {
  position: fixed; top: 16px; left: 2vw; right: 2vw; z-index: 50; height: 66px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px 0 10px; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: linear-gradient(180deg,rgba(255,255,255,.13),rgba(22,22,20,.32));
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 14px 38px rgba(0,0,0,.22);
  transition: top .35s ease,height .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.site-header.is-scrolled { top: 10px; height: 60px; background: linear-gradient(180deg,rgba(55,54,50,.68),rgba(14,14,13,.7)); border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 12px 34px rgba(0,0,0,.32); }
.header-left { display: flex; align-items: center; gap: clamp(32px,5vw,80px); }
.designer-tag { display: flex; flex-direction: column; justify-content:center; min-width:118px; min-height:46px; padding:7px 17px; color:var(--ink); text-decoration:none; border:1px solid rgba(255,255,255,.72); border-radius:999px; background:rgba(255,255,255,.92); box-shadow:inset 0 1px 0 #fff,0 5px 18px rgba(0,0,0,.12); }
.designer-tag span { font-size: 15px; font-weight: 800; letter-spacing: .12em; }
.designer-tag small { margin-top: 3px; font: 700 8px var(--mono); letter-spacing: .18em; opacity: .62; }
.site-header nav { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display: flex; gap: clamp(28px,4vw,64px); }
.site-header nav a { color: inherit; text-decoration: none; font: 700 10px var(--mono); letter-spacing: .08em; opacity: .72; transition: opacity .25s, color .25s; }
.site-header nav a:hover { opacity: 1; color: var(--orange); }
.portfolio-logo { display: flex; width: 46px; height: 44px; align-items: center; justify-content: center; color: #fff; text-decoration: none; margin-right:5px; }
.portfolio-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

.hero { min-height: 100svh; background: #090807; color: #fff; position: relative; overflow: hidden; padding: 112px 6.5vw 36px; text-align: center; }
.hero-media { position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,#050505 0%,#090705 56%,#120804 100%); }
.hero-media:before,.hero-media:after{content:"";position:absolute;pointer-events:none;will-change:transform,opacity}
.hero-media:before{left:-25%;right:-25%;bottom:-48%;height:92%;background:radial-gradient(ellipse at 13% 72%,rgba(255,91,20,.92),transparent 36%),radial-gradient(ellipse at 82% 78%,rgba(255,91,20,.74),transparent 38%),radial-gradient(ellipse at 51% 90%,rgba(255,174,117,.47),transparent 43%);filter:blur(58px);opacity:.72;animation:heroLightDrift 9s ease-in-out infinite alternate}
.hero-media:after{width:72vw;height:72vw;min-width:640px;min-height:640px;left:50%;bottom:-60%;border-radius:50%;translate:-50% 0;background:radial-gradient(circle,rgba(255,116,46,.38) 0%,rgba(255,91,20,.2) 28%,transparent 68%);filter:blur(42px);animation:heroLightBreathe 7.5s ease-in-out infinite}
.hero-video { display:none; }
.hero-shade { position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,3,3,.64) 0%,rgba(5,5,5,.18) 48%,rgba(4,3,3,.07) 100%);pointer-events:none; }
.hero:after { content: ""; position: absolute; inset: 0; z-index: 2; background:radial-gradient(ellipse at 50% 64%,transparent 16%,rgba(0,0,0,.08) 56%,rgba(0,0,0,.58) 112%);pointer-events:none; }
.meteor-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.9}
@keyframes heroLightDrift{0%{transform:translate3d(-4%,2%,0) scale(.92);opacity:.55}45%{transform:translate3d(5%,-7%,0) scale(1.08);opacity:.82}100%{transform:translate3d(-1%,-2%,0) scale(1.18);opacity:.66}}@keyframes heroLightBreathe{0%,100%{transform:translate3d(-8%,4%,0) scale(.86);opacity:.38}50%{transform:translate3d(9%,-10%,0) scale(1.16);opacity:.72}}
.hero-layout { position:relative;z-index:3;min-height:calc(100svh - 148px);display:grid;grid-template-rows:auto minmax(270px,1fr) auto;align-items:center;justify-items:center;width:min(1120px,92vw);margin:0 auto; }
.hero-copy { width:min(980px,90vw);position:relative;display:flex;flex-direction:column;align-items:center;margin:0 auto;z-index:4; }
.hero-copy .kicker { color: var(--orange); }
.hero h1 { position:relative;top:7px;white-space:nowrap;font-family:var(--serif);font-size:clamp(45px,5vw,78px);line-height:1.08;letter-spacing:.11em;margin:14px 0 4px;font-weight:500;font-style:italic;color:rgba(255,255,255,.86);background:linear-gradient(110deg,rgba(255,255,255,.48),#fff 34%,rgba(255,164,112,.78) 55%,rgba(255,255,255,.92) 78%,rgba(255,91,20,.48));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:.45px rgba(255,255,255,.42);filter:drop-shadow(0 8px 24px rgba(0,0,0,.7)) drop-shadow(0 0 15px rgba(255,91,20,.17)); }
.hero h1 em { font-family: var(--serif); font-weight: 400; color: var(--paper); }
.hero-intro { font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.7); margin: 0 auto 35px; max-width: 680px; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 27px; }
.particle-record { --record-shift:0px;position:relative;width:min(50.4vw,576px);aspect-ratio:1;margin:-10px auto -16px;z-index:2;cursor:crosshair;outline:none;transform:translateY(var(--record-shift));filter:drop-shadow(0 34px 45px rgba(0,0,0,.55)); }
.particle-record:before,.particle-record:after{content:"";position:absolute;inset:5%;border-radius:50%;pointer-events:none;z-index:-1}.particle-record:before{background:radial-gradient(circle,rgba(255,91,20,.22),rgba(255,91,20,.06) 42%,transparent 70%);filter:blur(22px);animation:recordGlow 4.6s ease-in-out infinite alternate}.particle-record:after{inset:18%;border:1px solid rgba(255,91,20,.22);box-shadow:0 0 55px rgba(255,91,20,.2);animation:recordHalo 5.4s ease-in-out infinite}
.glass-record{position:absolute;inset:5.5%;z-index:1;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.26);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.12) 0 9%,transparent 10% 18%,rgba(255,255,255,.08) 19% 20%,transparent 21% 38%,rgba(255,91,20,.1) 39% 40%,transparent 41% 68%,rgba(255,255,255,.08) 69% 70%,transparent 71%),repeating-radial-gradient(circle at center,rgba(255,255,255,.055) 0 1px,rgba(10,9,8,.02) 2px 5px),conic-gradient(from 30deg,rgba(255,255,255,.21),rgba(255,91,20,.08) 16%,rgba(255,255,255,.02) 31%,rgba(255,255,255,.17) 47%,rgba(255,91,20,.12) 62%,rgba(255,255,255,.025) 78%,rgba(255,255,255,.21));box-shadow:inset 18px 18px 48px rgba(255,255,255,.09),inset -24px -22px 55px rgba(0,0,0,.42),0 0 0 1px rgba(255,91,20,.09),0 30px 70px rgba(0,0,0,.5);backdrop-filter:blur(7px) saturate(1.25);animation:glassRecordTurn 24s linear infinite}
.glass-record:before{content:"";position:absolute;inset:2%;border-radius:50%;background:linear-gradient(112deg,transparent 20%,rgba(255,255,255,.04) 37%,rgba(255,255,255,.36) 48%,rgba(255,91,20,.14) 53%,transparent 68%);filter:blur(6px);animation:glassSheen 5.8s ease-in-out infinite alternate}.glass-record:after{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 36px rgba(255,91,20,.12),inset 0 0 35px rgba(255,255,255,.055)}
.glass-record i{position:absolute;inset:28%;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:radial-gradient(circle at 40% 34%,rgba(255,255,255,.17),rgba(255,91,20,.065) 36%,rgba(0,0,0,.18) 72%);box-shadow:inset 0 0 28px rgba(255,255,255,.08)}.glass-record b{position:absolute;width:42%;height:11%;left:10%;top:19%;border-radius:50%;rotate:-28deg;background:rgba(255,255,255,.14);filter:blur(12px);animation:glassFloat 4.6s ease-in-out infinite alternate}
.particle-record canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;opacity:.58;mix-blend-mode:screen}.particle-record img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;border-radius:50%;opacity:.08;filter:grayscale(1) invert(1);mix-blend-mode:screen;z-index:0}.particle-record.is-ready img{opacity:0}.particle-record.is-static canvas{opacity:.24}.particle-record.is-static img{opacity:.06}.particle-record.is-static .glass-record,.particle-record.is-static .glass-record:before,.particle-record.is-static .glass-record b{animation-play-state:paused}
.record-core{position:absolute;left:50%;top:50%;width:13%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:3;border:1px solid rgba(255,255,255,.42);background:radial-gradient(circle,rgba(255,255,255,.78) 0 8%,transparent 9% 19%,rgba(255,255,255,.14) 20% 52%,rgba(255,91,20,.28) 54%,rgba(8,8,8,.42) 61%);box-shadow:inset 0 0 18px rgba(255,255,255,.12),0 0 28px rgba(255,91,20,.28);backdrop-filter:blur(5px);pointer-events:none}.record-core i{position:absolute;inset:-45%;border:1px solid rgba(255,91,20,.16);border-radius:50%}
.particle-record:focus-visible{border-radius:50%;box-shadow:0 0 0 2px var(--orange)}
.hero-controls{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:28px;padding-bottom:8px}.motion-toggle{display:inline-flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(10,10,10,.45);color:rgba(255,255,255,.72);font:700 9px var(--mono);letter-spacing:.05em;cursor:pointer;backdrop-filter:blur(10px)}.motion-toggle i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)}.motion-toggle[aria-pressed="true"] i{background:#aaa;box-shadow:none}
@keyframes recordGlow{from{transform:translate(-4%,2%) scale(.92);opacity:.55}to{transform:translate(5%,-3%) scale(1.08);opacity:1}}@keyframes recordHalo{0%,100%{transform:scale(.9);opacity:.25}50%{transform:scale(1.18);opacity:.75}}
@keyframes glassRecordTurn{to{transform:rotate(360deg)}}@keyframes glassSheen{0%{transform:translate(-16%,-9%) rotate(-7deg);opacity:.35}100%{transform:translate(16%,10%) rotate(9deg);opacity:.9}}@keyframes glassFloat{to{transform:translate(28%,34%) scale(1.25);opacity:.55}}
.button { display: inline-flex; align-items: center; gap: 24px; padding: 16px 20px; text-decoration: none; font: 700 11px var(--mono); letter-spacing: .08em; }
.button-primary { background: var(--orange); color: #fff; }
.button-primary span { font-size: 18px; transition: transform .25s; }
.button-primary:hover span { transform: translate(3px,3px); }
.text-link { color: rgba(255,255,255,.75); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding: 8px 0; font: 700 10px var(--mono); letter-spacing: .08em; }
.hero-enter { opacity: 0; transform: translateY(24px); animation: heroEnter .8s ease forwards .1s; }
.hero-enter.delay-1 { animation-delay: .22s; }.hero-enter.delay-2 { animation-delay: .38s; }.hero-enter.delay-3 { animation-delay: .55s; }
@keyframes heroEnter { to { opacity: 1; transform: none; } }

.vinyl-stage { position: absolute; width: min(78vw,1120px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; opacity: .46; }
.vinyl { position: absolute; inset: 5%; border-radius: 50%; background: repeating-radial-gradient(circle, #161616 0,#161616 3px,#272522 4px,#10100f 6px); box-shadow: -35px 35px 80px rgba(0,0,0,.55), inset 0 0 70px #000; animation: spin 35s linear infinite; }
.vinyl:before { content: ""; position: absolute; inset: 1.5%; border-radius: 50%; background: conic-gradient(from 20deg,transparent 0 18%,rgba(255,255,255,.2) 20%,transparent 23% 48%,rgba(255,211,53,.1) 50%,transparent 54% 100%); mix-blend-mode: screen; }
.vinyl:after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 10px #171614,0 0 0 11px rgba(255,255,255,.35); }
.vinyl-label { position: absolute; inset: 40%; z-index: 2; border-radius: 50%; background: #20201f; display: grid; place-content: center; text-align: center; color: #fff; }
.vinyl-label i { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); position: absolute; inset: calc(50% - 5px); }
.vinyl-label b { font-size: clamp(18px,2vw,34px); letter-spacing: -.07em; }
.vinyl-label small { margin-top: 8px; font: 700 7px/1.5 var(--mono); letter-spacing: .1em; opacity: .55; }
.vinyl-ring { position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; }.ring-one{inset:17%}.ring-two{inset:23%}.ring-three{inset:29%}
.orbit-dot { position: absolute; z-index: 4; border-radius: 50%; box-shadow: 0 12px 25px rgba(0,0,0,.6); }
.dot-orange { width: 38px; height: 38px; background: var(--orange); left: 3%; top: 36%; }.dot-yellow{width:54px;height:54px;background:var(--yellow);right:4%;bottom:25%}.dot-green{width:25px;height:25px;background:var(--green);left:23%;bottom:4%}
@keyframes spin { to { transform: rotate(360deg); } }
.profile-card { position: absolute; z-index: 5; left: 50%; bottom: 52px; transform: translateX(-50%); width: 340px; display: flex; gap: 15px; align-items: center; padding: 10px; text-align: left; background: rgba(18,17,16,.78); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); }
.portrait { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; background-image: url("2-个人信息.png"); background-size: 512px 288px; background-position: -85px -39px; border: 2px solid var(--orange); }
.profile-card p,.profile-card strong,.profile-card span { display: block; margin: 0; }.profile-card p{font:700 8px var(--mono);letter-spacing:.08em;color:var(--orange)}.profile-card strong{font-size:15px;margin:5px 0}.profile-card span{font-size:10px;color:rgba(255,255,255,.58)}
.scroll-hint { display: none; }
.scroll-hint i { color: var(--orange); font-size: 17px; margin-left: 10px; font-style: normal; }

.brand-strip { height: 74px; background: var(--orange); display: flex; align-items: center; overflow: hidden; }
.brand-strip>span { flex: 0 0 auto; padding: 0 3vw; font: 800 9px var(--mono); letter-spacing: .12em; border-right: 1px solid rgba(0,0,0,.28); }
.brand-marquee { overflow: hidden; display: flex; flex: 1; min-width: 0; }
.brand-track { display: flex; width: max-content; animation: marquee 28s linear infinite; will-change: transform; }
.brand-set { display: flex; flex: none; align-items: center; gap: clamp(28px,3vw,54px); padding-right: clamp(28px,3vw,54px); }
.brand-set span { position: relative; flex: none; white-space: nowrap; font-size: 18px; font-weight: 800; }
.brand-set span:after { content: "·"; position: absolute; left: calc(100% + clamp(14px,1.5vw,27px)); transform: translateX(-50%); }
@keyframes marquee { to { transform: translateX(-50%); } }

.works { position:relative;isolation:isolate;overflow:hidden;color:#f5f5f1;background-color:#070605;background-image:radial-gradient(circle at 88% 12%,rgba(255,91,20,.22),transparent 27%),radial-gradient(circle at 8% 62%,rgba(255,91,20,.14),transparent 31%),linear-gradient(135deg,#050505 0%,#0e0906 48%,#050505 100%); }
.works:before { content:"";position:absolute;z-index:0;width:44vw;height:44vw;min-width:420px;min-height:420px;right:-16vw;top:34%;border-radius:50%;background:rgba(255,91,20,.18);filter:blur(120px);opacity:.65;pointer-events:none;animation:ambientDrift 10s ease-in-out infinite alternate; }
.works>* { position:relative;z-index:1; }
@keyframes ambientDrift { to { transform:translate(-8vw,8vh) scale(1.12);opacity:.42; } }
.works .kicker { color: rgba(255,255,255,.72); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; margin-bottom: 80px; }
.section-heading h2,.experience h2,.contact h2 { font-size: clamp(48px,6vw,96px); line-height: 1.03; letter-spacing: -.07em; margin: 28px 0 0; }
.section-heading h2 em,.experience h2 em { font-family: var(--serif); font-weight: 400; }.contact h2 em{font:inherit;color:inherit}
.filter-bar { border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); display: flex; margin-bottom: 48px; overflow-x: auto; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar button { flex: 1 0 auto; min-width: 130px; border: 0; border-right: 1px solid rgba(255,255,255,.18); padding: 19px 16px; background: transparent; color: rgba(255,255,255,.7); cursor: pointer; font: 800 11px var(--mono); letter-spacing: .04em; transition: background .25s,color .25s; }
.filter-bar button:last-child { border-right: 0; }.filter-bar button:hover{color:var(--orange)}.filter-bar button.is-active{background:var(--orange);color:#fff}.filter-bar sup{color:var(--orange);font-size:8px;margin-left:4px}.filter-bar button.is-active sup{color:#fff}
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.project-card { position: relative; min-width: 0; height:100%; opacity: 1; transform: translateY(0); border: 1px solid #303030; border-radius: 28px; background: linear-gradient(180deg,#111 0%,#0d0d0d 100%); overflow: hidden; transition: opacity .4s, transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .45s; }
.project-card:after { content:""; position:absolute; z-index:0; left:-20%; right:-20%; bottom:-35%; height:55%; background:radial-gradient(circle,rgba(255,91,20,.2),transparent 68%); opacity:0; transform:translateY(30%); transition:opacity .45s,transform .55s; pointer-events:none; }
.project-card.is-filtering { opacity: 0; transform: translateY(18px); }.project-card[hidden]{display:none}
.project-card:hover,.project-card:focus-within { border-color:rgba(255,91,20,.8); box-shadow:0 22px 60px rgba(0,0,0,.48),0 0 34px rgba(255,91,20,.12); transform:perspective(1000px) translateY(-7px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.project-card:hover:after,.project-card:focus-within:after { opacity:1; transform:none; }
.project-button { position:relative;z-index:1;display:flex;flex-direction:column;padding:14px 14px 24px;width:100%;height:100%;border:0;text-align:left;background:none;color:inherit;cursor:pointer; }
.project-media { --mx: 0px; --my: 0px; position: relative; display:block; overflow: hidden; aspect-ratio: 16/9; border-radius:19px; background:#222; }
.project-media img { display:block;width:calc(100% + 20px);height:calc(100% + 20px);margin:-10px;object-fit:cover;transform:translate(var(--mx),var(--my)) scale(1.01);transition:transform .75s cubic-bezier(.2,.8,.2,1),filter .45s; }
.project-media:after { content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.32),transparent 46%);opacity:0;transition:opacity .35s; }
.project-card:hover .project-media img,.project-card:focus-within .project-media img { transform:translate(var(--mx),var(--my)) scale(1.055);filter:saturate(1.08) contrast(1.04); }
.project-card:hover .project-media:after,.project-card:focus-within .project-media:after { opacity:1; }
.project-content { display:flex;flex:1;flex-direction:column;padding:24px 12px 4px; }
.project-index { display:block;margin-bottom:20px;color:var(--orange);font:800 11px var(--mono);letter-spacing:.02em; }
.project-content h3 { margin:0;color:#f7f7f2;font-size:clamp(27px,2.55vw,46px);line-height:1.02;letter-spacing:-.055em; }
.project-role { display:block;margin-top:12px;color:rgba(255,255,255,.5);font-size:13px;font-weight:700; }
.project-summary { display:block;min-height:76px;margin-top:25px;color:rgba(255,255,255,.84);font-size:16px;line-height:1.55; }
.project-extra { display:block;max-height:0;margin-top:0;overflow:hidden;color:rgba(255,255,255,.58);font-size:13px;line-height:1.7;opacity:0;transform:translateY(10px);transition:max-height .5s ease,opacity .35s,transform .45s,margin .45s; }
.project-card:hover .project-extra,.project-card:focus-within .project-extra { max-height:110px;margin-top:18px;opacity:1;transform:none; }
.project-tags { display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:24px; }
.project-tags span { padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.68);font-size:10px;line-height:1; }
.project-view { display:flex;align-items:center;gap:8px;width:max-content;margin-top:28px;color:var(--orange);font:800 11px var(--mono);letter-spacing:.03em; }
.project-view i { font-style:normal;transition:transform .3s; }.project-card:hover .project-view i,.project-card:focus-within .project-view i{transform:translate(4px,-4px)}

.experience { position:relative;isolation:isolate;overflow:hidden;background:#11100f;color:#fff; }
.experience:before { content:"";position:absolute;z-index:0;left:-16vw;top:2%;width:45vw;height:45vw;border-radius:50%;background:rgba(255,91,20,.12);filter:blur(120px);pointer-events:none; }
.experience>* { position:relative;z-index:1; }
.experience-intro { display:block;margin-bottom:72px; }
.experience-intro h2 { margin-top:28px; }
.about-showcase { display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:clamp(42px,6vw,100px);align-items:stretch; }
.about-visual { --tilt-x:0deg;--tilt-y:0deg;position:relative;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:30px;background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(0,0,0,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 80px rgba(0,0,0,.28);transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .22s ease,border-color .3s,box-shadow .3s; }
.about-visual:hover { border-color:rgba(255,91,20,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 80px rgba(0,0,0,.35),0 0 45px rgba(255,91,20,.11); }
.about-visual:after { content:"";position:absolute;left:12%;right:12%;bottom:-18%;height:48%;border-radius:50%;background:var(--orange);filter:blur(70px);opacity:.2; }
.about-orbit { position:absolute;width:270px;aspect-ratio:1;border:1px solid rgba(255,91,20,.18);border-radius:50%; }
.about-orbit:before,.about-orbit:after,.about-orbit i { content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%; }
.about-orbit:before{inset:12%}.about-orbit:after{inset:23%}.about-orbit i:first-child{inset:34%}.about-orbit i:nth-child(2){width:9px;height:9px;left:8%;top:46%;background:var(--orange);border:0;box-shadow:0 0 20px var(--orange)}.about-orbit i:nth-child(3){width:5px;height:5px;right:12%;top:29%;background:#fff;border:0}
.about-photo { position:relative;z-index:2;width:176px;aspect-ratio:1;border-radius:50%;background-image:url("assets/profile-photo.jpg");background-size:cover;background-position:center 47%;border:3px solid var(--orange);box-shadow:0 0 0 12px rgba(255,91,20,.08),0 20px 48px rgba(0,0,0,.42); }
.about-name { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:30px;padding:12px 24px;border-radius:999px;background:var(--orange);color:#fff;box-shadow:0 12px 34px rgba(255,91,20,.24); }
.about-name strong{font-size:17px}.about-name span{margin-top:3px;font:700 8px var(--mono);letter-spacing:.08em}
.about-profile { padding:6px 0; }
.about-profile>.kicker { color:var(--orange); }
.about-profile h3 { margin:18px 0 22px;font-size:clamp(42px,5vw,76px);line-height:1;letter-spacing:-.055em; }
.about-lead,.about-text { max-width:930px;margin:0;color:rgba(255,255,255,.62);font-size:14px;line-height:1.9; }
.about-text { margin-top:8px; }
.about-info { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 50px;margin-top:30px;padding:26px 0;border-top:1px solid var(--white-line);border-bottom:1px solid var(--white-line); }
.about-info span { display:flex;flex-direction:column;gap:6px; }.about-info small,.skills-label{font:700 9px var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.45)}.about-info strong{font-size:13px}
.about-stats { display:flex;gap:clamp(34px,6vw,90px);margin-top:30px; }
.about-stats span { display:flex;flex-direction:column; }.about-stats b{color:var(--orange);font-size:clamp(38px,4vw,62px);line-height:1}.about-stats small{margin-top:8px;font-size:10px;color:rgba(255,255,255,.55)}
.skills-label { margin:30px 0 12px; }
.about-skills { display:flex;flex-wrap:wrap;gap:12px; }.about-skills span{padding:13px 19px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:rgba(255,255,255,.68);font-size:15px;transition:border-color .25s,color .25s,transform .25s}.about-skills span:hover{border-color:var(--orange);color:#fff;transform:translateY(-2px)}
.career { margin-top:100px; }
.career-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:46px;font-weight:800; }.career-heading span{font-size:12px}.career-heading strong{font:700 10px var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.45)}
.career-line { position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px; }
.career-line:before { content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--orange),rgba(255,91,20,.35)); }
.career-line article { position:relative;padding:32px 0 0; }.career-line article:before{content:"";position:absolute;left:0;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 18px rgba(255,91,20,.65)}
.career-line time { color:var(--orange);font:800 10px var(--mono); }.career-line h3{margin:16px 0 8px;font-size:21px}.career-line p{min-height:38px;margin:0 0 12px;font-size:12px;font-weight:800;line-height:1.6}.career-line span{display:block;font-size:11px;line-height:1.7;color:rgba(255,255,255,.58)}.career-line h4{margin:22px 0 8px;color:var(--orange);font:800 9px var(--mono);letter-spacing:.08em}.career-line .career-brands{color:rgba(255,255,255,.78)}.career-line ol{margin:0;padding-left:1.25em;color:rgba(255,255,255,.55);font-size:11px;line-height:1.75}.career-line li+li{margin-top:7px}

.contact { min-height: 88vh; padding: 130px 6.5vw 95px; background: var(--orange); position: relative; overflow: hidden; display: flex; align-items: center; }
.contact-content { position: relative; z-index: 2; width: 100%; }.contact .kicker{margin-bottom:25px}.contact h2{margin:0 0 65px;max-width:960px}.email-link{display:flex;width:100%;justify-content:space-between;align-items:center;color:var(--ink);text-decoration:none;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:20px 0;background:none;text-align:left;cursor:pointer;font-family:inherit;font-size:clamp(26px,4vw,62px);letter-spacing:-.05em;font-weight:800}.email-link span{font-size:.38em;letter-spacing:0;transition:transform .25s}.email-link:hover span{transform:translate(5px,-5px)}
.contact-grid { display:grid;grid-template-columns:repeat(3,1fr);padding-top:50px;gap:20px }.contact-grid a,.contact-grid button,.contact-grid>div{display:flex;flex-direction:column;align-items:flex-start;color:var(--ink);text-decoration:none;background:none;border:0;padding:0;text-align:left}.contact-grid button{cursor:pointer}.contact-grid small{font:700 9px var(--mono);letter-spacing:.12em;margin-bottom:9px}.contact-grid strong{font-size:18px}.contact-grid button span{font-size:9px;margin-top:6px;opacity:.55}
.contact-record { position:absolute;width:min(58vw,850px);aspect-ratio:1;right:-18vw;top:-12%;border-radius:50%;background:repeating-radial-gradient(circle,#111 0,#111 3px,#292724 4px,#111 6px);opacity:.14;animation:spin 45s linear infinite}.contact-record i{position:absolute;border:1px solid rgba(255,255,255,.4);border-radius:50%}.contact-record i:first-child{inset:22%}.contact-record i:nth-child(2){inset:35%}.contact-record span{position:absolute;inset:42%;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-size:40px;font-weight:900}

body>footer { display:flex;align-items:center;justify-content:space-between;gap:25px;padding:28px 4vw;background:var(--ink);color:#fff }.footer-mark,body>footer>a{color:#fff;text-decoration:none;font:700 9px var(--mono);letter-spacing:.1em}.footer-mark b{font-size:22px;color:var(--orange)}body>footer p{margin:0;font:700 8px var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.45)}

.project-dialog { border: 0; padding: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; background: var(--ink); color: #fff; overflow-y: auto; overscroll-behavior: contain; }
.project-dialog::backdrop { background: rgba(0,0,0,.82); }.dialog-shell{min-height:100%}.dialog-header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;padding:26px 4vw;background:rgba(18,17,16,.93);border-bottom:1px solid var(--white-line);backdrop-filter:blur(15px)}.dialog-header h2{font-size:clamp(28px,4vw,56px);letter-spacing:-.05em;margin:7px 0 4px}.dialog-header>div>p:last-child{margin:0;color:rgba(255,255,255,.52);font-size:11px}.dialog-close{position:relative;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);background:none;cursor:pointer}.dialog-close span{position:absolute;left:12px;right:12px;top:23px;height:1px;background:#fff;transform:rotate(45deg)}.dialog-close span:last-child{transform:rotate(-45deg)}
.dialog-body { padding: 65px 6.5vw 90px; }.dialog-description{max-width:760px;margin:0 auto 55px;text-align:center;font-size:14px;line-height:1.9;color:rgba(255,255,255,.66)}.dialog-images{max-width:1440px;margin:0 auto;display:grid;gap:2px}.dialog-images img{display:block;width:100%;height:auto;background:#242321}.dialog-images.amazon-grid{grid-template-columns:repeat(2,1fr);gap:8px}.dialog-images.amazon-grid img:last-child{grid-column:span 2}.dialog-footer{display:flex;justify-content:space-between;align-items:center;padding:26px 4vw!important;background:#0b0b0a!important;border-top:1px solid var(--white-line)}.dialog-footer button{border:0;background:none;color:#fff;cursor:pointer;font:700 10px var(--mono);letter-spacing:.07em}.dialog-footer span{font:700 9px var(--mono);color:rgba(255,255,255,.45)}
.toast { position:fixed;left:50%;bottom:28px;z-index:100;transform:translate(-50%,20px);padding:12px 18px;background:#fff;color:#111;font:700 10px var(--mono);box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.3s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.noscript{position:fixed;z-index:200;bottom:0;left:0;right:0;margin:0;padding:12px;background:var(--yellow);text-align:center}

@media (max-width: 980px) {
  .site-header nav { display: none; }.portfolio-logo{width:44px;height:42px}
  .hero { min-height:100svh;padding:105px 6vw 30px }.hero-layout{min-height:calc(100svh - 135px)}.hero-copy{width:min(90vw,820px)}.hero h1{font-size:clamp(42px,7.5vw,68px)}.particle-record{width:min(66vw,528px)}.profile-card{left:50%;bottom:48px}.scroll-hint{display:none}
  .section{padding:110px 6vw}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-showcase{grid-template-columns:250px 1fr;gap:42px}.about-visual{min-height:470px}.about-info{gap:18px 28px}.career-line{gap:24px}.contact{padding-left:6vw;padding-right:6vw}
}

@media (max-width: 700px) {
  .site-header{top:10px;left:3vw;right:3vw;height:58px;padding:0 9px}.designer-tag{min-width:104px;min-height:40px;padding:6px 13px}.designer-tag span{font-size:13px}.designer-tag small{font-size:7px}.portfolio-logo{width:38px;height:37px;margin-right:3px}
  .hero{min-height:100svh;padding:88px 5vw 22px}.hero-layout{width:100%;min-height:calc(100svh - 110px);grid-template-rows:auto minmax(230px,1fr) auto}.hero-copy{width:100%}.hero h1{font-size:clamp(28px,8.6vw,42px);line-height:1.05;letter-spacing:.018em;margin-top:10px}.particle-record{width:min(94vw,440px);margin:-4px auto -8px}.hero-controls{flex-direction:column;gap:12px}.hero-actions{align-items:center;flex-direction:row;gap:12px}.hero-actions .button{gap:14px;padding:14px 15px}.hero-actions .text-link{font-size:9px}.motion-toggle{padding:8px 11px}.hero-video{object-position:center}.brand-strip{height:58px}.brand-strip>span{display:none}.brand-set span{font-size:14px}
  .section{padding:85px 6vw}.section-heading{display:block;margin-bottom:48px}.section-heading h2,.experience h2,.contact h2{font-size:45px}.filter-bar{margin-right:-6vw}.filter-bar button{min-width:120px;padding:16px 12px}.project-grid{display:block}.project-card{margin-bottom:24px;border-radius:22px}.project-button{padding:11px 11px 22px}.project-media{border-radius:15px}.project-content{padding:20px 10px 2px}.project-content h3{font-size:34px}.project-summary{min-height:0;font-size:15px}
  .experience-intro{margin-bottom:52px}.about-showcase{grid-template-columns:1fr;gap:46px}.about-visual{min-height:430px}.about-profile h3{font-size:44px}.about-info{grid-template-columns:1fr;gap:16px;padding:22px 0}.about-stats{justify-content:space-between;gap:14px}.about-stats b{font-size:42px}.career{margin-top:75px}.career-line{grid-template-columns:1fr;gap:34px}.career-line:before{top:0;bottom:0;left:4px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--orange),rgba(255,91,20,.18))}.career-line article{padding:0 0 0 30px}.career-line article:before{left:0;top:3px}.career-line p{min-height:0}
  .contact{min-height:auto;padding:85px 6vw 70px}.contact h2{margin-bottom:45px}.email-link{font-size:25px}.contact-grid{grid-template-columns:1fr;gap:30px}.contact-record{width:100vw;right:-45vw}
  body>footer{flex-wrap:wrap;padding:24px 6vw}body>footer p{order:3;width:100%}
  .dialog-header{padding:18px 5vw}.dialog-header h2{font-size:27px}.dialog-close{width:42px;height:42px}.dialog-close span{top:20px}.dialog-body{padding:42px 0 60px}.dialog-description{padding:0 6vw;font-size:12px}.dialog-images{gap:1px}.dialog-images.amazon-grid{grid-template-columns:1fr;gap:4px}.dialog-images.amazon-grid img:last-child{grid-column:auto}.dialog-footer{padding:20px 5vw!important}.dialog-footer span{display:none}
}

@media (hover: none) { .pointer-glow{display:none}.project-media:after{opacity:.22}.project-media img{transform:none!important}.project-extra{max-height:none;margin-top:18px;opacity:1;transform:none}.about-visual{transform:none!important} }
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.pointer-glow{display:none}.reveal,.hero-enter{opacity:1;transform:none}.vinyl,.contact-record,.brand-track,.works:before,.particle-record:before,.particle-record:after,.hero-media:before,.hero-media:after{animation:none}.about-visual,.project-card{transform:none!important}
}