/* ============================================================
   Zine portfolio styles
   Save as zines.css in your theme folder (or paste into style.css).

   The tokens below are placeholders. Swap them for your real
   Cabinet of Curiosities palette and fonts. If your theme already
   defines CSS variables, point these at those instead, e.g.
   --kh-ink: var(--your-text-color);
   ============================================================ */

.kh-zine-grid {
    --kh-paper: #f4efe4;
    --kh-ink: #2b2622;
    --kh-accent: #7a3b2e;
    --kh-card-radius: 2px;
    --kh-gap: 1.75rem;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--kh-gap);
    margin: 2rem 0;
}

/* ---- Cards ---- */
.kh-zine-card {
    display: flex;
    flex-direction: column;
    background: var(--kh-paper);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--kh-card-radius);
    box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kh-zine-card:hover {
    transform: translateY(-3px) rotate(-0.4deg); /* slight pinned-to-the-wall tilt */
    box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.12);
}

.kh-zine-cover { display: block; line-height: 0; }
.kh-zine-cover img { width: 100%; height: auto; display: block; }

.kh-zine-body { padding: 0.9rem 1rem 1.1rem; }
.kh-zine-title { margin: 0 0 0.25rem; font-size: 1.1rem; line-height: 1.2; }
.kh-zine-title a { color: var(--kh-ink); text-decoration: none; }
.kh-zine-title a:hover { text-decoration: underline; }
.kh-zine-year {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    opacity: 0.6;
    letter-spacing: 0.04em;
}
.kh-zine-excerpt { font-size: 0.9rem; line-height: 1.45; }

/* ---- Buy button ---- */
.kh-zine-buy {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.4rem 0.9rem;
    background: var(--kh-accent);
    color: #fff;
    text-decoration: none;
    border-radius: var(--kh-card-radius);
    font-size: 0.85rem;
}
.kh-zine-buy:hover { opacity: 0.9; }

.kh-zine-empty { opacity: 0.6; font-style: italic; }

/* ---- Single zine page ---- */
.kh-zine-single { max-width: 820px; margin: 0 auto; padding: 2rem 1rem; }
.kh-zine-single-header h1 { margin-bottom: 0.25rem; }
.kh-zine-single .kh-zine-year { font-size: 0.85rem; }

.kh-flipbook-wrap { position: relative; width: 100%; margin: 1.5rem 0; }
.kh-flipbook-cover {
    position: absolute;
    bottom: 7px;
    left: 7px;
    width: 130px;
    height: 30px;
    background: #fff; /* match your page background */
}

.kh-zine-description { line-height: 1.6; }
.kh-zine-buy-wrap { margin-top: 1.5rem; }

/* ---- Small screens ---- */
@media (max-width: 480px) {
    .kh-zine-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .kh-flipbook-wrap iframe { height: 360px; }
}