/* Single-theme on purpose: the works are photographed on pure white walls, so the site is that wall. */
:root{
  --wall:#ffffff; --ink:#111111; --mute:#8b8b8b; --line:#e6e6e6; --plate:#f4f4f4;
  --blue:#012ed7; /* sampled from the works */
  --g:clamp(16px,2.6vw,36px);
  --font:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--ink);font:400 13px/1.55 var(--font);padding-inline:var(--g);padding-block:0;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue)}
a:focus-visible,button:focus-visible{outline:1px solid var(--blue);outline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.m{color:var(--mute)}

header{display:flex;justify-content:space-between;align-items:baseline;gap:12px 32px;flex-wrap:wrap;padding-block:22px 0}
.name{font-weight:500;font-size:14px;letter-spacing:-.005em}
nav{display:flex;gap:6px 22px;flex-wrap:wrap}
nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lang{display:flex;gap:6px;color:var(--mute)}
.lang a{color:var(--mute)}
.lang a[aria-current]{color:var(--ink)}

main{min-height:70vh;padding-block:48px 120px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}

/* home */
.home figure{margin:0}
.home .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}
.home .pair a{display:block}
@media (min-width:641px){.home .pair{width:82%;margin-inline:auto}} /* pulls the two views ~18% closer on desktop */
.home img{display:block;width:100%;height:78vh;object-fit:contain}
@media (max-width:640px){.home .pair{grid-template-columns:1fr}.home img{height:auto;max-height:80vh}}
.home figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px}

/* works index */
.series{padding-block:0 88px}
.series-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.series-head h2{font:300 clamp(30px,3.6vw,46px)/1 var(--font);letter-spacing:-.02em;margin:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 20px}
.tile{display:flex;flex-direction:column;gap:8px}
.tile .ph{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease}
.tile a:hover img{transform:scale(1.03)}
.tile .empty{background:var(--plate);color:var(--mute);font-size:11px}
.tile .t{display:flex;flex-direction:column;gap:1px}

/* series page */
.sp .side{grid-column:1/5;display:flex;flex-direction:column;gap:20px;align-self:start;position:sticky;top:24px}
.sp .side h1{font:300 clamp(34px,4vw,54px)/1 var(--font);letter-spacing:-.02em;margin:0}
.sp .side p{margin:0;max-width:42ch}
.sp .side ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sp .side li{display:flex;justify-content:space-between;gap:12px;padding-block:7px;border-bottom:1px solid var(--line)}
.sp .tiles{grid-column:6/13;grid-template-columns:repeat(2,1fr)}

/* work page */
.wp .info{grid-column:1/5;display:flex;flex-direction:column;gap:28px;align-self:start;position:sticky;top:24px}
.wp h1{font:600 clamp(28px,3vw,40px)/1.02 var(--font);letter-spacing:-.025em;margin:0}
.wp h1 span{display:block;color:#c9c9c9}
.wp dl{margin:0;display:grid;grid-template-columns:96px 1fr;gap:4px 12px;font-size:12px}
.wp dt{color:var(--mute)}
.wp dd{margin:0}
.req{align-self:start;border:1px solid var(--blue);color:var(--blue);padding:9px 16px;font-size:12px}
.req:hover{background:var(--blue);color:#fff}
.reqbox{font-size:12px;max-width:40ch;border-left:1px solid var(--blue);padding-left:12px}
.acc{border-top:1px solid var(--ink)}
.acc details{border-bottom:1px solid var(--ink)}
.acc summary{list-style:none;display:flex;justify-content:space-between;padding-block:9px;cursor:pointer;font-size:12px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"}
.acc details[open] summary::after{content:"–"}
.acc .desc{display:flex;flex-direction:column;gap:10px;padding-bottom:14px;font-size:12px;line-height:1.6;max-width:44ch}
.acc .desc p{margin:0}
.av{color:var(--blue)}
.tile .av{font-size:11px}
.tile .av::before,.wp dd.av::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:1px}
.wp .imgs{grid-column:5/13;display:flex;flex-direction:column;gap:72px}
.wp .imgs figure{margin:0;display:flex;flex-direction:column;gap:8px}
.wp .imgs img{width:100%;max-height:88vh;object-fit:contain}
.wp .imgs figcaption{font-size:11px;color:var(--mute)}
.pager{grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:14px;margin-top:40px;font-size:12px}

/* text pages */
.tp .lead{grid-column:1/5}
.tp .lead h1{font:300 clamp(34px,4vw,54px)/1 var(--font);letter-spacing:-.02em;margin:0}
.tp .body{grid-column:6/12;display:flex;flex-direction:column;gap:18px;max-width:62ch}
.tp .body p{margin:0}
.tp .body h3{font-size:13px;font-weight:500;margin:22px 0 0;padding-bottom:6px;border-bottom:1px solid var(--line)}
.note{font-size:11px;color:var(--mute);border:1px dashed var(--line);padding:10px 12px}
.about .pic{grid-column:1/4;max-width:340px}
.about .pic img{width:100%;display:block}
.pgrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.pgrid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media (max-width:860px){.pgrid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px}}
.statement p{font-size:14px;line-height:1.65}
.statement p:first-of-type{font-size:18px;line-height:1.45;letter-spacing:-.005em}
.cvp .sw{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cvp .sw li{display:grid;grid-template-columns:170px 1fr;gap:16px}
.cvp .sw i{font-style:normal;font-weight:500}
@media (max-width:560px){.cvp .sw li{grid-template-columns:1fr;gap:2px}}
.cvpic{display:block;width:100%;max-width:340px;margin-top:32px}
@media (max-width:860px){.cvpic{max-width:280px;margin-top:20px}}
.about .pic figcaption{font-size:11px;color:var(--mute);margin-top:8px}
.contact dl{margin:0;display:grid;grid-template-columns:120px 1fr;gap:10px 16px}
.contact dt{color:var(--mute)}
.contact dd{margin:0}

footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-block:16px 28px;font-size:11px;color:var(--mute)}

@media (max-width:860px){
  .sp .side,.sp .tiles,.wp .info,.wp .imgs,.tp .lead,.tp .body,.about .pic{grid-column:1/-1;position:static}
  .about .pic{max-width:280px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .wp .imgs{gap:32px}
}
@media (max-width:480px){.tiles,.sp .tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tile img{transition:none}}

/* site additions */
.reqd summary{list-style:none;cursor:pointer;display:inline-block}
.reqd summary::-webkit-details-marker{display:none}
.reqd[open] summary{background:var(--blue);color:#fff}
.reqd p{margin:12px 0 0}
main{min-height:60vh}
.pfig{margin:0;display:flex;flex-direction:column;gap:6px}
.pfig figcaption{font-size:11px;color:var(--mute)}
.wp .noimg{aspect-ratio:4/5;max-height:70vh;background:var(--plate);display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:12px}