/* =============================================================
   PCN Reports: /reports/ index, article pages and article blocks.
   Pixel, 2026-10-11. Builds on the live site tokens (--ink, --paper,
   --coral, etc. from the site stylesheet). This is the file to ship.

   Blocks (each one is an editor button; class names are the
   sanitizer allowlist):
     h2, h3, p, strong, em, a          headings and text
     figure.r-figure                   image with caption
     div.r-stat                        stat callout
     div.r-statrow > div.r-tile        stat row, 2 to 4 tiles
     figure.r-quote                    story quote
     figure.r-table                    table
     aside.r-callout(--note|--help)    callout box
     figure.r-video(--link)            video embed
     hr.r-divider                      divider
   ============================================================= */

:root {
  /* Darker coral for small text only. #FF5E51 is 2.8:1 on paper; this is 4.9:1. */
  --coral-text: #C8372B;
  --r-text: 700px;     /* reading column */
  --r-wide: 940px;     /* stat rows, tables, wide images, video */
}

/* ---------- Category colors (dot, auto cover art) ---------- */
.cat-research { --cat: var(--cyan);   --cat-2: var(--yellow); }
.cat-stories  { --cat: var(--coral);  --cat-2: var(--yellow); }
.cat-money    { --cat: var(--green);  --cat-2: var(--cyan); }
.cat-health   { --cat: var(--yellow); --cat-2: var(--coral); }
.cat-work     { --cat: var(--teal);   --cat-2: var(--yellow); }
.cat-news     { --cat: var(--ink);    --cat-2: var(--coral); }

.r-catlabel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.r-catlabel::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--coral)); border: 1.5px solid var(--ink); }

/* "Sample" sticker: mockup only, marks cards that are not real articles */
.r-sample {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: var(--ink); color: var(--paper); font-family: 'Kalam', cursive; font-weight: 700;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px;
  border-radius: 999px; transform: rotate(3deg);
}

/* =============================================================
   INDEX  /reports/
   ============================================================= */
.ri-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 80px) clamp(36px, 5vw, 56px); }
.ri-hero__inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.ri-hero h1 {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(56px, 9vw, 128px);
  line-height: .92; letter-spacing: -.025em; color: var(--ink);
}
.ri-hero .ri-intro { max-width: 640px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--ink-2); margin: 28px 0 0; }
.ri-hero .shape { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }

.ri-main { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 80px) clamp(64px, 8vw, 104px); box-sizing: content-box; }

.ri-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 36px; }
.ri-chip {
  flex-shrink: 0; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px;
  background: transparent; color: var(--ink-2); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 9px 16px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, transform .12s;
}
.ri-chip .n { font-family: 'Fraunces', serif; font-weight: 900; font-size: 12px; color: var(--coral-text); }
.ri-chip:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.ri-chip:hover .n, .ri-chip.active .n { color: var(--yellow); }
.ri-chip.active { background: var(--ink); color: var(--paper); }
.ri-chip.cat-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); border: 1.5px solid currentColor; }

/* Featured (newest) card */
.ri-feature {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch;
  background: var(--paper); border: 1.8px solid var(--ink); border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow-paper-lg); text-decoration: none; color: inherit; transition: transform .18s, box-shadow .18s;
}
.ri-feature:hover { transform: translateY(-3px); box-shadow: 6px 9px 0 rgba(28,25,28,0.22); }
.ri-feature__media { border-right: 1.8px solid var(--ink); min-height: 100%; background: var(--paper-2); }
.ri-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.ri-feature__body { padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ri-feature__flag {
  align-self: flex-start; font-family: 'Kalam', cursive; font-weight: 700; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; background: var(--yellow); color: var(--ink); border: 1.5px solid var(--ink);
  padding: 4px 12px; border-radius: 999px; transform: rotate(-2deg);
}
.ri-feature h2 { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(34px, 3.6vw, 52px); line-height: .98; letter-spacing: -.02em; }
.ri-feature p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.ri-feature .r-cardmeta { margin-top: 4px; }
.ri-feature .ri-read { margin-top: 8px; align-self: flex-start; }

.r-cardmeta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--ink-3); }
.r-cardmeta span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); margin-right: 14px; vertical-align: middle; }

