/* Site-wide styles */
:root {
    --safi-brand: #16a34a;
    --safi-brand-mid: #15803d;
    --safi-brand-dark: #14532d;
    --safi-dark-bg: #161B26;
    --safi-light-bg: #EFEAE0;
    --safi-text: #1C2230;
    --safi-text-light: #F8F6F1;
    --safi-text-muted: #8A8275;
    --safi-text-dim: #4A5164;
    --safi-border: #E6DFD0;
}

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

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--safi-text);
    background: #fff;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Header */
.site-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--safi-border);
}
.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--safi-text);
    text-decoration: none;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.site-logo svg {
    width: 24px;
    height: 24px;
}
.site-logo:hover { color: var(--safi-brand-mid); }
header nav { display: flex; gap: 28px; }
header nav a {
    color: var(--safi-text-dim);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s;
}
header nav a:hover, header nav a.active { color: var(--safi-brand-mid); }
.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.theme-toggle,
.mobile-menu-toggle {
    background: none;
    border: none;
    color: var(--safi-text);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
}
.theme-toggle { display: inline-flex; }
.mobile-menu-toggle { display: none; }
.theme-toggle .icon-moon,
.theme-toggle .icon-sun,
.theme-toggle .icon-auto { display: none; }
html[data-theme-mode="light"] .theme-toggle .icon-sun { display: block; }
html[data-theme-mode="dark"] .theme-toggle .icon-moon { display: block; }
html[data-theme-mode="auto"] .theme-toggle .icon-auto { display: block; }

/* Footer */
.site-footer {
    background: var(--safi-dark-bg);
    color: var(--safi-text-light);
    padding: 24px;
    margin-top: 60px;
    text-align: center;
    font-size: 0.85rem;
}
.footer-inner { max-width: 1100px; margin: 0 auto; }

/* Container */
.container {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 24px;
}

/* WordPress preset spacing tokens used by the front-page template's inline
   styles; defined here so the template's var() references resolve. */
:root {
    --wp--preset--spacing--20: min(2.2rem, 5vw);
    --wp--preset--spacing--30: clamp(1.5rem, 5vw, 2rem);
    --wp--preset--spacing--40: clamp(1.8rem, 5vw, 3rem);
    --wp--preset--spacing--50: clamp(2.5rem, 8vw, 4rem);
    --wp--preset--spacing--60: clamp(3rem, 8vw, 4.5rem);
    /* The theme's ti- palette, resolved to SAFi's brand tokens. The DB stores
       blocks with has-ti-* classes; the static site defines them here. */
    --wp--preset--color--ti-bg: #FFFFFF;
    --wp--preset--color--ti-fg: #1C2230;
    --wp--preset--color--ti-accent: #16a34a;
    --wp--preset--color--ti-accent-secondary: #15803d;
    --wp--preset--color--ti-bg-inv: #161B26;
    --wp--preset--color--ti-bg-alt: #EFEAE0;
    --wp--preset--color--ti-fg-alt: #F8F6F1;
}

/* WordPress block palette classes (see token definitions above) */
.has-ti-bg-color { color: var(--wp--preset--color--ti-bg) !important; }
.has-ti-fg-color { color: var(--wp--preset--color--ti-fg) !important; }
.has-ti-accent-color { color: var(--wp--preset--color--ti-accent) !important; }
.has-ti-accent-secondary-color { color: var(--wp--preset--color--ti-accent-secondary) !important; }
.has-ti-bg-inv-color { color: var(--wp--preset--color--ti-bg-inv) !important; }
.has-ti-bg-alt-color { color: var(--wp--preset--color--ti-bg-alt) !important; }
.has-ti-fg-alt-color { color: var(--wp--preset--color--ti-fg-alt) !important; }
.has-ti-bg-background-color { background-color: var(--wp--preset--color--ti-bg) !important; }
.has-ti-fg-background-color { background-color: var(--wp--preset--color--ti-fg) !important; }
.has-ti-accent-background-color { background-color: var(--wp--preset--color--ti-accent) !important; }
.has-ti-accent-secondary-background-color { background-color: var(--wp--preset--color--ti-accent-secondary) !important; }
.has-ti-bg-inv-background-color { background-color: var(--wp--preset--color--ti-bg-inv) !important; }
.has-ti-bg-alt-background-color { background-color: var(--wp--preset--color--ti-bg-alt) !important; }
.has-ti-fg-alt-background-color { background-color: var(--wp--preset--color--ti-fg-alt) !important; }
.has-ti-fg-border-color { border-color: var(--wp--preset--color--ti-fg) !important; }
.has-ti-accent-border-color { border-color: var(--wp--preset--color--ti-accent) !important; }

/* Front page */
.front-page { overflow: hidden; }

/* Hero: a flat opening band on white. Text is the site standard
   near-black; the two buttons carry the brand green. */
.front-page > .wp-block-group.has-background {
    position: relative;
    text-align: center;
}
.front-page > .wp-block-group.has-background h1,
.front-page > .wp-block-group.has-background p,
.front-page > .wp-block-group.has-background a:not(.wp-block-button__link) {
    color: var(--safi-text);
}
.front-page > .wp-block-group.has-background h1 {
    text-align: center;
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.08;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    max-width: 860px;
    margin: 0 auto;
}
.front-page > .wp-block-group.has-background p {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    line-height: 1.6;
    color: var(--safi-text);
    max-width: 760px;
    margin: 1.1rem auto 0;
}
html[data-theme="dark"] .front-page > .wp-block-group.has-background h1,
html[data-theme="dark"] .front-page > .wp-block-group.has-background p,
html[data-theme="dark"] .front-page > .wp-block-group.has-background a:not(.wp-block-button__link) {
    color: var(--safi-text-light);
}
html[data-theme="dark"] .front-page > .wp-block-group.has-background .wp-block-button__link {
    background: var(--safi-brand);
    border-color: var(--safi-brand);
    color: #fff;
}
html[data-theme="dark"] .front-page > .wp-block-group.has-background .wp-block-button__link:hover {
    background: var(--safi-brand-mid);
    border-color: var(--safi-brand-mid);
    color: #fff;
}
.front-page .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
}
.front-page .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    padding: 15px 30px !important;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    border: 2px solid var(--safi-brand);
    background: var(--safi-brand);
    color: #fff;
}
.front-page .wp-block-button__link:hover {
    background: var(--safi-brand-mid);
    border-color: var(--safi-brand-mid);
    color: #fff;
}

/* Icons in the hero buttons. Sized in em so they track the label, and
   filled with currentColor so they follow the hover and the outline
   variant without a second rule. */
.btn-ico {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1.05em;
}
.btn-ico svg {
    display: block;
    width: 0.68em;
    height: 0.68em;
    fill: currentColor;
}

/* Body content below the hero */
.front-page main.wp-block-group {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 24px;
}
.front-page main p {
    font-size: 1.05rem;
    line-height: 1.85;
    margin: 0 0 1.15rem;
    color: var(--safi-text);
}
.front-page main a:not(.wp-block-button__link) {
    color: var(--safi-brand-mid);
    text-decoration: none;
    border-bottom: 1px solid rgba(21,128,61,0.35);
    transition: border-color 0.15s, color 0.15s;
}
.front-page main a:not(.wp-block-button__link):hover {
    color: var(--safi-brand-dark);
    border-color: var(--safi-brand);
}
.front-page main h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 3.4vw, 2rem);
    line-height: 1.2;
    color: var(--safi-text);
    margin: 3rem 0 1.1rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid rgba(22,163,74,0.28);
}
.front-page main h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--safi-text);
    margin: 2rem 0 0.75rem;
}
.front-page main ul {
    margin: 0 0 1.5rem;
    padding-left: 1.35rem;
    list-style: none;
}
.front-page main ul li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.55rem;
    line-height: 1.7;
    color: var(--safi-text);
}
.front-page main ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--safi-brand);
}
/* Section separators are removed on the front page (owner request 2026-09-01).
   The hrs carried their own spacing, so sections get a top margin instead. */
.front-page hr.wp-block-separator {
    display: none;
}
.front-page main h2 {
    margin-top: 3rem;
}

@media (max-width: 640px) {
    .front-page > .wp-block-group.has-background h1 { font-size: 2rem; }
    .front-page .wp-block-button__link { width: 100%; text-align: center; }
    .front-page > .wp-block-group.has-background {
        padding-left: 20px;
        padding-right: 20px;
    }
    .front-page main.wp-block-group { padding: 0 20px; }
}

/* Article listing */
.articles-header {
    text-align: center;
    padding-top: 1.75rem;
    margin-bottom: 2.25rem;
}
.articles-title,
.tcb-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.015em;
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 0.75rem;
    color: var(--safi-text);
}
.page-subtitle {
    margin: 0 auto;
    max-width: 640px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.55;
    color: var(--safi-text-dim);
}
.page-subtitle .brand-accent { color: var(--safi-brand-mid); }
.page-subtitle::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    margin: 1.25rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--safi-brand), transparent);
}
/* TCB registry page (release fingerprints) */
.tcb-intro {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--safi-text-dim);
}
.tcb-table-wrap {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
}
.tcb-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(20,83,45,0.16);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(20,83,45,0.08);
    font-size: 0.92rem;
}
.tcb-table th, .tcb-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(20,83,45,0.16);
}
.tcb-table tr:last-child td { border-bottom: none; }
.tcb-table th {
    background: rgba(22,163,74,0.09);
    color: var(--safi-brand-dark);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--safi-brand);
}
.tcb-table tbody tr { transition: background 0.15s; }
.tcb-table tbody tr:hover { background: rgba(22,163,74,0.05); }
.tcb-table td code {
    font-size: 0.82rem;
    background: rgba(22,163,74,0.08);
    color: var(--safi-brand-dark);
    padding: 2px 6px;
    border-radius: 5px;
    word-break: break-all;
    overflow-wrap: anywhere;
}
.tcb-note {
    margin: 1.5rem auto 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--safi-text-muted);
}
.tcb-note code {
    font-size: 0.82rem;
    background: rgba(22,163,74,0.08);
    padding: 2px 6px;
    border-radius: 5px;
}
.tcb-note a { color: var(--safi-brand-mid); }
@media (max-width: 640px) {
    .tcb-intro { text-align: left; }
}
/* Header search */
.site-search {
    position: relative;
}
.mobile-menu-search { display: none; }
.site-search input[type="search"] {
    width: 190px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(128,128,128,0.4);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.6;
    transition: border-color 0.15s;
}
.site-search input[type="search"]:focus {
    outline: 2px solid var(--safi-brand);
    outline-offset: 2px;
    border-color: var(--safi-brand);
}
.search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--safi-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(28,34,48,0.14);
    padding: 6px;
    display: none;
    z-index: 300;
}
.search-dropdown.open { display: block; }
.search-result {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--safi-text);
}
.search-result:hover { background: rgba(22,163,74,0.08); }
.search-result-title { display: block; font-weight: 600; }
.search-result-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--safi-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.search-dropdown-empty {
    padding: 10px 12px;
    font-size: 0.85rem;
    color: var(--safi-text-muted);
}

/* Article rows */
.articles-list { margin-bottom: 2rem; }
.article-row {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    padding: 1.4rem 0;
    border-bottom: 1px solid rgba(22,163,74,0.14);
}
.article-row-thumb {
    flex: 0 0 200px;
    max-width: 200px;
}
.article-row-thumb img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--safi-border);
}
.article-row-body { flex: 1 1 auto; min-width: 0; }
.article-row-meta {
    display: flex;
    gap: 0.45rem;
    margin: 0.55rem 0 0;
    color: var(--safi-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 600;
}
.article-category { color: var(--safi-brand); }
.article-row-title {
    margin: 0 0 0.45rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
    overflow-wrap: break-word;
}
.article-row-title a {
    color: var(--safi-text);
    text-decoration: none;
}
.article-row-title a:hover {
    color: var(--safi-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.article-row-excerpt {
    margin: 0;
    color: var(--safi-text-dim);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* The front page styles every h2 as a section heading (>.5rem of top margin,
   a 2px green rule and a clamp font). The Continue-reading rows reuse
   .article-row-title, which must keep the All-articles-index look inside
   .front-page main, so the section-heading rules are scoped back here. */
.front-page main .article-row-title {
    margin: 0 0 0.45rem;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 900;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.005em;
    padding-bottom: 0;
    border-bottom: none;
}
.front-page main .article-row-title a {
    color: var(--safi-text);
    text-decoration: none;
    border-bottom: none;
}
.front-page main .article-row-title a:hover {
    color: var(--safi-brand);
    text-decoration: none;
    border-bottom: none;
}

/* Post page */
.post-page {
    max-width: 740px;
    margin: 0 auto;
    padding: 40px 24px 0;
}
.post-header { margin-bottom: 2rem; }
.post-header h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.post-meta {
    color: var(--safi-text-muted);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.meta-sep { opacity: 0.5; }
.post-categories { color: var(--safi-brand); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; }
.post-author { display: inline-flex; align-items: center; gap: 0.35rem; }
.post-author-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.post-author-link { color: var(--safi-text); font-weight: 600; text-decoration: none; }
.post-author-link:hover { color: var(--safi-brand-mid); text-decoration: underline; text-underline-offset: 2px; }
.post-banner { width: 100%; height: 320px; overflow: hidden; border-radius: 8px; margin: 0 0 1.75rem; }
.post-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .post-banner { height: 220px; } }
/* Article body.
   Measured at the previous 17px: 692px of measure gave about 80 characters
   per line, at the outer edge of the 45 to 75 range and past the 80 usually
   treated as the limit. Raising the face rather than narrowing the column
   fixes the measure and the reading size together, and leaves the contents
   sidebar's position, which is calculated from the 740px column, alone.
   19px puts the measure at roughly 71 characters.

   Below 768px the column is narrower than the text needs anyway, so the
   larger face would only cost words per line; it steps back to 17px there. */
.post-content {
    line-height: 1.75;
    font-size: 19px;
}
@media (max-width: 768px) {
    .post-content { font-size: 17px; }
}
.post-content h2, .page-content h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.6rem;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(22,163,74,0.2);
}
.post-content h3, .page-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 1.5rem 0 0.5rem;
}
.post-content h4, .page-content h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    margin: 1.25rem 0 0.5rem;
}
.post-content p, .page-content p { margin-bottom: 1em; }
.post-content ul, .page-content ul,
.post-content ol, .page-content ol { margin-bottom: 1em; padding-left: 1.5em; }
.post-content li, .page-content li { margin-bottom: 0.3em; }

/* Article contents sidebar.
   Fixed beside the 740px column rather than placed in flow, so it cannot
   affect the measure of the article itself. Hidden below 1200px, where there
   is no room beside the text and it would crowd the reading column. */
.post-toc {
    position: fixed;
    top: 96px;
    left: calc(50% + 392px);
    width: 216px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    font-size: 0.8rem;
    line-height: 1.5;
}
.post-toc-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--safi-text-muted);
    margin: 0 0 0.6rem;
}
.post-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--safi-border);
}
.post-toc li { margin: 0; }
.post-toc a {
    display: block;
    padding: 0.32rem 0 0.32rem 0.8rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--safi-text-dim);
    text-decoration: none;
}
.post-toc a:hover { color: var(--safi-brand-mid); }
.post-toc li.toc-h3 a { padding-left: 1.6rem; font-size: 0.95em; }
.post-toc a.is-active {
    color: var(--safi-brand-dark);
    border-left-color: var(--safi-brand);
    font-weight: 600;
}
@media (max-width: 1199px) { .post-toc { display: none; } }

/* The header is sticky, so an anchor jump would otherwise land underneath it. */
.post-content h2, .post-content h3 { scroll-margin-top: 88px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html[data-theme="dark"] .post-toc ul { border-left-color: #333; }
html[data-theme="dark"] .post-toc a { color: #a3a3a3; }
html[data-theme="dark"] .post-toc a:hover { color: #4ade80; }
html[data-theme="dark"] .post-toc a.is-active {
    color: #4ade80;
    border-left-color: #4ade80;
}
/* Quill authoring classes from editor.php. Quill ships these rules in its own
   stylesheet, which the editor loads and the published page does not, so
   without them alignment and indentation are lost on publish. */
.post-content .ql-align-center, .page-content .ql-align-center { text-align: center; }
.post-content .ql-align-right, .page-content .ql-align-right { text-align: right; }
.post-content .ql-align-justify, .page-content .ql-align-justify { text-align: justify; }
.post-content .ql-indent-1, .page-content .ql-indent-1 { margin-left: 3em; }
.post-content .ql-indent-2, .page-content .ql-indent-2 { margin-left: 6em; }
.post-content .ql-indent-3, .page-content .ql-indent-3 { margin-left: 9em; }
.post-content .ql-indent-4, .page-content .ql-indent-4 { margin-left: 12em; }
.post-content .ql-indent-5, .page-content .ql-indent-5 { margin-left: 15em; }
.post-content .ql-indent-6, .page-content .ql-indent-6 { margin-left: 18em; }
.post-content .ql-indent-7, .page-content .ql-indent-7 { margin-left: 21em; }
.post-content .ql-indent-8, .page-content .ql-indent-8 { margin-left: 24em; }
.post-content code, .page-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.86em;
    background: rgba(22,163,74,0.09);
    color: var(--safi-brand-dark);
    padding: 0.14em 0.42em;
    border-radius: 5px;
    border: 1px solid rgba(22,163,74,0.14);
    word-break: break-word;
}
.post-content pre, .page-content pre {
    background: var(--safi-dark-bg);
    color: var(--safi-text-light);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9rem;
    line-height: 1.65;
    padding: 1.1rem 1.25rem;
    margin: 1.5em 0;
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(22,163,74,0.28);
    border-left: 4px solid var(--safi-brand);
}
.post-content pre code, .page-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    border-radius: 0;
}
.post-content pre::-webkit-scrollbar,
.page-content pre::-webkit-scrollbar { height: 8px; }
.post-content pre::-webkit-scrollbar-thumb,
.page-content pre::-webkit-scrollbar-thumb { background: rgba(248,246,241,0.25); border-radius: 4px; }
/* Copy button on code blocks. The wrapper holds the button in place while the
   pre scrolls horizontally beneath it, and keeps the block's vertical margin.
   Both themes keep the code block on the dark surface, so the button needs no
   dark override. */
.code-copy-wrap {
    position: relative;
    margin: 1.5em 0;
}
.code-copy-wrap pre {
    margin: 0;
    padding-top: 2.4rem;
}
.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--safi-text-light);
    background: var(--safi-dark-bg);
    border: 1px solid rgba(248,246,241,0.25);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.code-copy-btn:hover,
.code-copy-btn:focus-visible {
    color: #ffffff;
    border-color: var(--safi-brand);
    background: rgba(22,163,74,0.18);
    outline: 2px solid var(--safi-brand);
    outline-offset: 2px;
}
.post-content blockquote, .page-content blockquote {
    border-left: 3px solid var(--safi-brand);
    padding-left: 1.25rem;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--safi-text-dim);
}
.post-content blockquote p { margin-bottom: 0.5em; }
.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 1.5em auto;
}
.post-content figure { margin: 1.5em 0; }
.post-content figure:has(img[style*="float:left"]) img,
.post-content figure:has(img[style*="float:right"]) img { margin: 0; }
.post-content img[style*="float:left"], .post-content img[style*="float:right"] { clear: none; }
.post-content figcaption { text-align: center; font-size: 0.85rem; color: var(--safi-text-muted); margin-top: 0.5rem; }
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.92rem;
}
.post-content th, .post-content td {
    border: 1px solid rgba(20,83,45,0.16);
    padding: 10px 14px;
    text-align: left;
}
.post-content th {
    background: rgba(22,163,74,0.09);
    color: var(--safi-brand-dark);
    font-weight: 600;
    border-bottom: 2px solid var(--safi-brand);
}
.post-content hr {
    border: none;
    height: 3px;
    background: var(--safi-brand);
    margin: 3rem 0 1rem;
}
.post-content a { color: var(--safi-brand-mid); }
.post-content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-content strong { font-weight: 600; color: var(--safi-text); }

/* RunSAFi article promotion. Kept inside the reading column as the closing
   callout before sharing and author details. */
.runsafi-promo {
    position: relative;
    overflow: hidden;
    margin: 3.5rem 0 1rem;
    padding: 2rem 2.25rem;
    border: 1px solid rgba(22, 163, 74, .32);
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4 0%, #e7f6eb 58%, #d9f2e1 100%);
    box-shadow: 0 12px 30px rgba(20, 83, 45, .1);
}
.runsafi-promo::after {
    content: '';
    position: absolute;
    width: 13rem;
    height: 13rem;
    right: -5rem;
    top: -7rem;
    border: 1px solid rgba(22, 163, 74, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 1.5rem rgba(22, 163, 74, .05), 0 0 0 3rem rgba(22, 163, 74, .035);
    pointer-events: none;
}
.runsafi-promo-inner { position: relative; z-index: 1; max-width: 42rem; }
.runsafi-promo-home { padding-top: .875rem; }
.runsafi-promo-kicker {
    margin: 0 0 .55rem;
    color: var(--safi-brand-mid);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.runsafi-promo h2 {
    margin: 0 0 .65rem;
    color: var(--safi-brand-dark);
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.2;
}
.runsafi-promo p:not(.runsafi-promo-kicker) {
    max-width: 58ch;
    margin: 0 0 1.15rem;
    color: #36543f;
    font-size: .98rem;
    line-height: 1.65;
}
.runsafi-promo-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--safi-brand-dark);
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
}
.runsafi-promo-link:hover { color: var(--safi-brand-mid); text-decoration: underline; }
html[data-theme="dark"] .runsafi-promo {
    border-color: rgba(74, 222, 128, .34);
    background: linear-gradient(135deg, #14261a 0%, #173521 58%, #1b4228 100%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
html[data-theme="dark"] .runsafi-promo h2 { color: #bbf7d0; }
html[data-theme="dark"] .runsafi-promo p:not(.runsafi-promo-kicker) { color: #b9d7c0; }
html[data-theme="dark"] .runsafi-promo-link { color: #86efac; }
@media (max-width: 600px) {
    .runsafi-promo { margin: 2.75rem 0 .5rem; padding: 1.5rem; }
    .runsafi-promo-home {
        margin-left: 1rem;
        margin-right: 1rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.post-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--safi-border);
}
.back-link {
    color: var(--safi-brand);
    text-decoration: none;
    font-weight: 600;
}
.back-link:hover { text-decoration: underline; }

/* Post footer card: share buttons and author bio. Recreates the WordPress
   post-footer block the static build replaced. Hairlines and soft fills are
   the text colour at low alpha so they follow the light/dark swap. */
/* Subscribe card: the MailerLite embed wrapped to match the post footer.
   The injected form brings its own styles; the card only frames it. */
.subscribe-card {
    margin: 40px 0 0;
    padding: 28px 24px 16px;
    border: 1px solid var(--safi-border);
    border-radius: 14px;
    text-align: center;
    background: #ffffff;
}
.subscribe-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--safi-brand);
    font-weight: 600;
    margin: 0 0 8px;
}
.subscribe-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--safi-text);
}
.subscribe-sub {
    font-size: 0.95rem;
    color: var(--safi-text-dim);
    margin: 0 0 14px;
}
.subscribe-card .ml-embedded {
    max-width: 420px;
    margin: 0 auto;
}
/* The injected form ships MailerLite's default look (gray box, Open Sans,
   black button, its own title copying ours). These overrides bend it to the
   site's design. MailerLite scopes its own rules to #mlb2-<builder id> with
   !important, so these carry the same id to win the cascade. If the form is
   ever recreated the id changes: submission, double opt-in and the success
   state keep working regardless, only the polish reverts. */
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4,
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p {
    /* The form's own title and subtitle duplicate the card's. The success
       message (ml-form-successBody) keeps its content. */
    display: none !important;
}
.subscribe-card #mlb2-45460881 h4,
.subscribe-card #mlb2-45460881 p,
.subscribe-card #mlb2-45460881 span,
.subscribe-card #mlb2-45460881 button,
.subscribe-card #mlb2-45460881 input {
    font-family: 'Inter', sans-serif !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control {
    border: 1.5px solid var(--safi-border) !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    font-size: 0.98rem !important;
    color: var(--safi-text) !important;
    background: #ffffff !important;
    height: auto !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control:focus {
    border-color: var(--safi-brand) !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
    outline: none !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
    background: var(--safi-brand) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.98rem !important;
    padding: 12px 20px !important;
    width: 100% !important;
    cursor: pointer;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
    background: var(--safi-brand-mid) !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
    color: var(--safi-brand) !important;
    font-size: 1.15rem !important;
}
.subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
    color: var(--safi-text-dim) !important;
    font-size: 0.95rem !important;
}
html[data-theme="dark"] .subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control {
    background: #111111 !important;
    border-color: rgba(248, 246, 241, 0.18) !important;
    color: #f5f5f5 !important;
}
html[data-theme="dark"] .subscribe-card #mlb2-45460881.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
    color: #b9b9b9 !important;
}
html[data-theme="dark"] .subscribe-card {
    background: #1a1a1a;
    border-color: rgba(248, 246, 241, 0.12);
}
html[data-theme="dark"] .subscribe-title { color: #f5f5f5; }
html[data-theme="dark"] .subscribe-sub { color: #b9b9b9; }

.safi-pf {
    margin: 56px 0 0;
    padding-top: 32px;
    border-top: 1px solid var(--safi-border);
}
.safi-pf-h {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.6;
    margin: 0 0 14px;
    font-weight: 600;
}
.safi-pf-share-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.safi-pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: auto; min-width: 42px; height: 42px; padding: 0 12px;
    border: 1px solid var(--safi-border);
    border-radius: 999px;
    background: transparent;
    color: var(--safi-text);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.safi-pf-btn:hover, .safi-pf-btn:focus-visible {
    border-color: var(--safi-brand);
    color: var(--safi-brand-mid);
    background: rgba(22,163,74,0.08);
}
.safi-pf-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.safi-pf-copied { font-size: 0.8rem; font-weight: 600; line-height: 1; }
.safi-pf-copied:empty { display: none; }

.safi-pf-author {
    margin-top: 36px;
    padding: 26px;
    border: 1px solid var(--safi-border);
    border-radius: 14px;
    background: #fbfaf6;
}
.safi-pf-author-head { display: flex; gap: 18px; align-items: flex-start; }
.safi-pf-avatar { border-radius: 50%; flex: 0 0 auto; width: 64px; height: 64px; }
.safi-pf-kicker {
    font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    opacity: 0.55; margin: 0 0 2px; font-weight: 600;
}
.safi-pf-name { font-size: 1.12rem; font-weight: 700; margin: 0 0 6px; line-height: 1.2; }
.safi-pf-bio { margin: 0; font-size: 0.95rem; line-height: 1.55; opacity: 0.85; }
.safi-pf-socials { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; }
.safi-pf-socials a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none;
    color: inherit; opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}
.safi-pf-socials a:hover, .safi-pf-socials a:focus-visible {
    opacity: 1; color: var(--safi-brand-mid);
}
.safi-pf-socials svg { width: 16px; height: 16px; fill: currentColor; display: block; }

.safi-pf-ctas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 22px;
}
.safi-pf-cta {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--safi-border);
    border-radius: 11px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s;
}
.safi-pf-cta:hover, .safi-pf-cta:focus-visible {
    border-color: var(--safi-brand);
    transform: translateY(-1px);
}
.safi-pf-cta-label {
    display: block; font-weight: 650; font-size: 0.95rem; line-height: 1.3;
    color: var(--safi-brand-mid);
}
.safi-pf-cta-blurb {
    display: block; margin-top: 5px; font-size: 0.83rem; line-height: 1.45; opacity: 0.75;
}
@media (max-width: 781px) {
    .safi-pf-ctas { grid-template-columns: 1fr; }
    .safi-pf-author { padding: 20px; }
    .safi-pf-author-head { gap: 14px; }
    .safi-pf-avatar { width: 52px; height: 52px; }
}

/* Page content (for safi, license, get-involved).
   element also carries .container; this rule overrides its padding (same
   specificity, later), so horizontal padding must be included here. */
.page-content {
    padding: 48px 24px 40px;
    max-width: 840px;
    margin: 0 auto;
}
.page-content h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 2.5rem 0 1rem;
}
/* The 2.5rem above is for an h1 that follows other content. When the heading
   opens the page it stacks on the 48px container padding instead, which left
   get-involved and license with 88px of dead space above the title. */
.page-content > h1:first-child {
    margin-top: 0;
}
.page-content h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.55rem, 3vw, 1.85rem);
    line-height: 1.2;
    margin: 2.6rem 0 0.9rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid rgba(22,163,74,0.2);
}
.page-content h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 2rem 0 0.75rem;
}
.page-content h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin: 1.5rem 0 0.6rem;
}
.page-content p { margin-bottom: 1.1em; }
.page-content ul, .page-content ol { margin-bottom: 1.1em; padding-left: 1.5em; }
.page-content li { margin-bottom: 0.35em; line-height: 1.7; }
.page-content blockquote {
    border-left: 3px solid var(--safi-brand);
    padding-left: 1.25rem;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--safi-text-dim);
}
.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.92rem;
}
.page-content th, .page-content td {
    border: 1px solid rgba(20,83,45,0.16);
    padding: 10px 14px;
    text-align: left;
}
.page-content th {
    background: rgba(22,163,74,0.09);
    color: var(--safi-brand-dark);
    font-weight: 600;
    border-bottom: 2px solid var(--safi-brand);
}
.page-content hr {
    border: none;
    height: 3px;
    background: var(--safi-brand);
    margin: 3rem 0 1rem;
}
.page-content img { max-width: 100%; height: auto; border-radius: 8px; }
.page-content a { color: var(--safi-brand-mid); }
.page-content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-content strong { font-weight: 600; }
.page-content iframe { max-width: 100%; border: none; border-radius: 8px; }

/* Contact form on the get-involved page. Replaces the dead Forminator
   shortcode with a FormSubmit form styled to the theme. */
.contact-form {
    margin: 2rem 0 1rem;
    padding: 1.75rem 1.5rem;
    background: #fbfaf6;
    border: 1px solid var(--safi-border);
    border-left: 3px solid var(--safi-brand);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.contact-form-title {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 1.35rem;
    margin: 0;
}
.contact-form-intro {
    margin: 0 0 0.25rem;
    color: var(--safi-text-dim);
    font-size: 0.95rem;
    line-height: 1.55;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--safi-border);
    border-radius: 8px;
    background: #fff;
    color: var(--safi-text);
    width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--safi-brand);
    outline-offset: 1px;
    border-color: var(--safi-brand);
}
.contact-form textarea { min-height: 130px; resize: vertical; }
.contact-form-submit {
    align-self: flex-start;
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 8px;
    background: var(--safi-brand);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s;
}
.contact-form-submit:hover { background: var(--safi-brand-mid); }

/* Link cards: the "Read the guide / Run the demo" blocks on the
   get-involved page, upgraded from bare paragraphs in the converter. */
.page-link-card {
    background: #ffffff;
    border: 1px solid var(--safi-border);
    border-left: 3px solid var(--safi-brand);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 14px 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.page-link-card:hover {
    border-left-color: var(--safi-brand-mid);
    border-color: rgba(22,163,74,0.35);
    box-shadow: 0 2px 10px rgba(28,34,48,0.06);
}
.page-link-card-title {
    display: inline-block;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--safi-brand-mid);
    text-decoration: none;
    margin-bottom: 2px;
}
.page-link-card-title:hover { text-decoration: underline; }
.page-link-card-desc {
    margin: 0;
    color: var(--safi-text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Full-width banner band from the block content (wp-block-cover). The safi
   page opens with one: a headline, description, buttons and a demo image.
   No background, so the page canvas shows through. */
 .page-content .wp-block-cover {
     margin: 0 -24px;
     /* page-content already adds 48px above the hero; keep the cover's own
        top padding modest so the title is not double-pushed down. */
     padding: 24px clamp(20px, 6vw, 64px) 24px;
 }
/* The demo gif sits inside the banner; at full 960px width it pushed the
   first section far down the page. Cap it and drop the figure's default
   2.5rem vertical margins so the banner stays compact. */
.page-content .wp-block-cover figure.wp-block-image {
    margin: 20px auto 0;
    max-width: 720px;
}
.page-content .wp-block-cover figure.wp-block-image img {
    width: 100%;
    height: auto;
}
.page-content .wp-block-cover .wp-block-cover__background { display: none; }
.page-content .wp-block-cover h3 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.012em;
    max-width: 720px;
    margin: 0 0 1rem;
}
.page-content .wp-block-cover p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--safi-text-dim);
    max-width: 680px;
}
.page-content .wp-block-cover .wp-block-button {
    display: inline-block;
    margin: 0.5rem 0.75rem 0.5rem 0;
}
.page-content .wp-block-cover .wp-block-buttons {
    text-align: center;
}
.page-content .wp-block-button__link {
    display: inline-block;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 13px 26px !important;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.page-content .wp-block-button.is-style-fill .wp-block-button__link {
    background: var(--safi-brand);
    color: #fff;
}
.page-content .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background: var(--safi-brand-mid);
}
.page-content .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border-color: var(--safi-brand);
    color: var(--safi-brand-mid);
}
.page-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: rgba(22,163,74,0.08);
}
.page-content figure.wp-block-image {
    margin: 2.5rem 0;
    text-align: center;
}
.page-content figure.wp-block-image img {
    border: 1px solid var(--safi-border);
    box-shadow: 0 1px 4px rgba(28,34,48,0.06);
}

/* Dark mode. The html[data-theme] attribute is set by the inline script in
   the page head: a saved choice wins, otherwise it follows the OS setting.
   The theme toggle button in the header flips it and stores the choice. */
