/*
Theme Name: Aptosity
Theme URI: https://aptosity.com
Author: Aptosity
Description: A dark, minimalist WordPress theme with a flat design aesthetic. Inset 800px layout with rounded header/footer, three-column CSS Grid on desktop (two columns on mobile), centered post/page titles with a subtle accent divider, modern rounded images and video embeds, consistent flat accent-colored buttons. Blog (posts) page renders a configurable centered intro heading, an accent divider, and a welcome message — editable under Appearance → Customize → Blog Intro. Single posts include a randomized "More Posts" grid below the article. Includes clean threaded comment support with avatars and reply links, and Site Kit / Sign in with Google button compatibility.
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aptosity
Tags: dark, minimalist, flat, grid, two-column, rounded, clean, modern
*/

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Aptosity palette — deep purple base with accent lavender.
     Derived from the Aptosity Video app: #231c2f base, #684a9f accent. */
  --bg: #231c2f;
  --bg-deep: #1a1525;
  --bg-card: #2a2340;
  --bg-card-hover: #322a4a;
  --bg-header: #1f1930;
  --bg-mid: #261f38;
  --bg-elev: #2e2645;
  --fg: #f0eef5;
  --fg-muted: #a89fc4;
  --fg-dim: #6b6388;
  --accent: #684a9f;
  --accent-light: #8b6dc4;
  --accent-soft: rgba(104, 74, 159, 0.18);
  --accent-glow: rgba(104, 74, 159, 0.12);
  --border: #3a3155;
  --border-soft: #322a48;
  --border-light: #423a5e;
  /* Flat accent treatment — single color, no multi-hue gradient. */
  --accent-flat: #684a9f;
  --accent-flat-hover: #7a5ab2;
  /* Radii */
  --radius: 14px;
  --radius-sm: 10px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  /* Site width — reading content max width (header/footer are full-width). */
  --site-width: 800px;
  --max-read: 800px;
  --header-h: 60px;
  --grid-gap: 16px;
  --card-radius: 14px;
  --img-radius: 12px;
  --media-radius: 14px;
  /* Edge margin — consistent 10px gap from viewport edges on all breakpoints. */
  --edge-margin: 10px;
  /* Accent bullet for lists — small rounded square in accent color. */
  --accent-bullet: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iNiIgcng9IjIiIHg9IjUiIHk9IjUiIGZpbGw9IiM2ODRhOWYiLz48L3N2Zz4=");
}

/* ─── Google Fonts: Inter (clean, modern, minimalist) ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  /* Deep purple gradient background — subtle lighter/darker shifts
     from the base color, no multi-hue pink/green. Mirrors the
     Aptosity Video app background treatment. */
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(104, 74, 159, 0.18), transparent 60%),
    radial-gradient(ellipse 65% 45% at 100% 110%, rgba(26, 21, 37, 0.60), transparent 60%),
    radial-gradient(ellipse 50% 35% at 0% 90%, rgba(46, 38, 69, 0.25), transparent 60%),
    linear-gradient(180deg, #231c2f 0%, #1a1525 100%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.011em;
  min-height: 100vh;
}

a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--accent-light);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: rgba(104, 74, 159, 0.35);
  color: #fff;
}

/* ─── Header (full-width, borderless, no background) ─── */
.site-header {
  position: relative;
  z-index: 100;
  width: auto;
  margin: var(--edge-margin) var(--edge-margin) 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.admin-bar .site-header {
  top: auto;
}

@media (max-width: 782px) {
  .admin-bar .site-header { top: auto; }
}

@media (max-width: 600px) {
  .admin-bar .site-header { top: auto; }
}

.site-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-icon-img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  object-fit: cover;
}

.site-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-transform: capitalize;
  line-height: 1;
  font-family: var(--font-sans);
}

.site-name a {
  color: #ffffff;
}

.site-name a:hover {
  color: #ffffff;
}

/* ─── Navigation ─── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: block;
  padding: 8px 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: capitalize;
  color: #ffffff;
  font-family: var(--font-sans);
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}

.site-nav a:hover,
.site-nav .current-menu-item a {
  color: #ffffff;
  background: var(--accent-soft);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  border-radius: 8px;
}

.menu-toggle svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
}

/* ─── Site Main wrapper (full-width with edge padding) ─── */
.site-main {
  width: auto;
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 0 var(--edge-margin);
}

