:root {
  --bg:#09090B; --surface:#111114; --surface2:#18181C; --surface3:#1F1F26;
  --gold:#D4A853; --gold2:#F0C976; --gold-glow:rgba(212,168,83,0.13);
  --gold-border:rgba(212,168,83,0.28); --text:#F4F1EC; --muted:#6E6E80;
  --border:rgba(255,255,255,0.07); --radius:14px;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;border-radius:var(--radius);}
::-webkit-scrollbar{width:4px;} ::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:2px;}

nav{position:fixed;top:0;width:100%;z-index:999;display:flex;justify-content:space-between;align-items:center;padding:16px 6%;background:rgba(9,9,11,0.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;}
.nav-logo img{width:36px;height:36px;object-fit:contain;}
.nav-links{display:flex;gap:28px;font-size:13.5px;color:var(--muted);}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--gold);}
.nav-cta{background:var(--gold);color:#000;font-family:var(--font-body);font-size:13px;font-weight:600;border:none;padding:9px 20px;border-radius:10px;cursor:pointer;}

.article-hero{padding:110px 6% 0;max-width:820px;margin:0 auto;}
.article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.article-category{background:var(--gold-glow);border:1px solid var(--gold-border);color:var(--gold);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:5px 14px;border-radius:100px;}
.article-date{font-size:13px;color:var(--muted);}
.article-read-time{font-size:13px;color:var(--muted);}
.article-date::after{content:'·';margin:0 6px;}
.article-title{font-family:var(--font-display);font-size:clamp(28px,5vw,46px);font-weight:700;line-height:1.2;margin-bottom:20px;}
.article-excerpt{font-size:18px;color:var(--muted);line-height:1.7;margin-bottom:40px;max-width:680px;}

.article-cover img{width:100%;height:420px;object-fit:cover;border-radius:20px;border:1px solid var(--border);}
.article-cover-placeholder{width:100%;height:420px;background:linear-gradient(135deg,var(--surface) 0%,var(--surface3) 100%);border-radius:20px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:80px;opacity:0.4;}

.article-layout{max-width:820px;margin:0 auto;padding:60px 6% 100px;display:grid;grid-template-columns:1fr 200px;gap:60px;align-items:start;}
.article-body{min-width:0;}

.article-body h2{font-family:var(--font-display);font-size:26px;font-weight:700;margin:48px 0 16px;padding-top:8px;border-top:1px solid var(--border);}
.article-body h3{font-family:var(--font-display);font-size:20px;font-weight:700;margin:32px 0 12px;color:var(--gold2);}
.article-body p{font-size:16px;line-height:1.85;margin-bottom:20px;color:rgba(244,241,236,0.88);}
.article-body ul,.article-body ol{margin:0 0 20px 0;padding-left:0;list-style:none;}
.article-body li{font-size:16px;line-height:1.75;margin-bottom:10px;padding-left:20px;position:relative;color:rgba(244,241,236,0.88);}
.article-body ul li::before{content:'›';position:absolute;left:0;color:var(--gold);font-weight:700;}
.article-body ol{counter-reset:ol-counter;}
.article-body ol li{counter-increment:ol-counter;}
.article-body ol li::before{content:counter(ol-counter)'.';position:absolute;left:0;color:var(--gold);font-weight:700;font-size:13px;}
.article-body blockquote{border-left:3px solid var(--gold);padding:16px 20px;margin:28px 0;background:var(--gold-glow);border-radius:0 10px 10px 0;font-style:italic;color:var(--text);font-size:17px;line-height:1.7;}
.article-body strong{color:var(--text);font-weight:600;}
.article-body .highlight-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin:28px 0;}
.article-body .highlight-box p{margin-bottom:0;}
.article-body img{margin:28px 0;border:1px solid var(--border);}

.article-sidebar{position:sticky;top:90px;}
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px;}
.sidebar-title{font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.sidebar-cta{display:block;background:var(--gold);color:#000;font-weight:700;font-size:13px;text-align:center;padding:12px;border-radius:10px;transition:0.2s;}
.sidebar-cta:hover{background:var(--gold2);}
.sidebar-share{display:flex;flex-direction:column;gap:8px;}
.share-btn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:1px solid var(--border);font-size:13px;color:var(--muted);cursor:pointer;background:transparent;font-family:var(--font-body);transition:0.15s;width:100%;}
.share-btn:hover{border-color:var(--gold-border);color:var(--text);}
.related-link{display:block;font-size:13px;color:var(--muted);padding:8px 0;border-bottom:1px solid var(--border);line-height:1.4;transition:0.15s;}
.related-link:last-child{border-bottom:none;}
.related-link:hover{color:var(--gold);}

.author-bio{display:flex;align-items:center;gap:16px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin:48px 0 32px;}
.author-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center;flex-shrink:0;border:2px solid var(--gold-border);}
.author-name{font-size:15px;font-weight:600;color:var(--text);}
.author-role{font-size:13px;color:var(--muted);margin-top:2px;}

.article-cta{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:48px;text-align:center;margin:60px 0 0;}
.article-cta h3{font-family:var(--font-display);font-size:24px;margin-bottom:12px;}
.article-cta p{color:var(--muted);margin-bottom:24px;}
.article-cta a{display:inline-block;background:var(--gold);color:#000;font-weight:700;padding:14px 32px;border-radius:12px;font-size:15px;}

footer{border-top:1px solid var(--border);padding:48px 6%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-left{font-size:13px;color:var(--muted);}
.footer-links{display:flex;gap:24px;font-size:13px;color:var(--muted);}
.footer-links a:hover{color:var(--text);}

@media(max-width:768px){
  .nav-links{display:none;}
  .article-layout{grid-template-columns:1fr;}
  .article-sidebar{position:static;}
  .article-cover img,.article-cover-placeholder{height:240px;}
  footer{justify-content:center;text-align:center;}
}