/* Minimal, readable styles inspired by James Clear */
:root {
    --accent: #8095BF;
    /* site accent for links */
    --pastel-1: #efeaff; /* light lavender */
    --pastel-2: #f1f7ff; /* very light sky */
    --pastel-3: #f7f2ff; /* soft lilac */
    --pastel-row: #efeaff; /* light lavender */
    --pastel-row-alt: #f6f3ff; /* slightly lighter lavender */
    --pastel-text: #2b2740;
    --bg: rgb(254, 252, 238);
    --surface: #ffffff;
    --text: #0b0b0b;
    --muted: #6b6b6b;
    --nav-bg: #C2CCFF;
    --max-width: 740px;
}

/* Reduce overall site scale slightly (10% smaller) */
html { font-size: 80%; }

/* Typography */
/* Load fonts via <link> in HTML (preconnect + stylesheet) for best performance. */

/* Tangerine utility classes (use in markup) */
.tangerine-regular {
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
}

.tangerine-bold {
    /* logo font: Tangerine cursive (restore previous state) */
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-style: normal;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.75;

    /* Layout: make body a column flex container so footer can stick to bottom */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Let the main content area grow to fill available space so footer stays at bottom */
main {
    flex: 1 0 auto;
}

/* For pages that use .container-main as the main wrapper */
.container-main {
    flex: 1 0 auto;
}

/* Smooth theme transitions for major elements */
body,
.site-header,
.site-footer,
.container-main,
.featured-lead,
.teaser-card,
.article-list h2,
a {
    transition: color .28s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter: none;
    background-image: linear-gradient(97deg, #0d043e 5%, #33006F 50%, #6A5ACD 100%);
}
.site-header .navbar{padding-top:0.6rem;padding-bottom:0.6rem; background:transparent; color:#fff}

.navbar-brand {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: bold;
    color: #ffffff
}
.navbar-brand:hover {
    color: #e7005e;
}

.navbar-brand small {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.85)
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease, font-weight .18s ease
}

.nav-link:hover {
    color: #ffffff;
    font-weight: 800;
    transform: translateY(-2px)
}

/* Main column */
.container-main {
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1rem;
    box-sizing: border-box
}

/* When .container-main is paired with Bootstrap's .container, Bootstrap's .container determines the page width and gutters so the main content lines up with the navbar */

/* Home list */
.article-list article {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(11, 11, 11, 0.04)
}

/* Layout for list articles: image left, content right on wider screens */
.article-list article {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0 1rem; /* no row-gap, column-gap only */
    align-items: start;
}
.article-list .post-hero {
    margin: 0;
    grid-column: 1;
    grid-row: 1;
}
.article-list .content-wrapper {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
}
.article-list article > h2 { 
    margin: 0; 
    line-height: 1.15;
    font-size: 1.25rem;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}
.article-list article > .meta {
    margin: 0;
    color: #8b8b8b;
    font-size: 0.9rem;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: 1.5rem;
}
.article-list article > .excerpt {
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: 2.5rem;
}
.article-list .post-hero img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Explicitly place image in left column, content in right column */
.article-list article > .post-hero { 
    grid-column: 1; 
    grid-row: 1 / -1; 
    align-self: start; 
}
.article-list article > h2 { 
    grid-column: 2; 
    grid-row: 1; 
    margin-top: 0; 
}
.article-list article > .meta { 
    grid-column: 2; 
    grid-row: 2; 
}
.article-list article > .excerpt { 
    grid-column: 2; 
    grid-row: 3; 
}

/* Ensure featured and teaser small post-hero images behave */
.post-hero img.post-cover-image,
.featured-lead .post-hero img,
.teaser-card .post-hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .article-list article { display: block; }
    .article-list .post-hero { max-width: 100%; margin-bottom: .75rem; }
    .article-list .post-hero img { height: auto; }
}

.article-list h2 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    font-weight: 700;
    letter-spacing: 0.2px
}

/* Make article list titles use Open Sans (override Tangerine class) */
.article-list h2,
.article-list h2 a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: var(--text);
    text-decoration: none
}

.article-list h2 a:hover {
    color: #e7005e
}

/* .intro h1,
.post-title,
.article-list h2 {
    leave font to .tangerine-* classes applied in HTML
} */

/* ensure intro title size */
.intro-title {
    font-size: 2rem;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

.site-title {
    font-size: 2.6rem;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

/* Intro paragraph */
.intro p {
    color: var(--muted);
    /* max-width: 640px; */
    margin: 0.75rem auto 2rem;
    font-size: 1.10rem;
}

/* Featured hero styles */
.featured-lead {
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(194, 204, 255, 0.35);
    transition: transform .18s ease, box-shadow .18s ease;
    border: 1px solid #f0f0f0
}

.featured-lead .featured-lead-link {
    font-size: 2rem;
    display: block;
    color: var(--text);
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700
}

.featured-lead .featured-lead-link:hover {
    color: #e7005e
}

.featured-lead:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px rgba(194, 204, 255, 0.45)
}

.featured .meta {
    margin-top: 0.5rem;
    color: #8b8b8b
}

.featured .excerpt {
    color: var(--muted);
    margin-top: 0.75rem
}

.teaser-card {
    background: var(--surface);
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 8px 24px rgba(194, 204, 255, 0.28);
    transition: transform .18s ease, box-shadow .18s ease
}

.teaser-card .teaser-link {
    font-size: 1.35rem;
    display: block;
    color: var(--text);
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700
}

.teaser-card .teaser-link:hover {
    color: #e7005e
}

.teaser-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(194, 204, 255, 0.38)
}

.teaser-card .meta {
    color: #8b8b8b;
    margin-top: 0.4rem
}

.teaser-card .excerpt {
    color: var(--muted);
    margin-top: 0.5rem
}

/* featured hero styles on home page */
.featured-lead a {
    color: var(--text);
    text-decoration: none
}

.featured-lead a:hover {
    color: var(--accent)
}

.meta {
    font-size: 0.85rem;
    color: #8b8b8b
}

/* utility classes for moved inline styles */
.page-lead {
    color: var(--muted);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.45;
}

.form-container {
    max-width: 640px
}

.portrait-img {
    max-width: 220px;
    border-radius: 8px
}

.post-title {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0.2px;
    font-family: 'Open Sans', sans-serif
}

.article-list p.excerpt {
    color: var(--muted);
    margin-bottom: 0.5rem
}

.article-list .meta {
    color: #8b8b8b;
    font-size: 0.85rem;
    margin-bottom: 0.5rem
}

.article-list a {
    color: var(--text);
    text-decoration: none
}

.article-list a:hover {
    color: #e7005e
}

/* Post content */
/* Post title uses Tangerine via the .tangerine-* classes applied in markup */
.post-meta {
    color: var(--muted);
    margin-bottom: 1.25rem
}

.prose {
    font-size: 1.05rem;
    color: var(--text)
}

.prose p {
    margin: 1rem 0
}

.prose h2 {
    font-family: "Open Sans", cursive;
    font-weight: 700;
    font-size: 1.5rem;
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.05;
}

.prose h3 {
    font-family: "Open Sans", cursive;
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
    line-height: 1.1;
}

/* Footer */
.site-footer {
    padding: 2rem 1rem;
    color: #767676;
    font-size: 0.9rem
}
    .site-footer {
            padding: 1rem 1rem;
            color: #ffffff;
            font-size: 0.92rem;
            background-image: linear-gradient(97deg, #0d043e 5%, #33006F 50%, #6A5ACD 100%);
        }
    .site-footer .container {
        font-weight: 700;
    }

/* Footer links: match navbar link appearance and interaction */
.site-footer .nav-link {
    color: #ffffff;
    text-decoration: none;
    transition: color .18s ease, transform .18s ease, font-weight .18s ease;
    display: inline-block;
    padding: 0 .375rem;
}
.site-footer .nav-link:hover,
.site-footer .nav-link:focus {
    color: #ffffff;
    font-weight: 800;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Ensure footer post-link anchors (used in privacy/terms) show the pink style like posts */
.site-footer .post-link {
    color: #e7005e;
}

/* Theme toggle button */
.theme-toggle {
    background: transparent;
    border: 0;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer
}

/* iframe include helpers */
.include {
    border: 0;
    width: 100%;
    display: block;
    background: transparent;
}
.include-nav { height: 64px; }
.include-sidebar { width: 100%; height: 100%; min-height: 240px; }
.sidebar-include { padding: 0 0 0 0; }

.theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform .28s ease, opacity .28s ease;
    /* make icons use white color */
    color: #ffffff;
    stroke: currentColor;
}

.theme-toggle .icon-sun {
    /* hidden by default; shown in dark theme */
    opacity: 0;
    transform: rotate(20deg) scale(.9);
}

.theme-toggle .icon-moon {
    /* visible in light theme */
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-sun {
    /* in dark theme, show sun (to indicate switching to light) */
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .theme-toggle .icon-moon {
    /* hide moon in dark theme */
    opacity: 0;
    transform: rotate(-20deg) scale(.9);
}

/* Dark theme overrides */
[data-theme="dark"] {
    --bg: #04080D;
    --surface: #0f1116;
    --text: #f4f6fb;
    --muted: #9aa0b0;
    --nav-bg: #2b2f4a;
    /* darker navbar */
}

/* Dark theme border tweaks for better contrast */
[data-theme="dark"] .featured-lead {
    border: 1px solid rgba(255, 255, 255, 0.04)
}

[data-theme="dark"] .teaser-card {
    border: 1px solid rgba(255, 255, 255, 0.04)
}

[data-theme="dark"] .article-list article {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03)
}

/* Small screens */
@media (max-width:767px) {
    .container-main {
        padding: 2rem 1rem
    }

    .post-title {
        font-size: 2rem
    }

    /* Keep intro title consistent with other page titles on small screens */
    .intro-title {
        font-size: 2rem;
        font-weight: 500;
        line-height: 1.08;
        margin-bottom: 0.6rem;
    }

    .site-title {
        font-size: 2rem;
        font-weight: 500
    }

    .navbar-brand {
        font-size: 1.9rem
    }

    .article-list h2 {
        font-size: 1.5rem
    }

    .featured-lead .featured-lead-link {
        font-size: 1.3rem
    }

    .teaser-card .teaser-link {
        font-size: 1.1rem
    }

    .featured .meta,
    .teaser-card .meta {
        font-size: 0.9rem
    }
}

/* Mobile nav improvements */
@media (max-width:767px) {

    /* keep outer collapse transparent so background can match navbar container */
    .site-header .collapse#mobileNav {
        background: transparent
    }

    /* style the inner .container so the colored background matches the navbar width */
    .site-header .collapse#mobileNav .container {
        background-image: linear-gradient(97deg, #0d043e 5%, #33006F 50%, #6A5ACD 100%);
        box-shadow: 0 8px 20px rgba(194, 204, 255, 0.25);
        padding: 0.2rem 0;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
    }

    .site-header .collapse#mobileNav .container .mobile-close {
        position: absolute;
        right: 8px;
        top: 6px;
        background: transparent;
        border: 0;
        padding: 6px;
        cursor: pointer;
        color: #ffffff
    }

    .site-header .collapse#mobileNav .container a {
        display: block;
        padding: 0.85rem 1rem;
        font-size: 1.05rem;
        color: #ffffff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08)
    }

    .site-header .collapse#mobileNav .container a:last-child {
        border-bottom: 0
    }

    .site-header .collapse#mobileNav .container a:hover {
        background: rgba(255, 255, 255, 0.04)
    }

    .navbar-toggler {
        border: 0;
        padding: .25rem .45rem
    }

    .navbar-toggler:focus {
        outline-offset: 2px
    }

    /* dark hamburger icon for light/pastel navbar */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
}

    /* Mobile: small top padding for the right (speaking) column when stacked
       Make selector more specific and use !important to ensure it applies during testing */
    @media (max-width:767px) {
        .container-main .row .speaking-col { padding-top: 1.25rem !important; }
    }

/* Accessibility: focus styles
   - show visible focus only for keyboard users via :focus-visible
   - remove the visual box on mouse/click interactions */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(31, 111, 235, 0.15);
    outline-offset: 3px;
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 1rem
}

.breadcrumbs a {
    color: #e7005e;
    text-decoration: none;
    font-weight: 700;
    transition: background-color .12s ease, color .12s ease, text-decoration-color .12s ease;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    background-color: #ffd6fa;
    text-decoration: underline;
    text-decoration-color: #e7005e;
    text-decoration-thickness: 2px;
    color: #e7005e;
}

.breadcrumbs .separator {
    margin: 0 0.5rem;
    color: var(--muted)
}

.breadcrumbs .current {
    color: var(--text);
    font-weight: 700
}

/* Gradient button matching the navbar/header theme */
.btn-gradient {
    background-image: linear-gradient(97deg, #0d043e 5%, #33006F 50%, #6A5ACD 100%);
    color: #ffffff;
    border: 0;
    padding: .6rem 1rem;
    border-radius: .5rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(106,90,205,0.12);
    transition: transform .18s ease, box-shadow .18s ease, opacity .12s ease;
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(106,90,205,0.18);
    opacity: .98;
    color: #e7005e;
}
.btn-gradient:active {
    transform: translateY(0);
}
.btn-gradient:focus {
    outline: 3px solid rgba(106,90,205,0.18);
    outline-offset: 3px;
}

[data-theme="dark"] .btn-gradient {
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* Prose table improvements: responsive, readable, theme-aware */
.prose .prose-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
}
.prose .prose-table th,
.prose .prose-table td {
    padding: .6rem .75rem;
    border: 1px solid rgba(11,11,11,0.06);
    vertical-align: middle;
    text-align: left;
}
.prose .prose-table thead th {
    font-weight: 800;
    /* slightly darker header gradient for stronger separation */
    background: linear-gradient(97deg, #d9d2ff 5%, #cfc7ff 60%);
    color: #2a2348;
    border-bottom: 1px solid rgba(106,90,205,0.12);
}
.prose .prose-table tbody tr:nth-child(odd) {
    background: var(--pastel-row);
}
.prose .prose-table tbody tr:nth-child(even) {
    background: var(--pastel-row-alt);
}
.prose .prose-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(239,234,255,0.9), rgba(241,247,255,0.9));
}

/* Make first column text bolder and slightly darker for emphasis */
.prose .prose-table tbody td:first-child {
    font-weight: 700;
    color: var(--pastel-text);
}

/* lavender-tinted borders instead of gray */
.prose .prose-table th,
.prose .prose-table td {
    border: 1px solid rgba(106,90,205,0.08);
}

[data-theme="dark"] .prose .prose-table th,
[data-theme="dark"] .prose .prose-table td {
    border-color: rgba(255,255,255,0.04);
}
[data-theme="dark"] .prose .prose-table thead th {
    background: linear-gradient(97deg, rgba(13,4,62,0.9), rgba(51,0,111,0.85));
    color: #fff;
}

/* Post layout: two columns on larger screens with right sidebar */
.post-page .post-layout {
    display: flex;
    /* keep side-by-side on large screens and avoid accidental wrapping due to gaps
       collapse to stacked layout only on smaller breakpoints defined below */
    flex-wrap: nowrap;
    gap: 2rem;
    align-items: flex-start;
}
.post-page .content-col {
    flex: 0 0 calc(66.6667% - 1rem); /* account for gap */
    max-width: calc(66.6667% - 1rem);
    padding-right: 1rem;
    box-sizing: border-box;
}
.post-page .sidebar-col {
    flex: 0 0 calc(33.3333% - 1rem); /* account for gap */
    max-width: calc(33.3333% - 1rem);
    padding-left: 1rem;
    /* add top padding on wide screens so sidebar starts below the post title */
    padding-top: 1.5rem;
    box-sizing: border-box;
}

/* Sticky right sidebar on post pages (desktop). */
@media (min-width: 992px) {
    .post-page .sidebar-col {
        position: sticky;
        /* keep it below the sticky header */
        top: 5.5rem;
        align-self: flex-start;
    }
}
.post-page .sidebar-card {
    background: var(--surface);
    border-radius: 10px;
    padding: 1rem;
    /* stronger, but soft shadow for light theme */
    box-shadow: 0 10px 30px rgba(11,11,11,0.06);
    border: 1px solid rgba(11,11,11,0.06);
    transition: box-shadow .18s ease, transform .12s ease, border-color .12s ease;
}

/* Post hero / cover image: constrain to content column and be responsive */
.post-hero {
    width: 100%;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 10px;
}
.post-hero img,
.post-hero picture,
.post-cover-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

@media (min-width: 992px) {
    /* keep hero visually balanced on wide screens */
    .post-hero img { max-height: 480px; }
}

/* Hover/active to give subtle lift and clearer separation */
.post-page .sidebar-card:hover,
.post-page .sidebar-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(11,11,11,0.12);
    border-color: rgba(11,11,11,0.09);
}

/* Dark theme: use lighter border and soft inner shadow for contrast */
[data-theme="dark"] .post-page .sidebar-card {
    box-shadow: 0 8px 26px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.04);
}

[data-theme="dark"] .post-page .sidebar-card:hover,
[data-theme="dark"] .post-page .sidebar-card:focus-within {
    box-shadow: 0 20px 50px rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.08);
}

@media (max-width: 991px) {
    .post-page .content-col,
    .post-page .sidebar-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }
    /* allow stacking on small screens and reset sidebar top padding to preserve mobile layout */
    .post-page .post-layout { flex-wrap: wrap; }
    .post-page .sidebar-col { margin-top: 1rem; padding-top: 0; }
}

/* Sidebar heading emphasis */
.post-page .sidebar-card h5,
.post-page .sidebar-card h6 {
    font-weight: 800;
    margin-bottom: .65rem;
    color: var(--text);
}

/* Ensure author links look consistent site-wide: bold, no underline, and inherit color
   when used in post meta so they match the muted meta text; elsewhere they inherit
   their container color (footer/sidebar) while remaining bold. */
.author-link {
    font-weight: 800;
    text-decoration: none;
}

.post-page .post-meta .author-link {
    color: inherit;
}

/* Footer author link: white by default on the dark footer, pink on hover */
.site-footer .author-link {
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}
.site-footer .author-link:hover,
.site-footer .author-link:focus {
    color: #e7005e;
    text-decoration: none;
}

/* Highlighted author link for selected posts (first three)
   - bold and theme-aware color by default
   - on hover behave like other post links (pink accent) */
.author-highlight {
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
}
.author-highlight:hover,
.author-highlight:focus {
    color: #e7005e;
    text-decoration: underline;
    background-color: transparent;
}

.post-page .sidebar-card h5 {
    font-size: 1.05rem;
}

/* Post-page content link styling (scoped to main content areas only) */
.post-page main a,
.post-page .prose a,
.post-page .article-list a,
.post-page .featured-lead a,
.post-page .teaser-card a,
.post-page .post-title a,
.post-page .breadcrumbs a {
    color: #e7005e;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0;
    transition: background-color .12s ease, color .12s ease, text-decoration-color .12s ease;
}

.post-page main a:hover,
.post-page .prose a:hover,
.post-page .article-list a:hover,
.post-page .featured-lead a:hover,
.post-page .teaser-card a:hover,
.post-page .post-title a:hover,
.post-page .breadcrumbs a:hover,
.post-page main a:focus-visible,
.post-page .prose a:focus-visible,
.post-page .article-list a:focus-visible,
.post-page .featured-lead a:focus-visible,
.post-page .teaser-card a:focus-visible,
.post-page .post-title a:focus-visible,
.post-page .breadcrumbs a:focus-visible {
    background-color: #ffd6fa;
    text-decoration: underline;
    text-decoration-color: #e7005e;
    text-decoration-thickness: 2px;
    border-radius: 0;
    color: #e7005e;
}

/* Make standalone page content links match post link styling when using the helper class */
.post-link {
    color: #e7005e;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease, text-decoration-color .12s ease;
}
.post-link:hover,
.post-link:focus-visible {
    background-color: #ffd6fa;
    text-decoration: underline;
    text-decoration-color: #e7005e;
    text-decoration-thickness: 2px;
    color: #e7005e;
}

/* Make meta author links inherit surrounding color (avoid default blue)
   and match hover behavior used elsewhere (pink) */
.meta .author-link {
    color: inherit;
    text-decoration: none;
}
.meta .author-link:hover,
.meta .author-link:focus {
    color: #e7005e;
    text-decoration: none;
}

/* Right-align small citation lines used under blockquotes */
.citation-from {
    display: block;
    text-align: right;
    color: var(--muted);
    font-style: normal;
    margin-top: 0.4rem;
}

/* Selection highlight: make text selection match site accent */
::selection { background: #c7bfff; color: #0D043E; }
::-moz-selection { background: #c7bfff; color: #0D043E; }


.content-image {
    margin: 32px 0;
    text-align: center;
  }

  .content-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
  }

  .content-image figcaption {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #666;
    text-align: left;
  }

  .para-fontsize{
    font-size: 1.12rem;
  }

/* Limit excerpt text to 3 lines with ellipsis */
.excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
}