:root{--bg:#ffffff;--text:#1a1a1a}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.55}
a:focus-visible{outline:2px solid #1a1a1a;outline-offset:3px}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

header{padding:52px 0 40px}
.brand{font-size:20px;letter-spacing:.34em;font-weight:300}
nav{margin-top:22px;display:flex;gap:26px;flex-wrap:wrap;font-size:13px;letter-spacing:.12em}
nav a[aria-current="page"]{border-bottom:1px solid #1a1a1a;padding-bottom:2px}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:44px 32px;
  padding-bottom:80px;
}
.tile{margin:0}
.tile figcaption{margin-top:12px;font-size:13px;letter-spacing:.04em}
.tile .medium{color:#777;font-size:11px;margin-top:4px;line-height:1.5}
.tile .thumb{
  display:flex;align-items:flex-end;justify-content:flex-start;
  min-height:180px;
}

.work{padding-bottom:80px}
.work h1{font-size:22px;font-weight:300;letter-spacing:.16em;margin:0 0 6px}
.work .medium{color:#777;font-size:14px;margin:0 0 34px}
.work figure{margin:0 0 34px}
.pager{
  display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid #e6e6e6;padding-top:22px;font-size:13px;letter-spacing:.08em;
}

.cv{padding-bottom:80px;max-width:70ch}
.cv h1{font-size:22px;font-weight:300;letter-spacing:.16em;margin:0 0 28px}
.cv h2{font-size:13px;letter-spacing:.14em;font-weight:700;margin:34px 0 12px}
.cv h3{font-size:14px;font-weight:400;margin:22px 0 6px}
.cv p{margin:0 0 8px;font-size:14px}
.cv a{text-decoration:underline;text-underline-offset:2px}
.cv ul,.cv ol{margin:0 0 12px;padding-left:0;list-style:none}
.cv li{font-size:14px;margin:0 0 6px}

.social{display:flex;gap:18px;flex-wrap:wrap}
.social a{letter-spacing:.08em}
footer{
  border-top:1px solid #e6e6e6;padding:26px 0 60px;
  font-size:12px;color:#777;letter-spacing:.06em;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

@media (max-width:640px){
  .wrap{padding:0 18px}
  header{padding:34px 0 26px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:32px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}