/* The Ultimate Sierra Timeline — everything this page looks like.
   Loaded after vendor/timeline/timeline.min.css, which it recolours: that
   library ships a white card on a light spine, and this site is the opposite.
   Written by hand; make_timeline.py only emits the markup, so restyling the
   page never means regenerating it. */

:root {
  color-scheme: dark;
  --bg:     #05060a;
  --panel:  #0f1219;          /* solid, not translucent: the arrow on the side
                                 of each card is a CSS triangle, and a
                                 see-through one shows the spine through it */
  --line:   rgba(232, 230, 223, .16);
  --ink:    #e8e6df;
  --dim:    #b9b6ac;
  --faint:  #8d8a82;
  --accent: #7fd0ff;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration-color: rgba(127, 208, 255, .4); }
a:hover { text-decoration-color: currentColor; }

/* --- reading-progress rule --------------------------------------------- */
/* 452 entries is a long scroll; this is the only thing on the page that says
   how much of it is left. */
#tl-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 40;
  background: rgba(232, 230, 223, .07);
}
#tl-progress span {
  display: block; height: 100%; width: 0;
  background: var(--accent); box-shadow: 0 0 10px rgba(127, 208, 255, .6);
}

/* --- masthead ----------------------------------------------------------- */
.tl-head {
  max-width: 720px;
  margin: 0 auto;
  padding: 92px 24px 56px;
  text-align: center;
}

.tl-back {
  display: inline-block; margin-bottom: 44px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
}
.tl-back:hover { color: var(--ink); }

.tl-kicker {
  margin: 0 0 14px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--faint);
}

.tl-head h1 {
  margin: 0;
  font-size: clamp(28px, 6vw, 46px);
  font-weight: 600; line-height: 1.1; letter-spacing: -.01em;
}

