/* =====================================================================
   Company News Article — chrome + grid layout (MHD-823 / Phase 3)

   Chrome stack (top → bottom):
     breadcrumb → banner ad → company header → tab nav → back link →
     2-col body+sidebar grid → lower-tiles row

   Sidebar stickies under the nav at desktop widths. At <= 899px the
   sidebar drops under the body and the lower tiles stack.
   ===================================================================== */

:root {
  --cpn-max-width: 1200px;
  --cpn-gap: 24px;
  --cpn-side-pad: 24px;
  --cpn-border: #e5e7eb;
  --cpn-muted: #6b7280;
  --cpn-text: #111827;
  --cpn-accent: #1d4ed8;
  --cpn-card-bg: #ffffff;
  --cpn-card-shadow: 0 1px 2px rgba(17, 24, 39, .06);
  --cpn-nav-offset: 65px; /* matches body padding-top from /css/style.css */
}

.cpn-article {
  max-width: var(--cpn-max-width);
  margin: 0 auto;
  padding: 24px var(--cpn-side-pad) 80px;
  color: var(--cpn-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* --- Breadcrumb ----------------------------------------------------- */
.cpn-breadcrumb {
  font-size: 13px;
  color: var(--cpn-muted);
  margin-bottom: 16px;
  line-height: 1.4;
  word-break: break-word;
}
.cpn-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cpn-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.cpn-breadcrumb a { color: var(--cpn-muted); text-decoration: none; }
.cpn-breadcrumb a:hover { color: var(--cpn-accent); text-decoration: underline; }
.cpn-breadcrumb [aria-current="page"] { color: var(--cpn-text); font-weight: 600; }
.cpn-breadcrumb .cpn-sep { color: #d1d5db; }

/* --- Banner ad ----------------------------------------------------- */
.cpn-banner {
  width: 100%;
  margin: 0 0 24px;
  min-height: 1px; /* container collapses if ad widget renders nothing */
}
.cpn-banner:empty { display: none; }

/* --- Company header ----------------------------------------------- */
.cpn-company-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cpn-border);
  margin-bottom: 0;
}
.cpn-company-header__logo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: contain;
  background: #f3f4f6;
  flex: 0 0 56px;
}
.cpn-company-header__logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cpn-muted);
  font-size: 22px;
}
.cpn-company-header__text { display: flex; flex-direction: column; min-width: 0; }
.cpn-company-header__ticker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cpn-muted);
  text-transform: uppercase;
}
.cpn-company-header__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  color: var(--cpn-text);
  margin: 0;
  word-break: break-word;
}
.cpn-company-header__link { text-decoration: none; color: inherit; }
.cpn-company-header__link:hover .cpn-company-header__name { color: var(--cpn-accent); }

/* --- Tab nav ------------------------------------------------------- */
.cpn-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--cpn-border);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 16px;
}
.cpn-tabs::-webkit-scrollbar { display: none; }
.cpn-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cpn-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.cpn-tabs a:hover { color: var(--cpn-text); }
.cpn-tabs a.is-active {
  color: var(--cpn-accent);
  border-bottom-color: var(--cpn-accent);
}
.cpn-tabs .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'FILL' 0, 'wght' 500;
}

/* --- Back to News link --------------------------------------------- */
.cpn-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cpn-muted);
  text-decoration: none;
}
.cpn-back-link:hover { color: var(--cpn-accent); }
.cpn-back-link::before { content: "←"; }

/* --- Chrome skeleton placeholders ---------------------------------- */
/* Reserve the chrome's final dimensions at first paint so the breadcrumb,
   company header, and tab strip don't jump as JS hydrates. JS replaces the
   skeleton markup via innerHTML in the existing render functions. */
.cpn-skel {
  display: inline-block;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: cpn-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  vertical-align: middle;
}
.cpn-skel--text   { height: 12px; width: 80px; }
.cpn-skel--logo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  flex: 0 0 56px;
}
.cpn-skel--ticker { display: block; height: 11px; width: 70px; margin-bottom: 8px; }
.cpn-skel--title  { display: block; height: 22px; width: 260px; max-width: 80%; }
.cpn-skel--tab    { height: 18px; width: 84px; }
.cpn-tabs__skel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 2px solid transparent;
  pointer-events: none;
}
@keyframes cpn-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cpn-skel { animation: none; }
}

