/* ==========================================================================
   jrzbk.com — base.css
   Design tokens, reset, typography and the NES dialogue-box page style.
   No @import, no web fonts, no external anything.
   ========================================================================== */

:root {
  /* --- Palette (concept §6): actual NES colours, nothing invented ------- */
  --sky:        #5c94fc;   /* home page background */
  --ground:     #c84c0c;   /* ground tiles, bricks */
  --ground-hi:  #fc9838;   /* tile top edges */
  --green:      #00a800;   /* pipes, hills, bushes */
  --green-hi:   #58d854;   /* tile highlights */
  --coin:       #f8b800;   /* coins, headings, ? block */
  --red:        #d82800;   /* player, cursor, warnings — large text only */
  --blue:       #0058f8;   /* dialogue-box outer ring */
  --blue-lt:    #3cbcfc;   /* links */
  --white:      #fcfcfc;   /* HUD text, clouds */
  --ink:        #0d0d10;   /* content-page background */

  /* --- Supporting greys ------------------------------------------------- */
  --surface:    #1c1c2a;
  --dim:        #9c9c9c;   /* 7.0:1 on --ink */
  --body:       #e8e8f0;

  /* --- Grid: 8px, because NES tiles are 8x8 ----------------------------- */
  --u: 8px;

  /* --- Type ------------------------------------------------------------- */
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
          "DejaVu Sans Mono", monospace;
}

/* --- Reset. border-radius:0 globally — the NES had no rounded corners. --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

html {
  background: #07070a;
  /* Never scale text on orientation change; it breaks the 8px grid. */
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--body);
  font-family: var(--mono);
  font-size: 16px;              /* 16px minimum for body copy */
  line-height: 1.65;
  -webkit-font-smoothing: none;
  min-height: 100vh;
}

img, canvas, svg { display: block; max-width: 100%; }

/* --- Links ------------------------------------------------------------- */
a { color: var(--blue-lt); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--white); }

/* Focus rings stay visible everywhere. This is not negotiable. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--coin);
  outline-offset: 2px;
}

/* --- Utilities ---------------------------------------------------------- */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--u); top: calc(var(--u) * -8);
  z-index: 100;
  background: var(--coin); color: #000;
  border: 4px solid #000;
  padding: var(--u) calc(var(--u) * 2);
  text-decoration: none;
  transition: none;
}
.skip:focus { top: var(--u); color: #000; }

/* ==========================================================================
   Page shell
   ========================================================================== */

.wrap {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}

/* The home page needs the full width for the console bezel. */
.wrap--wide { width: min(920px, 100%); align-items: center; }

/* --- Top bar: a HUD, not a navigation bar ------------------------------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u) calc(var(--u) * 2);
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.crumb a { color: var(--white); text-decoration: none; }
.crumb a:hover { color: var(--coin); }
.crumb .world { color: var(--coin); }

/* ==========================================================================
   The NES dialogue box — black field, 4px white border, blue outer ring.
   The box-shadow is a flat ring, not a shadow: no blur, no offset.
   ========================================================================== */
.box {
  background: #000;
  border: 4px solid var(--white);
  box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--blue);
  padding: calc(var(--u) * 3);
  /* Leave room for the 8px ring so it never clips against the viewport. */
  margin: var(--u);
}

@media (max-width: 520px) {
  .box { padding: calc(var(--u) * 2); }
  .wrap { padding: calc(var(--u) * 2) var(--u) calc(var(--u) * 4); }
}

/* --- Headings use the pixel-ish letterspaced treatment, never body copy -- */
.box h1 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coin);
  margin-bottom: calc(var(--u) * 3);
}
.box h2 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-hi);
  margin: calc(var(--u) * 4) 0 var(--u);
}
.box h3 {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin: calc(var(--u) * 3) 0 var(--u);
}
.box > :first-child { margin-top: 0; }

/* Measure capped at 68 characters — past that, monospace becomes a wall. */
.box p,
.box li,
.box dd,
.box dt { max-width: 68ch; }

.box p { margin-bottom: calc(var(--u) * 2); }
.box ul, .box ol { margin: 0 0 calc(var(--u) * 2) calc(var(--u) * 3); }
.box li { margin-bottom: var(--u); }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }

.box code {
  background: var(--surface);
  color: var(--green-hi);
  padding: 0 4px;
  font-family: inherit;
  font-size: inherit;
}
.box pre {
  background: var(--surface);
  border-left: 4px solid var(--green);
  padding: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 2);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.5;
}
.box pre code { background: none; padding: 0; color: var(--body); }

.box blockquote {
  border-left: 4px solid var(--coin);
  padding-left: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) * 2);
  color: var(--dim);
}

.box hr {
  border: 0;
  border-top: 4px solid var(--surface);
  margin: calc(var(--u) * 4) 0;
}

.box dl { margin-bottom: calc(var(--u) * 2); }
.box dt { color: var(--white); margin-top: var(--u); }
.box dd { margin-left: calc(var(--u) * 3); color: var(--dim); }

.lede { color: var(--white); }
.note { font-size: 14px; color: var(--dim); }

/* --- Post lists --------------------------------------------------------- */
.posts { list-style: none; margin-left: 0; }
.posts li { margin-bottom: calc(var(--u) * 3); max-width: 68ch; }
.posts time {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--dim);
}
.posts a {
  font-size: 17px;
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  min-height: 32px;
}
.posts a:hover { color: var(--coin); text-decoration: underline; }
.posts .teaser { color: var(--dim); font-size: 15px; }

.postmeta {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: calc(var(--u) * 3);
}

/* ==========================================================================
   PAUSE MENU — the plain navigation.
   Always visible, never a fallback. Every href is real.
   ========================================================================== */
.menu {
  width: 100%;
  border: 4px solid var(--surface);
  padding: calc(var(--u) * 2);
}
.menu h2 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--coin);
  margin-bottom: var(--u);
}
.menu ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--u) * 3);
}
.menu a {
  color: var(--white);
  text-decoration: none;
  font-size: 15px;
  /* 44px tap target, per the accessibility budget. */
  min-height: 44px;
  display: flex;
  align-items: center;
}
.menu a:hover { color: var(--blue-lt); }
.menu a[aria-current="page"] { color: var(--coin); }
.menu a[aria-current="page"]::before { content: "\25B6\00a0"; }
.menu .legalnote {
  font-size: 12px;
  color: var(--dim);
  margin-top: var(--u);
  max-width: 68ch;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u) calc(var(--u) * 2);
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
.foot a,
.foot button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--dim);
  background: none;
  border: 2px solid var(--surface);
  padding: 0 10px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.foot a:hover,
.foot button:hover { color: var(--white); border-color: var(--dim); }
.foot .on { color: var(--green-hi); border-color: var(--green); }
.foot b { color: var(--coin); font-weight: 400; }
.foot .plain { border: 0; padding: 0; min-height: 0; }

/* JS-only controls stay out of the document until JS turns them on.
   !important because the footer's own `.foot a` rule is more specific and
   would otherwise win. */
.jsonly { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}