/* ══════════════════════════════════════════════════════════════════════════
   The Pub, RedM - site styles
   ══════════════════════════════════════════════════════════════════════════

   theme.css carries the tokens and the shared furniture. This file is what
   makes a document out of them: the header, the hero, the section rhythm, the
   cards, the long-form reading column and the status widget.

   The look is a saloon at night. Timber, brass, lamplight, and type stamped
   into a board rather than printed on a page. Nothing here should read as a
   bootstrap template, which mostly means: no rounded corners, no drop shadows
   that float a card off the page, no blue links, and no evenly lit surfaces.
   Light comes from above and to one side, always.

   Every size is in rem and the root font size tracks the viewport, so the
   whole site scales with one dial. The only px in this file are inside
   @media queries and blur() radii.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  background-color: #0b0906;
  background-image:
    radial-gradient(ellipse 80% 34% at 50% 0%,
      rgba(255, 200, 118, 0.10) 0%, transparent 62%),
    linear-gradient(180deg, #14110c 0%, #0b0906 45%, #0e0b07 100%);
  background-attachment: fixed;
}

/* ── Header ───────────────────────────────────────────────────────────────
   A board nailed over the door. It sticks, because the join button is the
   whole point of the site and it should never be more than a glance away. */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--hair2) solid rgba(176, 141, 63, 0.4);
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.26) 0rem, rgba(0,0,0,0) 0.06rem,
      rgba(255,255,255,0.014) 0.45rem, rgba(0,0,0,0) 1.7rem),
    linear-gradient(180deg, rgba(35, 24, 15, 0.97), rgba(15, 11, 7, 0.98));
  box-shadow: 0 0.5rem 1.75rem rgba(0,0,0,0.62);
}

.masthead__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  max-width: 82rem;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; }

.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow:
    0 calc(-1 * var(--hair)) 0 rgba(255, 240, 210, 0.18),
    0 var(--hair) 0 rgba(0,0,0,0.9);
}
.brand:hover .brand__name { color: var(--gold-bright); }

.brand__tag {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
  flex-wrap: wrap;
}

.nav a {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  padding: var(--sp-1) 0;
  border-bottom: var(--hair2) solid transparent;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.nav a:hover { color: var(--gold-bright); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--gold); }

/* The hamburger. Hidden until the nav will not fit, and it is a real button
   with real aria state rather than a checkbox hack, so a screen reader is
   told whether the menu is open. */
.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: var(--rule-faint);
  color: var(--cream);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ── Sections ─────────────────────────────────────────────────────────── */

.section { padding: var(--sp-8) 0; }
.section--tight { padding: var(--sp-7) 0; }

.section__head { text-align: center; margin-bottom: var(--sp-6); }
.section__head .divider { max-width: 18rem; margin-inline: auto; }

.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--sp-2);
}

.lede {
  font-size: var(--fs-head);
  line-height: 1.6;
  color: var(--cream-dim);
  max-width: 44rem;
  margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-7);
  text-align: center;
  overflow: hidden;
}

/* The horizon: a low sun over flat country, drawn rather than photographed.
   A screenshot would date the site to whichever patch it was taken on. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 26% at 50% 78%,
      rgba(255, 170, 70, 0.22) 0%, rgba(190, 90, 30, 0.10) 42%, transparent 74%),
    linear-gradient(180deg, transparent 0%, rgba(90, 45, 15, 0.16) 68%, transparent 100%);
}

.hero > * { position: relative; }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: 0.98;
  margin: 0 0 var(--sp-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero__sub {
  font-size: var(--fs-head);
  color: var(--cream-dim);
  max-width: 40rem;
  margin: 0 auto var(--sp-5);
  line-height: 1.6;
}

.hero__actions { justify-content: center; }

/* ── Cards ────────────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.grid--two   { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
.grid--four  { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

.card {
  position: relative;
  padding: var(--sp-5);
  border: var(--rule-faint);
  background: linear-gradient(178deg, rgba(30, 25, 19, 0.86), rgba(13, 11, 8, 0.92));
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}

.card:hover {
  border-color: rgba(201, 162, 39, 0.55);
  transform: translateY(calc(-1 * var(--hair2)));
}

/* A brass number in the corner, the way a stock ledger is ruled. Decorative,
   so it is generated content and never read aloud. */
.card--numbered::before {
  content: attr(data-num);
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-4);
  font-family: var(--font-numeric);
  font-size: var(--fs-micro);
  color: var(--brass-dark);
  letter-spacing: var(--tracking-mid);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-head);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--paper);
  margin: 0 0 var(--sp-2);
}

.card__body { margin: 0; font-size: var(--fs-small); color: var(--cream-dim); line-height: 1.65; }
.card__body + .card__body { margin-top: var(--sp-3); }

.card ul { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); }
.card li { font-size: var(--fs-small); color: var(--cream-dim); margin-bottom: var(--sp-1); }

/* ── Figures: the big numbers ─────────────────────────────────────────── */

.figure { text-align: center; padding: var(--sp-4) var(--sp-3); }

.figure__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1;
  color: var(--gold-bright);
  text-shadow: 0 var(--hair) 0 rgba(0,0,0,0.9);
}

.figure__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream-faint);
}

/* ── Skill list ───────────────────────────────────────────────────────── */

.skills {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.skills li {
  font-size: var(--fs-small);
  color: var(--cream-dim);
  padding: var(--sp-2) var(--sp-3);
  border-left: var(--hair2) solid rgba(176, 141, 63, 0.45);
  background: rgba(0,0,0,0.28);
}

.skills li b { color: var(--paper); font-weight: normal; }

/* ── Status widget ────────────────────────────────────────────────────────
   Reads from the panel API. It must degrade to something honest when the API
   is unreachable, because "0 players" and "we cannot tell" are very different
   claims to make to someone deciding whether to install a 100GB game. */

.status {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--sp-4) var(--sp-5);
  border: var(--rule);
  background: rgba(10, 8, 6, 0.8);
}

.status__dot {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  transform: rotate(45deg);
  background: var(--cream-faint);
  box-shadow: 0 0 0.75rem currentColor;
  transition: background 300ms var(--ease);
}
.status.is-up   .status__dot { background: var(--moss-bright); color: var(--moss-bright); }
.status.is-down .status__dot { background: var(--blood-bright); color: var(--blood-bright); }

.status__state {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--cream);
}

.status__count { font-family: var(--font-numeric); color: var(--gold-bright); }
.status__note  { font-size: var(--fs-micro); color: var(--cream-faint); }

/* Pulse only while we genuinely do not know yet. A permanent pulse is noise. */
.status.is-checking .status__dot { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── Steps: how to join ───────────────────────────────────────────────── */

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }

.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-7);
  border-left: var(--hair) solid rgba(176, 141, 63, 0.3);
  margin-left: var(--sp-4);
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: calc(-1 * var(--sp-4));
  top: 0;
  width: var(--sp-7);
  height: var(--sp-7);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-head);
  color: var(--ink);
  background: radial-gradient(circle at 34% 30%, var(--gold-bright), var(--brass-dark));
  border: var(--hair2) solid rgba(0,0,0,0.5);
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.7);
}

.steps h3 {
  font-family: var(--font-display);
  font-size: var(--fs-head);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--paper);
  margin: 0.35rem 0 var(--sp-2);
}

.steps p { margin: 0 0 var(--sp-2); font-size: var(--fs-small); color: var(--cream-dim); }

/* ── Rules: a posted notice ───────────────────────────────────────────── */

.notice {
  padding: var(--sp-6);
  color: var(--ink);
  background:
    linear-gradient(178deg, rgba(223, 212, 189, 0.97), rgba(190, 176, 148, 0.97));
  box-shadow: var(--shadow-panel);
  border: var(--hair2) solid rgba(90, 70, 35, 0.45);
}

.notice h2, .notice h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: #2a1d0e;
  margin: var(--sp-5) 0 var(--sp-2);
}
.notice h2:first-child, .notice h3:first-child { margin-top: 0; }
.notice h2 { font-size: var(--fs-title); }
.notice h3 { font-size: var(--fs-head); }

.notice p, .notice li { color: #33261a; font-size: var(--fs-small); line-height: 1.7; }
.notice ol, .notice ul { padding-left: var(--sp-6); }
.notice li { margin-bottom: var(--sp-2); }
.notice strong { color: #1d1409; }
.notice hr { border: none; border-top: var(--hair) solid rgba(60, 42, 20, 0.35); margin: var(--sp-5) 0; }
.notice a { color: #6b4a12; }

/* ── Long-form reading, for the guides ────────────────────────────────── */

.prose { max-width: var(--measure); margin: 0 auto; }

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--paper);
  margin: var(--sp-7) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: var(--rule-faint);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-head);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--gold-bright);
  margin: var(--sp-6) 0 var(--sp-2);
}

.prose p, .prose li { color: var(--cream-dim); line-height: 1.75; }
.prose p { margin: 0 0 var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }
.prose li { margin-bottom: var(--sp-2); }
.prose strong { color: var(--paper); }

.prose code {
  font-family: var(--font-numeric);
  font-size: 0.9em;
  color: var(--gold-bright);
  background: rgba(0,0,0,0.45);
  padding: 0.1em 0.35em;
  border: var(--hair) solid rgba(201, 162, 39, 0.22);
}

.prose blockquote {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-left: var(--hair2) solid var(--brass);
  background: rgba(0,0,0,0.3);
  color: var(--cream-dim);
  font-style: italic;
}

/* Table of contents on the guides. Sits above the fold so a reader can tell
   in one glance whether the page answers their question. */
.toc {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: var(--rule-faint);
  background: rgba(0,0,0,0.3);
}
.toc p { margin: 0 0 var(--sp-2); font-size: var(--fs-micro);
         letter-spacing: var(--tracking-wide); text-transform: uppercase;
         color: var(--brass); }
