.header-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.weather {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .85rem;
  border-left: 4px solid #e59a3f;
  border-radius: 8px;
  background: #f7fbfc;
}

.weather[hidden] { display: none !important; }
.weather-icon { font-size: clamp(2rem, 2.5vw, 3.2rem); line-height: 1; color: #d48625; }
.weather-reading { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .55rem; line-height: 1.05; }
.weather-reading strong { font-size: clamp(1.7rem, 2.4vw, 3rem); font-variant-numeric: tabular-nums; }
.weather-reading > span { font-size: clamp(.9rem, 1vw, 1.25rem); font-weight: 700; }
.weather-reading small { grid-column: 1 / -1; margin-top: .25rem; color: #456571; font-size: clamp(.75rem, .86vw, 1rem); white-space: nowrap; }

.display-fit .header-status { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.display-fit .weather { height: 64px; min-width: 245px; padding: 8px 13px; gap: 10px; border-left-width: 5px; }
.display-fit .weather-icon { font-size: 43px; }
.display-fit .weather-reading { column-gap: 8px; }
.display-fit .weather-reading strong { font-size: 34px; }
.display-fit .weather-reading > span { font-size: 16px; }
.display-fit .weather-reading small { margin-top: 3px; font-size: 14px; }

@media (max-width: 1000px) {
  .header-status { gap: .7rem; }
  .weather { padding: .4rem .55rem; }
  .weather-reading > span { display: none; }
}

@media (max-width: 680px) {
  .masthead { flex-wrap: wrap; }
  .header-status { width: 100%; justify-content: space-between; }
}