html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
a{color:var(--state-link);text-decoration:none}
a:hover{color:var(--color-accent);text-decoration:none}
p a{text-decoration:underline;text-underline-offset:2px}
.dz-rows a:hover .dz-rowname,.dz-list a:hover{color:var(--state-link)}
/* Works checklist uses the system's .table; the one addition is the italic serif work title. */
.dz-checklist td:first-child{font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-style:italic;font-size:20px;color:var(--color-text)}
/* The 10px label and the 28px serif title share a row but not a baseline when
   the grid top-aligns them; sit the number on the title's baseline instead. */
.section-head{align-items:baseline}
/* Where a standfirst makes the head tall (01, 04), the number reads better
   centred between the section rule and the rule below it; the 8px offset
   accounts for the head's asymmetric padding (16 above, 32 below). */
.section-head:has(p) > .label{align-self:center;margin-top:11.5px}
/* Statement: three columns of equal width — two of prose, one the portrait. The
   prose columns balance (paragraphs may split across them) and the portrait
   stretches to the row's height, so all three end level. */
/* The last press row's hairline sits 96px above the next section's ink rule,
   reading as two lines with a void between; the section rule is enough. */
.dz-press > a:last-child{border-bottom:0}
.dz-prose{column-count:2;column-gap:var(--space-10);column-fill:balance}
.dz-portraitcol{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:var(--rhythm-caption)}
.dz-portrait{position:relative;min-height:300px;background:var(--surface-plate);overflow:hidden}
.dz-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* Colophon band under the statement: one continuous hairline holds all four
   groups, rather than the band rule plus a rule per column. */
.dz-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-10);border-top:1px solid var(--color-text);margin-top:var(--space-16);padding-top:var(--space-5)}
.dz-fact{display:grid;gap:var(--space-3);align-content:start}
.dz-factlines{display:grid;gap:2px;font-size:var(--type-body);line-height:1.55;color:var(--text-body)}
@media (max-width:1239px){.dz-about{grid-template-columns:1fr !important}.dz-prose{grid-column:auto !important;column-count:1;max-width:68ch}.dz-portraitcol{max-width:420px}.dz-portrait{aspect-ratio:1103/1400;min-height:0}}
/* ── Artwork detail viewer ────────────────────────────────────────────────
   Full-bleed paper above the page, as the system's dialog is, but the body is a
   two-column composition: catalogue entry left, painting right. The painting
   column takes the room; the entry column is deliberately narrow. */
.dz-viewer{position:fixed;inset:0;z-index:60;background:var(--color-bg);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.dz-viewer-body{min-height:0;display:grid;grid-template-columns:minmax(230px,20%) minmax(0,1fr);gap:var(--space-12);align-items:center;padding:var(--space-8) var(--page-margin);background:var(--color-surface)}
.dz-viewer-plate{grid-column:2;grid-row:1;min-height:0;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dz-viewer-plate img{max-width:100%;max-height:100%;object-fit:contain}
.dz-viewer-info{grid-column:1;grid-row:1;align-self:center;max-height:100%;overflow-y:auto}
.dz-viewer-strip{display:flex;gap:var(--space-2);padding:var(--space-3) var(--page-margin);border-top:1px solid var(--color-divider);overflow-x:auto;scrollbar-width:none}
.dz-viewer-strip::-webkit-scrollbar{display:none}
/* Phone: the work stays large and centred with its entry directly beneath, then
   the filmstrip. A flex column rather than a grid, so the desktop rules' row and
   column placement cannot apply and stack the two on top of each other. */
@media (max-width:900px){
.dz-viewer-body{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-6);padding:var(--space-5) var(--page-margin-mobile);overflow-y:auto;-webkit-overflow-scrolling:touch}
.dz-viewer-plate{flex:none;height:auto;min-height:0;max-height:none;overflow:visible}
.dz-viewer-plate img{max-height:56vh}
.dz-viewer-info{flex:none;max-height:none;overflow:visible;border-top:1px solid var(--color-divider);padding-top:var(--space-5)}
.dz-viewer-bar{gap:var(--space-3) var(--space-4);padding-inline:var(--page-margin-mobile);flex-wrap:wrap}
.dz-viewer-strip{padding-inline:var(--page-margin-mobile)}
}
@media (max-width:860px){
.dz-hero,.dz-about,.dz-collhead,.dz-split,.dz-essay,.dz-rowinner{grid-template-columns:1fr !important;gap:var(--space-8) !important}
.dz-rail{border-left:0 !important;border-top:1px solid var(--color-text);padding-left:0 !important;padding-top:var(--space-5) !important}
.dz-contact,.dz-facts{grid-template-columns:1fr 1fr !important;gap:var(--space-8) !important}
/* Press rows stack on a phone: source, title, action, all on the left edge —
   the three-column form squeezes the action into the middle of the row. */
.dz-press > a{grid-template-columns:1fr !important;gap:6px !important;align-items:start}
.dz-press .row-action{text-align:left !important}
.dz-contactwrap{grid-template-columns:1fr !important;gap:var(--space-10) !important}
.dz-featured,.dz-colls,.dz-pieces{grid-template-columns:1fr !important;gap:var(--space-12) !important}
.dz-sticky{position:static !important}
.dz-checklist td:first-child{font-size:18px}
}