/* ============================================================
   adrenaline-lab-overrides.css — Adrenaline Lab brand overlay
   for Casper 5.12.0 (Ghost 6.44.1). Loaded AFTER built/screen.css
   in default.hbs. No rebuild of the Casper gulp/postcss chain —
   pure additive override layer (anchor-theme pattern, see
   ghost-theme-designer skill / casper-wiki4what v1.0.3).

   v1.0.1 (2026-07-19): brand covers are ALWAYS dark → real-cover hero
   (:has(.site-header-cover)) text/logos/nav/burger = Lotion in every
   scheme; Subscribe pill → lotion-on-sooty; mobile sheet → sooty; inner
   nav bar unified to Sooty+Lotion in all schemes.

   Token sources (do not invent hex here):
   - leo-design-language skill / website_manager/global/tokens.css
     lotion #faf9f5 · salt #f0eee6 · sooty #141414 · noir #2c2b26
     last-straw #e3dacc · black-mana #858585 · argent #888888
     mellow-marrow #ebc9b7 · banana-republic #ffe292
   - adrenaline_factory/documentation/configuration.json → brand:
     accent    = peachy-feeling #d97757 (signature)
     links     = assassin #2d4f83 (light) / peachy #d97757 (dark;
                 6.1:1 on sooty, AA — peachy on lotion is only 3.0:1,
                 so light-mode small text never carries peachy)
     dark mode = sooty #141414 canvas + lotion text (per brand spec;
                 differs from wiki4what's noir canvas — noir here is
                 the raised dark SURFACE, per leo-design dark law)
   English-only blog: Latin TTFs self-hosted, NO Chinese woff2
   (system CJK fallback is intentional — see casper-anatomy.md).
   Typeface roles ride Casper's own switches (set as theme defaults):
   title_font "Elegant serif" → --font-serif = Leo Lexend (Bold titles),
   body_font "Modern sans-serif" → --font-sans = Leo Ubuntu.
   ============================================================ */

/* ---- 1. Self-hosted fonts (assets/fonts/, from website_manager) ---- */
@font-face { font-family: "Leo Ubuntu"; src: url("../fonts/Ubuntu-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Leo Ubuntu"; src: url("../fonts/Ubuntu-Medium.ttf");  font-weight: 500; font-display: swap; }
@font-face { font-family: "Leo Ubuntu"; src: url("../fonts/Ubuntu-Bold.ttf");    font-weight: 700; font-display: swap; }
@font-face { font-family: "Leo Lexend"; src: url("../fonts/Lexend-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Leo Lexend"; src: url("../fonts/Lexend-Bold.ttf");    font-weight: 700; font-display: swap; }

/* ---- 2. Casper variable remap (Leo palette, Adrenaline dark canvas) ---- */
:root {
    /* Fallback only — the real accent is set in Ghost Admin → Design →
       Brand (ghost_head injects it after this sheet, so Admin wins). */
    --ghost-accent-color: #d97757;          /* peachy-feeling */

    --color-darkgrey: #141414;              /* sooty: main text / darkest bg */
    --color-midgrey: #888888;               /* argent: secondary text */
    --color-lightgrey: #f0eee6;             /* salt: soft surface */
    --color-secondary-text: #888888;        /* argent */
    --color-border: #e3dacc;                /* last-straw: light borders */
    --color-wash: #f0eee6;                  /* salt (replaces cool blue wash) */
    --color-darkmode: #141414;              /* sooty: dark-mode canvas (brand spec) */

    --font-sans: "Leo Ubuntu", "Ubuntu", "Trebuchet MS", Tahoma, ui-sans-serif, system-ui, sans-serif;
    --font-serif: "Leo Lexend", "Lexend", Georgia, serif;
}

/* Canvas: Casper body is #fff — press it down to Lotion. */
body { background: #faf9f5; }

/* Base anchor color: Casper bakes #15171a — align to sooty. */
a { color: #141414; }

/* ---- 3. Adrenaline Lab semantic layer ---- */

/* Content links: assassin, hover peachy (signature warm flash). */
.gh-content a { color: #2d4f83; }
.gh-content a:hover { color: #d97757; }

/* "Featured" label + card series tag: peachy fails AA as small text on
   lotion — use assassin in light mode (peachy takes over in dark). */
.post-card-featured { color: #2d4f83; }
.post-card-primary-tag { color: #2d4f83; letter-spacing: 0.05em; }

/* Titles insist on true Lexend Bold (700) — Casper asks for 800/900,
   which would synthesize a fake weight from our 700 file. */
.article-title,
.post-card-title,
.site-title { font-weight: 700; }

/* Strong buttons on light mode: sooty fill + lotion text
   (peachy fill + white text is below AA). */
.gh-head-button,
.footer-cta-button span {
    background: #141414;
    color: #faf9f5;
}
.footer-cta-button:hover span { background: #2c2b26; }

/* ---- 3a. Serial reading experience ("Thrills, engineered.") ---- */

/* Chapter body: unhurried reading rhythm for long-form fiction. */
.gh-content > p { line-height: 1.72; }
.gh-content > p + p { margin-top: 1.15em; }

/* Reading progress: 3px accent thread at the very top of chapter pages.
   Pure CSS scroll-driven animation — no JS, no .hbs change; browsers
   without support simply never see it (progressive enhancement). */
@supports (animation-timeline: scroll()) {
    .post-template::before {
        content: "";
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: var(--ghost-accent-color, #d97757);
        transform-origin: 0 50%;
        transform: scaleX(0);
        animation: al-reading-progress linear both;
        animation-timeline: scroll(root);
        z-index: 4000;
        pointer-events: none;
    }
    @keyframes al-reading-progress {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

/* ---- 3b. Hero laws (ported from anchor v1.0.1–v1.0.3 rulings) ----
   Header/hero has NO fill of its own — it shares the body canvas
   (leo-design "header 同底 + seam" law). One hero surface = one text
   direction, no mixing.
   Scenario A (.has-cover, NO cover image uploaded — launch state):
     light = lotion canvas (transparent), ALL hero text Sooty,
             Subscribe pill sooty/lotion; hero↔feed seam = 1.5px
             DASHED Salt (whisper line on lotion).
     dark  = sooty canvas (transparent), ALL hero text Lotion,
             pill lotion/sooty; seam = 1px DASHED #5b5b5b (§5;
             Leo ruling 2026-07-19 — solid lotion glared on sooty).
   Scenario B (real cover image — brand covers are ALWAYS dark, Leo
     2026-07-19): whole hero flips Lotion via :has() layer at the END
     of the file, in every scheme. */
.has-cover .site-header-content {
    background-color: transparent;   /* same canvas as body, both modes */
    color: #141414;
    border-bottom: 1.5px dashed #f0eee6;   /* salt whisper seam (light) */
}
.has-cover .site-description { color: #141414; }   /* Casper pins #fff */
/* Inner pages with cover setting on: the nav bar is a solid Sooty sheet +
   Lotion text in ALL schemes (Leo 2026-07-19 — inner nav follows the
   dark-cover brand look uniformly; dark-mode/auto already render this, so
   this only lifts the light/base default up to match). Sooty-master logo
   would vanish on the sooty bar → swap to the lotion-stroke variant. */
.has-cover:not(.home-template) #gh-head {
    background-color: #141414;
    color: #faf9f5;
    border-bottom: 1px dashed #5b5b5b;
}
.has-cover:not(.home-template) #gh-head .gh-head-logo { color: #faf9f5; }
.has-cover:not(.home-template) #gh-head .gh-head-logo img {
    content: url("../images/adrenaline-lab-logo-dark.png");
}
.has-cover:not(.home-template) #gh-head .gh-burger::before,
.has-cover:not(.home-template) #gh-head .gh-burger::after { background-color: #faf9f5; }
.has-cover:not(.home-template) #gh-head .gh-head-button { background: #faf9f5; color: #141414; }
/* Home nav sits transparent on the hero: sooty in light mode. */
.has-cover #gh-head { color: #141414; }
.has-cover #gh-head .gh-head-logo { color: #141414; }
.has-cover #gh-head .gh-burger::before,
.has-cover #gh-head .gh-burger::after { background-color: #141414; }
.has-cover #gh-head .gh-head-button { background: #141414; color: #faf9f5; }
/* Mobile expanded menu on has-cover: lotion sheet in light mode. */
.gh-head-open.has-cover #gh-head,
.gh-head-open.has-cover #gh-head .gh-head-actions { background-color: #faf9f5; }
/* Non-cover pages: Casper's nav bar is #fff (off-palette) on the lotion
   body — press it to lotion so the header truly shares the canvas. */
body:not(.has-cover) .gh-head { background-color: #faf9f5; }
body:not(.has-cover) .gh-head { border-bottom: 1.5px dashed #f0eee6; }

/* Hero tagline ("Thrills, engineered.") promoted from small caption to
   hero-level statement: Lexend Bold, ~24px mobile → ~32px desktop.
   font-size needs !important to beat Casper's 767px mobile rule. */
.site-header-content .site-description {
    font-family: "Leo Lexend", "Lexend", Georgia, serif;
    font-size: clamp(2.4rem, 1.6rem + 1.4vw, 3.2rem) !important;
    font-weight: 700;
    line-height: 1.25;
    max-width: 720px;
}
body:not(.has-cover) .site-description { color: #141414; }

/* Hero site logo (Flask + Pulse mark): force rendered height
   ~76px mobile → ~112px desktop; width:auto keeps aspect. */
.site-header-content .site-logo,
.site-header-content.left-aligned .site-logo {
    height: clamp(76px, 6vw + 56px, 112px);
    width: auto;
    max-height: none;
}

/* ---- 3c. Light-mode cool-tinted baked hexes → warm tokens ---- */
kbd { background: #f0eee6; }                                     /* was #f6f8fa */
.gh-content table:not(.gist table) th { background-color: #f0eee6; }  /* was #f4f8fb */
.gh-content :not(pre) > code {
    background: #f0eee6;                                         /* was #f0f6f9 */
    border-color: #e3dacc;                                       /* was #e1eaef */
    color: #141414;
}
.gh-content table:not(.gist table) td,
.gh-content table:not(.gist table) th { border-color: #e3dacc; } /* was #e3edf3 */
hr { border-top-color: #e3dacc; }                                /* was #f0f0f0 */
mark { background-color: #ffe292; }                              /* banana-republic */
::selection { background: #ebc9b7; }                             /* mellow-marrow (warm brand) */
::-moz-selection { background: #ebc9b7; }

/* Blockquote: kill Casper's accent side-bar, use the big Georgia
   quote mark in accent color (leo-design blockquote treatment). */
.gh-content > blockquote:not([class]) {
    position: relative;
    border: 0;
    font-style: italic;
}
.gh-content > blockquote:not([class]):before {
    background: none;
    bottom: auto;
    content: "\201C";
    position: absolute;
    top: -0.28em;
    left: -0.62em;
    width: auto;
    font-family: Georgia, Times, serif;
    font-size: 3.4em;
    line-height: 1;
    color: var(--ghost-accent-color, #d97757);
}

/* ---- 4. Footer: Casper ships pure #000 (forbidden) → sooty + lotion,
        with the thin dashed lotion seam above the dark block. ---- */
.site-footer {
    background: #141414;
    color: #faf9f5;
    border-top: 1px dashed #faf9f5;
}

/* ---- 5. Dark mode (html.dark-mode + html.auto-color under media query).
        Canvas = sooty via --color-darkmode remap; text = lotion (brand
        spec); raised surfaces = noir; lines = black-mana / noir.
        Rules below fix colors gulp color-mod() baked as static hex. ---- */

/* Lotion text sweep: Casper's dark text is white/near-white — press the
   whole reading surface to lotion (pure white is forbidden). */
html.dark-mode body { color: #faf9f5; }
html.dark-mode .post-card-featured { color: #d97757; }
html.dark-mode .post-card-primary-tag { color: #d97757; }
html.dark-mode .post-card-title,
html.dark-mode .article-title,
html.dark-mode .pagination a,
html.dark-mode figcaption a,
html.dark-mode .article-byline-meta .author-name a { color: #faf9f5; }
html.dark-mode .gh-content > [id] { color: #faf9f5; }

/* Scenario A hero on the sooty canvas: transparent bg already shows the
   body canvas — flip ALL hero text to Lotion, seam to SOLID Lotion. */
html.dark-mode .site-header-content { color: #faf9f5; }
html.dark-mode .has-cover .site-header-content { border-bottom: 1px dashed #5b5b5b; }
html.dark-mode .has-cover .site-description { color: #faf9f5; }
html.dark-mode .has-cover #gh-head { color: #faf9f5; }
html.dark-mode .has-cover #gh-head .gh-head-logo { color: #faf9f5; }
html.dark-mode .has-cover #gh-head .gh-burger::before,
html.dark-mode .has-cover #gh-head .gh-burger::after { background-color: #faf9f5; }
html.dark-mode .has-cover #gh-head .gh-head-button { background: #faf9f5; color: #141414; }
/* Inner pages, cover setting on: sooty canvas + lotion text + quiet seam. */
html.dark-mode .has-cover:not(.home-template) #gh-head {
    background-color: #141414;
    color: #faf9f5;
    border-bottom: 1px dashed #5b5b5b;
}
html.dark-mode .gh-head-open.has-cover #gh-head,
html.dark-mode .gh-head-open.has-cover #gh-head .gh-head-actions { background-color: #141414; }
html.dark-mode body:not(.has-cover) .site-description { color: #faf9f5; }

/* Publication logo is the light-surface master (sooty flask) — it
   vanishes on the sooty canvas. Swap in the dark-surface variant
   (lotion stroke) shipped in theme assets. `content` replacement on
   <img> is supported in all modern engines; non-supporting browsers
   keep the light logo (pulse line still reads). */
html.dark-mode .site-header-content .site-logo,
html.dark-mode .gh-head-logo img {
    content: url("../images/adrenaline-lab-logo-dark.png");
}

html.dark-mode .gh-content a { color: #d97757; }           /* peachy: 6.1:1 on sooty */
html.dark-mode .gh-content a:hover { color: #faf9f5; }
html.dark-mode .gh-head-button { background: #f0eee6; color: #141414; }
html.dark-mode .footer-cta-button span { background: #f0eee6; color: #141414; }
html.dark-mode body:not(.has-cover) .gh-head { background-color: #141414; border-bottom: 1px dashed #5b5b5b; }
/* Footer seam on dark: same visual role as the hero seam — one spec
   (1px dashed #5b5b5b, Leo ruling 2026-07-19). Light keeps dashed lotion. */
html.dark-mode .site-footer { border-top: 1px dashed #5b5b5b; }

/* Baked cool-dark / pure-black fixes → noir raised surfaces on the
   sooty canvas, black-mana lines. */
html.dark-mode .gh-content pre,
html.dark-mode kbd,
html.dark-mode .gh-content :not(pre) > code,
html.dark-mode .gh-content table:not(.gist table) th,
html.dark-mode .post-full-image,
html.dark-mode .author-avatar,
html.dark-mode .kg-header-card.kg-style-light,
html.dark-mode .kg-header-card.kg-style-dark { background: #2c2b26; }
html.dark-mode .gh-content :not(pre) > code { border-color: #2c2b26; }
html.dark-mode .gh-content code { background: #2c2b26; color: #f0eee6; }
html.dark-mode .gh-content table:not(.gist table) td,
html.dark-mode .gh-content table:not(.gist table) th { border-color: #2c2b26; }
html.dark-mode hr { border-top-color: #858585; }

@media (prefers-color-scheme: dark) {
    html.auto-color body { color: #faf9f5; }
    html.auto-color .post-card-featured { color: #d97757; }
    html.auto-color .post-card-primary-tag { color: #d97757; }
    html.auto-color .post-card-title,
    html.auto-color .article-title,
    html.auto-color .pagination a,
    html.auto-color figcaption a,
    html.auto-color .article-byline-meta .author-name a { color: #faf9f5; }
    html.auto-color .gh-content > [id] { color: #faf9f5; }

    html.auto-color .site-header-content { color: #faf9f5; }
    html.auto-color .has-cover .site-header-content { border-bottom: 1px dashed #5b5b5b; }
    html.auto-color .has-cover .site-description { color: #faf9f5; }
    html.auto-color .has-cover #gh-head { color: #faf9f5; }
    html.auto-color .has-cover #gh-head .gh-head-logo { color: #faf9f5; }
    html.auto-color .has-cover #gh-head .gh-burger::before,
    html.auto-color .has-cover #gh-head .gh-burger::after { background-color: #faf9f5; }
    html.auto-color .has-cover #gh-head .gh-head-button { background: #faf9f5; color: #141414; }
    html.auto-color .has-cover:not(.home-template) #gh-head {
        background-color: #141414;
        color: #faf9f5;
        border-bottom: 1px dashed #5b5b5b;
    }
    html.auto-color .gh-head-open.has-cover #gh-head,
    html.auto-color .gh-head-open.has-cover #gh-head .gh-head-actions { background-color: #141414; }
    html.auto-color body:not(.has-cover) .site-description { color: #faf9f5; }

    html.auto-color .site-header-content .site-logo,
    html.auto-color .gh-head-logo img {
        content: url("../images/adrenaline-lab-logo-dark.png");
    }

    html.auto-color .gh-content a { color: #d97757; }
    html.auto-color .gh-content a:hover { color: #faf9f5; }
    html.auto-color .gh-head-button { background: #f0eee6; color: #141414; }
    html.auto-color .footer-cta-button span { background: #f0eee6; color: #141414; }
    html.auto-color body:not(.has-cover) .gh-head { background-color: #141414; border-bottom: 1px dashed #5b5b5b; }
    html.auto-color .site-footer { border-top: 1px dashed #5b5b5b; }

    html.auto-color .gh-content pre,
    html.auto-color kbd,
    html.auto-color .gh-content :not(pre) > code,
    html.auto-color .gh-content table:not(.gist table) th,
    html.auto-color .post-full-image,
    html.auto-color .author-avatar,
    html.auto-color .kg-header-card.kg-style-light,
    html.auto-color .kg-header-card.kg-style-dark { background: #2c2b26; }
    html.auto-color .gh-content :not(pre) > code { border-color: #2c2b26; }
    html.auto-color .gh-content code { background: #2c2b26; color: #f0eee6; }
    html.auto-color .gh-content table:not(.gist table) td,
    html.auto-color .gh-content table:not(.gist table) th { border-color: #2c2b26; }
    html.auto-color hr { border-top-color: #858585; }
}

/* ---- 6. Scenario B: has-cover WITH a real cover image ----
   Brand covers are ALWAYS dark (sooty/noir), Leo 2026-07-19. So when a
   real publication cover image is present, the whole hero surface —
   slogan, nav, logos, burger, Subscribe pill — flips to Lotion text in
   EVERY scheme (light/dark/auto). Keyed on img.site-header-cover via
   :has() (only exists when a cover image is uploaded; home template
   only). Placed at the END of the file so it wins on source order over
   the equal-specificity dark-mode/auto rules; cover images don't
   dark-mode, so Lotion holds in all modes. No-:has() browsers fall back
   to Scenario A, which stays scheme-correct on the transparent body
   canvas (sooty text in light, lotion in dark — never lotion-on-lotion). */
body.has-cover .site-header-content:has(> .site-header-cover) { color: #faf9f5; }
body.has-cover .site-header-content:has(> .site-header-cover) .site-description { color: #faf9f5; }
/* Sooty-master logos vanish on the dark cover — swap the hero logo AND
   the nav logo to the lotion-stroke variant, all schemes. */
body.has-cover .site-header-content:has(> .site-header-cover) .site-logo,
body.has-cover:has(.site-header-cover) #gh-head .gh-head-logo img {
    content: url("../images/adrenaline-lab-logo-dark.png");
}
body.has-cover:has(.site-header-cover) #gh-head { color: #faf9f5; }
body.has-cover:has(.site-header-cover) #gh-head .gh-head-logo { color: #faf9f5; }
body.has-cover:has(.site-header-cover) #gh-head .gh-burger::before,
body.has-cover:has(.site-header-cover) #gh-head .gh-burger::after { background-color: #faf9f5; }
body.has-cover:has(.site-header-cover) #gh-head .gh-head-button { background: #faf9f5; color: #141414; }
/* Mobile expanded menu over the dark cover: Sooty sheet + Lotion links
   (Casper's .gh-head-menu .nav a is color:inherit, so the lotion #gh-head
   color cascades to the open-menu links — readable on the sooty sheet). */
body.gh-head-open.has-cover:has(.site-header-cover) #gh-head,
body.gh-head-open.has-cover:has(.site-header-cover) #gh-head .gh-head-actions { background-color: #141414; }