/* ==========================================================================
   article-v11.css: the v11 ARTICLE layer for insight papers.

   Load order (head, after the full subpage stack in /Assets/site-v11.css):

     /v3/assets/css/aeolus.css   v10 primitives
     /Assets/site.css            v10 subpage layout
     /v2/assets/*.css            v11 brand layers (self-hosted, tokens,
                                 backgrounds, glass, melt)
     /v2/v11.css                 v11 shared structure (nav, footer, melts)
     /Assets/site-v11.css        v11 subpage components (hero, cards, faq, cta)
     /Assets/article-v11.css     THIS FILE: the long-form reading layer

   Everything here builds on the surface-aware inks site-v11.css defines
   (--sv-ink / --sv-lede / --sv-body / --sv-label / --sv-accent / --sv-rule),
   so the same component reads correctly on cream and on night. Gold on cream
   is always bronze (--sv-accent resolves to --aeolus-bronze there).

   PAGE ANATOMY (copy /insights/ARTICLE_TEMPLATE_V11.html):

     header.page-hero.art-hero.aeolus-canvas-dark#top     > .bg-nightHero
       > .page-hero-inner: crumbs, h1 (line + <em>line two</em>),
         .hero-sub (the dek), .article-meta (byline, date, read time)
     section.art-brief-sec.aeolus-canvas-dark             > .bg-night
       > .art-col > .art-brief.glass-dark: "The short answer" + contents
     .melt[data-from=night][data-to=cream]
     section.art-sec.aeolus-canvas                        > .bg-cream
       > .art-col > article.article-body (h2 + p.art-answer, the paper)
     section.art-faq.faq-section.aeolus-canvas            > .bg-cream (flat)
     section.related-section.aeolus-canvas                > .bg-cream (flat)
     .melt[data-from=cream][data-to=nightCool]
     section#cta.final-cta.cta-band                       > .bg-nightCool
     footer.site-footer                                   > .bg-nightCool

   The hero is a <header>, so (site-v11.css rule) it must be followed by a
   night <section>, never a melt: the brief section is that night section,
   and it does real work (a self-contained answer up top for readers and
   answer engines).

   Sections:
     1. Column + hero
     2. The brief (short answer + contents)
     3. Body typography (h2/h3/p/lists/strong/links)
     4. Answer-first paragraph (.art-answer)
     5. Pull quote, blockquote, source line
     6. Data tables
     7. Checklist, formula, callout
     8. Definition list (glossary pages)
     9. FAQ + related row on an article page
    10. Small screens
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. COLUMN + HERO
   One column for the whole paper: 880px wide, centred, with the reading
   measure (720px) set on the text inside it. Hero copy, brief, body, FAQ
   and related cards all share the column's left edge.
   -------------------------------------------------------------------------- */
:root {
  --art-col: 880px;
  --art-measure: 720px;
}
.art-col { max-width: var(--art-col); margin: 0 auto; position: relative; z-index: 2; }

.art-hero { min-height: clamp(480px, 70svh, 720px); }
.art-hero .page-hero-inner { max-width: var(--art-col); margin: 0 auto; }
.art-hero h1 { font-size: clamp(2.1rem, 4.3vw, 58px); max-width: 20ch; }
/* Owner ruling 2026-10-04: no split two-line headline with a bolder second
   line on articles (overused, reads as templated). The <em> in article H1s
   now renders inline in the same weight, so titles wrap naturally. */
.art-hero h1 em { display: inline; font-weight: inherit !important; font-style: inherit; }
.art-hero .hero-sub { max-width: 58ch; }

