/* ScarX blog: the index, articles written with Claude, and the strategy guides. */

/* ── Index ── */
.bl{max-width:var(--container,1320px);margin:0 auto;padding:calc(var(--nav-h) + clamp(40px,7vw,96px)) var(--gutter,24px) var(--space-12);}
.bl-eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:var(--track-caps,0.2em);text-transform:uppercase;color:var(--text-muted);}
.bl-eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);}
.bl h1{font-size:clamp(48px,6.4vw,96px);font-weight:500;letter-spacing:-0.045em;line-height:0.95;margin-top:var(--space-3);max-width:14ch;}
.bl h1 em{font-style:normal;color:var(--accent);}
.bl-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--text-secondary);max-width:620px;margin-top:var(--space-3);}
.bl-sec{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);margin:clamp(48px,6vw,80px) 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--hairline);}
.bl-sec h2{font-family:var(--font);font-size:20px;font-weight:600;letter-spacing:0;}
.bl-sec small{font-size:13px;color:var(--text-muted);}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.bl-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
.bl-card .ph{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg,20px);overflow:hidden;background:var(--surface-3);border:1px solid var(--border-default);}
.bl-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease-fluid);}
.bl-card:hover .ph img{transform:scale(1.04);}
.bl-card .cat{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-top:var(--space-2);}
.bl-card h3{font-family:var(--font);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-0.01em;color:var(--text-primary);margin-top:8px;}
.bl-card p{font-size:14.5px;line-height:1.55;color:var(--text-secondary);margin-top:8px;}
.bl-card .meta{font-size:12px;color:var(--text-muted);margin-top:10px;}
.bl-card.lead{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,48px);align-items:center;}
.bl-card.lead .ph{aspect-ratio:16/9;}
.bl-card.lead h3{font-size:clamp(26px,2.8vw,38px);font-weight:500;letter-spacing:-0.03em;font-family:var(--font-display);}
.bl-card.lead p{font-size:16px;}
.bl-empty{padding:var(--space-4);border:1px dashed var(--border-strong);border-radius:var(--radius-lg,20px);color:var(--text-secondary);font-size:15px;line-height:1.6;}
.bl-ai{display:inline-flex;align-items:center;gap:6px;}
.bl-ai::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
@media (max-width:960px){ .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .bl-card.lead{grid-template-columns:1fr;} }
@media (max-width:600px){ .bl-grid{grid-template-columns:1fr;} }

/* ── One article or guide ── */
.article-hero{max-width:760px;margin:0 auto;padding:calc(var(--nav-h) + clamp(32px,6vw,72px)) var(--gutter,24px) 0;border:0;}
.article-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);text-decoration:none;margin-bottom:var(--space-3);}
.article-back:hover{color:var(--text-primary);}
.article-tag{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--space-2);}
.article-title{font-family:var(--font-display);font-size:clamp(36px,5vw,60px);font-weight:500;letter-spacing:-0.035em;line-height:1.02;color:var(--text-primary);margin-bottom:var(--space-2);}
.article-subtitle{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--text-secondary);margin-bottom:var(--space-2);max-width:none;}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:13px;color:var(--text-muted);}
.article-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong);}
.article-photo{max-width:1080px;margin:clamp(28px,4vw,48px) auto 0;padding:0 var(--gutter,24px);}
.article-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 30%;border-radius:var(--radius-lg,20px);border:1px solid var(--border-default);background:var(--surface-3);}
.article-photo figcaption{font-size:12px;color:var(--text-muted);margin-top:10px;line-height:1.5;}
.article-photo figcaption a{color:var(--text-secondary);}
.article-body{max-width:760px;margin:0 auto;padding:clamp(32px,4vw,56px) var(--gutter,24px) var(--space-10);}
.article-body h2{font-family:var(--font-display);font-size:clamp(24px,2.4vw,30px);font-weight:500;letter-spacing:-0.025em;line-height:1.2;color:var(--text-primary);margin:var(--space-6) 0 var(--space-2);}
.article-body h3{font-family:var(--font);font-size:19px;font-weight:600;letter-spacing:0;color:var(--text-primary);margin:var(--space-4) 0 var(--space-1);}
.article-body p{font-size:17px;line-height:1.75;color:var(--text-secondary);margin-bottom:var(--space-3);}
.article-body strong{color:var(--text-primary);font-weight:600;}
.article-body a{color:var(--accent);}
.article-body ul{list-style:none;margin:0 0 var(--space-3);padding:0;}
.article-body ul li{position:relative;padding:6px 0 6px 22px;font-size:17px;line-height:1.7;color:var(--text-secondary);}
.article-body ul li::before{content:"";position:absolute;left:2px;top:17px;width:6px;height:6px;border-radius:1px;background:var(--accent);}
.callout{background:var(--surface);border:1px solid var(--border-default);border-left:2px solid var(--accent);border-radius:var(--radius);padding:var(--space-3);margin:var(--space-4) 0;}
.callout-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.callout p{font-size:15.5px;margin:0;}
.quote-block{margin:var(--space-5) 0;padding:0 0 0 var(--space-3);border-left:2px solid var(--border-strong);background:none;border-radius:0;}
.quote-text{font-family:var(--font-display);font-size:clamp(20px,2vw,26px);font-weight:500;font-style:normal;letter-spacing:-0.02em;line-height:1.35;color:var(--text-primary);margin-bottom:10px;}
.quote-attr{font-size:13px;color:var(--text-muted);font-weight:500;}
.steps-box{background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-lg,20px);padding:var(--space-3);margin:var(--space-4) 0;}
.steps-box-title{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2);}
.step-item{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--hairline);}
.step-item:last-child{border-bottom:0;padding-bottom:0;}
.step-num{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--accent-subtle);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:600;border:0;}
.step-content strong{display:block;font-size:15px;color:var(--text-primary);margin-bottom:3px;}
.step-content span{font-size:14px;line-height:1.6;color:var(--text-secondary);}
.cta-box{background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-lg,20px);padding:clamp(24px,3vw,36px);margin:var(--space-6) 0;text-align:left;}
.cta-box h3{font-family:var(--font-display);font-size:clamp(22px,2.2vw,28px);font-weight:500;letter-spacing:-0.025em;color:var(--text-primary);margin:0 0 8px;}
.cta-box p{font-size:15.5px;margin-bottom:var(--space-3);}
.cta-btn{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;text-decoration:none;}
.cta-btn:hover{background:var(--accent-hover);}
.related-section{border-top:1px solid var(--hairline);padding-top:var(--space-4);margin-top:var(--space-4);}
.related-title{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-2);}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-2);}
.related-card{display:block;background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius);padding:var(--space-2);text-decoration:none;transition:border-color 0.3s ease;}
.related-card:hover{border-color:var(--border-strong);}
.related-card-tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;}
.related-card-title{font-size:15px;font-weight:600;line-height:1.35;color:var(--text-primary);}

/* Articles written with Claude */
.art-keys{background:var(--surface);border:1px solid var(--border-default);border-radius:var(--radius-lg,20px);padding:var(--space-3);margin-bottom:var(--space-4);}
.art-keys h2{margin:0 0 var(--space-1);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);}
.art-keys ul{margin:0;}
.art-keys li{font-size:16px;}
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:17px;padding:0 4px;margin:0 1px;border-radius:4px;background:var(--accent-subtle);color:var(--accent);font-family:var(--mono);font-size:10px;font-weight:600;text-decoration:none;vertical-align:2px;}
.cite:hover{background:var(--accent);color:#fff;}
.art-tickers{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-2);}
.art-tickers a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid var(--border-strong);border-radius:999px;font-family:var(--mono);font-size:12px;color:var(--text-primary);text-decoration:none;}
.art-tickers a:hover{border-color:var(--accent);}
.art-sources{list-style:none;margin:0;padding:0;counter-reset:src;}
.art-sources li{counter-increment:src;display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:10px 0;border-bottom:1px solid var(--hairline);font-size:14px;line-height:1.5;color:var(--text-secondary);}
.art-sources li::before{content:counter(src);font-family:var(--mono);font-size:12px;color:var(--accent);}
.art-sources a{color:var(--text-primary);}
.art-note{font-size:13px;line-height:1.6;color:var(--text-muted);margin-top:var(--space-3);}

/* Numbered rule markers (formerly emoji icons) in the guides */
.rule-icon{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:0.08em;color:var(--accent);margin-bottom:8px;}