:root { color-scheme: light; --ground: #eff5fa; --ink: #233e76; --blue: #2445a5; --soft: #dbe6f5; --butter: #f4d673; --white: #ffffff; --quiet: #46597a; }
body { color: var(--ink); background: var(--ground); }
a { color: var(--blue); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: .14em; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
::selection { color: var(--ink); background: var(--butter); }
.mast { border-bottom: 2px solid var(--blue); }
.sig span { color: var(--quiet); }
.emblem { background: var(--butter); color: var(--blue); border-radius: 50%; }
.crumb { color: var(--quiet); }
.crumb li + li::before { color: var(--quiet); }
.eyebrow { color: var(--quiet); }
h1 { color: var(--blue); }
.home .lead { position: relative; }
.home h1 { position: relative; isolation: isolate; }
.home h1::after { content: ''; position: absolute; z-index: -1; height: .13em; width: 1.7em; background: var(--butter); left: .05em; bottom: -.07em; transform: rotate(-4deg); }
.hero { border-bottom: 2px solid var(--blue); }
.turn { background: var(--white); border-radius: 0 2rem 2rem 0; overflow: hidden; }
.mix { color: var(--ink); background: var(--soft); }
.mix > p:first-child { color: var(--quiet); }
.answer { border-left: .6rem solid var(--butter); }
.date { color: var(--quiet); }
.ref { border-radius: 1rem; }
.ref:hover { background: var(--soft); }
.jump { background: var(--soft); border-radius: 1.3rem; }
.jump[open] { background: var(--white); box-shadow: 0 .45rem 0 var(--soft); }
.jump a[aria-current='location'] { text-decoration-thickness: .17em; font-weight: 600; }
.margin-note { color: var(--quiet); }
.margin-note span { color: var(--blue); }
.ck li + li { border-top: 1px solid #bccce3; }
.ck li::before { background: var(--butter); color: var(--ink); border-radius: 50%; }
.note { background: var(--butter); border-radius: 0 2rem 2rem 2rem; }
.note .ref:hover { background: #fff1be; }
.entry { color: var(--ink); background: var(--white); text-decoration: none; border-radius: 1.2rem 1.2rem 1.2rem 0; box-shadow: 0 .3rem 0 var(--soft); }
.entry:nth-child(3n + 2) { background: var(--soft); box-shadow: 0 .3rem 0 #c4d4eb; }
.entry:nth-child(5n) { background: var(--butter); box-shadow: 0 .3rem 0 #ddc166; }
.entry:hover strong { text-decoration: underline; text-underline-offset: .15em; }
.mark { color: var(--blue); }
.src { border-top: 2px solid var(--blue); padding-top: 1.5rem; }
.src li + li { border-top: 1px solid #bccce3; }
.src a { text-decoration: none; }
.src a strong { text-decoration: underline; text-underline-offset: .2em; }
.src a span { color: var(--quiet); }
.letter { color: var(--ink); background: var(--soft); border-radius: 50%; }
.next { border-top: 2px solid var(--blue); }
.next a { text-decoration: none; }
.next a:hover { text-decoration: underline; }
.next p { color: var(--quiet); }
.foot { border-top: 2px solid var(--blue); }
.skip { color: var(--white); background: var(--blue); border-radius: 1rem; }
.lost ul { list-style: none; margin: 1.5rem 0; padding: 0; }
@media (max-width: 40rem) {
  .turn { border-radius: 0 1.5rem 1.5rem 0; }
  .answer { border-left-width: .4rem; }
}
@media print {
  body { color: #172c50; background: white; }
  .entry, .jump, .turn, .note { box-shadow: none; }
}