/* =========================================================
   AMBER REVERIE — theme styles
   Three grounds: night, terracotta velvet, ivory paper.
   Light is amber; the moon is orange; the stems are engraved.
   ========================================================= */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"AR Amiri";src:url(assets/fonts/Amiri-ar-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AR Amiri";src:url(assets/fonts/Amiri-ar-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AR Tajawal";src:url(assets/fonts/Tajawal-ar-300.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AR Tajawal";src:url(assets/fonts/Tajawal-ar-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AR Tajawal";src:url(assets/fonts/Tajawal-ar-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"AR Tajawal";src:url(assets/fonts/Tajawal-la-300.woff2) format("woff2");font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"AR Tajawal";src:url(assets/fonts/Tajawal-la-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"AR Tajawal";src:url(assets/fonts/Tajawal-la-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"AR Italiana";src:url(assets/fonts/Italiana-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"AR Bodoni";src:url(assets/fonts/BodoniModa-normal-latin.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"AR Bodoni";src:url(assets/fonts/BodoniModa-italic-latin.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

:root{
  /* grounds */
  --night:#1C120D; --night-2:#2A1911; --night-3:#140C08;
  --terra:#B5502A; --terra-ink:#A84824;--terra-2:#9C4420; --terra-3:#7E2E13; --ember:#8A2E17; --ember-d:#5E1C0B;
  --ivory:#F4EDE1; --bone:#EDE3D2; --bone-2:#E4D7C2;
  /* light */
  --amber:#F2A74B; --amber-2:#E8893A; --moon:#FFF4D6; --moon-2:#F6D9A4;
  --stem:#7A8C4F; --stem-l:#A9B47E;
  /* ink */
  --ink:#2A1911; --ink-soft:#5B4336; --ink-mute:#7C6355;
  --on-night:#F4EDE1; --on-night-soft:#E6CDB4; --on-night-mute:#C9A98E;
  --on-terra:#FBEFE0; --on-terra-soft:#F6DCC6;
  /* type */
  --ff-ar-display:"AR Amiri","Amiri",serif;
  --ff-ar:"AR Tajawal","Tajawal",system-ui,sans-serif;
  --ff-display:"AR Italiana","Italiana","Didot",serif;
  --ff-num:"AR Bodoni","Bodoni Moda","Didot",serif;
  --ease:cubic-bezier(.22,.61,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* materials */
  --velvet:url(assets/img/fabric/velvet.webp);
  --moon-orange:radial-gradient(circle at 40% 34%,#FFE4B6 0%,#F9BE73 20%,#EF9A4A 46%,#DC7631 72%,#B8552B 100%);
  --grain-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .28 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  /* a torn rag-paper edge, used as a mask so the paper itself is deckled */
  --deckle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-3%25' y='-3%25' width='106%25' height='106%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055' numOctaves='4' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='11' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Crect x='9' y='9' width='982' height='982' fill='%23000' filter='url(%23d)'/%3E%3C/svg%3E");
  /* a drape drawn back to a tie: wide at the top, gathered at the tie, falling open to the floor */
  --tie-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100C92 160 46 330 34 460C30 520 44 640 62 780C70 860 80 940 84 1000H0Z'/%3E%3C/svg%3E");
  --tie-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M100 0H0C8 160 54 330 66 460C70 520 56 640 38 780C30 860 20 940 16 1000H100Z'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--on-night);font-family:var(--ff-ar);font-size:1.0625rem;line-height:1.75;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body.is-locked{overflow:hidden;height:100svh}
img,video,svg{display:block}
img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
h1,h2,h3,p,figure,address{margin:0}
address{font-style:normal}
button{font:inherit;color:inherit}
::selection{background:rgba(242,167,75,.45);color:var(--night)}
.ch--ivory ::selection{background:rgba(181,80,42,.28);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
.ch--ivory :focus-visible{outline-color:var(--terra)}
[tabindex="-1"]:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.en{font-family:var(--ff-num);font-style:italic;font-weight:400;font-variant-numeric:lining-nums}
.word{font-family:var(--ff-display);font-weight:400;text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;font-size:.95rem;line-height:1.3}
.word--xl{font-size:clamp(3.4rem,13vw,6rem);letter-spacing:.08em;text-indent:.08em;line-height:.95;text-transform:none}
.nojs{position:fixed;inset:auto 0 0;z-index:99;padding:1rem;background:var(--ivory);color:var(--ink);text-align:center}

/* grain over everything */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:soft-light;background:var(--grain-svg)}

/* ---------- engraved botanicals (drawn by theme.js) ----------
   A hairline outline, finer hatching inside, and a breath of colour in each petal. */
.bloom path,.bloom circle{stroke:var(--line,#F8DDB4);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke}
.bloom .fill{fill:var(--petal,#F2A74B);fill-opacity:var(--tint,.24)}
.bloom .fill2{fill:var(--petal2,var(--petal,#C9622E));fill-opacity:calc(var(--tint,.24) * 1.9)}
.bloom .sepal{fill:var(--stemc,#B7BD8C);fill-opacity:.22}
.bloom .fine{stroke-width:.6;stroke-opacity:.7}
.bloom .bold{stroke-width:1.8}
.bloom .bare{stroke:none}
.bloom .dot{fill:var(--line,#F8DDB4);stroke:none}
.bloom .accent{stroke:var(--accent,#A9C1EC)}
.stem-line{stroke:var(--stemc,#B7BD8C);stroke-width:1.2;stroke-opacity:.9;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.leaf path{stroke:var(--stemc,#B7BD8C);stroke-width:1;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.leaf .fill{fill:var(--stemc,#B7BD8C);fill-opacity:.16}
.leaf .fine{stroke-width:.55;stroke-opacity:.7}

/* =========================================================
   HERO: the stage, the drapes, the moon, the meadow
   ========================================================= */
.hero{position:relative;height:100svh;background:var(--night)}
.js-motion .is-opened .hero,.is-opened.js-motion .hero{height:320svh}
.stage{--mx:65%;--my:18%;position:relative;height:100svh;overflow:hidden;perspective:1600px;background:radial-gradient(ellipse 80% 55% at var(--mx) var(--my),#3E2414 0%,var(--night) 58%,var(--night-3) 100%)}
.js-motion .stage{position:sticky;top:0}
.film{position:absolute;inset:0;z-index:9;width:100%;height:100%;object-fit:cover;background:var(--night)}

.sky{position:absolute;inset:0;opacity:0}
.leak{position:absolute;inset:-10%;background:radial-gradient(ellipse 45% 40% at var(--mx) var(--my),rgba(242,150,75,.3),rgba(242,150,75,0) 70%),radial-gradient(ellipse 60% 30% at 18% 92%,rgba(201,98,46,.22),rgba(201,98,46,0) 70%);mix-blend-mode:screen}
.leak.has-img{background:var(--leak) center/cover no-repeat;opacity:.7}
.bokeh{position:absolute;inset:0}
.bokeh i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;opacity:var(--o,.5);
  background:radial-gradient(circle,rgba(255,226,180,.95) 0%,rgba(242,150,75,.5) 35%,rgba(242,150,75,0) 70%);transform:translate(-50%,-50%);filter:blur(var(--b,1px))}
.bokeh.has-img{background:var(--bokeh) center/cover no-repeat;mix-blend-mode:screen;opacity:.8}
.bokeh.has-img i{display:none}

/* the orange moon sits upper right, off the axis of the names */
.moon{position:absolute;left:var(--mx);top:var(--my);width:min(46vw,280px);aspect-ratio:1;transform:translate(-50%,-50%);will-change:transform,opacity}
.moon__disc,.moon__halo,.moon__mottle,.moon__img{position:absolute;inset:0;border-radius:50%}
.moon__disc{background:var(--moon-orange);box-shadow:inset -10px -16px 44px rgba(110,36,10,.42)}
.moon__mottle{mix-blend-mode:multiply;opacity:.38;overflow:hidden}
.moon__mottle rect{fill:#8A3C14}
.moon__halo{inset:-40%;background:radial-gradient(circle,rgba(255,190,110,.5) 0%,rgba(242,140,70,.26) 32%,rgba(242,140,70,.07) 54%,rgba(242,140,70,0) 70%);filter:blur(6px)}
/* the photographed globe, warmed toward amber so it belongs to the palette, its texture intact */
.moon__img{width:100%;height:100%;object-fit:cover;filter:sepia(.32) saturate(1.45) hue-rotate(-8deg) brightness(1.03) contrast(1.04)}
.moon.has-img .moon__disc,.moon.has-img .moon__mottle{display:none}
.moon.has-img .moon__halo{background:radial-gradient(circle,rgba(255,200,130,.46) 0%,rgba(242,150,75,.22) 34%,rgba(242,140,70,.06) 56%,rgba(242,140,70,0) 70%)}
/* every other moon in the page uses the same photograph when it is configured */
.has-moon-photo .phase__disc,.has-moon-photo .still__moon,.has-moon-photo .closing__moon .moon__disc{background:var(--moon-photo) center/106% no-repeat;/* the photo's sphere fills 94.5% of its square: scale it to meet the disc's rim, no dark ring */filter:sepia(.32) saturate(1.45) hue-rotate(-8deg) brightness(1.02)}
.has-moon-photo .phase__mottle{display:none}
.has-moon-photo .closing__moon .moon__disc{filter:sepia(.6) saturate(2) hue-rotate(-14deg) brightness(.92)}
.has-moon-photo .still--amber .still__moon{filter:sepia(.2) saturate(1.2) brightness(1.08)}

/* the installation: photographed stems in one band along the bottom edge, never taller than a quarter
   of the screen, so the moon, the names and every line of text keep the upper three quarters */
.installation{position:absolute;left:0;right:0;bottom:0;height:25svh;z-index:2;pointer-events:none}
.flora{position:absolute;bottom:0;left:var(--x);height:calc(var(--h) * 100%);translate:-50% 0;transform-origin:50% 100%;
  filter:brightness(var(--depth,1)) saturate(.95) contrast(1.02)}
.flora>img{display:block;height:100%;width:auto;max-width:none}
.flora--flip>img{transform:scaleX(-1)}
/* the rose: one stem, four heads in register; motion crossfades the heads from bud to full bloom */
.flora--rose{aspect-ratio:var(--ar)}
.flora--rose img{position:absolute;inset:0;width:100%;height:100%}
.rose__heads{position:absolute;inset:0;transform-origin:var(--rx) var(--ry)}
.rose__head{opacity:0}
.rose__head.is-on{opacity:1}
/* the stems rise out of the dark, not off a cut edge */
.installation::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:20;
  background:linear-gradient(0deg,rgba(20,12,8,.94) 0%,rgba(20,12,8,.5) 45%,rgba(20,12,8,0) 100%)}
.installation--reprise{position:relative;height:clamp(180px,26svh,280px);margin-top:3rem;z-index:2}
.installation--reprise::after{background:linear-gradient(0deg,rgba(20,12,8,.9) 0%,rgba(20,12,8,0) 100%)}

/* petals: single photographed petals */
.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.petals img{position:absolute;left:var(--x);top:var(--y);width:var(--w,30px);height:auto;opacity:var(--o,.9);transform:translate(-50%,-50%) rotate(var(--r,0deg));
  filter:drop-shadow(0 3px 4px rgba(20,8,3,.35))}
/* the petal rain: fixed over every chapter, under the progress line, buttons and menu.
   Each petal sits in a square of its depth's size; object-fit keeps its own shape inside it. */
.rain{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden;contain:strict}
.rain img{position:absolute;left:0;top:0;width:var(--s,22px);height:var(--s,22px);object-fit:contain;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 4px 5px rgba(20,8,3,.3))}
.rain img.is-far{filter:blur(1px)}
.rain img.is-near{filter:blur(.4px) drop-shadow(0 7px 9px rgba(20,8,3,.35))}

/* the drapes: velvet folds, a soft hem, the moon glowing through the cloth */
.drape{position:absolute;top:-2%;height:106%;width:57%;z-index:3;will-change:transform;overflow:hidden}
.drape--l{left:-3%;transform-origin:0 50%;border-bottom-right-radius:34% 9%}
.drape--r{right:-3%;transform-origin:100% 50%;border-bottom-left-radius:34% 9%}
.drape__velvet,.drape__silk,.drape__shade{position:absolute;inset:0}
.drape__velvet{background:var(--velvet) 0 0/100% 100% no-repeat,#9C4420}
.drape--r .drape__velvet{background-size:150% 100%;background-position:78% 0;transform:scaleX(-1)}
.drape__velvet::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,10,2,.5) 0%,rgba(40,10,2,.08) 13%,rgba(40,10,2,0) 34%,rgba(40,10,2,.16) 66%,rgba(40,10,2,.55) 94%,rgba(255,200,140,.12) 97%,rgba(40,10,2,.6) 100%)}
.drape__silk{background:var(--silk) center 18%/cover no-repeat;mix-blend-mode:soft-light;opacity:.28;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 66%);mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 66%)}
.drape__shade{background:linear-gradient(90deg,rgba(30,8,2,0) 62%,rgba(30,8,2,.42) 100%)}
.drape--r .drape__shade{transform:scaleX(-1)}
/* photographed velvet: the wide panel hangs from its inner edge; the outer folds run off the stage */
.drape.has-img{overflow:visible;border-radius:0;top:-6%;transform-style:preserve-3d}
.drape.has-img .drape__velvet,.drape.has-img .drape__silk,.drape.has-img .drape__shade{display:none}
.drape.has-img img{position:absolute;top:0;height:100%;width:auto;max-width:none;object-fit:cover}
/* on screens wider than about 2:1 (a phone on its side, an ultrawide monitor) the panel's height alone
   no longer reaches the outer edge: hold it at least that wide, cropping the hem rather than leaving a gap */
.drape--l.has-img img{right:calc(var(--inset,.03) * -106svh);min-width:calc(100% + var(--inset,.03) * 106svh + 4vw);object-position:100% 0}
.drape--r.has-img img{left:calc(var(--inset,.08) * -106svh);min-width:calc(100% + var(--inset,.08) * 106svh + 4vw);object-position:0 0}
/* stage light: darker under the top of the frame and at the hem, a soft shade along the inner fall */
.drape.has-img::after{content:"";position:absolute;top:0;bottom:0;width:180%;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,8,3,.62) 0%,rgba(18,8,3,.1) 20%,rgba(18,8,3,0) 40%,rgba(18,8,3,0) 78%,rgba(18,8,3,.42) 100%)}
.drape--l.has-img::after{right:0}
.drape--r.has-img::after{left:0}
/* backlight: blend layers sit directly in the stage so they reach the velvet beneath */
.seam{position:absolute;inset:0;pointer-events:none}
.seam i{position:absolute;inset:0;z-index:4}
.seam__moon{mix-blend-mode:overlay;background:radial-gradient(circle min(54vw,340px) at var(--mx) var(--my),rgba(255,216,150,1) 0%,rgba(255,184,104,.9) 26%,rgba(255,150,80,.42) 54%,rgba(255,150,80,0) 78%)}
.seam__line{mix-blend-mode:screen;background:radial-gradient(circle min(30vw,190px) at var(--mx) var(--my),rgba(255,206,140,.36),rgba(255,170,90,.1) 55%,rgba(255,170,90,0) 80%),radial-gradient(ellipse 1.4% 50% at 50% 46%,rgba(255,200,130,.62),rgba(255,170,90,0))}
/* a sheer scarf across the upper curtain: the chiffon cut-out's silhouette filled with warm light */
.sheer{position:absolute;z-index:5;left:-30%;top:2%;width:160%;aspect-ratio:9/5;opacity:.3;mix-blend-mode:screen;pointer-events:none;transform:rotate(-8deg);
  background:linear-gradient(100deg,#F6C99A,#E9A36C 55%,#F3D2B0);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.sheer.has-img{background:var(--src) center/contain no-repeat;-webkit-mask:none;mask:none;mix-blend-mode:normal;opacity:.8}

/* the words on the curtain */
.gate{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  padding:0 7vw calc(env(safe-area-inset-bottom) + 7svh);color:var(--on-night);text-shadow:0 1px 18px rgba(30,8,2,.6)}
.names{display:flex;flex-direction:column;align-items:center;font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.6rem,12.5vw,4.4rem);line-height:1.18;color:var(--moon)}
.names__amp{font-family:var(--ff-num);font-style:italic;font-weight:400;font-size:.55em;line-height:1;color:var(--amber);margin:.05em 0 .12em}
.names-en{font-family:var(--ff-num);font-style:italic;font-weight:400;font-size:1.25rem;letter-spacing:.02em;color:#F6DFC6;margin-top:.7rem}
.names-en i{color:var(--amber)}
.gate__line{font-weight:300;font-size:1rem;line-height:1.8;color:#F3DCC6;max-width:22em;margin-top:1.2rem}
.stack-date{display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:1.3rem;font-family:var(--ff-num);font-weight:400;font-size:1.55rem;letter-spacing:.06em;font-variant-numeric:lining-nums;font-variation-settings:"opsz" 96;color:var(--moon)}
.stack-date i{width:1px;height:1.1em;background:var(--amber);transform:rotate(18deg)}

.open-btn{position:relative;margin-top:1.4rem;min-height:56px;padding:.5rem 1.6rem;display:inline-grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;justify-content:center;text-align:start;white-space:nowrap;line-height:1.35;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,rgba(242,167,75,.96),rgba(217,126,54,.96));color:var(--night-3);border:0;box-shadow:0 10px 30px rgba(20,6,2,.45),0 0 0 1px rgba(255,236,200,.45) inset;text-shadow:none;transition:transform .25s var(--ease-out),box-shadow .25s}
.open-btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(20,6,2,.5),0 0 0 1px rgba(255,236,200,.6) inset}
.open-btn:active{transform:translateY(1px) scale(.99)}
.open-btn:focus-visible{outline:2px solid var(--moon);outline-offset:4px}
.open-btn span{font-weight:500;font-size:1.04rem;grid-column:2}
.open-btn small{font-family:var(--ff-num);font-style:italic;font-size:.9rem;opacity:.85;grid-column:2;text-align:start}
.open-btn__hand{grid-row:1/3;grid-column:1;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 90%;animation:tap 1.9s var(--ease) infinite}
@keyframes tap{0%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(3px) scale(.92) rotate(-6deg)}36%{transform:translateY(0) rotate(0)}}

.gate>*{opacity:0;animation:rise 1.3s var(--ease) forwards}
.gate>:nth-child(1){animation-delay:.35s}.gate>:nth-child(2){animation-delay:.7s}.gate>:nth-child(3){animation-delay:.9s}
.gate>:nth-child(4){animation-delay:1.05s}.gate>:nth-child(5){animation-delay:1.4s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* scroll layers after the opening */
.hl{position:absolute;left:50%;transform:translateX(-50%);width:min(84vw,560px);text-align:center;opacity:0;pointer-events:none}
.hl-message{top:38svh;z-index:6}
.hl-message__ar{font-family:var(--ff-ar-display);font-size:clamp(1.45rem,6vw,2.1rem);line-height:1.9;color:var(--moon);text-shadow:0 2px 26px rgba(20,6,2,.7)}
.hl-message__en{font-family:var(--ff-num);font-style:italic;font-size:clamp(1.05rem,4.2vw,1.35rem);line-height:1.5;color:#F6DFC6;margin-top:1rem}
.hl-rise{left:0;right:0;bottom:0;top:auto;width:auto;height:100%;transform:translateY(100%);z-index:7;opacity:1;
  background:linear-gradient(0deg,var(--ivory) 0%,var(--ivory) 70%,rgba(244,237,225,.9) 80%,rgba(244,237,225,0) 100%)}
/* without scroll choreography the message is a plain band after the stage */
.no-motion .hero{height:auto}
.no-motion .hl-message{position:static;transform:none;opacity:1;width:auto;max-width:36rem;margin:0 auto;padding:4rem 8% 5rem}
.no-motion .hl-rise{display:none}

.swipe{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 3svh);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.4rem;color:#E6CDB4;opacity:0;transition:opacity .8s}
.swipe.is-shown{opacity:1}
.swipe__track{position:relative;width:1px;height:42px;background:rgba(246,223,198,.3);overflow:hidden}
.swipe__track i{position:absolute;left:0;bottom:-14px;width:1px;height:14px;background:var(--moon);animation:swipe 2.2s var(--ease) infinite}
@keyframes swipe{0%{transform:translateY(0)}70%,100%{transform:translateY(-60px)}}
.swipe small{font-size:.8rem}

@media (min-width:900px){
  .stage{--mx:68%;--my:27%}
  .moon{width:min(26vw,360px)}
  .drape{width:54%}
  .gate{padding-bottom:9svh}
  /* on a large screen the names carry the stage: a step up, with the lines under them in proportion */
  .names{font-size:clamp(3rem,5.6vw,5.6rem)}
  .names-en{font-size:1.5rem}
  .gate__line{font-size:1.12rem}
  .stack-date{font-size:1.9rem}
  .hl-message{width:min(46vw,640px);top:42svh}
}
/* short landscape screens (a phone on its side, a laptop zoomed to 200%): the words are sized by the
   screen's height so the whole block fits, and the moon moves to the side, clear of the names */
@media (orientation:landscape) and (max-height:560px){
  .stage{--mx:83%;--my:30%}
  .moon{width:min(40svh,230px)}
  .gate{padding-bottom:calc(env(safe-area-inset-bottom) + 4svh)}
  .names{font-size:min(4.4rem,11.5svh);line-height:1.12}
  .names-en{font-size:1.05rem;margin-top:.3rem}
  .gate__line{font-size:.95rem;line-height:1.5;margin-top:.45rem}
  .stack-date{font-size:1.25rem;margin-top:.45rem}
  .open-btn{margin-top:.8rem;min-height:48px;padding-block:.35rem}
  .swipe__track{height:28px}
}

/* =========================================================
   CHROME: progress, menu, music
   ========================================================= */
.progress{position:fixed;top:0;left:0;right:0;z-index:40;height:1px;background:rgba(242,167,75,.12);opacity:0;transition:opacity .8s}
.is-opened .progress{opacity:1}
.progress i{position:absolute;inset:0;background:var(--amber);transform-origin:100% 0;transform:scaleX(0)}
.nav-btn,.music-btn{position:fixed;top:calc(env(safe-area-inset-top) + 14px);z-index:45;width:46px;height:46px;border-radius:50%;border:1px solid rgba(246,223,198,.35);background:rgba(28,18,13,.35);cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(-6px);transition:opacity .7s,transform .7s,background .5s,border-color .5s,color .5s;color:var(--on-night)}
.nav-btn.is-shown,.music-btn.is-shown{opacity:1;transform:none}
.nav-btn[aria-expanded="true"]{opacity:0;visibility:hidden}
.nav-btn{inset-inline-end:14px}
.music-btn{inset-inline-start:14px}
.on-light .nav-btn,.on-light .music-btn{background:rgba(244,237,225,.55);border-color:rgba(42,25,17,.25);color:var(--ink)}
.nav-btn__lines{display:grid;gap:5px}
.nav-btn__lines i{width:18px;height:1px;background:currentColor}
.music-btn__bars{display:flex;align-items:flex-end;gap:2px;height:16px}
.music-btn__bars i{width:2px;background:currentColor;animation:bars 1.1s ease-in-out infinite;height:40%}
.music-btn__bars i:nth-child(2){animation-delay:.2s}.music-btn__bars i:nth-child(3){animation-delay:.4s}.music-btn__bars i:nth-child(4){animation-delay:.6s}
@keyframes bars{0%,100%{height:30%}50%{height:100%}}
.music-btn.is-muted .music-btn__bars i{animation:none;height:30%;opacity:.6}
/* the petal control sits beside the menu button, in the same glass circle */
.petal-btn{inset-inline-start:auto;inset-inline-end:70px}
.petal-btn__icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.petal-btn__slash{position:absolute;width:24px;height:1.4px;background:currentColor;transform:rotate(-45deg) scaleX(0);transition:transform .35s var(--ease-out)}
.petal-btn.is-off .petal-btn__slash{transform:rotate(-45deg) scaleX(1)}
.petal-btn.is-off .petal-btn__icon{opacity:.65}
.glide-btn{inset-inline-end:126px}
/* the glide cue: bottom centre, a small glass capsule with one slow falling dot. It appears only when the
   page is about to drift (or is drifting), and never over the hero's own swipe hint. */
.glide-cue{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 16px);z-index:44;width:24px;height:42px;margin-left:-12px;border-radius:999px;
  border:1px solid rgba(246,223,198,.34);background:rgba(28,18,13,.3);overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease)}
.glide-cue.is-on{opacity:.9}
.glide-cue i{position:absolute;left:50%;top:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--moon);animation:glide-dot 2.6s var(--ease) infinite}
@keyframes glide-dot{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}80%{transform:translateY(24px);opacity:.9}100%{transform:translateY(28px);opacity:0}}
.on-light .glide-cue{border-color:rgba(42,25,17,.3);background:rgba(244,237,225,.55)}
.on-light .glide-cue i{background:var(--terra-ink)}
@media (prefers-reduced-motion:reduce){.glide-cue,.glide-btn{display:none}}
@media (prefers-reduced-transparency:reduce){.glide-cue{background:var(--night)}.on-light .glide-cue{background:var(--ivory)}}
.music-btn:focus-visible,.nav-btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* the rain recedes where people read: full in the overture and the finale, softer over the invitation
   card, quiet over the story, date, programme, venue and reply. It never stops; it steps back. */
.rain{transition:opacity 1.2s var(--ease)}
.rain[data-air="soft"]{opacity:.6}
.rain[data-air="quiet"]{opacity:.34}
.rain.is-paused{opacity:0}
.nav{position:fixed;inset:0;z-index:50;background:rgba(28,18,13,.94);color:var(--on-night);opacity:0;transition:opacity .45s}
.nav.is-open{opacity:1}
.nav__inner{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}
.nav__title{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;font-size:.8rem;color:var(--amber);margin-bottom:1.6rem}
.nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem;text-align:center}
.nav__list a{display:flex;flex-direction:column;align-items:center;padding:.55rem 1rem;min-height:48px;color:inherit;text-decoration:none}
.nav__list .ar{font-family:var(--ff-ar-display);font-size:1.5rem;line-height:1.4}
.nav__list .en{font-size:.95rem;color:var(--on-night-mute)}
.nav__close{position:absolute;top:calc(env(safe-area-inset-top) + 14px);inset-inline-end:14px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(246,223,198,.35);background:none;cursor:pointer;display:grid;place-items:center}
.nav__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}

/* =========================================================
   CHAPTER SYSTEM
   ========================================================= */
.ch{position:relative;overflow:hidden;padding:clamp(5rem,14svh,9rem) 0}
.ch--ivory{background:var(--ivory);color:var(--ink)}
.ch--night{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 50%,var(--night) 100%);color:var(--on-night)}
/* terracotta is the velvet itself: the colour on the crests, ember only in the folds */
.ch--terracotta{background:radial-gradient(ellipse 90% 60% at 50% 0%,#C3602F 0%,var(--terra) 55%,#A9481F 100%);color:var(--on-terra)}
.ch--terracotta::before{content:"";position:absolute;inset:0;background:var(--velvet) 0 0/100% 100% no-repeat;opacity:.5;mix-blend-mode:soft-light;pointer-events:none}
.paper{position:absolute;inset:0;pointer-events:none;background:var(--paper-svg);opacity:.55;mix-blend-mode:multiply}
.paper.has-img{background:var(--paper) center/600px repeat;opacity:.35}
.ch__inner{position:relative;z-index:2;width:min(88vw,640px);margin-inline:auto;text-align:center}
.ch__head{margin-bottom:clamp(2rem,6svh,3.2rem)}
.ch__title{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.1rem,8.4vw,3.2rem);line-height:1.3;text-wrap:balance}
.ch__title-en{margin-top:.5rem;color:var(--terra)}
/* small terracotta words on ivory and bone take the deeper ink (5:1); the large display terracotta stays */
.ch--ivory .ch__title-en,.ch--ivory .moment__label .en{color:var(--terra-ink)}
.ch--night .ch__title-en{color:var(--amber)}
.ch--terracotta .ch__title-en{color:var(--moon)}
.ch__head--side{text-align:start;position:relative}
.ch__head--side .word--xl{color:var(--terra);opacity:.9}
.ch__head--side .ch__title{margin-top:.15em}
.has-js .rv{opacity:0;transform:translateY(14px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.has-js .rv.in{opacity:1;transform:none}

/* light falling through stems onto paper, and a sheer of dyed chiffon */
.cast{position:absolute;z-index:1;bottom:0;aspect-ratio:2/3;height:auto;pointer-events:none;opacity:.14;filter:blur(2.2px);mix-blend-mode:multiply;transform-origin:50% 100%}
.cast path{fill:none;stroke:#6E2410;stroke-width:3;stroke-linecap:round}
.cast .bloom path,.cast .bloom circle{stroke:#6E2410;stroke-width:2.2}
.cast .fill,.cast .fill2,.cast .sepal,.cast .dot{fill:#6E2410;fill-opacity:.85}
.cloth{position:absolute;z-index:1;pointer-events:none;aspect-ratio:9/5;opacity:.42;mix-blend-mode:multiply;
  background:linear-gradient(100deg,#F3BE96,#DC7A44 58%,#EBA779);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}

/* fluted-glass buttons */
.glass-btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;min-height:52px;padding:.65rem 1.5rem;border-radius:999px;text-decoration:none;color:inherit;cursor:pointer;
  border:1px solid rgba(255,244,214,.45);background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,rgba(255,255,255,0) 2px 7px),linear-gradient(180deg,rgba(255,244,214,.14),rgba(255,244,214,.04));
  box-shadow:0 8px 24px rgba(10,4,2,.25),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s}
.glass-btn:hover{transform:translateY(-1px);border-color:rgba(255,244,214,.8);box-shadow:0 12px 30px rgba(10,4,2,.3),inset 0 1px 0 rgba(255,255,255,.25)}
.glass-btn:active{transform:translateY(1px)}
.glass-btn span{font-family:var(--ff-ar);font-weight:500;font-size:1rem}
.glass-btn small{font-family:var(--ff-num);font-style:italic;font-size:.92rem;opacity:.85}
.glass-btn--ink{color:var(--ink);border-color:rgba(42,25,17,.35);background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 2px,rgba(255,255,255,0) 2px 7px),linear-gradient(180deg,rgba(255,253,248,.7),rgba(237,227,210,.5));box-shadow:0 8px 24px rgba(60,30,12,.14),inset 0 1px 0 rgba(255,255,255,.6)}
.glass-btn--solid{color:var(--night-3);border-color:rgba(255,244,214,.6);background:linear-gradient(180deg,#F6B967,#E08A3C);width:100%}

/* deckled rag paper: the sheet is a masked layer so its edge is torn, not cut */
.deckle{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--paper-svg),#FBF6EC;
  -webkit-mask:var(--deckle) 0 0/100% 100% no-repeat;mask:var(--deckle) 0 0/100% 100% no-repeat}

/* =========================================================
   I — THE INVITATION
   ========================================================= */
.invitation{padding-top:clamp(4rem,10svh,6rem)}
.invitation__inner{width:min(92vw,560px)}
.card{position:relative;isolation:isolate;padding:clamp(2.6rem,9vw,4rem) clamp(1.4rem,6vw,2.8rem) clamp(2.8rem,9vw,4rem);color:var(--ink);text-align:center;
  filter:drop-shadow(0 26px 30px rgba(60,30,12,.22)) drop-shadow(0 2px 3px rgba(60,30,12,.1))}
.card>:not(.deckle){position:relative;z-index:1}
.card__bismillah{font-family:var(--ff-ar-display);font-size:1.15rem;color:var(--ink-soft);margin-bottom:1.6rem}
.card .ch__head{margin-bottom:1.6rem}
.card .ch__title{font-size:clamp(1.9rem,7.5vw,2.6rem)}
.card__lead{font-weight:300;font-size:1.02rem;color:var(--ink-soft);max-width:22em;margin:0 auto}
.card__lead-en{font-family:var(--ff-num);font-style:italic;font-size:1rem;color:var(--ink-mute);max-width:26em;margin:.35rem auto 0;line-height:1.5}
.card__names{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.3rem,10.5vw,3.6rem);line-height:1.25;margin:1.8rem 0 .2rem;display:flex;flex-direction:column;align-items:center;color:var(--terra)}
.card__names .names__amp{color:var(--amber-2)}
.card__names-en{font-family:var(--ff-num);font-style:italic;font-size:1.3rem;color:var(--ink-soft)}
.card__names-en i{color:var(--terra-ink)}
.families{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.8rem auto 0;padding-top:1.4rem;border-top:1px solid rgba(181,80,42,.28)}
.family{display:flex;flex-direction:column;min-width:0}
.family small{font-size:.875rem;color:var(--ink-mute)}
.family span{font-family:var(--ff-ar-display);font-size:1.12rem;line-height:1.5}
.card__when{margin:1.8rem 0 1.6rem;padding:1.4rem 0;border-top:1px solid rgba(181,80,42,.28);border-bottom:1px solid rgba(181,80,42,.28)}
.card__long{font-family:var(--ff-ar-display);font-size:1.25rem}
.card__long-en{font-family:var(--ff-num);font-style:italic;font-size:1.02rem;color:var(--ink-soft);margin-top:.2rem}
.card__time{font-weight:300;font-size:1rem;color:var(--ink-soft);margin-top:.5rem}
.card__venue{font-size:1rem;color:var(--ink-mute);margin-top:.3rem}
.card__closing{font-family:var(--ff-ar-display);font-size:1.2rem}
.card__closing-en{font-family:var(--ff-num);font-style:italic;color:var(--ink-mute);margin-top:.15rem}

.seal{width:clamp(132px,36vw,172px);margin:-1.9rem auto 0;position:relative;z-index:3;filter:drop-shadow(0 14px 22px rgba(60,30,12,.3));transition-delay:.3s}
.seal svg{width:100%;height:auto}
.seal__bg{fill:var(--terra)}
.seal__art .bloom path,.seal__art path,.seal__art circle{stroke:#F6E2C3;stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.seal__art .spadix-tip{fill:#F6E2C3;stroke:none}
.seal__stem{stroke:#F6E2C3;stroke-width:1.1;fill:none;stroke-linecap:round}
.seal__date text{fill:var(--moon);font-family:var(--ff-num);font-size:26px;font-variant-numeric:lining-nums;letter-spacing:.04em}
.seal__date line{stroke:var(--moon);stroke-width:1;opacity:.85}
.petals--card{height:40%;top:auto;bottom:0;z-index:1}
.invitation .cloth{width:min(150vw,1100px);left:-46%;top:-3%;transform:rotate(-9deg)}
.invitation .cast{width:min(56vw,440px);inset-inline-start:-8%;transform:skewX(14deg)}
@media (min-width:900px){
  .invitation__inner{width:min(70vw,620px)}
  .invitation .cloth{left:-22%;width:min(80vw,1200px)}
  .invitation .cast{inset-inline-start:4%}
}
/* the owner's floral board as the chapter ground (media.invitationBoard). The image is shown exactly
   as supplied: no filter, blend, texture or overlay on it. It fills the screen and holds while the card
   rises over its open centre; the chapter first shows it whole for most of a screen. */
.invitation.has-board{overflow:hidden;overflow:clip;padding-top:62svh;padding-bottom:clamp(6rem,18svh,10rem)}
.invitation.has-board>.paper{display:none}
.board{position:absolute;inset:0;z-index:0;pointer-events:none}
.board__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.board__pin img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.invitation.has-board .invitation__inner{width:min(84vw,520px)}
@media (min-width:900px){.invitation.has-board{padding-top:56svh}.invitation.has-board .invitation__inner{width:min(36vw,500px)}}
/* the veils: the page's own ivory, solid at the board's edge and easing to nothing over 60% of a screen
   (a smoothstep ramp, so no band shows); scaled by scroll, never left on the board at rest */
.board__veil{position:absolute;left:0;right:0;height:60%;pointer-events:none;will-change:transform;--v:244,237,225;
  --ramp:rgb(var(--v)) 0%,rgba(var(--v),.97) 12%,rgba(var(--v),.89) 25%,rgba(var(--v),.74) 38%,rgba(var(--v),.55) 50%,rgba(var(--v),.35) 62%,rgba(var(--v),.18) 75%,rgba(var(--v),.06) 88%,rgba(var(--v),0) 100%}
.board__veil--top{top:0;transform-origin:50% 0;transform:scaleY(1);background:linear-gradient(180deg,var(--ramp))}
.board__veil--bottom{bottom:0;transform-origin:50% 100%;transform:scaleY(0);background:linear-gradient(0deg,var(--ramp))}
/* the next ivory chapter starts as the same flat ivory the board dissolves into; its paper fibre comes in
   over the first third of a screen, so the two never meet at a line */
.invitation.has-board+.ch--ivory>.paper{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30svh);mask-image:linear-gradient(180deg,transparent 0,#000 30svh)}
/* the grain hands over to the board in step with the scroll (driven from theme.js) */
.grain{opacity:calc(.07 * var(--grain-k,1))}
@media (prefers-reduced-motion:reduce){.rain{display:none}}

/* =========================================================
   II — OUR STORY
   ========================================================= */
.story{padding-bottom:clamp(6rem,16svh,10rem)}
.story__inner{width:min(92vw,1040px)}
.story__intro{font-weight:300;color:var(--ink-soft);max-width:30em;margin-top:1.2rem;padding-inline-start:.8em}
.spread{display:grid;gap:clamp(2.2rem,7vw,4rem);margin-top:clamp(2rem,6svh,3.5rem)}
.moment{position:relative;display:grid;gap:1rem;text-align:start}
.moment__fig{position:relative;width:82%;margin:0}
.moment:nth-child(3n+2) .moment__fig{justify-self:end;width:68%}
.moment:nth-child(3n) .moment__fig{width:100%}
.moment__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bone);box-shadow:0 24px 50px -22px rgba(60,30,12,.45)}
.moment:nth-child(3n) .moment__img{aspect-ratio:16/10}
/* only the couple's own photograph (a direct child); the still life's petals keep their own sizes */
.moment__img>img{width:100%;height:100%;object-fit:cover;transition:filter 2s var(--ease),opacity 2s var(--ease),transform 2.4s var(--ease)}
.has-js .moment .moment__img>img{filter:sepia(.7) contrast(.75) brightness(1.12) saturate(.6);opacity:.5;transform:scale(1.04)}
.has-js .moment.in .moment__img>img{filter:none;opacity:1;transform:none}
.moment__cap{position:relative;display:flex;align-items:flex-start;gap:.6rem;font-family:var(--ff-num);font-style:italic;font-size:.95rem;color:var(--ink-soft);max-width:28em}
.moment__cap::before{content:"";flex:0 0 2.2rem;height:1px;background:var(--terra);margin-top:.75em}
.moment__label{font-family:var(--ff-ar-display);font-size:1.55rem;line-height:1.4}
.moment__label .en{display:block;font-size:.62em;color:var(--terra);margin-top:.15rem;text-align:end}
.moment__text{font-weight:300;color:var(--ink-soft);max-width:30em;margin-top:.2rem}
@media (min-width:900px){
  .moment{grid-template-columns:7fr 5fr;align-items:end;column-gap:3rem}
  .moment__fig{width:100%}
  .moment:nth-child(3n+2){grid-template-columns:5fr 7fr}
  .moment:nth-child(3n+2) .moment__fig{order:2;width:100%}
  .moment:nth-child(3n) .moment__fig{grid-column:1/-1}
  .moment:nth-child(3n) .moment__body{grid-column:1/-1;max-width:40em;margin-inline-start:auto}
}

/* ---------- theme still lifes: the story's empty frames and the venue fallback ---------- */
.still{position:absolute;inset:0;overflow:hidden;--line:#F8DDB4}
.still--night{background:radial-gradient(ellipse 80% 60% at 70% 26%,#43271A 0%,var(--night) 55%,var(--night-3) 100%)}
.still--terra{background:radial-gradient(ellipse 90% 70% at 40% 20%,#C3602F 0%,var(--terra) 55%,#9C4420 100%)}
.still--terra::before{content:"";position:absolute;inset:0;background:var(--velvet) 0 0/100% 100% no-repeat;opacity:.55;mix-blend-mode:soft-light}
.still--amber{background:linear-gradient(180deg,#F6C58A 0%,#EEA45E 46%,#D97A3B 78%,#B5502A 100%);--line:#5E1C0B}
.still__moon{position:absolute;left:var(--mx);top:var(--my);width:var(--ms);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:var(--moon-orange);
  box-shadow:0 0 60px 20px rgba(242,140,70,.3),inset -8px -12px 30px rgba(110,36,10,.35)}
.still--amber .still__moon{background:radial-gradient(circle at 46% 36%,#FFF3DA 0%,#FBDDA8 40%,#F2BC78 80%,#E8A35E 100%);box-shadow:0 0 70px 26px rgba(255,236,200,.4)}
.still__cloth{position:absolute;left:-30%;top:-8%;width:170%;aspect-ratio:9/5;opacity:.36;mix-blend-mode:screen;transform:rotate(-12deg);
  background:linear-gradient(100deg,#FBD8B4,#F2A877);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.still svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* photographed still life: the stage's own stems, cropped at the frame's lower edge like a photograph */
.still__stem{position:absolute;bottom:-2%;width:auto;max-width:none;translate:-50% 0;transform-origin:50% 100%;
  transform:rotate(var(--r,0deg)) scaleX(var(--f,1));filter:drop-shadow(0 14px 18px rgba(20,8,3,.4))}
.still--photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;pointer-events:none;
  background:linear-gradient(0deg,rgba(20,10,6,.38),rgba(20,10,6,0))}
.still--photo.still--amber::after{background:linear-gradient(0deg,rgba(94,28,11,.28),rgba(94,28,11,0))}
.still .bloom{--tint:.26}
.still--amber .bloom{--tint:.2}
.still--amber .stem-line{--stemc:#6E5A2C}
.note{position:absolute;z-index:2;font-family:var(--ff-display);font-size:clamp(.58rem,1.7vw,.74rem);letter-spacing:.24em;text-transform:uppercase;line-height:1;color:var(--line);white-space:nowrap;transform:translateY(-50%)}
.note--end{transform:translate(-100%,-50%)}
.still .lead{stroke:var(--line);stroke-width:.8;stroke-opacity:.75;fill:none;vector-effect:non-scaling-stroke}
.still .lead-dot{fill:var(--line);stroke:none}
.moment__ph-label{position:absolute;bottom:.9rem;inset-inline-end:1.1rem;z-index:2;font-family:var(--ff-num);font-style:italic;font-size:.9rem;color:rgba(255,244,214,.78)}
.still--amber~.moment__ph-label{color:rgba(42,25,17,.7)}

/* =========================================================
   III — THE DATE: the moon waxes
   ========================================================= */
.date{padding-top:clamp(4rem,10svh,6rem);min-height:100svh}
.date__inner{width:min(90vw,720px)}
.phase{position:relative;width:min(66vw,380px);aspect-ratio:1;margin:0 auto -4.6rem}
.phase__disc,.phase__halo,.phase__shadow,.phase__mottle{position:absolute;inset:0;border-radius:50%}
.phase__disc{background:var(--moon-orange)}
.phase__mottle{mix-blend-mode:multiply;opacity:.38;overflow:hidden}
.phase__mottle rect{fill:#8A3C14}
.phase__halo{inset:-30%;background:radial-gradient(circle,rgba(255,190,110,.4) 0%,rgba(242,140,70,.2) 32%,rgba(242,140,70,0) 68%);filter:blur(5px)}
.phase__clip{position:absolute;inset:-1px;border-radius:50%;overflow:hidden}
.phase__shadow{background:radial-gradient(circle at 60% 50%,rgba(28,18,13,.96) 62%,rgba(28,18,13,.82) 100%);transform:translateX(-18%) scale(1.02)}
.no-motion .phase__shadow{transform:translateX(-104%) scale(1.02)}
.date__mono{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.date__big{order:1}.date__weekday{order:2}.date__month{order:3}.date__month-en{order:4}.date__time{order:5}
.date__weekday{display:flex;align-items:baseline;gap:.7em;font-family:var(--ff-ar-display);font-size:1.5rem;color:var(--on-night)}
.date__weekday .en{font-size:.7em;color:var(--on-night-mute)}
.date__big{font-family:var(--ff-num);font-weight:400;font-size:clamp(7.5rem,40vw,13rem);line-height:.9;font-variant-numeric:lining-nums;font-variation-settings:"opsz" 96;color:var(--moon);text-shadow:0 2px 40px rgba(20,6,2,.7);margin:.1em 0 .1em}
.date__month{font-family:var(--ff-ar-display);font-size:1.9rem}
.date__year{font-family:var(--ff-num);font-weight:400;letter-spacing:.1em;color:var(--amber);font-variant-numeric:lining-nums;margin-inline-start:.3em}
.date__month-en{font-family:var(--ff-num);font-style:italic;color:var(--on-night-mute);font-size:1.1rem}
.date__time{margin-top:.8rem;font-weight:300;color:var(--on-night-soft)}
.countdown-wrap{margin-top:3rem}
.countdown__title{font-family:var(--ff-ar-display);font-size:1.3rem;margin-bottom:1.6rem}
.countdown__title .en{display:block;font-size:.72em;color:var(--on-night-mute);margin-top:.2rem}
/* the countdown is told in moon phases: full for the days, then each unit wanes */
.countdown{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.6rem,3vw,1.4rem)}
/* each orb is a small moon: ::after is the lit disc, ::before the night shadow with a soft, defined
   terminator. --ph is how far the shadow reaches across the face at its widest. The digits are
   two-toned at the same line, moonlight over the shadow and night over the lit side, so they
   stay legible whatever the phase. */
.orb{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;--d:clamp(64px,19vw,92px);--ph:0}
.orb strong{position:relative;isolation:isolate;display:block;width:var(--d);height:var(--d);border-radius:50%;font-family:var(--ff-num);font-weight:500;font-variation-settings:"opsz" 11;font-size:calc(var(--d) * .38);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.orb b{position:absolute;inset:0;display:grid;place-items:center;font-weight:inherit;
  color:transparent;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,var(--moon) 0 calc(var(--ph) * 100%),#140C08 calc(var(--ph) * 100%) 100%);-webkit-background-clip:text;background-clip:text}
.orb strong::after,.orb strong::before{content:"";position:absolute;border-radius:50%;pointer-events:none}
.orb strong::after{inset:0;z-index:-2;background:radial-gradient(circle at 62% 34%,#FFF1D4 0%,#F9D59C 34%,#EFB46A 72%,#DD9246 100%);
  box-shadow:inset 4px -6px 12px rgba(150,80,30,.22),0 0 26px 4px rgba(255,190,110,.18),0 10px 24px rgba(10,4,2,.4)}
/* the shadow is a night disc slid in from the left; its right edge is the terminator */
.orb strong::before{inset:0;z-index:-1;transform:translateX(calc((var(--ph) - 1) * 100%));
  background:radial-gradient(circle at 46% 50%,rgba(28,18,13,.94) 0%,rgba(28,18,13,.94) 86%,rgba(28,18,13,.6) 95%,rgba(28,18,13,0) 100%);
  -webkit-mask:radial-gradient(circle calc(var(--d) * .5) at calc(50% - (var(--ph) - 1) * 100%) 50%,#000 99%,transparent 100%);mask:radial-gradient(circle calc(var(--d) * .5) at calc(50% - (var(--ph) - 1) * 100%) 50%,#000 99%,transparent 100%)}
.orb--d{--d:clamp(84px,25vw,120px)}
.orb:nth-child(2){--ph:.24}.orb:nth-child(3){--ph:.46}.orb:nth-child(4){--ph:.66}
.orb span{font-size:.95rem;color:var(--on-night-soft)}
/* the Latin unit is the secondary voice, but still readable for older guests: 12px, tracking eased to fit four abreast at 320 */
.orb small{font-family:var(--ff-display);font-size:.75rem;letter-spacing:.12em;text-indent:.12em;text-transform:uppercase;color:var(--on-night-mute)}
.countdown__state{font-family:var(--ff-ar-display);font-size:1.4rem;color:var(--amber)}
.calendar{margin-top:3rem}
.calendar__title{font-family:var(--ff-ar-display);font-size:1.2rem;margin-bottom:1.1rem}
.calendar__actions{display:flex;flex-direction:column;gap:.75rem;align-items:center}
.calendar__actions .glass-btn{width:min(100%,320px)}
.calendar__actions .glass-btn span{font-family:var(--ff-num);font-style:italic;font-weight:400;letter-spacing:.02em}
.calendar__note{color:var(--on-night-mute);font-size:.92rem;margin-top:.6rem}
@media (min-width:1000px){
  .date__inner{width:min(84vw,1080px);display:grid;grid-template-columns:1fr 1fr;column-gap:4rem;align-items:center}
  .date .ch__head{grid-column:1/-1}
  .phase{grid-row:2/4;width:min(34vw,440px);margin:0 auto}
  .date__mono{grid-row:2;align-self:end}
  .countdown-wrap{grid-row:3;align-self:start}
  .calendar{grid-column:1/-1}
}

/* =========================================================
   IV — THE PROGRAMME: stems planted in a trough
   On phones two to a shelf, each shelf its own trough; on wide screens one long trough.
   ========================================================= */
.programme{padding-bottom:clamp(3rem,8svh,5rem)}
.programme .ch__head{margin-bottom:1.4rem}
.trough-wrap{position:relative;--tr:2.6rem}
.stems{list-style:none;margin:0 auto;padding:0;width:min(100%,640px);display:grid;grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
.event{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding-bottom:var(--tr)}
.event:last-child:nth-child(odd){grid-column:1/-1}
/* one continuous trough per shelf: the first event of each row carries it across both cells */
.event:nth-child(even)::after{display:none}
.event:last-child:nth-child(odd)::after{width:100%}
.event::after{content:"";position:absolute;inset-inline-start:0;width:200%;bottom:0;height:var(--tr);z-index:0;background:linear-gradient(180deg,#F0B274 0,#E5A060 12px,#D4874A 40%,#B86A34 100%);box-shadow:0 -8px 22px rgba(40,10,2,.2),inset 0 1px 0 rgba(255,226,180,.6)}
.event__stem{width:100%;height:var(--h,200px);overflow:visible}
.event__stem svg{width:120px;height:100%;margin:0 auto;overflow:visible}
/* the photographed stem stands in the trough: base on the planting hole, a soft shadow on the velvet */
.event__stem.has-photo{display:flex;justify-content:center;align-items:flex-end}
.event__photo{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 14px 16px rgba(40,10,2,.38))}
.event__photo.is-flip{transform:scaleX(-1)}
.event__stem .bloom{--line:#FFEBD0;--tint:.3}
.event__stem .stem-line{--stemc:#DCDBAA;stroke-width:1.4}
.event__text{position:relative;z-index:1;padding:0 .4rem 1.1rem}
.event__time{font-family:var(--ff-num);font-weight:400;font-size:1.5rem;line-height:1.1;font-variant-numeric:lining-nums;color:var(--moon);direction:ltr}
.event__time .en{display:block;font-size:.62em;color:var(--on-terra-soft);margin-top:.1rem}
.event__title{font-family:var(--ff-ar-display);font-size:1.3rem;line-height:1.45;margin-top:.45rem;color:var(--on-terra)}
.event__title .en{display:block;font-size:.72em;color:var(--on-terra-soft)}
.event__desc{font-weight:300;font-size:.92rem;color:var(--on-terra-soft);margin-top:.3rem}
.event__hole{position:absolute;bottom:calc(var(--tr) - .5rem);left:50%;width:9px;height:9px;border-radius:50%;background:#5E1C0B;transform:translateX(-50%);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);z-index:2}
.trough{display:none;position:absolute;left:0;right:0;bottom:0;height:3.4rem;background:linear-gradient(180deg,#E09555 0%,#D4874A 28%,#B86A34 100%);box-shadow:0 -10px 30px rgba(40,10,2,.25),inset 0 2px 0 rgba(255,220,170,.5)}
.trough i{position:absolute;left:0;right:0;top:0;height:14px;background:linear-gradient(180deg,#F0B274,#DE9A5A)}
.trough::after{content:"";position:absolute;inset:0;background:var(--grain-svg);opacity:.3;mix-blend-mode:multiply}
@media (min-width:1000px){
  .programme{padding-bottom:0}
  .trough-wrap{--tr:0px;padding-bottom:3.4rem}
  .stems{width:auto;display:flex;justify-content:center;align-items:flex-end;gap:clamp(1rem,3vw,3rem);padding:0 6vw}
  .event{flex:0 1 220px}
  .event::after{display:none}
  .event__hole{bottom:-.55rem}
  .trough{display:block}
}

/* =========================================================
   V — THE VENUE: an ivory passe-partout on deckled board
   ========================================================= */
.venue__inner{width:min(92vw,1040px);display:flex;flex-direction:column;gap:2.4rem}
/* venue: shadow and chiffon stay beside the photograph, never under the type */
.venue .cloth{width:min(150vw,1000px);left:-62%;top:-3%;transform:rotate(8deg)}
.venue .cast{width:min(40vw,340px);bottom:auto;top:clamp(2rem,6svh,4rem);inset-inline-start:-9%;transform:skewX(12deg)}
@media (min-width:1000px){
  .venue .cloth{left:auto;top:auto;right:-50%;bottom:-6%;transform:rotate(172deg)}
  .venue .cast{inset-inline-start:-3%;top:6%}
}
.mat{position:relative;isolation:isolate;width:min(84vw,420px);margin:0 auto;padding:clamp(1rem,4vw,1.6rem) clamp(1rem,4vw,1.6rem) clamp(2.2rem,8vw,3.2rem);
  filter:drop-shadow(0 26px 30px rgba(60,30,12,.26)) drop-shadow(0 2px 3px rgba(60,30,12,.1))}
.mat>:not(.deckle){position:relative;z-index:1}
.mat__window{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bone-2);box-shadow:inset 0 0 0 1px rgba(60,30,12,.12),inset 0 6px 14px rgba(60,30,12,.12)}
#venueImg{width:100%;height:100%;object-fit:cover}
#venueImg.is-graded{filter:sepia(.18) saturate(1.05) contrast(1.02)}
.mat__window::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 70% at 50% 40%,rgba(242,167,75,0) 50%,rgba(140,60,20,.22) 100%)}
.still__glass{position:absolute;bottom:0;left:50%;height:70%;width:auto;transform:translateX(-50%)}
.venue__info{text-align:center}
.venue__name{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(1.8rem,7.5vw,2.5rem);line-height:1.35;color:var(--terra)}
.venue__name-en{font-family:var(--ff-num);font-style:italic;color:var(--ink-soft);font-size:1.15rem}
.venue__address{font-weight:300;color:var(--ink-soft);margin:1.1rem auto 0;max-width:24em;line-height:1.9;padding-top:1rem;border-top:1px solid rgba(181,80,42,.25)}
.venue__desc{font-weight:300;color:var(--ink-soft);margin-top:.8rem;max-width:30em;margin-inline:auto}
.venue .glass-btn{margin-top:1.8rem}
.venue__note{margin-top:1.4rem;color:var(--ink-mute);font-size:.95rem}
@media (min-width:1000px){
  .venue__inner{flex-direction:row;align-items:center;gap:5rem}
  .mat{flex:0 0 40%;width:auto}
  .venue__info{flex:1;text-align:start}
  .venue__name-en{text-align:end}
  .venue__address,.venue__desc{margin-inline:0}
}

/* =========================================================
   VI — RSVP
   ========================================================= */
.rsvp__inner{width:min(90vw,560px)}
.rsvp__text{font-weight:300;font-size:1.04rem;color:var(--on-terra-soft);max-width:24em;margin:0 auto}
.rsvp__text-en{font-family:var(--ff-num);font-style:italic;color:var(--on-terra-soft);max-width:26em;margin:.4rem auto 0}
.rsvp__form{margin-top:2.4rem;text-align:start}
.rsvp__choices{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.choice{min-height:96px;padding:1rem .8rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-align:center;border-radius:18px;cursor:pointer;
  background:rgba(255,244,214,.08);border:1px solid rgba(255,244,214,.4);transition:background .4s,border-color .4s,opacity .4s,color .4s}
.choice:hover{border-color:rgba(255,244,214,.8)}
.choice__ar{font-family:var(--ff-ar-display);font-size:1.12rem;line-height:1.5}
.choice__en{font-family:var(--ff-num);font-style:italic;font-size:.95rem;opacity:.85}
.rsvp__choices.has-choice .choice[aria-checked="false"]{opacity:.55}
.choice[aria-checked="true"]{background:var(--moon);color:var(--night-3);border-color:var(--moon)}
.rsvp__details{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease)}
.rsvp__details.is-open{grid-template-rows:1fr}
.rsvp__details-inner{overflow:hidden;min-height:0}
.rsvp__details:not(.is-open) .rsvp__details-inner{visibility:hidden}
.rsvp__details.is-open .rsvp__details-inner{padding-top:1.8rem}
.input{display:block;margin-bottom:1.3rem}
.input__label{display:block;font-size:.88rem;color:var(--on-terra-soft);margin-bottom:.35rem}
.input input,.input textarea{width:100%;font-family:var(--ff-ar);font-size:1.05rem;color:var(--on-terra);background:rgba(28,18,13,.25);border:1px solid rgba(255,244,214,.35);border-radius:12px;padding:.85rem .9rem;caret-color:var(--amber);-webkit-appearance:none;appearance:none;transition:border-color .3s,background .3s}
.input textarea{resize:vertical;min-height:110px;line-height:1.7}
.input input:focus,.input textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,167,75,.25)}
.input [aria-invalid="true"]{border-color:#FFB4A0}
.input ::placeholder{color:rgba(251,239,224,.6)}
.field-err{color:#FFD2C4;font-size:.9rem;margin:-.8rem 0 1.1rem}
.rsvp__choices+.field-err{margin:.7rem 0 0}
.rsvp__note{font-size:.86rem;color:var(--on-terra-soft);text-align:center;margin-top:.9rem}
.rsvp__status{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:14px;background:rgba(28,18,13,.3);font-size:.96rem}
.rsvp__status pre{white-space:pre-wrap;font-family:var(--ff-ar);font-size:.92rem;margin:.7rem 0 0;padding:.8rem;background:rgba(28,18,13,.3);border-radius:10px;direction:auto;unicode-bidi:plaintext}
.rsvp__status a{color:var(--moon);font-weight:500;text-underline-offset:4px}
@media (max-width:359px){.rsvp__choices{grid-template-columns:1fr}}

/* =========================================================
   CLOSING: the curtain falls back in, the moon sets
   A valance of swagged velvet across the top; the side drapes drawn back to a tie.
   ========================================================= */
.closing{padding:clamp(9rem,22svh,13rem) 0 0;min-height:100svh;background:radial-gradient(ellipse 70% 40% at 50% 100%,#3A2214 0%,var(--night) 60%)}
.valance{position:absolute;left:-3%;right:-3%;top:0;height:clamp(78px,15svh,150px);z-index:2;display:flex;pointer-events:none;filter:drop-shadow(0 16px 18px rgba(10,4,2,.5))}
.valance i{flex:1;margin:0 -2%;background:radial-gradient(ellipse 60% 92% at 50% -16%,#7E2D13 0%,#C4602F 34%,#B04B24 50%,#8A3416 62%,#C25D2E 76%,#9C4420 88%,#6E2410 100%);
  /* the swag's curve, intersected with feathered ends so neighbouring swags blend where they overlap */
  -webkit-mask:radial-gradient(ellipse 52% 100% at 50% 0,#000 96%,transparent 100%),linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(ellipse 52% 100% at 50% 0,#000 96%,transparent 100%),linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-composite:intersect}
.closing__drape{position:absolute;top:0;height:100%;width:30%;z-index:1;will-change:transform}
.closing__drape--l{left:-4%;-webkit-mask:var(--tie-l) 0 0/100% 100% no-repeat;mask:var(--tie-l) 0 0/100% 100% no-repeat}
.closing__drape--r{right:-4%;-webkit-mask:var(--tie-r) 0 0/100% 100% no-repeat;mask:var(--tie-r) 0 0/100% 100% no-repeat}
.closing__drape .drape__velvet{position:absolute;inset:0;background:var(--velvet) 0 0/100% 100% no-repeat,#9C4420}
.closing__drape--r .drape__velvet{background-position:70% 0;background-size:160% 100%}
/* the same photographed velvet as the opening, drawn back to its tie */
.has-curtain-photo .closing__drape--l .drape__velvet{background:var(--curtain-l) right top/auto 100% no-repeat,#5E1C0B}
.has-curtain-photo .closing__drape--r .drape__velvet{background:var(--curtain-r) left top/auto 100% no-repeat,#5E1C0B}
.has-curtain-photo .closing__drape .drape__silk{display:none}
.closing__drape .drape__silk{position:absolute;inset:0;background:var(--silk) center/cover no-repeat;mix-blend-mode:soft-light;opacity:.25}
/* the tie: a shadow where the cloth gathers and a thin amber cord */
.closing__drape::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,10,2,.45) 0%,rgba(40,10,2,0) 18%,rgba(40,10,2,0) 42%,rgba(40,10,2,.5) 45.4%,rgba(242,167,75,.95) 45.8%,rgba(255,214,150,.9) 46.1%,rgba(242,167,75,.95) 46.4%,rgba(40,10,2,.5) 46.8%,rgba(40,10,2,0) 50%,rgba(40,10,2,0) 82%,rgba(40,10,2,.55) 100%)}
.closing__moon{position:absolute;left:50%;bottom:-6%;width:min(70vw,420px);aspect-ratio:1;transform:translateX(-50%);z-index:0}
.closing__moon .moon__disc,.closing__moon .moon__halo{position:absolute;inset:0;border-radius:50%}
.closing__moon .moon__halo{inset:-30%}
.closing__moon .moon__disc{background:radial-gradient(circle at 46% 26%,#F6BE78 0%,#E8893A 36%,#C9622E 68%,#8A2E17 100%);box-shadow:none}
.closing__inner{z-index:3;width:min(76vw,600px)}
.closing__line{font-family:var(--ff-ar-display);font-size:clamp(1.4rem,6vw,1.9rem);line-height:1.8}
.closing__line-en{font-family:var(--ff-num);font-style:italic;font-size:1.15rem;color:var(--on-night-soft);margin-top:.3rem}
.closing__names{font-family:var(--ff-ar-display);font-weight:700;font-size:clamp(2.6rem,12vw,4.4rem);line-height:1.25;margin:2.4rem 0 .6rem;display:flex;flex-direction:column;align-items:center;color:var(--moon)}
.stack-date--row{margin-top:.2rem}
.closing__families{margin-top:1.2rem;color:var(--on-night-soft)}
.closing__hashtag{margin-top:.5rem;color:var(--on-night-mute);font-family:var(--ff-num);font-style:italic}
.contacts{margin-top:2.6rem;text-align:start}
.contacts__title{font-size:.9rem;color:var(--on-night-mute);margin-bottom:.6rem;text-align:center}
.contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem 0;border-top:1px solid rgba(246,223,198,.18)}
.contact b{font-family:var(--ff-ar-display);font-weight:400;font-size:1.12rem}
.contact__btns{display:flex;gap:.5rem}
.contact__btns a{min-height:46px;min-width:84px;display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;border-radius:999px;border:1px solid rgba(246,223,198,.4);color:var(--on-night);text-decoration:none;font-size:.95rem;
  background:rgba(28,18,13,.55);transition:border-color .3s,background .3s}
.contact__btns a:hover{border-color:var(--amber)}
.petals--closing{z-index:2}
@media (min-width:900px){.closing__drape{width:24%}.closing__inner{width:min(40vw,600px)}}

/* =========================================================
   REDUCED MOTION, TRANSPARENCY, FORCED COLOURS
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .open-btn__hand,.swipe__track i,.music-btn__bars i{animation:none}
  .gate>*{animation:none;opacity:1}
  .has-js .rv{opacity:1;transform:none;transition:none}
  .has-js .moment .moment__img>img{filter:none;opacity:1;transform:none;transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav-btn,.music-btn{background:var(--night)}
  .on-light .nav-btn,.on-light .music-btn{background:var(--ivory)}
  .glass-btn{background:rgba(28,18,13,.6)}
  .glass-btn--ink{background:#FBF6EC}
  .cloth,.cast,.sheer{display:none}
}
@media (forced-colors:active){
  .glass-btn,.open-btn,.choice,.contact__btns a{border:2px solid ButtonText}
  .drape,.seam,.grain,.valance,.closing__drape{display:none}
}