/* ---------------------------------------------------------------
   /links — the link-in-bio page.

   Not part of the site's navigation and not in the sitemap: it is
   reached from social profiles, on a phone, by someone who has not
   seen the site before. So it is designed narrow-first, with tap
   targets rather than text links, and it carries no site chrome.

   Still follows the design language in style.css: paper ground,
   soft cards, Rot for the one call to action.
   --------------------------------------------------------------- */

.links-page {
  /* Centres the column vertically on tall phones without pushing content
     off the top on short ones. */
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.links {
  width: 100%;
  max-width: 27rem;
  padding: calc(var(--space) * 3) calc(var(--space) * 1.5) calc(var(--space) * 4);
  margin: 0 auto;
}

/* --- Head --------------------------------------------------------- */

.links-head {
  text-align: center;
  margin-bottom: calc(var(--space) * 2.5);
}

/* App-icon shape rather than a circle: the cover art is designed square, and
   a circular mask clips the title lettering at the corners. */
.links-avatar {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
}

.links-head h1 {
  font-size: 1.9rem;
  color: var(--ink);
  margin: 0.7em 0 0.25em;
}

.links-intro {
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 26ch;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* --- The one thing this page is for ------------------------------- */

.links-primary {
  margin-bottom: calc(var(--space) * 2.5);
}

.links-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 18px;
  padding: calc(var(--space) * 1.2) var(--space);
  box-shadow: 0 10px 24px -12px var(--accent);
  transition: background 0.15s ease, transform 0.15s ease;
}

.links-cta:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
  transform: translateY(-1px);
}

.links-cta-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

.links-cta-sub {
  display: block;
  margin-top: 0.35em;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  opacity: 0.82;
}

/* --- Platforms ---------------------------------------------------- */

.links-listen h2 {
  text-align: center;
  margin: 0 0 calc(var(--space) * 1.1);
}

.links-row {
  display: flex;
  align-items: center;
  gap: var(--space);
  /* Comfortably above the 44px minimum tap target. */
  min-height: 58px;
  padding: 0 calc(var(--space) * 1.1);
  margin-bottom: 0.65rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.links-row:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  color: var(--ink);
  transform: translateY(-1px);
}

.links-icon {
  flex: 0 0 auto;
  display: flex;
  color: var(--ink-soft);
}

.links-row:hover .links-icon {
  color: var(--accent);
}

.links-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.links-row-name {
  flex: 1 1 auto;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* The row pointing at this site's own player, rather than out to a platform.
   It carries a second line, so the row grows a little and the name stops
   being the flex child that fills the space. */
.links-row--own {
  min-height: 66px;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.links-row-text {
  flex: 1 1 auto;
  min-width: 0;
}

.links-row-text .links-row-name {
  display: block;
}

.links-row-sub {
  display: block;
  margin-top: 0.1em;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.links-row--own:hover .links-row-sub {
  color: var(--ink-soft);
}

.links-row-go {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* --- Foot --------------------------------------------------------- */

.links-foot {
  margin-top: calc(var(--space) * 2.5);
  padding-top: calc(var(--space) * 1.25);
  border-top: 1px solid var(--line);
  text-align: center;
}

.links-foot p {
  margin: 0;
}

.links-foot a {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.5;
}

.links-foot a:hover {
  color: var(--accent);
}

.links-foot .lang-switch {
  justify-content: center;
  margin-top: 0.6em;
}