@charset "utf-8";
/* peterworth-v7 "classic" theme, trimmed for the static site (01 Spec Phase 4, docs/theme-map.md).
   Ported from the live theme's reset.css + style.css as edited 2026-09-22, plus new rules for the tabs, the
   genre chip row, the home links row, the contact form states and the tracklist time links. Image url()s below
   are rewritten to their hashed asset names by theme/assets.ts before this file's own hash is taken. */

/* ---- reset (styles/reset.css) ---- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
:focus {
  outline: 0;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
[hidden] {
  display: none !important;
}

/* ---- Miscellaneous ---- */
body {
  font-family: Arial, "Helvetica", sans-serif;
  font-size: 11px;
  background: #000 url(/assets/bg.6f0471c3.jpg) no-repeat top center;
  color: #aaa;
}
a {
  color: #aaa;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.clear {
  clear: both;
}
.left {
  float: left !important;
}
.right {
  float: right !important;
}
#container {
  width: 1011px;
  margin: 0 auto;
}

/* ---- Header ---- */
#header {
  font-size: 16px;
}
.logo {
  margin-top: 26px;
}
.logo a {
  margin: 0 auto;
  width: 213px;
  height: 84px;
  background: url(/assets/logo.8ce3197b.png) no-repeat;
  display: block;
  text-indent: -99999px;
}
.nav_social {
  margin-top: 23px;
  margin-bottom: 20px;
}
.social_media {
  background: rgba(10, 8, 9, 0.6);
  float: right;
  padding: 14px 0 5px 5px;
  margin-top: -14px;
  position: relative;
  z-index: 9999;
}
.social_media a {
  display: block;
  width: 32px;
  height: 32px;
  background: url(/assets/social_icons.e0d372f7.png) no-repeat left top;
  float: left;
  margin-left: 5px;
}
.social_media a.sound {
  background-position: -38px top;
}
.social_media a.facebook {
  background-position: -76px top;
}
.social_media a.twitter {
  background-position: -114px top;
}
.social_media a.subscribe {
  background-position: -152px top;
}
.social_media a.rss {
  background-position: -190px top;
}
.social_media a.fire {
  background-position: right top;
}

/* ---- Navigation ---- */
#navigation {
  float: left;
  background: rgba(10, 8, 9, 0.6);
}
#navigation li {
  float: left;
  margin-right: 11px;
}
#navigation a {
  font-weight: 700;
  padding: 5px 6px;
  display: block;
  text-decoration: none;
}
#navigation a:hover,
#navigation li.current-menu-item a {
  color: #fff;
}
#navigation li.current-menu-item a {
  background-color: #f00;
}

/* ---- Content ---- */
#content {
  margin-bottom: 30px;
}
.left_sidebar {
  float: left;
  width: 150px;
  margin-right: 27px;
}
.main_content {
  float: left;
  width: 650px;
  overflow: hidden;
}
.front_bottom {
  margin-top: 23px;
}
.front_bottom .download_musics {
  width: 100%;
}
.download_musics {
  float: left;
  width: 100%;
}

.music {
  overflow: hidden;
  height: 110px;
  margin-bottom: 20px;
  width: 315px;
}
.music_image {
  overflow: hidden;
  width: 110px !important;
  height: 100% !important;
  float: left;
}
.music_image > img {
  top: 37px !important;
  left: 35px !important;
}
.music_info {
  margin-left: 1px;
  height: 80px;
  float: left;
  background-color: #292929;
  width: 174px;
  padding: 15px;
  position: relative;
}
.music_info h2 a {
  color: #fff;
  font-weight: 700;
}
.music_info h2 a:hover {
  text-decoration: underline;
}
.music_info p,
.music_info span {
  display: block;
  margin-top: 7px;
}
.music_detail {
  bottom: 14px;
  position: absolute;
}
.music_detail a {
  color: #f00;
  font-family: Arial, "Helvetica", sans-serif;
  margin-right: 4px;
}
.music_detail a.download {
  margin-left: 6px;
}

