body {
  margin: 0;
  background: #c0c0c0;
  color: #000;
  font: 12px/1.4 Verdana, Tahoma, Arial, sans-serif;
}
a { color: #0000c0; }
a:visited { color: #551a8b; }
[hidden] { display: none !important; }

.page { padding: 8px 10px 20px; }

.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 18px; }
.contact { text-align: right; }
.sub { margin: 4px 0 8px; padding-bottom: 6px; border-bottom: 1px solid #808080; align-items: center; }
.skills { color: #303030; }
.pw { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pw input, .pw button { font: inherit; }
.pw-status { min-width: 70px; color: #800000; }
body.gated .skills, body.gated #projects { display: none; }
body.gated .pw { margin-left: 0; }

/* one box per project: credit line, then four columns of work */
.project { border: 1px solid #808080; background: #b4b4b4; margin-bottom: 10px; }
.project-title { margin: 0; padding: 4px 6px; font-size: 12px; background: #d4d4d4; border-bottom: 1px solid #808080; }
.box {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Column and tile widths come from each column's "slots" in site.json (set in app.js).
   Each column spans two rows of the box via subgrid, so all headers share one row
   and stay aligned even when a narrow column's title wraps. */
.col { border-left: 1px solid #808080; display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.col:first-child { border-left: 0; }
.col h2 { margin: 0; padding: 3px 5px; font-size: 12px; background: #9a9a9a; border-bottom: 1px solid #808080; }
.tiles { padding: 4px; display: grid; gap: 4px; align-content: start; }
.empty { margin: 0; color: #606060; }
@media (max-width: 760px) { .box { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .col:nth-child(3) { border-left: 0; } }

.tile {
  display: block; width: 100%; padding: 2px; margin: 0;
  background: #d4d4d4; border: 1px solid #808080; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.tile:hover { border-color: #000; }
.tile:focus-visible { outline: 1px dotted #000; outline-offset: 1px; }
.tile img, .tile video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #a8a8a8; }
.cap { display: block; padding: 2px 1px 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err { padding: 12px 4px; color: #800000; font-size: 11px; background: #a8a8a8; }

/* enlarged view */
.lightbox {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0, 0, 0, .8);
  padding: 12px 20px 20px; box-sizing: border-box;
}
/* Text box pinned at the top with a fixed width, so it stays put while browsing;
   the piece fills the space underneath. */
.lb-inner { display: flex; flex-direction: column; align-items: center; height: 100%; }
.lb-text { order: -1; flex: none; box-sizing: border-box; width: min(700px, 100%); background: #c0c0c0; border: 1px solid #808080; padding: 4px 8px; }
.lb-media { flex: 1 1 auto; min-height: 0; width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; }
.lb-media img, .lb-media video { display: block; max-width: 100%; max-height: 100%; border: 1px solid #808080; }
.embed { width: min(1100px, 100%); max-height: 100%; aspect-ratio: 16 / 9; }
.embed iframe { width: 100%; height: 100%; border: 1px solid #808080; }
.lb-text p { margin: 2px 0 0; }
.lb-nav { margin-top: 2px; font-size: 10px; color: #505050; }
.lightbox.private img, .lightbox.private video { -webkit-user-drag: none; user-select: none; }
.wm { position: fixed; right: 12px; bottom: 8px; color: rgba(255, 255, 255, .4); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; pointer-events: none; }