/* ==========================================================================
   Luis Alberto Saldaña — site styles
   Light theme by default; dark ("night") theme via [data-theme="dark"] on <html>.
   ========================================================================== */

:root {
  /* Outfit "Galería blanca": a white gallery wall, night-blue ink, the deep sea blue of his canvases as accent */
  --bg: #ffffff;
  --surface: #f4f6f7;
  --ink: #1b2430;
  --ink-soft: #3c4652;
  --muted: #6b7480;
  --line: #e3e6ea;
  --accent: #1f4f7a;
  --accent-ink: #ffffff;
  --overlay: rgba(255, 255, 255, 0.97);
  --shadow: 0 1px 2px rgba(27, 36, 48, 0.06), 0 8px 24px rgba(27, 36, 48, 0.08);

  /* Bodoni Moda at the text optical size (opsz 11, fixed in the Google Fonts link): its display cut, which browsers chose
     on their own for big type, has hairlines so fine that they vanished on ordinary laptop screens (Luis, 2026-10-17) */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1440px;
  --header-h: 84px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1218;
  --surface: #151c24;
  --ink: #e8ecef;
  --ink-soft: #c3cbd2;
  --muted: #8c97a1;
  --line: #232d37;
  --accent: #7fb0d6;
  --accent-ink: #0d1218;
  --overlay: rgba(9, 13, 18, 0.97);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Even, full-height numerals everywhere (Cormorant defaults to old-style figures) */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--surface); padding: 8px 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.4s var(--ease), height 0.45s var(--ease), margin-bottom 0.45s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* on a computer the bar also slims down once the page has scrolled (84 → 60 px). The space it gives up becomes a margin
   under it, so the page below does not jump while it shrinks (Luis, 2026-10-18) */
@media (min-width: 1101px) {
  .site-header.is-compact { height: 60px; margin-bottom: 24px; }
  .site-header.is-compact .wordmark__mark { width: 34px; height: 34px; }
}
/* a masthead: the name in Bodoni on the left, in its own case; the menu, language and day/night on the right */
.site-header__row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header__end { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
}
.wordmark:hover { color: var(--accent); }
/* in the masthead the name carries a small line under it, in the site's small caps (Luis, 2026-10-18) */
.wordmark--masthead { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.wordmark__role { margin-top: 7px; font-family: var(--font-body); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); transition: color 0.25s var(--ease); }
.wordmark--masthead:hover .wordmark__role { color: var(--accent); }
/* once the page has scrolled the name and its line fade out and the LS monogram takes their place (Luis, 2026-10-18):
   the big name of the home page then never passes under a second one */
.wordmark--masthead { position: relative; }
.wordmark__name, .wordmark__role { transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-out); }
.wordmark__mark { position: absolute; left: 0; top: 50%; width: 40px; height: 40px; border-radius: 8px; opacity: 0; transform: translateY(-50%) scale(0.85); transition: opacity 0.45s var(--ease), transform 0.6s var(--ease-out); pointer-events: none; }
.site-header.is-compact .wordmark__name, .site-header.is-compact .wordmark__role { opacity: 0; transform: translateY(-4px); }
.site-header.is-compact .wordmark__mark { opacity: 1; transform: translateY(-50%) scale(1); }
/* the home page on a phone opens with the big name right under the picture: the bar shows only the monogram there
   (on a computer the name stays in the bar, with more air above the picture) */
@media (max-width: 1100px) {
  .page-home .wordmark__name, .page-home .wordmark__role { opacity: 0; }
  .page-home .wordmark__mark { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
[data-theme="dark"] .wordmark__mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }

.site-nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
/* menu: the current page and the one under the mouse are underlined with a thin wave, in the sea blue */
.site-nav a {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 4px;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
/* seven pages since Publications: on small laptops (1101–1280 px) the menu closes up a little so it all still fits */
@media (min-width: 1101px) and (max-width: 1280px) { .site-nav { gap: 15px; } .site-nav a { font-size: 1.02rem; } }
@media (min-width: 1101px) and (max-width: 1200px) { .site-nav { gap: 12px; } .site-nav a { font-size: 0.97rem; } .site-header__end { gap: 12px; } } /* «Crítica y prensa» is long */
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* A thin, smooth swell under a link that flows from right to left like the water in the paintings: it unrolls
   from the right on hover and keeps moving; under the current page it stays, drifting slowly.
   Used by the menu and the viewer's "Inquire" link. (A line drawn in the sea blue, cut by a repeating wave mask.) */
:root { --swell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 C3 3 3 1.2 6 1.2 S9 3 12 3 S15 4.8 18 4.8 S21 3 24 3' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E"); }
.site-nav a::after,
.lightbox__inquire::after,
.press-pick__more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  background: var(--accent);
  -webkit-mask: var(--swell) 0 50% / 24px 6px repeat-x;
  mask: var(--swell) 0 50% / 24px 6px repeat-x;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.7s var(--ease-out);
  animation: swell-flow 1.6s linear infinite paused;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .lightbox__inquire:hover::after, .press-pick:hover .press-pick__more::after { clip-path: inset(0); animation-play-state: running; }
.site-nav a[aria-current="page"]::after { clip-path: inset(0); animation-duration: 4.8s; animation-play-state: running; }
@keyframes swell-flow { to { -webkit-mask-position: -24px 50%; mask-position: -24px 50%; } }

/* language: a small capsule with both languages, the current one in a filled oval */
.lang-switch { display: inline-flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; }
.lang-switch a { display: grid; place-items: center; min-width: 32px; height: 24px; padding: 0 8px 0 10px; border-radius: 999px; text-decoration: none; color: var(--muted); transition: color 0.25s var(--ease), background-color 0.3s var(--ease); }
.lang-switch a:hover { color: var(--accent); }
.lang-switch a[aria-current="true"] { background: var(--ink); color: var(--bg); }

/* day / night: a capsule switch, the sun on the left and the moon on the right; a disc slides under the one in use */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: transform 0.5s var(--ease-out); }
:root[data-theme="dark"] .theme-toggle::before { transform: translateX(22px); }
.theme-toggle svg { position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; transition: color 0.35s var(--ease); }
.theme-toggle .icon-sun { left: 6.5px; color: var(--bg); }
.theme-toggle .icon-moon { right: 6.5px; }
:root[data-theme="dark"] .theme-toggle .icon-sun { color: var(--muted); }
:root[data-theme="dark"] .theme-toggle .icon-moon { color: var(--bg); }
/* the full drop's glint is a line of whatever lies behind it: the disc by day, the page by night */
.theme-toggle .icon-sun .glint { stroke: var(--ink); opacity: 0.6; }
:root[data-theme="dark"] .theme-toggle .icon-sun .glint { stroke: var(--bg); }

/* below a laptop's width (tablets, phones): the three-line menu button, the name centred, and the dropdown */
.menu-toggle, .mobile-menu { display: none; }
@media (max-width: 1100px) {
  :root { --header-h: 64px; }
  .site-header__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; }
  .site-header__end { display: contents; }
  .site-header .site-nav, .site-header__end > .lang-switch { display: none; }
  .wordmark { flex: none; justify-self: center; font-size: clamp(1.1rem, 5vw, 1.45rem); }
  .wordmark--masthead { align-items: center; }
  .wordmark__mark { left: 50%; width: 36px; height: 36px; transform: translate(-50%, -50%) scale(0.85); }
  .site-header.is-compact .wordmark__mark { transform: translate(-50%, -50%) scale(1); }
  .wordmark__role { margin-top: 5px; font-size: 0.56rem; letter-spacing: 0.26em; }
  .theme-toggle { justify-self: end; transform: scale(0.9); transform-origin: right center; }
  .menu-toggle {
    display: grid; align-content: center; gap: 5px; justify-self: start;
    width: 44px; height: 44px; padding: 0 11px 0 0; margin: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  }
  .menu-toggle span { display: block; height: 1.5px; width: 22px; background: currentColor; border-radius: 1px; transition: transform 0.35s var(--ease), opacity 0.2s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* the menu covers the page under the header (a dimmed backdrop that closes it when tapped) instead of locking the
     page's scroll: overflow:hidden on the page breaks the sticky header once the page has been scrolled */
  .mobile-menu:not([hidden]) {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    background: rgba(13, 18, 24, 0.28);
    animation: menu-fade 0.25s var(--ease-out);
  }
  .mobile-menu .container {
    display: flex; flex-direction: column; padding-block: 8px 22px;
    background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(27, 36, 48, 0.12);
    animation: menu-drop 0.35s var(--ease-out);
  }
  .mobile-menu a:not([data-lang]) {
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-size: 1.45rem; text-decoration: none; color: var(--ink);
  }
  .mobile-menu a[aria-current="page"] { color: var(--accent); }
  .mobile-menu__lang { align-self: flex-start; margin-top: 20px; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes menu-fade { from { opacity: 0; } }
@media (max-width: 420px) {
  .lang-switch { padding: 2px; }
  .lang-switch a { min-width: 28px; height: 22px; padding: 0 6px 0 8px; }
}

/* ---------- Hero (home): the canvas wide across the top, the name large beneath it ---------- */
.hero { padding-block: clamp(8px, 2vh, 24px) clamp(36px, 5vh, 60px); }
/* The canvas runs the full width of the page as a tall band (cropped top and bottom); the whole work opens in the viewer */
/* a hairline as wide as the painting closes it off under its caption, and parts it from the name (Luis, 2026-10-18) */
.hero__figure { margin: 0; padding-bottom: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid var(--line); }
.hero__media [data-parallax] { transform: none !important; } /* no drift: the water canvas stays aligned with the image */
/* the band keeps one shape on every laptop and desktop, 2:1 to the page's width (up to 760 px high): set by the
   screen's height it went thin on short laptop screens */
.hero__figure img { width: 100%; height: auto; aspect-ratio: 2 / 1; max-height: 760px; object-fit: cover; }
/* the parallax drift stays inside the frame, so the canvas never slides onto its caption */
.hero__media { overflow: hidden; }
.hero__figure figcaption { margin-top: 14px; text-align: right; line-height: 1.3; font-size: 0.78rem; color: var(--muted); }
.hero__figure figcaption .work__title { font-size: 0.98rem; color: var(--ink-soft); }
.hero__year { letter-spacing: 0.04em; }
.hero__whole { text-decoration: none; color: inherit; }
.hero__whole:hover .work__title { color: var(--accent); }
/* the words under the picture, one centred column (Luis, 2026-10-18): the name small, on one line, with «Visual artist»
   under it; his phrase about water carries the weight, then the sentence and the button */
.hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; margin: clamp(40px, 4.6vw, 68px) auto 0; max-width: 1120px; }
.hero__text h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); line-height: 1.05; letter-spacing: -0.005em; text-wrap: balance; }
.hero__side { display: flex; flex-direction: column; align-items: center; }
.hero__side .eyebrow { margin: 16px 0 0; font-size: clamp(0.95rem, 1.25vw, 1.15rem); letter-spacing: 0.24em; color: var(--ink-soft); } /* a little bigger than the other small labels (Luis, 2026-10-18) */
.hero__statement { position: relative; font-family: var(--font-display); font-size: clamp(1.35rem, 1.95vw, 1.85rem); line-height: 1.25; color: var(--ink); margin: 0 0 0.9rem; padding-top: clamp(22px, 2.2vw, 28px); text-wrap: balance; }
/* the separator: a short swell of water in the sea blue, the same wave that underlines the menu (Luis, 2026-10-18) */
.hero__statement::before { content: ""; position: absolute; top: 0; left: 50%; width: 60px; height: 8px; background: var(--accent); transform: translateX(-50%); -webkit-mask: var(--swell) 0 50% / 20px 8px repeat-x; mask: var(--swell) 0 50% / 20px 8px repeat-x; }
.hero__side .eyebrow + .hero__statement { margin-top: clamp(14px, 1.6vw, 20px); }
.hero__lede { font-size: clamp(1.02rem, 1.15vw, 1.15rem); line-height: 1.65; color: var(--ink-soft); max-width: 60ch; margin: 0; text-wrap: balance; }

@media (max-width: 860px) {
  .hero__figure img { height: 56svh; aspect-ratio: auto; }
  .hero__text { margin-top: 32px; }
  .hero__figure { padding-bottom: 20px; }
  .hero__figure figcaption { text-align: center; } /* in line with the centred words under it */
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.link-arrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.link-arrow::after { content: " →"; transition: margin 0.25s var(--ease); }
.link-arrow:hover::after { margin-left: 6px; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 7.5vw, 112px); } /* up to ~220 px between two sections, not 320 */
.section--rule { border-top: 1px solid var(--line); }
.section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section__head h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }

/* Feature: latest series */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.feature__text { position: sticky; top: calc(var(--header-h) + 40px); }
.feature__text h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); margin-bottom: 1.5rem; }
.feature__text p { color: var(--ink-soft); max-width: 46ch; }
.feature__text .link-arrow { display: inline-block; margin-top: 1.5rem; }
.feature__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.feature__grid .work:nth-child(even) { margin-top: clamp(40px, 8vw, 120px); }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature__text { position: static; }
}

/* Statement quote */
.statement { text-align: center; }
.statement blockquote {
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-style: italic;
  line-height: 1.35; /* Bodoni's tall ascenders and descenders need the room */
}
.statement blockquote::before { content: ""; display: block; width: 40px; height: 1px; background: var(--accent); margin: 0 auto 2.5rem; }
.statement cite { display: block; margin-top: 2rem; font-style: normal; }

/* Home, the artist: his opening sentence large on the left, the wide studio photo on the right (it is a
   landscape picture, shown whole), then a strip of figures counted from the CV, numerals in the display face */
.artist__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* the text sits at mid-height of the photo itself: the room its caption takes below is added under the text too (Luis, 2026-10-18) */
@media (min-width: 861px) { .artist__text { padding-bottom: calc(10px + 0.8rem * 1.6); } }
.artist__lead { margin: 1rem 0 1.6rem; font-family: var(--font-display); font-size: clamp(1.7rem, 2.9vw, 2.6rem); line-height: 1.22; color: var(--ink); text-wrap: balance; }
.artist__photo { margin: 0; }
.artist__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--line); }
.artist__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.artist__photo figcaption { margin-top: 10px; font-size: 0.8rem; color: var(--muted); }
.artist__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 6vw, 80px) 0 0; border-top: 1px solid var(--ink); }
.artist__facts > div { padding: 22px 20px 0 0; }
.artist__facts > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.artist__facts dt { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1.3; color: var(--ink); font-variant-numeric: lining-nums; } /* Bodoni's box is tall: room so the label never touches it */
.artist__facts dd { margin: 14px 0 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) {
  .artist__top { grid-template-columns: 1fr; gap: 28px; }
  /* phones: two by two, each figure centred in its cell */
  .artist__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
  .artist__facts > div, .artist__facts > div + div { padding: 22px 10px 22px; }
  .artist__facts > div:nth-child(odd) { border-left: 0; }
  .artist__facts > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Press page: the selected pieces open the page, above the index by year */
.press-featured { padding-bottom: clamp(56px, 7vw, 96px); }

/* Upcoming / recent fairs list */
.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.events li {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 24px clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.events .events__year { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; }
.events .events__name { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.2; max-width: 32ch; text-wrap: balance; } /* breaks early: never running up to the place */
.events .events__place { color: var(--muted); font-size: 0.9rem; text-align: right; }
@media (max-width: 600px) {
  .events li { grid-template-columns: 1fr; gap: 4px; }
  .events .events__place { text-align: left; }
}

/* ---------- Details ("Up close") ---------- */
.details { padding-block: clamp(56px, 7.5vw, 112px); position: relative; }
.details__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.details__head h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.details__intro { max-width: 44ch; margin: 0; color: var(--ink-soft); }

/* Default: a native, swipeable row (phones, no-JS, reduced motion) */
.details__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.details__viewport::-webkit-scrollbar { display: none; }
.details__track {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  width: max-content;
  padding-inline: var(--gutter);
}
.detail { margin: 0; width: min(78vw, 420px); scroll-snap-align: center; }
.detail__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--line);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
}
.detail__open img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out), opacity 0.6s; }
.detail__open:hover img { transform: scale(1.06); }
.detail figcaption { margin-top: 12px; font-size: 0.8rem; color: var(--muted); }
.detail__num { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.details__progress { display: none; }

/* Wide screens with motion: the section pins and the strip travels sideways (main.js) */
.details.is-pinned { padding-block: 0; }
.details.is-pinned .details__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.details.is-pinned .details__viewport { overflow: visible; scroll-snap-type: none; }
.details.is-pinned .details__track { will-change: transform; padding-inline: var(--gutter) 30vw; }
.details.is-pinned .detail { width: min(38vw, 62vh); }
.details.is-pinned .details__head { margin-bottom: clamp(24px, 3vh, 40px); }
.details.is-pinned .details__progress {
  display: block;
  height: 1px;
  margin-top: clamp(20px, 3vh, 36px);
  background: var(--line);
}
.details__progress span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* ---------- Series cards ---------- */
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(16px, 2.5vw, 32px);
}
.series-card { text-decoration: none; display: block; }
.series-card__media { overflow: hidden; background: var(--line); aspect-ratio: 4 / 5; }
.series-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%); /* a series can aim its crop: "cover_focus" [x %, y %] in works.json */
  transition: transform 1.2s var(--ease), opacity 0.6s;
}
.series-card:hover .series-card__media img { transform: none; }
/* title above its years and count: long series names (Transvertebrados) never collide with the count */
.series-card__meta { display: grid; gap: 6px; margin-top: 16px; }
.series-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.series-card:hover h3 { color: var(--accent); }
.series-card__count { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em; white-space: nowrap; }

