/* The Soothsayer’s Chorus – site styles
   Tokens first, then base, chrome, home stage + chorus, inner pages. */

@font-face {
  font-family: "Lovelace Text";
  src: url("../fonts/LovelaceText-Regular.woff2") format("woff2"),
       url("../fonts/LovelaceText-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #FEF9F5;
  --ink: #2A2119;
  --ink-soft: rgba(42, 33, 25, 0.62);
  --rule: rgba(42, 33, 25, 0.14);

  --font: "Lovelace Text", Georgia, "Times New Roman", serif;
  --fs-xl: clamp(1.5rem, 5vw, 4.5rem);       /* stage title: one line at about 58% of the viewport width */
  --fs-l: 2rem;
  --fs-m: 1.5rem;
  --fs-r: 1.125rem;
  --fs-s: 0.9375rem;
  --fs-xs: 0.8125rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --column: 78rem;                                       /* every page's content column; the exhibition page set it */
  --side: max(var(--gutter), calc((100% - var(--column)) / 2)); /* side padding for full-width bars (header, footer) */
  --measure: 38rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Page transitions: a plain cross-fade between pages where the browser
   supports cross-document view transitions. Opacity only, and the page's own
   reveals wait for it to finish (site.js), so nothing moves twice. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.32s var(--ease) both vt-out; }
::view-transition-new(root) { animation: 0.32s var(--ease) both vt-in; } /* same length and curve as the old page's exit, so the pair always adds up to a whole page */
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-r);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity 0.25s var(--ease); }
a:hover, a:focus-visible { opacity: 0.55; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
ul { list-style: none; }
h1, h2, h3 { font-weight: 400; line-height: 1.15; }
em { font-style: italic; }
strong { font-weight: 400; -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill; } /* Regular, gently thickened: no bold cut in the family */
.page__body a, .statement__text a { color: inherit; }

.skip {
  position: absolute; left: var(--gutter); top: -3rem;
  background: var(--ink); color: var(--cream); padding: 0.5rem 0.75rem;
}
.skip:focus { top: 0.5rem; z-index: 10; }

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky; top: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--gutter);
  padding: 1.25rem var(--side);
  background: var(--cream);
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }
.wordmark { font-size: var(--fs-r); white-space: nowrap; }
.burger { display: none; }
.site-nav ul { display: flex; gap: 1.5rem; }
.site-nav a {
  font-size: var(--fs-s); letter-spacing: 0.04em; color: var(--ink-soft);
}
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:hover { color: var(--ink); opacity: 1; }
.site-nav a[aria-current="page"]:hover { opacity: 0.55; }

/* On the home page the header floats over the stage: the title lives in the
   centre, so the wordmark is hidden and the nav waits for the chorus to settle. */
.is-home .wordmark { opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s 0.3s; }
.is-home.is-scrolled .wordmark { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease); }
.is-home .site-nav { opacity: 0; transition: opacity 1.2s var(--ease); }
.is-home.is-ready .site-nav { opacity: 1; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--rule); margin-top: clamp(4rem, 10vw, 8rem); }
.site-footer__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--gutter);
  padding: 2.5rem var(--side) 3rem;
  font-size: var(--fs-s); color: var(--ink-soft); line-height: 1.6;
}
.site-footer a:hover { color: var(--ink); }
.supporters__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1rem; }
.supporters__logos img { height: 1.1rem; width: auto; opacity: 0.55; }
.supporters__logos li:nth-child(2) img { height: 1.5rem; }
.supporters__logos li:nth-child(3) img { height: 0.95rem; }

/* ---------- Home: full-bleed hero ---------- */

