/* ═══════════════════════════════════════════════════════════════
   bard.fm — shared chrome for the secondary pages (about,
   release-notes, faq, blog). Derived from docs/index.html,
   which keeps its own inline copy; the two have since diverged
   deliberately (type scale is larger here). Page-specific styling
   stays in each page's own <style> block.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('PressStart2P-Regular.woff2') format('woff2');
}

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

:root {
  --bg-deep: #0e0c09;
  --bg-primary: #1a1814;
  --text-primary: #f5f0e8;
  --text-secondary: #b0a89c;
  --text-muted: #8a8278;
  --accent: #ffb057;
  --accent-dim: rgba(255, 176, 87, 0.08);
  --border: #3a3530;
  --font: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* The "~/faq" half of the masthead prompt. Sized against the 1.4rem pixel
     brand beside it — Press Start 2P renders visually larger than its point
     size, so a mono face near 1.3rem sits level with it. */
  --page-title-size: clamp(1.05rem, 2.6vw, 1.3rem);

  /* Space between the brand and the path in the prompt. */
  --prompt-gap: 14px;

  /* Optical correction for the brand in the prompt — see .masthead .brand.
     Press Start 2P declares capHeight = 1.000em and descender = 0, so its
     glyphs fill the whole em box above the baseline, where JetBrains Mono's
     caps reach only ~0.73em. Baseline-aligning the two is metrically correct
     but reads as misaligned, because one sits far taller off the same line.
     This nudges the brand down so the two cap bands centre on each other.
     Positive = down. Set to 0 for true baseline alignment. */
  --prompt-brand-shift: 0.16em;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background:
    radial-gradient(
      ellipse 90% 70% at 50% 38%,
      rgba(55, 40, 20, 0.7) 0%,
      rgba(35, 25, 12, 0.4) 50%,
      transparent 75%
    ),
    var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CRT scanlines */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.05) 2px,
    rgba(0, 0, 0, 0.05) 4px
  );
}

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

/* ── Masthead (small brand + back link) ─────────── */
.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 48px 0 16px;
}

/* The prompt: brand (shell name) + current path, sharing one baseline.
   min-width:0 lets it shrink before the nav wraps on narrow windows. */
.masthead-prompt {
  display: flex;
  align-items: baseline;
  gap: var(--prompt-gap);
  min-width: 0;
}

/* Press Start 2P's metrics are unlike a text face: unitsPerEm 1000 with
   capHeight 1000 and descender 0 — every glyph sits between the baseline and
   the top of the em box. A normal face puts caps at ~0.73em and hangs
   descenders below. So `align-items: baseline` does align the two baselines
   exactly, and still looks wrong, because the brand towers off that shared
   line. --prompt-brand-shift is the optical correction. */
.masthead .brand {
  font-family: 'Press Start 2P', cursive;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  line-height: 1;
  transform: translateY(var(--prompt-brand-shift));
  text-decoration: none;
  text-shadow:
    0 0 20px rgba(255, 176, 87, 0.35),
    0 0 60px rgba(255, 176, 87, 0.1);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

/* The "directory" half of the prompt. Deliberately the page's mono face, not
   the brand's pixel font — the two faces are what make it read as a prompt
   rather than as one wordmark. */
.prompt-path {
  font-family: var(--font);
  font-size: var(--page-title-size);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255, 176, 87, 0.15);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-path::after {
  content: '_';
  margin-left: 0.08em;
  animation: prompt-cursor-blink 1.1s step-end infinite;
}

@keyframes prompt-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* A blinking element is a vestibular/attention trigger; hold it solid when the
   reader has asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .prompt-path::after { animation: none; }
}

.masthead-links {
  font-size: 1.0rem;
  color: var(--text-muted);
}

.masthead-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.masthead-links a:hover { color: var(--accent); }
.masthead-links a[aria-current="page"] { color: var(--accent); }

/* ── Divider / section furniture ────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border) 20%,
    var(--border) 80%,
    transparent
  );
  margin: 16px 0;
}

.section-path {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255, 176, 87, 0.15);
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.section-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.8;
}

/* ── Buttons ────────────────────────────────────── */
.cta-btn {
  display: inline-block;
  padding: 10px 28px;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bg-deep);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.cta-btn:hover {
  background: #ffc17a;
  box-shadow: 0 0 20px rgba(255, 176, 87, 0.3);
}

/* ── Subscribe form ─────────────────────────────── */
.subscribe-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.subscribe-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.subscribe-input {
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 10px 14px;
  width: 280px;
  max-width: 100%;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.subscribe-input::placeholder { color: var(--text-muted); }

.subscribe-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── Footer ─────────────────────────────────────── */
footer {
  padding: 48px 0 32px;
  text-align: center;
}

.footer-brand {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  text-shadow: 0 0 16px rgba(255, 176, 87, 0.2);
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .page { padding: 0 16px; }
  .subscribe-form { flex-direction: column; align-items: stretch; }
  .subscribe-input { width: 100%; }
}