/*
Theme Name: Mokepouch Song & Story
Theme URI: https://mokepouch.com
Author: Mokepouch
Description: A cinematic night-sky WordPress theme for Spotify playlists, stories, songs, pages, and posts. Includes editable hero buttons, a sortable playlist-card Customizer, native WordPress menus, and complete blog templates.
Version: 1.3.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mokepouch
Tags: blog, entertainment, custom-logo, custom-menu, featured-images, threaded-comments
*/
:root{--sky-top:#091522;--sky-mid:#0a1826;--sky-low:#07111d;--night:#050a11;--ember:#ff8a3c;--ember-hot:#ffd06a;--paper:#f6f3ed;--paper-dim:#b9c3cc;--spotify:#1db954;--page-pad:clamp(20px, 5vw, 56px);--page-width:1180px;--collections-width:1500px;--grid-gap:24px
}*, *::before, *::after{box-sizing:border-box
}*{margin:0;padding:0
}html{scroll-behavior:smooth
}body{min-width:320px;overflow-x:hidden;background:var(--night);color:var(--paper);font-family:"Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}body.admin-bar .site-header{top:32px
}a,
button,
input,
textarea,
select{font:inherit
}a,
button{-webkit-tap-highlight-color:transparent
}img{max-width:100%;height:auto
}.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);white-space:nowrap;border:0
}.screen-reader-text:focus{top:8px;left:8px;z-index:100000;width:auto;height:auto;clip:auto;padding:12px 16px;border-radius:8px;background:#fff;color:#111
}.sky,
#starfield{position:fixed;inset:0;pointer-events:none
}.sky{z-index:0;overflow:hidden;background:radial-gradient(55% 55% at 72% 92%, rgba(255, 130, 50, 0.10), transparent 72%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 54%, var(--sky-low) 100%)
}.sky::before,
.sky::after{content:"";position:absolute;border-radius:999px;filter:blur(10px);opacity:0.55;animation:ambientDrift 18s ease-in-out infinite alternate
}.sky::before{width:52vw;height:32vw;right:-12vw;bottom:-13vw;background:radial-gradient(circle, rgba(255, 146, 67, 0.11), transparent 68%)
}.sky::after{width:36vw;height:24vw;left:-12vw;top:12vh;background:radial-gradient(circle, rgba(86, 130, 168, 0.08), transparent 70%);animation-duration:24s
}@keyframes ambientDrift{from{transform:translate3d(-1.5%, -1%, 0) scale(0.98) }to{transform:translate3d(2%, 1.5%, 0) scale(1.04) }}#starfield{z-index:1;width:100%;height:100%
}.wrap{position:relative;z-index:10
}.site-header{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px var(--page-pad);transition:background 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease
}.site-header.solid{background:rgba(5, 10, 17, 0.54);box-shadow:0 12px 40px rgba(0, 0, 0, 0.12);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%)
}.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:clamp(21px, 2vw, 28px);font-weight:750;letter-spacing:-0.04em;line-height:1;text-decoration:none
}.brand .mark{display:grid;width:27px;height:27px;flex:none;place-items:center
}.brand .mark svg{width:100%;height:100%
}.brand .brand-icon{display:block;width:100%;height:100%;object-fit:contain
}.brand .brand-icon-wrap{overflow:hidden
}.brand .custom-logo{width:auto;max-width:42px;max-height:32px;object-fit:contain
}.primary-menu{display:flex;align-items:center;gap:clamp(18px, 2.8vw, 38px);list-style:none
}.primary-menu .menu-item{position:relative
}.primary-menu a{position:relative;display:inline-flex;color:var(--paper-dim);font-size:13.5px;font-weight:600;letter-spacing:0.01em;text-decoration:none;transition:color 180ms ease, transform 180ms ease
}.primary-menu a:not(.nav-cta)::after{content:"";position:absolute;right:0;bottom:-7px;left:0;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform 220ms ease
}.primary-menu a:hover,
.primary-menu a:focus-visible,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a{color:#fff
}.primary-menu a:not(.nav-cta):hover::after,
.primary-menu a:not(.nav-cta):focus-visible::after,
.primary-menu .current-menu-item > a::after,
.primary-menu .current_page_item > a::after{transform:scaleX(1)
}.primary-menu .sub-menu{position:absolute;top:calc(100% + 18px);left:-16px;display:grid;min-width:210px;gap:0;padding:10px;border-radius:16px;background:rgba(7, 15, 25, 0.92);box-shadow:0 22px 60px rgba(0, 0, 0, 0.38);list-style:none;opacity:0;visibility:hidden;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);transform:translateY(-8px);transition:opacity 180ms ease, transform 180ms ease, visibility 180ms ease
}.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0)
}.primary-menu .sub-menu a{display:block;padding:10px 12px;border-radius:10px
}.primary-menu .sub-menu a::after{display:none
}.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible{background:rgba(255, 255, 255, 0.07)
}.nav-cta{padding:10px 18px;border-radius:999px;background:rgba(255, 255, 255, 0.94);color:#08111c!important;box-shadow:0 10px 30px rgba(0, 0, 0, 0.16)
}.nav-cta:hover,
.nav-cta:focus-visible{color:#08111c;transform:translateY(-1px)
}.burger{display:none;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255, 255, 255, 0.07);cursor:pointer
}.burger span{display:block;width:20px;height:1.5px;margin:5px auto;border-radius:999px;background:#fff;transition:transform 240ms ease, opacity 180ms ease
}.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)
}.burger[aria-expanded="true"] span:nth-child(2){opacity:0
}.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)
}.hero{display:flex;min-height:92vh;max-width:var(--page-width);margin:0 auto;padding:124px var(--page-pad) 64px;flex-direction:column;justify-content:center
}.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--ember);font-size:12px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase
}.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:0.7
}.hero h1{max-width:13ch;font-size:clamp(46px, 8.2vw, 104px);font-weight:500;letter-spacing:-0.072em;line-height:0.98;text-wrap:balance
}.hero h1 em{color:var(--ember-hot);font-style:normal;font-weight:650
}.hero .lede{max-width:55ch;margin-top:28px;color:var(--paper-dim);font-size:clamp(16px, 1.7vw, 18px);font-weight:450;line-height:1.72
}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px
}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border:0;border-radius:999px;font-size:14px;font-weight:700;text-decoration:none;transition:transform 200ms ease, background 200ms ease, box-shadow 200ms ease
}.btn:hover,
.btn:focus-visible{transform:translateY(-2px)
}.btn-primary{background:var(--spotify);color:#062611;box-shadow:0 14px 34px rgba(29, 185, 84, 0.18)
}.btn-primary:hover,
.btn-primary:focus-visible{background:#1ed760;color:#062611;box-shadow:0 18px 40px rgba(29, 185, 84, 0.24)
}.btn-ghost{background:rgba(255, 255, 255, 0.07);color:#fff;box-shadow:0 12px 32px rgba(0, 0, 0, 0.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}.btn-ghost:hover,
.btn-ghost:focus-visible{background:rgba(255, 255, 255, 0.11);color:#fff
}.collections{position:relative;max-width:var(--collections-width);margin:0 auto;padding:32px var(--page-pad) 120px
}.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px
}.sec-head h2{font-size:clamp(28px, 3.5vw, 42px);font-weight:600;letter-spacing:-0.055em;line-height:1.06
}.sec-head p{max-width:45ch;color:var(--paper-dim);font-size:14px;line-height:1.65
}.masonry{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--grid-gap);align-items:stretch
}.card{--mouse-x:50%;--mouse-y:0%;position:relative;display:flex;min-width:0;aspect-ratio:1 / 1;min-height:0;overflow:hidden;padding:24px;border:0;border-radius:24px;flex-direction:column;color:var(--paper);text-decoration:none;background:radial-gradient(240px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.15), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));box-shadow:0 24px 68px rgba(0, 0, 0, 0.30),
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);transform:translate3d(0, 0, 0);transition:transform 280ms cubic-bezier(0.2, 0.75, 0.2, 1), background 280ms ease, box-shadow 280ms ease;isolation:isolate
}.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(180px circle at 100% 0%, rgba(29, 185, 84, 0.10), transparent 72%),linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 38%);opacity:0.9;pointer-events:none
}.card::after{content:"";position:absolute;right:-26%;bottom:-42%;z-index:-1;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle, rgba(255, 138, 60, 0.10), transparent 70%);opacity:0;transform:scale(0.84);transition:opacity 280ms ease, transform 420ms ease;pointer-events:none
}.card:hover,
.card:focus-visible{color:var(--paper);transform:translate3d(0, -8px, 0);background:radial-gradient(260px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.19), transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));box-shadow:0 34px 84px rgba(0, 0, 0, 0.38),
    0 8px 20px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);outline:none
}.card:hover::after,
.card:focus-visible::after{opacity:1;transform:scale(1)
}.card .card-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:32px
}.card .kicker{position:relative;color:rgba(225, 232, 238, 0.70);font-size:10.5px;font-weight:700;letter-spacing:0.17em;text-transform:uppercase
}.card .spotify-badge{display:grid;width:30px;height:30px;flex:none;border-radius:50%;place-items:center;background:rgba(29, 185, 84, 0.10);color:#35d46f;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.08),0 8px 20px rgba(0, 0, 0, 0.12);transition:transform 220ms ease,background 220ms ease,color 220ms ease,box-shadow 220ms ease
}.card .spotify-badge svg{width:17px;height:17px
}.card:hover .spotify-badge,.card:focus-visible .spotify-badge{background:var(--spotify);color:#062611;box-shadow:0 10px 26px rgba(29, 185, 84, 0.22);transform:translateY(-1px) scale(1.04)
}.card h3{position:relative;margin:10px 0;color:#fff;font-size:clamp(20px, 2vw, 25px);font-weight:650;letter-spacing:-0.045em;line-height:1.16
}.card .meta{position:relative;color:var(--paper-dim);font-size:13px;line-height:1.62
}.card .tags{position:relative;display:flex;flex-wrap:wrap;gap:7px;margin-top:18px
}.card .tags span{padding:6px 10px;border-radius:999px;background:rgba(255, 255, 255, 0.065);color:rgba(230, 235, 239, 0.78);font-size:10px;font-weight:650;letter-spacing:0.03em
}.card .foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:22px;color:rgba(218, 226, 232, 0.72);font-size:11.5px;font-weight:600
}.card .card-count{display:inline-flex;align-items:center;gap:8px
}.card .card-count::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--spotify);box-shadow:0 0 12px rgba(29, 185, 84, 0.55)
}.card .play{display:grid;width:36px;height:36px;flex:none;border-radius:50%;place-items:center;background:rgba(29, 185, 84, 0.12);color:#72e49a;box-shadow:0 8px 22px rgba(0, 0, 0, 0.15);transition:transform 220ms ease, background 220ms ease, color 220ms ease
}.card:hover .play,
.card:focus-visible .play{background:var(--spotify);color:#062611;transform:scale(1.06) translateX(2px)
}.site-footer{position:relative;display:flex;max-width:var(--page-width);margin:0 auto;padding:42px var(--page-pad) 60px;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid rgba(255, 255, 255, 0.08);color:var(--paper-dim);font-size:12.5px
}.site-footer .brand{font-size:19px
}.footer-copy{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px
}.footer-menu{display:flex;flex-wrap:wrap;gap:14px;list-style:none
}.footer-menu a{color:var(--paper-dim);text-decoration:none
}.footer-menu a:hover,
.footer-menu a:focus-visible{color:#fff
}.site-content{width:min(100%, calc(var(--page-width) + (var(--page-pad) * 2)));min-height:72vh;margin:0 auto;padding:154px var(--page-pad) 110px
}.archive-header{max-width:860px;margin-bottom:48px
}.archive-header h1,
.entry-header h1,
.empty-state h1{color:#fff;font-size:clamp(40px, 6vw, 76px);font-weight:550;letter-spacing:-0.065em;line-height:1.02;text-wrap:balance
}.archive-description,
.empty-state p{max-width:64ch;margin-top:20px;color:var(--paper-dim);font-size:17px;line-height:1.75
}.post-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px
}.post-card{min-width:0;overflow:hidden;border-radius:24px;background:linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));box-shadow:0 24px 68px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);transition:transform 260ms ease, box-shadow 260ms ease
}.post-card:hover,
.post-card:focus-within{transform:translateY(-6px);box-shadow:0 34px 84px rgba(0, 0, 0, 0.37), inset 0 1px 0 rgba(255, 255, 255, 0.1)
}.post-card-link{display:flex;height:100%;flex-direction:column;color:inherit;text-decoration:none
}.post-card-image{aspect-ratio:16 / 10;overflow:hidden
}.post-card-image img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(0.2, 0.75, 0.2, 1)
}.post-card:hover .post-card-image img{transform:scale(1.035)
}.post-card-content{display:flex;padding:24px;flex:1;flex-direction:column
}.post-card-meta,
.entry-meta{color:var(--ember);font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase
}.post-card h2{margin:10px 0 12px;color:#fff;font-size:24px;font-weight:650;letter-spacing:-0.045em;line-height:1.16
}.post-card-excerpt{color:var(--paper-dim);font-size:14px;line-height:1.65
}.post-card-excerpt p{margin:0
}.post-card-read{margin-top:auto;padding-top:22px;color:#fff;font-size:12px;font-weight:700
}.singular-shell{max-width:1040px
}.entry-shell{padding:clamp(26px, 5vw, 64px);border-radius:30px;background:linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.032));box-shadow:0 28px 80px rgba(0, 0, 0, 0.31), inset 0 1px 0 rgba(255, 255, 255, 0.08);backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%)
}.entry-header{max-width:820px;margin-bottom:38px
}.entry-meta{margin-bottom:14px
}.entry-featured-image{margin:0 0 42px;overflow:hidden;border-radius:22px
}.entry-featured-image img{display:block;width:100%
}.entry-content{color:#d6dde3;font-size:clamp(16px, 1.7vw, 18px);line-height:1.82
}.entry-content > * + *{margin-top:1.35em
}.entry-content h2,
.entry-content h3,
.entry-content h4{color:#fff;font-weight:650;letter-spacing:-0.04em;line-height:1.15
}.entry-content h2{margin-top:1.8em;font-size:clamp(30px, 4vw, 46px)
}.entry-content h3{margin-top:1.6em;font-size:clamp(24px, 3vw, 34px)
}.entry-content a,
.entry-footer-meta a,
.comment-content a{color:var(--ember-hot);text-underline-offset:3px
}.entry-content blockquote{padding:4px 0 4px 24px;border-left:2px solid var(--ember);color:#fff;font-size:1.14em
}.entry-content ul,
.entry-content ol{padding-left:1.4em
}.entry-content code,
.entry-content pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
}.entry-content pre{overflow-x:auto;padding:20px;border-radius:16px;background:rgba(0, 0, 0, 0.28)
}.entry-content table{width:100%;border-collapse:collapse
}.entry-content th,
.entry-content td{padding:12px;border-bottom:1px solid rgba(255, 255, 255, 0.11);text-align:left
}.entry-footer-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:48px;padding-top:24px;border-top:1px solid rgba(255, 255, 255, 0.09);color:var(--paper-dim);font-size:13px
}.post-navigation-shell,
.comments-area{margin-top:24px
}.post-navigation .nav-links,
.posts-navigation .nav-links,
.pagination .nav-links{display:flex;justify-content:space-between;gap:20px;margin-top:36px
}.post-navigation a,
.posts-navigation a,
.pagination a,
.pagination .current{display:inline-flex;padding:12px 16px;border-radius:999px;background:rgba(255, 255, 255, 0.07);color:#fff;text-decoration:none
}.pagination .current{background:var(--ember);color:#15100d
}.comments-title,
.comment-reply-title{margin-bottom:24px;color:#fff;font-size:28px;letter-spacing:-0.04em
}.comment-list{display:grid;gap:18px;margin:0 0 34px;list-style:none
}.comment-list .children{margin:18px 0 0 24px;list-style:none
}.comment-body{padding:18px;border-radius:16px;background:rgba(255, 255, 255, 0.045)
}.comment-meta{margin-bottom:10px;font-size:13px
}.comment-meta a{color:var(--paper-dim)
}.comment-content{color:#d6dde3;line-height:1.7
}.comment-form{display:grid;gap:16px
}.comment-form p{display:grid;gap:7px
}input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select{width:100%;padding:13px 15px;border:1px solid rgba(255, 255, 255, 0.1);border-radius:12px;outline:none;background:rgba(255, 255, 255, 0.055);color:#fff
}input:focus,
textarea:focus,
select:focus{border-color:rgba(255, 208, 106, 0.6);box-shadow:0 0 0 3px rgba(255, 208, 106, 0.1)
}input[type="submit"],
button[type="submit"]{width:fit-content;padding:13px 20px;border:0;border-radius:999px;background:var(--spotify);color:#062611;font-weight:700;cursor:pointer
}.search-form{display:flex;gap:10px;margin-top:24px
}.empty-state .btn{margin-top:28px
}.alignwide{width:min(120%, 1180px);max-width:1180px;margin-left:50%;transform:translateX(-50%)
}.alignfull{width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)
}.wp-caption,
.gallery-caption{color:var(--paper-dim);font-size:13px
}.sticky,
.bypostauthor{outline:none
}@media (min-width: 1041px){.hero h1{max-width:none;font-size:clamp(58px, 5.7vw, 72px);letter-spacing:-0.045em;line-height:1.04;text-wrap:initial
  }.hero-title-line{display:block;white-space:nowrap
  }}@media (max-width: 1040px){.masonry{grid-template-columns:repeat(2, minmax(0, 1fr))
  }.post-grid{grid-template-columns:repeat(2, minmax(0, 1fr))
  }}@media (max-width: 782px){body.admin-bar .site-header{top:46px
  }}@media (max-width: 760px){.site-header{padding-top:14px;padding-bottom:14px
  }.burger{position:relative;z-index:42;display:block
  }.primary-menu{position:fixed;inset:0 0 auto;z-index:41;display:flex;max-height:100vh;overflow-y:auto;padding:88px var(--page-pad) 30px;flex-direction:column;align-items:stretch;gap:0;background:rgba(5, 10, 17, 0.94);box-shadow:0 24px 60px rgba(0, 0, 0, 0.34);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);transform:translateY(-110%);transition:transform 320ms cubic-bezier(0.22, 0.75, 0.2, 1)
  }body.admin-bar .primary-menu{top:46px
  }.primary-menu.open{transform:translateY(0)
  }.primary-menu .menu-item{width:100%
  }.primary-menu a{width:100%;padding:14px 2px;font-size:17px
  }.primary-menu a::after{display:none
  }.primary-menu .sub-menu{position:static;display:grid;min-width:0;padding:0 0 8px 16px;background:transparent;box-shadow:none;opacity:1;visibility:visible;transform:none
  }.nav-cta{margin-top:12px;justify-content:center;padding:14px 18px!important
  }.hero{min-height:88vh;padding-top:112px
  }.sec-head{align-items:flex-start;flex-direction:column
  }.site-footer,
  .footer-copy{align-items:flex-start;flex-direction:column
  }.post-grid{grid-template-columns:minmax(0, 1fr)
  }.site-content{padding-top:126px
  }.entry-shell{padding:24px;border-radius:24px
  }.archive-header h1,
  .entry-header h1,
  .empty-state h1{font-size:clamp(38px, 12vw, 58px)
  }}@media (max-width: 620px){.masonry{grid-template-columns:minmax(0, 1fr);gap:16px
  }.card{min-height:220px;border-radius:22px
  }.search-form{flex-direction:column
  }}@media (prefers-reduced-motion: reduce){*, *::before, *::after{scroll-behavior:auto!important;animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important
  }}