/* ---- Widget ---- */
.dotted_line {
  width: 100%;
  background: url(/assets/dotted_line.72f9ef88.png) repeat-x;
  height: 1px;
  margin-bottom: 16px;
}
.widget {
  margin-bottom: 30px;
}
.widget .title {
  display: block;
  margin-bottom: 10px;
  color: #454444;
}
.widget li {
  margin-bottom: 4px;
}
.widget li a {
  text-decoration: underline;
  line-height: 16px;
  color: #454444;
}
.widget li a:hover {
  color: #aaa;
}

.post_content {
  font-size: 12px;
  text-align: justify;
  width: 100%;
  margin-bottom: 21px;
}
.post_content p {
  line-height: 17px;
  margin-bottom: 19px;
}
.post_content a {
  color: #f00;
}

/* ---- Arrows ---- */
.arrows {
  width: 44px;
  position: relative;
  left: 4px;
}
.arrows a {
  color: #000;
  background-color: #474747;
  padding-bottom: 1px;
  padding-left: 4px;
  padding-right: 4px;
}
.arrows a:hover {
  text-decoration: none;
  background-color: #f00;
  color: #fff;
}
.arrows a.no_hover {
  background-color: #474747;
  cursor: default;
  color: #000;
}

/* ---- Mixes ---- */
.mixes {
  width: 645px;
}
.album {
  margin-bottom: 26px;
}
.album_author,
.album_release_duration {
  display: block;
}
.album_image {
  float: left;
  width: 313px !important;
  height: 313px !important;
}
.album_image img {
  left: 136px !important;
  top: 136px !important;
}
.album_image img.attachment-full {
  border: 1px solid #212021;
  width: 313px;
  height: auto;
}
.album_info {
  float: right;
  width: 305px;
}
.album_title {
  font-size: 12px;
  color: #fff;
  font-weight: 700;
}
.album_title,
.album_author,
.album_release_duration,
.album_description,
.album_others li a {
  line-height: 15px;
}
.album_release_duration {
  margin-bottom: 10px;
}
.album_tags {
  font-size: 10px;
  margin: 17px 0;
}
.album_tags a {
  padding: 2px 4px;
  background-color: #434343;
}
.album_tags a:hover {
  text-decoration: none;
  background-color: #f00;
  color: #fff;
}
.album_description {
  margin-bottom: 15px;
  text-align: left;
}
.album_others {
  margin-bottom: 20px;
}
.album_others li {
  margin-bottom: 4px;
}

/* The tracklist spans the mix column's full width (Peter, DJ 30; was 330px, floated left). */
.album_tracks {
  margin-bottom: 23px;
}
.album_tracks table {
  width: 100%;
  border: 1px solid #212021;
}
.album_tracks td,
.album_tracks th {
  border: 1px solid #212021;
  vertical-align: middle;
  line-height: 15px;
  padding: 3px;
}
.album_tracks .serial {
  width: 43px;
  text-align: center;
}
.album_tracks .info {
  padding-left: 13px;
}
.album_tracks th {
  text-align: left;
  padding-left: 13px;
  background-color: #292929;
  color: #fff;
}
table tr.odd {
  background-color: #080800;
}
.pw-seek {
  color: #f00;
  font-variant-numeric: tabular-nums;
}

/* ---- Contact ---- */
#contact-right {
  width: 100%;
  margin: 0 auto;
}
/* No light grey box (Peter, DJ 30): the form sits on the page, labels in the page's #aaa. */
#contact-form {
  padding: 10px 0;
  width: 90%;
  margin: 0 auto;
}
#contact-form .field {
  margin-bottom: 10px;
}
#contact-form .center {
  padding-right: 5px;
  text-align: right;
  vertical-align: top;
}
#contact-form label {
  margin-right: 5px;
  display: block;
  margin-bottom: 3px;
}
#contact-form input,
#contact-form textarea {
  margin-bottom: 10px;
}
/* Every field the same width, in the sidebar's dark grey with white text (Peter, DJ 30). */
#your_name,
#your_email,
#message {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background-color: #454444;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
}
#your_name:focus,
#your_email:focus,
#message:focus {
  outline: 1px solid #aaa;
  outline-offset: 0;
}
/* A field player.js (or the Worker) flagged: red outline, focused or not, until the value passes (DJ 32). */
#contact-form [aria-invalid="true"],
#contact-form [aria-invalid="true"]:focus {
  outline: 1px solid #f00;
  outline-offset: 0;
}
#message {
  resize: vertical;
}
/* Send Email: grey until Name and Message are filled and Email is a valid address (player.js adds .is-ready), then
   red. */
