/* ============================================
   PROJECT — pages cas d'étude
   Système aligné sur la home : Pangaia ultralight MAJ, pills outline,
   transitions tranchées entre sections, pas de séparateurs ornés.
   ============================================ */

.project-body {
  background: var(--color-bg);
}

.project-page {
  position: relative;
  z-index: 1;
}

/* ---------- HERO PROJET ---------- */
.project-hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--space-9) + 32px) var(--gutter) var(--space-7);
  gap: var(--space-7);
  position: relative;
  background: var(--color-bg);
}

.project-hero__crumbs {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-ink-soft);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.project-hero__crumbs a:hover { color: var(--color-lavender); }
.project-hero__crumbs span[aria-hidden="true"] { opacity: 0.4; }

.project-hero__title {
  align-self: center;
  font-family: var(--font-serif);
  font-weight: 200;
  text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.project-hero__title em {
  font-style: normal;
  font-weight: 200;
}

/* Meta projet : grid 4 colonnes, séparateur trait fin entre les items, hiérarchie typo claire */
.project-hero__meta {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-line-strong);
  padding-top: var(--space-5);
  gap: 0;
}
.project-hero__meta-item {
  padding-right: var(--space-5);
  padding-left: var(--space-5);
  border-left: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.project-hero__meta-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.project-hero__meta-item:last-child {
  padding-right: 0;
}
.project-hero__meta dt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-ink-muted);
}
.project-hero__meta dd {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}

.project-hero__meta-item--pills dd {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  row-gap: var(--space-3);
  align-items: flex-start;
}

@media (max-width: 1024px) {
  .project-hero__meta { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) 0; }
  .project-hero__meta-item:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 560px) {
  .project-hero__meta { grid-template-columns: 1fr; gap: var(--space-4); }
  .project-hero__meta-item {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-line);
  }
  .project-hero__meta-item:last-child { border-bottom: 0; padding-bottom: 0; }
}

@media (max-width: 720px) {
  .project-hero {
    min-height: auto;
    padding-top: calc(var(--space-8) + 32px);
    padding-bottom: var(--space-7);
  }
  .project-hero__title { font-size: clamp(2.4rem, 11vw, 4rem); }
}

/* ---------- BIG VISUAL FULL-BLEED ----------
   Bloc full-width entre les sections (image case study, hero couleur, etc.) */