/* On blog / archive / search pages, the grid spans the full viewport
   with a 10px edge gap, matching the header and footer insets. */
body.grid-page .site-main {
  max-width: none;
}

/* ─── Grid Layout (Index / Archive / Search / Random Posts) ─── */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--grid-gap);
  padding: 16px 0 8px;
}

.grid-container + .pagination,
.grid-container .pagination {
  margin-top: 8px;
}

/* ─── Post Card (flat, minimal — like new-tab shortcut cards) ─── */
.post-card {
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  border-radius: var(--card-radius);
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, background 0.2s ease;
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  border-color: var(--border-light);
  background: var(--bg-card-hover);
}

/* Featured image wrapper */
.post-card-image-wrap {
  overflow: hidden;
  line-height: 0;
}

.post-card-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}

.post-card:hover .post-card-image {
  transform: scale(1.03);
}

/* Body panel */
.post-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  flex: 1;
}

.post-card.no-image .post-card-body {
  justify-content: center;
  min-height: 110px;
}

.post-card-category {
  display: none;
}

.post-card-body .post-card-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
}

.post-card-body .post-card-title a {
  color: var(--fg);
  position: relative;
  display: inline-block;
  transition: color 0.15s ease;
}

.post-card-body .post-card-title a:hover {
  color: var(--accent-light);
  text-decoration: none;
}

.post-card-body .post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.post-card-image-wrap a {
  display: block;
  line-height: 0;
}

.post-card-image-wrap a:hover {
  color: var(--fg);
}

.post-card-body .post-card-date {
  display: none;
}

/* ─── Accent Divider (flat, single-color) ─── */
.sol-divider {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--accent);
  border: none;
  border-radius: 2px;
  margin: 14px 0 16px;
  opacity: 0.7;
}

/* ─── Single Post (borderless, clean reading layout) ─── */
.single-container {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 48px 6px 56px;
}

.single-container .post-header {
  margin-bottom: 48px;
  text-align: center;
}

.single-container .post-title {
  font-size: clamp(16px, 1.6vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 auto 0;
  letter-spacing: -0.015em;
  text-transform: capitalize;
  text-align: center;
  max-width: 100%;
  color: var(--fg);
}

/* Accent divider under centered post/page titles */
.single-container .post-title::after,
.page-container .page-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 14px auto 0;
  opacity: 0.7;
}

/* Post meta — muted, clean */
.single-container .post-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--fg-muted);
  text-align: center;
}

.single-container .post-meta .meta-sep {
  opacity: 0.4;
}

.single-container .post-meta time {
  font-weight: 500;
  color: var(--fg-muted);
}

.single-container .post-meta .cat a {
  color: var(--fg-muted);
  font-weight: 500;
  text-transform: lowercase;
  text-decoration: none;
  transition: color 0.15s ease;
}

.single-container .post-meta .cat a:hover {
  color: var(--accent-light);
}

.single-container .post-content {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
  letter-spacing: -0.003em;
}

/* ─── All heading styles: medium weight, clean ─── */
.single-container .post-content h1,
.single-container .post-content h2,
.single-container .post-content h3,
.single-container .post-content h4,
.single-container .post-content h5,
.single-container .post-content h6,
.page-container .page-content h1,
.page-container .page-content h2,
.page-container .page-content h3,
.page-container .page-content h4,
.page-container .page-content h5,
.page-container .page-content h6 {
  color: var(--fg);
  margin: 1.6em 0 0.8em;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.3;
  position: relative;
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
}

/* Accent divider under headings */
.single-container .post-content h1::after,
.single-container .post-content h2::after,
.single-container .post-content h3::after,
.single-container .post-content h4::after,
.single-container .post-content h5::after,
.single-container .post-content h6::after,
.page-container .page-content h1::after,
.page-container .page-content h2::after,
.page-container .page-content h3::after,
.page-container .page-content h4::after,
.page-container .page-content h5::after,
.page-container .page-content h6::after {
  content: "";
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  margin: 0.5em auto 0;
  opacity: 0.6;
}

