/* ============================================================
   Kurt Lossgott — memorial / estate site
   Brand system per sites/kurt/brand-system.md
   Oyster ground · Charcoal type · Bronze hairline accent
   Bodoni Moda (wordmark only) · Libre Caslon Display + Text
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root {
  --oyster-50: #F7F4ED;
  --oyster:    #EFEAE0;
  --oyster-warm:  #ECE6D9;  /* pull-quote bands */
  --oyster-deep:  #E8E2D5;  /* footer settle */
  --oyster-paper: #F2EEE4;  /* series-page overview blocks */
  --charcoal:  #1E1A16;
  --bronze:    #8B6F47;
  --ink:       #0A0908;

  --text-secondary: rgba(30, 26, 22, 0.70);
  --text-tertiary:  rgba(30, 26, 22, 0.60);
  --divider:        rgba(30, 26, 22, 0.15);

  --font-wordmark: "Bodoni Moda", Georgia, serif;
  --font-display:  "Libre Caslon Display", Georgia, serif;
  --font-text:     "Libre Caslon Text", Georgia, serif;

  /* spacing scale: 4 8 16 24 32 48 64 96 128 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;

  --measure: 720px;     /* prose max width */
  --measure-narrow: 620px;
  --page-max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ---- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--oyster);
  color: var(--charcoal);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; border: 0; }
a { color: var(--charcoal); text-decoration: underline; text-underline-offset: 0.18em;
    text-decoration-thickness: 0.5px; text-decoration-color: var(--divider);
    transition: text-decoration-color 120ms ease; }
a:hover { text-decoration-color: var(--bronze); }
a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* Body-prose links — stronger underline + bronze accent so links read
   as clickable within reading flow.  Scoped to prose contexts to keep
   nav/chrome/footer links in the default quieter state. */
.prose a, .work__body a, .faq__a a, .chapter .prose a,
.work-prose a, .overview a {
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bronze);
  color: var(--charcoal);
}
.prose a:hover, .work__body a:hover, .faq__a a:hover,
.chapter .prose a:hover, .work-prose a:hover, .overview a:hover {
  color: var(--bronze);
  text-decoration-color: currentColor;
}

/* Italicise artwork links — art-historical convention is italic titles.
   Two URL patterns identify a specific artwork:
     1) Anchor links into a series page: /sculptures/<series>.html#<work>
     2) Dedicated detail pages: /sculptures/<series>/<work>.html
   Series page links (top-level /sculptures/<slug>.html) and chrome
   anchors (#top, #main, #biography, #handwritten-statement) stay roman.
   Scoped to prose contexts only — nav/footer/chrome links unaffected. */
.prose a[href*=".html#"]:not([href$="#biography"]):not([href$="#handwritten-statement"]):not([href$="#top"]):not([href$="#main"]):not([href$="#welded-1970s"]):not([href$="#against-the-grain"]),
.prose a[href*="/sculptures/spirit-series/"],
.prose a[href*="/sculptures/public-commissions/"],
.work__body a[href*=".html#"]:not([href$="#biography"]):not([href$="#handwritten-statement"]):not([href$="#top"]):not([href$="#main"]),
.work__body a[href*="/sculptures/spirit-series/"],
.work__body a[href*="/sculptures/public-commissions/"],
.faq__a a[href*=".html#"]:not([href$="#biography"]):not([href$="#handwritten-statement"]):not([href$="#top"]):not([href$="#main"]),
.faq__a a[href*="/sculptures/spirit-series/"],
.faq__a a[href*="/sculptures/public-commissions/"],
.chapter .prose a[href*=".html#"]:not([href$="#biography"]):not([href$="#handwritten-statement"]):not([href$="#top"]):not([href$="#main"]),
.chapter .prose a[href*="/sculptures/spirit-series/"],
.chapter .prose a[href*="/sculptures/public-commissions/"],
.overview a[href*=".html#"]:not([href$="#biography"]):not([href$="#handwritten-statement"]):not([href$="#top"]):not([href$="#main"]),
.overview a[href*="/sculptures/spirit-series/"],
.overview a[href*="/sculptures/public-commissions/"] {
  font-style: italic;
}
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
em, i { font-style: italic; }

