:root{
  --bg:#0e1511; --text:#ecefe8; --body:#c9d0c8; --muted:#7e8a80;
  --accent:#6cc070; --panel:#1a241d; --line:#2a3a2f;
  --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --max:1440px; --pad:40px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--text);color:var(--bg);padding:8px 12px;z-index:100}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;
  padding:28px var(--pad);max-width:var(--max);margin:0 auto;mix-blend-mode:difference}
.top .brand{line-height:1.5}
.top nav{display:flex;gap:28px}
.top nav a{opacity:.7;transition:opacity .3s}.top nav a:hover,.top nav a[aria-current]{opacity:1}

/* hero */
.hero{position:relative;height:100vh;min-height:620px;display:grid;place-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;background:url(hero/hero-bg.webp) center 30%/cover no-repeat;opacity:.14}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(14,21,17,.35) 0%,var(--bg) 85%),linear-gradient(to bottom,transparent 60%,var(--bg))}
.orbits{position:absolute;inset:0;opacity:.22;pointer-events:none}
.orbits .o{position:absolute;width:min(26vw,300px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--line);
  animation:drift 24s var(--ease) infinite alternate}
.orbits .o img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6) contrast(1.1)}
.orbits svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes drift{to{transform:translate(14px,-18px) rotate(3deg)}}
.hero h1{position:relative;color:var(--accent);font-weight:500;font-size:clamp(34px,10.5vw,128px);letter-spacing:-.055em;line-height:.95;text-align:center;white-space:nowrap}
.corner{position:absolute;display:flex;gap:10px;align-items:center}
.corner.l{left:var(--pad);top:38%}.corner.r{right:var(--pad);top:62%}
.hero .intro{position:absolute;left:var(--pad);top:calc(62% + 34px);max-width:340px;font-size:15px;line-height:1.45;color:var(--body)}
.scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%)}
.scroll::after{content:"";display:block;width:1px;height:36px;background:var(--muted);margin:10px auto 0;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.2}}

/* work sequence */
.work{position:relative}
.proj{min-height:100vh;display:grid;align-items:center;padding:0 var(--pad);max-width:var(--max);margin:0 auto;
  grid-template-columns:1.1fr 3fr 1.1fr 1.3fr;gap:24px;opacity:.18;transition:opacity .8s var(--ease)}
