/* Final typography and spacing pass. Loaded last on purpose. */
:root {
  --display: "Cormorant Garamond", Georgia, serif;
  --utility: "Manrope", Arial, sans-serif;
  --text: #34251d;
  --accent: #a65f46;
}

body {
  color: var(--text);
  font-family: var(--utility);
}

.kicker {
  margin: 0 0 18px;
  font: 600 9px/1.25 var(--utility);
  letter-spacing: .24em;
  text-transform: uppercase;
}

h2 {
  font: 500 clamp(52px, 7vw, 74px)/.94 var(--display);
  letter-spacing: -.035em;
}

h2 em {
  font-style: italic;
  font-weight: 400;
}

.body-copy {
  font: 400 19px/1.62 var(--display);
}

main .kicker,
.venue-image-details .venue-frame > small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

main .kicker::before,
main .kicker::after,
.venue-image-details .venue-frame > small::before,
.venue-image-details .venue-frame > small::after {
  content: "";
  flex: 0 1 42px;
  height: 1px;
  background: currentColor;
  opacity: .38;
}

/* Cover */
.hero {
  height: 70svh;
  min-height: 550px;
}

.hero-copy {
  top: 59%;
  width: min(88%, 760px);
}

.hero-copy .kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(100%, 390px);
  margin: 0 auto 28px;
  color: #2d1f18;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-shadow: 0 1px 12px rgba(238, 231, 220, .95);
}

.hero-copy .kicker::before,
.hero-copy .kicker::after {
  content: "";
  flex: 0 1 58px;
  height: 1px;
  background: rgba(52, 37, 29, .5);
}

.hero-copy h1 {
  margin: 0;
  color: var(--text);
  font: 500 clamp(82px, 11.5vw, 126px)/.68 var(--display);
  letter-spacing: -.06em;
  text-shadow: 0 2px 20px rgba(238, 231, 220, .5);
}

.hero-copy h1 span,
.hero-copy h1 i {
  display: block;
}

.hero-copy h1 i {
  margin: .08em 0 .04em;
  font-size: .42em;
  font-style: italic;
  font-weight: 400;
  line-height: .55;
}

/* Invitation and date */
.invitation {
  overflow: hidden;
  padding-top: 104px;
  padding-bottom: 82px;
}

.invitation > * {
  position: relative;
  z-index: 1;
}

.invitation::before,
.invitation::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 38px;
  width: 270px;
  height: calc(100% - 76px);
  background: url('assets/green-botanical-border.jpeg') center / cover no-repeat;
  mix-blend-mode: multiply;
  filter: sepia(.12) saturate(.62) contrast(.94) brightness(1.04);
  opacity: .3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events: none;
}

.invitation::before {
  right: -72px;
}

.invitation::after {
  left: -72px;
  right: auto;
  transform: scaleX(-1);
}

.invitation > .kicker {
  margin-bottom: 23px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
}

.invitation h2 {
  max-width: 700px;
  margin: 0 auto;
  font-size: clamp(44px, 6vw, 62px);
  line-height: .98;
}

.invitation .body-copy {
  max-width: 520px;
  margin: 30px auto 26px;
}

.invitation .lace-calendar {
  width: min(100%, 440px);
  margin-top: 17px;
  margin-bottom: 13px;
}

.invitation .calendar-paper {
  padding: 18px 8px 14px;
}

.calendar-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 14px;
  color: var(--text);
}

.calendar-month em,
.calendar-month b {
  font: italic 500 19px/1 var(--display);
  letter-spacing: 0;
}

.invitation .calendar-grid {
  align-items: end;
  border: 0;
}

.invitation .calendar-day {
  padding: 4px 4px 0;
}

.invitation .calendar-day + .calendar-day {
  border-left: 0;
}

.invitation .calendar-day span {
  margin: 0 0 5px;
  padding: 0;
  border: 0;
  font: 500 7px/1 var(--utility);
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .66;
}

.invitation .calendar-day strong {
  margin: 0;
  color: var(--text);
  font: 400 57px/.82 var(--display);
  letter-spacing: -.055em;
  opacity: .48;
}

.invitation .calendar-day-main strong {
  color: var(--accent);
  font-size: 82px;
  font-weight: 500;
  line-height: .72;
  opacity: 1;
}

/* Hilton */
.venue-image-details .venue-frame {
  padding: 32px;
}

.venue-image-details .venue-frame > small {
  position: relative;
  z-index: 2;
  width: min(220px, 80%);
  color: rgba(255, 250, 241, .96);
  font: 600 8px/1 var(--utility);
  letter-spacing: .24em;
  text-shadow: 0 2px 12px rgba(29, 18, 12, .9);
}

.venue-image-details .venue-frame > small::before,
.venue-image-details .venue-frame > small::after {
  flex: 1 1 auto;
  opacity: .88;
}

.venue-image-details .venue-frame > strong {
  margin: 28px 0 25px;
  font: 500 64px/.8 var(--display);
  letter-spacing: -.035em;
}

.venue-image-details .venue-frame > strong em {
  font-size: .58em;
  font-style: italic;
  font-weight: 400;
}

.venue-arrival {
  margin-bottom: 13px;
}

.venue-image-details .venue-frame p {
  margin-bottom: 20px;
  font-size: 16px;
}

/* Program */
.timeline {
  padding-top: 94px;
  padding-bottom: 34px;
}

.timeline-content {
  gap: 42px;
  margin-top: 58px;
}

.timeline-content .timeline-list article {
  min-height: 136px;
}

.timeline-content .timeline-list time {
  font-size: 18px;
  font-style: italic;
}

.timeline-content .timeline-list h3 {
  margin-bottom: 6px;
  font: 500 28px/1 var(--display);
}

.timeline-content .timeline-list p {
  max-width: 310px;
  font-size: 15px;
  line-height: 1.48;
}

@media (min-width: 701px) {
  .timeline-photo {
    min-height: 0;
    height: 408px;
    margin-top: 0;
  }

  .timeline-photo img {
    transform: scale(1.38);
    transform-origin: 52% 76%;
    object-position: 52% 76%;
  }
}

/* Dress code intentionally follows the program closely. */
.dresscode {
  padding: 34px 9% 98px;
}

.dress-copy h2 {
  margin-bottom: 25px;
}

.dress-copy .body-copy {
  max-width: 560px;
  margin-top: 0;
  margin-bottom: 30px;
}

.dress-copy .body-copy strong em {
  color: #7c4939;
  font-weight: 500;
}

.swatches {
  margin: 0 auto;
}

.palette-label {
  max-width: 620px;
  margin: 17px auto 0;
  font: 500 7px/1.7 var(--utility);
  letter-spacing: .11em;
}

/* Details */
.wish {
  min-height: 480px;
  padding-top: 104px;
  padding-bottom: 82px;
}

.wish::before,
.wish::after {
  top: 38px;
  height: calc(100% - 76px);
  opacity: .3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.wish h2 {
  font-size: 62px;
}

.wish .detail-copy {
  margin-top: 27px;
  font-size: 19px;
  line-height: 1.58;
}

.wish > p.organizer-contact {
  margin-top: 21px;
  font-size: 15px;
  line-height: 1.55;
}

/* RSVP */
.rsvp {
  padding-top: 108px;
  padding-bottom: 108px;
  gap: 8%;
}

.rsvp-heading .kicker {
  margin-bottom: 20px;
}

.rsvp-heading h2 {
  font-size: clamp(50px, 6.2vw, 68px);
}

.rsvp-heading > p:last-child {
  margin-top: 27px;
  font-size: 17px;
  line-height: 1.55;
}

form > label,
fieldset {
  margin-bottom: 27px;
}

form > label > small {
  margin-left: 7px;
  color: rgba(52, 37, 29, .58);
  font: 400 7px/1 var(--utility);
  letter-spacing: .06em;
  text-transform: none;
}

form button {
  margin-top: 5px;
  padding: 19px;
  font-size: 8px;
  font-weight: 600;
}

/* Closing */
footer {
  padding-top: 154px;
  padding-bottom: 52px;
}

footer > div {
  font: 500 64px/1 var(--display);
  letter-spacing: -.03em;
}

footer > p {
  margin-top: 12px;
  font: italic 23px/1.2 var(--display);
}

footer > small {
  font: 500 8px/1 var(--utility);
  letter-spacing: .2em;
}

@media (max-width: 700px) {
  .paper-section,
  .chocolate-section {
    padding-right: 24px;
    padding-left: 24px;
  }

  h2 {
    font-size: 48px;
  }

  .hero {
    height: 66svh;
    min-height: 500px;
  }

  .hero-copy {
    top: 59%;
    width: 94%;
  }

  .hero-copy .kicker {
    gap: 11px;
    width: min(92%, 320px);
    margin-bottom: 25px;
    font-size: 10px;
    letter-spacing: .23em;
  }

  .hero-copy .kicker::before,
  .hero-copy .kicker::after {
    flex-basis: 36px;
  }

  .hero-copy h1 {
    font-size: clamp(60px, 17vw, 72px);
    line-height: .66;
  }

  .hero-copy h1 i {
    margin-top: .1em;
    margin-bottom: .07em;
  }

  .invitation {
    padding-top: 76px;
    padding-bottom: 62px;
  }

  .invitation::before,
  .invitation::after {
    top: 28px;
    width: 170px;
    height: calc(100% - 56px);
    opacity: .25;
  }

  .invitation::before {
    right: -78px;
  }

  .invitation::after {
    left: -78px;
  }

  .invitation > .kicker {
    margin-bottom: 20px;
    font-size: 11px;
    line-height: 1.4;
  }

  .invitation h2 {
    font-size: clamp(36px, 10.5vw, 42px);
    line-height: 1;
  }

  .invitation .body-copy {
    margin: 25px auto 22px;
    font-size: 18px;
    line-height: 1.58;
  }

  .invitation .lace-calendar {
    width: 94%;
  }

  .invitation .calendar-paper {
    padding: 16px 3px 12px;
  }

  .calendar-month {
    gap: 16px;
    margin-bottom: 13px;
  }

  .calendar-month em {
    font-size: 18px;
  }

  .calendar-month b {
    font-size: 18px;
  }

  .invitation .calendar-day span {
    font-size: 6px;
    letter-spacing: .1em;
  }

  .invitation .calendar-day strong {
    font-size: 47px;
  }

  .invitation .calendar-day-main strong {
    font-size: 68px;
  }

  main .kicker,
  .venue-image-details .venue-frame > small {
    gap: 10px;
  }

  main .kicker::before,
  main .kicker::after,
  .venue-image-details .venue-frame > small::before,
  .venue-image-details .venue-frame > small::after {
    flex-basis: 28px;
  }

  .venue-image-details {
    height: 500px;
  }

  .venue-image-details .venue-frame {
    inset: 9% 7%;
    padding: 24px 18px;
  }

  .venue-image-details .venue-frame > strong {
    margin: 25px 0 23px;
    font-size: 52px;
  }

  .venue-image-details .venue-frame p {
    font-size: 15px;
  }

  .timeline {
    padding-top: 72px;
    padding-bottom: 22px;
  }

  .timeline-content {
    gap: 37px;
    margin-top: 42px;
  }

  .timeline-photo {
    width: 100%;
    height: 285px;
  }

  .timeline-content .timeline-list article {
    min-height: 146px;
  }

  .timeline-content .timeline-list h3 {
    font-size: 27px;
  }

  .timeline-content .timeline-list p {
    font-size: 15px;
  }

  .dresscode {
    padding-top: 34px;
    padding-bottom: 76px;
  }

  .dress-copy h2 {
    margin-bottom: 22px;
    font-size: 50px;
  }

  .dress-copy .body-copy {
    margin-bottom: 27px;
    font-size: 17px;
    line-height: 1.58;
  }

  .palette-label {
    margin-top: 15px;
    line-height: 1.65;
  }

  .wish {
    min-height: 440px;
    padding: 76px 30px 62px;
  }

  .wish::before,
  .wish::after {
    top: 28px;
    height: calc(100% - 56px);
    opacity: .25;
  }

  .wish h2 {
    font-size: 52px;
  }

  .wish .detail-copy {
    margin-top: 25px;
    font-size: 18px;
  }

  .wish > p.organizer-contact {
    margin-top: 20px;
    font-size: 14px;
  }

  .rsvp {
    padding-top: 76px;
    padding-bottom: 78px;
    gap: 0;
  }

  .rsvp-heading h2 {
    font-size: 50px;
  }

  .rsvp form {
    margin-top: 46px;
  }

  footer {
    padding-top: 140px;
    padding-bottom: 46px;
  }

  footer > div {
    font-size: 58px;
  }
}