/* Analogue theme: Ghost-specific additions on top of original.css (the 2017–2025 site styles). */

:root {
    --orange: #F66713; --grape: #9D567D; --blue: #7347F0; --silver: #B5B5AB; --tan: #EEEEE2;
    --yellow: #CCBE07; --lime: #9ADE33; --teal: #258095; --cyan: #2E629D; --red: #D42711;
    --dark: #333332; --purple: #5B3E96; --light-gray: #F5F5F5; --black: #020202; --accent: #F14E37;
}

/* ---------- Fonts (Work Sans + Eczar, overridable from Ghost's design settings) ---------- */
html, body { font-family: var(--gh-font-body, 'Work Sans', sans-serif); }
h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6 { font-family: var(--gh-font-heading, 'Eczar', serif); }

/* ---------- Logos (inline SVG) ---------- */
.logo-svg { display: block; }
.brand .logo-svg { width: min(583px, 88vw); height: auto; margin: 0 auto; }
.brand--small .logo-svg { width: min(208px, 60vw); height: auto; margin: 0 auto; }
.brand--archive { display: block; margin: 2em auto 0; width: max-content; }
.brand--corner { position: absolute; top: 40px; left: 40px; z-index: 2; }
.brand--corner .logo-svg { height: 50px; width: auto; }
.page-header .brand--corner .logo-svg { height: 50px; }
@media (max-width: 640px) {
    .brand--corner { top: 20px; left: 20px; }
    .brand--corner .logo-svg { height: 36px; }
}

/* ---------- Navigation ---------- */
.site-nav a { color: var(--silver); letter-spacing: .08em; font-weight: 500; }
.site-nav a:hover, .site-nav .uk-active a { color: var(--orange); }
.site-nav li { margin-bottom: .5em; }

/* ---------- Colour + photo-effect layers (replaces Craft's per-post "overlay colour" and "blend mode") ---------- */
.hero-stack { position: relative; isolation: isolate; overflow: hidden; background-color: var(--hero-color, var(--silver)); }
.hero-img {
    position: absolute; inset: 0; z-index: -1;
    background-size: cover; background-position: top center;
    filter: grayscale(1);
    mix-blend-mode: var(--hero-blend, multiply);
}
.hero-body { position: relative; z-index: 1; }

/* Section defaults (used when a post has no colour tag) */
[data-section="interviews"]      { --hero-color: var(--silver); --hero-blend: multiply; }
[data-section="essays"]          { --hero-color: var(--orange); --hero-blend: soft-light; }
[data-section="recommendations"] { --hero-color: var(--orange); --hero-blend: soft-light; }
[data-section="new-artists"]     { --hero-color: var(--silver); --hero-blend: darken; }
[data-section="books"]           { --hero-color: var(--silver); --hero-blend: multiply; }

