/* ==========================================================================
   Supernova Spectacular — landing page
   Design system tokens are reproduced verbatim from the Supernova Spectacular
   Design System (tokens/colors, typography, spacing, effects, base).
   Webfonts are linked from the document head, not @import-ed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — colour
   -------------------------------------------------------------------------- */
:root{
  /* Brand base */
  --ss-yellow: #F5C031;
  --ss-yellow-deep: #E0A81C;
  --ss-yellow-soft: #FBE3A0;
  --ss-pink: #F49AC1;
  --ss-pink-soft: #F9C3DA;
  --ss-pink-deep: #D9739F;
  --ss-plum: #631436;
  --ss-plum-deep: #230F1F;
  --ss-plum-mid: #4B1229;
  --ss-plum-light: #7B2049;
  --ss-ink: #12100F;
  --ss-white: #FFFFFF;
  --ss-cream: #FFFBF2;

  /* Curtain accents */
  --ss-curtain-red: #A31038;
  --ss-curtain-red-deep: #6E0C28;

  /* Signature gradients */
  --ss-gradient-plum: linear-gradient(180deg, var(--ss-plum-deep) 0%, var(--ss-plum) 62%, #6B1639 100%);
  --ss-gradient-plum-radial: radial-gradient(120% 90% at 50% 100%, #6D163B 0%, var(--ss-plum) 45%, var(--ss-plum-deep) 100%);
  --ss-gradient-honey: linear-gradient(180deg, var(--ss-yellow) 0%, var(--ss-yellow-deep) 100%);

  /* Semantic surfaces */
  --surface-stage: var(--ss-gradient-plum);
  --surface-flat: var(--ss-plum);
  --surface-card: rgba(255,255,255,0.07);
  --surface-card-solid: var(--ss-white);
  --surface-honey: var(--ss-yellow);
  --surface-inverse: var(--ss-cream);

  /* Semantic text */
  --text-heading: var(--ss-white);
  --text-body: rgba(255,255,255,0.90);
  --text-muted: rgba(255,255,255,0.62);
  --text-script: var(--ss-pink);
  --text-accent: var(--ss-yellow);
  --text-on-honey: var(--ss-ink);
  --text-on-light: var(--ss-plum-deep);
  --text-body-on-light: #4A3540;

  /* Lines & borders */
  --line-dashed: var(--ss-yellow);
  --border-subtle: rgba(255,255,255,0.18);
  --border-honey: var(--ss-yellow);

  /* Interactive */
  --action-primary-bg: var(--ss-yellow);
  --action-primary-fg: var(--ss-ink);
  --action-primary-bg-hover: #FFD05A;
  --action-secondary-bg: var(--ss-pink);
  --action-secondary-fg: var(--ss-plum-deep);
  --action-secondary-bg-hover: var(--ss-pink-soft);
  --action-ghost-fg: var(--ss-white);
  --action-ghost-border: rgba(255,255,255,0.55);
  --action-disabled-bg: rgba(255,255,255,0.16);
  --action-disabled-fg: rgba(255,255,255,0.40);
  --focus-ring: var(--ss-pink);
}

/* Light section scope */
.ss-on-light{
  --text-heading: var(--ss-plum-deep);
  --text-body: var(--text-body-on-light);
  --text-muted: #7A6470;
  --text-script: var(--ss-pink-deep);
  --border-subtle: rgba(35,15,31,0.12);
  --surface-card: var(--ss-white);
  --action-ghost-fg: var(--ss-plum-deep);
  --action-ghost-border: rgba(35,15,31,0.35);
}

/* --------------------------------------------------------------------------
   2. TOKENS — typography
   -------------------------------------------------------------------------- */
:root{
  --font-display: "Poppins", "Century Gothic", "URW Gothic", "Futura", sans-serif;
  --font-script: "Yellowtail", "Limon Script", "Brush Script MT", cursive;
  --font-text: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;

  --weight-display: 700;
  --weight-body: 400;
  --weight-body-strong: 700;
  --weight-eyebrow: 700;

  --text-hero: clamp(44px, 7.2vw, 108px);
  --text-display-1: clamp(36px, 5.4vw, 76px);
  --text-display-2: clamp(30px, 4vw, 54px);
  --text-script-lg: clamp(40px, 6.4vw, 96px);
  --text-script-md: clamp(28px, 3.6vw, 52px);

  --text-lead: 21px;
  --text-body-size: 17px;
  --text-small: 15px;
  --text-eyebrow-size: 14px;
  --text-caption: 13px;

  --leading-display: 0.92;
  --leading-script: 1.02;
  --leading-heading: 1.08;
  --leading-body: 1.55;
  --leading-tight: 1.25;

  --tracking-display: -0.02em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.14em;
}

/* --------------------------------------------------------------------------
   3. TOKENS — spacing
   -------------------------------------------------------------------------- */
:root{
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-y: clamp(56px, 8vw, 120px);
  --section-x: clamp(20px, 6vw, 80px);
  --measure: 62ch;
  --content-max: 1120px;
  --content-narrow: 760px;

  --tile-pad: 7.5%;
  --stack-gap: var(--space-5);
}

/* --------------------------------------------------------------------------
   4. TOKENS — effects
   -------------------------------------------------------------------------- */
:root{
  --radius-pill: 999px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --radius-ribbon: 0;

  --shadow-script: 4px 5px 0 rgba(20,6,14,0.55);
  --shadow-script-sm: 2px 3px 0 rgba(20,6,14,0.55);
  --shadow-display: 0 3px 0 rgba(20,6,14,0.28);
  --shadow-card: 0 18px 44px -20px rgba(12,4,10,0.65);
  --shadow-card-light: 0 14px 34px -18px rgba(35,15,31,0.28);
  --shadow-lift: 0 22px 50px -18px rgba(12,4,10,0.7);
  --shadow-honey: 0 10px 0 var(--ss-yellow-deep);

  --dash-width: 4px;
  --dash-pattern: 14 12;
  --dash-color: var(--ss-yellow);

  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-drift: 6s;

  --glass-bg: rgba(255,255,255,0.08);
  --glass-blur: blur(14px);
  --scrim: linear-gradient(180deg, rgba(35,15,31,0) 0%, rgba(35,15,31,0.85) 100%);
}
@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; --dur-drift:0ms; }
}

/* --------------------------------------------------------------------------
   5. BASE
   -------------------------------------------------------------------------- */
html,body{margin:0;padding:0;background:var(--ss-plum-deep);}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

a{color:var(--ss-yellow);text-decoration-color:rgba(245,192,49,0.45);text-underline-offset:3px}
a:hover{color:var(--action-primary-bg-hover);text-decoration-color:currentColor}
.ss-on-light a{color:var(--ss-pink-deep)}
.ss-on-light a:hover{color:var(--ss-plum)}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.ss-on-light :focus-visible{outline-color:var(--ss-pink-deep)}

/* <picture> is a layout-transparent wrapper: percentage sizes on the inner
   <img> must resolve against the real parent, not the picture element. */
picture{display:contents}

/* Semantic headings/paragraphs replace the prototype's plain divs — drop the
   UA margins so flex `gap` alone controls the rhythm. */
h1,h2,h3,p{margin:0}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.page{
  background:var(--ss-gradient-plum);
  font-family:var(--font-text);
  color:var(--text-body);
  min-height:100vh;
  overflow-x:hidden;
}

/* Shared brand primitives ---------------------------------------------------
   Wordmark / BeeMark reproduce the design-system components. */
.wordmark{
  /* The lockup is set in Montserrat by request, not the display face. The
     date and the hashtag still use --font-display. Montserrat runs lighter
     than the display face at the same weight, so the lockup is ExtraBold. */
  font-family:var(--font-text);
  font-weight:800;
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  color:var(--text-heading);
  text-align:left;
  margin:0;
}
.wordmark--hero{font-size:clamp(36px,5.4vw,76px)}
.wordmark--sm{font-size:clamp(22px,2.4vw,30px)}

.bee-mark{display:inline-block;width:84px;line-height:0}
.bee-mark img{width:100%;height:auto;display:block}

/* Buttons -------------------------------------------------------------------
   Content-box sizing matches the design prototype. The ghost variant trades
   2px of padding for its 2px border so all three pills share one height. */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 18px;
  min-height:40px;
  border-radius:var(--radius-pill);
  border:none;
  cursor:pointer;
  font-family:var(--font-text);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.01em;
  text-decoration:none;
  white-space:nowrap;
  transform:translateY(0);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn:active{transform:translateY(2px) scale(0.985)}

.btn--primary,.btn--primary:link,.btn--primary:visited{
  background:var(--action-primary-bg);color:var(--action-primary-fg);
}
.btn--primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}

.btn--secondary,.btn--secondary:link,.btn--secondary:visited{
  background:var(--action-secondary-bg);color:var(--action-secondary-fg);
}
.btn--secondary:hover{background:var(--action-secondary-bg-hover);color:var(--action-secondary-fg)}

.btn--ghost,.btn--ghost:link,.btn--ghost:visited{
  background:transparent;
  color:var(--action-ghost-fg);
  border:2px solid var(--action-ghost-border);
}
.btn--ghost:hover{background:rgba(255,255,255,0.12);color:var(--action-ghost-fg)}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--ss-gradient-plum-radial);
  color:var(--text-body);
  font-family:var(--font-text);
  width:100%;
}
.hero__curtain{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:clamp(56px,9%,130px);
  display:block;
  pointer-events:none;
}
.hero__bee-host{position:absolute;inset:0;z-index:5;pointer-events:none}

.hero__inner{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  min-height:100svh;
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:clamp(104px,13vh,150px) clamp(20px,6vw,64px) clamp(24px,3.5vh,48px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(20px,3.4vh,56px);
}

.hero__text{
  flex:1 1 min(430px,100%);
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1.3vh,16px);
  align-items:flex-start;
}

.hero__eyebrow{
  font-family:var(--font-text);
  font-weight:700;
  font-size:clamp(11px,3.2vw,14px);
  letter-spacing:0.12em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--ss-yellow);
  max-width:100%;
  text-wrap:balance;
}

.hero__lead{
  font-family:var(--font-text);
  font-size:clamp(13px,1.7vh,18px);
  line-height:1.45;
  color:var(--text-body);
  max-width:52ch;
  margin:0;
  text-wrap:pretty;
}

.hero__facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  margin-top:clamp(2px,0.8vh,10px);
  padding-top:clamp(10px,2vh,20px);
  border-top:1px solid var(--border-subtle);
  width:100%;
}
.fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.fact--date{flex:1 1 180px}
.fact--venue{flex:1 1 200px}
.fact__label{
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:700;
}
.fact__date{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(17px,2.2vh,23px);
  color:var(--ss-pink);
}
.fact__venue{
  font-size:clamp(13px,1.6vh,16px);
  line-height:1.35;
  color:var(--text-heading);
  font-weight:600;
}

.hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(6px,1.6vh,18px);
  width:100%;
  justify-content:flex-start;
}

.hero__photo-col{
  flex:0 1 330px;
  min-width:0;
  align-self:stretch;
  position:relative;
  min-height:240px;
}
.hero__photo{
  position:absolute;
  left:-40px;
  right:calc(-1 * clamp(8px,4vw,56px));
  bottom:calc(-1 * clamp(24px,3.5vh,48px));
  height:92svh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
.hero__photo img{
  height:100%;
  width:auto;
  /* The photo is sized off viewport HEIGHT, but its box is only as wide as the
     photo column. On a tall or very large screen the image outgrew that box
     and, being right-aligned, spilled left across the copy and the CTA row far
     enough to swallow the buttons. Bound the spill: past this width the image
     scales down inside the box (object-fit) instead of running into the text. */
  max-width:calc(100% + 200px);
  object-fit:contain;
  object-position:bottom center;
  display:block;
  filter:drop-shadow(0 18px 44px rgba(12,4,10,0.65));
}

@media (max-width:880px){
  .hero__photo-col{
    min-height:0;
    align-self:auto;
    width:100%;
    flex:1 1 100%;
    order:-1;
  }
  .hero__photo{
    position:relative;
    left:0;right:0;bottom:0;
    height:min(42svh,68vw);
    justify-content:center;
  }
  .hero__photo img{max-width:100%}
}

/* --------------------------------------------------------------------------
   7. HER STORY
   Left-aligned at the design system's 62ch reading measure — this is the one
   passage long enough that centring would cost legibility.
   -------------------------------------------------------------------------- */
.story{padding:clamp(44px,7vw,88px) clamp(20px,6vw,64px) clamp(24px,4vw,44px)}
/* Blurb and campaign widget sit side by side; flex-wrap stacks the widget
   below the text (centred) once the viewport can't fit both. */
.story__inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(28px,5vw,64px);
}
.story__text{
  flex:1 1 340px;
  max-width:var(--measure);
  display:flex;
  flex-direction:column;
  gap:clamp(14px,2vw,20px);
}
.story__campaign{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.story__lead{
  font-size:var(--text-lead);
  line-height:var(--leading-tight);
  color:var(--text-heading);
  font-weight:600;
  text-wrap:pretty;
}
.story__body{
  font-size:var(--text-body-size);
  line-height:var(--leading-body);
  color:var(--text-body);
  text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   8. CAMPAIGN
   -------------------------------------------------------------------------- */
.section-eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--ss-yellow);
}
/* RallyUp serves the widget photo at 246px wide — exactly filling its native
   300px card (25px padding + 2px border a side). Growing the card past that
   upscales the JPEG into pixelation, so its own max-width stands. */

/* --------------------------------------------------------------------------
   9. WHERE THE MONEY GOES
   A single statement beat between the campaign block and the logos. The rule
   above it is the brand's dashed flight-path motif at its token values
   (4px, 14/12 dash, round caps, honey yellow).
   -------------------------------------------------------------------------- */
.statement{padding:clamp(8px,1.5vw,20px) clamp(20px,6vw,64px) clamp(44px,7vw,88px)}
.statement__inner{
  max-width:var(--content-narrow);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,2.5vw,26px);
  text-align:center;
}
.statement__rule{display:block;flex:none}
.statement__text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(20px,2.8vw,32px);
  line-height:1.25;
  letter-spacing:var(--tracking-display);
  color:var(--text-heading);
  max-width:min(100%,620px);
  text-wrap:balance;
}

/* --------------------------------------------------------------------------
   10. PARTNERS / SPONSORS / BENEFICIARY
   -------------------------------------------------------------------------- */
.partners{
  background:var(--ss-cream);
  padding:clamp(44px,7vw,80px) clamp(20px,6vw,64px);
}
.partners__inner{
  max-width:var(--content-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:34px;
}
.partner-group{display:flex;flex-direction:column;align-items:center;gap:18px}
.partner-group--sponsors{gap:10px;text-align:center}
.partner-group--beneficiary{gap:14px}
.partner-group__label{
  font-size:13px;
  font-weight:700;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:#7A6470;
}
.partner-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:16px;
}
.partner-row--sponsors{gap:clamp(24px,5vw,56px)}
.logo-capsule{
  background:#fff;
  border-radius:16px;
  padding:16px 22px;
  min-height:clamp(92px,11.5vw,128px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px -18px rgba(12,4,10,0.5);
}
/* Neon-style logos are unreadable on white; give them a black capsule. */
.logo-capsule--dark{background:#000}
/* Partners without artwork get a set-in-type wordmark instead of an image.
   Doubled-up selector outranks the `.ss-on-light a` link colour. */
.partners .logo-wordmark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(20px,2.6vw,28px);
  letter-spacing:var(--tracking-display);
  text-transform:uppercase;
  color:var(--text-heading);
  white-space:nowrap;
}
.logo-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.partners img{width:auto;object-fit:contain;display:block}
.logo--sm{height:clamp(30px,4.4vw,44px)}
.logo--md{height:clamp(34px,5vw,52px)}
.logo--lg{height:clamp(42px,6.2vw,64px)}
.logo--xl{height:clamp(64px,9.5vw,100px)}
/* Square badge marks need more height than a horizontal lockup to read at
   the same optical size. */
.logo--badge{height:clamp(64px,9vw,96px)}
/* Lockups that carry a tagline under the mark: the extra height keeps the
   mark itself level with the plain --xl logos and stops the strapline
   collapsing into a grey line. */
.logo--lockup{height:clamp(76px,11.5vw,120px)}

.partners__divider{height:1px;background:rgba(35,15,31,0.12)}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.footer{
  background:var(--ss-plum-deep);
  padding:clamp(40px,6vw,72px) clamp(20px,6vw,64px);
  /* Clear the floating CTA bar. The script publishes the bar's measured
     height as --cta-bar-space, so a bar that wraps to two rows on a narrow
     screen still leaves the whole footer readable. */
  padding-bottom:calc(clamp(40px,6vw,72px) + var(--cta-bar-space, 0px));
}
.footer__grid{
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px;
  align-items:start;
}
.footer__brand{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.footer__col{display:flex;flex-direction:column;gap:10px}
.footer__label{
  font-size:12px;
  font-weight:700;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--text-muted);
}
.footer__email{font-size:16px;color:var(--ss-yellow);text-decoration:none}
.footer__email:hover{color:var(--action-primary-bg-hover);text-decoration:underline}
.footer__committee{font-size:16px;color:var(--text-body)}
.footer__socials{display:flex;gap:12px;align-items:center}
.social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-subtle);
  color:var(--ss-yellow);
  text-decoration:none;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out);
}
.social-btn:hover{background:rgba(255,255,255,0.12);color:var(--action-primary-bg-hover)}
.footer__hashtag{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:var(--ss-pink);
}
.footer__bottom{
  max-width:var(--content-max);
  margin:clamp(28px,4vw,44px) auto 0;
  padding-top:22px;
  border-top:2px dashed var(--ss-yellow);
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  justify-content:space-between;
}
.footer__legal,.footer__domain{
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
}
.footer__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px clamp(16px,2.5vw,28px);
}
/* Build credit — a quiet line, not a fourth footer column. */
.footer__credit{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted);
  text-decoration:none;
  transition:color var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
.footer__credit img{
  height:19px;
  width:auto;
  display:block;
  opacity:0.85;
  transition:opacity var(--dur-base) var(--ease-out);
}
.footer__credit:hover{color:var(--text-heading)}
.footer__credit:hover img{opacity:1}

/* --------------------------------------------------------------------------
   12. THE BEE
   -------------------------------------------------------------------------- */
.bee{
  position:fixed;
  top:0;left:0;
  width:clamp(90px,16vw,240px);
  z-index:40;
  pointer-events:auto;
  cursor:pointer;
  will-change:transform;
  transition:opacity 300ms ease;
}
.bee__flutter{
  transform-origin:70% 60%;
  animation:ssBeeFlutter 420ms ease-in-out infinite;
}
.bee img{width:100%;height:auto;display:block}
@keyframes ssBeeFlutter{
  0%,100%{transform:rotate(-0.6deg) scale(1,1)}
  50%{transform:rotate(0.6deg) scale(0.995,1.008)}
}

/* --------------------------------------------------------------------------
   13. "HER STORY" VIDEO MODAL
   -------------------------------------------------------------------------- */
.story-modal{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(20,6,14,0.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,5vw,48px);
}
.story-modal__shell{
  position:relative;
  height:min(100%,900px);
  aspect-ratio:9/16;
  max-width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--ss-plum-deep);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:var(--shadow-card);
  display:flex;
  align-items:center;
  justify-content:center;
}
.story-modal__player{width:100%;height:100%}
.story-modal__close{
  position:absolute;
  top:10px;right:10px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,0.35);
  background:rgba(20,6,14,0.78);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
body.is-modal-open{overflow:hidden}

/* --------------------------------------------------------------------------
   14. FLOATING CTA BAR
   The hero's three actions, re-offered once the hero has scrolled away. Sits
   above the bee but below the video modal, and hides while that modal is open.
   -------------------------------------------------------------------------- */
.cta-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:10px clamp(12px,4vw,24px);
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(35,15,31,0.9);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-top:1px solid var(--border-subtle);
  /* Parked off-screen rather than display:none, so it can slide back in and
     stays out of the tab order while hidden. */
  transform:translateY(120%);
  opacity:0;
  visibility:hidden;
  transition:transform var(--dur-base) var(--ease-out),
             opacity var(--dur-base) var(--ease-out),
             visibility 0s linear var(--dur-base);
}
.cta-bar.is-visible{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}
/* The modal owns the screen while it is open. */
body.is-modal-open .cta-bar{
  transform:translateY(120%);
  opacity:0;
  visibility:hidden;
}
/* Equal columns rather than a flex row: the three actions carry labels of
   very different lengths, and they should read as one set of matching pills
   at every width. The track is full-bleed on a phone and settles at a fixed
   measure once there is room, so the buttons never stretch across a desk
   monitor. */
.cta-bar__inner{
  max-width:min(100%, 620px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
  gap:clamp(6px,1.6vw,14px);
}
.cta-bar .btn{
  /* The page sets border-box only where it needs it, so say so here: without
     it width:100% adds the padding on top and the pills burst their tracks. */
  box-sizing:border-box;
  width:100%;
  min-height:44px;
  padding-left:clamp(8px,2.4vw,18px);
  padding-right:clamp(8px,2.4vw,18px);
  font-size:clamp(13px,1.1vw,14px);
  /* The longest label wraps rather than overflows on the narrowest phones;
     the stretched grid row keeps all three the same height when it does. */
  white-space:normal;
  text-align:center;
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .bee{transition:none !important}
  .bee__flutter{animation:none !important}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}