:root { color-scheme: dark; --ink: #070708; --paper: #f5f3ef; --muted: #9b98a3; --line: rgba(255,255,255,.17); --acid: #c6ff00; --purple: #a700ff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
.work-nav { position: sticky; top: 0; z-index: 5; height: 108px; padding: 0 clamp(24px,5vw,72px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(7,7,8,.82); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 24px; font-weight: 900; font-size: 28px; letter-spacing: -2px; }
.brand::first-letter { color: var(--acid); }
.brand span { border-left: 1px solid var(--line); padding-left: 22px; color: #c8c5cf; font: 600 10px/1.25 ui-monospace, monospace; letter-spacing: 1.5px; }
.back-link { padding: 12px 17px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; transition: .25s ease; }
.back-link:hover { color: var(--ink); background: var(--acid); border-color: var(--acid); }
main { overflow: hidden; }
.work-hero { min-height: 520px; padding: 100px clamp(24px,8vw,120px) 72px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 72% 45%, rgba(167,0,255,.18), transparent 35%); }
.work-kicker { display: flex; justify-content: space-between; margin-bottom: 50px; color: var(--muted); font: 700 11px ui-monospace, monospace; letter-spacing: 2px; }
h1 { margin: 0; max-width: 1180px; font-size: clamp(52px,9vw,150px); line-height: .9; letter-spacing: -.065em; overflow-wrap: anywhere; }
.work-summary { max-width: 720px; margin: 42px 0 0 auto; color: #cac7d0; font-size: clamp(17px,2vw,25px); line-height: 1.6; white-space: pre-line; }
.work-cover { width: min(1320px,90vw); min-height: min(72vw,820px); margin: 0 auto; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 34px; background: #101013; box-shadow: 0 35px 100px rgba(0,0,0,.6), 0 0 70px rgba(167,0,255,.12); }
.work-cover img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.cover-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(167,0,255,.24), transparent 38%), linear-gradient(135deg,#101014,#060607); }
.cover-placeholder::before, .cover-placeholder::after { content: ""; position: absolute; width: 38%; aspect-ratio: 1; border: 2px solid var(--acid); border-radius: 20%; transform: rotate(22deg); opacity: .72; }
.cover-placeholder::after { border-color: var(--purple); transform: translate(15%,-5%) rotate(-15deg); }
.cover-placeholder span { position: absolute; left: 36px; top: 30px; color: var(--acid); font: 700 14px ui-monospace, monospace; letter-spacing: 2px; }
.cover-placeholder b { z-index: 1; font-size: clamp(42px,8vw,116px); line-height: .82; letter-spacing: -.07em; text-align: center; }
.work-content { width: min(1180px,88vw); margin: 130px auto; display: grid; grid-template-columns: minmax(230px,.8fr) 2fr; gap: clamp(60px,10vw,170px); }
.work-facts { display: grid; align-content: start; gap: 32px; }
.work-facts div { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.work-facts span, .section-label, .work-pagination span { display: block; margin-bottom: 12px; color: var(--muted); font: 700 10px ui-monospace, monospace; letter-spacing: 1.7px; }
.work-facts strong { font-size: 15px; font-weight: 500; line-height: 1.5; }
.work-body { font-size: clamp(22px,3.1vw,42px); line-height: 1.5; letter-spacing: -.025em; white-space: pre-line; }
.work-gallery { width:min(1320px,90vw); margin:40px auto 130px; }
.gallery-heading { margin-bottom:48px; display:flex; align-items:end; justify-content:space-between; gap:30px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.gallery-heading p { margin:0; color:var(--acid); font:700 10px ui-monospace,monospace; letter-spacing:1.7px; }
.gallery-heading h2 { margin:0; font-size:clamp(30px,4vw,58px); letter-spacing:-.05em; }
.gallery-images { display:grid; gap:32px; }
.gallery-images figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:26px; background:#101013; }
.gallery-images img { display:block; width:100%; height:auto; }
.gallery-images figcaption { padding:16px 20px; color:var(--muted); font:700 9px ui-monospace,monospace; letter-spacing:1.3px; }
.work-pagination { width: min(1320px,90vw); margin: 0 auto 90px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.work-pagination a { padding: clamp(28px,5vw,60px); transition: .25s ease; }
.work-pagination a + a { border-left: 1px solid var(--line); text-align: right; }
.work-pagination strong { font-size: clamp(18px,2.4vw,32px); }
.work-pagination a:hover { background: var(--acid); color: var(--ink); }
.work-pagination a:hover span { color: rgba(0,0,0,.6); }
footer { padding: 32px clamp(24px,5vw,72px); display: flex; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); font: 700 10px ui-monospace, monospace; letter-spacing: 1.5px; }
footer a:hover { color: var(--acid); }
@media (max-width: 720px) { .work-nav { height: 82px; } .brand span { display: none; } .work-hero { min-height: 430px; padding-top: 70px; } .work-kicker { margin-bottom: 34px; } .work-summary { margin-left: 0; } .work-cover { min-height: 110vw; border-radius: 22px; } .work-content { margin: 80px auto; grid-template-columns: 1fr; gap: 60px; } .work-gallery { margin-bottom:80px; } .gallery-heading { align-items:flex-start; flex-direction:column; } .gallery-images { gap:18px; } .gallery-images figure { border-radius:18px; } .work-pagination { grid-template-columns: 1fr; } .work-pagination a + a { border-left: 0; border-top: 1px solid var(--line); } }