/* ---------- a letter ---------- */
.letter-card { position:relative; margin-top:28px; padding:30px 20px 26px; }
.frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.frame path { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.frame .bgfill { fill:var(--paper-2); stroke:none; }
.letter-card > *:not(.frame):not(.perch) { position:relative; }
.letter p { font-size:17px; line-height:2.05; }
.letter p + p { margin-top:16px; }
.letter .hi { font-size:20px; }
.letter .sign { text-align:right; margin-top:22px; }
.letter .sign b { font-weight:400; }
.perch { position:absolute; right:14px; top:-38px; width:58px; }

/* ---------- the evening ---------- */
.flow { list-style:none; margin-top:24px; position:relative; }
.flow::before { content:''; position:absolute; left:50%; top:30px; bottom:30px; border-left:2px dashed rgba(42,36,32,.35); }
.flow li { position:relative; text-align:center; padding:12px 0 22px; }
.flow .art { position:relative; width:72%; margin:0 auto; aspect-ratio:480/440; background:var(--paper); }
.flow .art img { width:100%; height:100%; object-fit:contain; }
.flow .time { display:inline-block; position:relative; margin-top:4px; padding:0 14px; background:var(--paper); font-family:var(--label); font-weight:500; font-size:26px; letter-spacing:.08em; color:var(--red-ink); }
.flow h3 { position:relative; font-weight:400; font-size:24px; letter-spacing:.18em; padding-left:.18em; line-height:1.5; background:var(--paper); display:table; margin:0 auto; padding:0 12px; }
.flow h3 small { font-family:var(--label); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--mute); margin-left:6px; }
.flow p { position:relative; background:var(--paper); display:table; margin:4px auto 0; padding:0 10px; font-size:18px; color:var(--ink); }

/* ---------- when & where ---------- */
.venue-art { width:88%; margin:22px auto 0; aspect-ratio:600/363; }
.venue-art img { width:100%; height:100%; }
.when { text-align:center; margin-top:14px; }
.when .date { font-family:var(--label); font-weight:500; font-size:40px; letter-spacing:.06em; line-height:1.2; }
.when .date small { font-size:.45em; letter-spacing:.2em; color:var(--red-ink); margin-left:6px; }
.when .day { font-size:19px; letter-spacing:.12em; }
.cd { display:flex; justify-content:center; gap:12px; margin-top:16px; min-height:84px; }
.cd-cell { position:relative; width:78px; padding:8px 0 6px; text-align:center; }
.cd-cell b { display:block; font-family:var(--label); font-weight:500; font-size:30px; line-height:1.2; }
.cd-cell span { font-size:15px; color:var(--mute); }
.cd-msg { align-self:center; font-size:24px; letter-spacing:.2em; color:var(--red-ink); }
.where { position:relative; margin-top:26px; padding:24px 20px 22px; text-align:center; }
.where h3 { position:relative; font-weight:400; font-size:21px; line-height:1.6; }
.where .addr { position:relative; margin-top:6px; font-size:17px; line-height:1.8; color:var(--mute); }
.nav { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.nav .btn { padding:8px 4px; font-size:16px; }
.row2 { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.cal-hint { position:relative; margin-top:12px; font-size:16px; line-height:1.7; text-align:left; padding:8px 12px; border-left:3px solid var(--red); background:rgba(178,58,46,.06); }
.cal-hint[hidden] { display:none; }
.cal-hint .btn { margin-top:8px; }
.park { position:relative; display:flex; align-items:center; gap:12px; margin:18px auto 0; font-size:17px; line-height:1.7; text-align:left; }
.park svg { flex:0 0 40px; width:40px; height:40px; color:var(--red); }
.letter .cl { display:inline-block; }
.nav .btn { white-space:nowrap; }
@media (max-width:350px) { .nav { gap:5px; } .nav .btn { font-size:14.5px; padding:8px 2px; } }
/* no one-character orphans: break short Chinese lines only at clause boundaries */
.cl { display:inline-block; }
p, h3 { text-wrap:balance; }