/* Mahogany lacquer, antique gold, sage engraving and a continuous ivory paper. */
:root{--mahogany:#652b29;--mahogany-dark:#4d201f;--mahogany-light:#773831;--garden-green:#788574;--sage-ink:#64715f;--forest:var(--mahogany);--forest-dark:var(--mahogany-dark);--ink:#665044;--gold:#b29455}
.background-engraving{background-image:url('assets/engraved-garden-v2.jpg');background-size:auto 110%;opacity:.28}
.background-flora{opacity:.08}
.letter:after{background-image:url('assets/engraved-garden-v2.jpg');background-size:cover}
.envelope{filter:drop-shadow(0 12px 20px #49332220)}
.envelope-lining{background:#f7efdf;border:1px solid #b2945560;border-radius:8px;box-shadow:inset 0 0 0 3px #fff9eb;opacity:1}
.opening .envelope-lining{background:linear-gradient(135deg,var(--mahogany-light),var(--mahogany-dark));box-shadow:inset 0 0 0 6px var(--mahogany),inset 0 0 0 7px #b2945570}
.envelope-body{clip-path:none;border-radius:8px;background:#f7efdf;box-shadow:inset 0 0 0 1px #b2945555}
.envelope-body .sheet-art{mask-image:linear-gradient(to bottom,transparent 0%,transparent 51%,#000 63%,#000 100%)}
.opening .envelope-body{clip-path:inset(48% 0 0)}
/* Native transparency supplies the scalloped edge; no hand-cut CSS polygon. */
.flap{inset:0 0 auto;clip-path:none;overflow:visible;transform-origin:50% 2%;filter:drop-shadow(0 3px 3px #44362320)}
.flap-art{display:block;width:100%;height:auto;pointer-events:none}
.flap:after{content:none}
.lotus-seal{overflow:visible;isolation:isolate;left:42%;width:16%;height:auto;aspect-ratio:1;top:40.5%;background:linear-gradient(145deg,#74342f,var(--mahogany-dark));border:1px solid #c3a064;border-radius:50%;box-shadow:inset 0 0 0 3px var(--mahogany),inset 0 0 0 4px #b2945570,0 3px 5px #432e221c}
.lotus-seal:before{content:none}
.lotus-seal img{position:relative;width:100%;height:100%;left:auto;top:auto;object-fit:contain;padding:12%;max-width:100%}
.guest-address{top:55.5%;left:7%;width:86%}
.guest-address>p:first-child{font-size:14px}
.guest-address .guest-name{margin-top:14px;color:var(--mahogany)}
.guest-address .guest-name[lang=en]{font-size:clamp(22px,3vw,28px)}

/* Pair columns; whole surnames/given names may wrap, never syllables. */
.person-name{min-width:0;word-break:normal;overflow-wrap:normal;text-wrap:balance}
.person-name .name-part{display:inline-block;white-space:nowrap;font:inherit;color:inherit;font-style:inherit;margin:0;padding:0;letter-spacing:0}
.entrance-heading{width:min(100%,700px)}
.entrance-heading .couple-names,.cover-text .couple-names,.letter .letter-names,.finale-names{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px;width:100%;text-align:center}
.couple-names>span:not(.ampersand){min-width:0;overflow-wrap:normal;text-wrap:balance}
.couple-names .ampersand,.letter .letter-names .ampersand{align-self:center;margin:0;padding:0}
html[lang=km] .entrance-heading h1{font-size:clamp(16px,2.8vw,25px);line-height:1.9}
html[lang=en] .entrance-heading h1{font-size:clamp(22px,3.2vw,35px);line-height:1.3}
.cover-text{width:58%;padding:110px 30px 88px}
.cover-portrait-scene{left:43%}
.cover-text h2{font-size:clamp(25px,3.1vw,32px);line-height:1.4}
html[lang=km] .cover-text h2{font-size:clamp(17px,2vw,23px);line-height:2}
.cover-text .couple-names .ampersand{font-size:.8em}
html[lang=en] .cover-text .person-name .name-part,
html[lang=en] .couple-introduction .person-name .name-part,
html[lang=en] .finale-names .person-name .name-part{display:block}
.letter .letter-names{font-size:clamp(12px,1.2vw,18px);line-height:1.4;gap:4px}
html[lang=km] .letter .letter-names{font-size:clamp(8px,.9vw,11px);line-height:1.9}
.family-grid{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:12px;align-items:start}
.family-divider{align-self:center}
.family-names span{color:var(--sage-ink)}
.couple-introduction{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:12px;align-items:start}
.couple-introduction img{width:44px;height:60px;justify-self:center;align-self:center}
.couple-introduction h3{font-size:21px;line-height:2}
html[lang=en] .couple-introduction h3{font-size:29px;line-height:1.35}
.finale-names{max-width:620px;margin-inline:auto;gap:8px;font-size:20px}
html[lang=en] .finale-names{font-size:29px;line-height:1.4}
.section-heading,.couple-introduction h3,.programme-list h3,.programme-day{color:var(--mahogany)}
.section-kicker{color:var(--sage-ink)}
.section-navigation a{color:var(--mahogany)}

/* Deep red cartouche, continuous gold frame and restrained kbach corner curls. */
.primary-button{background:var(--mahogany);box-shadow:inset 0 0 0 3px var(--mahogany),inset 0 0 0 4px #b2945544}
.primary-button:hover{background:var(--mahogany-dark)}
.primary-button.ceremony-button.button-stylized{width:260px;min-height:72px;padding:10px 34px 8px;filter:drop-shadow(0 3px 5px #4d201f18)}
.primary-button.ceremony-button.button-stylized:before{inset:0;background:repeating-linear-gradient(35deg,#b2945505 0 1px,transparent 1px 7px),repeating-linear-gradient(-35deg,#b2945505 0 1px,transparent 1px 7px),linear-gradient(145deg,#70322d,#572422);border:0;box-shadow:none;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
.primary-button.ceremony-button.button-stylized:after{inset:0;background:url('assets/mahogany-button-frame.svg') center/100% 100% no-repeat;opacity:1;mask:none;clip-path:none}
.primary-button.ceremony-button.button-stylized:hover:before{filter:brightness(1.05)}
.ceremony-button.button-stylized span:first-child{font-size:16px}
.ceremony-button.button-stylized .button-subtitle{color:#dfc99d}
.primary-button.ceremony-button.button-stylized:focus-visible{outline:2px solid var(--mahogany);outline-offset:6px}
.primary-button.ceremony-button.button-stylized:active{transform:scale(.96)}
.event-emblem{color:var(--garden-green);box-shadow:inset 0 0 0 3px var(--ivory),inset 0 0 0 4px #b294551c}
.programme-list li[data-current=true] .event-emblem{color:var(--mahogany);border-color:var(--gold);background:#f6edde}
.programme-list li[data-event=ceremony0800] time,.programme-list li[data-event=ceremony1200] time{display:inline-block;color:var(--mahogany);border-bottom:1px solid #b2945560;padding-bottom:3px}
.gift-payment:before{inset:0;border:16px solid transparent;border-image:url('assets/chamfer-stationery-frame.svg') 20 / 16px / 0 stretch;border-radius:0;clip-path:none}
.gift-payment:after{content:none}
.payment-dialog::backdrop{background:#311d1be8}
.album-dialog{background:#311d1bf5}
.event-emblem svg{stroke-width:1.6}
.cover-ornament{background-image:url('assets/engraved-garden-v2.jpg')}
.section-rule{opacity:.72}
.wedding-section{scroll-margin-top:80px}
.album-thumbnails button{border-color:#b2945544}
.album-thumbnails button[aria-pressed=true]{border-color:var(--mahogany)}
.invitation-finale .couple-crest{filter:drop-shadow(0 3px 8px #682d2c12)}
@media(max-width:700px){.cover-portrait-scene{left:0}.cover-text{width:100%;padding:clamp(360px,105vw,440px) 28px 62px}}
@media(max-width:600px){
  .background-engraving{background-size:auto 115%;opacity:.27}
  .event-emblem svg{stroke-width:1.7}
  .sound-control span{display:none}
  .toolbar .sound-control{width:44px;min-width:44px;justify-content:center;padding:6px}
  .family-grid{grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);gap:8px}
  .family-divider{display:block}
  .family-names strong,html[lang=km] .family-names strong{font-size:14px}
  html[lang=en] .family-names strong{font-size:17px}
  .family-names span{font-size:11px;white-space:normal}
  .family-grid .section-kicker{font-size:12px}
  .entrance-heading .couple-names{gap:6px}
  html[lang=km] .entrance-heading h1{font-size:clamp(14px,4vw,19px)}
  html[lang=en] .entrance-heading h1{font-size:clamp(20px,5.4vw,25px)}
  html[lang=km] .cover-text h2{font-size:clamp(14px,4vw,18px)}
  .cover-text h2{font-size:clamp(22px,5.9vw,27px)}
  .couple-introduction{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start}
  .couple-introduction>div{grid-row:2;min-width:0}
  .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:38px;height:52px;justify-self:center}
  .couple-introduction h3{font-size:clamp(13px,3.8vw,18px);line-height:2}
  html[lang=en] .couple-introduction h3{font-size:clamp(21px,5.5vw,26px)}
  .finale-names{font-size:clamp(13px,3.8vw,18px)}
  html[lang=en] .finale-names{font-size:clamp(21px,5.5vw,26px)}
}