:root {
  --bg: #0d1017;
  --bg2: #12151d;
  --panel: #161a24;
  --panel2: #1a1f2b;
  
  /* High contrast typography tokens */
  --ink: #f1f5f9;          /* Crisp main text */
  --ink-dim: #94a3b8;      /* Clear secondary text */
  --ink-faint: #64748b;    /* Readable metadata/captions */
  
  --blue: #38bdf8;         /* Cyan / Blue accent */
  --blue-d: #0284c7;       /* Darker Blue */
  --red: #C8102E;          /* Lamborghini Rosso Mars Red */
  --red-d: #8B0A1E;        /* Darker Rosso Mars */
  --red-bright: #E52B42;   /* Bright Rosso Mars Highlight */
  --teal: #2dd4bf;         /* Teal / Cyan status */
  --amber: #E85D75;        /* Soft Rosso Mars Coral */
  --line: rgba(200, 16, 46, .18); /* Rosso Mars-tinted section lines */
  --carbon: #0a0c11;
}

@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 4px),
    radial-gradient(1100px 650px at 10% -10%, rgba(200, 16, 46, .12), transparent 60%),
    radial-gradient(900px 550px at 95% 0%, rgba(200, 16, 46, .10), transparent 60%),
    radial-gradient(800px 600px at 50% 108%, rgba(56, 189, 248, .08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 16px/1.65 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding-bottom: 80px;
  -webkit-font-smoothing: antialiased;
}

/* Custom Header Badge Fit */
.topbar .brand {
  display: flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
}

.header-logo {
  height: 80px; /* Adjust between 36px - 44px to fit topbar height */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
  margin-left: 100px;
}

.header-logo:hover {
  transform: scale(1.02);
}

@media (max-width: 640px) {
  .header-logo {
    height: 32px; /* Scales down cleanly on mobile screens */
  }
}

.wrap {
  /*max-width: 1180px;*/
  max-width: auto;
  margin: 0 auto;
  padding: 0 100px;
}

/* ---------- Rotating Conic-Gradient Border-Beam Glow (Red/Blue Sweep) ---------- */
.glow {
  position: relative;
  border-radius: 14px;
  isolation: isolate;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 4px);
  border: 1px solid var(--line);
}

.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang),
    transparent 0deg, transparent 268deg,
    rgba(56, 189, 248, .9) 297deg, rgba(200, 16, 46, .95) 316deg, rgba(229, 43, 66, .90) 336deg, transparent 355deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 6.5s linear infinite;
  z-index: 2;
  pointer-events: none;
  opacity: .85;
}

@keyframes spin {
  to {
    --ang: 360deg;
  }
}

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .glow::before {
    display: none;
  }
}

.glow.slow::before {
  animation-duration: 11s;
}

.glow.rev::before {
  animation-direction: reverse;
  animation-duration: 8.5s;
}

/* ---------- Hero & Orbit Animations ---------- */
header.hero {
  padding: 64px 0 30px;
  text-align: center;
  position: relative;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 5px),
                    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 5px);
  border-bottom: 1px solid var(--line);
}

.orbit {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: .7;
}

.orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  transform-origin: 0 0;
}

.orbit i:nth-child(1) { background: var(--blue); box-shadow: 0 0 8px 1.5px rgba(56, 189, 248, .5); animation: orb1 13s linear infinite; }
.orbit i:nth-child(2) { background: var(--red); box-shadow: 0 0 8px 1.5px rgba(200, 16, 46, .6); animation: orb2 17s linear infinite; }
.orbit i:nth-child(3) { background: var(--red-bright); box-shadow: 0 0 8px 1.5px rgba(229, 43, 66, .55); animation: orb3 21s linear infinite; }

@keyframes orb1 { from { transform: rotate(0) translateX(300px); } to { transform: rotate(360deg) translateX(300px); } }
@keyframes orb2 { from { transform: rotate(120deg) translateX(420px); } to { transform: rotate(480deg) translateX(420px); } }
@keyframes orb3 { from { transform: rotate(240deg) translateX(360px); } to { transform: rotate(600deg) translateX(360px); } }

.hero h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(96deg, var(--red-d), var(--red) 45%, var(--red-bright));
  color: #C8102E;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .sub {
  position: relative;
  z-index: 1;
  color: var(--ink-dim);
  margin-top: 11px;
  font-size: 16px;
}

