/* ==========================================================================
   Math Katas — Long-form prose (founder's note, articles)
   Loaded after theme.css. Provides a narrow reading column with calm
   typography that lets the iOS theme breathe.
   ========================================================================== */

.article {
    padding: var(--sp-9) 0 var(--sp-8);
}

.article__header {
    max-width: 720px;
    margin: 0 auto var(--sp-7);
    text-align: left;
}

.article__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    background: var(--c-annotation-bg);
    color: var(--c-text-secondary);
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
}

.article__title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin-bottom: var(--sp-4);
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.article__lede {
    font-size: 1.25rem;
    color: var(--c-text-secondary);
    line-height: 1.55;
    max-width: 60ch;
}

.article__byline {
    margin-top: var(--sp-5);
    font-size: var(--fs-small);
    color: var(--c-text-secondary);
}

.article__body {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--c-text-primary);
}

.article__body h2 {
    font-size: 1.55rem;
    margin: var(--sp-7) 0 var(--sp-3);
    letter-spacing: -0.005em;
}
.article__body h3 {
    font-size: 1.2rem;
    margin: var(--sp-6) 0 var(--sp-2);
}
.article__body p { margin: 0 0 var(--sp-4); }
.article__body p + p { margin-top: 0; }

/* Numbered conversation list (the seven-point conversation with Scotty) */
.article__body ol.numbered {
    list-style: none;
    counter-reset: conv;
    padding: 0;
    margin: var(--sp-5) 0;
}
.article__body ol.numbered > li {
    position: relative;
    counter-increment: conv;
    padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-7) + var(--sp-1));
    margin-bottom: var(--sp-2);
    background: var(--c-surface);
    border-left: 3px solid var(--c-accent);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.article__body ol.numbered > li::before {
    content: counter(conv);
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-3);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--c-accent);
}

/* Block quote — used for the 2010 quote */
.article__body blockquote {
    margin: var(--sp-6) 0;
    padding: var(--sp-5) var(--sp-6);
    background: var(--c-annotation-bg);
    border-left: 4px solid var(--c-cta-grad-end);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--c-text-primary);
    font-style: italic;
}
.article__body blockquote cite {
    display: block;
    font-style: normal;
    font-size: var(--fs-small);
    color: var(--c-text-secondary);
    margin-top: var(--sp-2);
}
.article__body blockquote cite::before { content: "— "; }

/* "Let them try" callout — humane framing in a soft warm card */
.article__body .gentle-callout {
    margin: var(--sp-6) 0;
    padding: var(--sp-5) var(--sp-6);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-highlight-fill) 75%, var(--c-surface)) 0%,
        var(--c-surface) 100%);
    border: 1px solid color-mix(in srgb, var(--c-cta-grad-end) 25%, transparent);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-soft);
}
.article__body .gentle-callout strong { color: var(--c-text-primary); }

/* Short attribution line for the Madelia lead teacher quote */
.article__body .attributed-quote {
    margin: var(--sp-6) 0;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-surface);
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--c-text-primary) 8%, transparent);
}
.article__body .attributed-quote p:first-child {
    font-size: 1.1rem;
    margin-bottom: var(--sp-3);
}
.article__body .attributed-quote .source {
    font-size: var(--fs-small);
    color: var(--c-text-secondary);
}

.article__body em { color: inherit; }
.article__body strong { color: var(--c-text-primary); }

/* Editorial note for places where Bob will paste original 2010 prose later */
.article__body .editor-note {
    background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface));
    border-left: 3px dashed var(--c-accent);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-5) 0;
    font-size: var(--fs-small);
    color: var(--c-text-secondary);
    border-radius: 0 6px 6px 0;
}
.article__body .editor-note strong { color: var(--c-accent); }

/* Closing CTA at end of article */
.article__cta {
    max-width: 680px;
    margin: var(--sp-8) auto 0;
    padding: var(--sp-6);
    background: var(--c-surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    text-align: center;
}
.article__cta h2 { margin-top: 0; }