/* ==========================================================================
   Inner Citadel — long-form article layout
   Loaded after style.css; reuses its tokens (--gold-soft, --slate, --ink, …).
   ========================================================================== */

.page-article main {
    padding-top: clamp(96px, 12vw, 132px);
    padding-bottom: var(--section-y);
}

/* 660px container - 48px padding = a ~74-character measure, inside the
   comfortable 60-75 range for long-form reading. Measured, not guessed. */
.page-article .crumbs,
.page-article .article {
    max-width: 660px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Breadcrumbs -------------------------------------------------------- */
.crumbs { margin-bottom: 30px; }
.crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--slate-dark);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before {
    content: "/";
    color: var(--slate-dark);
    opacity: 0.6;
}
.crumbs a { color: var(--slate); text-decoration: none; transition: color 0.25s var(--ease); }
.crumbs a:hover { color: var(--gold-soft); }
.crumbs [aria-current="page"] { color: var(--slate-dark); }

/* --- Article head ------------------------------------------------------- */
.article-head { margin-bottom: 40px; }

/* style.css centres .eyebrow; articles are left-aligned. */
.page-article .eyebrow { text-align: left; margin-bottom: 16px; }

.article-head h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.2vw, 3rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--white);
    margin-bottom: 20px;
    text-wrap: balance;
}

.standfirst {
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--slate-light);
    margin-bottom: 22px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--slate-dark);
    letter-spacing: 0.3px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

/* --- Table of contents -------------------------------------------------- */
.toc {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: 22px 26px;
    margin-bottom: 42px;
}
.toc h2 {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 14px;
}
.toc ol {
    list-style: none;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.toc li { counter-increment: toc; display: flex; gap: 12px; font-size: 0.92rem; }
.toc li::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--slate-dark);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.toc a { color: var(--slate); text-decoration: none; transition: color 0.25s var(--ease); }
.toc a:hover { color: var(--gold-soft); }

/* --- Prose -------------------------------------------------------------- */
.prose { font-size: 1.06rem; line-height: 1.78; color: var(--slate-light); }

.prose > * + * { margin-top: 1.15em; }

.prose h2 {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 3.2vw, 1.85rem);
    line-height: 1.25;
    font-weight: 600;
    color: var(--white);
    margin-top: 2.2em;
    margin-bottom: 0.1em;
    letter-spacing: -0.3px;
    text-wrap: balance;
}
.prose h2 + * { margin-top: 0.7em; }

.prose h3 {
    font-family: var(--font-display);
    font-size: 1.16rem;
    font-weight: 600;
    color: var(--gold-soft);
    margin-top: 1.9em;
    margin-bottom: 0.1em;
}
.prose h3 + * { margin-top: 0.6em; }

.prose strong { color: var(--white); font-weight: 600; }
.prose em { color: var(--slate-light); }

.prose a {
    color: var(--gold-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--gold-border);
    transition: text-decoration-color 0.25s var(--ease);
}
.prose a:hover { text-decoration-color: var(--gold-soft); }

.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 0.55em; }
.prose li::marker { color: var(--gold-soft); }

.prose blockquote {
    border-left: 2px solid var(--gold-border);
    background: var(--gold-faint);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 22px 26px;
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    font-family: var(--font-display);
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--slate-light);
}
.prose blockquote > * + * { margin-top: 0.8em; }
.prose blockquote em { color: var(--slate); font-style: normal; font-size: 0.88rem; }

/* The wrapper scrolls; the table inside it holds the min-width. Putting both
   on one element makes the page itself scroll sideways on phones. */
.prose .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
}
.prose table {
    display: table;
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.prose th, .prose td {
    text-align: left;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.prose th {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold-soft);
    font-weight: 700;
    background: rgba(255, 255, 255, 0.02);
}
.prose tbody tr:last-child td { border-bottom: none; }

.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }

.prose code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.88em;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--gold-soft);
}

/* --- In-app CTA --------------------------------------------------------- */
.cta-card {
    margin-top: 56px;
    padding: 34px 32px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(165deg, rgba(30, 26, 16, 0.75), rgba(16, 16, 20, 0.75));
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.cta-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}
.cta-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 12px;
}
.cta-card h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 12px;
}
.cta-card p { color: var(--slate); font-size: 0.98rem; line-height: 1.7; }
.cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 16px; }
.cta-note { font-size: 0.84rem; color: var(--slate-dark); }

/* --- FAQ ---------------------------------------------------------------- */
.faq-block { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--line); }
.faq-block > h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--white);
    margin-bottom: 28px;
}
.faq-block .qa + .qa { margin-top: 26px; }
.faq-block .qa h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: var(--gold-soft);
    margin-bottom: 8px;
}
.faq-block .qa p { color: var(--slate); font-size: 0.98rem; line-height: 1.72; }

/* --- Section index ------------------------------------------------------ */
.index-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.index-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-card);
    transition: var(--transition-smooth);
}
.index-card:hover { border-color: var(--gold-border); transform: translateY(-3px); }
.index-card a { display: block; padding: 26px 28px; text-decoration: none; }
.index-card h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--white);
    margin-bottom: 8px;
}
.index-card p { color: var(--slate); font-size: 0.95rem; margin-bottom: 12px; }
.index-meta {
    font-size: 0.76rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gold-soft);
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
    .page-article .crumbs,
    .page-article .article { padding: 0 18px; }
    .toc { padding: 18px 20px; }
    .cta-card { padding: 26px 22px; }
    .prose { font-size: 1.02rem; }
}

@media print {
    .page-article main { padding-top: 0; }
    .toc, .cta-card, .crumbs { display: none; }
    .prose { color: #000; font-size: 11pt; }
    .prose h2, .article-head h1 { color: #000; }
    .prose > table { border-color: #999; }
}