/* ---- Skip link (a11y) ------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--charcoal); color: var(--oyster); padding: 10px 16px;
  text-decoration: none; font-size: 14px; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Back-to-top footer link ------------------------------- */
/* Sits above the footer credits with a clear visual break — generous
   bottom margin plus a hairline divider so the link doesn't crowd the
   estate credits below it. */
.to-top-row { text-align: center; margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 0.5px solid var(--divider); }
.to-top { font-family: var(--font-text); font-style: italic;
  font-size: 14px; color: var(--bronze); opacity: 0.85;
  text-decoration: none; border-bottom: 1px solid currentColor;
  padding-bottom: 1px; letter-spacing: 0.02em; }
.to-top:hover { opacity: 1; }

/* ---- Layout primitives ------------------------------------ */
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.prose-narrow { max-width: var(--measure-narrow); }
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.rule { border: 0; border-top: 0.5px solid var(--divider); margin: 0; }

/* ---- Typography -------------------------------------------- */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--charcoal);
  line-height: 1.05;
  text-decoration: none;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15;
             margin: 0 0 var(--sp-3); color: var(--charcoal); }

.h1 { font-size: clamp(40px, 6vw, 72px); }
.h1-cat { font-family: var(--font-display); font-weight: 400; line-height: 1.12;
          font-size: clamp(34px, 5vw, 54px); letter-spacing: 0.04em; text-transform: uppercase;
          margin: 0 0 var(--sp-4); }
h2, .h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3, .h3 { font-size: clamp(21px, 2.2vw, 26px); }

p { margin: 0 0 var(--sp-3); }
.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.55; }
.body-l { font-size: 18px; }
.small { font-size: 14px; }
.caption { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
/* Nested italics: a work title (*Daily Dispatch*) inside an italic
   caption flips back to roman for clear visual distinction — the
   typographic convention for titles within italic prose. */
.caption em em { font-style: normal; }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--charcoal);
}

blockquote {
  margin: var(--sp-5) 0;
  padding-left: var(--sp-4);
  border-left: 0.5px solid var(--bronze);
  font-style: italic;
  color: var(--charcoal);
}

/* ---- Header / nav ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--oyster) 92%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 0.5px solid var(--divider);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 64px); padding-block: var(--sp-4);
}
.site-header .wordmark { font-size: clamp(18px, 2.4vw, 23px); line-height: 1; }
.header-id { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); flex-wrap: wrap; }
.wordmark-dates { font-family: var(--font-text); font-style: italic; font-size: 14px;
  color: var(--bronze); white-space: nowrap; line-height: 1; }
.nav { align-items: center; }
/* The HOME / STARTSEITE label is rendered as a house icon (see
 * .eyebrow--icon below), which recovered ~90 px of horizontal room.
 * That lets us bring tracking and font-size back close to the rest of
 * the eyebrows for readability, while keeping the gap a touch tighter
 * than the original so the long German PRESSE & AUSSTELLUNGEN never
 * pushes a sixth-item nav onto a second row at common laptop widths. */
.nav { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.9vw, 28px); align-items: baseline; }
.nav a { text-decoration: none; }
.nav a.eyebrow {
  color: var(--charcoal);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  letter-spacing: 0.13em;
}
.nav a.eyebrow:hover { border-bottom-color: var(--bronze); }
.nav a.eyebrow[aria-current="page"] { border-bottom-color: var(--bronze); }
/* Home as house icon — replaces the long HOME / STARTSEITE label.  The
 * inline-flex alignment plus the small translateY keeps the icon optically
 * centred on the nav baseline shared by the other text items. */
.nav a.eyebrow--icon { display: inline-flex; align-items: center; padding-bottom: 0; line-height: 1; }
.nav a.eyebrow--icon .nav-home-icon { display: block; transform: translateY(1px); }
.nav a.eyebrow--icon:hover .nav-home-icon { color: var(--bronze); }
.nav a.eyebrow--icon[aria-current="page"] .nav-home-icon { color: var(--bronze); }
/* Language switcher — kept visually quieter than the primary nav items. */
.nav a.eyebrow--lang { color: var(--bronze); opacity: .75; margin-left: clamp(2px, 0.6vw, 10px); }
.nav a.eyebrow--lang:hover { opacity: 1; border-bottom-color: var(--bronze); }

/* ---- Hero (home) ------------------------------------------ */
.hero { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.hero__figure { margin: 0 auto; max-width: 560px; }
.hero__figure img { margin-inline: auto; }
.hero__quote {
  font-family: var(--font-text); font-style: italic;
  font-size: clamp(24px, 3.6vw, 38px); line-height: 1.3;
  max-width: 760px; margin: var(--sp-7) auto 0; text-align: center; color: var(--charcoal);
}
.hero__attr { text-align: center; font-style: italic; font-size: 13px;
              color: var(--bronze); margin-top: var(--sp-4); }
.hero__dates { text-align: center; font-style: italic; font-size: 14px;
               color: var(--text-tertiary); margin-top: var(--sp-2);
               letter-spacing: 0.02em; }

/* ---- Bio block (home) ------------------------------------- */
.bio { display: grid; grid-template-columns: 40% 1fr; gap: var(--sp-7); align-items: start; }
.bio__portrait figcaption { margin-top: var(--sp-2); font-style: italic; }
.bio__body { max-width: var(--measure-narrow); }
.bio__body .sub { font-style: italic; color: var(--text-tertiary); font-size: 18px;
                  margin-top: calc(var(--sp-3) * -1 + 2px); margin-bottom: var(--sp-4); }
/* Subtle "see / read more" links — lighter shade, leading vertical bar.
   Used in chapter footers (a.readmore) and in figure captions (.caption a). */
.readmore { display: inline-block; margin-top: var(--sp-3);
            font-family: var(--font-text); font-style: italic;
            font-size: 14px; font-weight: 400;
            color: var(--bronze); opacity: 0.85;
            text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.readmore:hover { opacity: 1; }
.caption a { color: var(--bronze); opacity: 0.85;
             text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.caption a:hover { opacity: 1; }

/* ---- Series tiles grid (home) ----------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5) var(--sp-4); }
.tile { display: block; text-decoration: none; color: var(--charcoal); }
.tile__img { aspect-ratio: 3 / 4; overflow: hidden; background: #dde0e3; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.tile__img--empty { display: flex; align-items: center; justify-content: center;
                    background: var(--oyster-50); border: 0.5px solid var(--divider); }
.tile__img--empty span { font-style: italic; font-size: 13px; color: var(--text-tertiary);
                         padding: var(--sp-3); text-align: center; }
.tile__label { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.04em;
               text-transform: uppercase; margin-top: var(--sp-3); line-height: 1.2; }
.tile__meta { font-style: italic; font-size: 13px; color: var(--bronze); margin-top: 2px; }
.tile:hover .tile__label { text-decoration: underline; text-decoration-color: var(--bronze);
                           text-underline-offset: 0.18em; }

/* ---- Work index (thumbnails under series overview) -------- */
.work-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3) var(--sp-3); margin: var(--sp-5) 0 0; max-width: 980px; }
.work-index__item { text-decoration: none; color: var(--charcoal); display: block; }
.work-index .thumb { aspect-ratio: 3/4; overflow: hidden; background: #dde0e3; }
.work-index .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Archival-section thumbnails: cover-crop with neutral center positioning
   (no 30% facial bias, as the welded-1970s set is a mix of animals and
   figures with no consistent compositional center). */
.work-index .thumb--contain { background: #d4d7da; }
.work-index .thumb--contain img { object-fit: cover; object-position: center; }
.work-index .thumb--empty { background: var(--oyster-50); border: 0.5px solid var(--divider); }
.work-index__name { font-family: var(--font-text); font-size: 13px; line-height: 1.3;
  margin-top: var(--sp-2); color: var(--charcoal); }
.work-index__item:hover .work-index__name { text-decoration: underline;
  text-decoration-color: var(--bronze); text-underline-offset: 0.18em; }
@media (max-width: 560px) {
  .work-index { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Series / work pages ---------------------------------- */
.pagehead { padding-top: var(--sp-8); padding-bottom: var(--sp-5); }
.pagehead .overview { max-width: var(--measure); font-size: 18px; line-height: 1.6;
                      color: var(--charcoal); }
.pagehead .overview.italic { font-style: italic; }
.breadcrumb { font-size: 13px; color: var(--text-secondary); margin-bottom: var(--sp-4); }
.breadcrumb a { text-decoration-color: var(--divider); }

.work { padding-block: var(--sp-7); border-top: 0.5px solid var(--divider); }
.work:first-of-type { border-top: 0; }
.work__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px);
               margin: 0 0 var(--sp-1); }
.work__short { font-style: italic; color: var(--text-secondary); font-size: 16px;
               margin: 0 0 var(--sp-4); max-width: var(--measure); }
.work__body { max-width: var(--measure); }
.work__meta { font-size: 13px; color: var(--text-secondary); font-style: italic;
              margin-top: var(--sp-3); }
.work__note { font-size: 13px; color: var(--bronze); font-style: italic; margin-top: var(--sp-3); }
.work__alt { font-family: var(--font-text); font-style: italic; font-size: 13px;
  color: var(--bronze); margin: -6px 0 var(--sp-3); }

/* hero/work-hero captions — art-historical conventions */
.hero__caption { text-align: center; font-size: 14px; margin-top: var(--sp-3);
  max-width: 720px; margin-inline: auto; color: var(--text-secondary); }
.work-hero figcaption { text-align: center; font-size: 14px; margin-top: var(--sp-3);
  color: var(--text-secondary); }
.work-hero figure { margin: 0; }

/* Estate page portrait (greenhouse) */
.estate-portrait { max-width: 380px; margin: 0 auto; }
.estate-portrait img { background: #dde0e3; }

/* image gallery — preserves native aspect ratios */
.gallery { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-3); }
.gallery figure { margin: 0; max-width: 320px; }
.gallery img { background: #dde0e3; }
.gallery figcaption { margin-top: var(--sp-2); }
.work--noimg .work__body { /* text-only works read as catalogue entries */ }
.noimg-badge { display: inline-block; font-size: 11px; letter-spacing: 0.12em;
               text-transform: uppercase; color: var(--text-tertiary);
               border: 0.5px solid var(--divider); padding: 3px 8px; margin-bottom: var(--sp-3); }

/* ---- FAQ accordion (FAQ & Contact page) -------------------
   Native <details>/<summary> for zero-JS accessible accordion.
   Each item is a quiet horizontal-rule-bordered row with a bronze
   triangle indicator that rotates on open. */
.faq__heading { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 3vw, 32px); margin: 0 0 var(--sp-4); }
.faq { max-width: var(--measure); }
.faq__item { border-top: 0.5px solid var(--divider); }
.faq__item:last-child { border-bottom: 0.5px solid var(--divider); }
.faq__item[open] { background: var(--oyster-paper); }
.faq__q { list-style: none; cursor: pointer;
  padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-5);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(17px, 2vw, 20px); line-height: 1.35;
  color: var(--charcoal); position: relative;
  transition: color 120ms ease; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before { content: '+'; position: absolute; left: var(--sp-3);
  top: calc(var(--sp-4) - 2px); color: var(--bronze);
  font-family: var(--font-text); font-style: normal; font-weight: 400;
  font-size: 1.2em; transition: transform 180ms ease; }
.faq__item[open] > .faq__q::before { content: '\2212'; /* − minus */ }
.faq__q:hover { color: var(--bronze); }
.faq__a { padding: 0 var(--sp-3) var(--sp-5) var(--sp-5);
  font-size: 16px; line-height: 1.6; color: var(--charcoal); }
.faq__a p { margin: 0 0 var(--sp-3); }
.faq__a p:last-child { margin-bottom: 0; }

/* ---- Enquiry form ----------------------------------------- */
.enquiry { max-width: var(--measure-narrow); }
.field { margin-bottom: var(--sp-4); }
.field label { display: block; font-size: 14px; margin-bottom: var(--sp-2); color: var(--charcoal); }
.field input, .field textarea {
  width: 100%; font-family: var(--font-text); font-size: 16px; color: var(--charcoal);
  background: var(--oyster-50); border: 1px solid var(--charcoal); border-radius: 0;
  padding: 10px 12px;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--bronze); outline-offset: 2px; }
.submit { font-family: var(--font-text); font-size: 16px; background: none; border: 0;
          color: var(--charcoal); cursor: pointer; padding: 0; text-decoration: underline;
          text-underline-offset: 0.18em; text-decoration-color: var(--divider); }
.submit:hover { text-decoration-color: var(--bronze); }

/* ---- Exhibition timeline ---------------------------------- */
.timeline { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: var(--measure); }
.timeline li { display: grid; grid-template-columns: 90px 1fr; gap: var(--sp-4);
               padding-block: var(--sp-3); border-top: 0.5px solid var(--divider); }
.timeline .year { font-family: var(--font-display); font-size: 18px; color: var(--bronze); }

/* ---- Footer ----------------------------------------------- */
.site-footer { border-top: 1px solid var(--charcoal); margin-top: var(--sp-8);
               padding-block: var(--sp-7); }
.site-footer p { margin: 0 0 var(--sp-2); font-size: 14px; color: var(--text-secondary); }
.site-footer .wordmark { font-size: 16px; color: var(--charcoal); display: inline-block;
                         margin-bottom: var(--sp-3); }
.site-footer a { color: var(--text-secondary); }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-4); }
  .bio { grid-template-columns: 1fr; gap: var(--sp-5); }
  .bio__portrait { max-width: 360px; }
}
@media (max-width: 560px) {
  .section { padding-block: var(--sp-7); }
  .tiles { grid-template-columns: 1fr; }
  .gallery figure { max-width: 100%; }
  .nav { gap: 12px 18px; }
  .timeline li { grid-template-columns: 64px 1fr; }
}

