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

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

:root {
  --paper: #f7f5f1;
  --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: #efece5;
  --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(--cream);
  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: rgba(247, 245, 241, 0.94);
  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;
}

.site-header__mark img {
  grid-area: 1 / 1;
  height: 32px;
  width: auto;
  transition: opacity 400ms ease;
}

.site-header__mark .mark--ink {
  opacity: 0.88;
}

.site-header__mark .mark--cream {
  opacity: 0;
}

.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);
}

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

/* 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;
}

.site-header.is-over-hero .mark--ink {
  opacity: 0;
}

.site-header.is-over-hero .mark--cream {
  opacity: 0.88;
}

.site-header.is-over-hero .site-nav a,
.site-header.is-over-hero .site-header__place {
  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(--night);
  /* 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 localised veil behind the navigation only — the paintings themselves are
   never darkened, desaturated or recoloured. Without it the nav and the place
   line fall onto pale passages of the right-hand canvas and lose contrast. */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 190px;
  background: linear-gradient(to bottom, rgba(20, 20, 19, 0.42), rgba(20, 20, 19, 0));
  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 {
  /* 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: 116px 40px 96px;
}

.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__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, 1fr);
  gap: 26px;
  align-items: start;
}

.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;
}

.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;
}




/* --- Home load: "gallery lights" -------------------------------------------
   Paper holds a moment, the diptych comes up from black with a slight settle,
   the wordmark last. Pure CSS so it needs no JavaScript and cannot leave the
   page stuck mid-animation; the end state is simply the normal page. Runs on
   the home hero only, and not at all under reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    background: var(--paper);
    pointer-events: none;
    animation: heroVeil 480ms ease 80ms forwards;
  }

  /* The 1.02 settle is gone. The paintings are opaque from the first frame —
     which is what keeps Largest Contentful Paint fast — and now they simply
     sit still while the paper above them clears. */
}

@keyframes heroVeil {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* --- 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: 32px;
}

.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;
}

.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: #efe9e0;
}

.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 ------------------------------------------------------------ */

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

  .site-header__place {
    display: none;
  }

  .site-header__mark img {
    height: 28px;
  }

  .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;
    /* 44px minimum target: an 11px label plus 16px above and below. */
    padding: 16px 6px;
  }

  .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: 90px 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: 26px;
  }

  /* 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: 40px;
  }

  .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;
  }

  /* The phone shows the diptych side by side, as the desktop does. Each panel
     is ~188px wide on a 375px screen and both canvases are whole — the pair
     reads as a pair, which the single-panel art direction lost. */

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

  /* The veil returns, because the header now sits over the paintings. Desktop
     fades 0.42 linearly across 190px of a 1056px hero — 18% of it. The mobile
     hero is 275px, so a proportional band would be 49px and would not even
     reach the bottom of a 67px header. Instead the density is concentrated
     where the text actually is and cleared quickly below it, so the paintings
     are darkened over the header and essentially untouched beneath. */
  .hero::before {
    height: 132px;
    background: linear-gradient(
      to bottom,
      rgba(20, 20, 19, 0.62) 0,
      rgba(20, 20, 19, 0.4) 58px,
      rgba(20, 20, 19, 0) 132px
    );
  }

  /* 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 .mark--cream {
    filter: drop-shadow(0 1px 5px rgba(20, 20, 19, 0.9));
  }

  .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 {
    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;
  }
}

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

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