/* ============================================================================
   JeremyScot — theme.css
   Palette + typography per the design direction doc.
   Self-hosted. No external CDNs (per the "never trust external" principle).
   ============================================================================ */

/* ─── Design tokens ─────────────────────────────────────────────────────── */
:root {
    /* Neutrals — dark theme is default */
    --jsc-night:       #0E1B2E;
    --jsc-dusk:        #1A2B44;
    --jsc-water:       #2A4A6E;
    --jsc-fog:         #6B819C;
    --jsc-fog-dim:     #3E5674;
    --jsc-cream:       #F5EBD3;
    --jsc-parchment:   #E8DEC4;
    --jsc-charcoal:    #141414;     /* v0.25: header/footer chrome */
    --jsc-charcoal-lift: #1D1D1D;

    /* Warm accents — the sunset */
    --jsc-ember:       #E88A3C;
    --jsc-peach:       #F0B570;
    --jsc-amber:       #C8973E;
    --jsc-gold:        #E8CC85;
    --jsc-flame:       #D96538;

    /* Nature */
    --jsc-forest:      #1A2B1E;
    --jsc-moss:        #4A6B4E;

    /* Type */
    --jsc-font-display: Georgia, 'Cormorant Garamond', 'Times New Roman', serif;
    --jsc-font-body:    Georgia, 'Source Serif 4', 'Times New Roman', serif;
    --jsc-font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
    --jsc-font-mono:    ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', monospace;

    /* Rhythm */
    --jsc-radius:      6px;
    --jsc-radius-lg:  10px;
    --jsc-max:        1120px;
    --jsc-shadow:     0 2px 20px rgba(0,0,0,0.4);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
/* v0.31 — Prevent horizontal scrollbar caused by 100vw full-bleed
   sections (100vw = viewport + scrollbar width, so it overflows by
   ~15px on desktop). Clip at html/body. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
    margin: 0;
    overflow-x: hidden;   /* v0.31 — matches html */
    background: var(--jsc-night);
    color: var(--jsc-cream);
    font-family: var(--jsc-font-body);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.075rem);
    line-height: 1.65;
    min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--jsc-amber); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--jsc-peach); text-decoration: underline; }

h1, h2, h3, h4, h5 {
    font-family: var(--jsc-font-display);
    line-height: 1.2;
    color: var(--jsc-gold);
    margin: 0 0 0.5em;
    letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 1.75rem + 1.25vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
code {
    font-family: var(--jsc-font-mono);
    font-size: 0.9em;
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 3px;
    color: var(--jsc-parchment);
}

/* ─── Layout ────────────────────────────────────────────────────────────── */
.wrap { max-width: var(--jsc-max); margin: 0 auto; padding: 0 24px; }

.site-header {
    background: var(--jsc-charcoal);
    padding: 2em 0 1.5em;
    border-bottom: 1px solid #2a2a2a;
}
.site-header .wrap { display: flex; align-items: baseline; gap: 3em; flex-wrap: wrap; }
.site-brand {
    font-family: var(--jsc-font-display);
    font-size: 1.75rem;
    color: var(--jsc-gold);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.site-brand:hover { text-decoration: none; color: var(--jsc-peach); }
.site-brand-tag {
    display: block;
    font-family: var(--jsc-font-body);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--jsc-ember);
    margin-top: 0.15em;
}

nav.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
    font-family: var(--jsc-font-ui);
    font-size: 0.95rem;
}
nav.site-nav a {
    color: var(--jsc-parchment);
    text-transform: none;
    letter-spacing: 0.02em;
}
nav.site-nav a:hover { color: var(--jsc-ember); }

.site-main { padding: 3em 0 6em; position: relative; /* v0.37.1 — contains firefly canvas so it can't drift over the header nav */ }
.site-footer {
    background: var(--jsc-charcoal);
    border-top: 1px solid #2a2a2a;
    padding: 4em 0 2em;
    color: var(--jsc-fog);
    font-size: 0.9rem;
    font-family: var(--jsc-font-ui);
    text-align: left;
}
.site-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3em;
    margin-bottom: 3em;
    padding-bottom: 3em;
    border-bottom: 1px solid #2a2a2a;
}
.site-footer-col h4 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.05rem;
    margin: 0 0 1.2em;
    font-weight: 400;
    letter-spacing: .02em;
}
.site-footer-brand-name {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.6rem;
    line-height: 1.15;
    margin-bottom: .3em;
}
.site-footer-tagline {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-display);
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 1.2em;
}
.site-footer-bio {
    color: var(--jsc-parchment);
    line-height: 1.7;
    font-size: .92rem;
    max-width: 42ch;
    margin: 0;
}
.site-footer-links,
.site-footer-socials {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer-links li,
.site-footer-socials li { margin: 0 0 .55em; }
.site-footer-links a {
    color: var(--jsc-parchment);
    text-decoration: none;
    transition: color .15s ease;
}
.site-footer-links a:hover { color: var(--jsc-ember); }
.site-footer-socials a {
    color: var(--jsc-parchment);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .7em;
    transition: color .15s ease;
}
.site-footer-socials a:hover { color: var(--jsc-ember); }
.site-footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    background: rgba(232,138,60,.12);
    color: var(--jsc-ember);
    border-radius: 6px;
    font-size: .95rem;
    line-height: 1;
    flex-shrink: 0;
}
.site-footer-social-label {
    font-size: .9rem;
}
.site-footer-bottom {
    text-align: center;
    color: var(--jsc-fog);
    font-size: .85rem;
}
.site-footer-bottom a {
    color: var(--jsc-parchment);
    text-decoration: none;
    border-bottom: 1px dotted var(--jsc-fog-dim);
}
.site-footer-bottom a:hover { color: var(--jsc-ember); border-bottom-color: var(--jsc-ember); }

/* Footer responsive */
@media (max-width: 900px) {
    .site-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2em;
    }
    .site-footer-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 500px) {
    .site-footer { padding: 3em 0 1.5em; }
    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5em;
    }
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius-lg);
    padding: 1.75em 2em;
    margin: 1.25em 0;
    border-left: 3px solid var(--jsc-ember);
    box-shadow: var(--jsc-shadow);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* ─── Book cards + grid ─────────────────────────────────────────────────── */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2em;
    margin: 2em 0;
}
.book-card {
    display: flex;
    flex-direction: column;
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius-lg);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--jsc-shadow);
}
.book-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(232,138,60,0.15);
    text-decoration: none;
}
.book-card-cover {
    aspect-ratio: 2 / 3;
    background: linear-gradient(160deg, var(--jsc-water) 0%, var(--jsc-night) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    text-align: center;
}
.book-card-cover img {
    max-height: 100%;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.book-card-cover-placeholder {
    font-family: var(--jsc-font-display);
    color: var(--jsc-gold);
    font-size: 1.15rem;
    padding: 0 1em;
}
.book-card-body { padding: 1.25em 1.5em 1.5em; }
.book-card h3 { margin: 0 0 0.3em; font-size: 1.15rem; }
.book-card .subtitle { color: var(--jsc-parchment); font-size: 0.9rem; font-style: italic; margin: 0; }
.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    background: var(--jsc-water);
    color: var(--jsc-cream);
    font-family: var(--jsc-font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 0.5em;
}
.pill-ember { background: var(--jsc-ember); color: var(--jsc-night); }
.pill-ok    { background: var(--jsc-moss);  color: var(--jsc-cream); }

/* ─── Book single page ──────────────────────────────────────────────────── */
.book-hero {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr;
    gap: 3em;
    margin: 2em 0 3em;
}
.book-hero-cover {
    max-width: 320px;
}
.book-hero-cover img {
    border-radius: var(--jsc-radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.book-hero h1 { margin-top: 0; }
.book-hero .subtitle { color: var(--jsc-ember); font-style: italic; font-size: 1.15rem; }
.book-theme-line {
    color: var(--jsc-parchment);
    font-size: 0.95rem;
    margin: 0.5em 0;
}
.book-theme-line strong { color: var(--jsc-gold); }

.buy-links {
    display: flex;
    gap: 0.75em;
    flex-wrap: wrap;
    margin: 1.5em 0;
}
.btn-buy {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1.1em;
    background: var(--jsc-water);
    border-radius: var(--jsc-radius);
    color: var(--jsc-cream);
    font-family: var(--jsc-font-ui);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
}
.btn-buy:hover {
    background: var(--jsc-ember);
    color: var(--jsc-night);
    text-decoration: none;
    transform: translateY(-1px);
}

.excerpts { margin-top: 3em; }
.excerpt {
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--jsc-amber);
    padding: 1.5em 2em;
    border-radius: 0 var(--jsc-radius) var(--jsc-radius) 0;
    margin: 1em 0;
    font-style: italic;
    color: var(--jsc-parchment);
}
.excerpt h4 {
    font-family: var(--jsc-font-display);
    color: var(--jsc-gold);
    margin: 0 0 0.5em;
    font-size: 1rem;
    font-style: normal;
}

/* ─── Hero home ─────────────────────────────────────────────────────────── */
.hero {
    padding: 4em 0 3em;
    text-align: center;
}
.hero h1 {
    font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem);
    margin-bottom: 0.15em;
}
.hero .tagline {
    color: var(--jsc-ember);
    font-style: italic;
    font-size: 1.15rem;
    margin: 0 0 2em;
}

/* ─── Install screen ────────────────────────────────────────────────────── */
.install-body {
    padding: 4vh 0 6vh;
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(232,138,60,0.08), transparent),
      var(--jsc-night);
    min-height: 100vh;
}
.install-shell {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}
.install-hero { text-align: center; margin-bottom: 2em; }
.install-hero h1 { font-size: 2.5rem; margin-bottom: 0.15em; }
.install-hero .tagline { color: var(--jsc-ember); font-style: italic; margin: 0 0 0.5em; }
.install-hero .meta { color: var(--jsc-fog); font-family: var(--jsc-font-ui); font-size: 0.85rem; }

.install-form { display: block; }
.field { margin: 1em 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.field label {
    display: block;
    font-family: var(--jsc-font-ui);
    font-size: 0.85rem;
    color: var(--jsc-parchment);
    margin-bottom: 0.35em;
    letter-spacing: 0.02em;
}
.field input {
    width: 100%;
    padding: 0.7em 0.9em;
    background: var(--jsc-night);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    color: var(--jsc-cream);
    font-family: var(--jsc-font-body);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus {
    outline: none;
    border-color: var(--jsc-ember);
    box-shadow: 0 0 0 3px rgba(232,138,60,0.15);
}

.btn {
    display: inline-block;
    padding: 0.75em 1.75em;
    border: none;
    border-radius: var(--jsc-radius);
    font-family: var(--jsc-font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, transform 0.15s ease;
}
.btn-primary { background: var(--jsc-ember); color: var(--jsc-night); }
.btn-primary:hover { background: var(--jsc-peach); color: var(--jsc-night) !important; transform: translateY(-1px); text-decoration: none; }
.btn-ghost   { background: transparent; color: var(--jsc-cream); border: 1px solid var(--jsc-fog-dim); }
.btn-ghost:hover { border-color: var(--jsc-ember); color: var(--jsc-ember) !important; background: rgba(232,138,60,.08); text-decoration: none; }
.btn-danger  { background: var(--jsc-flame); color: var(--jsc-cream); }
.btn-danger:hover { background: #c9502a; color: var(--jsc-cream) !important; text-decoration: none; }

.cta-row { display: flex; gap: 0.75em; margin: 1.5em 0 0; flex-wrap: wrap; }

.alert {
    padding: 1em 1.25em;
    border-radius: var(--jsc-radius);
    margin: 1em 0;
    font-family: var(--jsc-font-ui);
    font-size: 0.9rem;
}
.alert-error {
    background: rgba(217,101,56,0.15);
    border: 1px solid var(--jsc-flame);
    color: var(--jsc-parchment);
}
.alert-ok {
    background: rgba(74,107,78,0.2);
    border: 1px solid var(--jsc-moss);
    color: var(--jsc-cream);
}
.alert ul { margin: 0.5em 0 0; padding-left: 1.5em; }

.hint {
    color: var(--jsc-fog);
    font-size: 0.9rem;
    font-family: var(--jsc-font-ui);
}
.install-footer {
    text-align: center;
    color: var(--jsc-fog);
    font-size: 0.85rem;
    font-family: var(--jsc-font-ui);
    margin-top: 3em;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .book-hero { grid-template-columns: 1fr; }
    .book-hero-cover { max-width: 240px; margin: 0 auto; }
    .field-row { grid-template-columns: 1fr; }
    .site-header .wrap { flex-direction: column; align-items: flex-start; gap: 1em; }
    nav.site-nav ul { gap: 1em; }
}

/* ─── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   v0.3.0 additions — articles + categories + chips
   ============================================================================ */

/* ─── Article cards + list ──────────────────────────────────────────────── */
.article-list {
    display: grid;
    gap: 2em;
    margin: 2em 0;
}
.article-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 2em;
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius-lg);
    padding: 1.5em 2em 1.5em 1.5em;
    border-left: 3px solid var(--jsc-amber);
    box-shadow: var(--jsc-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}
.article-card:has(.article-card-body:only-child) { grid-template-columns: 1fr; }
.article-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--jsc-ember);
    box-shadow: 0 8px 30px rgba(232,138,60,0.12);
}
.article-card-image {
    aspect-ratio: 4 / 3;
    background: var(--jsc-water);
    border-radius: var(--jsc-radius);
    overflow: hidden;
}
.article-card-image img { width: 100%; height: 100%; object-fit: cover; }
.article-card-body h3 {
    margin: 0.15em 0 0.35em;
    font-size: 1.35rem;
    line-height: 1.2;
}
.article-card-body h3 a { color: var(--jsc-gold); text-decoration: none; }
.article-card-body h3 a:hover { color: var(--jsc-peach); text-decoration: none; }
.article-subtitle {
    color: var(--jsc-ember);
    font-style: italic;
    margin: 0 0 0.75em;
    font-size: 0.95rem;
}
.article-excerpt {
    color: var(--jsc-parchment);
    line-height: 1.6;
    margin: 0.5em 0;
}
.article-meta {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-ui);
    font-size: 0.85rem;
    margin-bottom: 0.35em;
    display: flex;
    gap: 0.5em;
    align-items: center;
    flex-wrap: wrap;
}
.read-more {
    display: inline-block;
    margin-top: 0.5em;
    color: var(--jsc-amber);
    font-family: var(--jsc-font-ui);
    font-size: 0.9rem;
}
.read-more:hover { color: var(--jsc-ember); text-decoration: none; }

/* ─── Single article page ───────────────────────────────────────────────── */
.article-single {
    max-width: 720px;
    margin: 0 auto;
}
.article-header {
    margin-bottom: 3em;
    text-align: center;
}
.article-header h1 {
    font-size: clamp(2rem, 1.75rem + 1.5vw, 3rem);
    margin: 0.35em 0 0.35em;
}
.article-subtitle-large {
    color: var(--jsc-ember);
    font-style: italic;
    font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
    margin: 0 0 1.5em;
}
.article-header .article-meta { justify-content: center; }
.article-hero-image {
    margin: 0 0 3em;
    border-radius: var(--jsc-radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.article-hero-image img { width: 100%; display: block; }

/* ─── Prose (article body) ──────────────────────────────────────────────── */
.prose {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--jsc-cream);
}
/* v0.37.4 — Explicit rules so WYSIWYG inline formatting renders on the front-end.
   Without these, browser defaults get overridden by parent font-weight/color settings. */
.prose strong, .prose b { font-weight: 700; color: var(--jsc-parchment); }
.prose em, .prose i { font-style: italic; }
.prose u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose s, .prose strike, .prose del { text-decoration: line-through; opacity: 0.75; }
/* v0.37.8 — Bulletproof strikethrough via ::after pseudo-element.
   Previous approach used text-decoration + !important + display: inline-block,
   but the strike line was STILL being suppressed on card titles wrapped in
   anchor tags (visible: opacity was applying but no line drawn). Modern
   browsers apparently propagate parent `text-decoration: none` to <s>
   children in ways that even !important can't consistently override.

   This approach draws the line as an absolutely-positioned pseudo-element
   overlaid across the middle of the <s> content. It CANNOT be suppressed
   by any text-decoration cascade because it's a completely separate
   rendering path (a colored div, essentially). */
s, strike, del {
    position: relative;
    display: inline-block;
    opacity: 0.7;
    /* Keep text-decoration too as a fallback for older browsers where
       our pseudo-element approach might fail */
    text-decoration: line-through;
    text-decoration-color: var(--jsc-ember);
    text-decoration-thickness: 2px;
}
s::after, strike::after, del::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--jsc-ember);
    pointer-events: none;
    /* Slight glow so it reads on dark AND light backgrounds */
    box-shadow: 0 0 4px rgba(232, 138, 60, 0.6);
}
.prose mark { background: rgba(232, 138, 60, 0.25); color: var(--jsc-cream); padding: 1px 4px; border-radius: 3px; }
/* Preserve inline styles from WYSIWYG (font-size, color, text-align) that the sanitizer allows on span/div. */
.prose span[style], .prose div[style] { /* style attributes survive sanitization; no override */ }
.prose [style*="text-align: center"] { text-align: center; }
.prose [style*="text-align: right"]  { text-align: right; }
.prose [style*="text-align: left"]   { text-align: left; }
.prose h2, .prose h3, .prose h4 { margin-top: 2em; margin-bottom: 0.5em; }
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.3rem; }
.prose p { margin: 0 0 1.2em; }
.prose a { color: var(--jsc-ember); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--jsc-peach); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.prose li { margin: 0.4em 0; }
.prose blockquote {
    border-left: 3px solid var(--jsc-amber);
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1.5em;
    font-style: italic;
    color: var(--jsc-parchment);
}
.prose img { border-radius: var(--jsc-radius); margin: 1.5em auto; }
.prose figure { margin: 2em 0; }
.prose figcaption {
    color: var(--jsc-fog);
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    margin-top: 0.5em;
}
.prose code {
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.9em;
}
.prose pre {
    background: rgba(0,0,0,0.35);
    padding: 1.25em 1.5em;
    border-radius: var(--jsc-radius);
    overflow-x: auto;
    margin: 1.5em 0;
}
.prose pre code { background: transparent; padding: 0; }

