/* Accent text goes through the theme-aware tokens defined in
   /styles.css -- see the comment there. This file had the same
   problem: the blog kicker and the 'Triple H Enterprises Blog' link
   were brand orange on a near-white ground at 2.31:1. */
/* blog.css -- shared stylesheet for the Triple H Enterprises blog
   (blog/index.html + individual post pages).

   Deliberately extends this site's own existing brand system
   (styles.css :root tokens: --bg, --orange, Oswald/Inter) rather than
   introducing a disconnected new palette -- the brand's already
   established, so this isn't a free axis to redesign from scratch.

   One real, purposeful addition: --rust, a muted copper reserved
   specifically for diagnostic illustration linework (the exploded-
   part diagrams on each post). Keeps the bright --orange reserved for
   actual calls-to-action, so a reader's eye has one clear signal for
   "this is clickable" instead of the same color doing every job.
*/

.blog-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
}

.blog-header {
  padding: 48px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}

.blog-kicker {
  font-family:var(--font-ui);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--orange-text-vivid);
  margin-bottom: 10px;
}

.blog-kicker a {
  color: var(--orange-text-vivid);
  text-decoration: none;
}
.blog-kicker a:hover {
  text-decoration: underline;
}

.blog-title {
  font-family:var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}

.blog-dek {
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  max-width: 58ch;
}

.blog-meta {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-dim);
}

/* The signature visual device for post pages: a full-width diagnostic
   illustration rendered directly as inline SVG (no external image
   files, no stock photography -- see the file-level comment on why).
   Reserved for exactly one appearance near the top of a post; this is
   the "spend your boldness in one place" element, not a decoration
   repeated throughout. */
.blog-diagram {
  width: 100%;
  height: auto;
  margin: 8px 0 40px;
  border-radius: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.blog-article {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
}

.blog-article p {
  margin: 0 0 24px;
  max-width: 62ch;
}

/* Lead paragraph (2026-09-06). The opening paragraph is set one step up the
   scale, which is the whole reason the body face is Newsreader: it carries a
   real optical-size axis, so at 20px the letterforms are actually redrawn --
   slightly narrower, with finer joins and tighter spacing -- rather than being
   the 17px drawing scaled up. Setting font-optical-sizing explicitly rather
   than relying on the default, since the point here is the axis doing work.
   Purely typographic, so it needs no markup change and degrades to a slightly
   larger first paragraph on anything that lacks the axis. */
.blog-article > p:first-of-type {
  font-size: 20px;
  line-height: 1.6;
  font-optical-sizing: auto;
  color: var(--white);
  max-width: 56ch;
  margin-bottom: 30px;
}

.blog-article h2 {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 24px;
  color: var(--white);
  margin: 44px 0 18px;
  letter-spacing: -0.005em;
}

.blog-article ul, .blog-article ol {
  margin: 0 0 24px;
  padding-left: 22px;
  max-width: 62ch;
}
.blog-article li {
  margin-bottom: 8px;
}

.blog-article strong {
  color: var(--white);
  font-weight: 600;
}

/* The recurring "here's the actual fix" callout -- a real structural
   device tied to what this content actually is (a diagnosis followed
   by a specific fix), not decorative card-ification. Left border in
   the illustration rust tone, not the CTA orange, so it doesn't
   compete visually with the one place orange is actually clickable. */
.fix-callout {
  border-left: 3px solid #b8562f;
  background: var(--bg-panel);
  padding: 20px 24px;
  margin: 32px 0;
  border-radius: 0 8px 8px 0;
}
.fix-callout .fix-label {
  font-family:var(--font-ui);
  font-weight: 600;
  color: var(--white);
  font-size: 15px;
  margin-bottom: 8px;
}
.fix-callout p {
  margin: 0;
  font-size: 16px;
  color: var(--text-dim);
}
.fix-callout .part-number {
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: var(--orange-text);
  font-size: 15px;
}

.blog-cta {
  margin: 56px 0 40px;
  padding: 32px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}
.blog-cta p {
  max-width: none;
  margin: 0 0 18px;
  color: var(--text);
  font-size: 17px;
}
.blog-cta .btn {
  display: inline-flex;
}

.blog-related {
  margin: 48px 0 60px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.blog-related-title {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  color: var(--white);
  margin: 0 0 20px;
}
.blog-related-list a {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.blog-related-list a:last-child { border-bottom: none; }
.blog-related-list a:hover { color: var(--orange-text); }

/* Index page (2026-09-07): a card treatment reusing the exact hover-lift
   and icon-badge vocabulary already established by index.html's own
   .service-card/.service-icon -- same lift distance, border/shadow
   change, and icon-badge sizing/tint, rather than a new visual
   language just for this list. Each icon is one already used
   elsewhere on the site for that same subject (the appliance icon for
   the two appliance posts, the handyman icon for the general-repairs
   post), not a new icon invented for the blog. */
.blog-index-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}
.blog-index-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px 24px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 3px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.blog-index-item:hover, .blog-index-item:focus-visible {
  transform: translateY(-4px);
  border-color: var(--blue-text);
  box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}
.blog-index-item-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(58,160,255,0.28);
  color: var(--blue-text);
}
.blog-index-item-icon svg { width: 22px; height: 22px; }
.blog-index-item-title {
  font-family:var(--font-ui);
  font-weight: 600;
  font-size: 22px;
  color: var(--white);
  margin: 0 0 8px;
  line-height: 1.25;
}
.blog-index-item:hover .blog-index-item-title, .blog-index-item:focus-visible .blog-index-item-title {
  color: var(--orange-text);
}
.blog-index-item-dek {
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 58ch;
}
.blog-index-item-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--blue-text);
}
.blog-index-item-tag svg { width: 12px; height: 12px; }

/* Staggered reveal (reuses the site-wide [data-reveal]/.is-visible
   mechanism already wired in site-motion.js -- no new observer). */
html.reveal-ready .blog-index-list [data-reveal]:nth-child(2) { transition-delay: .08s; }
html.reveal-ready .blog-index-list [data-reveal]:nth-child(3) { transition-delay: .16s; }

@media (max-width: 480px) {
  .blog-index-item { flex-direction: column; gap: 14px; }
}

@media (max-width: 640px) {
  .blog-title { font-size: 28px; }
  .blog-article { font-size: 16px; }
}