.brand-mark {
  width: 78px;
  padding-right: 6px;
  font-size: 16px;
  letter-spacing: .035em;
}

.search-button .search-icon {
  display: inline-block;
  font-size: 23px;
  line-height: 1;
  transform: translateY(-2px);
}

.handbook-page > header {
  border-bottom: 0;
  padding-bottom: 0;
}

.library-home {
  display: grid;
  grid-template-columns: minmax(390px, 1fr) minmax(340px, .9fr);
  min-height: calc(100vh - 74px);
}

.home-sections {
  padding: 72px clamp(36px, 6vw, 90px);
}

.home-sections h1 {
  margin: 0 0 35px;
  color: var(--ink);
  font: 600 clamp(38px, 4vw, 56px)/1.05 var(--serif);
  letter-spacing: -.025em;
}

.home-list { border-top: 1px solid var(--line); }
.home-list a {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 18px 4px 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.home-list a > span { color: var(--orange); font: 700 11px var(--sans); }
.home-list a > strong { font: 600 18px var(--serif); }
.home-list a > small { grid-column: 2; color: var(--muted); font: 10px var(--sans); }
.home-list a > i { grid-column: 3; grid-row: 1 / 3; font-size: 21px; font-style: normal; }
.home-list a:hover strong,
.home-list a:hover i { color: var(--orange); }

.home-cover {
  display: grid;
  place-items: center;
  min-height: 620px;
  padding: 70px 45px 100px;
  overflow: hidden;
  background: var(--green);
}
.cover-crop {
  width: min(540px, 40vw);
  aspect-ratio: 1020 / 855;
  overflow: hidden;
  background: white;
  box-shadow: 14px 18px 30px #0e281ebd;
  transform: rotate(1deg);
}
.cover-crop img { display: block; width: 100%; height: auto; }
.home-notice { margin-top: 60px; }

.home-cover-only {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 74px);
  padding: 45px 28px;
  overflow: hidden;
  background: #1c4132;
}
.home-cover-only .cover-crop {
  width: min(720px, calc(100% - 20px));
  aspect-ratio: 1;
  transform: none;
  background: transparent;
  box-shadow: none;
}
.home-cover-only .cover-crop img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.original-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: -20px 22px 18px 0;
  color: var(--muted);
  font: 600 10px var(--sans);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.original-toolbar[hidden] { display: none; }
.original-toolbar button {
  border: 0;
  background: transparent;
  color: var(--orange);
  padding: 8px 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.original-toolbar button:first-child { text-align: left; }
.original-toolbar button:last-child { text-align: right; }
.original-toolbar button:disabled { color: var(--muted); opacity: .35; cursor: default; }
.original-toolbar:not([hidden]) + #dialog-image { max-height: calc(94vh - 125px); }

.source-boundary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 3.5rem 0 2.5rem;
  color: var(--muted);
  font: 600 10px var(--sans);
  text-transform: uppercase;
  letter-spacing: .11em;
}
.source-boundary::before,
.source-boundary::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.source-boundary button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--orange);
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.prose h2[id],
.prose h3[id],
.prose h4[id],
.prose h5[id] { position: relative; scroll-margin-top: 96px; }
.heading-link {
  position: absolute;
  right: 100%;
  width: 1em;
  margin-right: .28em;
  text-align: right;
  color: var(--orange);
  text-decoration: none;
  font: 600 .82em var(--sans);
  opacity: 0;
  transition: opacity .15s ease;
}
.prose h2:hover .heading-link,
.prose h3:hover .heading-link,
.prose h4:hover .heading-link,
.prose h5:hover .heading-link,
.heading-link:focus { opacity: 1; }

.topic-group {
  display: block;
  margin: 14px 8px 5px;
  color: var(--orange);
  font: 700 9px var(--sans);
  text-transform: uppercase;
  letter-spacing: .11em;
}

.frontmatter-links {
  display: block;
  padding-top: 0;
  padding-left: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d5d1c5;
}
.sidebar-heading { justify-content: flex-end; margin: 0; }
@media (min-width: 851px) { .sidebar-heading { display: none; } }

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 2em 0;
  border-top: 2px solid var(--green);
  box-shadow: 0 1px 0 var(--line);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  background: #faf8f2;
  font: 15px/1.45 var(--sans);
}

.prose th,
.prose td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.prose th {
  background: #e5e5dc;
  color: var(--green-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.prose tbody tr:nth-child(even) { background: #f0eee6; }
.prose td:first-child { color: #283a31; font-weight: 600; }

.toc-page .prose > ul {
  margin: 1.35em 0 0;
  padding: 0;
  list-style: none;
}
.toc-page .prose > ul > li {
  margin: 0;
  padding: 0;
}
.toc-page .prose li > a {
  display: block;
  padding: .32em .45em;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease, padding-left .15s ease;
}
.toc-page .prose li > a:visited { color: var(--ink); }
.toc-page .prose li > a:hover {
  padding-left: .7em;
  background: var(--cream);
  color: var(--green);
}
.toc-page .prose li > a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}
.toc-page .prose ul ul {
  margin: 0 0 .25em 1.15em;
  padding: 0 0 0 .8em;
  border-left: 2px solid var(--line);
  list-style: none;
  font-size: .88em;
}
.toc-page .prose ul ul li { margin: 0; padding: 0; }
.toc-page .prose ul ul li > a { padding-top: .22em; padding-bottom: .22em; color: var(--ink); }
.toc-page .prose ul ul li > a:visited { color: var(--ink); }
.toc-page .prose ul ul li > a:hover { color: var(--green); }

@media (max-width: 520px) {
  .brand-mark { width: 68px; font-size: 14px; }
  .prose th, .prose td { padding: 9px 10px; }
}

@media (max-width: 850px) {
  .library-home { grid-template-columns: 1fr; }
  .home-sections { padding: 55px 28px 65px; }
  .home-cover { min-height: 500px; padding: 65px 30px 90px; }
  .cover-crop { width: min(560px, 82vw); }
  .home-notice { margin-top: 45px; }
}