/* ==========================================================================
   KUTAY OS — Archive
   One column of history: year, name, one-line role, and a way in. Metrics
   follow the original's final Archive (styles.css + os-ui.css + v109.css).
   ========================================================================== */

.archive-page { padding: var(--space-6); }
.archive-intro { display: grid; gap: 12px; padding: 12px 4px 20px; }
.archive-intro > * { margin: 0; }
.archive-kicker { font-size: 9px; letter-spacing: .18em; color: var(--text-dim); text-transform: uppercase; }
.archive-intro h1 { font-size: 44px; font-weight: 700; letter-spacing: -.05em; line-height: 1.05; }
.archive-intro p { font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 46em; }

.archive-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.archive-row {
  position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1.5fr) 88px; align-items: center; gap: 12px;
  min-height: 72px; padding: 14px 12px; border-bottom: 1px solid var(--line-2); color: var(--text); border-radius: 0;
  transition: background var(--dur-base), padding var(--dur-base) var(--ease-out);
}
.archive-row::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleY(0); transition: transform var(--dur-base) var(--ease-out);
}
.archive-row:hover, .archive-row.is-selected { background: rgba(255, 255, 255, .04); }
.archive-row:hover::before, .archive-row.is-selected::before, .archive-row:focus-visible::before { transform: scaleY(1); }
.archive-row:hover { padding-left: 18px; }
.archive-row:active { background: rgba(255, 255, 255, .07); }
.archive-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.archive-row .year { font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.archive-row b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-row .role { font-size: 13px; line-height: 1.45; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.archive-row .arrow { font-size: 13px; white-space: nowrap; justify-self: end; color: var(--text-muted); transition: color var(--dur-base); }
.archive-row .arrow span { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
.archive-row:hover .arrow, .archive-row.is-selected .arrow { color: var(--accent); }
.archive-row:hover .arrow span { transform: translate(3px, -3px); }

.archive-list.is-entering .archive-row { animation: archiveIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes archiveIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .archive-page { padding: var(--space-4); }
  .archive-intro h1 { font-size: 36px; }
  .archive-row { grid-template-columns: 84px minmax(0, 1fr) 20px; grid-template-areas: "year name arrow" "year role arrow"; row-gap: 3px; min-height: 68px; }
  .archive-row .year { grid-area: year; align-self: start; padding-top: 2px; white-space: normal; line-height: 1.35; }
  .archive-row b { grid-area: name; }
  .archive-row .role { grid-area: role; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12.5px; }
  .archive-row .arrow { grid-area: arrow; font-size: 0; }
  .archive-row .arrow span { font-size: 14px; }
  .archive-row:hover { padding-left: 12px; }
}
@media (max-width: 420px) { .archive-row { grid-template-columns: 64px minmax(0, 1fr) 18px; } .archive-row .year { font-size: 12px; } }