:root{
  --works-h:34px;
  --ink:#1a1814; --ink-2:#4a453d; --ink-3:#736c60; --ink-4:#9a9287;
  --bg:#fbfaf7; --bg-2:#f4f2ec; --bg-3:#eae6dc; --card:#fff;
  --rule:#ddd8cc; --rule-2:#c9c2b2;
  --accent:#7a2e1e; --link:#8a3520; --gold:#9c7b3f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.theme-paper{
  background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.works-nav{
  position:sticky; top:0; z-index:100;
  height:var(--works-h);
  display:flex; align-items:center; gap:14px;
  padding:0 16px;
  font:11.5px/1 var(--sans);
  letter-spacing:.04em;
  border-bottom:1px solid var(--rule);
  background:var(--bg-2);
  color:var(--ink-3);
}
.works-home{
  font-weight:700; color:var(--ink); letter-spacing:.02em;
  text-decoration:none;
}
.works-home em, .works-home{font-style:normal}
.works-links{display:flex; gap:14px; margin-left:auto}
.works-nav a{color:var(--ink-3); text-decoration:none}
.works-nav a:hover{color:var(--accent); text-decoration:none}
.works-nav a.on{color:var(--accent); font-weight:600}

body.work-plan .works-nav{
  background:rgba(6,3,16,.92);
  border-bottom-color:rgba(70,130,230,.22);
  color:#8d829c;
}
body.work-plan .works-home{color:#f6eefc}
body.work-plan .works-nav a{color:#8d829c}
body.work-plan .works-nav a:hover,
body.work-plan .works-nav a.on{color:#6eb4ff}

body.work-timeline .mast{top:var(--works-h)}
body.work-timeline .sidebar{
  top:calc(70px + var(--works-h));
  height:calc(100vh - 70px - var(--works-h));
}
@media(max-width:980px){
  body.work-timeline .sidebar{top:calc(64px + var(--works-h))}
}

body.work-encyclopedia .masthead{top:var(--works-h)}
body.work-encyclopedia .sidebar,
body.work-encyclopedia .rail{
  top:calc(60px + var(--works-h));
  height:calc(100vh - 60px - var(--works-h));
}
@media(max-width:1000px){
  body.work-encyclopedia .sidebar{top:calc(60px + var(--works-h))}
}

body.work-plan .site-header{top:var(--works-h)}

.hub{max-width:980px; margin:0 auto; padding:48px 24px 80px}
.hub-hero{margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--rule)}
.hub .kicker{
  font:11px var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin:0 0 10px;
}
.hub-hero h1{font-size:clamp(36px,6vw,56px); line-height:1.1; margin:0 0 12px; font-weight:700}
.hub-hero h1 em{color:var(--accent); font-style:normal}
.standfirst{font-size:22px; color:var(--ink-2); margin:0 0 14px; max-width:34ch}
.hub-lead{color:var(--ink-2); max-width:62ch; margin:0}
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:860px){.hub-grid{grid-template-columns:1fr}}
.hub-card{
  display:flex; flex-direction:column; gap:8px;
  background:var(--card); border:1px solid var(--rule); border-radius:12px;
  padding:22px 20px 18px; color:inherit; min-height:220px;
}
.hub-card:hover{border-color:var(--accent); text-decoration:none}
.hub-card h2{font-size:22px; margin:0; line-height:1.2}
.hub-card p{margin:0; color:var(--ink-2); flex:1}
.hub-meta{font:12px var(--sans); color:var(--ink-4); margin-top:8px}
.hub-foot{margin-top:48px; font:12.5px var(--sans); color:var(--ink-4)}
.hub-card.hub-plan{border-top:3px solid #3d8fff}
.hub-card.hub-encyclopedia{border-top:3px solid var(--accent)}
.hub-card.hub-timeline{border-top:3px solid var(--gold)}