/* ========================================================================
   MAGDUMP — playmagdump.com
   Mainframe Gaming LLC

   Loud on purpose. Bright ground, hard shadows, heavy condensed display
   type. Deliberately NOT the KNELL register: nothing dark, nothing
   liturgical, no restraint.

   No raster art is referenced anywhere in this file. Every visual is
   type, colour, or CSS geometry, so the site stands up before MAGDUMP
   has an art style — which DESIGN.md still lists as OPEN.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #16110d;
  --ink-soft:   #3a2f26;
  --paper:      #fff6ea;
  --paper-2:    #ffe9cf;
  --orange:     #ff4a00;
  --yellow:     #ffc800;
  --magenta:    #ff1f6b;
  --cyan:       #00cfe8;

  --edge:  3px solid var(--ink);
  --hard:  8px 8px 0 var(--ink);
  --hard-sm: 5px 5px 0 var(--ink);

  --display: "Anton", "Arial Narrow Bold", "Arial Black", Impact, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 100; font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: var(--edge);
}
.topbar__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 64px;
}
.topbar__mark {
  font-family: var(--display);
  font-size: 1.6rem; letter-spacing: .02em;
  text-decoration: none;
  margin-right: auto;
}
.topbar__nav { display: flex; gap: 1.5rem; }
.topbar__nav a {
  text-decoration: none; font-weight: 700;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  padding: .35rem 0; border-bottom: 3px solid transparent;
}
.topbar__nav a:hover { border-bottom-color: var(--orange); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display);
  font-size: 1.15rem; letter-spacing: .04em;
  text-decoration: none; text-transform: uppercase;
  padding: .7rem 1.4rem;
  border: var(--edge);
  background: var(--paper);
  box-shadow: var(--hard-sm);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--primary { background: var(--orange); }
.btn--ghost   { background: var(--cyan); }
.btn--sm { font-size: .95rem; padding: .45rem 1rem; box-shadow: 4px 4px 0 var(--ink); }

/* Pending state: the destination does not exist yet, so the control must
   NOT look live and must not be clickable. Remove `is-pending` from the
   markup once the matching rule in _redirects is filled in. */
.is-pending {
  pointer-events: none;
  background: var(--paper-2);
  color: var(--ink-soft);
  box-shadow: var(--hard-sm);
}
.soon {
  font-family: var(--body);
  font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .14em;
  background: var(--ink); color: var(--paper);
  padding: .15rem .4rem; border-radius: 2px;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(3rem, 9vw, 7rem) 0 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 22px,
      rgba(22, 17, 13, .035) 22px 24px
    ),
    var(--paper);
  overflow: hidden;
}
.hero__inner { position: relative; z-index: 2; text-align: center; }

.eyebrow {
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .34em; font-size: .74rem;
  margin: 0 0 1.4rem;
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(4.2rem, 17vw, 13.5rem);
  line-height: .82;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
  text-shadow:
     .045em .045em 0 var(--orange),
     .09em  .09em  0 var(--magenta);
}

.tagline {
  font-family: var(--display);
  font-size: clamp(1.4rem, 4.4vw, 2.6rem);
  letter-spacing: .01em;
  margin: 1.6rem 0 0;
}

.lede {
  max-width: 46rem; margin: 1.1rem auto 0;
  font-size: clamp(1rem, 1.9vw, 1.2rem);
}
.lede strong {
  background: var(--yellow);
  box-shadow: 0 -.12em 0 var(--yellow) inset;
  padding: 0 .18em;
}

.cta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem; margin: 2.4rem 0 clamp(3rem, 7vw, 5rem);
}

/* tracer streaks — transform/opacity only, cheap to composite */
.tracers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tracers span {
  position: absolute; top: -30%;
  width: 2px; height: 55%;
  background: linear-gradient(to bottom, transparent, var(--orange));
  opacity: 0;
  transform: rotate(28deg);
  animation: tracer 3.6s linear infinite;
}
.tracers span:nth-child(1) { left:  8%; animation-delay: 0s;    }
.tracers span:nth-child(2) { left: 21%; animation-delay: 1.7s;  background: linear-gradient(to bottom, transparent, var(--magenta)); }
.tracers span:nth-child(3) { left: 34%; animation-delay: .8s;   }
.tracers span:nth-child(4) { left: 47%; animation-delay: 2.5s;  background: linear-gradient(to bottom, transparent, var(--cyan)); }
.tracers span:nth-child(5) { left: 61%; animation-delay: 1.2s;  }
.tracers span:nth-child(6) { left: 73%; animation-delay: 3s;    background: linear-gradient(to bottom, transparent, var(--magenta)); }
.tracers span:nth-child(7) { left: 86%; animation-delay: .35s;  }
.tracers span:nth-child(8) { left: 95%; animation-delay: 2.1s;  background: linear-gradient(to bottom, transparent, var(--cyan)); }

