* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #999; }
body { font-family: 'Segoe UI', Arial, sans-serif; }

.frame {
  position: relative;
  width: 440px;
  min-height: 7620px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  color: #335772;
}

img { max-width: none; display: block; }
.abs { position: absolute; margin: 0; }
.bg { position: absolute; background-repeat: no-repeat; }

/* header */
.join-btn {
  background: #2b1d14; color: #f8ecd0; border: none; border-radius: 20.5px;
  font-family: 'Fredoka', sans-serif; font-size: 15px; letter-spacing: 1px; cursor: pointer;
}

/* marquee */
.marquee-wrap { overflow: hidden; white-space: nowrap; }
.marquee-text {
  display: inline-block; font-family: 'Fredoka', sans-serif; color: #f6ecd6; font-size: 18px;
  letter-spacing: 2px; margin: 0; animation: marquee 24s linear infinite;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* hero */
.hero-title { font-family: 'Fredoka', sans-serif; font-weight: 600; color: #f36917; font-size: 40px; line-height: 1.05; margin: 0; }

.btn-round {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  border-radius: 27.5px; font-family: 'Fredoka', sans-serif; letter-spacing: 2px; text-align: center;
}
.btn-join {
  width: 100%; background: #335772; color: #f6ecd6; font-family: 'Fredoka', sans-serif; font-size: 18px;
  letter-spacing: 2px; border: none; border-radius: 27.5px; padding: 16px; margin-top: 15px; cursor: pointer;
}

/* section heading */
.section-heading { font-family: 'Fredoka', sans-serif; font-size: 20px; color: #335772; }

.eyebrow { font-family: 'Fredoka', sans-serif; font-size: 15px; color: #335772; }
.story-title { font-family: 'Fredoka', sans-serif; font-weight: 500; color: #f36917; font-size: 28px; line-height: 1.2; margin: 0; }
.story-body { font-size: 15px; line-height: 1.5; color: #335772; }
.walkable-desc { font-family: 'Segoe UI', sans-serif; font-size: 16px; color: #335772; margin: 0; }

/* card collage */
.collage-photo { border-radius: 24px; overflow: hidden; }
.collage-photo img { width: 100%; height: 100%; object-fit: cover; }

/* history */
.history-entry { max-width: 250px; margin: 0 0 6px; }
.history-year { font-family: 'Fredoka', sans-serif; font-size: 14px; color: #335772; margin: 0 0 6px; }
.history-text { font-size: 12px; line-height: 1.5; color: #335772; margin: 0; }
.history-photo { display: block; }

/* voices */
.voices-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.voices-track { display: flex; gap: 14px; height: 100%; }
.voice-card { flex: 0 0 181px; background: #f7ecd0; border: 2px solid #000; border-radius: 21px; padding: 11px; text-align: center; }
.voice-card-inner { background: #f7ecd0; border: 2px dashed #000; border-radius: 12px; padding: 30px 10px; position: relative; }
.voice-play { position: relative; width: 48px; height: 48px; border: none; background: none; padding: 0; cursor: pointer; margin: 0 auto 10px; display: block; }
.voice-play img:first-child { width: 100%; }
.voice-play-icon { position: absolute; top: 50%; left: 50%; width: 18px; transform: translate(-50%, -50%) rotate(90deg); }
.voice-tag { display: inline-block; background: #f36917; color: #000; border: 2px solid #000; border-radius: 12px; padding: 4px 12px; font-family: 'Fredoka', sans-serif; font-size: 12px; }
.voice-name { font-family: Arial, sans-serif; font-weight: bold; font-size: 15px; color: #335772; margin: 6px 0 2px; }
.voice-time { font-family: Arial, sans-serif; font-size: 15px; color: #335772; margin: 0; }
.voice-card.playing .voice-play { outline: 3px solid #f36917; border-radius: 50%; }

/* activation zone / floor map */
.station-title { font-family: 'Fredoka', sans-serif; color: #f56818; font-size: 14px; margin: 0; }
.station-desc { font-family: Arial, sans-serif; color: #986f52; font-size: 14px; margin: 0; }
.station-plus { font-family: Arial, sans-serif; font-size: 14px; color: #000; }

/* film */
.film-badge { border: 2px solid #000; border-radius: 17px; padding: 6px 16px; font-family: 'Fredoka', sans-serif; font-size: 13px; color: #f7ecd0; }
.film-play { border: none; background: none; cursor: pointer; padding: 0; width: 70px; height: 70px; position: relative; }
.film-play img:first-child { width: 100%; }
.film-play-icon { position: absolute; top: 50%; left: 50%; width: 22px; transform: translate(-50%, -50%) rotate(90deg); }
.film-btn { border: 2px solid #000; border-radius: 17px; padding: 8px 0; font-family: 'Fredoka', sans-serif; font-size: 13px; color: #f7ecd0; cursor: pointer; height: 32px; }

/* merch */
.merch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.merch-item { height: 185px; background: #faf3e3; border: 2px solid #000; border-radius: 21px; }

/* join / rsvp */
.join-block { background: #e8611c; color: #f7ecd0; padding: 30px 22px 60px; }
.join-eyebrow { font-family: 'Fredoka', sans-serif; font-size: 18px; margin: 0 0 10px; }
.join-title { font-family: 'Bungee', sans-serif; font-size: 42px; margin: 0 0 15px; }
.join-desc { font-family: 'Fredoka', sans-serif; font-size: 15px; line-height: 1.6; margin: 0 0 20px; }
.join-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.badge { background: #f7ecd0; color: #335772; border: 2px solid #000; border-radius: 17px; padding: 6px 16px; font-family: 'Fredoka', sans-serif; font-size: 13px; flex-shrink: 0; }
.badge-text { font-family: 'Fredoka', sans-serif; font-size: 13px; }

.countdown { display: flex; gap: 10px; margin: 25px 0; }
.countdown-box { flex: 1; background: #335772; border-radius: 21px; text-align: center; padding: 14px 0; }
.cd-num { display: block; font-family: 'Fredoka', sans-serif; font-size: 28px; }
.cd-label { display: block; font-family: 'Fredoka', sans-serif; font-size: 12px; margin-top: 4px; }

.rsvp-form { background: #faf3e3; color: #335772; border: 2px solid #000; border-radius: 21px; padding: 20px; }
.rsvp-title { font-family: 'Fredoka', sans-serif; font-size: 22px; margin: 0 0 15px; }
.rsvp-label { display: block; font-family: 'Fredoka', sans-serif; font-size: 14px; margin: 12px 0 6px; }
.rsvp-input { display: block; width: 100%; border: 1px solid #000; border-radius: 12px; padding: 14px; font-size: 14px; background: #fff; }
.rsvp-note { text-align: center; font-family: 'Fredoka', sans-serif; font-size: 12px; letter-spacing: 1px; margin: 15px 0 0; }

/* good to know */
.good-to-know { }
.faq-item { background: #faf3e3; border: 1px solid #000; border-radius: 12px; padding: 16px 45px 16px 16px; margin-bottom: 12px; position: relative; }
.faq-q { font-family: 'Fredoka', sans-serif; font-size: 16px; margin: 0; color: #335772; }
.faq-toggle { position: absolute; top: 10px; right: 14px; background: none; border: none; font-family: 'Fredoka', sans-serif; font-size: 26px; color: #335772; cursor: pointer; }
.faq-a { font-size: 13px; margin: 10px 0 0; display: none; line-height: 1.5; color: #335772; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }

/* footer */
.footer { background: #335772; color: #f7ecd0; text-align: center; padding: 30px 20px 40px; }
.footer-logo { width: 160px; margin: 0 auto 20px; }
.footer-group { width: 90px; margin: 0 auto 15px; }
.footer-marquee { font-family: 'Fredoka', sans-serif; font-size: 13px; letter-spacing: 2px; line-height: 1.5; margin: 0 0 15px; }
.footer-copy { font-family: 'Fredoka', sans-serif; font-size: 13px; letter-spacing: 2px; margin: 0; }

@media (max-width: 440px) {
  .frame { width: 100vw; }
}