/* ================================================================
           博客文章页 — Editorial Warm
           暖纸底色 / Fraunces 标题 / 极简导航 / 全宽英雄图
           ================================================================ */

        *, *::before, *::after { box-sizing: border-box; }

        /* suppress any shared-nav / footer injection on article pages */
        #site-nav, #site-auth, #site-footer { display: none !important; }

        html, body {
            margin: 0;
            padding: 0;
        }

        body {
            background: #efebe6;
            color: #1d1d1f;
            font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }

        /* ── Hero: title ────────────────────────────────── */
        .arx-hero {
            padding: clamp(48px, 8vw, 96px)
                     clamp(24px, 4vw, 48px)
                     clamp(32px, 5vw, 56px);
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }

        .arx-hero__content { max-width: 860px; text-align: center; }

        .arx-breadcrumb {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            list-style: none;
            margin: 0 0 clamp(32px, 5vw, 48px);
            padding: 0;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: rgba(29, 29, 31, 0.28);
        }

        .arx-breadcrumb a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .arx-breadcrumb a:hover { color: rgba(29, 29, 31, 0.55); }

        .arx-hero h1 {
            font-family: 'Fraunces', Georgia, serif;
            font-size: clamp(2.2rem, 5.5vw, 3.75rem);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.03em;
            color: #1d1d1f;
            margin: 0 0 20px;
        }

        .arx-hero h1 em {
            font-style: italic;
            font-weight: 400;
            color: rgba(29, 29, 31, 0.25);
        }

        .arx-hero__meta {
            font-size: 12px;
            font-weight: 600;
            color: rgba(29, 29, 31, 0.35);
            letter-spacing: 0.04em;
        }

        /* ── Hero image: wide ───────────────────────────── */
        .arx-hero-img {
            max-width: 1024px;
            margin: 0 auto clamp(40px, 6vw, 72px);
            padding: 0 clamp(24px, 4vw, 48px);
        }

        .arx-hero-img__frame {
            aspect-ratio: 16 / 5;
            background: rgba(255, 255, 255, 0.45);
            border-radius: 40px;
            border: 1px solid rgba(29, 29, 31, 0.06);
            overflow: hidden;
        }

        .arx-hero-img__frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* ── Body ───────────────────────────────────────── */
        .arx-body-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 clamp(24px, 4vw, 48px) clamp(80px, 12vw, 160px);
        }

        .arx-body { max-width: 680px; margin: 0 auto; }

        .arx-body p {
            margin: 0 0 1.4em;
            font-size: clamp(15px, 1.6vw, 17px);
            color: rgba(29, 29, 31, 0.68);
            line-height: 1.8;
        }

        .arx-body > p:first-child {
            font-size: clamp(16px, 1.8vw, 18px);
            color: rgba(29, 29, 31, 0.8);
        }

        .arx-body p strong { color: #1d1d1f; font-weight: 700; }

        .arx-body h2 {
            font-family: 'Fraunces', Georgia, serif;
            font-size: clamp(1.3rem, 2.6vw, 1.75rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.25;
            color: #1d1d1f;
            margin: clamp(40px, 6vw, 64px) 0 clamp(14px, 2vw, 20px);
        }

        .arx-body code {
            font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
            font-size: 0.87em;
            background: rgba(29, 29, 31, 0.07);
            padding: 2px 7px;
            border-radius: 6px;
            color: #1d1d1f;
        }

        .arx-body a {
            color: #0d5c4d;
            font-weight: 600;
            text-underline-offset: 3px;
            transition: opacity 0.2s ease;
        }

        .arx-body a:hover { opacity: 0.68; }

        /* ── Stats ──────────────────────────────────────── */
        .arx-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(12px, 2.5vw, 28px);
            margin: clamp(32px, 5vw, 56px) 0;
            padding: clamp(24px, 4vw, 48px) 0;
            border-top: 1px solid rgba(29, 29, 31, 0.07);
            border-bottom: 1px solid rgba(29, 29, 31, 0.07);
        }

        .arx-stat__num {
            font-family: 'Fraunces', Georgia, serif;
            font-size: clamp(2rem, 5vw, 3.25rem);
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.03em;
            color: #1d1d1f;
            margin-bottom: 8px;
        }

        .arx-stat__label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: rgba(29, 29, 31, 0.38);
            line-height: 1.45;
        }

        @media (max-width: 480px) {
            .arx-stats { grid-template-columns: 1fr 1fr; }
            .arx-stats .arx-stat:last-child { grid-column: span 2; text-align: center; }
        }

        /* ── Callout ────────────────────────────────────── */
        .arx-callout {
            display: flex;
            gap: 16px;
            padding: 20px 24px;
            margin: clamp(20px, 3vw, 32px) 0;
            border-radius: 20px;
        }

        .arx-callout--blue,
        .arx-callout--pink,
        .arx-callout--green {
            background: rgba(29, 29, 31, 0.04);
            color: #1d1d1f;
        }

        .arx-callout__icon {
            flex-shrink: 0;
            padding-top: 2px;
        }

        .arx-callout__icon svg {
            width: 20px; height: 20px;
            opacity: 0.42;
        }

        .arx-callout__title {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .arx-callout__body {
            font-size: 14px;
            line-height: 1.65;
            flex: 1;
        }

        .arx-callout__body p {
            font-size: 14px;
            color: inherit;
            margin: 0;
        }

        /* ── Table ──────────────────────────────────────── */
        .arx-table-wrap {
            overflow-x: auto;
            margin: clamp(20px, 3vw, 32px) 0;
            -webkit-overflow-scrolling: touch;
        }

        .arx-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .arx-table th {
            text-align: left;
            padding: 12px 10px;
            border-bottom: 1px solid rgba(29, 29, 31, 0.1);
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(29, 29, 31, 0.38);
            white-space: nowrap;
        }

        .arx-table td {
            padding: 14px 10px;
            border-bottom: 1px solid rgba(29, 29, 31, 0.05);
            color: rgba(29, 29, 31, 0.62);
            vertical-align: top;
            line-height: 1.55;
        }

        .arx-table td strong { color: #1d1d1f; font-weight: 600; }
        .arx-table tr:last-child td { border-bottom: none; }

        /* ── Code block ─────────────────────────────────── */
        .arx-code-wrap { margin: clamp(20px, 3vw, 40px) 0; }

        .arx-code-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(29, 29, 31, 0.35);
            margin-bottom: 8px;
            display: block;
        }

        .arx-code {
            background: #ffffff;
            border: 1px solid rgba(29, 29, 31, 0.06);
            border-radius: 16px;
            padding: 24px;
            font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
            font-size: 13px;
            line-height: 1.75;
            overflow-x: auto;
            white-space: pre;
            display: block;
            color: rgba(29, 29, 31, 0.78);
            margin: 0;
        }

        .arx-code .code-comment { color: rgba(29, 29, 31, 0.32); }
        .arx-code .code-path    { color: #0d5c4d; font-weight: 600; }

        /* ── List ───────────────────────────────────────── */
        .arx-list {
            list-style: disc;
            margin: 0 0 1.4em 1.4em;
            padding: 0;
            color: rgba(29, 29, 31, 0.65);
            font-size: clamp(15px, 1.6vw, 17px);
            line-height: 1.8;
        }

        .arx-list li { margin-bottom: 0.55em; }
        .arx-list strong { color: #1d1d1f; font-weight: 700; }

        /* ── Dark CTA ───────────────────────────────────── */
        .arx-cta {
            background: #1a1917;
            border-radius: 40px;
            padding: clamp(48px, 8vw, 88px) clamp(32px, 6vw, 72px);
            margin-top: clamp(40px, 7vw, 72px);
            position: relative;
            overflow: hidden;
            text-align: center;
            border-top: 3px solid #0d5c4d;
        }

        .arx-cta__water {
            position: absolute; inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Fraunces', Georgia, serif;
            font-size: clamp(8rem, 36vw, 22rem);
            font-weight: 700;
            color: #ffffff;
            opacity: 0.032;
            pointer-events: none;
            user-select: none;
            line-height: 1;
            letter-spacing: -0.04em;
        }

        .arx-cta__inner { position: relative; z-index: 1; }

        .arx-cta__kicker {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.22em;
            color: #0d5c4d;
            margin: 0 0 clamp(16px, 2.5vw, 24px);
        }

        .arx-cta h2 {
            font-family: 'Fraunces', Georgia, serif;
            font-size: clamp(1.75rem, 4.5vw, 3rem);
            font-weight: 700;
            letter-spacing: -0.025em;
            color: #f5f5f7;
            margin: 0 0 clamp(14px, 2vw, 20px);
            line-height: 1.1;
        }

        .arx-cta__desc {
            color: rgba(245, 245, 247, 0.32);
            font-size: clamp(14px, 1.5vw, 15px);
            line-height: 1.7;
            max-width: 30rem;
            margin: 0 auto clamp(32px, 5vw, 48px);
        }

        .arx-cta__btn {
            display: inline-block;
            background: #f5f5f7;
            color: #1d1d1f;
            padding: 15px 36px;
            border-radius: 999px;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
            white-space: nowrap;
        }

        .arx-cta__btn:hover { transform: scale(1.04); background: #ffffff; }

        .arx-cta__contact {
            margin: clamp(16px, 2.5vw, 24px) 0 0;
            font-size: 13px;
            color: rgba(245, 245, 247, 0.22);
        }

        .arx-cta__contact a {
            color: rgba(245, 245, 247, 0.45);
            text-decoration: none;
            border-bottom: 1px solid rgba(245, 245, 247, 0.15);
            padding-bottom: 1px;
            font-weight: 600;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .arx-cta__contact a:hover {
            color: #f5f5f7;
            border-color: rgba(245, 245, 247, 0.55);
        }

        /* ── Footer ─────────────────────────────────────── */
        .arx-footer {
            padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px);
            border-top: 1px solid rgba(29, 29, 31, 0.06);
            background: rgba(255, 255, 255, 0.2);
        }

        .arx-footer__inner {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            opacity: 0.36;
        }

        @media (min-width: 768px) {
            .arx-footer__inner { flex-direction: row; justify-content: space-between; }
        }

        .arx-footer__brand {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: -0.04em;
            color: #1d1d1f;
        }

        .arx-footer__links {
            display: flex;
            gap: clamp(24px, 4vw, 48px);
            list-style: none;
            margin: 0; padding: 0;
        }

        .arx-footer__links a {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            text-decoration: none;
            color: #1d1d1f;
        }

        /* ── FAB ─────────────────────────────────────────── */
        .arx-fab {
            position: fixed;
            bottom: 32px; right: 32px;
            z-index: 50;
            display: flex;
            align-items: center;
            gap: 16px;
            background: #ffffff;
            color: #1d1d1f;
            padding: 12px 16px 12px 24px;
            border-radius: 999px;
            border: 1px solid rgba(29, 29, 31, 0.07);
            box-shadow: 0 10px 30px rgba(29, 29, 31, 0.1);
            text-decoration: none;
            transition:
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
        }

        .arx-fab:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 18px 44px rgba(29, 29, 31, 0.14);
        }

        .arx-fab__label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: rgba(29, 29, 31, 0.28);
            display: block;
        }

        .arx-fab__text {
            font-size: 12px;
            font-weight: 700;
            color: #1d1d1f;
            display: block;
        }

        .arx-fab__arrow {
            width: 32px; height: 32px;
            background: #1d1d1f;
            color: #f5f5f7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .arx-fab__arrow svg { width: 16px; height: 16px; }

        /* ── Scroll fade-in ─────────────────────────────── */
        .arx-fade {
            opacity: 0;
            transform: translateY(16px);
            transition:
                opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .arx-fade.visible { opacity: 1; transform: none; }

        @media (prefers-reduced-motion: reduce) {
            .arx-fade { opacity: 1; transform: none; transition: none; }
            .arx-fab:hover, .arx-cta__btn:hover { transform: none; }
        }