/* ═══════════════════════════════════════════════════════════════════════════
   The work grid.
   ───────────────────────────────────────────────────────────────────────────
   Every reference in this genre — BUCK, Refik Anadol, Studio Lemercier, Moment
   Factory — presents work the same way: an asymmetric grid of large media with
   title-only labelling. No summaries, no stack chips, no reading. The tile's
   job is to make you click; the project page's job is to explain.

   So the chrome here is almost nothing. The screenshots supply every colour on
   the page, which is why the palette around them is a machined near-black.
   ═══════════════════════════════════════════════════════════════════════════ */

.grid-work {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.1vw, 18px);
}

/* Asymmetry is the whole point — a uniform grid reads as a catalogue.
   The rhythm repeats every six tiles: 4-2 / 2-4 / 3-3. */
.tile { grid-column: span 3; }
.tile:nth-child(6n + 1) { grid-column: span 4; }
.tile:nth-child(6n + 2) { grid-column: span 2; }
.tile:nth-child(6n + 3) { grid-column: span 2; }
.tile:nth-child(6n + 4) { grid-column: span 4; }

.tile__link {
  position: relative; display: block; overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 2px;
  aspect-ratio: 16 / 10;
  isolation: isolate;
}
.tile:nth-child(6n + 2) .tile__link,
.tile:nth-child(6n + 3) .tile__link { aspect-ratio: 4 / 5; }

.tile__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;   /* screenshots read from the top */
  transition: transform 900ms var(--ease-out), filter 500ms var(--ease-io);
  filter: saturate(.88) contrast(1.02);
}
.tile__link:hover .tile__media,
.tile__link:focus-visible .tile__media {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.04);
}

/* One scrim, bottom-weighted, so the label always has ground under it whatever
   the screenshot happens to be. Fixed values — the media is not theme-aware. */
.tile__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(3,4,6,.92) 0%, rgba(3,4,6,.62) 26%, rgba(3,4,6,.06) 58%, rgba(3,4,6,.22) 100%);
  transition: opacity var(--dur-2) var(--ease-io);
}
.tile__link:hover .tile__scrim { opacity: .88; }

.tile__label {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: clamp(14px, 1.6vw, 24px);
  display: grid; gap: 6px;
}
.tile__cat {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #E6C462;
}
.tile__title {
  font-family: var(--font-display); font-size: clamp(17px, 1.5vw, 25px);
  font-weight: 700; letter-spacing: -.018em; line-height: 1.08; color: #FBFBFC;
}
.tile__role {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; color: #B4BCC8;
}

/* The gold rule wipes across the top edge on hover — the graticule at tile
   scale, and the only motion the tile has besides the slow push-in. */
.tile__link::before {
  content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 2px;
  background: #E6C462; transform: scaleX(0); transform-origin: left;
  transition: transform 520ms var(--ease-out);
}
.tile__link:hover::before, .tile__link:focus-visible::before { transform: scaleX(1); }

/* A project whose site is down gets a stated slate, never a blank tile —
   a white rectangle in a portfolio reads as a design choice, not a dead host. */
.tile--dead .tile__link { background: var(--bg-sunk); border-style: dashed; }
.tile--dead .tile__slate {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
}

@media (max-width: 900px) {
  .grid-work { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile:nth-child(6n + 1), .tile:nth-child(6n + 2),
  .tile:nth-child(6n + 3), .tile:nth-child(6n + 4) { grid-column: span 1; }
  .tile__link, .tile:nth-child(6n + 2) .tile__link,
  .tile:nth-child(6n + 3) .tile__link { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .grid-work { grid-template-columns: 1fr; }
  .tile__link, .tile:nth-child(6n + 2) .tile__link,
  .tile:nth-child(6n + 3) .tile__link { aspect-ratio: 16 / 10; }
}

/* ── disciplines ───────────────────────────────────────────────────────────
   A list set at display scale. It is the one place on the page that is pure
   type, and it earns that by sitting between two blocks of imagery. */

.disciplines { list-style: none; padding: 0; margin: 0; display: grid; }
.disciplines li {
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-6);
  padding: clamp(14px, 1.8vw, 26px) 0;
}
.disciplines li:last-child { border-bottom: 1px solid var(--line); }
.disciplines__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.6vw, 50px); letter-spacing: -.03em; line-height: 1;
  color: var(--ink); flex: 1 1 auto;
}
.disciplines__note {
  font-size: var(--t-sm); color: var(--ink-3); max-width: 42ch; flex: 0 1 auto;
}
.disciplines__n {
  font-family: var(--font-mono); font-size: 11px; color: var(--gold-ink);
  letter-spacing: .1em; flex: none; align-self: flex-start;
}

/* ── press marquee ────────────────────────────────────────────────────────── */

.press-strip { border-block: 1px solid var(--line); padding-block: var(--s-6); }
.press-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(20px, 3.4vw, 56px); justify-content: center;
}
.press-list li {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, 1.3vw, 19px); letter-spacing: .04em;
  color: var(--ink-4);
  transition: color var(--dur-2) var(--ease-io);
}
.press-list li:hover { color: var(--ink-2); }