@font-face{font-family:"NHD";src:url("fonts/neue-haas-display-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"NHD";src:url("fonts/neue-haas-display-roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --ink:#000; --paper:#fff; --line:rgba(0,0,0,.15); --grey:#ececec;
  --font:"NHD","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:500;font-size:14px;line-height:1.45;letter-spacing:-.005em;word-spacing:.06em}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,figure{margin:0}
main{min-height:60vh}

/* header */
.top{display:grid;grid-template-columns:250px 1fr;align-items:start;padding:14px 10px 0;min-height:130px}
.menu{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.menu a,.ig{text-decoration:underline;text-underline-offset:2px;line-height:1.45}
.menu a{font-size:14px}
.menu a.big,.ig{font-size:16px;margin-bottom:8px}
.ig{justify-self:start}

/* home */
.hero-head{position:relative;z-index:2;overflow:hidden}
.name{font-size:12vw;display:inline-block;line-height:1.1;letter-spacing:-.03em;white-space:nowrap;margin-top:-.08em;font-weight:500;padding-left:0}
.taglines{display:grid;grid-template-columns:250px 250px;padding:6px 10px 0}
.taglines p{max-width:250px}
.taglines p:first-child{max-width:140px}
.hero{position:relative;z-index:1;margin-top:-115px}
.hero .ph{border-radius:16px;overflow:hidden;mix-blend-mode:multiply}

/* section heads */
.h2{padding:11px var(--pad) 0;border-top:1px solid var(--ink)}
.title{font-size:clamp(38px,5.1vw,65px);line-height:1.1;letter-spacing:-.03em;font-weight:500}
.withsub{display:grid;grid-template-columns:minmax(0,720px) 1fr;gap:10px 0;align-items:start;padding-top:0}
.withsub.near{grid-template-columns:280px 1fr}
.withsub.near2{grid-template-columns:335px 1fr}
.sub{display:flex;flex-direction:column;align-items:flex-start;font-size:14px;line-height:1.3;padding-top:4px}
.sub a{text-decoration:underline;text-underline-offset:2px}
.sub a[aria-current]{text-decoration-thickness:2px}

.intro{font-size:clamp(22px,2.9vw,38px);line-height:1.15;letter-spacing:-.02em;max-width:1080px;padding:28px 16px 30px}
.bio{max-width:1250px}
.works{padding:40px 16px 90px}
.works ul{list-style:none;padding:0;margin-top:22px}
.works li{font-size:clamp(26px,3.6vw,46px);line-height:1.25;letter-spacing:-.025em}
.works a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s}
.works a:hover,.works a:focus-visible{background-size:100% 2px}

/* detail pages */
.work{font-size:clamp(26px,3.4vw,44px);line-height:1.05;letter-spacing:-.025em;font-weight:500;padding:22px var(--pad) 6px;max-width:1150px}
.work.flush{padding:0 0 14px}
.meta{display:grid;grid-template-columns:264px 1fr;gap:4px 0;padding:10px 14px 28px;max-width:1000px}
.meta p:only-child{grid-column:1/-1}
.small{font-size:13px;line-height:1.3;margin-bottom:16px}
.txt{max-width:560px}
.txt+.txt{margin-top:1em}
.more{display:inline-block;margin-top:18px;font-size:16px;text-decoration:underline;text-underline-offset:3px}
.info{align-self:start}

/* 12-col grid */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 16px;padding:0 var(--pad) 60px;align-items:start}
.g>*{grid-column:var(--c,1/-1)}

/* images */
.ph{position:relative;width:100%}
.ph img{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;object-position:var(--pos,50% 50%)}
.ph figcaption{font-size:12px;line-height:1.35;margin-top:6px;font-weight:400}
.ph figcaption .n{font-weight:400;margin-right:6px}
.ph figcaption .cr{font-weight:400;color:#555}
.widecap figcaption{width:max(100%,210px)}
.credits{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:22px 0 0;font-size:12px;line-height:1.35}
.credits dt{font-weight:500;color:#000}.credits dd{margin:0;font-weight:500}
.credits-note{font-size:12px;line-height:1.35;font-weight:500;margin-top:12px;max-width:34em}
.ph.missing img{display:none}
.ph.missing::before{content:attr(data-file);display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;aspect-ratio:var(--ar);background:var(--grey);color:#777;font-size:12px;word-break:break-all}
.about .ph.missing::before,.g .ph.missing::before{min-height:80px}

/* index of texts on writing pages */
.index{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding:70px var(--pad) 12px;font-weight:400;color:rgba(0,0,0,.55)}
.index a{text-decoration:none}
.index a:hover,.index a:focus-visible{color:var(--ink);text-decoration:underline}
.entry{scroll-margin-top:20px}

/* horizontal strips (magazine pages) */
.strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:thin}
.strip .slide{flex:0 0 auto;height:min(706px,62vw);width:auto;aspect-ratio:var(--ar);scroll-snap-align:start}
.strip .slide img{height:100%;width:auto}
.meta.three{grid-template-columns:264px 300px 1fr;max-width:none;padding-bottom:40px}
.etitle a{text-decoration:underline;text-underline-offset:2px}

/* CV */
.cv{font-weight:400;font-size:11px;line-height:1.4}
.cv h3{font-size:1em;font-weight:500;margin:1.6em 0 .6em}
.cv ul{list-style:disc;padding-left:1.2em;margin:0}
.cv li{margin-bottom:.15em}
.bio{max-width:none;padding-right:16px}
/* browser mockups of Diptyk articles, centred and smaller than the page */
.mock{max-width:760px;margin:40px auto 56px;padding:0 var(--pad)}
.mock a{display:block;transition:transform .25s}
.mock .ph{border-radius:12px;overflow:hidden;box-shadow:0 28px 60px rgba(20,20,19,.16),0 6px 18px rgba(20,20,19,.08);border:1px solid rgba(0,0,0,.08)}
.mock .ph img{display:block}
.mock a:hover{transform:translateY(-3px)}
/* equal-height image row */
.eqrow{display:flex;gap:16px;align-items:flex-start}
.eqrow .ph{flex-basis:0;min-width:0}
/* artists block starts at 412px on a 1280 layout */
.shift412{margin-left:-1.9vw}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:24px;padding:26px 24px 30px;font-size:14px;letter-spacing:-.02em}

/* tablet */
@media (max-width:1000px){
  .withsub{grid-template-columns:1fr}
  .withsub.near,.withsub.near2{grid-template-columns:1fr}
  .sub{padding-top:0;padding-bottom:6px}
}

/* phone */
@media (max-width:760px){
  :root{--pad:12px}
  .top{grid-template-columns:1fr auto;min-height:0;padding-bottom:14px}
  .taglines{grid-template-columns:1fr 1fr;gap:12px;padding-bottom:16px}
  .taglines p,.taglines p:first-child{max-width:none}
  .hero{margin-top:0;padding:0 var(--pad)}
  .hero .ph{border-radius:10px}
  .g{gap:22px;padding-bottom:40px}
  .g>*{grid-column:1/-1}
  .g>.ph{margin-top:0!important}
  .eqrow{flex-direction:column}
  .eqrow .ph{flex-basis:auto;width:100%}
  .shift412{margin-left:0}
  .cv{font-size:13px}
  .g .ph[style*="180/120"],.g .ph[style*="125/187"],.g .ph[style*="142/214"]{width:60%}
  .meta,.meta.three{grid-template-columns:1fr}
  .index{flex-direction:column;padding-top:28px}
  .strip{flex-direction:column;overflow:visible}
  .strip .slide{height:auto;width:100%}
  .strip .slide img{width:100%;height:auto}
  .intro{padding:20px 12px 24px}
  .works{padding:24px 12px 60px}
  .work{padding-top:16px}
  .foot{padding:22px 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.credit-line{font-weight:500}
.cv .pdfs{margin-top:.8em}
.cv .pdfs a{text-decoration:underline;text-underline-offset:2px}