/* One proportional scale for every live couple crest; no transform stretching. */
:root{--crest-scale:1.25}
.cover-text .couple-crest{width:calc(60px * var(--crest-scale));height:calc(80px * var(--crest-scale))}
.letter .letter-crest{width:calc(26px * var(--crest-scale));height:calc(34px * var(--crest-scale))}
.couple-introduction{grid-template-columns:minmax(0,1fr) calc(52px * var(--crest-scale)) minmax(0,1fr)}
.couple-introduction img{width:calc(48px * var(--crest-scale));height:calc(65px * var(--crest-scale))}
.invitation-finale>img{width:calc(54px * var(--crest-scale));height:calc(74px * var(--crest-scale))}
@media(max-width:700px){.cover-text .couple-crest{width:calc(45px * var(--crest-scale));height:calc(60px * var(--crest-scale))}}
@media(max-width:600px){
  /* Keep both names together; the crest sits above, freeing the full row. */
  .couple-introduction{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start}
  .couple-introduction>div{min-width:0;grid-row:2}
  .couple-introduction>div:first-child{grid-column:1}
  .couple-introduction>div:last-child{grid-column:2}
  .couple-introduction img{grid-column:1/-1;grid-row:1;width:calc(30px * var(--crest-scale));height:calc(44px * var(--crest-scale));justify-self:center}
  .couple-introduction .section-kicker{margin-bottom:8px}
  .couple-introduction h3{font-size:clamp(17px,4.5vw,20px);line-height:1.9;text-wrap:balance;word-break:normal;overflow-wrap:normal}
  html[lang=en] .couple-introduction h3{font-size:clamp(23px,6.2vw,27px);line-height:1.35}
}
@media(max-width:359px){
  /* Very narrow or zoomed views keep the original readable stacked layout. */
  .couple-introduction{grid-template-columns:minmax(0,1fr);gap:16px}
  .couple-introduction>div:first-child,.couple-introduction>div:last-child,.couple-introduction img{grid-column:1;grid-row:auto}
}
@media(max-height:700px){.letter .letter-crest{width:calc(20px * var(--crest-scale));height:calc(26px * var(--crest-scale))}}
/* Enlarged review canvas uses the same scale as the live card. */
.card-preview .letter .letter-crest{width:calc(30px * var(--crest-scale));height:calc(40px * var(--crest-scale))}
.card-preview .letter .letter-heading{top:12px}