/* Article shell for guide, comparison, glossary, and roundup pages.
   Ledger system: Source Serif 4 display, Inter text, paper/ink/bronze.
   Tokens come from ledger.css. */

/* hero */
.art-hero { padding: 9.5rem 0 3.5rem; }
.art-hero .eyebrow { font-size: 0.8rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); }
.art-hero .eyebrow .upd { color: var(--faint); font-weight: 500; text-transform: none; letter-spacing: 0; }
.art-hero h1 { font-size: clamp(2.2rem, 3.8vw, 3.3rem); line-height: 1.1; max-width: 24ch; margin-top: 1rem; font-weight: 600; }
.art-hero .lede { font-size: 1.1rem; line-height: 1.7; color: var(--soft); max-width: 62ch; margin-top: 1.4rem; }
.byline { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: baseline; margin-top: 1.6rem; font-size: 0.84rem; color: var(--faint); }
.byline a { color: var(--soft); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hair); }
.byline a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* answer capsule: the quotable summary, first thing on the page */
.capsule { border: 1px solid var(--hair); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); padding: 1.7rem 1.9rem; margin-top: 2.4rem; max-width: 760px; }
.capsule p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.16rem; line-height: 1.6; color: var(--ink); }
.capsule .cap-src { font-family: 'Inter', sans-serif; font-size: 0.78rem; color: var(--faint); margin-top: 0.9rem; }

/* article body */
.art { padding: 1rem 0 4.5rem; }
.art .prose { max-width: 760px; }
.art .prose h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.5rem, 2.4vw, 1.95rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 3rem 0 0.9rem; }
.art .prose h3 { font-size: 1.08rem; font-weight: 650; margin: 2rem 0 0.6rem; }
.art .prose p, .art .prose li { color: var(--soft); font-size: 0.98rem; line-height: 1.72; }
.art .prose p { margin-top: 0.9rem; }
.art .prose ul, .art .prose ol { margin: 0.9rem 0 0 1.2rem; }
.art .prose li { margin-top: 0.5rem; }
.art .prose li::marker { color: var(--bronze); }
.art .prose a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hair); }
.art .prose a:hover { border-bottom-color: var(--ink); }
.art .prose strong { color: var(--ink); }

/* data tables in the exhibit register */
.twrap { overflow-x: auto; margin-top: 1.4rem; border: 1px solid var(--hair); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); }
.dtable { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; }
.dtable th { text-align: left; font-size: 0.73rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--hair); }
.dtable td { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--hair2); color: var(--soft); line-height: 1.55; vertical-align: top; }
.dtable tr:last-child td { border-bottom: none; }
.dtable td.k, .dtable td b { color: var(--ink); font-weight: 600; }
.dtable .money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* quotable expert line */
.pull { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 1.6rem 0; margin: 2.6rem 0; max-width: 760px; }
.pull p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.pull .who { font-family: 'Inter', sans-serif; font-size: 0.8rem; color: var(--faint); margin-top: 0.7rem; }

/* sources */
.sources { margin-top: 3rem; max-width: 760px; border-top: 1px solid var(--hair); padding-top: 1.2rem; }
.sources h2 { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.sources ol { margin: 0.7rem 0 0 1.2rem; }
.sources li { font-size: 0.82rem; color: var(--faint); line-height: 1.6; margin-top: 0.35rem; }
.sources a { color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--hair2); }
.sources a:hover { color: var(--ink); }

/* calculator */
.calc { border: 1px solid var(--hair); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); padding: 1.9rem; margin-top: 1.6rem; max-width: 760px; }
.calc .c-row { margin-top: 1.4rem; }
.calc .c-row:first-child { margin-top: 0; }
.calc label { display: block; font-size: 0.84rem; font-weight: 650; color: var(--ink); }
.calc label .val { color: var(--bronze); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { width: 100%; margin-top: 0.6rem; accent-color: var(--bronze); }
.calc .hint { font-size: 0.78rem; color: var(--faint); margin-top: 0.3rem; }
.calc .c-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.8rem; border-top: 1px solid var(--hair); padding-top: 1.5rem; }
@media (max-width: 720px) { .calc .c-out { grid-template-columns: 1fr; } }
.calc .c-out .v { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc .c-out .k { font-size: 0.78rem; color: var(--faint); margin-top: 0.3rem; line-height: 1.5; }
.calc .c-note { font-size: 0.76rem; color: var(--faint); margin-top: 1.4rem; line-height: 1.55; }

/* related pages */
.related { border-top: 1px solid var(--hair); margin-top: 3.2rem; padding-top: 1.6rem; max-width: 760px; }
.related h2 { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.related ul { margin-top: 0.8rem; }
.related li { list-style: none; margin-top: 0.55rem; }
.related a { color: var(--soft); font-size: 0.94rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--hair); }
.related a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* closer band */
.art-closer { background: var(--ink); color: var(--paper); padding: 5.5rem 0; margin-top: 4.5rem; }
.art-closer h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600; line-height: 1.12; max-width: 20ch; }
.art-closer p { color: rgba(253, 253, 251, 0.65); font-size: 1.05rem; margin: 1.2rem 0 2.2rem; max-width: 54ch; line-height: 1.65; }
.art-closer .btn { background: var(--paper); color: var(--ink); }
.art-closer .btn:hover { background: #fff; }