/* =====================================================================
   Safety bulletins: the bulletin pages and the bulletins index.
   Prefix: sb-. Loads after home-2026.css (tokens, .hp-hero, .hp-shell,
   .hp-gradient, .hp-textlink), site-nav-2026.css and site-footer-2026.css.

   The design is the "Safety Bulletins Template" canvas Greg approved on
   30 Sep 2026: direction A. The only call to action is one product card,
   which hangs over the footer's top edge (the contact page's bridge).

   The pages are generated by scripts/build-bulletins.mjs from
   content/bulletins/*.json. Change a bulletin there, not in its HTML.
   ===================================================================== */

:root {
  --sb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* How far the photo and the facts rise into the hero, and the product card
     hangs into the footer. */
  --sb-lift: 140px;
  --sb-overhang: 56px;
  /* Long-form body copy: a shade darker than --hp-body, for reading at length. */
  --sb-prose: #374151;
  /* The hazard tag. Amber is the site's risk colour (--hp-warn), darkened
     for 12px text: 6.2:1 on its tint. */
  --sb-warn-bg: #fff4e5;
  --sb-warn-ink: #8a5a12;
}

/* ================================================================ HERO */
.sb-hero { padding-bottom: calc(var(--sb-lift) + 64px); }
.sb-hero--index { padding-bottom: 72px; }
.sb-hero--short { padding-bottom: 96px; }

.sb-hero__title {
  max-width: 1100px;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -2.2px;
}
.sb-hero__title .hp-hero__eyebrow { margin-bottom: 20px; }

/* The brand gradient on a dark ground, as the about and PAS heroes carry it.
   Inline, and cloned per line, so a phrase that wraps keeps its gradient. */
.sb-accent {
  padding-bottom: 2px;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 38%, var(--hp-blue-bright) 72%, var(--hp-violet) 100%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sb-hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 72px;
  align-items: end;
  margin-top: 30px;
}
.sb-hero__lead { max-width: 62ch; color: rgba(255, 255, 255, 0.82); font-size: 18.5px; }
.sb-hero__lead a { color: var(--hp-ice); text-decoration: underline; text-underline-offset: 3px; }
.sb-hero__meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.7;
  text-align: right;
}

/* =============================================================== PHOTO */
/* The source photo, the width of the article column. It rises into the hero
   with the facts beside it (see BODY), as the about page's tiles do. */
