/* Pupilist — shared styles */

html { background: #fff; }
body { margin: 0; color: #1f1f1d; font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.55; }
.page { max-width: 680px; margin: 0 auto; padding: 32px 20px 64px; }

/* header */
.top { display: block; margin-bottom: 40px; }
.mark { font-size: 44px; font-weight: normal; margin: 0; line-height: 1.1; color: #2b2f33; }
.mark a { color: inherit; text-decoration: none; }
.tag { margin: 2px 0 0; font-size: 16px; color: #4a4946; }
.nav { margin: 18px 0 0; }
.nav a { color: #1f1f1d; text-decoration: none; margin-left: 20px; border-bottom: 1px solid #c9c7c0; white-space: nowrap; }
.nav a:first-child { margin-left: 0; }
.nav a.here { border-bottom-color: #1f1f1d; }
@media (min-width: 700px) {
  .top { display: flex; align-items: flex-end; justify-content: space-between; }
  .nav { margin: 0; }
  .nav a:first-child { margin-left: 20px; }
}

/* shared text */
h1 { font-size: 30px; font-weight: normal; line-height: 1.2; margin: 0 0 12px; }
body.home h1 { font-size: 34px; margin-bottom: 14px; }
h2 { font-size: 22px; font-weight: normal; margin: 44px 0 4px; padding-top: 20px; border-top: 1px solid #1f1f1d; }
body.home h2 { font-size: 24px; margin: 52px 0 10px; padding-top: 22px; }
p { margin: 0 0 14px; }
.rule { margin: 0 0 28px; color: #4a4946; }

/* front door */
.lead { font-size: 19px; color: #4a4946; margin: 0 0 22px; }
.go { display: inline-block; font-size: 18px; color: #fff; background: #0f6e56; padding: 12px 20px; text-decoration: none; border-radius: 4px; }
ol.steps { padding-left: 0; margin: 0; list-style: none; counter-reset: step; }
ol.steps li { position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid #c9c7c0; counter-increment: step; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: #1f1f1d; color: #fff; font-size: 16px; text-align: center; line-height: 30px; }
ol.steps li.one { background: #eaf5f0; margin: 0 -14px; padding-left: 60px; padding-right: 14px; border-bottom: none; border-radius: 6px; }
ol.steps li.one::before { left: 14px; background: #0f6e56; }
ol.steps li strong { font-weight: normal; font-size: 19px; display: block; margin-bottom: 4px; }
ol.steps li p { font-size: 16px; color: #4a4946; margin: 0; }
ol.steps li p a { color: #0f6e56; }
.why p { font-size: 17px; }
.why a { color: #0f6e56; }
.why strong { font-weight: bold; }
.track { position: relative; height: 44px; margin: 18px 0 0; overflow: hidden; }
.horse { position: absolute; left: -80px; top: 0; width: 72px; height: 44px; }
.track.run .horse { animation: gallop 1.6s linear forwards; }
@keyframes gallop { from { left: -80px; } to { left: 100%; } }

/* names page */
.jumps { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 16px; color: #9a9893; padding: 12px 0; border-top: 1px solid #1f1f1d; border-bottom: 1px solid #c9c7c0; margin-bottom: 6px; }
.jumps a { color: #1f1f1d; text-decoration: none; }
.name { display: block; font-size: 22px; line-height: 1.5; color: #1f1f1d; text-decoration: none; padding: 10px 0; border-bottom: 1px solid #c9c7c0; cursor: pointer; }
.name.open { border-bottom: none; }
.srcs { display: none; padding: 6px 0 14px 14px; border-left: 2px solid #0f6e56; margin: 0 0 12px; }
.srcs.show { display: block; }
.order { margin: 4px 0 14px; font-size: 15px; color: #6b6a66; }
.src { margin: 0 0 16px; }
.src a { font-size: 18px; line-height: 1.45; color: #0f6e56; text-decoration: underline; text-underline-offset: 3px; }
.src .num { font-size: 18px; color: #1f1f1d; }
.src p { margin: 3px 0 0; font-size: 15px; color: #4a4946; }
.src p a { font-size: 15px; color: #6b6a66; }
.note { margin-top: 40px; padding-top: 18px; border-top: 1px solid #1f1f1d; font-size: 16px; line-height: 1.65; color: #4a4946; }

/* approved sources page */
.map { margin: 0 0 8px; width: 100%; }
.what { margin: 0 0 22px; color: #4a4946; }
.host { margin: 0 0 20px; }
.host a { color: #0f6e56; text-decoration: underline; text-underline-offset: 3px; }
.host .name-h { font-size: 18px; }
.host .domain { color: #6b6a66; font-size: 15px; }
.host p { margin: 2px 0 0; font-size: 16px; }
.host .checked { color: #4a4946; font-size: 15px; }
.dis { margin-top: 56px; padding-top: 20px; border-top: 1px solid #1f1f1d; }
.dis h2 { border: 0; margin-top: 0; padding-top: 0; }
.dis p { margin: 0 0 14px; font-size: 16px; }
.dis a { color: #0f6e56; }
.dis strong { font-weight: bold; }