/* ─────────────────────────────────────────────────
   Blog article — Direction B: Print / Broadsheet
   Overrides on top of legal.css
   ───────────────────────────────────────────────── */

/* ── Light reading mode ─────────────────────────── */
/* body gets light bg; nav/footer stay dark because  */
/* they read --bg from body (still #0a0908).          */
/* Only <main> gets the variable overrides.           */

body.blog-light {
  background: #f9f6f1;
}
body.blog-light::before,
body.blog-light::after { display: none; }

body.blog-light main {
  --bg:         #f9f6f1;
  --bg-2:       #eee8e0;
  --bg-3:       #e4dbd1;
  --bg-card:    #f4efe8;
  --ink:        #1c1714;
  --ink-soft:   #3d3028;
  --ink-dim:    #6a5b52;
  --ink-faint:  #a09088;
  --line:        rgba(28,23,20,0.10);
  --line-strong: rgba(28,23,20,0.18);
  --line-bright: rgba(28,23,20,0.32);
  background: #f9f6f1;
  color: var(--ink);
}

/* Decision box titles need darker shades on light bg */
body.blog-light .decision-box--green  .decision-box-title { color: #15803d; }
body.blog-light .decision-box--blue   .decision-box-title { color: #1d4ed8; }
body.blog-light .decision-box--purple .decision-box-title { color: #7c3aed; }
body.blog-light .decision-box--yellow .decision-box-title { color: #92400e; }

/* ── Article meta row ── */
.article-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 32px;
}
.article-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-dim);
}
.article-meta-sep {
  color: var(--ink-faint);
  font-size: 10px;
  margin: 0 2px;
}

/* ── Intro paragraph ── */
.article-intro-body {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: 16px;
  max-width: 720px;
  text-wrap: pretty;
}

/* ── Links inside intro paragraph ── */
.article-intro-body a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: all 0.2s;
}
.article-intro-body a:hover {
  color: var(--accent-hot);
  border-bottom-color: var(--accent);
}

/* ── Bias disclosure — left rule, no fill ── */
.bias-note {
  margin-top: 20px;
  padding: 12px 18px;
  background: none;
  border: none;
  border-left: 2px solid var(--ink-faint);
  border-radius: 0;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.65;
  font-style: italic;
}
.bias-note strong {
  color: var(--ink-soft);
  font-style: normal;
  font-weight: 700;
}

/* ── Warm aside note — hairline border, no fill ── */
.article-note {
  margin-top: 14px;
  padding: 14px 18px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.article-note .note-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  font-weight: 600;
  margin-bottom: 6px;
}

/* ── Callout (from legal.css) — override to print style ── */
.prose .callout {
  background: none;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: 0;
  padding: 18px 20px;
}
.prose .callout .tag {
  color: var(--ink-dim);
}

/* ── Pull quote / blockquote ── */
.prose blockquote {
  margin: 32px 0;
  padding: 20px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.prose blockquote p { margin: 0; }

/* ── Tables — no rounded wrapper ── */
.table-wrap {
  margin-top: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  overflow-x: auto;
}
.table-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  font-weight: 600;
  padding: 10px 16px;
  background: none;
  border-bottom: 1px solid var(--line-strong);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.prose thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  font-weight: 600;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  background: none;
  white-space: nowrap;
}
.prose tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.prose tbody tr:last-child { border-bottom: none; }
.prose tbody tr:hover { background: rgba(255,243,234,0.02); }
.prose tbody td {
  padding: 11px 16px;
  color: var(--ink-soft);
  line-height: 1.5;
  vertical-align: top;
}
.prose tbody td:first-child { color: var(--ink); font-weight: 500; }
.prose tfoot tr { border-top: 1px solid var(--line-strong); }
.prose tfoot td {
  padding: 11px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.prose tfoot td:first-child { color: var(--ink-soft); font-weight: 600; }

/* ── Decision Tree — flat typographic rows ── */
.decision-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
}
.decision-box {
  padding: 22px 0;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  border-left: none;
  border-radius: 0;
}
.decision-box:last-child {
  border-bottom: 1px solid var(--line);
}
.decision-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.decision-box-emoji { display: none; }
.decision-box-badge { display: none; }
.decision-box-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 1;
}
.decision-box ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none !important;
  padding-left: 0 !important;
  margin-top: 0 !important;
}
.decision-box ul li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 0 !important;
}
.decision-box ul li::before {
  display: none !important;
}
.decision-box ul li strong { color: var(--ink); font-weight: 600; }

.decision-box--green  .decision-box-title { color: var(--green); }
.decision-box--blue   .decision-box-title { color: #60a5fa; }
.decision-box--purple .decision-box-title { color: #c084fc; }
.decision-box--yellow .decision-box-title { color: var(--warm); }

/* ── Summary box ── */
.summary-box {
  margin-top: 24px;
  padding: 22px 24px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  border-top: 2px solid var(--accent);
}
.summary-box ul {
  list-style: none;
  padding-left: 0 !important;
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.summary-box ul li {
  padding-left: 0 !important;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  display: flex;
  gap: 12px;
}
.summary-box ul li::before { display: none !important; }
.summary-box ul li .sb-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 16px;
}
.summary-box ul li strong { color: var(--ink); }

/* ── FAQ section ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
}
.faq-item {
  border-top: 1px solid var(--line);
  padding: 20px 0;
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.faq-a {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ── Article CTA ── */
.article-cta {
  margin-top: 48px;
  padding: 28px 0 32px;
  background: none;
  border: none;
  border-top: 2px solid var(--accent);
  position: relative;
  overflow: visible;
}
.article-cta::before { display: none; }
.article-cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.article-cta h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--ink);
  margin-top: 0;
}
.article-cta p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 20px;
  margin-top: 0;
}
.article-cta .article-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #0a0908;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: none;
  transition: all 0.2s;
}
.article-cta .article-cta-btn:hover {
  background: var(--accent-hot);
  color: #0a0908;
  border-bottom: none;
  transform: translateY(-2px);
}
.article-cta .article-cta-btn svg { width: 14px; height: 14px; transition: transform 0.2s; }
.article-cta .article-cta-btn:hover svg { transform: translateX(3px); }
.article-cta .article-cta-closing {
  margin-top: 20px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--ink-dim);
  font-style: italic;
}

/* ── Author signature ── */
.author-sig {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
}
.author-sig-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
}
.author-sig-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.author-sig-written {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.author-sig-name {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.author-sig-role { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }

@media (max-width: 820px) {
  .article-intro-body { font-size: 16px; }
  .table-wrap {
    margin-left: -20px; margin-right: -20px;
    border-left: none; border-right: none;
  }
  .prose blockquote { font-size: 18px; }
}

/* ── WCAG AA contrast fixes for blog-light (cream bg #f9f6f1) ──────────────
   --accent #ff6b3a has only 2.6:1 on cream — need ≥4.5:1 for normal text.
   Darkened to #b84000 (5.2:1). --warm #f5c17a has 1.5:1 — darkened to #7a5200 (6.4:1). */
body.blog-light .page-eyebrow                  { color: #b84000; }
body.blog-light h1 em                          { color: #b84000; }
body.blog-light .article-cta-label             { color: #b84000; }
body.blog-light .prose a,
body.blog-light .prose a:hover                 { color: #b84000; border-bottom-color: rgba(184,64,0,0.4); }
body.blog-light .article-intro-body a          { color: #b84000; border-bottom-color: rgba(184,64,0,0.4); }
body.blog-light .article-intro-body a:hover    { color: #9c3200; border-bottom-color: #b84000; }
body.blog-light .prose em                      { color: #7a5200; }

/* article-cta-btn uses background:var(--accent) — exclude it from the .prose a override */
body.blog-light .prose .article-cta-btn,
body.blog-light .prose .article-cta-btn:hover  { color: #0a0908; border-bottom: none; }

/* summary-box markers */
body.blog-light .summary-box .sb-marker       { color: #b84000; }

/* table tfoot accent cells */
body.blog-light .prose tfoot td               { color: #b84000; }
body.blog-light .prose tfoot td:first-child   { color: var(--ink-soft); }

/* author sig — --ink-faint (#a09088) is only 2.84:1 on cream */
body.blog-light .author-sig-written           { color: #6a5b52; }

/* blog index — accent/warm/faint on cream */
body.blog-light .blog-header-eyebrow          { color: #b84000; }
body.blog-light .featured-label               { color: #8b3000; }
body.blog-light .card-cat-text                { color: #b84000; }
body.blog-light .featured-cta                 { color: #b84000; }
body.blog-light .blog-count                   { color: #6a5b52; }
body.blog-light .card-meta                    { color: #6a5b52; }

/* ── Skip link ── */
.skip-link{position:absolute;top:-100px;left:16px;padding:8px 16px;background:var(--accent);color:#0a0908;font-size:14px;font-weight:700;border-radius:0 0 8px 8px;z-index:9999;text-decoration:none;transition:top 0.15s}
.skip-link:focus{top:0}

/* ── Blog mobile nav (CSS-only checkbox toggle) ── */
.blog-nav-toggle{display:none}
.blog-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:1px solid var(--line-strong);border-radius:8px;cursor:pointer;padding:10px;flex-shrink:0}
.blog-hamburger span{display:block;height:2px;background:var(--ink-soft);border-radius:2px;transition:transform 0.25s,opacity 0.25s}
.blog-mobile-menu{position:fixed;inset:0;z-index:10000;background:rgba(10,9,8,0.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);visibility:hidden;pointer-events:none;opacity:0;transition:opacity 0.25s,visibility 0.25s;padding:20px 24px;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.blog-nav-toggle:checked ~ .blog-mobile-menu{visibility:visible;pointer-events:auto;opacity:1}
.blog-nav-toggle:checked ~ aside .wa-btn,.blog-nav-toggle:checked ~ #ck{opacity:0;pointer-events:none}
html.blog-menu-open,html.blog-menu-open body{overflow:hidden}
.blog-mm-top{display:flex;justify-content:flex-end;margin-bottom:32px}
.blog-mm-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--line-strong);cursor:pointer;color:var(--ink-soft)}
.blog-mm-close svg{width:20px;height:20px}
.blog-mm-links{display:flex;flex-direction:column}
.blog-mm-link{font-size:22px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-0.02em;padding:14px 0;border-bottom:1px solid var(--line);transition:color 0.2s}
.blog-mm-link:last-child{border-bottom:none}
.blog-mm-link:hover,.blog-mm-link:focus{color:var(--accent);outline:none}
.blog-mm-cta{margin-top:28px}
.blog-mm-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#0a0908;padding:14px 24px;border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;transition:background 0.2s}
.blog-mm-cta a:hover{background:var(--accent-hot)}
@media(max-width:720px){
  .blog-hamburger{display:flex}
  .blog-nav-toggle:checked ~ * .blog-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .blog-nav-toggle:checked ~ * .blog-hamburger span:nth-child(2){opacity:0;transform:scaleX(0)}
  .blog-nav-toggle:checked ~ * .blog-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}