/* An insight's own page (insight-*.html, owner 2026-10-24: "just like a medium post"): one reading column, no pictures.
   The site's own type (Space Grotesk 700 for the title and headings, Inter for the text), its ink and its brand gold
   (the kicker, the "In short" rule and the list marks); every size is a site.css --t-* token. Classes art- prefixed. */

.art { padding-block: clamp(120px, 11vw, 168px) clamp(64px, 7vw, 112px); }
.art__inner { max-width: 760px; }

.art__kick { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); }
.art__title {
  margin-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h1);
  line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance;
}
.art__byline { margin-top: 18px; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-2); }

/* "In short": the article's summary, set apart by a gold rule */
.art__short { margin-top: clamp(28px, 3.4vw, 44px); padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); }
.art__short-label { font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.art__short p + p, .art__short-label + p { margin-top: 8px; }
.art__short p:not(.art__short-label) { font-size: var(--t-lead); line-height: 1.6; color: var(--ink); }

/* the article: a long-read column, Inter at the Body Large size */
.art__body { margin-top: clamp(28px, 3.4vw, 44px); font-size: var(--t-lead); line-height: 1.75; color: var(--ink); }
.art__body p + p, .art__body ul + p, .art__body ol + p, .art__body p + ul, .art__body p + ol { margin-top: 1.1em; }
.art__body h2 { margin-top: 1.9em; font-size: var(--t-h3); line-height: 1.2; }
.art__body h2 + p, .art__body h2 + ul { margin-top: 0.7em; }
.art__body ul, .art__body ol { display: grid; gap: 0.6em; }
.art__body li { position: relative; padding-left: 22px; }
.art__body ul > li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; background: var(--gold); }
.art__body strong { font-weight: 600; }
.art__body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

@media (max-width: 767px) {
  .art__body, .art__short p:not(.art__short-label) { font-size: var(--t-body); line-height: 1.7; }
  .art__short { padding-left: 16px; }
}

/* "Frequently asked": set apart from the article, each question spaced from the last */
.art__faq { margin-top: clamp(36px, 4.4vw, 56px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.art__faq > h2 { font-size: var(--t-h3); line-height: 1.2; }
.art__q { margin-top: 1.6em; }
.art__q h3 { font-size: var(--t-lead); font-weight: 600; line-height: 1.4; }
.art__q p { margin-top: 0.5em; line-height: 1.7; color: var(--ink-2); }

/* the live page's extras (owner, 2026-10-24): "Insights" back to the list, "More insights", the closing panel */
.art { padding-bottom: clamp(48px, 5vw, 80px); }
.art__back { margin-bottom: 18px; }
.art__back a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2); text-decoration: none;
}
.art__back a::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }   /* a back chevron */
.art__back a:hover { color: var(--ink); }
.art-more { padding-bottom: clamp(56px, 6vw, 96px); }
.art-more__title { padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); font-size: var(--t-h4); }
.art-more__list { margin-top: 8px; }
.art-more__list a { display: block; padding-block: 18px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.art-more__list strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--t-h6); line-height: 1.3; letter-spacing: -0.015em; }
.art-more__list span { display: block; margin-top: 6px; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
.art-more__list a:hover strong { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.art-foot { padding-block: clamp(56px, 6vw, 96px); margin-bottom: clamp(24px, 3vw, 40px); }
.art-foot .h2 { max-width: 22ch; }
.art-foot p { margin-top: 14px; color: var(--on-dark-2); font-size: var(--t-lead); }
.art-foot .actions { margin-top: 24px; }