:root { --coral: #e94b38; --wine: #ca382a; --blue: #287cbd; --cream: #fff9ed; --ink: #45332b; --line: #e9cbb6; }
body { background: var(--cream); }
.masthead { color: #bc382c; }
.sound-button { background: #fffaf0cc; border-color: #d7634a66; }
.voice-shortcut[aria-pressed='true'] { background: var(--wine); }
.button { border-radius: 40px; }
.button--submit:hover { background: #b72f23; }
.marquee { background: #ffdf70; color: #b42c25; font: 12px var(--sans); letter-spacing: 3px; border-block: 1px solid #eac255; }
.marquee span { color: #db4934; }
.eyebrow { letter-spacing: 2px; color: #b93a2d; }
h2 { font-family: var(--sans); font-size: clamp(36px, 4.5vw, 60px); font-weight: 700; line-height: 1.35; letter-spacing: -.035em; }
.body-copy { color: #806a59; }
.lead { color: #704c39; }
.invitation { background: #fff9ed; }
.invite-stamp { top: 55px; right: 9%; font: 16px/1.4 var(--sans); padding: 18px 17px; border: 1.5px solid #de5740; color: #c33b2d; rotate: -5deg; }
.signature span { color: #e06d50; }
.invitation__date { border-radius: 28px; color: #b33125; background: #ffdf72; padding: 38px 35px 28px; box-shadow: 9px 10px 0 #f5c66a4d; }
.invitation__date .eyebrow { color: #a42e23; }
.date-art { font-size: 110px; }
.date-caption { letter-spacing: 2px; }
.countdown { border-top-color: #c89f4e; }
.countdown > div { gap: 4px; }
.countdown strong { font-size: 34px; }
.count-caption { letter-spacing: 2px; }
.narration-card { grid-template-columns: auto minmax(0, 1fr); background: #fffdf5; border: 1px dashed #d7b593; border-radius: 20px; padding: 25px; }
.narration-play { box-shadow: 0 5px 0 #f4d1ab; }
.narration-title { color: #be382b; }
.narration-state, .narration-transcript { color: #927862; }
.album { background: #fffdf7; border-top: 1px solid #f0ddc6; }
.album__count { color: #ce513d; font-size: 35px; }
.album__aside p { color: #927862; }
.album-tile img { border-radius: 18px; box-shadow: 0 7px 22px #a85b2010; }
.album-tile:first-child { width: min(100%, 620px); }
.album-tile__expand { background: #fff9edeb; color: #c43a2b; }
.album-tile__caption { color: #705243; }
.album__tail p { color: #cc5842; font-family: var(--sans); font-size: 18px; }
.album-viewer { background: #fff9ed; color: #b4392b; }
.album-viewer::backdrop { background: #fff9ed; }
.viewer-chapter { color: #a76d53; }
.viewer-close { color: #bb392a; border-color: #d39b7b; }
.viewer-arrow { background: #fff9edd6; color: #c03b2b; border-color: #dfb38d; border-radius: 30px; }
.viewer-status { color: #c03b2b; background: #fff9edd9; }
.viewer-pages button { color: #ae8a74; }
.viewer-pages button[aria-pressed='true'] { color: #c83c2c; border-bottom-color: #c83c2c; }
.viewer-autoplay { border-color: #d99272; color: #b63c2d; }
.viewer-hint { color: #97745d; }
.schedule { background: #fff7e7; border-block: 1px solid #f0ddc6; }
.timeline li { border-color: #edcdb0; }
.timeline li:last-child { border-color: #edcdb0; }
.timeline__index { color: #e78562; }
.timeline h3 { color: #9c3527; }
.timeline p { color: #92735d; }
.venue { background: #ffe6a0; }
.venue-art { background: #fff9ed; border-color: #dd8259; border-radius: 24px; overflow: hidden; box-shadow: 9px 9px 0 #d3924821; }
.venue-art__tag { color: #9d6449; }
.map-water { stroke: #c8e4eb; }
.map-streets { stroke: #f0dfc1; }
.map-garden { fill: #dce7b8; }
.map-pin-ring { fill: #f7ab70; }
.venue__actions .button--navigate { background: #cc3c2c; padding-inline: 23px; }
.rsvp { background: #fffdf7; }
.rsvp-form { background: #fff7e7; border: 1px solid #f0dac1; border-radius: 24px; padding: 30px; }
.field { color: #8e4b36; }
.field input, .field select, .field textarea { color: #8e3c2e; border-color: #d3ad8b; }
.field input::placeholder, .field textarea::placeholder { color: #ad9179; }
.attendance label span { border-radius: 12px; border-color: #dfb697; }
.attendance input:checked + span { background: #cc3e2d; border-color: #cc3e2d; }
.rsvp__demo, .form-note { color: #a28771; }
.footer { background: #ffdf72; padding-top: 75px; }
.footer__title { margin-bottom: 25px; font: 400 clamp(60px, 9vw, 125px)/1.1 'Party Display', var(--sans); letter-spacing: 0; }
.footer__title span { color: #cc3c2a; }
.footer__names { color: #bc392b; }
.footer__names span { font-family: var(--sans); }
.music-credit { margin: 18px 0 4px; color: #97604a; font: 10px/1.8 var(--sans); }
.music-credit a { text-decoration: underline; text-underline-offset: 3px; }
.music-credit span { font-size: 9px; }
.bottom-nav { background: #fffbf2ed; border-color: #de8f65; box-shadow: 0 5px 24px #9e50231a; }
.bottom-nav a:last-child { background: #ca382a; }
.confirmation { border: 1px solid #e9b58d; border-radius: 24px; background: #fff9ed; }
.confirmation::backdrop { background: #865c4170; backdrop-filter: none; }
.confirmation__heart { color: #df5d43; }
.confirmation h2 { font-size: 29px; }
.confirmation .confirmation__demo { color: #a2856c; }
.dialog-close { color: #bb3c2e; }
.toast { background: #bc392b; color: #fff9ed; border-radius: 18px; }
@media (max-width: 760px) {
  .masthead { height: 49px; padding-inline: 6%; }
  .masthead__date { font-size: 7px; letter-spacing: 1px; }
  .sound-button { min-height: 31px; }
  .section-pad { padding: 65px 7%; }
  h2 { font-size: 35px; }
  .eyebrow { margin-bottom: 22px; font-size: 9px; }
  .invite-stamp { right: 1%; font-size: 13px; padding: 15px 14px; }
  .invitation { gap: 38px; }
  .invitation, .schedule, .venue, .rsvp { grid-template-columns: minmax(0, 1fr); }
  .invitation > *, .schedule > *, .venue > *, .rsvp > * { min-width: 0; }
  .invitation__date { width: 98%; padding: 30px 23px 24px; }
  .date-art { font-size: clamp(76px, 24vw, 100px); }
  .date-art i { font-size: .72em; }
  .date-caption { font-size: 10px; }
  .narration-card { padding: 22px 18px 17px; }
  .narration-title { font-size: 19px; }
  .album__header { margin-bottom: 35px; }
  .album__title h2 { font-size: 35px; }
  .album__count { font-size: 26px; }
  .album-tile img { border-radius: 12px; }
  .album__tail p { font-size: 15px; }
  .venue-art { border-radius: 18px; }
  .venue__actions .button--navigate { font-size: 12px; letter-spacing: 0; }
  .rsvp-form { padding: 25px 19px; border-radius: 19px; }
  .rsvp .body-copy { margin-bottom: 0; }
  .footer { padding-bottom: 100px; }
  .footer__title { font-size: 76px; }
  .footer__names span { font-size: 9px; letter-spacing: 1px; }
}