/* MacroCodex brand assets and palette from codexfactor/cloudflare-pages. */
@font-face {
  font-family: Inter;
  src: url('/static/Inter-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --bg: #f4f7fb;
  --surface: #fff;
  --text: #162033;
  --text-soft: #5f6c82;
  --brand: #2f67f6;
  --brand-deep: #173a8e;
  --border: #dce3ee;
  font-family: Inter, 'Avenir Next', 'Segoe UI', sans-serif;
  accent-color: var(--brand);
  color: var(--text);
  background: var(--bg);
}
body {
  color: var(--text);
  background: transparent;
  min-height: 100vh;
  box-sizing: border-box;
}
a { color: var(--brand-deep); }
header#nav { border-color: var(--border); padding: 1.4rem 0; }
header#nav #logo {
  background: transparent;
  padding: 0;
  margin-right: .7rem;
  flex: 0 0 54px;
  width: 54px;
  height: 24px;
}
#logo img { display: block; width: 54px; height: 24px; }
header#nav .wordmark { color: var(--text); font-size: 16px; font-weight: 800; letter-spacing: .015em; }
.wordmark span { color: var(--text-soft); font-size: 12px; font-weight: 400; letter-spacing: 0; }
header#nav nav.links { gap: 1rem; }
header#nav a, header#nav .inline button { color: var(--text-soft); }
header#nav a[aria-current='page'], header#nav a:hover { color: var(--brand); }
.intro .eyebrow { color: var(--brand); }
.intro h1 { color: var(--text); font-size: 28px; letter-spacing: -.8px; }
.intro p, .form-page > p { color: var(--text-soft); }
.categories a { color: var(--text-soft); }
.categories a[aria-current='page'] { color: var(--brand-deep); background: #eaf0ff; border-color: #cddcff; border-radius: 6px; }
.search input, .search button { border-color: var(--border); background: var(--surface); border-radius: 5px; }
.search button { color: var(--brand-deep); }
.feed-label { color: var(--text-soft); border-color: var(--border); }
.feed-label span:last-child { color: #728199; }
.posts { background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; }
.post { padding: 1.1rem .8rem; border-color: #eaf0f7; }
.post:last-child { border-bottom: 0; }
.story-details h2 a { color: var(--text); }
.story-details h2 a:hover { color: var(--brand); }
.meta, .meta a, .score, .post-vote, .comment-vote { color: var(--text-soft); }
.tag { background: #f2f5fb; color: #536b91; border-color: #e1e8f3; }
.comment-count { border-color: var(--border); color: var(--text-soft); }
.upvoted, .vote-form button:hover, .upvote-link:hover { color: var(--brand); }
.empty h2 { color: var(--text); }
.empty p { color: var(--text-soft); }
.form-page { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.form-page input, .form-page textarea, .form-page select, .comment-form textarea, .reply textarea { color: var(--text); border-color: #cbd6e5; background: var(--surface); border-radius: 5px; }
.form-page button, .comment-form button, .reply button { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; border-radius: 5px; }
.form-page button:hover, .comment-form button:hover, .reply button:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.hint, .optional, .upload { color: var(--text-soft); }
.post-detail { border-color: var(--border); }
.post-detail h1 { color: var(--text); }
.login-prompt { background: #eaf0ff; border-radius: 6px; color: var(--text-soft); }
.comment:target { background: #eaf0ff; }
.photos img { background: var(--surface); border-color: var(--border); }
footer { border-color: var(--border); color: var(--text-soft); }
:focus-visible { outline-color: var(--brand); }
@media (max-width: 700px) {
  header#nav { flex-wrap: wrap; gap: .6rem; padding: 1rem 0; }
  header#nav #logo { flex-basis: 42px; width: 42px; height: 19px; margin-right: 0; }
  #logo img { width: 42px; height: 19px; }
  header#nav .navholder { overflow: visible; width: auto; flex: 1; min-width: 0; }
  header#nav nav.links { flex-wrap: wrap; gap: .55rem .8rem; white-space: normal; }
  header#nav .wordmark { font-size: 13px; }
  .intro h1 { font-size: 24px; }
  .form-page { padding: 1rem; }
  .post { padding: .9rem .45rem; }
}