/* h1 and h2 sized to match h3 — flatter heading hierarchy per user request */
.single-container .post-content h1,
.page-container .page-content h1,
.single-container .post-content h2,
.page-container .page-content h2 {
  font-size: clamp(16px, 1.6vw, 17px);
}

.single-container .post-content h3,
.page-container .page-content h3 { font-size: clamp(16px, 1.6vw, 17px); }

.single-container .post-content p {
  margin-bottom: 1.3em;
}

/* Inline links — solid accent color, subtle underline. Flat, no gradient. */
.single-container .post-content a:not(.webp-btn):not(.wp-block-button__link) {
  color: var(--accent-light);
  text-decoration: underline;
  text-decoration-color: rgba(104, 74, 159, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.single-container .post-content a:not(.webp-btn):not(.wp-block-button__link):hover {
  color: var(--fg);
  text-decoration-color: var(--accent);
}

/* ─── Content Images — Rounded with subtle border ─── */
.single-container .post-content img,
.page-container .page-content img {
  border-radius: var(--img-radius);
  border: 1px solid var(--border);
}

.single-container .post-content img.aligncenter,
.page-container .page-content img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.single-container .post-content figure.aligncenter,
.page-container .page-content figure.aligncenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  max-width: 100%;
}

.single-container .post-content img.alignleft,
.page-container .page-content img.alignleft,
.single-container .post-content figure.alignleft,
.page-container .page-content figure.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1em;
}

.single-container .post-content img.alignright,
.page-container .page-content img.alignright,
.single-container .post-content figure.alignright,
.page-container .page-content figure.alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.single-container .post-content img.alignnone,
.page-container .page-content img.alignnone {
  display: block;
}

/* WordPress figcaption styling */
.single-container .post-content figcaption,
.page-container .page-content figcaption {
  text-align: center;
  font-size: 11px;
  color: var(--fg-dim);
  margin-top: 8px;
  padding: 0 4px;
  letter-spacing: 0.01em;
}

/* Images wrapped in <figure> (Gutenberg) */
.single-container .post-content figure img,
.page-container .page-content figure img {
  border: none;
  border-radius: calc(var(--img-radius) - 4px);
  display: block;
  max-width: 100%;
  height: auto;
}

.single-container .post-content figure,
.page-container .page-content figure {
  border-radius: var(--img-radius);
  border: 1px solid var(--border);
  margin: 1.5em 0;
  overflow: hidden;
}

/* ─── Photo Galleries (Gutenberg wp-block-gallery) ───
   WordPress core ships a bright white background for gallery blocks
   and their lightbox. These rules override that to match the theme's
   dark purple palette. */
.single-container .post-content .wp-block-gallery,
.page-container .page-content .wp-block-gallery {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: var(--img-radius);
  padding: 12px;
  margin: 1.5em 0;
}

.single-container .post-content .wp-block-gallery .blocks-gallery-grid,
.page-container .page-content .wp-block-gallery .blocks-gallery-grid,
.single-container .post-content .wp-block-gallery .blocks-gallery-item,
.page-container .page-content .wp-block-gallery .blocks-gallery-item {
  background: transparent;
}

.single-container .post-content .wp-block-gallery figure,
.page-container .page-content .wp-block-gallery figure {
  border: 1px solid var(--border);
  border-radius: var(--img-radius);
  overflow: hidden;
  background: var(--bg-card);
}

.single-container .post-content .wp-block-gallery figcaption,
.page-container .page-content .wp-block-gallery figcaption {
  background: rgba(31, 25, 48, 0.85);
  color: var(--fg);
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
}

/* ─── Lightbox Overlay (WordPress core interstitial) ───
   When a gallery image is clicked, WP core injects a full-screen
   overlay/dialog with a bright white background by default. These
   rules darken it to match the theme. */
.wp-lightbox-overlay,
body .wp-lightbox-overlay,
body .wp-lightbox-overlay .scrim {
  background-color: rgba(26, 21, 37, 0.96) !important;
  background: rgba(26, 21, 37, 0.96) !important;
}

.wp-lightbox-overlay .image-container,
.wp-lightbox-overlay .wp-caption,
.wp-lightbox-overlay figcaption {
  background: transparent !important;
  color: var(--fg) !important;
}

