/* ==========================================================================
   Finish · CELEBRATION (Fizz and Glass, both heightened)
   For clients booking celebrations and major life events: the page is a glass
   of champagne under pendant light. It is the house finish's rules turned up
   from 3/10 to 5/10, with nothing loud added:

   · Fizz, everywhere. A fine bead rises behind the whole page, not only the
     opening: one fixed canvas under the content (celebration.js), sparse,
     silver to pale champagne, at three depths, with a few faint streams from
     nucleation points. It starts after the opening rests (hy:done), fades up
     over 2s, dims to a glimmer behind every line of text, never shows behind
     the logo, and sleeps in hidden tabs and under the assessment.
   · Glass, deeper. Plates are framed prints under glass: a moulding with a
     chrome bead, a recessed bevelled window, a richer diagonal reflection,
     chrome-and-emerald photo corners, and a long soft cast shadow. Sections
     are lit ledges: a neutral pendant pool (a breath of champagne) at each
     rail's bright point, a soft shadow cast back onto the section above,
     and a gentle vignette at the edges of the room.
   · Light, more often. The logo's four-point star catches the light down the
     whole page (plates, rails, section numbers, 9 and 70+, place cards, "Say
     when.", the footer's glass), one at a time, a few seconds apart, and
     never before the opening rests. (celebration.js)
   · Trims. Every rail is a double rule, polished silver over a glossy emerald
     inlay; the section numbers' ticks are the same double rule in small; the
     The Moment's quote marks take the logo's bevelled emerald; the masthead's rule is a silver hairline on emerald.
   · Kept from house: "Art" in chrome at rest (no sweep), the chrome-edged
     emerald Reserve buttons, metal numerals, the chrome emblem with the
     logo's still star, and no light on the opening (the logo brings its own).

   Rules: additive only (no sizes, margins or line breaks change; text fills
   that overhang are padded and paid back). Body text untouched. Silver is the
   logo's neutral chrome. Rooms and Reserve-button rules use :where() so the
   celebrate/ layers (rooms.css, confetti.css, loaded later) win any tie.
   ========================================================================== */

