/* ==========================================================================
   Brenda Perkins — public site

   One stylesheet, no dependencies, no inline styles anywhere (the site's
   Content-Security-Policy forbids them).

    1  Fonts            6  Pictures          11  Contact
    2  Tokens           7  Home              12  Error and empty states
    3  Base             8  Works             13  Full-screen viewer
    4  Type             9  Work              14  Motion
    5  Header, footer  10  About
   ========================================================================== */


/* 1  Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-wght-normal.acc46a2a7785.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-wght-normal.c47ff12887a3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-wght-italic.61d59919981f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-wght-italic.3e2c4175a96d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jost-latin-ext-wght-normal.7f44f6fd229b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jost-latin-wght-normal.928f4210aa48.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jost-latin-ext-wght-italic.d1d5bd94a46f.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/jost-latin-wght-italic.e5cfc05e59bf.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Stand-ins shown for the instant before the real fonts arrive. Each is a
   local face re-proportioned to the web font's measured metrics (average
   advance width, ascent, descent), so text does not reflow on the swap. */

@font-face {
  font-family: "Cormorant Fallback";
  font-style: normal;
  font-weight: 300 700;
  src: local("Times New Roman"), local("TimesNewRomanPSMT");
  size-adjust: 97.3%;
  ascent-override: 94.9%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Cormorant Fallback";
  font-style: italic;
  font-weight: 300 700;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT");
  size-adjust: 87.7%;
  ascent-override: 105.3%;
  descent-override: 32.7%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Jost Fallback";
  font-style: normal;
  font-weight: 100 900;
  src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 96%;
  ascent-override: 111.5%;
  descent-override: 39.1%;
  line-gap-override: 0%;
}


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

:root {
  color-scheme: light;

  --paper: #fcfbf8;
  --ink: #1b1a18;
  --muted: #6e6a63;      /* 5.2:1 on paper: the lightest colour used for text */
  --faint: #a39e95;      /* decoration only (separators, quiet underlines)    */
  --hairline: #e8e4dc;
  --wash: #f3f0e9;       /* where a picture is about to appear                */
  --selection: #e7dfcf;
  --tap: rgba(27, 26, 24, 0.06);

  --serif: "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Jost", "Jost Fallback", "Avenir Next", Avenir, "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --text-label: 0.75rem;
  --text-meta: 0.875rem;
  --text-prose: clamp(1.25rem, 1.19rem + 0.28vw, 1.4rem);
  --text-lede: clamp(1.4rem, 1.26rem + 0.62vw, 1.75rem);
  --text-title: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --text-display: clamp(2.75rem, 1.85rem + 4vw, 5.25rem);
  --text-statement: clamp(2rem, 1.2rem + 3.5vw, 4.25rem);
  --tracking: 0.16em;

  /* The serif's two working weights (see the note on coarse screens below). */
  --weight-text: 400;
  --weight-light: 300;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --content: 90rem;
  --measure: 60ch;
  --header-pad: clamp(1.6rem, 1.2rem + 2vw, 2.75rem);

  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --space-l: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --space-xl: clamp(3.5rem, 2.3rem + 5.2vw, 7rem);
  --space-2xl: clamp(5rem, 3rem + 8.5vw, 11rem);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --quick: 200ms;
  --gentle: 600ms;

  /* How much of the window's height a painting leaves free (see .plate). */
  --plate-offset: 9rem;
}

/* Dark: the same room with the lights down. A warm charcoal rather than
   black, so the paintings sit on a wall and not in a void; the type keeps
   the same hierarchy (ink for reading, muted for labels: 7:1 on this ground).
   Followed automatically when the visitor's device asks for dark, unless
   they have chosen light with the switch in the header; and applied when
   they have chosen dark, whatever the device says. The two blocks below
   must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #161513;
    --ink: #ece8e1;
    --muted: #a7a198;
    --faint: #6c675f;
    --hairline: #2b2926;
    --wash: #1e1d1a;
    --selection: #4a4338;
    --tap: rgba(236, 232, 225, 0.08);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161513;
  --ink: #ece8e1;
  --muted: #a7a198;
  --faint: #6c675f;
  --hairline: #2b2926;
  --wash: #1e1d1a;
  --selection: #4a4338;
  --tap: rgba(236, 232, 225, 0.08);
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Cormorant's hairlines are very fine. On screens without the pixels to
   draw them (most 1x desktop monitors) they turn grey and brittle, so the
   type is given a little more weight there, as a printer would choose a
   sturdier grade for a rougher paper. */
