/* home page — hero + contact + writing list */

.hero { padding: 68px 0 48px; }

/* Last-login line — shows timestamp of previous visit from localStorage */
.hero-last-login {
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--dim); margin-bottom: 14px; min-height: 1.4em;
}

/* Reading streak badge */
.reading-streak {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 11px; color: var(--dim);
  letter-spacing: 0.04em;
}
.reading-streak .streak-num { color: var(--accent); font-weight: 600; }
.hero .tag { color: var(--dim); margin-bottom: 6px; }
.hero .tag::before { content: "# "; }
.hero .prompt-line { margin-bottom: 20px; color: var(--dim); }
.hero .prompt-line::before { content: "$ "; color: var(--accent); }
.hero .bio { max-width: 560px; margin: 14px 0 18px; color: var(--fg); }
.hero .bio .acc { color: var(--accent); }
.hero-kv { margin-bottom: 24px; }
.hero .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* Contact section */
.contact-cmd { color: var(--dim); margin-bottom: 20px; }
.contact-cmd::before { content: "$ "; color: var(--accent); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; }
.contact-grid .kv { border-bottom: 1px dashed var(--line); }
.contact-grid .kv:nth-last-child(-n+2) { border-bottom: none; }

/* Writing list — border-top per row, no bottom border */
.post-list .entry { border-top: 1px dashed var(--line); border-bottom: none; }

/* Featured "start here" — horizontal carousel of cards */
.featured-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  /* overflow-x:auto makes overflow-y compute to auto (clips), so the hover
     translateY(-2px) would crop the card's top border — vertical padding gives it slack. */
  padding: 4px 0;
}
.featured-carousel::-webkit-scrollbar { display: none; } /* Chrome / Safari */
.featured-card {
  flex: 0 0 clamp(240px, 80vw, 300px); /* fixed-ish on desktop; a card + peek on mobile */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px dashed var(--line-strong);
  background: var(--card);
  padding: 16px;
  transition: border-color .15s, transform .18s ease;
}
@media (hover: hover) {
  .featured-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .featured-card:hover .fc-title { color: var(--accent); }
}
.fc-when { color: var(--accent); font-size: 12px; }
.fc-title { font-weight: 600; font-size: 14px; line-height: 1.4; transition: color .15s; }
.fc-summary {
  color: var(--dim); font-size: 12px; line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.fc-trail { color: var(--dim); font-size: 11px; margin-top: auto; padding-top: 4px; }
/* space between the featured carousel and the recent list within the writing section */
.featured-carousel + .post-list { margin-top: 28px; }

@media (max-width: 720px) {
  .hero { padding: 44px 0 32px; }
  h1.display-xl { font-size: 28px; }
  h1.display { font-size: 22px; }
}

@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .kv:nth-last-child(-n+2) { border-bottom: 1px dashed var(--line); }
  .contact-grid .kv:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
  .hero .actions { gap: 6px; }
}