/*
Theme Name: Pins Aesthetics
Theme URI: https://pinsesthetics.com/
Author: Pins Aesthetics
Description: A visual, pinboard-style blog theme. Posts land in a staggered masonry grid led by their cover images, with a soft warm palette, a display serif for headlines, and a light/dark toggle that remembers the visitor's choice. Posts without a cover image get a generated gradient so the grid never looks broken.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pinsesthetics
Tags: blog, two-columns, three-columns, grid-layout, custom-menu, featured-images, translation-ready, threaded-comments, dark-mode
*/

/* ==========================================================================
   Design tokens
   Change these values to restyle the whole site.
   ========================================================================== */

:root {
  --bg: #fffcfa;
  --bg-blur: rgba(255, 252, 250, 0.72);
  --surface: #f7f2ed;
  --surface-2: #efe7e0;
  --border: #ece4dc;
  --fg: #4b4540;
  --fg-strong: #1c1917;
  --muted: #8a8079;

  --accent: #d6336c;
  --accent-ink: #ffffff;
  --accent-soft: rgba(214, 51, 108, 0.1);
  --accent-2: #7c5cf0;

  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06), 0 4px 12px rgba(28, 25, 23, 0.05);
  --shadow-lg: 0 10px 24px rgba(28, 25, 23, 0.1), 0 28px 56px rgba(28, 25, 23, 0.09);

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 46rem;
  --wrap-wide: 80rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;

  /* Shared by the CSS grid and the JS that measures the masonry columns. */
  --pin-gap: 1.5rem;
}

html.dark {
  --bg: #0c0a09;
  --bg-blur: rgba(12, 10, 9, 0.72);
  --surface: #1c1917;
  --surface-2: #292524;
  --border: #2a2523;
  --fg: #d6d3d1;
  --fg-strong: #fafaf9;
  --muted: #a8a29e;

  --accent: #f472b6;
  --accent-ink: #1c1917;
  --accent-soft: rgba(244, 114, 182, 0.16);
  --accent-2: #a78bfa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.55), 0 28px 56px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.wrap--wide {
  max-width: var(--wrap-wide);
}

.site-main {
  flex: 1;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

/* ==========================================================================
   Reading progress
   ========================================================================== */

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}

.reading-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: left center;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-blur);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4.5rem;
}

.site-brand {
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  text-decoration: none;
}

.site-brand img {
  max-height: 2.25rem;
  width: auto;
}

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

.main-nav a {
  display: block;
  padding: 0.5rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.main-nav a:hover {
  color: var(--fg-strong);
  background: var(--surface);
}

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
  color: var(--fg-strong);
  background: var(--surface);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.icon-button:hover {
  background: var(--surface);
  color: var(--fg-strong);
}

.icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The toggle swaps which icon is visible based on the theme. */
html:not(.dark) .icon-sun,
html.dark .icon-moon {
  display: none;
}

.nav-toggle {
  display: none;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 0.75rem 0 1rem;
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}

.mobile-nav a:hover {
  background: var(--surface);
}

@media (max-width: 767px) {
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: grid;
  }
}

/* If the menu was left open and the window is widened, hide it again. */
@media (min-width: 768px) {
  .mobile-nav,
  .mobile-nav.is-open {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 4.5rem 3rem;
  text-align: center;
}

/* Soft colour wash behind the headline. Decorative only. Every blob fades to
   transparent well inside the box, so the overflow clip never shows a seam. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -4rem;
  width: min(76rem, 130%);
  height: 30rem;
  transform: translateX(-50%);
  background:
    radial-gradient(20rem 11rem at 30% 44%, rgba(244, 114, 182, 0.45), transparent 70%),
    radial-gradient(18rem 10rem at 70% 32%, rgba(124, 92, 240, 0.36), transparent 70%),
    radial-gradient(17rem 9rem at 50% 70%, rgba(251, 191, 36, 0.3), transparent 70%);
  filter: blur(36px);
  pointer-events: none;
}

html.dark .hero::before {
  opacity: 0.55;
}

.hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__title {
  margin-top: 0.875rem;
  margin-inline: auto;
  max-width: 22ch;
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero__text {
  margin-top: 1.125rem;
  margin-inline: auto;
  max-width: 34rem;
  font-size: 1.0625rem;
  color: var(--muted);
}

.hero__search {
  margin-inline: auto;
  max-width: 28rem;
}

.hero__tags {
  margin-top: 1.5rem;
}

.hero__tags .tag-list {
  justify-content: center;
}

/* ==========================================================================
   Tag pills
   ========================================================================== */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--bg);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.tag-pill:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}

