/*
  Makeup L1 proof pass v2.
  One layered editorial system: same grid, same scale, same visual weight.
*/

.makeup-proof {
  --mp-ink: #f0d9c9;
  --mp-muted: rgba(240, 217, 201, 0.68);
  --mp-faint: rgba(240, 217, 201, 0.44);
  --mp-rule: rgba(240, 217, 201, 0.15);
  --mp-rule-strong: rgba(240, 217, 201, 0.24);
  --mp-paper: #0f0d0b;
  --mp-panel: rgba(240, 217, 201, 0.038);
  --mp-panel-2: rgba(240, 217, 201, 0.062);
  --mp-accent: #d77b8c;
  --mp-accent-deep: #9c3f52;
  --mp-page: min(100% - 44px, 1180px);
  --mp-section: clamp(78px, 10vw, 128px);
  --mp-gap: clamp(26px, 4vw, 56px);
  --mp-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

.makeup-proof .container {
  max-width: none;
  width: var(--mp-page);
  padding-inline: 0;
}

.makeup-proof .topbar .container,
.makeup-proof .crumb.container {
  width: min(100% - 44px, 1240px);
}

.makeup-proof .hero {
  min-height: clamp(700px, 90dvh, 860px);
  height: auto;
  max-height: none;
  padding-block: clamp(76px, 9vw, 110px) clamp(72px, 8vw, 104px);
}

.makeup-proof .hero::before {
  background:
    linear-gradient(90deg, rgba(15, 13, 11, 0.88), rgba(15, 13, 11, 0.58) 48%, rgba(15, 13, 11, 0.26)),
    linear-gradient(180deg, rgba(15, 13, 11, 0.08), rgba(15, 13, 11, 0.84)) !important;
}

.makeup-proof .hero .container {
  max-width: none;
}

.makeup-proof .hero-composition {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mp-gap);
  align-items: end;
}

@media (min-width: 980px) {
  .makeup-proof .hero-composition {
    grid-template-columns: minmax(0, 0.92fr) minmax(300px, 0.56fr);
  }
}

.makeup-proof .hero-copy {
  max-width: 720px;
}

.makeup-proof .hero-eyebrow,
.makeup-proof .editorial-label,
.makeup-proof .studio-kicker,
.makeup-proof .index-card small,
.makeup-proof .diag-item small {
  letter-spacing: 0.2em;
}

.makeup-proof .hero h1 {
  max-width: 9.6ch;
  font-size: clamp(64px, 8.6vw, 126px);
  line-height: 0.91;
  letter-spacing: -0.026em;
}

.makeup-proof .hero-deck {
  max-width: 53ch;
  margin-top: 28px;
  padding-left: 24px;
  border-left: 1px solid rgba(215, 123, 140, 0.52);
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.68;
}

.makeup-proof .cover-card {
  max-width: 560px;
  margin-top: 30px;
  padding-top: 20px;
  border-top-color: rgba(240, 217, 201, 0.26);
}

.makeup-proof .cover-card b {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 0.98;
}

.makeup-proof .cover-tags span {
  border-color: rgba(240, 217, 201, 0.2);
  background: rgba(15, 13, 11, 0.42);
}

.makeup-proof .hero-meta {
  max-width: 660px;
  margin-top: 34px;
}

.makeup-proof .hero-meta div {
  padding: 16px;
}

.makeup-proof .hero-meta strong {
  font-size: 17px;
}

.makeup-proof .hero-plate {
  display: none;
  min-height: 500px;
  padding: 8px;
  border: 1px solid var(--mp-rule-strong);
  background: var(--mp-panel);
}

@media (min-width: 980px) {
  .makeup-proof .hero-plate {
    display: block;
  }
}

.makeup-proof .hero-plate img {
  min-height: 484px;
  height: 100%;
  border: 1px solid rgba(240, 217, 201, 0.1);
  clip-path: none !important;
  object-position: center;
}

.makeup-proof .hero-plate::before {
  display: none;
}

.makeup-proof .hero-plate::after {
  inset: 8px;
  background: linear-gradient(180deg, transparent 48%, rgba(15, 13, 11, 0.72));
}

