/* Reusable pieces: page headers, post lists, project cards, tags, buttons. */

/* Page + article headers ------------------------------------------------ */

.page-header {
  margin-bottom: var(--space-xl);
}

.page-header__title {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-2xs);
}

.page-header__lead {
  font-size: var(--text-md);
  color: var(--text-muted);
  max-width: var(--measure);
  line-height: var(--leading-normal);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.meta__sep {
  color: var(--text-faint);
}

/* The shortcut into the editor on a post or project, only ever rendered while
   signed in. Sans-serif and tight-leaded so a button on the meta line doesn't
   lift the row it sits in. */
.meta__edit {
  font-family: var(--font-sans);
  line-height: 1;
  letter-spacing: normal;
  color: var(--text-secondary);
}

.meta__edit:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Home intro ------------------------------------------------------------ */

.intro {
  margin-bottom: var(--space-2xl);
}

.intro__name {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-xs);
}

.intro__role {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

.intro__text {
  font-size: var(--text-md);
  line-height: var(--leading-prose);
  color: var(--text-secondary);
  max-width: var(--measure);
}

.intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

.intro__links a {
  text-decoration: none;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
}

.intro__links a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Post list ------------------------------------------------------------- */

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list__item {
  padding-block: var(--space-md);
  border-bottom: var(--border-width) solid var(--border);
}

.post-list__item:first-child {
  padding-top: 0;
}

.post-list__link {
  text-decoration: none;
  display: block;
}

.post-list__title {
  font-size: var(--text-lg);
  margin-block: var(--space-3xs) var(--space-2xs);
  transition: color var(--transition);
}

.post-list__link:hover .post-list__title {
  color: var(--accent);
}

.post-list__excerpt {
  color: var(--text-muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: var(--measure);
}

.post-list__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

/* Article --------------------------------------------------------------- */

.article__header {
  margin-bottom: var(--space-xl);
  max-width: var(--measure);
}

.article__title {
  font-size: var(--text-2xl);
  margin-block: var(--space-2xs) var(--space-xs);
}

.article__summary {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  font-family: var(--font-serif);
  font-style: italic;
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-top: var(--space-sm);
}

.article__footer {
  max-width: var(--measure);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--border);
}

/* Prev/next navigation -------------------------------------------------- */

.post-nav {
  max-width: var(--measure);
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.post-nav__item {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition);
}

.post-nav__item:hover {
  border-color: var(--border-strong);
  background-color: var(--bg-subtle);
}

.post-nav__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  display: block;
  margin-bottom: var(--space-3xs);
}

.post-nav__title {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--text);
  line-height: var(--leading-snug);
}

.post-nav__item--next {
  text-align: end;
}

/* Tags ------------------------------------------------------------------ */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

a.tag:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}

.tag--active {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}

.tag__count {
  color: var(--text-faint);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-width) solid var(--border);
}

/* The tag preview sits below the posts, so it opens with a rule instead of
   closing with one. */
.tag-browse {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--border);
}

.tag-browse .tag-cloud {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* The full A–Z list on /tags is long; letting it recede keeps the "most used"
   section above it doing the actual work. */
.tag-cloud--quiet .tag {
  color: var(--text-secondary);
  background: none;
}

.tag-cloud--quiet .tag:hover {
  color: var(--accent);
}

/* Projects -------------------------------------------------------------- */

.project-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.project-card {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background-color: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.project-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.project-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
}

.project-card__name {
  font-size: var(--text-md);
}

.project-card__name a {
  text-decoration: none;
}

.project-card__name a:hover {
  color: var(--accent);
}

.project-card__tagline {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  flex: 1;
}

.project-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-top: var(--space-2xs);
}

.project-card__links {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: var(--border-width) solid var(--border);
}

.project-card__links a {
  text-decoration: none;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.project-card__links a:hover {
  color: var(--accent);
}

/* Compact list used on the home page. */
.project-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-block: var(--space-xs);
  border-bottom: var(--border-width) solid var(--border);
}

.project-list__name {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
}

.project-list__name:hover {
  color: var(--accent);
}

.project-list__tagline {
  color: var(--text-muted);
  font-size: var(--text-sm);
  flex: 1;
  min-width: 12rem;
}

/* Status pills ---------------------------------------------------------- */

.status {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  border: var(--border-width) solid transparent;
}

.status--active,
.status--published,
.status--approved {
  color: var(--success);
  background-color: var(--success-subtle);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.status--maintained,
.status--scheduled,
.status--pending {
  color: var(--warning);
  background-color: var(--warning-subtle);
  border-color: color-mix(in srgb, var(--warning) 30%, transparent);
}

.status--experiment,
.status--draft {
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  border-color: var(--border);
}

.status--archived,
.status--spam {
  color: var(--danger);
  background-color: var(--danger-subtle);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

/* Buttons --------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.55em 1.1em;
  border-radius: var(--radius);
  border: var(--border-width) solid var(--border-strong);
  background-color: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.button:hover {
  border-color: var(--text-muted);
  background-color: var(--bg-subtle);
  color: var(--text);
}

.button--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

:root[data-theme="dark"] .button--primary,
.button--primary {
  color: var(--bg);
}

.button--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}

.button--ghost {
  border-color: transparent;
  background: none;
  color: var(--text-muted);
  padding-inline: 0.4em;
}

.button--ghost:hover {
  color: var(--accent);
  background: none;
}

.button--small {
  font-size: var(--text-xs);
  padding: 0.35em 0.7em;
}

.button--danger:hover {
  color: var(--danger);
  border-color: var(--danger);
  background-color: var(--danger-subtle);
}

/* Pagination ------------------------------------------------------------ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
}

.pagination__status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Empty states ---------------------------------------------------------- */

.empty-state {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

.empty-state__title {
  font-size: var(--text-md);
  color: var(--text);
  margin-bottom: var(--space-3xs);
}