/* ==========================================================================
   Renée Kanowitz Art: site styles
   Ported from the Claude Design source: renee-kanowitz-art-v2.dc.html
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --header-grey: #e9e5df; /* Warm gallery stone. */
  --night: #1a1a18;
  --cream: #f2efe9;

  --ink: #2a2724;
  --ink-mid: #4a443c;
  --ink-soft: #56504a;
  --ink-quiet: #6b645b;

  /* 5.37:1 on paper, 4.96:1 on stone: both clear AA. The previous #8a6f52
     measured 4.31 and 3.98, failing on every 10px label including the
     availability statuses. Lightest value that passes on both grounds. */
  --brass: #7a6046;

  /* Two accent families only. Everything else is ivory, ink and stone, so the
     paintings remain the one source of colour on the site. */
  --stone: #ffffff;
  --rose: #f7dbdd;
  --rose-ink: #96434e;
  --sage: #d9e8d5;
  --sage-ink: #3d6532;

  --rule: #e8e2d8;
  --rule-strong: #ded7cb;
  --rule-soft: #e4ded3;
  --line: #c9c2b6;

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 48px;
  --measure: 1040px;
  --measure-wide: 1320px;
}

/* --- Reset -------------------------------------------------------------- */

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

html,
body {
  max-width: 100%;
  /* clip, not hidden: overflow-x:hidden turns the body into a scroll
     container, which silently defeats position:sticky on the header. clip
     guards against stray horizontal overflow without that side effect. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

figure {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  /* Required wherever width/height attributes are set for layout stability:
     without it the height attribute lands as a presentational hint, becomes a
     literal used height, and overrides aspect-ratio: which silently crops or
     distorts the artwork. */
  height: auto;
}

input,
select,
textarea {
  font-family: var(--sans);
}

a {
  color: var(--ink);
  text-decoration: none;
  transition: color 320ms ease, border-color 320ms ease, opacity 320ms ease;
}

a:hover {
  color: var(--brass);
}

.skip-link,
.visually-hidden {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* --- Typography primitives ---------------------------------------------- */

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.eyebrow--block {
  display: block;
}

.eyebrow--quiet {
  color: var(--ink-quiet);
}

.eyebrow--wide {
  letter-spacing: 0.26em;
}

.eyebrow--tight {
  letter-spacing: 0.2em;
}

.h-display {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 44px;
  line-height: 1.16;
  margin: 0;
}

.body-copy {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.body-copy--sm {
  font-size: 14px;
  line-height: 1.9;
}

.link-under {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
}

.link-under:hover {
  border-color: var(--ink);
}

.link-under--sm {
  font-size: 12px;
  letter-spacing: 0.2em;
}

/* --- Layout helpers ------------------------------------------------------ */

.section {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

.wrap-wide {
  max-width: var(--measure-wide);
  margin: 0 auto;
}

.split {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
}

.split > .eyebrow {
  padding-top: 8px;
}

.wrap-pair {
  max-width: 1180px;
  margin: 0 auto;
}

/* Measure utilities: the design sets a per-passage character measure. */
.mw-30 {
  max-width: 30ch;
}
.mw-46 {
  max-width: 46ch;
}
.mw-52 {
  max-width: 52ch;
}
.mw-54 {
  max-width: 54ch;
}
.mw-56 {
  max-width: 56ch;
}
.mw-58 {
  max-width: 58ch;
}

.mb-26 {
  margin-bottom: 26px;
}
.mb-32 {
  margin-bottom: 32px;
}
.mb-44 {
  margin-bottom: 44px;
}
.mb-76 {
  margin-bottom: 76px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-56 {
  margin-bottom: 56px;
}
.mb-72 {
  margin-bottom: 72px;
}
.mt-66 {
  margin-top: 66px;
}

.rule-full {
  height: 1px;
  background: var(--rule-soft);
}

.rule-short {
  width: 110px;
  height: 1px;
  background: var(--rule-strong);
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 20px 34px;
  background: var(--header-grey);
  border-bottom: 1px solid var(--rule-soft);
  backdrop-filter: blur(8px);
  transition: background 400ms ease, border-color 400ms ease;
}

.site-header__mark {
  display: grid;
  align-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  transition: background 400ms ease;
}

.site-header__mark img {
  grid-area: 1 / 1;
  height: 84px;
  width: 84px;
  object-fit: contain;
  filter: brightness(0);
  transition: filter 400ms ease;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  font-size: 15px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav a {
  color: var(--ink-soft);
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--brass);
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
}

/* Menu control: desktop shows the nav inline, so it is hidden above 900px. */

.nav-toggle,
.nav-close {
  display: none;
  font-family: var(--sans);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
}

.nav-toggle {
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.nav-toggle__bars {
  display: block;
  width: 20px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.nav-close {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 14px 4px;
}

.nav-close:hover {
  color: var(--ink);
}

/* Transparent state: only while the home hero is under the header. */

.site-header.is-over-hero {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

/* White lettering over artwork; the normal white banner uses black ink.
   Keep this treatment off the white mobile navigation sheet. */
body:not(.nav-open) .site-header.is-over-hero .site-header__mark {
  background: transparent;
}

body:not(.nav-open) .site-header.is-over-hero .site-header__mark img {
  filter: brightness(0) invert(1);
}

.site-header.is-over-hero .site-nav a {
  color: rgba(242, 239, 233, 0.78);
}

.site-header.is-over-hero .site-nav a[aria-current="page"],
.site-header.is-over-hero .site-nav a:hover {
  color: var(--cream);
}

.site-header.is-over-hero .nav-toggle {
  color: rgba(242, 239, 233, 0.9);
}

/* --- Page heads (interior pages) ----------------------------------------- */

.page-head {
  display: flex;
  flex-direction: column;
  /* No fixed min-height. It reserved 520px for ~185px of content, leaving a
     third of a screen of engineered emptiness on every interior page: the
     cause of the blank viewports on Commissions and Teaching. Presence now
     comes from padding, which collapses when the content is short. */
  max-width: var(--measure);
  margin: 0 auto;
  padding: 176px var(--gutter) 8px;
  /* Fixed so the coloured band below begins at the same point on every page.
     Set just above the tallest real content (455px on Exhibitions, which
     carries the stat row), so nothing is padded into emptiness. */
  min-height: 458px;
}

.page-head__eyebrow {
  display: block;
  margin-bottom: 40px;
  flex: 0 0 auto;
}

.page-title {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 44px;
}

.page-lede {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-mid);
  max-width: 46ch;
  margin: 0;
  text-wrap: balance;
}

/* --- Colour bands -------------------------------------------------------- */

.band {
  margin: 0;
  padding: 96px var(--gutter);
  background: var(--stone);
}

.band__quote {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 44px;
  line-height: 1.34;
  letter-spacing: -0.012em;
  margin: 0;
  /* 34ch keeps the longest statement (Work) to three lines, so every band
     settles at the same 520px height rather than one page running taller. */
  max-width: 34ch;
  text-wrap: pretty;
}

.band__pull {
  font-family: var(--serif);
  font-weight: 200;
  font-style: italic;
  font-size: 54px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 26ch;
  text-wrap: pretty;
}

.band__list {
  display: flex;
  flex-direction: column;
  max-width: 54ch;
  margin: 0 0 36px;
  border-top: 1px solid currentColor;
}

.band__list span {
  font-size: 13px;
  line-height: 1.7;
  padding: 15px 0;
  border-bottom: 1px solid currentColor;
}

/* One band, identical on every interior page.
   The coloured section sits immediately after the page head at a fixed height,
   so moving between pages does not shift or recolour it. The pastel-per-route
   scheme it replaces made each page read as a separate brand. */

.band {
  min-height: 520px;
  display: flex;
  align-items: center;
}

.band > .wrap {
  width: 100%;
}

/* The terms lists on Commissions and Teaching sit on the page ground now that
   the coloured band has moved to the top of each page. */
.terms-section {
  max-width: var(--measure);
  margin: 150px auto 0;
  padding: 0 var(--gutter);
}

.terms-section .terms {
  color: var(--rule-strong);
}

.terms-section .terms__key {
  color: var(--brass);
}

.terms-section .terms__val {
  color: var(--ink);
}

.band__list {
  color: var(--rule-strong);
}

.band__list span {
  color: var(--ink-soft);
}

.contents-strip {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
}

/* --- Work captions ------------------------------------------------------- */

.zoom {
  cursor: zoom-in;
  position: relative;
}

.caption {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 16px;
}

.caption__title {
  font-family: var(--serif);
  /* Two sizes only across the whole site: this standard, and --lead below.
     The former 18/19/20 spread was drift between three modifiers, not a scale. */
  font-size: 18px;
}

.caption__medium {
  font-size: 12px;
  color: var(--ink-soft);
}

.caption__status {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}

.caption--plate {
  margin-top: 18px;
  gap: 8px;
}

.caption--lg {
  margin-top: 18px;
}

.caption--lead {
  margin-top: 22px;
  gap: 9px;
}

.caption--lead .caption__title {
  font-size: 26px;
  line-height: 1.2;
}

.caption--lead .caption__medium {
  font-size: 13px;
}

.caption--tight {
  gap: 5px;
  margin-top: 13px;
}

.caption--tight .caption__medium {
  font-size: 11px;
}

.caption--tight .caption__status {
  font-size: 11px;
  letter-spacing: 0.18em;
}

.caption-note {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* --- Home: hero ---------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--paper);
  /* The load animation settles the pair from 1.02 to 1; clip keeps that
     inside the hero instead of letting it lap the section below. */
  overflow: clip;
}

.hero__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The pair reads as one continuous image: no separating gap. The hero's
     dark ground stays behind them so any sub-pixel rounding between the two
     columns falls as near-black against the paintings' dark passages rather
     than as a bright ivory hairline. */
  gap: 0;
}

.hero__pair img {
  width: 100%;
  aspect-ratio: 1200 / 1760;
  object-fit: cover;
}

/* A translucent scrim holds the white logo and navigation against the art,
   then fades away below the header without altering the image assets. */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 240px;
  background: linear-gradient(to bottom,
    rgba(20, 20, 19, 0.64) 0,
    rgba(20, 20, 19, 0.48) 100px,
    rgba(20, 20, 19, 0) 240px);
  pointer-events: none;
  z-index: 1;
}

/* The wordmark no longer sits over the paintings: nothing does. It is the
   page's h1, in the meta strip beneath the hero. See .hero-meta__mark. */

.hero__jump {
  position: absolute;
  /* Bottom left, not bottom right. Sampling the paint actually behind this
     box: the right canvas averages 5.05:1 against the cream: a pass, but
     only just: while the left canvas's dark lower corner gives 8.87:1. It
     also lines up with the left-aligned grid the rest of the site uses. */
  left: 48px;
  bottom: 34px;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.82);
  text-shadow: 0 1px 10px rgba(20, 20, 19, 0.75);
}

.hero__jump:hover {
  color: var(--cream);
}

.hero-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.hero-labels span {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 14px 0 0 48px;
}

.hero-labels span:last-child {
  padding: 14px 48px 0 0;
  text-align: right;
}

.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 48px;
  align-items: start;
  padding: 30px var(--gutter) 0;
}

/* The home page's h1. An image of the drawn wordmark rather than set type,
   so its alt text carries the name; height:auto at the reset keeps the
   width/height attributes from fixing the box against the natural ratio. */
.hero-meta__note {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.hero-meta__note--end {
  text-align: right;
}

.hero-meta__line {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}


/* --- Home: artist plate --------------------------------------------------- */

.artist {
  --artist-inset: 40px;
  /* Bottom padding down from 138px: stacked on the works' 96px above them it
     left 234px of nothing between the portrait's caption and "See all work". */
  padding: 64px 40px 64px;
}

.artist__heading-band {
  margin: 0 calc(-1 * var(--artist-inset)) 48px;
  padding: 20px var(--artist-inset);
  background: var(--header-grey);
}

.artist__heading-band .eyebrow {
  display: block;
  max-width: var(--measure-wide);
  margin: 0 auto;
  font-size: 15px;
  text-align: center;
}

.artist__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 88px;
  align-items: center;
}

.artist__portrait img {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.artist__portrait figcaption {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.artist__body {
  padding-bottom: 18px;
}

#artist {
  scroll-margin-top: 140px;
}

.artist__body .eyebrow {
  margin-bottom: 44px;
}

.artist__name {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 76px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 40px;
}

.artist__body .rule-short {
  margin-bottom: 36px;
}

.artist__lede {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0 0 40px;
  text-wrap: pretty;
}

/* --- Home: selected works ------------------------------------------------- */

.selected {
  padding: 64px var(--gutter) 0;
}

.selected__eyebrow {
  margin-bottom: 96px;
}

.selected__lead {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 150px;
}

.selected__lead-copy {
  padding-bottom: 20px;
}

.selected__lead-title {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 46px;
  line-height: 1.1;
  margin: 0 0 26px;
}

.selected__lead-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
  color: var(--ink-soft);
}

.selected__lead-inset {
  margin-top: 64px;
}

.selected__pairs {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 60px;
  align-items: start;
  margin-bottom: 150px;
}

.selected__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.selected__aside {
  margin-top: 40px;
}

.practice {
  padding: 0 var(--gutter);
}

.practice__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px 0 210px;
}

