/* ==========================================================================
   Paweł Dutkiewicz — site stylesheet
   Tokens per Notion → Design Direction (Color, Typography, Layout & spacing, Motion, Components).
   ========================================================================== */

/* ---- Fonts: self-hosted, never from a CDN ------------------------------ */
@font-face { font-family: 'Spectral'; font-weight: 300; font-style: normal; font-display: swap; src: url('/fonts/Spectral-Light.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Spectral-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-weight: 300; font-style: italic; font-display: swap; src: url('/fonts/Spectral-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-weight: 400; font-style: italic; font-display: swap; src: url('/fonts/Spectral-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Inter-Medium.woff2') format('woff2'); }

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Color — "Studio" */
  --color-bg:         #F7F6F2;
  --color-bg-alt:     #EFEDE7;
  --color-text:       #1A1917;
  --color-text-muted: #6B6862;
  --color-border:     #E2DFD8;
  --color-overlay:    rgba(247, 246, 242, 0.98);

  /* Typography */
  --font-display: 'Spectral', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xl:   3rem;       /* 48px */
  --font-size-lg:   1.5rem;     /* 24px */
  --font-size-base: 1.0625rem;  /* 17px */
  --font-size-sm:   0.8125rem;  /* 13px */
  --line-height-display: 1.2;
  --line-height-body:    1.75;
  --line-height-ui:      1.4;
  --weight-display: 300;
  --weight-body:    400;
  --weight-ui:      400;
  --weight-label:   500;
  --tracking-label: 0.08em;
  --font-size-nav:  0.9375rem;  /* 15px — desktop nav links only */
  --tracking-nav:   0.06em;

  /* Spacing — 4px base */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2rem;
  --space-6:  3rem;
  --space-7:  4rem;
  --space-8:  6rem;
  --space-9:  7.5rem;
  --space-10: 10rem;

  /* Widths */
  --max-content: 1440px;
  --max-wide:    1760px;
  --max-text:    38rem;
  --margin-page: var(--space-7);
  --vw: 100vw;                 /* replaced by site.js with the screen width minus the scrollbar */

  /* Rhythm */
  --section-gap: var(--space-9);
  --page-top:    var(--space-6);   /* was --space-8; reduced per Misha 2026-09-02 (less air under the masthead) */
  --page-bottom: var(--space-10);
  --nav-height:  var(--space-7);   /* was --space-8 (96px); now 64px per Misha 2026-09-02 */

  /* Hang line */
  --hang-height:            22rem;   /* Works page */
  --hang-height-exhibition: 26rem;   /* exhibition pages, ~20% taller */
  --hang-gap:               var(--space-6);

  /* Motion */
  --transition-speed:  200ms;
  --transition-easing: ease;
}

@media (max-width: 1023px) {
  :root {
    --section-gap: var(--space-8);
    --hang-height: 16rem;
    --hang-height-exhibition: 19rem;
    --hang-gap: var(--space-5);
  }
}
@media (max-width: 767px) {
  :root {
    --font-size-xl: 2rem;
    --font-size-lg: 1.25rem;
    --margin-page: var(--space-4);
    --section-gap: var(--space-7);
    --page-top: var(--space-5);
    --page-bottom: var(--space-8);
    --nav-height: 3.5rem;
  }
}

/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--weight-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}
body.lightbox-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--line-height-display); }
h1 { font-size: var(--font-size-xl); }
h2 { font-size: var(--font-size-lg); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
:focus-visible { outline: 1px solid var(--color-text); outline-offset: 4px; }

.wrap       { padding-left: var(--margin-page); padding-right: var(--margin-page); }
.max-content{ max-width: var(--max-content); margin-left: auto; margin-right: auto; }
.max-wide   { max-width: var(--max-wide); margin-left: auto; margin-right: auto; }
.max-text   { max-width: var(--max-text); }

/* Text roles */
.ui, .label, .eyebrow, .meta {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-ui);
}
.label, .eyebrow { letter-spacing: var(--tracking-label); text-transform: uppercase; }
.meta  { color: var(--color-text-muted); }
.eyebrow { color: var(--color-text-muted); font-weight: var(--weight-label); }
.subtitle { font-family: var(--font-ui); font-size: var(--font-size-sm); letter-spacing: var(--tracking-label); color: var(--color-text-muted); }

/* Body-copy links: underline on hover only */
.prose a { border-bottom: 1px solid transparent; transition: border-color var(--transition-speed) var(--transition-easing); }
.prose a:hover { border-bottom-color: var(--color-text); }

/* Text-button (no fills, no radius) */
.text-button {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--transition-speed) var(--transition-easing);
}
.text-button:hover { border-bottom-color: var(--color-text); }

/* ---- Masthead ---------------------------------------------------------- */
.masthead {
  position: relative;
  z-index: 60;                      /* keeps the name visible above the mobile menu overlay */
}
.masthead__bar {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--margin-page);
  padding-right: var(--margin-page);
}
.masthead__name {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-display);
  line-height: 1;
  transition: opacity var(--transition-speed) var(--transition-easing);
}
.masthead__name:hover { opacity: 0.7; }
.masthead__nav { display: flex; gap: var(--space-5); }
.nav-link {
  font-family: var(--font-ui);
  font-size: var(--font-size-nav);      /* 15px — raised from 13px on 2026-09-08 to balance the 24px name */
  font-weight: var(--weight-ui);
  letter-spacing: var(--tracking-nav);
  color: var(--color-text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-speed) var(--transition-easing);
}
.nav-link:hover { color: var(--color-text); }
.nav-link.is-active { color: var(--color-text); border-bottom-color: var(--color-text); }

/* ---- Exhibitions submenu (desktop only) --------------------------------
   Not a floating panel: a full-width band on the page ground, so the masthead reads as opening
   rather than as a popup appearing. No box, no shadow — a single hairline along the bottom,
   inset to the content width exactly like the footer rule. Fade only, per Motion. */
/* In normal flow, not overlaid: opening lengthens the masthead and the page moves down with it.
   grid-template-rows 0fr → 1fr animates to the content's own height without hard-coding one. */
.submenu {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--color-bg);
  transition: grid-template-rows var(--transition-speed) var(--transition-easing);
}
.masthead.submenu-open .submenu { grid-template-rows: 1fr; }
.submenu__clip {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;               /* collapsed content must not be tabbable or clickable */
  opacity: 0;
  transition: opacity var(--transition-speed) var(--transition-easing),
              visibility var(--transition-speed) var(--transition-easing);
}
.masthead.submenu-open .submenu__clip { visibility: visible; opacity: 1; }
.submenu__inner {
  margin: 0 var(--margin-page);          /* matches the masthead's own insets exactly, at any width */
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.submenu__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-6);
  padding-top: var(--space-4);
}
.submenu__link { display: block; }
.submenu__title {
  display: block;
  font-family: var(--font-display);          /* exhibition titles are Spectral everywhere else on the site */
  font-size: var(--font-size-lg);
  font-weight: var(--weight-display);
  line-height: var(--line-height-display);
  color: var(--color-text);
  transition: opacity var(--transition-speed) var(--transition-easing);
}
.submenu__link:hover .submenu__title { opacity: 0.55; }   /* same hover language as the exhibition cards */
.submenu__link.is-current .submenu__title {
  display: inline-block;
  border-bottom: 1px solid var(--color-text);   /* the active-nav hairline, reused */
  padding-bottom: 4px;
}
.submenu__sub {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-label);
  line-height: var(--line-height-ui);
  color: var(--color-text-muted);
}
@media (max-width: 1023px) { .submenu__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .submenu { display: none !important; } }

.masthead__toggle { display: none; width: 28px; height: 28px; position: relative; }
.masthead__toggle span { position: absolute; left: 2px; right: 2px; height: 1px; background: var(--color-text); }
.masthead__toggle span:nth-child(1) { top: 9px; }
.masthead__toggle span:nth-child(2) { top: 17px; }
.masthead__toggle.is-open span:nth-child(1) { top: 13px; transform: rotate(45deg); }
.masthead__toggle.is-open span:nth-child(2) { top: 13px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--color-bg);
  display: none;
  flex-direction: column;
  padding: var(--nav-height) var(--margin-page) 0;
  opacity: 0;
  transition: opacity var(--transition-speed) var(--transition-easing);
}
.mobile-menu.is-visible { display: flex; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--weight-display);
  line-height: 1.1;
  margin-top: var(--space-5);
}
.mobile-menu a.is-active { border-bottom: 1px solid var(--color-text); align-self: flex-start; }

@media (max-width: 767px) {
  .masthead__nav { display: none; }
  .masthead__toggle { display: block; position: relative; z-index: 60; }
}

