/* ============================================================
   wiki4what-overrides.css — Leo Design Language overlay for Casper 5.12.0
   Loaded AFTER built/screen.css in default.hbs. No rebuild of the
   Casper gulp/postcss chain — pure additive override layer.

   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
   - wiki4what site layer (library blue):
     accent  = windstorm #6a9bcc
     links   = assassin  #2d4f83 (light) / windstorm #6a9bcc (dark)
   English-only blog: Latin TTFs self-hosted, NO Chinese woff2
   (system CJK fallback is intentional — see casper-anatomy.md).
   ============================================================ */

/* ---- 1. Self-hosted fonts (assets/fonts/, copied 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; }
@font-face { font-family: "Leo Julius Sans One"; src: url("../fonts/JuliusSansOne-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Leo Poiret One"; src: url("../fonts/PoiretOne-Regular.ttf"); font-weight: 400; font-display: swap; }

/* ---- 2. Casper variable remap (Leo palette) ---- */
: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: #6a9bcc;          /* windstorm */

    --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: #2c2b26;              /* noir: dark-mode canvas */

    --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. wiki4what semantic layer (library blue) ---- */

/* Content links: assassin, hover windstorm. */
.gh-content a { color: #2d4f83; }
.gh-content a:hover { color: #6a9bcc; }

/* "Featured" label: windstorm fails AA as small text on lotion — use assassin. */
.post-card-featured { color: #2d4f83; }

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

/* ---- Hero same-canvas ruling (Leo 2026-07-03, v1.0.3) ----
   Header/hero has NO fill of its own — it shares the body canvas
   (leo-design "header 同底 + seam" law). The v1.0.2 Assassin band is
   retired. One hero surface = one text direction, no mixing.
   Scenario A (.has-cover, NO cover image uploaded — the end-state):
     light  = lotion canvas (transparent over body), ALL hero text
              Sooty (slogan + nav + logo + burger), Subscribe pill
              sooty fill + lotion text; hero↔feed seam = 1.5px DASHED
              Salt #f0eee6 (whisper line — lotion-on-lotion needs salt).
     dark   = noir canvas (transparent over --color-darkmode body),
              ALL hero text Lotion, Subscribe pill lotion + sooty;
              seam = 1.5px SOLID Lotion #faf9f5 (dark rules in §5).
   Scenario B (real cover image — Leo's cream Lotion banner): untouched,
   see section 6 (:has() layer at the end of the file).
   Seam sits on .site-header-content (class `outer` = full-bleed block),
   so the line runs full viewport width, not clipped by any inner
   max-width container. */
.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: Casper paints the nav bar accent
   (windstorm) + #fff — same law: lotion canvas + sooty text + salt
   dashed seam. #gh-head id keeps this above Casper's nav rules. */
.has-cover:not(.home-template) #gh-head {
    background-color: #faf9f5;
    color: #141414;
    border-bottom: 1.5px dashed #f0eee6;
}
/* 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; }
/* Subscribe pill on light hero: strong button = sooty fill + lotion. */
.has-cover #gh-head .gh-head-button { background: #141414; color: #faf9f5; }
/* Mobile expanded menu on has-cover: Casper fills it with raw accent —
   light mode gets a solid lotion sheet instead. */
.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; }

/* ---- 3b. Hero upgrade (v1.0.1, Leo 2026-07-03) ----
   Tagline (.site-description after logo/title) promoted from small
   2.4rem/400 caption to hero-level statement: Leo Lexend Bold,
   responsive ~24px (mobile) → ~32px (desktop). font-size needs
   !important to beat Casper's 767px `2.2rem !important` mobile rule;
   the rest wins on source order at equal specificity. Covers all
   scenarios: has-cover / no-cover × light / dark / auto-color. */
.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;
}
/* No-cover light canvas: Casper greys it to secondary-text after a
   title — a hero statement carries sooty. (has-cover colors: lotion
   on the assassin band above, sooty on a real cover image in section 6;
   dark-mode lotion is in section 5.) */
