@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: #101722;
  color: #e8f0d9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: #101722;
  background-image:
    linear-gradient(rgba(163, 203, 164, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163, 203, 164, .07) 1px, transparent 1px),
    radial-gradient(circle at 77% 14%, rgba(255, 196, 92, .12), transparent 24rem);
  background-size: 1.4rem 1.4rem, 1.4rem 1.4rem, auto;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: .7rem;
  left: .7rem;
  padding: .65rem .8rem;
  transform: translateY(-180%);
  background: #e8f0d9;
  color: #101722;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.site-header,
.site-footer,
.hero,
.idea,
.files,
.now-building {
  width: min(100% - 3rem, 72rem);
  margin: 0 auto;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.7rem 0;
  border-bottom: 2px solid #6f8b70;
}

.wordmark {
  color: #f7ca63;
  font-family: "Silkscreen", monospace;
  font-size: clamp(.8rem, 2vw, 1rem);
  letter-spacing: .06em;
  text-decoration: none;
}
.wordmark span { animation: blink 1.2s steps(2, jump-none) infinite; }
.build-number {
  margin: 0;
  color: #a6bd9b;
  font-size: .67rem;
  letter-spacing: .08em;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(17rem, .88fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  min-height: min(42rem, calc(100vh - 5.6rem));
  padding: clamp(4rem, 10vw, 8rem) 0;
}

.terminal-frame {
  position: relative;
  max-width: 43rem;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 2px solid #93ab85;
  background: rgba(9, 15, 23, .78);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .21);
}
.terminal-frame::before,
.terminal-frame::after {
  position: absolute;
  width: .43rem;
  height: .43rem;
  content: "";
  background: #f7ca63;
}
.terminal-frame::before { top: .45rem; right: .45rem; }
.terminal-frame::after { right: .45rem; bottom: .45rem; }

