/* bobpore.com shared chrome — tokens, topbar, slabs, buttons, device, footer.
   Pages keep only their page-specific rules inline. See VISUAL.md. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#1c1e21; --bg-deep:#14161a; --panel:#2f3338; --panel-hi:#4a5057;
  --line:#101214; --lcd:#9ca66c; --ink:#1e2410;
  --orange:#ff8c2e; --bone:#c8ccd1; --muted:#9aa0a8; --text:#cfd3d8;
}
body{background:var(--bg);color:var(--text);font-family:'VT323',monospace;font-size:21px;line-height:1.5;
  display:flex;flex-direction:column;align-items:center;padding:0 24px 48px;min-height:100vh}
.wrap{width:920px;max-width:100%}
/* topbar */
.topbar{margin-top:20px;background:linear-gradient(145deg,var(--panel-hi),var(--panel) 60%,#23262a);
  border:3px solid var(--line);border-radius:12px;padding:12px 18px;display:flex;align-items:center;gap:18px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.18),inset -4px -6px 0 rgba(0,0,0,.45)}
.brand{font-family:'Press Start 2P';font-size:10px;letter-spacing:3px;color:var(--bone);text-decoration:none}
.brand b{color:var(--orange)}
nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
nav a{font-family:'Press Start 2P';font-size:9px;letter-spacing:2px;color:var(--muted);text-decoration:none;padding:6px 2px}
nav a:hover,nav a[aria-current="page"]{color:var(--orange);text-decoration:underline}
a{color:var(--orange)}
/* slabs */
.eyebrow{font-family:'Press Start 2P';font-size:10px;letter-spacing:3px;color:var(--orange);margin:22px 0 14px}
.slab{background:var(--panel);border:3px solid var(--line);border-radius:10px;padding:18px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.12),inset -3px -4px 0 rgba(0,0,0,.4)}
.slab p{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65}
a.btn{display:inline-block;font-family:'Press Start 2P';font-size:9px;letter-spacing:2px;color:#111;
  background:var(--orange);padding:10px 14px;text-decoration:none;border:3px solid var(--line);box-shadow:3px 3px 0 #000}
a.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
/* digger device (projects/blog placeholders) */
.device{margin-top:22px;background:linear-gradient(145deg,var(--panel-hi),var(--panel) 60%,#23262a);
  border:3px solid var(--line);border-radius:14px;padding:26px;display:flex;gap:22px;position:relative;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.18),inset -4px -6px 0 rgba(0,0,0,.45),0 18px 45px rgba(0,0,0,.6)}
.screen-wrap{flex:1;background:#17191c;border:3px solid #0c0e10;border-radius:10px;padding:12px;min-width:0}
.lcd{background:var(--lcd);background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px);
  border:2px solid #0c0e10;border-radius:6px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px;box-shadow:inset 0 0 18px rgba(0,0,0,.4);text-align:center}
.lcd svg{width:200px;height:150px;shape-rendering:crispEdges}
.lcd-text{font-family:'Press Start 2P';font-size:12px;color:var(--ink);margin-top:10px;animation:bl 1.2s steps(2) infinite}
@keyframes bl{50%{opacity:.5}}
.controls{width:110px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(0,0,0,.25);border:2px solid #0c0e10;border-radius:10px;padding:18px 0}
.controls .btn{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ffb066,#ff7a1a 55%,#b34a00);
  border:3px solid #0c0e10;box-shadow:0 4px 0 #0c0e10,inset 0 2px 3px rgba(255,255,255,.5);cursor:pointer;display:block}
.controls .btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0c0e10}
.bp{position:absolute;right:16px;bottom:10px;font-family:'Press Start 2P';font-size:13px;letter-spacing:2px;color:var(--bone);text-shadow:0 1px 0 #000}
.devbrand{position:absolute;left:26px;top:8px;font-family:'Press Start 2P';font-size:8px;letter-spacing:3px;color:var(--muted)}
/* footer */
footer{margin-top:28px;border:3px solid var(--line);border-radius:10px;background:var(--bg-deep);padding:14px 18px;
  font-size:19px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer .r{margin-left:auto}
footer a{color:var(--muted)} footer a:hover{color:var(--orange)}
@media(max-width:700px){.device{flex-direction:column}.controls{width:100%;flex-direction:row}}