/* V7 — explicit timeline grammar, topic timelines, comparison switch, cognitive-load cleanup */
.site-header{gap:14px}
.subject-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(17,16,14,.18);border-radius:999px;background:rgba(242,239,231,.86);backdrop-filter:blur(12px)}
.subject-switch a{display:block;padding:7px 10px;border-radius:999px;font:600 9px/1 "DM Mono",monospace;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--muted);white-space:nowrap}
.subject-switch a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.subject-switch a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* The main scrollytelling timeline now has an unmistakable axis. */
.timeline-v4-stage .timeline{position:relative;padding-top:82px!important}
.timeline-v4-stage .timeline::before{display:block!important;content:"";position:absolute;left:0;right:0;top:48px;height:2px;background:linear-gradient(90deg,var(--red),rgba(17,16,14,.22) 28%,rgba(17,16,14,.22) 72%,var(--blue));z-index:0}
.timeline-v4-stage .event{position:relative;padding-top:22px!important}
.timeline-node{position:absolute;z-index:3;top:-50px;left:clamp(22px,3vw,38px);display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.timeline-node time{font:600 9px/1 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.timeline-node i{display:block;width:14px;height:14px;border:3px solid var(--paper);border-radius:50%;background:var(--ink);box-shadow:0 0 0 1px var(--ink);transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s}
.timeline .event.is-current .timeline-node i{background:var(--red);transform:scale(1.65)}
.timeline .event.is-current .timeline-node time{color:var(--ink)}
.timeline .event-card{border-radius:2px}
.timeline .event-index{font-size:clamp(1.3rem,2.1vw,2.3rem)!important}
.timeline .event-kicker{margin-bottom:12px!important}
.timeline .event-date{display:none}
.timeline-axis-direction{position:absolute;z-index:4;left:5vw;top:18px;font:600 8px/1 "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Topic-by-topic timelines: compact, vertical, low cognitive load. */
.topic-timeline-section{background:#11100e;color:var(--bg);padding-top:110px!important;padding-bottom:120px!important}
.topic-timeline-section .section-heading{margin-bottom:34px}
.topic-timeline-section .section-heading .eyebrow{color:var(--acid)}
.topic-timeline-section .section-heading h2{color:var(--bg)}
.topic-timeline-section .section-heading p{color:#aaa49a}
.topic-timeline-shell{display:grid;grid-template-columns:minmax(220px,.42fr) minmax(0,1fr);gap:clamp(28px,5vw,78px);align-items:start}
.topic-tabs{position:sticky;top:88px;display:grid;gap:5px}
.topic-tab{display:grid;grid-template-columns:1fr auto;gap:12px;text-align:left;border:1px solid rgba(242,239,231,.12);background:#171510;color:var(--bg);padding:14px 15px;cursor:pointer;transition:background .2s,border-color .2s,transform .25s}
.topic-tab b{font-size:13px;line-height:1.2}
.topic-tab small{font:600 8px/1 "DM Mono",monospace;color:#817b72;text-transform:uppercase}
.topic-tab:hover,.topic-tab:focus-visible{background:#211e18;border-color:rgba(242,239,231,.34);outline:0}
.topic-tab.active{background:var(--bg);color:var(--ink);border-color:var(--bg);transform:translateX(6px)}
.topic-tab.active small{color:var(--red)}
.topic-detail{min-width:0}
.topic-detail-head{padding-bottom:22px;border-bottom:1px solid rgba(242,239,231,.18)}
.topic-detail-head .topic-number{font:600 9px/1 "DM Mono",monospace;color:var(--acid);letter-spacing:.08em}
.topic-detail-head h3{font:600 clamp(2rem,4vw,4.8rem)/.92 Unbounded,sans-serif;letter-spacing:-.065em;margin:12px 0 13px;max-width:12ch}
.topic-detail-head p{max-width:64ch;margin:0;color:#aaa49a;font-size:14px;line-height:1.6}
.topic-rail{position:relative;margin-top:28px;padding-left:88px}
.topic-rail::before{content:"";position:absolute;left:36px;top:8px;bottom:8px;width:1px;background:rgba(242,239,231,.24)}
.topic-point{position:relative;padding:0 0 34px;opacity:0;transform:translateY(16px);animation:topicReveal .55s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i)*70ms)}
.topic-point:last-child{padding-bottom:0}
.topic-point::before{content:"";position:absolute;left:-58px;top:8px;width:13px;height:13px;border-radius:50%;background:#11100e;border:2px solid var(--bg);box-shadow:0 0 0 1px rgba(242,239,231,.55)}
.topic-point .topic-date{position:absolute;right:calc(100% + 66px);top:4px;width:74px;text-align:right;font:600 9px/1.2 "DM Mono",monospace;color:var(--acid);white-space:nowrap}
.topic-point h4{font:650 clamp(1.05rem,1.7vw,1.5rem)/1.18 Manrope,sans-serif;margin:0 0 7px;color:var(--bg)}
.topic-point p{margin:0;color:#aaa49a;font-size:13px;line-height:1.55;max-width:70ch}
.topic-point button{margin-top:11px;border:0;border-bottom:1px solid currentColor;background:transparent;color:var(--bg);padding:0 0 3px;font:600 9px/1 "DM Mono",monospace;text-transform:uppercase;cursor:pointer}
@keyframes topicReveal{to{opacity:1;transform:none}}

/* Reduce repeated visual chrome. */
.intro-strip p{max-width:60ch}
.section-heading h2{max-width:17ch}
.graph-index-items button{min-height:70px!important}
.graph-index-items small{max-width:30ch}

/* Analytics/SEO do not add visual UI; source clicks and interactions are instrumented in JS. */

@media(max-width:980px){
  .site-header nav{display:none}
  .topic-timeline-shell{grid-template-columns:1fr}
  .topic-tabs{position:relative;top:auto;display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:none}
  .topic-tabs::-webkit-scrollbar{display:none}
  .topic-tab{flex:0 0 min(74vw,320px);scroll-snap-align:start}
  .topic-tab.active{transform:none}
}
@media(max-width:760px){
  .site-header{flex-wrap:wrap;height:auto;min-height:61px;padding-top:9px;padding-bottom:9px}
  .updated{margin-left:auto}
  .timeline-v4-stage .timeline{padding-top:76px!important}
  .timeline-v4-stage .timeline::before{top:43px}
  .timeline-node{top:-45px;left:22px}
  .topic-timeline-section{padding-top:80px!important;padding-bottom:86px!important}
  .topic-rail{padding-left:58px}
  .topic-rail::before{left:18px}
  .topic-point::before{left:-46px}
  .topic-point .topic-date{position:static;width:auto;text-align:left;margin-bottom:7px;color:var(--acid)}
}
@media(max-width:520px){
  .brand{font-size:10px}
  .subject-switch a{padding:6px 8px;font-size:8px}
  .updated{display:none}
}
@media(prefers-reduced-motion:reduce){
  .topic-point{opacity:1;transform:none;animation:none}
  .topic-tab,.timeline-node i{transition:none}
}