/* ============================================================
   Koinos Financial — Blog stylesheet
   Ports the main site's design tokens, nav, footer, buttons, and
   modal system verbatim (see services.html) so the blog is
   visually indistinguishable from the rest of koinosfinancial.com,
   then adds article typography, post-card, tag, and search styles.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
[id] { scroll-margin-top: 96px; }
body { overflow-x: hidden; width: 100%; max-width: 100%; font-family: 'Newsreader', Georgia, serif; font-size: 17px; line-height: 1.75; color: #161310; background: #FAF8F1; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { word-wrap: break-word; overflow-wrap: break-word; }
:root { --paper:#FAF8F1; --paper2:#F1EDE0; --ink:#161310; --ink2:#3D3630; --muted:#6B6257; --rule:#D8D0C0; --green:#2D4634; --green2:#1F3326; }
/* Muted, brand-consistent accent per topic tag. New topics not listed here
   simply fall back to --muted (see .post-card-tag below) rather than
   breaking, so a new CMS tag never needs a matching CSS rule to look right. */
:root { --tag-welcome:#2D4634; --tag-education:#4A6D7C; --tag-insurance:#8B5A44; --tag-retirement:#96702E; }
p { margin: 0; }
h1,h2,h3,h4 { font-family: 'Newsreader', Georgia, serif; font-weight: 600; line-height: 1.1; color: #161310; letter-spacing: -0.02em; }
a { color: #2D4634; text-decoration: underline; text-underline-offset: 3px; transition: opacity .15s; }
a:hover { opacity: 0.7; }
*:focus-visible { outline: 2px solid #2D4634; outline-offset: 3px; }

/* Layout */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 min(40px, 4vw); width: 100%; box-sizing: border-box; }
.section { padding: 44px 0; border-top: 1px solid var(--rule); width: 100%; box-sizing: border-box; }
.section-label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 12px; }
.section-title { font-size: clamp(22px, 3.2vw, 38px); margin-bottom: 16px; }
.section-deck { font-size: 17px; line-height: 1.75; color: var(--ink2); max-width: min(660px, 100%); margin-bottom: 40px; }

/* Wordmark */
.kf-mark { display: inline-flex; align-items: flex-start; text-decoration: none; line-height: 1; }
.kf-mark:hover { opacity: 0.78; }
.kf-wordmark-img { display: block; height: 68px; width: auto; }
.kf-nav .kf-wordmark-img { height: 68px; }
.kf-foot .kf-wordmark-img { height: 52px; }
@media (max-width: 560px) { .kf-nav .kf-wordmark-img { height: 46px; } }

/* Buttons */
.btn { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; padding: 15px 32px; display: inline-block; text-decoration: none; border-radius: 0; border: none; cursor: pointer; white-space: nowrap; text-align: center; transition: opacity .15s; box-shadow: 0 1px 3px rgba(22,19,16,0.18); }
.btn-green { background: #2D4634; color: #FAF8F1; }
.btn-green:hover { opacity: 0.85; color: #FAF8F1; }
.btn-outline { background: transparent; color: #161310; border: 1.5px solid #161310; padding: 13.5px 30.5px; }
.btn-outline:hover { opacity: 0.6; color: #161310; }
.btn-paper { background: var(--paper); color: #2D4634; }
.btn-paper:hover { opacity: 0.85; color: #2D4634; }
.btn-paper-outline { background: transparent; color: var(--paper); border: 1.5px solid rgba(250,248,241,0.4); padding: 13.5px 30.5px; }
.btn-paper-outline:hover { opacity: 0.7; color: var(--paper); }

/* Nav */
.site-nav { position: sticky; top: 0; z-index: 100; background: rgba(250,248,241,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.nav-wrap { max-width: 1100px; margin: 0 auto; padding: 0 min(40px,4vw); height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; box-sizing: border-box; }
.nav-back { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; }
.nav-back:hover { color: var(--green); opacity: 1; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.nav-links a:hover { color: var(--green); opacity: 1; }
.nav-links a[aria-current="true"] { color: var(--green); font-weight: 600; }
.nav-cta { border: none; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; background: var(--green); color: var(--paper); padding: 11px 20px; text-decoration: none; white-space: nowrap; transition: opacity .15s; flex-shrink: 0; box-shadow: 0 1px 3px rgba(22,19,16,0.18); }
.nav-cta:hover { opacity: 0.75; color: var(--paper); }
.nav-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.nav-cta-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 1px 3px rgba(22,19,16,0.18); }
.nav-cta-secondary:hover { color: var(--ink); opacity: 0.7; }
@media (max-width: 900px) { .nav-cta-secondary { display: none; } }
@media (max-width: 560px) { .nav-cta-primary { font-size: 12px; padding: 8px 12px; } }

/* hamburger (mobile nav drawer, ported from about.html) */
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; }
.nav-hamburger span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.nav-drawer { display: none; background: var(--paper); border-bottom: 1px solid var(--rule); }
.nav-drawer.open { display: block; }
.nav-drawer a { display: block; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--ink2); text-decoration: none; padding: 14px 40px; border-bottom: 1px solid var(--rule); }
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover { color: var(--green); opacity: 1; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-drawer a { padding: 14px 28px; }
}

/* Page hero */
.page-hero { padding: 52px 0 44px; border-bottom: 1px solid var(--rule); }
.page-label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(28px, 4.5vw, 52px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.05; max-width: min(760px, 100%); margin-bottom: 20px; }
.page-hero .standfirst { font-size: 18px; line-height: 1.75; color: var(--ink2); max-width: min(580px, 100%); margin-bottom: 18px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-byline-name { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--ink); }
.hero-byline-role { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; color: var(--muted); }
.hero-byline-dash { color: var(--rule); }
/* Matches the actual photo's ratio (900x645) exactly, not a generic 4:3 —
   a box narrower than the source image's real ratio makes object-fit:
   cover slice off the sides to fill it, which is what was happening
   before even though the source file itself was never cropped. */
.hero-photo { display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); box-shadow: 0 14px 32px rgba(22,19,16,0.14); aspect-ratio: 900 / 645; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; max-width: 320px; margin: 0 auto 8px; }
}

/* CTA band */
.cta-band { background: #2D4634; padding: clamp(56px, 7vw, 88px) 0; }
.cta-inner { max-width: 1100px; margin: 0 auto; padding: 0 min(40px,4vw); display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(200px, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; width: 100%; box-sizing: border-box; }
.cta-band h2 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -0.022em; color: var(--paper); margin-bottom: 16px; }
.cta-body { font-size: 17px; line-height: 1.75; color: rgba(250,248,241,0.78); margin-bottom: 14px; }
.cta-aside { font-family: 'Newsreader', Georgia, serif; font-size: 17px; font-style: italic; color: rgba(250,248,241,0.62); margin-bottom: 10px; }
.cta-btns { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(260px, 100%); }
.cta-btns .btn { width: 100%; white-space: nowrap; text-align: center; }
.cta-faq { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; color: rgba(250,248,241,0.62); margin-top: 4px; }
.cta-faq a { color: rgba(250,248,241,0.72); text-underline-offset: 3px; }

/* Footer */
footer.site-foot { background: #161310; padding: 56px 0 40px; }
.foot-grid { max-width: 1100px; margin: 0 auto; padding: 0 min(40px,4vw) 40px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr); gap: clamp(24px,3vw,48px); border-bottom: 1px solid rgba(250,248,241,0.1); margin-bottom: 28px; width: 100%; box-sizing: border-box; }
.foot-loc { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: rgba(250,248,241,0.52); display: block; margin-top: 16px; margin-bottom: 10px; }
.foot-desc { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.8; color: rgba(250,248,241,0.52); }
.foot-col-label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: rgba(250,248,241,0.55); text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 20px; }
.foot-links { list-style: none; }
.foot-links li { margin-bottom: 12px; }
.foot-links a { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; color: rgba(250,248,241,0.60); text-decoration: none; }
.foot-links a:hover { color: rgba(250,248,241,1); opacity: 1; }
.foot-contact { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1; }
.foot-contact a, .foot-contact button { background: none; border: none; padding: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; color: rgba(250,248,241,0.60); text-decoration: none; display: block; margin-bottom: 14px; }
.foot-contact a:hover, .foot-contact button:hover { color: rgba(250,248,241,1); opacity: 1; }
.foot-contact span { display: block; color: rgba(250,248,241,0.52); margin-bottom: 14px; }
.foot-social { display: flex; gap: 10px; margin-top: 4px; }
.foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(250,248,241,0.08); color: rgba(250,248,241,0.60); transition: background .15s, color .15s; }
.foot-social a:hover { background: rgba(250,248,241,0.16); color: rgba(250,248,241,1); opacity: 1; }
.foot-social svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.foot-bottom { max-width: 1100px; margin: 0 auto; padding: 0 min(40px,4vw); width: 100%; box-sizing: border-box; }
.foot-legal { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.8; color: rgba(250,248,241,0.50); max-width: 100%; margin-bottom: 20px; }
.foot-copy { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: rgba(250,248,241,0.48); }

/* Modals (contact + booking share the main site's system) */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(22,19,16,0.7); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.active { display: flex; }
.modal-box { background: var(--paper); max-width: 540px; width: 100%; padding: 40px; position: relative; max-height: 90vh; overflow-y: auto; }
.modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--muted); line-height: 1; padding: 4px 8px; z-index: 10; }
.modal-close:hover { color: var(--ink); }
.modal-title { font-family: 'Newsreader', Georgia, serif; font-size: clamp(20px, 3vw, 26px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; }
.modal-deck { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; color: var(--muted); margin-bottom: 28px; line-height: 1.6; }
.modal-field { margin-bottom: 20px; }
.modal-field label { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink2); display: block; margin-bottom: 6px; }
.modal-field input, .modal-field textarea { width: 100%; font-family: 'Newsreader', Georgia, serif; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 10px 14px; border-radius: 0; outline: none; transition: border-color .15s; -webkit-appearance: none; box-sizing: border-box; }
.modal-field input:focus, .modal-field textarea:focus { border-color: var(--green); }
.modal-field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.modal-radio-group { display: flex; gap: 24px; margin-top: 4px; }
.modal-radio-option { display: flex; align-items: center; gap: 8px; font-family: 'Newsreader', Georgia, serif; font-size: 16px; line-height: 18px; color: var(--ink); cursor: pointer; position: relative; }
.modal-radio-option input[type="radio"] { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.modal-radio-dot { display: inline-block; width: 18px; height: 18px; border: 1.5px solid var(--rule); border-radius: 50%; flex-shrink: 0; position: relative; box-sizing: border-box; transition: border-color .15s; }
.modal-radio-option input[type="radio"]:checked + .modal-radio-dot { border-color: var(--green); }
.modal-radio-option input[type="radio"]:checked + .modal-radio-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.modal-radio-option input[type="radio"]:focus-visible + .modal-radio-dot { outline: 2px solid var(--green); outline-offset: 2px; }
.modal-submit { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; background: var(--green); color: var(--paper); border: none; padding: 14px 28px; cursor: pointer; width: 100%; transition: opacity .15s; }
.modal-submit:hover { opacity: 0.85; }
.modal-success { display: none; text-align: center; padding: 20px 0; }
.modal-success p { font-size: 17px; line-height: 1.75; color: var(--ink2); }
.modal-success strong { color: var(--ink); }
@media (max-width: 560px) { .modal-box { padding: 28px 20px; } .modal-box.modal-wide { height: 85vh; } }

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

/* Responsive (shared) */
@media (max-width: 900px) {
  .section { padding: 36px 0; }
  .page-hero { padding: 40px 0 32px; }
  .cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .cta-btns { flex-direction: row; flex-wrap: wrap; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .section { padding: 28px 0; }
  .cta-band h2 { font-size: 24px; }
  .cta-btns { flex-direction: column; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-grid > *:first-child { grid-column: 1; }
}

/* ============================================================
   Blog-specific: index/listing, search, tags, article body
   ============================================================ */

/* Search + tag filter bar */
.blog-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.blog-search { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.blog-search input { width: 100%; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); padding: 11px 14px 11px 38px; outline: none; transition: border-color .15s; box-sizing: border-box; }
.blog-search input:focus { border-color: var(--green); }
.blog-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-tag-btn { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: var(--ink2); background: var(--paper2); border: 1px solid var(--rule); padding: 7px 14px; cursor: pointer; transition: all .15s; text-decoration: none; display: inline-block; }
.blog-tag-btn:hover { opacity: 1; border-color: var(--green); color: var(--green); }
.blog-tag-btn.active { background: var(--green); border-color: var(--green); color: var(--paper); }
.blog-empty { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; color: var(--muted); padding: 40px 0; display: none; }
.blog-empty.visible { display: block; }

/* Post list / cards */
.post-list { display: flex; flex-direction: column; }
.post-card {
  position: relative;
  padding: 30px 24px 30px 22px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 32px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  transition: background-color .18s ease;
}
.post-list .post-card:last-child { border-bottom: 1px solid var(--rule); }
.post-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tag-welcome);
  opacity: 0;
  transition: opacity .18s ease;
}
.post-card[data-accent="education"]::before { background: var(--tag-education); }
.post-card[data-accent="insurance"]::before { background: var(--tag-insurance); }
.post-card[data-accent="retirement"]::before { background: var(--tag-retirement); }
.post-card:hover { background: var(--paper2); }
.post-card:hover::before { opacity: 1; }
.post-card-meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); padding-top: 5px; display: flex; flex-direction: column; gap: 6px; }
.post-card-title { font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; line-height: 1.3; color: var(--ink); display: flex; align-items: baseline; gap: 10px; }
.post-card-arrow { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 17px; color: var(--green); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.post-card:hover .post-card-title { color: var(--green); }
.post-card:hover .post-card-arrow { opacity: 1; transform: translateX(0); }
.post-card-excerpt { font-size: 16px; line-height: 1.7; color: var(--ink2); margin-bottom: 14px; }
.post-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post-card-tag { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.post-card-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.post-card-tag[data-tag="welcome"] { color: var(--tag-welcome); }
.post-card-tag[data-tag="education"] { color: var(--tag-education); }
.post-card-tag[data-tag="insurance"] { color: var(--tag-insurance); }
.post-card-tag[data-tag="retirement"] { color: var(--tag-retirement); }
.post-card-featured { background: var(--paper2); padding-left: 22px; }
.post-card-featured::before { opacity: 1; }
.post-card-featured-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--green); border: 1px solid var(--green); padding: 4px 9px 4px 7px; margin-bottom: 12px; }
.post-card-featured-badge svg { width: 11px; height: 11px; }
@media (max-width: 640px) {
  .post-card { grid-template-columns: 1fr; gap: 8px; padding: 24px 18px; }
  .post-card-meta { flex-direction: row; flex-wrap: wrap; }
}

/* Article (single post) */
.post-header { padding: 44px 0 32px; border-bottom: 1px solid var(--rule); }
.post-title { font-size: clamp(28px, 4.2vw, 46px); font-weight: 600; letter-spacing: -0.026em; line-height: 1.08; max-width: min(760px, 100%); margin-bottom: 18px; }
.post-meta { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 14px; }
.post-meta a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.post-meta a:hover { color: var(--green); opacity: 1; }
.post-header-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.post-featured-image { width: 100%; max-width: 720px; height: auto; display: block; border: 1px solid var(--rule); margin: 36px 0 0; }
.post-body { max-width: 720px; font-size: 18px; line-height: 1.8; color: var(--ink2); padding: 40px 0; }
.post-body > * + * { margin-top: 24px; }
.post-body h2 { font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); margin-top: 44px; margin-bottom: 4px; }
.post-body h3 { font-size: 20px; color: var(--ink); margin-top: 36px; margin-bottom: 4px; }
/* Only zeroes the browser's default bottom margin — margin-top is left
   alone on purpose so ".post-body > * + *" above can actually apply it.
   ("margin: 0" here previously zeroed top too, and beat that rule on
   specificity every time, which is why paragraphs had no visible break
   between them regardless of how many blank lines were in the source.) */
.post-body p { margin-bottom: 0; }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body a { color: var(--green); }
.post-body ul, .post-body ol { padding-left: 22px; }
.post-body li + li { margin-top: 8px; }
.post-body blockquote { border-left: 3px solid var(--green); padding: 4px 0 4px 20px; font-style: italic; color: var(--green2); }
.post-body code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; background: var(--paper2); padding: 2px 6px; }
.post-body pre { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; background: var(--paper2); padding: 16px 20px; overflow-x: auto; }
.post-body pre code { background: none; padding: 0; }
.post-body img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); }
.post-body hr { border: none; border-top: 1px solid var(--rule); margin: 8px 0; }
.glossary-term { position: relative; border-bottom: 1px dotted var(--green); cursor: help; }
.glossary-tip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  z-index: 20;
  width: max-content;
  max-width: min(280px, 78vw);
  margin-bottom: 10px;
  padding: 10px 14px;
  transform: translate(-50%, 4px);
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease;
}
.glossary-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
}
.glossary-term:hover .glossary-tip,
.glossary-term:focus .glossary-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 480px) {
  .glossary-tip { left: 0; transform: translate(0, 4px); }
  .glossary-tip::after { left: 20px; transform: none; }
  .glossary-term:hover .glossary-tip,
  .glossary-term:focus .glossary-tip { transform: translate(0, 0); }
}
.post-cta { max-width: 720px; padding: 8px 0 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.post-footer { padding: 32px 0 44px; border-top: 1px solid var(--rule); }
.post-back { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; }
.post-back:hover { color: var(--green); opacity: 1; }

/* Tag page */
.tag-hero-label { color: var(--green); }