@font-face{
  font-family:Invitation Serif;src:url(assets/invitation-serif.woff) format("woff");font-weight:700;font-display:swap
}
:root{
  color-scheme:light;
  --bg:#f8f1e3;--surface:#fffaf0;--raised:#f4eadb;--text:#2f201f;
  --muted:#64514b;--rose:#852f45;--line:#d4bc92;
  --gold:#a17a43;--ink:#742b3e;--inv-serif:"Invitation Serif","Noto Serif CJK KR",serif;
}
body{background:radial-gradient(ellipse at top,#fffaf0 0%,transparent 48rem),var(--bg)}
h1,h2,h3,.brand,.polaroid span,.memory-print figcaption{font-family:var(--inv-serif)}
.bar{background:#fff9efeF}
.brand i{border-color:var(--gold)}
.primary{color:#fff7ed;background:var(--ink);border:1px solid var(--ink)}
.primary:hover{background:#592030}
.bgm-toggle{background:#fffaf2;color:var(--ink);border-color:#b99166}
.bgm-toggle[aria-pressed=false]{background:#f6ead9;color:#64514b}
.invitation{
  padding-block:40px 38px;
  background:radial-gradient(ellipse at 45% 25%,#fff9ed 0%,#ecdec9 100%);
}
.invitation-card{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(18px,4vw,56px);align-items:center;
  position:relative;padding:clamp(25px,4vw,53px);
  background:repeating-linear-gradient(113deg,#9c784005 0 1px,transparent 1px 4px),#fffaf0;
  border:1px solid var(--gold);box-shadow:0 10px 28px #76553323;
}
.invitation-card::before{content:"";position:absolute;inset:6px;border:1px solid #cdb083;pointer-events:none}
.invitation-copy{text-align:center}
.invitation-copy .kicker{justify-content:center;color:#775429;letter-spacing:.15em}
.invitation-copy .kicker span{width:19px}
.invitation-copy h1{margin:15px 0 13px;font-size:clamp(2rem,4.1vw,4.1rem);letter-spacing:-.065em;line-height:1.22}
.invitation-copy h1 em{font-size:1.22em}
.invitation-names{font:700 1.05rem/1.5 var(--inv-serif);letter-spacing:.12em}
.invitation-names span{color:var(--gold);padding:0 6px}
.invitation-copy .actions{justify-content:center;margin-top:22px}
.invitation-rings{display:block;position:relative;width:54px;height:32px;margin:0 auto 10px}
.invitation-rings::before,.invitation-rings::after{content:"";position:absolute;width:29px;height:29px;border:1px solid var(--gold);border-radius:50%;left:3px;top:0}
.invitation-rings::after{left:19px;top:3px}
.invitation-photo{margin:0;padding:5px;border:1px solid var(--gold);box-shadow:0 8px 19px #67513628;background:#fffaf0}
.invitation-photo img{height:auto;aspect-ratio:1216/832;border:1px solid #b89157}
.story-links{margin-top:33px}
.story-link{border-color:#b99465}
.story-link-copy strong,.story-link-arrow{color:#fff8ed}
.story-link-copy strong{font-family:var(--inv-serif)}
.story-link-copy small{color:#ffdbc0}
.story-link::before{background:linear-gradient(90deg,#442931 4%,#442931e0 38%,#44293118 100%),linear-gradient(0deg,#271a1ea0,transparent 85%)}
.cast-section{background:#f1e6d5}
.card:focus-within,.card:hover{border-color:var(--gold)}
.portrait span{background:#fffaf0;color:var(--ink);border-color:var(--gold)}
.start-card{box-shadow:0 5px 14px #77553310}
.phone-shell{
  color-scheme:dark;
  --text:#f5edf0;--muted:#c8bac3;--rose:#eab4c4;--line:#473741;--raised:#252029
}
.phone-shell h3{font-family:var(--sans)}
#profile-dialog{
  background:var(--surface);color:var(--text);border-color:var(--gold)
}
#profile-dialog .profile-photo{background:#ead8c4}
#profile-dialog .close{background:#fffaf0;color:var(--ink);border-color:var(--gold)}
#memory-dialog{
  color-scheme:dark;--text:#f5edf0;--muted:#c8bac3;--rose:#eab4c4;--line:#473741;--raised:#252029;
  color:var(--text)
}
@media(max-width:760px){
  .invitation{padding-block:22px}
  .invitation-card{grid-template-columns:1fr;gap:23px;padding:25px}
  .invitation-copy h1{font-size:clamp(1.65rem,7.3vw,3.3rem);margin-block:9px}
  .invitation-copy .actions{margin-top:14px}
  .invitation-photo{width:min(100%,540px);justify-self:center}
}
@media(max-width:560px){
  .story-link::before{background:linear-gradient(0deg,#36232b 2%,#36232bb8 51%,#36232b18 100%)}
}