/* ─── Category chips ────────────────────────────────────────────────────── */
.category-chips {
    display: flex;
    gap: 0.6em;
    flex-wrap: wrap;
    margin: 0.5em 0 2em;
    justify-content: center;
}
.chip {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;                               /* v0.31: pill instead of rounded rect */
    background: var(--jsc-water);
    color: var(--jsc-cream);
    font-family: var(--jsc-font-ui);
    font-size: 0.82rem;
    font-weight: 600;                                    /* v0.31: bolder */
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.chip:hover {
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(0,0,0,.35);
    filter: brightness(1.15) saturate(1.2);
}
/* v0.31 — Vibrance boost: brighter hex values + more saturation */
.chip-ember     { background: #F79447;              color: var(--jsc-night); }
.chip-gold      { background: #F0D683;              color: var(--jsc-night); }
.chip-amber     { background: #EFB94F;              color: var(--jsc-night); }
.chip-peach     { background: #FBB871;              color: var(--jsc-night); }
.chip-flame     { background: #E86F3D;              color: var(--jsc-cream); }
.chip-coral     { background: #EF6B58;              color: var(--jsc-cream); }
.chip-blush     { background: #F0A5A5;              color: var(--jsc-night); }
.chip-saffron   { background: #E5A438;              color: var(--jsc-night); }
.chip-moss      { background: #6A8A55;              color: var(--jsc-cream); }
.chip-sage      { background: #9BB37F;              color: var(--jsc-night); }
.chip-forest    { background: #2E7D5B;              color: var(--jsc-cream); }
.chip-seafoam   { background: #6ECBAA;              color: var(--jsc-night); }
.chip-water     { background: #3A6FA8;              color: var(--jsc-cream); }
.chip-sky       { background: #6FB1DA;              color: var(--jsc-night); }
.chip-cobalt    { background: #2E6ABE;              color: var(--jsc-cream); }
.chip-indigo    { background: #6E5FB0;              color: var(--jsc-cream); }
.chip-plum      { background: #9D5A8E;              color: var(--jsc-cream); }
.chip-fog       { background: #8CA0BC;              color: var(--jsc-night); }
.chip-slate     { background: #556680;              color: var(--jsc-cream); }
.chip-parchment { background: var(--jsc-parchment); color: var(--jsc-night); }

/* v0.31 — Chip size variants */
.chip-lg {
    font-size: .95rem;
    padding: 8px 18px;
    letter-spacing: .03em;
}
.chip-xl {
    font-size: 1.1rem;
    padding: 12px 24px;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ─── Category hero ─────────────────────────────────────────────────────── */
/* v0.32 — Cleaner, shorter category hero */
.category-hero {
    padding: 1.5em 0 1.5em;
    text-align: left;
    border-bottom: 1px solid var(--jsc-fog-dim);
    margin-bottom: 2em;
    display: flex;
    align-items: center;
    gap: 1.5em;
    flex-wrap: wrap;
}
.category-hero-swatch {
    width: 6px;
    align-self: stretch;
    min-height: 60px;
    border-radius: 3px;
    flex-shrink: 0;
}
.category-hero-content { flex: 1; min-width: 240px; }
.category-hero .eyebrow {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0 0 0.3em;
}
.category-hero h1 {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
    margin: 0 0 0.15em;
    line-height: 1.1;
}
.category-hero .lede {
    color: var(--jsc-parchment);
    font-size: 1rem;
    margin: 0.3em 0 0;
    max-width: 700px;
}
.category-hero-count {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-mono);
    font-size: .75rem;
    margin-left: auto;
    letter-spacing: .15em;
    text-transform: uppercase;
    align-self: center;
}
/* Color-per-category — accent goes to h1 and to the left swatch */
.category-hero-ember h1 { color: var(--jsc-ember); }
.category-hero-ember .category-hero-swatch { background: var(--jsc-ember); }
.category-hero-gold  h1 { color: var(--jsc-gold);  }
.category-hero-gold  .category-hero-swatch { background: var(--jsc-gold); }
.category-hero-amber h1 { color: var(--jsc-amber); }
.category-hero-amber .category-hero-swatch { background: var(--jsc-amber); }
.category-hero-peach h1 { color: var(--jsc-peach); }
.category-hero-peach .category-hero-swatch { background: var(--jsc-peach); }
.category-hero-flame h1 { color: var(--jsc-flame); }
.category-hero-flame .category-hero-swatch { background: var(--jsc-flame); }
.category-hero-moss  h1 { color: var(--jsc-moss);  }
.category-hero-moss  .category-hero-swatch { background: var(--jsc-moss); }
.category-hero-water h1 { color: var(--jsc-water); }
.category-hero-fog   h1 { color: var(--jsc-parchment); }

/* ─── Related (read next) grid ──────────────────────────────────────────── */
.related {
    margin: 5em auto 0;
    max-width: 900px;
    padding-top: 3em;
    border-top: 1px solid var(--jsc-fog-dim);
}
.related h2 { text-align: center; margin-bottom: 1.5em; }
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5em;
}
.related-card {
    display: block;
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius-lg);
    padding: 1.5em;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--jsc-amber);
    transition: transform 0.15s ease, border-left-color 0.15s ease;
}
.related-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--jsc-ember);
    text-decoration: none;
}
.related-card h4 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    margin: 0 0 0.5em;
    font-size: 1.05rem;
}
.related-card p {
    color: var(--jsc-parchment);
    font-size: 0.9rem;
    margin: 0;
}

/* ─── Responsive: article cards stack on small screens ──────────────────── */
@media (max-width: 640px) {
    .article-card { grid-template-columns: 1fr; gap: 1em; }
    .article-card-image { max-width: 100%; }
}

/* ============================================================================
   v0.4.0 additions — Ideas, Pages, Connect, captcha
   ============================================================================ */

/* ─── Ideas grid ────────────────────────────────────────────────────────── */
.ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5em;
    margin: 2em 0;
}
.ideas-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.idea-card {
    display: block;
    padding: 2em;
    border-radius: var(--jsc-radius-lg);
    text-decoration: none;
    color: inherit;
    background: var(--jsc-dusk);
    border-top: 3px solid var(--jsc-gold);
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: var(--jsc-shadow);
}
.idea-card:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 12px 36px rgba(0,0,0,.4); }
.idea-card h2 { color: var(--jsc-gold); margin: 0 0 .5em; font-size: 1.45rem; }
.idea-card h3 { color: var(--jsc-gold); margin: 0 0 .4em; font-size: 1.15rem; }
.idea-subtitle { color: var(--jsc-parchment); font-style: italic; margin: 0 0 .75em; font-size: .95rem; }
.idea-meta { color: var(--jsc-fog); font-family: var(--jsc-font-ui); font-size: .85rem; margin: 0; }

/* Colour-tinted top border per idea */
.idea-card-ember  { border-top-color: var(--jsc-ember);  } .idea-card-ember  h2,.idea-card-ember  h3 { color: var(--jsc-ember); }
.idea-card-gold   { border-top-color: var(--jsc-gold);   }
.idea-card-amber  { border-top-color: var(--jsc-amber);  } .idea-card-amber  h2,.idea-card-amber  h3 { color: var(--jsc-amber); }
.idea-card-peach  { border-top-color: var(--jsc-peach);  } .idea-card-peach  h2,.idea-card-peach  h3 { color: var(--jsc-peach); }
.idea-card-flame  { border-top-color: var(--jsc-flame);  } .idea-card-flame  h2,.idea-card-flame  h3 { color: var(--jsc-flame); }
.idea-card-moss   { border-top-color: var(--jsc-moss);   } .idea-card-moss   h2,.idea-card-moss   h3 { color: var(--jsc-moss); }
.idea-card-water  { border-top-color: var(--jsc-water);  } .idea-card-water  h2,.idea-card-water  h3 { color: var(--jsc-parchment); }
.idea-card-fog    { border-top-color: var(--jsc-fog);    } .idea-card-fog    h2,.idea-card-fog    h3 { color: var(--jsc-parchment); }

/* ─── Idea hero ─────────────────────────────────────────────────────────── */
.idea-hero { text-align: center; padding: 3em 0 2em; border-bottom: 1px solid var(--jsc-fog-dim); margin-bottom: 3em; }
.idea-hero h1 { font-size: clamp(2.25rem, 2rem + 1.5vw, 3.25rem); }
.idea-hero .lede { color: var(--jsc-parchment); max-width: 560px; margin: .5em auto; font-size: 1.1rem; }
.idea-hero-ember h1 { color: var(--jsc-ember); }
.idea-hero-gold  h1 { color: var(--jsc-gold);  }
.idea-hero-amber h1 { color: var(--jsc-amber); }
.idea-hero-peach h1 { color: var(--jsc-peach); }
.idea-hero-flame h1 { color: var(--jsc-flame); }
.idea-hero-moss  h1 { color: var(--jsc-moss);  }
.idea-hero-water h1, .idea-hero-fog h1 { color: var(--jsc-parchment); }

.idea-connected { margin: 4em 0; }
.idea-connected h2 { margin-bottom: 1em; }

/* ─── About page layout ─────────────────────────────────────────────────── */
.page-about-hero { text-align: center; padding: 2em 0 3em; }
.page-about-hero h1 { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.page-about-hero .lede { color: var(--jsc-ember); font-style: italic; font-size: 1.2rem; max-width: 560px; margin: .5em auto 0; }
.page-about-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4em; align-items: start; margin-top: 2em; }
@media (max-width: 700px) { .page-about-grid { grid-template-columns: 1fr; } }

/* ─── Connect form ──────────────────────────────────────────────────────── */
.connect-shell { max-width: 1200px; margin: 0 auto; }
.connect-form { margin-top: 2em; }
.connect-form .field { margin: 1.25em 0; }
.connect-form label { display: block; font-family: var(--jsc-font-ui); font-size: .85rem; color: var(--jsc-parchment); margin-bottom: .35em; }
.connect-form input, .connect-form select, .connect-form textarea {
    width: 100%; padding: .7em .9em;
    background: var(--jsc-dusk); border: 1px solid var(--jsc-fog-dim); border-radius: var(--jsc-radius);
    color: var(--jsc-cream); font-family: var(--jsc-font-body); font-size: 1rem;
}
.connect-form input:focus, .connect-form select:focus, .connect-form textarea:focus {
    outline: none; border-color: var(--jsc-ember); box-shadow: 0 0 0 3px rgba(232,138,60,.15);
}
.connect-form textarea { min-height: 200px; resize: vertical; }
.connect-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
@media (max-width: 540px) { .connect-form .field-row { grid-template-columns: 1fr; } }

/* ─── Captcha math field ────────────────────────────────────────────────── */
.captcha-math { margin: 1.25em 0; }
.captcha-math label { display: block; font-family: var(--jsc-font-ui); font-size: .85rem; color: var(--jsc-parchment); margin-bottom: .35em; }
.captcha-math input {
    width: 120px; padding: .7em .9em;
    background: var(--jsc-dusk); border: 1px solid var(--jsc-fog-dim); border-radius: var(--jsc-radius);
    color: var(--jsc-cream); font-family: var(--jsc-font-body); font-size: 1rem;
}
.captcha-math input:focus { outline: none; border-color: var(--jsc-ember); }

/* ============================================================================
   v0.8.0: Media content type
   ============================================================================ */

.media-filter {
    display: flex;
    gap: .6em;
    flex-wrap: wrap;
    margin: 1em 0 2em;
}

.media-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
    margin: 2em 0;
}

.media-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5em;
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius-lg);
    padding: 1.25em 1.75em 1.25em 1.25em;
    border-left: 3px solid var(--jsc-water);
    box-shadow: var(--jsc-shadow);
    transition: transform .2s ease, border-left-color .2s ease;
}
.media-card:has(.media-card-body:only-child) { grid-template-columns: 1fr; }
.media-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--jsc-ember);
}
.media-card-image {
    aspect-ratio: 16 / 9;
    background: var(--jsc-water);
    border-radius: var(--jsc-radius);
    overflow: hidden;
}
.media-card-image img { width: 100%; height: 100%; object-fit: cover; }
.media-card-body h3 { margin: .3em 0; font-size: 1.25rem; }
.media-card-body h3 a { color: var(--jsc-gold); text-decoration: none; }
.media-card-body h3 a:hover { color: var(--jsc-peach); text-decoration: none; }

.media-meta {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-ui);
    font-size: .82rem;
    display: flex;
    gap: .5em;
    flex-wrap: wrap;
    align-items: center;
}
.media-type {
    color: var(--jsc-amber);
    font-weight: 500;
}
.media-subtitle {
    color: var(--jsc-parchment);
    font-style: italic;
    margin: .5em 0;
}

/* Single media page */
.media-single { max-width: 800px; margin: 0 auto; }
.media-header { text-align: center; margin-bottom: 2.5em; }
.media-header h1 { font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); }
.media-header .eyebrow {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-ui);
    font-size: .8rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 .5em;
}
.media-header .lede {
    color: var(--jsc-ember);
    font-style: italic;
    font-size: 1.1rem;
    max-width: 560px;
    margin: 0 auto 1em;
}

.media-embed {
    margin: 2em 0;
    border-radius: var(--jsc-radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.media-embed iframe {
    display: block;
    width: 100%;
    min-height: 400px;
    border: 0;
}

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

/* ============================================================================
   v0.9.0: Comments + Search
   ============================================================================ */

/* Public comments */
.comments {
    margin: 4em 0 2em;
    padding-top: 2em;
    border-top: 1px solid var(--jsc-dusk);
    max-width: 720px;
}
.comments > h2 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.75rem;
    margin: 0 0 1em;
}
.comments-empty { color: var(--jsc-fog); font-style: italic; }

.comments-list { display: flex; flex-direction: column; gap: 1.25em; margin-bottom: 2.5em; }
.comment {
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius-lg);
    padding: 1.25em 1.5em;
    border-left: 3px solid var(--jsc-amber);
}
.comment-reply {
    margin-left: 2em;
    margin-top: .75em;
    border-left-color: var(--jsc-water);
    background: rgba(0,0,0,.2);
}
.comment-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    margin-bottom: .5em;
    flex-wrap: wrap;
}
.comment-author {
    color: var(--jsc-gold);
    font-weight: 600;
    font-family: var(--jsc-font-ui);
}
.comment-time {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-ui);
    font-size: .8rem;
}
.comment-body {
    color: var(--jsc-parchment);
    line-height: 1.55;
}
.comment-reply-toggle {
    margin-top: .75em;
    background: none;
    border: 1px solid var(--jsc-fog-dim);
    color: var(--jsc-ember);
    font-family: var(--jsc-font-ui);
    padding: .3em .9em;
    border-radius: 3px;
    cursor: pointer;
    font-size: .8rem;
}
.comment-reply-toggle:hover { border-color: var(--jsc-ember); background: rgba(232,138,60,.08); }

.comment-form-wrap {
    background: var(--jsc-dusk);
    padding: 2em;
    border-radius: var(--jsc-radius-lg);
    border-left: 3px solid var(--jsc-ember);
}
.comment-form-wrap h3 { margin: 0 0 .3em; color: var(--jsc-parchment); }
.comment-form-note { color: var(--jsc-fog); font-size: .85rem; margin: 0 0 1.5em; }
.comments-closed { color: var(--jsc-fog); font-style: italic; text-align: center; padding: 1em; }

.alert {
    padding: 1em 1.25em;
    border-radius: var(--jsc-radius);
    margin-bottom: 1.5em;
    border-left: 3px solid;
}
.alert-ok    { background: rgba(126,165,107,.1);  border-color: var(--jsc-moss); color: var(--jsc-moss); }
.alert-error { background: rgba(217, 94, 44,.1);  border-color: var(--jsc-flame); color: var(--jsc-flame); }

/* Public search */
.site-nav-search input {
    background: rgba(0,0,0,.2);
    border: 1px solid var(--jsc-fog-dim);
    color: var(--jsc-parchment);
    padding: .35em .75em;
    border-radius: 3px;
    font-family: var(--jsc-font-ui);
    font-size: .85rem;
    width: 180px;
}
.site-nav-search input:focus { outline: none; border-color: var(--jsc-ember); background: rgba(0,0,0,.4); }

.search-form {
    margin: 1.5em 0;
}
.search-form input[type="search"] {
    background: var(--jsc-dusk);
    border: 1px solid var(--jsc-fog-dim);
    color: var(--jsc-parchment);
    border-radius: var(--jsc-radius);
    font-family: var(--jsc-font-body);
}

.search-results { display: flex; flex-direction: column; gap: 1.25em; }
.search-hit {
    background: var(--jsc-dusk);
    padding: 1.25em 1.5em;
    border-radius: var(--jsc-radius-lg);
    border-left: 3px solid var(--jsc-water);
    transition: border-left-color .15s ease, transform .15s ease;
}
.search-hit:hover { border-left-color: var(--jsc-amber); transform: translateY(-2px); }
.search-hit-type {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-ui);
    font-size: .7rem;
    letter-spacing: .1em;
    margin-bottom: .3em;
}
.search-hit h3 { margin: 0 0 .4em; font-size: 1.15rem; }
.search-hit h3 a { color: var(--jsc-gold); text-decoration: none; }
.search-hit h3 a:hover { color: var(--jsc-peach); }
.search-hit-excerpt { color: var(--jsc-parchment); font-size: .95rem; margin: .3em 0; }
.search-hit-url { color: var(--jsc-fog); font-family: var(--jsc-font-mono); font-size: .75rem; margin: 0; }

/* ============================================================================
   v0.11.0: Author identity — logo + avatar rendering
   ============================================================================ */

.site-brand-logo {
    display: inline-block;
    max-height: 42px;
    width: auto;
    vertical-align: middle;
    margin-right: .4em;
}

.author-block {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2em;
    margin: 2em 0;
    align-items: start;
}
.author-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--jsc-dusk);
    border: 3px solid var(--jsc-amber);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-name {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 2rem;
    margin: 0 0 .3em;
}
.author-byline {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 1em;
}
.author-bio {
    color: var(--jsc-parchment);
    line-height: 1.65;
    font-size: 1.05rem;
}
.author-socials {
    display: flex;
    gap: .75em;
    margin-top: 1.5em;
    flex-wrap: wrap;
}
.author-socials a {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .4em .9em;
    background: var(--jsc-dusk);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: 20px;
    color: var(--jsc-parchment);
    text-decoration: none;
    font-family: var(--jsc-font-ui);
    font-size: .85rem;
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.author-socials a:hover {
    border-color: var(--jsc-ember);
    color: var(--jsc-ember);
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .author-block { grid-template-columns: 1fr; text-align: center; }
    .author-avatar { margin: 0 auto; }
    .author-socials { justify-content: center; }
}

/* Search results — match highlighting */
mark.search-mark {
    background: rgba(232, 138, 60, .25);
    color: var(--jsc-peach);
    padding: 1px 3px;
    border-radius: 2px;
}

/* Homepage Geewiz strip */
.home-geewiz-strip {
    margin: 4em 0;
}
.home-geewiz-strip h2 { color: var(--jsc-gold); font-family: var(--jsc-font-display); font-size: 1.75rem; }

/* ═══ v0.16.0 — Effects & animation styles ══════════════════════════════ */

/* ─── Page transition ────────────────────────────────────────────── */
.jsc-page-loading { opacity: 0; }
.jsc-page-loaded  {
    opacity: 1;
    transition: opacity .4s ease;
}

/* ─── Hero typing effect ─────────────────────────────────────────── */
.jsc-typing-active::after,
.jsc-typing-done::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--jsc-ember);
    margin-left: 4px;
    vertical-align: text-bottom;
    animation: jsc-blink 1s steps(2) infinite;
}
.jsc-typing-done::after { animation: jsc-blink 1.4s steps(2) infinite; opacity: .5; }
@keyframes jsc-blink { 50% { opacity: 0; } }

