/* Pivot — styles. Values follow the Figma file (desktop 1440, mobile 402). */
:root {
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs: 18px;       /* was 20px in Figma, −10% */
  --lh: 22.5px;     /* line spacing */
  --ink: #222222;    /* site black */
  /* Every grey is the site black at a transparency — one tone everywhere (like the photo captions) */
  --muted: rgba(34, 34, 34, 0.7);   /* dark grey: inactive menu item, link hover */
  --light: rgba(34, 34, 34, 0.45);  /* light grey: current exhibition, skip icon */
  --soft: rgba(34, 34, 34, 0.04);   /* footer / field background */
  --pad: 20px;       /* page side padding */
  --gap: 20px;       /* column gap */
  --block: 60px;     /* space between blocks */
  --header: 54px;
  --dots: 54px;      /* dots row under the carousel (Figma "Dots Navigation") */
}

*, *::before, *::after { box-sizing: border-box; }
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 var(--fs)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, p, figure { margin: 0; font: inherit; }
/* Italics (titles of exhibitions, works, books; quotations): +2% tracking */
em, i { font-style: italic; letter-spacing: 0.02em; }
/* Source line under a quotation (epigraphs): a small gap, half a line */
.by { display: block; margin-top: 11px; }
/* Text selection: solid grey #919191 (= site black at 50% on white), so it looks the same
   on photos and on the grey footer; white text */
::selection { background: #919191; color: #fff; }
a { color: inherit; text-decoration: none; transition: color 0.25s ease; } /* smooth colour change on hover */
a:hover { color: var(--muted); }
/* Emails and "Download" turn grey on hover like every other link; only the "Website by …" credit underlines */
.is-busy { color: var(--muted); cursor: progress; }
[aria-current="page"] { cursor: default; }
.is-current { color: var(--light); }
/* Upcoming exhibition on the home page: plain text, not a link */
.upcoming { cursor: default; }
/* "Website by Andrew Ivanov": the whole line is the link, only the name underlines */
a.credit:hover { color: inherit; text-decoration: none; }
a.credit:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }

/* Text blocks: Figma trims text boxes to cap height / baseline.
   `text-box` does that natively; older browsers get an approximate margin. */
.t { text-box: trim-both cap alphabetic; }
@supports not (text-box: trim-both cap alphabetic) {
  .t { margin-block: -3.6px -3.6px; }
}
.t p + p { margin-top: var(--lh); }
.t p { text-wrap: pretty; } /* avoids a lonely last word in paragraphs */

/* ---------- Header (always on top) ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header);
  background: #fff;
  z-index: 100;
}
.nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--pad);
}
.nav a { color: var(--muted); }
.nav .is-active, .nav a:hover { color: var(--ink); }

/* ---------- Home ---------- */
.home {
  --air: 130px;      /* minimum space between the menu and the first exhibition */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--header) var(--pad);
}
/* The list sits in the vertical centre, but never closer than --air to the menu:
   on a short screen (or with many exhibitions) the page scrolls instead of the list creeping up. */
.home::before, .home::after { content: ""; flex: 1 1 0; }
.home::before { min-height: var(--air); }

/* ---------- Information ---------- */
.info {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--header) var(--pad);
}
.info > .cols3 { width: 100%; }
.info__col { display: flex; flex-direction: column; gap: var(--block); }
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  height: var(--header);
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  align-items: center;
  column-gap: 20px;
  padding: 0 var(--pad);
  background: #fff;
  z-index: 100;
}
.footer::-webkit-scrollbar { display: none; }
/* Footer stays one line and scrolls sideways on narrow screens (Figma "Footer scroll") */
.footer > * { flex: none; }
.muted { color: var(--muted); }
a.muted:hover { color: var(--ink); }

.cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
/* Medium screens: a third of the width is too narrow for the email form → take half */
@media (min-width: 768px) and (max-width: 1279px) {
  .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Newsletter ---------- */
/* States (Figma "Information Page – Desktop (…)" frames):
   default · button black on hover · done (thank-you text, field keeps its colour) · error (field keeps its colour, red text) */
.newsletter { display: flex; flex-direction: column; gap: 20px; }
.newsletter--info { gap: 25px; }
.newsletter__row { display: flex; gap: 20px; }
.newsletter--info .newsletter__row { gap: 15px; }
.field, .button {
  height: 34px;
  border-radius: 20px;
  background: #fff;
  transition: background-color 0.3s ease, color 0.3s ease; /* smooth hover / done state (Submit) */
}
.newsletter--info .field, .newsletter--info .button { background: var(--soft); }
.field { position: relative; flex: 1 1 auto; min-width: 0; }
.field input, .field__msg {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 15px;
  border: 0;
  background: none;
  font: inherit;
  line-height: 34px;
  color: var(--ink);
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.field input::placeholder { color: var(--ink); opacity: 1; }
.field input:focus::placeholder { color: var(--muted); }
.field input { border-radius: 20px; }
/* Browser autofill: keep our colours and rounded field instead of the browser's yellow/blue box */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 600000s 0s, color 600000s 0s;
  caret-color: var(--ink);
  animation-name: pivot-autofill;
}
.field input:autofill { background: transparent; }
@keyframes pivot-autofill { from {} to {} }
.newsletter.is-done input:-webkit-autofill,
.newsletter.is-error input:-webkit-autofill { -webkit-text-fill-color: transparent; }
.field__msg { pointer-events: none; visibility: hidden; }
.button {
  flex: none;
  border: 0;
  padding: 0 15px;
  color: var(--ink);
  font: inherit;
  line-height: 34px;
  cursor: pointer;
}

.button:hover,
.newsletter.is-done .button { background: var(--ink); color: #fff; }

.newsletter.is-done .field,
.newsletter.is-error .field { cursor: text; }
.newsletter.is-error .field__msg { color: #cb2c2a; }
.newsletter.is-done .field__msg,
.newsletter.is-error .field__msg { visibility: visible; }
.newsletter.is-done input,
.newsletter.is-error input { color: transparent; }
.newsletter.is-done input::placeholder,
.newsletter.is-error input::placeholder { color: transparent; }

/* ---------- Text pages (privacy, shows) ---------- */
.content { padding-top: calc(var(--header) + 40px); }
.texts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: 0 var(--pad);
}
.texts__col { display: flex; flex-direction: column; gap: var(--block); }

/* ---------- Extended footer ---------- */
.xfooter {
  margin-top: var(--block);
  background: var(--soft);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--block);
}
.links { display: flex; gap: 20px; }
/* Bottom links stay one line; on narrow screens they scroll sideways, edge to edge (like the Information footer) */
.links {
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
.links::-webkit-scrollbar { display: none; }
.links > * { flex: none; }

/* ---------- Gallery: desktop = pinned horizontal carousel ---------- */
.gallery { margin-top: calc(var(--block) - var(--header)); position: relative; }
/* the pinned area starts with header-high padding, so photos begin exactly --block below the text */
.gallery__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--header);
  overflow: hidden;
}
.gallery__viewport { flex: 1 1 auto; min-height: 0; position: relative; }
.gallery__track {
  display: flex;
  gap: 20px;
  height: 100%;
  will-change: transform;
}
.slide {
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: var(--ar);
}
.slide__media { position: relative; width: 100%; height: 100%; overflow: hidden; background: rgba(34, 34, 34, 0.06); border-radius: 2px; }
/* Blurred low-res preview under the photo — only visible on a slow connection.
   The blur is baked into the tiny file (no live CSS blur → cheaper on weak computers). */
.slide__media::before {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ph) center / cover no-repeat;
}
.slide__img { position: relative; width: 100%; height: 100%; object-fit: cover; }
/* A photo stays hidden until it is fully downloaded AND decoded, then appears instantly, in one go
   (no progressive "loading" look). The blurred preview only shows if that takes a while. */
.js .slide__img { opacity: 0; }
.js .slide__img.is-ready { opacity: 1; }

