[hidden]{display:none !important}
:root{
  --ground:#f3f2ee; --ink:#151513; --muted:#66645d; --rule:#d8d6cf; --tile:#e2e0da;
  --mono:'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --name:'Archivo Narrow', 'Arial Narrow', sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
a:hover{opacity:.55}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:1440px;margin:0 auto;padding:28px clamp(16px,3vw,40px) 48px;display:flex;flex-direction:column;gap:56px}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px}
.name{font-family:var(--name);font-weight:600;font-size:22px;letter-spacing:.32em;text-transform:uppercase}
nav{display:flex;flex-wrap:wrap;gap:4px 28px}
nav a{padding:12px 0}
nav a[aria-current=page]{text-decoration:underline;text-underline-offset:4px}
.tagline{margin:-24px 0 0;color:var(--muted);text-transform:lowercase}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 14px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:minmax(0,1fr)}}
.tile{display:flex;flex-direction:column;gap:8px}
.tile:hover{opacity:1}
.frame{aspect-ratio:16/9;background:var(--tile);overflow:hidden}
.frame video,.frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.tile:hover .frame video{transform:scale(1.03)}
.tile .client{color:var(--muted)}

.contact{display:flex;flex-direction:column;gap:24px;margin-top:20px;padding-top:28px;border-top:1px solid var(--rule);font-size:13px;line-height:1.5}
.contact h2{margin:0;font:inherit;color:var(--muted)}
.contact .group{display:flex;flex-direction:column;gap:10px}
.contact .reps{display:flex;flex-direction:column;gap:16px}
.contact .col{display:flex;flex-direction:column}

/* project page */
.project{max-width:1180px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.player{position:relative;aspect-ratio:16/9;background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px;padding-top:8px}
h1{margin:0;font-family:var(--name);font-weight:500;font-size:clamp(28px,4vw,44px);line-height:1.05}
.titleblock{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.category{color:var(--muted)}
.category:empty{display:none}
dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 28px;flex:0 1 420px}
dt{color:var(--muted)} dd{margin:0}
.press{display:flex;flex-direction:column;gap:10px;padding-top:24px;border-top:1px solid var(--rule)}
.press .label{color:var(--muted)}
.press a{display:flex;flex-wrap:wrap;gap:2px 16px}
.press .outlet{min-width:80px}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-top:28px;border-top:1px solid var(--rule)}
.pager #next{justify-self:end;text-align:right}
.pager .home{justify-self:center}
@media (max-width:600px){.pager{grid-template-columns:1fr 1fr}.pager .home{grid-column:1/-1;grid-row:2;justify-self:center}}
.pager a{padding:12px 0}

@media (prefers-reduced-motion:reduce){.frame video{transition:none}.tile:hover .frame video{transform:none}}

/* about page */
.about{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start}
.about .pics{flex:1 1 360px;max-width:560px;display:flex;flex-direction:column;gap:14px}
.about .portrait{aspect-ratio:16/9;background:#000;overflow:hidden}
.about .still{display:block;width:100%;height:auto}
.about .portrait video{width:100%;height:100%;object-fit:cover;display:block}
.about .bio{flex:1 1 320px;max-width:520px;display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.65}
.about .bio p{margin:0}