/* Shared reading and discovery surfaces for the blog and resource library. */
.editorial {
    --paper: #fbf8ef;
    --ink: #243f35;
    --muted-ink: #52655a;
    --link-ink: #25664e;
    display: block;
    height: auto;
    min-height: 100%;
    overflow-y: visible;
    padding: 0;
    color: var(--ink);
    background: radial-gradient(ellipse at 100% 0, #e2eadc 0, transparent 650px), #f4f1e8;
}
.editorial .site-topbar { background: rgba(28,69,57,.97); border-bottom-color: #456659; }
.editorial .topbar-dropdown { background: #1c4539; }
.editorial .topbar-link { color: #f1f5eb; opacity: 1; }
.editorial .topbar-brand { color: #fff; }
.editorial .topbar-prompts-btn, .editorial .topbar-quiz-btn { background: #deead7; color: #244c3b; border-radius: 30px; }
.editorial :focus-visible { outline: 3px solid #a85c2f; outline-offset: 4px; }
.editorial [id] { scroll-margin-top: 90px; }
.editorial .skip-link { position: fixed; top: -80px; left: 1rem; z-index: 1100; padding: .8rem 1.2rem; background: #fff; color: #243f35; border-radius: 12px; }
.editorial .skip-link:focus { top: .75rem; }
.editorial .blog-bg-blobs, .editorial .deco-shapes { display: none; }
.editorial .blog-container, .editorial .resources-page { width: 100%; max-width: 1140px; padding: 116px 32px 56px; margin: 0 auto; }
.editorial .blog-header, .editorial .resources-header { position: relative; text-align: left; margin-bottom: 2rem; max-width: 820px; }
.editorial .blog-header h1, .editorial .resources-header h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.1; font-weight: 500; letter-spacing: -.04em; color: var(--ink); margin: .7rem 0 1rem; }
.editorial .blog-header p, .editorial .resources-header p { max-width: 600px; color: var(--muted-ink); font-size: 1rem; line-height: 1.8; opacity: 1; }
.editorial-eyebrow { display: inline-block; color: #536c53; font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.editorial .filter-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; margin: 1.4rem 0 2rem; }
.editorial .filter-pill { font: 600 .85rem 'Raleway', sans-serif; color: #395747; border: 1px solid #cfdbcb; background: transparent; padding: .65rem 1rem; min-height: 44px; border-radius: 30px; cursor: pointer; transition: background 160ms, color 160ms; }
.editorial .filter-pill:hover { background: #e6ecdf; }
.editorial .filter-pill.active { background: #284e3e; color: #fff; border-color: #284e3e; box-shadow: none; }
.editorial .blog-search-wrap { max-width: 550px; margin: 0; }
.editorial .blog-search { background: #fffdf7; border: 1px solid #c9d5c3; border-radius: 14px; color: var(--ink); min-height: 54px; font-size: .95rem; }
.editorial .blog-search::placeholder { color: #647165; opacity: 1; }
.editorial .blog-search-icon { color: #647165; }
.editorial .blog-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem; }
.editorial .blog-card { padding: 1.8rem; border: 1px solid #dadfd2 !important; background: #fffdf7; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 22px; box-shadow: 0 4px 15px rgba(41,62,45,.035); min-height: 270px; transition: transform 180ms, border-color 180ms, box-shadow 180ms; }
.editorial .blog-card::before { display: none; }
.editorial .blog-card:hover { transform: translateY(-4px); border-color: #7e9980 !important; background: #fffef9; box-shadow: 0 14px 32px rgba(41,62,45,.1); }
.editorial .blog-card-tag { background: #e7eee0; color: #3f6648; padding: .3rem .65rem; border-radius: 30px; align-self: flex-start; font-size: .65rem; font-weight: 700; letter-spacing: .07em; }
.editorial .blog-card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.55rem; font-weight: 500; line-height: 1.35; color: var(--ink); margin-top: .75rem; }
.editorial .blog-card-desc { color: var(--muted-ink); opacity: 1; font-size: .9rem; line-height: 1.75; margin-top: .65rem; }
.editorial .blog-card-meta { color: #61705e; opacity: 1; padding-top: 1rem; margin-top: auto; border-top: 1px solid #e5e6dc; font-size: .75rem; }
.editorial .featured-card { grid-column: 1 / -1; background: #274c3d; padding: 2.2rem 14rem 2.2rem 2.2rem; min-height: 255px; position: relative; }
.editorial .featured-card::after { content: ''; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%) rotate(5deg); width: 155px; height: 175px; background: url('/assets/postcard-frog-parliament.png') center / contain no-repeat; pointer-events: none; }
.editorial .featured-card:hover { background: #315a47; }
.editorial .featured-card .blog-card-title { color: #fff7e8; font-size: 2rem; }
.editorial .featured-card .blog-card-desc, .editorial .featured-card .blog-card-meta { color: #e3eadb; }
.editorial .featured-card .blog-card-meta { border-color: #54715b; }
.editorial .featured-badge { color: #f0d8aa; background: transparent; }
.editorial .blog-card.hidden, .editorial .resource-card.hidden { display: none; }
.editorial .filter-empty { padding: 2rem; text-align: center; border: 1px dashed #b9c8b2; border-radius: 18px; color: #52655a; }
.editorial .filter-empty[hidden] { display: none; }

/* The article's existing sections keep their content and get one reading theme. */
.editorial .article-container { width: calc(100% - 48px); max-width: 970px; margin: 100px auto 48px; padding: 52px 64px 32px; background: var(--paper); border: 1px solid #e2e1d5; border-radius: 28px; box-shadow: 0 18px 65px rgba(35,61,39,.055); overflow: visible; }
.editorial .article-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(2rem, 4.4vw, 3.45rem); line-height: 1.16; letter-spacing: -.035em; font-weight: 500; color: var(--ink); margin: 1rem 0 1.5rem; }
.editorial .article-container :is(p,li,span,td,th,h2,h3,h4,strong,em) { color: var(--ink) !important; }
.editorial .article-container p, .editorial .article-container li { opacity: 1; }
.editorial .article-container a { color: var(--link-ink) !important; text-underline-offset: 4px; text-decoration-color: #90ad8e !important; }
.editorial .article-container a:hover { text-decoration: underline; }
.editorial .article-meta { border-bottom: 1px solid #dedfd3; padding-bottom: 1.5rem; margin-bottom: 2rem; color: var(--muted-ink); opacity: 1; }
.editorial .article-meta .author-info { color: var(--muted-ink); opacity: 1; }
.editorial .article-container .article-tag { background: #e4eddd; color: #3b6044 !important; padding: .45rem .75rem; border-radius: 30px; }
.editorial .article-body { max-width: 700px; margin: 0 auto; }
.editorial .article-body p, .editorial .article-body li { font-size: 1.025rem; line-height: 1.9; }
.editorial .article-body > p:first-child { font-size: 1.15rem; line-height: 1.85; }
.editorial .article-body h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.8rem; line-height: 1.3; margin: 2.6rem 0 1.15rem; font-weight: 500; }
.editorial .article-body h3 { margin-top: 1.6rem; line-height: 1.45; }
.editorial .article-body :is(ul,ol) { padding-left: 1.35rem; }
.editorial .article-container :is(.highlight-box,.caution-box,.takeaway-card,.stat-callout,.faq-item) { background: #eaf0e2; border-color: #bcccaf; border-radius: 16px; padding: 1.4rem; }
.editorial .article-container .caution-box { background: #f3e9d7; border-color: #d3b88c; }
.editorial .section-divider::before { background: #d7dfce; }
.editorial .section-divider .divider-icon { background: var(--paper); }
.editorial .pull-quote { padding: 2rem; background: #f0eadb; color: var(--ink); border-radius: 20px; }
.editorial .pull-quote p { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; }
.editorial .article-cta { --ink: #fff7e8; --link-ink: #fff7e8; background: #284e3f; border-radius: 22px; padding: 2rem; }
.editorial .article-container .cta-button { color: #234336 !important; background: #f3dfb9; border-radius: 30px; min-height: 44px; }
.editorial .article-container :is(table,.comparison-table) { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.editorial .article-container :is(th,td) { border-color: #d3decb; min-width: 100px; padding: .8rem; }
.editorial .article-container th { background: #e6eddf; }
.editorial .article-container tr:nth-child(even) { background: #f0f1e7; }
.editorial .article-container .carousel-card { background: #eef1e5; border-color: #d7dfcc; box-shadow: none; }
.editorial .article-footer, .editorial .blog-footer, .editorial .resources-footer { color: var(--muted-ink); border-color: #d7dfce; opacity: 1; }
.editorial .blog-footer a, .editorial .blog-footer p, .editorial .resources-footer a, .editorial .resources-footer p { color: #52655a; opacity: 1; }
.editorial .reading-progress { background: #dcb574; height: 3px; }
.editorial .article-breadcrumb { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .8rem; margin-bottom: 1.8rem; }
.editorial .article-toc { background: #eaf0e2; padding: 1rem 1.25rem; border: 1px solid #d5dfca; border-radius: 16px; margin: 0 0 2rem; }
.editorial .article-toc summary { cursor: pointer; font-weight: 700; padding: .2rem 0; }
.editorial .article-toc ol { margin: 1rem 0 .25rem; }
.editorial .article-toc li { margin-bottom: .65rem; font-size: .9rem; line-height: 1.55; }

/* Printable covers stay readable, with consistent controls underneath. */
.editorial .resources-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.3rem; }
.editorial .resources-page { display: block; text-align: left; position: static; z-index: auto; }
.editorial .resources-header { margin-left: 0; margin-right: 0; }
.editorial .resources-grid { width: 100%; max-width: none; }
.editorial .resource-card { background: #fffdf7; border: 1px solid #d9dfd0; border-radius: 22px; box-shadow: 0 4px 15px rgba(41,62,45,.035); overflow: hidden; transition: transform 180ms, box-shadow 180ms; }
.editorial .resource-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(41,62,45,.1); }
.editorial .resource-card-preview { width: 100%; height: 275px; object-fit: contain; background: #e9eddf; padding: 1.3rem; border-bottom: 1px solid #e2e5d9; }
.editorial .resource-card:nth-child(2n) .resource-card-preview { background: #e8e4d9; }
.editorial .resource-card-body { padding: 1.5rem; }
.editorial .resource-card-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; line-height: 1.35; color: var(--ink); }
.editorial .resource-card-desc { color: var(--muted-ink); opacity: 1; font-size: .88rem; line-height: 1.75; }
.editorial .resource-card-tag { color: #456344; background: #e5eddc; border-radius: 30px; padding: .3rem .6rem; }
.editorial .resource-btn-row { flex-wrap: wrap; gap: .5rem; }
.editorial .resource-download-btn, .editorial .email-modal button[type="submit"], .editorial .download-now-btn { background: #2e5b44; color: #fff; box-shadow: none; border-radius: 30px; min-height: 44px; font-size: .8rem; }
.editorial .resource-download-btn:hover, .editorial .email-modal button[type="submit"]:hover { background: #214833; box-shadow: 0 4px 14px #25453022; }
.editorial .resource-preview-btn { background: transparent; color: #31543f; border: 1px solid #b8c9ae; border-radius: 30px; min-height: 44px; font-size: .8rem; }
.editorial .resource-preview-btn:hover { background: #e7eedd; color: #214833; }
.editorial .preview-modal, .editorial .email-modal { color: var(--ink); background: var(--paper); border: 1px solid #dce2d1; border-radius: 24px; box-shadow: 0 24px 75px #142b3266; }
.editorial .preview-modal h3, .editorial .email-modal h3 { color: var(--ink); font-family: 'Playfair Display', Georgia, serif; }
.editorial .preview-modal p, .editorial .email-modal p { color: var(--muted-ink) !important; opacity: 1 !important; }
.editorial .preview-modal-overlay, .editorial .email-modal-overlay { z-index: 2000; }
.editorial .preview-pages img { aspect-ratio: auto 9 / 16; background: #e9eddf; flex-shrink: 0; }
.editorial .preview-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.editorial .preview-pages { min-height: 0; }
.editorial .preview-modal h3, .editorial .email-modal h3 { padding-right: 2.4rem; text-align: left; line-height: 1.4; }
.editorial .preview-modal > p, .editorial .preview-modal h3 { flex-shrink: 0; }
.editorial .email-modal { max-height: calc(100dvh - 2rem); overflow-y: auto; }
.editorial .preview-modal-close, .editorial .email-modal-close { background: #e3ebdc; color: #254632; width: 44px; height: 44px; border-radius: 12px; opacity: 1; }
.editorial .email-modal input[type="email"] { background: #fffef8; border-color: #bbcbb1; color: var(--ink); min-height: 48px; font-size: 1rem; }
.editorial .email-modal input[type="email"]::placeholder { color: #61705e; opacity: 1; }
.editorial .email-modal input[type="email"]:focus { background: #fff; border-color: #315b42; }
.editorial .library-note { font-size: .8rem; color: #66745e; margin: -1rem 0 2rem; line-height: 1.6; }
@media (max-width: 1000px) { .editorial .resources-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 768px) {
    .editorial .blog-container, .editorial .resources-page { padding: 90px 20px 32px; }
    .editorial .blog-cards { grid-template-columns: 1fr; }
    .editorial .blog-card { min-height: 0; padding: 1.5rem; }
    .editorial .blog-card-title { font-size: 1.4rem; }
    .editorial .featured-card { padding: 1.7rem; }
    .editorial .featured-card::after { position: static; display: block; width: 100px; height: 100px; transform: rotate(5deg); margin: 1rem auto 0; }
    .editorial .featured-card .blog-card-title { font-size: 1.8rem; }
    .editorial .article-container { width: 100%; border-radius: 0; padding: 32px 22px; margin: 58px auto 0; border: none; box-shadow: none; }
    .editorial .article-body p, .editorial .article-body li { font-size: 1rem; line-height: 1.85; }
    .editorial .article-body h2 { font-size: 1.55rem; }
    .editorial .article-body > p:first-child { font-size: 1.1rem; }
    .editorial .article-body > div[style*="display: flex"] { flex-wrap: wrap; }
    .editorial .article-body > div[style*="display: flex"] > div { min-width: 0; flex: 1 1 180px; }
}
@media (max-width: 580px) {
    .editorial .resources-grid { grid-template-columns: 1fr; }
    .editorial .resource-card-preview { height: 280px; }
    .editorial .filter-pill { font-size: .78rem; padding: .6rem .8rem; }
}
@media (prefers-reduced-motion: no-preference) { html:has(body.editorial) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
    .editorial *, .editorial *::before, .editorial *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}