.vanity {
  position: relative;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920 / 1000;
  background: #0e0e12;
  /* overflow: hidden; */
  isolation: isolate;
  margin: 0 auto;
}

/* ── Glow backgrounds ─────────────────────────────────── */
.vanity__glow {
  position: absolute;
  width: 48.33%;
  /* 928 / 1920 */
  aspect-ratio: 928 / 808;
  pointer-events: none;
  mix-blend-mode: screen;
}

.vanity__glow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vanity__glow--right {
  left: calc(50% + 99px);
  top: 9.7%;
}

.vanity__glow--left {
  left: -16px;
  top: 28.5%;
}

/* ── 5-column card grid ───────────────────────────────── */
.vanity__card-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 257fr 396fr 258fr 258fr 396fr;
  column-gap: 1.04%;
  /* 20px at 1920px */
  padding: 0 7.19%;
  /* 138px margins at 1920px */
}

.vanity__col {
  position: relative;
}

/* ── Card base ────────────────────────────────────────── */
.vanity__card {
  position: absolute;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #28283f;
  background: linear-gradient(138deg, rgba(22, 22, 29, 0.8) 1%, rgba(14, 14, 18, 0.8) 98%);
  overflow: hidden;
}

/* col-a */
.vanity__card--left-top {
  top: 31.1%;
  height: 24.9%;
}

.vanity__card--left-tall {
  top: 58.5%;
  height: 42.9%;
}

/* col-b */
.vanity__card--main {
  top: 44.9%;
  height: 42.7%;
  overflow: hidden;
  background: linear-gradient(132deg, rgb(22, 22, 29) 1%, rgb(14, 14, 18) 82%);
}

.vanity__card--bar-bottom {
  top: 89.4%;
  height: 7.5%;
}

/* col-c */
.vanity__card--mid-left {
  top: 53.8%;
  height: 26.7%;
}

/* col-d */
.vanity__card--bar-top {
  top: 43.3%;
  height: 7.5%;
}

.vanity__card--mid-right {
  top: 53.8%;
  height: 26.7%;
}

/* col-e */
.vanity__card--right-top {
  top: 11.9%;
  height: 30.3%;
}

.vanity__card--right-tall {
  top: 44.9%;
  height: 42.7%;
}

/* ── Main card inner content ──────────────────────────── */
.vanity__dropdown {
  position: absolute;
  right: 4%;
  top: 11.5%;
  width: 41.4%;
  height: 9.37%;
  border: 0.5px solid #2c2c32;
  border-radius: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(168deg, rgb(22, 22, 29) 1%, rgb(14, 14, 18) 98%);
}

.vanity__dropdown span {
  font: 500 clamp(8px, 0.57vw, 11px)/1 var(--font-sans);
  color: #fff;
  white-space: nowrap;
}

.vanity__stat-value {
  position: absolute;
  left: 2%;
  top: 40.7%;
  font: 400 clamp(30px, 4vw, 77px)/1 var(--font-sans);
  color: #737373;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

/* ── Glow accent lines ────────────────────────────────── */
.vanity__line {
  position: absolute;
  height: 4px;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.vanity__line img {
  position: absolute;
  width: 100%;
  height: 131.51%;
  top: -15.76%;
  left: 0;
  max-width: none;
}

.vanity__line--1 {
  left: 36.77%;
  top: 44.9%;
  width: 5.78%;
}

.vanity__line--2 {
  left: 37.29%;
  top: 10.2%;
  width: 5.78%;
}

/* ── Heading overlay ──────────────────────────────────── */
.vanity__content {
  position: absolute;
  left: 21.6%;
  /* col-b left edge: 415/1920 */
  top: 10.3%;
  width: 42.3%;
  display: flex;
  flex-direction: column;
  gap: 3.2%;
}

.vanity__headline {
  font: 500 clamp(24px, 3.125vw, 60px)/1.09 var(--font-sans);
  color: #fff;
}

/* ── Stat overlays ────────────────────────────────────── */
.vanity__badge-jan {
  position: absolute;
  left: 22.4%;
  top: 57%;
  display: inline-flex;
  align-items: center;
  padding: 0.42% 0.83%;
  border-radius: 50px;
  border: 1px solid #2c2c32;
  background: linear-gradient(139deg, rgba(22, 22, 29, 0.9) 1%, rgba(14, 14, 18, 0.9) 98%);
}

.vanity__badge-jan span {
  font: 500 clamp(10px, 0.83vw, 16px)/1 var(--font-sans);
  color: #fff;
  white-space: nowrap;
}

.vanity__stat-label {
  position: absolute;
  left: 22.4%;
  top: 70.4%;
  width: 12.66%;
  /* 243/1920 */
  font: 400 clamp(10px, 0.83vw, 16px)/1.34 var(--font-sans);
  color: #fff;
}

/* ── Shared card content classes ──────────────────────── */
.vanity__num {
  position: absolute;
  font: 400 clamp(30px, 4vw, 77px)/1 var(--font-sans);
  color: #737373;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.vanity__desc {
  position: absolute;
  font: 400 clamp(10px, 0.83vw, 16px)/1.34 var(--font-sans);
  color: #fff;
}

.vanity__emblem {
  position: absolute;
  pointer-events: none;
  height: auto;
  opacity: 1;
}

.vanity__graphic {
  position: absolute;
  pointer-events: none;
}

/* per-card positioning */
.vanity__card--left-top .vanity__emblem {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52.5%;
}

.vanity__card--left-tall .vanity__num {
  left: 5.1%;
  top: 59.7%;
}

.vanity__card--left-tall .vanity__desc {
  left: 5.1%;
  top: 78.3%;
  width: 94.6%;
}

.vanity__card--left-tall .vanity__graphic {
  left: 18.3%;
  top: 18.4%;
  width: 57%;
}

.vanity__card--main .vanity__graphic {
  left: 38.6%;
  top: 43.6%;
  width: 62.6%;
}

.vanity__card--bar-bottom .vanity__emblem {
  left: 50%;
  top: 9.3%;
  transform: translateX(-50%);
  width: 44.7%;
}

.vanity__card--mid-left .vanity__num {
  left: 5.4%;
  top: 31.8%;
}

.vanity__card--mid-left .vanity__desc {
  left: 5.4%;
  top: 61.8%;
  width: 94.2%;
}

.vanity__card--mid-left .vanity__graphic {
  left: 65.5%;
  top: 6.7%;
  width: 27.9%;
}

.vanity__card--bar-top .vanity__emblem {
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  width: 68.6%;
}

.vanity__card--mid-right .vanity__emblem {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52.3%;
}

.vanity__card--right-top .vanity__num {
  left: 7.1%;
  top: 42.9%;
}

.vanity__card--right-top .vanity__desc {
  left: 7.1%;
  top: 69.3%;
  width: 61.4%;
}

.vanity__card--right-top .vanity__graphic {
  left: 68.4%;
  top: 19.5%;
  width: 17.9%;
}

.vanity__card--right-tall .vanity__num {
  left: 5.6%;
  top: 29.5%;
}

.vanity__card--right-tall .vanity__desc {
  left: 5.6%;
  top: 48.2%;
  width: 61.4%;
}

.vanity__card--right-tall .vanity__graphic {
  left: 28.8%;
  top: 51.5%;
  width: 76.3%;
}

/* dropdown caret */
.vanity__dropdown {
  gap: clamp(4px, 0.31vw, 6px);
}

.vanity__dropdown img {
  width: clamp(8px, 0.57vw, 11px);
  height: auto;
  flex-shrink: 0;
}

/* ── Responsive breakpoints ───────────────────────────── */

/* BP1 ≤1400px: hide col-c, 4 columns */
@media (max-width: 1400px) {
  .vanity__card-grid {
    grid-template-columns: 257fr 396fr 258fr 396fr;
  }

  .vanity__card-grid>.vanity__col:nth-child(3) {
    display: none;
  }

  .vanity__content {
    left: 24.45%;
  }

  .vanity__badge-jan,
  .vanity__stat-label {
    left: 25.2%;
  }
}

/* BP2 ≤1100px: 3 columns — col-b, col-c, col-d; hide col-a and col-e */
@media (max-width: 1100px) {
  .vanity__card-grid {
    grid-template-columns: 396fr 258fr 258fr;
  }

  .vanity__card-grid>.vanity__col:nth-child(1) {
    display: none;
  }

  .vanity__card-grid>.vanity__col:nth-child(3) {
    display: block;
  }

  .vanity__card-grid>.vanity__col:nth-child(5) {
    display: none;
  }

  .vanity__content {
    left: 7.19%;
  }

  .vanity__badge-jan,
  .vanity__stat-label {
    left: 8%;
  }

  .vanity__glow--left {
    display: none;
  }
}

/* BP3 ≤768px: abandon the fixed-aspect canvas — stack headline + metric cards */
@media (max-width: 768px) {
  .vanity {
    aspect-ratio: auto;
    height: auto;
    padding: clamp(64px, 12vw, 96px) 24px;
    display: flex;
    flex-direction: column;
  }

  /* decorative atmosphere relies on canvas coordinates — drop it on mobile */
  .vanity__glow,
  .vanity__line {
    display: none;
  }

  /* headline back into normal flow at the top */
  .vanity__content {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    gap: 16px;
    margin-bottom: 32px;
    order: -1;
  }

  .vanity__headline {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.12;
  }

  /* canvas grid → single readable column */
  .vanity__card-grid {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    column-gap: 0;
  }

  /* re-show every column regardless of the ≤1400 / ≤1100 hides above */
  .vanity__card-grid>.vanity__col:nth-child(1),
  .vanity__card-grid>.vanity__col:nth-child(2),
  .vanity__card-grid>.vanity__col:nth-child(3),
  .vanity__card-grid>.vanity__col:nth-child(4),
  .vanity__card-grid>.vanity__col:nth-child(5) {
    display: contents;
  }

  /* keep only the metric cards — drop emblem/wordmark filler */
  .vanity__card--left-top,
  .vanity__card--bar-bottom,
  .vanity__card--bar-top,
  .vanity__card--mid-right {
    display: none;
  }

  .vanity__card {
    position: static;
    width: 100%;
    height: auto;
    padding: 24px;
  }

  /* metric text + decorative graphics back into flow */
  .vanity__num,
  .vanity__stat-value {
    position: static;
    left: auto;
    top: auto;
    font-size: clamp(40px, 12vw, 60px);
    margin-bottom: 12px;
  }

  .vanity__desc {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    font-size: 16px;
  }

  .vanity__graphic,
  .vanity__dropdown {
    display: none;
  }

  /* overlay annotations have no canvas to anchor to */
  .vanity__badge-jan,
  .vanity__stat-label {
    display: none;
  }
}