:root {
  --paris-blue: #1f4f68;
  --paris-stone: #f1eadf;
  --paris-terrace: #b5743f;
}

.life-paris-page {
  background:
    radial-gradient(circle at 10% 2%, rgba(108, 198, 208, .18), transparent 28rem),
    radial-gradient(circle at 90% 6%, rgba(145, 0, 72, .10), transparent 26rem),
    linear-gradient(180deg, #fbfcfd 0%, #ffffff 38%, #f3f6f7 100%);
}

.life-paris-page .life-kicker {
  color: var(--life-magenta);
}

.paris-hero .life-hero-overlay {
  background:
    radial-gradient(circle at 82% 24%, rgba(108, 198, 208, .18), transparent 27rem),
    linear-gradient(90deg, rgba(3, 21, 29, .90) 0%, rgba(3, 21, 29, .68) 48%, rgba(3, 21, 29, .42) 100%),
    linear-gradient(180deg, rgba(3, 21, 29, .58) 0%, rgba(3, 21, 29, .22) 45%, rgba(3, 21, 29, .78) 100%);
}

.paris-hero .life-lede {
  max-width: 910px;
}

.paris-hero-stack .life-photo-card,
.paris-hero-stack .life-mini-card {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.paris-hero-card {
  aspect-ratio: 1.12 / 1;
}

.paris-mini-card {
  min-height: 180px;
}

.paris-access-grid {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(280px, .46fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

.paris-access-card,
.paris-final-map {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(219,229,232,.92);
  border-radius: 28px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--life-shadow);
}

.paris-access-card strong,
.paris-final-map strong {
  flex-basis: 100%;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  letter-spacing: -.04em;
  color: var(--life-ink);
}

.paris-access-card span,
.paris-final-map span {
  border: 1px solid rgba(145,0,72,.14);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(145,0,72,.06);
  color: var(--life-ink-2);
  font-size: .9rem;
  font-weight: 850;
}

.paris-photo-grid,
.paris-feature-layout,
.paris-engineering-grid,
.paris-weekend-grid {
  display: grid;
  gap: 16px;
}

.paris-photo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paris-neighbourhood-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paris-feature-layout {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paris-feature-layout .large {
  grid-column: span 2;
  grid-row: span 2;
}

.paris-icons-grid .life-photo-card:nth-child(1),
.paris-icons-grid .life-photo-card:nth-child(6) {
  grid-column: span 2;
}

.paris-engineering-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paris-engineering-grid .wide {
  grid-column: span 2;
}

.paris-green-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paris-green-grid .life-photo-card:nth-child(1),
.paris-green-grid .life-photo-card:nth-child(7) {
  grid-column: span 2;
}

.paris-weekend-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.paris-weekend-grid .wide {
  grid-column: span 2;
}

.paris-beyond-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.paris-scroll-strip {
  overflow-x: auto;
  grid-auto-columns: minmax(220px, 250px);
  padding-bottom: 12px;
}

.paris-engineering-section {
  background:
    radial-gradient(circle at 15% 4%, rgba(108, 198, 208, .16), transparent 28rem),
    linear-gradient(180deg, #ffffff, #f6f9fa);
}

.paris-evening-section {
  background:
    linear-gradient(135deg, rgba(6, 31, 42, .95), rgba(12, 51, 64, .82)),
    url("https://media.dsti.school/wp-content/uploads/2026/06/07124302/61-Seine-River-in-Paris-at-night-in-2016-30441587130-scaled.avif") center / cover;
  color: #fff;
}

.paris-evening-section .life-section-copy p {
  color: rgba(255,255,255,.80);
}

.paris-evening-section .life-kicker {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
}

.paris-evening-section h2 span {
  color: #fff;
}

.paris-video-section {
  border-top: 1px solid rgba(219,229,232,.82);
}

.paris-video-feature .dsti-video-poster img {
  object-fit: cover;
}

.paris-final {
  background:
    linear-gradient(135deg, rgba(6,31,42,.90), rgba(145,0,72,.68)),
    url("https://media.dsti.school/wp-content/uploads/2026/06/07124027/14-Quais-de-Seine-scaled.avif") center / cover;
}

.paris-final-side {
  min-width: min(420px, 100%);
}

.paris-final-map {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 46px rgba(0,0,0,.16);
  margin-bottom: 16px;
}

.paris-final-map strong {
  color: #fff;
}

.paris-final-map span {
  color: #fff;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
}

.life-paris-page .life-photo-card:focus,
.life-paris-page .life-mini-card:focus,
.life-paris-page .life-scroll-strip figure:focus {
  outline: 3px solid rgba(108,198,208,.72);
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .paris-access-grid,
  .paris-hero-grid {
    grid-template-columns: 1fr;
  }
  .paris-photo-grid,
  .paris-feature-layout,
  .paris-engineering-grid,
  .paris-weekend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .paris-beyond-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .paris-photo-grid,
  .paris-feature-layout,
  .paris-engineering-grid,
  .paris-weekend-grid,
  .paris-beyond-grid {
    grid-template-columns: 1fr;
  }
  .paris-feature-layout .large,
  .paris-icons-grid .life-photo-card:nth-child(1),
  .paris-icons-grid .life-photo-card:nth-child(6),
  .paris-engineering-grid .wide,
  .paris-green-grid .life-photo-card:nth-child(1),
  .paris-green-grid .life-photo-card:nth-child(7),
  .paris-weekend-grid .wide {
    grid-column: auto;
    grid-row: auto;
  }
  .paris-access-card,
  .paris-final-map {
    padding: 18px;
  }
}

/* V70 — Paris page content and layout refinements. */
.life-paris-page .paris-hero .life-kicker {
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .22);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .28);
}

/* Keep the 05 and 06 mosaics intentional on laptop screens: with seven cards,
   only the opening feature spans two columns, so the second row is filled rather
   than ending as an empty jigsaw. */
@media (min-width: 761px) {
  .paris-engineering-grid .life-photo-card.wide:last-child,
  .paris-green-grid .life-photo-card:nth-child(7) {
    grid-column: span 1;
    aspect-ratio: 4 / 3;
  }
}

/* V71 — Paris hero rim alignment and content lift.
   Keep the page-menu-to-hero transition as tight as the Riviera/home/live pages:
   the video starts at the first pixel below the subnav, and only the content
   grid carries a small responsive internal breathing space. */
.life-paris-page .paris-hero.life-hero {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: clamp(34px, 4.8vw, 72px);
  min-height: calc(100svh - var(--programme-nav-h, 0px));
  align-items: stretch;
}

.life-paris-page .paris-hero .life-hero-video {
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  transform: scale(1.10);
  transform-origin: center 54%;
}

.life-paris-page .paris-hero-grid.life-hero-grid {
  min-height: calc(100svh - var(--programme-nav-h, 0px));
  padding-top: clamp(10px, 1.45vw, 24px);
  padding-bottom: clamp(28px, 4vw, 64px);
  align-items: center;
}

@media (max-width: 760px) {
  .life-paris-page .paris-hero-grid.life-hero-grid {
    padding-top: clamp(8px, 3.8vw, 18px);
    padding-bottom: clamp(28px, 9vw, 50px);
  }

  .life-paris-page .paris-hero .life-hero-video {
    object-position: center 52%;
    transform: scale(1.08);
  }
}

/* V73 — Paris hero hard rim alignment.
   The hero video begins at the first pixel below the page menu, with no
   perceived dark gutter. The crop is intentionally tighter than V71 so the
   moving Paris footage fills the top of the hero like the Riviera/home/live
   pages, while the content grid is lifted rather than vertically centred. */
.life-paris-page .paris-hero.life-hero {
  margin-top: 0;
  padding-top: 0;
  min-height: calc(100svh - var(--programme-nav-h, 0px));
  align-items: stretch;
  background: var(--life-night);
}

.life-paris-page .paris-hero .life-hero-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  transform: scale(1.24);
  transform-origin: center 68%;
}

.life-paris-page .paris-hero .life-hero-overlay {
  background:
    radial-gradient(circle at 82% 24%, rgba(108, 198, 208, .16), transparent 27rem),
    linear-gradient(90deg, rgba(3, 21, 29, .86) 0%, rgba(3, 21, 29, .62) 48%, rgba(3, 21, 29, .34) 100%),
    linear-gradient(180deg, rgba(3, 21, 29, .04) 0%, rgba(3, 21, 29, .08) 24%, rgba(3, 21, 29, .70) 100%);
}

.life-paris-page .paris-hero-grid.life-hero-grid {
  min-height: calc(100svh - var(--programme-nav-h, 0px));
  padding-top: clamp(18px, 2.8vw, 42px);
  padding-bottom: clamp(34px, 5vw, 76px);
  align-items: start;
  align-content: start;
}

@media (max-width: 760px) {
  .life-paris-page .paris-hero .life-hero-video {
    object-position: center 64%;
    transform: scale(1.18);
    transform-origin: center 64%;
  }

  .life-paris-page .paris-hero-grid.life-hero-grid {
    padding-top: clamp(14px, 5.2vw, 30px);
    padding-bottom: clamp(30px, 9vw, 54px);
  }
}