.playlist-page{background:#fffefa}.playlist-breadcrumb{max-width:1200px;margin:0 auto;padding:0 36px 16px;font-size:13px;font-weight:800;color:#667b8a}.playlist-breadcrumb a{color:#0866a9}.playlist-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:54px;align-items:center;padding-top:32px;padding-bottom:58px}.playlist-hero h1{margin-bottom:22px}.playlist-count{display:inline-flex;margin:0 0 18px;padding:7px 12px;border:1px solid #c9deeb;border-radius:999px;background:#eef8fd;color:#0866a9;font-size:12px;font-weight:1000;letter-spacing:.5px}.playlist-player{overflow:hidden;border:2px solid #123656;border-radius:25px;background:#123656;box-shadow:9px 10px 0 #dceaf3}.playlist-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.playlist-player-note{padding:14px 18px;background:#fff;color:#617486;font-size:13px}.playlist-player-note a{color:#0866a9;font-weight:900}.playlist-intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;padding-top:62px;padding-bottom:56px}.playlist-intro h2{font-size:clamp(32px,3.5vw,45px);line-height:1.12;letter-spacing:-1.1px;margin:0;font-weight:1000}.playlist-intro-copy p{color:#5c6f7e;font-size:16px;line-height:1.75}.playlist-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}.playlist-tags span{padding:7px 12px;border:1px solid #cbdfea;border-radius:999px;background:#fff;font-size:12px;font-weight:900;color:#34566f}.playlist-use{padding:10px 0 66px}.playlist-use-head{max-width:760px;margin-bottom:24px}.playlist-use-head h2{font-size:clamp(31px,3.2vw,42px);line-height:1.14;margin:0;font-weight:1000}.playlist-use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.playlist-use-card{padding:22px;border:1px solid #d6e7f1;border-radius:20px;background:#fff;box-shadow:0 10px 28px #12365608}.playlist-use-card b{display:grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border:2px solid #123656;border-radius:12px;background:#ffcc35;box-shadow:3px 3px 0 #123656;font-size:12px}.playlist-use-card h3{font-size:19px;margin-bottom:8px}.playlist-use-card p{font-size:14px;line-height:1.62;color:#627686;margin:0}.related-playlists{padding:60px 0 70px;background:#eef7fc;border-block:1px solid #d7e8f3}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.related-card{display:flex;flex-direction:column;min-height:155px;padding:18px;border:1px solid #d1e3ee;border-radius:17px;background:#fff;transition:.18s}.related-card:hover{transform:translateY(-3px);border-color:#0866a9}.related-card span{font-size:11px;font-weight:1000;letter-spacing:1px;color:#0866a9}.related-card strong{font-size:17px;line-height:1.3;margin-top:7px}.related-card small{margin-top:auto;padding-top:12px;color:#6d7e89}.playlist-index-hero{padding-top:38px;padding-bottom:48px;max-width:850px}.playlist-index-hero .lead{max-width:680px}.playlist-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:76px}.playlist-index-card{display:flex;flex-direction:column;min-height:230px;padding:24px;border:1px solid #d6e6f0;border-radius:22px;background:#fff;box-shadow:0 12px 34px #1236560a;transition:.18s}.playlist-index-card:hover{transform:translateY(-5px);border-color:#8fc2dc}.playlist-index-card .num{display:grid;place-items:center;width:45px;height:45px;border:2px solid #123656;border-radius:14px;background:#ffcc35;box-shadow:3px 4px 0 #123656;font-size:12px;font-weight:1000;margin-bottom:22px}.playlist-index-card h2{font-size:22px;line-height:1.24;margin-bottom:10px}.playlist-index-card p{font-size:14px;color:#617486;line-height:1.6}.playlist-index-card .go{margin-top:auto;padding-top:16px;border-top:1px solid #e2edf3;color:#0866a9;font-size:13px;font-weight:1000}@media(max-width:850px){.playlist-breadcrumb{padding-inline:24px}.playlist-hero{grid-template-columns:1fr;gap:30px}.playlist-intro{grid-template-columns:1fr;gap:18px}.related-grid{grid-template-columns:repeat(2,1fr)}.playlist-index-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.playlist-breadcrumb{padding:0 16px 8px}.playlist-hero{padding-top:20px;padding-bottom:42px}.playlist-hero h1{font-size:43px}.playlist-player{border-radius:18px;box-shadow:5px 6px 0 #dceaf3}.playlist-intro{padding-top:44px;padding-bottom:42px}.playlist-use{padding-bottom:48px}.playlist-use-grid{grid-template-columns:1fr}.related-playlists{padding-top:44px;padding-bottom:50px}.related-grid{grid-template-columns:1fr 1fr}.related-card{min-height:140px;padding:15px}.playlist-index-grid{grid-template-columns:1fr;gap:14px;padding-bottom:54px}}

/* 2026-09-13 · playlist pages polish */
.playlist-page{background:radial-gradient(circle at 90% 4%,rgba(255,204,53,.12),transparent 260px),#fffefa;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.playlist-page h1,.playlist-page h2,.playlist-page h3{letter-spacing:-.025em;text-wrap:balance}
.playlist-page .playlist-breadcrumb{padding-top:14px}
.playlist-page .playlist-index-hero{max-width:900px;padding-top:50px;padding-bottom:54px}
.playlist-page .playlist-index-card{min-height:224px;border-color:#d4e5ef;border-radius:24px;box-shadow:0 10px 28px rgba(18,54,86,.08);background:linear-gradient(155deg,#fff 0%,#fbfdff 100%)}
.playlist-page .playlist-index-card:nth-child(3n+2){background:linear-gradient(155deg,#fff 0%,#fffaf0 100%)}
.playlist-page .playlist-index-card:nth-child(3n){background:linear-gradient(155deg,#fff 0%,#f4fbff 100%)}
.playlist-page .playlist-index-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(18,54,86,.13)}
.playlist-page .playlist-index-card .num,.playlist-page .playlist-use-card b{border-width:1.5px;box-shadow:3px 3px 0 rgba(18,54,86,.20)}
.playlist-page .playlist-hero{padding-top:44px}
.playlist-page .playlist-player{border-width:1px;border-color:#183c5d;border-radius:28px;box-shadow:0 18px 50px rgba(18,54,86,.14)}
.playlist-page .playlist-player iframe{border-radius:27px 27px 0 0}
.playlist-page .playlist-use-card,.playlist-page .related-card{border-color:#d5e6f0;box-shadow:0 10px 26px rgba(18,54,86,.06)}
.playlist-page .related-playlists{background:linear-gradient(180deg,#eff8fd 0%,#f6fbfe 100%)}
.playlist-page .trust-strip{background:linear-gradient(110deg,#0d2d49,#123f66 55%,#0a5f97)}
@media(max-width:620px){.playlist-page{background:#fffefa}.playlist-page .playlist-index-hero{padding-top:34px;padding-bottom:40px}.playlist-page .playlist-index-card{min-height:0;border-radius:20px}.playlist-page .playlist-player{border-radius:20px}}

.playlist-song-highlights{padding:8px 0 58px}.playlist-song-highlights__head{max-width:760px;margin-bottom:22px}.playlist-song-highlights__head h2{margin:0;font-size:clamp(30px,3.2vw,42px);line-height:1.14}.playlist-song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.playlist-song-card{padding:22px;border:1px solid #d5e6f0;border-radius:20px;background:linear-gradient(155deg,#fff 0%,#f6fbfe 100%);box-shadow:0 10px 26px rgba(18,54,86,.06)}.playlist-song-card>span{display:block;margin-bottom:8px;color:#0866a9;font-size:11px;font-weight:1000;letter-spacing:1px}.playlist-song-card h3{margin:0 0 9px;font-size:19px;line-height:1.3}.playlist-song-card h3 a{color:#123656;text-decoration:none}.playlist-song-card h3 a:hover{color:#0866a9}.playlist-song-card p{margin:0;color:#627686;font-size:14px;line-height:1.62}@media(max-width:800px){.playlist-song-grid{grid-template-columns:1fr}.playlist-song-highlights{padding-bottom:46px}}


/* 2026-10-04 · clearer embedded playlist section */
.playlist-page .playlist-hero{display:block;max-width:980px;padding-top:44px;padding-bottom:38px}
.playlist-page .playlist-hero>div{max-width:820px}
.playlist-page .playlist-embed{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(440px,1.28fr);gap:48px;align-items:center;padding-top:18px;padding-bottom:64px;scroll-margin-top:24px}
.playlist-embed-head .eyebrow{color:#0866a9;margin-bottom:9px}
.playlist-embed-head h2{margin:0 0 12px;max-width:520px;font-size:clamp(30px,3vw,42px);line-height:1.1;font-weight:1000}
.playlist-embed-head>p:last-child{margin:0;max-width:500px;color:#607383;font-size:15px;line-height:1.65}
.playlist-page .playlist-embed .playlist-player{width:100%}
@media(max-width:850px){.playlist-page .playlist-embed{grid-template-columns:1fr;gap:22px;padding-top:8px}.playlist-page .playlist-embed-head{max-width:680px}}
@media(max-width:620px){.playlist-page .playlist-hero{padding-top:24px;padding-bottom:30px}.playlist-page .playlist-embed{padding-top:4px;padding-bottom:46px}.playlist-embed-head h2{font-size:30px}.playlist-embed-head>p:last-child{font-size:14px}}


/* 2026-10-04 · playlist layout refinement v2 */
.playlist-page .playlist-hero{
  display:block;
  max-width:1040px;
  padding-top:34px;
  padding-bottom:28px;
  text-align:center;
}
.playlist-page .playlist-hero>div{
  max-width:920px;
  margin:0 auto;
}
.playlist-page .playlist-hero .eyebrow{
  margin-bottom:10px;
}
.playlist-page .playlist-hero .playlist-count{
  margin-bottom:16px;
}
.playlist-page .playlist-hero h1{
  max-width:920px;
  margin:0 auto 18px;
  font-size:clamp(44px,4.7vw,62px);
  line-height:1.04;
}
.playlist-page .playlist-hero .lead{
  max-width:700px;
  margin:0 auto 22px;
  font-size:17px;
  line-height:1.66;
}
.playlist-page .playlist-hero .hero-actions{
  justify-content:center;
  gap:12px;
}

.playlist-page .playlist-embed{
  display:block;
  max-width:1040px;
  margin:0 auto 68px;
  padding:28px;
  scroll-margin-top:24px;
  text-align:center;
  border:1px solid #d8e8f2;
  border-radius:30px;
  background:
    radial-gradient(circle at 90% 8%,rgba(255,204,53,.16),transparent 220px),
    linear-gradient(145deg,#f4faff 0%,#fffefa 58%,#f8fbfd 100%);
  box-shadow:0 18px 55px rgba(18,54,86,.08);
}
.playlist-page .playlist-embed-head{
  max-width:700px;
  margin:0 auto 22px;
}
.playlist-page .playlist-embed-head .eyebrow{
  margin-bottom:7px;
}
.playlist-page .playlist-embed-head h2{
  max-width:none;
  margin:0 0 8px;
  font-size:clamp(28px,2.8vw,38px);
  line-height:1.1;
}
.playlist-page .playlist-embed-head>p:last-child{
  max-width:620px;
  margin:0 auto;
  font-size:14px;
  line-height:1.6;
}
.playlist-page .playlist-embed .playlist-player{
  width:min(100%,900px);
  margin:0 auto;
  border-radius:22px;
  box-shadow:0 16px 42px rgba(18,54,86,.14);
}
.playlist-page .playlist-embed .playlist-player iframe{
  border-radius:21px 21px 0 0;
}
.playlist-page .playlist-embed .playlist-player-note{
  padding:12px 16px;
  text-align:center;
  font-size:12px;
  line-height:1.45;
}

@media(max-width:850px){
  .playlist-page .playlist-hero{
    max-width:760px;
    padding-top:28px;
  }
  .playlist-page .playlist-hero h1{
    font-size:clamp(42px,7vw,56px);
  }
  .playlist-page .playlist-embed{
    margin-inline:24px;
    padding:22px;
  }
}
@media(max-width:620px){
  .playlist-page .playlist-hero{
    padding-top:18px;
    padding-bottom:24px;
    text-align:left;
  }
  .playlist-page .playlist-hero>div{
    margin:0;
  }
  .playlist-page .playlist-hero h1{
    margin-left:0;
    font-size:40px;
    line-height:1.06;
  }
  .playlist-page .playlist-hero .lead{
    margin-left:0;
    font-size:15px;
  }
  .playlist-page .playlist-hero .hero-actions{
    justify-content:flex-start;
  }
  .playlist-page .playlist-hero .hero-actions .button{
    width:100%;
  }
  .playlist-page .playlist-embed{
    margin:0 16px 46px;
    padding:18px 12px 12px;
    border-radius:22px;
  }
  .playlist-page .playlist-embed-head{
    margin-bottom:16px;
    padding-inline:6px;
  }
  .playlist-page .playlist-embed-head h2{
    font-size:28px;
  }
  .playlist-page .playlist-embed .playlist-player{
    border-radius:16px;
  }
  .playlist-page .playlist-embed .playlist-player iframe{
    border-radius:15px 15px 0 0;
  }
}


/* 2026-10-13 — responsive audit for the catalogue and all twelve themed playlists. */
.playlist-page :is(.playlist-hero,.playlist-embed,.playlist-intro,.playlist-index-grid,.related-grid,.playlist-use-grid,.playlist-song-grid){min-width:0}
.playlist-page :is(.playlist-hero,.playlist-embed,.playlist-intro,.playlist-index-grid,.related-grid,.playlist-use-grid,.playlist-song-grid) > *{min-width:0}
.playlist-page :is(h1,h2,h3,.related-card strong,.playlist-index-card .go){overflow-wrap:anywhere;hyphens:auto}
.playlist-page .playlist-player{min-width:0;max-width:100%}
.playlist-page .playlist-player iframe{max-width:100%}
.playlist-page .hero-actions .button{max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
@media(max-width:850px){
 .playlist-page .playlist-use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .playlist-page .playlist-embed{max-width:calc(100% - 48px);box-sizing:border-box}
}
@media(max-width:620px){
 .playlist-page .playlist-hero h1{font-size:clamp(29px,9vw,40px);line-height:1.08}
 .playlist-page .playlist-index-hero h1{font-size:clamp(29px,9vw,40px)}
 .playlist-page .playlist-use-grid{grid-template-columns:minmax(0,1fr)}
 .playlist-page .playlist-embed{max-width:calc(100% - 32px);margin-inline:16px;min-width:0}
 .playlist-page .playlist-hero .hero-actions{display:grid;grid-template-columns:minmax(0,1fr)}
 .playlist-page .playlist-hero .hero-actions .button{width:100%;min-width:0;max-width:100%}
}
@media(max-width:380px){
 .playlist-page .related-grid{grid-template-columns:minmax(0,1fr)}
 .playlist-page .related-card{min-height:0}
}