/* ============================================================
   EastCoast ~ PvP ~ site.css
   One sheet for index / plugins / changelog.

   Replaces three duplicated <style> blocks that had already
   drifted (.btn 16px vs 15px, .btn-primary #fff vs #0a0a0f).
   No page may declare page-local CSS.

   Deliberately absent, all removed in this rebuild:
     - scanline overlay          (body::before repeating-gradient)
     - radial-masked grid        (.grid-bg)
     - horizon gradient          (.horizon)
     - blanket text-shadow glow  (0 0 30px on every element)
     - gradients of any kind
   ============================================================ */

/* ---------------------------------------------------------------
   1. RESET + BASE
   --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

::selection { background: var(--rust); color: var(--ground); }

/* One global focus treatment. The old build had none anywhere. */
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

/* Honour the OS setting. The old build animated from opacity:0 with
   fill-mode forwards, so suppressed animations left content invisible
   rather than merely static. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------
   2. TYPE
   --------------------------------------------------------------- */

.display, .title, .head, .hero-type {
  font-family: var(--face-display);
  font-weight: 400;            /* Bevan ships one weight */
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Structural type. Big enough to be the page's architecture rather than a
   label on top of it. Tightened tracking because Bevan opens up at scale. */
.hero-type {
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: -0.02em;
}
.hero-type .thin {
  display: block;
  font-family: var(--face-text);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.16em;
  line-height: 1.4;
  color: var(--ink-dim);
  margin-top: 0.5em;
  max-width: 34ch;
}

.display { font-size: var(--t-display); line-height: var(--lh-display); }
.title   { font-size: var(--t-title);   line-height: var(--lh-title); }
.head    { font-size: var(--t-head);    line-height: 1.15; }

/* Sub-heads drop to the text face. Bevan at small sizes turns to mud. */
.subhead {
  font-family: var(--face-text);
  font-weight: 600;
  font-size: var(--t-sub);
  line-height: 1.3;
}

.kicker {
  font-family: var(--face-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
}

.lede {
  font-size: var(--t-sub);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure-lede);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s2); }
.prose p { color: var(--ink-dim); }
.prose strong { color: var(--ink); font-weight: 600; }

.mono  { font-family: var(--face-mono); }
.dim   { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

/* Accent emphasis. Replaces <em> styled as not-italic across the old build. */
.hl { color: var(--rust); font-style: normal; font-weight: 500; }

a { color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: var(--s1); left: var(--s1);
  z-index: var(--z-skip);
  background: var(--rust-deep); color: var(--ink);
  padding: var(--s1) var(--s2);
  font-family: var(--face-mono); font-size: var(--t-small);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------
   3. LAYOUT
   --------------------------------------------------------------- */

.wrap        { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- asymmetric shapes -------------------------------------------
   AI layout tools are very good at symmetry, so a page where every
   section is a centred wrapper with the same rhythm reads as generated
   regardless of how it is styled. These exist so no two sections on a
   page share a skeleton. Usability is not negotiable: reading measure,
   focus order and source order are unchanged in all of them. */

/* content pushed off the optical centre, wide air on one side */
.wrap-offset {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--s5);
}
.wrap-offset-r {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s5);
}

/* narrow column, indented from the left rather than centred */
.wrap-inset {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-inset > * { max-width: 46rem; margin-left: auto; margin-right: 8%; }

/* edge to edge, no wrapper */
.bleed { width: 100%; }

/* heading hangs into the margin beside its content */
.hang {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--s4);
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
}
.hang > :first-child { position: sticky; top: 5rem; align-self: start; }

@media (max-width: 860px) {
  .wrap-offset, .wrap-offset-r, .hang { grid-template-columns: 1fr; gap: var(--s3); }
  .hang > :first-child { position: static; }
  .wrap-inset > * { margin-right: 0; max-width: none; }
}

.section     { padding-block: var(--s5); }
.section-tight { padding-block: var(--s4); }

/* Grain sits on large surfaces only, never on text containers. */
.section-alt {
  background-color: var(--surface);
  background-image: var(--grain);
  border-block: 1px solid var(--rule-hard);
}
.section-grain {
  background-image: var(--grain);
}

.section-head { margin-bottom: var(--s4); }
.section-head .title { margin-top: var(--s1); }
.section-head .lede  { margin-top: var(--s2); }

.rule      { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s4); }
.rule-soft { border: 0; border-top: 1px solid var(--rule-soft); margin-block: var(--s3); }

.cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); align-items: start; }
.cols-bias { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 760px) {
  .cols-2, .cols-bias { grid-template-columns: 1fr; gap: var(--s3); }
}

.stack > * + * { margin-top: var(--s2); }
.stack-lg > * + * { margin-top: var(--s3); }

/* ---------------------------------------------------------------
   4. NAV + FOOTER
   Identical on all three pages. The old build had no nav on index,
   no PLUGINS link on changelog, and no DISCORD link on plugins.
   --------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  /* Solid fallback first: without it, a browser lacking color-mix gets no
     background at all and the sticky nav sits transparent over content. */
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--gutter);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .nav { background: color-mix(in srgb, var(--ground) 94%, transparent); }
}
@supports (backdrop-filter: blur(8px)) {
  .nav { backdrop-filter: blur(8px); }
}

.nav-logo {
  display: flex; align-items: center; gap: var(--s1);
  font-family: var(--face-display); font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ink); text-decoration: none;
}
.nav-logo:hover { color: var(--ink); }
.nav-logo img { width: 28px; height: 28px; }

.nav-links { display: flex; gap: var(--s3); flex-wrap: wrap; }

.nav-link {
  font-family: var(--face-mono); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  padding-block: var(--s1);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--rust); }

.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding-block: var(--s4);
}
.footer-row {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--face-mono); font-size: var(--t-small);
  color: var(--ink-dim);
}
.footer-row a { color: var(--ink-dim); text-decoration: none; }
.footer-row a:hover { color: var(--rust); }

.status { display: inline-flex; align-items: center; gap: var(--s1); }
.status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
}
.status.is-down::before { background: var(--ink-faint); }

/* ---------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--face-text); font-weight: 600;
  font-size: var(--t-small); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.btn-primary { background: var(--rust-deep); color: var(--ink); border-color: var(--rust-deep); }
.btn-primary:hover { background: var(--rust); color: var(--ground); border-color: var(--rust); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--rust); color: var(--rust); }

.btn-quiet {
  background: transparent; color: var(--ink-dim); border-color: transparent;
  padding-inline: 0; letter-spacing: 0.08em;
}
.btn-quiet:hover { color: var(--rust); }

.btn.is-done { background: var(--signal); color: var(--ground); border-color: var(--signal); }

/* ---------------------------------------------------------------
   6. CONNECT BOX
   --------------------------------------------------------------- */

.connect {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--rust-deep);
  padding: var(--s2) var(--s3);
}
.connect-label {
  font-family: var(--face-mono); font-size: var(--t-label);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.connect-addr {
  font-family: var(--face-mono); font-size: 1rem;
  color: var(--ink); letter-spacing: 0.02em; word-break: break-all;
}
.connect .btn { margin-left: auto; }

/* ---------------------------------------------------------------
   7. PANELS + FACTS
   --------------------------------------------------------------- */

.panel {
  background-color: var(--surface);
  background-image: var(--grain);
  border: 1px solid var(--rule-hard);
  padding: var(--s3);
}
.panel-accent { border-left: 2px solid var(--rust-deep); }

/* Key/value facts. Replaces the old stat bar, which put the words
   "Tiered" and "USA" in a slot styled for a number. */
/* Full-bleed band with hard rules. Unequal columns on purpose: an even
   five-across grid is the shape a generator produces. */
.facts {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
  gap: 1px;
  background: var(--rule-hard);
  border-block: 1px solid var(--rule-hard);
}
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact  {
  background-color: var(--ground);
  background-image: var(--grain);
  padding: var(--s3) var(--s3);
}
.fact-key {
  font-family: var(--face-mono); font-size: var(--t-label);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim);
  margin-bottom: var(--s1);
}
.fact-val { font-family: var(--face-display); font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.fact-val.is-text { font-family: var(--face-text); font-weight: 600; font-size: 1.15rem; }

.tag-row { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.tag {
  font-family: var(--face-mono); font-size: var(--t-label);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--rule);
  padding: 0.2rem 0.5rem;
}
.tag-price { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); }

/* ---------------------------------------------------------------
   8. SCREENSHOT FIGURE
   The site's core unit: evidence with a caption that states the claim.
   --------------------------------------------------------------- */