/* Byline row on night: mono micro caption, same register as the deck. */
.art-hero .article-meta {
  gap: 0.9rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: var(--aeolus-ls-micro);
  text-transform: uppercase;
  color: var(--aeolus-text-on-dark-faint);
}
.art-hero .article-meta .byline { color: var(--aeolus-text-on-dark-lede); }
.art-hero .article-meta a.byline { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art-hero .article-meta .sep { background: var(--aeolus-gold-400); opacity: 0.55; }


/* --------------------------------------------------------------------------
   2. THE BRIEF: night continuation under the hero. A glass card with the
   self-contained short answer and the paper's contents.
   -------------------------------------------------------------------------- */
.art-brief-sec { padding: clamp(0.5rem, 1.5vw, 1rem) var(--pad) clamp(3rem, 6vw, 4.5rem); }
.art-brief {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.art-brief .art-cap {
  display: block;
  margin: 0 0 0.75rem;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: var(--aeolus-ls-label);
  text-transform: uppercase;
  color: var(--aeolus-gold-400);
}
.art-brief p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.65;
  color: var(--aeolus-text-on-dark-lede);
}
.art-brief p b, .art-brief p strong { font-weight: 500; color: var(--aeolus-text-on-dark); }
.art-toc { border-left: 1px solid var(--aeolus-hairline-on-dark); padding-left: clamp(1rem, 2vw, 1.6rem); }
.art-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 0.55rem; }
.art-toc li { counter-increment: toc; display: grid; grid-template-columns: 1.8rem 1fr; font-size: 0.92rem; line-height: 1.45; }
.art-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font: 400 11px/1.9 var(--font-mono);
  letter-spacing: var(--aeolus-ls-marker);
  color: var(--aeolus-gold-marker, var(--aeolus-gold-400));
}
/* Specificity beats site-v11's in-copy link rule (gold + underline): a
   contents list is navigation, not prose. */
main .aeolus-canvas-dark .art-toc li a:not([class]) { color: var(--aeolus-text-on-dark-lede); text-decoration: none; }
main .aeolus-canvas-dark .art-toc li a:not([class]):hover { color: var(--aeolus-gold-400); text-decoration: underline; text-underline-offset: 3px; }


/* --------------------------------------------------------------------------
   3. BODY TYPOGRAPHY on cream. Overrides the v10 .article-body in aeolus.css
   (Cormorant/Outfit sizes, gold links) with v11 type and bronze ink.
   Body H2s are single headings, not the two-line section grammar: a paper
   has many of them and each is a question or a claim, so no <em> line.
   -------------------------------------------------------------------------- */
.art-sec { padding: clamp(3.4rem, 6.5vw, 5.5rem) var(--pad) clamp(2.5rem, 5vw, 4rem); }
/* A paper's body section runs thousands of pixels tall, and .bg-aurora is
   sized by inset: -14% of its section, so on a tall section the cream
   aurora's lobes stretch into a full-height band down one side. Pin the
   aurora to a viewport-scale box at the top, where it meets the melt, with
   the same ~11% overhang the junction masks in site-v11.css section 3
   assume; their bottom fade then dissolves it into flat cream. */
.art-sec > .bg-cream > .bg-aurora {
  top: -170px;
  bottom: auto;
  height: 1560px;
}
main .article-body {
  max-width: var(--art-measure);
  margin: 0;
  font-size: clamp(1.02rem, 1.12vw, 1.09rem);
  line-height: 1.74;
  font-weight: 400;
  color: var(--sv-lede);
}
main .article-body > :first-child { margin-top: 0; }
main .article-body p { margin: 0 0 1.35rem; }
main .article-body h2 {
  margin: clamp(2.8rem, 5vw, 3.6rem) 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.5vw, var(--aeolus-web-fs-h2));
  font-weight: 400;
  line-height: var(--aeolus-lh-display);
  letter-spacing: var(--aeolus-ls-display);
  color: var(--sv-ink);
  text-wrap: balance;
  scroll-margin-top: 96px;
}
main .article-body h3 {
  margin: 2.2rem 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--aeolus-ls-display);
  color: var(--sv-ink);
  scroll-margin-top: 96px;
}
main .article-body :is(ul, ol) { margin: 0 0 1.5rem; padding-left: 1.3rem; }
main .article-body li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
main .article-body li::marker { color: var(--sv-accent); }
main .article-body ol > li::marker { font: 400 0.85em var(--font-mono); }
main .article-body :is(strong, b) { font-weight: 500; color: var(--sv-ink); }
main .article-body code {
  font: 400 0.88em var(--font-mono);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(26, 25, 22, 0.05);
  color: var(--sv-ink);
}

/* Links: bronze, underlined, never a bare colour change (site-v11 covers
   p/li; this extends it to tables, captions and source lines). */
