@font-face {
  font-family: "Departure Mono";
  src: url("/assets/departure-mono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body { margin: 0; background: #fff; color: #000; }

#ai-mark {
  --ai-logo-size: 132px;
  --ai-edge: 44px;
  --ai-top: 88px;
  --ai-height: 704px;
  font: 400 11px/22px "Departure Mono", monospace;
  container-type: inline-size;
  -webkit-font-smoothing: auto;
}

.ai-page {
  box-sizing: border-box;
  min-height: max(var(--ai-height), 100svh);
  padding: var(--ai-edge);
  display: flex;
  flex-direction: column;
}

.ai-main { margin-top: var(--ai-top); }
.ai-name {
  margin: 0;
  font: 400 var(--ai-logo-size)/1 "Departure Mono", monospace;
  letter-spacing: 0;
}
.ai-line { display: block; white-space: nowrap; }
.ai-inc { margin: 22px 0 0; font: inherit; }
.ai-meta {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-top: auto;
  padding-top: 88px;
  white-space: nowrap;
}

@container (max-width: 879px) {
  .ai-page { --ai-edge: 33px; --ai-top: 66px; --ai-height: 660px; }
}
@container (max-width: 439px) {
  .ai-page { --ai-edge: 22px; --ai-top: 55px; --ai-height: 550px; }
}

/* Keep the fallback readable even if JavaScript is unavailable. */
@media (min-width: 1320px) { #ai-mark { --ai-logo-size: 176px; } }
@media (max-width: 1011px) { #ai-mark { --ai-logo-size: 110px; } }
@media (max-width: 857px) { #ai-mark { --ai-logo-size: 88px; } }
@media (max-width: 681px) { #ai-mark { --ai-logo-size: 66px; } }
@media (max-width: 527px) { #ai-mark { --ai-logo-size: 44px; } }
@media (max-width: 351px) { #ai-mark { --ai-logo-size: 33px; } }