/* Timeline pages (Siston Through Time, The Dig): from the Then and Now design proof. Everything is under .tl so
   nothing leaks into the rest of the site. Find types are told apart by name as well as colour. */
.tl {
  --tl-paper: #ffffff; --tl-warm: #f2ede4; --tl-rule: #e8e0d0; --tl-grid: #ece6da;
  --tl-ink: #2a2520; --tl-ink-2: #5c5448; --tl-muted: #6f6656;
  --tl-forest: #1c4a28; --tl-forest-2: #2d6a3f; --tl-gold: #8c6a45; --tl-on-forest: #faf8f4;
  --t-pottery: #a3461f; --t-bone: #c99a2e; --t-metals: #2b6cb0; --t-cbm: #8a4f6e; --t-masonry: #4a7c3a; --t-other: #7a7060;
  /* Eras, oldest to newest, light to dark; white text on the dark ones passes AA */
  --era-0: #ddd0b3; --era-1: #c6ad7f; --era-2: #b08f55; --era-3: #876832; --era-4: #715428; --era-5: #4e391a;
  --tl-display: 'Cinzel', Georgia, serif; --tl-italic: 'Cormorant Garamond', Georgia, serif;
  max-width: 1100px; margin: 0 auto 64px; color: var(--tl-ink);
}
.tl *, .tl *::before, .tl *::after { box-sizing: border-box; }
.tl a { color: var(--tl-forest-2); }
.tl :focus-visible { outline: 3px solid var(--tl-forest); outline-offset: 2px; }
.tl ol.tl-plain, .tl ul.tl-plain { list-style: none; margin: 0; padding: 0; }
.tl .tl-note { font-size: 14px; color: var(--tl-muted); margin: 10px 0 0; max-width: 84ch; }
.tl .tl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tl .tl-ico { display: inline-grid; place-items: center; flex: none; }
.tl .tl-ico svg, .tl svg.tl-svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }

/* The two pages link to each other */
.tl-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 26px; }
.tl-pages a { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-forest); text-decoration: none; border: 1px solid var(--tl-forest); padding: 0 14px; border-radius: 2px; }
.tl-pages a:hover { background: var(--tl-forest); color: var(--tl-on-forest); }
.tl-pages a[aria-current="page"] { background: var(--tl-forest); color: var(--tl-on-forest); }

