:root{--bg:#050505;--panel:#111;--panel2:#1b1b1b;--gold:#c8a46b;--gold2:#f0dca8;--text:#f2f2f2;--muted:#a0a0a0;--line:#3b3328}*{box-sizing:border-box}body{background:#050505;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.site-bg{background:radial-gradient(circle at 50% 0,#1b1b1b 0,#050505 45%,#000 100%)}a{color:var(--gold2);text-decoration:none}a:hover{color:#fff}.navbar{background:rgba(0,0,0,.94);border-bottom:1px solid rgba(200,164,107,.18)}.navbar-brand img{max-height:54px}.nav-link{color:#eee!important;font-weight:600;letter-spacing:.02em}.nav-link:hover,.nav-link.active{color:var(--gold2)!important}.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(to bottom,rgba(0,0,0,.3),#050505),radial-gradient(circle at 70% 20%,rgba(200,164,107,.16),transparent 30%)}.hero:before{content:"";position:absolute;inset:0;background:url('../img/wermlandia-logo.png') center 70px/75% auto no-repeat;opacity:.92;filter:drop-shadow(0 0 30px rgba(0,160,255,.15))}.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:160px;background:linear-gradient(to bottom,transparent,#050505 70%)}.hero-content{position:relative;z-index:2;padding-top:220px}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-weight:800;font-size:.78rem}.title-serif{font-family:Cinzel,Georgia,serif;letter-spacing:.02em}.hero h1{font-size:clamp(2.4rem,6vw,5.4rem);font-weight:800;text-shadow:0 0 30px #000}.btn-gold{background:var(--gold);color:#000;border:1px solid var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:.03em}.btn-gold:hover{background:var(--gold2);border-color:var(--gold2);color:#000}.btn-outline-gold{border:1px solid var(--gold2);color:var(--gold2);font-weight:800;text-transform:uppercase}.btn-outline-gold:hover{background:var(--gold2);color:#000}.section{padding:70px 0}.metal-card{background:linear-gradient(180deg,#181818,#0d0d0d);border:1px solid rgba(200,164,107,.22);box-shadow:0 18px 50px rgba(0,0,0,.38);transition:.25s transform,.25s border-color,.25s box-shadow}.metal-card:hover{transform:translateY(-5px);border-color:rgba(240,220,168,.55);box-shadow:0 25px 70px rgba(0,0,0,.58)}.release-cover{aspect-ratio:1/1;object-fit:cover;width:100%;background:#111;border:1px solid rgba(255,255,255,.08)}.release-card-title{font-family:Cinzel,Georgia,serif;font-size:1.12rem;min-height:2.9rem}.badge-gold{background:rgba(200,164,107,.18);color:var(--gold2);border:1px solid rgba(200,164,107,.36)}.filter-tabs .btn{min-width:120px}.page-head{padding:70px 0 35px;background:linear-gradient(to bottom,#000,#111 80%,#050505)}.release-layout{padding:55px 0}.track-row{border-bottom:1px dashed rgba(240,220,168,.25);padding:18px 0;align-items:center}.lyrics-box{white-space:pre-wrap;line-height:1.82;font-size:1.04rem;background:#101010;border:1px solid rgba(200,164,107,.2);padding:28px}.story-box{background:#151515;border-left:4px solid var(--gold);padding:24px}.form-control,.form-select{background:#0d0d0d;color:#fff;border-color:#3a3328}.form-control:focus,.form-select:focus{background:#111;color:#fff;border-color:var(--gold);box-shadow:0 0 0 .2rem rgba(200,164,107,.16)}.form-control::placeholder{color:#777}.admin-shell{background:#080808}.admin-sidebar{background:#000;border-right:1px solid rgba(200,164,107,.18);min-height:100vh}.admin-sidebar .nav-link{border-radius:10px;margin-bottom:6px}.admin-sidebar .nav-link.active,.admin-sidebar .nav-link:hover{background:rgba(200,164,107,.14)}.table-dark{--bs-table-bg:#111;--bs-table-striped-bg:#151515}.footer{border-top:1px solid rgba(200,164,107,.16);padding:35px 0;background:#000;color:#888}.spotify-frame{border-radius:12px;overflow:hidden;background:#111}.login-card{max-width:430px;margin:9vh auto;background:#111;border:1px solid rgba(200,164,107,.25);box-shadow:0 25px 80px rgba(0,0,0,.6)}@media(max-width:768px){.hero{min-height:460px}.hero:before{background-size:105% auto;background-position:center 60px}.hero-content{padding-top:190px}.release-card-title{min-height:auto}.admin-sidebar{min-height:auto}.track-row .text-end{text-align:left!important;margin-top:12px}}

.release-date-line {
  color: #c8a46b;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* =========================================================
   Wermlandia V3.8.3 - Fog From Top Fix
   Clean version for hero.hero-fog.
   ========================================================= */
.hero.hero-fog {
  position: relative;
  min-height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(17, 35, 52, 0.58), transparent 42%),
    linear-gradient(to bottom, rgba(0,0,0,0.18), #050505 94%);
}

.hero.hero-fog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../img/wermlandia-logo.png') center 42px / min(1180px, 92vw) auto no-repeat;
  opacity: 0.55;
  filter: drop-shadow(0 0 34px rgba(0,160,255,.20));
  transform: scale(1.02);
}

.hero.hero-fog::after {
  content: "";
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.00) 18%,
      rgba(0,0,0,0.22) 58%,
      #050505 100%);
}

