/* Art catalogue: the selected exhibition index design. */
:root { color-scheme: light; --ink:#333; --muted:#666; --line:#e5e5e0; --paper:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--site-font); font-weight:300; -webkit-font-smoothing:antialiased; font-size:1rem; line-height:1.75; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid #666; outline-offset:6px; }
img { display:block; width:100%; height:auto; }
figure,h1,h2,p { margin:0; }
h1,h2 { font-weight:300; }
.overline { text-transform:uppercase; letter-spacing:.09em; font-size:var(--site-meta-size); color:var(--muted); }
.work-kind { color:var(--muted); font-size:var(--site-meta-size); letter-spacing:.025em; }
.number { font-size:var(--site-meta-size); color:var(--muted); font-variant-numeric:tabular-nums; }
.arrow { font-size:17px; font-weight:400; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:110px 5.5vw 0; padding:28px 0 36px; border-top:1px solid var(--line); font-size:.8rem; }
footer p { color:var(--muted); }
.skip { position:absolute; top:-100px; padding:10px; background:#fff; z-index:10; }
.skip:focus { top:0; }
.index-intro { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; margin:55px 8vw 60px; }
.index-intro h1 { font-size:var(--site-h1-size); letter-spacing:-.035em; line-height:1.15; margin-top:16px; }
.index-intro>p { max-width:400px; color:var(--muted); font-size:var(--site-body-size); margin-bottom:4px; }
.index-works { margin:0 8vw; border-top:1px solid var(--line); }
.index-work { display:grid; grid-template-columns:40px 1fr 30% 18px; gap:28px; align-items:center; padding:27px 0; border-bottom:1px solid var(--line); }
.index-work .number { align-self:start; padding-top:6px; }
.index-work h2 { font-size:var(--site-h2-size); line-height:1.35; letter-spacing:-.025em; margin-bottom:8px; }
.index-work p { color:var(--muted); font-size:var(--site-body-size); max-width:360px; margin-bottom:18px; }
.index-work img { aspect-ratio:16 / 10; object-fit:cover; }
.index-work .arrow { justify-self:end; }
.index-work:hover h2 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
@media (max-width:700px) {
 footer { align-items:flex-start; flex-direction:column; gap:10px; margin-top:65px; }
 .index-intro { grid-template-columns:1fr; gap:25px; margin:35px 7vw; }
 .index-works { margin:0 7vw; }
 .index-work { grid-template-columns:20px 1fr 16px; gap:12px; padding:25px 0; }
 .index-work figure { grid-column:2; grid-row:2; }
 .index-work .arrow { grid-column:3; grid-row:1; align-self:start; }
 .index-work p { margin-bottom:12px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }