/* ── Reset & tokens ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#d8d6c7;
  --surface:#dfdece;
  --surface2:#e8e7d8;
  --yellow:#ffff23;
  --black:#050505;
  --muted:#6b6a5e;
  --border:rgba(0,0,0,.12);
  --border-light:rgba(255,255,255,.45);
  --radius:10px;
  --nav-h:62px;
  --content-max:740px;
}
html,body{min-height:100%;background:var(--bg);color:var(--black);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── Page shell ───────────────────────────────────────────── */
.page{min-height:100vh;padding:0 clamp(18px,5vw,64px) 80px}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar{
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.brand{
  display:inline-flex;align-items:flex-start;
  background:var(--yellow);border-radius:7px;
  padding:9px 14px;color:#000;
  font-size:19px;font-weight:900;line-height:1;
}
.brand sup{font-size:9px;margin-left:2px}
.nav{display:flex;align-items:center;gap:8px}
.nav a{
  display:inline-flex;align-items:center;
  min-height:34px;padding:7px 13px;
  background:rgba(236,235,221,.55);
  border:1px solid var(--border-light);
  border-radius:7px;font-size:13px;
  text-transform:uppercase;letter-spacing:.03em;
  transition:background .15s;
}
.nav a:hover{background:rgba(236,235,221,.9)}
.nav a.active{background:var(--yellow)}

/* ── Article hero ─────────────────────────────────────────── */
.article-hero{
  padding:44px 0 0;
  max-width:1080px;
  margin:0 auto 0;
}
.article-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:18px;
}
.article-tag{
  display:inline-block;
  background:var(--yellow);
  border-radius:5px;
  padding:4px 10px;
  font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.article-date{font-size:12px;color:var(--muted)}
.article-hero h1{
  font-size:clamp(28px,4vw,54px);
  line-height:1.1;letter-spacing:-.01em;
  max-width:860px;margin-bottom:16px;
}
.article-hero .subtitle{
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.55;color:#3a3930;
  max-width:680px;margin-bottom:28px;
}
.article-meta-row{
  display:flex;align-items:center;gap:20px;
  padding:16px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom:32px;
  flex-wrap:wrap;
}
.meta-item{
  display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);
}
.meta-item svg{width:14px;height:14px;opacity:.6}
.meta-divider{width:1px;height:16px;background:var(--border)}

/* ── Hero image ───────────────────────────────────────────── */
.article-cover{
  width:100%;
  height:clamp(220px,36vw,480px);
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--border);
  margin-bottom:48px;
  max-width:1080px;
  display:block;
  margin-left:auto;margin-right:auto;
}

/* ── Article layout: content + sidebar ───────────────────── */
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px;
  gap:48px;
  max-width:1080px;
  margin:0 auto;
  align-items:start;
}

/* ── Article body prose ───────────────────────────────────── */
.article-content{
  min-width:0;
}
.article-content h2{
  font-size:clamp(20px,2vw,28px);
  line-height:1.15;
  margin:36px 0 14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--yellow);
  display:inline-block;
}
.article-content h3{
  font-size:clamp(16px,1.5vw,21px);
  line-height:1.2;
  margin:28px 0 10px;
  color:#1a1a15;
}
.article-content p{
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.75;
  color:#2a2920;
  margin-bottom:20px;
}
.article-content ul,
.article-content ol{
  padding-left:22px;
  margin-bottom:20px;
}
.article-content li{
  font-size:clamp(15px,1.1vw,17px);
  line-height:1.7;
  color:#2a2920;
  margin-bottom:6px;
}
.article-content strong{color:var(--black)}
.article-content blockquote{
  border-left:3px solid var(--yellow);
  padding:14px 18px;
  margin:24px 0;
  background:rgba(255,255,35,.08);
  border-radius:0 6px 6px 0;
}
.article-content blockquote p{
  font-size:clamp(15px,1.15vw,18px);
  font-style:italic;
  color:#3a3920;
  margin:0;
}
.article-content pre{
  background:rgba(5,5,5,.06);
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px 20px;
  overflow-x:auto;
  margin-bottom:22px;
  font-size:13px;
  line-height:1.6;
  font-family:"Courier New",Courier,monospace;
}
.article-content code{
  background:rgba(5,5,5,.07);
  border-radius:4px;padding:2px 6px;
  font-size:.9em;
  font-family:"Courier New",Courier,monospace;
}
.article-content pre code{background:none;padding:0;border-radius:0}
.article-content hr{
  border:none;border-top:1px solid var(--border);
  margin:36px 0;
}
.article-content table{
  width:100%;border-collapse:collapse;
  margin-bottom:24px;font-size:14px;
}
.article-content th{
  text-align:left;padding:10px 14px;
  background:rgba(5,5,5,.06);
  border:1px solid var(--border);
  font-weight:700;
}
.article-content td{
  padding:9px 14px;
  border:1px solid var(--border);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.article-sidebar{
  position:sticky;top:calc(var(--nav-h) + 20px);
  display:flex;flex-direction:column;gap:12px;
}
.sidebar-card{
  background:rgba(236,235,221,.7);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}
.sidebar-card h4{
  font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.sidebar-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:40px;border-radius:7px;
  font-size:13px;font-weight:700;
  border:1px solid var(--border);
  background:rgba(236,235,221,.55);
  cursor:pointer;transition:background .15s;
  margin-bottom:8px;
}
.sidebar-btn:last-child{margin-bottom:0}
.sidebar-btn:hover{background:rgba(236,235,221,.9)}
.sidebar-btn.primary{background:var(--yellow);border-color:transparent}
.sidebar-btn.primary:hover{background:#e6e600}
.sidebar-btn svg{width:14px;height:14px}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.toc-list li a{
  display:block;font-size:12px;line-height:1.4;
  color:var(--muted);padding:4px 6px;
  border-radius:5px;transition:background .12s,color .12s;
  border-left:2px solid transparent;
}
.toc-list li a:hover{background:rgba(0,0,0,.05);color:var(--black)}
.toc-list li a.active{
  color:var(--black);font-weight:700;
  border-left-color:var(--yellow);
  background:rgba(255,255,35,.12);
}

/* ── Article footer ───────────────────────────────────────── */
.article-footer{
  max-width:1080px;margin:56px auto 0;
  padding-top:32px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.article-footer p{font-size:14px;color:var(--muted)}
.footer-actions{display:flex;gap:10px}
.footer-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 16px;border-radius:7px;
  border:1px solid var(--border);
  background:rgba(236,235,221,.55);
  font-size:13px;font-weight:700;
  transition:background .15s;
}
.footer-btn:hover{background:rgba(236,235,221,.9)}
.footer-btn.primary{background:var(--yellow);border-color:transparent}
.footer-btn svg{width:14px;height:14px}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:860px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:static}
  .article-hero h1{font-size:28px}
}
@media(max-width:640px){
  .topbar{gap:12px;padding:10px 0;height:auto;flex-wrap:wrap;position:relative}
  .nav{flex-wrap:wrap}
  .article-cover{height:clamp(180px,52vw,280px)}
  .article-footer{flex-direction:column;align-items:flex-start}
}