/* ============================================================
   Hide N' Seek St — Toronto Edition
   Scale-safe illustrated environment + Luma-style event card.
   ============================================================ */

:root {
  --ink: #18293c;          /* dark navy — headings / numbers */
  --ink-soft: #56616f;     /* muted — labels / meta */

  --green: #3aa935;
  --green-deep: #2c8a27;
  --blue: #2491e6;
  --blue-deep: #1c79c4;
  --pink: #f24e7e;

  --sky-top: #87d1fb;
  --sky-bottom: #ceeefd;

  --display: "Grandstander", system-ui, sans-serif;
  --ui: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --art-aspect: 1479 / 1064;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--sky-bottom);
  font-family: var(--ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }

/* ============================================================
   HERO STAGE
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
}

/* ------------------------------------------------------------
   CLOUDS — a full-viewport layer of drifting clouds, sitting
   BEHIND the skyline so the CN Tower always reads in front.
   Each cloud floats slowly left and loops; staggered phases keep
   the sky populated, so clouds are forever leaving and arriving.
   ------------------------------------------------------------ */
.clouds {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  animation: clouds-in 0.9s cubic-bezier(0.16, 0.84, 0.30, 1) 0.7s both;
}
.cloud {
  position: absolute;
  left: 0;
  will-change: transform;
  animation: cloud-cross linear infinite;
}
.cloud img { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(120, 160, 200, 0.12)); }
.cloud--flip img { transform: scaleX(-1); }

/* Nine clouds with evenly-spaced phases (each delay ≈ a different fraction of
   its duration) and spread heights, so the sky stays evenly populated as they
   drift — no clustering, no thin patches. */
.c1 { top: 8%;  width: clamp(150px, 21vw, 330px); animation-duration: 120s; animation-delay: 0s;     }
.c2 { top: 27%; width: clamp(110px, 15vw, 230px); animation-duration: 132s; animation-delay: -14.5s; }
.c3 { top: 3%;  width: clamp(130px, 18vw, 280px); animation-duration: 110s; animation-delay: -24.2s; }
.c4 { top: 19%; width: clamp(95px,  13vw, 200px); animation-duration: 128s; animation-delay: -42.2s; opacity: 0.92; }
.c5 { top: 34%; width: clamp(140px, 19vw, 300px); animation-duration: 115s; animation-delay: -50.6s; }
.c6 { top: 12%; width: clamp(105px, 14vw, 210px); animation-duration: 135s; animation-delay: -75.6s; }
.c7 { top: 29%; width: clamp(120px, 16vw, 250px); animation-duration: 122s; animation-delay: -81.7s; }
.c8 { top: 6%;  width: clamp(90px,  12vw, 180px); animation-duration: 130s; animation-delay: -101.4s; opacity: 0.9; }
.c9 { top: 22%; width: clamp(135px, 18vw, 275px); animation-duration: 108s; animation-delay: -96.1s; }

/* Enter just off the right edge, exit relative to the cloud's OWN width so any
   size fully clears on either side — clouds spend ~96% of the loop on-screen. */
@keyframes cloud-cross {
  from { transform: translateX(calc(100vw + 40px)); }
  to   { transform: translateX(-120%); }
}
@keyframes clouds-in {
  from { opacity: 0; transform: translateY(-6%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   ENVIRONMENT — skyline + foreground (same 1479x1064 canvas),
   anchored to the TOP so the CN Tower is never clipped.
   ------------------------------------------------------------ */
.env { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.env__layer { position: absolute; inset: 0; backface-visibility: hidden; }
.env__layer img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 0%;
}

.env__background { z-index: 1; transform-origin: 50% 74%; }
.env__foreground { z-index: 2; transform-origin: 50% 100%; }
.env__background img { object-position: 70% 20%; }
.env__foreground img { object-position: 70% 30%; }

/* ---- Pop-up-book load — no fades ---- */
.env__foreground { animation: slide-up 0.75s cubic-bezier(0.16, 0.84, 0.30, 1) 0.10s both; }
.env__background { animation: sprout   0.80s cubic-bezier(0.30, 0.85, 0.30, 1) 0.42s both; }

@keyframes sprout {
  0%   { transform: translateY(28%) scaleY(0); }
  45%  { transform: translateY(0)   scaleY(1.12); }
  66%  { transform: translateY(0)   scaleY(0.94); }
  84%  { transform: translateY(0)   scaleY(1.04); }
  94%  { transform: translateY(0)   scaleY(0.99); }
  100% { transform: translateY(0)   scaleY(1); }
}
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .env__layer { animation: none; transform: none; }
  .clouds { animation: none; opacity: 1; }
  .cloud { animation-play-state: paused; }   /* freeze at their resting spots */
}

/* On smaller screens drop the scene into the lower portion so the open upper
   sky carries the card; enlarge the foreground so it still hides the skyline's
   transparent base. */
@media (max-width: 860px) {
  .env { top: 40%; }
  .env__foreground img { transform: scale(1.14); transform-origin: 50% 100%; }
}

/* Soft light wash so the masthead reads cleanly over the sky. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(135% 115% at 6% 26%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(247, 251, 255, 0.4) 0%, rgba(247, 251, 255, 0) 30%);
}

/* ============================================================
   OVERLAY
   ============================================================ */
.hero__overlay {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  position: relative;
  z-index: 11;
  min-height: 86svh;
  padding: clamp(5.5rem, 9vw, 8.5rem) clamp(1.3rem, 4.5vw, 3.2rem) clamp(4.5rem, 8vw, 7.5rem);
  background:
    radial-gradient(circle at 12% 18%, rgba(58, 169, 53, 0.07), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(36, 145, 230, 0.07), transparent 30%),
    #fffdf7;
  color: var(--ink);
}
.about::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;
  height: 32px;
  background: #fffdf7;
  clip-path: polygon(
    0 58%, 2% 34%, 4% 52%, 6% 21%, 8% 47%, 10% 29%,
    12% 56%, 14% 25%, 16% 43%, 18% 18%, 20% 49%, 22% 31%,
    24% 60%, 26% 26%, 28% 45%, 30% 20%, 32% 52%, 34% 30%,
    36% 57%, 38% 24%, 40% 46%, 42% 16%, 44% 50%, 46% 28%,
    48% 59%, 50% 23%, 52% 44%, 54% 19%, 56% 53%, 58% 32%,
    60% 61%, 62% 26%, 64% 47%, 66% 21%, 68% 55%, 70% 30%,
    72% 58%, 74% 24%, 76% 43%, 78% 17%, 80% 51%, 82% 28%,
    84% 60%, 86% 25%, 88% 46%, 90% 20%, 92% 54%, 94% 31%,
    96% 57%, 98% 27%, 100% 49%, 100% 100%, 0 100%
  );
  filter: drop-shadow(0 -3px 2px rgba(24, 41, 60, 0.12));
  pointer-events: none;
}
.about::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  z-index: 4;
  height: 32px;
  background: #fffdf7;
  clip-path: polygon(
    0 0, 100% 0, 100% 49%, 98% 27%, 96% 57%, 94% 31%,
    92% 54%, 90% 20%, 88% 46%, 86% 25%, 84% 60%, 82% 28%,
    80% 51%, 78% 17%, 76% 43%, 74% 24%, 72% 58%, 70% 30%,
    68% 55%, 66% 21%, 64% 47%, 62% 26%, 60% 61%, 58% 32%,
    56% 53%, 54% 19%, 52% 44%, 50% 23%, 48% 59%, 46% 28%,
    44% 50%, 42% 16%, 40% 46%, 38% 24%, 36% 57%, 34% 30%,
    32% 52%, 30% 20%, 28% 45%, 26% 26%, 24% 60%, 22% 31%,
    20% 49%, 18% 18%, 16% 43%, 14% 25%, 12% 56%, 10% 29%,
    8% 47%, 6% 21%, 4% 52%, 2% 34%, 0 58%
  );
  filter: drop-shadow(0 3px 2px rgba(24, 41, 60, 0.12));
  pointer-events: none;
}
.about__inner {
  width: min(100%, 1160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(290px, 0.78fr);
  align-items: center;
  gap: clamp(3.5rem, 9vw, 8rem);
}
.about__copy { max-width: 680px; }
.about h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.2rem, 6.8vw, 6.25rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.about h2 span {
  color: var(--green);
  text-shadow: 0 3px 0 rgba(44, 138, 39, 0.08);
}
.about__mission {
  margin: clamp(1.7rem, 3vw, 2.4rem) 0 0;
  max-width: 48ch;
  font-size: clamp(1.18rem, 2.15vw, 1.55rem);
  line-height: 1.52;
  font-weight: 400;
  color: var(--ink);
}

/* A real photo set into a tactile, slightly imperfect Polaroid. */
.polaroid-wrap {
  width: min(100%, 410px);
  justify-self: center;
  transform: perspective(1100px) translate3d(125%, 34px, 0) rotateZ(12deg) rotateY(-24deg) skewY(-2.5deg);
  transform-origin: 100% 50%;
  will-change: transform;
}
.polaroid-wrap.is-visible {
  animation: polaroid-sweep-in 1.25s cubic-bezier(0.16, 0.82, 0.22, 1) both;
}
@keyframes polaroid-sweep-in {
  0% {
    transform: perspective(1100px) translate3d(125%, 34px, 0) rotateZ(12deg) rotateY(-24deg) skewY(-2.5deg) scaleX(0.96);
  }
  38% {
    transform: perspective(1100px) translate3d(-7%, -8px, 28px) rotateZ(-2.5deg) rotateY(13deg) rotateX(-4deg) skewY(1.2deg) scaleX(0.985);
  }
  58% {
    transform: perspective(1100px) translate3d(4%, 3px, 12px) rotateZ(3deg) rotateY(-8deg) rotateX(2deg) skewY(-0.7deg) scaleX(1.01);
  }
  76% {
    transform: perspective(1100px) translate3d(-1.5%, -2px, 4px) rotateZ(-1deg) rotateY(3deg) rotateX(-1deg) skewY(0.2deg);
  }
  100% {
    transform: perspective(1100px) translate3d(0, 0, 0) rotateZ(0) rotateY(0) rotateX(0) skewY(0) scaleX(1);
  }
}
.polaroid {
  position: relative;
  margin: 0;
  padding: clamp(12px, 2vw, 18px) clamp(12px, 2vw, 18px) clamp(54px, 7vw, 72px);
  background: #fdfcf8;
  border: 1px solid rgba(67, 59, 45, 0.12);
  box-shadow:
    0 3px 4px rgba(24, 30, 35, 0.14),
    0 22px 42px rgba(24, 30, 35, 0.24),
    inset 0 0 24px rgba(128, 111, 77, 0.05);
  transform: rotate(4deg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.polaroid:hover {
  transform: translateY(-5px) rotate(1.5deg);
  box-shadow: 0 5px 6px rgba(24, 30, 35, 0.12), 0 28px 52px rgba(24, 30, 35, 0.28);
}
.polaroid::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -16px;
  left: 50%;
  width: 34%;
  height: 40px;
  background: rgba(235, 220, 177, 0.72);
  border-left: 1px solid rgba(160, 137, 91, 0.18);
  border-right: 1px solid rgba(160, 137, 91, 0.18);
  box-shadow: 0 2px 3px rgba(70, 57, 34, 0.08);
  transform: translateX(-50%) rotate(-2deg);
}
.polaroid__glare {
  position: absolute;
  z-index: 3;
  top: clamp(12px, 2vw, 18px);
  right: clamp(12px, 2vw, 18px);
  bottom: clamp(54px, 7vw, 72px);
  left: clamp(12px, 2vw, 18px);
  overflow: hidden;
  pointer-events: none;
}
.polaroid__glare::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.1) 70%, transparent 100%);
  transform: translateX(-190%) skewX(-14deg);
}
.polaroid-wrap.is-visible .polaroid__glare::before {
  animation: polaroid-shimmer 1.05s ease-out 0.18s both;
}
.polaroid-wrap.is-visible .polaroid::before {
  animation: tape-settle 0.85s cubic-bezier(0.22, 0.86, 0.3, 1) 0.18s both;
}
@keyframes polaroid-shimmer {
  0%, 28% { transform: translateX(-190%) skewX(-14deg); }
  100% { transform: translateX(410%) skewX(-14deg); }
}
@keyframes tape-settle {
  0% { transform: translateX(-50%) rotate(-8deg) scaleY(0.86); }
  52% { transform: translateX(-50%) rotate(2deg) scaleY(1.04); }
  100% { transform: translateX(-50%) rotate(-2deg) scaleY(1); }
}
.polaroid__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 43%;
  border: 1px solid rgba(25, 31, 36, 0.18);
  filter: saturate(0.94) contrast(1.03);
}
.polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14px, 2.3vw, 22px);
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  color: #283545;
  transform: rotate(-1.5deg);
}

@media (max-width: 820px) {
  .about { padding-top: 5.5rem; }
  .about__inner { grid-template-columns: 1fr; }
  .about__copy { max-width: 680px; }
  .polaroid-wrap {
    width: min(88%, 390px);
    transform: perspective(900px) translate3d(120%, 24px, 0) rotateZ(10deg) rotateY(-20deg) skewY(-2deg);
  }
}

@media (max-width: 520px) {
  .about h2 { font-size: clamp(3rem, 15vw, 4.35rem); }
  .about__mission { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .polaroid-wrap,
  .polaroid-wrap.is-visible { transform: none; animation: none; }
  .polaroid { transition: none; }
  .polaroid-wrap.is-visible .polaroid__glare::before,
  .polaroid-wrap.is-visible .polaroid::before { animation: none; }
}

/* ============================================================
   CHARITY
   ============================================================ */
.charity {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 8.5vw, 7.25rem) clamp(1.3rem, 4.5vw, 3.2rem);
  background:
    radial-gradient(circle at 8% 15%, rgba(255, 188, 37, 0.22), transparent 26%),
    radial-gradient(circle at 92% 88%, rgba(255, 255, 255, 0.12), transparent 25%),
    #5520e8;
  color: #fff;
}
.charity__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1160px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}
.charity__visual {
  position: relative;
  min-height: clamp(210px, 28vw, 320px);
  display: grid;
  place-items: center;
}
.charity__visual img {
  position: relative;
  z-index: 2;
  width: min(100%, 380px);
  height: auto;
  filter: drop-shadow(0 22px 24px rgba(22, 6, 80, 0.3));
  transform: rotate(-2.5deg);
  transition: transform 0.28s ease;
}
.charity__visual:hover img { transform: translateY(-5px) rotate(0deg); }
.charity__sun {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #ffbc25;
}
.charity__sun--one {
  width: clamp(120px, 20vw, 230px);
  height: clamp(120px, 20vw, 230px);
  top: 0;
  left: -5%;
  opacity: 0.2;
}
.charity__sun--two {
  width: clamp(70px, 11vw, 130px);
  height: clamp(70px, 11vw, 130px);
  right: 4%;
  bottom: 2%;
  border: clamp(14px, 2vw, 24px) solid #ffbc25;
  background: transparent;
  opacity: 0.32;
}
.charity__copy { max-width: 650px; }
.charity__eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffca4f;
}
.charity h2 {
  margin: 0;
  max-width: 14ch;
  font-family: var(--display);
  font-size: clamp(2.35rem, 4.5vw, 4.25rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.charity__copy > p:not(.charity__eyebrow) {
  margin: 1rem 0 0;
  max-width: 58ch;
  font-size: clamp(0.98rem, 1.45vw, 1.1rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.82);
}
.charity__copy strong { color: #fff; font-weight: 900; }
.charity__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.35rem;
  padding-bottom: 0.28rem;
  border-bottom: 2px solid #ffbc25;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: #fff;
  text-decoration: none;
  transition: gap 0.18s ease, color 0.18s ease;
}
.charity__link:hover { gap: 0.9rem; color: #ffdc83; }

@media (max-width: 820px) {
  .charity__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .charity__visual { min-height: 210px; }
  .charity__visual img { width: min(82%, 350px); }
  .charity__copy { max-width: 680px; }
}

.contact__eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  position: relative;
  overflow: hidden;
  padding: clamp(5.5rem, 9.5vw, 8rem) clamp(1.3rem, 4.5vw, 3.2rem) clamp(11rem, 17vw, 14rem);
  background:
    radial-gradient(circle at 9% 20%, rgba(58, 169, 53, 0.13), transparent 28%),
    radial-gradient(circle at 92% 0%, rgba(36, 145, 230, 0.16), transparent 32%),
    linear-gradient(180deg, #f7fcff 0%, #eaf8ff 100%);
  color: var(--ink);
}
.contact::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: clamp(210px, 25vw, 330px);
  background: url("assets/footer-meadow.png") center bottom / 100% auto no-repeat;
  pointer-events: none;
}
.contact__inner {
  position: relative;
  z-index: 3;
  width: min(100%, 1100px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(3rem, 8vw, 7rem);
}
.contact__copy { max-width: 610px; }
.contact__eyebrow { color: var(--green-deep); }
.contact h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.contact__copy > p:last-child {
  margin: 1.25rem 0 0;
  max-width: 54ch;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
.contact__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.contact__primary {
  justify-content: center;
  padding: 0.9em 1.5em 0.78em;
  font-size: 1.08rem;
}
.contact__secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(24, 41, 60, 0.32);
  transition: gap 0.18s ease, border-color 0.18s ease;
}
.contact__secondary:hover { gap: 0.72rem; border-color: var(--ink); }

@media (max-width: 820px) {
  .contact__inner { align-items: flex-start; flex-direction: column; }
  .contact__actions { align-items: flex-start; }
  .contact::after { height: 220px; background-size: auto 220px; }
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.masthead {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(1.1rem, 2.6vw, 1.8rem) clamp(1.3rem, 4.5vw, 3.2rem);
}

/* street-sign logo */
.brand { display: inline-block; line-height: 0; text-decoration: none; }
.brand img {
  display: block;
  height: clamp(94px, 9vw, 110px);
  width: auto;
  filter: drop-shadow(0 3px 5px rgba(20, 60, 15, 0.16));
  transition: transform 0.18s ease;
}
.brand:hover img { transform: translateY(-2px); }

/* nav */
.masthead__nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.1rem); }
.masthead__nav > a:not(.btn) {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.masthead__nav > a:not(.btn):hover { color: var(--green); transform: translateY(-1px); }
.nav__cta { margin-left: 0.4rem; }

/* hamburger */
.menu-btn {
  display: none;
  flex-direction: column; align-items: stretch; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 11px;
  background: #fff;
  border: 3px solid var(--blue);
  border-radius: 13px; cursor: pointer;
  box-shadow: 0 4px 0 rgba(28, 121, 196, 0.25);
  -webkit-appearance: none;
  appearance: none;
}
.menu-btn span {
  display: block;
  flex: 0 0 3px;
  width: 100%;
  min-width: 20px;
  min-height: 3px;
  background-color: #2491e6;
  background-color: var(--blue);
  border-radius: 999px;
  transform-origin: center;
  transition: transform 0.24s ease, opacity 0.18s ease;
}
.menu-btn.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { opacity: 0; }
.menu-btn.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  transition: transform 0.13s ease, box-shadow 0.13s ease, filter 0.13s ease;
}
.btn--join { background: var(--blue); box-shadow: 0 5px 0 var(--blue-deep), 0 14px 20px rgba(36, 145, 230, 0.32); }
.btn--join:hover { transform: translateY(-2px); filter: brightness(1.03); box-shadow: 0 7px 0 var(--blue-deep), 0 18px 24px rgba(36, 145, 230, 0.4); }
.btn--join:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--blue-deep), 0 6px 10px rgba(36, 145, 230, 0.3); }
.btn--sm { font-size: 0.92rem; padding: 0.62em 1.2em 0.54em; }

/* ============================================================
   HERO — EVENT CARD
   ============================================================ */
.stage {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 clamp(1.3rem, 4.5vw, 3.2rem) clamp(2rem, 6vh, 4rem);
  min-width: 0;
}
.stage__inner { width: 100%; max-width: 33rem; min-width: 0; transform: translateY(-3vh); }  /* nudge the card up a bit */

.card-kicker {
  margin: 0 0 1.1rem;
  max-width: 15ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  line-height: 1.05;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ecard {
  position: relative;        /* anchors + occludes the peeker hiding behind it */
  width: min(100%, 25.5rem);
  padding: 22px 22px 20px;
  background: #ffffff;        /* opaque so the hidden peeker is fully covered */
  border: 1px solid rgba(24, 41, 60, 0.08);
  border-radius: 24px;
  box-shadow: 0 26px 58px rgba(24, 41, 60, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--ink);
}

/* ---- the shy little seeker peeking out from behind the card ---- */
.peeker {
  position: absolute;
  z-index: -1;               /* behind the opaque card — only what pokes out shows */
  width: 76px;
  transform: translate(var(--px, 0), var(--py, 0)) rotate(var(--rot, 0deg)) scaleX(var(--sx, 1));
  transition: transform 0.42s ease-in;          /* duck back quickly */
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 3px 4px rgba(20, 35, 25, 0.3));
}
.peeker.is-out { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }  /* pop out */
.peeker svg { width: 100%; height: auto; display: block; }
@media (max-width: 560px) { .peeker { width: 64px; } }
@media (prefers-reduced-motion: reduce) { .peeker { display: none; } }
.ecard__head { margin-bottom: 13px; }
.ecard__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-deep);
  background: rgba(58, 169, 53, 0.12);
  padding: 0.42em 0.78em; border-radius: 999px;
}
.ecard__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(58, 169, 53, 0.22); } 50% { box-shadow: 0 0 0 6px rgba(58, 169, 53, 0); } }

.ecard__title {
  margin: 0 0 11px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.0;
  color: var(--ink);
  display: flex; flex-direction: column;
}
.ecard__title-sub {
  margin-top: 0.55em;
  font-family: var(--ui);
  font-size: 0.42em; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green-deep);
}
.ecard__blurb {
  margin: 0 0 16px;
  font-size: 0.94rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink-soft);
}

.ecard__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ecard__meta li { display: flex; align-items: center; gap: 12px; }
.ecard__ico {
  flex: 0 0 40px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #eef2f7; border-radius: 12px; color: var(--ink);
}
.ecard__ico svg { width: 21px; height: 21px; }
.ecard__rows { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.ecard__rows b { font-weight: 800; font-size: 1.02rem; }
.ecard__rows small { font-size: 0.82rem; color: var(--ink-soft); }

.ecard__rule { height: 1px; background: rgba(24, 41, 60, 0.1); margin: 17px 0; }

.ecard__people { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; }
.avatars { display: flex; }
.avatars span {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--a, #ccc);
  border: 2.5px solid #fff; margin-left: -9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.avatars span:first-child { margin-left: 0; }
.ecard__going { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); }
.ecard__going b { font-weight: 800; color: var(--ink); }

.ecard__cta { width: 100%; justify-content: center; font-size: clamp(1.05rem, 1.3vw, 1.18rem); padding: 0.9em 1.4em 0.8em; }
.ecard__note {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  margin: 13px 0 0; font-size: 0.83rem; font-weight: 700; color: var(--ink-soft);
}
.ecard__note svg { width: 15px; height: 15px; color: var(--pink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* scale the card up to fill the open space on larger screens */
@media (min-width: 1024px) {
  .ecard { width: 28rem; padding: 26px 26px 24px; }
  .ecard__head { margin-bottom: 15px; }
  .ecard__ico { flex-basis: 44px; width: 44px; height: 44px; }
  .ecard__ico svg { width: 23px; height: 23px; }
  .avatars span { width: 34px; height: 34px; }
}
@media (min-width: 1280px) {
  .ecard { width: 30rem; }
  .stage__inner { max-width: 36rem; }
}

/* Collapse the nav into a sticker dropdown panel. */
@media (max-width: 940px) {
  .menu-btn { display: inline-flex; }
  .masthead__nav {
    position: absolute;
    top: calc(100% - 0.3rem);
    right: clamp(1.3rem, 4.5vw, 3.2rem);
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: min(74vw, 250px);
    padding: 0.85rem;
    background: #fff;
    border: 3px solid var(--blue);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(24, 41, 60, 0.2);
    transform-origin: top right;
    transform: translateY(-6px) scale(0.97);
    opacity: 0; pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .masthead__nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .masthead__nav > a:not(.btn) { padding: 0.6em 0.5em; border-radius: 9px; font-size: 0.95rem; }
  .masthead__nav > a:not(.btn):hover { background: #eef6ff; transform: none; }
  .nav__cta { margin-left: 0; margin-top: 0.4rem; justify-content: center; }
}

/* Keep the card in the open upper sky once the scene drops down. */
@media (max-width: 860px) {
  .stage { align-items: flex-start; padding-top: clamp(1.4rem, 5vh, 2.6rem); }
  .stage__inner { max-width: 100%; }
}

/* Phones: compact the card so it's lighter, and drop the scene further so the
   CN Tower clears the bottom of the card instead of being hidden behind it. */
@media (max-width: 560px) {
  .env { top: 53%; }   /* nudge the skyline + hill down a smidge on phones */

  /* The mobile sky is the whole upper half, so spread the clouds down its full
     height — a few above the card, the rest in the open band below it around the
     tower — instead of bunching them in a thin strip at the very top. */
  .c1 { top: 13%; } .c2 { top: 50%; } .c3 { top: 2%; }
  .c4 { top: 31%; } .c5 { top: 58%; } .c6 { top: 21%; }
  .c7 { top: 54%; } .c8 { top: 8%; }  .c9 { top: 45%; }

  .ecard { width: 100%; padding: 16px 16px 14px; }
  .ecard__head { margin-bottom: 10px; }
  .ecard__title { font-size: 1.65rem; margin-bottom: 13px; }
  .ecard__meta { gap: 10px; }
  .ecard__ico { flex-basis: 34px; width: 34px; height: 34px; border-radius: 9px; }
  .ecard__ico svg { width: 18px; height: 18px; }
  .ecard__rows b { font-size: 0.98rem; }
  .ecard__rule { margin: 13px 0; }
  .ecard__people { margin-bottom: 13px; }
  .avatars span { width: 27px; height: 27px; }
  .ecard__cta { font-size: 1rem; padding: 0.82em 1.2em 0.74em; }
  .ecard__note { font-size: 0.8rem; margin-top: 11px; }
}