/* /links — link-in-bio page. Sits on splash.css (tokens, drone, scanlines, bg canvas); this file only adds the list.
   Phone-first: most visitors arrive from the Instagram bio. Tap targets >= 56px, labels UPPERCASE (Silkscreen Rule),
   sentences in sentence case, cyan = line + glow only (Glow-Not-Field), one warm focal point = the music-visuals CTA. */
.links-page {
  justify-content: flex-start;
  gap: clamp(0.5rem, 1.6vh, 1rem);
  padding-top: clamp(1.4rem, 4vh, 3rem);
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.links-home { color: inherit; text-decoration: none; }
.links-home:focus-visible { outline: 1px dashed var(--clr-cyan); outline-offset: 6px; border-radius: 6px; }
.links-page .wordmark { font-size: clamp(1.5rem, 7.5vw, 2.6rem); }
.links-page .mascot { font-size: clamp(4px, min(0.62vh, 1.5vw), 5.5px); }

.links-intro {
  max-width: 34ch;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--clr-text);
  opacity: 0;
  animation: fadeIn 0.9s var(--ease-out-expo) 0.8s forwards;
}

.link-list {
  list-style: none;
  width: 100%;
  max-width: 30rem;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.link-list li { opacity: 0; animation: fadeUp 0.7s var(--ease-out-expo) forwards; }
.link-list li:nth-child(1) { animation-delay: 0.90s; }
.link-list li:nth-child(2) { animation-delay: 0.97s; }
.link-list li:nth-child(3) { animation-delay: 1.04s; }
.link-list li:nth-child(4) { animation-delay: 1.11s; }
.link-list li:nth-child(5) { animation-delay: 1.18s; }
.link-list li:nth-child(6) { animation-delay: 1.25s; }
.link-list li:nth-child(7) { animation-delay: 1.32s; }

.link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "t go" "sub go";
  column-gap: 12px;
  row-gap: 2px;
  min-height: 56px;
  padding: 12px 16px;
  text-align: left;
  text-decoration: none;
  color: var(--clr-text);
  background: rgba(36, 37, 43, 0.72);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}
.link__t {
  grid-area: t;
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-text-bright);
}
.link__sub { grid-area: sub; font-size: 0.8rem; line-height: 1.45; color: var(--clr-text-dim); }
.link__go {
  grid-area: go;
  align-self: center;
  font-size: 1.05rem;
  color: var(--clr-text-dim);
  transition: color var(--duration-fast), transform var(--duration-fast);
}
.link:hover, .link:focus-visible {
  border-color: var(--clr-cyan);
  box-shadow: 0 0 0 1px var(--clr-cyan-dim), 0 0 18px rgba(0, 229, 209, 0.14);
  outline: none;
}
.link:hover .link__go, .link:focus-visible .link__go { color: var(--clr-cyan); transform: translateX(3px); }
.link:active { transform: scale(0.985); }

/* the one warm focal point: the offer. Rust is a mark (left edge), not text (3.5:1 on night) */
.link--cta { border-left: 3px solid var(--clr-orange); padding-left: 14px; background: linear-gradient(90deg, rgba(173, 52, 52, 0.14), rgba(39, 39, 43, 0.72) 60%); }
.link--cta .link__sub { color: var(--clr-text); }

.links-foot {
  margin: clamp(0.4rem, 2vh, 1rem) 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.links-foot a { color: var(--clr-text-dim); text-decoration: none; display: inline-block; padding: 12px 8px; }
.links-foot a:hover, .links-foot a:focus-visible { color: var(--clr-cyan); }

@media (max-width: 360px) {
  .link { padding: 10px 12px; }
  .link__t { font-size: 0.8rem; letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  .links-intro, .link-list li { animation: none; opacity: 1; }
  .link, .link__go { transition: none; }
  .link:hover .link__go, .link:focus-visible .link__go { transform: none; }
}