/*
 * Rhizome public theme — the promotional, outward-facing pages
 * (landing page, how-to-connect, and future lore pages).
 *
 * Deliberately richer than the terminal theme (rhizome.css) used by the
 * authenticated tools: serif display type, a warmer dark palette, and real
 * page layout — while keeping the green accent that ties it to the game.
 * Pages adopt it by extending templates/website/_public.html.
 */

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

:root {
  --bg: #0b0f0d;
  --bg-raised: #10171310;
  --panel: #101713;
  --line: #1f2d25;
  --ink: #e8f0ea;
  --ink-soft: #a9bcb0;
  --ink-faint: #71857a;
  --accent: #3fd97f;
  --accent-dim: #2a8f55;
  --accent-wash: rgba(63, 217, 127, 0.08);
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
}

/* #page wraps everything that in-site (PJAX) navigation swaps out — see
 * static/website/js/site.js. It carries the column layout (rather than
 * body) so the footer's margin-top:auto still pins it to the bottom. */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--accent); }

/* ── Ambient art background ──────────────────────────────────────────
 * Every page except the landing splash washes the splash art behind the
 * content at low opacity. Painted on a fixed pseudo-element rather than
 * a body background-image so the opacity applies to the art alone. Set
 * via the art-bg body class in _base.html/_public.html; landing.html
 * paints the same art full-strength itself. */
body.art-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('../img/rhizome_artsplash.jpg') center / cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 400; }

/* ── Site navigation ─────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
/* A framed page (the webclient's Help pane) shows only its own content: no
   second mute button, and no way to load the site, or a second game client,
   inside the pane. The class is set in <head> by _framed.html. */
.framed .site-nav { display: none; }
.site-nav .brand {
  margin-right: auto;
}
/* Ambience (background audio) toggle — sits left of the brand wordmark.
 * The SVG carries both states: waves show when playing, the slash when
 * muted, switched by the .muted class from _ambience.html's script. */
