/* ===== Base ===== */
:root { --header-h: 100px; }
html, body { margin: 0; }

/* ===== Header ===== */
table.site-header {
  width: 100%;
  border-collapse: collapse;
  background: #111;
  color: #f5f5f5;
}
.site-header__row { height: var(--header-h); }
.site-header td { padding: 0 24px; vertical-align: middle; }

.site-header__name {
  width: 50%;
  font: 900 22px/1.2 Arial, Helvetica, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-header__navcell { width: 50%; }

table.site-nav { width: 100%; border-collapse: collapse; }
.site-nav td { width: 20%; text-align: center; }
.site-nav a  { color: #f5f5f5; text-decoration: none; font: 700 18px/1 Arial, Helvetica, sans-serif; }
.site-nav a:hover { color: #ff2e63; }

/* Medium tweaks (header only) */
@media (max-width: 980px) {
  .site-header__name { font-size: 20px; }
  .site-nav a { font-size: 16px; }
  .site-header td { padding: 0 16px; }
}

/* Mobile / Narrow — header wraps and grows */
@media (max-width: 760px) {
  .site-header__row { height: auto !important; }
  .site-header, .site-header tr, .site-header td { display: block; width: 100% !important; }
  .site-header__name, .site-header__navcell { width: 100% !important; }
  .site-header td { padding: 14px 16px !important; }

  .site-nav, .site-nav tr { display: block; width: 100% !important; }
  .site-nav td { display: inline-block; width: auto !important; text-align: left; padding: 0 12px 8px 0; }
}