.sb-figure { grid-area: fig; margin: 0; max-width: 740px; }
.sb-figure__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--hp-radius);
  background: var(--hp-deep);
  box-shadow: var(--hp-sh-lg);
}
.sb-figure__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A generated plate says so, over the image (the homepage's hp-how__tag). */
.sb-figure__tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 4px 10px;
  border-radius: var(--hp-radius-pill);
  background: rgba(2, 16, 47, 0.62);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sb-figure__cap { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.sb-figure__cap > span:first-child { color: var(--hp-body); font-size: 14.5px; line-height: 1.6; }
.sb-figure__credit { color: var(--hp-muted); font-size: 13px; line-height: 1.6; }
.sb-figure__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sb-figure__credit a:hover { color: var(--hp-ink); }

/* ================================================================ BODY */
/* Photo over the article on the left, the facts on the right for the whole
   run. The grid's top rises into the hero, so both the photo and the facts
   card cross the seam. */
.sb-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "fig aside" "prose aside";
  gap: 64px 96px;
  align-items: start;
  margin-top: calc(-1 * var(--sb-lift));
  padding-bottom: 24px;
}

.sb-prose { grid-area: prose; max-width: 740px; }
.sb-prose section { scroll-margin-top: calc(var(--nv-offset, 80px) + 24px); }
.sb-prose h2 {
  margin: 56px 0 0;
  color: var(--hp-ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.6px;
}
.sb-prose section:first-child h2 { margin-top: 0; }
.sb-prose p { margin: 18px 0 0; color: var(--sb-prose); font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.sb-prose p.sb-prose__intro { margin-top: 14px; color: var(--hp-body); font-size: 17px; }
.sb-prose a { color: var(--hp-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sb-prose a:hover { color: var(--hp-navy); }

/* Source numbers: small, blue, and a jump to the numbered list below. */
.sb-cite { margin-left: 2px; font-size: 11px; line-height: 0; }
.sb-cite + .sb-cite { margin-left: 4px; }
.sb-prose .sb-cite a,
.sb-cite a { color: var(--hp-blue); font-weight: 700; text-decoration: none; }

/* The regulator's controls, grouped by kind: one rule per group. */
.sb-controls { margin-top: 24px; border-bottom: 1px solid var(--hp-line-mid); }
.sb-controls__group {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0 10px;
  border-top: 1px solid var(--hp-line-mid);
}
.sb-controls__label { margin: 0; color: var(--hp-ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.sb-checks { margin: 0; padding: 0; list-style: none; }
.sb-checks li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 30px;
  color: var(--sb-prose);
  font-size: 16.5px;
  line-height: 1.6;
}
.sb-checks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 12px;
  height: 6px;
  border-left: 2.2px solid var(--hp-blue);
  border-bottom: 2.2px solid var(--hp-blue);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------- at a glance */
.sb-aside { grid-area: aside; position: sticky; top: calc(var(--nv-offset, 80px) + 24px); }
.sb-glance {
  padding: 26px 26px 24px;
  border: 1px solid var(--hp-line-mid);
  border-radius: var(--hp-radius);
  background: #fff;
}
.sb-glance__title { margin: 0 0 8px; color: var(--hp-ink); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.sb-glance dl { margin: 0; }
.sb-glance dl div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--hp-line);
}
.sb-glance dl .sb-glance__hazard { align-items: center; padding-bottom: 0; }
.sb-glance dt {
  color: var(--hp-blue);
  font-size: var(--hp-label);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}
.sb-glance dd { margin: 0; color: var(--hp-ink); font-size: 14.5px; line-height: 1.5; }
.sb-glance__hazard dd { display: flex; flex-wrap: wrap; gap: 6px; }

.sb-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 11px;
  border-radius: var(--hp-radius-pill);
  background: var(--sb-warn-bg);
  color: var(--sb-warn-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.sb-source { margin-top: 16px; padding: 22px 26px; border-radius: var(--hp-radius); background: var(--hp-surface); }
.sb-source__k {
  margin: 0 0 8px;
  color: var(--hp-muted);
  font-size: var(--hp-label);
  font-weight: 600;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}
.sb-source__t { margin: 0; color: var(--hp-ink); font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.sb-source__d { margin: 4px 0 0; color: var(--hp-muted); font-size: 14px; }
.sb-source__link { display: inline-flex; gap: 6px; margin-top: 14px; color: var(--hp-blue); font-size: 14.5px; font-weight: 600; }
.sb-source__link:hover { color: var(--hp-navy); }

/* ================================================================= FAQ */
/* The PAS page's FAQ: heading held on the left, native <details> on the
   right, so the answers stay in the page for search and open without script. */
.sb-faq-wrap { padding-top: 72px; }
.sb-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.sb-faq__head { position: sticky; top: calc(var(--nv-offset, 80px) + 32px); }
.sb-d2 { margin: 0; color: var(--hp-ink); font-size: 40px; font-weight: 700; line-height: 1.12; letter-spacing: -1.2px; }
.sb-d2 .hp-gradient { font-style: normal; }
.sb-faq__lead { margin: 18px 0 0; max-width: 40ch; color: var(--hp-body); font-size: 16px; line-height: 1.6; }
.sb-faq { border-bottom: 1px solid var(--hp-line-mid); }
.sb-faq__item { border-top: 1px solid var(--hp-line-mid); }
.sb-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.sb-faq__item summary::-webkit-details-marker { display: none; }
.sb-faq__item summary:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; border-radius: 6px; }
.sb-faq__item h3 { margin: 0; color: var(--hp-ink); font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.3px; transition: color 0.2s ease; }
.sb-faq__item summary:hover h3 { color: var(--hp-blue); }
/* Plus that folds into a minus, on a ring that fills when the answer is open */
.sb-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hp-line-mid);
  border-radius: 50%;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.sb-faq__icon::before,
.sb-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  margin: -0.75px 0 0 -6px;
  border-radius: 1px;
  background: var(--hp-ink);
  transition: transform 0.3s var(--sb-ease), background-color 0.25s ease;
}
.sb-faq__icon::after { transform: rotate(90deg); }
.sb-faq__item summary:hover .sb-faq__icon { border-color: var(--hp-blue); }
.sb-faq__item[open] .sb-faq__icon { border-color: var(--hp-ink); background: var(--hp-ink); }
.sb-faq__item[open] .sb-faq__icon::before,
.sb-faq__item[open] .sb-faq__icon::after { background: #fff; }
.sb-faq__item[open] .sb-faq__icon::after { transform: rotate(0deg); }
.sb-faq__item p { margin: 0; padding: 0 56px 26px 0; max-width: 64ch; color: var(--hp-body); font-size: 16px; line-height: 1.65; text-wrap: pretty; }
@supports (interpolate-size: allow-keywords) {
  .sb-faq { interpolate-size: allow-keywords; }
}
.sb-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 0.35s var(--sb-ease), content-visibility 0.35s allow-discrete; }
.sb-faq__item[open]::details-content { block-size: auto; }

/* ============================================================= SOURCES */
.sb-sources { padding-top: 72px; }
.sb-sources--last { padding-bottom: var(--hp-section-y); }
.sb-sources__title { margin: 0; color: var(--hp-ink); font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.sb-sources__list { margin: 14px 0 0; padding-left: 22px; max-width: 90ch; color: var(--sb-prose); font-size: 15.5px; line-height: 1.6; }
.sb-sources__list li { scroll-margin-top: calc(var(--nv-offset, 80px) + 24px); }
.sb-sources__list li:target { border-radius: 6px; background: var(--hp-chip-bg); box-shadow: 0 0 0 6px var(--hp-chip-bg); }
.sb-sources__list a,
.sb-sources__note a { color: var(--hp-blue); font-weight: 600; }
.sb-sources__list a:hover,
.sb-sources__note a:hover { color: var(--hp-navy); }
.sb-sources__note { margin: 18px 0 0; max-width: 70ch; color: var(--hp-muted); font-size: 14px; line-height: 1.65; }

/* ============================================================= RELATED */
.sb-rel { padding: 80px 0 72px; }
.sb-rel--last { padding-bottom: var(--hp-section-y); }
.sb-rel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.sb-rel__title { margin: 0; color: var(--hp-ink); font-size: 32px; font-weight: 700; letter-spacing: -0.8px; }
.sb-rel__head .hp-textlink:hover { color: var(--hp-navy); }
.sb-rel__list { border-bottom: 1px solid var(--hp-line-mid); }
.sb-rel__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 260px 24px;
  gap: 28px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--hp-line-mid);
  color: var(--hp-ink);
}
.sb-rel__row:hover { color: var(--hp-ink); }
.sb-rel__row:hover .sb-rel__t { color: var(--hp-blue); }
.sb-rel__row:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; border-radius: 6px; }
.sb-rel__k {
  color: var(--hp-muted);
  font-size: var(--hp-label);
  font-weight: 600;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}
.sb-rel__t { display: block; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.2px; transition: color 0.2s ease; }
.sb-rel__m { display: block; margin-top: 6px; color: var(--hp-muted); font-size: 14px; }
.sb-rel__arrow { color: var(--hp-blue); font-size: 20px; transition: transform 0.4s var(--sb-ease); }
.sb-rel__row:hover .sb-rel__arrow { transform: translateX(4px); }

/* ======================================================== PRODUCT CARD */
/* The one call to action. A white card that hangs over the footer's top
   edge, the site's bridge (contact-2026.css .ct-logos): only the card
   crosses, and the footer opens lower by the same amount so nothing sits
   under it. */
.sb-bridge { padding-top: 8px; }
.sb-sources + .sb-bridge { padding-top: 72px; }
.sb-case {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: 48px;
  align-items: center;
  margin-bottom: calc(-1 * var(--sb-overhang));
  padding: 20px 20px 20px 44px;
  border-radius: var(--hp-radius);
  background: #fff;
  box-shadow: 0 0 0 1px var(--hp-line), var(--hp-sh-lg);
  color: var(--hp-ink);
  transition: box-shadow 0.4s ease, transform 0.5s var(--sb-ease);
}
.sb-case:hover { color: var(--hp-ink); transform: translateY(-3px); box-shadow: 0 0 0 1px var(--hp-line), 0 30px 70px rgba(4, 19, 73, 0.22); }
.sb-case:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 4px; }
.sb-case__copy { display: block; }
.sb-case__k {
  display: block;
  margin: 0 0 14px;
  color: var(--hp-muted);
  font-size: var(--hp-label);
  font-weight: 600;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}
.sb-case__t { display: block; max-width: 24ch; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; }
.sb-case__b { display: block; margin-top: 14px; max-width: 44ch; color: var(--hp-body); font-size: 16px; line-height: 1.6; }
.sb-case__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--hp-blue); font-size: 15.5px; font-weight: 600; }
.sb-case__img { display: block; height: 300px; overflow: hidden; border-radius: var(--hp-radius-sm); }
.sb-case__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The footer is shared and byte-identical sitewide; only its top padding
   changes here, to take the card. */
