@font-face {
  font-family: "MisterX Brand";
  src: url("fonts/LeagueSpartan-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --color-page: #06090d;
  --color-surface: #0b1118;
  --color-surface-raised: #0e151d;
  --color-border: #202c37;
  --color-border-strong: #344655;
  --color-text: #edf3f6;
  --color-text-soft: #a7b3bc;
  --color-muted: #748491;
  --color-neutral-accent: #76d9e9;
  --color-focus: #f3d176;
  --color-online: #78efb0;
  --color-offline: #ef6b78;
  --color-unknown: #edbd64;
  --color-ark: #73d4e4;
  --color-ark-secondary: #c7765e;
  --color-minecraft: #79d77b;
  --color-minecraft-secondary: #a9c47f;
  --color-bitcoin: #f2a541;
  --color-bitcoin-secondary: #ffd07a;
  --font-interface: "Ubuntu Sans", "Noto Sans Display", "Noto Sans", "Nimbus Sans", "Liberation Sans", sans-serif;
  --font-brand: "MisterX Brand", sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --content-width: 76rem;
  --reading-width: 68ch;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 20rem;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

body {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  margin: 0;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 81% 8%, rgb(118 217 233 / 7%), transparent 25rem),
    radial-gradient(circle at 12% 72%, rgb(237 189 100 / 3%), transparent 28rem),
    var(--color-page);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 11%, rgb(116 132 145 / 8%) 11%, rgb(116 132 145 / 8%) calc(11% + 1px), transparent calc(11% + 1px)),
    linear-gradient(90deg, transparent 86%, rgb(116 132 145 / 6%) 86%, rgb(116 132 145 / 6%) calc(86% + 1px), transparent calc(86% + 1px)),
    linear-gradient(180deg, transparent 35%, rgb(116 132 145 / 6%) 35%, rgb(116 132 145 / 6%) calc(35% + 1px), transparent calc(35% + 1px));
  content: "";
  pointer-events: none;
}

body::after {
  position: fixed;
  z-index: -1;
  top: 13rem;
  right: -10rem;
  width: 23rem;
  height: 23rem;
  border: 1px solid rgb(118 217 233 / 7%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

a { color: var(--color-neutral-accent); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--color-text); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

h1, h2, h3, .brand-lockup, .wordmark, .primary-navigation, .action-link, .status-value {
  font-family: var(--font-interface);
  font-stretch: condensed;
}

h1, h2, h3, p { overflow-wrap: anywhere; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-focus);
  border-radius: var(--radius);
  background: var(--color-focus);
  color: var(--color-page);
  font-weight: 800;
  transform: translateY(-220%);
}
.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header { border-bottom: 1px solid var(--color-border-strong); background: rgb(6 9 13 / 92%); }
.site-header__inner, .site-main, .site-footer {
  width: min(100% - (2 * var(--space-6)), var(--content-width));
  margin-inline: auto;
}
.site-header__inner {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.brand-symbol {
  display: block;
  width: 4rem;
  height: auto;
  flex: 0 0 auto;
}

.wordmark {
  color: var(--color-text);
  font-family: var(--font-brand);
  font-size: 1.08rem;
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 1;
}

.wordmark__x {
  display: inline-block;
  margin-inline: -0.018em -0.036em;
  width: auto;
  height: 0.7434em;
  vertical-align: -0.054em;
}

.primary-navigation__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-navigation a {
  position: relative;
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  color: var(--color-text-soft);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-decoration: none;
}
.primary-navigation a:hover { border-color: var(--color-border); color: var(--color-text); background: var(--color-surface); }
.primary-navigation a[aria-current="page"] { border-color: var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text); font-weight: 800; }
.primary-navigation a[aria-current="page"]::after {
  position: absolute;
  right: var(--space-3);
  bottom: 0.34rem;
  left: var(--space-3);
  height: 1px;
  background: var(--color-neutral-accent);
  content: "";
}

.site-main { flex: 1; padding-block: clamp(3.75rem, 8vw, 7rem); }
.micro-label, .page-intro__eyebrow, .section-heading__eyebrow, .foundation-page__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-neutral-accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
h1 { margin: 0; font-size: clamp(2.15rem, 5vw, 4.25rem); font-weight: 750; letter-spacing: -0.035em; line-height: 0.98; }
h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 730; letter-spacing: -0.02em; line-height: 1.08; }
h3 { margin: 0; font-size: 1.18rem; font-weight: 720; line-height: 1.25; }
.page-intro, .foundation-page { max-width: 52rem; }
.home-identity {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
.brand-symbol--home { width: clamp(5.4rem, 11vw, 7.25rem); height: auto; }
.home-identity__divider { color: var(--color-border-strong); font-family: var(--font-interface); font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.wordmark--home { font-size: clamp(1.7rem, 3.5vw, 2.65rem); }
.page-intro--detail { max-width: 58rem; }
.page-intro__summary, .foundation-page__intro {
  max-width: 64ch;
  margin: var(--space-5) 0 0;
  color: var(--color-text-soft);
  font-size: clamp(1rem, 2vw, 1.17rem);
}

.content-section, .status-section { margin-block-start: clamp(var(--space-12), 7vw, 5rem); }
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-4);
  border-bottom: 1px solid var(--color-border-strong);
}
.section-heading .micro-label, .section-heading .section-heading__eyebrow { margin: 0; order: 2; }
.section-heading--compact { margin-block-end: 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-strong); border-bottom: 0; background: var(--color-surface-raised); }
.section-heading--compact h2 { font-size: 1.2rem; }

.status-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-border-strong); background: var(--color-surface); }
.status-entry {
  --service-accent: var(--color-neutral-accent);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text);
  text-decoration: none;
}
.status-entry + .status-entry { border-left: 1px solid var(--color-border); }
.status-entry::before { position: absolute; top: 0; right: 0; left: 0; height: 2px; background: var(--service-accent); content: ""; }
.status-entry:hover { background: var(--color-surface-raised); }
.status-entry--ark, .service-card--ark, .service-page--ark { --service-accent: var(--color-ark); --service-accent-secondary: var(--color-ark-secondary); }
.status-entry--minecraft, .service-card--minecraft, .service-page--minecraft { --service-accent: var(--color-minecraft); --service-accent-secondary: var(--color-minecraft-secondary); }
.status-entry--bitcoin, .service-card--bitcoin, .service-page--bitcoin { --service-accent: var(--color-bitcoin); --service-accent-secondary: var(--color-bitcoin-secondary); }
.status-entry__identity { min-width: 0; font-family: var(--font-interface); font-size: 0.92rem; font-weight: 750; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.status-entry__state, .service-status__value, .child-card__status { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.status-lamp { display: inline-block; width: 0.54rem; height: 0.54rem; flex: 0 0 auto; border: 1px solid currentcolor; border-radius: 50%; }
.status-lamp--unknown { color: var(--color-unknown); background: var(--color-unknown); box-shadow: 0 0 0.2rem rgb(237 189 100 / 85%), 0 0 0.65rem rgb(237 189 100 / 30%); }
.status-value { color: var(--color-unknown); font-family: var(--font-mono); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.1em; }

.service-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.service-card, .content-card, .child-card, .empty-state, .error-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgb(14 21 29 / 98%), rgb(8 13 19 / 98%));
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 12%);
}
.service-card {
  --service-accent: var(--color-neutral-accent);
  position: relative;
  display: flex;
  min-height: 20rem;
  padding: var(--space-8);
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  overflow: hidden;
}
.service-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--service-accent), var(--service-accent-secondary), transparent 88%); content: ""; }
.service-card::after { position: absolute; z-index: 0; top: -5rem; right: -5rem; width: 11rem; height: 11rem; border: 1px solid color-mix(in srgb, var(--service-accent) 18%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.service-card > * { position: relative; z-index: 1; }
.service-card .micro-label, .service-page .micro-label { color: var(--service-accent, var(--color-neutral-accent)); }
.service-card h3 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
.service-card h3 a { color: var(--color-text); text-decoration: none; }
.service-card__description { max-width: 35ch; margin: var(--space-5) 0 0; color: var(--color-text-soft); }
.service-card__footer { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); padding-block-start: var(--space-5); border-top: 1px solid var(--color-border); }
.action-link { color: var(--service-accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.content-card--linked { position: relative; }
.content-card--linked a::after { position: absolute; inset: 0; content: ""; }
.content-card--linked:focus-within { border-color: var(--color-focus); }

.editorial-overview { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 1fr); gap: clamp(var(--space-8), 5vw, 4.5rem); margin-block-start: clamp(var(--space-12), 8vw, 6rem); }
.editorial-overview > .content-section { margin-block-start: 0; }
.content-list { display: grid; gap: var(--space-3); }
.content-card, .child-card, .empty-state { margin: 0; padding: var(--space-5); }
.content-card, .child-card { position: relative; overflow: hidden; }
.content-card::before, .child-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--service-accent, var(--color-neutral-accent)); content: ""; }
.content-card h3 a { color: var(--color-text); }
.content-card__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.content-card p:last-child, .prose:last-child { margin-bottom: 0; }
.content-meta, .detail-metadata dd { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.025em; }
.content-meta { margin: var(--space-3) 0 0; }
.editorial-label { padding: 0.16rem var(--space-2); border: 1px solid var(--color-offline); border-radius: var(--radius); color: var(--color-offline); font-family: var(--font-mono); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.empty-state { position: relative; display: flex; min-height: 7rem; align-items: center; color: var(--color-text-soft); }
.empty-state::before { position: absolute; top: 1rem; bottom: 1rem; left: 0; width: 2px; background: var(--service-accent, var(--color-border-strong)); content: ""; }

.service-page { --service-accent: var(--color-neutral-accent); --service-accent-secondary: var(--color-text-soft); }
.service-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(15rem, 0.7fr);
  gap: clamp(var(--space-8), 6vw, 6rem);
  padding: clamp(var(--space-6), 5vw, 4rem);
  border: 1px solid var(--color-border-strong);
  border-top: 3px solid var(--service-accent);
  background: radial-gradient(circle at 88% 16%, color-mix(in srgb, var(--service-accent) 11%, transparent), transparent 16rem), linear-gradient(135deg, var(--color-surface-raised), var(--color-surface));
  overflow: hidden;
}
.service-hero::after { position: absolute; right: -7rem; bottom: -10rem; width: 20rem; height: 20rem; border: 1px solid color-mix(in srgb, var(--service-accent-secondary) 15%, transparent); border-radius: 50%; content: ""; pointer-events: none; }
.service-hero > * { position: relative; z-index: 1; }
.service-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.service-status { align-self: end; padding: var(--space-5); border-top: 1px solid var(--service-accent); border-bottom: 1px solid var(--color-border); background: rgb(6 9 13 / 58%); }
.service-status__value { margin-block: var(--space-3); }
.service-status > p:last-child { margin: 0; color: var(--color-text-soft); font-size: 0.9rem; }
.child-card { min-width: 0; }
.child-card__status { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-top: 1px solid var(--color-border); }

.editorial-page .content-list { max-width: 64rem; }
.editorial-page--rules .content-list { max-width: 55rem; }
.editorial-detail__body { max-width: var(--reading-width); margin-block-start: var(--space-10); padding-block-start: var(--space-8); border-top: 1px solid var(--color-border-strong); }
.prose { max-width: var(--reading-width); margin-block-start: var(--space-4); color: var(--color-text-soft); overflow-wrap: anywhere; }
.detail-metadata { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-10); margin: var(--space-8) 0 0; padding: var(--space-4) 0; border-block: 1px solid var(--color-border); }
.detail-metadata div { display: grid; gap: var(--space-1); }
.detail-metadata dt { color: var(--color-text-soft); font-family: var(--font-interface); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.detail-metadata dd { margin: 0; }

.error-panel, .foundation-page { position: relative; max-width: 48rem; padding: clamp(var(--space-8), 6vw, 4.5rem); border-top: 2px solid var(--color-neutral-accent); }
.error-panel h1, .foundation-page h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.site-footer { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; padding-block: var(--space-6); border-top: 1px solid var(--color-border-strong); color: var(--color-muted); font-size: 0.8rem; }
.site-footer p { margin: 0; }
.site-footer .wordmark { color: var(--color-text-soft); font-size: 0.82rem; }

@media (max-width: 60rem) {
  .service-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-overview, .service-hero { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  .site-header__inner { align-items: flex-start; flex-direction: column; gap: var(--space-3); padding-block: var(--space-4); }
  .primary-navigation__list { justify-content: flex-start; }
  .status-strip, .service-grid, .card-grid { grid-template-columns: 1fr; }
  .status-entry + .status-entry { border-top: 1px solid var(--color-border); border-left: 0; }
  .service-card { min-height: 16rem; }
  .site-header__inner, .site-main, .site-footer { width: min(100% - (2 * var(--space-4)), var(--content-width)); }
}

@media (max-width: 28rem) {
  .primary-navigation a { padding-inline: 0.65rem; font-size: 0.77rem; }
  .section-heading, .service-card__footer { align-items: flex-start; flex-direction: column; }
  .section-heading .micro-label, .section-heading .section-heading__eyebrow { order: 0; }
  .service-card, .service-hero, .content-card, .child-card, .empty-state { padding: var(--space-4); }
}