/* Grid */
.ri-gridhead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: clamp(56px, 7vw, 88px) 0 24px; }
.ri-gridhead h2 { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.015em; }
.ri-gridhead a { font-size: 14px; color: var(--ink-3); }
.ri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.r-card {
  position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1.8px solid var(--ink);
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-paper); text-decoration: none; color: inherit;
  transition: transform .18s, box-shadow .18s;
}
.r-card:hover { transform: translateY(-3px); box-shadow: 4px 7px 0 rgba(28,25,28,0.22); }
.r-card__media { aspect-ratio: 16 / 10; border-bottom: 1.8px solid var(--ink); background: var(--paper-2); overflow: hidden; }
.r-card__media img { width: 100%; height: 100%; object-fit: cover; }
.r-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.r-card h3 { font-family: 'Fraunces', serif; font-weight: 900; font-size: 24px; line-height: 1.08; letter-spacing: -.01em; }
.r-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.r-card .r-cardmeta { margin-top: auto; padding-top: 6px; }

/* Auto cover art: used when an article has no cover image.
   Blobs in the category colors plus the article's first big number. */
.r-art { position: relative; width: 100%; height: 100%; background: var(--paper-2); overflow: hidden; }
.r-art::before, .r-art::after { content: ''; position: absolute; border-radius: 50%; }
.r-art::before { width: 62%; aspect-ratio: 1; right: -12%; top: -34%; background: var(--cat); }
.r-art::after  { width: 26%; aspect-ratio: 1; left: 8%; bottom: -10%; background: var(--cat-2); }
.r-art b {
  position: absolute; left: 9%; top: 50%; transform: translateY(-50%); z-index: 2;
  font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(44px, 5vw, 68px); line-height: 1; letter-spacing: -.03em; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--cat-2); text-decoration-thickness: .16em;
  text-underline-offset: -.06em; text-decoration-skip-ink: none;
}
.r-art b.q { text-decoration: none; font-size: clamp(96px, 9vw, 132px); top: 58%; }  /* quote mark when there is no number */

.ri-rss { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-size: 14px; color: var(--ink-3); text-decoration: none; border-bottom: 1.5px solid var(--rule); padding-bottom: 2px; }
.ri-rss:hover { color: var(--ink); border-color: var(--coral); }

/* =============================================================
   ARTICLE  /reports/<slug>
   ============================================================= */
.r-head { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 20px 0; }
.r-head__inner { max-width: var(--r-wide); margin: 0 auto; position: relative; z-index: 2; }
.r-head .shape { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.r-crumbs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.r-crumbs a.r-home { font-family: 'Kalam', cursive; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.r-crumbs a.r-home::before { content: ''; width: 28px; height: 2px; background: var(--coral); }
.r-crumbs .sep { color: var(--ink-4); }
.r-title {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(44px, 7.4vw, 96px);
  line-height: .95; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; max-width: 15ch;
}
.r-dek { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.45; color: var(--ink-2); max-width: 36ch; margin: 22px 0 0; }
.r-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 32px; padding: 18px 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--rule-soft);
}
.r-byline { display: flex; align-items: center; gap: 12px; }
.r-byline img { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); }
.r-byline b { display: block; font-size: 15px; }
.r-byline span { display: block; font-size: 13.5px; color: var(--ink-3); }

.r-share { display: flex; align-items: center; gap: 8px; }
.r-share .lbl { font-family: 'Kalam', cursive; font-size: 14px; color: var(--ink-3); margin-right: 4px; }
.r-share a, .r-share button {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper);
  display: inline-grid; place-items: center; color: var(--ink); text-decoration: none; cursor: pointer; padding: 0;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; transition: background .15s, color .15s, transform .12s;
}
.r-share a:hover, .r-share button:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.r-share svg { width: 18px; height: 18px; display: block; }

.r-cover { max-width: 1080px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0 20px; }
.r-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1.8px solid var(--ink); border-radius: 26px; box-shadow: var(--shadow-paper-lg); }
.r-cover figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; text-align: right; }

/* ---------- Body grid: text column with wide breakouts ---------- */
.r-body {
  display: grid; padding: clamp(40px, 5vw, 64px) 0 24px;
  grid-template-columns: [full-start] minmax(20px, 1fr) [wide-start text-start] minmax(0, var(--r-text)) [text-end wide-end] minmax(20px, 1fr) [full-end];
  counter-reset: sec;
  font-size: 18px; line-height: 1.7; color: var(--ink-2);
}
@media (min-width: 1000px) {
  .r-body { grid-template-columns: [full-start] minmax(20px, 1fr) [wide-start] 120px [text-start] var(--r-text) [text-end] 120px [wide-end] minmax(20px, 1fr) [full-end]; }
}
.r-body > * { grid-column: text; min-width: 0; }
.r-body > .r-statrow, .r-body > .r-table, .r-body > .r-video, .r-body > .r-figure--wide { grid-column: wide; }

.r-body > p { margin: 0 0 1.15em; }
.r-body > p.r-lede, .r-body > p:first-child { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.6; color: var(--ink); }
.r-body strong { color: var(--ink); }
.r-body a, .r-sources a {
  color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.r-body a:hover { background: var(--cream); }
.r-body ul, .r-body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.r-body li { margin-bottom: .4em; }

/* H2: auto-numbered section heads (01, 02 ...), no editor work */
.r-body > h2 {
  counter-increment: sec; scroll-margin-top: 110px;
  font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.04; letter-spacing: -.018em; color: var(--ink); text-wrap: balance;
  margin: clamp(64px, 8vw, 96px) 0 18px;
}
.r-body > h2::before {
  content: counter(sec, decimal-leading-zero); display: block; width: 68px; margin-bottom: 14px;
  font-size: 15px; letter-spacing: .04em; color: var(--coral-text);
  background: linear-gradient(var(--coral), var(--coral)) right 52% / 34px 2px no-repeat;
}
.r-body > h2::after { content: none; }
.r-body > h2:first-child { margin-top: 0; }
.r-body > h3 {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(21px, 2vw, 25px); line-height: 1.2;
  color: var(--ink); margin: 40px 0 10px;
}

/* ---------- Contents card (auto from H2s) ---------- */
.r-toc { background: var(--paper-2); border: 1.8px solid var(--ink); border-radius: 22px; padding: 24px 26px 18px; margin: 12px 0 8px; box-shadow: var(--shadow-paper); }
.r-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.r-toc__head b { font-family: 'Kalam', cursive; font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.r-toc__head span { font-size: 13px; color: var(--ink-3); }
.r-toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; counter-reset: toc; }
.r-toc li { break-inside: avoid; counter-increment: toc; margin: 0; }
.r-toc a { display: flex; gap: 10px; padding: 7px 0; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--rule); }
.r-toc a::before { content: counter(toc, decimal-leading-zero); font-family: 'Fraunces', serif; font-weight: 900; font-size: 13px; color: var(--coral-text); min-width: 22px; padding-top: 1px; }
.r-toc a:hover { color: var(--coral-text); }
.r-toc__more { display: none; }

/* =============================================================
   BLOCKS
   ============================================================= */

/* 3. Image with caption */
.r-figure { margin: 36px 0; }
.r-figure img { width: 100%; border: 1.8px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-paper); }
.r-figure figcaption, .r-video figcaption, .r-table figcaption, .r-quote-src {
  display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ink-3);
}
.r-figure figcaption::before, .r-video figcaption::before, .r-table figcaption::before {
  content: ''; flex: 0 0 18px; height: 2px; background: var(--coral); transform: translateY(-4px);
}

