/* ============================================================================
   CREED docs theme (2026-11-05).

   The docs pages are bound into the same code book as the front page
   (site/assets/creed.css): cream stock with a whisper of grain, the green
   cloth spine down the left edge, the running head with the edition line,
   Source Serif titles over a double rule, IBM Plex Mono for every label and
   clause number, rubber stamps on the notes, an errata slip for the warnings,
   and the green colophon at the foot. Every value comes from creed.css.

   How it gets onto the pages: docs/docs.json "theme" names this file and
   docs/_header.html. The docs builder copies this file to
   site/docs/theme/creed.css and links it after the kit's docs.css, so the
   --dk-* tokens and the rules below win without !important. The kit's
   docs.css stays byte for byte Squire's. Edit here, never there.

   The front page has no dark mode, so the dark set is derived: the book's
   own cover. Deep green cloth for the ground, cream for the text, gold foil
   where the light page uses green (the title, the links, the focus ring).

   Like the band, this file has one sound and commits to it.

   File map: 1. fonts and tokens  2. frame and binding  3. running head
             4. sidebar and menu  5. article  6. code  7. tabs
             8. tables, notes, callouts  9. toc, pager, colophon  10. dark
             11. responsive  12. motion (no-preference only)  13. print
   ========================================================================== */

/* ---------------------------------------------------- 1. fonts and tokens */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../assets/fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../../assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../assets/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../assets/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../../assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  /* The front page's palette, under the same names (prefixed, so nothing
     here can collide with WayneUI or the kit). */
  --c-paper: #f4f1ea;          /* CREED cream, the stock */
  --c-paper-hi: #fbf9f4;       /* a fresh leaf */
  --c-slip: #fbf5df;           /* the errata slip, a different stock */
  --c-ink: #1b2420;
  --c-ink-2: #47524d;
  --c-rule: #c8c0ae;
  --c-green: #0c5449;
  --c-green-hover: #0f6557;
  --c-green-deep: #08352f;
  --c-gold: #ffcc33;
  --c-gold-hi: #ffd65c;
  --c-ochre: #634d00;          /* the kicker ink */
  --c-red: #9a2a1f;            /* the inspector's red */
  --c-stamp-doc: #3c4a45;
  --c-title: var(--c-green);   /* the title page's name */
  --c-current: var(--c-green); /* the bar beside the page you are on */
  --c-code-tint: rgba(12, 84, 73, .07);
  --c-slab: #1b2420;           /* the front page's snippet block */
  --c-slab-ink: #e9efe9;
  --c-slab-rule: #1b2420;
  --c-head-bg: rgba(244, 241, 234, .94);
  --c-colophon: #0c5449;
  --c-colophon-fine: #d4dfdb;
  --c-head-h: 3.25rem;

  --c-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --c-mono: "IBM Plex Mono", var(--wsu-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --c-sans: var(--wsu-font-family-body, Lato, Calibri, "Helvetica Neue", Arial, sans-serif);
  --c-ease-out: cubic-bezier(.2, .8, .2, 1);
  --c-ease-press: cubic-bezier(.5, 0, .2, 1.4);

  /* A whisper of paper grain. Static, no motion. */
  --c-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* The kit's tokens, set from the palette above. */
  --dk-bg: var(--c-paper);
  --dk-ink: var(--c-ink);
  --dk-muted: var(--c-ink-2);
  --dk-rule: var(--c-rule);
  --dk-accent: var(--c-green);
  --dk-on-accent: var(--c-paper-hi);
  --dk-code-bg: #ebe6da;
  --dk-note: var(--c-stamp-doc);
  --dk-tip: var(--c-green);
  --dk-warning: var(--c-ochre);
  --dk-danger: var(--c-red);
  --dk-display: var(--c-serif);
  --dk-mono: var(--c-mono);
  --dk-radius: 3px;
  --dk-focus: var(--c-green);
  --dk-focus-w: 3px;
  --dk-focus-o: 3px;
  --dk-sidebar: 15.5rem;
  --dk-prose-max: 46rem;
  --dk-gap: 1.75rem;

  color-scheme: light;
}

/* --------------------------------------------------- 2. frame and binding */

html {
  background: var(--dk-bg);
  scroll-padding-top: calc(var(--c-head-h) + 1rem);
}

body {
  margin: 0;
  color: var(--dk-ink);
  background: var(--dk-bg) var(--c-grain);
  font-family: var(--c-sans);
  overflow-x: clip;
}

/* The green cloth spine down the left edge, as on the front page. */
body::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 8px;
  background: linear-gradient(90deg, var(--c-green-deep), var(--c-green) 70%, #0f5f53);
  box-shadow: 1px 0 0 var(--c-gold), 3px 0 6px rgba(27, 36, 32, .12);
  pointer-events: none;
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: var(--dk-focus-w) solid var(--dk-focus);
  outline-offset: var(--dk-focus-o);
  border-radius: 2px;
}

.wsu-skip-link {
  color: var(--dk-on-accent);
  background: var(--dk-accent);
}

/* ------------------------------------------------------- 3. running head */

.runhead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-head-bg);
  border-bottom: 1px solid var(--dk-rule);
  backdrop-filter: blur(6px);
}

.runhead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-sizing: border-box;
  max-width: 100rem;
  min-height: var(--c-head-h);
  margin-inline: auto;
  padding-inline: var(--dk-gap);
}

.runhead__brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  color: var(--dk-ink);
  text-decoration: none;
  font-family: var(--c-serif);
  font-weight: 700;
  letter-spacing: .08em;
}

.runhead__brand img {
  border-radius: 6px;
}

.runhead__edition {
  padding-left: 1.25rem;
  font-family: var(--c-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dk-muted);
  border-left: 1px solid var(--dk-rule);
}

.runhead__nav {
  display: flex;
  gap: 1.1rem;
  margin-left: auto;
}

.runhead__nav a {
  padding: .35rem 0;
  font-family: var(--c-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dk-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.runhead__nav a:hover {
  border-bottom-color: var(--c-gold);
}

/* You are here: Docs, underlined in the book's own ink. */
.runhead__nav a[aria-current="page"] {
  font-weight: 600;
  border-bottom-color: var(--c-current);
}

/* -------------------------------------------------- 4. sidebar and menu */

.docs-layout {
  gap: 1.5rem clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  padding-block: 2.25rem 3.5rem;
  padding-inline: var(--dk-gap);
}

/* Group labels are the front page's kickers: mono caps in ochre. */
.docs-nav__label {
  margin: 1.5rem 0 .45rem;
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ochre);
}

.docs-nav__list > li:first-child > .docs-nav__label {
  margin-top: 0;
}

/* Group lists are plain <ul> inside the kit's list: no bullets, no indent. */
.docs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A group's pages hang off a hairline, like the clauses under a chapter. */
.docs-nav__group > ul {
  border-left: 1px solid var(--dk-rule);
}

.docs-nav__group + li:not(.docs-nav__group) {
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--dk-rule);
}

.docs-nav a {
  margin-left: -1px;
  padding: .38rem .75rem;
  font-size: .97rem;
  line-height: 1.35;
  color: var(--dk-ink);
  border-left: 3px solid transparent;
  border-radius: 0;
}

.docs-nav__list > li:not(.docs-nav__group) > a {
  margin-left: 0;
  padding-left: .5rem;
}

.docs-nav a:hover {
  color: var(--dk-accent);
  background: var(--c-paper-hi);
  border-left-color: var(--dk-rule);
}

/* The page you are on: the clause bar of the front page, inked. */
.docs-nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--dk-ink);
  background: var(--c-paper-hi);
  border-left-color: var(--c-current);
}

/* The phone menu: the front page's ruled button. */
.docs-menu summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 2.9rem;
  padding: .65rem 1.1rem;
  font-family: var(--c-mono);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dk-ink);
  background: transparent;
  border: 2px solid var(--dk-ink);
  border-radius: 3px;
  list-style: none;
}

.docs-menu summary::-webkit-details-marker {
  display: none;
}

.docs-menu summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
}

.docs-menu[open] summary::after {
  rotate: 225deg;
  translate: 0 2px;
}

.docs-menu[open] > .docs-nav {
  padding: .75rem 0 .5rem;
}

/* ------------------------------------------------------------- 5. article */

.docs-article {
  font-family: var(--c-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--dk-ink);
}

/* The folio line over every page, as over every sheet of the front page.
   Decorative: the alt text after the slash is empty, so it is not read. */
.docs-article::before {
  content: "CREED documentation \00B7  The Wayne State App Stack Code";
  content: "CREED documentation \00B7  The Wayne State App Stack Code" / "";
  display: block;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: .5rem;
  font-family: var(--c-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dk-muted);
  border-bottom: 1px solid var(--dk-rule);
}

.docs-article h1,
.docs-article h2,
.docs-article h3 {
  font-family: var(--c-serif);
  color: var(--dk-ink);
  scroll-margin-top: calc(var(--c-head-h) + 1rem);
  text-wrap: balance;
}

/* The page title: the title page's name, green, over the clause's double rule. */
.docs-article h1 {
  margin: 0 0 1.75rem;
  font-size: clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--c-title);
}

.docs-article h1::after {
  content: "";
  display: block;
  height: 0;
  margin-top: 1rem;
  border-top: 3px double var(--dk-ink);
}

/* Each section opens on a section mark, the way each clause does. */
.docs-article h2 {
  margin: 2.75rem 0 .9rem;
  padding-bottom: .4rem;
  font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  border-bottom: 1px solid var(--dk-rule);
}

.docs-article h2::before {
  content: "\00A7";
  content: "\00A7" / "";
  margin-right: .45rem;
  font-family: var(--c-mono);
  font-size: .7em;
  font-weight: 600;
  vertical-align: .12em;
  color: var(--dk-accent);
}

.docs-article h3 {
  margin: 2rem 0 .5rem;
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.3;
}

.docs-article :is(h1, h2, h3) code {
  font-size: .78em;
}

.docs-heading-link {
  font-family: var(--c-mono);
  font-size: .7em;
  font-weight: 400;
  color: var(--dk-muted);
}

.docs-article a {
  color: var(--dk-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.docs-article a:hover {
  text-decoration-thickness: 2px;
}

.docs-article strong {
  font-weight: 700;
  color: var(--dk-ink);
}

.docs-article :is(ul, ol) {
  padding-left: 1.4rem;
}

.docs-article li {
  margin-block: .3rem;
}

.docs-article li::marker {
  color: var(--dk-accent);
}

.docs-article ol > li::marker {
  font-family: var(--c-mono);
  font-size: .9em;
}

.docs-article img {
  max-width: 100%;
  height: auto;
}

.docs-article hr {
  margin-block: 2.5rem;
  border: 0;
  border-top: 3px double var(--dk-rule);
}

/* ---------------------------------------------------------------- 6. code */

.docs-article code {
  padding: .05em .3em;
  font-family: var(--c-mono);
  font-size: .86em;
  color: var(--dk-ink);
  background: var(--c-code-tint);
  border-radius: 3px;
  overflow-wrap: anywhere;
}

/* The front page's snippet block: ink stock, light type. Lines keep their
   shape, so a long one scrolls instead of wrapping. */
.docs-article pre {
  margin: 1.1rem 0 1.4rem;
  padding: 1rem 1.1rem;
  font-family: var(--c-mono);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--c-slab-ink);
  background: var(--c-slab);
  border: 1px solid var(--c-slab-rule);
  border-radius: 3px;
  tab-size: 4;
  scrollbar-color: #47524d transparent;
}

.docs-article pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
  overflow-wrap: normal;
}

/* With docs.js the block sits in .docs-copy: the stock moves to the wrapper
   and the pre stops short of a gutter, so the copy tab never covers code. */
.docs-copy {
  margin: 1.1rem 0 1.4rem;
  background: var(--c-slab);
  border: 1px solid var(--c-slab-rule);
  border-radius: 3px;
}

.docs-copy > pre {
  margin: 0;
  margin-right: 5.75rem;
  padding-right: .75rem;
  background: transparent;
  border: 0;
  border-radius: 3px 0 0 3px;
}

