/* Antomata brand: Carbon, Ember deep, Ember light, Bone. Space Grotesk + Inter. */
:root {
  --carbon: #0B0B0B;
  --ember: #F26B1D;
  --ember-light: #FFB266;
  --bone: #F4EFE6;
  --grey: #B4B2A9;
}

* { box-sizing: border-box; }
html { background: var(--carbon); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* mostly carbon, ember rising at the bottom */
  background: linear-gradient(180deg, var(--carbon) 0%, var(--carbon) 58%, #3A1706 76%, #B4490F 92%, var(--ember) 100%);
  color: var(--bone);
  font: 400 17px/1.5 "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.panel { text-align: center; max-width: 100%; }

.lockup { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2.2vw, 28px); }
.mark { flex: none; width: clamp(48px, 9vw, 104px); height: auto; }
.wordmark {
  margin: 0;
  font: 700 clamp(2.5rem, 9.5vw, 6.5rem)/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.035em;
}
.w1 { color: var(--ember); }
.w2 { color: var(--ember-light); }

.tagline { margin: clamp(16px, 2.4vw, 26px) 0 0; color: var(--ember-light); font-size: clamp(1.05rem, 2.4vw, 1.4rem); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 10px 18px;
  border: 1px solid rgba(244, 239, 230, .22);
  border-radius: 999px;
  font: 500 1rem/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .02em;
}
.dot { width: 9px; height: 9px; border-radius: 2px; background: var(--ember); animation: pulse 1.8s ease-in-out infinite; }

.mail {
  display: block;
  width: fit-content;
  margin: 26px auto 0;
  color: var(--bone);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 178, 102, .55);
  padding-bottom: 3px;
  transition: color .15s ease, border-color .15s ease;
}
.mail:hover { color: var(--ember-light); border-color: var(--ember-light); }
.mail:focus-visible { outline: 2px solid var(--ember-light); outline-offset: 5px; border-radius: 2px; }

footer { padding: 20px; text-align: center; color: var(--carbon); font-size: .85rem; font-weight: 500; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }