/* ===================================================================
   gallery.css — the shared "gallery wall" look of the Work and Lab pages.
   Loaded after style.css / lab.css and overrides their tile styling, so
   both pages hang their pieces the same way: a soft black wall, uniform square
   tiles with air between them, and a quiet caption under each.
   Colours match the project view's gallery (dark) mode in overlay.css.
   =================================================================== */
.page-grid,
.page-lab {
  /* colours: the site palette in tokens.css. Dark is how these pages come;
     the nav's Dark / Light button (theme.js) swaps in the light set below. */
  --g-bg: var(--dark);
  --g-ink: var(--dark-ink);
  --g-muted: var(--dark-muted);
  --g-line: var(--dark-line);
  --g-lift: var(--dark-lift);              /* the faint glow at the top of the screen */
  --g-well: var(--dark-well);              /* behind pictures while they load */
  --g-card: var(--dark-card);
  --g-card-hover: var(--dark-card-hover);
  --g-text: color-mix(in srgb, var(--g-ink) 72%, transparent);   /* running text */
  --g-gutter: clamp(20px, 4vw, 64px);
  /* soft black, a touch lighter towards the top of the screen (tokens.css) */
  background: radial-gradient(140vw 90vh at 50% 0%, var(--g-lift) 0%, transparent 70%) fixed, var(--g-bg);
  transition: background-color 0.5s ease, color 0.5s ease;
}
html:has(body.page-grid),
html:has(body.page-lab) { background: var(--dark); }

/* ---- light theme ---- */
html[data-theme="light"] .page-grid,
html[data-theme="light"] .page-lab {
  --g-bg: var(--paper);
  --g-ink: var(--paper-ink);
  --g-muted: var(--paper-muted);
  --g-line: var(--paper-line);
  --g-lift: transparent;
  --g-well: var(--paper-well);
  --g-card: var(--paper-card);
  --g-card-hover: var(--paper-card-hover);
}
html[data-theme="light"]:has(body.page-grid),
html[data-theme="light"]:has(body.page-lab) { background: var(--paper); }

/* ---- page title: a single row of small print, the page's name leading it ---- */
.page-head {
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(104px, 15vh, 160px) var(--g-gutter) 0;
  color: var(--g-ink);
}
.page-head-label {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: var(--g-ink);
}
.page-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--g-muted);
}
.page-head-row > :last-child { flex: none; white-space: nowrap; }

/* a page title kept for screen readers and search engines, not drawn */
.page-title-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Work has no title row: the wall itself starts clear of the site nav */
body.page-grid .grid { padding-top: clamp(104px, 15vh, 160px); }

/* ---- the wall ---- */
.grid:not(.list-view),
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* Work: the COLS slider overrides this inline */
  column-count: initial;
  gap: clamp(28px, 3.6vw, 56px) clamp(12px, 1.6vw, 24px);
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(28px, 5vh, 56px) var(--g-gutter) clamp(80px, 12vh, 160px);
}
@media (max-width: 1200px) { .lab-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .grid:not(.list-view),
  .lab-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 10px; }
}

/* ---- a piece: square picture, caption underneath ---- */
:is(.grid:not(.list-view) > .grid-item, .lab-card) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  aspect-ratio: auto;
  overflow: visible;
  contain: layout style;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.grid:not(.list-view) > .grid-item { transition: opacity 0.45s ease; }
.grid:not(.list-view) > .grid-item:hover { background: none; }
.grid:not(.list-view) > .grid-item::after { display: none; }

.grid:not(.list-view) > .grid-item > img,
.lab-card .media-wrap {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: var(--g-well);
}
.grid:not(.list-view) > .grid-item > img,
.lab-card .media-wrap > img,
.lab-card .media-wrap > video {
  object-fit: cover;
}
.lab-card .media-wrap > img,
.lab-card .media-wrap > video { height: 100%; }
/* Lab clips: the tile shows the poster; lab.js lays a <video> over it only
   while a mouse hovers, faded in once it is actually playing. */
.lab-card .media-wrap > video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lab-card .media-wrap > video.is-playing { opacity: 1; }
/* no zoom on hover: the picture stays put */
.grid:not(.list-view) > .grid-item:hover > img,
.grid:not(.list-view) > .grid-item:hover .hover-video,
.lab-card:hover .media-wrap > img,
.lab-card:hover .media-wrap > video { transform: none; }
.grid:not(.list-view) .hover-video-wrap {
  inset: 0 0 auto 0;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
.grid:not(.list-view) > .grid-item.loading::before {
  inset: 0 0 auto 0;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  background: var(--g-well);
  animation: none;
}

/* ---- featured project: a full-width block woven into the Work wall ----
   (script.js "FEATURES"). Picture on one side, the brief and description
   of the project on the other, sides alternating down the page. */
.wall-feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(28px, 5vw, 80px) 0;
  color: var(--g-ink);
  text-decoration: none;
  cursor: pointer;
}
.wall-feature.is-flipped { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.wall-feature.is-flipped .wall-feature-media { order: 2; }

.wall-feature-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--g-well);
  /* wipes open from its outer edge as the block scrolls in */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.wall-feature.is-flipped .wall-feature-media { clip-path: inset(0 0 0 100%); }