.shot { margin: 0; }
.shot img { width: 100%; border: 1px solid var(--rule-soft); background: var(--surface); }
.shot figcaption {
  font-family: var(--face-text); font-size: var(--t-small);
  color: var(--ink); line-height: 1.5;
  padding-top: var(--s1);
  border-top: 1px solid var(--rule-soft);
  margin-top: var(--s1);
}
.shot-wide img { aspect-ratio: 16 / 7; object-fit: cover; }

/* Edge-to-edge image band. No border, the image is the edge. */
.shot-bleed { margin: 0; }
.shot-bleed img {
  width: 100%; aspect-ratio: 21 / 8; object-fit: cover;
  border: 0; border-block: 1px solid var(--rule-hard);
}
.shot-bleed figcaption {
  font-family: var(--face-text); font-size: var(--t-small);
  color: var(--ink); padding: var(--s2) var(--gutter) 0;
  max-width: var(--wrap); margin-inline: auto;
}

.shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); }

/* Tier strip. Four screenshots, same framing, one per difficulty. */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-hard); border-block: 1px solid var(--rule-hard); }
@media (max-width: 620px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
.tier { background-color: var(--ground); background-image: var(--grain); padding: var(--s2); }
.tier img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: var(--s1); }
.tier-n {
  font-family: var(--face-mono); font-size: var(--t-label);
  letter-spacing: 0.16em; color: var(--ink-dim);
}
.tier-name { font-weight: 600; }

/* ---------------------------------------------------------------
   9. EVENT FEED
   Cobalt's in-game voice, quoted verbatim.
   --------------------------------------------------------------- */

.feed { border-left: 2px solid var(--rust-deep); padding-left: var(--s3); }
.feed li {
  font-family: var(--face-mono); font-size: var(--t-small);
  color: var(--ink-dim); list-style: none; margin-bottom: 0.35rem;
}
.feed li .hl { font-weight: 500; }

/* ---------------------------------------------------------------
   10. CHANGELOG ENTRY
   --------------------------------------------------------------- */

.entry { border-top: 1px solid var(--rule-soft); padding-top: var(--s3); }
.entry + .entry { margin-top: var(--s4); }
.entry-when {
  font-family: var(--face-mono); font-size: var(--t-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.entry .head { margin: var(--s1) 0 var(--s2); }
.entry ul { margin-left: 1.1em; }
.entry li { color: var(--ink-dim); margin-bottom: 0.3rem; }
.entry li::marker { color: var(--rust); }

.entry code {
  font-family: var(--face-mono); font-size: 0.9em;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule-soft); padding: 0.1em 0.4em;
}

.callout {
  background: var(--surface);
  border-left: 2px solid var(--rule-rust);
  padding: var(--s2) var(--s3);
  color: var(--ink-dim);
}

.correction {
  border-left-color: var(--signal);
  font-family: var(--face-mono);
  font-size: var(--t-small);
}

/* ---------------------------------------------------------------
   11. CATEGORY FILTER
   Real <button>s. The old build used click-only <div>s, which made
   the page's primary interaction unreachable by keyboard.
   --------------------------------------------------------------- */

.filter-row { display: flex; gap: var(--s1); flex-wrap: wrap; }

.filter {
  font-family: var(--face-text); font-weight: 600;
  font-size: var(--t-small); letter-spacing: 0.06em;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--rule);
  padding: 0.5rem 1rem; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filter:hover { color: var(--ink); border-color: var(--ink-faint); }
.filter[aria-pressed="true"] {
  color: var(--ink); border-color: var(--rust); background: var(--surface);
}
.filter[aria-pressed="true"]::before { content: '× '; color: var(--rust); }

/* ---------------------------------------------------------------
   12. PLUGIN ENTRY
   --------------------------------------------------------------- */

.plugin { border-top: 1px solid var(--rule); padding-top: var(--s3); }
.plugin + .plugin { margin-top: var(--s4); }
.plugin-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.plugin-head .head { flex: 1 1 auto; }
.plugin-body { margin-top: var(--s3); }
.plugin ul { margin-left: 1.1em; }
.plugin li { color: var(--ink-dim); margin-bottom: 0.25rem; }
.plugin li::marker { color: var(--rust-deep); }

.is-hidden { display: none; }

/* Animation lives on the revealed state, never on the base rule.
   In the old build it sat on a display:none element, so whether it
   ever played was left to the browser. */
.reveal { animation: rise var(--t-base) var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.empty-state {
  font-family: var(--face-mono); font-size: var(--t-small);
  color: var(--ink-dim); padding: var(--s4) 0; text-align: center;
}