/* ─── Fade in on scroll ──────────────────────────────────────────── */
.jsc-fade-pending {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    will-change: opacity, transform;
}
.jsc-faded-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
@media (prefers-reduced-motion: reduce) {
    .jsc-fade-pending { opacity: 1; transform: none; transition: none; }
    .jsc-typing-active::after, .jsc-typing-done::after { animation: none; }
}

/* ─── Hero particles canvas ──────────────────────────────────────── */
canvas.jsc-hero-particles {
    mix-blend-mode: screen;
}

/* ─── Branded context menu ───────────────────────────────────────── */
.jsc-context-menu {
    position: fixed;
    display: none;
    z-index: 9999;
    min-width: 240px;
    background: var(--jsc-dusk, #0f1d2b);
    border: 1px solid var(--jsc-fog-dim, #2c3e50);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    padding: .3em 0;
    font-family: var(--jsc-font-ui, system-ui);
    font-size: .9rem;
    opacity: 0;
    transform: scale(.95) translateY(-4px);
    transform-origin: top left;
    transition: opacity .12s ease-out, transform .12s ease-out;
}
.jsc-context-menu.jsc-cm-open {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.jsc-cm-header {
    padding: .5em 1em .35em;
    border-bottom: 1px solid var(--jsc-fog-dim, #2c3e50);
    margin-bottom: .3em;
    font-family: var(--jsc-font-display, serif);
    color: var(--jsc-gold, #d4b976);
    font-size: 1rem;
}
.jsc-cm-item {
    display: block;
    padding: .45em 1em;
    color: var(--jsc-parchment, #ecebe4);
    text-decoration: none;
    line-height: 1.4;
    transition: background .1s ease, color .1s ease;
}
.jsc-cm-item:hover {
    background: rgba(232,138,60,.15);
    color: var(--jsc-ember, #e88a3c);
}
.jsc-cm-sep {
    height: 1px;
    background: var(--jsc-fog-dim, #2c3e50);
    margin: .3em 0;
}
.jsc-cm-footer {
    padding: .4em 1em;
    color: var(--jsc-fog, #7c8894);
    font-size: .7rem;
    font-style: italic;
}

/* ═══ v0.17.0 — Book landing polish + Book IV coming-soon widget ══════ */
.book-coming-soon-cta {
    background: linear-gradient(135deg, rgba(232,138,60,.1), rgba(212,185,118,.05));
    border: 1px solid rgba(232,138,60,.3);
    border-radius: var(--jsc-radius-lg, 12px);
    padding: 1.5em;
    margin: 1.5em 0;
}
.book-subscribe-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: 1em;
}
.book-subscribe-form input[type=email],
.book-subscribe-form input[type=text] {
    flex: 1 1 200px;
    padding: .55em .8em;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--jsc-fog-dim, #2c3e50);
    border-radius: 6px;
    color: var(--jsc-parchment);
    font-family: var(--jsc-font-body);
    font-size: .95rem;
}
.book-subscribe-form input:focus {
    outline: none;
    border-color: var(--jsc-ember);
}
.book-subscribe-form button {
    flex: 0 0 auto;
    padding: .55em 1.4em;
    background: var(--jsc-ember);
    border: none;
    border-radius: 6px;
    color: white;
    font-family: var(--jsc-font-ui);
    font-weight: 600;
    cursor: pointer;
}
.book-subscribe-form button:hover { background: var(--jsc-flame, #d95e2c); }

.book-review {
    border-left: 3px solid var(--jsc-ember);
    padding-left: 1.25em;
    margin: 1.5em 0;
}
.book-review-quote {
    font-family: var(--jsc-font-display, serif);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--jsc-parchment);
    font-style: italic;
}
.book-review-attribution {
    color: var(--jsc-gold, #d4b976);
    font-family: var(--jsc-font-ui);
    font-size: .85rem;
    margin-top: .5em;
}
.book-review-source { color: var(--jsc-fog, #7c8894); }

.book-media-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.book-media-list li {
    padding: .8em 0;
    border-bottom: 1px solid var(--jsc-fog-dim);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5em;
}
.book-media-list li:last-child { border-bottom: none; }
.book-media-list a {
    color: var(--jsc-amber);
    text-decoration: none;
}
.book-media-list a:hover { color: var(--jsc-ember); }
.book-media-outlet, .book-media-date {
    color: var(--jsc-fog);
    font-size: .85rem;
}

.book-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1em;
    margin-top: 1em;
}
.book-related-card {
    display: block;
    padding: 1em 1.2em;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius, 8px);
    color: var(--jsc-parchment);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.book-related-card:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-2px);
}
.book-related-card h4 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    margin: 0 0 .4em;
    font-size: 1rem;
}
.book-related-card p {
    color: var(--jsc-fog);
    font-size: .85rem;
    margin: 0;
    line-height: 1.5;
}

/* ═══ v0.18/v0.21 — Custom scrollbar (public site) — ember always ══════ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--jsc-ember) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(0, 0, 0, .18); }
*::-webkit-scrollbar-thumb {
    background: var(--jsc-ember);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--jsc-peach);
    background-clip: content-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ═══ v0.21 — Custom dropdown on public site (subscribe forms, etc) ═══ */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--jsc-night);
    color: var(--jsc-parchment);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    padding: .7em 2.4em .7em .9em;
    font-family: var(--jsc-font-ui);
    font-size: .95rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23E88A3C' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1em center;
    background-size: 12px 8px;
}
select:hover { border-color: var(--jsc-ember); }
select:focus {
    outline: none;
    border-color: var(--jsc-ember);
    box-shadow: 0 0 0 3px rgba(232,138,60,.15);
}

/* ═══ v0.23 — WYSIWYG image alignment (public rendering) ═══════════════ */
.prose img.jsc-align-left, article img.jsc-align-left, .card img.jsc-align-left {
    float: left;
    margin: .2em 1.2em .8em 0;
    max-width: 50%;
    border-radius: var(--jsc-radius);
}
.prose img.jsc-align-right, article img.jsc-align-right, .card img.jsc-align-right {
    float: right;
    margin: .2em 0 .8em 1.2em;
    max-width: 50%;
    border-radius: var(--jsc-radius);
}
.prose img.jsc-align-center, article img.jsc-align-center, .card img.jsc-align-center {
    display: block;
    margin: 1em auto;
    float: none;
    max-width: 90%;
    border-radius: var(--jsc-radius);
}

/* ═══ v0.24 — News cards ═══════════════════════════════════════════════ */
.news-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5em;
    padding: 1.4em;
    background: rgba(15, 29, 46, .55);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius-lg, 12px);
    transition: border-color .2s ease, transform .2s ease;
}
.news-card:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-2px);
}
.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--jsc-radius, 8px);
    aspect-ratio: 4 / 3;
    display: block;
}
.news-card-body {
    display: flex;
    flex-direction: column;
    gap: .6em;
}
.news-card-date {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
}
.news-card-title {
    font-family: var(--jsc-font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0;
}
.news-card-title a {
    color: var(--jsc-gold);
    text-decoration: none;
}
.news-card-title a:hover { color: var(--jsc-peach); }
.news-card-excerpt {
    color: var(--jsc-parchment);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
}
.news-card-more a {
    color: var(--jsc-ember);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}
.news-card-more a:hover { color: var(--jsc-peach); }
@media (max-width: 640px) {
    .news-card { grid-template-columns: 1fr; }
    .news-card-image img { aspect-ratio: 16 / 9; }
}

/* ═══ v0.25 — Book series card grid ═══════════════════════════════════ */
.book-series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2em;
    margin-top: 1em;
}
.book-series-card {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--jsc-parchment);
    transition: border-color .2s ease, transform .2s ease;
}
.book-series-card:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-3px);
}
.book-series-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
}
.book-series-card-placeholder {
    aspect-ratio: 2 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: var(--jsc-dusk);
}
.book-series-card-body { padding: .9em 1em 1.1em; }
.book-series-order {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom: .3em;
}
.book-series-card h4 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.05rem;
    margin: 0 0 .3em;
    line-height: 1.2;
}
.book-series-card p {
    color: var(--jsc-fog);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

/* ═══ v0.25 — Home layout redesign ═════════════════════════════════════
   Charlie's sketch:
      menu (header)
      hero slider + tagline line
      book 1 - book 2 - book 3 - book 4
      recent ideas | recent news
      footer
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Hero slider ─── */
.home-hero {
    /* v0.29: full-bleed — break out of the .wrap max-width constraint */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -3em;              /* eat the .site-main top padding */
    position: relative;
    height: 60vh;
    min-height: 400px;
    max-height: 620px;
    overflow: hidden;
    background: var(--jsc-night);
}
.home-hero-slider { position: absolute; inset: 0; }
.home-hero-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    display: block;
}
.home-hero-slide.is-active { opacity: 1; z-index: 1; }
.home-hero-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.55) saturate(1.05);
}
.home-hero-gradient {
    position: absolute; inset: 0;
    background:
      radial-gradient(1200px 500px at 50% 30%, rgba(232,138,60,.28), transparent),
      linear-gradient(160deg, var(--jsc-water) 0%, var(--jsc-night) 100%);
}
.home-hero-overlay {
    position: absolute; inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0%, rgba(14,27,46,.35) 60%, rgba(14,27,46,.85) 100%);
}
.home-hero-tagline-wrap {
    text-align: center;
    padding: 0 1.5em;
    max-width: 900px;
}
.home-hero-eyebrow {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .8rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    margin: 0 0 .8em;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.home-hero-tagline {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: clamp(1.8rem, 4.5vw, 3.4rem);
    line-height: 1.15;
    margin: 0;
    text-shadow: 0 3px 12px rgba(0,0,0,.6);
    font-weight: 400;
}
.home-hero-dots {
    position: absolute;
    bottom: 1.5em;
    left: 0; right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: .6em;
    pointer-events: auto;
}
.home-hero-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.home-hero-dot:hover { background: rgba(255,255,255,.6); }
.home-hero-dot.is-active {
    background: var(--jsc-ember);
    transform: scale(1.3);
}

/* ─── Section heads ─── */
.home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.2em;
    padding: 0 .3em;
}
.home-section-head h2 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.8rem;
    margin: 0;
    letter-spacing: -.01em;
}
.home-section-more {
    color: var(--jsc-ember);
    font-size: .9rem;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.home-section-more:hover { color: var(--jsc-peach); }

/* ─── Books row (4 across) ─── */
.home-books-row {
    max-width: 1200px;
    margin: 4em auto 0;
    padding: 0 1.5em;
}
.home-books-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5em;
}
.home-book-tile {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--jsc-parchment);
    transition: border-color .2s ease, transform .2s ease;
}
.home-book-tile,
.home-book-tile:hover,
.home-book-tile *,
.home-book-tile:hover * {
    text-decoration: none !important;   /* v0.29: no underline anywhere in tile */
}
.home-book-tile:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-4px);
}
.home-book-tile-cover {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--jsc-dusk);
}
.home-book-tile-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.home-book-tile-cover-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
}
.home-book-tile-body { padding: 1em 1.1em 1.2em; }
.home-book-tile-body h3 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.1rem;
    line-height: 1.2;
    margin: 0 0 .4em;
}
.home-book-tile-body p {
    color: var(--jsc-fog);
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

/* ─── Two-column: Recent ideas | Recent news ─── */
.home-two-col {
    max-width: 1200px;
    margin: 4em auto 4em;
    padding: 0 1.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    position: relative;
}
.home-two-col::before {
    content: "";
    position: absolute;
    left: 50%; top: 3em; bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--jsc-fog-dim) 20%, var(--jsc-fog-dim) 80%, transparent);
    transform: translateX(-50%);
    pointer-events: none;
}
.home-col { min-width: 0; }
.home-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.home-list-item {
    display: block;
    padding: 1em 1.1em;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    text-decoration: none;
    color: var(--jsc-parchment);
    transition: border-color .15s ease, background .15s ease;
}
/* v0.33: kill underline anywhere in the item, on hover too */
.home-list-item,
.home-list-item *,
.home-list-item:hover,
.home-list-item:hover * { text-decoration: none !important; }
.home-list-item:hover {
    border-color: var(--jsc-ember);
    background: rgba(232,138,60,.05);
}
.home-list-item-date {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom: .3em;
}
.home-list-item-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.1rem;
    margin-bottom: .3em;
}
.home-list-item-blurb {
    color: var(--jsc-fog);
    font-size: .85rem;
    line-height: 1.55;
}