.wp-lightbox-overlay .close-button,
.wp-lightbox-overlay .navigation .previous-button,
.wp-lightbox-overlay .navigation .next-button {
  color: var(--fg-muted) !important;
  background: transparent !important;
}

.wp-lightbox-overlay .close-button:hover,
.wp-lightbox-overlay .navigation .previous-button:hover,
.wp-lightbox-overlay .navigation .next-button:hover {
  color: var(--accent-light) !important;
}

.wp-lightbox-overlay img {
  border-radius: var(--img-radius);
  border: 1px solid var(--border);
}

/* Dialog-based lightbox (newer WP versions) */
dialog.wp-lightbox-overlay,
.wp-lightbox-overlay[open] {
  background-color: rgba(26, 21, 37, 0.96) !important;
  background: rgba(26, 21, 37, 0.96) !important;
}

/* ─── Modern rounded video / embed blocks ─── */
.single-container .post-content .wp-block-embed,
.page-container .page-content .wp-block-embed {
  margin: 1.5em 0;
  border-radius: var(--media-radius);
  border: 1px solid var(--border);
  overflow: hidden;
}

.single-container .post-content .wp-block-embed iframe,
.single-container .post-content .wp-block-embed video,
.page-container .page-content .wp-block-embed iframe,
.page-container .page-content .wp-block-embed video {
  display: block;
  width: 100%;
  border-radius: calc(var(--media-radius) - 1px);
  border: none;
  margin: 0;
}

/* ─── Gutenberg Buttons (flat accent, clean) ─── */
.single-container .post-content .wp-block-button,
.page-container .page-content .wp-block-button {
  margin: 1.6em 0;
  text-align: center;
}

.single-container .post-content .wp-block-buttons,
.page-container .page-content .wp-block-buttons {
  justify-content: center;
  text-align: center;
}

.single-container .post-content .wp-block-button__link,
.page-container .page-content .wp-block-button__link {
  display: inline-block;
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  padding: 11px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  text-transform: capitalize !important;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.single-container .post-content .wp-block-button__link:hover,
.page-container .page-content .wp-block-button__link:hover {
  background: var(--accent-flat-hover) !important;
  background-color: var(--accent-flat-hover) !important;
  transform: translateY(-1px);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

/* Outline button variant */
.single-container .post-content .is-style-outline .wp-block-button__link,
.page-container .page-content .is-style-outline .wp-block-button__link {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--accent);
  color: var(--accent-light) !important;
  -webkit-text-fill-color: var(--accent-light) !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
}

.single-container .post-content .is-style-outline .wp-block-button__link:hover,
.page-container .page-content .is-style-outline .wp-block-button__link:hover {
  background: var(--accent-soft) !important;
  background-color: var(--accent-soft) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px);
}

.single-container .post-content blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  margin: 1.5em 0;
  color: var(--fg-muted);
  font-style: normal;
  font-size: 15px;
}

.single-container .post-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--fg);
  border: 1px solid var(--border-soft);
}

.single-container .post-content pre {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--border);
}

.single-container .post-content pre code {
  background: none;
  padding: 0;
  border: none;
}

/* ─── Lists with accent bullets ─── */
.single-container .post-content ul,
.single-container .post-content ol,
.page-container .page-content ul,
.page-container .page-content ol {
  padding-left: 2em;
  margin-bottom: 1.4em;
}

.single-container .post-content ul,
.page-container .page-content ul {
  list-style: none;
  padding-left: 0.25em;
}

.single-container .post-content ul > li,
.page-container .page-content ul > li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.55em;
  line-height: 1.7;
}

.single-container .post-content ul > li::before,
.page-container .page-content ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 12px;
  height: 12px;
  background-image: var(--accent-bullet);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.single-container .post-content ul ul > li::before,
.page-container .page-content ul ul > li::before {
  width: 10px;
  height: 10px;
  top: 0.55em;
}

.single-container .post-content ul ul,
.page-container .page-content ul ul {
  padding-left: 0.25em;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

.single-container .post-content ul ul > li,
.page-container .page-content ul ul > li {
  padding-left: 1.4em;
}

.single-container .post-content ol > li,
.page-container .page-content ol > li {
  margin-bottom: 0.55em;
  line-height: 1.7;
  padding-left: 0.3em;
}

.single-container .post-content li,
.page-container .page-content li {
  margin-bottom: 0.55em;
}

.single-container .post-content hr {
  border: none;
  height: 1px;
  background: var(--border);
  border-radius: 1px;
  margin: 2em 0;
  opacity: 1;
}

/* Post tags */
.post-tags {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.post-tags a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.post-tags a:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ─── Page Layout (borderless, clean) ─── */
.page-container {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 48px 6px 56px;
  text-align: center;
}

.page-container .page-title {
  font-size: clamp(16px, 1.6vw, 17px);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 auto 48px;
  letter-spacing: -0.015em;
  text-transform: capitalize;
  text-align: center;
  color: var(--fg);
}

.page-container .page-content {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
  letter-spacing: -0.003em;
  text-align: left;
  margin-top: 0;
}

.page-container .page-content p {
  margin-bottom: 1.3em;
}

/* Inline links in page content — solid accent, flat */
.page-container .page-content a:not(.webp-btn):not(.wp-block-button__link) {
  color: var(--accent-light);
  text-decoration: underline;
  text-decoration-color: rgba(104, 74, 159, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.page-container .page-content a:not(.webp-btn):not(.wp-block-button__link):hover {
  color: var(--fg);
  text-decoration-color: var(--accent);
}

/* ─── Archive Header ─── */
.archive-header {
  padding: 28px 24px 20px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.archive-header .archive-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--fg-muted);
  text-align: center;
}

.archive-header .archive-title span {
  color: var(--fg);
  font-weight: 600;
}

/* ─── Blog Intro (index.php / posts page) ─── */
.blog-intro {
  max-width: var(--site-width);
  margin: 0 auto;
  padding: 32px 6px 32px;
  text-align: center;
}

.blog-intro-title {
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  text-align: center;
  color: var(--fg);
  margin: 0 auto;
  max-width: 100%;
}

/* Accent divider — flat, single color */
.blog-intro-divider {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--accent);
  border: none;
  border-radius: 2px;
  margin: 16px auto 16px;
  opacity: 0.7;
}

.blog-intro-subtitle {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: var(--fg-muted);
  text-align: center;
  margin: 0 auto;
  max-width: 620px;
}

/* Inline links in welcome message */
.blog-intro-subtitle a {
  color: var(--accent-light);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(104, 74, 159, 0.4);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.blog-intro-subtitle a:hover {
  color: var(--fg);
}

/* ─── Footer (full-width, borderless, no background) ─── */
.site-footer {
  position: relative;
  width: auto;
  margin: 0 var(--edge-margin) var(--edge-margin);
  padding: 14px 6px;
  text-align: center;
}

/* Footer inner */
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.site-footer-inner.site-footer-nav {
  justify-content: space-between;
}

.footer-nav-side {
  flex: 1;
  display: flex;
  align-items: center;
}

.footer-nav-prev {
  justify-content: flex-start;
}

.footer-nav-next {
  justify-content: flex-end;
}

.footer-nav-placeholder {
  display: inline-block;
  min-width: 1px;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
  font-family: var(--font-sans);
}

.footer-nav-link:hover {
  color: var(--fg);
}

.footer-nav-arrow {
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  color: #ffffff;
}

.site-footer-home {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: capitalize;
  color: #ffffff;
  margin: 0;
  line-height: 1;
  font-family: var(--font-sans);
}

.site-footer-home a {
  color: #ffffff;
}

.site-footer-home a:hover {
  color: #ffffff;
}

.site-footer a {
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  transition: color 0.15s ease;
  font-family: var(--font-sans);
}

.site-footer a:hover {
  color: var(--fg);
}

.site-footer .footer-icon-img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Pagination ─── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 28px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.pagination a,
.pagination span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  text-transform: lowercase;
}

.pagination a:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.pagination .current {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

/* ─── 404 ─── */
.error-404 {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.error-404 .error-code {
  font-size: 64px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 12px;
  letter-spacing: -0.03em;
}

.error-404 .error-msg {
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

/* ─── Search Form ─── */
.search-form {
  display: flex;
  max-width: 400px;
  margin: 0 auto;
}

.search-form input[type="search"] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--fg);
  font-size: 13px;
  padding: 9px 14px;
  outline: none;
  font-family: var(--font-sans);
  border-radius: 999px 0 0 999px;
  flex: 1;
  transition: border-color 0.15s ease;
}

.search-form input[type="search"]::placeholder {
  color: var(--fg-dim);
}

.search-form input[type="search"]:focus {
  border-color: var(--accent);
}

/* Search/submit button — flat accent */
.search-form button,
.search-form .search-submit,
.search-form input[type="submit"],
.search-form .submit {
  background: var(--accent);
  border: 1px solid transparent;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  border-radius: 0 999px 999px 0;
  transition: background 0.15s ease, transform 0.15s ease;
  font-family: var(--font-sans);
}

.search-form button:hover,
.search-form .search-submit:hover,
.search-form input[type="submit"]:hover,
.search-form .submit:hover {
  background: var(--accent-flat-hover);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  transform: translateY(-1px);
}

/* ─── Comments (clean, threaded, with avatars) ─── */
.comments-area {
  margin: 48px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  max-width: var(--max-read);
  text-align: left;
}

.comments-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: var(--fg);
  margin-bottom: 28px;
  text-align: center;
}

.comments-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  margin: 10px auto 0;
  opacity: 0.6;
}

/* Comment list */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}

.comment-list .children {
  list-style: none;
  padding-left: 20px;
  margin-left: 4px;
  margin-top: 18px;
  border-left: 2px solid var(--border-soft);
}

/* Single comment body */
.comment-body {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}

.comment-list > .comment:first-child > .comment-body {
  padding-top: 0;
}

.comment-list > .comment:last-child > .comment-body {
  border-bottom: none;
}

/* Comment meta — avatar + author + date */
.comment-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.comment-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.comment-avatar img {
  border-radius: 50%;
  border: 1px solid var(--border);
  width: 40px;
  height: 40px;
  display: block;
  object-fit: cover;
}

.comment-avatar .avatar {
  border-radius: 50%;
  border: 1px solid var(--border);
  width: 40px;
  height: 40px;
  display: block;
  object-fit: cover;
}

.comment-author-info {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.comment-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.005em;
  text-transform: capitalize;
  line-height: 1.3;
}

.comment-author a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.15s ease;
}

.comment-author a:hover {
  color: var(--accent-light);
}

.comment-metadata {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.01em;
}

.comment-metadata a {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}

.comment-metadata a:hover {
  color: var(--fg-muted);
}

/* "Awaiting moderation" notice */
.comment-awaiting-moderation {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-light);
  background: var(--accent-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

/* Comment content */
.comment-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  letter-spacing: -0.003em;
}

.comment-content p {
  margin-bottom: 0.85em;
}

.comment-content p:last-child {
  margin-bottom: 0;
}

.comment-content a {
  color: var(--accent-light);
  text-decoration: underline;
  text-decoration-color: rgba(104, 74, 159, 0.4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.comment-content a:hover {
  color: var(--fg);
  text-decoration-color: var(--accent);
}

.comment-content code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--fg);
  border: 1px solid var(--border-soft);
}

/* Reply link */
.reply {
  margin-top: 12px;
}

.reply a {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.reply a:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Edit comment link (for logged-in editors) */
.comment-edit-link {
  font-size: 11px;
  color: var(--fg-dim);
  text-decoration: none;
  margin-left: 8px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.comment-edit-link:hover {
  color: var(--accent-light);
}

/* Comment navigation (older / newer) */
.comment-navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 8px;
  font-size: 12px;
}

.comment-navigation .nav-previous a,
.comment-navigation .nav-next a {
  display: inline-block;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.comment-navigation .nav-previous a:hover,
.comment-navigation .nav-next a:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.comment-navigation .nav-next {
  margin-left: auto;
}

/* "Comments are closed" notice */
.comments-closed {
  text-align: center;
  font-size: 12px;
  color: var(--fg-dim);
  font-style: italic;
  padding: 16px 0;
  margin: 0;
}

/* Pingbacks & trackbacks — minimal */
.pingback .comment-body,
.trackback .comment-body {
  padding: 10px 0;
  font-size: 13px;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border-soft);
}

.pingback .comment-body a,
.trackback .comment-body a {
  color: var(--accent-light);
  text-decoration: none;
}

.pingback .comment-body a:hover,
.trackback .comment-body a:hover {
  color: var(--fg);
}

/* ─── Comment Form ─── */
.comment-respond {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}

.comment-reply-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: var(--fg);
  margin-bottom: 20px;
  text-align: center;
}

