:root {
            --bg: #f7fafc;
            --paper: #ffffff;
            --ink: #0f172a;
            --muted: #64748b;
            --brand: #dc2626;
            /* red accent */
            --brand-2: #ef4444;
            --chip: #0f172a;
            --chip-ink: #e2e8f0;
            --ring: #2563eb;
            --border: #e5e7eb;
            --shadow: 0 10px 25px rgba(2, 6, 23, .08);
            --grad: radial-gradient(1200px 600px at 80% -10%, rgba(220, 38, 38, .06), transparent 50%),
                linear-gradient(180deg, rgba(239, 68, 68, .05), transparent 25%);
            --min-h1: 22px;
            --mid-h1: 3vw;
            --max-h1: 30px;
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%
        }

        body {
            margin: 0;
            background: var(--grad), var(--bg);
            color: var(--ink);
            font: 16px/1.55 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        }

        .wrap {
            max-width: 1100px;
            margin: 0 auto;
            padding: 20px 16px 48px
        }

        /* Header */
        header.site {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 18px
        }



        .sub {
            color: var(--muted);
            font-size: 14px;
            display: flex;
        }

        nav.actions {
            margin-left: auto;
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .brand {
            font-size: clamp(1.5em, 5vw, 2em);
            font-weight: bold;
            color: black;
        }

        .btn {
            border: 1px solid var(--border);
            background: var(--paper);
            color: var(--ink);
            padding: 8px 12px;
            border-radius: 10px;
            text-decoration: none;
            box-shadow: var(--shadow)
        }

        .btn.current {
            font-weight: bold;
        }

        .btn.primary {
            background: var(--brand);
            border-color: transparent;
            color: #fff
        }


        .ribbon {
            position: absolute;
            left: 12px;
            bottom: 12px;
            background: rgba(0, 0, 0, 0.2);
            color: #fff;
            padding: 6px 10px;
            border-radius: 10px;
            font-size: 12px;
            border: 1px solid color-mix(in srgb, #fff 18%, transparent);
            backdrop-filter: blur(6px);
        }

        a.view-single {
            color: inherit;
            text-decoration: inherit;
        }

        /* Section titles */

        .sect h2 {
            margin: 0 0 10px;
            font-size: clamp(18px, 2.4vw, 22px)
        }

        .sect p.lead {
            margin: 0 0 8px;
            color: var(--muted)
        }

        /* ===== Featured Posts (same core card system, tuned for homepage) ===== */
        .fp-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: minmax(280px, 46vh) minmax(180px, 32vh);
            grid-template-areas:
                "main side1"
                "strip strip";
        }

        .fp-card {
            position: relative;
            overflow: hidden;
            border-radius: 14px;
            background: #0f172a;
            box-shadow: var(--shadow);
            isolation: isolate
        }

        .fp-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            filter: saturate(1.03) contrast(1.03)
        }

        .fp-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(2, 6, 23, 0) 20%, rgba(2, 6, 23, .55) 70%, rgba(2, 6, 23, .85) 100%),
                linear-gradient(0deg, rgba(2, 6, 23, .15), rgba(2, 6, 23, .15));
            z-index: 1
        }

        .fp-body {
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 12px;
            z-index: 2;
            color: #fff
        }

        .fp-title {
            margin: 0 0 8px;
            font-weight: 800;
            letter-spacing: .2px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
            color: white;
        }

        .fp-title.xl {
            font-size: clamp(22px, 3.4vw, 34px);
            line-height: 1.18
        }

        .fp-title.lg {
            font-size: clamp(18px, 2.2vw, 24px);
            line-height: 1.25
        }

        .fp-title.md {
            font-size: clamp(16px, 2vw, 20px);
            line-height: 1.28
        }

        .fp-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin: 10px 0 6px
        }

        .fp-tag {
            background: var(--chip);
            color: var(--chip-ink);
            border: 1px solid rgba(148, 163, 184, .35);
            padding: 4px 8px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600
        }

        .fp-meta {
            font-size: 13px;
            color: #e5e7eb;
            opacity: .95
        }

        .fp-dot {
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #e5e7eb;
            border-radius: 50%;
            margin: 0 8px
        }

        .fp-main {
            grid-area: main;
            min-height: 46vh
        }

        .fp-side-wrap {
            grid-area: side1;
            display: grid;
            gap: 14px;
            grid-template-rows: 1fr 1fr
        }

        .fp-side {
            min-height: 22vh
        }

        .fp-strip {
            grid-area: strip;
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(4, 1fr)
        }

        .fp-teaser {
            aspect-ratio: 16/9
        }

        .fp-link {
            position: absolute;
            inset: 0;
            z-index: 3
        }

        .fp-link:focus-visible {
            outline: 3px solid var(--ring);
            outline-offset: 2px;
            border-radius: 14px
        }

        /* ===== Quotes ===== */
        .q-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(3, 1fr)
        }

        .q-card {
            position: relative;
            background: var(--paper);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: var(--shadow);
            padding: 14px;
            display: flex;
            flex-direction: column;
            min-height: 160px;
        }

        .q-text {
            margin: 0 0 10px;
            color: #0b1220;
            font-size: 15px;
            display: -webkit-box;
            line-clamp: 6;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
            overflow: hidden
        }

        .q-meta {
            margin-top: auto;
            color: var(--muted);
            font-size: 13px
        }

        .q-chip {
            display: inline-block;
            background: #fee2e2;
            color: #7f1d1d;
            border: 1px solid #fecaca;
            border-radius: 999px;
            padding: 2px 8px;
            font-size: 12px;
            margin: 0 6px 6px 0
        }

        /* ===== Offer ===== */
        .offer {
            margin-top: 26px;
            background: linear-gradient(135deg, #fff, #fff 40%, #ffe4e6 100%);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 18px;
            display: grid;
            gap: 12px;
            grid-template-columns: 2fr 1fr;
            align-items: center;
        }

        .offer h3 {
            margin: 0 0 6px;
            font-size: clamp(18px, 2.6vw, 22px)
        }

        .offer p {
            margin: 0;
            color: var(--muted)
        }

        .offer .cta {
            justify-self: end;
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .tagline {
            color: #b91c1c;
            font-weight: 700
        }

        /* Footer */
        footer {
            color: var(--muted);
            font-size: 12px;
            text-align: center;
            margin-top: 24px
        }

        /* Responsive */
        @media (max-width:900px) {
            .fp-grid {
                grid-template-columns: 1fr;
                grid-template-rows: auto;
                grid-template-areas: "main" "side1" "strip";
            }

            .fp-side-wrap {
                grid-template-rows: none;
                grid-template-columns: 1fr
            }

            .fp-strip {
                grid-template-columns: repeat(2, 1fr)
            }

            .q-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .offer {
                grid-template-columns: 1fr
            }

            .offer .cta {
                justify-self: start
            }
        }

        @media (max-width:560px) {
            .fp-strip {
                grid-template-columns: 1fr
            }

            .q-grid {
                grid-template-columns: 1fr
            }
        }

        /* Base header style */
        .site {
            width: 100%;
            padding: 16px 32px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background 0.3s ease, color 0.3s ease;
            z-index: 1000;
        }

        /* Default solid header */
        .site {
            background: #fffce1;
            /* soft tone */
            color: #222;
            top: 0;
            left: 0;
        }

        /* Scrolled state (applied via JS on homepage) */
        .site.scrolled {
            background: rgba(255, 252, 225, 0.95);
            /* subtle tint */
            color: #222;
            position: fixed;
        }

        /* Socials */
        .social-inline a {
            display: inline-block;
            margin-left: 8px;
            color: inherit;
            transition: transform 0.2s ease, color 0.2s ease;
        }

        .social-inline a:hover {
            transform: scale(1.2);
            color: #b45309;
        }

        /* === Shared heading style across site === */
        h1 {
            margin: 0;
            font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
            font-weight: 800;
            font-size: clamp(var(--min-h1), var(--mid-h1), var(--max-h1));
            line-height: 1.25;
            letter-spacing: .2px;
        }