/* Kicker labels */
.uv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
}
.uv-kicker--accent { color: var(--wp--preset--color--accent-strong); }

/* Hero / display headline */
.uv-display { text-wrap: balance; }
.uv-accent-em {
  font-style: italic;
  font-weight: 500;
  color: var(--wp--preset--color--accent);
}
.uv-sub { color: var(--wp--preset--color--text-muted); max-width: 40em; }

/* Pill buttons */
.uv-pill .wp-block-button__link { border-radius: 999px; font-weight: 600; }
.uv-pill--outline .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--text);
  border: 1px solid var(--wp--preset--color--border);
}
/* core/query-pagination-next renders a bare <a>, not a core/button-wrapped
   one, so the descendant selectors above never match it. Direct-element
   rule so the "Next Page" pill (home.html) gets the same treatment. */
.uv-pill--outline.wp-block-query-pagination-next {
  border-radius: 999px;
  font-weight: 600;
  background: transparent;
  color: var(--wp--preset--color--text);
  border: 1px solid var(--wp--preset--color--border);
}

/* Cards + card grid (Query Loop styling) */
.uv-card-grid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 820px) {
  .uv-card-grid .wp-block-post-template { grid-template-columns: 1fr; }
}
.uv-card-grid li {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 22px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.uv-card-grid li:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--wp--preset--color--border) 60%, white); }
.uv-card-grid .wp-block-post-terms {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-strong);
}
.uv-card-meta-row { align-items: center; gap: 6px; flex-wrap: wrap; }
.uv-card-grid .wp-block-post-date {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.7rem;
  color: var(--wp--preset--color--text-muted);
}
.uv-card-grid .wp-block-post-date::before {
  content: "·";
  margin-right: 6px;
  color: var(--wp--preset--color--border);
}
.uv-card-grid .wp-block-post-title { font-size: 1.25rem; margin: 10px 0 8px; }
.uv-card-grid .wp-block-post-excerpt { font-size: 0.875rem; color: var(--wp--preset--color--text-muted); }

/* Card bottom stat row (read time + comment count) */
.uv-card-stats {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--wp--preset--color--border);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--sage);
}

/* Avatar */
.uv-avatar {
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  background: linear-gradient(150deg, rgba(183,142,230,0.14), rgba(143,207,158,0.12));
}
.uv-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Article body */
.uv-article-body {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--wp--preset--color--text-muted);
  max-width: 42em;
}
.uv-article-body blockquote {
  border-left: 2px solid var(--wp--preset--color--accent);
  padding-left: 22px;
  font-style: italic;
  font-size: 1.3rem;
  color: var(--wp--preset--color--accent-strong);
}

/* Sticky header.
   position:sticky must live on the OUTER <header class="wp-block-template-part">
   wrapper that wp:template-part generates, not on .uv-site-header itself: that
   outer wrapper is the sticky element's containing block, and it hugs
   .uv-site-header's own height exactly, leaving zero scroll room for the
   child to stick within if it's placed one level down. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 20;
}
.uv-site-header {
  background: rgba(11, 10, 8, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Full About page layout */
.uv-status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  color: var(--wp--preset--color--sage);
  margin-top: 18px;
}
.uv-status-line::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--sage);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .uv-avatar[style*="220px"] { width: 96px !important; height: 96px !important; }
}

/* Wordmark */
.uv-wordmark a {
  color: var(--wp--preset--color--text);
  text-decoration: none;
}
.uv-wordmark-dot { color: var(--wp--preset--color--accent); }

/* Footer social link */
.uv-social a { text-decoration: none; }
.uv-social a:hover { color: var(--wp--preset--color--accent); }

/* Single-post byline */
.uv-byline {
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.uv-byline,
.uv-byline p,
.uv-byline .wp-block-post-author-name,
.uv-byline .wp-block-post-date,
.uv-byline .wp-block-post-date time {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  font-style: normal;
  font-weight: 500;
  color: var(--wp--preset--color--text-muted);
  margin: 0;
}
.uv-byline .wp-block-post-author-name { color: var(--wp--preset--color--text); }
.uv-byline-sep { color: var(--wp--preset--color--border); }

/* Tag pills (single post) */
.uv-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0;
}
.uv-tag-pills a {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
}
.uv-tag-pills a:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent-strong);
}

/* Prev/next mini-cards */
.uv-prevnext {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 40px 0;
}
@media (max-width: 600px) {
  .uv-prevnext { grid-template-columns: 1fr; }
}
.uv-prevnext .wp-block-post-navigation-link:empty { display: none; }
.uv-prevnext .wp-block-post-navigation-link {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.15s ease;
  min-width: 0;
}
.uv-prevnext .wp-block-post-navigation-link:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--border) 60%, white);
}
.uv-prevnext .wp-block-post-navigation-link a {
  text-decoration: none;
  display: block;
}
.uv-prevnext .wp-block-post-navigation-link__default-label,
.uv-prevnext .wp-block-post-navigation-link-previous .wp-block-post-navigation-link__label,
.uv-prevnext .wp-block-post-navigation-link-next .wp-block-post-navigation-link__label {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-strong);
  margin-bottom: 6px;
}
.uv-prevnext .wp-block-post-navigation-link__title {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 1rem;
  color: var(--wp--preset--color--text);
}
.uv-prevnext .wp-block-post-navigation-link-next { text-align: right; }

/* Comments */
.wp-block-comments-title {
  font-family: var(--wp--preset--font-family--serif);
  color: var(--wp--preset--color--text);
  margin-top: 56px;
}
.wp-block-comment-template {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.wp-block-comment-template li {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.wp-block-comment-author-name,
.wp-block-comment-author-name a {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--wp--preset--color--accent-strong) !important;
}
.wp-block-comment-content {
  color: var(--wp--preset--color--text-muted);
  font-size: 0.9375rem;
  margin-top: 6px;
}
#respond, .comment-respond {
  margin-top: 32px;
  padding: 24px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
}
.comment-reply-title {
  font-family: var(--wp--preset--font-family--serif);
  color: var(--wp--preset--color--text);
}
.comment-form label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.8125rem;
  color: var(--wp--preset--color--text-muted);
}
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
  width: 100%;
  background: var(--wp--preset--color--background);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  color: var(--wp--preset--color--text);
  padding: 10px 14px;
  font-family: var(--wp--preset--font-family--sans);
  margin-top: 4px;
}
.comment-form .form-submit input[type="submit"] {
  border-radius: 999px;
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
  border: none;
  padding: 10px 24px;
  font-weight: 600;
  cursor: pointer;
}
.comment-form .form-submit input[type="submit"]:hover {
  background: var(--wp--preset--color--accent-strong);
}