/* The copy button: the front page's gold copy tab. */
.docs-copy__button {
  top: .55rem;
  right: .55rem;
  min-height: 2rem;
  padding: .25rem .8rem;
  font-family: var(--c-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1b2420;
  background: var(--c-gold);
  border: 0;
  border-radius: 2px;
}

.docs-copy__button:hover {
  color: #1b2420;
  background: var(--c-gold-hi);
}

/* On the ink stock a green ring would vanish: gold, as on the front page. */
.docs-copy__button:focus-visible,
.docs-article pre:focus-visible {
  outline: 3px solid var(--c-gold);
}

.docs-article pre:focus-visible {
  outline-offset: -4px;
}

/* ---------------------------------------------------------------- 7. tabs */

/* The front page's OS tabs: mono caps on a ruled line, the chosen one inked. */
.docs-tabs__tablist {
  gap: 0;
  border-bottom: 2px solid var(--dk-ink);
}

.docs-tabs__tab {
  min-height: 2.6rem;
  padding: .55rem .9rem;
  font-family: var(--c-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dk-muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  box-shadow: none;
}

.docs-tabs__tab:hover {
  color: var(--dk-accent);
  border-color: var(--dk-rule);
}

.docs-tabs__tab[aria-selected="true"] {
  font-weight: 600;
  color: var(--dk-bg);
  background: var(--dk-ink);
  border-color: var(--dk-ink);
  box-shadow: none;
}

.docs-tabs__label {
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--c-ochre);
}

/* --------------------------------------------- 8. tables, notes, callouts */

/* Table 2-1's rules: heavy over and under, hairlines between. */
.docs-table {
  margin: 1.5rem 0 1.75rem;
  border-top: 3px solid var(--dk-ink);
  border-bottom: 3px solid var(--dk-ink);
}

.docs-article table {
  font-size: .95rem;
  line-height: 1.5;
}

.docs-article th,
.docs-article td {
  padding: .5rem .75rem;
  vertical-align: top;
  border-bottom: 1px solid var(--dk-rule);
}

.docs-article thead th {
  font-family: var(--c-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dk-muted);
  border-bottom: 1px solid var(--dk-ink);
}

/* An id or a command keeps its shape in a cell: the column sizes to it, and
   it only breaks if it would spill out of the table. */
.docs-article td code {
  overflow-wrap: break-word;
}

.docs-article tbody tr:last-child > * {
  border-bottom: 0;
}

/* A plain quote is a margin note: serif italic beside a hairline. */
.docs-article blockquote {
  margin: 1.5rem 0;
  padding: .1rem 0 .1rem 1rem;
  font-family: var(--c-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--dk-muted);
  border-left: 3px solid var(--dk-rule);
}

.docs-article blockquote > :last-child {
  margin-bottom: 0;
}

/* Callouts (> [!NOTE] and friends): a fresh leaf with a colored margin bar,
   labeled with a small rubber stamp in the front page's stamp inks. Warnings
   and dangers are printed on the errata slip's stock. */
.docs-callout {
  --c-callout: var(--dk-note);
  margin: 1.5rem 0;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--c-paper-hi);
  border: 1px solid var(--dk-rule);
  border-left: 4px solid var(--c-callout);
  border-radius: 0;
}

.docs-callout--note { --c-callout: var(--dk-note); }
.docs-callout--tip { --c-callout: var(--dk-tip); }
.docs-callout--warning { --c-callout: var(--dk-warning); background: var(--c-slip); }
.docs-callout--danger { --c-callout: var(--dk-danger); background: var(--c-slip); }

.docs-callout__label,
.docs-callout--note .docs-callout__label,
.docs-callout--tip .docs-callout__label,
.docs-callout--warning .docs-callout__label,
.docs-callout--danger .docs-callout__label {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .4rem .55rem .35rem;
  font-family: var(--c-mono);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-callout);
  border: 2px solid var(--c-callout);
  border-radius: 3px;
  transform: rotate(-2deg);
}

.docs-callout--warning .docs-callout__label {
  transform: rotate(2deg);
}

/* Not yet held: the front page draws that stamp dashed. */
.docs-callout--danger .docs-callout__label {
  border-style: dashed;
  transform: rotate(-3deg);
}

.docs-callout > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------- 9. toc, pager, colophon */

.docs-toc__title {
  margin: 0 0 .6rem;
  font-family: var(--c-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--c-ochre);
}

.docs-toc__list {
  border-left: 1px solid var(--dk-rule);
}

.docs-toc__item a {
  margin-left: -1px;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--dk-muted);
  border-left: 2px solid transparent;
}

.docs-toc__item a:hover {
  color: var(--dk-accent);
  border-left-color: var(--dk-accent);
}

/* The pager is a line of the contents page: heavy rule over it, serif titles. */
.docs-pager {
  gap: 1.5rem;
  margin-top: 3.5rem;
  padding-top: 0;
  border-top: 2px solid var(--dk-ink);
}

.docs-pager__link {
  box-sizing: border-box;
  flex: 1 1 0;
  max-width: 24rem;
  padding: .85rem .25rem .9rem;
}

.docs-pager__link--next {
  margin-left: auto;
}

.docs-pager__dir {
  font-family: var(--c-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dk-muted);
}

.docs-pager__title {
  display: inline-block;
  margin-top: .2rem;
  font-family: var(--c-serif);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dk-accent);
  text-decoration: none;
}

.docs-pager__link:hover .docs-pager__title {
  text-decoration: underline;
  text-decoration-color: var(--c-gold);
  text-decoration-thickness: 3px;
  text-underline-offset: .2em;
}

/* The colophon: green cloth under a gold rule, full bleed under a centered row. */
/* The cloth and its gold rule are one border image pushed out to both edges:
   an outset paints past the box without widening the page. */
.docs-footer {
  flex-wrap: wrap;
  padding: 2rem var(--dk-gap) 2.25rem;
  font-size: .92rem;
  color: var(--c-colophon-fine);
  background: var(--c-colophon);
  border-top: 0;
  border-image: linear-gradient(var(--c-gold) 0 4px, var(--c-colophon) 4px) fill 0 / 0 / 0 100vmax;
}

.docs-footer a {
  color: #f4f1ea;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.docs-footer a:hover {
  text-decoration-color: var(--c-gold);
  text-decoration-thickness: 2px;
}

.docs-footer :focus-visible {
  outline-color: var(--c-gold);
}

/* ---------------------------------------------------------------- 10. dark */

/* Derived: the book's cover. Green cloth ground, cream text, gold foil where
   the light page uses green. Same values in both blocks. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-paper-hi: #152622;
    --c-slip: #1f2419;
    --c-ochre: #ffcc33;
    --c-title: #ffcc33;
    --c-current: #ffcc33;
    --c-code-tint: rgba(239, 233, 218, .09);
    --c-slab: #0a1512;
    --c-slab-ink: #e9efe9;
    --c-slab-rule: #34463f;
    --c-head-bg: rgba(15, 28, 25, .94);
    --c-colophon: #08352f;
    --c-grain: none;

    --dk-bg: #0f1c19;
    --dk-ink: #efe9da;
    --dk-muted: #b9c4be;
    --dk-rule: #34463f;
    --dk-accent: #ffcc33;
    --dk-on-accent: #1b2420;
    --dk-code-bg: #172925;
    --dk-note: #b9c4be;
    --dk-tip: #a8dccf;
    --dk-warning: #ffcc33;
    --dk-danger: #ff8f84;
    --dk-focus: #ffcc33;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --c-paper-hi: #152622;
  --c-slip: #1f2419;
  --c-ochre: #ffcc33;
  --c-title: #ffcc33;
  --c-current: #ffcc33;
  --c-code-tint: rgba(239, 233, 218, .09);
  --c-slab: #0a1512;
  --c-slab-ink: #e9efe9;
  --c-slab-rule: #34463f;
  --c-head-bg: rgba(15, 28, 25, .94);
  --c-colophon: #08352f;
  --c-grain: none;

  --dk-bg: #0f1c19;
  --dk-ink: #efe9da;
  --dk-muted: #b9c4be;
  --dk-rule: #34463f;
  --dk-accent: #ffcc33;
  --dk-on-accent: #1b2420;
  --dk-code-bg: #172925;
  --dk-note: #b9c4be;
  --dk-tip: #a8dccf;
  --dk-warning: #ffcc33;
  --dk-danger: #ff8f84;
  --dk-focus: #ffcc33;

  color-scheme: dark;
}

/* --------------------------------------------------------- 11. responsive */

@media (min-width: 760px) {
  /* The sidebar rides under the running head while the page scrolls. */
  .docs-nav--sidebar {
    position: sticky;
    top: calc(var(--c-head-h) + 1.25rem);
    max-height: calc(100vh - var(--c-head-h) - 2.5rem);
    overflow-y: auto;
    padding-right: .25rem;
  }
}

