/* Coach Denis - blog. Relies on the tokens defined in /css/base.css. */

body.blog {
  /* Blog is a deliberate light exception to the site's dark --color-bg: reuse
     the existing dark-on-light tokens (already proven on about.css/diagnostic.css)
     rather than inventing new ones. The nav band above keeps --gradient-hero,
     which paints over whatever body.blog's background is - unaffected by this.
     One variable, so list and single pages (both body.blog) can never drift apart. */
  --color-bg: #FFFFFF;
  --color-text: var(--color-text-dark);
  --color-text-muted: var(--color-text-muted-dark);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --color-accent (gold) reads fine on the dark nav band and inside the still-dark
   .a-retenir/.debunk callouts below, but is too low-contrast for body text on white -
   same reasoning as about.css/diagnostic.css, which use accent-2 for prose links. */
.blog a { color: var(--color-accent-2); text-decoration: none; }
.blog a:hover { text-decoration: underline; }

/* ---------- Nav / header band (echoes the site hero gradient + prism) ---------- */
.blog-nav {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero);
  padding: var(--s-4) var(--s-5);   /* symmetric top/bottom, matches the good bottom gap */
  text-align: center;
}
/* Same depth overlay as the home hero (::after). */
.blog-nav::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.16), transparent 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(0,0,0,0.18), transparent 55%);
}
/* Home button pinned to the top-left corner (mirror of the language toggle),
   out of the vertical flow so it does not add height to the band. Always
   present on every blog page - returns to the blog home (language-aware). */
/* .blog prefix needed so the icon color beats `.blog a { color: accent-2 }`
   (class+element specificity) - the house icon uses currentColor. */
.blog .blog-nav__home {
  position: absolute; top: var(--s-3); left: var(--s-4); z-index: 3;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  /* House icon defaults to the same tone as the border (brightens to solid
     white on hover, below). */
  color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.blog-nav__home svg { display: block; }
.blog .blog-nav__home:hover {
  background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.5);
  color: #fff; transform: translateY(-1px); text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .blog-nav__home:hover { transform: none; } }

/* Language toggle pinned to the top-right corner, out of the vertical flow
   so it does not add height to the band. */
.blog-nav__langs {
  position: absolute; top: var(--s-3); right: var(--s-4); z-index: 3;
  display: flex; gap: var(--s-2);
}
.blog-nav__langs a {
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.45); border-radius: var(--radius-full);
  padding: 2px 10px; font-size: 12px; letter-spacing: 0.04em;
}
.blog-nav__langs a:hover { background: rgba(255,255,255,0.16); color: #fff; text-decoration: none; }

/* Brand lockup: Coach [prism] Denis, centered - like the home hero. */
.blog-nav__brand {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(var(--s-2), 2vw, var(--s-4));
  font-family: var(--font-display);
  line-height: 1;
  font-size: clamp(24px, 4.5vw, 38px);
  letter-spacing: -0.03em;
}
.blog-nav__brand-soft { font-weight: 800; color: #fff; }
.blog-nav__brand-edge { font-weight: 600; font-style: italic; color: var(--color-accent); }
.blog-nav__prism {
  width: clamp(48px, 9vw, 72px); height: auto;
  filter: drop-shadow(0 8px 18px rgba(26,21,48,0.32));
  animation: blogPrismFloat 6s ease-in-out infinite;
}
@keyframes blogPrismFloat {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-6px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-nav__prism { animation: none; }
}

/* ---------- Layout ---------- */
.blog-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: var(--s-7) var(--s-5) var(--s-9); }

/* ---------- Home / list ---------- */
.blog-head { margin-bottom: var(--s-7); }
.blog-head__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 72px); line-height: var(--lh-tight); }
.blog-head__sub { margin-top: var(--s-3); color: var(--color-text-muted); max-width: 56ch; font-size: 1.05em; }

.post-list { display: flex; flex-direction: column; gap: var(--s-5); }
.post-list__empty { color: var(--color-text-muted); }

/* Month separator - lives on the dark bg, styled span (NOT a heading, to keep
   the article <h2> titles as the page's heading hierarchy). */
.post-month { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-5) 0 var(--s-1); }
.post-month span {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  color: var(--color-accent-2); font-size: 1.15em; letter-spacing: -0.01em; white-space: nowrap;
}
.post-month::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,120,67,0.35), transparent);
}

/* Cream card on the dark page - text-first (no thumbnail), gold accent edge.
   The whole card is clickable via a stretched link on the title. */