/* ---- Sectional backgrounds (felt, not seen) --------------- */
.bg-base  { background: var(--oyster); }
.bg-50    { background: var(--oyster-50); }
.bg-paper { background: var(--oyster-paper); }
.bg-warm  { background: var(--oyster-warm); }
.bg-deep  { background: var(--oyster-deep); }
.site-footer { background: var(--oyster-deep); }

/* ---- Series-page closing coda ----------------------------------
   A distinct "where to next" band at the foot of each series page.
   Pale paper ground + Caslon Display italic prose set it apart
   from the body-text catalogue prose above, with a small eyebrow
   label and an arrow-suffix link. */
.series-coda { background: var(--oyster-paper); padding-block: var(--sp-7);
               border-top: 0.5px solid var(--divider); }
.series-coda__inner { max-width: var(--measure); margin-inline: auto; }
.series-coda__eyebrow { font-family: var(--font-text); font-style: italic;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze); margin: 0 0 var(--sp-3); }
.series-coda p.prose { font-family: var(--font-display); font-style: italic;
  font-size: 19px; line-height: 1.5; color: var(--charcoal); margin: 0; }
.series-coda .coda-link { display: inline-block; margin-top: var(--sp-4);
  font-family: var(--font-text); font-style: italic; font-size: 15px;
  color: var(--bronze); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px; opacity: 0.9; }