/* ─── Home responsive ─── */
@media (max-width: 900px) {
    .home-books-grid { grid-template-columns: repeat(2, 1fr); }
    .home-two-col {
        grid-template-columns: 1fr;
        gap: 3em;
    }
    .home-two-col::before { display: none; }
    .home-hero { height: 50vh; min-height: 320px; }
}
@media (max-width: 500px) {
    .home-books-grid { grid-template-columns: 1fr; }
    .home-section-head h2 { font-size: 1.4rem; }
}

/* ═══ v0.26 — Password reveal icon visibility (public login) ═══════════ */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    filter: invert(58%) sepia(87%) saturate(429%) hue-rotate(354deg) brightness(97%) contrast(88%);
    cursor: pointer;
    margin-right: .3em;
}

/* ═══ v0.26 — News single (redesigned) ═════════════════════════════════ */
.news-single { max-width: 100%; }

/* Ambient hero header with parallax-y background image */
.news-single-hero {
    position: relative;
    min-height: 62vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 4em 0 3em;
}
.news-single-hero-scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg,
        rgba(14,27,46,.35) 0%,
        rgba(14,27,46,.55) 60%,
        rgba(14,27,46,.92) 100%);
    z-index: 1;
}
.news-single-hero-content {
    position: relative; z-index: 2;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5em;
}

/* Plain header (no hero image) */
.news-single-plain-header {
    max-width: 780px;
    margin: 3em auto 0;
    padding: 3em 1.5em 1em;
    border-bottom: 1px solid var(--jsc-fog-dim);
}

.news-single-back {
    display: inline-block;
    color: var(--jsc-ember);
    text-decoration: none;
    font-size: .9rem;
    margin-bottom: 1.5em;
    transition: color .15s ease;
}
.news-single-back:hover { color: var(--jsc-peach); }

.news-single-eyebrow {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-mono);
    font-size: .75rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    margin-bottom: 1em;
    opacity: .95;
}
.news-single-title {
    color: var(--jsc-cream);
    font-family: var(--jsc-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.1;
    margin: 0;
    font-weight: 400;
    text-shadow: 0 3px 14px rgba(0,0,0,.5);
    letter-spacing: -.01em;
}

.news-single-body-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 3em 1.5em 2em;
}
.news-single-lede {
    color: var(--jsc-peach);
    font-family: var(--jsc-font-display);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.5;
    margin: 0 0 2.5em;
    padding-left: 1.2em;
    border-left: 3px solid var(--jsc-ember);
}
.news-single-body {
    color: var(--jsc-parchment);
    font-size: 1.08rem;
    line-height: 1.85;
}
.news-single-body p { margin: 0 0 1.4em; }
.news-single-body h2,
.news-single-body h3 {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    margin: 2em 0 .5em;
    font-weight: 400;
}
.news-single-body h2 { font-size: 1.8rem; }
.news-single-body h3 { font-size: 1.35rem; }
.news-single-body a { color: var(--jsc-ember); }
.news-single-body a:hover { color: var(--jsc-peach); }
.news-single-body blockquote {
    border-left: 3px solid var(--jsc-amber);
    padding: .3em 0 .3em 1.4em;
    margin: 2em 0;
    color: var(--jsc-fog);
    font-style: italic;
    font-family: var(--jsc-font-display);
    font-size: 1.15rem;
}
.news-single-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--jsc-radius);
    margin: 1.5em 0;
    display: block;
}

