/* Updated base.css with theme variables and sensible fallbacks */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg, #ffffff);color:var(--text, #111111);font-family:var(--font-base, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);line-height:1.6}
body{
  background-image: var(--bg-image, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
a{color:var(--primary, #003366);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--maxw, 1100px);margin:0 auto;padding:0 16px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}
.grid-2{display:grid;grid-template-columns:1fr auto;gap:16px}
.right{text-align:right}
.muted{color:#6b7280}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;background:var(--primary, #003366);color:white;border:1px solid var(--primary, #003366);margin:4px 6px 0 0}
.btn.outline{background:transparent;color:var(--primary, #003366);border:1px solid var(--primary, #003366)}
.site-header{
  position:sticky;top:0;
  background: var(--header-bg, var(--bg, #ffffff));
  color: var(--header-text, var(--text, #111111));
  border-bottom:1px solid #e5e7eb;
  background-image: var(--header-bg-image, none);
  background-size: cover;
  background-position: center;
}
.site-header .brand{font-family:var(--font-headings, inherit);font-size:20px;color:var(--header-text, #111111);padding:14px 0;display:inline-block}
.site-header a{color:var(--header-text, #111111)}
.main-nav a{margin:0 8px;padding:14px 6px;display:inline-block}
main{padding:24px 0}
.hero{padding:64px 0;background:var(--muted, #f5f7fa);border-radius:12px;margin:20px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:white;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.card img{border-radius:8px}
.site-footer{
  margin-top:32px;padding:24px 0;
  background: var(--footer-bg, var(--bg, #ffffff));
  color: var(--footer-text, var(--text, #111111));
  border-top:1px solid #e5e7eb
}
.site-footer a{color:var(--footer-text, var(--text, #111111))}
#fb-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.fb-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:white}
.fb-card .fb-body{padding:12px}
.fb-card time{display:block;font-size:12px;color:#6b7280;margin-bottom:8px}
@media (max-width:700px){
  .grid-2{grid-template-columns:1fr}
  .right{text-align:left}
}