/* ============================================================
   Certificate Forensics — scoped blog-post theme ("forensic case-file")
   Everything lives under .cert-forensics so it cannot touch site chrome.
   Loaded once via <link> in the post body; shared by all 4 parts + all languages.
   Dark theme with amber accent; a detective-file metaphor for a TLS/cert
   debugging saga. Fonts: system-ui + system mono only — no CDN, no remote imports.
   ============================================================ */
.cert-forensics {
  --cf-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --cf-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cf-bg:        #0e1116;
  --cf-bg-card:   #161b22;
  --cf-bg-err:    rgba(255, 107, 107, 0.08);
  --cf-bg-fix:    rgba(63, 185, 80, 0.08);
  --cf-bg-code:   rgba(139, 148, 158, 0.10);
  --cf-text:      #e6edf3;
  --cf-muted:     #8b949e;
  --cf-border:    #30363d;
  --cf-red:         #ff6b6b;
  --cf-green:       #3fb950;
  --cf-green-light: #7ee787;
  --cf-amber:       #e3b341;

  /* full-bleed: break out of narrow .post-body / .wrap column */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid var(--cf-border);
  border-bottom: 1px solid var(--cf-border);
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: var(--cf-sans);
  font-size: 18px;
  line-height: 1.65;
  isolation: isolate;
}

.cert-forensics * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cert-forensics a {
  color: var(--cf-amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 179, 65, 0.35);
}
.cert-forensics a:hover {
  border-bottom-color: var(--cf-amber);
}

/* ── Wrapper ───────────────────────────────────────────────── */
.cert-forensics .cf-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Hero ──────────────────────────────────────────────────── */
.cert-forensics .cf-hero {
  width: 100%;
  background: linear-gradient(180deg, #0b0e13 0%, var(--cf-bg) 100%);
  border-bottom: 1px solid var(--cf-border);
  padding: 72px 28px 52px;
  text-align: center;
}

.cert-forensics .cf-eyebrow {
  font-family: var(--cf-mono);
  font-size: 0.70rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cf-amber);
  margin-bottom: 20px;
  display: block;
}

.cert-forensics .cf-h1 {
  font-family: var(--cf-sans);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cf-text);
  max-width: 22ch;
  margin: 0 auto;
}

.cert-forensics .cf-sub {
  font-size: 1.05rem;
  color: var(--cf-muted);
  margin-top: 18px;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}

.cert-forensics .cf-byline {
  font-family: var(--cf-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--cf-muted);
  margin-top: 20px;
  opacity: 0.85;
}

/* error-banner motif in hero */
.cert-forensics .cf-blackbox {
  font-family: var(--cf-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.30);
  border-left: 3px solid var(--cf-red);
  border-radius: 4px;
  padding: 16px 20px;
  color: var(--cf-red);
  white-space: pre;
  overflow-x: auto;
  text-align: left;
  max-width: 620px;
  margin: 34px auto 0;
}

/* ── Content sections ──────────────────────────────────────── */
.cert-forensics .cf-lede {
  font-size: 1.22rem;
  font-style: italic;
  color: var(--cf-text);
  margin-bottom: 20px;
}

.cert-forensics .cf-drop::first-letter {
  font-weight: 700;
  float: left;
  font-size: 3.6rem;
  line-height: 0.82;
  padding: 6px 14px 0 0;
  color: var(--cf-amber);
}

.cert-forensics .cf-rule {
  height: 1px;
  border: 0;
  background: repeating-linear-gradient(
    90deg, var(--cf-border) 0 8px, transparent 8px 16px
  );
  max-width: 340px;
  margin: 32px auto;
}

.cert-forensics .cf-section {
  padding: 40px 0 16px;
}

.cert-forensics .cf-h2 {
  font-family: var(--cf-sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  line-height: 1.12;
  color: var(--cf-text);
  margin-bottom: 18px;
}

/* ── Case-file cards ───────────────────────────────────────── */
.cert-forensics .cf-case {
  border: 1px solid var(--cf-border);
  border-radius: 6px;
  background: var(--cf-bg-card);
  margin: 24px 0;
  overflow: hidden;
}

.cert-forensics .cf-case-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cf-border);
  background: rgba(255, 255, 255, 0.02);
  flex-wrap: nowrap;
}

.cert-forensics .cf-case-id {
  font-family: var(--cf-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--cf-amber);
  font-weight: 600;
}

