/*
  Fragrance L1 proof pass.
  Layered, sensory, and scaled from the Makeup v2 lesson: one grid,
  one spacing rhythm, one heading scale.
*/

.fragrance-proof {
  --fp-ink: #ead7cf;
  --fp-muted: rgba(234, 215, 207, 0.68);
  --fp-faint: rgba(234, 215, 207, 0.44);
  --fp-rule: rgba(234, 215, 207, 0.15);
  --fp-rule-strong: rgba(234, 215, 207, 0.24);
  --fp-paper: #0f0d0b;
  --fp-panel: rgba(234, 215, 207, 0.04);
  --fp-panel-2: rgba(234, 215, 207, 0.065);
  --fp-plum: #9c6a98;
  --fp-amber: #c89456;
  --fp-page: min(100% - 44px, 1180px);
  --fp-section: clamp(78px, 10vw, 128px);
  --fp-gap: clamp(26px, 4vw, 56px);
  --fp-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

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

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

.fragrance-proof .hero {
  min-height: clamp(560px, 76dvh, 720px);
  height: auto;
  max-height: none;
  padding-block: clamp(58px, 7vw, 86px) clamp(58px, 7vw, 88px);
}

.fragrance-proof .hero::before {
  background:
    linear-gradient(90deg, rgba(15, 13, 11, 0.9), rgba(15, 13, 11, 0.66) 54%, rgba(15, 13, 11, 0.44)),
    radial-gradient(circle at 74% 36%, rgba(200, 148, 86, 0.16), transparent 28rem),
    linear-gradient(180deg, rgba(15, 13, 11, 0.08), rgba(15, 13, 11, 0.82)) !important;
}

.fragrance-proof .hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(0.84) contrast(1.05) brightness(0.72);
}

.fragrance-proof .fragrance-hero-grid {
  position: relative;
  z-index: 3;
  max-width: 760px;
}

.fragrance-proof .fragrance-hero-copy {
  max-width: 760px;
}

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

.fragrance-proof .hero h1 {
  max-width: 10.2ch;
  font-size: clamp(58px, 7.2vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.fragrance-proof .hero h1 em,
.fragrance-proof .editorial-head h2 em {
  color: var(--fp-amber);
}

.fragrance-proof .hero-deck {
  max-width: 54ch;
  margin-top: 24px;
  padding-left: 24px;
  border-left: 1px solid rgba(200, 148, 86, 0.5);
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.64;
}

.fragrance-proof .hero-meta {
  max-width: 660px;
  margin-top: 28px;
}

.fragrance-proof .hero-meta span {
  border-color: rgba(234, 215, 207, 0.18);
  background: rgba(15, 13, 11, 0.54);
}

.fragrance-proof .diagnostic .container {
  width: var(--fp-page);
}

.fragrance-proof .diag-item {
  min-height: 150px;
  padding: 26px;
}

.fragrance-proof .editorial-section,
.fragrance-proof .index {
  padding-block: var(--fp-section);
}

.fragrance-proof .editorial-head,
.fragrance-proof .split {
  gap: var(--fp-gap);
}

.fragrance-proof .editorial-head h2,
.fragrance-proof .index-card h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

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

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

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

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

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

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

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

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

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

.fragrance-proof .matrix-card b {
  color: var(--fp-amber);
  font-size: 28px;
}

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

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

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

.fragrance-proof .index {
  background: #ead7cf;
}

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

.fragrance-proof .index-card {
  padding: 28px;
  background: #ead7cf;
}

.fragrance-proof .index-card:first-child {
  background: #ddc0ba;
}

.fragrance-proof .index-card h2,
.fragrance-proof .index-card h3,
.fragrance-proof .index-card p {
  color: #2c1715;
}

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

.fragrance-proof .index-card a,
.fragrance-proof .index-card small {
  color: #7b4f33;
}

.fragrance-proof .pathway,
.fragrance-proof .matrix-card,
.fragrance-proof .index-card {
  transition:
    border-color 520ms var(--fp-ease),
    background-color 520ms var(--fp-ease),
    transform 520ms var(--fp-ease);
}

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

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

  .fragrance-proof .hero {
    min-height: auto;
    padding-block: 48px 62px;
  }

  .fragrance-proof .hero h1 {
    font-size: clamp(48px, 14vw, 66px);
  }

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

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