:root{--ground:#F3EFE8;--ink:#1A1918;--dark:#171615;--grey:#5E5E52;--line:#D9D3C9;--olive:#AFB0A1;--warm:#B9B0AA;--note:#7A5A2E}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Archivo Narrow",sans-serif;color:var(--ink);background:var(--ground);font-size:18px;line-height:1.5}
a{color:inherit;text-decoration:none}
a:hover{color:var(--grey)}
img{display:block;max-width:100%}
.wrap{max-width:1440px;margin:0 auto;padding:0 48px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:200}

/* header */
.hdr{padding:28px 0}
.hdr .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px}
.brand{display:flex;flex-direction:column;width:190px;color:var(--ink)}
.brand svg{width:190px;height:auto;display:block}
.brand span{display:block;margin:2px 0 0 8px;font-size:11px;font-weight:500;letter-spacing:4.9px;white-space:nowrap}
.tagline{margin:0 auto 0 8px;align-self:flex-end;padding:0 0 4px 28px;border-left:1px solid var(--line);font-size:13px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--grey);line-height:1.6}
.nav{display:flex;gap:32px;font-size:15px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase}
.nav a{border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--ink);color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--ink);color:var(--ink);font:inherit;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;padding:8px 14px;cursor:pointer}

/* type */
.page-head{padding:48px 0 40px}
h1{margin:0;font-size:88px;line-height:1;font-weight:700;letter-spacing:-1px}
.lede{margin:16px 0 0;font-size:18px;color:var(--grey)}
.eyebrow{margin:0 0 8px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--grey)}
h2.sec{margin:0 0 24px;font-size:15px;letter-spacing:3px;text-transform:uppercase;font-weight:600}
.section{padding-top:88px}

/* tiles */
.grid{display:grid;gap:48px 24px;grid-template-columns:1fr 1fr}
.grid.g3{grid-template-columns:repeat(3,1fr);gap:40px 24px}
.grid.g4{grid-template-columns:repeat(4,1fr);gap:32px 20px}
.tile{display:block}
.tile .ph{overflow:hidden;aspect-ratio:3/2;background:#E6E0D6}
.grid.g3 .tile .ph,.grid.g4 .tile .ph{aspect-ratio:4/3}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img{transform:scale(1.03)}
.tile .t{margin:14px 0 2px;font-size:26px;font-weight:600;line-height:1.2}
.grid.g3 .tile .t{font-size:22px}.grid.g4 .tile .t{font-size:19px}
.tile .s{margin:0;font-size:15px;color:var(--grey)}

/* credits */
.credits{width:100%;border-collapse:collapse;font-size:19px}
.credits th{padding:0 16px 12px 0;text-align:left;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);font-weight:500}
.credits td{padding:16px 16px 16px 0;border-top:1px solid var(--line);vertical-align:baseline}
.credits td.t{font-weight:600}
.credits td.m{color:var(--grey)}
.credits a{border-bottom:1px solid var(--line)}
.credits a:hover{border-bottom-color:var(--ink)}
.note{display:block;font-size:14px;font-weight:400;color:var(--note);margin-top:3px}
.status{padding:40px 0;color:var(--grey)}

/* home */
.hero{position:relative;aspect-ratio:21/9;max-height:78vh;width:100%;overflow:hidden;background:#222}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero .slide.on{opacity:1}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .cap{position:absolute;left:48px;bottom:28px;color:#F3EFE8;font-size:16px;letter-spacing:.5px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero .cap b{display:block;font-size:24px;font-weight:600}
.intro{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:96px 0 0}
.intro p.big{margin:0;font-size:32px;line-height:1.3;font-weight:500}
.intro .seen{margin-top:28px;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey)}

