.project-detail-page {
  background: var(--Foundation-White);
  color: var(--Foundation-Black);
  /* Sticky top bar height — used for hero min-height math (nav + hero ≈ first viewport) */
  --project-detail-nav-height: 72px;
  /*
   * Inner grid: story text inset from the viewport (Figma ~208px at 1728px wide).
   * Not used on .project-intro — intro uses symmetric page padding; lede spans full width inside that band.
   * Fluid with vw, floored at page gutter, capped at 208px (5.2 × 40px gutter token).
   * Overridden at tablet/phone breakpoints to match tighter shells.
   */
  --project-inner-text-inset: clamp(
    var(--Scale-1000),
    12.037vw,
    calc(var(--Scale-1000) * 5.2)
  );
}

/* In-page anchors (hero “view more” → #project-intro): sit below sticky project nav */
.project-detail-page #project-intro {
  scroll-margin-top: var(--project-detail-nav-height);
}

.project-detail-shell {
  width: 100%;
  margin: 0 auto;
  padding-left: var(--Scale-600);
  padding-right: var(--Scale-600);
  box-sizing: border-box;
}

.project-detail-shell-wide {
  max-width: 960px;
}

/*
 * Bottom project nav: full-width band with same horizontal inset as top nav
 * (--Scale-1000 = 40px in primitives).
 */
.project-detail-shell.project-prev-next {
  max-width: none;
  width: 100%;
  padding-left: var(--Scale-1000);
  padding-right: var(--Scale-1000);
  box-sizing: border-box;
}

/* Footer shell: full width; horizontal inset lives on meta + inset lime line */
.project-detail-copyright .project-detail-shell.project-detail-copyright-bar {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

.project-detail-top-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: none;
  /* Frosted panel: scrolled page content shows through blurred */
  background-color: color-mix(in srgb, var(--Foundation-White) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.project-detail-top-nav .project-detail-shell {
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}

.project-detail-top-nav-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Scale-500);
}

.project-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--Scale-200);
  padding: var(--Scale-200) var(--Scale-400);
  border-radius: var(--Scale-1900);
  border: 1px solid var(--Lime-500);
  background-color: var(--Foundation-White);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Paragraph-text-size);
  line-height: var(--Font-Body-Paragraph-line-height);
  color: var(--Foundation-Black);
  text-decoration: none;
  transition: background-color 400ms ease-in-out;
}

.project-detail-back-link-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.project-detail-back-link:hover {
  background-color: var(--Lime-500);
}

.project-detail-back-link:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.project-detail-nameplate {
  margin: 0;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  font-size: calc(var(--Font-Body-Caption-text-size) * 1.2);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--Lime-500);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.project-detail-nameplate:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

/*
 * Project hero: full-bleed section; min-height fills viewport below sticky nav.
 * Outer shell can take a background pattern later (background-image on .project-hero).
 * Inner .project-hero-bg fills only .project-hero-content (not the metadata strip).
 */
.project-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Intro section uses padding-top (--Scale-1000) for the 40px gap under metadata */
  margin-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--project-detail-nav-height));
  min-height: calc(100dvh - var(--project-detail-nav-height));
  background-color: var(--Foundation-White);
  /* No top rule — avoids a “hairline” under the sticky nav (nav sits above hero in flow) */
  border-top: none;
}

/* Main split: grows; metadata sits in a non-growing row below */
.project-hero-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

/* Fills hero-content only (stops above metadata) — add background-image when asset exists */
.project-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--Warm-Grey-100) 40%, var(--Foundation-White));
}

.project-hero-image,
.project-hero-heading {
  position: relative;
  z-index: 1;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.project-hero-image-inner {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 12rem;
  background-color: var(--Warm-Grey-100);
}

/* Real hero image: fills the left column (reset img max-width: 100% can letterbox — use full bleed) */
.project-hero-image-inner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.project-hero-heading {
  justify-content: center;
  /* Full-bleed hero — no shell padding; extra right inset keeps title off viewport edge */
  padding: var(--Scale-600) var(--Scale-1100) var(--Scale-600) var(--Scale-600);
  box-sizing: border-box;
}

/* H1 token (60px desktop — see responsive.css); single page title lives in hero */
.project-hero-title {
  margin: 0;
  max-width: 100%;
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--Font-Headings-H1-text-size);
  line-height: var(--Font-Headings-H1-line-height);
}

