:root{--bg:#0a0a0b;--bg-2:#101012;--ink:#efece4;--ink-dim:#8f8c85;--line:rgba(239,236,228,.12);--accent:#c9a35b;
--display:'Anton',sans-serif;--serif:'Instrument Serif',serif;--sans:'Inter',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:#0a0a0b}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:99;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 8s steps(10) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}30%{transform:translate(3%,-12%)}50%{transform:translate(8%,4%)}70%{transform:translate(-9%,6%)}90%{transform:translate(4%,9%)}}
.bar{position:fixed;left:0;right:0;height:14px;background:#000;z-index:100}.bar.top{top:0}.bar.bottom{bottom:0}
nav{position:fixed;top:14px;left:0;right:0;z-index:90;display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;mix-blend-mode:difference}
nav .logo{font-family:var(--display);font-size:1.05rem;letter-spacing:.14em;color:#fff;text-decoration:none}
nav .links{display:flex;gap:2.2rem;flex-wrap:wrap;justify-content:flex-end}
nav .links a{color:#fff;text-decoration:none;font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;opacity:.75;transition:opacity .3s}
nav .links a:hover,nav .links a.on{opacity:1}
@media(max-width:720px){nav .links{gap:1.1rem}nav .links a{font-size:.62rem;letter-spacing:.12em}}
.page-head{padding:11rem 4vw 3.5rem;display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.page-head h1{font-family:var(--display);font-size:clamp(2.6rem,8vw,6.5rem);text-transform:uppercase;line-height:.95}
.page-head .num{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1.4rem;margin-right:1.2rem}
.page-head .note{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.2rem;padding:0 4vw 6rem}
.card{position:relative;overflow:hidden;text-decoration:none;color:var(--ink);aspect-ratio:16/9;background:var(--bg-2);grid-column:span 6;
opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.card.reveal{opacity:1;transform:translateY(0)}
.card:nth-child(6n+1),.card:nth-child(6n+5){grid-column:span 7}
.card:nth-child(6n+2),.card:nth-child(6n+4){grid-column:span 5}
@media(max-width:820px){.card{grid-column:span 12!important}}
.card .media{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.8) contrast(1.02);transition:transform .8s cubic-bezier(.16,1,.3,1),filter .8s}
.card:hover .media{transform:scale(1.05);filter:saturate(1) contrast(1.05)}
.card .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,6,7,.85))}
.card .meta{position:absolute;left:1.6rem;right:1.6rem;bottom:1.4rem;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.card .meta h3{font-family:var(--display);font-size:clamp(1.05rem,1.8vw,1.55rem);text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.card .meta .tag{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;padding-bottom:.25rem}
.card .view{position:absolute;top:1.3rem;right:1.4rem;z-index:2;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);opacity:0;transform:translateY(-6px);transition:all .4s}
.card:hover .view{opacity:1;transform:translateY(0)}
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 1.9rem;border:1px solid var(--line);color:var(--ink);text-decoration:none;
font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;transition:all .35s;background:rgba(10,10,11,.3)}
.btn:hover{border-color:var(--accent);color:var(--accent)}
footer{border-top:1px solid var(--line);padding:1.8rem 4vw 2.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
/* project page */
.proj{max-width:1100px;margin:0 auto;padding:10rem 4vw 5rem}
.proj .kicker{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.proj h1{font-family:var(--display);font-size:clamp(2rem,6vw,4.6rem);text-transform:uppercase;line-height:1;margin-bottom:2rem}
.credits{display:flex;flex-wrap:wrap;gap:.8rem 3rem;margin-bottom:3rem}
.credits .c .role{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.2rem}
.credits .c .name{font-size:.95rem;font-weight:400}
.embed{position:relative;aspect-ratio:16/9;background:#000;margin-bottom:1.4rem}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pimg{width:100%;display:block;margin-bottom:1.4rem}
.stills{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.5rem 0}
@media(max-width:640px){.stills{grid-template-columns:1fr}}
.stills img{width:100%;display:block;filter:saturate(.85);transition:filter .4s}
.stills img:hover{filter:saturate(1)}
.specs{border-left:1px solid var(--accent);padding-left:1.4rem;margin:2.5rem 0;color:var(--ink-dim);font-size:.9rem;white-space:pre-line}
.specs .h{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.pn{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);margin-top:4rem;padding-top:2rem}
.pn a{color:var(--ink);text-decoration:none;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;transition:color .3s}
.pn a:hover{color:var(--accent)}
.pn .lbl{display:block;font-size:.58rem;color:var(--ink-dim);margin-bottom:.3rem}
@media (prefers-reduced-motion: reduce){
.grain{animation:none}.card{opacity:1;transform:none;transition:none}
.card .media{transition:none}*{scroll-behavior:auto!important}}