.bhst {
  --bhst-ink: #1e211f;
  --bhst-muted: #4e554b;
  --bhst-accent: #71312f;
  --bhst-line: #bfc4b6;
  --bhst-serif: "Libre Caslon Display", Georgia, serif;
  --bhst-sans: "DM Sans", Arial, sans-serif;
  margin: 0;
  padding: 3.6rem 0 2.6rem;
  background: #e3e5db;
  color: var(--bhst-ink);
  font-family: var(--bhst-sans);
  font-size: 16px;
  line-height: 1.65;
  overflow: clip;
  scroll-margin-top: 1.5rem;
}
.bhst *, .bhst *::before, .bhst *::after { box-sizing: border-box; }
.bhst-shell { width: min(1280px, calc(100% - 96px)); margin: 0 auto; }
.bhst-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.bhst .bhst-eyebrow { margin: 0 0 .6rem; font: 700 .7rem/1.6 var(--bhst-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--bhst-accent); }
.bhst h2 { max-width: 44rem; margin: 0; font: 400 clamp(2.6rem, 4vw, 3.6rem)/1.04 var(--bhst-serif); letter-spacing: -.02em; text-wrap: balance; }
.bhst .bhst-intro { max-width: 24rem; margin: 0 0 .2rem; font-size: .85rem; line-height: 1.65; color: var(--bhst-muted); text-align: right; }
.bhst-subjects { display: none; flex-wrap: wrap; gap: .45rem; margin: 1.8rem 0 .7rem; }
.bhst.is-ready .bhst-subjects { display: flex; }
.bhst .bhst-topic-description { max-width: 66rem; margin: .6rem 0 1rem; font-size: .82rem; line-height: 1.6; color: var(--bhst-muted); }
.bhst-toolbar { display: none; gap: 1rem; align-items: center; justify-content: space-between; margin: 1rem 0 .8rem; }
.bhst.is-ready .bhst-toolbar { display: flex; }
.bhst-eras { display: flex; flex-wrap: wrap; gap: .45rem; }
.bhst button { appearance: none; border: 1px solid #aeb5a5; border-radius: 0; min-height: 44px; background: transparent; color: var(--bhst-ink); font: 600 .78rem/1.3 var(--bhst-sans); cursor: pointer; padding: .65rem .8rem; }
.bhst-eras button { white-space: nowrap; }
.bhst-subjects button { background: #eef0e7; }
.bhst-subjects button[aria-pressed="true"] { background: var(--bhst-ink); border-color: var(--bhst-ink); color: #fff; }
.bhst-topic-count { display: inline-block; margin-left: .3rem; font-size: .67rem; opacity: .8; }
.bhst button:hover { background: #f5f5ee; border-color: var(--bhst-ink); }
.bhst-subjects button[aria-pressed="true"]:hover { background: var(--bhst-ink); border-color: var(--bhst-ink); color: #fff; }
.bhst-eras button[aria-current="true"] { background: var(--bhst-accent); border-color: var(--bhst-accent); color: #fff; }
.bhst button:disabled { opacity: .35; cursor: default; }
.bhst-arrows { display: flex; flex: 0 0 auto; gap: .45rem; }
.bhst-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .8rem; }
.bhst-arrows button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 91px; }
.bhst-arrows span[aria-hidden] { font-size: 1.2rem; }
.bhst-readtools { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin: .6rem 0 .3rem; }
.bhst .bhst-hint { font-size: .78rem; color: var(--bhst-muted); margin: 0; }
.bhst .bhst-track {
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  max-width: 100%;
  padding: .5rem 0 1.15rem;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
  scrollbar-width: auto;
  scrollbar-color: var(--bhst-accent) #cdd2c4;
  -webkit-overflow-scrolling: touch;
}
.bhst-track::-webkit-scrollbar { height: 10px; }
.bhst-track::-webkit-scrollbar-thumb { background: var(--bhst-accent); border: 2px solid #cdd2c4; border-radius: 6px; }
.bhst-track::-webkit-scrollbar-track { background: #cdd2c4; }
.bhst .bhst-card {
  display: flex;
  position: relative;
  flex: 0 0 min(20.5rem, calc(100vw - 5rem));
  flex-direction: column;
  margin: 0;
  padding: 1.4rem 1.45rem 1rem;
  border-top: 2px solid var(--bhst-ink);
  border-right: 1px solid var(--bhst-line);
  scroll-snap-align: start;
  background: transparent;
}
.bhst .bhst-card:first-child { border-left: 1px solid var(--bhst-line); }
.bhst .bhst-card[hidden] { display: none !important; }
.bhst .bhst-card::before { content: ""; position: absolute; top: -5px; left: 1.4rem; width: 8px; height: 8px; border-radius: 50%; background: var(--bhst-accent); }
.bhst .bhst-region { margin: 0 0 .65rem; color: var(--bhst-muted); font: 700 .65rem/1.5 var(--bhst-sans); text-transform: uppercase; letter-spacing: .08em; }
.bhst .bhst-year { margin: 0 0 1rem; font: 700 clamp(2.5rem, 3.6vw, 3.45rem)/1.05 "Barlow Condensed", Impact, sans-serif; letter-spacing: -.025em; overflow-wrap: break-word; }
.bhst .bhst-date-note { margin: -.5rem 0 .65rem; color: var(--bhst-accent); font: 700 .68rem/1.5 var(--bhst-sans); letter-spacing: .035em; text-transform: uppercase; }
.bhst h3 { margin: 0 0 .8rem; font: 400 1.85rem/1.13 var(--bhst-serif); letter-spacing: -.01em; text-wrap: balance; }
.bhst .bhst-summary { margin: 0 0 1rem; font-size: .94rem; line-height: 1.7; }
.bhst-card-links { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; margin-top: auto; padding-top: .7rem; }
.bhst a { color: var(--bhst-ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.bhst a:hover { text-decoration-thickness: 2px; }
.bhst .bhst-story { font-size: .81rem; font-weight: 700; }
.bhst .bhst-source { font-size: .8rem; line-height: 1.6; color: var(--bhst-muted); }
.bhst-position { margin-top: 1rem; color: #646b5e; font-size: .63rem; letter-spacing: .12em; }
.bhst-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .55rem; }
.bhst .bhst-status { margin: 0; color: var(--bhst-muted); font-size: .75rem; }
.bhst .bhst-list-toggle { display: none; border: 0; padding: .45rem 0 .45rem .8rem; text-decoration: underline; text-underline-offset: .2em; }
.bhst.is-ready .bhst-list-toggle { display: block; }
.bhst .bhst-note { margin: 1.1rem 0 0; max-width: 68rem; font-size: .74rem; line-height: 1.7; color: var(--bhst-muted); }
.bhst :is(a,button,[tabindex]):focus-visible { outline: 3px solid #8b5912; outline-offset: 4px; }
.bhst .bhst-card:focus-visible { outline-offset: -5px; }
.bhst-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.bhst.is-list .bhst-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 1.75rem 0; }
.bhst.is-list .bhst-card { min-width: 0; }
.bhst.is-list .bhst-arrows { display: none; }
@media (max-width: 1050px) {
  .bhst-shell { width: calc(100% - 64px); }
  .bhst-heading-row { display: block; }
  .bhst .bhst-intro { max-width: none; text-align: left; margin-top: 1rem; }
  .bhst-intro br { display: none; }
  .bhst-toolbar { align-items: flex-start; }
  .bhst.is-list .bhst-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .bhst { padding-block: 2.5rem 2rem; }
  .bhst-shell { width: calc(100% - 40px); }
  .bhst h2 { font-size: 2.65rem; }
  .bhst-toolbar { margin-top: 1.4rem; flex-wrap: wrap; }
  .bhst-subjects { margin-top: 1.35rem; gap: .4rem; }
  .bhst-subjects button { flex: 1 0 auto; padding: .6rem .55rem; font-size: .72rem; }
  .bhst-eras { flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .bhst-eras button { padding: .6rem .2rem; font-size: .68rem; }
  .bhst-actions { width: 100%; justify-content: space-between; }
  .bhst-arrows { margin-left: 0; }
  .bhst .bhst-hint { max-width: 25rem; }
  .bhst .bhst-card { padding-inline: 1.1rem; }
  .bhst h3 { font-size: 1.85rem; }
  .bhst .bhst-summary { font-size: .9rem; }
  .bhst.is-list .bhst-track { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .bhst, .bhst * { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  .bhst { background: #fff; padding: 0; font-size: 11pt; }
  .bhst-shell { width: 100%; }
  .bhst-toolbar, .bhst-subjects, .bhst-bottom, .bhst-readtools { display: none !important; }
  .bhst .bhst-track { display: block; overflow: visible; }
  .bhst .bhst-card { display: block; border: 0; border-top: 1px solid #777; break-inside: avoid; padding: 1rem 0; }
  .bhst .bhst-year { font-size: 25pt; }
  .bhst h3 { font-size: 20pt; }
}