/*
Theme Name: Bobby Oster Forest
Theme URI: https://bobbyoster.com/blog/
Author: Bobby Oster
Author URI: https://bobbyoster.com
Description: A warm, readable blog theme for agentic engineering writing. Forest green accents on off-white paper.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bobbyoster-forest
Tags: blog, one-column, custom-menu, featured-images
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
*/

/* ── Base + Shared ────────────────────────────────── */

:root {
  --page-pad-y: 40px; /* top-of-page air below the sticky nav; shared by every page so eyebrows align */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* self-hosted below; system stack falls back if Inter fails */
}

/* Inter (self-hosted, OFL), variable weight. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 96.85%;
  src: url("assets/fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 96.85%;
  src: url("assets/fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); color: #262a2c; background: #fbfaf6; -webkit-font-smoothing: antialiased; line-height: 1.55; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin-left: auto; margin-right: auto; padding-left: 48px; padding-right: 48px; }
.wrap--narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

.site-header { border-bottom: 1px solid #e8e4d8; background: #fbfaf6; position: sticky; top: 0; z-index: 10; }
.site-header-row { display: flex; align-items: center; gap: 32px; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 22px; height: 22px; display: block; flex: none; }
.brand-name { font-size: 17px; font-weight: 600; color: #14171a; }
.brand-slash { color: #9aa094; font-weight: 400; }
.brand-section { color: #5f655e; font-size: 17px; }
.tagline { font-size: 13px; color: #5f655e; flex: 1; min-width: 0; text-align: right; line-height: 1.45; text-wrap: balance; }
.author-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #262a2c; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px solid #e8e4d8; }
.author-chip-name { font-weight: 500; }
.site-nav { display: flex; align-items: center; gap: 4px; padding: 14px 0; border-top: 1px solid #e8e4d8; }
.site-nav a { font-size: 14px; padding: 6px 12px; border-radius: 6px; color: #262a2c; }
.site-nav a[aria-current="page"] { background: #f3f1ea; font-weight: 500; color: oklch(0.42 0.10 155); }
.site-nav a:hover { background: #f3f1ea; }
.nav-spacer { flex: 1; }
.nav-search-form { display: flex; margin: 0; }
.nav-search { font-size: 13px; color: #262a2c; padding: 6px 12px 6px 30px; border: 1px solid #e8e4d8; border-radius: 6px; background: #fbfaf6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa094' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") no-repeat 10px center; min-width: 200px; -webkit-appearance: none; appearance: none; }
.nav-search::placeholder { color: #5f655e; }
.nav-search:focus { outline: none; border-color: oklch(0.42 0.10 155); }

.article-head { padding: var(--page-pad-y) 0 0; }
/* Article hero illustration. Sits between the head and the body, aligned
   to the narrow article column; full-width image with soft corners. */
