/* ============================================================
   Appssosoft Blog — Frontend Stylesheet
   blog.css · Used by all generated article pages
   ============================================================ */

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

:root {
  --ink:        #0e0c0a;
  --paper:      #f6f1e9;
  --cream:      #ede7d8;
  --warm-white: #faf8f4;
  --accent:     #c8553d;
  --accent2:    #2d6a4f;
  --gold:       #c9a84c;
  --muted:      #8a8070;
  --border:     rgba(14,12,10,0.1);
  --border-md:  rgba(14,12,10,0.16);
  --border-str: rgba(14,12,10,0.22);
  --f-display:  'Playfair Display', serif;
  --f-body:     'Lora', serif;
  --f-ui:       'Cabinet Grotesk', sans-serif;
  --f-mono:     'DM Mono', monospace;
  --f-alt:      'Fraunces', serif;
}

body { background:var(--paper); color:var(--ink); font-family:var(--f-body); line-height:1.75; overflow-x:hidden; }
img  { max-width:100%; height:auto; display:block; }
a    { color:var(--accent); }

/* ── ACCESSIBILITY ─────────────────────────────────────────── */
.skip-link { position:absolute; top:-40px; left:0; background:var(--accent); color:white; padding:.5rem 1rem; z-index:10000; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; }
.skip-link:focus { top:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* ── READING PROGRESS ──────────────────────────────────────── */
.progress-wrap { position:fixed; top:60px; left:0; right:0; height:3px; background:rgba(14,12,10,.07); z-index:99; }
.progress-bar  { height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); width:0%; transition:width .12s linear; }

/* ── NAV ───────────────────────────────────────────────────── */
.site-nav {
  position:sticky; top:0; z-index:100;
  background:rgba(246,241,233,0.93); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border); padding:0 2.5rem;
  display:flex; align-items:center; justify-content:space-between; height:60px;
}
.nav-logo { font-family:var(--f-alt); font-size:1.05rem; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:.45rem; text-decoration:none; color:var(--ink); }
.nav-dot  { width:7px; height:7px; background:var(--accent); border-radius:50%; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.5; } }

.nav-breadcrumb { display:flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); flex:1; padding:0 2rem; }
.nav-breadcrumb a { color:var(--muted); text-decoration:none; transition:color .2s; }
.nav-breadcrumb a:hover { color:var(--accent); }
.nav-breadcrumb span { opacity:.4; }
.nav-breadcrumb > span:last-child { color:var(--ink); opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }

.nav-right { display:flex; align-items:center; gap:.75rem; }
.nav-share-btn { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:.45rem 1rem; border:1.5px solid var(--border-str); background:transparent; color:var(--ink); cursor:pointer; transition:all .2s; }
.nav-share-btn:hover { background:var(--ink); color:var(--paper); }
.nav-try-btn  { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:.45rem 1rem; background:var(--accent); color:white; border:none; cursor:pointer; transition:background .2s; text-decoration:none; }
.nav-try-btn:hover { background:var(--ink); }

/* ── ARTICLE HERO ──────────────────────────────────────────── */
.article-hero { max-width:860px; margin:0 auto; padding:4.5rem 2.5rem 3rem; animation:fadeUp .7s ease .2s both; }
@keyframes fadeUp { from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

.article-meta-top { display:flex; align-items:center; gap:.75rem; margin-bottom:2rem; flex-wrap:wrap; }
.art-cat  { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; background:rgba(200,85,61,.08); color:var(--accent); border:1px solid rgba(200,85,61,.2); padding:.28rem .7rem; text-decoration:none; transition:background .2s; }
.art-cat:hover { background:rgba(200,85,61,.15); }
.art-dot  { width:4px; height:4px; border-radius:50%; background:var(--border-str); }
.art-date { font-family:var(--f-mono); font-size:.6rem; color:var(--muted); letter-spacing:.08em; }
.art-read { font-family:var(--f-mono); font-size:.6rem; color:var(--muted); letter-spacing:.08em; display:flex; align-items:center; gap:.3rem; }

.article-title    { font-family:var(--f-display); font-size:clamp(2.2rem,5vw,4rem); font-weight:900; letter-spacing:-.03em; line-height:1.08; margin-bottom:1.5rem; }
.article-subtitle { font-family:var(--f-ui); font-size:1.1rem; line-height:1.7; color:var(--muted); font-weight:400; margin-bottom:2.5rem; max-width:680px; }

.author-row { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:0; flex-wrap:wrap; gap:1rem; }
.author-info { display:flex; align-items:center; gap:.9rem; }
.author-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#ff8c69); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.75rem; font-weight:500; color:white; flex-shrink:0; }
.author-details { display:flex; flex-direction:column; gap:.15rem; }
.author-name { font-family:var(--f-ui); font-size:.9rem; font-weight:700; color:var(--ink); }
.author-role { font-family:var(--f-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.share-row   { display:flex; align-items:center; gap:.5rem; }
.share-label { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:.25rem; }
.share-btn   { width:32px; height:32px; border:1px solid var(--border-md); background:none; display:flex; align-items:center; justify-content:center; font-size:.75rem; cursor:pointer; transition:all .2s; color:var(--muted); }
.share-btn:hover { background:var(--accent); color:white; border-color:var(--accent); }

/* ── HERO IMAGE ────────────────────────────────────────────── */
.article-hero-img { width:100%; max-width:1100px; margin:0 auto; padding:0 2.5rem; animation:fadeIn .9s ease .7s both; }
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
.hero-img-inner { width:100%; height:440px; background:linear-gradient(135deg,#1a1a2e 0%,#c8553d 45%,#2d6a4f 100%); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-img-text  { font-family:var(--f-display); font-size:clamp(5rem,12vw,10rem); font-weight:900; color:rgba(255,255,255,.05); letter-spacing:-.05em; user-select:none; position:absolute; }
.hero-img-grid  { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; }
.hero-img-content { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.hero-img-icon  { font-size:4rem; filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)); }
.hero-img-label { font-family:var(--f-mono); font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.15); padding:.4rem 1rem; }

/* ── ARTICLE LAYOUT ────────────────────────────────────────── */
.article-layout { display:grid; grid-template-columns:1fr 280px; gap:5rem; max-width:1100px; margin:0 auto; padding:4rem 2.5rem 6rem; align-items:start; }

/* ── ARTICLE BODY TYPOGRAPHY ────────────────────────────────── */
.article-body { min-width:0; }

.article-body p {
  font-size:1.08rem; line-height:1.88; color:#2a2520;
  margin-bottom:1.65rem; font-family:var(--f-body);
}
.article-body > p:first-of-type::first-letter {
  font-family:var(--f-display); font-size:4.5rem; font-weight:900;
  float:left; line-height:.75; margin:.08em .12em 0 0;
  color:var(--accent); text-shadow:2px 2px 0 rgba(200,85,61,.12);
}

.article-body h2 { font-family:var(--f-display); font-size:1.9rem; font-weight:900; letter-spacing:-.025em; line-height:1.2; margin:3.5rem 0 1.2rem; color:var(--ink); }
.article-body h2::before { content:''; display:block; width:2.5rem; height:3px; background:var(--accent); margin-bottom:.8rem; }
.article-body h3 { font-family:var(--f-display); font-size:1.3rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; margin:2.5rem 0 .9rem; color:var(--ink); }
.article-body h4 { font-family:var(--f-ui); font-size:1rem; font-weight:800; margin:2rem 0 .7rem; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; font-size:.88rem; }

.article-body a    { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(200,85,61,.35); text-underline-offset:3px; transition:text-decoration-color .2s; }
.article-body a:hover { text-decoration-color:var(--accent); }
.article-body strong { font-weight:700; color:var(--ink); }
.article-body em     { font-style:italic; color:var(--muted); }

.article-body ul, .article-body ol { padding-left:1.5rem; margin-bottom:1.65rem; }
.article-body li { font-family:var(--f-body); font-size:1.05rem; line-height:1.8; color:#2a2520; margin-bottom:.4rem; }
.article-body ul li::marker { color:var(--accent); }

/* ── CONTENT COMPONENTS ─────────────────────────────────────── */

/* Pull Quote */
.pullquote { border-left:4px solid var(--accent); padding:1.5rem 2rem; margin:3rem 0; background:rgba(200,85,61,.04); position:relative; }
.pullquote::before { content:'\201C'; font-family:var(--f-display); font-size:5rem; font-weight:900; color:rgba(200,85,61,.14); position:absolute; top:-.5rem; left:1.2rem; line-height:1; }
.pullquote p { font-family:var(--f-display); font-size:1.3rem; font-style:italic; font-weight:700; line-height:1.5; color:var(--ink); margin:0 0 .75rem; }
.pullquote p::first-letter { all:unset; }
.pullquote cite { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-style:normal; }

/* Callout Box */
.callout { display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding:1.5rem 1.75rem; margin:2.5rem 0; border:1.5px solid var(--border-str); background:var(--warm-white); }
.callout-icon { font-size:1.5rem; margin-top:.1rem; }
.callout-body h4 { font-family:var(--f-ui); font-size:.82rem; font-weight:800; color:var(--ink); margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.04em; margin-top:0; }
.callout-body p  { font-family:var(--f-ui); font-size:.875rem; line-height:1.65; color:var(--muted); margin:0; }
.callout-body p::first-letter { all:unset; }

/* Steps */
.steps { display:flex; flex-direction:column; margin:2.5rem 0; }
.step  { display:grid; grid-template-columns:48px 1fr; gap:1.5rem; padding:1.75rem 0; border-bottom:1px solid var(--border); }
.step:last-child { border-bottom:none; }
.step-num { font-family:var(--f-alt); font-size:2rem; font-weight:900; color:var(--accent); line-height:1; opacity:.3; transition:opacity .3s; }
.step:hover .step-num { opacity:1; }
.step-content h4 { font-family:var(--f-ui); font-size:.97rem; font-weight:800; color:var(--ink); margin:0 0 .6rem; text-transform:none; letter-spacing:0; }
.step-content p  { font-family:var(--f-ui); font-size:.88rem; line-height:1.7; color:var(--muted); margin:0; }
.step-content p::first-letter { all:unset; }

/* Code Block */
.code-block { background:var(--ink); padding:2rem; margin:2.5rem 0; overflow-x:auto; }
.code-block-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; padding-bottom:1rem; border-bottom:1px solid rgba(255,255,255,.08); }
.code-lang { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.code-dots { display:flex; gap:.4rem; }
.code-dot  { width:10px; height:10px; border-radius:50%; }
.code-dot:nth-child(1){ background:#ff5f56; }
.code-dot:nth-child(2){ background:#ffbd2e; }
.code-dot:nth-child(3){ background:#27c93f; }
.code-block pre { font-family:var(--f-mono); font-size:.82rem; line-height:1.8; color:rgba(246,241,233,.8); white-space:pre; }
.code-block .kw  { color:#c792ea; }
.code-block .str { color:#c3e88d; }
.code-block .fn  { color:#82aaff; }
.code-block .cm  { color:rgba(255,255,255,.25); font-style:italic; }
.code-block .num { color:var(--gold); }

/* Data Table */
.data-table { width:100%; border-collapse:collapse; margin:2.5rem 0; overflow-x:auto; display:block; }
.data-table th { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); text-align:left; padding:.8rem 1rem; border-bottom:2px solid var(--border-str); background:var(--cream); white-space:nowrap; }
.data-table td { font-family:var(--f-ui); font-size:.85rem; padding:.85rem 1rem; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:top; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(200,85,61,.03); }
.td-tag  { font-family:var(--f-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; padding:.2rem .5rem; background:rgba(45,106,79,.08); color:var(--accent2); }
.td-good { color:var(--accent2); font-weight:700; }
.td-bad  { color:var(--accent);  font-weight:700; }

/* Stats Strip */
.stats-strip { display:grid; grid-template-columns:repeat(3,1fr); border:1.5px solid var(--border-str); margin:3rem 0; }
.stat-cell   { padding:1.75rem 1.5rem; text-align:center; border-right:1px solid var(--border); transition:background .25s; }
.stat-cell:last-child { border-right:none; }
.stat-cell:hover { background:rgba(200,85,61,.04); }
.stat-num { font-family:var(--f-alt); font-size:2.5rem; font-weight:900; color:var(--accent); display:block; line-height:1; margin-bottom:.4rem; }
.stat-lbl { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }

/* Inline Tip */
.inline-tip { display:flex; align-items:flex-start; gap:.9rem; padding:1.25rem 1.5rem; margin:2rem 0; background:rgba(45,106,79,.06); border-left:3px solid var(--accent2); }
.tip-icon   { font-size:1.1rem; flex-shrink:0; margin-top:.15rem; }
.tip-text   { font-family:var(--f-ui); font-size:.875rem; line-height:1.7; color:var(--ink); }
.tip-text strong { color:var(--accent2); }
.tip-text::first-letter { all:unset; }

/* ── TAGS & REACTIONS ──────────────────────────────────────── */
.article-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin:3.5rem 0 0; padding-top:2rem; border-top:1px solid var(--border); }
.art-tag { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; padding:.35rem .75rem; border:1px solid var(--border-str); color:var(--muted); cursor:pointer; background:none; transition:all .2s; }
.art-tag:hover { border-color:var(--accent); color:var(--accent); background:rgba(200,85,61,.05); }

.article-reactions { display:flex; align-items:center; gap:1rem; margin:2rem 0; padding:1.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.reaction-label { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); flex:1; min-width:120px; }
.reaction-btn   { display:flex; align-items:center; gap:.5rem; font-family:var(--f-mono); font-size:.65rem; letter-spacing:.08em; padding:.5rem 1rem; border:1.5px solid var(--border-md); background:none; cursor:pointer; color:var(--muted); transition:all .25s; }
.reaction-btn:hover, .reaction-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(200,85,61,.06); }

/* ── SIDEBAR ───────────────────────────────────────────────── */
.article-sidebar { position:sticky; top:80px; min-width:0; }

.toc { border:1px solid var(--border-str); padding:1.5rem; margin-bottom:2rem; background:var(--warm-white); }
.toc-title { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; display:flex; align-items:center; gap:.6rem; }
.toc-title::before { content:''; width:1.5rem; height:1px; background:var(--muted); display:inline-block; }
.toc-list { list-style:none; }
.toc-list li a { display:block; font-family:var(--f-ui); font-size:.78rem; color:var(--muted); text-decoration:none; padding:.5rem 0; padding-left:.85rem; border-left:2px solid var(--border); transition:color .2s, border-color .2s, padding-left .2s; line-height:1.4; }
.toc-list li a:hover, .toc-list li a.active { color:var(--accent); border-color:var(--accent); padding-left:1.1rem; }

.author-card { border:1px solid var(--border-str); padding:1.5rem; margin-bottom:2rem; background:var(--warm-white); }
.ac-header   { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; }
.ac-avatar   { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#ff8c69); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.85rem; font-weight:500; color:white; flex-shrink:0; }
.ac-name     { font-family:var(--f-ui); font-size:.92rem; font-weight:700; color:var(--ink); }
.ac-role     { font-family:var(--f-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ac-bio      { font-family:var(--f-ui); font-size:.78rem; line-height:1.65; color:var(--muted); }

.nl-sidebar    { border:1.5px solid var(--accent); padding:1.5rem; background:white; }
.nl-sb-label   { font-family:var(--f-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.nl-sb-title   { font-family:var(--f-display); font-size:1.1rem; font-weight:900; letter-spacing:-.02em; line-height:1.2; margin-bottom:.75rem; color:var(--ink); }
.nl-sb-desc    { font-family:var(--f-ui); font-size:.78rem; line-height:1.6; color:var(--muted); margin-bottom:1rem; }
.nl-sb-input   { width:100%; padding:.7rem .9rem; border:1.5px solid var(--border-md); font-family:var(--f-ui); font-size:.82rem; color:var(--ink); background:var(--paper); outline:none; margin-bottom:.6rem; transition:border-color .2s; }
.nl-sb-input:focus { border-color:var(--accent); }
.nl-sb-btn     { width:100%; padding:.7rem; background:var(--accent); color:white; border:none; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.nl-sb-btn:hover { background:var(--ink); }

/* ── RELATED ───────────────────────────────────────────────── */
.related-section { background:var(--cream); border-top:1px solid var(--border); padding:5rem 2.5rem; }
.related-inner   { max-width:1100px; margin:0 auto; }
.rel-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
.rel-label  { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; display:flex; align-items:center; gap:.6rem; }
.rel-label::before { content:''; width:1.5rem; height:1px; background:var(--accent); display:inline-block; }
.rel-title  { font-family:var(--f-display); font-size:2rem; font-weight:900; letter-spacing:-.03em; }
.rel-link   { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1.5px solid var(--ink); padding-bottom:.15rem; transition:color .2s, border-color .2s; white-space:nowrap; }
.rel-link:hover { color:var(--accent); border-color:var(--accent); }
.related-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.rel-card       { background:white; border:1px solid var(--border); overflow:hidden; cursor:pointer; transition:transform .3s, box-shadow .3s, border-color .3s; text-decoration:none; display:block; }
.rel-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(14,12,10,.09); border-color:var(--accent); }
.rel-thumb      { height:160px; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.rel-body       { padding:1.25rem; }
.rel-cat        { font-family:var(--f-mono); font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.rel-art-title  { font-family:var(--f-display); font-size:1rem; font-weight:700; letter-spacing:-.015em; line-height:1.3; color:var(--ink); margin-bottom:.6rem; }
.rel-meta       { font-family:var(--f-mono); font-size:.58rem; color:var(--muted); display:flex; gap:.75rem; }
.no-related     { color:var(--muted); font-family:var(--f-mono); font-size:.75rem; text-align:center; padding:2rem 0; }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer    { background:var(--ink); padding:2.5rem; }
.footer-inner   { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; }
.footer-logo-sm { font-family:var(--f-alt); font-size:1rem; font-weight:700; color:white; display:flex; align-items:center; gap:.4rem; text-decoration:none; }
.footer-logo-dot{ width:7px; height:7px; background:var(--accent); border-radius:50%; }
.footer-copy    { font-family:var(--f-mono); font-size:.6rem; color:rgba(246,241,233,.3); letter-spacing:.08em; }
.footer-links-sm{ display:flex; gap:1.25rem; }
.footer-links-sm a { font-family:var(--f-mono); font-size:.6rem; color:rgba(246,241,233,.35); text-decoration:none; transition:color .2s; letter-spacing:.08em; }
.footer-links-sm a:hover { color:rgba(246,241,233,.7); }

/* ── BLOG INDEX PAGE ───────────────────────────────────────── */
.index-hero { padding:5rem 2.5rem 4rem; max-width:1200px; margin:0 auto; }
.index-title { font-family:var(--f-display); font-size:clamp(3rem,7vw,6rem); font-weight:900; letter-spacing:-.04em; line-height:1.02; margin-bottom:1rem; }
.index-desc  { font-family:var(--f-ui); font-size:1rem; color:var(--muted); max-width:480px; margin-bottom:2.5rem; line-height:1.7; }

.posts-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1200px; margin:0 auto; padding:0 2.5rem 5rem; }
.post-card    { background:white; border:1px solid var(--border); overflow:hidden; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s; }
.post-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(14,12,10,.1); border-color:var(--accent); }
.post-thumb   { height:180px; overflow:hidden; }
.post-thumb-inner { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3.5rem; transition:transform .4s ease; }
.post-card:hover .post-thumb-inner { transform:scale(1.05); }
.post-body    { padding:1.4rem; }
.post-cat-badge { display:inline-block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.15em; text-transform:uppercase; background:var(--cream); color:var(--muted); padding:.25rem .6rem; margin-bottom:.85rem; border:1px solid var(--border); }
.post-title   { font-family:var(--f-display); font-size:1.1rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; margin-bottom:.7rem; color:var(--ink); text-decoration:none; display:block; }
.post-title:hover { color:var(--accent); }
.post-excerpt { font-size:.8rem; color:var(--muted); line-height:1.7; margin-bottom:1.1rem; font-family:var(--f-ui); }
.post-footer  { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; border-top:1px solid var(--border); }
.post-author  { display:flex; align-items:center; gap:.5rem; }
.author-pic   { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; color:white; font-family:var(--f-mono); background:linear-gradient(135deg,var(--accent),#ff8c69); }
.author-n     { font-size:.72rem; font-weight:600; color:var(--ink); font-family:var(--f-ui); }
.post-meta-r  { display:flex; align-items:center; gap:.75rem; font-family:var(--f-mono); font-size:.58rem; color:var(--muted); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:1024px) {
  .article-layout { grid-template-columns:1fr; gap:3rem; }
  .article-sidebar { position:static; }
  .posts-grid { grid-template-columns:repeat(2,1fr); }
  .related-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .site-nav { padding:0 1.25rem; }
  .nav-breadcrumb { display:none; }
  .article-hero { padding:3rem 1.25rem 2rem; }
  .article-layout { padding:3rem 1.25rem 4rem; }
  .article-hero-img { padding:0 1.25rem; }
  .hero-img-inner { height:260px; }
  .stats-strip { grid-template-columns:1fr; }
  .stat-cell { border-right:none; border-bottom:1px solid var(--border); }
  .stat-cell:last-child { border-bottom:none; }
  .related-section { padding:3rem 1.25rem; }
  .related-grid { grid-template-columns:1fr; }
  .posts-grid { grid-template-columns:1fr; padding:0 1.25rem 3rem; }
  .index-hero { padding:3rem 1.25rem 2rem; }
  .callout { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .article-title { font-size:1.8rem; }
  .author-row { flex-direction:column; align-items:flex-start; }
}