/*
  Galerie Sara Lily Perez
  Monochrome editorial language: the artwork carries all the colour.
  Shape system: square corners everywhere (radius 0), echoing the logo frame.
  Accent: ink only. Every colour is a token below; components never hard-code colours.
*/

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-latin.015c126a3520.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  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: "Open Sans";
  src: url("../fonts/open-sans-latin-ext.7670dba29aa2.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #f6f6f4;
  --surface: #ececea;
  --surface-2: #e2e2df;
  --ink: #161616;
  --ink-soft: #55534f;
  --ink-faint: #66645f;  /* 4.5:1 or better on all light backgrounds (WCAG AA) */
  --line: #d6d5d1;
  --line-strong: #a9a8a3;
  --error: #a3261b;
  --success: #2f5d3a;
  --overlay: rgb(246 246 244 / 0.97);
  --placeholder: #dddcd8;

  --font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 56px;
  --max: 1400px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211;
  --surface: #1b1b19;
  --surface-2: #252522;
  --ink: #ededea;
  --ink-soft: #b0aea9;
  --ink-faint: #8f8d88;
  --line: #2f2e2b;
  --line-strong: #56544f;
  --error: #f08a7e;
  --success: #8fc79c;
  --overlay: rgb(18 18 17 / 0.97);
  --placeholder: #262624;
}

/* Without JavaScript the system preference still applies */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #121211;
    --surface: #1b1b19;
    --surface-2: #252522;
    --ink: #ededea;
    --ink-soft: #b0aea9;
    --ink-faint: #8f8d88;
    --line: #2f2e2b;
    --line-strong: #56544f;
    --error: #f08a7e;
    --success: #8fc79c;
    --overlay: rgb(18 18 17 / 0.97);
    --placeholder: #262624;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
.theme-ready, .theme-ready * { transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 16px; z-index: 100; }
.skip:focus { left: 8px; }

/* Theme-specific logo files (recoloured PNGs, never CSS filters) */
.logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-dark { display: none; }
  :root:not([data-theme]) .logo-light { display: block; }
}

/* ---------- Type ---------- */
.eyebrow { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.display { font-size: clamp(3.25rem, 9vw, 8rem); font-weight: 200; letter-spacing: -0.04em; line-height: 0.98; }
.h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1.05; }
.h2 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); font-weight: 200; letter-spacing: -0.02em; line-height: 1.1; }
.h3 { font-size: 1.25rem; font-weight: 400; line-height: 1.3; }
.lead { font-size: 1.125rem; color: var(--ink-soft); max-width: 60ch; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.875rem; }

/* Titles and names always in capitals, as on the gallery's previous site.
   Body text (.prose, leads, descriptions) keeps normal case. */
.display, .h1, .h2, .h3, .visit__title, .artwork__title, .card__title,
.work__artist, .work__title, .names, .press-item .h3 { text-transform: uppercase; }
.h3, .card__title, .work__artist, .work__title, .names { letter-spacing: 0.02em; }
.prose h2, .prose h3 { text-transform: none; }

