/* ============================================================
   NR THEME — WORK INDEX (layout / structure pass — NO animation)
   Editable intro, then a full-width cinematic HERO (first project) that
   bridges into a two-column CARD GRID (cards 2..n). Image shape is
   art-directed per project via `card_ratio`; row rhythm is deliberately
   varied for cadence. Staggered baselines between paired cards are intentional
   — rows are NOT height-aligned. Light/paper role.
   Motion (scroll reveal / hover scale) is a SEPARATE pass; only the static
   CSS growing-underline on titles lives here.
   ============================================================ */

.nr-work {
  max-width: var(--content-max, 1240px);
  margin: 0 auto;
  padding: clamp(4rem, 12vh, 9rem) var(--gutter, clamp(20px, 4vw, 64px)) clamp(6rem, 14vh, 11rem);
}

/* ------------------------------------------------------------
   INTRO (editable the_content): display headline + body-lg line
   ------------------------------------------------------------ */
.nr-work__intro {
  margin: 0 0 clamp(3rem, 7vh, 5rem);
}
.nr-work__intro :is(h1, h2) {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "wght" 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--colour-ink);
  max-width: 16ch;
  margin: 0 0 1.25rem;
  text-transform: none;
}
/* Body copy only — exclude the eyebrow so the global .nr-label styling
   (nr-type.css: --text-xs, --colour-mid, uppercase) isn't out-ranked by
   this higher-specificity paragraph rule. */
.nr-work__intro p:not(.nr-label) {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: var(--text-md, 1.2rem);
  line-height: 1.7;
  color: var(--colour-ink-2);
  max-width: 54ch;
  margin: 0;
}
/* The editor stamps .has-small-font-size (a WP preset with !important) on
   the eyebrow; counter it so .nr-label's size wins. The 1.5rem bottom margin is
   the shared eyebrow-to-title gap, matched on About and Contact. */
.nr-work__intro p.nr-label {
  font-size: var(--text-xs) !important;
  margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------
   CARD — shared base (hero + grid cards)
   ------------------------------------------------------------ */
.nr-work-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.nr-work-card__media {
  overflow: hidden;                                  /* clips cover crop (and any later scale) */
  background: var(--colour-rule-light, #ECEAE4);
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}
.nr-work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image shape driven by card_ratio (desktop). Staggered baselines between
   paired cards are intentional — do NOT equalise row heights. */
.nr-ratio--landscape .nr-work-card__media { aspect-ratio: 4 / 3; }
.nr-ratio--portrait  .nr-work-card__media { aspect-ratio: 3 / 4; }
.nr-ratio--wide      .nr-work-card__media { aspect-ratio: 16 / 9; }
.nr-ratio--square    .nr-work-card__media { aspect-ratio: 1 / 1; }

/* Text */
.nr-work-card__num {
  display: block;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(1.1rem, 1.6vw, 1.44rem);
  font-weight: 300;
  font-variation-settings: "opsz" 40, "wght" 300;
  line-height: 1;
  color: var(--colour-mid);
  margin: 0 0 0.6rem;
}
.nr-work-card__eyebrow { margin: 0 0 0.5rem; }
.nr-work-card__title {
  display: inline-block;          /* keeps block spacing while the underline grows under it */
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(1.4rem, 2vw, 1.728rem);
  font-weight: 300;
  font-variation-settings: "opsz" 72, "wght" 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--colour-ink);
  margin: 0 0 0.85rem;
  /* growing underline — same convention as .nr-link */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nr-work-card__desc {
  max-width: 46ch;
  color: var(--colour-mid);
  margin: 0;
}

/* ------------------------------------------------------------
   HERO (first project) — full width, cinematic, bridges into the grid
   ------------------------------------------------------------ */
.nr-work-card--hero {
  /* REDUCED bottom gap so the lead connects to the set below (not a void) */
  margin-bottom: clamp(2rem, 4vh, 3rem);
}
.nr-work-card--hero .nr-work-card__media {
  aspect-ratio: 2.4 / 1;                              /* cinematic letterbox */
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
}
/* If the hero's own card_ratio is 'wide', honour a 16:9 instead (more spec). */
.nr-work-card--hero.nr-ratio--wide .nr-work-card__media { aspect-ratio: 16 / 9; }
.nr-work-card--hero .nr-work-card__title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-variation-settings: "opsz" 110, "wght" 300;
  line-height: 1.05;
  margin-bottom: 1rem;
}
.nr-work-card--hero .nr-work-card__desc { max-width: 56ch; font-size: var(--text-md, 1.2rem); }

/* ------------------------------------------------------------
   GRID (cards 2..n) — two columns; align-items:start so heights are NOT
   equalised (varied ratios → intentional staggered baselines).
   ------------------------------------------------------------ */
.nr-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 0;                       /* row air comes from per-card margin below */
  align-items: start;
}

