@charset "UTF-8";
:root {
  --ink:#554231;
  --muted:#806c59;
  --paper:#fffdf7;
  --cream:#f4ede2;
  --sand:#dfcdb5;
  --kraft:#bea284;
  --line:#d6c8b6;
  --serif:"Cormorant Garamond",Georgia,serif;
  --hand:"Caveat",cursive;
  --sans:"DM Sans",sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
}
body {
  margin:0;
  color:var(--ink);
  background:#eee5d8;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  overflow-x:clip;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#a38d7010 3px,#a38d7010 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,#a38d700d 3px,#a38d700d 4px);
}
#invitation {
  isolation:isolate;
}
body.cover-active {
  overflow:hidden;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
}
button:focus-visible,a:focus-visible {
  outline:3px solid #977449;
  outline-offset:6px;
}
button {
  cursor:pointer;
}
[hidden] {
  display:none!important;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
.handwritten {
  font-family:var(--hand);
  font-weight:400;
}
.eyebrow {
  font-size:12px;
  font-weight:500;
  margin:0 0 14px;
  color:var(--muted);
}
h1,h2,h3,p,figure {
  margin:0;
}
h1,h2,h3 {
  font-weight:400;
}
h2 {
  font-family:var(--serif);
  font-size:44px;
  line-height:1.14;
}
a {
  color:inherit;
}
::selection {
  background:#e0c8a7;
}
.cover {
  position:fixed;
  inset:0;
  z-index:30;
  overflow-y:auto;
  overflow-x:hidden;
  background:#f2eadd;
  background-image:radial-gradient(ellipse at 50% 42%,#fffdf650,transparent 68%),repeating-linear-gradient(0deg,transparent,transparent 3px,#a38d7010 3px,#a38d7010 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,#a38d700b 3px,#a38d700b 4px);
  text-align:center;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:45px 24px 28px;
  transition:opacity .2s ease;
}
.cover-kicker {
  font-size:12px;
  color:#80694f;
  margin-bottom:18px;
}
.cover h1 {
  font-family:var(--serif);
  font-size:clamp(45px,5vw,66px);
  line-height:1.03;
}
.envelope-scene {
  position:relative;
  width:min(100%,580px);
  margin:67px auto 0;
  padding-bottom:18px;
  isolation:isolate;
}
.envelope {
  position:relative;
  aspect-ratio:1.8;
  width:85%;
  margin:0 auto;
  filter:drop-shadow(0 20px 15px #5c40252b);
  perspective:1200px;
}
.envelope-back {
  position:absolute;
  inset:0;
  background:#c8ae8e;
  border-radius:3px;
}
.envelope-letter {
  position:absolute;
  inset:12px 17px 20px;
  background:var(--paper);
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-direction:column;
  padding:27px 15px;
  box-shadow:0 0 2px #59422b20;
  transition:transform .3s ease;
}
.letter-names {
  font-family:var(--serif);
  font-size:42px;
  line-height:1.05;
  margin-top:18px;
}
.letter-names i {
  font-weight:400;
}
.envelope-pocket {
  position:absolute;
  inset:0;
  background:linear-gradient(155deg,#ddc5a6,#ccb090);
  clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);
  z-index:4;
  border-radius:3px;
}
.envelope-pocket:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(32deg,transparent 49.5%,#b5936e60 50%,transparent 50.5%),linear-gradient(-32deg,transparent 49.5%,#b5936e40 50%,transparent 50.5%);
}
.envelope-flap {
  position:absolute;
  inset:0;
  background:linear-gradient(175deg,#dec4a2,#c3a27d);
  clip-path:polygon(0 0,100% 0,50% 59%);
  transform-origin:50% 0;
  transition:transform .3s ease;
  z-index:5;
  backface-visibility:hidden;
}
.wax-seal {
  position:absolute;
  left:50%;
  top:52%;
  z-index:7;
  transform:translate(-50%,-50%) rotate(-7deg);
  width:75px;
  height:75px;
  border:4px solid #dfc6a7;
  outline:1px solid #b3967650;
  border-radius:48% 44% 49% 46%;
  background:radial-gradient(circle at 34% 30%,#ebd9bf,#c8aa87);
  box-shadow:0 3px 7px #63422850,inset 0 0 0 2px #b4916d50;
  display:grid;
  place-items:center;
  padding:0;
  color:#795b3e;
  transition:opacity .25s,transform .25s;
}
.wax-seal>span {
  border:1px solid #ac8d6965;
  border-radius:50%;
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-size:24px;
}
.seal-amp {
  font-size:19px;
  font-style:italic;
  padding:0 2px;
}
.wax-seal:hover {
  transform:translate(-50%,-50%) rotate(-7deg) scale(1.06);
}
.cover-teddy {
  position:absolute;
  right:-10px;
  bottom:-7px;
  width:174px;
  height:auto;
  z-index:9;
  pointer-events:none;
  transform:rotate(8deg);
  filter:drop-shadow(0 5px 3px #59402819);
}
.cover-postmark {
  position:absolute;
  left:3px;
  top:-30px;
  width:95px;
  height:95px;
  border:1px dashed #a9927580;
  border-radius:50%;
  transform:rotate(-15deg);
  color:#927b60;
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.6;
  font-size:12px;
  z-index:10;
}
.cover-postmark b {
  font-size:18px;
  font-family:var(--serif);
  font-weight:500;
}
.cover-spark {
  position:absolute;
  color:#99754d;
  font-size:48px;
  line-height:1;
}
.spark-one {
  left:-9px;
  bottom:35px;
  transform:rotate(-8deg);
}
.spark-two {
  right:40px;
  top:-45px;
  font-size:35px;
}
.cover-footer {
  font-size:12px;
  color:#8a755d;
  margin-top:auto;
  padding-top:35px;
}
.cover-footer span {
  padding:0 12px;
}
.cover.opening .envelope-flap {
  transform:rotateX(180deg);
  z-index:2;
}
.cover.opening .envelope-letter {
  transform:translateY(-46%);
}
.cover.opening .wax-seal {
  opacity:0;
  transform:translate(-50%,-50%) scale(.7);
}
.cover.departing {
  opacity:0;
  pointer-events:none;
}
.page-header {
  max-width:1100px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:auto;
  padding:25px 40px 24px;
}
.monogram {
  font-family:var(--serif);
  font-size:28px;
}
.monogram span {
  font-size:23px;
  font-style:italic;
  padding:0 3px;
}
.header-date {
  font-size:12px;
  color:var(--muted);
}
.invitation-paper {
  width:min(calc(100% - 64px),1050px);
  margin:0 auto;
  position:relative;
  background:var(--paper);
  padding:69px 64px 35px;
  box-shadow:0 8px 50px #53422d0e;
  border-radius:3px;
  background-image:repeating-linear-gradient(5deg,transparent,transparent 4px,#bcad9411 5px,transparent 6px);
}
.invitation-paper:before {
  content:"";
  position:absolute;
  inset:6px -9px -8px;
  z-index:-1;
  transform:rotate(-.6deg);
  background-color:#e4d6c2;
  background-image:linear-gradient(90deg,#a1815620 50%,transparent 50%),linear-gradient(#a1815620 50%,transparent 50%);
  background-size:26px 26px;
  box-shadow:0 2px 9px #55412b16;
}
.invitation-paper:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:12px;
  background:var(--paper);
  clip-path:polygon(0 0,2% 22%,4% 0,6% 30%,8% 8%,10% 24%,12% 0,15% 30%,17% 0,20% 20%,22% 0,25% 27%,27% 0,30% 15%,32% 0,35% 25%,37% 0,40% 20%,42% 0,45% 20%,47% 0,50% 25%,52% 0,55% 26%,57% 0,60% 23%,62% 0,65% 20%,67% 0,70% 27%,72% 0,75% 20%,77% 0,80% 25%,82% 0,85% 20%,87% 0,90% 25%,92% 0,95% 20%,97% 0,100% 23%,100% 100%,0 100%);
  transform:translateY(-4px);
}
.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:25px;
  align-items:center;
}
.hero-copy {
  position:relative;
  z-index:2;
}
.hero h1 {
  font-family:var(--serif);
  font-size:clamp(46px,5.5vw,67px);
  line-height:.99;
  margin-bottom:23px;
}
.hero h1 em {
  font-size:.82em;
  font-weight:400;
  white-space:nowrap;
}
.parents {
  font-family:var(--serif);
  font-size:31px;
  line-height:1.35;
  margin-top:25px;
}
.parents span {
  font-style:italic;
  font-size:26px;
  margin:0 3px;
}
.date-ticket {
  display:flex;
  gap:18px;
  align-items:center;
  position:relative;
  margin-top:27px;
  width:fit-content;
  background:#f0e7d8;
  border:1px solid #d7c7b1;
  padding:13px 24px 13px 20px;
  transform:rotate(-2deg);
  box-shadow:2px 3px 0 #d5c4aa40;
}
.date-ticket:before,.date-ticket:after {
  content:"";
  position:absolute;
  top:calc(50% - 7px);
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid #d7c7b1;
}
.date-ticket:before {
  left:-8px;
  border-left:0;
}
.date-ticket:after {
  right:-8px;
  border-right:0;
}
.ticket-day {
  font-family:var(--serif);
  font-size:57px;
  line-height:1;
  border-right:1px dashed #baa182;
  padding-right:18px;
}
.date-ticket>div {
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.55;
}
.ticket-label {
  font-size:12px;
  color:var(--muted);
}
.date-ticket strong {
  font-family:var(--serif);
  font-size:23px;
  font-weight:500;
}
.date-ticket>div>span:last-child {
  font-size:14px;
  color:#715c46;
}
.photo-collage {
  position:relative;
  height:430px;
  min-width:0;
}
.polaroid {
  padding:12px 12px 8px;
  background:#fffefb;
  box-shadow:1px 5px 13px #3d2c211f;
  position:absolute;
}
.polaroid figcaption {
  font-size:24px;
  line-height:1.3;
  text-align:center;
  padding-top:8px;
  white-space:nowrap;
}
.couple-polaroid figcaption {
  text-align:left;
  padding-left:0;
}
.couple-polaroid {
  width:225px;
  top:12px;
  left:5px;
  transform:rotate(-7deg);
  z-index:2;
}
.couple-photo {
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#b59976;
}
.couple-photo img {
  position:absolute;
  width:145%;
  max-width:none;
  left:-22.5%;
  top:-31%;
  height:auto;
}
.tape {
  position:absolute;
  display:block;
  width:90px;
  height:30px;
  background:#c9b58a77;

  clip-path:polygon(0 5%,100% 0,96% 18%,100% 36%,97% 57%,100% 80%,99% 100%,0 95%,3% 72%,0 52%,3% 31%);
  z-index:5;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,#c1ab8630 2px,#c1ab8630 3px);
}
.tape-couple {
  top:-12px;
  left:65px;
  transform:rotate(5deg);
}
.hero-teddy {
  position:absolute;
  width:137px;
  right:-22px;
  top:-24px;
  transform:rotate(9deg);
  filter:drop-shadow(0 4px 2px #66523a10);
  z-index:3;
}
.ultrasound-polaroid {
  width:228px;
  right:-3px;
  bottom:13px;
  transform:rotate(7deg);
  z-index:4;
}
.ultrasound-polaroid>img {
  width:100%;
  aspect-ratio:1.45;
  object-fit:cover;
  filter:grayscale(1);
}
.ultrasound-polaroid figcaption {
  font-size:22px;
}
.tape-ultrasound {
  top:-12px;
  left:62px;
  transform:rotate(-10deg);
  width:83px;
  background-color:#d7c7a6a0;
}
.collage-note {
  position:absolute;
  bottom:-19px;
  left:5px;
  transform:rotate(-8deg);
  font-size:30px;
  color:#8d6f4d;
}
.collage-star {
  position:absolute;
  top:216px;
  right:-22px;
  font-size:47px;
  color:#a88b63;
  transform:rotate(12deg);
}
.love-note {
  max-width:740px;
  text-align:center;
  margin:90px auto 48px;
}
.love-note p {
  font-size:16px;
  color:var(--muted);
  line-height:1.9;
}
.countdown-section {
  position:relative;
  text-align:center;
  background:#e9ddc9;
  width:calc(100% + 16px);
  margin:0 -8px;
  padding:40px 30px 30px;
  border:1px solid #d3c0a3;
  transform:rotate(-.7deg);
  box-shadow:3px 5px 0 #d5c4ab25;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#ae96700d 4px,transparent 5px);
}
.countdown-tape {
  width:102px;
  top:-15px;
  left:calc(50% - 51px);
  transform:rotate(-4deg);
  background-color:#c3af8577;
}
.countdown-section .eyebrow {
  font-size:12px;
  margin-bottom:9px;
}
.countdown-section h2 {
  font-size:43px;
}
.countdown {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:27px;
  margin:18px 0 5px;
}
.countdown>div {
  display:flex;
  flex-direction:column;
  min-width:58px;
}
.countdown>div>span {
  font-family:var(--serif);
  font-size:58px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.countdown small {
  font-size:12px;
  color:#7a634a;
  margin-top:4px;
}
.countdown-colon {
  font-family:var(--serif);
  font-size:30px;
  align-self:flex-start;
  line-height:2.1;
  color:#987a55;
}
.program-section {
  margin-top:77px;
}
.section-heading {
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:28px;
}
.section-heading h2 {
  font-size:39px;
}
.program-paper {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#f5eedf;
  border:1px solid #ddcdb5;
  position:relative;
  box-shadow:0 5px 9px #66503708;
  transform:rotate(.4deg);
}
.program-paper:before,.program-paper:after {
  content:"";
  position:absolute;
  inset:0 auto 0 33.33%;
  width:1px;
  background:linear-gradient(90deg,#9e816128,transparent);
  border-left:1px dashed #c9b494;
}
.program-paper:after {
  left:66.66%;
}
.program-item {
  padding:25px 10px 22px;
  text-align:center;
  position:relative;
}
.program-item:nth-child(2) {
  background:#dfc9a417;
}
.program-time {
  font-size:43px;
  line-height:1.4;
  white-space:nowrap;
}
.program-time small {
  font-size:22px;
}
.program-item h3 {
  font-family:var(--serif);
  font-size:24px;
  line-height:1.3;
  margin-top:3px;
}
.details-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:37px;
  margin-top:74px;
}
.details-grid .section-heading {
  gap:12px;
}
.details-grid .section-heading h2 {
  font-size:34px;
}
.location-paper {
  background:#fcf8ef;
  padding:23px 18px 18px;
  border:1px solid #e2d5c0;
  transform:rotate(-.7deg);
  box-shadow:1px 4px 8px #7255340b;
}
.location-paper h3 {
  font-family:var(--serif);
  font-size:29px;
  line-height:1.1;
}
.location-paper>p {
  font-size:13px;
  color:var(--muted);
  margin:7px 0 20px;
}
.map-frame {
  height:210px;
  overflow:hidden;
  background:#e7e0d4;
  border:1px solid #d9cdbb;
}
.map-frame iframe {
  width:100%;
  height:100%;
  border:0;

}
.map-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid #927859;
  background:#786048;
  color:#fffdf6;
  text-decoration:none;
  padding:12px 15px;
  font-size:14px;
  margin-top:15px;
  transition:background .2s,transform .2s;
}
.map-link:hover {
  background:#604b37;
  transform:translateY(-1px);
}
.map-link>span {
  margin-left:5px;
}
.dress-paper {
  position:relative;
  background:#ece1cf;
  padding:35px 15px 23px;
  text-align:center;
  transform:rotate(2deg);
  border:1px solid #d4c2a8;
  box-shadow:2px 5px 9px #7255340d;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#af926111 3px,#af926111 4px);
}
.dress-tape {
  width:90px;
  top:-13px;
  left:calc(50% - 45px);
  transform:rotate(-6deg);
  background:#c9b58a80;
}
.fabric-swatches {
  display:flex;
  justify-content:center;
  gap:21px;
  margin:27px auto 23px;
}
.swatch {
  display:block;
  width:78px;
  height:86px;
  box-shadow:2px 3px 5px #5f422020;
  clip-path:polygon(0 0,5% 3%,10% 0,15% 3%,20% 0,25% 3%,30% 0,35% 3%,40% 0,45% 3%,50% 0,55% 3%,60% 0,65% 3%,70% 0,75% 3%,80% 0,85% 3%,90% 0,95% 3%,100% 0,100% 100%,95% 97%,90% 100%,85% 97%,80% 100%,75% 97%,70% 100%,65% 97%,60% 100%,55% 97%,50% 100%,45% 97%,40% 100%,35% 97%,30% 100%,25% 97%,20% 100%,15% 97%,10% 100%,5% 97%,0 100%);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,#785d391a 3px,transparent 4px),repeating-linear-gradient(90deg,transparent,transparent 2px,#785d391a 3px,transparent 4px);
}
.white-swatch {
  background-color:#fffdf7;
  transform:rotate(-8deg);
}
.beige-swatch {
  background-color:#d0b697;
  transform:rotate(7deg);
}
.dress-paper h3 {
  font-family:var(--serif);
  font-size:33px;
  line-height:1.2;
}
#invitation-title:focus {
  outline:none;
}
@media(min-width:1100px) and (min-height:850px) {
  .cover {
    padding-top:72px;
  }
  .envelope-scene {
    margin-top:86px;
    width:640px;
  }
  .cover-teddy {
    width:192px;
  }
  .cover h1 {
    font-size:72px;
  }
  .cover-footer {
    padding-top:65px;
  }
}
@media(max-width:850px) {
  .invitation-paper {
    padding:48px 34px 30px;
  }
  .hero {
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .hero h1 {
    font-size:53px;
  }
  .hero h1 em {
    white-space:normal;
  }
  .parents {
    font-size:26px;
  }
  .date-ticket {
    gap:11px;
    padding:13px 17px 13px 13px;
  }
  .ticket-day {
    padding-right:11px;
    font-size:48px;
  }
  .date-ticket strong {
    font-size:20px;
  }
  .photo-collage {
    height:405px;
  }
  .couple-polaroid {
    width:195px;
    left:0;
    top:24px;
  }
  .couple-polaroid figcaption {
    font-size:21px;
  }
  .ultrasound-polaroid {
    width:200px;
    bottom:19px;
    right:-6px;
  }
  .ultrasound-polaroid figcaption {
    font-size:20px;
  }
  .hero-teddy {
    width:108px;
    right:-17px;
  }
  .collage-star {
    right:-12px;
    top:193px;
  }
  .collage-note {
    font-size:26px;
    bottom:-5px;
  }
  .details-grid {
    gap:24px;
    grid-template-columns:1.1fr 1fr;
  }
  .details-grid .section-heading h2 {
    font-size:29px;
  }
  .program-time {
    font-size:36px;
  }
  .program-item h3 {
    font-size:23px;
  }
}
@media(max-width:620px) {
  .cover {
    padding:42px 20px 27px;
  }
  .cover-kicker {
    font-size:12px;
    margin-bottom:21px;
  }
  .cover h1 {
    font-size:51px;
  }
  .envelope-scene {
    margin-top:86px;
    width:340px;
    max-width:100%;
    padding-bottom:30px;
  }
  .envelope {
    width:92%;
    aspect-ratio:1.6;
  }
  .cover-postmark {
    width:73px;
    height:73px;
    left:-3px;
    top:-29px;
    font-size:12px;
  }
  .cover-postmark b {
    font-size:15px;
  }
  .cover-teddy {
    width:117px;
    right:-9px;
    bottom:2px;
  }
  .spark-one {
    left:-12px;
    bottom:50px;
    font-size:31px;
  }
  .spark-two {
    right:9px;
    top:-39px;
    font-size:28px;
  }
  .wax-seal {
    width:65px;
    height:65px;
    top:53%;
  }
  .wax-seal>span {
    width:46px;
    height:46px;
    font-size:22px;
  }
  .seal-amp {
    font-size:17px;
  }
  .envelope-letter {
    inset:9px 12px 15px;
    padding:20px 8px;
  }
  .letter-names {
    font-size:33px;
    margin-top:13px;
  }
  .cover-footer {
    font-size:12px;
    padding-top:40px;
    line-height:1.7;
  }
  .cover-footer span {
    padding:0 7px;
  }
  .page-header {
    padding:20px 27px 21px;
  }
  .monogram {
    font-size:25px;
  }
  .header-date {
    font-size:12px;
  }
  .invitation-paper {
    width:calc(100% - 36px);
    padding:38px 22px 27px;
  }
  .invitation-paper:before {
    inset:4px -5px -5px;
    transform:none;
  }
  .hero {
    display:flex;
    flex-direction:column;
    gap:22px;
    align-items:stretch;
    text-align:center;
  }
  .hero-copy .eyebrow {
    font-size:12px;
    margin-bottom:18px;
  }
  .hero h1 {
    font-size:60px;
    line-height:1.04;
    margin-bottom:19px;
  }
  .hero h1 br:nth-of-type(2) {
    display:none;
  }
  .hero h1 em {
    display:block;
    font-size:.75em;
    white-space:nowrap;
    line-height:1.22;
    margin-top:5px;
  }
  .parents {
    font-size:29px;
    margin-top:20px;
  }
  .parents span {
    font-size:23px;
  }
  .date-ticket {
    margin:26px auto 0;
    text-align:left;
    padding:12px;
    gap:12px;
    max-width:100%;
  }
  .ticket-day {
    font-size:50px;
    padding-right:15px;
  }
  .date-ticket strong {
    font-size:22px;
  }
  .date-ticket>div>span:last-child {
    font-size:14px;
  }
  .ticket-label {
    font-size:12px;
  }
  .photo-collage {
    height:395px;
    max-width:320px;
    width:100%;
    margin:19px auto 0;
  }
  .couple-polaroid {
    width:192px;
    left:7px;
    top:11px;
    text-align:left;
    padding:10px 10px 8px;
  }
  .couple-polaroid figcaption {
    font-size:21px;
  }
  .hero-teddy {
    width:115px;
    top:0;
    right:-3px;
  }
  .ultrasound-polaroid {
    width:207px;
    right:-1px;
    bottom:13px;
    padding:10px 10px 8px;
  }
  .ultrasound-polaroid figcaption {
    font-size:21px;
  }
  .collage-note {
    bottom:-11px;
    left:2px;
    font-size:27px;
  }
  .collage-star {
    right:2px;
    top:178px;
    font-size:39px;
  }
  .love-note {
    margin:52px auto 40px;
  }
  .love-note p {
    font-size:16px;
    line-height:1.85;
  }
  .countdown-section {
    width:calc(100% + 12px);
    margin:0 -6px;
    padding:31px 10px 24px;
  }
  .countdown-section .eyebrow {
    font-size:12px;
  }
  .countdown-section h2 {
    font-size:36px;
  }
  .countdown {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    margin-top:19px;
  }
  .countdown>div {
    min-width:0;
  }
  .countdown>div>span {
    font-size:43px;
  }
  .countdown small {
    font-size:12px;
  }
  .countdown-colon {
    display:none;
  }
  .program-section {
    margin-top:55px;
  }
  .section-heading {
    gap:13px;
    margin-bottom:24px;
  }
  .section-heading h2 {
    font-size:34px;
  }
  .program-paper {
    grid-template-columns:1fr;
    transform:rotate(.6deg);
  }
  .program-paper:before,.program-paper:after {
    display:none;
  }
  .program-item {
    padding:20px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    text-align:left;
  }
  .program-item+.program-item {
    border-top:1px dashed #c9b494;
  }
  .program-time {
    font-size:36px;
    min-width:105px;
  }
  .program-time small {
    font-size:19px;
  }
  .program-item h3 {
    font-size:23px;
    margin:0;
    flex:1;
    text-align:right;
    line-height:1.1;
  }
  .details-grid {
    display:block;
    margin-top:50px;
  }
  .details-grid .section-heading h2 {
    font-size:34px;
  }
  .details-grid .section-heading {
    gap:13px;
  }
  .dress-section {
    margin-top:47px;
  }
  .location-paper {
    padding:23px 17px 17px;
  }
  .location-paper h3 {
    font-size:30px;
  }
  .location-paper>p {
    font-size:13px;
  }
  .map-frame {
    height:215px;
  }
  .map-link {
    font-size:14px;
  }
  .dress-paper {
    padding:35px 18px 25px;
    width:calc(100% - 9px);
    margin:auto;
    transform:rotate(1.6deg);
  }
  .swatch {
    width:80px;
    height:87px;
  }
  .fabric-swatches {
    gap:24px;
    margin:24px auto;
  }
  .dress-paper h3 {
    font-size:35px;
  }
}
@media(max-width:360px) {
  .cover h1 {
    font-size:45px;
  }
  .envelope-scene {
    margin-top:78px;
  }
  .cover-teddy {
    width:106px;
  }
  .hero h1 {
    font-size:52px;
  }
  .parents {
    font-size:26px;
  }
  .invitation-paper {
    padding-right:18px;
    padding-left:18px;
  }
  .photo-collage {
    height:360px;
  }
  .couple-polaroid {
    width:173px;
    left:3px;
  }
  .hero-teddy {
    width:97px;
    right:0;
  }
  .ultrasound-polaroid {
    width:186px;
    right:-1px;
  }
  .ultrasound-polaroid figcaption {
    font-size:18px;
  }
  .couple-polaroid figcaption {
    font-size:17px;
  }
  .collage-star {
    top:163px;
  }
  .section-heading h2,.details-grid .section-heading h2 {
    font-size:30px;
  }
  .program-item {
    padding-left:18px;
    padding-right:18px;
  }
  .program-item h3 {
    font-size:21px;
  }
  .program-time {
    font-size:32px;
    min-width:91px;
  }
  .countdown {
    gap:7px;
  }
  .countdown>div>span {
    font-size:39px;
  }
  .countdown small {
    font-size:12px;
  }
}
@media(max-height:780px) and (min-width:621px) {
  .cover {
    padding-top:23px;
  }
  .cover-kicker {
    margin-bottom:12px;
  }
  .cover h1 {
    font-size:49px;
  }
  .envelope-scene {
    margin-top:43px;
    width:470px;
  }
  .cover-teddy {
    width:136px;
  }
  .cover-footer {
    padding-top:19px;
  }
  .wax-seal {
    width:67px;
    height:67px;
  }
  .wax-seal>span {
    width:49px;
    height:49px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .cover.opening .envelope-letter {
    transform:none;
  }
  .cover.opening .envelope-flap {
    transform:none;
  }
}

/* Paper details and distributed scrapbook stickers. */
.polaroid, .polaroid > img, .couple-photo, .invitation-paper,
.date-ticket, .countdown-section, .program-paper, .location-paper,
.map-frame, .map-link, .dress-paper, .swatch, .open-invitation-link {
  border-radius: 3px;
}
.open-invitation-link {
  margin-top: 22px;
  padding: 11px 24px;
  min-height: 44px;
  font-size: 16px;
  background: #786048;
  color: #fffdf7;
  border: 1px solid #786048;
  transition: background .2s, opacity .2s;
}
.open-invitation-link:hover { background: #604b37; }
.cover.opening .open-invitation-link { opacity: 0; }
.collage-note {
  position: static;
  grid-column: 2;
  justify-self: center;
  margin-top: -7px;
  font-size: 32px;
  transform: rotate(-5deg);
  line-height: 1.2;
  z-index: 5;
}
.hero { row-gap: 12px; }
.photo-collage { margin-bottom: 10px; }
.love-note { margin: 40px auto 54px; max-width: 650px; }
.love-note p { font-family: var(--hand); font-size: 30px; line-height: 1.35; color: var(--ink); }
.countdown-section { padding-top: 32px; padding-bottom: 32px; }
.countdown-sticker {
  position: absolute;
  left: -18px;
  top: -40px;
  width: 128px;
  height: 96px;
  object-fit: contain;
  transform: rotate(-9deg);
  pointer-events: none;
}
.countdown { margin-top: 15px; }
.section-heading { margin-bottom: 23px; }
.section-heading h2, .details-grid .section-heading h2 { font-size: 39px; }
.program-item { display: flex; flex-direction: column; align-items: center; padding: 21px 12px 15px; }
.program-sticker { height: 90px; width: 116px; object-fit: contain; margin-top: 12px; pointer-events: none; }
.program-item:first-child .program-sticker { transform: rotate(-7deg); }
.program-item:last-child .program-sticker { transform: rotate(7deg); }
.dress-paper { padding: 27px 18px 17px; }
.dress-sticker { width: 180px; height: 135px; object-fit: contain; margin: 20px auto 0; transform: rotate(-7deg); pointer-events: none; }
.details-grid { margin-bottom: 28px; }
.invitation-paper { margin-bottom: 100px; }
@media (max-width: 620px) {
  .collage-note { margin: 2px auto 0; align-self: center; font-size: 30px; }
  .hero { gap: 20px; }
  .photo-collage { margin-bottom: 0; }
  .love-note { margin: 31px auto 54px; }
  .love-note p { font-size: 27px; }
  .countdown-sticker { width: 83px; height: 62px; left: -8px; top: -32px; }
  .section-heading h2, .details-grid .section-heading h2 { font-size: 34px; }
  .program-item { display: grid; grid-template-columns: 82px 1fr 62px; gap: 8px; padding: 18px 13px; text-align: left; }
  .program-time { font-size: 30px; min-width: 0; }
  .program-time small { font-size: 18px; }
  .program-item h3 { font-size: 24px; text-align: left; }
  .program-sticker { width: 62px; height: 74px; margin: 0; }
  .dress-sticker { width: 175px; height: 131px; }
  .invitation-paper { margin-bottom: 85px; }
}
@media (max-width: 360px) {
  .program-item { grid-template-columns: 71px 1fr 48px; gap: 7px; padding: 18px 10px; }
  .program-time { font-size: 28px; }
  .program-time small { font-size: 16px; }
  .program-item h3 { font-size: 22px; }
  .program-sticker { width: 48px; height: 65px; }
}

.cover-kicker { font-size: 16px; }
.cover-footer { font-size: 14px; }
.hero-copy > .eyebrow { font-size: 16px; }

.envelope-letter, .program-item, .tape, .invitation-paper::before { border-radius: 3px; }

/* Keep each activity title on its own line at phone widths. */
.program-item { row-gap: 14px; }
@media (max-width: 620px) {
  .program-item { grid-template-columns: 1fr 66px; grid-template-rows: auto auto; gap: 14px 22px; padding: 22px 20px; }
  .program-time { grid-column: 1; grid-row: 1; }
  .program-item h3 { grid-column: 1; grid-row: 2; margin: 0; }
  .program-sticker { grid-column: 2; grid-row: 1 / 3; }
}