/* a positions screen: the table on the left, a preview on the right */
.port { position: fixed; inset: 0; }

.port__head {
  position: absolute; left: var(--pad); right: var(--pad); top: 92px;
  display: flex; justify-content: space-between; margin: 0;
  color: var(--white-dim);
}
.port__head b { color: var(--white); font-weight: 500; }

.port__table {
  position: absolute; left: var(--pad); top: 128px; bottom: 70px;
  width: calc(58% - var(--pad));
  overflow-y: auto; scrollbar-width: none;
  border-top: 1px solid rgba(236,236,234,.16);
}
.port__cols, .row {
  display: grid; grid-template-columns: 36px 1fr 120px 44px; align-items: center; gap: 16px;
}
.port__cols { padding: 8px 10px; color: var(--white-dim); border-bottom: 1px solid rgba(236,236,234,.16); }
.port__cols span:last-child { text-align: right; }

.row {
  position: relative;
  padding: 11px 10px;
  border-bottom: 1px solid rgba(236,236,234,.08);
  color: var(--white-dim);
  transition: background-color .2s ease, color .2s ease;
}
.row i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.row__year { text-align: right; }
.row__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row__name b { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #b9b9b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; }
.row__name small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__trace { width: 120px; height: 26px; display: block; }
.row.on { background: rgba(236,236,234,.045); color: var(--white); }
.row.on b { color: var(--white); }
.row.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.row.on .row__n { color: var(--accent); }

/* preview */
.port__preview {
  position: absolute; right: var(--pad); top: 128px; bottom: 70px;
  width: calc(42% - var(--pad) * 2 - 24px);
  display: flex; flex-direction: column; gap: 14px;
}
.port__shot {
  position: relative; display: grid; place-items: center;
  height: min(34vh, 300px); background: #101010; border: 1px solid #262624; overflow: hidden;
}
.port__shot img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; transition: opacity .3s; }
.port__shot.invert img { filter: grayscale(1) invert(1) contrast(1.1); }
.port__shot:hover img { opacity: 1; }
.port__shot span { font-size: clamp(22px, 2.6vw, 38px); font-weight: 900; font-stretch: 112%; text-align: center; padding: 0 24px; color: rgba(236,236,234,.14); line-height: 1; }
.port__preview p { margin: 0; }
#pcap { color: var(--white-dim); }
#ptitle { margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; font-stretch: 108%; line-height: 1.05; }
#ptext { font-size: 13px; line-height: 1.6; color: #c9c9c5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
#pfig { color: var(--accent); }
#popen { align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

@media (max-width: 760px) {
  .port__table { width: auto; right: var(--pad); bottom: 64px; scrollbar-width: thin; }
  .port__preview { display: none; }
  .port__cols, .row { grid-template-columns: 26px 1fr 64px 36px; gap: 10px; }
  .row__trace { width: 64px; }
}