@font-face{font-family:"Univers TE20";font-weight:300;font-style:normal;font-display:block;src:url(../assets/fonts/UniversTE20-300.ttf) format("truetype")}

@font-face{font-family:"Univers TE20";font-weight:100;font-style:normal;font-display:block;src:url(../assets/fonts/UniversTE20-100.woff2) format("woff2")}

:root{
  --bg:#000;
  --fg:#fff;
  --muted:#a1a1a6;
  --line:#6a6a6a;
  --pad:4%;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{overflow-x:clip;scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth;background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--fg);text-transform:lowercase;
  font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{text-transform:lowercase}
.page{width:100%}

/* nav */
.nav{
  height:clamp(72px,8.333vw,120px);padding:calc((clamp(72px,8.333vw,120px) - clamp(36px,3.89vw,56px))/2) var(--pad) 0;
  display:grid;grid-template-columns:20% 1fr;align-items:start;
}
.logo{display:block;width:fit-content;justify-self:start;position:relative;font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:100;font-size:clamp(14px,1.944vw,28px);letter-spacing:.01em;line-height:normal}
.logo::after{
  content:attr(data-tip);position:absolute;top:50%;left:100%;transform:translateY(-50%);z-index:30;margin-left:8px;
  padding:4px 8px;background:#151516;color:#fff;border-radius:8px;
  font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight:100;font-size:12px;line-height:1.4;letter-spacing:.02em;white-space:pre;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;
}
.logo:hover::after,.logo:focus-visible::after{opacity:1;visibility:visible}
.links{display:grid;grid-template-columns:repeat(4,1fr);font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:100;font-size:clamp(14px,1.944vw,28px);letter-spacing:.01em;line-height:normal}

.menu-btn{display:none;justify-content:flex-end;align-items:center;width:44px;height:clamp(36px,3.89vw,56px);padding:0;background:transparent;border:0;cursor:pointer}
.menu-btn svg{display:block;height:100%;width:auto}
.menu-btn .ic-closed{aspect-ratio:15/73}
.menu-btn .ic-open{display:none;aspect-ratio:73/73}
.nav.open .menu-btn .ic-closed{display:none}
.nav.open .menu-btn .ic-open{display:block}

/* hero title */
.title{
  margin:0;padding:4% var(--pad);
  font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight:100;font-size:clamp(44px,11.111vw,160px);line-height:1;letter-spacing:-.02em;
}

/* works */
.works{margin-top:0}
.work{position:relative;display:block;overflow:hidden;aspect-ratio:1440/810}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.work .meta{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:var(--pad);padding-top:calc(var(--pad)*1.4);
  background:linear-gradient(to bottom,rgba(0,0,0,0),#000 100%);
}
.work h2{margin:0 0 8px;font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:clamp(18px,1.944vw,28px);line-height:1;letter-spacing:-.02em;width:7.75em}
.work .date{margin:0;font-size:clamp(12px,1.111vw,16px);line-height:1.5}
.work .desc{margin:0;font-size:clamp(12px,1.111vw,16px);line-height:1.5;width:min(405px,32vw)}

.more-works{display:contents}
.more-works[hidden]{display:none}
.halves{display:grid;grid-template-columns:1fr 1fr}
.half{aspect-ratio:1}
.half .meta{justify-content:flex-start;gap:24px;padding:calc(var(--pad)*2);padding-top:calc(var(--pad)*2.8)}
.half h2{flex:none;width:7.14em;margin:0}
.half .desc{flex:1 1 0;width:auto}

.more{
  width:calc(100% - var(--pad)*2);padding:0;background:transparent;color:inherit;cursor:pointer;appearance:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;
  height:clamp(48px,4.167vw,60px);margin:clamp(40px,5.556vw,80px) var(--pad) clamp(40px,5.556vw,80px);
  border:1px solid var(--line);font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:100;font-size:clamp(16px,1.944vw,28px);letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;
}

.work .date,.work .desc,.cta p{font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:100}
.work .date,.work .desc{font-weight:100}

/* cta */
.cta{
  background:#151516;color:#fff;
  min-height:clamp(420px,51.667vw,744px);padding:80px var(--pad);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;text-align:center;
}
.cta h2{margin:0 0 16px;font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:clamp(40px,4.444vw,64px);line-height:1.1;letter-spacing:-.02em}
.cta p{margin:0 auto;max-width:693px;color:var(--muted);font-size:clamp(18px,1.944vw,28px);line-height:1.286}
.social{display:flex;gap:16px;align-items:center}
.social a{display:block;width:24px;height:24px;line-height:0}
.social svg{width:24px;height:24px;display:block}

@media (max-width:720px){
  :root{--pad:20px}
  .nav{position:relative;z-index:20;grid-template-columns:1fr auto;align-items:center;padding-top:0}
  .menu-btn{display:flex}
  .links{display:none;position:fixed;inset:0;z-index:1;background:#000;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 72px + 24px) var(--pad) 24px;font-size:clamp(44px,9.722vw,140px);overflow-y:auto}
  .nav.open .links{display:flex}
  html.menu-open{overflow:hidden}
  .logo,.menu-btn{position:relative;z-index:2}
  .logo{font-size:20px}
  .title{font-size:clamp(44px,9.722vw,140px)}
  .links a{padding:12px 0}
  .work{aspect-ratio:auto}
  .work img{position:static;aspect-ratio:16/9;height:auto}
  .work .meta{position:static;flex-direction:column;gap:12px;padding:20px var(--pad) 0;background:none}
  .work h2{width:auto}
  .work .desc{width:auto}
  .works,.more-works,.halves{display:grid;gap:40px}
  .halves{grid-template-columns:1fr}
  .half img{aspect-ratio:1}
  .half .meta{gap:12px;padding:20px var(--pad) 0}
  .half h2{width:auto}
  .half .desc{flex:none}
}

/* about view */
.links a{-webkit-tap-highlight-color:transparent}
html[data-view="about"],html[data-view="about"] body{background:#fff;color:#000}
html[data-view="about"] .menu-btn svg{filter:invert(1)}
html[data-view="about"] .links{background:#fff}
.about{
  display:flex;flex-direction:column;align-items:center;gap:clamp(40px,5.556vw,80px);
  padding:0 var(--pad) 5.5556%;background:#fff;color:#000;
}
.about-title span{display:block}
.about-title .dim{color:#a1a1a6}
.about .hero{position:relative;width:100%;aspect-ratio:1320/744;overflow:hidden;border-radius:36px}
.about .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.about .col{width:50vw}
.about p,.about h2.q{
  margin:0;font-family:"Univers TE20",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;font-weight:100;
  font-size:clamp(18px,1.944vw,28px);line-height:1.5;letter-spacing:-.02em;
}
.about .qa{display:flex;flex-direction:column;gap:clamp(12px,1.667vw,24px)}
.about .qa .q{font-weight:300}
.about .ph{
  width:50vw;aspect-ratio:960/541;mix-blend-mode:luminosity;border-radius:24px;
  background:url(../assets/images/placeholder.webp) center/cover no-repeat;
}
@media (max-width:720px){
  .about .col,.about .ph{width:100%}
}