@media (max-resolution: 1.4dppx) {
  :root {
    --weight-text: 440;
    --weight-light: 340;
  }
}


/* 3  Base ----------------------------------------------------------------- */

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--tap);
  scrollbar-gutter: stable;
}

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-prose);
  font-weight: var(--weight-text);
  line-height: 1.5;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
figure,
dl,
dd,
ul,
ol {
  margin: 0;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

ul[role="list"],
ol[role="list"] {
  padding: 0;
  list-style: none;
}

img,
svg,
picture {
  display: block;
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

cite {
  font-style: italic;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--selection);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 0.3rem;
}

main:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 10;
  padding: 0.8rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-label);
  letter-spacing: var(--tracking);
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-250%);
}

.skip-link:focus {
  transform: none;
}

/* The page column: wide gutters, capped at a comfortable reading width. */
.shell {
  inline-size: 100%;
  max-inline-size: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* 4  Type ----------------------------------------------------------------- */

/* Small, tracked, uppercase: navigation, labels, anything that names a thing.
   (Where one is centred or set flush right, a negative margin takes back the
   tracking after its last letter, so that it sits optically true.) */
.brand__tagline,
.site-nav__link,
.tab,
.go,
.section-label,
.prose h2,
.facts dt,
.contact__list dt,
.pager__dir,
.work__position,
.work__zoom-label,
.index__head,
.works-head__count,
.error__status,
.viewer__close {
  font-family: var(--sans);
  font-size: var(--text-label);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--muted);
}

/* Page titles. */
.display {
  font-size: var(--text-display);
  font-weight: var(--weight-light);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* A sentence or two of introduction under a page title. */
.lede {
  max-inline-size: 34em;
  font-size: var(--text-lede);
  font-weight: var(--weight-light);
  line-height: 1.36;
  text-wrap: pretty;
}

.lede > * + * {
  margin-block-start: 0.7em;
}

/* Long-form text written by the artist (see gallery/richtext.py for the
   handful of elements it can contain). */
.prose {
  max-inline-size: var(--measure);
  font-size: var(--text-prose);
  line-height: 1.5;
  text-wrap: pretty;
  hanging-punctuation: first;
}

.prose > * + * {
  margin-block-start: 0.9em;
}

.prose h2 {
  margin-block-start: 3.4rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--hairline);
}

.prose h3 {
  margin-block-start: 2.2rem;
  font-size: 1.12em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
}

.prose > :first-child {
  margin-block-start: 0;
}

.prose h2 + *,
.prose h3 + * {
  margin-block-start: 0.7rem;
}

/* Lists read as catalogue entries: one ruled line each, no bullets. */
.prose ul {
  padding: 0;
  list-style: none;
}

.prose li {
  padding-block: 0.55em;
  border-block-start: 1px solid var(--hairline);
  line-height: 1.35;
}

.prose h2 + ul > li:first-child {
  border-block-start: 0;
  padding-block-start: 0.2em;
}

.prose strong,
.lede strong,
.statement strong {
  font-weight: 600;
}

.prose a,
.lede a,
.statement a,
.link {
  text-decoration-line: underline;
  text-decoration-color: var(--faint);
  transition: text-decoration-color var(--quick) var(--ease);
}

.prose a:hover,
.lede a:hover,
.statement a:hover,
.link:hover {
  text-decoration-color: currentColor;
}

/* A small uppercase link that leads somewhere, with a drawn arrow. */
.go {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-block-size: 2.75rem;
  text-decoration: none;
  color: var(--ink);
}

.go__text {
  padding-block-end: 0.3rem;
  border-block-end: 1px solid var(--faint);
  transition: border-color var(--quick) var(--ease);
}

.go:hover .go__text {
  border-block-end-color: currentColor;
}

.arrow {
  flex: none;
  inline-size: 1.75rem;
  block-size: auto;
  overflow: visible;
  transition: transform var(--quick) var(--ease);
}

.arrow--back {
  transform: scaleX(-1);
}

a:hover > .arrow,
a:hover > * > .arrow {
  transform: translateX(0.3rem);
}

a:hover > .arrow--back,
a:hover > * > .arrow--back {
  transform: scaleX(-1) translateX(0.3rem);
}


/* 5  Header, footer ------------------------------------------------------- */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.15rem;
  padding-block: var(--header-pad) 0;
  text-align: center;
}

.brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.9rem;
  padding-block: 0.45rem;
  text-decoration: none;
}

.brand__name {
  font-size: clamp(1.7rem, 1.58rem + 0.5vw, 1.95rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.005em;
}

.brand__tagline {
  margin-inline-end: calc(var(--tracking) * -1);
}

.site-nav__list {
  display: flex;
  justify-content: center;
  column-gap: clamp(1.9rem, 7vw, 2.9rem);
  margin: 0;
}

/* Navigation links and the grid / index switch share one quiet behaviour:
   muted until current or hovered, with a hairline that draws in beneath. */
.tab,
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  margin-inline-end: calc(var(--tracking) * -1);
  text-decoration: none;
  transition: color var(--quick) var(--ease);
}

/* A border rather than a background, so the mark survives forced colours. */
.tab::after,
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0 var(--tracking);
  inset-block-end: 0.62rem;
  border-block-end: 1px solid currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 320ms var(--ease);
}

.tab:hover,
.tab[aria-current],
.site-nav__link:hover,
.site-nav__link[aria-current] {
  color: var(--ink);
}

.tab:hover::after,
.tab[aria-current]::after,
.site-nav__link:hover::after,
.site-nav__link[aria-current]::after {
  transform: none;
}

/* The light / dark switch: a half-filled disc at the end of the navigation,
   as quiet as the links beside it. It turns over when the dark theme is on. */
.site-nav__list {
  align-items: center;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  margin-inline: -0.8125rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--quick) var(--ease);
}

.theme-toggle:hover {
  color: var(--ink);
}

.theme-toggle:focus-visible {
  outline-offset: -0.5rem;
}

.theme-toggle__icon {
  display: block;
  transition: transform 420ms var(--ease);
}

.theme-toggle[aria-pressed="true"] .theme-toggle__icon {
  transform: rotate(180deg);
}

@media (min-width: 44rem) {
  .site-header {
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 2rem;
    text-align: start;
  }

  .brand {
    justify-content: flex-start;
  }
}

.site-main {
  flex: 1 0 auto;
  padding-block: var(--space-l) var(--space-2xl);
}

.site-footer__inner {
  display: grid;
  gap: 1.1rem 2.5rem;
  padding-block: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  border-block-start: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.site-footer__legal {
  max-inline-size: 44em;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.75rem;
  margin: 0;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  transition: color var(--quick) var(--ease), text-decoration-color var(--quick) var(--ease);
}

.site-footer__links a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

@media (min-width: 44rem) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .site-footer__links {
    justify-content: flex-end;
    margin-block-start: -0.7rem;
  }
}


/* 6  Pictures ------------------------------------------------------------- */

/* A plate shows one painting as large as its space allows without ever
   cropping it. The empty <svg> carries the painting's pixel dimensions, so
   the browser can work out the fitted size (limited by the column's width
   and by the window's height) before a single byte of the image has
   arrived; the image then fills that box exactly. */
.plate {
  position: relative;
  display: block;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  max-inline-size: 100%;
  background: var(--wash);
}

.plate__sizer {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: max(20rem, calc(100vh - var(--plate-offset)));
}

@supports (block-size: 100svh) {
  .plate__sizer {
    max-block-size: max(20rem, calc(100svh - var(--plate-offset)));
  }
}

.plate picture {
  position: absolute;
  inset: 0;
}

.plate__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* Pictures settle in softly once they have loaded. The class is only ever
   added by the script, so without it nothing is hidden. */
picture > img {
  transition: opacity var(--gentle) var(--ease);
}

picture > img.is-pending {
  opacity: 0;
}


/* 7  Home ----------------------------------------------------------------- */

.statement {
  padding-block: clamp(0.5rem, 4vw, 4rem) var(--space-xl);
}

