@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');


/* ==========================================
   TAKE A MINUTE VOL. 2 COLORS

   Based directly on the cover:
   smoky blue / teal
   charcoal
   walnut brown
   bronze
   parchment
   aged ivory
   ========================================== */

:root {

  --minute2-black:
    #050708;

  --minute2-charcoal:
    #101517;

  --minute2-deep:
    #142126;

  --minute2-slate:
    #263b40;

  --minute2-teal:
    #35575e;

  --minute2-wood-dark:
    #3b2417;

  --minute2-wood:
    #674126;

  --minute2-bronze:
    #986a42;

  --minute2-tan:
    #b6a27c;

  --minute2-parchment:
    #d6c69b;

  --minute2-ivory:
    #eee3bd;

}


/* ==========================================
   MAIN PAGE
   ========================================== */

html {
  background:
    #000;
}


body {
  margin:
    0;
  min-height:
    100vh;
  color:
    white;
  font-family:
    "Space Grotesk",
    sans-serif;

  position: relative;
  background: #000;
}


/* ==========================================
   STABLE VIEWPORT BACKGROUND
   Prevents the album-color flicker when
   audio players/fonts change page height.
   ========================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  background:

    radial-gradient(
      circle at 70% 12%,
      rgba(53, 87, 94, 0.28) 0%,
      rgba(38, 59, 64, 0.14) 28%,
      rgba(20, 33, 38, 0.07) 50%,
      transparent 70%
    ),

    radial-gradient(
      circle at 16% 38%,
      rgba(103, 65, 38, 0.13) 0%,
      transparent 48%
    ),

    radial-gradient(
      circle at 82% 65%,
      rgba(152, 106, 66, 0.07) 0%,
      transparent 42%
    ),

    linear-gradient(
      180deg,
      #17272c 0%,
      #101a1d 38%,
      #090d0e 73%,
      #000 100%
    );
  background-repeat:
    no-repeat;
  background-size:
    100% 100%;

  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.back-link,
.album-page,
.site-footer {
  position: relative;
  z-index: 1;
}


button,
input,
select,
textarea {
  font-family:
    "Space Grotesk",
    sans-serif;
}


h1,
h2 {
  font-weight:
    600;
}


.track-name,
.streaming-links a {
  font-weight:
    500;
}


/* ==========================================
   TOP BACK LINK
   ========================================== */

.back-link {
  display:
    inline-block;

  margin:
    25px;

  padding:
    14px 22px;

  color:
    white;

  text-decoration:
    none;

  font-size:
    14px;

  letter-spacing:
    3px;

  border:
    1px solid
    rgba(238, 227, 189, 0.40);

  transition:
    color 0.3s ease,
    background 0.3s ease;
}


.back-link:hover {
  color:
    #111;

  background:
    var(--minute2-ivory);
}


/* ==========================================
   ALBUM PAGE
   ========================================== */

.album-page {
  min-height:
    90vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  text-align:
    center;

  padding:
    40px 20px;
}


/* ==========================================
   ALBUM HEADER
   ========================================== */

.album-header {
  width:
    100%;

  max-width:
    1100px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    70px;

  margin-bottom:
    60px;

  position:
    relative;
}


/* ==========================================
   ALBUM INFO
   ========================================== */

.album-info {
  width:
    410px;

  max-width:
    100%;

  text-align:
    left;
}


.album-info h1 {
  margin:
    0 0 10px;

  color:
    var(--minute2-ivory);

  font-size:
    clamp(
      38px,
      3.5vw,
      50px
    );

  line-height:
    1;

  letter-spacing:
    4px;

  text-shadow:
    0 0 18px
    rgba(214, 198, 155, 0.23),

    0 0 42px
    rgba(53, 87, 94, 0.20);
}


.album-title-line {
  display:
    block;

  white-space:
    nowrap;
}


.artist-name {
  margin:
    0 0 40px;

  font-size:
    18px;

  letter-spacing:
    3px;
}