/* 4. Stat callout: big number, its sentence, its source */
.r-stat { display: grid; grid-template-columns: 11rem 1fr; gap: 4px 28px; padding: 22px 0; margin: 0; }
.r-stat + .r-stat { border-top: 1.5px dashed var(--rule); }
p + .r-stat, h3 + .r-stat, h2 + .r-stat { margin-top: 6px; }
.r-stat > * { margin: 0; }
.r-stat__num {
  grid-row: span 2; text-align: right; color: var(--ink);
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 40px; line-height: 1.02; letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: .2em;
  text-underline-offset: -.08em; text-decoration-skip-ink: none;
}
.r-stat__num.is-long { font-size: 27px; padding-top: 4px; }  /* template adds is-long over 7 characters */
.r-stat__text { font-size: 17.5px; line-height: 1.55; color: var(--ink); }
.r-stat__src { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.r-stat__src a { color: var(--ink-3); text-decoration-color: var(--ink-4); text-decoration-thickness: 1px; }

/* 5. Stat row: 2 to 4 tiles, stack on a phone */
.r-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin: 28px 0; }
.r-statrow + .r-statrow { margin-top: -8px; }   /* back-to-back rows read as one set */
.r-tile {
  position: relative; background: var(--paper); border: 1.8px solid var(--ink); border-radius: 20px;
  padding: 22px 20px 18px; box-shadow: var(--shadow-paper); display: flex; flex-direction: column; gap: 10px; min-width: 0;
  --bar: var(--coral);
}
.r-tile:nth-child(4n+2) { --bar: var(--yellow); }
.r-tile:nth-child(4n+3) { --bar: var(--cyan); }
.r-tile:nth-child(4n+4) { --bar: var(--green); }
.r-tile > * { margin: 0; }
.r-tile__num {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -.025em; color: var(--ink);
  font-variant-numeric: lining-nums;
  text-decoration: underline; text-decoration-color: var(--bar); text-decoration-thickness: .2em;
  text-underline-offset: -.08em; text-decoration-skip-ink: none;
}
.r-tile__num.is-long { font-size: 34px; }
.r-tile__text { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.r-tile__src { margin-top: auto !important; padding-top: 6px; font-family: 'Kalam', cursive; font-size: 14px; color: var(--ink-3); }
.r-tile__src a { color: inherit; }

/* 6. Story quote */
.r-quote {
  position: relative; margin: 28px 0; background: var(--cream); border: 1.8px solid var(--ink); border-radius: 20px;
  padding: 26px 30px 24px; box-shadow: var(--shadow-paper-lg);
}
.r-quote::before { content: '\201C'; display: block; height: 40px; font-family: 'Fraunces', serif; font-weight: 900; font-size: 96px; line-height: .9; color: var(--coral); }
.r-quote blockquote { margin: 0; }
.r-quote blockquote p { margin: 0 0 .6em; font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.38; color: var(--ink); }
.r-quote figcaption { display: flex; gap: 10px; align-items: baseline; font-family: 'Kalam', cursive; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.r-quote figcaption::before { content: ''; flex: 0 0 22px; height: 2px; background: var(--coral); transform: translateY(-5px); }
.r-quote + .r-quote { margin-top: 22px; }

/* 7. Table */
.r-table { margin: 32px 0; }
.r-table__scroll { border: 1.8px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-paper); background: var(--paper); }
.r-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; font-variant-numeric: tabular-nums lining-nums; }
.r-table th { background: var(--ink); color: var(--paper); text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 14px 18px; }
.r-table td { padding: 14px 18px; color: var(--ink); border-top: 1px solid var(--rule-soft); }
.r-table tbody tr:nth-child(even) td { background: var(--paper-2); }
.r-table td:first-child { font-weight: 700; }
.r-table .n { text-align: right; }

/* 8. Callout box: note and help */
.r-callout { position: relative; margin: 36px 0; border-radius: 20px; padding: 26px 28px 22px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.r-callout > p { margin: 0 0 .7em; }
.r-callout > p:last-child, .r-callout > ul:last-child { margin-bottom: 0; }
.r-callout ul { padding-left: 1.2em; margin: 0; }
.r-callout li { margin-bottom: .6em; }
.r-callout__label {
  position: absolute; top: -14px; left: 22px; background: var(--ink); color: var(--paper);
  font-family: 'Kalam', cursive; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 999px; transform: rotate(-2deg);
}
.r-callout--note { background: var(--paper-2); border: 1.5px dashed var(--ink); }
.r-callout--help { background: var(--cream); border: 2.5px solid var(--coral); box-shadow: 5px 6px 0 rgba(255,94,81,0.28); padding-left: 88px; }
.r-callout--help::before {  /* phone icon drawn by CSS, so the saved HTML stays clean */
  content: ''; position: absolute; left: 24px; top: 26px; width: 44px; height: 44px; border-radius: 50%; border: 1.8px solid var(--ink);
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.r-callout--help .r-callout__title { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; line-height: 1.2; color: var(--ink); margin-bottom: 8px; }
.r-callout--help a[href^="tel:"], .r-callout--help a[href^="sms:"] { color: var(--ink); font-weight: 700; white-space: nowrap; }
.r-callout__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.r-callout__actions a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper) !important; text-decoration: none !important; font-weight: 700; font-size: 14.5px; white-space: nowrap;
}
.r-callout__actions a:hover { background: var(--coral); }

/* 9. Video embed (YouTube, Vimeo) and link card (Riverside, Kollab) */
.r-video { margin: 40px 0; }
.r-video__frame { position: relative; aspect-ratio: 16 / 9; border: 1.8px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-paper-lg); background: var(--ink); }
.r-video__frame iframe, .r-video__frame img { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.r-video--link .r-video__frame img { opacity: .9; }
.r-video__play {
  position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none;
}
.r-video__play span {
  display: inline-flex; align-items: center; gap: 10px; background: var(--coral); color: #fff; border: 1.8px solid var(--ink);
  border-radius: 999px; padding: 14px 24px 14px 18px; font-weight: 700; font-size: 15px; box-shadow: var(--shadow-paper);
}
.r-video__play svg { width: 22px; height: 22px; }

/* 10. Divider */
.r-divider {
  border: 0; width: 66px; height: 12px; margin: 56px auto !important; justify-self: center;
  background:
    radial-gradient(circle at 6px 6px, var(--coral) 5.5px, transparent 6px),
    radial-gradient(circle at 33px 6px, var(--yellow) 5.5px, transparent 6px),
    radial-gradient(circle at 60px 6px, var(--cyan) 5.5px, transparent 6px);
}

/* =============================================================
   ARTICLE FOOT: sources, share, related, call to action
   ============================================================= */
.r-foot { max-width: var(--r-text); margin: 0 auto; padding: 0 20px; box-sizing: content-box; }
.r-sources { margin-top: 48px; padding-top: 32px; border-top: 1.5px solid var(--ink); }
.r-sources h2 { font-family: 'Fraunces', serif; font-weight: 900; font-size: 28px; line-height: 1.1; margin-bottom: 16px; }
.r-sources ol { margin: 0; padding: 0; list-style: none; counter-reset: src; }
.r-sources li { counter-increment: src; display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 9px 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); border-bottom: 1px dashed var(--rule); }
.r-sources li::before { content: counter(src); font-family: 'Fraunces', serif; font-weight: 900; font-size: 14px; color: var(--coral-text); padding-top: 1px; }

.r-sharebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding: 20px 24px; background: var(--paper-2); border: 1.8px solid var(--ink); border-radius: 22px; }
.r-sharebar b { font-family: 'Fraunces', serif; font-weight: 900; font-size: 22px; }
.r-sharebar .r-copied { font-family: 'Kalam', cursive; font-size: 14px; color: var(--teal); }

.r-related { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 8vw, 96px) clamp(20px, 5vw, 80px) clamp(64px, 8vw, 96px); box-sizing: content-box; }
.r-related .ri-gridhead { margin-top: 0; }