.toc ol { margin: 0; padding-left: var(--sp-5); }
.toc li { margin-bottom: var(--sp-1); font-size: var(--fs-small); }

.meta {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0 0 var(--sp-5);
}

/* Breadcrumbs. Present for readers and for the BreadcrumbList markup that
   sits alongside them, which is the pair search engines expect. */
.crumbs { font-size: var(--fs-micro); color: var(--cream-faint);
          margin: 0 0 var(--sp-4); letter-spacing: var(--tracking-mid);
          text-transform: uppercase; }
.crumbs a { color: var(--cream-faint); }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs span[aria-hidden] { padding: 0 var(--sp-2); opacity: 0.5; }

/* ── FAQ: details/summary, so it works with no script at all ──────────── */

.faq { border-top: var(--rule-faint); }

.faq details {
  border-bottom: var(--rule-faint);
  padding: var(--sp-3) 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-head);
  letter-spacing: 0.02em;
  color: var(--paper);
  padding-right: var(--sp-6);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-family: var(--font-numeric);
  color: var(--brass);
  transition: transform 180ms var(--ease);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--gold-bright); }

.faq details > *:not(summary) { margin-top: var(--sp-3); }
.faq p { color: var(--cream-dim); margin: 0 0 var(--sp-3); font-size: var(--fs-small); line-height: 1.7; }
.faq ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); }
.faq li { color: var(--cream-dim); font-size: var(--fs-small); margin-bottom: var(--sp-1); }

/* ── Staff ────────────────────────────────────────────────────────────── */

.staff-card { text-align: center; padding: var(--sp-5) var(--sp-4); }

.staff-card__badge {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--sp-3);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-title);
  color: var(--ink);
  background: radial-gradient(circle at 34% 28%, var(--gold-bright), var(--brass-dark));
  /* A lawman's star, cut from the square rather than drawn as an image. */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.staff-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-head);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mid);
  color: var(--paper);
  margin: 0;
}

.staff-card__role {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
  margin: var(--sp-1) 0 var(--sp-3);
}

.staff-card p { font-size: var(--fs-small); color: var(--cream-dim); margin: 0; }

/* ── Call to action strip ─────────────────────────────────────────────── */

.callout {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  border-top: var(--rule);
  border-bottom: var(--rule);
  background:
    radial-gradient(ellipse 60% 100% at 50% 50%,
      rgba(255, 190, 100, 0.09) 0%, transparent 70%),
    rgba(0,0,0,0.35);
}

.callout h2 { font-family: var(--font-display); font-size: var(--fs-hero);
              text-transform: uppercase; letter-spacing: var(--tracking-mid);
              margin: 0 0 var(--sp-3); color: var(--paper); }

/* ── Footer ───────────────────────────────────────────────────────────── */

.footer {
  border-top: var(--hair2) solid rgba(176, 141, 63, 0.35);
  background: linear-gradient(180deg, rgba(20, 15, 10, 0.9), rgba(9, 7, 5, 0.96));
  padding: var(--sp-7) 0 var(--sp-6);
  margin-top: var(--sp-7);
}

.footer__cols {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--sp-6);
}

.footer h2 {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--sp-3);
  font-weight: normal;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-2); font-size: var(--fs-small); }
.footer a { color: var(--cream-dim); }
.footer a:hover { color: var(--gold-bright); }

.footer__base {
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--cream-faint);
  padding-top: var(--sp-5);
  border-top: var(--rule-faint);
}
.footer__base p { margin: var(--sp-1) 0; }

/* ── Guides: stepped lists and quoted paths ───────────────────────────────
   Two things the long-form guides need and nothing else does.

   .prose ol adds a reading indent that a stepped list does not want, because
   the numbered discs already supply their own. Without this the whole ladder
   sits an extra step further in, and a phone has no width to spare for it.

   A path or a console line gets quoted often enough in the install guide to
   earn a block of its own. Inline code cannot wrap a Windows path, which has
   no spaces to break at, so it shoves a narrow screen sideways instead. */

.prose ol.steps { padding-left: 0; }

.prose .code-line {
  display: block;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: none;
  border-left: var(--hair2) solid var(--brass);
  background: rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere;
}

/* ── Narrow ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: var(--sp-3) 0 0;
    border-top: var(--rule-faint);
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: var(--sp-3) var(--sp-2);
    border-bottom: var(--rule-faint);
    border-left: var(--hair2) solid transparent;
  }
  .nav a[aria-current="page"] { border-left-color: var(--gold); border-bottom-color: transparent; }

  .masthead__bar { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  .hero__title { font-size: 2.5rem; }
  .section { padding: var(--sp-7) 0; }
  .wrap { padding: 0 var(--sp-4); }
  .notice { padding: var(--sp-4); }
  .steps > li { padding-left: var(--sp-6); margin-left: var(--sp-3); }
}