.artist-name a,
.artist-name a:visited {
  color:
    white;

  text-decoration-color:
    rgba(152, 106, 66, 0.65);

  text-underline-offset:
    4px;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease,
    text-decoration-color 0.3s ease;
}


.artist-name a:hover {
  color:
    var(--minute2-ivory);

  text-decoration-color:
    var(--minute2-bronze);

  text-shadow:
    0 0 12px
    rgba(214, 198, 155, 0.25);
}


.get-music {
  margin-bottom:
    20px;

  color:
    rgba(214, 198, 155, 0.72);

  text-transform:
    uppercase;

  font-size:
    12px;

  letter-spacing:
    4px;
}


/* ==========================================
   STREAMING LINKS
   ========================================== */

.streaming-links {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.streaming-links a {
  position:
    relative;

  display:
    block;

  width:
    100%;

  padding:
    13px 18px;

  box-sizing:
    border-box;

  color:
    #fff;

  text-align:
    center;

  text-decoration:
    none;

  letter-spacing:
    1.5px;

  border:
    1px solid
    rgba(152, 106, 66, 0.32);

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      rgba(53, 87, 94, 0.045)
    );

  box-shadow:
    inset 0 0 15px
    rgba(255, 255, 255, 0.015);

  overflow:
    hidden;

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.streaming-links a::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -120%;

  width:
    100%;

  height:
    100%;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(214, 198, 155, 0.12) 50%,
      transparent 80%
    );

  transition:
    left 0.5s ease;

  pointer-events:
    none;
}


.streaming-links a:hover {
  transform:
    translateX(5px);

  border-color:
    rgba(214, 198, 155, 0.62);

  background:
    linear-gradient(
      135deg,
      rgba(103, 65, 38, 0.15),
      rgba(53, 87, 94, 0.08)
    );

  box-shadow:
    0 0 18px
    rgba(152, 106, 66, 0.16),

    inset 0 0 18px
    rgba(214, 198, 155, 0.045);
}


.streaming-links a:hover::before {
  left:
    120%;
}


/* ==========================================
   ALBUM ART
   ========================================== */

.album-art-side {
  display:
    flex;

  justify-content:
    center;
}


.album-art {
  width:
    500px;

  max-width:
    100%;

  height:
    auto;

  box-shadow:
    0 25px 80px
    rgba(0, 0, 0, 0.50),

    0 0 45px
    rgba(53, 87, 94, 0.16),

    0 0 0 1px
    rgba(214, 198, 155, 0.09);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}


.album-art:hover {
  transform:
    scale(1.018);

  box-shadow:
    0 32px 95px
    rgba(0, 0, 0, 0.60),

    0 0 55px
    rgba(152, 106, 66, 0.18),

    0 0 0 1px
    rgba(238, 227, 189, 0.14);
}


/* ==========================================
   TRACK LIST
   ========================================== */

.track-list {
  width:
    100%;

  max-width:
    700px;

  margin-top:
    60px;

  text-align:
    left;
}


.track-list h2 {
  margin-bottom:
    25px;

  color:
    var(--minute2-ivory);

  text-align:
    center;

  font-size:
    28px;

  letter-spacing:
    5px;

  text-shadow:
    0 0 16px
    rgba(53, 87, 94, 0.19);
}


.track {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    40px 1fr 300px;

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    8px;

  padding:
    16px 14px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(214, 198, 155, 0.08);

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.022),
      rgba(38, 59, 64, 0.04)
    );

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.track:hover {
  transform:
    translateX(4px);

  border-color:
    rgba(152, 106, 66, 0.26);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.038),
      rgba(53, 87, 94, 0.055)
    );
}


.track-number {
  color:
    rgba(214, 198, 155, 0.80);

  font-size:
    14px;

  font-weight:
    bold;

  letter-spacing:
    1px;
}


