/* home.css — hero + selected-work list (index.php) */

.hero { margin-top: clamp(2rem, 5vw, 3.25rem); }

.hero__name {
  font-family: var(--font-mono);
  font-size: clamp(.95rem, .75rem + 1vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--accent);
  margin-bottom: .9rem;
}

.hero__lead {
  font-family: var(--font-desc);
  font-size: clamp(1.05rem, .85rem + 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.006em;
  text-wrap: pretty;
}
.hero__lead .hl { color: var(--accent); }

/* Typewriter reveal (JS/home.js). .is-typing carries a blinking caret; the
   monospace description font keeps each keystroke from shifting line width. */
.hero__lead .hl.is-typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: -.1em;
  animation: hl-caret .9s steps(1) infinite;
}
@keyframes hl-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hero__lead .hl.is-typing::after { animation: none; }
}

.hero__status {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.8;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.about { margin-top: var(--section); }
.about__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 42rem;
  font-family: var(--font-desc);
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text);
}
.about__body p { margin: 0; text-align: justify; hyphens: auto; }

.work { margin-top: var(--section); }
.certs { margin-top: var(--section); }
.reviews { margin-top: var(--section); }

.reviewgrid {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 42rem;
}
.reviewcard {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
}
.reviewcard__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.reviewcard__foot {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.reviewcard__author {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-style: normal;
  color: var(--text);
}
.reviewcard__org {
  font-family: var(--font-desc);
  font-size: .78rem;
  color: var(--muted);
  text-decoration: none;
}
.reviewcard__org:hover { color: var(--accent); }

.reviewpager {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 42rem;
}
.reviewpager__status {
  font-family: var(--font-desc);
  font-size: .75rem;
  color: var(--muted);
}
/* .reviewpager__btn itself now lives in global.css — used here and by the
   Work page's "Show more" buttons. */
.work__label { display: block; margin-bottom: 1.75rem; }

.work__foot {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* A real button, not the small mono text-link it used to be — the pager
   above it needs a companion action that reads as clearly interactive. */
.work__more {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .7rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .3s ease, color .3s ease;
}
.work__more:hover { border-color: var(--accent); color: var(--accent); }