/* ---- Page structure ---------------------------------------------------- */
main { padding-top: var(--page-top); padding-bottom: var(--page-bottom); }
.section + .section { margin-top: var(--section-gap); }
.page-title { margin-bottom: var(--space-5); }
.page-title + .subtitle { display: block; margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-5); }
.heading { margin-bottom: var(--space-5); }
.section-heading { margin-top: var(--section-gap); margin-bottom: var(--space-5); }
.full-bleed { width: 100%; }

/* ---- Placeholder slots (🧱 protocol): grey block, muted centred label -- */
.placeholder {
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3);
}
.placeholder__label {
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.placeholder--video   { aspect-ratio: 16 / 9; }
.placeholder--video-quiet { aspect-ratio: 21 / 9; max-height: 40vh; }   /* exhibition video slot: quieter band until video exists */
.placeholder--text    { min-height: 9rem; }
.placeholder--photo   { aspect-ratio: 3 / 4; }
.placeholder--inline  { min-height: 3.25rem; max-width: 22rem; }

/* ---- Native video (R2, no third-party player) -------------------------- */
.video { width: 100%; height: auto; display: block; background: var(--color-bg-alt); }

/* Hero: a silent looping film cropped to fill its band — no letterboxing, no distortion.
   The band is a fixed height and the video covers it; whatever does not fit is cropped. */
.hero {
  position: relative;
  width: 100%;
  height: 78vh;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.video--hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fills the band, crops the overflow, never stretches */
  object-position: 50% 50%;
  background: transparent;
  pointer-events: none;       /* nothing to click: it is imagery, not a player */
}
/* Belt and braces — hide any native chrome a browser might still draw */
.video--hero::-webkit-media-controls,
.video--hero::-webkit-media-controls-enclosure,
.video--hero::-webkit-media-controls-panel,
.video--hero::-webkit-media-controls-start-playback-button { display: none !important; opacity: 0 !important; }

@media (max-width: 767px) {
  /* A 16:9 film cropped into a tall phone band would show only a sliver of the frame */
  .hero { height: 56vh; }
}
/* Visitors who ask their system to reduce motion get a held first frame instead of a loop —
   a video cannot be paused from CSS, so that is handled in site.js. */

/* ---- Artist photograph (About) ---------------------------------------- */
.about-top img { width: 100%; height: auto; }

/* ---- Image fade-in on load -------------------------------------------- */
.fade-img { opacity: 0; transition: opacity var(--transition-speed) var(--transition-easing); }
.fade-img.is-loaded { opacity: 1; }

/* ---- Exhibition cover cards — UNIFORM cells (not the hang line) -------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
  row-gap: var(--space-8);
}
.card { display: block; }
.card__image {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}
.card__image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.card__title { margin-top: var(--space-3); font-size: var(--font-size-lg); font-weight: var(--weight-display); transition: opacity var(--transition-speed) var(--transition-easing); }
.card:hover .card__title { opacity: 0.6; }
.card__subtitle { margin-top: var(--space-1); }
@media (max-width: 1023px) { .card-grid { column-gap: var(--space-5); } }
@media (max-width: 767px)  { .card-grid { grid-template-columns: 1fr; row-gap: var(--space-7); } }

/* ---- Hang line — individual paintings, common height, natural widths --- */
.hang-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hang-gap);
  align-items: flex-end;
}
.hang-item {
  display: block;
  --hang-base: var(--hang-height);  /* read by site.js for row justification */
  height: var(--hang-height);       /* site.js may set an inline height within ±15% of this */
  flex: 0 0 auto;
  aspect-ratio: var(--ar, 1);       /* set inline per painting from content.js dimensions */
  transition: opacity var(--transition-speed) var(--transition-easing);
}
.hang-wall--exhibition .hang-item { --hang-base: var(--hang-height-exhibition); height: var(--hang-height-exhibition); }
.hang-item:hover { opacity: 0.85; }
.hang-item img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) {
  .hang-wall { flex-direction: column; gap: var(--space-5); align-items: stretch; }
  .hang-item, .hang-wall--exhibition .hang-item { height: auto !important; width: 100%; }
}

/* ---- Walk column: the house layout for paintings -----------------------
   Paintings one beneath the next, centred on the page axis, each scaled so the whole work fits on
   one screen. Nothing cropped, no captions. Used by the Works page and every exhibition page since
   2026-09-10; it began as the layout study in /examples/. */
