
:root {
  --brand: #0c8f7a;
  --brand-dark: #06695c;
  --ink: #222;
  --muted: #666;
  --bg: #fff;
  --surface: #f6f7f8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.65;
}
header, footer { background: var(--surface); padding: 1rem; }
.container { max-width: 960px; margin: 0 auto; padding: 1.25rem; }
h1, h2 { color: var(--brand-dark); line-height: 1.2; }
a.button {
  display: inline-block; padding: .6rem 1rem; text-decoration: none;
  background: var(--brand); color: #fff; border-radius: .5rem;
}
a.button:hover { background: var(--brand-dark); }
.card {
  background: #fff; border: 1px solid #e6e8eb; border-radius: .75rem; padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
ul { padding-left: 1.1rem; }
.meta { color: var(--muted); font-size: 0.95rem; }
.nav {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
}
.badge { font-size: .85rem; padding: .25rem .5rem; background: #eef6f4; border-radius: .4rem; color: var(--brand-dark);}
hr { border: none; border-top: 1px solid #ececec; margin: 1.25rem 0; }


.banner.hiring { background:#0c8f7a; color:#fff; padding:.6rem 0; text-align:center; }
.banner.hiring .container { font-weight:600; }
.brewery { margin-top:1rem; }
.brewery h2 { margin-top:0; }
.grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: .85rem; }
.repo { background:#fff; border:1px solid #e6e8eb; border-radius:.75rem; padding:.9rem; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.repo .name { font-weight:700; }
.repo .desc { color:#555; margin:.35rem 0 .5rem; }
.repo .meta { font-size:.85rem; color:#777; }
.lanes { display:grid; grid-template-columns: 1fr; gap:1rem; }
@media (min-width: 900px){ .lanes { grid-template-columns: repeat(3, 1fr); } }
.lane { background:#f9fafb; border:1px solid #eef1f4; border-radius:.75rem; padding:1rem; }
.lane h3 { margin-top:0; }
.tgif { margin-top:1rem; text-align:center; font-weight:600; }
