/* ============ Article pages (new brand) ============ */
.art-hero{background:
  radial-gradient(120% 100% at 90% -20%, var(--teal-bg) 0%, rgba(230,245,245,0) 55%), var(--paper);
  border-bottom:1px solid var(--border-soft)}
.art-hero .container{padding:40px 24px 44px}
.crumb{font-size:12px; color:var(--ink-3); margin-bottom:16px}
.crumb a{color:var(--teal)}
.crumb a:hover{text-decoration:underline}
.art-hero h1{font-size:34px; line-height:1.42; max-width:24em; letter-spacing:.01em}
.art-hero .sub{color:var(--ink-2); font-size:16px; line-height:1.9; margin:16px 0 0; max-width:40em}
.art-meta{display:flex; align-items:center; gap:16px; margin-top:22px; flex-wrap:wrap}
.art-meta .tag{font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--teal); background:var(--teal-bg); border-radius:999px; padding:5px 12px}
.art-meta .mi{font-size:12px; color:var(--ink-3); display:inline-flex; gap:6px; align-items:center}
.art-meta .sup{display:inline-flex; align-items:center; gap:8px; margin-left:auto}
.art-meta .sup img{width:30px; height:30px; border-radius:999px; object-fit:cover}
.art-meta .sup span{font-size:12px; color:var(--ink-2)}
.art-meta .sup b{color:var(--ink)}

.art-wrap{display:grid; grid-template-columns:248px minmax(0,1fr); gap:48px; align-items:start; padding:52px 24px 0}
nav.toc{position:sticky; top:88px}
.toc-label{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
nav.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc; display:flex; flex-direction:column; gap:2px}
nav.toc a{display:block; font-size:13px; color:var(--ink-2); line-height:1.5; padding:8px 12px; border-left:2px solid var(--border); border-radius:0 6px 6px 0; transition:.15s}
nav.toc a:hover,nav.toc a.active{color:var(--teal); border-left-color:var(--teal); background:var(--primary-50)}
.toc-cta{margin-top:18px; background:var(--teal); color:#fff; border-radius:var(--r-md); padding:16px; font-size:13px; line-height:1.6}
.toc-cta a{display:inline-flex; margin-top:10px; background:#fff; color:var(--teal); font-weight:700; font-size:12px; padding:8px 14px; border-radius:999px}

/* body typography */
.art-body{max-width:760px; font-size:16.5px; line-height:1.95; color:#33404f}
.art-body > p{margin:0 0 22px}
.art-body .lede{font-size:18px; line-height:1.95; color:var(--ink); font-weight:500; margin-bottom:28px}
.art-body h2{font-size:25px; line-height:1.4; color:var(--ink); margin:48px 0 18px; padding-top:8px; display:flex; flex-direction:column; gap:8px}
.art-body h2 .num{font-family:var(--serif); font-style:italic; font-size:13px; color:var(--teal); letter-spacing:.06em; font-weight:600}
.art-body h3{font-size:19px; margin:30px 0 12px; color:var(--ink); position:relative; padding-left:14px}
.art-body h3::before{content:""; position:absolute; left:0; top:.35em; width:5px; height:1.1em; background:var(--teal); border-radius:3px}
.art-body ul{margin:0 0 22px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.art-body ul li{position:relative; padding-left:26px; line-height:1.85}
.art-body ul li::before{content:""; position:absolute; left:6px; top:.7em; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.art-body a{color:var(--teal); border-bottom:1px solid rgba(26,143,143,.35)}
.art-body .xlink{margin:6px 0 26px}
.art-body .xlink a{display:inline-flex; gap:6px; font-weight:600; border:none; background:var(--teal-bg); color:var(--teal); padding:9px 16px; border-radius:999px; font-size:14px}

.figure{margin:26px 0 30px; background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:14px}
.figure img{width:100%; border-radius:var(--r-sm)}
.figure .figure-cap,.figure-cap{font-size:12.5px; color:var(--ink-3); margin-top:10px; line-height:1.6; text-align:center}

table.compare{width:100%; border-collapse:separate; border-spacing:0; margin:24px 0 30px; font-size:14px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden}
table.compare th,table.compare td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--border-soft); vertical-align:top; line-height:1.7}
table.compare thead th{background:var(--teal-bg); color:var(--ink); font-weight:700; font-size:13px}
table.compare tbody tr:nth-child(even){background:var(--bg-alt)}
table.compare tr:last-child td{border-bottom:none}

/* references */
.refs-wrap{margin:46px 0 0; padding:24px; background:var(--bg-alt); border-radius:var(--r-lg)}
.refs-wrap h2{font-size:14px; letter-spacing:.06em; color:var(--ink-2); margin:0 0 14px}
.refs-wrap ol,.refs-wrap ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
li.ref{display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:12.5px; color:var(--ink-3); line-height:1.6}
li.ref .ref-num{color:var(--teal); font-weight:700}
li.ref .ref-link{display:none}

/* supervisor banner */
.supervisor-banner{margin:48px 0 0; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-sm)}
.supervisor-banner .sb-head{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.supervisor-banner img{width:64px; height:64px; border-radius:999px; object-fit:cover}
.supervisor-banner .sb-k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); font-weight:700}
.supervisor-banner .sb-nm{font-size:18px; font-weight:700}
.supervisor-banner .sb-cred{display:flex; flex-direction:column; gap:6px; margin:12px 0 0}
.supervisor-banner .sb-cred span{font-size:12px; color:var(--ink-2); line-height:1.6}
.supervisor-banner p{font-size:13.5px; color:var(--ink-2); line-height:1.85; margin:14px 0 0}

/* related */
.related{margin-top:var(--s6)}
.related h2{font-size:20px; margin-bottom:22px}
.rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.rel-card{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:#fff; transition:.2s}
.rel-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px)}
.rel-card .thumb{aspect-ratio:16/9; background:var(--teal-bg)}
.rel-card .thumb img{width:100%; height:100%; object-fit:cover}
.rel-card .b{padding:14px 16px 18px}
.rel-card h3{font-size:14px; line-height:1.5; font-weight:700}
.rel-card .dt{font-size:11px; color:var(--ink-3); margin-top:8px}

@media (max-width:900px){
  .art-hero h1{font-size:25px; line-height:1.45}
  .art-wrap{grid-template-columns:1fr; gap:0; padding-top:32px}
  nav.toc{position:static; margin-bottom:24px; background:var(--bg-alt); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:16px}
  nav.toc details{margin:0}
  .art-body{max-width:none; font-size:16px}
  .art-body h2{font-size:21px}
  .art-meta .sup{margin-left:0}
  .rel-grid{grid-template-columns:1fr}
}