/* subject: local — shared site styles */
/* Common to every page: brand tokens, reset, nav shell, buttons, footer. */

:root {
--moss-deep:   #1d2a1f;
      --moss-deeper: #16201a;
      --moss-warm:   #243429;
      --moss-fg:     #e2e8d6;
      --moss-fg-2:   #c2cdb1;
      --moss-acc:    #c9d36a;
      --moss-acc-2:  #aab85a;
      --moss-line:   #36443a;
      --paper:       #efece4;
      --ink:         #14110f;
}

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

html {
scroll-behavior: smooth;
}

body {
background: var(--moss-deep);
      color: var(--moss-fg);
      font-family: "Inter Tight", sans-serif;
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
}

a {
color: inherit; text-decoration: none;
}

.caret {
display: inline-block;
      width: 0.52ch; height: 0.85em;
      background: var(--moss-acc);
      margin-left: 3px;
      transform: translateY(0.05em);
      animation: blink 1.05s steps(2, end) infinite;
}

@keyframes blink {
50% { opacity: 0; }
}

nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 48px;
      background: color-mix(in oklab, var(--moss-deeper) 92%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid color-mix(in oklab, var(--moss-line) 70%, transparent);
}

.nav-logo .colon {
color: var(--moss-acc);
}

.nav-links {
display: flex; align-items: center; gap: 36px;
      list-style: none;
}

.nav-links a:hover {
color: var(--moss-fg);
}

.nav-toggle {
display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 32px; height: 32px;
      background: none; border: none;
      cursor: pointer; padding: 0;
      flex-shrink: 0;
}

.nav-toggle span {
display: block; width: 100%; height: 2px;
      background: var(--moss-fg);
      transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

.btn:hover {
background: #d9e37a; border-color: #d9e37a;
}

.footer-logo .colon {
color: var(--moss-acc);
}

.footer-links a:hover {
color: var(--moss-fg);
}

.footer-copy {
font-family: "JetBrains Mono", monospace;
      font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
      color: color-mix(in oklab, var(--moss-fg) 55%, transparent);
}

.nav-links a {
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--moss-fg-2); transition: color 0.2s;
}

.btn {
display: inline-flex; align-items: center; gap: 6px;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 11px 22px;
      background: var(--moss-acc); color: var(--ink);
      border: 1px solid var(--moss-acc); cursor: pointer;
      transition: background 0.18s, border-color 0.18s;
}

footer {
padding: 36px 48px; border-top: 1px solid var(--moss-line);
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 16px;
}

.footer-logo {
font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 15px;
}

.footer-links {
display: flex; gap: 28px; list-style: none;
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--moss-fg-2);
}

.footer-links a.social-icon {
display: flex; align-items: center;
}

.footer-links a.social-icon svg {
width: 16px; height: 16px; display: block;
}

@media (max-width: 860px) {
  nav {
  padding: 16px 24px;
  }
  .nav-toggle {
  display: flex;
  }
  .nav-cta {
  display: none;
  }
  .nav-links {
  display: flex; flex-direction: column; gap: 0;
          position: fixed; top: 100%; left: 0; right: 0;
          background: var(--moss-deeper);
          border-bottom: 1px solid var(--moss-line);
          max-height: 0; overflow: hidden;
          transition: max-height 0.25s ease;
  }
  .nav-links.open {
  max-height: 70vh; overflow-y: auto;
  }
  .nav-links li {
  width: 100%;
  }
  .nav-links a {
  display: block; padding: 16px 24px;
          border-bottom: 1px solid var(--moss-line);
  }
  footer {
  padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 20px;
  }
  .footer-links {
  flex-wrap: wrap; gap: 16px;
  }
}