@font-face { font-family: W; src: url(fonts/worksans-latin-var.woff2); font-weight: 400 700; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: #111; font: 400 19px/1.55 W, system-ui, sans-serif; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.lab { font: 500 14px/1 W, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #777; }

header { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; }
header .name { font: 600 22px/1 W, sans-serif; letter-spacing: .14em; text-decoration: none; }
header nav { display: flex; gap: 30px; }
header nav a { font: 600 15px/1 W, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: #555; }
header nav a:hover { color: #111; }

section { padding: 70px 0 90px; border-top: 3px solid #111; }
.top { display: flex; align-items: center; gap: 22px; }
.top img { width: 72px; height: 72px; }
h1, h2 { font: 600 64px/1 W, sans-serif; letter-spacing: .02em; margin: 0; }
.lead { font-size: 24px; color: #444; max-width: 640px; margin: 22px 0 0; }

.dl { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn { display: inline-block; padding: 20px 34px; font: 600 18px/1 W, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border: 3px solid #111; color: #111; background: #fff; transition: background .1s, color .1s; }
.btn:hover { background: #111; color: #fff; }
.btn.solid { background: #111; color: #fff; }
.btn.solid:hover { background: #fff; color: #111; }
.btn.off { opacity: .35; pointer-events: none; }
.small { font-size: 15px; color: #777; margin-top: 14px; }

.shot { margin-top: 56px; border: 3px solid #111; display: block; width: 100%; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.shots img { width: 100%; border: 2px solid #111; display: block; }

.feat { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 60px; margin-top: 60px; }
.feat div { padding: 18px 0; border-bottom: 1px solid #e3e3e3; }
.feat b { display: block; font: 600 21px/1.3 W, sans-serif; }
.feat span { color: #666; font-size: 17px; }

footer { border-top: 3px solid #111; padding: 30px 0 50px; font-size: 15px; color: #777; }
footer p { margin: 6px 0; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  header nav { display: none; }
  h1, h2 { font-size: 42px; }
  .lead { font-size: 20px; }
  .btn { width: 100%; text-align: center; }
  .shots, .feat { grid-template-columns: 1fr; }
}

/* projects folder (home page) */
.crumb { font: 600 15px/1 W, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #777; margin: 50px 0 18px; }
.crumb a { text-decoration: none; color: #777; }
.crumb a:hover { color: #111; }
.folder { border-top: 3px solid #111; }
.folder a { display: flex; align-items: center; gap: 28px; padding: 26px 8px; border-bottom: 1px solid #e3e3e3; text-decoration: none; transition: background .1s; }
.folder a:hover { background: #f2f2f2; }
.folder img { width: 64px; height: 64px; flex: none; }
.folder .n { flex: 1; min-width: 0; }
.folder b { display: block; font: 600 30px/1.2 W, sans-serif; }
.folder span { color: #666; font-size: 18px; }
.folder .kind { font: 500 13px/1 W, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #777; white-space: nowrap; }
.folder .go { font: 400 34px/1 W, sans-serif; color: #111; }
.count { font-size: 15px; color: #777; margin-top: 16px; }
@media (max-width: 760px) { .folder .kind { display: none; } .folder b { font-size: 24px; } }