/* Hallmark · page styles for the news articles; stamp and tokens live in site.css · hero: Banner over the article's own photo · copy: verbatim (the owner's published articles, rebuilt markup only) */

.art-head { padding-block: var(--space-xl) var(--space-2xl); }
.art-head__grid { display: grid; gap: var(--space-md); justify-items: start; }
.art-back { margin-bottom: var(--space-md); color: var(--color-ink-2); }
.art-head h1 { font-size: var(--text-section); max-width: 30ch; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.art-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.art-meta time { font-variant-numeric: tabular-nums; }
.art-head .lead { max-width: 52rem; margin-top: var(--space-xs); font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.art-head .lead p + p { margin-top: var(--space-sm); }
.art-hero { margin-top: var(--space-lg); }
.art-hero > img { width: auto; max-width: 100%; max-height: min(44rem, 80svh); }

.art-body { padding-bottom: var(--section-gap-s); }
.art-prose { max-width: 46rem; font-size: var(--text-lg); line-height: 1.7; }
.art-prose > * + * { margin-top: var(--space-md); }
.art-prose h2 { margin-top: var(--space-2xl); font-size: var(--text-2xl); text-wrap: balance; }
.art-prose h3 { margin-top: var(--space-xl); font-size: var(--text-title); text-wrap: balance; }
.art-prose h4 { margin-top: var(--space-lg); font: 600 var(--text-lg)/1.35 var(--font-body); }
.art-prose > :is(h2, h3, h4):first-child { margin-top: 0; }
.art-prose :is(h2, h3, h4) + * { margin-top: var(--space-sm); }
.art-prose p, .art-prose li { color: var(--color-ink-2); overflow-wrap: break-word; }
.art-prose strong { color: var(--color-ink); }
.art-prose ul, .art-prose ol { display: grid; gap: var(--space-xs); padding-left: 1.25em; }
.art-prose li { padding-left: var(--space-3xs); }
.art-prose a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.3em; overflow-wrap: anywhere; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.art-prose a:hover { text-decoration-color: currentColor; }
.art-prose a:active { color: var(--color-ink-2); }
.art-prose a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

.art-fig { margin: var(--space-xl) 0; }
.art-fig .frame { display: block; border-radius: var(--radius-inner); }
.art-fig figcaption { margin-top: var(--space-xs); color: var(--color-ink-2); }

.pull { margin: var(--space-xl) 0; padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); }
.pull p { font: 600 var(--text-xl)/1.35 var(--font-display); letter-spacing: -0.01em; color: var(--color-ink); text-wrap: pretty; }
.pull p + p { margin-top: var(--space-sm); }
.pull footer, .pull cite { display: block; margin-top: var(--space-sm); font: 400 var(--text-sm)/1.5 var(--font-body); font-style: normal; color: var(--color-ink-2); }

/* Case studies: the story on the left, the customer's own words and figures beside it. */
.cs__sec { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 26rem); justify-content: space-between; gap: var(--space-xl) var(--space-2xl); align-items: start; padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.cs__sec:first-child { padding-top: 0; border-top: 0; }
.cs__sec--solo { grid-template-columns: minmax(0, 46rem); }
.cs__aside { display: grid; gap: var(--space-xl); padding-top: var(--space-2xs); }
.cs__aside .pull, .cs__aside .art-fig { margin: 0; }
.cs__aside .pull p { font-size: var(--text-lg); line-height: 1.4; }

.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-md); margin: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.vs figcaption { display: grid; gap: var(--space-3xs); }
.vs figcaption strong { font: 600 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); }
.vs figcaption span { font-size: var(--text-sm); color: var(--color-ink-2); }
.vs > :not(figcaption, .vs__delta) { grid-column: 1 / -1; }
.vs__plot { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); height: 13rem; padding-top: var(--space-lg); border-bottom: 1px solid var(--color-rule-strong); }
.vs__col { position: relative; display: grid; align-items: end; }
.vs__bar { display: block; height: 100%; border-radius: var(--radius-inner) var(--radius-inner) 0 0; background: var(--color-rule-strong); transform: scaleY(var(--v)); transform-origin: bottom; }
.vs__col--uc .vs__bar { background: var(--color-accent-fill); }
.vs__col b { position: absolute; bottom: calc(var(--v) * 100% + var(--space-2xs)); left: 0; right: 0; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.vs__name { position: absolute; top: calc(100% + var(--space-xs)); left: 0; right: 0; text-align: center; font-size: var(--text-sm); color: var(--color-ink-2); }
.vs__plot { margin-bottom: var(--space-xl); }
.vs__delta { font: 600 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.vs__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.vs__table :is(th, td) { padding: var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); text-align: right; font-variant-numeric: tabular-nums; }
.vs__table th[scope="row"] { text-align: left; font-weight: 400; color: var(--color-ink-2); padding-right: var(--space-sm); }
.vs__table thead th { font-weight: 500; color: var(--color-ink); padding-left: var(--space-sm); }
.vs__note { font-size: var(--text-sm); color: var(--color-ink-2); }
.js .vs[data-play] .vs__bar { transform: scaleY(0); }
.js .vs[data-play].is-playing .vs__bar { transform: scaleY(var(--v)); transition: transform var(--dur-settle) var(--ease-out); }
.js .vs[data-play].is-playing .vs__col--uc .vs__bar { transition-delay: 200ms; }
.js .vs[data-play] .vs__col b { opacity: 0; }
.js .vs[data-play].is-playing .vs__col b { opacity: 1; transition: opacity var(--dur-long) var(--ease-out) 900ms; }
.vs [data-step] { --i: 3; }
@media (prefers-reduced-motion: reduce) {
  .js .vs[data-play] .vs__bar { transform: scaleY(var(--v)); }
  .js .vs[data-play] .vs__col b { opacity: 1; }
}

.more-news .news-rows small { font-variant-numeric: tabular-nums; }
.more-news .news-rows span.frame { aspect-ratio: 3 / 2; }

@media (max-width: 60rem) {
  .cs__sec { grid-template-columns: minmax(0, 1fr); }
  .cs__aside { max-width: 34rem; }
}
@media (max-width: 40rem) {
  .art-head { padding-top: var(--space-lg); }
  .art-prose { font-size: var(--text-md); }
  .pull { padding-left: var(--space-md); }
  .vs { padding: var(--space-md); }
}