/*
 Theme Name:   Stone Soup 2026
 Theme URI:    https://stonesoup.com
 Description:  GeneratePress child theme for StoneSoup.com — v4.0 approved
               palette, ADHD/autism accessible design, classical typography.
               Typographically beautiful reading experience for stories, poems, and art.
 Author:       Children's Art Foundation
 Author URI:   https://stonesoup.com
 Template:     generatepress
 Version:      5.10.69
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  stonesoup
*/


/* ==========================================================================
   1. ROOT VARIABLES — ORPHIST / DELAUNAY COLOR PALETTE
   ========================================================================== */

:root {
    /* ── Brand Accent Colors ──
       The unified red was shifted in v5.7.11 from vermillion (#D94F30)
       to Pantone 187 (#AF1E2D). The token name is kept for stability;
       the value tracks the current brand red (which now reads "red"
       rather than "orange" to most viewers, per Chinese-red research). */
    --stonesoup-teal: #008B8B;
    --stonesoup-vermillion: #AF1E2D;
    --stonesoup-deep-red:   #7B1424;     /* darker tone for emphasis (featured entries) */

    /* ── Logotype Colors — SINGLE SOURCE OF TRUTH ──
       "Stone" and "Soup" always appear in these two colors.
       Change here → updates header, hover, and all CSS-based logotype uses.
       JS-generated logotypes (PDF cover, newsletter) use hardcoded hex —
       search "LOGOTYPE" in sss-listing.js if these values change. */
    /* Logo variables removed in v5.6 — logotype now uses Orphist rainbow per-letter colors */
    --stonesoup-cobalt-blue: #1d3557;
    --stonesoup-ultramarine: #264653;
    --stonesoup-sunflower-yellow: #f4d35e;

    /* ── Content-Type Colors — Vivid Orphist/Delaunay (approved March 8) ──
       These are the body-text-safe AA-compliant values. For homepage display
       headings (large text, 3:1 threshold) we use the brighter spectrum below. */
    --stonesoup-color-story:     #c04a25;   /* vivid orange    ~5.1:1 */
    --stonesoup-color-poetry:    #2560a0;   /* clear blue      ~6.6:1 */
    --stonesoup-color-memoir:    #1a826a;   /* emerald green   ~4.9:1 */
    --stonesoup-color-art:       #5c3db8;   /* vivid purple    ~7.9:1 */
    --stonesoup-color-review:    #9a6b1e;   /* warm gold       ~4.8:1 */
    --stonesoup-color-editorial: #a03058;   /* deep rose       ~7.1:1 */
    --stonesoup-color-blog:      #a03058;   /* same as editorial */

    /* ── Orphist Spectrum — 9 spectral points, brighter Delaunay-spirit
       palette for homepage display headings. Used per-letter on the
       wordmark, the Contents heading, section headings, and contents-
       register links. These are tuned for AA-large (3:1) on white. */
    --orphist-1: #AF1E2D;   /* vermillion (Pantone 187, brand) */
    --orphist-2: #D9351A;   /* cadmium orange-red */
    --orphist-3: #C25E1C;   /* orange */
    --orphist-4: #BD7A1A;   /* saffron */
    --orphist-5: #009A6F;   /* emerald */
    --orphist-6: #008B8B;   /* teal */
    --orphist-7: #1E45CC;   /* cobalt */
    --orphist-8: #6B2DD2;   /* violet */
    --orphist-9: #D12B6E;   /* magenta-rose */

    /* ── Surface / Background Colors ── */
    --stonesoup-linen: #ede8df;          /* screen surface — the "desk" */
    --stonesoup-page: #ffffff;           /* page color — white */
    --stonesoup-cream: #fafaf8;
    --stonesoup-cream-light: #f5f5f2;
    --stonesoup-nav-crimson: #AF1E2D;   /* nav bar + footer — unified to brand red in v5.7.11 */
    --stonesoup-imprint-bg: #1a1612;     /* deep ink — imprint strip + colophon ground */
    --stonesoup-imprint-fg: #f4efe2;     /* paper-tinted text on imprint ground */
    --stonesoup-white: #ffffff;
    --stonesoup-page-bg: #fafaf8;
    --stonesoup-filter-tint: #f7f4ee;    /* vellum tint behind filters */

    /* ── Text Colors (WCAG AA compliant — all ≥4.5:1 on white) ── */
    --stonesoup-text-dark: #2a2520;      /* warm black — unified across site (~14:1) */
    --stonesoup-text-medium: #5a5148;    /* ~6.3:1 */
    --stonesoup-text-light: #736a5e;     /* ~4.7:1 — was #8a7e6e (3.76:1 FAIL) */
    --stonesoup-text-muted: #7a6e60;     /* ~4.6:1 — was #a89880 (2.93:1 FAIL) */
    --stonesoup-text-rule: #c4b5a0;      /* decorative only, not text */

    /* ── Accessibility ── */
    --stonesoup-focus-color: #008B8B;    /* teal — matches brand */
    --stonesoup-focus-ring: rgba(0, 139, 139, 0.4);

    /* ── Typography ── */
    --stonesoup-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --stonesoup-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --stonesoup-font-ui: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --stonesoup-font-reading: 'EB Garamond', 'Garamond', Georgia, serif;
    --stonesoup-font-reading-display: 'Cormorant Garamond', Georgia, serif;
    --stonesoup-font-curriculum: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --stonesoup-font-base: 18px;
    --stonesoup-line-height: 1.7;

    /* ── Paper-on-Linen Layout ──
       Page is a fixed 7.2in × 10.8in trim (6×9 +20%). Tschichold canon
       margins, scaled ×1.20 to match the trim. The page does not grow on
       large monitors — book stays a book. Narrow-viewport behavior
       (≤768px) overrides width to 95vw in §6c. */
    --stonesoup-page-width: 7.2in;
    --book-pad-head:        0.9in;
    --book-pad-fore-edge:   1.05in;
    --book-pad-foot:        1.2in;
    --book-pad-gutter:      0.75in;
    --stonesoup-page-margin-left: 10vw;
    --stonesoup-page-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.06);
    --stonesoup-content-max-width: 62rem;

    /* ── Spacing Scale ── */
    --stonesoup-space-xs: 0.5rem;
    --stonesoup-space-sm: 1rem;
    --stonesoup-space-md: 1.5rem;
    --stonesoup-space-lg: 2rem;
    --stonesoup-space-xl: 3rem;
    --stonesoup-space-2xl: 5rem;

    /* ── Interactive States ── */
    --stonesoup-teal-hover: #238b7e;       /* teal button/link hover */
    --stonesoup-teal-active: #007070;      /* teal button pressed */

    /* ── Borders ── */
    --stonesoup-border: #e8e4dc;           /* standard UI border */
    --stonesoup-border-medium: #d5cfc5;    /* softer border — inputs, filter buttons */
    /* Note: --stonesoup-text-rule (#c4b5a0) serves as a warm decorative border */

    /* ── UI Component Colors ── */
    --stonesoup-title-default: #1a1612;    /* listing item title, near-black */
    --stonesoup-danger-bg: #fdf2ee;        /* danger/remove hover background */
    --stonesoup-toast-bg: #1f2937;         /* toast/alert background */
    --stonesoup-selection-border: #e0dbd3; /* selection list item dividers */
    --stonesoup-warm-gray: #f0ece4;        /* overlay backgrounds, hover tints */
    --stonesoup-pill-text: #6b5e50;        /* curriculum pill text */
}


/* ==========================================================================
   2. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   3. GLOBAL RESETS & BASE TYPOGRAPHY
   ========================================================================== */

body {
    font-family: var(--stonesoup-font-body);
    font-size: var(--stonesoup-font-base);
    line-height: var(--stonesoup-line-height);
    color: var(--stonesoup-text-dark);
    background-color: var(--stonesoup-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*:focus-visible {
    outline: 3px solid var(--stonesoup-focus-color);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--stonesoup-font-display);
    line-height: 1.3;
    color: var(--stonesoup-text-dark);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 { font-size: 2.8rem; font-weight: 300; line-height: 1.15; }
h2 { font-size: 2.0rem; font-weight: 400; }
h3 { font-size: 1.5rem; font-weight: 400; font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.05em; }
h4 { font-size: 1.2rem; font-weight: 600; }
h5 { font-size: 1.0rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
h6 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }

p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 1.5em;
    hyphens: none;
    word-break: normal;
}

p:first-child {
    text-indent: 0;
}

a {
    color: var(--stonesoup-vermillion);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--stonesoup-cobalt-blue);
}

::selection {
    background: var(--stonesoup-sunflower-yellow);
    color: var(--stonesoup-text-dark);
}

img {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   4. SKIP LINK
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: 6px;
    background: var(--stonesoup-cobalt-blue);
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    z-index: 10000;
    border-radius: 0 0 4px 4px;
    font-family: var(--stonesoup-font-ui);
    font-weight: 600;
    font-size: 14px;
}

.skip-link:focus {
    top: 0;
    color: white;
}


/* ==========================================================================
   5. UTILITY BAR
   ========================================================================== */

/* ── Utility bar: dark background, matching banner samples ── */
.stonesoup-utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 2rem;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--stonesoup-text-dark);
}

