/* ============================================================
   archive-page.css — The Archive: chronology, papers, section nav
   ============================================================ */

/* ---------- SECTION HEADS ---------- */
.sec-head{margin:var(--s-16) 0 var(--s-8);max-width:var(--measure)}
.sec-head h2{font-family:var(--serif);font-weight:300;font-size:var(--t-h2);
  line-height:1.1;letter-spacing:-.01em;margin:var(--s-2) 0}
.sec-lead{font-size:var(--t-lead);line-height:1.55;color:var(--dim)}

/* ---------- SECTION NAV ---------- */
.arch-nav{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--s-6);
  border-top:1px solid var(--eerie)}
@media(min-width:800px){.arch-nav{grid-template-columns:repeat(3,1fr);gap:var(--s-8);border-top:none}}
.arch-card{display:block;text-decoration:none;color:inherit;
  padding:var(--s-4) 0;border-bottom:1px solid var(--platinum);
  transition:padding-left var(--dur-base) var(--ease)}
@media(min-width:800px){.arch-card{border-top:1px solid var(--eerie);border-bottom:none}}
.arch-card:hover{padding-left:6px}
.arch-card:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}
.ac-n{display:block;font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.2em;color:var(--dim);margin-bottom:var(--s-2)}
.ac-t{display:block;font-family:var(--serif);font-size:var(--t-h3);line-height:1.2}
.ac-d{display:block;font-family:var(--sans);font-size:var(--t-caption);
  line-height:1.5;color:var(--dim);margin-top:.4em}

/* ---------- THE CHRONOLOGY ----------
   One vertical spine. Nodes sit on it; the year pins while you read it, so
   the reader always knows where they are without a separate index. */
.timeline{position:relative;margin-top:var(--s-8)}

.tl-year{position:relative;padding-left:var(--s-6)}
@media(min-width:700px){.tl-year{padding-left:6.5rem}}

/* The spine itself. */
.tl-year::before{content:'';position:absolute;top:0;bottom:0;
  left:var(--s-2);width:1px;background:var(--platinum)}
@media(min-width:700px){.tl-year::before{left:5rem}}

.tl-y{position:sticky;top:0;z-index:5;
  margin:0;padding:var(--s-3) 0 var(--s-2);
  background:var(--white);
  font-family:var(--sans);font-size:var(--t-caption);font-weight:500;
  letter-spacing:.18em;color:var(--eerie);
  font-variant-numeric:tabular-nums}
@media(min-width:700px){
  .tl-y{position:sticky;top:0;margin-left:-6.5rem;width:6.5rem;padding-left:0;
    background:linear-gradient(to bottom, var(--white) 70%, transparent)}
}
.tl-body{padding-bottom:var(--s-6)}

/* An event. The node is a dot on the spine. */
.tl-ev{position:relative;display:block;text-decoration:none;color:inherit;
  padding:var(--s-2) 0 var(--s-3);max-width:var(--measure)}
a.tl-ev:hover .tl-text{color:var(--eerie)}
a.tl-ev:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}
.tl-node{position:absolute;left:calc(var(--s-2) * -1 - 3px);top:calc(var(--s-2) + .45em);
  width:7px;height:7px;border-radius:50%;
  background:var(--white);border:1px solid var(--dim);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
@media(min-width:700px){.tl-node{left:calc(-1.5rem - 3px)}}
a.tl-ev:hover .tl-node{background:var(--eerie);border-color:var(--eerie)}

.tl-date{display:block;font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:.3em}
.tl-text{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.6;
  color:var(--dim);transition:color var(--dur-fast) var(--ease)}
.tl-flag{display:inline-block;margin-top:.45em;
  font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
  border:1px solid var(--platinum);padding:.25em .6em}

/* Kind is carried by the node, quietly — a death is filled, work is open. */
.tl-death .tl-node{background:var(--eerie);border-color:var(--eerie)}
.tl-award .tl-node{background:var(--platinum);border-color:var(--dim)}
.tl-life .tl-node,.tl-studio .tl-node{border-color:var(--eerie)}

/* Films as ticks: the working rhythm, without 68 titles drowning the record. */
.tl-films{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding:var(--s-2) 0 var(--s-3)}
.tl-films-label{font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--platinum);white-space:nowrap}
.tl-ticks{display:flex;flex-wrap:wrap;gap:5px}
.tl-tick{display:block;width:14px;height:3px;background:var(--platinum);
  transition:background var(--dur-fast) var(--ease)}
.tl-tick.has-study{background:var(--dim)}
.tl-tick:hover{background:var(--eerie)}
.tl-tick:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}
.tl-tick .u{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Songs as a comparative bar: the 1950s ran at fifteen a year, the 1970s at
   four, and the shape says that faster than any sentence. Scaled to the
   tallest year (21, in 1951). */
.tl-songs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  padding:0 0 var(--s-4)}
.tl-songs-label{font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--platinum);white-space:nowrap;min-width:5.5em}
.tl-bar{display:block;width:min(220px,42vw);height:3px;background:var(--apparatus)}
.tl-fill{display:block;height:100%;background:var(--platinum)}
.tl-song-links{display:flex;flex-wrap:wrap;gap:var(--s-2);
  font-family:var(--serif);font-size:.86rem;font-style:italic}
.tl-song-links a{color:var(--dim);text-decoration:none;
  border-bottom:1px solid var(--platinum);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.tl-song-links a:hover{color:var(--eerie);border-bottom-color:var(--eerie)}
.tl-song-links a:focus-visible{outline:2px solid var(--eerie);outline-offset:3px}

/* ---------- PAPERS ---------- */
.papers{display:grid;grid-template-columns:1fr;gap:var(--s-8);margin-top:var(--s-6)}
@media(min-width:900px){.papers{grid-template-columns:repeat(2,1fr);gap:var(--s-12)}}
.paper{border-top:1px solid var(--eerie);padding-top:var(--s-4)}
.pp-kicker{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-2)}
.pp-kicker a{color:var(--dim)}
.paper h3{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);
  line-height:1.2;margin-bottom:var(--s-2)}
.pp-note{font-size:var(--t-caption);line-height:1.7;color:var(--dim);margin-bottom:var(--s-4)}
.pp-links{display:flex;flex-direction:column;gap:var(--s-2);max-width:22rem}