#contact-form #submit {
  border-radius: 0;
  background-color: #454444;
  border: medium none;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  margin-top: 10px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color 0.15s;
}
#contact-form #submit.is-ready {
  background-color: #f00;
}
#contact-form #submit:disabled {
  opacity: 0.6;
  cursor: default;
}
#contact-right h3 {
  color: #aaa;
  text-align: center;
  font-size: 20px;
}
.slideshow {
  margin-bottom: 25px;
}
.slideshow img {
  display: block;
  max-width: 100%;
  height: auto;
}
.pw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pw-form-status {
  display: block;
  margin-top: 12px;
  color: #aaa;
}
.pw-form-status[data-state="error"] {
  color: #f00;
}
.pw-form-status[data-state="ok"] {
  color: #6fdc6f;
}
.cf-turnstile {
  margin-bottom: 10px;
}
.pw-field-error {
  display: block;
  margin: -6px 0 10px;
  color: #f00;
  font-size: 11px;
}

/* ---- Footer ---- */
#footer {
  background: url(/assets/dotted_line.72f9ef88.png) left top repeat-x;
  width: 100%;
  padding-top: 27px;
  padding-bottom: 40px;
  color: #454444;
}
#footer a {
  color: #454444;
}
#footer a:hover {
  color: #aaa;
}
.footer_logo {
  float: left;
}
.footer_links {
  float: left;
  width: 84.5%;
}
.footer_links ul {
  float: left;
  margin-left: 40px;
  margin-bottom: 16px;
}
.footer_links li {
  margin-bottom: 6px;
}
.footer_links .last {
  margin: 0;
  text-align: right;
}
.footer_note {
  clear: both;
  padding-top: 10px;
  font-size: 10px;
}

/* ---- Genre chip row (new) ---- */
.pw-genres {
  margin-bottom: 20px;
}
.pw-genres ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pw-chip {
  display: inline-block;
  padding: 3px 8px;
  background-color: #292929;
  color: #aaa;
  border-radius: 3px;
  font-size: 11px;
}
.pw-chip:hover {
  background-color: #f00;
  color: #fff;
  text-decoration: none;
}
.pw-chip[aria-current="page"] {
  background-color: #f00;
  color: #fff;
}

/* ---- Home links row (new) ---- */
.pw-home-links {
  margin-bottom: 20px;
}
.pw-home-links a {
  margin-right: 14px;
  color: #f00;
}
.pw-all-mixes {
  display: inline-block;
  margin-top: 10px;
  color: #f00;
}

/* ---- Tabs (new) ---- */
.pw-tabs {
  margin-bottom: 20px;
  clear: both;
}
.pw-tablist {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.pw-tab {
  background-color: #292929;
  color: #aaa;
  border: 0;
  padding: 6px 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.pw-tab:hover {
  color: #fff;
}
.pw-tab[aria-selected="true"] {
  background-color: #f00;
  color: #fff;
}
.pw-tabpanel {
  background-color: #191919;
  padding: 14px;
}
.pw-tabpanel p {
  margin-top: 10px;
  line-height: 15px;
}
.pw-embed {
  width: 100%;
  min-height: 180px;
  background-color: #292929;
}
.pw-embed-note {
  font-size: 10px;
}
.pw-deeplink {
  margin-top: 10px;
}

/* ---- Paragraphs of plain page text (home intro, 404, contact) ---- */
.pw-copy {
  line-height: 16px;
  margin-bottom: 15px;
}
.pw-copy:last-child {
  margin-bottom: 0;
}

/* Mobile / tablet layout (kept from 2026-09-22) */
@media (max-width: 1023px) {
  body {
    font-size: 13px;
    background-size: 1011px auto;
  }
  #container {
    width: auto;
    padding: 0 16px;
  }
  .logo {
    margin-top: 16px;
  }
  .nav_social {
    margin: 16px 0;
  }
  #navigation {
    float: none;
    background: none;
  }
  #navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  #navigation li {
    float: none;
    margin: 0 4px 4px;
  }
  .social_media {
    float: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    background: none;
  }
  .social_media a {
    float: none;
    margin: 0 4px;
  }
  #content {
    display: flex;
    flex-direction: column;
  }
  #content > .clear {
    display: none;
  }
  .main_content {
    order: -1;
    float: none;
    width: auto;
    overflow: visible;
  }
  .left_sidebar {
    display: none;
  }
  .main_content img,
  .main_content iframe,
  .main_content object,
  .main_content embed,
  .main_content video {
    max-width: 100%;
  }
  .main_content img {
    height: auto;
  }
  .main_content iframe {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .download_musics {
    float: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }
  .download_musics > .clear {
    display: none;
  }
  .music,
  .music.left,
  .music.right {
    float: none !important;
    width: auto;
    margin: 0;
    display: flex;
  }
  .music_image {
    flex: 0 0 110px;
  }
  .music_info {
    flex: 1;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 80px;
  }
  .music {
    height: auto;
    min-height: 110px;
  }
  .music_image {
    height: auto !important;
  }
  .music_detail {
    position: static;
    margin-top: 10px;
  }
  #footer {
    text-align: center;
  }
  .footer_logo {
    float: none;
    margin-bottom: 20px;
  }
  .footer_links {
    float: none;
    width: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 16px;
    text-align: left;
  }
  .footer_links ul {
    float: none;
    margin: 0;
  }
  .footer_links > .clear {
    display: none;
  }
  .footer_links .last {
    text-align: left;
  }
  .album_image,
  .album_image img.attachment-full {
    float: none;
    width: auto !important;
    max-width: 313px;
  }
  .album_info {
    float: none;
    width: auto;
    margin-top: 16px;
    position: relative;
    padding-right: 52px;
  }
  .album_info .arrows {
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
  }
  #your_name,
  #your_email,
  #message {
    width: 100% !important;
    max-width: none;
  }
  #contact-form {
    width: auto;
    padding: 10px 0;
  }
}

/* Mix player (kept from 2026-09-22) */
.music_image,
.album_image {
  position: relative;
}
.pw-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background:
    rgba(0, 0, 0, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    no-repeat 55% 50% / 22px 22px;
  transition:
    background-color 0.15s,
    transform 0.15s;
}
.pw-play:hover,
.pw-play:focus-visible {
  background-color: #f00;
  transform: scale(1.06);
  outline: none;
}
.pw-play.is-playing {
  background-color: #f00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
}
/* The mix page's play button sits in a dark square left of the title, not over the cover (Peter, DJ 30). */
.album_head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.album_play {
  position: relative;
  flex: none;
  width: 50px;
  height: 50px;
  background-color: #191919;
}
.album_head .album_release_duration {
  margin-bottom: 0;
}

.pw-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #111;
  border-top: 1px solid #333;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6);
  font-family: Arial, "Helvetica", sans-serif;
  color: #aaa;
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
body.pw-bar-open .pw-bar {
  transform: none;
}
body.pw-bar-open {
  padding-bottom: 84px;
}
.pw-bar-cover {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
}
.pw-bar-cover img {
  width: 52px;
  height: 52px;
  display: block;
  object-fit: cover;
}
.pw-bar-toggle {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background:
    #f00
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E")
    no-repeat 55% 50% / 22px 22px;
}
.pw-bar.is-playing .pw-bar-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 5h4v14H7zM13 5h4v14h-4z'/%3E%3C/svg%3E");
  background-position: 50% 50%;
}
.pw-bar-main {
  flex: 1;
  min-width: 0;
}
.pw-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.pw-bar-title {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pw-bar-title:hover {
  text-decoration: underline;
}
.pw-bar-time {
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pw-bar-wave {
  height: 40px;
  cursor: pointer;
}
.pw-bar-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: #777;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.pw-bar-close:hover {
  color: #fff;
}
@media (max-width: 600px) {
  .pw-bar {
    gap: 10px;
    padding-left: 12px;
    padding-right: 8px;
  }
  .pw-bar-cover {
    display: none;
  }
  .pw-bar-wave {
    height: 32px;
  }
  body.pw-bar-open {
    padding-bottom: 76px;
  }
}