/* Branded image heading with controls kept in a clear bar beneath it. */
header {
  position: relative;
  display: block;
  padding: 0;
  background: #101115;
  box-shadow: 0 5px 22px #0008;
}

.brand {
  display: block;
  width: 100%;
  height: clamp(90px, 12.5vw, 180px);
  overflow: hidden;
  background: #26051a url("../banner.png") center / contain no-repeat;
  text-indent: -9999px;
  border-bottom: 1px solid #473542;
}

.brand > span,
.brand strong { display: none; }

.top-actions {
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background: #111216;
  border-bottom: 1px solid var(--line);
}

.top-actions button,
.top-actions output {
  background: #26272e;
  border: 1px solid #3c3e48;
}

.top-actions .dark { background: #24252b; }
.top-actions .warm { background: #9f5723; border-color: #bb6b2f; }
.top-actions .export { background: var(--pink); border-color: #ff65aa; }

@media (max-width: 900px) {
  header { display: block; }
  .brand { height: clamp(90px, 12.5vw, 115px); }
  .top-actions { justify-content: center; }
}

@media (max-width: 580px) {
  .brand { height: 90px; }
  .top-actions { justify-content: center; padding: 10px 8px; gap: 6px; }
}