.terminal-line,
.section-label,
.number,
.status,
.signal-board__header,
.signal-board__screen p {
  font-family: "Silkscreen", monospace;
  letter-spacing: .04em;
}
.terminal-line {
  margin: 0 0 1.8rem;
  color: #a6bd9b;
  font-size: clamp(.64rem, 1.6vw, .82rem);
  line-height: 1.6;
}
.terminal-line span { color: #f7ca63; }
h1, h2, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
h1 {
  margin-bottom: 1.45rem;
  color: #e8f0d9;
  font-family: "Silkscreen", monospace;
  font-size: clamp(2.05rem, 5.8vw, 4.7rem);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.3;
  text-transform: uppercase;
}
h1 span { color: #f7ca63; }
.lede {
  max-width: 34rem;
  margin-bottom: 1.9rem;
  color: #bdc9b5;
  font-size: clamp(.91rem, 1.7vw, 1.04rem);
  line-height: 1.8;
}
.status {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  margin: 0;
  color: #a6bd9b;
  font-size: .68rem;
  line-height: 1.5;
}
.status-light {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #f7ca63;
  box-shadow: 0 0 .7rem #f7ca63;
}

.signal-board {
  position: relative;
  align-self: stretch;
  min-height: 20rem;
  border: 2px solid #93ab85;
  background: #151d2b;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .21);
}
.signal-board__header {
  padding: .8rem 1rem;
  border-bottom: 2px solid #93ab85;
  color: #101722;
  background: #93ab85;
  font-size: .67rem;
}
.signal-board__screen { position: absolute; inset: 2.8rem 1rem 1rem; }
.signal-board__screen::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .19;
  background-image: linear-gradient(rgba(167, 203, 151, .38) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 203, 151, .38) 1px, transparent 1px);
  background-size: 1.1rem 1.1rem;
}
.signal-board svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.signal-board path { fill: none; stroke: #f7ca63; stroke-width: 2; stroke-dasharray: 4 7; }
.signal-board__screen p {
  position: absolute;
  bottom: .25rem;
  left: .3rem;
  margin: 0;
  color: #a6bd9b;
  font-size: .56rem;
}
.node {
  position: absolute;
  z-index: 1;
  width: .76rem;
  height: .76rem;
  border: 2px solid #101722;
  background: #f7ca63;
  box-shadow: 0 0 0 2px #f7ca63, 0 0 1rem rgba(247, 202, 99, .6);
}
.node-a { top: 75%; left: 10%; }
.node-b { top: 49%; left: 44%; }
.node-c { top: 14%; right: 10%; }
.node-d { top: 84%; right: 10%; }

.idea {
  display: grid;
  grid-template-columns: .65fr 1.25fr 1fr;
  gap: 2.5rem;
  padding: clamp(5rem, 11vw, 9rem) 0;
  border-top: 2px solid #6f8b70;
}
.section-label,
.number { margin-bottom: 0; color: #f7ca63; font-size: .66rem; }
.idea h2,
.now-building h2 {
  margin-bottom: 0;
  color: #e8f0d9;
  font-family: "Silkscreen", monospace;
  font-size: clamp(1.35rem, 3.4vw, 2.7rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.45;
  text-transform: uppercase;
}
.idea > p:last-child,
.now-building > p {
  align-self: end;
  margin: 0;
  color: #bdc9b5;
  font-size: .94rem;
  line-height: 1.82;
}

.files {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid #6f8b70;
  border-right: 0;
}
.files article { min-height: 16rem; padding: 1.5rem; border-right: 2px solid #6f8b70; background: rgba(9, 15, 23, .35); }
.files article:nth-child(2) { background: rgba(247, 202, 99, .035); }
.files h2 { margin: 3.7rem 0 1rem; color: #e8f0d9; font-family: "Silkscreen", monospace; font-size: 1.05rem; font-weight: 400; line-height: 1.5; text-transform: uppercase; }
.files article > p:last-child { max-width: 18rem; margin-bottom: 0; color: #bdc9b5; font-size: .88rem; line-height: 1.75; }

.now-building {
  display: grid;
  grid-template-columns: .65fr 1.25fr 1fr;
  gap: 2.5rem;
  padding: clamp(5rem, 11vw, 9rem) 0;
}
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.6rem 0 2.4rem;
  border-top: 2px solid #6f8b70;
  color: #849a7e;
  font-size: .63rem;
  letter-spacing: .04em;
  line-height: 1.6;
}
.site-footer p { margin: 0; }
a:focus-visible { outline: 2px solid #f7ca63; outline-offset: 4px; }

@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .signal-board { min-height: 17rem; max-width: 32rem; width: 100%; justify-self: end; }
  .idea, .now-building { grid-template-columns: 1fr; gap: 1.55rem; }
  .idea > p:last-child, .now-building > p { max-width: 35rem; }
}
@media (max-width: 38rem) {
  .site-header, .site-footer, .hero, .idea, .files, .now-building { width: min(100% - 2rem, 72rem); }
  .site-header { padding: 1.2rem 0; }
  .hero { padding: 3.8rem 0; }
  .terminal-frame { padding: 1.2rem; }
  h1 { font-size: clamp(1.72rem, 9.2vw, 2.6rem); }
  .files { grid-template-columns: 1fr; border-right: 2px solid #6f8b70; }
  .files article { min-height: auto; border-right: 0; border-bottom: 2px solid #6f8b70; }
  .files article:last-child { border-bottom: 0; }
  .files h2 { margin-top: 2.4rem; }
  .site-footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; } }
}

.eyebrow {
  margin: 0 0 1.5rem;
  color: #a8b4ff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
}

h1 {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(3.25rem, 9vw, 7.25rem);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .96;
}

.intro {
  max-width: 32rem;
  margin: 2rem 0 0;
  color: #b9c1da;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
}

footer {
  width: min(100% - 3rem, 70rem);
  margin: 0 auto;
  padding: 1.5rem 0 2rem;
  color: #7f89a8;
  font-size: .85rem;
}

@media (max-width: 38rem) {
  main { padding: 4rem 0; }
}