/* =====================================================================================
   THE GROWN-UP DRINKS BIRTHDAY DESIGNS (envelope_style "drinks"; first: drinks-prosecco), loaded only for them
   (views/guest.ejs). Lane DRINKS 18/10, copied from the Christmas cracker's (xmas-cracker.css): the film at the top
   (views/partials/drinks-stage.ejs, public/js/drinks-stage.js), the name + age over the paused bottle, the page's own card
   rising over the bubbles, the top block (the bottle, the names, the age, the details), then the ordinary scroll sections
   in a light blush-ivory look with champagne gold. On Android the app's light-tone Samsung layer paints the page as a
   picture; this design's own writing is filled with ink pictures at the bottom of this file: --drk-ink-* (each theme's own
   assets/drinks/ss/ink-*.jpg, set by partials/drinks-stage.ejs) and the app's --ss-button / --ss-ink-button. No theme path in this file.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500&family=Great+Vibes&family=Inter:wght@400;500;600;700&display=swap');

.drk-page { --k-bg: #fbf3ee; --k-panel: rgba(255,255,255,.8); --k-claret: #8a4a52; --k-gold: #a8822f; --k-gold-l: #8a4a52; --k-ivory: #3a2328;
  --k-muted: #74595a; --k-line: rgba(168,130,47,.42); --k-ink: #2a1a0c;
  --k-head: "Playfair Display", Georgia, "Times New Roman", serif; --k-script: "Great Vibes", "Playfair Display", Georgia, serif;
  --k-body: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }
.drk-page [hidden] { display: none !important; }

/* ---- locking: until the film has played the page is just the stage (drinks-stage.js .drk-sealed) ---- */
.drk-page.gf-locked { position: static; height: auto; overflow: visible; }
.drk-page.gf-locked .stage-scroll { pointer-events: auto; }
body.drk-sealed { overflow: hidden; overscroll-behavior: none; }
.drk-sealed .sc-flow, .drk-sealed .sc-music, .drk-sealed .drk-top, .drk-sealed .drk-glowbg { display: none !important; }
/* the card and the top block carry the names, date and place */
.drk-page .sc-hero { display: none; }
html:has(body.drk-page), body.drk-page { overflow-x: hidden; background: var(--k-bg); }
.drk-page #card-stage.stage-scroll { background: var(--k-bg); }
.drk-page .sc-flow { position: relative; overflow-x: clip; }
body.drk-page::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 50% at 50% 0%, rgba(196,140,130,.10), transparent 65%), radial-gradient(90% 50% at 50% 100%, rgba(168,130,47,.08), transparent 70%); }

/* ---- the stage ---- */
.drk-scene { --k-ivory: #f6ecdc; --k-gold: #d9b064; --k-gold-l: #f1d79a; --k-muted: #c9b49a; --k-panel: rgba(46,16,22,.62); --k-line: rgba(217,176,100,.32);
  position: relative; z-index: 1; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0 auto; overflow: hidden;
  background: #120a08; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; font-family: var(--k-body); color: var(--k-ivory); }
.drk-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #120a08; z-index: 1; }
.drk-fizz { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.drk-fizz.on { opacity: 1; }

.drk-open { position: absolute; z-index: 20; inset: 0; display: grid; place-items: end center; padding: 0 16px calc(64px + env(safe-area-inset-bottom));
  background: #120a08 center / cover no-repeat; cursor: pointer; border: 0; color: var(--k-ivory); font: inherit; margin: 0; width: 100%; }
.drk-open::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,10,8,.15) 35%, rgba(18,10,8,.88)); }
.drk-card { position: relative; text-align: center; max-width: 420px; display: block; }
.drk-kicker { display: block; color: var(--k-gold-l); letter-spacing: .22em; font: 600 16px var(--k-body); text-transform: uppercase; margin: 0 0 12px; }
.drk-go { display: inline-block; padding: 16px 30px; border-radius: 999px; background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); color: var(--k-ink);
  font: 700 21px var(--k-body); letter-spacing: .03em; }
.drk-open.ready .drk-go { animation: drk-pulse 1.8s infinite; }
.drk-hint { display: block; margin: 12px 0 0; font-size: 14px; opacity: .85; }
@keyframes drk-pulse { 0% { box-shadow: 0 0 0 0 rgba(241,215,154,.55); } 70% { box-shadow: 0 0 0 18px rgba(241,215,154,0); } 100% { box-shadow: 0 0 0 0 rgba(241,215,154,0); } }

.drk-bar { position: absolute; z-index: 15; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
body:not(.drk-sealed) .drk-bar { left: 12px; right: auto; }
.drk-chip { border: 1px solid rgba(246,236,220,.4); background: rgba(18,10,8,.55); color: var(--k-ivory); border-radius: 999px;
  padding: 8px 14px; font: 600 14px var(--k-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drk-chip.drk-icon { width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.edit-mode .drk-bar, .edit-mode .drk-open, .edit-mode .drk-pop, .edit-mode .drk-scroll { display: none !important; }

/* the pause on the bottle: the whole stage is the button, the ring shows the cork */
.drk-pop { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.drk-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(241,215,154,.9), 0 0 26px 6px rgba(217,176,100,.45), inset 0 0 22px rgba(241,215,154,.3);
  animation: drk-ring 1.6s ease-in-out infinite; }
@keyframes drk-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.drk-pop-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 11px 22px;
  border-radius: 999px; background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); color: var(--k-ink); font: 700 18px var(--k-body); letter-spacing: .05em;
  text-transform: uppercase; box-shadow: 0 6px 24px rgba(0,0,0,.5); animation: drk-bob 1.6s ease-in-out infinite; }
@keyframes drk-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.drk-spark { position: absolute; width: 11px; height: 11px; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0 20%, rgba(255,220,150,.9) 35%, rgba(217,176,100,0) 70%); animation: drk-twinkle 1.4s ease-in-out infinite; }
@keyframes drk-twinkle { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }

/* the reveal: the film only pops and pours; the page's OWN card rises over the bubbles with the details already on it */
.drk-rv { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.drk-rv-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(18,10,8,.2), rgba(18,10,8,.8)); }
.drk-rv-card { position: absolute; left: 0; top: 0; background: #fbf4ee; border-radius: 1.4%; transform-origin: 50% 50%;
  box-shadow: 0 0 34px 8px rgba(255,214,150,.45), 0 16px 34px rgba(0,0,0,.45); will-change: transform; }
