.art-hero { background:linear-gradient(170deg,var(--forest) 0%,var(--deep) 100%); padding:48px 32px 44px; border-bottom:1px solid rgba(255,255,255,.05); }
.art-hero-inner { max-width:800px; margin:0 auto; }
.art-breadcrumb { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:16px; }
.art-breadcrumb a { color:rgba(255,255,255,.35); text-decoration:none; }
.art-breadcrumb a:hover { color:var(--gold-lt); }
.art-breadcrumb span { color:rgba(255,255,255,.2); margin:0 8px; }
.art-eyebrow { font-family:var(--mono); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:14px; }
.art-title { font-family:var(--serif); font-size:clamp(1.7rem,4vw,2.6rem); font-weight:400; color:#fff; line-height:1.18; margin-bottom:16px; }
.art-title strong { font-weight:700; color:var(--gold-lt); }
.art-subtitle { font-size:.95rem; color:rgba(255,255,255,.55); line-height:1.75; max-width:640px; margin-bottom:20px; }
.art-meta { display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.25); }

.art-layout { max-width:1100px; margin:0 auto; padding:40px 32px 80px; display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start; }

.art-toc { position:sticky; top:24px; }
.toc-label { font-family:var(--mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-light); padding-bottom:10px; border-bottom:2px solid var(--rule); margin-bottom:12px; }
.toc-list { list-style:none; }
.toc-list li { margin-bottom:4px; }
.toc-list a { display:block; font-size:.83rem; color:var(--ink-light); text-decoration:none; padding:5px 8px 5px 12px; border-left:2px solid var(--rule); transition:all .15s; line-height:1.4; }
.toc-list a:hover,.toc-list a.active { color:var(--forest); border-left-color:var(--forest); background:var(--green-dim); }
.toc-cta { margin-top:28px; background:var(--forest); padding:18px 16px; text-align:center; }
.toc-cta-lbl { font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:8px; }
.toc-cta-t { font-family:var(--serif); font-size:.95rem; font-weight:700; color:#fff; margin-bottom:12px; line-height:1.3; }
.toc-cta a { display:block; background:var(--gold); color:var(--deep); padding:10px 14px; font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; transition:background .15s; }
.toc-cta a:hover { background:var(--gold-lt); }

.art-body { min-width:0; }
.art-body h2 { font-family:var(--serif); font-size:1.55rem; font-weight:400; color:var(--ink); margin:44px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--rule-lt); }
.art-body h2:first-child { margin-top:0; }
.art-body h3 { font-family:var(--serif); font-size:1.15rem; font-weight:700; color:var(--ink); margin:28px 0 10px; }
.art-body p { font-size:.95rem; color:var(--ink-mid); line-height:1.85; margin-bottom:16px; }
.art-body strong { color:var(--ink); font-weight:600; }
.art-body em { color:var(--ink); font-style:italic; }
.art-body ul,.art-body ol { margin:0 0 16px 20px; }
.art-body li { font-size:.93rem; color:var(--ink-mid); line-height:1.8; margin-bottom:4px; }
.art-body a { color:var(--forest); text-decoration-color:rgba(22,52,36,.3); }
.art-body a:hover { text-decoration-color:var(--forest); }

.callout { padding:18px 20px; margin:24px 0; border-left:4px solid var(--forest); background:var(--green-dim); }
.callout.gold { border-left-color:var(--gold); background:var(--amber-dim); }
.callout.red { border-left-color:var(--red); background:#fdf0f0; }
.callout-label { font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-light); margin-bottom:6px; }
.callout p { margin-bottom:0; font-size:.88rem; }

.calc-box { background:var(--deep); padding:28px 24px; margin:32px 0; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; }
.calc-box-t { font-family:var(--serif); font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:6px; }
.calc-box-d { font-size:.85rem; color:rgba(255,255,255,.55); line-height:1.6; }
.calc-box a { display:inline-block; background:var(--gold); color:var(--deep); padding:12px 22px; font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:background .15s; flex-shrink:0; }
.calc-box a:hover { background:var(--gold-lt); }

.data-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.88rem; }
.data-table th { background:var(--forest); color:#fff; padding:10px 14px; font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; text-align:left; font-weight:500; }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--rule-lt); color:var(--ink-mid); vertical-align:top; }
.data-table tr:nth-child(even) td { background:var(--paper); }
.data-table strong { color:var(--ink); }

.example { background:var(--paper); border:1px solid var(--rule); padding:20px 22px; margin:20px 0; }
.example-title { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border-bottom:1px solid var(--rule-lt); padding-bottom:10px; margin-bottom:14px; }
.example-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--rule-lt); gap:12px; font-size:.88rem; }
.example-row:last-child { border-bottom:none; font-weight:700; padding-top:10px; margin-top:4px; border-top:2px solid var(--ink); }
.example-row span:last-child { font-family:var(--mono); font-size:.85rem; }
.example-row.neg span:last-child { color:var(--red); }
.example-row.pos span:last-child { color:var(--forest); font-size:.95rem; }

.related { background:var(--white); border:1px solid var(--rule); margin-top:60px; padding:28px 24px; }
.related-title { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-light); padding-bottom:12px; border-bottom:1px solid var(--rule-lt); margin-bottom:20px; }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.related-card { background:var(--paper); border:1px solid var(--rule); padding:16px; text-decoration:none; display:block; transition:border-color .15s; }
.related-card:hover { border-color:var(--sage); }
.related-card-eyebrow { font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-light); margin-bottom:6px; }
.related-card-title { font-family:var(--serif); font-size:.95rem; font-weight:700; color:var(--ink); line-height:1.3; }

@media(max-width:860px) { .art-layout { grid-template-columns:1fr; padding:24px 16px 60px; } .art-toc { display:none; } }
@media(max-width:600px) { .art-hero { padding:28px 16px 24px; } .calc-box { grid-template-columns:1fr; } }
@media(max-width:540px) { .related-grid { grid-template-columns:1fr; } }