@media (min-width: 1200px) {
  .docs-layout--toc .docs-toc {
    top: calc(var(--c-head-h) + 1.25rem);
  }
}

/* The edition line steps aside before the menu runs out of room (the front
   page drops it at 900px; the docs' wider gutters need a little more). */
@media (max-width: 1100px) {
  .runhead__edition {
    display: none;
  }
}

/* Tablet and phone: the running head sets on two lines, name over menu, and
   stops riding along so the page keeps its height. */
@media (max-width: 760px) {
  :root {
    --dk-gap: 1.1rem;
  }

  html {
    scroll-padding-top: 1rem;
  }

  .runhead {
    position: static;
  }

  .runhead__inner {
    flex-wrap: wrap;
    gap: 0 1rem;
    padding-left: calc(var(--dk-gap) + 4px);
  }

  .runhead__brand {
    min-height: 2.75rem;
  }

  .runhead__nav {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 .7rem;
    margin-left: 0;
    padding-bottom: .35rem;
  }

  .docs-layout {
    padding-block-start: 1.25rem;
    padding-left: calc(var(--dk-gap) + 4px);
  }

  .docs-footer {
    padding-left: calc(var(--dk-gap) + 4px);
  }

  .docs-article :is(h1, h2, h3) {
    scroll-margin-top: 1rem;
  }

  .docs-pager {
    flex-direction: column;
    gap: 0;
  }

  .docs-pager__link {
    max-width: none;
    border-bottom: 1px solid var(--dk-rule);
  }
}

/* Phone: the front page's small menu type, and no gutter for the copy tab:
   it takes a band above the code instead. */
@media (max-width: 560px) {
  body::before {
    width: 5px;
  }

  /* The menu sets as a form's two ruled lines of three. As on the front
     page, Errata steps out on a phone; the contents link reaches it. */
  .runhead__nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 0 .7rem;
  }

  .runhead__nav a {
    font-size: .68rem;
    letter-spacing: .04em;
  }

  .runhead__nav a[href$="#errata"] {
    display: none;
  }

  .docs-article::before {
    content: "CREED documentation";
    content: "CREED documentation" / "";
  }

  .docs-article pre {
    padding-inline: .85rem;
  }

  .docs-copy > pre {
    margin-right: 0;
    padding-top: 2.9rem;
    border-radius: 3px;
  }
}

/* --------------------------------------------- 12. motion (no-preference) */

/* Only people who are happy with motion get the foil and the tilt. Everyone
   else gets the page already printed (the kit also stops all motion under
   reduce). */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* The double rule under the title is struck in once, like the cover foil. */
  .docs-article h1::after {
    animation: creed-foil-strike .6s .15s var(--c-ease-out) both;
  }

  .runhead__brand img {
    transition: transform .3s var(--c-ease-press);
  }

  .runhead__brand:hover img {
    transform: rotate(-6deg) scale(1.08);
  }

  .runhead__nav a {
    transition: border-color .2s;
  }

  .docs-nav a,
  .docs-toc__item a,
  .docs-copy__button {
    transition: background-color .15s, border-color .15s, color .15s;
  }

  .docs-pager__link {
    transition: transform .25s var(--c-ease-out);
  }

  .docs-pager__link:hover {
    transform: translateX(6px);
  }

  .docs-pager__link:not(.docs-pager__link--next):hover {
    transform: translateX(-6px);
  }
}

@keyframes creed-foil-strike {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* -------------------------------------------------------------- 13. print */

@media print {
  body {
    background: #ffffff;
  }

  body::before {
    display: none;
  }

  .runhead {
    position: static;
    backdrop-filter: none;
  }

  .runhead__nav,
  .runhead__edition {
    display: none;
  }

  .docs-article pre,
  .docs-copy {
    color: #1b2420;
    background: #ffffff;
    border-color: #c8c0ae;
  }

  .docs-copy > pre {
    margin-right: 0;
    white-space: pre-wrap;
  }

  .docs-copy__button {
    display: none;
  }

  .docs-footer {
    color: #1b2420;
    background: #ffffff;
    border-image: none;
  }

  .docs-footer a {
    color: #0c5449;
  }
}