/* LAST AVE storm-noir theme: charcoal, bone, and restrained oxblood. */
:root {
  --ink: #0d0b0c;
  --paper: #e8e2df;
  --muted: #9a8e8d;
  --line: rgba(193, 76, 65, .24);
  --accent: #96372f;
  --accent-bright: #c05245;
  --ash: #c2b8b5;
}

body {
  background: #0b090a;
  color: var(--paper);
}

.grain {
  opacity: .075;
}

.topbar {
  border-bottom-color: rgba(171, 68, 58, .22);
  background: linear-gradient(180deg, rgba(11, 8, 9, .42), transparent);
}

.mark {
  border-color: rgba(191, 96, 83, .72);
  color: #d2bfba;
}

.top-note,
.hero-bottom,
.vertical-label,
.image-index {
  color: #aa9996;
}

.header-link {
  border-bottom-color: rgba(195, 82, 69, .78);
}

.hero {
  background: #100c0d;
}

.hero:before {
  background:
    linear-gradient(90deg, rgba(12, 8, 9, .96) 0%, rgba(14, 9, 10, .72) 39%, rgba(14, 8, 9, .19) 100%),
    linear-gradient(0deg, rgba(12, 8, 9, .55), transparent 37%, rgba(12, 8, 9, .12));
}

.storm-field {
  background: #100d0f;
}

.storm-video {
  filter: grayscale(.78) sepia(.18) hue-rotate(320deg) saturate(.7) contrast(1.12) brightness(.78);
  opacity: .92;
}

.eyebrow,
.listen-section .eyebrow,
.follow-content .eyebrow {
  color: #bd756d;
}

.live-dot {
  background: var(--accent-bright);
  box-shadow: 0 0 13px rgba(192, 82, 69, .8);
}

@keyframes pulse {
  50% { opacity: .38; box-shadow: 0 0 3px rgba(192, 82, 69, .55); }
}

h1 span,
.follow-content h2 span {
  -webkit-text-stroke-color: rgba(232, 218, 213, .78);
}

h1 sup {
  color: #c27b70;
}

.hero-sub {
  color: #d0c3c0;
}

.scroll-cue {
  color: #e2d7d3;
}

.scroll-line {
  background: var(--accent-bright);
}

.portrait-frame {
  background: #211718;
  box-shadow: 0 26px 100px rgba(0, 0, 0, .48), 0 0 0 1px rgba(159, 56, 48, .12);
}

.portrait-frame:after {
  background:
    linear-gradient(180deg, rgba(10, 7, 8, .08), rgba(10, 7, 8, .16) 57%, rgba(12, 7, 8, .76)),
    linear-gradient(90deg, rgba(13, 7, 8, .24), transparent 54%);
}

.portrait-frame img {
  filter: grayscale(1) contrast(1.13) brightness(.88);
  mix-blend-mode: normal;
  opacity: .94;
}

.portrait-wrap figcaption {
  color: #d2c3c0;
}

.hero-bottom {
  border-top-color: rgba(173, 67, 57, .34);
}

/* Keep the whole release experience inside the same dark visual world. */
.listen-section {
  background:
    radial-gradient(ellipse at 83% 44%, rgba(105, 32, 29, .2), transparent 37%),
    linear-gradient(118deg, #110d0e, #191011 58%, #100c0d);
  color: #e8e2df;
  border-top: 1px solid rgba(166, 61, 53, .27);
  border-bottom: 1px solid rgba(166, 61, 53, .2);
}

.listen-section .eyebrow {
  color: #bd756d;
}

.listen-intro h2 em {
  color: #b45b51;
}

.release-note {
  color: #b5a9a6;
}

.player-card {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(114, 39, 36, .2), transparent 54%),
    linear-gradient(145deg, #171112, #0d0b0c 72%);
  color: #e8e2df;
  border: 1px solid rgba(166, 69, 60, .35);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .48), 0 0 48px rgba(103, 30, 26, .12);
}

.track-art {
  background: radial-gradient(circle at 50% 50%, #d2b6af 0 4%, #241515 4.5% 11%, #89453d 11.5% 12%, #171011 12.5% 28%, #50302d 28.5% 29%, #110d0e 30% 46%, #7e4942 46.5% 47%, #1b1112 47.5%);
  box-shadow: 0 0 25px rgba(130, 43, 36, .2);
}

.track-center {
  background: #a7473e;
  color: #f0e8e5;
}

.track-ring {
  border-color: rgba(210, 146, 135, .32);
}

.track-number,
.track-info>p:last-child,
.track-kicker {
  color: #b7a4a0;
}

.play-button,
.volume-button {
  color: #f0e5e1;
}

.play-button {
  border-color: rgba(205, 117, 105, .76);
  box-shadow: 0 0 22px rgba(154, 50, 43, .14);
}

.play-button:hover {
  background: #a4433a;
  color: #fff;
}

.timeline::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #c65b4e var(--progress, 0%), rgba(255,255,255,.22) var(--progress, 0%));
}

.timeline::-moz-range-progress {
  background: #c65b4e;
}

.timeline::-webkit-slider-thumb,
.timeline::-moz-range-thumb {
  background: #e6d5d0;
}

.player-hint {
  color: #b17b74;
}

/* Make the follow section feel like the same storm rather than a new template. */
.follow-section {
  background:
    radial-gradient(ellipse at 79% 51%, rgba(111, 31, 28, .24), transparent 31%),
    linear-gradient(110deg, #0e0b0c, #171011 72%, #100b0c);
}

.follow-rule {
  color: #ad7872;
}

.follow-rule span:first-child {
  background: rgba(176, 72, 62, .32);
}

.follow-content>p:not(.eyebrow) {
  color: #c0b4b1;
}

.follow-button {
  border-color: rgba(190, 89, 78, .76);
  color: #e9d8d4;
  box-shadow: inset 0 0 22px rgba(123, 38, 33, .1);
}

.follow-button:hover {
  background: #9f4038;
  color: #fff;
}

.mini-vortex,
.mini-vortex:before,
.mini-vortex:after {
  border-color: rgba(175, 67, 59, .42);
  filter: drop-shadow(0 0 9px rgba(150, 45, 39, .18));
}

.footer {
  background: #090808;
  border-top-color: rgba(157, 58, 51, .38);
  color: #a28f8c;
}

.footer-name {
  color: #e8dedb;
}

.header-link:hover,
.footer a:hover {
  color: #e0a099;
}

.header-link:focus-visible,
.wordmark:focus-visible,
.scroll-cue:focus-visible,
.follow-button:focus-visible,
.footer a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline-color: #dc8b80;
}

@media (max-width: 760px) {
  .hero:before {
    background:
      linear-gradient(90deg, rgba(12, 8, 9, .83), rgba(14, 8, 9, .34)),
      linear-gradient(0deg, rgba(12, 8, 9, .66), transparent 55%);
  }

  .storm-video {
    filter: grayscale(.78) sepia(.16) hue-rotate(320deg) saturate(.68) contrast(1.1) brightness(.76);
    opacity: .78;
  }

  .portrait-frame img {
    opacity: .92;
  }

  .player-card {
    border-color: rgba(166, 69, 60, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}