.statement__text {
  max-inline-size: 17.5em;
  font-size: var(--text-statement);
  font-weight: var(--weight-light);
  line-height: 1.12;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.statement__text > * + * {
  margin-block-start: 0.55em;
}

/* A longer introduction steps down in size rather than shouting. */
.statement--medium .statement__text {
  max-inline-size: 24em;
  font-size: clamp(1.7rem, 1.25rem + 2vw, 3rem);
  line-height: 1.18;
}

.statement--long .statement__text {
  max-inline-size: 34em;
  font-size: var(--text-lede);
  line-height: 1.36;
  letter-spacing: 0;
  text-wrap: pretty;
}

.hero {
  display: block;
  text-decoration: none;
}

.hero__caption {
  display: grid;
  gap: 0.2rem;
  margin-block-start: 1rem;
}

.hero__title,
.tile__title {
  font-size: 1.4rem;
  font-style: italic;
  font-weight: var(--weight-text);
  line-height: 1.2;
  text-wrap: balance;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--quick) var(--ease);
}

.hero:hover .hero__title,
.tile:hover .tile__title {
  text-decoration-color: var(--ink);
}

.hero__meta,
.tile__meta {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* On a wide page the first painting hangs to the right with its label
   beside it, as it would on a wall. */
@media (min-width: 64rem) {
  .hero__figure {
    display: grid;
    grid-template-columns: minmax(11rem, 1fr) minmax(0, auto);
    column-gap: clamp(2rem, 3vw, 3.25rem);
    align-items: end;
  }

  .hero__plate {
    grid-area: 1 / 2;
    justify-self: end;
    min-inline-size: 0;
  }

  .hero__caption {
    grid-area: 1 / 1;
    justify-items: end;
    margin-block: 0 -0.35rem;
    text-align: end;
  }
}

/* The opening. The first painting is always whole in the first screen: its
   height is limited to the window's, less everything else that shares that
   screen (--plate-offset: the header, the space under it, the painting's
   label and a little air above the fold).

   On a narrow page the painting leads and the introduction follows it. On a
   wide page they sit side by side: the words at the top left, the painting
   hung to the right as large as the window allows, its label at its foot. */
.opening {
  --plate-offset: calc(var(--header-pad) + 5.75rem + var(--space-l) + 6.5rem);
  display: flex;
  flex-direction: column;
}

.opening > .statement {
  order: 1;
  padding-block: var(--space-l) 0;
}

/* In a short window the opening painting is allowed to get smaller than
   other plates would, so that it is still whole. */
.opening .plate__sizer {
  max-block-size: max(12rem, calc(100vh - var(--plate-offset)));
}

@supports (block-size: 100svh) {
  .opening .plate__sizer {
    max-block-size: max(12rem, calc(100svh - var(--plate-offset)));
  }
}

@media (min-width: 44rem) {
  .opening {
    --plate-offset: calc(var(--header-pad) + 2.85rem + var(--space-l) + 6.5rem);
  }
}

@media (min-width: 64rem) {
  @supports (grid-template-columns: subgrid) {
    .opening {
      --plate-offset: calc(var(--header-pad) + 2.85rem + var(--space-l) + 2.75rem);
      display: grid;
      grid-template-columns: minmax(15rem, 1fr) minmax(0, auto);
      grid-template-rows: 1fr auto;
      column-gap: clamp(2rem, 3.5vw, 4rem);
    }

    .opening > .statement {
      position: relative;
      z-index: 1;
      grid-area: 1 / 1;
      align-self: start;
      order: 0;
      padding-block: 0 var(--space-m);
    }

    .opening .statement__text {
      max-inline-size: none;
      font-size: clamp(2rem, 0.75rem + 2.15vw, 3.25rem);
      line-height: 1.14;
    }

    .opening .statement--medium .statement__text {
      font-size: clamp(1.5rem, 0.95rem + 1vw, 2.1rem);
      line-height: 1.24;
    }

    .opening .statement--long .statement__text {
      font-size: clamp(1.25rem, 1.05rem + 0.4vw, 1.5rem);
      line-height: 1.4;
    }

    /* The link and its figure lie over the whole composition and share its
       columns and rows, so the label can sit in the left column under the
       words while the painting takes the right. Only the painting and the
       label themselves respond to the pointer; the words stay selectable. */
    .opening > .hero,
    .opening .hero__figure {
      display: grid;
      grid-area: 1 / 1 / -1 / -1;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      align-items: initial;
    }

    .opening > .hero {
      pointer-events: none;
    }

    .opening .hero__plate,
    .opening .hero__caption {
      pointer-events: auto;
    }

    .opening .hero__plate {
      grid-area: 1 / 2 / -1 / -1;
      align-self: start;
      justify-self: end;
      min-inline-size: 0;
    }

    .opening .hero__caption {
      grid-area: 2 / 1;
      align-self: end;
      justify-items: end;
      margin-block: 0 -0.35rem;
      text-align: end;
    }

    /* The words keep to a comfortable block however wide their column is. */
    .opening .statement__text {
      max-inline-size: 15em;
    }

    /* With no introduction there is nothing to stand beside the painting, so
       it hangs in the middle of the wall, as large as the window allows,
       with its label just off its lower left corner. (A wide painting simply
       takes the width it needs and the outer column closes up.) */
    .opening--plain {
      grid-template-columns: minmax(9rem, 1fr) minmax(0, auto) minmax(0, 1fr);
    }

    .opening--plain .hero__plate {
      grid-area: 1 / 2 / -1 / 3;
      justify-self: center;
    }
  }
}

.selected {
  margin-block-start: var(--space-2xl);
}

.section-label {
  display: flex;
  align-items: center;
  column-gap: 1.5rem;
  margin-block-end: var(--space-l);
}

.section-label::after {
  content: "";
  flex: 1;
  border-block-end: 1px solid var(--hairline);
}

.more {
  margin-block-start: var(--space-xl);
  border-block: 1px solid var(--hairline);
}

.more__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  padding-block: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 3rem);
  font-weight: var(--weight-light);
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-decoration: none;
}

.more__count {
  margin-inline-start: 0.35em;
  font-family: var(--sans);
  font-size: 0.34em;
  font-weight: 400;
  letter-spacing: 0.08em;
  vertical-align: 0.95em;
  color: var(--muted);
}

.more__link .arrow {
  inline-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}


/* 8  Works ---------------------------------------------------------------- */

.works-head {
  display: grid;
  gap: var(--space-m) var(--space-l);
  align-items: end;
  padding-block-end: var(--space-xl);
}

.works-head__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 2.5rem;
}

.switch {
  display: flex;
  align-items: center;
  column-gap: 0.95rem;
  margin: 0;
}

.switch__sep {
  font-family: var(--sans);
  font-size: var(--text-label);
  color: var(--faint);
}

@media (min-width: 52rem) {
  .works-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .works-head > * {
    grid-column: 1;
  }

  /* The tools share a baseline with the last line beside them: the
     introduction's, or failing that the title's. */
  .works-head__tools {
    grid-area: 1 / 2 / span 2;
    justify-content: flex-end;
    margin-block-end: calc(var(--text-lede) * 0.3615 - 1.11rem);
  }

  .works-head--plain .works-head__tools {
    margin-block-end: calc(var(--text-display) * 0.1815 - 1.11rem);
  }

  .works-head__count {
    order: -1;
  }
}

/* The wall: paintings in equal bays, never cropped, bottoms level along
   each row and labels level beneath them. */
.wall {
  --wall-columns: 1;
  --wall-gap-inline: clamp(1.5rem, 5vw, 5rem);
  --wall-gap-block: clamp(3.25rem, 2.3rem + 4.5vw, 6.5rem);
  display: grid;
  grid-template-columns: repeat(var(--wall-columns), minmax(0, 1fr));
  gap: var(--wall-gap-block) var(--wall-gap-inline);
  align-items: end;
  margin: 0;
}

.tile {
  display: block;
  text-decoration: none;
}

/* Keyboard focus is drawn around the painting itself (the link's own box
   takes in the whole bay, empty wall included) and under its title. */
.tile:focus-visible,
.hero:focus-visible {
  outline: none;
}

.tile:focus-visible picture,
.hero:focus-visible .plate {
  outline: 2px solid var(--ink);
  outline-offset: 0.35rem;
}

