/* ==========================================================================
   16-BIT — Projeto MK-1601
   Identidade: manual técnico / datasheet de engenharia, época 1988-1990.
   Fundo blueprint azul-marinho quase preto, grade de esquemático,
   único destaque âmbar (fósforo de CRT / LED indicador).
   ========================================================================== */

:root{
  --bg:            #090d1a;
  --bg-panel:      #0e1530;
  --bg-panel-2:    #101a3a;
  --grid-line:     rgba(94,150,255,0.07);
  --line:          #1e2c56;
  --line-strong:   #2c3f78;
  --ink:           #dce6ff;
  --ink-dim:       #8b9bc9;
  --ink-faint:     #5b6a95;
  --accent:        #2f6bff;
  --accent-soft:   rgba(47,107,255,0.14);
  --amber:         #ffb400;
  --amber-soft:    rgba(255,180,0,0.14);
  --shadow:        0 20px 50px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Chakra Petch", "Segoe UI", sans-serif;
  font-weight:400;
  font-size:17.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* blueprint grid + scanline atmosphere, fixed behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity:0.9;
}
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.10) 3px
  );
  mix-blend-mode:multiply;
  opacity:0.35;
}

.wrap{ position:relative; z-index:1; }

a{ color:var(--amber); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
}

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

.mono{
  font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
}
.display{
  font-family:"Chakra Petch", "Segoe UI", sans-serif;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:5;
  background:rgba(9,13,26,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:920px; margin:0 auto;
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
/* "16-BIT" cartridge badge: real rendered plate, dropped in as an
   image so the topbar carries the actual gold/graphite emblem. */
.brand{
  display:inline-flex; align-items:center;
  line-height:0;
  transition:filter 0.15s ease, transform 0.15s ease;
}
.brand img{
  display:block;
  height:40px;
  width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}
.brand:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.topbar-nav{
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px;
  letter-spacing:0.06em;
  color:var(--ink-dim);
  display:flex; align-items:center; gap:14px;
}
.topbar-nav a{ color:var(--ink-dim); }
.topbar-nav a:hover{ color:var(--amber); }

/* ---------- hero (index) ---------- */
.hero{
  max-width:920px; margin:0 auto;
  padding:64px 20px 40px;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line-strong);
  background:var(--bg-panel);
  padding:6px 12px;
  border-radius:2px;
  margin-bottom:22px;
}
.hero h1{
  font-family:"Chakra Petch", sans-serif;
  font-weight:700;
  font-size:clamp(42px, 9vw, 84px);
  line-height:0.95;
  margin:0 0 18px;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.hero h1 span{ color:var(--amber); }
.hero-sub{
  font-family:"JetBrains Mono", monospace;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 28px;
}
.hero-lede{
  max-width:64ch;
  font-size:19px;
  color:var(--ink);
  margin:0 0 8px;
}
.hero-lede + .hero-lede{ color:var(--ink-dim); }

/* ---------- box-art panel (embalagem Mega Drive BR) ---------- */
.boxpanel{
  position:relative;
  background:#040507;
  border:3px solid #000;
  box-shadow:
    0 0 0 1px #2a3a6e,
    0 0 0 5px #060810,
    var(--shadow);
  padding:52px 36px 40px;
  overflow:hidden;
}
.boxpanel::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 60px rgba(0,0,0,0.65);
  z-index:0;
  pointer-events:none;
}
.boxpanel > *{ position:relative; z-index:1; }

/* chrome/brushed-metal badge, in the spirit of the old cartridge-box
   "16 BITS" nameplate: light gradient, dark embossed letters. */
.chrome-badge{
  position:absolute;
  top:22px; right:22px;
  z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:7px 14px;
  border-radius:4px;
  background:linear-gradient(160deg, #f4f7ff 0%, #c7d0e6 28%, #8b96b8 50%, #d8dfef 72%, #f4f7ff 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 4px 10px rgba(0,0,0,0.55);
}
.chrome-badge .txt{
  font-family:"Chakra Petch", sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.08em;
  color:#1a2140;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
.chrome-badge .icon{ width:16px; height:16px; color:#1a2140; flex:none; }

.pixel-console{ display:block; image-rendering:pixelated; flex:none; }

.hero-watermark{
  position:absolute;
  right:-26px; bottom:-30px;
  width:280px; height:auto;
  color:var(--accent);
  opacity:0.16;
  z-index:0;
  pointer-events:none;
}

/* the "16-BIT" cartridge badge, huge and faded, stamped into the
   corner of the hero panel like a foil emblem pressed into the paper. */
.hero-badge-mark{
  position:absolute;
  right:-70px; bottom:-56px;
  width:560px; max-width:75%; height:auto;
  opacity:0.13;
  z-index:0;
  pointer-events:none;
  filter:saturate(0.9);
  transform:rotate(-3deg);
}

.speedband{
  position:relative;
  height:46px;
  margin:26px -36px 30px;
  overflow:hidden;
}
.speedband::before{
  content:"";
  position:absolute;
  left:-8%; right:-8%; top:-45%;
  height:220%;
  transform:rotate(-6deg);
  background:repeating-linear-gradient(
    100deg,
    transparent 0 16px,
    #eef4ff 16px 30px,
    var(--accent) 30px 52px,
    #0a1330 52px 84px
  );
}

.boxpanel .hero-tag{
  background:rgba(4,5,7,0.7);
  border-color:#2a3a6e;
}
.boxpanel .hero-lede{ text-shadow:0 2px 8px rgba(0,0,0,0.8); }
.boxpanel h1{ text-shadow:0 3px 0 rgba(0,0,0,0.7); }

.boxpanel.compact{
  padding:26px 24px 22px;
  margin-bottom:6px;
}
.boxpanel.compact::before{ height:44px; top:50%; }
.boxpanel.compact .chrome-badge{
  top:14px; right:14px;
  padding:5px 10px;
}
.boxpanel.compact .chrome-badge .txt{ font-size:11px; }
.boxpanel.compact .chrome-badge .icon{ width:13px; height:13px; }
.boxpanel.compact .eyebrow{ display:block; margin-bottom:10px; }
.boxpanel.compact h1{
  font-family:"Chakra Petch", sans-serif;
  font-weight:700;
  font-size:clamp(24px, 4.6vw, 36px);
  line-height:1.14;
  margin:0;
  text-wrap:balance;
}

.hero-figure{
  margin-top:40px;
  border:1px solid var(--line);
  background:var(--bg-panel);
  padding:10px;
  box-shadow:var(--shadow);
}
.hero-figure img{ width:100%; border:1px solid var(--line); }
.hero-figure figcaption{
  font-family:"JetBrains Mono", monospace;
  font-size:11.5px;
  color:var(--ink-faint);
  letter-spacing:0.04em;
  padding:10px 4px 2px;
}

/* ---------- chapter index grid ---------- */
.index-head{
  max-width:920px; margin:0 auto;
  padding:8px 20px 18px;
  display:flex; align-items:center; gap:14px;
}
.index-head hr{
  flex:1; border:none; border-top:1px solid var(--line-strong);
}
.index-head .eyebrow{ white-space:nowrap; }

.grid{
  max-width:920px; margin:0 auto;
  padding:0 20px 80px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}
@media (max-width:640px){
  .grid{ grid-template-columns:1fr; }
}

.card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--bg-panel);
  border:1px solid var(--line);
  padding:20px 20px 26px;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
  overflow:hidden;
}
.card::before{
  /* corner fold, nod to the box's cut-corner spec label */
  content:"";
  position:absolute; top:0; left:0;
  width:0; height:0;
  border-style:solid;
  border-width:26px 26px 0 0;
  border-color:var(--line-strong) transparent transparent transparent;
  transition:border-color .15s ease;
}
.card:hover::before{ border-color:var(--amber) transparent transparent transparent; }
.card:hover{
  border-color:var(--amber);
  background:var(--bg-panel-2);
  transform:translateY(-2px);
}
.card-num{
  font-family:"JetBrains Mono", monospace;
  font-size:12.5px;
  letter-spacing:0.1em;
  color:var(--accent);
  margin-bottom:10px;
}
.card:hover .card-num{ color:var(--amber); }
.card h3{
  font-family:"Chakra Petch", sans-serif;
  font-weight:600;
  font-size:20px;
  line-height:1.25;
  margin:0 0 10px;
  color:var(--ink);
  text-wrap:balance;
}
.card p{
  font-family:"Chakra Petch", "Segoe UI", sans-serif;
  font-weight:400;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-dim);
  margin:0;
  flex:1;
}
.card-icon{
  position:absolute;
  right:18px; top:20px;
  width:30px; height:20px;
  color:var(--line-strong);
  opacity:0.7;
  transition:color .15s ease;
}
.card:hover .card-icon{ color:var(--accent); }
.card-pins{
  display:flex; gap:4px;
  margin-top:18px;
}
.card-pins span{
  height:6px; flex:1;
  background:var(--line-strong);
}
.card:hover .card-pins span{ background:var(--accent); }

/* ---------- chapter page ---------- */
.chapter-head{
  max-width:680px; margin:0 auto;
  padding:48px 20px 20px;
}
.chapter-head .eyebrow{ display:block; margin-bottom:14px; }
.chapter-head h1{
  font-family:"Chakra Petch", sans-serif;
  font-weight:700;
  font-size:clamp(28px, 5vw, 42px);
  line-height:1.12;
  margin:0 0 20px;
  text-wrap:balance;
}
.rule{
  max-width:680px; margin:0 auto;
  height:1px;
  background:linear-gradient(90deg, var(--amber), transparent 60%);
}

.prose{
  max-width:680px; margin:0 auto;
  padding:32px 20px 20px;
}
.prose p{ margin:0 0 20px; }
.prose strong{ color:#fff; font-weight:700; }
.prose h2{
  font-family:"Chakra Petch", sans-serif;
  font-weight:700;
  font-size:26px;
  color:var(--ink);
  margin:0 0 16px;
  text-wrap:balance;
}
.prose .section-divider{
  display:block;
  width:100%;
  height:28px;
  margin:40px 0 28px;
}
.prose .section-divider .trace{ stroke:var(--line-strong); stroke-width:1; }
.prose .section-divider .node{ fill:var(--bg-panel); stroke:var(--amber); stroke-width:1.25; }
.prose .section-divider .node-dot{ fill:var(--amber); }
.prose h3{
  font-family:"Chakra Petch", sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--accent);
  margin:32px 0 12px;
}
.prose h4{
  font-family:"JetBrains Mono", monospace;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--amber);
  margin:26px 0 10px;
}
.prose ul, .prose ol{ margin:0 0 20px; padding-left:1.3em; }
.prose li{ margin-bottom:8px; }
.prose li > p{ margin:0; }
.prose a{ border-bottom:1px solid var(--amber); }

.prose figure.fig{
  margin:28px 0;
  border:1px solid var(--line);
  background:var(--bg-panel);
  padding:12px;
}
.prose figure.fig img{ border:1px solid var(--line); margin:0 auto; }
.prose figure.fig figcaption{
  font-family:"JetBrains Mono", monospace;
  font-size:11.5px;
  color:var(--ink-faint);
  letter-spacing:0.03em;
  padding:10px 2px 0;
  text-align:center;
}

.pcb-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:14px;
  margin:26px 0 6px;
}
.pcb-gallery figure.fig{
  margin:0;
  padding:8px;
  display:flex;
  flex-direction:column;
}
.pcb-gallery figure.fig img{
  width:100%;
  height:150px;
  object-fit:cover;
  margin:0;
}
.pcb-gallery figure.fig figcaption{
  font-size:10px;
  line-height:1.4;
  padding:8px 2px 0;
}
.pcb-credit{
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  color:var(--ink-faint);
  text-align:right;
  margin:0 0 26px;
}
.pcb-credit a{ color:var(--ink-faint); border-bottom:1px solid var(--line-strong); }

.table-wrap{
  overflow-x:auto;
  margin:0 0 24px;
  border:1px solid var(--line);
}
table{
  width:100%;
  border-collapse:collapse;
  font-family:"JetBrains Mono", monospace;
  font-size:13.5px;
  min-width:420px;
}
thead th{
  background:var(--bg-panel-2);
  color:var(--amber);
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
  letter-spacing:0.03em;
}
tbody td{
  padding:9px 14px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
tbody tr:nth-child(even){ background:rgba(94,150,255,0.04); }

/* ---------- prev/next ---------- */
.chapnav{
  max-width:920px; margin:60px auto 0;
  padding:0 20px 70px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width:640px){
  .chapnav{ grid-template-columns:1fr; }
}
.chapnav a{
  display:block;
  border:1px solid var(--line);
  background:var(--bg-panel);
  padding:16px 18px;
  color:var(--ink);
}
.chapnav a:hover{ border-color:var(--amber); background:var(--bg-panel-2); text-decoration:none; }
.chapnav .dir{
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--ink-faint);
  display:block; margin-bottom:6px;
}
.chapnav .ttl{
  font-family:"Chakra Petch", sans-serif;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
}
.chapnav.next{ text-align:right; }

/* ---------- footer ---------- */
/* stamp that closes out a chapter, like a seal pressed into the last
   page — echoes the topbar badge at a larger, more ceremonial size. */
.chapter-seal-wrap{
  display:flex; justify-content:center;
  padding:44px 20px 8px;
}
.chapter-seal{
  width:170px; height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.55));
  opacity:0.95;
}

footer{
  border-top:1px solid var(--line);
  padding:26px 20px 50px;
}
.footer-brand{ display:inline-flex; align-items:center; gap:8px; }
.footer-icon{ width:18px; height:12px; color:var(--ink-faint); }

footer .inner{
  max-width:920px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  color:var(--ink-faint);
  letter-spacing:0.04em;
}
footer a{ color:var(--ink-dim); }