.prose { max-width: 68ch; font-size: 1.0625rem; color: var(--ink); }
.prose > * + * { margin-top: 1em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { border-bottom: 1px solid var(--line-strong); }
.prose a:hover { border-color: var(--ink); }
.prose h2, .prose h3 { font-weight: 400; margin-top: 2em; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose blockquote { margin: 0; padding-left: 1em; border-left: 1px solid var(--line-strong); }
/* Compact prose beside a form (Event Venue): headings become small labels so the text is about as tall as the form. */
.prose--compact { font-size: 0.9375rem; line-height: 1.55; }
.prose--compact > * + * { margin-top: 0.5em; }
.prose--compact h2, .prose--compact h3 {
  margin-top: 1.5em; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
}
.prose--compact h2 + h2, .prose--compact h3 + h3 { margin-top: 1em; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 28px;
  font-weight: 400; font-size: 0.9375rem; letter-spacing: 0.02em; white-space: nowrap;
  border: 1px solid var(--ink); background: transparent; cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.15s var(--ease), opacity 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }
.btn--ghost { border-color: transparent; padding-inline: 4px; }
.btn--ghost i { transition: transform 0.3s var(--ease); }
.btn--ghost:hover i { transform: translateX(4px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.5; cursor: progress; }
.btn[disabled] { cursor: not-allowed; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 400;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: border-color 0.25s var(--ease);
}
.link-arrow:hover { border-color: var(--ink); }

.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line); font-size: 1.25rem; cursor: pointer;
  transition: border-color 0.25s var(--ease), opacity 0.25s;
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn:active { transform: scale(0.97); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.icon-btn--bare { border-color: transparent; }

/* ---------- Navigation (z-index scale: nav 20, lightbox 50, skip 100) ---------- */
.nav-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid transparent; }
.nav.is-stuck { border-color: var(--line); }
.nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark { width: auto; height: 36px; }
.brand__word { width: auto; height: 34px; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); font-size: 0.9375rem; font-weight: 400; }
.nav__item { position: relative; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  background: none; border: 0; padding: 8px 0; cursor: pointer; font-weight: 400; font-size: 0.9375rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__link i { font-size: 0.875rem; transition: transform 0.2s var(--ease); }
.nav__link[aria-expanded="true"] i { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: -20px; min-width: 200px;
  background: var(--bg); border: 1px solid var(--line); padding: 8px 0;
}
.nav__menu a { display: block; padding: 10px 20px; white-space: nowrap; }
.nav__menu a:hover, .nav__menu a:focus-visible { background: var(--surface); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__toggle { display: none; }
.nav__account { margin-right: 8px; }

.mobile-menu { border-top: 1px solid var(--line); background: var(--bg); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; }
.mobile-menu nav { display: grid; padding-block: 8px 24px; }
.mobile-menu a { padding: 12px 0; font-size: 1.25rem; }
.mobile-menu .mobile-menu__sub { padding-left: 16px; font-size: 1.0625rem; color: var(--ink-soft); }

@media (max-width: 1023px) {
  .nav__links, .nav__account { display: none; }
  .nav__toggle { display: inline-grid; }
}

/* ---------- Messages ---------- */
.messages { display: grid; gap: 8px; margin-top: 16px; }
.message { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line-strong); background: var(--surface); }
.message--success { border-color: var(--success); }
.message--error { border-color: var(--error); }
.message i { font-size: 1.25rem; margin-top: 1px; }

/* ---------- Page header ---------- */
.page-head { padding-block: clamp(40px, 7vw, 96px) clamp(32px, 4vw, 56px); display: grid; gap: 16px; }
.breadcrumb { font-size: 0.875rem; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--ink); }
.section { padding-block: clamp(72px, 10vw, 140px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }

/* ---------- Image helpers ---------- */
.img-frame { position: relative; overflow: hidden; background: var(--placeholder); }
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.img-frame--contain { background: transparent; }
.img-frame--contain img { object-fit: contain; }
a:hover > .img-frame img, a:focus-visible > .img-frame img { transform: scale(1.03); }
.img-placeholder {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 160px;
  background: var(--placeholder); color: var(--ink-faint); font-size: 2rem;
}

/* ---------- Home: hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px); align-items: center;
  min-height: min(calc(100dvh - var(--nav-h)), 980px); padding-block: 32px 64px;
}
.hero__copy { display: grid; gap: 24px; align-content: center; }
.hero__sub { max-width: 42ch; font-size: 1.125rem; color: var(--ink-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.hero__media { justify-self: end; width: 100%; max-width: 640px; }
.hero__media img { width: 100%; max-height: min(calc(100dvh - var(--nav-h) - 96px), 860px); object-fit: contain; object-position: right center; }
@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-block: 24px 56px; gap: 32px; }
  .hero__media { justify-self: stretch; max-width: none; }
  .hero__media img { max-height: 70dvh; object-position: center; }
}

/* ---------- Home: artists rail ---------- */
.rail-controls { display: flex; gap: 8px; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 26vw, 380px);
  gap: clamp(16px, 2vw, 32px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-bottom: 8px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; }
@media (max-width: 767px) { .rail { grid-auto-columns: 78vw; } .rail-controls { display: none; } }

/* ---------- Cards ---------- */
.card { display: grid; gap: 4px; align-content: start; }
.card .img-frame { aspect-ratio: 4 / 5; margin-bottom: 14px; }
.card__title { font-size: 1.125rem; font-weight: 400; line-height: 1.3; }
.card__meta { color: var(--ink-soft); font-size: 0.9375rem; }
.card__date { color: var(--ink-faint); font-size: 0.875rem; }

/* ---------- Home: past exhibitions (1 feature + 4) ---------- */
.program-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px clamp(16px, 2vw, 32px); }
.program-grid .card .img-frame { aspect-ratio: 4 / 3; }
.program-grid > :first-child { grid-row: span 2; }
.program-grid > :first-child a { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 4px; }
.program-grid > :first-child .img-frame { aspect-ratio: auto; height: 100%; min-height: 420px; }
.program-grid > :first-child .card__title { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; }
@media (max-width: 1023px) {
  .program-grid { grid-template-columns: 1fr 1fr; }
  .program-grid > :first-child { grid-column: 1 / -1; grid-row: auto; }
  .program-grid > :first-child .img-frame { aspect-ratio: 16 / 10; min-height: 0; height: auto; }
}
@media (max-width: 599px) { .program-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Visit band ---------- */
.visit { background: var(--surface); padding-block: clamp(72px, 10vw, 140px); }
.visit__title { font-size: clamp(2.25rem, 6vw, 5rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; margin-bottom: clamp(40px, 6vw, 80px); }
.info-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.info-cols > div { display: grid; gap: 12px; align-content: start; justify-items: start; }
.info-label { font-size: 0.9375rem; font-weight: 500; }
.info-cols p { color: var(--ink-soft); font-size: 1.0625rem; }
.info-cols a:not(.link-arrow):hover { color: var(--ink); }
@media (max-width: 767px) { .info-cols { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Newsletter ---------- */
.news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); }
.news__intro { display: grid; gap: 16px; align-content: start; }
@media (max-width: 767px) { .news { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form--single { grid-template-columns: 1fr; }
.field { display: grid; gap: 8px; align-content: start; }
.field--full, .form .check, .form__foot, .form__errors { grid-column: 1 / -1; }
.field label, .field .label { font-size: 0.9375rem; font-weight: 400; }
.field input, .field textarea, .field select {
  font: inherit; font-weight: 300; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-soft); border-radius: 0;
  padding: 10px 0; min-height: 44px; width: 100%;
}
.field textarea { resize: vertical; min-height: 140px; border: 1px solid var(--ink-soft); padding: 12px; }
.field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field select option { background: var(--bg); color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field textarea:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--error); }
.field__help { font-size: 0.875rem; color: var(--ink-soft); }
.field__error { font-size: 0.875rem; color: var(--error); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); flex-shrink: 0; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.form__status { font-size: 0.9375rem; }
.form__status--error { color: var(--error); }
.form__errors { color: var(--error); font-size: 0.9375rem; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-top: 72px; font-size: 0.9375rem; margin-top: auto; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand { display: grid; gap: 20px; align-content: start; color: var(--ink-soft); }
.footer__brand img { height: 56px; width: auto; }
.footer__label { font-size: 0.9375rem; font-weight: 500; margin-bottom: 16px; }
.footer ul { display: grid; gap: 10px; }
.footer ul a { color: var(--ink-soft); }
.footer ul a:hover { color: var(--ink); }
.footer__social { grid-auto-flow: column; justify-content: start; gap: 16px !important; font-size: 1.5rem; }
.footer__base { padding-block: 56px 32px; color: var(--ink-soft); font-size: 0.875rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 479px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Artists index ---------- */
.tabs { display: flex; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.tabs a { padding: 12px 0; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--ink-soft); font-weight: 400; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.artist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px clamp(16px, 2vw, 32px); }
@media (max-width: 1023px) { .artist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } }

/* ---------- Artist profile ---------- */
.profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.profile__media .img-frame { aspect-ratio: auto; background: transparent; }
.profile__media img { width: 100%; height: auto; max-height: 80dvh; object-fit: contain; object-position: left top; }
@media (max-width: 767px) { .profile { grid-template-columns: 1fr; } }

/* ---------- Artworks: proportional grid (columns keep each work's own ratio) ---------- */
/* Artwork grid: every card has the same frame, the whole work is shown (never cropped),
   and the text and buttons line up across each row. */
.works {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(40px, 4vw, 56px) clamp(16px, 2vw, 32px); list-style: none; padding: 0; margin: 0;
}
.works > li { display: flex; flex-direction: column; min-width: 0; }
.work { display: flex; flex-direction: column; gap: 4px; }
.work .img-frame, .work.zoom .img-frame, .work > .zoom.img-frame {
  aspect-ratio: 4 / 5; width: 100%; margin-bottom: 14px;
  background: var(--surface); padding: clamp(14px, 1.6vw, 24px);
  display: grid; place-items: center; grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* tall pictures fit whole, never cut */
}
.work .img-frame img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.work .img-frame .img-placeholder { width: 100%; height: 100%; aspect-ratio: auto; }
a.work:hover .img-frame img, a.work:focus-visible .img-frame img { transform: scale(1.02); }
/* Exhibition page: one row per artist, four cards across, the rest reached by scrolling sideways. */
.works-row + .works-row { margin-top: clamp(48px, 6vw, 80px); }
.works-row__name { margin: 0 0 20px; font-size: 1rem; font-weight: 400; }
.works-row__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.works.works--row {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * clamp(16px, 2vw, 32px)) / 4);
  overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  scrollbar-width: none; /* no grey browser bar: the arrows next to the artist's name move the row */
}
.works.works--row::-webkit-scrollbar { display: none; }
.works-row__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.works-row__head .works-row__name { margin: 0; }
.works-row__nav { display: flex; gap: 8px; }
.works-row__nav[hidden] { display: none; }
.works--row > li { scroll-snap-align: start; }
.works--row:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
@media (max-width: 1024px) { .works.works--row { grid-auto-columns: calc((100% - clamp(16px, 2vw, 32px)) / 2.3); } }
.work__artist { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work__title {
  color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.work__title em { font-style: italic; }
.work__status { font-size: 0.875rem; color: var(--ink-faint); }
.work-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.work-cta .btn { min-height: 40px; padding: 0 20px; font-size: 0.875rem; }
.work__price { font-weight: 400; }
.notice { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 32px; border: 1px solid var(--line-strong); background: var(--surface); }
.notice p { color: var(--ink-soft); }

/* ---------- Filters ---------- */
.filters { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 16px 24px; align-items: end; margin-bottom: 32px; }
.filters .field input, .filters .field select { min-height: 40px; }
.filters__meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 32px; color: var(--ink-soft); font-size: 0.9375rem; min-height: 24px; }
.filters__meta a { border-bottom: 1px solid var(--line-strong); }
.results[aria-busy="true"] { opacity: 0.45; transition: opacity 0.2s; }
@media (max-width: 1023px) { .filters { grid-template-columns: 1fr 1fr; } .filters .field:first-child { grid-column: 1 / -1; } }

.empty { display: grid; justify-items: start; gap: 16px; padding: 48px 0; color: var(--ink-soft); }
.empty i { font-size: 2rem; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 56px; }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); }
.pagination a:hover { border-color: var(--ink); }
.pagination [aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pagination .is-disabled { opacity: 0.35; }

/* ---------- Artwork detail ---------- */
.artwork { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: start; padding-block: 32px 96px; }
.artwork__gallery { display: grid; gap: 16px; }
.artwork__main { display: grid; place-items: center; background: var(--surface); min-height: 320px; padding: clamp(16px, 4vw, 48px); }
.artwork__main img { max-height: 76dvh; width: auto; object-fit: contain; }
.zoom { display: block; position: relative; cursor: zoom-in; background: none; border: 0; padding: 0; }
.zoom__hint { position: absolute; right: 12px; bottom: 12px; display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--bg); color: var(--ink); opacity: 0; transition: opacity 0.2s; }
.zoom:hover .zoom__hint, .zoom:focus-visible .zoom__hint { opacity: 1; }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs button { width: 80px; height: 80px; padding: 0; border: 1px solid transparent; background: var(--surface); cursor: pointer; }
.thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.artwork__info { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 24px; }
.artwork__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 200; line-height: 1.15; letter-spacing: -0.02em; }
.artwork__title em { font-style: italic; }
.specs { display: grid; gap: 4px; color: var(--ink-soft); }
.specs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; }
.details { border-top: 1px solid var(--line); }
.details details { border-bottom: 1px solid var(--line); }
.details summary { cursor: pointer; padding: 16px 0; font-weight: 400; list-style: none; display: flex; justify-content: space-between; }
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: "+"; font-weight: 300; }
.details details[open] summary::after { content: "-"; }
.details details > div { padding-bottom: 16px; color: var(--ink-soft); }
@media (max-width: 1023px) { .artwork { grid-template-columns: 1fr; } .artwork__info { position: static; } }

/* ---------- Lightbox ---------- */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--overlay); color: var(--ink); }
.lightbox::backdrop { background: var(--overlay); }
.lightbox__inner { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); gap: 16px; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; padding: 0 clamp(56px, 6vw, 96px); }
.lightbox__stage img { max-width: 100%; max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
.lightbox__caption { padding: 12px var(--gutter) 20px; text-align: center; color: var(--ink-soft); font-size: 0.9375rem; min-height: 52px; }

/* ---------- Exhibitions ---------- */
.ex-current { display: grid; gap: 64px; }
.ex-feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.ex-feature .img-frame { aspect-ratio: 4 / 3; }
.ex-feature__body { display: grid; gap: 16px; justify-items: start; }
@media (max-width: 767px) { .ex-feature { grid-template-columns: 1fr; } }
.ex-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(16px, 2vw, 32px); }
.ex-grid .card .img-frame { aspect-ratio: 4 / 3; }
@media (max-width: 1023px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ex-grid { grid-template-columns: 1fr; } }
.badge { display: inline-block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-strong); padding: 2px 8px; color: var(--ink-soft); }

.ex-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: 32px 72px; }
.ex-hero__media img { width: 100%; max-height: 80dvh; object-fit: contain; object-position: right top; }
.facts { display: grid; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; }
.facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; }
.facts dt { color: var(--ink-soft); }
@media (max-width: 767px) { .ex-hero { grid-template-columns: 1fr; } .ex-hero__media { order: -1; } .ex-hero__media img { object-position: center; } }
.install { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 32px); }
.install > :nth-child(3n + 1) { grid-column: span 12; }
.install > :nth-child(3n + 2), .install > :nth-child(3n + 3) { grid-column: span 6; }
.install > :last-child:nth-child(3n + 2) { grid-column: span 12; }
.install .zoom img { width: 100%; height: auto; }
@media (max-width: 599px) { .install > * { grid-column: span 12 !important; } }

