/* Reel and Tome — self-hosted type + bookish trim over the Casper base.
   Loaded after built/screen.css, before {{ghost_head}}, so Admin's own
   Design > Typography picker (if ever used) still wins over these defaults. */

/* --- Self-hosted fonts (both are true variable fonts: one file per style
   covers the whole weight range, so we only need 4 files total) --- */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/lora-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/playfair-display-variable.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/playfair-display-italic.woff2') format('woff2');
}

/* --- Palette + body copy face ---
   Lora becomes the site's serif everywhere (body copy, and any heading
   that isn't explicitly targeted below). Warm parchment page tone and ink
   text, pulled from the logo artwork's burgundy/gold/cream palette. */
:root {
    --font-serif: 'Lora', Palatino, Georgia, 'Times New Roman', serif;
    --reelandtome-parchment: #FBF6EA;
    --reelandtome-parchment-deep: #F3EAD6;
    --reelandtome-ink: #2B2320;
    --reelandtome-gold: #B8933F;
}

body {
    background: var(--reelandtome-parchment);
    color: var(--reelandtome-ink);
}

/* --- Display serif for anything acting as a heading or wordmark --- */
.site-title,
.gh-head-logo.no-image,
.post-card-title,
.article-title,
.gh-content > [id],
.kg-header-card-header,
.footer-cta-title,
.author-header-name {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
}

/* --- Logo frame — treats the artwork like a book plate / cover emblem --- */
.gh-head-logo img {
    max-height: 54px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(43, 35, 32, 0.25);
}

.site-logo {
    max-height: clamp(260px, 55vh, 520px);
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(43, 35, 32, 0.3);
}

/* Hero grows to give the bigger logo room to breathe */
.has-cover .site-header-content {
    min-height: 640px;
}

/* When a cover photo is set, the illustrated logo is redundant on top of
   it (both are busy dragon scenes) — hide the logo and let the cover
   photo's own open space carry the title/description instead. */
.has-cover .site-logo {
    display: none;
}

.has-cover .site-header-content {
    text-align: right;
}

/* The cover art's open space sits on the right; a soft scrim there keeps
   the title/description legible regardless of the photo underneath. */
.has-cover .site-header-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(20, 12, 10, 0) 40%, rgba(20, 12, 10, 0.45) 100%);
    pointer-events: none;
}

.has-cover .site-header-inner {
    position: relative;
    z-index: 2;
}

.has-cover .site-description {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
    .site-logo {
        max-height: clamp(180px, 45vh, 320px);
    }
}

/* --- Drop cap on the opening paragraph of a post — illuminated-manuscript
   nod, only kicks in on paragraphs long enough to carry it gracefully --- */
.gh-content > p:first-of-type::first-letter {
    float: left;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 3.6em;
    line-height: 0.82;
    padding: 0.05em 0.08em 0 0;
    color: var(--ghost-accent-color);
}

/* --- Blockquotes read like a marginal note in an old book --- */
.gh-content blockquote {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    border-left: 3px solid var(--ghost-accent-color);
    color: var(--reelandtome-ink);
}

/* --- Film-strip divider: a nod to the "reel" half of the brand, used in
   place of a plain rule under the header and above the footer --- */
.gh-head,
.site-footer {
    position: relative;
}

.gh-head::after,
.site-footer::before {
    content: "";
    display: block;
    height: 6px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--reelandtome-ink) 0,
        var(--reelandtome-ink) 8px,
        transparent 8px,
        transparent 16px
    );
    opacity: 0.15;
}

/* --- Cards + footer pick up the warm parchment tone instead of stark white --- */
.post-card,
.gh-content {
    background: var(--reelandtome-parchment);
}

.site-footer {
    background: var(--reelandtome-parchment-deep);
}