.article-hero { margin: 0 0 24px; } /* sits under the title, above the byline (order B) */
.article-hero-img { width: 100%; height: auto; display: block; border-radius: 12px; }
/* 404 page */
.error-404 { padding: var(--page-pad-y) 0; }
.error-404-code { font-size: 48px; font-weight: 600; color: #14171a; line-height: 1.1; margin: 0 0 16px; }
.error-404-msg { font-size: 19px; color: #5f655e; line-height: 1.55; margin: 0 0 28px; }
.article-tags { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.article-tag { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: oklch(0.42 0.10 155); padding: 4px 10px; background: oklch(0.94 0.04 155); border-radius: 999px; text-transform: lowercase; }
.article-title { font-size: 48px; line-height: 1.08; font-weight: 600; color: #14171a; margin: 0 0 28px; }
.article-meta { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #5f655e; padding-bottom: 32px; border-bottom: 1px solid #e8e4d8; flex-wrap: wrap; }
.article-meta-author { display: flex; align-items: center; gap: 10px; }
.article-meta-author-name { color: #14171a; font-weight: 500; }

.prose { padding: 32px 0 48px; font-size: 18px; line-height: 1.7; color: #262a2c; }
.prose > * { margin: 0 0 24px; }
.prose > *:last-child { margin-bottom: 0; }
.prose .lede { font-size: 21px; line-height: 1.55; color: #14171a; }
.prose .lede.has-dropcap::first-letter { float: left; font-size: 64px; line-height: 0.85; padding: 6px 12px 0 0; font-weight: 600; color: oklch(0.42 0.10 155); }
/* Anchor offset for the ~125px sticky site-header (brand row + nav row), so TOC
   jumps don't tuck the heading under it. Sized for real (logged-out) readers; the
   logged-in admin bar adds 32px in preview only and is intentionally ignored. */
.prose h2 { font-size: 28px; line-height: 1.2; font-weight: 600; color: #14171a; margin: 56px 0 16px; scroll-margin-top: 140px; }
.prose h3 { font-size: 21px; line-height: 1.3; font-weight: 600; color: #14171a; margin: 36px 0 12px; scroll-margin-top: 140px; }
.prose h2 .anchor, .prose h3 .anchor { color: #9aa094; margin-left: 8px; opacity: 0; transition: opacity .15s; font-weight: 400; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose a { color: oklch(0.42 0.10 155); border-bottom: 1px solid oklch(0.42 0.10 155)40; }
.prose a:hover { background: oklch(0.94 0.04 155); border-bottom-color: oklch(0.42 0.10 155); }
.prose strong, .prose b { font-weight: 600; color: #14171a; }
.prose em, .prose i { font-style: italic; }
.prose u { text-decoration: underline; text-decoration-color: #d4cfbe; text-underline-offset: 3px; }
.prose mark { background: oklch(0.94 0.10 95); color: #14171a; padding: 1px 5px; border-radius: 3px; }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: #f3f1ea; padding: 2px 6px; border-radius: 4px; color: #14171a; border: 1px solid #e8e4d8; }
.prose pre { background: #1a1f1c; color: #e6ebe2; padding: 22px 24px; border-radius: 10px; overflow-x: auto; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.65; position: relative; }
.prose pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; border: 0; }
.prose pre[data-lang]::before { content: attr(data-lang); position: absolute; top: 10px; right: 14px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: #7a8a78; }
.prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid oklch(0.42 0.10 155); font-size: 21px; line-height: 1.5; color: #14171a; font-style: italic; }
.prose blockquote p { margin: 0 0 16px; }
.prose blockquote p:last-child { margin: 0; }
.prose blockquote cite { display: block; font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #5f655e; margin-top: 12px; }
.prose .pullquote { font-family: var(--font-sans); font-size: 28px; line-height: 1.25; font-weight: 500; color: oklch(0.42 0.10 155); text-align: center; padding: 32px 16px; border-top: 1px solid #e8e4d8; border-bottom: 1px solid #e8e4d8; margin: 40px 0; font-style: normal; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul li, .prose ol li { margin: 0 0 8px; padding-left: 6px; }
.prose ul li::marker { color: oklch(0.42 0.10 155); }
.prose ol li::marker { color: #5f655e; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; padding: 20px 24px; background: #f3f1ea; border-radius: 8px; border: 1px solid #e8e4d8; }
.prose dl dt { font-weight: 600; color: #14171a; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.prose dl dd { margin: 0; color: #262a2c; font-size: 15px; }
.prose hr { border: 0; height: 1px; background: #e8e4d8; margin: 48px auto; max-width: 120px; }
.prose figure { margin: 36px 0; }
.prose figure.wide { margin-left: 0; margin-right: 0; }
.prose figure img, .prose figure .placeholder { width: 100%; border-radius: 8px; }
.prose figure figcaption { font-size: 13px; color: #5f655e; margin-top: 12px; line-height: 1.5; padding: 0 40px; }
.prose figure:not(.full) figcaption { padding: 0 4px; }
.prose figure figcaption strong { color: #14171a; font-weight: 600; }
.prose .placeholder { background: repeating-linear-gradient(135deg, #f3f1ea 0 12px, #efece2 12px 24px); aspect-ratio: 16 / 9; border: 1px solid #e8e4d8; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #5f655e; text-transform: uppercase; letter-spacing: 0.12em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto; }
.prose table th, .prose table td { padding: 10px 14px; border-bottom: 1px solid #e8e4d8; text-align: left; vertical-align: top; }
.prose table th { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #5f655e; font-weight: 500; background: #f3f1ea; border-bottom: 1px solid #d4cfbe; }
.prose table tr:hover td { background: #f3f1ea; }
.prose table caption { font-size: 13px; color: #5f655e; text-align: left; padding-bottom: 10px; font-style: italic; }
.prose kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82em; padding: 2px 7px; background: #fbfaf6; border: 1px solid #d4cfbe; border-bottom-width: 2px; border-radius: 4px; color: #14171a; box-shadow: 0 1px 0 #d4cfbe; }
.prose sup { font-size: 0.7em; line-height: 0; }
.prose small { font-size: 0.85em; color: #5f655e; }
.prose abbr { border-bottom: 1px dotted #5f655e; cursor: help; text-decoration: none; }
.prose ins { background: oklch(0.94 0.04 155); text-decoration: none; padding: 0 3px; border-radius: 3px; }
.prose s, .prose del { text-decoration: line-through; text-decoration-color: #5f655e; color: #5f655e; }

.callout { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 22px; border-radius: 10px; border: 1px solid #e8e4d8; background: #f3f1ea; align-items: start; }
.callout-icon { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700; width: 24px; height: 24px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fbfaf6; background: #5f655e; }
.callout-body p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
.callout-body p:last-child { margin: 0; }
.callout-body > strong:first-child { display: block; margin-bottom: 4px; color: #14171a; font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.callout--tip { background: oklch(0.94 0.04 155); border-color: oklch(0.86 0.07 155); }
.callout--tip .callout-icon { background: oklch(0.42 0.10 155); }
.callout--tip .callout-body strong { color: oklch(0.42 0.10 155); }
.callout--warn { background: oklch(0.97 0.04 80); border-color: oklch(0.88 0.07 80); }
.callout--warn .callout-icon { background: oklch(0.62 0.13 65); color: #fbfaf6; }
.callout--warn .callout-body strong { color: oklch(0.62 0.13 65); }
.callout--info { background: oklch(0.96 0.02 220); border-color: oklch(0.88 0.04 220); }
.callout--info .callout-icon { background: oklch(0.55 0.10 220); }
.callout--info .callout-body strong { color: oklch(0.55 0.10 220); }
.callout--danger { background: oklch(0.97 0.03 30); border-color: oklch(0.88 0.06 30); }
.callout--danger .callout-icon { background: oklch(0.55 0.16 30); }
.callout--danger .callout-body strong { color: oklch(0.55 0.16 30); }

.embed { padding: 16px 18px; background: #f3f1ea; border: 1px solid #e8e4d8; border-radius: 8px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: #5f655e; }
.embed-icon { width: 36px; height: 36px; border-radius: 8px; background: #fbfaf6; border: 1px solid #e8e4d8; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #5f655e; flex-shrink: 0; }
.embed strong { color: #14171a; display: block; font-size: 14px; }
.embed a { color: oklch(0.42 0.10 155); }

/* External media embeds: a themed responsive frame around the provider iframe.
   The provider renders its own thumbnail on load; loading="lazy" defers it.
   (Supersedes the old static .video-placeholder / .audio-placeholder; figure
   margins and figcaption styling come from the .prose figure rules above.) */
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #1a1f1c; border-radius: 10px; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.audio-frame { border-radius: 12px; overflow: hidden; }
.audio-frame iframe { display: block; width: 100%; height: 152px; border: 0; }

/* Social post embeds. The renderer emits a themed quote card inside the
   platform's blockquote (.bluesky-embed / .twitter-tweet / .text-post-media); the
   platform widget JS, loaded conditionally by the theme, replaces it with the native
   card. These rules style the fallback so a non-hydrated embed stays on-brand. */
.social-embed { margin: 32px 0; padding: 18px 20px; background: #f3f1ea; border: 1px solid #e8e4d8; border-radius: 12px; color: #262a2c; font-size: 16px; line-height: 1.6; }
.social-embed > p { margin: 0 0 12px; }
.social-embed > p:last-child { margin: 0; }
.social-embed-meta { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #5f655e; }
.social-embed-meta a { color: oklch(0.42 0.10 155); }
.social-embed--bluesky { border-left: 3px solid oklch(0.55 0.14 240); }
.social-embed--threads { border-left: 3px solid #14171a; }
.social-embed--x { border-left: 3px solid #14171a; }

.footnote-ref { font-size: 0.7em; vertical-align: super; line-height: 0; color: oklch(0.42 0.10 155); padding: 0 2px; }
.footnotes { margin-top: 64px; padding-top: 24px; border-top: 1px solid #e8e4d8; font-size: 14px; color: #5f655e; }
.footnotes h2 { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: #5f655e; margin: 0 0 12px; }
.footnotes ol { padding-left: 1.4em; }
.footnotes ol li { margin-bottom: 8px; line-height: 1.55; }

.toc { float: right; width: 240px; margin: 0 0 24px 32px; padding: 18px 20px; border: 1px solid #e8e4d8; border-radius: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.6; }
.toc-label { color: #5f655e; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; font-weight: 500; font-size: 11px; }
.toc ol { list-style: decimal-leading-zero; margin: 0; }
.toc li { margin-bottom: 4px; }
.toc li::marker { color: #9aa094; font-size: 11px; }
.toc a { color: #262a2c; }
.toc a:hover { color: oklch(0.42 0.10 155); }

.ul-task-list { list-style: none; padding-left: 0; }
.ul-task-list li { display: flex; gap: 10px; align-items: baseline; padding-left: 0; margin: 0 0 8px; }
.ul-task-list input[type=checkbox] { accent-color: oklch(0.42 0.10 155); transform: translateY(2px); }

.newsletter { background: #f3f1ea; border: 1px solid #e8e4d8; border-radius: 12px; padding: 48px; margin: 0 0 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.newsletter-eyebrow { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.42 0.10 155); margin-bottom: 12px; }
.newsletter-title { font-size: 26px; font-weight: 600; color: #14171a; margin: 0 0 8px; line-height: 1.2; }
.newsletter-sub { font-size: 14px; color: #5f655e; margin: 0; line-height: 1.5; }
/* Substack embed iframe - responsive; transparent so the card bg shows through. */
.newsletter-embed { display: block; width: 100%; max-width: 480px; height: 150px; border: 0; background: transparent; }
/* Stacked variant (narrow/end-of-article context) — one column avoids the cramped
   two-column squeeze in the 720 measure. */
.newsletter--stacked { grid-template-columns: 1fr; gap: 28px; }

.related { padding: 56px 0; border-top: 1px solid #e8e4d8; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card { padding: 24px; border: 1px solid #e8e4d8; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.related-card:hover { border-color: oklch(0.42 0.10 155); background: #f3f1ea; }
.related-tag { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #5f655e; text-transform: lowercase; }
.related-title { font-size: 16px; font-weight: 600; line-height: 1.3; color: #14171a; margin: 0; flex: 1; }
.related-date { font-size: 12px; color: #9aa094; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.bio { padding: 40px 0 56px; border-top: 1px solid #e8e4d8; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; }
.bio-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.bio-name { font-size: 16px; font-weight: 600; color: #14171a; margin: 0 0 4px; }
.bio-line { font-size: 14px; color: #5f655e; line-height: 1.5; margin: 0; max-width: 60ch; }
.bio-social { display: flex; gap: 6px; flex-wrap: wrap; }
.bio-social a { font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #5f655e; padding: 5px 10px; border: 1px solid #e8e4d8; border-radius: 5px; }
.bio-social a:hover { color: oklch(0.42 0.10 155); border-color: oklch(0.42 0.10 155); }

.site-footer { border-top: 1px solid #e8e4d8; padding: 40px 0 60px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer-brand { font-size: 13px; color: #5f655e; }
.footer-brand strong { color: #14171a; font-weight: 600; }
.footer-social { display: flex; gap: 4px; flex-wrap: wrap; }
.footer-social a { font-size: 13px; color: #5f655e; padding: 6px 12px; border-radius: 6px; }
.footer-social a:hover { background: #f3f1ea; color: oklch(0.42 0.10 155); }
.site-footer a[aria-current="page"] { color: oklch(0.42 0.10 155); font-weight: 500; }



/* ── Homepage (hero, post-list) ────────────────────── */

/* Hero uses --page-pad-y top and bottom (symmetric) so the eyebrow lands at the same
   position as every other page and the divider sits at a consistent offset.
   Eyebrow uses the shared .page-eyebrow classes (see "Shared page header"). */
.hero { padding: var(--page-pad-y) 0; }
/* The hero's bottom border is the divider to the recent list; only draw it when that list
   follows. In the 1-post state the hero meets the footer, so its border would double the
   footer's top border. */
.hero:has(+ .recent) { border-bottom: 1px solid #e8e4d8; }
.hero-title { font-size: 56px; line-height: 1.05; font-weight: 600; color: #14171a; margin: 0 0 24px; max-width: 14ch; }
.hero-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #5f655e; margin-bottom: 24px; flex-wrap: wrap; }
.hero-meta-dot { width: 3px; height: 3px; border-radius: 3px; background: #9aa094; }
.hero-excerpt { font-size: 19px; line-height: 1.55; color: #262a2c; max-width: 60ch; margin: 0 0 32px; }
.cta-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: oklch(0.42 0.10 155); font-weight: 500; }
.cta-link:hover { color: oklch(0.55 0.10 155); }
.hero-links { display: flex; gap: 28px; flex-wrap: wrap; }
.hero--intro .hero-title, .hero--intro .hero-excerpt { max-width: none; }
/* Featured hero: two-column (text + illustration) when the post has a hero. */
.hero-layout--media { display: grid; grid-template-columns: 1fr 0.82fr; gap: 56px; align-items: center; }
.hero-figure { display: block; }
.hero-figure-img { width: 100%; height: auto; display: block; border-radius: 14px; }
@media (max-width: 720px) { .hero-layout--media { grid-template-columns: 1fr; gap: 28px; } }
.recent { padding: var(--page-pad-y) 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; }
.section-title { font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; text-transform: uppercase; letter-spacing: 0.08em; color: #5f655e; font-weight: 500; }
.section-link { font-size: 13px; color: oklch(0.42 0.10 155); }
.post-list { display: flex; flex-direction: column; }
.post-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 32px; padding: 28px 0; border-top: 1px solid #e8e4d8; align-items: baseline; }
.post-row:last-child { border-bottom: 1px solid #e8e4d8; }
/* Home recent list: drop the last row's border so it doesn't double up with the
   footer's full-bleed top border (the footer line becomes the single divider). */
.recent .post-list .post-row:last-child { border-bottom: 0; padding-bottom: 0; }
/* Post-row thumbnails - square crop between the date rail and the title.
   Applies wherever a row has a hero (home recent list + archive/search lists). */
.post-row--media { grid-template-columns: 110px 96px 1fr auto; align-items: center; }
.post-thumb-img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.post-date { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #5f655e; padding-top: 4px; }
.post-title { font-size: 22px; font-weight: 600; color: #14171a; margin: 0 0 8px; line-height: 1.25; }
.post-excerpt { font-size: 15px; line-height: 1.55; color: #5f655e; margin: 0; max-width: 62ch; }
.post-tag { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #5f655e; padding: 4px 8px; border: 1px solid #e8e4d8; border-radius: 4px; white-space: nowrap; }
.post-row:hover .post-title { color: oklch(0.42 0.10 155); }
.post-row:hover .post-tag { color: oklch(0.42 0.10 155); border-color: oklch(0.42 0.10 155); }
/* Archive rows: excerpt runs full-width (no right tag column - the facet rail covers
   tags); top-aligned so the title lines up with the thumbnail. Home keeps its right tag. */
.post-row--archive { grid-template-columns: 110px 1fr; align-items: start; }
.post-row--archive.post-row--media { grid-template-columns: 110px 96px 1fr; }


/* ── Archive page ─────────────────────────────────── */

.archive-head { padding: var(--page-pad-y) 0 40px; border-bottom: 1px solid #e8e4d8; }
.archive-h1 { font-size: 44px; line-height: 1.1; font-weight: 600; color: #14171a; margin: 0 0 16px; }
.archive-h1 em { font-style: normal; color: oklch(0.42 0.10 155); }
.archive-sub { font-size: 17px; color: #5f655e; margin: 0; line-height: 1.55; }
.archive-stats { display: flex; gap: 28px; margin-top: 28px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #5f655e; }
.archive-stats strong { color: #14171a; font-weight: 600; }
.archive-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; padding: 48px 0 64px; }
.tag-rail { border-right: 1px solid #e8e4d8; padding-right: 20px; position: sticky; top: 130px; align-self: start; }
.tag-rail-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #5f655e; margin-bottom: 14px; }
.tag-rail ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tag-rail a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 6px; font-size: 14px; color: #262a2c; }
.tag-rail a:hover { background: #f3f1ea; }
.tag-rail a[aria-current="page"] { background: oklch(0.94 0.04 155); color: oklch(0.42 0.10 155); font-weight: 500; }
.tag-rail a[aria-current="page"] .tag-count { color: oklch(0.42 0.10 155); }
.tag-rail .tag-count { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: #9aa094; }
.archive-body .filter-banner { padding: 16px 20px; background: oklch(0.94 0.04 155); border: 1px solid oklch(0.86 0.07 155); border-radius: 8px; margin-bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.filter-banner-text { font-size: 14px; color: #14171a; }
.filter-banner-text strong { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: oklch(0.42 0.10 155); }
.filter-banner-clear { font-size: 13px; color: oklch(0.42 0.10 155); padding: 6px 10px; border-radius: 6px; border: 1px solid oklch(0.42 0.10 155); }
.filter-banner-clear:hover { background: oklch(0.42 0.10 155); color: #fbfaf6; }


/* ── Faceted archive (/archive/) ──────────────────── */
.facet-search { display: flex; gap: 6px; margin-bottom: 24px; }
.facet-search-input { flex: 1; min-width: 0; font-family: inherit; font-size: 13px; padding: 9px 11px; border: 1px solid #d4cfbe; border-radius: 7px; background: #fbfaf6; color: #14171a; outline: none; }
.facet-search-input:focus { border-color: oklch(0.42 0.10 155); box-shadow: 0 0 0 3px oklch(0.94 0.04 155); }
.facet-search-btn { font-family: inherit; font-size: 13px; font-weight: 500; padding: 9px 13px; border: 0; border-radius: 7px; background: #14171a; color: #fbfaf6; cursor: pointer; white-space: nowrap; }
.facet-search-btn:hover { background: oklch(0.42 0.10 155); }
.facet-group + .facet-group { margin-top: 24px; }

.active-facets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.facet-chip { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: oklch(0.42 0.10 155); background: #fbfaf6; padding: 4px 9px; border: 1px solid oklch(0.86 0.07 155); border-radius: 6px; }
.facet-chip:hover { background: oklch(0.42 0.10 155); color: #fbfaf6; border-color: oklch(0.42 0.10 155); }
.facet-chip span { font-size: 14px; line-height: 1; }
.facet-join { font-size: 13px; color: #9aa094; } /* "or" between same-facet chips (tags OR, years OR) */

.archive-resultcount { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #9aa094; margin-bottom: 4px; }
.archive-resultcount strong { color: #14171a; font-weight: 600; }

.archive-empty { padding: 56px 0; color: #5f655e; font-size: 16px; }
.archive-empty p { margin: 0 0 10px; }
.archive-empty a { color: oklch(0.42 0.10 155); }

/* Pagination — also styles the_posts_pagination() output on index/search. */
.archive-pagination, .pagination { margin-top: 28px; padding-top: 28px; border-top: 1px solid #e8e4d8; }
.archive-pagination .page-numbers, .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; margin-right: 6px; font-size: 14px; color: #262a2c; border: 1px solid #e8e4d8; border-radius: 7px; }
.archive-pagination a.page-numbers:hover, .pagination a.page-numbers:hover { border-color: oklch(0.42 0.10 155); color: oklch(0.42 0.10 155); }
.archive-pagination .page-numbers.current, .pagination .page-numbers.current { background: oklch(0.42 0.10 155); border-color: oklch(0.42 0.10 155); color: #fbfaf6; }
.archive-pagination .page-numbers.dots, .pagination .page-numbers.dots { border: 0; min-width: 0; padding: 0 4px; color: #9aa094; }
/* When pagination follows the list, the pagination's border-top is the divider — drop
   the list's own closing border so the two don't double up. (Lists with no pagination,
   e.g. the homepage, keep their closing border.) */
.post-list:has(+ .archive-pagination) .post-row:last-child,
.post-list:has(+ .pagination) .post-row:last-child { border-bottom: 0; }


/* ── Shared page header (About / Uses / Subscribe) ── */
/* One eyebrow + title + lead treatment for all content pages, so headers are
   identical in size/weight across the site. */
.page-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #5f655e; margin-bottom: 28px; }
.page-eyebrow-dot { width: 6px; height: 6px; border-radius: 6px; background: oklch(0.42 0.10 155); }
.page-title { font-size: 44px; line-height: 1.1; font-weight: 600; color: #14171a; margin: 0 0 24px; }
.page-lead { font-size: 21px; line-height: 1.55; color: #14171a; margin: 0 0 40px; }
/* Shared top/bottom rhythm — add `page-section` to a content page's top section
   so every page starts/ends at the same offset (no per-page padding to drift). */
.page-section { padding: var(--page-pad-y) 0; }

/* ── About page ── */
.ab-facts { display: grid; grid-template-columns: 1fr 280px; gap: 64px; align-items: start; }
.ab-facts-portrait { display: block; width: 100%; height: auto; margin-bottom: 24px; border-radius: 12px; border: 1px solid #e8e4d8; }
.ab-facts-card { border: 1px solid #e8e4d8; border-radius: 12px; padding: 28px; background: #f3f1ea; position: sticky; top: 130px; }
.ab-facts-card-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #5f655e; margin-bottom: 18px; }
.ab-facts-dl { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.ab-facts-row { display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px; border-bottom: 1px solid #e8e4d8; }
.ab-facts-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-facts-dt { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #9aa094; }
.ab-facts-dd { font-size: 15px; color: #14171a; margin: 0; line-height: 1.4; }
.ab-facts-dd a { color: oklch(0.42 0.10 155); border-bottom: 1px solid oklch(0.42 0.10 155)40; }
.ab-facts-now { margin-top: 4px; padding: 10px 12px; background: oklch(0.94 0.04 155); border-radius: 8px; font-size: 13px; color: oklch(0.42 0.10 155); line-height: 1.45; }

/* ── Uses page ── */
/* Header uses the shared .page-eyebrow/.page-title/.page-lead classes; vertical
   rhythm comes from .page-section on the <section> element. */
.uses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: #e8e4d8; border: 1px solid #e8e4d8; border-radius: 12px; overflow: hidden; }
.uses-card { background: #fbfaf6; padding: 36px 32px; }
.uses-card-num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: oklch(0.42 0.10 155); letter-spacing: 0.08em; margin-bottom: 16px; }
.uses-card-title { font-size: 22px; font-weight: 600; color: #14171a; margin: 0 0 18px; line-height: 1.2; }
.uses-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.uses-item { font-size: 15px; line-height: 1.5; color: #5f655e; }
.uses-item-name { color: #14171a; font-weight: 500; }
a.uses-item-name { color: oklch(0.42 0.10 155); border-bottom: 1px solid oklch(0.42 0.10 155)40; }

/* ── Subscribe page + FAQ ── */
/* Full-width Subscribe page (left-aligned like About/Uses); the form is capped so
   the input doesn't stretch the full 1080 frame. FAQ answers self-cap at 64ch. */
.faq .section-title { display: block; margin-bottom: 4px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { display: grid; grid-template-columns: 44px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid #e8e4d8; }
.faq-num { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: #9aa094; padding-top: 4px; }
.faq-q { font-size: 21px; font-weight: 600; color: #14171a; margin: 0 0 12px; line-height: 1.3; }
/* Right margin mirrors the grid's left push (44px num column + 24px gap = 68px),
   so the answer sits balanced under the divider line. */
.faq-a { font-size: 16px; line-height: 1.65; color: #262a2c; margin: 0 68px 0 0; }
.faq-a a { color: oklch(0.42 0.10 155); border-bottom: 1px solid oklch(0.42 0.10 155)40; }


/* ── Sans optical tracking ────────────────────────────
   Per-size letter-spacing, applied per tier so `em` resolves at each element's own size; mono excluded. */
/* 13px */
.tagline, .author-chip, .nav-search, .hero-meta, .footer-brand, .footer-social a, .section-link,
.filter-banner-clear, .facet-search-input, .facet-search-btn, .facet-join, .ab-facts-now { letter-spacing: 0.006em; }
/* 14px */
.site-nav a, .article-meta, .embed, .footnotes, .newsletter-sub, .bio-line, .tag-rail a,
.filter-banner-text, .facet-chip span, .archive-pagination .page-numbers, .pagination .page-numbers { letter-spacing: 0.003em; }
/* 15–16px */
.prose dl dd, .prose table, .post-excerpt, .uses-item, .cta-link,
.callout-body p, .social-embed, .related-title, .bio-name, .archive-empty, .faq-a { letter-spacing: -0.006em; }
/* 17–19px (incl. prose body) */
.prose, .brand-name, .brand-section, .archive-sub, .error-404-msg, .hero-excerpt { letter-spacing: -0.015em; }
/* 21px */
.prose .lede, .prose h3, .page-lead, .faq-q { letter-spacing: -0.028em; }
/* 22px */
.post-title, .uses-card-title { letter-spacing: -0.032em; }
/* 26–28px */
.newsletter-title, .prose h2, .prose .pullquote { letter-spacing: -0.033em; }
/* 44–48px */
.archive-h1, .page-title, .error-404-code, .article-title { letter-spacing: -0.038em; }
/* 56px+ */
.hero-title, .prose .lede.has-dropcap::first-letter { letter-spacing: -0.04em; }
/* Monospace never wants the sans tracking (catches inline code inside tracked sans blocks). */
code, kbd, pre, samp { letter-spacing: normal; }


/* ── Responsive ───────────────────────────────────── */

/* Wide-figure breakout: only when the viewport has room for it. */
@media (min-width: 900px) {
  .prose figure.wide { margin-left: -40px; margin-right: -40px; }
  .prose figure.wide figcaption { padding: 0 40px; }
}

/* Author chip: wide screens only (below this the tagline takes the space). */
@media (max-width: 1023px) {
  .author-chip { display: none; }
}

@media (max-width: 720px) {

  .ab-facts { grid-template-columns: 1fr; gap: 40px; }

  .ab-facts-card { position: static; }

  .page-title { font-size: 36px; }

  .uses-grid { grid-template-columns: 1fr; }

  .newsletter { grid-template-columns: 1fr; gap: 28px; padding: 32px; }

  .faq-item { grid-template-columns: 1fr; gap: 8px; }
  .faq-a { margin-right: 0; } /* grid collapses to 1col — no left push to mirror */


  .wrap { padding: 0 24px; }

  .site-header-row { flex-wrap: wrap; gap: 16px; }

  /* Mobile header: brand + nav only. */
  .tagline { display: none; }
  .nav-search-form { display: none; }

  /* Mobile footer: centered stack. */
  .footer-row { flex-direction: column; text-align: center; gap: 18px; }
  .footer-social { justify-content: center; }
  .footer-brand { text-wrap: balance; }

  .article-title { font-size: 32px; }

  .newsletter { grid-template-columns: 1fr; padding: 28px; }

  .related-grid { grid-template-columns: 1fr; }

  .bio { grid-template-columns: 1fr; }

  .toc { float: none; width: auto; margin: 0 0 24px; }

  .prose figure figcaption { padding: 0 4px; }

  .hero-title { font-size: 36px; }

  .post-row, .post-row--archive.post-row--media { grid-template-columns: 1fr; gap: 8px; }

  .post-tag { justify-self: start; }

  .archive-h1 { font-size: 32px; }

  .archive-layout { grid-template-columns: 1fr; gap: 32px; }

  .tag-rail { border-right: 0; border-bottom: 1px solid #e8e4d8; padding: 0 0 20px; position: static; }

  .tag-rail ul { flex-direction: row; flex-wrap: wrap; }

}