html[data-theme="dark"] {
    color-scheme: dark;
}
html[data-theme="dark"] body { background: #0a0a0a; color: #e5e5e5; }
html[data-theme="dark"] .site-header { background: #111111; border-bottom-color: #2a2a2a; }
html[data-theme="dark"] .site-logo,
html[data-theme="dark"] header nav a,
html[data-theme="dark"] header nav.open a {
    color: #f5f5f5;
}
html[data-theme="dark"] .mobile-menu-toggle { color: #f5f5f5; }
html[data-theme="dark"] .theme-toggle { color: #f5f5f5; }
html[data-theme="dark"] .article-row-title a { color: #f5f5f5; }
html[data-theme="dark"] .article-row-excerpt { color: #a3a3a3; }
html[data-theme="dark"] .articles-title,
html[data-theme="dark"] .tcb-title,
html[data-theme="dark"] .page-subtitle { color: #c9c9c9; }
html[data-theme="dark"] .page-subtitle .brand-accent { color: #4ade80; }
html[data-theme="dark"] .tcb-intro { color: #c9c9c9; }
html[data-theme="dark"] .tcb-table {
    background: #1a1a1a;
    border-color: rgba(74,222,128,0.22);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
html[data-theme="dark"] .tcb-table th {
    background: rgba(74,222,128,0.10);
    color: #4ade80;
    border-bottom: 2px solid rgba(74,222,128,0.55);
}
html[data-theme="dark"] .tcb-table th,
html[data-theme="dark"] .tcb-table td { border-color: rgba(74,222,128,0.22); }
html[data-theme="dark"] .tcb-table tbody tr:hover { background: rgba(74,222,128,0.07); }
html[data-theme="dark"] .tcb-table td code {
    background: rgba(74,222,128,0.12);
    color: #6ee7a0;
}
html[data-theme="dark"] .tcb-note { color: #a3a3a3; }
html[data-theme="dark"] .tcb-note code { background: rgba(74,222,128,0.12); }
html[data-theme="dark"] .tcb-note a { color: #4ade80; }
html[data-theme="dark"] .post-author-link { color: #f5f5f5; }
html[data-theme="dark"] .post-author-link:hover { color: #4ade80; }
html[data-theme="dark"] .safi-pf-btn,
html[data-theme="dark"] .safi-pf-cta,
html[data-theme="dark"] .safi-pf-socials a { color: #e5e5e5; }
html[data-theme="dark"] .safi-pf-btn:hover,
html[data-theme="dark"] .safi-pf-btn:focus-visible,
html[data-theme="dark"] .safi-pf-socials a:hover,
html[data-theme="dark"] .safi-pf-socials a:focus-visible { color: #4ade80; }
html[data-theme="dark"] .safi-pf-cta-label { color: #4ade80; }
html[data-theme="dark"] .safi-pf-cta:hover,
html[data-theme="dark"] .safi-pf-cta:focus-visible { border-color: #4ade80; }
html[data-theme="dark"] .safi-pf-author { background: #161b26; }
html[data-theme="dark"] .safi-pf-cta { background: #1a1a1a; }
html[data-theme="dark"] .post-content,
html[data-theme="dark"] .page-content { color: #e5e5e5; }
html[data-theme="dark"] .post-content strong,
html[data-theme="dark"] .page-content strong { color: #f5f5f5; }
html[data-theme="dark"] .post-content blockquote,
html[data-theme="dark"] .page-content blockquote { color: #c9c9c9; }
html[data-theme="dark"] .front-page main p,
html[data-theme="dark"] .front-page main h2,
html[data-theme="dark"] .front-page main h3,
html[data-theme="dark"] .front-page main ul li { color: #e5e5e5; }
html[data-theme="dark"] .post-content th,
html[data-theme="dark"] .page-content th {
    background: rgba(74,222,128,0.10);
    color: #4ade80;
    border-bottom: 2px solid rgba(74,222,128,0.55);
}
html[data-theme="dark"] .post-content th,
html[data-theme="dark"] .post-content td,
html[data-theme="dark"] .page-content th,
html[data-theme="dark"] .page-content td { border-color: rgba(74,222,128,0.22); }
html[data-theme="dark"] .post-content code,
html[data-theme="dark"] .page-content code {
    background: rgba(22,163,74,0.16);
    color: #6ee7a0;
}
html[data-theme="dark"] .site-search input[type="search"] {
    color: #f5f5f5;
    border-color: rgba(248,246,241,0.35);
}
html[data-theme="dark"] .search-dropdown { background: #1a1a1a; border-color: #333; }
html[data-theme="dark"] .search-result { color: #f5f5f5; }
html[data-theme="dark"] .search-result:hover { background: rgba(22,163,74,0.15); }
html[data-theme="dark"] .search-result-meta,
html[data-theme="dark"] .search-dropdown-empty { color: #a3a3a3; }

/* Page banner (the safi cover) and its links recolor for dark */
html[data-theme="dark"] .page-content .wp-block-cover h3 { color: #f5f5f5; }
html[data-theme="dark"] .page-content .wp-block-cover p { color: #b9b9b9; }

/* ── SAFi landing page ──────────────────────────────────────────────────── */
/* The hero uses a real h1; zero the generic .page-content h1 margin inside
   the cover so the cover's own padding is the only gap above the headline. */
.page-content .wp-block-cover h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.012em;
    max-width: 760px;
    margin: 0 0 1rem;
}
html[data-theme="dark"] .page-content .wp-block-cover h1 { color: #f5f5f5; }

/* Proof strip: four quick adoption signals under the hero. */
.safi-proof-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0 0;
    border-bottom: 1px solid var(--safi-border);
}
.safi-proof {
    flex: 1 1 200px;
    min-width: 200px;
    padding: 0.5rem 0 1rem;
}
.safi-proof strong {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}
.safi-proof span {
    color: var(--safi-text-dim);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* The demo GIF below the proof strip. */
.safi-artifact {
    margin: 1.5rem 0 2.5rem;
}
.safi-artifact img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Process flow: five stages in plain language. */
.safi-process {
    margin: 2.5rem 0 1rem;
}
.safi-process-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.7rem;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 1.75rem;
}
.safi-process-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
/* The five cards carry the same travelling highlight as the turn trace on the
   home page. Five beats of 1.2s, so the cycle is 6s, and the delays are
   negative so every card loads already in its steady state rather than the
   first pass showing passed, active and not-yet-started at once.
   Colours go through tokens, because a keyframe beats a plain rule and the
   dark overrides could not otherwise reach them. */
.safi-process-flow {
    --step-on: var(--safi-brand);
    --step-off: var(--safi-border);
    --step-num-off: var(--safi-text-muted);
}
html[data-theme="dark"] .safi-process-flow {
    --step-on: #4ade80;
    --step-off: #2a2f3a;
    --step-num-off: #a3a3a3;
}
.safi-step {
    background: #fff;
    border: 1px solid var(--safi-border);
    border-top: 3px solid var(--step-off);
    border-radius: 10px;
    padding: 1.1rem 1rem;
    animation: safi-step-cycle 6s infinite;
    animation-delay: calc(var(--slot) * 1.2s - 6s);
}
@keyframes safi-step-cycle {
    0%, 16% {
        border-top-color: var(--step-on);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(22,163,74,0.14);
    }
    20%, 100% {
        border-top-color: var(--step-off);
        transform: translateY(0);
        box-shadow: none;
    }
}
@keyframes safi-num-cycle {
    0%, 16% { color: var(--step-on); }
    20%, 100% { color: var(--step-num-off); }
}
/* Held still, and every card keeps the green edge it had before. */
@media (prefers-reduced-motion: reduce) {
    .safi-step, .safi-step .safi-step-num { animation: none; }
    .safi-step { border-top-color: var(--step-on); transform: none; box-shadow: none; }
    .safi-step .safi-step-num { color: var(--step-on); }
}
html[data-theme="dark"] .safi-step { background: #16181f; border-color: #2a2f3a; }
.safi-step-num {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--step-num-off);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    animation: safi-num-cycle 6s infinite;
    animation-delay: calc(var(--slot) * 1.2s - 6s);
}
.safi-step strong {
    display: block;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}
.safi-step span {
    color: var(--safi-text-dim);
    font-size: 0.86rem;
    line-height: 1.45;
}
@media (max-width: 900px) {
    .safi-process-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .safi-process-flow { grid-template-columns: 1fr; }
}

/* Closing call-to-action band. */
.safi-cta {
    margin: 3rem auto 0;
    padding: 2.25rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 16px;
    color: #f8fafc;
}
html[data-theme="dark"] .safi-cta {
    background: linear-gradient(135deg, #11131a, #1b1f2b);
}
.safi-cta h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.9rem;
    margin: 0 0 0.5rem;
}
.safi-cta p {
    color: #cbd5e1;
    margin: 0 0 1.25rem;
}
.safi-cta .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: 0;
}
.safi-cta .wp-block-buttons .wp-block-button {
    margin: 0;
}
.safi-cta .wp-block-button {
    display: inline-block;
}
.safi-cta .wp-block-button__link {
    font-size: 1rem;
    padding: 0.85rem 1.6rem;
    border-radius: 10px;
    text-decoration: none;
}
.safi-cta .safi-cta-managed {
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}
.safi-cta .safi-cta-managed:hover {
    background: #ffffff;
}
html[data-theme="dark"] .safi-cta .safi-cta-managed {
    background: #1e293b;
    color: #e2e8f0;
    border-color: #334155;
}
html[data-theme="dark"] .safi-cta .safi-cta-managed:hover {
    background: #273449;
}
.safi-cta .safi-cta-note {
    margin: 1.1rem 0 0;
    font-size: 0.88rem;
    color: #94a3b8;
}
.safi-cta .safi-cta-note a {
    color: #4ade80;
    text-decoration: underline;
}
@media (max-width: 520px) {
    .safi-cta .wp-block-buttons { flex-direction: column; }
}

/* Dark mode for the landing page text. --safi-text-dim is not redefined for
   dark, so elements that use it stay dark; set explicit light shades here. */
html[data-theme="dark"] .safi-proof span { color: #b9b9b9; }
html[data-theme="dark"] .safi-proof strong { color: #e5e5e5; }
html[data-theme="dark"] .safi-process-title { color: #e5e5e5; }
html[data-theme="dark"] .safi-step strong { color: #e5e5e5; }
html[data-theme="dark"] .safi-step span { color: #b9b9b9; }

/* Link cards get a dark surface instead of white */
html[data-theme="dark"] .page-link-card {
    background: #1a1a1a;
    border-color: #333;
    border-left-color: var(--safi-brand);
}
html[data-theme="dark"] .page-link-card:hover {
    background: #202020;
    border-color: rgba(22,163,74,0.45);
}
html[data-theme="dark"] .page-link-card-desc { color: #b9b9b9; }
html[data-theme="dark"] .contact-form { background: #161b26; border-color: #333; }
html[data-theme="dark"] .contact-form-intro { color: #b9b9b9; }
html[data-theme="dark"] .contact-form input[type="text"],
html[data-theme="dark"] .contact-form input[type="email"],
html[data-theme="dark"] .contact-form input[type="tel"],
html[data-theme="dark"] .contact-form textarea {
    background: #1a1a1a;
    border-color: #333;
    color: #e5e5e5;
}

/* Remap the theme tokens so any block that used a light palette value
   (white background, light alternate surface) flips to a dark surface.
   Defined on html so the descendant palette classes pick them up. */
html[data-theme="dark"] {
    --wp--preset--color--ti-bg: #161B26;
    --wp--preset--color--ti-fg: #F8F6F1;
    --wp--preset--color--ti-bg-alt: #1f2733;
    --wp--preset--color--ti-fg-alt: #0a0a0a;
    --wp--preset--color--ti-bg-inv: #232B38;
}

/* Mobile */
@media (max-width: 768px) {
    header nav { display: none; }
    .mobile-menu-toggle { display: block; }
    header nav.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #ffffff;
        padding: 16px 24px;
        gap: 16px;
        border-bottom: 1px solid var(--safi-border);
        box-shadow: 0 8px 16px rgba(28,34,48,0.08);
    }
    header nav.open a { color: var(--safi-text); }
    .header-controls { gap: 6px; }
    .header-controls .site-search { display: none; }
    .mobile-menu-search { display: block; width: 100%; }
    .mobile-menu-search input[type="search"] { width: 100%; }
    .mobile-menu-search .search-dropdown { width: 100%; right: auto; left: 0; }
    .article-row { flex-direction: column; gap: 0.75rem; }
    .article-row-thumb,
    .article-row-thumb img { flex: none; width: 100%; max-width: none; }
    .article-row-thumb img { height: 180px; }
    .article-row-title { font-size: 1.18rem; }
    .post-header h1 { font-size: 1.6rem; }
    .post-page { padding-top: 24px; }
    .page-content { padding-top: 32px; }
    .header-inner { padding: 0 16px; }
    .site-logo { gap: 7px; font-size: 0.98rem; }
    .site-logo svg { width: 24px; height: 24px; }
    .theme-toggle, .mobile-menu-toggle { margin-left: 2px; }

    /* Page banner and its buttons on phones */
    .page-content .wp-block-cover {
        margin: 0 -24px;
        padding: 16px 22px 20px;
    }
    .page-content .wp-block-cover .wp-block-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .page-content .wp-block-cover .wp-block-button { margin: 0; }
    .page-content .wp-block-button__link {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* Mobile + dark: the dropdown menu must not stay white in dark mode. */
@media (max-width: 768px) {
    html[data-theme="dark"] header nav.open { background: #1a1a1a; border-bottom-color: #333; }
    html[data-theme="dark"] header nav.open a { color: #f5f5f5; }
}

/* Home page example: the Framework sub-section run trace. */
.run-trace {
    --trace-on: var(--safi-brand);
    --trace-on-text: var(--safi-brand-dark);
    --trace-line: var(--safi-border);
    --trace-label: var(--safi-text-muted);
}
html[data-theme="dark"] .run-trace {
    --trace-on: #4ade80;
    --trace-on-text: #4ade80;
    --trace-line: #333;
    --trace-label: #a3a3a3;
}

/* The framework loop, as one inline SVG.
   The four faculties sit on a closed square and the signal travels the turn
   cycle, Intellect to Will to Conscience to Spirit, with the Spirit to
   Intellect edge closing the loop (orchestrator.py builds spirit_feedback
   and passes it into intellect_engine.generate() under PHASE 2). Synderesis
   compiles the charter and the policies in the middle and feeds all four
   faculties: the Intellect
   receives the mission and the value names through its worldview, while
   the Will, the Conscience and the Spirit receive the compiled values. The
   Intellect is still denied the rubrics it will be graded against, along
   with their weights and every score, which is what makes the Conscience an
   independent auditor rather than a rubber stamp. The denial is the point,
   so the draft cannot write to the test.

   Tokens extend the site palette and flip with html[data-theme="dark"].
   The signals hide entirely for prefers-reduced-motion. */
.loop-figure {
    --safi-bg: #ffffff;
    --safi-node-bg: #ffffff;
    --safi-text-main: var(--safi-text);
    --safi-text-sub: var(--safi-text-dim);
    --safi-track: var(--safi-brand-mid);
    --safi-node-stroke: var(--safi-brand-mid);
    --safi-will-stroke: var(--safi-brand);
    --safi-signal: var(--safi-brand);
    --safi-signal-core: #ffffff;
    --safi-shadow: rgba(28, 34, 48, 0.1);
    margin: 0 calc(-1 * var(--wp--preset--spacing--40)) 0.9rem;
}
html[data-theme="dark"] .loop-figure {
    --safi-bg: var(--safi-dark-bg);
    --safi-node-bg: var(--safi-text);
    --safi-text-main: var(--safi-text-light);
    --safi-text-sub: var(--safi-light-bg);
    --safi-track: var(--safi-brand-dark);
    --safi-node-stroke: var(--safi-brand-mid);
    --safi-will-stroke: var(--safi-brand);
    --safi-signal: var(--safi-brand);
    --safi-signal-core: var(--safi-text-light);
    --safi-shadow: rgba(28, 34, 48, 0.5);
}
.loop-figure * { transition: fill 0.3s ease, stroke 0.3s ease; }
.loop-figure svg { display: block; width: 100%; height: auto; }
.safi-track-base {
    stroke: var(--safi-track);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 4 8;
    fill: none;
}
.safi-values-track {
    stroke: var(--safi-track);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 7;
    fill: none;
    opacity: 0.55;
    /* The four spokes stream outward from Synderesis to each faculty,
       reading the compile-and-feed direction off the paths themselves,
       which all run center to node. Staggered a quarter cycle apart so
       no two waves reach a node at the same moment. */
    animation: safi-values-flow 4s linear infinite;
}
.safi-values-track:nth-of-type(6) { animation-delay: -0.5s; }
.safi-values-track:nth-of-type(7) { animation-delay: -1s; }
.safi-values-track:nth-of-type(8) { animation-delay: -1.5s; }
@keyframes safi-values-flow {
    to { stroke-dashoffset: -18; }
}
.safi-node-title {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 21px;
    font-weight: 800;
    text-anchor: middle;
    letter-spacing: 0.05em;
    paint-order: stroke;
    stroke: var(--safi-bg);
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: var(--safi-text-main);
}
.safi-node-desc {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-anchor: middle;
    fill: var(--safi-text-sub);
    opacity: 0.85;
}
.safi-node-tag {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    fill: var(--safi-will-stroke);
    text-anchor: middle;
}
@media (prefers-reduced-motion: reduce) {
    .safi-loop-signal { display: none; }
    .safi-values-track { animation: none; }
}

/* The turn trace under See it run.
   The loop above answers what SAF is; this answers what happens when a prompt
   arrives, which is a different shape: linear, and with the Will appearing at
   two separate checkpoints. Order and wording follow the orchestrator's own
   phase markers, PHASE 0, PHASE 2, then PHASES 3 to 5 as Will, Conscience,
   Will, Spirit.

   Vertical rather than horizontal: eight steps with a clause each will not sit
   on one line at any width worth designing for, and going vertical means the
   same layout works on a phone.

   Ten beats of 0.7s, so the cycle is 7s. Pure CSS. */
.run-trace {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    max-width: 640px;
}
.run-step {
    position: relative;
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 14px;
    align-items: start;
    padding-bottom: 15px;
}
.run-step:last-child { padding-bottom: 0; }
/* The line joining one dot to the next, drawn on all but the last step. */
.run-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7.25px;
    top: 17px;
    bottom: 0;
    width: 1.5px;
    background: var(--trace-line);
}
.run-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--trace-line);
    background: transparent;
    animation: run-dot-cycle 7s infinite;
    animation-delay: calc(var(--slot) * 0.7s - 7s);
}
.run-text { line-height: 1.45; }
.run-name {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--trace-label);
    animation: run-name-cycle 7s infinite;
    animation-delay: calc(var(--slot) * 0.7s - 7s);
}
.run-note { font-size: 0.84rem; color: var(--trace-label); }

@keyframes run-dot-cycle {
    0%, 8% { border-color: var(--trace-on); background: var(--trace-on); }
    11%, 100% { border-color: var(--trace-line); background: transparent; }
}
@keyframes run-name-cycle {
    0%, 8% { color: var(--trace-on-text); }
    11%, 100% { color: var(--trace-label); }
}

@media (max-width: 640px) {
    .run-note { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .run-dot, .run-name { animation: none; }
    .run-dot { border-color: var(--trace-on); }
}

.front-page main .loop-hint {
    margin: 0 0 1.75rem;
    font-size: 0.82rem;
    color: var(--safi-text-muted);
}
html[data-theme="dark"] .front-page main .loop-hint { color: #b9b9c0; }
.front-page main .fw-intro {
    max-width: 760px;
    margin: 0 0 0.9rem;
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--safi-text);
    border-left: 3px solid var(--safi-brand);
    padding-left: 1rem;
}
.front-page main .fw-note {
    max-width: 760px;
    margin: 0 0 1.4rem;
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--safi-text-dim);
}
html[data-theme="dark"] .front-page main .fw-note { color: #c9c9c9; }
.fw-lead {
    max-width: 760px;
    color: var(--safi-text-dim);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0.25rem 0 1.5rem;
}

.fw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) {
    .fw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .fw-grid { grid-template-columns: 1fr; }
}

.fw-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--safi-border);
    border-top: 3px solid var(--safi-brand);
    border-radius: 12px;
    padding: 1.2rem 1.1rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.fw-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
html[data-theme="dark"] .fw-card {
    background: #16181f;
    border-color: #2a2f3a;
}
html[data-theme="dark"] .fw-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.fw-num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--safi-brand);
    margin-bottom: 0.35rem;
}
.fw-card strong {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}
.fw-desc {
    color: var(--safi-text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.8rem;
}
.fw-link {
    margin-top: auto;
    color: var(--safi-brand-mid);
    font-size: 0.88rem;
    font-weight: 600;
}
html[data-theme="dark"] .fw-card strong { color: #e5e5e5; }
html[data-theme="dark"] .fw-desc { color: #b9b9b9; }
html[data-theme="dark"] .fw-link { color: #4ade80; }

/* The faculty cards are global classes, so an article can reuse them. Inside
   .post-content the generic link rules would repaint the card title green
   and underline it on hover; restore the card's own look there. Same
   specificity as .post-content a:hover below, so this later position wins. */
.post-content .fw-card,
.page-content .fw-card { color: inherit; }
.post-content .fw-card:hover,
.page-content .fw-card:hover { text-decoration: none; }

/* A wide table sits inside its own figure, wider than the column only when a
   cell's intrinsic minimum forces it. Let the figure scroll so the page
   never scrolls sideways on a phone; on desktop there is nothing to scroll. */
.post-content .wp-block-table,
.page-content .wp-block-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.wp-block-table table { min-width: 100%; }


/* Original manuscript download line beneath the framework grid. */
.ms-download {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: 0.95rem;
}
.ms-download a {
    color: var(--safi-brand-mid);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--safi-border);
    padding-bottom: 2px;
}
.ms-download a:hover { border-bottom-color: var(--safi-brand-mid); }
html[data-theme="dark"] .ms-download a { color: #4ade80; }