/* Final responsive and accessibility layer over the Broadsheet design. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { overflow-wrap: break-word; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible { outline: 3px solid #006580; outline-offset: 5px; }
.btn-primary { background: var(--color-accent-700); }
.btn-primary:hover { background: var(--color-accent-800); }
.nav a { min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { text-decoration: underline !important; }
.cmyk::after { display: none; }
.cmyk img:first-child { opacity: 1; }
h1 > span:first-child { color: var(--color-accent-700); }
h1 { max-width: 22ch !important; font-size: clamp(44px,6vw,88px) !important; margin-top: 48px !important; }
.product-capture { margin: 48px 0 0; }
.product-capture > a { display: block; border: 1px solid var(--color-divider); background: #f3f2f2; }
.product-capture img { display: block; width: 100%; height: auto; }
.product-capture figcaption { font-size: 14px; line-height: 1.6; max-width: 90ch; margin-top: 14px; color: #565251; }
.product-capture figcaption span { display: block; margin-top: 4px; }
.evidence-intro { border-top: 1px solid var(--color-divider); padding-top: 36px; margin-top: 48px; max-width: 72ch; }
.evidence-intro h3 { font-size: clamp(25px,3vw,36px); line-height: 1.2; margin: 14px 0; }
.evidence-intro p { font-size: 17px; line-height: 1.65; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px !important; color: var(--color-accent-700); }
#about { padding-top: 48px !important; }
#recommendations { padding-top: 40px !important; }
[aria-labelledby="record-title"] dd { white-space: nowrap; flex-shrink: 0; }
[aria-labelledby="record-title"] dt { min-width: 0; }
@media (max-width: 640px) {
  .nav { display: grid; grid-template-columns: 1fr auto; }
  .nav > div { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; }
  .nav > .btn { padding: 8px 12px; font-size: 12px !important; }
  .nav-brand { font-size: 17px !important; }
  h1 { font-size: clamp(40px,10.8vw,64px) !important; margin-top: 36px !important; }
  section { padding-top: 40px !important; padding-bottom: 56px !important; }
  #top { padding-top: 20px !important; }
  .product-capture { margin-top: 28px; }
  figure, article, section, main { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}