:root{
  --paper:#efede7; --paper-2:#e6e3db; --ink:#111214; --ink-2:#4a4d52; --line:#d2cec4;
  --obsidian:#0b0c0e; --obsidian-2:#16181b; --gold:#c9a24a; --gold-2:#e2c47a;
  --sans:"Space Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.12em}
.dim{color:#9a9ca1}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(2.4rem,6vw,4.6rem)}
h3{font-size:1.3rem;letter-spacing:-.01em}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 28px;color:#fff;transition:background .3s,color .3s,backdrop-filter .3s}
.nav.solid{background:rgba(239,237,231,.86);backdrop-filter:blur(14px);color:var(--ink);border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600}
.mark svg{width:26px;height:26px}
.mark polygon{fill:var(--obsidian);stroke:var(--gold);stroke-width:4}
.mark circle{fill:var(--gold)}
.nav nav{display:flex;gap:22px;align-items:center;font-size:.92rem}
.nav nav a{text-decoration:none;opacity:.85}
.nav nav a:hover{opacity:1}
.btn-sm{border:1px solid currentColor;border-radius:99px;padding:5px 14px}

/* hero */
.hero{position:relative;min-height:min(100svh,1100px);background:var(--obsidian);color:#fff;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.55) 0%,rgba(11,12,14,.45) 45%,rgba(11,12,14,.94) 100%),radial-gradient(ellipse at 20% 70%,rgba(11,12,14,.55),transparent 60%)}
.hero-copy{position:relative;padding-bottom:12vh;width:100%}
.hero h1{font-size:clamp(2.4rem,min(8.4vw,11vh),7.2rem);margin:.35em 0 .3em;max-width:14ch}
.lede{max-width:56ch;color:#c9cbcf;font-size:1.08rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--obsidian);border:1px solid var(--gold);border-radius:99px;padding:12px 22px;font:600 .95rem var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-1px);background:var(--gold-2)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#8a8d92;text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:.68rem}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line);padding-top:0;padding-bottom:0}
.facts div{padding:28px 20px 28px 0;border-right:1px solid var(--line);margin-right:20px}
.facts div:last-child{border-right:0;margin-right:0}
.facts b{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.facts span{font-size:.92rem;color:var(--ink-2);line-height:1.5}

/* project sections */
.project{padding:120px 0}
.project.alt{background:var(--paper-2)}
.phead{margin-bottom:44px}
.phead .sub{max-width:62ch;font-size:1.15rem;color:var(--ink-2);margin-top:14px}
figure{position:relative;border-radius:var(--r);overflow:hidden;background:#f0eee8}
figure.dark{background:#15171a}
figure img,figure video{width:100%;height:100%;object-fit:cover}
figcaption{position:absolute;left:10px;bottom:10px;right:10px;background:rgba(17,18,20,.72);color:#eee;padding:6px 10px;border-radius:8px;backdrop-filter:blur(6px);font-size:.7rem;line-height:1.35;width:fit-content}
.zoom{cursor:zoom-in}
.zoom img{transition:transform .5s ease}
.zoom:hover img{transform:scale(1.03)}
.v2-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin:56px 0 40px}
.hero-shot{aspect-ratio:4/5}
.hero-shot img{object-fit:contain;padding:4%}

.spec{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.spec div{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.k{color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
.spec .v{font-weight:500}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g3 figure{aspect-ratio:4/3}
.g3 figure:not(.photo) img{object-fit:contain;padding:7% 7% 14%}
.g2 figure{aspect-ratio:1}
.g2.tall figure{aspect-ratio:9/16;max-height:78vh}

.split{display:grid;grid-template-columns:1fr 2fr;gap:36px;align-items:center;margin-top:72px}
.split p{color:var(--ink-2);margin-top:10px}

.note{margin-top:56px;background:var(--obsidian);color:#d9dadd;border-radius:var(--r);padding:28px 32px;border-left:3px solid var(--gold)}
.note .k{color:var(--gold);margin-bottom:8px}
.note b{color:#fff}

/* timeline */
.timeline{list-style:none;display:grid;gap:56px}
.timeline li{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:40px;align-items:center}
.timeline li:nth-child(even){grid-template-columns:1fr minmax(0,340px)}
.timeline li:nth-child(even) .tl-media{order:2}
.tl-media{border-radius:var(--r);overflow:hidden;aspect-ratio:9/16;max-height:600px;background:#111}
.tl-media video,.tl-media img{width:100%;height:100%;object-fit:cover}
.tl-copy .date{color:var(--gold);margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em}
.tl-copy h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:12px}
.tl-copy p{color:var(--ink-2);max-width:52ch}

.fixes-title{font-size:clamp(1.8rem,4vw,2.8rem);margin:110px 0 28px}
.fixes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fixes article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 22px}
.fixes .k{margin-top:14px}
.fixes .k:first-child{margin-top:0}
.fixes p:not(.k){margin-top:3px}
.fixes article p:nth-of-type(6){color:var(--ink);font-weight:500}

.bullets{margin:32px 0 0 1.1em;max-width:70ch;color:var(--ink-2);display:grid;gap:8px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.card h3{margin:8px 0 12px;font-size:1.5rem}
.card p{color:var(--ink-2);margin-top:10px}
.card a{color:var(--ink);font-weight:600}

/* contact */
.contact{background:var(--obsidian);color:#fff;padding:120px 0 40px}
.contact h2{font-size:clamp(2rem,5vw,3.8rem);max-width:20ch}
.contact .sub{color:#a9abb0;margin-top:16px;font-size:1.1rem}
.contact .cta{margin-top:36px}
.fine{color:#6c6f74;margin-top:90px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(8,9,10,.93);display:flex;align-items:center;justify-content:center;padding:4vw;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-height:92vh;max-width:92vw;border-radius:10px;background:#f0eee8}
.lightbox button{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer}

/* film */
.dim-in{opacity:.6;font-weight:400;margin-left:4px}
.film-card{position:relative;display:block;width:100%;aspect-ratio:2.39/1;border:0;border-radius:var(--r);overflow:hidden;background:#000;cursor:pointer;margin-bottom:28px;padding:0}
.film-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .3s}
.film-card:hover img{transform:scale(1.02);opacity:.85}
.film-card .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:rgba(201,162,74,.92);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(201,162,74,.18);transition:transform .2s}
.film-card:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.film-card .play svg{width:34px;height:34px;fill:var(--obsidian);margin-left:4px}
.film-meta{position:absolute;left:16px;bottom:14px;color:#e8e2d2;text-align:left}
.cinema{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center}
.cinema[hidden]{display:none}
.cinema video{width:100%;max-height:100vh}
.cinema button{position:absolute;top:14px;right:20px;background:rgba(0,0,0,.4);border:0;border-radius:50%;width:44px;height:44px;color:#fff;font-size:1.8rem;cursor:pointer}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:900px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(2){border-right:0;margin-right:0}
  .spec{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr}
  .split,.v2-intro{grid-template-columns:1fr}
  .v2-intro{gap:24px}
  .fixes,.cards{grid-template-columns:1fr}
  .timeline li,.timeline li:nth-child(even){grid-template-columns:1fr;gap:18px}
  .timeline li:nth-child(even) .tl-media{order:0}
  .tl-media{max-width:360px;max-height:540px}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .nav{padding:12px 16px}
  .nav nav a:not(.btn-sm){display:none}
  .facts{grid-template-columns:1fr}
  .facts div{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}
  .spec,.g3{grid-template-columns:1fr}
  .g2.tall{grid-template-columns:1fr}
  .project{padding:80px 0}
  .hero-copy{padding-bottom:9vh}
  figcaption{font-size:.64rem}
}

/* mirror */
.mirror-row{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:48px;align-items:center}
.mirror-vid{aspect-ratio:9/16;max-height:80vh}
.mirror-row .bullets{margin-top:0}
@media (max-width:900px){.mirror-row{grid-template-columns:1fr}.mirror-vid{max-width:420px}}
@media (max-width:620px){.film-meta{display:none}.film-card{aspect-ratio:16/9}.film-card img{object-position:60% 40%}.film-card .play{width:64px;height:64px}}