*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#efefef;color:#676767;
     font:15px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%;height:auto}

header{background:#fff;padding:18px 22px;display:flex;flex-wrap:wrap;gap:14px 24px;
       align-items:baseline;justify-content:space-between;position:relative;z-index:5}
nav{display:flex;flex-wrap:wrap;gap:18px}
nav a{color:#000;text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
nav a:hover{border-bottom-color:#999}
nav a[aria-current]{border-bottom-color:#000}
.brand{color:#000;font-weight:700;text-decoration:none;white-space:nowrap}

/* project grid */
.grid{display:grid;grid-template-columns:repeat(7,1fr)}
.grid a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:#e2e2e2}
.grid img{width:100%;height:100%;object-fit:cover;transition:opacity .25s,transform .5s}
.grid a:hover img{opacity:.55}
.grid span{position:absolute;inset:auto 0 0 0;padding:10px 12px;color:#000;background:rgba(255,255,255,.82);
           font-size:13px;opacity:0;transition:opacity .25s}
.grid a:hover span{opacity:1}

/* project page */
.project{display:grid;grid-template-columns:200px minmax(0,1fr) 80px;gap:34px;
         padding:34px 22px 90px;max-width:1180px}
.project .side h1{margin:0 0 14px;font-size:19px;font-weight:700;color:#000}
.project .side{font-size:13px;line-height:1.7}
.project .side p{margin:0 0 10px}
.project .side a{color:#4a4a4a;word-break:break-word}
.stack > *{margin-bottom:14px}
.nextprev{display:flex;gap:6px;justify-content:flex-end}
.nextprev a,.nextprev span{display:flex;align-items:center;justify-content:center;width:26px;height:22px;
  background:#e2e2e2;color:#555;text-decoration:none;font-size:12px}
.nextprev a:hover{background:#d2d2d2;color:#000}
.nextprev span{opacity:.35}

/* text pages */
.page{padding:34px 22px 90px;max-width:900px}
.page h1{font-size:19px;font-weight:700;color:#000;margin:0 0 18px}
.page p{margin:0 0 12px}
.page .caption{margin:22px 0 8px;color:#555}
.video{position:relative;width:100%;padding-bottom:56.25%;margin:0 0 26px;background:#ddd}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* breakdown */
.breakdown{padding:34px 22px 90px;max-width:1000px;font-size:13.5px}
.breakdown h1{font-size:19px;color:#000;margin:0 0 22px}
.breakdown h2{font-size:15px;color:#000;margin:26px 0 8px;font-weight:700}
.breakdown ul{list-style:none;margin:0;padding:0}
.breakdown li{padding:3px 0;border-bottom:1px solid #e4e4e4}

footer{padding:26px 22px 40px;font-size:12px;color:#999}
footer a{color:#777}

@media (min-width:2200px){.grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:1700px){.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:1400px){.grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:1000px){
  .project{grid-template-columns:1fr;gap:20px}
  .nextprev{justify-content:flex-start}
}
@media (max-width:700px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(3,1fr)}
  header{padding:14px 16px}
  .project,.page,.breakdown{padding-left:16px;padding-right:16px}
}
@media (max-width:400px){.grid{grid-template-columns:repeat(2,1fr)}}