/* The stage is the reference video's 720 x 1280 frame, scaled whole to fit the screen; the table colour of the frame's
   edges fills the rest. The WebGL canvas draws everything; the still image (+ the lettering) is the fallback.
   --u is one pixel of that frame: every line of the card's lettering is placed and sized in it, so the face scales
   as one piece. The lettering itself is transparent here: face.js prints it in gold onto the card in the scene. */
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/pinyon-script-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/pinyon-script-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/pinyon-script-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Ephesis';font-style:normal;font-weight:400;font-display:block;src:url(assets/fonts/ephesis-400-latin.woff2) format('woff2');unicode-range:U+0026}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:block;src:url(assets/fonts/eb-garamond-500-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:block;src:url(assets/fonts/eb-garamond-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:block;src:url(assets/fonts/eb-garamond-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:block;src:url(assets/fonts/eb-garamond-500i-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:block;src:url(assets/fonts/eb-garamond-500i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:500;font-display:block;src:url(assets/fonts/eb-garamond-500i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#F0F0F0;overflow:hidden;-webkit-text-size-adjust:100%}
.stage{position:fixed;left:50%;top:50%;width:min(100vw, 100dvh * 720 / 1280);aspect-ratio:720/1280;transform:translate(-50%,-50%);outline:none;-webkit-tap-highlight-color:transparent;container-type:inline-size;--u:calc(100cqw / 720)}
.stage:not(.open){cursor:pointer}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .3s}
.stage.ready canvas,.stage.open canvas{opacity:1}
.stage .still{position:absolute;inset:0;width:100%;height:100%;display:none}
.stage.nogl .still{display:block}
.stage.nogl canvas{display:none}
.stage:focus-visible{outline:2px solid #8a2432;outline-offset:4px}

/* ---- the card's lettering, on the 720 x 1280 frame (centred on the card's axis, x = 364) ---- */
.face,.sealface{position:absolute;color:transparent;pointer-events:none;-webkit-user-select:none;user-select:none;font-kerning:normal;font-synthesis:none}
.face{inset:0}
.face>*,.face .names>span,.face .fam section,.face .events p{position:absolute;left:0;width:calc(var(--u)*728);text-align:center;white-space:nowrap;line-height:1}
.face h1,.face h2,.face p{font:inherit}

/* the names: slightly smaller and moved up to make room for the family and event details */
.face .names{top:0;height:0;--fit:1;--asc:.8;--size:150;font:400 calc(var(--u)*var(--size)*var(--fit))/1 'Pinyon Script',cursive;--max:470;--stroke:.012}
.face .names .l1{top:calc(var(--u)*(505 - var(--size)*var(--fit)*var(--asc)));transform:translateX(calc(var(--u)*-12))}
.face .names .l2{top:calc(var(--u)*(610 - var(--size)*var(--fit)*var(--asc)));transform:translateX(calc(var(--u)*-4))}
.face .names .amp{font-family:'Ephesis','Pinyon Script',cursive;font-size:.92em;margin-right:.24em}

/* family block */
.face .fam{top:0;height:0}
.face .fam section{width:calc(var(--u)*260)}
.face .fam .bride{left:calc(var(--u)*(230 - 130))}
.face .fam .groom{left:calc(var(--u)*(498 - 130))}
.face .fam h2{display:block;margin-top:calc(var(--u)*675);font:500 calc(var(--u)*17)/1 'EB Garamond',serif;letter-spacing:.2em;text-transform:uppercase}
.face .fam p{display:block;margin-top:calc(var(--u)*6);font:500 calc(var(--u)*22)/1 'EB Garamond',serif}

/* date and two-stop timeline */
.face .events{top:0;height:0}
.face .events .weekday{top:calc(var(--u)*794);font:500 calc(var(--u)*17)/1 'EB Garamond',serif;letter-spacing:.16em}
.face .events .date-row{position:absolute;left:calc(var(--u)*144);top:calc(var(--u)*817);width:calc(var(--u)*432);height:calc(var(--u)*58);display:grid;grid-template-columns:1fr calc(var(--u)*2) calc(var(--u)*84) calc(var(--u)*2) 1fr;align-items:center;justify-items:center}
.face .events .date-row .month,.face .events .date-row .year{font:500 calc(var(--u)*18)/1 'EB Garamond',serif;letter-spacing:.08em}
.face .events .date-row .month{justify-self:end;margin-right:calc(var(--u)*16)}
.face .events .date-row .year{justify-self:start;margin-left:calc(var(--u)*16)}
.face .events .date-row .day{font:500 calc(var(--u)*39)/1 'EB Garamond',serif;text-align:center}
.face .events .date-divider{display:block;width:calc(var(--u)*2);height:calc(var(--u)*52);object-fit:fill}
.face .events .event-venue{top:calc(var(--u)*886);font:italic 500 calc(var(--u)*27)/1 'EB Garamond',serif;letter-spacing:.07em;text-transform:uppercase}
.face .events .event-address{top:calc(var(--u)*922);font:500 calc(var(--u)*17)/1 'EB Garamond',serif;letter-spacing:.055em;text-transform:uppercase}
.face .events .timeline{position:absolute;left:calc(var(--u)*180);top:calc(var(--u)*961);width:calc(var(--u)*360);height:calc(var(--u)*130);display:flex}
.face .events .timeline-item{position:relative;flex:1;height:100%}
.face .events .timeline-item.engagement{transform:translateX(calc(var(--u)*20))}
.face .events .timeline-item.reception{transform:translateX(calc(var(--u)*-20))}
.face .events .timeline-rule{position:absolute;left:0;top:0;width:calc(var(--u)*360);height:calc(var(--u)*60);object-fit:fill}
.face .events .timeline-icon{position:absolute;left:50%;top:0;width:calc(var(--u)*100);height:calc(var(--u)*60);object-fit:contain;transform:translateX(-50%)}
.face .events .timeline-item .event-time{left:0;top:calc(var(--u)*64);width:100%;font:500 calc(var(--u)*25)/1 'EB Garamond',serif;letter-spacing:.08em}
.face .events .timeline-item .event-label{left:0;top:calc(var(--u)*96);width:100%;font:500 calc(var(--u)*16.5)/1 'EB Garamond',serif;letter-spacing:.025em}
.face .events .timeline-item .event-note{left:0;top:calc(var(--u)*116);width:100%;font:italic 500 calc(var(--u)*14.5)/1 'EB Garamond',serif;letter-spacing:.025em}
.face .events .timeline-item .event-time,.face .events .timeline-item .event-label{text-align:center}
.face .events .timeline-item .event-note{text-align:center}
.face .events .event-copy{left:calc(var(--u)*39);top:calc(var(--u)*1104);width:calc(var(--u)*650);white-space:normal;font:500 calc(var(--u)*15.5)/1.22 'EB Garamond',serif;letter-spacing:.015em;text-align:center}
.face .events .event-copy span{display:block}

/* the seal's monogram over the seal's place on the frame (318 px square at 205, 477) */
.sealface{left:calc(var(--u)*205);top:calc(var(--u)*477);width:calc(var(--u)*318);height:calc(var(--u)*318)}
.sealface p{position:absolute;left:0;width:100%;text-align:center;white-space:nowrap;line-height:1}
.sealface .year{top:calc(var(--u)*190);font:500 calc(var(--u)*16)/1 'EB Garamond',serif;letter-spacing:.04em;--stroke:.05}

/* without WebGL the plate shows as a picture and the lettering as text over it */
.stage.nogl .face{color:#f2e6d2}

/* One vector mark (crown removed, synced with seal), shared by the card and the wax seal. */
.face .mono{left:calc(var(--u)*258);top:calc(var(--u)*154);width:calc(var(--u)*204);height:calc(var(--u)*224)}   /* the seal's logo (orchid oval + HP), in foil */
.monogram-art{display:block;width:100%;height:100%;object-fit:contain}
.sealface .smono{left:calc(var(--u)*125);top:calc(var(--u)*121);width:calc(var(--u)*68);height:calc(var(--u)*61)}
.stage:not(.nogl) .monogram-art,.stage:not(.nogl) .print-art{opacity:0}

/* Discreet Option Switcher in corner */
.opt-toggle{position:fixed;bottom:16px;right:16px;z-index:99;display:flex;gap:6px}
.opt-btn{border:1px solid rgba(138,36,50,.3);background:rgba(255,255,255,.8);color:#551822;padding:4px 10px;border-radius:4px;font:500 11px 'EB Garamond',serif;cursor:pointer;letter-spacing:.05em}
.opt-btn.active{background:#6b1d28;color:#fff;border-color:#6b1d28}

/* showroom copy: the client's logo choice is settled on option 1, so the proof switch is hidden */
.opt-toggle { display: none !important; }