/* project */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:16px}
.meta p{margin:0}.meta .l{margin-bottom:4px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--grey)}
.pnote{margin:28px 0 0;font-size:22px;color:var(--note)}
.setnav{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:32px;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500}
.setnav span{color:var(--grey)}.setnav a{border-bottom:1px solid var(--line);padding-bottom:2px}
.set{padding-top:120px}
.set h2{margin:0;font-size:64px;line-height:1;font-weight:700;letter-spacing:-.5px}
.set .desc{margin:20px 0 0;font-size:22px;line-height:1.45;max-width:860px;color:#3A3935}
.preview{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.preview button{display:block;padding:0;border:0;background:#E6E0D6;cursor:zoom-in;overflow:hidden;width:100%}
.preview img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.preview button:hover img{transform:scale(1.03)}
.preview .big{aspect-ratio:2.2/1}
.preview .row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.preview .row button{aspect-ratio:4/3}
.preview.boards .big,.preview.boards .row button{aspect-ratio:2480/1755;background:#1b1b19}
.seeall{display:inline-block;margin-top:24px;font:inherit;font-size:18px;font-weight:600;letter-spacing:1px;text-transform:uppercase;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 3px;cursor:pointer;color:var(--ink)}
.endnav{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:24px;margin-top:120px;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500}
.endnav .back{color:var(--grey)}.endnav .k{color:var(--grey)}

/* lightbox */
.lb{position:fixed;inset:0;background:#121110;z-index:1000;display:none;align-items:center;justify-content:center}
.lb.open{display:flex}
.lb figure{margin:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:72px 120px 88px}
.lb img,.lb video{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:#F3EFE8;cursor:pointer;font-family:inherit;line-height:1;padding:12px}
.lb .x{top:16px;right:24px;font-size:44px}
.lb .pv,.lb .nx{top:50%;transform:translateY(-50%);font-size:72px}
.lb .pv{left:16px}.lb .nx{right:16px}
.lb .cap{position:absolute;left:48px;right:48px;bottom:20px;margin:0;display:flex;justify-content:space-between;gap:24px;color:var(--warm);font-size:15px;letter-spacing:1px}
.lb .cap span:first-child{color:#F3EFE8;text-transform:uppercase;letter-spacing:2px}

/* about */
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;padding-top:48px}
.bio p{margin:0 0 18px;font-size:19px;line-height:1.65;color:#3A3935}
.headline{margin:0 0 8px;font-size:32px;line-height:1.3;font-weight:500}
.disc{margin:0 0 32px;font-size:18px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:28px 32px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line);font-size:17px;line-height:1.55}
.facts p{margin:0}.facts .l{margin-bottom:6px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--grey)}
.recog{background:#181818;color:#F3EFE8;margin-top:112px}
.recog .wrap{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding-top:80px;padding-bottom:80px}
.recog h2{color:var(--olive)}
.recog .l{margin:0 0 6px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--olive)}
.recog .list{border-top:1px solid #3A3935;margin-bottom:40px}
.recog .list p{margin:0;padding:16px 0;border-bottom:1px solid #3A3935;font-size:19px}
.recog .list small{display:block;color:var(--warm);font-size:17px}

/* footer */
.ftr{background:var(--dark);color:#F3EFE8;margin-top:96px}
.ftr .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-top:72px;padding-bottom:72px}
.ftr .brand{color:#F3EFE8;width:240px}.ftr .brand svg{width:240px}
.ftr .disc{margin:16px 0 0;font-size:14px;letter-spacing:3px;color:var(--olive)}
.ftr .links{display:flex;flex-direction:column;gap:10px;font-size:18px;text-align:right}
.ftr a{color:#F3EFE8}.ftr a:hover{color:var(--warm)}

@media (max-width:1100px){.tagline{display:none}.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .wrap{padding:0 20px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ground);flex-direction:column;gap:18px;padding:24px 20px;border-bottom:1px solid var(--line);z-index:50}
  .hdr{position:relative}.hdr.open .nav{display:flex}
  .brand,.brand svg{width:150px}
  h1{font-size:52px}.set h2{font-size:40px}
  .grid,.grid.g3,.grid.g4,.intro,.split,.facts,.recog .wrap,.preview .row{grid-template-columns:1fr}
  .intro{gap:24px;padding-top:56px}.intro p.big{font-size:24px}
  .credits .hide-sm{display:none}.credits{font-size:17px}
  .hero{aspect-ratio:4/5;max-height:none}.hero .cap{left:20px;bottom:20px}
  .lb figure{padding:64px 12px 170px}.lb .pv,.lb .nx{font-size:44px;top:auto;bottom:84px;transform:none}
  .lb .cap{left:20px;right:20px;flex-direction:column;gap:2px;bottom:140px;font-size:13px}
  .ftr .wrap{flex-direction:column;align-items:flex-start}.ftr .links{text-align:left}
  .endnav{flex-direction:column;margin-top:72px}
  .set{padding-top:80px}.section{padding-top:64px}
}
.split:has(#portrait:empty){grid-template-columns:minmax(0,860px)}
#portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
#portrait p{margin:12px 0 0;font-size:15px;color:var(--grey)}