/*
 * Startup Lab Build Logs 001 and 002.
 *
 * This is a narrow composition bridge for the shared .dr-log markup already
 * owned by dr-startup-lab.css. It is loaded only for the two matching post
 * slugs and owns width, reading measure, deck typography and responsive
 * gutters. Existing artifact-specific visuals remain in dr-startup-lab.css.
 */

body.single .dr-log {
  --dr-build-shell: 76rem;
  --dr-build-hero: 64rem;
  --dr-build-reading: 50rem;
  --dr-build-wide: 70rem;
  --dr-build-gutter: clamp(1.5rem, 4vw, 4rem);
  --dr-lab-canvas: var(--dr-build-shell);
  --dr-lab-wide: var(--dr-build-wide);
  --dr-lab-prose: var(--dr-build-reading);
  --dr-build-surface-graphite: color-mix(in srgb, var(--lab-text) 3%, transparent);
  --dr-build-surface-warm: color-mix(in srgb, var(--lab-accent) 6%, transparent);
  --dr-build-surface-cool: color-mix(in srgb, var(--lab-focus) 5%, transparent);
}

/* Build 001 uses the editorial article standard without changing Build 002. */
body.single .dr-log.dr-log--build-001 {
  --dr-build-reading: 44rem;
  --measure: var(--dr-build-wide);
  --dr-build-font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --dr-build-font-editorial: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Major editorial sections only: quiet tonal separation without changing measures. */
body.single .dr-log .dr-log__content section:nth-of-type(5n + 2) {
  background: linear-gradient(90deg, var(--dr-build-surface-graphite), transparent 82%);
}

body.single .dr-log .dr-log__content section:nth-of-type(5n + 3) {
  background: linear-gradient(90deg, var(--dr-build-surface-warm), transparent 82%);
}

body.single .dr-log .dr-log__content section:nth-of-type(5n + 5) {
  background: linear-gradient(90deg, var(--dr-build-surface-cool), transparent 82%);
}

/*
 * Build Log 002 reaches this stylesheet, but its .dr-log is itself a direct
 * child of the global post-content wrapper. That wrapper caps direct children
 * at the site reading width. Release only this post's page shell; the inner
 * rules below retain the 64rem hero and 50rem prose measures.
 */
body.postid-2715.dr-family-post .dr-single-content-wrap,
body.postid-2715.dr-family-post .dr-single-content-wrap > .wp-block-post-content,
body.postid-2715.dr-family-post .dr-single-content-wrap > .wp-block-post-content > .dr-log {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body.single .dr-log .dr-log__shell {
  width: min(100% - (2 * var(--dr-build-gutter)), var(--dr-build-shell));
}

body.single .dr-log .dr-log__hero .dr-log__crumb,
body.single .dr-log .dr-log__hero .dr-log__eyebrow,
body.single .dr-log .dr-log__hero .dr-log__display-title,
body.single .dr-log .dr-log__hero .dr-log__subtitle {
  max-width: var(--dr-build-hero);
}

body.single .dr-log .dr-log__subtitle {
  color: var(--lab-text-secondary);
  font-family: var(--dr-font-body, Inter, "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(1.12rem, 1.8vw, 1.4rem);
  line-height: 1.65;
}

body.single .dr-log .dr-log__display-title {
  font-size: clamp(3.1rem, 6vw, 6.5rem) !important;
  line-height: 0.92 !important;
}

body.single .dr-log .dr-log__status-grid,
body.single .dr-log .dr-log__lead-image {
  max-width: var(--dr-build-wide);
}

body.single .dr-log .dr-log__content {
  max-width: var(--dr-build-wide);
  margin-inline: auto;
}

body.single .dr-log .dr-log__content section > figure,
body.single .dr-log .dr-log__content section > .dr-post-image {
  width: min(100%, var(--dr-build-wide));
  margin-inline: auto;
}

body.single .dr-log .dr-log__content section > figure img,
body.single .dr-log .dr-log__content section > .dr-post-image img {
  width: 100%;
  height: auto;
}

body.single .dr-log .dr-log__content > .dr-log__editorial-figure {
  width: min(100%, var(--dr-build-wide));
  margin: clamp(2.75rem, 6vw, 5rem) auto;
  padding: clamp(0.35rem, 0.8vw, 0.65rem);
  border: 1px solid var(--lab-border);
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--lab-surface) 90%, transparent);
}

body.single .dr-log .dr-log__editorial-figure img {
  display: block;
  width: 100%;
  height: auto;
}

body.single .dr-log .dr-log__editorial-figure figcaption {
  max-width: var(--dr-build-reading);
  margin: 0.8rem auto 0.2rem;
  color: var(--lab-text-muted);
  font-family: var(--dr-font-body, Inter, "Helvetica Neue", Arial, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

body.single .dr-log .dr-log__content section > p,
body.single .dr-log .dr-log__content section > h2,
body.single .dr-log .dr-log__content section > .dr-log__kicker {
  max-width: var(--dr-build-reading);
}

body.single .dr-log .dr-log__content p,
body.single .dr-log .dr-log__content li {
  font-family: var(--dr-font-body, Inter, "Helvetica Neue", Arial, sans-serif);
  line-height: 1.76;
}

/* Keep ordinary prose calm while allowing figures and article components to stay wide. */
body.single .dr-log.dr-log--build-001 .dr-log__display-title,
body.single .dr-log.dr-log--build-001 .dr-log__content h2,
body.single .dr-log.dr-log--build-001 .dr-log__content h3 {
  font-family: var(--dr-build-font-editorial);
}

body.single .dr-log.dr-log--build-001 .dr-log__content section > p:not(.dr-log__kicker):not(.dr-log__warning) {
  font-family: var(--dr-build-font-body);
  font-size: 1.125rem;
  line-height: 1.7;
}

body.single .dr-log.dr-log--build-001 .dr-log__content section > p:not(.dr-log__kicker):not(.dr-log__warning) + p:not(.dr-log__kicker):not(.dr-log__warning) {
  margin-top: 1.25rem;
}

body.single .dr-log.dr-log--build-001 .dr-log__editorial-figure figcaption {
  font-family: var(--dr-build-font-body);
}

@media (max-width: 680px) {
  body.single .dr-log {
    --dr-build-gutter: 1rem;
  }

  body.single .dr-log .dr-log__subtitle {
    font-size: 1.08rem;
    line-height: 1.68;
  }

  body.single .dr-log .dr-log__display-title {
    font-size: clamp(3rem, 13vw, 4.5rem) !important;
  }

  body.single .dr-log.dr-log--build-001 .dr-log__content section > p:not(.dr-log__kicker):not(.dr-log__warning) {
    font-size: 1rem;
  }
}