/*
Theme Name: Wingmen Productions
Theme URI: https://wingmenproductions.com
Author: Wingmen Productions
Author URI: https://wingmenproductions.com
Description: A dark, high-contrast theme for Wingmen Productions — an urban music production company creating hip-hop, R&B, and Pop tracks. Includes a custom "Tracks" manager so the admin can upload MP3 demos that visitors can stream on the site.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wingmen
Tags: music, dark, custom-colors, custom-menu, featured-images, threaded-comments
*/

/* ==========================================================================
   Design tokens — palette pulled straight from the Wingmen logo
   green #0F4101 · red #FC0F02 · jet-body grays · black
   ========================================================================== */
:root{
  --wm-black:      #0E0E0E;
  --wm-panel:      #161616;
  --wm-panel-2:    #1D1D1D;
  --wm-line:       #2C2C2C;

  --wm-green:      #0F4101;  /* logo brand green (deep)      */
  --wm-green-mid:  #2E7D32;  /* readable green accent        */
  --wm-green-brt:  #57C24A;  /* links / hover / glow on dark */

  --wm-red:        #E8261A;  /* headphones / afterburner     */
  --wm-red-dark:   #B01308;

  --wm-gray:       #6E6E6E;  /* jet body                     */
  --wm-fog:        #B7B7B7;  /* muted text                   */
  --wm-white:      #F4F4F2;

  --wm-maxw: 1200px;
  --wm-radius: 4px;
  --wm-shadow: 0 18px 40px -18px rgba(0,0,0,.75);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--wm-black);
  color:var(--wm-white);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--wm-green-brt); text-decoration:none; transition:color .18s ease; }
a:hover{ color:#7ad86e; }
p{ margin:0 0 1.1em; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.05;
  margin:0 0 .5em;
  letter-spacing:.5px;
}
h1{ font-size:clamp(2.6rem,6vw,4.6rem); text-transform:uppercase; }
h2{ font-size:clamp(2rem,4vw,3rem); text-transform:uppercase; }
h3{ font-size:1.5rem; }

.wm-eyebrow{
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:.82rem;
  color:var(--wm-green-brt);
  display:inline-block;
  margin-bottom:1rem;
}
.wm-eyebrow::before{
  content:""; display:inline-block; width:30px; height:2px;
  background:var(--wm-red); vertical-align:middle; margin-right:.9em;
  transform:translateY(-3px);
}

.wm-container{ width:100%; max-width:var(--wm-maxw); margin:0 auto; padding:0 24px; }
.wm-section{ padding:96px 0; position:relative; }
.wm-section--alt{ background:var(--wm-panel); }
.wm-section__head{ max-width:720px; margin-bottom:56px; }
.wm-lead{ font-size:1.15rem; color:var(--wm-fog); }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--wm-red); color:#fff; padding:12px 18px; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.1em;
}
.skip-link:focus{ left:12px; top:12px; color:#fff; }

:focus-visible{ outline:3px solid var(--wm-green-brt); outline-offset:3px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.wm-btn{
  --btn-bg:var(--wm-red);
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:1rem; line-height:1;
  padding:16px 30px; border-radius:var(--wm-radius); border:2px solid transparent;
  background:var(--btn-bg); color:#fff; cursor:pointer;
  transition:transform .16s ease, background .18s ease, box-shadow .18s ease;
}
.wm-btn:hover{ transform:translateY(-2px); background:var(--wm-red-dark); color:#fff; box-shadow:0 12px 24px -10px rgba(232,38,26,.7); }
.wm-btn--ghost{ background:transparent; border-color:var(--wm-gray); color:var(--wm-white); }
.wm-btn--ghost:hover{ background:transparent; border-color:var(--wm-green-brt); color:var(--wm-green-brt); box-shadow:none; }
.wm-btn--green{ --btn-bg:var(--wm-green-mid); }
.wm-btn--green:hover{ background:var(--wm-green); box-shadow:0 12px 24px -10px rgba(46,125,50,.6); }
.wm-btn--sm{ padding:11px 20px; font-size:.85rem; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.wm-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,10,.86);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--wm-line);
}
.wm-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:88px; }
.wm-brand{ display:flex; align-items:center; }
.wm-brand img{ height:52px; width:auto; }
.wm-brand .wm-brand__text{ font-family:var(--font-display); text-transform:uppercase; color:#fff; font-size:1.4rem; letter-spacing:.05em; }

.wm-nav{ display:flex; align-items:center; gap:34px; }
.wm-menu{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.wm-menu a{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.98rem; color:var(--wm-white); position:relative; padding:6px 0;
}
.wm-menu a:hover, .wm-menu .current-menu-item > a{ color:var(--wm-green-brt); }
.wm-menu .current-menu-item > a::after,
.wm-menu a:hover::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--wm-red);
}
.wm-menu .sub-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:200px;
  background:var(--wm-panel-2); border:1px solid var(--wm-line); border-radius:var(--wm-radius);
  padding:8px 0; list-style:none; margin:0; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:.18s ease; box-shadow:var(--wm-shadow);
}
.wm-menu li{ position:relative; }
.wm-menu li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.wm-menu .sub-menu a{ display:block; padding:9px 18px; }
.wm-menu .sub-menu a::after{ display:none; }

