/* ===========================================================================
   Jake Catt — portfolio
   Minimal, gallery-style black-on-white. Avenir throughout.
   =========================================================================== */

/* Avenir is a licensed typeface. It renders natively on Apple devices via the
   "Avenir Next" / "Avenir" names below. To make it render everywhere (Windows,
   Android), drop licensed web-font files into assets/fonts/ and uncomment the
   @font-face blocks below (filenames are only a suggestion — match your files). */
/*
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Demi.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Avenir Next";
  src: url("../fonts/AvenirNext-Heavy.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
*/

:root {
  --ink: #141414;
  --ink-soft: #5a5a5a;
  --line: #e6e6e6;
  --paper: #ffffff;
  --paper-2: #f6f6f4;
  --max: 1440px;
  --gutter: clamp(20px, 5vw, 72px);
  --head-h: 68px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* One family everywhere. Apple ships Avenir Next / Avenir; the rest are
     geometric-humanist fallbacks used only until web fonts are supplied. */
  --font: "Avenir Next", "Avenir", "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .wordmark, .kicker, .card h3, .menu-toggle, .button, .collage-caption {
  font-family: var(--font);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--head-h);
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.wordmark, .nav-link, .nav-top, .menu-toggle, .caret {
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.wordmark {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.wordmark span { font-size: .6em; vertical-align: super; color: var(--ink-soft); }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.nav-item { position: relative; }

/* Top-level nav labels — links and dropdown buttons share the look. */
.nav-link,
.nav-top {
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-soft);
  padding: 4px 0;
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .2s var(--ease);
}
.nav-link::after,
.nav-top::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav-link:hover,
.nav-top:hover,
.has-menu:hover .nav-top,
.has-menu:focus-within .nav-top { color: var(--ink); }
.nav-link:hover::after,
.nav-top:hover::after,
.has-menu:hover .nav-top::after,
.nav-link[aria-current="page"]::after,
.nav-item[data-active="true"] .nav-top::after { transform: scaleX(1); }
.nav-link[aria-current="page"],
.nav-item[data-active="true"] .nav-top { color: var(--ink); }

.caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.has-menu:hover .caret,
.has-menu:focus-within .caret,
.nav-item.open .caret { transform: translateY(0) rotate(225deg); }

/* Dropdown panel */
.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 120;
}
/* Hover bridge so the menu doesn't close in the gap below the label. */
.nav-menu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu,
.nav-item.open .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-menu a {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 9px 12px;
  border-radius: 7px;
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-menu a:hover { background: var(--paper-2); color: var(--ink); }

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}
.menu-icon { position: relative; width: 24px; height: 18px; }
.menu-icon::before, .menu-icon::after, .menu-icon > span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.menu-icon::before { top: 0; }
.menu-icon > span { top: 8px; }
.menu-icon::after { top: 16px; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon > span { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-8px) rotate(-45deg); }

/* Home header floats over the white canvas. */
.home .site-header {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}

/* ===========================================================================
   HERO BANNER (project + gallery pages)
   A full-bleed ~45vh image or video band behind a transparent, white-text nav.
   Once the band scrolls past, the nav turns solid (see .solid, toggled in JS).
   =========================================================================== */
.page-hero {
  position: relative;
  height: 45vh;
  min-height: 300px;
  margin-top: calc(-1 * var(--head-h));   /* slide up behind the sticky header */
  overflow: hidden;
  background: #0d0d10;                     /* dark fallback while video loads */
  z-index: 1;
}
.hero-video,
.hero-artwork {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Top scrim keeps the white nav legible over lighter footage. */
.page-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 55%);
}

/* Transparent, white nav while sitting over the hero. */
.has-hero .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.has-hero .site-header:not(.solid) .wordmark,
.has-hero .site-header:not(.solid) .nav-link,
.has-hero .site-header:not(.solid) .nav-top,
.has-hero .site-header:not(.solid) .nav-link[aria-current="page"],
.has-hero .site-header:not(.solid) .nav-item[data-active="true"] .nav-top { color: #fff; }
.has-hero .site-header:not(.solid) .wordmark span { color: rgba(255, 255, 255, .72); }
.has-hero .site-header:not(.solid) .nav-link::after,
.has-hero .site-header:not(.solid) .nav-top::after { background: #fff; }
.has-hero .site-header:not(.solid) .caret {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.has-hero .site-header:not(.solid) .menu-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
}

/* Solid state once scrolled past the hero. */
.has-hero .site-header.solid {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}

/* ------------------------------------------------------------------ main --- */
.site-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(64px, 9vw, 120px);
}
.home-main { max-width: none; margin: 0; padding: 0; }

/* ------------------------------------------------- title + info panel ------ */
/* Title (and any meta) in a narrow left column, the write-up in a wider right
   column, top-aligned. Shared by project pages, the Video gallery and About. */
.info {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 110px);
  align-items: start;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.info-title h1 {
  font-size: clamp(1.3rem, 1.7vw, 1.55rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 0;
}
.info-meta { margin: 22px 0 0; }
.project-kind {
  margin: 22px 0 0;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.info-meta div { margin-bottom: 12px; }
.info-meta dt {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .66rem;
  color: var(--ink-soft);
  opacity: .65;
  margin-bottom: 4px;
}
.info-meta dd { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.info-body {
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.65;
}
.info-body p { margin: 0 0 1.5em; }
.info-body p:last-child { margin-bottom: 0; }
.project-website {
  text-decoration: underline;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
.project-website:hover { text-decoration-thickness: 2px; }
/* About reuses the info panel: portrait + facts on the left, bio + contact on the right. */
.info-title .about-portrait { margin: 20px 0 4px; max-width: 300px; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.info-title .about-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.info-body .button { margin-top: 28px; }

/* legacy page-head (unused by the info layout, kept for safety) */
.page-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.kicker {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
h1 {
  font-size: clamp(2.4rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 500;
  margin: 0 0 .4em;
}
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0;
}

/* ------------------------------------------------------------- card grid --- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(22px, 3vw, 44px);
}
.card { display: block; }
.card-media {
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 1 / 1;
  border-radius: 4px;
}
.card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 16px 2px 0; }
.card-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 4px;
}
.card-meta { margin: 0; color: var(--ink-soft); font-size: .85rem; }

/* --------------------------------------------------------- image grid ----- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 28px);
}
.tile { grid-column: span 6; margin: 0; overflow: hidden; border-radius: 4px; background: var(--paper-2); }
.tile--wide { grid-column: span 12; }
.tile--third { grid-column: span 4; }   /* three-up row */
.tile img,
.tile video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform .7s var(--ease);
}
.tile--wide img, .tile--wide video { aspect-ratio: 16 / 7; }
.tile--third img, .tile--third video { aspect-ratio: 1 / 1; }
.tile:hover img,
.tile:hover video { transform: scale(1.03); }

/* Video tiles open the player in a dialog; previews never play inline. */
.v-tile, .video-open {
  position: relative; display: block; min-width: 0; width: 100%;
  margin: 0; padding: 0; border: 0; appearance: none;
  overflow: hidden; background: #111; color: #fff; cursor: pointer;
  text-align: left; font: inherit;
}
.v-tile { aspect-ratio: 1 / 1; }
.video-open { aspect-ratio: 16 / 9; }
.v-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: transform .7s var(--ease), filter .4s var(--ease);
}
.v-tile:hover .v-thumb, .v-tile:focus-visible .v-thumb { transform: scale(1.04); filter: none; }
.v-tile:focus-visible, .video-open:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.video-open > img, .artwork .video-open img, .tile .video-open img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.v-ui { position: absolute; inset: 0; opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.v-tile:hover .v-ui, .v-tile:focus-visible .v-ui { opacity: 1; }
.v-title {
  position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 12px 14px 26px;
  color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.3;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.v-big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.v-big .vp-i-play { width: 54px; height: 54px; fill: #fff; filter: drop-shadow(0 2px 14px rgba(0,0,0,.5)); }
body.video-dialog-open { overflow: hidden; }
.video-dialog {
  width: min(1100px, calc(100vw - 32px), calc((100dvh - 110px) * 16 / 9));
  max-width: none; max-height: calc(100dvh - 32px); padding: 0; margin: auto;
  border: 0; border-radius: 8px; color: #fff; background: #111;
  box-shadow: 0 24px 100px rgba(0,0,0,.6);
}
.video-dialog::backdrop { background: rgba(0,0,0,.85); }
.video-dialog-head { display: flex; align-items: center; gap: 16px; padding: 8px 10px 8px 20px; }
.video-dialog-head h2 { flex: 1; min-width: 0; margin: 0; font-size: .95rem; font-weight: 500; line-height: 1.4; }
.video-dialog-close { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; font-size: 1.8rem; line-height: 1; background: #292929; color: white; cursor: pointer; }
.video-dialog-close:hover { background: #404040; }
.video-dialog-stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-dialog-frame { position: absolute; inset: 0; }
.video-dialog-frame iframe, .video-dialog-frame video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.video-dialog-status, .video-dialog-error { position: absolute; inset: 0; margin: 0; padding: 24px; display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; font-size: .9rem; }
.video-dialog-status { pointer-events: none; }
.video-dialog-error { flex-direction: column; }
.video-dialog-error a { color: #fff; text-decoration: underline; padding: 8px; }
.video-dialog [hidden] { display: none; }

/* ------------------------------------------ full-bleed square-tile grid ---- */
/* Used on Painting / Illustration / Photo. Breaks out of the centred content
   column to span the whole frame, square tiles, no gaps. */
.tile-grid {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: grid;
  grid-template-columns: 1fr;   /* columns are always 1, 3 or 6 (see below) */
  gap: 0;
}
/* Desktop video grid sits flush under the hero. The mobile override below
   uses one padded column of widescreen previews. */
.video-gallery .site-main { padding-top: 0; }
.v-grid { grid-template-columns: repeat(2, 1fr); }
.sq-tile {
  margin: 0;
  overflow: hidden;
  background: var(--paper-2);
}
.sq-tile img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.sq-tile:hover img { transform: scale(1.04); }
@media (min-width: 700px)  { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .tile-grid { grid-template-columns: repeat(6, 1fr); } }

/* ---------------------------------------------------------- lightbox ------- */
body.lb-lock { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 60px);
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox [hidden] { display: none; }
.lb-stage {
  margin: 0;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
.lb-close,
.lb-nav {
  position: fixed;
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lb-close:hover,
.lb-nav:hover { background: rgba(255, 255, 255, .28); }
.lb-nav:hover { transform: translateY(-50%) scale(1.06); }
.lb-close {
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 46px;
  height: 46px;
  font-size: 1.9rem;
  padding-bottom: 3px;
}
.lb-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  font-size: 2.6rem;
  padding-bottom: 5px;
}
.lb-prev { left: clamp(10px, 3vw, 32px); }
.lb-next { right: clamp(10px, 3vw, 32px); }
.lb-count {
  position: fixed;
  bottom: clamp(16px, 3vw, 30px);
  left: 0; right: 0;
  text-align: center;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-size: .8rem;
  letter-spacing: .1em;
}
@media (max-width: 520px) {
  .lb-nav { width: 44px; height: 44px; font-size: 2.1rem; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}

/* Tile pages are nothing but the grid: it fills the frame from the very top
   (behind the floating nav) to the bottom. */
.tiles-page .site-main {
  max-width: none;
  padding: 0;
  margin-top: calc(-1 * var(--head-h));   /* slide the grid up behind the nav */
}
/* The nav text floats directly over the grid — transparent bar, white text
   with a soft top scrim + shadow so it stays legible over any imagery. */
.tiles-page .site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.tiles-page .site-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: -1;
}
.tiles-page .site-header .wordmark,
.tiles-page .site-header .nav-link,
.tiles-page .site-header .nav-top {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.tiles-page .site-header .wordmark span { color: rgba(255, 255, 255, .72); }
.tiles-page .site-header .nav-link::after,
.tiles-page .site-header .nav-top::after { background: #fff; }
.tiles-page .site-header .caret {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.tiles-page .site-header .menu-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
}

/* ------------------------------------------------------------- project ---- */
.project-head { max-width: 820px; margin-bottom: clamp(28px, 4vw, 48px); }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.meta dt {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.meta dd { margin: 0; font-size: .98rem; font-weight: 500; }
.project-hero {
  margin: 0 0 clamp(16px, 2.4vw, 28px);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-2);
}
.project-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.project-pager {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-weight: 500;
  font-size: .95rem;
}
.project-pager a { color: var(--ink-soft); transition: color .2s var(--ease); }
.project-pager a:hover { color: var(--ink); }
.project-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.project-commercial { width: 100%; aspect-ratio: 16 / 9; margin-bottom: clamp(20px, 3vw, 44px); background: #111; }
.project-commercial iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------- about ---- */
/* About: the spinning face sticker above centered paragraphs, on black. */
.about-page { background: #000; }
.about-page .site-main {
  max-width: none;
  min-height: calc(100vh - var(--head-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 9vh, 110px) var(--gutter) clamp(56px, 10vh, 120px);
}
.about-simple { max-width: 600px; text-align: center; }
.about-sticker {
  width: clamp(84px, 12vw, 118px);
  aspect-ratio: 1;
  margin: 0 auto clamp(26px, 4vw, 44px);
}
.about-copy { color: rgba(255, 255, 255, .82); }
.about-copy a { color: #fff; text-decoration: underline; text-underline-offset: .18em; overflow-wrap: anywhere; }
.about-copy a:hover { text-decoration-thickness: 2px; }
.about-copy p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.75;
  margin: 0 0 1.5em;
}
.about-copy p:last-child { margin-bottom: 0; }

/* The nav floats over the black page; footer is dropped for a clean focus. */
.about-page .site-header {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, .1);
  backdrop-filter: none;
}
.about-page .site-header .wordmark,
.about-page .site-header .nav-link,
.about-page .site-header .nav-top { color: #fff; }
.about-page .site-header .wordmark span { color: rgba(255, 255, 255, .6); }
.about-page .site-header .nav-link::after,
.about-page .site-header .nav-top::after { background: #fff; }
.about-page .site-header .caret { border-right-color: #fff; border-bottom-color: #fff; }
.about-page .site-header .menu-toggle { color: #fff; border-color: rgba(255, 255, 255, .5); }
.about-page .site-footer { display: none; }
.button {
  display: inline-block;
  font-weight: 600;
  font-size: .9rem;
  padding: 13px 26px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.button:hover { background: var(--ink); color: #fff; }
.about-video {
  margin-top: 32px;
  min-height: 48px;
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
  cursor: pointer;
}
.about-video:hover { background: #fff; color: #000; }
.about-video:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.not-found { padding-block: clamp(40px, 10vh, 120px); max-width: 650px; }
.not-found p { margin-block: 20px 30px; }

/* ------------------------------------------------------------- footer ----- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: clamp(40px, 5vw, 64px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.foot-name { font-weight: 700; margin: 0 0 4px; font-size: 1.05rem; }
.foot-role { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.foot-social { display: flex; gap: 18px; }
.foot-social a { font-size: .85rem; color: var(--ink-soft); transition: color .2s var(--ease); }
.foot-social a:hover { color: var(--ink); }

.foot-sitemap {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 30px 24px;
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.foot-group { display: flex; flex-direction: column; gap: 8px; }
.foot-h {
  margin: 0 0 4px;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
}
.foot-group a { font-size: .84rem; color: var(--ink-soft); transition: color .2s var(--ease); }
.foot-group a:hover { color: var(--ink); }
.foot-copy { margin: 0; font-size: .76rem; color: var(--ink-soft); }
.home .site-footer { display: none; }

/* ===========================================================================
   HOME COLLAGE
   =========================================================================== */
/* Full-viewport height so `overflow: hidden` clips at the viewport edge, not at
   the header's height — otherwise the nav dropdowns (which hang below the
   header) get clipped, because the fixed .home-main leaves the body only as
   tall as the header. */
.home { height: 100vh; overflow: hidden; }
.home-main { position: fixed; inset: 0; background: var(--paper); }

/* Full-viewport backdrop revealed when a piece is previewed. */
.collage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0d0d10;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.collage-bg.show { opacity: 1; visibility: visible; }
.collage-bg-video,
.collage-bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.collage-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .82);
  pointer-events: none;
}

.collage {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  overflow: hidden;
  touch-action: none;
  cursor: default;
}

.cutout {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;             /* center on the anchor point */
  transform: rotate(var(--rot)) scale(var(--scale));
  transform-origin: center center;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .12));
  transition: filter .25s var(--ease);
  will-change: transform;
  animation: floatIn .8s var(--ease) both;
  animation-delay: calc(var(--i) * .06s);
}
.cutout svg { width: 100%; height: 100%; pointer-events: none; overflow: visible; }
/* Real PNG/GIF/WebP cutouts: fill the 150px box, keep their own aspect ratio
   (transparent background expected), and don't trigger the browser's drag. */
.cutout-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* Continuous 360° spin for select stickers. Lives on the <img> so it composes
   with (rather than overrides) the wrapper's drag/scale/rotate transform. */
.cutout-img.spin-cw  { animation: cutoutSpinCW  14s linear infinite; }
.cutout-img.spin-ccw { animation: cutoutSpinCCW 14s linear infinite; }
@keyframes cutoutSpinCW  { to { transform: rotate(360deg); } }
@keyframes cutoutSpinCCW { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cutout-img.spin-cw, .cutout-img.spin-ccw { animation: none; }
}
.cutout:hover { filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .2)); }
.cutout.dragging { cursor: grabbing; filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .26)); }
.cutout.grabbed { z-index: 50; }
.cutout.active { z-index: 60; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .45)); }
/* Keep all stickers fully visible above the tinted preview background. */
.previewing .cutout { opacity: 1; }
.home.previewing .cutout[href="fine-art/illustration/"] .cutout-img { filter: invert(1); }
/* Keyboard focus ring only (no rectangle on mouse clicks). */
.cutout:focus { outline: none; }
.cutout:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 10px; }
.previewing .cutout:focus-visible { outline-color: #fff; }

.cutout-tag {
  position: absolute;
  top: 100%;
  left: 50%;
  /* --inv-scale (set in JS) cancels the sticker's own scale so every bubble
     renders at the same legible size regardless of how small the sticker is. */
  transform: translate(-50%, 12px) scale(var(--inv-scale, 1));
  transform-origin: top center;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.cutout:hover .cutout-tag,
.cutout.active .cutout-tag { opacity: 1; }

@keyframes floatIn {
  from { opacity: 0; transform: rotate(var(--rot)) scale(calc(var(--scale) * .4)); }
  to   { opacity: 1; transform: rotate(var(--rot)) scale(var(--scale)); }
}

/* Collage overlay UI */
.collage-ui {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px 26px;
  pointer-events: none;
  z-index: 60;
}
.collage-tools {
  position: fixed;
  bottom: 24px;
  right: var(--gutter);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  pointer-events: auto;
  z-index: 61;
}
.collage-tools button {
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.collage-tools button:hover { background: var(--ink); color: #fff; }
.collage-caption {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  text-align: center;
  transition: color .4s var(--ease);
}
.collage-hint {
  font-size: .74rem;
  color: var(--ink-soft);
  margin: 0;
  text-align: center;
  transition: color .4s var(--ease);
}

/* Preview mode: a dark backdrop is showing, so flip the overlay UI + home nav
   to white for legibility. */
.collage-caption[href] {
  pointer-events: auto;        /* the "Open …" caption is clickable to enter */
  cursor: pointer;
}
.collage-caption[href]:hover { opacity: .78; }
.previewing .collage-caption { color: #fff; }
.previewing .collage-hint { color: rgba(255, 255, 255, .82); }
.previewing .collage-tools button {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}
.previewing .collage-tools button:hover { background: #fff; color: #111; }
.home.previewing .site-header .wordmark,
.home.previewing .site-header .nav-link,
.home.previewing .site-header .nav-top { color: #fff; }
.home.previewing .site-header .wordmark span { color: rgba(255, 255, 255, .72); }
.home.previewing .site-header .nav-link::after,
.home.previewing .site-header .nav-top::after { background: #fff; }
.home.previewing .site-header .caret {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.home.previewing .site-header .menu-toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, .65);
}

/* ===========================================================================
   CRAZY MODE — a trippy warp + heatmap + texture over the whole home page.
   Toggled by adding `.crazy` to <body> (see collage.js).
   =========================================================================== */
.crazy-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Warp the stickers with the animated turbulence displacement filter, invert
   their colours, and pump saturation. The warp animates via SMIL in the filter. */
.crazy .collage { filter: url(#crazyWarp) invert(1) saturate(2.3) contrast(1.25); }
/* Invert everything else on the page (the white canvas + preview backdrop) too,
   so the whole thing reads as inverted under the warp. */
.crazy .collage-bg,
.crazy .home-main { background: #000; }

/* Full-viewport psychedelic overlay: a spinning heatmap gradient blended into
   everything, plus a shimmering noise texture. Sits above the collage but below
   the caption/buttons, and never eats pointer events. */
.crazy-fx {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.crazy .crazy-fx { opacity: 1; }
.crazy-heat {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220vmax;
  height: 220vmax;              /* big square so it always covers when spinning */
  transform: translate(-50%, -50%);
  transform-origin: center;
  background: conic-gradient(from 0deg,
    hsl(0 100% 52%), hsl(28 100% 52%), hsl(52 100% 55%), hsl(140 100% 48%),
    hsl(190 100% 52%), hsl(275 100% 58%), hsl(320 100% 55%), hsl(0 100% 52%));
  mix-blend-mode: exclusion;
  opacity: .74;
  animation: crazySpin 9s linear infinite;
  will-change: transform;
}
.crazy-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: .3;
}
@keyframes crazySpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Keep the caption + hint readable over the chaos. */
.crazy .collage-caption { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.crazy .collage-hint { color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.7); }
/* Nav floats over the inverted (dark) canvas — flip it white. */
.home.crazy .site-header .wordmark,
.home.crazy .site-header .nav-link,
.home.crazy .site-header .nav-top { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.home.crazy .site-header .wordmark span { color: rgba(255,255,255,.72); }
.home.crazy .site-header .nav-link::after,
.home.crazy .site-header .nav-top::after { background: #fff; }
.home.crazy .site-header .caret { border-right-color: #fff; border-bottom-color: #fff; }

/* The Crazy Mode button lights up while active. */
.crazy-btn[aria-pressed="true"],
.crazy-btn[aria-pressed="true"]:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, #ff0059, #ff8a00, #14e0a0, #2ab7ff, #a34bff, #ff0059);
  background-size: 300% 100%;
  animation: crazyBtn 2.4s linear infinite;
}
@keyframes crazyBtn { to { background-position: 300% 0; } }

/* GIF-like animations on cutouts (respect reduced-motion below) */
.anim-spin  { transform-box: fill-box; transform-origin: center; animation: cSpin 9s linear infinite; }
.anim-pulse { transform-box: fill-box; transform-origin: center; animation: cPulse 1.6s var(--ease) infinite; }
.anim-glow  { transform-box: fill-box; transform-origin: center; animation: cGlow 2.2s ease-in-out infinite; }
.anim-morph { transform-box: fill-box; transform-origin: center; animation: cMorph 4s ease-in-out infinite; }
.anim-blink { animation: cBlink 3.4s steps(1) infinite; }
.anim-wave  { animation: cWave 2s ease-in-out infinite; }
@keyframes cSpin  { to { transform: rotate(360deg); } }
@keyframes cPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes cGlow  { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cMorph { 0%,100% { transform: scale(1) skewX(0); } 50% { transform: scale(1.05) skewX(3deg); } }
@keyframes cBlink { 0%,92%,100% { opacity: 1; } 95% { opacity: 0; } }
@keyframes cWave  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ------------------------------------------------------------- responsive - */
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: var(--head-h) 0 0;
    height: calc(100vh - var(--head-h));
    height: calc(100dvh - var(--head-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    max-height: none;
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform .4s var(--ease);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
  }
  .site-nav.open { transform: translateY(0); }

  .nav-item { flex-shrink: 0; border-bottom: 1px solid var(--line); }
  .nav-link,
  .nav-top {
    width: 100%;
    justify-content: space-between;
    padding: 15px 0;
    font-size: 1.05rem;
  }
  .nav-link::after,
  .nav-top::after { display: none; }

  /* Dropdowns become inline accordions on mobile. */
  .nav-menu {
    position: static;
    transform: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 10px 12px;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav-menu::before { display: none; }
  .has-menu:hover .nav-menu,
  .has-menu:focus-within .nav-menu { max-height: 0; }   /* hover must not open on touch */
  .nav-item.open .nav-menu {
    visibility: visible;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
    transform: none;
  }
  .nav-menu a { padding: 10px 6px; font-size: .98rem; }

  .tile { grid-column: span 6; }
  .info { grid-template-columns: 1fr; gap: 20px; }
  .info-meta { margin-top: 4px; }
  .about-body { grid-template-columns: 1fr; }
  .about-portrait { max-width: 320px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .foot-sitemap { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; }
  /* On small viewports the tools drop into the flow, stacking below the hint. */
  .collage-tools {
    position: static;
    inset: auto;
    margin-top: 14px;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .tile, .tile--wide { grid-column: span 12; }
  .tile--third { grid-column: span 6; }   /* two-up on phones */
  .cutout { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cutout { animation: none; }
}

/* Accessibility, touch targets and responsive refinements. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 300; background: #fff; color: #141414; padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.menu-toggle, .collage-tools button, .nav-top, .nav-link { min-height: 44px; }
.nav-menu a { min-height: 44px; display: flex; align-items: center; white-space: normal; }
.nav-menu { max-height: calc(100dvh - 90px); overflow-y: auto; max-width: min(360px, 90vw); }
.project-pager { gap: 24px; }
.project-pager a { max-width: 48%; overflow-wrap: anywhere; }
.tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sq-tile { padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 1; min-width: 0; }
.sq-tile video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .painting-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home { height: 100dvh; }
.collage-ui { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.collage-caption { max-width: min(92vw, 640px); line-height: 1.3; }
.cutout { will-change: auto; }
.cutout.dragging { will-change: transform; }
.crazy-fx { display: none; }
.crazy .crazy-fx { display: block; }
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
@media (hover: none) {
  .v-ui { opacity: 1; }
  .v-thumb { filter: none; }
  .tile:hover img, .tile:hover video, .sq-tile:hover img { transform: none; }
}
@media (max-width: 900px) {
  .video-gallery .site-main { padding: 24px var(--gutter) 40px; }
  .video-gallery .v-grid {
    width: 100%;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .video-gallery .v-tile { aspect-ratio: 16 / 9; }
  .site-nav { visibility: hidden; pointer-events: none; overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .site-nav.open { visibility: visible; pointer-events: auto; }
  body .site-header .site-nav .nav-link, body .site-header .site-nav .nav-top,
  body.home .site-header .site-nav .nav-link, body.home .site-header .site-nav .nav-top { color: #141414 !important; text-shadow: none; }
  body .site-header .site-nav .caret { border-color: #141414 !important; }
  .nav-menu { max-width: none; max-height: 0; }
  .nav-item:not(.open) .nav-menu { visibility: hidden; pointer-events: none; }
  .nav-lock {
    position: fixed;
    top: var(--nav-scroll-offset, 0px);
    left: 0;
    right: 0;
    overflow: hidden;
    padding-top: var(--head-h); /* Preserve the fixed header's place in the page. */
  }
  /* The header and panel form one opaque, full-screen mobile index. */
  body.nav-lock .site-header {
    position: fixed;
    inset: 0 0 auto;
    background: var(--paper) !important;
    border-bottom-color: var(--line) !important;
    backdrop-filter: none !important;
    transition: none;
  }
  body.nav-lock .site-header::before { display: none; }
  body.nav-lock .site-header .wordmark,
  body.nav-lock .site-header .menu-toggle { color: var(--ink) !important; text-shadow: none !important; }
  body.nav-lock .site-header .menu-toggle { border-color: var(--ink) !important; }
  body.nav-lock .site-header .wordmark span { color: var(--ink-soft) !important; }
  .collage-tools { margin-top: 4px; }
  .collage-hint { max-width: 300px; }
  .collage-ui { gap: 6px; }
  .site-header { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}
@media (max-width: 700px) {
  .cutout { width: 100px; height: 100px; }
  .cutout-tag { max-width: 70vw; white-space: normal; text-align: center; font-size: .7rem; }
  .collage-tools button { padding-inline: 12px; }
  .crazy .collage { filter: invert(1) saturate(1.5); }
  .crazy-noise { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .collage-ui { flex-direction: row; justify-content: space-between; padding: 8px 16px; }
  .collage-hint { display: none; }
  .collage-caption { font-size: .9rem; max-width: 45vw; }
  .collage-tools { margin: 0; }
}
/* Leave room for the hosting badge without covering the collage controls. */
.home:has(#nl-badge-frame) .collage-ui { padding-bottom: max(72px, env(safe-area-inset-bottom)); }
@media (min-width: 901px) {
  .home:has(#nl-badge-frame) .collage-tools { bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .crazy .collage { filter: invert(1); }
  .crazy-fx { display: none !important; }
}

/* Heroes fill the banner; full-width artwork keeps its original proportions. */
.page-hero--artwork > .artwork-open { height: 100%; }
.artwork-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: center; }
.artwork { margin: 0; min-width: 0; }
.artwork--wide { grid-column: 1 / -1; }
.artwork-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.artwork img { display: block; width: 100%; height: auto; object-fit: contain; }
.artwork video { width: 100%; height: auto; }
.asset-rows { display: grid; gap: clamp(20px, 3vw, 44px); }
.asset-row { display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: start; }
/* Shared by numbered rows, editorial pairs, and older multi-column galleries.
   A fixed square frame prevents image/video proportions from stretching rows. */
.asset-square { position: relative; aspect-ratio: 1; overflow: hidden; }
.asset-square > :is(img, video, .artwork-open, .video-open) {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
}
.asset-square img, .asset-square video {
  display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
}
.asset-square > .artwork-open:focus-visible { outline-offset: -4px; }
.project-documents { margin-top: clamp(40px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); }
.project-documents h2 { font-size: 1rem; font-weight: 500; margin: 0 0 20px; }
.project-documents > div { display: flex; flex-wrap: wrap; gap: 12px; }
.project-documents a { display: flex; flex-direction: column; gap: 4px; min-width: 200px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 4px; }
.project-documents a:hover { border-color: var(--ink); }
.project-documents span { color: var(--ink-soft); font-size: .8rem; }
@media (max-width: 700px) {
  .artwork-grid { grid-template-columns: 1fr; gap: 24px; }
  .asset-rows, .asset-row { gap: 24px; }
  .asset-row { grid-template-columns: 1fr; }
  .project-documents > div { flex-direction: column; }
}