/* Link-tree page — reuses the root theme tokens from styles.css
   (--bg, --fg, --accent, haze + grain on body::before/::after). */

.links-page {
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
  justify-content: center;
}

.lt {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  padding: 64px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

/* ── header ── */
.lt-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.lt-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}
.lt-mark .dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
.lt-acrostic {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-variation-settings: 'wdth' 115;
  font-size: clamp(64px, 20vw, 116px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.lt-acrostic .row { display: flex; align-items: baseline; gap: 0.04em; justify-content: center; }
.lt-acrostic .row + .row { margin-top: -0.06em; }
.lt-acrostic .lead { color: var(--accent); }
.lt-acrostic .tail { color: var(--fg); }
.lt-tagline {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(16px, 4.5vw, 20px);
  line-height: 1.3;
  color: var(--fg-dim);
  letter-spacing: 0.01em;
}

/* ── link buttons ── */
.lt-links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lt-btn {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  row-gap: 3px;
  column-gap: 14px;
  align-items: center;
  padding: 18px 22px;
  text-decoration: none;
  border: 1px solid var(--line-bright);
  border-radius: 16px;
  background: rgba(244, 241, 234, 0.02);
  color: var(--fg);
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), background 0.2s, border-color 0.2s;
}
.lt-btn:hover {
  transform: translateY(-2px);
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.lt-btn-label {
  grid-column: 1;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.lt-btn-sub {
  grid-column: 1;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  transition: color 0.2s;
}
.lt-btn:hover .lt-btn-sub { color: rgba(10, 10, 10, 0.6); }
.lt-btn .arr {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 18px;
  color: var(--accent);
  transition: transform 0.2s, color 0.2s;
}
.lt-btn:hover .arr { transform: translateX(4px); color: var(--bg); }

/* primary (RSVP) */
.lt-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.lt-btn.primary .lt-btn-sub { color: rgba(255, 255, 255, 0.72); }
.lt-btn.primary .arr { color: #fff; }
.lt-btn.primary:hover {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: #fff;
}
.lt-btn.primary:hover .lt-btn-sub { color: rgba(255, 255, 255, 0.8); }
.lt-btn.primary:hover .arr { color: #fff; }

/* ── footer ── */
.lt-foot {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-align: center;
}
.lt-foot .heart { color: var(--accent); }

@media (max-width: 480px) {
  .lt { padding: 44px 18px 36px; gap: 28px; }
}