.cert-forensics .cf-case-label {
  font-family: var(--cf-mono);
  font-size: 0.72rem;
  color: var(--cf-muted);
  letter-spacing: 0.04em;
  text-align: right;
}

.cert-forensics .cf-case-body {
  padding: 16px;
}

.cert-forensics .cf-evidence {
  position: relative;
  padding-left: 90px;
  margin-bottom: 10px;
  min-height: 1.4em;
}

.cert-forensics .cf-verdict {
  position: relative;
  padding-left: 90px;
  margin-bottom: 10px;
  color: var(--cf-green);
  min-height: 1.4em;
}

/* ── Code blocks ───────────────────────────────────────────── */
.cert-forensics pre.cf-err,
.cert-forensics pre.cf-fix,
.cert-forensics pre.cf-code {
  font-family: var(--cf-mono);
  font-size: 0.83rem;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 18px 0;
}

.cert-forensics pre.cf-err {
  background: var(--cf-bg-err);
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-left: 3px solid var(--cf-red);
  color: var(--cf-red);
}

.cert-forensics pre.cf-fix {
  background: var(--cf-bg-fix);
  border: 1px solid rgba(63, 185, 80, 0.25);
  border-left: 3px solid var(--cf-green);
  color: var(--cf-green-light);
}

.cert-forensics pre.cf-code {
  background: var(--cf-bg-code);
  border: 1px solid var(--cf-border);
  border-left: 3px solid var(--cf-muted);
  color: var(--cf-text);
}

/* ── Inline fingerprint ────────────────────────────────────── */
.cert-forensics code.cf-fingerprint {
  font-family: var(--cf-mono);
  font-size: 0.86em;
  color: var(--cf-amber);
  background: rgba(227, 179, 65, 0.10);
  border: 1px solid rgba(227, 179, 65, 0.22);
  border-radius: 3px;
  padding: 0.05em 0.36em;
}

/* ── Lessons list ──────────────────────────────────────────── */
.cert-forensics .cf-lessons {
  border: 1px solid var(--cf-border);
  border-radius: 6px;
  background: var(--cf-bg-card);
  padding: 20px 24px 24px;
  margin: 28px 0;
}

.cert-forensics .cf-lessons-title {
  font-family: var(--cf-mono);
  font-size: 0.72rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--cf-amber);
  font-weight: 700;
  margin-bottom: 14px;
  display: block;
}

.cert-forensics .cf-lessons ul,
.cert-forensics .cf-lessons ol {
  list-style: none;
  display: grid;
  gap: 10px;
}

.cert-forensics .cf-lessons li {
  position: relative;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--cf-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.98rem;
  color: var(--cf-text);
}

.cert-forensics .cf-lessons li::before {
  content: "▸";
  position: absolute;
  left: 14px;
  top: 10px;
  color: var(--cf-green);
  font-size: 0.90rem;
}

/* ── Prev / Next nav ───────────────────────────────────────── */
.cert-forensics .cf-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 32px 0 24px;
  border-top: 1px solid var(--cf-border);
  margin-top: 40px;
}

.cert-forensics .cf-nav-prev,
.cert-forensics .cf-nav-next {
  font-family: var(--cf-mono);
  font-size: 0.80rem;
  color: var(--cf-amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 179, 65, 0.30);
  transition: border-bottom-color 0.15s;
  max-width: 44%;
}
.cert-forensics .cf-nav-prev:hover,
.cert-forensics .cf-nav-next:hover {
  border-bottom-color: var(--cf-amber);
}
.cert-forensics .cf-nav-prev {
  text-align: left;
}
.cert-forensics .cf-nav-next {
  text-align: right;
}

/* ── Footer ────────────────────────────────────────────────── */
.cert-forensics .cf-footer {
  border-top: 1px solid var(--cf-border);
  padding: 32px 28px 56px;
  text-align: center;
  color: var(--cf-muted);
  font-size: 0.88rem;
}

.cert-forensics .cf-footer p {
  color: var(--cf-muted);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
}

.cert-forensics .cf-footer a {
  color: var(--cf-muted);
  border-bottom-color: rgba(139, 148, 158, 0.35);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cert-forensics .cf-hero {
    padding: 44px 18px 34px;
  }
  .cert-forensics .cf-case-head {
    flex-wrap: wrap;
    gap: 6px;
  }
  .cert-forensics .cf-case-label {
    text-align: left;
  }
  .cert-forensics .cf-wrap {
    padding: 0 18px;
  }
  .cert-forensics {
    font-size: 17px;
  }
}