@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-garamond.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(assets/fonts/cormorant-garamond-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(assets/fonts/pinyon-script.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{font-variant-numeric:lining-nums;
  --night:#141210; --cream:#e8dec8; --ink:#26201c;
  --sw:min(100vw,56.25svh);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;-webkit-text-size-adjust:100%;background:var(--night)}
html.locked,html.locked body{overflow:hidden}
body{
  margin:0;min-height:100%;color:var(--cream);overflow-x:hidden;
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background-color:var(--night);
  background-image:
    radial-gradient(90% 60% at 50% 0%,rgba(232,222,200,.05),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .87 0 0 0 0 .8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
a{color:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:6px}

/* ---------- shared: a 9:16 card with live text ---------- */
.shot,.dshot{
  position:relative;width:var(--sw);aspect-ratio:9/16;flex:none;container-type:inline-size;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  mask-composite:intersect;
}
.txt{position:absolute;inset:0;pointer-events:none}
.t{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;line-height:1;margin:0}
.pill{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
  border:1px solid;border-radius:999px;text-decoration:none;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  pointer-events:auto;transition:background-color .3s ease
}
.pill:hover{background:rgba(38,32,28,.06)}

/* ---------- opening scene ---------- */
.scene{position:relative;height:100svh;display:grid;place-items:center;overflow:hidden}
.shot > img,.shot > video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
#still-open{opacity:0;transition:opacity 1.6s ease}
#film{opacity:0}
.playing #film{opacity:1}
.envtxt{transition:opacity .6s ease}
.pop .envtxt,.playing .envtxt,.fallback .envtxt{opacity:0}
#card,.cardtxt{opacity:0;transform:scale(.92);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.opened #card,.opened .cardtxt{opacity:1;transform:none}
.opened #film,.opened #poster,.opened #still-open{opacity:0;transition:opacity 1.1s ease}
.fallback #still-open{opacity:1}

.seal{
  position:absolute;left:49.3%;top:52.9%;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
}
.seal::before{content:"";position:absolute;inset:-6%;border-radius:50%;border:1px solid rgba(232,222,200,.5);opacity:0}
.idle .seal::before{animation:ring 2.8s ease-out 1s infinite}
@keyframes ring{0%{transform:scale(.9);opacity:0}30%{opacity:.8}100%{transform:scale(1.35);opacity:0}}
.seal::after{content:"";position:absolute;inset:-25%;border-radius:50%}
.pop .seal,.playing .seal,.opened .seal{pointer-events:none}

.cue{position:absolute;left:0;right:0;margin:0;text-align:center;z-index:3;pointer-events:none;transition:opacity .5s ease}
.shot > .cue.top{
  top:21%;transform:translateY(-50%);
  font-family:"Pinyon Script",cursive;font-size:9.5cqw;line-height:1.1;color:var(--cream)
}
.cue.top .to{display:block}
.cue.top.named.long .to{font-size:7.5cqw}
.cue.top.named .inv{
  display:block;margin-top:.6em;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:max(11px,2.9cqw);letter-spacing:.35em;padding-left:.35em;text-transform:uppercase;color:rgba(232,222,200,.8)
}
.shot > .cue.bottom{
  top:77%;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:max(11px,2.8cqw);
  letter-spacing:.35em;padding-left:.35em;text-transform:uppercase;color:rgba(232,222,200,.75)
}
.pop .cue,.playing .cue,.fallback .cue{opacity:0}
.cue.scroll{bottom:3svh;opacity:0;font-style:italic;font-size:18px;color:rgba(232,222,200,.8)}
.opened .cue.scroll{opacity:1;transition-delay:1.4s;animation:bob 2.4s ease-in-out 2.4s infinite}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(5px)}}

/* ---------- the suite ---------- */
.suite{display:flex;flex-direction:column;align-items:center;padding:0 0 10svh;gap:2svh}
.suite[hidden]{display:none}
.dshot .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tel{margin:-1svh 0 0;font-style:italic;font-size:18px;color:rgba(232,222,200,.75)}
.again{font-size:13px;letter-spacing:.32em;padding:10px 4px 10px .32em;text-transform:uppercase;color:rgba(232,222,200,.8);border-bottom:1px solid currentColor;margin-top:2svh}

@media (prefers-reduced-motion:reduce){
  .idle .seal::before,.opened .cue.scroll{animation:none}
  #card,.cardtxt,#still-open{transition-duration:.01s}
}