.walk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-9);                 /* 120px between works */
}
.walk-item { display: block; max-width: 100%; transition: opacity var(--transition-speed) var(--transition-easing); }
.walk-item:hover { opacity: 0.85; }
.walk-item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
/* Desktop: full screen. The column escapes its container to both edges of the screen, and each
   painting may use the whole width and almost the whole height (Misha, 2026-09-09).
   --vw is the screen width without the scrollbar, published by site.js; 100vw would include the
   scrollbar and put a horizontal one on the page. The fallback below applies before that runs. */
@media (min-width: 768px) {
  .walk {
    margin-left: calc(50% - var(--vw) / 2);
    margin-right: calc(50% - var(--vw) / 2);
  }
  .walk-item img { max-height: calc(100vh - var(--space-6)); }   /* 48px of ground above and below at most */
}
@media (max-width: 767px) { .walk { gap: var(--space-7); } }
.study-note { margin-bottom: var(--space-5); }

/* ---- Exhibition page --------------------------------------------------- */
.exhibition-video { margin-bottom: var(--section-gap); }
.exhibition-nav {
  margin-top: var(--section-gap);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
}
.exhibition-nav a { display: flex; flex-direction: column; gap: var(--space-2); max-width: 45%; transition: opacity var(--transition-speed) var(--transition-easing); }
.exhibition-nav a:hover { opacity: 0.6; }
.exhibition-nav a.is-next { text-align: right; margin-left: auto; }
.exhibition-nav__title { font-size: var(--font-size-lg); font-weight: var(--weight-display); }
.quote { margin: var(--space-6) 0 0; font-style: italic; }
.quote cite { display: block; margin-top: var(--space-3); font-style: normal; }
.signature { margin-top: var(--space-4); }

/* ---- Exhibition text: uses the width on desktop ------------------------
   A single 38rem column left the right half of a 1440px screen empty and made a short text
   tall. Commentary runs in two balanced columns (each line stays within a comfortable measure);
   the block is capped so each column is never wider than --max-text. */
/* The text block shares the paintings' width (the .max-wide inner), so its right edge lines up with
   the wall below it instead of stopping short on wide screens (Misha, 2026-09-08). At 1440px this is
   identical to two --max-text columns; above that the columns grow with the paintings. */
.exhibition-text { max-width: none; }
.prose--wide { max-width: none; }          /* single-paragraph commentary: one column, same full width as the two-column block */
.prose--columns {
  column-count: 2;
  column-gap: var(--space-8);
  orphans: 3;
  widows: 3;
}
@media (min-width: 1600px) { .prose--columns { column-gap: var(--space-9); } }   /* a little more air between wider columns */
.prose--columns .signature { break-before: avoid; }
@media (max-width: 1023px) { .prose--columns { column-count: 1; } }

/* ---- Opening remarks (below the paintings) ------------------------------
   Heading and context line across the top; then the speakers side by side, one column each,
   under a single hairline. Each shows name, first paragraph, and a "More" control. */
.opening { margin-top: var(--section-gap); }   /* shares the paintings' width, like the commentary above */
.opening__heading { margin-bottom: var(--space-2); }
.opening__context { display: block; margin-bottom: var(--space-6); }
.opening__speakers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-7);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
.opening__speakers[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opening__speakers[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: var(--max-text); }
.speaker__name { margin-bottom: var(--space-3); }
@media (max-width: 1023px) {
  .opening__speakers { grid-template-columns: minmax(0, 1fr) !important; border-top: 0; padding-top: 0; }
  .speaker { padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--color-border); }
}
.more { margin-top: var(--space-3); }
.more__toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-speed) var(--transition-easing), border-color var(--transition-speed) var(--transition-easing);
}
.more__toggle::-webkit-details-marker { display: none; }
.more__toggle:hover { color: var(--color-text); border-bottom-color: var(--color-text); }
.more__icon { display: inline-flex; transition: transform var(--transition-speed) var(--transition-easing); }
.more[open] .more__icon { transform: rotate(45deg); }
.more__label--close { display: none; }
.more[open] .more__label--open { display: none; }
.more[open] .more__label--close { display: inline; }
.more__body { padding-top: var(--space-4); }

