/* ghostwriter styles
   Five looks (Newspaper, Manuscript, Humanist, Terminal, Naval) plus the Poster page template.
   A post or page uses a style when it carries the matching internal tag: #newspaper, #manuscript, #humanist, #terminal or #naval.
   The tag only picks the look; the accent comes from the first public tag. The templates then add
   style-newspaper, style-manuscript, style-humanist, style-terminal or style-naval to the post's <article>.
   Each style overrides tokens (see tokens.css), so the whole theme follows.
   Trigger pattern: :root:has(.style-x) { ...tokens... }
   Styles set --font-heading and --font-body directly so they win over Ghost's own Typography setting.
   The footer (site name, navigation, buttons) uses --font-chrome and the default button shape in every style.

   COLOR: every palette is derived from the page's accent color (a tag's color in Ghost Admin), so one color retunes a whole style.
   Each @supports block builds the palette from the accent's hue at fixed lightness for light and dark, so text contrast does not depend on
   how light or dark the accent is. Newspaper, Manuscript and Naval nudge the accent's hue a little toward a warm gray, sepia or slate (10 to 15 percent), so the accent stays the main thing you see.
   The static colors above each block are the fallback for browsers without relative color syntax.
   The accent is the page's first public tag's color (a page's paired tag first); see partials/accent-style.hbs.
   If a post matches two styles, the one later in this file wins. */


/* ============================================================
   MANUSCRIPT  Parchment tinted by the accent through a sepia filter, Bona Nova and Petrona, a drop cap on every post.
   ============================================================ */

