/* ============================================================
   ROYAL-ELEGANCE-WIRED-3
   ROYAL ELEGANCE — velvet luxury, royal tier
   Identity: deep plum-wine velvet, champagne gold, cream type.
   Deliberately PLUM-leaning, not blood red - crimson-royale owns
   #8B0000 and the two must never read as the same template.
   Hairline gold rules, folio numbers, a left rail and a body
   column, print-style schedule, plate grid.
   ============================================================ */

:root{
  --paper:#240915;        /* the page - deep wine velvet   */
  --paper-2:#351527;      /* raised panels                 */
  --ink:#F6ECDC;          /* cream: the TEXT on a dark page */
  --ink-2:#E5D6C0;
  --stone:#A98C93;        /* muted mauve for small labels  */
  --gold:#D4B378;
  --gold-dp:#C29A55;
  --line:#4E2135;
  --wine:#3A0E20;         /* wine INK, for type on the ivory cover */
  --wine-2:#6A3145;
  --cover-bg:#2A0A18;     /* the cover's own velvet field */
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tenor Sans', 'Helvetica Neue', sans-serif;
  font-weight:400;
  background:var(--paper);
  color:var(--ink-2);
  overflow-x:hidden;
  position:relative;      /* the page frame is absolute, so it scrolls */
  -webkit-font-smoothing:antialiased;
}
/* a very soft pooling of light so the velvet is never a flat block */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 0%,   rgba(140,26,64,.34), transparent 62%),
    radial-gradient(110% 55% at 12% 78%,  rgba(96,16,48,.30),  transparent 66%),
    radial-gradient(120% 60% at 92% 44%,  rgba(76,12,40,.26),  transparent 68%);
}
body > *{position:relative; z-index:1;}

/* Cinzel for section headings, Italiana for the two names */
h1,h2,.cover-mono,.cd-num,.sch-time,.dropcap,.d{font-family:'Cinzel', Georgia, serif; font-weight:400;}
.mh-names{font-family:'Italiana', Georgia, serif; font-weight:400;}

/* ---------- ORNATE PAGE FRAME (royal tier) ---------- */
/* The frame belongs to the COVER and the HERO. It is deliberately NOT
   wrapped around the whole scrolling document - a frame that runs past
   five sections stops reading as a frame and starts reading as a border. */
/* One frame around the WHOLE document. `absolute`, not `fixed`, so it
   scrolls with the page like a printed border instead of hanging in front
   of the content. Heavier than the hero-only version it replaces. */
.page-frame{
  position:absolute; inset:14px; z-index:40; pointer-events:none;
  border:2px solid rgba(212,179,120,.42);
}
.page-frame::after{
  content:''; position:absolute; inset:9px; border:1.5px solid var(--gold); opacity:.62;
}
.cover-frame{
  position:absolute; inset:12px; z-index:4; pointer-events:none;
  border:2px solid rgba(212,179,120,.42);
}
.cover-frame::after{
  content:''; position:absolute; inset:8px; border:1.5px solid var(--gold-dp); opacity:.7;
}
.pf-corner{position:absolute; width:82px; height:82px; color:var(--gold); opacity:.95;}
.cover-frame .pf-corner,.cover-frame .pf-fleur{color:var(--gold-dp);}
.pf-tl{top:2px;    left:2px;}
.pf-tr{top:2px;    right:2px;  transform:scaleX(-1);}
.pf-bl{bottom:2px; left:2px;   transform:scaleY(-1);}
.pf-br{bottom:2px; right:2px;  transform:scale(-1,-1);}
.pf-fleur{position:absolute; width:66px; height:26px; color:var(--gold); opacity:.85;}
.pf-ft{top:-3px;    left:50%; transform:translateX(-50%);}
.pf-fb{bottom:-3px; left:50%; transform:translateX(-50%) scaleY(-1);}
.pf-fl{left:-20px;  top:50%;  transform:translateY(-50%) rotate(-90deg);}
.pf-fr{right:-20px; top:50%;  transform:translateY(-50%) rotate(90deg);}
/* the cover is ivory, so its frame takes the deeper gold; the hero sits on
   wine, so it takes the brighter one */
.hero-frame,.hero-frame .pf-corner,.hero-frame .pf-fleur{color:var(--gold);}
.hero-frame{border-color:rgba(212,179,120,.34);}
.hero-frame::after{border-color:var(--gold); opacity:.6;}


/* ---------- THE COVER (cinematic open) ---------- */
.cover{
  position:fixed; inset:0; height:100vh; height:100dvh; z-index:999;
  background:
    radial-gradient(120% 78% at 50% 34%, #5A1734, #340E1F 46%, var(--cover-bg) 100%); cursor:pointer; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform 1.25s cubic-bezier(.76,0,.18,1), opacity .9s ease .35s;
  touch-action:none; overscroll-behavior:none;
}
.cover.open{transform:translateY(-100%); opacity:0; pointer-events:none;}

/* The cover is the velvet itself: a deep plum wine field, the gold filigree
   frame and the initials. The layered photograph was removed at the owner's
   request - it letterboxed into a narrow strip on a wide laptop. */
.cover-mono{
  font-size:clamp(46px,12vw,80px); line-height:1; color:var(--ink);
  letter-spacing:.06em; text-shadow:0 2px 22px rgba(0,0,0,.55);
}
.cover-mono span{color:var(--gold); font-size:.46em; vertical-align:middle; margin:0 .1em;}

/* fine gold dust drifting upward */
.cover-dust{position:absolute; inset:0; pointer-events:none;}
.cover-dust i{
  position:absolute; left:var(--dx); bottom:-6%;
  width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, rgba(198,160,88,.9), rgba(198,160,88,0) 70%);
  animation:coverDust var(--ds,16s) linear var(--dd,0s) infinite;
}
@keyframes coverDust{
  0%{transform:translate(0,0) scale(.6); opacity:0;}
  12%{opacity:.85;}
  70%{opacity:.7;}
  100%{transform:translate(26px,-108vh) scale(1.25); opacity:0;}
}

/* the wreath's ring sits at ~29% of the artwork's height, so the type block
   is anchored - not flex-centred - and the monogram lands inside it */
.cover-inner{position:absolute; z-index:3; top:19%; left:0; right:0; text-align:center; padding:0 26px;}
.cover-mono{
  margin-top:22px; font-size:clamp(44px,11vw,76px); line-height:1; color:var(--wine);
  letter-spacing:.06em;
  text-shadow:0 0 24px #fff, 0 0 10px #fff;
}
.cover-mono span{color:var(--gold-dp); font-size:.5em; vertical-align:middle; margin:0 .12em;}
/* No words: a hairline and a chevron. A guest still knows to act, and
   nothing competes with the couple's names. */
.cover-tap{
  position:absolute; z-index:3; bottom:9%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:0; color:var(--gold);
}
.cover-tap::before{
  content:''; display:block; width:54px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.7;
}
.cover-tap::after{
  content:''; display:block; width:15px; height:15px;
  border-right:1.4px solid var(--gold); border-bottom:1.4px solid var(--gold);
  transform:rotate(45deg);
  animation:tapNudge 2.6s ease-in-out infinite;
}
@keyframes tapNudge{
  0%,100%{opacity:.35; transform:rotate(45deg) translate(0,0);}
  50%    {opacity:1;   transform:rotate(45deg) translate(3px,3px);}
}
@keyframes fadeCycle{0%,100%{opacity:.4;} 50%{opacity:1;}}

/* a very quiet celebration layer - gold leaf, never party confetti */
#confettiCanvas{position:fixed; inset:0; pointer-events:none; z-index:500;}

/* ---------- MASTHEAD ---------- */
/* The wreath does not stop when the cover lifts. The hero holds its own copy
   of the same clip, already playing, dropped right back so it reads as a
   watermark rather than a second video. Nothing pauses, nothing jumps. */
@media (prefers-reduced-motion:reduce){
  .cover-dust i{animation:none;}
}

.masthead{
  position:relative;
  max-width:860px; margin:0 auto; padding:104px 30px 88px; text-align:center;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.mh-rule{width:100%; max-width:640px; height:1px; background:var(--line);}
.mh-kicker{margin:26px 0 18px; font-size:10px; letter-spacing:.46em; text-transform:uppercase; color:var(--stone);}
.mh-names{
  font-size:clamp(40px,8.6vw,80px); line-height:1.12; color:var(--ink); letter-spacing:.045em;
  padding-inline:.3em; overflow:visible;
}
.mh-names em{
  display:block; font-style:normal; color:var(--gold);
  font-size:.32em; margin:14px 0; font-family:'Cinzel',serif; letter-spacing:.3em;
}
.mh-standfirst{margin:20px 0 26px; font-size:15px; letter-spacing:.14em; text-transform:lowercase; color:var(--stone); font-style:italic;}

/* ---------- FOIL SCRATCH ---------- */
.foil-wrap{position:relative; width:320px; max-width:86vw; height:112px; margin:46px auto 0;}
.foil-under{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); border:1px solid var(--line);
}
.foil-under .d{font-size:27px; color:var(--ink); letter-spacing:.14em;}
/* canvas must sit ABOVE the panel or the foil is invisible and unscratchable */
#scratchCanvas{position:relative; z-index:2; display:block; width:100%; height:100%; touch-action:none; cursor:crosshair;}
.foil-hint{margin-top:14px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--stone);}

/* ---------- COUNTDOWN (rules, no boxes) ---------- */
.countdown{display:flex; justify-content:center; align-items:stretch; margin-top:44px;}
.cd-unit{
  padding:0 clamp(12px,3.4vw,30px); display:flex; flex-direction:column; align-items:center;
  border-right:1px solid var(--line);
}
.cd-unit:last-child{border-right:0;}
.cd-num{font-size:clamp(26px,5.6vw,38px); color:var(--ink); line-height:1;}
.cd-label{margin-top:9px; font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone);}

/* ---------- EDITORIAL SPREAD: left rail + body column ---------- */
.spread{
  max-width:920px; margin:0 auto; padding:74px 30px;
  display:grid; grid-template-columns:210px 1fr; gap:44px; align-items:start;
  border-top:1px solid var(--line);
}
.rail{position:sticky; top:44px;}
.folio{
  display:block; font-size:11px; letter-spacing:.3em; color:var(--gold); margin-bottom:12px;
}
.rail h2{font-size:clamp(24px,3.4vw,32px); color:var(--ink); line-height:1.2;}
.rail-rule{
  display:block; width:56px; height:1px; margin-top:18px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform 1s cubic-bezier(.22,1,.36,1) .15s;
}
.reveal.in .rail-rule{transform:scaleX(1);}
.body-col{min-width:0;}
.lead{font-size:17px; line-height:2.05; color:var(--ink-2);}
.dropcap{
  float:left; font-size:56px; line-height:.86; padding:4px 12px 0 0; color:var(--gold);
}

/* ---------- THE TRAVELLING BLOOM ----------
   A rule beside the schedule with a gold flower that slides down it as the
   section passes through the viewport. Decoration only - it sits OUTSIDE
   .schedule, so aira-bind.js cloning the rows never touches it. */
.sch-wrap{position:relative; padding-left:34px;}
.sch-rail{position:absolute; left:0; top:0; bottom:0; width:22px;}
.sr-line{
  position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px;
  background:linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.sr-bloom{
  position:absolute; left:50%; top:0; width:22px; height:22px;
  margin-left:-11px; margin-top:-11px;
  color:var(--gold); will-change:transform;
  filter:drop-shadow(0 0 6px rgba(212,179,120,.45));
}
@media (prefers-reduced-motion:reduce){ .sr-bloom{top:50%;} }

/* ---------- PRINT-STYLE SCHEDULE ---------- */
.schedule{border-top:1px solid var(--line);}
.sch-row{
  display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:baseline;
  padding:17px 2px; border-bottom:1px solid var(--line);
  transition:padding-left .5s ease;
}
.sch-row:hover{padding-left:10px;}
.sch-time{font-size:16px; color:var(--gold); letter-spacing:.06em;}
.sch-event{font-size:16px; color:var(--ink-2); letter-spacing:.02em;}

/* ---------- OPTIONAL SECTIONS ----------
   These eight carry NO folio number. aira-bind.js removes a whole
   <section data-aira-section="..."> when the couple left that detail blank,
   so a numbered sequence would show gaps (01 · 03 · 04 · 07). The original
   five keep 01-05 and can never be removed. */
.spread[data-aira-section] .rail h2{font-size:clamp(21px,3vw,27px);}

.couple-pair{display:grid; grid-template-columns:1fr 1fr; gap:38px;}
.cp-card{border-top:1px solid var(--line); padding-top:20px;}
.cp-role{font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);}
.cp-name{font-family:'Italiana',Georgia,serif; font-weight:400; font-size:clamp(24px,4vw,32px);
         color:var(--ink); margin:10px 0 12px; padding-inline:.2em; overflow:visible;}
.cp-line{font-size:14px; line-height:1.95; color:var(--ink-2);}

.pre-row .sch-time,.pre-row .sch-event{display:flex; flex-direction:column; gap:5px;}
.pre-row em{font-style:normal; font-size:12px; letter-spacing:.14em;
            text-transform:uppercase; color:var(--stone);}

.dc-figure{
  display:block; width:100%; height:auto; margin:0 0 30px;
  border:1px solid var(--line);
  /* the illustration is drawn on cream; multiply drops that ground away so
     it sits on the wine page instead of floating in a pale box */
  mix-blend-mode:multiply; filter:saturate(.92);
}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:38px;}
.dc-role{display:block; font-size:10px; letter-spacing:.34em; text-transform:uppercase;
         color:var(--gold); margin-bottom:10px;}
.closing-line{font-family:'Italiana',Georgia,serif; font-size:clamp(22px,3.6vw,30px);
              line-height:1.6; color:var(--ink); text-align:center;}

/* ---------- PLATES — slideshow ----------
   Only the LAYOUT changed: #galleryGrid is still the element aira-bind.js
   fills, it is simply a flex track moved by transform instead of a grid. */
.plates-stage{position:relative; overflow:hidden; border:1px solid var(--line);}
.pl-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  background:rgba(36,9,21,.62); color:var(--ink); font-size:19px; line-height:1;
  cursor:pointer; opacity:.55; transition:opacity .3s ease;
}
.pl-arrow:hover{opacity:1;}
.pl-prev{left:12px;} .pl-next{right:12px;}
.pl-dots{display:flex; justify-content:center; gap:8px; margin-top:16px;}
.pl-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--line);
  cursor:pointer; transition:background .3s ease, transform .3s ease;
}
.pl-dots i.on{background:var(--gold); transform:scale(1.35);}

/* ---------- PLATES (strict grid, B&W to colour) ---------- */
.plates{display:flex; background:var(--paper-2); transition:transform .75s cubic-bezier(.22,1,.36,1);}
.plates > div{
  position:relative; flex:0 0 100%; aspect-ratio:4/3; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone);
  overflow:hidden;
}
.plates img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.72) contrast(1.03) brightness(.94);
  transition:filter .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.plates > div:hover img{filter:saturate(1) contrast(1.02) brightness(1); transform:scale(1.04);}
.photo-remove{
  position:absolute; top:6px; right:6px; width:22px; height:22px;
  background:var(--paper); color:var(--ink); border:1px solid var(--line);
  font-size:12px; line-height:1; cursor:pointer;
}

/* ---------- MAP ---------- */
.map-frame{width:100%; height:300px; margin-top:24px; border:1px solid var(--line); overflow:hidden;}
.map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.45) contrast(1.02) brightness(.82);}

/* ---------- EDITORS (underline fields, square button) ---------- */
.editor{margin-top:28px; border-top:1px solid var(--line); padding-top:20px;}
.ed-label{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone); margin-bottom:14px;}
.ed-row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;}
.editor input{
  flex:1; min-width:180px; padding:10px 2px; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink); font-family:'Tenor Sans',sans-serif; font-size:15px;
  transition:border-color .4s ease;
}
.editor input:focus{outline:none; border-bottom-color:var(--gold);}
.editor button{
  padding:12px 26px; border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-family:'Tenor Sans',sans-serif; font-weight:600; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; cursor:pointer; border-radius:0;
  transition:background .45s ease, color .45s ease;
}
.editor button:hover{background:var(--ink); color:var(--paper);}
.ed-hint{font-size:13px; color:var(--stone); margin-top:12px;}
.ed-error{font-size:13px; color:#F0928A; margin-top:8px; display:none;}
.ed-success{font-size:13px; color:var(--gold); margin-top:8px; display:none;}

/* ---------- RSVP (underline-only form) ---------- */
.rsvp{border-top:1px solid var(--ink); padding-top:30px;}
.rsvp label{display:block; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone); margin-top:26px;}
.rsvp label:first-child{margin-top:0;}
.rsvp input,.rsvp select,.rsvp textarea{
  width:100%; padding:11px 2px; margin-top:6px; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink); font-family:'Tenor Sans',sans-serif; font-size:16px;
  border-radius:0;
}
.rsvp textarea{border:1px solid var(--line); padding:12px; margin-top:10px;}
.rsvp input:focus,.rsvp select:focus,.rsvp textarea:focus{outline:none; border-color:var(--gold);}
.rsvp button{
  width:100%; margin-top:34px; padding:17px; border:1px solid var(--ink); border-radius:0;
  background:transparent; color:var(--ink); font-family:'Tenor Sans',sans-serif; font-weight:600;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase; cursor:pointer;
  transition:background .5s ease, color .5s ease, letter-spacing .5s ease;
}
.rsvp button:hover{background:var(--ink); color:var(--paper); letter-spacing:.42em;}
.rsvp-success{display:none; margin-top:18px; font-size:15px; color:var(--gold); font-style:italic;}

/* ---------- MUSIC BUTTON ---------- */
.music-toggle{
  position:fixed; bottom:26px; right:26px; width:46px; height:46px; z-index:60;
  border:1px solid var(--ink); border-radius:0; background:var(--paper); color:var(--ink);
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .45s ease, color .45s ease;
}
.music-toggle:hover,.music-toggle.playing{background:var(--ink); color:var(--paper);}

footer{
  padding:56px 30px; text-align:center; font-size:10px; letter-spacing:.4em;
  text-transform:uppercase; color:var(--stone); border-top:1px solid var(--line);
}

/* ---------- SCROLL REVEAL (restrained) ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1; transform:none;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:780px){
  .sch-wrap{padding-left:26px;}
  .couple-pair,.two-col{grid-template-columns:1fr; gap:26px;}
  .pl-arrow{width:32px; height:32px; font-size:16px;}
  .spread{grid-template-columns:1fr; gap:22px; padding:56px 22px;}
  .rail{position:static;}
  .rail-rule{margin-top:14px;}
}
@media (max-width:640px){
  .masthead{padding:80px 20px 64px;}
  .sch-row{grid-template-columns:96px 1fr; gap:12px;}
  .cd-unit{padding:0 11px;}
  .dropcap{font-size:46px;}
  .cover-mono{margin-top:18px;}
  .cover-frame{inset:8px;}
  .page-frame{inset:8px;}
  .pf-corner{width:58px; height:58px;}
  .pf-fleur{width:50px; height:20px;}
  .pf-corner{width:48px; height:48px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important;}
}

/* ==========================================================
   SCRATCH-TO-REVEAL  (this block only - nothing above changed)
   ========================================================== */
/* ---------- antique painted card ---------- */
#scratchCanvas{box-shadow:inset 0 0 0 1px rgba(212,179,120,.30);}

/* ---------- scratch material flecks (shared, body-level) ---------- */
.aira-fleck{
  position:fixed; z-index:1200; pointer-events:none; opacity:1;
  animation:airaFleck .95s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes airaFleck{
  0%{opacity:.95; transform:translate(0,0) rotate(0deg) scale(1);}
  100%{opacity:0; transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.5);}
}
@media (prefers-reduced-motion:reduce){ .aira-fleck{display:none;} }

/* ---------- staged date reveal: day, month, year, label, glow, continue ---------- */
/* the reveal panel stacks: date line, then the label, then Continue */
.foil-under{flex-direction:column;}
.foil-under .dr-day,.foil-under .dr-month,.foil-under .dr-year{
  display:inline-block; opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .62s ease, transform .62s cubic-bezier(.22,1,.36,1);
}
.foil-under .dr-month{margin:0 .34em;}
.foil-under.s1 .dr-day{opacity:1; transform:none;}
.foil-under.s2 .dr-month{opacity:1; transform:none;}
.foil-under.s3 .dr-year{opacity:1; transform:none;}
.foil-under .dr-full{margin-top:6px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone);}
.dr-label{
  display:block; margin-top:7px; font-size:8px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--stone);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.foil-under.s4 .dr-full{margin-top:6px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone);}
.dr-label{opacity:1; transform:none;}
.foil-under .dr-cta{
  margin-top:9px; padding:6px 14px; font:inherit; font-size:9px; line-height:1;
  letter-spacing:.22em; text-transform:uppercase; cursor:pointer; border-radius:0;
  color:var(--ink); background:transparent; border:1px solid var(--ink);
  opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1),
             background .35s ease, color .35s ease;
}
.foil-under.s5 .dr-cta{opacity:1; transform:none;}
.foil-under .dr-cta:hover{background:var(--ink); color:var(--paper);}
.foil-under.s5{animation:drGlow4660 1.6s ease-out;}
@keyframes drGlow4660{
  0%{box-shadow:0 0 0 0 rgba(212,179,120,.45);}
  40%{box-shadow:0 0 34px 6px rgba(212,179,120,.45);}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}

/* the prompt steps back once the guest starts working the surface */
.is-scratching + .scratch-hint,.is-scratching ~ .scratch-hint{opacity:.35;}

/* ==========================================================================
   AIRA MOTION SYSTEM
   Appended block. Changes how things move, never what the template looks
   like - no colour, font family, layout or decoration is altered here.
   ========================================================================== */

:root{
  /* Authored easing. The default `ease` is symmetrical, which is why stock
     web motion reads as cheap: real objects accelerate hard and land soft. */
  --e-drape :cubic-bezier(.62,.02,.14,1);   /* heavy physical panels        */
  --e-silk  :cubic-bezier(.16,.86,.22,1);   /* long decelerate, big surfaces */
  --e-lift  :cubic-bezier(.19,1,.22,1);     /* type and cards arriving       */
  --e-settle:cubic-bezier(.40,.90,.30,1);   /* micro corrections             */
  /* Duration scale tied to how far a thing travels. */
  --t-1:260ms; --t-2:520ms; --t-3:820ms; --t-4:1250ms; --t-5:1900ms;
}

/* ---------- typographic rendering (quality only, no faces changed) ---------- */
html{-webkit-text-size-adjust:100%;}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  font-synthesis-weight:none;
}
h1,h2,h3{text-wrap:balance;}
p,.lead{text-wrap:pretty;}