.tile:focus-visible .tile__title,
.hero:focus-visible .hero__title {
  text-decoration-color: var(--ink);
}

.tile__frame {
  display: block;
  container-type: inline-size;
}

.tile picture {
  background: var(--wash);
}

.tile__img {
  inline-size: 100%;
}

.tile__label {
  display: block;
  padding-block-start: 1rem;
}

.tile__title {
  display: block;
}

.tile__meta {
  margin-block-start: 0.2rem;
}

/* With subgrid every tile shares its row's two tracks (picture, label), so
   picture bottoms and label tops line up whatever the heights involved. */
@supports (grid-template-rows: subgrid) {
  .wall {
    row-gap: 0;
    align-items: stretch;
    margin-block-end: calc(var(--wall-gap-block) * -1);
  }

  .wall__item,
  .tile {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0;
  }

  .wall__item {
    margin-block-end: var(--wall-gap-block);
  }

  .tile__frame {
    align-self: end;
  }

  .tile__label {
    align-self: start;
  }
}

@media (min-width: 36rem) {
  .wall {
    --wall-columns: 2;
  }

  /* An upright painting is given the height of a square bay rather than its
     full width, so that it does not tower over its neighbours. */
  .tile--portrait picture {
    inline-size: 75%;
  }

  @supports (block-size: 1cqi) {
    .tile--portrait picture {
      inline-size: -moz-fit-content;
      inline-size: fit-content;
    }

    .tile--portrait .tile__img {
      inline-size: auto;
      block-size: 100cqi;
    }
  }
}

@media (min-width: 64rem) {
  .wall {
    --wall-columns: 3;
  }

  /* The home page's selection is composed to suit however many works it
     holds: two, three, four (2 x 2), five (2 + 3) or six (3 + 3). */
  .wall--selected {
    --wall-columns: 6;
  }

  .wall--selected > .wall__item {
    grid-column: span 2;
  }

  .wall--selected > .wall__item:only-child,
  .wall--selected > .wall__item:first-child:nth-last-child(2),
  .wall--selected > .wall__item:first-child:nth-last-child(2) ~ .wall__item,
  .wall--selected > .wall__item:first-child:nth-last-child(4),
  .wall--selected > .wall__item:first-child:nth-last-child(4) ~ .wall__item,
  .wall--selected > .wall__item:first-child:nth-last-child(5),
  .wall--selected > .wall__item:first-child:nth-last-child(5) + .wall__item {
    grid-column: span 3;
  }
}

/* The index: the same works as a typographic table of contents. */
.index {
  margin: 0;
  border-block-start: 1px solid var(--hairline);
}

.index__head {
  display: none;
}

.index__item {
  border-block-end: 1px solid var(--hairline);
  transition: border-color var(--quick) var(--ease);
}

.index__link {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: 1.05rem 1.15rem;
  text-decoration: none;
}

.index__num {
  font-family: var(--sans);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.index__title {
  font-size: clamp(1.4rem, 1.3rem + 0.45vw, 1.65rem);
  line-height: 1.2;
  text-wrap: balance;
}

.index__meta {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  margin-block-start: 0.3rem;
  font-family: var(--sans);
  font-size: var(--text-meta);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color var(--quick) var(--ease);
}

.index__year + .index__medium::before {
  content: "\00B7";
  margin-inline: 0.5em;
  color: var(--faint);
}

.index__location {
  flex-basis: 100%;
}

.index__year {
  font-variant-numeric: tabular-nums;
}

.index__thumb {
  display: none;
}

.index__item:hover {
  border-block-end-color: var(--ink);
}

.index__link:hover .index__meta {
  color: var(--ink);
}

@media (min-width: 52rem) {
  .index__head,
  .index__link {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 2.3fr) 4.5rem minmax(0, 1.6fr) minmax(0, 1.7fr);
    column-gap: clamp(1rem, 2vw, 2rem);
  }

  .index__head {
    padding-block-end: 0.9rem;
  }

  .index__link {
    padding-block: 1.2rem 1.3rem;
  }

  .index__meta {
    display: contents;
  }

  .index__year + .index__medium::before {
    content: none;
  }

  .index__year {
    grid-column: 3;
  }

  .index__medium {
    grid-column: 4;
  }

  .index__location {
    grid-column: 5;
  }
}

