/* ── Article page body ── */

        /* ── Hero ── */
        .hero {
            max-width: 820px;
            margin: 0 auto;
            padding: 4rem 2rem 4rem;
            text-align: center;
        }

        .hero-eyebrow {
            color: #7A4F2D;
            margin-bottom: 2.5rem;
        }

        .hero h1 {
            font-family: var(--serif);
            font-size: clamp(1.8rem, 4.5vw, 3.5rem);
            font-weight: 400;
            letter-spacing: -0.025em;
            line-height: 1.15;
            margin-bottom: 2.5rem;
            color: var(--text);
        }

        .hero h1 em {
            font-style: italic;
            font-weight: 300;
        }

        .hero-intro {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 1.35rem;
            font-weight: 400;
            line-height: 1.6;
            color: #8a8a8a;
            max-width: 640px;
            margin: 0 auto 2.5rem;
        }

        .hero-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.25rem;
            font-size: 0.82rem;
            color: var(--text-faint);
        }

        .hero-meta .sep {
            width: 3px; height: 3px;
            border-radius: 50%;
            background: var(--text-faint);
        }

        .hero-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .hero-avatar {
            width: 28px; height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }

        .hero-author-name {
            font-weight: 600;
            color: var(--text-light);
        }

        /* ── Divider ── */
        .divider {
            max-width: 704px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .divider-line {
            border: none;
            border-top: 1px solid #ebebeb;
        }

        /* ── Article ── */
        .article {
            max-width: 704px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .article p {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 1.25rem;
            line-height: 1.85;
            color: #1a1a1a;
            margin-bottom: 2rem;
        }

        .article strong {
            color: #1a1a1a;
            font-weight: 600;
        }

        /* ── Big statement ── */
        .big-statement {
            max-width: 900px;
            margin: 0 auto;
            padding: 5rem 2rem;
            text-align: center;
        }

        .big-statement p {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 2.4rem;
            font-weight: 400;
            line-height: 1.3;
            letter-spacing: -0.025em;
            color: #1a1a1a;
            max-width: 760px;
            margin: 0 auto;
        }

        .big-statement p em {
            font-style: italic;
            font-weight: 300;
            color: #8a8a8a;
        }

        /* ── Section heading ── */
        .section-head {
            max-width: 704px;
            margin: 0 auto;
            padding: 3rem 2rem 0;
        }

        .section-number {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            color: #7A4F2D;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
        }

        .section-head h2 {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 2rem;
            font-weight: 400;
            letter-spacing: -0.02em;
            line-height: 1.2;
            color: #1a1a1a;
            margin-bottom: 2rem;
        }

        /* ── Example box ── */
        .example-box {
            max-width: 704px;
            margin: 0.5rem auto 2.5rem;
            padding: 0 2rem;
        }

        .example-inner {
            background: #F8F6F3;
            border-radius: 12px;
            padding: 2rem 2.25rem;
            box-shadow: 0 1px 3px rgba(61, 28, 42, 0.04), 0 4px 12px rgba(61, 28, 42, 0.03);
            border: 1px solid rgba(61, 28, 42, 0.06);
        }

        .example-label {
            font-family: var(--sans);
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #b0b0b0;
            margin-bottom: 0.75rem;
        }

        .example-inner p {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 1.05rem;
            line-height: 1.7;
            color: #4a4a4a;
            margin-bottom: 0;
        }

        .example-inner p + p {
            margin-top: 0.75rem;
        }

        /* ── Before/After box ── */
        .example-inner .before-after {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 0;
            margin-top: 1rem;
            align-items: start;
        }

        .example-inner .before-after .ba-divider {
            width: 1px;
            height: 100%;
            background: rgba(61, 28, 42, 0.1);
            margin: 0 1.5rem;
        }

        .example-inner .ba-col {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 1.05rem;
            font-style: normal;
            font-weight: 400;
            line-height: 1.6;
            color: var(--text);
            padding: 1rem 0;
        }

        .example-inner .ba-label {
            font-family: var(--sans);
            font-size: 0.6rem;
            font-weight: 700;
            font-style: normal;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-faint);
            margin-bottom: 0.5rem;
        }

        .example-inner .ba-result {
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(61, 28, 42, 0.08);
            font-family: var(--sans);
            font-size: 0.88rem;
            line-height: 1.7;
            color: var(--text-light);
        }

        /* ── Highlight box ── */
        .highlight-box {
            max-width: 704px;
            margin: 0.5rem auto 2.5rem;
            padding: 0 2rem;
        }

        .highlight-inner {
            background: #ffffff;
            border: 1px solid #ebebeb;
            border-radius: 12px;
            padding: 1.75rem 2rem;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

        .highlight-label {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #b0b0b0;
            margin-bottom: 1rem;
        }

        .highlight-list {
            list-style: none;
        }

        .highlight-list li {
            font-size: 1rem;
            line-height: 1.65;
            color: #4a4a4a;
            padding: 0.55rem 0;
            border-bottom: 1px solid #f2f2f0;
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
        }

        .highlight-list li:last-child { border-bottom: none; }

        .highlight-list .num {
            font-family: var(--sans);
            font-size: 0.65rem;
            font-weight: 700;
            color: #b0b0b0;
            background: #f8f8f6;
            width: 22px; height: 22px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            margin-top: 0.2rem;
        }

        .highlight-list strong {
            color: #1a1a1a;
            font-weight: 600;
        }

        /* ── Charts ── */
        .chart-box {
            max-width: 820px;
            margin: 0.5rem auto 2.5rem;
            padding: 0 2rem;
        }

        .chart-inner {
            background: #ffffff;
            border: 1px solid #ebebeb;
            border-radius: 12px;
            padding: 1.75rem 2rem;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

        .chart-label {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #b0b0b0;
            margin-bottom: 0.25rem;
        }

        .chart-sublabel {
            font-size: 0.82rem;
            color: #b0b0b0;
            margin-bottom: 1.25rem;
        }

        .chart-canvas-wrap {
            position: relative;
            width: 100%;
        }

        /* ── Visual break ── */
        .visual-break {
            max-width: 1000px;
            margin: 2rem auto 2rem;
            padding: 0 2rem;
        }

        .visual-inner {
            border-radius: 20px;
            padding: 5rem 4rem;
            text-align: center;
            position: relative;
            overflow: hidden;
            background: #1a1a1a;
            color: white;
        }

        .visual-inner::before {
            content: '';
            position: absolute;
            top: -40%;
            right: -10%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(124,91,245,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .visual-inner::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(59,125,245,0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        .visual-inner .v-eyebrow {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(255,255,255,0.35);
            margin-bottom: 1.25rem;
        }

        .visual-inner h3 {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 2.2rem;
            font-weight: 400;
            line-height: 1.25;
            letter-spacing: -0.02em;
            margin-bottom: 1rem;
            position: relative;
            z-index: 1;
        }

        .visual-inner h3 em {
            font-style: italic;
            font-weight: 300;
            color: rgba(255,255,255,0.5);
        }

        .visual-inner p {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 1.1rem;
            line-height: 1.65;
            color: rgba(255,255,255,0.5);
            max-width: 640px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* ── Series nav ── */
        .series-nav {
            max-width: 704px;
            margin: 0 auto 2rem;
            padding: 0 2rem;
        }

        .series-inner {
            background: #ffffff;
            border: 1px solid #ebebeb;
            border-radius: 12px;
            padding: 1.75rem 2rem;
            box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        }

        .series-label {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #b0b0b0;
            margin-bottom: 1rem;
        }

        .series-list {
            list-style: none;
        }

        .series-list li {
            font-size: 0.95rem;
            line-height: 1.65;
            color: #4a4a4a;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f2f2f0;
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
        }

        .series-list li:last-child { border-bottom: none; }

        .series-list li.active {
            color: #1a1a1a;
            font-weight: 600;
        }

        .series-list .num {
            font-family: var(--sans);
            font-size: 0.6rem;
            font-weight: 700;
            color: #b0b0b0;
            background: #f8f8f6;
            width: 20px; height: 20px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            margin-top: 0.2rem;
        }

        .series-list li.active .num {
            background: var(--text);
            color: #ffffff;
        }

        .series-list a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s;
        }

        .series-list a:hover { color: var(--text); }

        /* ── End CTA ── */
        .end-cta {
            max-width: 704px;
            margin: 3rem auto 0;
            padding: 0 2rem;
        }

        .end-cta-inner {
            background: #F8F8F6;
            border: 1px solid rgba(61, 28, 42, 0.06);
            border-radius: 20px;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        }

        .end-cta-inner.spotlight {
            animation: spotlightPulse 1.2s ease-out;
        }

        @keyframes spotlightPulse {
            0%   { transform: scale(1);    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
            40%  { transform: scale(1.015); box-shadow: 0 0 24px 3px rgba(61, 28, 42, 0.15); }
            100% { transform: scale(1);    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
        }

        .end-cta h3 {
            font-family: 'Newsreader', Georgia, serif;
            font-size: 2rem;
            font-weight: 400;
            letter-spacing: -0.02em;
            color: #1a1a1a;
            margin-bottom: 0.75rem;
            line-height: 1.25;
        }

        .end-cta-inner > p {
            font-size: 1rem;
            color: #8a8a8a;
            margin-bottom: 2.5rem;
            line-height: 1.6;
        }

        .end-form {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            max-width: 340px;
            margin: 2rem auto 0.5rem;
        }

        .end-form input {
            background: #ffffff;
            border: 1px solid #ebebeb;
            border-radius: 99px;
            outline: none;
            font-family: var(--sans);
            font-size: 0.85rem;
            padding: 0.75rem 1.25rem;
            color: #1a1a1a;
            transition: border-color 0.2s;
        }

        .end-form input:focus { border-color: #b0b0b0; }

        .end-form input::placeholder { color: #b0b0b0; }

        .end-form button {
            font-family: var(--sans);
            font-size: 0.85rem;
            font-weight: 600;
            background: #1a1a1a;
            color: #ffffff;
            border: none;
            border-radius: 99px;
            padding: 0.85rem 1.25rem;
            cursor: pointer;
            transition: opacity 0.15s;
        }

        .end-form button:hover { opacity: 0.85; }

        .end-cta-sub {
            font-size: 0.82rem;
            color: #8a8a8a;
            margin-top: 1rem;
        }

        /* ── Author sign-off ── */
        .sign-off {
            max-width: 704px;
            margin: 0 auto;
            padding: 3rem 2rem 5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .sign-off-avatar {
            width: 48px; height: 48px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        .sign-off-info { flex: 1; }

        .sign-off-name {
            font-weight: 600;
            font-size: 0.95rem;
        }

        .sign-off-role {
            font-size: 0.82rem;
            color: var(--text-light);
        }

        /* ── Article page overrides ── */
        .main {
            position: relative;
            z-index: 2;
            background: #F2EDE8;
        }

        /* ── Responsive ── */
        @media (max-width: 768px) {
            .hero { padding: 3rem 1.5rem; }
            .hero-eyebrow { margin-bottom: 1.5rem; }
            .hero h1 { margin-bottom: 1.5rem; }
            .hero-intro { font-size: 1.1rem; margin-bottom: 1.5rem; }
            .article p { font-size: 1.1rem; line-height: 1.75; }
            .big-statement { padding: 3rem 1.5rem; }
            .big-statement p { font-size: 1.6rem; }
            .section-head { padding: 2.5rem 2rem 0; }
            .section-head h2 { font-size: 1.6rem; margin-bottom: 1.5rem; }
            .highlight-inner { padding: 1.5rem; }
            .example-inner { padding: 1.5rem; }
            .example-inner .before-after { grid-template-columns: 1fr; gap: 0; }
            .example-inner .before-after .ba-divider { width: 100%; height: 1px; margin: 0.25rem 0; }
            .visual-inner { padding: 3rem 2rem; border-radius: 12px; }
            .visual-inner h3 { font-size: 1.5rem; }
            .end-cta-inner { padding: 2.5rem 1.5rem; border-radius: 16px; }
            .end-cta h3 { font-size: 1.6rem; }
            .sign-off { padding: 2.5rem 2rem 4rem; }
        }

        @media (max-width: 700px) {
            .hero { text-align: left; }
            .hero-meta { justify-content: flex-start; }
        }

        @media (max-width: 600px) {
            .hero { padding: 2.5rem 1.5rem; }

            .hero-meta { flex-wrap: wrap; justify-content: flex-start; }
            .big-statement { padding: 2.5rem 1.5rem; }
            .big-statement p { font-size: 1.35rem; }
            .section-head { padding: 2rem 1.5rem 0; }
            .section-head h2 { font-size: 1.4rem; }
            .article { padding: 0 1.5rem; }
            .divider { padding: 0 1.5rem; }
            .highlight-box { padding: 0 1.5rem; }
            .example-box { padding: 0 1.5rem; }
            .end-cta { padding: 0 1.5rem; }
            .sign-off { padding: 2rem 1.5rem 3rem; }
            .visual-break { padding: 0 1.5rem; }
            .visual-inner { padding: 2.5rem 1.5rem; }
            .end-form { max-width: 100%; }
            .series-nav { padding: 0 1.5rem; }
        }