.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; /* svh: fixed as the phone's toolbar collapses */
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
}
.hero__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.has-hero .hero__image { opacity: 1; }
/* a soft ink veil keeps cream type legible on the painting without dulling it */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(42, 33, 25, 0.28), rgba(42, 33, 25, 0.18) 45%, rgba(42, 33, 25, 0.38));
  opacity: 0; transition: opacity 1.4s var(--ease); /* with the painting, never grey over bare cream */
}
.has-hero .hero::after { opacity: 1; }
/* Arriving by cross-fade with the painting already cached (site.js): the hero is complete inside the cross-fade and nothing fades a second time. */
.is-instant .hero__image, .is-instant .hero::after, .is-instant .hero__title, .is-instant .hero__meta, .is-instant .site-nav { transition: none; }
.hero__centre { position: relative; z-index: 2; text-align: center; padding: var(--gutter); }
.hero__title {
  font-size: clamp(1.75rem, 5vw, 6rem);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1;
  white-space: nowrap;
  opacity: 0; transition: opacity 1.6s var(--ease) 0.3s;
  text-shadow: 0 1px 24px rgba(42, 33, 25, 0.25);
}
.is-ready .hero__title { opacity: 1; }
.hero__meta {
  margin-top: 0.35rem; font-size: var(--fs-r); letter-spacing: 0.04em; line-height: 1.6;
  opacity: 0; transition: opacity 1.2s var(--ease) 0.9s;
}
.hero__meta--curators { margin-top: 1.75rem; font-size: var(--fs-m); letter-spacing: 0.02em; }
.hero__meta--dates { font-size: var(--fs-m); letter-spacing: 0.03em; }
.is-ready .hero__meta { opacity: 0.9; }
.hero__meta .sep { padding: 0 0.25em; }

/* header over the hero: cream type, no band until scrolled */
.is-home .site-header { position: fixed; inset: 0 0 auto 0; background: transparent; }
.is-home:not(.is-scrolled) .site-nav a { color: rgba(254, 249, 245, 0.85); }
.is-home:not(.is-scrolled) .site-nav a[aria-current="page"], .is-home:not(.is-scrolled) .site-nav a:hover { color: var(--cream); }
.is-home.is-scrolled .site-header { background: var(--cream); }

/* ---------- Holding mode: the names beneath the hero ---------- */

.holding { padding: clamp(4rem, 10vw, 7rem) var(--gutter); text-align: center; }
.holding__names {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem;
  max-width: 60rem; margin: 0 auto;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-s);
}
.holding__names li { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
.holding__names li.is-in { opacity: 1; transform: none; }
.holding + .site-footer { margin-top: 0; }

/* ---------- Home: statement ---------- */

.statement {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) 0;
}
.statement--wide { max-width: calc(var(--column) + 2 * var(--gutter)); }
.statement__text p + p { margin-top: 1.1em; }
.statement__text p:first-child { font-size: var(--fs-m); line-height: 1.35; }
.statement__support { margin-top: 2.5rem; font-size: var(--fs-s); color: var(--ink-soft); }
.statement__support + .statement__producer { margin-top: 0.5rem; }

/* Justified running text: hyphenation and tight word-space limits keep the
   gaps down; the last line stays ragged. */
.prose--justified p {
  text-align: justify; text-align-last: left;
  hyphens: auto; -webkit-hyphens: auto;
  text-wrap: pretty;
  word-spacing: -0.02em;
}

/* ---------- Inner pages ---------- */

.page {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) var(--gutter) 0;
}
.page h1 { font-size: var(--fs-l); margin-bottom: 1.5rem; }
.page h2 { font-size: var(--fs-m); margin: 2.5rem 0 0.75rem; }
.page p { max-width: var(--measure); }
.page p + p { margin-top: 1em; }
.page a { color: var(--ink); }
.page__body .person + .person { margin-top: 3rem; }
.crumb { font-size: var(--fs-s); color: var(--ink-soft); margin-bottom: 1rem; }

/* Artists index: works at their true proportions in loose columns, arriving
   one at a time (reveal.js). The grid runs out to the header's edges and the
   gap between columns equals the gap between cards. */
.page--wide { max-width: calc(var(--column) + 2 * var(--gutter)); }
.artists { --grid-gap: var(--gutter); }


