/* Work landing page. Shares the nav and type scale with ../styles.css; this
   file adds the page title and the staggered project index. */

/* A white page with black type, unlike the rest of the site — so it overrides
   both the root background and the inherited white text colour. */
html,
body {
  background: #ffffff;
}

body.work-page {
  color: #000000;
}

/* 1600px of content plus the shared --page-gutter either side (defined in
   ../styles.css), so the column still reaches its full width on a large screen
   rather than being squeezed by the wider gutter. The nav gets the same
   treatment globally, so the cards stay aligned with the logo. */
.work-intro,
.work-grid {
  max-width: calc(100rem + var(--page-gutter) * 2);
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* The nav is a shared component — same links, same metrics as every other
   page. Only its colours change here, because this is the one page with a
   white background. */

@media (max-width: 860px) {
  /* The full-screen mobile menu takes the page's own colours here rather than
     the black used on the dark pages. */
  .nav-links.is-open {
    background: #ffffff;
  }
}

/* 240px below the nav at the design's 1440 frame, then the title block's own
   20px before the first row of cards. Shares the page gutter and grid with the
   cards below. */
.work-intro {
  margin: 0 auto;
  padding-top: clamp(3.75rem, 16.67vw, 15rem);
  padding-bottom: 1.25rem;
}

.work-title {
  font-weight: 300;
  font-size: clamp(3rem, 6.67vw, 6rem);
  line-height: 1;
}

/* Staggered index rather than an even grid: cards come in three sizes and sit
   at different offsets across the page, so no two rows read the same.

   24 equal columns of the 1400px content width (58.33px each) are enough to
   place every card in the design to within a few pixels — a wide card spans 20
   of them, a square or portrait card 11 — and because the track is fractional
   the whole arrangement scales without the offsets drifting. Horizontal padding
   comes from --page-gutter, shared with the title and this page's nav so the
   three stay aligned. */
.work-grid {
  background: #ffffff;
  display: grid;
  /* 60px on the design's 1440 frame, held proportional as the page scales. */
  --stagger: clamp(1.5rem, 4.17vw, 3.75rem);
  grid-template-columns: repeat(24, 1fr);
  /* The design's 80px between rows, plus 80px — at the design's own gap the
     raised card in each pair came within about 16px of the caption above it,
     because its negative margin eats most of the gap. Held in a property so an
     individual row can be adjusted as a proportion of it rather than a flat
     pixel value that would stop scaling. */
  --row-gap: clamp(7.5rem, calc(5.56vw + 5rem), 10rem);
  row-gap: var(--row-gap);
  align-items: start;
  margin: 0 auto;
  padding-top: 2.5rem;
  padding-bottom: 1.25rem;
}

/* Wide card, flush left. */
.work-slot-1 {
  grid-column: 1 / span 20;
}

/* Square, left — pairs with slot 3. */
.work-slot-2 {
  grid-row: 2;
  grid-column: 1 / span 11;
}

/* Portrait, right. Starts 60px higher than its neighbour, which is what breaks
   the pair out of reading as a row. */
.work-slot-3 {
  grid-row: 2;
  grid-column: 14 / span 11;
  margin-top: calc(var(--stagger) * -1);
}

/* Wide card again, but inset from the left so it sits opposite slot 1. Sits 20%
   closer to the row above than the standard gap: that row ends on a caption
   under its shorter card, so the space below it read larger than the others.
   Only this gap changes — pulling the row up leaves the one beneath it intact. */
.work-slot-4 {
  grid-row: 3;
  grid-column: 5 / span 20;
  margin-top: calc(var(--row-gap) * -0.2);
}

/* Portrait, left. */
.work-slot-5 {
  grid-row: 4;
  grid-column: 1 / span 11;
}

/* Square, right — dropped rather than raised, so the stagger alternates. */
.work-slot-6 {
  grid-row: 4;
  grid-column: 14 / span 11;
  margin-top: var(--stagger);
}

/* Row 5 carries one card on its own, so there is no neighbour to stagger
   against and no offset to set — it takes the standard row gap and the same
   left edge as slot 1. */
.work-slot-7 {
  grid-row: 5;
  grid-column: 1 / span 20;
}

/* The closing pair, both square. Slot 9 is raised the way slot 3 is, so the
   last row breaks out of reading as a row like every other pair above it. */
.work-slot-8 {
  grid-row: 6;
  grid-column: 1 / span 11;
}

.work-slot-9 {
  grid-row: 6;
  grid-column: 14 / span 11;
  margin-top: calc(var(--stagger) * -1);
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #000000;
}

/* Cards parallax.js drifts on scroll. Flagged for the compositor so the
   transform doesn't repaint the card's artwork on every frame. */
[data-parallax] {
  will-change: transform;
}

/* No parallax when the grid is a single column, so nothing should be promoted
   either — and none of it runs for anyone who has asked for less motion. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  [data-parallax] {
    will-change: auto;
  }
}

/* Medium, not semibold — the same weight and now the same 24px as the nav,
   which is the next step up the site's scale from the old 21px. */
.work-card-title {
  font-weight: 500;
  font-size: clamp(1.125rem, 1.67vw, 1.5rem);
  line-height: 1.4;
}

/* Hover zooms the artwork 8% inside its frame — the tile itself doesn't move,
   the image just grows and the tile's overflow clips it. Scaling the card
   instead would push into its neighbours, and parallax.js already owns the
   transform on the two staggered cards, so a CSS transform there would be
   overwritten by its inline style. Overrides the global a:hover fade, which
   would wash the artwork out against the white page. */
.work-card:hover {
  opacity: 1;
}

.work-card-media > img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.work-card:hover .work-card-media > img {
  transform: scale(1.06);
}

/* No zoom for anyone who has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .work-card-media > img {
    transition: none;
  }

  .work-card:hover .work-card-media > img {
    transform: none;
  }
}

/* The whole module is one link, so its caption underlines from anywhere on
   the card — same hover affordance the nav links use. */
.work-card:hover .work-card-title {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* The tile owns the ratio and the artwork crops to fill it. Three sizes now,
   straight from the design: 1160x720, 640x640 and 640x780. */
.work-card-media {
  overflow: hidden;
}

.work-media-wide {
  aspect-ratio: 1160 / 720;
}

.work-media-square {
  aspect-ratio: 1;
}

.work-media-portrait {
  aspect-ratio: 640 / 780;
}

/* Every card's artwork is exported at its tile's own ratio, so cover only ever
   trims a pixel or two — it is there to guarantee the fill, not to crop. */
.work-card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The Pulse card is the lockup on black rather than a photo, so it centres the
   artwork instead of filling the tile. 350 of the design's 640 square. */
.work-card-media-pulse {
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-card-media-pulse img {
  width: 55%;
  height: auto;
  object-fit: contain;
}

/* Artwork that is itself near-white has no edge against this white page, so the
   tile supplies a hairline. The design draws it as a 1px stroke on the frame;
   the export's own baked-in border is trimmed off so the two can't double up,
   and a border here survives the tile's cover crop where a baked one wouldn't. */
.work-card-media-outlined {
  border: 1px solid rgba(0, 0, 0, 0.07);
}

@media (max-width: 860px) {
  /* The design's 240px of headroom is desktop breathing room, not a mobile
     one — it would push the first card off the screen. */
  .work-intro {
    padding: 60px 20px 20px;
  }

  .work-title {
    font-size: 48px;
  }

  /* No room to stagger anything — one card per row at full width, and the slot
     placements are unwound so their spans don't invent extra columns. */
  .work-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .work-slot-1,
  .work-slot-2,
  .work-slot-3,
  .work-slot-4,
  .work-slot-5,
  .work-slot-6,
  .work-slot-7,
  .work-slot-8,
  .work-slot-9 {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }

  .work-card-title {
    font-size: 18px;
  }
}