/* ══════════ TOKENS ══════════ */
:root{
  --ivory:#F8F1EC; --blush:#F2E4E1; --blush-dp:#EBD9D6;
  --gold:#C6AC7C;  --gold-dk:#A98F62; --gold-lt:#E3CFA6;
  --ink:#413336;   --ink-soft:#6A585C; --ink-faint:#9A8A8C;
  --serif:'Playfair Display','Cormorant Garamond',Georgia,serif;
  --caps:'Cormorant Garamond','Playfair Display',Georgia,serif;
  --script:'Pinyon Script','Cormorant Garamond',cursive;
  --track:.30em;                    /* letter-spacing of all small caps — the "stationery" look */
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:11%;                        /* side padding of every page */
}

/* ══════════ GLOBAL LAYOUT ══════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0}
/* the 4 extra px keep the document scrollable for Telegram's in-app browser; invisible, every layer is fixed */
body{min-height:calc(100vh + 4px);height:100%;overflow:hidden;color:var(--ink);font-family:var(--caps);background:#EDE3DC;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}

/* the paper column — 900:1900 comes from the artwork, so the hero arch always hugs its edges */
#doc,#fliesTop,#curtainStage{width:min(100vw,max(340px,calc(100dvh * 900 / 1900)));margin-inline:auto}
@supports not (height:100dvh){
  #doc,#fliesTop,#curtainStage{width:min(100vw,max(340px,calc(100vh * 900 / 1900)))}
}
/* the same width as a number: things inside the column size against IT, never against the window —
   on a desktop the window is several columns wide, and a vw there is not what it is on a phone */
:root{--col:min(100vw,max(340px,calc(100vh * 900 / 1900)))}
@supports (height:100dvh){
  :root{--col:min(100vw,max(340px,calc(100dvh * 900 / 1900)))}
}

.field{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,#F6EDE7 0%,#E9DDD6 55%,#DFD2CA 100%)}
.field::after{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;background-image:var(--grain);background-size:220px 220px}

#doc{position:fixed;inset:0;z-index:1;overflow:hidden;background:linear-gradient(178deg,#F9F2ED 0%,#F6EDE8 40%,#F3E6E3 100%);box-shadow:0 0 90px -20px rgba(80,60,55,.40)}
#doc::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background-image:var(--grain);background-size:200px 200px;opacity:.40;mix-blend-mode:multiply}

#flies{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
#fliesTop{position:fixed;inset:0;z-index:201;height:100%;pointer-events:none;display:none}   /* a canvas needs an explicit height: inset alone will not stretch it */

.page{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--pad);text-align:center;visibility:hidden;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.page--hero{justify-content:flex-start;padding:0;overflow:hidden}
.pageInner{width:100%}
.pageInner > *{will-change:transform,opacity}

/* z-index −1 (not 0): the room must stay under the non-positioned .pageInner */
.scene{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transform:translateZ(0)}
.scene svg{width:100%;height:100%;display:block}

.reveal{opacity:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.w{white-space:nowrap}
.nm{display:block;white-space:nowrap}

.orn{display:block;margin-inline:auto}
.orn svg{display:block;width:100%;height:auto}
.orn.divider{width:70%;max-width:300px;opacity:.9}

/* ══════════ CURTAIN ══════════ */
#curtainWrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:transparent;cursor:pointer;will-change:opacity}
#curtainStage{position:relative;overflow:hidden;aspect-ratio:900/1900;max-height:100vh;max-height:100dvh;box-shadow:0 40px 90px -30px rgba(58,74,84,.5);will-change:transform;opacity:0;--veil:1}
/* a warm veil under the cloth: what shows through the parting starts hazy, then clears */
#curtainStage::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(52% 38% at 50% 44%,rgba(255,247,240,.55) 0%,rgba(238,222,214,.30) 55%,transparent 100%);opacity:var(--veil,1)}
#cloth{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block}
.ctex{position:absolute;inset:0;z-index:3;pointer-events:none;background-image:var(--weave);background-size:130px 130px;opacity:.22;mix-blend-mode:multiply}
.cvig{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(58,74,84,.30) 0%,transparent 18%,transparent 82%,rgba(58,74,84,.26) 100%),radial-gradient(120% 70% at 50% 50%,transparent 55%,rgba(58,74,84,.22) 100%)}
.tapHint{position:absolute;left:0;right:0;bottom:8%;z-index:6;text-align:center;will-change:opacity}

/* ══════════ HERO ══════════ */
#arch{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;will-change:opacity,transform}
#arch svg{width:100%;height:100%;display:block}
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(78% 62% at 50% 42%,transparent 55%,rgba(150,118,110,.10) 100%)}
.heroContent{position:relative;z-index:4;flex:1 1 auto;min-height:0;padding:clamp(56px,16vh,190px) var(--pad) 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.heroContent > *{will-change:transform,opacity}
#bird{width:13.5%;min-width:44px;opacity:0}
#bird svg{display:block;width:100%;height:auto}
#heroDiv{margin-top:clamp(9px,2vh,24px);width:52%;max-width:210px}
/* the cue sits at the bottom of the text zone, so it never touches the birds */
.scrollCue{margin-top:auto;padding:clamp(14px,2.8vh,38px) 0 clamp(2px,.8vh,10px);display:flex;flex-direction:column;align-items:center;gap:.55em;opacity:0;pointer-events:none}
.scrollCue i{display:block;width:1px;height:clamp(14px,2.4vh,24px);background:linear-gradient(180deg,var(--ink-faint),transparent)}
/* a flex item, not pinned: text and birds can never overlap on short phones */
#swans{position:relative;flex:0 0 auto;width:100%;aspect-ratio:100/49;z-index:2;pointer-events:none;opacity:0;margin:clamp(10px,2vh,28px) 0 clamp(10px,2.2vh,32px)}
.swan{position:absolute;bottom:0;width:48%}
.swan--l{left:1%}
.swan--r{right:1%;transform:scaleX(-1)}
.swan img{width:100%;height:auto;display:block}
.bob{will-change:transform;transform-origin:50% 88%}
.swanRefl{position:absolute;left:0;right:0;bottom:-1%;height:10%;z-index:1;overflow:hidden;opacity:.19;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 88%);mask-image:linear-gradient(180deg,rgba(0,0,0,.8),transparent 88%)}
.swanRefl img{position:absolute;width:48%;height:auto;display:block;filter:blur(2.5px)}
.rl{left:1%;top:-78%;transform:scaleY(-1)}
.rr{right:1%;top:-76%;transform:scale(-1,-1)}

/* ══════════ LETTER ══════════ */
.guestRule{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,13px);margin-top:clamp(11px,1.9vh,20px)}
.guestRule i{height:1px;width:clamp(34px,9vw,66px);background:linear-gradient(90deg,transparent,var(--gold))}
.guestRule i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.guestRule b{width:5px;height:5px;transform:rotate(45deg);background:var(--gold-dk);opacity:.75}
.letterBody{margin-top:1.4em;max-width:30em;margin-inline:auto}
.letterBody p + p{margin-top:.85em}
/* every character is an <i>: the letter is Cormorant Garamond italic, inked in one by one */
.ch{opacity:0}
.writing .ch{animation:inkIn .24s ease-out both}
.written .ch{opacity:1}
@keyframes inkIn{from{opacity:0;transform:translateY(.10em) scale(.94);color:#2E2422}60%{opacity:1;color:#3A2E2B}to{opacity:1;transform:none;color:inherit}}
.sign{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.sign.signed{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
.orn.seal{width:clamp(74px,11.5vh,104px);margin-top:clamp(14px,2.4vh,26px);opacity:0;will-change:transform,opacity}
/* the transform origin is the nib tip */
#quill{position:absolute;left:0;top:0;z-index:6;pointer-events:none;width:var(--qs,clamp(76px,11.6vh,104px));height:var(--qs,clamp(76px,11.6vh,104px));opacity:0;transform-origin:7% 89%;will-change:transform,opacity}
#quill svg{display:block;width:100%;height:100%;overflow:visible}
.sealMono{font-family:var(--serif);font-weight:500;font-size:76px;letter-spacing:-.02em;text-anchor:middle}

/* ══════════ SAVE THE DATE ══════════ */
#saveTitle{display:grid;place-items:center}          /* JS reserves the taller of its two texts, so the swap moves nothing */
.scratchWrap{position:relative;margin:6% auto 0;width:100%;max-width:340px;aspect-ratio:320/126;border-radius:14px;touch-action:none}
/* a glow that invites a touch */
.scratchWrap::before{content:"";position:absolute;inset:-9%;border-radius:22px;z-index:0;background:radial-gradient(60% 60% at 50% 50%,rgba(206,180,158,.30),transparent 72%);filter:blur(9px);animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
.scratchWrap.touched::before{animation:none;opacity:.55}
.scratchWrap.done::before{opacity:0;transition:opacity 1s var(--ease)}
.discs{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(8px,3.2%,16px)}
.disc{flex:1 1 0;aspect-ratio:1;max-width:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(70% 70% at 38% 30%,#FFFDF9,#F6EBE4 62%,#EEDDD6);box-shadow:inset 0 0 0 1px rgba(198,172,124,.55),inset 0 2px 5px rgba(255,255,255,.9),0 3px 10px -4px rgba(120,92,84,.35)}
#scratch,#dust{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;border-radius:14px;cursor:grab}
#scratch{box-shadow:inset 0 0 0 1px rgba(160,130,80,.45),0 2px 10px -4px rgba(120,92,60,.5)}
/* larger than the foil, so flakes can fly out of it (a canvas will not stretch between insets: the size is spelled out) */
#dust{z-index:3;pointer-events:none;cursor:default;inset:-66px -28px -80px -28px;width:calc(100% + 56px);height:calc(100% + 146px);border-radius:0}
.glare{position:absolute;inset:0;z-index:3;border-radius:14px;overflow:hidden;pointer-events:none}
.glare::after{content:"";position:absolute;top:-40%;bottom:-40%;width:38%;left:var(--sx,35%);background:linear-gradient(100deg,transparent,rgba(255,251,246,.26),transparent);transform:skewX(-16deg)}
.scratchWrap.done .glare{opacity:0;transition:opacity .6s}
.scratchHint{position:absolute;left:0;right:0;top:100%;margin-top:1.15em;text-align:center}
.scratchWrap.done .scratchHint{opacity:0!important}
/* a centred stack: the countdown block stays on the axis even if a long translation makes it wider than the text column */
.afterDate{margin-top:9%;opacity:0;display:flex;flex-direction:column;align-items:center}
.afterDate .kicker{margin-bottom:.9em;opacity:0}
.afterDate .countdown{margin-top:0}
.cdWrap{position:relative;display:inline-block;padding:clamp(16px,2.8vh,32px) clamp(30px,calc(var(--col) * .07),54px) clamp(12px,2.2vh,26px)}
/* the wrapper is centred with a transform, so the animation goes on its child */
.wreathBox{position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;width:min(352px,124%);aspect-ratio:420/300;transform:translate(-50%,-50%)}
.wreathBox .orn.wreath{width:100%;height:100%;opacity:0}
.wreathBox .orn.wreath svg{height:100%}
.cdWrap > .kicker,.cdWrap > .countdown{position:relative;z-index:1}
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:clamp(10px,calc(var(--col) * .032),22px);opacity:0}
.cd-unit{display:flex;flex-direction:column;align-items:center;min-width:3.4em}
.cd-sep{width:1px;align-self:stretch;margin-top:.15em;background:var(--ink);opacity:.17}
#calBtn{margin-top:7.2%;opacity:0}

/* ══════════ VENUE ══════════ */
.lanterns{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.lamp{position:absolute;top:0;width:clamp(58px,16.5vw,80px);opacity:0;transform-origin:50% 0}
.lamp--l{left:calc(var(--pad) * -0.15)}
.lamp--r{right:calc(var(--pad) * -0.15)}
.lamp svg{display:block;width:100%;height:auto;overflow:visible}
/* different periods read as wind; equal periods read as an animation */
.lampSway{transform-origin:50% 4%;will-change:transform}
.lamp--l .lampSway{animation:sway 7.4s ease-in-out infinite}
.lamp--r .lampSway{animation:sway 9.1s ease-in-out -3.2s infinite}
@keyframes sway{0%,100%{transform:rotate(-1.7deg)}50%{transform:rotate(1.7deg)}}
.swag{position:absolute;top:0;left:0;width:100%;opacity:0;transform-origin:50% 0}
.swag svg{display:block;width:100%;height:auto}
.cards{display:flex;flex-direction:column;align-items:stretch;gap:clamp(4px,.8vh,9px);margin-top:2.4em}
.card{position:relative;overflow:hidden;padding:clamp(22px,3.6vh,32px) 1.3em;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.32));box-shadow:0 1px 2px rgba(150,118,110,.10),0 12px 28px -18px rgba(120,92,84,.38),inset 0 0 0 1px rgba(198,172,124,.30)}
.cnr{position:absolute;width:26%;opacity:.5;pointer-events:none}
.cnr svg{display:block;width:100%;height:auto}
.cnr--tl{top:0;left:0}
.cnr--br{bottom:0;right:0;transform:rotate(180deg)}
.card .vtime{margin:.62em auto 0;display:flex;align-items:center;justify-content:center;gap:.85em;width:max-content}
.card .vtime::before,.card .vtime::after{content:"";width:clamp(16px,5vw,28px);height:1px;background:linear-gradient(90deg,transparent,rgba(169,143,98,.55))}
.card .vtime::after{background:linear-gradient(90deg,rgba(169,143,98,.55),transparent)}
.card .btn{margin-top:1.55em}
.btn.btnMap{display:inline-flex;align-items:center;gap:.7em}
.pin{position:relative;width:.85em;height:.85em;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:linear-gradient(150deg,var(--gold-lt),var(--gold-dk));box-shadow:0 1px 2px rgba(120,92,60,.35)}
.pin::after{content:"";position:absolute;inset:28%;border-radius:50%;background:#FBF4EE}
.btnMap:hover .pin{animation:drop .7s var(--ease)}
@keyframes drop{0%{transform:rotate(-45deg) translateY(-4px)}60%{transform:rotate(-45deg) translateY(1px)}100%{transform:rotate(-45deg) translateY(0)}}

/* ══════════ FINALE ══════════ */
.end{padding-bottom:clamp(30px,5vh,56px)}
.end .body{max-width:19em;margin:1.25em auto 0;text-wrap:balance}
.end .btn{margin-top:1.7em}
.monoWrap{position:relative;width:min(100%,286px);aspect-ratio:360/268;margin:clamp(16px,2.8vh,32px) auto 0}
.orn.cartouche{position:absolute;inset:0;opacity:0}
.orn.cartouche svg{width:100%;height:100%}
/* 80.6 % puts the monogram at the centre of the oval, not of the box (ribbons hang below it) */
.endMono{position:absolute;left:0;right:0;top:0;height:80.6%;margin:0;display:flex;align-items:center;justify-content:center;opacity:0}
.orn.tail{width:clamp(140px,44%,200px);margin:clamp(14px,2.4vh,26px) auto 0;opacity:0}

/* ══════════ TYPE ══════════ */
.eyebrow,.kicker,.lab,.btn,.tapHint,.cd-lab,.scrollCue span{font-family:var(--caps);font-weight:400;letter-spacing:var(--track);text-transform:uppercase}

.tapHint{font-size:clamp(9px,1.75vh,13px);color:#3B5261;text-shadow:0 1px 0 rgba(255,255,255,.7),0 0 14px rgba(255,255,255,.85);opacity:.92}
.eyebrow{font-size:clamp(9px,1.62vh,13px);line-height:2.05;color:var(--ink-soft);margin-top:clamp(9px,2vh,24px)}
h1.names{font-family:var(--serif);font-weight:500;font-size:clamp(25px,4.6vh,40px);line-height:1.06;letter-spacing:.005em;color:var(--ink);margin-top:clamp(6px,1.4vh,18px)}
.names .amp{font-family:var(--caps);font-style:italic;font-weight:400;font-size:.82em;display:block;margin:.02em 0 .04em;color:var(--gold-dk)}
/* no Playfair italic is loaded on purpose: this is the browser's synthesized slant of the 500 upright */
.quote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(12.5px,1.85vh,16px);line-height:1.75;max-width:22em;margin-inline:auto;color:var(--ink-soft);margin-top:clamp(9px,2vh,24px)}
.scrollCue span{font-size:clamp(7px,1.05vh,9.5px);color:var(--ink-faint)}
.kicker{font-size:clamp(8.5px,1.5vh,11.5px);color:var(--gold-dk)}
h2.title{font-family:var(--serif);font-weight:500;font-size:clamp(20px,3.5vh,30px);line-height:1.24;color:var(--ink);margin-top:.55em}
.body{font-family:var(--caps);font-weight:400;font-size:clamp(15px,2.32vh,19px);line-height:1.78;color:var(--ink-soft)}
h2.guest{font-family:var(--serif);font-weight:500;font-size:clamp(26px,4.5vh,40px);line-height:1.14;letter-spacing:.005em;text-wrap:balance;color:var(--gold-dk);margin-top:.34em}
.sign{font-family:var(--caps);font-style:italic;font-weight:400;font-size:clamp(27px,4.3vh,40px);line-height:1.2;color:var(--ink);margin-top:1.4em}
.disc .dv{font-family:var(--serif);font-weight:500;font-size:clamp(19px,4.4vh,30px);line-height:1;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.disc .dl{font-family:var(--caps);font-weight:400;text-transform:uppercase;font-size:clamp(7px,1.15vh,9.5px);letter-spacing:.22em;margin-top:.5em;color:var(--ink-faint);white-space:nowrap}
.scratchHint{font-family:var(--caps);font-weight:400;text-transform:uppercase;font-size:clamp(9px,1.45vh,11.5px);letter-spacing:.24em;color:var(--gold-dk)}
.cd-num{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;font-size:clamp(21px,3.5vh,32px);line-height:1;color:var(--ink)}
.cd-lab{font-size:clamp(7.5px,1.18vh,10px);letter-spacing:calc(var(--track) - .08em);margin-top:.42em;color:var(--ink-faint)}
.card .lab{font-size:clamp(8px,1.35vh,10.5px);color:var(--gold-dk)}
.card .vname{font-family:var(--serif);font-weight:500;font-size:clamp(17px,2.7vh,23px);line-height:1.25;margin-top:.8em;color:var(--ink)}
.card .vtime{font-family:var(--serif);font-weight:500;font-size:clamp(15px,2.3vh,20px);letter-spacing:.10em;color:var(--gold-dk)}
.card .vaddr{font-family:var(--caps);font-weight:400;font-size:clamp(11.5px,1.75vh,14px);line-height:1.75;letter-spacing:.05em;margin-top:.9em;color:var(--ink-soft);opacity:.88}
.btn{font-size:clamp(8.5px,1.34vh,11px);color:var(--ink-soft)}
.endMono{font-family:var(--script);font-size:clamp(38px,6.4vh,58px);line-height:1.24;color:var(--gold-dk)}
.madeBy{font-family:var(--caps);font-style:italic;font-size:clamp(8.5px,1.2vh,11px);margin-top:1.5em;color:var(--ink-faint)}

/* ══════════ BUTTONS ══════════ */
.btn{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;display:inline-block;padding:.95em 1.6em .9em;border-radius:999px;background:linear-gradient(180deg,#F4E9E3 0%,#EDDFD9 100%);box-shadow:inset 0 1px 1.5px rgba(255,255,255,.9),inset 0 -1px 1.5px rgba(150,118,110,.16),0 1px 2px rgba(150,118,110,.14);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),color .35s}
.btn:hover{transform:translateY(-1px);color:var(--ink)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 3px rgba(150,118,110,.22)}
.btn.done{color:var(--gold-dk)}
.btnGold{background:linear-gradient(180deg,#F3E4C4 0%,#E3CDA2 55%,#D2B884 100%);box-shadow:inset 0 1px 1.5px rgba(255,255,255,.95),inset 0 -1px 2px rgba(150,118,70,.28),0 4px 14px -6px rgba(150,118,70,.6);color:#5A4A32}
.btnGold:hover{color:#3E3222}
.btnGold[disabled]{opacity:.55!important;cursor:default;transform:none}   /* !important: it must stay dimmed through the page's own fade-in */

/* ══════════ PAGE DOTS · MUSIC BUTTON ══════════ */
#dots{position:fixed;z-index:130;top:50%;translate:0 -50%;right:max(2.6vw,calc(50vw - min(50vw,max(170px,calc(100vh * 450 / 1900))) + 2.2%));right:max(2.6vw,calc(50vw - min(50vw,max(170px,calc(100dvh * 450 / 1900))) + 2.2%));display:flex;flex-direction:column;gap:9px;align-items:center;opacity:0}
#dots b{position:relative;width:2px;height:9px;border-radius:2px;background:var(--ink);opacity:.20;cursor:pointer;transition:height .55s var(--ease),opacity .55s var(--ease),background .55s var(--ease)}
#dots b::before{content:"";position:absolute;inset:-4.5px -11px}   /* a finger-sized hit area for a 2px mark */
#dots b.on{height:22px;opacity:1;background:var(--gold-dk)}

#audioBtn{position:fixed;z-index:120;right:max(4vw,calc(50vw - min(50vw,max(170px,calc(100vh * 450 / 1900))) + 5%));right:max(4vw,calc(50vw - min(50vw,max(170px,calc(100dvh * 450 / 1900))) + 5%));bottom:max(3.2vh,16px);width:clamp(30px,4.8vh,38px);aspect-ratio:1;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 1px 4px rgba(150,118,110,.20);opacity:0;transition:opacity .6s var(--ease),transform .3s var(--ease)}
#audioBtn:active{transform:scale(.92)}
#audioBtn svg{width:56%;height:56%;display:block;fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#audioBtn .waves,#audioBtn .slash{transition:opacity .3s}
#audioBtn .slash{opacity:0}
#audioBtn[aria-pressed="false"] .waves{opacity:.18}
#audioBtn[aria-pressed="false"] .slash{opacity:.8}

/* ══════════ SITE CHROME ══════════
   The sample's bar and the owner's notice float over the stage; they never resize it. */
#chrome{position:fixed;z-index:300;top:max(10px,env(safe-area-inset-top));left:50%;translate:-50% 0;width:min(calc(var(--col) - 20px),440px);display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
#chrome[hidden]{display:none}
.chip{pointer-events:auto;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(80,60,55,.20);color:#413336;font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.chipGo{background:linear-gradient(180deg,#F6E7C6 0%,#DCC18A 100%);color:#4A3A22;font-weight:700;box-shadow:0 2px 12px rgba(120,92,40,.38),inset 0 1px 1px rgba(255,255,255,.8)}
.chipLangs{padding:3px;gap:2px}
.chipLangs a{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border-radius:999px;color:#6A585C;text-decoration:none;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.chipLangs a.on{background:#413336;color:#fff}
.chipNote{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.25;padding-block:8px}
html.poster #dots,html.poster #audioBtn{display:none}

/* ══════════ REDUCED MOTION ══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.heroContent > *,#arch,#swans,.scrollCue,.endMono{opacity:1!important}
  .lamp{opacity:.92!important}
  .swag{opacity:.9!important;transform:none!important}
  .orn.cartouche{opacity:.9!important}
  .orn.tail{opacity:.8!important}
  .lamp--l .lampSway,.lamp--r .lampSway{animation:none}
  .scene{opacity:.42!important}
}

/* ══════════ PHONE ══════════
   Must stay the LAST block: plain id selectors overriding equally specific rules — only source order decides. */
@media (max-width:640px){
  :root{--col:100vw}
  #doc,#fliesTop,#curtainStage{width:100vw;width:100dvw;margin-inline:0}
  #doc{box-shadow:none}
  #curtainStage{aspect-ratio:auto;height:100vh;height:100dvh;max-height:none;box-shadow:none}
  .field{display:none}
  @supports not (height:100dvh){
    #doc,#fliesTop,#curtainStage{width:100vw}
    #curtainStage{height:100vh}
  }
}