/* ── Base article typography (shared pattern with af2-af3) ───────────── */

.writings-body {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

.article-page {
    max-width: 720px;
    width: 100%;
}

.article-header {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e4e4e0;
}

.article-header h1 {
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.3;
}

.article-subtitle {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #777;
    font-style: italic;
    margin-bottom: 10px;
}

.article-date {
    font-size: 0.875rem;
    color: #888;
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #444;
}

.article-body h2 {
    font-family: Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #222;
    margin: 48px 0 16px;
    scroll-margin-top: 24px;
}

.article-body h3 {
    font-family: Georgia, serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: #333;
    margin: 28px 0 12px;
}

.article-body p {
    margin-bottom: 20px;
}

.article-body a {
    color: #7a5299;
    text-decoration: none;
    transition: color 0.2s;
}

.article-body a:hover {
    color: #5a3d79;
}

.article-body ul {
    margin: 0 0 20px 1.2em;
}

.article-body li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.article-body strong {
    color: #3d2b54;
    font-weight: 600;
}

blockquote {
    margin: 24px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid rgba(196, 170, 216, 0.7);
    color: #555;
    font-style: italic;
}

/* ── Table of contents ──────────────────────────────────────────────── */

.toc {
    margin: 0 0 40px;
    padding: 20px 24px;
    background: rgba(122, 82, 153, 0.035);
    border: 1px solid #e4e4e0;
    border-radius: 10px;
}

.toc h2 {
    font-family: Georgia, serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9368b5;
    margin: 0 0 12px;
}

.toc ol {
    margin: 0 0 0 1.2em;
    font-size: 0.95rem;
    color: #555;
}

.toc li { margin-bottom: 5px; }

.toc a { color: #555; text-decoration: none; }
.toc a:hover { color: #7a5299; }

/* ── Capability table ───────────────────────────────────────────────── */

.cap-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 0.95rem;
}

.cap-table th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9368b5;
    background: rgba(122, 82, 153, 0.05);
    padding: 10px 14px;
    border-bottom: 1px solid #e4e4e0;
}

.cap-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #efeef0;
    line-height: 1.6;
    color: #555;
    vertical-align: top;
}

.cap-table td:first-child {
    font-weight: 600;
    color: #3d2b54;
    width: 32%;
}

/* ── Stat callout ───────────────────────────────────────────────────── */

.stat {
    margin: 24px 0;
    padding: 18px 22px;
    background: rgba(122, 82, 153, 0.04);
    border-left: 3px solid #7a5299;
    border-radius: 0 8px 8px 0;
}

.stat .stat-num {
    font-family: Georgia, serif;
    font-size: 1.6rem;
    color: #7a5299;
    line-height: 1.1;
    display: block;
    margin-bottom: 4px;
}

.stat .stat-cap {
    font-size: 0.92rem;
    color: #666;
    line-height: 1.55;
}

.stat .stat-source {
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: #999;
    line-height: 1.5;
}

.stat .stat-source a {
    color: #9368b5;
    text-decoration: none;
}

.stat .stat-source a:hover { color: #7a5299; }

/* ── Figures (SVG diagrams) ─────────────────────────────────────────── */

.fig {
    margin: 40px 0;
    text-align: center;
}

.fig svg {
    width: 100%;
    max-width: 560px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.fig figcaption {
    margin-top: 14px;
    font-size: 0.88rem;
    color: #888;
    line-height: 1.5;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Collapsible appendix (accordion, from af2-af3 pattern) ─────────── */

details.accordion {
    margin: 18px 0;
    border: 1px solid rgba(196, 170, 216, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

details.accordion summary {
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #7a5299;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(122, 82, 153, 0.04);
    user-select: none;
}

details.accordion summary::before {
    content: '▶';
    font-size: 0.65rem;
    transition: transform 0.2s;
    color: #ae8ecc;
}

details.accordion[open] summary::before { transform: rotate(90deg); }
details.accordion summary::-webkit-details-marker { display: none; }

details.accordion .accordion-body {
    padding: 16px 18px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #555;
    border-top: 1px solid rgba(196, 170, 216, 0.25);
}

.idx-row { margin-bottom: 14px; }
.idx-row .idx-label {
    display: block;
    font-weight: 600;
    color: #7a5299;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

/* ── Flywheel diagram ────────────────────────────────────────────────── */

.flywheel-node  { fill: #faf8fc; }
.flywheel-label { fill: #4a2d6b; }
.flywheel-sub   { fill: #8a6aa8; }

.ring-label-1 { fill: #9a86b3; }
.ring-label-2 { fill: #8d6aae; }
.ring-label-3 { fill: #7a5299; }
.ring-sub-1   { fill: #a99cbb; }
.ring-sub-2   { fill: #9d86b8; }
.ring-sub-3   { fill: #8d72ad; }

body.dark .flywheel-node  { fill: #1e1a28; }
body.dark .flywheel-label { fill: #d4b8f0; }
body.dark .flywheel-sub   { fill: #9a7ec0; }

body.dark .ring-label-1 { fill: #c4b4d8; }
body.dark .ring-label-2 { fill: #c0a8d8; }
body.dark .ring-label-3 { fill: #bc9cd8; }
body.dark .ring-sub-1   { fill: #a898c0; }
body.dark .ring-sub-2   { fill: #a490c0; }
body.dark .ring-sub-3   { fill: #a088c0; }

/* ── Dark mode overrides ─────────────────────────────────────────────── */

body.dark .article-header {
    border-bottom-color: var(--border);
}
body.dark .article-header h1 { color: var(--text-1); }
body.dark .article-subtitle   { color: var(--text-muted); }
body.dark .article-date        { color: var(--text-muted); }
body.dark .article-body        { color: var(--text-3); }
body.dark .article-body h2     { color: var(--text-1); }
body.dark .article-body h3     { color: var(--text-2); }
body.dark .article-body strong { color: #c4a0e0; }
body.dark blockquote           { color: var(--text-4); border-left-color: rgba(196,170,216,0.35); }
body.dark .toc                 { background: rgba(122,82,153,0.06); border-color: var(--border); }
body.dark .toc ol, body.dark .toc a { color: var(--text-4); }
body.dark .cap-table th        { background: rgba(122,82,153,0.08); border-bottom-color: var(--border); }
body.dark .cap-table td        { border-bottom-color: var(--border); color: var(--text-4); }
body.dark .cap-table td:first-child { color: #c4a0e0; }
body.dark .stat                { background: rgba(122,82,153,0.07); }
body.dark .stat .stat-cap      { color: var(--text-4); }
body.dark .stat .stat-source   { color: var(--text-muted); }
body.dark .fig figcaption      { color: var(--text-muted); }
body.dark details.accordion    { border-color: rgba(196,170,216,0.2); }
body.dark details.accordion summary { background: rgba(122,82,153,0.07); }
body.dark details.accordion .accordion-body { color: var(--text-4); border-top-color: rgba(196,170,216,0.15); }