@keyframes tracer {
  0%   { transform: translateY(-10%) rotate(28deg); opacity: 0; }
  8%   { opacity: .85; }
  60%  { opacity: .85; }
  100% { transform: translateY(230%) rotate(28deg); opacity: 0; }
}

/* ---------- ticker ---------- */
.ticker {
  border-top: var(--edge); border-bottom: var(--edge);
  background: var(--magenta);
  overflow: hidden;
  padding: .55rem 0;
}
.ticker__rail { display: flex; width: max-content; animation: roll 34s linear infinite; }
.ticker__set {
  font-family: var(--display);
  font-size: 1.25rem; letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-right: 1.5rem;
  color: var(--ink);
}
.ticker__set b { color: var(--paper); padding: 0 .35rem; }
@keyframes roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- bands ---------- */
.band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-bottom: var(--edge); }
.band--yellow { background: var(--yellow); }
.band--paper  { background: var(--paper); }
.band--paper2 { background: var(--paper-2); }
.band--orange { background: var(--orange); }
.band--ink    { background: var(--ink); }

.h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 7.5vw, 5rem);
  line-height: .92; margin: 0 0 1.2rem;
}
.h2 em { font-style: normal; color: var(--paper); -webkit-text-stroke: 2px var(--ink); }
.h2--light { color: var(--paper); }
.h2--light em { color: var(--orange); -webkit-text-stroke: 0; }

.body-lead { max-width: 44rem; font-size: clamp(1rem, 1.8vw, 1.15rem); margin: 0 0 1rem; }
.body-lead--light { color: var(--paper-2); }
.body-lead a { font-weight: 700; }

/* ---------- cards ---------- */
.cards {
  list-style: none; padding: 0; margin: 2.6rem 0 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  border: var(--edge); box-shadow: var(--hard);
  padding: 1.5rem 1.4rem 1.6rem;
  background: var(--paper);
}
.card--orange  { background: var(--orange); }
.card--magenta { background: var(--magenta); }
.card--cyan    { background: var(--cyan); }
.card__title {
  font-family: var(--display);
  font-size: 1.8rem; margin: 0 0 .5rem;
  text-transform: uppercase; letter-spacing: .02em;
}
.card p { margin: 0; }

/* ---------- arsenal ---------- */
.arsenal {
  list-style: none; padding: 0; margin: 2.6rem 0 0;
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.gun {
  border: var(--edge); box-shadow: var(--hard-sm);
  background: var(--paper);
  padding: 1.3rem 1.3rem 1.4rem;
}
.gun--more { background: var(--yellow); }
/* Title above, pips below, always — inline placement wrapped
   inconsistently once a weapon name ran long. */
.gun__head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .5rem; margin-bottom: .55rem;
}
.gun__title {
  font-family: var(--display);
  font-size: 1.5rem; margin: 0;
  text-transform: uppercase; letter-spacing: .02em;
}
.gun p { margin: 0; }
.pips { display: inline-flex; gap: 4px; }
.pips i {
  width: 13px; height: 13px; display: block;
  border: 2px solid var(--ink); background: transparent;
}
.pips i.on { background: var(--orange); }

/* ---------- seed band ---------- */
.seed { text-align: left; }

/* ---------- footage placeholder ---------- */
.slot {
  border: 4px dashed var(--ink);
  padding: clamp(3rem, 10vw, 6rem) 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(22, 17, 13, .05) 14px 16px
    );
}
.slot__label {
  font-family: var(--display);
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  margin: 0; text-transform: uppercase; letter-spacing: .03em;
}
.slot__note { margin: .4rem 0 0; font-weight: 600; }

/* ---------- studio ---------- */
.studio .body-lead { max-width: 40rem; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding: 3rem 0; }
.foot__inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: end; }
.foot__mark {
  font-family: var(--display);
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  margin: 0; line-height: .85;
  color: var(--paper);
  text-shadow: .04em .04em 0 var(--orange);
}
.foot__meta { margin: 0; font-size: .85rem; color: var(--paper-2); text-align: right; }

/* ---------- motion / narrow ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tracers { display: none; }
  .ticker__rail { animation: none; }
  .btn { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 720px) {
  .topbar__nav { display: none; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
  .foot__meta { text-align: left; }
}

/* The site commits to one bright look on purpose; it does not follow the
   viewer's dark-mode preference. High-octane is the brand. */