.sb-page--cta ~ .hp-footer { padding-top: calc(var(--hp-section-y, 96px) + var(--sb-overhang)); }

/* ======================================================= HOW WE WRITE */
/* One quiet note under the cards: how the bulletins are sourced, who is
   named, and where to send a correction. */
.sb-how { padding: 64px 0 var(--hp-section-y); }
.sb-how__note {
  max-width: 76ch;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--hp-line-mid);
  color: var(--hp-body);
  font-size: 15.5px;
  line-height: 1.65;
}
.sb-how__note strong { color: var(--hp-ink); font-weight: 700; }
.sb-how__note a { color: var(--hp-blue); font-weight: 600; }
.sb-how__note a:hover { color: var(--hp-navy); }

/* ========================================================== RESPONSIVE */
@media (max-width: 1280px) {
  .sb-hero__title { font-size: 56px; letter-spacing: -2px; }
}

@media (max-width: 1099px) {
  :root { --sb-lift: 120px; --sb-overhang: 48px; }

  .sb-hero__title { font-size: 46px; letter-spacing: -1.6px; }
  .sb-hero__foot { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sb-hero__meta { text-align: left; }

  /* The facts come first once the columns stack, side by side while they fit */
  .sb-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "fig" "aside" "prose"; gap: 44px; }
  .sb-figure { max-width: none; }
  .sb-aside { position: static; }
  .sb-aside__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .sb-source { margin-top: 0; }

  .sb-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sb-faq__head { position: static; }
  .sb-d2 { font-size: 34px; letter-spacing: -1px; }

  .sb-rel__row { grid-template-columns: 110px minmax(0, 1fr) 24px; }
  .sb-rel__tag { display: none; }

  .sb-case { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 32px; padding-left: 32px; }
  .sb-case__t { font-size: 26px; }
  .sb-case__img { height: 240px; }

}

@media (max-width: 700px) {
  :root { --sb-lift: 96px; --sb-overhang: 40px; }

  .sb-hero__title { font-size: 34px; letter-spacing: -1.1px; }
  .sb-hero__title .hp-hero__eyebrow { margin-bottom: 14px; }
  .sb-hero__lead { font-size: 16px; }
  .sb-hero__meta { font-size: 13px; }

  .sb-figure__frame { aspect-ratio: 4 / 3; border-radius: 14px; }
  .sb-figure__cap { margin-top: 12px; }
  .sb-figure__cap > span:first-child { font-size: 13.5px; }
  .sb-figure__credit { font-size: 12.5px; }

  .sb-body { gap: 32px; }
  .sb-aside__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sb-glance { padding: 22px 20px 20px; }
  .sb-glance dl div { grid-template-columns: 96px minmax(0, 1fr); }
  .sb-source { padding: 20px; }

  .sb-prose h2 { margin-top: 40px; font-size: 24px; letter-spacing: -0.4px; }
  .sb-prose p { margin-top: 14px; font-size: 16.5px; }
  .sb-prose p.sb-prose__intro { font-size: 16px; }
  .sb-controls__group { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 20px; }
  .sb-checks li { font-size: 16px; }

  .sb-faq-wrap { padding-top: 48px; }
  .sb-d2 { font-size: 26px; letter-spacing: -0.7px; }
  .sb-faq__item summary { padding: 18px 0; }
  .sb-faq__item h3 { font-size: 16.5px; }
  .sb-faq__item p { padding-right: 0; font-size: 15.5px; }

  .sb-sources { padding-top: 44px; }
  .sb-sources + .sb-bridge { padding-top: 44px; }

  .sb-rel { padding: 48px 0 56px; }
  .sb-rel__title { font-size: 24px; letter-spacing: -0.5px; }
  .sb-rel__row { grid-template-columns: minmax(0, 1fr) 20px; gap: 16px; padding: 18px 0; }
  .sb-rel__k { display: none; }
  .sb-rel__t { font-size: 17px; }
  .sb-rel__m { font-size: 13.5px; }

  /* The card stacks, photo on top, and still bridges into the footer */
  .sb-case { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
  .sb-case__img { order: -1; height: 190px; border-radius: 0; }
  .sb-case__copy { padding: 22px 22px 24px; }
  .sb-case__t { font-size: 22px; letter-spacing: -0.5px; }
  .sb-case__b { font-size: 15px; }
  .sb-case__cta { margin-top: 16px; font-size: 15px; }

  .sb-how { padding-top: 44px; }
  .sb-how__note { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-case,
  .sb-rel__arrow,
  .sb-faq__icon,
  .sb-faq__icon::before,
  .sb-faq__icon::after,
  .sb-faq__item::details-content { transition: none; }
  .sb-case:hover { transform: none; }
}