/* Shared styling for the static content + legal pages (landing guide, modes,
   guides, FAQ, about, privacy, terms). Reuses the Arrrgue treasure-map tokens
   from style.css but adds long-form prose, shared header/footer, and card-grid
   rules. Header/footer chrome is stamped by scripts/build-pages.js. */

/* --- shared site header / footer (content pages) ------------------------- */
.site-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: var(--rule);
}
.site-wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.site-wordmark i { color: var(--red); font-style: normal; }
.site-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--red); }
.site-play {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-2);
  background: var(--red);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
  padding: 7px 14px;
  text-decoration: none;
}
.site-play:active { transform: translate(3px, 3px); box-shadow: none; }

.site-footer {
  max-width: 760px;
  margin: 60px auto 0;
  padding: 22px 20px 60px;
  border-top: var(--rule);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: center; }
.footer-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--red-deep);
  text-decoration: none;
}
.footer-nav a:hover { text-decoration: underline; }
.footer-nav .dot { color: var(--ink-soft); padding: 0 4px; }
.footer-fine { color: var(--ink-soft); font-size: 13px; margin-top: 14px; }

/* Content pages share the .legal container but sit tighter under the header. */
.content-page { padding-top: 22px; }

/* --- modes index grid ---------------------------------------------------- */
.mode-grid { display: grid; gap: 12px; margin: 22px 0; }
.mode-card {
  display: grid;
  gap: 3px;
  background: var(--paper-2);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
}
.mode-card:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px, -1px); }
.mode-no {
  font-family: var(--font-serif, serif);
  font-style: italic;
  color: var(--red);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.mode-name { font-family: var(--font-display); font-size: 19px; }
.mode-tag {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--ink-soft);
}
.mode-line { font-size: 15px; line-height: 1.5; color: var(--ink); margin-top: 4px; }

/* --- guides index list --------------------------------------------------- */
.guide-list { display: grid; gap: 12px; margin: 22px 0; }
.guide-card {
  display: grid;
  gap: 5px;
  background: var(--paper-2);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
}
.guide-card:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px, -1px); }
.guide-title { font-family: var(--font-display); font-size: 18px; line-height: 1.15; }
.guide-blurb { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { margin: 20px 0; }
.faq-item { padding: 16px 0; border-bottom: var(--rule); }
.faq-q { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; border: 0; padding: 0; }

/* --- worked-example / tip callouts used across mode + guide pages --------- */
.callout {
  background: var(--well);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  margin: 20px 0;
}
.callout .callout-label {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: var(--red);
  display: block;
  margin-bottom: 6px;
}
.mode-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 6px 0 20px;
  font-size: 14px;
  color: var(--ink-soft);
}
.mode-meta b { color: var(--ink); font-weight: 700; }

/* --- #landing-content: the crawlable prose under the SPA landing screen --- */
#landing-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 8px 16px 90px;
}
#landing-content h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 30px);
  margin: 40px 0 8px;
}
#landing-content h3 { font-family: var(--font-display); font-size: 17px; margin: 22px 0 6px; }
#landing-content p, #landing-content li { font-size: 16px; line-height: 1.6; color: var(--ink); }
#landing-content ul, #landing-content ol { padding-left: 22px; }
#landing-content li { margin: 6px 0; }
#landing-content .lc-modes { display: grid; gap: 8px; margin: 14px 0; }
#landing-content .lc-mode {
  background: var(--paper-2);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
  padding: 10px 14px;
}
#landing-content .lc-mode b { font-family: var(--font-display); font-weight: 400; }
#landing-content .lc-foot {
  margin-top: 34px;
  padding-top: 18px;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  align-items: center;
}
#landing-content .lc-foot a { color: var(--red-deep); text-decoration: none; font-weight: 500; }
#landing-content .lc-foot a:hover { text-decoration: underline; }
#landing-content .lc-foot .dot { color: var(--ink-soft); padding: 0 4px; }

/* --- Shared styling for the static legal pages (privacy, terms). Reuses the
   Arrrgue treasure-map tokens from style.css but adds long-form prose rules. */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}
.legal .backlink {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: var(--rule);
  padding: 6px 12px;
  box-shadow: var(--shadow-sm);
  background: var(--paper-2);
  margin-bottom: 24px;
}
.legal .wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
}
.legal .wordmark i { color: var(--red); font-style: normal; }
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.02;
  margin: 10px 0 4px;
}
.legal .stamp-sub {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 19px;
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: var(--rule);
}
.legal p, .legal li { font-size: 16px; line-height: 1.6; color: var(--ink); }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal strong { font-weight: 700; }
.legal a { color: var(--red-deep); }
.legal .card {
  background: var(--paper-2);
  border: var(--rule);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  margin: 22px 0;
}
.legal .fineprint { color: var(--ink-soft); font-size: 13px; margin-top: 40px; }