/* ============================================================
   ARCHIVE
   ============================================================ */
.page-head { padding-block: 7.5rem var(--s5); border-bottom: 1px solid var(--rule); }
.page-head__slug { display: flex; flex-wrap: wrap; gap: 0.5rem var(--s4); margin-bottom: var(--s4); }
.page-head h1 {
  font-size: clamp(2.4rem, 8vw, 5.6rem); font-weight: 280;
  letter-spacing: -0.045em; line-height: 0.92;
}
.page-head__lede { margin-top: var(--s4); max-width: 44rem; font-size: var(--t-lg); line-height: 1.4; font-weight: 340; color: var(--bone-2); }

/* ---------- tabs ---------- */
.tabs {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: nowrap; gap: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  border-bottom: 1px solid var(--rule);
  background: rgba(41,45,51,0.96);
  backdrop-filter: blur(6px);
  margin-bottom: var(--s5);
}
.tabs button {
  font-family: var(--f-ui); font-size: var(--t-ui);
  letter-spacing: var(--track-ui); text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--bone-3); padding: 1.1rem 1.15rem 0.95rem; cursor: pointer;
  transition: color var(--d-1), border-color var(--d-1);
  white-space: nowrap;
}
.tabs button:hover { color: var(--bone); }
.tabs button[aria-selected="true"] { color: var(--warm); border-bottom-color: var(--warm); }
.tabs::-webkit-scrollbar { display: none; }
.tabs__note { margin-left: auto; align-self: center; padding: 0 0.5rem; flex: none; }
@media (max-width: 1180px) { .tabs__note { display: none; } }

/* ---------- index + panel ---------- */
.arch { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; padding-bottom: var(--s7); }
@media (max-width: 940px) { .arch { grid-template-columns: minmax(0, 1fr); } }

.idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.idx li { border-bottom: 1px solid var(--rule-2); }
.idx a {
  display: grid; grid-template-columns: 1.9rem minmax(0,1fr) auto;
  gap: var(--s2) var(--s3); align-items: baseline;
  padding: 0.78rem 0.5rem 0.78rem 0;
  text-decoration: none; color: inherit;
  transition: padding-left var(--d-2) var(--e-out), background var(--d-1);
}
.idx a:hover, .idx a:focus-visible { padding-left: 0.65rem; }
.idx a[aria-current="true"] { padding-left: 0.65rem; background: rgba(201,166,120,0.07); }
.idx a[aria-current="true"] .idx__name { color: var(--warm); }
.idx__no { font-family: var(--f-ui); font-size: var(--t-ui); color: var(--bone-4); }
.idx__name { font-size: var(--t-md); font-weight: 350; letter-spacing: -0.014em; }
.idx__role { grid-column: 2; font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: 0.11em; text-transform: uppercase; color: var(--bone-4); margin-top: -0.05rem; }
.idx__cls { align-self: center; }
.idx__cls i {
  display: block; width: 6px; height: 6px; font-style: normal;
  background: currentColor;
}
.idx__cls[data-c="fact"] { color: var(--graphite); }
.idx__cls[data-c="composite"] { color: var(--bone-4); }
.idx__cls[data-c="invented"] { color: var(--stamp); }
.idx__cls[data-c="open"] { color: var(--warm); }

/* ---------- the record panel ---------- */
.rec {
  position: sticky; top: 5.5rem;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, rgba(143,160,176,0.045), transparent 45%);
  padding: clamp(1.3rem, 3vw, 2.4rem);
}
@media (max-width: 940px) { .rec { position: static; margin-top: var(--s5); } }
.rec__top { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: space-between; align-items: center; padding-bottom: var(--s3); border-bottom: 1px solid var(--rule); }
.rec__id { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--bone-4); }
.rec h2 { font-size: var(--t-xl); font-weight: 300; letter-spacing: -0.03em; margin-top: var(--s4); }
.rec__role { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--warm); margin-top: var(--s2); }
.rec:focus-visible { outline: 2px solid var(--warm); outline-offset: 4px; }
.rec__fields { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0.45rem var(--s4); margin: var(--s4) 0; padding: var(--s3) 0; border-block: 1px solid var(--rule-2); font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: 0.1em; text-transform: uppercase; }
.rec__fields dt { color: var(--bone-4); }
.rec__fields dd { margin: 0; color: var(--bone-2); }
.rec__fields dd.is-empty { color: var(--warm); }
.rec__body p { color: var(--bone-2); margin-bottom: 1em; }
.rec__body p:first-child { color: var(--bone); }
.rec__aside { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule-2); display: grid; gap: var(--s3); }
.rec__aside h3 { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--bone-4); font-weight: 450; margin-bottom: 0.4rem; }
.rec__aside p { font-size: var(--t-sm); color: var(--bone-2); margin: 0; }
.rec__aside .rec__belief p { font-family: var(--f-doc); color: var(--warm); }

/* ---------- chronology ---------- */
.chron__filter { display: flex; max-width: 100%; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-2); }
.chron__filter .switch { border-color: var(--rule-strong); }
.chron { list-style: none; margin: 0; padding: 0; }
.chron li {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  gap: 0.4rem var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rule-2);
  transition: opacity var(--d-2) var(--e-out);
}
@media (max-width: 760px) {
  .chron li { grid-template-columns: minmax(0,1fr); gap: 0.5rem; }
  .chron__cls { justify-self: start; }
}
.chron li[data-dim="true"] { display: none; }
.chron__when { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--warm); padding-top: 0.35em; }
.chron li[data-c="fact"] .chron__when { color: var(--graphite); }
.chron__name { font-size: var(--t-md); letter-spacing: -0.014em; margin-bottom: 0.35rem; }
.chron__body { color: var(--bone-3); font-size: var(--t-sm); max-width: 46rem; }
.chron__cls { align-self: start; }
.count { font-family: var(--f-ui); font-size: var(--t-ui); letter-spacing: var(--track-ui); text-transform: uppercase; color: var(--bone-4); }

/* ---------- archive image layouts ---------- */
.rec__content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
}

@media (min-width: 640px) {
  .rec__content-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.rec__photo {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Badge: Rigid, official, color-coded clearance line */
.img-badge {
  border-radius: 4px;
  border: 1px solid var(--graphite);
  filter: grayscale(80%) contrast(1.2);
  padding-top: 15px;
  border-top: 5px solid var(--stamp);
  background: var(--ink-900);
}

/* Polaroid: Casual, rotated, bottom-heavy border */
.img-polaroid {
  background: var(--paper);
  padding: 10px 10px 40px 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
  transform: rotate(-2deg);
  filter: sepia(20%) saturate(1.2);
}

/* Silhouette: Blackout, featureless */
.img-silhouette {
  filter: brightness(0) drop-shadow(0 0 8px rgba(227,222,210,0.3));
  opacity: 0.8;
}