:root {
  --contrast: #222;
  --muted: #575760;
  --border: #f0f0f0;
  --canvas: #f7f8f9;
  --surface: #fff;
  --accent: #1e73be;
  --max-width: 1200px;
}

.site-header { border: 0; }
.header-inner { min-height: 110px; }
.brand img { width: 200px; }
#site-nav { gap: 0; }
#site-nav a { padding: 20px; font-weight: 400; }
.page-shell { grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr); gap: 20px; }
.entry, .archive-header, .sidebar { margin-bottom: 20px; }
.entry h1, .entry h2, .archive-header h1 { font-weight: 400; }
.entry h1 { font-size: clamp(2rem, 5vw, 2.5rem); }
.home-intro { margin-bottom: 20px; }
.home-intro .entry-content p:last-child { margin-bottom: 0; }
.home-guides { padding: 40px; background: var(--surface); }
.home-guides h2 { margin: 0 0 20px; font-size: 1.7rem; font-weight: 400; }
.home-guides ul { margin: 0; padding: 0; list-style: none; }
.home-guides li {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.home-guides li:last-child { border-bottom: 1px solid var(--border); }
.home-guides img { width: 180px; height: 118px; object-fit: cover; }
.home-guides h3 { margin: 0 0 8px; font-size: 1.2rem; line-height: 1.35; font-weight: 400; }
.home-guides h3 a {
  color: var(--contrast);
  text-decoration: none;
}
.home-guides h3 a:hover, .home-guides h3 a:focus { color: var(--accent); }
.home-guides p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.sidebar { padding: 40px; }
.sidebar-card h3 { font-weight: 400; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }
.footer-inner a { color: var(--muted); }

@media (max-width: 860px) {
  .header-inner { min-height: 90px; }
  #site-nav a { padding: 12px 0; }
  .page-shell { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand img { width: 170px; }
  .home-guides { padding: 24px; }
  .home-guides li { grid-template-columns: 1fr; gap: 14px; }
  .home-guides img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .footer-inner { flex-direction: column; gap: 8px; }
}
