

:root{
  color-scheme:dark;

  --night:#0b0d12;
  --night-2:#121722;
  --night-3:#1a2131;
  --slate:#2b3342;
  --cream:#ece3d6;
  --cream-dim:#a3998c;
  --gold:#c2a172;
  --gold-dim:#7d674a;

  --font-display:'Gilroy',system-ui,-apple-system,sans-serif;
  --font-body:'Gilroy',system-ui,-apple-system,sans-serif;

  --pad:20px;
  --hdr:89px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*,*::before,*::after{box-sizing:border-box}

[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--night)}


body{
  margin:0;
  background:var(--night);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}

h1,h2,h3,p,figure{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


.names,.h2,.h4,.h5,.kicker,.cap,.hdr__btn,.hdr__link{font-variant-numeric:lining-nums}
.names,.h2{
  font-family:var(--font-display);font-weight:300;
  font-size:56px;line-height:.9;letter-spacing:-.04em;
  color:var(--cream);text-wrap:balance;
}
.h4{font-family:var(--font-display);font-weight:300;font-size:36px;line-height:1;letter-spacing:-.02em;color:var(--cream)}
.h5{font-family:var(--font-display);font-weight:300;font-size:24px;line-height:1.1;letter-spacing:-.03em;color:var(--cream);text-wrap:balance}
.kicker,.cap{
  font-family:var(--font-display);font-weight:400;
  font-size:16px;line-height:.9;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream-dim);
}
.cap{font-size:14px}
.text{font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.7;color:var(--cream);text-wrap:pretty}
.text--dim{color:var(--cream-dim)}

.names,.h2,.h4,.h5,.kicker,.cap,.text{
  text-shadow:0 0 1px var(--night),0 0 3px var(--night),0 0 6px var(--night),0 0 14px var(--night);
}


.orn{display:block;width:180px;height:18px;margin:0 auto;color:var(--gold-dim)}
.orn--sm{width:140px;height:14px}


.head{display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}


.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.2;
  letter-spacing:.04em;
  text-decoration:none;text-align:center;
  min-height:48px;padding:0 28px;border-radius:0;cursor:pointer;
}
.btn:active{transform:scale(.97)}
.btn--open{
  background:transparent;color:var(--gold);
  border:1px solid var(--gold-dim);
  min-width:200px;min-height:52px;
}

.btn--open:focus-visible,.btn--open:active{background:var(--gold);color:var(--night);border-color:var(--gold)}


.envelope{
  display:none;
  position:fixed;inset:0;z-index:50;
  flex-direction:column;align-items:center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b));
  background-color:var(--night);
  transition:background-color .4s var(--e1,cubic-bezier(.44,0,.56,1));
}
.js .envelope{display:flex}
.js.no-envelope .envelope{display:none}

.envelope.is-open{pointer-events:none;overflow:hidden}
.envelope.is-gone{background-color:transparent}

.envelope__card{
  position:relative;
  margin:auto;
  width:100%;max-width:343px;min-height:536px;
  padding:143px 24px 40px;text-align:center;
  border:1px solid var(--slate);
  background:var(--night-2);
  perspective:900px;
}

.js .envelope__card{opacity:0;transition:opacity .6s ease}
.js .envelope.is-ready .envelope__card{opacity:1}

.js .envelope.is-open .envelope__card{
  opacity:0;transform:translateY(32px);translate:0 var(--drop,0px);
  transition:opacity .55s ease .55s,transform .55s ease .55s,translate .8s cubic-bezier(.62,.02,.35,1);
}


.envelope__flap{
  position:absolute;left:-1px;right:-1px;top:-1px;height:150px;z-index:1;
  background:var(--night-3);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:50% 0;
  -webkit-backface-visibility:visible;backface-visibility:visible;
  transition:transform .8s cubic-bezier(.62,.02,.35,1);
}
.envelope.is-open .envelope__flap{transform:rotateX(-180deg)}

.envelope__body{position:relative;z-index:2}
.envelope.is-open .envelope__body{opacity:0;transition:opacity .2s ease .3s}

.envelope__names{
  margin:28px 0 0;font-family:var(--font-display);font-weight:500;
  font-size:44px;line-height:1.1;color:var(--cream);
}
.envelope__names span{display:block}
.envelope__names i{
  display:block;font-size:19px;line-height:1.3;font-style:italic;color:var(--cream);
  margin:2px 0;
}
.envelope__kicker{margin:16px 0 0;font-size:15px;line-height:1.4;color:var(--cream-dim)}
.envelope__kicker + .orn{margin-top:30px}
.envelope .btn--open{margin-top:34px}
.envelope__hint{margin:14px 0 0;font-size:12px;letter-spacing:.04em;color:var(--cream-dim)}


.hdr{
  position:fixed;top:0;left:0;right:0;z-index:11;
  height:calc(var(--hdr) + var(--safe-t));
  overflow:hidden;
  pointer-events:none;
}
.hdr__in{
  position:relative;height:100%;

  display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;align-content:start;
  padding:calc(20px + var(--safe-t)) calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l));
}
.hdr__bg{
  position:absolute;top:0;right:0;bottom:0;left:0;
  background:radial-gradient(50% 50% at 50% 50%,var(--night) 52.59%,transparent 100%) center / 150% 100% no-repeat;
}

.hdr__btn{
  position:relative;grid-row:1;
  pointer-events:auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-width:0;min-height:44px;padding:0;margin:0;
  border:0;background:none;cursor:pointer;text-align:center;
  font-family:var(--font-display);font-weight:400;font-size:14px;line-height:.9;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim);
}
.hdr__menu{grid-column:1}
.hdr__addr,.hdr__music{grid-column:3}

.hdr__music[aria-pressed="false"]{opacity:.5}
.hdr__mono{
  position:relative;grid-column:2;grid-row:1;justify-self:center;
  pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  width:120px;min-height:49.3px;
  font-family:var(--font-display);font-weight:300;font-size:40px;line-height:.8;letter-spacing:-.03em;
  color:var(--cream-dim);
}

.hdr__stroke{
  display:block;width:120px;height:17.3px;margin:0 0 2px;
  background-color:var(--gold-dim);
  -webkit-mask-image:url(assets/decor/hdr-ornament.webp?v=2);mask-image:url(assets/decor/hdr-ornament.webp?v=2);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.hdr__ini{display:block;white-space:nowrap}
.hdr__ini small{font-size:16px;font-weight:400;letter-spacing:.06em;vertical-align:.35em}

.hdr__links{display:none;position:relative;grid-row:1;pointer-events:auto;gap:32px}
.hdr__links--l{grid-column:1;justify-self:end}
.hdr__links--r{grid-column:3;justify-self:start}
.hdr__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-weight:400;font-size:14px;line-height:.9;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim);
}

.hdr__link .m-link{padding:2px 4px}

html:not(.js) .hdr__menu{visibility:hidden}


.menu{--menu-closed:calc(var(--hdr) + var(--safe-t))}
.menu__links{
  display:flex;flex-direction:column;align-items:center;gap:45.4px;
  padding-top:calc(129.5px + var(--safe-t));
}
.menu__links a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:200px;padding:0 16px;
  font-family:var(--font-display);font-weight:400;font-size:16px;line-height:.9;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cream);
}


.frame{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8;pointer-events:none}

.frame__band{
  position:absolute;top:0;left:0;right:0;display:block;
  height:calc(var(--hdr) + var(--safe-t));
  pointer-events:none;
  background:linear-gradient(var(--night) calc(var(--safe-t) + 54px),transparent);
  transition:opacity 1s var(--e1,cubic-bezier(.44,0,.56,1));
}

.frame__art{position:absolute;top:0;right:0;bottom:0;left:0}
.frame__art::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid var(--slate)}
.frame__c{
  position:absolute;display:block;width:21%;max-width:250px;
  background-color:var(--gold-dim);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.frame__c--tl,.frame__c--tr{
  top:calc(10px + var(--safe-t));aspect-ratio:.961538;
  -webkit-mask-image:url(assets/decor/corner-top-272.webp?v=2);mask-image:url(assets/decor/corner-top-272.webp?v=2);
  -webkit-mask-position:left top;mask-position:left top;
}
.frame__c--bl,.frame__c--br{
  bottom:calc(10px + var(--safe-b));aspect-ratio:.998004;
  -webkit-mask-image:url(assets/decor/corner-bottom-272.webp?v=2);mask-image:url(assets/decor/corner-bottom-272.webp?v=2);
  -webkit-mask-position:left bottom;mask-position:left bottom;
}
.frame__c--tl,.frame__c--bl{left:calc(10px + var(--safe-l))}
.frame__c--tr,.frame__c--br{right:calc(10px + var(--safe-r));transform:scaleX(-1)}

.frame__warm{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:0}
.frame__warm b{position:absolute;left:0;top:0;width:1px;height:1px;background:center / contain no-repeat}
.frame__warm b:nth-child(1){background-image:url(assets/decor/petal-1.webp?v=3)}
.frame__warm b:nth-child(2){background-image:url(assets/decor/petal-2.webp?v=3)}
.frame__warm b:nth-child(3){background-image:url(assets/decor/petal-3.webp?v=3)}

.petals{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}

.divider{
  display:block;width:200px;height:23px;margin:0 auto;flex:none;
  background-color:var(--gold-dim);
  -webkit-mask:url(assets/decor/divider.webp?v=2) center / contain no-repeat;
  mask:url(assets/decor/divider.webp?v=2) center / contain no-repeat;
}
.divider--wide{display:none}


.page{position:relative}
.msg,.story,.place,.foot{position:relative;z-index:1}

.story,.place{scroll-margin-top:24px}


.hero{
  position:relative;z-index:1;
  height:100vh;height:100svh;
  overflow:hidden;
  padding:var(--pad);
}

html.js:not(.no-envelope):not(.lite) .hero{position:sticky;top:0}

@media (max-height:600px){
  html.js:not(.no-envelope):not(.lite) .hero{position:relative}
}

.hero__paper{
  position:absolute;left:50%;top:50%;
  width:480px;height:759px;margin:-379.5px 0 0 -240px;
  background-color:var(--night-3);opacity:.5;
  -webkit-mask-image:url(assets/decor/paper-phone.webp?v=2);mask-image:url(assets/decor/paper-phone.webp?v=2);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hero__in{
  position:relative;height:100%;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:64px 0 40px;text-align:center;
}
.hero__art{position:relative;flex:1 1 0;min-height:0;width:100%;display:flex;justify-content:center}
.hero__img{height:100%;width:auto;max-width:100%;object-fit:contain}
.hero__names{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}
.hero__compass{position:relative;width:100%}


.names{position:relative;display:flex;flex-direction:column;align-items:center}
.names:focus{outline:none}
.names__line{position:relative;display:block}
.names__amp-pos{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.names__amp{display:block;color:var(--slate)}


.compass{display:grid;row-gap:12px}
.compass__row{display:grid;grid-template-columns:1fr 56px 1fr;column-gap:16px;align-items:center}
.compass__row2{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.compass__l{justify-self:end;white-space:nowrap}
.compass__r{justify-self:start;white-space:nowrap}
.compass__day{position:relative;width:56px;height:56px;display:grid;place-items:center}
.compass__ring{position:absolute;top:0;right:0;bottom:0;left:0}

.compass__ring i{
  position:absolute;display:block;width:42px;aspect-ratio:7.3163;
  background-color:var(--gold-dim);
  -webkit-mask-image:url(assets/decor/stroke.webp?v=2);mask-image:url(assets/decor/stroke.webp?v=2);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.compass__ring i:nth-child(1){top:-1px;left:50%;transform:translateX(-50%) rotate(180deg)}
.compass__ring i:nth-child(2){top:50%;left:-18px;transform:translateY(-50%) rotate(90deg)}
.compass__ring i:nth-child(3){top:50%;right:-18px;transform:translateY(-50%) rotate(-90deg)}
.compass__ring i:nth-child(4){bottom:0;left:50%;transform:translateX(-50%)}
.compass__num{
  position:relative;
  font-family:var(--font-display);font-weight:300;font-size:32px;line-height:.8;letter-spacing:-1.6px;
  color:var(--cream);font-variant-numeric:lining-nums;
}


.msg{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad);text-align:center;
}

html.js:not(.no-envelope) .msg{pointer-events:none}
.msg__in{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:335px}


.story__head{padding:72px var(--pad) 20px}
.story__lead{max-width:335px}
.story__track{position:relative;padding:var(--pad) var(--pad) 48px}
.story__mark{display:none}
.story__pile{--cw:min(270px,72vw);display:flex;flex-direction:column;align-items:center;gap:28px}
.pc{position:relative;margin:0;width:var(--cw)}
.pc--then,.pc--close{--tilt:-3deg;margin-right:22px}
.pc--now,.pc--walk{--tilt:3deg;margin-left:22px}
.pc__tilt{transform:rotate(var(--tilt,0deg))}
.pc__in{background:var(--cream-dim);padding:10px 10px 0;box-shadow:0 18px 30px -12px var(--night)}

.pc__ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--night-2);isolation:isolate}
.pc__ph img{width:100%;height:100%;object-fit:cover}

.pc--then{--kb:13s;--ko:46% 42%}
.pc--now{--kb:16s;--ko:56% 34%}
.pc--close{--kb:14.5s;--ko:62% 42%}
.pc--walk{--kb:15.5s;--ko:58% 34%}
.pc__cap{
  display:flex;align-items:center;justify-content:center;height:46px;padding:0 8px;
  font-family:var(--font-display);font-style:italic;font-weight:500;font-size:21px;line-height:1;
  color:var(--night-2);white-space:nowrap;
}


@media (prefers-reduced-motion:no-preference) and (min-height:601px) and (max-width:809.98px),
       (prefers-reduced-motion:no-preference) and (min-height:601px) and (min-width:1200px){
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__pile{--scroll-gate:1}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc__in{opacity:1 !important;transform:none !important;transition:none !important}
}

@media (prefers-reduced-motion:no-preference) and (min-height:601px) and (max-width:809.98px){
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__track{
    --cw:min(270px,72vw,calc((100vh - var(--hdr) - var(--safe-t)) * .42));
    --cw:min(270px,72vw,calc((100svh - var(--hdr) - var(--safe-t)) * .42));
    height:300vh;height:300svh;padding:0;
    margin-bottom:calc(var(--cw) * .625 + 62.5px - (100vh - var(--hdr) - var(--safe-t)) / 2);
    margin-bottom:calc(var(--cw) * .625 + 62.5px - (100svh - var(--hdr) - var(--safe-t)) / 2);
  }
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark{display:block;position:absolute;left:0;width:1px;pointer-events:none}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--in{top:0;height:100vh;height:100svh}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--1{top:110vh;top:110svh;height:45vh;height:45svh}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--2{top:185vh;top:185svh;height:45vh;height:45svh}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--3{top:240vh;top:240svh;height:45vh;height:45svh}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--w1,
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--w2{display:none}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__stage{
    position:sticky;top:0;height:100vh;height:100svh;
    overflow:hidden;overflow:clip;
  }
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__pile{
    --cw:inherit;
    position:absolute;top:calc(var(--hdr) + var(--safe-t));right:0;bottom:0;left:0;
    display:grid;place-items:center;gap:0;
  }

  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--then .pc__cap{justify-content:flex-start;padding-left:16px}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc{grid-area:1 / 1;margin:0}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--walk{z-index:1}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--close{z-index:2}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--then{z-index:3}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--now{z-index:4}
}


html.only-then .pc--now,html.only-then .pc--close,html.only-then .pc--walk{display:none}
html.only-then .pc--then{margin:0}
html.only-then .story__pile{display:flex;flex-direction:column;align-items:center}


.place{padding:72px var(--pad);display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.place__grid{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;max-width:335px}
.place__info{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}

.place__read,.place__where{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.place__mark{position:absolute;left:0;width:1px;pointer-events:none;visibility:hidden}
.place__mark--out{top:0;height:20vh;height:20svh}
.place__mark--back{top:calc(100% + 75vh);top:calc(100% + 75svh);height:15vh;height:15svh}


.cal{width:100%}
.cal__row{
  display:grid;grid-template-columns:1fr 120px 1fr;
  align-items:center;justify-items:center;row-gap:8px;
  margin-top:16px;
}
.cal__wd{align-self:end}
.cal__num{
  font-family:var(--font-display);font-weight:300;font-size:36px;line-height:1;color:var(--cream-dim);
  font-variant-numeric:lining-nums tabular-nums;
}
.cal__num--main{font-size:84px;line-height:1;color:var(--cream)}

.cal__day{position:relative;display:grid;place-items:center}
.cal__medal{position:absolute;left:50%;top:50%;width:260px;height:260px;margin:-130px 0 0 -130px;pointer-events:none;
  background-color:var(--gold-dim);opacity:.28;-webkit-mask:url(assets/decor/medallion.webp?v=2) center / contain no-repeat;mask:url(assets/decor/medallion.webp?v=2) center / contain no-repeat}

.place__map{width:100%}
.place__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}

.place__btn{
  display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 12px;
  border:1px solid var(--gold-dim);border-radius:0;background-color:var(--night);
  font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.2;letter-spacing:.04em;
  color:var(--cream);
}


  #cc-embeds{
    --em-surface:var(--surface,Canvas);
    --em-text:var(--text,CanvasText);
    --em-hairline:var(--hairline,GrayText);
    --em-accent:var(--accent,CanvasText);
    --em-btn-bg:var(--em-text);
    --em-btn-text:var(--em-surface);
    --em-radius:16px;
    --em-btn-radius:12px;
  }
  #cc-embeds,#cc-embeds *{box-sizing:border-box;margin:0;padding:0}
  #cc-embeds{font-family:inherit;color:var(--em-text)}
  #cc-embeds .em-inner{max-width:1200px;margin:0 auto;padding:48px 20px;display:grid;gap:24px}
  @media (min-width:961px){#cc-embeds .em-inner{grid-template-columns:1fr 1fr}}
  @media (max-width:480px){#cc-embeds .em-inner{padding:32px 16px}}

  #cc-embeds .em{position:relative;overflow:hidden;width:100%;min-width:0;border:1px solid var(--em-hairline);
    border-radius:var(--em-radius);background:var(--em-surface)}
  #cc-embeds .em[data-em="map"]{aspect-ratio:4/3}
  #cc-embeds .em[data-em="video"]{aspect-ratio:16/9}

  @media (max-width:640px){#cc-embeds .em[data-em]{aspect-ratio:auto;height:340px}}
  #cc-embeds .em-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  #cc-embeds .em-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px}
  #cc-embeds .em-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:360px;padding:20px;
    text-align:center;background:var(--em-surface);border-radius:var(--em-radius)}
  #cc-embeds .em-icon{display:block;color:var(--em-text)}
  #cc-embeds .em-btn{font-family:inherit;font-size:15px;font-weight:600;line-height:1.2;min-height:44px;padding:12px 24px;
    border:1px solid var(--em-btn-bg);border-radius:var(--em-btn-radius);background:var(--em-btn-bg);color:var(--em-btn-text);
    cursor:pointer;transition:opacity .15s ease}
  #cc-embeds .em-btn:hover{opacity:.86}
  #cc-embeds .em-btn:disabled{cursor:progress;opacity:.76}
  #cc-embeds .em-btn:focus-visible,#cc-embeds .em-a:focus-visible{outline:2px solid var(--em-accent);outline-offset:2px}
  #cc-embeds .em-note{font-size:13px;line-height:1.5;color:var(--em-text)}
  #cc-embeds .em-a{font-size:13px;line-height:1.5;color:var(--em-text);text-decoration:underline;text-underline-offset:3px}
  #cc-embeds .em-frame{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0}
  #cc-embeds .em.is-ready .em-cover,#cc-embeds .em.is-ready .em-poster{display:none}

#cc-embeds{
  --surface:var(--night);--text:var(--cream);--hairline:var(--slate);--accent:var(--gold);
  --em-btn-bg:transparent;--em-btn-text:var(--cream);
  --em-radius:0;--em-btn-radius:0;
}
#cc-embeds .em-inner{padding:0;max-width:none;grid-template-columns:1fr}
#cc-embeds .em-btn{font-weight:400;letter-spacing:.04em;border-color:var(--gold-dim)}
#cc-embeds .em-note{color:var(--cream-dim)}

#cc-embeds .em-a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}

#cc-embeds .em[data-em]:not([data-em-on]){aspect-ratio:auto;height:auto}
#cc-embeds .em[data-em]:not([data-em-on]) .em-cover{position:relative;inset:auto}
@media (max-width:640px){#cc-embeds .em[data-em][data-em-on]{height:300px}}

#cc-embeds:not([data-em-ready]) [data-em-load],#cc-embeds:not([data-em-ready]) .em-note{display:none}

@media (hover:hover) and (pointer:fine){
  #cc-embeds .em-btn{transition:background-color 1s var(--e1,cubic-bezier(.44,0,.56,1)),color 1s var(--e1,cubic-bezier(.44,0,.56,1))}
  #cc-embeds .em-btn:not(:disabled):hover{opacity:1;background-color:var(--gold-dim);color:var(--night)}
}




.foot{
  padding:72px var(--pad) calc(24px + var(--safe-b));
  display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;
}

.foot__art{height:360px;height:min(360px,44vh);height:min(360px,44svh);aspect-ratio:2/3}
.foot__art img{width:100%;height:100%;object-fit:contain}
.foot__addr{max-width:300px;text-wrap:balance}


@media (min-width:810px){
  :root{--hdr:82px}
  .names,.h2{font-size:64px}
  .h4{font-size:40px}
  .h5{font-size:28px}
  .kicker{font-size:18px}

  .hdr__in{grid-template-columns:1fr 120px 1fr;column-gap:32px;padding:calc(20px + var(--safe-t)) 0 0}
  .hdr__bg{background-size:1000px 100%}
  .hdr__menu,.hdr__addr,.hdr__music,.menu{display:none}

  .hdr__music{display:inline-flex;justify-self:end;width:auto;padding:0 8px;margin-right:calc(min(21vw,250px) + 18px)}
  .hdr__links{display:flex}
  .hdr__mono{font-size:48px;min-height:55.7px}

  .frame__c--tl,.frame__c--tr{-webkit-mask-image:url(assets/decor/corner-top.webp?v=2);mask-image:url(assets/decor/corner-top.webp?v=2)}
  .frame__c--bl,.frame__c--br{-webkit-mask-image:url(assets/decor/corner-bottom.webp?v=2);mask-image:url(assets/decor/corner-bottom.webp?v=2)}


  .envelope__card{max-width:440px;min-height:600px;padding-top:183px}
  .envelope__flap{height:190px}
  .envelope__names{font-size:52px}
  .envelope__names i{font-size:22px}

  .hero{padding:40px}
  .hero__in{padding:0;gap:16px}
  .hero__art{flex:none;height:60%}
  .hero__paper{
    width:1120px;margin-left:-560px;
    -webkit-mask-image:url(assets/decor/paper.webp?v=2);mask-image:url(assets/decor/paper.webp?v=2);
  }

  .msg__in{max-width:800px;gap:40px}
  .msg__text{max-width:800px;text-wrap:balance}


  .story__head{padding:72px var(--pad) 20px;gap:40px}
  .story__lead{max-width:600px}
  .story__track{padding:24px 40px 72px}
  .story__pile{
    --cw:280px;
    display:grid;grid-template-columns:repeat(2,var(--cw));justify-content:center;
    column-gap:56px;row-gap:40px;
  }
  .pc--then,.pc--close,.pc--now,.pc--walk{margin:0}
  .pc--now,.pc--walk{margin-top:48px}

  .place{padding:72px 64px}

  .place{scroll-margin-top:48px}
  .place__grid{max-width:636px}
  .divider--wide{display:block}

  .cal{max-width:400px;margin-inline:auto}

  .text.text--dim{text-wrap:balance}



  .foot{padding:72px 32px calc(32px + var(--safe-b))}
  .foot__art{height:450px;height:min(450px,50vh);height:min(450px,50svh)}
  .foot__names{flex-direction:row;align-items:baseline;gap:.22em}
  .foot__names .names__amp-pos{position:static;transform:none;order:2}
  .foot__names .names__line:nth-child(2){order:1}
  .foot__names .names__line:nth-child(3){order:3}
}


@media (min-width:810px) and (max-width:1199.98px){
  .hero__in{padding-top:calc(var(--hdr) - 40px + 8px)}
  .hero__art{flex:1 1 0;height:auto;max-height:60%;min-height:0}
}


@media (min-width:1200px){
  .names,.h2{font-size:72px}
  .h4{font-size:44px}
  .h5{font-size:32px}
  .kicker{font-size:20px}
  .hdr__mono{font-size:56px;min-height:62.1px}

  .hero__in{flex-direction:row;align-items:center;gap:8px}
  .hero__names{order:1;flex:1 1 0;min-width:0}
  .hero__art{order:2;flex:none;height:66%;width:auto;aspect-ratio:2/3}
  .hero__img{width:100%;height:100%}
  .hero__compass{order:3;flex:1 1 0;min-width:0;width:auto}
  .compass{row-gap:16px;justify-content:center}
  .compass__row{grid-template-columns:180px 72px 180px}
  .compass__row2{grid-template-columns:180px 180px;column-gap:104px}
  .compass__day{width:72px;height:72px}
  .compass__num{font-size:40px;letter-spacing:-2px}


  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story{
    --cw:min(280px,19.5vw,calc((100vh - 150px) / 2.2));
    --ch:calc(var(--cw) * 1.25 + 31px);
    --top:calc(50% - .84 * var(--ch) + 46px);
    display:grid;grid-template-areas:"s";align-items:start;
  }
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__head{
    grid-area:s;position:sticky;top:0;z-index:2;height:100vh;
    justify-self:center;width:var(--cw);padding:var(--hdr) 0 0;gap:28px;justify-content:center;
  }
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__head .h2{font-size:64px}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__head .h5{font-size:26px}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__track{grid-area:s;height:200vh;padding:0}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark{display:none;position:absolute;left:0;width:1px;pointer-events:none}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--w1{display:block;top:0;height:100vh}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__mark--w2{display:block;top:50vh;height:100vh}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__stage{position:sticky;top:0;height:100vh;overflow:hidden;overflow:clip}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .story__pile{--cw:inherit;position:absolute;top:0;right:0;bottom:0;left:0;display:block}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc{position:absolute;margin:0}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--then{left:calc(50% - 2 * var(--cw));top:var(--top);z-index:1}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--now{left:calc(50% - 1.55 * var(--cw));top:calc(var(--top) + .68 * var(--ch));z-index:2}

  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--close{left:calc(50% + 1.10 * var(--cw));top:calc(var(--top) + .04 * var(--ch));z-index:1}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--walk{left:calc(50% + .52 * var(--cw));top:calc(var(--top) + .72 * var(--ch));z-index:2}

  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--then .pc__cap{justify-content:flex-start;padding-left:16px}
  html.js:not(.no-envelope):not(.motion-off):not(.lite):not(.only-then) .pc--close .pc__cap{justify-content:flex-end;padding-right:16px}


  .msg__title{max-width:600px}

  .place{padding:72px 64px}

  .place__grid{
    display:grid;max-width:1312px;width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:24px;
    grid-template-areas:"info map" "btns map";
    align-items:start;
  }
  .place__info{grid-area:info}
  .place__map{grid-area:map}
  .place__btns{grid-area:btns;max-width:400px;justify-self:center}
  #cc-embeds .em[data-em][data-em-on]{aspect-ratio:4/3;height:auto}

  #cc-embeds .em[data-em]:not([data-em-on]){aspect-ratio:4/3;height:auto}
  #cc-embeds .em[data-em]:not([data-em-on]) .em-cover{position:absolute;inset:0}
}


@media (prefers-reduced-motion:reduce){
  .envelope.is-open{opacity:0;transition:opacity .2s ease}
  .js .envelope.is-open .envelope__flap,.js .envelope.is-open .envelope__card{transform:none;translate:none;transition:none}
  .btn:active{transform:none}
}