.track-name {
  font-size:
    18px;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}


.track:hover .track-name {
  color:
    white;

  text-shadow:
    0 0 12px
    rgba(53, 87, 94, 0.22);
}


.track audio {
  width:
    100%;

  height:
    40px;
}


.track audio:not([controls]) {
  display:
    none;
}


/* ==========================================
   CUSTOM AUDIO PLAYER
   ========================================== */

.custom-audio-player {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    46px 45px 1fr 45px;

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 12px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(214, 198, 155, 0.11);

  border-radius:
    14px;

  background:
    rgba(0, 0, 0, 0.34);

  box-shadow:
    inset 0 0 18px
    rgba(0, 0, 0, 0.26);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


/* ==========================================
   PLAY BUTTON
   ========================================== */

.custom-play-button {
  position:
    relative;

  width:
    44px;

  height:
    44px;

  border:
    1px solid
    rgba(152, 106, 66, 0.55);

  border-radius:
    50%;

  background:
    rgba(53, 87, 94, 0.13);

  color:
    transparent;

  font-size:
    0;

  cursor:
    pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}


.custom-play-button::before {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    52%;

  width:
    0;

  height:
    0;

  transform:
    translate(-42%, -50%);

  border-top:
    7px solid transparent;

  border-bottom:
    7px solid transparent;

  border-left:
    11px solid
    var(--minute2-ivory);
}


.custom-play-button:hover {
  transform:
    scale(1.08);

  background:
    rgba(103, 65, 38, 0.23);

  border-color:
    rgba(214, 198, 155, 0.80);

  box-shadow:
    0 0 18px
    rgba(152, 106, 66, 0.24);
}


.track.playing
.custom-play-button::before {
  width:
    4px;

  height:
    14px;

  top:
    50%;

  left:
    42%;

  transform:
    translate(-50%, -50%);

  border:
    none;

  background:
    var(--minute2-ivory);
}


.track.playing
.custom-play-button::after {
  content:
    "";

  position:
    absolute;

  width:
    4px;

  height:
    14px;

  top:
    50%;

  left:
    58%;

  transform:
    translate(-50%, -50%);

  background:
    var(--minute2-ivory);
}


.current-time,
.duration {
  color:
    rgba(214, 198, 155, 0.58);

  font-size:
    12px;

  text-align:
    center;
}


/* ==========================================
   PROGRESS BAR
   ========================================== */

.progress-bar {
  width:
    100%;

  height:
    4px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border-radius:
    10px;

  background:
    rgba(214, 198, 155, 0.15);

  outline:
    none;

  cursor:
    pointer;
}


.progress-bar::-webkit-slider-thumb {
  width:
    12px;

  height:
    12px;

  -webkit-appearance:
    none;

  border:
    none;

  border-radius:
    50%;

  background:
    var(--minute2-bronze);

  cursor:
    pointer;

  box-shadow:
    0 0 10px
    rgba(152, 106, 66, 0.46);
}


.progress-bar::-moz-range-thumb {
  width:
    12px;

  height:
    12px;

  border:
    none;

  border-radius:
    50%;

  background:
    var(--minute2-bronze);

  cursor:
    pointer;

  box-shadow:
    0 0 10px
    rgba(152, 106, 66, 0.46);
}


/* ==========================================
   PLAYING TRACK
   ========================================== */

.track.playing {
  background:
    linear-gradient(
      135deg,
      rgba(103, 65, 38, 0.15),
      rgba(53, 87, 94, 0.08)
    );

  border-color:
    rgba(152, 106, 66, 0.40);

  box-shadow:
    0 0 28px
    rgba(53, 87, 94, 0.09);
}


.track.playing .track-number {
  color:
    var(--minute2-ivory);
}


.track.playing .track-name {
  color:
    white;

  font-weight:
    bold;

  text-shadow:
    0 0 15px
    rgba(152, 106, 66, 0.25);
}


.track.playing
.custom-audio-player {
  border-color:
    rgba(152, 106, 66, 0.30);

  background:
    rgba(38, 59, 64, 0.16);

  box-shadow:
    0 0 18px
    rgba(53, 87, 94, 0.08);
}


/* ==========================================
   ABOUT
   ========================================== */

.album-description {
  width:
    100%;

  max-width:
    700px;

  margin:
    80px auto 40px;

  text-align:
    center;
}


.album-description h2 {
  margin-bottom:
    25px;

  color:
    var(--minute2-ivory);

  font-size:
    28px;

  letter-spacing:
    5px;
}


.album-description p {
  color:
    #cec5ac;

  font-size:
    18px;

  line-height:
    1.7;
}


/* ==========================================
   ALBUM DETAILS
   ========================================== */

.album-details {
  width:
    100%;

  max-width:
    700px;

  margin:
    60px auto 80px;

  text-align:
    center;
}


.album-details h2 {
  margin-bottom:
    25px;

  color:
    var(--minute2-ivory);

  font-size:
    28px;

  letter-spacing:
    5px;
}


.album-details p {
  margin:
    5px 0;

  color:
    #cec5ac;

  font-size:
    16px;

  line-height:
    1.8;
}


.album-details strong {
  color:
    var(--minute2-bronze);
}


/* ==========================================
   LEVIAS MUSIC UNIVERSAL SOCIAL HUB

   KEEP BLACK / RED
   ========================================== */

.levias-social-hub {
  width:
    100%;

  max-width:
    900px;

  margin:
    100px auto 70px;

  padding:
    1px;

  box-sizing:
    border-box;

  position:
    relative;

  border-radius:
    28px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 40, 40, 0.55),
      rgba(120, 0, 0, 0.18) 28%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(110, 0, 0, 0.18) 72%,
      rgba(255, 35, 35, 0.45)
    );

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.50),

    0 0 35px
    rgba(160, 0, 0, 0.08);
}