.drk-card-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; display: block; }
.drk-card-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  text-align: center; color: #3a2328; padding: 15% 11% 14%; }
.drk-card-text p { margin: 0; }
.drk-card-text .ct-kicker { font: 600 calc(var(--u) * 4) var(--k-body); letter-spacing: .24em; text-transform: uppercase; color: #8e6a2c; }
.drk-card-text .ct-title { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); }
.drk-card-text .ct-name { font: 400 calc(var(--u) * 15 * var(--nk, 1)) / 1.05 var(--k-script); color: #8a4a52; white-space: nowrap; }   /* a long name shrinks (--nk) */
.drk-card-text .ct-what { font: 600 calc(var(--u) * 7.2) / 1.1 var(--k-head); color: #3a2328; }
.drk-card-text .ct-line { width: 40%; height: 2px; background: linear-gradient(90deg, transparent, #c99a45, transparent); }
.drk-card-text .ct-when { font: 600 calc(var(--u) * 5) / 1.6 var(--k-body); color: #3a2328; }
.drk-card-text .ct-where { font: 500 calc(var(--u) * 4.8) / 1.4 var(--k-body); color: #74595a; }

.drk-scroll { position: absolute; z-index: 5; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--k-ivory); text-decoration: none; text-align: center;
  font: 600 16px var(--k-body); letter-spacing: .06em; text-shadow: 0 2px 10px rgba(0,0,0,.9); white-space: nowrap; animation: drk-fadein 1s ease both; }
.drk-arrow { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--k-gold); display: grid; place-items: center; animation: drk-nudge 1.4s ease-in-out infinite;
  background: rgba(18,10,8,.45); }
.drk-arrow::before { content: ""; width: 10px; height: 10px; border: solid var(--k-gold); border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes drk-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes drk-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- the top block: the bottle, the names, the age, the details ---- */
.drk-top { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 56px 20px 30px; text-align: center; font-family: var(--k-body); color: var(--k-ivory); }
.drk-eyebrow { margin: 0 0 6px; color: var(--k-gold); font: 600 15px var(--k-body); letter-spacing: .24em; text-transform: uppercase; }
.drk-name { margin: 4px 0 4px; font: 400 calc(76px * var(--nk, 1))/1.05 var(--k-script); color: var(--k-claret); overflow-wrap: anywhere; }
.drk-title { margin: 0 0 16px; color: var(--k-ivory); font: 600 40px/1.1 var(--k-head); letter-spacing: .01em; }
.drk-details { display: grid; gap: 14px; margin: 22px 0 26px; }
.drk-details div { padding: 14px 12px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-panel); }
.drk-details dt { color: var(--k-gold); font: 600 13px var(--k-body); letter-spacing: .22em; text-transform: uppercase; }
.drk-details dd { margin: 4px 0 0; font-weight: 600; font-size: 18px; line-height: 1.45; }
.drk-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.drk-btn { box-shadow: 0 8px 20px rgba(138,74,82,.16); display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 999px;
  border: 2px solid var(--k-gold); background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); color: var(--k-ink); font: 700 17px var(--k-body); letter-spacing: .03em;
  text-decoration: none; cursor: pointer; }
.drk-btn.drk-ghost { background: rgba(255,255,255,.5); color: var(--k-claret); box-shadow: none; }
.drk-tap-hint { margin: 18px 0 0; color: var(--k-muted); font-style: italic; font-size: 14px; }

/* the bottle on ice: from the film's pause frame, faded at the edges, it lights up as it arrives; tap = a pop + a toast */
.drk-relic-wrap { position: relative; width: min(74vw, 320px); aspect-ratio: 1; margin: 0 auto 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.drk-relic { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%); mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
  opacity: .3; filter: saturate(.4); transform: scale(.93); transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.lit > .drk-relic { opacity: 1; filter: none; transform: none; }
.drk-relic-wrap .drk-glow { position: absolute; left: 50%; top: 52%; width: 46%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,214,150,.55), rgba(255,170,90,0)); mix-blend-mode: screen; opacity: 0; }
.drk-relic-wrap.lit .drk-glow { animation: drk-breathe 3.2s ease-in-out 1.2s infinite; }
@keyframes drk-breathe { 0%, 100% { opacity: .12; } 50% { opacity: .7; } }
.drk-wobble { animation: drk-wobble .6s ease-in-out; }
@keyframes drk-wobble { 0%, 100% { transform: rotate(0) scale(1); } 15% { transform: rotate(-4deg) scale(1.04); } 35% { transform: rotate(4deg) scale(1.02); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
.drk-toast { max-width: 420px; margin: 6px auto 14px; padding: 14px 16px; border: 1px dashed var(--k-line); border-radius: 14px; background: var(--k-panel); }
.drk-toast p { margin: 0; }
.drk-toast-q { font: 600 17px/1.4 var(--k-body); color: var(--k-ivory); }
.drk-toast-a { margin-top: 8px !important; font: italic 600 19px/1.3 var(--k-head); color: var(--k-gold-l); opacity: 0; }
.drk-toast.show .drk-toast-a { animation: drk-fadein .6s ease 1.4s both; }
#drk-confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* ---- the page below, in the film's look ---- */
.drk-page .sc-section { position: relative; max-width: 560px; padding: 44px 20px 34px; border-bottom: 0; text-align: center; font-family: var(--k-body); color: var(--k-ivory); }
.drk-page .sc-flow > .sc-section, .drk-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.drk-page .sc-h2 { margin: 0 0 16px; color: var(--k-ivory); font: 600 38px/1.1 var(--k-head); letter-spacing: .01em; text-transform: none; }
.drk-page .sc-script { margin: 0 0 16px; color: var(--k-claret); font: 400 54px/1.1 var(--k-script); text-transform: none; }
.drk-page .sc-rule, .drk-page .sc-rule-sm { width: 80px; height: 2px; margin: 0 auto 20px; border: 0; background: linear-gradient(90deg, transparent, var(--k-gold), transparent); }
.drk-page .sc-lead { font-size: 17px; line-height: 1.65; color: var(--k-ivory); }
.drk-page .sc-signature { font: italic 500 22px/1.4 var(--k-head); color: var(--k-gold-l); margin-top: 12px; }
.drk-page .sc-detail { display: block; padding: 14px 12px; margin: 0 0 14px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-panel); }
.drk-page .sc-label { display: block; margin: 0 0 4px; color: var(--k-gold); font: 600 13px var(--k-body); letter-spacing: .22em; text-transform: uppercase; }
.drk-page .sc-value { font-weight: 600; font-size: 18px; line-height: 1.45; color: var(--k-ivory); }
.drk-page .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; padding: 0; background: none; border: 0; }
.drk-page .countdown-item { padding: 12px 0 8px; border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-panel); }
.drk-page .countdown-val { display: block; font: 600 38px/1 var(--k-head); color: var(--k-gold-l); font-variant-numeric: tabular-nums; }
.drk-page .countdown-lbl { color: var(--k-muted); font: 600 11px var(--k-body); letter-spacing: .16em; text-transform: uppercase; }
.drk-page .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
.drk-page .sc-timeline li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 12px 4px; border-bottom: 1px dashed var(--k-line); }
.drk-page .sc-timeline .sc-dot, .drk-page .sc-timeline .sc-ico { display: none; }
.drk-page .sc-time { color: var(--k-gold); font: 600 17px var(--k-head); }
.drk-page .sc-what { font-size: 17px; line-height: 1.45; color: var(--k-ivory); }
.drk-page .sc-map { margin: 18px 0 10px; padding: 6px; border: 0; border-radius: 18px; background: linear-gradient(145deg, #f1d79a, #a8822f 55%, #f1d79a);
  box-shadow: 0 10px 26px rgba(138,74,82,.16); }
.drk-page .sc-map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 13px; background: #efe6d6; }
.drk-page .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 700 16px var(--k-body); letter-spacing: .03em; }
html:not([data-ss]) .drk-page .sc-btn-solid, html:not([data-ss]) .drk-page .sc-btn.js-maps { background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); border: 2px solid var(--k-gold); color: var(--k-ink); }
.drk-page .sc-btn-ghost { background: rgba(255,255,255,.5); border: 2px solid var(--k-gold); color: var(--k-claret); }
.drk-page .sc-alt-links, .drk-page .sc-alt-links a { color: var(--k-muted); }
.drk-page .sc-form { text-align: left; }
.drk-page .sc-form label, .drk-page .sc-legend { display: block; margin: 16px 0 6px; color: var(--k-gold); font: 600 13px var(--k-body); letter-spacing: .16em; text-transform: uppercase; }
.drk-page .sc-form input[type="text"], .drk-page .sc-form input[type="tel"], .drk-page .sc-form input[type="email"], .drk-page .sc-form select, .drk-page .sc-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(168,130,47,.45); background: #fff; color: var(--k-ivory); font: 500 17px var(--k-body); }
.drk-page .sc-choice span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px; border-radius: 14px; text-align: center;
  border: 2px solid rgba(168,130,47,.55); color: var(--k-ivory); font: 600 17px var(--k-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .drk-page .sc-choice span { background: rgba(255,255,255,.7); }
html:not([data-ss]) .drk-page .sc-choice input:checked + span { background: linear-gradient(135deg, #f1d79a, #d9b064 50%, #b88f3e); border-color: #b88f3e; color: var(--k-ink); }
[data-ss] .drk-page .sc-choice input:checked + span { border-color: var(--k-gold); }
.drk-page .sc-thanks { border: 2px solid var(--k-gold); border-radius: 16px; background: var(--k-panel); padding: 16px; text-align: left; }
.drk-page .sc-footer { position: relative; padding: 50px 24px 70px; text-align: center; }
.drk-page .sc-footer .sc-script { font: 400 50px/1.1 var(--k-script); color: var(--k-claret); }
.drk-page .drk-again { margin-top: 18px; }
.drk-page .rsvp-alert { padding: 14px 16px; border-radius: 16px; font: 600 17px/1.45 var(--k-body); text-align: center; }
.drk-page .rsvp-alert.success { background: var(--k-panel); border: 2px solid var(--k-gold); color: var(--k-ivory); }
.drk-page .rsvp-alert.error { background: #fff; border: 2px solid #b3261e; color: #b3261e; }

@media (min-width: 700px) { .drk-page .sc-h2, .drk-title { font-size: 46px; } .drk-top, .drk-page .sc-section { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .drk-open.ready .drk-go, .drk-ring, .drk-pop-label, .drk-spark, .drk-arrow, .drk-relic-wrap.lit .drk-glow { animation: none !important; }
}

/* ---- Samsung Internet (html[data-ss], Android): its dark mode flips colours a page draws and dims pictures, but leaves
   canvases and videos alone. The page is the app's light-tone picture (ss-page.jpg); the gold buttons take their
   gold from a picture inside them and their dark words from an ink picture (themes/drinks-prosecco/assets/ss-button.jpg +
   ss-ink-button.jpg, scripts/make-samsung-safe.js). The drawn colours left are dark enough that its dark mode leaves them be. ---- */
/* the page itself: the app paints ss-page.jpg behind everything on Android light designs (views/guest.ejs) */
html[data-ss]:has(body.drk-page), [data-ss] body.drk-page { background: transparent; }
[data-ss] body.drk-page::before { display: none; }
/* this design's own writing below the film, filled with ink pictures (a drawn colour would be flipped pale) */
[data-ss] :is(.drk-title, .drk-details dd, .drk-toast-q),
[data-ss] :is(.drk-name, .drk-btn.drk-ghost, .drk-toast-a),
[data-ss] :is(.drk-eyebrow, .drk-details dt),
[data-ss] .drk-tap-hint {
  background: var(--drk-ink-dark) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
[data-ss] :is(.drk-name, .drk-btn.drk-ghost, .drk-toast-a) { background-image: var(--drk-ink-claret); }
[data-ss] :is(.drk-eyebrow, .drk-details dt) { background-image: var(--drk-ink-gold); }
[data-ss] .drk-tap-hint { background-image: var(--drk-ink-muted); }
/* boxes: a gold picture ring (a mask is never recoloured) instead of a drawn border and fill */
[data-ss] :is(.drk-details div, .drk-btn.drk-ghost, .drk-toast) { position: relative; background-color: transparent; border-color: transparent; box-shadow: none; }
[data-ss] :is(.drk-details div, .drk-btn.drk-ghost, .drk-toast)::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: var(--drk-ink-goldline) 0 0 / 100% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-ss] .drk-btn.drk-ghost { background: var(--drk-ink-claret) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; }
.drk-btn, .drk-go, .drk-pop-label { isolation: isolate; }
.drk-btn, .drk-go { position: relative; }
[data-ss] .drk-btn:not(.drk-ghost), [data-ss] .drk-go, [data-ss] .drk-pop-label, [data-ss] .drk-page .sc-btn.js-maps { background: transparent; border-color: transparent; }
[data-ss] .drk-page .sc-btn.js-maps { position: relative; isolation: isolate; overflow: hidden; }
[data-ss] :is(.drk-btn, .drk-go, .drk-pop-label, .sc-btn.js-maps) > .ss-fill { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  border-radius: inherit; object-fit: cover; z-index: -1; pointer-events: none; }
[data-ss] .drk-ss-ink { background: var(--ss-ink-button) center / cover; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
[data-ss] .ss-emoji { margin-left: .25em; }
[data-ss] .drk-page .sc-map { background: var(--ss-button) center / cover; box-shadow: none; }
[data-ss] .drk-page .sc-map iframe { filter: brightness(.88) saturate(.8); }
/* the ivory card is a picture (kept), but its dark writing would be flipped pale: fill the letters with ink pictures */
[data-ss] .drk-card-text :is(.ct-kicker, .ct-name, .ct-what, .ct-when, .ct-where) { -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; background: var(--drk-ink-dark) 0 0 / 100% 100%;
  -webkit-background-clip: text; background-clip: text; }
[data-ss] .drk-card-text .ct-name { background-image: var(--drk-ink-claret); }
[data-ss] .drk-card-text .ct-kicker { background-image: var(--drk-ink-gold); }
[data-ss] .drk-card-text .ct-where { background-image: var(--drk-ink-muted); }
[data-ss] .drk-card-text .ct-line { background: var(--drk-ink-goldline) 0 0 / 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
/* the Tap-to-open cover's picture is a real picture (a canvas once ss-canvas.js swaps it) instead of a CSS background */
.drk-open > .drk-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.drk-open::before { z-index: 1; }
.drk-open .drk-card { z-index: 2; }
/* (light, 16/10) the countdown tiles and the detail boxes: no drawn fill on Samsung (it turned them dark), a gold picture ring instead */
[data-ss] .drk-page :is(.countdown-item, .sc-detail) { position: relative; background: transparent !important; border-color: transparent !important; }
[data-ss] .drk-page :is(.countdown-item, .sc-detail)::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--drk-ink-goldline) 0 0 / 100% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---- (drinks) the name + age the page writes over the paused bottle, above the cork ---- */
.drk-hello { position: absolute; z-index: 3; left: 0; right: 0; top: 52px; height: 30%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 12px; pointer-events: none; text-align: center;
  opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.drk-hello.on { opacity: 1; transform: none; }
.drk-hello p { margin: 0; }
.dh-in { display: flex; flex-direction: column; align-items: center; gap: 2px; transform-origin: 50% 100%; }
.dh-kicker { color: #fff3d6; font: 600 15px var(--k-body); letter-spacing: .26em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.85); }
.dh-name { color: #fff; font: 400 calc(70px * var(--nk, 1))/1.02 var(--k-script); max-width: 92vw; text-wrap: balance; text-shadow: 0 3px 18px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6); }
.dh-age { display: flex; align-items: flex-start; justify-content: center; line-height: .9; color: #f6dfa0;
  text-shadow: 0 4px 20px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.6); }
.dh-num { font: 900 104px/.9 var(--k-head); font-variant-numeric: lining-nums; letter-spacing: -.01em; color: #f8e2a6;
  text-shadow: 0 2px 0 #b8893b, 0 6px 22px rgba(0,0,0,.65); }
.dh-sfx { font: 700 32px/1 var(--k-head); margin: .3em 0 0 .06em; color: #f6dfa0; }
.dh-occ { color: #fff3d6; font: 600 30px/1.15 var(--k-head); text-shadow: 0 2px 12px rgba(0,0,0,.85); }
.drk-pop-label { animation: none; }
/* ---- (drinks) the age on the card and in the top block: bold lining numbers, a small lower-case ordinal ---- */
.drk-card-text .ct-age { display: flex; align-items: flex-start; justify-content: center; line-height: .85; color: #a8822f; }
.drk-card-text .ct-num { font: 900 calc(var(--u) * 22) / .85 var(--k-head); font-variant-numeric: lining-nums; color: #a8822f; }
.drk-card-text .ct-sfx { font: 700 calc(var(--u) * 6.5) / 1 var(--k-head); margin-top: calc(var(--u) * 1.4); color: #a8822f; }
.drk-card-text .ct-title { gap: calc(var(--u) * 1.2); }
.drk-card-text { padding: 13% 11% 12%; }
.drk-age { display: flex; align-items: flex-start; justify-content: center; margin: 0 0 2px; line-height: .85; color: var(--k-gold); }
.drk-num { font: 900 104px/.85 var(--k-head); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.drk-sfx { font: 700 32px/1 var(--k-head); margin: 8px 0 0 3px; }
/* the bottle relic: a tall crop, so a rounded portrait window, not a circle */
.drk-relic-wrap { width: min(62vw, 260px); aspect-ratio: 3 / 4; }
.drk-relic { border-radius: 46% 46% 40% 40%; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.drk-relic-wrap .drk-glow { top: 22%; width: 40%; height: 18%; }
.drk-toast-line { font: italic 600 19px/1.4 var(--k-head) !important; color: var(--k-claret) !important; }
.drk-toast.show .drk-toast-line { animation: drk-fadein .5s ease both; }
[data-ss] .dh-num { -webkit-text-fill-color: #f6dfa0; color: #f6dfa0; background: none; }
[data-ss] .drk-card-text :is(.ct-num, .ct-sfx) { -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  background: var(--drk-ink-gold) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; }
[data-ss] :is(.drk-num, .drk-sfx, .drk-toast-line) { background: var(--drk-ink-gold) 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent; }
[data-ss] .drk-toast-line { background-image: var(--drk-ink-claret); }

/* (drinks) long names wrap (balanced) once they reach 60%; every number in the headings is a lining figure (Playfair's default
   old-style figures read "4oth") */
.drk-card-text .ct-name { white-space: normal; text-wrap: balance; line-height: 1; max-width: 100%; }
.drk-name { text-wrap: balance; line-height: 1.02; }
.drk-page :is(.ct-what, .drk-title, .sc-h2, .sc-time, .sc-value, .countdown-val, .sc-lead, .sc-signature, .drk-details dd) { font-variant-numeric: lining-nums; }

/* 18/10 Gary: "the cork doesn't look like it's in the bottle" -> no ring or glow drawn over the real cork; the gold button under it is the cue */
.drk-ring { box-shadow: none !important; animation: none !important; opacity: 0 !important; }
/* 19/10 Gary: "RAISE A GLASS FOR" touched the script name: Great Vibes' capitals and ascenders (C, L, K, h, l, t) rise about a third
   of an em above its line box, so the name gets that much clear space above it, scaled with the name's own size (--nk) */
.dh-kicker { margin-bottom: 6px !important; }
.dh-name { padding-top: calc(70px * var(--nk, 1) * .34); }