.post-card {
  position: relative; overflow: hidden;
  background: var(--color-surface); color: var(--color-text-dark);
  /* --color-surface (cream) sits close to the now-white page bg - a hairline
     border keeps the card legible without the shadow doing all the work. */
  border: 1px solid rgba(26,21,48,0.06);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
/* Brand accent bar - alternates side per card (odd: left, even: right). */
.post-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-2));
}
.post-card:nth-child(even)::before { left: auto; right: 0; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.16); }
.post-card:focus-within { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.post-card__meta {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-small); color: var(--color-text-muted-dark); letter-spacing: 0.02em;
}
.post-card__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; margin-top: 8px;
}
.post-card__title a { color: var(--color-text-dark); }
.post-card__title a:hover { color: var(--color-accent-2); text-decoration: none; }
/* Stretched link - single real anchor covers the whole card. */
.post-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.post-card__desc {
  margin-top: var(--s-3); color: var(--color-text-muted-dark); max-width: 64ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Bottom-of-list CTA. Shares the .blog-cta component with the end-of-article
   CTA (defined once, near "Post CTA" below) - same markup via cta-box.html,
   same rule, so the two can never drift apart. */

@media (prefers-reduced-motion: reduce) {
  .post-card { transition: none; }
  .post-card:hover { transform: none; }
}

/* ---------- Single post ---------- */
.post__head { margin-bottom: var(--s-6); }
.post__date { font-size: var(--fs-small); color: var(--color-text-muted); }
.post__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; margin-top: var(--s-2); }
.post__lede { margin-top: var(--s-4); font-size: 1.1em; color: var(--color-text-muted); }
.post__cover { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: var(--s-6); }

/* ---------- Animated hero: prism -> filmstrip (SVG + CSS, no JS) ---------- */
.hero-prism {
  width: 100%; aspect-ratio: 1200 / 460; margin-bottom: var(--s-6);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(60% 90% at 50% 48%, rgba(255,208,107,0.10), transparent 62%),
    linear-gradient(160deg, #171033 0%, #0F0A1E 72%);
}
.hero-prism svg { display: block; width: 100%; height: 100%; }
/* Base = finished "poster" state (also what reduced-motion users see). */
.hero-prism .beam-photon { opacity: 0; }
.hero-prism .hero-glow  { opacity: 0.5; }
.hero-prism .hero-ray   { opacity: 0.9; }
.hero-prism .hero-cell-lit { opacity: 1; }
.hero-prism .hero-caret { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero-prism .beam-photon { animation: heroPhoton 5s ease-in-out infinite; }
  .hero-prism .hero-glow  { animation: heroGlow 5s ease-in-out infinite; }
  .hero-prism .hero-ray   { animation: heroRay 5s ease-in-out infinite both; }
  .hero-prism .hero-ray.r1 { animation-delay: 0s; }
  .hero-prism .hero-ray.r2 { animation-delay: 0.1s; }
  .hero-prism .hero-ray.r3 { animation-delay: 0.2s; }
  .hero-prism .hero-cell-lit { animation: heroCell 5s ease-in-out infinite both; }
  .hero-prism .hero-cell-lit.c1 { animation-delay: 0.0s; }
  .hero-prism .hero-cell-lit.c2 { animation-delay: 0.18s; }
  .hero-prism .hero-cell-lit.c3 { animation-delay: 0.36s; }
  .hero-prism .hero-cell-lit.c4 { animation-delay: 0.54s; }
  .hero-prism .hero-caret { animation: heroCaret 1.1s steps(1) infinite; }
}
@keyframes heroPhoton {
  0%   { transform: translateX(0);     opacity: 0; }
  6%   { opacity: 1; }
  26%  { transform: translateX(198px); opacity: 1; }
  32%  { transform: translateX(206px); opacity: 0; }
  100% { transform: translateX(206px); opacity: 0; }
}
@keyframes heroGlow {
  0%, 26%, 100% { opacity: 0.16; }
  42% { opacity: 0.6; }
  60% { opacity: 0.32; }
}
@keyframes heroRay {
  0%, 22% { opacity: 0; }
  40% { opacity: 0.95; }
  85% { opacity: 0.8; }
  100% { opacity: 0; }
}
@keyframes heroCell {
  0%, 45% { opacity: 0.12; }
  70% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0.12; }
}
@keyframes heroCaret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---------- Animated hero: library -> audit gate -> "your AI" (SVG + CSS) ----------
   Skill chips stream from the library through a security-audit gate that stamps
   each safe / alert / high-risk; vetted skills dock into "your AI", lighting its
   slots. Note: the verdict badges and the "known" badge carry an SVG translate()
   transform, so we only ever animate their opacity (a CSS transform would wipe the
   translate and move them to 0,0). */
.hero-audit {
  width: 100%; aspect-ratio: 1200 / 460; margin-bottom: var(--s-6);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(58% 90% at 78% 50%, rgba(255,208,107,0.10), transparent 62%),
    linear-gradient(160deg, #171033 0%, #0F0A1E 72%);
}
.hero-audit svg { display: block; width: 100%; height: 100%; }
/* Base = finished "poster" state (also what reduced-motion users see). */
.hero-audit .sa-photon  { opacity: 0; }
.hero-audit .sa-glow    { opacity: 0.42; }
.hero-audit .sa-verdict { opacity: 0.9; }
.hero-audit .sa-slot    { opacity: 1; }
.hero-audit .sa-known   { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero-audit .sa-photon { animation: saPhoton 5s ease-in-out infinite; }
  .hero-audit .sa-scan   { animation: saScan 5s ease-in-out infinite; }
  .hero-audit .sa-glow   { animation: saGlow2 5s ease-in-out infinite; }
  .hero-audit .sa-verdict { animation: saVerdict 5s ease-in-out infinite; }
  .hero-audit .sa-verdict.v1 { animation-delay: 1.0s; }
  .hero-audit .sa-verdict.v2 { animation-delay: 1.4s; }
  .hero-audit .sa-verdict.v3 { animation-delay: 1.8s; }
  .hero-audit .sa-slot   { animation: saSlot 5s ease-in-out infinite both; }
  .hero-audit .sa-slot.s1 { animation-delay: 2.4s; }
  .hero-audit .sa-slot.s2 { animation-delay: 2.7s; }
  .hero-audit .sa-slot.s3 { animation-delay: 3.0s; }
  .hero-audit .sa-known  { animation: saKnown 5s ease-in-out infinite both; }
}
@keyframes saPhoton {
  0%   { transform: translateX(0);     opacity: 0; }
  6%   { opacity: 1; }
  22%  { transform: translateX(206px); opacity: 1; }
  30%  { transform: translateX(214px); opacity: 0; }
  100% { transform: translateX(214px); opacity: 0; }
}
@keyframes saScan {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(300px); }
}
@keyframes saGlow2 {
  0%, 40% { opacity: 0.16; }
  72%     { opacity: 0.55; }
  100%    { opacity: 0.16; }
}
@keyframes saVerdict {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 1; }
}
@keyframes saSlot {
  0%, 45% { opacity: 0.12; }
  70%     { opacity: 1; }
  92%     { opacity: 1; }
  100%    { opacity: 0.12; }
}
@keyframes saKnown {
  0%, 58% { opacity: 0; }
  74%     { opacity: 1; }
  100%    { opacity: 1; }
}

/* ---------- Animated hero: scattered docs -> knowledge graph (SVG + CSS) ----------
   A pile of documents on the left gets endlessly re-read (sweeping scan line);
   a spark travels right and the knowledge graph lights up: edges draw in, nodes
   glow, then one unexpected long-distance link joins two far clusters. The doc
   groups carry SVG translate()/rotate() transforms, so we only animate opacity
   on SVG-transformed elements (a CSS transform would wipe the SVG one). */