.practice__quote {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 58px;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 0 0 64px;
  text-wrap: pretty;
}

.practice__quote em {
  font-style: italic;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.pair .caption {
  margin-top: 20px;
}

.studio-home {
  padding: 190px var(--gutter) 0;
}

.studio-home__inner {
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: start;
}

.studio-home__copy {
  padding-top: 40px;
}

.studio-home__copy .eyebrow {
  margin-bottom: 44px;
}

.studio-home__title {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 52px;
  line-height: 1.16;
  margin: 0 0 36px;
  max-width: 20ch;
}

.studio-home__copy .body-copy {
  max-width: 46ch;
  margin-bottom: 36px;
}

.closer {
  padding: 200px var(--gutter) 0;
}

.closer__title {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 42px;
  line-height: 1.2;
  margin: 0 0 28px;
  max-width: 26ch;
}

.closer .body-copy {
  max-width: 54ch;
  margin-bottom: 32px;
}

/* --- Work page ------------------------------------------------------------ */

.works-section {
  max-width: var(--measure-wide);
  margin: 150px auto 0;
  padding: 0 var(--gutter);
}

.works-section--near {
  margin-top: 130px;
}

.works-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 26px;
}

.works-section__note {
  font-size: 11px;
  color: var(--ink-quiet);
}

.works-section h2 {
  margin-bottom: 30px;
}

.works-section__intro {
  max-width: 52ch;
  margin-bottom: 76px;
}

.grid-recent {
  display: grid;
  grid-template-columns: repeat(2, 200px);
  justify-content: start;
  gap: 72px 24px;
  align-items: start;
}

.grid-recent img {
  max-width: 200px;
}

.grid-available {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  align-items: start;
}

.grid-available .link-under {
  margin-top: 18px;
}

.grid-selected {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px 56px;
  align-items: start;
  margin-top: 50px;
}

.grid-diptych {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

#moments-in-bloom {
  max-width: 912px;
  margin-inline: auto;
  scroll-margin-top: 150px;
}

/* Equal frames, with a reversible 0.98% edge trim on every side.
   Original files and the full-image lightbox remain untouched. */
.bloom-panel {
  aspect-ratio: 800 / 2405;
  overflow: hidden;
}

.bloom-panel img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform: scale(1.02);
  transform-origin: center;
}

.diptych-block {
  margin-bottom: 110px;
}

.diptych-block__note {
  display: block;
  margin-top: 30px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.columns-3 {
  column-count: 3;
  column-gap: 44px;
}

.columns-3 figure {
  break-inside: avoid;
  margin-bottom: 52px;
}

.columns-4 {
  column-count: 4;
  column-gap: 36px;
}

.columns-4 figure {
  break-inside: avoid;
  margin-bottom: 38px;
}

.private-collection-grid {
  margin-top: 96px;
  scroll-margin-top: 150px;
}

#collections > .grid-selected {
  margin-block: 96px 110px;
}

.archive-toggle-row {
  padding-top: 30px;
}

.archive-panel {
  margin-top: 66px;
}

.archive-panel[hidden] {
  display: none;
}

.archive-panel__note {
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-quiet);
  max-width: 56ch;
  margin: 0 0 46px;
}

.closer-split {
  max-width: var(--measure);
  margin: 170px auto 0;
  padding: 0 var(--gutter);
}

.closer-split__lede {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 200;
  line-height: 1.4;
  margin: 0 0 32px;
  max-width: 30ch;
  text-wrap: pretty;
}




/* The hero paintings are visible immediately, without an introductory veil. */

/* --- Home: pause, statement, pathways -------------------------------------
   The sequence is hero → work → artist → pause → statement → pathways, so the
   statement lands after the visitor has seen the breadth of the work rather
   than before it. */

/* Every work in the catalogue is portrait or square, so the pause is a single
   canvas given room on a quieter ground: not a wide band it cannot fill. */
.pause {
  margin-top: 150px;
  padding: 76px var(--gutter);
  background: var(--stone);
  display: flex;
  justify-content: center;
}

.pause__figure {
  max-width: 620px;
  width: 100%;
}

.pause__figure img {
  width: auto;
  max-width: 100%;
  max-height: 78svh;
  margin-inline: auto;
  object-fit: contain;
}

.pause__cap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  text-align: center;
}

.statement {
  max-width: var(--measure);
  margin: 150px auto 0;
  padding: 0 var(--gutter);
}

.statement__quote {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 52px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 56px;
  text-wrap: pretty;
}

.statement__quote em {
  font-style: italic;
}

.pathways {
  max-width: var(--measure);
  margin: 150px auto 0;
  padding: 0 var(--gutter);
}

.pathways__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}

.pathway {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 40px 30px 0;
  border-bottom: 1px solid var(--rule);
}

.pathway:nth-child(odd) {
  border-right: 1px solid var(--rule);
  padding-right: 40px;
}

.pathway:nth-child(even) {
  padding-left: 40px;
}

.pathway__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
}

.pathway__note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34ch;
}

.pathway:hover .pathway__title {
  color: var(--brass);
}

.selected .pair {
  margin-top: 150px;
}


/* A section's exit link belongs with its title, not stranded at the foot of a
   large field where it carries the same weight as a caption. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.section-head__link {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
  white-space: nowrap;
}

.section-head__link:hover {
  color: var(--brass);
}

/* The one commercial signal in the opening screen. Restrained, but it is a
   link and reads as one: previously nothing pointed at available work until
   five screens down. */
.hero-meta__link {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}

.hero-meta__link:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* Section rhythm on the home page. Gaps group sections into movements rather
   than repeating one uniform 150px: a large gap opens a new movement, a small
   one binds a section to the one before it. */
.artist {
  /* The portrait now opens the page under the meta strip rather than following
     the works, so it sits closer to it: its own 132px top padding carries the
     air. */
  margin-top: 16px;
}

.pause {
  margin-top: 124px;  /* now a breath after the works, not a coda to the portrait */
}

.statement {
  /* Down from 180px. On top of the stone band's own padding it opened a 276px
     void: the largest blank on the page: between the last work and the quote. */
  margin-top: 112px;
}

.pathways {
  margin-top: 96px;   /* resolution of the statement, not a separate idea */
}


