/* libdense.github.io: the dense plates theme (ink field, cream plates,
   double-rule frames, engraved serif, five-color palette). */

@font-face { font-family: "Dense Plate Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dps-regular.woff2") format("woff2"); }
@font-face { font-family: "Dense Plate Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/dps-italic.woff2") format("woff2"); }
@font-face { font-family: "Dense Plate Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/dps-bold.woff2") format("woff2"); }
@font-face { font-family: "Dense Plate Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/dps-bolditalic.woff2") format("woff2"); }
@font-face { font-family: "Dense Plate Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dpm-regular.woff2") format("woff2"); }
@font-face { font-family: "Dense Plate Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/dpm-bold.woff2") format("woff2"); }

:root {
  --ink: #1c1a16;
  --paper: #e9e2d2;
  --faint: #9e9685;
  --glow: #e1dac9;
  --chord: #78746b;
  --shade: #d6cdb8;
  --sand: #b9b095;
  --sage: #557a68;
  --moss: #2f4f45;
  --rust: #a34a3f;
  --hover: #d8d0bd;
  --font: "Dense Plate Serif", "Liberation Serif", "Tinos", "Times New Roman", serif;
  --mono: "Dense Plate Mono", "Liberation Mono", "Cousine", "Courier New", monospace;
  --tabs-h: 78px; /* replaced at runtime by the measured tab bar height */
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; background: var(--ink); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--shade); color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--chord); text-underline-offset: 2px; }
a:hover { color: var(--moss); text-decoration-color: var(--moss); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--moss); outline-offset: 2px;
}
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--paper); padding: 6px 10px; }

.page { max-width: 1600px; margin: 0 auto; padding: 18px 18px 28px; }

/* ---------- plates ---------- */

.plate {
  background: var(--paper);
  border: 4px double var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink);
}
.plate-head {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.3;
  padding: 10px 14px 0;
}
.plate-head i { font-weight: 400; letter-spacing: 0; }
.plate-title {
  display: table; margin: 14px auto 6px; padding: 0 0.7em 6px;
  font-weight: 400; font-size: 30px; letter-spacing: 0.22em; line-height: 1.15; text-align: center;
  border-bottom: 1px solid var(--ink);
}
.plate-title.small { font-size: 22px; margin: 0 0 4px; display: inline-block; padding-left: 0; }
.subtitle { margin: 0 0 14px; text-align: center; font-style: italic; font-size: 15px; color: #3b3832; }
.muted { color: var(--chord); font-style: italic; font-size: 14px; }
.mini-head {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); font-size: 12px; letter-spacing: 1.2px; line-height: 1;
  color: var(--ink); background: var(--glow); border: 1px solid var(--ink); border-radius: 0;
  padding: 7px 11px; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--hover); color: var(--ink); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--moss); color: var(--paper); }
.btn.big { font-size: 14px; letter-spacing: 1.8px; padding: 12px 18px; }

/* ---------- hero ---------- */

.hero { padding-bottom: 20px; text-align: center; }
.hero .plate-head { text-align: left; }
.hero-title {
  display: table; margin: 18px auto 10px; padding: 0 0.8em 8px;
  font-weight: 400; font-size: 54px; letter-spacing: 0.3em; line-height: 1.05;
  border-bottom: 1px solid var(--ink);
  /* letter-spacing pads the last letter; balance it */
  text-indent: 0.3em;
}
.tagline { margin: 0 auto 14px; max-width: 760px; font-size: 21px; font-style: italic; line-height: 1.35; }
.epigraph {
  margin: 0 auto 18px; max-width: 640px; padding: 8px 18px;
  border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint);
}
.epigraph p { margin: 0; font-style: italic; font-size: 15.5px; color: #4a463f; }
.hero-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.book-line { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 16px; }
.book-line > span { font-style: italic; color: var(--chord); }

/* ---------- tabs ---------- */

.tabs {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink); padding: 10px 0 9px; margin-top: 8px;
}
.tabs-inner { display: flex; gap: 6px; padding: 6px; }
.tabs a {
  flex: 1 1 0; text-align: center; text-decoration: none;
  font-size: 14px; letter-spacing: 2.4px; padding: 8px 10px;
  background: var(--glow); border: 1px solid var(--ink); color: var(--ink);
}
.tabs a i { font-size: 12px; letter-spacing: 0; margin-right: 6px; color: var(--chord); }
.tabs a:hover { background: var(--hover); }
.tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.tabs a[aria-current="page"] i { color: var(--faint); }

.js .panel { display: none; }
.js .panel.active { display: block; }
.panel { margin-top: 10px; }
html:not(.js) .panel + .panel { margin-top: 28px; }

/* ---------- viewer ---------- */

