/* CREED handbook pages: the book itself, chapter by chapter.

   Sits on creed.css (paper, ink, stamps, the binding, the running head), so
   a chapter page is the same book as the front page, opened further in. What
   is new here: the chapter tabs down the left (every chapter, the open one in
   gold), the clause list (each provision lettered (a), (b), (c) the way a
   building code letters them), the RFC 2119 key words set in small capitals,
   the "On this page" rail, the pager at the foot of each chapter, the search
   in the running head, and a print stylesheet, because a code book that will
   not print is just a website with ambitions.

   The pages are generated from handbook/*.md by bin/build-handbook-site.php.
   This file and assets/handbook.js are hand-set; the HTML never is. */

/* ------------------------------------------------------------ the frame */
.hb-page { --hb-head: 3.3rem; }
html:has(.hb-page) { scroll-padding-top: 5rem; }

.hb-layout {
  display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start; padding-block: 1.5rem 4rem;
}
.hb-main { min-width: 0; }
.hb-main:focus { outline: none; }

/* --------------------------------------------------------- running head */
.hb-runhead .runhead__inner { gap: 1rem; }
.hb-runhead__book { color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.hb-runhead__book:hover { color: var(--green); }
.hb-runhead__nav { margin-left: 0; }
.hb-runhead__nav a[aria-current="page"] { border-bottom-color: var(--green); }

.hb-menu {
  display: none; align-items: center; gap: .45rem; margin-left: auto;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--paper-hi); border: 1.5px solid var(--ink); border-radius: 3px;
  min-height: 2.5rem; padding: .3rem .75rem; cursor: pointer;
}
.hb-menu::before {
  content: ""; width: .9rem; height: .65rem; flex: none;
  background: linear-gradient(var(--ink) 0 0) top / 100% 2px no-repeat, linear-gradient(var(--ink) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--ink) 0 0) bottom / 100% 2px no-repeat;
}
.hb-menu[aria-expanded="true"] { background: var(--ink); color: var(--paper-hi); }
.hb-menu[aria-expanded="true"]::before { background: linear-gradient(var(--gold) 0 0) top / 100% 2px no-repeat, linear-gradient(var(--gold) 0 0) center / 100% 2px no-repeat, linear-gradient(var(--gold) 0 0) bottom / 100% 2px no-repeat; }

/* ------------------------------------------------------------- search */
.hb-search { position: relative; flex: 1 1 16rem; max-width: 30rem; margin-left: auto; }
.hb-search[hidden] { display: none; }
.hb-search input {
  width: 100%; min-height: 2.5rem; padding: .4rem 2.4rem .4rem .75rem;
  font-family: var(--mono); font-size: .9rem; color: var(--ink);
  background: var(--paper-hi); border: 1px solid var(--rule); border-bottom: 2px solid var(--ink); border-radius: 2px;
  transition: border-color .2s, box-shadow .2s;
}
.hb-search input::placeholder { color: var(--ink-2); opacity: 1; }
.hb-search input:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.hb-search input:focus { box-shadow: 4px 4px 0 var(--gold); }
.hb-search__key {
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: .72rem; line-height: 1; color: var(--ink-2);
  border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 3px; padding: .2rem .4rem; background: var(--paper);
  pointer-events: none;
}
.hb-search input:focus ~ .hb-search__key, .hb-search input:not(:placeholder-shown) ~ .hb-search__key { opacity: 0; }

.hb-results {
  position: absolute; left: 0; right: 0; top: calc(100% + .5rem); z-index: 25;
  width: max(100%, min(34rem, calc(100vw - 2rem)));
  max-height: min(70vh, 34rem); overflow: auto;
  background: var(--paper-hi) var(--grain); border: 1px solid var(--ink); box-shadow: 6px 6px 0 var(--rule), 0 18px 30px -18px rgba(27, 36, 32, .5);
  padding: .4rem 0 .5rem;
}
.hb-results[hidden] { display: none; }
.motion .hb-results:not([hidden]) { animation: hb-drop .22s var(--ease-out) both; }
@keyframes hb-drop { from { opacity: 0; transform: translateY(-6px); } }
.hb-results__status { margin: 0; padding: .45rem 1rem .5rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.hb-results__list { list-style: none; margin: 0; padding: 0; }
.hb-results__list a {
  display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: .1rem .75rem;
  padding: .65rem 1rem; color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--rule);
}
.hb-results__list li:last-child a { border-bottom: 0; }
.hb-results__list a:hover, .hb-results__list a:focus-visible { background: rgba(255, 204, 51, .2); }
.hb-results__list a:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.hb-result__no { grid-row: span 3; font-family: var(--mono); font-weight: 600; font-size: .82rem; color: var(--green); padding-top: .15rem; }
.hb-result__title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.hb-result__chapter { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ochre); }
.hb-result__snippet { font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.hb-results mark { background: linear-gradient(transparent 55%, rgba(255, 204, 51, .8) 55%); color: inherit; padding: 0 .05em; }

/* ------------------------------------------------------ chapter tabs */
/* Every chapter down the left, like the printed tabs on the book's
   fore-edge. The open chapter is the gold tab and shows its sections. */
.hb-nav {
  position: sticky; top: calc(var(--hb-head) + 1rem);
  max-height: calc(100vh - var(--hb-head) - 2rem); overflow: auto; overscroll-behavior: contain;
  padding: .25rem .25rem 1rem 0;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.hb-nav__title { margin: 0 0 .6rem; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.hb-nav__title a { display: inline-block; padding-block: .3rem; color: var(--ochre); text-decoration: none; }
.hb-nav__title a:hover { text-decoration: underline; }
.hb-nav__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.hb-nav__list > li { border-bottom: 1px solid var(--rule); }
.hb-nav__list > li > a {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  padding: .35rem .25rem .35rem 0; color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: 1rem; line-height: 1.25;
  transition: transform .2s var(--ease-out);
}
.hb-nav__list > li > a:hover { transform: translateX(3px); }
.hb-nav__list > li > a:hover .hb-nav__name { color: var(--green); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.hb-nav__no {
  display: grid; place-items: center; height: 1.75rem; border-radius: 0 6px 6px 0;
  font-family: var(--mono); font-weight: 600; font-size: .78rem; color: var(--paper-hi); background: var(--green);
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, .12);
}
.hb-nav__list > li:nth-child(3n+2) .hb-nav__no { background: #2b6a60; }
.hb-nav__list > li:nth-child(3n) .hb-nav__no { background: var(--ochre); }
.hb-nav__list > li.is-here .hb-nav__no { background: var(--gold); color: var(--ink); }
.hb-nav__list > li.is-here > a { font-weight: 700; }
.motion .hb-nav__list > li.is-here .hb-nav__no { animation: tab-out .45s .1s var(--ease-out) both; }
.hb-nav__tbd { width: .6rem; height: .6rem; border: 1.5px dashed var(--red); border-radius: 1px; }
.hb-nav__sub { list-style: none; margin: 0 0 .5rem 2.6rem; padding: 0; border-left: 1px solid var(--rule); }
.hb-nav__sub a { display: block; padding: .2rem 0 .2rem .7rem; margin-left: -1px; border-left: 2px solid transparent; font-size: .9rem; line-height: 1.3; color: var(--ink-2); text-decoration: none; }
.hb-nav__sub a:hover { color: var(--green); text-decoration: underline; }
.hb-nav__sub a.is-here { color: var(--ink); border-left-color: var(--gold); font-weight: 700; }
.hb-nav__more { margin: .9rem 0 0; font-size: .88rem; }
.hb-nav__more a { display: inline-block; padding-block: .25rem; }

/* ------------------------------------------------------- breadcrumbs */
.hb-crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.hb-crumbs li + li::before { content: "/" / ""; margin-right: .3rem; color: var(--rule); color: #8f8672; }
.hb-crumbs a { display: inline-block; padding-block: .25rem; color: var(--green); }
.hb-crumbs [aria-current] { color: var(--ink); }

/* ------------------------------------------------------- chapter head */
.hb-chapter__head { grid-template-columns: auto minmax(0, 1fr) auto; margin-bottom: 1.75rem; }
.hb-chapter__head h1, .hb-book__title, .hb-door__head h1 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.06; letter-spacing: -.01em;
  margin: .2rem 0 .55rem; color: var(--ink); text-wrap: balance;
}
.hb-chapter__head .hb-status { align-self: center; justify-self: end; margin-right: .5rem; }
.motion .hb-chapter__head .hb-status { animation: hb-thunk .5s .25s var(--ease-press) both; }
@keyframes hb-thunk { from { opacity: 0; transform: rotate(-14deg) scale(1.7); } }
.hb-register { margin: 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.hb-register .kw { font-size: 1em; }
@media (max-width: 640px) {
  .hb-chapter__head { grid-template-columns: auto minmax(0, 1fr); }
  .hb-chapter__head .hb-status { grid-column: 2; justify-self: start; margin: .25rem 0 0; }
}

/* ------------------------------------------- the body and the TOC rail */
.hb-body { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; grid-template-areas: "prose toc"; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.hb-prose { grid-area: prose; min-width: 0; max-width: 46rem; }
.hb-toc { grid-area: toc; position: sticky; top: calc(var(--hb-head) + 1.25rem); max-height: calc(100vh - var(--hb-head) - 2.5rem); overflow: auto; border-left: 1px solid var(--rule); padding-left: 1rem; }
.hb-toc__title { margin: 0 0 .5rem; font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hb-toc ol { list-style: none; margin: 0; padding: 0; }
.hb-toc a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .25rem; padding: .25rem 0 .25rem .5rem; margin-left: calc(-1rem - 1px); padding-left: calc(1rem - 2px); border-left: 3px solid transparent; font-size: .9rem; line-height: 1.3; color: var(--ink-2); text-decoration: none; transition: border-color .2s, color .2s; }
.hb-toc .hb-toc__l3 a { grid-template-columns: 2.6rem minmax(0, 1fr); padding-left: calc(1.75rem - 2px); font-size: .85rem; }
.hb-toc a:hover { color: var(--green); text-decoration: underline; }
.hb-toc a.is-here { color: var(--ink); border-left-color: var(--gold); font-weight: 700; }
.hb-toc__no { font-family: var(--mono); font-size: .76rem; color: var(--green); padding-top: .1rem; }

@media (max-width: 1180px) {
  .hb-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "prose"; }
  .hb-toc { position: static; max-height: none; border: 1px solid var(--rule); background: var(--paper-hi); padding: .9rem 1.1rem; }
  .hb-toc ol { columns: 2 14rem; column-gap: 1.5rem; }
  .hb-toc li { break-inside: avoid; }
  .hb-toc a, .hb-toc .hb-toc__l3 a { margin-left: 0; padding-left: .6rem; border-left-width: 2px; }
}

/* ------------------------------------------------------------- prose */
.hb-prose > * { margin-block: 0; }
.hb-prose > * + * { margin-top: 1rem; }
.hb-prose p { max-width: 44rem; }
.hb-prose li p { margin: 0; }
.hb-prose h2 {
  font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 1.95rem); line-height: 1.15;
  margin: 2.75rem 0 1rem; padding-top: .9rem; border-top: 2px solid var(--ink); text-wrap: balance;
}
.hb-prose h3 { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; line-height: 1.25; margin: 2rem 0 .6rem; }
.hb-prose h4 { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 1.5rem 0 .5rem; }
.hb-prose .hb-h-tbd { border-top-style: dashed; border-top-color: var(--red); }
.hb-prose :is(h2, h3):target { background: linear-gradient(transparent 60%, rgba(255, 204, 51, .55) 60%) no-repeat 0 0 / 100% 100%; }
.motion .hb-prose :is(h2, h3):target { animation: highlight .7s var(--ease-out) both; }

/* The section number is the heading's own link; the pilcrow shows it. */
.hb-sec { font-family: var(--mono); font-weight: 600; font-size: .78em; color: var(--green); text-decoration: none; margin-right: .3rem; white-space: nowrap; border-radius: 2px; }
.hb-sec::after { content: "¶" / ""; display: inline-block; width: 0; overflow: hidden; opacity: 0; color: var(--ochre); transition: opacity .15s, width .15s; vertical-align: top; }
:is(h2, h3):hover .hb-sec::after, .hb-sec:focus-visible::after { width: 1ch; margin-left: .2rem; opacity: 1; }
.hb-sec:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }

/* The clause list: each provision lettered (a), (b), (c), with a rule
   between them and a margin bar that lights on hover, as on the front page. */
.hb-prose > ul, .hb-prose > ol { list-style: none; margin-left: 0; padding: 0; counter-reset: provision; border-top: 1px solid var(--rule); }
.hb-prose > ul > li, .hb-prose > ol > li {
  counter-increment: provision; position: relative;
  padding: .7rem 0 .7rem 3rem; border-bottom: 1px solid var(--rule); max-width: 46rem;
}
.hb-prose > ul > li::before, .hb-prose > ol > li::before {
  content: "(" counter(provision, lower-alpha) ")"; position: absolute; left: .7rem; top: .78rem;
  font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ochre);
}
.hb-prose > ol > li::before { content: counter(provision) "."; }
.hb-prose > ul > li::after, .hb-prose > ol > li::after { content: ""; position: absolute; left: 0; top: .8rem; bottom: .8rem; width: 3px; background: transparent; transition: background .25s; }
.hb-prose > ul > li:hover::after, .hb-prose > ol > li:hover::after { background: var(--green); }
.hb-prose li ul, .hb-prose li ol { margin: .4rem 0 0; padding-left: 1.25rem; }
.hb-prose li li { margin: .25rem 0; }
.hb-prose li li::marker { color: var(--ochre); }

/* A gap: printed, dashed, and on the errata slip's stock. */
.hb-prose > ul > li.hb-tbd { background: linear-gradient(90deg, rgba(251, 245, 223, .95), rgba(251, 245, 223, 0)); }
.hb-prose > ul > li.hb-tbd::after { background: repeating-linear-gradient(var(--red) 0 6px, transparent 6px 10px); }
.hb-prose p.hb-tbd {
  background: var(--slip) var(--grain); border: 1px dashed var(--red); padding: 1rem 1.1rem; max-width: 44rem;
  display: flow-root;
}
.hb-prose p.hb-tbd .stamp { float: right; margin: 0 0 .5rem 1rem; }

/* Sources: a bibliography, small and numbered, links allowed to wrap. */
.hb-prose > ul.hb-sources { counter-reset: source; border-top: 0; }
.hb-prose > ul.hb-sources > li { counter-increment: source; padding: .3rem 0 .3rem 2.4rem; border-bottom: 1px dotted var(--rule); font-size: .92rem; color: var(--ink-2); }
.hb-prose > ul.hb-sources > li::before { content: "[" counter(source) "]"; left: 0; top: .38rem; font-size: .72rem; color: var(--ink-2); }
.hb-prose > ul.hb-sources > li::after { display: none; }
.hb-sources a { overflow-wrap: anywhere; }

/* RFC 2119 key words, in small capitals. MUST is held hardest. */
.kw { font-family: var(--mono); font-weight: 600; font-size: .8em; letter-spacing: .07em; padding: .02em .28em; border-radius: 2px; white-space: nowrap; }
.kw--must, .kw--must-not { color: var(--green-deep); background: rgba(12, 84, 73, .1); box-shadow: inset 0 -2px 0 var(--green); }
.kw--should, .kw--should-not { color: var(--ochre); background: rgba(255, 204, 51, .2); }
.kw--may { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }

/* The decision a rule cites. */
.hb-cite { font-family: var(--mono); font-size: .78em; color: var(--ink-2); letter-spacing: .01em; }

.hb-policy-key { text-decoration-color: rgba(12, 84, 73, .4); }
.hb-policy-key code { color: var(--green-deep); }

/* The key-words note at the head of a chapter. */
.hb-rfc { border: 1px solid var(--ink); border-left: 6px solid var(--gold); background: var(--paper-hi); padding: .8rem 1.1rem; font-size: .95rem; max-width: 46rem; }
.hb-rfc p { margin: 0; }
.hb-rfc__label { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-hi); background: var(--ink); padding: .1rem .4rem; border-radius: 2px; margin-right: .4rem; }

/* Tables: the front page's Table 2-1, ruled heavy top and bottom. */
.hb-table { margin: 1.5rem 0; }
.hb-table figcaption { margin-bottom: .45rem; }
.hb-table__scroll { overflow-x: auto; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.hb-table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .92rem; }
.hb-table th, .hb-table td { text-align: left; vertical-align: top; padding: .5rem .7rem; border-bottom: 1px solid var(--rule); }
.hb-table thead th { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; border-bottom: 1px solid var(--ink); }
.hb-table tbody tr:hover { background: rgba(255, 204, 51, .14); }
.hb-table tbody td:first-child { font-weight: 700; }
.st--planned { color: var(--ochre); border-style: dashed; }

/* Policy keys named in the chapter, on a slip at its foot. */
.hb-policy { margin-top: 2.5rem !important; background: var(--slip) var(--grain); border: 1px solid var(--rule); outline: 3px double var(--ink); outline-offset: -9px; padding: 1.25rem 1.4rem; max-width: 46rem; }
.hb-policy__title { margin: 0 0 .6rem !important; font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.hb-policy dl { margin: 0; display: grid; gap: 0; }
.hb-policy dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .4rem 0; border-bottom: 1px dotted var(--rule); }
.hb-policy dt code { background: none; padding: 0; font-weight: 600; }
.hb-policy dd { margin: 0; font-size: .9rem; color: var(--ink-2); text-align: right; }
@media (max-width: 520px) { .hb-policy dl div { grid-template-columns: minmax(0, 1fr); } .hb-policy dd { text-align: left; } }

/* The source line under every page. */
.hb-source { margin: 3rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--ink-2); max-width: 46rem; }

