/* For the music, and for the people — Figma "for the people" (node 1313:910),
   1993×1415, navy. Absolute layout at EXACT Figma coords scaled by --px inside a
   1993-wide centred frame. */
.ftp {
  position: relative;
  height: calc(1434.6 * var(--px));   /* 1415 + 19.6 (section-spacing standard) */
  background: #204c8a;
  overflow: hidden;
  color: #fff;
}
.ftp__frame {
  /* top shifted so the first text sits 65px from the section top (standard). */
  position: absolute; left: 50%; top: calc(19.6 * var(--px)); transform: translateX(-50%);
  width: calc(1993 * var(--px)); height: 100%;
}
.ftp__frame > * {
  position: absolute;
  left: calc(var(--x) * var(--px));
  top:  calc(var(--y) * var(--px));
  margin: 0;
}

/* ---- header ---- */
.ftp__title { transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 700; font-size: calc(55 * var(--px)); line-height: calc(75 * var(--px)); text-align: center; white-space: nowrap; }
.ftp__rule  { width: calc(var(--w) * var(--px)); height: 1px; background: rgba(255,255,255,.8); }
.ftp__stories { transform: translate(-50%, -50%); font-family: var(--font-display); font-weight: 500; font-size: calc(31.003 * var(--px)); letter-spacing: calc(0.31 * var(--px)); text-align: center; white-space: nowrap; }
.ftp__desc { transform: translateX(-50%); width: calc(var(--w) * var(--px)); text-align: center; font-family: var(--font-sans); font-weight: 400; font-size: calc(18.21 * var(--px)); line-height: 1.4; }

/* ---- quotes + stars ---- */
.ftp__quote { transform: translate(-50%, -50%); width: calc(var(--w) * var(--px)); text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: calc(var(--fs) * var(--px)); line-height: 1.2; }
.ftp__star { width: calc(29.089 * var(--px)); height: calc(29.089 * var(--px)); }
.ftp__star img { width: 100%; height: 100%; display: block; }

/* ---- polaroids: white frame + photo, rotated around centre ---- */
.ftp-pola {
  width: calc(var(--w) * var(--px));
  height: calc(var(--h) * var(--px));
  background: #fff;
  transform: rotate(var(--rot));
  padding: calc(var(--pt) * var(--px)) calc(var(--ps) * var(--px)) calc(var(--pb) * var(--px));
  box-shadow: 0 calc(6 * var(--px)) calc(18 * var(--px)) rgba(0,0,0,.28);
}
.ftp-pola img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Maddox Street sign (cropped) ---- */
.ftp-sign { width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); overflow: hidden; }
.ftp-sign img {
  position: absolute;
  left: calc(var(--il) * 1%); top: calc(var(--it) * 1%);
  width: calc(var(--iw) * 1%); height: calc(var(--ih) * 1%);
  max-width: none; display: block;
}

/* ---- MOBILE "For the music, and for the people" (Figma "for the people" 1313:219,
   421×1098). Same navy, same six polaroids and 5-star row (reused from desktop at
   ~0.35 scale), re-scattered down one column with the quotes between them. The
   desktop copy is hidden below 600 so it doesn't show twice. ---- */
.ftp-m { display: none; }

@media (max-width: 600px) {
  .ftp--desktop-only { display: none; }

  .ftp-m {
    display: block; position: relative;
    height: calc(1098 * var(--mpx));
    background: #204c8a;
    overflow: hidden; color: #fff;
  }
  .ftp-m__frame {
    position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: calc(421 * var(--mpx)); height: 100%;
  }
  .ftp-m__frame > * {
    position: absolute;
    left: calc(var(--x) * var(--mpx));
    top:  calc(var(--y) * var(--mpx));
    margin: 0;
  }

  /* ---- header ---- */
  .fpm__title {
    transform: translateX(-50%); width: calc(var(--w) * var(--mpx)); text-align: center;
    font-family: var(--font-display); font-weight: 700;
    font-size: calc(32 * var(--mpx)); line-height: 1.22; letter-spacing: calc(0.32 * var(--mpx));
  }
  .fpm__rule { width: calc(var(--w) * var(--mpx)); height: 1px; background: rgba(255,255,255,.8); }
  .fpm__stories {
    /* Playfair runs wider than Figma's Domaine Narrow — condense so the single
       line still fits the 372px Figma width instead of spilling past the frame. */
    transform: translate(-50%, -50%) scaleX(0.88);
    white-space: nowrap; text-align: center;
    font-family: var(--font-display); font-weight: 500;
    font-size: calc(22.105 * var(--mpx)); letter-spacing: calc(0.221 * var(--mpx));
  }
  .fpm__desc {
    transform: translateX(-50%); width: calc(var(--w) * var(--mpx)); text-align: center;
    font-family: var(--font-sans); font-weight: 400;
    font-size: calc(13.012 * var(--mpx)); line-height: normal;
  }
  .fpm__desc p { margin: 0; }
  .fpm__desc p + p { margin-top: 1em; }   /* Figma's blank line between the two blocks */

  /* ---- quotes ---- */
  .fpm__quote {
    transform: translate(-50%, -50%);
    width: calc(var(--w) * var(--mpx)); text-align: center;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: calc(var(--fs) * var(--mpx)); line-height: 1.2;
  }

  /* polaroids + stars reuse the desktop classes, resized to --mpx */
  .ftp-m .ftp-pola {
    width: calc(var(--w) * var(--mpx));
    height: calc(var(--h) * var(--mpx));
    padding: calc(var(--pt) * var(--mpx)) calc(var(--ps) * var(--mpx)) calc(var(--pb) * var(--mpx));
    box-shadow: 0 calc(2 * var(--mpx)) calc(6 * var(--mpx)) rgba(0,0,0,.28);
  }
  .ftp-m .ftp__star { width: calc(15.083 * var(--mpx)); height: calc(15.083 * var(--mpx)); }
}