/* ATLAS WORLDS — DEVLOG */
/* ===================== DEVLOG ===================== */

#devlog .entries {
  display: flex;
  flex-direction: column;
}
#devlog .entry {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 48px;
  align-items: baseline;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
  transition: background .3s;
  cursor: default;
  position: relative;
}
#devlog .entry::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width .4s ease;
}
#devlog .entry:hover::before { width: 100%; opacity: 0.15; }
#devlog .entry .date {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--brass);
}
#devlog .entry .body .tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 8px;
}
#devlog .entry .body h4 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin-bottom: 8px;
  text-transform: uppercase;
}
#devlog .entry .body p {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--ink-dim);
  line-height: 1.5;
}
#devlog .entry .arrow {
  font-family: var(--display);
  font-size: 24px;
  color: var(--brass);
  opacity: 0.4;
  transition: opacity .3s, transform .3s;
}
#devlog .entry:hover .arrow { opacity: 1; transform: translateX(8px); }

#devlog .devlog-note {
  margin-top: 44px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
}
#devlog .devlog-note a { color: var(--brass); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
#devlog .devlog-note a:hover { text-decoration-color: var(--brass); }