.tag-pill__count {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Section headings
   ========================================================================== */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.section-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-head__link {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

/* ==========================================================================
   Masonry pin grid
   ========================================================================== */

.pin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: var(--pin-gap);
  align-items: start;
  padding-block: 2rem 4rem;
  list-style: none;
  margin: 0;
}

/* Once the script has measured every card it switches the grid to fine rows
   and gives each card an explicit span. That is what staggers the columns.
   Without JavaScript the plain grid above still renders a tidy layout. */
.pin-grid.is-masonry {
  grid-auto-rows: 4px;
  row-gap: 0;
}

.pin {
  position: relative;
  border-radius: var(--radius-lg);
  transition: transform 0.25s ease;
}

.pin:hover {
  transform: translateY(-4px);
}

.pin__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease;
}

.pin:hover .pin__media {
  box-shadow: var(--shadow-lg);
}

.pin__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.pin:hover .pin__media img {
  transform: scale(1.04);
}

/* Cover stand-in for posts with no featured image. The gradient and the
   aspect ratio are picked from the post slug, so each one is different but
   stays the same between page loads. */
.pin__media--empty {
  display: grid;
  place-items: center;
}

.pin__monogram {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(28, 25, 23, 0.34);
  user-select: none;
}

/* Knock the pastels back on a dark page with an overlay rather than a filter,
   so the monogram keeps its own contrast instead of being dimmed too. */
html.dark .pin__media--empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, 0.5);
}

html.dark .pin__monogram {
  color: rgba(255, 255, 255, 0.62);
}

