/* ═══════════════════════════════════════════════════════════════
   THE SHELL

   What every page outside the machine agrees on: the palette, the
   reset, how a link behaves, and the nav on the nameplate.

   Deliberately not here: heading sizes, plate padding, wrap widths.
   Those differ per page on purpose — the landing page's title is
   larger than the guide's, the shops sit closer together than the
   prose does — and hauling them in here to remove duplication would
   have meant changing how three pages look in order to tidy a fourth.
   The pages share a palette, not a layout.

   Loaded before each page's own <style>, so a page can still override
   anything here by saying so.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=VT323&display=swap');

:root {
  --shell:      #4a4e54;   /* top face, catches the light */
  --shell-dark: #33373c;   /* lower face, falls into shadow */
  --edge:       #16181b;
  --room:       #131519;   /* the ground everything sits on */
  --ink:        #d8dade;
  --ink-dim:    #8d9298;
  --ink-faint:  #5f656c;
  --lcd:        #7dffb4;
  --lcd-glow:   #b8ffd6;
  --amber:      #ff7a3d;
  --amber-lit:  #ffa070;
}

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

a {
  color: var(--amber-lit);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,160,112,0.35);
}
a:hover { border-bottom-color: var(--amber-lit); }

/*  Visible focus, and only for keyboards: a mouse user clicking a
    button has already been told what they pressed.  */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lcd);
  outline-offset: 3px;
}

/* ── The nameplate's links ─────────────────────────────────────
   Buttons on the same panel, so they are moulded the same way —
   quiet plastic next to whatever the page's own action is.  */
.plate-links { display: flex; align-items: center; gap: 8px; }
.plate-links a {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.19em;
  text-transform: uppercase; font-weight: 500;
  padding: 9px 15px; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.55);
  background: linear-gradient(180deg, #5a5f66 0%, #3d4247 100%);
  color: var(--ink);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 2px 3px rgba(0,0,0,0.5);
  transition: filter 0.15s;
}

/*  border-bottom-color is restated because these are anchors, and the
    link rule above gave every anchor an underline they do not want.  */
.plate-links a:hover { filter: brightness(1.12); border-bottom-color: rgba(0,0,0,0.55); }