:root{
  --wall:#d9dad6;      /* gallery wall */
  --wall-2:#cfd0cc;    /* recess / hover */
  --ink:#000;
  --label:#545551;
  --line:#b9bab5;
  --sheet:#f3f1e8;     /* matches the drawings' paper */
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--wall);color:var(--ink);font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
img{display:block;max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--gut);top:8px;background:var(--sheet);padding:6px 10px}

/* header: the name is the only voice that isn't a wall label */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:12px 28px;flex-wrap:wrap;padding:22px var(--gut)}
.top .name{font-size:16px;font-weight:600;text-decoration:none;letter-spacing:-.005em}
.top nav{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:15px}
.top nav a{text-decoration:none;color:var(--label)}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current=page]{color:var(--ink);text-decoration:underline}

main{padding:0 var(--gut)}

/* ---------- the wall ---------- */
.wall{display:flex;gap:var(--g,48px);align-items:flex-end;justify-content:center;
      padding:clamp(40px,8vh,96px) 0 clamp(28px,5vh,56px)}
.hung{margin:0;flex:0 1 auto;text-decoration:none}
.wall{--g:clamp(28px,5vw,72px)}
.hung img{height:min(62vh,640px,calc((100vw - 2*var(--gut) - 2*var(--g)) / 3 * 1.29));min-height:300px;width:auto;max-width:none;
  box-shadow:0 1px 1px rgba(0,0,0,.18),0 10px 18px -6px rgba(0,0,0,.28),0 30px 50px -24px rgba(0,0,0,.35)}
a.hung:hover img{transform:translateY(-2px);box-shadow:0 1px 1px rgba(0,0,0,.18),0 14px 22px -6px rgba(0,0,0,.3),0 38px 60px -24px rgba(0,0,0,.38)}
.hung img{transition:transform .25s ease,box-shadow .25s ease}
@media (max-width:820px){
  .wall{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gut)*-1);padding-left:var(--gut);padding-right:var(--gut);scrollbar-width:none}
  .wall::-webkit-scrollbar{display:none}
  .hung{scroll-snap-align:center}
  .hung img{height:min(62vh,470px)}
}

/* wall label: the small card beside a work in a gallery */
.wl{font-size:13px;line-height:1.45;color:var(--ink);margin-top:14px;max-width:30ch}
.wl b{font-weight:600}
.wl span{display:block;color:var(--label)}

/* ---------- text blocks ---------- */
.intro{max-width:34em;margin:clamp(32px,6vh,64px) auto 0;text-align:center}
.intro p,.intro .home-h1{font-size:clamp(19px,2.2vw,23px);line-height:1.4;margin:0;letter-spacing:-.01em;font-weight:400}
.intro .sub{margin-top:14px;font-size:15px;color:var(--label);letter-spacing:0}

.sec{max-width:1080px;margin:clamp(64px,12vh,120px) auto 0}
.sec h2{font-size:15px;font-weight:600;margin:0 0 18px;letter-spacing:0}
h1{font-size:clamp(26px,3.4vw,36px);line-height:1.15;font-weight:600;letter-spacing:-.015em;margin:clamp(32px,6vh,64px) 0 10px}
.lede{font-size:clamp(18px,2vw,21px);line-height:1.45;max-width:32em;margin:0;color:var(--ink)}
.text{max-width:36em}
.text p{margin:0 0 1em}
.label{color:var(--label)}
.small{font-size:14px}

/* index: one line per thing, like a gallery's list of works */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a,.index .row{display:grid;grid-template-columns:4.5em 1fr auto;gap:16px;padding:13px 0;text-decoration:none;align-items:baseline}
.index .y,.index .k{color:var(--label);font-size:14px}
.index a:hover{background:var(--wall-2)}
.index a:hover .t{text-decoration:underline}
@media (max-width:560px){.index a,.index .row{grid-template-columns:3.6em 1fr}.index .k{grid-column:2;margin-top:-10px}}
.index.plain a{grid-template-columns:1fr auto}
@media (max-width:560px){.index.plain a{grid-template-columns:1fr}.index.plain .k{grid-column:1}}

.btn{display:inline-block;margin-top:6px;padding:11px 18px;background:var(--ink);color:var(--wall);text-decoration:none;font-size:15px}
.btn:hover{background:#2b2b2b}

/* ---------- work page ---------- */
.room{display:grid;grid-template-columns:1fr;gap:28px;padding:clamp(48px,10vh,104px) 0;border-bottom:1px solid var(--line);max-width:1180px;margin:0 auto}
.room:last-of-type{border-bottom:0}
@media (min-width:900px){.room{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:end}}
.room .main-img{justify-self:center}
.room .main-img img{max-height:82vh;width:auto;box-shadow:0 1px 1px rgba(0,0,0,.18),0 12px 20px -6px rgba(0,0,0,.28),0 34px 56px -24px rgba(0,0,0,.36)}
.room .card .wl{max-width:none;font-size:14px;margin:0 0 16px}
.room .card p{font-size:15px;margin:0 0 16px}
.room .card a{font-size:15px}
.details{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,36px)}
@media (min-width:640px){.details{grid-template-columns:1fr 1fr}}
.details figure{margin:0}
.details img{width:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 8px 16px -8px rgba(0,0,0,.3)}
.details figcaption{font-size:13px;color:var(--label);margin-top:10px}

/* ---------- about ---------- */
.two{display:grid;grid-template-columns:1fr;gap:48px;max-width:1080px}
@media (min-width:900px){.two{grid-template-columns:1.15fr .85fr;gap:72px}}
.cv{margin:0;display:grid;grid-template-columns:4.5em 1fr;gap:9px 16px;font-size:15px}
.cv dt{color:var(--label)}.cv dd{margin:0}
.cvh{font-size:14px;font-weight:600;color:var(--label);margin:0 0 10px}

/* ---------- essay ---------- */
.essay{max-width:34em;margin:0 auto;padding-bottom:40px}
.essay h1{margin-bottom:6px}
.essay .meta{color:var(--label);margin-bottom:40px}
.essay p{font-size:18px;line-height:1.7;margin:0 0 1.1em}
.essay .end{margin-top:48px;padding-top:18px;border-top:1px solid var(--line);font-size:15px}
.essay .end p{font-size:15px;margin:0 0 .6em}

.note{background:var(--wall-2);padding:16px 18px;max-width:36em;font-size:15px}

footer{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding:clamp(64px,12vh,120px) var(--gut) 32px;font-size:14px;color:var(--label)}
footer nav{display:flex;gap:6px 20px;flex-wrap:wrap}
footer a{color:var(--label)}
footer a:hover{color:var(--ink)}