/*
Theme Name: SV Gallery
Theme URI: https://www.myanmarwebdesign.com
Author: Myanmar Web Design
Description: An editorial WordPress theme for contemporary art galleries, artists, artworks, exhibitions, and articles.
Version: 1.6.13
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: still-point
Tags: art, gallery, portfolio, custom-post-types, translation-ready, accessibility-ready
*/

/* Self-hosted Futura — no external requests. Three static weights;
   the browser snaps intermediate weight values to the nearest face. */
@font-face {
  font-family: "Futura";
  src: url("assets/fonts/futura-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("assets/fonts/futura-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("assets/fonts/futura-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Gallery-wall neutrals warmed a degree, with one signal color:
     deep Burmese lacquer red, reserved for wayfinding labels,
     live/on-view states, and emphasis. */
  --ink: #1b1712;
  --paper: #F2F0EF;
  --paper-deep: #F2F0EF;
  --white: #ffffff;
  --accent: #F38D11;
  --line: rgba(27, 23, 18, 0.16);
  --muted: #6b655a;
  /* Single-typeface system: Futura throughout. --display and --serif are
     kept as aliases so per-element sizing/weight rules continue to work.
     Century Gothic / Avenir are near-Futura geometric-sans fallbacks. */
  --display: "Futura", "Century Gothic", "Avenir", "Helvetica Neue", sans-serif;
  --serif: "Futura", "Century Gothic", "Avenir", "Helvetica Neue", sans-serif;
  --sans: "Futura", "Century Gothic", "Avenir", "Helvetica Neue", sans-serif;
  --space: clamp(1.25rem, 3vw, 3rem);
  --page: min(1440px, calc(100% - (var(--space) * 2)));
}

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

html {
  scroll-behavior: smooth;
  /* The header backdrop spans 100vw, which overshoots by the scrollbar
     width on desktop; clip instead of allowing a sideways scroll. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--accent);
}

::selection {
  background: var(--accent);
  color: var(--white);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  clip: auto;
  overflow: visible;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}

.site-shell {
  width: var(--page);
  margin-inline: auto;
}

.site-header {
  --header-stick-offset: calc(1.2rem + clamp(2rem, 4.5vw, 3.25rem) + clamp(0.75rem, 1.5vw, 1.25rem));
  position: sticky;
  top: calc(-1 * var(--header-stick-offset));
  z-index: 20;
  width: var(--page);
  margin-inline: auto;
  padding: 1.2rem 0;
}

.site-header::after {
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  content: "";
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.site-brand {
  flex: 1 1 auto;
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: none;
}

.site-brand span {
  display: block;
}

.header-bar {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.25rem;
}

.site-logo {
  flex: 1 1 auto;
  line-height: 0;
}

.site-logo .custom-logo-link {
  display: inline-block;
}

.site-logo img {
  width: auto;
  max-height: 65px;
}

.main-nav ul {
  display: flex;
  gap: 1.8rem;
  /* Baseline (not center) so the "Artists" item — an inline-flex whose link
     gains box padding — sits on the same text baseline as the plain items. */
  align-items: baseline;
  padding: 0;
  margin: 0;
  list-style: none;
}

.main-nav a,
.search-toggle,
.header-bids-link {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.main-nav a {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  border-bottom-color: currentColor;
}

.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current_page_item > a,
.main-nav .current_page_parent > a,
.main-nav a[aria-current="page"] {
  color: var(--accent);
  /* Set style explicitly: the mobile menu resets border-bottom to 0 (style:none),
     so width/color alone would not render the underline there. */
  border-bottom: 3px solid currentColor;
}

/* Dropdown submenus (e.g. Artists → Our Artists / Emerging Artists). */
.main-nav li {
  position: relative;
}

.main-nav .menu-item-has-children {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}

.submenu-chevron {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform 150ms ease;
}

.submenu-toggle[aria-expanded="true"] .submenu-chevron {
  transform: rotate(180deg);
}

.submenu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The footer "Explore" list reuses this menu as its fallback; the disclosure
   toggle is a header-nav interaction, so hide it there (the sub-items simply
   show as a plain nested list). */
.footer-column .submenu-toggle {
  display: none;
}

.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 13rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px rgba(27, 23, 18, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
}

.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children.is-expanded > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav .sub-menu li {
  margin: 0;
}

.main-nav .sub-menu a {
  display: block;
  padding: 0.55rem 1.3rem;
  border-bottom: 0;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus-visible {
  color: var(--accent);
  border-bottom: 0;
}

/* Keep the listing-page titles (e.g. "Emerging Artists") on one line — the
   base .page-title caps width at 11ch, which would wrap the two-word titles. */
.artist-listing-page .page-title {
  max-width: none;
}

/* Intro copy on the Our Artists / Emerging Artists listing pages. */
.artist-listing-intro {
  max-width: 62ch;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.artist-listing-intro p {
  margin: 0 0 1rem;
}

.header-bids-link {
  margin-left: auto;
}

.header-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.header-icon-link + .header-icon-link {
  margin-left: 0.6rem;
}

.header-icon-link:hover,
.header-icon-link:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.auth-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.search-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

.search-toggle:hover,
.search-toggle:focus-visible {
  color: var(--accent);
}

.header-search {
  border-top: 1px solid var(--line);
  margin-top: 1.2rem;
  padding-top: 1.2rem;
}

.header-search[hidden] {
  display: none;
}

.header-search-form {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.header-search-form input[type="search"] {
  flex: 1;
  padding: 0.65rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}

.header-search-form input[type="search"]:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.header-search-form button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.header-search-form button:hover,
.header-search-form button:focus-visible {
  color: var(--accent);
}

.menu-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero {
  /* Lift the accent on the dark hero so the eyebrow, "here." emphasis,
     and link hover stay legible over photographic backgrounds. */
  --accent: #e8c9b8;
  position: relative;
  display: flex;
  min-height: min(55vh, 560px);
  margin-bottom: clamp(4rem, 3vw, 8rem);
  padding: clamp(1.75rem, 3.5vw, 3rem) 0;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img,
.hero-media .art-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(15, 15, 15, 0.88) 0%,
    rgba(15, 15, 15, 0.4) 45%,
    rgba(15, 15, 15, 0.12) 100%
  );
  content: "";
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  width: var(--page);
  margin-inline: auto;
}

.hero-top {
  display: flex;
  justify-content: flex-end;
}

.hero-current {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  text-align: right;
}

/* Over the dark hero photo the badge reads as a white wall label. */
.hero-current .exhibition-badge--present {
  border-color: var(--paper);
  background: var(--paper);
  color: #8c2f24;
}

.hero-current-title {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
}

.hero-current-dates {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.hero-content {
  max-width: 42rem;
}

.hero-content .eyebrow {
  color: var(--white);
  opacity: 0.85;
}

.eyebrow,
.section-kicker,
.meta-label {
  margin: 0 0 1.25rem;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero h1,
.page-title,
.single-title {
  max-width: 11ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.92;
}

.single-post .single-title,
.single-artist .single-title,
.single-artwork .single-title,
.single-exhibition .single-title,
.about-page .single-title,
.contact-page .single-title {
  max-width: 18ch;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  letter-spacing: -0.015em;
  line-height: 1;
}

.hero h1 em {
  color: var(--accent);
  font-weight: 400;
}

.hero h1 {
  margin-bottom: 1.5rem;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 2rem;
}

.hero-intro {
  max-width: 34rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.3;
}

/* Homepage hero slider — manual only (arrows / dots / swipe), no autoplay.
   Reuses .hero for the frame + content type; slides fade on navigation. */
.hero-slider {
  padding: 0;
}

/* The single-hero gradient lives on .hero::after; each slide brings its own. */
.hero-slider::after {
  content: none;
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(1.75rem, 3.5vw, 3rem) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(15, 15, 15, 0.88) 0%,
    rgba(15, 15, 15, 0.4) 45%,
    rgba(15, 15, 15, 0.12) 100%
  );
  content: "";
}

.hero-slide .hero-inner {
  justify-content: flex-end;
}

.hero-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(15, 15, 15, 0.35);
  color: var(--white);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}

.hero-nav:hover,
.hero-nav:focus-visible {
  background: rgba(15, 15, 15, 0.7);
  border-color: var(--white);
}

.hero-prev {
  left: clamp(0.75rem, 2vw, 1.5rem);
}

.hero-next {
  right: clamp(0.75rem, 2vw, 1.5rem);
}

.hero-dots {
  position: absolute;
  bottom: clamp(1rem, 2vw, 1.75rem);
  left: 50%;
  z-index: 4;
  display: flex;
  gap: 0.6rem;
  transform: translateX(-50%);
}

.hero-dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 150ms ease;
}

.hero-dot[aria-current="true"] {
  background: var(--white);
}

.hero-dot:focus-visible,
.hero-nav:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

.text-link,
.arrow-link {
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  width: fit-content;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.art-placeholder {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background:
    linear-gradient(118deg, transparent 0 38%, rgba(121, 121, 121, 0.92) 39% 58%, transparent 59%),
    radial-gradient(circle at 24% 32%, #e5e5e5 0 12%, transparent 13%),
    linear-gradient(28deg, #313131 0 35%, #afafaf 36% 62%, #343434 63%);
}

.art-placeholder::after {
  position: absolute;
  inset: 14% 9%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  content: "";
  transform: rotate(-3deg);
}

.art-placeholder.palette-2 {
  background:
    radial-gradient(ellipse at 65% 30%, rgba(238, 238, 238, 0.95) 0 17%, transparent 18%),
    linear-gradient(145deg, transparent 0 45%, #575757 46% 69%, transparent 70%),
    linear-gradient(32deg, #232323, #757575 52%, #a8a8a8);
}

.art-placeholder.palette-3 {
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(32, 32, 32, 0.9) 23% 43%, transparent 44%),
    radial-gradient(circle at 70% 72%, #757575 0 14%, transparent 15%),
    linear-gradient(150deg, #cdcdcd, #888888 48%, #b6b6b6);
}

.art-placeholder.palette-4 {
  background:
    radial-gradient(circle at 34% 38%, #191919 0 9%, transparent 10%),
    radial-gradient(circle at 58% 56%, #808080 0 19%, transparent 20%),
    linear-gradient(120deg, #bfbfbf, #e7e7e7 50%, #6a6a6a);
}

.section {
  padding: clamp(3rem, 3vw, 6rem) 0;
  border-top: 1px solid var(--line);
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}

.section-heading h2,
.statement h2,
.newsletter h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6.5vw, 6.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.section-heading h2 {
  max-width: none;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  letter-spacing: -0.01em;
  line-height: 1.02;
  white-space: nowrap;
}

.section-heading .arrow-link {
  justify-self: end;
}

.home-exhibitions {
  overflow: hidden;
}

.exhibition-carousel-header {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}

.exhibition-carousel-header h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.exhibition-carousel-actions {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.exhibition-carousel-actions > a {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.exhibition-carousel-controls {
  display: flex;
  gap: 0.65rem;
}

.exhibition-carousel-controls button {
  display: grid;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  place-items: center;
}

.exhibition-carousel-controls button:hover,
.exhibition-carousel-controls button:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.exhibition-carousel-controls button:disabled {
  border-color: var(--line);
  color: var(--muted);
  cursor: default;
  opacity: 0.45;
}

.exhibition-carousel-controls button:disabled:hover {
  background: transparent;
  color: var(--muted);
}

.exhibition-carousel {
  display: grid;
  grid-auto-columns: calc((100% - (var(--space) * 2)) / 3);
  grid-auto-flow: column;
  gap: var(--space);
  overflow-x: auto;
  padding-bottom: 1rem;
  outline: 0;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.exhibition-carousel::-webkit-scrollbar {
  display: none;
}

.exhibition-carousel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0.5rem;
}

.exhibition-carousel-card {
  min-width: 0;
  scroll-snap-align: start;
}

.exhibition-carousel-card figure {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.2rem;
  aspect-ratio: 1 / 1;
  background: var(--paper-deep);
}

.exhibition-card-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  border-color: transparent;
  background: rgba(0, 0, 0, 0.85);
  color: var(--white);
}

.exhibition-card-badge.exhibition-badge--present {
  background: var(--white);
  color: var(--accent);
}

.exhibition-card-badge.exhibition-badge--future,
.exhibition-card-badge.exhibition-badge--past {
  border-color: transparent;
  color: var(--white);
}

.exhibition-carousel-card figure img,
.exhibition-carousel-card figure .art-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  transition: transform 250ms ease;
}

.exhibition-carousel-card a:hover figure img,
.exhibition-carousel-card a:hover figure .art-placeholder {
  transform: scale(1.025);
}

.exhibition-carousel-card h3 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.exhibition-carousel-card p {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.artist-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.artist-card {
  grid-column: span 4;
}

.artist-card:nth-child(3n + 2) {
  margin-top: 7rem;
}

.artist-card figure,
.article-card figure {
  margin: 0 0 1.25rem;
  overflow: hidden;
  background: var(--paper-deep);
}

.artist-card figure {
  aspect-ratio: 3 / 4;
}

.artist-card img,
.article-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.artist-card:hover img,
.article-card:hover img {
  transform: scale(1.025);
}

.artist-portrait {
  height: 100%;
  min-height: 420px;
  background:
    radial-gradient(ellipse at 48% 27%, #989898 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 50% 44%, #303030 0 22%, transparent 22.5%),
    linear-gradient(140deg, #9d9d9d, #d8d8d8 50%, #6b6b6b);
}

.artist-card:nth-child(2) .artist-portrait {
  background:
    radial-gradient(ellipse at 48% 29%, #5c5c5c 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 50% 45%, #b4b4b4 0 23%, transparent 23.5%),
    linear-gradient(140deg, #2f2f2f, #979797 50%, #bababa);
}

.artist-card:nth-child(3) .artist-portrait {
  background:
    radial-gradient(ellipse at 52% 28%, #b3b3b3 0 11%, transparent 11.5%),
    radial-gradient(ellipse at 50% 43%, #1f1f1f 0 24%, transparent 24.5%),
    linear-gradient(140deg, #a9a9a9, #e3e3e3 50%, #666666);
}

.card-title {
  margin: 0.3rem 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.artist-card figure {
  position: relative;
}

.artist-card-cue,
.artwork-card-cue {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 300ms ease, transform 300ms ease;
}

.artist-card:hover .artist-card-cue,
.artist-card a:focus-visible .artist-card-cue,
.artwork-card:hover .artwork-card-cue,
.artwork-card a:focus-visible .artwork-card-cue {
  opacity: 1;
  transform: translateY(0);
}

.artist-card-facts {
  margin: 0.45rem 0 0;
  color: var(--ink);
  font-size: 0.85rem;
}

.artist-card-bio {
  display: -webkit-box;
  margin: 0.6rem 0 0;
  max-width: 36ch;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-artists .section-heading {
  margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}

.home-artists .section-heading h2 {
  max-width: 16ch;
}

.home-artists .artist-grid {
  max-width: 1020px;
  margin-inline: auto;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.home-artists .artist-card:nth-child(3n + 2) {
  margin-top: 3rem;
}

.home-artists .artist-card figure {
  aspect-ratio: 4 / 5;
}

.home-artists .artist-portrait {
  min-height: 0;
}

.home-artists .card-title {
  font-size: clamp(1.3rem, 1.6vw, 1.75rem);
  line-height: 1.05;
}

.home-artists .card-meta {
  font-size: 0.63rem;
}

.home-artists .artist-card-bio {
  display: none;
}

.home-artworks .section-heading {
  margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}

.home-artworks .section-heading h2 {
  max-width: 16ch;
}

.home-artworks .artwork-grid {
  max-width: 1020px;
  margin-inline: auto;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.home-artworks .artwork-card:nth-child(even) {
  margin-top: 3rem;
}

.home-artworks .card-title {
  font-size: clamp(1.3rem, 1.6vw, 1.75rem);
  line-height: 1.05;
}

.home-artworks .card-meta {
  font-size: 0.63rem;
}

.statement {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  padding: clamp(5rem, 3vw, 11rem) 0;
  border-top: 1px solid var(--line);
}

.statement h2 {
  grid-column: 2;
  max-width: 14ch;
}

.statement h2 em {
  color: var(--accent);
  font-weight: 400;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space);
}

/* When everything fits one page the pagination (which carries the archive's
   bottom spacing) is not rendered, leaving the grid as the last child. Restore
   the breathing room before the footer in that case. */
.site-shell > .article-grid:last-child,
.site-shell > .artwork-grid:last-child {
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.article-card:first-child {
  grid-column: span 2;
}

.home-journal .section-heading h2 {
  max-width: 16ch;
}

/* Each card is a catalogue plate: image above, wall label below,
   closed by a colophon rule carrying the reading time. */
.article-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-card figure {
  aspect-ratio: 4 / 3;
}

.article-card-label {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.article-card .card-meta {
  margin-bottom: 0.7rem;
}

.card-topic {
  color: var(--accent);
  font-weight: 700;
}

.article-card .card-title {
  max-width: 22ch;
  margin-top: 0;
  font-size: clamp(1.25rem, 1.4vw, 1.7rem);
  line-height: 1.12;
  transition: color 250ms ease;
}

.card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 52ch;
  margin: 0.35rem 0 1.1rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.55;
}

.card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: auto 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-read {
  color: var(--ink);
}

.card-read span {
  display: inline-block;
  transition: transform 250ms ease;
}

.article-card:hover .card-read,
.article-card a:focus-visible .card-read {
  color: var(--accent);
}

.article-card:hover .card-read span,
.article-card a:focus-visible .card-read span {
  transform: translateX(0.3rem);
}

.article-card:hover .card-title {
  color: var(--accent);
}

/* The first card is the lead story: a full-height plate beside the
   label, whose content settles onto the row's shared baseline. */
.article-card:first-child > a {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: stretch;
}

.article-card:first-child figure {
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
}

.article-card:first-child .article-card-label {
  flex: none;
  justify-content: flex-end;
  padding-bottom: 0.25rem;
}

.article-card:first-child .card-foot {
  margin-top: 0;
}

.article-card:first-child .card-title {
  max-width: 16ch;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.05;
}

.article-card:first-child .card-excerpt {
  -webkit-line-clamp: 3;
  max-width: 44ch;
}

/* On the front page the journal shows three equal plates — the lead
   treatment is reserved for the articles index. */
.home-journal .article-card:first-child {
  grid-column: auto;
}

.home-journal .article-card:first-child > a {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.home-journal .article-card:first-child figure {
  height: auto;
  margin: 0 0 1.25rem;
  aspect-ratio: 4 / 3;
}

.home-journal .article-card:first-child .article-card-label {
  flex: 1;
  padding-bottom: 0;
}

.home-journal .article-card:first-child .card-title {
  max-width: 22ch;
  font-size: clamp(1.25rem, 1.4vw, 1.7rem);
  line-height: 1.12;
}

.home-journal .article-card:first-child .card-excerpt {
  -webkit-line-clamp: 2;
  max-width: 52ch;
}

.archive-hero,
.single-hero {
  padding: clamp(4rem, 8vw, 8rem) 0;
}

.single-post .single-hero,
.single-artist .single-hero,
.single-artwork .single-hero,
.single-exhibition .single-hero {
  padding: clamp(2rem, 4vw, 3.5rem) 0;
}

.blog .archive-hero,
.post-type-archive .archive-hero,
.auction-dashboard .archive-hero,
.artist-listing-page .archive-hero {
  padding: clamp(1rem, 2vw, 1.75rem) 0;
  min-height: 0;
  align-content: start;
  gap: 1rem 2rem;
}

.contact-page .single-hero {
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}

.about-page .single-hero {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
}

.about-page .single-hero .section-kicker {
  margin: 0 0 1.1rem;
}

.about-page .single-title {
  grid-column: auto;
  max-width: 16ch;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 0.98;
}

.about-page .single-subtitle {
  grid-column: auto;
  max-width: 44rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
}

.blog .page-title,
.post-type-archive .page-title,
.auction-dashboard .page-title,
.artist-listing-page .page-title {
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  letter-spacing: -0.015em;
  line-height: 1;
}

.breadcrumbs {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.blog .breadcrumbs,
.single-post .breadcrumbs,
.post-type-archive .breadcrumbs,
.single-artist .breadcrumbs,
.single-artwork .breadcrumbs,
.single-exhibition .breadcrumbs,
.about-page .breadcrumbs,
.contact-page .breadcrumbs,
.auction-dashboard .breadcrumbs,
.artist-listing-page .breadcrumbs {
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  list-style: none;
  text-transform: uppercase;
}

.breadcrumbs li {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  color: var(--accent);
  content: "→";
}

.breadcrumbs a {
  color: var(--ink);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  color: var(--accent);
}

.breadcrumbs [aria-current="page"] {
  overflow: hidden;
  max-width: min(42ch, 60vw);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-hero {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  min-height: 52vh;
  align-items: end;
}

.archive-hero .page-title {
  grid-column: 2;
}

.archive-description {
  grid-column: 2;
  max-width: 45rem;
  font-family: var(--serif);
  font-size: 1.4rem;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(3rem, 6vw, 7rem) var(--space);
  padding-bottom: clamp(5rem, 3vw, 10rem);
}

.artist-filters {
  margin-bottom: clamp(4rem, 7vw, 7rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.artist-search {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.artist-search input {
  flex: 1;
  min-width: 0;
  padding: 1.35rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.artist-search input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.artist-search input::placeholder {
  color: var(--muted);
}

.artist-search button {
  padding: 1rem 0 1rem 2rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.artist-search button:hover,
.artist-search button:focus-visible {
  color: var(--accent);
}

.artist-alphabet {
  display: grid;
  grid-template-columns: 2fr repeat(26, 1fr);
  align-items: center;
}

.artist-alphabet a,
.artist-alphabet span {
  display: grid;
  min-height: 3.5rem;
  place-items: center;
  border-right: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 700;
}

.artist-alphabet > :first-child {
  justify-items: center;
}

.artist-alphabet > :last-child {
  border-right: 0;
}

.artist-alphabet a.is-active {
  background: var(--ink);
  color: var(--white);
}

.artist-alphabet .is-empty {
  color: var(--muted);
  opacity: 0.4;
  cursor: default;
}

.artist-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.artist-disciplines a {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.artist-disciplines a:hover,
.artist-disciplines a:focus-visible {
  border-color: var(--ink);
  color: var(--ink);
}

.artist-disciplines a.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.filter-summary {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 0;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-summary p {
  margin: 0;
}

.filter-summary a {
  color: var(--ink);
}

.archive-grid .artist-card {
  grid-column: auto;
  margin-top: 0;
}

.timeline-section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
  padding: 3rem 0 7rem;
  border-top: 1px solid var(--line);
}

.timeline-list {
  grid-column: 2;
}

.timeline-item {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.timeline-item:last-child {
  border-bottom: 1px solid var(--line);
}

.timeline-count {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.timeline-item-main {
  min-width: 0;
}

.timeline-item h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

.timeline-item:hover h3 a {
  color: var(--accent);
}

.timeline-excerpt {
  max-width: 52ch;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.timeline-item .exhibition-badge {
  justify-self: start;
}

.single-hero {
  display: grid;
  grid-template-columns: 0.75fr 2.25fr;
  gap: 2rem;
  align-items: end;
}

.single-title {
  grid-column: 2;
  max-width: 12ch;
}

.single-subtitle {
  grid-column: 2;
  max-width: 48rem;
  margin: 1.5rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.artwork-badge,
.exhibition-badge {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.artwork-badge--on-view,
.exhibition-badge--present {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.exhibition-badge--future {
  border-color: var(--ink);
  color: var(--ink);
}

.exhibition-badge--past {
  opacity: 0.7;
}

.exhibition-dates {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.exhibition-map {
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  line-height: 0;
}

.exhibition-map iframe {
  display: block;
  width: 100%;
  filter: grayscale(1);
}

.artwork-zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.artwork-caption {
  max-width: 60ch;
  margin: 1.25rem auto 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.artwork-caption em {
  color: var(--ink);
  font-style: italic;
}

.artwork-enquire {
  display: inline-block;
  margin-top: 1.75rem;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.artwork-enquire:hover,
.artwork-enquire:focus-visible {
  background: var(--accent);
  color: var(--white);
}

.artist-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.75rem;
}

.artist-link {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.artist-actions .artwork-enquire {
  margin-top: 0.25rem;
}

body.lightbox-open {
  overflow: hidden;
}

.artwork-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: rgba(0, 0, 0, 0.94);
}

.artwork-lightbox[hidden] {
  display: none;
}

.artwork-lightbox-figure {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  text-align: center;
}

.artwork-lightbox-figure img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}

.artwork-lightbox-figure figcaption {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.artwork-lightbox-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: none;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.artwork-lightbox-close:hover,
.artwork-lightbox-close:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
}

.single-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.5fr 0.75fr;
  gap: var(--space);
  padding-bottom: clamp(6rem, 4vw, 12rem);
}

.single-content {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.65;
}

.single-content > p:first-child {
  font-size: 1.35em;
  line-height: 1.45;
}

.single-content h2,
.single-content h3 {
  margin-top: 2.5em;
  font-family: var(--sans);
}

/* About page */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: var(--space);
  align-items: start;
  padding-bottom: clamp(4rem, 6vw, 7rem);
}

.about-intro-copy {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.65rem);
  line-height: 1.6;
}

.about-intro-copy > *:first-child {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.about-intro-copy > * {
  max-width: 46rem;
}

.about-intro-copy > *:first-child {
  margin-top: 0;
}

.about-intro-copy > *:last-child {
  margin-bottom: 0;
}

.about-profile-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: 7rem;
}

.about-profile-card .section-kicker {
  margin-bottom: 0.5rem;
}

.about-stats {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.about-stats div {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.about-stats dt {
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.2;
}

.about-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding: clamp(3.5rem, 6vw, 6rem) 0;
  border-top: 1px solid var(--line);
}

.about-story h2 {
  max-width: 16ch;
  margin: 0.35rem 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

.about-story-copy {
  align-self: start;
  max-width: 40rem;
  padding-top: 0.4rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.75;
}

.about-story-copy > *:first-child {
  margin-top: 0;
}

.about-story-copy > *:last-child {
  margin-bottom: 0;
}

.about-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: clamp(4rem, 5vw, 7rem) 0;
  border-top: 1px solid var(--line);
}

.about-value {
  position: relative;
  min-height: 22rem;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 250ms ease;
}

.about-value:first-child {
  border-left: 1px solid var(--line);
}

/* A rule that draws across the top on hover — like turning over a gallery label. */
.about-value::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
}

.about-value-index {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--line);
  transition: color 250ms ease;
}

.about-value h2 {
  margin: 1.25rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.05;
}

.about-value p:last-child {
  margin: auto 0 0;
  max-width: 32ch;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (hover: hover) {
  .about-value:hover {
    background-color: var(--paper-deep);
  }

  .about-value:hover::before {
    transform: scaleX(1);
  }

  .about-value:hover .about-value-index {
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-value,
  .about-value::before,
  .about-value-index {
    transition: none;
  }
}

.about-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(4rem, 7vw, 7rem) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}

.about-cta h2 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
}

.about-cta-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2.5rem;
  margin-top: 0.75rem;
}

/* Contact page */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  gap: var(--space);
  align-items: start;
  padding-bottom: clamp(6rem, 4vw, 12rem);
}

.contact-info-panel {
  grid-column: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
}

.contact-form-wrap {
  grid-column: 2;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(27, 23, 18, 0.04), transparent 38%),
    var(--paper);
  position: sticky;
  top: 7rem;
}

.contact-content {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.9vw, 1.65rem);
  line-height: 1.6;
}

.contact-content > *:first-child {
  margin-top: 0;
}

.contact-content > *:last-child {
  margin-bottom: 0;
}

.contact-routes {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.contact-route {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
}

.contact-route span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.contact-route h2 {
  margin: 0 0 0.45rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.05;
}

.contact-route p {
  grid-column: 2;
  max-width: 36rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.contact-form-heading {
  margin-bottom: 2rem;
}

.contact-form-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1;
}

.contact-form-heading p:last-child {
  max-width: 32rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.contact-notice {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  font-size: 0.9rem;
}

.contact-notice--ok {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--ink);
}

.contact-notice--error {
  background: rgba(140, 47, 36, 0.06);
  color: var(--accent);
  border-color: var(--accent);
}

.contact-form {
  display: grid;
  gap: 1.2rem;
}

.contact-field {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.contact-field label {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  outline: 0;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: rgba(0, 0, 0, 0.38);
}

.contact-field textarea {
  min-height: 11rem;
  resize: vertical;
  line-height: 1.5;
}

.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(27, 23, 18, 0.07);
}

.contact-submit {
  justify-self: stretch;
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.related-works {
  padding: clamp(4rem, 4vw, 4rem) 0;
  border-top: 1px solid var(--line);
}

.artwork-filters {
  margin-bottom: clamp(3rem, 6vw, 6rem);
  padding: clamp(1.75rem, 3.5vw, 3rem) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

/* Search — serif field with a hairline underline. */
.artwork-filter-search {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}

.artwork-filter-search input {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2.25rem);
  letter-spacing: -0.01em;
}

.artwork-filter-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.artwork-filter-search button {
  display: grid;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  place-items: center;
}

.artwork-filter-search button:hover,
.artwork-filter-search button:focus-visible {
  color: var(--accent);
}

.artwork-filter-search svg {
  width: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.artwork-filter-options {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
}

/* Boolean filters as toggle chips, echoing the badge language. */
.artwork-filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.artwork-filter-checks label {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.artwork-filter-checks label:hover {
  border-color: var(--ink);
}

.artwork-filter-checks input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.artwork-filter-checks label:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.artwork-filter-checks label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Selects + apply. */
.artwork-filter-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem clamp(0.75rem, 1.5vw, 1.25rem);
}

.artwork-filter-selects label {
  flex: 1 1 11rem;
  min-width: 0;
}

.artwork-filter-selects select {
  width: 100%;
  min-height: 3rem;
  padding: 0.6rem 2.5rem 0.6rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 0;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 18px) 55% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 13px) 55% / 7px 7px no-repeat,
    var(--paper);
  color: var(--ink);
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.artwork-filter-selects select:hover {
  border-color: var(--ink);
}

.filter-through {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.artwork-filter-submit {
  flex: 0 0 auto;
  min-height: 3rem;
  margin-left: auto;
  padding: 0.7rem 1.75rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.artwork-filter-submit:hover {
  background: var(--paper);
  color: var(--ink);
}

.artwork-filter-search input:focus-visible,
.artwork-filter-selects select:focus-visible,
.artwork-filter-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.artwork-filters .filter-summary {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.25rem, 2.5vw, 1.5rem) 0 0;
  border-top: 1px solid var(--line);
}

.artwork-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space);
}

.artwork-card figure {
  position: relative;
  overflow: hidden;
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
}

.artwork-card {
  position: relative;
}

.artwork-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.artwork-card:hover figure img {
  transform: scale(1.03);
}

.artwork-card:nth-child(even) {
  margin-top: 5rem;
}

.artwork-card .art-placeholder {
  aspect-ratio: 4 / 5;
}

.artwork-card-categories {
  margin: 0.55rem 0 0;
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.artwork-auction-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  padding: 0.45rem 0.7rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.artwork-auction-badge--live {
  background: var(--accent);
  color: var(--white);
}

/* A small live pulse — the one moving thing on an otherwise still page. */
.artwork-auction-badge--live::before,
.auction-status--live::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
  .artwork-auction-badge--live::before,
  .auction-status--live::before {
    animation: auction-pulse 2s ease-in-out infinite;
  }

  @keyframes auction-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.35;
    }
  }
}

.artwork-card-auction {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.8rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

.artwork-card-auction strong {
  color: var(--ink);
}

.artwork-card-auction > span {
  display: grid;
  gap: 0.15rem;
}

.artwork-card-auction small {
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
}

.newsletter {
  padding: clamp(4.5rem, 3vw, 8rem) 0;
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}

.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: start;
}

.newsletter-note {
  max-width: 32ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.newsletter h2 {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.newsletter-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.newsletter-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.newsletter-link:hover,
.newsletter-link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.newsletter-icon {
  flex-shrink: 0;
}

.site-footer {
  background: #0f0f0f;
  color: var(--white);
}

.footer-wordmark {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: clamp(2.25rem, 4vw, 3.5rem) 0 clamp(1.5rem, 2.5vw, 2.25rem);
}

.footer-brand {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.25rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.footer-logo {
  line-height: 0;
}

.footer-logo .custom-logo-link {
  display: inline-block;
}

.footer-logo img {
  width: auto;
  max-height: clamp(56px, 9vw, 88px);
}

/* Fallback: render the (dark) site logo as a white silhouette so it reads on
   the near-black footer. Used only when no dedicated footer logo is set. */
.footer-logo--invert img {
  filter: brightness(0) invert(1);
}

.footer-tagline {
  max-width: 26ch;
  margin: 0 0 0.4rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.17);
}

.footer-column h2 {
  margin: 0 0 1.4rem;
  color: #999999;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-column p,
.footer-column ul {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-column p + p {
  margin-top: 0.6rem;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-column a {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: var(--white);
}

.footer-column .footer-social-label {
  margin: 1.6rem 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.footer-social li {
  margin-bottom: 0;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}

.footer-social-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  color: #999999;
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.footer-credit-inline {
  margin-right: auto;
}

.footer-credit-inline a {
  color: #c2c2c2;
  transition: color 0.2s ease;
}

.footer-credit-inline a:hover,
.footer-credit-inline a:focus-visible {
  color: var(--white);
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #999999;
  transition: color 0.2s ease;
}

.footer-top-link:hover,
.footer-top-link:focus-visible {
  color: var(--white);
}

.footer-top-link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.footer-top-link:hover span,
.footer-top-link:focus-visible span {
  transform: translateY(-3px);
}

/* Folio pagination: a hairline rule, display page numbers, and
   small-caps Previous/Next arms. */
.pagination {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding: 1.75rem 0 clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem 0.5rem;
}

.pagination .page-numbers {
  min-width: 2.2rem;
  padding: 0.3rem 0.35rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.pagination .dots {
  color: var(--muted);
}

.pagination .current {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

.pagination .prev,
.pagination .next {
  min-width: 0;
  padding: 0.3rem 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pagination .prev {
  margin-right: 1.5rem;
}

.pagination .next {
  margin-left: 1.5rem;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 5rem 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.5rem;
}

.comments {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

.comments-title,
.comment-reply-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  margin: 0 0 1.5rem;
}

.comment-list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.comment-list ol.children {
  list-style: none;
  margin: 1.5rem 0 0;
  padding-left: clamp(1rem, 3vw, 2.5rem);
}

.comment-list li.comment {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.comment-list .comment-author {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.comment-list .comment-author .fn {
  font-style: normal;
  font-weight: 700;
}

.comment-list .comment-metadata,
.comment-list .comment-metadata a {
  color: var(--muted);
  font-size: 0.8125rem;
}

.comment-list .comment-content {
  color: var(--ink);
}

.comment-list .reply {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.comment-respond {
  margin-top: 2.5rem;
}

.comment-form-comment textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}

.comment-form p {
  margin: 0 0 1.25rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.comment-form .form-submit input {
  padding: 0.85rem 1.75rem;
  border: 0;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}

.comment-form .form-submit input:hover,
.comment-form .form-submit input:focus-visible {
  background: var(--accent);
}

.no-comments {
  color: var(--muted);
}

@media (max-width: 900px) {
  .site-header {
    --header-stick-offset: 0px;
  }

  .header-inner {
    column-gap: 1.5rem;
  }

  .site-brand,
  .site-logo {
    flex: 1 1 auto;
    font-size: clamp(1.6rem, 7vw, 2.25rem);
  }

  .header-bar {
    display: contents;
  }

  .search-toggle {
    order: 2;
  }

  .header-bids-link {
    order: 1;
    margin-left: auto;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .menu-toggle {
    order: 3;
    display: block;
  }

  .main-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    order: 4;
    display: grid;
    place-items: center;
    visibility: hidden;
    background: var(--paper);
    opacity: 0;
    transition: opacity 200ms ease, visibility 200ms ease;
  }

  .main-nav.is-open {
    visibility: visible;
    opacity: 1;
  }

  .main-nav ul {
    flex-direction: column;
    /* Restore centering: baseline is only meaningful in the desktop row. */
    align-items: center;
  }

  .main-nav a {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-bottom: 0;
  }

  /* Flatten the dropdown into a collapsible stack under its parent.
     Collapsed by default (inherits visibility:hidden from the base rule, so
     the links stay out of the tab order); the toggle button expands it. */
  .main-nav .sub-menu {
    position: static;
    transform: none;
    min-width: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-align: center;
    transition: max-height 220ms ease, visibility 220ms ease;
  }

  .main-nav .menu-item-has-children.is-expanded > .sub-menu {
    max-height: 50vh;
    padding: 0.4rem 0 0.6rem;
    visibility: visible;
  }

  .main-nav .sub-menu a {
    font-size: 0.95rem;
    opacity: 0.85;
  }

  /* Center the "Artists" parent like the other items: keep label + chevron on
     one line and let the in-flow submenu wrap to a full-width row below,
     instead of sitting beside the label and shoving it to the left. */
  .main-nav .menu-item-has-children {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0;
  }

  .main-nav .menu-item-has-children > .sub-menu {
    flex-basis: 100%;
  }

  .hero h1,
  .page-title {
    font-size: clamp(3.2rem, 13vw, 6rem);
  }

  /* Content-page titles carry (0,2,0) context overrides, so a bare
     .single-title here would never win. Match that specificity. */
  .single-post .single-title,
  .single-artist .single-title,
  .single-artwork .single-title,
  .single-exhibition .single-title,
  .about-page .single-title,
  .contact-page .single-title {
    font-size: clamp(2.4rem, 6vw, 3.8rem);
  }

  .section-heading,
  .statement,
  .newsletter-inner,
  .archive-hero,
  .single-hero {
    grid-template-columns: 1fr;
  }

  .section-heading .arrow-link {
    justify-self: start;
  }

  .section-heading h2 {
    white-space: normal;
  }

  .statement h2,
  .archive-hero .page-title,
  .archive-description,
  .single-title,
  .single-subtitle {
    grid-column: 1;
  }

  .exhibition-carousel {
    grid-auto-columns: calc((100% - var(--space)) / 2);
  }

  .artist-card {
    grid-column: span 6;
  }

  .artist-card:nth-child(3n + 2) {
    margin-top: 0;
  }

  .artist-card:nth-child(even) {
    margin-top: 4rem;
  }

  .article-grid,
  .archive-grid,
  .artwork-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-values {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .about-intro,
  .about-story {
    grid-template-columns: 1fr;
  }

  .about-profile-card {
    position: static;
  }

  .about-story h2 {
    max-width: 20ch;
  }

  .about-story-copy {
    padding-top: 0;
  }

  .about-values {
    gap: 0;
  }

  .about-value,
  .about-value:first-child {
    min-height: 0;
    border-right: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .about-value:first-child {
    border-top: 0;
  }

  .about-cta {
    padding-top: clamp(3rem, 8vw, 5rem);
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact-info-panel,
  .contact-content,
  .contact-form-wrap {
    grid-column: 1;
  }

  .contact-form-wrap {
    position: static;
  }

  .artwork-filter-submit {
    width: 100%;
    margin-left: 0;
  }

  .artist-alphabet {
    display: flex;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .artist-alphabet a,
  .artist-alphabet span {
    flex: 0 0 3.25rem;
  }

  .artist-alphabet > :first-child {
    flex-basis: 4.5rem;
    justify-items: center;
  }

  .article-card:first-child {
    grid-column: span 2;
  }

  .timeline-section {
    grid-template-columns: 1fr;
  }

  .timeline-list {
    grid-column: 1;
  }

  .timeline-item {
    grid-template-columns: 0.6fr 1.4fr auto;
  }

  .timeline-item .timeline-location {
    display: none;
  }

  .single-layout {
    grid-template-columns: 1fr 2fr;
  }

  .single-content {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .hero h1,
  .page-title {
    font-size: clamp(2.8rem, 16vw, 5rem);
  }

  .single-post .single-title,
  .single-artist .single-title,
  .single-artwork .single-title,
  .single-exhibition .single-title,
  .about-page .single-title,
  .contact-page .single-title {
    font-size: clamp(2rem, 8.5vw, 3.2rem);
  }

  .hero-top {
    justify-content: flex-start;
  }

  .hero-current {
    align-items: flex-start;
    text-align: left;
  }

  .exhibition-carousel-header {
    align-items: start;
  }

  .exhibition-carousel-actions {
    align-items: flex-end;
    flex-direction: column;
    gap: 1rem;
  }

  .exhibition-carousel-actions > a {
    display: none;
  }

  .exhibition-carousel-controls button {
    width: 2.75rem;
    height: 2.75rem;
  }

  .exhibition-carousel {
    grid-auto-columns: 86%;
  }

  .artist-grid,
  .article-grid,
  .archive-grid,
  .artwork-grid {
    grid-template-columns: 1fr;
  }

  .artist-card,
  .article-card:first-child {
    grid-column: 1;
  }

  .article-card:first-child > a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .article-card:first-child figure {
    height: auto;
    margin: 0 0 1.25rem;
    aspect-ratio: 4 / 3;
  }

  .artist-card:nth-child(even),
  .artwork-card:nth-child(even),
  .home-artworks .artwork-card:nth-child(even) {
    margin-top: 0;
  }

  .artwork-filters {
    padding: clamp(1.25rem, 4vw, 1.75rem) 0;
  }

  .artwork-filter-selects label {
    flex-basis: 100%;
  }

  .filter-through {
    flex-basis: 100%;
  }

  .artwork-filter-submit {
    width: 100%;
    margin-left: 0;
  }

  .timeline-item {
    grid-template-columns: 1fr auto;
  }

  .timeline-item .timeline-date {
    grid-column: 1 / -1;
  }

  .timeline-item .timeline-excerpt {
    display: none;
  }

  .single-layout {
    grid-template-columns: 1fr;
  }

  .single-content {
    grid-column: 1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .footer-tagline-bottom {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Single artist — represented-artist profile
   ------------------------------------------------------------------ */
.single-artist-profile {
  padding-bottom: clamp(5rem, 10vw, 11rem);
}

.artist-masthead {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
  margin-top: clamp(1.5rem, 4vw, 3.25rem);
}

/* Matted, hairline-framed portrait — echoes the gallery frame motif. */
.artist-portrait-frame {
  position: relative;
  margin: 0;
  padding: clamp(0.55rem, 1vw, 0.9rem);
  border: 1px solid var(--line);
  background: var(--paper);
}

.artist-portrait-frame::after {
  position: absolute;
  inset: clamp(0.55rem, 1vw, 0.9rem);
  border: 1px solid var(--line);
  content: "";
  pointer-events: none;
}

.artist-portrait-image,
.artist-portrait--frame {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.artist-portrait--frame {
  min-height: 0;
}

.artist-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.single-artist .artist-name {
  max-width: 15ch;
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.artist-disciplines {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.65rem;
  margin: 1.5rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.artist-disciplines a {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid transparent;
}

.artist-disciplines a:hover,
.artist-disciplines a:focus-visible {
  border-color: currentColor;
}

.artist-disciplines-sep {
  color: rgba(0, 0, 0, 0.32);
}

.artist-lead {
  max-width: 38rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  line-height: 1.28;
}

.artist-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  width: 100%;
  margin: clamp(2rem, 4vw, 3.25rem) 0 0;
}

.artist-fact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
}

.artist-fact dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.artist-fact dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
}

.artist-masthead-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Biography — label gutter + serif measure, mirroring the masthead grid. */
.artist-biography {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  margin-top: clamp(4rem, 8vw, 8rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.artist-biography-label {
  margin: 0;
}

.artist-biography-body {
  max-width: 70ch;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.65;
}

.artist-biography-body > :first-child {
  margin-top: 0;
}

.artist-biography-body > p:first-child {
  font-size: 1.3em;
  line-height: 1.45;
}

.artist-biography-body h2,
.artist-biography-body h3 {
  margin-top: 2.2em;
  font-family: var(--sans);
}

.single-artist-profile .related-works {
  margin-top: clamp(4rem, 8vw, 8rem);
}

@media (prefers-reduced-motion: no-preference) {
  .artist-masthead > * {
    animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .artist-intro {
    animation-delay: 0.09s;
  }

  @keyframes artist-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 900px) {
  .artist-masthead,
  .artist-biography {
    grid-template-columns: 1fr;
  }

  .artist-portrait-frame {
    max-width: 26rem;
  }

  .artist-biography {
    margin-top: clamp(3rem, 7vw, 5rem);
  }
}

@media (max-width: 620px) {
  .artist-portrait-frame {
    max-width: none;
  }

  .artist-facts {
    grid-template-columns: 1fr;
  }

  .artist-masthead-actions .artwork-enquire {
    width: 100%;
    text-align: center;
  }
}

/* Single artwork — work page with wall label and details ledger
   ------------------------------------------------------------------ */
.single-artwork-detail {
  padding-bottom: clamp(2rem, 2vw, 2rem);
}

.artwork-header {
  margin-top: clamp(1.5rem, 4vw, 3.25rem);
}

.single-artwork .artwork-subtitle {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.artwork-subtitle a {
  padding-bottom: 0.1rem;
  border-bottom: 1px solid var(--line);
}

.artwork-subtitle a:hover,
.artwork-subtitle a:focus-visible {
  border-color: currentColor;
}

.artwork-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
}

/* Image stage — the work is the hero. */
.artwork-stage {
  display: grid;
  width: min(980px, 86vw);
  margin: clamp(2.5rem, 5vw, 4.5rem) auto clamp(1.75rem, 3vw, 2.75rem);
  place-items: center;
}

.artwork-stage .artwork-zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.artwork-stage img {
  width: auto;
  max-width: 100%;
  max-height: 72vh;
  border: 1px solid var(--line);
  object-fit: contain;
}

.artwork-stage .art-placeholder {
  width: 100%;
  min-height: min(70vh, 720px);
  border: 1px solid var(--line);
}

.single-artwork .artwork-caption {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.single-artwork .artwork-caption em {
  color: var(--ink);
  font-style: italic;
}

/* Curatorial text + sticky details ledger. */
.artwork-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}

.artwork-detail-content {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.65;
}

.artwork-detail-content > :first-child {
  margin-top: 0;
}

.artwork-detail-content > p:first-child {
  font-size: 1.3em;
  line-height: 1.45;
}

.artwork-detail-content h2,
.artwork-detail-content h3 {
  margin-top: 2.2em;
  font-family: var(--sans);
}

.artwork-detail-aside {
  position: sticky;
  top: clamp(1.5rem, 4vw, 2.5rem);
  align-self: start;
}

.auction-panel {
  margin-bottom: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--ink);
}

.auction-panel .meta-label {
  margin-bottom: 0.75rem;
}

.auction-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.auction-heading-actions,
.auction-dashboard-card-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

.auction-watch-button {
  display: inline-flex;
  z-index: 3;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.65rem;
}

.auction-watch-button span {
  font-size: 1rem;
  line-height: 1;
}

.auction-watch-button em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auction-watch-button:hover,
.auction-watch-button:focus-visible,
.auction-watch-button.is-watched {
  border-color: var(--ink);
}

.auction-watch-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.auction-watch-button--card {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.auction-watch-button--card em {
  display: none;
}

.auction-watch-button--card + a .artwork-auction-badge {
  max-width: calc(100% - 4rem);
}

.auction-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  font-weight: 500;
}

.auction-status {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auction-status--live {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
}

.auction-notice {
  margin: 1rem 0 0;
  padding: 0.75rem;
  border: 1px solid currentColor;
  font-size: 0.85rem;
}

.auction-notice--success {
  color: #176b3a;
}

.auction-notice--error {
  color: var(--accent);
}

.auction-price {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.auction-price > span,
.auction-timing > span,
.auction-bid-form label {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auction-price strong {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
}

.auction-price small,
.auction-bid-form small {
  color: var(--muted);
}

.auction-timing {
  display: grid;
  gap: 0.3rem;
  margin: 1.25rem 0 0;
}

.auction-countdown {
  font-variant-numeric: tabular-nums;
}

.auction-bid-form {
  margin-top: 1.5rem;
}

.auction-your-maximum {
  margin: 0.4rem 0 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.auction-bid-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0.45rem 0;
}

.auction-bid-form > div.auction-bid-phone {
  display: block;
  margin: 0.85rem 0 0;
}

.auction-bid-phone label {
  display: block;
  margin-bottom: 0.3rem;
}

.auction-bid-phone input {
  width: 100%;
  border: 1px solid var(--ink);
}

.auction-bid-form input {
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--ink);
  border-right: 0;
  background: var(--paper);
}

.auction-bid-form button,
.auction-login {
  display: inline-block;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auction-bid-form button:hover,
.auction-bid-form button:focus-visible,
.auction-login:hover,
.auction-login:focus-visible {
  background: var(--accent);
  color: var(--white);
}

.auction-login {
  margin-top: 1.5rem;
}

.auction-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.auction-auth-actions .auction-login {
  margin-top: 0;
}

.auction-login--secondary {
  background: var(--paper);
  color: var(--ink);
}

.auction-login--secondary:hover,
.auction-login--secondary:focus-visible {
  background: var(--ink);
  color: var(--white);
}

/* Front-end bidder auth pages (sign in, register, password reset) */
.auction-register .breadcrumbs {
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

.auction-register .archive-hero {
  display: block;
  min-height: 0;
  padding: clamp(1rem, 2vw, 1.75rem) 0;
  text-align: center;
}

.auction-register .section-kicker {
  margin-bottom: 0.75rem;
}

.auction-register .page-title {
  max-width: none;
  margin: 0 auto;
  grid-column: auto;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.auction-register .archive-description {
  grid-column: auto;
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: 1.15rem;
}

.auction-register-panel {
  max-width: 32rem;
  margin: clamp(2rem, 5vw, 4rem) auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
}

.auction-register-form {
  margin-top: 0;
}

.auction-register-form > div.auction-register-field {
  display: block;
  margin: 1rem 0 0;
}

.auction-register-field label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auction-register-field input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.auction-register-form button {
  margin-top: 1.25rem;
}

.auction-register-form small {
  display: block;
  margin-top: 0.75rem;
  color: var(--muted);
}

/* Honeypot: kept in the layout flow for bots but hidden from people. */
.auction-register-website {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.auction-register-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.auction-register-remember input {
  width: auto;
  margin: 0;
}

.auction-register-signin {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.auction-history {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.auction-history summary {
  padding: 0.9rem 0 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.auction-history ul {
  padding: 0;
  margin: 0.75rem 0 0;
  list-style: none;
}

.auction-history li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

.auction-history time {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.72rem;
}

.auction-dashboard-link {
  display: inline-block;
  margin-top: 1.35rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auction-dashboard {
  padding-bottom: clamp(5rem, 9vw, 9rem);
}

.auction-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.auction-dashboard-summary div {
  display: grid;
  gap: 0.25rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.auction-dashboard-summary div + div {
  border-left: 1px solid var(--line);
}

.auction-dashboard-summary strong {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
}

.auction-dashboard-summary span {
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auction-dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.auction-dashboard-tabs a {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auction-dashboard-tabs a:hover,
.auction-dashboard-tabs a:focus-visible {
  border-color: var(--ink);
}

.auction-dashboard-tabs span {
  margin-left: 0.35rem;
  color: var(--muted);
}

.auction-dashboard-section {
  scroll-margin-top: 5rem;
  margin-top: clamp(3rem, 7vw, 6rem);
}

.auction-dashboard-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.auction-dashboard-card {
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr);
  border-top: 1px solid var(--ink);
}

.auction-dashboard-image {
  min-height: 220px;
  background: var(--paper-deep);
}

.auction-dashboard-image img,
.auction-dashboard-image .art-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.auction-dashboard-card-body {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.auction-dashboard-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.auction-dashboard-card-heading h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 1.05;
}

.auction-position {
  flex: 0 0 auto;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auction-position--leading,
.auction-position--won {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.auction-position--watching {
  border-color: var(--ink);
}

.auction-position--outbid {
  border-color: var(--accent);
  color: var(--accent);
}

.auction-dashboard-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.auction-dashboard-card dl div {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.auction-dashboard-card dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auction-dashboard-card dd {
  margin: 0.35rem 0 0;
  font-family: var(--serif);
  font-size: 1.1rem;
}

.auction-dashboard-empty {
  margin: clamp(2rem, 5vw, 4rem) 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
}

@media (max-width: 700px) {
  .auction-dashboard-summary {
    grid-template-columns: 1fr;
  }

  .auction-dashboard-summary div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .auction-dashboard-card {
    grid-template-columns: 1fr;
  }

  .auction-dashboard-image {
    max-height: 360px;
  }

  .auction-dashboard-card dl {
    grid-template-columns: 1fr;
  }
}

.artwork-detail-content + .artwork-detail-aside {
  grid-column: 2;
}

.artwork-specs {
  margin: 0;
  padding: 0;
}

.artwork-spec {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
}

.artwork-spec dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.artwork-spec dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.45;
}

.artwork-spec dd a {
  border-bottom: 1px solid var(--line);
}

.artwork-spec dd a:hover,
.artwork-spec dd a:focus-visible {
  border-color: currentColor;
}

.artwork-detail-aside .artwork-enquire {
  display: block;
  margin-top: 1.75rem;
  text-align: center;
}

.single-artwork-detail .related-works {
  margin-top: clamp(2rem, 2vw, 2rem);
}

@media (prefers-reduced-motion: no-preference) {
  .single-artwork-detail .artwork-header {
    animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@media (max-width: 900px) {
  .artwork-detail {
    grid-template-columns: 1fr;
  }

  .artwork-detail-content + .artwork-detail-aside {
    grid-column: 1;
  }

  .artwork-detail-aside {
    position: static;
  }

  .artwork-detail-aside .artwork-enquire {
    width: fit-content;
  }
}

/* Single exhibition — poster hero with visit panel
   ------------------------------------------------------------------ */
.single-exhibition-detail {
  margin-top: 0;
}

.exhibition-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(70vh, 680px);
  margin: clamp(1.25rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 6rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.exhibition-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.exhibition-hero-media img,
.exhibition-hero-media .art-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.exhibition-hero::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(15, 15, 15, 0.9) 0%,
    rgba(15, 15, 15, 0.4) 50%,
    rgba(15, 15, 15, 0.12) 100%
  );
  content: "";
}

.exhibition-hero-inner {
  position: relative;
  z-index: 2;
  width: var(--page);
  margin-inline: auto;
}

.exhibition-hero-content {
  max-width: 46rem;
}

.exhibition-hero .meta-label {
  color: rgba(255, 255, 255, 0.82);
}

.exhibition-hero .single-title {
  max-width: 20ch;
  color: var(--white);
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.exhibition-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}

.exhibition-hero .exhibition-badge {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.exhibition-hero .exhibition-badge--present {
  border-color: var(--white);
  background: var(--white);
  color: #8c2f24;
}

.exhibition-hero .exhibition-dates {
  color: rgba(255, 255, 255, 0.82);
}

.exhibition-hero-lead {
  max-width: 40rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.3;
}

/* Body — curatorial text + sticky visit panel. */
.exhibition-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-bottom: clamp(5rem, 10vw, 11rem);
}

.exhibition-prose {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.65;
}

.exhibition-prose > :first-child {
  margin-top: 0;
}

.exhibition-prose > p:first-child {
  font-size: 1.3em;
  line-height: 1.45;
}

.exhibition-prose h2,
.exhibition-prose h3 {
  margin-top: 2.2em;
  font-family: var(--sans);
}

.exhibition-visit {
  position: sticky;
  top: clamp(1.5rem, 4vw, 2.5rem);
  grid-column: 2;
  align-self: start;
}

.visit-list {
  margin: 0;
  padding: 0;
}

.visit-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--line);
}

.visit-item dt {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.visit-item dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.45;
}

.exhibition-directions {
  display: inline-block;
  margin-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .exhibition-hero-content {
    animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}

@media (max-width: 900px) {
  .exhibition-body {
    grid-template-columns: 1fr;
  }

  .exhibition-visit {
    position: static;
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .exhibition-hero {
    min-height: min(62vh, 520px);
  }
}

/* Single article — centered editorial reading layout
   ------------------------------------------------------------------ */
.single-article {
  padding-bottom: clamp(5rem, 10vw, 11rem);
}

.article-header {
  max-width: 50rem;
  margin: clamp(1.5rem, 4vw, 3.5rem) auto 0;
  text-align: center;
}

.single-post .article-headline {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

.article-standfirst {
  max-width: 40rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  line-height: 1.32;
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
  width: fit-content;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.article-byline-sep {
  color: var(--line);
}

.article-lead-image {
  width: min(1080px, 100%);
  margin: clamp(2.5rem, 5vw, 4rem) auto clamp(0.5rem, 1vw, 1rem);
}

.article-lead-image img {
  width: 100%;
}

.article-lead-image figcaption {
  max-width: 40rem;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.article-body {
  max-width: 42rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.6vw, 1.4rem);
  line-height: 1.7;
}

.article-body > :first-child {
  margin-top: 0;
}

/* Drop cap — the reading cue that opens the essay. */
.article-body > p:first-of-type::first-letter {
  float: left;
  margin: 0.04em 0.12em 0 0;
  color: var(--accent);
  font-family: var(--display);
  font-size: 3.6em;
  font-weight: 500;
  line-height: 0.74;
}

.article-body h2,
.article-body h3 {
  margin-top: 2em;
  font-family: var(--sans);
  line-height: 1.18;
}

.article-body img {
  margin: 2rem auto;
}

.article-body blockquote {
  margin: 2.25rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ink);
  font-size: 1.1em;
  font-style: italic;
}

.article-body a {
  border-bottom: 1px solid var(--line);
}

.article-body a:hover,
.article-body a:focus-visible {
  border-color: currentColor;
}

.article-comments {
  max-width: 46rem;
  margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .single-article .article-header {
    animation: artist-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}