/* ─────────────────────────────────────────────────────────────────
   archive-strip.css · Studio page, "Before the series"
   The Art Archive book as a sideways run of pages, letter by letter.
   Only the strip scrolls sideways; the page never does.
   Tokens come from css/type.css (paper, ink, rule, red, display, mono).
   ───────────────────────────────────────────────────────────────── */

.archive {
  position: relative; z-index: 2;
  border-top: 1px solid var(--rule);
  padding: clamp(2rem, 5vh, 3.2rem) 0 clamp(2rem, 5vh, 3rem);
  --arc-inset: max(var(--edge), calc((100% - 1480px) / 2 + var(--edge)));
  --arc-h: clamp(260px, 60vh, 540px);
}
.archive-head {
  max-width: 1480px; margin: 0 auto;
  padding: 0 var(--edge) 1.1rem;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.6rem 1.4rem;
  align-items: end;
}
.archive-head h3 {
  grid-column: 1 / span 7;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.6rem); line-height: 0.95; letter-spacing: -0.015em;
  color: var(--ink);
}
.archive-head h3 em { font-style: normal; color: var(--red); }
.archive-intro {
  grid-column: 1 / span 7;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.35;
  color: var(--ink-2); max-width: 44ch;
}
.archive-tools {
  grid-column: 8 / span 5; grid-row: 1 / span 2; align-self: end;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem;
}
.archive-meta {
  font-family: var(--mono); font-size: var(--mono-b);
  letter-spacing: var(--mono-b-track); text-transform: uppercase; color: var(--muted);
}
.archive-arrows { display: flex; gap: 0.5rem; }
.archive-arrows button {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--display); font-style: italic; font-size: 1.2rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.archive-arrows button:hover:not(:disabled),
.archive-arrows button:focus-visible { background: var(--red); border-color: var(--red); color: var(--paper); outline: none; }
.archive-arrows button:disabled { opacity: 0.3; cursor: default; }

/* Letter index: A to U, each a turn */
.archive-letters {
  max-width: 1480px; margin: 0 auto;
  padding: 0 var(--edge) 0.9rem;
  display: flex; flex-wrap: wrap; gap: 0.2rem 0.15rem;
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 1.2rem;
}
.arc-jump {
  all: unset; box-sizing: border-box; cursor: pointer;
  min-width: 1.9rem; height: 1.9rem; padding: 0 0.3rem;
  display: inline-grid; place-items: center;
  font-family: var(--display); font-size: 1.05rem; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.arc-jump:hover, .arc-jump:focus-visible { color: var(--red); }
.arc-jump:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.arc-jump.is-on { color: var(--ink); border-bottom-color: var(--red); }

/* The strip */
.archive-strip {
  display: flex; align-items: flex-start; gap: clamp(0.6rem, 1vw, 1rem);
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--arc-inset);
  padding: 0.2rem var(--arc-inset) 1.1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.archive-strip:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.archive-strip::-webkit-scrollbar { height: 6px; }
.archive-strip::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 3px; }
.archive-strip::-webkit-scrollbar-track { background: transparent; }

.arc-marker {
  flex: 0 0 auto; scroll-snap-align: start;
  width: calc(var(--arc-h) * 0.46); height: var(--arc-h);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem;
  padding: 0 0.2rem 0.4rem 1rem;
  border-left: 1px solid var(--rule);
  margin-left: clamp(0.8rem, 2vw, 1.8rem);
}
.arc-marker:first-child { margin-left: 0; }
.arc-L {
  font-family: var(--display); font-weight: 400; font-style: normal;
  font-size: calc(var(--arc-h) * 0.42); line-height: 0.8; letter-spacing: -0.03em;
  color: var(--ink);
}
.arc-L em { font-style: normal; color: var(--red); }
.arc-name {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.1; color: var(--ink);
}
.arc-count {
  font-family: var(--mono); font-size: var(--mono-b);
  letter-spacing: var(--mono-b-track); text-transform: uppercase; color: var(--muted);
}

.arc-page {
  flex: 0 0 auto; margin: 0;
  width: calc(var(--arc-h) * 0.7036);
}
.arc-page img {
  display: block; width: 100%; height: var(--arc-h);
  object-fit: cover; background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 1px 0 rgba(14,14,12,0.04), 0 8px 18px rgba(14,14,12,0.06);
}
.arc-cen {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--arc-h);
  background: var(--ink, #0e0e0c); border: 1px solid var(--ink, #0e0e0c);
  -webkit-user-select: none; user-select: none;
}
.arc-cen span {
  font-family: var(--mono); font-size: var(--mono-b); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--paper, #f4f1ea);
  border: 1px solid currentColor; padding: 0.5em 0.9em; transform: rotate(-6deg);
}
.arc-page figcaption {
  display: flex; gap: 0.5rem; align-items: baseline;
  padding-top: 0.45rem;
  font-family: var(--mono); font-size: var(--mono-b);
  letter-spacing: var(--mono-b-track); text-transform: uppercase; color: var(--ink-2);
}
.arc-page figcaption span { color: var(--muted); }
.arc-page figcaption .arc-folio { margin-left: auto; }

.archive .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 880px) {
  .archive-head h3, .archive-intro, .archive-tools { grid-column: 1 / -1; grid-row: auto; }
  .archive-tools { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (max-width: 600px) {
  /* Page height follows the phone width so a page and the start of the next show together. */
  .archive { --arc-h: max(260px, min(62vh, 100vw, 460px)); }
  .arc-marker { width: calc(var(--arc-h) * 0.44); padding-left: 0.7rem; }
  .arc-L { font-size: calc(var(--arc-h) * 0.34); }
  /* One line of letters that slides, instead of three wrapped rows. */
  .archive-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .archive-letters::-webkit-scrollbar { display: none; }
  .arc-jump { flex: 0 0 auto; min-width: 1.7rem; }
}