.is-grad-1 { background: linear-gradient(135deg, #fbcfe8, #c7d2fe); }
.is-grad-2 { background: linear-gradient(135deg, #fde68a, #fca5a5); }
.is-grad-3 { background: linear-gradient(135deg, #a7f3d0, #bfdbfe); }
.is-grad-4 { background: linear-gradient(135deg, #ddd6fe, #fbcfe8); }
.is-grad-5 { background: linear-gradient(135deg, #fed7aa, #fecdd3); }
.is-grad-6 { background: linear-gradient(135deg, #bae6fd, #ddd6fe); }

.pin__badge {
  position: absolute;
  z-index: 2;
  left: 0.75rem;
  top: 0.75rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1c1917;
  text-decoration: none;
}

.pin__badge:hover {
  background: #fff;
  color: var(--accent);
}

.pin__body {
  padding: 0.875rem 0.25rem 0;
}

.pin__title {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.pin__title a {
  color: inherit;
  text-decoration: none;
}

/* Makes the whole card clickable without nesting links inside the heading. */
.pin__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.pin:hover .pin__title {
  color: var(--accent);
}

.pin__excerpt {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.pin__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.pin__meta .sep {
  opacity: 0.5;
}

/* Phones get two narrow columns, the way a pinboard actually looks on mobile.
   The excerpt is dropped at that width because it turns into a sliver. */
@media (max-width: 639px) {
  .pin-grid {
    --pin-gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pin__excerpt {
    display: none;
  }

  .pin__title {
    font-size: 0.9375rem;
  }

  .pin__badge {
    left: 0.5rem;
    top: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
  }

  .pin__monogram {
    font-size: 2.5rem;
  }
}

/* Very small phones cannot carry two columns legibly. */
@media (max-width: 359px) {
  .pin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Featured pin: the newest post, given a full-width slot at the top
   -------------------------------------------------------------------------- */

.featured {
  position: relative;
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  border-radius: var(--radius-lg);
}

@media (min-width: 860px) {
  .featured {
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: 2.75rem;
  }
}

.featured__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.featured__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.featured:hover .featured__media img {
  transform: scale(1.03);
}

.featured__media--empty {
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
}

.featured__media--empty .pin__monogram {
  font-size: 6rem;
}

.featured__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.featured__title {
  margin-top: 0.75rem;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.featured__title a {
  color: inherit;
  text-decoration: none;
}

.featured__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.featured:hover .featured__title {
  color: var(--accent);
}

.featured__excerpt {
  margin-top: 0.875rem;
  font-size: 1rem;
  color: var(--muted);
}

.featured__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.empty-state {
  margin-top: 2rem;
  padding: 3rem 2rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ==========================================================================
   Page + archive headers
   ========================================================================== */

.page-head {
  padding-block: 3.5rem 0;
  text-align: center;
}

.page-head__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.page-head__title {
  margin-top: 0.625rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.page-head__text {
  margin-top: 0.75rem;
  margin-inline: auto;
  max-width: 34rem;
  color: var(--muted);
}

.page-head--left {
  text-align: left;
}

.page-head--left .page-head__text {
  margin-inline: 0;
}

/* ==========================================================================
   Search form
   ========================================================================== */

.search-form {
  position: relative;
  margin-top: 1.75rem;
}

.search-form svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  pointer-events: none;
}

.search-form input[type="search"] {
  width: 100%;
  /* Right padding leaves room for the submit button sitting on top. */
  padding: 0.75rem 6rem 0.75rem 2.75rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--bg);
  color: var(--fg-strong);
  font: inherit;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.search-form button {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================
   Single post
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.back-link:hover {
  color: var(--fg-strong);
}

.entry {
  padding-block: 2.5rem 4rem;
}

.entry__header {
  margin-top: 1.75rem;
  text-align: center;
}

.entry__kicker {
  display: inline-flex;
  padding: 0.3125rem 0.875rem;
  border-radius: 9999px;
  background: var(--accent-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.entry__title {
  margin-top: 1rem;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.entry__title--flush {
  margin-top: 0;
}

.entry__lead {
  margin-top: 1.125rem;
  margin-inline: auto;
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--muted);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.post-meta--center {
  justify-content: center;
  margin-top: 1.25rem;
}

.post-meta .sep {
  opacity: 0.5;
}

.post-meta img.avatar {
  border-radius: 9999px;
}

.entry__tags {
  margin-top: 1.5rem;
}

.entry__tags .tag-list {
  justify-content: center;
}

/* The cover breaks out past the reading column for a bit of drama. */
.entry__cover {
  margin: 2.5rem 0 0;
  width: min(100vw - 2.5rem, 64rem);
  margin-inline: calc(50% - min(50vw - 1.25rem, 32rem));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.entry__cover img {
  display: block;
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Post content typography
   -------------------------------------------------------------------------- */

.entry__content {
  margin-top: 2.75rem;
  font-size: 1.0625rem;
}

.entry__content > * + * {
  margin-top: 1.5rem;
}

.entry__content h2 {
  margin-top: 3rem;
  font-size: 1.75rem;
}

.entry__content h3 {
  margin-top: 2.5rem;
  font-size: 1.375rem;
}

.entry__content h4 {
  margin-top: 2rem;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
}

.entry__content ul,
.entry__content ol {
  padding-left: 1.5rem;
}

.entry__content li + li {
  margin-top: 0.5rem;
}

.entry__content li > ul,
.entry__content li > ol {
  margin-top: 0.5rem;
}

.entry__content a {
  color: var(--accent);
}

.entry__content strong {
  color: var(--fg-strong);
  font-weight: 700;
}

.entry__content blockquote {
  margin-inline: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--fg-strong);
}

.entry__content blockquote p + p {
  margin-top: 1rem;
}

.entry__content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: 2.5rem;
}

.entry__content img,
.entry__content .wp-block-image img {
  border-radius: var(--radius);
}

.entry__content figure {
  margin-inline: 0;
}

.entry__content figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

.entry__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.entry__content th,
.entry__content td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.entry__content th {
  color: var(--fg-strong);
  font-weight: 700;
}

/* WordPress boxes every cell in. We want horizontal rules only. */
.entry__content .wp-block-table table,
.entry__content .wp-block-table td,
.entry__content .wp-block-table th {
  border: 0;
}

.entry__content .wp-block-table td,
.entry__content .wp-block-table th {
  border-bottom: 1px solid var(--border);
}

/* Inline code gets a subtle chip; blocks get a full panel. */
.entry__content :not(pre) > code {
  padding: 0.15em 0.4em;
  border-radius: 0.375rem;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

.entry__content pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  tab-size: 2;
}

.entry__content pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.entry__content .wp-block-embed,
.entry__content .wp-block-video {
  margin-inline: 0;
}

/* Let wide/full blocks break out of the text column. */
.entry__content .alignwide {
  width: min(100vw - 2.5rem, 62rem);
  margin-inline: calc(50% - min(50vw - 1.25rem, 31rem));
}

.entry__content .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
}

.entry__content .alignfull img {
  border-radius: 0;
}

.entry__content .aligncenter {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Share + post navigation
   -------------------------------------------------------------------------- */

.entry__footer {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.post-nav {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
  }

  /* Keeps "Next" on the right even when there is no "Previous". Only inside
     the media query, or it would create a phantom column on mobile. */
  .post-nav__link--next {
    grid-column: 2;
  }
}

.post-nav__link {
  display: block;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.post-nav__link:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.post-nav__link--next {
  text-align: right;
}

.post-nav__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
}

.post-nav__title {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--fg-strong);
}

/* --------------------------------------------------------------------------
   Related posts
   -------------------------------------------------------------------------- */

.related {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 3rem 1rem;
  margin-top: 4rem;
}

.related .section-head {
  margin-top: 0;
}

.related .pin-grid {
  padding-block: 1.75rem 3rem;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  padding-bottom: 4rem;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.625rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.pagination .page-numbers:hover {
  color: var(--fg-strong);
  border-color: var(--accent);
}

.pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.comments__title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
}

.comment-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.comment-list ol.children {
  list-style: none;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}

.comment-body {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.comment-meta img {
  border-radius: 9999px;
}

.comment-author {
  font-weight: 700;
  color: var(--fg-strong);
}

.comment-content {
  margin-top: 0.625rem;
}

/* The reply link and moderation notice reuse .post-meta. */
.comment-body p.post-meta {
  margin-top: 0.75rem;
}

.comment-respond {
  margin-top: 2rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-strong);
}

.comment-form p {
  margin-top: 1rem;
}

.comment-form .comment-notes {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The cookie consent line is a checkbox with its label beside it, not above. */
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.comment-form .comment-form-cookies-consent input {
  margin: 0.35rem 0 0;
  accent-color: var(--accent);
}

.comment-form .comment-form-cookies-consent label {
  margin-bottom: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--muted);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg);
  color: var(--fg-strong);
  font: inherit;
  font-size: 0.9375rem;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.comment-form .submit,
.button-primary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.comment-form .submit:hover,
.button-primary:hover {
  transform: translateY(-1px);
}

/* ==========================================================================
   404
   ========================================================================== */

.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 7rem;
  text-align: center;
}

.error-404__code {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.error-404__title {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
}

.error-404__text {
  margin-top: 0.75rem;
  color: var(--muted);
}

.error-404 .button-primary {
  margin-top: 2rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 2.5rem;
}

@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer__copy {
  font-size: 0.875rem;
  color: var(--muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.site-footer__links a {
  color: var(--muted);
  text-decoration: none;
}

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

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}