/* ================= Preloader ================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  pointer-events: none;
}
.preloader__bg {
  position: absolute;
  inset: 0;
  background: var(--c-preloader);
}
html:not(.is-loading) .preloader { display: none; }
html.is-loading { overflow: hidden; }

/* ================= Header ================= */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  transition: transform 700ms var(--ease-out-expo), background-color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard);
}
.header.is-scrolled {
  background: rgba(244, 241, 233, 0.94);
  box-shadow: 0 1px 0 var(--c-line);
}
@supports (backdrop-filter: blur(1px)) {
  .header.is-scrolled {
    background: rgba(244, 241, 233, 0.82);
    backdrop-filter: blur(12px);
  }
}
.header.is-hidden:not(.is-menu-open) { transform: translateY(-101%); }
.header.is-menu-open { background: var(--c-canvas); box-shadow: none; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}
.header__brand {
  font-weight: 700;
  font-size: max(1.25rem, calc(26 * var(--u)));
  line-height: 1;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.nav__list {
  display: flex;
  gap: max(1.5rem, calc(48 * var(--u)));
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding-block: 0.5rem;
  font-size: max(0.9375rem, calc(17 * var(--u)));
  font-weight: 500;
  white-space: nowrap;
}
.nav__num {
  font-size: 0.72em;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-dim) var(--ease-standard);
}
/* the section in view: a small terracotta dot under the number */
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-btn) var(--ease-out-expo);
}
.nav a[aria-current='true'] .nav__num { color: var(--c-accent); }
.nav a[aria-current='true']::after { transform: scaleX(1); transform-origin: left center; }
@media (hover: hover) {
  .nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
}

.menu-btn {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  font-weight: 500;
}
.menu-btn__icon {
  position: relative;
  width: 1.25rem;
  height: 0.6rem;
}
.menu-btn__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 500ms var(--ease-out-expo), top 500ms var(--ease-out-expo);
}
.menu-btn__icon span:first-child { top: 0; }
.menu-btn__icon span:last-child { top: calc(100% - 1.5px); }
.menu-btn[aria-expanded='true'] .menu-btn__icon span { top: calc(50% - 0.75px); }
.menu-btn[aria-expanded='true'] .menu-btn__icon span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded='true'] .menu-btn__icon span:last-child { transform: rotate(-45deg); }

/* ---------- mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  background: var(--c-canvas);
  padding-top: var(--header-h);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  padding-block: 0.12em;
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
.menu__num {
  font-size: 0.28em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-muted);
  transform: translateY(-1.6em);
}
.menu__foot a { color: var(--c-ink); font-weight: 500; }
.menu__foot { color: var(--c-muted); }

/* ================= Hero ================= */
.hero {
  padding-top: calc(var(--header-h) + max(1rem, calc(40 * var(--u))));
}

.wordmark {
  position: relative;
  z-index: 2; /* above the large painting it overlaps */
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-wordmark);
  line-height: var(--lh-wordmark);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  transform-origin: 50% 50%;
}
/* during the intro the wordmark sits on top of the preloader curtain */
html.is-loading .wordmark { z-index: var(--z-logo); will-change: transform; }
.wordmark__word { display: flex; }
.wordmark__mask {
  display: block;
  overflow: hidden;
  /* the negative tracking would clip each glyph's right edge without room */
  padding: 0.06em 0.08em 0.05em 0;
  margin: -0.06em -0.08em -0.05em 0;
}
.wordmark__char { display: block; }

.hero__grid {
  grid-template-rows: auto auto;
  row-gap: var(--gutter);
  align-items: start;
  margin-top: max(1.5rem, calc(48 * var(--u)));
}

.hero__intro {
  grid-column: 1 / 5;
  grid-row: 1;
  display: grid;
  row-gap: var(--sp-24);
  justify-items: start;
  padding-top: max(0.5rem, calc(24 * var(--u)));
}
.hero__lede { max-width: 9.5em; }
.hero__lede em { font-weight: 400; color: var(--c-accent); }
.hero__sub { max-width: 22em; font-size: var(--fs-body); }
.hero__cta { margin-top: var(--sp-24); font-size: var(--fs-copy-m); }

