@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Outfit:wght@300;400;500&display=swap');

    :root {
        --ink:        #18181b;
        --ink-mid:    #52525b;
        --ink-soft:   #a1a1aa;
        --surface:    #fafaf9;
        --white:      #ffffff;
        --accent:     #1e3a5f;
        --accent-lt:  #e8eef5;
        --rule:       #e4e4e7;
        --serif:      'Cormorant Garamond', Georgia, serif;
        --sans:       'Outfit', system-ui, sans-serif;
    }

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

    /* ── HERO HEADER ── */
    .page-hero {
        background: #3d82df;
        padding: 80px 0 64px;
        position: relative;
        overflow: hidden;
    }
    .page-hero::after {
        content: '';
        position: absolute;
        right: -60px;
        top: -60px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        border: 48px solid rgba(255,255,255,.04);
        pointer-events: none;
    }
    .page-hero::before {
        content: '';
        position: absolute;
        left: -80px;
        bottom: -80px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        border: 32px solid rgba(255,255,255,.03);
        pointer-events: none;
    }
    .hero-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 32px;
        position: relative;
        z-index: 1;
    }
    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: rgba(255,255,255,.5);
        margin-bottom: 20px;
    }
    .hero-eyebrow-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(255,255,255,.35);
    }
    .hero-title {
        font-family: var(--serif);
        font-size: clamp(1.9rem, 4vw, 3rem);
        font-weight: 700;
        color: #fff;
        line-height: 1.15;
        letter-spacing: -.01em;
        margin-bottom: 28px;
    }
    .hero-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: rgba(255,255,255,.38);
    }
    .hero-breadcrumb a {
        color: rgba(255,255,255,.55);
        text-decoration: none;
        transition: color .2s;
        font-weight: 400;
    }
    .hero-breadcrumb a:hover { color: #fff; }
    .hero-breadcrumb svg {
        width: 12px; height: 12px;
        opacity: .4; flex-shrink: 0;
    }
    .hero-breadcrumb .current {
        color: rgba(255,255,255,.7);
        font-weight: 500;
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── MAIN LAYOUT ── */
    .page-body {
        max-width: 1200px;
        margin: 0 auto;
        padding: 64px 32px 80px;
    }

    /* ── CONTENT CARD ── */
    .content-card {
        background: var(--white);
        border: 1px solid var(--rule);
        border-radius: 4px;
        overflow: hidden;
    }

    /* Top bar */
    .content-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 28px;
        border-bottom: 1px solid var(--rule);
        background: #fafaf9;
    }
    .topbar-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--rule);
    }
    .topbar-dot:first-child { background: #fca5a5; }
    .topbar-dot:nth-child(2) { background: #fcd34d; }
    .topbar-dot:nth-child(3) { background: #86efac; }
    .topbar-label {
        margin-left: auto;
        font-size: 11px;
        color: var(--ink-soft);
        letter-spacing: .05em;
    }

    /* Content body */
    .content-body {
        padding: 44px 52px 52px;
    }
    @media (max-width: 640px) { .content-body { padding: 28px 24px 36px; } }

    .content-section-title {
        font-family: var(--serif);
        font-size: 1.55rem;
        font-weight: 700;
        color: var(--ink);
        line-height: 1.3;
        margin-bottom: 28px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--rule);
        position: relative;
    }
    .content-section-title::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 48px;
        height: 2px;
        background: var(--accent);
    }

    /* Prose styles for $content output */
    .prose {
        font-size: .95rem;
        line-height: 1.85;
        color: var(--ink-mid);
    }
    .prose p { margin-bottom: 1.2em; }
    .prose p:last-child { margin-bottom: 0; }
    .prose h2, .prose h3, .prose h4 {
        font-family: var(--serif);
        color: var(--ink);
        margin: 1.6em 0 .6em;
        line-height: 1.3;
    }
    .prose h2 { font-size: 1.3rem; font-weight: 700; }
    .prose h3 { font-size: 1.1rem; font-weight: 600; }
    .prose ul, .prose ol {
        padding-left: 1.4em;
        margin-bottom: 1.2em;
    }
    .prose li { margin-bottom: .4em; }
    .prose blockquote {
        border-left: 3px solid var(--accent);
        padding: 12px 20px;
        margin: 1.5em 0;
        background: var(--accent-lt);
        border-radius: 0 4px 4px 0;
        color: var(--ink);
        font-style: italic;
    }
    .prose img {
        max-width: 100%;
        border-radius: 4px;
        margin: 1.2em 0;
        border: 1px solid var(--rule);
    }
    .prose a {
        color: var(--accent);
        text-decoration: underline;
        text-decoration-color: var(--accent-lt);
        transition: text-decoration-color .2s;
    }
    .prose a:hover { text-decoration-color: var(--accent); }
    .prose table {
        width: 100%;
        border-collapse: collapse;
        font-size: .9rem;
        margin: 1.2em 0;
    }
    .prose th, .prose td {
        text-align: left;
        padding: 10px 14px;
        border: 1px solid var(--rule);
    }
    .prose th {
        background: var(--accent-lt);
        color: var(--accent);
        font-weight: 500;
        font-size: .8rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .prose tr:nth-child(even) td { background: #fafafa; }

    /* ── BACK BUTTON ── */
    .back-row {
        margin-top: 40px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        border: 1px solid var(--rule);
        background: var(--white);
        color: var(--ink-mid);
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 500;
        border-radius: 3px;
        text-decoration: none;
        cursor: pointer;
        transition: all .2s;
    }
    .btn-back:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--accent-lt);
    }
    .btn-back svg { width: 14px; height: 14px; }