:root {
  color-scheme: dark;
  --brand-green: #5f704b;
  --brand-cream: #f6f5ec;
  --brand-dark: #434343;
  --brand-green-hover: #71835b;
  --brand-muted: rgba(246, 245, 236, 0.68);
  --brand-line: rgba(246, 245, 236, 0.16);
  --brand-surface: rgba(246, 245, 236, 0.055);

  /* Compatibility aliases for the existing static-page styles. */
  --forge-bg: var(--brand-dark);
  --forge-surface: var(--brand-surface);
  --forge-surface-deep: var(--brand-surface);
  --forge-orange: var(--brand-green);
  --forge-orange-hover: var(--brand-green-hover);
  --forge-muted: var(--brand-muted);
  --forge-white: var(--brand-cream);
  --forge-line: var(--brand-line);
}

body {
  background: var(--forge-bg);
  color: var(--forge-white);
  overflow-x: hidden;
}

nav {
  background: rgba(67, 67, 67, 0.92);
  border-bottom: 1px solid var(--forge-line);
  backdrop-filter: blur(12px);
  align-items: center;
  z-index: 100;
}

.logo {
  flex: 0 0 auto;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--brand-green);
}

.section h2,
.card h3,
.content h2,
.text h2 {
  color: var(--brand-cream);
}

.logo span {
  color: var(--brand-cream);
}

nav a {
  color: var(--forge-white);
}

nav a:hover {
  color: var(--brand-cream);
  box-shadow: inset 0 -1px var(--brand-green);
}

.hero {
  background:
    radial-gradient(circle at 50% 0, rgba(95, 112, 75, 0.22), transparent 42%),
    var(--forge-bg);
}

.hero p,
.section p,
.content p,
.text p,
.info p {
  color: var(--forge-muted);
}

.card,
.image,
.placeholder,
input,
textarea {
  background: var(--brand-surface);
  border-color: var(--forge-line);
  color: var(--forge-muted);
  border-radius: 6px;
}

.card {
  box-shadow: 0 24px 55px rgba(67, 67, 67, 0.22);
}

.image,
.placeholder {
  border-color: var(--forge-orange);
}

.tech:nth-child(even) {
  background: var(--brand-surface);
}

.status,
.button,
button {
  background: var(--forge-orange);
  color: var(--brand-cream);
}

.button:hover,
button:hover {
  background: var(--forge-orange-hover);
}

input:focus,
textarea:focus {
  border-color: var(--forge-orange);
}

input::placeholder,
textarea::placeholder {
  color: var(--forge-muted);
  opacity: 1;
}

td {
  border-color: var(--forge-line);
}

td:first-child,
.info {
  color: var(--forge-muted);
}

footer {
  padding: 50px 60px;
  text-align: center;
  color: var(--forge-muted);
  border-top: 1px solid var(--forge-line);
}

@media (min-width: 901px) {
  html.is-wheel-snapping {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

@media (max-width: 900px) {
  nav ul {
    display: none;
  }
}