/*
  BlackstoneMC — dark website theme
  Same plain community-site layout, with subtle three-colour vignettes.
  No framework, animation or build process required.

  Typeface: Monocraft by Idrees Hassan (SIL OFL 1.1).
  Source and licence: https://github.com/IdreesInc/Monocraft
  The font is loaded from the author's documented external CDN URL;
  no font files are included in this website package.
*/
@font-face {
  font-family: "Monocraft";
  src: url("https://cdn.jsdelivr.net/gh/IdreesInc/Monocraft@main/dist/Monocraft-ttf/Monocraft.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page: #0a0e12;
  --text: #e2e6e5;
  --muted: #99a6a7;
  --border: #30393f;
  --yellow: #f1cd4d;
  --green: #70ff8f;
  --blue: #69c3f0;
  --link: #8fd2f5;
  --max-width: 960px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--page);
  background-image:
    radial-gradient(ellipse 42% 48% at -5% 1%, rgba(241, 205, 77, .13), transparent 85%),
    radial-gradient(ellipse 44% 57% at 104% 17%, rgba(105, 195, 240, .12), transparent 85%),
    radial-gradient(ellipse 53% 57% at 29% 104%, rgba(112, 255, 143, .09), transparent 82%),
    radial-gradient(ellipse 92% 87% at 49% 47%, transparent 38%, rgba(1, 3, 5, .46) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Monocraft", "Courier New", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.77;
  -webkit-font-smoothing: none;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(112, 255, 143, .33); color: #ffffff; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--green); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.wrap { width: min(calc(100% - 48px), var(--max-width)); margin-inline: auto; }
.top-stripe { display: grid; grid-template-columns: 1fr 1fr 1fr; height: 4px; }
.top-stripe span:nth-child(1) { background: var(--yellow); }
.top-stripe span:nth-child(2) { background: var(--green); }
.top-stripe span:nth-child(3) { background: var(--blue); }
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 5;
  background: #1e2a2a;
  color: white;
  padding: 6px 12px;
}
.skip-link:focus { top: 12px; }
.site-header { border-bottom: 1px solid var(--border); background: rgba(9, 12, 16, .40); }
.site-header__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 29px 0 21px;
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #141b1d;
  border: 1px solid #3b494c;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -1px;
}
.brand-mark .y { color: var(--yellow); }
.brand-mark .g { color: var(--green); }
.brand-mark .b { color: var(--blue); }
.brand-name { display: block; font-size: 23px; letter-spacing: -.02em; line-height: 1.18; }
.brand-subtitle { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 23px; padding-bottom: 3px; }
.site-nav a { color: #cad4d3; text-decoration: none; font-size: 12px; }
.site-nav a:hover { color: var(--green); }
.site-nav a[aria-current="page"] {
  color: #f0f4f3;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--green);
  text-underline-offset: 7px;
}
main { padding: 38px 0 70px; min-height: 62vh; }
h1, h2 { line-height: 1.45; font-weight: 400; letter-spacing: -.016em; }
h1 { font-size: 27px; margin: 0 0 19px; }
h2 { font-size: 19px; margin: 0 0 14px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 15px; line-height: 1.8; }
.muted, .fine { color: var(--muted); }
.fine { font-size: 12px; }
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, .95fr);
  gap: 57px;
  padding-bottom: 42px;
}
.intro__copy p { max-width: 620px; }
.plain-links { display: flex; flex-wrap: wrap; gap: 8px 23px; margin-top: 23px; font-size: 13px; }
.server-details { border-top: 3px solid var(--green); }
.server-details h2 { margin: 13px 0 10px; font-size: 15px; letter-spacing: 0; }
.server-details dl { margin: 0; }
.server-details dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 8px 0;
  font-size: 12px;
}
.server-details dt { color: var(--muted); }
.server-details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.copy-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
button { font: inherit; }
.copy-button {
  border: 1px solid #657578;
  background: rgba(16, 29, 27, .5);
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.copy-button:hover { background: #22352e; border-color: var(--green); }
.copy-button[hidden] { display: none; }
.copy-feedback { font-size: 12px; color: var(--green); }
.content-section { border-top: 1px solid var(--border); padding: 30px 0; }
.content-section > p { max-width: 750px; }
.link-list { margin: 0; padding: 0; list-style: none; }
.link-list li { margin: 0 0 8px; }
.site-footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; padding: 19px 0 32px; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; }
.placeholder { border-left: 3px solid var(--yellow); padding-left: 12px; color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .wrap { width: min(calc(100% - 32px), var(--max-width)); }
  .site-header__inner { align-items: flex-start; padding: 22px 0 17px; }
  .site-nav { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; gap: 9px 20px; }
  .intro { grid-template-columns: 1fr; gap: 28px; }
  main { padding-top: 27px; }
  h1 { font-size: 23px; }
  .brand-name { font-size: 20px; }
  .brand-subtitle { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* BlackstoneMC homepage v1 additions */
.brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  flex: 0 0 44px;
  border: 1px solid #3b494c;
  background: #141b1d;
}
.intro__copy strong { color: #f0f4f3; font-weight: 700; }
.intro__copy u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.status-online { color: var(--green); white-space: nowrap; }
.online-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 50%;
  background: #70ff8f;
  box-shadow: 0 0 0 2px rgba(112,255,143,.13);
}
.plain-links { gap: 8px 12px; }
.link-separator { color: var(--muted); }
@media (max-width: 760px) {
  .plain-links { gap: 8px 10px; }
}


/* BlackstoneMC homepage — side archive with unobstructed captions */
.home-layout {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 960px) minmax(150px, 1fr);
  gap: clamp(18px, 2.1vw, 38px);
  width: min(calc(100% - 48px), 1640px);
  margin-inline: auto;
  padding-top: 38px;
  padding-bottom: 70px;
  min-height: 62vh;
  align-items: start;
}
.home-primary { grid-column: 2; grid-row: 1; min-width: 0; }
/* Keep the original introduction and server-information layout intact. */
.home-primary .intro { gap: clamp(26px, 3.6vw, 57px); }
.archive-rail { min-width: 0; display: flex; flex-direction: column; align-items: stretch; }
.archive-rail--left { grid-column: 1; grid-row: 1; padding-top: 8px; }
.archive-rail--right { grid-column: 3; grid-row: 1; padding-top: 8px; }
.archive-photo { margin: 0; width: 100%; min-width: 0; }
.archive-photo + .archive-photo { margin-top: 130px; }
.archive-rail--right .archive-photo + .archive-photo { margin-top: 130px; }
.archive-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(132, 155, 156, .24);
  background: #111a1e;
}
.archive-photo figcaption {
  color: #a7b4b5;
  font-size: 10.5px;
  line-height: 1.65;
  border-left: 2px solid rgba(112, 255, 143, .55);
  padding: 2px 0 3px 10px;
  margin-top: 12px;
}
.archive-photo--2 figcaption { border-left-color: rgba(105, 195, 240, .7); }
.archive-photo--3 figcaption { border-left-color: rgba(241, 205, 77, .7); }
.archive-photo--4 figcaption { border-left-color: rgba(160, 180, 196, .55); }
.archive-photo__label {
  display: block;
  color: #dae1df;
  font-size: 9px;
  letter-spacing: .045em;
  margin-bottom: 5px;
}

