/* ---------- inside the phone ---------- */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;animation:in .45s ease both;scrollbar-width:none}
.scr::-webkit-scrollbar{display:none}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.scr{animation:none}}
.pad{padding:58px 26px 26px;display:flex;flex-direction:column;gap:16px;flex:1}
.kick{font:600 10.5px/1.2 var(--text);letter-spacing:.17em;text-transform:uppercase;color:var(--emberInk)}
.dusk .kick{color:var(--ember)}
.h{font:400 34px/1.05 var(--disp);margin:0;text-wrap:balance}
.h.s{font-size:28px}
.lede{font-size:16.5px;line-height:1.55;margin:0}
.small{font-size:13px;line-height:1.5;color:var(--ink2);margin:0}
.dusk .small{color:rgba(243,236,224,.72)}
.tc{display:inline-block;font:italic 12px/1.2 var(--text);color:#8a5a1f;background:rgba(217,163,91,.18);padding:3px 7px;border-radius:5px;margin-left:4px;white-space:nowrap}
.dusk .tc{color:#f0c98f;background:rgba(217,163,91,.2)}
.grow{flex:1}
.btn{display:block;width:100%;text-align:center;background:var(--dusk);color:var(--paper);border-radius:999px;padding:16px 18px;font-size:16px;letter-spacing:.01em;transition:transform .12s ease}
.btn:active{transform:scale(.98)}
.btn:focus-visible,.opt:focus-visible,.day:focus-visible,.chip:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.dusk .btn{background:var(--paper);color:var(--dusk)}
.link{display:block;text-align:center;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;color:var(--ink2);padding:6px}
.dusk .link{color:rgba(243,236,224,.8)}
.hero-img{height:300px;flex:none;background-size:cover;background-position:50% 60%;position:relative}
.hero-img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,15,.1),rgba(243,236,224,0) 60%,var(--paper))}
.hero-img + .pad{padding-top:6px}
/* film screens */
.dusk{background:var(--dusk);color:var(--paper)}
.dusk video,.dusk .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:50% 50%}
.dusk .tone{position:absolute;inset:0;background:#b8873f;mix-blend-mode:soft-light;opacity:.3;pointer-events:none}
.dusk .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,12,.7) 0%,rgba(18,16,12,.15) 34%,rgba(18,16,12,.25) 55%,rgba(14,12,9,.92) 100%);pointer-events:none}
.dusk .pad{position:relative;z-index:1}
.welcome{align-items:center;text-align:center}
.welcome .to{font:italic 17px/1 var(--text);opacity:.85;margin-top:10px}
.welcome .name{font:400 44px/1 var(--disp);margin:6px 0 0;text-wrap:balance}
.welcome .meta{font-size:14.5px;line-height:1.6;opacity:.88}
.quote{font:italic 16px/1.5 var(--text);margin:0}
.quote b{font:400 15px var(--hand);font-style:normal;margin-left:6px}
.names{font:400 17px/1.9 var(--hand);text-wrap:balance}
/* lock screen */
.lock{background:#0f0e0b center/cover;color:#fff}
.lock .bgimg{filter:blur(18px) brightness(.55);transform:scale(1.15)}
.lock .clock{position:relative;z-index:1;text-align:center;margin-top:64px}
.lock .clock .d{font-size:15px;opacity:.85}
.lock .clock .t{font:400 76px/1 var(--disp);letter-spacing:-.01em}
.notif{position:relative;z-index:1;margin:auto 12px 0;background:rgba(243,236,224,.16);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:14px 16px;text-align:left;color:#fff;width:calc(100% - 24px)}
.notif .from{display:flex;justify-content:space-between;font-size:12.5px;opacity:.8;margin-bottom:5px}
.notif .from b{font-weight:700;letter-spacing:.04em}
.notif p{margin:0;font-size:15px;line-height:1.45}
.notif u{text-decoration:none;color:#f0c98f}
.lock .hint{position:relative;z-index:1;text-align:center;font-size:12.5px;opacity:.6;margin:14px 0 34px}
/* typeset choices (not cards) */
.opts{border-top:1px solid var(--hair)}
.opt{display:grid;grid-template-columns:22px 1fr;gap:10px;width:100%;text-align:left;padding:15px 0;border-bottom:1px solid var(--hair)}
.opt .mk{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink2);margin-top:5px}
.opt[aria-pressed="true"] .mk{border-color:var(--emberInk);background:radial-gradient(circle,var(--emberInk) 0 4px,transparent 4.5px)}
.opt b{display:block;font:400 19px/1.25 var(--disp)}
.opt span{display:block;font-size:14px;line-height:1.5;color:var(--ink2);margin-top:2px}
.opt[disabled]{opacity:.45;cursor:default}
.months{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--hair);border-radius:999px;padding:9px 14px;font-size:15px}
.chip[aria-pressed="true"]{background:var(--dusk);color:var(--paper);border-color:var(--dusk)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.field input,.field textarea{font:400 19px/1.3 var(--text);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:6px 0;border-radius:0;width:100%;resize:none}
.field textarea{font-size:16px;font-style:italic}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--emberInk)}
.people{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.people li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:16px}
.people li span{font-size:13px;color:var(--ink2);white-space:nowrap}
.people li span.ok{color:#4f6b45}
.addrow{display:grid;grid-template-columns:1fr 1.3fr auto;gap:10px;align-items:end}
.addrow input{font:400 15px var(--text);border:0;border-bottom:1px solid var(--ink2);background:transparent;padding:6px 0;min-width:0;color:var(--ink)}
.addrow button{font-size:14px;border:1px solid var(--ink);border-radius:999px;padding:7px 12px}
.progress{font-size:14.5px;line-height:1.5}
.progress .barline{height:3px;background:var(--hair);border-radius:3px;margin-top:8px;overflow:hidden}
.progress .barline i{display:block;height:100%;background:var(--emberInk);border-radius:3px}
.msg{background:#e9e1d2;border-radius:18px 18px 18px 4px;padding:12px 14px;font-size:14.5px;line-height:1.5}
.msg small{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:4px;letter-spacing:.04em}
.lead{border:1px solid var(--hair);border-left:3px solid var(--emberInk);padding:10px 12px;font-size:15px;line-height:1.45}
.lead b{font:400 20px/1.2 var(--disp);display:block}
/* the calendar as a programme */
.cal{display:flex;flex-direction:column}
.wk{display:grid;grid-template-columns:86px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.wk .lab{font-size:12.5px;color:var(--ink2);line-height:1.3}
.wk .ds{display:flex;gap:4px;flex-wrap:wrap}
.day{position:relative;padding:5px 7px 6px;font-size:15.5px;border-radius:6px;line-height:1.1}
.day sup{font-size:10.5px;color:var(--ink2);margin-left:2px}
.day[aria-pressed="true"]{background:var(--dusk);color:var(--paper)}
.day[aria-pressed="true"] sup{color:var(--ember)}
.day.top:not([aria-pressed="true"]){box-shadow:inset 0 -2px 0 var(--emberInk)}
.day em{display:block;font-size:9.5px;font-style:italic;color:var(--ink2);letter-spacing:0;margin-top:2px}
.day[aria-pressed="true"] em{color:rgba(243,236,224,.7)}
.live{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(243,236,224,0),var(--paper) 30%);padding-top:22px;display:flex;flex-direction:column;gap:12px}
.live p{margin:0;font-size:15px;text-align:center}
.qs{display:flex;flex-direction:column;gap:18px}
.q h4{font:400 20px/1.2 var(--disp);margin:0 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
/* keepsake */
.card{margin:4px 6px;background:#fbf7ef;border:1px solid var(--hair);box-shadow:0 18px 40px -22px rgba(36,33,27,.45);padding:26px 22px;text-align:center;transform:rotate(-1.2deg)}
.card .who{font:400 34px/1.3 var(--hand);color:#2c2a24}
.card .at{font:italic 16px/1.4 var(--text);margin:4px 0 14px}
.card .when{font:400 22px/1.2 var(--disp)}
.card .rule{width:42px;height:1px;background:var(--emberInk);margin:14px auto}
/* reveal */
.reveal{align-items:center;text-align:center;justify-content:flex-end}
.reveal .date{font:400 46px/1.02 var(--disp);margin:4px 0 6px;text-wrap:balance}
.pay{display:flex;flex-direction:column;gap:0}
.sched{list-style:none;margin:8px 0 0;padding:0;font-size:14.5px}
.sched li{display:flex;justify-content:space-between;padding:4px 0;color:var(--ink2);font-variant-numeric:tabular-nums}
.big{font:400 48px/1 var(--disp);font-variant-numeric:tabular-nums}
.ledger{border:1px solid var(--hair);padding:18px;display:flex;flex-direction:column;gap:6px;background:#fbf7ef}
.ledger .no{font:400 13px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--emberInk)}
.ledger .t{font:400 26px/1.15 var(--disp)}
.list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.list li{padding:12px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.5}
.list li b{display:block;font:400 18px/1.25 var(--disp);margin-bottom:2px}