/* =========================================================
   Kewa's Fashion — Design System & Layout Stylesheet
   ========================================================= */

:root {
  --bg-dark:      #140d16;
  --bg-plum:      #261929;
  --bg-plum-deep: #1d1220;
  --bg-card:      rgba(47, 31, 51, 0.75);

  --gold-1: #7a5a24;
  --gold-2: #d5ac54;
  --gold-3: #f6e3a8;
  --gold-4: #c99a3d;

  --pink:        #e879f9;
  --purple:      #c084fc;
  --purple-deep: #9333ea;

  --text:      #ffffff;
  --text-soft: #f1e7f3;
  --text-mute: #bda8c2;

  /* Flip-clock card faces. Deliberately deeper than --gold-2 so the
     white numerals keep enough contrast — a bright gold behind white
     text drops to roughly 2:1 and becomes hard to read. */
  --flip-top-1:    #b4842f;
  --flip-top-2:    #966c26;
  --flip-bottom-1: #7d5b21;
  --flip-bottom-2: #6a4d1c;
  --flip-divider:  rgba(0, 0, 0, .45);

  --maxw: 1200px;
  --radius: 14px;
  
  --font-heading: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* Global safety net: any element carrying the `hidden` attribute stays
   hidden even if a later rule gives it a display value. Prevents the
   whole class of bug where el.hidden = true appears to do nothing. */
[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  top: -56px;
  left: 16px;
  z-index: 2000;
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #140d16;
  background: var(--gold-3);
  transition: top .2s ease;
}

.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--gold-3);
  outline-offset: 2px;
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero {
  position: relative;
  min-height: min(100vh - 70px, 780px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #140d16;
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }

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

.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,13,22,.85) 0%, rgba(20,13,22,.4) 50%, rgba(20,13,22,0) 100%);
}

.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 36px 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 16px;
}

.hero__content { padding-bottom: 8px; text-align: center; }

.hero__logo { margin: 0 0 12px; line-height: 0; }

.hero__logo img {
  width: min(500px, 100%);
  height: auto;
  margin: 0 auto;
}

.hero__tagline {
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  color: var(--gold-3);
  margin: 0 auto 20px;
  letter-spacing: 0.5px;
}

/* =========================================================
   COUNTDOWN BANNER
   ========================================================= */
.countdown-banner {
  background: #000;
  padding: 60px 24px;
  border: none;
}

.countdown-banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.countdown-banner__date {
  margin: 0 0 32px;
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #888;
}

.countdown-banner .countdown {
  justify-content: center;
  margin-bottom: 0;
}

.countdown {
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.countdown__unit {
  text-align: center;
  position: relative;
}

.countdown__sep {
  font-family: var(--font-heading);
  font-size: 60px;
  font-weight: 300;
  color: #fff;
  padding: 0 8px;
  line-height: 1;
  position: relative;
  top: 0;
}

/* Flip clock card */
.countdown__flip {
  --flip-size: 90px;
  position: relative;
  width: var(--flip-size);
  height: var(--flip-size);
  border-radius: 8px;
  background: var(--flip-bottom-2);
  perspective: 600px;
}

.countdown__flip > div {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  backface-visibility: hidden;
}

.countdown__flip > div > span {
  font-family: var(--font-heading);
  font-size: calc(var(--flip-size) * 0.8);
  font-weight: 700;
  color: #fff;
  line-height: var(--flip-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.countdown__flip .countdown__flip--top {
  top: 0;
  align-items: flex-start;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid var(--flip-divider);
  background: linear-gradient(180deg, var(--flip-top-1) 0%, var(--flip-top-2) 100%);
}

/* The bottom half sits a shade darker than the top. That difference is
   what sells the flip illusion — with both halves identical the card
   reads as one flat tile and the fold stops being legible. */
.countdown__flip .countdown__flip--bottom {
  bottom: 0;
  align-items: flex-end;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, var(--flip-bottom-1) 0%, var(--flip-bottom-2) 100%);
}

/* front layer — current value (shown after the flap settles) */
.countdown__flip .countdown__flip--front { z-index: 2; }

/* back layer — next value, revealed as the top flap folds down */
.countdown__flip .countdown__flip--back {
  z-index: 3;
  transform: rotateX(0deg);
}

/* flap layer — the animated halves */
.countdown__flip .countdown__flip--flap { z-index: 4; }

.countdown__flip .countdown__flip--flap.countdown__flip--top {
  transform: rotateX(-90deg);
  transform-origin: bottom center;
}

.countdown__flip .countdown__flip--flap.countdown__flip--bottom {
  transform: rotateX(90deg);
  transform-origin: top center;
}

@keyframes countdownFold {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-90deg); }
}

