/* Narrow Highway — site shell (unified header + footer).
 * Designed to sit above the chrome on any page palette (dark engine,
 * cream canon, warm channel). Frames whatever content is inside.
 * Apply by including this stylesheet and pasting the .nh-shell-top
 * and .nh-shell-bot blocks from the homepage template.
 */

/* ── Header ───────────────────────────────────────────────────── */
.nh-shell-top {
  background: #0c0a16;
  border-bottom: 1px solid #2a2438;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  z-index: 10;
}
.nh-shell-bar {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.nh-shell-brand {
  text-decoration: none;
  color: #f4ecd5;
  display: flex;
  flex-direction: column;
  line-height: 1.18;
}
.nh-shell-wordmark {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  color: #f4ecd5;
}
.nh-shell-tag {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  color: #b8b0c2;
  margin-top: 1px;
}
.nh-shell-brand:hover .nh-shell-wordmark { color: #e8c896; }

.nh-shell-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
  align-items: center;
}
.nh-shell-nav a {
  font-size: 0.93rem;
  color: #cfc8dc;
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 4px 0;
}
.nh-shell-nav a:hover { color: #e8c896; }
.nh-shell-nav a.here { color: #c9a87c; font-style: italic; }

.nh-shell-support {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a87c;
  text-decoration: none;
  border: 1px solid #c9a87c;
  border-radius: 4px;
  padding: 5px 11px;
  white-space: nowrap;
}
.nh-shell-support:hover {
  background: #c9a87c;
  color: #0c0a16;
}

@media (max-width: 760px) {
  .nh-shell-bar { gap: 10px; padding: 10px 14px; }
  .nh-shell-nav { gap: 14px; margin-left: 0; width: 100%; order: 3; padding-top: 4px; border-top: 1px solid #2a2438; }
  .nh-shell-support { margin-left: auto; }
}

/* ── Footer ───────────────────────────────────────────────────── */
.nh-shell-bot {
  background: #0c0a16;
  border-top: 1px solid #2a2438;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin-top: 48px;
  padding: 38px 22px 26px;
  color: #cfc8dc;
}
.nh-shell-bot-inner { max-width: 1280px; margin: 0 auto; }

.nh-shell-bot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-bottom: 28px;
}
@media (max-width: 760px) {
  .nh-shell-bot-cols { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
.nh-shell-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c9a87c;
  margin: 0 0 10px;
  font-weight: 600;
}
.nh-shell-col a {
  display: block;
  padding: 4px 0;
  color: #cfc8dc;
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.4;
}
.nh-shell-col a:hover { color: #f4ecd5; }
.nh-shell-col a small {
  display: block;
  font-size: 0.74rem;
  color: #7b7488;
  font-style: italic;
  margin-top: 1px;
}

.nh-shell-colophon {
  border-top: 1px solid #2a2438;
  padding-top: 18px;
  text-align: center;
  font-family: 'Crimson Pro', Georgia, serif;
  color: #9b94ac;
  font-size: 0.84rem;
  line-height: 1.65;
}
.nh-shell-colophon p { margin: 4px 0; }
.nh-shell-colophon em { color: #c9a87c; font-style: italic; }
.nh-shell-colophon a { color: #b8b0c2; text-decoration: none; border-bottom: 1px dashed #5a5266; }
.nh-shell-colophon a:hover { color: #f4ecd5; }

/* When the shell sits above a cream-content page (canon doorways, about,
 * channels, pilots), reset any body padding so the shell hugs the top. */
body.nh-shell-cream { background: #fafaf6; }
body.nh-shell-cream .nh-shell-top + * { margin-top: 0; }