.r-cta { position: relative; overflow: hidden; background: var(--cream); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.r-cta__inner { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 80px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px 56px; align-items: center; box-sizing: content-box; }
.r-cta h2 { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(34px, 4.4vw, 58px); line-height: 1; letter-spacing: -.02em; }
.r-cta p { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
.r-cta .btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.r-cta .pill { box-shadow: var(--shadow-paper); }
.r-cta .shape { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; }

/* Newsletter signup (Bolt, 10/12): on the Reports page and under every report. Nova's GHL form sits
   in a white card, the same parts as the homepage's newsletter band. */
.r-news { background: var(--paper-2); border-top: 1.5px solid var(--ink); }
.r-news__inner { max-width: 1180px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px 56px; align-items: center; box-sizing: content-box; }
.r-news h2 { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(32px, 4vw, 52px); line-height: 1; letter-spacing: -.02em; }
.r-news h2 + p { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.r-news__card { background: #fff; border: 1.8px solid var(--ink); border-radius: 22px; padding: 22px 22px 20px; box-shadow: var(--shadow-paper-lg); overflow: hidden; }
.r-news__card iframe { display: block; min-height: 300px; }
.r-news__pv { margin: 0; padding: 0 0 22px; font-family: 'Kalam', cursive; font-size: 17px; color: var(--ink-3); }
/* Pillar marks (Pixel, 10/12): PCN Newsletter is the sixth pillar, so this band gets its orange tab and an
   eyebrow, the same as the homepage's Newsletter band. The eyebrow needs one line of markup (r-news__eyebrow). */
.r-news__inner { position: relative; }
.r-news__inner::before { content: ''; position: absolute; top: -1.5px; left: clamp(20px, 5vw, 80px); width: 110px; height: 8px; background: #FD9C27; border: 1.5px solid var(--ink); border-top: 0; border-radius: 0 0 6px 6px; }
.r-news__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.r-news__eyebrow::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #FD9C27; border: 1.5px solid var(--ink); }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (min-width: 768px) {
  .r-body > .r-quote:nth-of-type(odd) { transform: rotate(-.5deg); }
  .r-body > .r-quote:nth-of-type(even) { transform: rotate(.5deg); }
}
@media (max-width: 999px) {
  .r-statrow:has(> .r-tile:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ri-feature { grid-template-columns: 1fr; }
  .ri-feature__media { border-right: 0; border-bottom: 1.8px solid var(--ink); aspect-ratio: 16 / 9; }
  .ri-grid { grid-template-columns: repeat(2, 1fr); }
  .r-cta__inner { grid-template-columns: 1fr; }
  .r-cta .btns { justify-content: flex-start; }
  .r-news__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ri-hero .shape, .r-head .shape, .r-cta .shape { display: none; }
  .ri-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -20px; padding-right: 20px; }
  .ri-chips::-webkit-scrollbar { display: none; }
  .ri-grid { grid-template-columns: 1fr; gap: 22px; }
  .ri-gridhead { flex-direction: column; align-items: flex-start; gap: 6px; }

  .r-head { padding-top: 32px; }
  .r-title { max-width: none; }
  .r-meta { align-items: flex-start; }
  .r-share .lbl { display: none; }
  .r-cover { padding: 0 12px; }
  .r-cover img { border-radius: 18px; }

  .r-body { font-size: 17px; }
  .r-toc { padding: 20px 18px 14px; }
  .r-toc ol { columns: 1; }
  .r-toc.is-collapsed li:nth-child(n+6) { display: none; }
  .r-toc.is-collapsed .r-toc__more {
    display: flex; width: 100%; justify-content: center; margin-top: 12px; min-height: 44px; align-items: center;
    background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; font: 700 14px 'DM Sans', sans-serif; color: var(--ink); cursor: pointer;
  }

  .r-stat { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .r-stat__num { grid-row: auto; text-align: left; font-size: 38px; }
  .r-stat__num.is-long { font-size: 30px; padding-top: 0; }
  .r-stat__text { font-size: 17px; }

  .r-statrow, .r-statrow:has(> .r-tile:nth-child(4)) { grid-template-columns: 1fr; gap: 16px; }
  .r-statrow + .r-statrow { margin-top: -12px; }
  .r-tile__num { font-size: 42px; }

  .r-quote { padding: 22px 22px 20px; }

  /* Table becomes one card per row; the template copies each header into data-label */
  .r-table__scroll { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
  .r-table thead { display: none; }
  .r-table table, .r-table tbody, .r-table tr, .r-table td { display: block; width: 100%; }
  .r-table tr { border: 1.8px solid var(--ink); border-radius: 18px; overflow: hidden; margin-bottom: 14px; background: var(--paper); box-shadow: var(--shadow-paper); }
  .r-table tbody tr:nth-child(even) td { background: transparent; }
  .r-table td { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px dashed var(--rule); }
  .r-table td::before { content: attr(data-label); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
  .r-table td:first-child { background: var(--ink) !important; color: var(--paper); border-top: 0; font-family: 'Fraunces', serif; font-size: 19px; padding: 12px 16px; }
  .r-table td:first-child::before { content: none; }

  .r-callout { padding: 24px 20px 20px; }
  .r-callout--help { padding: 22px 20px 20px; }
  .r-callout--help::before { position: static; display: block; margin-bottom: 12px; }
  .r-callout__actions a { width: 100%; justify-content: center; }

  .r-sharebar { flex-direction: column; align-items: flex-start; }
  .r-sources li { grid-template-columns: 28px 1fr; }
}

/* The live about.css forces every h1 to clamp(44px, 11vw, 72px) !important at 720px and below.
   Keep the designed sizes for the two Reports titles (Bolt found the hero, 10/11; the article title is hit from about 480 to 720px). */
@media (max-width: 720px) {
  .ri-hero h1 { font-size: clamp(56px, 9vw, 128px) !important; }
  .r-title { font-size: clamp(44px, 7.4vw, 96px) !important; }
}