/* Layout: small monospaced type at the edges of a white page, the work centered and as large as the screen allows. Nothing else. */
:root{
  --wall:#ffffff;
  --ink:#28282a;
  --soft:#8a8986;
  --rule:#eeedeb;
  --tint:#f5f5f3;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --top:44px;
  --edge:max(12px,env(safe-area-inset-left,0px));
  --edge-r:max(12px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:var(--top)}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--mono);font-size:12px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--soft)}
i{font-style:normal}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,p{font-size:inherit;font-weight:400;margin:0}

/* bar: name left, sections center, contact right */
.bar{position:fixed;top:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) var(--edge-r) 10px var(--edge);background:var(--wall)}
.nav{text-align:center}
.nav a[aria-current="page"],.right a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.right{text-align:right}
main{padding-top:var(--top)}

/* landing: one painting, whole, with its details set flush to its edges */
.is-landing{height:100svh;overflow:hidden}
.landing{height:calc(100svh - var(--top));display:flex;align-items:center;justify-content:center;padding:20px var(--edge-r) 28px var(--edge)}
.feature{margin:0;display:inline-grid;grid-template-rows:auto auto;gap:12px;max-height:100%}
.feature a{display:block;line-height:0}
.feature img{max-height:calc(100svh - var(--top) - 48px - 72px);max-width:calc(100vw - 24px);width:auto;height:auto}
.feature figcaption{width:0;min-width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:2px}
.f-year{font-variant-numeric:tabular-nums}
.f-meta{grid-column:1 / -1;color:var(--soft)}
/* series index: an even grid, every work contained in the same cell */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:56px 32px;padding:40px var(--edge-r) 80px var(--edge)}
.cell{display:flex;flex-direction:column;gap:10px}
.cell-img{aspect-ratio:1;position:relative;display:block}
.cell-img img{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-height:100%;max-width:100%;width:auto;height:auto;transition:opacity .3s}
.cell:hover img{opacity:.85}
.cell-cap{display:flex;justify-content:space-between;gap:12px}
.cell-cap span{color:var(--soft)}

/* single work: title and year on the left, details on the right, the work centered between them */
.side{position:absolute;top:50%;transform:translateY(-50%);text-align:center}
.side-l{left:var(--edge)}
.side-r{right:var(--edge-r)}
.work{position:relative;height:calc(100svh - var(--top));padding:8px clamp(150px,20vw,320px) 56px;display:flex;align-items:center;justify-content:center}
.work-img{height:100%;width:100%;display:flex;align-items:center;justify-content:center}
.work-img img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.work .side{width:clamp(130px,17vw,280px);display:grid;gap:6px}
.work .side-r p:last-child a{text-decoration:underline;text-underline-offset:3px}
.pager{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:0;right:0;display:flex;justify-content:center;align-items:center;gap:20px;font-variant-numeric:tabular-nums}
.pager a{padding:4px 8px}

/* text pages */
.text{max-width:560px;margin:0 auto;padding:48px var(--edge-r) 96px var(--edge);display:grid;gap:40px}
.text h2{color:var(--soft);margin-bottom:12px}
.text p{margin-bottom:1em;font-size:13px;line-height:1.7}
.text a{text-decoration:underline;text-underline-offset:3px}
.cv{max-width:720px;gap:32px}
.cv ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cv li{display:grid;grid-template-columns:5ch minmax(0,1fr);gap:16px}
.cv li span{color:var(--soft);font-variant-numeric:tabular-nums}
.cv li.plain{display:block}

@media (max-width:760px){
  .bar{grid-template-columns:1fr auto;row-gap:4px}
  .nav{grid-column:1 / -1;grid-row:2;text-align:left}
  :root{--top:62px}
  .side{position:static;transform:none;width:auto;text-align:left}
  .feature img{max-height:calc(100svh - var(--top) - 40px - 96px)}
  .work{height:auto;padding:16px var(--edge-r) 80px var(--edge);display:grid;gap:14px;justify-content:stretch}
  .work-img{height:auto}
  .work .side{width:auto}
  .pager{position:static;justify-content:flex-start;padding:0}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px;padding-top:24px}
  .cell-cap{flex-direction:column;gap:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}