/* ============================================================
   Verdigris Case Study - dual-target stylesheet (web + PDF mirror)
   Web canonical: verdigris.co/resources/case-studies/{slug}
   PDF mirror:    Drive /Verdigris/Collateral/case-study/...

   Status: experimental. Graduates after 2 case-study refreshes ship.

   Consumption:
     <link rel="stylesheet" href="path/to/cover.css">
     <link rel="stylesheet" href="path/to/case-study.css">
     <article class="vd-case-study">
       <header class="vd-cs-header">...</header>
       <section class="vd-cs-summary">...</section>
       <section class="vd-cs-problem">...</section>
       ...
     </article>

   Extends cover.css. Selectors namespaced .vd-cs-* (vd-case-study-).
   The same CSS serves web and PDF; the @media print block adapts
   the layout for paged output. The web canonical and PDF mirror
   carry the same content per the web-pdf-parity rule.

   Typography pt mirror @imports build/dist/typography/print.css
   (codegen via build/config.ts:generatePrintTypographyCss).
   ============================================================ */

@import url('../dist/typography/print.css');

:root {
  --vd-teal-text: #007571;                  /* WCAG-AA teal on light bg; brand.verdigris-on-light token */

  --vd-cs-frame-top: 1.0in;
  --vd-cs-frame-side: 0.95in;
  --vd-cs-frame-bottom: 1.0in;
  --vd-cs-section-gap: 28pt;
}

/* ---- Print: paged with named @page ---- */
@page case_study {
  size: Letter;
  margin: 0.95in 0.95in 1.0in 0.95in;
  @bottom-left {
    /* FROZEN: matches caption (9pt) token; CSS Paged Media spec does not support var() in font: shorthand */
    content: "Verdigris · Case study";
    font: 9pt 'Inter', sans-serif;
    color: var(--vd-muted);
    padding-top: 18pt;
    border-top: 0.5pt solid var(--vd-rule-paper);
  }
  @bottom-right {
    /* FROZEN: matches caption (9pt) token; CSS Paged Media spec does not support var() in font: shorthand */
    content: "Page " counter(page) " of " counter(pages);
    font: 9pt 'Inter', sans-serif;
    color: var(--vd-muted);
    padding-top: 18pt;
    border-top: 0.5pt solid var(--vd-rule-paper);
  }
}

/* ---- Article container ---- */
article.vd-case-study {
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: var(--vd-typography-body);
  line-height: 1.6;
  color: var(--vd-ink);
  max-width: 6.6in;
  margin: 0 auto;
  padding: 0 1rem;
}

@media print {
  article.vd-case-study {
    page: case_study;
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

/* ============================================================
   HEADER (eyebrow, headline, deck, byline)
   ============================================================ */
.vd-cs-header {
  padding-bottom: var(--vd-cs-section-gap);
  border-bottom: 0.5pt solid var(--vd-rule-paper);
  margin-bottom: var(--vd-cs-section-gap);
}
.vd-cs-eyebrow {
  display: flex;
  align-items: center;
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vd-muted);
  padding-bottom: 14pt;
}
.vd-cs-eyebrow .vd-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--vd-teal);
  border-radius: 50%;
  margin-right: 10pt;
}

h1.vd-cs-headline {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-headline-page);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--vd-ink);
  margin: 0;
  padding-bottom: 14pt;
  text-wrap: pretty;
}
h1.vd-cs-headline .vd-accent { color: var(--vd-teal-text); }

p.vd-cs-deck {
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-deck-page);
  line-height: 1.5;
  font-weight: 400;
  color: var(--vd-muted);
  margin: 0;
  padding-bottom: 18pt;
  max-width: 5.6in;
}

.vd-cs-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 24pt;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: var(--vd-typography-caption);
  color: var(--vd-muted);
  letter-spacing: 0.04em;
}
.vd-cs-byline .vd-byline-label {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vd-teal-text);
  padding-bottom: 4pt;
}
.vd-cs-byline .vd-byline-value {
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-body);
  color: var(--vd-ink);
  letter-spacing: 0;
}

/* ============================================================
   SECTION (problem, approach, outcome, replicate)
   ============================================================ */
section.vd-cs-section {
  padding: 0 0 var(--vd-cs-section-gap);
}
section.vd-cs-section:last-child { padding-bottom: 0; }

.vd-cs-section-eyebrow {
  display: flex;
  align-items: baseline;
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vd-muted);
  padding-bottom: 8pt;
  page-break-after: avoid;
  break-after: avoid;
}
.vd-cs-section-eyebrow .vd-num {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: var(--vd-typography-caption);
  color: var(--vd-teal-text);
  margin-right: 14pt;
}

h2.vd-cs-section-title {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-headline-section);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.22;
  color: var(--vd-ink);
  margin: 0;
  padding-bottom: 10pt;
  page-break-after: avoid;
  break-after: avoid;
  text-wrap: pretty;
}

section.vd-cs-section p {
  font-size: var(--vd-typography-body);
  line-height: 1.6;
  color: var(--vd-ink);
  margin: 0 0 10pt 0;
  orphans: 3;
  widows: 3;
}

