/* ════════════════════════════════════════════════════════════════════
   Home (index) — composições bespoke.
   Sistema em /assets/ds/base.css + tokens.css. Página branca de ponta a
   ponta (sem ato escuro, sem morph). Full-bleed, sem caixa.
   ════════════════════════════════════════════════════════════════════ */

/* Mono da home (índices, tags, datas) */
.work-index, .work-tags, .work-meta, .work-badge, .exp-date, .exp-role-tag,
.contact-value, .hero-actions a { font-family: var(--font-mono); }

/* Anti-FOUC dos elementos animados da home */
html.js .reveal, html.js .hero-actions { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .hero-actions { opacity: 1; transform: none; }
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.hero-headline .hero-line--muted { color: var(--ink-3); }

.hero-actions { margin-top: var(--space-gap); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero-actions a {
  padding: 0.8rem 1.4rem; border-radius: var(--radius-pill);
  font-size: var(--text-kicker); text-transform: uppercase; letter-spacing: var(--track-kicker);
  text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hero-actions .btn-primary { background: var(--ink); color: var(--bg-light); }
.hero-actions .btn-primary:hover { background: var(--ink-2); }
.hero-actions .btn-ghost { border: 1px solid var(--line); color: var(--ink-2); }
.hero-actions .btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ── Selected Work: linhas full-bleed, sem caixa ───────────────────── */

.section-label { margin-bottom: var(--space-gap); }

.work-row {
  display: block; text-decoration: none;
  border-top: 1px solid var(--line-soft);
  transition: background 0.3s var(--ease-out);
}
.work-list .work-row:last-child { border-bottom: 1px solid var(--line-soft); }
.work-row:hover { background: rgba(16, 17, 20, 0.025); }
.work-row-inner {
  display: grid; gap: 0.4rem 1.5rem; align-items: baseline;
  padding-block: 2.25rem;
}
.work-index { font-size: var(--text-caption); color: var(--ink-3); }
.work-title {
  display: block;
  font-size: var(--text-title); font-weight: var(--weight-display);
  letter-spacing: var(--track-title); line-height: 1.1; color: var(--ink);
  transition: transform 0.4s var(--ease-out-expo);
}
.work-row:hover .work-title { transform: translateX(6px); }
.work-blurb { display: block; font-size: var(--text-caption); color: var(--ink-3); line-height: 1.55; margin-top: 0.6rem; max-width: 32ch; }
.work-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--text-caption); color: var(--ink-3); }
.work-tag-sep { color: var(--line); }
.work-meta { font-size: var(--text-caption); color: var(--ink-3); }
.work-end { display: flex; justify-content: flex-end; align-items: center; }
.work-badge {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.25rem 0.7rem;
}
.work-end svg { color: var(--ink-3); transition: color 0.2s ease, transform 0.3s var(--ease-out); }
.work-row:hover .work-end svg { color: var(--ink); transform: translate(3px, -3px); }

@media (min-width: 768px) {
  .work-row-inner {
    grid-template-columns: 2rem minmax(0, 5fr) minmax(0, 3.2fr) minmax(0, 2fr) 2rem;
    align-items: start; padding-block: 2.5rem;
  }
}

/* ── Experience ────────────────────────────────────────────────────── */

.exp-row {
  border-top: 1px solid var(--line-soft);
  padding-block: 3rem;
  display: grid; gap: 0.75rem;
}
.exp-list .exp-row:last-child { border-bottom: 1px solid var(--line-soft); }
.exp-date { font-size: var(--text-caption); color: var(--ink-3); }
.exp-role { font-size: var(--text-sub); font-weight: var(--weight-medium); letter-spacing: var(--track-sub); color: var(--ink); }
.exp-role span { color: var(--ink-3); font-weight: var(--weight-body); }
.exp-desc { font-size: var(--text-body); line-height: 1.7; color: var(--ink-2); max-width: 52ch; margin-top: 0.75rem; }
@media (min-width: 768px) {
  .exp-row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem; }
}

/* ── Contact ───────────────────────────────────────────────────────── */

.contact-headline {
  font-size: var(--text-display); font-weight: var(--weight-display);
  letter-spacing: var(--track-display); line-height: 1.02; color: var(--ink);
  margin-bottom: var(--space-gap);
}
.contact-list { max-width: 34rem; }
.contact-link {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-soft); padding-block: 1.1rem;
  text-decoration: none;
}
.contact-list .contact-link:last-child { border-bottom: 1px solid var(--line-soft); }
.contact-value {
  font-size: var(--text-sub); color: var(--ink-2);
  transition: color 0.2s ease, transform 0.3s var(--ease-out);
}
.contact-link:hover .contact-value { color: var(--ink); transform: translateX(4px); }
.contact-link svg { color: var(--ink-3); transition: color 0.2s ease, transform 0.3s var(--ease-out); flex-shrink: 0; }
.contact-link:hover svg { color: var(--ink); transform: translate(3px, -3px); }