:root{
  --bg:#0f1729; --surface:#162038; --surface-2:#1c2845; --line:#243254;
  --text:#e8edf4; --muted:#8a96b0; --accent:#c9a44a; --accent-2:#a98935;
  --danger:#d65a4a; --ok:#5da874;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family: Georgia, "Tinos", "Times New Roman", serif; color:#fff; line-height:1.25; margin:1.6em 0 0.6em}
h1{font-size:2.1rem; margin-top:0.4em}
h2{font-size:1.55rem; border-bottom:1px solid var(--line); padding-bottom:0.3em}
h3{font-size:1.2rem; color:var(--accent)}
p,li{font-size:1.02rem}
a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
a:hover{color:var(--accent-2)}
.container{max-width:920px; margin:0 auto; padding:24px}
.container-wide{max-width:1180px; margin:0 auto; padding:24px}

/* Header */
.site-header{background:#0a1122; border-bottom:1px solid var(--line)}
.site-header .row{display:flex; justify-content:space-between; align-items:center; max-width:1180px; margin:0 auto; padding:14px 24px}
.site-logo{color:#fff; text-decoration:none; font-family:Georgia,serif; font-size:1.45rem; letter-spacing:0.04em; font-weight:700}
.site-logo span{color:var(--accent)}
.site-nav{display:flex; gap:1.2em; flex-wrap:wrap}
.site-nav a{color:var(--muted); text-decoration:none; font-size:0.92rem}
.site-nav a:hover{color:#fff}
.age-badge{background:var(--danger); color:#fff; padding:2px 8px; border-radius:3px; font-size:0.75rem; font-weight:700; margin-left:8px}

/* Lead box */
.lead-box{background:var(--surface); border-left:3px solid var(--accent); padding:18px 22px; border-radius:4px; margin:1.4em 0}
.lead-box p{margin:0}
.meta-row{display:flex; gap:1.5em; color:var(--muted); font-size:0.86rem; padding:8px 0; flex-wrap:wrap}
.meta-row span strong{color:#fff; font-weight:600}

/* Tables */
table{border-collapse:collapse; width:100%; margin:1.4em 0; background:var(--surface); border-radius:6px; overflow:hidden}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:0.95rem}
th{background:var(--surface-2); color:var(--accent); font-weight:600; text-transform:none}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--surface-2)}

/* Callouts */
.callout{border-radius:6px; padding:16px 20px; margin:1.4em 0; border-left:3px solid}
.callout.warn{background:rgba(214,90,74,0.08); border-color:var(--danger)}
.callout.tip{background:rgba(201,164,74,0.08); border-color:var(--accent)}
.callout.note{background:rgba(93,168,116,0.08); border-color:var(--ok)}

/* FAQ */
details.faq{background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:14px 18px; margin:10px 0}
details.faq summary{cursor:pointer; font-weight:600; color:#fff; list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:before{content:"+"; color:var(--accent); margin-right:10px; font-weight:700}
details.faq[open] summary:before{content:"−"}
details.faq p{margin:10px 0 0; color:var(--muted)}

/* Author bio block */
.author-card{display:flex; gap:18px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:18px; margin:2em 0}
.author-card img{width:84px; height:84px; border-radius:50%; object-fit:cover; flex-shrink:0}
.author-card .info{flex:1}
.author-card h4{margin:0 0 4px; color:#fff; font-family:Georgia,serif; font-size:1.05rem}
.author-card p{margin:0; color:var(--muted); font-size:0.93rem}
.author-card a{color:var(--accent)}

/* Toplist card grid (used on homepage) */
.toplist{display:grid; gap:14px; margin:1.6em 0}
.toplist .card{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:16px 20px; display:grid; grid-template-columns:50px 1fr auto; gap:16px; align-items:center}
.toplist .rank{font-family:Georgia,serif; font-size:1.6rem; color:var(--accent); font-weight:700}
.toplist .card .meta{font-size:0.86rem; color:var(--muted)}
.toplist .card .meta strong{color:#fff; font-weight:600}
.toplist .cta a{background:var(--accent); color:#0a1122; padding:8px 16px; border-radius:4px; font-weight:600; text-decoration:none; display:inline-block; white-space:nowrap}

/* Breadcrumb */
.breadcrumb{font-size:0.85rem; color:var(--muted); margin:8px 0 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--accent)}

/* Hero/figures */
figure{margin:1.4em 0}
figure img{width:100%; max-width:100%; border-radius:6px; display:block}
figure figcaption{font-size:0.84rem; color:var(--muted); margin-top:8px; font-style:italic}

/* Footer */
.site-footer{background:#0a1122; border-top:1px solid var(--line); margin-top:3em; padding:34px 0; color:var(--muted); font-size:0.9rem}
.footer-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; max-width:1180px; margin:0 auto; padding:0 24px}
.footer-grid h5{color:var(--accent); font-family:Georgia,serif; font-size:0.95rem; margin:0 0 10px; text-transform:uppercase; letter-spacing:0.06em}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{padding:3px 0}
.footer-grid a{color:var(--muted); text-decoration:none; font-size:0.85rem}
.footer-grid a:hover{color:#fff}
.footer-bottom{max-width:1180px; margin:24px auto 0; padding:18px 24px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px}
.footer-bottom .rg{font-size:0.82rem; color:var(--muted); line-height:1.5; max-width:760px}
.footer-bottom .rg strong{color:var(--danger)}

/* Responsive */
@media(max-width:780px){
  .site-header .row{flex-direction:column; align-items:flex-start; gap:10px}
  .site-nav{gap:0.8em}
  .footer-grid{grid-template-columns:repeat(2, 1fr)}
  .toplist .card{grid-template-columns:40px 1fr; }
  .toplist .cta{grid-column: 1 / -1}
  h1{font-size:1.65rem}
  h2{font-size:1.3rem}
  table{font-size:0.9rem}
  th,td{padding:8px 10px}
}