/* ==========================================
   HUB INNER
   ========================================== */

.levias-hub-inner {
  width:
    100%;

  padding:
    55px 55px 45px;

  box-sizing:
    border-box;

  position:
    relative;

  overflow:
    hidden;

  border-radius:
    27px;

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(150, 0, 0, 0.12),
      transparent 35%
    ),

    radial-gradient(
      circle at 50% 100%,
      rgba(90, 0, 0, 0.08),
      transparent 38%
    ),

    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0.98),
      rgba(2, 2, 2, 0.99)
    );
}


.levias-hub-inner::before {
  content:
    "";

  position:
    absolute;

  top:
    -170px;

  left:
    50%;

  width:
    500px;

  height:
    300px;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(220, 0, 0, 0.11),
      transparent 68%
    );

  pointer-events:
    none;
}


/* ==========================================
   HUB BRAND
   ========================================== */

.levias-hub-brand {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  justify-content:
    center;

  align-items:
    baseline;

  gap:
    9px;

  margin-bottom:
    50px;

  text-align:
    center;

  letter-spacing:
    7px;
}


.levias-hub-small {
  color:
    white;

  font-size:
    18px;

  font-weight:
    600;
}


.levias-hub-main {
  color:
    #d51f1f;

  font-size:
    18px;

  font-weight:
    700;
}


.levias-hub-accent {
  position:
    absolute;

  left:
    50%;

  bottom:
    -16px;

  width:
    52px;

  height:
    2px;

  transform:
    translateX(-50%);

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #e22b2b,
      transparent
    );

  box-shadow:
    0 0 14px
    rgba(220, 30, 30, 0.45);
}


/* ==========================================
   HUB SECTIONS
   ========================================== */

.levias-hub-section {
  position:
    relative;

  z-index:
    2;

  text-align:
    center;
}


.levias-hub-label {
  margin:
    0 0 10px;

  color:
    #b32323;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    5px;
}


