:root{
  --bg:#faf8f5; --card:#ffffff; --ink:#1f2937; --muted:#6b7280;
  --brand:#2e7aef; --ring:rgba(46,122,239,.25);
  --radius:16px; --shadow:0 6px 18px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0d10; --card:#12161b; --ink:#e5e7eb; --muted:#9ca3af; --shadow:0 6px 18px rgba(0,0,0,.35) }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg);
}
.wrap{max-width:1100px; margin:auto; padding:24px}
header{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:8px 0 18px}
.title{font-weight:800; font-size:clamp(22px,3.5vw,32px)}
.sub{color:var(--muted); font-size:14px}
.search{position:relative; flex:1 1 260px; max-width:420px}
.search input{
  width:100%; padding:12px 40px 12px 12px; border:1px solid #e5e7eb; border-radius:12px; background:var(--card); color:var(--ink);
  outline:none; box-shadow:none;
}
.search svg{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:22px; height:22px; opacity:.5}
.grid{display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}
.card{
  display:block; background:var(--card); border-radius:var(--radius); text-decoration:none; color:inherit;
  box-shadow:var(--shadow); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.card:focus, .card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.12); outline:none }
.media{ aspect-ratio:4/3; width:100%; background:#eaeaea; display:block; object-fit:cover }
@media (prefers-color-scheme: dark){ .media{ background:#1c222a } }
.body{padding:14px 14px 16px}
.h{font-weight:700; font-size:18px; margin:2px 0 6px}
.p{color:var(--muted); font-size:14px; margin:0}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(46,122,239,.10); color:#1f4aa3}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.crumbs{font-size:14px; color:var(--muted); margin:8px 0 14px}
.crumbs a{color:inherit}
footer{margin:28px 0 12px; color:var(--muted); font-size:13px; text-align:center}

/* --- header logo additions --- */
.head-left{ display:flex; align-items:center; gap:14px; min-width:260px; }
.brand img{ display:block; height:auto; }
@media (max-width:520px){
/* .brand img{ max-width:36px; }---*/
}
/* Bigger, responsive logo */
:root{
  --logo-h: clamp(44px, 8vw, 76px);
}
.stickybar .wrap.row { padding-block: 10px; }
.logo{
  height: var(--logo-h);
  width: auto;
  display: block;
  object-fit: contain;
}