/* ============================================================
   MERIDIAN — bold editorial-minimal infrastructure brand system
   Concept work. Deliberately opposite to warm-editorial + playful.
   ============================================================ */
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-0.woff2") format("woff2");
  font-weight: 200 900;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-0.woff2") format("woff2");
  font-weight: 300 700;
}

:root {
  --ink: #101014;        /* near-black — the canvas is dark by default */
  --paper: #F4F4F0;      /* off-white paper for light surfaces        */
  --elec: #C6FF3F;       /* electric chartreuse — the single accent   */
  --grey: #6A6A72;       /* muted grey text                           */
  --line: rgba(244,244,240,.14); /* hairline                          */
}

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

body.md {
  background: var(--ink);
  color: var(--paper);
  font-family: "Space Grotesk", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.md .display {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.0;
}
.md .mono-label {
  font-family: "Space Grotesk", monospace;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--grey);
}
.md .mono-label--elec { color: var(--elec); }

/* honesty band */
.md .label-band {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  padding: 14px 40px; color: var(--grey); font-weight: 600;
}
.md .label-band .dot { width: 9px; height: 9px; background: var(--elec); }

.md .rule { height: 1px; background: var(--line); border: 0; }
.md .rule--elec { height: 4px; background: var(--elec); border: 0; width: 88px; }

.md .btn {
  display: inline-block; background: var(--elec); color: var(--ink);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-size: 15px; padding: 18px 44px; text-decoration: none;
}
.md .btn--ghost { background: transparent; color: var(--paper); border: 1px solid var(--line); }

.md .duotone { border: 1px solid var(--line); }
.md .duotone img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); }

.md .token-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.md .token-table td { border-top: 1px solid var(--line); padding: 12px 10px; vertical-align: top; }
.md .token-table td:first-child { color: var(--elec); font-weight: 600; white-space: nowrap; }

.md .chip { border: 1px solid var(--line); color: var(--grey); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; display: inline-block; }

/* big index numbers */
.md .idx { font-family: "Unbounded", sans-serif; font-weight: 200; font-size: 20px; color: var(--elec); }

/* scanline overlay helper */
.md .scan { position: relative; overflow: hidden; }
.md .scan::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px); pointer-events: none; }

.md .gridlines { position: absolute; inset: 0; pointer-events: none; }
.md .gridlines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }