:root {
  color-scheme:light;
  --paper:#faf6f0;
  --ink:#2c2925;
  --accent:#b37258;
  --red:#b63745;
  --photo-shift:15%;
  --photo-rotation:1.7deg;
  --photo-scale:1.3;
  --photo-x:-7%
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#e9e3db;
  color:var(--ink);
  font-family:Georgia,"Times New Roman","Songti TC","Noto Serif TC",serif
}
.invitation {
  width:min(100%,620px);
  margin:auto;
  box-shadow:0 4px 45px #30271c12
}
.page {
  position:relative;
  width:100%
}
.cover {
  aspect-ratio:578/815;
  overflow:hidden;
  background:#293c20;
  color:#fff;
  isolation:isolate
}
.cover-photo {
  position:absolute;
  top:calc(-1 * var(--photo-shift));
  left:0;
  width:100%;
  height:auto;
  z-index:-1;
  transform-origin:55% 65%;
  transform:translateX(var(--photo-x)) rotate(var(--photo-rotation)) scale(var(--photo-scale))
}
.cover h1 {
  position:absolute;
  top:9.8%;
  left:0;
  width:100%;
  font-size:clamp(40px,11.6vw,72px);
  font-weight:400;
  line-height:1.05;
  text-align:center;
  margin:0;
  text-shadow:0 2px 12px #0003
}
.cover h1 span {
  display:block;
  color:#ffc36d;
  font-family:"Snell Roundhand","Brush Script MT",cursive;
  font-weight:400;
  font-style:italic;
  font-size:clamp(54px,14.8vw,92px);
  margin-top:4px
}
.signature,.script {
  font-family:"Snell Roundhand","Brush Script MT",cursive;
  font-style:italic;
  font-weight:400
}
.signature {
  position:absolute;
  bottom:2.8%;
  left:0;
  width:100%;
  text-align:center;
  font-size:clamp(25px,6.5vw,40px);
  margin:0;
  text-shadow:0 2px 8px #0009
}
.details {
  background:var(--paper);
  padding:66px 40px 40px;
  text-align:center
}
.details h2 {
  font-size:clamp(30px,7.5vw,46px);
  font-weight:400;
  margin:0;
  line-height:1.3
}
.details h2 span {
  font-size:.48em;
  font-style:italic;
  color:var(--accent)
}
.invitation-label {
  font-size:clamp(29px,7.2vw,44px);
  color:var(--accent);
  margin:9px 0 46px
}
.families {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.role {
  font-size:15px;
  color:var(--accent);
  margin:0 0 8px
}
.families h3 {
  font-size:21px;
  letter-spacing:.16em;
  font-weight:400;
  margin:0
}
.parents {
  margin-top:23px
}
.parent-names {
  font-size:17px;
  letter-spacing:.12em;
  line-height:1.9;
  margin:0
}
.welcome {
  font-size:12px;
  line-height:2.2;
  letter-spacing:.08em;
  margin:35px 0 40px
}
.calendar {
  margin:auto;
  max-width:460px
}
.month {
  color:var(--red);
  font-size:20px;
  letter-spacing:.25em;
  margin:0 0 25px
}
.month span {
  display:block;
  font-size:11px;
  letter-spacing:.2em;
  margin-top:9px
}
table {
  width:100%;
  table-layout:fixed;
  border-collapse:collapse
}
th {
  font-weight:400;
  font-style:italic;
  font-size:13px;
  padding-bottom:16px
}
td {
  height:45px;
  font-size:20px;
  position:relative
}
.wedding-date {
  color:var(--red)
}
.wedding-date svg {
  position:absolute;
  top:50%;
  left:50%;
  width:calc(100% + 9px);
  height:74px;
  transform:translate(-50%,-43%);
  overflow:visible;
  fill:none;
  stroke:var(--red);
  stroke-width:1.2;
  stroke-dasharray:1 2
}
.time {
  font-size:17px;
  letter-spacing:.1em;
  margin:45px 0 28px;
  line-height:2
}
.time span {
  font-size:16px
}
.venue {
  margin:30px 0
}
.venue h3 {
  font-weight:400;
  font-size:25px;
  letter-spacing:.14em;
  margin:0 0 13px
}
.venue p {
  font-size:12px;
  line-height:1.8;
  margin:0
}
.closing {
  color:var(--accent);
  font-size:26px;
  margin:42px 0 0
}
@media(min-width:700px) {
  body {
  padding:28px 0
}

}
@media(max-width:380px) {
  .details {
  padding:48px 22px 32px
}
.month {
  font-size:18px
}
th {
  font-size:12px
}
.venue p {
  font-size:11px
}

}


/* Reference-inspired cover typography;
   bundled fonts keep rendering consistent. */
@font-face {
  font-family:"Wedding Cormorant";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/cormorant-regular.ttf") format("truetype")
}

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

.cover h1 {
  font-family:"Wedding Cormorant",Georgia,serif;
  font-size:clamp(48px,13.4vw,83px);
  line-height:.86;
  letter-spacing:-.035em;
  text-shadow:none
}

.cover h1 span {
  font-family:"Wedding Cormorant",Georgia,serif;
  font-size:clamp(66px,19vw,118px);
  font-style:italic;
  line-height:.88;
  letter-spacing:-.055em;
  margin-top:2px;
  color:#ffbe65;
  text-shadow:1px 1px 0 #d36b35,2px 2px 0 #b95c32;
  transform:scaleX(.92);
  transform-origin:center
}

/* Connected calligraphy for the month;
   fine signature strokes for the names. */
@font-face {
  font-family:"Wedding Italianno";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/italianno.ttf") format("truetype")
}

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

.cover h1 span {
  font-family:"Wedding Italianno",cursive;
  font-style:normal;
  font-size:clamp(82px,23vw,143px);
  letter-spacing:0;
  line-height:.78;
  margin-top:4px;
  transform:none;
  text-shadow:1px 1px 0 #d36b35,1.5px 1.5px 0 #b95c32
}

.signature {
  font-family:"Wedding WindSong",cursive;
  font-style:normal;
  font-size:clamp(26px,7.2vw,45px);
  text-shadow:0 1px 3px #0006
}


/* Custom lettering assets;
   accessible names remain in the image alt text. */
.month-lettering {
  display:block;
  width:88%;
  height:auto;
  margin:-10px auto 0
}

.signature {
  width:62%;
  left:19%;
  bottom:2.6%;
  margin:0;
  line-height:0;
  text-shadow:none
}

.signature img {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 1px 1px #0004)
}

.signature {
  width:52%;
  left:24%;
  bottom:3%
}

/* Reference revision: compact signature, tall narrow month bowls. */
.month-lettering {
  width:80%;
  margin:-8px auto 0
}

.signature {
  width:42%;
  left:29%;
  bottom:3.2%
}


/* Selected signature: 03 Passions Conflict, lowercase and compact. */
@font-face {
  font-family:"Wedding Passions Conflict";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/passionsconflict.ttf") format("truetype")
}

.signature {
  font-family:"Wedding Passions Conflict",cursive;
  font-style:normal;
  font-weight:400;
  font-size:clamp(32px,8.8vw,55px);
  line-height:1.15;
  width:100%;
  left:0;
  bottom:3.2%;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 1px 2px #0005
}


@font-face {
  font-family:"Wedding Mrs Saint Delafield";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/mrssaintdelafield.ttf") format("truetype")
}

.signature {
  font-family:"Wedding Mrs Saint Delafield",cursive;
  font-size:clamp(32px,8.8vw,55px)
}


/* Golden Hopes personal-use edition for local preview. See bundled license. */
@font-face {
  font-family:"Wedding Golden Hopes";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/golden-hopes-personal.otf") format("opentype")
}

.cover h1 .golden-hopes {
  font-family:"Wedding Golden Hopes",cursive;
  font-style:normal;
  font-weight:400;
  font-size:clamp(65px,18vw,112px);
  line-height:1.1;
  letter-spacing:0;
  margin-top:-12px;
  transform:none;
  color:#ffc16b;
  text-shadow:1px 1px 0 #bd6036;
  font-feature-settings:"liga" 1,"calt" 1
}


/* Selected signature: custom lowercase lettering with aligned baseline. */
.signature {
  width:42%;
  left:29%;
  bottom:3.2%;
  font-size:0;
  line-height:0;
  text-shadow:none
}

.signature img {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 1px 1px #0004)
}