:root {
  --bg: #000000;
  --fg: #ffffff;
  --font: 'Space Mono', monospace;
  --width: min(600px, 92vw);
  --divider: #333;
}

* { box-sizing: border-box; margin: 0; padding: 0; cursor: crosshair; }

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 11px;
  line-height: 1.25;
  text-transform: uppercase;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: none;
  overflow-y: auto;
}

.section-top { width: var(--width); margin: 0 auto; display: flex; flex-direction: column; }

.hero { position: relative; padding-left: calc(15% + 16px); margin-bottom: 1.5rem; }
.hero-image { position: absolute; left: 0; top: 0; bottom: 0; width: 15%; display: flex; align-items: flex-start; }
.hero-image img { width: 100%; max-height: 100%; object-fit: contain; display: block; opacity: 0.8; }
.hero-text { width: 100%; }

.name { font-size: 13px; font-weight: 700; letter-spacing: 1px; margin-bottom: 4px; }
.sub { font-size: 10px; opacity: 0.7; line-height: 1.45; margin-bottom: 0.75rem; }

.links { display: flex; justify-content: flex-start; gap: 1rem; font-size: 10px; flex-wrap: wrap; }
.links a { color: var(--fg); text-decoration: none; font-weight: 700; opacity: 0.8; transition: opacity 0.2s; }
.links a:hover { opacity: 1; text-decoration: underline; }

.log { display: flex; flex-direction: column; }
.row { display: flex; font-size: 11px; justify-content: flex-start; align-items: baseline; padding: 2px 0; }
.yr { flex: 0 0 40px; opacity: 0.5; }
.org { flex: 0 0 220px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 5px; }
.role { flex: 1; text-align: right; white-space: nowrap; opacity: 0.9; overflow: hidden; text-overflow: ellipsis; }

.row--tagged { position: relative; }

.tag-new {
  position: absolute;
  right: 0;
  transform: translateX(calc(100% + 8px));
  color: #ff3333;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.gallery {
  width: var(--width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-bottom: 40px;
}

.gallery:empty {
  display: none;
}

.gallery-item {
  width: calc((100% - 15px) / 6);
  aspect-ratio: 1;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.gallery-item img:hover {
  opacity: 1;
}

@media (max-width: 620px) {
  .hero { padding-left: 0; }
  .hero-image { position: static; width: 30%; margin-bottom: 12px; }
  .hero-image img { max-height: none; }

  .row { flex-direction: column; align-items: flex-start; padding: 0; margin-bottom: 12px; border-left: 1px solid var(--divider); padding-left: 8px; }
  .yr { flex: unset; width: 100%; margin-bottom: 2px; font-size: 10px; }
  .org { flex: unset; width: 100%; white-space: normal; margin-bottom: 2px; }
  .role { flex: unset; width: 100%; text-align: left; white-space: normal; opacity: 0.7; }

  .tag-new { position: static; transform: none; display: block; margin-top: 2px; }

  .gallery-item {
    width: calc((100% - 9px) / 4);
  }
}