.makeup-proof .plate-caption {
  position: absolute;
  z-index: 2;
  left: 30px;
  right: 30px;
  bottom: 28px;
  color: rgba(255, 255, 255, 0.75);
  font: 500 10px/1.55 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.makeup-proof .diagnostic .container {
  width: var(--mp-page);
}

.makeup-proof .diag-item {
  padding: 26px;
}

.makeup-proof .diag-photo,
.makeup-proof .diag-photo img {
  min-height: 380px;
}

.makeup-proof .makeup-studio,
.makeup-proof .editorial-section,
.makeup-proof .index {
  padding-block: var(--mp-section);
}

.makeup-proof .studio-grid,
.makeup-proof .split,
.makeup-proof .editorial-head {
  gap: var(--mp-gap);
}

@media (min-width: 980px) {
  .makeup-proof .studio-grid {
    grid-template-columns: minmax(320px, 0.5fr) minmax(0, 0.74fr);
  }
}

.makeup-proof .studio-image {
  min-height: 520px;
  padding: 8px;
  border: 1px solid var(--mp-rule);
  background: var(--mp-panel);
}

.makeup-proof .studio-image img {
  min-height: 504px;
}

.makeup-proof .studio-copy {
  padding-bottom: 10px;
}

.makeup-proof .studio-copy h2,
.makeup-proof .editorial-head h2,
.makeup-proof .section-head h2,
.makeup-proof .index-card h2 {
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.018em;
}

.makeup-proof .studio-copy p,
.makeup-proof .editorial-head p {
  max-width: 58ch;
  font-size: clamp(15.5px, 1.35vw, 17px);
  line-height: 1.72;
}

.makeup-proof .studio-notes {
  margin-top: 38px;
}

.makeup-proof .studio-notes div {
  min-height: 142px;
  padding: 24px;
}

.makeup-proof .route-spread {
  margin-bottom: 32px;
}

.makeup-proof .route-spread figure,
.makeup-proof .route-spread img {
  min-height: 470px;
}

.makeup-proof .route-spread-copy {
  padding: clamp(34px, 5vw, 58px);
}

.makeup-proof .route-spread-copy b {
  max-width: 12ch;
  font-size: clamp(38px, 5.4vw, 70px);
}

.makeup-proof .pathways {
  gap: 14px;
}

.makeup-proof .pathway {
  min-height: 0;
  border-color: var(--mp-rule);
  background: var(--mp-panel);
}

@media (min-width: 880px) {
  .makeup-proof .pathway,
  .makeup-proof .pathway:nth-child(even) {
    grid-template-columns: 0.28fr minmax(0, 1fr) 0.34fr;
  }
}

.makeup-proof .path-num,
.makeup-proof .path-copy,
.makeup-proof .path-aside {
  padding: 26px;
}

.makeup-proof .path-copy h3 {
  font-size: clamp(34px, 4vw, 52px);
}

.makeup-proof .path-copy p {
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.68;
}

.makeup-proof .matrix {
  gap: 1px;
  border-color: var(--mp-rule);
  background: var(--mp-rule);
}

.makeup-proof .matrix-photo,
.makeup-proof .matrix-photo img {
  min-height: 430px;
}

.makeup-proof .matrix-card {
  min-height: 220px;
  padding: 26px;
  background: rgba(22, 17, 15, 0.92);
}

.makeup-proof .matrix-card b {
  font-size: 28px;
}

.makeup-proof .editor-note {
  padding: 28px;
  background: var(--mp-panel-2);
}

.makeup-proof .editor-note p {
  font-size: clamp(23px, 2.5vw, 30px);
}

.makeup-proof .rule-list article {
  padding: 26px;
}

.makeup-proof .index {
  background: #f0d1ca;
}

.makeup-proof .index-grid {
  gap: 1px;
}

.makeup-proof .index-card {
  padding: 28px;
  background: #f0d1ca;
}

.makeup-proof .index-card:first-child {
  background: #e4bcb8;
}

.makeup-proof .index-card h3 {
  font-size: clamp(28px, 3vw, 36px);
}

.makeup-proof .pathway:hover,
.makeup-proof .matrix-card:hover,
.makeup-proof .index-card:hover {
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .makeup-proof {
    --mp-page: min(100% - 32px, 1180px);
    --mp-section: 72px;
  }

  .makeup-proof .hero {
    padding-block: 58px 70px;
  }

  .makeup-proof .hero h1 {
    font-size: clamp(54px, 17vw, 74px);
  }

  .makeup-proof .hero-meta {
    grid-template-columns: 1fr;
  }

  .makeup-proof .studio-image,
  .makeup-proof .studio-image img,
  .makeup-proof .route-spread figure,
  .makeup-proof .route-spread img,
  .makeup-proof .matrix-photo,
  .makeup-proof .matrix-photo img {
    min-height: 360px;
  }

  .makeup-proof .path-num,
  .makeup-proof .path-copy,
  .makeup-proof .path-aside,
  .makeup-proof .matrix-card,
  .makeup-proof .index-card {
    padding: 22px;
  }
}