/* Figment: hero bg on .project-hero-content only (via .project-hero-bg), not metadata */
.project-figment .project-hero-bg {
  background-color: transparent;
  background-image: url("../../assets/projects/figment/hero-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  /* Stretch to fill hero-content; texture tolerates distortion on narrow viewports */
  background-size: 100% 100%;
}

.project-figment .project-hero-image-inner {
  background-color: transparent;
}

/* Figma: ~480px wide, top-center — hangs from top of left column */
.project-figment .project-hero-image-inner > img {
  inset: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Hero “view more” pill (project pages): eye default; hover/focus expands height + fades pointer in.
 * Placement: 40px from right; closed pill bottom inset 64px from .project-hero-content (extra height grows downward).
 */
.project-detail-page .project-hero-view-more {
  position: absolute;
  /* Top fixed so height increase extends the bottom edge downward (closed bottom inset = --Scale-1300). */
  top: calc(100% - var(--Scale-1300) - 44px);
  right: var(--Scale-1000);
  bottom: auto;
  z-index: 2;
  box-sizing: border-box;
  width: var(--Scale-1300);
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--Lime-500);
  border-radius: var(--Scale-1900);
  background-color: var(--Foundation-White);
  color: var(--Foundation-Black);
  display: flex;
  /* Content anchored to top so hover growth reveals arrow below without lifting the eye */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 11px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: height 320ms ease-in-out;
}

.project-detail-page .project-hero-view-more:hover,
.project-detail-page .project-hero-view-more:focus-visible {
  height: 80px;
}

.project-detail-page .project-hero-view-more:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.project-detail-page .project-hero-view-more-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  transition: gap 320ms ease-in-out;
}

.project-detail-page .project-hero-view-more:hover .project-hero-view-more-inner,
.project-detail-page .project-hero-view-more:focus-visible .project-hero-view-more-inner {
  gap: var(--Scale-200);
}

.project-detail-page .project-hero-view-more-eye {
  width: 28px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.project-detail-page .project-hero-view-more-pointer-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition:
    max-height 320ms ease-in-out,
    opacity 320ms ease-in-out,
    transform 320ms ease-in-out;
}