/* --- Paired works ----------------------------------------------------------
   Works made and shown as a pair are butted together with a hairline gap and
   span two grid cells, so they read as one object. Previously they landed in
   separate cells, each narrow image centred in a wide column, which put a
   large field of paper between two halves of the same idea: and in a
   three-column grid they could fall on different rows entirely. */

/* A pair has to read as a pair: both canvases the same height, both captions
   on the same line. The two photographs differ in ratio by up to 1.7%, so
   matching the heights means the widths end up very slightly unequal. That is
   the honest trade: the alternative is cropping a complete work to force a
   match, and nothing here is cropped. Two of the five pairs are identical
   ratios and line up exactly. */
.pair-set {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  align-items: stretch;
}

/* Both figures span the same two tracks, so the image row is one height and
   the caption row starts at one line for both, however the captions wrap. */
.pair-set > figure {
  display: grid;
  grid-row: span 2;
  grid-template-rows: minmax(0, 1fr) auto;
}

@supports (grid-template-rows: subgrid) {
  .pair-set > figure {
    grid-template-rows: subgrid;
  }
}

/* No width override here on purpose. The catalogue rule already gives these
   width:auto with max-width:100%, so the box hugs the painting rather than
   letterboxing it. The columns are sized in proportion to each canvas's own
   ratio: written per pair in the markup: which is what makes the two heights
   come out identical: h = w/r, with w set ∝ r. Nothing is trimmed and nothing
   overhangs its column. */

/* Push the two canvases toward each other so they meet at the seam. */
.pair-set > figure:first-child > img {
  margin-left: auto;
  margin-right: 0;
}

.pair-set > figure:last-child > img {
  margin-right: auto;
  margin-left: 0;
}

.pair-set > figure:first-child .caption {
  align-items: flex-end;
  text-align: right;
}

/* In the two-column selected grid a pair already fills the row; spanning two
   cells there would overflow it. */
.grid-selected .pair-set {
  grid-column: span 2;
  gap: 12px;
}

/* --- Work page: catalogue presentation ------------------------------------
   Complete works are never cropped: including inside a pair, where the
   heights are matched by sizing to the shared row rather than by trimming the
   taller canvas. Tall portrait canvases are bounded by viewport height
   instead, so a single painting cannot occupy several consecutive screens,
   and each is centred in its column. */

/* This is the only wayfinding for a page holding thirty-five works. At 12px
   in quiet grey with no underline it read as a caption; given weight, ink and
   a standing rule it reads as something to press. */
.contents {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Contact: the form is the page ----------------------------------------
   Every other interior page opens with a title, a coloured band and then its
   content, and Contact inherited that: which put the first input 1569px down,
   nearly two screens below a page whose only job is to be written to. The
   enquiry now follows the title directly; the studio statement moved to the
   foot, where a closing note belongs. These two rules pull the form up out of
   the standard interior spacing without touching any other page. */
body[data-page="contact"] .page-head {
  min-height: 0;
  padding-top: 132px;
}

body[data-page="contact"] .works-section--near {
  margin-top: 56px;
}

.contents__label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: 4px;
}

.contents a {
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.contents a:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

.grid-recent img,
.grid-selected img,
.grid-available img,
.columns-3 img,
.columns-4 img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.grid-recent img {
  max-height: 56svh;
}

.grid-selected img {
  max-height: 84svh;
}

.grid-available img {
  max-height: 70svh;
}

.grid-recent {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 36px;
  justify-content: stretch;
}

/* The commercially active section reads as its own place on the page. */
.available-panel {
  background: var(--stone);
  padding: 96px 0 104px;
  margin-top: 150px;
}

.available-panel .works-section {
  margin-top: 0;
}

.contents-strip + .available-panel {
  margin-top: 48px;
  padding-top: 40px;
}

#available {
  scroll-margin-top: 140px;
}

.purchase-note {
  max-width: 62ch;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  line-height: 1.7;
}

.purchase-note h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 14px;
}

.purchase-note p + p {
  margin-top: 12px;
}

.grid-available .caption__status {
  color: var(--rose-ink);
}

/* --- Exhibitions ---------------------------------------------------------- */

.page-head__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
}

.stat-row {
  display: flex;
  gap: 52px;
  padding-bottom: 6px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat__figure {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 52px;
  line-height: 1;
}

.stat__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.prose-section {
  max-width: var(--measure);
  margin: 190px auto 0;
  padding: 0 var(--gutter);
}

.prose-section--near {
  margin-top: 150px;
}

.prose-section h2 {
  margin-bottom: 60px;
}

.show {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 40px;
  align-items: baseline;
  padding: 38px 0;
  border-bottom: 1px solid var(--rule);
}

.show__year {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 30px;
  color: var(--brass);
}

.show__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.25;
  margin: 0;
}

.show__place {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  text-align: right;
}


/* --- Exhibitions: year groups ---------------------------------------------
   Grouping by year is structure the data already carries: 2025 and 2022 each
   hold two presentations. Entries whose year the studio has not confirmed are
   labelled as such rather than given an invented date or a bare dash. */

.year-group {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 40px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}

.year-group:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.year-group__year {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 34px;
  line-height: 1;
  color: var(--brass);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.year-group__year--approx {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-quiet);
  max-width: 8ch;
}

.year-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.entry__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 27px;
  line-height: 1.25;
  text-wrap: pretty;
}

.entry__venue {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* --- Commissions / Teaching ----------------------------------------------- */

.duo-start {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.studio-aside {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 56px;
  align-items: start;
}

.studio-aside__copy {
  padding-top: 8px;
}

.studio-aside__copy .eyebrow {
  margin-bottom: 26px;
}

.studio-aside__lede {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 200;
  line-height: 1.42;
  margin: 0 0 30px;
  text-wrap: pretty;
}


/* --- Service-page components ---------------------------------------------
   Commissions and Teaching previously shared one template in two colours.
   These give each page its own structure: a numbered sequence for the
   commission process, paired columns for the two teaching formats. */

.plate {
  max-width: var(--measure-wide);
  margin: 150px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: 64px;
  align-items: center;
}

/* Bounded by viewport height so a tall in-situ photograph cannot open the
   page with a screen and a half of image and a void beside it. */
.plate__figure img {
  width: auto;
  max-width: 100%;
  max-height: 68svh;
  object-fit: contain;
}

.process-section,
.formats-section,
.explore-section {
  max-width: var(--measure-wide);
  margin: 150px auto 0;
  padding: 0 var(--gutter);
}

.process {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}

.process__step {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 40px;
  padding: 34px 0;
  border-bottom: 1px solid var(--rule);
}

.process__num {
  font-family: var(--serif);
  font-weight: 200;
  font-size: 34px;
  line-height: 1;
  color: var(--brass);
}

.process__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 10px;
}

.process__note {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

.formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 40px;
}

.format {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.format + .format {
  border-left: 1px solid var(--rule);
  padding-left: 64px;
}

.format__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 16px;
}

.format__note {
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 40ch;
  text-wrap: pretty;
}

.explore {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.explore__item {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.terms {
  margin: 0;
  border-top: 1px solid currentColor;
}

.terms__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  padding: 15px 0;
  border-bottom: 1px solid currentColor;
}

.terms__key {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-top: 3px;
}

.terms__val {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}







/* --- About ---------------------------------------------------------------- */

.about-portrait {
  max-width: var(--measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 90px;
  align-items: end;
}

.about-portrait img {
  width: 100%;
  max-width: 520px;
  height: auto;
}

.about-portrait figcaption {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.about-portrait__note {
  padding-bottom: 34px;
}

.about-portrait__note .rule-short {
  width: 100px;
  margin-bottom: 30px;
}

.about-portrait__note .body-copy {
  font-size: 14px;
  line-height: 1.9;
  max-width: 30ch;
}

.bio p + p {
  margin-top: 26px;
}

.bio .body-copy {
  max-width: 58ch;
}

.facts {
  border-top: 1px solid var(--rule-strong);
}

.fact {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}

.fact__key {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.fact__value {
  font-size: 15px;
  line-height: 1.7;
}

.marks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  border-top: 1px solid var(--rule-strong);
  padding-top: 34px;
}

.mark {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mark__title {
  font-family: var(--serif);
  font-size: 22px;
}

.mark__note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.studio-film {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 44px;
  align-items: start;
}

.studio-film iframe {
  width: 100%;
  height: 560px;
  border: 0;
  background: var(--paper);
}

.studio-film__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
}

.giving-figure {
  margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: end;
}

.giving-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}


/* --- About: portrait-led opening ------------------------------------------
   The portrait is the first thing after the title, not the fourth module. */

.page-head--about {
  padding-bottom: 0;
}

.portrait-lead {
  max-width: var(--measure-wide);
  margin: 40px auto 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 80px;
  align-items: center;
}

.portrait-lead__figure img {
  width: 100%;
  height: auto;
}

.portrait-lead__quote {
  font-family: var(--serif);
  font-weight: 200;
  font-style: italic;
  font-size: 40px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 36px;
  max-width: 22ch;
  text-wrap: pretty;
}

.portrait-lead__body .rule-short {
  margin-bottom: 30px;
}

.studio-figure {
  max-width: var(--measure-wide);
  margin: 0 auto;
}

.studio-figure img {
  width: 100%;
  height: auto;
}

.studio-figure__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 18px;
}

.onward {
  max-width: var(--measure);
  margin: 150px auto 0;
  padding: 0 var(--gutter);
}

.onward__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule-strong);
}

.onward__link {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--ink);
}

.onward__link:hover {
  color: var(--brass);
}

/* --- Contact -------------------------------------------------------------- */

.contact-details {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--rule-strong);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-detail__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.contact-detail__value {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
}

.enquiry {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: start;
}

