/* ============================================================
   matthewlehman.dev/links
   Standalone on purpose. A bio-link page gets opened from a phone
   on cellular constantly, so it loads its own ~4 KB of CSS and two
   font files instead of the main site's 42 KB stylesheet and four
   faces. Nothing here is shared with styles.css.

   TOKENS ARE DUPLICATED FROM styles.css. If you retune the purple
   there, change it here too — these are the only copies.
   ============================================================ */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/instrumentserif-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibmplexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibmplexmono-500.woff2') format('woff2');
}

:root {
  --bg:           #0a0810;
  --bg-raise:     #100c1a;
  --accent:       #9542f0;
  --accent-text:  #a355f3;   /* accent lifted to clear 4.5:1 as type */
  --accent-light: #b47cff;
  --border:       #241d33;
  --border-lit:   #3b2f57;
  --text:         #e9e6f2;
  --muted:        #8b83a3;
  --accent-rgb:   149, 66, 240;

  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: .2s;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2 { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Same dot grid as the main site, fading out toward the edges */
.texture {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(var(--accent-rgb), .22) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 10%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 10%, transparent 100%);
  opacity: .5;
}

.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: clamp(2.5rem, 9vw, 4.5rem) clamp(1.15rem, 5vw, 1.75rem) 3rem;
}

/* ---------- header ---------- */
.head {
  text-align: center;
  margin-bottom: clamp(2rem, 7vw, 3rem);
}
.head__logo {
  display: inline-block;
  margin-bottom: 1.4rem;
  transition: filter var(--fast) var(--ease);
}
.head__logo img { height: 38px; width: auto; }
.head__logo:hover { filter: brightness(1.25); }

.head__name {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 10vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.015em;
  /* The one glow, same as the hero on the main site */
  text-shadow: 0 0 40px rgba(var(--accent-rgb), .3);
}
.head__tag {
  margin: .9rem 0 0;
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--muted);
}

/* ---------- group label ---------- */
.group {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 2rem 0 .75rem;
  padding-left: .15rem;
}
.group:first-of-type { margin-top: 0; }

/* ---------- link rows ---------- */
.links { display: flex; flex-direction: column; gap: .6rem; }

.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Comfortably over the 44px touch minimum at every size */
  min-height: 64px;
  padding: .85rem 1.1rem;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
/* Accent hairline sweeping the top edge, same device as the work
   panels on the main site */
.link::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  transform: scaleX(0);
  transition: transform .45s var(--ease);
}
.link:hover,
.link:focus-visible {
  border-color: rgba(var(--accent-rgb), .45);
  background: #130e20;
  transform: translateY(-2px);
}
.link:hover::before,
.link:focus-visible::before { transform: scaleX(1); }
.link:active { transform: translateY(0); }

.link__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.link__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  transition: color var(--fast) var(--ease);
}
.link:hover .link__title { color: var(--accent-light); }
.link__hint {
  font-size: .70rem;
  letter-spacing: .03em;
  color: var(--muted);
  margin-top: .15rem;
  /* Wraps rather than truncating. These used to be nowrap + ellipsis
     for a tidy single-line rhythm, but at 320px that hid the end of
     the email address — the one string on this page a visitor most
     needs to read in full. Wrapping only kicks in when the text
     genuinely doesn't fit, so wider screens look identical. */
  overflow-wrap: anywhere;
}

.link__go {
  flex-shrink: 0;
  font-size: .95rem;
  color: var(--muted);
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.link:hover .link__go { color: var(--accent-text); transform: translate(2px, -2px); }

/* ---------- copy button ---------- */
.copy {
  flex-shrink: 0;
  padding: .45rem .7rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border-lit);
  border-radius: 5px;
  cursor: pointer;
  transition: color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.copy:hover {
  color: var(--accent-light);
  border-color: rgba(var(--accent-rgb), .55);
}
.copy.is-done {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- footer ---------- */
.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin-top: 2.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot__clock {
  color: var(--accent-light);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: .06em;
}

/* ---------- entrance ----------
   Rows fade up in sequence. --i is set per <li> in the HTML. */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.head, .group, .links li {
  animation: rise .5s var(--ease) both;
}
.head  { animation-delay: 0s; }
.group { animation-delay: .06s; }
.links li { animation-delay: calc(.1s + var(--i, 0) * 45ms); }

/* 12px floor on every small label, and a roomier copy button.
   11px uppercase mono is legible on a monitor and not on a phone. */
@media (pointer: coarse) {
  .link__hint { font-size: .75rem; }
  .head__tag  { font-size: .78rem; }
  .group      { font-size: .75rem; }
  .foot       { font-size: .75rem; }
  .copy { padding: .55rem .85rem; font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .head, .group, .links li { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .link:hover { transform: none; }
}