/* One linen invitation. Month, day and year accumulate in the same centered composition. */
.date-reveal { --thread:#5d644f; --thread-soft:#8d8b73; color:var(--thread); background:#f1ece2; }
.date-reveal::before { content:""; position:absolute; inset:0; background:linear-gradient(#f5f0e4c9,#f5f0e4c9),var(--date-linen) 50% 0/1800px auto; opacity:.35; pointer-events:none; }
.device:has(.date-reveal) .vignette { opacity:.08; }
.device:has(.date-reveal) #sound { color:#716c58; border-color:#716c5833; background:#f8f3e855; }
.date-card,.date-family { position:absolute; inset:calc(var(--safe-top) + 76px) 18px calc(var(--safe-bottom) + 112px); background-color:#f1ebda; background-image:linear-gradient(#f8f3e675,#f8f3e675),var(--date-mount); background-position:center; background-size:100% 100%; box-shadow:0 2px 2px #7d6a4214,0 12px 38px #6d593016; border-radius:2px; }
.date-card[hidden],.date-family[hidden] { display:none; }
.date-card { display:grid; place-items:center; }
.date-reveal:not(.date-started) .date-rev { opacity:0; }
.date-rev { width:100%; text-align:center; padding:28px 22px 65px; color:var(--thread); }
.date-rev .kicker { margin:0 0 28px; color:#7c7057; font:500 9px/1.3 var(--sans); letter-spacing:.23em; }
.date-rev .month { margin:0; color:var(--thread); font:italic 400 clamp(64px,20vw,96px)/1.06 var(--display); letter-spacing:-.065em; text-shadow:.4px 1px #fff9df,-.4px -.4px #4c523a38; }
.month-letter { display:inline-block; overflow:visible; padding:.12em .08em .25em; margin:-.12em -.08em -.25em; }
.date-day-wrap { height:clamp(132px,38vw,180px); display:grid; place-items:center; }
.date-rev .days { display:flex; justify-content:center; align-items:flex-start; margin:0; color:var(--thread); font:300 clamp(124px,37vw,176px)/1 var(--display); letter-spacing:-.085em; text-shadow:.5px 1px #fff9df,-.5px -.5px #4c523a50; }
.date-digits { display:inline-flex; }
.date-digit { display:inline-block; }
.day-ordinal { margin:.24em 0 0 .17em; font-size:.23em; font-style:italic; line-height:1; letter-spacing:-.025em; }
.date-rev .year { margin:12px 0 0; padding-left:.2em; color:#797d66; font:300 clamp(26px,8vw,36px)/1.2 var(--display); letter-spacing:.2em; }
.date-thread { width:150px; height:34px; display:block; margin:16px auto 0; fill:none; stroke:#8f9577; stroke-width:1; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px .2px #fff8e3); }
.date-thread path { stroke-dasharray:1; }
.date-actions { position:absolute; left:24px; right:24px; bottom:calc(var(--safe-bottom) + 35px); z-index:5; opacity:0; visibility:hidden; transition:opacity .5s; }
.date-actions.ready { opacity:1; visibility:visible; }
.date-actions .btn { width:100%; border-radius:3px; color:#60664f; background:#f5efdf; border:1px solid #92947766; box-shadow:0 1px 0 #fffcf0; }
.date-actions .btn::before,.date-actions .btn::after { display:none; }
/* The original family photograph stays intact inside a fine, stitched linen mount. */
.date-family { display:flex; flex-direction:column; align-items:center; padding:24px 23px 65px; text-align:center; }
.family-date { flex:none; margin:0; font:300 clamp(25px,7vw,34px)/1.12 var(--display); letter-spacing:-.035em; color:var(--thread); }
.family-caption { flex:none; margin:9px 0 0; max-width:290px; font:400 18px/1.3 var(--display); color:#756f5c; text-wrap:balance; }
.family-figure { position:relative; flex:1; min-height:0; width:100%; max-width:310px; margin:18px 0 12px; padding:6px; }
.family-figure::before { content:""; position:absolute; inset:0; border:1px dashed #a89c7e88; border-radius:2px; pointer-events:none; }
.family-figure img { width:100%; height:100%; object-fit:contain; display:block; filter:none; }
.family-figure::after { content:""; position:absolute; inset:6px; background:var(--date-linen) center/500px auto; mix-blend-mode:soft-light; opacity:.1; pointer-events:none; }
.anniversary-count { flex:none; height:59px; margin-top:10px; transform-origin:50% 50%; display:flex; justify-content:center; align-items:baseline; gap:9px; color:var(--thread); text-shadow:0 1px #fff9df; }
.anniversary-number { min-width:1.2em; text-align:right; font:300 52px/1 var(--display); letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.anniversary-caption { font:italic 400 22px/1 var(--display); }
.date-static:not(.day-visible) .date-day-wrap,.date-static:not(.day-visible) .year,.date-static:not(.day-visible) .date-thread { visibility:hidden; }
.family-counting .family-date,.family-counting .family-caption,.family-counting .family-figure { visibility:hidden; }
.family-counting .anniversary-count { transform:translateY(var(--family-count-offset)); }
@media(min-height:900px) { .date-card,.date-family { inset-block-start:calc(var(--safe-top) + 88px); inset-block-end:calc(var(--safe-bottom) + 126px); } .date-family { padding:32px 30px 75px; } .family-figure { max-width:360px; margin-top:24px; } .family-caption { font-size:21px; } .anniversary-count { height:76px; } .anniversary-number { font-size:66px; } .anniversary-caption { font-size:26px; } }
@media(max-height:700px) { .date-card,.date-family { inset:calc(var(--safe-top) + 57px) 16px calc(var(--safe-bottom) + 91px); } .date-rev { padding:18px 16px 36px; } .date-rev .kicker { margin-bottom:14px; } .date-rev .month { font-size:62px; } .date-day-wrap { height:120px; } .date-rev .days { font-size:120px; } .date-rev .year { font-size:26px; margin-top:8px; } .date-thread { margin-top:8px; width:120px; height:26px; } .date-actions { bottom:calc(var(--safe-bottom) + 22px); } .date-family { padding:17px 19px 44px; } .family-date { font-size:24px; } .family-caption { margin-top:5px; font-size:16px; } .family-figure { margin:10px 0 7px; } .anniversary-count { height:45px; } .anniversary-number { font-size:40px; } .anniversary-caption { font-size:19px; } }
@media(prefers-reduced-motion:reduce) { .date-actions { transition:none; } }

/* A spoken tease comes before the embroidered date; the date itself earns the celebration. */
.date-tease { position:absolute; inset:0; z-index:4; pointer-events:none; }
.date-tease[hidden],.tease-line[hidden] { display:none; }
.tease-line { position:absolute; inset:0; display:grid; place-items:center; padding:60px 30px; margin:0; text-align:center; text-wrap:balance; opacity:0; color:#616a52; font:300 clamp(40px,11vw,54px)/1.12 var(--display); letter-spacing:-.035em; }
.tease-next { font-style:italic; color:#8b7959; font-size:clamp(36px,10vw,48px); }
.date-reveal[data-phase="tease"] .date-card { visibility:hidden; }
.date-won .days { color:#68734f; }
.date-won .date-thread { stroke:#a38c58; }
@media(max-height:650px) { .tease-line { font-size:38px; } .tease-next { font-size:34px; } }
/* The celebratory paper belongs to the date, leaving the family photograph clear. */
.device:has(.date-reveal[data-phase="family"]) #fx { opacity:0; }