:root {
  color-scheme: dark;
  --background: #080906;
  --ink: #e7e6df;
  --muted: #898a83;
  --accent: #f0c526;
  --grid: rgba(231, 230, 223, 0.014);
  --rule: rgba(231, 230, 223, 0.11);
  --sans: Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --page-pad: clamp(1.5rem, 5vw, 5.5rem);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 18rem;
  background: var(--background);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--background);
  background-size: 3rem 3rem;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
  content: "";
  opacity: 0.018;
  pointer-events: none;
}

.holding-page {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: minmax(3rem, 0.72fr) auto minmax(4rem, 0.48fr) auto minmax(3rem, 0.72fr);
  padding: var(--page-pad);
}

.holding-page::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--page-pad) - 0.75rem);
  width: 1px;
  background: var(--rule);
  content: "";
}

.identity {
  grid-row: 2;
  max-width: 84rem;
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: clamp(4rem, 12.2vw, 11.75rem);
  font-weight: 800;
  line-height: 0.76;
}

.wordmark__stop {
  color: var(--accent);
}

.doctrine,
.system-state {
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  letter-spacing: 0.11em;
  line-height: 1.5;
}

.doctrine {
  margin-top: clamp(1.45rem, 3vw, 2.5rem);
  color: var(--accent);
}

.description {
  margin-top: clamp(0.75rem, 1.4vw, 1.05rem);
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
}

.system-state {
  display: flex;
  grid-row: 4;
  align-items: baseline;
  color: var(--muted);
  white-space: nowrap;
}

.cursor {
  margin-left: 0.55em;
  color: var(--accent);
  animation: cursor-blink 1.05s steps(1, end) infinite;
  font-size: 0.9em;
}

@keyframes cursor-blink {
  0%,
  46% {
    opacity: 1;
  }

  47%,
  96% {
    opacity: 0;
  }

  97%,
  100% {
    opacity: 1;
  }
}

@media (max-width: 40rem) {
  :root {
    --page-pad: clamp(1.25rem, 7vw, 2rem);
  }

  .holding-page {
    grid-template-rows: minmax(4rem, 0.58fr) auto minmax(4rem, 0.54fr) auto minmax(4rem, 0.58fr);
  }

  h1 {
    font-size: clamp(2.5rem, 13vw, 5.5rem);
    line-height: 0.8;
  }

  .doctrine {
    max-width: 24rem;
  }

  .system-state {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }

}