/* maza — shared foundation
   Deep bottle green ground, off-white type, mono for specs. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ground: #16402f;         /* bottle green */
  --ground-deep: #0f2f22;
  --paper: #f0eee6;          /* off-white */
  --accent: #3f8f5b;         /* leaf green */
  --muted: rgba(240, 238, 230, 0.66);
  --faint: rgba(240, 238, 230, 0.40);
  --hairline: rgba(240, 238, 230, 0.18);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bar: 80px;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  background: var(--ground);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; }

/* ---------- spec type: the mono voice ---------- */
.spec {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- top bar ---------- */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: clamp(16px, 4vw, 36px);
  background: rgba(22, 64, 47, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.bar__mark {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
  text-decoration: none;
  line-height: 1;
}

.nav { display: flex; align-items: center; gap: 0.5rem; }

.nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.95em 1.9em;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

.nav a:hover, .nav a[aria-current="page"] {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ground);
}

@media (max-width: 560px) {
  .nav a { padding: 0.85em 1.25em; font-size: 0.72rem; letter-spacing: 0.08em; }
  .bar__mark { font-size: 1.15rem; }
}

footer {
  padding: clamp(2.5rem, 7vw, 4rem) clamp(16px, 4vw, 36px) clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  border-top: 1px solid var(--hairline);
}

:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }