:root{--u:40px;--ink:#000;--faint:#e6e6e6;--mute:#6b6b6b}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#fff}
body{font:15px/20px "Helvetica Neue",Helvetica,Arial,"Segoe UI",Tahoma,sans-serif;color:var(--ink);background-color:#fff;background-image:linear-gradient(var(--faint) 1px,transparent 1px);background-size:100% var(--u);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sheet{max-width:1280px;margin:0 auto;border-left:1px solid var(--ink);border-right:1px solid var(--ink);min-height:100vh}

header{height:var(--u);display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--ink)}
header b{font-weight:700;letter-spacing:.02em}
nav{display:flex;gap:40px}

.row{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--ink);padding:var(--u) 20px}
.label{color:var(--mute)}
.c{min-width:0}
.hero{padding-top:80px;padding-bottom:80px}
.hero h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;font-weight:400;font-size:32px;line-height:40px;letter-spacing:-.015em}
.studio p,.meta p{max-width:56ch}
.studio p+p,.meta p+p{margin-top:20px}

.work ul{list-style:none}
.work li{border-top:1px solid var(--ink)}
.work li:first-child{border-top:0}
.work li a{display:grid;grid-template-columns:1fr auto;column-gap:20px;padding:10px 0}
.work li:first-child a{padding-top:0}
.work li a span:nth-child(2),.work li a span:nth-child(3){color:var(--mute)}
.work li a span:nth-child(2){grid-column:1}
.work li a span:nth-child(3){grid-column:2;grid-row:1/3;align-self:start}

.contact a{font-size:24px;line-height:40px;letter-spacing:-.02em;word-break:break-word}

/* project page */
.plate{display:inline-block;background:#fff;padding:20px}
.plate img{display:block;height:120px;width:auto}
.grid2{display:grid;grid-template-columns:1fr;gap:20px}
.cell{background:#fff;border:1px solid var(--ink);display:grid;place-items:center;aspect-ratio:1}
.cell img{width:68%;height:auto;display:block}
.ph{display:block;width:100%;height:auto;border:1px solid var(--ink)}
.ph2{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--ink)}

footer{display:flex;justify-content:space-between;gap:20px;padding:10px 20px;color:var(--mute);height:var(--u);align-items:center}

@media(min-width:760px){
  .row{grid-template-columns:repeat(12,1fr)}
  .label{grid-column:1/4}
  .c{grid-column:4/13;border-left:1px solid var(--ink);padding-left:20px;margin:calc(var(--u) * -1) 0;padding-top:var(--u);padding-bottom:var(--u)}
  .hero .c{grid-column:1/13;border-left:0;padding-left:0;margin:0;padding-top:0;padding-bottom:0}
  .hero h1{font-size:80px;line-height:80px;letter-spacing:-.025em}
  .work li a{grid-template-columns:1fr 1fr 80px}
  .work li a span:nth-child(2){grid-column:2}
  .work li a span:nth-child(3){grid-column:3;grid-row:auto;text-align:right}
  .contact a{font-size:64px;line-height:80px;letter-spacing:-.04em}
  .plate img{height:240px}
  .grid2{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:no-preference){
  .hero h1{animation:in .9s cubic-bezier(.2,.7,.1,1) both}
  @keyframes in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}