@keyframes countdownUnfold {
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0deg); }
}

.countdown__flip--animating .countdown__flip--flap.countdown__flip--top {
  animation: countdownFold 0.35s ease-in both;
}

.countdown__flip--animating .countdown__flip--flap.countdown__flip--bottom {
  animation: countdownUnfold 0.35s 0.35s ease-out both;
}

.countdown__label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}

/* Store CTAs */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 40px 0 0;
  justify-content: center;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 250px;
  flex: none;
  padding: 5px 20px;
  min-height: 56px;
  border-radius: 9px;
  color: #fff;
  border: 2px solid transparent;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 45%, var(--gold-4) 100%) border-box;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.store-btn:hover {
  transform: translateY(-3px) scale(1.02);
  background:
    linear-gradient(#1a1a1a, #1a1a1a) padding-box,
    linear-gradient(135deg, var(--gold-3) 0%, var(--gold-2) 45%, var(--gold-4) 100%) border-box;
}

.store-btn:focus-visible {
  outline: 3px solid var(--gold-3);
  outline-offset: 3px;
}

/* Sized by HEIGHT with width:auto, so each glyph keeps its own aspect
   ratio and occupies no more horizontal room than its artwork needs.
   A fixed square box would reintroduce dead space beside the narrower
   apple glyph and unbalance the button again. */
.store-btn__icon {
  height: 44px;
  width: auto;
  flex: none;
  object-fit: contain;
  object-position: center;
}

.store-btn__text { display: flex; flex-direction: column; line-height: 1.15; }
.store-btn__text small { font-size: 11px; letter-spacing: .5px; opacity: .85; text-transform: uppercase; font-weight: 600; }
.store-btn__text strong { font-family: var(--font-heading); font-size: 20px; font-weight: 800; letter-spacing: .3px; }

/* =========================================================
   HERO ART

   One pre-composed image (assets/main-characters.png, 1080x1080,
   transparent, figures bottom-flush) instead of two separately
   positioned characters.

   That removes every problem the old approach had: no per-figure
   nudging, no gap that had to be retuned at each breakpoint, and no
   possibility of one character being clipped while the other is not.
   The pair scales as a single unit.

   TWO KNOBS, and that is the whole system:

     --hero-fig-h   height of the artwork, relative to the hero.
                    Raise to make the characters larger; anything
                    over ~95% starts trimming the outer sleeves,
                    since the image is square and the column is not.

     --hero-fig-x   horizontal nudge, if the pair needs recentring
                    against the logo.
   ========================================================= */
.hero__art {
  --hero-fig-h: 88%;
  --hero-fig-x: 0%;

  align-self: stretch;
  position: relative;
  overflow: hidden;
  min-height: 0;
  margin-right: calc(-24px - max(0px, (100vw - var(--maxw)) / 2));
}

.hero__art img {
  position: absolute;
  bottom: 0;                    /* figures are flush to the image's
                                   bottom edge, so anchoring there
                                   keeps them standing on the fold
                                   at every size */
  left: 50%;
  transform: translateX(calc(-50% + var(--hero-fig-x)));

  height: var(--hero-fig-h);
  width: auto;                  /* square source, so width follows
                                   height and the aspect ratio can
                                   never distort */
  max-width: none;
}

/* =========================================================
   FEATURES SECTION
   ========================================================= */
.features {
  background: #000000;
  padding: 72px 24px;
}

.features__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px;
}

.features__main-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
}

.features__subtitle {
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--text-mute);
  margin: 0;
}

