/* base.css — Foundation: fonts, CSS variables, global reset, base element styles.
   Loaded first; everything else builds on these. */

/* ===== FONTS ===== */
/* The UI renders in MS UI Gothic (a system font). The `regular` and `heading` family
   names used throughout the CSS are aliased to it, so the whole site switches with no
   per-rule edits. The original pixel font is kept as `pixel` for the "latest from cMAYK"
   console only; heading.ttf is no longer used. */
@font-face { font-family: regular; src: local('MS UI Gothic'), local('MS PGothic'), local('Osaka'); }
@font-face { font-family: heading; src: local('MS UI Gothic'), local('MS PGothic'), local('Osaka'); }
@font-face {
  font-family: pixel;
  src: url('../fnt/regular.ttf');
  font-smooth: never;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

/* ===== CSS VARS ===== */
:root {
  --width: 800px;       /* fixed content-column width (no JS scaling; browser zoom only) */
  --height: 600px;      /* design height; the sidebar block is this tall, column fills viewport */
  --nav-width: 184px;   /* fixed sidebar width; the content area fills the remaining 800 - 184 */
  --scrollbar-width: 13px;
  --bar-height: 30px;   /* the header and footer navy bars are exactly the same height */

  /* Font sizes — uniform 12px MS UI Gothic across the whole site */
  --font-body: 12px;
  --font-heading: 12px;
  --line-height: 1.3;   /* one canonical prose line-height; body sets it, text inherits */
}

/* ===== RESET ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Blanket-disable mobile "font boosting" site-wide. The percentage form (100%) did
     NOT reliably suppress it on Android, so `none` is applied to every element directly
     rather than relying on inheritance — no per-block opt-outs needed. */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

/* Keep inherited sizing; real bold/italic render now (MS UI Gothic has both faces). */
b, strong, em, i, th, label {
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-family: heading;
  font-size: var(--font-heading);
}

img {
  display: block;
  border: 0;
}

/* Text input cursor */
input[type="text"], input[type="search"], textarea {
  cursor: text;
  outline: none;
}

/* Links have no underline by default; real underlines are opted into per element. */
a {
  text-decoration: none;
}

/* ...but ~~strikethrough~~ (rendered as <s>) is allowed through the reset.
   Drawn as a 1px background line rather than text-decoration, so it stays a solid
   pixel-crisp block, scales in whole pixels with integer zoom, and can be nudged:
   positioned 1px above the text's vertical center. */
s, del {
  text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(50%);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "MS UI Gothic", "MS PGothic", Osaka, sans-serif;
  font-size: var(--font-body);
  line-height: var(--line-height);
  color: #000;
  /* Font boosting is disabled globally by the reset above (text-size-adjust: none). */
  image-rendering: pixelated;   /* keep the pixel-art images crisp */
  cursor: default;