.hero-art {
  display: block;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.hero-art__media {
  display: block;
  width: 100%;
}
.hero-art__media .reveal-img__inner { overflow: hidden; }
.hero-art__media img { transition: transform var(--dur-hover) var(--ease-out-expo); }
.hero-art__cap {
  display: flex;
  gap: 0.5em;
  margin-top: 0.65rem;
  color: var(--c-muted);
  transition: color var(--dur-dim) var(--ease-standard);
}
.hero-art__cap b { font-weight: 500; color: var(--c-ink); }
@media (hover: hover) {
  .hero-art:hover .hero-art__media img { transform: scale(1.03); }
  .hero-art:hover .hero-art__cap b { color: var(--c-accent); }
}
.hero-art:focus-visible { outline-offset: 6px; }
.hero-art.is-flipping .hero-art__media { visibility: hidden; }

/* the large painting rises behind the bottom of the wordmark */
.hero-art--1 {
  grid-column: 5 / 10;
  grid-row: 1 / 3;
  margin-top: calc(var(--fs-wordmark) * -0.24);
}
.hero-art--2 { grid-column: 10 / 13; grid-row: 1; margin-top: var(--sp-120); }
.hero-art--3 { grid-column: 11 / 13; grid-row: 2; margin-top: var(--sp-48); }
.hero-art--4 { grid-column: 2 / 5; grid-row: 2; align-self: end; }

/* ================= Section heads ================= */
.section-head {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  margin-bottom: var(--sp-80);
}
.section-head__num {
  grid-column: 1 / 3;
  padding-top: 0.4em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}
.section-head__title { grid-column: 3 / 13; }
.section-head__note {
  grid-column: 3 / 8;
  margin-top: var(--sp-24);
}
.section-head__kicker { grid-column: 3 / 13; padding-top: 0.4em; color: var(--c-muted); }

/* ================= Selected works ================= */
.works {
  margin-top: var(--section-gap);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 max(1.25rem, calc(36 * var(--u)));
  margin-bottom: var(--sp-120);
  padding-top: var(--sp-12);
  padding-left: calc(2 * (var(--col) + var(--gutter)));
  border-top: 1px solid var(--c-line);
}
.filter {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  min-height: 2.75rem;
  padding-block: 0.5rem;
  font-size: var(--fs-copy-m);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--c-muted);
  transition: color var(--dur-dim) var(--ease-standard), scale 150ms ease-out;
}
.filter__count {
  font-size: 0.55em;
  font-variant-numeric: tabular-nums;
  transform: translateY(-0.7em);
}
.filter::before {
  content: '';
  position: absolute;
  left: -0.7em;
  top: calc(50% - 0.15em);
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--c-accent);
  transform: scale(0);
  transition: transform 500ms var(--ease-out-expo);
}
.filter[aria-pressed='true'] { color: var(--c-ink); }
.filter[aria-pressed='true']::before { transform: scale(1); }
@media (hover: hover) {
  .filter:hover { color: var(--c-ink); }
}

.gallery {
  row-gap: var(--sp-160);
  align-items: start;
}
.gallery:empty::before {
  content: 'No works in this category yet.';
  grid-column: 1 / -1;
  color: var(--c-muted);
}

/* Editorial placement: each visible work gets a slot (1–7, repeating) from
   gallery.js; the slot sets its column, width and vertical offset. Landscape
   works get a wider span so every painting keeps a similar visual weight. */
.work {
  --start: 1;
  --span: 4;
  --y: 0;
  grid-column: var(--start) / span var(--span);
  margin-top: calc(var(--y) * var(--sp-12));
}
.work[data-slot='1'] { --start: 1; --span: 5; }
.work[data-slot='1'][data-orient='landscape'] { --span: 6; }
.work[data-slot='2'] { --start: 8; --span: 4; --y: 10; }
.work[data-slot='2'][data-orient='landscape'] { --span: 5; }
.work[data-slot='3'] { --start: 3; --span: 3; }
.work[data-slot='3'][data-orient='landscape'] { --span: 4; }
.work[data-slot='4'] { --start: 7; --span: 5; --y: 7; }
.work[data-slot='4'][data-orient='landscape'] { --span: 6; }
.work[data-slot='5'] { --start: 1; --span: 4; }
.work[data-slot='6'] { --start: 6; --span: 3; --y: 14; }
.work[data-slot='7'] { --start: 10; --span: 3; --y: 4; }

