:root{
  --bg:#080808;--bg2:#0d0e10;--panel:#111214;--panel2:#15171a;--paper:#f2f2ef;
  --text:#f5f5f2;--muted:#9a9da3;--muted2:#6f737a;--line:rgba(255,255,255,.11);
  --ice:#7FB2E5;--ice2:#e1edf8;--silver:#c7c9ce;--black:#050505;--radius:18px;
  --ease:cubic-bezier(.2,.78,.2,1);--shadow:0 32px 90px rgba(0,0,0,.38)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;line-height:1.8;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button{font:inherit}.dark-site{background:radial-gradient(circle at 75% -10%,rgba(120,157,197,.11),transparent 28%),var(--bg)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");opacity:.035;mix-blend-mode:screen}
.page-progress{position:fixed;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,var(--ice),white);z-index:120}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,30px);position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);background:rgba(8,8,8,.72);backdrop-filter:blur(22px);transition:height .35s var(--ease),background .35s}.topbar.scrolled{height:64px;background:rgba(8,8,8,.9)}.brand{display:flex;align-items:baseline;gap:11px}.brand b{font-size:18px;letter-spacing:.15em}.brand span{font-size:11px;color:var(--muted);letter-spacing:.12em}.topbar nav{display:flex;gap:32px}.topbar nav a{font-size:12px;color:#b8bac0;letter-spacing:.06em;padding:26px 0;position:relative}.topbar nav a:after{content:"";position:absolute;left:50%;right:50%;bottom:17px;height:1px;background:var(--ice);transition:.35s var(--ease)}.topbar nav a.active,.topbar nav a:hover{color:white}.topbar nav a.active:after,.topbar nav a:hover:after{left:0;right:0}
.cursor-dot,.cursor-ring{position:fixed;pointer-events:none;z-index:200;border-radius:50%;transform:translate(-50%,-50%);display:none}.cursor-dot{width:4px;height:4px;background:var(--ice2)}.cursor-ring{width:34px;height:34px;border:1px solid rgba(210,230,247,.6);transition:width .2s,height .2s,border-color .2s,background .2s}.cursor-ring.hover{width:54px;height:54px;background:rgba(185,211,235,.08);border-color:var(--ice)}
.hero-v4{min-height:calc(100vh - 78px);display:grid;grid-template-columns:minmax(0,1fr) 440px;align-items:center;gap:80px;padding:clamp(70px,8vw,126px) max(6vw,42px) clamp(86px,9vw,138px);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero-noise{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,black,transparent 90%)}.hero-spot{position:absolute;width:680px;height:680px;border-radius:50%;right:8%;top:5%;background:radial-gradient(circle,rgba(173,204,233,.14),rgba(173,204,233,.03) 40%,transparent 68%);filter:blur(10px);animation:slowFloat 10s ease-in-out infinite}.hero-copy{position:relative;z-index:2;max-width:920px}.eyebrow,.kicker,.section-title span,.section-head span,.portfolio-tabs-head>div>span,.panel-top span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ice);font-weight:700}.hero-kicker{opacity:0;animation:fadeUp .7s .06s forwards}.hero h1{font-size:clamp(72px,8.8vw,148px);line-height:.82;letter-spacing:-.065em;margin:30px 0 34px}.hero-line{display:block;overflow:hidden;opacity:0;transform:translateY(54px);animation:heroRise .95s var(--ease) forwards}.hero-line.light{font-weight:260;color:transparent;-webkit-text-stroke:1px rgba(230,235,241,.7);letter-spacing:-.05em;animation-delay:.11s}.hero h2{font-size:clamp(19px,1.9vw,27px);font-weight:560;margin:0 0 24px;letter-spacing:.02em;opacity:0;animation:fadeUp .7s .22s forwards}.hero-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:960px}.hero-intro p{font-size:16px;line-height:2.15;color:#C5C7CA;margin:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);opacity:0;animation:fadeUp .7s forwards}.hero-intro p:nth-child(1){animation-delay:.28s}.hero-intro p:nth-child(2){animation-delay:.35s}.hero-intro p:nth-child(3){animation-delay:.42s}.hero-actions{display:flex;gap:12px;margin-top:34px;opacity:0;animation:fadeUp .7s .5s forwards}.primary,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:13px 20px;font-size:12px;font-weight:700;letter-spacing:.03em;transition:.35s var(--ease)}.primary{background:var(--paper);color:#090909}.primary:hover{background:var(--ice2);transform:translateY(-3px)}.primary i{font-style:normal;transition:.3s}.primary:hover i{transform:translate(3px,3px)}.ghost{border:1px solid rgba(255,255,255,.18);color:#d8d9dc}.ghost:hover{border-color:var(--ice);color:white;transform:translateY(-3px)}
.profile-v4{position:relative;z-index:3;width:100%;max-width:420px;justify-self:end}.portrait-shell{position:relative;overflow:hidden;background:#0f0f0f;border:1px solid rgba(255,255,255,.14);aspect-ratio:2/3}.portrait-shell:before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.12);z-index:3;pointer-events:none}.portrait-shell img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:contrast(1.04);transition:transform .9s var(--ease)}.profile-v4:hover .portrait-shell img{transform:scale(1.025)}.portrait-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),transparent 34%);z-index:2}.portrait-index{position:absolute;left:24px;bottom:22px;z-index:4;font-size:9px;letter-spacing:.18em;color:#d8dde3}.profile-meta{display:flex;justify-content:space-between;align-items:end;padding:16px 0 0}.profile-meta div{display:flex;flex-direction:column}.profile-meta b{font-size:15px}.profile-meta span,.profile-meta em{font-size:9px;letter-spacing:.14em;color:#7f8389;font-style:normal}.scroll-hint{position:absolute;left:max(6vw,42px);bottom:26px;font-size:9px;letter-spacing:.18em;color:#6e7279;display:flex;gap:12px}.scroll-hint span{animation:bounce 1.7s infinite}.marquee{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);background:#0b0b0c;color:#7d838b;padding:13px 0;font-size:9px;letter-spacing:.22em}.marquee>div{display:inline-block;min-width:200%;animation:marquee 32s linear infinite}
.section{padding:118px max(5vw,28px)}.selected-dark{background:linear-gradient(180deg,#0a0a0b,#0e0f11);position:relative}.selected-dark:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 18%,rgba(171,207,239,.08),transparent 26%);pointer-events:none}.section-title{max-width:1380px;margin:0 auto 42px;display:flex;justify-content:space-between;align-items:end}.section-title h2{font-size:clamp(40px,5vw,64px);margin:7px 0 0;letter-spacing:.03em}.section-title>a{font-size:10px;color:#aeb7c0;letter-spacing:.14em}.section-title>a:hover{color:var(--ice)}.featured-grid{max-width:1380px;margin:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.featured-v4 .project-card:nth-child(1){grid-column:span 7}.featured-v4 .project-card:nth-child(2){grid-column:span 5}.featured-v4 .project-card:nth-child(3),.featured-v4 .project-card:nth-child(4),.featured-v4 .project-card:nth-child(5){grid-column:span 4}
.project-card{background:#111214;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;min-width:0;transition:transform .45s var(--ease),border-color .35s,box-shadow .45s;transform-style:preserve-3d}.project-card:hover{transform:translateY(-7px);border-color:rgba(185,211,235,.42);box-shadow:var(--shadow)}.thumb{position:relative;overflow:hidden;aspect-ratio:16/9;background:#17191d}.thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 50%);opacity:.35;transition:.45s}.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease),filter .5s;filter:saturate(.86) contrast(1.03)}.project-card:hover .thumb img{transform:scale(1.055);filter:saturate(1) contrast(1.05)}.view-mark{position:absolute;right:16px;top:14px;z-index:4;font-size:10px;letter-spacing:.16em;color:white;background:rgba(8,8,8,.58);backdrop-filter:blur(8px);padding:7px 9px;border:1px solid rgba(255,255,255,.14);opacity:0;transform:translateY(-6px);transition:.35s}.project-card:hover .view-mark{opacity:1;transform:none}.video-card .thumb:before{content:"▶";position:absolute;z-index:4;left:18px;bottom:16px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.25);backdrop-filter:blur(8px);font-size:11px;color:white}.card-copy{padding:20px 20px 22px;position:relative}.card-copy .meta{font-size:10px;color:var(--ice);letter-spacing:.12em}.card-copy h3{font-size:17px;line-height:1.5;margin:9px 38px 8px 0}.card-copy p{font-size:11px;color:#85898f;margin:0}.card-arrow{position:absolute;right:17px;top:18px;font-size:17px;color:#70757d;transition:.35s}.project-card:hover .card-arrow{color:var(--ice2);transform:translate(3px,-3px)}
.portfolio-tabs{padding:118px max(5vw,28px) 130px;background:#09090a;border-top:1px solid var(--line)}.portfolio-tabs-head,.discipline-tabs,.discipline-panels{max-width:1380px;margin-left:auto;margin-right:auto}.portfolio-tabs-head{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;margin-bottom:46px}.portfolio-tabs-head h2{font-size:clamp(54px,6.5vw,92px);line-height:1.02;letter-spacing:.03em;margin:9px 0 0}.portfolio-tabs-head p{max-width:540px;justify-self:end;color:#8f9298;margin:0}.discipline-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.discipline-tab{appearance:none;border:0;border-right:1px solid var(--line);background:transparent;color:#d2d3d6;padding:24px 22px 22px;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:.4s var(--ease)}.discipline-tab:first-child{border-left:1px solid var(--line)}.discipline-tab:before{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ice);transition:right .45s var(--ease)}.discipline-tab:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;bottom:-130px;background:radial-gradient(circle,rgba(185,211,235,.14),transparent 70%);opacity:0;transition:.4s}.discipline-tab:hover,.discipline-tab.active{background:#1F242C;color:white}.discipline-tab:hover:after,.discipline-tab.active:after{opacity:1}.discipline-tab.active:before{right:0}.discipline-tab span{display:block;font-size:9px;color:#686c73;letter-spacing:.16em;margin-bottom:19px}.discipline-tab b{display:block;font-size:18px;position:relative;z-index:2}.discipline-tab em{display:block;font-size:10px;letter-spacing:.17em;color:#777b82;font-style:normal;margin-top:4px}.discipline-panel{display:none;padding-top:54px;opacity:0;transform:translateY(18px)}.discipline-panel.active{display:block;animation:panelIn .56s var(--ease) forwards}.panel-top{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:end;padding-bottom:34px}.panel-top h3{font-size:clamp(36px,4vw,58px);letter-spacing:-.045em;margin:6px 0 0}.panel-top p{max-width:560px;justify-self:end;color:#898d93;margin:0}.compact-subgroup{display:grid;grid-template-columns:210px 1fr;gap:34px;padding:30px 0;border-top:1px solid var(--line)}.compact-label{display:flex;flex-direction:column;gap:5px;padding-top:4px}.compact-label b{font-size:13px;font-weight:600}.compact-label span{font-size:8px;color:#656a71;letter-spacing:.14em}.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.compact-grid .card-copy h3{font-size:14px}.compact-grid .card-copy p{font-size:10px}.compact-grid .thumb{aspect-ratio:16/8.7}
.about{max-width:1380px;margin:auto;padding:124px max(5vw,28px);display:grid;grid-template-columns:1.15fr .85fr;gap:100px}.about-v4{border-top:1px solid var(--line)}.about-v4 h2{font-size:clamp(42px,5vw,70px);line-height:1.12;letter-spacing:-.05em;margin:12px 0 30px}.about p{font-size:15px;color:#9b9da3;max-width:700px;margin:0 0 20px}.ability{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.ability article{min-height:180px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.4s var(--ease);position:relative;overflow:hidden}.ability article:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--ice);transform:scaleX(0);transform-origin:left;transition:.4s}.ability article:hover{background:#1F242C;transform:translateY(-3px)}.ability article:hover:after{transform:scaleX(1)}.ability article>span{display:block;color:#69707a;font-size:9px;margin-bottom:48px}.ability b{display:block;font-size:17px;margin-bottom:4px}.ability small{font-size:11px;color:#7d8188}footer{padding:34px max(5vw,28px);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:#060606}.footer div{display:flex}footer div{display:flex;gap:14px;align-items:baseline}footer b{font-size:12px;letter-spacing:.08em}footer span,footer a{font-size:10px;letter-spacing:.13em;color:#6e7278}footer a:hover{color:var(--ice)}
/* archive */.works-hero-v4{max-width:1380px;margin:auto;padding:clamp(90px,10vw,150px) max(5vw,28px) 72px;position:relative}.works-hero-v4 h1{font-size:clamp(76px,10vw,150px);line-height:.98;letter-spacing:.03em;margin:22px 0 30px}.works-hero-v4 p{max-width:700px;color:#94979d;font-size:15px}.work-count{position:absolute;right:max(5vw,28px);bottom:70px;display:flex;gap:13px;align-items:end}.work-count b{font-size:58px;font-weight:300;line-height:.8;color:var(--ice2)}.work-count span{font-size:10px;color:#6f7379;letter-spacing:.14em}.filterbar{position:sticky;top:64px;z-index:30;display:flex;gap:8px;flex-wrap:wrap;padding:18px max(5vw,28px);background:rgba(8,8,8,.9);backdrop-filter:blur(18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.filterbar button{border:1px solid var(--line);background:#20252D;color:#9a9da3;padding:9px 13px;border-radius:999px;font-size:11px;cursor:pointer;transition:.3s}.filterbar button i{font-style:normal;color:#5f646b;margin-left:5px}.filterbar button.active,.filterbar button:hover{background:var(--paper);color:#090909;border-color:var(--paper)}.project-grid{max-width:1380px;margin:auto;padding:54px max(5vw,28px) 120px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.all-grid-v4 .project-card{display:block}
/* detail pages */.project-page{max-width:1380px;margin:auto;padding:42px max(5vw,28px) 110px}.breadcrumb{font-size:10px;color:#73777e;display:flex;gap:10px;margin:12px 0 64px}.breadcrumb a:hover{color:var(--ice)}.project-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:end;margin-bottom:38px}.project-intro h1{font-size:clamp(48px,6.6vw,96px);line-height:1.1;letter-spacing:.03em;margin:13px 0 20px;max-width:1040px}.project-intro p{max-width:720px;color:#92959b;font-size:15px}.year-mark{font-size:clamp(40px,5vw,70px);font-weight:250;color:#6e737b}.project-hero-media{position:relative;overflow:hidden;border:1px solid var(--line);background:#1D222A;min-height:420px}.project-hero-media>img{width:100%;height:min(68vw,760px);object-fit:cover;transition:transform 1s var(--ease)}.project-hero-media:hover>img{transform:scale(1.012)}.video-preview{aspect-ratio:16/8.5;min-height:0}.video-preview>img{height:100%;object-fit:cover}.video-preview-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.45));text-align:center}.play-disc{width:76px;height:76px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(0,0,0,.18);backdrop-filter:blur(6px);margin-bottom:16px}.video-preview-overlay b{font-size:11px;letter-spacing:.2em}.video-preview-overlay small{font-size:10px;color:#b9bcc1;margin-top:7px}.case-grid{display:grid;grid-template-columns:1.05fr 1fr 1.1fr;border-left:1px solid var(--line);border-top:1px solid var(--line);margin:34px 0 100px}.case-grid article{min-height:220px;padding:29px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#0c0d0f}.case-grid h2{font-size:19px;margin:9px 0 12px}.case-grid p{font-size:13px;color:#8d9197}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips span{font-size:10px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:#b6b8bd;background:#111316}.section-head{margin-bottom:24px}.section-head h2{font-size:34px;margin:5px 0}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin-bottom:90px;align-items:start}.gallery figure{margin:0;grid-column:span 4;overflow:hidden;background:#111;border:1px solid var(--line)}.gallery figure:nth-child(5n+1){grid-column:span 8}.gallery img{width:100%;height:auto;object-fit:cover;transition:transform .7s var(--ease),filter .4s;filter:saturate(.9)}.gallery figure:hover img{transform:scale(1.02);filter:saturate(1)}.next-work{padding-top:28px;border-top:1px solid var(--line);text-align:right}.next-work a,.inline-link{font-size:11px;letter-spacing:.08em;color:var(--ice)}
/* script/table */.script-section{margin-bottom:80px}.table-wrap{overflow:auto;border:1px solid var(--line);background:#0d0e10}.table-wrap table{width:100%;border-collapse:collapse;min-width:980px;font-size:11px}.table-wrap th,.table-wrap td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.table-wrap th{background:#15171a;color:#dfe2e6;position:sticky;top:0}.table-wrap td{color:#999ca2}.video-placeholder{border:1px solid var(--line);background:#101214;padding:24px;display:flex;justify-content:space-between;align-items:center}.video-placeholder span{font-size:12px;color:#868a91}.video-placeholder button{border:1px solid var(--line);background:#17191c;color:#9ea2a8;padding:10px 16px;border-radius:999px}
/* article */.article-page{max-width:930px;margin:auto;padding:56px 34px 110px}.back{font-size:10px;color:#74787f}.article-head{padding:68px 0 46px;border-bottom:1px solid var(--line)}.article-head h1{font-size:clamp(46px,6vw,78px);line-height:1.14;letter-spacing:.03em;margin:15px 0}.reading{max-width:760px;margin:54px auto}.reading p{font-size:16px;line-height:2.05;margin:0 0 19px;color:#c5c7ca}.reading p:first-child{font-size:20px;color:white;font-weight:700}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.seen{opacity:1;transform:none}.reveal[data-delay="1"]{transition-delay:.06s}.reveal[data-delay="2"]{transition-delay:.12s}.reveal[data-delay="3"]{transition-delay:.18s}
@keyframes heroRise{to{opacity:1;transform:none}}@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes slowFloat{50%{transform:translate(-28px,24px) scale(1.03)}}@keyframes bounce{50%{transform:translateY(7px)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes panelIn{to{opacity:1;transform:none}}
@media(pointer:fine){.cursor-dot,.cursor-ring{display:none}}
@media(max-width:1080px){.hero-v4{grid-template-columns:1fr 300px;gap:42px}.hero-intro{grid-template-columns:1fr 1fr}.hero-intro p:nth-child(3){grid-column:1/-1}.profile-v4{max-width:290px}.featured-v4 .project-card:nth-child(n){grid-column:span 6}.category-grid{grid-template-columns:1fr 1fr}.compact-subgroup{grid-template-columns:180px 1fr}.about{grid-template-columns:1fr;gap:60px}.project-grid{grid-template-columns:1fr 1fr}.case-grid{grid-template-columns:1fr}.gallery figure,.gallery figure:nth-child(5n+1){grid-column:span 6}}
@media(max-width:760px){.topbar{height:64px;padding:0 18px}.topbar nav{gap:16px}.topbar nav a{font-size:10px;padding:22px 0}.hero-v4{grid-template-columns:1fr;padding:60px 20px 82px;gap:44px}.hero h1{font-size:62px}.hero-intro{grid-template-columns:1fr}.hero-intro p:nth-child(3){grid-column:auto}.profile-v4{justify-self:start;max-width:230px}.scroll-hint{display:none}.section{padding:82px 18px}.featured-v4 .project-card:nth-child(n){grid-column:span 12}.portfolio-tabs{padding:82px 18px 92px}.portfolio-tabs-head{grid-template-columns:1fr;gap:20px}.portfolio-tabs-head p{justify-self:start}.discipline-tabs{display:flex;overflow-x:auto;scrollbar-width:none}.discipline-tabs::-webkit-scrollbar{display:none}.discipline-tab{min-width:180px}.panel-top{grid-template-columns:1fr;gap:16px}.panel-top p{justify-self:start}.compact-subgroup{grid-template-columns:1fr}.category-grid{grid-template-columns:1fr}.about{padding:86px 18px}.ability{grid-template-columns:1fr}.works-hero-v4{padding:72px 18px 52px}.works-hero-v4 h1{font-size:72px}.work-count{position:static;margin-top:32px}.filterbar{top:64px;padding-left:18px;padding-right:18px}.project-grid{grid-template-columns:1fr;padding:40px 18px 88px}.project-page{padding:34px 18px 82px}.breadcrumb{margin-bottom:44px}.project-intro{grid-template-columns:1fr}.project-intro h1{font-size:44px}.year-mark{display:none}.project-hero-media{min-height:260px}.project-hero-media>img{height:66vw;min-height:260px}.video-preview{aspect-ratio:9/7}.case-grid{margin-bottom:72px}.gallery{grid-template-columns:1fr}.gallery figure,.gallery figure:nth-child(5n+1){grid-column:auto}.article-page{padding:42px 20px 90px}.reading p{font-size:15px}footer{align-items:flex-start;gap:18px}footer div{flex-direction:column;gap:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.cursor-dot,.cursor-ring{display:none!important}}
/* V5 — charcoal layered theme + two-level archive filters */
:root{--bg:#1B1F27;--bg2:#20252D;--panel:#242934;--panel2:#2A303C;--black:#14171D;--line:rgba(255,255,255,.13)}
body{background:linear-gradient(180deg,#1B1F27 0%,#20242C 42%,#1A1E25 100%);background-attachment:fixed}
.dark-site{background:radial-gradient(circle at 78% 0%,rgba(150,185,220,.14),transparent 28%),radial-gradient(circle at 8% 38%,rgba(255,255,255,.04),transparent 24%),linear-gradient(180deg,#1B1F27,#20242C 44%,#1A1E25)}
.topbar{background:rgba(27,31,39,.76)}.topbar.scrolled{background:rgba(27,31,39,.93)}
.hero-v4{background:linear-gradient(115deg,rgba(255,255,255,.03),transparent 38%),radial-gradient(circle at 84% 24%,rgba(180,205,230,.13),transparent 30%)}
.hero h1{font-size:clamp(78px,9vw,150px);line-height:.98;letter-spacing:.06em;margin-top:24px}
.hero-line{overflow:visible;padding:.06em .02em .08em 0}
.portrait-shell{background:#222833}.selected-dark{background:linear-gradient(180deg,#1F242C,#252A33)}
.portfolio-tabs{background:linear-gradient(180deg,#1D222A,#20252D)}
.project-card{background:#242934}.thumb{background:#2A303C}.marquee{background:#1E232B}footer{background:#161A21}
.case-grid article{background:#20252D}.table-wrap{background:#20252D}.table-wrap th{background:#2A303C}.video-placeholder{background:#222833}
.works-page{background:radial-gradient(circle at 85% 10%,rgba(177,203,229,.10),transparent 24%)}
.filterbar{background:rgba(27,31,39,.92)}
.subfilter-shell{position:sticky;top:118px;z-index:29;padding:14px max(5vw,28px) 16px;background:rgba(30,34,42,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.subfilter-head{max-width:1380px;margin:0 auto 10px;display:flex;align-items:baseline;gap:12px}.subfilter-head span{font-size:10px;letter-spacing:.16em;color:var(--ice)}.subfilter-head b{font-size:12px}.subfilter-head small{font-size:10px;color:#8B939D;margin-left:auto}
.subfilterbar{max-width:1380px;margin:auto;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}.subfilterbar::-webkit-scrollbar{display:none}.subfilterbar button{white-space:nowrap;border:1px solid rgba(255,255,255,.14);background:#242934;color:#A6ADB6;padding:8px 13px;border-radius:999px;font-size:10px;cursor:pointer;transition:.28s var(--ease)}.subfilterbar button:hover,.subfilterbar button.active{background:#E4EDF6;color:#101216;border-color:#E4EDF6}.subfilterbar button i{font-style:normal;opacity:.58;margin-left:5px}
@media(max-width:760px){.hero h1{font-size:58px;line-height:1.02}.subfilter-shell{top:116px;padding-left:18px;padding-right:18px}.subfilter-head{flex-wrap:wrap}.subfilter-head small{width:100%;margin-left:0}.works-hero-v4 h1{font-size:66px}}

/* === Native portfolio video player === */
.video-player{aspect-ratio:16/9;min-height:0;background:#050607;display:flex;align-items:center;justify-content:center}
.video-player video{display:block;width:100%;height:100%;object-fit:contain;background:#050607;outline:0}
.video-player.portrait-video{aspect-ratio:16/9;background:radial-gradient(circle at 50% 50%,#1b1d22 0,#090a0c 58%,#050607 100%)}
.video-player.portrait-video video{width:100%;height:100%;object-fit:contain;background:transparent}
.case-grid code{font:inherit;color:#c3d8ff;word-break:break-all}
@media(max-width:760px){.video-player,.video-player.portrait-video{aspect-ratio:16/9;min-height:0}.video-player.portrait-video video{object-fit:contain}}

/* === Archive category navigation === */
.archive-home,.archive-detail{max-width:1380px;margin:auto;padding:clamp(70px,8vw,110px) max(5vw,28px) 90px}
.archive-home[hidden],.archive-detail[hidden]{display:none!important}
.archive-head{margin-bottom:38px}
.archive-head h1{font-size:clamp(46px,6vw,78px);line-height:1.05;letter-spacing:.03em;margin:12px 0 6px}
.archive-count{font-size:13px;color:#8B939D;margin:0}
.archive-cats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cat-card{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);height:210px;text-align:left;cursor:pointer;padding:0;background:#242934;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.cat-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cat-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,16,.9),rgba(11,13,16,.28) 55%,rgba(11,13,16,.08))}
.cat-num{position:absolute;top:16px;left:18px;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.78)}
.cat-info{position:absolute;left:18px;right:18px;bottom:18px}
.cat-info b{display:block;font-size:24px;font-weight:500;color:#fff;margin-bottom:5px}
.cat-info small{font-size:12px;color:rgba(255,255,255,.62)}
.cat-card:hover .cat-bg{transform:scale(1.05)}
.archive-cats:hover .cat-card{opacity:.38}
.archive-cats .cat-card:hover{opacity:1;transform:translateY(-4px)}
.archive-back{background:transparent;border:1px solid rgba(255,255,255,.22);color:#A6ADB6;border-radius:8px;padding:8px 16px;font-size:12px;cursor:pointer;margin-bottom:26px}
.archive-back:hover{border-color:var(--ice);color:#fff}
.archive-group{margin-bottom:52px}
.archive-group-title{font-size:13px;font-weight:500;color:var(--ice);letter-spacing:.08em;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.archive-group-title span{color:#8B939D;font-weight:400;margin-left:6px}
.archive-subgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1080px){.archive-subgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.archive-cats{grid-template-columns:1fr}.cat-card{height:160px}.archive-subgrid{grid-template-columns:1fr}.archive-head h1{font-size:40px}}

.archive-intro{max-width:820px;margin:0 0 40px;padding:18px 22px;background:#1F242C;border:1px solid var(--line);border-radius:12px}
.archive-intro-label{font-size:11px;letter-spacing:.14em;color:var(--ice);margin:0 0 10px}
.archive-intro p{font-size:14px;line-height:1.85;color:#C5C7CA;margin:0}