/* VesTRA z0.0 "About" page: a light reading page on the VesTRA tokens. */
body.ab { margin: 0; background: var(--vx-paper); color: var(--vx-ink); font-family: var(--vx-font);
  line-height: 1.65; -webkit-font-smoothing: antialiased; }
.ab-skip { position: absolute; left: -9999px; }
.ab-skip:focus { left: 16px; top: 12px; z-index: 60; background: #17161a; color: #fff; padding: 8px 12px; border-radius: 8px; }
.ab-wrap { max-width: 1100px; margin: 0 auto; padding: 56px var(--vx-gutter) 96px; box-sizing: border-box; }
.ab-label { font-family: var(--vx-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--vx-faint); }
.ab-wrap h1 { margin: 14px 0 0; font-size: clamp(32px, 5.4vw, 48px); line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; }
.ab-lede { margin: 18px 0 0; font-size: 18.5px; color: var(--vx-muted); }
.ab-updated { margin: 22px 0 0; font-family: var(--vx-mono); font-size: 12px; color: var(--vx-faint); }
.ab-wrap h2 { margin: 56px 0 0; font-size: clamp(22px, 3vw, 28px); font-weight: 500; letter-spacing: -0.022em; scroll-margin-top: 24px; }
.ab-wrap h3 { margin: 30px 0 0; font-size: 17px; font-weight: 600; }
.ab-wrap p { margin: 14px 0 0; }
.ab-wrap ul { margin: 14px 0 0; padding-left: 22px; }
.ab-wrap li { margin: 7px 0 0; }
.ab-wrap a { color: #1c5f86; }
.ab-rule { margin: 54px 0 0; border: 0; border-top: 1px solid var(--vx-line); }
.ab-card { margin: 22px 0 0; background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); padding: 22px 24px; }
.ab-card p:first-child { margin-top: 0; }
.ab-defs { margin: 20px 0 0; display: grid; gap: 1px; background: var(--vx-line); border: 1px solid var(--vx-line);
  border-radius: var(--vx-radius); overflow: hidden; }
.ab-defs > div { background: var(--vx-surface); padding: 16px 20px; }
.ab-defs dt { font-weight: 600; font-size: 15.5px; }
.ab-defs dd { margin: 5px 0 0; color: var(--vx-muted); font-size: 15px; }
.ab-back { display: inline-block; margin-bottom: 8px; font-size: 14px; color: var(--vx-muted); text-decoration: none; }
.ab-back:hover { color: var(--vx-ink); }
.ab-foot { max-width: 1100px; margin: 0 auto; box-sizing: border-box; padding: 24px var(--vx-gutter) 56px;
  border-top: 1px solid var(--vx-line); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
  font-size: 13.5px; color: var(--vx-faint); }
.ab-foot a { color: var(--vx-muted); text-decoration: none; }
.ab-foot a:hover { color: var(--vx-ink); }
.ab-foot-brand { display: inline-flex; align-items: center; }
.ab-foot-brand img { display: block; height: 12px; width: auto; opacity: .75; }
.ab-foot-brand:hover img { opacity: 1; }
.ab-foot-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---- two columns: "On this page" on the left, the text on the right */
.ab-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; }
.ab-content { min-width: 0; max-width: 760px; }
.ab-content > h2:first-child { margin-top: 0; }
.ab-toc details { font-size: 14px; }
.ab-toc summary { font-family: var(--vx-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--vx-muted); margin-bottom: 8px; list-style: none; }
.ab-toc summary::-webkit-details-marker { display: none; }
.ab-toc ol { list-style: none; margin: 0; padding: 0; }
.ab-toc li { margin: 0; }
.ab-wrap .ab-toc a { display: flex; gap: 10px; align-items: center; min-height: 36px; text-decoration: none; color: var(--vx-muted); border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px; }
.ab-toc a span { font-family: var(--vx-mono); font-size: 11px; color: var(--vx-faint); }
.ab-wrap .ab-toc a:hover, .ab-wrap .ab-toc a.is-here { color: var(--vx-ink); }
.ab-wrap .ab-toc a.is-here { border-left-color: var(--vx-ink); font-weight: 600; }
@media (min-width: 900px) {
  .ab-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
  .ab-toc { position: sticky; top: 24px; padding-left: 14px; }
  .ab-toc summary { cursor: default; }
}
@media (max-width: 899px) {
  .ab-toc details { background: var(--vx-surface); border: 1px solid var(--vx-line); border-radius: var(--vx-radius); }
  .ab-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; padding: 0 18px; cursor: pointer; }
  .ab-toc ol { padding: 2px 18px 10px 32px; }
}