/*
 * Studio Ivy — lash designer.
 *
 * Preto e rosa-poeira, Playfair Display e Karla. Cílio se vende em close: o
 * trabalho inteiro cabe num retângulo de dez centímetros, então a página é
 * construída em torno de uma faixa de fotos que corre na horizontal, com
 * scroll-snap, em vez da grade vertical dos outros exemplos.
 */

:root {
  --paper: #131011;
  --paper-2: #1c1719;
  --paper-3: #2a2225;
  --ink: #f4eeef;
  --ink-soft: #cbbcc0;
  --muted: #8f7f84;
  --accent: #c98d94;
  --accent-soft: #e0aeb4;
  --line: rgb(244 238 239 / 0.15);

  --scrim: rgb(244 238 239 / 0.96);
  --scrim-mid: rgb(244 238 239 / 0.8);
  --scrim-top: rgb(244 238 239 / 0.76);
  --scrim-flat: rgb(8 6 7 / 0.7);
  --on-media: #f4eeef;
  --hero-paper: #f4eeef;
  --hero-ink: #25191d;
  --hero-ink-soft: #513c43;
  --hero-accent: #86404c;

  --display: "Playfair Display", Georgia, serif;
  --body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-leading: 1.06;
  --display-tracking: -0.02em;
  --wordmark-tracking: 0.36em;
  --radius: 2px;
  --hero-focus: center 46%;

  --footer-bg: #0c0a0b;
  --footer-ink: rgb(244 238 239 / 0.64);
  --footer-strong: #f4eeef;
}

.btn--light {
  background: var(--accent);
  color: #131011;
}

.btn--light:hover {
  background: var(--accent-soft);
}

.btn--solid {
  background: var(--ink);
  color: #131011;
}

.btn--solid:hover {
  background: var(--accent-soft);
}

.hero__title em {
  font-style: italic;
  color: var(--hero-accent);
}

.hero__media img {
  filter: saturate(0.78) contrast(1.05) brightness(0.9);
}

.quotes {
  background: var(--paper-3);
}

.service:hover {
  background: var(--paper-2);
}

.sticky-cta {
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}

/* ─── assinatura: faixa horizontal ───────────────────────────────────────── */

/*
 * Sai do `.wrap` de propósito: a faixa sangra até a borda da tela e o primeiro
 * cartão começa alinhado com o texto, sugerindo que há mais coisa à direita.
 * `scroll-snap` faz o dedo parar em cima de uma foto, não entre duas.
 */
.reel {
  display: flex;
  gap: var(--space-s);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  /*
   * Sem isto o snap encosta o primeiro cartão na borda da tela e come o padding
   * inicial, quebrando o alinhamento com a coluna de texto acima.
   */
  scroll-padding-inline: var(--gutter);
  padding-block-end: var(--space-s);
  scrollbar-width: thin;
  scrollbar-color: var(--paper-3) transparent;
  -webkit-overflow-scrolling: touch;
}

.reel::-webkit-scrollbar {
  height: 3px;
}

.reel::-webkit-scrollbar-thumb {
  background: var(--paper-3);
}

.reel figure {
  flex: 0 0 auto;
  width: min(78vw, 21rem);
  margin: 0;
  scroll-snap-align: start;
}

.reel figure > div {
  border-radius: var(--radius);
  overflow: hidden;
}

.reel img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

.reel figure:hover img {
  transform: scale(1.04);
}

.reel figcaption {
  margin-block-start: var(--space-s);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
}

.reel__name {
  font-family: var(--display);
  font-size: var(--step-1);
}

.reel__price {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

.reel__text {
  margin-block-start: 0.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* Dica de que a faixa rola — some no desktop, onde já aparece meia foto. */
.reel-hint {
  margin-block-start: var(--space-s);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 900px) {
  .reel {
    padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    gap: var(--space-m);
  }

  .reel figure {
    width: 24rem;
  }

  /* No desktop meia foto já aparece cortada: a dica vira ruído. */
  .reel-hint {
    display: none;
  }
}

/* ─── tabela de manutenção ───────────────────────────────────────────────── */

.upkeep {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.upkeep div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block-end: var(--space-s);
  border-block-end: 1px solid var(--line);
}

.upkeep div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.upkeep dt {
  color: var(--ink-soft);
}

.upkeep dd {
  font-family: var(--display);
  white-space: nowrap;
}