/* Moonresource Static Pages — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  --s0: #08090c; --s1: #0e1014; --s2: #14161c; --s3: #1c1e26;
  --s4: #252830; --s5: #30343e;
  --b1: rgba(255,255,255,0.04); --b2: rgba(255,255,255,0.08); --b3: rgba(255,255,255,0.14);
  --t1: #e8e4df; --t2: #a8a29a; --t3: #78736c; --t4: #524e48;
  --a-source: #c9a84e; --a-derived: #d4845a; --a-norm: #8fa8b8;
  --a-green: #7ab87a; --a-red: #c46050; --a-amber: #e0b050;
}

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

body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: var(--s0); color: var(--t1);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

a { color: var(--a-source); text-decoration: none; }
a:hover { text-decoration: underline; }

.page-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,9,12,0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--b1);
  padding: 0 24px; height: 48px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-left { display: flex; align-items: center; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav-mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,168,78,0.5), rgba(143,168,184,0.3));
  display: flex; align-items: center; justify-content: center;
}
.nav-name { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--t2); text-transform: uppercase; }
.nav-links { display: flex; gap: 16px; }
.nav-link { font-size: 11px; color: var(--t3); text-decoration: none; transition: color 0.15s; }
.nav-link:hover { color: var(--t1); text-decoration: none; }
.nav-cta {
  padding: 5px 14px; border-radius: 4px;
  background: rgba(201,168,78,0.12); border: 1px solid rgba(201,168,78,0.25);
  color: var(--a-source); font-size: 11px; font-weight: 500;
  text-decoration: none; transition: all 0.15s;
}
.nav-cta:hover { background: rgba(201,168,78,0.2); text-decoration: none; }

.page-container { max-width: 900px; margin: 0 auto; padding: 48px 24px 80px; }

h1 { font-size: 28px; font-weight: 600; color: var(--t1); margin-bottom: 8px; letter-spacing: -0.01em; }
h2 { font-size: 18px; font-weight: 600; color: var(--t1); margin: 36px 0 12px; }
h3 { font-size: 14px; font-weight: 600; color: var(--t2); margin: 24px 0 8px; }

.subtitle { font-size: 14px; color: var(--t3); margin-bottom: 32px; line-height: 1.6; }

p { font-size: 13px; color: var(--t2); margin-bottom: 14px; }

.card {
  padding: 20px; border-radius: 8px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--b2);
  margin-bottom: 16px;
}
.card-title { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.card-meta { font-size: 11px; color: var(--t3); margin-bottom: 8px; font-family: 'IBM Plex Mono', monospace; }
.card-body { font-size: 12px; color: var(--t2); line-height: 1.6; }

.tag {
  display: inline-block; font-size: 9px; padding: 2px 8px;
  border-radius: 3px; font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em; font-weight: 500; border: 1px solid;
}
.tag-source { background: rgba(201,168,78,0.08); color: var(--a-source); border-color: rgba(201,168,78,0.22); }
.tag-norm { background: rgba(143,168,184,0.08); color: var(--a-norm); border-color: rgba(143,168,184,0.2); }
.tag-derived { background: rgba(212,132,90,0.08); color: var(--a-derived); border-color: rgba(212,132,90,0.22); }

.meta-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.meta-table td { padding: 5px 8px; font-size: 12px; border-bottom: 1px solid var(--b1); }
.meta-table td:first-child { color: var(--t3); width: 140px; }
.meta-table td:last-child { color: var(--t2); }

.cite-box {
  padding: 12px; border-radius: 6px;
  background: rgba(255,255,255,0.015); border: 1px solid var(--b1);
  font-size: 11px; color: var(--t3); font-style: italic; line-height: 1.5;
  margin: 12px 0;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.footer {
  border-top: 1px solid var(--b1); padding: 24px;
  text-align: center; font-size: 10px; color: var(--t4);
  letter-spacing: 0.04em;
}