.hero-graph {
  width: 100%; aspect-ratio: 1200 / 460; margin-bottom: var(--s-6);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(58% 90% at 70% 50%, rgba(255,208,107,0.10), transparent 62%),
    linear-gradient(160deg, #171033 0%, #0F0A1E 72%);
}
.hero-graph svg { display: block; width: 100%; height: 100%; }
/* Base = finished "poster" state (also what reduced-motion users see). */
.hero-graph .kg-photon   { opacity: 0; }
.hero-graph .kg-glow     { opacity: 0.45; }
.hero-graph .kg-edge     { opacity: 0.8; }
.hero-graph .kg-node     { opacity: 1; }
.hero-graph .kg-link     { opacity: 1; }
.hero-graph .kg-linknode { opacity: 0.85; }

@media (prefers-reduced-motion: no-preference) {
  .hero-graph .kg-scan   { animation: kgScan 5s ease-in-out infinite; }
  .hero-graph .kg-photon { animation: kgPhoton 5s ease-in-out infinite; }
  .hero-graph .kg-glow   { animation: kgGlow 5s ease-in-out infinite; }
  .hero-graph .kg-edge   { animation: kgEdge 5s ease-in-out infinite both; }
  .hero-graph .kg-edge.e1 { animation-delay: 0.0s; }
  .hero-graph .kg-edge.e2 { animation-delay: 0.12s; }
  .hero-graph .kg-edge.e3 { animation-delay: 0.24s; }
  .hero-graph .kg-edge.e4 { animation-delay: 0.36s; }
  .hero-graph .kg-edge.e5 { animation-delay: 0.48s; }
  .hero-graph .kg-edge.e6 { animation-delay: 0.6s; }
  .hero-graph .kg-edge.e7 { animation-delay: 0.72s; }
  .hero-graph .kg-edge.e8 { animation-delay: 0.84s; }
  .hero-graph .kg-edge.e9 { animation-delay: 0.96s; }
  .hero-graph .kg-node   { animation: kgNode 5s ease-in-out infinite both; }
  .hero-graph .kg-node.n1 { animation-delay: 0.1s; }
  .hero-graph .kg-node.n2 { animation-delay: 0.2s; }
  .hero-graph .kg-node.n3 { animation-delay: 0.3s; }
  .hero-graph .kg-node.n4 { animation-delay: 0.4s; }
  .hero-graph .kg-node.n5 { animation-delay: 0.5s; }
  .hero-graph .kg-node.n6 { animation-delay: 0.6s; }
  .hero-graph .kg-node.n7 { animation-delay: 0.7s; }
  .hero-graph .kg-node.n8 { animation-delay: 0.8s; }
  .hero-graph .kg-node.n9 { animation-delay: 0.9s; }
  .hero-graph .kg-link     { animation: kgLink 5s ease-in-out infinite both; }
  .hero-graph .kg-linknode { animation: kgLinkNode 5s ease-in-out infinite both; }
}
@keyframes kgScan {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(330px); }
}
@keyframes kgPhoton {
  0%   { transform: translateX(0);     opacity: 0; }
  8%   { opacity: 1; }
  26%  { transform: translateX(134px); opacity: 1; }
  32%  { transform: translateX(142px); opacity: 0; }
  100% { transform: translateX(142px); opacity: 0; }
}
@keyframes kgGlow {
  0%, 42% { opacity: 0.15; }
  72%     { opacity: 0.55; }
  100%    { opacity: 0.15; }
}
@keyframes kgEdge {
  0%, 20% { opacity: 0.1; }
  45%     { opacity: 0.85; }
  92%     { opacity: 0.85; }
  100%    { opacity: 0.1; }
}
@keyframes kgNode {
  0%, 24% { opacity: 0.25; }
  48%     { opacity: 1; }
  94%     { opacity: 1; }
  100%    { opacity: 0.25; }
}
@keyframes kgLink {
  0%, 52% { opacity: 0; }
  68%     { opacity: 1; }
  96%     { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes kgLinkNode {
  0%, 55% { opacity: 0; }
  70%     { opacity: 0.85; }
  96%     { opacity: 0.85; }
  100%    { opacity: 0; }
}

.post__body > * + * { margin-top: var(--s-4); }
.post__body h2 { font-family: var(--font-display); font-size: var(--fs-h3); margin-top: var(--s-7); }
.post__body h3 { font-size: 1.15em; font-weight: 600; margin-top: var(--s-6); }
.post__body ul, .post__body ol { padding-left: 1.4em; }
.post__body li + li { margin-top: var(--s-2); }
.post__body blockquote {
  border-left: 3px solid var(--color-accent); padding-left: var(--s-4);
  color: var(--color-text-muted); font-style: italic;
}
.post__body code {
  font-size: 0.9em; background: rgba(26,21,48,0.06);
  padding: 2px 6px; border-radius: var(--radius-sm);
}
.post__body pre {
  background: var(--color-surface-dark); border-radius: var(--radius-md);
  padding: var(--s-4); overflow-x: auto;
  /* Fixed dark box regardless of the page's own (now light) text color. */
  color: var(--color-surface);
}
.post__body pre code { background: none; padding: 0; }
.post__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* ---------- "À retenir" callout (key-points box) ----------
   Thin header-gradient border (background-clip padding/border-box) over a
   barely-tinted dark fill. Selectors scoped under .post__body to win over the
   base article rules on specificity. */
.post__body .a-retenir {
  border: 1.5px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#1A1330, #1A1330) padding-box,
    var(--gradient-hero) border-box;
  padding: var(--s-5);
  margin: var(--s-6) 0;
  /* Fixed dark box regardless of the page's own (now light) text color -
     set explicitly so it can't inherit body.blog's --color-text. */
  color: var(--color-surface);
}
.post__body .a-retenir__eyebrow {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-surface); opacity: 0.7;
  margin: 0 0 var(--s-4);
}
.post__body .a-retenir ul {
  list-style: none; padding-left: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.post__body .a-retenir li { margin: 0; }
/* The single gold accent: the bullet labels. Bold + color = double cue (a11y). */
.post__body .a-retenir strong { color: var(--color-accent); font-weight: 700; }

/* ---------- "Debunk" callout (field-tested pushback box) ----------
   Same family as .a-retenir but deliberately hotter: solid orange border and
   accent eyebrow, so it reads as "the author talking back", not more hype. */
.post__body .debunk {
  border: 1.5px solid rgba(255,120,67,0.55);
  border-radius: 16px;
  background: #201128;
  padding: var(--s-5);
  margin: var(--s-6) 0;
  /* Fixed dark box regardless of the page's own (now light) text color -
     set explicitly so it can't inherit body.blog's --color-text. */
  color: var(--color-surface);
}
.post__body .debunk__eyebrow {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-accent);
  margin: 0 0 var(--s-4);
}
.post__body .debunk p { margin: 0; }
.post__body .debunk p + p { margin-top: var(--s-3); }
.post__body .debunk strong { color: var(--color-accent); font-weight: 700; }

/* ---------- Post share (end-of-article) ----------
   Five plain-HTML network links + copy-link / native-share buttons revealed by JS
   ([hidden] until then). Round translucent pills, same family as .blog-footer__ring. */
.post-share {
  margin-top: var(--s-7);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4);
}
.post-share__label { font-size: var(--fs-small); color: var(--color-text-muted); }
.post-share__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.post-share__list li { margin: 0; }
.blog .post-share__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  color: rgba(26,21,48,0.75);
  background: rgba(26,21,48,0.05);
  border: 1px solid rgba(26,21,48,0.14);
  cursor: pointer; font: inherit; font-size: var(--fs-small);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.blog .post-share__btn svg { display: block; flex: none; }
