/* Content canvas */
.page { max-width: min(1200px, 92vw); margin: 0 auto; padding: clamp(12px, 2vw, 24px); }
body { background:#0b0f14; }      /* site chrome */
main.page { background:#fbfaf6; } /* content backdrop */

/* Grid that scales as viewport grows */
.card-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); align-items:stretch; }
@media (min-width: 1440px){ .card-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width: 1800px){ .card-grid{ grid-template-columns:repeat(5, minmax(0,1fr)); } }

/* Hero scales down on wide/zoomed screens */
.hero{ min-height: clamp(22vh, 34vh, 38vh); padding: clamp(28px, 6vh, 56px) 16px; display:grid; place-items:center; text-align:center;
       background: radial-gradient(1200px 600px at 50% 0%, #0f1720 0%, #0b0f14 60%, #090c10 100%); }
.hero .inner{ max-width: 900px; margin: 0 auto; }
.hero h1{ font-size: clamp(2rem, 4vw + 0.5rem, 4rem); margin: 0 0 8px; color:#dbe9f1; }
.hero .subtitle{ font-size: clamp(1rem, 1.1vw + 0.4rem, 1.25rem); color:#9fb7c7; }

/* Cards */
.card{ background:#f7f2e5; border:1px solid #e6dfcf; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.12); transform: translateY(-1px); transition: box-shadow .2s, transform .2s; }
.card-link{ display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.card-link:focus-visible{ outline:3px solid #7ec0e4; outline-offset:3px; border-radius:12px; }
.card img{ width:100%; aspect-ratio:16/9; object-fit:cover; object-position:50% 25%; }
.placeholder{ aspect-ratio:16/9; display:grid; place-items:center; background:linear-gradient(135deg,#22303a, #0b0f14); color:#cfe3ee; font-weight:700; }
.card-body{ padding:16px; line-height:1.65; display:flex; flex-direction:column; height:100%; }
.card h3{ margin:0 0 8px; font-size:1.1rem; line-height:1.3; color:#0f1b22; }
.subtitle{ font-size:.88rem; color:#5a6c73; margin:0 0 8px; font-style:italic; line-height:1.4; }
.excerpt{ font-size:.98rem; color:#2d3a3f; flex-grow:1; } /* server already trims to 25–40 words */
.meta-row{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.chip{ font-size:.75rem; padding:4px 8px; border-radius:999px; background:#eef5f8; border:1px solid #d7e6ee; color:#27566b; }

/* Menu */
.site-nav { position: sticky; top: 0; z-index: 1000; background: #0b0f14; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-badge { background: rgba(255,255,255,0.95); border-radius: 12px; padding: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); display: inline-flex; }
.logo-badge img { width: 36px; height: 36px; object-fit: contain; }
.brand-text { color: #dbe9f1; font-weight: 700; letter-spacing: .3px; }
.nav-links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: #c8d8e4; text-decoration: none; padding: 8px 6px; border-radius: 8px; }
.nav-links a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-toggle { display: none; background: none; color: #e7f0f6; border: 1px solid rgba(255,255,255,0.15); padding: 6px 10px; border-radius: 8px; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-block; }
  .nav-links { position: absolute; right: 16px; top: 54px; background: #0b0f14; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px; display: none; flex-direction: column; min-width: 180px; }
  .nav-links.show { display: flex; }
}

/* Skip link for accessibility */
.skip {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 1001;
}
.skip:focus {
  top: 6px;
}

/* Loading indicator */
.loading {
  text-align: center;
  padding: 40px 20px;
  color: #666;
  font-size: 1.1rem;
}

/* General improvements */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }