/* article-specific rules only — base template in article-base.css */

/* BLOCKQUOTE */
.art-prose blockquote { border-left: 3px solid var(--accent); padding: 0.4rem 0 0.4rem 1.2rem; margin: 1.5rem 0; color: var(--ink); font-style: italic; line-height: 1.7; font-size: 1.05rem }

/* PULL QUOTE (top/bottom border style) */
.pull-quote { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--border); padding: 1.8rem 0; margin: 2.5rem 0 }
.pull-quote p { font-family: var(--serif); font-size: 1.3rem !important; line-height: 1.4 !important; color: var(--ink) !important; margin: 0 !important; font-style: italic }

/* MODEL COMPARISON */
.model-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 }
.model-col { border-radius: var(--rl); padding: 1.5rem 1.6rem; border: 1px solid var(--border) }
.model-old { background: var(--s2) }
.model-new { background: rgba(232,86,42,0.06); border-color: rgba(232,86,42,0.25) }
.model-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; margin-bottom: 0.7rem }
.model-old .model-label { color: var(--ink3) }
.model-new .model-label { color: var(--accent) }
.model-col p, .model-col ul li { font-size: 0.92rem !important; line-height: 1.7 !important; color: var(--ink2) !important; margin: 0 0 0.5rem 0 !important }
.model-col p:last-child, .model-col ul li:last-child { margin-bottom: 0 !important }
.model-col ul { margin: 0; padding-left: 1.1rem }

/* SKILL ANATOMY */
.skill-card { background: var(--navy); border-radius: var(--rl); padding: 1.6rem 1.8rem; margin: 2rem 0 }
.skill-card .skill-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(232,86,42,0.85); margin-bottom: 0.9rem; font-weight: 500 }
.skill-card ul { list-style: none; margin: 0; padding: 0 }
.skill-card li { font-size: 0.92rem !important; line-height: 1.65 !important; color: rgba(255,255,255,0.78) !important; margin-bottom: 0.6rem !important; padding-left: 1.4rem; position: relative }
.skill-card li::before { content: '◆'; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 0.7rem; line-height: 1.8 }
.skill-card li strong { color: #fff !important; font-weight: 500 !important }

/* IMPROVEMENT LOOP */
.loop-wrap { counter-reset: loop-counter; margin: 1.5rem 0 }
.loop-item { padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 0.7rem; position: relative; padding-left: 3.5rem }
.loop-item::before { counter-increment: loop-counter; content: counter(loop-counter, decimal-leading-zero); position: absolute; left: 1rem; top: 1rem; font-family: var(--serif); font-size: 1.2rem; color: var(--accent); font-style: italic }
.loop-item strong { display: block; color: var(--ink); margin-bottom: 0.3rem; font-size: 0.95rem !important; font-weight: 500 !important }
.loop-item p { margin: 0 !important; font-size: 0.9rem !important; color: var(--ink2) !important; line-height: 1.65 !important }

/* WHY-IT-WORKS REASONS */
.reason-list { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin: 1.5rem 0 }
.reason-item { padding: 1rem 1.3rem; background: var(--s2); border-radius: var(--r); border-left: 3px solid var(--accent) }
.reason-item strong { display: block; color: var(--ink); font-size: 0.95rem !important; margin-bottom: 0.3rem; font-weight: 500 !important }
.reason-item p { margin: 0 !important; font-size: 0.9rem !important; color: var(--ink2) !important; line-height: 1.65 !important }

/* CHECKLIST */
.check-list { background: var(--s2); border-radius: var(--rl); padding: 1.4rem 1.7rem; margin: 1.2rem 0 }
.check-list ul { list-style: none; margin: 0 }
.check-list li { font-size: 0.93rem; color: var(--ink2); line-height: 1.65; margin-bottom: 0.5rem; padding-left: 1.6rem; position: relative }
.check-list li::before { content: '☐'; position: absolute; left: 0; top: -1px; color: var(--accent); font-size: 1.1rem }

@media (max-width: 700px) {
  .model-pair { grid-template-columns: 1fr }
}