:root {
  --bg: #120d1c;
  --bg-2: #1c1430;
  --panel: #241a3a;
  --panel-edge: #3d2c5e;
  --ink: #efe6d4;
  --ink-dim: #b3a7c4;
  --tan: #c8873a;
  --cream: #f3dcb4;
  --glow: #3fe0a0;
  --pink: #d0607a;
  --px: 4px;              /* one "pixel" of the chunky borders */
  --pixel-font: "Press Start 2P", ui-monospace, monospace;
  --body-font: "VT323", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, #0d0a14 100%);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 22px;
  line-height: 1.25;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

a { color: var(--glow); }
a:focus-visible { outline: var(--px) solid var(--cream); outline-offset: var(--px); }

/* Twinkling pixel stars across the top of the cave */
.stars {
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  pointer-events: none;
  background-image:
    radial-gradient(var(--cream) 1px, transparent 1.5px),
    radial-gradient(var(--glow) 1px, transparent 1.5px);
  background-size: 140px 90px, 230px 170px;
  background-position: 10px 20px, 80px 60px;
  opacity: .35;
  animation: twinkle 4s steps(2) infinite;
  -webkit-mask-image: linear-gradient(#000, transparent);
          mask-image: linear-gradient(#000, transparent);
}
@keyframes twinkle { 50% { opacity: .15; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 56px 16px 32px;
}
.logo {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgba(63, 224, 160, .25));
  animation: bob 1.6s steps(2) infinite;
}
@keyframes bob { 50% { transform: translateY(-4px); } }

h1 {
  margin: 20px 0 12px;
  font-family: var(--pixel-font);
  font-size: clamp(30px, 8vw, 56px);
  line-height: 1.25;
  letter-spacing: 2px;
  color: var(--cream);
  text-shadow:
    var(--px) var(--px) 0 var(--tan),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 #2b1a12;
}
.tagline { margin: 0; color: var(--ink-dim); font-size: 24px; }
.blink {
  margin: 24px 0 0;
  font-family: var(--pixel-font);
  font-size: 12px;
  color: var(--glow);
  animation: blink 1.2s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Sections ---------- */
main {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 16px 48px;
}
section { margin-top: 40px; }
h2 {
  margin: 0;
  font-family: var(--pixel-font);
  font-size: 18px;
  color: var(--tan);
}
.h-icon { color: var(--glow); }
.section-note { margin: 8px 0 16px; color: var(--ink-dim); }

ul { list-style: none; margin: 0; padding: 0; }

/* Chunky pixel panel: stepped corners made from box-shadows */
.tile, .card {
  position: relative;
  background: var(--panel);
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--panel-edge),
    0 var(--px) 0 0 var(--panel-edge),
    calc(var(--px) * -1) 0 0 0 var(--panel-edge),
    var(--px) 0 0 0 var(--panel-edge),
    0 0 0 0 transparent,
    0 calc(var(--px) * 3) 0 0 #0a0710;
}

/* ---------- The Cave tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 132px;
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .08s steps(2);
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-4px);
  background: #2e2148;
}
.tile:active { transform: translateY(2px); }
.tile-icon { font-size: 34px; line-height: 1; color: var(--glow); }
.tile-name { font-family: var(--pixel-font); font-size: 13px; line-height: 1.5; color: var(--cream); }
.tile-host { color: var(--ink-dim); font-size: 19px; overflow-wrap: anywhere; }

/* ---------- Project cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
}
.card h3 {
  margin: 0 0 10px;
  font-family: var(--pixel-font);
  font-size: 13px;
  line-height: 1.5;
}
.card h3 a { color: var(--cream); text-decoration: none; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }   /* whole card is clickable */
.card:hover { background: #2e2148; }
.card:hover h3 a { color: var(--glow); }
.card p { margin: 0 0 14px; color: var(--ink-dim); flex: 1; }

.lang {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 18px;
  color: #120d1c;
  background: var(--tan);
}
.lang-rust { background: #e0905a; }
.lang-c    { background: #9fb4d8; }
.lang-py   { background: #e6d26a; }

/* ---------- Footer ---------- */
footer {
  position: relative;
  padding: 32px 16px 40px;
  text-align: center;
  border-top: var(--px) dashed var(--panel-edge);
  color: var(--ink-dim);
}
footer p { margin: 4px 0; }
.small { font-family: var(--pixel-font); font-size: 10px; line-height: 1.8; }

@media (prefers-reduced-motion: reduce) {
  .stars, .logo, .blink { animation: none; }
  .tile { transition: none; }
}