:root {
  --sand: #D8D2C0;
  --panel: #EFEAD9;
  --ink: #20241A;
  --grass: #5DAE2E;
  --grass-dark: #3E7D1D;
  --dirt: #7A5230;
  --stone: #8D8D8D;
  --red: #D63A1F;
  --px: "Silkscreen", monospace;
  --sans: "Archivo", system-ui, sans-serif;
  --bd: 3px solid var(--ink);
  --sh: 5px 5px 0 var(--ink);
  --sh-sm: 3px 3px 0 var(--ink);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  color-scheme: light;
  -webkit-tap-highlight-color: rgba(32, 36, 26, .2);
}
body {
  background: var(--sand);
  /* faint block grid, like graph paper from a crafting table */
  background-image:
    linear-gradient(rgba(32, 36, 26, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 36, 26, .05) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: var(--grass); color: var(--ink); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--sand);
  font-family: var(--px); font-size: .8rem; padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.6rem;
  padding: .8rem 4vw;
  background: var(--sand);
  border-bottom: var(--bd);
}
.brand {
  font-family: var(--px); font-weight: 700; font-size: 1.05rem;
  text-decoration: none; color: var(--ink);
  background: var(--grass); border: var(--bd); box-shadow: var(--sh-sm);
  padding: .15rem .55rem;
}
.brand:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.top nav { display: flex; gap: 1.2rem; margin-right: auto; }
.top nav a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; font-size: .95rem; }
.top nav a:hover { background: var(--ink); color: var(--sand); text-decoration: none; }
.status {
  font-family: var(--px); font-size: .72rem;
  display: flex; align-items: center; gap: .5rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lamp { width: 10px; height: 10px; background: var(--red); border: 2px solid var(--ink); animation: blink 2.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- hero ---------- */
main { max-width: 1080px; margin: 0 auto; padding: 0 4vw; }
.hero {
  display: flex; gap: 3rem; align-items: flex-start; justify-content: space-between;
  padding: 8vh 0 6vh;
}
.hero-text { max-width: 36rem; }
h1 {
  font-family: var(--px); font-weight: 700;
  font-size: clamp(1.7rem, 5.2vw, 3.4rem);
  line-height: 1.25; text-wrap: balance;
}
.lede { font-size: 1.15rem; margin-top: 1.4rem; max-width: 34rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.btn {
  display: inline-block; font-family: var(--px); font-size: .85rem;
  background: var(--grass); color: var(--ink); text-decoration: none;
  border: var(--bd); box-shadow: var(--sh); padding: .8rem 1.3rem;
  touch-action: manipulation; transition: transform .12s, box-shadow .12s, background-color .12s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); background: #6CC53A; }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn.dim { background: var(--panel); }
.btn.dim:hover { background: #fff; }
.btn.small { font-size: .75rem; padding: .6rem 1rem; }
.head { flex: none; text-align: center; }
.head img {
  image-rendering: pixelated;
  border: var(--bd); box-shadow: var(--sh);
  background: var(--grass-dark); display: block;
}
.head figcaption { font-family: var(--px); font-size: .62rem; margin-top: .7rem; }

/* ---------- sections ---------- */
.shelf { padding: 5vh 0 6vh; scroll-margin-top: 90px; border-top: var(--bd); }
h2 { font-family: var(--px); font-size: clamp(1.2rem, 3vw, 1.7rem); margin-bottom: 1.6rem; text-wrap: balance; }
.prose { max-width: 40rem; font-size: 1.08rem; }

/* project detail + hotbar */
.detail {
  background: var(--panel); border: var(--bd); box-shadow: var(--sh);
  padding: 1.6rem; max-width: 46rem; min-height: 13rem;
}
.detail-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.detail h3 { font-family: var(--px); font-size: 1.25rem; }
.tag {
  font-family: var(--px); font-size: .68rem;
  background: var(--ink); color: var(--sand); padding: .25rem .6rem;
}
.detail p { margin: 1rem 0 1.3rem; max-width: 38rem; }
.detail.swap p, .detail.swap h3 { animation: pop .25s steps(3); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.hotbar {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 10px; max-width: 46rem; margin-top: 1.2rem;
  background: var(--ink); border: var(--bd); box-shadow: var(--sh);
  padding: 10px;
}
.slot {
  appearance: none; cursor: pointer; touch-action: manipulation;
  background: var(--stone); border: 3px solid #141610;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .35), inset -3px -3px 0 rgba(0, 0, 0, .35);
  aspect-ratio: 1; position: relative; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, background-color .12s;
  animation: drop .4s steps(4) backwards;
}
.slot:nth-child(2) { animation-delay: .06s; }
.slot:nth-child(3) { animation-delay: .12s; }
.slot:nth-child(4) { animation-delay: .18s; }
.slot:nth-child(5) { animation-delay: .24s; }
.slot:nth-child(6) { animation-delay: .3s; }
@keyframes drop { from { opacity: 0; transform: translateY(-26px); } }
.slot svg { width: 52%; height: 52%; shape-rendering: crispEdges; }
.slot .key {
  position: absolute; top: 2px; left: 5px;
  font-family: var(--px); font-size: .6rem; color: #fff;
  text-shadow: 2px 2px 0 #141610;
}
.slot:hover { background: #9d9d9d; }
.slot[aria-pressed="true"] { background: var(--panel); outline: 3px solid var(--sand); outline-offset: -6px; }
.hint { font-family: var(--px); font-size: .68rem; margin-top: .9rem; opacity: .75; }

/* server.properties */
.props {
  margin-top: 1.8rem; max-width: 46rem;
  background: #141610; color: #D8D2C0;
  border: var(--bd); box-shadow: var(--sh);
  padding: 1.4rem 1.6rem; font-size: .92rem; line-height: 1.9;
  overflow-x: auto; tab-size: 4;
}
.props .c { color: #8D8D8D; }

/* contact links */
.links { list-style: none; margin-top: 1.6rem; max-width: 40rem; }
.links li { border-top: var(--bd); }
.links li:last-child { border-bottom: var(--bd); }
.links a {
  display: flex; align-items: center; gap: .8rem;
  padding: 1rem .4rem; font-weight: 600; font-size: 1.1rem;
  color: var(--ink); text-decoration: none;
  transition: background-color .12s, padding .12s;
}
.links a span { width: 1.4em; opacity: 0; transform: translateX(-6px); transition: opacity .12s, transform .12s; }
.links a span::before { content: "➔"; font-family: var(--sans); }
.links a:hover { background: var(--grass); padding-left: .9rem; }
.links a:hover span { opacity: 1; transform: none; }

footer {
  border-top: var(--bd); margin-top: 2vh;
  padding: 1.4rem 0 6rem; font-size: .85rem; opacity: .8; max-width: 40rem;
}

/* xp bar */
.xp {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: .8rem;
  background: #141610; border-top: var(--bd); padding: .45rem 4vw;
}
.xp .lvl { font-family: var(--px); font-size: .7rem; color: var(--grass); white-space: nowrap; }
.xp .track { flex: 1; height: 10px; background: #2c2f22; border: 2px solid #000; }
.xp .fill {
  display: block; height: 100%; width: 100%;
  background: var(--grass); transform: scaleX(0); transform-origin: left;
}

@media (max-width: 720px) {
  .hero { flex-direction: column-reverse; gap: 1.6rem; }
  .status { display: none; }
  .top nav { gap: .9rem; }
  .hotbar { grid-template-columns: repeat(3, 1fr); }
  .detail { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .slot { animation: none; }
}