.project-detail-page .project-hero-view-more-pointer {
  width: 18px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

.project-detail-page .project-hero-view-more:hover .project-hero-view-more-pointer-wrap,
.project-detail-page .project-hero-view-more:focus-visible .project-hero-view-more-pointer-wrap {
  max-height: var(--Scale-1300);
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .project-detail-page .project-hero-view-more,
  .project-detail-page .project-hero-view-more-inner,
  .project-detail-page .project-hero-view-more-pointer-wrap {
    transition-duration: 0.01ms;
  }
}

/* Lumosity System Icons: hero bg fills .project-hero-content only (via .project-hero-bg), not metadata */
.project-lumosity-system-icons .project-hero-bg {
  background-color: transparent;
  background-image: url("../../assets/projects/lumosity-icons/hero-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* Hero FG: ~66% of left column, centered (no column fill color — bg shows through) */
.project-lumosity-system-icons .project-hero-image-inner {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-lumosity-system-icons .project-hero-image-inner > img {
  position: static;
  inset: auto;
  width: 75%;
  height: auto;
  max-height: 100%;
  max-width: none;
  object-fit: contain;
  display: block;
}

/*
 * Lumosity System Icons — story grids: 80px copy-to-media gap; min-height sections
 * that grow when image blocks are tall (not global 256px gap + vertical centering).
 */
.project-lumosity-system-icons .project-story-grid {
  gap: var(--Scale-1500);
}

@media (min-width: 811px) {
  .project-lumosity-system-icons .project-story-grid {
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: flex-start;
    padding-block: var(--Scale-1500);
    box-sizing: border-box;
  }

  /* Sections 01 & 02: shorter min-height tightens gaps to 02 and 03; other sections stay 100vh */
  .project-lumosity-system-icons .project-story-grid[aria-labelledby="challenge-heading"],
  .project-lumosity-system-icons .project-story-grid[aria-labelledby="process-heading"] {
    min-height: 80vh;
    min-height: 80dvh;
  }
}

/*
 * Lumosity System Icons — story sections use inner column (--project-inner-text-inset).
 * Intro keeps global .project-intro padding (--Scale-1000 = 40px outer gutters) for offset vs story blocks.
 */
.project-lumosity-system-icons .project-story-grid-text {
  max-width: none;
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
}

.project-lumosity-system-icons .project-story-grid-gallery,
.project-lumosity-system-icons .project-lumosity-icons-s01-gallery,
.project-lumosity-system-icons .project-lumosity-icons-s02-gallery,
.project-lumosity-system-icons .project-lumosity-icons-s03-gallery,
.project-lumosity-system-icons .project-lumosity-icons-s04-media {
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
}

/* Lumosity System Icons — section 01: before/after rows (Figma 259:6959) */
.project-lumosity-system-icons .project-lumosity-icons-s01-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
}

.project-lumosity-system-icons .project-lumosity-icons-s01-row {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-600);
}

.project-lumosity-system-icons .project-lumosity-icons-s01-caption {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--Scale-200);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Caption-text-size);
  line-height: var(--Font-Body-Caption-line-height);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.project-lumosity-system-icons .project-lumosity-icons-s01-caption--before {
  color: var(--Rosso-Corsa-500);
}

.project-lumosity-system-icons .project-lumosity-icons-s01-caption--after {
  color: var(--Lime-600);
}

/* Inline SVGs from x-circle.svg / checkmark.svg; stroke/fill use currentColor for caption tint */
.project-lumosity-system-icons .project-lumosity-icons-s01-caption-icon {
  display: block;
  width: var(--Scale-400);
  height: var(--Scale-400);
  flex-shrink: 0;
}

/* 8 icons per row (@2x PNGs displayed at 96px); even spacing via space-between */
.project-lumosity-system-icons .project-lumosity-icons-s01-images {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.project-lumosity-system-icons .project-lumosity-icons-s01-images > img {
  display: block;
  width: var(--Scale-1600);
  height: var(--Scale-1600);
  max-width: none;
  flex-shrink: 0;
  object-fit: contain;
}

/* Section 03 only: ~30% more copy-to-gallery gap for breathing room above image rows */
.project-lumosity-system-icons .project-story-grid[aria-labelledby="solution-heading"] {
  gap: calc(var(--Scale-1500) * 1.8);
}

/* Lumosity System Icons — section 03: brand grid rows (Figma 262:3741) */
.project-lumosity-system-icons .project-lumosity-icons-s03-gallery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Scale-1700);
  grid-template-columns: unset;
}

.project-lumosity-system-icons .project-lumosity-icons-s03-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: var(--Scale-600);
}

.project-lumosity-system-icons .project-lumosity-icons-s03-row > img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
}

/* Row 1: three 320px tiles (@2x exports shown at 1×) */
.project-lumosity-system-icons .project-lumosity-icons-s03-row--three > img {
  max-width: 20rem;
}

/* Row 2: two 496px tiles — outer edges align with row above via space-between */
.project-lumosity-system-icons .project-lumosity-icons-s03-row--two > img {
  max-width: 31rem;
}

/*
 * Lumosity System Icons — section 04: gradient band + full icon grid (Figma 262:3854).
 * CSS-only gradient (no hero-bg.png — that asset includes patterns we omit here).
 * Stops: #ECFAFF → #FFEDE8 (not tokenized).
 */
.project-lumosity-system-icons .project-lumosity-icons-s04 {
  background-image: radial-gradient(
    120% 100% at 0% 50%,
    #ecfaff 0%,
    #ffede8 100%
  );
  /* Vertical breathing room so gradient extends past copy + grid */
  padding-block: var(--Scale-1500) var(--Scale-1700);
  gap: var(--Scale-1700);
}

@media (min-width: 811px) {
  .project-lumosity-system-icons .project-lumosity-icons-s04 {
    min-height: auto;
    gap: 140px;
    padding-block: 104px 120px;
  }
}

.project-lumosity-system-icons .project-lumosity-icons-s04-media {
  display: block;
  grid-template-columns: unset;
}

.project-lumosity-system-icons .project-lumosity-icons-s04-media > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/*
 * Lumosity System Icons — page-end kicker: 2×2 grid (Figma 261:4517).
 * Four @2x exports (592×336 display); inner-guide padding; single column on phone.
 */
.project-lumosity-system-icons .project-lumosity-icons-kicker {
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--Scale-1500);
  margin-bottom: var(--Scale-1700);
}

