/* ============================================================
   casper-jp-overrides.css — Leo Design Language overlay for Casper 5.12.0
   Site: jp.macroalpha.io (MacroAlphaJP — 纯佛学·日语 blog).
   Loaded AFTER built/screen.css in default.hbs. No rebuild of the
   Casper gulp/postcss chain — pure additive override layer.

   Aesthetic brief: 克制 · 留白 · 庄重 · 禅意 · 不花哨.
   Hierarchy comes from scale + whitespace + one ethereal display
   face, not from loud color or many fonts.

   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
     emerald-oasis #629887 (accent) · peek-a-blue #c7dedc · banana #ffe292
   Typography (Japanese context):
     body      = Ubuntu (Latin, self-host woff2) + JP system fallback
     titles    = Chogokuboso Gothic Thin (超極細ゴシック — 空灵/禅) subset woff2
     subtitle  = Kurewa Gothic JP Light (库雷瓦圆体 — 柔和) subset woff2
   ============================================================ */

/* ---- 1. Self-hosted fonts (assets/fonts/, subset woff2) ---- */
@font-face { font-family: "Leo Ubuntu"; src: url("../fonts/Ubuntu-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Leo Ubuntu"; src: url("../fonts/Ubuntu-Medium.woff2")  format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Leo Ubuntu"; src: url("../fonts/Ubuntu-Bold.woff2")    format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "MAJP Chogokuboso"; src: url("../fonts/ChogokubosoGothic-Thin.subset.woff2") format("woff2"); font-weight: 100 400; font-display: swap; }
@font-face { font-family: "MAJP Kurewa"; src: url("../fonts/KurewaGothicJP-Light.subset.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }

/* ---- 2. Casper variable remap (Leo palette + JP fonts) ----
   Japanese system fallback chain (covers any kanji the subset misses,
   and body Japanese which we intentionally do NOT self-host per Leo:
   "正文默认 = Ubuntu 的日文，日文由字族回退链兜底"). */
:root {
    /* Fallback only — real accent set in Ghost Admin → Design → Brand
       (ghost_head injects it after this sheet, so Admin wins). */
    --ghost-accent-color: #629887;          /* emerald-oasis: calm zen green */

    --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 slot = BODY (body_font "Modern sans-serif" routes here) */
    --font-sans: "Leo Ubuntu", "Ubuntu", "Trebuchet MS", Tahoma,
                 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
                 "YuGothic", "Noto Sans JP", "Meiryo", ui-sans-serif, system-ui, sans-serif;
    /* --font-serif slot = TITLES (title_font "Elegant serif" routes here);
       filled with Ubuntu (big & bold) per Leo — the ultra-thin gothic read too faint. */
    --font-serif: "Leo Ubuntu", "Ubuntu", "Trebuchet MS", Tahoma,
                  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
                  "YuGothic", "Noto Sans JP", "Meiryo", ui-sans-serif, system-ui, sans-serif;

    /* subtitle face (applied directly below) */
    --majp-font-subtitle: "MAJP Kurewa", "Leo Ubuntu", "Ubuntu",
                  "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
                  "YuGothic", "Noto Sans JP", "Meiryo", sans-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; }

/* ---- 2b. Typographic hierarchy tuning ----
   Titles = Ubuntu Bold (big & solid) per Leo — the ultra-thin gothic read
   too faint. Explicit font-family so this wins over the Admin typography
   dropdown; Ubuntu-Bold.woff2 (weight 700) is loaded above. */
.site-title,
.article-title,
.post-card-title,
.footer-cta-title,
.gh-content > [id] {
    font-family: var(--font-sans);    /* Ubuntu + JP fallback */
    font-weight: 700;                 /* Ubuntu Bold */
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.article-title { font-weight: 700; }
.post-card-title { font-weight: 700; }
.site-title { font-weight: 700; }

/* Subtitle / tagline (禅 round gothic, muted). */
.site-description,
.post-card-excerpt,
.gh-article-meta,
.author-card-content .author-card-name {
    font-family: var(--majp-font-subtitle);
}
.site-description { letter-spacing: 0.04em; }

/* ---- 3. Semantic accent layer (emerald-oasis, restrained) ----
   Links stay sooty (AA-safe) at rest; the accent appears only on
   hover and on decorative marks — quiet, not loud. */
.gh-content a { color: #141414; text-underline-offset: 0.14em; }
.gh-content a:hover { color: #629887; }

/* "Featured" label: emerald as a small quiet accent. */
.post-card-featured { color: #629887; }

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

/* ---- Hero same-canvas ruling (leo-design "header 同底 + seam" law) ----
   Header/hero has no fill of its own — it shares the body canvas.
   Scenario A (.has-cover, NO cover image uploaded — the end-state):
     light = lotion canvas, ALL hero text Sooty, Subscribe pill sooty
             fill + lotion text; hero↔feed seam = 1.5px DASHED Salt
             #f0eee6 (lotion-on-lotion whisper line).
     dark  = noir canvas, ALL hero text Lotion, pill lotion + sooty;
             seam = 1.5px SOLID Lotion #faf9f5 (§5).
   Scenario B (real cover image) handled in §6. */
.has-cover .site-header-content {
    background-color: transparent;
    color: #141414;
    border-bottom: 1.5px dashed #f0eee6;
}
.has-cover .site-description { color: #141414; }
.has-cover:not(.home-template) #gh-head {
    background-color: #faf9f5;
    color: #141414;
    border-bottom: 1.5px dashed #f0eee6;
}
.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; }
.gh-head-open.has-cover #gh-head,
.gh-head-open.has-cover #gh-head .gh-head-actions { background-color: #faf9f5; }
body:not(.has-cover) .gh-head { background-color: #faf9f5; }

/* ---- 3b. Hero tagline: promote to a calm statement (禅) ----
   Kurewa round gothic, responsive, generous max-width. font-size needs
   !important to beat Casper's 767px 2.2rem mobile rule. */
.site-header-content .site-description {
    font-family: var(--majp-font-subtitle);
    font-size: clamp(2.0rem, 1.5rem + 0.9vw, 2.6rem) !important;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.06em;
    max-width: 680px;
}
body:not(.has-cover) .site-description { color: #141414; }

/* Header↔body seam on plain (no-cover) pages: salt dashed whisper line. */
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 a big 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, #629887);
}

/* ---- 4. Footer: Casper ships pure #000 (forbidden) → sooty + lotion,
        with a 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; the rules
        below fix colors gulp color-mod() baked as static cool-grey hex. ---- */
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; }
html.dark-mode .has-cover #gh-head .gh-head-button { background: #faf9f5; color: #141414; }
html.dark-mode .has-cover:not(.home-template) #gh-head {
    background-color: #2c2b26;
    color: #faf9f5;
    border-bottom: 1.5px solid #faf9f5;
}
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; }
html.dark-mode body:not(.has-cover) .site-description { color: #faf9f5; }
html.dark-mode .gh-content a { color: #faf9f5; }
html.dark-mode .gh-content a:hover { color: #629887; }
html.dark-mode .post-card-featured { color: #629887; }
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: #2c2b26; border-bottom: 1.5px solid #faf9f5; }
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; }
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: #faf9f5; }
    html.auto-color .gh-content a:hover { color: #629887; }
    html.auto-color .post-card-featured { color: #629887; }
    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 ----
   A Lotion/cream banner flips the whole hero to Sooty (slogan + nav
   together, one contrast direction). Keyed on img.site-header-cover via
   :has(), which only exists when a cover image is uploaded. Placed at
   the END so equal-specificity dark-mode rules lose on source order;
   cover images don't dark-mode, so sooty holds in all modes. */
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; }
body.has-cover:has(.site-header-cover) #gh-head .gh-head-button { background: #141414; color: #faf9f5; }
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; }