.project-bigvisual {
  width: 100%;
  margin: 0;
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
}
.project-bigvisual--ink { background: var(--color-ink); }
.project-bigvisual--lavender { background: var(--color-lavender); }
.project-bigvisual img,
.project-bigvisual video {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- STICKERS LILLE ADDICT ----------
   SVG superposés sur les mockups, posés à la main façon collage */
.la-stickered { position: relative; }
.la-stickered .la-sticker {
  position: absolute;
  width: auto;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
  transition: transform var(--duration-base) var(--ease-out);
}
/* Tailles réduites de moitié : les stickers étaient trop massifs et bouffaient
   les mockups. On garde les positions mais on resserre l'échelle. */
.la-sticker--logo {
  top: 5%;
  left: 4%;
  width: clamp(45px, 4.5vw, 80px);
  transform: rotate(-8deg);
}
.la-sticker--soso {
  bottom: 6%;
  right: 5%;
  width: clamp(45px, 4.8vw, 85px);
  transform: rotate(12deg);
}
.la-sticker--sortir {
  top: 5%;
  right: 4%;
  width: clamp(55px, 5.5vw, 100px);
  transform: rotate(-6deg);
}
.la-sticker--sons {
  bottom: 6%;
  left: 5%;
  width: clamp(50px, 5vw, 90px);
  transform: rotate(8deg);
}

/* Bloc logo Lille Addict : logo carré 1:1 petit à gauche, mockup mobile
   en portrait 4:5 plus large à droite. align-items: center pour que le
   logo (plus petit en hauteur) se centre face au mockup tall portrait. */
.la-logo-row {
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
}
.la-logo-row .la-logo-cell {
  aspect-ratio: 1 / 1;
  background: transparent;
  padding: 10%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.la-logo-row .la-logo-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
}
.la-logo-row .la-mockup-cell {
  aspect-ratio: 2 / 1;
  background: transparent;
  overflow: hidden;
}
.la-logo-row .la-mockup-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Duo Solly carré : moodboard + abribus en 1:1, alignés en hauteur */
.solly-duo-square.visual-block--duo .visual.visual--page {
  aspect-ratio: 1 / 1;
}

/* Duo Solly paysage 4:3 : motion-4 + motion-1 en ratio natif 4/3 (1280x960),
   évite le crop quand les cellules sont forcées en 4:5 portrait par défaut. */
.solly-duo-landscape.visual-block--duo .visual.visual--page {
  aspect-ratio: 4 / 3;
}
.solly-duo-landscape.visual-block--duo .visual.visual--page video {
  object-fit: cover;
}

/* Cellule Solly 16:9 : pour mockup-web qui doit afficher en bandeau cinéma. */
.visual.visual--page.solly-cell-16x9 {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.visual.visual--page.solly-cell-16x9 img,
.visual.visual--page.solly-cell-16x9 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Marquee Solly : 4 posts Instagram qui défilent infiniement, droite vers gauche.
   Le track contient 2 sets identiques de 4 vidéos. Chaque vidéo a un margin-right
   (PAS de gap sur le flex) pour que translateX(-50%) tombe pile sur la fin du
   1er set → boucle parfaitement seamless sans saut. */
.solly-posts-marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
}
.solly-posts-marquee__track {
  display: flex;
  width: max-content;
  animation: solly-posts-marquee 40s linear infinite;
  will-change: transform;
}
.solly-posts-marquee__track > video {
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 420px);
  aspect-ratio: 3 / 4;
  height: auto;
  display: block;
  object-fit: cover;
  margin-right: var(--space-4);
  background: var(--color-bg-soft);
}
@keyframes solly-posts-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.solly-posts-marquee:hover .solly-posts-marquee__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .solly-posts-marquee__track { animation: none; }
}
@media (max-width: 720px) {
  .solly-posts-marquee__track > video {
    width: 65vw;
    margin-right: var(--space-3);
  }
}

/* Léger jeu au survol pour donner vie à la planche */
.la-stickered:hover .la-sticker--logo { transform: rotate(-12deg) scale(1.04); }
.la-stickered:hover .la-sticker--soso { transform: rotate(16deg) scale(1.04); }
.la-stickered:hover .la-sticker--sortir { transform: rotate(-10deg) scale(1.04); }
.la-stickered:hover .la-sticker--sons { transform: rotate(12deg) scale(1.04); }

@media (max-width: 720px) {
  .la-sticker--logo { width: 13vw; top: 4%; left: 4%; }
  .la-sticker--soso { width: 14vw; bottom: 4%; right: 4%; }
  .la-sticker--sortir { width: 18vw; top: 4%; right: 4%; }
  .la-sticker--sons { width: 15vw; bottom: 4%; left: 4%; }
  /* Sur mobile, le bloc logo + mockup repasse en deux lignes */
  .la-logo-row { grid-template-columns: 1fr; }
}

/* ---------- INTRO PROJET ---------- */
.project-intro {
  padding: var(--space-10) var(--gutter);
  background: var(--color-bg);
}

.project-intro__inner {
  max-width: var(--container-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}

.project-intro__label {
  justify-self: start;
  align-self: start;
  margin-top: var(--space-2);
}

.project-intro__lede {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 200;
  text-transform: uppercase;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
}
.project-intro__lede em {
  font-style: normal;
  font-weight: 200;
}

.project-intro__text p {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
  max-width: 64ch;
}
.project-intro__text p:last-child { margin-bottom: 0; }
.project-intro__aside {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-ink-muted);
  margin-top: var(--space-5);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-lavender);
}

