/* Curtain Up Gift: shared look for every page. Follows littledancer.co.uk: a Paris street at dusk, midnight navy,
   gilded script and filigree, programme cream. Cinzel for the small capitals, Cormorant for display, EB Garamond to read. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap");

:root{
  --night:#010c2e;        /* site background */
  --night-2:#06143d;
  --night-3:#0d1f52;
  --cream:#f8ebc4;        /* site primary */
  --cream-dim:#cfc4a4;
  --muted:#9a9a9a;
  --gold:#cc9453;         /* site gold */
  --gold-hi:#f3d39a;
  --gold-lo:#8a5a24;
  --red:#ff2a13;          /* site red, used sparingly */
  --dusk:#e9a07a;         /* the sunset in the key art */
  --line:rgba(204,148,83,.35);
  --glass:rgba(6,20,61,.72);
  --f-caps:"Cinzel",Georgia,serif;
  --f-display:"Cormorant Garamond",Garamond,Georgia,serif;
  --f-body:"EB Garamond",Garamond,Georgia,serif;
  --gilt:linear-gradient(180deg,#f7dca3 0%,#d9a35c 45%,#a8702f 100%);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--night);color:var(--cream);font-family:var(--f-body);font-size:19px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
a{color:var(--gold-hi)}
img{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ---- the sky: dusk glow behind everything, Paris on either side ---- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 105%, rgba(233,160,122,.55) 0%, rgba(178,92,110,.28) 30%, rgba(13,31,82,0) 62%),
    radial-gradient(80% 50% at 50% 0%, #0b2257 0%, rgba(1,12,46,0) 70%),
    linear-gradient(180deg,#010c2e 0%,#061846 55%,#0f2a5c 100%)}
.sky::before,.sky::after{content:"";position:absolute;bottom:0;height:100vh;width:61vh;max-width:50vw;opacity:.95;
  background-repeat:no-repeat;background-size:auto 100%}
.sky::before{left:0;background-image:url(art/city1.webp);background-position:left bottom}
.sky::after{right:0;background-image:url(art/city2.webp);background-position:right bottom}
@media (max-width:720px){.sky::before,.sky::after{opacity:.35}}

/* ---- type ---- */
.caps{font-family:var(--f-caps);letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--gold)}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;margin:0;color:var(--cream)}
h1{font-size:clamp(34px,6vw,52px)}
h2{font-size:clamp(28px,4.6vw,40px)}
h3{font-size:24px}
.lede{font-size:21px;color:var(--cream-dim);margin:.4em 0 0}
.gold-text{background:var(--gilt);-webkit-background-clip:text;background-clip:text;color:transparent}
.script{font-family:var(--f-display);font-style:italic;font-weight:600}
.rule{height:22px;background:url(art/divider.webp) center/contain no-repeat;margin:18px auto;max-width:360px;opacity:.95}
.rule.thin{height:10px;background-image:url(art/textdiv.webp);max-width:420px}

/* ---- brand bar ---- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px max(18px,env(safe-area-inset-left)) 0}
.bar .logo{height:58px;width:auto}
.bar .trh{height:22px;width:auto;opacity:.85}
.bar a{display:block}

/* ---- buttons ---- */
.btn{appearance:none;border:0;cursor:pointer;border-radius:999px;padding:15px 28px;min-height:52px;font-family:var(--f-caps);font-weight:600;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#1a0f02;background:var(--gilt);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 28px -10px rgba(204,148,83,.7);transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--gold-hi);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold)}
.btn.small{min-height:40px;padding:9px 18px;font-size:12px}
.link{appearance:none;background:none;border:0;padding:6px 0;color:var(--gold-hi);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:17px}

/* ---- panels ---- */
.panel{background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:28px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.field{display:block;width:100%;border:0;border-bottom:1.5px solid var(--gold);background:transparent;padding:10px 2px 8px;
  font-family:var(--f-display);font-size:34px;font-weight:600;color:var(--cream);border-radius:0}
.field::placeholder{color:rgba(248,235,196,.3)}
.field:focus{outline:none;border-bottom-color:var(--gold-hi)}
.field.small{font-size:22px}
.hint{color:var(--muted);font-size:16px;margin:.5em 0 0}
.hint.warn{color:#ffb4a0;font-size:17px}

/* choice tiles */
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{appearance:none;cursor:pointer;border:1px solid var(--line);background:rgba(1,12,46,.5);border-radius:999px;padding:10px 18px;font-size:18px;color:var(--cream)}
.choice[aria-pressed=true]{background:var(--gilt);color:#1a0f02;border-color:transparent}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.who{appearance:none;cursor:pointer;text-align:left;border:1px solid var(--line);background:rgba(1,12,46,.55);border-radius:18px;padding:14px;color:var(--cream);
  display:flex;flex-direction:column;gap:6px;min-height:160px;position:relative;overflow:hidden}
.who .face{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d3170,#06143d);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.who .face img{height:120%;width:auto;object-fit:cover;object-position:top}
.who .face svg{width:34px;height:34px;stroke:var(--gold-hi);fill:none;stroke-width:1.3}
.who b{font-family:var(--f-display);font-size:22px;font-weight:600}
.who span{font-size:15px;color:var(--cream-dim);line-height:1.3}
.who[aria-pressed=true]{border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold-hi) inset,0 12px 30px -12px rgba(204,148,83,.6)}
.who[aria-pressed=true]::after{content:"✓";position:absolute;top:10px;right:12px;width:24px;height:24px;border-radius:50%;background:var(--gilt);color:#1a0f02;
  font-size:14px;display:grid;place-items:center}

/* ---- the name check: hear it, say it ---- */
.say{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.say .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.speak{display:inline-flex;align-items:center;gap:10px}
.speak .dot{width:46px;height:46px;border-radius:50%;background:var(--gilt);display:grid;place-items:center;flex:0 0 auto}
.speak .dot svg{width:18px;height:18px;fill:#1a0f02}
.playing .dot{animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,211,154,.6)}100%{box-shadow:0 0 0 16px rgba(243,211,154,0)}}
.mic{width:96px;height:96px;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 50% 40%,#ff5a3c,#c71d0a);
  box-shadow:0 10px 30px -8px rgba(255,42,19,.6);display:grid;place-items:center;color:#fff}
.mic svg{width:34px;height:34px;fill:#fff}
.mic.rec{animation:recpulse 1s infinite}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(255,42,19,.55)}100%{box-shadow:0 0 0 22px rgba(255,42,19,0)}}
.soft{color:var(--cream-dim);font-style:italic}

/* ---- the gift as they'll see it ---- */
.gift{max-width:430px;margin:0 auto;border-radius:30px;overflow:hidden;background:#000c2a;border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.gift .top{padding:22px 22px 14px;text-align:center;background:linear-gradient(180deg,#071a4a,#010c2e)}
.gift .top .forname{font-family:var(--f-display);font-style:italic;font-weight:600;font-size:46px;line-height:1.05;margin-top:4px}
.stage{position:relative;aspect-ratio:16/9;background:#000 url(art/seo.webp) center/cover no-repeat}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.stage .cover{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(1,12,46,.05),rgba(1,12,46,.55));cursor:pointer;border:0;width:100%;color:var(--cream)}
.stage .cover .p{width:76px;height:76px;border-radius:50%;background:var(--gilt);display:grid;place-items:center;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.stage .cover .p svg{width:28px;height:28px;fill:#1a0f02;margin-left:4px}
.stage .cover small{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--f-caps);font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 6px #000}
.stage .wait{position:absolute;inset:0;display:none;place-items:center;background:rgba(1,12,46,.7);font-style:italic;color:var(--cream-dim);text-align:center;padding:20px}
.stage.busy .wait{display:grid}
/* The play button stays out of sight while the message is being got ready, so it can't show through the wait. */
.stage.busy .cover{visibility:hidden}
.stage .wait>div{max-width:240px;line-height:1.4;font-size:17px;animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{color:var(--gold-hi)}}
.stage .wait i{display:block;width:44px;height:44px;margin:0 auto 10px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--gold-hi);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gift .count{display:flex;align-items:center;gap:16px;padding:20px 22px;border-top:1px solid var(--line)}
.gift .count b{font-family:var(--f-display);font-weight:600;font-size:64px;line-height:.9}
.gift .count span{color:var(--cream-dim);font-size:17px;line-height:1.35}
.stub{margin:0 18px 18px;border:1px dashed var(--line);border-radius:14px;display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}
.stub div{padding:10px 12px;border-right:1px dashed var(--line)}
.stub div:last-child{border-right:0}
.stub dt{font-family:var(--f-caps);font-size:10.5px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.stub dd{margin:2px 0 0;font-family:var(--f-display);font-size:22px;font-weight:600}
.stub .wide{grid-column:1/-1;border-top:1px dashed var(--line);border-right:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
.stub .wide img{height:16px;width:auto;opacity:.8}
.moments{list-style:none;margin:0;padding:6px 18px 22px;display:flex;flex-direction:column;gap:10px}
.moments h4{font-family:var(--f-caps);font-size:12px;letter-spacing:.18em;color:var(--gold);margin:6px 0 4px;text-transform:uppercase;font-weight:600}
.mo{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(6,20,61,.6)}
.mo .head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px}
.mo .head b{font-family:var(--f-display);font-size:20px;font-weight:600}
.mo .head i{font-style:normal;font-size:14px;color:var(--cream-dim)}
.mo .stage{display:none}
.mo.open .stage{display:block}
.mo.locked{opacity:.5}
.mo.locked .head b::before{content:"🔒 ";font-size:14px}
.mo.new{border-color:var(--gold-hi)}

/* ---- testing details, off unless the box at the bottom is ticked ---- */
.dev{display:none!important}
body.devmode .dev{display:block!important}
body.devmode .dev.inline{display:inline!important}
.devbox{font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;color:#9fb0d8;background:rgba(0,0,0,.35);border:1px dashed #2a3a6a;border-radius:10px;padding:10px 12px;white-space:pre-wrap;word-break:break-word}
.foot{max-width:960px;margin:40px auto 0;padding:24px 20px 40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;color:var(--muted);font-size:15px}
.foot label{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.foot input{accent-color:var(--gold);width:18px;height:18px}
/* the language drop-down */
.foot .lang{gap:6px}
/* Terms and Privacy, on every page (gift.js) */
.foot .legal-links{display:inline-flex;gap:14px}
.lang svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex:0 0 auto}
.lang select{appearance:none;-webkit-appearance:none;background:rgba(6,20,61,.6);border:1px solid var(--line);border-radius:999px;padding:6px 30px 6px 12px;font-size:15px;color:var(--cream);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-hi) 50%),linear-gradient(135deg,var(--gold-hi) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.lang select:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.lang option{background:var(--night);color:var(--cream)}
/* the message's language, under the voices */
.speakin{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 0;color:var(--cream-dim);font-size:16px}
.speakin select{appearance:none;-webkit-appearance:none;background:rgba(6,20,61,.6);border:1px solid var(--line);border-radius:999px;padding:8px 32px 8px 14px;font-size:16px;color:var(--cream);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold-hi) 50%),linear-gradient(135deg,var(--gold-hi) 50%,transparent 50%);background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.speakin select:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.speakin option{background:var(--night);color:var(--cream)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--night-3);border:1px solid var(--line);border-radius:999px;padding:12px 20px;
  font-size:17px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:50;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}