:root {
  --cream: #fff3df;
  --cream-dim: rgba(255, 243, 223, 0.72);
  --shade: #1a1108;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--shade);
  color: var(--cream);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

.splash {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Static photo underneath: shows if JavaScript or WebGL is unavailable. */
  background: url("../assets/grove.webp") center / cover no-repeat var(--shade);
}

#grove {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Darkens the lower third and corners so the type reads over the photo. */
.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(26, 17, 8, 0.72) 0%, rgba(26, 17, 8, 0.25) 35%, transparent 60%),
    radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(26, 17, 8, 0.45) 100%);
}

.mast {
  position: absolute;
  left: 50%;
  bottom: clamp(3rem, 12vh, 9rem);
  transform: translateX(-50%);
  width: min(92vw, 1100px);
  text-align: center;
}

/* The wordmark as it appears on the records: Bebas Neue, caps, widely tracked. */
.name {
  margin: 0;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.37em;
  text-indent: 0.37em;     /* balances the trailing letter-space */
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

.name .the { display: inline; }

nav {
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  display: flex;
  gap: clamp(1.25rem, 4vw, 3rem);
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.72rem;
}

nav a,
nav button {
  color: var(--cream);
  text-decoration: none;
  opacity: 0.8;
  padding: 0 0 0.4em;
  border: 0;
  border-bottom: 1px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

/* Listen is an action, not a page, so it is a button dressed as the links. */
nav button {
  appearance: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

nav a:hover,
nav a:focus-visible,
nav button:hover,
nav button:focus-visible {
  opacity: 1;
  border-color: currentColor;
  outline: none;
}

/* While the player bar is up it owns the bottom edge: the mast lifts clear of
   it and the pointer hint goes. */
.mast { transition: bottom 0.4s ease; }
body.has-player .mast { bottom: calc(clamp(3rem, 12vh, 9rem) + 4.5rem); }
body.has-player .hint { display: none; }

@media (max-width: 820px) {
  body.has-player .mast { bottom: calc(clamp(3rem, 12vh, 9rem) + 7rem); }
}

.hint {
  position: absolute;
  right: 1.5rem;
  bottom: 1.25rem;
  margin: 0;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: 0.6;
}

@media (pointer: coarse) {
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hint { display: none; }
}