/* ===== First Class Tag — Blog / Article styles (extends style.css tokens) ===== */
.wrap-narrow{width:min(760px,92vw);margin-inline:auto}

/* ---- Article header ---- */
.post-head{position:relative;padding:clamp(110px,16vw,170px) 0 clamp(36px,5vw,56px);background:linear-gradient(180deg,#0C1622,var(--ink));border-bottom:1px solid var(--line-soft);overflow:hidden}
.post-head::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 70% at 30% 0%,#000 20%,transparent 75%)}
.breadcrumb{display:flex;gap:.5em;flex-wrap:wrap;font-family:var(--ff-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.2rem}
.breadcrumb a{color:var(--gold-2)}.breadcrumb a:hover{color:var(--gold-1)}
.breadcrumb span{color:var(--muted-2)}
.post-cat{display:inline-flex;align-items:center;gap:.6em;font-family:var(--ff-display);font-weight:500;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2)}
.post-cat::before{content:"";width:26px;height:1px;background:var(--gold-grad)}
.post-head h1{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.02;font-size:clamp(1.9rem,5vw,3.2rem);margin:1rem 0 1.1rem;max-width:18ch}
.post-meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}
.post-meta .pm-i{display:inline-flex;align-items:center;gap:.45em}
.post-meta svg{width:15px;height:15px;color:var(--gold-2)}

/* ---- Article body typography ---- */
.post-body{padding-block:clamp(36px,5vw,56px)}
.post-body p{color:var(--muted);font-size:1.05rem;line-height:1.85;margin-bottom:1.2rem}
.post-body h2{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.4rem,3vw,1.9rem);color:var(--cream);margin:2.4rem 0 1rem;padding-top:.4rem}
.post-body h3{font-family:var(--ff-display);font-weight:500;letter-spacing:.03em;font-size:1.15rem;color:var(--gold-1);margin:1.8rem 0 .7rem}
.post-body strong{color:var(--cream);font-weight:700}
.post-body a{color:var(--gold-1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.post-body a:hover{text-decoration-color:var(--gold-2)}
.post-body ul,.post-body ol{margin:0 0 1.3rem 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.6rem}
.post-body ul li{position:relative;padding-left:1.7rem;color:var(--muted);line-height:1.7}
.post-body ul li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border:1px solid var(--gold-2);transform:rotate(45deg);background:rgba(231,200,121,.15)}
.post-body ol{counter-reset:li;}
.post-body ol li{position:relative;padding-left:2.2rem;color:var(--muted);line-height:1.7;counter-increment:li}
.post-body ol li::before{content:counter(li);position:absolute;left:0;top:0;font-family:var(--ff-display);font-weight:700;color:var(--gold-2);font-size:.95rem;border:1px solid var(--line);border-radius:4px;width:1.5rem;height:1.5rem;display:grid;place-items:center}
.post-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.93rem;border:1px solid var(--line)}
.post-body th,.post-body td{border:1px solid var(--line-soft);padding:.75rem .9rem;text-align:left;color:var(--muted)}
.post-body th{font-family:var(--ff-display);font-weight:600;letter-spacing:.04em;color:var(--cream);background:rgba(231,200,121,.06)}
.post-body blockquote{border-left:2px solid var(--gold-2);margin:1.5rem 0;padding:.4rem 0 .4rem 1.3rem;color:var(--cream);font-style:italic}
.post-body h2:first-child{margin-top:0}

/* TL;DR box */
.tldr{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--panel),var(--ink-2));padding:1.3rem 1.5rem;margin-bottom:2rem;position:relative}
.tldr b{display:block;font-family:var(--ff-display);letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--gold-2);margin-bottom:.5rem}
.tldr p{margin:0;color:var(--cream);font-size:1rem;line-height:1.65}

/* CTA card */
.post-cta{margin:2.6rem 0 .5rem;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--panel),var(--ink-2));padding:clamp(1.6rem,3vw,2.2rem);text-align:center;position:relative;overflow:hidden}
.post-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0%,rgba(231,200,121,.12),transparent 60%);pointer-events:none}
.post-cta h3{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--cream);margin-bottom:.6rem}
.post-cta p{color:var(--muted);max-width:52ch;margin:0 auto 1.4rem}
.post-cta .cta-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;position:relative}

/* Related */
.related{border-top:1px solid var(--line-soft);padding-block:clamp(40px,6vw,72px)}
.related h2{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.5rem,3vw,2rem);margin-bottom:1.6rem;color:var(--cream)}
.post-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--panel),var(--ink-2));padding:1.6rem;transition:transform .45s var(--ease),border-color .45s var(--ease)}
.post-card:hover{transform:translateY(-5px);border-color:var(--gold-2)}
.post-card .pc-cat{font-family:var(--ff-display);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3)}
.post-card h3{font-family:var(--ff-display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:1.1rem;line-height:1.15;margin:.7rem 0 .6rem;color:var(--cream)}
.post-card p{font-size:.88rem;color:var(--muted);line-height:1.55;margin-bottom:1rem;flex:1}
.post-card .pc-more{font-family:var(--ff-display);letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--gold-1);display:inline-flex;align-items:center;gap:.4em}
.post-card:hover .pc-more{gap:.7em}

/* ---- Blog index ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.blog-intro{max-width:760px;margin-bottom:clamp(32px,5vw,52px)}

@media(max-width:880px){ .post-cards,.blog-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .post-cards,.blog-grid{grid-template-columns:1fr} .post-cta .cta-btns .btn{width:100%} }