/* Shared styles for Worldbound's PUBLIC pages (landing + campaign
   detail). Deliberately separate from style.css, which is 1,500 lines
   of signed-in app chrome a visitor never needs. */
:root {
  --bg: #0e1013;
  --panel: #16191e;
  --panel-2: #1c2027;
  --ink: #edeff2;
  --ink-soft: #aeb6c0;
  --ink-faint: #7c8590;
  --border: #262b33;
  --gold: #f2ca50;
  --gold-dim: rgba(242, 202, 80, .12);
  --hp: #e0556b;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }

/* ---- nav ---- */
nav {
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px);
  background: rgba(14, 16, 19, .82); border-bottom: 1px solid var(--border);
}
.nav-in { display: flex; align-items: center; gap: 16px; height: 62px; }
.brand {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900;
  font-size: 22px; letter-spacing: -.01em; color: var(--gold); text-decoration: none;
}
.nav-sp { flex: 1; }
.nav-link { color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-link:hover { color: var(--ink); }
.btn {
  display: inline-block; border-radius: 9px; padding: 10px 18px; font-weight: 600;
  font-size: 15px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--gold); color: #17140a; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--border); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--panel-2); }

/* ---- hero ---- */
header.hero { padding: 76px 0 56px; }
.eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 18px;
}
h1 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 900;
  font-size: clamp(38px, 6.4vw, 66px); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 22px; max-width: 15ch; text-wrap: balance;
}
h1 em { font-style: italic; color: var(--gold); }
.lede { font-size: 19.5px; color: var(--ink-soft); max-width: 60ch; margin: 0 0 30px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-note { color: var(--ink-faint); font-size: 14px; }

/* ---- section furniture ---- */
section { padding: 60px 0; border-top: 1px solid var(--border); }
h2 {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700;
  font-size: clamp(27px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -.015em;
  margin: 0 0 14px; text-wrap: balance;
}
.sec-lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 30px; }

/* ---- the proof: a real engine transcript ---- */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
/* Grid children default to min-content width, and the transcript's nowrap
   lines are wide — without this the COLUMN grows and the whole page scrolls
   sideways instead of the transcript scrolling inside its own box. */
.proof > * { min-width: 0; }
.transcript {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; font-family: "JetBrains Mono", monospace; font-size: 13.5px;
  line-height: 1.75; overflow-x: auto;
}
.t-round { color: var(--gold); }
.t-line { color: var(--ink-soft); white-space: nowrap; }
.t-hit { color: #63c295; font-weight: 600; }
.t-miss { color: var(--ink-faint); }
.t-dmg { color: var(--hp); font-weight: 600; }
.t-cap { margin-top: 14px; color: var(--ink-faint); font-size: 13px; font-family: "Inter", sans-serif; }
.proof ul { padding-left: 0; list-style: none; margin: 0; }
.proof li { margin-bottom: 20px; }
.proof li b { display: block; margin-bottom: 3px; font-size: 16.5px; }
.proof li span { color: var(--ink-soft); font-size: 15.5px; }

/* ---- worlds ---- */
.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.world {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* the cover art is 600x800 — 3:4, same ratio the app's own cards use */
.world img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--panel-2); }
.world-b { padding: 13px 15px 16px; }
.world-n { font-weight: 650; margin-bottom: 4px; }
.world-t { color: var(--ink-faint); font-size: 14px; line-height: 1.45; }

/* ---- features ---- */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 26px; }
.feat h3 { font-size: 17.5px; margin: 0 0 7px; }
.feat p { color: var(--ink-soft); margin: 0; font-size: 15.5px; }
.feat .ico {
  display: inline-flex; width: 34px; height: 34px; border-radius: 9px; margin-bottom: 12px;
  background: var(--gold-dim); color: var(--gold); align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-weight: 600; font-size: 15px;
}

/* ---- closing ---- */
.close { text-align: center; padding: 72px 0; }
.close h2 { max-width: 20ch; margin-inline: auto; }
.close .cta-row { justify-content: center; }

footer {
  border-top: 1px solid var(--border); padding: 26px 0 46px;
  color: var(--ink-faint); font-size: 13.5px;
}
footer a { color: var(--ink-faint); }
.foot-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.srd { margin-top: 14px; max-width: 76ch; line-height: 1.55; }

@media (max-width: 820px) {
  .proof { grid-template-columns: 1fr; }
  .transcript { font-size: 12px; }
  header.hero { padding: 52px 0 40px; }
  .nav-hide { display: none; }
}
@media (max-width: 560px) {
  /* two portrait covers per row — eight stacked singly is a very long scroll */
  .worlds { grid-template-columns: 1fr 1fr; gap: 12px; }
  .world-b { padding: 10px 12px 13px; }
  .world-n { font-size: 15px; }
  .world-t { font-size: 12.5px; }
  .wrap { padding: 0 18px; }
}

/* ---- public campaign page (/c/{id}) ---- */
.camp { display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: center; }
.camp > * { min-width: 0; }
.camp-art img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: 14px; border: 1px solid var(--border); background: var(--panel-2);
}
.camp-h1 { font-size: clamp(30px, 4.6vw, 48px); max-width: 18ch; margin-bottom: 14px; }
.camp-stats {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px;
  font-family: "JetBrains Mono", monospace; font-size: 12.5px;
}
.camp-stats span {
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; color: var(--ink-soft);
}
.camp-blurb { white-space: pre-wrap; }
.camp-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 26px; }
.camp-tags span {
  background: var(--gold-dim); color: var(--gold); border-radius: 999px;
  padding: 4px 12px; font-size: 13px;
}
@media (max-width: 700px) {
  .camp { grid-template-columns: 1fr; gap: 22px; }
  .camp-art { max-width: 190px; }
}

/* live-hydrated world cards are links */
a.world { text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.world:hover { border-color: var(--gold); transform: translateY(-2px); }
.world-noart { width: 100%; aspect-ratio: 3 / 4; background: var(--panel-2); }