/* ---------- Viewing room ---------- */

/* ---------- Press ---------- */
.press-list { display: grid; }
.press-item { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 24px; padding-block: 28px; border-top: 1px solid var(--line); align-items: start; }
.press-item:last-child { border-bottom: 1px solid var(--line); }
.press-item .img-frame { aspect-ratio: 4 / 3; }
@media (max-width: 599px) { .press-item { grid-template-columns: 1fr; } }

/* ---------- Store ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(16px, 2vw, 32px); }
.product-grid .img-frame { aspect-ratio: 1; background: var(--surface); }
.product-grid .img-frame img { object-fit: contain; padding: 12px; }
@media (max-width: 1023px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }
.price { font-size: 1.125rem; font-weight: 400; }

/* ---------- Buying ---------- */
.buy { display: grid; gap: 16px; }
.variant-list { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.variant-list legend { margin-bottom: 8px; font-size: 0.9375rem; font-weight: 400; }
.variant { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); cursor: pointer; }
.variant:has(input:checked) { border-color: var(--ink); }
.variant input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.variant.is-out { color: var(--ink-faint); cursor: not-allowed; }
.variant__price { font-weight: 400; white-space: nowrap; }
.buy__row { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; }
.qty { width: 96px; }
.cart-link { position: relative; }
.cart-link .cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-size: 0.6875rem; font-weight: 500; }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; font-weight: 400; font-size: 0.875rem; color: var(--ink-soft); padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 20px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table td + td, .cart-table th + th { padding-left: 16px; }
.cart-item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; }
.cart-item .img-frame { aspect-ratio: 1; background: var(--surface); }
.cart-item .img-frame img { object-fit: contain; }
.cart-table .num { text-align: right; white-space: nowrap; }
.cart-table input[type=number] { width: 64px; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-soft); padding: 6px 0; }
.summary { display: grid; gap: 20px; align-content: start; padding: 28px; background: var(--surface); }
.summary__row { display: flex; justify-content: space-between; gap: 16px; }
.summary__total { font-size: 1.25rem; font-weight: 400; border-top: 1px solid var(--line-strong); padding-top: 16px; }
.ship-option { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ship-option input { accent-color: var(--ink); margin-top: 4px; }
.ship-option small { display: block; color: var(--ink-soft); }
.cart-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: clamp(72px, 10vw, 140px); }
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } .cart-table .hide-sm { display: none; } }

/* ---------- Split layout for form pages ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; padding-bottom: clamp(72px, 10vw, 140px); }
.split__aside { display: grid; gap: 24px; align-content: start; }
@media (max-width: 767px) { .split { grid-template-columns: 1fr; } }
.inquiry-item { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 16px; background: var(--surface); }
.inquiry-item .img-frame { aspect-ratio: 1; background: transparent; }
.inquiry-item .img-frame img { object-fit: contain; }

/* ---------- Error pages ---------- */
.error-page { display: grid; gap: 24px; justify-items: start; padding-block: clamp(80px, 14vw, 180px); }

/* ---------- Motion: short reveals, disabled for reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .js [data-enter] { opacity: 0; transform: translateY(14px); animation: enter 0.8s var(--ease) forwards; }
  .js [data-enter]:nth-child(2) { animation-delay: 0.08s; }
  .js [data-enter]:nth-child(3) { animation-delay: 0.16s; }
  .js [data-enter]:nth-child(4) { animation-delay: 0.24s; }
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes enter { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Saves, lists, follow ---------- */
.work-item { position: relative; }
.work-item > .save { position: absolute; top: 4px; right: 4px; z-index: 2; }
.work-item > .save .save__btn { background: transparent; }
.save { display: inline-flex; }
.save__btn {
  display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; justify-content: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid transparent; color: var(--ink);
  cursor: pointer; transition: border-color 0.25s var(--ease), transform 0.2s var(--ease);
}
.save__btn:hover { border-color: var(--line-strong); }
.save__btn:active { transform: scale(0.94); }
.save__btn svg path { fill: none; stroke: currentColor; stroke-width: 16; stroke-linejoin: round; transition: fill 0.2s var(--ease); }
.save__btn[aria-pressed="true"] svg path { fill: currentColor; }
.save--labelled .save__btn { border-color: var(--line); padding: 0 20px; background: transparent; }
.save--labelled .save__btn:hover { border-color: var(--ink); }
.artwork__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.add-to-list { margin-top: 16px; }
.add-to-list summary { cursor: pointer; font-size: 0.9375rem; color: var(--ink-soft); }
.add-to-list__form, .inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
.add-to-list__form select, .add-to-list__form input, .inline-form input {
  flex: 1 1 220px; min-height: 44px; font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); padding: 8px 0;
}
.add-to-list__form select:focus, .add-to-list__form input:focus, .inline-form input:focus { outline: none; border-color: var(--ink); }
.section-bar { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.list-rows { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--line); }
.list-rows li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }
.share-box { max-width: 640px; border-top: 1px solid var(--line); padding-top: 24px; }
.share-box p { margin: 8px 0 16px; }
.follow { margin-top: 20px; }
.follow .btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .save__btn, .save__btn svg path { transition: none; } }

/* ---------- Homepage stage: full-screen exhibition slides ---------- */
/* Each slide sticks under the menu while the next one scrolls over it. Text sits on the image,
   so slides use fixed light-on-image colours in both themes. */
