/* tomzylla.com — projects.css */
body {
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
  background: #fff;
  max-width: 960px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}
a { color: #111; }
a:hover { color: #555; }
.back {
  display: inline-block;
  margin-bottom: 3rem;
  font-size: .9rem;
  text-decoration: none;
  color: #888;
}
.back:hover { color: #111; }
h1 {
  font-weight: bold;
  font-size: 1rem;
  margin: 0 0 2rem;
  letter-spacing: .02em;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-bottom: 2rem;
}
.filter-btn {
  font-family: inherit;
  font-size: .85rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-btn.active { color: #111; text-decoration: none; font-weight: bold; }
.filter-btn:hover  { color: #111; }
.filter-sep { color: #ccc; font-size: .85rem; user-select: none; }
.proj-table { width: 100%; border-collapse: collapse; }
.proj-table thead tr { border-bottom: 1px solid #111; }
.proj-table th {
  font-weight: bold;
  font-size: .78rem;
  text-align: left;
  padding: .4rem .5rem .4rem 0;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.proj-table td {
  padding: .5rem .5rem .5rem 0;
  font-size: .9rem;
  border-bottom: 1px solid #e8e8e8;
  vertical-align: top;
}
.proj-table tr:last-child td { border-bottom: none; }
.proj-table tr.hidden { display: none; }
.col-year    { width: 3.5rem; color: #888; white-space: nowrap; }
.col-name    { min-width: 160px; }
.col-cat     { width: 120px; color: #666; }
.col-dp      { width: 160px; color: #555; }
.col-prod    { color: #666; }
.note-under  { display: block; font-size: .78rem; color: #aaa; margin-top: .15rem; font-weight: normal; }
.load-more-wrap { margin-top: 2rem; display: none; }
.load-more-btn {
  font-family: inherit;
  font-size: .9rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #888;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.load-more-btn:hover { color: #111; }
.no-results { color: #aaa; font-size: .9rem; padding: 1.5rem 0; display: none; }
@media (max-width: 600px) {
  body { padding: 2.5rem 1.25rem 4rem; }
  .proj-table { display: none; }
  .mob-list { display: block; }
  .mob-item {
    padding: .7rem 0;
    border-bottom: 1px solid #e8e8e8;
  }
  .mob-item:last-child { border-bottom: none; }
  .mob-top {
    display: flex;
    gap: .75rem;
    align-items: baseline;
    margin-bottom: .15rem;
  }
  .mob-year { color: #888; font-size: .82rem; white-space: nowrap; flex-shrink: 0; }
  .mob-name { font-weight: bold; font-size: .95rem; }
  .mob-meta { font-size: .8rem; color: #888; line-height: 1.5; }
  .mob-note { font-size: .76rem; color: #aaa; margin-top: .1rem; }
}
@media (min-width: 601px) {
  .mob-list { display: none; }
}