@media (max-width: 720px) {
  .project-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---------- BLOCS VISUELS ---------- */
.project-visuals {
  padding: var(--space-6) var(--gutter) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: var(--container-max);
  margin-inline: auto;
  background: var(--color-bg);
}

/* Page case study utilisée comme visuel : image full-width, ratio respecté */
.visual.visual--page {
  display: block;
  width: 100%;
  margin: 0;
  aspect-ratio: auto;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.visual.visual--page img,
.visual.visual--page video {
  display: block;
  width: 100%;
  height: auto;
}
.visual.visual--page::after { content: none; }

.visual-block {
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}
.visual-block--full { grid-template-columns: 1fr; }
.visual-block--duo { grid-template-columns: 1fr 1fr; }
.visual-block--trio { grid-template-columns: 1fr 1fr 1fr; }
.visual-block--asym-l { grid-template-columns: 2fr 1fr; }
.visual-block--asym-r { grid-template-columns: 1fr 2fr; }
/* Solo "petit" : visuel centré, largeur limitée pour respirer */
.visual-block--narrow {
  grid-template-columns: 1fr;
  max-width: 460px;
  margin-inline: auto;
}

/* Duo & trio : hauteur uniforme entre les cellules (média recadré cover) */
.visual-block--duo .visual.visual--page,
.visual-block--trio .visual.visual--page {
  aspect-ratio: 4 / 5;
}
.visual-block--duo .visual.visual--page img,
.visual-block--duo .visual.visual--page video,
.visual-block--trio .visual.visual--page img,
.visual-block--trio .visual.visual--page video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Asym-r : 1fr / 2fr → cellule étroite (gauche) garde l'aspect 4/5,
   cellule large (droite) s'étire à la même hauteur via stretch.
   Asym-l : miroir, cellule étroite à droite. */
.visual-block--asym-l .visual.visual--page,
.visual-block--asym-r .visual.visual--page {
  align-self: stretch;
}
.visual-block--asym-r .visual.visual--page:first-child,
.visual-block--asym-l .visual.visual--page:last-child {
  aspect-ratio: 4 / 5;
}
.visual-block--asym-r .visual.visual--page:last-child,
.visual-block--asym-l .visual.visual--page:first-child {
  aspect-ratio: auto;
}
.visual-block--asym-l .visual.visual--page img,
.visual-block--asym-l .visual.visual--page video,
.visual-block--asym-r .visual.visual--page img,
.visual-block--asym-r .visual.visual--page video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 720px) {
  .visual-block { grid-template-columns: 1fr !important; }
  .visual-block--duo .visual.visual--page,
  .visual-block--trio .visual.visual--page { aspect-ratio: auto; }
  .visual-block--duo .visual.visual--page img,
  .visual-block--duo .visual.visual--page video,
  .visual-block--trio .visual.visual--page img,
  .visual-block--trio .visual.visual--page video { height: auto; }
}

.visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  overflow: hidden;
  font-family: var(--font-serif);
  font-weight: 200;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  background: var(--color-bg-soft);
  aspect-ratio: 4 / 3;
  padding: var(--space-5);
}
.visual em { font-style: normal; font-weight: 200; }
.visual--tall { aspect-ratio: 3 / 4; }
.visual--wide { aspect-ratio: 21 / 9; }
.visual--square { aspect-ratio: 1 / 1; }

.visual--lavender { background: var(--color-lavender); color: var(--color-ink); }
.visual--lavender-soft { background: var(--color-lavender-soft); color: var(--color-ink); }
.visual--ink { background: var(--color-ink); color: var(--color-bg); }

/* Label discret en bas à droite (placeholder visuel : indique ce qui ira là) */
.visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.45;
  font-weight: 400;
  font-style: normal;
  text-align: right;
  max-width: 60%;
}
.visual__caption {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 200;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  letter-spacing: 0;
}

/* ---------- SECTIONS DE TEXTE ENTRE LES VISUELS ---------- */
.project-section {
  padding: var(--space-9) var(--gutter);
  background: var(--color-bg);
}

.project-section__inner {
  max-width: var(--container-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}

.project-section__num {
  justify-self: start;
  align-self: start;
  margin-top: var(--space-2);
}

.project-section__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: var(--lh-snug);
  margin-bottom: var(--space-5);
  max-width: 22ch;
}
.project-section__title em {
  font-style: normal;
  font-weight: 200;
}
.project-section__text p {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: var(--lh-relaxed);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
  max-width: 64ch;
}
.project-section__text p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .project-section__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ---------- KPIs / RÉSULTATS — DARK MODE + CARROUSEL ---------- */
.project-kpis {
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-10) 0;
  overflow: hidden;
}

.project-kpis__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-9);
}

.project-kpis__label { justify-self: start; }