/* Where there is a mouse and room for it, the painting itself appears in
   the margin beside the row being pointed at. */
@media (min-width: 75rem) and (hover: hover) and (pointer: fine) {
  .index__head,
  .index__link {
    grid-template-columns: 3.75rem minmax(0, 2.3fr) 4.5rem minmax(0, 1.6fr) minmax(0, 1.7fr) 13rem;
  }

  .index__thumb {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    z-index: 1;
    display: block;
    inline-size: 12rem;
    block-size: 9.5rem;
    object-fit: contain;
    object-position: 100% 50%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 260ms var(--ease);
  }

  .index__link:hover .index__thumb,
  .index__link:focus-visible .index__thumb {
    opacity: 1;
  }
}


/* 9  Work ----------------------------------------------------------------- */

/* A painting and its particulars. Three arrangements, chosen to suit the
   painting's shape: beneath it (small screens, and always for panoramas,
   which want the full width), or beside it once the window is wide enough
   for the painting to stay large: sooner for upright and square works,
   later for landscapes. */
.work {
  --plate-offset: calc(var(--header-pad) + var(--space-l) + 6.5rem);
  display: grid;
  grid-template-columns: var(--work-columns, minmax(0, 1fr));
  gap: var(--space-l) clamp(3rem, 6vw, 6rem);
  align-items: start;
}

.work__stage,
.work__details {
  position: var(--work-position, static);
  inset-block-start: clamp(1.5rem, 4vh, 2.75rem);
}

.work__zoom {
  display: block;
  inline-size: -moz-fit-content;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin-inline: auto;
  text-decoration: none;
  cursor: zoom-in;
}

.work__zoom-label {
  display: block;
  margin-block-start: 0.7rem;
  margin-inline-end: calc(var(--tracking) * -1);
  text-align: end;
  transition: color var(--quick) var(--ease);
}

.work__zoom:hover .work__zoom-label {
  color: var(--ink);
}

.work__details {
  display: grid;
  grid-template-columns: var(--work-details-columns, minmax(0, 1fr));
  gap: var(--space-m) clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

.work__position {
  margin-block-end: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.work__title {
  font-size: var(--text-title);
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* A long title steps down a size, and a very long one two. */
.work__title--long {
  font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.7rem);
  line-height: 1.1;
}

.work__title--longer {
  font-size: clamp(1.6rem, 1.4rem + 0.9vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.006em;
}

.facts {
  margin-block-start: var(--space-m);
  border-block-start: 1px solid var(--hairline);
}

.facts__row {
  display: grid;
  grid-template-columns: 7.25rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
  padding-block: 0.7rem 0.75rem;
  border-block-end: 1px solid var(--hairline);
}

.facts dd {
  font-size: 1.2rem;
  line-height: 1.3;
}

.work__story {
  font-size: clamp(1.2rem, 1.16rem + 0.2vw, 1.3rem);
}

.work__story + .work__enquire {
  margin-block-start: var(--space-m);
}

/* Beneath the painting: the facts to the left, the story to the right. */
@media (min-width: 48rem) {
  .work {
    --work-details-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* Beside the painting. Whichever column is the shorter then stays in view
   while the other scrolls: the painting beside a long story, or the
   details beside a tall painting. */
@media (min-width: 60rem) {
  .work--portrait,
  .work--square {
    --work-columns: minmax(0, 1fr) clamp(19rem, 30%, 27rem);
    --work-details-columns: minmax(0, 1fr);
    --work-position: sticky;
  }
}

@media (min-width: 72rem) {
  .work--landscape:not(.work--wide) {
    --work-columns: minmax(0, 1fr) clamp(19rem, 30%, 27rem);
    --work-details-columns: minmax(0, 1fr);
    --work-position: sticky;
  }
}

.pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-m) var(--space-m);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--hairline);
}

.pager__link {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.45rem;
  text-decoration: none;
}

.pager__link--next {
  grid-column: 2;
  justify-items: end;
  text-align: end;
}

.pager__dir {
  display: inline-flex;
  align-items: center;
  column-gap: 0.75rem;
  transition: color var(--quick) var(--ease);
}

.pager__link:hover .pager__dir {
  color: var(--ink);
}

.pager__title {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
  line-height: 1.15;
  text-wrap: balance;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--quick) var(--ease);
}

.pager__link:hover .pager__title {
  text-decoration-color: var(--ink);
}

.pager__all {
  grid-area: 2 / 1 / auto / -1;
  justify-self: center;
}

@media (min-width: 48rem) {
  .pager {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: var(--space-l);
  }

  .pager__link--next {
    grid-column: 3;
  }

  .pager__all {
    grid-area: 1 / 2;
    margin-block-start: -0.75rem;
  }
}


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

.about,
.contact {
  display: grid;
  gap: var(--space-l);
}

.about__portrait {
  max-inline-size: 26rem;
  margin-block-start: var(--space-l);
}

.about__portrait picture {
  background: var(--wash);
}

.about__portrait img {
  inline-size: 100%;
}

@media (min-width: 60rem) {
  .about,
  .contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
  }

  .about__aside {
    position: sticky;
    inset-block-start: clamp(1.5rem, 4vh, 2.75rem);
  }

  .about__portrait {
    max-inline-size: none;
  }

  /* The first line of text sits on the page title's baseline: the offset
     is the difference between where each font size puts its baseline. */
  .about__body {
    padding-block-start: calc(var(--text-display) * 0.8185 - var(--text-prose) * 1.0685);
  }

  .contact__body {
    padding-block-start: calc(var(--text-display) * 0.8185 - var(--text-lede) * 0.9985);
  }
}


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