/* ---------- masked word reveal for display type ---------- */
.aira-w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.18em; margin-bottom:-.18em;   /* room for descenders */
}
.aira-w.aira-w-block{display:block;}
.aira-w > i{
  display:inline-block; font-style:inherit; color:inherit;
  transform:translate3d(0,112%,0) rotate(1.6deg); opacity:0; filter:blur(9px);
  transition:transform var(--t-4) var(--e-lift),
             opacity 900ms var(--e-lift),
             filter 900ms var(--e-lift);
  transition-delay:calc(var(--wi,0) * 105ms + 170ms);
}
.aira-w > i.aira-w-block{display:block;}
.aira-w.on > i{transform:none; opacity:1; filter:blur(0);}

/* ---------- hero beats ---------- */
.aira-beat{
  opacity:0; transform:translate3d(0,var(--beat-rise,22px),0);
  filter:blur(var(--beat-blur,5px));
  transition:opacity var(--t-3) var(--e-lift),
             transform var(--t-3) var(--e-lift),
             filter var(--t-3) var(--e-lift);
  transition-delay:calc(var(--bi,0) * 135ms);
}
.aira-beat.aira-on{opacity:1; transform:none; filter:blur(0);}

/* ---------- scroll storytelling ---------- */
.aira-rise{
  opacity:0; transform:translate3d(0,34px,0);
  transition:opacity var(--t-3) var(--e-lift), transform var(--t-3) var(--e-lift);
}
.aira-rise.aira-in{opacity:1; transform:none;}
.aira-stagger{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity var(--t-3) var(--e-lift), transform var(--t-3) var(--e-lift);
  transition-delay:calc(var(--i,0) * 85ms + 110ms);
}
.aira-in > .aira-stagger,
.in > .aira-stagger,
.visible > .aira-stagger{opacity:1; transform:none;}

/* ---------- the opening: weight, then release ---------- */
.aira-gate.aira-press{transform:scale(.9955); transition:transform 200ms var(--e-settle);}
.aira-seam{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
  z-index:6; pointer-events:none; opacity:0; filter:blur(1px);
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.92),transparent);
}
.aira-seam.aira-seam-h{
  top:50%; bottom:auto; left:0; right:0; width:auto; height:2px; margin:-1px 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
}
.aira-gate.aira-opening .aira-seam{animation:airaSeamV 950ms var(--e-silk) forwards;}
.aira-gate.aira-opening .aira-seam.aira-seam-h{animation:airaSeamH 950ms var(--e-silk) forwards;}
@keyframes airaSeamV{0%{opacity:0;transform:scaleY(.15);}20%{opacity:1;}100%{opacity:0;transform:scaleY(1.2);}}
@keyframes airaSeamH{0%{opacity:0;transform:scaleX(.15);}20%{opacity:1;}100%{opacity:0;transform:scaleX(1.2);}}

@media (prefers-reduced-motion:reduce){
  .aira-w > i,.aira-beat,.aira-rise,.aira-stagger{
    transition:none !important; transform:none !important;
    opacity:1 !important; filter:none !important;
  }
  .aira-seam{display:none;}
}

/* ---------- Royal Elegance: the cover lifts like a turned page ---------- */
/* The cover is the one cinematic moment; everything after it is restraint,
   so the page gets no parallax and no seam light - only better weight on
   the single movement it has. */
.cover{transition:transform 1.5s var(--e-drape), opacity 1s var(--e-silk) .35s !important;}
.cover-inner{transition:opacity 620ms var(--e-settle), transform 900ms var(--e-lift);}
.cover.open .cover-inner{opacity:0; transform:translateY(-18px);}

/* Italiana is a wide, airy face - it must NOT be tracked in like a text serif */
.mh-kicker,.cd-label,.folio,.ed-label{font-feature-settings:"case" 1;}

/* the still artwork and the gold dust are decoration: never let a later
   `.cover > *` style promote them into the flex flow (the emerald-noir bug) */
.cover-dust{position:absolute;}

@media (prefers-reduced-motion:reduce){
  .cover-sheen,.cover-dust{display:none;}
}