/* A005/V15 — a common typographic frame, with a separate composition for each topic. */
:where(.topic-page){--topic-bg:#fff;--topic-ink:#2f3334;--topic-muted:#596166;--topic-accent:#38556b;--topic-tint:#e3ebf0;--focus:#38556b}
body.topic-page{background:var(--topic-bg);color:var(--topic-ink)}
.topic-page #main{overflow-wrap:break-word}
.topic-page #main section{scroll-margin-top:110px}
.topic-wrap{width:min(1240px,calc(100% - 80px));margin-inline:auto}
.topic-page .topic-hero{padding:64px 0 90px}
.topic-kicker{font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;margin:0 0 24px;color:var(--topic-accent)}
.topic-title{font:600 clamp(43px,6.3vw,90px)/1.02 Inter,Arial,sans-serif;letter-spacing:-.065em;margin:0 0 30px;text-wrap:balance;max-width:15ch}
.topic-lead{font-size:clamp(18px,1.8vw,23px);line-height:1.65;max-width:54ch;margin:0 0 25px;color:var(--topic-muted)}
.topic-section{padding:clamp(64px,8vw,120px) 0}
.topic-section h2{font-size:clamp(32px,4.3vw,58px);line-height:1.08;letter-spacing:-.05em;font-weight:600;margin:0 0 28px;text-wrap:balance}
.topic-section h3{font-size:clamp(22px,2.3vw,30px);line-height:1.2;margin:0 0 16px}
.topic-section p{line-height:1.75}
.topic-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start}
.topic-grid>*{min-width:0}
.topic-paper{background:#fff;border:1px solid #808780;border-radius:4px;box-shadow:8px 9px 0 -2px #e6edf1,8px 9px 0 -1px #808780,0 30px 65px -45px #2f333470;padding:clamp(24px,4vw,48px);color:#2f3334}
.topic-action{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:13px 22px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font:600 15px/1.45 Inter,Arial,sans-serif;color:var(--topic-accent);background:transparent;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.topic-action:hover{background:var(--topic-accent);color:#fff}
.topic-note{font-size:13px;line-height:1.65;color:var(--topic-muted);max-width:72ch}
.topic-page [hidden]{display:none!important}
.topic-page :is(input,select,button){font-family:Inter,Arial,sans-serif}
.topic-page :is(h1,h2,h3,p,li,button,label){overflow-wrap:anywhere}
html[data-ts-integration] :where(.topic-page) :focus-visible{outline:3px solid var(--topic-accent);outline-offset:5px}
html[data-ts-integration] .nav-links a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--topic-accent,#38556b);text-underline-offset:9px;text-decoration-thickness:2px}
.offcanvas__links a[aria-current=page]{font-weight:700;text-decoration:underline;text-underline-offset:5px}
.topic-context{padding:22px 0 0;background:var(--topic-bg)}
.topic-context .topic-wrap{display:flex;justify-content:space-between;gap:12px 25px;align-items:center;flex-wrap:wrap}
.topic-context p{font-size:12px;line-height:1.6;margin:0;color:var(--topic-muted)}
.topic-context a{color:inherit}
.topic-thread{display:flex;gap:10px;align-items:center;letter-spacing:.06em}
.topic-thread span{color:var(--topic-accent)}
.topic-next{padding:55px 0 70px;border-top:1px solid #808780;background:#fff}
.topic-next .topic-wrap{display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap}
.topic-next p{font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px;color:#596166}
.topic-next a{font-size:clamp(22px,3vw,38px);letter-spacing:-.035em;color:#2f3334;text-decoration:none}
.topic-next a:hover{text-decoration:underline}
.topic-next .topic-back{font-size:15px;letter-spacing:0}
@media(max-width:760px){.topic-wrap{width:calc(100% - 40px)}.topic-grid{grid-template-columns:1fr;gap:35px}.topic-page .topic-hero{padding:44px 0 64px}.topic-context{padding-top:20px}.topic-thread{font-size:11px!important}.topic-title{letter-spacing:-.05em}.topic-section{padding:64px 0}}
@media(prefers-reduced-motion:reduce){.topic-action{transition:none}}
@media(forced-colors:active){.topic-paper{box-shadow:none;border:1px solid CanvasText}.topic-action{border:1px solid ButtonText}.topic-page [aria-pressed=true]{outline:2px solid Highlight}.topic-page :focus-visible{outline-color:Highlight!important}}

/* V15.1: cool shell accents on topic pages only. */
body.topic-page{--shell-copper:#38556b;--accent-text:#38556b;--focus:#38556b;--focus-inverse:#c3d9e9;--shell-paper:#fff;--bg:#fff}
.topic-page .site-footer{background:#eef2f5}
@media(forced-colors:active){body.topic-page{--shell-copper:LinkText;--accent-text:LinkText;--focus:Highlight;--shell-paper:Canvas;--bg:Canvas}.topic-page .site-footer{background:Canvas}}