.artist-grid { columns: 3; column-gap: var(--grid-gap); }
.artist-card {
  break-inside: avoid;
  padding-bottom: var(--grid-gap); /* padding, not margin: WebKit carries a trailing margin into the next column */
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.artist-card.is-in { opacity: 1; transform: none; }
.artist-card a { display: block; }
.artist-card a:hover, .artist-card a:focus-visible { opacity: 1; }
.artist-card img { width: 100%; }
.artist-card__blank {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; padding: var(--gutter); text-align: center;
  border: 1px solid var(--rule); color: var(--ink-soft);
  font-size: var(--fs-m); line-height: 1.2;
}
.artist-card__name { display: block; margin-top: 0.7rem; }
.artist-card__meta { display: block; font-size: var(--fs-s); color: var(--ink-soft); }
.artist-card__name { transition: opacity 0.25s var(--ease); }
.artist-card a:hover .artist-card__name, .artist-card a:focus-visible .artist-card__name { opacity: 0.55; }

/* Artists without works on show yet: a ruled name list under the grid. */
/* the list toggle's own list view should include everyone, in one run */

/* List view: names ruled apart; the first work floats beside the pointer. */
.artist-grid--list { columns: auto; border-top: 1px solid var(--rule); }
.artist-grid--list .artist-card { padding: 0; border-bottom: 1px solid var(--rule); opacity: 1; transform: none; transition: none; } /* the list arrives as one block with the page, not name by name */
.artist-grid--list .artist-card img, .artist-grid--list .artist-card__blank { display: none; }
.artist-grid--list .artist-card a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gutter); padding: 1.1rem 0; }
.artist-grid--list .artist-card__name { margin: 0; font-size: var(--fs-m); }
.artist-grid--list .artist-card__meta { margin: 0; }



/* ---------- Artist page: text left, works right ---------- */

.artist-page {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 5rem) var(--gutter);
  align-items: start;
}
.artist-page__side { position: sticky; top: 2rem; }
.artist-page__side { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.artist-page__side.is-in { opacity: 1; transform: none; }
.artist-page > .artist__images { opacity: 1; transform: none; } /* the works column reveals per work, not as a block */
.artist-page .crumb { margin-bottom: 1.25rem; }
.crumb .arrow { display: inline-block; vertical-align: middle; margin: -0.1em 0.45em 0 0; transition: transform 0.3s var(--ease); }
.crumb a:hover .arrow { transform: translateX(-0.2em); }

.artist-page h1 { margin-bottom: 0.25rem; }
.artist__meta { color: var(--ink-soft); margin-bottom: 2rem; }
.artist__works { margin-top: 0; }
.artist__works h2 { font-size: var(--fs-s); letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 1rem; }
.artist__works li { font-size: var(--fs-r); line-height: 1.5; }
.artist__works li + li { margin-top: 1rem; }
.artist__text h2 { margin-top: 0; }
.artist-page .artist__text p { font-size: var(--fs-s); }
.artist__bio { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: var(--fs-s); }
.artist__bio p { max-width: none; }

.artist__images {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) var(--gutter);
  align-items: start;
}
.artist__images .work:only-child,
.artist__images .work--wide { grid-column: 1 / -1; } /* landscape works take the full width */
.work__open { display: block; cursor: pointer; }
.work__open:focus:not(:focus-visible) { outline: none; }
.work__open:hover, .work__open:focus-visible { opacity: 1; }

.more-artists { margin-top: clamp(3rem, 6vw, 5rem); }
.more-artists h2 { font-size: var(--fs-s); letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 0.5rem; }
.more-artists .artist-grid--list .artist-card__name { font-size: var(--fs-r); }
.more-artists .artist-grid--list .artist-card a { padding: 0.8rem 0; }

/* Lightbox: the same page, veiled in cream, with the work brought forward
   and its facts beneath it. Pointer devices only; touch gets the plain page. */
.lightbox {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem var(--gutter);
  background: var(--cream);
  color: var(--ink);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox:focus { outline: none; }
.lightbox__card {
  display: flex; align-items: center; justify-content: center;
  max-width: min(100%, 80rem); max-height: 100%;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease) 0.05s, transform 0.5s var(--ease) 0.05s;
}
.lightbox.is-open .lightbox__card { opacity: 1; transform: none; }
.lightbox.is-open .lightbox__facts { opacity: 1; }
.lightbox__art { display: block; max-width: 100%; max-height: 74vh; margin: 0; }
.lightbox__art img { width: auto; height: auto; max-width: 100%; max-height: 74vh; display: block; }
.lightbox__facts { /* beneath the work, small and centred */
  order: 2; margin-top: 1rem; max-width: 40rem; text-align: center;
  opacity: 0; transition: opacity 0.35s var(--ease) 0.05s;
  display: flex; flex-direction: column; gap: 0.1rem;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-soft);
}
.lightbox__facts[hidden] { display: none; }
.lightbox__facts h2 { font-size: inherit; font-weight: 400; line-height: inherit; color: var(--ink); margin: 0; }
.lightbox__facts p { margin: 0; }
.lightbox__credit { font-size: var(--fs-xs); margin-top: 0.35rem; }
.lightbox__close {
  position: fixed; top: 1.5rem; right: var(--gutter);
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--ink-soft); background: none; border: 0; cursor: pointer; padding: 0;
}
.lightbox__close:hover { color: var(--ink); }
.lightbox__close:focus:not(:focus-visible) { outline: none; }
.lightbox-open { overflow: hidden; }
.work { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.work.is-in { opacity: 1; transform: none; }
.work img { width: 100%; }
.work figcaption {
  display: flex; flex-direction: column; gap: 0.1rem;
  margin-top: 0.75rem;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-soft);
}
.work__title { color: var(--ink); }
.work__credit { font-size: var(--fs-xs); margin-top: 0.35rem; }