.wall-feature.is-in .wall-feature-media { clip-path: inset(0 0 0 0); }
.wall-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.12;
  transition: scale 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wall-feature.is-in .wall-feature-media img { scale: 1; }
.wall-feature.is-in:hover .wall-feature-media img { scale: 1.04; transition-duration: 0.8s; }

.wall-feature-text { display: grid; gap: clamp(10px, 1.2vw, 18px); align-content: center; }
/* each line rises in turn once the block is in view */
.wall-feature-text > * {
  display: block;
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.wall-feature.is-in .wall-feature-text > * { opacity: 1; translate: 0 0; }
.wall-feature.is-in .wall-feature-text > :nth-child(1) { transition-delay: 0.15s; }
.wall-feature.is-in .wall-feature-text > :nth-child(2) { transition-delay: 0.22s; }
.wall-feature.is-in .wall-feature-text > :nth-child(3) { transition-delay: 0.30s; }
.wall-feature.is-in .wall-feature-text > :nth-child(4) { transition-delay: 0.38s; }
.wall-feature.is-in .wall-feature-text > :nth-child(5) { transition-delay: 0.46s; }
.wall-feature.is-in .wall-feature-text > :nth-child(6) { transition-delay: 0.54s; }

.wall-feature-kicker,
.wall-feature-meta,
.wall-feature-cta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--g-muted);
}
.wall-feature-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.wall-feature-brief {
  max-width: 26ch;
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.wall-feature-about {
  max-width: 46ch;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.55;
  color: var(--g-muted);
}
.wall-feature .wall-feature-cta {
  justify-self: start;
  margin-top: 6px;
  padding: 10px 16px;
  border: 1px solid var(--g-line);
  border-radius: 999px;
  color: var(--g-ink);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    opacity 0.7s ease 0.54s, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.54s;
}
.wall-feature:hover .wall-feature-cta { background: var(--g-ink); border-color: var(--g-ink); color: var(--g-bg); }
.wall-feature:focus-visible { outline: 1px solid var(--g-ink); outline-offset: 6px; }

@media (max-width: 768px) {
  .wall-feature,
  .wall-feature.is-flipped { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .wall-feature.is-flipped .wall-feature-media { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-feature-media,
  .wall-feature.is-flipped .wall-feature-media { clip-path: none; transition: none; }
  .wall-feature-media img { scale: 1; transition: none; }
  .wall-feature-text > * { opacity: 1; translate: 0 0; transition: none; }
}

/* ---- caption: name ........ year / type ---- */
:is(.grid:not(.list-view) > .grid-item, .lab-card) .item-label {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  width: auto;
  padding: 10px 0 0;
  background: none;
  border-radius: 0;
  opacity: 1;
  transform: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--g-muted);
  pointer-events: none;
}
:is(.grid:not(.list-view) > .grid-item, .lab-card) .item-label-name {
  grid-column: 1;
  grid-row: 1;
  display: block;
  font: inherit;
  letter-spacing: inherit;
  color: var(--g-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:is(.grid:not(.list-view) > .grid-item, .lab-card) .item-label-tag {
  grid-column: 2;
  grid-row: 1;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ---- reel bar: a thin playbar along the bottom of a clip's picture while
   it plays on hover, like the one on a phone's short videos (script.js
   fills it). It lives in the clip's layer, so it fades in and out with it. ---- */
.reel-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.24);
  pointer-events: none;
}
.reel-bar i {
  display: block;
  height: 100%;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---- the year: out of sight until the tile is hovered, then each digit
   rolls up into place like an odometer, one after the other. script.js
   builds the digit columns on the first hover and marks the tag .is-in
   while the pointer is over the tile. Without a mouse (touch screens) and in
   the list view the year is simply shown as text. ---- */
.grid:not(.list-view) .item-label-tag.is-year:not(.is-roll) { visibility: hidden; }
.item-label-tag.is-roll { display: flex; align-self: start; }
.yr-slot { display: block; height: 1.4em; overflow: hidden; }
.yr-roll {
  display: block;
  transform: translateY(1.4em);                 /* parked below its window */
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.yr-roll b { display: block; height: 1.4em; line-height: 1.4em; font-weight: inherit; }
.item-label-tag.is-in .yr-roll { transform: translateY(-2.8em); }
.grid.list-view .yr-roll { transform: translateY(-2.8em); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .yr-roll { transition: none; }
}

/* ---- Work's list view, on the black wall ---- */
.grid.list-view {
  max-width: 1800px;
  padding: clamp(28px, 5vh, 56px) var(--g-gutter) clamp(80px, 12vh, 160px);
}
.grid.list-view .grid-item { border-bottom-color: var(--g-line); }
.grid.list-view .grid-item:hover { background: color-mix(in srgb, var(--g-ink) 4%, transparent); }
.grid.list-view .grid-item .item-meta { color: var(--g-muted); }

/* ---- Lab cards keep their rise-in; only the look above is shared ---- */
.lab-card {
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  .page-head-row { font-size: 11px; }
  .grid:not(.list-view) > .grid-item > img { border-radius: 0; }
  :is(.grid:not(.list-view) > .grid-item, .lab-card) .item-label { font-size: 10px; column-gap: 8px; }
}