.index-page {
  --color-paper: var(--color-white);
  --color-paper-2: var(--color-brand-cream);
  --color-paper-3: var(--color-brand-cream);
  --color-panel: var(--color-white);
  --color-ink: var(--color-night);
  --color-muted: var(--color-brand-brown);
  --color-rule: var(--color-brand-brown);
  --color-accent: var(--color-displacement-green);
  --color-accent-ink: var(--color-night);
  --color-hot: var(--color-brand-red);
  --color-hot-ink: var(--color-white);
  background: var(--color-white);
  color: var(--color-night);
}

.index-page .site-header {
  background: var(--color-night);
  border-block-end: var(--rule-md) solid var(--color-brand-red);
  color: var(--color-white);
  backdrop-filter: none;
}

.index-page .wordmark {
  letter-spacing: 0.02em;
}

.index-page .wordmark__logo {
  width: 3rem;
  height: auto;
}

.index-page .site-nav a {
  border: 0;
  border-block-end: var(--rule-md) solid transparent;
}

.index-page .site-nav a:hover {
  background: transparent;
  border-color: var(--color-displacement-green);
  color: var(--color-white);
}

.index-page .hero {
  min-height: auto;
  padding-block: var(--space-3xl) var(--space-4xl);
  background: var(--color-brand-cream);
  border-block-end: var(--rule-md) solid var(--color-brand-brown);
}

.index-page .hero__copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.index-page .hero__eyebrow {
  margin: 0 0 var(--space-md);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.index-page .hero h1 {
  max-width: 9ch;
  font-size: clamp(var(--text-2xl), 9vw, var(--text-display));
  line-height: 1;
  text-transform: none;
}

.index-page .hero__lede {
  color: var(--color-brand-brown);
}

.index-page .button {
  border-color: var(--color-night);
  border-radius: 0;
  box-shadow: none;
}

.index-page .button--primary {
  background: var(--color-displacement-green);
}

.index-page .button--primary:hover {
  background: var(--color-brand-red);
  color: var(--color-white);
}

.index-page .button--secondary {
  background: transparent;
}

.index-page .button--secondary:hover {
  background: var(--color-night);
  color: var(--color-white);
}

.index-page .factory {
  background:
    linear-gradient(var(--color-brand-brown) var(--rule-sm), transparent var(--rule-sm)) 0 0 / 100% var(--space-2xl),
    linear-gradient(90deg, var(--color-brand-brown) var(--rule-sm), transparent var(--rule-sm)) 0 0 / var(--space-2xl) 100%,
    var(--color-night);
  border-color: var(--color-brand-brown);
  border-radius: 0;
  box-shadow: none;
}

.index-page .factory__clock {
  width: clamp(var(--space-3xl), 13vw, 9rem);
}

.index-page .window,
.index-page .station,
.index-page .pipe {
  background: var(--color-brand-cream);
  border-color: var(--color-brand-brown);
}

.index-page .monitor,
.index-page .tape {
  background: var(--color-displacement-green);
}

.index-page .spark,
.index-page .worker__head,
.index-page .worker__body,
.index-page .worker__arm {
  background: var(--color-brand-red);
}

.index-page .gauge {
  background: var(--color-white);
  border-color: var(--color-brand-brown);
}

.index-page .gauge__needle {
  background: var(--color-brand-red);
}

.index-page .conveyor {
  border-color: var(--color-brand-brown);
}

.index-page .conveyor::before {
  background: repeating-linear-gradient(
    90deg,
    var(--color-brand-cream) 0 var(--space-lg),
    var(--color-displacement-green) var(--space-lg) calc(var(--space-lg) + var(--space-2xs))
  );
}

.index-page .notice {
  padding-block: var(--space-md);
  background: var(--color-night);
  border-block-end: var(--rule-md) solid var(--color-brand-red);
  color: var(--color-white);
}

.index-page .notice p {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 3vw, var(--text-xl));
  font-weight: 900;
  letter-spacing: 0.025em;
  line-height: 1;
}

.index-page .origin,
.index-page .projects,
.index-page .site-footer {
  padding-block: var(--space-3xl);
}

.index-page .section-head {
  display: block;
  max-width: 66rem;
}

.index-page .section-head h2,
.index-page .site-footer h2 {
  max-width: 13ch;
  font-size: clamp(var(--text-2xl), 7vw, 5rem);
  line-height: 1;
  text-transform: none;
}

.index-page .section-head p {
  margin-block-start: var(--space-md);
  color: var(--color-brand-brown);
}

.index-page .origin__story {
  gap: 0;
}

.index-page .origin__panel {
  min-height: 23rem;
  padding: var(--space-lg);
  border-color: var(--color-brand-brown);
  border-radius: 0;
}

.index-page .origin__panel:last-child {
  background: var(--color-night);
  color: var(--color-white);
}

.index-page .origin__panel:last-child p {
  color: var(--color-brand-cream);
}

.index-page .origin__panel:last-child a {
  color: var(--color-white);
}

.index-page .origin__panel time {
  border-radius: 0;
  background: var(--color-night);
}

.index-page .origin__panel:last-child time {
  background: var(--color-brand-red);
}

.index-page .projects {
  background: var(--color-brand-cream);
}

.index-page .project-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rule-sm);
  background: var(--color-brand-brown);
  border: var(--rule-sm) solid var(--color-brand-brown);
}

.index-page .project-card {
  min-height: 14rem;
  padding: var(--space-md);
  background: var(--color-white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.index-page .project-card--active {
  background: var(--color-white);
  border-block-start: var(--space-2xs) solid var(--color-displacement-green);
  color: var(--color-night);
}

.index-page .project-card--queued {
  background: var(--color-brand-cream);
}

.index-page .project-card__status,
.index-page .project-card__flag {
  border-radius: 0;
}

.index-page .project-card__flag--acquired {
  background: var(--color-brand-cream);
}

.index-page .project-card__details {
  border-radius: 0;
}

.index-page .site-footer {
  grid-template-areas:
    "contact copyright"
    "menu menu";
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--color-brand-cream);
  border-block-start: var(--rule-md) solid var(--color-brand-brown);
}

.index-page .footer-intro {
  grid-area: contact;
}

.index-page .site-footer h2 {
  color: var(--color-brand-red);
  max-width: none;
}

.index-page .site-footer a {
  font-weight: 800;
  white-space: nowrap;
}

.index-page .footer-menu {
  grid-area: menu;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-lg);
}

.index-page .footer-menu h3 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-outlier);
  font-size: var(--text-sm);
  text-transform: uppercase;
}

.index-page .footer-menu ul {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.index-page .copyright {
  grid-area: copyright;
  align-self: end;
  max-width: none;
}

.index-page .game-modal__panel,
.index-page .anniversary-modal__panel {
  border-color: var(--color-brand-brown);
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 75rem) {
  .index-page .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 64rem) {
  .index-page .site-footer {
    grid-template-areas:
      "contact"
      "copyright"
      "menu";
    grid-template-columns: minmax(0, 1fr);
  }

  .index-page .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 42rem) {
  .index-page .hero {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .index-page .hero h1,
  .index-page .section-head h2,
  .index-page .site-footer h2 {
    line-height: 1;
  }

  .index-page .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-page *,
  .index-page *::before,
  .index-page *::after {
    scroll-behavior: auto !important;
  }
}