main .article-body a:not([class]) {
  color: var(--sv-accent);
  font-weight: 500;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(140, 90, 22, 0.45);
}
main .article-body a:not([class]):hover { text-decoration-color: currentColor; }


/* --------------------------------------------------------------------------
   4. ANSWER-FIRST PARAGRAPH: the self-contained 40-80 word answer that opens
   every section. Slightly larger, full ink, bronze rule: the passage an
   answer engine lifts, and the one a skimmer reads.
   -------------------------------------------------------------------------- */
main .article-body .art-answer {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--sv-accent);
  font-size: clamp(1.06rem, 1.2vw, 1.15rem);
  line-height: 1.66;
  color: var(--sv-ink);
}
main .article-body .art-lede {
  font-size: clamp(1.1rem, 1.35vw, 1.22rem);
  line-height: 1.62;
  color: var(--sv-ink);
}


/* --------------------------------------------------------------------------
   5. PULL QUOTE, BLOCKQUOTE, SOURCE LINE
   Zodiak has no italic face (BRAND-SPEC 3.1), so emphasis is weight and a
   bronze rule, never a slant.
   -------------------------------------------------------------------------- */
main .article-body .pullquote {
  margin: 2.4rem 0;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.3rem, 2.8vw, 2rem);
  border: 1px solid var(--aeolus-glass-light-card-border, rgba(26,25,22,.08));
  border-left: 3px solid var(--sv-accent);
  border-radius: 0 var(--aeolus-radius-card) var(--aeolus-radius-card) 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
main .article-body .pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: var(--aeolus-ls-display);
  color: var(--sv-ink);
}
main .article-body .pullquote .pq-source,
main .article-body .src {
  display: block;
  margin-top: 0.8rem;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: var(--aeolus-ls-micro);
  text-transform: uppercase;
  color: var(--sv-label);
}
main .article-body blockquote:not(.pullquote) {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--sv-rule);
  color: var(--sv-body);
}


/* --------------------------------------------------------------------------
   6. DATA TABLES: may run to the full 880px column. Mono captions and
   headers, tabular figures, first column in full ink.
   -------------------------------------------------------------------------- */
main .article-body .data-table-wrap {
  width: min(var(--art-col), calc(100vw - 2 * var(--pad)));
  margin: 2.2rem 0 2.4rem;
  border-radius: var(--aeolus-radius-card);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--aeolus-hairline-on-light);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow-x: auto;
}
main .article-body .data-table { font-size: 0.93rem; }
main .article-body .data-table caption {
  padding: 1.1rem 1.3rem 0.3rem;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: var(--aeolus-ls-label);
  color: var(--sv-label);
}
main .article-body .data-table th {
  padding: 0.9rem 1.3rem 0.7rem;
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: var(--aeolus-ls-micro);
  color: var(--sv-label);
  border-bottom: 1px solid var(--aeolus-hairline-on-light);
}
main .article-body .data-table td {
  padding: 0.8rem 1.3rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--sv-lede);
  border-bottom: 1px solid var(--aeolus-hairline-on-light);
}
main .article-body .data-table td:first-child { color: var(--sv-ink); font-weight: 500; }
main .article-body .data-table tbody tr:hover { background: rgba(255, 255, 255, 0.45); }
main .article-body .data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
main .article-body .data-table + .src,
main .article-body .data-table-wrap + .src { margin: -1.6rem 0 2.2rem; }


/* --------------------------------------------------------------------------
   7. CHECKLIST, FORMULA, CALLOUT
   -------------------------------------------------------------------------- */