.levias-hub-section h2 {
  margin:
    0;

  color:
    white;

  font-size:
    28px;

  letter-spacing:
    5px;
}


.levias-hub-description {
  margin:
    14px auto 30px;

  color:
    rgba(255, 255, 255, 0.47);

  font-size:
    14px;

  line-height:
    1.6;

  letter-spacing:
    0.5px;
}


/* ==========================================
   HUB LINKS
   ========================================== */

.levias-hub-links {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    12px;

  max-width:
    700px;

  margin:
    0 auto;
}


.levias-hub-links a,
.levias-hub-links button {
  position:
    relative;

  min-width:
    118px;

  padding:
    13px 21px;

  box-sizing:
    border-box;

  overflow:
    hidden;

  color:
    rgba(255, 255, 255, 0.88);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.015)
    );

  border:
    1px solid
    rgba(190, 35, 35, 0.38);

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    600;

  letter-spacing:
    1.1px;

  cursor:
    pointer;

  box-shadow:
    inset 0 0 15px
    rgba(255, 255, 255, 0.012);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.levias-hub-links a span,
.levias-hub-links button span {
  position:
    relative;

  z-index:
    2;
}


.levias-hub-links a::before,
.levias-hub-links button::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -120%;

  width:
    100%;

  height:
    100%;

  background:
    linear-gradient(
      110deg,
      transparent 15%,
      rgba(220, 30, 30, 0.17) 50%,
      transparent 85%
    );

  transition:
    left 0.48s ease;

  pointer-events:
    none;
}


.levias-hub-links a:hover,
.levias-hub-links button:hover {
  transform:
    translateY(-2px);

  color:
    white;

  border-color:
    rgba(235, 45, 45, 0.78);

  background:
    linear-gradient(
      180deg,
      rgba(130, 0, 0, 0.13),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    0 0 22px
    rgba(170, 0, 0, 0.14),

    inset 0 0 18px
    rgba(170, 0, 0, 0.05);
}


.levias-hub-links a:hover::before,
.levias-hub-links button:hover::before {
  left:
    120%;
}


/* ==========================================
   HUB DIVIDER
   ========================================== */

.levias-hub-divider {
  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    18px;

  max-width:
    620px;

  margin:
    52px auto;

  position:
    relative;

  z-index:
    2;
}


.levias-hub-divider > span {
  display:
    block;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(180, 35, 35, 0.42)
    );
}


.levias-hub-divider > span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(180, 35, 35, 0.42),
      transparent
    );
}


.levias-hub-divider-mark {
  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(200, 35, 35, 0.55);

  border-radius:
    50%;

  color:
    #dc2c2c;

  background:
    #050505;

  font-size:
    12px;

  font-weight:
    700;

  box-shadow:
    0 0 18px
    rgba(160, 0, 0, 0.12);
}


/* ==========================================
   SHARE
   ========================================== */

.levias-share-section {
  padding-bottom:
    5px;
}


.levias-share-links a,
.levias-share-links button {
  min-width:
    125px;
}


/* ==========================================
   LEVIAS MUSIC RETURN
   ========================================== */

.levias-hub-return {
  margin-top:
    55px;

  padding-top:
    30px;

  position:
    relative;

  z-index:
    2;

  text-align:
    center;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.05);
}


.levias-hub-return a {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-width:
    150px;

  padding:
    13px 21px;

  box-sizing:
    border-box;

  overflow:
    hidden;

  color:
    rgba(255, 255, 255, 0.88);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.015)
    );

  border:
    1px solid
    rgba(190, 35, 35, 0.38);

  border-radius:
    5px;

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    600;

  letter-spacing:
    1.1px;

  cursor:
    pointer;

  box-shadow:
    inset 0 0 15px
    rgba(255, 255, 255, 0.012);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.levias-return-arrow,
.levias-return-text {
  position:
    relative;

  z-index:
    2;
}