section.vd-cs-section ul {
  margin: 6pt 0 12pt 0;
  padding-left: 18pt;
}
section.vd-cs-section ul li {
  font-size: var(--vd-typography-body);
  line-height: 1.55;
  padding-bottom: 6pt;
}

/* ============================================================
   EXECUTIVE SUMMARY (load-bearing first paragraph)
   ============================================================ */
.vd-cs-summary {
  background: #f6f7fa;
  border-left: 3pt solid var(--vd-teal);
  padding: 14pt 18pt;
  margin-bottom: var(--vd-cs-section-gap);
  page-break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.vd-cs-summary .vd-summary-label {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vd-teal-text);
  padding-bottom: 6pt;
}
.vd-cs-summary p {
  font-size: var(--vd-typography-deck-page-min);  /* 12pt — exec summary lead reads slightly larger than body */
  line-height: 1.6;
  color: var(--vd-ink);
  margin: 0;
}
.vd-cs-summary p strong { font-weight: 600; }

/* ============================================================
   ANCHOR METRIC (single bolded outcome — Z2O-1323-style discipline)
   Required: exactly one per case study.
   ============================================================ */
.vd-cs-anchor {
  margin: 6pt 0 18pt 0;
  padding: 18pt 0;
  border-top: 0.75pt solid var(--vd-rule-paper);
  border-bottom: 0.75pt solid var(--vd-rule-paper);
  page-break-inside: avoid;
  text-align: center;
}
.vd-cs-anchor .vd-anchor-label {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vd-teal-text);
  padding-bottom: 10pt;
}
.vd-cs-anchor .vd-anchor-metric {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-metric-anchor);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.0;
  color: var(--vd-teal-text);
  padding-bottom: 8pt;
}
.vd-cs-anchor .vd-anchor-context {
  font-size: var(--vd-typography-body);
  line-height: 1.5;
  color: var(--vd-ink);
  margin: 0 auto;
  max-width: 4.8in;
}

/* ============================================================
   QUOTE (named operator + role + organization OR explicit redaction)
   Required attribution; see composition.persuade-case-study.quote-attribution
   ============================================================ */
.vd-cs-quote {
  margin: 18pt 0 18pt 0;
  padding: 4pt 0 4pt 24pt;
  border-left: 3pt solid var(--vd-teal);
  page-break-inside: avoid;
}
.vd-cs-quote blockquote {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-metric-deck);  /* 17pt — pull-quote tier */
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--vd-ink);
  margin: 0;
  padding-bottom: 14pt;
  text-wrap: pretty;
}
.vd-cs-quote blockquote::before { content: "\201C"; }
.vd-cs-quote blockquote::after { content: "\201D"; }
.vd-cs-quote .vd-quote-attribution {
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-body);  /* normalized 10.5pt -> 11pt */
  font-weight: 400;
  color: var(--vd-muted);
  letter-spacing: 0.005em;
}
.vd-cs-quote .vd-quote-attribution .vd-attribution-name {
  font-weight: 600;
  color: var(--vd-ink);
}
.vd-cs-quote .vd-quote-attribution .vd-attribution-role {
  display: block;
  padding-top: 2pt;
}

/* ============================================================
   REPLICATE (closing CTA — invites the reader to do this themselves)
   Reuses one-pager CTA strip pattern but full-bleed within article.
   ============================================================ */
.vd-cs-replicate {
  margin-top: var(--vd-cs-section-gap);
  padding: 22pt 24pt;
  background: var(--vd-neutral-950);
  color: rgba(255, 255, 255, 0.92);
  border-radius: 4pt;
  page-break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.vd-cs-replicate .vd-replicate-label {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-caption);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vd-teal-soft);
  padding-bottom: 8pt;
}
.vd-cs-replicate h3 {
  font-family: 'Lato', sans-serif;
  font-size: var(--vd-typography-headline-section);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.96);
  margin: 0;
  padding-bottom: 10pt;
  text-wrap: pretty;
}
.vd-cs-replicate h3 .vd-accent { color: var(--vd-teal); }
.vd-cs-replicate p {
  font-size: var(--vd-typography-body);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 10pt 0;
}
.vd-cs-replicate .vd-cta-action {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: var(--vd-typography-body);
  font-weight: 500;
  color: var(--vd-teal-soft);
  padding-top: 4pt;
}
.vd-cs-replicate .vd-cta-action::before {
  content: "→ ";
  color: var(--vd-teal);
  margin-right: 4pt;
}

/* ============================================================
   FIGURES (anchor-metric chart, before/after) - reuse cover.css .vd-figure
   Add case-study sizing: figures wider than prose column when warranted.
   ============================================================ */
article.vd-case-study figure.vd-figure {
  margin: 18pt -0.5in 24pt -0.5in;       /* slight breakout for charts */
  page-break-inside: avoid;
}
article.vd-case-study figure.vd-figure img,
article.vd-case-study figure.vd-figure svg {
  border: 0.5pt solid var(--vd-rule-paper);
}
@media (max-width: 700px) {
  article.vd-case-study figure.vd-figure {
    margin-left: 0;
    margin-right: 0;
  }
}