.viewer-plate { padding-bottom: 10px; }
.viewer-bar {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap;
  padding: 8px 14px 10px;
}
.viewer-title .subtitle { text-align: left; margin: 0; }
.viewer-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.viewer-frame-wrap {
  margin: 0 14px; border: 2px solid var(--ink); background: var(--ink);
  height: max(560px, calc(100vh - var(--tabs-h) - 40px));
}
.viewer-frame-wrap iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ink); }
.noscript-note { color: var(--paper); padding: 20px; }
.noscript-note a { color: var(--paper); }
.caption { margin: 8px 14px 0; font-size: 13.5px; font-style: italic; color: var(--chord); }

/* ---------- docs ---------- */

.docs { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.docs-nav {
  position: sticky; top: calc(var(--tabs-h) + 6px);
  max-height: calc(100vh - var(--tabs-h) - 22px); overflow: auto;
  padding-bottom: 12px; font-size: 14px;
}
.docs-nav details { padding: 8px 14px 0; }
.docs-nav summary {
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px; cursor: pointer;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px; margin-bottom: 8px; list-style: none;
}
.docs-nav summary::-webkit-details-marker { display: none; }
.docs-nav summary::after { content: " -"; color: var(--chord); }
.docs-nav details:not([open]) summary::after { content: " +"; }
.filter { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.filter span { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: var(--chord); }
.filter input {
  flex: 1 1 auto; min-width: 0; height: 26px; padding: 2px 7px;
  font-family: var(--font); font-size: 13px; color: var(--ink);
  background: var(--glow); border: 1px solid var(--ink); border-radius: 0;
}
.docs-list .grp { margin: 0 0 10px; }
.docs-list .grp-name { font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; color: var(--chord); margin: 8px 0 3px; }
.docs-list ul { list-style: none; margin: 0; padding: 0; }
.docs-list li a {
  display: block; padding: 2px 6px; margin: 0 -6px; text-decoration: none; line-height: 1.3;
  overflow-wrap: anywhere;
}
.docs-list li a:hover { background: var(--glow); color: var(--ink); }
.docs-list li a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.docs-list .src-note { font-size: 12px; font-style: italic; color: var(--rust); margin: 6px 0 0; }
.docs-nav details.toc-box { padding-top: 6px; }
.toc { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.toc li a { display: block; padding: 1px 0; text-decoration: none; color: #3b3832; line-height: 1.3; }
.toc li a:hover { color: var(--moss); text-decoration: underline; }
.toc li.l3 { padding-left: 14px; font-style: italic; font-size: 13px; }

.docs-article { min-height: 60vh; }
.docs-article .plate-head { align-items: baseline; }
#doc-path { font-weight: 700; letter-spacing: 1px; overflow-wrap: anywhere; }
.doc-actions { display: inline-flex; gap: 14px; }
.doc-actions a { text-decoration: none; }
.doc-actions a:hover { text-decoration: underline; }
.doc-foot {
  margin: 0 28px; padding: 10px 0 14px; border-top: 1px solid var(--faint);
  font-size: 13px; font-style: italic; color: var(--chord);
}
.doc-state { padding: 40px 0; text-align: center; }
.md .doc-state .plate-title {
  display: table; margin: 14px auto 12px; padding: 0 0.7em 6px; text-align: center;
  font-size: 22px; letter-spacing: 0.2em; text-transform: none; border-bottom: 1px solid var(--ink);
}
.doc-state p { color: #3b3832; }

/* ---------- rendered markdown ---------- */

.md { padding: 10px 28px 18px; overflow-wrap: break-word; }
.md > :first-child { margin-top: 10px; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { font-weight: 400; line-height: 1.25; scroll-margin-top: calc(var(--tabs-h) + 14px); }
.md h1 {
  display: table; margin: 14px auto 18px; padding: 0 0.7em 6px; text-align: center;
  font-size: 30px; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--ink);
}
.md h2 {
  margin: 1.9em 0 0.7em; padding-bottom: 4px; border-bottom: 1px solid var(--ink);
  font-size: 19px; letter-spacing: 0.12em; text-transform: uppercase;
}
.md h3 { margin: 1.6em 0 0.5em; font-size: 18px; font-weight: 700; }
.md h4 { margin: 1.4em 0 0.4em; font-size: 16px; font-weight: 700; font-style: italic; }
.md h5, .md h6 { margin: 1.3em 0 0.4em; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--chord); }
.md .h-anchor {
  margin-left: 8px; font-size: 0.75em; color: var(--faint); text-decoration: none;
  letter-spacing: 0; opacity: 0; transition: opacity 0.15s;
}
.md h1 .h-anchor { display: none; }
.md :hover > .h-anchor, .md .h-anchor:focus { opacity: 1; }
.md p, .md ul, .md ol, .md dl { margin: 0 0 0.9em; }
.md ul, .md ol { padding-left: 1.6em; }
.md li { margin: 0.15em 0; }
.md li > ul, .md li > ol { margin: 0.2em 0 0.3em; }
.md ul { list-style: square; }
.md li::marker { color: var(--chord); }
.md li.task { list-style: none; margin-left: -1.3em; }
.md li.task input { accent-color: var(--moss); margin: 0 6px 0 0; vertical-align: -1px; }
.md strong { font-weight: 700; }
.md hr { border: 0; border-top: 3px double var(--ink); margin: 2em 0; }
.md blockquote {
  margin: 0 0 1em; padding: 2px 0 2px 16px; border-left: 4px double var(--ink);
  font-style: italic; color: #4a463f;
}
.md blockquote > :last-child { margin-bottom: 0; }
.md img { max-width: 100%; height: auto; border: 1px solid var(--faint); background: #fff; }
.md code {
  font-family: var(--mono); font-size: 0.84em; background: var(--glow);
  border: 1px solid rgba(28, 26, 22, 0.16); padding: 0.05em 0.3em; overflow-wrap: anywhere;
}
.md pre {
  position: relative; margin: 0 0 1.1em; padding: 14px 16px; overflow: auto;
  background: var(--glow); border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--glow), inset 0 0 0 4px rgba(28, 26, 22, 0.22);
  font-size: 13.5px; line-height: 1.45; tab-size: 4;
}
.md pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.md pre[data-lang] { padding-top: 24px; }
.md pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 6px; right: 10px;
  font-family: var(--font); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: var(--chord);
}
.md .table-wrap { margin: 0 0 1.2em; overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.md table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.md th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--chord);
  text-align: left; padding: 8px 10px 6px; border-bottom: 1px solid var(--ink); vertical-align: bottom;
}
.md th[align="right"], .md td[align="right"] { text-align: right; }
.md th[align="center"], .md td[align="center"] { text-align: center; }
.md td { padding: 5px 10px; border-bottom: 1px solid rgba(158, 150, 133, 0.55); vertical-align: top; }
.md tr:last-child td { border-bottom: 0; }
.md tbody tr:hover td { background: var(--glow); }
.md td code { font-size: 0.86em; }
.md a > code { border-color: var(--chord); }
.md a:hover > code { border-color: var(--moss); }
.md kbd { font-family: var(--mono); font-size: 0.82em; border: 1px solid var(--ink); padding: 0 4px; background: var(--glow); }
.md details { margin: 0 0 1em; border: 1px solid var(--faint); padding: 6px 10px; }
.md summary { cursor: pointer; font-weight: 700; }

/* ---------- support ---------- */

.support { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.support-plate { padding: 0 0 22px; text-align: center; }
.support-plate > p { margin: 0 auto 16px; max-width: 520px; padding: 0 20px; }
.support-plate .plate-title { margin-top: 18px; }
.support-plate .link-line { margin: 12px auto 0; font-size: 14px; font-style: italic; color: var(--chord); }
.support-plate.wide { grid-column: 1 / -1; padding-bottom: 14px; }
.read-first { margin: 10px auto 0 !important; max-width: 900px !important; font-size: 16px; }
.marks { list-style: none; margin: 0 auto 14px; padding: 0; display: inline-block; text-align: left; }
.marks li { padding-left: 22px; position: relative; margin: 3px 0; }
.marks li::before {
  content: ""; position: absolute; left: 2px; top: 0.5em; width: 9px; height: 7px;
  border: 1.4px solid var(--ink); border-top-width: 3px;
}

/* ---------- footer ---------- */

.foot {
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center;
  margin-top: 26px; padding-top: 14px; border-top: 1px solid #3a3731;
  font-size: 13px; color: var(--faint);
}
.foot a { color: var(--paper); text-decoration-color: var(--chord); }
.foot a:hover { color: var(--shade); }
.foot .licenses { font-style: italic; }
.foot .licenses a { color: var(--faint); }

/* ---------- narrow screens ---------- */

@media (max-width: 1000px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; max-height: none; }
  .book-line { flex-wrap: wrap; justify-content: center; text-align: center; padding: 0 10px; }
  .support { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .page { padding: 10px 10px 22px; }
  .hero-title { font-size: 36px; letter-spacing: 0.22em; text-indent: 0.22em; padding: 0 0.4em 6px; }
  .tagline { font-size: 18px; padding: 0 12px; }
  .epigraph { margin-left: 12px; margin-right: 12px; padding: 8px 6px; }
  .plate-title { font-size: 23px; letter-spacing: 0.16em; }
  .tabs { padding: 10px 0 8px; }
  .tabs a { font-size: 12px; letter-spacing: 1.4px; padding: 8px 4px; }
  .tabs a i { display: none; }
  .md { padding: 8px 14px 14px; }
  .md h1 { font-size: 23px; letter-spacing: 0.1em; }
  .doc-foot { margin: 0 14px; }
  .viewer-frame-wrap { margin: 0 8px; height: max(480px, calc(100vh - var(--tabs-h) - 30px)); }
  .viewer-actions .btn span { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}