.work__btn {
  display: block;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.work__btn:focus-visible { outline-offset: 6px; }
.work__media {
  display: block;
  width: 100%;
}
.work__media .reveal-img__inner { overflow: hidden; }
.work__media img { transition: transform var(--dur-hover) var(--ease-out-expo); }
.work.is-flipping .work__media { visibility: hidden; }

.work__caption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: baseline;
  margin-top: max(0.75rem, calc(18 * var(--u)));
}
.work__num {
  font-size: var(--fs-small);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.work__title {
  font-size: max(1.0625rem, calc(22 * var(--u)));
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.025em;
  transition: color var(--dur-dim) var(--ease-standard);
}
.work__year {
  font-size: var(--fs-small);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.work__meta {
  grid-column: 2 / -1;
  margin-top: 0.2rem;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
@media (hover: hover) {
  .work__btn:hover .work__media img { transform: scale(1.035); }
  .work__btn:hover .work__title { color: var(--c-accent); }
}

/* ================= About ================= */
.about {
  margin-top: var(--section-gap);
}
.about__grid {
  row-gap: var(--sp-120);
  align-items: start;
}
.about__statement {
  grid-column: 3 / 12;
  grid-row: 1;
  font-size: max(1.75rem, calc(56 * var(--u)));
  line-height: 1.1;
}
.about__figure--1 { grid-column: 1 / 5; grid-row: 2 / 4; }
.about__figure--2 { grid-column: 10 / 13; grid-row: 3; }
.about__img { width: 100%; }
.about__caption { margin-top: 0.65rem; }

.about__text {
  grid-column: 6 / 12;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-80) var(--gutter);
}
.about__block { display: grid; row-gap: var(--sp-24); align-content: start; }
.about__block:first-child { grid-column: 1 / -1; }
.about__block .label { color: var(--c-muted); }
.about__list { font-size: max(1.0625rem, calc(21 * var(--u))); line-height: 1.35; letter-spacing: -0.02em; }
.about__list li + li { margin-top: 0.15em; }

/* ================= Contact ================= */
.contact {
  margin-top: var(--section-gap);
}
.contact .section-head { margin-bottom: var(--sp-48); }
.contact__title {
  max-width: 11em;
  margin-left: calc(-0.04em);
}
.contact__body {
  margin-top: var(--sp-80);
  row-gap: var(--sp-48);
  align-items: end;
}
.contact__text { grid-column: 3 / 8; }
.contact__actions {
  grid-column: 9 / 13;
  display: grid;
  row-gap: var(--sp-24);
}
.contact__btn { width: 100%; }
.contact__email {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: var(--sp-12);
  border-top: 1px solid var(--c-line);
}
.contact__email a { font-weight: 500; overflow-wrap: anywhere; }
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.social:empty { display: none; }
.social a { font-weight: 500; }

/* ================= Footer ================= */
.footer {
  margin-top: var(--section-gap);
  padding-top: var(--sp-48);
  padding-bottom: var(--sp-48);
  border-top: 1px solid var(--c-line);
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-48);
  align-items: start;
}
.footer__brand {
  grid-column: 1 / 6;
  font-size: var(--fs-display-m);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}
.footer__nav { grid-column: 7 / 9; }
.footer__nav ul { display: grid; }
/* standalone small links: at least 24px tall to hit */
.footer__nav a,
.social a,
.contact__email a,
.footer__totop { display: inline-block; padding-block: 0.25rem; }
.footer__nav a,
.footer__social a,
.footer__totop { font-weight: 500; }
.footer__social { grid-column: 9 / 11; flex-direction: column; }
.footer__totop { grid-column: 11 / 13; justify-self: end; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: var(--sp-120);
}

/* ================= Tablet portrait ================= */
@media (max-width: 991px) {
  .hero__grid { grid-template-rows: auto auto auto; row-gap: 1.5rem; }
  .hero__intro { grid-column: 1 / 9; grid-row: 1; }
  .hero-art--1 { grid-column: 1 / 9; grid-row: 2 / 4; margin-top: 1rem; }
  .hero-art--2 { grid-column: 9 / 13; grid-row: 2; margin-top: 1rem; }
  .hero-art--3 { grid-column: 9 / 13; grid-row: 3; margin-top: 0; }
  .hero-art--4 { display: none; }

  .section-head__num { grid-column: 1 / -1; padding-top: 0; margin-bottom: 0.75rem; }
  .section-head__title,
  .section-head__kicker { grid-column: 1 / -1; }
  .section-head__note { grid-column: 1 / 10; }

  .filters { padding-left: 0.75rem; }

  .work[data-slot='1'] { --start: 1; --span: 7; }
  .work[data-slot='1'][data-orient='landscape'] { --span: 8; }
  .work[data-slot='2'] { --start: 9; --span: 4; --y: 12; }
  .work[data-slot='2'][data-orient='landscape'] { --start: 8; --span: 5; }
  .work[data-slot='3'] { --start: 2; --span: 5; --y: 0; }
  .work[data-slot='3'][data-orient='landscape'] { --span: 6; }
  .work[data-slot='4'] { --start: 8; --span: 5; --y: 8; }
  .work[data-slot='4'][data-orient='landscape'] { --span: 5; }
  .work[data-slot='5'] { --start: 1; --span: 6; --y: 0; }
  .work[data-slot='5'][data-orient='landscape'] { --span: 7; }
  .work[data-slot='6'] { --start: 8; --span: 5; --y: 10; }
  .work[data-slot='7'] { --start: 3; --span: 7; --y: 0; }

  .about__statement { grid-column: 1 / -1; }
  .about__figure--1 { grid-column: 1 / 8; grid-row: 2; }
  .about__figure--2 { grid-column: 9 / 13; grid-row: 2; align-self: end; }
  .about__text { grid-column: 2 / 13; grid-row: 3; }

  .contact__text { grid-column: 1 / 8; }
  .contact__actions { grid-column: 1 / 9; }

  .footer__brand { grid-column: 1 / -1; }
  .footer__nav { grid-column: 1 / 5; }
  .footer__social { grid-column: 5 / 9; }
  .footer__totop { grid-column: 9 / 13; }
}

/* ================= Mobile landscape ================= */
@media (max-width: 767px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }

  .hero__intro { grid-column: 1 / -1; }
  .hero__lede { max-width: 11em; }
  .hero-art--1 { grid-column: 1 / 11; grid-row: 2; margin-top: 0.5rem; }
  .hero-art--2 { grid-column: 6 / 13; grid-row: 3; margin-top: 0; align-self: start; }
  .hero-art--3 { grid-column: 1 / 5; grid-row: 3; margin-top: 3.5rem; }

  .section-head__note { grid-column: 1 / -1; }

  .filters {
    gap: 0 1.25rem;
    padding-left: 0.7rem;
    margin-bottom: var(--sp-80);
  }

  .gallery { row-gap: var(--sp-80); }
  .work { --y: 0 !important; }
  .work[data-slot] { --start: 1; --span: 12; }
  .work[data-slot='2'] { --start: 4; --span: 9; }
  .work[data-slot='3'] { --start: 1; --span: 10; }
  .work[data-slot='4'] { --start: 3; --span: 10; }
  .work[data-slot='6'] { --start: 1; --span: 9; }
  .work[data-slot='7'] { --start: 4; --span: 9; }
  .work[data-slot][data-orient='landscape'] { --start: 1; --span: 12; }

  .about__grid { row-gap: var(--sp-80); }
  .about__figure--1 { grid-column: 1 / 10; }
  .about__figure--2 { grid-column: 6 / 13; grid-row: 3; align-self: start; }
  .about__text { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr; gap: var(--sp-48); }

  .contact__actions { grid-column: 1 / -1; }

  .footer__nav { grid-column: 1 / 7; }
  .footer__social { grid-column: 7 / 13; }
  .footer__totop { grid-column: 1 / -1; justify-self: start; }
  .footer__bottom { flex-direction: column; margin-top: var(--sp-80); }
}

