/* Mission Passed brand, positioning and responsive refinements. */
.hero { background-image: url('../img/hero/hero.jpg?v=lucia-jason-v1'); }
.join__grid { background-image: url('../img/join/grid.png?v=lucia-jason-v1'); }
/* Leave the generated logo and its five stars unobscured by the existing CTA. */
.join__grid { justify-content: center; }
.join__button { position: relative; top: clamp(64px, 8.5vw, 136px); width: clamp(184px, 16vw, 238px); height: clamp(52px, 4.4vw, 64px); }
.join__button span { font-size: clamp(18px, 1.6vw, 24px); }
.hero__actions { align-self: center; width: 100%; justify-content: center; }
.hero__socail { justify-content: center; }
.footer__top-body { flex-direction: column; align-items: center; row-gap: 24px; }
.footer__top-menu, .footer__top-social { justify-content: center; }
.footer__bottom-body { justify-content: center; }
.tokenomics__content-item > span:nth-child(2):not(.pink) { font-size: clamp(22px, 2.4vw, 36px); line-height: 1.15; overflow-wrap: anywhere; }
.tokenomics__content-ca button:disabled { cursor: default; opacity: .45; }
@media (max-width: 61.99875em) {
  .hero { background-image: url('../img/mission-passed/hero-mobile.webp?v=lucia-jason-v1'); }
  .hero__title { align-self: center; width: 72%; max-width: 380px; margin-top: clamp(56px, 14vw, 76px); }
  .hero__title img { transform: none; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .hero__button { width: clamp(160px, 40vw, 220px); }
  .hero__button span { font-size: clamp(16px, 4.2vw, 21px); }
  .hero__socail { gap: 12px; }
  .hero__socail-item { width: clamp(48px, 12vw, 60px); }
  .join__button { top: 36px; }
  .join__container { padding-bottom: 24px; }
}
@media (max-width: 22rem) {
  html, body { min-width: 0; }
  .header__logo { width: 42px; min-width: 42px; flex-shrink: 0; }
  .header__right { column-gap: 10px; }
  .header__button { width: 130px; }
  .header__button span { font-size: 14px; }
  .hero__button { width: 150px; }
  .hero__actions, .hero__socail { gap: 10px; }
  .hero__socail-item { width: 46px; }
}

/* Contain Lucia inside the angled comic panel, with no white page showing. */
.about { background-color: #352342; }
.about__box { align-items: stretch; }
.about__image {
  isolation: isolate;
  width: 52%;
  height: auto;
  aspect-ratio: 1040 / 959;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 5.7%, 100% 96.2%, 0 100%);
  background: linear-gradient(180deg, rgba(244, 128, 190, .28), rgba(102, 41, 133, .16)), url('../img/join/bg.jpg') center / cover no-repeat;
}
.about__image::before, .about__image::after { z-index: 3; }
.about__image img {
  position: absolute;
  z-index: 1;
  inset: 9% 5% 0;
  display: block;
  width: 90%;
  height: 91%;
  object-fit: contain;
  object-position: center bottom;
}
@media (max-width: 61.99875em) {
  .about__image { flex: 0 0 auto; width: 100%; margin-top: 0; }
}
@media (min-width: 61.99875em) {
  .tokenomics__body { padding-right: 15px; }
  .tokenomics__image { flex: 1 1 0; min-width: 0; }
}

/* All twenty landscape artworks remain visible in a responsive photo grid. */
.artwork-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 24px); width: 100%; margin-bottom: clamp(32px, 4vw, 56px); }
.artwork-grid__item { display: block; min-width: 0; overflow: hidden; border: 3px solid #090609; border-radius: 10px; background: #24152f; box-shadow: 4px 4px 0 #090609; transition: transform .18s ease, box-shadow .18s ease; }
.artwork-grid__item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.artwork-grid__item:focus-visible { outline: 3px solid #ffda27; outline-offset: 5px; }
@media (hover: hover) {
  .artwork-grid__item:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #090609; }
}
@media (max-width: 47.99875em) {
  .artwork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stickers__button span { font-size: clamp(16px, 1.8vw, 26px); white-space: nowrap; }

/* Keep the full jagged top/bottom fringe on the $RETIRE ticker visible. */
.line {
  overflow: visible;
  z-index: 4;
  height: clamp(10.5rem, 6.15rem + 21vw, 26.5rem);
}
.line::before {
  top: -3%;
  height: 106%;
  transform: none;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
/* Keep $RETIRE glyphs inside the purple band — not clipped by the fringe. */
.line__row,
.line__item {
  overflow: visible;
}
.line__item img {
  display: block;
  width: 86%;
  height: auto;
  margin-inline: auto;
  transform: translateY(-8%) scale(0.92);
  transform-origin: center center;
}
.page__tokenomics {
  position: relative;
  z-index: 1;
  margin-top: -2.5%;
}