/* Quiet Minimal — keeps your palette & fonts, fixes layout issues */
:root{
  --bg:#fffaf7; --surface:#ffffff; --ink:#262626; --muted:#6b7280;
  --line:#eee6e1; --brand:#bc6442; --brand-weak:#f7e2d8;
  --radius:16px; --max:1120px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1113; --surface:#14171a; --ink:#e7e7e7; --muted:#9aa2ad; --line:#23282e; --brand:#e3a187; --brand-weak:#2b201c; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:300 16px/1.7 "Lato", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif; font-weight:800; line-height:1.2; margin:0 0 .75rem}
h1{font-size:clamp(2rem,3.5vw,3rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.25rem)}
h3{font-size:clamp(1.25rem,1.8vw,1.5rem)}
p{margin:.5rem 0 1rem}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

/* Layout */
.container{width:min(100% - 2rem, var(--max)); margin-inline:auto}
.section{padding-block:clamp(2rem,5vw,3.5rem)}
.grid{display:grid; gap:1.25rem}
@media (min-width:640px){ .grid-2{grid-template-columns:1fr 1fr} }
@media (min-width:992px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

/* Header */
.site-header{position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--line)}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0}
.brand{font-weight:800}
.nav-links{display:flex; gap:.25rem}
.nav-links a{padding:.5rem .75rem; border-radius:10px}
.nav-links a[aria-current="page"]{background:var(--brand-weak)}
.menu-toggle{display:none}
@media (max-width:768px){
  .menu-toggle{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid var(--line); border-radius:10px}
  .nav-links{position:fixed; inset:56px 0 0 0; background:var(--surface); border-top:1px solid var(--line); flex-direction:column; padding:1rem; transform:translateY(-120%); transition:.2s ease}
  .nav-links.is-open{transform:translateY(0)}
}

/* Hero */
.hero{text-align:center; padding-block:clamp(2.5rem,6vw,5rem)}
.hero img{width:min(560px,85vw); height:auto; border-radius:22px; border:none solid var(--line)}

/* Cards */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); 
  padding:1.25rem; transition:transform .15s ease;
}
.card:hover{transform:translateY(-1px)}
.badges{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.25rem}
.badge{border:1px solid var(--line); padding:.25rem .55rem; border-radius:999px; color:var(--muted); font-size:.85rem}

/* NEW: Media card — fixes the “squeezed text / huge image” issue */
.media-card{
  display:grid; gap:1rem; align-items:center;
  grid-template-columns: minmax(320px, 1.15fr) 1fr;
}
.media-card img{
  width:100%;
  aspect-ratio: 16 / 9;      /* consistent, non-tall thumbnails */
  object-fit: cover;
  border-radius:12px;
  border:1px solid var(--line);
}
@media (max-width: 900px){ .media-card{ grid-template-columns:1fr; } }

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:1.25rem 0; color:var(--muted); background:var(--surface)}

/* Blog Enhancements (progress + TOC — safe to keep) */
.reading-progress{position:fixed; top:0; left:0; height:3px; width:0; background:var(--brand); z-index:20}
.toc{border:1px solid var(--line); border-radius:12px; padding:1rem; background:var(--surface)}
.toc h3{margin:0 0 .5rem; font-size:1rem}
.toc ol{margin:0; padding:0; list-style:none; display:grid; gap:.25rem}

/* Images */
img{max-width:100%; height:auto}