/* --- 2-col grid (article body + sticky sidebar) -------------------- */
.cpn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--cpn-gap);
  align-items: start;
}
.cpn-body {
  min-width: 0;
  background: var(--cpn-card-bg);
  border: 1px solid var(--cpn-border);
  border-radius: 10px;
  padding: 24px;
  box-shadow: var(--cpn-card-shadow);
}
.cpn-body-loading {
  color: var(--cpn-muted);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

.cpn-sidebar {
  position: sticky;
  top: calc(var(--cpn-nav-offset) + 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Lower tiles --------------------------------------------------- */
.cpn-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cpn-gap);
  margin-top: 32px;
}
.cpn-tiles:empty { display: none; }

/* --- Article body content ------------------------------------------ */
.cpn-body__header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cpn-border);
}
.cpn-body__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: var(--cpn-text);
  margin: 0 0 12px;
  word-break: break-word;
}
/* Interview-type pill rendered above the title on /interview/{slug}-{id}.
   Matches the corner tag styling used on the /insights/interviews cards. */
.cpn-body__interview-tag {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 0 10px;
  background: #30a5bf;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 3px;
}
.cpn-body__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cpn-body__meta {
  font-size: 13px;
  color: var(--cpn-muted);
}
.cpn-body__video {
  margin: 16px 0 20px;
}
.cpn-body__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.cpn-body__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cpn-body__video--external {
  padding: 12px 0;
}
.cpn-body__video-link {
  display: inline-block;
  padding: 10px 18px;
  background: var(--cpn-accent, #30a5bf);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}

.cpn-body__content {
  font-size: 15px;
  line-height: 1.65;
  color: var(--cpn-text);
}

/* PDF-backed providers (ASX, SEDAR) — replace body_html text dump with an
   inline iframe of the source PDF. The iframe needs a fixed numeric height
   (browsers won't size an iframe via flex/aspect-ratio alone). Set tall
   enough for comfortable reading on a desktop monitor without relying on
   the viewport-relative units that produced a too-short box previously. */
.cpn-body__content--pdf {
  padding: 0;
}
.cpn-body__pdf-frame {
  display: block;
  width: 100%;
  height: 1200px;
  background: #f3f4f6;
  border-radius: 6px;
  overflow: hidden;
}
.cpn-body__pdf-frame iframe {
  width: 100%;
  height: 100% !important;
  border: 0;
  display: block;
}
@media (max-width: 899px) {
  .cpn-body__pdf-frame { height: 700px; }
}
.cpn-body__content > * + * { margin-top: 1em; }
.cpn-body__content p { margin: 0 0 1em; }
.cpn-body__content h1,
.cpn-body__content h2,
.cpn-body__content h3,
.cpn-body__content h4 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cpn-text);
  margin: 1.5em 0 0.6em;
}
.cpn-body__content h2 { font-size: 22px; }
.cpn-body__content h3 { font-size: 18px; }
.cpn-body__content h4 { font-size: 16px; }
.cpn-body__content a { color: var(--cpn-accent); }
.cpn-body__content img,
.cpn-body__content video,
.cpn-body__content iframe {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1em 0;
}
.cpn-body__content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-size: 14px;
}
.cpn-body__content th,
.cpn-body__content td {
  padding: 8px 10px;
  border: 1px solid var(--cpn-border);
  text-align: left;
}
.cpn-body__content th { background: #f9fafb; font-weight: 600; }
.cpn-body__content blockquote {
  border-left: 3px solid var(--cpn-accent);
  background: #f9fafb;
  margin: 1em 0;
  padding: 12px 16px;
  color: var(--cpn-muted);
  font-style: italic;
}
.cpn-body__content ul,
.cpn-body__content ol { padding-left: 24px; }
.cpn-body__empty { color: var(--cpn-muted); font-style: italic; }

/* About-company boilerplate at the foot of the body. */
.cpn-about {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--cpn-border);
}
.cpn-about__heading {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--cpn-text);
}
.cpn-about__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cpn-muted);
  margin: 0 0 8px;
}
.cpn-about__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--cpn-accent);
  text-decoration: none;
}
.cpn-about__link:hover { text-decoration: underline; }

/* --- Share button -------------------------------------------------- */
.cpn-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  border: 1px solid var(--cpn-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cpn-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cpn-share-btn:hover {
  background: var(--cpn-accent);
  color: #fff;
  border-color: var(--cpn-accent);
}
.cpn-share-btn:hover .cpn-share-icon { fill: #fff; }
.cpn-share-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* --- Sidebar cards ------------------------------------------------- */
.cpn-card {
  background: var(--cpn-card-bg);
  border: 1px solid var(--cpn-border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--cpn-card-shadow);
  display: flex;
  flex-direction: column;
}
.cpn-card__head {
  margin-bottom: 12px;
}
.cpn-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cpn-muted);
}

/* Company Information card */
.cpn-card__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.cpn-card__logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: #f3f4f6;
  flex: 0 0 48px;
}
.cpn-card__logo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--cpn-muted);
  font-size: 18px;
}
.cpn-card__identity-text { min-width: 0; }
.cpn-card__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cpn-card__name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
  color: var(--cpn-text);
  word-break: break-word;
}
.cpn-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  flex: 0 0 8px;
}
.cpn-card__sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--cpn-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cpn-card__ticker { font-weight: 600; color: var(--cpn-text); }
.cpn-card__sub-sep { color: #d1d5db; }

.cpn-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cpn-stat {
  background: #f9fafb;
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.cpn-stat__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cpn-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.cpn-stat__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--cpn-text);
  line-height: 1.2;
  word-break: break-word;
}
.cpn-stat__change {
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}
.cpn-stat__change--up { color: #10b981; }
.cpn-stat__change--down { color: #ef4444; }

/* Tagged Project card */
.cpn-card--project {}
.cpn-card__project-name {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--cpn-text);
}
.cpn-card__project-jurisdiction {
  font-size: 12px;
  color: var(--cpn-muted);
  margin-bottom: 12px;
}
.cpn-card__project-thumb-link {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
  margin-bottom: 10px;
}
.cpn-card__project-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cpn-card__project-thumb--missing { object-fit: contain; padding: 16px; opacity: 0.5; }
.cpn-card__project-cta {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--cpn-accent);
  text-decoration: none;
}
.cpn-card__project-cta:hover { text-decoration: underline; }

/* --- Lower tiles (Phase 5) ----------------------------------------- */
.cpn-tile {
  background: var(--cpn-card-bg);
  border: 1px solid var(--cpn-border);
  border-radius: 10px;
  padding: 14px;
  box-shadow: var(--cpn-card-shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cpn-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cpn-tile__title {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--cpn-text);
  margin: 0;
}
.cpn-tile__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--cpn-muted);
  text-decoration: none;
  border-radius: 4px;
}
.cpn-tile__chev:hover { color: var(--cpn-text); background: #f3f4f6; }
.cpn-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
}
.cpn-tile__foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cpn-border);
}
.cpn-tile__viewall {
  font-size: 12px;
  font-weight: 600;
  color: var(--cpn-accent);
  text-decoration: none;
  white-space: nowrap;
}
.cpn-tile__viewall:hover { text-decoration: underline; }
.cpn-tile__empty {
  color: var(--cpn-muted);
  font-size: 13px;
  font-style: italic;
  padding: 8px 0;
}

/* Other News rows — tight stacked layout: date label on top, single-line
   title below. SEDAR rows reuse __date and __title, wrapping them in a
   filing-row layout that adds a PDF button on the right. */
