:root {
  --ink: #f2f0eb;
  --muted: #8d8d88;
  --line: rgba(255,255,255,.13);
  --panel: #0d0d0d;
  --accent: #d7ff54;
}
* { box-sizing: border-box; }
html { background: #080808; color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: Poppins, sans-serif; background: #080808 url('/assets/noise.png'); font-weight: 300; }
a { color: inherit; text-decoration: none; }
img, video, iframe { display: block; width: 100%; }
button { font: inherit; }
.shell { min-height: 100vh; }
.header { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 218px; padding: 28px 22px; border-right: 1px solid var(--line); background: rgba(8,8,8,.94); backdrop-filter: blur(12px); display: flex; flex-direction: column; }
.brand img { width: 82px; height: 82px; margin: 16px 0 34px; object-fit: contain; filter: invert(1) contrast(1.12); mix-blend-mode: screen; opacity: .94; }
.brand small { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.nav { display: grid; gap: 9px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.nav a { color: #747474; transition: color .2s; }
.nav a:hover, .nav a.active { color: #fff; }
.socials { margin-top: auto; display: grid; gap: 7px; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: #777; }
.main { margin-left: 218px; min-height: 100vh; }
.hero { min-height: 45vh; padding: clamp(72px, 10vw, 150px) clamp(24px, 6vw, 88px) 64px; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 10px 0 14px; font: 500 clamp(50px, 9vw, 126px)/.85 "Cormorant Garamond", serif; letter-spacing: -.04em; }
.lede { max-width: 650px; color: #a5a5a0; font-size: 13px; line-height: 1.8; }
.grid { padding: 1px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.work-group { margin: clamp(22px,4vw,56px) clamp(14px,4vw,60px); overflow: hidden; border: 1px solid var(--line); border-radius: 3px; background: rgba(15,15,15,.72); box-shadow: 0 26px 70px rgba(0,0,0,.22); }
.work-group + .work-group { margin-top: 0; }
.work-group > h2 { margin: 0; padding: 28px clamp(22px,4vw,42px) 24px; border-bottom: 1px solid var(--line); color: var(--ink); font: 400 clamp(24px,3vw,40px)/1 "Cormorant Garamond",serif; letter-spacing: -.02em; }
.work-group .grid { padding: 0; }
.card { min-height: 0; aspect-ratio: 16/9; position: relative; overflow: hidden; border: 1px solid #080808; background: #161616; }
.card img, .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.8) brightness(.72); transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .5s; }
.card:hover img, .card:hover video { transform: scale(1.025); filter: saturate(1) brightness(.86); }
.card-copy { position: absolute; inset: auto 0 0; padding: 34px 28px 28px; background: linear-gradient(transparent,rgba(0,0,0,.88)); }
.card-kicker { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #b4b4ae; }
.card h2 { margin: 8px 0 4px; font-size: clamp(22px,3vw,38px); font-weight: 400; letter-spacing: -.025em; }
.card p { margin: 0; color: #aaa; font-size: 11px; }
.project { max-width: 1180px; margin: 0 auto; padding: 90px clamp(24px,6vw,80px) 120px; }
.project-head { min-height: 44vh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 48px; }
.project h1 { font-size: clamp(50px,8vw,110px); }
.meta { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }
.project-copy { max-width: 800px; font-size: 14px; line-height: 1.9; color: #b4b4af; margin: 10px 0 54px; white-space: pre-line; }
.project-links { display: flex; gap: 12px; flex-wrap: wrap; margin: -28px 0 54px; }
.project-links a { border: 1px solid var(--line); padding: 11px 14px; color: var(--accent); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.media-stack { display: grid; gap: 24px; }
.media-stack img, .media-stack video, .embed { background: #111; max-height: 80vh; object-fit: contain; }
.embed { aspect-ratio: 16/9; border: 0; }
.site-embed { width: 100%; min-height: min(900px, 82vh); border: 1px solid var(--line); background: #111; }
.instagram-embed { width: min(100%, 658px); min-height: 760px; margin: 0 auto; border: 0; background: #fff; }
.back { display: inline-block; margin-top: 46px; color: var(--accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.about { min-height: 100vh; padding: clamp(80px,12vw,160px) clamp(25px,9vw,130px); display: grid; align-content: center; }
.about h1 { max-width: 920px; }
.about-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 32px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.about-links a { border-bottom: 1px solid #555; padding-bottom: 4px; }
.footer { padding: 30px; color: #5d5d59; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; border-top: 1px solid var(--line); }
@media (max-width: 780px) {
  .header { position: sticky; width: 100%; height: auto; padding: 15px 18px; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: center; }
  .brand img { width: 38px; height: 38px; margin: 0 18px 0 0; }
  .brand small, .socials { display: none; }
  .nav { display: flex; gap: 13px; overflow-x: auto; }
  .main { margin-left: 0; }
  .hero { min-height: 35vh; }
  .grid { grid-template-columns: 1fr; }
  .card { min-height: 0; aspect-ratio: 16/9; }
  .project { padding-top: 30px; }
  .site-embed { min-height: 72vh; }
  .work-group { margin: 14px 12px; }
}