.enquiry h2 {
  margin-bottom: 56px;
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.field__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.field input,
.field select,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 10px 0;
  font-size: 15px;
  color: var(--ink);
  border-radius: 0;
}

.field textarea {
  line-height: 1.7;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.enquiry-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry-form__status {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: var(--stone);
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.enquiry-form__status.is-error {
  border-left-color: #8c3a2b;
}

.enquiry-form__status a {
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
}

.enquiry-form__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.enquiry-form__submit {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 6px;
  cursor: pointer;
  font-family: var(--sans);
}

.enquiry-form__submit:hover {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

.enquiry-form__privacy {
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-quiet);
  max-width: 34ch;
}

.enquiry figcaption {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

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

.site-footer {
  margin-top: 220px;
  padding: 0 var(--gutter) 80px;
}

.site-footer__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding-top: 90px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.site-footer__monogram {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.site-footer__links {
  display: flex;
  gap: 44px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer__links a {
  color: var(--ink-soft);
}

.site-footer__links a:hover {
  color: var(--brass);
}

.site-footer__name {
  color: var(--ink);
}

.site-footer__legal {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 20, 19, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 56px;
  cursor: zoom-out;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__image {
  max-width: 84vw;
  max-height: 62vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}

.lightbox__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 26px;
  color: var(--cream);
}

.lightbox__medium {
  font-size: 12px;
  color: #b5aea4;
}

.lightbox__status {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c9a882;
}

.lightbox__nav {
  display: flex;
  gap: 40px;
}

.lightbox__btn,
.lightbox__close {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.7);
  background: transparent;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
}

.lightbox__btn:hover,
.lightbox__close:hover {
  color: var(--cream);
}

.lightbox__close {
  position: absolute;
  top: 34px;
  right: 44px;
}

/* --- Reveal on scroll ------------------------------------------------------ */

[data-reveal] {
  transition: opacity 420ms ease, transform 420ms ease;
}

[data-reveal].is-pending {
  opacity: 0;
  /* 22px of travel read as things sliding in. 8px reads as settling. */
  transform: translateY(8px);
  will-change: opacity, transform;
}

/* Artwork simply fades. The lifting mask was handsome and far too slow: a
   second and a half per painting on a page holding thirty-five of them. The
   work is never scaled, moved or cropped either way. */
[data-reveal].is-image {
  transition: opacity 480ms ease;
}

[data-reveal].is-image.is-pending {
  transform: none;
}

/* --- Hover ----------------------------------------------------------------
   Pointer devices only: on a touch screen :hover sticks after a tap, which
   would leave rules drawn under whatever was last touched. */

@media (hover: hover) and (pointer: fine) {
  .site-nav a {
    position: relative;
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
  }

  .site-nav a:hover::after,
  .site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* A hairline draws under a work as the pointer rests on it: the only cue
     that the artwork opens, since nothing about the image itself changes. */
  .zoom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--brass);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 320ms ease;
  }

  .zoom:hover::after,
  .zoom:focus-visible::after {
    transform: scaleX(1);
  }

  .zoom:hover .caption__title {
    color: var(--brass);
  }
}

/* --- Lightbox entrance ----------------------------------------------------- */

.lightbox {
  animation: lightboxIn 200ms ease both;
}

.lightbox__image {
  animation: lightboxArt 280ms ease both;
}

/* Stepping with the arrows swaps the src on an element that never left the
   DOM, so nothing would re-animate. The script re-adds this class to restart
   the same curve. */
.lightbox.is-stepping .lightbox__image {
  animation: lightboxArt 220ms ease both;
}

@keyframes lightboxIn {
  from {
    opacity: 0;
  }
}

@keyframes lightboxArt {
  from {
    opacity: 0;
  }
}

/* --- Between pages ---------------------------------------------------------
   A cross-fade rather than a hard cut, so moving through the site feels like
   one continuous surface. Browsers without view transitions navigate exactly
   as before; there is no script and no fallback to go wrong. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 160ms ease both viewFadeOut;
}

::view-transition-new(root) {
  animation: 240ms ease both viewFadeIn;
}

@keyframes viewFadeOut {
  to {
    opacity: 0;
  }
}

@keyframes viewFadeIn {
  from {
    opacity: 0;
  }
}


/* --- Responsive ------------------------------------------------------------ */

/* Equal side tracks keep the navigation centred independently of the logo. */
@media (min-width: 901px) {
  .site-header {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 84px;
    column-gap: 24px;
  }

  .site-nav {
    justify-self: center;
    flex-wrap: nowrap;
  }

}

@media (max-width: 1180px) {
  .site-nav {
    font-size: 14px;
    gap: 8px 20px;
    letter-spacing: 0.08em;
  }

  .artist__inner {
    grid-template-columns: 380px 1fr;
    gap: 56px;
  }

  .about-portrait {
    grid-template-columns: 420px 1fr;
    gap: 56px;
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 22px;
  }

  .site-header {
    position: static;
    padding: 14px var(--gutter) 6px;
    row-gap: 4px;
  }

  /* One compact row: mark left, menu control right. The nav becomes a sheet. */
  .site-header {
    justify-content: space-between;
    flex-wrap: nowrap;
    min-height: 66px;
  }

  /* The header overlays the hero on the landing page, as it does on desktop,
     so the base light-on-artwork treatment applies here too: the neutralising
     rules that used to force ink-on-ivory have been removed.

     The sheet, though, is ivory whether or not the header is over the hero.
     The base rules at .site-header.is-over-hero .site-nav a would paint its
     links cream on ivory; restore them here, later in the cascade. */
  .site-header.is-over-hero .site-nav a {
    color: var(--ink);
  }

  .site-header.is-over-hero .site-nav a[aria-current="page"],
  .site-header.is-over-hero .site-nav a:hover {
    color: var(--brass);
  }

  .nav-toggle {
    display: inline-flex;
    font-size: 13px;
    gap: 12px;
    min-height: 44px;
    padding: 16px 6px;
  }

  .nav-toggle__bars {
    width: 24px;
    height: 9px;
  }

  .nav-close {
    display: block;
    align-self: flex-start;
    margin-top: 8px;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding: 110px var(--gutter) 48px;
    background: var(--paper);
    font-size: 26px;
    letter-spacing: 0.02em;
    text-transform: none;
    font-family: var(--serif);
    font-weight: 300;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    /* pointer-events guards the gap: even mid-transition, a sheet that is not
       open must never intercept taps meant for the page beneath it. */
    pointer-events: none;
    transition: opacity 260ms ease, visibility 0s linear 260ms;
  }

  body.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 260ms ease;
  }

  body.nav-open {
    overflow: hidden;
  }

  .site-nav a {
    padding: 14px 0;
    display: block;
    width: 100%;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }

  .site-nav a[aria-current="page"] {
    color: var(--brass);
  }

  .site-header__mark img {
    height: 84px;
    width: 84px;
  }

  /* Sticky, not static: the menu control must stay reachable once the visitor
     has scrolled, otherwise navigation is only available at the top of the
     page. Sticky occupies the same flow space as static, so the hero still
     begins immediately. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* Landing page only: the header leaves the flow and floats over the hero,
     as it does on desktop. The six interior pages keep the sticky header
     above their content, so nothing there has to make room for it. */
  body[data-page="home"] .site-header {
    position: fixed;
    left: 0;
    right: 0;
  }

  body[data-page="home"] main {
    padding-top: 0;
  }

  /* The sheet is a descendant of the header, so raising the header itself
     cannot lift its contents above it: a positioned child with a higher
     z-index paints over the parent regardless. Lift the mark and the toggle
     instead, so the brand stays visible and the control the visitor just
     tapped is still under their thumb, now reading "Close". */
  body.nav-open .site-header__mark,
  body.nav-open .nav-toggle {
    position: relative;
    z-index: 62;
  }

  /* backdrop-filter makes an element the containing block for its
     position:fixed descendants, so the sheet was sized to the header: 138px
     tall: instead of the viewport. It worked on the home page only because
     the over-hero state sets backdrop-filter:none at scroll top. Drop the
     filter while the sheet is open; the header is opaque behind it anyway. */
  body.nav-open .site-header {
    backdrop-filter: none;
    /* Scroll-locking the body removes the scrollport, so a sticky header falls
       back to its static position: off-screen if the sheet was opened partway
       down the page, taking the brand mark and the Close control with it.
       Fixed pins it for as long as the sheet is open. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* The toggle is the close control, so the duplicate at the foot of the
     sheet is redundant clutter. */
  .nav-close {
    display: none;
  }

  /* 16px minimum stops iOS Safari zooming the page when a field is focused. */
  .field input,
  .field select,
  .field textarea {
    font-size: 16px;
  }

  main {
    padding-top: 8px;
  }

  .page-head {
    padding-top: 56px;
    padding-bottom: 16px;
    /* Held to the tallest real head on a phone (Exhibitions, 410px) so the
       band still starts at the same point on every page without reserving a
       screenful of emptiness the way the old fixed 520px did. */
    min-height: 415px;
  }

  .page-title {
    font-size: 52px;
  }

  .page-head__row {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .h-display,
  .artist__name,
  .studio-home__title,
  .closer__title,
  .selected__lead-title {
    font-size: 32px;
    line-height: 1.18;
  }

  .show__title {
    font-size: 21px;
  }

  .band__quote,
  .band__pull,
  .practice__quote,
  .closer-split__lede,
  .studio-aside__lede {
    font-size: 27px;
    line-height: 1.36;
    max-width: none;
  }

  .band {
    padding: 64px var(--gutter);
  }

  .artist__inner,
  .selected__lead,
  .selected__pairs,
  .selected__duo,
  .pair,
  .studio-home__inner,
  .split,
  .duo-start,
  .studio-aside,
  .studio-film,
  .about-portrait,
  .giving-figure,
  .enquiry,
  .grid-available,
  .grid-selected,
  .marks,
  .contact-details,
  .hero-meta,
  .fact,
  .show {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* minmax(0,…) so a wide source image can't set the column's min-content
     width and push the grid past the viewport. */
  .plate,
  .formats,
  .portrait-lead,
  .pathways__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .pathways__grid {
    gap: 0;
  }

  .pathway,
  .pathway:nth-child(odd),
  .pathway:nth-child(even) {
    padding: 22px 0 24px;
    border-right: 0;
    border-left: 0;
  }

  .pathway__title {
    font-size: 22px;
  }

  .pause {
    margin-top: 56px;
    padding: 56px var(--gutter);
  }

  .statement {
    margin-top: 84px;
  }

  .pathways {
    margin-top: 64px;
  }

  .artist {
    margin-top: 16px;
  }

  .section-head {
    padding-bottom: 14px;
  }

  .section-head__link {
    font-size: 17px;
  }

  .statement__quote {
    font-size: 27px;
    line-height: 1.36;
    margin-bottom: 34px;
  }

  .selected .pair {
    margin-top: 96px;
  }

  .portrait-lead {
    margin-top: 34px;
  }

  .portrait-lead__quote {
    font-size: 27px;
    line-height: 1.36;
    max-width: none;
    margin-bottom: 28px;
  }

  .onward {
    margin-top: 96px;
  }

  .onward__links {
    flex-direction: column;
    gap: 0;
  }

  .onward__link {
    font-size: 21px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
  }

  .studio-figure__cap {
    flex-direction: column;
    gap: 10px;
  }

  .format + .format {
    border-left: 0;
    padding-left: 0;
    padding-top: 30px;
    border-top: 1px solid var(--rule);
  }

  .process__step {
    grid-template-columns: 52px 1fr;
    gap: 20px;
    padding: 26px 0;
  }

  .process__num {
    font-size: 26px;
  }

  .process__title {
    font-size: 21px;
  }

  .terms__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .plate,
  .process-section,
  .formats-section,
  .explore-section {
    margin-top: 96px;
  }

  .grid-recent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 24px;
  }

  .grid-recent img {
    max-height: 42svh;
  }

  /* A pair stays a pair on a phone: side by side, never stacked. */
  .pair-set {
    grid-column: span 2;
    gap: 8px;
  }

  .grid-selected img,
  .grid-available img {
    max-height: 70svh;
  }

  .available-panel {
    padding: 64px 0 72px;
    margin-top: 96px;
  }

  .contents {
    gap: 0;
    flex-direction: column;
  }

  .contents a {
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
  }

  .grid-recent img {
    max-width: 100%;
  }

  .grid-diptych {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .marks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }

  .fact {
    gap: 8px;
  }

  .columns-3,
  .columns-4 {
    column-count: 1;
  }

  .show {
    padding: 26px 0;
    gap: 10px;
  }

  .year-group {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 0;
  }

  .year-group__year {
    font-size: 26px;
  }

  .year-group__year--approx {
    font-size: 17px;
    max-width: none;
  }

  .entry__title {
    font-size: 21px;
  }

  .show__place {
    text-align: left;
  }

  .hero-meta__note--end {
    text-align: left;
  }

  .hero-meta__mark img {
    max-width: 218px;
  }

  /* One full-width, uncropped painting gives the mobile landing page scale.
     Keep the desktop diptych and the Work page presentation unchanged. */
  .hero__pair,
  .hero-labels {
    grid-template-columns: 1fr;
  }

  .hero__pair img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .hero__pair img:nth-child(2),
  .hero-labels span:nth-child(2) {
    display: none;
  }

  .hero__jump {
    left: var(--gutter);
    bottom: 14px;
  }

  /* Keep navigation contrast local to the top of the mobile painting. */
  .hero::before {
    height: 180px;
    background: linear-gradient(
      to bottom,
      rgba(20, 20, 19, 0.68) 0,
      rgba(20, 20, 19, 0.48) 80px,
      rgba(20, 20, 19, 0) 180px
    );
  }

  /* A dark halo does the rest. The paintings carry pale passages right where
     the mark and the menu control sit, and no veil light enough to leave the
     artwork alone can hold cream against near-white paint on its own. This is
     the same device the "Selected works" link already uses over the hero.
     Applied to the children, never to .site-header itself: a filter there
     would make it the containing block for the fixed nav sheet. */
  .site-header.is-over-hero .nav-toggle {
    text-shadow: 0 1px 6px rgba(20, 20, 19, 0.9);
  }

  .site-header.is-over-hero .nav-toggle__bars {
    filter: drop-shadow(0 1px 4px rgba(20, 20, 19, 0.9));
  }

  /* The hero labels and the artist plate carried fixed 48px / 40px insets
     from the desktop layout; align them to the mobile gutter. */
  .hero-labels span,
  .hero-labels span:last-child {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .artist {
    --artist-inset: var(--gutter);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .selected__eyebrow {
    margin-bottom: 40px;
  }

  .artist,
  .practice__inner,
  .studio-home,
  .closer,
  .selected {
    padding-top: 64px;
  }

  .practice__inner {
    padding-bottom: 110px;
  }

  .selected__lead,
  .selected__pairs {
    margin-bottom: 96px;
  }

  .works-section,
  .works-section--near,
  .prose-section,
  .prose-section--near,
  .closer-split {
    margin-top: 96px;
  }

  .studio-film iframe {
    height: 480px;
  }

  .site-footer {
    margin-top: 96px;
    padding-bottom: 44px;
  }

  .site-footer__inner {
    padding-top: 56px;
    gap: 30px;
  }

  .site-footer__monogram {
    width: 116px;
    height: 116px;
  }

  .site-footer__links {
    gap: 14px 26px;
  }

  /* Tap targets: extend the hit area with a pseudo-element instead of real
     padding, so the underline stays tight to the text and nothing reflows. */
  .link-under,
  .contact-detail__value,
  .site-footer__links a {
    position: relative;
  }

  .link-under::after,
  .contact-detail__value::after,
  .site-footer__links a::after {
    content: "";
    position: absolute;
    left: -6px;
    right: -6px;
    top: -13px;
    bottom: -13px;
  }

  .site-footer__links a {
    padding: 4px 2px;
  }

  .lightbox {
    padding: 20px;
    gap: 22px;
  }

  .lightbox__image {
    max-width: 90vw;
    max-height: 58vh;
  }

  .lightbox__nav {
    gap: 20px;
  }

  .lightbox__btn,
  .lightbox__close {
    padding: 14px 12px;
  }

  .lightbox__close {
    top: 8px;
    right: 8px;
  }
}

/* Small phones (iPhone SE and similar): tighten the gutter. The nav rules that
   used to live here sized a six-link inline row; below 900px the nav is a
   full-screen sheet, and they were shrinking its 26px links to 11px. */
@media (max-width: 360px) {
  :root {
    --gutter: 18px;
  }

  .page-title {
    font-size: 44px;
  }

  .h-display,
  .artist__name,
  .studio-home__title,
  .closer__title,
  .selected__lead-title {
    font-size: 29px;
  }

  .band__quote,
  .band__pull,
  .practice__quote,
  .closer-split__lede,
  .studio-aside__lede {
    font-size: 24px;
  }

  .grid-recent,
  .grid-diptych {
    gap: 30px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    /* Delays too: zeroing only the duration still left the hero wordmark
       invisible for its 980ms lead-in before snapping in. */
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }

  [data-reveal].is-pending {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  /* Killing the duration is not enough for a cross-document transition: the
     snapshot still cross-fades. Remove the animation outright. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Work catalogue: consistent viewing scale without changing artwork pixels.
   Pairs keep proportional columns; individual works use contained image slots. */
/* Series labels sit below the two primary availability headings. */
body[data-page="work"] .series-heading {
  grid-column: 1 / -1;
  margin: 0 0 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font: 400 clamp(20px, 1.7vw, 24px) / 1.3 var(--serif);
  letter-spacing: .01em;
  text-wrap: balance;
}
body[data-page="work"] .pair-set > .series-heading { margin-bottom: 8px; }
body[data-page="work"] .work-series { margin-top: clamp(64px, 7vw, 100px); }
body[data-page="work"] .works-section { --catalogue-gap: clamp(48px, 6vw, 80px); }
body[data-page="work"] .grid-available > figure,
body[data-page="work"] .grid-recent > figure,
body[data-page="work"] .grid-selected > figure {
  grid-column: 1 / -1;
  width: min(100%, 520px);
  justify-self: center;
}
body[data-page="work"] .grid-available > figure > img,
body[data-page="work"] .grid-recent > figure > img,
body[data-page="work"] .grid-selected > figure > img {
  width: 100%; height: 520px; max-width: 100%; max-height: none;
  object-fit: contain; object-position: center bottom;
}
body[data-page="work"] .private-collection-grid .columns-4 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-count: auto; gap: var(--catalogue-gap) 32px;
}
body[data-page="work"] .private-collection-grid figure { margin: 0; min-width: 0; }
body[data-page="work"] .private-collection-grid figure > img {
  width: 100%; height: 360px; max-height: none;
  object-fit: contain; object-position: center bottom;
}
body[data-page="work"] .private-collection-grid .caption { margin-top: 20px; }
body[data-page="work"] .private-collection-grid .caption,
body[data-page="work"] .grid-recent > figure .caption,
body[data-page="work"] .grid-selected > figure .caption {
  align-items: center; text-align: center;
}
body[data-page="work"] #moments-in-bloom { max-width: 760px; }
@media (max-width: 900px) {
  body[data-page="work"] .private-collection-grid .columns-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px;
  }
}
@media (max-width: 600px) {
  body[data-page="work"] .private-collection-grid .columns-4 { grid-template-columns: 1fr; }
  body[data-page="work"] .private-collection-grid figure > img,
  body[data-page="work"] .grid-available > figure > img,
  body[data-page="work"] .grid-recent > figure > img,
  body[data-page="work"] .grid-selected > figure > img { height: min(115vw, 480px); }
  body[data-page="work"] .grid-diptych { gap: 32px 16px; }
}

/* Local editorial preview: artwork assets remain unchanged. */
#silent-voices, #glowing-under-the-sun { scroll-margin-top: 150px; }

/* Reversible display-only exposure lift for the darker Sun photographs. */
img[src*="catalogue-dsc06282"], img[src*="catalogue-dsc06283"] {
  filter: brightness(1.08);
}

body[data-page="work"] .grid-available,
body[data-page="work"] .grid-recent {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 40px;
}

body[data-page="work"] .pair-set {
  grid-column: 1 / -1;
  grid-template-columns: var(--pair-columns) !important;
  grid-template-rows: auto;
  gap: 20px;
  width: min(100%, calc(var(--pair-max) * .85));
  justify-self: center;
  align-items: start;
}

body[data-page="work"] .pair-set > figure {
  display: flex;
  flex-direction: column;
  grid-row: auto;
  min-width: 0;
}

body[data-page="work"] .pair-set > figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: left center;
  margin: 0;
}

body[data-page="work"] .pair-set .caption {
  align-items: flex-start;
  text-align: left;
}

/* Tall panels share a fluid viewing scale, retaining their original ratios.
   Four-panel sets reflow to two columns on small screens. */
body[data-page="work"] #glowing-under-the-sun,
body[data-page="work"] #silver-bloom {
  width: min(100%, calc(clamp(600px, 60vw, 900px) * .666667 + 20px));
}
body[data-page="work"] #moments-in-bloom {
  width: 100%;
  max-width: calc(clamp(600px, 60vw, 900px) * 1.33056 + 60px);
}
@media (max-width: 900px) {
  body[data-page="work"] #moments-in-bloom {
    max-width: calc(clamp(600px, 60vw, 900px) * .66528 + 20px);
  }
}
/* The figure hugs Winter Bloom's native ratio so its caption cannot drift
   into the former 520px-wide letterboxed image area. */
body[data-page="work"] .grid-available > .winter-bloom-card {
  width: min(100%, 436px);
}
body[data-page="work"] .grid-available > .winter-bloom-card > img {
  display: block; width: 100%; height: auto; margin: 0;
}
body[data-page="work"] .winter-bloom-card .caption {
  align-items: flex-start; text-align: left;
}

.caption .link-under {
  align-self: flex-start;
  margin-top: 12px;
}

/* Reversible photo-edge crops: I trims 48px right; II trims 27px left,
   12px right and 10px bottom. Original photographs remain unchanged. */
#ember-song-i-edge {
  width: 100%;
  aspect-ratio: 1752 / 2471;
  overflow: hidden;
}
body[data-page="work"] .pair-set > figure #ember-song-i-edge img {
  width: 102.73972603%;
  max-width: none;
  height: auto;
}
#ember-song-ii-edge {
  width: 100%;
  aspect-ratio: 1761 / 2548;
  overflow: hidden;
}
body[data-page="work"] .pair-set > figure #ember-song-ii-edge img {
  width: 102.21465077%;
  max-width: none;
  height: auto;
  margin-left: -1.53321976%;
}

