/* ═══════════════════════════════════════════════════════════
   JOURNAL.CSS — Layout for journal/index.html + library.html
   ═══════════════════════════════════════════════════════════
   Brand tokens (colors, fonts) live in journal/theme.css.
   Edit theme.css to rebrand — this file handles layout only.
   ═══════════════════════════════════════════════════════════ */

@import url('theme.css');

/* ── Reset ──────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:300;line-height:1.7;
  min-height:100vh;
}

/* ── Site header & nav ──────────────────────────────────── */
.site-header{background:var(--deep);border-bottom:1px solid var(--border);padding:0 2rem;}
.site-nav{max-width:1280px;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;}
.brand{font-family:var(--font-heading);font-size:1rem;font-weight:400;color:var(--warm);letter-spacing:0.05em;text-decoration:none;}
.nav-links{display:flex;gap:1.5rem;align-items:center;}
.nav-link{font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(245,241,235,0.5);text-decoration:none;transition:color 0.2s;}
.nav-link:hover,.nav-link.active{color:var(--warm);}

/* ── Page hero header ───────────────────────────────────── */
.page-header{background:var(--deep);padding:4rem 2rem 3rem;border-bottom:1px solid var(--border);}
.page-header-inner{max-width:1280px;margin:0 auto;}
.page-eyebrow{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm);margin-bottom:0.75rem;opacity:0.8;}
.page-title{font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.5rem);font-weight:300;color:#f5f1eb;line-height:1.1;margin-bottom:0.75rem;}
.page-desc{font-size:0.88rem;color:rgba(245,241,235,0.5);max-width:560px;line-height:1.7;}

/* ── Filter bar ─────────────────────────────────────────── */
.filter-bar{background:var(--deep);border-bottom:1px solid var(--border);padding:0 2rem;position:sticky;top:0;z-index:100;}
.filter-bar-inner{max-width:1280px;margin:0 auto;display:flex;gap:0.4rem;padding:0.85rem 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:center;}
.filter-bar-inner::-webkit-scrollbar{display:none;}
.filter-chip,.filter-all,.filter-year{
  flex-shrink:0;display:inline-flex;align-items:center;gap:0.4rem;
  padding:0.35rem 0.85rem;border:1px solid var(--border);background:transparent;
  font-family:var(--font-body);font-size:0.65rem;font-weight:400;
  letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(245,241,235,0.45);cursor:pointer;transition:all 0.15s;min-height:36px;
}
.filter-chip:hover,.filter-all:hover,.filter-year:hover{color:var(--warm);border-color:rgba(200,169,126,0.4);}
.filter-chip.active,.filter-all.active,.filter-year.active{background:rgba(200,169,126,0.1);border-color:var(--warm);color:var(--warm);}
.filter-chip.chip-empty{opacity:0.35;cursor:default;}
.filter-chip.chip-empty:hover{color:rgba(245,241,235,0.45);border-color:var(--border);}
.chip-count{font-size:0.58rem;opacity:0.6;background:rgba(255,255,255,0.07);padding:0.05rem 0.35rem;border-radius:10px;}
.filter-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 0.25rem;}
.filter-count{font-size:0.68rem;color:rgba(245,241,235,0.3);letter-spacing:0.06em;margin-left:auto;white-space:nowrap;flex-shrink:0;}
.filter-section-label{font-size:0.55rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(245,241,235,0.25);flex-shrink:0;white-space:nowrap;}

/* ── Post grid & cards ──────────────────────────────────── */
.grid-wrap{max-width:1280px;margin:0 auto;padding:3rem 2rem 5rem;}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}
.card{background:var(--surface,#fff);border:1px solid var(--mist);overflow:hidden;display:flex;flex-direction:column;}
.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1;}
.card-thumb{width:100%;height:200px;background-color:var(--mist);background-size:cover;background-position:center center;flex-shrink:0;transition:opacity 0.2s;}
.card-thumb-empty{background:linear-gradient(135deg,var(--mist),var(--paper));}
.card-link:hover .card-thumb{opacity:0.92;}
.card-body{padding:1.25rem 1.25rem 1.5rem;flex:1;display:flex;flex-direction:column;}
.card-cat{font-size:0.58rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--warm);margin-bottom:0.5rem;}
.card-title{font-family:var(--font-heading);font-size:1.15rem;font-weight:400;color:var(--ink);line-height:1.3;margin-bottom:0.5rem;transition:color 0.15s;}
.card-link:hover .card-title{color:var(--ash);}
.card-excerpt{font-size:0.78rem;color:var(--stone);line-height:1.55;margin-bottom:0.85rem;flex:1;}
.card-date{font-size:0.6rem;color:var(--stone);letter-spacing:0.05em;margin-top:auto;}
.card.hidden{display:none;}
.empty-state{grid-column:1/-1;padding:4rem 2rem;text-align:center;color:var(--stone);}
.no-results{grid-column:1/-1;text-align:center;padding:4rem 2rem;color:var(--stone);display:none;}
.no-results-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:300;font-style:italic;color:var(--warm);opacity:0.6;margin-bottom:0.5rem;}

/* ── Library-only elements ──────────────────────────────── */
.library-intro{background:var(--deep);padding:0 2rem 2.5rem;border-bottom:1px solid var(--border);}
.library-intro-inner{max-width:1280px;margin:0 auto;}
.library-intro p{font-size:0.88rem;color:rgba(245,241,235,0.45);line-height:1.75;max-width:640px;}
.back-link{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:rgba(245,241,235,0.35);text-decoration:none;transition:color 0.2s;margin-bottom:1.5rem;}
.back-link:hover{color:var(--warm);}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{background:var(--deep);border-top:1px solid var(--border);padding:2rem;text-align:center;}
.footer-brand{font-family:var(--font-heading);font-size:0.9rem;font-weight:300;color:var(--warm);letter-spacing:0.05em;margin-bottom:0.4rem;}
.footer-sub{font-size:0.65rem;color:rgba(245,241,235,0.3);letter-spacing:0.06em;}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:1024px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){
  .site-nav{padding:0;}.page-header{padding:2.5rem 1.25rem 2rem;}
  .filter-bar{padding:0 1rem;}.grid-wrap{padding:2rem 1.25rem 4rem;}
  .post-grid{grid-template-columns:1fr;gap:1.25rem;}.card-thumb{height:180px;}
  .nav-links{gap:1rem;}
}