.hero-fog .hero-content {
  position: relative;
  z-index: 6;
  padding-top: 620px;
  padding-bottom: 82px;
}

.hero-fog .eyebrow {
  text-shadow: 0 0 14px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,.9);
}

.hero-tagline-box {
  max-width: 860px;
  padding: 18px 28px;
  border: 1px solid rgba(240,220,168,.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.38));
  box-shadow: 0 18px 80px rgba(0,0,0,.50), inset 0 0 50px rgba(0,0,0,.24);
  backdrop-filter: blur(3px);
}

.hero-tagline {
  color: #ffffff;
  font-size: clamp(1.05rem, 2.1vw, 1.55rem);
  font-weight: 650;
  line-height: 1.45;
  text-shadow: 0 2px 9px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,.92);
}

.fog-layer {
  position: absolute;
  left: -45%;
  width: 190%;
  pointer-events: none;
  z-index: 5;
  opacity: 0.62;
  mix-blend-mode: screen;
  filter: blur(28px);
  transform: translate3d(0,0,0);
}

.fog-layer::before,
.fog-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: 860px 100%;
  opacity: 0.92;
}

.fog-layer-one {
  top: -120px;
  height: 620px;
  animation: wermlandiaFogDriftOne 56s linear infinite;
}


.fog-layer-one::before {
  background-image:
    radial-gradient(ellipse at 50% 8%, rgba(255,255,255,.22) 0%, rgba(120,170,210,.12) 28%, transparent 62%),
    radial-gradient(ellipse at 12% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.09) 24%, transparent 58%),
    radial-gradient(ellipse at 42% 18%, rgba(120,170,210,.18) 0%, rgba(120,170,210,.08) 28%, transparent 62%),
    radial-gradient(ellipse at 75% 22%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 25%, transparent 60%);
}

.fog-layer-two {
  top: 26%;
  height: 430px;
  opacity: 0.52;
  animation: wermlandiaFogDriftTwo 82s linear infinite reverse;
}

.fog-layer-two::before {
  background-image:
    radial-gradient(ellipse at 18% 55%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.07) 20%, transparent 64%),
    radial-gradient(ellipse at 55% 50%, rgba(200,220,255,.13) 0%, rgba(200,220,255,.06) 24%, transparent 66%),
    radial-gradient(ellipse at 88% 45%, rgba(255,255,255,.11) 0%, rgba(255,255,255,.05) 22%, transparent 62%);
}

.fog-layer-three {
  bottom: -20px;
  height: 310px;
  opacity: 0.44;
  filter: blur(36px);
  animation: wermlandiaFogDriftThree 68s linear infinite;
}

.fog-layer-three::before {
  background-image:
    radial-gradient(ellipse at 10% 60%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.055) 26%, transparent 68%),
    radial-gradient(ellipse at 38% 55%, rgba(100,155,190,.11) 0%, rgba(100,155,190,.05) 26%, transparent 67%),
    radial-gradient(ellipse at 72% 62%, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 26%, transparent 68%);
}

@keyframes wermlandiaFogDriftOne {
  from { transform: translate3d(-6%, 0, 0); }
  to   { transform: translate3d(18%, -1.5%, 0); }
}

@keyframes wermlandiaFogDriftTwo {
  from { transform: translate3d(10%, 1%, 0); }
  to   { transform: translate3d(-18%, -1%, 0); }
}

@keyframes wermlandiaFogDriftThree {
  from { transform: translate3d(-14%, 0, 0); }
  to   { transform: translate3d(12%, 0, 0); }
}

@media (max-width: 768px) {
  .hero.hero-fog {
    min-height: 580px;
  }
  
.hero.hero-fog::before {
  background-size: 95vw auto;
  background-position: center 30px;
  opacity: 0.42;
}

  .hero-fog .hero-content {
    padding-top: 200px;
    padding-bottom: 58px;
  }

  .hero-tagline-box {
    padding: 14px 18px;
    border-radius: 14px;
  }

  .fog-layer {
    left: -55%;
    width: 210%;
    filter: blur(22px);
    opacity: 0.44;
  }

  .fog-layer-one {
    top: -110px;
    height: 430px;
  }

  .fog-layer-two {
    top: 34%;
    height: 360px;
  }

  .fog-layer-three {
    bottom: -15px;
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fog-layer,
  .fog-layer-one,
  .fog-layer-two,
  .fog-layer-three {
    animation: none !important;
  }
}



/* =========================================================
   Wermlandia Footer Player - horizontal bottom bar v4
   ========================================================= */
body {
  padding-bottom: 86px !important;
}

.wm-footer-player {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  min-height: 74px !important;
  background: linear-gradient(180deg, rgba(10,10,10,.96), rgba(0,0,0,1)) !important;
  border-top: 1px solid rgba(202,169,106,.38) !important;
  box-shadow: 0 -18px 50px rgba(0,0,0,.78) !important;
  color: #f5f0df !important;
  backdrop-filter: blur(12px);
}

.wm-player-mainbar {
  width: 100% !important;
  max-width: 1280px !important;
  min-height: 74px !important;
  margin: 0 auto !important;
  padding: 8px 18px !important;
  display: grid !important;
  grid-template-columns: 210px minmax(260px, 1fr) 300px !important;
  align-items: center !important;
  gap: 18px !important;
}

.wm-player-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.wm-player-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: #f5f0df !important;
  cursor: pointer !important;
  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease !important;
}