.caption__title { font-weight: 400; line-height: 1.35; }
.page-lede, .artist__lede { font-weight: 400; }
.body-copy { font-size: 16px; line-height: 1.8; }
.body-copy--sm { font-size: 15px; }
.eyebrow { letter-spacing: 0.16em; }
.caption__status { letter-spacing: 0.12em; }

body[data-page="work"] .page-head,
body[data-page="commissions"] .page-head,
body[data-page="contact"] .page-head,
body[data-page="exhibitions"] .page-head {
  min-height: 0;
  padding-top: 166px;
}

body[data-page="commissions"] .plate {
  margin-top: 48px;
  gap: 48px;
}

body[data-page="exhibitions"] .prose-section {
  margin-top: 64px;
}

body[data-page="commissions"] .page-head__eyebrow,
body[data-page="exhibitions"] .page-head__eyebrow {
  margin-bottom: 24px;
}

.pathways__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
  body[data-page="work"] .grid-available,
  body[data-page="work"] .grid-recent,
  body[data-page="work"] .grid-selected,
  .pathways__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-page="work"] .pair-set { gap: 12px; }
  body[data-page="work"] .pair-set .caption__title { font-size: 18px; }
  body[data-page="work"] .pair-set > figure img {
    height: auto;
    max-height: none;
  }
  body[data-page="work"] .page-head,
  body[data-page="commissions"] .page-head,
  body[data-page="contact"] .page-head,
  body[data-page="exhibitions"] .page-head {
    padding-top: 40px;
  }
  body[data-page="commissions"] .plate { margin-top: 32px; }
  body[data-page="exhibitions"] .prose-section { margin-top: 40px; }
}