:root[data-finish="celebration"] {
  /* The chrome scale, dark to bright (the logo's glass). */
  --c-chrome-700: #505050;
  --c-chrome-400: #9c9c9c;   /* the darkest stop under small text: 7.3:1 on the page */
  --c-chrome-200: #d0d0d0;
  --c-chrome-50:  #f0f0f0;

  --c-lit: 240, 240, 240;       /* neutral light, as an rgb triplet */
  --c-champ: 248, 241, 226;     /* a breath of champagne in the pools: clean, never brown */
  --c-shade: 0, 0, 0;
  --c-em: 26, 163, 92;          /* the emerald inlay (emerald-bright) */
  --c-em-deep: 15, 122, 69;

  --c-sheen-small: linear-gradient(180deg, #f0f0f0 10%, #d0d0d0 50%, #9c9c9c 92%);
  --c-sheen-chrome: linear-gradient(180deg, #f6f6f6 8%, #e4e4e4 30%, #a0a0a0 58%, #bcbcbc 76%, #e8e8e8 94%);
  --c-sheen-art: linear-gradient(180deg, #fffdf8 16%, #eeeeec 36%, #ababab 58%, #d6d6d6 71%, #f7f7f5 87%);
  --c-sheen-close: linear-gradient(176deg, #f8f6f1 0%, #f2f1ed 40%, #cfd1cf 62%, #ecedeb 82%, #f8f6f1 100%);
  /* The logo's bevelled emerald lettering. The darkest stop (#14915a) is 5.1:1 on the page. */
  --c-bevel-emerald: linear-gradient(180deg, #4fd393 0%, #22b46a 38%, #14915a 62%, #27a967 100%);

  /* Rules inside a column: brightest where the column starts, nearest the light. */
  --c-edge: linear-gradient(90deg, rgba(var(--c-lit), 0.44), rgba(var(--c-lit), 0.17) 34%, rgba(var(--c-lit), 0.07) 100%);
  --c-edge-soft: linear-gradient(90deg, rgba(var(--c-lit), 0.26), rgba(var(--c-lit), 0.09) 34%, rgba(var(--c-lit), 0.04) 100%);

  --c-mat: 12px;             /* the plate's mat inset (styles.css) */
  --c-x: 50%;                /* each rail's bright point, set per section below */
}

/* The page's black is the root's own; body lets the bead show through from beneath the content
   (the canvas sits at z-index -2, under every section's background). */
:root[data-finish="celebration"] body { background: transparent; }

/* The hidden sprite celebration.js adds for the emblem's chrome. */
.cel-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 1 · The fizz: the bead behind the page -------------------------
   One fixed canvas under every section (the masthead, plates, cards and buttons stand in
   front of it). Nothing draws or shows until the opening rests; then it fades up. */

:root[data-finish="celebration"] .cel-fizz {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100vh;
  height: 100lvh;            /* a phone's toolbar coming and going never resizes the glass */
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-finish="celebration"] .cel-fizz.is-on { opacity: 1; }

/* Reduced motion: a still glass instead. The bead, held where it was, in the margins of the
   page (never behind text), scrolling with it; drawn once (celebration.js). */
:root[data-finish="celebration"] .cel-still {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

/* The room's vignette: the edges of the screen fall gently into shade, as a lit room does
   away from its pendants. Fixed, under the masthead (50) and the grain (150); clear over the
   middle, at most 11% in the farthest corners: muted text stays above 6:1 wherever it sits. The
   Reserve buttons stand above it (section 7), so it never dims their labels.
   It lies over the logo too, evenly, so it never outlines the logo's canvas. */
:root[data-finish="celebration"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(farthest-corner at 50% 46%,
    rgba(var(--c-shade), 0) 52%,
    rgba(var(--c-shade), 0.055) 78%,
    rgba(var(--c-shade), 0.11) 100%);
}

/* ---------- 2 · Rails: double rules, polished silver over a glossy emerald inlay ----------
   Each section's top rule is a polished rail with one bright point (--c-x), set somewhere
   different in each section so the light travels down the page. 3px under it runs a 1px
   emerald inlay, brightest under the same point. border-image keeps the rail exactly 1px;
   the inlay is a background layer; nothing moves. */

:root[data-finish="celebration"] :is(.masthead, .section, .moment, .footer) {
  border-image: linear-gradient(90deg,
      rgba(var(--c-lit), 0.05) 0%,
      rgba(var(--c-lit), 0.15) calc(var(--c-x) - 28%),
      rgba(var(--c-lit), 0.56) var(--c-x),
      rgba(var(--c-lit), 0.15) calc(var(--c-x) + 28%),
      rgba(var(--c-lit), 0.05) 100%) 1;
}
:root[data-finish="celebration"] .masthead { --c-x: 30%; }
:root[data-finish="celebration"] .moment   { --c-x: 26%; }
:root[data-finish="celebration"] #aaron    { --c-x: 62%; }
:root[data-finish="celebration"] #bars     { --c-x: 34%; }
:root[data-finish="celebration"] #night    { --c-x: 70%; }
:root[data-finish="celebration"] #rooms    { --c-x: 40%; }
:root[data-finish="celebration"] #words    { --c-x: 60%; }
:root[data-finish="celebration"] #gallery  { --c-x: 30%; }
:root[data-finish="celebration"] #reserve  { --c-x: 48%; }
:root[data-finish="celebration"] .footer   { --c-x: 52%; }

/* The emerald inlay under a rail, as one background layer (2px under the 1px rail), and a
   pendant's pool where the rail is brightest: a small core with a breath of champagne and a
   wider neutral falloff, sized in px capped by vw so a pool stays a pool on a phone. Declared
   on each element that sets --c-x, since a custom property resolves where it is declared. */
:root[data-finish="celebration"] :is(.masthead, .section, .moment, .footer) {
  --c-inlay: linear-gradient(90deg,
      rgba(var(--c-em), 0.08) 0%,
      rgba(var(--c-em), 0.24) calc(var(--c-x) - 30%),
      rgba(var(--c-em), 0.82) var(--c-x),
      rgba(var(--c-em), 0.24) calc(var(--c-x) + 30%),
      rgba(var(--c-em), 0.08) 100%) 0 2px / 100% 1px no-repeat;
  --c-pool:
    radial-gradient(min(560px, 82vw) min(300px, 64vw) at var(--c-x) 0,
      rgba(var(--c-champ), 0.06) 0%, rgba(var(--c-champ), 0.022) 46%, rgba(var(--c-champ), 0) 100%) no-repeat,
    radial-gradient(min(1100px, 150vw) min(560px, 120vw) at var(--c-x) 0,
      rgba(var(--c-lit), 0.026) 0%, rgba(var(--c-lit), 0) 100%) no-repeat;
}

/* Rules within the content: lit where the column starts. */
:root[data-finish="celebration"] :is(.index, .index__item, .figure-item, .testimonial, .asks) {
  border-image: var(--c-edge) 1;
}
:root[data-finish="celebration"] :is(.sequence li, .gallery__fine) {
  border-image: var(--c-edge-soft) 1;
}
/* The Rooms are celebrate/rooms.css's to dress: these yield to it. */
:where(:root[data-finish="celebration"]) :is(.room, .dryhire) {
  border-image: var(--c-edge) 1;
}

/* The masthead: a silver hairline that catches the light (its rule, above), laid on a
   hairline of emerald, and floating a little over the page it scrolls across. (During the
   pour, opening-motion.css takes its shadow off; it returns as the house lights come up.) */
:root[data-finish="celebration"] .masthead {
  box-shadow:
    0 2px 0 -1px rgba(var(--c-em-deep), 0.55),
    0 16px 30px -18px rgba(var(--c-shade), 0.95);
}

/* ---------- 3 · Light: lit ledges, two recessed bands, a lamp over Reserve ----------
   Every section is a ledge: lit at its rail's bright point, casting a soft shadow back onto
   the section above it. (position: relative only orders the painting; nothing moves.)
   The opening gets no light: the logo is opaque on the page colour and brings its own
   (opening-motion.css takes any finish's light off it). */

:root[data-finish="celebration"] :is(.section, .moment, .footer) {
  position: relative;
  box-shadow: 0 -22px 42px -26px rgba(var(--c-shade), 0.9);
}

/* Page-black sections: the inlay and the pool. Zero specificity beyond the class, so a
   section's own dressing (celebrate/rooms.css on The Rooms) wins. */
:where(:root[data-finish="celebration"]) .section {
  background: var(--c-inlay), var(--c-pool);
}
:where(:root[data-finish="celebration"]) .footer {
  background: var(--c-inlay), var(--c-pool);
}

/* The last section: a soft lamp over the button that matters, answering the logo's own light
   at the top of the page. */
:root[data-finish="celebration"] .section.reserve {
  background:
    var(--c-inlay),
    var(--c-pool),
    radial-gradient(44% 64% at 66% 58%, rgba(var(--c-champ), 0.05), rgba(var(--c-champ), 0) 72%) no-repeat;
}

/* The two bands (The Moment, Kind Words) sit a step down: lit from above at the rail's bright
   point, shaded along both edges. Their ink is laid as a veil (#0b0f0d over the page's black,
   exactly), so the bead still rises through them. (Any photo behind The Moment lies over it.) */
:root[data-finish="celebration"] .band {
  background:
    var(--c-inlay),
    radial-gradient(80% 70% at var(--c-x) 0%, rgba(var(--c-champ), 0.055), rgba(var(--c-champ), 0) 70%) no-repeat,
    linear-gradient(rgba(176, 236, 206, 0.035), rgba(176, 236, 206, 0.035));
  box-shadow:
    0 -22px 42px -26px rgba(var(--c-shade), 0.9),
    inset 0 34px 44px -36px rgba(var(--c-shade), 0.95),
    inset 0 -34px 44px -36px rgba(var(--c-shade), 0.95);
}

/* ---------- 4 · Metal type: numerals are silver, words stay emerald ---------- */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* Small numerals: "No. 01" and the run of show 1-9. */
  :root[data-finish="celebration"] :is(.label__no, .sequence__no) {
    background-image: var(--c-sheen-small);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  :root[data-finish="celebration"] .sequence__no { background-image: var(--c-sheen-chrome); }
  /* Italic "No.": a little room on the left so the N's foot keeps its fill. */
  :root[data-finish="celebration"] .label__no { padding-left: 0.1em; margin-left: -0.1em; }

  /* The two figures, 9 and 70+: chrome. */
  :root[data-finish="celebration"] .figure-item__num {
    padding: 0.08em 0.06em;
    margin: -0.08em -0.06em;
    background-image: var(--c-sheen-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* The story's initial: one silver sort. */
  :root[data-finish="celebration"] .dropcap::first-letter {
    background-image: var(--c-sheen-chrome);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* "Art" rests in polished chrome (no sweep: the logo's star is the opening's sparkle).
     The padding makes room for the italic overhang and is paid back. */
  :root[data-finish="celebration"] .opening__title em {
    padding: 0 0.14em 0 0.1em;
    margin: 0 -0.14em 0 -0.1em;
    background-image: var(--c-sheen-art);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* "Say when." closes the page in the same metal, more gently: cream turning to silver.
     Padded down (and paid back) so the y's tail keeps its fill. */
  :root[data-finish="celebration"] .reserve__title {
    padding-bottom: 0.3em;
    margin-bottom: -0.3em;
    background-image: var(--c-sheen-close);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Glossy emerald, like the logo's lettering: The Moment's quote marks. (The Eight Bars'
     01-08 stay flat emerald: at 1.1rem a bevel only dulls them.) */
  :root[data-finish="celebration"] .moment__quote p::before,
  :root[data-finish="celebration"] .moment__quote p::after {
    background-image: var(--c-bevel-emerald);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* An empty plate's numeral, engraved: faint silver fading toward its foot. */
  :root[data-finish="celebration"] .plate:not(.plate--reserved) .plate__frame:not(:has(img))::after {
    background: linear-gradient(180deg, rgba(var(--c-lit), 0.24) 18%, rgba(var(--c-lit), 0.06) 82%) center / 100% 1em no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Selected text stays readable. */
  :root[data-finish="celebration"] :is(.label__no, .sequence__no, .figure-item__num, .opening__title em, .reserve__title)::selection {
    -webkit-text-fill-color: var(--cream);
  }
}

/* The tick after "No. 01" is a double rule in small: a silver hairline (bright at the
   numeral) over an emerald one, 2px apart. Same 2.25rem, centred where the old 1px tick was. */
:root[data-finish="celebration"] .label__no::after {
  height: 4px;
  background:
    linear-gradient(90deg, rgba(var(--c-lit), 0.78), rgba(var(--c-lit), 0.3) 55%, rgba(var(--c-lit), 0.08)) 0 0 / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(var(--c-em), 0.95), rgba(var(--c-em), 0.7) 60%, rgba(var(--c-em), 0.35)) 0 3px / 100% 1px no-repeat;
}

/* ---------- 5 · Plates: framed prints under glass, heightened --------------------
   Frame · a moulding: lit lip, a dark body, a chrome bead, then the mat; a crisp contact
           edge and a long, soft cast shadow.
   Mat   · (empty plates) a recessed, bevelled window: shade under its top edge, light
           along its foot and right side.
   Glass · celebration.js lays .cel-glass over everything in the frame (numeral or photo):
           a richer diagonal reflection, a glaze at the top, weight at the foot, chrome-and-
           emerald photo corners, and the star the plate may catch. */

:root[data-finish="celebration"] .plate__frame {
  isolation: isolate;   /* mat < photo < numeral < glass, however the photo arrives */
  border-color:
    rgba(var(--c-lit), 0.42)
    rgba(var(--c-lit), 0.14)
    rgba(var(--c-lit), 0.08)
    rgba(var(--c-lit), 0.26);
  background-color: #0e1311;
  background-image: linear-gradient(160deg, rgba(var(--c-lit), 0.05), rgba(var(--c-lit), 0) 55%);
  box-shadow:
    inset 1px 1px 0 rgba(var(--c-lit), 0.12),        /* the moulding's lit lip */
    inset 0 0 0 4px #080b0a,                          /* its body */
    inset 0 0 0 5px rgba(var(--c-lit), 0.14),         /* the chrome bead */
    0 0 0 1px rgba(var(--c-shade), 0.6),
    0 4px 8px rgba(var(--c-shade), 0.5),
    0 30px 56px -22px rgba(var(--c-shade), 0.95),
    0 64px 110px -50px rgba(var(--c-shade), 0.72);
}
/* The frame's shadow falls toward its caption, so the caption paints above it. */
:root[data-finish="celebration"] .plate__caption { position: relative; }

:root[data-finish="celebration"] .plate__frame::before {
  border-color:
    rgba(var(--c-shade), 0.6)
    rgba(var(--c-lit), 0.2)
    rgba(var(--c-lit), 0.3)
    rgba(var(--c-shade), 0.45);
  background: #060908;
  box-shadow:
    0 -1px 0 rgba(var(--c-lit), 0.05),
    inset 0 14px 24px -12px rgba(var(--c-shade), 0.92),
    inset 12px 0 20px -14px rgba(var(--c-shade), 0.75),
    inset -1px -1px 0 rgba(var(--c-lit), 0.06);
}

/* The glass. A broad pale plane with a crisp diagonal edge (as on the logo's bowl), a thin
   second streak and a fine bright hairline after it; a glaze along the top; weight at the foot. */
:root[data-finish="celebration"] .cel-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(var(--c-lit), 0.06) 0%,
      rgba(var(--c-lit), 0) 16%,
      rgba(var(--c-shade), 0) 70%,
      rgba(var(--c-shade), 0.2) 100%),
    linear-gradient(118deg,
      rgba(236, 240, 244, 0.085) 0%,
      rgba(236, 240, 244, 0.05) 28%,
      rgba(236, 240, 244, 0.03) 41.6%,
      rgba(236, 240, 244, 0) 42%,
      rgba(236, 240, 244, 0) 56%,
      rgba(236, 240, 244, 0.034) 56.6%,
      rgba(236, 240, 244, 0.014) 61%,
      rgba(236, 240, 244, 0) 62%,
      rgba(236, 240, 244, 0) 64.2%,
      rgba(236, 240, 244, 0.06) 64.5%,
      rgba(236, 240, 244, 0) 64.9%);
}

/* Photo corners: a chrome L at each corner of the moulding with an emerald one inside it,
   lit brighter on the corner nearest the light (top left). Over a photo they read as the
   corners that hold a print. */
:root[data-finish="celebration"] .cel-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  --a: 18px;     /* arm */
  --o: 5px;      /* from the frame's edge */
  --i: 7px;      /* the emerald L, inside */
  --ai: 11px;
  background:
    /* top left (lit) */
    linear-gradient(rgba(var(--c-lit), 0.62), rgba(var(--c-lit), 0.62)) var(--o) var(--o) / var(--a) 1px,
    linear-gradient(rgba(var(--c-lit), 0.62), rgba(var(--c-lit), 0.62)) var(--o) var(--o) / 1px var(--a),
    linear-gradient(rgba(var(--c-em), 0.8), rgba(var(--c-em), 0.8)) var(--i) var(--i) / var(--ai) 1px,
    linear-gradient(rgba(var(--c-em), 0.8), rgba(var(--c-em), 0.8)) var(--i) var(--i) / 1px var(--ai),
    /* top right */
    linear-gradient(rgba(var(--c-lit), 0.42), rgba(var(--c-lit), 0.42)) right var(--o) top var(--o) / var(--a) 1px,
    linear-gradient(rgba(var(--c-lit), 0.42), rgba(var(--c-lit), 0.42)) right var(--o) top var(--o) / 1px var(--a),
    linear-gradient(rgba(var(--c-em), 0.66), rgba(var(--c-em), 0.66)) right var(--i) top var(--i) / var(--ai) 1px,
    linear-gradient(rgba(var(--c-em), 0.66), rgba(var(--c-em), 0.66)) right var(--i) top var(--i) / 1px var(--ai),
    /* bottom left */
    linear-gradient(rgba(var(--c-lit), 0.34), rgba(var(--c-lit), 0.34)) left var(--o) bottom var(--o) / var(--a) 1px,
    linear-gradient(rgba(var(--c-lit), 0.34), rgba(var(--c-lit), 0.34)) left var(--o) bottom var(--o) / 1px var(--a),
    linear-gradient(rgba(var(--c-em), 0.6), rgba(var(--c-em), 0.6)) left var(--i) bottom var(--i) / var(--ai) 1px,
    linear-gradient(rgba(var(--c-em), 0.6), rgba(var(--c-em), 0.6)) left var(--i) bottom var(--i) / 1px var(--ai),
    /* bottom right (in shade) */
    linear-gradient(rgba(var(--c-lit), 0.24), rgba(var(--c-lit), 0.24)) right var(--o) bottom var(--o) / var(--a) 1px,
    linear-gradient(rgba(var(--c-lit), 0.24), rgba(var(--c-lit), 0.24)) right var(--o) bottom var(--o) / 1px var(--a),
    linear-gradient(rgba(var(--c-em), 0.5), rgba(var(--c-em), 0.5)) right var(--i) bottom var(--i) / var(--ai) 1px,
    linear-gradient(rgba(var(--c-em), 0.5), rgba(var(--c-em), 0.5)) right var(--i) bottom var(--i) / 1px var(--ai);
  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  :root[data-finish="celebration"] .cel-glass::before { --a: 14px; --ai: 8px; }
}

/* With a photo: the mat lifts away (styles.css) and the print sits right under the glass.
   The reflection pulls back to the lit corner, so it never veils a face; the frame's lip
   throws a thin shadow onto the print's top edge. */
:root[data-finish="celebration"] .plate__frame:has(img) .cel-glass {
  background:
    linear-gradient(180deg,
      rgba(var(--c-shade), 0) 70%,
      rgba(var(--c-shade), 0.22) 100%),
    linear-gradient(126deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.03) 22%,
      rgba(255, 255, 255, 0) 36%);
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lit), 0.26),
    inset 0 0 0 1px rgba(var(--c-lit), 0.06),
    inset 0 10px 16px -12px rgba(var(--c-shade), 0.55);
}

/* The gallery's place cards stand in front of the glass, proud of their frames, with an
   engraved inner rule like a printed place card. */
:root[data-finish="celebration"] .placecard {
  position: relative;
  border-color:
    rgba(var(--c-lit), 0.36)
    rgba(var(--c-lit), 0.15)
    rgba(var(--c-lit), 0.09)
    rgba(var(--c-lit), 0.2);
  background: linear-gradient(180deg, #0c0f0d, var(--page) 60%);
  box-shadow:
    inset 0 1px 0 rgba(var(--c-lit), 0.08),
    0 2px 4px rgba(var(--c-shade), 0.6),
    0 20px 34px -14px rgba(var(--c-shade), 0.95);
  outline: 1px solid rgba(var(--c-lit), 0.08);   /* the engraved inner rule, 4px inside the edge */
  outline-offset: -5px;
}

/* ---------- 6 · The star: resting, and catching the light -------------------------
   The logo's four-point star (long horizontal rays, a soft halo). One element, moved by
   celebration.js to whichever place catches the light next; at rest it is not there. */

:root[data-finish="celebration"] .cel-anchor { position: relative; }

:root[data-finish="celebration"] .cel-glint {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  --g: 34px;
}
:root[data-finish="celebration"] .cel-glint > svg {
  position: absolute;
  display: block;
  overflow: visible;
  opacity: 0;
}
:root[data-finish="celebration"] .cel-glint__main {
  left: calc(var(--g) / -2);
  top: calc(var(--g) * -0.2717);   /* the star's 92 x 50 box, centred */
  width: var(--g);
  height: calc(var(--g) * 0.5435);
  transform: scale(0.2);
}
:root[data-finish="celebration"] .cel-glint__sat {
  width: calc(var(--g) * 0.34);
  height: calc(var(--g) * 0.34);
  margin: calc(var(--g) * -0.17) 0 0 calc(var(--g) * -0.17);
  transform: scale(0.2);
}
:root[data-finish="celebration"] .cel-glint__sat--a { left: calc(var(--g) * 0.62); top: calc(var(--g) * -0.34); }
:root[data-finish="celebration"] .cel-glint__sat--b { left: calc(var(--g) * -0.5); top: calc(var(--g) * 0.3); }
:root[data-finish="celebration"] .cel-glint--low .cel-glint__sat--a { top: calc(var(--g) * 0.4); }

/* A still star resting on each plate's mat, shown only when motion is off (below). */
:root[data-finish="celebration"] .cel-rest {
  position: absolute;
  top: var(--c-mat);
  width: 26px;
  height: 14px;
  margin: -7px 0 0 -13px;
  display: none;
  overflow: visible;
  opacity: 0.6;
}

/* ---------- 7 · Reserve: bevelled emerald with a chrome top edge -------------
   The strongest object on the page. Behind the label the face is plain #0f7a45 (cream at
   4.8:1, higher on hover): light on top, shade at the foot, a 1px chrome edge along the top,
   a dark contact shadow and a soft emerald light beneath. Size unchanged; hover changes
   colour only. :where() so celebrate/confetti.css wins any tie. */

:where(:root[data-finish="celebration"]) .btn,
:where(:root[data-finish="celebration"]) .btn:hover {
  border-color: transparent;
  background-color: var(--emerald);
  background-image:
    linear-gradient(90deg,
      rgba(var(--c-lit), 0.2) 0%,
      rgba(var(--c-lit), 0.72) 50%,
      rgba(var(--c-lit), 0.2) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(var(--c-shade), 0) 60%,
      rgba(var(--c-shade), 0.2) 100%);
  background-size: 100% 1px, 100% 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  box-shadow:
    0 1px 2px rgba(var(--c-shade), 0.7),
    0 14px 28px -16px rgba(var(--c-em), 0.5),
    0 18px 30px -20px rgba(var(--c-shade), 0.9);
}
:where(:root[data-finish="celebration"]) .btn:hover { background-color: var(--emerald-deep); }
/* The page's Reserve buttons stand above the room's vignette (40), so the edges of the screen
   never dim the call to action; still under the masthead (50) and the grain (150). */
:root[data-finish="celebration"] main .btn { position: relative; z-index: 41; }

/* ---------- 8 · The emblem: a chrome glass with the logo's star on its rim ---- */

:root[data-finish="celebration"] .emblem {
  color: var(--c-chrome-200);
  stroke: url(#celChrome) var(--c-chrome-200);   /* the solid silver is the fallback */
  overflow: visible;
}
:root[data-finish="celebration"] .cel-star {
  stroke: none;
  fill: var(--c-chrome-50);
  pointer-events: none;
  opacity: 0.92;
}

/* ---------- Preferences --------------------------------------------------------- */

/* No motion: no bead rising, no star blooming. The page keeps a still glass: the bead held
   in the margins (.cel-still), a star resting on each plate and on each emblem. */
@media (prefers-reduced-motion: reduce) {
  :root[data-finish="celebration"] .cel-fizz,
  :root[data-finish="celebration"] .cel-glint { display: none; }
  :root[data-finish="celebration"] .cel-rest { display: block; }
}

/* Windows high contrast: drop the decoration, keep the words. */
@media (forced-colors: active) {
  :root[data-finish="celebration"] :is(.label__no, .sequence__no, .figure-item__num, .opening__title em, .reserve__title) {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  :root[data-finish="celebration"] .moment__quote p::before,
  :root[data-finish="celebration"] .moment__quote p::after {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  :root[data-finish="celebration"] :is(.cel-glass, .cel-star, .cel-fizz, .cel-still, .cel-glint, .cel-rest) { display: none; }
  :root[data-finish="celebration"] body::before { display: none; }
}