:root {
  color-scheme: light;
  --nb-ground: #dcd9cf;
  --nb-paper: #eae7df;
  --nb-ink: #24231e;
  --nb-muted: #504d44;
  --nb-ochre: #bd982b;
  --nb-link: #66500e;
  --nb-rule: #9c988b;
  --nb-font-copy: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --nb-font-heading: 'Avenir Next Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --nb-body-size: 1.1875rem;
  --nb-small-size: 1.0625rem;
  --nb-line-height: 1.65;
  --nb-reading-width: 64ch;
  --nb-page-width: 74rem;
  --nb-gutter: clamp(1.25rem, 4.8vw, 4.5rem);
  --nb-target: 2.75rem;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--nb-ground);
  color: var(--nb-ink);
  font-family: var(--nb-font-copy);
  font-size: var(--nb-body-size);
  line-height: var(--nb-line-height);
  -webkit-font-smoothing: antialiased;
}
body, p, li, a, h1, h2, h3 { overflow-wrap: break-word; }
::selection { background: var(--nb-ochre); color: var(--nb-ink); }
a {
  color: var(--nb-link);
  text-decoration-line: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
}
a:hover { color: var(--nb-ink); text-decoration-thickness: .14em; }
a:focus-visible {
  outline: 3px solid var(--nb-ink);
  outline-offset: 4px;
  background: var(--nb-ochre);
  color: var(--nb-ink);
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--nb-font-heading);
  font-weight: 700;
  font-stretch: condensed;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(3.25rem, 6.8vw, 6.5rem); line-height: 1.02; max-width: 19ch; }
h2 { font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.12; }
h3 { font-size: 1.75rem; line-height: 1.2; margin-bottom: .85rem; }
ul { padding: 0; margin: 0; list-style: none; }
[hidden] { display: none !important; }