.blog .post-share__btn:hover,
.blog .post-share__btn:focus-visible {
  color: var(--color-accent-2); border-color: var(--color-accent-2);
  background: rgba(255,120,67,0.10); text-decoration: none;
}
/* Copy button grows a text label while in its "copied" state. */
.blog .post-share__copy.is-copied { width: auto; padding: 0 16px; color: var(--color-accent-2); border-color: var(--color-accent-2); }
.post-share__copy-txt:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .blog .post-share__btn { transition: none; } }

/* ---------- CTA box (shared component) ----------
   One component, used identically at the bottom of the post list AND after
   every article (markup lives in partials/cta-box.html). Copy on its own
   full-width line above the button; slightly reduced so the one-liner fits
   the 760px column across screen sizes. */
.blog-cta {
  margin-top: var(--s-8); padding: var(--s-5);
  background: rgba(26,21,48,0.03); border: 1px solid rgba(26,21,48,0.10);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
}
.blog-cta p { color: var(--color-text); font-size: 15px; line-height: 1.45; }
.blog .blog-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-cta); color: var(--color-text-dark);
  font-weight: 600; padding: 12px 22px; border-radius: var(--radius-full);
  white-space: nowrap;
}
.blog .blog-cta__btn:hover { background: var(--color-cta-hover); color: var(--color-text-dark); text-decoration: none; }

.post-back { margin-top: var(--s-6); }

/* ---------- Footer ----------
   Dark, to match the main site footer (.footer in home.css: --color-surface-dark
   background, muted-white text, gold brand edge). body.blog remaps
   --color-text-muted / --color-accent to their dark-on-light variants, so this
   block uses explicit white/gold values rather than those tokens. */
.blog-footer {
  background: var(--color-surface-dark);
  padding: var(--s-7) var(--s-5); text-align: center; font-size: var(--fs-small);
  color: rgba(255,255,255,0.72);
}
.blog-footer a { color: rgba(255,255,255,0.72); }
.blog-footer .blog-nav__brand-edge { color: var(--color-accent); }
/* Round "back to the main site" pill: icon ring + brand label. */
.blog-footer__home {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.72);
}
.blog-footer__home:hover { color: #fff; text-decoration: none; }
.blog-footer__ring {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--radius-full);
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.blog-footer__ring svg { display: block; }
.blog-footer__home:hover .blog-footer__ring {
  background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); transform: translateX(-2px);
}
@media (prefers-reduced-motion: reduce) { .blog-footer__home:hover .blog-footer__ring { transform: none; } }

@media (max-width: 600px) {
  .blog-main { padding-top: var(--s-6); }
  .post-card { padding: var(--s-4) var(--s-5); }
}