/* Optional framing in the artwork viewer; gallery photographs stay unframed. */
.lightbox {
  gap: 12px;
  padding: 60px 24px 24px;
  overflow-y: auto;
}
.lightbox__stage {
  --rail: 14px;
  --float: 2px;
  position: relative;
  box-sizing: content-box;
  width: auto;
  flex-shrink: 0;
  padding: calc(var(--rail) + var(--float));
  cursor: default;
}
.lightbox__viewport { position: relative; overflow: hidden; width: 100%; }
.lightbox__stage .lightbox__image {
  display: block;
  max-width: none;
  max-height: none;
  height: auto;
  animation: none;
}
.lightbox.is-stepping .lightbox__stage .lightbox__image { animation: none; }
.lightbox.is-framed { background: #f3f2ef; }
.lightbox.is-framed .lightbox__stage {
  background: #76644d;
  box-shadow: 1px 2px 0 #b9b5ac, 3px 5px 5px rgb(49 42 31 / 14%),
    7px 13px 16px rgb(49 42 31 / 13%), 15px 25px 40px rgb(49 42 31 / 8%);
}
.lightbox.is-framed .lightbox__viewport {
  box-shadow: 0 1px 1px rgb(39 30 18 / 22%);
}
.lightbox__rail { display: none; position: absolute; pointer-events: none; }
.is-framed .lightbox__rail { display: block; }
.lightbox__rail--top, .lightbox__rail--bottom {
  left: 0; width: 100%; height: var(--rail);
  background: linear-gradient(180deg, #fff 0%, #f5f4f0 18%, #f1f0eb 76%, #d6d3cb 91%, #aaa79f 100%);
}
.lightbox__rail--left, .lightbox__rail--right {
  top: 0; height: 100%; width: var(--rail);
  background: linear-gradient(90deg, #fff 0%, #f5f4f0 18%, #efeee9 76%, #d2cfc6 91%, #aaa79f 100%);
}
.lightbox__rail--top {
  top: 0; clip-path: polygon(0 0, 100% 0, calc(100% - var(--rail)) 100%, var(--rail) 100%);
}
.lightbox__rail--bottom {
  bottom: 0; transform: rotate(180deg); filter: brightness(.94);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--rail)) 100%, var(--rail) 100%);
}
.lightbox__rail--left {
  left: 0; clip-path: polygon(0 0, 100% var(--rail), 100% calc(100% - var(--rail)), 0 100%);
}
.lightbox__rail--right {
  right: 0; transform: rotate(180deg); filter: brightness(.96);
  clip-path: polygon(0 0, 100% var(--rail), 100% calc(100% - var(--rail)), 0 100%);
}
[data-frame="oak"] .lightbox__rail {
  --grain-direction: 180deg;
  background:
    repeating-linear-gradient(calc(var(--grain-direction) + .3deg), transparent 0 3px, #8b68441f 3.3px 3.8px, transparent 4.2px 7px),
    repeating-linear-gradient(calc(var(--grain-direction) - .25deg), #ffffff0d 0 1px, transparent 1px 4px, #aa825219 4px 5px, transparent 5px 11px),
    linear-gradient(var(--grain-direction), #e7d3b1 0%, #d7be96 7%, #d4b78a 92%, #b99c73 100%);
}
[data-frame="oak"] .lightbox__rail--left,
[data-frame="oak"] .lightbox__rail--right { --grain-direction: 90deg; }
.lightbox__finishes { display: flex; justify-content: center; gap: 6px; }
.lightbox__frame-toggle[aria-pressed="true"] { box-shadow: inset 0 -2px 0 currentColor; }
.lightbox__frame-toggle[data-finish="oak"]::before {
  content: ''; display: inline-block; width: 10px; height: 10px;
  margin-right: 7px; border: 1px solid #bdb9b0; background: #ceb58e;
}
.lightbox.is-framed .lightbox__title,
.lightbox.is-framed .lightbox__btn,
.lightbox.is-framed .lightbox__close { color: #292925; }
.lightbox.is-framed .lightbox__medium,
.lightbox.is-framed .lightbox__status { color: #656259; }
.lightbox__frame-controls { text-align: center; max-width: 380px; }
.lightbox__frame-toggle {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #8a867f;
  background: transparent;
  color: #efefeb;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.lightbox.is-framed .lightbox__frame-toggle { color: #343431; }
.lightbox__frame-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #656259; }
.lightbox button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.lightbox__meta { gap: 4px; }
.lightbox__medium:empty, .lightbox__status:empty { display: none; }
.lightbox__btn { min-height: 44px; }

/* Artist monograph: portrait and introduction share one editorial spread.
   The complete original portrait is displayed without retouching or cropping. */
.artist__inner {
  max-width: 1080px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(40px, 6vw, 88px);
  row-gap: clamp(56px, 7vw, 96px);
  align-items: center;
}
.artist__intro { grid-column: 2; grid-row: 1; min-width: 0; }
.artist__index {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin: 0 0 24px;
  font: 12px / 1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.artist__name {
  display: block;
  margin: 0 0 32px; font-size: clamp(52px, 5.8vw, 80px);
  font-weight: 300; line-height: 1.08; letter-spacing: -.035em;
}
.artist__name em, .artist__name span { display: block; }
.artist__name em { font-weight: 300; }
.artist__statement {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 88px);
  width: 100%;
  margin: 0;
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.artist__statement h3 {
  font: 400 12px / 1.5 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 24px; color: var(--ink-soft);
}
.artist__statement blockquote {
  margin: 0; max-width: 23ch;
  font: 300 clamp(28px, 2.7vw, 36px) / 1.3 var(--serif);
  letter-spacing: -.015em; text-wrap: pretty;
}
.artist__statement p {
  font: 400 16px / 1.85 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.artist__statement p:last-child { margin-bottom: 0; }
.artist__portrait {
  grid-column: 1; grid-row: 1; margin: 0;
  width: 100%; max-width: none;
}
.artist__portrait img { display: block; width: 100%; max-width: none; height: auto; }
.artist__portrait figcaption {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: .06em;
}
.artist__body {
  padding: 0; max-width: 48ch; margin: 0;
}
.artist__body .artist__lede {
  font: 400 17px / 1.8 var(--sans); color: var(--ink-soft);
  max-width: none; margin-bottom: 24px;
}
.artist__link {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 52px; margin-top: 36px; padding: 12px 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
  text-decoration: none; font: 12px / 1.5 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
}
.artist__link span:last-child { font-size: 24px; line-height: 1; }
.artist__link:hover { color: var(--brass); }
.artist__link:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 900px) {
  .artist__inner { grid-template-columns: 1fr; row-gap: 40px; max-width: 640px; }
  .artist__intro { grid-column: 1; grid-row: 1; }
  .artist__index { letter-spacing: .08em; margin-bottom: 20px; }
  .artist__name { font-size: clamp(44px, 8vw, 56px); margin-bottom: 24px; }
  .artist__name em, .artist__name span { display: inline; }
  .artist__portrait { grid-column: 1; grid-row: 2; width: min(100%, 480px); justify-self: center; }
  .artist__body { max-width: none; }
  .artist__body .artist__lede { font-size: 16px; line-height: 1.8; }
  .artist__link { margin-top: 28px; }
  .artist__statement { grid-template-columns: 1fr; gap: 32px; }
  .artist__statement blockquote { max-width: 30ch; }
}
@media (max-width: 600px) {
  .lightbox__stage { --rail: 11px; --float: 1.5px; }
  .lightbox__frame-toggle { font-size: 12px; padding-inline: 8px; }
  .artist__portrait figcaption { font-size: 11px; letter-spacing: .04em; }
}
@media (max-height: 500px) {
  .lightbox { justify-content: flex-start; }
  .lightbox__stage { width: min(65vw, calc(40svh * var(--art-ratio, 1))); }
}

/* Collector edition: one typographic and interaction scale across pages. */
.caption__title, .caption--lead .caption__title { font-size: 20px; font-weight: 400; line-height: 1.3; }
.page-title, .h-display { font-weight: 300; }
.page-head__eyebrow { margin-bottom: 24px; }
.caption__status, .caption--tight .caption__status { font-size: 12px; letter-spacing: .08em; }
.caption a { margin-top: 0; }
.art-detail-link, .collector-cta, .link-under, .section-head__link,
.hero-meta__link, .site-footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.art-detail-link { align-self: flex-start; font-size: 13px; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; }
.collector-cta {
  justify-content: center; padding: 12px 18px; border: 1px solid var(--ink);
  font: 400 14px / 1.5 var(--sans); text-align: center;
}
.collector-cta:hover { background: var(--header-grey); color: var(--ink); }
.field input, .field select, .enquiry-form__submit { min-height: 44px; }
.contact-detail a { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav a, .contents a { display: inline-flex; align-items: center; min-height: 44px; }
body.nav-open .site-header .nav-toggle { color: var(--ink); text-shadow: none; }
body.nav-open .site-header .nav-toggle__bars { filter: none; }
a:focus-visible, button:focus-visible, [data-lightbox]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 4px;
}
.hero-meta { grid-template-columns: 1.05fr 1.15fr .8fr; align-items: center; gap: 32px; }
.hero-meta__identity { display: flex; flex-direction: column; gap: 10px; }
.hero-meta__name { font: 400 clamp(26px, 2.4vw, 34px) / 1.1 var(--serif); letter-spacing: -.02em; }
.hero-meta__line { font-size: 19px; line-height: 1.55; max-width: 32ch; }
.hero-meta__note { font-size: 11px; letter-spacing: .1em; }
.hero__jump { display: flex; align-items: center; min-height: 44px; }
.selected { padding-top: 88px; padding-bottom: 88px; }
.selected__eyebrow { margin-bottom: 56px; }
.selected__opening {
  --pair-columns: 709.025fr 691.130fr;
  --pair-max: 916px;
  display: grid; grid-template-columns: var(--pair-columns); column-gap: clamp(16px, 3vw, 40px); row-gap: 0;
  max-width: var(--pair-max); margin: 0 auto 112px; align-items: start;
}
.selected__opening img, .selected__contrast img, .selected__closing img { width: 100%; height: auto; }
.selected__opening.pair-set > figure .caption { align-items: flex-start; text-align: left; }
.art-crop { overflow: hidden; width: 100%; }
.art-crop--ember-i { aspect-ratio: 1752 / 2471; }
.art-crop--ember-i img { width: 102.73972603%; max-width: none; height: auto; }
.art-crop--ember-ii { aspect-ratio: 1761 / 2548; }
.art-crop--ember-ii img { width: 102.21465077%; max-width: none; height: auto; margin-left: -1.53321976%; }
.selected__contrast {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr);
  align-items: center; gap: clamp(40px, 8vw, 112px); margin-bottom: 112px;
}
.selected__narrative { margin-top: 64px; }
.selected__closing {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .85fr);
  align-items: center; gap: clamp(40px, 7vw, 96px);
}
.selected__duo { grid-template-columns: 705.469fr 707.031fr; gap: clamp(16px, 2vw, 28px); align-items: start; }
.selected__winter { max-width: 360px; margin-top: 48px; }
.studio-story {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 96px); align-items: center;
  max-width: 1320px; padding: 72px var(--gutter); margin: 0 auto;
}
.studio-story figure img { width: 100%; height: auto; }
.studio-story figcaption { margin-top: 16px; font-size: 12px; color: var(--ink-soft); }
.studio-story h2 { font: 300 clamp(36px, 4vw, 56px) / 1.08 var(--serif); letter-spacing: -.02em; margin: 24px 0; }
.exhibition-highlights { max-width: var(--measure-wide); margin: 36px auto 0; padding: 0 var(--gutter); }
.exhibition-highlights__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 32px; }
.exhibition-highlights article { border-top: 1px solid var(--ink); padding: 24px 0 16px; }
.exhibition-highlights__year { font: 300 56px / 1 var(--serif); color: var(--ink-soft); }
.exhibition-highlights h3 { font: 400 27px / 1.2 var(--serif); margin: 32px 0 12px; }
.exhibition-highlights p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
#exhibition-history { scroll-margin-top: 140px; }

/* Static artwork pages reuse the exact source photos and approved edge crops. */
.artwork-page { max-width: 1320px; margin: 0 auto; padding: 154px var(--gutter) 0; }
.artwork-breadcrumb { margin-bottom: 32px; }
.artwork-detail { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: clamp(48px, 7vw, 104px); align-items: start; }
.artwork-detail__painting { max-width: 580px; width: 100%; margin: 0 auto; }
.artwork-detail__painting.is-small-source { max-width: 436px; }
.artwork-detail__painting > img { width: 100%; height: auto; }
.artwork-view-hint { font-size: 12px; line-height: 1.6; color: var(--ink-soft); margin-top: 16px; }
.artwork-detail__info { padding-top: 48px; }
.artwork-detail h1 { font: 300 clamp(44px, 4.8vw, 68px) / 1.05 var(--serif); letter-spacing: -.025em; margin: 20px 0 24px; }
.artwork-detail__status { font-size: 13px; letter-spacing: .08em; color: var(--brass); }
.artwork-detail__price { font: 400 20px / 1.4 var(--serif); margin: 12px 0 28px; }
.artwork-detail__note { font-size: 14px; line-height: 1.7; color: var(--ink-soft); max-width: 34ch; margin-top: 24px; }
.artwork-detail__info .art-detail-link { margin-top: 16px; }
.artwork-related { margin: 104px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.artwork-related h2 { font: 400 32px / 1.2 var(--serif); margin: 0 0 40px; }
.artwork-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 640px; }
.artwork-related figure { max-width: 260px; }
.artwork-related figure > img { width: 100%; }

/* Painting-led, full-viewport viewer; fitting is calculated from its real
   available area, not a fixed deduction for the controls. */
.lightbox.collector-viewer {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  align-items: stretch; justify-content: normal; gap: 36px;
  height: 100dvh; padding: 60px 40px 32px; overflow: hidden;
  background: var(--paper); color: var(--ink); cursor: default; animation: none;
}
.lightbox.collector-viewer[hidden], .collector-viewer [hidden] { display: none; }
.viewer-art-area {
  min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: grid; place-items: safe center; padding: 6px;
}
.viewer-art-area:focus-visible { outline: 1px solid var(--ink-soft); outline-offset: -2px; }
.viewer-artworks { display: flex; align-items: center; gap: 16px; width: max-content; }
.viewer-item { flex: none; }
.viewer-item figcaption { font: 400 14px / 1.4 var(--serif); text-align: center; margin-top: 12px; white-space: normal; overflow-wrap: anywhere; }
.collector-viewer .lightbox__stage { padding: 0; box-shadow: none; background: transparent; }
.collector-viewer.is-framed { background: var(--paper); }
.collector-viewer.is-framed .lightbox__stage {
  padding: calc(var(--rail) + var(--float)); background: #76644d;
  box-shadow: 1px 2px 0 #b9b5ac, 3px 5px 5px rgb(49 42 31 / 12%), 7px 13px 16px rgb(49 42 31 / 9%);
}
.collector-viewer .lightbox__image { object-fit: initial; animation: none; }
.viewer-info { align-self: center; max-height: 100%; overflow-y: auto; padding: 4px 8px 4px 4px; }
.viewer-info h2 { font: 400 38px / 1.08 var(--serif); margin: 24px 0 16px; letter-spacing: -.02em; }
.viewer-status { font-size: 13px; letter-spacing: .08em; color: var(--brass); margin: 0 0 10px; }
.viewer-price { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 26px; }
.collector-viewer button { font: 400 13px / 1.5 var(--sans); min-height: 44px; border: 1px solid var(--line); background: transparent; padding: 10px 12px; color: var(--ink); cursor: pointer; }
.collector-viewer button:hover { background: var(--header-grey); }
.collector-viewer button:focus-visible, .collector-viewer a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.viewer-actions { display: flex; flex-direction: column; gap: 8px; }
.viewer-actions button { text-align: left; }
.viewer-actions button[aria-pressed="true"], .viewer-finishes button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.viewer-members { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.viewer-members button { flex: 1 1 40%; padding-inline: 6px; font-size: 12px; }
.viewer-finishes { border: 0; margin: 24px 0 0; padding: 0; display: flex; gap: 8px; }
.viewer-finishes legend { margin-bottom: 10px; padding: 0; font-size: 12px; color: var(--ink-soft); }
.viewer-finishes button { flex: 1; }
.viewer-frame-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.viewer-links { display: flex; flex-direction: column; align-items: stretch; margin-top: 24px; }
.viewer-links .collector-cta { font-size: 13px; }
.viewer-detail { display: flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.viewer-navigation { display: flex; justify-content: space-between; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.viewer-navigation button { border: 0; padding: 8px 0; }
.collector-viewer .viewer-close { position: fixed; top: 8px; right: 24px; z-index: 1; background: var(--paper); border: 0; }
@media (max-width: 1100px) and (min-width: 761px) {
  .lightbox.collector-viewer { grid-template-columns: minmax(0, 1fr) 248px; gap: 24px; padding-inline: 24px; }
  .viewer-info h2 { font-size: 32px; }
}
@media (max-width: 900px) {
  .hero-meta { grid-template-columns: 1fr 1fr; }
  .hero-meta__note--end { grid-column: 2; text-align: left; }
  .artwork-page { padding-top: 40px; }
  .exhibition-highlights__grid { gap: 24px; }
  .exhibition-highlights h3 { font-size: 23px; }
}
@media (max-width: 760px) {
  .caption__title, .caption--lead .caption__title { font-size: 18px; }
  .caption__status, .caption--tight .caption__status { font-size: 11px; letter-spacing: .05em; }
  .hero-meta { grid-template-columns: 1fr; gap: 22px; padding-top: 32px; }
  .hero-meta__note--end { grid-column: auto; }
  .hero-meta__name { font-size: 32px; }
  .hero-meta__line { font-size: 21px; }
  .selected { padding-top: 56px; padding-bottom: 56px; }
  .selected__eyebrow { margin-bottom: 32px; }
  .selected__opening { column-gap: 16px; row-gap: 0; margin-bottom: 64px; }
  .selected__opening .caption__title { font-size: 18px; }
  .selected__contrast, .selected__closing { grid-template-columns: 1fr; gap: 56px; }
  .selected__contrast { margin-bottom: 64px; }
  .selected__narrative { margin: 0; width: 85%; justify-self: end; }
  .selected__duo { grid-template-columns: 705.469fr 707.031fr; gap: 16px; }
  .selected__winter { width: 78%; margin: 0 auto; }
  .studio-story { grid-template-columns: 1fr; padding-block: 32px 56px; gap: 32px; }
  .studio-story h2 { font-size: 40px; }
  .exhibition-highlights { margin-top: 16px; }
  .exhibition-highlights .section-head { align-items: flex-start; }
  .exhibition-highlights__grid { grid-template-columns: 1fr; gap: 24px; margin-top: 20px; }
  .exhibition-highlights article { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 0 24px; padding-block: 20px; }
  .exhibition-highlights__year { grid-row: 1 / 3; font-size: 40px; }
  .exhibition-highlights h3 { margin: 0 0 12px; font-size: 24px; }
  .exhibition-highlights p { grid-column: 2; margin: 0; }
  .artwork-breadcrumb { margin-bottom: 20px; }
  .artwork-detail { grid-template-columns: 1fr; gap: 32px; }
  .artwork-detail__painting { max-width: 480px; }
  .artwork-detail__info { padding-top: 0; }
  .artwork-detail h1 { font-size: 48px; margin-top: 16px; }
  .artwork-related { margin-top: 64px; }
  .artwork-related__grid { gap: 24px; }
  .lightbox.collector-viewer {
    display: block; overflow-y: auto; padding: 56px 16px 24px;
  }
  .viewer-art-area { height: 61svh; min-height: 220px; }
  .viewer-info { max-height: none; overflow: visible; padding: 24px 8px 0; }
  .viewer-info h2 { font-size: 34px; margin-block: 16px; }
  .viewer-actions { flex-direction: row; }
  .viewer-actions button { flex: 1; text-align: center; }
  .viewer-finishes { max-width: 360px; }
  .viewer-links .collector-cta { align-self: stretch; }
  .viewer-item figcaption { font-size: 12px; }
  .collector-viewer .viewer-close { right: 12px; }
}

@media print {
  .site-header,
  .lightbox {
    display: none;
  }

  [data-reveal].is-pending {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}
/* Site-wide spacing rhythm: section breaks remain generous, while adjacent
   blocks no longer accumulate both large exit padding and entrance margins.
   Artwork dimensions, crops, reading line-height and viewer spacing are unchanged. */
:root {
  --space-section: clamp(56px, 6vw, 80px);
  --space-related: clamp(32px, 4vw, 48px);
}
.page-title { margin-bottom: 28px; }
.site-footer { margin-top: var(--space-section); padding-bottom: 40px; }
.site-footer__inner { padding-top: 40px; gap: 24px; }
.closer-split { margin-top: var(--space-section); }
.artwork-related { margin-top: var(--space-section); }
.artwork-related h2 { margin-bottom: 28px; }

body[data-page="home"] .selected { padding-bottom: 48px; }
body[data-page="home"] .selected__opening,
body[data-page="home"] .selected__contrast { margin-bottom: var(--space-section); }
body[data-page="home"] .artist { margin-top: 0; padding-top: 24px; padding-bottom: 32px; }
body[data-page="home"] .artist__heading-band { margin-bottom: 40px; }
body[data-page="home"] .artist__inner { row-gap: var(--space-related); }
body[data-page="home"] .artist__statement { padding-top: var(--space-related); }
body[data-page="home"] .studio-story { padding-block: 40px; }
body[data-page="home"] .pathways { margin-top: 40px; }

body[data-page="work"] .contents-strip { padding-block: 20px; }
body[data-page="work"] .contents { margin-top: 16px; padding-top: 16px; }
body[data-page="work"] .contents-strip + .available-panel { margin-top: 24px; padding-top: 24px; }
body[data-page="work"] .available-panel { padding-bottom: 40px; }
body[data-page="work"] #collections { margin-top: var(--space-section); }
body[data-page="work"] .works-section__intro { margin-bottom: var(--space-related); }
body[data-page="work"] .grid-available,
body[data-page="work"] .grid-recent { row-gap: 56px; }
body[data-page="work"] #collections > .grid-selected { margin-block: var(--space-section); row-gap: 56px; }
body[data-page="work"] #silver-bloom { margin-block: 0 var(--space-section); }
body[data-page="work"] .diptych-block { margin-bottom: 0; }
body[data-page="work"] .private-collection-grid,
body[data-page="work"] .work-series { margin-top: var(--space-section); }
body[data-page="work"] .works-section { --catalogue-gap: clamp(40px, 5vw, 64px); }
body[data-page="work"] #available > .mt-66 { margin-top: 32px; }

body[data-page="commissions"] .process-section,
body[data-page="commissions"] .terms-section { margin-top: var(--space-section); }
body[data-page="exhibitions"] .prose-section h2 { margin-bottom: 32px; }
body[data-page="contact"] .works-section:not(.works-section--near) { margin-top: var(--space-section); }
body[data-page="contact"] .band { min-height: 0; padding-block: 56px; }
@media (max-width: 760px) {
  .page-title { margin-bottom: 24px; }
  .site-footer { padding-bottom: 32px; }
  .site-footer__inner { padding-top: 32px; gap: 22px; }
  body[data-page="home"] .selected { padding-bottom: 32px; }
  body[data-page="home"] .artist { padding-top: 16px; }
  body[data-page="home"] .artist__heading-band { margin-bottom: 32px; }
  body[data-page="home"] .studio-story { padding-block: 24px 32px; }
  body[data-page="home"] .pathways { margin-top: 24px; }
  body[data-page="work"] .grid-available,
  body[data-page="work"] .grid-recent,
  body[data-page="work"] #collections > .grid-selected { row-gap: 40px; }
  body[data-page="contact"] .band { padding-block: 40px; }
}