/* The Miraclemade look, shared by every page of tank.ad: the tank, the classic tank, the
   directory and the policy pages. Taken from the 3DN1 artwork (art/incoming/own/): a black
   canvas, brushed silver, electric cyan that glows; sharp chamfered corners, hexagons,
   thin glowing rules and wide-tracked capitals. The ocean itself keeps its own blue.
   Fonts are self-hosted (the CSP allows no font hosts): Orbitron for the wordmark, headings
   and figures; Rajdhani for everything else. Renters' lettering on the creatures keeps
   Anton (livery.js), so their wraps read as before. */
@font-face { font-family: "Orbitron"; src: url("./fonts/orbitron-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("./fonts/orbitron-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("./fonts/rajdhani-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("./fonts/rajdhani-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("./fonts/rajdhani-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Anton"; src: url("./fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --void: #05070a;          /* page and sheet background */
  --plate: #0d1116;         /* panels and cards */
  --plate-2: #141a21;       /* raised parts, fields */
  --steel: #c9ced4;         /* body text, icons */
  --bright: #eef2f5;        /* headings, names */
  --gunmetal: #8a929c;      /* secondary text (AA on --plate) */
  --edge: #5a6068;          /* bevels, outlines */
  --line: rgba(201, 206, 212, 0.14);
  --cyan: #2fc6f2;          /* actions, focus, links */
  --cyan-hi: #7fe6ff;       /* hover, the glow's core */
  --cyan-deep: #0a7fb0;     /* pressed, gradients */
  --on-cyan: #031018;       /* text on cyan */
  --warn: #ff8a7a;          /* errors */
  --glow: 0 0 18px rgba(47, 198, 242, 0.35);
  --glass: rgba(9, 12, 16, 0.88); /* panels over the tank */
  --cut: 12px;              /* the chamfer */
  --display: "Orbitron", "Rajdhani", system-ui, sans-serif;
  --ui: "Rajdhani", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* A faint low-poly facet field, like the 3DN1 crystal (used at low opacity). */
  --facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%232fc6f2' stroke-opacity='.16' stroke-width='.7'%3E%3Cpath d='M0 60 60 0 140 40 240 0M0 60 70 120 140 40 200 110 240 0M70 120 0 200 90 240 160 170 200 110 240 200 160 170M70 120 160 170M140 40 200 110'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

/* Chamfered: two opposite corners cut, the 3DN1 shape. --cut sets the size. */
.mm-cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
/* A rule with the tagline's dots: — WORD · WORD — */
.mm-rule { display: flex; align-items: center; gap: 12px; font: 600 12px/1 var(--ui); letter-spacing: 0.3em; text-transform: uppercase; color: var(--steel); }
.mm-rule::before, .mm-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan)); box-shadow: var(--glow); }
.mm-rule::after { background: linear-gradient(90deg, var(--cyan), transparent); }
.mm-dot { color: var(--cyan); margin: 0 0.4em; }
/* The credit, on every page. */
.mm-credit { font: 600 11px/1.4 var(--ui); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gunmetal); text-decoration: none; }
.mm-credit b { color: var(--steel); font-weight: 700; }
.mm-credit:hover b, .mm-credit:focus-visible b { color: var(--cyan-hi); }