@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/fonts/jost-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;
  --porcelain: #f4ece4;
  --porcelain-deep: #ead9cc;
  --ink: #2a1418;
  --ink-soft: #6b4f52;
  --cherry: #8c1229;
  --nude: #d8a493;
  --milk: #f8f1ea;
  --oxblood: #3e0b16;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  background-color: var(--porcelain);
  background-image:
    radial-gradient(120% 70% at 50% -10%, #fbf6f1 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 115%, var(--porcelain-deep) 0%, transparent 70%);
  overflow-x: hidden;
}

/* Fine paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .4 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.card {
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 6rem) 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  margin: 0 0 1.25rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}

.wordmark {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 7.5rem);
  line-height: .9;
  letter-spacing: -.02em;
  animation: rise 1s .1s cubic-bezier(.2, .7, .2, 1) both;
}
.wordmark em {
  font-style: italic;
  font-weight: 500;
  color: var(--cherry);
}

/* Polish swatch row */
.swatches {
  display: flex;
  gap: clamp(.55rem, 2.6vw, 1rem);
  align-items: flex-end;
  margin: clamp(2.25rem, 7vh, 3.5rem) 0 clamp(2rem, 6vh, 3rem);
}

.nail {
  position: relative;
  display: block;
  width: clamp(2.3rem, 11vw, 3.4rem);
  aspect-ratio: 5 / 7.4;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
  background: var(--polish);
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, .18),
    inset 0 4px 6px rgba(255, 255, 255, .12),
    0 10px 18px -10px rgba(62, 11, 22, .55);
  transform-origin: 50% 100%;
  animation: paint .9s cubic-bezier(.3, .8, .25, 1) both;
}
.nail:nth-child(1) { animation-delay: .35s; }
.nail:nth-child(2) { animation-delay: .45s; margin-bottom: .55rem; }
.nail:nth-child(3) { animation-delay: .55s; margin-bottom: .9rem; }
.nail:nth-child(4) { animation-delay: .65s; margin-bottom: .55rem; }
.nail:nth-child(5) { animation-delay: .75s; }

/* Gloss highlight */
.nail::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 22%;
  width: 22%;
  height: 46%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  filter: blur(.4px);
  transform: rotate(8deg);
}

.nail--cherry  { --polish: var(--cherry); }
.nail--nude    { --polish: var(--nude); }
.nail--oxblood { --polish: var(--oxblood); }
.nail--milk {
  --polish: var(--milk);
  box-shadow:
    inset 0 0 0 1px rgba(107, 79, 82, .14),
    inset 0 -6px 10px rgba(107, 79, 82, .12),
    0 10px 18px -10px rgba(62, 11, 22, .35);
}
.nail--pearl {
  --polish: linear-gradient(160deg, #fff7f2 0%, #e9cfc6 30%, #c9a9b3 55%, #f3e3dc 75%, #b99aa0 100%);
}

.lede {
  margin: 0 0 .75rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1.2;
  animation: rise 1s .9s cubic-bezier(.2, .7, .2, 1) both;
}
.lede em { color: var(--cherry); }

.body {
  margin: 0 0 2rem;
  max-width: 26rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  animation: rise 1s 1s cubic-bezier(.2, .7, .2, 1) both;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--porcelain);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .06em;
  text-decoration: none;
  box-shadow: 0 12px 24px -14px rgba(42, 20, 24, .8);
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
  animation: rise 1s 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.cta:hover { background: var(--cherry); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(140, 18, 41, .8); }
.cta:focus-visible { outline: 2px solid var(--cherry); outline-offset: 4px; }

.foot {
  padding: 1.5rem 1.25rem 2rem;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foot p { margin: .3rem 0; }
.foot span { white-space: nowrap; }
.foot p + p { letter-spacing: .08em; opacity: .75; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes paint {
  from { opacity: 0; transform: scaleY(.15); filter: saturate(.3); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}