/* ============================================================
   lunkov.io — link hub page styles
   Built on tokens.css (see DESIGN.md for the system).
   Layout: a single centered reading column. Mobile-first.
   ============================================================ */

.page {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--s-7) var(--s-5) 0;
}

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--bg-dark); color: var(--fg-on-dark);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 10;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

/* ---------- Hero ---------- */
.hero { text-align: center; }

.avatar {
  width: 132px; height: 132px;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--accent);
  box-shadow: var(--shadow-2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }

.hero h1 { margin-bottom: var(--s-3); font-size: clamp(2.25rem, 8vw, 3rem); }

.hero .role {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  color: var(--fg-1);
  margin-bottom: var(--s-3);
}

.hero .bio {
  max-width: 52ch;
  margin: 0 auto var(--s-4);
  color: var(--fg-2);
}
.hero .bio strong { color: var(--fg-1); }

/* Never break inside this run of words. */
.nb { white-space: nowrap; }

/* At 16px the phrase measures ~303px, so it fits any viewport >=360px once
   page padding is subtracted. Below that it would overflow, so step the bio
   down rather than let a nowrap span push the layout sideways. */
@media (max-width: 359px) {
  .hero .bio { font-size: var(--fs-small); }
}

/* ---------- Certification chips ---------- */
.certs {
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
}
.certs li { display: flex; }
.certs a {
  font-size: var(--fs-caption); font-weight: 500; color: var(--fg-2);
  padding: 5px var(--s-3);
  border: 1px solid var(--border-1); border-radius: var(--r-pill);
  background: var(--bg-card);
  transition: border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.certs a:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.meta-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-6);
}
.meta-item {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); color: var(--fg-3);
}
.meta-item svg { width: 15px; height: 15px; stroke: var(--fg-3); flex: none; }
.availability .dot {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--status-ok); flex: none;
  box-shadow: 0 0 0 3px var(--status-ok-ring);
}

/* ---------- Buttons ---------- */
.cta-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3);
  margin-bottom: var(--s-9);
}
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body);
  padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--bg-accent); color: var(--fg-on-accent); }
.btn-primary svg { stroke: var(--fg-on-accent); }
/* Hover LIGHTENS. Darkening coral toward --accent-press drops navy text to
   3.99:1; --accent-hover raises it to 5.81:1, so contrast improves on hover
   instead of degrading. :active only moves, it does not recolour. */
.btn-primary:hover { background: var(--accent-hover); color: var(--fg-on-accent); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--fg-1); border-color: var(--border-2); }
.btn-ghost svg { stroke: var(--fg-1); }
.btn-ghost:hover { border-color: var(--bg-dark); color: var(--fg-1); }

/* ---------- Sections ---------- */
.section { margin-top: var(--s-9); }
.section > .t-eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.section > .t-eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border-1);
}

/* ---------- Link rows (Linktree-style) ---------- */
.links { display: flex; flex-direction: column; gap: var(--s-3); }
.link-row {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-card);
  color: var(--fg-1);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.link-row:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  color: var(--fg-1);
}
.link-row .glyph {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--bg-alt); border-radius: var(--r-md);
}
.link-row .glyph svg { width: 20px; height: 20px; }
.link-row .label { flex: 1 1 auto; min-width: 0; }
.link-row .label .name { display: block; font-weight: 600; font-size: var(--fs-body); color: var(--fg-1); }
.link-row .label .handle { display: block; margin-top: 1px; font-size: var(--fs-caption); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-row .chev { flex: none; width: 18px; height: 18px; stroke: var(--ink-40); transition: transform var(--t-fast) var(--ease-out); }
.link-row:hover .chev { stroke: var(--accent); transform: translateX(2px); }

/* ---------- Featured cards ---------- */
.cards { display: flex; flex-direction: column; gap: var(--s-3); }
.card {
  display: block;
  padding: var(--s-5);
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-card);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.card:hover { border-color: var(--border-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card .kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow);
  /* Label grey (5.80:1); the icon keeps the coral. Icons are non-text, so
     1.4.11's 3:1 applies to them and coral clears it at 3.22:1. */
  text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--s-3);
}
.card .kicker svg { width: 14px; height: 14px; stroke: var(--accent); }
.card .card-title { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-body-lg); color: var(--fg-1); line-height: var(--lh-tight); margin-bottom: var(--s-2); }
.card .card-meta { font-size: var(--fs-small); color: var(--fg-3); display: flex; align-items: center; gap: var(--s-2); }
.card:hover .card-title { color: var(--accent-press); }

/* ---------- Dark contact band ---------- */
.contact {
  margin-top: var(--s-10);
  background: var(--bg-dark);
  color: var(--fg-on-dark);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-6);
  text-align: center;
}
.contact h2 { color: var(--fg-on-dark); margin-bottom: var(--s-3); }
.contact p { color: var(--fg-on-dark-muted); max-width: 42ch; margin: 0 auto var(--s-6); }

/* ---------- Footer ---------- */
/* Sits outside <main> now, so it carries its own reading-column geometry. */
.footer {
  max-width: var(--container-narrow);
  margin: var(--s-9) auto 0;
  padding: 0 var(--s-5) var(--s-10);
  text-align: center;
}
/* --ink-40 is documented as a placeholder colour and measured 2.56:1 here —
   real content needs 4.5:1. --fg-3 is 5.80:1. */
.footer .legal { font-size: var(--fs-caption); color: var(--fg-3); }
.footer a { color: var(--fg-3); text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (min-width: 620px) {
  .page { padding-top: var(--s-9); }
  .avatar { width: 148px; height: 148px; }
}