.hero .meta {
  position: relative;
  z-index: 1;
  color: var(--ink-faint);
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .05em;
  font-family: ui-monospace, Menlo, Monaco, Consolas, monospace;
}

/* ---------- Nav & Navigation ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  margin-left: auto;
  margin-right: auto;
  background: rgba(13, 16, 23, .88);
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}

nav ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 11px 0;
  overflow-x: auto;
  justify-content: center;
  flex-wrap: wrap;
}

nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 7px;
  white-space: nowrap;
  transition: .2s;
  border: 1px solid transparent;
}

nav a:hover, nav a.active {
  color: #ffffff;
  background: rgba(200, 16, 46, .18);
  border-color: rgba(200, 16, 46, .45);
  box-shadow: inset 0 0 0 1px rgba(200, 16, 46, .15);
}

/* ---------- Nested / Dropdown Nav ---------- */
.mainnav {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 14px 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.mainnav > li {
  position: relative;
}

.mainnav > li > a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 14.5px;
  padding: 9px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: .2s;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mainnav > li > a:hover,
.mainnav > li > a.active {
  color: #ffffff;
  background: rgba(200, 16, 46, .18);
  border-color: rgba(200, 16, 46, .45);
}

.has-dropdown.active-parent > a.dropdown-toggle {
  color: #ffffff;
  border-color: rgba(200, 16, 46, .45);
  background: rgba(200, 16, 46, .12);
}

.caret {
  font-size: 11px;
  opacity: .75;
  transition: transform .2s ease;
}

.has-dropdown:hover > a .caret,
.has-dropdown.open > a .caret {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 6px;
  min-width: 220px;
  display: none;
  z-index: 60;
}

.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown {
  display: block;
}

.dropdown-inner {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: #12151d;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mainnav .dropdown a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13.5px !important;
  padding: 10px 12px !important;
  border-radius: 7px;
  white-space: nowrap;
  display: block;
  transition: .15s;
  border: none;
}

.mainnav .dropdown a:hover,
.mainnav .dropdown a.active {
  color: #ffffff;
  background: rgba(200, 16, 46, .15);
}

@media (max-width: 780px) {
  .mainnav { justify-content: center; }
  .dropdown { left: 0; transform: none; right: auto; }
}

/* ---------- Sections & Typography ---------- */
section {
  margin: 56px 0;
}

h2 {
  font-size: 26px;
  font-weight: 750;
  margin-bottom: 8px;
  letter-spacing: -.01em;
  background: linear-gradient(92deg, var(--red-d), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: #C8102E;
  display: flex;
  align-items: center;
}

h2 .n {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  color: #C8102E;
  -webkit-text-fill-color: var(--red);
  margin-right: 11px;
  opacity: .9;
}

.lede {
  color: var(--ink-dim);
  margin-bottom: 22px;
  max-width: 840px;
}

h3 {
  font-size: 17px;
  margin: 26px 0 10px;
  background: linear-gradient(92deg, var(--red-d), var(--red-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 640;
}

/* ---------- Cards, Grids & Stat Tiles ---------- */
.card {
  background: linear-gradient(165deg, var(--panel), var(--panel2));
  border-radius: 14px;
  padding: 26px 28px;
  color: var(--ink);
}

.grid {
  display: grid;
  gap: 18px;
}

.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }

.stat, .mcard {
  background: linear-gradient(165deg, var(--panel), var(--panel2));
  border-radius: 12px;
  padding: 19px 17px;
  text-align: center;
  border: 1px solid var(--line);
}

.stat .v, .mcard .v {
  font-size: 29px;
  font-weight: 800;
  line-height: 1.12;
  background: linear-gradient(100deg, var(--blue), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.stat.red .v { background: linear-gradient(100deg, var(--red-bright), var(--red)); -webkit-background-clip: text; }
.stat.teal .v { background: linear-gradient(100deg, var(--teal), var(--blue)); -webkit-background-clip: text; }

.stat .k, .mcard .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-dim);
  margin-top: 8px;
}

.stat .d, .mcard .sub {
  font-size: 11.5px;
  color: var(--ink-faint) !important;
  margin-top: 6px;
}

/* ---------- Tables & Data Displays ---------- */
.tw {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 520px;
}

th {
  background: rgba(200, 16, 46, .14);
  color: #ffffff;
  text-align: left;
  padding: 12px 15px;
  font-weight: 640;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 11px 15px;
  border-bottom: 1px solid rgba(200, 16, 46, .10);
  color: var(--ink);
}

tr:last-child td {
  border-bottom: none;
}

tbody tr:hover td {
  background: rgba(200, 16, 46, .08);
  color: #ffffff;
}

td strong {
  color: #ffffff;
  font-weight: 640;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
}

/* ---------- Pills / Badges ---------- */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 640;
  letter-spacing: .03em;
}

.p-fix { background: rgba(38, 184, 166, .15); color: var(--teal); border: 1px solid rgba(38, 184, 166, .35); }
.p-open { background: rgba(200, 16, 46, .18); color: var(--red); border: 1px solid rgba(200, 16, 46, .40); }
.p-warn { background: rgba(232, 93, 117, .15); color: var(--amber); border: 1px solid rgba(232, 93, 117, .35); }
.p-info { background: rgba(56, 189, 248, .15); color: var(--blue); border: 1px solid rgba(56, 189, 248, .35); }

/* ---------- Figures & Callouts ---------- */
figure {
  background: linear-gradient(165deg, var(--panel), var(--panel2));
  border-radius: 14px;
  padding: 17px;
  margin: 22px 0;
  border: 1px solid var(--line);
}

figure img {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  border-radius: 4px;
  display: block;
  background: rgba(200, 16, 46, 0.4);
  padding: 5px;
}

figcaption {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin-top: 12px;
  text-align: center;
  font-style: italic;
}

.callout {
  border-radius: 10px;
  padding: 18px 21px;
  margin: 20px 0;
  border-left: 3px solid var(--blue);
  background: linear-gradient(100deg, rgba(56, 189, 248, .09), rgba(200, 16, 46, .04));
  color: var(--ink);
}

.callout.warn { border-left-color: var(--amber); background: linear-gradient(100deg, rgba(232, 93, 117, .10), rgba(200, 16, 46, .03)); }
.callout.crit { border-left-color: var(--red); background: linear-gradient(100deg, rgba(200, 16, 46, .15), rgba(229, 43, 66, .05)); }
.callout.good { border-left-color: var(--teal); background: linear-gradient(100deg, rgba(38, 184, 166, .10), rgba(56, 189, 248, .04)); }
.callout b { color: #ffffff; }
.callout .t { font-weight: 700; color: #ffffff; margin-bottom: 7px; display: block; font-size: 14.5px; }

/* ---------- Timeline ---------- */
.tl {
  position: relative;
  padding-left: 30px;
  margin-top: 24px;
}

.tl::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: linear-gradient(var(--blue), var(--red), var(--red-bright));
  opacity: .6;
}

.tl .ev {
  position: relative;
  margin-bottom: 22px;
}

.tl .ev::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .2), 0 0 8px 1px rgba(200, 16, 46, .5);
}

.tl .ev.k::before {
  background: var(--red-bright);
  box-shadow: 0 0 0 3px rgba(229, 43, 66, .2), 0 0 8px 1px rgba(229, 43, 66, .55);
}

.tl .d {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  color: var(--blue);
  letter-spacing: .05em;
}

.tl .h {
  font-weight: 660;
  color: #ffffff;
  margin: 2px 0 3px;
}

.tl .b {
  color: var(--ink-dim);
  font-size: 14px;
}

ul.clean {
  list-style: none;
  margin: 10px 0;
}

ul.clean li {
  padding: 7px 0 7px 20px;
  position: relative;
  color: var(--ink);
}

ul.clean li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--red);
  opacity: .9;
}

