/* ========== ARTICLE / SUBPAGE CSS ========== */
/* Requires common.css to be loaded first. */

/* Subpages need top padding for fixed nav (index.html uses hero padding instead) */
body{padding-top:52px}

/* ========== BREADCRUMB ========== */
.breadcrumb{background:var(--g50);border-bottom:1px solid var(--g200);padding:10px 0}
.breadcrumb ol{display:flex;align-items:center;gap:6px;list-style:none;flex-wrap:wrap}
.breadcrumb li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--g400)}
.breadcrumb li+li::before{content:'/';color:var(--g300)}
.breadcrumb li a{color:var(--primary);text-decoration:none}
.breadcrumb li a:hover{text-decoration:underline}
.breadcrumb li[aria-current="page"]{color:var(--g600)}

/* ========== ARTICLE LAYOUT ========== */
.article-main{padding:48px 0 80px}
.article-container{max-width:780px}
.article-header{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--g200)}
.article-meta{font-size:12px;color:var(--g400);margin-bottom:14px;font-family:var(--fen)}
.article-header h1{font-size:26px;font-weight:700;line-height:1.35;letter-spacing:-.4px;color:var(--g800);margin-bottom:16px}
.article-lead{font-size:15px;color:var(--g600);line-height:1.8}

/* ========== ARTICLE BODY ========== */
.article-body h2{font-size:20px;font-weight:700;color:var(--g800);margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--primary-bg2);scroll-margin-top:68px}
.article-body h3{font-size:16px;font-weight:600;color:var(--g800);margin:28px 0 10px;scroll-margin-top:68px}
.article-body p{font-size:14px;color:var(--g700);line-height:1.85;margin-bottom:16px}
.article-body ul,.article-body ol{padding-left:1.5em;margin-bottom:16px}
.article-body li{font-size:14px;color:var(--g700);line-height:1.8;margin-bottom:6px}
.article-body strong{color:var(--g800);font-weight:600}
.article-body a{color:var(--primary);text-decoration:underline}
.article-body a:hover{color:var(--primary-dark)}
.article-body sup{font-size:10px;color:var(--primary);font-family:var(--fen);cursor:default}

/* Callout box */
.callout{background:var(--primary-bg);border-left:3px solid var(--primary);border-radius:0 8px 8px 0;padding:14px 18px;margin:24px 0}
.callout p{margin-bottom:0;color:var(--g700)}

/* Data table */
.info-table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:13px}
.info-table th,.info-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--g200)}
.info-table th{width:30%;color:var(--g500);font-weight:500;background:var(--g50)}
.info-table td{color:var(--g800)}
.info-table td a{color:var(--primary)}

/* Footnotes */
.footnotes{margin-top:40px;padding-top:20px;border-top:1px solid var(--g200)}
.footnotes h3{font-size:12px;color:var(--g400);font-weight:500;margin-bottom:10px;letter-spacing:.5px;text-transform:uppercase}
.footnotes ol{padding-left:1.4em}
.footnotes li{font-size:11px;color:var(--g500);line-height:1.7;margin-bottom:4px}
.footnotes li a{color:var(--primary);word-break:break-all}

/* Related links */
.article-footer{margin-top:48px;padding-top:28px;border-top:1px solid var(--g200);background:var(--white);color:var(--g800)}
.article-note{font-size:12px;color:var(--g500);line-height:1.6;margin-bottom:24px;padding:12px 16px;background:var(--g50);border-radius:8px}
.article-footer h3{font-size:14px;font-weight:600;color:var(--g700);margin-bottom:12px}
.article-footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.article-footer li a{font-size:13px;color:var(--primary);text-decoration:none;display:flex;align-items:center;gap:4px}
.article-footer li a::before{content:'→';font-size:11px}
.article-footer li a:hover{text-decoration:underline}

/* ========== DESKTOP ========== */
@media(min-width:769px){
  body{padding-top:58px}
  .article-main{padding:60px 0 100px}
  .article-header h1{font-size:32px}
}