/* Minimal editorial design system, shared across bold-lab.ai — see
   events.html for the full rationale. */
:root{
  --content-max:1060px;
  --rail:190px;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
/* ---------- hero ---------- */
.hero{
  max-width:var(--content-max);
  margin:0 auto;
  padding:64px var(--gutter) 10px;
}
.hero h1{
  font-size:clamp(30px, 5.4vw, 50px);
  line-height:1.05;
  overflow-wrap:break-word;
  text-wrap:balance;
}
.hero-note{
  margin:20px 0 0;
  font-size:18px;
  color:var(--ink-soft);
}
.page-source{
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--muted);
  margin-top:18px;
}
.page-source a{color:var(--muted);}
.page-source a:hover{color:var(--accent);}
/* ---------- phase timeline (at-a-glance + quick nav) ---------- */
.timeline{
  max-width:var(--content-max);
  margin:0 auto;
  padding:26px var(--gutter) 4px;
}
.timeline ol{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:flex-start; position:relative;
}
.timeline ol::before{
  content:''; position:absolute; top:5px; height:1px; background:var(--line);
  left:calc(50% / var(--n)); right:calc(50% / var(--n));
}
.timeline li{flex:1 0 0; min-width:0;}
.timeline a{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; padding:0 4px;
}
.timeline .tl-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--paper); border:1px solid var(--accent);
  position:relative; z-index:1;
}
.timeline li.is-after .tl-dot{border-color:var(--muted);}
.timeline li.is-pivot .tl-dot{width:10px; height:10px; margin-top:-1px; background:var(--ink); border-color:var(--ink);}
.timeline .tl-name{
  margin-top:8px; font-family:var(--sans); font-size:11.5px; font-weight:500; line-height:1.25; color:var(--ink-soft);
}
.timeline li.is-after .tl-name{color:var(--muted);}
.timeline .tl-wk{font-family:var(--sans); font-size:10.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.timeline a:hover .tl-name{color:var(--ink);}
.timeline a.active .tl-dot{background:var(--accent);}
.timeline li.is-pivot a.active .tl-dot{background:var(--ink); border-color:var(--ink);}
.timeline a.active .tl-name{color:var(--ink); font-weight:700;}
/* ---------- layout ---------- */
.layout{
  max-width:var(--content-max);
  margin:0 auto;
  padding:24px var(--gutter) 100px;
  display:grid;
  grid-template-columns:var(--rail) 1fr;
  gap:52px;
  align-items:start;
}
nav.toc{
  position:sticky;
  top:24px;
  padding-top:4px;
}
nav.toc ol{
  list-style:none;
  margin:0;
  padding:0;
  border-left:1px solid var(--line);
}
nav.toc li{margin:0;}
nav.toc a{
  display:flex;
  gap:8px;
  padding:8px 0 8px 16px;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--muted);
  text-decoration:none;
  border-left:2px solid transparent;
  margin-left:-1px;
}
nav.toc a .n{
  flex:0 0 auto;
  min-width:32px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
nav.toc a:hover{color:var(--ink);}
nav.toc a.active{
  color:var(--ink);
  border-left-color:var(--accent);
  font-weight:600;
}
nav.toc a.active .n{color:var(--accent);}
nav.toc .toc-split{
  padding:16px 0 4px 16px;
  font-family:var(--sans);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  opacity:.7;
}
/* Post to arXiv — not a numbered pipeline step, reachable but excluded
   from Previous/Next and the "Phase N of 7" count (see steppableIds()
   below). Dashed border and italic set it apart from the real sequence. */
nav.toc .toc-optional a{
  font-style:italic;
  border-left-style:dashed;
}
nav.toc .toc-optional a .n{
  font-weight:400;
  color:var(--muted);
}
main{min-width:0;}
/* ---------- phase sections ---------- */
.phase{display:none;}
.phase.active{
  display:block;
  animation:fade-in .22s ease;
}
@keyframes fade-in{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}
/* No-JS fallback: every phase stacked with a divider */
.no-js .phase{
  display:block;
  padding-top:44px;
  margin-top:44px;
  border-top:1px solid var(--line);
  scroll-margin-top:24px;
}
.no-js .phase:first-child{margin-top:0; padding-top:0; border-top:none;}
.no-js .pager{display:none;}
.phase-head{margin-bottom:18px;}
.phase-num{
  display:inline-block;
  margin-bottom:12px;
  font-family:var(--sans);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.phase h2{
  font-size:clamp(25px, 3.4vw, 34px);
  line-height:1.12;
}
.phase-intro{
  color:var(--ink-soft);
  max-width:64ch;
  margin:0 0 18px;
  font-size:18px;
}
.phase-intro.muted{color:var(--muted);}
/* ---------- Rush-mode phase toggle ---------- */
.pipeline-toggle-wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--gutter);
}
.pipeline-toggle{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:none; padding:0; margin:0 0 6px;
  cursor:pointer; font-family:var(--sans);
}
.pipeline-toggle-track{
  position:relative;
  width:34px; height:19px;
  border-radius:10px;
  background:var(--wash);
  border:1px solid var(--line);
  transition:background .15s, border-color .15s;
  flex:none;
}
.pipeline-toggle-thumb{
  position:absolute; top:2px; left:2px;
  width:13px; height:13px; border-radius:50%;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(26,43,74,.25);
  transition:transform .15s;
}
.pipeline-toggle[aria-checked="true"] .pipeline-toggle-track{background:var(--accent); border-color:var(--accent);}
.pipeline-toggle[aria-checked="true"] .pipeline-toggle-thumb{transform:translateX(15px);}
.pipeline-toggle-label{font-size:13px; color:var(--ink-soft); text-align:left;}
.pipeline-toggle:hover .pipeline-toggle-label{color:var(--ink);}
.pipeline-toggle:focus-visible .pipeline-toggle-track{outline:2px solid var(--accent); outline-offset:2px;}
/* Rush view: hide every phase Rush mode doesn't have a column for, in
   both nav lists — the .phase sections themselves aren't hidden by CSS
   at all (only one is ever .active at a time regardless), the pager
   script skips non-rush ids when stepping instead, see its own comment.
   Same collapse technique (and the same .22s/.18s timing) as the
   sidebar's own .nav-link.nav-sub — max-height/opacity instead of a
   hard display:none, so toggling Rush mode animates like the sidebar
   does instead of cutting instantly. */