ul.clean li b {
  color: #ffffff;
}

footer {
  text-align: center;
  color: var(--ink-dim);
  font-size: 12.5px;
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

@media(max-width:640px) {
  .wrap { padding: 0 16px; }
  .card { padding: 20px 18px; }
  .hero { padding: 44px 0 24px; }
}

/* ---------- Multi-Page Additions & Headers ---------- */
.brand {
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -.01em;
  background: linear-gradient(92deg, var(--blue), var(--red));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(13, 16, 23, .9);
  border-bottom: 1px solid var(--line);
}

.topbar .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
}

.topbar nav {
  position: static;
  background: none;
  border: none;
  padding: 0;
}

.topbar nav ul {
  padding: 10;
  justify-content: flex-end;
}

.topbar nav a {
  font-size: 12.3px;
  padding: 6px 11px;
}

/* Re-assert nested nav sizing/position over the generic .topbar nav a rule above */
.topbar nav .mainnav {
  justify-content: center;
}

.topbar nav .mainnav > li > a {
  font-size: 14.5px;
  padding: 9px 16px;
}

.topbar nav .dropdown {
  position: absolute;
}

.topbar nav .dropdown-inner a {
  font-size: 13.5px;
  padding: 10px 12px;
}

.daynav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 6px;
}

.daynav a {
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  transition: .2s;
}

