/* Tilde-ish, monochrome, boxy borders */
:root {
  --bg: #000;         /* page background */
  --ink: #c5f276;     /* primary text (retro green) */
  --dim: #8aa63a;     /* dimmer accents */
  --line: #5a6f25;    /* border color */
  --white: #fff;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

/* Banner */
.site-banner {
  padding: .75rem 1rem;
  text-align: center;
  border-bottom: 1px dashed var(--line);
}
.site-banner h1 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: .06em;
}
.dim { color: var(--dim); }
.tagline { margin: .25rem 0 0; color: var(--white); opacity: .85; }

/* Grid with three rows */
.grid {
  width: min(92vw, 88ch);
  margin: 1rem auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* “Tilde table” tiles */
.tile {
  border: 1px solid var(--line);
  padding: 0; /* inner padding lives in .tile-body */
  background: color-mix(in oklab, var(--bg), #0a0a0a 35%);
  box-shadow: 0 0 0 1px #000 inset; /* crisp edge */
}

.tile-title {
  margin: 0;
  padding: .5rem .75rem;
  font-size: .95rem;
  color: var(--white);
  background:
    linear-gradient(to bottom, transparent, transparent 50%, rgba(255,255,255,.04) 50%, rgba(255,255,255,.04) 100%);
  border-bottom: 1px dashed var(--line);
}
.tile-body {
  padding: .75rem .9rem;
}

/* Row 3 split */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
}
.two-col .col + .col {
  border-top: 1px dashed var(--line);
}

/* Lists */
.updates, .links {
  margin: 0;
  padding-left: 1.1rem;
}
.updates li, .links li { margin: .25rem 0; }
time { color: var(--dim); }

/* Footer */
.site-footer {
  text-align: center;
  color: var(--white);
  opacity: .75;
  padding: 1rem;
  border-top: 1px dashed var(--line);
}

/* Links */
a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--dim); }
a:hover { color: var(--white); }

/* Responsive: make row 3 two columns on wider screens */
@media (min-width: 720px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
  .two-col .col + .col {
    border-top: none;
    border-left: 1px dashed var(--line);
  }
}