.project-lumosity-system-icons .project-lumosity-icons-kicker-grid {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--project-inner-text-inset);
  padding-right: var(--project-inner-text-inset);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--Scale-1500);
  column-gap: clamp(var(--Scale-600), 11.2vw, 194px);
}

.project-lumosity-system-icons .project-lumosity-icons-kicker-cell {
  min-width: 0;
}

.project-lumosity-system-icons .project-lumosity-icons-kicker-cell > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

@media (max-width: 810px) {
  .project-lumosity-system-icons .project-lumosity-icons-kicker-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* Lumosity System Icons — section 02: side + utility nav pairs (Figma 262:3590); row layout at 700px+ see end of file */
.project-lumosity-system-icons .project-lumosity-icons-s02-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-1000);
  grid-template-columns: unset;
}

.project-lumosity-system-icons .project-lumosity-icons-s02-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--Scale-1000);
}

/* 16px caption-to-image (Figma gap-[16px]); section 01 uses 24px on full icon row */
.project-lumosity-system-icons .project-lumosity-icons-s02-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Scale-400);
}

.project-lumosity-system-icons .project-lumosity-icons-s02-pair > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.project-figment .project-story-media-inner:has(> img) {
  background-color: transparent;
}

.project-figment .project-story-media-inner > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Figment section 01 — The Brief: centered art at 55% column width */
.project-figment .project-story-split[aria-labelledby="challenge-heading"] .project-story-media-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-figment .project-story-split[aria-labelledby="challenge-heading"] .project-story-media-inner > img {
  width: 55%;
  max-width: 55%;
  height: auto;
}

/* Figment section 02 — The Challenge: centered art at 75% column width */
.project-figment .project-story-split[aria-labelledby="process-heading"] .project-story-media-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-figment .project-story-split[aria-labelledby="process-heading"] .project-story-media-inner > img {
  width: 75%;
  max-width: 75%;
  height: auto;
}

/* Figment section 04 — The System: right column art at 80% width, centered */
.project-figment .project-story-split[aria-labelledby="figment-s04-heading"] .project-story-media-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-figment .project-story-split[aria-labelledby="figment-s04-heading"] .project-story-media-inner > img {
  width: 80%;
  max-width: 80%;
  height: auto;
}

/* Figment section 05 — The Experience: left column, warm grey 50 fill, art 90% width centered */
.project-figment .project-story-split[aria-labelledby="figment-s05-heading"] .project-story-media-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Warm-Grey-50);
}

.project-figment .project-story-split[aria-labelledby="figment-s05-heading"] .project-story-media-inner > img {
  width: 90%;
  max-width: 90%;
  height: auto;
}

/* Figment section 06 — The Outcome: GIF centered; below 811px uses intrinsic height (stacked layout) */
.project-figment .project-story-split[aria-labelledby="figment-s06-heading"] .project-story-media-inner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.project-figment .project-story-split[aria-labelledby="figment-s06-heading"] .project-story-media-inner > img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Figment — page-end kicker: seven-up row uses .project-story-grid-gallery inside .project-figment-kicker (full bleed + 40px gutters).
 * Section 03 Approach uses .project-story-grid-gallery.project-figment-approach-gallery — horizontal scroll strip (see block below).
 */
.project-figment-kicker .project-story-grid-gallery {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  grid-template-columns: repeat(7, 1fr);
  /* No column gap — shadows extend past the screen in the exports; gap was double-counting separation */
  gap: var(--Scale-0);
  padding-left: var(--Scale-1000);
  padding-right: var(--Scale-1000);
  box-sizing: border-box;
}

/*
 * Figment — 03 Approach: full-bleed horizontal strip (no side gutters — peek at viewport edges).
 * Revert: remove class project-figment-approach-gallery + ../js/figment-approach-gallery.js from figment.html and restore kicker-only selector above if needed.
 */
.project-figment .project-story-grid-gallery.project-figment-approach-gallery {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  /* Scroll container; flex row lives on .project-figment-approach-track (rubber-band translateX) */
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  /* Hide scrollbar — strip stays scrollable (wheel, trackpad, drag, touch) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Horizontal slide row inside approach gallery (GSAP sets x for edge overscroll) */
.project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-figment-approach-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--Scale-0);
  width: max-content;
  box-sizing: border-box;
  min-height: 0;
  will-change: transform;
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (hover: hover) and (pointer: fine) {
  .project-figment .project-story-grid-gallery.project-figment-approach-gallery:hover {
    cursor: grab;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery:active {
    cursor: grabbing;
  }
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery:focus {
  /* Mouse click focus: no ring; keyboard uses :focus-visible below */
  outline: none;
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery:focus-visible {
  /* Keyboard-style focus only (paired with :focus outline reset above) */
  outline: 1px solid color-mix(in srgb, var(--Warm-Grey-800) 28%, transparent);
  outline-offset: 3px;
}

.project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell {
  flex: 0 0 auto;
  /* Override global .project-story-grid-cell { min-width: 0 } so slides keep intrinsic width and the strip can scroll */
  min-width: min-content;
}

/* Desktop: ~720px tall slides (Figma @ 1728px → ~4.5 visible); width follows asset aspect ratio */
@media (min-width: 811px) {
  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner {
    height: 720px;
    width: auto;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner > img {
    width: auto;
    height: 100%;
    max-width: none;
    object-fit: contain;
    display: block;
    /* Prevent browser “drag image” ghost — lets pointer-drag scroll work */
    -webkit-user-drag: none;
    user-select: none;
  }
}

/* Figment — 03 Approach: less air between lede block and gallery (~66% reduction vs default gap) */
.project-figment .project-story-grid {
  gap: calc(var(--Scale-1800) * 0.34);
}

.project-figment .project-story-grid-cell-inner:has(> img) {
  height: auto;
  min-height: 0;
  background-color: transparent;
}

.project-figment .project-story-grid-cell-inner > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
}

/* Figment — page-end kicker: seven-up row lives in .project-figment-kicker .project-story-grid-gallery */
.project-figment-kicker {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--Scale-1000);
  /* Space before prev/next pills (~120px in Figma) */
  margin-bottom: var(--Scale-1700);
}

.project-figment-tagline {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--Scale-600);
  /* Space from grid to tagline (~120px in Figma) */
  margin: var(--Scale-1700) 0 0;
  padding: 0;
  box-sizing: border-box;
}

.project-figment-tagline img {
  display: block;
  height: var(--Scale-1000);
  width: auto;
  max-width: none;
}

/* Fixed strip: tags + inset bottom rule (same 40px gutters as top nav; line mirrors footer pattern) */
.project-hero-metadata {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--Scale-600);
  padding-left: var(--Scale-1000);
  padding-right: var(--Scale-1000);
  background-color: var(--Foundation-White);
}

/* Inset separator — subtle on white; reads more once body scrolls under the frosted nav */
.project-hero-metadata::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: var(--Scale-1000);
  right: var(--Scale-1000);
  height: 1px;
  background-color: var(--Warm-Grey-100);
  pointer-events: none;
}

.project-hero-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Scale-100);
  padding-bottom: var(--Scale-600);
}

.project-hero-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--Scale-100) var(--Scale-200);
  border-radius: var(--Scale-100);
  background-color: var(--Blue-100);
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--Font-Body-Paragraph-SM-text-size);
  line-height: var(--Font-Body-Paragraph-SM-line-height);
  white-space: nowrap;
}

/* Placeholder modifier system for quick per-project swaps */
.is-empty {
  background-image:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 0%,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 40%,
      transparent 40%,
      transparent 60%,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 60%,
      color-mix(in srgb, var(--Warm-Grey-200) 60%, transparent) 100%
    );
  background-size: 24px 24px;
}

/*
 * Intro lede: equal horizontal gutters (--Scale-1000); lede spans full width between them
 * (no max-width cap — aligns with hero / prev-next band). Story grid copy still uses ~2/3 cap.
 * padding-top (--Scale-1000 = 40px) is the gap under hero metadata — do not reduce that when tuning stack rhythm.
 */
.project-intro {
  box-sizing: border-box;
  width: 100%;
  padding-top: var(--Scale-1000);
  padding-right: var(--Scale-1000);
  padding-bottom: var(--Scale-1000);
  padding-left: var(--Scale-1000);
  /* No vertical gap after intro — add margin here when you want air before first story */
  margin-bottom: 0;
}

.project-intro-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

.project-intro-lede {
  margin: 0;
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--Font-Headings-H3-text-size);
  line-height: var(--Font-Headings-H3-line-height);
}

.project-section-label {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--Warm-Grey-600);
}

.project-content-heading {
  margin: 0;
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Headings-H4-text-size);
  line-height: var(--Font-Headings-H4-line-height);
  font-weight: var(--font-weight-medium);
}