.daynav a:hover {
  color: #ffffff;
  border-color: var(--red);
  background: rgba(200, 16, 46, .12);
}

.daynav a.active {
  color: #ffffff;
  background: linear-gradient(100deg, var(--blue), var(--red));
  border-color: transparent;
}

.pagehero {
  padding: 42px 0 8px;
}

.pagehero h1 {
  font-size: clamp(24px, 3.8vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(96deg, var(--blue), var(--red) 55%, var(--red-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: #C8102E;
}

.pagehero .sub {
  color: var(--ink-dim);
  margin-top: 9px;
  font-size: 15px;
}

.pagehero .tag {
  display: inline-block;
  margin-top: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: var(--blue);
  letter-spacing: .05em;
  border: 1px solid rgba(56, 189, 248, .35);
  padding: 4px 11px;
  border-radius: 6px;
  background: rgba(56, 189, 248, .08);
}

.logcard {
  background: linear-gradient(165deg, var(--panel), var(--panel2));
  border-radius: 12px;
  padding: 22px 24px;
  margin: 16px 0;
  border: 1px solid var(--line);
}

.logcard .lh {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.logcard .fn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  color: #ffffff;
  font-weight: 640;
}

.logcard .note {
  color: var(--ink-dim);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.mstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 9px;
}

.mstats .m {
  background: rgba(10, 12, 17, .5);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
}

.mstats .m .mv {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.mstats .m .mk {
  font-size: 10px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
}

.err {
  color: var(--ink-dim);
  font-style: italic;
  font-size: 13px;
}

.dayprev-next {
  display: flex;
  justify-content: space-between;
  margin: 44px 0 10px;
  gap: 16px;
}

.dayprev-next a {
  flex: 1;
  padding: 16px 20px;
  border-radius: 12px;
  text-decoration: none;
  background: linear-gradient(165deg, var(--panel), var(--panel2));
  transition: .2s;
  border: 1px solid var(--line);
}

.dayprev-next a:hover {
  border-color: var(--red);
}

.dayprev-next .lbl {
  font-size: 10.5px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dayprev-next .ttl {
  color: #ffffff;
  font-weight: 640;
  margin-top: 4px;
  font-size: 14px;
}

.dayprev-next .next {
  text-align: right;
}

/* Tooltip container for interactive SVG charts */
#chartTooltip,
.chart-tooltip-abs {
  position: absolute;
  display: none;
  background: #0a0c11;
  border: 1px solid var(--red);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -120%);
  z-index: 50;
  white-space: nowrap;
}

/* ---------- Site Branding: Logo & Favicon ---------- */
/* HTML should use: <img src="img/logo-2x.png" class="header-logo" ...> */
/* The 2x PNG provides higher-resolution artwork while these CSS dimensions
   make the logo visibly larger in the header. */
/* The shared header uses the same logo asset on every page. */
.topbar .brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  line-height: 0;
}

.topbar .header-logo {
  display: block;
  width: auto;
  height: 70px;
  max-width: min(360px, 34vw);
  object-fit: contain;
  object-position: left center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
  transition: transform .2s ease, filter .2s ease;
}

.topbar .brand:hover .header-logo,
.topbar .brand:focus-visible .header-logo {
  transform: scale(1.02);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .65));
}

.topbar .brand:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 780px) {
  .topbar .header-logo {
    height: 54px;
    max-width: 280px;
  }
}

@media (max-width: 640px) {
  .topbar .row {
    gap: 12px;
  }

  .topbar .header-logo {
    height: 44px;
    max-width: 220px;
  }
}