/* ---------- Siston Through Time ---------- */
.tl-eras { border: 1px solid var(--tl-rule); background: var(--tl-paper); }
.tl-eras > li + li { border-top: 1px solid var(--tl-rule); }
.tl-era { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.tl-era-band { padding: 20px 18px; color: #fff; display: grid; align-content: start; gap: 2px; }
.tl-era-band.light { color: var(--tl-ink); }
.tl .tl-era-band h2 { margin: 0; font: 600 19px/1.2 var(--tl-display); letter-spacing: .05em; color: inherit; }
.tl-era-band span { font-size: 14px; }
.tl-era-band .tl-tentative { font: italic 16px/1.3 var(--tl-italic); }
.tl-era-0 { background: var(--era-0); } .tl-era-1 { background: var(--era-1); } .tl-era-2 { background: var(--era-2); }
.tl-era-3 { background: var(--era-3); } .tl-era-4 { background: var(--era-4); } .tl-era-5 { background: var(--era-5); }
.tl-era-body { padding: 18px 20px 20px; display: grid; gap: 16px; min-width: 0; }
.tl .tl-era-body h3 { margin: 0 0 8px; font: 600 11.5px/1.4 'Jost', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tl-gold); }
.tl-roundels { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.tl-rf { width: 150px; }
.tl-rf > a, .tl-rf > span { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px; text-decoration: none; color: inherit; border-radius: 4px; min-height: 44px; }
.tl-rf a:hover .tl-what { text-decoration: underline; }
.tl-roundel { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--tl-paper); box-shadow: 0 0 0 1px var(--tl-rule); flex: none; }
.tl-noimg { display: grid; place-items: center; align-content: center; gap: 2px; background: var(--tl-warm); color: var(--tl-gold); border: 1px dashed #cdbf9f; box-shadow: none; font: italic 500 15px/1.1 var(--tl-italic); padding: 8px; text-align: center; }
.tl-noimg svg.tl-svg { width: 26px; height: 26px; }
.tl-rf .tl-yr { font: 600 14px/1.25 'Jost', sans-serif; color: var(--tl-gold); }
.tl-rf .tl-what { font-size: 13.5px; line-height: 1.35; }
.tl-docs { display: grid; gap: 8px; }
.tl-doc { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.tl-doc .tl-yr { font: 600 15px/1.3 var(--tl-display); color: var(--tl-forest); }
.tl-doc p { margin: 0; }
.tl-doc a { font-size: 14px; white-space: nowrap; }
.tl-doc.lead { background: var(--tl-warm); margin: 4px -10px 0; padding: 10px; border-left: 3px solid var(--tl-forest); }
.tl-empty-era { font: italic 18px/1.4 var(--tl-italic); color: var(--tl-ink-2); margin: 0; }
.tl-next { margin-top: 28px; background: var(--tl-paper); border: 1px solid var(--tl-rule); border-left: 4px solid var(--tl-forest); padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.tl-next p { margin: 0; font: italic 20px/1.4 var(--tl-italic); color: var(--tl-ink-2); }

/* ---------- The Dig: filters ---------- */
.tl-filterbar { position: sticky; top: 0; z-index: 20; background: rgba(250, 248, 244, .97); border-bottom: 1px solid var(--tl-rule); box-shadow: 0 6px 12px -10px rgba(42, 37, 32, .35); padding: 10px 0; margin: 0 0 18px; }
.tl-filterbar > summary { display: none; }
.tl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.tl-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-filters legend { float: left; width: auto; padding: 0; margin: 0 4px 0 0; font: 600 11.5px/1 'Jost', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-gold); }
.tl-opt { position: relative; display: inline-flex; margin: 0; }
.tl-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tl-opt > span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px; border: 1px solid #d9cfbd; background: var(--tl-paper); border-radius: 2px; font: 500 14.5px/1 'Jost', sans-serif; white-space: nowrap; }
.tl-opt input:checked + span { background: var(--tl-forest); border-color: var(--tl-forest); color: var(--tl-on-forest); }
.tl-opt input:focus-visible + span { outline: 3px solid var(--tl-forest); outline-offset: 2px; }
.tl-opt input[type="checkbox"] + span::before { content: ""; display: inline-grid; place-items: center; font-size: 11px; line-height: 1; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.tl-opt input[type="checkbox"]:checked + span::before { content: "\2713"; background: var(--tl-on-forest); color: var(--tl-forest); font-weight: 700; }
.tl-sw { width: 11px; height: 11px; border-radius: 2px; flex: none; display: inline-block; }
.tl-opt input:checked + span .tl-sw { outline: 1.5px solid var(--tl-on-forest); }
.tl-barline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; }
.tl-status { margin: 0; font-size: 15px; flex: 1 1 260px; min-width: 0; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--tl-forest); color: var(--tl-forest); background: var(--tl-paper); text-decoration: none; border-radius: 2px; font: 500 13px/1 'Jost', sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.tl-btn.solid { background: var(--tl-forest); color: var(--tl-on-forest); }
.tl .tl-btn.solid:hover { color: var(--tl-on-forest); }
.tl-js .tl-apply { display: none; }

/* ---------- The Dig: seasons and months ---------- */
.tl-season { display: grid; gap: 16px; margin-bottom: 40px; scroll-margin-top: 90px; }
.tl-season-head { background: var(--tl-paper); border: 1px solid var(--tl-rule); border-top: 4px solid var(--tl-forest); padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 26px; align-items: center; }
.tl .tl-season-head h2 { margin: 0; font: 400 46px/1 var(--tl-display); color: var(--tl-forest); }
.tl .tl-season-head h2 small { display: block; font: 600 11px/1.4 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--tl-gold); }
.tl-facts { display: grid; gap: 8px; min-width: 0; }
.tl-facts .tl-line { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 14.5px; color: var(--tl-ink-2); margin: 0; }
.tl-facts b { color: var(--tl-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tl-mix { display: flex; gap: 2px; height: 10px; max-width: 520px; }
.tl-mix > span { min-width: 2px; }
.tl-mix > span:first-child { border-radius: 3px 0 0 3px; } .tl-mix > span:last-child { border-radius: 0 3px 3px 0; }
.tl-mix .dim { opacity: .22; }
.tl-bytype { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13.5px; color: var(--tl-ink-2); }
.tl-bytype span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.tl-month { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
.tl .tl-month h3 { margin: 0; padding-top: 8px; font: 600 16px/1.2 var(--tl-display); color: var(--tl-forest); letter-spacing: .03em; }
.tl .tl-month h3 small { display: block; font: 400 13px/1.4 'Jost', sans-serif; color: var(--tl-muted); letter-spacing: 0; }
.tl-entries { display: grid; gap: 8px; border-left: 2px solid var(--tl-rule); padding-left: 14px; }
.tl-entry { background: var(--tl-paper); border: 1px solid var(--tl-rule); padding: 10px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tl-entry .tl-t { margin: 0; font-weight: 500; line-height: 1.35; }
.tl-entry .tl-d { margin: 0; font-size: 13.5px; color: var(--tl-muted); }
.tl-entry .tl-made { color: var(--tl-gold); font-weight: 500; }
.tl-entry .tl-acts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: flex-end; }
.tl-entry .tl-acts a:not(.tl-btn) { font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; }
.tl-entry.finds { background: transparent; border-style: dashed; grid-template-columns: minmax(0, 1fr); }
.tl-entry.finds .tl-mix { margin-top: 6px; max-width: 320px; }
.tl-entry.top { border-color: #cdb48f; background: #fcf8f1; }
.tl-entry.top .tl-roundel { width: 64px; height: 64px; }
.tl-entry.top .tl-noimg { font-size: 13px; padding: 4px; }
.tl-entry.top .tl-noimg svg.tl-svg { width: 20px; height: 20px; }
.tl-entry.model { border-color: #9fb5a4; }
.tl-entry.mile { border: 1px solid var(--tl-forest); border-left-width: 5px; grid-template-columns: 74px minmax(0, 1fr); align-items: start; padding: 12px 14px; }
.tl-mile-date { text-align: center; display: grid; line-height: 1.2; border-right: 1px solid var(--tl-rule); padding-right: 12px; }
.tl-mile-date .m { font-size: 13px; color: var(--tl-ink-2); }
.tl-mile-date .dd { font: 400 28px/1.05 var(--tl-display); color: var(--tl-forest); }
.tl-mile-date .y { font-size: 13px; color: var(--tl-muted); }
.tl-kick { font: 600 11px/1.4 'Jost', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--tl-gold); margin: 0; }
.tl-entry.mile .tl-t { font: 600 17px/1.3 'Jost', sans-serif; }
.tl-entry.mile .tl-x { margin: 2px 0 0; font-size: 14.5px; color: var(--tl-ink-2); }
.tl-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tl-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 3px; }
.tl-entry.mile .tl-acts { justify-content: flex-start; margin-top: 2px; }
.tl-empty { background: var(--tl-paper); border: 1px dashed #cdbf9f; padding: 28px 20px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.tl-empty p { margin: 0; font: italic 21px/1.4 var(--tl-italic); color: var(--tl-ink-2); }

/* Find-type colours */
.tl-c-pottery { background: var(--t-pottery); } .tl-c-bone { background: var(--t-bone); } .tl-c-metals { background: var(--t-metals); }
.tl-c-cbm { background: var(--t-cbm); } .tl-c-masonry { background: var(--t-masonry); } .tl-c-other { background: var(--t-other); }

@media (max-width: 760px) {
  .tl-era { grid-template-columns: 1fr; }
  .tl-era-band { padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .tl-era-body { padding: 14px 12px 16px; }
  .tl-rf { width: calc(50% - 5px); }
  .tl-doc { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .tl-doc a { white-space: normal; }
  /* On phones the filters fold away under a one-line bar */
  .tl-filterbar { padding: 6px 0; }
  .tl-filterbar > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; }
  .tl-filterbar > summary::-webkit-details-marker { display: none; }
  .tl-filterbar > summary .tl-btn { pointer-events: none; }
  .tl-filterbar[open] > summary { margin-bottom: 10px; }
  .tl-filters { display: grid; gap: 14px; }
  .tl-filters legend { float: none; width: 100%; margin: 0 0 6px; }
  .tl-season-head { grid-template-columns: 1fr; }
  .tl-month { grid-template-columns: 1fr; gap: 6px; }
  .tl .tl-month h3 { padding-top: 0; }
  .tl .tl-month h3 small { display: inline; margin-left: 6px; }
  .tl-entries { padding-left: 10px; }
  .tl-entry { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; }
  .tl-entry .tl-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .tl-entry.finds { grid-template-columns: minmax(0, 1fr); }
  .tl-entry.mile { grid-template-columns: 62px minmax(0, 1fr); }
  .tl-entry.mile .tl-acts { grid-column: 2; }
  .tl-thumbs img { width: 72px; height: 72px; }
}