.timeline li[data-non-rush]{
  transition:max-width .22s ease, opacity .18s ease, margin .22s ease;
}
body.rush-view .timeline li[data-non-rush]{
  max-width:0; opacity:0; overflow:hidden; pointer-events:none; margin:0;
}
nav.toc li[data-non-rush]{
  max-height:32px; opacity:1; overflow:hidden;
  transition:max-height .22s ease, opacity .18s ease;
}
body.rush-view nav.toc li[data-non-rush]{
  max-height:0; opacity:0; pointer-events:none;
}
h3.subhead{
  font-family:var(--sans);
  font-weight:400;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:var(--muted);
  opacity:.7;
  margin:32px 0 12px;
}
ul.list, ol.list{
  margin:0 0 8px;
  padding:0;
  list-style:none;
  max-width:64ch;
}
ul.list li, ol.list li{
  position:relative;
  padding:7px 0 7px 22px;
  font-size:17px;
}
ul.list li::before{
  content:'';
  position:absolute;
  left:2px;
  top:15px;
  width:5px;
  height:5px;
  background:var(--accent);
  border-radius:50%;
}
ol.list{counter-reset:step;}
ol.list li{counter-increment:step; padding-left:30px;}
ol.list li::before{
  content:counter(step) '.';
  position:absolute;
  left:0;
  top:7px;
  font-family:var(--sans);
  font-weight:700;
  font-size:13.5px;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.list ul{list-style:none; margin:6px 0 0; padding:0;}
.list ul li{padding-left:20px;}
.list ul li::before{background:transparent; border:1px solid var(--muted); border-radius:50%;}
strong{color:var(--ink); font-weight:700;}
em{font-style:italic; color:var(--ink);}
blockquote{
  margin:24px 0;
  padding:2px 0 2px 22px;
  border-left:2px solid var(--accent);
  max-width:62ch;
  color:var(--ink-soft);
  font-size:18px;
  line-height:1.6;
  font-style:italic;
}
blockquote cite{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--muted);
}
.note{
  display:inline-block;
  margin-top:4px;
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
}
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:64ch;
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.pager-btn{
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:rgba(26,43,74,.32);
  text-underline-offset:3px;
}
.pager-btn:hover:not(:disabled){text-decoration-color:currentColor;}
.pager-btn:disabled{visibility:hidden;}
.pager-status{
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media (max-width:820px){
  .layout{grid-template-columns:1fr; gap:0;}
  nav.toc{
    position:static;
    border-bottom:1px solid var(--line);
    padding-bottom:6px;
    margin-bottom:32px;
    overflow-x:auto;
  }
  nav.toc ol{display:flex; border-left:none; gap:2px;}
  nav.toc a{
    padding:8px 12px;
    border-left:none;
    border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  nav.toc a.active{border-left:none; border-bottom-color:var(--accent);}
  nav.toc .toc-split{display:none;}
  .hero{padding:44px var(--gutter) 8px;}
  .timeline{display:none;}
  /* TOC becomes a horizontal row here — max-height can't collapse a
     flex-row item, so switch to the same max-width technique .timeline
     uses above instead. */
  nav.toc li[data-non-rush]{max-height:none; transition:max-width .22s ease, opacity .18s ease, margin .22s ease;}
  body.rush-view nav.toc li[data-non-rush]{max-width:0; margin:0; overflow:hidden;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .phase.active{animation:none;}
}