@media (max-width: 1179px) {
  /* Photos enter the normal page flow for tablet and phone. */
  .home-layout {
    display: grid;
    width: min(calc(100% - 48px), 960px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 28px;
    padding-top: 38px;
  }
  .home-primary { grid-row: auto; grid-column: 1 / -1; order: 0; }
  .archive-rail { display: contents; }
  .archive-photo, .archive-photo + .archive-photo,
  .archive-rail--right .archive-photo + .archive-photo {
    margin: 0;
  }
  .archive-photo--1 { order: 1; }
  .archive-photo--2 { order: 2; }
  .archive-photo--3 { order: 3; }
  .archive-photo--4 { order: 4; }
  .archive-photo figcaption { font-size: 11px; }
}
@media (max-width: 600px) {
  .home-layout {
    width: min(calc(100% - 32px), 960px);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 31px;
    padding-top: 27px;
  }
  .home-primary { grid-column: 1; }
  .archive-photo { grid-column: 1; }
  .archive-photo figcaption { font-size: 11px; margin-top: 11px; }
  .archive-photo__label { font-size: 10px; }
}


/* Rules page: reuse the home gallery rails and original type treatment. */
.rules-primary { min-width: 0; }
.rules-introduction p { max-width: 900px; }
.rules-introduction strong { font-weight: 700; color: #f0f4f3; }
.rules-separator {
  display: block;
  border: 0;
  border-top: 1px solid #536367;
  margin: 30px 0 13px;
}
.numbered-rules { padding: 0; margin: 0; list-style: none; counter-reset: rules; }
.numbered-rules > li {
  counter-increment: rules;
  position: relative;
  padding: 20px 0 23px 39px;
  border-bottom: 1px solid var(--border);
}
.numbered-rules > li::before {
  content: counter(rules) ".";
  position: absolute;
  top: 20px;
  left: 0;
  width: 31px;
  color: var(--green);
  font-size: 15px;
  line-height: 1.5;
}
.numbered-rules h2 {
  font-size: 15px;
  line-height: 1.5;
  color: #f0f4f3;
  font-weight: 400;
  margin: 0 0 7px;
}
.numbered-rules p { margin: 0; }
.rule-examples { padding-left: 21px; margin: 12px 0 0; }
.rule-examples li { margin: 0 0 7px; padding-left: 2px; }
.rule-examples li::marker { color: var(--blue); }
.rules-closing { padding-top: 24px; color: var(--muted); }
.rules-closing strong { color: var(--yellow); }
@media (max-width: 600px) {
  .numbered-rules > li { padding: 19px 0 22px 32px; }
  .numbered-rules > li::before { top: 19px; }
  .numbered-rules h2 { font-size: 14px; }
}

/* On narrower screens, let the archive images follow the introduction
   naturally, before the long rules list rather than four screens below it. */
@media (max-width: 1179px) {
  .rules-page .rules-primary { display: contents; }
  .rules-page .rules-introduction { grid-column: 1 / -1; order: 0; }
  .rules-page .archive-photo--1 { order: 1; }
  .rules-page .archive-photo--2 { order: 2; }
  .rules-page .rules-separator { grid-column: 1 / -1; order: 3; margin-top: 2px; }
  .rules-page .rules-contents { grid-column: 1 / -1; order: 4; }
}

/* Members archive — simple three-season columns with pixel heads. */
.members-page { padding-top: 38px; }
.members-introduction { color: var(--muted); max-width: 710px; margin-bottom: 31px; }
.members-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
  row-gap: 49px;
  align-items: start;
}
.members-season { --member-accent: var(--yellow); border-top: 2px solid var(--member-accent); min-width: 0; padding-top: 11px; }
.members-season:nth-child(3n + 2) { --member-accent: var(--green); }
.members-season:nth-child(3n + 3) { --member-accent: var(--blue); }
.members-season h2 { font-size: 17px; line-height: 1.35; margin: 0 0 16px; color: var(--member-accent); }
.members-list { list-style: disc; padding-left: 18px; margin: 0; }
.members-list li { margin: 0; padding: 4px 0; }
.members-list li::marker { color: #76878a; font-size: 11px; }
.member-entry { display: flex; min-width: 0; align-items: center; gap: 10px; }
.member-head { display: block; flex: 0 0 32px; width: 32px; height: 32px; object-fit: cover; image-rendering: pixelated; background: #212b2d; border: 1px solid #3d4b4c; }
.member-name { min-width: 0; overflow-wrap: anywhere; color: var(--text); font-size: 12px; line-height: 1.4; }
/* Season-specific historical notes appear beside the original IGN. */
.member-meta { min-width: 0; flex: 1 1 auto; line-height: 1.55; overflow-wrap: anywhere; }
.member-note { color: #899395; font-size: 9px; line-height: 1.45; overflow-wrap: normal; }
@media (max-width: 860px) {
  .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 38px; }
}
@media (max-width: 570px) {
  .members-page { padding-top: 27px; }
  .members-grid { grid-template-columns: 1fr; row-gap: 31px; }
  .members-season { padding-top: 12px; }
  .members-season h2 { font-size: 16px; margin-bottom: 11px; }
  .members-list li { padding: 3px 0; }
}


/* World Map — a wide, interactive canvas under the existing site header. */
.world-map-page { width: min(calc(100% - 48px), 1640px); padding-bottom: 38px; }
.world-map-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 15px; }
.world-map-heading h1 { margin: 0; }
.world-map-external { font-size: 12px; white-space: nowrap; }
.world-map-frame { border: 1px solid var(--border); border-top: 2px solid var(--green); background: #0a0e12; }
.world-map-frame iframe { display: block; border: 0; width: 100%; height: clamp(480px, 72vh, 1000px); background: #0a0e12; }
.world-map-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 12px; }
@media (max-width: 760px) {
  .world-map-page { width: calc(100% - 32px); padding-bottom: 27px; }
  .world-map-frame iframe { height: clamp(440px, 72svh, 800px); }
  .world-map-caption { font-size: 11px; }
}

/* History: retain the archive typography and give each introduction its own section. */
.members-page .members-introduction { margin-bottom: 0; }
.members-page .members-introduction strong { color: #f0f4f3; font-weight: 700; }
.history-separator { border: 0; border-top: 1px solid #536367; margin: 30px 0 23px; }
.history-story h2 { font-size: 22px; margin: 0 0 17px; }
.history-separator--rosters { margin-bottom: 31px; }
@media (max-width: 570px) {
  .history-story h2 { font-size: 19px; }
  .history-separator { margin-top: 25px; margin-bottom: 19px; }
  .history-separator--rosters { margin-bottom: 25px; }
}