/* =========================================================
   FGB — Projects
   Portfolio grid + filters.
   Architecture: tokens → base → motion → page. Each page loads
   exactly four stylesheets in that order.
   ========================================================= */

.filters { background: var(--cream); padding: 48px 0 0; }

.filters__bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--line); }

.filter-btn { background: none; border: 1px solid var(--line); padding: 10px 20px; border-radius: 999px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); cursor: pointer; transition: all .35s var(--ease-out); font-weight: 500; }

.filter-btn:hover { border-color: var(--bronze); color: var(--bronze); }

.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.filter-count { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--muted); margin-left: auto; }

.pgrid { background: var(--cream); padding: clamp(60px, 7vw, 100px) 0 clamp(100px, 11vw, 160px); }

.pgrid__list { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(40px, 5vw, 80px) clamp(24px, 3vw, 48px); }

.pcard { grid-column: span 6; cursor: pointer; display: block; opacity: 1; transition: opacity .4s, transform .4s; }

.pcard.is-hidden { display: none; }

.pcard--wide { grid-column: span 12; }

.pcard--offset { margin-top: clamp(40px, 6vw, 100px); }

.pcard__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--ink-3); }

.pcard--wide .pcard__media { aspect-ratio: 16/9; }

.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease-out), filter 1s; filter: brightness(0.92); }

.pcard:hover .pcard__media img { transform: scale(1.07); filter: brightness(1); }

.pcard__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 28px; z-index: 2; background: linear-gradient(180deg, transparent 40%, rgba(14,26,43,0.7)); opacity: 0; transition: opacity .5s; color: var(--cream); }

.pcard:hover .pcard__overlay { opacity: 1; }

.pcard__overlay__txt { font-family: var(--serif); font-style: italic; font-size: 17px; }

.pcard__index { position: absolute; top: 22px; left: 22px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cream); background: rgba(14,26,43,0.7); padding: 8px 14px; backdrop-filter: blur(6px); z-index: 3; }

.pcard__tag { position: absolute; top: 22px; right: 22px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--cream); opacity: 0.95; z-index: 3; }

.pcard__meta { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-top: 22px; }

.pcard__title { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.05; margin: 0 0 8px; letter-spacing: -0.01em; }

.pcard__sub { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

.pcard__data { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--bronze); white-space: nowrap; }

.pcard__data strong { font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); display: block; font-weight: 600; margin-bottom: 4px; }

@media (max-width: 880px) {
.pcard, .pcard--wide { grid-column: 1 / -1; margin-top: 0 !important; }
}

.project-master__copy span {
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--space-5);
}

.project-pair__head h2,
.project-master__copy h2,
.portfolio-pending h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.project-pair__head p,
.project-master__copy p,
.portfolio-pending p {
  color: var(--muted-on-dark);
  max-width: 54ch;
  line-height: 1.7;
}

.project-pair {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(84px, 8vw, 128px) 0;
}

.project-pair__inner {
  max-width: none;
  padding-inline: 0;
}

.project-pair__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: end;
  width: min(100%, 1480px);
  margin: 0 auto clamp(36px, 5vw, 72px);
  padding-inline: var(--gutter);
}

.project-pair__head p,
.project-master__copy p,
.portfolio-pending p {
  color: var(--muted);
}

.portfolio-pending p { color: var(--muted-on-dark); }

.project-pair__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  width: min(96vw, 1480px);
  margin-inline: auto;
}

.project-pair__media .diptych__picture {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-3);
}

.project-pair__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-pair__fiche {
  width: min(96vw, 1480px);
  margin: clamp(16px, 2vw, 24px) auto 0;
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--line);
  color: var(--bronze);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
}

.project-master {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(84px, 9vw, 136px) 0;
}

.project-master__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.project-master picture {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cream);
  position: relative;
}

.project-master picture::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--bronze);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-media-hover) var(--ease-out);
}

.project-master img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.02) brightness(1.06);
}

.project-master picture:hover::after { opacity: 1; }

.project-master picture:hover img {
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.03) brightness(1.08);
}

.project-master__copy p { color: var(--muted-on-dark); }

.project-master__copy p + p {
  margin-top: var(--space-4, 16px);
}

.portfolio-pending {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(52px, 6vw, 86px) 0;
  text-align: center;
}

.portfolio-pending h2 {
  max-width: 14ch;
  margin: var(--space-5) auto 0;
}

.portfolio-pending p {
  margin: var(--space-6) auto var(--space-8);
}

@media (max-width: 900px) {
  .project-pair__head,
  .project-master__grid { grid-template-columns: 1fr; }

  /*
   * Full-bleed: body { overflow-x: clip } kills 100vw negative-margin tricks.
   * Drop .wrap gutters instead so the aerial touches the screen edge.
   */
  .project-master > .wrap.project-master__grid {
    padding-inline: 0;
    gap: clamp(28px, 5vw, 40px);
  }

  .project-master__grid picture {
    order: -1;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .project-master__copy {
    padding-inline: var(--gutter);
  }

  .project-master picture::after { display: none; }
}

@media (max-width: 620px) {
  .project-pair__media {grid-template-columns: 1fr }
  .project-pair__fiche {letter-spacing: 0.1em }
}

/* Baton Elevate 1 — shared page rhythm */
.filters {
  padding-block: clamp(48px, 6vw, 80px) 0;
}

.pgrid,
.project-pair,
.project-master,
.portfolio-pending {
  padding-block: clamp(76px, 8vw, 132px);
}

.project-master {
  padding-block: clamp(84px, 9vw, 136px);
}

.portfolio-pending {
  padding-block: clamp(44px, 5vw, 64px);
}

.project-pair__head h2,
.project-master__copy h2,
.portfolio-pending h2 {
  font-size: var(--type-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}

.portfolio-pending h2 {
  max-width: 24ch;
  font-size: clamp(32px, 4vw, 56px);
  margin-top: var(--space-4);
}

.project-pair__head p,
.project-master__copy p,
.portfolio-pending p {
  max-width: var(--container-prose);
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.65;
}

.portfolio-pending p {
  margin: var(--space-5) auto var(--space-6);
}

.pcard__media img,
.project-pair__media img {
  filter: saturate(0.94) contrast(1.05);
  transition: transform var(--dur-media-hover) var(--ease-out), filter var(--dur-media-hover) var(--ease-out);
}

.project-master img {
  filter: saturate(1.02) contrast(1.02) brightness(1.06);
  transition: transform var(--dur-media-hover) var(--ease-out), filter var(--dur-media-hover) var(--ease-out);
}

.pcard:hover .pcard__media img {
  transform: scale(1.03);
  filter: saturate(0.94) contrast(1.05);
}

.project-master picture:hover img {
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.03) brightness(1.08);
}

.project-master__copy > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--bronze-text);
  margin-bottom: var(--space-5);
}

.project-master__copy > span::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
}

/* Réserve Étoilée links (navy band): light bronze for AA on ink. */
.project-master__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 22px;
}

.project-master .link-u {
  color: var(--bronze-300);
}