:root {
            --te-navy: #142f49;
            --te-sky: #6baddd;
            --te-slate: #4d6579;
            --te-bg: #f6f8fb;
            --te-card: #ffffff;
            --te-border: rgba(20,47,73,.12);
        }

        body {
            background: var(--te-bg);
        }

        /* Navbar */
        .te-navbar {
            background: rgba(20,47,73,.98);
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .te-navbar .navbar-brand {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            font-weight: 700;
            letter-spacing: .2px;
        }

        .te-nav-icon {
            height: 28px;
            width: auto;
            display: block;
        }

        .te-navbar .nav-link {
            color: rgba(255,255,255,.86);
        }

        .te-navbar .nav-link:hover {
            color: #fff;
        }

        .te-btn-primary {
            background: var(--te-sky);
            border-color: var(--te-sky);
            color: #0b2134;
            font-weight: 700;
        }

        .te-btn-primary:hover {
            filter: brightness(.96);
            color: #0b2134;
        }

        /* Content shell */
        .te-shell {
            padding-top: 1.25rem;
            padding-bottom: 2.5rem;
        }

        /* Footer */
        .te-footer {
            color: rgba(20,47,73,.72);
            font-size: .95rem;
        }

        .te-footer a {
            color: rgba(20,47,73,.82);
            text-decoration: none;
        }

        .te-footer a:hover {
            text-decoration: underline;
        }

        /* ===================== */
        /* BLOG INDEX STYLES     */
        /* ===================== */

        .blog-header {
            margin-bottom: 2rem;
        }

        .blog-header h1 {
            color: var(--te-navy);
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .blog-header p {
            color: var(--te-slate);
            font-size: 1.0625rem;
            margin: 0;
        }

        /* Post grid */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        @media (max-width: 992px) {
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .blog-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Post card */
        .blog-card {
            background: var(--te-card);
            border: 1px solid var(--te-border);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(20,47,73,.04);
            transition: box-shadow 0.2s, transform 0.2s;
        }

        .blog-card:hover {
            box-shadow: 0 8px 24px rgba(20,47,73,.08);
            transform: translateY(-2px);
        }

        .blog-card-image {
            display: block;
            width: 100%;
            aspect-ratio: 1200 / 630;
            object-fit: cover;
            border-bottom: 1px solid var(--te-border);
        }

        .blog-card-image-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 1200 / 630;
            background: linear-gradient(135deg, rgba(107,173,221,.15) 0%, rgba(20,47,73,.05) 100%);
            border-bottom: 1px solid var(--te-border);
            color: var(--te-slate);
        }

        .blog-card-image-placeholder svg {
            width: 32px;
            height: 32px;
            opacity: 0.4;
        }

        .blog-card-body {
            padding: 1.25rem;
        }

        .blog-card-title {
            color: var(--te-navy);
            font-size: 1.125rem;
            font-weight: 600;
            line-height: 1.35;
            margin: 0 0 0.5rem 0;
        }

        .blog-card-title a {
            color: inherit;
            text-decoration: none;
        }

        .blog-card-title a:hover {
            color: var(--te-sky);
        }

        .blog-card-summary {
            color: #5a6d7a;
            font-size: 0.9375rem;
            line-height: 1.55;
            margin: 0;
        }

:root {
            --te-navy: #142f49;
            --te-sky: #6baddd;
            --te-slate: #4d6579;
            --te-bg: #f6f8fb;
            --te-card: #ffffff;
            --te-border: rgba(20,47,73,.12);
        }

        body {
            background: var(--te-bg);
        }

        /* Navbar */
        .te-navbar {
            background: rgba(20,47,73,.98);
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .te-navbar .navbar-brand {
            display: inline-flex;
            align-items: center;
            gap: .6rem;
            font-weight: 700;
            letter-spacing: .2px;
        }

        .te-nav-icon {
            height: 28px;
            width: auto;
            display: block;
        }

        .te-navbar .nav-link {
            color: rgba(255,255,255,.86);
        }

        .te-navbar .nav-link:hover {
            color: #fff;
        }

        .te-btn-primary {
            background: var(--te-sky);
            border-color: var(--te-sky);
            color: #0b2134;
            font-weight: 700;
        }

        .te-btn-primary:hover {
            filter: brightness(.96);
            color: #0b2134;
        }

        /* Content shell */
        .te-shell {
            padding-top: 1.25rem;
            padding-bottom: 2.5rem;
        }

        .te-card {
            background: var(--te-card);
            border: 1px solid var(--te-border);
            border-radius: 16px;
            box-shadow: 0 10px 24px rgba(20,47,73,.06);
        }

        /* Footer */
        .te-footer {
            color: rgba(20,47,73,.72);
            font-size: .95rem;
        }

        .te-footer a {
            color: rgba(20,47,73,.82);
            text-decoration: none;
        }

        .te-footer a:hover {
            text-decoration: underline;
        }

        /* ===================== */
        /* BLOG-SPECIFIC STYLES  */
        /* ===================== */

        .blog-article {
            max-width: 720px;
            margin: 0 auto;
            padding: 2.5rem 2rem 3rem;
        }

        /* Featured image - 1.91:1 ratio for social sharing */
        .blog-featured-image {
            width: 100%;
            aspect-ratio: 1200 / 630;
            object-fit: cover;
            border-radius: 12px 12px 0 0;
            display: block;
        }

        /* Placeholder when no image */
        .blog-featured-placeholder {
            width: 100%;
            aspect-ratio: 1200 / 630;
            border-radius: 12px 12px 0 0;
            background: linear-gradient(135deg, rgba(107,173,221,.18) 0%, rgba(20,47,73,.06) 100%);
            border-bottom: 1px solid var(--te-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--te-slate);
            gap: 0.5rem;
        }

        .blog-featured-placeholder svg {
            width: 48px;
            height: 48px;
            opacity: 0.5;
        }

        .blog-featured-placeholder span {
            font-size: 0.875rem;
            opacity: 0.7;
        }

        /* Post metadata */
        .blog-meta {
            color: var(--te-slate);
            font-size: 0.9rem;
            margin-top: -0.25rem;
            margin-bottom: 1.75rem;
        }

        .blog-meta time {
            font-weight: 500;
        }

        .blog-author {
            font-weight: 500;
        }

        /* Typography hierarchy */
        .blog-article h1 {
            color: var(--te-navy);
            font-size: 2.25rem;
            font-weight: 700;
            line-height: 1.25;
            margin-bottom: 0.5rem;
        }

        .blog-article h2 {
            color: var(--te-navy);
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.3;
            margin-top: 2.75rem;
            margin-bottom: 1rem;
        }

        .blog-article h3 {
            color: var(--te-navy);
            font-size: 1.2rem;
            font-weight: 600;
            line-height: 1.35;
            margin-top: 2.25rem;
            margin-bottom: 0.75rem;
        }

        .blog-article h4 {
            color: var(--te-navy);
            font-size: 1.05rem;
            font-weight: 600;
            line-height: 1.4;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
        }

        /* Body text */
        .blog-article p {
            color: #5a6d7a;
            font-size: 1.0625rem;
            line-height: 1.75;
            margin-bottom: 1.5rem;
        }

        .blog-article .lead {
            font-size: 1.2rem;
            color: #5a6d7a;
            line-height: 1.65;
            margin-bottom: 2rem;
        }

        /* Lists */
        .blog-article ul,
        .blog-article ol {
            color: #5a6d7a;
            font-size: 1.0625rem;
            line-height: 1.75;
            margin-bottom: 1.5rem;
            padding-left: 1.5rem;
        }

        .blog-article li {
            margin-bottom: 0.6rem;
        }

        /* Links */
        .blog-article a {
            color: var(--te-sky);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .blog-article a:hover {
            color: var(--te-navy);
        }

        /* Blockquotes */
        .blog-article blockquote {
            border-left: 4px solid var(--te-sky);
            padding-left: 1.25rem;
            margin: 1.75rem 0;
            color: #6b7c8a;
            font-style: italic;
        }

        /* Code */
        .blog-article code {
            background: rgba(20,47,73,.06);
            padding: 0.15rem 0.4rem;
            border-radius: 4px;
            font-size: 0.9em;
            color: var(--te-navy);
        }

        .blog-article pre {
            background: rgba(20,47,73,.04);
            border: 1px solid var(--te-border);
            border-radius: 8px;
            padding: 1rem 1.25rem;
            overflow-x: auto;
            margin-bottom: 1.5rem;
        }

        .blog-article pre code {
            background: none;
            padding: 0;
        }

        /* Images within content */
        .blog-article img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1.5rem 0;
        }

        /* Horizontal rule */
        .blog-article hr {
            border: none;
            border-top: 1px solid var(--te-border);
            margin: 2rem 0;
        }

        /* Table of Contents */
        .blog-article .toc {
            background: rgba(107,173,221,.08);
            border: 1px solid rgba(107,173,221,.2);
            border-radius: 8px;
            padding: 1rem 1rem 1rem 2.25rem;
            margin-bottom: 2rem;
        }

        .blog-article .toc li {
            margin-bottom: 0.4rem;
        }

        .blog-article .toc a {
            color: var(--te-navy);
            text-decoration: none;
        }

        .blog-article .toc a:hover {
            color: var(--te-sky);
            text-decoration: underline;
        }

        /* End-of-post CTA box */
        .blog-cta {
            background: linear-gradient(135deg, rgba(107,173,221,.12) 0%, rgba(107,173,221,.06) 100%);
            border: 1px solid rgba(107,173,221,.25);
            border-radius: 12px;
            padding: 2.5rem 2rem;
            margin-top: 2.5rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* Line art background illustration */
        .blog-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' fill='none' stroke='%23142f49' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.12'%3E%3Cg transform='translate(80, 70)'%3E%3Crect x='0' y='8' width='56' height='40' rx='3'/%3E%3Cpath d='M0 12 l28 20 l28 -20'/%3E%3Cpath d='M0 48 l20 -16'/%3E%3Cpath d='M56 48 l-20 -16'/%3E%3C/g%3E%3Cpath d='M160 100 Q 280 60, 400 100 Q 520 140, 640 100' stroke-dasharray='8 6'/%3E%3Ccircle cx='240' cy='78' r='3' fill='%23142f49' stroke='none'/%3E%3Ccircle cx='400' cy='100' r='3' fill='%23142f49' stroke='none'/%3E%3Ccircle cx='560' cy='122' r='3' fill='%23142f49' stroke='none'/%3E%3Cg transform='translate(664, 58)'%3E%3Crect x='0' y='0' width='36' height='64' rx='6'/%3E%3Crect x='4' y='8' width='28' height='44' rx='2'/%3E%3Ccircle cx='18' cy='58' r='3'/%3E%3Crect x='7' y='14' width='18' height='10' rx='2'/%3E%3Crect x='7' y='28' width='12' height='6' rx='1.5'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100% auto;
            pointer-events: none;
        }

        .blog-cta-title {
            color: var(--te-navy);
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            position: relative;
        }

        .blog-cta p {
            color: var(--te-slate);
            font-size: 1.05rem;
            margin-bottom: 0;
            line-height: 1.9;
            position: relative;
        }

        .blog-cta code {
            background: rgba(255,255,255,.6);
            font-weight: 600;
            font-size: 1.1em;
            padding: 0.2rem 0.5rem;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .blog-article {
                padding: 1.5rem 1.25rem 2rem;
            }

            .blog-article h1 {
                font-size: 1.75rem;
            }

            .blog-article h2 {
                font-size: 1.35rem;
            }

            .blog-article h3 {
                font-size: 1.1rem;
            }
        }
		
/* Match main site nav link styling (rounded “oval” hover highlight) */
.te-navlink {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  padding: .25rem .5rem;
  border-radius: .5rem;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.te-navlink:hover,
.te-navlink:focus {
  color: #fff;
  background: rgba(255,255,255,.14);
  text-decoration: none;
}

.te-navlink:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.18);
}

/* Primary CTA */
a.te-btn-primary,
button.te-btn-primary,
.te-btn-primary {
  background-color: rgba(107,173,221,.95) !important;
  border: 1px solid rgba(20,47,73,.18) !important;
  color: #0b2a43 !important;
  font-weight: 700;
  text-decoration: none !important;
}

a.te-btn-primary:hover,
button.te-btn-primary:hover,
.te-btn-primary:hover,
a.te-btn-primary:focus,
button.te-btn-primary:focus,
.te-btn-primary:focus {
  background-color: rgba(107,173,221,.82) !important;
  border-color: rgba(20,47,73,.28) !important;
  color: #0b2a43 !important;
  text-decoration: none !important;
}

a.te-btn-primary:active,
button.te-btn-primary:active,
.te-btn-primary:active,
a.te-btn-primary.active,
button.te-btn-primary.active,
.te-btn-primary.active {
  background-color: rgba(107,173,221,.72) !important;
  border-color: rgba(20,47,73,.32) !important;
  color: #0b2a43 !important;
}

a.te-btn-primary:focus-visible,
button.te-btn-primary:focus-visible,
.te-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(107,173,221,.35) !important;
}

/* Nav outline buttons (Log in) */
.navbar a.btn-outline-light,
.navbar button.btn-outline-light {
  border-color: rgba(255,255,255,.65) !important;
  color: rgba(255,255,255,.92) !important;
  background: transparent !important;
  text-decoration: none !important;
}

.navbar a.btn-outline-light:hover,
.navbar button.btn-outline-light:hover,
.navbar a.btn-outline-light:focus,
.navbar button.btn-outline-light:focus {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.75) !important;
  color: #ffffff !important;
}

.navbar a.btn-outline-light:focus-visible,
.navbar button.btn-outline-light:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(107,173,221,.35) !important;
}