@font-face {
  font-family: ArchwayDisplay;
  src: url('/assets/mexaronzy-dxr8hxij.ttf') format('truetype');
  font-display: swap;
}
html[data-route="landing"], html[data-route="landing"] body { margin: 0; background: #07120c; }
html[data-route="content"] #root > [data-archway-landing] { display: none; }
[data-archway-landing], [data-archway-landing] * { box-sizing: border-box; }
.av-landing {
  --av-ink: #e8f1dc;
  --av-green: #56e93b;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  color: var(--av-ink);
  background: radial-gradient(ellipse at 50% 38%, #1b3417 0%, #0c2013 44%, #06100b 88%);
  font-family: 'Ubuntu Mono', ui-monospace, 'Cascadia Code', 'DejaVu Sans Mono', monospace;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.av-atmosphere { position: absolute; inset: -12%; z-index: -1; overflow: hidden; pointer-events: none; }
.av-atmosphere::before, .av-atmosphere::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 48% 9% at 35% 35%, #a8e57732, transparent 85%),
    radial-gradient(ellipse 48% 12% at 72% 71%, #45aa7936, transparent 86%);
  transform: rotate(-24deg) translate3d(-2%, 0, 0);
  animation: av-atmosphere-drift 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.av-atmosphere::after {
  background: radial-gradient(ellipse 40% 8% at 68% 33%, #cdecb01c, transparent 90%);
  animation-duration: 32s; animation-delay: -12s; opacity: 0.6;
}
.av-content {
  position: relative; width: 100%; padding: 36px 16px 74px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.av-type {
  height: 3.4em; max-width: 64ch; padding: 0 16px;
  display: flex; justify-content: center; align-items: center;
  text-align: center; font-size: clamp(13px, 1.4vw, 17px); line-height: 1.6;
  letter-spacing: 0.015em; color: #d3e6c8;
}
.av-caret { display: inline-block; color: #77e455; animation: av-caret-blink 1s step-end infinite; }
.av-logo-stage {
  position: relative;
  width: min(840px, 94vw, calc((100svh - 240px) * 1.5));
  min-width: min(94vw, 340px);
  aspect-ratio: 1.5;
}
.av-logo {
  position: absolute; left: 10.5%; top: 10.5%; width: 79%; height: 79%;
  object-fit: contain; display: block; pointer-events: none;
  transition: opacity 0.16s ease;
}
.av-vapor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.av-type, .av-enter, .av-motion { position: relative; z-index: 1; }
.av-ready .av-logo { opacity: 0; }
.av-enter {
  margin-top: -3px; display: inline-flex; align-items: center; justify-content: center;
  gap: 24px; padding: 16px 28px 13px;
  color: #36dc1c; background: #0b190ee8; border: 1px solid #44853a;
  border-radius: 14px; text-decoration: none;
  font-family: ArchwayDisplay, ui-monospace, monospace;
  font-size: clamp(25px, 3.3vw, 39px); font-weight: 400; line-height: 1.3;
  letter-spacing: 0.04em;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}
.av-enter span { font-family: ui-monospace, monospace; font-size: 0.7em; color: #92cb73; }
.av-enter:hover { color: #a8f28a; background: #16331b; transform: translateY(-2px); }
.av-enter:focus-visible, .av-motion:focus-visible { outline: 2px solid #d9f0b5; outline-offset: 6px; }
.av-motion {
  position: absolute; right: 24px; bottom: max(20px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 10px 6px; border: 0; background: transparent;
  color: #9bbb94; font: inherit; font-size: 12px; cursor: pointer;
}
.av-motion:hover { color: #e1f4d0; }
.av-motion:disabled { cursor: default; color: #9bbb94; }
.av-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.av-paused .av-atmosphere::before, .av-paused .av-atmosphere::after,
.av-paused .av-caret, .av-hidden .av-atmosphere::before,
.av-hidden .av-atmosphere::after, .av-hidden .av-caret { animation-play-state: paused; }
@keyframes av-atmosphere-drift {
  from { transform: rotate(-24deg) translate3d(-2%, -2%, 0); opacity: 0.45; }
  to { transform: rotate(-18deg) translate3d(3%, 3%, 0); opacity: 0.9; }
}
@keyframes av-caret-blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@media (max-width: 540px) {
  .av-content { padding-inline: 6px; gap: 20px; }
  .av-type { max-width: 38ch; }
  .av-logo-stage { width: 100vw; }
  .av-vapor { top: -116px; bottom: -116px; height: calc(100% + 232px); }
  .av-enter { padding: 15px 23px 12px; gap: 18px; }
  .av-motion { right: 16px; }
}
@media (max-height: 480px) and (min-width: 600px) {
  .av-content { padding: 12px 16px 46px; gap: 0; }
  .av-logo-stage { min-width: 0; width: min(68vw, calc((100svh - 155px) * 1.5)); }
  .av-type { height: 2em; }
  .av-enter { padding: 9px 20px 7px; font-size: 25px; }
  .av-motion { bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-atmosphere::before, .av-atmosphere::after, .av-caret { animation: none; }
  .av-enter, .av-logo { transition: none; }
  .av-enter:hover { transform: none; }
}

/* Navigation uses the same green, cream, and white particulate palette as the hero. */
.av-nav { position: relative; isolation: isolate; }
.av-nav ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 4px 0; }
.av-nav a { display: inline-flex; position: relative; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; text-decoration: none; color: #c4d8ba; font: 700 14px/1.4 'Ubuntu Mono', ui-monospace, monospace; }
.av-nav a span { opacity: calc(1 - var(--av-scatter, 0)); }
.av-nav a[aria-current="page"] { color: #b9f69d; border-bottom-color: #56e93b80; background: #56e93b0a; }
.av-nav a:hover { color: #e8f1dc; background: transparent; border-color: transparent; box-shadow: none; }
.av-nav a:focus-visible { outline: 2px solid #d9f0b5; outline-offset: 3px; }
.av-nav-particles { position: absolute; left: -64px; top: -64px; pointer-events: none; z-index: 2; }
@media (max-width: 540px) { .av-nav a { padding-inline: 9px; } }
@media (prefers-reduced-motion: reduce) { .av-nav-particles { display: none; } .av-nav a span { opacity: 1; } }

html[data-route="content"] body { overflow-x: clip; }

@font-face {
  font-family: GiantRobotArmy;
  src: url('/assets/giant-robot-army-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
html[data-route="content"] { --font-heading: GiantRobotArmy, 'Ubuntu Mono', monospace; }
html[data-route="content"] h1,
html[data-route="content"] h2,
html[data-route="content"] h3,
html[data-route="content"] .siteHeader .brandText {
  font-family: GiantRobotArmy, 'Ubuntu Mono', monospace;
  font-weight: 500;
  line-height: 1.3;
}

html[data-route="content"] .siteHeader .headerInner {
  height: auto;
  min-height: 62px;
  flex-wrap: wrap;
  padding-block: 8px;
}
html[data-route="content"] .siteHeader .brand { flex-shrink: 0; }
html[data-route="content"] .siteHeader .brandText {
  white-space: nowrap;
  font-size: clamp(11px, 1.1vw, 14px);
}
@media (max-width: 780px) {
  html[data-route="content"] .siteHeader .headerInner { gap: 4px; }
  .siteHeader .av-nav { width: 100%; }
}


/* Use capitals for display text while preserving readable body copy. */
html[data-route="content"] :is(h1, h2, h3, h4, h5, h6),
html[data-route="content"] .siteHeader .brandText,
.av-nav a,
.av-type {
  text-transform: uppercase;
}

.siteFooter .architectureCredits a { color: #b8cfa5; text-decoration: underline; text-underline-offset: 3px; }
.siteFooter .architectureCredits a:hover { color: #e0ecc9; }