📖✨：give the docs an index

_assets/styles/_custom.scss

@@ -1,5 +1,11 @@
 // Custom Styles
 
+// The navbar is fixed, so an anchor lands behind it without this. The extra
+// room keeps the target clear of the bar rather than flush against it.
+html {
+  scroll-padding-top: calc(#{$navbar-height} + 1rem);
+}
+
 main {
   min-height: 100%;
 }

_assets/styles/_docs.scss

@@ -0,0 +1,358 @@
+@use 'sass:color';
+
+// The docs index: what is written, and what is still open.
+
+// This page reads wider than the 48ch column the rest of the site uses, so it
+// sets its own width and its own offset under the fixed navbar. Colours come
+// from _sublime-theme.scss; $docs-muted is the tone _home.scss gives secondary
+// copy, so the two pages read alike.
+
+$docs-wrap: 1200px;
+$docs-gutter: clamp(1rem, 4vw, 3rem);
+$docs-link: shade-color($primary, 25%);
+$docs-primary-tint: tint-color($primary, 30%);
+$docs-muted: #4b433c;
+$docs-hairline: rgb(167 151 139 / 55%);
+
+// A pale wash with deep-shade text, so the chip clears AA at this size.
+$docs-flag-bg: tint-color($quaternary, 88%);
+$docs-flag-text: shade-color($quaternary, 25%);
+
+// Scoped to `main` to keep the resets off the navbar and footer, which are
+// its siblings under the same body class. The padding replaces what
+// `main > .container` gives the footer elsewhere.
+.docs main {
+  padding-bottom: 104px;
+}
+
+.docs main h1,
+.docs main h2,
+.docs main p,
+.docs main dl,
+.docs main dd,
+.docs main ul {
+  margin: 0;
+}
+
+.docs main ul {
+  padding: 0;
+  list-style: none;
+}
+
+.docs main a {
+  color: $docs-link;
+}
+
+.docs main :focus-visible {
+  outline: 2px solid $body-color;
+  outline-offset: 2px;
+}
+
+.docs .wrap {
+  max-width: $docs-wrap;
+  padding-inline: $docs-gutter;
+  margin-inline: auto;
+}
+
+/* --- Head -------------------------------------------------------------- */
+
+// Ink, so it carries on from the navbar rather than leaving a pale band
+// between the two.
+.docs-head {
+  padding-top: calc(#{$navbar-height} + clamp(2rem, 5vw, 3.5rem));
+  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
+  color: $body-bg;
+  background-color: $body-color;
+}
+
+.docs-head :focus-visible {
+  outline-color: $body-bg;
+}
+
+.docs-head-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
+  gap: clamp(2rem, 5vw, 4rem);
+  align-items: start;
+}
+
+// _custom.scss draws a rule after every h1. Beside a two-column grid it
+// would stop at this column's edge, so it is off here.
+.docs-title {
+  display: block;
+  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
+  font-weight: 700;
+  line-height: 1.08;
+  letter-spacing: -0.02em;
+}
+
+.docs-title::after {
+  content: none;
+}
+
+.docs-lede {
+  max-width: 42ch;
+  margin-top: 1rem !important;
+  font-size: clamp(1rem, 1.6vw, 1.0625rem);
+  line-height: 1.6;
+  color: rgb(231 231 214 / 76%);
+}
+
+/* --- Head: the invite -----------------------------------------------
+  The shape `.join` has on the home page, carrying the handbook's own gap.
+  Both branches read the count the list further down is built from.
+*/
+
+.invite {
+  padding: 1.25rem 1.375rem;
+  background-color: rgb(231 231 214 / 4%);
+  border: 1px solid rgb(231 231 214 / 20%);
+}
+
+.invite-eyebrow {
+  font-family: $font-family-monospace;
+  font-size: 0.6875rem;
+  color: $tertiary;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.invite-title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+  margin-top: 0.625rem !important;
+  font-size: 1.1875rem;
+  font-weight: 700;
+  line-height: 1.3;
+  color: $body-bg;
+}
+
+.invite-num {
+  font-family: $font-family-monospace;
+  font-size: clamp(2.25rem, 5vw, 2.75rem);
+  line-height: 0.9;
+  color: $docs-primary-tint;
+}
+
+.invite-what {
+  margin-top: 0.75rem !important;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: rgb(231 231 214 / 70%);
+}
+
+.invite-row {
+  padding-top: 0.875rem;
+  margin-top: 1rem !important;
+  border-top: 1px solid rgb(231 231 214 / 16%);
+}
+
+// Links on the ink. `.docs main a` is (0,1,2), so a band rule needs `main`
+// to reach them.
+.docs main .docs-head a {
+  color: $body-bg;
+}
+
+// The treatment `.join-row a` gives the home page's equivalent link.
+.docs main .invite-row a {
+  font-family: $font-family-monospace;
+  font-weight: 700;
+  color: $body-bg;
+}
+
+/* --- Shared section furniture ------------------------------------------ */
+
+.docs .band {
+  padding-block: clamp(2.5rem, 6vw, 4rem);
+}
+
+// The handbook is the substance of this page, so it sits on its own ground.
+.docs .band-quiet {
+  background-color: color.mix($tertiary, $body-bg, 12%);
+  border-block: 1px solid $docs-hairline;
+}
+
+.docs .section-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+  align-items: baseline;
+  justify-content: space-between;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid $body-color;
+}
+
+.docs .section-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.docs .section-more {
+  font-family: $font-family-monospace;
+  font-size: 0.8125rem;
+}
+
+.docs .section-count {
+  font-family: $font-family-monospace;
+  font-size: 0.8125rem;
+  color: $docs-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+/* --- Taking part --------------------------------------------------------
+  A plain divided list: process and community links, the same kind of thing
+  as the home page's "How we work".
+*/
+
+.docs .part-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0 clamp(1.5rem, 4vw, 3rem);
+  margin-top: 1.75rem !important;
+}
+
+.docs .part-item {
+  padding-block: 1.375rem;
+  border-bottom: 1px solid $docs-hairline;
+}
+
+.docs .part-name {
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
+
+.docs .part-what {
+  margin-top: 0.375rem !important;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  color: $docs-muted;
+}
+
+/* --- The handbook -------------------------------------------------------
+  Alphabetical, one row per rule, name and point side by side so the names
+  read as an index. The numeral uses `.area-num`'s recipe from the home page.
+*/
+
+.docs .handbook-lede {
+  max-width: 60ch;
+  margin-top: 1.25rem !important;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: $docs-muted;
+}
+
+.docs .rule-list {
+  margin-top: 1.75rem !important;
+}
+
+.docs .rule {
+  display: grid;
+  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
+  gap: 0.25rem 2rem;
+  padding-block: 0.875rem;
+  border-bottom: 1px solid rgb(167 151 139 / 35%);
+}
+
+.docs .rule:first-child {
+  border-top: 1px solid rgb(167 151 139 / 35%);
+}
+
+// A grid, so the numeral keeps its own column and stays beside the first
+// line of a title long enough to wrap.
+.docs .rule-name {
+  display: grid;
+  grid-template-columns: 1.375rem minmax(0, 1fr);
+  gap: 0.5rem;
+  align-items: baseline;
+  font-size: 0.9375rem;
+  font-weight: 700;
+}
+
+.docs .rule-num {
+  font-family: $font-family-monospace;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: $docs-link;
+}
+
+.docs .rule-heading {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: baseline;
+}
+
+.docs .rule-point {
+  font-size: 0.9375rem;
+  line-height: 1.6;
+}
+
+// The chip carries the state in text, so it does not rest on colour alone.
+.docs .rule-flag {
+  padding: 0.0625rem 0.4375rem;
+  font-family: $font-family-monospace;
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: $docs-flag-text;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background-color: $docs-flag-bg;
+}
+
+.docs .handbook-gap {
+  max-width: 60ch;
+  margin-top: 1.5rem !important;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: $docs-muted;
+}
+
+/* --- Not here yet --------------------------------------------------------
+  Quieter than the sections above: a heading at their size would promise a
+  third pillar the page does not have.
+*/
+
+.docs .band-tail {
+  padding-block: clamp(1.5rem, 3vw, 2rem);
+}
+
+.docs .tail-title {
+  font-family: $font-family-monospace;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: $docs-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.docs .tail-what {
+  max-width: 60ch;
+  margin-top: 0.625rem !important;
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: $docs-muted;
+}
+
+/* --- Narrow -------------------------------------------------------------- */
+
+@media (width < 960px) {
+  .docs-head-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (width < 760px) {
+  .docs .part-list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  // The name column stops earning its width once the point beside it wraps.
+  .docs .rule {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.375rem;
+  }
+}

_assets/styles/_home.scss

@@ -270,7 +270,13 @@
   color: rgb(231 231 214 / 70%);
 }
 
-.join-row a {
+// Links on the ink. `.home main a` is (0,1,2), so a band rule needs `main`
+// to reach them.
+.home main .masthead a {
+  color: var(--parchment);
+}
+
+.home main .join-row a {
   font-family: var(--mono);
   font-weight: 700;
   color: var(--parchment);
@@ -282,7 +288,8 @@
   color: rgb(231 231 214 / 58%);
 }
 
-.join-coc a {
+// Same weight as the rule above it, so this stays below it in the file.
+.home main .join-coc a {
   color: rgb(231 231 214 / 82%);
 }