/* DELIBERATE vertical rhythm: a 3-row repeating cadence (tight → airy →
   medium), applied per pair so some rows sit closer and some breathe. Cards
   flow 2-up, so children come in pairs: (1,2)=row A, (3,4)=row B, (5,6)=row C. */
.nr-work-grid .nr-work-card { margin-bottom: clamp(4.5rem, 8vh, 6.5rem); }   /* C — medium (default) */
.nr-work-grid .nr-work-card:nth-child(6n+1),
.nr-work-grid .nr-work-card:nth-child(6n+2) { margin-bottom: clamp(3rem, 5vh, 4rem); }   /* A — tight */
.nr-work-grid .nr-work-card:nth-child(6n+3),
.nr-work-grid .nr-work-card:nth-child(6n+4) { margin-bottom: clamp(6rem, 11vh, 9rem); }  /* B — airy */
.nr-work-grid .nr-work-card:nth-last-child(-n+2) { margin-bottom: 0; }       /* no trailing void on the last row */

/* ------------------------------------------------------------
   Hover — gated to true hover + fine pointer (no sticky states on touch).
   The growing-underline works unconditionally (background-size, never touched
   by GSAP). The image scale + numeral affordance are additionally gated under
   `.is-revealed` (added by nr-work-motion.js when a card finishes revealing),
   so the CSS transform-transition can't fight GSAP's inline reveal transform.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  /* Title underline — available immediately (no JS / reduced-motion safe) */
  .nr-work-card__link:hover .nr-work-card__title,
  .nr-work-card__link:focus-visible .nr-work-card__title { background-size: 100% 1px; }

  /* Image gently scales in its overflow:hidden box */
  .nr-work-card.is-revealed .nr-work-card__media img {
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .nr-work-card.is-revealed .nr-work-card__link:hover .nr-work-card__media img,
  .nr-work-card.is-revealed .nr-work-card__link:focus-visible .nr-work-card__media img {
    transform: scale(1.04);
  }

  /* Clickable affordance (option b): the numeral brightens mid → ink and
     nudges a touch — a single quiet "this is a door" gesture. */
  .nr-work-card.is-revealed .nr-work-card__num {
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .nr-work-card.is-revealed .nr-work-card__link:hover .nr-work-card__num,
  .nr-work-card.is-revealed .nr-work-card__link:focus-visible .nr-work-card__num {
    color: var(--colour-ink);
    transform: translateX(4px);
  }
}

/* ------------------------------------------------------------
   Mobile (<820px) — single column; ALL media normalised to 4:3 (incl. hero);
   even, tighter rhythm; text below image.
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  .nr-work-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  /* Normalise every card's image to 4:3 regardless of card_ratio so the
     stacked column stays even (overrides the ratio + hero rules). */
  .nr-work-card__media { aspect-ratio: 4 / 3 !important; }

  /* Even, consistent spacing — the desktop varied cadence does not apply. */
  .nr-work-card--hero { margin-bottom: 3rem; }
  .nr-work-grid .nr-work-card,
  .nr-work-grid .nr-work-card:nth-child(6n+1),
  .nr-work-grid .nr-work-card:nth-child(6n+2),
  .nr-work-grid .nr-work-card:nth-child(6n+3),
  .nr-work-grid .nr-work-card:nth-child(6n+4) { margin-bottom: 3rem; }
  .nr-work-grid .nr-work-card:nth-last-child(-n+2) { margin-bottom: 0; }
}

/* ------------------------------------------------------------
   Reduced motion — kill the underline transition (no other motion here)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .nr-work-card__title { transition: none; }
}

/* ------------------------------------------------------------
   BACKGROUND FIELD (nr-work-hero.js) — full-page scroll-scrubbed canvas.
   The element is created by JS (reduced-motion visitors never get it),
   mounted INSIDE .nr-content (the opaque curtain layer, nr-footer.css):
   as a negative-z-index child of that stacking context it paints above
   the wrapper's paper background but below all content; the sticky site
   header (z-index 900) stays on top. Viewport-fixed — .nr-content has no
   transform/filter, so fixed positioning is not re-anchored.
   Nothing here touches the intro or card styles above.
   ------------------------------------------------------------ */
.nr-work__canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}