/* ==========================================================================
   TEMPLATE — SINGLE ARTICLE (Insights)
   Sections A–D plus the long-form reading styles (E) that extend the global
   .prose block. Paste A–D into the Single Post template's Custom CSS and
   E into Site Settings › Custom CSS so post content is styled everywhere.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED ARTICLE GRID
   One grid for header, cover caption and body, so the title, the caption
   and the reading column share a left edge.
     ≥1100px  [rail 13.5rem] [text 41rem] [breakout 1fr]
     <1100px  one centred text column
   --text is the reading measure: 41rem holds roughly 65–75 characters of
   Manrope at 17–19px (68ch runs wider, because "ch" is the width of a
   zero, not an average letter).
   -------------------------------------------------------------------------- */
.art {
  --overlap: clamp(4rem, 11vw, 11rem);
  --rail: 13.5rem;
  --col-gap: clamp(2.5rem, 5vw, 5.5rem);
  --text: 41rem;
}
.art-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--text));
  justify-content: center;
}
@media (min-width: 1100px) {
  .art-grid {
    grid-template-columns: var(--rail) minmax(0, var(--text)) minmax(0, 1fr);
    column-gap: var(--col-gap);
    justify-content: stretch;
  }
}

/* --------------------------------------------------------------------------
   A — READING PROGRESS · HEADER · COVER
   -------------------------------------------------------------------------- */
.art-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-header) + 1);
  height: 3px;
  background: var(--tw-blue);
  scale: var(--p, 0) 1;
  transform-origin: left center;
  pointer-events: none;
}

.art-hero { padding-bottom: calc(var(--overlap) + clamp(2.5rem, 5vw, 4.5rem)); }
.art-hero__grid { margin-top: clamp(2.25rem, 5vw, 4.5rem); }
.art-hero__cat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: var(--space-5); }
.art-hero__cat .eyebrow { transition: color var(--dur-fast); }
.art-hero__cat .eyebrow:hover { color: var(--tw-white); }
.art-hero__title { color: var(--tw-white); max-width: 17ch; }
.art-hero__standfirst { margin-top: clamp(1.25rem, 2.5vw, 2rem); max-width: 44ch; color: var(--fg-muted-on-dark); }
.art-hero__meta { max-width: 42rem; margin-top: clamp(2rem, 4vw, 3rem); }
.art-hero__meta dd { color: var(--tw-white); }
@media (min-width: 1100px) {
  .art-hero__cat { grid-column: 1; flex-direction: column; align-items: flex-start; padding-top: 1.1rem; margin: 0; }
  .art-hero__main { grid-column: 2 / -1; }
}
@media (max-width: 560px) {
  .art-hero__meta { grid-template-columns: repeat(3, minmax(0, auto)); gap: 0 1.25rem; }
  .art-hero__meta > div { padding-right: 0; }
  .art-hero__meta dd { font-size: 0.9375rem; }
}

