/* Chronicle's paper reading surface surrounds a natural thread through time. */
main { max-width:1600px; }
.introduction { margin-bottom:18px; }
.introduction h1 { font-size:clamp(30px,3vw,43px); }
.inquiry { margin-bottom:16px; }
#timeline-question { padding:12px 16px; }
.question-suggestions { margin-top:8px; }
.era-nav { padding-top:6px; }
.atlas-layout { grid-template-columns:minmax(0,1fr) 300px; }
.scene { height:720px; }
.atlas-sidebar { display:flex; flex-direction:column; min-width:0; height:805px; border-left:1px solid var(--line); background:#f0eee3; }
.atlas-sidebar .inspector { height:auto; flex:1; min-height:260px; border-left:0; }
.span-context { padding:22px 20px 12px; border-bottom:1px solid #d5d0bf; background:#f8f5ec; }
.span-context h2 { margin:8px 0 4px; font:24px/1.2 Marcellus,Georgia,serif; color:#584d37; }
.span-explanation { position:relative; margin-bottom:14px; font:10px/1.5 Arial,sans-serif; color:#656553; }
.span-explanation summary { cursor:pointer; list-style:none; }
.span-explanation summary span { margin-left:5px; }
.span-explanation p { position:absolute; z-index:10; top:14px; left:0; margin:6px 0; padding:12px; width:100%; background:#fffdf7; border:1px solid #c6beaa; box-shadow:0 5px 18px #40331824; }
#span-cards { display:grid; gap:8px; }
.span-card { display:block; position:relative; isolation:isolate; overflow:hidden; width:100%; text-align:left; padding:9px 10px 11px; border:1px solid #d8d2c2; border-radius:4px; background:#fffdf8; color:#403d31; }
.span-card::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(100deg,#dcd7be,transparent); opacity:var(--span-presence,1); transition:opacity .3s ease; }
.span-card small { display:block; font:9px/1.4 Arial,sans-serif; color:#625943; }
.span-card strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:3px 0; font:14px/1.3 Spectral,Georgia,serif; }
.span-provenance { display:block; font:9px/1.3 Arial,sans-serif; color:#626352; }
.span-life { position:absolute; bottom:0; left:0; height:2px; width:var(--span-remaining,100%); background:var(--tone,#89714e); opacity:var(--span-presence,1); transition:width .3s ease,opacity .3s ease; }
.span-card:hover,.span-card:focus-visible,.span-card.selected { border-color:#8d7951; background:#fffaf0; }
.span-card.answer-anchor { outline:1px solid #9d7740; outline-offset:1px; }
.span-card.answer-anchor .span-provenance { color:#725024; }
.span-records { width:100%; min-height:40px; text-align:left; color:#645131; font:11px Arial,sans-serif; }
#span-empty { margin:16px 0 4px; color:#686858; font:13px/1.5 Spectral,Georgia,serif; }
.scene canvas[hidden] { display:none; }
#horizon-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.scene.is-horizon { background:radial-gradient(ellipse at 58% 44%,#24342f 0,transparent 57%),linear-gradient(155deg,#101d22,#091317); }
.is-horizon .scene-heading h2 { color:#e9e4d5; }
.is-horizon .scene-heading .eyebrow { color:#bab9a7; }
.is-horizon .scene-heading p { color:#a9b4ae; font-size:11px; }
.is-horizon .perspective-control { color:#bdc6be; }
.is-horizon .perspective-control input { accent-color:#c6b087; }
.is-horizon .scene-foot { color:#b5c0b9; z-index:6; background:linear-gradient(transparent,#0b161beb); }
.is-horizon .scene-foot button { color:#ecdfbd; border-color:#7e846b; }
.horizon-connectors { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.horizon-connectors path { fill:none; stroke-width:1; stroke-dasharray:2 5; vector-effect:non-scaling-stroke; }
.year-frame .era-nav,.year-frame .zoom-controls,.year-frame .scale-presets { display:none; }
.year-frame .atlas-toolbar:after { content:'One year at a time'; margin-left:auto; color:#767461; font:11px Arial,sans-serif; }
.year-frame .atlas-toolbar .jump-form { margin-left:auto; }
.fifty-navigation { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#f4f0e5; border-bottom:1px solid var(--line); min-width:0; }
.fifty-caption { flex:0 0 94px; display:grid; gap:7px; }
.fifty-caption strong { font:19px Marcellus,Georgia,serif; color:#66563d; }
.fifty-navigation>button { flex:0 0 40px; min-height:44px; font-size:17px; }
.fifty-year-strip { display:flex; overflow-x:auto; scrollbar-width:thin; min-width:0; flex:1; overscroll-behavior-x:contain; padding:6px 0; position:relative; }
.fifty-year-strip button { flex:0 0 90px; min-height:46px; border-bottom:1px solid #beb49d; position:relative; color:#74745e; font:11px Arial,sans-serif; }
.fifty-year-strip button:after { content:''; position:absolute; width:1px; height:7px; background:#b9ab8d; left:50%; bottom:0; }
.fifty-year-strip button:hover,.fifty-year-strip button[aria-current] { color:#604b2e; background:#e7e0cd; border-bottom:2px solid #957045; }
.fifty-year-strip button:focus-visible { outline-offset:-3px; }
.horizon-year-label { position:absolute; color:#d5bf9a; font:12px Marcellus,Georgia,serif; white-space:nowrap; pointer-events:none; }
.is-horizon .horizon-connectors { opacity:.6; }
.horizon-connectors path.is-anchor { stroke-width:1.6; stroke-dasharray:none; }
.is-horizon .perspective-label { background:#16252bf2; border:1px solid #52615b; border-left:2px solid var(--tone); border-radius:3px; padding:9px 11px; box-shadow:0 7px 18px #0003; transition:background .15s; }
.is-horizon .perspective-label strong { color:#f0ebdb; font:15px/1.25 Spectral,Georgia,serif; -webkit-line-clamp:3; }
.is-horizon .perspective-label small { color:#cfbd99; font:10px/1.2 Arial,sans-serif; margin-bottom:5px; }
.is-horizon .perspective-label .uncertain { color:#b8c1b9; font-size:9px; }
.is-horizon .perspective-label:hover,.is-horizon .perspective-label:focus-visible,.is-horizon .perspective-label.selected { background:#263a3e; border-color:#d5c195; }
.marker-provenance { display:block; color:#a9b7b0; font:9px/1.4 Arial,sans-serif; margin-top:5px; }
.is-horizon .perspective-label.answer-anchor { border-color:#dfbd7a; background:#2c3029; }
.is-horizon .answer-anchor .marker-provenance { color:#f2d598; }
.is-horizon .depth-cluster { width:42px; height:42px; min-width:42px; padding:0; border-radius:50%; background:#192a30; border:1px solid #a5ab92; color:#f3e6c7; font:12px Arial,sans-serif; box-shadow:0 2px 8px #0004; }
.is-horizon .depth-cluster:hover,.is-horizon .depth-cluster:focus-visible { background:#3b514e; outline:2px solid #ead7ab; }
.is-horizon .depth-cluster.answer-anchor { border-color:#e4c381; outline:2px solid #ba9350; }
.is-horizon .horizon-tick { min-width:64px; min-height:44px; padding:0 5px; color:#dadcc8; font:10px Arial,sans-serif; background:#142328c9; border-bottom:1px solid #778479; }
.is-horizon .horizon-tick:hover,.is-horizon .horizon-tick:focus-visible { background:#32413d; color:#fff2d2; }
.horizon-direction { display:none; }
.is-horizon .horizon-direction { display:flex; position:absolute; pointer-events:none; gap:14px; left:30%; right:24%; top:138px; height:16px; color:#a6b3aa; font:9px Arial,sans-serif; text-transform:uppercase; letter-spacing:.1em; align-items:center; }
.horizon-direction i { height:1px; flex:1; background:linear-gradient(90deg,#748575,#d2bc91); }
.is-horizon #scene-message { color:#f0e4cd; background:#13242ed9; padding:12px; }
.is-horizon #scene-message:empty { display:none; }
#graphics-status { margin:0; padding:14px 20px; background:#eee8d8; color:#524c3c; font:13px/1.5 Arial,sans-serif; }
.domain-filters button,.scale-presets button,.travel-controls button,.view-switch button { min-height:40px; }
button:disabled { cursor:default; opacity:.5; }
body.embed .scene { height:620px; }
body.embed .atlas-sidebar { height:auto; border-left:0; }
@media(max-width:1000px) {
  .atlas-layout { grid-template-columns:minmax(0,1fr); }
  .atlas-sidebar { height:auto; border-left:0; }
  .atlas-sidebar .inspector { height:420px; flex:auto; border-top:0; }
  .span-context { border-top:1px solid var(--line); }
  #span-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:600px) { #span-cards { grid-template-columns:1fr; } }
@media(max-width:800px) {
  .fifty-navigation { padding:9px 6px; gap:2px; }
  .fifty-caption { flex-basis:65px; padding-left:4px; }
  .fifty-caption .eyebrow { font-size:7px; }
  .fifty-caption strong { font-size:15px; }
  .fifty-navigation>button { flex-basis:30px; }
  .fifty-year-strip button { flex-basis:74px; }
  .year-frame .atlas-toolbar:after { display:none; }
  .scene { height:650px; }
  .scene-heading { top:44px; left:16px; right:14px; }
  .scene-heading h2 { font-size:24px; }
  .is-horizon .scene-heading p { font-size:10px; }
  .is-horizon .perspective-label { padding:8px; }
  .is-horizon .perspective-label strong { font-size:13px; -webkit-line-clamp:3; }
  .is-horizon .perspective-label small { font-size:9px; }
  .is-horizon .perspective-label .uncertain { display:inline; font-size:8px; }
  .marker-provenance { font-size:8px; margin-top:4px; }
  .is-horizon .horizon-direction { left:16px; right:16px; top:135px; font-size:8px; }
  .is-horizon .horizon-tick { min-width:60px; font-size:9px; }
  .question-suggestions { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .scene *, .scene *::before,.span-card::before,.span-life { transition:none!important; animation:none!important; }
}