/* Kelly Eadon brand layer, loaded after Source's built/screen.css.
   Unbuilt on purpose: no gulp pipeline needed to change the brand.
   Palette "Emerald City": evergreen, blush and gold (chosen 2026-10-28). */

/* 1. Palette -------------------------------------------------------------- */

:root {
    --ke-ink: #22302B;
    --ke-heading: #1E3D34;
    --ke-bg: #FBF6EF;
    --ke-surface: #F6E3DE;
    --ke-cta: #1E3D34;
    --ke-cta-fg: #FBF6EF;
    --ke-soft: #F6C9C3;
    --ke-soft-fg: #1E3D34;
    --ke-accent: #B8862E;
    --ke-rose: #D9536F;
    --ke-band: #1E3D34;
    --ke-band-fg: #FBF6EF;
    --ke-cover-a: #2C5A4C;
    --ke-cover-b: #D9536F;
    /* PNW scene */
    --ke-sky-top: #F6E3DE;
    --ke-sky-bottom: #FBF6EF;
    --ke-sun: #F6C9C3;
    --ke-mountain: #C9D3CC;
    --ke-snow: #FBF6EF;
    --ke-ridge-far: #9DB4A8;
    --ke-ridge-mid: #5E8273;
    --ke-water: #DCE6E0;
    --ke-ripple: #FBF6EF;
    --ke-ridge-near: #1E3D34;
}


/* 2. Type and base ------------------------------------------------------- */

:root {
    --font-serif: "DM Serif Display", Georgia, serif;
    --font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ke-radius: 4px;
    /* Portrait frame: "offset block" (option 4 in assets/brand/portrait-frames.html, chosen 2026-10-28),
       shared by the home hero and About. */
    --ke-portrait-radius: 4px;
    --ke-portrait-offset: clamp(10px, 1.4vw, 16px);
}

body {
    --background-color: var(--ke-bg);
    --ghost-accent-color: var(--ke-cta);
    --color-primary-text: var(--ke-ink);
    background-color: var(--ke-bg);
    color: var(--ke-ink);
}

.is-title,
.gh-content :is(h2, h3),
.ke-section-title {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--ke-heading);
    letter-spacing: 0;
}

.gh-navigation-logo {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 400;
    color: var(--ke-heading);
    letter-spacing: 0;
}

.ke-eyebrow {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2rem;
    color: var(--ke-accent);
}

.ke-section-title {
    margin: 0 0 2.4rem;
    font-size: clamp(2.6rem, 2vw + 1.6rem, 3.6rem);
}

/* 3. Buttons: B's squared-off style everywhere, including Ghost's own ------ */

.ke-btn,
.gh-button,
.gh-form .gh-button,
.kg-btn,
.kg-header-card-button,
.kg-product-card-button {
    display: inline-flex;
    align-items: center;
    padding: 1.1rem 2.2rem;
    border-radius: var(--ke-radius) !important;
    background: var(--ke-cta);
    color: var(--ke-cta-fg);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, opacity .15s ease;
}

.ke-btn:hover { opacity: .92; transform: translateY(-1px); }

.ke-btn-outline {
    background: transparent;
    color: var(--ke-heading);
    box-shadow: inset 0 0 0 2px var(--ke-heading);
}

.ke-btn-soft {
    background: var(--ke-soft);
    color: var(--ke-soft-fg);
}

.gh-form { border-radius: var(--ke-radius); }

/* 4. Home hero with the PNW scene ---------------------------------------- */

.ke-hero {
    position: relative;
    background: linear-gradient(180deg, var(--ke-sky-top), var(--ke-sky-bottom));
    overflow: hidden;
    min-height: clamp(560px, 56vw, 720px);
    display: flex;
    align-items: center;
}

.ke-pnw {
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 58%;
}

.ke-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4rem;
    align-items: center;
    width: 100%;
    padding-block: 5rem 24rem;
}

.ke-hero-title {
    margin: 0 0 1.6rem;
    max-width: 16ch;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(3.8rem, 3.6vw + 2rem, 6.4rem);
    line-height: 1.05;
    color: var(--ke-heading);
}

.ke-hero-sub {
    margin: 0 0 2.8rem;
    max-width: 42ch;
    font-size: 1.9rem;
}

.ke-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.ke-hero-portrait {
    width: clamp(180px, 22vw, 300px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: var(--ke-portrait-radius);
    box-shadow: var(--ke-portrait-offset) var(--ke-portrait-offset) 0 var(--ke-accent);
}

@media (max-width: 767px) {
    .ke-hero-inner { grid-template-columns: 1fr; padding-block: 3rem 20rem; }
    .ke-pnw { height: 200px; }
    .ke-hero-portrait { order: -1; width: 160px; }
}

/* 5. Books ---------------------------------------------------------------- */

.ke-home-books,
.ke-more-books,
.ke-books-index { padding-block: 6rem; }

.ke-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 3.2rem;
}

.ke-book-card {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    color: inherit;
    text-decoration: none;
}

.ke-book-card:hover .ke-cover { transform: translateY(-4px) rotate(-1deg); }

.ke-book-card-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    line-height: 1.15;
    color: var(--ke-heading);
}

.ke-book-card-meta {
    font-size: 1.3rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ke-rose);
}

.ke-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 4px 6px 18px rgb(0 0 0 / .2);
    transition: transform .2s ease;
}

.ke-cover-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.4rem;
    background: linear-gradient(160deg, var(--ke-cover-a), var(--ke-cover-b));
    color: #fff;
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1.1;
}

.ke-cover-placeholder small {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ke-book-header {
    grid-column: wide-start / wide-end;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
    padding-block: 6rem 2rem;
}

.ke-book-header .gh-article-title { margin-bottom: .8rem; }
.ke-book-date { margin: 0 0 2.4rem; color: var(--color-secondary-text); }
.ke-buy { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 767px) {
    .ke-book-header { grid-template-columns: 1fr; }
    .ke-book-cover-wrap { max-width: 200px; }
}

/* 6. Newsletter band ----------------------------------------------------- */

.ke-newsletter {
    background: var(--ke-band);
    color: var(--ke-band-fg);
    padding-block: 6rem;
}

.ke-newsletter .ke-section-title { color: var(--ke-band-fg); margin-bottom: .8rem; }
.ke-newsletter p { margin: 0; opacity: .85; font-size: 1.8rem; }

.ke-newsletter-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
    gap: 3.2rem;
    align-items: center;
}

.ke-newsletter .gh-form { background: #fff; color: var(--ke-ink); }
.ke-newsletter .gh-form .gh-button { background: var(--ke-soft); color: var(--ke-soft-fg); }

@media (max-width: 767px) {
    .ke-newsletter-inner { grid-template-columns: 1fr; }
}

/* 7. Footer --------------------------------------------------------------- */

.gh-footer { background: var(--ke-surface); color: var(--ke-ink); }

/* Affiliate disclosure under the footer bar (which Source gives a 120px bottom margin). */
.gh-footer-bar:has(+ .ke-affiliate-note) { margin-bottom: 0; }
.ke-affiliate-note {
    margin: 0;
    padding-block: 2.4rem 6rem;
    font-size: 1.3rem;
    text-align: center;
    color: var(--color-secondary-text);
}

/* Home: the newsletter band (or the latest posts, once there are any) runs straight into the footer. */
.home-template .gh-footer { margin-top: 0; }
.home-template .gh-container + .gh-footer { margin-top: 6rem; }

/* 8. About ----------------------------------------------------------------- */

.ke-about-grid {
    grid-column: wide-start / wide-end;
    display: grid;
    grid-template-columns: clamp(180px, 24vw, 280px) minmax(0, 1fr);
    gap: clamp(3.2rem, 4vw, 5rem);
    align-items: start;
    padding-block: 6rem;
}

.ke-about-photo {
    position: sticky;
    top: 4rem;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: var(--ke-portrait-radius);
    box-shadow: var(--ke-portrait-offset) var(--ke-portrait-offset) 0 var(--ke-accent);
}

.ke-about-body { max-width: 720px; }
.ke-about-body .gh-article-title { margin-bottom: 2.4rem; }
.ke-about-body .gh-content > * + * { margin-top: 2rem; }
.ke-about-body .gh-content figure { max-width: 420px; }
.ke-about-body .gh-content img { border-radius: 4px; }

@media (max-width: 767px) {
    .ke-about-grid { grid-template-columns: 1fr; gap: 3.2rem; padding-block: 4rem; }
    .ke-about-photo { position: static; width: clamp(160px, 55vw, 240px); }
}

/* 9. Press kit -------------------------------------------------------------- */

.ke-downloads { padding-block: 4rem 8rem; }

.ke-download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: clamp(2rem, 3vw, 3.2rem);
    align-items: end;
}

.ke-download { margin: 0; }

.ke-download-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 4px 6px 18px rgb(0 0 0 / .18);
}

.ke-download-portrait {
    aspect-ratio: 4 / 5;
    object-position: 50% 20%;
    box-shadow: var(--ke-portrait-offset) var(--ke-portrait-offset) 0 var(--ke-accent);
}

.ke-download figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    margin-top: 1.6rem;
    font-family: var(--font-serif);
    font-size: 1.9rem;
    color: var(--ke-heading);
}

.ke-download .ke-btn { padding: .7rem 1.4rem; font-size: 1.3rem; }

.ke-press-contact { margin: 4rem 0 0; font-size: 1.7rem; }

/* 10. Events ------------------------------------------------------------------ */

.ke-events { padding-block: 2rem 8rem; }
.ke-events .gh-inner { max-width: min(720px, 100% - var(--container-gap) * 2); margin-inline: auto; padding-inline: 0; }

.ke-event-list { list-style: none; margin: 0 0 5rem; padding: 0; }

.ke-event {
    display: grid;
    gap: .4rem;
    padding: 2rem 0;
    border-top: 1px solid var(--color-border);
}

.ke-event-when {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ke-rose);
}

.ke-event-title {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1.2;
    color: var(--ke-heading);
}

.ke-event-list.is-past .ke-event-title { color: var(--color-secondary-text); }
.ke-empty { font-size: 1.8rem; }

/* 11. Contact ------------------------------------------------------------------ */

.ke-contact-cards-wrap { padding-block: 2rem 8rem; }

.ke-contact-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

@media (min-width: 600px) { .ke-contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ke-contact-cards { grid-template-columns: repeat(4, 1fr); } }

.ke-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 2.8rem;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / .06);
}

.ke-card h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.4rem;
    color: var(--ke-heading);
}

.ke-card p { margin: 0; flex: 1; }
.ke-card .ke-btn { font-size: 1.4rem; padding: .9rem 1.6rem; word-break: break-all; }

.ke-contact-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
    margin-top: 4rem;
    font-weight: 600;
}

.ke-contact-social ul { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }