/* ============================================================
   Articles — the six blog posts, the report, the whitepaper and the
   case study (Oz's 2026 restyle). A premium long-form template in
   the homepage's language: a dark hero with the marked eyebrow and
   the article meta, a lead image straddling the hero's edge, then a
   white reading column (Source Sans 18px, 1.7 leading, Archivo 500
   headings) with wider "breakout" pieces — figures, the case-study
   quote and results, and the closing call to action — on a 880px
   measure around it.

   Loaded only by those nine pages, after site.css and theme.css, on
   <body class="theme art">. Shared tokens and the hero's padding and
   glow come from theme.css. Every rule starts at .theme so it outranks
   theme.css's own .theme-prefixed rules instead of silently losing.
   ============================================================ */
.theme.art {
  --art-wide: 880px;   /* breakout pieces and the hero */
  --art-col: 612px;    /* the reading column: 68ch of Source Sans 3 at 18px, measured */
  --art-rule: #E3E8EF;
}
.theme .art-hero .wrap, .theme .art-body .wrap { max-width: calc(var(--art-wide) + 2 * var(--gutter)); }

/* ---------- hero ---------- */
.theme .art-hero .h-section {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  max-width: 26ch;
}
.theme .art-meta { font-size: 15px; flex-wrap: wrap; }
.theme .art-meta time, .theme .art-meta__dot { color: var(--sa-muted); font-weight: 500; }
.theme .art-meta__dot { margin-inline: -2px; }
/* The lead image takes over the hero's lower air. */
.theme .art-hero:has(+ .art-body--lead) { padding-bottom: clamp(40px, 5vw, 64px); }

/* ---------- reading section ---------- */
/* The body is dark now (theme.css); the reading section paints its own white. */
.theme .art-body { --wipe-bg: #FFFFFF; background: #FFFFFF; padding-block: clamp(64px, 7.5vw, 104px); }

/* With a lead image the hero's dark ground carries on behind the top of
   the image, so the picture straddles the two grounds. A background
   band rather than a negative margin: nothing can ever cover the title. */
.theme .art-body--lead {
  --lead-band: clamp(72px, 12vw, 200px);
  padding-top: 0;
  background: linear-gradient(var(--sa-black) 0 var(--lead-band), #FFFFFF var(--lead-band));
}

/* The column: prose spans the wide measure, its text children keep to
   the reading measure, and the breakout pieces take the full width. */
.theme .art-body .prose { max-width: none; margin-top: 0; color: var(--sa-text); }
.theme .art-body .prose > * { max-width: var(--art-col); margin-inline: auto; }
.theme .art-body .prose > * + * { margin-top: 24px; }
.theme .art-body .prose p, .theme .art-body .prose li { font-size: 18px; line-height: 1.7; }

.theme .art-body .prose h2 {
  margin-top: 64px; padding-top: 0; border-top: 0;
  font-size: clamp(1.625rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -0.022em;
  color: var(--sa-text);
}
.theme .art-body .prose > h2:first-child { margin-top: 0; }
.theme .art-body .prose h2 + * { margin-top: 20px; }
.theme .art-body .prose h3 {
  margin-top: 48px;
  font-family: var(--sa-body); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em;
}
.theme .art-body .prose h3 + * { margin-top: 14px; }
/* "Tactic #1": the kicker carries the site's section marker. */
.theme .art-body .prose__eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sa-body); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--sa-link); margin-bottom: 14px;
}
.theme .art-body .prose__eyebrow::before {
  content: ""; flex: none; width: 22px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #F2AE2E 0 33%, #1CAF69 33% 66%, #3382A7 66%);
}