:root:has(.style-manuscript) {
    --bg:      light-dark(#FAF7F0, #1E1812);
    --fg:      light-dark(#2E2418, #EADCC0);
    --muted:   light-dark(#6E6558, #AEA38E);
    --rule:    light-dark(rgb(46 36 24 / 0.15), rgb(234 220 192 / 0.15));
    --surface: light-dark(rgb(46 36 24 / 0.06), rgb(234 220 192 / 0.08));

    --font-heading: var(--face-bona-nova);          /* title and headings */
    --font-body: var(--face-petrona);
    --heading-weight: 700;                          /* headings inside posts */
    --title-weight: 400;                            /* Bona Nova Regular reads better than Bold at title size */
    --heading-tracking: 0;
    --radius-box: 2px;
}

@supports (color: oklch(from red l c h)) {
    :root:has(.style-manuscript) {
        --tint: color-mix(in oklch, var(--ghost-accent-color) 88%, oklch(0.70 0.10 78));
        --bg: light-dark(oklch(from var(--tint) 0.955 min(c, 0.034) h), oklch(from var(--tint) 0.215 min(c, 0.03) h));
        --fg: light-dark(oklch(from var(--tint) 0.24 min(c, 0.03) h), oklch(from var(--tint) 0.9 min(c, 0.026) h));
        --muted: light-dark(oklch(from var(--tint) 0.47 min(c, 0.034) h), oklch(from var(--tint) 0.72 min(c, 0.03) h));
        --rule: light-dark(oklch(from var(--tint) 0.855 min(c, 0.0357) h), oklch(from var(--tint) 0.345 min(c, 0.0315) h));
        --surface: light-dark(oklch(from var(--tint) 0.91 min(c, 0.0357) h), oklch(from var(--tint) 0.265 min(c, 0.0315) h));
        --accent-ink: light-dark(oklch(from var(--ghost-accent-color) 0.5 min(c, 0.12) h), oklch(from var(--ghost-accent-color) 0.75 min(c, 0.12) h));
    }
}

/* ============================================================
   NEWSPAPER  A warm slate-gray tinted by the accent, Newsreader prose, Young Serif titles, Jost headings, justified text.
   ============================================================ */

:root:has(.style-newspaper) {
    --bg:      light-dark(#E2E2DF, #262626);
    --fg:      light-dark(#111111, #E8E6E1);
    --muted:   light-dark(#4A4A47, #AAA8A2);
    --rule:    light-dark(rgb(0 0 0 / 0.18), rgb(255 255 255 / 0.16));
    --surface: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.07));

    --font-body: var(--face-newsreader);
    --font-heading: var(--face-jost);                      /* headings inside posts */
    --font-title: var(--face-young-serif);                 /* site name, post titles */
    --title-weight: 400;                                   /* Young Serif has one weight */
    --heading-weight: 600;

    --prose-weight: 450;
    --prose-align: justify;
    --prose-hyphens: auto;
    --link-weight: 600;

}

@supports (color: oklch(from red l c h)) {
    :root:has(.style-newspaper) {
        --tint: color-mix(in oklch, var(--ghost-accent-color) 85%, oklch(0.70 0.03 80));
        --bg: light-dark(oklch(from var(--tint) 0.93 min(c, 0.02) h), oklch(from var(--tint) 0.265 min(c, 0.018) h));
        --fg: light-dark(oklch(from var(--tint) 0.2 min(c, 0.01) h), oklch(from var(--tint) 0.92 min(c, 0.01) h));
        --muted: light-dark(oklch(from var(--tint) 0.45 min(c, 0.012) h), oklch(from var(--tint) 0.72 min(c, 0.012) h));
        --rule: light-dark(oklch(from var(--tint) 0.83 min(c, 0.021) h), oklch(from var(--tint) 0.395 min(c, 0.0189) h));
        --surface: light-dark(oklch(from var(--tint) 0.885 min(c, 0.021) h), oklch(from var(--tint) 0.315 min(c, 0.0189) h));
        --accent-ink: light-dark(oklch(from var(--ghost-accent-color) 0.5 min(c, 0.12) h), oklch(from var(--ghost-accent-color) 0.76 min(c, 0.12) h));
    }
}

/* ============================================================
   NAVAL  A cool slate palette tinted by the accent (Nord is the fallback), Fraunces throughout.
   Cooler than Newspaper, whose gray leans warm.
   ============================================================ */

:root:has(.style-naval) {
    --bg:      light-dark(#ECEFF4, #2E3440);
    --fg:      light-dark(#2E3440, #D8DEE9);
    --muted:   light-dark(#4C566A, #A5AFC0);
    --rule:    light-dark(#D8DEE9, #4C566A);
    --surface: light-dark(#E5E9F0, #3B4252);

    --font-heading: var(--face-fraunces);
    --font-body: var(--face-fraunces);
    --font-title: var(--face-fraunces);
    --heading-weight: 600;
}

@supports (color: oklch(from red l c h)) {
    :root:has(.style-naval) {
        --tint: color-mix(in oklch, var(--ghost-accent-color) 90%, oklch(0.70 0.06 245));
        --bg: light-dark(oklch(from var(--tint) 0.94 min(c, 0.034) h), oklch(from var(--tint) 0.27 min(c, 0.03) h));
        --fg: light-dark(oklch(from var(--tint) 0.3 min(c, 0.04) h), oklch(from var(--tint) 0.9 min(c, 0.03) h));
        --muted: light-dark(oklch(from var(--tint) 0.46 min(c, 0.04) h), oklch(from var(--tint) 0.72 min(c, 0.032) h));
        --rule: light-dark(oklch(from var(--tint) 0.84 min(c, 0.0357) h), oklch(from var(--tint) 0.4 min(c, 0.0315) h));
        --surface: light-dark(oklch(from var(--tint) 0.895 min(c, 0.0357) h), oklch(from var(--tint) 0.32 min(c, 0.0315) h));
        --accent-ink: light-dark(oklch(from var(--ghost-accent-color) 0.5 min(c, 0.12) h), oklch(from var(--ghost-accent-color) 0.78 min(c, 0.12) h));
    }
}

/* ============================================================
   HUMANIST  Maple Mono at heavy weights on a palette tinted by the accent color. Made for app and product pages:
   give the page's tag a color and the whole look follows. Maple Mono's heaviest weight is 800.
   ============================================================ */

:root:has(.style-humanist) {
    --bg:      light-dark(#D1DFE4, #172124);
    --fg:      light-dark(#2E4D56, #ABCAD3);
    --muted:   light-dark(#446068, #88A4AC);
    --rule:    light-dark(#B1C1C6, #333F43);
    --surface: light-dark(#C4D4D9, #222E31);
    --accent-ink: light-dark(#395B64, #9ABFC9);

    --font-heading: var(--face-maple-mono);
    --font-body: var(--face-maple-mono);
    --font-title: var(--face-maple-mono);

    --body-scale: 1.1;
    --leading-body: 1.6;
    --heading-tracking: 0;
    --heading-leading: 1.3;
    --title-leading: 1.15;
    --title-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);

    --heading-weight: 800;
    --title-weight: 800;
    --prose-weight: 600;
    --strong-weight: 800;
    --link-weight: 800;
}

@supports (color: oklch(from red l c h)) {
    :root:has(.style-humanist) {
        --bg: light-dark(oklch(from var(--ghost-accent-color) 0.895 min(c * 0.4, 0.05) h), oklch(from var(--ghost-accent-color) 0.24 min(c * 0.35, 0.04) h));
        --fg: light-dark(oklch(from var(--ghost-accent-color) 0.4 min(c * 0.95, 0.09) h), oklch(from var(--ghost-accent-color) 0.82 min(c * 0.85, 0.08) h));
        --muted: light-dark(oklch(from var(--ghost-accent-color) 0.43 min(c * 0.85, 0.08) h), oklch(from var(--ghost-accent-color) 0.7 min(c * 0.8, 0.07) h));
        --rule: light-dark(oklch(from var(--ghost-accent-color) 0.795 min(c * 0.4, 0.0525) h), oklch(from var(--ghost-accent-color) 0.37 min(c * 0.35, 0.042) h));
        --surface: light-dark(oklch(from var(--ghost-accent-color) 0.85 min(c * 0.4, 0.0525) h), oklch(from var(--ghost-accent-color) 0.29 min(c * 0.35, 0.042) h));
        --accent-ink: light-dark(oklch(from var(--ghost-accent-color) 0.45 min(c, 0.12) h), oklch(from var(--ghost-accent-color) 0.78 min(c, 0.12) h));
    }
}

/* ============================================================
   TERMINAL  A light tint of the accent (Gruvbox is the fallback), Maple Mono everywhere. Hierarchy comes from weight, not size.
   ============================================================ */

:root:has(.style-terminal) {
    --bg:      light-dark(#FBF1C7, #282828);
    --fg:      light-dark(#3C3836, #EBDBB2);
    --muted:   light-dark(#665C54, #A89984);
    --rule:    light-dark(#D5C4A1, #504945);
    --surface: light-dark(#EBDBB2, #3C3836);

    --font-heading: var(--face-maple-mono);
    --font-body: var(--face-maple-mono);
    --font-title: var(--face-maple-mono);

    --body-scale: 0.9;                 /* Maple Mono runs wide */
    --leading-body: 1.6;
    --heading-tracking: 0;
    --heading-leading: 1.6;
    --title-leading: 1.6;

    --title-size: 1em;      --title-weight: 800;
    --list-title-size: 1em;
    --h2-size: 1em;         --h2-weight: 700;
    --h3-size: 1em;         --h3-weight: 600;
    --h4-size: 1em;         --h4-weight: 500;
    --link-weight: 600;

    --radius-box: 0;
}

@supports (color: oklch(from red l c h)) {
    :root:has(.style-terminal) {
        --bg: light-dark(oklch(from var(--ghost-accent-color) 0.95 min(c * 0.7, 0.042) h), oklch(from var(--ghost-accent-color) 0.235 min(c * 0.55, 0.042) h));
        --fg: light-dark(oklch(from var(--ghost-accent-color) 0.32 min(c * 0.7, 0.06) h), oklch(from var(--ghost-accent-color) 0.88 min(c * 0.5, 0.05) h));
        --muted: light-dark(oklch(from var(--ghost-accent-color) 0.47 min(c * 0.6, 0.055) h), oklch(from var(--ghost-accent-color) 0.72 min(c * 0.45, 0.045) h));
        --rule: light-dark(oklch(from var(--ghost-accent-color) 0.85 min(c * 0.7, 0.0441) h), oklch(from var(--ghost-accent-color) 0.365 min(c * 0.55, 0.0441) h));
        --surface: light-dark(oklch(from var(--ghost-accent-color) 0.905 min(c * 0.7, 0.0441) h), oklch(from var(--ghost-accent-color) 0.285 min(c * 0.55, 0.0441) h));
        --accent-ink: light-dark(oklch(from var(--ghost-accent-color) 0.48 min(c, 0.13) h), oklch(from var(--ghost-accent-color) 0.78 min(c, 0.13) h));
    }
}

/* Markdown-style markers in front of headings. Delete this block if you want plain headings. */
.style-terminal :is(.post-title, .post-content h2, .post-content h3, .post-content h4)::before {
    color: var(--accent-ink);
    font-weight: 400;
}
.style-terminal .post-title::before            { content: "# "; content: "# " / ""; }
.style-terminal .post-content h2::before       { content: "## "; content: "## " / ""; }
.style-terminal .post-content h3::before       { content: "### "; content: "### " / ""; }
.style-terminal .post-content h4::before       { content: "#### "; content: "#### " / ""; }

/* ============================================================
   POSTER PAGE  (page template "Poster", custom-poster.hbs)
   Stacked type: the heading level sets the size of each line. Use it for a contents page or a title page.
   ============================================================ */

.poster-main { position: relative; padding: 5rem 1.25rem; }

/* The page title: a small label in the top corner, away from the text */
.poster-corner { position: absolute; top: var(--header-top); left: var(--page-gutter); display: flex; align-items: center; gap: 0.6rem; }
.poster-label {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--muted);
}

.poster-story {
    max-width: 60rem;
    margin: 0 auto;
    text-align: center;
    text-wrap: balance;
    font-family: "IM Fell English", Georgia, "Times New Roman", serif;
}

/* Stacked type: the heading level sets the size, so the editor's own headings do the work.
   ## = largest (post-title size), ### = large, #### = medium, plain paragraphs = regular. The page title is the h1, so these are its sections.
   Spacing scales with each line, so big lines get more air than small ones. */
.poster-story {
    --size-1: clamp(1.925rem, 1.12rem + 3.36vw, 3.5rem);     /* ## : 30% below the old size */
    --size-2: clamp(1.575rem, 0.91rem + 2.52vw, 2.625rem);   /* ### */
    --size-3: clamp(1.225rem, 0.77rem + 1.68vw, 1.925rem);   /* #### */
    --size-4: clamp(1.2rem, 0.9rem + 0.9vw, 1.6rem);
    --size-5: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem);
}

.poster-story :is(p, h2, h3, h4, h5, h6) {
    margin-block: 0.5em;
    text-align: center;
    hyphens: manual;
    font-family: inherit;
    font-weight: 400;
    letter-spacing: 0;
}
.poster-story p  { max-width: 34rem; margin-inline: auto; font-size: var(--size-4); line-height: 1.4; }
.poster-story h2 { font-size: var(--size-1); line-height: 1.05; }
.poster-story h3 { font-size: var(--size-2); line-height: 1.15; }
.poster-story h4 { font-size: var(--size-3); line-height: 1.25; }
.poster-story :is(h5, h6) { font-size: var(--size-5); line-height: 1.5; }
.poster-story :is(h2, h3, h4, h5, h6) { margin-block: 0.6em 0.1em; }
.poster-story > :first-child { margin-top: 0; }

.poster-story a { color: inherit; font-weight: var(--link-weight); }
.poster-story a:hover, .poster-story a:focus-visible { color: var(--accent-ink); }