.stage { position: relative; }
.slide {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h)); min-height: 520px;
  display: grid; align-items: end; overflow: hidden; isolation: isolate;
  color: #f3f2ee; background: #1b1a18;
}
.slide__media { position: absolute; inset: 0; z-index: -1; }
.slide__img { width: 100%; height: 100%; object-fit: cover; }
.slide__img--top { object-position: center top; }
.slide__img--bottom { object-position: center bottom; }
.slide__img--left { object-position: left center; }
.slide__img--right { object-position: right center; }
.slide__fill { display: block; width: 100%; height: 100%; background: #1b1a18; }
.slide__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(14 14 13 / 0.82) 0%, rgb(14 14 13 / 0.5) 34%, rgb(14 14 13 / 0) 66%);
}
.slide__copy { text-shadow: 0 1px 12px rgb(14 14 13 / 0.35); }
.slide__copy { display: grid; gap: 14px; justify-items: start; padding-block: 0 clamp(40px, 7vh, 80px); }
.slide__meta { font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: #f3f2ee; }
.slide__title {
  font-size: clamp(2.25rem, 5.2vw, 4.5rem); line-height: 1.02; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.01em; max-width: 18ch; text-wrap: balance;
}
.slide__title a { color: inherit; }
.slide__names { font-size: clamp(1rem, 1.4vw, 1.25rem); text-transform: uppercase; letter-spacing: 0.04em; }
.slide__ctas { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 10px; }
.btn--light { border-color: #f3f2ee; color: #f3f2ee; background: transparent; }
.btn--light:hover { background: #f3f2ee; color: #1b1a18; }
.btn--light-ghost { border-color: transparent; color: #f3f2ee; padding-inline: 4px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.btn--light-ghost:hover { text-decoration-thickness: 2px; }
.slide a:focus-visible, .slide .btn:focus-visible { outline: 2px solid #f3f2ee; outline-offset: 4px; }
@media (max-width: 767px) {
  .slide { height: calc(100svh - var(--nav-h)); min-height: 480px; }
  .slide__media::after { background: linear-gradient(to top, rgb(14 14 13 / 0.78) 0%, rgb(14 14 13 / 0.3) 50%, rgb(14 14 13 / 0) 75%); }
}
/* The last slide must not stay pinned over the sections that follow. */
.slide:last-child { position: relative; top: 0; }

/* ---------- Menu bar: always ruled, small uppercase labels ---------- */
.nav { border-bottom-color: var(--line); }
.nav__links .nav__link, .nav__account { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* Compact bar across the full width: logo on the left, the menu pushed right next to the icons. */
.nav__inner.wrap { max-width: none; padding-inline: clamp(16px, 2.6vw, 40px); gap: 16px; }
.nav .brand__mark { height: 28px; }
.nav .brand__word { height: 26px; }
.nav__links { margin-left: auto; gap: clamp(14px, 1.8vw, 28px); }
.nav__actions { gap: 2px; }
.nav__actions .icon-btn { width: 36px; height: 36px; }
.nav__actions .icon-btn i { font-size: 1.125rem; }
.nav__menu { top: calc(100% + 12px); }
@media (max-width: 599px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .works.works--row { grid-template-columns: none; grid-auto-columns: 44%; }
  .work .img-frame { padding: 10px; margin-bottom: 10px; }
  .work__artist, .work__title { font-size: 0.875rem; }
  .work-cta { flex-wrap: wrap; gap: 6px; }
  .work-cta .btn { min-height: 36px; padding: 0 14px; font-size: 0.8125rem; }
  .work-item > .save { top: 0; right: 0; }
}

/* ---------- Shop: steps, checkout, add-to-cart toast ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; padding: 0; margin: 0; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step) "  "; }
.steps li[aria-current="step"] { color: var(--ink); }
.steps a { color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.checkout-main { display: grid; gap: 40px; }
.checkout-block { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; min-width: 0; }
.checkout-block legend { margin-bottom: 16px; padding: 0; }
.checkout-summary { position: sticky; top: calc(var(--nav-h) + 24px); }
.summary__cta { width: 100%; justify-content: center; gap: 8px; }
.order-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.order-lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: start; font-size: 0.9375rem; }
.order-lines .img-frame { width: 56px; aspect-ratio: 1; background: var(--bg); padding: 4px; }
.order-lines .img-frame img { object-fit: contain; }
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
}
.product-grid > li { display: flex; flex-direction: column; }
.product-buy { margin-top: auto; padding-top: 12px; }
.product-buy .btn { min-height: 40px; padding: 0 18px; font-size: 0.875rem; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  display: flex; gap: 20px; align-items: center; padding: 14px 20px; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--bg); font-size: 0.9375rem;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.toast .link-arrow { color: inherit; border-color: currentColor; white-space: nowrap; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- Viewing room (Artsy-style): framed split opening, quiet tabs, narrow statement column ---------- */
.vr { --vr-col: 680px; --vr-frame: #ececea; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
:root[data-theme="dark"] .vr { --vr-frame: var(--surface); }
.vr-head { display: grid; grid-template-columns: 1fr 1fr; height: clamp(420px, calc(100svh - var(--nav-h) - 72px), 760px); margin-top: clamp(8px, 1.5vw, 20px); }
.vr-head__media { position: relative; overflow: hidden; background: var(--surface); }
.vr-head__media img, .vr-head__media .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vr-head__copy { position: relative; display: grid; place-items: center; padding: clamp(32px, 5vw, 80px); border: 1px solid var(--line); border-left: 0; }
.vr-head__center { display: grid; gap: 12px; text-align: center; }
.vr-head__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.vr-head__artist { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 300; color: var(--ink-soft); }
.vr-head__venue { position: absolute; left: 20px; bottom: 16px; right: 20px; font-size: 0.8125rem; color: var(--ink); }

.vr-tabs {
  position: sticky; top: var(--nav-h); z-index: 10; display: grid; grid-template-columns: 1fr 1fr;
  margin-top: clamp(16px, 2.5vw, 32px); background: var(--bg); border-bottom: 1px solid var(--line);
}
.vr-tabs button {
  position: relative; min-height: 52px; background: none; border: 0; cursor: pointer; color: var(--ink-faint);
  font: inherit; font-size: 0.875rem; transition: color 0.2s var(--ease);
}
.vr-tabs button:hover { color: var(--ink); }
.vr-tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink);
  transform: scaleX(0); transition: transform 0.35s var(--ease);
}
.vr-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.vr-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.vr-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

.vr-panel { padding-block: clamp(32px, 4vw, 48px) clamp(72px, 10vw, 140px); scroll-margin-top: calc(var(--nav-h) + 52px); }
.vr-panel:focus { outline: none; }
.vr-col { max-width: var(--vr-col); margin-inline: auto; }
.vr-prose { max-width: none; font-size: 0.9375rem; line-height: 1.65; }
.vr-prose p { color: var(--ink); }
/* A quote in the statement becomes the large pull quote */
.vr-prose blockquote, .vr-prose h2 {
  margin: 0 0 1.25em; padding: 0; border: 0; font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.25;
  font-weight: 400; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty;
}
.vr-prose blockquote p { color: inherit; }
.vr-prose blockquote + *, .vr-prose h2 + * { margin-top: 0; }
.vr-prose > blockquote:not(:first-child), .vr-prose > h2:not(:first-child) { margin-top: 1.75em; }
.vr-rule { margin: clamp(32px, 4vw, 44px) 0; border: 0; border-top: 1px solid var(--line); }

.vr-show { margin-top: clamp(28px, 3vw, 36px); }
.vr-show__stage { display: grid; }
.vr-show__slide { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 0.7s var(--ease); }
.vr-show__slide.is-on { opacity: 1; }
.vr-show__media { aspect-ratio: 4 / 3; --pad: 8%; }
.vr-show__bar { position: relative; height: 2px; margin-top: 14px; background: var(--line); overflow: hidden; }
.vr-show__bar span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.vr-show__controls { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.vr-show__count { margin: 0 8px; font-size: 0.8125rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.vr-show__btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: var(--ink); cursor: pointer; font-size: 1.0625rem; }
.vr-show__btn:hover { background: var(--surface); }
.vr-show__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.vr-show__pause { margin-left: auto; }
.vr-cta { margin-top: clamp(24px, 3vw, 32px); }
.vr-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 200px; padding: 0 28px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); font-size: 0.8125rem;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.vr-btn:hover { background: transparent; color: var(--ink); }
.vr-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.vr-statement__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); }

.vr-grid {
  list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 64px) clamp(12px, 2vw, 24px); max-width: 1040px; align-items: start;
}
.vr-grid .vr-item__media { aspect-ratio: 1 / 1; }
/* Each work sits on a pale wall, shown whole with breathing room */
.vr-item__media {
  --pad: 12%; position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: var(--vr-frame); cursor: zoom-in; overflow: hidden;
}
.vr-item__media img { position: absolute; inset: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); object-fit: contain; transition: transform 0.5s var(--ease); }
.vr-item__media:hover img { transform: scale(1.015); }
.vr-item__media .img-placeholder { position: absolute; inset: 0; }
.vr-item__caption { margin-top: 10px; display: grid; gap: 1px; font-size: 0.8125rem; line-height: 1.45; }
.vr-item__caption p { color: var(--ink-faint); }
.vr-item__caption .vr-item__artist { color: var(--ink); font-weight: 500; }
.vr-item__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.vr-item__status a { color: var(--ink-faint); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.vr-item__status a:hover { color: var(--ink); text-decoration-color: currentColor; }
.vr-item__price { color: var(--ink); }
/* Statement blocks (Artsy-style room): featured works, large quote, pictures, "View works" */
.vr-block { margin-top: 1.5em; }
.vr-feature { list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.vr-feature--one { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.vr-feature .vr-item__media { aspect-ratio: 4 / 5; }
.vr-quote {
  margin: clamp(48px, 7vw, 88px) 0; padding: clamp(32px, 4vw, 48px) 0 0; border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.22; font-weight: 300; text-wrap: balance; color: var(--ink);
}
.vr-figure { margin: clamp(40px, 5vw, 64px) 0 0; }
.vr-figure img { width: 100%; height: auto; display: block; }
.vr-figure figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--ink-soft); }
.vr-private { display: grid; gap: 4px; margin-top: 18px; font-size: 0.9375rem; text-align: center; }
.vr-private__label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.vr-private .vr-btn { margin-top: 14px; }
.vr-btn--outline { background: transparent; color: var(--ink); }
.vr-btn--outline:hover { background: var(--ink); color: var(--bg); }
.vr-cta--center { text-align: center; margin-top: clamp(40px, 5vw, 64px); }
.vr-closed { max-width: 640px; padding-block: clamp(72px, 12vw, 160px); display: grid; gap: 18px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot--sold { background: #c0392b; }
.dot--reserved { background: #d08a2e; }
@media (max-width: 767px) {
  .vr { padding-inline: 0; }
  .vr-head { grid-template-columns: 1fr; height: auto; margin-top: 0; }
  .vr-head__media { aspect-ratio: 4 / 5; }
  .vr-head__copy { min-height: 200px; padding: 40px 16px 56px; border: 0; border-bottom: 1px solid var(--line); }
  .vr-head__venue { left: 16px; }
  .vr-tabs { margin-top: 0; }
  .vr-panel { padding-inline: 16px; }
  .vr-grid { grid-template-columns: 1fr; }
  .vr-btn { width: 100%; }
  .vr-feature { grid-template-columns: 1fr; }
}

/* ---------- Artist index: names only, surname order, four columns ---------- */
.artist-index { max-width: 1240px; padding-block: clamp(40px, 6vw, 72px) clamp(72px, 10vw, 140px); display: grid; gap: clamp(64px, 9vw, 120px); }
.index-title { text-align: center; font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 300; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: clamp(32px, 4vw, 56px); }
.name-cols { list-style: none; padding: 0; margin: 0 auto; columns: 4; column-gap: clamp(24px, 4vw, 64px); max-width: 1200px; }
.name-cols li { break-inside: avoid; }
.name-cols a {
  display: inline-block; padding: 7px 0; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.02em;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: background-size 0.3s var(--ease);
}
.name-cols a:hover, .name-cols a:focus-visible { background-size: 100% 1px; }
@media (max-width: 1023px) { .name-cols { columns: 3; } }
@media (max-width: 599px) { .name-cols { columns: 2; column-gap: 20px; } .name-cols a { font-size: 0.875rem; } }
@media (prefers-reduced-motion: reduce) { .name-cols a { transition: none; } }

/* ---------- Artist page ---------- */
.artist-page { padding-bottom: clamp(72px, 10vw, 140px); }
.artist-head { display: grid; justify-items: center; gap: 10px; text-align: center; padding-block: clamp(32px, 5vw, 56px) clamp(32px, 4vw, 56px); }
.artist-head .index-title { margin-bottom: 0; font-size: clamp(2rem, 3.4vw, 3rem); }
.artist-head__life { font-size: 0.9375rem; color: var(--ink-soft); }
.artist-head__rep { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.artist-profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.artist-profile__media { margin: 0; }
.artist-profile__media .zoom { display: block; width: 100%; }
.artist-profile__media img { width: 100%; height: auto; }
.credit { margin-top: 10px; font-size: 0.75rem; color: var(--ink-faint); }
.artist-profile__text { display: grid; gap: 32px; align-content: start; }
.doc-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.doc {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px;
  border: 1px solid var(--line); font-size: 0.9375rem; transition: border-color 0.25s var(--ease);
}
a.doc:hover { border-color: var(--ink); }
.doc i { font-size: 1.25rem; }
.doc small { display: block; font-size: 0.75rem; color: var(--ink-soft); }
.doc--locked { color: var(--ink-soft); }
.artist-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.artist-actions .btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.video { border: 1px solid var(--line); }
.video__play { display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px; background: var(--surface); border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.video__play i { font-size: 2.5rem; }
.video__play small { display: block; font-size: 0.8125rem; color: var(--ink-soft); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.artist-section { padding-top: clamp(72px, 10vw, 128px); }
.section-more { margin-top: 40px; text-align: center; }
.cv-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); } /* edge to edge, like the titles on the left */
.cv-list li { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.cv-list li span:first-child { color: var(--ink-soft); }
.cv-list--plain li { grid-template-columns: 1fr; }
.cv-list--press li { grid-template-columns: 72px minmax(0, 2fr) minmax(0, 1fr); align-items: center; }
.cv-list--press li span:nth-child(3) { text-align: right; color: var(--ink-soft); }
.cv-list--plain li span:first-child { color: var(--ink); }
.cv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(40px, 6vw, 96px); }
.cv-cols .h3 { margin-bottom: 20px; text-transform: uppercase; }
.cv-cols .cv-list { max-width: none; }
.cv-cols .cv-list li { grid-template-columns: 72px minmax(0, 1fr); }
.cv-cols .cv-list--plain li { grid-template-columns: 1fr; }
@media (max-width: 767px) {
  .artist-profile { grid-template-columns: 1fr; }
  .cv-list li { grid-template-columns: 56px minmax(0, 1fr); }
  .cv-list li span:nth-child(3) { grid-column: 2; color: var(--ink-soft); text-align: left; }
}

/* ---------- Account and security pages (django-allauth) ---------- */
.auth-page { max-width: 640px; padding-block: clamp(40px, 6vw, 80px) clamp(72px, 10vw, 140px); display: grid; gap: 20px; align-content: start; }
.auth-page--manage { max-width: 760px; }
.auth-title { margin-bottom: 8px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.auth-subtitle { margin-top: 16px; }
.auth-text { color: var(--ink-soft); }
.auth-form { margin-top: 8px; }
.auth-stack { display: grid; gap: 20px; align-content: start; }
.auth-buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.auth-providers { display: grid; gap: 12px; }
.auth-provider .btn { width: 100%; justify-content: center; gap: 10px; }
.auth-or { display: flex; align-items: center; gap: 16px; color: var(--ink-faint); font-size: 0.875rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-rule { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.auth-panel { border: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); display: grid; gap: 14px; }
.auth-panel + .auth-panel { margin-top: 4px; }
.auth-page img { max-width: 220px; height: auto; background: #fff; padding: 12px; }
.auth-page pre, .auth-page code { font-size: 0.9375rem; background: var(--surface); padding: 2px 6px; }
.auth-page ul { padding-left: 1.2em; }
.auth-table td, .auth-table th { padding: 10px 8px; }
#passkey_login { justify-content: center; gap: 10px; }

/* ---------- Staff preview of unpublished content ---------- */
.preview-banner { background: var(--ink); color: var(--bg); font-size: 0.875rem; padding-block: 10px; }
.preview-banner strong { font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; margin-right: 12px; }

/* Customer account: avatar, menu, orders, timeline, addresses */
.avatar { display: inline-block; border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle; background: var(--surface); }
.avatar--initials { display: inline-grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 400; letter-spacing: 0.04em; line-height: 1; }
@media (min-width: 1024px) { .nav__account { display: inline-flex; align-items: center; gap: 8px; } }
.account-page { padding-bottom: clamp(72px, 10vw, 140px); }
.account-head { display: flex; align-items: center; gap: 20px; }
.account-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0 0 40px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.account-nav a { color: var(--ink-soft); padding: 4px 0; }
.account-nav a:hover, .account-nav a[aria-current="page"] { color: var(--ink); }
.account-nav a[aria-current="page"] { box-shadow: 0 1px 0 0 var(--ink); }
.account-block { margin-top: clamp(40px, 6vw, 72px); max-width: 720px; }
.order-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.order-row { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto auto; gap: 8px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.order-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.order-row__main { display: grid; gap: 2px; }
@media (max-width: 767px) { .order-row { grid-template-columns: 1fr auto; } .order-row__items { grid-column: 1 / -1; order: 3; } }
.timeline { list-style: none; margin: 8px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; counter-reset: step; }
.timeline__step { position: relative; display: grid; gap: 4px; padding-top: 22px; color: var(--ink-soft); }
.timeline__step::before { content: ""; position: absolute; top: 6px; left: 0; right: -16px; height: 1px; background: var(--line-strong); }
.timeline__step:last-child::before { right: 0; }
.timeline__dot { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); }
.timeline__step.is-done { color: var(--ink); }
.timeline__step.is-done .timeline__dot { background: var(--ink); border-color: var(--ink); }
.timeline__step.is-done::before { background: var(--ink); }
.timeline__step.is-current { color: var(--ink); }
.timeline__step.is-current .timeline__dot { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 7px var(--ink); }
@media (max-width: 767px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .timeline__step { padding: 0 0 20px 28px; }
  .timeline__step::before { top: 13px; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
  .timeline__step:last-child::before { display: none; }
}
.tracking { margin: -16px 0 40px; }
.order-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 899px) { .order-grid { grid-template-columns: 1fr; } }
.avatar-current { margin: 8px 0 20px; }
.avatar-form fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.avatar-presets { display: flex; flex-wrap: wrap; gap: 12px; }
.avatar-presets legend { margin-bottom: 8px; }
.avatar-preset { position: relative; cursor: pointer; }
.avatar-preset input { position: absolute; opacity: 0; }
.avatar-preset img { display: block; border-radius: 50%; border: 1px solid var(--line); }
.avatar-preset input:checked + img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.avatar-preset input:focus-visible + img { outline: 2px solid var(--ink); outline-offset: 4px; }
.address-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.address-card { display: grid; gap: 12px; align-content: start; padding: 20px; border: 1px solid var(--line); }
.address-card p { margin: 0; }
.address-card__actions { display: flex; gap: 20px; align-items: center; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-button:hover { color: var(--ink); }
.print-only { display: none; }
@media print {
  .nav, .footer, .no-print, .account-nav, .messages { display: none !important; }
  .print-only { display: block; }
  .timeline__step.is-done .timeline__dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.account-nav + .facts { border-top: 0; }

/* FAQ: native <details> accordion (keyboard and screen readers work without script) */
.faq-section { margin-top: clamp(48px, 7vw, 88px); }
.faq { border-bottom: 1px solid var(--line); }
.faq:first-of-type { border-top: 1px solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.prose .faq__title, .faq__title { margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--ink); transition: transform .2s ease; }
.faq__icon::after { transform: rotate(90deg); }
.faq[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 24px; max-width: 68ch; color: var(--ink-soft); }
.faq__a > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .faq__icon::before, .faq__icon::after { transition: none; } }

/* Selected works slideshow (artist pages) */
.slideshow { position: relative; }
.slideshow__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.slideshow__track::-webkit-scrollbar { display: none; }
.slideshow__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.sw-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; display: grid; gap: 16px; align-content: start; }
.sw-slide__media { height: clamp(300px, 64vh, 760px); display: flex; align-items: center; justify-content: center; }
.sw-slide__media a { display: contents; }
/* Installation views and venue photos open the image viewer (big zoom inside it). */
.sw-slide__zoom { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sw-slide__zoom img { max-width: 100%; max-height: 100%; }
.sw-slide__zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* Every picture is shown whole, never cropped: it grows until it touches the frame's width or height. */
.sw-slide__media picture { display: contents; }
.sw-slide__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Protected email: the markup holds the address reversed; bidi-override shows it the right way round
   and copying gives the reversed text. */
.mail-guard__text { unicode-bidi: bidi-override; direction: rtl; -webkit-user-select: none; user-select: none; }

.slideshow--fill .sw-slide__media { height: auto; aspect-ratio: 16 / 9; max-height: 760px; }
.slideshow--fill .sw-slide__media img { width: 100%; height: 100%; object-fit: contain; }
.sw-slide__caption { font-size: 0.9375rem; line-height: 1.5; max-width: 72ch; justify-self: center; text-align: center; }
.sw-slide__title { text-transform: uppercase; letter-spacing: 0.04em; }
a.sw-slide__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.sw-slide__meta { display: block; color: var(--ink-soft); font-size: 0.875rem; }
.slideshow__controls { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.slideshow__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: none; color: var(--ink); cursor: pointer; font-size: 1.125rem; }
.slideshow__btn:hover:not(:disabled) { border-color: var(--ink); }
.slideshow__btn:disabled { opacity: 0.35; cursor: default; }
.slideshow__btn:focus-visible, .slideshow__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.slideshow__dots { display: flex; flex-wrap: wrap; gap: 4px; }
.slideshow__dot { width: 24px; height: 24px; border: 0; background: none; cursor: pointer; position: relative; padding: 0; }
.slideshow__dot::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px solid var(--ink-soft); }
.slideshow__dot[aria-current="true"]::after { background: var(--ink); border-color: var(--ink); }
.slideshow__count { margin: 0 0 0 auto; font-size: 0.875rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.works-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: clamp(32px, 4vw, 56px); }
.works-head .index-title { margin-bottom: 0; }
@media (max-width: 767px) {
  .sw-slide__media { height: min(78vw, 60vh); }
  .slideshow__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) { .slideshow__track { scroll-behavior: auto; } }

/* Visit / venue block (event venue, exhibitions, events) */
.venue-info { margin-top: clamp(56px, 8vw, 96px); }
.venue-info__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.venue-info__info > p { margin: 0 0 16px; }
.venue-info__links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.venue-info__note { margin-top: 20px; }
.venue-info__note h3 { margin: 0 0 6px; }
.venue-info__map { margin: 0; }
.venue-info__map img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.venue-info__map a:hover img, .venue-info__map a:focus-visible img { border-color: var(--ink); }
.venue-info__map figcaption { margin-top: 6px; }
.venue-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 24px; }
.venue-photos .zoom img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.floor-plan { margin: 32px 0 0; max-width: 960px; }
.floor-plan img { width: 100%; height: auto; display: block; background: #fff; }
@media (max-width: 767px) { .venue-info__grid { grid-template-columns: 1fr; } }
.venue-info__label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; }

/* Exhibition page: text and images first, information and visit at the end */
.ex-head { display: grid; gap: 16px; padding: clamp(24px, 4vw, 48px) 0 clamp(32px, 5vw, 56px); }
/* Text wraps around the picture, as in a book: beside it first, then the full width underneath. */
/* Two steady columns: the text keeps one width from top to bottom, the picture stays in view beside it. */
.ex-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text media"; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ex-intro .ex-intro__text { grid-area: text; max-width: 68ch; }
.ex-intro--image-only { display: block; max-width: 960px; }
.ex-intro__media { grid-area: media; margin: 0; }
.ex-intro:not(.ex-intro--image-only) .ex-intro__media { position: sticky; top: calc(var(--nav-h) + 24px); }
.ex-intro__media img { width: 100%; height: auto; max-height: calc(100vh - var(--nav-h) - 48px); object-fit: contain; object-position: top; display: block; }
.ex-intro__text > :first-child { margin-top: 0; }
/* Information: one block per fact, side by side, label above a larger value. */
.ex-info { margin-top: clamp(64px, 9vw, 112px); }
.ex-info .index-title, .venue-info .index-title { text-align: left; } /* in line with the content below */
.ex-info .facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0;
  border-top: 0; padding-top: 0; border-block: 1px solid var(--line);
}
.ex-info .facts > div {
  display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px) clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--line);
}
.ex-info .facts > div:first-child { border-left: 0; padding-left: 0; }
.ex-info .facts dt { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.ex-info .facts dd { margin: 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); font-weight: 300; line-height: 1.45; }
.ex-info .facts dd.names { display: grid; gap: 8px; justify-items: start; font-size: 1rem; font-weight: 400; }
.ex-info .facts dd.names br { display: none; }
.ex-info .facts .link-arrow { font-size: 1rem; }
/* RSVP: a framed panel under the Information block, the opening date beside the form. */
.rsvp-panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start;
  margin-top: clamp(56px, 7vw, 96px); padding: clamp(28px, 4vw, 56px);
  background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px);
}
.rsvp-panel__aside { display: grid; gap: 16px; align-content: start; }
.rsvp-panel__aside .eyebrow { margin: 0; }
.rsvp-panel__title { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 300; line-height: 1.2; }
.rsvp-panel__when { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); font-weight: 300; }
.rsvp-panel__when i { font-size: 1.25rem; color: var(--ink-soft); }
.rsvp-panel__aside .muted { margin: 0; max-width: 44ch; }
.rsvp-panel .form { margin: 0; }
@media (max-width: 767px) { .rsvp-panel { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .ex-info .facts > div { border-left: 0; padding-inline: 0; border-top: 1px solid var(--line); }
  .ex-info .facts > div:first-child { border-top: 0; }
}
@media (max-width: 767px) {
  .ex-intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "text"; gap: 28px; }
  .ex-intro:not(.ex-intro--image-only) .ex-intro__media { position: static; }
  .ex-intro__media img { max-height: none; }
}

/* Blog */
.blog-cats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: -8px 0 40px; font-size: 0.875rem; letter-spacing: 0.04em; }
.blog-cats a { color: var(--ink-soft); text-decoration: none; padding: 6px 0; }
.blog-cats a:hover { color: var(--ink); }
.blog-cats a[aria-current="page"] { color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.blog-featured { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin: 0 0 clamp(48px, 7vw, 88px); color: inherit; text-decoration: none; }
.blog-featured .h2 { margin: 10px 0 14px; }
.blog-featured:hover .h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
@media (max-width: 900px) { .blog-featured { grid-template-columns: 1fr; } }
.card__eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 14px 0 -6px; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.blog-tags span { border: 1px solid var(--line, currentColor); padding: 2px 10px; }
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line, rgb(0 0 0 / 0.12)); color: var(--ink-soft); }
.blog-share a, .link-btn { color: var(--ink); }
.link-btn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.prose figure { margin: 2em 0; }
.prose figure img, .prose > img { max-width: 100%; height: auto; display: block; }
.prose figcaption { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 8px; }