.news-single-ornament {
    text-align: center;
    color: var(--jsc-ember);
    font-size: 1rem;
    letter-spacing: .8em;
    margin: 3em 0 2em;
    opacity: .5;
}

.news-single-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    padding: 2em 0;
    border-top: 1px solid var(--jsc-fog-dim);
    border-bottom: 1px solid var(--jsc-fog-dim);
}
.news-single-byline-label {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: .3em;
}
.news-single-byline-name {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.2rem;
}
.news-single-share {
    display: flex;
    gap: 1em;
    font-size: .85rem;
}
.news-single-share a {
    color: var(--jsc-parchment);
    text-decoration: none;
    padding: .5em 1em;
    border: 1px solid var(--jsc-fog-dim);
    border-radius: 20px;
    transition: border-color .15s ease, color .15s ease;
}
.news-single-share a:hover {
    border-color: var(--jsc-ember);
    color: var(--jsc-ember);
}

.news-single-nav {
    max-width: 900px;
    margin: 3em auto 5em;
    padding: 0 1.5em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
}
.news-single-nav-item {
    padding: 1.4em 1.5em;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
    display: block;
}
.news-single-nav-item:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-2px);
}
.news-single-nav-next { text-align: right; }
.news-single-nav-label {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.news-single-nav-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.1rem;
    line-height: 1.3;
}

/* News single mobile */
@media (max-width: 640px) {
    .news-single-hero { min-height: 50vh; padding: 3em 0 2em; }
    .news-single-lede { font-size: 1.15rem; }
    .news-single-body { font-size: 1rem; }
    .news-single-nav { grid-template-columns: 1fr; }
    .news-single-nav-next { text-align: left; }
}

/* ═══ v0.28 — Back to top button ═══════════════════════════════════════ */
.site-back-to-top {
    position: fixed;
    bottom: 1.6em;
    right: 1.6em;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--jsc-ember);
    color: var(--jsc-night);
    border: 0;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity .25s ease, transform .25s ease, background .15s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 4px rgba(232,138,60,.15);
    z-index: 400;
}
.site-back-to-top:hover {
    background: var(--jsc-peach);
}
.site-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
@media (max-width: 640px) {
    .site-back-to-top {
        bottom: 1em;
        right: 1em;
        width: 42px;
        height: 42px;
    }
}

/* ═══ v0.29 — Grid / List view toggle ══════════════════════════════════ */
.view-toggle {
    display: inline-flex;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.view-toggle a,
.view-toggle button {
    background: transparent;
    border: 0;
    color: var(--jsc-fog);
    padding: .35em 1em;
    border-radius: 999px;
    font-size: .85rem;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--jsc-font-ui);
    display: inline-flex;
    align-items: center;
    gap: .35em;
    transition: background .15s ease, color .15s ease;
}
.view-toggle a:hover { color: var(--jsc-parchment); }
.view-toggle a.is-active {
    background: var(--jsc-ember);
    color: var(--jsc-night);
    font-weight: 600;
}
.view-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
    flex-wrap: wrap;
    gap: 1em;
}

/* List view — horizontal rows (news-card style) */
.content-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.content-list-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5em;
    padding: 1.1em;
    background: rgba(0,0,0,.2);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    text-decoration: none;
    color: var(--jsc-parchment);
    transition: border-color .15s ease, transform .15s ease;
}
.content-list-item:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-2px);
    text-decoration: none;
}
.content-list-item-image {
    aspect-ratio: 4 / 3;
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius);
    overflow: hidden;
}
.content-list-item-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.content-list-item-image-placeholder {
    display: flex; align-items: center; justify-content: center;
    height: 100%;
    font-size: 2rem;
    opacity: .3;
}
.content-list-item-body { min-width: 0; }
.content-list-item-eyebrow {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: .4em;
}
.content-list-item-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.3rem;
    margin: 0 0 .4em;
    line-height: 1.25;
}
.content-list-item-excerpt {
    color: var(--jsc-parchment);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0;
}

/* Grid view — 2-col card grid */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5em;
}
.content-grid-item {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.25);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--jsc-parchment);
    transition: border-color .15s ease, transform .15s ease;
}
.content-grid-item:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-3px);
    text-decoration: none;
}
.content-grid-item,
.content-grid-item * { text-decoration: none !important; }
.content-grid-item-image {
    aspect-ratio: 16 / 10;
    background: var(--jsc-dusk);
    overflow: hidden;
}
.content-grid-item-image img { width:100%; height:100%; object-fit:cover; display:block; }
.content-grid-item-body { padding: 1.2em; flex: 1; display: flex; flex-direction: column; }
.content-grid-item-eyebrow {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .68rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom: .4em;
}
.content-grid-item-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0 0 .4em;
    flex-shrink: 0;
}
.content-grid-item-excerpt {
    color: var(--jsc-parchment);
    font-size: .88rem;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

@media (max-width: 600px) {
    .content-list-item { grid-template-columns: 1fr; }
    .content-list-item-image { aspect-ratio: 16 / 9; }
}

/* ═══ v0.30 — Home: Recent News + Featured Article ═══════════════════ */
.home-news-and-article {
    max-width: 1200px;
    margin: 4em auto 3em;
    padding: 0 1.5em;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3em;
    align-items: start;
}
.home-news-col { min-width: 0; }
.home-article-col { min-width: 0; }

.home-article-square {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius-lg, 12px);
    overflow: hidden;
    text-decoration: none;
    color: var(--jsc-parchment);
    transition: border-color .2s ease, transform .2s ease;
    aspect-ratio: 1 / 1.05;             /* nearly square with slight vertical bias */
}
.home-article-square,
.home-article-square * { text-decoration: none !important; }
.home-article-square:hover {
    border-color: var(--jsc-ember);
    transform: translateY(-4px);
}
.home-article-square-image {
    height: 46%;
    overflow: hidden;
    background: var(--jsc-dusk);
    flex-shrink: 0;
}
.home-article-square-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.home-article-square-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    opacity: .3;
}
.home-article-square-body {
    padding: 1.5em 1.6em 1.6em;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.home-article-square-date {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.home-article-square-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 .6em;
    letter-spacing: -.01em;
}
.home-article-square-excerpt {
    color: var(--jsc-parchment);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 1.2em;
    flex: 1;
    overflow: hidden;
}
.home-article-square-cta {
    color: var(--jsc-ember);
    font-size: .9rem;
    font-weight: 600;
    margin-top: auto;
}

/* ═══ v0.30 — Home: Featured Idea full-width band ═════════════════════ */
.home-featured-idea {
    /* Break out of parent wrap to be full-bleed */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4em 0;
    margin-top: 3em;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(1000px 300px at 50% 50%, rgba(232,138,60,.08), transparent),
      linear-gradient(180deg, rgba(14,27,46,.4) 0%, rgba(14,27,46,0) 100%);
}
.home-featured-idea::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jsc-fog-dim) 20%, var(--jsc-fog-dim) 80%, transparent);
}
.home-featured-idea::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jsc-fog-dim) 20%, var(--jsc-fog-dim) 80%, transparent);
}
.home-featured-idea-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2em;
    text-align: center;
    position: relative;
}
.home-featured-idea-eyebrow {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-mono);
    font-size: .75rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    margin-bottom: 1.5em;
}
.home-featured-idea-eyebrow a {
    color: var(--jsc-ember);
    text-decoration: none;
    margin-left: 1em;
}
.home-featured-idea-eyebrow a:hover { color: var(--jsc-peach); }
.home-featured-idea-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.home-featured-idea-link,
.home-featured-idea-link * { text-decoration: none !important; }
.home-featured-idea-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin: 0 0 .5em;
    font-weight: 400;
    letter-spacing: -.01em;
    transition: color .15s ease;
}
.home-featured-idea-link:hover .home-featured-idea-title { color: var(--jsc-peach); }
.home-featured-idea-subtitle {
    color: var(--jsc-peach);
    font-family: var(--jsc-font-display);
    font-style: italic;
    font-size: 1.25rem;
    margin: 0 0 1em;
    line-height: 1.4;
}
.home-featured-idea-tagline {
    color: var(--jsc-parchment);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 auto 1.5em;
    max-width: 700px;
}
.home-featured-idea-cta {
    display: inline-block;
    color: var(--jsc-ember);
    font-size: .95rem;
    font-weight: 600;
    padding: .6em 1.5em;
    border: 1px solid var(--jsc-ember);
    border-radius: 30px;
    transition: background .15s ease, color .15s ease;
}
.home-featured-idea-link:hover .home-featured-idea-cta {
    background: var(--jsc-ember);
    color: var(--jsc-night);
}

/* Idea accent tints for the band */
.home-featured-idea-ember   { background-image: radial-gradient(1000px 300px at 50% 50%, rgba(232,138,60,.10), transparent); }
.home-featured-idea-gold    { background-image: radial-gradient(1000px 300px at 50% 50%, rgba(232,204,133,.08), transparent); }
.home-featured-idea-amber   { background-image: radial-gradient(1000px 300px at 50% 50%, rgba(217,164,65,.10), transparent); }
.home-featured-idea-peach   { background-image: radial-gradient(1000px 300px at 50% 50%, rgba(240,181,112,.10), transparent); }
.home-featured-idea-moss    { background-image: radial-gradient(1000px 300px at 50% 50%, rgba(143,164,120,.10), transparent); }
.home-featured-idea-water   { background-image: radial-gradient(1000px 300px at 50% 50%, rgba(42,74,110,.15), transparent); }
.home-featured-idea-flame   { background-image: radial-gradient(1000px 300px at 50% 50%, rgba(217,101,56,.12), transparent); }

/* Responsive */
@media (max-width: 900px) {
    .home-news-and-article {
        grid-template-columns: 1fr;
        gap: 3em;
    }
    .home-article-square { aspect-ratio: auto; min-height: 480px; }
}
@media (max-width: 500px) {
    .home-featured-idea { padding: 3em 0; }
    .home-featured-idea-inner { padding: 0 1em; }
}