.cpn-news-row {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 6px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.cpn-news-row + .cpn-news-row,
.cpn-filing-row + .cpn-filing-row,
.cpn-insider-row + .cpn-insider-row {
  margin-top: 2px;
}
.cpn-news-row:hover {
  background: #f9fafb;
  border-color: var(--cpn-border);
}
.cpn-news-row__date {
  font-size: 12px;
  color: var(--cpn-muted);
  margin-bottom: 2px;
  font-weight: 500;
}
.cpn-news-row__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--cpn-text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kept for compatibility with any caller still rendering the source line —
   visually hide it since the design no longer surfaces provider per-row. */
.cpn-news-row__source { display: none; }

/* SEDAR filing rows — 2-column flex: left = an <a> with date stacked on
   title (identical structure to a news row), right = small PDF <a>. The
   outer .cpn-filing-row is a <div>, NOT an <a> — nesting anchors is
   invalid HTML and the browser would auto-close the outer one, breaking
   the PDF onto a new line. */
.cpn-filing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.cpn-filing-row:hover {
  background: #f9fafb;
  border-color: var(--cpn-border);
}
.cpn-filing-row__main {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 6px 0;
  text-decoration: none;
  color: inherit;
}
.cpn-filing-row__pdf {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--cpn-text);
  background: transparent;
  border: 1px solid var(--cpn-border);
  padding: 3px 8px;
  border-radius: 4px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cpn-filing-row__pdf:hover {
  border-color: var(--cpn-muted);
  background: #f3f4f6;
}

/* Financial snapshot — single-column rows with label left, value right.
   .cpn-tile__stats (2-col grid) is still used by the sidebar Company Info
   card; the tile uses .cpn-fin-list to get the design's row layout. */
.cpn-tile__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cpn-fin-list {
  display: flex;
  flex-direction: column;
}
.cpn-fin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 6px 4px;
  padding-bottom: 15px
}
.cpn-fin-row:last-of-type {
  padding-bottom: 6px;
}
.cpn-fin-row__label {
  /* Match the titles in the news / filing rows. */
  font-size: 12px;
  font-weight: 500;
}
.cpn-fin-row__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--cpn-text);
  text-align: right;
  white-space: nowrap;
}

/* Insider activity rows — date on top, then "filer — Buy 20,000" below.
   __line is a flex container so the action+amount on the right always
   renders even when the filer (company name like "Sumitomo Metal Mining
   Canada Limited") is too long for the row. */
.cpn-insider-row {
  display: block;
  padding: 6px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.cpn-insider-row__date {
  font-size: 12px;
  color: var(--cpn-muted);
  margin-bottom: 2px;
  font-weight: 500;
}
.cpn-insider-row__line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cpn-text);
  line-height: 1.35;
}
.cpn-insider-row__filer {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cpn-insider-row__action {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* --- Mobile breakpoints -------------------------------------------- */
@media (max-width: 1099px) and (min-width: 600px) {
  /* Tablet: 2-col tile grid keeps tiles readable when 4 cols would be too narrow. */
  .cpn-tiles { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  /* Mobile section order per mockup: chrome (breadcrumb, banner, header,
     tabs, back link) → article body → lower tiles → tagged project card
     → company information card. The desktop DOM order is body+sidebar in
     a grid followed by tiles; we use `display: contents` on the grid to
     promote body/sidebar to direct children of the flex article, then
     `order` to interleave tiles between them and to put project before
     company info inside the sidebar. */
  .cpn-article {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 60px;
  }
  .cpn-grid { display: contents; }
  .cpn-body { order: 1; padding: 18px; }
  .cpn-tiles { order: 2; gap: 12px; margin-top: 16px; }
  .cpn-sidebar {
    order: 3;
    position: static;
    top: auto;
    margin-top: 16px;
    gap: 12px;
  }
  .cpn-card--project { order: 1; }
  .cpn-card--3d { order: 2; }
  .cpn-card--company { order: 3; }
  .cpn-company-header__logo,
  .cpn-skel--logo {
    width: 48px; height: 48px; flex-basis: 48px;
  }
  .cpn-skel--title { height: 20px; }
  .cpn-company-header__name { font-size: 22px; }
  .cpn-body__title { font-size: 24px; }
  /* Tighter tiles: the desktop padding/gap look airy when each tile spans
     the full row width. */
  .cpn-tile { padding: 12px; }
  .cpn-tile__head { margin-bottom: 8px; padding-bottom: 0; }
  /* Make the top tab nav sticky so users can switch tabs without scrolling
     back to the top of long articles. Sits under the fixed site nav. */
  .cpn-tabs {
    position: sticky;
    top: var(--cpn-nav-offset);
    z-index: 5;
    background: #fff;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 599px) {
  .cpn-breadcrumb { font-size: 12px; }
  .cpn-tabs a { padding: 10px 12px; font-size: 13px; }
  .cpn-company-header__name { font-size: 20px; }
  .cpn-body__title { font-size: 22px; }
  .cpn-body__content { font-size: 14px; }
  .cpn-card__stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cpn-tiles { grid-template-columns: 1fr; }
}