.project-kpis__heading {
  font-family: var(--font-serif);
  font-weight: 200;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 4.5vw, 4.4rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.project-kpis__heading em {
  font-style: normal;
  font-weight: 200;
  color: var(--color-lavender);
}

/* Marquee : viewport overflow hidden (sur la section), track translaté en boucle */
.project-kpis__marquee {
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: var(--space-6) 0;
  position: relative;
  /* Masque doux aux extrémités pour que les chiffres entrent et sortent en fade */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.project-kpis__track {
  display: flex;
  gap: var(--space-9);
  width: max-content;
  animation: kpiMarquee 60s linear infinite;
}
.project-kpis__marquee:hover .project-kpis__track {
  animation-play-state: paused;
}
@keyframes kpiMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.kpi {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 280px;
  max-width: 360px;
  padding-inline: var(--space-2);
  border-left: 1px solid rgba(255,255,255,0.18);
  padding-left: var(--space-6);
}
.kpi:first-child { border-left: 0; padding-left: 0; }

.kpi__num {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4vw, 4rem);
  font-weight: 200;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.kpi__num em {
  font-style: normal;
  font-weight: 200;
  color: var(--color-lavender);
}
.kpi__label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--color-lavender-soft);
  max-width: 30ch;
  line-height: var(--lh-normal);
}

@media (prefers-reduced-motion: reduce) {
  .project-kpis__track { animation: none; }
}

/* ---------- CRÉDITS ---------- */
.project-credits {
  padding: var(--space-9) var(--gutter);
  background: var(--color-bg);
}

.project-credits__inner {
  max-width: var(--container-content);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}

.project-credits__title {
  justify-self: start;
  align-self: start;
  margin-top: var(--space-2);
}

/* Crédits : liste verticale type colophon, lisible et hiérarchisée.
   - Chaque ligne = grille 2 colonnes [rôle | nom(s)], hairline entre rangs
   - Rôle : Cabinet uppercase 0.18em tracking, ink-muted, ancre l'œil à gauche
   - Nom : Cabinet regular sentence case, ink, lecture confortable
   - Sur mobile : pile (rôle au-dessus, nom en dessous), gap réduit */
.project-credits__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
}
.project-credits__list > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}
.project-credits__list > div:first-child {
  border-top: 1px solid var(--color-line);
}
.project-credits__list dt {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin: 0;
}
.project-credits__list dd {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--lh-snug);
  color: var(--color-ink);
  margin: 0;
}
.project-credits__list dd a {
  border-bottom: 1px solid var(--color-line-strong);
  padding-bottom: 1px;
  transition: color var(--duration-base) var(--ease-out), border-bottom-color var(--duration-base) var(--ease-out);
}
.project-credits__list dd a:hover {
  color: var(--color-lavender);
  border-bottom-color: var(--color-lavender);
}

@media (max-width: 720px) {
  .project-credits__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .project-credits__list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding-block: var(--space-3);
  }
}

/* ---------- NAVIGATION PROJETS ---------- */
.project-nav {
  padding: var(--space-9) var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-5);
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
}

.project-nav__home {
  justify-self: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
a.project-nav__home:hover {
  background: var(--color-ink);
  color: var(--color-bg);
  border-color: var(--color-ink);
  transform: none;
}

.project-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.project-nav__link--prev { align-items: flex-start; }
.project-nav__link--next { align-items: flex-end; text-align: right; }

.project-nav__cap {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-ink-muted);
}

.project-nav__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.project-nav__thumb {
  display: block;
  width: clamp(48px, 5vw, 72px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  background: var(--color-bg-soft);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}
.project-nav__thumb img,
.project-nav__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-nav__link:hover .project-nav__thumb {
  transform: translateY(-3px);
}
.project-nav__thumb--bg-lavender { background: var(--color-lavender); }
.project-nav__thumb--bg-ink { background: var(--color-ink); }
.project-nav__thumb--bg-cream { background: var(--color-bg-soft); }

.project-nav__title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: color var(--duration-base) var(--ease-out);
}
.project-nav__title em { font-style: normal; font-weight: 200; }
.project-nav__link:hover .project-nav__title {
  color: var(--color-lavender);
}

@media (max-width: 720px) {
  .project-nav {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .project-nav__home { justify-self: start; }
  .project-nav__link--next { align-items: flex-start; text-align: left; }
}