.tl-range {
  margin: 18px 0 0;
  font-size: 12px; letter-spacing: .42em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* The masthead is the title and its provenance, nothing else — the timeline
   explains itself from the first card down. */
.tl-credit, .tl-count {
  margin: 32px 0 0; font-size: 11px; color: var(--faint);
}
.tl-count { margin-top: 8px; letter-spacing: .08em; }

/* --- the year rail ------------------------------------------------------ */
/* Sticky, because the one thing you want from a nine-year list is to be able
   to leave the year you are in. */
.tl-years {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  padding: 10px 12px;
  background: rgba(5, 6, 10, .82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tl-years a {
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; letter-spacing: .1em; text-decoration: none;
  color: var(--faint); font-variant-numeric: tabular-nums;
  transition: color .15s ease, background .15s ease;
}
.tl-years a:hover { color: var(--ink); background: rgba(232, 230, 223, .08); }
.tl-years a.is-here {
  color: var(--bg); background: var(--accent); font-weight: 600;
}

/* --- year headings ------------------------------------------------------ */
.tl-main { padding-bottom: 40px; }

/* The year rail is sticky, so a year jumped to from it has to stop clear of it. */
.tl-year { scroll-margin-top: 46px; }

.tl-year-head {
  display: flex; align-items: center; gap: 20px;
  max-width: 1100px; margin: 0 auto; padding: 76px 24px 26px;
  font-weight: 400;
}
.tl-year-head::before, .tl-year-head::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.tl-year-head span {
  font-size: clamp(30px, 5vw, 44px); letter-spacing: .1em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* --- the timeline itself ------------------------------------------------ */
.timeline { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.timeline:not(.timeline--horizontal)::before {
  background: linear-gradient(180deg,
              transparent, var(--line) 40px,
              var(--line) calc(100% - 40px), transparent);
  width: 1px; margin-left: -.5px;
}

/* The library holds a card at opacity 0 (.animated) and reveals it by running
   the fadeIn keyframes as it scrolls up. Switching the animation off for
   reduced motion would therefore hide the entire page — the opacity has to be
   given back in the same breath. */
@media (prefers-reduced-motion: reduce) {
  .timeline__item.animated { opacity: 1; }
  .timeline__item.fadeIn { animation: none; }
}

.timeline__item { padding: 14px 46px 14px 0; }
.timeline__item--right { padding: 14px 0 14px 46px; }

/* The node and the card's arrow both sit at top:50% by default, which puts
   them halfway down a card — and a card here can be one line or seven pieces
   of box art tall. Pinning them near the top keeps every node the same
   distance below its month marker, so the spine reads as a sequence. */
.timeline__item::after {
  top: 46px;
  width: 9px; height: 9px; right: -5px;
  background: var(--bg); border: 1px solid rgba(232, 230, 223, .5);
}
.timeline__item--right::after { left: -5px; }

.timeline__content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  color: var(--ink);
  transition: border-color .18s ease, transform .18s ease;
}
.timeline__content:hover { border-color: rgba(232, 230, 223, .34); }

.timeline__content::before, .timeline__content::after { top: 46px; }
.timeline__content::before { border-left-color: var(--line); }
.timeline__content::after  { border-left-color: var(--panel); }
.timeline__item--right .timeline__content::before { border-right-color: var(--line); }
.timeline__item--right .timeline__content::after  { border-right-color: var(--panel); }

/* --- a month marker, which is a timeline item wearing a disguise --------- */
/* The library treats every child of .timeline__items as an item and gives it
   half the width and a side, so a divider has to take the whole row back. */
.tl-month {
  width: 100% !important; left: 0 !important;
  padding: 34px 0 18px !important;
  text-align: center;
}
.tl-month::after { display: none; }
.tl-month .timeline__content {
  background: none; border: 0; padding: 0; display: inline-block;
}
.tl-month .timeline__content::before,
.tl-month .timeline__content::after { display: none; }
.tl-month span {
  display: inline-block; padding: 5px 15px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--dim);
}

/* --- card contents ------------------------------------------------------ */
.timeline__content h3 {
  margin: 0 0 8px;
  font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .01em;
  color: var(--ink);
}

.tl-body { margin: 0; color: var(--dim); font-size: 12.5px; }
.timeline__content h3 + .tl-body { color: var(--faint); }

/* Box art, laid out as a shelf: a common height rather than a common width, so
   a row of portrait boxes and the odd landscape ad line up along the bottom
   instead of stepping. */
.tl-art {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin: 0 0 15px;
}
.tl-art img {
  height: 128px; width: auto;
  border-radius: 3px;
  background: #1a1d26;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tl-art img:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .65);
}

/* The point of the original document is that every line is sourced, so the
   citation stays on the card rather than hiding behind a toggle. */
.tl-src {
  margin: 14px 0 0; padding-top: 11px;
  border-top: 1px solid rgba(232, 230, 223, .09);
  font-size: 10.5px; line-height: 1.55; color: var(--faint);
  overflow-wrap: anywhere;
}
.tl-src + .tl-src { margin-top: 6px; border-top: 0; padding-top: 0; }

/* --- lightbox ----------------------------------------------------------- */
#tl-lightbox {
  margin: auto; padding: 0; border: 0; background: transparent;
  max-width: 94vw; max-height: 94vh;
}
#tl-lightbox::backdrop {
  background: rgba(5, 6, 10, .86);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#tl-lightbox img {
  display: block; max-width: 94vw; max-height: 94vh;
  border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
  cursor: zoom-out;
}

/* --- footer ------------------------------------------------------------- */
.tl-foot {
  max-width: 680px; margin: 0 auto; padding: 80px 24px 100px;
  text-align: center; font-size: 11px; line-height: 1.75; color: var(--faint);
}
.tl-foot p { margin: 0 0 14px; }
.tl-foot code { font-size: 11px; color: var(--dim); }

/* --- narrow ------------------------------------------------------------- */
/* Below 600px the library adds .timeline--mobile and moves the spine hard
   left, so the items stop alternating and the markers have to follow it. */
@media (max-width: 600px) {
  .tl-head { padding: 60px 20px 40px; }
  .timeline { padding: 0 16px; }
  .tl-year-head { padding: 52px 16px 20px; }
  .tl-art img { height: 108px; }
}

/* The library puts the mobile spine 10px from the timeline's border box, which
   assumes the timeline has no padding of its own — this one has 16px, so the
   nodes would hang 8px to the right of the line they are meant to sit on.
   Moving the spine to meet them is the shorter correction. */
.timeline--mobile::before { left: 20px !important; }
.timeline--mobile .timeline__item { padding: 12px 0 12px 34px; }
.timeline--mobile .timeline__item::after { top: 44px; left: 0; }
.timeline--mobile .timeline__content::before,
.timeline--mobile .timeline__content::after { top: 44px; }
.timeline--mobile .timeline__content::before { border-right-color: var(--line); }
.timeline--mobile .timeline__content::after  { border-right-color: var(--panel); }
.timeline--mobile .tl-month { padding-left: 34px !important; text-align: left; }