/* /links: link-in-bio page. Mobile-first, large tap targets. Tokens come from tokens.css. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 50% 20%, rgba(201, 122, 62, 0.10), transparent 60%);
  color: var(--ink);
  font-family: 'Karla', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.l-main {
  flex: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: 2.5rem 1rem 2rem;
  text-align: center;
}
.l-logo { display: block; width: 72px; height: 72px; margin: 0 auto 1.25rem; border-radius: 50%; }
.l-main h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 9vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}
.l-intro { color: var(--ink-dim); font-size: 1.05rem; margin-bottom: 2rem; }
.l-list { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.l-link {
  display: block;
  min-height: 56px;
  padding: 1rem 1.25rem;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.l-link:hover, .l-link:active { border-color: var(--ember); background: var(--card-hover); }
.l-link:focus-visible { outline: 2px solid var(--ember-soft); outline-offset: 3px; }
.l-title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ember-soft);
}
.l-desc { display: block; margin-top: 0.25rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-dim); }
.l-footer { padding: 1.5rem 1rem 2rem; text-align: center; }
.l-footer .footer-disclaimer { max-width: 62ch; margin: 0 auto 1rem; font-size: 0.78rem; line-height: 1.7; color: var(--ink-dim); }
.l-footer .l-footer-copy { font-size: 0.78rem; color: var(--ink-dim); }
.l-footer .l-footer-copy a { color: inherit; text-underline-offset: 3px; display: inline-block; min-height: 24px; }
@media (prefers-reduced-motion: reduce) { .l-link { transition: none; } }