.nb-skip {
  position: fixed;
  left: var(--nb-gutter);
  top: 1rem;
  padding: .65rem 1rem;
  min-height: var(--nb-target);
  background: var(--nb-ochre);
  color: var(--nb-ink);
  z-index: 5;
  transform: translateY(-180%);
  border: 2px solid var(--nb-ink);
}
.nb-skip:focus { transform: translateY(0); }
.nb-progress {
  position: fixed;
  top: 0;
  left: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  height: .3rem;
  width: 100%;
  background: transparent;
  color: var(--nb-ochre);
  z-index: 4;
  pointer-events: none;
}
.nb-progress::-webkit-progress-bar { background: transparent; }
.nb-progress::-webkit-progress-value { background: var(--nb-ochre); }
.nb-progress::-moz-progress-bar { background: var(--nb-ochre); }
.nb-masthead, .nb-main, .nb-footer {
  width: min(100%, calc(var(--nb-page-width) + var(--nb-gutter) * 2));
  padding-inline: var(--nb-gutter);
  margin-inline: auto;
}
.nb-masthead {
  padding-top: 2rem;
  padding-bottom: 1.4rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.nb-name { font-family: var(--nb-font-heading); font-weight: 700; font-size: 2rem; line-height: 1.2; }
.nb-guide-label { color: var(--nb-muted); font-size: var(--nb-small-size); margin: 0; font-style: italic; }
.nb-main:focus { outline: none; }
.nb-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 24%);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: 3rem 3.5rem;
  border-top: 4px solid var(--nb-ink);
  border-bottom: 2px solid var(--nb-ink);
}
.nb-topic {
  display: inline-block;
  color: var(--nb-ink);
  background: var(--nb-ochre);
  padding: .3rem .75rem;
  font-size: var(--nb-small-size);
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.nb-intro { max-width: 52ch; margin-top: 1.75rem; font-size: 1.375rem; line-height: 1.55; }
.nb-page--home h1 { max-width: 16ch; font-size: clamp(3.5rem, 7.8vw, 7.25rem); }

/* A two-ink notebook print, contained in a doorway-shaped frame. */
.nb-geometry {
  position: relative;
  height: 22rem;
  width: 100%;
  border: 2px solid var(--nb-ink);
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
  overflow: hidden;
  background: var(--nb-ochre);
}
.nb-geometry-grid {
  position: absolute;
  inset: 5rem 2.25rem 2rem;
  border: 2px solid var(--nb-ink);
  background: var(--nb-paper);
  transform: rotate(-8deg);
  box-shadow: .45rem .45rem 0 var(--nb-ink);
}
.nb-orbit {
  position: absolute;
  width: 4.5rem;
  height: 2.25rem;
  top: 8rem;
  left: 3.75rem;
  border-left: 5px solid var(--nb-ink);
  border-bottom: 5px solid var(--nb-ink);
  transform: rotate(-48deg);
}
.nb-orbit--small {
  width: 1.4rem;
  height: 1.4rem;
  top: 4rem;
  left: auto;
  right: 2.5rem;
  border: 0;
  background: var(--nb-ink);
  transform: rotate(-8deg);
}
.nb-sample {
  position: absolute;
  width: 48%;
  height: 3rem;
  bottom: 5rem;
  left: 3.5rem;
  border-block: 3px solid var(--nb-ink);
  transform: rotate(-8deg);
}
.nb-sample--small { bottom: 3.75rem; height: 0; width: 32%; border-bottom: 0; }
.nb-scale { position: absolute; inset: auto 0 0; height: .65rem; background: var(--nb-ink); }

.nb-notes { margin-top: 3.75rem; max-width: var(--nb-reading-width); }
.nb-section { margin-bottom: 3.5rem; min-width: 0; }
.nb-section > h2 { margin-bottom: 1.75rem; }
.nb-section--checks > h2, .nb-section--routes > h2, .nb-section--sources > h2 {
  border-top: .55rem solid var(--nb-ochre);
  padding-top: 1rem;
}
.nb-checkrow {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--nb-rule);
}
.nb-checkrow:first-child { padding-top: .25rem; }
.nb-checkrow p { color: var(--nb-muted); }
.nb-checkmark {
  width: 1.4rem;
  height: 1.4rem;
  background: var(--nb-ochre);
  margin-top: .35rem;
  position: relative;
}
.nb-checkmark::after {
  content: '';
  position: absolute;
  width: .65rem;
  height: .35rem;
  border-left: 2px solid var(--nb-ink);
  border-bottom: 2px solid var(--nb-ink);
  transform: rotate(-45deg);
  top: .35rem;
  left: .35rem;
}
.nb-section--note, .nb-section--alert {
  padding: 3.5rem 1.75rem 2rem;
  border-radius: 7rem 7rem 0 0 / 3rem 3rem 0 0;
  background: var(--nb-paper);
  border-bottom: .5rem solid var(--nb-ochre);
}
.nb-section--note h2 { font-size: 2rem; }
.nb-section--note p { font-size: 1.125rem; line-height: 1.65; }
.nb-section--alert { background: var(--nb-ochre); border-bottom: 4px solid var(--nb-ink); }
.nb-section--alert p:nth-of-type(2) { font-weight: 700; font-size: 1.25rem; }
.nb-routes { border-top: 2px solid var(--nb-ink); }
.nb-route {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  align-items: center;
  padding: .9rem .5rem .9rem 0;
  border-bottom: 1px solid var(--nb-rule);
  font-size: 1.25rem;
}
.nb-route:hover { background: var(--nb-paper); }
.nb-arrow { flex: 0 0 auto; color: var(--nb-ink); font-family: var(--nb-font-heading); }
.nb-source { border-top: 1px solid var(--nb-rule); padding-block: .85rem 1.5rem; }
.nb-source a { display: inline-flex; align-items: center; min-height: var(--nb-target); font-weight: 700; padding-block: .35rem; }
.nb-source p { color: var(--nb-muted); }
.nb-next { border-top: 2px solid var(--nb-ink); padding-block: 2rem 3rem; margin-top: 3.5rem; }
.nb-next h2 { font-size: 2rem; margin-bottom: 1.25rem; }
.nb-next > div { display: flex; flex-wrap: wrap; gap: .75rem; }
.nb-next a {
  display: inline-flex;
  align-items: center;
  min-height: var(--nb-target);
  padding: .65rem 1rem;
  background: var(--nb-ochre);
  color: var(--nb-ink);
  border: 2px solid var(--nb-ink);
  border-radius: 0;
  font-size: 1.0625rem;
}
.nb-next a:hover { background: var(--nb-paper); }
.nb-footer { padding-block: 2rem 3rem; border-top: 4px solid var(--nb-ink); }
.nb-footer-line { max-width: var(--nb-reading-width); font-size: var(--nb-small-size); color: var(--nb-muted); }
.nb-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }
.nb-footer a { font-size: var(--nb-small-size); min-height: var(--nb-target); display: inline-flex; align-items: center; padding-block: .5rem; }