/* Playlist artwork and track previews. All other theme presentation remains unchanged. */
.card.has-art,
.card.has-tracks{padding:20px
}.playlist-intro{position:relative;min-width:0
}.card.has-art .playlist-intro{display:grid;grid-template-columns:76px minmax(0, 1fr);align-items:center;gap:13px;margin-top:8px
}.playlist-copy{min-width:0
}.playlist-art{position:relative;width:76px;aspect-ratio:1 / 1;isolation:isolate
}.playlist-art::before{content:"";position:absolute;inset:12px -5px -7px;z-index:-1;border-radius:18px;background-image:var(--playlist-art);background-position:center;background-size:cover;filter:blur(14px) saturate(1.25);opacity:.52;transform:scale(.94);pointer-events:none
}.playlist-art::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(145deg, rgba(255,255,255,.13), transparent 42%, rgba(0,0,0,.13));box-shadow:inset 0 1px 0 rgba(255,255,255,.15);pointer-events:none
}.playlist-art img{display:block;width:100%;height:100%;border-radius:16px;object-fit:cover;box-shadow:0 15px 30px rgba(0,0,0,.34),0 3px 10px rgba(0,0,0,.18);transform:translateZ(0);transition:transform 420ms cubic-bezier(.2,.75,.2,1),box-shadow 300ms ease
}.card:hover .playlist-art img,
.card:focus-visible .playlist-art img{box-shadow:0 18px 38px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);transform:scale(1.035) translateY(-1px)
}.card.has-art .playlist-copy h3{margin:0 0 5px;font-size:clamp(17px, 1.45vw, 21px);line-height:1.12
}.card.has-art .playlist-copy .meta{display:-webkit-box;overflow:hidden;font-size:11px;line-height:1.48;-webkit-box-orient:vertical;-webkit-line-clamp:2
}.card.has-art .tags,
.card.has-tracks .tags{margin-top:11px
}.track-list{position:relative;display:grid;gap:3px;margin-top:10px;list-style:none
}.track-row{display:grid;min-width:0;min-height:25px;padding:2px 6px 2px 0;grid-template-columns:14px 22px minmax(0, 1fr);align-items:center;gap:7px;border-radius:9px;background:linear-gradient(90deg, rgba(255,255,255,.035), transparent 86%);transition:background 220ms ease,transform 220ms ease
}.card:hover .track-row,
.card:focus-visible .track-row{background:linear-gradient(90deg, rgba(29,185,84,.075), transparent 88%)
}.track-number{color:rgba(207,217,224,.54);font-size:8.5px;font-weight:700;text-align:center
}.track-artist-logo{display:grid;width:22px;height:22px;overflow:hidden;border-radius:50%;place-items:center;background:rgba(29,185,84,.11);color:#6ee596;box-shadow:0 5px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08)
}.track-artist-logo img{width:100%;height:100%;object-fit:cover
}.track-artist-logo svg{width:10px;height:10px
}.track-copy{display:grid;min-width:0;line-height:1.05
}.track-title,
.track-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}.track-title{color:rgba(250,250,250,.92);font-size:10px;font-weight:700;letter-spacing:-.015em
}.track-artist{margin-top:2px;color:rgba(191,202,211,.64);font-size:8.2px;font-weight:550
}.card.has-tracks .foot{padding-top:10px
}.card.has-tracks .play{width:32px;height:32px
}.card.has-tracks .card-count{font-size:10.5px
}@media (max-width:1040px){.card.has-art .playlist-intro{grid-template-columns:84px minmax(0, 1fr);gap:15px
  }.playlist-art{width:84px
  }.card.has-art .playlist-copy h3{font-size:22px
  }.card.has-art .playlist-copy .meta{font-size:12px
  }.track-row{min-height:29px;grid-template-columns:16px 25px minmax(0, 1fr);gap:8px
  }.track-artist-logo{width:25px;height:25px
  }.track-title{font-size:11px
  }.track-artist{font-size:9px
  }}@media (max-width:620px){.card.has-art,
  .card.has-tracks{padding:24px
  }.card.has-art .playlist-intro{grid-template-columns:96px minmax(0, 1fr);gap:17px;margin-top:12px
  }.playlist-art{width:96px
  }.playlist-art::after,
  .playlist-art img{border-radius:19px
  }.card.has-art .playlist-copy h3{font-size:clamp(22px, 6vw, 28px)
  }.card.has-art .playlist-copy .meta{font-size:13px;line-height:1.55;-webkit-line-clamp:3
  }.track-list{gap:5px;margin-top:15px
  }.track-row{min-height:34px;grid-template-columns:18px 29px minmax(0, 1fr);gap:9px
  }.track-artist-logo{width:29px;height:29px
  }.track-title{font-size:12px
  }.track-artist{font-size:9.5px
  }.card.has-tracks .foot{padding-top:16px
  }}
.card.has-art .playlist-copy h3{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2
}.card.has-art.has-tracks .playlist-copy .meta{-webkit-line-clamp:1
}.card.has-tracks .tags{flex-wrap:nowrap;overflow:hidden
}.card.has-tracks:not(.has-art) h3{display:-webkit-box;overflow:hidden;margin:8px 0 5px;font-size:21px;-webkit-box-orient:vertical;-webkit-line-clamp:2
}.card.has-tracks:not(.has-art) .meta{display:-webkit-box;overflow:hidden;font-size:11px;line-height:1.48;-webkit-box-orient:vertical;-webkit-line-clamp:1
}@media (max-width:1040px){.card.has-art.has-tracks .playlist-copy .meta{-webkit-line-clamp:2
  }.card.has-tracks:not(.has-art) .meta{font-size:12px;-webkit-line-clamp:2
  }}