/* Targeted composition corrections for the live Wytchwood homepage.
   Desktop intentionally preserves the same centered, single-column editorial
   experience as mobile instead of becoming a separate multi-column site. */

.est-mark {
  display: none !important;
}

.trust-strip {
  width: min(760px, calc(100% - (var(--gutter) * 2)));
  margin: -14px auto 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.trust-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 8px 13px;
  background: rgb(255 253 249 / .7);
  color: var(--green);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.card-action.available { color: var(--green); }
.card-action.reserved,
.card-action.sold { color: var(--muted); }

.hero-grid,
.story,
.cards,
.timeline,
.detail-grid,
.gallery-grid {
  grid-template-columns: 1fr !important;
}

.hero-copy,
.section-heading,
.story > div,
.adoption-panel {
  max-width: 640px;
  margin-inline: auto;
}

.hero-copy,
.section-heading,
.story > div,
.story .manuscript-card,
.social-card {
  text-align: center;
}

.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .lede,
.section-heading h2,
.story h2,
.story p,
.adoption-panel h2,
.adoption-panel p {
  margin-inline: auto !important;
  text-align: center !important;
}

.hero-actions {
  justify-content: center;
}

.hero-frame {
  width: min(100%, 520px);
  max-width: 520px;
  justify-self: center !important;
  margin-inline: auto !important;
  transform: none !important;
}

.hero-frame figcaption {
  text-align: center;
}

.section-heading {
  grid-template-columns: 1fr !important;
  justify-items: center;
}

.cards,
.timeline,
.detail-grid,
.gallery-grid {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

.story .manuscript-card,
#about .manuscript-card,
.social-card {
  width: 100%;
  max-width: 640px;
  justify-self: center !important;
  margin-inline: auto;
}

.signature {
  margin-inline: auto;
}

.contact-links,
.social-links {
  justify-content: center;
}

/* Listing, process, and provenance interiors stay left-aligned for scanning. */
.card-body,
.timeline-step,
.detail-grid .manuscript-card,
.facts,
.detail-grid .contact-links {
  text-align: left;
}

.detail-grid .contact-links {
  justify-content: flex-start;
}

@media (min-width: 760px) {
  .hero,
  .section,
  .adoption-panel {
    width: min(760px, calc(100% - (var(--gutter) * 2)));
  }

  .hero {
    min-height: auto;
    padding: 18px 0 46px;
  }

  .nav {
    padding-bottom: 26px;
    gap: 22px;
  }

  .nav-links {
    gap: 22px;
  }

  .hero-grid,
  .story {
    gap: 28px;
  }

  .hero-copy h1 {
    max-width: 12.6ch;
  }

  .hero-copy .lede {
    max-width: 34rem;
  }

  .hero-actions {
    max-width: 640px;
    margin-inline: auto;
  }

  .trust-strip {
    margin-top: -8px;
    margin-bottom: 30px;
  }

  .divider {
    width: min(720px, calc(100% - (var(--gutter) * 2)));
    margin-bottom: 28px;
  }

  .section {
    padding: 62px 0;
  }

  .section-heading {
    gap: 14px;
    margin-bottom: 34px;
  }

  .section-heading h2,
  .story h2,
  .adoption-panel h2 {
    max-width: 15.8ch;
  }

  .cards {
    gap: 28px;
  }

  .image-wrap,
  .baby-card:nth-child(2) .image-wrap,
  .baby-card:nth-child(3) .image-wrap {
    aspect-ratio: 4 / 3.65;
  }

  .timeline {
    gap: 18px;
  }

  .adoption-panel {
    padding: 42px 34px 44px;
    margin-bottom: 38px;
  }

  #babies { padding-top: 0; }

  #story,
  #reserve,
  #about {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  #reserve { padding-bottom: 38px; }

  #about {
    gap: 22px;
  }

  #about .manuscript-card {
    margin-top: 0;
  }
}

@media (min-width: 1040px) {
  .hero,
  .section,
  .adoption-panel {
    width: min(820px, calc(100% - (var(--gutter) * 2)));
  }

  .hero-frame {
    width: min(100%, 540px);
    max-width: 540px;
  }

  .cards,
  .timeline,
  .hero-copy,
  .story > div,
  .section-heading,
  .adoption-panel,
  #about .manuscript-card,
  .social-card {
    max-width: 680px;
  }
}

@media (max-width: 759px) {
  :root {
    --mobile-section-gap: 42px;
    --mobile-section-gap-tight: 28px;
    --mobile-heading-gap: 12px;
    --mobile-copy-gap: 16px;
  }

  .hero {
    padding-bottom: 28px;
  }

  .nav {
    padding-bottom: 16px;
  }

  .hero-grid {
    gap: 20px;
  }

  .hero-copy {
    max-width: 36rem;
  }

  .hero-copy .eyebrow + h1,
  .story .eyebrow + h2,
  .section-heading .eyebrow + h2 {
    margin-top: var(--mobile-heading-gap);
  }

  .hero-copy .lede {
    margin-top: var(--mobile-copy-gap);
    line-height: 1.58;
  }

  .hero-actions {
    margin-top: 18px;
    align-items: stretch;
  }

  .hero-frame {
    width: min(100%, 356px);
    margin-top: 4px;
  }

  .trust-strip {
    margin: 0 auto 18px;
    justify-content: center;
    gap: 8px;
  }

  .trust-strip span {
    min-height: 30px;
    padding: 7px 10px;
    font-size: .62rem;
    letter-spacing: .08em;
  }

  .divider {
    margin-top: 18px;
    margin-bottom: 20px;
  }

  #babies {
    padding-top: 0;
    padding-bottom: var(--mobile-section-gap);
  }

  #babies .section-heading {
    margin-bottom: 30px;
  }

  #babies .section-heading h2 {
    max-width: 15.3ch;
  }

  #story {
    padding-top: var(--mobile-section-gap-tight);
    padding-bottom: var(--mobile-section-gap);
    gap: 20px;
  }

  #story > div,
  #about > div {
    max-width: 35rem;
  }

  #story h2,
  #reserve h2,
  #about h2 {
    max-width: 16.8ch;
  }

  #story h2 + p,
  #about h2 + p {
    margin-top: 18px;
    max-width: 31rem;
    line-height: 1.62;
  }

  #story .manuscript-card {
    padding-block: 22px;
  }

  #reserve {
    padding-top: var(--mobile-section-gap-tight);
    padding-bottom: 30px;
  }

  #reserve .section-heading {
    margin-bottom: 28px;
  }

  #reserve .section-heading h2 {
    max-width: 14.8ch;
  }

  .timeline {
    gap: 18px;
  }

  .timeline-step {
    padding: 22px;
  }

  .adoption-panel {
    margin-bottom: 28px;
    padding: 34px 22px 36px;
  }

  .adoption-panel h2 {
    max-width: 12.8ch;
  }

  .adoption-panel h2 + p {
    margin-top: 16px;
    max-width: 30rem;
    line-height: 1.58;
  }

  .checks {
    margin-top: 18px;
    gap: 10px;
  }

  #about {
    padding-top: 30px;
    padding-bottom: 44px;
    gap: 18px;
  }

  #about h2 {
    max-width: 15.8ch;
  }

  #about .signature {
    width: min(320px, 82vw);
    margin-top: 28px;
  }

  #about .social-card {
    padding: 24px 22px 22px;
  }

  .social-card h3 {
    max-width: 12ch;
    margin-inline: auto;
  }

  .social-card h3 + p {
    margin-top: 14px;
    max-width: 30rem;
    margin-inline: auto;
    line-height: 1.58;
  }

  .social-links {
    margin-top: 16px;
  }

  .social-links a {
    min-width: 86px;
    justify-content: center;
  }
}