/* =========================================================================
   The TIMELINE page (session 71): the story eras as one vertical spine.

   Loaded after cards.css and reads its tokens (--t1..--t3, --line, the
   accents). Every rule here is the page's own (.hb-tl-*, .hb-timeline).

   The spine runs down the left with a node per ROW. An era of the first
   category has a row to itself, full width; the rest sit two to a row
   (eras_views.py, rows()). Each era is a tile, its content centred, with
   the era's own banner dim behind it - a montage down the page.

   An era's look is its TIER - its category's place in the catalog's
   category order, never the category's name. Tier 1 is the loudest and
   each later tier a little quieter (Bill, round two: "homogenize the
   results just a little"); a category added later takes the next tier, and
   past the last the last repeats. A tier sets --tl-accent (the node, the
   category line and the sparkline), --tl-node (the node's size),
   --tl-shade (how much of the banner shows) and the title's type.
   ========================================================================= */

/* The band's second line, empty for now: the height of the Characters
   page's letter row, so the band matches the other browse pages (Bill). */
.bb-8-header .hb-tl-spare { min-height: 33px; box-sizing: border-box; }

.hb-timeline { padding: 22px 16px 28px 16px; }

.hb-tl {
  list-style: none; margin: 0; padding: 0 0 0 40px;
  position: relative;
}
/* The spine. */
.hb-tl::before {
  content: ""; position: absolute; top: 6px; bottom: 6px; left: 15px;
  width: 2px; background: linear-gradient(var(--line), #5a5a5a 6%, #5a5a5a 94%, var(--line));
}

.hb-tl-row {
  --tl-accent: var(--t3); --tl-node: 10px;
  position: relative; margin: 0 0 12px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.hb-tl-row.hb-tl-wide { grid-template-columns: 1fr; margin: 20px 0; }
/* A row with one era that is not full width: the era keeps a pair's width,
   centred, so every half tile on the page is one size. */
.hb-tl-row.hb-tl-lone { grid-template-columns: minmax(0, calc(50% - 6px)); justify-content: center; }

.hb-tl-node {
  position: absolute; left: calc(-24px - var(--tl-node) / 2); top: 50%;
  margin-top: calc(var(--tl-node) / -2);
  width: var(--tl-node); height: var(--tl-node); border-radius: 50%;
  background: var(--panel); border: 2px solid var(--tl-accent);
  box-sizing: border-box; z-index: 1;
}

/* ---------------------------------------------------------------- tile */

.hb-tl-era {
  --tl-accent: var(--t3); --tl-shade: .26;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 118px; padding: 14px 16px 12px 16px; border-radius: 18px;
  text-align: center; color: var(--t2); text-decoration: none;
}
/* The banner, dim, with rounded corners and every edge faded into the
   panel (Bill, round three: "faded and a little rounded at the edges rather
   than sharp and rectangular") - two fades, across and down, kept where
   both keep it. There is no tile behind it: the picture is the tile. */
.hb-tl-era::before {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 18px;
  background-image: var(--tl-img, none); background-size: cover; background-position: center;
  opacity: var(--tl-shade); filter: saturate(.7);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                      linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                      linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
          mask-composite: intersect;
  transition: opacity .2s ease, transform .4s ease;
}
/* A shade across the middle, so the words always read over the picture. */
.hb-tl-era::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(38, 38, 38, .55), transparent 100%);
}
.hb-tl-era:hover, .hb-tl-era:focus-visible { color: var(--t2); text-decoration: none; }
.hb-tl-era:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: 2px; }
.hb-tl-era:hover::before { opacity: calc(var(--tl-shade) + .14); transform: scale(1.03); }
.hb-tl-era:hover .hb-tl-title { color: var(--t1); }

.hb-tl-cat {
  display: block; font-family: 'Raleway', sans-serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tl-accent);
  margin-bottom: 3px;
}
.hb-tl-title {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 21px; line-height: 1.15; color: var(--t1);
  text-transform: uppercase; letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.hb-tl-meta {
  display: block; font-family: 'Raleway', sans-serif; font-size: 12px;
  color: var(--t3); margin-top: 5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.hb-tl-meta strong { color: var(--t2); font-weight: 600; }
.hb-tl-spark { --accent: var(--tl-accent); margin-top: 7px; width: 70%; max-width: 380px; height: 14px; }

/* ---------------------------------------------------------------- tiers */

/* 1 - the loudest: full width, wide-tracked capitals in the crawl's gold,
   lit from behind; the banner shows most here. */
.hb-tl-t1 { --tl-accent: var(--yellow); --tl-node: 20px; --tl-shade: .42; }
.hb-tl-row.hb-tl-t1 .hb-tl-node { box-shadow: 0 0 14px rgba(255, 212, 82, .45); background: #3d3418; }
.hb-tl-era.hb-tl-t1 { min-height: 150px; }
.hb-tl-t1 .hb-tl-title {
  font-weight: 600; font-size: 32px; line-height: 1.05;
  letter-spacing: .07em; color: var(--yellow);
  text-shadow: 0 0 18px rgba(255, 212, 82, .3), 0 1px 3px rgba(0, 0, 0, .8);
}

/* 2 - white capitals over an orange rule. */
.hb-tl-t2 { --tl-accent: var(--orange); --tl-node: 16px; --tl-shade: .32; }
.hb-tl-t2 .hb-tl-title { font-size: 24px; padding-bottom: 3px; border-bottom: 2px solid var(--orange); }

/* 3 - a broadcast look: blue rules either side of the title. */
.hb-tl-t3 { --tl-accent: var(--blue); --tl-node: 14px; }
.hb-tl-t3 .hb-tl-title { display: flex; align-items: center; gap: 10px; }
.hb-tl-t3 .hb-tl-title::before, .hb-tl-t3 .hb-tl-title::after {
  content: ""; width: 18px; height: 2px; background: var(--blue); flex: 0 0 auto;
}

/* 4 - green, light capitals, wider tracked. */
.hb-tl-t4 { --tl-accent: var(--green); --tl-node: 13px; }
.hb-tl-t4 .hb-tl-title { font-weight: 300; letter-spacing: .1em; }

/* 5 - coral, in the body face. */
.hb-tl-t5 { --tl-accent: #E8896B; --tl-node: 12px; }
.hb-tl-t5 .hb-tl-title { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 20px; text-transform: none; letter-spacing: 0; }

/* 6 - quieter: italic, a dashed node, less of the banner. */
.hb-tl-t6 { --tl-accent: #b9a06a; --tl-node: 11px; --tl-shade: .2; }
.hb-tl-row.hb-tl-t6 .hb-tl-node { border-style: dashed; }
.hb-tl-t6 .hb-tl-title { font-family: 'Raleway', sans-serif; font-style: italic; font-weight: 400; font-size: 19px; text-transform: none; letter-spacing: 0; color: var(--t2); }

/* 7 and after - the quietest: small capitals. */
.hb-tl-t7 { --tl-accent: var(--t3); --tl-node: 10px; --tl-shade: .18; }
.hb-tl-t7 .hb-tl-title { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 17px; text-transform: none; font-variant: small-caps; letter-spacing: .06em; color: var(--t2); }

.hb-tl-empty { color: var(--t3); font-family: 'Raleway', sans-serif; padding: 20px 4px; }

/* Narrow: one to a row. */
@media (max-width: 760px) {
  .hb-tl-row, .hb-tl-row.hb-tl-lone { grid-template-columns: 1fr; }
  .hb-tl-t1 .hb-tl-title { font-size: 26px; }
}