/* * Corpus page type: article - 84,602 pages (Group 1 / SEAM). Scoped entirely under * [data-gg-page-type="article"] so this file can never fight the other five page-type * stylesheets landing in sibling PRs (handoffs/CORPUS-PHASE2-DESIGN-20260903.md §3, §4.1). * Every colour is one of the frozen palette tokens from css/programmatic-editorial-theme.css - * nothing here restates a hex literal. Geometry literals (676px measure, 40/28px radii, 62/20 * h2 rhythm, 265px sticky aside) are copied from §4.1/§4.2 of that spec, itself measured from * live Cleo (`landing-new/cleo-modules.css`, C62 Appendix A). */ [data-gg-page-type="article"] .gg-corpus-eyebrow { margin: 0 0 16px; font-family: 'SimplonBPMono', ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11.9px; font-weight: 450; letter-spacing: .08em; text-transform: uppercase; color: var(--gg-ink); } [data-gg-page-type="article"] .gg-corpus-hero { margin: 24px 0 32px; } [data-gg-page-type="article"] .gg-corpus-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--cleo-radius, 40px); } /* * Cleo's measured dek leading is 1.27, and that clips Devanagari and Tamil matras: the owner * rubric requires >= 1.6 on Indic body text and a headless sweep of 240 pages measured this one * selector as 146 of its 146 new matra failures (22px / 27.94px). A language selector cannot fix * it - the failing samples are Devanagari set inline on `lang="en"` pages, e.g. * `ascendant/aries-ascendant.html`'s "Mesh Lagna (मेष लग्न)" - so the leading has to clear matras * for every script. Correctness beats 1:1 fidelity on a binding acceptance criterion. */ [data-gg-page-type="article"] .gg-corpus-dek { max-width: 676px; margin: 0 0 32px; font-size: 22px; line-height: 1.6; color: var(--gg-muted); } [data-gg-page-type="article"] .gg-corpus-toc { width: 265px; margin: 0 0 32px 40px; padding: 24px; border-radius: 28px; background: var(--gg-blush); } [data-gg-page-type="article"] .gg-corpus-toc__title { margin: 0 0 12px; font-family: 'SimplonBPMono', ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11.9px; text-transform: uppercase; letter-spacing: .08em; color: var(--gg-ink); } [data-gg-page-type="article"] .gg-corpus-toc ul { margin: 0; padding: 0; list-style: none; } [data-gg-page-type="article"] .gg-corpus-toc li + li { margin-top: 8px; } [data-gg-page-type="article"] .gg-corpus-toc a { color: var(--gg-ink); text-decoration: none; } [data-gg-page-type="article"] .gg-corpus-toc a:hover { text-decoration: underline; } @media (min-width: 1280px) { [data-gg-page-type="article"] .gg-corpus-toc { float: right; position: sticky; top: 121px; } } @media (max-width: 1279px) { [data-gg-page-type="article"] .gg-corpus-toc { display: none; } } [data-gg-page-type="article"] .gg-corpus-illustration { margin: 32px auto; max-width: 676px; } [data-gg-page-type="article"] .gg-corpus-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; } [data-gg-page-type="article"] .gg-corpus-inline-cta { margin: 40px auto; max-width: 676px; } [data-gg-page-type="article"] .gg-corpus-inline-cta .cleo-pill { display: inline-flex; align-items: center; min-height: 60px; border-radius: 30px; padding: 0 26px; transition: all .2s linear; } /* * Reading measure + rhythm for the page's own body content. CSS-only, no DOM wrapper: the * article family is ~85K documents hand-authored by dozens of different scripts across years, * and a body-level max-width on every direct child of - excluding the injected shell, * footer and CTA band, which own the full page width - reaches the same 676px column Cleo's * article template uses without a full-body DOM rewrite at that scale. */ [data-gg-page-type="article"].gg-programmatic-page > :not( [data-gg-corpus-shell], [data-gg-corpus-footer], .gg-corpus-cta, script, style, link, noscript ) { max-width: 676px; margin-left: auto; margin-right: auto; } @media (max-width: 1279px) and (min-width: 761px) { [data-gg-page-type="article"].gg-programmatic-page > :not( [data-gg-corpus-shell], [data-gg-corpus-footer], .gg-corpus-cta, script, style, link, noscript ) { max-width: 46ch; } } @media (max-width: 760px) { [data-gg-page-type="article"].gg-programmatic-page > :not( [data-gg-corpus-shell], [data-gg-corpus-footer], .gg-corpus-cta, script, style, link, noscript ) { max-width: 40ch; } } [data-gg-page-type="article"] :where(h2) { margin-top: 62px; margin-bottom: 20px; } [data-gg-page-type="article"] :where(p) + :where(p) { margin-top: 16px; } [data-gg-page-type="article"] :where(p):not(.gg-corpus-dek) { color: color-mix(in srgb, var(--gg-ink) 80%, transparent); }