.site-nav .ambience-btn {
  background: none;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  cursor: pointer;
}
.site-nav .ambience-btn:hover { color: var(--accent); }
.site-nav .ambience-btn svg { display: block; }
.site-nav .ambience-btn .slash { display: none; }
.site-nav .ambience-btn.muted .wave { display: none; }
.site-nav .ambience-btn.muted .slash { display: block; }
.site-nav .brand img {
  display: block;
  height: 1.9rem;
  width: auto;
}
.site-nav .nav-link {
  color: var(--ink-soft);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav .nav-link:hover { color: var(--accent); }
.site-nav .nav-cta {
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.45rem 1rem;
}
.site-nav .nav-cta:hover { background: var(--accent-wash); }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  max-width: 60rem;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  text-align: center;
}
.hero .overline {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.6rem;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin-bottom: 1.4rem;
}
.hero .hero-wordmark {
  display: block;
  width: min(28rem, 82%);
  height: auto;
  margin: 0 auto;
}
.hero .lede {
  max-width: 42rem;
  margin: 0 auto 2.4rem;
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.btn {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
}
.btn-solid { background: var(--accent); color: #06130b; border: 1px solid var(--accent); }
.btn-solid:hover { background: #5ae695; border-color: #5ae695; }
.btn-ghost { color: var(--accent); border: 1px solid var(--accent-dim); }
.btn-ghost:hover { border-color: var(--accent); }
.status-line {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.status-line .dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5rem;
  vertical-align: 1px;
}

/* ── Sections & feature grid ─────────────────────────────────────── */
.section {
  max-width: 80rem;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
.section + .section { border-top: 1px solid var(--line); }
.section-title {
  font-size: 1.7rem;
  margin-bottom: 0.6rem;
}
.section-sub {
  color: var(--ink-faint);
  max-width: 44rem;
  margin-bottom: 2.4rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1.2rem;
}
.feature {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 1.6rem 1.5rem;
}
.feature .kicker {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.feature h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.feature p { font-size: 0.92rem; color: var(--ink-soft); }

/* ── Prose (lore pages) ──────────────────────────────────────────── */
.prose {
  /* #page is a column flexbox, and auto margins on a flex item absorb the
     free cross-axis space -- without an explicit width the column would
     shrink-wrap short content (a title-only archive list) instead of
     filling the 44rem reading measure. */
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 2rem;
}
.prose h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.prose .tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  margin-bottom: 2rem;
}
.prose h2 {
  font-size: 1.6rem;
  margin: 3rem 0 0.4rem;
}
.prose p { margin-bottom: 1.1rem; }
.prose ol, .prose ul { margin: 0 0 1.1rem 1.4rem; }
.prose li { margin-bottom: 0.4rem; }
.pitch {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 1.3rem 1.5rem;
  margin: 1.6rem 0;
}
.pitch .pitch-lead {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.pitch ul { margin: 0 0 0 1.2rem; }
.pitch li { font-size: 0.95rem; margin-bottom: 0.35rem; }
.kv {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 1.3rem 1.5rem;
  margin: 1.2rem 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  color: var(--ink);
  overflow-x: auto;
}
.kv .k { color: var(--ink-faint); }

/* ── Help browser ────────────────────────────────────────────────── */
.help-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 44rem);
  gap: 3rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 3.5rem 2rem;
  align-items: start;
}
.help-sidebar {
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  padding-right: 1.4rem;
  /* Theme the sidebar's own scrollbar; the browser default is a light
     track that stands out against the dark page. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.help-sidebar-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.help-sidebar-title a { color: var(--ink); text-decoration: none; }
.help-sidebar-title a:hover { color: var(--accent); }
.help-sidebar-empty { font-size: 0.85rem; color: var(--ink-faint); }
.help-filter {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.help-filter:focus { outline: none; border-color: var(--accent); }
.help-cat { margin-bottom: 0.5rem; }
.help-cat summary {
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.3rem 0;
}
.help-cat summary:hover { color: var(--accent); }
.help-cat ul {
  list-style: none;
  margin: 0.2rem 0 0.6rem;
  padding-left: 0.9rem;
}
.help-cat li { margin-bottom: 0.25rem; }
.help-cat a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.help-cat a:hover { color: var(--accent); }
.help-cat a.active { color: var(--accent); }
.help-main h1 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.help-main .tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  margin-bottom: 2rem;
}
.help-main p { margin-bottom: 1.1rem; }
.help-text { margin: 1.6rem 0; }
/* Small tracked label: help section headings and the archive's year labels. */
.help-text h2, .blog-year {
  font-size: 0.82rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.4rem 0 0.8rem;
}
.help-text a { text-decoration: none; }
.help-text a:hover { text-decoration: underline; }
.help-text strong, .blog-body strong { color: var(--ink); font-weight: 600; }
.help-text pre, .blog-body pre {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 1.3rem 1.5rem;
  margin: 0 0 1.1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
  overflow-x: auto;
}
/* A fenced code/transcript block: darker than the ASCII-table pre above, with
   a faint accent rail so it reads as a terminal capture rather than a diagram. */
.help-text pre.help-code {
  background: #070b09;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-dim);
  color: var(--ink-soft);
}
/* Player input lines within a transcript -- brighter and bolder than output. */
.help-text .help-code .input {
  color: var(--accent);
  font-weight: 600;
}
/* Inline literal the player types, e.g. `craft knife`. */
.help-text code, .blog-body code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.05em 0.35em;
  color: var(--ink);
}
.help-text pre.help-code code, .blog-body pre code { background: none; border: 0; padding: 0; }

/* ── Dev log ─────────────────────────────────────────────────────── */
/* Archive: year labels over bare date + title rows, no excerpts. */
/* The label rule itself is shared with .help-text h2 above; this selector
   carries the .prose prefix so it outranks .prose h2's heading size. */
.prose .blog-year {
  font-size: 0.82rem;
  margin: 2.4rem 0 0.8rem;
  color: var(--ink-faint);
}
.prose ul.blog-list { list-style: none; margin: 0; }
.blog-list li {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  margin-bottom: 0.45rem;
}
.blog-list time {
  flex: 0 0 4.2rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.blog-list a { color: var(--ink); text-decoration: none; }
.blog-list a:hover { color: var(--accent); }
.blog-empty, .blog-feed-link { color: var(--ink-faint); }
.blog-feed-link {
  margin-top: 2.4rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-feed-link a { color: var(--ink-faint); text-decoration: none; }
.blog-feed-link a:hover { color: var(--accent); }

/* Shown only to developers viewing a draft at its real URL. */
.blog-draft-badge {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  padding: 0.2rem 0.6rem;
}

/* Rendered Markdown body. Also the bloggen editor's live preview, which is
   not inside .prose, so the paragraph and list spacing is repeated here. */
.blog-body p { line-height: 1.65; margin-bottom: 1.1rem; }
.blog-body ol, .blog-body ul { margin: 0 0 1.1rem 1.4rem; }
.blog-body li { margin-bottom: 0.4rem; }
.blog-body h2 { font-size: 1.4rem; margin: 2.4rem 0 0.6rem; }
.blog-body h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }
.blog-body a { color: var(--accent); text-decoration: underline; }
.blog-body hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.blog-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
  margin: 0 0 1.1rem;
}
.blog-body th, .blog-body td {
  border-bottom: 1px solid var(--line);
  padding: 0.4rem 0.6rem;
  text-align: left;
}
.blog-body th { color: var(--ink); font-weight: 600; }
.blog-body blockquote {
  border-left: 2px solid var(--accent-dim);
  padding-left: 1rem;
  margin: 0 0 1.1rem;
  color: var(--ink-faint);
}
/* Figures: the charts are light PNGs (#fcfcfb background), so the link gets
   a matching light mat with a hairline edge -- chart and padding read as one
   card rather than a bare white rectangle on the dark page. The anchor opens
   the full-size image in a new tab (its target keeps site.js PJAX off it). */
.blog-figure { margin: 1.8rem 0; }
.blog-figure a {
  display: block;
  background: #fcfcfb;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.6rem;
}
.blog-figure img { display: block; width: 100%; height: auto; }
.blog-figure figcaption {
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
  color: var(--ink-faint);
  margin-top: 0.6rem;
}

/* Discord link and the older / all / newer pager under the post. */
.blog-discuss { margin-top: 2.5rem; }
.blog-pager {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.blog-pager a { text-decoration: none; }
.blog-pager a:hover { text-decoration: underline; }
.blog-pager-older, .blog-pager-newer { flex: 1 1 0; }
.blog-pager-newer { text-align: right; }
.blog-pager-all {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 2rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.site-footer a { color: var(--ink-faint); }
.site-footer a:hover { color: var(--accent); }

/* ── Landing splash ──────────────────────────────────────────────────
 * Full-viewport art page at the site root (landing.html). The art fades
 * in once loaded; the wordmark follows a few seconds later. The whole
 * page is one anchor — any click (or Enter) proceeds to the index. */
.landing-link {
  position: fixed;
  inset: 0;
  display: block;
  cursor: pointer;
}
.landing-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.landing-wordmark {
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(60vw, 34rem);
  height: auto;
  opacity: 0;
  /* Starts fading 4s after the art does. */
  transition: opacity 1.8s ease 4s;
}
body.landing-loaded .landing-art,
body.landing-loaded .landing-wordmark { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .landing-art, .landing-wordmark { transition: none; }
}

@media (max-width: 48rem) {
  .help-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .help-sidebar {
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0 0 1.2rem;
  }
}

@media (max-width: 40rem) {
  .hero { padding: 3.5rem 1.2rem 2.5rem; }
  .section, .prose, .help-layout { padding: 2.2rem 1.2rem; }
  .site-nav { padding: 1rem 1.2rem; gap: 1rem; }
  .blog-figure a { padding: 0.35rem; }
}