/* ═══ v0.31 — Where to buy strip ══════════════════════════════════════ */
.where-to-buy {
    max-width: 1200px;
    margin: 3em auto 1em;
    padding: 2em 1.5em;
}
.where-to-buy-inner {
    background: linear-gradient(135deg, rgba(232,138,60,.05) 0%, rgba(232,204,133,.05) 100%);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius-lg, 12px);
    padding: 2em;
    text-align: center;
}
.where-to-buy-head { margin-bottom: 1.5em; }
.where-to-buy-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.8rem;
    margin: 0 0 .3em;
    font-weight: 400;
}
.wtb-book-suffix {
    color: var(--jsc-ember);
    font-style: italic;
    font-size: .85em;
}
.where-to-buy-sub {
    color: var(--jsc-fog);
    font-size: .95rem;
    margin: 0;
}
.where-to-buy-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8em;
}
.wtb-chip {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .7em 1.3em;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--jsc-font-ui);
    font-weight: 600;
    font-size: .95rem;
    border: 1.5px solid transparent;
    background: rgba(0,0,0,.35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.wtb-chip:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,.4);
    filter: brightness(1.15) saturate(1.2);
}
.wtb-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(255,255,255,.15);
    font-size: 1rem;
    flex-shrink: 0;
    font-weight: 800;
}
.wtb-chip-arrow { font-size: .9em; opacity: .7; }
.wtb-chip-ember   { color: #FBB871; border-color: #F79447; background: rgba(247,148,71,.14); }
.wtb-chip-amber   { color: #EFB94F; border-color: #EFB94F; background: rgba(239,185,79,.12); }
.wtb-chip-flame   { color: #F0A883; border-color: #E86F3D; background: rgba(232,111,61,.15); }
.wtb-chip-water   { color: #7CA4C7; border-color: #3A6FA8; background: rgba(58,111,168,.15); }
.wtb-chip-peach   { color: #FBB871; border-color: #FBB871; background: rgba(251,184,113,.12); }
.wtb-chip-moss    { color: #9BB37F; border-color: #6A8A55; background: rgba(106,138,85,.15); }
.wtb-chip-gold    { color: #F0D683; border-color: #F0D683; background: rgba(240,214,131,.12); }
.wtb-chip-coral   { color: #EF9887; border-color: #EF6B58; background: rgba(239,107,88,.15); }
.where-to-buy-note {
    color: var(--jsc-fog);
    font-size: .8rem;
    margin: 1.5em 0 0;
    font-style: italic;
}
@media (max-width: 500px) {
    .where-to-buy-inner { padding: 1.5em 1em; }
    .wtb-chip { padding: .6em 1em; font-size: .9rem; }
}

/* ═══ v0.31 — Series showcase ═════════════════════════════════════════ */
.home-series {
    max-width: 1200px;
    margin: 3em auto;
    padding: 0 1.5em;
}
.home-series-inner {
    padding: 2em;
    background: rgba(0,0,0,.2);
    border-radius: var(--jsc-radius-lg, 12px);
    border-left: 3px solid var(--jsc-gold);
}
.home-series-lead {
    color: var(--jsc-fog);
    margin: .5em 0 1.5em;
    font-size: .95rem;
}
.home-series-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1em;
}
.home-series-item { margin: 0; }
.home-series-link {
    display: block;
    padding: 1.2em 1.4em;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.home-series-link,
.home-series-link * { text-decoration: none !important; }
.home-series-link:hover {
    border-color: var(--jsc-gold);
    transform: translateX(4px);
}
.home-series-item-name {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.25rem;
    margin-bottom: .2em;
    letter-spacing: -.01em;
}
.home-series-item-tagline {
    color: var(--jsc-parchment);
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: .5em;
}
.home-series-item-count {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}

/* ═══ v0.31 — Explore categories section ══════════════════════════════ */
.explore-categories {
    max-width: 1200px;
    margin: 3em auto;
    padding: 0 1.5em;
}
.explore-categories-inner {
    padding: 3em 2em;
    background:
      radial-gradient(600px 200px at 30% 0%, rgba(239,185,79,.08), transparent),
      radial-gradient(600px 200px at 70% 100%, rgba(106,138,85,.08), transparent),
      rgba(0,0,0,.25);
    border-radius: var(--jsc-radius-lg, 12px);
    border: 1px solid var(--jsc-fog-dim);
    text-align: center;
}
.explore-categories-eyebrow {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.explore-categories-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 2.1rem;
    margin: 0 0 .3em;
    font-weight: 400;
}
.explore-categories-subline {
    color: var(--jsc-parchment);
    font-size: 1rem;
    margin: 0 0 2em;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.explore-categories-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75em;
}
@media (max-width: 500px) {
    .explore-categories-inner { padding: 2em 1em; }
    .explore-categories-title { font-size: 1.6rem; }
}

/* ═══ v0.32 — Clean intro hero for index pages ═══════════════════════ */
.articles-intro {
    max-width: 900px;
    margin: 0 auto 2em;
    padding: 2em 0 1.5em;
}
.articles-intro-eyebrow {
    color: var(--jsc-ember);
    font-family: var(--jsc-font-mono);
    font-size: .75rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin: 0 0 .5em;
}
.articles-intro-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    margin: 0 0 .3em;
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -.015em;
}
.articles-intro-lede {
    color: var(--jsc-parchment);
    font-size: 1.1rem;
    line-height: 1.65;
    max-width: 640px;
    margin: 0;
}

/* ═══ v0.32 — Connect page two-column ═════════════════════════════════ */
.connect-two-col {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3em;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}
.connect-form-col { min-width: 0; }
.connect-info-col {
    background: rgba(0,0,0,.25);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius-lg, 12px);
    padding: 2em 1.8em;
    position: sticky;
    top: 6em;
}
.connect-col-title {
    color: var(--jsc-gold);
    font-family: var(--jsc-font-display);
    font-size: 1.4rem;
    margin: 0 0 1.2em;
    font-weight: 400;
    letter-spacing: -.01em;
}
.connect-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2em;
}
.connect-info-item {
    display: flex;
    gap: 1em;
    padding: .8em 0;
    border-bottom: 1px solid var(--jsc-fog-dim);
    align-items: flex-start;
}
.connect-info-item:last-child { border-bottom: 0; }
.connect-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(232,138,60,.15);
    color: var(--jsc-ember);
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 1rem;
}
.connect-info-label {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom: .15em;
}
.connect-info-value {
    color: var(--jsc-parchment);
    font-size: .95rem;
    line-height: 1.4;
}
a.connect-info-value {
    color: var(--jsc-ember);
    text-decoration: none;
    border-bottom: 1px dotted rgba(232,138,60,.4);
}
a.connect-info-value:hover { color: var(--jsc-peach); border-bottom-color: var(--jsc-peach); }
.connect-socials-block {
    padding-top: 1em;
    border-top: 1px solid var(--jsc-fog-dim);
}
.connect-socials-title {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin: 0 0 1em;
}
.connect-socials-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.connect-social-chip {
    display: inline-flex;
    align-items: center;
    gap: .8em;
    color: var(--jsc-parchment);
    text-decoration: none;
    padding: .4em 0;
    font-size: .95rem;
    transition: color .15s ease;
}
.connect-social-chip:hover { color: var(--jsc-ember); }
.connect-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    background: rgba(232,138,60,.12);
    color: var(--jsc-ember);
    border-radius: 6px;
    font-size: .9rem;
    line-height: 1;
    flex-shrink: 0;
    font-weight: 700;
}
.connect-privacy {
    color: var(--jsc-fog);
    font-size: .8rem;
    line-height: 1.5;
    margin: 2em 0 0;
    padding-top: 1em;
    border-top: 1px solid var(--jsc-fog-dim);
    font-style: italic;
}
@media (max-width: 900px) {
    .connect-two-col { grid-template-columns: 1fr; gap: 2em; }
    .connect-info-col { position: static; }
}

/* ═══ v0.32 — Public gallery rendering ══════════════════════════════ */
.jsc-gallery { margin: 2em 0; }
.jsc-gallery-title {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .25em;
    margin-top: .8em;
    text-align: center;
}
.jsc-gallery-inner {
    display: grid;
    gap: 1em;
}
.jsc-gallery-grid .jsc-gallery-inner    { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.jsc-gallery-masonry .jsc-gallery-inner {
    column-count: 3;
    column-gap: 1em;
    display: block;
}
.jsc-gallery-masonry .jsc-gallery-item {
    break-inside: avoid;
    margin-bottom: 1em;
}
.jsc-gallery-carousel .jsc-gallery-inner {
    grid-auto-flow: column;
    grid-auto-columns: 320px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5em;
}
.jsc-gallery-carousel .jsc-gallery-item { scroll-snap-align: start; }
.jsc-gallery-item {
    margin: 0;
    border-radius: var(--jsc-radius);
    overflow: hidden;
    background: rgba(0,0,0,.25);
}
.jsc-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}
.jsc-gallery-item figcaption {
    padding: .6em .9em;
    color: var(--jsc-parchment);
    font-size: .85rem;
    font-style: italic;
}
.jsc-gallery-stage {
    position: relative;
    background: var(--jsc-dusk);
    border-radius: var(--jsc-radius);
    overflow: hidden;
}
.jsc-gallery-slide { display: none; }
.jsc-gallery-slide.is-active { display: block; }
.jsc-gallery-slide img { width: 100%; height: auto; display: block; }
.jsc-gallery-slide figcaption {
    padding: .8em 1em;
    color: var(--jsc-parchment);
    text-align: center;
}
.jsc-gallery-prev, .jsc-gallery-next {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.5);
    color: white;
    border: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
}
.jsc-gallery-prev { left: 1em; }
.jsc-gallery-next { right: 1em; }
.jsc-gallery-dots {
    position: absolute;
    bottom: 1em;
    left: 50%; transform: translateX(-50%);
    display: flex;
    gap: 6px;
}
.jsc-gallery-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.4);
    cursor: pointer;
}
.jsc-gallery-dot.is-active { background: var(--jsc-ember); }
@media (max-width: 700px) {
    .jsc-gallery-masonry .jsc-gallery-inner { column-count: 2; }
    .jsc-gallery-carousel .jsc-gallery-inner { grid-auto-columns: 260px; }
}