/* ---- About / Contact --------------------------------------------------- */
.about-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: start; }
@media (max-width: 1023px) { .about-top { column-gap: var(--space-6); } }
@media (max-width: 767px)  { .about-top { grid-template-columns: 1fr; row-gap: var(--space-6); } }
.cv-section { max-width: var(--max-text); border-top: 1px solid var(--color-border); }
.cv-section:last-of-type { border-bottom: 1px solid var(--color-border); }
.cv-section summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0;
  transition: color var(--transition-speed) var(--transition-easing);
}
.cv-section summary::-webkit-details-marker { display: none; }
.cv-section summary:hover { color: var(--color-text); }
.cv-section summary .eyebrow { transition: color var(--transition-speed) var(--transition-easing); }
.cv-section summary:hover .eyebrow { color: var(--color-text); }
.cv-section summary svg { flex: 0 0 auto; color: var(--color-text-muted); transition: transform var(--transition-speed) var(--transition-easing); }
.cv-section[open] summary svg { transform: rotate(45deg); }
.cv-section .cv-list { padding-bottom: var(--space-3); }
.cv-list { list-style: none; margin: 0; padding: 0; max-width: var(--max-text); }
.cv-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-4); padding: var(--space-2) 0; }
.cv-list .year { font-family: var(--font-ui); font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--line-height-body); padding-top: 0.15em; }
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { padding: var(--space-2) 0; }
.contact-block { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* ---- Footer ------------------------------------------------------------ */
.footer {
  margin-left: var(--margin-page);
  margin-right: var(--margin-page);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-7);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.footer a { border-bottom: 1px solid transparent; transition: border-color var(--transition-speed) var(--transition-easing), color var(--transition-speed) var(--transition-easing); }
.footer a:hover { color: var(--color-text); border-bottom-color: var(--color-text); }
@media (max-width: 767px) { .footer { flex-direction: column; gap: var(--space-2); } }

/* ---- Not found page ---------------------------------------------------- */
.notfound-links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }

/* ---- Lightbox — fullscreen light overlay with OpenSeadragon ------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: var(--color-overlay);
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--transition-speed) var(--transition-easing);
}
.lightbox.is-visible { display: flex; }
.lightbox.is-open { opacity: 1; }
.lightbox__close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 3;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--transition-speed) var(--transition-easing);
}
.lightbox__close:hover { color: var(--color-text); }
.lightbox__close svg, .lightbox__arrow svg { display: block; }
.lightbox__meta {
  text-align: center;
  padding: var(--space-6) calc(var(--space-7) + 44px) var(--space-4);
  min-height: 7rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1);
}
.lightbox__eyebrow a { border-bottom: 1px solid transparent; transition: border-color var(--transition-speed) var(--transition-easing); }
.lightbox__eyebrow a:hover { border-bottom-color: var(--color-text-muted); }
.lightbox__title   { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: var(--weight-display); color: var(--color-text); }
.lightbox__details { font-family: var(--font-ui); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.lightbox__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--space-7) + 44px) var(--space-6); }
.lightbox__viewer { width: 100%; max-width: var(--max-wide); height: 70vh; }
.lightbox__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--transition-speed) var(--transition-easing);
}
.lightbox__arrow:hover { color: var(--color-text); }
.lightbox__arrow--prev { left: var(--space-4); }
.lightbox__arrow--next { right: var(--space-4); }
.lightbox__arrow[hidden] { display: none; }
.lightbox__note { text-align: center; padding: 0 var(--space-4) var(--space-4); }
.lightbox__controls {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 3;
  display: flex; gap: var(--space-1);
}
.lightbox__controls button {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: color var(--transition-speed) var(--transition-easing);
}
.lightbox__controls button:hover { color: var(--color-text); }
.lightbox:fullscreen { background: var(--color-bg); }
@media (max-width: 767px) {
  .lightbox__meta { padding: var(--space-6) 60px var(--space-3); min-height: 0; }  /* 60px clears the ✕ on both sides so long exhibition names wrap */
  .lightbox__stage { padding: 0 0 var(--space-4); }
  .lightbox__viewer { height: 55vh; }
  .lightbox__arrow--prev { left: 0; }
  .lightbox__arrow--next { right: 0; }
  .lightbox__close { top: var(--space-3); right: var(--space-3); }
  .lightbox__controls { left: 50%; transform: translateX(-50%); bottom: var(--space-3); }
}
/* OpenSeadragon: keep the viewer on the warm ground, no frame */
.openseadragon-container { background: transparent !important; }