* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 
  line-height: 1.6; color: #000; 
  margin: 0;
  padding: 0;
  min-height: 100vh; display:flex; flex-direction:column;
}
h2.best-people { margin-bottom: 16px; }
h3 { font-weight: 400; margin-top: 20px; }
h3:first-of-type { margin-top: 20px; }
ul { margin: 8px 0 0 18px; }
.page-content ul { margin: 8px 0 0 18px; }
.master-title { margin: 0 0 16px 0; }
.tags-inline { margin-top: 12px; }
.header-link { text-decoration: none; }
.footer-link { color: #fff; }
.last-updated { margin-top: 20px; opacity: 0.8; }
.header { margin: 0; padding: 0; }
.header-row-1 { display: grid; grid-template-columns: 20% 60% 20%; align-items: center; 
  padding: 0px; }
.header-left { background-color: #ff5900; height: 100%; display:flex; 
  align-items:center; justify-content: flex-end; padding: 10px 12px; }
.header-center { text-align: left; padding: 0px 12px; }
.header-right { text-align: right; padding: 10px 12px; display: flex; justify-content: flex-end; }
.lang-switcher { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; max-width: 100%; }
.lang-item { text-decoration: none; display: inline-flex; align-items: center; margin: 2px; }
.lang-item .fi { font-size: 14px; border-radius: 2px; }
.lang-item:hover { opacity: 0.8; }
.logo { width: 80px; height: 80px; flex-shrink: 0; }
.logo img { width: 100%; height: 100%; object-fit: contain; }
.header-title { font-size: 48px; font-weight: bold; color: #ff5900; margin: 0; line-height: 1.2; }
.header-row-2 { display: grid; grid-template-columns: 20% 60% 20%; align-items: center; padding: 0px; }
.header-row-2-center { text-align: left; display: flex; flex-direction: row; align-items: center; 
  justify-content: flex-start; gap: 10px; padding: 20px 12px; }
.header-subtitle { font-size: 18px; color: #000; margin: 0; }
.social-icons { display: inline-flex; gap: 8px; vertical-align: middle; }
.social-icon { display: inline-flex; align-items: center; justify-content: center; margin: 0; background: transparent; width: auto; height: auto; }
.social-icon:hover { opacity: 0.8; }
.social-icon img { width: 32px; height: 32px; }
.main-content { width: 60%; margin: 0 20%;  padding: 0px 12px; flex: 1; }
.is-home .main-content { width: 80%; margin: 0 0% 0 20%; }
.best-people { text-align: left; font-size: 44px; font-weight: 300; color: #000; margin-bottom: 40px; }
.cta-text { text-align: center; font-size: 18px; color: #000; margin-top: 30px; }
.cta-text a { color: #ff5900; text-decoration: none; font-weight: bold; }
.cta-text a:hover { text-decoration: underline; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:10px; }
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.card { border:1px solid #eee; border-radius:12px; padding:16px; background:#fff; display:flex; flex-direction:column; }
.card-link { display:block; color:inherit; text-decoration:none; }
.card-title { font-weight:700; color:#0088cc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-subtitle { color:#0088cc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tg-link { color:#0088cc; text-decoration:none; white-space:nowrap; }
.card-text { font-size:14px; color:#222; text-decoration:none; display:block; white-space:pre-wrap; flex:1; }
.tags { margin-top:auto; padding-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-size:12px; color:#00324a; background:#e6f4ff; border:1px solid #cde8ff; border-radius:5px; padding:4px 8px; }
.card-body { font-size:16px; color:#222; white-space:pre-wrap; border:1px solid #eee; border-radius:12px; padding:16px; background:#fff; }
.text-body { font-size:16px; color:#222; white-space:pre-wrap; }
.site-footer { margin-top:20px; background:#ff5900; }
.footer-row { display:grid; grid-template-columns:20% 60% 20%; align-items:center;}
.footer-left { }
.footer-center { color:#fff; text-align:left; padding: 0px 12px;}
.footer-note { color:#fff; opacity:0.95; font-size:18px; font-weight:400; margin-top:6px; }
.footer-right { text-align:left;  padding: 10px 12px;}
.footer-fox { width:80px; height:80px; object-fit:contain; }
@media (max-width: 768px) {
  .header-row-1 { grid-template-columns: 1fr 1fr; }
  .header-right { display:none; }
  .header-title { font-size: 32px; }
  .header-row-2 { grid-template-columns: 1fr; }
  .header-row-2-left { display: none; }
  .header-row-2-right { display: none; }
  .header-row-2-center { flex-direction: column; }
  .header-subtitle { font-size: 14px; }
  .best-people { font-size: 24px; }
  .logo { width: 60px; height: 60px; }
}