/* Cover image — pulled up over the hero's lower edge. */
.art-cover { position: relative; z-index: 2; margin-top: calc(var(--overlap) * -1); grid-template-columns: minmax(0, 1fr); }
.art-cover__frame { --crop-c: rgba(143, 163, 184, 0.6); }
.art-cover__media { box-shadow: var(--shadow-lift); }
.art-cover__media img { aspect-ratio: 21 / 9; }
.art-cover__cap { margin-top: var(--space-4); }
@media (min-width: 1100px) {
  .art-cover { grid-template-columns: var(--rail) minmax(0, var(--text)) minmax(0, 1fr); }
  .art-cover__frame { grid-column: 1 / -1; }
  .art-cover__cap { grid-column: 2 / -1; }
}
@media (max-width: 900px) { .art-cover__media img { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) {
  .art { --overlap: 3.5rem; }
  .art-cover__media img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   B — BODY LAYOUT · contents rail · share · author
   -------------------------------------------------------------------------- */
.art-layout { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(4rem, 8vw, 7rem); }
/* The main column is a size container: .is-wide elements in the body break
   out to its full width (text column + breakout column) with 100cqw. */
.art-main { min-width: 0; container-type: inline-size; }
.art-rail { display: none; }
@media (min-width: 1100px) {
  .art-rail { display: block; grid-column: 1; grid-row: 1; }
  .art-main { grid-column: 2 / -1; grid-row: 1; }
  .art-rail__inner {
    position: sticky;
    top: calc(var(--header-h, 76px) + 2.5rem);
    transition: top var(--dur) var(--ease-out);
  }
  /* The header retreats on scroll-down; the rail follows it up. */
  body:has(.header.is-hidden) .art-rail__inner { top: 2.5rem; }
}

/* Contents — scroll-spy (main.js B7) marks the section being read. */
.art-toc { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.art-toc .label { display: block; margin-bottom: var(--space-4); }
.art-toc ol { border-left: 1px solid var(--line); }
.art-toc a {
  position: relative;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--fg-muted);
  transition: color var(--dur-fast);
}
.art-toc a::before {
  content: "";
  position: absolute;
  left: -1px; top: 0.35rem; bottom: 0.35rem;
  width: 2px;
  background: var(--tw-blue);
  scale: 1 0;
  transition: scale var(--dur) var(--ease-out);
}
.art-toc .num { font-size: 0.6875rem; padding-top: 0.12rem; color: inherit; }
.art-toc a:hover { color: var(--fg); }
.art-toc a.is-active { color: var(--fg); font-weight: 600; }
.art-toc a.is-active::before { scale: 1 1; }
.art-toc a.is-active .num { color: var(--accent-text); }

/* Share — icon row in the rail. */
.art-share__icons { display: flex; gap: 0.5rem; margin-top: var(--space-4); }
.art-share__icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.art-share__icon:hover, .art-share__icon:focus-visible { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.art-share__copy, .art-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.art-share__copy { margin-top: 0.6rem; }
.art-share__copy:hover, .art-share__btn:hover,
.art-share__copy:focus-visible, .art-share__btn:focus-visible { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.art-share__copy svg, .art-share__btn svg { flex: none; }

/* Contents on phones & tablets — a disclosure above the text. */
.art-toc-m { margin-bottom: clamp(2rem, 5vw, 3rem); border-block: 1px solid var(--line); }
.art-toc-m summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  cursor: pointer;
  list-style: none;
}
.art-toc-m summary::-webkit-details-marker { display: none; }
.art-toc-m__count { display: inline-flex; align-items: center; gap: 0.75rem; font-size: var(--fs-xs); color: var(--fg-muted); }
.art-toc-m__sign { position: relative; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; transition: rotate var(--dur) var(--ease-out), background-color var(--dur-fast); }
.art-toc-m__sign::before, .art-toc-m__sign::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; background: var(--fg); }
.art-toc-m__sign::before { width: 10px; height: 1.5px; }
.art-toc-m__sign::after { width: 1.5px; height: 10px; transition: scale var(--dur) var(--ease-out); }
.art-toc-m[open] .art-toc-m__sign { rotate: 180deg; background: var(--tw-blue); border-color: var(--tw-blue); }
.art-toc-m[open] .art-toc-m__sign::after { scale: 0; }
.art-toc-m ol { padding-bottom: var(--space-4); }
.art-toc-m a { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); padding-block: 0.55rem; font-size: 0.9375rem; line-height: 1.4; color: var(--fg); }
.art-toc-m a:hover { color: var(--accent-text); }
.art-toc-m .num { padding-top: 0.2rem; }
@media (min-width: 1100px) { .art-toc-m { display: none; } }

/* Article foot — share row + byline. */
.art-foot { max-width: var(--text); margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: clamp(2rem, 4vw, 2.75rem); font-size: var(--fs-body); }
.art-share--foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-5);
  padding-block: var(--space-5);
  border-block: 1px solid var(--line);
}
.art-share__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: var(--ls-tight); }
.art-share__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.art-author { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.art-author__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--tw-navy); }
.art-author__mark img { width: 58%; height: auto; }
.art-author .label { display: block; }
.art-author__name { margin-top: 0.2rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: var(--ls-tight); }
.art-author__bio { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.6; max-width: 52ch; }

/* --------------------------------------------------------------------------
   C — RELEVANT CTA (global .convert strip, spanning text + breakout)
   -------------------------------------------------------------------------- */
.art-convert { margin-top: clamp(3rem, 6vw, 4.5rem); }
.art-convert .eyebrow { margin: 0 0 var(--space-4); font-size: var(--fs-eyebrow); color: var(--tw-blue); }
.art-convert__more { margin-top: var(--space-4) !important; }
.art-convert__actions { flex-direction: column; align-items: stretch; }
@media (max-width: 860px) { .art-convert__actions { flex-direction: row; align-items: center; } }
@media (max-width: 480px) { .art-convert__actions { flex-direction: column; align-items: stretch; } }

/* --------------------------------------------------------------------------
   D — RELATED ARTICLES
   -------------------------------------------------------------------------- */
.art-related__foot { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; justify-content: center; }

/* --------------------------------------------------------------------------
   E — LONG-FORM READING  (extends the global .prose)
   Rhythm: 1.75 line height, 1.25em between blocks, generous air around
   headings, figures and quotes. Everything below is plain HTML a WordPress
   editor can produce: h2/h3, p, ul/ol, figure, blockquote, table, aside.
   -------------------------------------------------------------------------- */
.art-body { max-width: var(--text); counter-reset: sec; hanging-punctuation: first; }

