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

/* FRAMEWORK CARDS */
.framework-card { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 1rem 0 }
.fc-name { font-size: 0.88rem; font-weight: 500; color: var(--ink); margin-bottom: 0.5rem }
.fc-what { font-size: 0.82rem; color: var(--ink2); line-height: 1.55; margin-bottom: 0.6rem }
.fc-gap { font-size: 0.78rem; color: var(--ink3); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 0.6rem }
.fc-gap strong { color: var(--ink2) }

/* FAILURE MODES */
.failure-mode { display: flex; gap: 1rem; align-items: flex-start; margin: 0.8rem 0; background: var(--s2); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.2rem }
.fm-num { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: rgba(232,86,42,0.1); padding: 0.2rem 0.5rem; border-radius: 2px; flex-shrink: 0; margin-top: 0.1rem }
.failure-mode strong { display: block; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.25rem }
.failure-mode span { font-size: 0.82rem; color: var(--ink3); line-height: 1.5 }

/* READINESS DIMENSIONS */
.readiness-dimension { border-left: 2px solid var(--border-2, rgba(0,0,0,0.12)); padding: 0.5rem 0 0.5rem 1rem; margin: 0.8rem 0 }
.rd-label { font-size: 0.75rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.2rem }
.rd-q { font-size: 0.85rem; color: var(--ink2); line-height: 1.55 }

/* DISCUSSION BLOCK */
.discussion-block { background: var(--navy); border-radius: var(--rl); padding: 1.6rem 1.8rem; margin: 2rem 0 }
.db-label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 0.8rem }
.discussion-block p { font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.65; margin: 0 0 0.8rem }
.discussion-block ul { margin: 0.5rem 0 1rem 1.2rem; padding: 0 }
.discussion-block li { font-size: 0.86rem; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 0.4rem }
.db-cta { display: inline-block; background: var(--accent); color: #fff; padding: 0.65rem 1.3rem; border-radius: var(--r); font-size: 0.85rem; font-weight: 500; text-decoration: none; margin-top: 0.4rem; transition: opacity 0.2s }
.db-cta:hover { opacity: 0.88 }

/* KEY INSIGHT */
.key-insight { color: var(--accent); font-weight: 500 }

/* FRAMEWORK COMPARISON TABLE */
.fw-table { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin: 1.5rem 0; font-size: 0.82rem }
.fwt-head { display: grid; grid-template-columns: 1.4fr 1.8fr 1.8fr; background: var(--navy); color: rgba(255,255,255,0.6); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding: 0.6rem 0.9rem; gap: 0.8rem }
.fwt-row { display: grid; grid-template-columns: 1.4fr 1.8fr 1.8fr; padding: 0.65rem 0.9rem; gap: 0.8rem; border-top: 1px solid var(--border); color: var(--ink2); line-height: 1.45; align-items: start }
.fwt-row:nth-child(even) { background: var(--s2) }
.fwt-name { font-weight: 500; color: var(--ink) }
.fwt-misses { color: #c0392b }
@media (max-width: 640px) {
  .fwt-head { grid-template-columns: 1fr }
  .fwt-head div:not(:first-child) { display: none }
  .fwt-row { grid-template-columns: 1fr; gap: 0.25rem }
  .fwt-row > div::before { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); display: block; margin-bottom: 0.1rem }
  .fwt-row > div:nth-child(2)::before { content: 'Covers: ' }
  .fwt-row > div:nth-child(3)::before { content: 'Gap: ' }
}