@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap");

:root {
  --ink: #25201d;
  --muted: #766a65;
  --paper: #fffaf6;
  --pink: #f3b4b7;
  --pink-deep: #c96071;
  --yellow: #f8df80;
  --yellow-soft: #fff2b8;
  --lilac: #e8dff0;
  --line: rgba(37, 32, 29, 0.14);
  --shadow: 0 24px 60px rgba(71, 42, 42, 0.14);
  --radius: 5px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  line-height: 1.55;
}

body::selection { background: var(--yellow); }

img { display: block; max-width: 100%; }

a { color: inherit; }

button, input { font: inherit; }

.section-kicker {
  font-family: "DM Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(255, 250, 246, 0.88);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 15px clamp(18px, 5vw, 64px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}

.brand { text-decoration: none; }

.brand span {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.brand i { color: var(--pink-deep); font-style: normal; }

.brand small {
  color: var(--muted);
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 4px; }

.nav-links a {
  border-bottom: 2px solid transparent;
  font-size: 0.82rem;
  padding: 7px 10px;
  text-decoration: none;
}

.nav-links a:hover, .nav-links a:focus-visible {
  border-color: var(--pink-deep);
  outline: none;
}

.hero {
  align-items: end;
  display: grid;
  min-height: 92svh;
  overflow: hidden;
  padding: 130px clamp(18px, 6vw, 80px) 72px;
  position: relative;
}

.hero-image, .hero-tint {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.hero-image { object-fit: cover; object-position: center 52%; }

.hero-tint {
  background: linear-gradient(90deg, rgba(25, 20, 19, 0.7), rgba(25, 20, 19, 0.22) 66%, rgba(25, 20, 19, 0.02));
}

.hero-content { color: #fffaf6; max-width: 760px; position: relative; z-index: 1; }

.eyebrow { margin: 0 0 16px; }

.hero h1, .section-heading h2, .milestone-intro h2, .find-grid h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.02;
  margin: 0;
}

.hero h1 {
  font-size: clamp(3.2rem, 9vw, 7.8rem);
  letter-spacing: -0.04em;
  max-width: 850px;
}

.hero h1 em { color: var(--yellow); font-style: italic; }

.hero-copy {
  font-size: clamp(1rem, 2vw, 1.23rem);
  margin: 24px 0 0;
  max-width: 640px;
}

.hero-stamp {
  align-items: center;
  background: var(--yellow);
  border-radius: 50%;
  bottom: 70px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 116px;
  justify-content: center;
  line-height: 0.9;
  position: absolute;
  right: clamp(22px, 8vw, 120px);
  transform: rotate(8deg);
  width: 116px;
  z-index: 1;
}

.hero-stamp span { font-family: "Playfair Display", Georgia, serif; font-size: 2.9rem; }
.hero-stamp small { font-family: "DM Mono", monospace; font-size: 0.62rem; margin-top: 8px; }

.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  display: inline-flex;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 10px;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid rgba(201, 96, 113, 0.45); outline-offset: 3px; }
.button-dark { background: var(--ink); color: var(--paper); margin-top: 28px; }
.button-dark:hover { background: #000; }
.button-pink { background: var(--pink); color: var(--ink); }
.button-pink:hover { background: #ed9da5; }

.section-inner { margin: 0 auto; max-width: var(--max-width); }

.day-section { background: var(--yellow-soft); padding: clamp(62px, 9vw, 120px) clamp(18px, 6vw, 80px); }

.day-grid { display: grid; gap: 70px; grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1fr); }

.section-kicker { color: var(--pink-deep); margin: 0 0 14px; }

.section-heading h2, .milestone-intro h2, .find-grid h2 { font-size: clamp(2.7rem, 6vw, 5.6rem); letter-spacing: -0.04em; }

.section-heading > p:last-child, .find-grid > div > p:last-of-type {
  color: var(--muted);
  font-size: 1.06rem;
  margin: 24px 0 0;
  max-width: 470px;
}

.detail-list { border-top: 1px solid var(--line); }
.day-details { min-width: 0; }
.calendar-menu { margin-top: 24px; width: min(100%, 360px); }
.calendar-link { cursor: pointer; list-style: none; margin-top: 0; width: 100%; }
.calendar-link::-webkit-details-marker { display: none; }
.calendar-link::after { content: "+"; font-family: "DM Mono", monospace; margin-left: auto; }
.calendar-menu[open] .calendar-link::after { content: "\2212"; }
.calendar-options {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  margin-top: 8px;
}
.calendar-options a {
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 14px 16px;
  text-decoration: none;
}
.calendar-options a:last-child { border-bottom: 0; }
.calendar-options a:hover, .calendar-options a:focus-visible {
  background: var(--pink);
  outline: none;
}

.detail-row {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 18px 0;
}

.detail-row span { color: var(--muted); font-family: "DM Mono", monospace; font-size: 0.68rem; text-transform: uppercase; }
.detail-row strong { font-size: 0.96rem; text-align: right; }

.milestones-section { background: var(--paper); padding: clamp(64px, 9vw, 126px) clamp(18px, 6vw, 80px); }

.milestone-intro { display: flex; flex-direction: column; gap: 30px; }
.milestone-intro-heading { max-width: 900px; }
.milestone-intro-copy { color: var(--muted); font-size: 1.08rem; max-width: 720px; }
.milestone-intro-copy > p:first-child { margin: 0; }
.milestone-intro-copy .payment-link {
  background: var(--pink-deep);
  box-shadow: 0 14px 30px rgba(151, 56, 74, 0.24);
  color: #fffaf6;
  font-size: 1.08rem;
  margin-top: 28px;
  min-height: 64px;
  padding: 18px 32px;
}
.milestone-intro-copy .payment-link:hover { background: #ad4659; }
.monitor-note { color: var(--muted); font-size: 0.82rem; margin: 18px 0 0; }

.unified-progress {
  align-items: center;
  display: grid;
  gap: 18px;
  grid-template-columns: 150px minmax(0, 1fr) 160px;
  margin: 64px 0 24px;
}
.unified-progress-object { align-items: center; display: flex; gap: 10px; }
.unified-progress-object img { height: 48px; object-fit: contain; width: 62px; }
.unified-progress-object span { font-family: "DM Mono", monospace; font-size: 0.63rem; line-height: 1.25; text-transform: uppercase; }
.unified-progress-bed { justify-content: flex-end; }
.unified-progress-track { background: rgba(37, 32, 29, 0.13); height: 10px; overflow: hidden; }
.unified-progress-track span { background: var(--pink-deep); display: block; height: 100%; transition: width 500ms ease; width: 0; }

.milestone-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.milestone-card { border: 1px solid var(--line); display: grid; grid-template-rows: 310px auto; min-width: 0; }
.milestone-bike { background: var(--pink); }
.milestone-bed { background: var(--yellow); }
.milestone-image-wrap { align-items: center; display: flex; justify-content: center; overflow: hidden; position: relative; }
.milestone-image-wrap img { height: 100%; object-fit: contain; width: 100%; }
.milestone-bike .milestone-image-wrap img { padding: 26px; }
.milestone-bed .milestone-image-wrap img { padding: 20px; }
.milestone-copy { padding: 24px; }
.milestone-number { font-family: "DM Mono", monospace; font-size: 0.7rem; letter-spacing: 0.05em; }
.milestone-copy h3 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; margin: 14px 0 8px; }
.milestone-copy p { font-size: 0.9rem; margin: 0 0 22px; max-width: 350px; }
.milestone-status { display: block; font-size: 0.72rem; margin-top: 10px; }

.find-section { background: #f5eee9; padding: clamp(64px, 9vw, 120px) clamp(18px, 6vw, 80px); }
.find-grid { align-items: center; display: grid; gap: 70px; grid-template-columns: minmax(0, 0.8fr) minmax(300px, 1.2fr); }
.map-image { border: 1px solid var(--line); height: auto; object-fit: cover; width: 100%; }

.site-footer { align-items: center; background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; padding: 24px clamp(18px, 6vw, 80px); }
.site-footer p { font-family: "DM Mono", monospace; font-size: 0.7rem; margin: 0; text-transform: uppercase; }
.site-footer a { font-size: 0.82rem; text-decoration: none; }

@media (max-width: 820px) {
  .hero-stamp { bottom: 30px; height: 88px; right: 24px; width: 88px; }
  .hero-stamp span { font-size: 2.2rem; }
  .hero-stamp small { font-size: 0.5rem; margin-top: 5px; }
  .day-grid, .milestone-intro, .find-grid { gap: 38px; grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 116px; }
  .site-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .nav-links { width: 100%; }
  .nav-links a { flex: 1; padding-left: 0; padding-right: 8px; }
  .hero { min-height: 92svh; padding-top: 170px; }
  .hero-tint { background: linear-gradient(90deg, rgba(25, 20, 19, 0.7), rgba(25, 20, 19, 0.28)); }
  .hero h1 { font-size: clamp(3.2rem, 16vw, 5rem); }
  .hero-stamp { bottom: 24px; }
  .button { width: 100%; }
  .unified-progress { gap: 10px; grid-template-columns: 1fr; margin-top: 46px; }
  .unified-progress-object, .unified-progress-bed { justify-content: flex-start; }
  .unified-progress-bed { order: 3; }
  .milestone-grid { grid-template-columns: 1fr; }
  .milestone-card { grid-template-rows: 265px auto; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}