:root { --ink:#16251d; --soft:#4c5750; --green:#155532; --yellow:#f7c900; --canvas:#d1d1cf; --surface:rgba(245,246,243,.74); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.project-header { position:fixed; z-index:20; top:14px; left:3vw; right:3vw; height:70px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border:1px solid rgba(255,255,255,.62); border-radius:7px; background:rgba(236,239,236,.58); box-shadow:0 12px 38px rgba(20,31,25,.1),inset 0 1px rgba(255,255,255,.72); backdrop-filter:blur(24px) saturate(135%); }
.project-brand { display:flex; align-items:center; gap:10px; }.project-brand img { width:44px; height:44px; }.project-brand strong,.project-brand small { display:block; }.project-brand strong { font-size:14px; }.project-brand small { margin-top:3px; font-size:8px; font-weight:700; }
.project-back { display:flex; align-items:center; gap:22px; font-size:12px; font-weight:800; }.project-back span { font-size:18px; }
main { padding:126px 0 120px; }
.project-hero { width:min(1280px,92vw); min-height:680px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:22px; padding:22px; border:1px solid rgba(255,255,255,.55); border-radius:24px; background:var(--surface); box-shadow:0 16px 44px rgba(22,27,24,.12),inset 0 1px rgba(255,255,255,.62); }
.project-hero-copy { display:flex; flex-direction:column; justify-content:center; padding:56px 3vw; }.project-hero-copy>p:first-child { margin:0 0 28px; color:var(--green); font-size:10px; font-weight:850; }.project-hero h1 { max-width:590px; margin:0; font-size:clamp(48px,5vw,76px); line-height:1.02; }.project-summary { max-width:560px; margin:32px 0 0; color:var(--soft); font-size:16px; line-height:1.85; }
.project-hero-media { min-width:0; margin:0; overflow:hidden; border-radius:17px; box-shadow:0 10px 28px rgba(22,27,24,.12); }.project-hero-media img { height:100%; object-fit:cover; }
.project-metrics { width:min(1120px,86vw); margin:100px auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(22,37,29,.2); border-bottom:1px solid rgba(22,37,29,.2); }
.metric { min-height:210px; padding:44px 34px; border-right:1px solid rgba(22,37,29,.18); }.metric:last-child { border-right:0; }.metric strong { display:flex; align-items:baseline; gap:8px; color:var(--green); }.metric strong span { font-size:clamp(48px,5vw,72px); line-height:1; font-weight:900; }.metric strong small { font-size:12px; }.metric p { margin:22px 0 0; color:var(--soft); font-size:12px; font-weight:700; }
.project-narrative { width:min(1120px,86vw); margin:0 auto; display:grid; grid-template-columns:.95fr 1.05fr; gap:10vw; padding-top:30px; }.project-narrative span { color:var(--green); font-size:10px; font-weight:850; }.project-narrative h2 { max-width:550px; margin:30px 0 0; font-size:46px; line-height:1.14; }.project-narrative-copy>p { margin:0 0 48px; color:var(--soft); font-size:17px; line-height:1.95; }.project-narrative h3 { padding-top:28px; border-top:1px solid rgba(22,37,29,.2); font-size:14px; }.project-narrative ul { margin:24px 0 0; padding:0; list-style:none; }.project-narrative li { padding:16px 0; border-bottom:1px solid rgba(22,37,29,.15); font-size:14px; }
footer { display:flex; justify-content:space-between; width:min(1280px,92vw); margin:0 auto 42px; padding-top:24px; border-top:1px solid rgba(22,37,29,.2); font-size:10px; font-weight:800; }
@media (max-width:760px) { .project-hero { grid-template-columns:1fr; }.project-hero-copy { padding:40px 18px; }.project-hero h1 { font-size:42px; }.project-hero-media { min-height:380px; }.project-metrics { grid-template-columns:1fr; }.metric { border-right:0; border-bottom:1px solid rgba(22,37,29,.18); }.project-narrative { grid-template-columns:1fr; gap:48px; }.project-narrative h2 { font-size:36px; } }