.project-content-body {
  margin: 0;
  color: var(--Warm-Grey-800);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Paragraph-L-text-size);
  line-height: var(--Font-Body-Paragraph-L-line-height);
}

/*
 * Story split: full-bleed row; 100vh tall on desktop (see min-width query below).
 * --media-right: text column first in DOM; inner inset on the left; media flush right.
 * --media-left: same measurements; media is visually left (grid placement), text on the right
 * with inner inset on the trailing edge. Put .project-story-text first in the DOM for a11y;
 * grid swaps columns from min-width 811px up.
 */
.project-story-split {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* Horizontal alley between text and media (wider than story grid cell gap) */
  column-gap: var(--Scale-1300);
  /* No gap between full-height story rows — add margin when you want separation */
  margin-bottom: 0;
}

.project-story-text {
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--Scale-600);
}

.project-story-split--media-right .project-story-text {
  padding-left: var(--project-inner-text-inset);
}

.project-story-split--media-left .project-story-text {
  padding-right: var(--project-inner-text-inset);
}

.project-story-media {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Solid placeholder; swap for <img> inside this wrapper when you have art */
.project-story-media-inner {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  background-color: var(--Warm-Grey-100);
}

/* Desktop: full viewport row; text vertically centered; --media-left swaps columns (text first in DOM) */
@media (min-width: 811px) {
  .project-story-split {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .project-story-text {
    justify-content: center;
    /* Long copy can scroll instead of clipping when taller than the viewport */
    overflow-y: auto;
  }

  .project-story-split--media-left .project-story-media {
    grid-column: 1;
    grid-row: 1;
  }

  .project-story-split--media-left .project-story-text {
    grid-column: 2;
    grid-row: 1;
  }

  .project-story-grid {
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
  }

  /* Figment 7-up: pull columns together so baked-in drop shadows overlap (desktop row only) */
  .project-figment-kicker .project-story-grid-gallery .project-story-grid-cell:not(:last-child) {
    margin-right: calc(-1 * var(--Scale-200));
  }

  /*
   * Figment section 06: GIF at 66% of media column height, centered; width follows aspect ratio.
   * max-width keeps it inside the column if the implied width would overflow.
   */
  .project-figment .project-story-split[aria-labelledby="figment-s06-heading"] .project-story-media {
    height: 100%;
    min-height: 0;
  }

  .project-figment .project-story-split[aria-labelledby="figment-s06-heading"] .project-story-media-inner {
    align-items: center;
  }

  .project-figment .project-story-split[aria-labelledby="figment-s06-heading"] .project-story-media-inner > img {
    height: 66%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}

/*
 * Story grid: inner-aligned text (~2/3 max-width) + gallery row (default 4 placeholders; Figment uses 7 real screens).
 */
.project-story-grid {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* Extra space between copy block and gallery (tune later) */
  gap: var(--Scale-1800);
  margin-bottom: 0;
}

.project-story-grid-text {
  box-sizing: border-box;
  max-width: 66.666%;
  padding-left: var(--project-inner-text-inset);
  display: flex;
  flex-direction: column;
  gap: var(--Scale-600);
}

.project-story-grid-gallery {
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--Scale-1000);
  padding-right: var(--Scale-1000);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--Scale-600);
}

.project-story-grid-cell {
  min-width: 0;
}

/* 400px = 10 × 40px gutter token; swap inner for <img> when assets exist */
.project-story-grid-cell-inner {
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--Scale-1000) * 10);
  background-color: var(--Warm-Grey-100);
  border-radius: var(--Scale-200);
  overflow: hidden;
}

.project-story-grid-cell-inner > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.project-prev-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Scale-600);
  /* Equal space above and below the pill row */
  padding-top: var(--Scale-1500);
  padding-bottom: var(--Scale-1500);
}

.project-nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--Scale-200);
  min-height: 44px;
  padding: var(--Scale-300) var(--Scale-700);
  border-radius: var(--Scale-1900);
  border: 1px solid var(--Lime-500);
  background-color: var(--Foundation-White);
  color: var(--Foundation-Black);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Paragraph-text-size);
  line-height: var(--Font-Body-Paragraph-line-height);
  font-weight: var(--font-weight-regular);
  text-decoration: none;
  transition: background-color 400ms ease-in-out;
}

