@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  color: #352f2a;
  background: #fbf8f2;
  font-family: Inter, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --bg: #fbf8f2;
  --card: #fffdf9;
  --text: #352f2a;
  --muted: #8f847a;
  --soft: #f3ede4;
  --border: #e4dbcf;
  --green: #71836f;
  --gold: #bda264;
  --rose: #d7b4ad;
  --shadow: 0 22px 70px rgb(53 47 42 / .075);
  --shadow-soft: 0 14px 42px rgb(53 47 42 / .055);
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 42px;
  --space-8: 56px;
  --space-9: 72px;
  --space-10: 88px;
  --space-fluid-sm: clamp(var(--space-3), 2vw, var(--space-5));
  --space-fluid-md: clamp(var(--space-5), 4vw, var(--space-7));
  --space-fluid-lg: clamp(var(--space-7), 7vw, var(--space-9));
  --space-fluid-xl: clamp(var(--space-9), 9vw, 112px);
  --container: 1160px;
  --measure: 58ch;
  --gutter: clamp(22px, 5vw, 56px);
  --section-y: var(--space-fluid-xl);
  --radius-sm: 24px;
  --radius-md: 28px;
  --radius-lg: 34px;
  --radius-xl: 38px;
  --radius-pill: 999px;
  --control-height: 50px;
  --logo-nav: 38px;
  --logo-hero: min(180px, 46vw);
  --logo-est: min(132px, 38vw);
  --corner-size: 82px;
  --step-size: 36px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 10% 0%, rgb(215 180 173 / .14), transparent 30rem),
    linear-gradient(180deg, #fcf9f4 0%, var(--bg) 42%, #f7f1e9 100%);
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero,
.section,
.adoption-panel {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

.hero-copy,
.section-heading,
.story > div,
.manuscript-card,
.adoption-panel {
  min-width: 0;
}

.hero { min-height: 82svh; padding: 18px 0 64px; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-fluid-md);
  padding: 8px 0 34px;
  color: var(--muted);
  font-size: .8rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.brand,
.checks span { display: inline-flex; align-items: center; gap: var(--space-2); }
.brand { color: var(--text); font-weight: 600; letter-spacing: .075em; line-height: 1.05; }
.brand-logo { width: var(--logo-nav); height: var(--logo-nav); object-fit: contain; flex: 0 0 auto; }
.nav-links { display: none; gap: var(--space-fluid-md); align-items: center; }
.nav-links a { transition: color .35s ease; }
.nav-links a:hover { color: var(--text); }
.nav a:focus-visible,
.button:focus-visible,
.card-footer a:focus-visible,
.contact-links a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

.hero-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.eyebrow {
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--text);
  font-weight: 600;
  line-height: .98;
  margin: 0;
}
h1 { font-size: clamp(2.9rem, 8vw, 5.85rem); letter-spacing: -.062em; max-width: 11.7ch; text-wrap: balance; }
h2 { font-size: clamp(2.45rem, 6.1vw, 4.05rem); letter-spacing: -.044em; max-width: 13.7ch; text-wrap: balance; }
h3 { font-size: clamp(1.72rem, 2.6vw, 2.05rem); letter-spacing: -.026em; }
.lede,
.story p,
.adoption-panel p {
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  line-height: 1.78;
  max-width: var(--measure);
}
.hero-copy .lede { margin-top: 18px; max-width: 43ch; }
.section-heading h2 + p,
.story h2 + p,
.adoption-panel h2 + p { margin-top: var(--space-fluid-sm); }
.hero-brand-mark { display: none; }
.est-mark { width: 58px; height: auto; object-fit: contain; margin-bottom: 14px; opacity: .58; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; align-items: stretch; }
.button {
  min-height: var(--control-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 28px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  transition: background .5s ease, box-shadow .5s ease, transform .5s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgb(53 47 42 / .08); }
.primary { background: var(--green); color: #fff; border-color: var(--green); }
.ghost { background: rgb(255 253 249 / .74); color: var(--text); }

.hero-frame,
.baby-card,
.manuscript-card,
.adoption-panel {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero-frame {
  position: relative;
  margin: 0;
  padding: 10px;
  border-radius: 34px;
  overflow: hidden;
}
.hero-frame img {
  aspect-ratio: 4 / 4.62;
  border-radius: var(--radius-md);
  filter: brightness(.995) saturate(.9) contrast(.98);
}
.hero-frame figcaption {
  padding: 16px 12px 6px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.65;
  letter-spacing: .02em;
}
.botanical-corner::before {
  content: '';
  position: absolute;
  inset: var(--space-4) auto auto var(--space-4);
  width: var(--corner-size);
  height: var(--corner-size);
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  border-radius: var(--radius-sm) 0 0;
  z-index: 1;
  opacity: .62;
}
.divider {
  width: min(760px, calc(100% - (var(--gutter) * 2)));
  margin: 0 auto var(--space-fluid-md);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--gold);
  justify-content: center;
}
.divider::before,
.divider::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.divider p { color: var(--muted); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }

.section { padding: 96px 0; }
.section-heading { display: grid; gap: 20px; margin-bottom: 50px; }
.section-heading .eyebrow { margin-top: calc(var(--space-1) / 2); }
.cards { display: grid; gap: 28px; align-items: stretch; }
.baby-card { border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .65s ease, box-shadow .65s ease, filter .65s ease; }
.baby-card:hover { transform: translateY(-2px); box-shadow: 0 26px 70px rgb(53 47 42 / .105); filter: brightness(1.01); }
.image-wrap { display: block; aspect-ratio: 4 / 4.35; background: var(--soft); overflow: hidden; }
.image-wrap img,
.gallery-frame img { filter: saturate(.9) contrast(.98); transition: transform .8s ease, filter .8s ease; }
.baby-card:nth-child(2) .image-wrap { aspect-ratio: 4 / 4.62; }
.baby-card:nth-child(3) .image-wrap { aspect-ratio: 4 / 4.08; }

.baby-card:hover .image-wrap img { transform: scale(1.015); filter: saturate(.95) contrast(.99); }
.card-body { padding: 26px 26px 24px; display: flex; flex: 1; flex-direction: column; }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.status {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  color: var(--green);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status.reserved { color: var(--gold); }
.status.sold { color: var(--muted); }
.card-body p,
li { color: var(--muted); line-height: 1.75; }
.card-body p { margin-top: 15px; font-size: .96rem; }
ul { padding-left: var(--space-4); }
ul, dl { margin-bottom: 0; }
.card-body ul { margin: 20px 0 24px; font-size: .92rem; }
.card-footer {
  border-top: 1px solid var(--border);
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  letter-spacing: .01em;
}
.card-footer a { color: var(--green); }
.story { display: grid; gap: clamp(34px, 6vw, 72px); align-items: center; }
.manuscript-card {
  border-radius: var(--radius-lg);
  padding: var(--space-fluid-md);
  background-image: linear-gradient(135deg, rgb(113 131 111 / .09), transparent 42%);
  box-shadow: var(--shadow-soft);
}
.timeline { display: grid; gap: var(--space-fluid-sm); align-items: stretch; }
.timeline-step {
  display: grid;
  grid-template-columns: var(--space-7) 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  background: rgb(255 253 249 / .82);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.timeline-step span {
  display: grid;
  place-items: center;
  width: var(--step-size);
  height: var(--step-size);
  border-radius: var(--radius-pill);
  background: rgb(113 131 111 / .12);
  color: var(--green);
  font-weight: 800;
}
.timeline-step p { margin: 0; color: var(--muted); line-height: 1.75; }
.adoption-panel { margin-bottom: 86px; padding: 58px 58px 62px; border-radius: 38px; text-align: center; }
.adoption-panel p { margin-inline: auto; }
.checks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.checks span,
.contact-links a { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-3); color: var(--green); background: rgb(255 253 249 / .72); }

.detail-hero { min-height: auto; }
.detail-section { padding-top: var(--space-6); }
.detail-grid,
.gallery-grid { display: grid; gap: var(--space-6); align-items: start; }
.facts { display: grid; gap: 0; margin: var(--space-5) 0 0; }
.facts div { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
.facts dt { color: var(--green); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.facts dd { margin: var(--space-1) 0 0; color: var(--muted); line-height: 1.65; }
.gallery-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 4.45;
  padding: var(--space-2);
}
.gallery-frame img { border-radius: calc(var(--radius-lg) - var(--space-2)); }
.manuscript-card h3 + ul,
.manuscript-card h3 + p { margin-top: var(--space-3); }
.manuscript-card h3:not(:first-child) { margin-top: var(--space-6); }
.signature { width: min(260px, 70vw); height: auto; object-fit: contain; margin-top: var(--space-5); }
.contact-links { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.contact-links a { font-weight: 700; }

#babies { padding-top: 82px; }
#story { padding-top: 98px; padding-bottom: 88px; }
#reserve { padding-top: 84px; padding-bottom: 68px; }
#about { padding-top: 96px; padding-bottom: 108px; }
#about .manuscript-card { align-self: start; margin-top: 10px; }
.social-card { max-width: 430px; justify-self: end; }
.detail-hero .hero-grid { align-items: end; }
.detail-section { padding-top: 72px; }

@media (max-width: 759px) {
  .hero {
    min-height: auto;
    padding-top: 10px;
    padding-bottom: 40px;
  }
  .nav {
    align-items: center;
    padding-bottom: 18px;
  }
  .brand { max-width: 15rem; }
  .hero-grid { gap: 22px; }
  .hero-copy { max-width: 42rem; }
  .hero-brand-mark,
  .est-mark { display: none; }
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .lede { text-align: left; margin-inline: 0; }
  h1 {
    max-width: 12.8ch;
    font-size: clamp(2.48rem, 11vw, 3.55rem);
    line-height: .96;
  }
  h2 {
    max-width: 15.8ch;
    font-size: clamp(2.42rem, 9.2vw, 3.2rem);
    line-height: .95;
  }
  .lede,
  .story p,
  .adoption-panel p { max-width: 34rem; }
  .hero-copy .lede { margin-top: 13px; max-width: 31rem; }
  .hero-actions { margin-top: 20px; }
  .hero-frame {
    width: min(100%, 356px);
    margin-inline: 0 auto;
    padding: 8px;
    border-radius: var(--radius-lg);
  }
  .hero-frame img {
    aspect-ratio: 4 / 3.88;
    border-radius: var(--radius-md);
  }
  .hero-frame figcaption { padding: 10px 10px 4px; }
  .botanical-corner::before {
    width: 54px;
    height: 54px;
  }
  .divider { margin-bottom: var(--space-5); }
  .section { padding: 58px 0; }
  .section-heading {
    max-width: 34rem;
    margin-inline: auto;
    margin-bottom: 34px;
    text-align: center;
    justify-items: center;
  }
  .cards { gap: 22px; }
  .image-wrap { aspect-ratio: 4 / 3.58; }
  .baby-card:nth-child(2) .image-wrap { aspect-ratio: 4 / 3.86; }
  .baby-card:nth-child(3) .image-wrap { aspect-ratio: 4 / 3.42; }

  .card-body { padding: 23px 22px 22px; }
  .card-title { gap: var(--space-3); }
  .card-body p { margin-top: var(--space-3); }
  .card-body ul { margin: var(--space-4) 0 var(--space-5); }
  .card-footer { gap: var(--space-4); }
  .story {
    gap: 24px;
    align-items: start;
  }
  .story > div {
    max-width: 34rem;
    margin-inline: auto;
    text-align: center;
  }
  .story > div p { margin-inline: auto; }
  .manuscript-card { padding: 24px; }
  .timeline { gap: var(--space-4); }
  .timeline-step { grid-template-columns: calc(var(--step-size) + var(--space-1)) 1fr; }
  .adoption-panel {
    margin-bottom: 58px;
    padding: 40px 24px;
  }
  .checks { gap: var(--space-2); }
  .signature { margin-inline: auto; }
  .gallery-grid { gap: var(--space-5); }
  #babies,
  #story,
  #reserve,
  #about { padding-top: 58px; padding-bottom: 58px; }
  #reserve { padding-bottom: 44px; }
  #about .manuscript-card { margin-top: 0; }
  .social-card { max-width: none; justify-self: stretch; }
  .gallery-frame { aspect-ratio: 4 / 3.9; }
  .checks,
  .contact-links { justify-content: center; }
}

@media (min-width: 760px) {
  .nav-links { display: flex; }
  .hero { padding-bottom: 64px; }
  .hero-grid,
  .story { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .hero-actions { flex-direction: row; align-items: center; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .section-heading { grid-template-columns: minmax(142px, .2fr) minmax(0, 1fr); align-items: start; }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {

  .nav { padding-bottom: 30px; }
  .brand-logo { width: 42px; height: 42px; }
  .hero-copy { padding-top: 0; }
  .section-heading h2 { max-width: 12.8ch; }
  #babies .section-heading h2 { max-width: 15ch; }
  .cards { gap: 32px; }
  .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(380px, .74fr); min-height: min(560px, calc(100svh - 150px)); }
  .hero-frame { max-width: 424px; justify-self: end; transform: none; }
  .detail-hero .hero-frame { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}