/* ================= Mobile portrait ================= */
@media (max-width: 479px) {
  .hero-art--1 { grid-column: 1 / 12; }
  .hero-art--2 { grid-column: 5 / 13; }
  .hero-art--3 { grid-column: 1 / 5; margin-top: 4.5rem; }
  .hero-art__cap { font-size: 0.75rem; }

  .contact__title { font-size: clamp(2.75rem, 14vw, 4rem); }
}

/* ================= Index by category (hover-to-reveal) =================
   Adapted from the EDDY genre table: oversized category titles on the left,
   painting titles on the right, dashed rules between the rows, and a tilted
   preview that floats over the titles while a painting title is hovered. */
.index {
  position: relative; /* the preview is positioned inside this block */
  margin-top: var(--section-gap);
}
.index__head { margin-bottom: var(--sp-48); }

.dash {
  height: 1px;
  background-image: linear-gradient(to right, var(--c-ink) 0 55%, transparent 55% 100%);
  background-size: max(8px, calc(12 * var(--u))) 100%;
  background-repeat: repeat-x;
  opacity: 0.5;
}

.index-row {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  min-height: calc(176 * var(--u));
}
.index-row > .dash { grid-column: 1 / -1; }
.index-row__head {
  grid-column: 1 / 9;
  display: flex;
  align-items: flex-end;
  gap: max(0.5rem, calc(18 * var(--u)));
  padding-top: calc(6 * var(--u));
}
.index-row__num {
  flex-shrink: 0;
  padding-bottom: 0.9em;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.index-row__title {
  font-size: max(3rem, calc(150 * var(--u)));
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}
.index-row__names {
  grid-column: 9 / 13;
  position: relative;
  z-index: 2; /* titles stay above the preview */
  padding-top: calc(16 * var(--u));
  font-size: var(--fs-copy-m);
  line-height: var(--lh-copy-m);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.index-name {
  position: relative;
  display: inline;
  text-align: left;
  color: var(--c-muted);
  transition: opacity var(--dur-dim) var(--ease-standard), color var(--dur-dim) var(--ease-standard);
}
/* the hit area is slightly larger than the glyphs */
.index-name::after {
  content: '';
  position: absolute;
  inset: -0.22em -0.18em;
}
.index-name:focus-visible { outline-offset: 2px; }
.index-sep { color: var(--c-muted); transition: opacity var(--dur-dim) var(--ease-standard); }
.index-name.is-active { color: var(--c-ink); }
.index__table.is-dimmed .index-name,
.index__table.is-dimmed .index-sep { opacity: var(--dim, 0.3); }
.index__table.is-dimmed .index-name.is-active { opacity: 1; }
@media (hover: hover) {
  .index-name:hover { color: var(--c-ink); }
}

/* positioned by index-hover.js: y follows the cursor height, x follows it slightly */
.index__hover {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(var(--margin) + 240 * var(--u));
  width: max(13rem, calc(340 * var(--u)));
  aspect-ratio: 320 / 437;
  pointer-events: none;
  visibility: hidden;
}
.index__hover.is-on { visibility: visible; }
.index__hover.is-flipping { visibility: hidden; }
.hover-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-placeholder);
  clip-path: inset(100% 0% 0% 0%);
}
.hover-layer__inner {
  position: absolute;
  inset: 0;
}
.hover-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .index-row { min-height: 0; padding-bottom: 1.5rem; }
  .index-row__head { grid-column: 1 / -1; gap: 0.75rem; padding-top: 0.9rem; }
  .index-row__title { font-size: clamp(3rem, 10vw, 5.5rem); }
  .index-row__names {
    grid-column: 1 / -1;
    padding-top: 1rem;
    padding-left: calc(2 * (var(--col) + var(--gutter)));
    max-width: 40rem;
  }
}

/* mobile widths: the preview sits behind the active title (titles are z-index 2), 30% larger */
@media (max-width: 767px) {
  .index-row__title { font-size: clamp(2.5rem, 12.5vw, 4rem); }
  .index-row__names { padding-left: 0; }
  .index__hover {
    left: 0;
    width: max(13rem, calc(340 * var(--u) * 1.3));
  }
  /* keep the active title legible over the painting behind it */
  .index-name.is-active {
    background: var(--c-canvas);
    box-shadow: 0 0 0 0.2em var(--c-canvas);
  }
}

/* ================= CMS content helpers ================= */
/* editable multi-line texts keep the artist's line breaks */
.pre-line { white-space: pre-line; }

.hero__label { color: var(--c-muted); }

/* admin preview (?preview): drafts are visible, so say so */
.preview-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: calc(var(--z-overlay) + 1);
  transform: translateX(-50%);
  padding: 0.6rem 1rem;
  background: var(--c-ink);
  color: var(--c-canvas);
  font-size: var(--fs-small);
  font-weight: 500;
  width: max-content;
  max-width: calc(100vw - 2rem);
  text-align: center;
}
.preview-banner[hidden] { display: none; }
.work__draft {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}