:root{
    --paper:#F7F3EC;
    --ink:#17263A;
    --ink-soft:#4B5A6E;
    --ruler:#122C4A;
    --ruler-line:rgba(247,243,236,.16);
    --line:#D8D0BF;
    --card:#FFFFFF;
    --accent:#B24C1F;
  }
  *{ box-sizing:border-box; }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    min-height:100vh;
  }
  .display-font{ font-family:'Fraunces', serif; }
  .mono{ font-family:'JetBrains Mono', monospace; }

  /* ---------- Header ---------- */
  .hero{
    border-bottom:1px solid var(--line);
    background:
      radial-gradient(1200px 300px at 85% -60%, rgba(178,76,31,.10), transparent 70%),
      var(--paper);
  }
  .hero h1{
    font-weight:600;
    letter-spacing:-.01em;
    font-size:clamp(2rem, 4vw, 3rem);
  }
  .hero .lede{ color:var(--ink-soft); max-width:46ch; }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
  }

  /* ---------- Legend chips ---------- */
  .cat-chip{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.28rem .65rem; border-radius:999px;
    background:var(--card); border:1px solid var(--line);
    font-size:.82rem; color:var(--ink-soft);
  }
  .cat-chip .dot{ width:.55rem; height:.55rem; border-radius:50%; flex:none; }

  /* ---------- Timeline shell ---------- */
  .tl-shell{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:.9rem;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(23,38,58,.04);
  }
  .tl-toolbar{
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; padding:.65rem .9rem;
    border-bottom:1px solid var(--line);
    background:#FCFAF5;
  }
  .tl-body{ display:flex; }
  .tl-labels{
    flex:none; width:150px;
    border-right:1px solid var(--line);
    background:#FCFAF5;
  }
  .tl-label-row{
    display:flex; align-items:center;
    padding:0 .8rem;
    border-bottom:1px dashed var(--line);
    font-size:.82rem; font-weight:500;
    gap:.5rem;
  }
  .tl-label-row .dot{ width:.6rem; height:.6rem; border-radius:50%; flex:none; }
  .tl-scroll{
    flex:1 1 auto; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:thin;
    cursor:grab;
  }
  .tl-scroll:active{ cursor:grabbing; }
  .tl-inner{ position:relative; }

  .tl-ruler{
    position:relative; height:34px;
    background:var(--ruler);
    border-bottom:1px solid var(--line);
  }
  .tl-tick{
    position:absolute; top:0; bottom:0; width:1px;
    background:var(--ruler-line);
  }
  .tl-tick.year{ background:rgba(247,243,236,.32); }
  .tl-tick-label{
    position:absolute; top:5px; transform:translateX(4px);
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem; color:#F7F3EC; opacity:.85;
    white-space:nowrap;
  }

  .tl-lane{
    position:relative;
    border-bottom:1px dashed var(--line);
  }
  .tl-baseline{
    position:absolute; left:0; right:0; height:3px;
    border-radius:3px; opacity:.35;
  }
  .tl-bar{
    position:absolute; height:16px; border-radius:999px;
    opacity:.85; cursor:pointer;
    transition:opacity .15s ease, transform .15s ease;
  }
  .tl-bar:hover{ opacity:1; transform:translateY(-1px); }
  .tl-marker{
    position:absolute; width:12px; height:12px; border-radius:50%;
    border:2px solid var(--card); cursor:pointer;
    transition:transform .15s ease;
  }
  .tl-marker:hover{ transform:scale(1.35); }
  .tl-point{
    position:absolute; width:13px; height:13px;
    transform:translate(-50%,-50%) rotate(45deg);
    border:2px solid var(--card); cursor:pointer;
    transition:transform .15s ease;
  }
  .tl-point:hover{ transform:translate(-50%,-50%) rotate(45deg) scale(1.4); }

  .tl-today{
    position:absolute; top:0; bottom:0; width:0;
    border-left:2px dashed var(--accent);
    opacity:.7;
  }
  .tl-today-label{
    position:absolute; top:36px; transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace; font-size:.68rem;
    color:var(--accent); background:var(--card);
    padding:0 .3rem; border-radius:.2rem;
  }

  .tl-empty{
    padding:3rem 1.5rem; text-align:center; color:var(--ink-soft);
  }

  /* ---------- Popover card ---------- */
  .popover{ max-width:300px; border:1px solid var(--line); box-shadow:0 8px 24px rgba(23,38,58,.14); }
  .bio-card img{ width:100%; height:120px; object-fit:cover; }
  .bio-card .card-body{ padding:.7rem .85rem; }
  .bio-card .bio-date{
    font-family:'JetBrains Mono', monospace; font-size:.7rem;
    color:var(--ink-soft); letter-spacing:.02em;
  }
  .bio-card .card-title{ font-size:.95rem; font-weight:600; margin:.15rem 0 .3rem; }
  .bio-card .card-text{ font-size:.82rem; color:var(--ink-soft); margin:0; }

  footer.page-footer{ color:var(--ink-soft); font-size:.8rem; }

  ::-webkit-scrollbar{ height:10px; }
  ::-webkit-scrollbar-thumb{ background:#D8D0BF; border-radius:6px; }
  ::-webkit-scrollbar-track{ background:transparent; }

  @media (prefers-reduced-motion: reduce){
    .tl-bar, .tl-marker, .tl-point, .tl-scroll{ transition:none !important; scroll-behavior:auto !important; }
  }