.theme .art-body .prose a { color: var(--sa-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.theme .art-body .prose a:hover { color: var(--sa-text); text-decoration-thickness: 2px; }
.theme .art-body .prose b, .theme .art-body .prose strong { font-weight: 600; color: var(--sa-text); }

.theme .art-body .prose ul, .theme .art-body .prose ol { gap: 12px; padding-left: 1.4em; }
.theme .art-body .prose li { padding-left: 4px; }
.theme .art-body .prose ul li::marker { color: var(--sa-blue); }
.theme .art-body .prose ol li::marker { color: var(--sa-link); font-weight: 600; }

/* ---------- images ---------- */
.theme .art-body .prose img { border-radius: 12px; }
/* One shape for every lead photo, whatever its source ratio; width and
   height attributes reserve the space so nothing shifts as it loads. */
.theme .art-body .prose > .art-lead {
  width: 100%; height: auto; max-width: none; margin-top: 0;
  aspect-ratio: 16 / 9; object-fit: cover;
  box-shadow: 0 32px 64px -36px rgba(0, 20, 70, 0.55);
}
/* The demo-set post's lead is a wide banner; cropping it to 16:9 would
   throw most of it away, so it keeps its own shape. */
.theme .art-body .prose > .art-lead[width="697"] { aspect-ratio: 697 / 229; }
.theme .art-body .prose > .art-lead + * { margin-top: clamp(40px, 5vw, 64px); }
/* Charts are white PNGs: a hairline frame on the wide measure. */
.theme .art-body .prose > .art-chart { max-width: none; margin-inline: 0; }
.theme .art-body .prose > .art-chart img { width: 100%; height: auto; display: block; }
.theme .art-body .prose > img:not(.art-lead), .theme .art-body .prose > .art-chart {
  width: 100%; height: auto; max-width: none;
  margin-block: 40px; padding: clamp(12px, 3vw, 32px);
  background: #FFFFFF; border: 1px solid var(--art-rule);
}

/* ---------- tables ---------- */
.theme .art-body .prose table {
  max-width: none; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--art-rule); border-radius: 12px; overflow: hidden; font-size: 16px;
}
.theme .art-body .prose th, .theme .art-body .prose td { padding: 14px 18px; border-bottom: 1px solid var(--art-rule); }
.theme .art-body .prose th { background: var(--sa-light); font-weight: 600; color: var(--sa-text); }
.theme .art-body .prose tr:last-child > td { border-bottom: 0; }

/* ---------- pull quote (report) ---------- */
.theme .art-body .prose > p.prose__pull {
  position: relative; margin-block: 48px; padding-left: 28px;
  font-family: var(--sa-display); font-variation-settings: "wdth" 100;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 500;
  line-height: 1.35; letter-spacing: -0.015em; color: var(--sa-text);
  text-indent: -0.4em;   /* the opening quotation mark hangs */
}
/* The logo's three strokes, stood upright. */
.theme .art-body .prose__pull::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #F2AE2E 0 33%, #1CAF69 33% 66%, #3382A7 66%);
}

/* ---------- case study: the quote card ---------- */
.theme.art .quote--inline {
  position: relative; overflow: hidden;
  max-width: none; margin: 56px 0;
  grid-template-columns: 88px 1fr; gap: 28px; align-items: start;
  padding: clamp(28px, 4.5vw, 52px);
  border-left: 0; border-radius: 12px;
  /* Text sits on the left; every stop keeps white at 7:1 or better. */
  background: linear-gradient(110deg, #0A4F5C 0%, #0B4C7E 50%, #0B3B74 100%);
  color: #FFFFFF;
}
.theme.art .quote--inline .quote__face { width: 88px; height: 88px; box-shadow: 0 0 0 4px rgba(255,255,255,0.18); }
/* An opening mark in gold, drawn, so no glyph is added to the copy. */
.theme.art .quote--inline blockquote::before {
  content: ""; display: block; width: 40px; height: 32px; margin-bottom: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 44'%3E%3Cpath fill='%23F2AE2E' d='M0 44V27C0 12 7 3 21 0l3 6c-7 2-11 7-11 14h10v24H0zm32 0V27C32 12 39 3 53 0l3 6c-7 2-11 7-11 14h10v24H32z'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.theme.art .quote--inline blockquote {
  color: #FFFFFF; font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.3; letter-spacing: -0.015em;
}
.theme.art .quote--inline figcaption {
  border-top-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88);
  font-family: var(--sa-body); font-size: 16px; font-weight: 600;
}

/* ---------- case study: the results as cards ---------- */
.theme.art .stats--results {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  margin: 56px 0; padding: 0; border: 0;
}
.theme.art .stats--results .stat {
  grid-column: span 2;
  display: flex; flex-direction: column;
  background: var(--sa-light); border-radius: 12px;
  padding: clamp(22px, 2.6vw, 30px);
}
.theme.art .stats--results .stat:nth-child(n+4) { grid-column: span 3; }
/* Line icons on a white tile, as the homepage's .sa-icon on the light band. */
.theme.art .art-icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 32px;
  background: #FFFFFF; border-radius: 10px; opacity: 1;
}
.theme.art .art-icon svg {
  width: 26px; height: 26px; fill: none; stroke: var(--sa-link); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.theme.art .stats--results .stat__num {
  font-family: var(--sa-display); font-size: clamp(2.25rem, 3.6vw, 3rem);
  line-height: 1.15;   /* = the rolling cells, so static and rolled figures line up */
  color: var(--sa-text);
}
.theme.art .stats--results .stat__label { margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--sa-text2); }
@media (max-width: 760px) {
  .theme.art .stats--results { grid-template-columns: 1fr 1fr; gap: 12px; }
  .theme.art .stats--results .stat, .theme.art .stats--results .stat:nth-child(n+4) { grid-column: auto; }
  .theme.art .stats--results .stat:last-child { grid-column: 1 / -1; }
  .theme.art .stats--results .stat__num { font-size: 1.875rem; }
  .theme.art .art-icon { margin-bottom: 24px; }
}
@media (max-width: 440px) {
  .theme.art .stats--results .stat { padding: 20px 18px; }
  .theme.art .stats--results .stat__num { font-size: 1.75rem; }
}
@media (max-width: 379px) {
  .theme.art .stats--results { grid-template-columns: 1fr; }
}

/* ---------- the closing call to action ---------- */
.theme .art-body .prose > .art-cta {
  --wave: clamp(56px, 7vw, 80px);
  position: relative; overflow: hidden;
  max-width: none; margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(28px, 5vw, 56px);
  padding-bottom: calc(clamp(28px, 5vw, 56px) + var(--wave) - 16px);
  border-radius: 12px; color: #FFFFFF;
  background: linear-gradient(110deg, #0A4F5C 0%, #0B4C7E 50%, #0B3B74 100%);
}
/* Genly's demand wave, faint, kept to a band under the text. */
.theme .art-cta::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--wave);
  pointer-events: none; opacity: 0.32;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 62 C160 64 260 22 600 12'/%3E%3Cpath d='M0 70 C170 71 270 34 600 28' opacity='.7'/%3E%3Cpath d='M0 77 C180 76 280 46 600 44' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.theme .art-cta > * { position: relative; max-width: 660px; }
.theme .art-body .prose .art-cta > * + * { margin-top: 16px; }
.theme .art-body .prose .art-cta h2, .theme .art-body .prose .art-cta h3 { margin-top: 0; color: #FFFFFF; }
.theme .art-body .prose .art-cta h2 + *, .theme .art-body .prose .art-cta h3 + * { margin-top: 16px; }
.theme .art-body .prose .art-cta h3 { font-family: var(--sa-display); font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.theme .art-body .prose .art-cta p { color: #FFFFFF; font-size: 20px; line-height: 1.6; }   /* a step up from the body: this is the close */
/* The inline link is the card's action: a gold bar under it that fills
   into a gold highlight on hover. */
.theme .art-body .prose .art-cta a:not(.btn) {
  color: #FFFFFF; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: 3px; text-underline-offset: 5px;
  border-radius: 3px;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.theme .art-body .prose .art-cta a:not(.btn):hover {
  color: var(--navy); background: var(--gold); text-decoration-color: var(--gold);
}
.theme .art-body .prose .art-cta > .art-cta__action { margin-top: 28px; }
.theme .art-body .prose .btn { text-decoration: none; line-height: 1.5; }
.theme .art-body .prose .btn--primary, .theme .art-body .prose .btn--primary:hover { color: var(--navy); }

/* Whitepaper: the worksheet download as its own light card. */
.theme .art-body .prose > .art-download {
  max-width: none; margin-top: 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  background: var(--sa-light); border-radius: 12px; padding: clamp(24px, 4vw, 40px);
}
.theme .art-body .prose .art-download h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); max-width: 26ch; }
.theme .art-body .prose .art-download .btn { margin: 0; }

/* ---------- end of article ---------- */
.theme .art-end {
  max-width: var(--art-col); margin: clamp(48px, 6vw, 72px) auto 0;
  padding-top: 32px; border-top: 1px solid var(--art-rule);
}

/* ---------- reading progress ---------- */
/* A thin bar in the logo's colours under the header that fills as the
   article is read. Pure CSS (scroll-driven animation), so browsers
   without it simply show nothing; never under reduced motion. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .theme.art .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
      background: linear-gradient(90deg, #F2AE2E, #1CAF69 50%, #1685C1);
      transform-origin: left center; transform: scaleX(0);
      animation: art-progress linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
    @keyframes art-progress { to { transform: scaleX(1); } }
  }
}

@media (max-width: 560px) {
  .theme.art .quote--inline { grid-template-columns: 1fr; gap: 20px; }
  .theme.art .quote--inline .quote__face { width: 64px; height: 64px; }
}

@media print {
  .theme .art-body--lead { background: #FFFFFF; }
  .theme .art-cta, .theme.art .quote--inline { background: #FFFFFF !important; color: #000 !important; border: 1px solid #999; }
  .theme .art-cta *, .theme.art .quote--inline * { color: #000 !important; }
  .theme.art .site-header::after, .theme .art-cta::before { display: none; }
}