/* ---------- Page header ---------- */
.page-head { padding-block: clamp(40px, 6vw, 96px) clamp(28px, 4vw, 52px); }
/* the longest word (--w letters, Bodoni about 0.53 em each) always fits across the screen */
.page-head h1, .series-hero h1 { font-size: min(clamp(3rem, 8vw, 6.5rem), calc((100vw - 2 * var(--gutter)) / (var(--w, 1) * 0.56))); }
.page-head__intro {
  margin-top: 1.75rem;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.page-head__intro p { margin: 0 0 1em; }
/* Works page: the artist statement in two columns across the page on wider screens, one on phones */
.page-head__intro.works-statement { max-width: none; columns: 2 30ch; column-gap: clamp(32px, 5vw, 80px); }
.works-statement p { break-inside: avoid; }
.works-statement__title { column-span: all; margin: 0 0 1.4rem; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.2; color: var(--ink); }
.works-statement .works-statement__more { column-span: all; margin-top: 0.6em; }
.breadcrumb { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { text-decoration: none; }

/* ---------- Works grid (masonry via columns) ---------- */
.works-grid { columns: 3 300px; column-gap: clamp(16px, 2.5vw, 36px); padding-bottom: clamp(56px, 7vw, 104px); }
.works-grid .work { break-inside: avoid; margin-bottom: clamp(32px, 4vw, 56px); }

.work { margin: 0; }
.work__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.work__media { background: var(--line); overflow: hidden; }
.work__media img { width: 100%; transition: transform 1s var(--ease), opacity 0.6s; }
/* hover with the mouse: the whole painting comes forward a little, with a soft shadow, instead of a zoom inside its frame
   (Luis, 2026-10-18) */
/* (uses `scale`, not `transform`, which the soft entrance below already drives) */
.work__media, .series-card__media { transition: scale 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .work__open:hover .work__media, .work__open:focus-visible .work__media { scale: 1.035; box-shadow: 0 18px 40px -18px rgba(9, 14, 20, 0.45); }
  .series-card:hover .series-card__media, .series-card:focus-visible .series-card__media { scale: 1.03; box-shadow: 0 18px 40px -18px rgba(9, 14, 20, 0.45); }
}
.work figcaption { margin-top: 12px; font-size: 0.86rem; line-height: 1.5; }
.work__title { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--ink); }
/* the year reads as a detail next to the title: upright Bodoni numerals stand as tall as capitals and looked bigger than the italic title */
.work__title .work__year { font-family: var(--font-body); font-style: normal; font-size: 0.68em; letter-spacing: 0.03em; color: var(--muted); }
.work__details { color: var(--muted); }
/* For sale: a small dot and the price, in the accent colour */
.work__avail { display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.2em; color: var(--accent); font-size: 0.8rem; letter-spacing: 0.04em; }
.work__avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.lightbox__caption .work__avail { font-size: 0.9rem; margin-top: 0.6em; }

/* Available works page: one block per series */
.avail-group__title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 clamp(20px, 3vw, 36px); padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.avail-group__title a { text-decoration: none; }
.avail-group__title span { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }

/* Image fade-in once loaded */
.js img[loading="lazy"]:not(.is-loaded) { opacity: 0; }

/* Series pager */
/* Series page with a critic's text: the introduction on the left, the text as a drawer on the right (under it on
   phones). Closed, it shows the title and the first lines fading out; it unfolds in place (main.js sets --open-h) */
.series-head { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.essay-drawer { margin-top: 1.75rem; padding: 20px 0 16px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.essay-drawer .eyebrow { margin: 0; }
.essay-drawer__context { margin: -6px 0 14px; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.essay-drawer__title { margin: 10px 0 14px; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.2; font-style: italic; text-wrap: balance; }
.essay-drawer__body { position: relative; font-size: 1rem; line-height: 1.75; color: var(--ink-soft); }
.essay-drawer__body p { margin: 0 0 1em; }
.essay-drawer__sign { font-size: 0.82rem; color: var(--muted); font-style: italic; }
.js .essay-drawer__body { max-height: 7em; overflow: hidden; transition: max-height 0.7s var(--ease-out); }
.js .essay-drawer__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5em; background: linear-gradient(transparent, var(--bg)); transition: opacity 0.4s var(--ease); pointer-events: none; }
.js .essay-drawer.is-open .essay-drawer__body { max-height: var(--open-h, 200em); }
.js .essay-drawer.is-open .essay-drawer__body::after { opacity: 0; }
.essay-drawer__toggle { margin-top: 10px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); cursor: pointer; }
.essay-drawer__toggle:hover { color: var(--ink); }
.js .series-head .essay-drawer { animation: rise 1.1s var(--ease-out) 0.5s backwards; }
/* several texts on one series: drawers one under the other, sharing their rules */
.essay-stack { margin-top: 1.75rem; }
.essay-stack .essay-drawer { margin-top: 0; }
.essay-stack .essay-drawer + .essay-drawer { border-top: 0; }
.essay-drawer__body h3 { margin: 1.6em 0 0.6em; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.essay-drawer__epigraph { margin: 0 0 1.2em; padding-left: 16px; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.essay-drawer__epigraph p { margin: 0; }
.js .essay-drawer:not(.is-open) .essay-drawer__epigraph { display: none; } /* folded, the drawer shows the text itself; the epigraph comes with the rest */
.essay-drawer__epigraph cite { display: block; margin-top: 6px; font-family: var(--font-body); font-style: normal; font-size: 0.78rem; color: var(--muted); }
.essay-drawer__sign a { color: inherit; }

/* About: critical texts on the whole work as drawers, two across; then a list of the texts on each series */
.essays { padding-block: clamp(48px, 6vw, 88px) 0; }
.essays > h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: clamp(20px, 3vw, 36px); }
.essays__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); align-items: start; }
.essays__grid .essay-drawer { margin-top: 0; }
.essays__series { margin-top: clamp(40px, 5vw, 64px); }
.essays__series ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.essays__series a { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-soft); }
.essays__series-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.essays__series-title { font-style: italic; }
.essays__series-by { text-align: right; font-size: 0.85rem; color: var(--muted); }
.essays__series a:hover .essays__series-name, .essays__series a:hover .essays__series-title { color: var(--accent); }
@media (max-width: 760px) {
  .essays__grid { grid-template-columns: 1fr; }
  .essays__series a { grid-template-columns: 1fr; gap: 2px; }
  .essays__series-by { text-align: left; }
}
@media (max-width: 860px) { .series-head { grid-template-columns: 1fr; gap: 0; } }

.series-pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 40px clamp(72px, 10vw, 120px);
  border-top: 1px solid var(--line);
}
.series-pager a { text-decoration: none; }
.series-pager small { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 6px; }
.series-pager span { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.2rem); }
.series-pager .next { text-align: right; margin-left: auto; }

/* ---------- About ---------- */
/* the studio photo runs the full width (it is a wide picture); under it, the opening sentence large on the
   left, held in view while the bio and statement read on the right */
.about-intro { padding-bottom: clamp(56px, 7vw, 104px); }

