/* 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{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: two lines on baselines 578 and 736, shrunk together (--fit, set by face.js) when a line would pass 470 */
.face .names{top:0;height:0;--fit:1;--asc:.8;--size:169;font:400 calc(var(--u)*var(--size)*var(--fit))/1 'Pinyon Script',cursive;--max:470;--stroke:.012}
.face .names .l1{top:calc(var(--u)*(578 - var(--size)*var(--fit)*var(--asc)));transform:translateX(calc(var(--u)*-12))}
.face .names .l2{top:calc(var(--u)*(736 - var(--size)*var(--fit)*var(--asc)));transform:translateX(calc(var(--u)*-4))}
.face .names .amp{font-family:'Ephesis','Pinyon Script',cursive;font-size:.92em}
.face .fam{top:0;height:0}
.face .fam section{width:calc(var(--u)*300)}
.face .fam .bride{left:calc(var(--u)*(220 - 150))}
.face .fam .groom{left:calc(var(--u)*(508 - 150))}
.face .fam h2{display:block;margin-top:calc(var(--u)*806);font:500 calc(var(--u)*17.5)/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}
.face .lead{top:calc(var(--u)*896);font:italic 500 calc(var(--u)*28.7)/1 'EB Garamond',serif}
.face .date{top:calc(var(--u)*943);font:500 calc(var(--u)*36)/1 'EB Garamond',serif;letter-spacing:.055em;text-transform:uppercase}
.face .date .fig{font-size:.85em}
.face .venue{top:calc(var(--u)*1014.5);font:500 calc(var(--u)*24)/1 'EB Garamond',serif;letter-spacing:-.01em;text-transform:uppercase}
/* the seal's monogram and year, 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 interwoven vector mark, shared by the card and the wax seal. */
.face .mono{left:calc(var(--u)*312);top:calc(var(--u)*265);width:calc(var(--u)*104);height:calc(var(--u)*94)}
.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{opacity:0}