:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #888888;
  --rule: #e6e6e6;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  cursor: none;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
a:hover {
  cursor: none; /* override UA pointer so only the GIF follower shows */
}

a:hover:not(.stack) {
  opacity: 0.55;
}

.stack {
  position: relative;
  display: inline-block;
}

.stack img {
  display: block;
  width: 20rem;
}

.stack span {
  position: absolute;
  font-weight: bold;
  font-size: larger;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  visibility: hidden;
  pointer-events: none;
}

.stack:hover span {
  visibility: visible;
}

/* dim image only on hover, keep text solid */
.stack:hover img {
  opacity: 0.55;
}

@media (max-width: 768px) {
  .stack span {
    visibility: visible;
  }

  .stack img {
    width: 40vw;
  }
  /*
  .poem-section {
    right: 0rem;
  }*/

  .poem-section p {
    font-size: 0.5rem;
  }
}

.absolute {
  position: absolute;
}

.gif-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px; /* center the box on the pointer */
  background: url("./assets/cursor.png") no-repeat center / contain;
  pointer-events: none;
  z-index: 9999;
  display: none;
  will-change: transform;
}

.gif-cursor.is-visible {
  display: block;
}

.gif-cursor.is-hover {
  background-image: url("./assets/cursor-hover.gif");
}

.gif-cursor.is-click {
  background-image: url("./assets/cursor-click.png");
}

.page {
  max-width: 720px;
  margin: 0 auto;
  min-height: 100%;
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
}

.masthead {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

img.icon {
  width: 4rem;
  height: auto;
}

.logo {
  font-weight: 500;
  font-size: 1.25rem;
}

.logo-sub {
  color: var(--muted);
  font-size: 1rem;
}

.poem-section {
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  width: 220px;
  z-index: -100;
}

.poem-section p {
  text-align: right;
  font-size: 0.8rem;
}

.tagline {
  font-size: clamp(3.4rem, 4vw, 4.2rem);
  font-weight: 400;
  line-height: 1.3;
  width: fit-content;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  color: yellow;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}

.tagline .alt {
  display: none;
}

.tagline:hover .default {
  display: none;
}

.tagline:hover .alt {
  display: inline;
  color: black;
}

.statement {
  /*font-size: clamp(1rem, 2.5vw, 1.25rem);*/
  /*max-width: 32ch;*/
}

.player {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.player button {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: none;
}

.player button:hover {
  opacity: 0.55;
}

.player-head {
  display: flex;
  align-items: center;
  gap: 20px;
}

.player-art {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.player-art.is-playing {
  animation: spin 4s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.player-info {
  display: flex;
  flex-direction: column;
}

.player-album {
  font-weight: 500;
}

.player-artist,
.player-title {
  color: var(--muted);
  font-size: 0.9rem;
}

.player-controls {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

.player-time {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.player-seek {
  height: 14px; /* generous hit area around the 2px line */
  display: flex;
  align-items: center;
  background: linear-gradient(var(--rule), var(--rule)) left center / 100% 2px
    no-repeat;
}

.player-seek-fill {
  height: 2px;
  width: 0;
  background: var(--fg);
}

.player-tracks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.player-track.is-current {
  font-weight: 500;
}

.player-msg {
  color: var(--muted);
  font-size: 0.85rem;
}

.player-buy {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  font-size: 0.95rem;
}

@media (max-width: 520px) {
  .page {
    padding: 32px 20px;
  }
  .nav {
    flex-wrap: wrap;
    gap: 16px 24px;
  }
}