@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-extrabold.woff2') format('woff2');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  color: #23231e;
  background: #ff5735;
  font-family: 'IBM Plex Mono', monospace;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { color: #ff5735; background: #23231e; }

.page {
  min-height: 440px;
  height: 100vh;
  height: 100dvh;
  padding: clamp(20px, 3.5vh, 40px) clamp(20px, 3.8vw, 80px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: clamp(18px, 2.5vh, 30px);
  border-bottom: 1px solid currentColor;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 clamp(27px, 2.5vw, 38px)/1 'Barlow Condensed', sans-serif;
  letter-spacing: -.025em;
}

.brand svg {
  width: clamp(28px, 2.6vw, 40px);
  height: auto;
  fill: currentColor;
  flex-shrink: 0;
}

.status, footer {
  font-size: clamp(10px, .8vw, 12px);
  line-height: 1.5;
  letter-spacing: .035em;
}

.status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  white-space: nowrap;
}

.status > span { width: 6px; height: 6px; background: currentColor; }

main { display: flex; align-items: center; min-height: 0; }

h1 {
  margin: 0 0 .055em -.025em;
  font: 800 min(22.8vw, 36vh)/.82 'Barlow Condensed', Impact, sans-serif;
  font-size: min(22.8vw, 36dvh);
  letter-spacing: -.035em;
}

.line { display: block; white-space: nowrap; }
.line + .line { margin-top: .045em; }

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: clamp(16px, 2.5vh, 26px);
  border-top: 1px solid currentColor;
}

@media (max-width: 600px) and (min-height: 560px) {
  .page { padding-block: 24px; }
  .brand { font-size: 28px; gap: 8px; }
  .brand svg { width: 29px; }
  .status { font-size: 9px; gap: 6px; }
  h1 {
    font-size: min(42vw, 19.5dvh);
    line-height: .84;
    letter-spacing: -.025em;
    margin-bottom: .075em;
  }
  .line > span { display: block; }
  .line + .line { margin-top: .12em; }
  footer { font-size: 9px; gap: 12px; }
}

@media (max-height: 500px) {
  .page { min-height: 300px; padding-block: 16px; }
  .masthead { padding-bottom: 12px; }
  .brand { font-size: 25px; }
  .brand svg { width: 27px; }
  h1 { font-size: min(22.8vw, 32dvh); }
  footer { padding-top: 12px; }
}