/* ------------------------------------------------------------ pager */
.hb-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.hb-pager__link {
  display: grid; gap: .2rem; padding: 1rem 1.2rem; min-height: 4.5rem;
  border: 1.5px solid var(--ink); background: var(--paper-hi); color: var(--ink); text-decoration: none;
  transition: transform .15s var(--ease-out), box-shadow .15s;
}
.hb-pager__link:hover { box-shadow: 4px 4px 0 var(--gold); transform: translate(-2px, -2px); }
.hb-pager__link--next { text-align: right; }
.hb-pager__dir { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre); }
.hb-pager__name { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.hb-pager__link--prev .hb-pager__dir::before { content: "← " / ""; }
.hb-pager__link--next .hb-pager__dir::after { content: " →" / ""; }
@media (max-width: 560px) { .hb-pager { grid-template-columns: minmax(0, 1fr); } .hb-pager__link--next { text-align: left; } }

/* ------------------------------------------------------- the front door */
.hb-door__head { max-width: 48rem; }
.hb-door__head .chap-head__lede { margin-bottom: .9rem; }
.hb-door__title { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); margin: 0 0 .6rem; }
.hb-door { list-style: none; margin: 0 0 2.5rem; padding: 0; border-top: 2px solid var(--ink); }
.hb-door__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 8.5rem; align-items: center; gap: 1rem; border-bottom: 1px solid var(--rule); position: relative; }
.hb-door__link { display: flex; align-items: baseline; gap: .9rem; padding: .85rem .25rem; color: var(--ink); text-decoration: none; min-width: 0; transition: transform .25s var(--ease-out); }
.hb-door__link::after { content: ""; position: absolute; inset: 0; }
.hb-door__link:focus-visible { outline: none; }
.hb-door__row:has(.hb-door__link:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
.hb-door__row:hover .hb-door__link { transform: translateX(6px); }
.hb-door__row:hover .toc__name { color: var(--green); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
.hb-door__row:hover { background: var(--paper-hi); }
.hb-door__text { display: grid; gap: .15rem; min-width: 0; }
.hb-door__sections { font-size: .88rem; color: var(--ink-2); }
.hb-door__meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.hb-door__meta .kw { font-size: 1em; }
.hb-door__row .stamp { justify-self: end; align-self: center; margin-right: .5rem; }
@media (max-width: 860px) {
  .hb-door__row { grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding-bottom: .75rem; }
  .hb-door__meta { grid-column: 1; padding-left: calc(2ch + 1.15rem); }
  .hb-door__row .stamp { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 480px) {
  .hb-door__row { grid-template-columns: minmax(0, 1fr); }
  .hb-door__row .stamp { grid-column: 1; grid-row: auto; justify-self: start; margin-left: calc(2ch + 1.15rem); }
}
.hb-key { margin-top: 0; }
.hb-key dt { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.hb-door__more { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.hb-door__more p { margin: 0; color: var(--ink-2); }

/* The print edition's contents. */
.hb-book__contents ol { list-style: none; margin: 0 0 3rem; padding: 0; columns: 2 16rem; column-gap: 2rem; border-top: 2px solid var(--ink); }
.hb-book__contents li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.hb-book__contents a { display: flex; gap: .7rem; align-items: baseline; padding: .45rem 0; color: var(--ink); text-decoration: none; font-family: var(--serif); font-weight: 600; }
.hb-book__contents a:hover { color: var(--green); text-decoration: underline; }
.hb-book__contents .toc__no { font-size: 1.1rem; }
.hb-chapter--book { margin-top: 3.5rem; }
.hb-page--book .hb-layout, .hb-page--door .hb-layout { grid-template-columns: 15rem minmax(0, 1fr); }

/* ------------------------------------------------------ back to top */
.hb-top {
  display: inline-block; margin: 0 0 2rem 1rem;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); padding: .6rem .85rem; border-radius: 3px; text-decoration: none;
  box-shadow: 0 3px 0 var(--ochre);
}
.js .hb-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 18; margin: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s var(--ease-out); }
.js .hb-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.js .hb-top:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.hb-top::before { content: "↑ " / ""; }
.hb-colophon__link { color: var(--paper-hi); }
.colophon code { background: rgba(255, 255, 255, .1); color: inherit; }

/* toast (the § copy confirmation) reuses creed.css's .toast */

/* ------------------------------------------------- narrow: the drawer */
@media (max-width: 999px) {
  .hb-layout { grid-template-columns: minmax(0, 1fr); padding-top: 1rem; }
  .hb-page--book .hb-layout, .hb-page--door .hb-layout { grid-template-columns: minmax(0, 1fr); }
  .hb-runhead__nav { display: none; }
  .hb-runhead .runhead__inner { flex-wrap: wrap; row-gap: .5rem; padding-block: .45rem; }
  .hb-search { order: 10; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .hb-results { width: 100%; }
  .js .hb-menu:not([hidden]) { display: inline-flex; }

  /* No script: the chapter list sits above the page, plainly. */
  .hb-nav { position: static; max-height: none; overflow: visible; padding: 0; }
  .hb-nav__sub { display: none; }

  /* With script: a sheet under the running head, opened by Chapters. */
  .js .hb-nav {
    position: fixed; z-index: 19; left: 0; right: 0; top: var(--hb-head-live, 6.5rem);
    max-height: calc(100vh - var(--hb-head-live, 6.5rem)); overflow: auto;
    background: var(--paper) var(--grain); border-bottom: 3px solid var(--ink);
    box-shadow: 0 24px 40px -20px rgba(27, 36, 32, .55);
    padding: 1rem max(1rem, calc((100vw - 46rem) / 2)) 1.25rem;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s, transform .2s var(--ease-out), visibility 0s .2s;
  }
  .js .hb-nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s var(--ease-out); }
  .js .hb-nav .hb-nav__sub { display: block; }
  .hb-nav__list > li > a { min-height: 2.75rem; }
}
@media (max-width: 999px) { html:has(.hb-page) { scroll-padding-top: 7.25rem; } }

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hb-pager__link:hover, .hb-door__row:hover .hb-door__link, .hb-nav__list > li > a:hover { transform: none; }
}

/* ------------------------------------------------------------ print */
/* A code book prints. Ink on white, no chrome, chapter breaks, folios. */
@media print {
  @page { margin: 18mm 16mm 20mm; @bottom-center { content: "CREED Handbook · " counter(page); font-family: "IBM Plex Mono", monospace; font-size: 8pt; color: #47524d; } }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; line-height: 1.45; color: #000; }
  .runhead, .binding, .hb-nav, .hb-toc, .hb-crumbs, .hb-pager, .hb-top, .hb-search, .toast, .hb-door__more, .colophon__mark { display: none !important; }
  .hb-layout, .hb-page--book .hb-layout, .hb-page--door .hb-layout { display: block; padding: 0; max-width: none; }
  .wsu-container { max-width: none; padding: 0; }
  .hb-body { display: block; }
  .hb-prose { max-width: none; }
  .hb-chapter--book { break-before: page; margin-top: 0; }
  .hb-prose h2, .hb-prose h3, .hb-prose h4 { break-after: avoid; }
  .hb-prose li, .hb-table, .hb-rfc, .hb-policy, .hb-tbd { break-inside: avoid; }
  .chap-head__no { font-size: 48pt; }
  .stamp { -webkit-mask-image: none; mask-image: none; }
  a { color: inherit; }
  .hb-prose p a[href^="http"]:not(.tool):not(.hb-policy-key)::after { content: " <" attr(href) ">"; font-size: .8em; color: #47524d; overflow-wrap: anywhere; }
  .tool img { display: none; }
  .colophon { background: none; color: #000; border-top: 1px solid #000; padding: 1rem 0 0; }
  .colophon__fine, .colophon a { color: #000; }
  .hb-table__scroll { overflow: visible; }
  .hb-table table { min-width: 0; }
  .kw { background: none !important; box-shadow: none !important; padding: 0; }
}