:root{
  --accent:#1d5c63;
  --accent-tint:#e7f0f1;
  --accent-border:#c3d9db;
  --ink:#1f1f1e;
  --muted:#6b6b66;
  --line:#dededa;
  --page:#fafaf9;
  --surface:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.shell{max-width:960px;margin:0 auto;padding:0 20px}

header{background:var(--surface);border-bottom:2px solid var(--accent)}
.masthead{display:flex;align-items:center;gap:12px;padding:16px 0 12px}
.mark{width:40px;height:40px;border-radius:9px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 16px/1 Georgia,serif;letter-spacing:.5px;flex-shrink:0;}
.brand b{font-size:18px;letter-spacing:.2px}
.brand span{display:block;font-size:12.5px;color:var(--muted)}
.tabs{display:flex;justify-content:space-between;align-items:flex-end;font-size:13px}
.tabs ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.tabs a{display:block;padding:7px 12px;color:var(--muted)}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.tabs li.active a{color:var(--ink);border-bottom:2px solid var(--accent);font-weight:600;margin-bottom:-2px}

main{background:var(--surface);border:1px solid var(--line);border-top:none;padding:28px 32px 40px}
h1{font:400 30px/1.25 Georgia,"Times New Roman",serif;margin:0 0 2px;
  border-bottom:1px solid var(--accent-border);padding-bottom:8px;}
.subtitle{color:var(--muted);font-size:13.5px;margin:6px 0 20px}
h2{font:400 21px/1.3 Georgia,serif;margin:30px 0 10px;
  border-bottom:1px solid var(--accent-border);padding-bottom:5px;}
h3{font:600 16px/1.3 Georgia,serif;margin:22px 0 8px}
p{margin:0 0 14px}
sup a{font-size:11px}
.editlink{font-size:12.5px;font-weight:400;color:var(--muted)}

.infobox{float:right;width:270px;margin:0 0 18px 24px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;font-size:13px;overflow:hidden;}
.infobox .ib-title{background:var(--accent-tint);padding:8px 10px;text-align:center;font-weight:600;font-size:14px}
.infobox .portrait{padding:10px 10px 4px;text-align:center}
.infobox .portrait img{width:200px;height:200px;object-fit:cover;border-radius:4px;display:block;margin:0 auto}
.infobox .caption{color:var(--muted);font-size:11.5px;text-align:center;padding:0 10px 8px}
.infobox table{border-collapse:collapse;width:100%}
.infobox th,.infobox td{padding:5px 10px;vertical-align:top;text-align:left;border-top:1px solid var(--line)}
.infobox th{width:38%;font-weight:600;color:#3d3d3a}

figure.article-image{margin:6px 0 18px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;padding:8px;background:var(--surface);max-width:560px}
figure.article-image img{width:100%;height:auto;border-radius:4px;display:block}
figure.article-image figcaption{color:var(--muted);font-size:11.5px;padding:6px 2px 0}

.toc{display:inline-block;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:6px;padding:12px 22px 12px 16px;
  font-size:13.5px;margin:4px 0 18px;}
.toc .toc-title{font-weight:600;margin-bottom:6px}
.toc ol{margin:0;padding-left:20px}
.toc ol ol{padding-left:18px}
.toc li{margin:2px 0}

.reflist{font-size:13px;padding-left:22px}
.reflist li{margin:5px 0}
.retrieved{color:var(--muted)}

.topics{border:1px solid var(--line);border-radius:6px;background:var(--page);
  padding:8px 12px;font-size:13px;margin-top:28px;}
.topics b{color:#3d3d3a}
.topics a{margin:0 4px}

footer{color:var(--muted);font-size:12.5px;padding:18px 4px 40px;line-height:1.7}

@media (max-width:720px){
  main{padding:20px 16px 30px}
  .infobox{float:none;width:100%;margin:0 0 20px}
  .infobox .portrait img{width:180px;height:180px}
  .tabs{font-size:12px}
  .tabs a{padding:6px 8px}
  figure.article-image{max-width:100%}
}