.stonesoup-utility-nav {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.stonesoup-utility-nav a {
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.2s ease;
}

.stonesoup-utility-nav a:hover,
.stonesoup-utility-nav a:focus {
    color: #fff;
}

.stonesoup-utility-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.stonesoup-btn-member {
    display: inline-block;
    padding: 5px 16px;
    background: var(--stonesoup-vermillion);
    color: white;
    border: none;
    border-radius: 4px;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.stonesoup-btn-member:hover {
    background: var(--stonesoup-vermillion, #D94F30);
    color: white;
}

.stonesoup-btn-outline {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.2s ease;
}

.stonesoup-btn-outline:hover {
    border-color: rgba(255,255,255,0.7);
    color: #fff;
}


/* ==========================================================================
   6. MAIN HEADER — Stone Soup masthead (wordmark + tagline + since)
   ========================================================================== */

.stonesoup-header-main {
    background: transparent;
    text-align: center;
    padding: 0 0 2.5rem;
    border-bottom: 1px solid var(--stonesoup-text-light);
}

/* Title + tagline wrapper: centered, intrinsic width */
.stonesoup-banner-block {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

/* High-specificity selectors to beat GP's default h1 styling. */
.stonesoup-header-main .stonesoup-site-title,
h1.stonesoup-site-title {
    font-family: var(--stonesoup-font-display);
    font-size: 3.4rem;
    font-weight: 600;
    margin: 0;
    padding-left: 0.22em; /* optical centering — match the tracked-caps offset */
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.stonesoup-header-main .stonesoup-site-title a,
h1.stonesoup-site-title a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.stonesoup-header-main .stonesoup-tagline {
    font-family: var(--stonesoup-font-reading);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--stonesoup-text-dark);
    letter-spacing: 0;
    margin: 1rem 0 0;
    padding: 0;
}

.stonesoup-header-main .stonesoup-since {
    display: block;
    font-family: var(--stonesoup-font-reading);
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
    color: var(--stonesoup-text-medium);
    letter-spacing: 0;
    text-transform: none;
    margin: 0.4rem 0 0;
}

.spec-1 { color: var(--orphist-1); }
.spec-2 { color: var(--orphist-2); }
.spec-3 { color: var(--orphist-3); }
.spec-4 { color: var(--orphist-4); }
.spec-5 { color: var(--orphist-5); }
.spec-6 { color: var(--orphist-6); }
.spec-7 { color: var(--orphist-7); }
.spec-8 { color: var(--orphist-8); }
.spec-9 { color: var(--orphist-9); }


/* ==========================================================================
   6a. IMPRINT STRIP — deep-ink top band (publisher utility + Member Access)
   ========================================================================== */

.stonesoup-imprint {
    background: var(--stonesoup-imprint-bg);
    color: rgba(244, 239, 226, 0.9);
    font-family: var(--stonesoup-font-ui);
}
.stonesoup-imprint-row {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0.95rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.stonesoup-imprint-left,
.stonesoup-imprint-right {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}
.stonesoup-imprint-publisher {
    font-family: var(--stonesoup-font-display);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--stonesoup-imprint-fg);
    margin-right: 0.4rem;
}
.stonesoup-imprint-left a,
.stonesoup-imprint-right a {
    color: rgba(244, 239, 226, 0.72);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.stonesoup-imprint-left a:hover,
.stonesoup-imprint-right a:hover,
.stonesoup-imprint-left a:focus,
.stonesoup-imprint-right a:focus {
    color: var(--stonesoup-imprint-fg);
    border-bottom-color: rgba(244, 239, 226, 0.5);
    outline: none;
}
.stonesoup-imprint-search::before {
    content: "⌕";
    margin-right: 0.35rem;
    font-size: 0.95rem;
    letter-spacing: 0;
}
.stonesoup-imprint-cta {
    font-family: var(--stonesoup-font-display) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: white !important;
    background: var(--stonesoup-vermillion);
    text-decoration: none;
    padding: 0.25rem 1.05rem !important;
    border-radius: 2px;
    border: 1px solid var(--stonesoup-vermillion);
    line-height: 1.35 !important;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.stonesoup-imprint-cta:hover,
.stonesoup-imprint-cta:focus {
    background: var(--stonesoup-deep-red) !important;
    border-color: var(--stonesoup-deep-red) !important;
    color: white !important;
}


/* ==========================================================================
   6b. ORPHIST SPECTRUM STRIPE — opening + closing rule
   ========================================================================== */

.stonesoup-spectrum {
    height: 6px;
    display: flex;
    width: 100%;
}
.stonesoup-spectrum span {
    flex: 1;
}
.stonesoup-spectrum span:nth-child(1) { background: var(--orphist-1); }
.stonesoup-spectrum span:nth-child(2) { background: var(--orphist-3); }
.stonesoup-spectrum span:nth-child(3) { background: var(--orphist-4); }
.stonesoup-spectrum span:nth-child(4) { background: var(--orphist-5); }
.stonesoup-spectrum span:nth-child(5) { background: var(--orphist-6); }
.stonesoup-spectrum span:nth-child(6) { background: var(--orphist-7); }
.stonesoup-spectrum span:nth-child(7) { background: var(--orphist-8); }
.stonesoup-spectrum span:nth-child(8) { background: var(--orphist-9); }


/* ==========================================================================
   6c. WHITE BOOK PAGE + HORIZONTAL CONTENTS REGISTER
       Home overrides .stone-soup-index to a vertical column in
       stone-soup-home.css.
   ========================================================================== */

.stone-soup-page {
    background: var(--stonesoup-page);
    width: var(--stonesoup-page-width);
    margin: 1.6rem auto;
    padding: var(--book-pad-head) var(--book-pad-fore-edge) var(--book-pad-foot) var(--book-pad-gutter);
    box-shadow: var(--stonesoup-page-shadow);
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

/* Below the page's own trim width, switch to near-edge-to-edge so phones
   and narrow tablets aren't cropped by the fixed 7.2in width. Aligned to
   the existing 768px breakpoint already in use across the theme. */
@media (max-width: 768px) {
    .stone-soup-page {
        width: 95vw;
        padding: 1.8rem 1.4rem 2.5rem 1.2rem;
    }
}

/* Home overrides this to a vertical column in stone-soup-home.css. */
.stone-soup-index {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.55rem 1.4rem;
    font-family: var(--stonesoup-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--stonesoup-text-dark);
    margin: 1.5rem 0 2.5rem;
    padding: 0 0 1.5rem;
    border-bottom: 1px solid var(--stonesoup-text-light);
}
.stone-soup-index a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
    padding: 0.1rem 0;
}
.stone-soup-index a:hover,
.stone-soup-index a:focus {
    opacity: 0.7;
    outline: none;
}
.stone-soup-index a[href*="/publishing-and-contests/"] { color: var(--stonesoup-vermillion); }
.stone-soup-index a[href*="/stories/"]                 { color: var(--stonesoup-color-story); }
.stone-soup-index a[href*="/poems/"]                   { color: var(--stonesoup-color-poetry); }
.stone-soup-index a[href*="/memoirs/"]                 { color: var(--stonesoup-color-memoir); }
.stone-soup-index a[href*="/art/"]                     { color: var(--stonesoup-color-art); }
.stone-soup-index a[href*="/children-and-conflict/"]   { color: var(--stonesoup-color-editorial); }
.stone-soup-index a[href*="/for-the-creative-writer/"] { color: var(--stonesoup-color-review); }
.stone-soup-index a[href*="/about/"]                   { color: var(--stonesoup-text-medium); }

.stone-soup-index a.current {
    font-family: var(--stonesoup-font-display);
    font-style: italic;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 1.1rem;
    cursor: default;
}


/* ==========================================================================
   6d. COLOPHON — deep-ink footer band
   ========================================================================== */

.stonesoup-colophon {
    background: var(--stonesoup-imprint-bg);
    color: rgba(244, 239, 226, 0.78);
    font-family: var(--stonesoup-font-ui);
    font-size: 0.78rem;
    text-align: center;
    padding: 0.95rem 1.5rem 1rem;
    line-height: 1.6;
}
.stonesoup-colophon p {
    margin: 0;
}
.stonesoup-colophon-credits {
    color: rgba(244, 239, 226, 0.78);
}
.stonesoup-colophon-pipe {
    color: rgba(244, 239, 226, 0.45);
    margin: 0 0.7rem;
}
.stonesoup-colophon a {
    color: rgba(244, 239, 226, 0.78);
    text-decoration: none;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.stonesoup-colophon a:hover,
.stonesoup-colophon a:focus {
    color: var(--stonesoup-imprint-fg);
    border-bottom-color: rgba(244, 239, 226, 0.5);
    outline: none;
}


/* ==========================================================================
   6b. ORPHIST COLOR STRIPE
   ========================================================================== */

.stonesoup-orphist-stripe {
    display: flex;
    height: 5px;
}

.stonesoup-orphist-stripe span {
    flex: 1;
}

.stonesoup-orphist-stripe span:nth-child(1) { background: var(--stonesoup-color-story); }
.stonesoup-orphist-stripe span:nth-child(2) { background: var(--stonesoup-color-poetry); }
.stonesoup-orphist-stripe span:nth-child(3) { background: var(--stonesoup-color-art); }
.stonesoup-orphist-stripe span:nth-child(4) { background: var(--stonesoup-color-review); }
.stonesoup-orphist-stripe span:nth-child(5) { background: var(--stonesoup-color-memoir); }
.stonesoup-orphist-stripe span:nth-child(6) { background: var(--stonesoup-color-editorial); }


/* ==========================================================================
   7. MAIN NAVIGATION
   ========================================================================== */

/* v5.7.11 — fine-press "ruled slug": hairlines top and bottom frame the
   colour band, type sits close to the rules, padding stays tight. */
.stonesoup-main-nav {
    background-color: var(--stonesoup-nav-crimson);
    padding: 0;
    border-top: 1px solid var(--stonesoup-text-dark);
    border-bottom: 1px solid var(--stonesoup-text-dark);
}

.stonesoup-main-nav-inner {
    margin: 0 auto;
}

.stonesoup-main-menu {
    display: flex;
    list-style: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 0;
}

.stonesoup-main-menu > li {
    position: relative;
}

.stonesoup-main-menu > li > a {
    display: block;
    padding: 5px 22px;
    color: #fafaf8;
    text-decoration: none;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    transition: background 0.2s, color 0.2s;
}

.stonesoup-main-menu > li > a:hover,
.stonesoup-main-menu > li > a:focus {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.stonesoup-main-menu > li.current-menu-item > a,
.stonesoup-main-menu > li.current-menu-parent > a,
.stonesoup-main-menu > li.current > a {
    background: rgba(255,255,255,0.08);
    color: #fff;
}


.stonesoup-main-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background-color: white;
    border: 1px solid #ddd;
    border-top: 3px solid var(--stonesoup-teal);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
}

.stonesoup-main-menu > li:hover > .sub-menu,
.stonesoup-main-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stonesoup-main-menu .sub-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--stonesoup-text-dark);
    text-decoration: none;
    font-family: var(--stonesoup-font-ui);
    font-size: 14px;
    transition: background-color 0.15s ease, padding-left 0.15s ease;
}

.stonesoup-main-menu .sub-menu a:hover,
.stonesoup-main-menu .sub-menu a:focus {
    background-color: var(--stonesoup-cream-light);
    padding-left: 28px;
}


/* ==========================================================================
   8. GP INTEGRATION — working WITH GeneratePress hooks
      Layout is controlled by option_generate_settings filter in functions.php.
      These CSS rules handle remaining GP container constraints.
      No !important needed — we're cooperating, not fighting.
   ========================================================================== */

/* GP resets for header — GP adds default h1/p sizing and spacing */
#masthead h1,
#masthead p {
    margin: 0;
    padding: 0;
}

/* GP wraps everything in #page.grid-container — allow full width */
#page.grid-container,
.site.grid-container {
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* GP's flexbox structure prevents margin: 0 auto centering on .sss-tint-block.
   GP sets display: flex on .site-content#content (confirmed via inspector March 24).
   Must use !important to beat GP's stylesheet which loads after ours. */
.site.grid-container,
#page,
#content,
.site-content,
.inside-article,
.entry-content {
    display: block !important;
}

/* Our custom header and main content must stretch full width */
#masthead,
#main-content,
.stonesoup-hero,
.stonesoup-main-nav {
    width: 100%;
}

/* Content area — remove GP's default padding/constraints */
.site-content .inside-article {
    max-width: none;
    padding: 0;
}

/* ── Landing pages — full-bleed hero, no paper-on-linen frame ──
   Subscribe, Submit, Donate: hero fills the viewport.
   Body class 'landing-page' added via stonesoup_body_classes(). */
body.landing-page .sss-tint-block {
    width: 100%;
    margin-left: 0;
    padding: 0;
    box-shadow: none;
}

/* ── When the global .stone-soup-page wrapper already provides the
   paper-on-linen frame, the listing's own .sss-tint-block / .sss-main
   / .sss-container must defer their page chrome — otherwise the page
   renders nested (page-within-page, offset). ── */
.stone-soup-page .sss-container,
.stone-soup-page .sss-main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
.stone-soup-page .sss-tint-block {
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    min-height: 0;
}
body.landing-page .stonesoup-page {
    max-width: none;
}
body.landing-page .stonesoup-page-content {
    max-width: none;
}

/* GP's entry content — allow full width for page templates */
.no-sidebar .entry-content {
    max-width: none;
}

/* Override GP default paragraph spacing — classical indent, no gaps */
.entry-content p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 1.5em;
}

.entry-content > p:first-of-type,
.entry-content p:first-child {
    text-indent: 0;
}

.entry-content blockquote p {
    text-indent: 0;
    margin-bottom: 0.8em;
}

.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Images in GP entry content — constrain to container */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

.entry-content .wp-caption,
.entry-content figure {
    max-width: 100%;
    overflow: hidden;
}

/* Safety: hide any GP default nav that might slip through */
#site-navigation {
    display: none;
}


/* ==========================================================================
   9. SHARED COMPONENTS — Badges, tags, breadcrumbs
   ========================================================================== */

/* Content type badge */
.stonesoup-type-badge {
    display: inline-block;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--stonesoup-white);
    background: var(--stonesoup-text-light);
    padding: 0.2em 0.8em;
    border-radius: 3px;
    margin-bottom: var(--stonesoup-space-xs);
}


/* Age badge */
.stonesoup-age-badge {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85em;
    color: var(--stonesoup-text-light);
    font-weight: 500;
}

/* Taxonomy tags */
.stonesoup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--stonesoup-space-sm);
}

.stonesoup-tag {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.25em 0.75em;
    border: 1px solid #ddd;
    border-radius: 100px;
    color: var(--stonesoup-text-medium);
    text-decoration: none;
    transition: all 0.2s ease;
}

.stonesoup-tag:hover {
    background: var(--stonesoup-ultramarine);
    color: white;
    border-color: var(--stonesoup-ultramarine);
}


/* ==========================================================================
   10. HOMEPAGE — Cards, grid, navigation blocks
   ========================================================================== */


/* Content cards */
.stonesoup-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--stonesoup-space-lg);
}

.stonesoup-card-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--stonesoup-space-md);
}

.stonesoup-card {
    background: var(--stonesoup-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.stonesoup-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}


.stonesoup-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--stonesoup-cream-light);
}

.stonesoup-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.stonesoup-card:hover .stonesoup-card-image img {
    transform: scale(1.05);
}

.stonesoup-card-body {
    padding: var(--stonesoup-space-md);
}

.stonesoup-card-title {
    font-family: var(--stonesoup-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0.3em 0;
}

.stonesoup-card-title a {
    color: var(--stonesoup-text-dark);
    text-decoration: none;
}

.stonesoup-card-title a:hover {
    color: var(--stonesoup-vermillion);
}

.stonesoup-card-byline {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.8rem;
    color: var(--stonesoup-text-light);
    margin-bottom: 0.5em;
}


/* ==========================================================================
   12. SINGLE POST — The Elegant Reading Page
   The reading experience draws on 17th-18th century printing conventions:
   classical page proportions, generous margins, justified text with
   hyphenation, paragraph indentation, old-style numerals, ligatures,
   and typographic ornaments. The Orphist header stays; the content
   area transforms into a quiet, breathing reading space.
   ========================================================================== */

/* ── The reading page: text on white paper, linen surface behind ── */

/* Paper-on-linen frame — .sss-tint-block in sss-listing.css handles the page:
   width: 58vw, margin-left: 10vw, padding: 4rem 7rem 6rem 5rem.
   Restored March 24, 2026 after failed fit-content experiment. */

.stonesoup-article {
    /* Bringhurst ideal measure: 66 characters per line.
       ch units scale with font size, so zooming keeps the measure constant. */
    max-width: var(--stonesoup-content-max-width, 62rem);
    margin: 0;
    padding: 0;
    font-family: var(--stonesoup-font-reading);
    font-size: 1.25rem;    /* ~20px — matches New Yorker equiv for EB Garamond */
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}





/* ── Article header ── */

.stonesoup-article-header {
    text-align: center;
    padding: 0;
    max-width: none;
    margin: 0 0 2.5em;     /* E spacing: generous pause before text begins */
}

/* Type badge — restrained italic label in the reading context */
.stonesoup-article .stonesoup-type-badge {
    background: none;
    color: #736a5e;
    font-family: var(--stonesoup-font-reading);
    font-style: italic;
    font-weight: 400;
    font-size: 0.88em;     /* em — scales with article base */
    text-transform: none;
    letter-spacing: 0.05em;
    padding: 0;
    margin-bottom: 0.2em;     /* E spacing: tight to title */
    display: block;
    border-radius: 0;
}

/* Title — Cormorant display, light weight, carved not typed */
.stonesoup-article-title {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 300;
    font-size: 2.2em;      /* em — scales with article base (1.25rem=20px × 2.2 = ~44px) */
    line-height: 1.12;
    color: var(--stonesoup-cobalt-blue);   /* alive default — overridden by genre colors below */
    letter-spacing: 0.01em;
    margin: 0;             /* E spacing: no gap — ::after rule provides transition */
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* Title colors — Orphist palette by content type (18th-century second-color elegance) */
.content-type-story   .stonesoup-article-title { color: var(--stonesoup-color-story); }
.content-type-poetry  .stonesoup-article-title { color: var(--stonesoup-color-poetry); }
.content-type-memoir  .stonesoup-article-title { color: var(--stonesoup-color-memoir); }
.content-type-review  .stonesoup-article-title { color: var(--stonesoup-color-review); }
.content-type-art     .stonesoup-article-title { color: var(--stonesoup-color-art); }
.content-type-blog    .stonesoup-article-title { color: var(--stonesoup-color-editorial); }

.stonesoup-article-title::after {
    content: '';
    display: block;
    width: 3em;
    height: 0.5px;
    background: #c4b5a0;
    margin: 0.5em auto 0.45em;  /* E spacing: rule close to title, pulls toward byline */
}

/* Byline — small caps, letterspaced */
.stonesoup-article-byline {
    font-family: var(--stonesoup-font-reading);
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 0.9em;      /* em — scales with article base */
    letter-spacing: 0.12em;
    font-weight: 400;
    color: #5a5148;
    margin-bottom: 0.2em;      /* E spacing: tight to PDF link */
}

/* Location — italic, understated */
.stonesoup-article-location {
    font-family: var(--stonesoup-font-reading);
    font-style: italic;
    font-size: 0.82em;     /* em — scales with article base */
    color: #736a5e;
    letter-spacing: 0.03em;
    margin-bottom: 0;
}





/* ── Featured image ── */

.stonesoup-article-figure {
    max-width: 100%;
    margin: 2.5rem 0;
    padding: 0;
}

.stonesoup-article-figure img {
    width: 100%;
    height: auto;
    max-height: 28rem;
    object-fit: cover;
    display: block;
}

.stonesoup-article-figure figcaption {
    font-family: var(--stonesoup-font-reading);
    font-size: 0.82em;     /* em — scales with article base */
    color: #736a5e;
    text-align: center;
    margin-top: 0.8em;
    font-style: italic;
}


/* ==========================================================================
   13. ARTICLE CONTENT — Classical Typography
   Ragged right (not justified). First-line indent, not paragraph spacing.
   Old-style numerals. Ligatures. ~66 characters per line. Leading of 1.82.
   Online justification creates rivers and distracting patterns that fine
   press eliminates through careful manual kerning. Without that control,
   publishers who care about type (New Yorker, Atlantic) leave text ragged
   right on their websites. We follow suit — for screen and PDF alike.
   ========================================================================== */

.stonesoup-article-content {
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: 1em;        /* inherits .stonesoup-article's 1.25rem */
    line-height: 1.82;     /* generous leading — EB Garamond's tall ascenders need air */
    color: var(--stonesoup-text-dark);
    text-align: left;      /* Ragged right — see section comment above */
    hanging-punctuation: first last;
}

.stonesoup-article-content p {
    text-indent: 1.5em;
    margin-bottom: 0;
}

.stonesoup-article-content > p:first-of-type {
    text-indent: 0;
}

/* Blockquotes — indented, thin left rule, italic */
.stonesoup-article-content blockquote {
    margin: 1.8em 0 1.8em 2em;
    padding-left: 1.2em;
    border-left: 0.5px solid #c4b5a0;
    font-size: 0.94em;     /* em — scales with article base */
    color: #4a4540;
    font-style: italic;
    background: none;
    border-radius: 0;
}

.stonesoup-article-content blockquote p {
    text-indent: 0;
    margin-bottom: 0.8em;
}

.stonesoup-article-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Headings within content */
.stonesoup-article-content h2 {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.2em;      /* em — scales with article base */
    color: var(--stonesoup-text-dark);
    margin-top: 2.5em;
    margin-bottom: 0.8em;
    text-align: center;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.08em;
}

.stonesoup-article-content h3 {
    font-family: var(--stonesoup-font-reading);
    font-weight: 500;
    font-size: 1.05em;     /* em — scales with article base */
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-style: italic;
}

/* Emphasis — italic for emphasis, restrained semi-bold */
.stonesoup-article-content strong {
    font-weight: 500;
}

/* Links within content */
.stonesoup-article-content a {
    color: #6b4c3b;
    text-decoration: none;
}

.stonesoup-article-content a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.15em;
}

/* ── Hero illustration: single content image extracted to between byline and text ──
   WordPress figures often have inline style="width: Xpx" and class="alignright".
   We must beat both with !important to center the image like a book plate. */
.stonesoup-article-hero-illustration {
    text-align: center;
    margin: 4em 0;             /* generous breathing room above and below */
}
.stonesoup-article-hero-illustration img {
    max-width: 80% !important;
    max-height: 28rem;
    height: auto !important;
    width: auto !important;    /* beats HTML width="400" attribute */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.stonesoup-article-hero-illustration figure,
.stonesoup-article-hero-illustration .wp-caption {
    float: none !important;    /* beats .alignright */
    width: auto !important;    /* beats inline style="width: 390px" */
    max-width: 80%;
    margin: 0 auto;            /* center the figure */
    display: block;
}
.stonesoup-article-hero-illustration figcaption,
.stonesoup-article-hero-illustration .wp-caption-text {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 0.82em;     /* em — scales with article base */
    color: #736a5e;
    text-align: center;
    margin-top: 0.5em;
}


/* ==========================================================================
   CONCEPT C — Tipped-in author portrait plate + inline illustration
   Locked design at theme/samples/single-post-portrait-concept-C-rev-2.html.
   The portrait plate sits between the article header and the body text;
   the illustration is injected after the first paragraph of the body via
   single.php logic that reads _stonesoup_illustration_id post-meta.
   ========================================================================== */

/* Portrait plate — between header and body. Hairline frame + 14px white inner
   mat to mimic a tipped-in photograph in a limited-edition press book. */
.stonesoup-portrait-plate {
    margin: 3.5em auto 3.5em;
    text-align: center;
    width: 62%;
    max-width: 26rem;
}
.stonesoup-portrait-plate__frame {
    padding: 14px;
    background: #fff;
    border: 0.5px solid #c4b5a0;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.03),
        0 6px 20px rgba(0,0,0,0.04);
    display: inline-block;
    width: 100%;
}
.stonesoup-portrait-plate__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
.stonesoup-portrait-plate__caption {
    font-family: 'EB Garamond', Georgia, serif;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.12em;
    font-size: 0.78em;     /* em — scales with article base */
    color: #5a5148;
    margin: 1em 0 0;
}

/* Inline illustration — injected after the first paragraph of the body.
   Centered, no frame, larger than the portrait plate, optional italic
   caption. Reads as a fine-press book plate inside the prose. */
.stonesoup-inline-illustration {
    text-align: center;
    margin: 3em auto;
    width: 84%;
    max-width: 36rem;
}
.stonesoup-inline-illustration__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.stonesoup-inline-illustration__caption {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 0.82em;     /* em — scales with article base */
    color: #736a5e;
    letter-spacing: 0.02em;
    margin: 1em 0 0;
    line-height: 1.4;
    text-indent: 0;
}

/* Images within content — centered like book plates, generous spacing.
   NUCLEAR FLOAT KILL: No element inside article content may float.
   This catches inline styles, classic editor, Gutenberg blocks, and
   any future WordPress alignment mechanism. */
.stonesoup-article-content img,
.stonesoup-article-content figure,
.stonesoup-article-content .wp-caption,
.stonesoup-article-content .wp-block-image,
.stonesoup-article-content [class*="align"] {
    float: none !important;    /* beats ALL inline styles and WP core */
    max-width: 100%;
    height: auto;
    display: block;
    margin: 4em auto !important; /* beats inline styles — generous breathing room around art */
    text-align: center;
    border-radius: 0;
}

.stonesoup-article-content figure,
.stonesoup-article-content .wp-caption {
    overflow: hidden;
}


/* ── End ornament — classical tailpiece ── */
/* Floral heart bracketed by em dashes, genre-colored.
   Only on story + memoir (prose genres). Poetry/art/review/blog get no tailpiece. */

.stonesoup-article-end {
    text-align: center;
    margin: 2.5em 0 2em;
    font-family: var(--stonesoup-font-reading, 'EB Garamond', Georgia, serif);
    font-size: 14pt;
    letter-spacing: 0.3em;
    color: var(--stonesoup-color-story, #c04a25);
}
.stonesoup-article-end::after {
    content: '\2014\00a0\2766\00a0\2014';  /* — ❦ — */
}
/* Genre-specific tailpiece colors */
.content-type-story   .stonesoup-article-end { color: var(--stonesoup-color-story); }
.content-type-memoir  .stonesoup-article-end { color: var(--stonesoup-color-memoir); }
/* Hide tailpiece on non-prose genres */
.content-type-poetry  .stonesoup-article-end,
.content-type-art     .stonesoup-article-end,
.content-type-review  .stonesoup-article-end,
.content-type-blog    .stonesoup-article-end { display: none; }


/* ── Tags in reading context ── */

.stonesoup-article .stonesoup-tags {
    justify-content: center;
    margin: 2rem 0;
    padding-top: 1.5rem;
    border-top: 0.5px solid #c4b5a0;
    gap: 8px;
}

.stonesoup-article .stonesoup-tag {
    font-family: var(--stonesoup-font-reading);
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    border-color: #c4b5a0;
    color: #736a5e;
    border-radius: 0;
    padding: 0.2em 0.6em;
}

.stonesoup-article .stonesoup-tag:hover {
    background: var(--stonesoup-text-dark);
    color: #f7f3eb;
    border-color: var(--stonesoup-text-dark);
}


/* ==========================================================================
   14. GENRE-SPECIFIC TYPOGRAPHY
   The heart of the design system. Each content type gets a distinctive
   reading treatment via body class. Stories get small-caps first line. Poetry gets
   centered verse. Memoir gets small-caps first line. All elegant.
   ========================================================================== */

/* ── Stories: small-caps first line, colored ── */

.content-type-story .stonesoup-article-content > p:first-of-type::first-line {
    font-variant: small-caps;
    font-size: 1.15em;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    font-weight: 500;
    color: var(--stonesoup-color-story);
}



/* ── Poetry: centered verse, no justification, no drop cap ── */

.content-type-poetry .stonesoup-article-content {
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
    max-width: 28em;
    margin: 0 auto;
    line-height: 1.85;
    font-size: 0.88em;     /* em — slightly smaller than prose, scales with article base */
}

.content-type-poetry .stonesoup-article-content p {
    text-indent: 0;
    margin-bottom: 1.5em;
    white-space: pre-line;
}

.content-type-poetry .stonesoup-article-title {
    font-style: italic;
}


/* ── Personal Narrative / Memoir: small-caps first line, colored ── */

.content-type-memoir .stonesoup-article-content > p:first-of-type::first-line {
    font-variant: small-caps;
    font-size: 1.1em;
    letter-spacing: 0.03em;
    text-transform: lowercase;
    color: var(--stonesoup-color-memoir);
}


/* ── Book Reviews: narrower column, small-caps first line, colored ── */

.content-type-review .stonesoup-article-content > p:first-of-type::first-line {
    font-variant: small-caps;
    font-size: 1.1em;
    letter-spacing: 0.03em;
    text-transform: lowercase;
    font-weight: 500;
    color: var(--stonesoup-color-review);
}

.content-type-review .stonesoup-article-content {
    max-width: 30em;
    margin: 0 auto;
}


/* ── Art: full-width images ── */

.content-type-art .stonesoup-article-figure {
    max-width: none;
    margin-left: -2rem;
    margin-right: -2rem;
}


/* ── Blog: left-aligned, classical indent ── */

.content-type-blog .stonesoup-article-content {
    text-align: left;
    hyphens: none;
    font-family: var(--stonesoup-font-reading);
    font-size: 0.88em;     /* em — scales with article base */
    line-height: 1.72;
}


/* ==========================================================================
   15. LITERARY ANALYSIS — Elegant Treatment
   ========================================================================== */

.stonesoup-literary-analysis {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 0.5px solid #c4b5a0;
}

.stonesoup-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

/* Section 15b (Glossary/Bilingual) → extracted to css/glossary.css (loaded conditionally) */

/* ==========================================================================
   16. ARTICLE COLOPHON & POST FOOTER
   ========================================================================== */

.stonesoup-article-colophon {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 0.5px solid #c4b5a0;
    text-align: center;
}

.stonesoup-publication-colophon {
    font-family: var(--stonesoup-font-reading);
    font-size: 0.78rem;
    color: #736a5e;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.12em;
}

/* Post footer — share + related, inside the paper */
.stonesoup-post-footer {
    max-width: var(--stonesoup-content-max-width, 62rem);
    margin: var(--stonesoup-space-xl) 0 0 0;
    padding: 0;
}

/* Save as PDF — inside the article header, below byline */
.stonesoup-article-header .sss-btn-export-single {
    font-family: var(--stonesoup-font-reading);
    font-style: italic;
    font-size: 0.82em;
    color: #9a8e80;
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    padding: 0;
    margin: 0;             /* E spacing: byline margin-bottom handles gap above */
    display: inline-block;
    transition: color 0.2s ease;
}

.stonesoup-article-header .sss-btn-export-single:hover {
    color: var(--stonesoup-teal);
}

.stonesoup-article-header .sss-btn-export-single:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* Related posts */
.stonesoup-related {
    padding-top: var(--stonesoup-space-lg);
}

.stonesoup-related-heading {
    font-family: var(--stonesoup-font-display);
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: var(--stonesoup-space-lg);
}


/* ==========================================================================
   17. PRINT BUTTON — Removed in v4.16.2
   Old floating print button replaced by "Save as PDF" overlay (sss-listing.js)
   ========================================================================== */

/* Print-only footer — hidden on screen, shown when printing/saving as PDF */
.stonesoup-print-footer {
    display: none;
}


/* ==========================================================================
   18. SITE FOOTER — (v3.0 footer removed; see v4.0 footer section below)
   ========================================================================== */


/* ==========================================================================
   19. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ── Tablet ── */
@media (max-width: 1024px) {
    .stonesoup-utility-bar {
        padding: 12px 20px;
    }

    .stonesoup-header-main {
        padding: 30px 20px;
    }

    .stonesoup-site-title {
        font-size: 3.5rem;
        letter-spacing: -1.5px;
    }

    .stonesoup-main-nav {
        padding: 0 20px;
    }

    .stonesoup-main-menu > li > a {
        padding: 16px 16px;
        font-size: 14px;
    }

    /* Reading page margins now handled by .sss-tint-block in sss-listing.css
       (classical canon applied site-wide, March 24, 2026). */

}

/* ── Phone ── */
@media (max-width: 768px) {
    .stonesoup-utility-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px 20px;
    }

    .stonesoup-utility-nav {
        gap: 16px;
    }

    .stonesoup-utility-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .stonesoup-header-main {
        padding: 25px 15px;
        min-height: auto;
    }

    .stonesoup-site-title {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

    .stonesoup-tagline {
        font-size: 1.1rem;
    }



    .stonesoup-main-nav {
        padding: 0 15px;
        overflow-x: auto;
    }

    .stonesoup-main-menu {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .stonesoup-main-menu > li > a {
        padding: 14px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .site-content {
        padding: var(--stonesoup-space-lg) 15px;
    }

    .stonesoup-hero-image {
        aspect-ratio: 16 / 9;
    }

    /* Cards single column */
    .stonesoup-card-grid {
        grid-template-columns: 1fr;
    }

    .stonesoup-card-grid--compact {
        grid-template-columns: 1fr;
    }

    /* .sss-tint-block mobile margins handled in sss-listing.css (classical canon site-wide) */

    /* Article & Page — tighter padding on mobile */
    .stonesoup-article,
    .stonesoup-page {
        padding: 3rem 1.5rem 5rem;
        font-size: 1.12rem;   /* slightly smaller on mobile but still generous */
    }

    .stonesoup-article-title,
    .stonesoup-page-title {
        font-size: 2em;       /* em — scales with article base */
    }

    /* Literary analysis single column */
    .stonesoup-analysis-grid {
        grid-template-columns: 1fr;
    }

    /* Poetry full width on mobile */
    .content-type-poetry .stonesoup-article-content {
        max-width: 100%;
    }

    /* Share stacks */
    .stonesoup-share {
        flex-direction: column;
        text-align: center;
    }

    /* Post footer */
    .stonesoup-post-footer {
        padding: 0 var(--stonesoup-space-md);
    }

}

/* ── Small Phone ── */
@media (max-width: 480px) {
    .stonesoup-site-title {
        font-size: 2rem;
        letter-spacing: -0.5px;
    }

    .stonesoup-btn-member {
        padding: 8px 16px;
        font-size: 13px;
    }

    .stonesoup-btn-outline {
        padding: 6px 12px;
        font-size: 13px;
    }

    .stonesoup-article-title,
    .stonesoup-page-title {
        font-size: 1.6em;     /* em — capped for narrow screens (1.12rem × 1.6 = ~28.7px) */
    }

    .stonesoup-article-content,
    .stonesoup-page-content {
        font-size: 1em;       /* em — inherits from article base (1.12rem at 768px) */
    }
}


/* ==========================================================================
   20. PAGE TEMPLATE — Institutional Content
   Same typographic voice as the literary pages. EB Garamond body text,
   Cormorant Garamond headings. One brand, one level of elegance.
   About, Contact, Submission Guidelines — they all belong in the same book.
   ========================================================================== */

/* ── Poster pages (About, Newsletter) — narrower paper, no reading rules ── */
body.poster-page .sss-tint-block {
    width: 44vw;
    padding: 4rem 4rem 5rem;
}

/* Poster content — no reading-page typography */
.stonesoup-poster-content {
    font-family: var(--stonesoup-font-ui);
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--stonesoup-text-dark);
}

/* ── Newsletter page styles (in theme, not in paste — WP strips paste <style>) ── */
.stonesoup-poster-content .nl-title-stack { padding: 0; margin-bottom: 1.5rem; }
.stonesoup-poster-content .nl-title-stack .nl-line {
    font-family: var(--stonesoup-font-ui);
    font-weight: 900;
    font-size: 4rem;
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    display: block;
}
.stonesoup-poster-content .nl-title-stack .nl-line:nth-child(1) { color: var(--stonesoup-color-story); }
.stonesoup-poster-content .nl-title-stack .nl-line:nth-child(2) { color: var(--stonesoup-color-poetry); }
.stonesoup-poster-content .nl-title-stack .nl-line:nth-child(3) { color: var(--stonesoup-color-art); }

.stonesoup-poster-content .nl-subtitle {
    font-family: var(--stonesoup-font-reading);
    font-style: italic;
    font-size: 2rem;
    color: #5a4a2a;
    margin: 0 0 2.5rem;
    text-indent: 0;
    line-height: 1.3;
}

.stonesoup-poster-content .nl-body p {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.875rem;
    line-height: 1.65;
    margin: 0;
    text-indent: 0;
    color: var(--stonesoup-text-dark);
}
.stonesoup-poster-content .nl-body p + p { text-indent: 1.5em; }

.stonesoup-poster-content .nl-note {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.9rem;
    color: #999;
    margin-top: 2rem;
    text-indent: 0;
    line-height: 1.6;
}

/* Mailchimp form on poster pages */
.stonesoup-poster-content #mc_embed_signup {
    max-width: 100%;
    width: 100% !important;
    margin: 3rem 0;
    background: transparent !important;
}
.stonesoup-poster-content #mc_embed_signup h2 { display: none; }
.stonesoup-poster-content #mc_embed_signup .indicates-required {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    color: #999;
}
.stonesoup-poster-content #mc_embed_signup label {
    font-family: var(--stonesoup-font-ui);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--stonesoup-text-dark);
}
.stonesoup-poster-content #mc_embed_signup input.email {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.3rem;
    padding: 0.7rem 1rem;
    border: 1px solid #ccc;
    width: 100%;
}
.stonesoup-poster-content #mc_embed_signup .button {
    background: var(--stonesoup-nav-crimson);
    font-family: var(--stonesoup-font-ui);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75rem 2.5rem;
    color: #fff;
    border: none;
}
.stonesoup-poster-content #mc_embed_signup .button:hover {
    background: var(--stonesoup-color-poetry);
}

@media (max-width: 768px) {
    .stonesoup-poster-content .nl-title-stack .nl-line { font-size: 2.4rem; }
    .stonesoup-poster-content .nl-subtitle { font-size: 1.5rem; }
    .stonesoup-poster-content .nl-body p { font-size: 1.4rem; }
}

@media (max-width: 1200px) {
    body.poster-page .sss-tint-block {
        width: auto;
        margin-left: 8vw;
        margin-right: 8vw;
        padding: 3rem 3rem 4rem;
    }
}
@media (max-width: 768px) {
    body.poster-page .sss-tint-block {
        margin-left: 0;
        margin-right: 0;
        padding: 2rem 1.5rem;
    }
}

/* ── Page container — inside .sss-tint-block (paper-on-linen) ── */
.stonesoup-page {
    max-width: var(--stonesoup-content-max-width, 62rem);
    font-family: var(--stonesoup-font-reading);
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}


/* ── Page header — centered Cormorant title with thin rule ── */

.stonesoup-page-header {
    text-align: center;
    margin: 0 0 3rem;
}

.stonesoup-page-title {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 300;
    font-size: 2.8rem;
    line-height: 1.15;
    color: #2560a0 !important;   /* page titles always poetry blue — matches .sss-page-title rule */
    letter-spacing: 0.01em;
    margin: 0;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
}

.stonesoup-page-title::after {
    content: '';
    display: block;
    width: 3em;
    height: 0.5px;
    background: #c4b5a0;
    margin: 1em auto 0;
}


/* ── Featured image (if set) ── */

.stonesoup-page-figure {
    max-width: 100%;
    margin: 0 0 2.5rem;
    padding: 0;
}

.stonesoup-page-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.stonesoup-page-figure figcaption {
    font-family: var(--stonesoup-font-reading);
    font-size: 0.82rem;
    color: #736a5e;
    text-align: center;
    margin-top: 0.8em;
    font-style: italic;
}


/* ── Page content — EB Garamond body, classical indent (no paragraph spacing) ── */

.stonesoup-page-content {
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--stonesoup-text-dark);
    hanging-punctuation: first last;
}

.stonesoup-page-content p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 1.5em;
}

.stonesoup-page-content > p:first-of-type,
.stonesoup-page-content p:first-child {
    text-indent: 0;
}

/* Headings within page content — same hierarchy as articles */
.stonesoup-page-content h2 {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--stonesoup-text-dark);
    margin-top: 2.5em;
    margin-bottom: 0.8em;
    text-align: center;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.08em;
}

.stonesoup-page-content h3 {
    font-family: var(--stonesoup-font-reading);
    font-weight: 500;
    font-size: 1.1rem;
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-style: italic;
}

.stonesoup-page-content h4 {
    font-family: var(--stonesoup-font-reading);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1.5em;
    margin-bottom: 0.4em;
    letter-spacing: 0.04em;
}

/* Blockquotes — indented, thin left rule, italic */
.stonesoup-page-content blockquote {
    margin: 1.8rem 0 1.8rem 2em;
    padding-left: 1.2em;
    border-left: 0.5px solid #c4b5a0;
    font-size: 0.94rem;
    color: #4a4540;
    font-style: italic;
    background: none;
    border-radius: 0;
}

.stonesoup-page-content blockquote p {
    margin-bottom: 0.8em;
}

.stonesoup-page-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Lists — elegant spacing, muted markers */
.stonesoup-page-content ul,
.stonesoup-page-content ol {
    margin: 1.2em 0;
    padding-left: 1.5em;
}

.stonesoup-page-content li {
    margin-bottom: 0.5em;
    line-height: 1.65;
}

.stonesoup-page-content ul li::marker {
    color: #c4b5a0;
}

/* Links — teal, thin underline on hover */
.stonesoup-page-content a {
    color: var(--stonesoup-teal);
    text-decoration: none;
    border-bottom: 0.5px solid transparent;
    transition: border-color 0.2s ease;
}

.stonesoup-page-content a:hover {
    border-bottom-color: var(--stonesoup-teal);
}

/* Strong — semi-bold, not heavy */
.stonesoup-page-content strong {
    font-weight: 500;
}

/* Images in content */
.stonesoup-page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 1.5em 0;
    display: block;
}

.stonesoup-page-content .wp-caption,
.stonesoup-page-content figure {
    max-width: 100%;
    overflow: hidden;
}

/* Tables — quiet rules, small-caps headers */
.stonesoup-page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.92rem;
}

.stonesoup-page-content th,
.stonesoup-page-content td {
    padding: 0.6em 1em;
    border-bottom: 0.5px solid #e0ddd5;
    text-align: left;
}

.stonesoup-page-content th {
    font-weight: 500;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    color: #5a5148;
}

/* Horizontal rules — short centered line, like an ornament */
.stonesoup-page-content hr {
    border: none;
    border-top: 0.5px solid #c4b5a0;
    margin: 2.5em auto;
    max-width: 4em;
}

/* WordPress separator block */
.stonesoup-page-content .wp-block-separator {
    border: none;
    border-top: 0.5px solid #c4b5a0;
    margin: 2.5em auto;
    max-width: 4em;
    opacity: 1;
}

/* WordPress buttons — inherit the Stone Soup voice */
.stonesoup-page-content .wp-block-button__link {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: all 0.2s ease;
}


/* ==========================================================================
   20b. SCHOLARLY PAGE COMPONENTS — version navigation, footnotes, citations
   Used by Stone Soup Folktale pages and any scholarly/reference content.
   ========================================================================== */

/* ── Version / chapter navigation list ── */
.version-nav {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}

.version-nav li {
    padding: 0.65em 0;
    border-bottom: 0.5px solid rgba(196, 181, 160, 0.4);
    margin-bottom: 0;
    text-indent: 0;
}

.version-nav li:last-child {
    border-bottom: none;
}

.version-nav a {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--stonesoup-color-poetry);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.2s;
    border-bottom: none;
}

.version-nav a:hover {
    color: var(--stonesoup-color-story);
}

.version-desc {
    font-family: var(--stonesoup-font-reading);
    font-size: 0.92rem;
    color: var(--stonesoup-text-light);
    font-style: italic;
    margin-left: 0.3em;
}

/* ── Footnotes section ── */
.stonesoup-footnotes {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 0.5px solid var(--stonesoup-text-rule);
}

.stonesoup-footnotes h3 {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.1rem;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    color: var(--stonesoup-text-light);
    margin-bottom: 0.8em;
}

.stonesoup-footnotes ol {
    padding-left: 1.5em;
    margin: 0;
}

.stonesoup-footnotes li {
    font-family: var(--stonesoup-font-reading);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--stonesoup-text-medium);
    margin-bottom: 0.5em;
    text-indent: 0;
}

.stonesoup-footnotes cite {
    font-style: italic;
}

.stonesoup-footnotes a {
    color: var(--stonesoup-text-light);
    text-decoration: none;
    border-bottom: none;
}

/* ── Back/Next navigation links on sub-pages ── */
.page-nav-back,
.page-nav-next {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.page-nav-back a,
.page-nav-next a {
    color: var(--stonesoup-teal);
    text-decoration: none;
    border-bottom: none;
    transition: color 0.2s;
}

.page-nav-back a:hover,
.page-nav-next a:hover {
    color: var(--stonesoup-color-story);
}

/* ── Bibliography link ── */
.bib-link {
    display: inline-block;
    margin-top: 1.5em;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-bottom: none;
}

.bib-link a {
    color: var(--stonesoup-teal);
    text-decoration: none;
    border-bottom: none;
}

/* ── Superscript footnote links ── */
.stonesoup-page-content sup a {
    color: var(--stonesoup-teal);
    text-decoration: none;
    font-size: 0.75em;
    border-bottom: none;
}

/* ── French / foreign language blockquotes ── */
.stonesoup-page-content blockquote[lang] {
    font-style: italic;
    color: var(--stonesoup-text-medium);
}


/* Section 20c (Resource Pages) → extracted to css/resource.css (loaded conditionally) */


/* ==========================================================================
   20d. BOOK CHAPTER PAGES — Crippled Detectives and future book publications
   Cycling Orphist chapter colors, special element styles, chapter navigation.
   Used by WordPress pages imported via WXR (parent: crippled-detectives, etc.)
   ========================================================================== */

/* ── Chapter headings ── */
.chapter .chapter-number {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 0.4em;
}

.chapter .chapter-title {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 300;
    font-size: 2.2rem;
    line-height: 1.15;
    text-align: center;
    margin-bottom: 0.3em;
    letter-spacing: 0.01em;
}

.chapter .chapter-title::after {
    content: '';
    display: block;
    width: 2.5em;
    height: 0.5px;
    margin: 0.8em auto 1.8em;
}

/* ── Cycling Orphist chapter colors ── */
/* 6-color rotation by chapter position: red → cobalt → plum → ochre → green → dark */
.ch-red    .chapter-number,
.ch-red    .chapter-title    { color: var(--stonesoup-color-story); }
.ch-red    .chapter-title::after { background: var(--stonesoup-color-story); }
.ch-red    .opening-words    { color: var(--stonesoup-color-story); }

.ch-cobalt .chapter-number,
.ch-cobalt .chapter-title    { color: var(--stonesoup-color-poetry); }
.ch-cobalt .chapter-title::after { background: var(--stonesoup-color-poetry); }
.ch-cobalt .opening-words    { color: var(--stonesoup-color-poetry); }

.ch-plum   .chapter-number,
.ch-plum   .chapter-title    { color: var(--stonesoup-color-art); }
.ch-plum   .chapter-title::after { background: var(--stonesoup-color-art); }
.ch-plum   .opening-words    { color: var(--stonesoup-color-art); }

.ch-ochre  .chapter-number,
.ch-ochre  .chapter-title    { color: var(--stonesoup-color-review); }
.ch-ochre  .chapter-title::after { background: var(--stonesoup-color-review); }
.ch-ochre  .opening-words    { color: var(--stonesoup-color-review); }

.ch-green  .chapter-number,
.ch-green  .chapter-title    { color: var(--stonesoup-color-memoir); }
.ch-green  .chapter-title::after { background: var(--stonesoup-color-memoir); }
.ch-green  .opening-words    { color: var(--stonesoup-color-memoir); }

.ch-dark   .chapter-number,
.ch-dark   .chapter-title    { color: var(--stonesoup-text-dark); }
.ch-dark   .chapter-title::after { background: var(--stonesoup-text-dark); }
.ch-dark   .opening-words    { color: var(--stonesoup-text-dark); }

/* ── Body text within chapters ── */
.chapter p {
    margin-bottom: 0;
    text-indent: 1.5em;
}

.chapter > p:first-of-type {
    text-indent: 0;
}

/* ── Large all-caps opening words (NOT drop caps) ── */
.opening-words {
    font-variant: small-caps;
    text-transform: lowercase;
    font-size: 1.15em;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* Opening-words paragraph is ALWAYS flush left, regardless of DOM position */
p:has(> .opening-words) {
    text-indent: 0;
}

/* ── Dialogue — play/script format ── */
.dialogue {
    margin: 1.5em 0 1.5em 2em;
    text-indent: 0;
}

.dialogue p {
    text-indent: 0;
    margin-bottom: 0.25em;
    padding-left: 5em;
    text-indent: -5em;
}

.dialogue .speaker {
    font-variant: small-caps;
    font-weight: 500;
    color: var(--stonesoup-text-medium);
}

/* ── Villain/character notes — bordered boxes ── */
.villain-note {
    margin: 1.8em 2em;
    padding: 1.2em 1.5em;
    border: 0.5px solid var(--stonesoup-text-rule);
    background: #faf9f6;
    font-size: 0.95rem;
}

.villain-note p {
    text-indent: 0;
    margin-bottom: 0.5em;
}

.villain-note p:last-child {
    margin-bottom: 0;
}

.villain-note .signature {
    font-style: italic;
    margin-top: 0.8em;
}

.villain-note.shout {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Songs/poems — italic plum purple ── */
.song {
    margin: 2em 0;
    padding-left: 3em;
    font-style: italic;
    color: var(--stonesoup-color-art);
    line-height: 1.9;
}

.song p {
    text-indent: 0;
    margin-bottom: 0;
}

.song .song-title {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--stonesoup-text-medium);
    margin-bottom: 0.5em;
}

/* ── Embedded stories — stories within stories ── */
.embedded-story {
    margin: 2em 0;
    padding: 1.5em 2em;
    border-left: 2px solid var(--stonesoup-color-memoir);
    background: rgba(237, 232, 223, 0.2);
}

.embedded-story p {
    text-indent: 1.5em;
}

.embedded-story > p:first-of-type,
.embedded-story > p:first-child {
    text-indent: 0;
}

.embedded-story .story-end {
    text-align: center;
    font-style: italic;
    color: var(--stonesoup-text-light);
    margin-top: 1em;
    text-indent: 0;
}

/* ── Chapter footnotes ── */
.chapter-footnote {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 0.5px solid var(--stonesoup-text-rule);
    font-size: 0.85rem;
    color: var(--stonesoup-text-medium);
    text-indent: 0;
    font-style: italic;
}

/* ── The End ── */
.the-end {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
}

.the-end p {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.4rem;
    font-variant: small-caps;
    letter-spacing: 0.15em;
    color: var(--stonesoup-text-light);
    text-indent: 0;
}

.the-end .rule {
    display: block;
    width: 3em;
    height: 0.5px;
    background: var(--stonesoup-text-rule);
    margin: 0 auto 2rem;
}

/* ── Book cover (parent page) ── */
.book-cover {
    text-align: center;
    padding: 4rem 0 3rem;
}

.book-cover .book-title {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 300;
    font-size: 3rem;
    line-height: 1.1;
    color: var(--stonesoup-color-story);
    letter-spacing: 0.02em;
    margin-bottom: 0.3em;
}

.book-cover .book-subtitle {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.3rem;
    color: var(--stonesoup-text-medium);
    margin-bottom: 2rem;
}

.book-cover .book-author {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--stonesoup-text-dark);
    letter-spacing: 0.03em;
}

.book-cover .book-publisher {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--stonesoup-text-light);
    margin-top: 2rem;
}

/* ── Chapter navigation list (TOC on parent page) ── */
.chapter-nav {
    list-style: none;
    padding: 0;
    margin: 1.5em 0;
}

.chapter-nav li {
    padding: 0.55em 0;
    border-bottom: 0.5px solid rgba(196, 181, 160, 0.4);
    margin-bottom: 0;
    text-indent: 0;
}

.chapter-nav li:last-child {
    border-bottom: none;
}

.chapter-nav a {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--stonesoup-color-poetry);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.2s;
    border-bottom: none;
}

.chapter-nav a:hover {
    color: var(--stonesoup-color-story);
}

/* ── Chapter page bottom navigation (prev/next) ── */
.chapter-page-nav {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 0.5px solid var(--stonesoup-text-rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.chapter-page-nav .page-nav-prev,
.chapter-page-nav .page-nav-next {
    margin: 0;
}

.chapter-page-nav .page-nav-next {
    text-align: right;
}

/* Section 20e (Curriculum) → extracted to css/curriculum.css (loaded conditionally) */
/* Section 20f (Resource) → extracted to css/resource.css (loaded conditionally) */


/* ==========================================================================
   21. PRINT STYLES
   ========================================================================== */

/* Page setup — classical proportions: bottom margin largest */
@page {
    margin: 0.9in 1.3in 1.5in 1.3in;
}

@media print {
    /* Hide everything that isn't the reading experience */
    .stonesoup-utility-bar,
    .stonesoup-main-nav,
    .stonesoup-hero,
    .stonesoup-share,
    .stonesoup-related,
    .stonesoup-footer,
    .skip-link,
    .stonesoup-post-footer,
    .stonesoup-tags,
    .stonesoup-glossary,
    .stonesoup-article-colophon {
        display: none !important;
    }

    .stonesoup-article-end {
        color: #999;
    }

    body {
        background: white;
        color: black;
        font-size: 11.5pt;
        margin: 0;
        padding: 0;
    }

    /* All type prints black — articles and pages */
    .stonesoup-article,
    .stonesoup-article-header,
    .stonesoup-article-byline,
    .stonesoup-article-location,
    .stonesoup-article .stonesoup-type-badge,
    .stonesoup-article-end,
    .stonesoup-page,
    .stonesoup-page-header,
    .stonesoup-page-title,
    .stonesoup-page-content,
    .stonesoup-page-content h2,
    .stonesoup-page-content h3,
    .stonesoup-page-content h4,
    .stonesoup-page-content a,
    a {
        color: black;
    }

    /* Titles sized for print column */
    .stonesoup-article-title,
    .stonesoup-page-title {
        font-size: 2rem;
    }

    /* Shorter line lengths — elegant reading measure */
    .stonesoup-article,
    .stonesoup-page {
        max-width: 30em;
        margin: 0 auto;
        padding: 0;
    }

    .stonesoup-article-content,
    .stonesoup-page-content {
        max-width: none;
        line-height: 1.65;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    .stonesoup-article-figure,
    .stonesoup-page-figure {
        page-break-inside: avoid;
    }

    /* Repeating footer on every printed page — position:fixed
       repeats in Chrome/Edge print. Uncheck "Headers and footers"
       in print dialog to hide browser defaults. */
    .stonesoup-print-footer {
        display: block !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-family: 'EB Garamond', Georgia, serif;
        font-size: 8.5pt;
        color: black;
        letter-spacing: 0.04em;
        padding-bottom: 0.2in;
    }
}


/* ==========================================================================
   HOMEPAGE — Image Card Grid (v4.10)
   6 full-bleed image cards linking to contents pages.
   No hero image — the cards ARE the hero.
   ========================================================================== */

.stonesoup-image-grid {
    width: 100%;
    padding: 0;
}

.stonesoup-image-grid-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

/* --- Image Card --- */
.stonesoup-image-card {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
    background: #333;
    text-decoration: none;
    min-height: 0;
}

/* Fallback for browsers/contexts where aspect-ratio is overridden */
@supports not (aspect-ratio: 4 / 3) {
    .stonesoup-image-card { padding-bottom: 75%; }
}

.stonesoup-image-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.stonesoup-image-card:hover .stonesoup-image-card__img {
    transform: scale(1.03);
}

/* Dark overlay for text legibility */
.stonesoup-image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.15) 0%,
        rgba(0,0,0,0.05) 40%,
        rgba(0,0,0,0.35) 100%
    );
    pointer-events: none;
}

/* --- Card Heading --- */
.stonesoup-image-card__heading {
    position: absolute;
    bottom: 1.5rem;
    left: 1.8rem;
    right: 1.8rem;
    z-index: 2;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.05;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    letter-spacing: 0.01em;
}

/* Colored accent bar under heading */
.stonesoup-image-card__heading::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 3px;
    margin-top: 0.6rem;
    border-radius: 2px;
}


/* --- Homepage Responsive --- */
@media (max-width: 900px) {
    .stonesoup-image-grid-inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .stonesoup-image-card__heading {
        font-size: clamp(2.4rem, 5.5vw, 3.5rem);
    }

    .stonesoup-main-menu > li > a {
        padding: 12px 16px;
        font-size: 0.78rem;
    }
}

@media (max-width: 600px) {
    .stonesoup-utility-bar {
        flex-direction: column;
        gap: 8px;
        padding: 10px 16px;
    }

    .stonesoup-utility-nav {
        gap: 12px;
    }

    .stonesoup-image-grid-inner {
        grid-template-columns: 1fr;
    }

    .stonesoup-header-main {
        padding: 24px 16px 16px;
    }

    .stonesoup-main-menu {
        justify-content: center;
    }

    .stonesoup-main-menu > li > a {
        padding: 10px 12px;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
    }
}


/* ==========================================================================
   WHAT'S NEW PAGE — Latest content across all types + pages
   ========================================================================== */

.stonesoup-whats-new-subtitle {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--stonesoup-text-medium);
    text-align: center;
    margin-top: -0.5em;
    margin-bottom: 2rem;
}

/* ── Date group headers ── */
.stonesoup-whats-new-date {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 400;
    font-size: 1.2rem;
    font-variant: small-caps;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    color: var(--stonesoup-text-dark);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 0.5px solid var(--stonesoup-text-rule);
}

.stonesoup-whats-new-group:first-child .stonesoup-whats-new-date {
    margin-top: 0;
}

/* ── Individual items ── */
.stonesoup-whats-new-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.2rem 0;
    border-bottom: 0.5px solid rgba(196, 181, 160, 0.3);
}

.stonesoup-whats-new-item:last-child {
    border-bottom: none;
}

/* Thumbnail */
.stonesoup-whats-new-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 90px;
    overflow: hidden;
    border-radius: 2px;
}

.stonesoup-whats-new-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content */
.stonesoup-whats-new-content {
    flex: 1;
    min-width: 0;
}

/* Type label — Orphist-colored */
.stonesoup-whats-new-type {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Title */
.stonesoup-whats-new-title {
    font-family: var(--stonesoup-font-reading-display);
    font-weight: 300;
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0.15rem 0 0.3rem;
}

.stonesoup-whats-new-title a {
    color: var(--stonesoup-text-dark);
    text-decoration: none;
}

.stonesoup-whats-new-title a:hover {
    color: var(--stonesoup-cobalt-blue);
}

/* Author byline */
.stonesoup-whats-new-author {
    font-family: var(--stonesoup-font-reading);
    font-size: 0.9rem;
    font-style: italic;
    color: var(--stonesoup-text-medium);
    margin: 0 0 0.3rem;
    text-indent: 0;
}

/* Excerpt */
.stonesoup-whats-new-excerpt {
    font-family: var(--stonesoup-font-reading);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--stonesoup-text-medium);
    margin: 0;
    text-indent: 0;
}

/* Empty state */
.stonesoup-whats-new-empty {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--stonesoup-text-light);
    text-align: center;
    padding: 3rem 0;
    text-indent: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .stonesoup-whats-new-item.has-thumbnail {
        flex-direction: column;
        gap: 0.8rem;
    }

    .stonesoup-whats-new-thumb {
        width: 100%;
        height: 180px;
    }
}


/* ==========================================================================
   FOOTER (v4.0)
   ========================================================================== */

.stonesoup-footer {
    background: var(--stonesoup-nav-crimson);
    color: #fafaf8;
    padding: 0;
}

.stonesoup-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.stonesoup-footer-inner p {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
}

.stonesoup-footer-menu {
    display: flex;
    justify-content: center;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: none;
}

.stonesoup-footer-menu a {
    display: block;
    padding: 14px 22px;
    font-family: var(--stonesoup-font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fafaf8;
    text-decoration: none;
    transition: color 0.2s;
}

.stonesoup-footer-menu a:hover {
    color: #fff;
}

.stonesoup-footer-menu > li:first-child > a {
    pointer-events: none;
    cursor: default;
    opacity: 0.75;
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
}


/* ==========================================================================
   Section 22: Contest Winners Page (page-contest-winners.php)
   Paper-on-linen with classical book typography.
   Orphist cycling colors per contest month.
   ========================================================================== */

.contest-winners-page .stonesoup-page-title {
    font-family: var(--stonesoup-font-display);
    font-weight: 300;
    font-size: 2.8rem;
    color: var(--stonesoup-color-editorial);
    margin-bottom: 0.5rem;
}

.contest-intro {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.15rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 3rem;
    max-width: 50rem;
}

.contest-month {
    margin-bottom: 3.5rem;
}

.contest-month-title {
    font-family: var(--stonesoup-font-display);
    font-weight: 300;
    font-size: 2rem;
    margin-bottom: 0.3rem;
}

.contest-month-rule {
    border: none;
    height: 2px;
    margin: 0 0 1.5rem 0;
    opacity: 0.6;
}

.contest-section-label {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 1.5rem 0 0.8rem 0;
}

.contest-entry {
    margin-bottom: 1.5rem;
    padding-left: 1.2rem;
    border-left: 3px solid #ddd;
}

.contest-winner {
    border-left-color: var(--stonesoup-color-story);
}

.contest-runner-up {
    border-left-color: var(--stonesoup-color-memoir);
}

.contest-honorable-mention {
    border-left-color: var(--stonesoup-color-poetry);
}

.contest-entry-title {
    font-family: var(--stonesoup-font-display);
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 0 0.2rem 0;
    line-height: 1.3;
}

.contest-entry-title a {
    color: var(--stonesoup-color-editorial);
    text-decoration: none;
}

.contest-entry-title a:hover {
    text-decoration: underline;
}

.contest-entry-meta {
    font-family: var(--stonesoup-font-ui);
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 0.4rem 0;
}

.contest-entry-excerpt {
    font-family: var(--stonesoup-font-reading);
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.contest-empty {
    font-family: var(--stonesoup-font-reading);
    font-size: 1.15rem;
    color: #888;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .contest-winners-page {
        padding: 2rem 1.5rem 3rem 1.5rem;
    }
    .contest-winners-page .stonesoup-page-title {
        font-size: 2rem;
    }
    .contest-month-title {
        font-size: 1.5rem;
    }
    .contest-entry-title {
        font-size: 1.25rem;
    }
}

/* ── Page-specific title suppression ── */
.page-id-8545 .entry-title { display: none; }