/* Plain pages (visit, press, 404): heading, body and links arrive in turn. */
.page[data-reveal] > *, .visit-map[data-reveal] > * { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.page[data-reveal] > .is-in, .visit-map[data-reveal] > .is-in { opacity: 1; transform: none; }
.visit-map__canvas.is-in { opacity: 0; } /* the map still waits for its own load */
.visit-map__canvas.is-in.is-ready { opacity: 1; }

/* ---------- Exhibition ---------- */

.exhibition__meta { color: var(--ink-soft); font-size: var(--fs-s); line-height: 1.6; margin: -0.5rem 0 0; }
.exhibition__body { max-width: none; }
.exhibition__body p { max-width: none; }
.exhibition__body p:first-child { font-size: var(--fs-m); line-height: 1.35; }
.exhibition__lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); align-items: start; padding-top: 0; max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; }
.exhibition__lower.page { padding-top: 2rem; }
.exhibition__head { max-width: var(--column); margin: 0 auto; padding: 0; }
.exhibition__lower > * { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.exhibition__lower > .is-in { opacity: 1; transform: none; }

/* Installation photographs: one full width above the statement, the rest full width beneath it. */
.install { margin: 0; }
.exhibition__body .install { margin: clamp(2rem, 4vw, 3.5rem) 0; }
.install img { width: 100%; height: auto; display: block; }
.install__caption { margin-top: 0.6rem; font-size: var(--fs-s); color: var(--ink-soft); }
.installation-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.exhibition h1 { margin-bottom: 1rem; }
.page .artist-list__heading { font-size: var(--fs-s); letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 1rem; }

/* ---------- Press ---------- */

.press__section { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.press__section h2 { font-size: var(--fs-s); letter-spacing: 0.06em; color: var(--ink-soft); margin: 0 0 0.75rem; }
.press-list li { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; }
.press-list__meta { font-size: var(--fs-s); color: var(--ink-soft); }

/* ---------- Visit: full-bleed Google map ---------- */

.visit__directions { margin-top: 2rem; font-size: var(--fs-s); }
.visit-map { margin-top: clamp(3rem, 6vw, 5rem); background: var(--cream); }
.visit-map__canvas {
  display: block; width: 100%; height: clamp(24rem, 60vh, 40rem); border: 0;
  filter: grayscale(1) sepia(0.18) brightness(1.04) contrast(0.9); /* Google's colours, quietened to cream and ink */
  opacity: 0; transition: opacity 0.9s var(--ease);
}
.visit-map__canvas.is-ready { opacity: 1; }
.visit-map + .site-footer { margin-top: 0; }

/* ---------- Artist quote ---------- */

.artist__quote { margin: 1.75rem 0 0; padding-left: 1rem; border-left: 1px solid var(--rule); }
.artist__quote p { font-size: var(--fs-r); line-height: 1.45; font-style: italic; max-width: none; }
.artist__quote footer { margin-top: 0.5rem; font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--ink-soft); }
.press__contacts { margin-top: 1.5rem; font-size: var(--fs-s); }

/* ---------- Curators ---------- */

.curators__photo { margin: 0 0 clamp(2rem, 5vw, 4rem); }
.curators__photo img { width: 100%; height: auto; }
.curators__photo figcaption { margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--ink-soft); letter-spacing: 0.04em; }
.curators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
.curator { opacity: 0; transform: translateY(14px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }
.curator.is-in, .curators.is-in .curator { opacity: 1; transform: none; }
.curator__name { font-size: var(--fs-s); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 1rem; }
.curator__text { font-size: var(--fs-s); }
.curator__text p { max-width: none; }

/* ---------- Phone ---------- */

@media (max-width: 700px) {
  /* Phones: inner pages keep a cream bar with the wordmark left and the burger
     right; the landing has no bar, only the burger over the painting. */
  .is-page .site-header { background: var(--cream); padding: 1rem var(--gutter); padding-right: calc(var(--gutter) + 2.5rem); }
  .is-page .wordmark { display: block; font-size: var(--fs-s); }
  .is-home .site-header, .is-home.is-scrolled .site-header { background: transparent; padding: 0; min-height: 0; }
  .is-home .wordmark { display: none; }
  /* Burger menu: the nav becomes a cream sheet under the header. */
  .site-header { align-items: center; }
  .is-home .site-header { justify-content: flex-end; }
  .burger {
    display: block; position: absolute; top: 50%; transform: translateY(-50%); right: calc(var(--gutter) - 0.5rem); z-index: 6;
    width: 2.75rem; height: 2.75rem;
    background: none; border: 0; cursor: pointer;
  }
  .burger span {
    position: absolute; left: 0.5rem; right: 0.5rem; height: 2px; background: var(--ink);
    transition: transform 0.35s var(--ease), top 0.35s var(--ease), opacity 0.25s var(--ease);
  }
  .burger span:nth-child(1) { top: calc(50% - 0.45rem); }
  .burger span:nth-child(2) { top: 50%; }
  .burger span:nth-child(3) { top: calc(50% + 0.45rem); }
  .nav-open .burger span:nth-child(1) { top: 50%; transform: rotate(45deg); }
  .nav-open .burger span:nth-child(2) { opacity: 0; }
  .nav-open .burger span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
  /* a cream disc behind the lines so it reads over images when scrolled */
  .burger::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: rgba(254, 249, 245, 0.85);
  }
  .is-page .site-header { padding-right: calc(var(--gutter) + 2.5rem); }
  .site-nav {
    position: fixed; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: var(--cream);
    opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
  }
  .is-home .site-nav { opacity: 0; }
  .nav-open .site-nav, .is-home.nav-open .site-nav { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }
  .nav-open .site-nav a, .is-home:not(.is-scrolled).nav-open .site-nav a { color: var(--ink); }
  .nav-open .burger span { background: var(--ink); }
  .nav-open .burger::before { background: transparent; }
  .site-nav ul { flex-direction: column; align-items: center; gap: 1.5rem; }
  .site-nav a { font-size: var(--fs-l); letter-spacing: 0.01em; color: var(--ink); }
  .nav-open { overflow: hidden; }
  /* A transformed header would trap the fixed sheet inside its own box (the header slides away by transform once scrolled), so no transform while the menu is open. */
  .nav-open .site-header { transform: none; transition: none; }
  .is-home .burger { top: 0.85rem; transform: none; opacity: 0; transition: opacity 1.2s var(--ease); } /* the landing header has no height to centre in */
  .is-home.is-ready .burger { opacity: 1; }
  .is-home:not(.is-scrolled) .burger span { background: var(--cream); }
  .is-home:not(.is-scrolled) .burger::before { background: rgba(42, 33, 25, 0.25); }
  
  .artist-grid { columns: 2; }
  .artist-grid--list { columns: auto; }
  .artist-grid--list .artist-card__name { font-size: var(--fs-r); }
  .artist-page, .artist__images, .curators, .exhibition__lower { grid-template-columns: 1fr; }
  .prose--justified p { text-align: left; }
  .exhibition__body p:first-child, .statement__text p:first-child { font-size: 1.25rem; }
  .hero__title { white-space: normal; font-size: clamp(1.6rem, 9vw, 3rem); }
  .hero__meta .sep { display: block; height: 0; overflow: hidden; }
  .hero__meta, .hero__meta--curators, .hero__meta--dates { font-size: var(--fs-s); letter-spacing: 0.02em; margin-top: 0.25rem; }
  .hero__meta--curators { margin-top: 1.25rem; white-space: nowrap; }
  .artist-page__side { position: static; }
  .artist__images .work:only-child { grid-column: auto; }
  .curator__portrait { max-width: 60vw; }


}

/* ---------- Reduced motion: everything present at once ---------- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .hero__image, .hero__title, .hero__meta, .is-home .site-nav, .holding__names li, .artist-card, .work, .curator, .artist-page__side, .page[data-reveal] > *, .visit-map[data-reveal] > *, .exhibition__lower > * { opacity: 1; transform: none; transition: none; }
}