.proj.on{opacity:1}
.proj .num{font-family:var(--mono);font-size:22px;margin-top:8px;color:var(--muted)}
.proj.on .num{color:var(--text)}
.proj h2{font-weight:500;font-size:clamp(48px,7vw,104px);letter-spacing:-.05em;line-height:.95}
.proj h2 a{display:inline-block;transition:color .3s}
.proj h2 a:hover{color:var(--accent)}
.proj .summary{font-size:15px;line-height:1.45;color:var(--body);margin-top:18px;max-width:46ch}
.proj .meta dd{margin:6px 0 18px}
.proj ul{list-style:none;font-size:15px;line-height:1.45;margin-top:8px}
.proj .below{position:relative}
.proj .thumb{position:absolute;left:0;top:18px;width:min(520px,100%);aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.proj .thumb img{width:100%;height:100%;object-fit:cover}
.proj .summary{transition:opacity .3s var(--ease)}
.mid:has(h2 a:hover,.thumb:hover) .thumb{opacity:1;transform:none;pointer-events:auto}
.mid:has(h2 a:hover,.thumb:hover) .summary{opacity:0}
/* scroll-active project: light up title + show image */
.proj h2 a{transition:color .5s var(--ease)}
.proj.on h2 a{color:var(--accent)}
.proj.on .thumb{opacity:1;transform:none;pointer-events:auto}
.proj.on .summary{opacity:0}
.progress{position:fixed;right:var(--pad);bottom:28px;width:min(420px,40vw);height:1px;background:var(--line);z-index:40;
  opacity:0;transition:opacity .4s}
.progress.show{opacity:1}
.progress i{display:block;height:100%;width:0;background:var(--text);transition:width .3s var(--ease)}
.counter{position:fixed;left:var(--pad);bottom:22px;z-index:40;opacity:0;transition:opacity .4s}
.counter.show{opacity:1}
.peek{position:fixed;z-index:30;width:360px;aspect-ratio:16/10;pointer-events:none;border-radius:6px;overflow:hidden;
  opacity:0;transform:translate(28px,-112%) scale(.92);transition:opacity .3s,transform .3s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.peek.show{opacity:1;transform:translate(28px,-112%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}

/* launched strip */
.launched{max-width:var(--max);margin:0 auto;padding:120px var(--pad)}
.launched h3{font-weight:500;font-size:clamp(32px,4vw,56px);letter-spacing:-.04em;margin:14px 0 40px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:28px}
.card b{display:block;font-weight:500;font-size:44px;letter-spacing:-.04em;margin-bottom:8px}
.card p{color:var(--body);font-size:14px;line-height:1.5}

/* footer */
footer{border-top:1px solid var(--line);max-width:var(--max);margin:0 auto;padding:60px var(--pad) 40px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;align-items:end}
footer .big{font-weight:500;font-size:clamp(18px,2.9vw,46px);letter-spacing:-.045em;line-height:1;white-space:nowrap}
footer .big a:hover{color:var(--accent)}
footer ul{list-style:none;line-height:2}
footer a.mono:hover{color:var(--accent)}

/* detail */
.detail{max-width:var(--max);margin:0 auto;padding:160px var(--pad) 80px}
.detail h1{font-weight:500;font-size:clamp(52px,9vw,140px);letter-spacing:-.055em;line-height:.92;margin:18px 0 48px}
.detail .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-bottom:56px}
.detail .grid p{margin-top:8px;font-size:15px;line-height:1.45}
.detail .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{border:1px solid var(--line);border-radius:99px;padding:5px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.gallery{display:grid;grid-template-columns:1fr 1.8fr;gap:16px;margin-bottom:64px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:6px;background:var(--panel)}
.copy{display:grid;grid-template-columns:1fr 2fr;gap:24px}
.copy div p{font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--body);margin-bottom:1.1em;max-width:62ch}
.next{display:block;border-top:1px solid var(--line);margin-top:80px;padding-top:28px}
.next span.big{display:block;font-weight:500;font-size:clamp(40px,6vw,88px);letter-spacing:-.05em;margin-top:10px;transition:color .3s}
.next:hover span.big{color:var(--accent)}

/* about */
.about{max-width:var(--max);margin:0 auto;padding:160px var(--pad) 80px;display:grid;grid-template-columns:1fr 2fr;gap:24px}
.about h1{font-weight:500;font-size:clamp(40px,5vw,72px);letter-spacing:-.05em;line-height:1;margin-bottom:40px}
.about p{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--body);margin-bottom:1.1em;max-width:60ch}
.about h2{margin:40px 0 14px}
.about ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (max-width:900px){
  :root{--pad:16px}
  .top{padding:16px var(--pad);mix-blend-mode:normal;background:rgba(14,21,17,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .hero .intro{display:block!important}
  .top nav{gap:16px}
  .corner.l{top:30%}.corner.r{top:auto;bottom:120px;right:var(--pad)}
  .hero .intro{position:absolute;top:auto;bottom:160px;left:var(--pad);right:var(--pad);display:none}
  .proj{grid-template-columns:1fr;min-height:auto;padding:64px var(--pad);opacity:1;gap:12px;border-top:1px solid var(--line)}
  .proj .thumb{position:static;opacity:1;transform:none;pointer-events:auto;display:block;width:100%;margin:8px 0;box-shadow:none}
  .mid:has(h2 a:hover,.thumb:hover) .summary,.proj.on .summary{opacity:1}
  .proj .meta{display:none}
  .progress,.counter,.peek{display:none}
  .cards,.detail .grid,.gallery,.copy,.about,footer{grid-template-columns:1fr}
  .orbits .o{width:40vw}
  footer .big{font-size:6.2vw}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}