/*
 * Build Log 004: Web Evidence Inspector
 *
 * Owner: the web-evidence-inspector post only, via the conditional enqueue in
 * functions.php. This is an editorial typography bridge, not a global post
 * framework. It translates the proven Continuity readability discipline into
 * this Startup Lab case study: one clear H1, a distinct deck, a 50rem reading
 * measure inside a wider editorial shell, sans-serif running text, display
 * headings, and mono only for small metadata or inline code.
 */

body.single .dr-post--web-evidence-inspector {
  --dr-we-shell: 76rem;
  --dr-we-hero: 64rem;
  --dr-we-reading: 50rem;
  --dr-we-gutter: 3rem;
  --dr-we-surface-graphite: color-mix(in srgb, var(--dr-heading) 3%, transparent);
  --dr-we-surface-warm: color-mix(in srgb, var(--dr-accent) 6%, transparent);
  --dr-we-surface-cool: color-mix(in srgb, var(--dr-accent-2) 5%, transparent);
  width: min(100% - var(--dr-we-gutter), var(--dr-we-shell));
  max-width: var(--dr-we-shell);
  margin-inline: auto;
  font-family: var(--dr-font-body, Inter, "Helvetica Neue", Arial, sans-serif);
}

body.single .dr-post--web-evidence-inspector > .dr-post-intro {
  width: min(100%, var(--dr-we-hero));
  max-width: var(--dr-we-hero);
  margin-inline: auto;
}

body.single .dr-post--web-evidence-inspector > section,
body.single .dr-post--web-evidence-inspector > aside,
body.single .dr-post--web-evidence-inspector > .wp-block-separator {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

body.single .dr-post--web-evidence-inspector > .dr-post-intro {
  margin-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.75rem, 6vw, 4.75rem);
  color: var(--dr-text);
  font-family: var(--dr-font-body, Inter, "Helvetica Neue", Arial, sans-serif);
}

body.single .dr-post--web-evidence-inspector .dr-we-inspector__eyebrow {
  margin-bottom: 1.05rem;
  color: var(--dr-accent-2);
  font-family: var(--dr-font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
}

body.single .dr-post--web-evidence-inspector .dr-we-inspector__title {
  max-width: 15ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--dr-heading);
  font-family: var(--dr-font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(2.65rem, 5.8vw, 5.7rem);
  font-weight: 650;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}

body.single .dr-post--web-evidence-inspector .dr-we-inspector__deck {
  max-width: 48rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--dr-text-soft);
  font-family: var(--dr-font-body, Inter, "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  line-height: 1.55;
}

body.single .dr-post--web-evidence-inspector p,
body.single .dr-post--web-evidence-inspector li {
  color: var(--dr-text-soft);
  font-family: var(--dr-font-body, Inter, "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(1.06rem, 1.3vw, 1.18rem);
  line-height: 1.72;
}

body.single .dr-post--web-evidence-inspector > section {
  padding-block: clamp(3rem, 6vw, 4.75rem);
  border-top: 1px solid var(--dr-border-soft);
}

body.single .dr-post--web-evidence-inspector > section:nth-of-type(5n + 2) {
  background: linear-gradient(90deg, var(--dr-we-surface-graphite), transparent 82%);
}

body.single .dr-post--web-evidence-inspector > section:nth-of-type(5n + 3) {
  background: linear-gradient(90deg, var(--dr-we-surface-warm), transparent 82%);
}

body.single .dr-post--web-evidence-inspector > section:nth-of-type(5n + 5) {
  background: linear-gradient(90deg, var(--dr-we-surface-cool), transparent 82%);
}

/* Section shells can carry evidence, while normal editorial flow stays readable. */
body.single .dr-post--web-evidence-inspector > section > h2,
body.single .dr-post--web-evidence-inspector > section > p,
body.single .dr-post--web-evidence-inspector > section > ul,
body.single .dr-post--web-evidence-inspector > section > ol,
body.single .dr-post--web-evidence-inspector > section > details {
  max-width: var(--dr-we-reading);
  margin-inline: auto;
}

body.single .dr-post--web-evidence-inspector h2,
body.single .dr-post--web-evidence-inspector h3 {
  color: var(--dr-heading);
  font-family: var(--dr-font-display, "Playfair Display", Georgia, serif);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

body.single .dr-post--web-evidence-inspector h2 {
  max-width: 20ch;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.95rem, 3.8vw, 3.35rem);
}

body.single .dr-post--web-evidence-inspector h3 {
  max-width: 26ch;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

body.single .dr-post--web-evidence-inspector blockquote {
  max-width: 42rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--dr-accent);
}

body.single .dr-post--web-evidence-inspector blockquote p {
  margin-bottom: 0;
  color: var(--dr-heading);
  font-family: var(--dr-font-display, "Playfair Display", Georgia, serif);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
}

body.single .dr-post--web-evidence-inspector ul,
body.single .dr-post--web-evidence-inspector ol {
  max-width: var(--dr-we-reading);
}

body.single .dr-post--web-evidence-inspector > section#security-architecture > p:nth-of-type(2) {
  max-width: min(100%, 62rem);
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--dr-border-soft);
  border-left: 3px solid var(--dr-accent);
  background: color-mix(in srgb, var(--dr-panel, transparent) 72%, transparent);
  color: var(--dr-heading);
  font-family: var(--dr-font-mono, "DM Mono", ui-monospace, monospace);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  line-height: 1.65;
}

body.single .dr-post--web-evidence-inspector code {
  overflow-wrap: anywhere;
  font-family: var(--dr-font-mono, "DM Mono", ui-monospace, monospace);
  font-size: 0.88em;
}

body.single .dr-post--web-evidence-inspector > aside {
  width: min(100%, 64rem);
  margin-block: clamp(3rem, 6vw, 4.75rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--dr-border-soft);
}

body.single .dr-post--web-evidence-inspector > aside > * {
  max-width: var(--dr-we-reading);
  margin-inline: auto;
}

body.single .dr-post--web-evidence-inspector a:focus-visible,
body.single .dr-post--web-evidence-inspector summary:focus-visible {
  outline: 3px solid var(--dr-accent-2);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  body.single .dr-post--web-evidence-inspector {
    --dr-we-gutter: 2rem;
  }

  body.single .dr-post--web-evidence-inspector > .dr-post-intro {
    margin-block-start: 2.75rem;
  }

  body.single .dr-post--web-evidence-inspector .dr-we-inspector__title {
    font-size: clamp(2.35rem, 12.5vw, 3.15rem);
  }

  body.single .dr-post--web-evidence-inspector p,
  body.single .dr-post--web-evidence-inspector li {
    font-size: 1.06rem;
    line-height: 1.68;
  }
}