:root{--bg:#fff;--ink:#151515;--mute:#777;--line:#e4e4e4;--pad:clamp(16px,3vw,40px)}
@media(prefers-color-scheme:dark){:root{--bg:#111;--ink:#f2f2f2;--mute:#999;--line:#2a2a2a}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Helvetica Neue",Helvetica,Arial,"PingFang HK","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
header{display:flex;justify-content:space-between;align-items:baseline;padding:var(--pad);position:sticky;top:0;background:var(--bg);z-index:5}
header .n{font-weight:600}nav{display:flex;gap:1.5rem}nav a[aria-current]{text-decoration:underline;text-underline-offset:5px}
main{padding:0 var(--pad) var(--pad)}
.home header{position:absolute;left:0;right:0;background:none;color:#fff}
.home main{padding:0}.home footer{display:none}
.hero{position:relative;height:100svh;min-height:520px;color:#fff;background:#16131a;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.1) 40%,rgba(0,0,0,.45))}
.hero>*{position:relative;z-index:1}
.intro{font-size:clamp(20px,2.6vw,34px);line-height:1.2;letter-spacing:-.02em;max-width:18em;margin:clamp(80px,12vh,140px) var(--pad) 0}
.ticker{overflow:hidden;white-space:nowrap}
.ticker div{display:inline-block;padding:.2em 0;font-size:clamp(48px,10vw,140px);font-weight:700;letter-spacing:-.04em;line-height:1.1;animation:t 40s linear infinite}
.ticker span{padding:0 .35em}
@keyframes t{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px) var(--pad)}
@media(max-width:700px){.grid{grid-template-columns:1fr}}
.grid img,.ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--line)}
.ph{display:grid;place-items:center;color:var(--mute);font-size:14px}
.grid h2{font-size:16px;font-weight:500;margin:.6em 0 0}
.grid a:hover h2{text-decoration:underline;text-underline-offset:4px}
h1{font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;line-height:1.1;margin:.5em 0}
.proj img,.proj iframe,.proj video{width:100%;display:block;margin:0 0 var(--pad);border:0}
.proj iframe{aspect-ratio:16/9}.proj p{max-width:40em;color:var(--mute)}
.pn{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:1em;margin-top:2em}
.about{max-width:38em}.about .lead{font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-.01em}.about h2,.brands h2{font-size:16px;margin:2em 0 .6em}.about ul,.brands ul{list-style:none;padding:0;margin:0}.about li{margin:0 0 1em}.about li span{color:var(--mute)}.about a{text-decoration:underline;text-underline-offset:3px}
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--pad)}.brands li{font-size:clamp(20px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em}
footer{padding:var(--pad);color:var(--mute);font-size:14px}