.project-nav-pill:hover {
  background-color: var(--Lime-500);
}

.project-nav-pill:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.project-nav-pill-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .project-detail-back-link {
    transition: none;
  }

  .project-nav-pill {
    transition: none;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery {
    scroll-snap-type: none;
  }
}

/* Minimal copyright — full-width bar under project pages; lime rule matches homepage footer strip */
.project-detail-copyright {
  width: 100%;
  box-sizing: border-box;
}

.project-detail-copyright-bar {
  /* Lime rule is drawn inset (see ::before) so it aligns with nav gutters, not viewport edges */
  border-top: none;
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.project-detail-copyright-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--Scale-1000);
  right: var(--Scale-1000);
  height: 1px;
  background-color: var(--Lime-400);
  pointer-events: none;
}

.project-detail-copyright-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--Scale-300);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: var(--Scale-1000);
  padding-right: var(--Scale-1000);
  font-family: var(--font-family-primary);
  font-size: var(--Font-Body-Caption-text-size);
  line-height: var(--Font-Body-Caption-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--Warm-Grey-600);
  text-align: center;
}

.project-detail-copyright-item {
  white-space: nowrap;
}

.project-detail-copyright-link {
  color: inherit;
  text-decoration: none;
}

.project-detail-copyright-link:focus-visible {
  outline: 2px solid var(--Foundation-Black);
  outline-offset: 2px;
}

.project-detail-copyright-dot {
  width: var(--Scale-200);
  height: var(--Scale-200);
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--Lime-500);
}