/* Per-post colour tags: add a private tag like  #color-orange  and  #blend-multiply  to a post */
.hash-color-orange { --hero-color: var(--orange) !important; }
.hash-color-grape  { --hero-color: var(--grape) !important; }
.hash-color-blue   { --hero-color: var(--blue) !important; }
.hash-color-silver { --hero-color: var(--silver) !important; }
.hash-color-tan    { --hero-color: var(--tan) !important; }
.hash-color-yellow { --hero-color: var(--yellow) !important; }
.hash-color-lime   { --hero-color: var(--lime) !important; }
.hash-color-teal   { --hero-color: var(--teal) !important; }
.hash-color-cyan   { --hero-color: var(--cyan) !important; }
.hash-color-red    { --hero-color: var(--red) !important; }
.hash-color-dark   { --hero-color: var(--dark) !important; }
.hash-color-purple { --hero-color: var(--purple) !important; }
.hash-color-none   { --hero-color: #111 !important; }
.hash-blend-multiply    { --hero-blend: multiply !important; }
.hash-blend-soft-light  { --hero-blend: soft-light !important; }
.hash-blend-hard-light  { --hero-blend: hard-light !important; }
.hash-blend-darken      { --hero-blend: darken !important; }
.hash-blend-lighten     { --hero-blend: lighten !important; }
.hash-blend-overlay     { --hero-blend: overlay !important; }
.hash-blend-color-burn  { --hero-blend: color-burn !important; }
.hash-blend-color-dodge { --hero-blend: color-dodge !important; }
.hash-blend-luminosity  { --hero-blend: luminosity !important; }
.hash-blend-difference  { --hero-blend: difference !important; }
.hash-blend-exclusion   { --hero-blend: exclusion !important; }
.hash-blend-screen      { --hero-blend: screen !important; }
.hash-blend-none        { --hero-blend: normal !important; }

/* ---------- Article header ---------- */
.article-header h1 { color: var(--tan); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.1; max-width: 18em; margin-left: auto; margin-right: auto; }
.article-header .js-byline, .article-header .js-byline a { color: var(--tan); letter-spacing: .08em; }
.article-header .js-byline a { margin: 0 .3em; }

/* ---------- Recommendation / book header ---------- */
.hero-album { position: relative; isolation: isolate; overflow: hidden; }
.hero-album-bg {
    position: absolute; inset: -40px; z-index: -1;
    background-size: cover; background-position: center;
    filter: blur(12px); mix-blend-mode: overlay;
}
.hero-album .album-cover img { width: 280px; max-width: 70vw; }
.hero-album h2 { color: var(--tan); }
.hero-album .js-album-credit, .hero-album .js-album-credit a { color: var(--tan); letter-spacing: .06em; }
.album-band { background: var(--light-gray); padding-bottom: 0; }
.album-info { gap: 1.5em 3em; }
.album-info small { color: #999; letter-spacing: .1em; }
.album-info .uk-h4 { color: #333; margin: 0; }

/* ---------- Article body ---------- */
.article-content { color: #444; }
.article-content .body { width: 80%; margin: 0 auto; }
@media (max-width: 960px) { .article-content .body { width: 100%; } }
.gh-content h2, .gh-content h3, .gh-content h4 { color: #222; }
.gh-content a { color: var(--accent); }
.gh-content p.lede { font-family: 'Eczar', serif; font-size: 30px; line-height: 1.3; font-weight: 700; color: var(--orange); }
.gh-content p.lede strong { font-weight: 700; }
.gh-content blockquote {
    font-family: 'Eczar', serif; font-weight: 700; font-size: 28px; line-height: 1.3; color: var(--orange);
    text-align: center; margin: 2em auto; max-width: 90%; border: 0; padding: 0;
}
.gh-content hr { margin: 3em 0 1.5em; border-top: 1px solid #ddd; }
.gh-content figure { margin: 2em 0; }
.gh-content figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.gh-content figcaption { font-size: .8rem; color: #888; margin-top: .5em; }
.gh-content iframe { max-width: 100%; border: 0; }
.gh-content .kg-embed-card, .gh-content .kg-html-card { margin: 2em 0; }

/* Ghost card widths (required by Ghost) */
.kg-width-wide { position: relative; width: 115%; margin-left: -7.5%; max-width: none; }
.kg-width-full { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: none; }
.kg-width-full img { border-radius: 0; }
@media (max-width: 960px) { .kg-width-wide { width: 100%; margin-left: 0; } }

/* ---------- Homepage mosaic (same rhythm as the old curated homepage) ---------- */
.mosaic { display: flex; flex-wrap: wrap; gap: 0 30px; }
.mosaic-cell { display: flex; flex-direction: column; width: 100%; margin-bottom: 30px; }
.mosaic-cell > .tile { flex: 1; }
.tile-standard { min-height: 380px; }
.tile-standard h2, .tile-album h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; }
.tile .category { letter-spacing: .12em; font-weight: 500; font-size: .85rem; }
.tile-excerpt { max-width: 34em; }
.tile-album { display: none; background: var(--dark); overflow: hidden; }
.tile-album, .tile-album a, .tile-album p { color: var(--album-text, var(--tan)); }
.tile-album .link--is-underlined:after { background-color: var(--album-text, var(--tan)); }

@media (min-width: 960px) {
    .mosaic-cell:nth-child(13n+2), .mosaic-cell:nth-child(13n+3),
    .mosaic-cell:nth-child(13n+8), .mosaic-cell:nth-child(13n+9)   { width: calc((100% - 30px) / 2); }
    .mosaic-cell:nth-child(13n+4), .mosaic-cell:nth-child(13n+5), .mosaic-cell:nth-child(13n+6) { width: calc((100% - 60px) / 3); }
    .mosaic-cell:nth-child(13n+10), .mosaic-cell:nth-child(13n)    { width: calc((100% - 30px) * 2 / 3); }
    .mosaic-cell:nth-child(13n+11), .mosaic-cell:nth-child(13n+12) { width: calc((100% - 30px) / 3); }
    .mosaic-cell:nth-child(13n+1) .tile-standard, .mosaic-cell:nth-child(13n+7) .tile-standard { min-height: 520px; }

    /* album-cover style for recommendations/books in the narrow slots */
    .mosaic-cell[data-kind="album"]:is(:nth-child(13n+4), :nth-child(13n+5), :nth-child(13n+6), :nth-child(13n+11), :nth-child(13n+12)) .tile-standard { display: none; }
    .mosaic-cell[data-kind="album"]:is(:nth-child(13n+4), :nth-child(13n+5), :nth-child(13n+6), :nth-child(13n+11), :nth-child(13n+12)) .tile-album { display: block; }
}

/* Tile colours by position (blue, orange/grape, orange×3, orange, teal/cyan, orange/red, cyan/teal) */
.mosaic-cell:nth-child(13n+1)  .tile-standard { --hero-color: var(--blue); }
.mosaic-cell:nth-child(13n+2)  .tile-standard { --hero-color: var(--orange); }
.mosaic-cell:nth-child(13n+3)  .tile-standard { --hero-color: var(--grape); }
.mosaic-cell:nth-child(13n+4)  .tile-standard,
.mosaic-cell:nth-child(13n+5)  .tile-standard,
.mosaic-cell:nth-child(13n+6)  .tile-standard,
.mosaic-cell:nth-child(13n+7)  .tile-standard { --hero-color: var(--orange); }
.mosaic-cell:nth-child(13n+8)  .tile-standard { --hero-color: var(--teal); }
.mosaic-cell:nth-child(13n+9)  .tile-standard { --hero-color: var(--cyan); }
.mosaic-cell:nth-child(13n+10) .tile-standard { --hero-color: var(--orange); }
.mosaic-cell:nth-child(13n+11) .tile-standard { --hero-color: var(--red); }
.mosaic-cell:nth-child(13n+12) .tile-standard { --hero-color: var(--cyan); }
.mosaic-cell:nth-child(13n)    .tile-standard { --hero-color: var(--teal); }
.mosaic .tile-standard { --hero-blend: soft-light; }

/* ---------- Section archives (slanted cards) ---------- */
.archive-column { width: 100%; max-width: 640px; }
.archive--article .featured-article .content h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.15; }
.archive--article .featured-article .content, .archive--article .featured-article .content a { color: #fff; }
.archive--article .featured-article .background-image { --hero-blend: multiply; }
.archive--article .meta { letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.icon-chevron { vertical-align: middle; }
.text--huge { font-size: 10vw; line-height: 1; margin: .3em 0 .6em; }

/* ---------- Contributor pages ---------- */
.contributor-panel { margin-bottom: 2em; }
.contributor-photo { width: 100%; max-width: 320px; margin-bottom: 1em; }
.contributor-articles .year { font-weight: 700; font-size: 1.4rem; color: #222; margin: 1.5em 0 .5em; }
.contributor-articles .year:first-child { margin-top: 0; }
.contributor-articles h3 a { color: #222; }
.contributor-articles h3 a:hover { color: var(--orange); }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: space-between; align-items: center; color: var(--silver); margin: 1em 0 3em; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.pagination a { color: var(--tan); }
.pagination a:hover { color: var(--orange); }

/* ---------- Error page ---------- */
.error-message { color: var(--tan); }