:root{
  --paper: #fbfaf6;
  --ink: #1f2937;
  --accent: #8b5a2b;
  --rail: rgba(139,90,43,.25);
}

body{background:var(--paper); color:var(--ink);}
.wrap{max-width: 980px; margin: 0 auto; padding: 1rem;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.site-top{position:sticky; top:0; background:rgba(251,250,246,.86); backdrop-filter: blur(8px); border-bottom:1px solid rgba(0,0,0,.06); z-index:10;}
.site-top .wrap{display:grid; gap:.5rem;}
#logo a{font-weight:900; color:var(--accent); text-decoration:none;}
.tagline{color:rgba(31,41,55,.7);}

.timeline{position:relative; display:grid; grid-template-columns: 16px minmax(0, 1fr); gap:1rem;}
.timeline__rail{width:2px; background:var(--rail); border-radius:999px; margin:0 auto;}
.timeline__content{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.25rem;}

.headroom--pinned{transform:translateY(0); transition:transform .2s ease;}
.headroom--unpinned{transform:translateY(-110%); transition:transform .2s ease;}

#footer{background:#fff; border-top:1px solid rgba(0,0,0,.06);}
#footer .container{max-width:980px; margin:0 auto; padding:1.2rem;}