/* Content pages (guides, game pages, about, contact).
   Loaded *after* styles.css, which already carries the palette, .shell, .nav
   and .footer — this file only adds what a page of prose needs.

   Why prose pages exist at all: the site was four pages and 364 words of real
   text, most of it legal boilerplate, and Google reads a games portal as an
   empty shell because the games themselves are canvas. Everything here serves
   reading: one column, measured line length, headings that hold a position in
   the hierarchy without shouting. */

.doc {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 26px 0 20px;
  font-size: 17px;
  line-height: 1.72;
  color: var(--soy-100);
}

/* Wider pages (game pages with cards and screenshot grids) keep the shell width
   but still read as one column where the text lives. */
.docWide { width: min(1180px, calc(100% - 48px)); }
.docWide .prose { max-width: 760px; }

/* Same measure as .doc, so the title sits over the first line of body text
   instead of floating out to the left of it. */
.docHead {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto 8px;
  padding: 46px 0 20px;
  border-bottom: 1px solid rgba(230, 221, 180, 0.12);
}

.docHead.docWide { width: min(1180px, calc(100% - 48px)); }

.crumb {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--soy-400);
}

.crumb:hover { color: var(--soy-100); }
.crumb a { color: inherit; }
.crumb a:hover { color: var(--soy-50); }

.docHead h1 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.5px;
  color: var(--soy-50);
}

.docHead .lede {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.65;
  color: var(--soy-300);
}

.docMeta {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--soy-500);
}

.doc h2 {
  margin: 44px 0 12px;
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: -0.3px;
  color: var(--soy-50);
}

.doc h3 {
  margin: 30px 0 8px;
  font-size: 18px;
  color: var(--soy-50);
}

.doc p { margin: 0 0 18px; }

.doc a {
  color: #a9c86e;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(169, 200, 110, 0.42);
}

.doc a:hover { text-decoration-color: #a9c86e; }

.doc ul, .doc ol { margin: 0 0 18px; padding-left: 22px; }
.doc li { margin: 7px 0; }
.doc li > ul, .doc li > ol { margin: 7px 0 0; }

.doc strong, .doc b { color: var(--soy-50); font-weight: 700; }

.doc hr {
  border: 0;
  border-top: 1px solid rgba(230, 221, 180, 0.12);
  margin: 40px 0;
}

.doc blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid rgba(169, 200, 110, 0.5);
  color: var(--soy-200);
}

.doc code {
  background: rgba(230, 221, 180, 0.1);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Tables carry real information on the guide pages (costs, tiers, what a level
   actually buys). They must stay readable on a phone, so they scroll inside
   their own box rather than pushing the page sideways. */
.tableWrap {
  overflow-x: auto;
  margin: 0 0 22px;
  border: 1px solid rgba(230, 221, 180, 0.12);
  border-radius: 12px;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  min-width: 420px;
}

.doc th, .doc td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(230, 221, 180, 0.1);
  vertical-align: top;
}

.doc th {
  color: var(--soy-50);
  font-weight: 700;
  background: rgba(230, 221, 180, 0.04);
  white-space: nowrap;
}

.doc tbody tr:last-child td { border-bottom: 0; }

/* A pulled-out note: the one thing a player would otherwise learn the
   expensive way. Used sparingly — a page of highlighted boxes highlights
   nothing. */
.note {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(169, 200, 110, 0.28);
  background: rgba(169, 200, 110, 0.07);
  color: var(--soy-100);
}

.note p:last-child { margin: 0; }
.note strong { color: #cfe39a; }

.doc figure { margin: 0 0 24px; }

.doc figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(230, 221, 180, 0.12);
}

.doc figcaption {
  margin-top: 9px;
  font-size: 13px;
  color: var(--soy-400);
}

/* Inline call to action at the end of a guide or game page. */
.docCta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 6px 0 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--soy-50);
  color: #23221a;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
}

.docCta:hover { background: #fff; text-decoration: none; }
.doc .docCta { text-decoration: none; }

/* Card grid used for "other guides" / "other games" blocks. These links are
   why the pages do not sit isolated from each other. */
.cardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 22px 0 8px;
}

.cardLink {
  display: block;
  padding: 18px 20px;
  border: 1px solid rgba(230, 221, 180, 0.14);
  border-radius: 14px;
  background: rgba(48, 46, 36, 0.5);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}

.cardLink:hover {
  border-color: rgba(230, 221, 180, 0.34);
  transform: translateY(-2px);
  text-decoration: none;
}

.cardLink strong {
  display: block;
  color: var(--soy-50);
  font-size: 16px;
  margin-bottom: 5px;
}

.cardLink span {
  display: block;
  color: var(--soy-300);
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .doc {
    width: min(100% - 28px, 760px);
    padding-top: 34px;
    font-size: 16px;
  }
  .docWide { width: min(100% - 28px, 1180px); }
  .docHead { padding-top: 28px; margin-bottom: 26px; }
  .doc h2 { margin-top: 34px; font-size: 22px; }
}

/* ---------- 2026 portal system ----------
   Content pages used to keep the old dark portfolio palette after the portal
   moved to cotton/field/harvest. These overrides deliberately make every
   guide, game and trust page feel like the same publication as the homepage. */
body > main > .nav {
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 76px;
  color: var(--cream-100);
}

body > main > .nav::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background: rgba(27, 38, 23, .97);
  border-bottom: 3px dashed var(--gold-500);
  box-shadow: 0 10px 30px rgba(17, 26, 14, .13);
}

body > main > .nav .navLinks > a {
  padding: 7px 0;
  color: var(--cream-200);
  border-bottom: 2px solid transparent;
}

body > main > .nav .navLinks > a:hover {
  color: #fff;
  border-bottom-color: var(--gold-500);
}

body > main > .nav .navCta {
  padding: 11px 19px;
  color: var(--field-900);
  border-bottom: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

.doc,
.docHead { color: var(--ink-700); }

.docHead {
  margin-bottom: 8px;
  border-bottom-color: var(--cream-300);
}

.crumb { color: var(--ink-500); }
.crumb:hover,
.crumb a:hover { color: var(--field-700); }
.docHead h1 { color: var(--field-900); }
.docHead .lede { color: var(--ink-700); }

.docMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  color: var(--ink-500);
}

.docMeta a {
  color: var(--field-700);
  font-weight: 800;
  text-decoration: none;
}

.docMeta a:hover { text-decoration: underline; }

.docMeta span,
.docMeta time {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.docMeta span::before,
.docMeta time::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-500);
}

.doc h2,
.doc h3,
.doc strong,
.doc b { color: var(--field-900); }

.doc a {
  color: var(--field-600);
  text-decoration-color: rgba(70, 96, 58, .35);
}

.doc a:hover { text-decoration-color: var(--field-600); }

.doc hr { border-top-color: var(--cream-300); }

.doc blockquote {
  border-left-color: var(--gold-500);
  color: var(--ink-700);
}

.doc code { background: var(--cream-100); }

.tableWrap {
  border-color: var(--cream-300);
  background: rgba(255, 249, 237, .76);
}

.doc th,
.doc td { border-bottom-color: var(--cream-300); }
.doc th { color: var(--field-900); background: var(--cream-100); }

.note {
  border-color: rgba(238, 176, 30, .42);
  background: rgba(238, 176, 30, .09);
  color: var(--ink-700);
}

.note strong { color: var(--field-800); }
.doc figure img { border-color: var(--cream-300); box-shadow: 0 14px 34px rgba(27, 38, 23, .12); }
.doc figcaption { color: var(--ink-500); }

.docCta {
  background: var(--gold-500);
  color: var(--field-900);
  box-shadow: 0 5px 0 var(--gold-600);
}

.docCta:hover { background: var(--gold-300); }

.cardLink {
  border-color: var(--cream-300);
  background: var(--cream-100);
  box-shadow: 0 8px 20px rgba(27, 38, 23, .07);
}

.cardLink:hover {
  border-color: var(--gold-500);
  box-shadow: 0 14px 28px rgba(27, 38, 23, .13);
}

.cardLink strong { color: var(--field-900); }
.cardLink span { color: var(--ink-700); }

@media (max-width: 640px) {
  body > main > .nav { align-items: center; }
  body > main > .nav .navLinks {
    display: flex;
    order: 3;
    width: 100%;
    gap: 10px 16px;
    padding-bottom: 3px;
  }
  body > main > .nav .navLinks > a { font-size: 12.5px; }
  body > main > .nav .navCta { display: none; }
  .docMeta { align-items: flex-start; flex-direction: column; gap: 3px; }
  .docMeta span::before,
  .docMeta time::before { display: none; }
}