:root {
      --bg: #05040a;
      --surface: rgba(9, 9, 18, 0.75);
      --surface-strong: rgba(18, 18, 32, 0.95);
      --fg: #f2f3f7;
      --muted: rgba(242, 243, 247, 0.72);
      --accent: #ffd36b;
      --accent-strong: #ff9f6b;
      --border: rgba(255, 255, 255, 0.12);
      --border-strong: rgba(255, 255, 255, 0.2);
      --shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
      --radius-lg: 28px;
      --radius-md: 20px;
      --max-width: min(1200px, 92vw);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    html,
    body {
      margin: 0;
      font-family: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
      background: var(--bg);
      color: var(--fg);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      text-decoration: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: var(--fg);
    }

    img {
      max-width: 100%;
      display: block;
    }

    section {
      padding: clamp(72px, 12vw, 136px) 0;
      position: relative;
    }

    html {
      scroll-behavior: smooth;
    }

    .wrap {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }

    .page {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .site-nav {
      position: absolute;
      top: 32px;
      inset-inline: 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      z-index: 4;
      mix-blend-mode: screen;
    }

    .site-nav__menu-toggle {
      display: none;
      background: rgba(12, 10, 20, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 10px 14px;
      color: var(--fg);
      cursor: pointer;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .site-nav__mobile-sheet {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5, 4, 10, 0.95);
      backdrop-filter: blur(14px);
      z-index: 10;
      padding: 24px;
    }

    .site-nav__mobile-sheet.is-open {
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .site-nav__mobile-sheet a {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      width: 100%;
    }

    .site-nav__menu-toggle {
      display: none;
      background: rgba(12, 10, 20, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 10px 14px;
      color: var(--fg);
      cursor: pointer;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .site-nav__mobile-sheet {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5, 4, 10, 0.95);
      backdrop-filter: blur(14px);
      z-index: 10;
      padding: 24px;
    }

    .site-nav__mobile-sheet.is-open {
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .site-nav__mobile-sheet a {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      width: 100%;
    }

    .site-nav__menu-toggle {
      display: none;
      background: rgba(12, 10, 20, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 10px 14px;
      color: var(--fg);
      cursor: pointer;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    .site-nav__mobile-sheet {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(5, 4, 10, 0.95);
      backdrop-filter: blur(14px);
      z-index: 10;
      padding: 24px;
    }

    .site-nav__mobile-sheet.is-open {
      display: flex;
      flex-direction: column;
      gap: 18px;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .site-nav__mobile-sheet a {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.06em;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      width: 100%;
    }

    .site-nav.is-fixed {
      position: fixed;
      top: 0;
      padding: 12px 0;
      background: rgba(5, 4, 10, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      mix-blend-mode: normal;
      z-index: 9;
    }

    .site-nav__logo {
      display: flex;
      align-items: center;
      margin: 0 auto;
      gap: 12px;
      padding: 12px 18px;
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(18px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    }

    .site-nav__logo img {
      width: clamp(140px, 20vw, 200px);
      height: auto;
      filter: brightness(0) invert(1);
    }

    .site-nav__links {
      display: flex;
      gap: clamp(10px, 1.6vw, 20px);
      align-items: center;
      font-size: 15px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .site-nav__links a {
      padding: 6px 0;
      border-radius: 0;
      background: transparent;
      border: none;
      backdrop-filter: none;
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .site-nav__links a:hover {
      color: var(--accent);
      transform: translateY(-2px);
    }

    .site-nav__links--left {
      justify-content: flex-start;
    }

    .site-nav__links--right {
      justify-content: flex-end;
      gap: clamp(10px, 1.6vw, 12px);
    }

    .ticket.ticket-btn {
      display: inline-flex;
      align-items: center;
      gap: 0;
      padding: 0 6px;
      color: #08070c;
      background: transparent;
      border: none;
      box-shadow: 0 18px 46px rgba(255, 168, 80, 0.35);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .ticket-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 24px 64px rgba(255, 168, 80, 0.45);
    }

    .ticket-btn .ticket-label {
      padding: 3px 10px;
      background: #ff9f6b;
    }

    .ticket-btn .ticket-end.left {
      margin-right: -1px;
    }
    .ticket-btn .ticket-end.right {
      margin-left: -1px;
    }
    .ticket-btn .ticket-end {
      display: flex;
      align-items: center;
      color: #ff9f6b;
    }

    .splash {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        linear-gradient(180deg, rgba(5, 4, 10, 0.78), rgba(5, 4, 10, 0.94)),
        radial-gradient(circle at 40% 30%, rgba(255, 211, 107, 0.24), rgba(5, 4, 10, 0.96)),
        url("/assets/responsive/fym/afterglow-find-your-magic-bangkok-12-768.webp") center / cover no-repeat;
      color: var(--fg);
      z-index: 1001;
      transition: opacity 0.6s ease, visibility 0.6s ease;
    }

    .splash__text {
      font-size: clamp(36px, 11vw, 82px);
      letter-spacing: 0.22em;
      text-transform: uppercase;
      text-align: center;
      font-weight: 700;
      position: relative;
      overflow: hidden;
    }

    .splash__text-inner {
      display: inline-block;
      clip-path: inset(0 0 0 100%);
      animation:
        splash-reveal 0.3s ease-out forwards 1s,
        splash-hold 2s linear forwards 1.3s,
        splash-fade 0.4s ease-out forwards 3.3s;
      animation-play-state: paused;
      transform: translateX(-20px);
    }

    .splash.is-ready .splash__text-inner {
      animation-play-state: running;
    }

    @keyframes splash-reveal {
      0% { clip-path: inset(0 0 0 100%); opacity: 0; transform: translateX(-20px); }
      20% { opacity: 1; }
      100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); }
    }

    @keyframes splash-hold {
      0% { opacity: 1; transform: translateX(0); }
      100% { opacity: 1; transform: translateX(0); }
    }

    @keyframes splash-fade {
      0% { opacity: 1; transform: translateX(0); }
      100% { opacity: 0; transform: translateX(10px); }
    }

    .splash.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .image-load-indicator {
      position: fixed;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 1002;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .image-load-indicator.is-active {
      opacity: 1;
    }

    .image-load-indicator__bar {
      display: block;
      width: 30%;
      height: 100%;
      background: linear-gradient(90deg, rgba(255, 211, 107, 0.28), rgba(255, 159, 107, 0.95), rgba(255, 211, 107, 0.28));
      animation: image-load-sweep 1.15s linear infinite;
      box-shadow: 0 0 14px rgba(255, 159, 107, 0.42);
    }

    @keyframes image-load-sweep {
      0% { transform: translateX(-130%); }
      100% { transform: translateX(430%); }
    }

    .image-shell {
      position: relative;
      overflow: hidden;
    }

    .image-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, rgba(255, 255, 255, 0.06), rgba(255, 211, 107, 0.14), rgba(255, 255, 255, 0.05));
      opacity: 0;
      pointer-events: none;
      z-index: 2;
      transition: opacity 0.24s ease;
    }

    .image-shell.is-loading::before {
      opacity: 1;
      animation: image-shell-shimmer 1.4s linear infinite;
    }

    .image-shell img {
      transition: opacity 0.35s ease, filter 0.35s ease;
    }

    .image-shell.is-loading img {
      opacity: 0.42;
      filter: blur(3px) saturate(0.8);
    }

    .image-shell.is-loaded img {
      opacity: 1;
      filter: none;
    }

    @keyframes image-shell-shimmer {
      0% { transform: translateX(-25%); }
      100% { transform: translateX(25%); }
    }

    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      overflow: hidden;
    }

    .hero__media {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(16, 9, 28, 0.35), rgba(5, 4, 10, 0.9)),
        url("/assets/responsive/fym/afterglow-find-your-magic-bangkok-12-1024.webp") center / cover no-repeat;
      z-index: 1;
      transform: scale(1.02);
      mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    }

    .hero__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(5, 4, 10, 0.2) 0%, rgba(5, 4, 10, 0.92) 60%);
    }

    .hero__photos {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .hero__photo {
      position: absolute;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      background: #0b0a12;
      transform-origin: center;
      transition: transform 0.6s ease, filter 0.6s ease;
    }

    .hero__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.05);
    }

    .hero__photo--one {
      width: clamp(180px, 22vw, 240px);
      aspect-ratio: 4 / 5;
      top: 14%;
      left: max(8vw, 28px);
      transform: rotate(-4deg);
    }

    .hero__photo--two {
      width: clamp(220px, 26vw, 280px);
      aspect-ratio: 3 / 4;
      bottom: 10%;
      left: 12%;
      transform: rotate(3deg);
    }

    .hero__photo--three {
      width: clamp(210px, 26vw, 280px);
      aspect-ratio: 1 / 1;
      top: 16%;
      right: 12%;
      transform: rotate(6deg);
    }

    .hero:hover .hero__photo {
      transform: translateY(-4px) scale(1.02);
      filter: saturate(1.12);
    }

    .hero__content {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 32px;
      padding: clamp(120px, 18vw, 240px) 0 clamp(80px, 12vw, 140px);
      max-width: min(620px, 90vw);
    }

    .hero__eyebrow {
      font-size: 14px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.75);
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .hero__eyebrow::before,
    .hero__eyebrow::after {
      content: "";
      width: 42px;
      height: 1px;
      background: rgba(255, 255, 255, 0.45);
    }

    .hero__headline {
      font-size: clamp(42px, 7vw, 74px);
      line-height: 1.05;
      font-weight: 600;
      max-width: min(760px, 90vw);
      text-shadow: 0 12px 42px rgba(0, 0, 0, 0.55);
    }

    .hero__description {
      max-width: min(560px, 90vw);
      font-size: 18px;
      line-height: 1.7;
      color: var(--muted);
      text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    }

    .hero__buttons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      padding: 10px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(12, 10, 20, 0.8);
      color: var(--fg);
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      box-shadow: 0 14px 44px rgba(0, 0, 0, 0.25);
    }

    .button:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.3);
      background: rgba(24, 20, 38, 0.9);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    }

    .button.is-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-strong));
      color: #08070c;
      border: none;
      box-shadow: 0 18px 48px rgba(255, 168, 80, 0.35);
    }

    .button.is-primary:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 32px 70px rgba(255, 168, 80, 0.45);
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(5, 4, 10, 0.78);
      backdrop-filter: blur(10px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 12;
    }

    .modal.is-open {
      display: flex;
    }

    .modal__dialog {
      width: min(420px, 92vw);
      background: var(--surface-strong);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 28px;
      display: grid;
      gap: 16px;
      text-align: center;
    }

    .modal__title {
      margin: 0;
      font-size: 22px;
      letter-spacing: 0.04em;
    }

    .modal__body {
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }

    .modal__actions {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .modal__close {
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-weight: 600;
      letter-spacing: 0.06em;
    }

    .section-heading {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: clamp(32px, 6vw, 58px);
    }

    .section-heading__eyebrow {
      letter-spacing: 0.24em;
      text-transform: uppercase;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
    }

    .section-heading__title {
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 600;
      margin: 0;
    }

    .section-heading__lede {
      max-width: 640px;
      font-size: 18px;
      line-height: 1.7;
      color: var(--muted);
    }

    .story {
      /* background: radial-gradient(circle at top right, rgba(255, 211, 107, 0.08), transparent 45%); */
    }

    .story__grid {
      display: grid;
      gap: clamp(32px, 8vw, 64px);
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

    .story__text {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .story__copy {
      font-size: 18px;
      line-height: 1.8;
      color: var(--muted);
    }

    .story__gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .story__image {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      min-height: 180px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: var(--shadow);
      /* background: linear-gradient(145deg, rgba(82, 63, 177, 0.45), rgba(255, 111, 145, 0.35)); */
    }

    .story__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .story__image--feature {
      grid-column: 1 / -1;
      min-height: 320px;
    }

    .story__image--quote {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: flex-end;
      padding: 24px;
      background: linear-gradient(140deg, rgba(255, 211, 107, 0.92), rgba(255, 159, 107, 0.72));
      color: #120d1f;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 20px;
    }

    .story__image--quote span {
      font-size: 14px;
      font-weight: 500;
      text-transform: none;
      letter-spacing: normal;
    }

    .story__cta {
      display: inline-flex;
    }

    .feature-video {
      background: radial-gradient(circle at center, rgba(92, 80, 220, 0.2), transparent 55%);
      display: none;
    }

    .video-wrapper {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 16 / 9;
      border: 1px solid var(--border-strong);
      box-shadow: var(--shadow);
      background: rgba(0, 0, 0, 0.65);
    }

    .video-wrapper iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    #events {
      z-index: 1000;
    }

    .events-showcase {
      display: grid;
      gap: clamp(32px, 6vw, 52px);
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: center;
      position: relative;
    }

    .events-showcase > .section-heading,
    .events-showcase__visuals {
      position: relative;
      z-index: 2;
    }

    .events-showcase__visuals {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 18px;
    }

    .events-floating {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    .events-floating__photo {
      position: absolute;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
      width: clamp(120px, 18vw, 180px);
      aspect-ratio: 5 / 6;
      background: #0b0a12;
    }

    .events-floating__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.05);
    }

    .events-floating__photo--left {
      top: -48px;
      left: -14%;
      transform: rotate(-3deg);
    }

    .events-floating__photo--right {
      bottom: -36px;
      right: -12%;
      transform: rotate(4deg);
    }

    .events-showcase__tile {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      min-height: 200px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: var(--shadow);
      background: linear-gradient(140deg, rgba(82, 56, 168, 0.35), rgba(255, 118, 73, 0.4));
    }

    .events-showcase__tile--caption {
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 18px;
      font-size: 20px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      line-height: 1.3;
    }

    .events-showcase__tile--caption p {
      margin: 0;
    }

    .events-showcase__tile--caption span {
      font-size: 15px;
      font-weight: 500;
      text-transform: none;
      letter-spacing: normal;
      opacity: 0.8;
    }

    .events-showcase__tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .events-calendar {
      padding-top: clamp(48px, 8vw, 72px);
    }

    .events-grid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .event-card {
      position: relative;
      padding: 28px;
      border-radius: var(--radius-md);
      background: rgba(10, 9, 22, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .event-card__date {
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .event-card__date span {
      display: block;
      font-size: 15px;
      opacity: 0.65;
      letter-spacing: normal;
      text-transform: none;
    }

    .event-card__city {
      font-size: 18px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--accent);
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .event-card__city-name {
      font-size: 14px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .event-card__event-name {
      font-size: 18px;
      letter-spacing: 0.08em;
      color: var(--fg);
      text-transform: none;
    }

    .event-card__description {
      font-size: 15px;
      line-height: 1.6;
      color: var(--muted);
      flex: 1;
    }

    .event-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .event-card__actions .button {
      flex: 1 1 120px;
      justify-content: center;
    }

    .past-galleries {
      position: relative;
    }

    .past-galleries__list {
      display: grid;
      gap: 24px;
    }

    .past-gallery-card {
      display: grid;
      grid-template-columns: clamp(220px, 30vw, 360px) minmax(0, 1fr);
      gap: 0;
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(9, 9, 18, 0.82);
      box-shadow: var(--shadow);
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .past-gallery-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 255, 255, 0.24);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
    }

    .past-gallery-card__media {
      position: relative;
      aspect-ratio: 1 / 1;
      overflow: hidden;
    }

    .past-gallery-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .past-gallery-card__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(5, 4, 10, 0.05), rgba(5, 4, 10, 0.45));
      pointer-events: none;
    }

    .past-gallery-card__content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      justify-content: center;
      padding: clamp(24px, 4vw, 40px);
      background: rgba(7, 7, 14, 0.72);
    }

    .past-gallery-card__eyebrow {
      font-size: 0.72rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.6);
    }

    .past-gallery-card__title {
      margin: 0;
      font-size: clamp(22px, 3vw, 32px);
      letter-spacing: 0.04em;
    }

    .past-gallery-card__meta {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
    }

    .community-cta {
      background: radial-gradient(circle at bottom left, rgba(255, 168, 80, 0.15), transparent 55%);
    }

    .community-grid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .community-card {
      padding: 32px;
      border-radius: var(--radius-md);
      background: rgba(10, 9, 20, 0.78);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .community-card__title {
      font-size: 20px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .community-card__lede {
      font-size: 15px;
      line-height: 1.7;
      color: var(--muted);
    }

    .community-card__input {
      display: flex;
      gap: 10px;
      background: rgba(4, 4, 12, 0.9);
      padding: 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .community-card__input input {
      flex: 1;
      border: none;
      background: transparent;
      color: var(--fg);
      padding: 0 12px;
      font-size: 15px;
      outline: none;
    }

    .community-card__input button {
      border: none;
      border-radius: 999px;
      padding: 10px 20px;
      background: linear-gradient(135deg, var(--accent), var(--accent-strong));
      color: #08070c;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .community-card__input button:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 42px rgba(255, 168, 80, 0.35);
    }

    .community-reveal {
      position: relative;
      overflow: visible;
      padding: clamp(140px, 22vw, 240px) 0 clamp(220px, 32vw, 320px);
      z-index: 3;
      min-height: 400vh;
      width: 100vw;
      margin-left: calc(-50vw + 50%);
    }

    .community-reveal__pin {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      z-index: 5;
      pointer-events: none;
    }

    .community-reveal__headline {
      position: absolute;
      top: 12vh;
      left: 50%;
      transform: translateX(-50%);
      max-width: min(900px, 92vw);
      text-align: center;
      z-index: 6;
      color: #f8f8fb;
      mix-blend-mode: difference;
      padding: 0;
      pointer-events: auto;
    }

    .community-reveal__headline h5 {
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.72);
      margin: 0 0 14px;
    }

    .community-reveal__headline h2 {
      font-size: clamp(34px, 7vw, 76px);
      line-height: 1.08;
      margin: 0 0 18px;
    }

    .community-reveal__checkpoint {
      margin: 0 auto;
      max-width: 42ch;
      color: rgba(255, 255, 255, 0.84);
      font-size: clamp(14px, 1.7vw, 18px);
      line-height: 1.55;
      text-wrap: balance;
    }

    .scroll-indicator {
      position: absolute;
      left: 8px;
      top: 12px;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.72);
      padding: 6px 10px;
      background: rgba(5, 4, 10, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      display: none;
      z-index: 7;
    }

    @media (max-width: 640px) {
      .scroll-indicator {
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
    }

    .community-reveal__cta {
      display: inline-flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      margin-top: 12px;
      mix-blend-mode: normal;
    }

    .community-reveal__cta .button {
      width: auto;
    }

    .community-reveal__stack {
      position: absolute;
      inset: 0;
      height: 220vh;
      width: 100%;
      max-width: none;
      margin: 0;
      z-index: 4;
      pointer-events: none;
    }

    .community-reveal.is-pinned .community-reveal__stack {
      position: fixed;
      inset: 0;
      height: 220vh;
    }

    .community-reveal.is-after .community-reveal__stack {
      position: absolute;
      inset: auto 0 0 0;
      height: 100vh;
    }

    .community-reveal__item {
      position: absolute;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: var(--shadow);
      background: #0b0a12;
      width: clamp(190px, 26vw, 320px);
      aspect-ratio: 4 / 5;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
      mix-blend-mode: normal;
      z-index: 7;
      filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.35));
      will-change: transform, opacity;
    }

    .community-reveal__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.05);
    }

    .community-reveal__item.pos-1 { top: 6vh; left: 8%; }
    .community-reveal__item.pos-2 { top: 18vh; right: 8%; }
    .community-reveal__item.pos-3 { top: 32vh; left: 26%; }
    .community-reveal__item.pos-4 { top: 48vh; right: 30%; }
    .community-reveal__item.pos-5 { top: 64vh; left: 1%; }
    .community-reveal__item.pos-6 { top: 68vh; right: 6%; }
    .community-reveal__item.pos-7 { top: 112vh; left: 14%; }
    .community-reveal__item.pos-8 { top: -2vh; right: 34%; }
    .community-reveal__item.pos-9 { top: 86vh; left: 36%; }
    .community-reveal__item.pos-11 { top: 26vh; left: 12%; }
    .community-reveal__item.pos-12 { top: 118vh; right: 15%; }

    @media (max-width: 880px) {
      .community-reveal__item {
        width: clamp(120px, 42vw, 180px);
        max-width: 200px;
      }

      .community-reveal__item.pos-1 { top: 8vh; left: 4%; }
      .community-reveal__item.pos-2 { top: 16vh; right: 6%; }
      .community-reveal__item.pos-3 { top: 32vh; left: 18%; }
      .community-reveal__item.pos-4 { top: 48vh; right: 22%; }
      .community-reveal__item.pos-5 { top: 64vh; left: 36%; }
      .community-reveal__item.pos-6 { top: 82vh; right: 4%; }
      .community-reveal__item.pos-7 { top: 102vh; left: 12%; }
      .community-reveal__item.pos-8 { top: 126vh; right: 26%; }
      .community-reveal__item.pos-9 { top: 150vh; left: 4%; }
      .community-reveal__item.pos-10 { top: 176vh; right: 18%; }
      .community-reveal__item.pos-11 { top: 202vh; left: 28%; }
      .community-reveal__item.pos-12 { top: 230vh; right: 6%; }
    }

    .instagram {
      background: radial-gradient(circle at 24% 12%, rgba(255, 211, 107, 0.12), transparent 40%), radial-gradient(circle at 72% 8%, rgba(255, 159, 107, 0.12), transparent 36%);
      display: none;
    }

    .community-cta {
      display: none;
    }

    .instagram-feed {
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .instagram-feed__card {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 3 / 4;
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: var(--shadow);
      isolation: isolate;
      background: #0b090f;
    }

    .instagram-feed__embed {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: #0b090f;
      box-shadow: var(--shadow);
      aspect-ratio: 3 / 4;
    }

    .instagram-feed__embed iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    .instagram-feed__embed--error {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }

    .instagram-feed__card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.05);
      transition: transform 0.45s ease, filter 0.35s ease;
    }

    .instagram-feed__card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(5, 4, 10, 0) 32%, rgba(5, 4, 10, 0.72) 100%);
      z-index: 1;
    }

    .instagram-feed__card span {
      position: absolute;
      inset: auto 14px 14px 14px;
      z-index: 2;
      font-size: 13px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.82);
    }

    .instagram-feed__card:hover img {
      transform: scale(1.04);
      filter: saturate(1.18) brightness(1.02);
    }

    .instagram__cta {
      margin-top: 32px;
      display: inline-flex;
    }

    footer {
      padding: 64px 0 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(4, 4, 10, 0.92);
      margin-top: auto;
    }

    .footer__grid {
      display: grid;
      gap: clamp(32px, 8vw, 64px);
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      align-items: start;
    }

    .footer__brand {
      display: flex;
      flex-direction: column;
      gap: 14px;
      color: var(--muted);
    }

    .footer__brand img {
      filter: brightness(0) invert(1);
    }

    .footer__links {
      display: grid;
      gap: 12px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: rgba(255, 255, 255, 0.74);
    }

    .footer__social {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .footer__legal {
      margin-top: 48px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.48);
      text-align: center;
    }

    .footer__signup {
      display: flex;
      flex-direction: column;
      gap: 14px;
      color: var(--muted);
    }

    .footer__signup form {
      display: grid;
      gap: 12px;
      padding: 0;
      background: rgba(8, 8, 16, 0.9);
      border: none;
      border-radius: var(--radius-md);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    }

    .footer__signup .input--hidden {
      display: none;
    }

    .footer__signup p {
      margin: 0;
      color: var(--fg);
      line-height: 1.6;
    }

    .footer__signup p strong {
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-size: 13px;
    }

    .footer__signup-note {
      margin: 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      line-height: 1.5;
    }

    .footer__signup label {
      font-size: 13px;
      letter-spacing: 0.04em;
      color: var(--muted);
    }

    .footer__signup input[type="text"],
    .footer__signup input[type="email"] {
      width: 100%;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(12, 10, 20, 0.8);
      color: var(--fg);
      font-size: 15px;
    }

    .footer__signup button[type="submit"] {
      border: none;
      padding: 12px 18px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--accent-strong));
      color: #08070c;
      font-weight: 700;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .footer__signup button[type="submit"]:hover {
      transform: translateY(-2px);
      box-shadow: 0 24px 64px rgba(255, 168, 80, 0.4);
    }

    .footer__signup .community-card__input {
      padding: 8px;
      background: rgba(8, 8, 16, 0.9);
    }

    .footer__signup .community-card__input button {
      padding-inline: 18px;
    }

    @media (max-width: 880px) {
      section {
        padding: clamp(56px, 14vw, 96px) 0;
      }

      .site-nav {
        position: sticky;
        top: 0;
        padding: 12px 16px;
        mix-blend-mode: normal;
        background: rgba(5, 4, 10, 0.9);
        backdrop-filter: blur(12px);
        z-index: 11;
        grid-template-columns: auto 1fr auto;
        justify-content: space-between;
        align-items: center;
        row-gap: 10px;
      }

      .site-nav__links {
        display: none;
      }

      .site-nav__menu-toggle {
        display: inline-flex;
      }

      .site-nav__logo {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        margin: 0;
        justify-content: center;
      }

      .hero__content {
        padding-top: clamp(100px, 28vw, 180px);
      }

      .story__grid,
      .events-showcase {
        grid-template-columns: 1fr;
      }

      .past-gallery-card {
        grid-template-columns: 1fr;
      }

      .story__image--feature {
        min-height: 260px;
      }

      .events-showcase__visuals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .community-reveal__headline {
        position: relative;
        top: auto;
      }
    }

    @media (max-width: 640px) {
      .hero__headline {
        font-size: clamp(36px, 9vw, 52px);
        line-height: 1.12;
      }

      .hero__photos {
        display: block;
      }
      .hero__photo {
        opacity: 0.72;
      }
      .hero__photo--one {
        width: 140px;
        top: 12%;
        left: -6%;
        transform: rotate(-3deg);
      }
      .hero__photo--two {
        width: 170px;
        bottom: 8%;
        left: 4%;
        transform: rotate(3deg);
      }
      .hero__photo--three {
        width: 150px;
        top: 10%;
        right: -8%;
        transform: rotate(6deg);
      }

      .section-heading__title {
        font-size: clamp(28px, 8vw, 44px);
      }

      .story__gallery,
      .events-showcase__visuals {
        grid-template-columns: 1fr;
      }

      .hero__buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
      }

      .hero__content {
        text-align: center;
        align-items: center;
        gap: 24px;
      }

      .community-reveal__item {
        width: clamp(110px, 38vw, 150px);
      }

      .community-reveal__item.pos-1 { top: 6vh; left: 10%; }
      .community-reveal__item.pos-2 { top: 16vh; right: 8%; }
      .community-reveal__item.pos-3 { top: 28vh; left: 18%; }
      .community-reveal__item.pos-4 { top: 40vh; right: 20%; }
      .community-reveal__item.pos-5 { top: 52vh; left: 34%; }
      .community-reveal__item.pos-6 { top: 66vh; right: 8%; }
      .community-reveal__item.pos-7 { top: 80vh; left: 14%; }
      .community-reveal__item.pos-8 { top: 94vh; right: 22%; }
      .community-reveal__item.pos-9 { top: 110vh; left: 8%; }
      .community-reveal__item.pos-10 { top: 126vh; right: 16%; }
      .community-reveal__item.pos-11 { top: 142vh; left: 22%; }
      .community-reveal__item.pos-12 { top: 158vh; right: 8%; }

      .button {
        width: 100%;
      }

      .event-card__actions .button {
        flex: 1 1 100%;
      }

      .instagram-feed {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      }
    }