.wm-player-btn:hover {
  color: var(--gold2, #caa96a) !important;
  transform: translateY(-1px) !important;
}

.wm-player-small {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
}

.wm-player-play {
  width: 46px !important;
  height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 3px solid #f5f0df !important;
  border-radius: 50% !important;
  font-size: 1.08rem !important;
  padding-left: 2px !important;
}

.wm-player-list {
  width: 48px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-left: 1px solid rgba(202,169,106,.28) !important;
  margin-left: 8px !important;
  padding-left: 15px !important;
  font-size: 1.5rem !important;
}

.wm-player-progress-wrap {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.wm-player-progress {
  --wm-progress: 0%;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--gold2, #caa96a) 0%, var(--gold2, #caa96a) var(--wm-progress), rgba(255,255,255,.22) var(--wm-progress), rgba(255,255,255,.22) 100%) !important;
  outline: none !important;
  cursor: pointer !important;
}

.wm-player-progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #f5f0df !important;
  border: 2px solid #050505 !important;
  box-shadow: 0 0 18px rgba(202,169,106,.65) !important;
}

.wm-player-progress::-moz-range-thumb {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #f5f0df !important;
  border: 2px solid #050505 !important;
  box-shadow: 0 0 18px rgba(202,169,106,.65) !important;
}

.wm-player-time-row {
  display: flex !important;
  justify-content: space-between !important;
  font-size: .78rem !important;
  color: rgba(245,240,223,.72) !important;
  font-variant-numeric: tabular-nums !important;
}

.wm-player-track {
  height: 58px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding-left: 18px !important;
  border-left: 1px solid rgba(202,169,106,.28) !important;
}

.wm-player-thumb {
  width: 54px !important;
  height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(202,169,106,.45) !important;
  background: radial-gradient(circle at center, rgba(202,169,106,.20), rgba(18,18,18,.95) 58%) !important;
  color: var(--gold2, #caa96a) !important;
  font-family: Georgia, serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
}

.wm-player-meta {
  min-width: 0 !important;
}

.wm-player-title {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wm-player-artist {
  margin-top: 5px !important;
  color: rgba(245,240,223,.72) !important;
  font-size: .82rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.wm-player-picker {
  position: absolute !important;
  left: 18px !important;
  bottom: 82px !important;
  width: min(440px, calc(100vw - 36px)) !important;
  padding: 12px !important;
  background: rgba(5,5,5,.98) !important;
  border: 1px solid rgba(202,169,106,.42) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.78) !important;
}

.wm-player-select {
  width: 100% !important;
  background: #0d0d0d !important;
  color: #f5f0df !important;
  border: 1px solid rgba(202,169,106,.38) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  outline: none !important;
}

.wm-player-message {
  color: rgba(245,240,223,.70) !important;
  font-size: .78rem !important;
  min-height: 18px !important;
  margin-top: 8px !important;
}

.wm-footer-player.is-playing {
  border-top-color: rgba(240,220,168,.60) !important;
}

.wm-footer-player.is-playing .wm-player-play {
  color: var(--gold2, #caa96a) !important;
  border-color: var(--gold2, #caa96a) !important;
  box-shadow: 0 0 26px rgba(202,169,106,.28) !important;
}

@media (max-width: 860px) {
  body {
    padding-bottom: 118px !important;
  }

  .wm-player-mainbar {
    min-height: 106px !important;
    padding: 8px 10px !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    grid-template-areas:
      "controls track"
      "progress progress" !important;
    gap: 8px 10px !important;
  }

  .wm-player-controls {
    grid-area: controls !important;
    gap: 7px !important;
  }

  .wm-player-progress-wrap {
    grid-area: progress !important;
    padding: 0 4px 4px !important;
  }

  .wm-player-track {
    grid-area: track !important;
    height: 52px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding-left: 10px !important;
  }

  .wm-player-thumb {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }

  .wm-player-play {
    width: 40px !important;
    height: 40px !important;
  }

  .wm-player-small {
    width: 24px !important;
  }

  .wm-player-list {
    width: 36px !important;
    margin-left: 2px !important;
    padding-left: 8px !important;
    font-size: 1.25rem !important;
  }

  .wm-player-title {
    font-size: .86rem !important;
  }

  .wm-player-artist {
    font-size: .75rem !important;
  }

  .wm-player-picker {
    left: 10px !important;
    bottom: 112px !important;
  }
}

/* Infinite Content Engine */
.content-engine-item {
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
}

.content-engine-output {
  min-height: 132px;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 14px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
}