@media (max-width: 810px) {
  .project-detail-page {
    --project-inner-text-inset: var(--Scale-500);
  }

  .project-detail-shell {
    padding-left: var(--Scale-500);
    padding-right: var(--Scale-500);
  }

  /* Stack image above heading until you tune breakpoints in QA */
  .project-hero-content {
    flex-direction: column;
  }

  .project-hero-image-inner {
    min-height: 10rem;
  }

  .project-hero-heading {
    padding: var(--Scale-500) var(--Scale-900) var(--Scale-500) var(--Scale-500);
  }

  .project-hero-metadata {
    padding-left: var(--Scale-500);
    padding-right: var(--Scale-500);
  }

  .project-hero-metadata::after {
    left: var(--Scale-500);
    right: var(--Scale-500);
  }

  .project-intro {
    padding-left: var(--Scale-500);
    padding-right: var(--Scale-500);
  }

  .project-story-split {
    grid-template-columns: 1fr;
    row-gap: var(--Scale-700);
    min-height: 0;
  }

  .project-story-split--media-left .project-story-media,
  .project-story-split--media-left .project-story-text {
    grid-column: auto;
    grid-row: auto;
  }

  .project-story-split--media-right .project-story-text,
  .project-story-split--media-left .project-story-text {
    padding-left: var(--project-inner-text-inset);
    padding-right: var(--project-inner-text-inset);
  }

  .project-story-grid {
    min-height: 0;
    justify-content: flex-start;
    gap: var(--Scale-1700);
  }

  .project-lumosity-system-icons .project-story-grid {
    gap: var(--Scale-1500);
    min-height: 0;
    justify-content: flex-start;
    padding-block: 0;
  }

  /* Figment: same ~66% reduction on tablet story-grid (base here is --Scale-1700) */
  .project-figment .project-story-grid {
    gap: calc(var(--Scale-1700) * 0.34);
  }

  .project-story-grid-text {
    padding-right: var(--project-inner-text-inset);
  }

  .project-story-grid-gallery {
    padding-left: var(--Scale-500);
    padding-right: var(--Scale-500);
    grid-template-columns: repeat(2, 1fr);
  }

  /* Section 01: 4 over 4 (two rows); cells scale down on narrow viewports */
  .project-lumosity-system-icons .project-lumosity-icons-s01-images {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: space-between;
    row-gap: var(--Scale-600);
    column-gap: var(--Scale-400);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s01-images > img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-width: var(--Scale-1600);
    justify-self: center;
  }

  .project-figment-kicker .project-story-grid-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Figment 03 — Approach carousel: ~3.6 slides visible; shorter than desktop 720px */
  .project-figment .project-story-grid-gallery.project-figment-approach-gallery {
    scroll-snap-type: x proximity;
    gap: var(--Scale-200);
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell {
    flex: 0 0 calc(100vw / 3.65);
    scroll-snap-align: start;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner {
    height: 520px;
    width: 100%;
    box-sizing: border-box;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner > img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
  }

  .project-figment .project-story-grid-cell-inner:has(> img) {
    height: auto;
  }

  .project-story-grid-cell-inner {
    height: calc(var(--Scale-1000) * 5);
  }

  .project-story-media-inner {
    flex: none;
    min-height: 18rem;
  }

  .project-hero-title {
    font-size: var(--Font-Headings-H3-text-size);
    line-height: var(--Font-Headings-H3-line-height);
  }

  .project-story-grid-text {
    max-width: 100%;
  }

  .project-intro-lede {
    font-size: var(--Font-Body-Paragraph-L-text-size);
    line-height: var(--Font-Body-Paragraph-L-line-height);
  }

  .project-content-body {
    font-size: var(--Font-Body-Paragraph-text-size);
    line-height: var(--Font-Body-Paragraph-line-height);
  }
}

@media (max-width: 390px) {
  .project-detail-page {
    --project-detail-nav-height: 64px;
    --project-inner-text-inset: var(--Scale-400);
  }

  .project-detail-shell {
    padding-left: var(--Scale-400);
    padding-right: var(--Scale-400);
  }

  .project-detail-top-nav-inner {
    min-height: 64px;
  }

  .project-hero-heading {
    padding: var(--Scale-500) var(--Scale-800) var(--Scale-500) var(--Scale-400);
  }

  .project-hero-metadata {
    padding-left: var(--Scale-400);
    padding-right: var(--Scale-400);
  }

  .project-hero-metadata::after {
    left: var(--Scale-400);
    right: var(--Scale-400);
  }

  .project-intro {
    padding-left: var(--Scale-400);
    padding-right: var(--Scale-400);
  }

  .project-story-grid-gallery {
    padding-left: var(--Scale-400);
    padding-right: var(--Scale-400);
    grid-template-columns: 1fr;
  }

  .project-figment-kicker .project-story-grid-gallery {
    grid-template-columns: 1fr;
  }

  /* Figment 03 — Approach carousel: one full slide centered with ~half-slide peek each side */
  .project-figment .project-story-grid-gallery.project-figment-approach-gallery {
    scroll-snap-type: x mandatory;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell {
    flex: 0 0 calc((100vw - var(--Scale-400)) / 3);
    scroll-snap-align: center;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner {
    height: 420px;
    width: 100%;
  }

  .project-figment .project-story-grid-gallery.project-figment-approach-gallery .project-story-grid-cell-inner > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
  }

  .project-hero-title {
    font-size: var(--Font-Headings-H4-text-size);
    line-height: var(--Font-Headings-H4-line-height);
  }

  .project-intro-lede {
    font-size: var(--Font-Body-Paragraph-text-size);
    line-height: var(--Font-Body-Paragraph-line-height);
  }

  .project-detail-copyright-bar {
    min-height: 64px;
  }
}

/*
 * Lumosity s02 — four panels in one row; scale to fit gallery width (e.g. 1728px desktop).
 * Groups use display:contents so pairs share one flex row. Stacks below 700px.
 */
@media (min-width: 700px) {
  .project-lumosity-system-icons .project-lumosity-icons-s02-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--Scale-600);
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  /* Flatten side + utility groups into a single four-column row */
  .project-lumosity-system-icons .project-lumosity-icons-s02-group {
    display: contents;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-pair {
    flex: 1 1 0;
    min-width: 0;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-pair > img {
    width: 100%;
    height: auto;
  }

  /* Design max widths at 1× (@2x exports); shrink proportionally when row is narrower */
  .project-lumosity-system-icons .project-lumosity-icons-s02-pair--side > img {
    max-width: 16.375rem;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-pair--utility > img {
    max-width: 20.125rem;
  }
}

@media (max-width: 699px) {
  .project-lumosity-system-icons .project-lumosity-icons-s02-gallery {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-group {
    flex-direction: column;
    width: 100%;
    gap: var(--Scale-600);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s02-pair > img {
    width: 100%;
    max-width: 20.125rem;
  }

  .project-lumosity-system-icons .project-lumosity-icons-s03-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Scale-600);
  }

  .project-lumosity-system-icons .project-lumosity-icons-s03-row > img {
    width: 100%;
    max-width: 31rem;
  }
}