@media (min-width: 68rem) {
  .nb-notes {
    display: grid;
    grid-template-columns: minmax(0, 2.25fr) minmax(15rem, 1fr);
    gap: 3.5rem 4.5rem;
    align-items: start;
    max-width: none;
  }
  .nb-section { grid-column: 1; margin-bottom: 0; }
  .nb-section--note { grid-column: 2; grid-row: 1 / span 2; margin-top: 4.25rem; position: relative; }
  .nb-section--note::before {
    content: '';
    position: absolute;
    top: 3rem;
    left: -2.5rem;
    width: 1.5rem;
    border-top: 2px solid var(--nb-ink);
  }
  .nb-notes:has(> .nb-section--alert) > .nb-section--alert { grid-column: 1 / -1; }
  .nb-notes:has(> .nb-section--alert) > .nb-section--note { grid-row: 2 / span 2; }
  .nb-section--alert { padding: 2rem 3rem; border-radius: 6rem 6rem 0 0; }
  .nb-section--alert p { max-width: 70ch; }
}
@media (max-width: 52rem) {
  .nb-masthead { align-items: center; }
  .nb-hero { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: 2rem 2.5rem; }
  h1 { max-width: 20ch; }
  .nb-geometry { height: 10rem; max-width: 24rem; border-radius: 50% 50% 0 0 / 70% 70% 0 0; justify-self: end; }
  .nb-geometry-grid { inset: 2rem 3.5rem -1rem; transform: rotate(-6deg); }
  .nb-orbit { width: 3rem; height: 1.5rem; top: 4.5rem; left: 5rem; }
  .nb-orbit--small { width: 1rem; height: 1rem; top: 2rem; left: auto; right: 4rem; }
  .nb-sample { bottom: 2.5rem; left: 48%; width: 27%; height: 1.5rem; }
  .nb-sample--small { bottom: 1.6rem; width: 20%; height: 0; }
  .nb-notes { margin-top: 2.5rem; }
  .nb-intro { font-size: 1.25rem; }
}
@media (max-width: 32rem) {
  .nb-masthead { display: block; padding-top: 1.5rem; padding-bottom: 1.25rem; }
  .nb-name { font-size: 1.875rem; }
  .nb-guide-label { margin-top: .3rem; }
  h1, .nb-page--home h1 { max-width: none; font-size: 3.5rem; }
  h2 { font-size: 2rem; }
  .nb-topic { margin-bottom: 1.25rem; }
  .nb-checkrow { column-gap: .85rem; }
  .nb-section--note, .nb-section--alert { padding: 3rem 1.5rem 1.5rem; }
  .nb-section { margin-bottom: 2.75rem; }
  .nb-footer nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .nb-next > div { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  :root { --nb-ground: #ffffff; --nb-paper: #ffffff; --nb-ink: #111111; --nb-muted: #333333; --nb-link: #333333; --nb-ochre: #d2bd70; }
  body { font-size: 12pt; }
  .nb-progress, .nb-geometry, .nb-skip { display: none; }
  .nb-hero { display: block; padding-block: 1.5rem; }
  h1, .nb-page--home h1 { font-size: 2.5rem; max-width: none; }
  .nb-masthead, .nb-main, .nb-footer { padding-inline: 0; }
  .nb-notes { display: block; max-width: none; }
  .nb-section { margin-bottom: 2rem; }
  .nb-section--note, .nb-section--alert { background: transparent; border-radius: 0; padding: 1rem; margin-top: 0; }
  .nb-section--note::before { display: none; }
  .nb-checkrow, .nb-section--alert, .nb-source { break-inside: avoid; }
}