:root {
  --sky: #7cc1e7;
  --sky-deep: #3e69ab;
  --butter: #f2d17e;
  --matcha: #acad79;
  --sage: #43593b;
  --espresso: #58402e;
  --paper: #fcfaf4;
  --paper-edge: rgba(51, 47, 40, 0.08);
  --ink: #181818;
  --soft-ink: #3d4348;
  --shadow: 0 28px 70px rgba(28, 40, 52, 0.16);
  --font-display: "Horizon", "League Spartan", "Montserrat", "Arial Narrow",
    sans-serif;
  --font-poiret: "Poiret One", cursive;
  --font-body: "Manrope", sans-serif;
  --font-serif: "Cormorant Garamond", serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 18%, rgba(242, 209, 126, 0.42), transparent 16%),
    radial-gradient(circle at 85% 14%, rgba(255, 255, 255, 0.38), transparent 14%),
    linear-gradient(180deg, #9dd6f4 0%, #86c8ee 32%, #b5d0a4 67%, #7b9365 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto auto 0 0;
  width: 38vw;
  height: 86vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background:
    linear-gradient(68deg, transparent 46%, rgba(67, 89, 59, 0.95) 47%, transparent 48%) 8% 12% /
      58% 16% no-repeat,
    linear-gradient(42deg, transparent 47%, rgba(67, 89, 59, 0.95) 48%, transparent 49%) 22% 22% /
      58% 14% no-repeat,
    linear-gradient(86deg, transparent 46%, rgba(88, 64, 46, 0.86) 47%, transparent 48%) 10% 34% /
      72% 14% no-repeat,
    linear-gradient(24deg, transparent 47%, rgba(67, 89, 59, 0.92) 48%, transparent 49%) 18% 44% /
      64% 14% no-repeat,
    linear-gradient(74deg, transparent 46%, rgba(67, 89, 59, 0.92) 47%, transparent 48%) 8% 56% /
      62% 14% no-repeat;
  transform-origin: bottom left;
}

body::after {
  inset: auto 0 0 auto;
  transform: scaleX(-1);
}

.page-shell {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 2.2rem 1.1rem 4rem;
}

.intro-panel {
  max-width: 560px;
  margin: 0 0 1.8rem;
  padding: 1.2rem 1rem 0.25rem;
  color: #fffdf8;
}

.intro-script {
  margin: 0;
  font-family: var(--font-poiret);
  font-size: clamp(1.4rem, 2.7vw, 2.1rem);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.intro-title {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.intro-copy {
  max-width: 430px;
  margin: 0.8rem 0 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: rgba(255, 253, 248, 0.92);
}

.board {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr 0.95fr;
  gap: 1.15rem;
  align-items: start;
}

.panel {
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: rise-in 820ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  top: 0.8rem;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, #c6c9cf 0 58%, #9aa1ab 59% 78%, #6e7680 79%);
  box-shadow: 0 3px 8px rgba(36, 43, 49, 0.22);
  z-index: 3;
}

.panel::before {
  left: 1.05rem;
}

.panel::after {
  right: 1.05rem;
}

.panel:nth-child(1) {
  animation-delay: 90ms;
}

.panel:nth-child(2) {
  animation-delay: 220ms;
}

.panel:nth-child(3) {
  animation-delay: 350ms;
}

.panel-inner {
  position: relative;
  padding: 1.6rem 1.45rem 1.85rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)),
    var(--paper);
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow);
  clip-path: polygon(
    0 18px,
    18px 0,
    calc(100% - 16px) 0,
    100% 20px,
    100% calc(100% - 14px),
    calc(100% - 20px) 100%,
    16px 100%,
    0 calc(100% - 18px)
  );
}

.panel-story .panel-inner {
  overflow: hidden;
  isolation: isolate;
  transform: rotate(-1.1deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0)),
    var(--paper);
}

.panel-program .panel-inner {
  transform: rotate(0.9deg);
}

.panel-details .panel-inner {
  transform: rotate(-0.7deg);
}

.panel-story .panel-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background:
    linear-gradient(180deg, rgba(41, 79, 139, 0.46), rgba(41, 79, 139, 0.66)),
    url("./we.png") center center / cover no-repeat;
  z-index: 0;
}

.panel-story .panel-inner > * {
  position: relative;
  z-index: 1;
}

.card-kicker,
.section-script,
.countdown-script {
  margin: 0;
  font-family: var(--font-poiret);
  letter-spacing: 0.04em;
}

.card-kicker {
  padding-top: 22.5rem;
  text-align: center;
  font-size: clamp(2.04rem, 3.6vw, 2.76rem);
  color: #ffffff;
}

.couple-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.45rem 0 1.4rem;
  align-items: end;
  padding: 1.2rem 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.92);
  clip-path: polygon(
    0 16px,
    18px 0,
    calc(100% - 14px) 0,
    100% 18px,
    100% calc(100% - 12px),
    calc(100% - 16px) 100%,
    14px 100%,
    0 calc(100% - 16px)
  );
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 18px 34px rgba(41, 48, 55, 0.12);
}

.portrait-card {
  margin: 0;
  padding: 0.7rem 0.7rem 0.9rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(42, 48, 53, 0.14);
}

.portrait-card:first-child {
  transform: rotate(-3deg) translateY(0.6rem);
}

.portrait-card:last-child {
  transform: rotate(2.8deg);
}

.portrait-card img {
  display: block;
  width: 100%;
  aspect-ratio: 0.84 / 1;
  object-fit: cover;
  background: #e7edf3;
}

.portrait-card figcaption {
  margin-top: 0.7rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calendar-block {
  margin-top: 1.85rem;
  padding: 1.2rem 1rem 1.05rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  clip-path: polygon(
    0 14px,
    16px 0,
    calc(100% - 14px) 0,
    100% 16px,
    100% calc(100% - 12px),
    calc(100% - 18px) 100%,
    14px 100%,
    0 calc(100% - 14px)
  );
  box-shadow: 0 18px 34px rgba(43, 47, 51, 0.08);
}

.date-label {
  margin: 0 0 0.95rem;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color: #23334f;
}

.weekdays,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem 0.3rem;
}

.weekdays {
  margin-bottom: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.month-grid {
  font-size: 1rem;
}

.month-grid span {
  display: grid;
  place-items: center;
  min-height: 2rem;
}

.muted {
  color: rgba(24, 24, 24, 0.34);
}

.day-mark {
  position: relative;
  width: 2.7rem;
  height: 2.4rem;
  margin: 0.4rem auto 0;
  display: block;
}

.day-mark::before,
.day-mark::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1.4rem;
  height: 2.05rem;
  background: var(--sky-deep);
  border-radius: 1.4rem 1.4rem 0 0;
}

.day-mark::before {
  left: 1.35rem;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.day-mark::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.heart-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  transform: translateY(0.1rem);
}

.story-copy {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(24, 24, 24, 0.08);
  background: rgba(252, 250, 244, 0.96);
}

.story-copy p,
.timeline-item p,
.venue-card p,
.details-copy,
.details-note p,
.detail-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.58;
  color: var(--soft-ink);
}

.paper-heading {
  margin-bottom: 1.4rem;
}

.section-script {
  font-size: 1.3rem;
  color: #5b6981;
}

.paper-heading h2,
.venue-card h2,
.details-note h2 {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 3.6rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.timeline {
  position: relative;
  display: grid;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.5rem;
  left: 4.3rem;
  width: 1px;
  border-left: 2px dashed rgba(62, 105, 171, 0.24);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 3.7rem 1fr;
  gap: 1rem;
  align-items: start;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  left: 4rem;
  width: 8px;
  height: 8px;
  background: #b12441;
  border-radius: 50%;
}

.time {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--sky-deep);
}

.timeline-item h3 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.venue-card,
.countdown-card,
.details-note {
  position: relative;
  padding: 1.25rem 1.15rem 1.35rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(24, 24, 24, 0.08);
  box-shadow: 0 18px 32px rgba(39, 43, 48, 0.08);
}

.venue-card {
  transform: rotate(-1.5deg);
}

.venue-card h2 {
  color: var(--sage);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  background: var(--sky-deep);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 160ms ease, background 160ms ease;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: #2e4f86;
  transform: translateY(-2px);
}

.details-copy {
  margin-bottom: 1.2rem;
}

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.45rem;
}

.swatch {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--tone);
  box-shadow: 0 10px 24px rgba(29, 38, 43, 0.15);
  border: 4px solid rgba(255, 255, 255, 0.82);
}

.countdown-card {
  margin-bottom: 1.4rem;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(124, 193, 231, 0.25), transparent 28%),
    rgba(255, 255, 255, 0.84);
}

.countdown-script {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--sky-deep);
  text-align: center;
}

.countdown {
  margin-top: 0.85rem;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  text-align: center;
}

.countdown-grid div {
  padding: 0.6rem 0.35rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 18px;
}

.countdown-grid strong {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.countdown-grid span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #55606a;
}

.details-note {
  transform: rotate(1.5deg);
}

.details-note h2 {
  color: var(--sky-deep);
}

.details-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.95rem;
}

.detail-card {
  padding: 1rem 0.95rem;
  border-radius: 20px;
  background: rgba(124, 193, 231, 0.12);
  border: 1px solid rgba(62, 105, 171, 0.12);
}

.detail-card:nth-child(2) {
  background: rgba(172, 173, 121, 0.18);
}

.detail-card h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  .board {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin: 0 auto;
  }

  .intro-panel {
    margin: 0 auto 1.5rem;
    text-align: center;
  }

  .intro-copy {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 720px) {
  body::before,
  body::after {
    width: 56vw;
    height: 52vh;
    opacity: 0.22;
  }

  .page-shell {
    padding: 1.25rem 0.75rem 3rem;
  }

  .intro-panel {
    padding: 0.8rem 0.15rem 0.2rem;
  }

  .intro-title {
    font-size: clamp(2.4rem, 11vw, 4rem);
  }

  .panel-inner {
    padding: 1.2rem 0.95rem 1.35rem;
  }

  .panel-story .panel-inner::before {
    height: 43%;
  }

  .panel::before,
  .panel::after {
    width: 13px;
    height: 13px;
    top: 0.65rem;
  }

  .panel::before {
    left: 0.8rem;
  }

  .panel::after {
    right: 0.8rem;
  }

  .panel-story .panel-inner,
  .panel-program .panel-inner,
  .panel-details .panel-inner {
    transform: none;
  }

  .card-kicker {
    padding-top: 17.4rem;
    font-size: 1.75rem;
  }

  .couple-gallery {
    gap: 0.55rem;
    margin-top: 1.25rem;
    padding: 0.8rem 0.55rem 0.75rem;
  }

  .portrait-card {
    padding: 0.45rem 0.45rem 0.65rem;
  }

  .portrait-card:first-child {
    transform: rotate(-2deg) translateY(0.35rem);
  }

  .portrait-card:last-child {
    transform: rotate(1.7deg);
  }

  .portrait-card figcaption {
    margin-top: 0.5rem;
    font-size: 0.82rem;
  }

  .calendar-block {
    margin-top: 1.45rem;
    padding: 0.95rem 0.55rem 0.9rem;
  }

  .date-label {
    font-size: 1.7rem;
  }

  .weekdays {
    gap: 0.45rem 0.2rem;
    font-size: 0.72rem;
  }

  .month-grid {
    gap: 0.45rem 0.2rem;
    font-size: 0.82rem;
  }

  .month-grid span {
    min-height: 1.75rem;
  }

  .day-mark {
    width: 2.2rem;
    height: 1.95rem;
    margin-top: 0.34rem;
  }

  .day-mark::before,
  .day-mark::after {
    width: 1.15rem;
    height: 1.72rem;
    border-radius: 1.15rem 1.15rem 0 0;
  }

  .day-mark::before {
    left: 1.08rem;
  }

  .heart-number {
    font-size: 0.8rem;
    transform: translateY(0.08rem);
  }

  .timeline::before {
    left: 3.7rem;
  }

  .timeline-item {
    grid-template-columns: 3.15rem 1fr;
    gap: 0.85rem;
  }

  .timeline-item::before {
    left: 3.44rem;
  }

  .swatch {
    width: 52px;
    height: 52px;
  }

  .details-list {
    gap: 0.7rem;
  }

  .detail-card {
    padding: 0.85rem 0.8rem;
  }

  .detail-card h3 {
    font-size: 0.9rem;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}