.comment-reply-title::after {
  content: "";
  display: block;
  width: 36px;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  margin: 10px auto 0;
  opacity: 0.6;
}

.comment-reply-title small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-top: 8px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.comment-reply-title small a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.comment-reply-title small a:hover {
  color: var(--fg);
}

/* Comment form layout — no .search-form hack */
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 100%;
}

.comment-form p {
  margin: 0;
}

.comment-form .comment-notes,
.comment-form .logged-in-as,
.comment-form .must-log-in {
  font-size: 12px;
  color: var(--fg-dim);
  text-align: center;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.comment-form .comment-notes .required,
.comment-form .comment-form-comment .required {
  color: var(--accent-light);
}

.comment-form .logged-in-as a,
.comment-form .must-log-in a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.comment-form .logged-in-as a:hover,
.comment-form .must-log-in a:hover {
  color: var(--fg);
}

/* Labels — muted, lowercase, small */
.comment-form label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-muted);
  margin-bottom: 6px;
  text-transform: lowercase;
}

.comment-form label .required {
  color: var(--accent-light);
}

/* Inputs */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 13px;
  padding: 11px 14px;
  outline: none;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: var(--accent);
  background: var(--bg-mid);
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
  color: var(--fg-dim);
}

.comment-form textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

/* Cookies consent checkbox */
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-muted);
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.comment-form .comment-form-cookies-consent label {
  margin-bottom: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0;
}

