:root{
  --page-width: 700px;
  --page-pad: 1rem;

  --text: #243040;
  --muted: #516173;
  --bg: #f3f7ff;

  --banner: #1f5fa8;
  --banner-text: #ffffff;
  --ns-blue: #1f4e8c;

  --card: #ffffff;
  --line: rgba(0,0,0,0.10);
  --radius: 14px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.page{
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-pad) 2rem;
}

.banner{
  margin: 0 calc(-1 * var(--page-pad)) 0.75rem;
  padding: 1rem var(--page-pad);
  background: var(--banner);
  color: var(--banner-text);
  border-radius: 0 0 var(--radius) var(--radius);
}

.banner h1{
  margin: 0 0 0.25rem 0;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  line-height: 1.15;
color: var(--banner-text);
}

.muted{ color: var(--muted);   color: var(--banner-text);}

.topnav{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.detail-nav{
  margin: 0.75rem 0 1rem;
}
a{
  color: var(--text);
}

.back{
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.back:hover{ text-decoration: underline; }

.toc{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem;
}

.toc h2{
  margin: 0 0 0.5rem 0;
  color: var(--ns-blue);
  font-size: 1.05rem;
}

.toc ol{
  margin: 0.25rem 0 0 1.25rem;
  padding: 0;
}

.divider{
  border: 0;
  height: 2px;
  background: rgba(31,95,168,0.35);
  margin: 1.25rem 0;
}

.letter{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.letter h2{
  margin: 0 0 0.25rem 0;
  color: var(--ns-blue);
  font-size: 1.15rem;
}

.letter p{
  margin: 0 0 0.9rem 0;
  line-height: 1.55;
}

.addr{
  padding: 0.75rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
}

blockquote{
  margin: 0 0 0.9rem 0;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid rgba(31,95,168,0.55);
  background: rgba(0,0,0,0.03);
  border-radius: 10px;
}

blockquote p{ margin: 0 0 0.5rem 0; }
blockquote p:last-child{ margin-bottom: 0; }

.sig{
  margin-top: 0.5rem;
  font-weight: 600;
}

.top{
  margin-top: 0.75rem;
}

.footer{
  margin-top: 1.5rem;
  padding-top: 1rem;
  text-align: center;
}

/***************** === Supporting Information page additions (append) === *********/
.detail-nav{
  margin: 0.75rem 0 1rem;
}

.sheet{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
}

.sheet h2{
  margin: 0 0 0.6rem 0;
  color: var(--ns-blue);
  font-size: 1.15rem;
}

.sheet h3{
  margin: 1rem 0 0.35rem 0;
  color: var(--text);
  font-size: 1.02rem;
}

.sheet p{
  margin: 0 0 0.9rem 0;
  line-height: 1.55;
}

.sheet ul{
  margin: 0.25rem 0 1rem 1.25rem;
}

.sample{
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.9rem;
  background: rgba(255,255,255,0.65);
  margin: 0.25rem 0 1.25rem 0;
}

.timeline{
  margin-left: 1.1rem;
}

.top{
  margin-top: 1rem;
}