:root{
  --paper:#ffffff;
  --ink:#111111;
  --ink-soft:#3d3d3d;
  --mute:#8c8c8c;
  --rule:#e4e4e4;

  --gap:clamp(20px,2.4vw,34px);
  --pad:clamp(22px,5vw,72px);

  --block:clamp(18px,2.4vh,26px);
  --section:clamp(100px,15vh,180px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.5;
  font-weight:400;
  letter-spacing:-0.001em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .25s ease}
a:hover{border-color:var(--ink)}
a:focus-visible{outline:1px solid var(--ink);outline-offset:5px;border-color:transparent}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
figure{margin:0}

/* ---------- the field: 12 flexible columns ---------- */
.page{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.field{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}

.c-label {grid-column:1 / span 2}
.c-text  {grid-column:3 / span 5}
.c-textw {grid-column:3 / span 6}
/* Quotes sit right of centre. The artist's own are set smaller than the body
   text, so their block stays compact; film quotes keep the width their line
   breaks need. */
.c-quote {grid-column:8 / span 5}
.c-film  {grid-column:7 / span 6}
.c-margin{grid-column:9 / span 4}        /* marginal figures */
.c-oppo  {grid-column:8 / span 5;padding-left:clamp(0px,3vw,48px)}
.c-wide  {grid-column:2 / span 6}
.c-artist{grid-column:8 / span 5}

/* ---------- type roles ---------- */
.label{
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.5;
  margin:0;
  padding-top:.6em;
}
.caption{
  font-size:12px;
  line-height:1.55;
  color:var(--mute);
  margin:16px 0 0;
  max-width:36em;
  text-wrap:pretty;
}
.lead{font-size:17px;line-height:1.45;letter-spacing:-0.006em}

.quote{
  font-style:italic;
  font-weight:500;
  font-size:clamp(12.5px,1.02vw,13px);
  line-height:1.5;
  letter-spacing:-0.004em;
  margin:0;
  text-wrap:pretty;
}
.quote--strong{font-weight:600}
.quote--plain{font-weight:400;font-size:clamp(14px,1.2vw,15.5px);line-height:1.42;letter-spacing:-0.008em}

.statement{font-weight:600;font-size:16.5px;line-height:1.45;letter-spacing:-0.006em}

/* ---------- opening ---------- */
.opening{padding-top:clamp(44px,9vh,104px)}
.opening figure{display:flex;flex-direction:column;align-items:center}
.opening img{max-height:min(54vh,660px);width:auto;max-width:min(100%,720px)}
.opening .caption{text-align:center;max-width:none}

.masthead{margin-top:clamp(60px,12vh,132px)}
.masthead h1{
  font-size:clamp(29px,3.3vw,44px);
  font-weight:600;
  letter-spacing:-0.03em;
  line-height:1.02;
  margin:0;
  text-transform:uppercase;
}
.masthead .sub{
  margin-top:.9em;
  font-size:clamp(15px,1.3vw,18px);
  font-weight:500;
  letter-spacing:-0.006em;
  line-height:1.45;
}
.masthead .facts{
  margin-top:1.7em;
  font-size:13px;
  letter-spacing:.015em;
  line-height:1.75;
  color:var(--ink-soft);
}
.masthead .facts span{display:block}

/* ---------- rhythm ---------- */
.section{margin-top:var(--section)}
.airy{margin-top:calc(var(--section) * .58)}
.near{margin-top:calc(var(--section) * .34)}
.hug{margin-top:calc(var(--section) * .2)}
.stack > * + *{margin-top:var(--block)}

.fig-slim img{max-width:155px}
.fig-small img{max-width:180px}

/* ---------- close ---------- */
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.colophon{
  padding:calc(var(--section) * .46) 0 clamp(64px,10vh,120px);
  font-size:13px;
  letter-spacing:.015em;
  color:var(--ink-soft);
  line-height:1.75;
}
.colophon .name{
  display:block;
  font-size:19px;
  font-weight:600;
  letter-spacing:-0.014em;
  color:var(--ink);
  margin-bottom:.55em;
}

/* ---------- quiet reveal ----------
   Additive only: text is visible by default and is hidden solely once the
   script has confirmed it can reveal it again. If JS, IntersectionObserver
   or the render pipeline fail, the page still reads. */
.rv{opacity:1}
html.reveal .rv{opacity:0;transform:translateY(8px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
html.reveal .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.reveal .rv{opacity:1;transform:none;transition:none}
}

/* ---------- narrow ---------- */
@media (max-width:980px){
  :root{--section:clamp(84px,11vh,130px)}
  body{font-size:15.5px}
  .field{grid-template-columns:repeat(6,1fr)}
  .c-label,.c-text,.c-textw,.c-quote,.c-film,.c-margin,.c-oppo,.c-wide,.c-artist{grid-column:1 / -1}
  .c-artist{margin-top:calc(var(--block) * .9)}
  .c-label{padding-top:0;margin-bottom:calc(var(--block) * .6)}
  .c-oppo{padding-left:0}
  .c-text,.c-textw{max-width:600px}
  /* Quotes hold to the right-hand side on narrow screens; figures centre,
     the way the opening drawing does. */
  .c-quote{max-width:72%;margin-left:auto}
  .c-film{max-width:86%;margin-left:auto}
  .c-margin,.c-oppo{max-width:min(100%,430px);margin:calc(var(--block) * 1.1) auto 0}
  .c-margin img,.c-oppo img,.c-wide img{margin-left:auto;margin-right:auto}
  figure .caption{text-align:center;max-width:none}
  .fig-slim img{max-width:130px}
  .fig-small img{max-width:150px}
  .lead{font-size:16.5px}
  .opening img{max-height:42vh}
}
@media (max-width:560px){
  .quote{font-size:13px}
  .quote--plain{font-size:14.5px}
  .statement{font-size:16px}
  .c-quote{max-width:80%}
  .c-film{max-width:92%}
}

/* ═══════════════ site chrome (multi-page) ═══════════════ */
.masthead-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:16px 28px;
  padding:clamp(22px,4vh,38px) 0 0;
}
.masthead-bar .wordmark{
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.masthead-bar .wordmark a{border:0;padding:0}
.sitenav{display:flex;flex-wrap:wrap;gap:6px 22px}
.sitenav a{
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  border:0;
  padding:0 0 2px;
  border-bottom:1px solid transparent;
  color:var(--ink-soft);
}
.sitenav a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.sitenav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}

.page-title{
  font-size:clamp(26px,3vw,38px);
  font-weight:600;
  letter-spacing:-0.028em;
  line-height:1.05;
  margin:0;
  text-transform:uppercase;
}
.standfirst{font-size:17px;line-height:1.5;letter-spacing:-0.006em;margin-top:1.1em}

/* ── CV listing ── */
.cv{margin:0}
.cv-row{
  display:grid;
  grid-template-columns:62px 1fr;
  column-gap:22px;
  padding:9px 0;
  border-top:1px solid var(--rule);
}
.cv-row:first-child{border-top:0}
.cv-year{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.cv-what{font-size:14.5px;line-height:1.5}
.cv-what b{font-weight:600}

/* ── works listing ── */
.work-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.work-title{
  font-size:clamp(20px,2vw,26px);
  font-weight:600;
  letter-spacing:-0.022em;
  line-height:1.1;
  margin:0;
  text-transform:uppercase;
}
.work-meta{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.synopsis{margin-top:1.2em}
.credits{
  margin-top:1.6em;
  font-size:12.5px;
  line-height:1.65;
  color:var(--ink-soft);
}
.credits dt{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin-top:1.4em;
}
.credits dt:first-child{margin-top:0}
.credits dd{margin:.3em 0 0}

/* ── index list (home) ── */
.index-list{list-style:none;margin:0;padding:0}
.index-list li{border-top:1px solid var(--rule)}
.index-list a{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:24px;
  align-items:baseline;
  padding:13px 0;
  border:0;
}
.index-list a:hover .il-name{border-bottom:1px solid var(--ink)}
.il-name{font-size:16px;font-weight:500;letter-spacing:-0.01em}
.il-meta{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:right}

@media (max-width:980px){
  .masthead-bar{padding-top:18px}
  .cv-row{grid-template-columns:52px 1fr;column-gap:14px}
  .il-meta{font-size:10.5px}
}
@media (max-width:560px){
  .index-list a{grid-template-columns:1fr;row-gap:2px}
  .il-meta{text-align:left}
}

/* ── two-page link ── */
.topbar{display:flex;justify-content:flex-end;padding:clamp(18px,3.5vh,32px) 0 0}
.topbar--back{justify-content:flex-start}
.topbar-link{
  font-size:11px;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border:0;
  padding-bottom:3px;
  border-bottom:1px solid var(--rule);
}
.topbar-link:hover{color:var(--ink);border-bottom-color:var(--ink)}