main .article-body .checklist {
  list-style: none;
  margin: 1.6rem 0 2rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.6vw, 1.8rem);
  border: 1px solid var(--aeolus-hairline-on-light);
  border-radius: var(--aeolus-radius-card);
  background: rgba(255, 255, 255, 0.5);
}
main .article-body .checklist li {
  position: relative;
  margin: 0;
  padding: 0.55rem 0 0.55rem 2rem;
  border-bottom: 1px solid var(--aeolus-hairline-on-light);
}
main .article-body .checklist li:last-child { border-bottom: 0; }
main .article-body .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--sv-accent);
  border-radius: 3px;
}
main .article-body .checklist li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.1rem;
  width: 5px;
  height: 8px;
  border: solid var(--sv-accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
main .article-body .checklist .cap {
  display: block;
  padding-bottom: 0.4rem;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: var(--aeolus-ls-label);
  text-transform: uppercase;
  color: var(--sv-label);
}
main .article-body .checklist li.cap-row { padding-left: 0; }
main .article-body .checklist li.cap-row::before,
main .article-body .checklist li.cap-row::after { display: none; }

main .article-body .formula {
  margin: 1.6rem 0 1.8rem;
  padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.6vw, 1.6rem);
  border-radius: var(--aeolus-radius-card);
  background: var(--aeolus-night-950, #0a0f1a);
  color: var(--aeolus-text-on-dark);
  font: 400 clamp(0.88rem, 1.05vw, 0.98rem)/1.7 var(--font-mono);
  overflow-x: auto;
}
main .article-body .formula .f-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 10.5px;
  letter-spacing: var(--aeolus-ls-label);
  text-transform: uppercase;
  color: var(--aeolus-gold-400);
}
main .article-body .formula .f-row + .f-row {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--aeolus-hairline-on-dark);
}

main .article-body .callout {
  margin: 2rem 0;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.7rem);
  border-radius: var(--aeolus-radius-card);
  background: var(--aeolus-gold-wash);
  border: 1px solid rgba(140, 90, 22, 0.28);
}
main .article-body .callout p:last-child { margin-bottom: 0; }
main .article-body .callout .art-cap {
  display: block;
  margin-bottom: 0.5rem;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: var(--aeolus-ls-label);
  text-transform: uppercase;
  color: var(--sv-accent);
}


/* --------------------------------------------------------------------------
   8. DEFINITION LIST (glossary papers). Each term is an h3 with a <dfn>
   followed by its self-contained definition paragraph.
   -------------------------------------------------------------------------- */
main .article-body .term {
  margin: 0 0 1.4rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--aeolus-hairline-on-light);
}
main .article-body .term h3 { margin: 0 0 0.45rem; }
main .article-body .term dfn { font-style: normal; }
main .article-body .term .aka {
  display: block;
  margin: -0.2rem 0 0.5rem;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: var(--aeolus-ls-micro);
  text-transform: uppercase;
  color: var(--sv-label);
}
main .article-body .term p { margin-bottom: 0.6rem; }


/* --------------------------------------------------------------------------
   9. FAQ + RELATED on an article page: same column as the body.
   -------------------------------------------------------------------------- */
.art-faq { padding: clamp(1rem, 2.5vw, 2rem) var(--pad) clamp(2.5rem, 5vw, 4rem); }
.art-faq .faq-head,
.art-faq .faq-list { max-width: var(--art-col); margin-left: auto; margin-right: auto; }
.art-faq .faq-head h2 { margin: 0; }
main .art-faq .faq-q { font-family: var(--font-display); font-weight: 400; color: var(--sv-ink); }
main .art-faq .faq-q:hover { color: var(--sv-accent); }
main .art-faq .faq-toggle { color: var(--sv-accent); }
main .art-faq .faq-a-inner { max-width: 68ch; color: var(--sv-lede); }
main .art-faq .faq-a-inner a { color: var(--sv-accent); text-decoration: underline; text-underline-offset: 3px; }

.art-related .related-inner > .label,
.art-related .ins-grid { max-width: var(--art-col); }
.art-related .ins-card h3 { font-weight: 400; }
.art-related .ins-card p { color: var(--sv-body); }


/* --------------------------------------------------------------------------
   10. SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .art-brief { grid-template-columns: 1fr; }
  .art-toc { border-left: 0; padding-left: 0; border-top: 1px solid var(--aeolus-hairline-on-dark); padding-top: 1.2rem; }
  .art-hero { min-height: clamp(440px, 64svh, 620px); }
  .art-hero h1 { max-width: none; }
}
@media (max-width: 560px) {
  main .article-body .data-table { font-size: 0.86rem; }
  main .article-body .data-table :is(th, td) { padding-left: 0.75rem; padding-right: 0.75rem; }
  main .article-body .data-table caption { padding-left: 0.75rem; padding-right: 0.75rem; }
  .art-hero .article-meta { gap: 0.6rem; }
}