.js .slide__media::before { opacity: 0; transition: opacity 0.3s ease; }
.js .slide__media.is-slow::before { opacity: 1; }
.slide figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: rgba(34, 34, 34, 0.5);
  text-wrap: balance;   /* even line lengths instead of one orphan word */
}
.slide figcaption.is-light { color: rgba(255, 255, 255, 0.7); }

/* Row under the carousel: dots in the middle, "skip to footer" button on the right */
.gallery__bar { position: relative; flex: none; }
.skip {
  position: absolute;
  right: 10px; /* Figma: 10 px from the right and top/bottom of the row; at the carousel end gallery.js slides it to 20 px, in line with the last photo */
  top: 50%;
  translate: 0 -50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--light);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.4s ease, visibility 0s;
}
.skip.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: color 0.2s ease, opacity 0.4s ease, visibility 0s 0.4s; }
.skip:hover { color: var(--muted); }
.skip svg { display: block; fill: currentColor; } /* icon drawn and centred in Figma (34 × 34) */
/* Dots: a window of up to 7, sized by distance from the active slide */
.dots {
  flex: none;
  height: var(--dots);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dot {
  --k: 0.95;            /* dots scale (−5%) */
  flex: none;
  width: calc(24px * var(--k));
  height: calc(24px * var(--k));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.3s ease, opacity 0.3s ease;
}
.dot i {
  position: relative;
  display: block;
  width: calc(var(--s, 4px) * var(--k));
  height: calc(var(--s, 4px) * var(--k));
  border-radius: 10px;
  background: rgba(34, 34, 34, 0.2);
  overflow: hidden;
  transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}
.dot[data-d="1"] { --s: 10px; }
.dot[data-d="2"] { --s: 8px; }
.dot[data-d="3"] { --s: 4px; }
.dot[data-d="far"] { width: 0; opacity: 0; pointer-events: none; }
.dot.is-active { width: calc(54px * var(--k)); }
.dot.is-active i { width: calc(40px * var(--k)); height: calc(10px * var(--k)); background: rgba(34, 34, 34, 0.6); }
.dot b {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(255, 255, 255, 0.45); /* fill runs over the active pill as a lighter bar */
}
.dot:hover i { background: rgba(34, 34, 34, 0.4); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .texts { grid-template-columns: minmax(0, 1fr); }
  .cols3 { grid-template-columns: minmax(0, 1fr); }
  .info { padding-bottom: 100px; }
}

/* Gallery as a plain vertical list: phones, and any touch screen (phone turned sideways, tablets),
   where the pinned scroll-driven carousel stutters. */
@media (max-width: 767px), (hover: none) {
  .gallery { margin-top: var(--block); }
  .gallery__sticky { position: static; height: auto; padding: 0 var(--pad); overflow: visible; }
  .gallery__viewport { overflow: visible; }
  .gallery__track { flex-direction: column; gap: 30px; height: auto; transform: none !important; }
  .slide { height: auto; aspect-ratio: auto; background: none; display: flex; flex-direction: column; gap: 30px; }
  .slide__media { height: auto; aspect-ratio: var(--ar); }
  .slide__img { height: 100%; }
  .slide figcaption, .slide figcaption.is-light { position: static; color: var(--ink); }
  .gallery__bar { display: none; }
}

/* ---------- Safe areas (phones / touch screens only) ----------
   The page is allowed to use the whole screen (viewport-fit=cover in the HTML), so on phones with a
   home-indicator strip or a notch the footers keep clear of it. Where there is no such zone the
   insets are 0 and nothing changes. */
@media (max-width: 767px), (hover: none) {
  /* footers rise above the bottom strip */
  .footer {
    height: calc(var(--header) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .xfooter { padding-bottom: max(var(--pad), env(safe-area-inset-bottom, 0px)); }
  .info { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

  /* phone turned sideways: keep content out from under the notch */
  body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .header { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .footer {
    padding-left: calc(var(--pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  }
  .xfooter { /* grey background still runs edge to edge */
    margin-left: calc(-1 * env(safe-area-inset-left, 0px));
    margin-right: calc(-1 * env(safe-area-inset-right, 0px));
    padding-left: calc(var(--pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--pad) + env(safe-area-inset-right, 0px));
  }
}