/* Documentation layout. The palette, type and rules come from lounge.css;
   this only adds what long-form prose needs and nothing else. */
.docs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px;
        max-width: 1180px; margin: 0 auto; padding: 36px 32px 110px; }

.docs-nav { position: sticky; top: 30px; align-self: start; font-size: 13.5px; }
.docs-nav h3 { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
               text-transform: uppercase; color: var(--cream); margin-bottom: 16px; }
.docs-nav p { color: var(--cream-dim); font-size: 12.5px; line-height: 1.6; margin: 14px 0; }
.docs-nav strong { display: block; font-family: var(--mono); font-size: 10.5px;
                   letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
                   color: var(--cream-dim); margin: 22px 0 8px; }
.docs-nav ol, .docs-nav ul { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.docs-nav ol li { counter-increment: n; }
.docs-nav ol li::before { content: counter(n); font-family: var(--mono); font-size: 10px;
                          color: var(--brass); margin-right: 9px; }
.docs-nav li { margin: 0; padding: 5px 0; display: flex; align-items: baseline; }
.docs-nav a { color: var(--cream-dim); text-decoration: none; line-height: 1.45; }
.docs-nav a:hover { color: var(--brass); }
.docs-nav a.current { color: var(--brass); }
.docs-nav hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.doc { min-width: 0; }
.doc h1 { font-size: 33px; line-height: 1.2; margin: 0 0 24px; }
.doc h2 { font-size: 22px; margin: 44px 0 15px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 16.5px; margin: 30px 0 11px; color: var(--cream); }
.doc h4 { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
          color: var(--brass); margin: 26px 0 10px; }
.doc p  { margin: 0 0 18px; line-height: 1.74; color: var(--cream-dim); }
.doc strong { color: var(--cream); font-weight: 600; }
.doc ul, .doc ol { margin: 0 0 20px; padding-left: 22px; }
.doc li { margin: 7px 0; line-height: 1.68; color: var(--cream-dim); }
.doc li::marker { color: var(--brass); }
.doc code { font-family: var(--mono); font-size: .88em; color: var(--cream);
            background: rgba(233,228,211,.06); padding: 1px 5px; border-radius: 3px; }
.doc pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--cream);
           background: rgba(5,12,9,.88); border: 1px solid var(--line); border-left: 3px solid var(--brass);
           border-radius: 3px; padding: 20px 22px; overflow-x: auto; margin: 0 0 22px; }
.doc pre code { background: none; padding: 0; font-size: inherit; }
.doc blockquote { margin: 0 0 22px; padding: 2px 0 2px 20px; border-left: 2px solid var(--brass); }
.doc blockquote p { color: var(--cream); font-style: italic; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 13.5px;
             display: block; overflow-x: auto; }
.doc th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
          color: var(--cream-dim); text-align: left; padding: 8px 16px 8px 0;
          border-bottom: 1px solid var(--line); white-space: nowrap; }
.doc td { padding: 9px 16px 9px 0; border-bottom: 1px solid rgba(233,228,211,.07);
          color: var(--cream-dim); line-height: 1.62; vertical-align: top; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }
.doc img { max-width: 100%; height: auto; }

@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; gap: 26px; padding: 22px 20px 70px; }
  .docs-nav { position: static; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
}