.features__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.features__video {
  display: block;
  width: 100%;
  aspect-ratio: 9/16;
  height: auto;
  object-fit: cover;
  border-radius: 0;
  background: var(--bg-plum-deep);
  box-shadow: none;
  border: 2px solid rgba(213, 172, 84, 0.3);
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 0;
  max-width: 640px;
}

.feature {
  padding: 4px 0;
}

.feature__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--gold-3);
}

.feature__icon {
  display: inline-flex;
  flex: none;
  color: var(--gold-2);
}

.feature__icon svg {
  width: 30px;
  height: 30px;
}

.feature__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
}

/* =========================================================
   OUTFITS + STAGE
   ========================================================= */
.outfits {
  background: var(--bg-dark);
  padding: 72px 24px 64px;
}

.outfits__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 44px;
}

.outfits__title {
  margin: 0 0 10px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #fff;
}

.outfits__subtitle {
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--text-mute);
}

.outfits__layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 24px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 40px;
  align-items: start;
}

.outfits__stage { min-width: 0; }

.outfits__community {
  position: sticky;
  top: 24px;
  background: var(--bg-card);
  border: 1px solid rgba(213, 172, 84, 0.25);
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.outfits__community-copy {
  margin: 0;
  font-size: 15px;
  color: var(--text-soft);
}

.outfits__community .join-btn {
  width: 100%;
  min-height: 92px;
  padding: 18px 20px;
  gap: 16px;
}

.outfits__community .join-btn__icon {
  width: 48px; height: 48px;
}

.stage { max-width: 100%; margin: 0 auto 28px; padding: 0; }

.stage__frame {
  position: relative;
  width: min(540px, 100%);
  margin: 0 auto;
  aspect-ratio: 1/1;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-plum-deep);
  box-shadow: none;
  border: 2px solid rgba(213, 172, 84, 0.3);
}

.stage__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.stage__char {
  position: absolute;
  left: 50%; bottom: 0;
  height: 94%;
  width: auto;
  max-width: 88%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: bottom;
}

.stage__caption {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--gold-3);
}

.picker {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 52px;
}

.picker__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 4px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.picker__track::-webkit-scrollbar { display: none; }

.picker__item {
  --face-y: 4%;
  --thumb-zoom: 330%;
  position: relative;
  flex: 0 0 90px;
  width: 90px; height: 90px;
  padding: 0;
  border-radius: 0;
  border: 3px solid rgba(255,255,255,.18);
  background: linear-gradient(170deg, #6c3f77 0%, #3d2542 100%);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.picker__item:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.4); }

.picker__item.is-active {
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px rgba(214,172,84,.4);
  transform: translateY(-3px);
}

.picker__item img {
  position: absolute;
  left: 50%;
  top: var(--face-y);
  height: var(--thumb-zoom);
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
}

.picker__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px; height: 38px;
  border-radius: 0;
  border: 2px solid var(--bg-dark);
  background: var(--purple);
  color: var(--bg-dark);
  font-size: 16px; font-weight: 700;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.picker__arrow:hover { background: var(--pink); }
.picker__arrow--prev { left: 6px; }
.picker__arrow--next { right: 6px; }

/* =========================================================
   SCREENSHOTS
   ========================================================= */
.shots { background: var(--bg-plum-deep); padding: 64px 24px; }

.shots__title {
  margin: 0 0 36px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
}

.shots__grid {
  max-width: 1130px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 26px;
}

.shot {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-plum);
  border: 1px solid rgba(255,255,255,0.1);
}

.shot__open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.shot img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.25s ease;
}

.shot:hover img { transform: scale(1.03); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 6, 12, 0.92);
  backdrop-filter: blur(4px);
}

.lightbox[hidden] { display: none; }

.lightbox__fig {
  margin: 0;
  max-width: min(900px, 92vw);
}

.lightbox__img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border: 2px solid rgba(213, 172, 84, 0.35);
}

.lightbox__caption {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--gold-3);
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--gold-3);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 9px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 45%, var(--gold-4) 100%) border-box;
  transition: transform .2s ease;
}

.lightbox__close:hover {
  transform: translateY(-2px);
}

/* =========================================================
   COMMUNITY JOIN BUTTONS
   ========================================================= */
.join-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  min-height: 92px;
  border-radius: 14px;
  color: #fff;
  border: 2px solid transparent;
  background:
    linear-gradient(#1a1120, #1a1120) padding-box,
    linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 45%, var(--gold-4) 100%) border-box;
  transition: transform .18s ease;
}

.join-btn:hover {
  transform: translateY(-3px);
}

.join-btn__icon {
  width: 52px; height: 52px;
  flex: none;
  object-fit: contain;
}

.join-btn__text { text-align: left; flex: 1; }
.join-btn__text strong { display: block; font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.2; }
.join-btn__text small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-mute); }

/* =========================================================
   FOOTER
   ========================================================= */
.preregister {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.preregister__title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
}

.preregister .hero__ctas { justify-content: center; padding-top: 0; }

.footer {
  background: var(--bg-dark);
  padding: 64px 24px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer__title {
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
}

.subscribe {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* A `display` declaration beats the `hidden` attribute, so setting
   form.hidden = true would otherwise leave the form on screen. Same
   trap the lightbox hits, handled the same way. */
.subscribe[hidden] { display: none; }

.subscribe__input {
  width: min(500px, 100%);
  height: 60px;
  padding: 0 24px;
  font-size: 17px;
  font-family: inherit;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 2px solid var(--gold-2);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.subscribe__input::placeholder { color: #cfc6ca; }
.subscribe__input:focus { border-color: var(--gold-3); box-shadow: 0 0 0 3px rgba(214,172,84,.25); }

.subscribe__btn {
  height: 60px;
  padding: 0 32px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #140d16;
  background: var(--pink);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 0;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.subscribe__btn:hover { filter: brightness(1.08); transform: translateY(-2px); }

.subscribe__msg {
  min-height: 22px;
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--gold-3);
  font-weight: 600;
}

.subscribe__msg.is-error { color: #ff9a9a; }

/* ---------------------------------------------------------
   Honeypot.

   Must be invisible to humans but a normal, fillable field to a
   bot. display:none is avoided deliberately — the better bots
   skip hidden inputs, so this is moved off-screen instead while
   staying technically visible in the DOM.
   --------------------------------------------------------- */
.hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Submit button: busy state
   --------------------------------------------------------- */
.subscribe__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.subscribe__btn[disabled] { cursor: not-allowed; opacity: .75; }

.subscribe__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(20, 13, 22, .3);
  border-top-color: #140d16;
  border-radius: 50%;
  animation: subscribeSpin .7s linear infinite;
}

.subscribe.is-busy .subscribe__spinner { display: block; }
.subscribe.is-busy .subscribe__btn-label { opacity: .6; }

@keyframes subscribeSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   Error shake
   --------------------------------------------------------- */
@keyframes subscribeShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(2px); }
}

.subscribe.is-shaking { animation: subscribeShake .45s cubic-bezier(.36,.07,.19,.97); }

/* ---------------------------------------------------------
   Success state
   --------------------------------------------------------- */
.subscribe-shell { min-height: 60px; }

.subscribe-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
}

.subscribe-success[hidden] { display: none; }

.subscribe-success__check {
  width: 64px;
  height: 64px;
  flex: none;
  overflow: visible;
}

.subscribe-success__circle,
.subscribe-success__tick {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.subscribe-success__circle {
  stroke: var(--gold-2);
  stroke-width: 2.5;
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
}

.subscribe-success__tick {
  stroke: var(--gold-3);
  stroke-width: 3.5;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
}

/* The circle sweeps closed, then the tick draws itself in. */
.subscribe-success.is-shown .subscribe-success__circle {
  animation: subscribeDrawCircle .55s cubic-bezier(.65,0,.45,1) forwards;
}

.subscribe-success.is-shown .subscribe-success__tick {
  animation: subscribeDrawTick .3s .5s cubic-bezier(.65,0,.45,1) forwards;
}

@keyframes subscribeDrawCircle { to { stroke-dashoffset: 0; } }
@keyframes subscribeDrawTick   { to { stroke-dashoffset: 0; } }

.subscribe-success__text {
  margin: 0;
  max-width: 460px;
  font-family: var(--font-heading);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;

  /* Gold gradient text with a single shimmer sweep. */
  background: linear-gradient(
    100deg,
    var(--gold-2) 0%,
    var(--gold-3) 35%,
    #fff8e2 50%,
    var(--gold-3) 65%,
    var(--gold-2) 100%
  );
  background-size: 250% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-3);
}

.subscribe-success.is-shown .subscribe-success__text {
  animation:
    subscribeRiseIn .5s .55s cubic-bezier(.16,1,.3,1) forwards,
    subscribeShimmer 1.5s .8s ease-out forwards;
}

@keyframes subscribeRiseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes subscribeShimmer {
  from { background-position: 120% 0; }
  to   { background-position: -40% 0; }
}

/* ---------------------------------------------------------
   Reduced motion.

   The global rule further down disables transitions but not
   keyframe animations, so each animated piece is neutralised
   explicitly here — showing the final state immediately rather
   than animating toward it.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .subscribe.is-shaking { animation: none; }
  .subscribe__spinner   { animation: none; opacity: .6; }

  .subscribe-success.is-shown .subscribe-success__circle,
  .subscribe-success.is-shown .subscribe-success__tick {
    animation: none;
    stroke-dashoffset: 0;
  }

  .subscribe-success.is-shown .subscribe-success__text {
    animation: none;
    opacity: 1;
    background: none;
    -webkit-text-fill-color: var(--gold-3);
    color: var(--gold-3);
  }
}

.divider {
  width: min(980px, 100%);
  height: auto;
  margin: 48px auto 36px;
}

.footer__logo { width: min(240px, 60%); margin: 0 auto 18px; }

.footer__about {
  max-width: 520px;
  margin: 0 auto 28px;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  color: var(--text-mute);
}

.footer__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--gold-3);
}

.footer__links a {
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: var(--pink);
  text-decoration: underline;
}

.footer__dot { opacity: 0.5; }

.footer__copy {
  font-size: 13px;
  color: var(--text-mute);
  margin: 0;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */
@media (max-width: 1024px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; padding: 32px 24px 0; }
  .hero__content { padding-bottom: 24px; }
  .hero__logo img { margin-inline: auto; }
  .countdown, .hero__ctas { justify-content: center; }

  /* Tablet: the grid stacks, so the art gets its own band. The column
     is wide and short here, so the artwork can run at full height
     without any risk of the sleeves being trimmed. */
  .hero__art {
    --hero-fig-h: 100%;
    align-self: auto;
    height: 420px;
    margin-right: 0;
  }

  .features__inner { grid-template-columns: 1fr; gap: 36px; }
  .features__collage { max-width: 380px; margin: 0 auto; }

  .outfits__layout { grid-template-columns: 1fr; }
  .outfits__community { position: static; }
}

@media (max-width: 820px) {
  .features__grid { grid-template-columns: 1fr; }
  .shots__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .countdown { gap: 0; }
  .countdown__sep { font-size: 36px; padding: 0 4px; }
  .countdown__flip { --flip-size: 56px; }
  .countdown__label { font-size: 9px; letter-spacing: 1.5px; }

  /* Characters are hidden on phones by choice — the logo, tagline and
     store buttons get the whole screen. */
  .hero__art { display: none; }

  .store-btn {
    width: 250px;
    flex: none;
    padding: 5px 20px;
    min-height: 56px;
    gap: 18px;
    border-radius: 9px;
    border: 2px solid transparent;
    background:
      linear-gradient(#000, #000) padding-box,
      linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 45%, var(--gold-4) 100%) border-box;
  }
  .store-btn__icon { height: 44px; width: auto; }
  .store-btn__text strong { font-size: 18px; }
  .store-btn__text small { font-size: 10px; }

  .join-btn { gap: 14px; padding: 12px 16px; min-height: 84px; }
  .join-btn__icon { width: 44px; height: 44px; }
  .join-btn__text strong { font-size: 18px; }
  .join-btn__text small { font-size: 13px; }

  .subscribe { flex-direction: column; align-items: stretch; }
  .subscribe__input { width: 100%; }
  .subscribe__btn { width: 100%; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}