/* Photographs of his shows and studio (Biography): large + tall, three medium, tall + large; tall ones take the row's height */
.photo-gallery { padding-block: clamp(8px, 2vw, 24px) clamp(56px, 7vw, 104px); }
.photo-gallery__group + .photo-gallery__group { margin-top: clamp(48px, 6vw, 88px); }
.photo-gallery h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin: 0 0 clamp(20px, 3vw, 36px); }
.photo-gallery__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(14px, 2vw, 28px); }
.photo { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.photo--big { grid-column: span 4; }
.photo--tall, .photo--mid { grid-column: span 2; }
.photo__open { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.photo__media { display: block; position: relative; overflow: hidden; background: var(--surface); }
.photo--big .photo__media { aspect-ratio: 3 / 2; }
.photo--mid .photo__media { aspect-ratio: 4 / 3; }
.photo--tall .photo__media { flex: 1; min-height: 0; }
.photo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform 0.9s var(--ease-out); }
.photo__open:hover .photo__media img { transform: scale(1.025); }
.photo__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.photo figcaption { margin-top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 0.86rem; line-height: 1.5; color: var(--muted); }
.photo__title { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink); }
@media (max-width: 760px) {
  .photo-gallery__grid { grid-template-columns: minmax(0, 1fr); }
  .photo--big, .photo--tall, .photo--mid { grid-column: auto; }
  .photo .photo__media { aspect-ratio: auto; flex: none; }
  .photo__media img { position: static; height: auto; }
}
.lightbox__inquire[hidden], .lightbox__hint[hidden] { display: none; }
.about-intro__media { margin: 0 0 clamp(40px, 6vw, 88px); }
.about-intro__media img { width: 100%; height: min(72svh, 760px); object-fit: cover; object-position: 50% 38%; }
.about-intro__media figcaption { margin-top: 12px; color: var(--muted); font-size: 0.85rem; }
.about-intro__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about-intro__lead {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  margin: 0;
  color: var(--ink);
}
.about-intro__lead .artist__name { margin-top: 0; font-family: var(--font-display); font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.about-intro__lead .artist__lead--small { max-width: 26ch; }
.prose { font-size: 1.06rem; color: var(--ink-soft); max-width: 64ch; }
.prose p { margin: 0 0 1.25em; }
.prose em { color: var(--ink); }
.prose h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--ink); margin: 2.2em 0 0.9em; }
.prose h2:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .about-intro__text { grid-template-columns: 1fr; gap: 24px; }
  .about-intro__lead { position: static; max-width: none; }
  .about-intro__media img { height: auto; aspect-ratio: 4 / 3; }
}

