@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-Light.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-Medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-SemiBold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-Italic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-LightItalic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-MediumItalic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-SemiBoldItalic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Cormorant Local";
  src: url("assets/fonts/Cormorant-BoldItalic.ttf") format("truetype");
  font-display: swap;
  font-style: italic;
  font-weight: 700;
}

@font-face {
  font-family: "Goudy Trajan Local";
  src: url("assets/fonts/GoudyTrajan-Regular_0.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Goudy Trajan Local";
  src: url("assets/fonts/GoudyTrajan-Medium_0.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Goudy Trajan Local";
  src: url("assets/fonts/GoudyTrajan-Bold_0.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

:root {
  --ink: #241719;
  --wine: #2a181b;
  --rose: #e8cfcf;
  --rose-deep: #c18d96;
  --text-light: #f0d9d8;
  --line-dark: rgba(53, 29, 32, 0.34);
  --serif: "Cormorant Local", Georgia, serif;
  --display: "Goudy Trajan Local", "Cormorant Local", Georgia, serif;
  --sans: Arial, sans-serif;
  --script: "Snell Roundhand", "Apple Chancery", cursive;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: smooth; }

body { margin: 0; background: var(--wine); color: var(--ink); font-family: var(--serif); font-size: 18px; font-synthesis: none; }

a { color: inherit; }

section { position: relative; overflow: hidden; }

h1, h2, h3, p { margin-top: 0; }

h2 { margin-bottom: 28px; font-family: var(--serif); font-size: 48px; font-weight: 400; line-height: 0.9; letter-spacing: 0; }

h3 { font-size: 20px; font-weight: 500; line-height: 1; }

.section-inner { position: relative; z-index: 1; width: min(100% - 48px, 1040px); margin: 0 auto; }

.narrow { width: min(100% - 48px, 620px); text-align: center; }

.section-dark { color: var(--text-light); background-color: var(--wine); }

.section-light { background: var(--rose); color: var(--ink); }

.silk-section::before { position: absolute; inset: 0; background: url("assets/silk-wide.png") center / cover no-repeat; content: ""; opacity: 0.72; }

.silk-section::after { position: absolute; inset: 0; background: rgba(25, 10, 13, 0.38); content: ""; }

.monogram, .eyebrow, .scroll-cue, .rsvp-prompt, .contact-copy, legend, .form-field, .submit-button, .outline-button, .schedule-row time span { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0; }

.monogram { margin-bottom: 13px; opacity: 0.86; }

.scroll-cue { display: inline-block; margin-top: 38px; color: inherit; font-family: var(--serif); font-size: 8px; text-decoration: none; opacity: 0.78; }

.scroll-cue::after { display: block; width: 26px; height: 14px; margin: 8px auto 0; background: url("img/arrow.png") center / contain no-repeat; content: ""; }

.hero { display: grid; min-height: clamp(840px, 54vw, 1040px); padding: 64px 0 75px; align-items: end; }

.hero::before { background-image: url("assets/silk-detail.png"); opacity: 0.85; }

.hero::after { background: rgba(30, 13, 17, 0.27); }

.hero-image { position: absolute; z-index: 1; inset: 0; background: url("assets/invitation.png") center 48% / cover no-repeat; opacity: 0.92; }

.hero-content { position: relative; z-index: 2; width: min(100% - 48px, 680px); margin: 0 auto; color: var(--text-light); text-align: center; }

.eyebrow { margin-bottom: 16px; }

.hero .eyebrow { margin: 0; font-family: var(--serif); font-size: 48px; font-weight: 400; letter-spacing: 0.18em; line-height: 1; transform: translateX(0.09em); }

.hero-scroll { display: block; width: 38px; height: 20px; margin: 58px auto 0; background: url("img/arrow.png") center / contain no-repeat; }

.script-title { margin-bottom: 25px; color: var(--rose); font-family: var(--script); font-size: clamp(92px, 11vw, 174px); font-weight: 400; line-height: 0.64; }

.invitation-intro { padding: 92px 0 74px; text-align: center; }

.top-wordmark { position: relative; left: 50%; display: block; width: min(1600px, calc(100vw - 80px)); max-width: none; margin: 0 0 40px; transform: translateX(-50%); }

.hero-copy { position: relative; left: 50%; width: min(1128px, calc(100vw - 80px)); max-width: none; margin: 0 0 42px; font-size: 38px; font-weight: 500; letter-spacing: 0; line-height: 1; transform: translateX(-50%); }

.hero-meta { display: flex; justify-content: center; gap: 34px; }

.hero-meta div { display: grid; gap: 4px; min-width: 154px; }

.hero-meta strong { font-size: 22px; font-weight: 500; line-height: 1; }

.hero-meta span { font-family: var(--sans); font-size: 9px; letter-spacing: 0; }

.invitation-intro .hero-meta { color: var(--ink); }

.schedule { padding: 122px 0 73px; }

.monogram-art { display: block; width: 78px; height: auto; margin: 0 auto 12px; }

.schedule-list { position: relative; margin: 42px 0 37px; }

.schedule-list-divider { position: absolute; z-index: 1; display: block; object-fit: fill; pointer-events: none; }

.schedule-row { display: grid; grid-template-columns: 100px 1fr; align-items: center; padding: 14px 0; text-align: left; }

.schedule-row time { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 0.8; }

.schedule-row time span { display: block; margin-top: 7px; font-size: 8px; }

.schedule-row p { margin: 0; font-size: 20px; }

.section-note { margin: 0 auto; font-size: 15px; line-height: 1.2; }

.rsvp { padding: 102px 0 116px; }

.form-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }

.section-heading h2 { font-size: 72px; }

.rsvp-prompt { display: inline-block; margin-bottom: 25px; padding: 6px 10px; background: var(--ink); color: var(--rose); line-height: 1.4; }

.rsvp-date { font-family: var(--display); }

.contact-copy { font-size: 9px; line-height: 1.5; }

.contact-copy a { color: inherit; font-family: var(--display); text-decoration: none; }

form { display: grid; gap: 26px; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

legend, .form-field { display: block; width: 100%; margin-bottom: 11px; color: var(--ink); font-size: 12px; }

.option { display: inline-flex; align-items: center; gap: 7px; margin: 0 14px 8px 0; font-size: 15px; cursor: pointer; }

.option-row { display: flex; flex-wrap: wrap; }

input[type="radio"] {
  display: grid;
  width: 14px;
  height: 14px;
  margin: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  appearance: none;
  background: transparent;
  place-content: center;
}

input[type="radio"]:checked {
  background-image: radial-gradient(circle at center, var(--ink) 0 29%, transparent 31%);
}

input[type="text"], input:not([type]) { width: 100%; height: 30px; margin-top: 7px; border: 1px solid rgba(43, 24, 27, 0.62); border-radius: 0; background: transparent; color: var(--ink); font: inherit; }

.form-field input { width: 100%; height: 30px; margin-top: 9px; border: 1px solid rgba(43, 24, 27, 0.62); border-radius: 0; background: transparent; color: var(--ink); font: inherit; }

.field-hint { max-width: 430px; margin: 5px 0 0; font-size: 13px; line-height: 1.2; }

.field-hint strong { font-weight: 600; }

.submit-button, .outline-button { justify-self: start; padding: 10px 18px; border: 0; border-radius: 0; background: var(--ink); color: var(--rose); cursor: pointer; font-size: 10px; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }

.submit-button:hover, .submit-button:focus-visible { background: #5d3740; }

.submit-button:focus-visible, .outline-button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.form-status { min-height: 1.3em; margin: -14px 0 0; font-family: var(--sans); font-size: 12px; }

.dress-code { min-height: 690px; padding: 98px 0 65px; }

.dress-code::before { opacity: 0.2; }

.dress-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; }

.dress-copy { z-index: 1; max-width: 330px; text-align: center; }

.dress-copy h3 { margin-top: 40px; }

.dress-copy p { font-size: 15px; line-height: 1.2; }

.dress-grid > img { width: min(100%, 650px); max-height: 510px; margin-left: auto; object-fit: contain; object-position: center bottom; }

.dress-code > .scroll-cue { position: absolute; z-index: 1; bottom: 50px; left: 50%; transform: translateX(-50%); }

.wishes { padding: 130px 0 86px; }

.wishes p:not(.script-title):not(.heart) { font-size: 16px; line-height: 1.25; }

.small-script { margin: -22px 0 35px; font-size: 78px; line-height: 0.7; }

.from-wordmark { display: block; width: min(100%, 455px); margin: -14px auto 35px; }

.heart { margin: 28px 0; color: var(--rose); font-size: 30px; }

.love-icon { display: block; width: 26px; height: auto; margin: 28px auto; }

.charity-card { margin: 0 auto; padding: 27px 34px 31px; border: 1px solid rgba(240, 217, 216, 0.6); text-align: left; }

.charity-card h3 { margin-bottom: 18px; font-family: var(--serif); font-weight: 400; letter-spacing: 0; text-align: center; }

.charity-card dl { margin: 0; font-family: var(--display); font-size: 8px; line-height: 1.6; }

.charity-card dl div { display: flex; gap: 12px; }

.charity-card dt { width: auto; flex: 0 0 auto; opacity: 1; }

.charity-card dd { margin: 0; }

.outline-button { display: grid; width: max-content; margin: 0 auto; border: 1px solid var(--rose); background: var(--rose); color: var(--ink); font-family: var(--display); place-items: center; }

.outline-button:hover { background: transparent; color: var(--rose); }

.details { padding: 130px 0 88px; }

.details-list { display: grid; gap: 22px; margin: 42px 0 0; padding: 0; list-style: none; text-align: left; }

.details-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }

.detail-icon { width: 22px; height: 25px; margin-top: 1px; object-fit: contain; object-position: center; }

.details-list h3 { margin: 0 0 4px; font-size: 20px; }

.details-list p { margin: 0; font-size: 16px; }

.important, .faq { padding: 105px 0 85px; }

.important h2, .faq h2 { font-size: 50px; }

.important p { font-size: 17px; line-height: 1.25; }

.important a { text-decoration: none; }

.divider-symbol { margin: 42px 0; font-size: 26px; }

.sun-icon { display: block; width: 26px; height: auto; margin: 42px auto; }

.important h3 { margin-bottom: 13px; }

.dark-cue { color: var(--ink); }

.dark-cue::after { background-image: url("img/arrow-dark.png"); }

.faq { padding-top: 65px; }

.faq-list { text-align: left; }

details { border-bottom: 1px solid var(--line-dark); }

summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 0; cursor: pointer; font-size: 16px; list-style: none; }

summary::-webkit-details-marker { display: none; }

summary::after { flex: 0 0 auto; content: "+"; font-size: 23px; font-weight: 400; }

details[open] summary::after { content: "-"; }

details p { margin: 0 0 13px; font-size: 15px; line-height: 1.2; }

.closing { display: grid; min-height: 590px; padding: 110px 24px 70px; place-content: center; color: var(--rose); text-align: center; }

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

.closing > p:first-child { max-width: 460px; margin: 0 auto 18px; color: var(--text-light); font-size: 17px; line-height: 1.2; }

.bottom-wordmark { position: relative; z-index: 1; display: block; width: min(100%, 620px); margin: 0 auto; }

@media (max-width: 740px) {
  body { font-size: 16px; }
  h2 { font-size: 37px; }
  .section-inner, .narrow { width: min(100% - 36px, 620px); }
  .hero { min-height: 700px; padding: 36px 0 62px; }
  .hero-image { width: 100%; height: 100%; background-position: center center; opacity: 0.9; }
  .hero-content { width: min(100% - 36px, 520px); margin: 0 auto; }
  .hero .eyebrow { font-size: 24px; letter-spacing: 0.2em; }
  .hero-scroll { width: 27px; height: 14px; margin-top: 34px; }
  .script-title { font-size: clamp(80px, 23vw, 125px); }
  .invitation-intro { padding: 55px 0 52px; }
  .top-wordmark { width: min(100%, 340px); margin-bottom: 29px; }
  .hero-copy { position: static; width: min(100%, 340px); max-width: 340px; margin: 0 auto 32px; font-size: 16px; transform: none; }
  .hero-meta { gap: 16px; }
  .hero-meta div { min-width: 118px; }
  .hero-meta strong { font-size: 17px; }
  .schedule { padding: 84px 0 57px; }
  .rsvp { padding: 72px 0 78px; }
  .form-wrap { grid-template-columns: 1fr; gap: 45px; }
  .section-heading { text-align: center; }
  .section-heading h2 { font-size: 60px; }
  .submit-button { width: 100%; justify-self: stretch; }
  .dress-code { min-height: 750px; padding-top: 72px; }
  .dress-grid { grid-template-columns: 1fr; text-align: center; }
  .dress-copy { margin: 0 auto; }
  .dress-grid > img { width: min(100%, 440px); max-height: 390px; margin: 10px auto 0; }
  .dress-code > .scroll-cue { bottom: 25px; }
  .wishes, .details { padding-top: 85px; }
  .charity-card { padding: 24px 18px; }
  .important { padding-top: 82px; }
  .closing { min-height: 490px; }
}

@media (max-width: 390px) {
  .hero-meta { flex-direction: column; gap: 12px; }
  .hero-content { margin-top: 245px; }
  .hero { min-height: 700px; }
  .option-row { display: block; }
}

/* Layout values aligned to the supplied Figma properties and PDF exports. */
@media (min-width: 741px) {
  .section-inner,
  .narrow {
    width: min(calc(100% - 80px), 1128px);
  }

  .narrow {
    max-width: none;
  }

  h2 {
    margin-bottom: 42px;
    font-size: 87px;
    line-height: 1;
  }

  .scroll-cue {
    margin-top: 0;
    font-size: 21px;
    line-height: 1;
  }

  .scroll-cue::after {
    width: 38px;
    height: 19px;
    margin-top: 18px;
  }

  .hero {
    height: 1079px;
    min-height: 0;
    padding: 0 0 55px;
  }

  .hero-content {
    width: min(calc(100% - 80px), 1200px);
  }

  .hero .eyebrow {
    font-size: 68.65px;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1;
    transform: translateX(0.06em);
  }

  .hero-scroll {
    width: 78px;
    height: 41px;
    margin-top: 52px;
  }

  .invitation-intro {
    height: 1255px;
    padding: 97px 0 62px;
  }

  .invitation-intro .section-inner {
    height: 100%;
  }

  .top-wordmark {
    width: min(1600px, calc(100vw - 80px));
    margin-bottom: 36px;
  }

  .hero-copy {
    width: min(1128px, calc(100vw - 80px));
    margin-bottom: 63px;
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
  }

  .hero-meta {
    position: relative;
    gap: 128px;
  }

  .hero-meta-divider {
    position: absolute;
    top: -5px;
    left: calc(50% - 40.5px);
    width: 1px;
    height: 109.5px;
    object-fit: fill;
    pointer-events: none;
  }

  .hero-meta div {
    gap: 11px;
    min-width: 270px;
  }

  .hero-meta strong {
    font-size: 52.85px;
    font-weight: 400;
    line-height: 1;
  }

  .hero-meta div:nth-child(1) strong {
    font-family: var(--display);
    letter-spacing: 0.045em;
  }

  .hero-meta div:nth-child(1) {
    transform: translateX(9px);
  }

  .hero-meta div:nth-child(2) strong {
    font-family: var(--display);
    font-size: 57.5px;
  }

  .hero-meta div:nth-child(2) {
    transform: translateX(2.5px);
  }

  .hero-meta span {
    font-family: var(--serif);
    font-size: 30.28px;
    font-weight: 500;
    line-height: 1;
  }

  .invitation-intro .scroll-cue {
    position: absolute;
    bottom: -24.5px;
    left: 50%;
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: normal;
    transform: translateX(calc(-50% + 10.6px));
  }

  .schedule {
    height: 1254px;
    padding: 0;
  }

  .schedule .section-inner {
    height: 100%;
    padding-top: 98px;
  }

  .monogram-art {
    width: 120px;
    margin-bottom: 24px;
  }

  .schedule-list {
    width: 906px;
    margin: 99px auto 130px;
    transform: translateX(7.5px);
  }

  .schedule-list-divider {
    top: 31.5px;
    left: 194.5px;
    width: 1px;
    height: 393.84px;
  }

  .schedule-divider {
    position: absolute;
    top: 332.5px;
    left: 50%;
    display: block;
    width: 109.5px;
    height: 1px;
    object-fit: fill;
    transform: translateX(calc(-50% + 7.5px));
  }

  .schedule-row {
    grid-template-columns: 263px 1fr;
    min-height: 146px;
    padding: 24px 0;
  }

  .schedule-row time {
    font-family: var(--display);
    font-size: 52.85px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: normal;
    transform: translateY(7.5px);
  }

  .schedule-row time span {
    margin-top: 12px;
    font-family: var(--serif);
    font-size: 30.28px;
    line-height: 1;
  }

  .schedule-row p {
    font-size: 57.5px;
    line-height: 1;
  }

  .section-note {
    width: 584px;
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
  }

  .schedule .scroll-cue,
  .details .scroll-cue {
    position: absolute;
    bottom: 54px;
    left: 50%;
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: normal;
    transform: translateX(-50%);
  }

  .rsvp {
    height: 2427px;
    padding: 0;
  }

  .form-wrap {
    display: block;
    width: min(calc(100% - 80px), 892px);
    height: 100%;
    padding-top: 34px;
  }

  .section-heading {
    text-align: center;
  }

  .section-heading h2 {
    margin: 0 0 97px;
    font-size: 232.41px;
    line-height: 1;
  }

  .section-heading h2::after {
    display: block;
    width: 80px;
    height: 1px;
    margin: 20px auto 0;
    background: currentColor;
    content: "";
  }

  .rsvp-prompt {
    margin: 0 auto 42px;
    padding: 24px 32px;
    font-family: var(--serif);
    font-size: 37.3px;
    font-weight: 400;
    line-height: 0.95;
  }

  .rsvp-deadline {
    display: inline-block;
    transform: translateY(10px);
  }

  .rsvp-date { font-size: 32px; }

  .contact-icon {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 7px;
    object-fit: contain;
  }

  .contact-copy {
    margin-bottom: 66px;
    font-family: var(--serif);
    font-size: 33.69px;
    font-weight: 400;
    line-height: 1.42;
  }

  .contact-copy a {
    font-size: 34.86px;
  }

  form {
    display: block;
    margin-top: 68px;
  }

  form > fieldset,
  form > .form-field {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
  }

  form > fieldset::after,
  form > .form-field::after {
    position: absolute;
    bottom: 0;
    left: 7px;
    width: calc(100% - 8px);
    height: 1px;
    background: rgba(43, 24, 27, 0.62);
    content: "";
  }

  form > :nth-child(1) {
    margin-bottom: 39px;
    padding-bottom: 57px;
  }

  form > :nth-child(2) {
    margin-bottom: 39px;
    padding-bottom: 60px;
  }

  form > :nth-child(3) {
    margin-bottom: 39px;
    padding-bottom: 59px;
  }

  form > :nth-child(4) {
    margin-bottom: 39px;
    padding-bottom: 66px;
  }

  form > :nth-child(5) {
    margin-bottom: 24px;
  }

  form > :nth-child(5)::after {
    display: none;
  }

  legend,
  .form-field {
    margin-bottom: 24px;
    font-family: var(--serif);
    font-size: 57.5px;
    font-weight: 400;
    line-height: 1;
  }

  .option {
    gap: 21px;
    margin: 0 0 10px;
    font-size: 30.28px;
    line-height: 1.1;
  }

  .attendance-field .option {
    display: flex;
    width: max-content;
    margin-left: 6px;
  }

  input[type="radio"] {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }

  .meal-field .option-row {
    display: grid;
    grid-template-columns: 217px 215px auto;
    margin-left: 6px;
  }

  .meal-field .option {
    margin-right: 0;
  }

  .stay-field legend {
    white-space: nowrap;
  }

  .stay-field .option:first-of-type {
    margin-left: 6px;
    margin-right: 112px;
  }

  .form-field input {
    width: 740px;
    height: 80px;
    margin-top: 40px;
    margin-left: 6px;
    padding: 0 20px;
    font-family: var(--display);
    font-size: 30px;
    font-weight: 400;
  }

  .field-hint {
    max-width: 100%;
    margin-top: 24px;
    margin-left: 10px;
    font-size: 29px;
    line-height: 1.15;
  }

  .field-hint + .field-hint {
    margin-top: 14px;
  }

  .submit-button {
    display: block;
    min-width: 260px;
    margin: 0 auto;
    padding: 18px 28px;
    font-size: 21px;
  }

  .rsvp-scroll-cue {
    display: block;
    width: max-content;
    margin: 40px auto 0;
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: 1;
  }

  .dress-code {
    height: 1406px;
    min-height: 0;
    padding: 0;
  }

  .dress-grid {
    display: block;
    height: 100%;
    padding-top: 96px;
  }

  .dress-copy {
    max-width: 1128px;
    margin: 0 auto;
  }

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

  .dress-copy h2::after {
    display: block;
    width: 109.5px;
    height: 1px;
    margin: 43px auto 0;
    background: currentColor;
    content: "";
  }

  .dress-people {
    display: block;
    width: 712px;
    height: auto;
    margin: 0 auto;
  }

  .dress-copy h3 {
    margin: -66px 0 28px;
    font-size: 57.5px;
  }

  .dress-copy p {
    max-width: 1128px;
    margin: 0 auto;
    font-size: 38px;
    line-height: 1;
  }

  .dress-code > .scroll-cue {
    bottom: 50px;
  }

  .wishes {
    height: 2013px;
    padding: 132px 0 0;
  }

  .wishes .section-inner {
    height: 100%;
  }

  .from-wordmark {
    width: 900px;
    margin: -22px auto 0;
  }

  .wishes-divider {
    display: block;
    width: 109.5px;
    height: 1px;
    margin: 45px auto 16px;
    background: #e4cacc;
  }

  .wishes p:not(.script-title):not(.heart) {
    max-width: 1128px;
    margin-right: auto;
    margin-left: auto;
    font-size: 38px;
    line-height: 1;
  }

  .love-icon {
    width: 54px;
    margin: 56px auto 94px;
  }

  .charity-card {
    width: 1080px;
    margin-top: 0;
    padding: 42px 64px 62px;
  }

  .charity-card h3 {
    margin-bottom: 54px;
    font-size: 57.5px;
    line-height: 62px;
  }

  .charity-card dl {
    font-size: 35px;
    line-height: 54px;
  }

  .charity-card dl div {
    gap: 8px;
  }

  .charity-card dl div:last-child {
    white-space: nowrap;
  }

  .outline-button {
    width: 534px;
    height: 90px;
    margin-top: 45px;
    padding: 0;
    font-size: 48.05px;
  }

  .wishes .scroll-cue {
    position: absolute;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
  }

  .details {
    height: 1121px;
    padding: 0;
  }

  .details .section-inner {
    height: 100%;
    padding-top: 101px;
  }

  .details-list {
    width: 760px;
    gap: 38px;
    margin: 58px auto 0;
  }

  .details-list li {
    grid-template-columns: 52px 1fr;
    gap: 28px;
  }

  .detail-icon {
    width: 42px;
    height: 48px;
  }

  .details-list h3 {
    margin-bottom: 8px;
    font-size: 57.5px;
  }

  .details-list p {
    font-size: 38px;
  }

  .important {
    height: 1036px;
    padding: 87px 0 0;
  }

  .important .section-inner,
  .faq .section-inner {
    height: 100%;
  }

  .important h2,
  .faq h2 {
    font-size: 87px;
  }

  .important p {
    max-width: 1128px;
    margin-right: auto;
    margin-left: auto;
    font-size: 38px;
    line-height: 1;
  }

  .sun-icon {
    width: 54px;
    margin: 72px auto;
  }

  .important h3 {
    margin-bottom: 24px;
    font-size: 57.5px;
  }

  .important .scroll-cue,
  .faq .scroll-cue {
    position: absolute;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%);
  }

  .faq {
    height: 1158px;
    padding: 131px 0 0;
  }

  .faq-list {
    width: 960px;
    margin: 0 auto;
  }

  summary {
    min-height: 86px;
    padding: 18px 0;
    font-size: 38px;
  }

  summary::after {
    font-size: 48px;
  }

  details p {
    margin-bottom: 24px;
    font-size: 30px;
  }

  .closing {
    height: 1083px;
    min-height: 0;
    padding: 120px 24px 70px;
  }

  .closing > p:first-child {
    max-width: 920px;
    margin-bottom: 30px;
    font-size: 43px;
    line-height: 1;
  }

  .closing .love-icon {
    margin: 44px auto;
  }

  .bottom-wordmark {
    width: 1040px;
  }

  .closing > * {
    transform: translateY(46px);
  }
}

@media (max-width: 740px) {
  h2 {
    margin-bottom: 24px;
    font-size: 35.33px;
    line-height: 1;
  }

  .section-inner,
  .narrow {
    width: min(calc(100% - 36px), 324px);
  }

  .scroll-cue {
    margin-top: 0;
    font-size: 9.57px;
  }

  .scroll-cue::after {
    width: 38px;
    height: 19px;
    margin-top: 9px;
  }

  .hero {
    height: 643.33px;
    min-height: 0;
    padding: 0 0 12px;
  }

  .hero-content {
    margin: 0 auto;
  }

  .hero .eyebrow {
    font-size: 22.88px;
    letter-spacing: 0.12em;
    transform: translateX(0.06em);
  }

  .hero-scroll {
    width: 26px;
    height: 14px;
    margin-top: 27px;
  }

  .invitation-intro {
    height: 638.33px;
    padding: 50px 0 28px;
  }

  .invitation-intro .section-inner {
    height: 100%;
  }

  .top-wordmark {
    width: 340px;
    margin-bottom: 108px;
  }

  .hero-copy {
    width: 270px;
    margin-bottom: 32px;
    font-size: 13.67px;
    font-weight: 500;
    line-height: 1;
  }

  .hero-meta {
    flex-direction: column;
    gap: 26.5px;
  }

  .hero-meta-divider {
    display: none;
  }

  .hero-meta div {
    gap: 4px;
    min-width: 138px;
    transform: translateX(7.5px);
  }

  .hero-meta strong {
    font-size: 30.79px;
    font-weight: 400;
  }

  .hero-meta div:nth-child(1) strong {
    font-family: var(--display);
    letter-spacing: 0.045em;
  }

  .hero-meta div:nth-child(1) {
    gap: 6.25px;
  }

  .hero-meta div:nth-child(2) strong {
    font-family: var(--serif);
    font-size: 31.47px;
  }

  .hero-meta span {
    font-family: var(--serif);
    font-size: 16.57px;
    font-weight: 500;
  }

  .invitation-intro .scroll-cue {
    position: absolute;
    bottom: 0;
    left: 50%;
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: normal;
    transform: translateX(-50%);
  }

  .schedule {
    height: 641.33px;
    padding: 0;
  }

  .schedule .section-inner {
    height: 100%;
    padding-top: 63.5px;
  }

  .monogram-art {
    width: 70px;
    margin-bottom: 12px;
  }

  .schedule-list {
    width: 222px;
    margin: 63px auto 28px;
    transform: translateX(7.5px);
  }

  .schedule-list-divider {
    top: 12px;
    left: 81.65px;
    width: 0.5px;
    height: 199.5px;
  }

  .schedule-divider {
    position: absolute;
    top: 177.33px;
    left: 50%;
    display: block;
    width: 36.5px;
    height: 0.5px;
    object-fit: fill;
    transform: translateX(calc(-50% + 7.5px));
  }

  .schedule-row {
    grid-template-columns: 108px 1fr;
    min-height: 74px;
    padding: 12px 0;
  }

  .schedule-row time {
    font-family: var(--display);
    font-size: 24.31px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: normal;
  }

  .schedule-row time span {
    margin-top: 7px;
    font-family: var(--serif);
    font-size: 13.93px;
  }

  .schedule-row p {
    font-size: 19.17px;
    line-height: 1;
  }

  .section-note {
    font-size: 17.33px;
    line-height: 1;
  }

  .schedule .scroll-cue,
  .details .scroll-cue {
    position: absolute;
    bottom: 24px;
    left: 50%;
    font-family: var(--serif);
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: normal;
    transform: translateX(-50%);
  }

  .rsvp {
    height: 910px;
    padding: 0;
  }

  .form-wrap {
    display: block;
    width: min(calc(100% - 36px), 277px);
    height: 100%;
    padding-top: 49px;
  }

  .section-heading {
    text-align: center;
  }

  .section-heading h2 {
    margin: 0 0 36px;
    font-size: 77.47px;
    line-height: 1;
  }

  .section-heading h2::after {
    display: block;
    width: 34px;
    height: 1px;
    margin: 8px auto 0;
    background: currentColor;
    content: "";
  }

  .rsvp-prompt {
    margin-bottom: 8px;
    padding: 7px 10px;
    font-family: var(--serif);
    font-size: 11.53px;
    line-height: 1;
  }

  .rsvp-deadline {
    display: inline-block;
    transform: translateY(3px);
  }

  .rsvp-date { font-size: 9.89px; }

  .contact-icon {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto 5px;
    object-fit: contain;
  }

  .contact-copy {
    margin-bottom: 20px;
    font-family: var(--serif);
    font-size: 11.23px;
    line-height: 1.42;
  }

  .contact-copy a {
    font-size: 11.62px;
  }

  form {
    display: block;
    margin-top: 22px;
  }

  form > fieldset,
  form > .form-field {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
  }

  form > fieldset::after,
  form > .form-field::after {
    position: absolute;
    bottom: 0;
    left: 2px;
    width: calc(100% - 5px);
    height: 1px;
    background: rgba(43, 24, 27, 0.62);
    content: "";
  }


  form > :nth-child(1) {
    margin-bottom: 15px;
    padding-bottom: 16px;
  }

  form > :nth-child(2) {
    margin-bottom: 14px;
    padding-bottom: 20px;
  }

  form > :nth-child(3) {
    margin-bottom: 13px;
    padding-bottom: 18px;
  }

  form > :nth-child(4) {
    margin-bottom: 15px;
    padding-bottom: 20px;
  }

  form > :nth-child(5) {
    margin-bottom: 14px;
  }

  form > :nth-child(5)::after {
    display: none;
  }

  legend,
  .form-field {
    margin-bottom: 8px;
    font-family: var(--serif);
    font-size: 16.33px;
    line-height: 1.184;
  }

  .option {
    gap: 7px;
    margin: 0 14px 3.25px 0;
    font-size: 10.09px;
  }

  .attendance-field .option { display: flex; width: max-content; margin-left: 2px; }

  .meal-field .option { margin-right: 36.5px; }

  .meal-field .option:last-child { margin-right: 0; }

  .stay-field legend { margin-bottom: 3px; }

  .stay-field .option:first-of-type { margin-left: 2px; margin-right: 34.7px; }

  .option-row {
    display: flex;
    margin-left: 2px;
  }

  input[type="radio"] {
    width: 7.33px;
    height: 7.33px;
    flex: 0 0 7.33px;
    border-width: 0.5px;
  }

  .form-field input {
    width: min(247px, 100%);
    height: 26px;
    margin-top: 11px;
    margin-left: 2px;
    padding: 0 7px;
    font-family: var(--display);
    font-size: 10px;
    font-weight: 400;
  }

  .field-hint {
    margin-top: 8px;
    margin-left: 3px;
    font-size: 9.67px;
    line-height: 1.138;
  }

  .field-hint + .field-hint {
    margin-top: 5px;
  }

  .submit-button {
    display: block;
    width: 150px;
    margin: 0 auto;
    padding: 8px 12px;
    font-size: 9.57px;
  }

  .rsvp-scroll-cue {
    display: block;
    width: max-content;
    margin: 40px auto 0;
    font-family: var(--serif);
    font-size: 9.57px;
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: 1;
  }

  .dress-code {
    height: 654px;
    min-height: 0;
    padding: 0;
  }

  .dress-grid {
    display: block;
    height: 100%;
    padding-top: 63.5px;
  }

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

  .dress-copy h2::after {
    display: block;
    width: 36.5px;
    height: 1px;
    margin: 20px auto 0;
    background: currentColor;
    content: "";
  }

  .dress-people {
    display: block;
    width: 275.3px;
    height: auto;
    margin: 0 auto;
  }

  .dress-copy h3 {
    margin: -26px 0 22px;
    font-size: 27.79px;
  }

  .dress-copy p {
    max-width: 200px;
    margin: 0 auto;
    font-size: 17.33px;
    line-height: 1.058;
  }

  .dress-code > .scroll-cue {
    bottom: 22px;
  }

  .wishes {
    height: 930.67px;
    padding: 100px 0 0;
  }

  .wishes .section-inner {
    height: 100%;
  }

  .from-wordmark {
    width: 324px;
    margin: -12px auto 0;
  }

  .wishes-divider {
    display: block;
    width: 36.5px;
    height: 1px;
    margin: 21px auto 6px;
    background: #e4cacc;
  }

  .wishes p:not(.script-title):not(.heart) {
    font-size: 17.33px;
    line-height: 1;
  }

  .love-icon {
    width: 28px;
    margin: 25px auto 7px;
  }

  .charity-card {
    width: 293px;
    padding: 14px 32px 16px;
  }

  .charity-card h3 {
    margin-bottom: 21px;
    font-size: 19.17px;
    line-height: 20.67px;
  }

  .charity-card dl {
    font-size: 12.33px;
    line-height: 19px;
  }

  .charity-card dl div {
    gap: 2.7px;
  }

  .outline-button {
    width: 178px;
    height: 30px;
    margin-top: 24px;
    padding: 0;
    font-size: 16.02px;
  }

  .wishes .scroll-cue {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
  }

  .details {
    height: 620px;
    padding: 0;
  }

  .details .section-inner {
    height: 100%;
    padding-top: 42px;
  }

  .details-list {
    gap: 24px;
    margin-top: 34px;
  }

  .details-list h3 {
    font-size: 22.22px;
  }

  .details-list p {
    font-size: 14.69px;
  }

  .important {
    height: 605.33px;
    padding: 65px 0 0;
  }

  .important .section-inner,
  .faq .section-inner {
    height: 100%;
  }

  .important h2,
  .faq h2 {
    font-size: 35.33px;
  }

  .important p {
    font-size: 18px;
    line-height: 1.1;
  }

  .sun-icon {
    width: 28px;
    margin: 38px auto;
  }

  .important h3 {
    font-size: 25.4px;
  }

  .important .scroll-cue,
  .faq .scroll-cue {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
  }

  .faq {
    height: 672.67px;
    padding: 100px 0 0;
  }

  summary {
    min-height: 46px;
    padding: 11px 0;
    font-size: 13.67px;
  }

  summary::after {
    font-size: 22px;
  }

  details p {
    font-size: 12px;
  }

  .closing {
    height: 640.67px;
    min-height: 0;
    padding: 80px 18px 55px;
  }

  .closing > p:first-child {
    max-width: 324px;
    font-size: 20.41px;
    line-height: 1;
  }

  .bottom-wordmark {
    width: 340px;
  }

  .closing > * {
    transform: translateY(-8px);
  }
}