/* Whitepaper: one calm reading column, about 65 characters wide, with a
   real type scale. Styles the HTML the markdown renderer produces. */

.wp-layout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; max-width: 1180px; margin: 0 auto; align-items: start; }
.wp { min-width: 0; margin: .25rem 0 2.5rem; font-size: 1rem; line-height: 1.55; color: var(--ink); hyphens: auto; text-wrap: pretty; }

/* Header: title and byline on one line, abstract as a larger lead */
.wp-head { padding-bottom: 1rem; }
.wp-head h1 { margin: 0 0 .3rem; }
.wp-head p { margin: 0; }
.wp-sec:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.wp-sec:first-of-type > h2 { display: none; }
.wp-sec:first-of-type .wp-body { column-count: 1; font-size: 1.12rem; line-height: 1.5; max-width: none; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent); }
.wp-sec:first-of-type .wp-body p { margin: 0; }

/* Each section is its own two-column block, so the text uses the width and a
   section mostly fits one screen. */
.wp-sec { border-top: 1px solid var(--rule); padding-top: .9rem; margin-top: 1.1rem; }
.wp-sec > h2 { border: 0; padding: 0; margin: 0 0 .55rem; }
.wp-body { column-count: 2; column-gap: 2.75rem; column-rule: 1px solid var(--rule); }
.wp-body p { break-inside: avoid; }
.wp-body p { orphans: 3; widows: 3; }
.wp-body > :first-child { margin-top: 0; }
.wp-body h3, .wp-body h4 { break-after: avoid; }
.wp-body pre, .wp-body table, .wp-body blockquote, .wp-body li, .wp-body h3 + p { break-inside: avoid; }
.wp-body pre, .wp-body table { column-span: all; }

/* On this page: sticky contents list on the left, the active section marked */
.wp-toc { position: sticky; top: 4.25rem; margin-top: .6rem; max-height: calc(100vh - 6rem); overflow-y: auto; font-size: .82rem; scrollbar-width: thin; }
.wp-toc-title { font-size: .78rem; font-weight: 600; color: var(--ink-dim); margin-bottom: .5rem; }
.wp-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.wp-toc li { margin: 0; }
.wp-toc li.sub a { padding-left: 1.5rem; }
.wp-toc a {
  display: block; padding: .28rem .75rem; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--ink-dim); line-height: 1.35; text-decoration: none;
}
.wp-toc a:hover { color: var(--ink); text-decoration: none; }
.wp-toc a.on { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
@media (max-width: 1100px) {
  .wp-layout { grid-template-columns: minmax(0, 1fr); max-width: 70ch; }
  .wp-toc { display: none; }
  .wp-body, .wp-sec:first-of-type .wp-body { column-count: 1; }
}
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
.wp > :first-child { margin-top: 0; }
.wp h1, .wp h2, .wp h3, .wp h4 { line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.wp h1 { font-size: 2rem; font-weight: 650; letter-spacing: -.025em; }
.wp h1 + p { color: var(--ink-dim); font-size: .92rem; margin-bottom: 1.5rem; }
.wp h1 + p em { font-style: normal; }
.wp h2 { font-size: 1.25rem; font-weight: 650; }
.wp h3 { font-size: 1.05rem; font-weight: 650; margin: 1.6rem 0 .4rem; }
.wp h4 { font-size: 1rem; font-weight: 650; margin: 1.5rem 0 .4rem; color: var(--ink-dim); }
.wp p { margin: 0 0 .75rem; }
.wp p > strong:first-child { color: var(--accent); }
.wp strong { font-weight: 650; }
.wp em { font-style: italic; }
.wp a { color: var(--link); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.wp a:hover { color: var(--ink); }
.wp ul, .wp ol { margin: 0 0 .75rem; padding-left: 1.3rem; }
.wp ul li::marker { color: var(--accent); }
.wp li { margin-bottom: .25rem; padding-left: .2rem; }
.wp li > ul, .wp li > ol { margin: .35rem 0 .35rem; }
.wp blockquote { margin: 1.3rem 0; padding: .1rem 0 .1rem 1.1rem; border-left: 1px solid var(--line-strong); color: var(--ink-dim); }
.wp blockquote p:last-child { margin-bottom: 0; }
.wp hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }
.wp code { font-family: var(--mono); font-size: .86em; background: var(--hover); padding: .08rem .3rem; border-radius: 3px; }
.wp pre {
  margin: .2rem 0 .9rem; padding: .7rem 1rem; overflow-x: auto; font-size: .84rem; line-height: 1.55; text-align: center;
  background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.wp pre code { background: none; padding: 0; font-size: inherit; }
.wp table { display: block; width: 100%; min-width: 0; overflow-x: auto; margin: 1.3rem 0; font-size: .92rem; border-collapse: collapse; }
.wp th, .wp td { padding: .45rem .8rem .45rem 0; border-bottom: 1px solid var(--rule); text-align: left; white-space: normal; font-family: inherit; vertical-align: top; }
.wp th { background: none; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink-dim); }
.wp tbody tr:hover td { background: none; }
.wp tr:last-child td { border-bottom: 1px solid var(--rule); }
.wp img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .wp h1 { font-size: 1.55rem; }
  .wp h2 { font-size: 1.2rem; margin-top: 1.8rem; }
}