/* ─────────────────────────────────────────────────────────────
   viru-custom.css
   Custom overrides & new components for the migrated static site.
   Add rules here instead of inline <style> blocks.
   ───────────────────────────────────────────────────────────── */



/* ── Clubs grid layout ────────────────────────────────────── */

.viru-clubs-outer { width: 100%; }

.viru-clubs-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  width: 100%;
}

.viru-club-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px;
}

.viru-club-logo {
  height: 110px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.viru-club-logo img {
  max-width: 100%;
  max-height: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.viru-club-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px;
  flex-grow: 1;
  color: inherit;
}

.viru-club-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: auto;
}

/* ── Club grid responsive ─────────────────────────────────── */

@media (max-width: 980px) {
  .viru-clubs-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .viru-clubs-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── Players calendar ─────────────────────────────────────────
   Self-contained month calendar. No external deps — pure
   HTML/CSS/JS. Data lives in the inline <script> in the panel.
   ─────────────────────────────────────────────────────────── */

.viru-cal {
  font-family: 'Inter', Helvetica, Arial, sans-serif;
  max-width: 860px;
  margin: 24px auto 40px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,.13);
  background: #fff;
}

/* ── header ── */
.viru-cal-hd {
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
}
.viru-cal-hd-title {
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.viru-cal-nav-btn {
  background: none;
  border: 2px solid rgba(255,255,255,.3);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  padding: 0;
}
.viru-cal-nav-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.7);
}

/* ── day-name row ── */
.viru-cal-daynames {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
}
.viru-cal-daynames > div {
  padding: 10px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #999;
}
.viru-cal-daynames > div:first-child,
.viru-cal-daynames > div:last-child { color: #c0392b; }

/* ── grid ── */
.viru-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.viru-cal-day {
  min-height: 88px;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 7px 6px;
  transition: background 120ms ease;
  box-sizing: border-box;
}
.viru-cal-day:nth-child(7n) { border-right: none; }
.viru-cal-day--other         { background: #fafafa; }
.viru-cal-day--weekend       { background: #fdf8f8; }
.viru-cal-day--weekend.viru-cal-day--other { background: #faf6f6; }
.viru-cal-day--has-events    { cursor: pointer; }
.viru-cal-day--has-events:hover:not(.viru-cal-day--other) { background: #fef2f2; }

/* date number */
.viru-cal-daynum {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: #222;
  margin-bottom: 5px;
}
.viru-cal-day--other .viru-cal-daynum { color: #ccc; }
.viru-cal-day--today  .viru-cal-daynum {
  background: #dc231e;
  color: #fff;
  font-weight: 700;
}

/* event chips */
.viru-cal-event {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.5;
  transition: filter 120ms ease;
}
.viru-cal-event:hover                { filter: brightness(.9); }
.viru-cal-event--fixture             { background: #fde8e8; color: #991b1b; }
.viru-cal-event--training            { background: #dbeafe; color: #1e40af; }
.viru-cal-event--important           { background: #fef3c7; color: #92400e; }
.viru-cal-event--social              { background: #dcfce7; color: #166534; }

/* ── overlay ── */
.viru-cal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.viru-cal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── event drawer ── */
.viru-cal-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: #fff;
  z-index: 9999;
  box-shadow: -6px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.viru-cal-drawer.is-open { transform: translateX(0); }
.viru-cal-drawer-stripe  {
  height: 5px;
  background: linear-gradient(90deg, #dc231e 0%, #b01717 100%);
  flex-shrink: 0;
}
.viru-cal-drawer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 10px;
  flex-shrink: 0;
}
.viru-cal-drawer-close {
  background: #f4f4f4;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
  flex-shrink: 0;
}
.viru-cal-drawer-close:hover { background: #111; color: #fff; }
.viru-cal-drawer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.viru-cal-drawer-badge--fixture   { background: #fde8e8; color: #991b1b; }
.viru-cal-drawer-badge--training  { background: #dbeafe; color: #1e40af; }
.viru-cal-drawer-badge--important { background: #fef3c7; color: #92400e; }
.viru-cal-drawer-badge--social    { background: #dcfce7; color: #166534; }
.viru-cal-drawer-body {
  padding: 4px 22px 28px;
  overflow-y: auto;
  flex: 1;
}
.viru-cal-drawer-title {
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  margin: 0 0 22px;
}
.viru-cal-details {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.viru-cal-detail {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.viru-cal-detail-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.viru-cal-detail-icon svg { width: 16px; height: 16px; stroke: #555; }
.viru-cal-drawer-badge svg { width: 12px; height: 12px; vertical-align: -1px; }
.viru-cal-detail-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}
.viru-cal-detail-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #aaa;
}
.viru-cal-detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}
.viru-cal-drawer-divider {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 0 0 16px;
}
.viru-cal-drawer-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

/* ── responsive ── */
@media (max-width: 767px) {
  .viru-cal { border-radius: 10px; margin: 12px auto 28px; }
  .viru-cal-hd { padding: 16px 18px; }
  .viru-cal-hd-title { font-size: 20px; }
  .viru-cal-day { min-height: 56px; padding: 5px 4px; }
  .viru-cal-daynum { font-size: 12px; width: 24px; height: 24px; }
  .viru-cal-event { font-size: 9px; padding: 1px 4px; }
  .viru-cal-drawer { width: 100vw; }
}


/* ── Login drawer ─────────────────────────────────────────────
   Triggered by .viru-nav-login in the main nav (all pages).
   ─────────────────────────────────────────────────────────── */

.viru-login-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  opacity: 0; pointer-events: none;
  transition: opacity 260ms ease;
}
.viru-login-overlay.is-open { opacity: 1; pointer-events: auto; }

.viru-login-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 100vw;
  background: #fff; z-index: 9999;
  box-shadow: -6px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.viru-login-drawer.is-open { transform: translateX(0); }
.viru-login-stripe { height: 5px; background: linear-gradient(90deg,#dc231e,#b01717); flex-shrink:0; }
.viru-login-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 16px; flex-shrink: 0;
}
.viru-login-heading {
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 20px; font-weight: 700; color: #111; letter-spacing: .03em;
}
.viru-login-close {
  background: #f4f4f4; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; cursor: pointer; color: #555;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms, color 150ms;
}
.viru-login-close:hover { background: #111; color: #fff; }
.viru-login-body { padding: 0 22px 28px; flex: 1; overflow-y: auto; }

.viru-login-field { margin-bottom: 16px; }
.viru-login-field label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #888; margin-bottom: 6px;
}
.viru-login-field input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid #e0e0e0; border-radius: 8px;
  font-size: 14px; font-family: 'Inter', Helvetica, sans-serif;
  outline: none; transition: border-color 150ms;
  box-sizing: border-box; background: #fafafa;
}
.viru-login-field input:focus { border-color: #dc231e; background: #fff; }
.viru-login-error { font-size: 13px; color: #dc231e; margin-bottom: 14px; min-height: 18px; font-weight: 600; }
.viru-login-btn {
  width: 100%; padding: 12px; background: #111; color: #fff;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 700;
  font-family: 'Inter', Helvetica, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; transition: background 150ms;
}
.viru-login-btn:hover { background: #dc231e; }
.viru-login-btn:disabled { opacity: .5; cursor: not-allowed; }
.viru-login-btn--ghost {
  background: none; color: #666; border: 1.5px solid #e0e0e0; margin-top: 10px;
}
.viru-login-btn--ghost:hover { background: #f4f4f4; color: #111; }

.viru-login-user-card { background: #f8f8f8; border-radius: 10px; padding: 16px; margin-bottom: 18px; }
.viru-login-user-name { font-family: 'Oswald', Helvetica, sans-serif; font-size: 17px; font-weight: 700; color: #111; margin-bottom: 4px; }
.viru-login-user-role { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #999; }
.viru-login-role-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 6px;
}
.viru-login-role-badge--super_admin { background: #111; color: #fff; }
.viru-login-role-badge--admin       { background: #dc231e; color: #fff; }
.viru-login-role-badge--club_rep    { background: #1e40af; color: #fff; }
.viru-login-role-badge--coach       { background: #166534; color: #fff; }
.viru-login-role-badge--player      { background: #f0f0f0; color: #555; }

.viru-nav-login > a { color: #dc231e !important; font-weight: 700 !important; }

/* ── Event edit/create form (inside event drawer) ─────────────
   Shown when Edit or New Event is triggered; hides read view.
   ─────────────────────────────────────────────────────────── */

.viru-cal-drawer-actions {
  display: flex; gap: 8px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #f0f0f0;
}
.viru-cal-action-btn {
  flex: 1; padding: 9px 12px; border-radius: 7px;
  font-size: 12px; font-weight: 700;
  font-family: 'Inter', Helvetica, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; border: none; transition: background 150ms, color 150ms;
}
.viru-cal-action-btn--edit   { background: #111; color: #fff; }
.viru-cal-action-btn--edit:hover   { background: #333; }
.viru-cal-action-btn--delete { background: #fde8e8; color: #991b1b; }
.viru-cal-action-btn--delete:hover { background: #dc231e; color: #fff; }
.viru-cal-action-btn--save   { background: #dc231e; color: #fff; }
.viru-cal-action-btn--save:hover   { background: #b01717; }
.viru-cal-action-btn--cancel { background: #f4f4f4; color: #555; }
.viru-cal-action-btn--cancel:hover { background: #e0e0e0; color: #111; }

.viru-event-form-field { margin-bottom: 14px; }
.viru-event-form-field label {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #aaa; margin-bottom: 5px;
}
.viru-event-form-field input,
.viru-event-form-field select,
.viru-event-form-field textarea {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid #e8e8e8; border-radius: 7px;
  font-size: 13px; font-family: 'Inter', Helvetica, sans-serif;
  outline: none; background: #fafafa;
  transition: border-color 150ms; box-sizing: border-box;
}
.viru-event-form-field input:focus,
.viru-event-form-field select:focus,
.viru-event-form-field textarea:focus { border-color: #dc231e; background: #fff; }
.viru-event-form-field textarea { resize: vertical; min-height: 80px; }

.viru-cal-new-btn {
  display: none; align-items: center; gap: 6px;
  background: #dc231e; color: #fff; border: none; border-radius: 20px;
  padding: 7px 14px; font-size: 12px; font-weight: 700;
  font-family: 'Inter', Helvetica, sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; transition: background 150ms;
}
.viru-cal-new-btn:hover { background: #b01717; }
.viru-cal-new-btn svg { width: 14px; height: 14px; }
.viru-cal-hd.is-authed .viru-cal-new-btn { display: flex; }


/* ── Login drawer ─────────────────────────────────────────────
   Right-side drawer triggered by the LOGIN nav link.
   Shared across all pages via viru-auth.js.
   ─────────────────────────────────────────────────────────── */

.viru-login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.viru-login-overlay.is-open { opacity: 1; pointer-events: auto; }

.viru-login-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  max-width: 100vw;
  background: #fff;
  z-index: 10001;
  box-shadow: -6px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.viru-login-drawer.is-open { transform: translateX(0); }

.viru-login-drawer-stripe {
  height: 5px;
  background: linear-gradient(90deg, #dc231e 0%, #b01717 100%);
  flex-shrink: 0;
}
.viru-login-drawer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 8px;
  flex-shrink: 0;
}
.viru-login-drawer-title {
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}
.viru-login-drawer-close {
  background: #f4f4f4;
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: #555;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.viru-login-drawer-close:hover { background: #111; color: #fff; }

.viru-login-drawer-body {
  padding: 12px 22px 28px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* form fields */
.viru-login-field { display: flex; flex-direction: column; gap: 5px; }
.viru-login-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
}
.viru-login-field input,
.viru-login-field select {
  padding: 10px 12px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', Helvetica, sans-serif;
  color: #222;
  background: #fafafa;
  transition: border-color 150ms ease, background 150ms ease;
  width: 100%;
  box-sizing: border-box;
}
.viru-login-field input:focus,
.viru-login-field select:focus {
  outline: none;
  border-color: #dc231e;
  background: #fff;
}
.viru-login-error {
  font-size: 13px;
  color: #dc231e;
  font-weight: 600;
  min-height: 18px;
}
.viru-login-btn {
  width: 100%;
  padding: 12px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  font-family: 'Inter', Helvetica, sans-serif;
  cursor: pointer;
  transition: background 150ms ease;
  margin-top: 2px;
}
.viru-login-btn:hover { background: #dc231e; }
.viru-login-btn:disabled { background: #aaa; cursor: not-allowed; }
.viru-login-btn--outline {
  background: transparent;
  color: #111;
  border: 2px solid #e0e0e0;
}
.viru-login-btn--outline:hover { background: #111; color: #fff; border-color: #111; }

.viru-login-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #bbb; font-weight: 600;
}
.viru-login-divider::before,
.viru-login-divider::after {
  content: ''; flex: 1; height: 1px; background: #eee;
}

/* logged-in state */
.viru-login-user-card {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.viru-login-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #dc231e;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.viru-login-user-info { flex: 1; min-width: 0; }
.viru-login-user-name {
  font-weight: 700; font-size: 15px; color: #111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viru-login-user-role {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #888; margin-top: 2px;
}

/* nav LOGIN link */
.viru-nav-login-item a {
  color: #dc231e !important;
  font-weight: 700 !important;
  cursor: pointer;
}

/* pending approval banner */
.viru-login-pending {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.5;
}


/* ── Calendar edit controls ───────────────────────────────────
   Shown in the event drawer and calendar header when logged in
   with a role that permits editing.
   ─────────────────────────────────────────────────────────── */

.viru-cal-hd-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.viru-cal-new-btn {
  display: none;                 /* shown by JS when logged in as editor */
  align-items: center;
  gap: 5px;
  background: #dc231e;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  font-family: 'Inter', Helvetica, sans-serif;
  cursor: pointer;
  transition: background 150ms ease;
  white-space: nowrap;
}
.viru-cal-new-btn.is-visible { display: flex; }
.viru-cal-new-btn:hover { background: #b01717; }
.viru-cal-new-btn svg { width: 13px; height: 13px; }

.viru-cal-drawer-actions {
  display: none;
  gap: 8px;
  padding: 0 22px 18px;
  flex-shrink: 0;
}
.viru-cal-drawer-actions.is-visible { display: flex; }
.viru-cal-action-btn {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', Helvetica, sans-serif;
  cursor: pointer;
  border: none;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background 150ms ease, color 150ms ease;
}
.viru-cal-action-btn svg { width: 14px; height: 14px; }
.viru-cal-action-btn--edit   { background: #f4f4f4; color: #111; }
.viru-cal-action-btn--edit:hover   { background: #111; color: #fff; }
.viru-cal-action-btn--delete { background: #fde8e8; color: #991b1b; }
.viru-cal-action-btn--delete:hover { background: #dc231e; color: #fff; }

/* inline edit/create form inside the drawer */
.viru-cal-edit-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 0 22px 24px;
  overflow-y: auto;
  flex: 1;
}
.viru-cal-edit-form .viru-login-field input,
.viru-cal-edit-form .viru-login-field select,
.viru-cal-edit-form .viru-login-field textarea {
  padding: 9px 11px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Inter', Helvetica, sans-serif;
  color: #222;
  background: #fafafa;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 150ms ease;
}
.viru-cal-edit-form .viru-login-field textarea {
  resize: vertical;
  min-height: 80px;
}
.viru-cal-edit-form .viru-login-field input:focus,
.viru-cal-edit-form .viru-login-field select:focus,
.viru-cal-edit-form .viru-login-field textarea:focus {
  outline: none;
  border-color: #dc231e;
  background: #fff;
}
.viru-cal-edit-form-title {
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 4px;
}
.viru-cal-edit-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.viru-cal-edit-save {
  flex: 1;
  padding: 10px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', Helvetica, sans-serif;
  cursor: pointer;
  transition: background 150ms ease;
}
.viru-cal-edit-save:hover { background: #dc231e; }
.viru-cal-edit-cancel {
  padding: 10px 16px;
  background: #f4f4f4;
  color: #555;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', Helvetica, sans-serif;
  cursor: pointer;
  transition: background 150ms ease;
}
.viru-cal-edit-cancel:hover { background: #e0e0e0; }

/* ── News & Events page tabs (.viru-ne-*) ────────────────────
   Clean tab + panel system for rebuilt pages, no jQuery needed.
   ─────────────────────────────────────────────────────────── */

.viru-ne-hero {
  background:
    url('/images/header/nav-swoosh.png') top center / 100% 96px no-repeat,
    url('/images/imported/ctt7.jpg') center 28% / cover no-repeat;
  height: 440px;
  margin-top: -1px;           /* sit flush under the white menu bar */
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Tabs straddle the bottom edge of the hero photo, spread across it */
.viru-ne-tabs {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  transform: translateY(50%);
}
.viru-ne-tab {
  flex: 0 0 auto;
  min-width: 170px;
  text-align: center;
  padding: 18px 26px;
  font-family: 'Inter', Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #555;
  background: #ededed;
  border: none;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.viru-ne-tab:hover:not(.viru-ne-tab--active) { color: #111; background: #f5f5f5; }
.viru-ne-tab--active {
  background: #fff;
  color: #111;
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,.32);
}

.viru-ne-panels { background: #f7f7f7; min-height: 600px; padding-top: 52px; }

.viru-ne-panel-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 28px 60px;
}

@media (max-width: 640px) {
  .viru-ne-hero { height: 240px; }
  .viru-ne-tabs { padding: 0 10px; gap: 8px; max-width: 100%; }
  .viru-ne-tab  { flex: 1 1 0; min-width: 0; padding: 12px 6px; font-size: 14px; }
  .viru-ne-panels { padding-top: 46px; }
  .viru-ne-panel-inner { padding: 20px 16px 48px; }
}

/* ── Site header (custom, Divi-free) ──────────────────────────────────
   Standalone semantic header that REPLACED the Divi theme-builder header
   (<header class="et-l et-l--header">). No et_* classes — restyle freely
   without fighting Divi's generated rules or stacking contexts.

   Markup:
     header.viru-header
       .viru-header__inner            (centered flex row, matches Divi row)
         a.viru-header__logo          (left, in FRONT of the swoosh)
         button.viru-nav-toggle       (hamburger, mobile only)
         nav.viru-nav > ul.viru-nav__list > li > a   (right, BEHIND swoosh)

   Login (.viru-nav-login-trigger) and the hamburger toggle are wired in
   assets/js/viru-auth.js.
   ───────────────────────────────────────────────────────────────────── */

/* Fixed white "menu bar" with a wave (swoosh) bottom edge.
   Two background layers (first listed paints on top):
   (1) a5a07…png swoosh, bottom-anchored — solid white above the wave, the
       ribbon, then TRANSPARENT below, so the white edge follows the wave and
       the hero shows through beneath it (no white band).
   (2) a white gradient fills the strip above the art.
   Sizes are percentages (not px) so the wave scales with the header height
   and keeps the same relative position on every screen size:
   72.09% = 155/215 art band; 28.4% = white strip above it (~0.5% overlap). */
/* Self-contained baseline so the menu renders IDENTICALLY on the clean calendar
   page and the Divi pages. Divi supplies a global box-sizing + font-smoothing
   reset that the header silently leaned on; the clean calendar page loads none of
   Divi's CSS, so without this the same markup gets browser-default box-sizing and
   heavier (non-antialiased) text — that was the "calendar nav looks different" bug. */
.viru-header,
.viru-header *,
.viru-header *::before,
.viru-header *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.viru-header {
  /* --menu-shift lifts the swoosh + nav text UP behind the logo without moving
     the logo (which stays pinned near the top). The swoosh background, the
     ::after ribbon, and the nav text all read this one knob; raise it to push the
     whole menu higher, lower it toward 0 to sit back on the bottom edge. Keep it
     moderate — too large and the swoosh's white band clears the top white gradient
     (50%) and the hero bleeds through the seam (KS-009). */
  --menu-shift: 30px;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background-color: transparent;
  background-image:
    url('/images/header/swoosh.png'),
    linear-gradient(#ffffff, #ffffff);
  background-position: center bottom var(--menu-shift), top center;
  /* White gradient covers the top 50% (was 28.4%) so it overlaps DEEP into the
     a5a07 image's own white region (which spans ~28%–67% of the header). The old
     0.5% overlap left a hairline of transparency at the seam where the hero bled
     through "between the swoosh and the white". 50% kills the seam; the swoosh
     image still supplies the wavy white→ribbon→transparent edge below. */
  background-size: 100% 78%, 100% 50%;
  background-repeat: no-repeat, no-repeat;
}

/* Front ribbon overlay — menu text passes BEHIND it (z 5), logo in FRONT (z 15).
   nav-swoosh.png is the same artwork cropped to just the ribbon (transparent
   above AND below) so it paints with NO blend mode and keeps brand red true.
   Mirrors the background swoosh layer so the two ribbons sit on the same wave. */
.viru-header::after {
  content: '';
  position: absolute;
  inset: auto 0 var(--menu-shift) 0;   /* lifted with the swoosh background (see --menu-shift) */
  height: 78%;
  background: url('/images/header/nav-swoosh.png') bottom center / 100% 51.9% no-repeat;
  z-index: 10;
  pointer-events: none;
}

/* Centered content band — matches Divi's row (width:80%; max-width:1080px)
   so the logo + nav line up with the page content below. */
.viru-header__inner {
  width: 80%;
  max-width: 1280px;     /* wider band → logo (left) and nav (right) sit further apart */
  margin: 0 auto;
  padding-top: 2px;      /* less white above the swoosh */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* Logo — left, kept in FRONT of the swoosh */
.viru-header__logo {
  flex: 0 0 auto;
  display: block;
  max-width: 200px;
  padding-top: 4px;
  position: relative;
  z-index: 15;
}
.viru-header__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 184px;
  max-width: none !important;   /* never let a blanket img{max-width:100%} clamp the logo */
  border: 0;
}

/* Nav — right, BEHIND the swoosh; list lifted up to clear the wave */
.viru-nav {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;   /* z-auto: NOT a stacking context, so .viru-nav-dd__menu (z1200) can escape above the swoosh ::after (z10). Nav text stays behind the swoosh via paint order. */
}
.viru-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  top: calc(-22px - var(--menu-shift));   /* base lift (-22) + the shared --menu-shift so nav text rides up with the swoosh. non-context positioning (not transform) so the dropdown menu isn't trapped under the swoosh */
}
.viru-header .viru-nav__list a {
  display: block;
  text-decoration: none;
  color: rgba(0, 0, 0, .6);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.viru-header .viru-nav__list a:hover,
.viru-header .viru-nav__list li.viru-active > a {
  color: #E02B20;
}

/* Hamburger — hidden on desktop */
.viru-nav-toggle {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 9px 8px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  top: calc(-1 * var(--menu-shift));   /* ride up with the swoosh/nav (only visible in compact) */
  z-index: 15;
}
.viru-nav-toggle span {
  display: block;
  height: 3px;
  margin: 4px 0;
  background: #222222;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, background .2s ease;
}
/* Hamburger morphs into an X while the panel is open (JS sets aria-expanded). */
.viru-header.is-compact .viru-nav-toggle[aria-expanded="true"] span { background: var(--red); }
.viru-header.is-compact .viru-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.viru-header.is-compact .viru-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.viru-header.is-compact .viru-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Nav collapse → hamburger ──────────────────────────────────────────
   Driven by JS (viru-auth.js → fitNav): the header gets .is-compact the moment
   the links would collide with the logo, at ANY viewport width — not a fixed
   breakpoint. Adding/removing menu items auto-shifts the collapse point. */
.viru-header.is-compact .viru-nav-toggle { display: block; }

.viru-header.is-compact .viru-nav {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  flex: none;
  z-index: 9999;
}
/* The panel is always laid out (not display:none) so it can ease in/out; it is
   hidden via opacity/visibility instead. Rounded, floating card with the brand
   red top accent + a deep soft shadow — reads as part of the site, not a flat
   WordPress drawer. */
.viru-header.is-compact .viru-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: static;
  top: auto;
  margin: 10px 8px 0;
  background: #ffffff;
  border-top: 3px solid var(--red);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(26, 28, 32, .24);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px) scale(.97);
  pointer-events: none;
  transition: opacity .26s ease, transform .36s cubic-bezier(.22, 1, .36, 1),
              visibility 0s linear .36s;
}
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .26s ease, transform .36s cubic-bezier(.22, 1, .36, 1),
              visibility 0s;
}
.viru-header.is-compact .viru-nav__list li {
  width: 100%;
  border-bottom: 1px solid #f1f2f4;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.viru-header.is-compact .viru-nav__list li:last-child { border-bottom: none; }
/* Items cascade in once the panel is open. */
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li {
  opacity: 1;
  transform: translateY(0);
}
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li:nth-child(1) { transition-delay: .05s; }
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li:nth-child(2) { transition-delay: .09s; }
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li:nth-child(3) { transition-delay: .13s; }
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li:nth-child(4) { transition-delay: .17s; }
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li:nth-child(5) { transition-delay: .21s; }
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li:nth-child(6) { transition-delay: .25s; }
.viru-header.is-compact .viru-nav.viru-nav--open .viru-nav__list li:nth-child(7) { transition-delay: .29s; }
/* Link rows (top-level only — the ABOUT submenu links keep their own styling). */
.viru-header.is-compact .viru-nav__list > li > a {
  position: relative;
  padding: 15px 24px;
  color: #1a1c20;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.viru-header.is-compact .viru-nav__list > li > a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--red);
  transition: width .18s ease;
}
.viru-header.is-compact .viru-nav__list > li > a:hover {
  background: #fdeceb;
  color: var(--red);
  padding-left: 30px;
}
.viru-header.is-compact .viru-nav__list > li > a:hover::before { width: 4px; }

/* Small phones: also scale the logo/header down a touch (cosmetic, width-based). */
@media (max-width: 640px) {
  .viru-header__inner { width: 88%; padding-top: 7px; }
  .viru-header__logo { max-width: 150px; padding-top: 3px; }
  .viru-header__logo img { max-height: 138px; }
}

/* ============================================================================
   HOME PAGE (consolidated from the retired brand.css — 2026-06-09)
   The home page now loads THIS single global stylesheet, so its menu is the
   exact same .viru-header defined above — no second copy, no divergence.
   All home-only rules are scoped under body.viru-home so they cannot touch the
   calendar or the 59 Divi pages. NOTE: no body padding-top here — the hero
   tucks UP under the fixed menu exactly like the calendar's .viru-ne-hero,
   which is what makes the menu read as integrated rather than a floating bar.
   ============================================================================ */
:root {
  --red:        #dc231e;
  --red-dark:   #b51b17;
  --ink:        #1a1c20;
  --ink-soft:   #2a2d33;
  --paper:      #ffffff;
  --paper-2:    #f5f6f8;
  --muted:      #5c6066;
  --line:       #e6e8ec;
  --font-head: 'Oswald', 'Arial Narrow', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', Helvetica, Arial, sans-serif;
  --container: 1180px;
  --header-h:  160px;
  --radius:    12px;
  --shadow:    0 10px 30px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.16);
}

body.viru-home {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.viru-home *, .viru-home *::before, .viru-home *::after { box-sizing: border-box; }
.viru-home img { max-width: 100%; display: block; }
.viru-home a { color: var(--red); text-decoration: none; }
.viru-home h1, .viru-home h2, .viru-home h3, .viru-home h4 { font-family: var(--font-head); margin: 0; line-height: 1.1; }

.viru-home .container { width: min(92%, var(--container)); margin: 0 auto; }
.viru-home .section { padding: 80px 0; }
.viru-home .kicker {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--red); font-size: 14px; margin-bottom: 10px;
}
.viru-home .section-title { font-weight: 700; font-size: clamp(28px, 4vw, 44px); text-transform: uppercase; }

.viru-home .btn {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 15px;
  padding: 14px 30px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.viru-home .btn--red   { background: var(--red); color: #fff; }
.viru-home .btn--red:hover { background: var(--red-dark); }
.viru-home .btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.viru-home .btn--ghost:hover { background: #fff; color: var(--ink); }
.viru-home .btn--dark  { background: var(--ink); color: #fff; }
.viru-home .btn--dark:hover { background: #000; }

/* HERO — tucks UP under the fixed menu (photo shows behind the menu's
   transparent swoosh, exactly like the calendar's .viru-ne-hero). padding-top
   = header height keeps the hero TEXT clear of the menu while the photo fills
   behind it. */
.viru-home .hero {
  position: relative; min-height: clamp(600px, 82vh, 920px); display: flex; align-items: center; overflow: hidden;
  padding-top: var(--header-h);
  color: #fff; background: #222 center/cover no-repeat fixed;
  background-image: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25)), url('/images/home/hero.jpg');
}
.viru-home .hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1;
  background: linear-gradient(to top, rgba(220,35,30,.6), rgba(220,35,30,0)); pointer-events: none;
}
.viru-home .hero__inner { position: relative; z-index: 2; width: min(92%, var(--container)); margin: 0 auto; padding: 60px 0 90px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.viru-home .hero__copy { flex: 1 1 auto; }
.viru-home .hero__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px,3vw,30px); letter-spacing: .02em; margin: 0 0 4px; }
.viru-home .hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(72px,14vw,170px); line-height: .9; letter-spacing: -.02em; margin: 0; }
.viru-home .hero__title span { color: inherit; }
.viru-home .hero__sub { margin-top: 14px; font-size: clamp(16px,2vw,21px); font-weight: 500; max-width: 560px; }
.viru-home .hero__badge { flex: 0 0 auto; width: clamp(180px, 24vw, 300px); }
.viru-home .hero__badge img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); }
@media (max-width: 760px) {
  .viru-home .hero__inner { flex-direction: column; align-items: center; text-align: center; padding: 40px 0 80px; }
  .viru-home .hero__sub { margin-left: auto; margin-right: auto; }
  .viru-home .hero__badge { width: clamp(150px, 46vw, 220px); margin-top: 22px; }
}

/* WAVE DIVIDER — pinned to the bottom edge of the hero, sweeps up into the photo */
.viru-home .hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; line-height: 0; pointer-events: none; }
.viru-home .hero__wave svg { display: block; width: 100%; height: 100px; }
.viru-home .hero__wave path { fill: var(--paper); }
@media (max-width: 760px) { .viru-home .hero__wave svg { height: 60px; } }

/* INTRO BAND (clubs intro — light) */
.viru-home .intro-band { background: var(--paper); color: var(--ink); text-align: center; padding: 64px 0 36px; }
.viru-home .intro-band h2 { font-weight: 700; font-size: clamp(24px,3.4vw,40px); text-transform: uppercase; letter-spacing: .01em; }
.viru-home .intro-band p { margin: 8px 0 0; font-size: 18px; color: var(--muted); }

/* CLUBS GRID */
.viru-home .clubs { background: var(--paper); }
.viru-home .viru-clubs-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px 20px; width: 100%; margin-top: 8px;
}
.viru-home .viru-club-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 16px 10px 18px; border-radius: var(--radius); transition: transform .15s, box-shadow .15s;
}
.viru-home .viru-club-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.viru-home .viru-club-card:hover .viru-club-visit { color: var(--red); }
.viru-home .viru-club-logo {
  height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.viru-home .viru-club-logo img { max-height: 120px; width: auto; object-fit: contain; }
.viru-home .viru-club-name {
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .1em; line-height: 1.3;
  color: var(--ink); margin: 0;
}
/* Visit link(s) at the bottom of each club card — understated ghost text so the
   grid stays clean; brand red on hover. UVic Vikes carries two (Men / Women). */
.viru-home .viru-club-visit {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); text-decoration: none;
  transition: color .15s ease, gap .15s ease;
}
.viru-home .viru-club-visit::after { content: '\2192'; font-size: 13px; line-height: 1; }
.viru-home .viru-club-visit:hover { color: var(--red); gap: 9px; }
.viru-home .viru-club-visit-group { display: inline-flex; align-items: center; gap: 14px; margin-top: 12px; }
.viru-home .viru-club-visit-group .viru-club-visit { margin-top: 0; gap: 0; }
.viru-home .viru-club-visit-group .viru-club-visit::after { content: none; }
.viru-home .viru-club-visit-group .viru-club-visit + .viru-club-visit { position: relative; }
.viru-home .viru-club-visit-group .viru-club-visit + .viru-club-visit::before {
  content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: var(--line);
}
.viru-home .clubs__cta { text-align: center; margin-top: 46px; }

/* FEATURED EVENTS */
.viru-home .featured { background: var(--ink); color: #fff; }
.viru-home .featured .section-title { color: #fff; text-align: center; margin-bottom: 36px; }
.viru-home .event-card {
  display: grid; grid-template-columns: 320px 1fr; gap: 0; background: var(--ink-soft);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 880px; margin: 0 auto;
}
.viru-home .event-card__img { background: #000 center/cover no-repeat; min-height: 220px; }
.viru-home .event-card__body { padding: 30px 34px; }
.viru-home .event-card__date { color: var(--red); font-family: var(--font-head); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.viru-home .event-card__title { font-weight: 700; font-size: 30px; margin: 8px 0 12px; }
.viru-home .event-card__text { color: #cfd2d8; }

/* 150 YEARS / HISTORY */
.viru-home .history {
  position: relative; color: #fff; background: #111 center/cover no-repeat fixed;
  background-image: linear-gradient(rgba(10,10,10,.82), rgba(10,10,10,.82)), url('/images/home/history.jpg');
}
.viru-home .history__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: center; }
.viru-home .history__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(90px,16vw,200px); line-height: .85; color: #fff; }
.viru-home .history__num small { display: block; font-size: clamp(20px,3vw,34px); letter-spacing: .3em; color: var(--red); }
.viru-home .history__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.viru-home .history__cols h4 { color: var(--red); text-transform: uppercase; letter-spacing: .08em; font-size: 18px; margin-bottom: 10px; }
.viru-home .history__cols p { color: #d7d9dd; margin: 0; }

/* MISSION */
.viru-home .mission {
  position: relative; color: #fff; text-align: center;
  background: #111 center/cover no-repeat fixed;
  background-image: linear-gradient(rgba(15,15,15,.7), rgba(15,15,15,.7)), url('/images/home/mission.jpg');
}
.viru-home .mission h2 { font-weight: 700; font-size: clamp(26px,3.6vw,42px); max-width: 900px; margin: 0 auto 28px; line-height: 1.2; text-transform: uppercase; }

/* GET INVOLVED */
.viru-home .involved { background: var(--paper-2); }
.viru-home .involved__head { text-align: center; margin-bottom: 44px; }
.viru-home .involved__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.viru-home .iv-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.viru-home .iv-card__img { aspect-ratio: 4/3; background: #ccc center/cover no-repeat; }
.viru-home .iv-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.viru-home .iv-card__kicker { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.viru-home .iv-card__title { font-weight: 700; font-size: 22px; margin: 4px 0 10px; }
.viru-home .iv-card__text { color: var(--muted); font-size: 15px; margin: 0 0 18px; flex: 1; }

/* NEWS */
.viru-home .news { background: var(--paper); }
.viru-home .news__head { text-align: center; margin-bottom: 44px; }
.viru-home .news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.viru-home .news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.viru-home .news-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.viru-home .news-card__img { aspect-ratio: 16/9; background: #ddd center/cover no-repeat; }
.viru-home .news-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.viru-home .news-card__meta { color: var(--muted); font-size: 13px; }
.viru-home .news-card__title { font-weight: 700; font-size: 21px; margin: 8px 0 10px; color: var(--ink); }
.viru-home .news-card__excerpt { color: var(--muted); font-size: 15px; margin: 0 0 18px; flex: 1; }
.viru-home .news-card__link { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; }

/* NEWSLETTER */
.viru-home .newsletter { background: var(--ink); color: #fff; text-align: center; }
.viru-home .newsletter h2 { font-weight: 700; font-size: clamp(22px,3vw,34px); max-width: 880px; margin: 0 auto 28px; line-height: 1.3; }
.viru-home .newsletter__form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.viru-home .newsletter__form input {
  flex: 1 1 280px; min-width: 0; padding: 15px 20px; border-radius: 999px; border: 0;
  font-family: var(--font-body); font-size: 16px;
}

/* FOOTER */
.viru-home .site-footer { background: #0d0e10; color: #c9ccd2; padding: 64px 0 28px; }
.viru-home .footer__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.viru-home .footer__brand img { max-width: 150px; margin-bottom: 18px; }
.viru-home .footer__brand p { color: #8b8f97; font-size: 15px; max-width: 320px; }
.viru-home .footer__form h3 { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 22px; margin-bottom: 18px; }
.viru-home .footer__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.viru-home .footer__form input, .viru-home .footer__form textarea {
  width: 100%; padding: 13px 16px; border-radius: 8px; border: 1px solid #2a2d33;
  background: #16181b; color: #fff; font-family: var(--font-body); font-size: 15px;
}
.viru-home .footer__form textarea { min-height: 120px; resize: vertical; margin-bottom: 14px; }
.viru-home .footer__bottom { border-top: 1px solid #1d1f23; margin-top: 48px; padding-top: 22px; text-align: center; color: #6b6f77; font-size: 14px; }
.footer__bottom a { color: #c9ccd2; text-decoration: underline; }
.footer__bottom a:hover { color: #fff; }

/* HOME responsive */
@media (max-width: 1000px) {
  .viru-home .viru-clubs-grid { grid-template-columns: repeat(3, 1fr); }
  .viru-home .involved__grid { grid-template-columns: repeat(2, 1fr); }
  .viru-home .news__grid { grid-template-columns: 1fr 1fr; }
  .viru-home .history__grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .viru-home .history__num small { letter-spacing: .2em; }
  .viru-home .footer__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1000px), (hover: none) {
  .viru-home .hero, .viru-home .history, .viru-home .mission { background-attachment: scroll; }
}
@media (max-width: 680px) {
  .viru-home .section { padding: 56px 0; }
  .viru-home .viru-clubs-grid { grid-template-columns: repeat(2, 1fr); }
  .viru-home .involved__grid, .viru-home .news__grid { grid-template-columns: 1fr; }
  .viru-home .event-card { grid-template-columns: 1fr; }
  .viru-home .event-card__img { min-height: 200px; }
  .viru-home .history__cols { grid-template-columns: 1fr; }
  .viru-home .footer__form .row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   ABOUT PAGE (body.viru-about) — board grid + bio lightbox.
   Scoped under .viru-about so nothing leaks to home/news/calendar.
   ════════════════════════════════════════════════════════════ */
.viru-about, .viru-about *, .viru-about *::before, .viru-about *::after { box-sizing: border-box; }
.viru-about { font-family: var(--font-body); color: var(--ink); background: var(--paper); margin: 0; }
.viru-about img { max-width: 100%; display: block; }
.viru-about a { color: var(--red); text-decoration: none; }
.viru-about h1, .viru-about h2, .viru-about h3, .viru-about h4 { font-family: var(--font-head); margin: 0; line-height: 1.1; }
.viru-about .container { width: min(92%, var(--container)); margin: 0 auto; }
.viru-about .section { padding: 70px 0; }
.viru-about .section-title { font-weight: 700; font-size: clamp(28px,4vw,44px); text-transform: uppercase; }
.viru-about .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; padding: 13px 26px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s; }
.viru-about .btn--red { background: var(--red); color: #fff; }
.viru-about .btn--red:hover { background: var(--red-dark); }

/* page banner — top padding clears the fixed 160px header */
.viru-about .about-hero { background: linear-gradient(rgba(13,14,16,.78), rgba(13,14,16,.78)), url('/images/imported/ctt7.jpg') center/cover no-repeat; color: #fff; text-align: center; padding: calc(var(--header-h) + 40px) 0 56px; }
.viru-about .about-hero__eyebrow { font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; color: #fff; opacity: .82; }
.viru-about .about-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px,7vw,86px); text-transform: uppercase; margin-top: 6px; }

/* intro */
.viru-about .about-intro { text-align: center; padding-bottom: 18px; }
.viru-about .about-intro .section-title { color: var(--ink); }
.viru-about .about-intro__lead { max-width: 680px; margin: 16px auto 0; color: var(--muted); font-size: 18px; line-height: 1.6; }

/* board grid */
.viru-about .board { background: var(--paper-2); }
.viru-about .board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.viru-about .board-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; text-align: center; padding: 0 0 22px; font: inherit; color: inherit; cursor: pointer; transition: box-shadow .15s, transform .15s; width: 100%; }
.viru-about .board-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.viru-about .board-card--nobio { cursor: default; }
.viru-about .board-card--nobio:hover { box-shadow: none; transform: none; }
.viru-about .board-card__photo { display: block; aspect-ratio: 1/1; background: #e9ebef; overflow: hidden; }
.viru-about .board-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.viru-about .board-card__name { font-family: var(--font-head); font-weight: 700; font-size: 20px; margin: 18px 14px 2px; color: var(--ink); }
.viru-about .board-card__role { color: var(--muted); font-size: 13px; margin: 0 14px; text-transform: uppercase; letter-spacing: .05em; }
.viru-about .board-card__more { display: inline-block; margin-top: 12px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; color: var(--red); }
.viru-about .board-card--nobio .board-card__more { display: none; }

/* bio lightbox */
body.board-modal-open { overflow: hidden; }
.board-modal[hidden] { display: none; }
.board-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.board-modal__backdrop { position: absolute; inset: 0; background: rgba(10,11,13,.72); }
.board-modal__dialog { position: relative; background: #fff; border-radius: 14px; max-width: 680px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lg); padding: 30px 32px 34px; }
.board-modal__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 30px; line-height: 1; color: #9a9ea6; cursor: pointer; }
.board-modal__close:hover { color: var(--ink); }
.board-modal__head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; padding-right: 30px; }
.board-modal__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #e9ebef; }
.board-modal__name { font-family: var(--font-head); font-weight: 700; font-size: 26px; color: var(--ink); }
.board-modal__role { color: var(--red); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; margin: 4px 0 0; }
.board-modal__bio { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.board-modal__bio p { margin: 0 0 14px; }

/* footer (reuse home look) */
.viru-about .site-footer { background: #0d0e10; color: #c9ccd2; padding: 64px 0 28px; }
.viru-about .footer__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.viru-about .footer__brand img { max-width: 150px; margin-bottom: 18px; }
.viru-about .footer__brand p { color: #8b8f97; font-size: 15px; max-width: 320px; }
.viru-about .footer__form h3 { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 22px; margin-bottom: 18px; }
.viru-about .footer__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.viru-about .footer__form input, .viru-about .footer__form textarea { width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid #2a2d33; background: #16181c; color: #fff; font: inherit; }
.viru-about .footer__form textarea { min-height: 120px; resize: vertical; margin-bottom: 14px; }
.viru-about .footer__bottom { border-top: 1px solid #1d1f23; margin-top: 48px; padding-top: 22px; text-align: center; color: #6b6f77; font-size: 14px; }

@media (max-width: 900px) { .viru-about .board-grid { grid-template-columns: repeat(2, 1fr); } .viru-about .footer__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) { .viru-about .board-grid { grid-template-columns: 1fr; } .viru-about .about-hero { padding-top: calc(var(--header-h) - 20px); } .board-modal__head { flex-direction: column; text-align: center; padding-right: 0; } }

/* tweak 2026-06-09: rounder board photos + animated (non-instant) bio modal */
.viru-about .board-card__photo { margin: 16px 16px 0; border-radius: 16px; }
@keyframes vbModalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes vbFadeIn  { from { opacity: 0; } to { opacity: 1; } }
.board-modal:not([hidden]) .board-modal__dialog   { animation: vbModalIn .28s cubic-bezier(.2,.7,.3,1) both; }
.board-modal:not([hidden]) .board-modal__backdrop { animation: vbFadeIn .24s ease both; }
@media (prefers-reduced-motion: reduce) { .board-modal__dialog, .board-modal__backdrop { animation: none !important; } }

/* ════════════════════════════════════════════════════════════
   FIXTURES & RESULTS (body.viru-fixtures) — archived standings tables.
   Scoped under .viru-fixtures. Data from /api/standings (published sheet).
   ════════════════════════════════════════════════════════════ */
.viru-fixtures, .viru-fixtures *, .viru-fixtures *::before, .viru-fixtures *::after { box-sizing: border-box; }
.viru-fixtures { font-family: var(--font-body); color: var(--ink); background: var(--paper); margin: 0; }
.viru-fixtures img { max-width: 100%; display: block; }
.viru-fixtures a { color: var(--red); text-decoration: none; }
.viru-fixtures h1, .viru-fixtures h2, .viru-fixtures h3 { font-family: var(--font-head); margin: 0; line-height: 1.1; }
.viru-fixtures .container { width: min(92%, var(--container)); margin: 0 auto; }
.viru-fixtures .section { padding: 64px 0; }
.viru-fixtures .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer; transition: background .15s; }
.viru-fixtures .btn--red { background: var(--red); color: #fff; }
.viru-fixtures .btn--red:hover { background: var(--red-dark); }

/* banner — top padding clears the fixed 160px header */
.viru-fixtures .fixtures-hero { background: linear-gradient(rgba(13,14,16,.80), rgba(13,14,16,.80)), url('/images/imported/ctt7.jpg') center/cover no-repeat; color: #fff; text-align: center; padding: calc(var(--header-h) + 40px) 0 56px; }
.viru-fixtures .fixtures-hero__eyebrow { font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 14px; color: #fff; opacity: .82; }
.viru-fixtures .fixtures-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(38px,7vw,82px); text-transform: uppercase; margin-top: 6px; }

/* archive note */
.viru-fixtures .standings__note { background: #fff7e6; border: 1px solid #f0dca8; color: #7a5a12; border-radius: var(--radius); padding: 14px 18px; font-size: 15px; margin-bottom: 30px; }
.viru-fixtures .standings__loading { color: var(--muted); text-align: center; padding: 40px 0; }

/* standings cards + tables */
.viru-fixtures .standings-card { margin-bottom: 44px; }
.viru-fixtures .standings-card__title { font-weight: 700; font-size: clamp(22px,3vw,32px); text-transform: uppercase; color: var(--ink); margin-bottom: 16px; padding-left: 14px; border-left: 5px solid var(--red); }
.viru-fixtures .standings-card__scroll { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
.viru-fixtures .standings-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; min-width: 640px; }
.viru-fixtures .standings-table thead th { background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 12px; padding: 14px 12px; text-align: center; white-space: nowrap; }
.viru-fixtures .standings-table thead th:first-child { text-align: left; }
.viru-fixtures .standings-table tbody td { padding: 12px; text-align: center; border-bottom: 1px solid var(--line); color: var(--ink-soft); white-space: nowrap; }
.viru-fixtures .standings-table__team { text-align: left !important; font-weight: 700; color: var(--ink) !important; }
.viru-fixtures .standings-table tbody tr:nth-child(even) td { background: var(--paper-2); }
.viru-fixtures .standings-table tbody tr:hover td { background: #fdeceb; }
.viru-fixtures .standings-table tbody tr:last-child td { border-bottom: 0; }

/* footer (reuse home look) */
.viru-fixtures .site-footer { background: #0d0e10; color: #c9ccd2; padding: 64px 0 28px; }
.viru-fixtures .footer__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.viru-fixtures .footer__brand img { max-width: 150px; margin-bottom: 18px; }
.viru-fixtures .footer__brand p { color: #8b8f97; font-size: 15px; max-width: 320px; }
.viru-fixtures .footer__form h3 { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 22px; margin-bottom: 18px; }
.viru-fixtures .footer__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.viru-fixtures .footer__form input, .viru-fixtures .footer__form textarea { width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid #2a2d33; background: #16181c; color: #fff; font: inherit; }
.viru-fixtures .footer__form textarea { min-height: 120px; resize: vertical; margin-bottom: 14px; }
.viru-fixtures .footer__bottom { border-top: 1px solid #1d1f23; margin-top: 48px; padding-top: 22px; text-align: center; color: #6b6f77; font-size: 14px; }

@media (max-width: 760px) { .viru-fixtures .footer__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ════════════════════════════════════════════════════════════
   ADMIN CONSOLE (body.viru-admin) — SuperAdmin users + permissions matrix.
   ════════════════════════════════════════════════════════════ */
.viru-admin, .viru-admin *, .viru-admin *::before, .viru-admin *::after { box-sizing: border-box; }
.viru-admin { font-family: var(--font-body); color: var(--ink); background: var(--paper-2); margin: 0; }
.viru-admin a { color: var(--red); text-decoration: none; }
.viru-admin h1, .viru-admin h2 { font-family: var(--font-head); margin: 0; line-height: 1.1; }
.viru-admin .container { width: min(94%, var(--container)); margin: 0 auto; }
.viru-admin .section { padding: 48px 0 70px; }
.viru-admin .section-title { font-weight: 700; font-size: clamp(20px,2.6vw,28px); text-transform: uppercase; margin-bottom: 18px; }
.viru-admin .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; padding: 10px 18px; border-radius: 999px; border: 0; cursor: pointer; transition: background .15s, opacity .15s; }
.viru-admin .btn--red { background: var(--red); color: #fff; }
.viru-admin .btn--red:hover { background: var(--red-dark); }
.viru-admin .btn--dark { background: var(--ink); color: #fff; }
.viru-admin .btn[disabled] { opacity: .5; cursor: default; }

.viru-admin .admin-hero { background: var(--ink); color: #fff; padding: calc(var(--header-h) + 30px) 0 36px; }
.viru-admin .admin-hero__eyebrow { font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; opacity: .7; }
.viru-admin .admin-hero__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px,5vw,52px); text-transform: uppercase; margin-top: 4px; }

.viru-admin .admin-gate { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; text-align: center; box-shadow: var(--shadow); max-width: 560px; margin: 0 auto; }
.viru-admin .admin-gate h2 { font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.viru-admin .admin-gate p { color: var(--muted); margin: 0 0 18px; }

.viru-admin .admin-whoami { color: var(--muted); margin: 0 0 24px; }
.viru-admin .admin-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); margin-bottom: 26px; }
.viru-admin .admin-hint { color: var(--muted); font-size: 14px; margin: -6px 0 18px; }

.viru-admin .admin-pending__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.viru-admin .admin-pending__row:last-child { border-bottom: 0; }

.viru-admin .admin-table-wrap { overflow-x: auto; }
.viru-admin .admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.viru-admin .admin-table thead th { text-align: left; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; color: var(--muted); padding: 0 14px 12px; border-bottom: 2px solid var(--line); }
.viru-admin .admin-table tbody td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.viru-admin .admin-user__name { font-weight: 700; }
.viru-admin .admin-user__email { color: var(--muted); font-size: 13px; margin: 2px 0 6px; }
.viru-admin .admin-status { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.viru-admin .admin-status--active { background: #e6f6ec; color: #1c7a3e; }
.viru-admin .admin-status--pending { background: #fff7e6; color: #8a6300; }
.viru-admin .admin-status--rejected { background: #fdeceb; color: #b3261e; }

.viru-admin .admin-role { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.viru-admin .admin-allareas { color: var(--muted); }
.viru-admin .admin-areas { display: flex; flex-direction: column; gap: 8px; }
.viru-admin .admin-area { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.viru-admin .admin-area input[disabled] { cursor: default; }

.viru-admin .site-footer { background: #0d0e10; color: #6b6f77; padding: 28px 0; }
.viru-admin .footer__bottom { text-align: center; font-size: 14px; }

@media (max-width: 600px) { .viru-admin .admin-hero { padding-top: calc(var(--header-h) - 30px); } }

/* ════════════════════════════════════════════════════════════
   NEWS POSTS — single post (body.viru-post) + list (body.viru-posts).
   Server-rendered from templates/post.html + templates/posts-list.html.
   ════════════════════════════════════════════════════════════ */
.viru-post, .viru-post *, .viru-post *::before, .viru-post *::after,
.viru-posts, .viru-posts *, .viru-posts *::before, .viru-posts *::after { box-sizing: border-box; }
.viru-post, .viru-posts { font-family: var(--font-body); color: var(--ink); background: var(--paper); margin: 0; }
.viru-post img, .viru-posts img { max-width: 100%; }
.viru-post h1, .viru-post h2, .viru-post h3, .viru-posts h1, .viru-posts h2, .viru-posts h3 { font-family: var(--font-head); margin: 0; line-height: 1.15; }
.viru-post .container, .viru-posts .container { width: min(92%, var(--container)); margin: 0 auto; }
.viru-posts .section { padding: 64px 0; }

/* ── single post ── */
.viru-post .post-hero { padding: calc(var(--header-h) + 46px) 0 46px; background: var(--ink) center/cover no-repeat; color: #fff; }
.viru-post .post-cat { display: inline-block; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: #fff; background: var(--red); padding: 4px 12px; border-radius: 999px; }
.viru-post .post-title { font-weight: 700; font-size: clamp(30px,5vw,56px); text-transform: uppercase; margin: 16px 0 10px; max-width: 900px; }
.viru-post .post-meta { color: rgba(255,255,255,.82); font-size: 15px; font-weight: 500; }
.viru-post .post-body { max-width: 760px; margin: 48px auto 0; font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.viru-post .post-body > *:first-child { margin-top: 0; }
.viru-post .post-body p { margin: 0 0 20px; }
.viru-post .post-body h2 { font-size: 28px; margin: 36px 0 14px; color: var(--ink); }
.viru-post .post-body h3 { font-size: 22px; margin: 28px 0 12px; color: var(--ink); }
.viru-post .post-body a { color: var(--red); }
.viru-post .post-body ul, .viru-post .post-body ol { margin: 0 0 20px; padding-left: 22px; }
.viru-post .post-body li { margin-bottom: 8px; }
.viru-post .post-body img { border-radius: var(--radius); margin: 10px 0; }
.viru-post .post-body code { background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: .9em; }
.viru-post .post-back { max-width: 760px; margin: 40px auto 80px; }
.viru-post .post-back a { color: var(--red); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; }

/* ── list ── */
.viru-posts .posts-hero { background: var(--ink); color: #fff; text-align: center; padding: calc(var(--header-h) + 30px) 0 36px; }
.viru-posts .posts-hero__eyebrow { font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; opacity: .7; }
.viru-posts .posts-hero__title { font-weight: 700; font-size: clamp(32px,5vw,60px); text-transform: uppercase; margin-top: 4px; }
.viru-posts .posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.viru-posts .posts-empty { color: var(--muted); text-align: center; padding: 30px 0; }
.viru-posts .post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.viru-posts .post-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.viru-posts .post-card__img { display: block; aspect-ratio: 16/9; background: #ddd center/cover no-repeat; }
.viru-posts .post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.viru-posts .post-card__cat { align-self: flex-start; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--red); }
.viru-posts .post-card__date { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.viru-posts .post-card__title { font-weight: 700; font-size: 21px; margin: 6px 0 10px; }
.viru-posts .post-card__title a { color: var(--ink); text-decoration: none; }
.viru-posts .post-card__title a:hover { color: var(--red); }
.viru-posts .post-card__excerpt { color: var(--muted); font-size: 15px; margin: 0 0 18px; flex: 1; }
.viru-posts .post-card__link { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; color: var(--red); text-decoration: none; }

/* shared footer (minimal, dark) for both */
.viru-post .site-footer, .viru-posts .site-footer { background: #0d0e10; color: #6b6f77; padding: 30px 0; }
.viru-post .footer__bottom, .viru-posts .footer__bottom { text-align: center; font-size: 14px; }

@media (max-width: 900px) { .viru-posts .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .viru-posts .posts-grid { grid-template-columns: 1fr; } .viru-post .post-hero, .viru-posts .posts-hero { padding-top: calc(var(--header-h) - 20px); } }

/* ════════════════════════════════════════════════════════════
   ABOUT nav dropdown (.viru-nav-dd) — desktop popover + mobile accordion.
   Appended AFTER the nav rules so menu-link colors win the cascade.
   ════════════════════════════════════════════════════════════ */
.viru-header .viru-nav-dd { position: relative; display: flex; align-items: center; }
.viru-header .viru-nav-dd__toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .09em; text-transform: uppercase; line-height: 1;
  color: rgba(0, 0, 0, .6); white-space: nowrap; transition: color .15s;
}
.viru-header .viru-nav-dd:hover .viru-nav-dd__toggle,
.viru-header .viru-nav-dd__toggle[aria-expanded="true"],
.viru-header .viru-nav-dd.viru-active .viru-nav-dd__toggle { color: #E02B20; }
.viru-header .viru-nav-dd__caret {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px); transition: transform .2s ease;
}
.viru-header .viru-nav-dd:hover .viru-nav-dd__caret,
.viru-header .viru-nav-dd__toggle[aria-expanded="true"] .viru-nav-dd__caret { transform: rotate(225deg) translate(-1px, -1px); }

.viru-header .viru-nav-dd__menu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(2px);
  min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .16); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; z-index: 1200;
}
.viru-header .viru-nav-dd__menu::before {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 13px; height: 13px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
/* Invisible hover bridge spanning the gap between the ABOUT toggle and the menu
   so moving the cursor down onto the menu doesn't cross a dead zone and close it.
   Inert when closed (the menu is pointer-events:none until open). */
.viru-header .viru-nav-dd__menu::after {
  content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 18px;
}
.viru-header .viru-nav-dd:hover .viru-nav-dd__menu,
.viru-header .viru-nav-dd.is-open .viru-nav-dd__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(10px);
}
.viru-header .viru-nav-dd__menu a {
  display: block; padding: 11px 16px; border-radius: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; transition: background .12s, color .12s;
}
.viru-header .viru-nav-dd__menu a:hover { background: var(--paper-2); color: var(--red); }

/* Compact mode: ABOUT dropdown becomes an inline accordion in the hamburger panel */
.viru-header.is-compact .viru-nav-dd { display: block; width: 100%; }
.viru-header.is-compact .viru-nav-dd__toggle {
  width: 100%; justify-content: space-between; padding: 14px 22px;
  color: #222222; font-size: 15px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.viru-header.is-compact .viru-nav-dd__caret { transform: rotate(45deg) translate(-2px, -2px); }
.viru-header.is-compact .viru-nav-dd.is-open .viru-nav-dd__caret { transform: rotate(225deg); }
.viru-header.is-compact .viru-nav-dd__menu {
  position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  box-shadow: none; border: 0; border-radius: 0; padding: 0; min-width: 0; background: #fafafa;
  max-height: 0; overflow: hidden; transition: max-height .22s ease;
}
.viru-header.is-compact .viru-nav-dd:hover .viru-nav-dd__menu { transform: none; }
.viru-header.is-compact .viru-nav-dd__menu::before { display: none; }
.viru-header.is-compact .viru-nav-dd.is-open .viru-nav-dd__menu { max-height: 160px; }
.viru-header.is-compact .viru-nav-dd__menu a { padding: 13px 36px; }

/* ════════════════════════════════════════════════════════════
   VIRU HISTORY page (body.viru-history)
   ════════════════════════════════════════════════════════════ */
/* Editorial design integrated from the uploaded viru-history.html mock (2026-06-12).
   Palette + type are LOCAL to this page via --h-* tokens so they never override the
   site-wide --red/--ink/--paper that the shared header & footer depend on. Every
   selector is scoped under .viru-history; no bare `.viru-history a {}` rule (it would
   tie with .footer__bottom a and recolour the footer link — see PAGES gotcha). */
.viru-history, .viru-history *, .viru-history *::before, .viru-history *::after { box-sizing: border-box; }
.viru-history {
  --h-white:#FFFFFF; --h-off-white:#FAFAF8; --h-cream:#F5F2EC; --h-paper:#F7F5F0;
  --h-light-grey:#F2F2F0; --h-hairline:#DCDCD8; --h-hairline-soft:#E6E4DE;
  --h-text-faint:#8A8884; --h-text-muted:#5F5D58; --h-text-mid:#3A3835;
  --h-ink:#1E1C18; --h-ink-soft:#2A2824;
  --h-red:#E63329; --h-red-deep:#B81E1E;
  --h-display:'Oswald','Arial Narrow',sans-serif;
  --h-body:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --h-max-w:1260px;
  margin: 0; background: var(--h-white); color: var(--h-ink);
  font-family: var(--h-body); font-size: 16px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums;
}
html:has(body.viru-history) { scroll-behavior: smooth; }
.viru-history ::selection { background: var(--h-red); color: var(--h-white); }
.viru-history :focus-visible { outline: 3px solid var(--h-red); outline-offset: 3px; }
.viru-history h1, .viru-history h2, .viru-history h3 { margin: 0; line-height: 1.1; }

/* Shared chapter heading pattern */
.viru-history .hist-eyebrow { font-family: var(--h-body); font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--h-red); margin: 0 0 22px; }
.viru-history .hist-h2 { font-family: var(--h-display); font-weight: 500; font-size: clamp(40px,5.4vw,76px); line-height: 1; letter-spacing: 0.005em; text-transform: uppercase; margin: 0; color: var(--h-ink); }

/* HERO — real photo under a dark overlay; padding-top clears the fixed menu */
.viru-history .hist-hero {
  position: relative; min-height: 540px; overflow: hidden;
  padding: calc(var(--header-h) + 24px) 40px 48px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  color: var(--h-white);
  background: linear-gradient(180deg, rgba(13,14,16,0.60) 0%, rgba(13,14,16,0.78) 100%), url('/images/imported/ctt7.jpg') center/cover no-repeat;
}
.viru-history .hist-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 30% 50% at 20% 30%, rgba(230,51,41,0.18), transparent 70%),
    radial-gradient(ellipse 25% 40% at 80% 70%, rgba(230,51,41,0.12), transparent 70%);
}
.viru-history .hist-hero__inner { position: relative; z-index: 2; width: min(92%, var(--h-max-w)); }
.viru-history .hist-hero__eyebrow { font-family: var(--h-body); font-size: 13px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 24px; }
.viru-history .hist-hero__title { font-family: var(--h-display); font-weight: 500; font-size: clamp(64px,10vw,140px); line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; margin: 0; color: var(--h-white); }
.viru-history .hist-accent-rule { width: 64px; height: 3px; background: var(--h-red); margin: 32px auto 0; }

/* INTRO essay + stat row */
.viru-history .hist-intro { background: var(--h-white); padding: 110px 40px 100px; text-align: center; }
.viru-history .hist-intro__inner { max-width: 720px; margin: 0 auto; }
.viru-history .hist-intro p { font-size: clamp(19px,1.7vw,22px); line-height: 1.7; color: var(--h-text-mid); margin: 0 0 24px; font-weight: 400; }
.viru-history .hist-intro p:last-child { margin-bottom: 0; }
.viru-history .hist-intro p strong { color: var(--h-ink); font-weight: 500; }
.viru-history .hist-stat-row { margin-top: 80px; display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; text-align: center; border-top: 1px solid var(--h-hairline-soft); padding-top: 60px; }
.viru-history .hist-stat-row .num { font-family: var(--h-display); font-weight: 400; font-size: clamp(60px,6vw,88px); line-height: 1; color: var(--h-ink); display: block; letter-spacing: -0.005em; }
.viru-history .hist-stat-row .num em { color: var(--h-red); font-style: normal; font-weight: 500; }
.viru-history .hist-stat-row .lbl { font-family: var(--h-body); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--h-text-faint); margin-top: 14px; display: block; }

/* CHAPTER ONE */
.viru-history .hist-chapter-one { background: var(--h-off-white); color: var(--h-ink); padding: 120px 40px; border-top: 1px solid var(--h-hairline-soft); }
.viru-history .hist-chapter-one__inner { max-width: var(--h-max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 88px; align-items: start; }
.viru-history .hist-chapter-one .hist-h2 { margin-bottom: 32px; max-width: 12ch; }
.viru-history .hist-chapter-one .lede { font-size: 21px; line-height: 1.6; color: var(--h-text-mid); font-weight: 400; margin: 0 0 24px; max-width: 38em; }
.viru-history .hist-chapter-one .lede strong { color: var(--h-ink); font-weight: 500; }
.viru-history .hist-chapter-one .lede em.year { color: var(--h-red); font-style: normal; font-weight: 500; }
.viru-history .hist-chapter-one p { color: var(--h-text-muted); font-size: 16px; line-height: 1.75; margin: 0 0 18px; max-width: 38em; }
.viru-history .hist-year-tag { font-family: var(--h-display); font-size: clamp(100px,14vw,196px); font-weight: 400; line-height: 0.9; color: var(--h-ink); letter-spacing: -0.01em; margin: 0 0 6px; display: block; }
.viru-history .hist-year-tag em { color: var(--h-red); font-style: normal; font-weight: 500; }
.viru-history .hist-year-tag-sub { font-family: var(--h-body); font-weight: 600; font-size: 11px; color: var(--h-red); letter-spacing: 0.3em; text-transform: uppercase; display: block; margin-bottom: 40px; }
.viru-history .hist-pull-quote { margin: 48px 0 0; padding: 0 0 0 22px; border-left: 3px solid var(--h-red); }
.viru-history .hist-pull-quote .q { font-family: var(--h-body); font-weight: 400; font-style: italic; font-size: clamp(19px,1.8vw,23px); line-height: 1.5; color: var(--h-ink); margin: 0; max-width: 32ch; letter-spacing: -0.005em; }
.viru-history .hist-pull-quote cite { display: block; margin-top: 16px; font-family: var(--h-body); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--h-text-faint); }
.viru-history .hist-archival { margin: 48px 0 0; background: var(--h-white); border: 1px solid var(--h-hairline); aspect-ratio: 16/9; display: grid; place-items: center; position: relative; overflow: hidden; }
.viru-history .hist-archival::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0, transparent 18px, rgba(0,0,0,0.012) 18px, rgba(0,0,0,0.012) 19px); }
.viru-history .hist-archival__inner { position: relative; text-align: center; padding: 24px; }
.viru-history .hist-archival__inner svg { margin: 0 auto 18px; display: block; opacity: 0.4; }
.viru-history .hist-archival__inner .label { font-family: var(--h-body); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--h-text-muted); margin-bottom: 10px; display: block; }
.viru-history .hist-archival__inner .cap { font-family: var(--h-body); font-size: 14px; color: var(--h-text-faint); font-style: italic; }

/* TIMELINE */
.viru-history .hist-timeline { background: var(--h-white); padding: 120px 0; overflow: hidden; }
.viru-history .hist-timeline__head { max-width: var(--h-max-w); margin: 0 auto 64px; padding: 0 40px; text-align: center; }
.viru-history .hist-timeline__head .sub { margin: 22px auto 0; font-size: 16px; color: var(--h-text-muted); max-width: 56ch; line-height: 1.65; }
.viru-history .hist-timeline__track { position: relative; overflow-x: auto; padding: 56px 0 32px; scrollbar-width: thin; scrollbar-color: var(--h-red) var(--h-light-grey); }
.viru-history .hist-timeline__track::-webkit-scrollbar { height: 6px; }
.viru-history .hist-timeline__track::-webkit-scrollbar-thumb { background: var(--h-red); border-radius: 3px; }
.viru-history .hist-timeline__track::-webkit-scrollbar-track { background: var(--h-light-grey); }
.viru-history .hist-timeline__rule { position: absolute; top: 56px; left: 0; right: 0; height: 1px; background: var(--h-hairline); }
.viru-history .hist-timeline__items { display: flex; gap: 56px; min-width: max-content; padding: 0 40px; }
.viru-history .tl-item { flex: 0 0 220px; position: relative; padding-top: 32px; }
.viru-history .tl-item::before { content: ''; position: absolute; top: -6px; left: 0; width: 1px; height: 14px; background: var(--h-ink); }
.viru-history .tl-item.major::before { width: 3px; background: var(--h-red); top: -8px; height: 18px; }
.viru-history .tl-year { font-family: var(--h-display); font-weight: 500; font-size: 28px; color: var(--h-ink); line-height: 1; display: block; margin-bottom: 14px; }
.viru-history .tl-item.major .tl-year { color: var(--h-red); }
.viru-history .tl-title { font-family: var(--h-display); font-weight: 500; font-size: 17px; line-height: 1.25; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--h-ink); }
.viru-history .tl-desc { font-family: var(--h-body); font-size: 13px; color: var(--h-text-muted); line-height: 1.55; margin: 0; }
.viru-history .tl-placeholder { border: 1px dashed var(--h-hairline); padding: 18px 16px; color: var(--h-text-faint); font-family: var(--h-display); font-weight: 400; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.5; text-align: center; }
.viru-history .tl-placeholder em { display: block; font-family: var(--h-body); font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: 0.2em; color: var(--h-red); margin-top: 6px; }
.viru-history .tl-item:has(.tl-placeholder)::before { display: none; }

/* TROPHY ROOM */
.viru-history .hist-trophy-room { background: var(--h-cream); color: var(--h-ink); padding: 120px 0 100px; border-top: 1px solid var(--h-hairline-soft); }
.viru-history .hist-trophy-room__head { max-width: var(--h-max-w); margin: 0 auto 88px; padding: 0 40px; text-align: center; }
.viru-history .hist-trophy-room__head .sub { margin: 22px auto 0; font-size: 17px; color: var(--h-text-muted); max-width: 56ch; line-height: 1.65; }
.viru-history .hist-trophy { max-width: var(--h-max-w); margin: 0 auto 88px; padding: 0 40px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: start; }
.viru-history .hist-trophy:last-of-type { margin-bottom: 0; }
.viru-history .hist-trophy .since-line { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.viru-history .hist-trophy .since-line::before { content: ''; width: 28px; height: 2px; background: var(--h-red); }
.viru-history .hist-trophy .since-line .since { font-family: var(--h-body); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--h-red); }
.viru-history .hist-trophy h3 { font-family: var(--h-display); font-weight: 500; font-size: clamp(36px,4.2vw,52px); line-height: 1; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.005em; color: var(--h-ink); }
.viru-history .hist-trophy .sub-meta { font-family: var(--h-body); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--h-text-muted); margin: 0 0 32px; }
.viru-history .hist-trophy .body p { color: var(--h-text-mid); font-size: 16px; line-height: 1.75; margin: 0 0 18px; max-width: 38em; }
.viru-history .hist-trophy .body p em { color: var(--h-red); font-style: normal; font-weight: 500; }
.viru-history .hist-trophy-stats { background: var(--h-white); border: 1px solid var(--h-hairline-soft); padding: 36px 32px; position: relative; }
.viru-history .hist-trophy-stats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--h-red); }
.viru-history .hist-trophy-stats .stat { border-top: 1px solid var(--h-hairline-soft); padding: 18px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.viru-history .hist-trophy-stats .stat:first-of-type { border-top: 0; padding-top: 0; }
.viru-history .hist-trophy-stats .stat:last-of-type { padding-bottom: 0; }
.viru-history .stat-label { font-family: var(--h-body); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--h-text-faint); }
.viru-history .stat-val { font-family: var(--h-display); font-weight: 500; font-size: 22px; color: var(--h-ink); text-align: right; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.005em; }
.viru-history .stat-val small { display: block; font-family: var(--h-body); font-size: 10px; font-weight: 500; letter-spacing: 0.16em; color: var(--h-text-faint); text-transform: uppercase; margin-top: 6px; }

/* ROLL OF HONOUR */
.viru-history .hist-roll { background: var(--h-white); padding: 120px 0; color: var(--h-ink); }
.viru-history .hist-roll__head { max-width: var(--h-max-w); margin: 0 auto 64px; padding: 0 40px; text-align: center; }
.viru-history .hist-roll__head .sub { margin: 22px auto 0; font-size: 16px; color: var(--h-text-muted); max-width: 60ch; line-height: 1.65; }
.viru-history .hist-leaderboard { max-width: var(--h-max-w); margin: 0 auto 56px; padding: 36px 40px; display: grid; grid-template-columns: repeat(6,1fr); gap: 24px; border-top: 1px solid var(--h-ink); border-bottom: 1px solid var(--h-hairline-soft); }
.viru-history .lb-card { text-align: center; }
.viru-history .lb-card .titles { font-family: var(--h-display); font-weight: 400; font-size: 52px; color: var(--h-red); line-height: 1; display: block; letter-spacing: -0.01em; }
.viru-history .lb-card .club { font-family: var(--h-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-ink); margin-top: 12px; display: block; line-height: 1.4; }
.viru-history .hist-ledger { max-width: var(--h-max-w); margin: 0 auto; padding: 0 40px; }
.viru-history .hist-ledger__inner { columns: 3; column-gap: 64px; column-rule: 1px solid var(--h-hairline-soft); }
.viru-history .ledger-row { display: grid; grid-template-columns: 84px 1fr; padding: 11px 0; border-bottom: 1px solid var(--h-hairline-soft); break-inside: avoid; font-family: var(--h-body); align-items: baseline; }
.viru-history .ledger-row .yr { color: var(--h-text-faint); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; }
.viru-history .ledger-row .who { color: var(--h-ink); font-family: var(--h-display); font-weight: 400; font-size: 15px; letter-spacing: 0.01em; }
.viru-history .ledger-row.gap .who { color: var(--h-text-faint); font-style: italic; font-family: var(--h-body); font-weight: 400; font-size: 13px; }
.viru-history .ledger-row.gap .yr { color: var(--h-text-faint); }
.viru-history .ledger-row.current { background: var(--h-red); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-bottom-color: var(--h-red); }
.viru-history .ledger-row.current .yr { color: rgba(255,255,255,0.85); }
.viru-history .ledger-row.current .who { color: var(--h-white); font-weight: 500; }
.viru-history .hist-ledger__note { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--h-hairline-soft); font-family: var(--h-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--h-text-faint); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.viru-history .hist-ledger__note b { color: var(--h-ink); font-weight: 600; }

/* NAMES */
.viru-history .hist-names { background: var(--h-paper); color: var(--h-ink); padding: 120px 0; border-top: 1px solid var(--h-hairline-soft); }
.viru-history .hist-names__head { max-width: var(--h-max-w); margin: 0 auto 80px; padding: 0 40px; text-align: center; }
.viru-history .hist-names__head p { margin: 22px auto 0; font-size: 16px; color: var(--h-text-muted); max-width: 60ch; line-height: 1.7; }
.viru-history .hist-names__grid { max-width: var(--h-max-w); margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(2,1fr); gap: 56px 48px; }
.viru-history .name-card { border-top: 2px solid var(--h-red); padding-top: 24px; }
.viru-history .name-card .trophy-name { font-family: var(--h-body); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--h-red); margin: 0 0 14px; }
.viru-history .name-card h3 { font-family: var(--h-display); font-weight: 500; font-size: 28px; line-height: 1.1; margin: 0 0 20px; text-transform: uppercase; letter-spacing: 0.005em; color: var(--h-ink); }
.viru-history .name-card p { font-size: 15px; line-height: 1.7; margin: 0 0 14px; max-width: 36em; color: var(--h-text-muted); }
.viru-history .name-card .quote { margin-top: 20px; padding: 18px 0 0; border-top: 1px solid var(--h-hairline-soft); font-family: var(--h-body); font-weight: 400; font-style: italic; font-size: 17px; color: var(--h-ink); line-height: 1.5; letter-spacing: -0.005em; }
.viru-history .name-card .quote-attr { display: block; font-family: var(--h-body); font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--h-red); margin-top: 12px; }

/* VOICES */
.viru-history .hist-voices { background: var(--h-white); padding: 120px 40px; }
.viru-history .hist-voices__inner { max-width: var(--h-max-w); margin: 0 auto; }
.viru-history .hist-voices__head { text-align: center; margin-bottom: 80px; }
.viru-history .hist-voices__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; }
.viru-history .voice-card { background: var(--h-off-white); padding: 48px 44px; border-top: 2px solid var(--h-red); position: relative; }
.viru-history .voice-card .quote-mark { font-family: var(--h-display); font-size: 110px; color: var(--h-red); line-height: 1; position: absolute; top: 8px; right: 28px; opacity: 0.14; font-weight: 400; }
.viru-history .voice-card .q { font-family: var(--h-body); font-weight: 400; font-style: italic; font-size: 20px; line-height: 1.55; color: var(--h-ink); margin: 0 0 24px; letter-spacing: -0.005em; position: relative; }
.viru-history .voice-card .attr { font-family: var(--h-body); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--h-text-faint); display: flex; gap: 12px; align-items: center; margin: 0; }
.viru-history .voice-card .attr::before { content: ''; width: 20px; height: 1px; background: var(--h-red); }
.viru-history .voice-prompt { border: 1px dashed var(--h-hairline); background: var(--h-white); padding: 48px 44px; border-top: 2px solid var(--h-red); }
.viru-history .voice-prompt .pr-label { font-family: var(--h-body); font-size: 10px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--h-red); margin: 0 0 16px; display: block; }
.viru-history .voice-prompt .pr-text { font-family: var(--h-display); font-weight: 500; font-size: 22px; color: var(--h-ink); line-height: 1.3; text-transform: uppercase; margin: 0 0 16px; letter-spacing: 0.005em; }
.viru-history .voice-prompt .pr-body { font-family: var(--h-body); font-weight: 400; font-size: 14px; color: var(--h-text-muted); margin: 0; line-height: 1.65; }

/* CLUBS */
.viru-history .hist-clubs { background: var(--h-off-white); padding: 120px 40px; border-top: 1px solid var(--h-hairline-soft); }
.viru-history .hist-clubs__inner { max-width: var(--h-max-w); margin: 0 auto; }
.viru-history .hist-clubs__head { text-align: center; margin-bottom: 80px; }
.viru-history .club-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--h-ink); }
.viru-history .club-list li { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--h-hairline-soft); gap: 32px; transition: padding 0.2s, background 0.2s; }
.viru-history .club-list li:hover { padding-left: 12px; background: var(--h-white); }
.viru-history .club-list .est { font-family: var(--h-display); font-weight: 500; font-size: 22px; color: var(--h-red); letter-spacing: 0.02em; }
.viru-history .club-list .name { font-family: var(--h-display); font-weight: 500; font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--h-ink); }
.viru-history .club-list .meta { font-family: var(--h-body); font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--h-text-faint); text-align: right; }
.viru-history .club-list .pending .name { color: var(--h-text-faint); font-weight: 400; }
.viru-history .club-list .pending .est { color: var(--h-hairline); }
.viru-history .club-list .pending .meta { color: var(--h-red); }

/* NEXT CHAPTER + pill buttons */
.viru-history .hist-next { background: var(--h-white); color: var(--h-ink); padding: 140px 40px 130px; text-align: center; position: relative; border-top: 1px solid var(--h-hairline-soft); }
.viru-history .hist-next .small-cap { font-family: var(--h-body); font-size: 11px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--h-red); margin: 0 0 32px; }
.viru-history .hist-next h2 { font-family: var(--h-display); font-weight: 400; font-size: clamp(48px,7vw,92px); line-height: 1; margin: 0 auto 32px; text-transform: uppercase; letter-spacing: 0.005em; color: var(--h-ink); max-width: 22ch; }
.viru-history .hist-next h2 em { color: var(--h-red); font-style: normal; font-weight: 500; }
.viru-history .hist-next p { max-width: 560px; margin: 0 auto 48px; font-size: 17px; line-height: 1.7; color: var(--h-text-muted); }
.viru-history .hist-next .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.viru-history .hist-btn { font-family: var(--h-body); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 16px 36px; border-radius: 999px; border: 1.5px solid var(--h-ink); color: var(--h-ink); text-decoration: none; background: transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.viru-history .hist-btn:hover { background: var(--h-ink); color: var(--h-white); }
.viru-history .hist-btn.primary { background: var(--h-red); border-color: var(--h-red); color: var(--h-white); }
.viru-history .hist-btn.primary:hover { background: var(--h-red-deep); border-color: var(--h-red-deep); color: var(--h-white); }

/* Shared site footer (same block used on the other pages) */
.viru-history .container { width: min(92%, var(--container)); margin: 0 auto; }
.viru-history .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer; transition: background .15s; }
.viru-history .btn--red { background: var(--red); color: #fff; }
.viru-history .btn--red:hover { background: var(--red-dark); }
.viru-history .site-footer { background: #0d0e10; color: #c9ccd2; padding: 64px 0 28px; }
.viru-history .footer__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.viru-history .footer__brand img { max-width: 150px; margin-bottom: 18px; }
.viru-history .footer__brand p { color: #8b8f97; font-size: 15px; max-width: 320px; }
.viru-history .footer__form h3 { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 22px; margin-bottom: 18px; }
.viru-history .footer__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.viru-history .footer__form input, .viru-history .footer__form textarea { width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid #2a2d33; background: #16181c; color: #fff; font: inherit; }
.viru-history .footer__form textarea { min-height: 120px; resize: vertical; margin-bottom: 14px; }
.viru-history .footer__bottom { border-top: 1px solid #1d1f23; margin-top: 48px; padding-top: 22px; text-align: center; color: #6b6f77; font-size: 14px; }

/* Responsive */
@media (max-width: 980px) {
  .viru-history .hist-chapter-one__inner { grid-template-columns: 1fr; gap: 48px; }
  .viru-history .hist-trophy { grid-template-columns: 1fr; gap: 40px; }
  .viru-history .hist-names__grid { grid-template-columns: 1fr; gap: 40px; }
  .viru-history .hist-voices__grid { grid-template-columns: 1fr; gap: 24px; }
  .viru-history .hist-leaderboard { grid-template-columns: repeat(3,1fr); gap: 28px 16px; }
  .viru-history .hist-ledger__inner { columns: 2; column-gap: 40px; }
}
@media (max-width: 760px) {
  .viru-history .hist-hero { min-height: 420px; padding-left: 24px; padding-right: 24px; }
  .viru-history .hist-intro, .viru-history .hist-chapter-one, .viru-history .hist-timeline, .viru-history .hist-trophy-room, .viru-history .hist-roll, .viru-history .hist-names, .viru-history .hist-voices, .viru-history .hist-clubs, .viru-history .hist-next { padding-left: 24px; padding-right: 24px; }
  .viru-history .hist-chapter-one, .viru-history .hist-timeline, .viru-history .hist-trophy-room, .viru-history .hist-roll, .viru-history .hist-names, .viru-history .hist-voices, .viru-history .hist-clubs { padding-top: 80px; padding-bottom: 80px; }
  .viru-history .hist-next { padding-top: 96px; padding-bottom: 96px; }
  .viru-history .hist-intro { padding-top: 64px; padding-bottom: 64px; }
  .viru-history .hist-stat-row { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; margin-top: 48px; }
  .viru-history .voice-card, .viru-history .voice-prompt { padding: 32px 28px; }
  .viru-history .hist-leaderboard { grid-template-columns: repeat(2,1fr); padding: 28px 16px; gap: 28px 12px; }
  .viru-history .hist-ledger__inner { columns: 1; }
  .viru-history .hist-ledger, .viru-history .hist-timeline__head, .viru-history .hist-trophy-room__head, .viru-history .hist-roll__head, .viru-history .hist-names__head, .viru-history .hist-voices__head, .viru-history .hist-clubs__head, .viru-history .hist-trophy { padding-left: 0; padding-right: 0; }
  .viru-history .hist-timeline__track { padding-left: 0; padding-right: 0; }
  .viru-history .hist-timeline__items { padding-left: 24px; padding-right: 24px; }
  .viru-history .club-list li { grid-template-columns: 80px 1fr; gap: 16px; }
  .viru-history .club-list .meta { grid-column: 1 / -1; text-align: left; padding-top: 4px; }
  .viru-history .footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .viru-history .footer__form .row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .viru-history *, .viru-history *::before, .viru-history *::after { animation: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   News & Events page footer (body.viru-news) — full site footer.
   (News page is component-scoped .viru-ne-*; this adds the shared footer.)
   ════════════════════════════════════════════════════════════ */
.viru-news .container { width: min(92%, var(--container)); margin: 0 auto; }
.viru-news .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer; transition: background .15s; }
.viru-news .btn--red { background: var(--red); color: #fff; }
.viru-news .btn--red:hover { background: var(--red-dark); }
.viru-news .site-footer { background: #0d0e10; color: #c9ccd2; padding: 64px 0 28px; }
.viru-news .footer__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.viru-news .footer__brand img { max-width: 150px; margin-bottom: 18px; }
.viru-news .footer__brand p { color: #8b8f97; font-size: 15px; max-width: 320px; }
.viru-news .footer__form h3 { font-weight: 700; text-transform: uppercase; color: #fff; font-size: 22px; margin-bottom: 18px; }
.viru-news .footer__form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.viru-news .footer__form input, .viru-news .footer__form textarea { width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid #2a2d33; background: #16181c; color: #fff; font: inherit; }
.viru-news .footer__form textarea { min-height: 120px; resize: vertical; margin-bottom: 14px; }
.viru-news .footer__bottom { border-top: 1px solid #1d1f23; margin-top: 48px; padding-top: 22px; text-align: center; color: #6b6f77; font-size: 14px; }
@media (max-width: 760px) { .viru-news .footer__grid { grid-template-columns: 1fr; gap: 40px; } .viru-news .footer__form .row { grid-template-columns: 1fr; } }

/* ── GLOBAL FOOTER TYPOGRAPHY LOCK ─────────────────────────────────────────────
   The footer markup is shared byte-for-byte across every page, but the footer CSS
   is (historically) duplicated under each body scope (.viru-home/.viru-history/…)
   and NONE of those rules pin a font-family. So the footer heading (.footer__form h3)
   silently inherited each page's heading font — Oswald where a scope maps h3→Oswald
   (home/about/fixtures/posts), but Inter on history/news/admin (no such mapping).
   These two un-scoped rules make footer type identical on EVERY page. They sit last
   in the file and out-specify the body-scope heading rules, so they always win.
   Do NOT re-introduce per-page footer font rules. */
.site-footer { font-family: var(--font-body); }
.site-footer .footer__form h3 { font-family: var(--font-head); }