/* Spotify client stylesheet — staged to /client/client.css and linked after
   styles.css. Owns everything brand-licensed or brand-drawn: Spotify Mix and
   Tazugane font faces, the logo mask, and the specimen mask compositions.
   url() paths are relative to THIS file, so ./assets/... = /client/assets/. */

@font-face {
  font-family: "Spotify Mix";
  src: url("./assets/fonts/SpotifyMix-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spotify Mix";
  src: url("./assets/fonts/SpotifyMix-Black.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spotify Mix Wide Ultra";
  src: url("./assets/fonts/SpotifyMixWide-Ultra.woff2") format("woff2");
  font-weight: 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Spotify Mix Wide Black";
  src: url("./assets/fonts/SpotifyMixWide-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.logo-mark {
  width: 39.84%; /* 26.563% × 1.5 — logo reads 50% larger in the specimen */
  aspect-ratio: 823.46 / 225.25;
  background: var(--live-fg);
  -webkit-mask: url("./assets/brand/spotify-full-logo-white.svg") center / contain no-repeat;
  mask: url("./assets/brand/spotify-full-logo-white.svg") center / contain no-repeat;
}

.stage-ig .layer-bg {
  -webkit-mask: url("./assets/images/specimens/ig-stories-focused-bg.png?v=2") center / 100% 100% no-repeat;
  mask: url("./assets/images/specimens/ig-stories-focused-bg.png?v=2") center / 100% 100% no-repeat;
}

.stage-ig .layer-content {
  -webkit-mask: url("./assets/images/specimens/ig-stories-focused-content.png?v=2") center / 100% 100% no-repeat;
  mask: url("./assets/images/specimens/ig-stories-focused-content.png?v=2") center / 100% 100% no-repeat;
}

.stage-square .layer-bg {
  -webkit-mask: url("./assets/images/specimens/1-1-focused-bg.png?v=2") center / 100% 100% no-repeat;
  mask: url("./assets/images/specimens/1-1-focused-bg.png?v=2") center / 100% 100% no-repeat;
}

.stage-square .layer-content {
  -webkit-mask: url("./assets/images/specimens/1-1-focused-content.png?v=2") center / 100% 100% no-repeat;
  mask: url("./assets/images/specimens/1-1-focused-content.png?v=2") center / 100% 100% no-repeat;
}

.stage-ooh .layer-bg {
  -webkit-mask: url("./assets/images/specimens/ooh-mockup-bg.png") center / 100% 100% no-repeat;
  mask: url("./assets/images/specimens/ooh-mockup-bg.png") center / 100% 100% no-repeat;
}

.stage-ooh .layer-content {
  -webkit-mask: url("./assets/images/specimens/ooh-mockup-content.png") center / 100% 100% no-repeat;
  mask: url("./assets/images/specimens/ooh-mockup-content.png") center / 100% 100% no-repeat;
}

.banner-background {
  z-index: 1;
  background: var(--live-bg);
  mask: url("./assets/images/specimens/digital-banner-background.png") center / 100% 100% no-repeat;
  -webkit-mask: url("./assets/images/specimens/digital-banner-background.png") center / 100% 100% no-repeat;
}

.banner-foreground {
  z-index: 2;
  background: var(--live-fg);
  mask: url("./assets/images/specimens/digital-banner-foreground.png?v=3") center / 100% 100% no-repeat;
  -webkit-mask: url("./assets/images/specimens/digital-banner-foreground.png?v=3") center / 100% 100% no-repeat;
}

.cprint-jp { font-family: "Tazugane Gothic CB", "Spotify Mix CB", sans-serif; font-weight: 400; font-size: 26px; line-height: 1.3; margin: 0 0 4px; }

/* ============================================================
   Campaign Builder (feature 0.x)
   ============================================================ */

/* Banner-rendering fonts (canvas only — UI chrome keeps the app fonts).
   Distinct "… CB" family names so they can't collide with the UI faces.
   The copy-weight selector keys off a weight NUMBER that maps to different cuts
   per family, so each option pairs a Spotify Mix weight (Latin) with a Tazugane
   weight (JP): 400 = Mix Regular + Tazugane Regular, 700 ("Bold") = Mix Medium +
   Tazugane Bold, 900 ("Black") = Mix Bold + Tazugane Black. */
@font-face { font-family: "Spotify Mix CB"; src: url("./assets/fonts/SpotifyMix-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Spotify Mix CB"; src: url("./assets/fonts/SpotifyMix-Medium.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Spotify Mix CB"; src: url("./assets/fonts/SpotifyMix-Bold.woff2") format("woff2"); font-weight: 900; font-display: swap; }

@font-face { font-family: "Spotify Mix Narrow CB"; src: url("./assets/fonts/SpotifyMixNarrow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Spotify Mix Narrow CB"; src: url("./assets/fonts/SpotifyMixNarrow-Medium.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Spotify Mix Narrow CB"; src: url("./assets/fonts/SpotifyMixNarrow-Bold.woff2") format("woff2"); font-weight: 900; font-display: swap; }

@font-face { font-family: "Spotify Mix Wide CB"; src: url("./assets/fonts/SpotifyMixWide-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Spotify Mix Wide CB"; src: url("./assets/fonts/SpotifyMixWide-Medium.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Spotify Mix Wide CB"; src: url("./assets/fonts/SpotifyMixWide-Bold.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* Japanese banner text — Tazugane Gothic. NOT hosted (licensed font): sourced from
   the user's LOCALLY-INSTALLED copy via local(), so no font file is redistributed.
   Japanese renders correctly only on machines with Tazugane Gothic installed
   (see the campaign-builder disclaimer); otherwise it falls back to sans-serif. */
@font-face { font-family: "Tazugane Gothic CB"; src: local("TazuganeGothicStdN-Regular"), local("Tazugane Gothic StdN"); font-weight: 400; font-display: swap; }

@font-face { font-family: "Tazugane Gothic CB"; src: local("TazuganeGothicStdN-Bold"), local("Tazugane Gothic StdN Bold"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Tazugane Gothic CB"; src: local("TazuganeGothicStdN-Black"), local("Tazugane Gothic StdN Black"); font-weight: 900; font-display: swap; }

/* Copy text: Japanese in Tazugane Gothic Regular; Latin runs in Spotify Mix
   Regular, 8% larger to optically match. */
.copy-jp {
  font-family: "Tazugane Gothic CB", "Spotify Mix CB", var(--font-sans);
  font-weight: 400;
  font-size: 19px;
  margin: 0 0 6px;
  line-height: 1.4;
}

.copy-calib-jp { font-family: "Tazugane Gothic CB", var(--font-sans); }

.copy-editor textarea, .copy-editor input { font-family: "Tazugane Gothic CB", var(--font-sans); }

/* Japanese titles: Tazugane Gothic Black at −11% of the Mix size, condensed to 70% (長体). */
.studio-album-title.is-jp { font-family: "Tazugane Gothic CB", var(--font-ja); font-size: calc(var(--art) * 0.094); transform: scaleX(0.7); transform-origin: 0 50%; width: 142.8%; max-width: 142.8%; }

/* Japanese artist names: Tazugane at −8% of the Mix size, condensed to 70% (長体). */
.studio-album-artist.is-jp { font-family: "Tazugane Gothic CB", var(--font-ja); font-size: calc(var(--art) * 0.045); transform: scaleX(0.7); transform-origin: 0 50%; width: 142.8%; max-width: 142.8%; }

.copy-lb-copy { font-family: "Tazugane Gothic CB", var(--font-ja, sans-serif); font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.5; color: #fff; text-align: center; margin: 0; }

.copy-lb-subcta { text-align: center; color: #d5d5d5; font-family: "Tazugane Gothic CB", var(--font-ja, sans-serif); font-weight: 400; font-size: 16px; }