body:not(.has-cover) .site-description { color: #141414; }

/* Hero site logo: source img is served at intrinsic size, so max-height
   alone can't grow it — force rendered height (~76px mobile → ~112px
   desktop). width:auto keeps aspect; max-height:none lifts Casper's
   left-aligned 96px cap. */
.site-header-content .site-logo,
.site-header-content.left-aligned .site-logo {
    height: clamp(76px, 6vw + 56px, 112px);
    width: auto;
    max-height: none;
}

/* Header↔body seam on plain (no-cover) pages: salt dashed whisper line
   (1.5px per the seam law; dark mode flips it to solid lotion in §5). */
body:not(.has-cover) .gh-head { border-bottom: 1.5px dashed #f0eee6; }

/* Light-mode cool-tinted baked hexes → warm tokens
   (gulp color-mod output, not var-driven, so they need naming). */
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, was #fdffb6 */
::selection { background: #c7dedc; }                             /* peek-a-blue, was #daf2fd */
::-moz-selection { background: #c7dedc; }

/* 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, #6a9bcc);
}

/* ---- 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).
        --color-darkmode remap handles all var()-driven spots (canvas etc.);
        the rules below fix colors that gulp color-mod() baked as static
        cool-grey hex in built/screen.css. ---- */

/* Scenario A hero on the dark (noir) canvas: transparent bg already
   shows the body canvas — here we flip ALL hero text to Lotion and the
   seam to 1.5px SOLID Lotion (white reads against the dark tone).
   Replaces Casper's html.dark-mode .site-header-content #fff (off
   palette). (Scenario B sooty lives in section 6, after this, and
   wins there on specificity + source order.) */
html.dark-mode .site-header-content { color: #faf9f5; }
html.dark-mode .has-cover .site-header-content { border-bottom: 1.5px solid #faf9f5; }
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; }
/* Subscribe pill stays the lotion pill on dark. */
html.dark-mode .has-cover #gh-head .gh-head-button { background: #faf9f5; color: #141414; }
/* Inner pages, cover setting on: noir canvas + lotion text + solid seam. */
html.dark-mode .has-cover:not(.home-template) #gh-head {
    background-color: #2c2b26;
    color: #faf9f5;
    border-bottom: 1.5px solid #faf9f5;
}
/* Mobile expanded menu on has-cover in dark: noir sheet. */
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: #2c2b26; }

/* Hero tagline on the dark (noir) canvas: lotion. Scoped to
   :not(.has-cover) so the has-cover branches stay intact. */
html.dark-mode body:not(.has-cover) .site-description { color: #faf9f5; }

html.dark-mode .gh-content a { color: #6a9bcc; }           /* windstorm: navy fails AA on dark */
html.dark-mode .gh-content a:hover { color: #faf9f5; }
html.dark-mode .post-card-featured { color: #6a9bcc; }
html.dark-mode .gh-head-button { background: #f0eee6; color: #141414; }
html.dark-mode .footer-cta-button span { background: #f0eee6; color: #141414; }
/* No-cover nav seam on dark: solid lotion (Casper's own dark .gh-head
   bg is --color-darkmode = same as body, so 同底 already holds). */
html.dark-mode body:not(.has-cover) .gh-head { background-color: #2c2b26; border-bottom: 1.5px solid #faf9f5; }

/* Baked cool-dark fixes → warm equivalents (sooty for sunk surfaces,
   black-mana for lines on the noir canvas). */
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 { background: #141414; }
html.dark-mode .gh-content :not(pre) > code { border-color: #141414; }
/* Casper dark sets .gh-content code to #000/#fff (pure black/white — forbidden) */
html.dark-mode .gh-content code { background: #141414; color: #f0eee6; }
html.dark-mode .gh-content table:not(.gist table) td,
html.dark-mode .gh-content table:not(.gist table) th { border-color: #141414; }
html.dark-mode hr { border-top-color: #858585; }

@media (prefers-color-scheme: dark) {
    html.auto-color .site-header-content { color: #faf9f5; }
    html.auto-color .has-cover .site-header-content { border-bottom: 1.5px solid #faf9f5; }
    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: #2c2b26;
        color: #faf9f5;
        border-bottom: 1.5px solid #faf9f5;
    }
    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: #2c2b26; }

    html.auto-color body:not(.has-cover) .site-description { color: #faf9f5; }

    html.auto-color .gh-content a { color: #6a9bcc; }
    html.auto-color .gh-content a:hover { color: #faf9f5; }
    html.auto-color .post-card-featured { color: #6a9bcc; }
    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: #2c2b26; border-bottom: 1.5px solid #faf9f5; }

    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 { background: #141414; }
    html.auto-color .gh-content :not(pre) > code { border-color: #141414; }
    html.auto-color .gh-content code { background: #141414; color: #f0eee6; }
    html.auto-color .gh-content table:not(.gist table) td,
    html.auto-color .gh-content table:not(.gist table) th { border-color: #141414; }
    html.auto-color hr { border-top-color: #858585; }
}

/* ---- 6. Scenario B: has-cover WITH a real cover image (v1.0.2) ----
   Leo's cream Lotion banner: the whole hero surface flips to Sooty —
   slogan AND nav (links / Sign in / burger / search) together, one
   contrast direction. Keyed on img.site-header-cover via :has(), which
   only exists when a cover image is uploaded (home template only, so
   inner-page assassin nav bands are untouched). Placed at the END of
   the file so equal-specificity dark-mode rules above lose on source
   order; cover images don't dark-mode, so sooty holds in all modes.
   No-:has() browsers gracefully fall back to scenario A lotion. */
body.has-cover .site-header-content:has(> .site-header-cover) { color: #141414; }
body.has-cover .site-header-content:has(> .site-header-cover) .site-description { color: #141414; }
body.has-cover:has(.site-header-cover) #gh-head { color: #141414; }
body.has-cover:has(.site-header-cover) #gh-head .gh-head-logo { color: #141414; }
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: #141414; }
/* Subscribe pill: lotion-on-lotion banner would vanish — strong button
   = sooty fill + lotion text (design-language strong surface). */
body.has-cover:has(.site-header-cover) #gh-head .gh-head-button { background: #141414; color: #faf9f5; }
/* Mobile expanded menu over the cream banner: lotion sheet, sooty text
   (inherited from the #gh-head rule above). */
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: #faf9f5; }