/*
 * VALDIER Starter — the Fleet page, approved "Fleet 05 FINAL · Immersive Collection" (docs/INNER-PAGES.md):
 * 01 the Immersive Stage (template-parts/inner/stage.php), 02 Discover the Fleet (discover.php), 03 The VALDIER
 * Experience (pillars.php), 04 the closing scene, Studio or Cinematic photo (epilogue.php). Loaded after
 * css/valdier-inner.css on a Fleet page whose hero is the Immersive Stage, and in its admin previews.
 *
 * Every colour is a token of the Theme Engine (the eight palettes, Custom Colour, Light / Dark / Auto); none is
 * written here. The stage is deliberately dark in every appearance (approved): on Light and on Auto with a light
 * system it maps the page's own tokens the other way round inside the stage (its ink becomes the page's surface and
 * the reverse), so the stage stays in the palette's own hues, and its lower edge casts a soft shadow onto the light
 * sections that follow. Layout: grid and flex; the stage and the closing scene answer to their own width.
 */

/* The page's own ink and surface, kept for the stage's dark mapping (custom properties resolve where they are used). */
.vd-inner {
  --vd-page-ink: var(--v-ink);
  --vd-page-surface: var(--v-section-white);
}

/* What the scripts hide stays hidden whatever its display (the panels, the tabs before the script runs). */
.vd-stage [hidden],
.vd-disc [hidden] {
  display: none !important;
}

/* ---- 01 · Immersive Stage ------------------------------------------------------------------------------------------ */
.vd-stage {
  container: vd-stage / inline-size;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--v-section-white);
  background-image:
    radial-gradient(70% 60% at 50% 70%, color-mix(in srgb, var(--v-ink) 11%, var(--v-section-stone)) 0%, var(--v-section-stone) 48%, var(--v-section-white) 100%);
  color: var(--v-text);
}

/* The floor: a faint rule and a deepening under the vehicle (Fleet 05). */
.vd-stage::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  border-top: 1px solid color-mix(in srgb, var(--v-ink) 5%, transparent);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--v-section-white) 55%, transparent));
  pointer-events: none;
}

/* Light, and Auto on a light system: the stage stays dark in the palette's own hues. */
:root[data-appearance='light'] .vd-stage,
:root:not([data-appearance]) .vd-stage,
:root[data-appearance='light'] .vd-fh--cinematic,
:root:not([data-appearance]) .vd-fh--cinematic,
:root[data-appearance='light'] .vd-fd-preview,
:root:not([data-appearance]) .vd-fd-preview {
  color-scheme: dark;
  --v-ink: var(--vd-page-surface);
  --v-text: color-mix(in srgb, var(--vd-page-surface) 84%, var(--vd-page-ink));
  --v-muted: color-mix(in srgb, var(--vd-page-surface) 66%, var(--vd-page-ink));
  --v-line: color-mix(in srgb, var(--vd-page-surface) 10%, transparent);
  --v-line-strong: color-mix(in srgb, var(--vd-page-surface) 22%, transparent);
  --v-surface: color-mix(in srgb, var(--vd-page-surface) 9%, var(--vd-page-ink));
  --v-surface-raised: color-mix(in srgb, var(--vd-page-surface) 12%, var(--vd-page-ink));
  --v-section-white: color-mix(in srgb, var(--vd-page-surface) 3%, var(--vd-page-ink));
  --v-section-stone: color-mix(in srgb, var(--vd-page-surface) 9%, var(--vd-page-ink));
  --v-accent-text: color-mix(in srgb, var(--v-accent) 60%, var(--vd-page-surface));
  --vs-pill: color-mix(in srgb, var(--vd-page-surface) 12%, var(--vd-page-ink));
  --vs-pill-ink: var(--vd-page-surface);
  --vs-ink: var(--vd-page-surface);
  --vs-card: color-mix(in srgb, var(--vd-page-surface) 12%, var(--vd-page-ink));
  --vs-surface: color-mix(in srgb, var(--vd-page-surface) 9%, var(--vd-page-ink));
  --vs-text: color-mix(in srgb, var(--vd-page-surface) 84%, var(--vd-page-ink));
  --vs-muted: color-mix(in srgb, var(--vd-page-surface) 66%, var(--vd-page-ink));
  --vs-border: color-mix(in srgb, var(--vd-page-surface) 16%, var(--vd-page-ink));
  box-shadow: 0 2.5rem 4rem -2.75rem color-mix(in srgb, var(--vd-page-ink) 55%, transparent);
}

@media (prefers-color-scheme: light) {
  :root[data-appearance='auto'] .vd-stage,
  :root[data-appearance='auto'] .vd-fh--cinematic,
  :root[data-appearance='auto'] .vd-fd-preview {
    color-scheme: dark;
    --v-ink: var(--vd-page-surface);
    --v-text: color-mix(in srgb, var(--vd-page-surface) 84%, var(--vd-page-ink));
    --v-muted: color-mix(in srgb, var(--vd-page-surface) 66%, var(--vd-page-ink));
    --v-line: color-mix(in srgb, var(--vd-page-surface) 10%, transparent);
    --v-line-strong: color-mix(in srgb, var(--vd-page-surface) 22%, transparent);
    --v-surface: color-mix(in srgb, var(--vd-page-surface) 9%, var(--vd-page-ink));
    --v-surface-raised: color-mix(in srgb, var(--vd-page-surface) 12%, var(--vd-page-ink));
    --v-section-white: color-mix(in srgb, var(--vd-page-surface) 3%, var(--vd-page-ink));
    --v-section-stone: color-mix(in srgb, var(--vd-page-surface) 9%, var(--vd-page-ink));
    --v-accent-text: color-mix(in srgb, var(--v-accent) 60%, var(--vd-page-surface));
    --vs-pill: color-mix(in srgb, var(--vd-page-surface) 12%, var(--vd-page-ink));
    --vs-pill-ink: var(--vd-page-surface);
    --vs-ink: var(--vd-page-surface);
    --vs-card: color-mix(in srgb, var(--vd-page-surface) 12%, var(--vd-page-ink));
    --vs-surface: color-mix(in srgb, var(--vd-page-surface) 9%, var(--vd-page-ink));
    --vs-text: color-mix(in srgb, var(--vd-page-surface) 84%, var(--vd-page-ink));
    --vs-muted: color-mix(in srgb, var(--vd-page-surface) 66%, var(--vd-page-ink));
    --vs-border: color-mix(in srgb, var(--vd-page-surface) 16%, var(--vd-page-ink));
    box-shadow: 0 2.5rem 4rem -2.75rem color-mix(in srgb, var(--vd-page-ink) 55%, transparent);
  }
}

/* Fullscreen hero: the stage fills the first screen under the site's header (the sticky navigation, 5rem — 4.125rem
   under 992px — and the announcement banner when there is one). min-height, never height: on a short or narrow screen,
   or with long words, the stage grows and the page scrolls naturally (nothing is squeezed or cut). Pure CSS: the first
   paint already has its final size (no layout shift). */
.vd-stage[data-hero='stage'] {
  --vd-stage-offset: 5rem;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--vd-stage-offset));
  min-height: calc(100dvh - var(--vd-stage-offset));
}

body:has(.banner_section) .vd-stage[data-hero='stage'] {
  --vd-stage-offset: 8rem;
}

@media (max-width: 991px) {
  .vd-stage[data-hero='stage'] {
    --vd-stage-offset: 4.125rem;
  }

  body:has(.banner_section) .vd-stage[data-hero='stage'] {
    --vd-stage-offset: 7.125rem;
  }
}

.vd-stage__inner {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--v-container-wide, 90rem) + 2 * var(--v-page-gutter));
  margin: 0 auto;
  padding: clamp(1.5rem, 0.75rem + 2vh, 3rem) var(--v-page-gutter) clamp(1.25rem, 0.5rem + 1.5vh, 2.75rem);
  box-sizing: border-box;
}

/* The scene takes the room left between the title and the strip; the vehicle is centred in it. */
.vd-stage__inner > .vd-stage__scene {
  flex: 1 0 auto;
  align-content: center;
}

.vd-stage__top {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.25rem 2rem;
}

.vd-stage__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  min-width: 0;
}

.vd-stage .vd-page__badge {
  margin: 0;
}

.vd-stage__title {
  max-width: 26rem;
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.vd-stage__subtitle {
  margin: 0;
  color: var(--v-text);
}

.vd-stage__aside {
  max-width: 20rem;
  margin: 0;
  color: var(--v-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: right;
}

.vd-stage__scene {
  --vd-stage-len: 7;
  /* The vehicle's width: as wide as the design allows, and — on a screen wide enough to hold the scene on one line
     (container ≥ 900px) — no taller than the first screen leaves once the title, the caption and the strip are
     counted (--vd-stage-chrome); never under 20rem (then the page scrolls). */
  --vd-car-w: min(54rem, 86cqi);
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: clamp(0.5rem, 1vw, 1rem);
}

/* The short name behind the vehicle, sized to its length and centred on the car. */
.vd-stage__name {
  position: absolute;
  top: calc(clamp(0.5rem, 1vw, 1rem) + clamp(-6rem, -7cqi, -1rem) + var(--vd-car-w) / 3);
  left: 50%;
  z-index: 0;
  margin: 0;
  transform: translate(-50%, -50%);
  color: color-mix(in srgb, var(--v-ink) 6%, transparent);
  font-size: min(21rem, calc(100cqi / (var(--vd-stage-len) * 0.6)));
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.07em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.vd-stage__car {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--vd-car-w);
  aspect-ratio: 3 / 2;
  /* The cut-outs carry air above the vehicle: the car rises under the words (they stay on top). */
  margin: clamp(-6rem, -7cqi, -1rem) 0 0;
}

.vd-stage__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.6rem 1.4rem var(--v-overlay)) brightness(1.08) contrast(1.04);
}

.vd-stage__reflection {
  position: absolute;
  top: 95%;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.12;
  transform: scaleY(-1);
  filter: blur(2px) brightness(1.15);
  -webkit-mask-image: linear-gradient(to top, var(--v-ink) 0%, transparent 34%);
  mask-image: linear-gradient(to top, var(--v-ink) 0%, transparent 34%);
  pointer-events: none;
}

.vd-stage__empty {
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--v-ink) 6%, transparent);
  color: var(--v-muted);
}

/* Passengers and luggage beside the vehicle, a thin line towards it (under it on a narrow stage). */
.vd-stage__specs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.5rem;
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
}

.vd-stage__spec {
  display: grid;
  gap: 0.15rem;
  text-align: center;
}

.vd-stage__spec dt {
  color: var(--v-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.vd-stage__spec dd {
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

@container vd-stage (min-width: 900px) {
  .vd-stage__scene {
    --vd-stage-chrome: 23rem;
    --vd-car-w: min(54rem, 86cqi, max(20rem, (100dvh - var(--vd-stage-offset, 5rem) - var(--vd-stage-chrome) + min(6rem, 7cqi)) * 1.5));
  }

  .vd-stage__specs {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }

  .vd-stage__spec {
    position: absolute;
    text-align: left;
  }

  .vd-stage__spec--pax {
    top: 34%;
    left: 4%;
  }

  .vd-stage__spec--bags {
    top: 40%;
    right: 4%;
    text-align: right;
  }

  .vd-stage__spec::after {
    content: '';
    position: absolute;
    top: 1.2rem;
    width: 4.5rem;
    height: 1px;
    background-color: color-mix(in srgb, var(--v-ink) 30%, transparent);
  }

  .vd-stage__spec--pax::after {
    left: calc(100% + 0.8rem);
  }

  .vd-stage__spec--bags::after {
    right: calc(100% + 0.8rem);
  }
}

.vd-stage__caption {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  max-width: 40rem;
  margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
  text-align: center;
}

.vd-stage__class {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--v-muted);
  font-size: 0.78rem;
}

.vd-stage__text {
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Changing vehicle: a short fade and settle (none with reduced motion, js/valdier-fleet.js). */
.vd-stage__name,
.vd-stage__car,
.vd-stage__specs,
.vd-stage__caption {
  transition: opacity 220ms var(--v-ease), transform 420ms var(--v-ease);
}

.vd-stage__scene.is-changing .vd-stage__car {
  opacity: 0;
  transform: translateX(-1.5%) scale(0.985);
}

.vd-stage__scene.is-changing .vd-stage__name,
.vd-stage__scene.is-changing .vd-stage__specs,
.vd-stage__scene.is-changing .vd-stage__caption {
  opacity: 0;
}

/* Previous / Next on the stage (from three vehicles): discreet, at the scene's edges beside the caption (the
   passengers and luggage keep the vehicle's sides). */
.vd-stage__arrow {
  position: absolute;
  bottom: calc(5.75rem / 2 - 1.375rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--v-line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--v-section-white) 72%, transparent);
  color: var(--v-ink);
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(6px);
  transition: border-color var(--v-duration) var(--v-ease), color var(--v-duration) var(--v-ease), background-color var(--v-duration) var(--v-ease);
}

.vd-stage__arrow--prev {
  left: 0;
}

.vd-stage__arrow--next {
  right: 0;
}

.vd-stage__arrow:hover {
  border-color: var(--v-accent-text);
  color: var(--v-accent-text);
}

.vd-stage__arrow:focus-visible,
.vd-stage__strip-arrow:focus-visible {
  outline: 2px solid var(--v-accent-text);
  outline-offset: 2px;
}

@container vd-stage (max-width: 639px) {
  .vd-stage__arrow {
    bottom: calc(5.75rem / 2 - 1.125rem);
    width: 2.25rem;
    height: 2.25rem;
  }
}

.vd-stage__scene:has(.vd-stage__arrow) .vd-stage__caption {
  padding-inline: 3.25rem;
  box-sizing: border-box;
  max-width: min(40rem, 100%);
}

/* A swipe on the stage changes the vehicle; the page still scrolls vertically. */
.vd-stage__scene {
  touch-action: pan-y;
}

.vd-stage__car img {
  -webkit-user-drag: none;
  user-select: none;
}

/* The caption keeps its room while the vehicles change (no jump under a shorter description). */
.vd-stage__caption {
  align-content: start;
  min-height: 5.75rem;
}

/* The selector: one row of vehicles under the stage, scrolling sideways when they do not all fit (any number). */
.vd-stage__picker {
  position: relative;
  z-index: 3;
  max-width: 100%;
  border-top: 1px solid var(--v-line);
  background-color: var(--v-section-white);
}

/* Full width: the first thumbnail lines up with the page's content, and a very wide screen shows more vehicles. */
.vd-stage__picker-inner {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0 max(var(--v-page-gutter), (100% - var(--v-container-wide, 90rem)) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* Scrolling stays (wheel, trackpad, swipe, keys); only the bar is not drawn. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vd-stage__picker-inner::-webkit-scrollbar {
  display: none;
}

/* The strip's arrows: only when the thumbnails overflow (js/valdier-fleet.js), over a soft fade of the band. */
.vd-stage__strip-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3rem;
  padding: 0;
  border: 0;
  color: var(--v-ink);
  cursor: pointer;
  transition: opacity var(--v-duration) var(--v-ease), color var(--v-duration) var(--v-ease);
}

.vd-stage__strip-arrow--prev {
  left: 0;
  background: linear-gradient(90deg, var(--v-section-white) 45%, transparent);
}

.vd-stage__strip-arrow--next {
  right: 0;
  background: linear-gradient(270deg, var(--v-section-white) 45%, transparent);
}

.vd-stage__strip-arrow[hidden] {
  display: none;
}

.vd-stage__strip-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

.vd-stage__strip-arrow:hover {
  color: var(--v-accent-text);
}

.vd-stage__pick {
  display: grid;
  /* A responsive width (how many show depends on the strip's real width, never a fixed count): room for the picture,
     a full name on up to two lines and the class; the row fills the band when they all fit. */
  flex: 1 0 clamp(18rem, 12rem + 8cqi, 22rem);
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
  max-width: 26rem;
  margin: -1px 0 0;
  padding: 1.1rem 1rem;
  border: 0;
  border-top: 2px solid transparent;
  background: none;
  color: var(--v-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--v-duration) var(--v-ease), border-color var(--v-duration) var(--v-ease);
}

@container vd-stage (max-width: 639px) {
  .vd-stage__pick {
    flex-basis: clamp(16rem, 72cqi, 17.5rem);
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.9rem 0.75rem;
  }
}

.vd-stage__pick:hover .vd-stage__pick-name {
  color: var(--v-ink);
}

.vd-stage__pick[aria-pressed='true'] {
  border-top-color: var(--v-accent-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--v-accent-text) 9%, transparent), transparent);
}

.vd-stage__pick:focus-visible {
  outline: 2px solid var(--v-accent-text);
  outline-offset: -2px;
}

.vd-stage__thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  color: var(--v-muted);
}

.vd-stage__thumb img {
  width: 100%;
  height: auto;
  filter: brightness(1.2);
}

.vd-stage__pick-text {
  display: grid;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.vd-stage__pick-name {
  /* The full name, on two lines at most (a very long one ends with an ellipsis; the button's title carries it whole). */
  display: -webkit-box;
  overflow: hidden;
  color: var(--v-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-wrap: balance;
  /* Words wrap whole: never broken mid-word, no hyphen added. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  transition: color var(--v-duration) var(--v-ease);
}

.vd-stage__pick[aria-pressed='true'] .vd-stage__pick-name {
  color: var(--v-ink);
}

@container vd-stage (max-width: 899px) {
  .vd-stage__top {
    flex-direction: column;
  }

  .vd-stage__aside {
    text-align: left;
  }
}

/* ---- Shared: the small accent label of these sections ------------------------------------------------------------- */
.vd-eyebrow-accent {
  margin: 0;
  color: var(--v-accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- 02 · Discover the Fleet ------------------------------------------------------------------------------------- */
.vd-stage + .vd-sec {
  padding-top: clamp(4.5rem, 3rem + 5vw, 8rem);
}

.vd-disc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 3rem;
  align-items: end;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.vd-disc__heading {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
}

.vd-disc__title {
  max-width: 20ch;
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.vd-disc__intro {
  max-width: 26rem;
  margin: 0;
  color: var(--v-muted);
  font-size: 1rem;
  line-height: 1.65;
}

@media screen and (min-width: 861px) {
  .vd-disc__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  }
}

.vd-disc__tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  overflow-x: auto;
  border-bottom: 1px dotted var(--v-line-strong);
}

.vd-disc__tab {
  position: relative;
  display: grid;
  gap: 0.2rem;
  padding: 0.25rem 1rem 1.1rem 0;
  border: 0;
  background: none;
  color: var(--v-muted);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}

.vd-disc__tab-n {
  color: var(--v-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

.vd-disc__tab-name {
  color: var(--v-text);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color var(--v-duration) var(--v-ease);
}

.vd-disc__tab::after {
  content: '';
  position: absolute;
  right: 1rem;
  bottom: -1px;
  left: 0;
  height: 2px;
  background-color: var(--v-accent-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--v-ease);
}

.vd-disc__tab[aria-selected='true'] .vd-disc__tab-name,
.vd-disc__tab:hover .vd-disc__tab-name {
  color: var(--v-ink);
}

.vd-disc__tab[aria-selected='true']::after {
  transform: scaleX(1);
}

.vd-disc__tab:focus-visible {
  outline: var(--v-focus-outline);
  outline-offset: -2px;
  border-radius: var(--v-radius-sm);
}

/* Without JavaScript every panel shows, one under the other, a dotted rule between them. */
.vd-disc__panels {
  display: grid;
}

.vd-disc:not(.is-tabbed) .vd-disc__panel + .vd-disc__panel {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px dotted var(--v-line-strong);
}

.vd-disc__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

.vd-disc__panel:focus-visible {
  outline: var(--v-focus-outline);
  outline-offset: 0.5rem;
  border-radius: var(--v-radius-sm);
}

@media screen and (min-width: 861px) {
  .vd-disc__panel {
    grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.vd-disc__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  min-width: 0;
}

@media screen and (min-width: 861px) {
  .vd-disc__media {
    aspect-ratio: 4 / 3.4;
  }
}

@media screen and (max-width: 860px) {
  .vd-disc__count {
    top: 0;
    bottom: auto;
  }
}

/* A lit plinth: the ink at a whisper (a glow on Dark, a shade on Light) and a horizon. */
.vd-disc__media::before {
  content: '';
  position: absolute;
  inset: 6% 0 0;
  background: radial-gradient(56% 42% at 50% 64%, color-mix(in srgb, var(--v-ink) 13%, transparent) 0%, color-mix(in srgb, var(--v-ink) 5%, transparent) 42%, transparent 74%);
}

.vd-disc__media::after {
  content: '';
  position: absolute;
  right: 12%;
  bottom: 22%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v-ink) 22%, transparent), transparent);
}

.vd-disc__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.1rem 1rem color-mix(in srgb, var(--v-overlay) 85%, transparent));
}

.vd-disc__empty {
  position: relative;
  z-index: 1;
  color: var(--v-muted);
}

.vd-disc__count {
  position: absolute;
  bottom: 8%;
  left: 0;
  z-index: 2;
  color: var(--v-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

.vd-disc__body {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
  min-width: 0;
}

.vd-disc__name {
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.vd-disc__make {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--v-muted);
  font-size: 0.36em;
  letter-spacing: 0;
}

.vd-disc__text {
  display: grid;
  gap: 0.9rem;
  max-width: 40rem;
  color: var(--v-text);
  font-size: 1.02rem;
  line-height: 1.75;
}

.vd-disc__text {
  margin: 0;
}

/* Rich Text paragraphs (span.v-rt-p) one under the other. */
.vd-disc__text .v-rt-p {
  display: block;
}

.vd-disc__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2.5rem;
  width: 100%;
  margin: 0.4rem 0 0;
  padding: 1rem 0;
  border-top: 1px dotted var(--v-line-strong);
  border-bottom: 1px dotted var(--v-line-strong);
}

.vd-disc__facts div {
  display: grid;
  gap: 0.15rem;
}

.vd-disc__facts dt {
  color: var(--v-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vd-disc__facts dd {
  margin: 0;
  color: var(--v-ink);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.vd-disc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  width: 100%;
  margin-top: 0.4rem;
}

.vd-disc__book {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0 1.3rem;
  border-radius: var(--v-radius-sm);
  background-color: var(--v-accent);
  color: var(--v-accent-fg);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--v-duration) var(--v-ease);
}

.vd-disc__book:hover {
  background-color: var(--v-accent-hover);
}

.vd-disc__stage {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--v-line-strong);
  background: none;
  color: var(--v-ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color var(--v-duration) var(--v-ease), color var(--v-duration) var(--v-ease);
}

.vd-disc__stage:hover {
  border-color: var(--v-accent-text);
  color: var(--v-accent-text);
}

.vd-disc__nav {
  display: inline-flex;
  gap: 0.5rem;
  margin-left: auto;
}

.vd-disc__step {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--v-line-strong);
  border-radius: 50%;
  background: none;
  color: var(--v-ink);
  cursor: pointer;
  transition: border-color var(--v-duration) var(--v-ease);
}

.vd-disc__step:hover {
  border-color: var(--v-ink);
}

.vd-disc__book:focus-visible,
.vd-disc__stage:focus-visible,
.vd-disc__step:focus-visible {
  outline: var(--v-focus-outline);
  outline-offset: var(--v-focus-offset);
}

/* Changing vehicle: the panel fades out, the next settles in. */
.vd-disc__panel .vd-disc__img,
.vd-disc__panel .vd-disc__body > * {
  transition: opacity 280ms ease, transform 500ms var(--v-ease);
}

.vd-disc__panel.is-leaving .vd-disc__img,
.vd-disc__panel.is-entering .vd-disc__img {
  opacity: 0;
  transform: translateX(-3%);
}

.vd-disc__panel.is-leaving .vd-disc__body > *,
.vd-disc__panel.is-entering .vd-disc__body > * {
  opacity: 0;
  transform: translateY(0.375rem);
}

/* ---- 03 · The VALDIER Experience -------------------------------------------------------------------------------- */
.vd-sec.vd-pillars {
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.vd-pillars__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px dotted var(--v-line-strong);
}

.vd-pillars__head {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  align-content: start;
}

.vd-pillars__title {
  max-width: 16ch;
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.vd-pillars__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vd-pillar {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.6rem;
  align-content: start;
}

.vd-pillar__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--v-line-strong);
}

.vd-pillar__title {
  align-self: center;
  margin: 0;
  color: var(--v-ink);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.vd-pillar__text {
  margin: 0;
  color: var(--v-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.vd-pillar:not(:has(.vd-pillar__icon)) > * {
  grid-column: 1 / -1;
}

@media screen and (min-width: 861px) {
  .vd-pillars__list {
    grid-template-columns: repeat(var(--vd-pillars), minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .vd-pillar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
  }

  .vd-pillar__icon {
    grid-row: auto;
    margin-bottom: 0.35rem;
  }
}

@media screen and (min-width: 1001px) {
  .vd-pillars__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr);
  }
}

/* ---- 04 · Closing scene: Studio (default) and Cinematic photo ------------------------------------------------------ */
.vd-epi {
  container: vd-epi / inline-size;
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(32rem, 24rem + 18vw, 44rem);
  overflow: hidden;
  border-top: 1px solid var(--v-line);
  background-color: var(--v-section-white);
}

.vd-epi__inner {
  width: min(var(--v-container-wide, 90rem), calc(100% - 2 * var(--v-page-gutter)));
  margin: 0 auto;
  padding: clamp(5rem, 3.5rem + 5vw, 8rem) 0;
}

.vd-epi__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.3rem;
  max-width: 34rem;
}

.vd-epi__eyebrow {
  margin: 0;
  color: var(--v-accent-text);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.vd-epi__title {
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.vd-epi__lead {
  max-width: 30rem;
  margin: 0;
  color: var(--v-text);
  font-size: 1.06rem;
  line-height: 1.65;
}

.vd-epi__actions {
  margin-top: 0.5rem;
}

/* Cinematic photo: the photograph on the right, the page's surface deepening over it towards the words. */
.vd-epi__media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: min(68%, 66rem);
  margin: 0;
}

.vd-epi__img {
  display: block;
  width: 100%;
  height: 100%;
  /* Fit and focal point: Design → The closing scene → Photograph (inc/fleet-designs.php, valdier_starter_fleet_framing). */
  object-fit: var(--vd-fit, cover);
  object-position: var(--vd-pos, 50% 70%);
}

.vd-epi__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--v-section-white) 0%, color-mix(in srgb, var(--v-section-white) 78%, transparent) 28%, color-mix(in srgb, var(--v-section-white) 20%, transparent) 64%, transparent 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--v-section-white) 60%, transparent) 0%, transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--v-section-white) 50%, transparent) 0%, transparent 26%);
}

/* Studio: a lit studio from the theme's own colours — a glow in the brand colour, a fine grid, a horizon. */
.vd-epi__studio {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48% 70% at 72% 58%, color-mix(in srgb, var(--v-accent) 26%, transparent), transparent 70%),
    radial-gradient(40% 46% at 70% 66%, color-mix(in srgb, var(--v-ink) 13%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--v-section-stone) 0%, var(--v-section-white) 100%);
}

.vd-epi__studio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--v-ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--v-ink) 4%, transparent) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 55%, var(--v-ink), transparent 80%);
  mask-image: radial-gradient(60% 70% at 70% 55%, var(--v-ink), transparent 80%);
}

.vd-epi__studio::after {
  content: '';
  position: absolute;
  top: 82%;
  right: 0;
  left: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--v-ink) 26%, transparent) 40%, color-mix(in srgb, var(--v-ink) 26%, transparent) 70%, transparent);
}

.vd-epi__ghost {
  position: absolute;
  top: 22%;
  right: 2%;
  color: color-mix(in srgb, var(--v-ink) 3.5%, transparent);
  font-size: clamp(6rem, 13vw, 13rem);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.vd-epi__car {
  position: absolute;
  top: 50%;
  right: 4%;
  width: min(46%, 44rem);
  transform: translateY(-46%);
}

.vd-epi__car-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.6rem 1.4rem color-mix(in srgb, var(--v-overlay) 90%, transparent)) brightness(1.08) contrast(1.04);
}

.vd-epi__car-reflection {
  position: absolute;
  top: 95%;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.1;
  transform: scaleY(-1);
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, var(--v-ink) 0%, transparent 32%);
  mask-image: linear-gradient(to top, var(--v-ink) 0%, transparent 32%);
}

/* The admin preview holds both scenes: the one chosen shows. */
.vd-epi[data-variant='photo'] .vd-epi__studio,
.vd-epi[data-variant='studio'] .vd-epi__media {
  display: none;
}

/* Narrow (a phone, or a narrow column): the scene on top fading into the surface, the words under it. */
@media screen and (max-width: 860px) {
  .vd-epi {
    display: block;
    min-height: 0;
  }
}

@container vd-epi (max-width: 860px) {
  .vd-epi__media,
  .vd-epi__studio {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: max(15rem, 62cqi);
  }

  .vd-epi__media::after {
    background: linear-gradient(0deg, var(--v-section-white) 0%, color-mix(in srgb, var(--v-section-white) 45%, transparent) 32%, transparent 62%);
  }

  .vd-epi__studio {
    background:
      radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--v-accent) 26%, transparent), transparent 72%),
      radial-gradient(56% 50% at 50% 66%, color-mix(in srgb, var(--v-ink) 13%, transparent) 0%, transparent 70%),
      linear-gradient(180deg, var(--v-section-stone), var(--v-section-white));
  }

  .vd-epi__studio::after {
    right: 8%;
    left: 8%;
  }

  .vd-epi__car {
    right: 50%;
    width: 78%;
    transform: translate(50%, -42%);
  }

  .vd-epi__ghost {
    top: 14%;
    right: 50%;
    font-size: 26cqi;
    transform: translateX(50%);
  }

  .vd-epi__inner {
    padding: 0.5rem 0 4.5rem;
  }
}

/* ---- The admin's Visual Preview: drawn at a computer's width, scaled to the column ------------------------------------ */
.vd-fleet-preview {
  width: 75rem;
  zoom: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .vd-stage__name,
  .vd-stage__car,
  .vd-stage__specs,
  .vd-stage__caption,
  .vd-stage__pick,
  .vd-stage__arrow,
  .vd-stage__strip-arrow,
  .vd-disc__tab::after,
  .vd-disc__panel .vd-disc__img,
  .vd-disc__panel .vd-disc__body > * {
    transition: none;
  }
}

/* ---- Vehicle Showcase Images: cut-outs and photographs ---------------------------------------------------------------
   A cut-out (transparent background) keeps the showroom: shadow, reflection, the plinth. A photograph with its own
   background is framed instead (rounded, covering a 3:2 frame, no reflection), never treated as a cut-out. No picture is
   shown much larger than its own width (--vd-img-w: the file's natural width): a small photograph stays sharp. */
.vd-stage__car[data-cutout] .vd-stage__img,
.vd-disc__media[data-cutout] .vd-disc__img,
.vd-epi__car[data-cutout] .vd-epi__car-img {
  max-width: min(100%, calc(var(--vd-img-w, 100vw) * 1.5));
  margin-inline: auto;
}

.vd-stage__car[data-cutout='0'] .vd-stage__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--v-radius-xl);
  filter: none;
  box-shadow: 0 2rem 3.5rem -1.5rem var(--v-overlay), 0 0 0 1px var(--v-line);
}

.vd-disc__media[data-cutout='0']::before,
.vd-disc__media[data-cutout='0']::after {
  display: none;
}

.vd-disc__media[data-cutout='0'] .vd-disc__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--v-radius-xl);
  filter: none;
  box-shadow: 0 1.5rem 3rem -1.5rem var(--v-overlay);
}

.vd-epi__car[data-cutout='0'] .vd-epi__car-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--v-radius-xl);
  filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--v-ink) 22%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--v-ink) 22%);
}

.vd-stage__thumb[data-cutout='0'] img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--v-radius-sm);
  filter: none;
}

/* A framed photograph on the stage: a little smaller and below the words (it has its own background, so it does not
   rise under them as a cut-out does); the count of Discover sits under its frame. */
.vd-stage__car[data-cutout='0'] {
  width: min(46rem, 72%);
  margin-top: clamp(1rem, 2vw, 1.75rem);
}

.vd-disc__media[data-cutout='0'] .vd-disc__count {
  bottom: -1.75rem;
}

/* ---- Fleet designs 04 / 01 / 08 (inc/fleet-designs.php) ---------------------------------------------------------------
   The approved concepts' openings on the page's tokens. 04 and 08 follow the page's appearance; 01 is a photograph with
   a dark gradient, a dark scene in every appearance (the same mapping as the stage, above). */
.vd-fh {
  position: relative;
  background-color: var(--v-section-white);
  color: var(--v-text);
}

.vd-fh__wrap {
  max-width: var(--v-container-wide, 90rem);
  margin: 0 auto;
  padding-inline: var(--v-page-gutter);
  box-sizing: content-box;
}

.vd-fh .vd-page__badge {
  justify-self: start;
  margin: 0;
}

.vd-fh__actions {
  margin-top: 0.5rem;
}

/* 04 · Minimal Statement: one oversized sentence, the vehicle beside the description. */
.vd-fh--minimal .vd-fh__wrap {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(4rem, 2.5rem + 6vw, 7rem) clamp(3rem, 2rem + 3vw, 4.5rem);
}

.vd-fh-min__title {
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(3.4rem, 1.5rem + 8.6vw, 10rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.vd-fh-min__one,
.vd-fh-min__two {
  display: block;
}

.vd-fh-min__two {
  color: var(--v-muted);
}

.vd-fh-min__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
}

.vd-fh-min__words {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.vd-fh-min__intro {
  max-width: 24rem;
  margin: 0;
  color: var(--v-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.vd-fh-min__car {
  position: relative;
  justify-self: end;
  width: min(34rem, 100%);
  margin: 0;
}

.vd-fh-min__car::before {
  content: '';
  position: absolute;
  inset: -10% -6% -4%;
  background: radial-gradient(55% 48% at 50% 62%, color-mix(in srgb, var(--v-ink) 12%, transparent) 0%, transparent 72%);
  pointer-events: none;
}

.vd-fh-min__img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1.1rem 1rem color-mix(in srgb, var(--v-overlay) 85%, transparent)) brightness(1.08);
}

.vd-fh-min__car[data-cutout='0']::before {
  display: none;
}

.vd-fh-min__car[data-cutout='0'] .vd-fh-min__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--v-radius-xl);
  filter: none;
}

.vd-fh-min__car[data-cutout] .vd-fh-min__img {
  max-width: min(100%, calc(var(--vd-img-w, 100vw) * 1.5));
  margin-left: auto;
}

@media screen and (min-width: 861px) {
  .vd-fh-min__foot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 3rem;
  }

  .vd-fh-min__car {
    margin-top: -5.5rem;
  }
}

/* 01 · Cinematic Showcase: the photograph full-width, the words at its lower left, a strip of every vehicle. */
.vd-fh--cinematic {
  display: flex;
  align-items: flex-end;
  min-height: clamp(34rem, 22rem + 30vw, 47rem);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--v-section-white);
}

.vd-fh-cin__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  /* Fit and focal point: Design → Hero → Hero photograph (inc/fleet-designs.php, valdier_starter_fleet_framing). */
  object-fit: var(--vd-fit, cover);
  object-position: var(--vd-pos, 50% 74%);
}

.vd-fh--cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--v-section-white) 92%, transparent) 0%, color-mix(in srgb, var(--v-section-white) 55%, transparent) 42%, transparent 70%),
    linear-gradient(0deg, color-mix(in srgb, var(--v-section-white) 95%, transparent) 0%, transparent 38%);
}

.vd-fh-cin__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: end;
  width: 100%;
  padding-block: 0 3.5rem;
}

.vd-fh-cin__words {
  display: grid;
  gap: 1.4rem;
  justify-items: start;
}

.vd-fh-cin__title {
  margin: 0;
  color: var(--v-ink);
  font-size: clamp(3rem, 1.6rem + 6vw, 7rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.vd-fh-cin__title > span,
.vd-fh-cin__title > em {
  display: block;
}

.vd-fh-cin__title em {
  color: var(--v-accent-text);
  font-style: italic;
  font-weight: 300;
}

.vd-fh-cin__intro {
  max-width: 33rem;
  margin: 0;
  color: var(--v-text);
  font-size: 1.12rem;
  line-height: 1.55;
}

.vd-fh-cin__meta {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  color: var(--v-muted);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vd-fh-cin__meta b {
  color: var(--v-ink);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: none;
}

@media screen and (min-width: 861px) {
  .vd-fh-cin__wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .vd-fh-cin__meta {
    text-align: right;
  }
}

.vd-fh-strip {
  border-top: 1px solid var(--v-line);
  border-bottom: 1px solid var(--v-line);
  background-color: var(--v-section-white);
}

.vd-fh-strip__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media screen and (min-width: 861px) {
  .vd-fh-strip__row {
    grid-template-columns: repeat(var(--vd-strip), minmax(0, 1fr));
  }
}

.vd-fh-strip__item {
  display: grid;
  gap: 0.2rem;
  margin-right: 1.2rem;
  padding: 1.3rem 1.2rem 1.3rem 0;
  border-right: 1px solid var(--v-line);
  color: inherit;
  text-decoration: none;
}

.vd-fh-strip__item:last-child {
  border-right: 0;
}

.vd-fh-strip__item span {
  color: var(--v-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vd-fh-strip__item b {
  color: var(--v-ink);
  font-size: 1.05rem;
  font-weight: 500;
  transition: color var(--v-duration) var(--v-ease);
}

.vd-fh-strip__item:hover b {
  color: var(--v-accent-text);
}

.vd-fh-strip__item:focus-visible {
  outline: var(--v-focus-outline);
  outline-offset: var(--v-focus-offset);
}

@media screen and (max-width: 860px) {
  .vd-fh-strip__item {
    border-right: 0;
  }
}

/* 08 · A Day in Motion: an arched photograph framed by two large words, the description on a rule. */
.vd-fh--day .vd-fh__wrap {
  padding-block: clamp(3rem, 2rem + 3vw, 4rem) clamp(3.5rem, 2.5rem + 3vw, 5rem);
}

.vd-fh-day__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
}

.vd-fh-day__word {
  color: var(--v-ink);
  font-size: clamp(3.5rem, 1.8rem + 7vw, 8.4rem);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.vd-fh-day__photo {
  margin: 0;
}

.vd-fh-day__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5.2;
  object-fit: var(--vd-fit, cover);
  object-position: var(--vd-pos, 50% 60%);
  border-radius: 12.5rem 12.5rem var(--v-radius-sm) var(--v-radius-sm);
}

.vd-fh-day__photo figcaption {
  margin-top: 0.8rem;
  color: var(--v-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
}

@media screen and (min-width: 861px) {
  .vd-fh-day__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem) minmax(0, 1fr);
    gap: 2.5rem;
  }

  .vd-fh-day__word--end {
    text-align: right;
  }
}

@media screen and (max-width: 860px) {
  .vd-fh-day__photo {
    width: min(100%, 24rem);
  }
}

.vd-fh-day__lead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--v-line);
}

.vd-fh-day__intro {
  max-width: 34rem;
  margin: 0;
  color: var(--v-muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.vd-fh-day__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* The preview notice of a Fleet design (its editors only). */
.vd-fd-preview {
  position: relative;
  z-index: 5;
  background-color: var(--v-section-stone);
  color: var(--v-text);
  font-size: 0.875rem;
}

.vd-fd-preview__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  max-width: var(--v-container-wide, 90rem);
  margin: 0 auto;
  padding: 0.75rem var(--v-page-gutter);
  box-sizing: content-box;
}

.vd-fd-preview p {
  margin: 0;
}

.vd-fd-preview strong {
  color: var(--v-ink);
}

.vd-fd-preview__badge {
  display: inline-block;
  margin-right: 0.5rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--v-line-strong);
  border-radius: var(--v-radius-pill);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.vd-fd-preview__links {
  display: flex;
  gap: 1rem;
}

.vd-fd-preview a {
  color: var(--v-ink);
}

/* Phones: the focal point chosen for phones (else the computer's), Design → Hero / The closing scene. */
@media (max-width: 767px) {
  .vd-fh-cin__img,
  .vd-fh-day__photo img,
  .vd-epi__img {
    object-position: var(--vd-pos-m, var(--vd-pos, 50% 50%));
  }
}

/* "Contain": the whole photograph inside the frame, on the scene's own dark plate. */
.vd-fh-cin__img[style*='--vd-fit:contain'],
.vd-epi__img[style*='--vd-fit:contain'] {
  background-color: color-mix(in srgb, var(--v-ink, #111) 92%, transparent);
}