/* =========================================================
   PINNED — Collection page timeline ("the ruler")
   Loaded only by collection.html, after pinned.css.

   Each exhibit is one row: its name flush left, a brass line
   underneath spanning its years, and its dates on the line.

   THE SCALE ("equal eras"): 1850–1900, 1900–1950, 1950–2000
   and 2000–today each get a quarter of the width, so the modern
   exhibits have room. A note under the ruler says so.

   TO ADD OR CHANGE AN EXHIBIT you only write years in the HTML:
     style="--from: 1911; --to: 1969;"
   For one that runs to the present: --to: var(--today);
   Each January, update --today below to the new year.
   ========================================================= */

.ruler {
  --today: 2026;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

/* Where a year falls on the equal-eras scale, as a percentage.
   Four quarters; each clamp() fills one quarter from 0 to 1. */
.ruler-row {
  --x1: calc(25% * (
          clamp(0, (var(--from) - 1850) / 50, 1)
        + clamp(0, (var(--from) - 1900) / 50, 1)
        + clamp(0, (var(--from) - 1950) / 50, 1)
        + clamp(0, (var(--from) - 2000) / (var(--today) - 2000), 1)));
  --x2: calc(25% * (
          clamp(0, (var(--to) - 1850) / 50, 1)
        + clamp(0, (var(--to) - 1900) / 50, 1)
        + clamp(0, (var(--to) - 1950) / 50, 1)
        + clamp(0, (var(--to) - 2000) / (var(--today) - 2000), 1)));
}

/* -- Scale across the top ----------------------------------- */
.ruler-scale { position: relative; height: 1.6rem; margin: 0; padding: 0; list-style: none; }
.ruler-scale li {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.ruler-scale li:nth-child(1) { left: 0; transform: none; }
.ruler-scale li:nth-child(2) { left: 25%; }
.ruler-scale li:nth-child(3) { left: 50%; }
.ruler-scale li:nth-child(4) { left: 75%; }
.ruler-scale li:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* Faint dotted guides at 1900, 1950, 2000, behind the rows */
.ruler-guides {
  position: absolute;
  top: 1.6rem;
  bottom: 2.4rem;          /* stops above the scale note */
  left: 0;
  right: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--paper-line), var(--paper-line)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--paper-line), var(--paper-line)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--paper-line), var(--paper-line)) 75% 0 / 1px 100% no-repeat;
}

/* Hover band: shows which other exhibits share a hovered exhibit's years.
   Positioned by collection-ruler.js; invisible without it. */
.ruler-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(169, 92, 66, 0.09);
  border-left: 1px solid rgba(169, 92, 66, 0.35);
  border-right: 1px solid rgba(169, 92, 66, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ruler.is-hovering .ruler-band { opacity: 1; }
/* while the band shows, let it run behind the words instead of around them */
.ruler.is-hovering .ruler-name, .ruler.is-hovering .ruler-date { background: transparent; }

/* -- Rows ---------------------------------------------------- */
.ruler-rows { list-style: none; margin: 0; padding: 0; position: relative; }
.ruler-row {
  position: relative;
  border-top: 1px solid var(--paper-line);
  padding: 0.55rem 0 0.7rem;
}
.ruler-row:last-child { border-bottom: 1px solid var(--paper-line); }
.ruler-row > a, .ruler-row > .ruler-item { display: block; color: inherit; }

.ruler-name {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);  /* hides the guide lines behind the words */
  padding-right: 0.3rem;
  position: relative;
  z-index: 1;
}
.ruler-name em { font-size: 0.85rem; opacity: 0.6; }
.ruler-row.soon .ruler-name { color: var(--ink-faint); }

.ruler-track { display: block; position: relative; height: 28px; }

.ruler-line {
  position: absolute;
  bottom: 4px;
  left: var(--x1);
  width: calc(var(--x2) - var(--x1));
  min-width: 3px;
  height: 3px;
  background: var(--brass);
}
.ruler-row.soon .ruler-line {
  height: 0;
  bottom: 5px;
  background: none;
  border-top: 2px dotted var(--brass-light);
}

/* Dates sit on the line. By default one label, centred over the line.
   collection-ruler.js swaps in separate start and end labels
   wherever the line is long enough to hold both. */
.ruler-date {
  position: absolute;
  bottom: 11px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  background: var(--paper);
  padding: 0 0.2rem;
}
.ruler-date .lc { text-transform: lowercase; }
.ruler-date-both { left: calc((var(--x1) + var(--x2)) / 2); transform: translateX(-50%); }
.ruler-date-start, .ruler-date-end { display: none; }
.ruler-date-start { left: var(--x1); margin-left: -0.2rem; }
.ruler-date-end { right: calc(100% - var(--x2)); margin-right: -0.2rem; }

.ruler-row.is-split .ruler-date-both {   /* hidden from sight, still read by screen readers */
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0;
}
.ruler-row.is-split .ruler-date-start,
.ruler-row.is-split .ruler-date-end { display: block; }
/* a short line near either edge: keep its label on the page */
.ruler-row.date-left .ruler-date-both { left: 0; transform: none; }
.ruler-row.date-right .ruler-date-both { left: auto; right: 0; transform: none; }

/* Hover on a published exhibit */
.ruler-row:not(.soon) > a:hover .ruler-name,
.ruler-row:not(.soon) > a:hover .ruler-date,
.ruler-row:not(.soon) > a:focus-visible .ruler-name { color: var(--terracotta); }
.ruler-row:not(.soon) > a:hover .ruler-line { background: var(--terracotta); }

.ruler-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-faint);
  text-align: right;
  margin: 0.6rem 0 0;
}

@media (max-width: 640px) {
  .ruler-name { font-size: 1.2rem; }
  .ruler-date, .ruler-scale li { font-size: 0.72rem; }
  .ruler-note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ruler-band { transition: none; }
}