.wm-nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:8px;
  width:46px; height:46px;
}
.wm-nav-toggle span, .wm-nav-toggle span::before, .wm-nav-toggle span::after{
  content:""; display:block; width:26px; height:2px; background:var(--wm-white); position:relative; transition:.2s ease;
}
.wm-nav-toggle span::before{ position:absolute; top:-8px; }
.wm-nav-toggle span::after{ position:absolute; top:8px; }
.wm-nav-toggle[aria-expanded="true"] span{ background:transparent; }
.wm-nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.wm-nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

/* ==========================================================================
   Signature element — animated EQ / spectrum bars
   ========================================================================== */
.wm-eq{ display:flex; align-items:flex-end; gap:5px; height:46px; }
.wm-eq span{
  width:6px; background:linear-gradient(var(--wm-green-brt), var(--wm-green-mid));
  border-radius:2px 2px 0 0; animation:wm-eq 1.2s ease-in-out infinite;
}
.wm-eq span:nth-child(1){ animation-delay:-.9s;  height:40%; }
.wm-eq span:nth-child(2){ animation-delay:-.3s;  height:70%; }
.wm-eq span:nth-child(3){ animation-delay:-.6s;  height:100%; }
.wm-eq span:nth-child(4){ animation-delay:-.1s;  height:55%; }
.wm-eq span:nth-child(5){ animation-delay:-.7s;  height:85%; }
.wm-eq span:nth-child(6){ animation-delay:-.4s;  height:45%; }
.wm-eq span:nth-child(7){ animation-delay:-.8s;  height:75%; }
.wm-eq span:nth-child(3n){ background:linear-gradient(var(--wm-red), var(--wm-red-dark)); }
@keyframes wm-eq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

/* ==========================================================================
   Hero
   ========================================================================== */
.wm-hero{
  position:relative; overflow:hidden;
  padding:110px 0 96px;
  background:
    radial-gradient(1000px 480px at 78% -10%, rgba(15,65,1,.5), transparent 60%),
    radial-gradient(700px 420px at 8% 120%, rgba(232,38,26,.16), transparent 55%),
    var(--wm-black);
  border-bottom:1px solid var(--wm-line);
}
.wm-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--wm-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--wm-line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.08;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 40%, transparent 100%);
          mask-image:radial-gradient(70% 60% at 50% 40%, #000 40%, transparent 100%);
}
.wm-hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.wm-hero__logo{ filter:drop-shadow(0 22px 44px rgba(0,0,0,.6)); }
.wm-hero__logo img{ width:100%; max-width:560px; margin-inline:auto; }
.wm-hero h1{ margin-bottom:.35em; }
.wm-hero h1 em{ color:var(--wm-green-brt); font-style:normal; }
.wm-hero__sub{ font-size:1.2rem; color:var(--wm-fog); max-width:520px; }
.wm-hero__cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.wm-hero__eq{ margin-top:44px; }

/* ==========================================================================
   Stat / marquee genre strip
   ========================================================================== */
.wm-genres{ background:var(--wm-green); }
.wm-genres__track{
  display:flex; gap:56px; align-items:center; padding:18px 0; overflow:hidden; white-space:nowrap;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:1.05rem; color:#dfeadb;
}
.wm-genres__track span{ display:inline-flex; align-items:center; gap:56px; }
.wm-genres__track b{ color:#fff; font-weight:600; }
.wm-dot{ width:8px; height:8px; background:var(--wm-red); border-radius:50%; display:inline-block; }

/* ==========================================================================
   Cards / services
   ========================================================================== */
.wm-grid{ display:grid; gap:24px; }
.wm-grid--3{ grid-template-columns:repeat(3,1fr); }
.wm-grid--2{ grid-template-columns:repeat(2,1fr); }
.wm-grid--4{ grid-template-columns:repeat(4,1fr); }

.wm-card{
  background:var(--wm-panel-2); border:1px solid var(--wm-line); border-radius:var(--wm-radius);
  padding:34px 30px; position:relative; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.wm-card::before{
  content:""; position:absolute; left:0; top:0; height:100%; width:4px; background:var(--wm-red);
  transform:scaleY(0); transform-origin:top; transition:transform .25s ease;
}
.wm-card:hover{ transform:translateY(-4px); border-color:var(--wm-gray); }
.wm-card:hover::before{ transform:scaleY(1); }
.wm-card__num{ font-family:var(--font-display); color:var(--wm-gray); font-size:1rem; letter-spacing:.2em; }
.wm-card h3{ margin:.5em 0 .4em; }
.wm-card p{ color:var(--wm-fog); margin:0; }

/* who-we-serve chips */
.wm-chips{ display:flex; flex-wrap:wrap; gap:12px; }
.wm-chip{
  border:1px solid var(--wm-line); border-radius:100px; padding:9px 18px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; color:var(--wm-white);
  background:var(--wm-panel-2);
}
.wm-chip:hover{ border-color:var(--wm-green-brt); color:var(--wm-green-brt); }

/* split feature block */
.wm-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.wm-split__media{
  aspect-ratio:4/3; border-radius:var(--wm-radius); border:1px solid var(--wm-line); overflow:hidden;
  background:radial-gradient(120% 120% at 20% 10%, rgba(15,65,1,.5), var(--wm-panel-2));
  display:flex; align-items:center; justify-content:center;
}
.wm-split__media img{ width:78%; }

/* ==========================================================================
   Tracks / demos
   ========================================================================== */
.wm-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.wm-filter{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.9rem;
  padding:9px 18px; border-radius:100px; border:1px solid var(--wm-line); background:transparent; color:var(--wm-fog);
  cursor:pointer; transition:.18s ease;
}
.wm-filter:hover{ color:#fff; border-color:var(--wm-gray); }
.wm-filter.is-active{ background:var(--wm-red); border-color:var(--wm-red); color:#fff; }

.wm-tracks{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.wm-track{
  display:grid; grid-template-columns:96px 1fr; gap:20px; align-items:center;
  background:var(--wm-panel-2); border:1px solid var(--wm-line); border-radius:var(--wm-radius);
  padding:18px; transition:border-color .2s ease, transform .2s ease;
}
.wm-track:hover{ border-color:var(--wm-gray); transform:translateY(-3px); }
.wm-track.is-playing{ border-color:var(--wm-green-mid); box-shadow:0 0 0 1px var(--wm-green-mid) inset; }
.wm-track__art{
  width:96px; height:96px; border-radius:var(--wm-radius); overflow:hidden; position:relative;
  background:linear-gradient(135deg, var(--wm-green), #0a2a01); flex:none;
}
.wm-track__art img{ width:100%; height:100%; object-fit:cover; }
.wm-track__art .wm-track__mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.6rem; color:rgba(255,255,255,.85); letter-spacing:.05em;
}
.wm-track__body{ min-width:0; }
.wm-track__title{ font-family:var(--font-display); font-size:1.35rem; text-transform:uppercase; margin:0 0 4px; line-height:1.05; }
.wm-track__meta{ display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--wm-fog); font-size:.86rem; margin-bottom:12px; }
.wm-track__meta .tag{ color:var(--wm-green-brt); font-family:var(--font-display); letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; }

/* custom audio player */
.wm-player{ display:flex; align-items:center; gap:14px; }
.wm-player__btn{
  width:46px; height:46px; flex:none; border-radius:50%; border:0; cursor:pointer;
  background:var(--wm-red); color:#fff; display:grid; place-items:center; transition:.16s ease;
}
.wm-player__btn:hover{ background:var(--wm-red-dark); transform:scale(1.06); }
.wm-player__btn svg{ width:18px; height:18px; }
.wm-player__btn .icon-pause{ display:none; }
.wm-player.is-playing .wm-player__btn{ background:var(--wm-green-mid); }
.wm-player.is-playing .icon-play{ display:none; }
.wm-player.is-playing .icon-pause{ display:block; }
.wm-player__prog{ flex:1; display:flex; align-items:center; gap:10px; }
.wm-player__bar{
  position:relative; flex:1; height:6px; background:var(--wm-line); border-radius:100px; cursor:pointer;
}
.wm-player__fill{ position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,var(--wm-green-brt),var(--wm-red)); border-radius:100px; }
.wm-player__time{ font-variant-numeric:tabular-nums; font-size:.82rem; color:var(--wm-fog); min-width:74px; text-align:right; }

.wm-tracks__empty{
  grid-column:1/-1; text-align:center; padding:70px 20px; border:1px dashed var(--wm-line);
  border-radius:var(--wm-radius); color:var(--wm-fog);
}
.wm-tracks__empty h3{ color:var(--wm-white); }

/* ==========================================================================
   Jukebox (Music page) — one shared player, click-to-play list
   ========================================================================== */
.wm-jukebox{
  border:1px solid var(--wm-line); border-radius:var(--wm-radius);
  background:var(--wm-panel-2);
}

/* --- shared "now playing" bar (sticky) --- */
.wm-jukebox__now{
  position:sticky; top:70px; z-index:5;
  display:grid; align-items:center; gap:12px 18px;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"cover info transport" "progress progress progress";
  padding:16px 20px;
  background:linear-gradient(180deg,var(--wm-panel),var(--wm-panel-2));
  border-bottom:1px solid var(--wm-line);
  border-top-left-radius:var(--wm-radius); border-top-right-radius:var(--wm-radius);
}
.wm-jukebox__cover{ grid-area:cover; }
.wm-jukebox__info{ grid-area:info; }
.wm-jukebox__transport{ grid-area:transport; }
.wm-jukebox__progress{ grid-area:progress; }
.wm-jukebox__cover{
  position:relative; width:64px; height:64px; flex:none; border-radius:var(--wm-radius);
  overflow:hidden; background:linear-gradient(135deg,var(--wm-green),#0a2a01);
  display:grid; place-items:center;
}
.wm-jukebox__cover-img{ display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wm-jukebox__cover.has-cover .wm-jukebox__cover-img{ display:block; }
.wm-jukebox__cover.has-cover .wm-jukebox__cover-mark{ display:none; }
.wm-jukebox__cover-mark{
  font-family:var(--font-display); font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.92); font-size:1rem;
}
.wm-jukebox__eq{
  position:absolute; inset:0; height:auto; padding:10px 12px; gap:4px; align-items:flex-end;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55)); display:none;
}
.wm-jukebox__eq span{ width:5px; }
.wm-jukebox__now.is-playing .wm-jukebox__eq{ display:flex; }

.wm-jukebox__info{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.wm-jukebox__status{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; color:var(--wm-green-brt);
}
.wm-jukebox__now.is-empty .wm-jukebox__status{ color:var(--wm-gray); }
.wm-jukebox__np-title{
  font-family:var(--font-display); text-transform:uppercase; font-size:1.3rem; line-height:1.05; color:var(--wm-white);
}
.wm-jukebox__np-meta{ color:var(--wm-fog); font-size:.85rem; }

.wm-jukebox__transport{ display:flex; align-items:center; gap:8px; flex:none; }
.wm-jukebox__ctl{
  border:0; cursor:pointer; color:#fff; display:grid; place-items:center;
  background:var(--wm-panel); border:1px solid var(--wm-line); border-radius:50%;
  width:42px; height:42px; transition:.16s ease;
}
.wm-jukebox__ctl svg{ width:20px; height:20px; }
.wm-jukebox__ctl:hover:not(:disabled){ border-color:var(--wm-gray); color:var(--wm-white); }
.wm-jukebox__play{ width:52px; height:52px; background:var(--wm-red); border-color:var(--wm-red); }
.wm-jukebox__play:hover:not(:disabled){ background:var(--wm-red-dark); border-color:var(--wm-red-dark); transform:scale(1.05); }
.wm-jukebox__now.is-playing .wm-jukebox__play{ background:var(--wm-green-mid); border-color:var(--wm-green-mid); }
.wm-jukebox__ctl:disabled{ opacity:.4; cursor:default; }
.wm-jukebox__play .icon-pause{ display:none; }
.wm-jukebox__now.is-playing .wm-jukebox__play .icon-play{ display:none; }
.wm-jukebox__now.is-playing .wm-jukebox__play .icon-pause{ display:block; }

.wm-jukebox__progress{ flex-basis:100%; order:5; display:flex; align-items:center; gap:12px; }
.wm-jukebox__bar{
  position:relative; flex:1; height:7px; background:var(--wm-line); border-radius:100px; cursor:pointer;
}
.wm-jukebox__now.is-empty .wm-jukebox__bar{ cursor:default; }
.wm-jukebox__fill{
  position:absolute; left:0; top:0; height:100%; width:0;
  background:linear-gradient(90deg,var(--wm-green-brt),var(--wm-red)); border-radius:100px;
}
.wm-jukebox__cur,.wm-jukebox__dur{
  font-variant-numeric:tabular-nums; font-size:.8rem; color:var(--wm-fog); min-width:40px;
}
.wm-jukebox__dur{ text-align:right; }

/* --- the list --- */
.wm-jukebox__list{ list-style:none; margin:0; padding:6px; }
.wm-jukebox__item{ margin:0; }
.wm-jukebox__row{
  width:100%; display:grid; grid-template-columns:38px 46px 1fr auto; align-items:center; gap:14px;
  background:transparent; border:0; border-radius:var(--wm-radius); cursor:pointer;
  padding:10px 12px; text-align:left; color:var(--wm-white); transition:background .15s ease;
}
.wm-jukebox__row:hover{ background:var(--wm-panel); }
.wm-jukebox__item.is-current .wm-jukebox__row{ background:rgba(46,125,50,.14); }
.wm-jukebox__item.is-soon .wm-jukebox__row{ cursor:default; }

/* index cell: number / play / pause / eq */
.wm-jukebox__idx{ position:relative; display:grid; place-items:center; height:24px; }
.wm-jukebox__num{
  font-family:var(--font-display); color:var(--wm-gray); font-size:.95rem;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.wm-jukebox__rowplay,.wm-jukebox__rowpause{ width:20px; height:20px; color:var(--wm-white); display:none; }
.wm-jukebox__roweq{ display:none; height:16px; gap:3px; }
.wm-jukebox__roweq span{ width:3px; }

.wm-jukebox__item:not(.is-current):not(.is-soon) .wm-jukebox__row:hover .wm-jukebox__num{ display:none; }
.wm-jukebox__item:not(.is-current):not(.is-soon) .wm-jukebox__row:hover .wm-jukebox__rowplay{ display:block; }

.wm-jukebox__item.is-current .wm-jukebox__num{ display:none; }
.wm-jukebox__item.is-current .wm-jukebox__roweq{ display:flex; }
.wm-jukebox__item.is-current:not(.is-playing) .wm-jukebox__roweq span{ animation-play-state:paused; }
.wm-jukebox__item.is-current.is-playing .wm-jukebox__row:hover .wm-jukebox__roweq{ display:none; }
.wm-jukebox__item.is-current.is-playing .wm-jukebox__row:hover .wm-jukebox__rowpause{ display:block; }
.wm-jukebox__item.is-current:not(.is-playing) .wm-jukebox__row:hover .wm-jukebox__roweq{ display:none; }
.wm-jukebox__item.is-current:not(.is-playing) .wm-jukebox__row:hover .wm-jukebox__rowplay{ display:block; }

/* art thumb */
.wm-jukebox__art{
  width:46px; height:46px; border-radius:3px; overflow:hidden; position:relative;
  background:linear-gradient(135deg,var(--wm-green),#0a2a01) center/cover no-repeat;
  display:grid; place-items:center; flex:none;
}
.wm-jukebox__artmark{ font-family:var(--font-display); font-size:.85rem; color:rgba(255,255,255,.9); letter-spacing:.03em; }

.wm-jukebox__main{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.wm-jukebox__title{
  font-family:var(--font-display); text-transform:uppercase; font-size:1.08rem; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wm-jukebox__item.is-current .wm-jukebox__title{ color:var(--wm-green-brt); }
.wm-jukebox__meta{ color:var(--wm-fog); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.wm-jukebox__dur-cell{ justify-self:end; }
.wm-jukebox__len{ font-variant-numeric:tabular-nums; color:var(--wm-fog); font-size:.85rem; }
.wm-jukebox__soon{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--wm-gray); border:1px solid var(--wm-line); border-radius:100px; padding:3px 10px;
}
.wm-jukebox__item.is-soon .wm-jukebox__title{ color:var(--wm-fog); }
.wm-jukebox__row.is-error .wm-jukebox__len{ color:var(--wm-red); }

@media (max-width:640px){
  .wm-jukebox__row{ grid-template-columns:30px 44px 1fr auto; gap:11px; padding:10px 8px; }
  .wm-jukebox__np-title{ font-size:1.15rem; }
  .wm-jukebox__transport{ margin-left:auto; }
  .wm-jukebox__now{ top:64px; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.wm-contact{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.wm-contact__intro{ margin-bottom:44px; }
.wm-contact-cta{
  background:var(--wm-panel-2); border:1px solid var(--wm-line); border-radius:var(--wm-radius);
  padding:40px;
}
.wm-contact-cta h2{ margin:.15em 0 .5em; }
.wm-contact-cta > p{ color:var(--wm-fog); margin:0 0 26px; }
.wm-contact-cta__btn{ font-size:1.05rem; word-break:break-word; }
.wm-contact-cta__hint{ margin:22px 0 0; font-size:.92rem; color:var(--wm-fog); }
.wm-form label{ display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; margin:0 0 8px; color:var(--wm-white); }
.wm-form .field{ margin-bottom:22px; }
.wm-form input, .wm-form textarea, .wm-form select{
  width:100%; padding:14px 16px; background:var(--wm-panel); border:1px solid var(--wm-line);
  border-radius:var(--wm-radius); color:var(--wm-white); font-family:var(--font-body); font-size:1rem;
}
.wm-form input:focus, .wm-form textarea:focus, .wm-form select:focus{ outline:none; border-color:var(--wm-green-brt); }
.wm-form textarea{ min-height:150px; resize:vertical; }
.wm-contact__info li{ list-style:none; margin:0 0 20px; padding-left:0; }
.wm-contact__info .k{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; color:var(--wm-green-brt); font-size:.8rem; display:block; margin-bottom:3px; }
.wm-notice{ padding:14px 18px; border-radius:var(--wm-radius); margin-bottom:24px; font-size:.95rem; }
.wm-notice--ok{ background:rgba(46,125,50,.15); border:1px solid var(--wm-green-mid); color:#bfe6bb; }
.wm-notice--err{ background:rgba(232,38,26,.12); border:1px solid var(--wm-red); color:#f2b3ae; }

/* ==========================================================================
   Generic page / post content
   ========================================================================== */
.wm-page{ padding:80px 0; }
.wm-page__header{ padding:70px 0 40px; background:var(--wm-panel); border-bottom:1px solid var(--wm-line); }
.wm-page__header .wm-container{ max-width:900px; }
.wm-prose{ max-width:820px; }
.wm-prose h2{ margin-top:1.6em; }
.wm-prose h3{ margin-top:1.4em; }
.wm-prose ul, .wm-prose ol{ color:var(--wm-fog); padding-left:1.2em; margin:0 0 1.2em; }
.wm-prose li{ margin-bottom:.5em; }
.wm-prose img{ border-radius:var(--wm-radius); margin:1.5em 0; }
.wm-prose blockquote{
  border-left:4px solid var(--wm-red); margin:1.6em 0; padding:.4em 0 .4em 1.4em; color:var(--wm-white);
  font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase;
}

/* posts */
.wm-postgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.wm-post{ background:var(--wm-panel-2); border:1px solid var(--wm-line); border-radius:var(--wm-radius); overflow:hidden; }
.wm-post__thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--wm-panel); }
.wm-post__thumb img{ width:100%; height:100%; object-fit:cover; }
.wm-post__body{ padding:22px 24px 26px; }
.wm-post__date{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--wm-green-brt); }
.wm-post h3{ margin:.4em 0; }
.wm-post h3 a{ color:#fff; }
.wm-post h3 a:hover{ color:var(--wm-green-brt); }
.wm-pagination{ margin-top:50px; display:flex; gap:10px; flex-wrap:wrap; }
.wm-pagination .page-numbers{
  font-family:var(--font-display); padding:10px 16px; border:1px solid var(--wm-line); border-radius:var(--wm-radius); color:var(--wm-white);
}
.wm-pagination .current{ background:var(--wm-red); border-color:var(--wm-red); }

/* ==========================================================================
   Footer
   ========================================================================== */
.wm-footer{ background:#080808; border-top:1px solid var(--wm-line); padding:64px 0 28px; }
.wm-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:44px; }
.wm-footer img{ height:56px; margin-bottom:18px; }
.wm-footer p{ color:var(--wm-fog); max-width:340px; }
.wm-footer h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.95rem; color:#fff; margin-bottom:16px; }
.wm-footer ul{ list-style:none; margin:0; padding:0; }
.wm-footer li{ margin-bottom:10px; }
.wm-footer a{ color:var(--wm-fog); }
.wm-footer a:hover{ color:var(--wm-green-brt); }
.wm-footer__bar{ border-top:1px solid var(--wm-line); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--wm-gray); font-size:.85rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:960px){
  .wm-hero__inner{ grid-template-columns:1fr; text-align:center; }
  .wm-hero__logo{ order:-1; }
  .wm-hero__sub{ margin-inline:auto; }
  .wm-hero__cta, .wm-hero__eq{ justify-content:center; }
  .wm-hero__eq{ display:flex; }
  .wm-split{ grid-template-columns:1fr; }
  .wm-contact{ grid-template-columns:1fr; }
  .wm-grid--3, .wm-grid--4{ grid-template-columns:repeat(2,1fr); }
  .wm-tracks{ grid-template-columns:1fr; }
  .wm-postgrid{ grid-template-columns:repeat(2,1fr); }
  .wm-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  .wm-nav-toggle{ display:block; }
  .wm-nav{
    position:fixed; inset:88px 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:var(--wm-panel); border-bottom:1px solid var(--wm-line);
    max-height:0; overflow:hidden; transition:max-height .28s ease; padding:0 24px;
  }
  .wm-nav.is-open{ max-height:80vh; padding:12px 24px 24px; overflow:auto; }
  .wm-menu{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .wm-menu li{ border-bottom:1px solid var(--wm-line); }
  .wm-menu a{ display:block; padding:16px 0; }
  .wm-menu .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding-left:14px; }
  .wm-nav .wm-btn{ margin-top:16px; width:100%; justify-content:center; }
  .wm-section{ padding:64px 0; }
  .wm-grid--3, .wm-grid--4, .wm-postgrid{ grid-template-columns:1fr; }
  .wm-footer__grid{ grid-template-columns:1fr; }
  .wm-track{ grid-template-columns:72px 1fr; }
  .wm-track__art{ width:72px; height:72px; }
}

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