/* --------- Theme --------- */
:root{
  --bg:#ffffff;           /* white background */
  --fg:#000000;           /* black text */
  --muted:#545e6a;        /* muted paragraph text */
  --accent:#072A4A;       /* archive button + hover color */
  --card-bg:#ffffff;      /* white cards */
  --border:#e5e7eb;       /* light gray borders */
  --shadow:0 2px 10px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg)}
body{font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; line-height:1.6}

/* Layout container */
.wrap{max-width:1100px;margin:0 auto;padding:1.2rem}

/* --------- Header --------- */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(120%) blur(4px);
  border-bottom:1px solid var(--border);
}
.header-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:1rem; align-items:center;
}
.brand{margin:0;font-size:1.4rem; letter-spacing:.2px}
.nav{display:flex; gap:1rem; align-items:center; justify-content:flex-end}
.nav-link{
  color:var(--fg); text-decoration:none; opacity:.85;
  font-weight:500;
}
.nav-link:hover{color:var(--accent); opacity:1}
.logo{
  height:40px; width:auto; object-fit:contain;
  justify-self:end;
}

/* --------- Intro --------- */
.intro{padding:2rem 0 1.2rem}
.tagline{
  margin:0 0 .6rem 0;
  font-weight:400;
  font-size: clamp(1.1rem, 2.1vw, 1.4rem);
}
.subtitle{
  margin:.2rem 0 0 0;
  color:var(--muted);
  max-width:900px;
  font-size: clamp(1rem, 2.2vw, 1.05rem);
}

/* --------- Grid & Cards --------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:1.1rem;
  padding:1rem 0 2rem;
}
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  border-color:#d6dae0;
}
.card-link{ color:inherit; text-decoration:none; display:grid; grid-template-rows:auto 1fr; height:100% }
.card-img{ width:100%; height:200px; object-fit:cover; display:block; background:#f3f4f6 }
.card-body{ padding:1rem; display:grid; gap:.45rem }
.card-title{ margin:0; font-size:1.08rem; line-height:1.35 }
.card-sub{ margin:0; color:var(--muted); font-size:.95rem }
.card-meta{ margin:.25rem 0 0; color:#6b7280; font-size:.85rem }

/* --------- Archive button --------- */
.more{ display:flex; justify-content:center; padding-bottom:3rem }
.btn{
  display:inline-block; text-decoration:none; border-radius:12px;
  padding:.72rem 1.05rem; font-weight:600; border:1px solid var(--accent);
}
.btn-archive{
  background:var(--accent); color:#ffffff;
}
.btn-archive:hover{
  filter:brightness(1.05);
}

/* --------- Footer --------- */
.site-footer{
  border-top:1px solid var(--border);
  color:#6b7280;
}

/* --------- Helpers --------- */
.empty, .error{ color:#6b7280; text-align:center; padding:1rem 0 2rem }

/* --------- Responsive tweaks --------- */
@media (max-width:720px){
  .header-row{ grid-template-columns: 1fr auto; }
  .logo{ display:none; } /* hide logo on small screens for space */
}