.cv { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 5vw, 80px); padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.cv h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.cv ul { list-style: none; margin: 0; padding: 0; }
.cv li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.cv li:first-child { padding-top: 0; }
.cv li b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cv li em { color: var(--ink); }
@media (max-width: 700px) {
  .cv { grid-template-columns: 1fr; }
  .cv li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Press ---------- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr));
  gap: clamp(40px, 5vw, 64px) clamp(16px, 2.5vw, 32px);
  padding-bottom: clamp(56px, 7vw, 104px);
}
.press-card__link { display: block; text-decoration: none; height: 100%; }
.press-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 18px;
  margin-bottom: 18px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.press-card__media img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  box-shadow: var(--shadow);
  transition: transform 0.8s var(--ease), opacity 0.6s;
}
.press-card__media.is-logo { padding: 36px; }
.press-card__media.is-logo img { box-shadow: none; }
:root[data-theme="dark"] .press-card__media.is-logo { background: #f3f1ed; }
.press-card__media.is-text span {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-style: italic;
  line-height: 1.15;
  text-align: center;
  color: var(--muted);
}
a.press-card__link:hover .press-card__media { border-color: var(--ink); }
a.press-card__link:hover .press-card__media img { transform: translateY(-4px); }
a.press-card__link:hover h3 { color: var(--accent); }
.press-card__meta { margin: 0 0 6px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.press-card h3 { font-size: 1.45rem; line-height: 1.15; }
.press-card__title { margin: 6px 0 12px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.press-card__offline { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.04em; }
@media (max-width: 600px) {
  .press-card__media { padding: 10px; }
  .press-card__media.is-logo { padding: 16px; }
  .press-card h3 { font-size: 1.2rem; }
  .press-card__title { font-size: 0.82rem; }
}

/* Video (click-to-load YouTube) */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.video { margin: 0; }
.videos__channel { margin: clamp(40px, 6vw, 72px) 0 clamp(72px, 10vw, 140px); }
.video__poster, .video iframe {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.video__poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.4s, transform 1s var(--ease); }
.video__poster:hover img { opacity: 1; transform: scale(1.03); }
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  transition: background-color 0.25s, color 0.25s;
}
.video__play svg { width: 26px; height: 26px; margin-left: 4px; }
.video__poster:hover .video__play { background: var(--accent); color: #fff; }
.video figcaption { margin-top: 12px; font-size: 0.86rem; }

/* ---------- Contact: the form first; beside it (under it on phones) a short note and the direct ways to write ---------- */
.page-head:has(+ .inquiry) { padding-bottom: clamp(24px, 3vw, 40px); }
.inquiry {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-bottom: clamp(64px, 8vw, 112px);
}
.inquiry__lede { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.3; color: var(--ink); margin: 0 0 0.8rem; max-width: 22ch; }
.inquiry__intro > p:not(.inquiry__lede) { color: var(--ink-soft); max-width: 36ch; margin: 0; }
.contact-list { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.contact-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list .eyebrow { margin: 0; }
.contact-list a { text-decoration: none; color: var(--ink); word-break: break-word; }
.contact-list a:hover { color: var(--accent); }
.inquiry__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.field label span { text-transform: none; letter-spacing: 0.02em; font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
  transition: border-color 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.55; }
.field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 10px) 52%, calc(100% - 5px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.field select option { background: var(--surface); color: var(--ink); padding: 10px 14px; }
/* browsers that let the open list be styled (Chrome 135+): roomier rows, a hairline frame, the accent on hover */
@supports (appearance: base-select) {
  .field select, .field select::picker(select) { appearance: base-select; }
  .field select { background-image: none; padding-right: 0; }
  .field select::picker-icon { color: var(--muted); }
  .field select::picker(select) { border: 1px solid var(--line); background: var(--surface); padding: 6px 0; margin-top: 6px; box-shadow: 0 12px 32px rgba(13, 18, 24, 0.12); }
  .field select option { padding: 11px 16px; font-size: 1rem; line-height: 1.3; }
  .field select option::checkmark { display: none; }
  .field select option:hover, .field select option:focus-visible { background: var(--line); color: var(--ink); outline: none; }
  .field select option:checked { color: var(--accent); font-weight: 500; }
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field input:user-invalid, .field textarea:user-invalid { border-bottom-color: var(--accent); }
.inquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 8px; }
.inquiry__email { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font-family: inherit; }
.inquiry__status { margin: 4px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.inquiry__status.is-ok { color: var(--accent); }
.inquiry__status.is-error { color: #a33a2b; }
.inquiry__form .btn:disabled { opacity: 0.6; cursor: progress; }
.btn--wa svg { width: 18px; height: 18px; }
.btn--wa:hover { background: #1fa855; border-color: #1fa855; color: #fff; }
@media (max-width: 860px) {
  .inquiry { grid-template-columns: 1fr; gap: 28px; }
  .inquiry__form { order: -1; } /* phones: the form right under the title, the note and contacts after it */
}
@media (max-width: 560px) {
  .inquiry__form { grid-template-columns: 1fr; }
}

/* ---------- WhatsApp ---------- */
/* A small tab in the site's sea blue, docked to the right edge: the WhatsApp mark and one word; it comes into
   focus (no bounce, no pulse) once the visitor has scrolled half a screen */
.wa-float {
  position: fixed;
  right: 0;
  bottom: clamp(20px, 4vh, 40px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 16px;
  border-radius: 999px 0 0 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(13, 30, 48, 0.22);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), padding 0.35s var(--ease-out), background-color 0.25s;
}
.wa-float svg { width: 20px; height: 20px; flex: none; }
.wa-float:hover { background: var(--ink); color: var(--bg); padding-right: 26px; }
/* night: the accent turns light blue, so the word and the mark go near-black on it (white would barely read) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wa-float { color: #0a0d11; } }
:root[data-theme="dark"] .wa-float { color: #0a0d11; }
.js .wa-float:not(.is-visible) { opacity: 0; transform: translateX(100%); pointer-events: none; }
@media (max-width: 600px) { .wa-float { padding: 11px 14px 11px 13px; } .wa-float span { display: none; } }

/* in the viewer: a quiet line of text with the mark, underlined with the site's wave on hover */
.essay-drawer { scroll-margin-top: calc(var(--header-h) + 24px); } /* reached by a link (#essay-…): not under the header */
.lightbox__essay { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 20px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.lightbox__essay-by { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lightbox__essay-title { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.3; }
.lightbox__essay-title::after { content: " →"; font-style: normal; }
.lightbox__essay:hover .lightbox__essay-title { color: var(--accent); }
.lightbox__essay[hidden] { display: none; }
.lightbox__inquire {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding-block: 6px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition: color 0.25s;
}
.lightbox__inquire::after { left: 28px; bottom: -1px; } /* the swell runs under the words, not the icon */
.lightbox__inquire svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.lightbox__inquire:hover { color: var(--accent); }

/* ---------- Footer ---------- */
/* black footer: the page ends on a dark band, white wordmark, quiet grey text, the light sea blue on hover */
.site-footer { background: #0a0d11; color: rgba(255, 255, 255, 0.58); padding-block: 64px 40px; font-size: 0.88rem; }
/* three columns: who (name, painting, city), the menu, and how to reach him with round social icons */
.site-footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: 40px clamp(32px, 5vw, 80px); margin-bottom: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer .wordmark { color: #fff; font-size: 1.25rem; }
.site-footer__brand p { margin: 16px 0 0; line-height: 1.7; }
.site-footer__label { margin: 0 0 14px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.site-footer__nav, .site-footer__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer__nav a, .site-footer__contact > a { color: rgba(255, 255, 255, 0.85); }
.site-footer a { text-decoration: none; transition: color 0.25s var(--ease); }
.site-footer a:hover, .site-footer .wordmark:hover { color: #9cc6e6; }
.social { display: flex; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: #fff; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease-out); }
.social svg { width: 18px; height: 18px; }
.social a:hover { background: #9cc6e6; border-color: #9cc6e6; color: #0a0d11; transform: translateY(-3px); }
@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .site-footer__top { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .site-footer { padding-bottom: 96px; } } /* clear of the WhatsApp tab docked at the bottom */
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.78rem; }

/* ---------- Lightbox ---------- */
/* The painting fills the left; a side panel (a hairline apart) holds the number of the work in large numerals,
   the caption, the inquiry and "Previous / Next" in words. Phones: the panel sits under the painting. */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--overlay);
  color: var(--ink);
}
.lightbox::backdrop { background: var(--overlay); }
.lightbox:focus { outline: none; }
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 360px); animation: lb-in 0.5s var(--ease); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

.lightbox__stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  touch-action: pan-x pan-y pinch-zoom;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: calc(100dvh - 2 * clamp(24px, 4vw, 56px));
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: var(--shadow);
}
.lightbox.is-zoomed .lightbox__stage { display: block; overflow: auto; padding: 0; cursor: grab; scrollbar-width: none; }
.lightbox.is-zoomed .lightbox__stage::-webkit-scrollbar { display: none; }
.lightbox.is-zoomed .lightbox__stage.is-dragging { cursor: grabbing; }
.lightbox.is-zoomed .lightbox__stage img { max-width: none; max-height: none; cursor: inherit; box-shadow: none; }

.lightbox__panel {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 2.4vw, 36px);
  border-left: 1px solid var(--line);
}
.lightbox__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lightbox__counter { font-family: var(--font-display); color: var(--muted); font-size: 1rem; line-height: 1; }
.lightbox__counter b { font-weight: 400; color: var(--ink); font-size: clamp(2.6rem, 4vw, 3.6rem); letter-spacing: -0.01em; }
.lightbox__caption { margin-top: auto; font-size: 0.88rem; line-height: 1.55; min-width: 0; text-wrap: pretty; } /* no lone "cm" on the last line */
.lightbox__caption .work__title { display: block; font-size: clamp(1.5rem, 2vw, 1.9rem); line-height: 1.2; margin-bottom: 8px; }
.lightbox__hint { margin: 0; color: var(--muted); font-size: 0.75rem; }

/* View in a room: the painting at real size on a photographed room (a gallery for large works, a living room for small ones) */
.lightbox__room {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 9px 16px 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink);
  font: 500 0.74rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.lightbox__room svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.lightbox__room:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__room[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.lightbox__room[aria-pressed="true"] svg { color: currentColor; }
.lightbox__room[hidden] { display: none; }
.room { position: absolute; inset: 0; display: none; overflow: hidden; background: #e7e5e0; } /* what shows if the photo does not cover the stage */
.lightbox.is-room .room { display: block; animation: lb-in 0.5s var(--ease); }
.lightbox.is-room .lightbox__stage > img { visibility: hidden; }
.lightbox.is-room .lightbox__hint { visibility: hidden; }
.room__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lightbox__stage .room img { max-width: none; max-height: none; box-shadow: none; cursor: default; } /* not the viewer's own image rules */
.room__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.lightbox__stage .room .room__piece { position: absolute; display: none; pointer-events: none; user-select: none; filter: drop-shadow(7px 3px 6px rgba(70, 55, 40, 0.28)); }
.room.is-home .room__piece { display: block; }
.lightbox__stage .room .room__art { position: absolute; object-fit: fill; cursor: zoom-out; box-shadow: 0 1px 2px rgba(30, 25, 20, 0.25), 0 6px 14px rgba(30, 25, 20, 0.18); }
.lightbox__stage .room .room__art[hidden] { display: none; }
.room__panel { position: absolute; background-repeat: no-repeat; cursor: zoom-out; box-shadow: 0 1px 2px rgba(30, 25, 20, 0.25), 0 6px 14px rgba(30, 25, 20, 0.18); }
.room__note { position: absolute; left: 16px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: #4f4a43; font-size: 0.72rem; letter-spacing: 0.02em; }
.lightbox.is-zoomed .lightbox__hint { visibility: hidden; }
.lightbox__nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }

/* text buttons: Close, Previous, Next */
.lb-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s;
}
.lb-text span { font-size: 0.95rem; letter-spacing: 0; transition: transform 0.35s var(--ease-out); }
.lb-text:hover { color: var(--accent); }
.lb-prev:hover span { transform: translateX(-4px); }
.lb-next:hover span { transform: translateX(4px); }
.lb-close:hover span { transform: rotate(90deg); }
.lightbox.is-zoomed .lightbox__nav { visibility: hidden; }

@media (max-width: 860px) {
  /* phones: the viewer scrolls like a page, the painting large at the top (full width, up to 82 % of the screen's
     height) and its panel under it; room at the end for a browser bar that sits over the page (Brave, Safari).
     A wide picture (a book spread, a postcard, a landscape canvas) is short: it sits in the middle of a fixed area
     (64 % of the small-screen height) instead of at the very top with half the screen empty. The area is set in svh,
     which does not change while the browser bar slides in and out, so nothing moves under the finger (2026-10-18) */
  .lightbox[open] { display: block; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* the viewer fills exactly the part of the screen that is visible (not 100dvh, which changes as the browser bar
     slides), and the page behind is locked at the root too: Android Chrome otherwise lets it take the scroll */
  .lightbox { position: fixed; inset: 0; width: auto; height: auto; }
  html.lb-open, html.lb-open body { overflow: hidden; overscroll-behavior: none; }
  .lightbox__stage { display: grid; place-items: center; min-height: 64svh; padding: 56px 12px 16px; overflow: visible; }
  .lightbox__stage > img { display: block; margin: 0 auto; max-width: 100%; max-height: 82svh; }
  .lightbox.is-zoomed .lightbox__stage { height: 100svh; overflow: auto; padding: 0; }
  .lightbox.is-zoomed .lightbox__stage > img { max-height: none; margin: 0; }
  .lightbox.is-zoomed .lightbox__stage { display: block; min-height: 0; }
  .lightbox.is-room .lightbox__stage { display: block; min-height: 0; height: min(70svh, 560px); overflow: hidden; }
  .lightbox__panel { overflow: visible; gap: 12px; padding: 14px var(--gutter) calc(48px + env(safe-area-inset-bottom)); border-left: 0; border-top: 1px solid var(--line); }
  /* the counter and Close float over the top of the painting's area */
  .lightbox__top { position: absolute; top: 10px; left: var(--gutter); right: var(--gutter); align-items: center; }
  .lightbox__counter b { font-size: 1.9rem; }
  .lightbox__caption { margin-top: 0; }
  .lightbox__caption .work__title { font-size: 1.3rem; margin-bottom: 2px; }
  .lightbox__hint { display: none; }
  .lightbox__nav { padding-top: 10px; }
}

/* ---------- Reveal on scroll ---------- */
/* blocks simply fade in where they stand (no slide, no blur) */
.js .reveal { opacity: 0; transition: opacity 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; filter: none; }

/* ==========================================================================
   Motion — all of it is switched off by prefers-reduced-motion (see Base)
   ========================================================================== */

/* Page change (browsers with cross-document View Transitions): a soft cross-fade, the old page out, the new one in.
   (A wavy wipe was tried and Luis found it restless: everything that moves here is a plain fade.) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; } /* layered, not added: no greyish glow */
::view-transition-old(root) { animation: vt-out 0.6s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.8s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* Theme switch: night (or day) fades in over the page (main.js) */
:root.theme-switching .site-header { view-transition-name: none; }
/* the new theme is photographed at once, so colours must jump, not fade (the view transition is the fade) */
:root.theme-switching, :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }
:root.theme-switching::view-transition-old(root) { animation: none; }
:root.theme-switching::view-transition-new(root) { z-index: 2; animation-duration: 0.8s; }

/* Titles fade in, rising a few pixels (no sway: Luis wants the motion soft) */
.mask { display: block; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.mask > span { display: block; transform-origin: 50% 100%; }
@keyframes surface { from { opacity: 0; transform: translateY(0.18em); } }
.js .series-hero h1 .mask > span, .js .page-head h1 .mask > span { animation: surface 1.6s var(--ease-out) 0.1s backwards; }
.js .page-head .eyebrow, .js .page-head .breadcrumb { animation: rise 1s var(--ease-out) backwards; }
.js .page-head__intro { animation: rise 1.1s var(--ease-out) 0.35s backwards; }
.js .reveal-mask .mask > span { opacity: 0; }
.js .reveal-mask.is-visible .mask > span { opacity: 1; animation: surface 1.6s var(--ease-out) var(--d, 0ms) backwards; }

/* small things fade in where they stand */
@keyframes rise { from { opacity: 0; } }

/* Home hero: the name fades in letter by letter, each rising a little (the painting above keeps its water) */
.hero h1 .word { display: inline-block; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero h1 .char { display: inline-block; }
@keyframes char-ripple { from { opacity: 0; transform: translateY(0.12em); } }
.js .hero h1 .char { animation: char-ripple 1.6s var(--ease-out) backwards; animation-delay: calc(250ms + var(--i) * 40ms); }
.js .hero__side > .eyebrow { animation: rise 1s var(--ease-out) 0.15s backwards; }
.js .hero__statement { animation: rise 1.1s var(--ease-out) 0.5s backwards; }
.js .hero__lede { animation: rise 1.1s var(--ease-out) 0.85s backwards; }
.js .hero__side > .btn { animation: rise 1.1s var(--ease-out) 1s backwards; }
.js .hero__figure figcaption { animation: rise 1s var(--ease-out) 1.5s backwards; }
/* the painting is unveiled from the bottom up while it settles from a slight zoom (the water canvas then takes over) */
@keyframes curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.12); } }
.js .hero__media { animation: curtain 1.6s var(--ease-out) 0.2s backwards; }
.js .hero__media img { animation: settle 2.4s var(--ease-out) 0.2s backwards; }
[data-parallax] { will-change: transform; }

/* Home hero: the painting seen through water (WebGL canvas laid exactly over the image, see main.js) */
.hero__media [data-parallax] { position: relative; }
.hero-water { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s var(--ease); }
.hero-water.is-on { opacity: 1; }
/* the caption under the hero fades out while the next painting comes in through the water (main.js) */
.hero__whole { transition: opacity 0.6s var(--ease); }
.hero__whole.is-changing { opacity: 0; }
.has-water .hero__media img { animation: none; }

/* Artworks and series covers fade in softly as they scroll in, rising a few pixels */
.js .work.reveal .work__media,
.js .series-card.reveal .series-card__media,
.js .reveal .wave-media {
  opacity: 0;
  transform: translateY(14px);
  /* the entrance waits its turn (--d); the hover's forward step (scale, shadow) answers at once */
  transition: opacity 1.8s var(--ease-out) var(--d, 0ms), transform 2.2s var(--ease-out) var(--d, 0ms),
    scale 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.js .work.reveal.is-visible .work__media,
.js .series-card.reveal.is-visible .series-card__media,
.js .reveal.is-visible .wave-media { opacity: 1; transform: none; }
/* the figure itself stays put (only its picture surfaces); the caption follows once the picture is there */
.js .work.reveal, .js .series-card.reveal { opacity: 1; filter: none; }
.js .work.reveal figcaption, .js .series-card.reveal .series-card__meta { opacity: 0; transition: opacity 1.3s var(--ease-out); transition-delay: calc(var(--d, 0ms) + 700ms); }
.js .work.reveal.is-visible figcaption, .js .series-card.reveal.is-visible .series-card__meta { opacity: 1; }


/* Statement quote appears word by word */
.js .reveal.quote-words { opacity: 1; transform: none; filter: none; }
.quote-words .w { display: inline-block; }
.js .quote-words .w {
  opacity: 0;
  transition: opacity 1s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}
.js .quote-words.is-visible .w { opacity: 1; transform: none; filter: none; }
.js .quote-words::before { transform: scaleX(0); transition: transform 1.2s var(--ease-out); }
.js .quote-words.is-visible::before { transform: scaleX(1); }
.js .quote-words cite { opacity: 0; transition: opacity 1s var(--ease) 0.9s; }
.js .quote-words.is-visible cite { opacity: 1; }

/* Events list rows slide in */
.js .events li.reveal { transform: translateX(-24px); }
.js .events li.reveal.is-visible { transform: none; }

/* Lightbox: each painting fades in when you move to it */
@keyframes lb-img { from { opacity: 0; } }
.lightbox__stage img.is-entering { animation: lb-img 0.7s var(--ease-out) both; }
.lightbox__caption.is-entering { animation: rise 0.7s var(--ease-out) both; }

/* Cursor over artworks (mouse only; injected by main.js): a thin ring like a drop on the water and the word
   under it; the painting itself ripples beneath (art-water). White with a faint dark edge, so it reads on any paint */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  pointer-events: none;
}
/* the ring is the rim of a drop of water the size of the lens drawn by art-water (76 px): the magnified,
   trembling paint shows inside it, so the ring itself is only a fine line */
.cursor__ring {
  position: absolute;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(13, 30, 48, 0.12);
  transform: scale(0.3);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.3s;
}
.cursor__label {
  position: absolute;
  top: 48px;
  left: 0;
  padding: 4px 10px 4px 12px; /* the extra left pad balances the letter-spacing after the last letter */
  border-radius: 999px;
  background: rgba(31, 79, 122, 0.88);
  white-space: nowrap;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  transform: translate(-50%, -4px);
  opacity: 0;
  transition: transform 0.5s var(--ease-out), opacity 0.3s;
}
.cursor.is-active .cursor__ring { transform: scale(1); opacity: 1; }
.cursor.is-active .cursor__label { transform: translate(-50%, 0); opacity: 1; }
/* the painting under the pointer ripples like water (main.js, artWater): a WebGL canvas laid exactly over it;
   it shows the still picture until a drop falls, and fades out when the pointer leaves */
.work__media, .series-card__media { position: relative; }
.art-water { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); }
.art-water.is-on { opacity: 1; }
.has-water-art img { transform: none !important; } /* the water replaces the hover zoom, so the two never disagree */
.has-cursor [data-lightbox], .has-cursor .series-card { cursor: none; }

/* About: the galleries and spaces that show his work. Official logos turned to one ink colour, no tiles; each
   logo has its own height in site.json (logoHeight) so wide wordmarks and square marks weigh the same; hairline grid */
.galleries { padding-block: clamp(48px, 6vw, 88px); } /* room below too, so the CV's first rule doesn't sit on the grid */
.galleries h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-bottom: clamp(28px, 4vw, 48px); }
.galleries__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 860px) { .galleries__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .galleries__item { padding: 16px 14px 14px; } .galleries__mark { height: 92px; } }
.galleries__list > li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.galleries__item { display: grid; grid-template-rows: 1fr auto auto; height: 100%; padding: 22px 22px 18px; text-decoration: none; color: inherit; }
.galleries__mark { display: grid; place-items: center; height: 112px; margin-bottom: 14px; }
.galleries__mark img { max-height: var(--logo-h, 40px); width: auto; height: auto; opacity: 0.82; transition: opacity 0.3s var(--ease), transform 0.5s var(--ease-out); }
.galleries__word { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); text-align: center; }
.galleries__name { font-size: 0.86rem; font-weight: 500; }
.galleries__city { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
a.galleries__item:hover .galleries__mark img { opacity: 1; transform: scale(1.04); }
a.galleries__item:hover .galleries__name { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .galleries__mark img { filter: invert(1) brightness(1.6); } }
:root[data-theme="dark"] .galleries__mark img { filter: invert(1) brightness(1.6); }

/* Home: the galleries sit on a band of deep sea blue so they stand apart from the white page; logos in white */
section.home-galleries { background: #13314f; color: #fff; border-top: 0; }
section.home-galleries .eyebrow { color: rgba(255, 255, 255, 0.66); }
section.home-galleries h2, section.home-galleries .link-arrow { color: #fff; }
section.home-galleries .galleries__list, section.home-galleries .galleries__list > li { border-color: rgba(255, 255, 255, 0.16); }
section.home-galleries .galleries__list .galleries__mark img { filter: brightness(0) invert(1); opacity: 0.88; }
section.home-galleries .galleries__name { color: #fff; }
section.home-galleries .galleries__city { color: rgba(255, 255, 255, 0.62); }
section.home-galleries a.galleries__item:hover .galleries__name { color: #9cc6e6; }
section.home-galleries a.galleries__item:hover { background: rgba(255, 255, 255, 0.04); }
/* logos that build themselves (main.js): the vector twin lies exactly over the image while its shapes come in,
   then the image shows again. Shapes take the logo's colour: ink on white, white on the blue band */
.logo-frame { position: relative; display: inline-block; max-width: 82%; line-height: 0; }
.galleries__mark .logo-frame img { max-width: 100%; transition: opacity 0.45s var(--ease), transform 0.5s var(--ease-out); }
.logo-anim { position: absolute; inset: 0; pointer-events: none; opacity: 0; color: var(--ink); transition: opacity 0.45s var(--ease); }
.logo-anim svg { display: block; width: 100%; height: 100%; overflow: visible; }
.logo-anim path { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.is-animating .logo-anim { opacity: 1; transition: none; }
.is-animating .logo-frame img { opacity: 0 !important; transition: none; }
section.home-galleries .logo-anim { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) section.home-galleries { background: #102a44; } }
:root[data-theme="dark"] section.home-galleries { background: #102a44; }

.shore__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.shore__intro { padding-top: 1.6rem; } /* starts level with the title, under the eyebrow */
.shore__head h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.shore__intro p { color: var(--ink-soft); max-width: 52ch; margin: 0; }
.shore__intro .link-arrow { display: inline-block; margin-top: 1.25rem; }
@media (max-width: 860px) { .shore__head { grid-template-columns: 1fr; align-items: start; } }
/* Home, latest series: the works in one row along the full width, all at the same height and never cropped,
   drifting slowly and continuously like the tide (main.js doubles the row so it loops); pauses on hover or focus */
.tide { overflow: hidden; margin-top: clamp(32px, 4vw, 56px); }
/* the row comes in and goes out softly at both sides instead of being cut there */
.tide.is-moving { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--tide-fade), #000 calc(100% - var(--tide-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--tide-fade), #000 calc(100% - var(--tide-fade)), transparent); }
.tide { --tide-fade: clamp(32px, 7vw, 120px); }
@media (max-width: 860px) { .tide { --tide-fade: 14vw; } }
.tide__track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; padding: 18px var(--gutter); } /* room above and below for a painting that comes forward */
.tide .work { flex: none; margin: 0; }
.tide .work__media { width: fit-content; background: none; }
.tide .work__media img { height: clamp(240px, 32vw, 440px); width: auto; max-width: none; }
.tide figcaption { max-width: 36ch; }
/* main.js moves the row (on its own, or dragged / swiped / stepped); the page still scrolls up and down under a finger */
.tide.is-moving { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tide.is-moving .tide__track { will-change: transform; }
.tide.is-dragging, .tide.is-dragging * { cursor: grabbing !important; }
.tide img { -webkit-user-drag: none; }
.tide.is-moving { cursor: grab; }
@media (prefers-reduced-motion: reduce) { .tide { overflow-x: auto; } }
@media (max-width: 860px) { .tide .work__media img { height: 56vw; } }


/* Home: four press pieces chosen for weight (featured in press.json), text only, each a column under a rule;
   "Read more" opens the original, and the swell runs under it on hover */
.press-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px); }
.press-pick { display: flex; flex-direction: column; gap: 12px; height: 100%; padding-top: 22px; border-top: 1px solid var(--ink); text-decoration: none; color: inherit; }
.press-pick.has-media { padding-top: 0; border-top: 0; }
.press-pick__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--line); margin-bottom: 8px; }
.press-pick__media img { width: 100%; height: 100%; object-fit: cover; }
.press-pick.has-media .press-pick__meta { padding-top: 14px; border-top: 1px solid var(--ink); }
.press-pick__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.press-pick__title { font-family: var(--font-display); font-size: clamp(1.35rem, 1.7vw, 1.6rem); line-height: 1.25; color: var(--ink); text-wrap: balance; transition: color 0.3s var(--ease); }
.press-pick__by { font-size: 0.82rem; color: var(--ink-soft); }
.press-pick__summary { font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.press-pick__more { position: relative; align-self: flex-start; margin-top: auto; padding-top: 8px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.press-pick:hover .press-pick__title, .press-pick:hover .press-pick__more { color: var(--accent); }
@media (max-width: 1100px) { .press-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .press-picks { grid-template-columns: 1fr; } }

/* Press: an index by year, the year standing in its own column */
.press-index { padding-bottom: clamp(56px, 7vw, 104px); }
.press-year { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 10fr); gap: 24px; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }
.press-year__label { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; }
.press-year__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 30px); }
.press-row { display: grid; gap: 4px; }
.press-row__pub { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.press-row__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; text-decoration: none; color: var(--ink); max-width: 46ch; }
.press-row__title:hover { color: var(--accent); }
.press-row__title.is-offline:hover { color: var(--ink); }
.press-row__meta { font-size: 0.82rem; color: var(--muted); }
.press-row__summary { font-size: 0.92rem; color: var(--ink-soft); max-width: 70ch; margin-top: 2px; }
@media (max-width: 860px) { .press-year { grid-template-columns: 1fr; gap: 14px; } }

/* Home quote over a painting that stays fixed while the page slides over it: the image is position: fixed
   and the frame's clip-path cuts it to the section, so the browser itself holds it still (no scroll script, no
   jitter, and it works on iPhone where background-attachment: fixed does not); a dark veil keeps the words legible */
.statement--image { position: relative; overflow: hidden; display: grid; place-items: center; min-height: min(78svh, 760px); margin-top: clamp(8px, 1.5vw, 24px); color: #fff; } /* close under the home text (Luis, 2026-10-18) */
.statement--image + .section { border-top: 0; }
/* Series pages: the name over the cover, which stays still behind the band as the page scrolls (fixed, clipped) */
.series-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: min(64svh, 640px); color: #fff; }
.series-hero .statement__bg::after { background: linear-gradient(to top, rgba(9, 14, 20, 0.66), rgba(9, 14, 20, 0.22) 70%); }
.series-hero__inner { position: relative; z-index: 1; padding-block: clamp(36px, 6vw, 84px) clamp(28px, 4vw, 56px); }
.series-hero h1 { color: #fff; }
.series-hero .breadcrumb, .series-hero .breadcrumb a { color: rgba(255, 255, 255, 0.86); }
.page-head--series { padding-top: clamp(28px, 4vw, 56px); }
.page-head--series > .series-head, .page-head--series > .page-head__intro { margin-top: 0; } /* the painting already closes the band: no rule right under it */
.statement__bg { position: absolute; inset: 0; clip-path: inset(0); }
.statement__bg img { position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; max-width: none; object-fit: cover; opacity: 1 !important;
  transform: scale(var(--zoom, 1)); transform-origin: 50% 50%; will-change: transform; } /* main.js: slow zoom out as the band goes up */
.statement__bg::after { content: ""; position: absolute; inset: 0; background: rgba(9, 14, 20, 0.48); }
.statement--image .container { position: relative; z-index: 1; }
.statement--image blockquote { color: #fff; font-size: clamp(2.2rem, 5.2vw, 4.6rem); max-width: 22ch; }
.statement--image blockquote::before { background: rgba(255, 255, 255, 0.7); }
.statement--image cite { color: rgba(255, 255, 255, 0.82); }

/* ---------- Publications: the book, then catalogues and printed matter ---------- */
.book { padding-bottom: clamp(56px, 7vw, 104px); }
.book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.book__cover { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); } /* stays beside the facts and texts */
.book__cover-open { display: block; width: 100%; padding: clamp(28px, 5vw, 72px); border: 0; background: var(--surface); cursor: pointer; }
.book__cover-open img { display: block; width: 100%; height: auto; box-shadow: 0 2px 4px rgba(9, 14, 20, 0.12), 0 24px 48px -12px rgba(9, 14, 20, 0.35); transition: transform 0.9s var(--ease-out); }
.book__cover-open:hover img { transform: translateY(-4px); }
.book__cover-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* the title set as on the book's own title page: the name large, «Selected Works 2004–2026» small and spaced under it
   (Luis, 2026-10-18) */
.book__title { margin: 0.2em 0 0.8em; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; text-wrap: balance; }
.book__title-name, .book__title-sub { display: block; }
.book__title-sub { margin-top: 0.7em; font-family: var(--font-body); font-size: clamp(0.82rem, 1vw, 0.98rem); font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
.book__lead { max-width: 52ch; font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); }
.book__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 28px 0 32px; border-top: 1px solid var(--line); }
.book__facts div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.book__facts dt { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.book__facts dd { margin: 4px 0 0; color: var(--ink); }
.book__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.book__essays { margin-top: 40px; }
.book__essays ul { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.book__essays a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.book__essay-title { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; }
.book__essay-title::after { content: " →"; font-style: normal; transition: margin 0.25s var(--ease); }
.book__essays a:hover .book__essay-title::after { margin-left: 6px; }
.book__essay-by { flex: none; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.book__pages { margin-top: clamp(48px, 6vw, 88px); }
.book__pages-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.book__pages-hint { font-size: 0.78rem; color: var(--muted); }
/* the open book: each spread on a pale ground, with a soft fold down the middle */
.book__spreads { display: flex; gap: 20px; margin-top: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 24px; background: var(--surface); }
.book__spread { position: relative; flex: 0 0 min(34vw, 500px); padding: 0; border: 0; background: #fff; cursor: pointer; scroll-snap-align: start; box-shadow: 0 1px 2px rgba(9, 14, 20, 0.1), 0 12px 24px -10px rgba(9, 14, 20, 0.28); }
.book__spread::after { content: ""; position: absolute; inset: 0 auto 0 calc(50% - 14px); width: 28px; background: linear-gradient(90deg, transparent, rgba(9, 14, 20, 0.07) 45%, rgba(9, 14, 20, 0.12) 50%, rgba(9, 14, 20, 0.07) 55%, transparent); pointer-events: none; }
.book__spread img { display: block; width: 100%; height: auto; transition: opacity 0.4s var(--ease); }
.book__spread:hover img { opacity: 0.88; }
.book__spread:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pubs-section { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.pubs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.pubs-grid--card { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pubs-grid--book { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub { margin: 0; }
.pub__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
/* every piece printed in its own format: shown whole, standing on the same pale ground */
.pub__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 12%; background: var(--surface); }
.pub--card .pub__media { aspect-ratio: 4 / 3; padding: 10%; }
.pub--book .pub__media { aspect-ratio: 4 / 3; padding: 8%; }
.pub__media picture { display: contents; }
.pub__media img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 1px 2px rgba(9, 14, 20, 0.1), 0 14px 28px -10px rgba(9, 14, 20, 0.3); transition: transform 0.9s var(--ease-out); }
.pub__open:hover .pub__media img { transform: translateY(-4px); }
.pub__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pub figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.pub__title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; }
.pub__meta { font-size: 0.78rem; color: var(--muted); }

@media (max-width: 1100px) {
  .pubs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pubs-grid--card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .book__grid { grid-template-columns: 1fr; }
  .book__cover { position: static; }
  .book__cover-open { padding: 36px 18%; }
  .book__spreads { padding: 16px; gap: 14px; margin-inline: calc(var(--gutter) * -1); }
  .book__spread { flex-basis: 78vw; }
  .pubs-grid, .pubs-grid--book { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pubs-grid--card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) { .book__facts { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .book__actions .btn { flex: 1 1 100%; justify-content: center; }
  .book__essays a { flex-direction: column; gap: 4px; }
}

/* the book's two editions, side by side under its facts (Luis, 2026-10-18) */
.book__editions { margin-top: 40px; }
.editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.edition { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); background: var(--bg); }
.edition__where { margin: 0 0 8px; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.edition__title { margin: 0 0 10px; font-size: 1.3rem; line-height: 1.25; text-wrap: balance; }
.edition__lead { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.edition__points { margin: 0 0 20px; padding: 0; list-style: none; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.edition__points li { position: relative; padding: 5px 0 5px 16px; border-top: 1px solid var(--line); }
.edition__points li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 6px; height: 1px; background: var(--accent); }
.edition__price { margin: auto 0 16px; font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--ink); }
.edition .btn { justify-content: center; padding-inline: 18px; }
@media (max-width: 1240px) and (min-width: 861px) { .editions { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .editions { grid-template-columns: 1fr; } .edition { padding: 20px; } }

/* magazines on Publicaciones: the article on Luis under the issue, and a link to buy it (2026-10-18) */
.pub__article { color: var(--ink-soft); }
.pub__buy { margin-top: 10px; align-self: flex-start; font-size: 0.7rem; }

/* a photo of a whole printed set (not a single cover) fills its tile, cropped at the edges */
.pub--fill .pub__media { padding: 0; overflow: hidden; }
.pub--fill .pub__media img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; box-shadow: none; }

/* the home page's featured series: in full rows on a computer (--cols from build.mjs), two by two on a tablet */
@media (min-width: 1101px) { .series-grid--home { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
@media (min-width: 600px) and (max-width: 1100px) { .series-grid--home { grid-template-columns: repeat(var(--tcols), minmax(0, 1fr)); } }
/* the magazine's «Buy the PDF» may wrap on the narrowest phones */
.pub__buy { white-space: normal; }

/* the artist on the home page: his name carries the weight, the sentence about him goes smaller (Luis, 2026-10-18) */
.artist__name { margin: 1rem 0 0; font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1.08; letter-spacing: -0.005em; text-wrap: balance; }
.artist__origin { margin: 0.7rem 0 0; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.artist__lead--small { margin: 1.4rem 0 1.6rem; font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.4; color: var(--ink-soft); max-width: 30ch; }

/* Biography photographs by category (2026-10-18): tabs, then a masonry of whole photos (none cropped) */
.photo-tabs__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(24px, 3vw, 40px); }
.photo-tabs__tab { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-soft); font: inherit; font-size: 0.92rem; cursor: pointer; transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s; }
.photo-tabs__tab span { margin-left: 4px; font-size: 0.78rem; color: var(--muted); }
.photo-tabs__tab:hover { border-color: var(--ink); color: var(--ink); }
.photo-tabs__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.photo-tabs__tab[aria-selected="true"] span { color: inherit; opacity: 0.7; }
.photo-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* with JavaScript only the chosen category shows, and the tab names the heading */
.js .photo-tabs__panel[data-hidden] { display: none; }
.js .photo-tabs__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo-tabs__heading { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: clamp(32px, 4vw, 56px) 0 20px; }
.photo-tabs__panel { animation: lb-in 0.5s var(--ease); }
.photo-masonry { columns: 4 240px; column-gap: clamp(12px, 1.6vw, 22px); }
.photo-tile { margin: 0 0 clamp(12px, 1.6vw, 22px); break-inside: avoid; }
.photo-tile .photo__open { display: block; }
.photo-tile__media { display: block; overflow: hidden; background: var(--surface); }
.photo-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.photo-tile .photo__open:hover .photo-tile__media img { transform: scale(1.03); }
.photo-tile .photo__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.photo-tile figcaption { margin-top: 8px; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 600px) { .photo-masonry { columns: 2; } .photo-tabs__tab { padding: 8px 14px; font-size: 0.86rem; } }
.photo-tabs .section__head { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* Books (Publications) page: no big one-word title; one large line, smaller than the other pages' titles (Luis, 2026-10-18) */
.page-head .page-head__title--md { font-size: clamp(2.2rem, 4.4vw, 3.9rem); line-height: 1.1; text-wrap: balance; }

/* Works page: the portfolio download beside the title (Luis, 2026-10-18; a PDF on his Drive, site.json → portfolioUrl) */
.works-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.works-head .page-head h1, .works-head h1 { margin-bottom: 0; }
.works-head__portfolio { margin-bottom: clamp(8px, 1.4vw, 20px); }
.works-head__portfolio svg { width: 18px; height: 18px; flex: none; }