/* Commercial Narrative / responsive web; uses the existing blog's Brand OS assets. */
body { overflow-x: visible; }
.back-link { font: 600 12px/1.5 var(--dharma-font-system); text-underline-offset: 4px; }
.hero-copy { padding-top: clamp(56px, 8vw, 110px); padding-bottom: 24px; }
h1 { max-width: 1060px; font-size: clamp(42px, 6.5vw, 92px); line-height: 1.06; }
.dek { max-width: 850px; font-size: clamp(19px, 2.5vw, 28px); line-height: 1.55; }
.kicker, .eyebrow, .byline, .claim-boundary strong, .article-nav p, .article-nav a { font-size: 12px; line-height: 1.5; }
.claim-boundary { position: relative; margin-top: 32px; }
.claim-boundary strong { text-transform: uppercase; }
.article-layout { gap: 50px; grid-template-columns: 200px minmax(0, 1fr); }
.article-body { max-width: 850px; }
.article-body p, .protocol-steps { font-size: 19px; line-height: 1.65; }
.article-body a { color: var(--dharma-blue-fg); text-underline-offset: 4px; overflow-wrap: anywhere; }
.article-body a:hover { color: var(--dharma-orange-fg); }
.opening { margin-bottom: 64px; }
.opening p:first-child { font-size: 23px; line-height: 1.6; margin-top: 0; }
.article-section { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--dharma-rule); scroll-margin-top: 28px; }
.article-section h2 { max-width: 760px; margin-bottom: 32px; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.15; }
.protocol-steps { padding-left: 28px; }
.protocol-steps li { padding-left: 8px; margin-bottom: 16px; }
.protocol-steps li::marker { color: var(--dharma-blue-fg); font-family: var(--dharma-font-system); font-weight: 700; }
.protocol-figure { margin: 36px 0; border: 1px solid var(--dharma-ink); background: var(--dharma-paper-2); }
.diagram-link { display: block; background: white; }
.protocol-figure img { display: block; width: 100%; height: auto; }
.protocol-figure figcaption { padding: 20px 22px 12px; font: 400 16px/1.6 var(--dharma-font-human); }
.full-size-link { display: inline-block; margin: 0 22px 20px; padding-block: 6px; font: 600 12px/1.5 var(--dharma-font-system); }
.diagram-description { border-top: 1px solid var(--dharma-rule); padding: 16px 22px; }
.diagram-description summary { cursor: pointer; font: 600 14px/1.5 var(--dharma-font-system); padding-block: 6px; }
.diagram-description p { font-size: 16px; margin-bottom: 0; }
.results-scroll { margin: 32px 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--dharma-ink); }
table { width: 100%; border-collapse: collapse; font: 400 16px/1.55 var(--dharma-font-human); }
caption { text-align: left; padding: 18px; font: 600 12px/1.5 var(--dharma-font-system); background: var(--dharma-paper-2); }
th, td { text-align: left; vertical-align: top; padding: 18px; border-top: 1px solid var(--dharma-rule); overflow-wrap: break-word; }
thead th { font: 700 13px/1.5 var(--dharma-font-system); background: var(--dharma-ink); color: var(--dharma-paper); }
tbody th { width: 44%; font-weight: 400; }
td { border-left: 1px solid var(--dharma-rule); }
tbody tr:nth-child(even) { background: var(--dharma-paper-2); }
.observation-note { margin: 32px 0; padding: 24px; border-left: 4px solid var(--dharma-blue-fg); background: var(--dharma-paper-2); }
.observation-note strong { font: 700 13px/1.5 var(--dharma-font-system); text-transform: uppercase; }
.observation-note p { margin-bottom: 0; font-size: 16px; }
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .article-nav { display: block; position: static; }
  .article-nav ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .article-nav a { min-height: 44px; align-items: center; }
}
@media (max-width: 680px) {
  .hero-copy, .claim-boundary, .article-layout { width: calc(100% - 40px); }
  h1 { font-size: clamp(38px, 10vw, 56px); }
  .article-body p, .protocol-steps { font-size: 17px; }
  .opening p:first-child { font-size: 19px; }
  .article-section { margin-top: 52px; }
  .claim-boundary { padding: 20px; }
  .byline span:last-child { display: inline; }
  .article-nav ol { grid-template-columns: 1fr; }
  .protocol-figure figcaption, .diagram-description { padding-inline: 16px; }
  .full-size-link { margin-inline: 16px; }
  table { font-size: 16px; }
  th, td { padding: 12px 10px; }
  .site-footer { align-items: start; flex-direction: column; gap: 24px; }
}
@media print {
  .article-nav, .hero-grid, .back-link, .skip-link { display: none; }
  .article-layout { display: block; width: 100%; padding: 24px 0; }
  .article-hero { break-after: avoid; }
  .article-section { break-before: auto; }
  tr { break-inside: avoid; }
}