/* ChronoLanes — shared horizontal timeline */
html:has([data-timeline]){ scroll-behavior: auto; }
body[data-timeline]{
  isolation: isolate;
}
body[data-timeline] a{ color: var(--gold-2); }
body[data-timeline] .cl-header a,
body[data-timeline] .cl-topic,
body[data-timeline] .cl-logo,
body[data-timeline] .cl-lang a{ color: inherit; }

.tl-atmosphere, .kino-atmosphere{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.tl-atmosphere::before, .kino-atmosphere::before{
  content:"";
  position:absolute;
  left:-10%;
  top:-2%;
  width:120%;
  height:100%;
  background: var(--tl-bg-image, url("kino-film.svg")) center -4% / min(1480px, 112%) no-repeat;
  opacity:0.13;
}
.tl-atmosphere::after, .kino-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 900px 420px at 50% 6%, var(--tl-bg-glow, rgba(201,162,39,0.055)), transparent 64%),
    linear-gradient(180deg, transparent 58%, var(--bg) 94%);
}
body[data-atmosphere="film"]{
  --tl-bg-image: url("kino-film.svg");
  --tl-bg-glow: rgba(201,162,39,0.055);
}
body[data-atmosphere="history"]{
  --tl-bg-image: url("bg-history.svg");
  --tl-bg-glow: rgba(201,162,39,0.07);
}
body[data-atmosphere="religions"]{
  --tl-bg-image: url("bg-religions.svg");
  --tl-bg-glow: rgba(142,111,176,0.09);
}
body[data-atmosphere="science"]{
  --tl-bg-image: url("bg-science.svg");
  --tl-bg-glow: rgba(62,139,105,0.09);
}
body[data-atmosphere="empires"]{
  --tl-bg-image: url("bg-empires.svg");
  --tl-bg-glow: rgba(181,66,63,0.09);
}
body[data-atmosphere="art"]{
  --tl-bg-image: url("bg-art.svg");
  --tl-bg-glow: rgba(204,122,62,0.09);
}

.hero{
  max-width:920px;
  margin: 0 auto;
  padding: 64px 24px 28px;
  text-align:center;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.eyebrow::before, .eyebrow::after{
  content:"—";
  color:var(--text-faint);
  margin:0 10px;
}
.hero h1{
  font-size:clamp(28px,5vw,46px);
  line-height:1.15;
  margin:0 0 16px;
  color:var(--text);
  letter-spacing:-0.01em;
}
.hero h1 em{ color:var(--gold-2); font-style:italic; }
.hero p{
  font-size:16px;
  line-height:1.7;
  color:var(--text-dim);
  max-width:640px;
  margin:0 auto 6px;
}
.hero .stats{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--text-faint);
  letter-spacing:0.03em;
}
.hero .stats b{ color:var(--gold-2); font-weight:600; }

.controlbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,14,22,0.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--hair);
  padding:14px 20px;
}
.controlbar-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.controlbar .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--text-faint);
  margin-right:2px;
  white-space:nowrap;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px 7px 10px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:var(--panel);
  color:var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  cursor:pointer;
  transition:all .2s ease;
  user-select:none;
}
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-faint); flex:none; transition:all .2s ease;}
.chip:hover{ border-color:var(--text-faint); color:var(--text); }
.chip[data-region]:not([data-region="all"]){
  border-color: var(--chip-color, var(--hair));
  color: var(--text);
  background: color-mix(in srgb, var(--chip-color, var(--gold)) 14%, var(--panel));
}
.chip[data-region]:not([data-region="all"]) .dot{ background:var(--chip-color, var(--gold)); }
.chip.lane-off{
  opacity:.55;
  background:var(--panel);
  border-color:var(--hair);
  color:var(--text-faint);
}
.chip.lane-off .dot{ background:var(--text-faint); }
.chip.lane-off:hover{ opacity:.85; }
.chip[data-region="all"]{ border-color:var(--gold); color:var(--gold-2); }
.chip[data-region="all"]:hover{ background:var(--gold); color:#0d0f14; border-color:var(--gold); }

.zoomctl{
  display:flex;
  align-items:center;
  gap:2px;
  border:1px solid var(--hair);
  border-radius:8px;
  overflow:hidden;
  flex:none;
  margin-left:auto;
}
.zoomctl button{
  width:30px; height:28px;
  background:var(--panel);
  color:var(--text-dim);
  border:none;
  cursor:pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size:15px;
  line-height:1;
  transition:all .15s ease;
}
.zoomctl button:hover{ background:var(--panel-2); color:var(--text); }
.zoomctl button:active{ background:var(--gold); color:#0d0f14; }
.zoomctl .pct{
  width:52px; height:28px;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  color:var(--text-dim);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  border-left:1px solid var(--hair);
  border-right:1px solid var(--hair);
  cursor:pointer;
  user-select:none;
}
.zoomctl .pct:hover{ color:var(--text); }

.board-wrap{
  max-width:none;
  margin:0;
  padding: 8px 0 72px;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.board-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:10px;
  cursor:grab;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.board-wrap, .board-wrap *{ touch-action: pan-y; }
.board-scroll.is-dragging{ cursor:grabbing; }
.board.h-board{
  display:block;
  position:relative;
  min-width:max-content;
}

.h-axis{
  position:relative;
  height:70px;
  margin-left:118px;
  border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg, rgba(10,14,22,0.2), transparent);
}
.h-era{
  position:absolute;
  top:0; bottom:0;
  overflow:hidden;
  padding:10px 12px 0;
  border-left:1px solid var(--hair);
}
.h-era:first-child{ border-left:none; }
.h-era .num{
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:18px;
  color:var(--gold-2);
  line-height:1;
  margin-bottom:4px;
}
.h-era .title{
  font-family:'Source Serif 4', serif;
  font-size:12px;
  color:var(--text-dim);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.h-era .range{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--text-faint);
  margin-top:3px;
}
.h-grid{
  position:absolute;
  top:70px;
  bottom:0;
  width:1px;
  background:var(--hair);
  pointer-events:none;
  z-index:1;
}

.h-lane{
  position:relative;
  height:122px;
  border-bottom:1px solid color-mix(in srgb, var(--hair) 70%, transparent);
}
.h-lane-label{
  position:sticky;
  left:0;
  z-index:6;
  width:118px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 14px 0 18px;
  background:linear-gradient(90deg, var(--bg) 0%, var(--bg) 78%, rgba(10,14,22,0));
  pointer-events:none;
}
.h-lane-label .name{
  font-family:'Spectral', serif;
  font-weight:600;
  font-size:13.5px;
  color:var(--text);
  line-height:1.2;
}
.h-lane-label .n{
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  color:var(--text-faint);
  margin-top:3px;
}
.h-lane-track{
  position:absolute;
  left:118px;
  top:0; bottom:0;
  z-index:2;
}
.h-line{
  position:absolute;
  left:0; right:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
  background:var(--lane-color);
  opacity:0.42;
}

.h-lane-track .dot{
  position:absolute;
  top:50%;
  width:7px;height:7px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--lane-color);
  border:1.5px solid var(--bg-1);
  cursor:pointer;
  transition: all .2s ease;
  box-shadow:0 0 0 0 transparent;
  z-index:3;
}
.h-lane-track .dot:hover{
  transform:translate(-50%,-50%) scale(1.55);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--lane-color) 30%, transparent);
}
.h-lane-track .dot.selected{
  transform:translate(-50%,-50%) scale(1.7);
  box-shadow:0 0 0 5px #fff2, 0 0 14px 2px var(--lane-color);
}
.h-lane-track .dot[data-rich="1"]{
  box-shadow:0 0 0 2px rgba(234,228,211,0.28);
}
.h-lane-track .dot[data-rich="1"]:hover{
  box-shadow:0 0 0 2px rgba(234,228,211,0.5), 0 0 0 6px color-mix(in srgb, var(--lane-color) 30%, transparent);
}
.h-lane-track .dot.major{
  z-index:4;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--lane-color) 55%, transparent);
}
.h-lane-track .dot.major:hover{
  transform:translate(-50%,-50%) scale(1.35);
}

.h-lane-track .evlabel{
  position:absolute;
  width:96px;
  transform:translateX(-50%);
  text-align:center;
  color:var(--text-dim);
  font-family:'Source Serif 4', serif;
  line-height:1.2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:2;
}
.evlabel.above{ bottom:calc(50% + 9px); }
.evlabel.below{ top:calc(50% + 9px); }
.evlabel .yr{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  color:var(--lane-color);
  font-size:0.86em;
  margin-bottom:1px;
  letter-spacing:0.01em;
}
.board.show-labels .evlabel{ opacity:1; pointer-events:auto; cursor:pointer; }
.board.show-labels .evlabel:hover{ color:var(--text); }
.evlabel.always{
  opacity:1; pointer-events:auto; cursor:pointer; z-index:2;
}
.evlabel.always:hover{ color:var(--text); }

.h-board.is-spans .h-line{ display:none; }
.h-board.is-spans .h-lane{ height:auto; }
.h-board.is-spans .h-grid{ bottom:0; }
.h-span{
  position:absolute;
  border-radius:5px;
  cursor:pointer;
  overflow:visible;
  box-sizing:border-box;
  z-index:3;
  background:var(--lane-color);
}
.h-span.minor{ opacity:0.55; }
.h-span.major{
  opacity:0.95;
  z-index:4;
  box-shadow:0 0 0 1.5px color-mix(in srgb, var(--lane-color) 65%, #EAE4D3);
}
.h-span:hover{ opacity:1; filter:brightness(1.08); }
.h-span.selected{
  box-shadow:0 0 0 2px #fff, 0 0 12px 2px var(--lane-color);
  z-index:5;
}
.h-span-label{
  position:absolute;
  inset:0 auto 0 0;
  display:flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  padding:0 7px;
  white-space:nowrap;
  overflow:hidden;
  pointer-events:none;
  font-family:'Source Serif 4', serif;
  font-size:11px;
  color:var(--bg);
  line-height:1.1;
}
.h-span-label .nm{
  overflow:hidden;
  text-overflow:ellipsis;
}
.h-span-label .yr{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82em;
  opacity:0.86;
  flex:none;
}
.h-span-label.outside{
  left:100%;
  max-width:none;
  width:max-content;
  color:var(--text-dim);
  padding-left:8px;
}
.h-span.major .h-span-label.outside{ color:var(--text); }

.tooltip{
  position:fixed;
  z-index:80;
  pointer-events:none;
  background:#05070c;
  border:1px solid var(--hair);
  color:var(--text);
  padding:8px 11px;
  border-radius:7px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  max-width:220px;
  line-height:1.5;
  opacity:0;
  transition:opacity .12s ease;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.tooltip.show{ opacity:1; }
.tooltip .ty{ color:var(--gold-2); font-weight:600; margin-bottom:2px; display:block;}

.detail{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:90;
  background:var(--panel-2);
  border-top:1px solid var(--hair);
  box-shadow:0 -16px 40px rgba(0,0,0,0.45);
  transform:translateY(110%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
  max-height:82vh;
  overflow-y:auto;
}
.detail.open{ transform:translateY(0); }
.detail-inner{
  max-width:760px;
  margin:0 auto;
  padding:22px 24px 30px;
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.detail-bar{ width:5px; align-self:stretch; border-radius:4px; background:var(--gold); flex:none; }
.detail-body{ flex:1; min-width:0; }
.detail-era{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
  margin-bottom:6px;
}
.detail-era b{ color:var(--gold-2); }
.detail-year{
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:22px;
  color:var(--gold-2);
  margin-bottom:4px;
}
.detail-desc{
  font-size:17px;
  line-height:1.5;
  color:var(--text);
}
.detail-sections{ display:flex; flex-direction:column; gap:14px; margin-top:2px; }
.detail-block{ border-left:2px solid var(--hair); padding-left:12px; }
.detail-block .lbl{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--gold);
  margin-bottom:5px;
}
.detail-block p{
  margin:0;
  font-size:15.5px;
  line-height:1.55;
  color:var(--text);
}
.detail-block:not(:has(.lbl)) p{ color:var(--text-dim); }
.detail-block.-pre .lbl{ color:var(--text-faint); }
.detail-block.-what{ border-left-color:var(--gold); }
.detail-block.-cons .lbl{ color:var(--gold-2); }
.detail-region{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--text-dim);
}
.detail-region .sw{ width:8px;height:8px;border-radius:50%; }
.detail-close{
  background:none;
  border:1px solid var(--hair);
  color:var(--text-dim);
  width:32px;height:32px;
  border-radius:50%;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  flex:none;
  transition:all .2s ease;
}
.detail-close:hover{ color:var(--text); border-color:var(--text-faint); }

body[data-timeline] footer{
  max-width:920px;
  margin:0 auto;
  padding:20px 24px 80px;
  text-align:center;
  color:var(--text-faint);
  font-size:12.5px;
  line-height:1.7;
  font-family:'IBM Plex Mono', monospace;
}

@media (max-width:640px){
  .hero{ padding:44px 18px 20px; }
  .controlbar{ padding:12px 14px; }
  .controlbar .label{ display:none; }
  .board-wrap{ padding:20px 10px 60px; }
  .h-lane-label{ width:92px; padding-left:12px; }
  .h-axis, .h-lane-track{ margin-left:0; }
  .h-axis{ margin-left:92px; }
  .h-lane-track{ left:92px; }
}