/* Submit button — flat accent pill */
.comment-form .form-submit {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.comment-form .submit,
.comment-form button[type="submit"] {
  background: var(--accent);
  border: 1px solid transparent;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  padding: 11px 32px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: capitalize;
  font-family: var(--font-sans);
  border-radius: 999px;
  transition: background 0.15s ease, transform 0.15s ease;
}

.comment-form .submit:hover,
.comment-form button[type="submit"]:hover {
  background: var(--accent-flat-hover);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  transform: translateY(-1px);
}

/* ─── Site Kit / Sign in with Google button — reset theme styles ───
   The theme's universal reset (* { margin:0; padding:0; box-sizing:border-box })
   and base body styles (Inter font, -0.011em letter-spacing, light fg color)
   can clash with Google's "Sign in with Google" button rendered by the
   Site Kit plugin. The rules below restore Google's intended appearance so
   the button text and logo remain legible. Targets both the legacy
   .goog-button markup and the newer GIS .g_id_signin container, plus the
   generic .gsi-* classes used by Site Kit's login widget.

   Strategy: only override the properties the theme pollutes (box-sizing,
   inherited color/font/letter-spacing, link styles). Do NOT use `all:`
   because that would also wipe out Site Kit's own button styles. */
.goog-button,
.g_id_signin,
.gsi-container,
.gsi-button,
.goog-button *,
.g_id_signin *,
.gsi-container *,
.gsi-button * {
  box-sizing: content-box;
}

/* Force dark text on white Google button — overrides inherited body color */
.goog-button,
.g_id_signin,
.gsi-container,
.gsi-button,
.goog-button-text {
  color: #1f1f1f;
  -webkit-text-fill-color: #1f1f1f;
  font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
  letter-spacing: 0.25px;
  text-transform: none;
}

/* Reset any links inside the Google button — never inherit theme's
   light link color or underline */
.goog-button a,
.g_id_signin a,
.gsi-container a,
.gsi-button a,
.goog-button a:hover,
.g_id_signin a:hover,
.gsi-container a:hover,
.gsi-button a:hover {
  color: #1f1f1f;
  -webkit-text-fill-color: #1f1f1f;
  text-decoration: none;
  background: transparent;
  transition: none;
}

/* Google "G" logo container — don't let theme border/bg/img-radius leak in */
.goog-button-icon,
.g_id_signin .goog-button-icon {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.goog-button-icon img,
.goog-button-icon svg,
.g_id_signin img,
.g_id_signin svg {
  display: block;
  width: 18px;
  height: 18px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain;
}

/* Iframe inside GIS container — Google renders the button in an iframe
   in newer GIS versions; leave it alone */
.g_id_signin iframe,
.goog-button iframe,
.gsi-container iframe {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none;
  width: auto;
}

/* On wp-login.php, give the button some breathing room */
body.login .goog-button,
body.login .g_id_signin,
body.login .gsi-container,
body.login .gsi-button {
  margin: 14px auto;
}

/* Site Kit login separator — keep the "or" divider neutral */
.goog-button-separator,
.gsi-separator,
.site-kit-login-separator {
  color: #50575e;
  font-size: 12px;
  text-align: center;
  margin: 12px 0;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Page links (paginated post content) ─── */
.page-links {
  margin: 1.6em 0;
  text-align: center;
}

.page-links a,
.page-links > span {
  display: inline-block;
  margin: 0 3px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg-muted);
}

.page-links a:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .site-header {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    padding: 0 4px;
  }

  .site-identity {
    flex: 1;
  }

  .site-nav {
    display: none;
    width: 100%;
    order: 3;
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }

  .site-nav.active {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .site-nav a {
    padding: 10px 0;
  }

  .site-footer {
    padding: 12px 4px;
  }

  .site-footer-inner {
    gap: 10px;
  }

  .footer-nav-link {
    gap: 4px;
  }

  .footer-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .footer-nav-arrow {
    font-size: 16px;
  }

  .single-container {
    padding: 28px 4px 44px;
  }

  .page-container {
    padding: 28px 4px 44px;
  }

  .blog-intro {
    padding: 24px 4px 24px;
  }

  .blog-intro-divider {
    width: 48px;
    margin: 12px auto 12px;
  }

  /* Two-column grid on mobile (was single-column) */
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-card-body {
    padding: 12px 14px 14px;
  }

  .post-card-body .post-card-title {
    font-size: 15px;
  }

  .sol-divider {
    width: 48px;
  }

  /* Smaller bullets on mobile */
  .single-container .post-content ul > li::before,
  .page-container .page-content ul > li::before {
    width: 10px;
    height: 10px;
    top: 0.5em;
  }

  .single-container .post-content ul > li,
  .page-container .page-content ul > li {
    padding-left: 1.4em;
  }

  .single-container .post-content ul ul > li::before,
  .page-container .page-content ul ul > li::before {
    width: 9px;
    height: 9px;
  }

  /* Comments — tighten up on mobile */
  .comments-area {
    margin-top: 36px;
    padding-top: 24px;
  }

  .comments-title {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .comment-list .children {
    padding-left: 14px;
    margin-left: 2px;
  }

  .comment-avatar,
  .comment-avatar img,
  .comment-avatar .avatar {
    width: 32px;
    height: 32px;
  }

  .comment-meta {
    gap: 10px;
  }

  .comment-author {
    font-size: 12px;
  }

  .comment-content {
    font-size: 13px;
  }

  .comment-respond {
    margin-top: 28px;
    padding-top: 20px;
  }

  .comment-reply-title {
    font-size: 13px;
    margin-bottom: 16px;
  }
}

/* ─── Very narrow phones ─── */
@media (max-width: 380px) {
  .site-name {
    font-size: 15px;
  }

  .post-card-body {
    padding: 10px 12px 12px;
  }

  .post-card-body .post-card-title {
    font-size: 14px;
  }
}

/* ─── Random Posts Section (single post footer) ─── */
/* Sits inside .site-main, so it inherits the same 800px max-width
   and 10px edge padding as the post above it. No divider, no extra
   top spacing — the single-container's bottom padding already
   provides enough breathing room. */
.random-posts-section {
  padding: 0 0 28px;
  margin-top: 0;
  border-top: none;
}

.random-posts-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-align: center;
  margin-bottom: 16px;
}

.random-posts-grid {
  padding: 0; /* override default .grid-container padding — section provides its own */
}

/* On mobile: 2 columns, only show the first 4 cards so we get a clean 2x2 grid. */
@media (max-width: 768px) {
  .random-posts-grid .post-card:nth-child(n+5) {
    display: none;
  }

  .random-posts-section {
    padding: 0 0 20px;
  }
}