/* Press: one row per release, one button per language */
.press-langs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.press-lang {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.press-lang i { font-size: 1.15rem; }
.press-lang:hover, .press-lang:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.press-lang--inline { min-height: 0; padding: 1px 8px; margin-left: 6px; font-size: 0.7rem; vertical-align: middle; }
@media (max-width: 599px) { .press-langs { justify-content: flex-start; } }

/* Staff only: link to the admin panel in the header */
.nav__admin { border: 1px solid var(--line-strong); padding: 6px 12px; margin-right: 14px; }
.nav__admin:hover { border-color: var(--ink); }
.nav__admin i { font-size: 1rem; }
/* Mid-size screens: Account and Admin Panel show only their icon (the name stays for screen readers),
   so the header fits when signed in. */
@media (min-width: 1024px) and (max-width: 1359px) {
  .nav__account span:not(.avatar) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__account { margin-right: 4px; }
  .nav__admin { padding: 6px 8px; margin-right: 6px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .nav__inner { gap: 12px; }
  .nav__links { gap: 10px; }
}
.press-langs--start { justify-content: flex-start; }
.facts .press-langs { display: flex; grid-template-columns: none; gap: 8px; }

/* Artwork prices: tax label */
.price__vat { font-size: 0.75em; color: var(--ink-soft); letter-spacing: 0.02em; white-space: nowrap; }

/* Staff only, while the website is paused (gallery/middleware.py PausedSiteMiddleware) */
.paused-bar { position: sticky; top: 0; z-index: 200; margin: 0; padding: 8px 16px; background: #f2b632; color: #1d1600; font-size: 0.875rem; text-align: center; }
.paused-bar a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Newsletter: the page, the footer link and the card in the corner ---------- */
.nl-page { padding-block: clamp(48px, 7vw, 96px); }
.nl-page__head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.nl-page__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nl-page__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); }
.nl-page__list i { font-size: 1.375rem; color: var(--ink); flex: none; }
.nl-page__state { display: grid; gap: 12px; align-content: start; justify-items: start; }
.nl-page__state > i { font-size: 2.25rem; }
.nl-page__skip { margin-top: clamp(40px, 5vw, 64px); }
.footer__follow { display: grid; gap: 32px; align-content: start; min-width: 0; }
.footer__grid:has(.nl-foot) { grid-template-columns: 2fr 1fr 1fr minmax(0, 320px); }
@media (max-width: 1023px) { .footer__grid:has(.nl-foot) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .footer__grid:has(.nl-foot) { grid-template-columns: 1fr; } }
.nl-foot { display: grid; gap: 12px; }
.nl-foot .footer__label { margin: 0; }

/* Short sign-up form (footer and pop-up) */
.nl-mini__text { margin: 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.5; }
.nl-mini { display: grid; gap: 8px; }
.nl-mini__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nl-mini input[type="text"], .nl-mini input[type="email"] {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 0.9375rem;
}
.nl-mini input::placeholder { color: inherit; opacity: 0.6; }
.nl-mini input:focus-visible { outline: 2px solid currentColor; outline-offset: 0; }
.nl-mini .btn { width: 100%; justify-content: center; }
.nl-mini .form__status { margin: 0; font-size: 0.875rem; }
.nl-mini .form__status:empty { display: none; }
.nl-mini.is-done > :not(.form__status) { display: none; }
.nl-mini.is-done .form__status:empty::before { content: "Thank you for subscribing."; }
.nl-mini__note { margin: 0; font-size: 0.75rem; color: var(--ink-soft); }
.nl-mini__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Pop-up: black card in the bottom right corner, the same in light and dark mode */
.nl-pop {
  position: fixed; z-index: 90; right: 24px; bottom: 24px; box-sizing: border-box; width: min(400px, calc(100vw - 32px));
  padding: 32px 28px 28px; display: grid; gap: 14px; background: #000; color: #fff;
  box-shadow: 0 16px 48px rgb(0 0 0 / 0.35); opacity: 0; transform: translateY(16px); transition: opacity 0.3s, transform 0.3s;
}
.nl-pop.is-open { opacity: 1; transform: none; }
.nl-pop[hidden] { display: none; }
.nl-pop__close {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; background: none; color: #fff; font-size: 1.125rem; cursor: pointer;
}
.nl-pop__close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.nl-pop__title { margin: 0; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; }
.nl-pop .nl-mini__text, .nl-pop .nl-mini__note { color: rgb(255 255 255 / 0.75); }
.nl-pop .nl-mini input { border-color: rgb(255 255 255 / 0.45); }
.nl-pop .nl-mini .btn { background: #fff; color: #000; border-color: #fff; }
.nl-pop .nl-mini .btn:hover { background: rgb(255 255 255 / 0.85); }
@media (max-width: 599px) { .nl-pop { right: 16px; bottom: 16px; padding: 28px 20px 20px; } }
@media (prefers-reduced-motion: reduce) { .nl-pop { transition: none; } }
/* SIGN-UP tab: a small black label standing on the right edge, half way down; it opens the pop-up. */
.nl-tab {
  position: fixed; z-index: 85; right: 0; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; padding: 14px 8px; border: 0; background: #000; color: #fff;
  font: 600 0.6875rem/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: opacity 0.25s, transform 0.25s;
}
.nl-tab:hover { background: #222; }
.nl-tab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
:root[data-theme="dark"] .nl-tab { background: #f3f2ee; color: #111; }
:root[data-theme="dark"] .nl-tab:hover { background: #fff; }
:root[data-theme="dark"] .nl-tab:focus-visible { outline-color: #111; }
.nl-tab.is-hidden { opacity: 0; pointer-events: none; transform: translate(100%, -50%); }
@media (prefers-reduced-motion: reduce) { .nl-tab { transition: none; } }

/* A section that follows a slideshow keeps a full gap: the slideshow buttons sat right against the next title. */
section:has(.slideshow) + section { padding-top: clamp(88px, 10vw, 136px); }

/* Contact: the address, hours and office details read at the size of the page text, not as small print. */
.contact-info { gap: 36px; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.6; }
.contact-info .info-label { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; margin-bottom: 10px; }
.contact-info .muted { color: var(--ink); }

/* Product page: description under the pictures, buying column alone on the right. */
@media (min-width: 1024px) {
  .artwork--product { grid-template-rows: auto 1fr; }
  .artwork--product .artwork__gallery { grid-column: 1; grid-row: 1; }
  .artwork--product .artwork__info { grid-column: 2; grid-row: 1 / span 2; }
  .artwork--product .artwork__about { grid-column: 1; grid-row: 2; }
}
.artwork__about { border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }
.artwork__about-title { margin: 0 0 20px; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.artwork__about .prose { max-width: 72ch; }

/* Phone number: country code picker + number (gallery/phones.py, js/phone-field.js) */
.phone-field { display: flex; gap: 8px; min-width: 0; }
.phone-field select { flex: 0 0 8.5em; width: 8.5em; min-width: 0; text-overflow: ellipsis; }
.phone-field input { flex: 1; min-width: 0; }
.phone-field__note { display: block; margin-top: 6px; color: var(--ink-faint); font-size: 0.85em; }


/* ---------- Logo intro: first page of a visit (html.intro, set in base.html) ---------- */
.intro-logo { display: none; }
html.intro .intro-logo {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--bg);
  animation: intro-out 0.6s var(--ease) 1.9s forwards; pointer-events: none;
}
.intro-logo__inner { display: flex; align-items: center; gap: 18px; }
.intro-logo__mark { height: 64px; width: auto; opacity: 0; transform: scale(0.85) rotate(-8deg); animation: intro-mark 0.9s var(--ease) 0.15s forwards; }
.intro-logo__word { display: block; clip-path: inset(0 100% 0 0); animation: intro-word 0.9s var(--ease) 0.75s forwards; }
.intro-logo__word img { height: 60px; width: auto; }
@keyframes intro-mark { to { opacity: 1; transform: none; } }
@keyframes intro-word { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 599px) {
  .intro-logo__mark { height: 44px; }
  .intro-logo__word img { height: 40px; }
}

/* ---------- Cart bag: appears with the first item ---------- */
.cart-link.is-new { animation: cart-in 0.5s var(--ease); }
@keyframes cart-in { from { opacity: 0; transform: scale(0.6); } }

/* ---------- Pictures: not dragged out or saved with a long press ---------- */
main img, .lightbox img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }

/* ---------- Lightbox: big zoom ---------- */
.lightbox__stage { overflow: hidden; }
.lightbox__nav { z-index: 1; background: var(--bg); }
.lightbox__stage img { cursor: zoom-in; transition: transform 0.35s var(--ease); }
.lightbox__stage.is-zoomed img { cursor: zoom-out; touch-action: none; }
@media (prefers-reduced-motion: reduce) { .lightbox__stage img { transition: none; } }

/* ---------- Artwork page: more air between words and lines ---------- */
.artwork__info { letter-spacing: 0.015em; word-spacing: 0.08em; line-height: 1.75; }
.artwork__info .specs { gap: 8px; }
.artwork__info .details details > div { padding-bottom: 24px; }
.condition { display: grid; gap: 16px; }
.condition p { margin: 0; }

/* ---------- Page picture (CMS > Pages > Picture), e.g. Bikini Berlin on Contact ---------- */
.page-picture { margin: 0 0 clamp(32px, 4vw, 56px); display: grid; gap: 10px; }
.page-picture img { width: 100%; height: auto; max-height: 70vh; object-fit: cover; }

/* A section straight after a form split keeps one normal gap, not the two spacings added together. */
.split:has(+ .artist-section) { padding-bottom: 0; }
.split + .artist-section { padding-top: clamp(56px, 7vw, 96px); }

/* ---------- Homepage slideshow: the slides fade into each other, dots in the bottom right ---------- */
.stage--carousel { height: calc(100svh - var(--nav-h)); min-height: 520px; overflow: hidden; background: #1b1a18; }
.stage--carousel .slide {
  position: absolute; inset: 0; height: auto; min-height: 0;
  opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.stage--carousel .slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.9s ease; z-index: 1; }
.stage__controls {
  position: absolute; z-index: 2; right: clamp(16px, 2.6vw, 40px); bottom: clamp(24px, 5vh, 48px);
  display: flex; align-items: center; gap: 12px; color: #f3f2ee;
}
.stage__dots { display: flex; gap: 2px; }
.stage__dot { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.stage__dot::before {
  content: ""; box-sizing: border-box; width: 8px; height: 8px; border-radius: 4px; border: 1px solid #f3f2ee;
  transition: width 0.3s var(--ease);
}
/* The active dot is a bar that fills in 6 seconds: the time left before the next photo (site.js moves on at its end). */
.stage__dot[aria-current="true"] { width: 44px; }
.stage__dot[aria-current="true"]::before {
  width: 32px; background: linear-gradient(#f3f2ee, #f3f2ee) left / 0% 100% no-repeat;
  animation: stage-timer 6s linear forwards;
}
.stage.is-paused .stage__dot[aria-current="true"]::before { animation-play-state: paused; }
@keyframes stage-timer { to { background-size: 100% 100%; } }
/* Drag with the mouse, swipe with a finger; the page still scrolls up and down. */
/* The pointer keeps its normal arrow on hover; it only changes while a drag is under way. */
.stage--carousel { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.stage--carousel.is-dragging { cursor: grabbing; }
.stage--carousel .slide__media { transition: transform 0.35s var(--ease); }
.stage--carousel.is-dragging .slide__media { transition: none; }
.stage__pause { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; }
.stage__dot:focus-visible, .stage__pause:focus-visible { outline: 2px solid #f3f2ee; outline-offset: 2px; }
@media (max-width: 767px) { .stage--carousel { min-height: 480px; } .stage__controls { bottom: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .stage--carousel .slide, .stage--carousel .slide.is-active { transition: none; }
  .stage__dot[aria-current="true"]::before { animation: none; background-size: 100% 100%; }
}

/* ---------- Cookie consent: banner on the first visit, "Your Privacy Choices" panel ---------- */
.consent-bar {
  position: fixed; z-index: 95; left: 16px; bottom: 16px; box-sizing: border-box; width: min(560px, calc(100vw - 32px));
  padding: 20px 22px; display: grid; gap: 16px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: 0 16px 48px rgb(0 0 0 / 0.28); font-size: 0.875rem; line-height: 1.55;
}
.consent-bar[hidden] { display: none; }
.consent-bar__text { margin: 0; color: var(--ink-soft); }
.consent-bar__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.consent-bar__actions .btn { min-height: 40px; padding-inline: 16px; font-size: 0.875rem; }
html.consent-pending .nl-tab { display: none; }

.consent {
  box-sizing: border-box; width: min(800px, calc(100vw - 32px)); max-height: min(720px, calc(100dvh - 32px));
  padding: 0; border: 0; background: var(--bg); color: var(--ink); box-shadow: 0 24px 64px rgb(0 0 0 / 0.4);
}
.consent::backdrop { background: rgb(0 0 0 / 0.6); }
.consent__inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.consent__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 8px; }
.consent__back {
  width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong);
  background: none; color: inherit; font-size: 1.125rem; cursor: pointer;
}
.consent__back[hidden] { display: grid; visibility: hidden; }
.consent__policy { padding: 10px 16px; background: var(--surface); font-size: 0.875rem; font-weight: 600; }
.consent__policy:hover { background: var(--surface-2); }
.consent__body { overflow-y: auto; padding: 8px 24px 24px; font-size: 0.9375rem; line-height: 1.6; }
.consent__body p { margin: 0 0 12px; color: var(--ink-soft); }
.consent__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent__title { margin: 8px 0 16px; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 600; line-height: 1.1; }
.consent__quick {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line);
}
.consent__pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 600 0.875rem/1 var(--font); cursor: pointer;
}
.consent__pill:hover { background: var(--surface-2); }
.consent__pill i { font-size: 1.125rem; }
.consent__subtitle { margin: 0 0 10px; font-size: 1.25rem; font-weight: 600; }
.consent__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; }
.consent__purpose { padding: 16px 0; border-top: 1px solid var(--line); }
.consent__purpose p { margin: 6px 0 0; font-size: 0.875rem; }
.consent__purpose-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.consent__purpose h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.consent__always { font-size: 0.8125rem; color: var(--ink-soft); }
.consent__switch { position: relative; flex: none; width: 44px; height: 24px; cursor: pointer; }
.consent__switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.consent__switch span { position: absolute; inset: 0; border-radius: 12px; background: var(--line-strong); transition: background 0.2s; pointer-events: none; }
.consent__switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform 0.2s var(--ease);
}
.consent__switch input:checked + span { background: var(--ink); }
.consent__switch input:checked + span::after { transform: translateX(20px); background: var(--bg); }
.consent__switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.consent__foot { display: flex; justify-content: flex-end; padding: 16px 24px 20px; border-top: 1px solid var(--line); }
.consent__foot .btn { min-width: 200px; justify-content: center; }
@media (max-width: 599px) {
  .consent-bar { left: 8px; bottom: 8px; width: calc(100vw - 16px); padding: 16px; }
  .consent-bar__actions .btn { flex: 1 1 auto; }
  .consent__foot .btn { width: 100%; }
}
.video__ask { display: grid; gap: 12px; justify-items: start; padding: 16px 20px; border-top: 1px solid var(--line); font-size: 0.875rem; }
.video__ask p { margin: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .consent__switch span, .consent__switch span::after { transition: none; } }

/* ---------- Account overview: status band and cards ---------- */
.account-page { padding-bottom: clamp(72px, 10vw, 140px); }
.account-head { flex-wrap: wrap; }
.account-head__text { flex: 1 1 auto; min-width: 0; }
.account-head__text .lead { margin: 4px 0 0; overflow-wrap: anywhere; }
.account-head__logout .btn { gap: 8px; }
.account-status {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 24px;
  padding: clamp(20px, 2.4vw, 28px); background: var(--surface); border-left: 2px solid var(--line-strong);
}
.account-status.is-approved { border-left-color: var(--ink); }
.account-status > i { font-size: 2rem; }
.account-status__title { margin: 0 0 4px; font-size: 1.125rem; font-weight: 600; }
.account-status p { margin: 0; color: var(--ink-soft); }
.account-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 3vw, 32px); }
.account-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); min-width: 0;
}
.account-card__icon { font-size: 1.5rem; color: var(--ink-soft); margin-bottom: 4px; }
.account-card__label { margin: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.account-card__value { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.account-card__note { margin: 0 0 8px; color: var(--ink-soft); font-size: 0.9375rem; }
.account-card__link { margin-top: auto; }
.account-card form { margin: 4px 0 8px; }
.account-card__links { list-style: none; margin: auto 0 0; padding: 12px 0 0; width: 100%; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.9375rem; }
.account-card__links a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.account-card__links a:hover { text-decoration-color: currentColor; }
.account-card__danger { color: #c4473a; }
:root[data-theme="dark"] .account-card__danger { color: #ef8f84; }
@media (max-width: 767px) {
  .account-cards { grid-template-columns: minmax(0, 1fr); }
  .account-status { grid-template-columns: auto minmax(0, 1fr); }
  .account-status .btn { grid-column: 1 / -1; justify-self: start; }
  .account-head__logout { width: 100%; }
}

/* ---------- Date box in the German format with a calendar button (site.js) ---------- */
.date-de { position: relative; display: block; }
.date-de input[data-date-de] { width: 100%; padding-right: 44px; }
.date-de__btn {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; background: none; color: var(--ink); font-size: 1.25rem; cursor: pointer;
}
.date-de__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.date-de__native { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* ---------- Collecting: the whole window, three big works across (like a gallery wall) ---------- */
/* No 1400px cap: the grid grows with the window, so works are big on small and large screens alike. */
.wrap--full { max-width: none; padding-inline: clamp(16px, 2.7vw, 52px); }
.collecting .works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4.5vw, 88px) clamp(16px, 2.8vw, 44px); }
.collecting .work .img-frame { aspect-ratio: 1 / 1; padding: 14%; margin-bottom: 16px; }
.collecting .work__artist { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.875rem; }
.collecting .work__title { font-size: 0.9375rem; }
.collecting .page-head, .collecting .notice, .collecting .filters { max-width: none; }
@media (max-width: 1024px) { .collecting .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .collecting .works { gap: 32px 12px; }
  .collecting .work .img-frame { padding: 10%; }
}

/* Homepage slideshow: no dots or pause button on screen. They stay in the page, invisible: the active dot's
   filling bar is still the timer (site.js moves on when it ends), and the pause button appears for keyboard
   users as soon as it gets focus. */
.stage__controls:not(:focus-within) {
  width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none;
}

/* ---------- Automatic wall shadow under artworks ---------- */
/* drop-shadow follows the visible picture (not the empty space around it), so every work looks like it hangs
   on the wall, without editing the photos. Softer on the light frame, stronger on the dark one. */
/* Direction and strength come from CMS > Website settings (SiteSettings.art_shadow_style sets --art-sx/-sy/-sk on <html>;
   "off" sets --art-sk: 0). A work with its own shadow (Artwork.shadow_style) sets the same variables on its card or
   picture, so the formula sits on the pictures themselves and picks up the nearest values. */
:root { --art-sx: 0.423; --art-sy: 0.906; --art-sk: 1; --art-sd: 1; --art-a1: 0.16; --art-a2: 0.12; --art-b1: 4px; --art-b2: 18px; }
:root[data-theme="dark"] { --art-a1: 0.55; --art-a2: 0.45; --art-b1: 5px; --art-b2: 22px; }
.work .img-frame img, .artwork__main img {
  filter:
    drop-shadow(calc(var(--art-sx) * var(--art-sd) * 4.5px) calc(var(--art-sy) * var(--art-sd) * 4.5px) calc(var(--art-b1) * var(--art-sd)) rgb(0 0 0 / min(0.85, calc(var(--art-a1) * var(--art-sk)))))
    drop-shadow(calc(var(--art-sx) * var(--art-sd) * 13.4px) calc(var(--art-sy) * var(--art-sd) * 13.4px) calc(var(--art-b2) * var(--art-sd)) rgb(0 0 0 / min(0.7, calc(var(--art-a2) * var(--art-sk)))));
}

/* ---------- Sculptures and objects (Category "show works as: Object") ---------- */
/* The photo fills the frame and is never cut: it is shown whole (contain), and whatever space a very tall or very
   wide photo leaves is filled with a strongly blurred copy of the same photo, so the frame is always full. Photos of
   sculptures usually have a plain wall or studio behind them, so the fill reads as that same background. No shadow. */
.img-fill {
  position: absolute; inset: -12%; z-index: 0; background: center / cover no-repeat;
  filter: blur(36px) saturate(0.85); opacity: 0.7; transform: translateZ(0); pointer-events: none;
}
.work-item--object .work .img-frame, .artwork__main--object { background: var(--surface); } /* softens the fill toward the page */
.work-item--object .work .img-frame, .work-item--object .work > .zoom.img-frame { padding: 0; overflow: hidden; }
.work-item--object .work .img-frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: none; }
.artwork__main--object { position: relative; overflow: hidden; padding: 0; }
.artwork__main--object .zoom { position: relative; z-index: 1; width: 100%; }
.artwork__main--object img { width: 100%; max-height: 82dvh; object-fit: contain; filter: none; }

/* ---------- Frames (CMS > Frames, chosen per artwork) ---------- */
/* The frame is the picture's own border and the mat its padding, so it always wraps the visible work. Sizes are
   in % of the card or picture area (container units), so a frame looks the same on a small card and a big page. */
.work-item.has-frame .work .img-frame, .artwork__main.has-frame { container-type: inline-size; }
.work-item.has-frame .work .img-frame img, .artwork__main.has-frame img {
  box-sizing: border-box; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  border: calc(var(--fr-w) * 1cqi) solid var(--fr-c);
  padding: calc(var(--mat-w) * 1cqi);
  background: var(--mat-c);
  box-shadow: inset 0 0 0 max(1px, calc(var(--fr-w) * 0.06cqi)) rgb(0 0 0 / 0.18); /* where frame meets mat */
}
.artwork__main.has-frame img { max-height: 76dvh; }
/* Moulding: raised outer and inner edges, lit from the top left. */
.frame--moulding.work-item .work .img-frame img, .artwork__main.frame--moulding img {
  border-image: linear-gradient(135deg,
    color-mix(in srgb, var(--fr-c), white 28%), var(--fr-c) 42%, var(--fr-c) 58%, color-mix(in srgb, var(--fr-c), black 32%)) 1;
}
/* Shadow box: a deep frame casting a shadow onto the mat and the work. */
.frame--box.work-item .work .img-frame img, .artwork__main.frame--box img {
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--fr-w) * 0.08cqi)) rgb(0 0 0 / 0.3),
    inset calc(var(--fr-w) * 0.25cqi) calc(var(--fr-w) * 0.45cqi) calc(var(--fr-w) * 0.9cqi) rgb(0 0 0 / 0.38);
}