:root{
  --ink:#09111f;
  --ink-soft:#202b3c;
  --muted:#667085;
  --paper:#fbfaf6;
  --wash:#eef2f4;
  --line:#d8dee6;
  --blue:#2b64d8;
  --teal:#2f8f83;
  --plum:#6f4bb3;
  --amber:#b7791f;
  --focus:#c87912;
  --radius:8px;
  --content-max:1060px;
  --article-max:680px;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:2px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px;}
h1,h2{font-family:inherit; color:var(--ink); font-weight:760; letter-spacing:0; margin:0;}
/* ---------- hero ---------- */
.hero{max-width:var(--content-max); margin:0 auto; padding:56px var(--gutter) 10px;}
.hero h1{font-size:clamp(27px, 5.4vw, 44px); line-height:1.08; overflow-wrap:break-word; max-width:var(--article-max);}
.hero-note{margin:18px 0 0; font-size:15px; color:var(--ink-soft); max-width:var(--article-max);}
.page-source{font-size:12.5px; color:var(--muted); margin-top:16px;}
.page-source a{color:var(--muted); text-decoration:underline; text-underline-offset:2px;}
.page-source a:hover{color:var(--blue);}
/* ---------- article ---------- */
main{max-width:var(--content-max); margin:0 auto; padding:8px var(--gutter) 24px;}
.legend{
  list-style:none; margin:24px 0 0; padding:16px 18px;
  max-width:var(--article-max);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:8px;
  font-size:13.5px; color:var(--ink-soft);
}
.legend li{display:flex; align-items:baseline; gap:10px;}
.diff-jump{
  max-width:var(--article-max);
  margin:20px 0 0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.diff-jump a{
  display:inline-block; min-width:24px; text-align:center;
  padding:4px 8px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink-soft); font-size:12.5px; font-weight:600;
  text-decoration:none;
}
.diff-jump a:hover{border-color:var(--blue); color:var(--blue);}
.diff-badge{
  display:inline-block; flex:0 0 auto;
  font-size:11px; font-weight:600; letter-spacing:0;
  padding:2px 9px; border-radius:999px;
}
.diff-badge--new{background:#e3ebfc; color:var(--blue);}
.diff-badge--divergence{background:#f6e9d4; color:var(--amber);}
.diff-badge--proposed{background:#ece3f7; color:var(--plum);}
.diff-item{
  max-width:var(--article-max);
  margin:44px 0 0; padding-top:36px;
  border-top:1px solid var(--line);
}
.diff-item:first-of-type{margin-top:36px;}
.diff-head{display:flex; align-items:center; gap:10px; margin-bottom:4px; flex-wrap:wrap;}
.diff-item h2{font-size:clamp(19px, 2.4vw, 23px); line-height:1.2;}
.diff-item-note{font-size:13px; color:var(--muted); margin:4px 0 0;}
.diff-label{
  font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:0;
  color:var(--teal); margin:22px 0 8px;
}
.diff-item p{margin:0 0 10px;}
blockquote{
  margin:0; padding:2px 0 2px 20px; border-left:2px solid var(--amber);
  color:var(--ink-soft); font-size:16px; line-height:1.6;
}
ul.list{margin:0 0 6px; padding:0; list-style:none;}
ul.list li{position:relative; padding:6px 0 6px 22px;}
ul.list li::before{
  content:''; position:absolute; left:2px; top:14px;
  width:5px; height:5px; background:var(--blue); border-radius:1px;
}
strong{color:var(--ink); font-weight:700;}
.diff-callout{
  background:var(--wash); border-left:2px solid var(--amber);
  padding:10px 14px; margin-top:14px;
  font-size:13.5px; color:var(--ink-soft);
  border-radius:0 6px 6px 0;
}
#reconciled{padding-top:36px;}
#reconciled h2{font-size:clamp(19px, 2.4vw, 23px);}
#reconciled ul.list{margin-top:16px;}
@media (max-width:820px){
  .hero{padding:40px var(--gutter) 8px;}
}