/* v0.32 — Category hero color variants (extending base 6) */
.category-hero-coral h1     { color: #EF6B58; }  .category-hero-coral .category-hero-swatch     { background: #EF6B58; }
.category-hero-blush h1     { color: #F0A5A5; }  .category-hero-blush .category-hero-swatch     { background: #F0A5A5; }
.category-hero-saffron h1   { color: #E5A438; }  .category-hero-saffron .category-hero-swatch   { background: #E5A438; }
.category-hero-sage h1      { color: #9BB37F; }  .category-hero-sage .category-hero-swatch      { background: #9BB37F; }
.category-hero-forest h1    { color: #2E7D5B; }  .category-hero-forest .category-hero-swatch    { background: #2E7D5B; }
.category-hero-seafoam h1   { color: #6ECBAA; }  .category-hero-seafoam .category-hero-swatch   { background: #6ECBAA; }
.category-hero-water h1     { color: #3A6FA8; }  .category-hero-water .category-hero-swatch     { background: #3A6FA8; }
.category-hero-sky h1       { color: #6FB1DA; }  .category-hero-sky .category-hero-swatch       { background: #6FB1DA; }
.category-hero-cobalt h1    { color: #2E6ABE; }  .category-hero-cobalt .category-hero-swatch    { background: #2E6ABE; }
.category-hero-indigo h1    { color: #6E5FB0; }  .category-hero-indigo .category-hero-swatch    { background: #6E5FB0; }
.category-hero-plum h1      { color: #9D5A8E; }  .category-hero-plum .category-hero-swatch      { background: #9D5A8E; }
.category-hero-fog h1       { color: #8CA0BC; }  .category-hero-fog .category-hero-swatch       { background: #8CA0BC; }
.category-hero-slate h1     { color: #556680; }  .category-hero-slate .category-hero-swatch     { background: #556680; }
.category-hero-parchment h1 { color: var(--jsc-parchment); } .category-hero-parchment .category-hero-swatch { background: var(--jsc-parchment); }

/* ═══ v0.33 — Articles side-by-side header ══════════════════════════ */
.articles-header {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 3em;
    max-width: 1200px;
    margin: 0 auto 1em;
    padding: 1.5em 0 1em;
    align-items: start;
}
.articles-header-intro { min-width: 0; }
.articles-header-intro .articles-intro-title {
    font-size: clamp(2rem, 1.7rem + 1.5vw, 2.7rem);
    margin: 0 0 .3em;
    line-height: 1.05;
}
.articles-header-intro .articles-intro-lede {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 540px;
    margin: 0;
}
.articles-header-filter {
    background: linear-gradient(135deg, rgba(232,138,60,.06) 0%, rgba(143,164,120,.06) 100%);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius-lg, 12px);
    padding: 1.2em 1.3em;
    align-self: stretch;
}
.articles-filter-eyebrow {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: .8em;
}
.articles-filter-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}
@media (max-width: 800px) {
    .articles-header { grid-template-columns: 1fr; gap: 1.5em; padding-top: 1em; }
}

/* Old .articles-intro (v0.32) can still exist for other pages, so leave it. */

/* ═══ v0.35 — Social share panel ═══════════════════════════════════════ */
.share-panel {
    max-width: 800px;
    margin: 3em auto 2em;
    padding: 1.5em 1.6em;
    background: linear-gradient(135deg, rgba(232,138,60,.05) 0%, rgba(58,111,168,.05) 100%);
    border: 1px solid var(--jsc-fog-dim);
    border-radius: var(--jsc-radius-lg, 12px);
    text-align: center;
}
.share-panel-eyebrow {
    color: var(--jsc-amber);
    font-family: var(--jsc-font-mono);
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin: 0 0 1.1em;
}
.share-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6em;
}
.share-chip {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .55em 1.05em;
    border-radius: 999px;
    background: rgba(0,0,0,.3);
    color: var(--jsc-parchment);
    border: 1.5px solid var(--jsc-fog-dim);
    font-family: var(--jsc-font-ui);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.share-chip:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.share-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 5px;
    background: rgba(255,255,255,.12);
    font-size: .9rem;
    line-height: 1;
    flex-shrink: 0;
    font-weight: 800;
}
/* Per-network accent on hover — sourced from each brand's key color */
.share-chip-x:hover        { border-color: #ffffff; color: #ffffff; }
.share-chip-facebook:hover { border-color: #1877F2; color: #4E9DEE; background: rgba(24,119,242,.12); }
.share-chip-linkedin:hover { border-color: #0A66C2; color: #4E9DEE; background: rgba(10,102,194,.12); }
.share-chip-reddit:hover   { border-color: #FF4500; color: #FF7A45; background: rgba(255,69,0,.10); }
.share-chip-bluesky:hover  { border-color: #1DA1F2; color: #6FB1DA; background: rgba(29,161,242,.10); }
.share-chip-email:hover    { border-color: var(--jsc-amber); color: var(--jsc-amber); }
.share-chip-copy:hover     { border-color: var(--jsc-ember); color: var(--jsc-ember); }
.share-chip-native:hover   { border-color: var(--jsc-gold); color: var(--jsc-gold); }
@media (max-width: 500px) {
    .share-chip { padding: .5em .8em; font-size: .82rem; }
    .share-chip-label { display: none; }
    .share-chip-icon { width: 26px; height: 26px; font-size: 1rem; }
}

/* ═══ v0.36 — Draft preview banner ═════════════════════════════════ */
.draft-preview-banner {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .7em 1.4em;
    background: linear-gradient(135deg, #C8973E 0%, #B67628 100%);
    color: #0E1B2E;
    font-family: var(--jsc-font-ui);
    font-size: .9rem;
    border-bottom: 2px solid #8B5A1F;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.draft-preview-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.draft-preview-text { line-height: 1.4; }
.draft-preview-banner strong { font-weight: 700; }

/* ═══ v0.36 — Comment edit UI ═════════════════════════════════════ */
.comment-edited {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    margin-left: .3em;
}
.comment-edit-wrap { margin-top: .6em; }
.comment-edit-toggle {
    background: transparent;
    border: 0;
    color: var(--jsc-ember);
    font-family: var(--jsc-font-ui);
    font-size: .82rem;
    cursor: pointer;
    padding: .2em 0;
}
.comment-edit-toggle:hover { color: var(--jsc-peach); }
.comment-edit-countdown {
    color: var(--jsc-fog);
    font-family: var(--jsc-font-mono);
    font-size: .72rem;
    margin-left: .3em;
}
.comment-edit-form {
    margin-top: .8em;
    padding: 1em;
    background: rgba(0,0,0,.25);
    border-radius: var(--jsc-radius);
    border: 1px solid var(--jsc-fog-dim);
}
.comment-edit-form textarea {
    width: 100%;
    background: rgba(0,0,0,.35);
    border: 1px solid var(--jsc-fog-dim);
    color: var(--jsc-parchment);
    padding: .7em;
    border-radius: 6px;
    font-family: var(--jsc-font-body);
    font-size: .95rem;
    resize: vertical;
}
.comment-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5em;
    margin-top: .8em;
}

/* ═══ v0.37.1 — Home firefly backdrop ═════════════════════════════ */
.jsc-firefly-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;   /* CRITICAL: never block nav clicks */
    overflow: hidden;
}
.home-hero, .home-section { position: relative; z-index: 1; }
#jsc-fireflies {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* also on the canvas itself */
}
@media (max-width: 700px) {
    #jsc-fireflies { opacity: 0.85; }
}

/* ═══ v0.37 — Connect typewriter smoke ═════════════════════════════ */
.jsc-typewriter-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
}
.connect-shell { position: relative; z-index: 1; }
.jsc-tw-word {
    position: absolute;
    color: var(--jsc-ember);
    font-family: var(--jsc-font-display);
    font-size: clamp(2.5rem, 4vw + 1rem, 5rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    filter: blur(0.5px);
    transition: filter 2.5s ease-out, opacity 2.5s ease-out, transform 2.5s ease-out;
    text-shadow: 0 0 40px rgba(232, 138, 60, 0.4);
    user-select: none;
}
.jsc-tw-char {
    display: inline-block;
    animation: jsc-tw-char-in .35s ease-out both;
}
@keyframes jsc-tw-char-in {
    from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0);   }
}
.jsc-tw-word.is-dissolving {
    filter: blur(24px);
    opacity: 0;
    transform: translate(-50%, -110%) scale(1.15);
}
@media (prefers-reduced-motion: reduce) {
    .jsc-tw-char { animation: none; }
    .jsc-tw-word { transition: none; }
}
@media (max-width: 700px) {
    .jsc-tw-word { font-size: clamp(1.8rem, 8vw, 3rem); }
    .jsc-typewriter-stage { opacity: 0.35; }
}

/* ═══ v0.37.3 — Media library lightbox ════════════════════════════ */
.jsc-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 22, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 3em 2em;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.jsc-lightbox.is-open {
    display: flex;
    opacity: 1;
}
.jsc-lightbox-frame {
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8em;
}
.jsc-lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--jsc-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    background: #0e1b2e;
    image-rendering: -webkit-optimize-contrast;
}
.jsc-lightbox-caption {
    color: var(--jsc-parchment);
    font-family: var(--jsc-font-mono);
    font-size: 0.85rem;
    text-align: center;
    max-width: 90vw;
    word-break: break-all;
    opacity: 0.85;
}
.jsc-lightbox-close {
    position: absolute;
    top: 1em;
    right: 1em;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--jsc-parchment);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsc-lightbox-close:hover {
    background: rgba(232, 138, 60, 0.3);
    color: var(--jsc-ember);
}
.jsc-lightbox-thumb {
    transition: transform 0.15s ease-out;
}
.jsc-lightbox-thumb:hover {
    transform: scale(1.02);
}

/* ═══ v0.37.4 — WYSIWYG font-size dropdown ═════════════════════════ */
.jsc-wysiwyg-fontsize {
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: var(--jsc-parchment);
    font-family: var(--jsc-font-ui);
    font-size: .82rem;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 4px;
}
.jsc-wysiwyg-fontsize:hover { border-color: var(--jsc-ember); }
.jsc-wysiwyg-fontsize option { background: var(--jsc-charcoal); color: var(--jsc-parchment); }

/* ═══ v0.37.13 — Book PDF download button ══════════════════════════
   Prominent standout button on the book page, warm ember gradient,
   subtle glow to draw the eye. Sits below buy-links in the hero block. */
.book-pdf-download {
    margin-top: 1.5em;
}
.btn-pdf-download {
    display: inline-flex;
    align-items: center;
    gap: .85em;
    padding: .95em 1.6em;
    background: linear-gradient(135deg, var(--jsc-ember, #e88a3c) 0%, var(--jsc-gold, #e2b45c) 100%);
    color: var(--jsc-charcoal, #252a3a);
    font-family: var(--jsc-font-ui);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(232, 138, 60, .35), 0 0 0 1px rgba(255, 220, 170, .25) inset;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    letter-spacing: .01em;
}
.btn-pdf-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(232, 138, 60, .5), 0 0 0 1px rgba(255, 220, 170, .4) inset;
    filter: brightness(1.06);
}
.btn-pdf-download:active {
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(232, 138, 60, .4), 0 0 0 1px rgba(255, 220, 170, .3) inset;
}
.btn-pdf-icon {
    font-size: 1.4rem;
    line-height: 1;
    animation: pdf-bounce 2.4s ease-in-out infinite;
}
.btn-pdf-label {
    /* main label */
}
.btn-pdf-meta {
    font-weight: 500;
    font-size: .8rem;
    padding-left: .75em;
    margin-left: .25em;
    border-left: 1px solid rgba(37, 42, 58, .25);
    opacity: .75;
}
@keyframes pdf-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-pdf-icon { animation: none; }
    .btn-pdf-download:hover { transform: none; }
}
@media (max-width: 600px) {
    .btn-pdf-download { flex-wrap: wrap; padding: .8em 1.2em; font-size: .95rem; }
    .btn-pdf-meta { border-left: none; padding-left: 0; margin-left: 0; }
}