/* ==========================================================================
   Tall, Black & Propagated — link hub

   Shares its visual language with release-page-nu.vercel.app: Woodsmoke
   ground, frosted Woodsmoke cards with a Locust hairline, Everglade hover,
   Cararra text, staggered fade-up on entry. Brand marks carry their own
   official colour rather than the old uniform Locust.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --woodsmoke:    #0F1110;  /* background            */
  --charcoal:     #2A2D2B;  /* secondary background  */
  --everglade:    #1F3A2E;  /* headers / hover       */
  --axolotl:      #4E6B4A;  /* accents / buttons     */
  --walnut-brown: #6B4F3A;  /* warm contrast         */
  --shadow:       #8A6A4F;  /* warm contrast         */
  --locust:       #A3B18A;  /* subtle highlights     */
  --cararra:      #EDECE8;  /* text                  */

  /* --- Semantic tokens -------------------------------------------------- */
  --bg: var(--woodsmoke);
  --fg: var(--cararra);

  --card-bg: rgba(15, 17, 16, .7);
  --card-border: rgba(163, 177, 138, .15);
  --card-border-hover: rgba(163, 177, 138, .3);
  --card-hover-bg: rgba(31, 58, 46, .75);
  --card-blur: blur(8px);

  --muted: rgba(237, 236, 232, .55);
  --footer-fg: rgba(237, 236, 232, .35);

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand: 'Dancing Script', cursive;

  --container-max: 480px;
  --radius: 12px;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100%;
  font-family: var(--font-body);
  color: var(--fg);

  /* Solid Woodsmoke, with the faintest Everglade bloom behind the masthead so
     the page reads as lit rather than flat. Mirrors the scrim the release
     page lays over its blurred backdrop. */
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, rgba(31, 58, 46, .45), transparent 65%),
    var(--bg);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 1rem 2rem;
}

.content {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: 2.5rem;
}

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  text-align: center;
}

.brand-name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  line-height: 1.15;
  color: var(--fg);
}

.bio {
  margin-top: 1rem;
  padding: .75rem 1.25rem;
  font-size: .9rem;
  line-height: 1.45;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
}

.bio p + p {
  margin-top: .75rem;
}

/* Pill radius rather than the 12px of a link box, so it reads as a control
   rather than one more destination in the stack. */
.share-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .5rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  color: var(--fg);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.share-button:hover,
.share-button:focus-visible {
  background: var(--card-hover-bg);
  border-color: var(--card-border-hover);
  transform: scale(1.025);
}

.share-button:active { transform: scale(.98); }

.share-button svg {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  fill: var(--locust);
}

/* ==========================================================================
   Section headings
   ========================================================================== */

.eyebrow {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.featured,
.group {
  margin-top: 2rem;
}

/* A hairline above each group after the first, so the sections read as
   distinct without adding chrome. */
.group + .group {
  padding-top: 1.75rem;
  border-top: 1px solid var(--card-border);
}

/* ==========================================================================
   Featured release
   ========================================================================== */

.release-card {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-top: .875rem;
  padding: .75rem;
  border: 1px solid rgba(163, 177, 138, .35);
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  color: var(--fg);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
  animation: fadeSlideUp .4s ease both;
}

.release-card:hover,
.release-card:focus-visible {
  background: var(--card-hover-bg);
  border-color: var(--locust);
  transform: scale(1.025);
}

.release-card:active { transform: scale(.98); }

.release-card__art {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.release-card__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.release-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.1;
}

.release-card__artist {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.3;
}

.release-card__cue {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--locust);
}

.release-card__cue svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   Link buttons
   ========================================================================== */

.links {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-top: .875rem;
}

.link-box {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  color: var(--fg);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;

  /* Stagger comes from --i on the element, so adding a link never means
     touching this file. */
  animation: fadeSlideUp .4s ease both;
  animation-delay: calc(var(--i, 0) * .07s);
}

.link-box:hover,
.link-box:focus-visible {
  background: var(--card-hover-bg);
  border-color: var(--card-border-hover);
  transform: scale(1.025);
}

.link-box:active { transform: scale(.98); }

/* Brand marks ship in their official colour via --brand. Anything without one
   (the envelope) falls back to Locust. */
.link-box__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--brand-override, var(--brand, var(--locust)));
}

.link-box__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

/* TikTok and Threads ship a near-black official mark. Both permit the
   reversed-out white variant on a dark ground, and this page is always dark,
   so the swap is unconditional. */
[data-mono] { --brand-override: var(--cararra); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  margin-top: auto;
  padding: 3rem 1rem 0;
  font-size: .75rem;
  color: var(--footer-fg);
  text-align: center;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .link-box:hover,
  .link-box:focus-visible,
  .release-card:hover,
  .release-card:focus-visible,
  .share-button:hover,
  .share-button:focus-visible { transform: none; }
}