:root { --paper:#f7f5ef; --paper-edge:#e7e0d2; --ink:#182433; --ink-soft:#5f6b78; --ink-faint:#98a0a8; --accent:#d95745; --accent-tint:#f8e7e2; --ochre:#e4a936; --blue:#4d7894; --rule:#dddcd5; --white:#fffdf8; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { min-width:320px; margin:0; display:flex; align-items:center; justify-content:center; padding:18px; background:var(--paper); color:var(--ink); font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
.card { width:100%; max-width:420px; touch-action:pan-y; }
.carousel-frame { position:relative; width:100%; }
.calendar-sheet { overflow:hidden; border:1px solid var(--paper-edge); border-radius:18px; background:var(--white); box-shadow:0 1px 2px rgba(24,36,51,.04),0 20px 46px -25px rgba(24,36,51,.28); }
.date-panel { position:relative; padding:25px 25px 20px; background:#fffdf8; }
.date-panel::after { position:absolute; right:18px; bottom:-5px; left:18px; height:10px; border-top:2px dotted var(--rule); content:""; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 31px; color:var(--ink-soft); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dot { width:7px; height:7px; flex:none; transform:rotate(45deg); border-radius:2px; background:var(--accent); }
.label { display:flex; align-items:center; gap:8px; margin:0 0 7px; color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.label i { font-size:12px; }
.date-row { display:block; min-height:82px; }
.date { margin:0; color:var(--ink); font-size:clamp(35px,10vw,48px); font-weight:800; letter-spacing:-.045em; line-height:1.03; }
.date-arrow { position:absolute; top:50%; z-index:2; display:grid; width:52px; height:52px; padding:0; place-items:center; border:1px solid var(--paper-edge); border-radius:50%; background:var(--white); color:var(--accent); font:400 42px/1 Manrope,sans-serif; cursor:pointer; box-shadow:0 4px 12px rgba(24,36,51,.16); transform:translateY(-50%); -webkit-tap-highlight-color:transparent; }.previous-arrow { left:-62px; }.next-arrow { right:-62px; }.date-arrow:disabled { opacity:.3; cursor:default; }.date-arrow:hover { background:var(--accent-tint); }.date-arrow:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.date-nav-note { margin:3px 35px 0; color:var(--ink-faint); font-size:9px; letter-spacing:.03em; text-align:center; }
.date.is-changing { animation:date-swap .22s ease both; } @keyframes date-swap { from { opacity:.2; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
.art-panel { position:relative; height:245px; margin:0; overflow:hidden; background:#eee5d5; }
.art-panel::after { position:absolute; inset:0; background:linear-gradient(180deg,rgba(24,36,51,.02),rgba(24,36,51,.18)); content:""; pointer-events:none; }
.art-panel img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; filter:sepia(.16) saturate(.78) contrast(.96); }
.art-panel figcaption { position:absolute; left:18px; bottom:18px; z-index:1; padding:14px 20px 13px 18px; background:rgba(0,0,0,.7); color:var(--white); font-size:10px; font-weight:700; letter-spacing:.05em; line-height:1.35; text-shadow:0 1px 3px rgba(0,0,0,.35); text-transform:uppercase; box-shadow:-8px -8px 0 rgba(0,0,0,.22); backdrop-filter:blur(2px); }
.details-panel { padding:22px 25px 25px; background:var(--white); }
.meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; margin:0 0 22px; color:var(--ink-soft); font-size:16px; font-weight:500; }.meta i { width:15px; color:var(--accent); font-size:13px; text-align:center; }.meta .sep { color:var(--ink-faint); }.meta .place { color:var(--ink); font-weight:700; }
.countdown-row { display:flex; align-items:center; gap:9px; margin-bottom:5px; }.live-dot { position:relative; width:7px; height:7px; flex:none; border-radius:50%; background:var(--accent); }.live-dot::after { position:absolute; inset:-5px; border:1px solid var(--accent); border-radius:50%; content:""; opacity:.5; animation:pulse 2.2s ease-out infinite; } @keyframes pulse { 0% { transform:scale(.6); opacity:.5; } 100% { transform:scale(2.1); opacity:0; } }.live-label { color:var(--ink-faint); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.countdown { margin:0; color:var(--ink); font-size:21px; font-variant-numeric:tabular-nums; font-weight:700; letter-spacing:-.02em; }.countdown-caption { margin:4px 0 0; color:var(--ink-soft); font-size:12.5px; }
.stay-in-touch { margin-top:23px; padding-top:20px; border-top:1px solid var(--rule); }.stay-in-touch h2 { margin:0 0 5px; color:var(--ink); font-size:20px; font-weight:800; letter-spacing:-.035em; }.stay-in-touch h2 i { margin-right:4px; color:var(--accent); font-size:15px; }.stay-in-touch p { margin:0 0 12px; color:var(--ink-soft); font-size:13px; line-height:1.45; }.sender-form-field { min-height:46px; }.sender-form-field iframe { max-width:100%; }
@media (min-width:560px) { body { padding:28px; }.date-panel { padding:30px 30px 22px; }.details-panel { padding:24px 30px 30px; }.art-panel { height:270px; } }
@media (max-width:559px) { .date-arrow { width:44px; height:44px; font-size:36px; }.previous-arrow { left:-13px; }.next-arrow { right:-13px; } }
@media (prefers-reduced-motion:reduce) { .live-dot::after,.date.is-changing { animation:none; } }