.levias-return-arrow {
  color:
    rgba(255, 255, 255, 0.88);

  font-size:
    16px;

  line-height:
    1;
}


.levias-hub-return a::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    -120%;

  width:
    100%;

  height:
    100%;

  background:
    linear-gradient(
      110deg,
      transparent 15%,
      rgba(220, 30, 30, 0.17) 50%,
      transparent 85%
    );

  transition:
    left 0.48s ease;

  pointer-events:
    none;
}


.levias-hub-return a:hover {
  transform:
    translateY(-2px);

  color:
    white;

  border-color:
    rgba(235, 45, 45, 0.78);

  background:
    linear-gradient(
      180deg,
      rgba(130, 0, 0, 0.13),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    0 0 22px
    rgba(170, 0, 0, 0.14),

    inset 0 0 18px
    rgba(170, 0, 0, 0.05);
}


.levias-hub-return a:hover::before {
  left:
    120%;
}


/* ==========================================
   FOOTER
   ========================================== */

.site-footer {
  width:
    100%;

  padding:
    50px 20px;

  box-sizing:
    border-box;

  text-align:
    center;

  background:
    #000;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.site-footer .footer-logo {
  margin:
    0 0 15px;

  color:
    white;

  font-size:
    26px;

  letter-spacing:
    6px;
}


.site-footer p {
  margin:
    10px 0;

  color:
    #888;

  font-size:
    12px;

  letter-spacing:
    2px;
}


/* ==========================================
   PIXEL GUY
   DISABLED FOR NOW
   ========================================== */

.pixel-guy-wrapper {
  position:
    fixed;

  right:
    22px;

  bottom:
    18px;

  width:
    160px;

  z-index:
    9999;

  display:
    none;

  flex-direction:
    column;

  align-items:
    flex-end;

  cursor:
    pointer;

  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    manipulation;

  opacity:
    0;

  transform:
    translateY(35px);

  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}


.pixel-guy-image {
  display:
    block;

  width:
    150px;

  max-width:
    none;

  height:
    auto;

  object-fit:
    contain;

  image-rendering:
    pixelated;

  -webkit-user-drag:
    none;

  filter:
    drop-shadow(
      0 8px 10px
      rgba(0, 0, 0, 0.45)
    );
}


.pixel-guy-bubble {
  position:
    absolute;

  right:
    118px;

  bottom:
    118px;

  width:
    max-content;

  min-width:
    170px;

  max-width:
    310px;

  padding:
    15px 18px;

  box-sizing:
    border-box;

  background:
    white;

  color:
    #111;

  border:
    3px solid #111;

  border-radius:
    18px;

  font-size:
    14px;

  font-weight:
    700;

  line-height:
    1.4;

  text-align:
    left;

  white-space:
    normal;

  overflow-wrap:
    break-word;

  pointer-events:
    none;
}


.pixel-guy-bubble::after {
  content:
    "";

  position:
    absolute;

  right:
    18px;

  bottom:
    -14px;

  width:
    22px;

  height:
    22px;

  background:
    white;

  border-right:
    3px solid #111;

  border-bottom:
    3px solid #111;

  transform:
    rotate(45deg);
}


/* ==========================================
   TABLET + MOBILE
   ========================================== */

@media (max-width: 900px),
       (max-device-width: 900px) and (pointer: coarse) {

  .album-page {
    width:
      100%;

    padding:
      30px
      clamp(16px, 5vw, 40px);

    box-sizing:
      border-box;
  }


  .album-header {
    width:
      100%;

    max-width:
      700px;

    flex-direction:
      column;

    gap:
      45px;

    margin-bottom:
      45px;
  }


  .album-art-side {
    width:
      100%;

    display:
      flex;

    justify-content:
      center;

    order:
      1;
  }


  .album-art {
    width:
      clamp(220px, 72vw, 420px);

    max-width:
      100%;
  }


  .album-info {
    width:
      100%;

    max-width:
      430px;

    text-align:
      center;

    order:
      2;
  }


  .album-info h1 {
    font-size:
      clamp(31px, 8.4vw, 46px);

    line-height:
      1.02;

    letter-spacing:
      clamp(2px, 1vw, 4px);
  }


  .album-title-line {
    white-space:
      nowrap;
  }


  .artist-name {
    margin-bottom:
      35px;
  }


  .streaming-links {
    width:
      100%;

    max-width:
      360px;

    margin:
      0 auto;
  }


  .track-list,
  .album-description,
  .album-details {
    width:
      100%;

    max-width:
      700px;

    box-sizing:
      border-box;
  }


  .track {
    grid-template-columns:
      35px minmax(0, 1fr);

    gap:
      10px;

    padding:
      16px 12px;
  }


  .track:hover {
    transform:
      none;
  }


  .track-number {
    grid-column:
      1;
  }


  .track-name {
    grid-column:
      2;

    min-width:
      0;

    text-align:
      left;
  }


  .track audio {
    grid-column:
      1 / -1;

    width:
      100%;

    min-width:
      0;

    margin-top:
      8px;
  }


  .custom-audio-player {
    grid-column:
      1 / -1;

    grid-template-columns:
      44px
      40px
      minmax(0, 1fr)
      40px;

    gap:
      6px;

    width:
      100%;

    margin-top:
      8px;
  }

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {

  .album-info h1 {
    font-size:
      clamp(27px, 7.5vw, 36px);

    letter-spacing:
      1.5px;
  }


  .album-title-line {
    white-space:
      nowrap;
  }


  .levias-social-hub {
    width:
      calc(100% - 10px);

    margin:
      75px auto 55px;

    border-radius:
      22px;
  }


  .levias-hub-inner {
    padding:
      42px 20px 34px;

    border-radius:
      21px;
  }


  .levias-hub-brand {
    margin-bottom:
      42px;

    letter-spacing:
      5px;
  }


  .levias-hub-small,
  .levias-hub-main {
    font-size:
      15px;
  }


  .levias-hub-section h2 {
    font-size:
      23px;

    letter-spacing:
      4px;
  }


  .levias-hub-label {
    font-size:
      9px;

    letter-spacing:
      4px;
  }


  .levias-hub-description {
    max-width:
      280px;

    margin-bottom:
      25px;

    font-size:
      13px;
  }


  .levias-hub-links {
    gap:
      10px;
  }


  .levias-hub-links a,
  .levias-hub-links button {
    min-width:
      0;

    padding:
      12px 17px;

    font-size:
      13px;
  }


  .levias-hub-divider {
    gap:
      12px;

    margin:
      45px auto;
  }


  .levias-hub-divider-mark {
    width:
      30px;

    height:
      30px;
  }


  .levias-hub-return {
    margin-top:
      45px;
  }


  .levias-hub-return a {
    min-width:
      145px;

    padding:
      12px 17px;

    font-size:
      13px;

    border-radius:
      5px;
  }


  .pixel-guy-wrapper {
    right:
      10px;

    bottom:
      10px;

    width:
      120px;
  }


  .pixel-guy-image {
    width:
      110px;
  }


  .pixel-guy-bubble {
    right:
      84px;

    bottom:
      86px;

    width:
      max-content;

    min-width:
      145px;

    max-width:
      min(
        235px,
        calc(100vw - 125px)
      );

    padding:
      12px 14px;

    font-size:
      12px;

    border-width:
      2px;

    border-radius:
      14px;
  }


  .pixel-guy-bubble::after {
    right:
      15px;

    bottom:
      -11px;

    width:
      16px;

    height:
      16px;

    border-right-width:
      2px;

    border-bottom-width:
      2px;
  }

}

/* Loading and retry messages fit inside the existing player. */
.custom-audio-player .audio-status {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.custom-audio-player .audio-status[hidden] { display: none; }