/* ==========================================================================
   Haz Games — /links
   --------------------------------------------------------------------------
   The "one link in bio" page: a single centred column of destinations, sized
   for a phone held in one hand. Everything here is layout only — colour, type
   and the hard-offset shadows all come from tokens.css.

   Deliberately does NOT use the sticky .site-header from base.css. Visitors
   land here straight from a social profile, so the page is the navigation;
   a second nav bar above it would just compete with the buttons.
   ========================================================================== */

/* Full-height column so the footer sits at the bottom of short screens
   instead of floating halfway up. */
.links-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Same diagonal halftone as the landing page hero, so the two pages read as
     one site even though this one has no header. */
  background-image: var(--texture-halftone);
}

.links-main {
  flex: 1;
  width: 100%;
  max-width: var(--w-narrow);
  margin-inline: auto;
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem) var(--space-gutter);
}

/* --- Identity ------------------------------------------------------------- */
.links-id {
  text-align: center;
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

/* Round, because the logo art is itself a circle on a transparent field — a
   square frame would enclose empty corners. The hard offset shadow still
   applies; box-shadow follows the border-radius, so it reads as the house
   style rather than a soft avatar ring. */
.links-id__avatar {
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--shadow-md) var(--blue);
}

.links-id__studio {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.25rem);
  line-height: 1.1;
  color: var(--orange);
  text-shadow: 3px 3px 0 var(--ink);
  letter-spacing: 1px;
}

.links-id__tagline {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--body-text);
  text-wrap: balance;
}

/* --- The link rows -------------------------------------------------------- */
.links-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Three columns rather than a plain flex row: the icon and the empty cell on
   the right are the same width, which keeps the label optically centred no
   matter how long it is. */
.link-row {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: var(--cream-light);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  box-shadow: var(--shadow-md) var(--ink);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* The house press-in: the row slides onto its own shadow. */
.link-row:hover,
.link-row:focus-visible {
  color: var(--ink);
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--ink);
}

.link-row__icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.link-row__label { text-align: center; text-wrap: balance; }

/* One row carries the primary call to action. Orange fill, blue shadow —
   the same pairing the wishlist button uses everywhere else. */
.link-row--primary {
  background: var(--orange);
  color: var(--paper);
  box-shadow: var(--shadow-md) var(--blue);
}
.link-row--primary:hover,
.link-row--primary:focus-visible {
  color: var(--paper);
  box-shadow: 0 0 0 var(--blue);
}
.link-row--primary:focus-visible { outline-color: var(--ink); }

/* Ink-filled rows for the owned destinations (site, press kit, email).
   An ink shadow would vanish against an ink fill, so these throw blue. */
.link-row--ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-md) var(--blue);
}
.link-row--ink:hover,
.link-row--ink:focus-visible {
  color: var(--paper);
  box-shadow: 0 0 0 var(--blue);
}

/* --- Divider -------------------------------------------------------------- */
/* Separates "the game" from "the socials" without adding a heading that would
   push the buttons further down the fold. */
.links-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--body-text-dim);
}
.links-divider::before,
.links-divider::after {
  content: "";
  flex: 1;
  height: var(--bw-thin);
  background: var(--ink);
  opacity: 0.25;
}

/* --- Footer --------------------------------------------------------------- */
/* Lighter than base.css's ink slab: the whole page is already a call to
   action, so the footer stays out of the way. */
.links-footer {
  padding: 24px var(--space-gutter) 32px;
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--body-text-dim);
}
.links-footer p { margin: 0; }
.links-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 8px;
}
.links-footer a { color: var(--body-text); }
.links-footer a:hover { color: var(--orange); }

/* --- Small phones --------------------------------------------------------- */
@media (max-width: 380px) {
  .link-row {
    padding: 13px 14px;
    gap: 10px;
    font-size: var(--fs-xs);
  }
  .links-id__avatar { width: 88px; height: 88px; }
}

/* Respect a reduced-motion preference: keep the shadow flip, drop the slide. */
@media (prefers-reduced-motion: reduce) {
  .link-row { transition: none; }
  .link-row:hover,
  .link-row:focus-visible { transform: none; }
}