/* ============================================================
   THE CHRONICLE — page-specific styles
   Loads after impheim.css
   ============================================================ */

/* ---- Entry metadata row ---- */
.cmeta { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; flex-wrap: wrap; }
.cdate { font-size: .72rem; color: var(--muted); }
.csub  { font-size: .72rem; color: var(--muted); font-style: italic; padding-left: .4rem; border-left: 1px solid var(--border2); }

/* ---- Entry text ---- */
.ctitle { font-family: var(--font-d); font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: .45rem; line-height: 1.3; }
.cdesc  { font-size: .92rem; color: var(--text2); line-height: 1.72; margin-bottom: .75rem; }
.ctags  { display: flex; gap: .35rem; flex-wrap: wrap; }
.tag-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.tag-btn:hover { opacity: .75; }

/* ---- Pinned marker ---- */
.pin { position: absolute; top: 1rem; right: 1.1rem; font-size: .85rem; opacity: .8; }

/* ---- Empty state ---- */
.empty { text-align: center; color: var(--muted); padding: 4rem 0; font-style: italic; }

/* ---- Active campaign banner extras ---- */
.ab-label { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-milestone); margin-bottom: .2rem; }
.ab-name  { font-family: var(--font-d); font-size: .95rem; color: var(--text); }
.ab-meta  { font-size: .72rem; color: var(--muted); margin-top: .1rem; }

/* ---- Chronicle image thumbnail ---- */
.cimg-wrap { margin-top: .7rem; border-radius: var(--r-md); overflow: hidden; cursor: pointer; display: inline-block; max-width: 100%; }
.cimg-wrap img { display: block; max-width: 100%; max-height: 260px; width: auto; border-radius: var(--r-md); transition: opacity .15s; }
.cimg-wrap:hover img { opacity: .82; }

/* ---- Lightbox ---- */
#clb { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9000; cursor: zoom-out; align-items: center; justify-content: center; }
#clb.open { display: flex; }
#clb img { max-width: 92vw; max-height: 92vh; border-radius: var(--r-md); box-shadow: 0 8px 48px rgba(0,0,0,.7); }

/* ---- Filter pill active states — one colour per entry type ---- */
.pill[data-t="campaign"].active  { background: var(--c-campaign); }
.pill[data-t="event"].active     { background: var(--c-event); }
.pill[data-t="lore"].active      { background: var(--c-lore); color: #1a0e00; }
.pill[data-t="impia"].active     { background: var(--c-impia); }
.pill[data-t="art"].active       { background: var(--c-art); color: #2a0020; }
.pill[data-t="milestone"].active { background: var(--c-milestone); color: #001a0e; }
.pill[data-t="stream"].active    { background: var(--c-stream); color: #000f1a; }
/* "All" pill uses gold to match site's primary accent */
.pill[data-t="all"].active       { background: var(--gold); }

/* ---- Search input in the filter row: pushes to the far right ---- */
.filter-pills .search-input { margin-left: auto; }

/* ---- Filter bar bottom spacing ---- */
.filter-bar { margin-bottom: 2rem; }

/* ---- Section padding ---- */
.chronicle-section { padding-top: 1.5rem; }