.series-coda .coda-link:hover { opacity: 1; }

/* ---- Pull-quote band -------------------------------------- */
.pullquote { background: var(--oyster-warm); padding-block: var(--sp-8); }
.pullquote blockquote { margin: 0 auto; max-width: 920px; border: 0; padding: 0;
  font-family: var(--font-display); font-style: normal; font-size: clamp(26px, 4vw, 44px);
  line-height: 1.25; text-align: center; color: var(--charcoal);
  /* Modern browsers: avoid widows / orphans and balance the last line.
     Belt-and-braces with the protect_widow() helper in build-site.py
     which binds the final three words with non-breaking spaces. */
  text-wrap: pretty; }
.pullquote cite { display: block; margin-top: var(--sp-4); font-family: var(--font-text);
  font-style: italic; font-size: 14px; color: var(--bronze); text-wrap: pretty; }

/* ---- Inline attributed blockquote on detail pages ---------
   For quotes by named third parties (e.g. Nelson Mandela on the Madiba
   page) where attribution + publication matter.  Not a styled pullquote —
   sits in the body flow, indented, with a bronze hairline rule. */
.detail-quote { max-width: var(--measure); margin: 0 auto;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-left: 2px solid var(--bronze); border-bottom: 0;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45;
  color: var(--charcoal); text-wrap: pretty; }
.detail-quote p { margin: 0 0 var(--sp-3); }
.detail-quote cite { display: block; margin-top: var(--sp-3);
  font-family: var(--font-text); font-style: italic;
  font-size: 14px; color: var(--bronze); text-wrap: pretty; }

/* ---- Per-work (catalogue raisonné) page ------------------- */
.work-hero { padding-top: var(--sp-7); padding-bottom: var(--sp-6); text-align: center; }
.work-hero img { margin-inline: auto; max-height: 78vh; width: auto; background: #dde0e3; }
.work-hero figcaption { margin-top: var(--sp-3); }

/* Madiba and Child: the four-metre installed bronze stands on its
   concrete plinth — let the image read at full height and align flush
   to the bottom of the section so it sits grounded on the page rather
   than floating with vertical padding above and below. */
.work-hero--madiba-and-child { display: flex; flex-direction: column;
  justify-content: flex-end; padding-top: var(--sp-5);
  padding-bottom: 0; min-height: 92vh; }
.work-hero--madiba-and-child figure { margin: 0; }
.work-hero--madiba-and-child img { max-height: 88vh; }
.work-hero--madiba-and-child figcaption { margin-top: var(--sp-3);
  padding-bottom: var(--sp-5); }

/* Madiba galleries use the shared orientation-aware container styles
   defined under .gallery--orient above (archival_gallery() opts in via
   that class).  No per-work overrides needed here; portrait sources get
   portrait tiles, landscape sources get landscape tiles. */
.work-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
.meta-dl { margin: 0; display: grid; grid-template-columns: max-content 1fr;
  gap: 6px var(--sp-4); align-content: start; }
.meta-dl dt { font-family: var(--font-display); font-style: italic; color: var(--bronze);
  font-size: 15px; }
.meta-dl dd { margin: 0; font-size: 15px; }
.meta-dl dd.unknown { font-style: italic; color: var(--bronze); opacity: 0.8; }
.work-prose { max-width: 680px; font-size: 18px; }
.enquire { display: inline-block; margin-top: var(--sp-5); font-size: 16px; }
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.related a { text-decoration: none; color: var(--charcoal); }
.related .tile__img { aspect-ratio: 3/4; }
.related .tile__label { font-size: 16px; }
@media (max-width: 700px) { .related { grid-template-columns: repeat(2, 1fr); } }

/* ---- Archival insets (old kurtlossgott.com) --------------- */
.archival { margin-top: var(--sp-4); }
.archival .archival-note { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 var(--sp-3); }
.archival .gallery img { background: #d4d7da; padding: 0; }
.archival figcaption { color: var(--text-secondary); }

/* ---- Orientation-aware archival containers ---------------------
   Shared container sizes for the early-works "Scrap Safari" gallery and
   the Madiba per-work galleries.  Each <figure> carries figure--portrait,
   figure--landscape, or figure--square (added at build time by
   orient_class()).  Portrait sources get a portrait container; landscape
   sources get a landscape container.  Images sit inside at native aspect
   via `object-fit: contain` — no cropping, no scale-up beyond native.
   Bottom-of-figure alignment so caption baselines line up across rows. */
:root {
  --tile-landscape-w: clamp(280px, 30vw, 360px);
  --tile-landscape-h: clamp(180px, 20vw, 240px);
  --tile-portrait-w:  clamp(180px, 19vw, 230px);
  --tile-portrait-h:  clamp(260px, 28vw, 340px);
  --tile-square:      clamp(220px, 23vw, 280px);
}
.gallery--orient { display: flex; flex-wrap: wrap;
  gap: var(--sp-4); justify-content: flex-start;
  align-items: flex-start; }
.gallery--orient figure { margin: 0; max-width: none;
  display: flex; flex-direction: column; }
.gallery--orient figure.figure--landscape { width: var(--tile-landscape-w); }
.gallery--orient figure.figure--portrait  { width: var(--tile-portrait-w); }
.gallery--orient figure.figure--square    { width: var(--tile-square); }
.gallery--orient figure img { width: 100%; background: #d4d7da;
  display: block; object-fit: cover; object-position: center; }
.gallery--orient figure.figure--landscape img { height: var(--tile-landscape-h); }
.gallery--orient figure.figure--portrait  img { height: var(--tile-portrait-h); }
.gallery--orient figure.figure--square    img { height: var(--tile-square); }
/* Caption min-height ≈ 3 lines, so figures with short and long captions
   maintain a consistent vertical rhythm and don't shove the next row
   around as flex-wrap reflows. */
.gallery--orient figcaption { font-size: 13px; line-height: 1.4;
  margin-top: var(--sp-2); min-height: calc(13px * 1.4 * 3); }
@media (max-width: 560px) {
  .gallery--orient { gap: var(--sp-5); flex-direction: column; align-items: stretch; }
  .gallery--orient figure,
  .gallery--orient figure.figure--landscape,
  .gallery--orient figure.figure--portrait,
  .gallery--orient figure.figure--square { width: 100%; }
  .gallery--orient figure img,
  .gallery--orient figure.figure--landscape img,
  .gallery--orient figure.figure--portrait img,
  .gallery--orient figure.figure--square img { height: 60vw; }
}

/* ---- Leading archival section (early-works welded scrap-metal) -----
   Named section heading + intro paragraph above the orientation-aware
   gallery (which inherits .gallery--orient styling via the shared rules
   above — applied to the inner .gallery by the orient-aware classes). */
.series-archival-lead__heading { font-family: var(--font-display);
  font-weight: 600; font-size: clamp(28px, 4vw, 38px);
  margin: 0 0 var(--sp-3); color: var(--charcoal); }
.series-archival-lead .archival { margin-top: var(--sp-5); }

/* ---- Bio page chapters ------------------------------------ */
.chapter { padding-block: var(--sp-6); border-top: 0.5px solid var(--divider); max-width: var(--measure); }
.chapter:first-of-type { border-top: 0; }
.chapter h2 { font-weight: 600; font-size: clamp(26px, 3vw, 34px); }
.chapter figure { margin: 0 0 var(--sp-4); }
.chapter figure.portrait,
.chapter > figure.portrait { max-width: 360px; width: 100%; }
.chapter figure.portrait--wide,
.chapter > figure.portrait--wide { max-width: none; width: 100%; }
.chapter figure.portrait img { background: #dde0e3; max-width: 100%; height: auto; display: block; }
.chapter figcaption { margin-top: var(--sp-2); }

/* ---- Exhibition / press period archive -------------------- */
.decade { margin-top: var(--sp-6); }
.decade > h3 { font-size: clamp(22px, 3vw, 30px); color: var(--bronze); }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-5); }
.clip { border-top: 0.5px solid var(--divider); padding-top: var(--sp-3); }
.clip .pub { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 16px; }
.clip .date { font-style: italic; font-size: 13px; color: var(--bronze); }

/* ---- Sticky hero (single, Home) --------------------------- */
.sticky-hero { position: relative; }
@supports (position: sticky) {
  .sticky-hero .hero__figure { position: sticky; top: 12vh; }
}

/* ---- Reveal-on-scroll animation --------------------------- */
/* Only hidden when JS is active (html.js); otherwise fully visible — graceful degradation. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease, transform 600ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .sticky-hero .hero__figure { position: static; }
}