@font-face {
  font-family: "Special Elite";
  src: url("./assets/fonts/special-elite.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #bfa989;
  --rule: #bca484;
  --paper-black: #0b0c08;
  --unit: min(1vw, 19.2px);
  font-family: "Special Elite", "Courier New", monospace;
  color: var(--ink);
  background: var(--paper-black);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: url("./assets/images/background.webp") center top / min(100vw, 1920px) auto repeat-y;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a[href], a[role="button"] { cursor: pointer; }
a, button { transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease; }
a:hover, .player-actions button:hover { color: #ead8bb; }
:focus-visible { outline: 2px solid #e2c79e; outline-offset: 7px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
section, footer { scroll-margin-top: 24px; }

.site-shell {
  max-width: 1920px;
  padding-inline: calc(var(--unit) * 3.854167);
  margin-inline: auto;
}
.site-header {
  height: calc(var(--unit) * 5.885417);
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--rule);
  padding-top: calc(var(--unit) * 1.875);
  font-size: clamp(16px, calc(var(--unit) * 1.25), 24px);
  letter-spacing: .23em;
  text-transform: uppercase;
}
.site-header nav { display: flex; gap: calc(var(--unit) * 3.65); }
.site-header a { padding-block: 12px; }
.hero {
  padding-top: calc(var(--unit) * 1.927083);
  padding-bottom: calc(var(--unit) * .78125);
}
.hero h1 { width: 74.13%; margin-inline: auto; }
.hero img { width: 100%; height: auto; }
.section-rule { border-top: 3px solid var(--rule); }
h2 {
  font-size: clamp(20px, calc(var(--unit) * 1.40625), 27px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.music {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30%);
  padding-top: calc(var(--unit) * 2.552083);
  padding-bottom: calc(var(--unit) * 3.020833);
}
.latest-track { padding-right: calc(var(--unit) * 1.666667); }
.latest-track h2 { margin-bottom: calc(var(--unit) * 2.03125); }
.player-preview {
  display: flex;
  min-width: 0;
  border: 2px solid #50504e;
  outline: 3px solid #161713;
  background: linear-gradient(115deg, #353535, #303030);
  font-family: Arial, Helvetica, sans-serif;
}
.player-art { width: 17.2%; height: auto; object-fit: cover; align-self: stretch; }
.player-body {
  flex: 1;
  min-width: 0;
  padding: calc(var(--unit) * 1.041667);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.player-heading { display: flex; justify-content: space-between; gap: 12px; }
.track-meta { min-width: 0; }
.track-meta h3 {
  font-size: clamp(14px, calc(var(--unit) * 1.145833), 22px);
  line-height: 1.3;
  color: #c4ae8b;
  font-weight: 700;
}
.track-meta p {
  margin-top: calc(var(--unit) * .416667);
  font-size: clamp(13px, calc(var(--unit) * 1.145833), 22px);
  color: #aaa;
}
.player-actions {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--unit) * 1.875);
  padding-right: calc(var(--unit) * .625);
}
.player-actions button, .player-actions a {
  border: 0;
  background: none;
  color: #c4ae8b;
  font-size: clamp(13px, calc(var(--unit) * 1.145833), 22px);
  font-weight: 700;
  padding: 0;
  min-height: 24px;
}
.bandcamp-mark {
  display: flex;
  align-items: center;
  color: #aaa;
  font-size: clamp(14px, calc(var(--unit) * 1.145833), 22px);
  letter-spacing: -.07em;
}
.bandcamp-mark img { width: calc(var(--unit) * 1.458333); filter: grayscale(1); opacity: .8; }
.player-controls { display: flex; align-items: center; gap: calc(var(--unit) * .9375); }
.play-button {
  display: grid;
  place-items: center;
  width: calc(var(--unit) * 4.166667);
  height: calc(var(--unit) * 4.166667);
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: 1px solid #585858;
  border-radius: 2px;
  background: #444;
}
.play-button:hover { background: #555; }
.play-button span {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: calc(var(--unit) * .885417) solid transparent;
  border-bottom: calc(var(--unit) * .885417) solid transparent;
  border-left: calc(var(--unit) * 1.5625) solid #ddd;
}
.track-progress { flex: 1; height: calc(var(--unit) * 1.041667); background: #494949; border: 2px solid #404040; }
.track-progress span { display: block; width: 5.5%; height: 100%; border: 1px solid #666; background: #515151; }
.audio-status { color: #bbb; font-size: clamp(10px, calc(var(--unit) * .885417), 17px); white-space: nowrap; }
.more-music { min-width: 0; min-height: 0; align-self: start; border-left: 2px solid #71654f; padding-left: calc(var(--unit) * 2.65625); }
.more-music h2 { margin-bottom: calc(var(--unit) * 1.197917); }
.release-list {
  --list-height: clamp(160px, 12.65vw, 243px);
  list-style: none;
  padding: 6px 12px 6px 6px;
  margin: 0;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: calc(var(--unit) * 1.197917);
  height: var(--list-height);
  max-height: var(--list-height);
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #8b795e transparent;
  scroll-padding-block: 6px;
  border: 1px solid rgb(191 169 137 / 25%);
  background: rgb(0 0 0 / 15%);
}
.release-list::-webkit-scrollbar { width: 8px; }
.release-list::-webkit-scrollbar-track { background: #161610; }
.release-list::-webkit-scrollbar-thumb { background: #8b795e; border: 2px solid #161610; border-radius: 4px; }
.release:focus-visible { outline-offset: 2px; }
.release { display: flex; align-items: center; gap: calc(var(--unit) * 1.5625); }
.release > img { width: calc(var(--unit) * 5.677083); height: auto; flex-shrink: 0; }
.release > span { display: grid; gap: calc(var(--unit) * .46875); }
.release strong {
  font-weight: 400;
  font-size: clamp(14px, calc(var(--unit) * 1.145833), 22px);
  letter-spacing: .2em;
  line-height: 1.25;
  text-transform: uppercase;
}
.release-subtitle, .release-year { font-size: clamp(12px, calc(var(--unit) * 1.041667), 20px); letter-spacing: .18em; text-transform: uppercase; }
.release:hover img { opacity: .8; }
.release.is-selected { color: #ead8bb; background: rgb(191 169 137 / 6%); box-shadow: -3px 0 0 var(--rule); }

.about {
  display: grid;
  grid-template-columns: 50.4% 49.6%;
  padding-top: calc(var(--unit) * 2.65625);
  padding-bottom: calc(var(--unit) * 2.5);
}
.about-photo { padding-right: calc(var(--unit) * .78125); }
.about-photo img { width: 100%; height: auto; filter: brightness(1.55); }
.about-copy { border-left: 2px solid #71654f; padding: calc(var(--unit) * .520833) 0 calc(var(--unit) * .520833) calc(var(--unit) * 3.020833); }
.about-copy h2 { margin-bottom: calc(var(--unit) * 1.822917); }
.about-copy p {
  max-width: 720px;
  font-size: clamp(15px, calc(var(--unit) * 1.041667), 20px);
  line-height: 1.7;
  letter-spacing: .165em;
}
.about-copy p + p { margin-top: calc(var(--unit) * 1.927083); }
.about-copy .signature { margin-top: calc(var(--unit) * 2.34375); padding-left: calc(var(--unit) * 1.458333); font-size: clamp(16px, calc(var(--unit) * 1.145833), 22px); letter-spacing: .2em; }
.site-footer {
  min-height: calc(var(--unit) * 8.4375);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: calc(var(--unit) * 2.5);
  font-size: clamp(12px, calc(var(--unit) * .9375), 18px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.social-links { display: flex; gap: calc(var(--unit) * 3.385417); }
.social-links a { display: flex; align-items: center; gap: calc(var(--unit) * 1.197917); min-height: 44px; }
.social-links img { width: auto; height: calc(var(--unit) * 1.71875); object-fit: contain; }
.social-links a:nth-child(2) img { height: calc(var(--unit) * 1.40625); }
.social-links a:nth-child(3) img { height: calc(var(--unit) * 1.145833); }
.social-links a:nth-child(4) img { height: calc(var(--unit) * 1.510417); }
.tagline { white-space: nowrap; }

.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10; padding: 16px; background: #15150f; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript-note { padding-block: 20px; line-height: 1.6; }
dialog {
  max-width: min(480px, calc(100% - 40px));
  color: var(--ink);
  border: 1px solid var(--rule);
  background: #11120e url("./assets/images/background.webp") center / cover;
  padding: 0;
  box-shadow: 0 24px 100px #000;
}
dialog::backdrop { background: rgb(0 0 0 / 78%); }
.notice-content { padding: 36px; }
.notice-eyebrow { margin-bottom: 28px; letter-spacing: .2em; font-size: 13px; }
.notice-content h2 { font-size: 23px; }
#notice-message { line-height: 1.7; margin-top: 20px; }
.notice-close { margin-top: 28px; padding: 13px 22px; color: var(--ink); background: transparent; border: 1px solid var(--rule); }
.notice-close:hover { background: #393428; }
.bandcamp-embed-shell { overflow: hidden; height: 120px; background: #333; }
.bandcamp-embed { display: block; width: 100%; height: 120px; border: 0; transform-origin: top left; }
.embed-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; line-height: 1.6; }
.embed-links a, .embed-links button { padding-block: 6px; }
.embed-links button { background: none; border: 0; color: inherit; padding-inline: 0; }
.embed-links button:hover { color: #ead8bb; }

@media (max-width: 1100px) {
  .music { grid-template-columns: minmax(0, 1fr) 31%; }
  .player-actions { gap: 12px; padding: 0; }
  .bandcamp-mark { display: none; }
  .player-art { width: 24%; }
  .player-body { padding: 12px; gap: 16px; }
  .player-heading { gap: 8px; }
  .audio-status { white-space: normal; max-width: 58px; line-height: 1.4; }
  .about-copy p { letter-spacing: .12em; }
  .site-footer { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  body { background-size: auto 1500px; }
  .site-shell { padding-inline: 24px; }
  .site-header { min-height: 88px; padding-top: 8px; font-size: 14px; letter-spacing: .14em; border-width: 2px; }
  .site-header nav { gap: 18px; }
  .hero { padding-block: 30px 26px; }
  .hero h1 { width: 100%; }
  .section-rule { border-width: 2px; }
  .music { grid-template-columns: 1fr; padding-block: 28px 32px; gap: 30px; }
  h2 { font-size: 21px; letter-spacing: .18em; }
  .latest-track { padding: 0; }
  .latest-track h2 { margin-bottom: 22px; }
  .player-preview { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px 12px; padding: 12px; }
  .player-art { width: 100%; height: auto; aspect-ratio: 1; align-self: start; }
  .player-body { display: contents; }
  .player-heading { flex-wrap: wrap; gap: 8px; align-content: start; }
  .track-meta h3 { font-size: 15px; }
  .track-meta p { font-size: 13px; margin-top: 5px; }
  .player-actions { gap: 22px; }
  .player-actions button, .player-actions a { font-size: 13px; min-height: 28px; padding-block: 4px; }
  .player-controls { grid-column: 1 / -1; gap: 12px; }
  .play-button { width: 44px; height: 44px; }
  .play-button span { border-top-width: 10px; border-bottom-width: 10px; border-left-width: 17px; }
  .track-progress { height: 9px; }
  .audio-status { font-size: 11px; max-width: none; white-space: nowrap; }
  .more-music { padding: 26px 0 0; border-left: 0; border-top: 1px solid #71654f; }
  .more-music h2 { margin-bottom: 20px; }
  .release-list { --list-height: 240px; gap: 18px; }
  .release { gap: 20px; }
  .release > img { width: 72px; }
  .release > span { gap: 8px; }
  .release strong { font-size: 16px; }
  .release-subtitle, .release-year { font-size: 13px; }
  .about { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 34px; }
  .about-photo { padding: 0; }
  .about-copy { padding: 20px 0 0; border: 0; }
  .about-copy h2 { margin-bottom: 24px; }
  .about-copy p { font-size: 15px; letter-spacing: .1em; line-height: 1.85; }
  .about-copy p + p { margin-top: 26px; }
  .about-copy .signature { margin-top: 30px; padding-left: 12px; font-size: 17px; }
  .desktop-break { display: none; }
  .site-footer { padding-block: 28px 34px; gap: 28px; }
  .social-links { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .social-links a { gap: 16px; font-size: 13px; letter-spacing: .13em; }
  .social-links img { width: 27px; height: 27px; }
  .social-links a:nth-child(n) img { height: 27px; }
  .tagline { font-size: 11px; letter-spacing: .16em; }
}

@media (max-width: 380px) {
  .site-shell { padding-inline: 18px; }
  .site-header { font-size: 12px; letter-spacing: .1em; }
  .site-header nav { gap: 12px; }
  .player-preview { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; }
  .track-meta h3 { font-size: 14px; }
}

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