:root{color-scheme:light;--ink:#726351;--gold:#b28a5d;--u:1px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#d9cec5;color:var(--ink)}body{-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #8f6b42;outline-offset:5px}#invitation{position:relative;width:100%;height:100dvh;overflow:hidden}#details,#intro{position:absolute;inset:0}#details{overflow:hidden}.card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(1080 * var(--u));height:calc(1920 * var(--u));background:#efeae3 url('assets/bg.webp') center/100% 100% no-repeat}.row{position:absolute;left:50%;top:calc(var(--y) * var(--u));transform:translate(-50%,-50%);width:calc(880 * var(--u));margin:0;text-align:center;opacity:0}.started .row{animation:reveal 1.4s both;animation-delay:var(--delay)}.caps{font-family:'Cormorant Garamond',Georgia,serif;text-transform:uppercase;font-variant-numeric:lining-nums;letter-spacing:calc(var(--tracking,5) * var(--u));font-weight:500}.eyebrow{font-size:calc(26 * var(--u));--tracking:10;color:var(--gold);line-height:1.05}.name{font-family:'Bodoni Moda',Georgia,serif;font-weight:400;font-size:calc(176 * var(--u));line-height:1.3;letter-spacing:calc(-8 * var(--u));padding-inline:.12em}.conjunction{font-family:'Pinyon Script',cursive;font-size:calc(158 * var(--u));line-height:1;color:var(--gold)}.ornament{display:flex;align-items:center;justify-content:center;gap:calc(3 * var(--u));color:var(--gold);font-size:calc(25 * var(--u))}.ornament:before,.ornament:after{content:'';width:calc(112 * var(--u));height:1px;background:linear-gradient(90deg,transparent,#b28a5d)}.ornament:after{transform:rotate(180deg)}.pearl:before,.pearl:after{width:calc(60 * var(--u))}.pearl{font-size:calc(22 * var(--u))}.message{font-family:'EB Garamond',Georgia,serif;font-size:calc(45 * var(--u));line-height:calc(57 * var(--u));width:calc(820 * var(--u))}.families{display:flex;justify-content:center;gap:calc(64 * var(--u));font-size:calc(25 * var(--u));--tracking:4.84;white-space:nowrap}.families span{display:block;margin-top:calc(11 * var(--u));font-size:calc(21.6 * var(--u));font-weight:600;color:#8f6b42;letter-spacing:calc(3.8 * var(--u))}.datebar{display:flex;align-items:center;justify-content:center;gap:calc(30 * var(--u))}.weekday{font-size:calc(33 * var(--u));font-weight:700}.time{font-size:calc(37 * var(--u));font-weight:700;--tracking:8}.medallion{position:relative;width:calc(250 * var(--u));height:calc(373.525 * var(--u));flex-shrink:0}.medallion img{width:100%;height:100%}.medallion>span{position:absolute;left:50%;transform:translate(-50%,-50%);white-space:nowrap}.day{top:38%;font:400 calc(120 * var(--u))/1 'Bodoni Moda',Georgia,serif}.month{top:62%;font-size:calc(29 * var(--u));--tracking:6;font-weight:700}.year{top:82%;font-size:calc(27 * var(--u));--tracking:8;font-weight:700}.venue{font:400 calc(47 * var(--u))/1.1 'EB Garamond',Georgia,serif}.address{font-size:calc(21.32 * var(--u));line-height:1.3;font-style:normal;--tracking:4.18}.directions{display:inline-flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));height:calc(82 * var(--u));min-width:calc(384 * var(--u));padding:0 calc(26 * var(--u));border:1px solid #b28a5d;border-radius:999px;color:var(--ink);text-decoration:none;background:linear-gradient(166deg,#fff,#fdfaf5 40%,#f2ebe0);box-shadow:0 3px 6px #82684a33,inset 0 0 0 2px white,inset 0 0 0 3px #b28a5d80;font-size:calc(29 * var(--u));--tracking:6.7}.directions svg{width:calc(30 * var(--u));height:calc(41 * var(--u));stroke:var(--gold);stroke-width:1.6}#intro{z-index:2;transition:opacity .6s;background:#efeae3}#opening{width:100%;height:100%;object-fit:cover;display:block}#open{position:absolute;left:50%;bottom:13.5%;transform:translateX(-50%);padding:13px 40px;border:1px solid #d6c5a7;border-radius:999px;background:#fffaf0ed;box-shadow:0 8px 28px #6a543244;color:#65594a;font:500 14px 'Cormorant Garamond',Georgia,serif;letter-spacing:3px;white-space:nowrap;animation:float 3s ease-in-out infinite}#intro.leaving{opacity:0;pointer-events:none}#music-toggle{position:absolute;z-index:4;right:20px;bottom:20px;width:44px;height:44px;border:1px solid #c5b49a55;border-radius:50%;background:#fbf6ecee;color:#665c50;display:grid;place-items:center;box-shadow:0 2px 8px #5b493222}#music-toggle svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#mute-mark{position:absolute;right:5px;top:1px}#status{position:absolute;bottom:8px;left:12px;z-index:5;font:12px Georgia;max-width:70%}#status:empty{display:none}@keyframes reveal{from{opacity:0;filter:blur(5px);translate:0 10px}to{opacity:1;filter:blur(0);translate:0 0}}@keyframes float{50%{translate:0 -5px}}@media(prefers-reduced-motion:reduce){.started .row{animation:none;opacity:1}#open{animation:none}#intro{transition:none}}

/* Both opening and invitation use the same stable portrait canvas. */
#invitation{height:100svh}
#intro{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(1080 * var(--u));height:calc(1920 * var(--u))}
#opening{object-fit:contain}
#open{max-width:90%;padding:12px clamp(18px,5vw,40px)}
#music-toggle{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}


/* Keep the date centered regardless of weekday and time text lengths. */
.datebar{display:grid;grid-template-columns:minmax(0,1fr) calc(250 * var(--u)) minmax(0,1fr);column-gap:calc(30 * var(--u));width:calc(880 * var(--u));justify-items:center}
.datebar .weekday{justify-self:end;white-space:nowrap;font-size:calc(30 * var(--u));letter-spacing:calc(3 * var(--u))}
.datebar .time{justify-self:start;white-space:nowrap}