.contact__list {
  display: grid;
  gap: var(--space-m) var(--space-l);
  margin-block-start: var(--space-l);
}

.contact__list:first-child {
  margin-block-start: 0;
}

.contact__intro + .contact__list {
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--hairline);
}

.contact__list dt {
  margin-block-end: 0.35rem;
}

.contact__list dd {
  font-size: var(--text-lede);
  line-height: 1.3;
}

.contact__item--email dd {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  font-weight: var(--weight-light);
  line-height: 1.12;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}

.contact__item--email a {
  text-underline-offset: 0.16em;
}

.contact__item--long dd {
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem);
  line-height: 1.2;
}

@media (min-width: 36rem) {
  .contact__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact__item--email {
    grid-column: 1 / -1;
  }
}


/* 12  Error and empty states ---------------------------------------------- */

.error {
  display: grid;
  gap: var(--space-m);
  justify-items: start;
  padding-block: clamp(0rem, 4vw, 4rem) var(--space-l);
}

.error__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2.25rem;
  margin-block-start: var(--space-s);
}

/* Nothing published yet: an empty stretch of wall and its label, hung
   exactly where the first painting will go. */
.empty .plate {
  max-inline-size: min(100%, 36rem);
}

@media (min-width: 64rem) {
  /* A plain length here, so the grid can size the plate's column from it. */
  .empty .plate {
    max-inline-size: 36rem;
  }
}

.empty__note {
  max-inline-size: 16em;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--muted);
}


/* 13  Full-screen viewer -------------------------------------------------- */

html:has(.viewer[open]) {
  overflow: hidden;
}

.viewer {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  cursor: zoom-out;
}

.viewer::backdrop {
  background: var(--paper);
}

.viewer__figure {
  position: absolute;
  inset: clamp(3.5rem, 6vh, 4.5rem) clamp(0.75rem, 3vw, 3rem) clamp(0.75rem, 6vh, 4.5rem);
}

.viewer__img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: contain;
}

.viewer__close {
  position: absolute;
  inset-block-start: clamp(0.4rem, 1.5vh, 1rem);
  inset-inline-end: clamp(0.75rem, 3vw, 3rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color var(--quick) var(--ease);
}

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


/* 14  Motion -------------------------------------------------------------- */

/* A gentle cross-fade from page to page, where the browser supports it. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@supports (transition-behavior: allow-discrete) {
  .viewer {
    opacity: 0;
    transition: opacity 320ms var(--ease), display 320ms allow-discrete, overlay 320ms allow-discrete;
  }

  .viewer[open] {
    opacity: 1;
  }

  @starting-style {
    .viewer[open] {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}