/* The opening paragraph is set a step larger, in ink. */
.art-body > p:first-child {
  font-size: clamp(1.1875rem, 1.08rem + 0.45vw, 1.375rem);
  line-height: 1.6;
  color: var(--fg);
  letter-spacing: -0.012em;
}

/* Section headings carry a number that matches the contents list. */
.art-body h2 { margin-top: 2.4em; letter-spacing: var(--ls-tight); }
.art-body h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  content: counter(sec, decimal-leading-zero) / "";
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--accent-text);
}
.art-body h2 + * { margin-top: 0.85em; }

/* Components (figure, pull quote, callout, table) take 2.2em of air on
   both sides; a heading that follows keeps its own, larger, space. */
.art-body > :is(figure, .pull, .callout, .art-table) { margin-top: 2.2em; }
.art-body > :is(figure, .pull, .callout, .art-table) + :not(h2, h3) { margin-top: 2.2em; }

/* Figures — .is-wide breaks out into the right-hand column. */
.art-body figure .media img { aspect-ratio: 16 / 9; }
.art-body figcaption.cap { line-height: 1.55; }
.art-body .is-wide { width: min(100cqw, 64rem); max-width: none; }

/* Pull quote — lifted from the article's own text, never attributed.
   An ink rule with a blue lead-in, Swiss style, instead of a quote glyph. */
.art-body .pull {
  position: relative;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--fg);
}
.art-body .pull::before {
  content: "";
  position: absolute;
  top: -2px; left: 0;
  width: clamp(3rem, 8vw, 6rem);
  height: 3px;
  background: var(--tw-blue);
}
.art-body .pull p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.625rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: var(--ls-mega);
  color: var(--fg);
  max-width: 24ch;
  text-wrap: balance;
}

/* Callout box — practical asides and tips. */
.art-body .callout {
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--bg-alt);
  box-shadow: inset 3px 0 0 var(--tw-blue);
}
.art-body .callout > * + * { margin-top: 0.7em; }
.art-body .callout p { color: var(--fg); font-size: var(--fs-small); line-height: 1.7; }
.art-body .callout__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.6875rem !important;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text) !important;
}
.art-body .callout__label .regmark { width: 18px; height: 18px; opacity: 0.9; }

/* Tables — hairline Swiss table; scrolls sideways only if it must. */
.art-body .art-table { overflow-x: auto; }
.art-body table { font-size: var(--fs-small); line-height: 1.45; font-variant-numeric: tabular-nums; }
.art-body caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 1rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--fg-muted);
}
.art-body caption .num { margin-right: 0.6rem; }
.art-body th {
  padding: 0 1rem 0.75rem 0;
  border-bottom: 2px solid var(--fg);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: left;
  color: var(--fg);
  white-space: nowrap;
}
.art-body td { padding: 0.95rem 1rem 0.95rem 0; border-bottom: 1px solid var(--line); vertical-align: top; color: #344054; }
.art-body td:first-child { font-family: var(--font-display); font-weight: 600; color: var(--fg); white-space: nowrap; }
.art-body td span { color: var(--fg-muted); font-size: 0.9em; }
.art-body td:last-child, .art-body th:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.art-body td strong { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 560px) {
  .art-body table { font-size: 0.875rem; }
  .art-body th, .art-body td { padding-right: 0.75rem; white-space: normal !important; }
  .art-body th { letter-spacing: 0.04em; font-size: 0.625rem; }
  .art-body td:first-child span, .art-body td:last-child span { display: block; }
}

/* Checklist — square ticks instead of the prose diamonds. */
.art-body .checklist { gap: 0; border-top: 1px solid var(--line); }
.art-body .checklist li { padding: 0.85rem 0 0.85rem 2.4rem; border-bottom: 1px solid var(--line); line-height: 1.6; }
.art-body .checklist li::before {
  left: 0; top: calc(0.85rem + 0.8em - 0.575rem);
  width: 1.15rem; height: 1.15rem;
  rotate: 0deg;
  border-radius: 3px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' stroke='%230A73A0' stroke-width='1.8'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--tw-blue-ink);
}

.art-body em { font-style: italic; }

/* Placeholder notice (status: placeholder). Always visible — not only in
   review mode — so an unwritten article can never pass as finished. */
.art-body .art-notice {
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px dashed rgba(224, 144, 26, 0.75);
  border-radius: var(--radius-lg);
  background: rgba(245, 166, 35, 0.07);
}
.art-body .art-notice > * + * { margin-top: 0.6em; }
.art-body .art-notice p { font-size: var(--fs-small); line-height: 1.65; color: var(--fg-muted); }
.art-body .art-notice__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #8A5B05 !important;
}
.art-notice__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tw-orange); flex: none; }
.art-body .art-notice + h2 { margin-top: 1.8em; }